From 264054ba4494cedfe25a77df2c5a7856f6c68959 Mon Sep 17 00:00:00 2001 From: lhl Date: Mon, 31 Aug 2026 08:51:25 +0800 Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E6=8A=98=E5=8F=A0=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E4=BD=8D=E7=BD=AE=E7=BB=9F=E4=B8=80=E5=88=B0=E4=BE=A7?= =?UTF-8?q?=E8=BE=B9=E6=A0=8F=E5=86=85=E4=B8=8B=E8=BE=B9=20+=20=E7=8A=B6?= =?UTF-8?q?=E6=80=81=E5=88=87=E6=8D=A2=E5=9B=BE=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 背景：原折叠按钮位置 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 --- _AI_USAGE_LOG.md | 1 + src/genesis/server/static/chat.css | 4 ++-- src/genesis/server/static/chat.html | 2 +- src/genesis/server/static/chat.js | 17 +++++++++++++++-- 4 files changed, 19 insertions(+), 5 deletions(-) diff --git a/_AI_USAGE_LOG.md b/_AI_USAGE_LOG.md index 72f97d6..844d0b7 100644 --- a/_AI_USAGE_LOG.md +++ b/_AI_USAGE_LOG.md @@ -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 | diff --git a/src/genesis/server/static/chat.css b/src/genesis/server/static/chat.css index 20719e5..8d18b2a 100644 --- a/src/genesis/server/static/chat.css +++ b/src/genesis/server/static/chat.css @@ -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; diff --git a/src/genesis/server/static/chat.html b/src/genesis/server/static/chat.html index 5a928af..13bf807 100644 --- a/src/genesis/server/static/chat.html +++ b/src/genesis/server/static/chat.html @@ -8,7 +8,7 @@