# Notes 页面删除功能实现说明

## 更新日期
2026-03-14

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

---

## 实现细节

### 1. WXML 结构调整

#### 原结构
```xml
<view class="note-bottom">
  <text class="note-tag">{{item.tagLabel}}</text>
  <text class="note-time">{{item.createdAt}}</text>
</view>
```

#### 新结构
```xml
<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 样式添加

```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 逻辑实现

```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`

```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.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 | 警示色 |

---

## 测试清单

- [x] 删除按钮显示正确
- [x] 删除按钮位置正确（日期左侧）
- [x] 点击删除按钮显示确认弹窗
- [x] 确认删除后备注消失
- [x] 取消删除后备注保留
- [x] 删除成功显示提示
- [x] Hover效果正常
- [x] 事件不冒泡（使用catchtap）
- [x] 代码无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