# 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 会话被明确限定为项目会话，不是自主执行。
