diff --git a/cloud/console-react/README.md b/cloud/console-react/README.md index d0f58fe..07c7084 100644 --- a/cloud/console-react/README.md +++ b/cloud/console-react/README.md @@ -1,8 +1,11 @@ # Codex 命令台 · React 版 -生产级 React 重写，替代 `cloud/console.html` 的旧单页脚本。视觉沿用 v3 -瓷墨印（白底圆角卡、松绿 `#14544a`、朱印 `#be2a1e` 只作点缀），布局是 -三栏：左侧列表、中间对话、右侧详情。 +生产级 React 重写，替代 `cloud/console.html` 的旧单页脚本。视觉以 Muse +网页端/桌面端截图为准（2026-10-29 改版，取代此前的 v3 瓷墨印）： +白底、细线分隔、无大标题栏；左侧图标栏 + 列表、中间对话、右侧 +个人资料/今天/详情。颜色：文字 `#1d2129`、灰 `#667085`、线 +`#e4e7ec`、助手气泡 `#f2f2f2`、用户气泡 `#bfe0ff`、蓝 `#3b82f6`、 +已连接绿 `#22c55e`。 ## 怎么改（只改 src，不改产物） @@ -11,7 +14,7 @@ 不要在组件里拼 URL 或各写一份请求。 - 改通用样式/组件：`src/tokens.css`（唯一 token 源）或 `src/components/` 下的共享组件（`Card`、`DataList`、`StatusPill`、 - `ChatList`/`ChatBubble`/`ChatInput`、`LeftNav`）。 + `ChatList`/`ChatBubble`/`ChatInput`、`IconRail`）。 - 改 API：只动 `src/api/paths.ts`（全部路径集中在这里）和 `src/api/client.ts`（`api()`、错误文案、key 存取）。组件里不许出现 手拼的 `/tasks/...` 字符串。 @@ -65,22 +68,31 @@ grep -E 'src="/assets|href="/assets' ../console-redesign/console-react.html # 构建产物一致、`/health` 正常、4 个服务 active。不要用真实 API key 做验证调用；本地构建验证不需要 key。 -## 布局（三栏联动） +## 布局（Muse 式四栏联动） -- 左侧 `LeftNav` + `TaskListSection`（约 300px）：模块导航（任务、 - 项目、环境、Workers、技能与 MCP、自动化、分诊、管理区、API Key） - 在上，紧凑任务列表（状态/执行器筛选 + 搜索 + 状态行）在下。 -- 中间 `ConversationSection`（弹性宽，内容居中收敛 800px）：任务视图 - 时是对话主角——实时链路时间线在上、继续会话聊天框在下；非任务 - 模块视图时是该模块的标准内容。 -- 右侧（约 340px）：任务视图时是 `TaskDetailPanel`（元数据、操作、 - 结果/错误、评审、审批、协调子任务、子代理、线程、成本）；模块视图 - 时是该模块的上下文（项目→成员、环境→仓库绑定、技能→MCP 操作、 - Workers/管理区/API Key→健康与配额、自动化↔分诊互为上下文）。 +- 最左图标栏 `IconRail`（56px）：每模块一个内联 SVG 图标，点 + 图标切换模块；手机上隐藏。 +- 左侧列表 `TaskListSection`（260px）：顶部圆角搜索框（即原有 + 任务搜索），`主要聊天` 标题 + `＋`（切到任务视图），状态/执行器 + 筛选紧凑行在下，任务列表行是 prompt 单行截断 + 状态点/id/状态/ + 执行器，选中行灰底高亮。 +- 中间 `ConversationSection`（弹性宽，内容居中收敛 760px）：顶部 + 只有返回箭头（回任务视图）和右侧栏开关，没有大标题栏；任务视图 + 时是对话主角——实时链路时间线在上、继续会话聊天框在下，气泡为 + 助手灰左、用户浅蓝右；非任务模块视图时是该模块的标准内容。 +- 右侧 `RightPanel`（300px）：顶部 X 关闭本栏，圆形头像（字母 C， + 无外部图片）+ `Codex 命令台` + 真实连接状态（有 key 为绿字 + 已连接，否则未连接）+ 健康/配额/刷新时间；图标快捷行；`今天` + 列表（最近 10 条任务，勾选圈 + 粗标题 + 灰副标题 + 右侧时间， + 点一条切到该任务）；下方可折叠的详情区：任务视图时是 + `TaskDetailPanel`，模块视图时是该模块的上下文（项目→成员、 + 环境→仓库绑定、技能→MCP 操作、Workers/管理区/API Key→健康与 + 配额、自动化↔分诊互为上下文）。 - 联动：左点任务 → `showDetail(id)` → 中间对话与右侧详情同时切到 该任务；左点模块 → 中间与右侧同时切到该模块。平板（≤1240px） - 右侧整行落到下方；手机（≤900px）单列，依次是列表、对话、详情， - 聊天输入条 `position: sticky; bottom: 0`，在手机上也固定在底部可用。 + 右侧整行落到下方；手机（≤900px）单列，依次是图标栏（隐藏）、 + 列表、对话、详情，聊天输入条 `position: sticky; bottom: 0`，在 + 手机上也固定在底部可用。 ## 对话与详情的分工（什么进对话、什么进详情） @@ -113,16 +125,17 @@ src/ useConsoleStore.ts（胶水：把上面合成 ConsoleCtx + 自动刷新策略） useAutoRefresh.ts（10s/60s 定时器、select 焦点保护） components/ Card.tsx、lists.tsx（DataList/StatusPill）、notes.tsx、 - controls.tsx、LeftNav.tsx、chat/（Chat.tsx、mapTrace.ts） + controls.tsx、IconRail.tsx（含 ModuleIcon）、chat/（Chat.tsx、mapTrace.ts） sections/ 一个模块一个文件：ApiKey、Admin、Projects、MembersPanel、 Env、EnvContextPanel、Workers、Skills、SkillsToolsPanel、 - Automations、Triage、TaskList（左栏紧凑列表）、 + Automations、Triage、TaskList（左栏列表）、 Conversation（中间对话组合）、TaskDetailPanel（右侧详情）、 + RightPanel（右侧个人资料/今天/详情）、 Dispatch（派发，挂在对话上方作为新会话入口） detail/（TracePanel、ContinuePanel、DetailActions、 ReviewPanel、DetailLists、ProjectToolsPanels） context.ts ConsoleCtx 类型与 React context（不含业务逻辑） - App.tsx 只做布局与组合：三栏 + Provider + 定时器接入 + App.tsx 只做布局与组合：四栏 + Provider + 定时器接入 tokens.css 唯一 token 源：颜色、圆角、间距、40px 控件、断点 ``` diff --git a/cloud/console-react/src/App.tsx b/cloud/console-react/src/App.tsx index 27ffe8c..46c0e17 100644 --- a/cloud/console-react/src/App.tsx +++ b/cloud/console-react/src/App.tsx @@ -2,33 +2,32 @@ import { useState } from "react"; import { ConsoleContext } from "./context"; import { useConsoleStore } from "./hooks/useConsoleStore"; import { useAutoRefresh, useIntervalMs } from "./hooks/useAutoRefresh"; -import LeftNav, { type View } from "./components/LeftNav"; +import IconRail, { type View } from "./components/IconRail"; import ApiKeySection from "./sections/ApiKeySection"; import AdminSection from "./sections/AdminSection"; import ProjectsSection from "./sections/ProjectsSection"; -import MembersPanel from "./sections/MembersPanel"; import EnvSection from "./sections/EnvSection"; -import EnvContextPanel from "./sections/EnvContextPanel"; import WorkersSection from "./sections/WorkersSection"; import SkillsSection from "./sections/SkillsSection"; -import SkillsToolsPanel from "./sections/SkillsToolsPanel"; import AutomationsSection from "./sections/AutomationsSection"; import TriageSection from "./sections/TriageSection"; import TaskListSection from "./sections/TaskListSection"; import ConversationSection from "./sections/ConversationSection"; -import TaskDetailPanel from "./sections/TaskDetailPanel"; -import HealthPanel from "./sections/HealthPanel"; +import RightPanel from "./sections/RightPanel"; -// Layout only: three columns, ChatGPT/Claude style. -// Left (~300px): module nav + task list. Centre (elastic, content -// centred to ~800px): conversation, or the selected module's content. -// Right (~340px): detail/context for whatever the centre shows. -// Selecting a task (left) switches the centre conversation and the -// right detail to that task together; selecting a module switches the -// centre to that module and the right to its context. +// Layout only, Muse web/desktop style: no big header bar. +// Icon rail (56px) + left list (260px) + centre conversation (elastic, +// content centred) + right panel (300px, profile/today/detail). The +// centre top bar is minimal: a back arrow (back to the task view) on +// the left, and, only when the right panel is closed, a button to +// reopen it — the right panel's own X closes it. Selecting a task in +// the left list switches the centre conversation and the right detail +// to that task together; selecting a module switches the centre to +// that module and the right detail to its context. export default function App() { const store = useConsoleStore(); const [view, setView] = useState("task"); + const [rightOpen, setRightOpen] = useState(true); useAutoRefresh((selectFocused) => store.refreshAll(selectFocused), 10000); useIntervalMs(() => store.refreshSlow(), 60000); @@ -46,40 +45,27 @@ export default function App() { } })(); - const right = (() => { - switch (view) { - case "projects": return ; - case "env": return ; - case "skills": return ; - case "workers": case "admin": case "key": return ; - case "automations": return ; - case "triage": return ; - default: return ; - } - })(); - return ( -
-
- 令 -
-

Codex 命令台

-

瓷 · 墨 · 印

-
- key 只存本浏览器 - {store.healthText} ｜ 自动刷新 · 每 10 秒 · 已刷新 {store.refreshStamp} -
-
-
-