Neo-ZQYY/apps/miniprogram/doc/TASK_ABANDON_IMPROVEMENTS.md

任务放弃功能改进说明

更新日期：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

新增方法：

// 长按菜单 - 取消放弃（已放弃任务）
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 键盘高度获取

onAbandonTextareaFocus(e: WechatMiniprogram.InputEvent) {
  const height = (e as any).detail?.height ?? 0
  this.setData({ keyboardHeight: height })
}

6.2 禁用默认键盘调整

<textarea
  adjust-position="{{false}}"
  bindfocus="onAbandonTextareaFocus"
  bindblur="onAbandonTextareaBlur"
/>

6.3 动态样式绑定

<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 键盘占位

<!-- 键盘弹出时的占位，防止内容被遮挡 -->
<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