diff --git a/docs/gui-redesign.md b/docs/gui-redesign.md new file mode 100644 index 0000000..4b63fa4 --- /dev/null +++ b/docs/gui-redesign.md @@ -0,0 +1,28 @@ +# GUI Redesign — 工作区视图(Workspace Views) + +> v0.2(rant 2026-08-13T18:55:09,宿主否决 v0.1「侧边栏内展开窄面板」方案) +> v0.1(rant 2026-08-13T14:10:14):侧边栏 5 入口 + 侧边栏内展开面板(#743-#753,已被 v0.2 取代) + +## 术语表(宿主确认,2026-08-13) + +| 术语 | 英文 | 含义 | DOM | +|------|------|------|-----| +| 应用框架 | App Shell | GUI 整体(左侧边栏 + 右侧工作区) | `#app` | +| 侧边栏 | Sidebar | 左侧整栏 = 顶部导航 + 中部会话列表 + 底部状态区 | `#sidebar` | +| 导航 | Nav | 5 个视图切换入口(💬会话/📁项目/⏱任务/📣Rant/⚙设置) | `.side-nav-item[data-view]` | +| 会话列表 | Session List | 侧边栏中部的打开会话项(也是视图切换入口) | `#conv-list` / `#open-sessions` | +| 工作区 | Workspace | 右侧主区域,承载视图 | `#workspace` | +| 工作区视图 | Workspace View | 工作区内顶级可切换单元(互斥显示,状态保留) | `.workspace-view` | +| 会话视图 | Session View | 一个会话的工作区视图(聊天区 + 成果面板) | `.session-view` | +| 面板 / 区 / Tab | Panel / Area / Tab | 视图内部组件(成果面板、设置 Tab 等),不再是工作区顶级概念 | `.panel-tabs` 等 | + +## 设计原则 + +1. **导航点击 → 工作区整块切换视图**,与会话切换完全同机制:DOM 显隐(`.active` 互斥类),视图状态(滚动位置 / 草稿 / 表单)保留。 +2. 面板视图激活时:`#composer-wrap` / `#empty-state` / `#result-panel` / `#result-resizer` 隐藏;回会话视图时恢复。 +3. 点当前激活导航项 → 关闭回会话视图(toggle)。点 💬 → 始终回会话视图。 +4. 术语统一:DOM 用 `workspace-view` / `session-view`,无 `.side-panel` / `#chat-view` id 残留。 + +## 实现记录 + +- v0.2(2026-08-13):`#chat-view` → `#workspace`;4 个面板(projects/tasks/rants/settings)从 `#sidebar` 移入 `#workspace`,`.side-panel` → `.workspace-view`;删除 `#panel-sessions`;`data-panel` → `data-view`;`switchPanel` → `switchView`;`state.activePanel` → `state.activeView`。 diff --git a/emrg/gui/renderer/css/layout.css b/emrg/gui/renderer/css/layout.css index bdef448..08182b9 100644 --- a/emrg/gui/renderer/css/layout.css +++ b/emrg/gui/renderer/css/layout.css @@ -1,8 +1,8 @@ -/* layout.css — 整体布局:左侧边栏 + 主区(居中单栏聊天 + 输入卡片) +/* layout.css — 整体布局:左侧边栏 + 工作区(#workspace 会话/面板视图 + 输入卡片) * 结构: * #app * #sidebar(品牌区 + 新对话 + 分组列表 + 底部设置/连接圆点) - * #main(#chat-view 滚动区 + #empty-state 欢迎屏 + #composer-wrap 输入卡片) + * #main(#workspace 视图容器 + #empty-state 欢迎屏 + #composer-wrap 输入卡片) */ #app { @@ -62,25 +62,17 @@ background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } -/* 面板容器(不遮聊天区,占用侧边栏内空间) */ -.side-panel { - margin: 0 var(--sp-3) var(--sp-2); - padding: var(--sp-3); - border: 1px solid var(--border); - border-radius: var(--radius-card); - background: var(--bg-panel); +/* 工作区视图(rant 18:55:09 v0.2:面板从侧边栏移入 #workspace,整块工作区显示)—— + * 默认隐藏;.active 时填充整个工作区(宽布局,不再受侧边栏 264px 限制) */ +.workspace-view { + display: none; + flex-direction: column; + height: 100%; overflow-y: auto; - min-height: 80px; + padding: var(--sp-4); } -.side-panel-title { - font-size: var(--fs-secondary); - font-weight: 600; - color: var(--text-1); - margin-bottom: var(--sp-2); -} -.side-panel-body { - font-size: var(--fs-secondary); - color: var(--text-3); +.workspace-view.active { + display: flex; } /* rant 14:10:14 P2:设置面板 tab(模型服务/工作目录/GitHub/外观/语言/关于) */ @@ -239,8 +231,9 @@ background: var(--bg); } -/* 聊天区包装(P3 slice 2:多会话容器——每会话一个 .session-view,display 切换) */ -#chat-view { +/* 工作区包装(rant 18:55:09 v0.2 起:#chat-view 更名 #workspace——会话视图 + 面板视图的 + * 公共父容器;每会话一个 .session-view,每面板一个 .workspace-view,display 互斥切换) */ +#workspace { flex: 1; position: relative; overflow: hidden; @@ -273,7 +266,7 @@ pointer-events: none; background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(128, 128, 128, 0.08) 8px 16px); } -#chat-view > *:not(.session-view), +#workspace > *:not(.session-view):not(.workspace-view), .session-view > * { width: 100%; max-width: 760px; @@ -383,7 +376,7 @@ body.sidebar-collapsed #app { #sidebar { display: none; } - /* #chat-view 现为绝对定位包装(padding 移入 .session-view,避免滚动条内缩) */ + /* #workspace 现为绝对定位包装(padding 移入 .session-view,避免滚动条内缩) */ .session-view { padding: var(--sp-4) var(--sp-4) var(--sp-3); } diff --git a/emrg/gui/renderer/index.html b/emrg/gui/renderer/index.html index 051aa85..5f02627 100644 --- a/emrg/gui/renderer/index.html +++ b/emrg/gui/renderer/index.html @@ -24,13 +24,13 @@
🌱 已自我进化 0
边工作边学习,越用越懂你
- + @@ -39,14 +39,28 @@ - - - -