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 })