221 lines
5.5 KiB
Markdown
221 lines
5.5 KiB
Markdown
# 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
|