diff --git a/docs/ScreenShot.png b/docs/ScreenShot.png new file mode 100644 index 0000000..5c09c94 Binary files /dev/null and b/docs/ScreenShot.png differ diff --git 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 new file mode 100644 index 0000000..8bf6b13 --- /dev/null +++ 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 会话被明确限定为项目会话,不是自主执行。