Neo-ZQYY/tmp/DEMO-miniprogram/miniprogram/pages/notes/DELETE_FEATURE.md

Notes 页面删除功能实现说明

更新日期

2026-03-14

功能描述

为每条备注添加删除按钮，放置在日期左侧，交互和逻辑参考任务详情页的备注删除处理方式。

---

实现细节

1. WXML 结构调整

原结构

<view class="note-bottom">
  <text class="note-tag">{{item.tagLabel}}</text>
  <text class="note-time">{{item.createdAt}}</text>
</view>

新结构

<view class="note-bottom">
  <view class="note-bottom-left">
    <view class="note-delete-btn" catchtap="onDeleteNote" data-id="{{item.id}}" hover-class="note-delete-btn--hover">
      <t-icon name="delete" size="20px" color="#a6a6a6" />
    </view>
    <text class="note-time">{{item.createdAt}}</text>
  </view>
  <text class="note-tag">{{item.tagLabel}}</text>
</view>

关键点：

• 使用 catchtap 而非 bindtap，阻止事件冒泡
• 删除按钮放在左侧，日期紧随其后
• 标签移到右侧
• 通过 data-id 传递备注ID

2. WXSS 样式添加

/* 底部容器布局调整 */
.note-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 左侧容器（删除按钮 + 日期）*/
.note-bottom-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 删除按钮样式 */
.note-delete-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.note-delete-btn--hover {
  background-color: #f3f3f3;
}

样式说明：

• 删除按钮尺寸：32px × 32px（符合最小点击区域44px的80%）
• Icon尺寸：20px（与H5原型对齐）
• Icon颜色：#a6a6a6（gray-6，次级文字颜色）
• Hover效果：浅灰背景（#f3f3f3）
• 按钮与日期间距：8px

3. TypeScript 逻辑实现

/** 删除备注 */
onDeleteNote(e: WechatMiniprogram.BaseEvent) {
  const noteId = e.currentTarget.dataset.id as string
  wx.showModal({
    title: '删除备注',
    content: '确定要删除这条备注吗？删除后无法恢复。',
    confirmColor: '#e34d59',
    success: (res) => {
      if (res.confirm) {
        const notes = this.data.notes.filter((n) => n.id !== noteId)
        this.setData({ notes })
        wx.showToast({ title: '已删除', icon: 'success' })
      }
    },
  })
}

逻辑说明：

• 从 dataset 中获取备注ID
• 使用 wx.showModal 显示确认弹窗
• 确认按钮颜色：#e34d59（error色，警示作用）
• 确认后过滤掉对应备注
• 显示成功提示

---

参考实现

任务详情页删除逻辑

位置：apps/miniprogram/miniprogram/pages/task-detail/task-detail.ts

/** 删除备注 */
onDeleteNote(e: WechatMiniprogram.BaseEvent) {
  const noteId = e.currentTarget.dataset.id as string
  wx.showModal({
    title: '删除备注',
    content: '确定要删除这条备注吗？删除后无法恢复。',
    confirmColor: '#e34d59',
    success: (res) => {
      if (res.confirm) {
        const notes = this.data.sortedNotes.filter((n) => n.id !== noteId)
        this.setData({ sortedNotes: notes })
        wx.showToast({ title: '已删除', icon: 'success' })
      }
    },
  })
}

差异点：

• 任务详情页使用 sortedNotes，notes页使用 notes
• 其他逻辑完全一致

---

交互流程

1. 用户点击删除按钮
2. 显示确认弹窗："确定要删除这条备注吗？删除后无法恢复。"
3. 用户选择：
   • 确认：删除备注，显示"已删除"提示
   • 取消：关闭弹窗，不做任何操作

---

视觉效果

布局

┌─────────────────────────────────────────┐
│ 备注内容文本...                          │
│                                         │
│ [🗑️] 2024-11-27 16:00    [客户：王先生] │
└─────────────────────────────────────────┘

尺寸对比

元素	尺寸	说明
删除按钮容器	32px × 32px	圆形点击区域
删除icon	20px	TDesign delete图标
按钮与日期间距	8px	gap
日期字号	12px	text-xs
标签字号	12px	text-xs

---

颜色规范

元素	颜色	色值	说明
删除icon	gray-6	#a6a6a6	次级文字颜色
Hover背景	gray-1	#f3f3f3	浅灰背景
确认按钮	error	#e34d59	警示色

---

测试清单

• 删除按钮显示正确
• 删除按钮位置正确（日期左侧）
• 点击删除按钮显示确认弹窗
• 确认删除后备注消失
• 取消删除后备注保留
• 删除成功显示提示
• Hover效果正常
• 事件不冒泡（使用catchtap）
• 代码无linting错误

---

文件变更清单

1. notes.wxml - 添加删除按钮结构
2. notes.wxss - 添加删除按钮样式
3. notes.ts - 添加删除逻辑
4. DELETE_FEATURE.md - 本文档

---

后续优化建议

1. API集成：当前为前端删除，需要对接后端API实现真实删除
2. 撤销功能：考虑添加"撤销删除"功能（3秒内可撤销）
3. 批量删除：如果需要，可以添加批量删除功能
4. 权限控制：根据用户角色控制删除权限

---

参考文档

• 桥文档：docs/miniprogram-dev/h5-to-mp-bridge-v3.md
• 任务详情页：apps/miniprogram/miniprogram/pages/task-detail/task-detail.ts
• TDesign图标：https://tdesign.tencent.com/miniprogram/components/icon