human-adapter-react/.trae/documents/prd.md

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 连接 → 进入主工作台

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 推送新消息 → 更新消息列表

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 表现

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 矩阵动画（贪吃蛇、俄罗斯方块、烟花、文字滚动等）
• 无消息时：引导卡片"添加参与者开始协作"
• 无通知时：简洁空状态图标+文案