feat(ui): 折叠按钮位置统一到侧边栏内下边 + 状态切换图标
背景：原折叠按钮位置 top: 18px; right: -14px（顶部右外侧），
折叠态切换到底部左下角（top: auto; bottom: 14px; left: 14px），
导致两个问题：
- 折叠/展开状态位置不一致
- 按钮图标始终是 «，折叠态下也应该显示 »（UX 错误）
变更：
- chat.css #sidebar-toggle
- top: 18px; right: -14px → top: auto; bottom: 14px; left: 14px
- 折叠态位置规则 #sidebar.collapsed #sidebar-toggle 改为注释占位
（不再切换位置，按钮始终在侧边栏内下边）
- chat.html #sidebar-toggle
- 加 data-state="expanded" 属性
- title 从「折叠/展开侧边栏」改为「折叠侧边栏」
- chat.js toggleSidebar(force)
- 末尾加 8 行：根据 willCollapse 切换 textContent ('«' / '»')、
title ('折叠侧边栏' / '展开侧边栏')、data-state ('expanded' / 'collapsed')
- _AI_USAGE_LOG.md +1 条记录本轮所有 Agent 实现
副作用：折叠态下按钮因容器变窄（56px）且 left:14px，
视觉上自动居中（14+28+14=56），展开态下偏左。
这符合「侧边栏内下边」的语义（折叠态下按钮成为唯一视觉元素，居中更平衡）。
零行为变更：除位置/图标/title/data-state 切换逻辑外，
toggleSidebar 原有逻辑（classList toggle + localStorage 写入）完全保留。
验证（serve --fake @ http://127.0.0.1:8000）：
- GET /static/chat.js -> 200 (text/javascript, 33669 bytes)
- GET / HTML 含 data-state="expanded" -> True
- GET / HTML 含 title="折叠侧边栏" -> True
This commit is contained in:
@@ -147,3 +147,4 @@
|
||||
| 2026-08-30 17:00 | Agent 实现 | chat.html 拆分 chat.css（机械拆分，行为零变更） | src/genesis/server/static/chat.html, chat.css | minimax/minimax-m3:free |
|
||||
| 2026-08-30 18:00 | Agent 实现 | chat.css 视觉重塑为深色主题（spec §一+§二 全部落地） | src/genesis/server/static/chat.css | minimax/minimax-m3:free |
|
||||
| 2026-08-30 19:00 | 反馈迭代 | 同步 docs/design.md 前端 UI 设计规范章节 | docs/design.md, _AI_USAGE_LOG.md | minimax/minimax-m3:free |
|
||||
| 2026-08-31 04:30 | Agent 实现 | 拆分 chat.html 内联 JS 到 chat.js（670 行 UI 业务逻辑恢复）+ 折叠按钮改到侧边栏内下边 + 图标/标题随状态切换 | src/genesis/server/static/chat.js, chat.html, chat.css, _AI_USAGE_LOG.md | minimax/minimax-m3:free |
|
||||
|
||||
@@ -63,7 +63,7 @@ body {
|
||||
position: relative;
|
||||
}
|
||||
#sidebar.collapsed { width: 56px; }
|
||||
#sidebar.collapsed #sidebar-toggle { top: auto; bottom: 14px; right: auto; left: 14px; }
|
||||
#sidebar.collapsed #sidebar-toggle { /* 折叠态位置不再切换，按钮统一在侧边栏内下边 */ }
|
||||
#sidebar.collapsed #session-list { padding-bottom: 52px; }
|
||||
.brand {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
@@ -84,7 +84,7 @@ body {
|
||||
.brand-sub { display: block; font-size: 11px; font-weight: 500; color: var(--text-muted); margin-top: 2px; letter-spacing: 0; }
|
||||
#sidebar.collapsed .brand-name { display: none; }
|
||||
#sidebar-toggle {
|
||||
position: absolute; top: 18px; right: -14px; z-index: 5;
|
||||
position: absolute; top: auto; bottom: 14px; left: 14px; z-index: 5;
|
||||
width: 28px; height: 28px; border-radius: 50%;
|
||||
background: var(--bg-elevated); border: 1px solid var(--border-strong);
|
||||
color: var(--text-secondary); cursor: pointer; font-size: 14px; line-height: 1;
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="sidebar">
|
||||
<button id="sidebar-toggle" title="折叠/展开侧边栏">«</button>
|
||||
<button id="sidebar-toggle" title="折叠侧边栏" data-state="expanded">«</button>
|
||||
<div class="brand">
|
||||
<div class="brand-logo">G</div>
|
||||
<div class="brand-name">Genesis<span class="brand-sub">概要设计书做成Agent</span></div>
|
||||
|
||||
@@ -311,8 +311,21 @@ function toggleSidebar(force) {
|
||||
const el = document.getElementById('sidebar');
|
||||
const willCollapse = force === undefined ? !el.classList.contains('collapsed') : !!force;
|
||||
el.classList.toggle('collapsed', willCollapse);
|
||||
try { localStorage.setItem('genesis_sidebar_collapsed', willCollapse ? '1' : '0'); } catch (e) { /* localStorage 涓嶅彲鐢ㄦ椂蹇界暐 */ }
|
||||
}
|
||||
// 切换折叠/展开图标 + title + data-state
|
||||
const btn = document.getElementById('sidebar-toggle');
|
||||
if (btn) {
|
||||
if (willCollapse) {
|
||||
btn.textContent = '»';
|
||||
btn.title = '展开侧边栏';
|
||||
btn.dataset.state = 'collapsed';
|
||||
} else {
|
||||
btn.textContent = '«';
|
||||
btn.title = '折叠侧边栏';
|
||||
btn.dataset.state = 'expanded';
|
||||
}
|
||||
}
|
||||
try { localStorage.setItem('genesis_sidebar_collapsed', willCollapse ? '1' : '0'); } catch (e) { /* localStorage 不可用时忽略 */ }
|
||||
}
|
||||
|
||||
// ---------- 涓婁紶鍖猴細濮嬬粓鏄剧ず瀹屾暣绫诲瀷涓嬫媺 ----------
|
||||
// P0鈥態锛氶€夐」鐩椂涔熷厑璁歌ˉ浼?template / write_instruction / rules / existing_system锛?// 涓嶅啀钘忚捣鍏ュ彛銆?椤圭洰宸查缃?template 鏃跺啀涓婁紶 template"鍦ㄤ笂浼犲鐢?confirm() 鏄惧紡纭銆?function updateUploadBar() {
|
||||
|
||||
Reference in New Issue
Block a user