136 lines
6.8 KiB
Markdown
136 lines
6.8 KiB
Markdown
## 1. 产品概述
|
||
|
||
列阵（Array）人类工作台——一个让人机协作变得自然的实时工作台。AI Worker 和 Human Worker 在同一个任务中通过消息实时协作，人类通过本前端查看任务、发送消息、上传附件、评价 AI 表现。
|
||
- 目标用户：需要与 AI 协作完成任务的碳基工作者（运营、标注、审核、开发等）
|
||
- 核心价值：让人机协作像人类之间聊天一样自然，同时保留任务管理的结构化能力
|
||
|
||
## 2. 核心功能
|
||
|
||
### 2.1 用户角色
|
||
|
||
| 角色 | 注册方式 | 核心权限 |
|
||
|------|----------|----------|
|
||
| Human Worker | API Key / 用户名密码 / 邀请码注册 | 创建任务、发送消息、上传附件、评价 AI、管理组织 |
|
||
| AI Worker | 后端自动注册 | 自动接收任务、回复消息、提交结果 |
|
||
| 组织 Admin | 组织创建者自动获得 | 管理成员、分类、邀请码 |
|
||
|
||
### 2.2 功能模块
|
||
|
||
1. **登录页**：API Key 登录、用户名密码登录、注册新账户、邀请码注册
|
||
2. **主工作台**：三栏布局——成员面板、任务列表、聊天详情
|
||
3. **消息系统**：公共消息、私密消息、@提及、引用回复、附件上传、乐观消息
|
||
4. **任务管理**：创建任务、状态流转、参与者管理、分类筛选、置顶
|
||
5. **组织管理**：组织切换、成员管理、邀请码、角色权限
|
||
6. **个人中心**：资料编辑、快捷键设置、主题切换、语言切换
|
||
7. **评价系统**：任务完成后对 AI 评分、能力标签、评价汇总
|
||
|
||
### 2.3 页面详情
|
||
|
||
| 页面 | 模块 | 功能描述 |
|
||
|------|------|----------|
|
||
| 登录页 | 服务器地址输入 | 输入后端 API 地址，支持历史记录 |
|
||
| 登录页 | API Key 登录 | 输入 API Key 直接登录 |
|
||
| 登录页 | 用户名密码登录 | 切换到密码模式登录 |
|
||
| 登录页 | 注册表单 | 名称、用户名、密码、邀请码、组织、位置、简介、标签、能力 |
|
||
| 主工作台 | 成员面板 | 显示在线/离线 AI 和 Human Worker，点击发起对话 |
|
||
| 主工作台 | 任务列表 | 全部/我发起的/我参与的 Tab，分类筛选，置顶，排序 |
|
||
| 主工作台 | 聊天详情 | 消息流、引用回复、@提及、私密消息、附件、状态切换 |
|
||
| 主工作台 | 任务抽屉 | 参与者列表、添加/移除成员、评价入口 |
|
||
| 组织管理 | 组织切换器 | 顶栏下拉切换组织 |
|
||
| 组织管理 | 组织详情弹窗 | 成员列表、邀请码管理、角色变更、重命名 |
|
||
| 个人中心 | 资料编辑 | 名称、简介、组织、位置、标签、能力、最大并发 |
|
||
| 个人中心 | 快捷键设置 | 发送键（Enter/Ctrl+Enter）、换行键配置 |
|
||
| 评价系统 | 评价提交 | 1-5 星评分、能力标签、评论、建议 |
|
||
| 评价系统 | 评价汇总 | 平均分、总评价数、常见标签、评价列表 |
|
||
|
||
## 3. 核心流程
|
||
|
||
### 3.1 登录与初始化
|
||
|
||
用户打开应用 → 输入服务器地址和凭据 → SDK 认证获取 JWT → 加载 Workers/Tasks/Categories → 建立 WebSocket 连接 → 进入主工作台
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
A["用户打开应用"] --> B{"本地有凭据？"}
|
||
B -->|是| C["自动登录"]
|
||
B -->|否| D["显示登录页"]
|
||
D --> E["输入凭据"]
|
||
E --> F["SDK 认证"]
|
||
C --> F
|
||
F --> G{"认证成功？"}
|
||
G -->|否| D
|
||
G -->|是| H["加载 Workers + Tasks"]
|
||
H --> I["建立 WebSocket"]
|
||
I --> J["进入主工作台"]
|
||
```
|
||
|
||
### 3.2 消息收发
|
||
|
||
用户选择任务 → 加载历史消息 → 输入回复 → 乐观插入 pending 消息 → API 发送 → 成功移除 pending / 失败显示重试 → WebSocket 推送新消息 → 更新消息列表
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
A["选择任务"] --> B["加载历史消息"]
|
||
B --> C["用户输入回复"]
|
||
C --> D["乐观插入 pending 消息"]
|
||
D --> E["API 发送"]
|
||
E --> F{"发送成功？"}
|
||
F -->|是| G["移除 pending"]
|
||
F -->|否| H["标记 failed，显示重试"]
|
||
G --> I["WS 推送确认"]
|
||
I --> J["更新消息列表"]
|
||
```
|
||
|
||
### 3.3 人机协作
|
||
|
||
人类创建任务 → 邀请 AI Worker → AI 自动接收 → AI 发送处理中消息 → AI 提交结果 → 人类查看结果 → 人类评价 AI 表现
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
A["人类创建任务"] --> B["邀请 AI Worker"]
|
||
B --> C["AI 自动接收任务"]
|
||
C --> D["AI 发送处理中消息"]
|
||
D --> E["AI 提交结果"]
|
||
E --> F["人类查看结果"]
|
||
F --> G["人类评价 AI"]
|
||
```
|
||
|
||
## 4. 用户界面设计
|
||
|
||
### 4.1 设计风格
|
||
|
||
- **主色调**：深空蓝（#0f172a）为底，电光蓝（#3b82f6）为强调色，搭配 zinc 灰阶
|
||
- **按钮风格**：圆角（rounded-lg），主按钮实色填充，次按钮边框+hover 填充
|
||
- **字体**：JetBrains Mono（代码/ID）+ Noto Sans SC（中文正文）+ Geist（英文正文）
|
||
- **布局风格**：三栏布局，左栏 240px 固定，中栏 flex 自适应，右栏 480px 可拖拽
|
||
- **图标**：Lucide React 图标库
|
||
- **动画**：消息入场 slide-up + fade，状态切换 scale 微动，LED 矩阵空状态动画
|
||
|
||
### 4.2 页面设计概览
|
||
|
||
| 页面 | 模块 | UI 元素 |
|
||
|------|------|---------|
|
||
| 登录页 | 整体 | 居中卡片，深色渐变背景，LED Logo 动画，表单居中 |
|
||
| 主工作台 | 顶栏 | Logo + 品牌名 + 组织切换 + 身份徽章 + 主题/语言/刷新/退出按钮 + WS 状态灯 |
|
||
| 主工作台 | 成员面板 | 搜索框 + 在线/离线分组 + AI/Human 标签 + 在线状态圆点 |
|
||
| 主工作台 | 任务列表 | Tab 栏 + 分类筛选 + 任务卡片（标题+最后消息+参与者头像+未读徽章+置顶图标） |
|
||
| 主工作台 | 聊天详情 | 标题栏（可编辑）+ 状态/优先级徽章 + 公共/私密 Tab + 消息流 + 回复输入栏 |
|
||
| 主工作台 | 消息气泡 | AI 左对齐蓝色渐变头像 + Human 右对齐绿色头像 + 系统消息居中灰色胶囊 |
|
||
| 主工作台 | 附件渲染 | 图片内联预览 + 视频缩略图+播放 + 音频播放器 + 文件卡片 |
|
||
| 组织管理 | 组织详情 | Sheet 侧滑面板 + 成员列表 + 邀请码表格 + 角色下拉 |
|
||
| 个人中心 | 资料编辑 | Dialog 弹窗 + 表单字段 + 标签输入 + 快捷键选择器 |
|
||
| 评价系统 | 评价提交 | Dialog 弹窗 + 星级评分 + 标签输入 + 文本域 |
|
||
| 评价系统 | 评价汇总 | Dialog 弹窗 + 统计卡片 + 标签云 + 评价列表 |
|
||
|
||
### 4.3 响应式设计
|
||
|
||
- **桌面端（≥1024px）**：三栏并排，右栏可拖拽调整宽度
|
||
- **平板端（768~1023px）**：左栏收为窄竖条图标栏，中栏+右栏双栏
|
||
- **移动端（<768px）**：单栏切换，任务列表和聊天详情互斥显示，底部导航
|
||
|
||
### 4.4 空状态设计
|
||
|
||
- 无任务时：16×16 LED 矩阵动画（贪吃蛇、俄罗斯方块、烟花、文字滚动等）
|
||
- 无消息时：引导卡片"添加参与者开始协作"
|
||
- 无通知时：简洁空状态图标+文案
|