From 619f800ae7d64a8e7bc8c7f80d5e29e6373d1a9d Mon Sep 17 00:00:00 2001 From: laoyang Date: Thu, 5 Nov 2026 20:03:05 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=8C=89=E9=92=AE=E4=BB=8E?= =?UTF-8?q?=E5=BA=95=E6=A0=8F=E7=A7=BB=E5=88=B0=E5=86=85=E5=AE=B9=E6=9C=80?= =?UTF-8?q?=E5=BA=95=E9=83=A8=EF=BC=88=E5=8D=B1=E9=99=A9=E6=93=8D=E4=BD=9C?= =?UTF-8?q?=E5=8C=BA=EF=BC=89(#77)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户 2026-11-05：「删除按钮不能出现在那里，因为这样太容易误触了。 删除按钮应该放在哪里？你考虑考虑。」 放在**滚动内容的最末尾**。 为什么不在底栏（原来和「保存」并排）： ① **误触**：底栏是"保存"这种高频操作的位置，手一滑就点到删除， 而删除**不可恢复**，一次误触 = 数据没了。 ② **语义错位**：底栏是"我改完了、要留下这个结果"的确认区， 不该混进"我要毁掉它"。 为什么不放顶栏：顶栏是"知道我在哪 / 怎么退出"的位置， 在那里放删除，误触代价同样不可恢复（还紧挨着关闭按钮）。 放最底部的好处： · 用户得主动滚到最底才看得见 —— 低频操作不必首屏可见； · 纯文字（fontTiny）、无填充底色，**不像按钮**，不招手指； · 与正文隔一条分割线，视觉上属于"其它"，不属于"操作"； · 这是通行做法（Notion / 备忘录 / 各类设置页的删除都在最底部）。 二次确认也重做了： 第一下「删除这个任务」→ 变成「删了就找不回来了，确定吗？」+ [确定删掉] [取消] 原来只有"再点一次"、没有取消出口，误点后只能点别处退出 （不明显）。现在有明确的「取消」可退。 底栏现在只剩**全宽的「保存」**，视觉上更明确：这一条就是"确认改动"。 编译通过，已装真机。 --- entry/src/main/ets/components/FbTaskPanel.ets | 105 ++++++++++++++++-- 1 file changed, 94 insertions(+), 11 deletions(-) diff --git a/entry/src/main/ets/components/FbTaskPanel.ets b/entry/src/main/ets/components/FbTaskPanel.ets index 3938255..ce17532 100644 --- a/entry/src/main/ets/components/FbTaskPanel.ets +++ b/entry/src/main/ets/components/FbTaskPanel.ets @@ -899,6 +899,10 @@ export struct FbTaskPanel { 就会被判定为"已到底"，滚不过去也看不见。 ⇒ 底部留一块**足够高**的空白（不是 6vp 意思一下）， 保证最后一行能滚到可视区中间。 */ + /* #77s：删除放在**所有内容之后** —— 要滚到底才看得到， + 误触概率基本为零（理由见 dangerZone 的注释）。 */ + this.dangerZone() + Row().height(28) } .width('100%') @@ -2018,6 +2022,91 @@ export struct FbTaskPanel { .alignItems(HorizontalAlign.Start) } + /** + * 危险操作区：删除任务 —— 放在**滚动内容的最底部**。 + * + * 🔴🔴 #77s（用户 2026-11-05）：「删除按钮不能出现在那里， + * 因为这样太容易误触了。删除按钮应该放在哪里？你考虑考虑。」 + * + * 原来它和「保存」并排钉在底栏，两个问题： + * ① **误触**：底栏是"保存"这种高频操作的位置，手一滑就点到删除， + * 而删除**不可恢复**，一次误触 = 数据没了。 + * ② **语义错位**：底栏是"我改完了、要留下这个结果"的确认区， + * 不该混进"我要毁掉它"。 + * + * 所以放到**滚动内容最末尾**： + * · 用户得主动滚到最底才看得见 —— 低频操作不必首屏可见； + * · 纯文字、无填充底色，不像按钮，不招手指； + * · 与正文隔一条分割线，视觉上属于"其它"，不属于"操作"； + * · 仍然保留**二次确认**（第一下变成「确定删掉」+「取消」）。 + * + * ⚠️ 这是通行做法（Notion / 备忘录 / 各种设置页的删除都在最底部）， + * 不是在发明新交互。 + * ⚠️ 不放顶栏：顶栏是"知道我在哪 / 怎么退出"的位置， + * 在那里放删除，误触代价同样不可恢复。 + * ⚠️ 不用红底大白按钮：那种视觉权重会把人引过去，与"低频 + 危险"正相反。 + */ + @Builder + dangerZone() { + Column({ space: 0 }) { + Divider() + .color(FbColors.line) + .margin({ top: 18, bottom: 14 }) + + if (this.confirmDel) { + /* 第一次已点：写清后果 + 两个出口 */ + Text('删了就找不回来了，确定吗？') + .fontSize(FbMetric.fontTiny) + .fontColor('#C0533F') + .width('100%') + .margin({ bottom: 8 }) + + Row({ space: 10 }) { + Text('确定删掉') + .fontSize(FbMetric.fontSmall) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .layoutWeight(1) + .height(40) + .backgroundColor('#C0533F') + .borderRadius(FbMetric.radiusS) + .onClick((): void => { + this.dropTask(); + }) + + /* 「取消」必须有：误点进来要能退回去， + 否则只剩"删"和"点别处"两个选择，后者不明显。 */ + Text('取消') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.muted) + .textAlign(TextAlign.Center) + .layoutWeight(1) + .height(40) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .onClick((): void => { + this.confirmDel = false; + this.note = ''; + }) + } + .width('100%') + } else { + /* 常态：一行小字，居中，不像按钮 */ + Text('删除这个任务') + .fontSize(FbMetric.fontTiny) + .fontColor('#C0533F') + .textAlign(TextAlign.Center) + .width('100%') + .padding({ top: 10, bottom: 10 }) + .onClick((): void => { + /* 第一下只进确认态，不删 */ + this.confirmDel = true; + }) + } + } + .width('100%') + } + /** 底部：编辑 / 删除 */ @Builder footBar() { @@ -2047,17 +2136,11 @@ export struct FbTaskPanel { this.saveAll(); }) - Text(this.confirmDel ? '确定删掉' : '删除') - .fontSize(FbMetric.fontSmall) - .fontColor(this.confirmDel ? Color.White : '#C0533F') - .textAlign(TextAlign.Center) - .width(88) - .height(42) - .backgroundColor(this.confirmDel ? '#C0533F' : '#FDECEC') - .borderRadius(FbMetric.radiusS) - .onClick((): void => { - this.dropTask(); - }) + /* 🔴🔴 #77s（用户 2026-11-05）：「删除按钮不能出现在那里， + 因为这样太容易误触了。」 + ⇒ 从底栏摘掉，移到滚动内容最末尾的 dangerZone()。 + 底栏只留全宽的「保存」—— 它是"确认改动"的位置， + 不该混进"毁掉数据"的入口。 */ } .width('100%') .margin({ top: 12 })