From e25a137e2651e53c2cf09e1222697c8e9ae021cf Mon Sep 17 00:00:00 2001 From: Yoga <1836051468@qq.com> Date: Sat, 8 Aug 2026 15:48:55 +0800 Subject: [PATCH] =?UTF-8?q?docs(spec):=20frontend=20=E6=B7=B1=E8=89=B2?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=20+=20=E4=BC=9A=E8=AF=9D=E6=90=9C=E7=B4=A2/?= =?UTF-8?q?=E5=88=86=E7=BB=84=20+=20=E8=81=8A=E5=A4=A9=E6=94=B6=E7=B4=A7?= =?UTF-8?q?=E8=AE=BE=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.7 --- ...d-dark-theme-sidebar-search-chat-design.md | 271 ++++++++++++++++++ 1 file changed, 271 insertions(+) create mode 100644 docs/superpowers/specs/2026-08-08-frontend-dark-theme-sidebar-search-chat-design.md diff --git a/docs/superpowers/specs/2026-08-08-frontend-dark-theme-sidebar-search-chat-design.md b/docs/superpowers/specs/2026-08-08-frontend-dark-theme-sidebar-search-chat-design.md new file mode 100644 index 0000000..8243888 --- /dev/null +++ b/docs/superpowers/specs/2026-08-08-frontend-dark-theme-sidebar-search-chat-design.md @@ -0,0 +1,271 @@ +# Frontend 深色主题 + 会话搜索/分组 + 聊天模块收紧 — Design Spec + +**日期：** 2026-08-08 +**状态：** Approved +**范围：** UI 调整（仅本地代码，不做 git 推送） + +## 背景 + +根目录提供两张参考图： + +- `image.png` — frontend 整体布局：深色主题 + 侧栏"会话列表"标题 + 下方按时间分组的会话项 + 右侧聊天主区； +- `chat.png` — 聊天区细节：用户消息右侧气泡、青色主题色、深色背景、紧凑留白。 + +当前 `src/views/frontend/` 已具备 `theme.scss`、`ConversationSidebar.vue`、`ChatWindow.vue` 的完整骨架，但： + +1. 深色 `--fe-*` 变量停留在首版调色（VS Code 暗色 + 青色 accent），与 image.png 期望的"冷感石墨黑 + 蓝紫 accent"仍有差距； +2. 会话侧栏只有一维列表，没有"今天 / 昨天 / 更早"分组，也没有搜索入口； +3. 聊天模块的内边距、圆角与 chat.png 的紧凑节奏仍有可收敛空间。 + +## 目标 / 非目标 + +**目标** + +- 把 `:root` 下 `--fe-*` 替换为石墨黑底 + 蓝紫 accent； +- 会话侧栏顶部新增"搜索会话"输入框（仅样式）； +- 会话按 `今天 / 昨天 / 更早` 分组，分组支持展开/折叠，且"当前会话所在分组自动展开，其他折叠"； +- 聊天模块气泡、消息组、滚动按钮的圆角与内边距收紧，与 chat.png 节奏对齐。 + +**非目标** + +- 不修改浅色主题（`body[data-fe-theme="light"]` 与 `.frontend-container[data-theme="light"]`）； +- 不修改 WebSocket、流式消息、自动下拉、模型选择、上下文 popover、`UserArea`、右键菜单、其它视图； +- 不引入新接口；搜索框不绑定行为；分组折叠状态不持久化。 + +## 改动清单 + +### 1. `src/views/frontend/styles/theme.scss` + +替换 `:root` 块下所有 `--fe-*` 变量值，保持变量名不变。`body[data-fe-theme="light"]`、`.frontend-container { --el-* }`、`.frontend-container[data-theme="light"]` 三个块完全不动。`.frontend-el-message-box` 与全局 `.context-menu` 由于使用 `--fe-*` 变量，自动跟随新调色板，不需要修改。 + +```scss +:root { + // —— 基础色 —— + --fe-bg-base: #14171c; // 容器底色（石墨黑） + --fe-bg-elevated: #1c1f24; // 卡片 / hover + --fe-bg-overlay: #23272e; // 弹层 / 高亮 + --fe-bg-input: #2a2e35; // 输入区背景 + --fe-bg-hover: #1f2329; // 行 hover + + // —— 边框 —— + --fe-border: #2c3138; + --fe-border-strong: #4a505a; + + // —— 文本 —— + --fe-text-primary: #e4e6eb; + --fe-text-secondary: #9aa0a6; + --fe-text-muted: #6b7280; + --fe-text-inverse: #14171c; + + // —— 品牌色 —— + --fe-accent: #6c8cff; // 蓝紫 accent + --fe-accent-hover: #8aa3ff; + --fe-accent-soft: rgba(108, 140, 255, 0.15); + --fe-danger: #f07178; + --fe-danger-soft: rgba(240, 113, 120, 0.1); + --fe-warning: #e0a050; + --fe-info: #6cc4d6; + --fe-info-soft: rgba(108, 196, 214, 0.1); + --fe-info-border: rgba(108, 196, 214, 0.4); + --fe-accent-border: rgba(108, 140, 255, 0.4); + --fe-danger-border: rgba(240, 113, 120, 0.4); + + // —— 布局尺寸 —— + --fe-sidebar-width: 260px; + --fe-file-panel-width: 280px; + --fe-file-preview-width: 600px; + + // —— 阴影 / 圆角 —— + --fe-radius-sm: 4px; + --fe-radius-md: 6px; + --fe-radius-lg: 12px; + --fe-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); + --fe-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55); + --fe-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.65); +} +``` + +### 2. `src/views/frontend/components/ConversationSidebar.vue` + +#### 模板变更 + +- 在 `sidebar-header` 之后新增 `
`，内含 ``，前缀图标 `Search`； +- `` 内部从 `v-for="session in sessionList"` 改为 `v-for="group in sessionGroups" :key="group.key"`： + - 每个 `group.items.length === 0` 不渲染； + - `
` 包含 `{{ group.label }}` 与 ``； + - `
` 渲染 `v-for="session in group.items"`：复用现有 `.conversation-item` 结构。 + +#### 脚本新增 + +```js +import { Search, ArrowDown, ArrowRight } from '@element-plus/icons-vue' + +const searchKeyword = ref('') // 仅留口子，本次不绑定行为 +const expandedGroups = ref(new Set()) // 'today' | 'yesterday' | 'earlier' + +function groupOf(session) { + const ts = parseTimestamp(session?.updateTime) + if (ts == null) return 'earlier' + const now = new Date() + const d = new Date(ts) + const sameDay = (a, b) => + a.getFullYear() === b.getFullYear() && + a.getMonth() === b.getMonth() && + a.getDate() === b.getDate() + const yesterday = new Date(now); yesterday.setDate(now.getDate() - 1) + if (sameDay(d, now)) return 'today' + if (sameDay(d, yesterday)) return 'yesterday' + return 'earlier' +} + +function parseTimestamp(t) { + if (!t) return null + if (typeof t === 'number' && String(t).length === 13) return t + if (typeof t === 'number' || /^\d{14}$/.test(t)) { + const s = String(t) + return new Date(`${s.slice(0,4)}-${s.slice(4,6)}-${s.slice(6,8)}T${s.slice(8,10)}:${s.slice(10,12)}:${s.slice(12,14)}`).getTime() + } + if (typeof t === 'string' && t.includes(' ')) { + const iso = t.replace(' ', 'T').replace(/\.(\d+)?$/, '') + const ms = new Date(iso).getTime() + return Number.isNaN(ms) ? null : ms + } + const ms = new Date(t).getTime() + return Number.isNaN(ms) ? null : ms +} + +const sessionGroups = computed(() => { + const groups = { today: [], yesterday: [], earlier: [] } + for (const s of sessionList.value) { + groups[groupOf(s)].push(s) + } + return [ + { key: 'today', label: '今天', items: groups.today }, + { key: 'yesterday', label: '昨天', items: groups.yesterday }, + { key: 'earlier', label: '更早', items: groups.earlier } + ] +}) + +function toggleGroup(key) { + const next = new Set(expandedGroups.value) + if (next.has(key)) next.delete(key); else next.add(key) + expandedGroups.value = next +} + +function syncExpandedWithCurrent() { + if (currentSession.value) { + expandedGroups.value = new Set([groupOf(currentSession.value)]) + } else { + expandedGroups.value = new Set(['today']) + } +} +``` + +调用点： + +- `fetchSessions` `finally` 中调用 `syncExpandedWithCurrent()`（含首屏无会话、列表为空、列表非空三种情况）； +- `selectSession(session)` 末尾追加 `syncExpandedWithCurrent()`； +- `handleDeleteSession` 移除条目后调用 `syncExpandedWithCurrent()`。 + +#### 样式新增（仅作用域内） + +```scss +.sidebar-search { + padding: 8px 12px 0; + :deep(.el-input__wrapper) { + background: var(--fe-bg-elevated); + box-shadow: 0 0 0 1px var(--fe-border) inset; + border-radius: var(--fe-radius-md); + } + :deep(.el-input__inner) { + color: var(--fe-text-primary); + &::placeholder { color: var(--fe-text-muted); } + } + :deep(.el-input__prefix .el-icon) { color: var(--fe-text-muted); } +} + +.group-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 16px 6px; + cursor: pointer; + user-select: none; + .group-title { + font-size: 12px; + font-weight: 600; + color: var(--fe-accent); + letter-spacing: 0.5px; + } + .group-toggle { + color: var(--fe-text-secondary); + font-size: 12px; + } + &:hover .group-toggle { color: var(--fe-text-primary); } +} + +.group-items { padding: 0 8px; } +``` + +保留现有 `.conversation-item` 圆角 8px → 改为 `var(--fe-radius-md)`，与 `--fe-radius-md` 同步到 6px。 + +### 3. `src/views/frontend/components/ChatWindow.vue` + +仅改 `