Skip to content

emrg: GUI layout v0.2 — panels become workspace views #762

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
argszero merged 1 commit into from
Aug 13, 2026
Merged

emrg: GUI layout v0.2 — panels become workspace views #762

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions docs/gui-redesign.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`。
39 changes: 16 additions & 23 deletions emrg/gui/renderer/css/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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/外观/语言/关于） */
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
Expand Down
74 changes: 33 additions & 41 deletions emrg/gui/renderer/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,13 @@
<div class="growth-line">🌱 <span data-i18n="copy.growthCountPrefix">已自我进化</span> <b id="growth-count">0</b> <span data-i18n="copy.times">次</span></div>
<div class="growth-note" id="growth-note" data-i18n="copy.growthNote">边工作边学习，越用越懂你</div>
</div>
<!-- 侧边栏导航（rant 14:10:14 P1：5 入口 activity-bar 式；P2-P5 逐面板填充，P6 移除老弹窗） -->
<!-- 侧边栏导航（rant 14:10:14 P1 框架；rant 18:55:09 v0.2 修订：导航点击 → 右侧工作区整块切换视图，data-view → #workspace 内 .workspace-view） -->
<nav id="side-nav" class="side-nav" aria-label="Navigation">
<button type="button" id="nav-sessions" class="side-nav-item" data-panel="sessions" title="会话" data-i18n-title="nav.sessions">💬</button>
<button type="button" id="nav-projects" class="side-nav-item" data-panel="projects" title="项目" data-i18n-title="nav.projects">📁</button>
<button type="button" id="nav-tasks" class="side-nav-item" data-panel="tasks" title="任务" data-i18n-title="nav.tasks">⏱️</button>
<button type="button" id="nav-rants" class="side-nav-item" data-panel="rants" title="Rant" data-i18n-title="nav.rants">📣</button>
<button type="button" id="nav-settings" class="side-nav-item" data-panel="settings" title="设置" data-i18n-title="nav.settings">⚙️</button>
<button type="button" id="nav-sessions" class="side-nav-item" data-view="sessions" title="会话" data-i18n-title="nav.sessions">💬</button>
<button type="button" id="nav-projects" class="side-nav-item" data-view="projects" title="项目" data-i18n-title="nav.projects">📁</button>
<button type="button" id="nav-tasks" class="side-nav-item" data-view="tasks" title="任务" data-i18n-title="nav.tasks">⏱️</button>
<button type="button" id="nav-rants" class="side-nav-item" data-view="rants" title="Rant" data-i18n-title="nav.rants">📣</button>
<button type="button" id="nav-settings" class="side-nav-item" data-view="settings" title="设置" data-i18n-title="nav.settings">⚙️</button>
</nav>
<button id="new-chat-btn" class="new-chat-btn" title="新对话 (⌘N)" data-i18n="sidebar.newChat" data-i18n-title="sidebar.newChatTitle">＋ 新对话</button>
<!-- B2（rant 21:59:11）：侧边栏"打开会话"显式入口（两步弹窗：选项目 → 选会话，跨项目） -->
Expand All @@ -39,14 +39,28 @@
<div class="conv-group-label open-sessions-label" id="open-sessions-label" data-i18n="sidebar.openSessions" hidden>打开的会话</div>
<nav id="open-sessions" class="open-sessions"></nav>
<nav id="conv-list"></nav>
<!-- 侧边栏面板容器（rant 14:10:14 P1 框架：点击导航切换，不遮聊天区；P2-P5 填充内容） -->
<section class="side-panel hidden" id="panel-sessions" data-panel-body="sessions">
<div class="side-panel-title" data-i18n="nav.sessionsPanel">会话</div>
<div class="side-panel-body" data-i18n="nav.placeholder">面板内容将在后续版本填充</div>
</section>
<section class="side-panel hidden" id="panel-projects" data-panel-body="projects">
<div class="side-panel-title" data-i18n="nav.projectsPanel">项目</div>
<div class="side-panel-body">
<div class="sidebar-footer">
<span id="status-dot" class="status-dot gray" title="连接状态" data-i18n-title="sidebar.statusTitle"></span>
<button id="settings-btn" class="btn btn-ghost" style="margin-left:auto;padding:6px 12px;min-height:30px;" data-i18n="sidebar.settings">设置</button>
</div>
</aside>

<!-- 主区 -->
<main id="main">
<!-- 断连横幅 -->
<div id="conn-banner" class="hidden"></div>

<!-- GitHub 连接横幅（Windows GCM rant Stage 2：演化需要 GitHub 但未认证时出现） -->
<div id="github-banner" class="hidden">
<span id="github-banner-msg"></span>
<button type="button" id="github-banner-connect" class="btn btn-primary" data-i18n="settings.githubBannerConnect">去连接</button>
<button type="button" id="github-banner-dismiss" class="btn btn-ghost" title="关闭" data-i18n-title="settings.githubBannerDismiss">✕</button>
</div>

<!-- 工作区（rant 18:55:09 v0.2：会话视图 + 面板视图的公共父容器；DOM 显隐切换，状态保留） -->
<div id="workspace">
<section class="workspace-view" id="panel-projects" data-view="projects">
<div class="workspace-view-body">
<!-- rant 14:10:14 P5：项目面板（复用 listProjects/listProjectSessions/registerProject/removeProject IPC） -->
<div class="hint" style="margin-bottom:6px;" data-i18n="projects.hint">查看会话 / 添加项目 / 删除（保留磁盘数据）</div>
<div id="project-list" class="task-list"></div>
Expand All @@ -55,9 +69,8 @@
</div>
</div>
</section>
<section class="side-panel hidden" id="panel-tasks" data-panel-body="tasks">
<div class="side-panel-title" data-i18n="nav.tasksPanel">任务</div>
<div class="side-panel-body">
<section class="workspace-view" id="panel-tasks" data-view="tasks">
<div class="workspace-view-body">
<!-- rant 14:10:14 P3：任务管理从设置迁出（替代 settings 内任务区 + tasks-dialog） -->
<div class="hint" style="margin-bottom:6px;" data-i18n="settings.tasksHint">管理定时任务与自定义任务类型（内置类型只读）</div>
<div id="task-list" class="task-list"></div>
Expand Down Expand Up @@ -115,9 +128,8 @@
<div id="task-template-list" class="task-list hidden" style="margin-top:8px;"></div>
</div>
</section>
<section class="side-panel hidden" id="panel-rants" data-panel-body="rants">
<div class="side-panel-title" data-i18n="nav.rantsPanel">Rant</div>
<div class="side-panel-body">
<section class="workspace-view" id="panel-rants" data-view="rants">
<div class="workspace-view-body">
<!-- rant 14:10:14 P4：rant 面板（列表筛选 + 详情 + 新建） -->
<div class="panel-tabs" id="rant-filter-tabs" role="tablist" style="margin-bottom:var(--sp-2);">
<button type="button" class="panel-tab active" id="rant-filter-all" data-rant-filter="" data-i18n="rants.filterAll">全部</button>
Expand Down Expand Up @@ -146,8 +158,7 @@
</div>
</div>
</section>
<section class="side-panel hidden" id="panel-settings" data-panel-body="settings">
<div class="side-panel-title" data-i18n="nav.settingsPanel">设置</div>
<section class="workspace-view" id="panel-settings" data-view="settings">
<!-- rant 14:10:14 P2：设置改为面板，6 tab（模型服务/工作目录/GitHub/外观/语言/关于） -->
<div class="panel-tabs" id="settings-tabs" role="tablist">
<button type="button" class="panel-tab active" id="settings-tab-model" data-settings-tab="model" data-i18n="settings.groupModel">模型服务</button>
Expand Down Expand Up @@ -249,26 +260,7 @@
<button type="button" id="settings-save" class="btn btn-primary" data-i18n="settings.save">保存</button>
</div>
</section>
<div class="sidebar-footer">
<span id="status-dot" class="status-dot gray" title="连接状态" data-i18n-title="sidebar.statusTitle"></span>
<button id="settings-btn" class="btn btn-ghost" style="margin-left:auto;padding:6px 12px;min-height:30px;" data-i18n="sidebar.settings">设置</button>
</div>
</aside>

<!-- 主区 -->
<main id="main">
<!-- 断连横幅 -->
<div id="conn-banner" class="hidden"></div>

<!-- GitHub 连接横幅（Windows GCM rant Stage 2：演化需要 GitHub 但未认证时出现） -->
<div id="github-banner" class="hidden">
<span id="github-banner-msg"></span>
<button type="button" id="github-banner-connect" class="btn btn-primary" data-i18n="settings.githubBannerConnect">去连接</button>
<button type="button" id="github-banner-dismiss" class="btn btn-ghost" title="关闭" data-i18n-title="settings.githubBannerDismiss">✕</button>
</div>

<!-- 聊天区 -->
<div id="chat-view"></div>
<!-- 回到底部悬浮按钮（上滑阅读时出现） -->
<button id="back-to-bottom" class="back-to-bottom hidden" title="回到底部" data-i18n-title="sidebar.backToBottom">↓</button>

Expand Down
Loading
Loading