docs: design discord style project workbench

2026-07-19 18:44:21 +08:00
parent 4e46fee809
commit d538627272
2 changed files with 304 additions and 0 deletions
--- a/docs/superpowers/specs/2026-07-19-discord-style-project-workbench-design.md
+++ b/docs/superpowers/specs/2026-07-19-discord-style-project-workbench-design.md
@@ -0,0 +1,304 @@
+# Discord 式项目频道工作台设计
+
+## 背景
+
+本设计基于 `docs/ScreenShot.png` 中的产品原型，并结合 SenlinAI 项目工作台 MVP 的既有边界。新的登录后主页面保留截图中的三栏工作台结构，但交互模型更接近 Discord：左侧项目列表类似 server 列表，用户切换项目后，当前项目的频道、计数、最近会话和主内容区随项目动态加载。
+
+本次设计只定义 Web 客户端的产品原型和前端体验，不扩大后端 MVP 范围。AI 不得未经用户确认创建正式对象；Cron 计划任务在 MVP 中只作为项目内计划任务/提醒管理，不实现自主 Agent 执行。
+
+## 用户目标
+
+用户需要在一个项目内快速切换不同工作模式：收集消息、管理计划、查看 AI 会话、整理笔记资料、管理定时计划，并通过自定义频道保存项目相关外部入口。跨项目时，用户希望像切换 Discord server 一样，看到该项目自己的频道和数据。
+
+## 核心体验
+
+应用分为登录页和登录后工作台。
+
+登录页提供完整登录体验：
+
+- 服务器 IP 或域名输入。
+- 邮箱或用户名输入。
+- 密码输入。
+- 登录按钮、连接状态和错误提示。
+- 记住服务器地址，方便私有化部署环境下重复登录。
+
+登录后工作台由五个区域组成：
+
+- 顶部全局栏：Logo、跨项目搜索、浏览器式导航动作、账号入口。
+- 左侧项目栏：动态项目列表、创建项目入口、当前用户区。
+- 项目频道栏：当前项目名称、项目设置、系统频道、自定义频道、最近会话。
+- 主内容区：根据当前频道展示不同页面模板。
+- 右侧详情栏：展示当前选中对象的讨论、属性和更多操作。
+
+## 信息架构
+
+### 项目栏
+
+项目栏展示用户可访问的项目。每个项目显示图标或首字母、项目名提示和未处理计数。点击项目后，应用加载该项目下的频道、标签、最近会话和默认频道。
+
+项目栏固定包含：
+
+- 面板入口。
+- 动态项目列表。
+- 创建项目按钮。
+- 当前用户区，包括账号、好友/内部用户、私信和设置入口。
+
+MVP 中项目列表应来自 API 或前端 mock 数据适配层，不写死为单个项目。
+
+### 项目频道栏
+
+频道栏属于当前项目。切换项目后，频道栏整体刷新。
+
+系统频道：
+
+- 概况。
+- 消息流。
+- 工作计划。
+- AI 会话。
+- 笔记资料。
+- Cron 计划任务。
+
+自定义频道：
+
+- 标题。
+- 图标。
+- URL 地址。
+- 排序字段。
+
+自定义频道 MVP 是项目内快捷入口，不承载独立消息或任务数据。点击后在主区展示外部链接入口，可以提供复制链接、在新窗口打开；内嵌预览作为后续能力，不进入本次 MVP。
+
+### 标签栏
+
+截图顶部的标签行保留为当前项目内筛选器。标签只限定在项目内，不引入全局标签体系。标签可用于筛选消息流、任务、笔记资料和 AI 会话。
+
+## 频道页面设计
+
+### 概况
+
+概况是项目默认首页，展示项目状态总览。
+
+内容包括：
+
+- 待处理消息数量。
+- 未完成任务数量。
+- 最近 AI 会话。
+- 最近笔记资料。
+- 最近 Cron 计划。
+- 最近项目事件。
+
+概况页用于快速扫视，不承担复杂编辑。
+
+### 消息流
+
+消息流类似邮件客户端，而不是聊天流。它用于收集和处理项目 inbox 条目。
+
+页面结构：
+
+- 左侧或主列表展示消息条目。
+- 每条消息显示来源、标题、摘要、状态、标签、时间。
+- 支持未处理、已处理、已归档等筛选。
+- 选中消息后，右侧详情栏显示正文、来源信息、AI 整理建议和讨论。
+
+关键行为：
+
+- 用户可以新增文本、链接或附件型消息。
+- 用户可以触发 AI 整理。
+- AI 返回任务、笔记、资料等候选建议。
+- 用户勾选并确认后才创建正式对象。
+- 生成对象保留来源 inbox item ID。
+
+### 工作计划
+
+工作计划类似 Todo 软件，使用卡片样式呈现任务。
+
+页面结构：
+
+- 未完成和已完成任务可以分组展示。
+- 每个任务是一张卡片。
+- 卡片包含完成/未完成标记、标题、描述摘要、负责人、截止时间、标签。
+- 支持按状态、负责人、标签筛选。
+
+关键行为：
+
+- 点击完成标记切换状态。
+- 点击卡片后，右侧详情栏显示任务属性、关联对象、讨论和分享设置。
+- 任务可显式分享关联的笔记或资料。
+
+MVP 使用列表式卡片，不做复杂看板拖拽。
+
+### AI 会话
+
+AI 会话页包含会话列表和会话详情。
+
+页面结构：
+
+- 左侧列表显示当前项目的 AI 会话。
+- 主区显示当前会话消息、输入框和引用上下文。
+- 右侧详情栏显示会话属性、引用对象、可保存的 AI 输出和讨论。
+
+关键行为：
+
+- AI 会话归属于当前项目。
+- 用户可以引用项目内笔记和资料。
+- AI 输出可以保存到 inbox、转换为笔记或关联到任务，但正式创建前需要用户确认。
+
+AI 会话不是自主 Agent 执行系统。
+
+### 笔记资料
+
+笔记资料页类似文件和附件管理器。
+
+页面结构：
+
+- 列表或网格展示笔记、文件、链接资料。
+- 每项显示类型、标题、更新时间、标签和来源。
+- 主区支持预览 Markdown 笔记、附件元数据和链接资料。
+- 右侧详情栏显示属性、标签、来源、讨论和关联任务。
+
+关键行为：
+
+- Markdown 笔记可编辑。
+- 文件和链接作为资料对象管理。
+- 附件上传路径仍由后端文件服务集中处理，前端不构造服务端存储路径。
+
+### Cron 计划任务
+
+Cron 计划任务页类似定时计划任务管理。
+
+页面结构：
+
+- 计划任务列表。
+- 每项显示名称、启用状态、周期表达、下次执行时间、最近结果和标签。
+- 右侧详情栏显示计划说明、历史记录和讨论。
+
+MVP 限制：
+
+- 可展示和编辑计划任务元数据。
+- 可标记启用/停用。
+- 不实现自主 Agent 执行。
+- 不实现复杂调度运行器；如后端尚无能力，前端可先作为计划任务管理 UI 和 mock 状态。
+
+### 自定义频道
+
+自定义频道是项目内 URL 快捷入口。
+
+字段：
+
+- 标题。
+- 图标。
+- URL 地址。
+- 排序。
+
+页面结构：
+
+- 主区显示频道标题、URL、打开按钮、复制按钮和基础说明。
+- 如未来需要，可支持内嵌 Web 预览，但 MVP 不依赖该能力。
+
+## 右侧详情栏
+
+右侧详情栏随当前选中对象变化。顶部使用 tabs：
+
+- 讨论。
+- 属性。
+- 更多。
+
+讨论不是实时 IM，而是对象级评论或协作记录。属性显示当前对象字段，例如任务负责人、截止时间、标签、消息来源、资料类型等。更多用于分享、复制链接、归档、删除等动作。
+
+当当前频道没有选中对象时，右侧栏显示频道说明和可用操作。
+
+## 状态模型
+
+前端需要区分三类状态：
+
+- 当前登录状态：服务器地址、token、当前用户。
+- 工作台状态：当前项目、当前频道、选中对象、打开的浏览器式标签页。
+- 草稿状态：Markdown 编辑草稿、AI 输入草稿、消息输入草稿。
+
+浏览器式标签页保存页面级工作台状态。编辑器草稿和 AI 输入草稿不应只依赖标签页状态，避免用户切换项目或频道时丢失输入。
+
+## 响应式规则
+
+桌面端优先。
+
+桌面布局：
+
+- 左侧项目栏固定窄栏。
+- 项目频道栏固定宽度。
+- 主内容区自适应。
+- 右侧详情栏可折叠。
+
+移动布局：
+
+- 项目栏和频道栏折叠为抽屉。
+- 主内容区优先展示。
+- 右侧详情栏变为底部或全屏详情页。
+
+## 可访问性要求
+
+- 所有图标按钮必须有 `aria-label` 或可见文本。
+- 当前项目、当前频道、当前 tab 必须有明确选中状态。
+- 搜索框、频道列表、任务完成按钮、右侧 tabs 必须支持键盘访问。
+- 状态徽标不能只依赖颜色表达。
+- 表单错误需要文本说明，并通过 `aria-live` 或等价方式通知。
+
+## 技术落点
+
+前端仍使用 Svelte 和 TypeScript，不引入 React。
+
+建议组件划分：
+
+- `ServerLogin.svelte`：完整登录页。
+- `ProjectWorkbench.svelte`：登录后的工作台外壳。
+- `ProjectRail.svelte`：动态项目列表。
+- `ProjectChannelSidebar.svelte`：当前项目频道栏。
+- `WorkspaceTopbar.svelte`：顶部搜索和导航。
+- `ChannelContent.svelte`：按频道类型分发页面。
+- `InboxChannel.svelte`。
+- `TasksChannel.svelte`。
+- `AISessionsChannel.svelte`。
+- `NotesSourcesChannel.svelte`。
+- `CronChannel.svelte`。
+- `CustomLinkChannel.svelte`。
+- `ObjectInspector.svelte`：右侧讨论/属性/更多面板。
+
+API 适配建议：
+
+- 复用现有项目 dashboard API。
+- 项目列表、频道列表和自定义频道可以先使用前端 mock 数据结构，后续接入后端。
+- 频道类型使用稳定枚举：`overview`、`inbox`、`tasks`、`ai_sessions`、`notes_sources`、`cron`、`custom_link`。
+
+## 验证
+
+Web 变更应在 `apps/web` 目录运行：
+
+```powershell
+npm test -- --run
+npm run build
+```
+
+如果改动影响主要工作台流程，应补充或更新 Playwright smoke test，覆盖：
+
+- 登录页渲染服务器地址输入。
+- 登录后显示动态项目栏。
+- 切换项目后频道栏刷新。
+- 切换不同频道后主内容模板变化。
+- 自定义频道显示 URL 入口。
+
+## 风险和边界
+
+- 不把 Cron 计划任务扩展为自主 Agent 执行。
+- 不把对象讨论扩展为实时聊天。
+- 不做项目级成员角色体系。
+- 不做匿名公开分享。
+- 不做语义搜索或向量搜索。
+- 自定义频道 MVP 只做 URL 快捷入口。
+
+## 自审
+
+完整性检查：本文没有未解释的临时内容。
+
+一致性检查：频道类型、页面模板、右侧详情栏和项目动态加载模型一致；自定义频道被限定为 URL 入口，没有和系统频道混淆。
+
+范围检查：本设计只覆盖登录页和登录后主页面原型，不引入后端权限、实时聊天、自主 Agent 或全局标签等额外系统。
+
+歧义检查：Cron 计划任务被明确限定为计划任务/提醒管理；AI 会话被明确限定为项目会话，不是自主执行。