diff --git a/docs/superpowers/specs/2026-07-07-admin-web-fill-out-design.md b/docs/superpowers/specs/2026-07-07-admin-web-fill-out-design.md new file mode 100644 index 0000000..65c125f --- /dev/null +++ b/docs/superpowers/specs/2026-07-07-admin-web-fill-out-design.md @@ -0,0 +1,67 @@ +# admin-web 页面补全设计 + +## 问题 + +当前 `admin-web` 多数页面只有创建表单和空表格,缺少列表加载、数据绑定等核心能力: + +- Dashboard 统计数字写死为 0。 +- 渠道主体、渠道账号、会话/群聊、联系人页面只创建不查询,刷新后数据丢失。 +- 会话/群聊缺少账号绑定 UI。 +- 发送记录需要手动拼 JSON,体验差。 + +## 目标 + +在不改变现有表结构和业务规则的前提下,补全前后端的基础 CRUD 与列表展示能力,使管理后台可以独立完成主体、账号、会话、人员的维护,以及测试发送。 + +## 方案 + +### 后端:新增列表/统计接口 + +保持 Controller 风格一致,均为 `ApiResponse` 包装。 + +| 接口 | 方法 | 说明 | +|---|---|---| +| `/api/v1/channel-subject/list` | GET | 查询当前租户渠道主体列表 | +| `/api/v1/channel-account/list` | GET | 查询当前租户渠道账号列表 | +| `/api/v1/conversation/list` | GET | 查询当前租户会话列表 | +| `/api/v1/person/list` | GET | 查询当前租户联系人列表 | +| `/api/v1/send/list` | GET | 查询当前租户发送任务/日志列表(最近 50 条) | +| `/api/v1/dashboard/stats` | GET | 返回渠道主体数、账号数、会话数、今日发送数 | + +实现方式:在现有 Service 中新增 `listXxx(String tenantCode)` 方法,使用 MyBatis-Plus 按 `tenant_code` 查询,逻辑删除字段 `deleted=0` 已由全局配置处理。 + +### 前端:补全页面交互 + +1. **Dashboard.vue** + `onMounted` 调用 `/api/v1/dashboard/stats`,填充 4 个统计卡片。 + +2. **ChannelSubject.vue / ChannelAccount.vue / Conversation.vue / Person.vue** + - `onMounted` 加载列表。 + - 创建成功后刷新列表(或直接 unshift 新记录)。 + - ChannelSubject 补充 `corpId`、`agentId` 输入框(已有字段,只是 UI 没暴露)。 + +3. **Conversation.vue** + - 增加「绑定发送账号」列/弹窗,调用 `/api/v1/conversation/{id}/bind-account`。 + - 列表展示当前绑定的发送主号/备用号(可选,首期先保证能绑定)。 + +4. **SendRecord.vue** + - 当目标类型为「会话」时,目标值改为下拉选择会话(从 `/api/v1/conversation/list` 加载),而不是手动填 JSON。 + - 内容类型为 `text` 时,内容改为普通文本输入框,自动包装成 `{"text": "..."}`。 + - 保留高级 JSON 模式入口(非必须,首期不做)。 + +5. **API 层** + 在 `admin-web/src/api/channel.ts`、`crm.ts`、`send.ts`、`account.ts`(dashboard 可单放或复用 client)中补充对应的 list 函数。 + +## 非目标 + +- 不做分页、搜索、编辑、删除(这些可以后续按需加)。 +- 不改数据库表结构。 +- 不做复杂的权限控制。 + +## 成功标准 + +- Dashboard 刷新后显示真实数量。 +- 渠道主体、账号、会话、联系人页面创建后能在列表中显示。 +- 会话页面可以直接绑定发送账号。 +- 发送记录页面可以通过下拉选择会话并发送文本消息。 +- `npm test` 通过,外部 API 脚本通过。