11 KiB
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 目录运行：
npm test -- --run
npm run build
如果改动影响主要工作台流程，应补充或更新 Playwright smoke test，覆盖：
- 登录页渲染服务器地址输入。
- 登录后显示动态项目栏。
- 切换项目后频道栏刷新。
- 切换不同频道后主内容模板变化。
- 自定义频道显示 URL 入口。
风险和边界
- 不把 Cron 计划任务扩展为自主 Agent 执行。
- 不把对象讨论扩展为实时聊天。
- 不做项目级成员角色体系。
- 不做匿名公开分享。
- 不做语义搜索或向量搜索。
- 自定义频道 MVP 只做 URL 快捷入口。
自审
完整性检查：本文没有未解释的临时内容。
一致性检查：频道类型、页面模板、右侧详情栏和项目动态加载模型一致；自定义频道被限定为 URL 入口，没有和系统频道混淆。
范围检查：本设计只覆盖登录页和登录后主页面原型，不引入后端权限、实时聊天、自主 Agent 或全局标签等额外系统。
歧义检查：Cron 计划任务被明确限定为计划任务/提醒管理；AI 会话被明确限定为项目会话，不是自主执行。