# 任务说明书 — 管理后台分配模式 Tab 收编 > **版本**: v1.0 | **日期**: 2026-07-28 > **状态**: 待执行 --- ## 📋 基本信息 | 项目 | 内容 | |------|------| | **任务名称** | 管理后台分配模式 Tab 收编（v1.2） | | **关联需求编号** | REQ-集成-002-v1.2 | | **优先级** | 🟡 P2 | | **类型** | UI 改造（页面结构） | | **状态** | 待执行 | | **负责人** | 待指派 | | **创建日期** | 2026-07-28 | | **预计完成日期** | 2026-07-29 | | **涉及端** | 仅前端（管理后台 frontend-admin） | --- ## 📥 输入项来源 ### 产品需求 | 来源文档 | 相关章节 | 说明 | |----------|----------|------| | `docs/01-产品文档/08-集成生态/PRD-REQ-集成-002-管理后台-v1.0.md` | §5.1 页面树 / §5.2 导航分组 / §5.3 页面映射 / §9.2 占位表 / §12 变更日志（v1.2） | v1.2 已完成 PRD 改造，删除「分配模式」菜单项与独立页，合并入坐席管理 Tab | | 同上 §12 v1.2 关键变更说明 | — | 决策依据、影响范围已记录 | ### 技术方案 | 来源文档 | 相关章节 | 说明 | |----------|----------|------| | `docs/02-技术文档/技术方案-REQ-集成-002-管理后台v1.2-分配模式Tab收编.md` | §3 前端改造详细设计 | 本任务的核心实施依据 | ### 原型设计 | 来源文档 | 相关章节 | 说明 | |----------|----------|------| | `docs/01-产品文档/08-集成生态/原型-REQ-集成-000-管理后台-v1.0.html` | 坐席管理页（`#page-agents`）| Tab 1 坐席列表 / Tab 2 分配策略（含 6 模式卡片）| ### 需了解的现有代码 | 模块/文件 | 说明 | 需了解的内容 | |-----------|------|-------------| | `src/frontend-admin/src/views/Agents.vue` | 坐席管理页（改造目标）| 现有 `` 引用、3 个 `el-dialog`（编辑/添加/重置密码）、`agentStore` 用法、`skillTagOptions`、`statusTabs` | | `src/frontend-admin/src/views/AssignmentMode.vue` | 旧分配模式页（迁移来源）| `modes` 数组、`currentMode`、`selectMode` 函数、`getModeDescription`/`getLockReason`、`getAssignmentMode`/`apiUpdateMode` 调用 | | `src/frontend-admin/src/router/index.ts` | 路由表（删路由项）| 现有 `/admin/assignment-mode` 路由配置位置 | | `src/frontend-admin/src/api/admin.ts` | API 封装（**不动**）| `getAssignmentMode`/`updateAssignmentMode` 已有导出 | | `src/frontend-admin/src/types/index.ts` | 类型定义（**不动**）| `AssignmentMode` 类型、`SKILL_TAGS` 常量 | | `src/frontend-admin/src/stores/agent.ts` | 坐席 Store（提供人数）| `loadAgents` 方法、`agents` 列表 | --- ## 📤 输出成果要求 ### 交付物清单 | # | 交付物 | 类型 | 说明 | |---|--------|------|------| | 1 | `src/frontend-admin/src/views/Agents.vue` | 代码（修改） | 顶层加 ``，原内容迁入 Tab 1，新增 Tab 2「分配策略」 | | 2 | `src/frontend-admin/src/views/AssignmentMode.vue` | 代码（保留+注释） | 文件保留，顶部加注释「v1.2 起停用，仅供未来回滚」 | | 3 | `src/frontend-admin/src/router/index.ts` | 代码（修改） | 删除 `/admin/assignment-mode` 路由项 | | 4 | `docs/03-测试文档/03-功能测试用例/TC-集成-002-分配模式Tab收编.md` | 测试用例（新建，可选）| Tab 切换 + 6 卡片渲染 + 锁定态 + API 兼容（按技术方案 §6 验证清单编写） | ### 验收要点 1. **菜单项消失**：左侧导航「知识与 AI」组无「分配模式」入口，原型图与代码保持一致。 2. **Tab 切换正常**：默认进 Tab 1（坐席列表），点 Tab 2 显示 6 张模式卡片。 3. **6 卡片完整**：「手动接单」高亮 + 「当前启用」tag；其余 5 张 `opacity:0.5` + 锁图标 + 解锁条件文案。 4. **引导条准确**：Tab 2 顶部显示当前坐席人数（取自 `agentStore.agents.length`）。 5. **API 兼容**：浏览器 Network 面板中 `GET /admin/assignment-mode` 返回 200。 6. **构建通过**：`npm run build` 无 TS 报错、无 lint 报错。 7. **现有功能回归**：坐席列表的添加/编辑/删除/OTP 解绑/密码重置全部不受影响。 --- ## 🔧 验证方式 | 类型 | 方式 | |------|------| | **路由层** | 浏览器地址栏访问 `/admin/assignment-mode` → 404 或重定向到 `/admin/agents`；访问 `/admin/agents` 正常显示 | | **UI 层** | 浏览器（Chrome DevTools 深色主题）打开 `/admin/agents`，目视确认 Tab 切换 + 6 卡片渲染 + 锁定态 | | **API 层** | 浏览器 Network 面板 / `curl -H 'X-Forwarded-For: 10.240.1.100' http://10.90.5.110:8000/admin/assignment-mode` 返回 200 + 期望 JSON | | **回归** | 坐席管理原有功能（添加/编辑/删除/OTP/密码重置）逐一手动验证一次 | | **构建** | `npm run build` 成功 + `dist/assets/*.css` 的 hash 变化（确认源码改了，不是缓存） | | **部署** | `Compress-Archive` + `v2_ops.py upload` + 服务器解压 + `docker restart wecom_it_nginx`（按 SOP） | --- ## ✅ 完成标准 - [ ] 路由表删除 `/admin/assignment-mode` - [ ] `Agents.vue` 加 `` + Tab 2「分配策略」可切换 - [ ] 6 张模式卡片全部渲染，「手动接单」高亮 - [ ] Tab 2 顶部引导条显示当前坐席人数 - [ ] 坐席管理原有 CRUD/OTP/密码重置功能 100% 不受影响 - [ ] `AssignmentMode.vue` 文件保留，顶部加"v1.2 起停用"注释 - [ ] `npm run build` 通过 - [ ] 后端 API（`GET/PUT /api/admin/assignment-mode`）200 OK，无回归 - [ ] （可选）TC-集成-002 测试用例已编写 - [ ] （可选）部署到生产并通过 agent-browser 端到端验证 --- ## 📝 实施步骤建议 | 步骤 | 操作 | 预计耗时 | |------|------|----------| | 1 | 本地读取 `Agents.vue` 与 `AssignmentMode.vue`，画好迁移映射 | 5 min | | 2 | `Agents.vue` 顶层套 ``，原内容迁入 Tab 1 | 15 min | | 3 | Tab 2 复制 `AssignmentMode.vue` 模板与脚本（含 `modes`、`currentMode`、`selectMode`、`getModeDescription`、`getLockReason`） | 15 min | | 4 | Tab 2 顶部加引导条，绑 `agentStore.agents.length` | 5 min | | 5 | `router/index.ts` 删除 `/admin/assignment-mode` 路由项 | 2 min | | 6 | `AssignmentMode.vue` 顶部加"v1.2 起停用"注释 | 2 min | | 7 | `npm run build` 验证编译 | 5 min | | 8 | **多路径同步铁律**：ASCII 路径 `D:\dev\wecom\src\frontend-admin\` 也需同步修改（防止构建用的是旧代码） | — | | 9 | 本地浏览器手动验证（地址栏 + Tab 切换 + 6 卡片） | 10 min | | 10 | 按部署 SOP 上线（`v2_ops.py upload` + 服务器解压 + nginx restart） | 15 min | | 11 | （可选）curl 验证 API 200 + agent-browser 端到端截图 | 5 min | | **合计** | | **约 80 min** | --- ## ⚠️ 风险与回滚 | 风险 | 应对 | |------|------| | 中文路径下 `pnpm install` 卡死 | 用 ASCII 路径 `D:\dev\wecom` 构建（项目铁律） | | 多路径代码不同步导致部署无效 | build 后查 `dist/assets/*.css` 的 hash 变化确认 | | Tab 2 数据二次请求浪费 | 用 `watch(activeTab)` 懒加载，或一次性 `onMounted` 加载 | | 旧菜单链接残留 404 | PRD §12 已标注 v1.2 起不再独立；通知相关文档/聊天链接失效 | | 阶段二/三分配模式膨胀需拆回 | 技术方案 §3.3 已记录回滚步骤（约 30 min） | --- ## 📚 关联文档 | 文档 | 路径 | |------|------| | PRD | `docs/01-产品文档/08-集成生态/PRD-REQ-集成-002-管理后台-v1.0.md` | | 原型图 | `docs/01-产品文档/08-集成生态/原型-REQ-集成-000-管理后台-v1.0.html` | | 技术方案 | `docs/02-技术文档/技术方案-REQ-集成-002-管理后台v1.2-分配模式Tab收编.md` | | 部署 SOP | `docs/04-运维文档/部署运维/DEPLOY-GUIDE.md` | | 项目铁律 | `~/.workbuddy/MEMORY.md`（多路径代码同步铁律） | --- ## 📝 变更日志 | 版本 | 日期 | 变更 | 变更人 | |------|------|------|--------| | v1.0 | 2026-07-28 | 初版（配套 PRD v1.2 + 技术方案） | 宋献 |