260 lines
7.8 KiB
Markdown
260 lines
7.8 KiB
Markdown
# 任务放弃功能改进说明
|
||
|
||
> 更新日期：2026-03-14
|
||
> 相关需求：任务列表页长按放弃任务的交互优化
|
||
|
||
---
|
||
|
||
## 改进内容概述
|
||
|
||
### 1. PRD文档更新
|
||
|
||
**文件**：`docs/prd/specs/P4-miniapp-core-business.md`
|
||
|
||
**新增内容**：
|
||
- 补充了"任务类型与任务状态的关系"章节
|
||
- 明确了任务类型（task_type）和任务状态（status）是两套独立维度
|
||
- 说明了置顶状态（is_pinned）独立于任务状态
|
||
- 定义了前端展示规则和长按菜单规则
|
||
- 更新了任务状态机，增加"取消放弃"流程
|
||
|
||
**核心原则**：
|
||
- 任务类型：描述业务性质（高优先召回/优先召回/客户回访/关系构建）
|
||
- 任务状态：描述生命周期（active/inactive/completed/abandoned）
|
||
- 置顶状态：独立标记，可对任何有效任务置顶
|
||
|
||
---
|
||
|
||
## 2. 任务列表页改进
|
||
|
||
### 2.1 长按菜单优化
|
||
|
||
**文件**：`apps/miniprogram/miniprogram/pages/task-list/task-list.wxml`
|
||
|
||
**改进点**：
|
||
- 已放弃任务长按时，显示"取消放弃"选项（使用 ↩️ emoji）
|
||
- 一般/置顶任务显示标准菜单（置顶/备注/问问AI/放弃任务）
|
||
- 使用 `wx:if` 和 `wx:else` 区分两种菜单状态
|
||
|
||
### 2.2 取消放弃逻辑
|
||
|
||
**文件**：`apps/miniprogram/miniprogram/pages/task-list/task-list.ts`
|
||
|
||
**新增方法**：
|
||
```typescript
|
||
// 长按菜单 - 取消放弃（已放弃任务）
|
||
onCtxCancelAbandon()
|
||
|
||
// 取消放弃任务 - 将任务从已放弃列表移出至一般任务
|
||
_updateTaskCancelAbandon(taskId: string)
|
||
```
|
||
|
||
**特点**：
|
||
- 点击"取消放弃"后直接执行，无需二次确认
|
||
- 任务状态从 `abandoned` 改为 `pending`
|
||
- 自动取消置顶状态（`is_pinned=false`）
|
||
- 清除放弃原因
|
||
- 任务从"已放弃"区域移至"一般任务"区域
|
||
|
||
### 2.3 放弃弹窗键盘交互
|
||
|
||
**文件**：
|
||
- `apps/miniprogram/miniprogram/pages/task-list/task-list.wxml`
|
||
- `apps/miniprogram/miniprogram/pages/task-list/task-list.ts`
|
||
- `apps/miniprogram/miniprogram/pages/task-list/task-list.wxss`
|
||
|
||
**改进点**：
|
||
1. **WXML 改进**：
|
||
- 添加 `bindfocus` 和 `bindblur` 事件监听
|
||
- 添加 `adjust-position="{{false}}"` 禁用默认键盘调整
|
||
- 添加键盘占位 `<view>` 防止内容被遮挡
|
||
- 按钮区域支持浮动定位
|
||
|
||
2. **TypeScript 改进**：
|
||
- 新增 `keyboardHeight` 状态管理
|
||
- 新增 `onAbandonTextareaFocus` 方法（键盘弹出）
|
||
- 新增 `onAbandonTextareaBlur` 方法（键盘收起）
|
||
- 关闭弹窗时重置键盘高度
|
||
|
||
3. **WXSS 改进**：
|
||
- 添加 `.abandon-overlay--keyboard-open` 类（键盘弹出时弹窗上移）
|
||
- 添加 `.abandon-actions--float` 类（按钮固定在键盘上方）
|
||
- 添加过渡动画效果
|
||
- textarea 获得焦点时边框变蓝
|
||
|
||
---
|
||
|
||
## 3. 任务详情页改进
|
||
|
||
### 3.1 取消放弃逻辑
|
||
|
||
**文件**：`apps/miniprogram/miniprogram/pages/task-detail/task-detail.ts`
|
||
|
||
**改进点**：
|
||
- `onAbandon()` 方法中判断任务状态
|
||
- 如果已放弃（`status === 'abandoned'`），直接调用 `cancelAbandon()`
|
||
- 无需二次确认，直接修改状态为 `pending`
|
||
|
||
### 3.2 放弃弹窗键盘交互
|
||
|
||
**文件**：
|
||
- `apps/miniprogram/miniprogram/pages/task-detail/task-detail.wxml`
|
||
- `apps/miniprogram/miniprogram/pages/task-detail/task-detail.ts`
|
||
- `apps/miniprogram/miniprogram/pages/task-detail/task-detail.wxss`
|
||
|
||
**改进点**（与任务列表页一致）：
|
||
1. **WXML 改进**：
|
||
- 添加键盘事件监听
|
||
- 添加键盘占位区域
|
||
- 按钮区域支持浮动定位
|
||
- 使用 `abandon-footer` 替代原有按钮容器
|
||
|
||
2. **TypeScript 改进**：
|
||
- 新增 `keyboardHeight` 状态
|
||
- 新增 `onAbandonTextareaFocus` 方法
|
||
- 新增 `onAbandonTextareaBlur` 方法
|
||
|
||
3. **WXSS 改进**：
|
||
- 弹窗从底部对齐改为顶部对齐（`align-items: flex-end`）
|
||
- 键盘弹出时移到顶部（`align-items: flex-start`）
|
||
- 按钮区域固定在键盘上方
|
||
- 添加过渡动画
|
||
|
||
---
|
||
|
||
## 4. 备注弹窗组件
|
||
|
||
**文件**：`apps/miniprogram/miniprogram/components/note-modal/`
|
||
|
||
**现状**：
|
||
- 备注弹窗组件已经实现了完整的键盘交互支持
|
||
- 任务列表页和任务详情页都使用该共享组件
|
||
- 无需额外修改
|
||
|
||
**已有功能**：
|
||
- `keyboardHeight` 状态管理
|
||
- `onTextareaFocus` / `onTextareaBlur` 事件处理
|
||
- `modal-overlay--keyboard-open` 样式类
|
||
- 键盘弹出时弹窗上移
|
||
- 保存按钮固定在键盘上方
|
||
|
||
---
|
||
|
||
## 5. 用户体验改进总结
|
||
|
||
### 5.1 取消放弃功能
|
||
- ✅ 已放弃任务长按显示"取消放弃"选项
|
||
- ✅ 点击后直接执行，无需二次确认
|
||
- ✅ 任务自动移回一般任务区域
|
||
- ✅ 清除放弃原因和置顶状态
|
||
|
||
### 5.2 键盘交互优化
|
||
- ✅ 输入放弃原因时，键盘弹出不遮挡输入框
|
||
- ✅ 弹窗自动上移，确保内容可见
|
||
- ✅ 按钮固定在键盘上方，方便操作
|
||
- ✅ 添加过渡动画，交互流畅
|
||
- ✅ 输入框获得焦点时边框变蓝，视觉反馈清晰
|
||
|
||
### 5.3 一致性改进
|
||
- ✅ 任务列表页和任务详情页的放弃弹窗交互一致
|
||
- ✅ 放弃弹窗和备注弹窗的键盘交互一致
|
||
- ✅ 所有弹窗都遵循相同的设计模式
|
||
|
||
---
|
||
|
||
## 6. 技术实现要点
|
||
|
||
### 6.1 键盘高度获取
|
||
```typescript
|
||
onAbandonTextareaFocus(e: WechatMiniprogram.InputEvent) {
|
||
const height = (e as any).detail?.height ?? 0
|
||
this.setData({ keyboardHeight: height })
|
||
}
|
||
```
|
||
|
||
### 6.2 禁用默认键盘调整
|
||
```xml
|
||
<textarea
|
||
adjust-position="{{false}}"
|
||
bindfocus="onAbandonTextareaFocus"
|
||
bindblur="onAbandonTextareaBlur"
|
||
/>
|
||
```
|
||
|
||
### 6.3 动态样式绑定
|
||
```xml
|
||
<view
|
||
class="abandon-overlay {{keyboardHeight > 0 ? 'abandon-overlay--keyboard-open' : ''}}"
|
||
>
|
||
<view class="abandon-actions {{keyboardHeight > 0 ? 'abandon-actions--float' : ''}}"
|
||
style="{{keyboardHeight > 0 ? 'bottom: ' + keyboardHeight + 'px;' : ''}}">
|
||
</view>
|
||
</view>
|
||
```
|
||
|
||
### 6.4 键盘占位
|
||
```xml
|
||
<!-- 键盘弹出时的占位，防止内容被遮挡 -->
|
||
<view wx:if="{{keyboardHeight > 0}}" style="height: {{keyboardHeight}}px;"></view>
|
||
```
|
||
|
||
---
|
||
|
||
## 7. 测试建议
|
||
|
||
### 7.1 功能测试
|
||
- [ ] 长按已放弃任务，验证显示"取消放弃"选项
|
||
- [ ] 点击"取消放弃"，验证任务移回一般任务区域
|
||
- [ ] 验证取消放弃后任务状态为 `pending`，置顶状态为 `false`
|
||
- [ ] 长按一般/置顶任务，验证显示标准菜单
|
||
|
||
### 7.2 键盘交互测试
|
||
- [ ] 点击放弃原因输入框，验证键盘弹出
|
||
- [ ] 验证弹窗自动上移，内容不被键盘遮挡
|
||
- [ ] 验证按钮固定在键盘上方
|
||
- [ ] 验证输入框获得焦点时边框变蓝
|
||
- [ ] 验证点击空白区域或取消按钮，键盘收起
|
||
|
||
### 7.3 兼容性测试
|
||
- [ ] iOS 设备测试
|
||
- [ ] Android 设备测试
|
||
- [ ] 不同屏幕尺寸测试
|
||
- [ ] 不同键盘高度测试
|
||
|
||
---
|
||
|
||
## 8. 相关文件清单
|
||
|
||
### PRD 文档
|
||
- `docs/prd/specs/P4-miniapp-core-business.md`
|
||
|
||
### 任务列表页
|
||
- `apps/miniprogram/miniprogram/pages/task-list/task-list.wxml`
|
||
- `apps/miniprogram/miniprogram/pages/task-list/task-list.ts`
|
||
- `apps/miniprogram/miniprogram/pages/task-list/task-list.wxss`
|
||
|
||
### 任务详情页
|
||
- `apps/miniprogram/miniprogram/pages/task-detail/task-detail.wxml`
|
||
- `apps/miniprogram/miniprogram/pages/task-detail/task-detail.ts`
|
||
- `apps/miniprogram/miniprogram/pages/task-detail/task-detail.wxss`
|
||
|
||
### 共享组件
|
||
- `apps/miniprogram/miniprogram/components/note-modal/note-modal.wxml`
|
||
- `apps/miniprogram/miniprogram/components/note-modal/note-modal.ts`
|
||
- `apps/miniprogram/miniprogram/components/note-modal/note-modal.wxss`
|
||
|
||
---
|
||
|
||
## 9. 后续优化建议
|
||
|
||
1. **数据持久化**：当前为前端 mock 数据，后续需要对接后端 API
|
||
2. **动画优化**：可以为任务移动添加更流畅的过渡动画
|
||
3. **错误处理**：添加网络请求失败的错误提示
|
||
4. **埋点统计**：添加取消放弃操作的埋点，用于数据分析
|
||
5. **无障碍支持**：添加 aria-label 等无障碍属性
|
||
|
||
---
|
||
|
||
**文档维护者**：AI Assistant
|
||
**最后更新**：2026-03-14
|