# 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` 或等价方式通知。 ## 视觉风格 UI 视觉风格参考 shadcn/ui 的克制、清晰、组件化表达，但前端仍只使用 Svelte，不引入 React 或 shadcn/ui 依赖。视觉统一规则以仓库根目录 `design.md` 为准。 后续页面和组件应遵循： - 中性色为主，少量品牌色用于选中态、主按钮和关键状态。 - 卡片、输入框、列表、tabs、菜单、弹窗等控件保持一致的边框、圆角、间距和焦点状态。 - 工作台页面优先信息密度和可扫描性，避免营销页式大 hero、装饰性渐变和过度卡片化。 - 图标优先使用语义明确的按钮图标，文字仅用于清晰命令或需要解释的动作。 - 每个频道页面可以有不同布局，但基础控件和状态表达必须一致。 ## 技术落点 前端仍使用 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 会话被明确限定为项目会话，不是自主执行。