Compare commits
5
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 HuangYJ
|
e1a4558a49 | ||
 HuangYJandClaude Opus 4.7
|
eae1e31c23 | ||
|
HuangYJandClaude Opus 4.7
|
1a57a4f2e9 | ||
|
HuangYJandClaude Opus 4.7
|
ba19b553f3 | ||
|
HuangYJandClaude Opus 4.7
|
e25a137e26 |
@@ -0,0 +1,503 @@
|
|||||||
|
# Frontend 深色主题 + 会话搜索/分组 + 聊天收紧 Implementation Plan
|
||||||
|
|
||||||
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||||
|
|
||||||
|
**Goal:** 把 frontend 页面调整为：石墨黑 + 蓝紫 accent 的深色主题、会话侧栏顶部"搜索会话"输入框、按 `今天 / 昨天 / 更早` 分组且"当前会话所在分组自动展开、其他折叠"、聊天模块气泡节奏收紧对齐 chat.png。本次仅修改本地代码，不做 git 推送。
|
||||||
|
|
||||||
|
**Architecture:** 三个文件局部改动，不新增组件、不引入新依赖。`theme.scss` 替换 `:root` 变量值；`ConversationSidebar.vue` 在 header 与 scrollbar 之间插入搜索框，scrollbar 内部从一维列表改为分组结构，添加 `groupOf / parseTimestamp / sessionGroups / expandedGroups / syncExpandedWithCurrent` 等本地逻辑；`ChatWindow.vue` 仅调整气泡相关 SCSS。所有改动通过 `--fe-*` 变量串联，浅色主题不受影响。
|
||||||
|
|
||||||
|
**Tech Stack:** Vue 3.5 + Composition API + Element Plus 2.13 + Sass（sass-embedded 1.97）。测试使用 Vitest（需在 Task 1 中确认是否已配置）。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## File Structure
|
||||||
|
|
||||||
|
| 文件 | 操作 | 职责 |
|
||||||
|
|---|---|---|
|
||||||
|
| `src/views/frontend/styles/theme.scss` | 改 | 仅替换 `:root` 下 `--fe-*` 值；其它块保持原样 |
|
||||||
|
| `src/views/frontend/components/ConversationSidebar.vue` | 改 | header 下新增搜索框；scrollbar 内分组渲染；新增本地状态/方法；新增分组标题样式 |
|
||||||
|
| `src/views/frontend/components/ChatWindow.vue` | 改 | 仅 `<style scoped>` 内调整 `padding / margin-bottom / border-radius` |
|
||||||
|
|
||||||
|
无新增文件；不新增组件抽象。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 1: 摸底测试栈与现有测试位置
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Inspect: `package.json`, `vitest.config.*`, `tests/`、`src/**/*.test.{js,ts}`
|
||||||
|
|
||||||
|
- [ ] **Step 1: 检查 package.json 是否声明了测试框架**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd "D:/数科智联/项目/agent-frontend-web"
|
||||||
|
grep -E "vitest|jest|@vue/test-utils" package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
预期：很可能没有测试框架；如果 `npm ls vitest` 无输出，跳过 vitest 步骤（前端为视觉改动，以手动 dev 验证为主）。记录结论到 Task 1 末尾的"测试结论"。
|
||||||
|
|
||||||
|
- [ ] **Step 2: 若无测试框架，标注结论并跳过所有 TDD 步骤**
|
||||||
|
|
||||||
|
在执行 Task 2~4 时，把"Write the failing test / Run it to verify it fails"两步替换为"手动 dev 验证（启动 `npm run dev` 在浏览器查看）"。
|
||||||
|
|
||||||
|
测试结论：当前仓库未配置前端单元测试；本次采用手动 dev 验证（步骤在 Task 5 统一列出）。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 2: 替换 `theme.scss` 深色调色板
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Modify: `src/views/frontend/styles/theme.scss:3-46`（`:root` 块）
|
||||||
|
|
||||||
|
- [ ] **Step 1: 替换 `:root` 变量值**
|
||||||
|
|
||||||
|
将 `src/views/frontend/styles/theme.scss` 的 `:root { ... }` 块整体替换为以下内容（变量名不变，仅改值）：
|
||||||
|
|
||||||
|
```scss
|
||||||
|
:root {
|
||||||
|
// —— 基础色 ——
|
||||||
|
--fe-bg-base: #14171c;
|
||||||
|
--fe-bg-elevated: #1c1f24;
|
||||||
|
--fe-bg-overlay: #23272e;
|
||||||
|
--fe-bg-input: #2a2e35;
|
||||||
|
--fe-bg-hover: #1f2329;
|
||||||
|
|
||||||
|
// —— 边框 ——
|
||||||
|
--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;
|
||||||
|
--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);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 2: 校验未触碰其它块**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd "D:/数科智联/项目/agent-frontend-web"
|
||||||
|
sed -n '47,90p' src/views/frontend/styles/theme.scss
|
||||||
|
```
|
||||||
|
|
||||||
|
预期：`body[data-fe-theme="light"]` 块保持 `body[data-fe-theme="light"] { --fe-bg-base: #ffffff; ... }` 原样输出。
|
||||||
|
|
||||||
|
- [ ] **Step 3: 校验 `.frontend-container` 与浅色 el-* 块未改**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd "D:/数科智联/项目/agent-frontend-web"
|
||||||
|
grep -n "frontend-container" src/views/frontend/styles/theme.scss
|
||||||
|
```
|
||||||
|
|
||||||
|
预期：仍有两处 `.frontend-container`（不含 light 子选择器与 light 修饰），行号与改前一致。
|
||||||
|
|
||||||
|
- [ ] **Step 4: 启动 dev，目测深色页面底色与 accent 是否变为石墨黑/蓝紫**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd "D:/数科智联/项目/agent-frontend-web"
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
打开 `/frontend` 路由，深色主题下容器底色变 `#14171c`、accent 高亮变 `#6c8cff`；切到浅色主题，颜色与之前完全一致。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 3: `ConversationSidebar.vue` —— 模板新增搜索框 + 分组渲染
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Modify: `src/views/frontend/components/ConversationSidebar.vue:10-59`（模板）、`:372-`（.conversation-item 圆角）
|
||||||
|
|
||||||
|
- [ ] **Step 1: 在 `sidebar-header` 之后插入搜索框**
|
||||||
|
|
||||||
|
在 `<div class="sidebar-header">...</div>` 之后、`<el-scrollbar class="sidebar-scrollbar">` 之前，插入：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="sidebar-search">
|
||||||
|
<el-input
|
||||||
|
v-model="searchKeyword"
|
||||||
|
placeholder="搜索会话"
|
||||||
|
:prefix-icon="Search"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 2: 把 scrollbar 内的列表改成分组渲染**
|
||||||
|
|
||||||
|
将 `<div v-for="session in sessionList" ...>` 整段替换为：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template v-for="group in sessionGroups" :key="group.key">
|
||||||
|
<template v-if="group.items.length > 0">
|
||||||
|
<div class="group-header" @click="toggleGroup(group.key)">
|
||||||
|
<span class="group-title">{{ group.label }}</span>
|
||||||
|
<el-icon class="group-toggle">
|
||||||
|
<ArrowDown v-if="expandedGroups.has(group.key)" />
|
||||||
|
<ArrowRight v-else />
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
<div v-show="expandedGroups.has(group.key)" class="group-items">
|
||||||
|
<div
|
||||||
|
v-for="session in group.items"
|
||||||
|
:key="session.sessionId"
|
||||||
|
class="conversation-item"
|
||||||
|
:class="{ active: currentSession?.sessionId === session.sessionId, 'has-new-message': session.hasNewMessage }"
|
||||||
|
@click="selectSession(session)"
|
||||||
|
@contextmenu.prevent="handleRightClick($event, session)"
|
||||||
|
>
|
||||||
|
<div class="conv-dot"></div>
|
||||||
|
<div class="conv-info">
|
||||||
|
<span class="conv-name">{{ session.title || session.name }}</span>
|
||||||
|
<span class="conv-time">{{ formatTimeAgo(session.updateTime) }}</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="session.hasNewMessage" class="new-message-dot"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
空列表提示 `<div v-if="!loading && sessionList.length === 0" class="empty-sessions">暂无会话</div>` 保持不变。
|
||||||
|
|
||||||
|
- [ ] **Step 3: 把 `.conversation-item` 的固定 8px 圆角改为变量**
|
||||||
|
|
||||||
|
在 `<style scoped lang="scss">` 中找到：
|
||||||
|
|
||||||
|
```scss
|
||||||
|
.conversation-item {
|
||||||
|
...
|
||||||
|
border-radius: 8px;
|
||||||
|
...
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
将 `border-radius: 8px;` 改为 `border-radius: var(--fe-radius-md);`。
|
||||||
|
|
||||||
|
- [ ] **Step 4: 在 `<style scoped lang="scss">` 内追加搜索框与分组样式**
|
||||||
|
|
||||||
|
紧跟在 `.sidebar-header { ... }` 块之后追加：
|
||||||
|
|
||||||
|
```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; }
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 5: dev 验证（任务3）**
|
||||||
|
|
||||||
|
启动 dev，进入 `/frontend`，目测：
|
||||||
|
- header 下方出现搜索框；
|
||||||
|
- 列表按 `今天 / 昨天 / 更早` 三段渲染；
|
||||||
|
- 分组标题为蓝紫色，左侧 ▾/▸ 图标。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 4: `ConversationSidebar.vue` —— 脚本新增分组逻辑
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Modify: `src/views/frontend/components/ConversationSidebar.vue:68-262`（script setup）
|
||||||
|
|
||||||
|
- [ ] **Step 1: 扩展 icon 导入**
|
||||||
|
|
||||||
|
将：
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { DArrowLeft, DArrowRight, Refresh, Plus, Delete, Loading } from '@element-plus/icons-vue'
|
||||||
|
```
|
||||||
|
|
||||||
|
改为：
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { DArrowLeft, DArrowRight, Refresh, Plus, Delete, Loading, Search, ArrowDown, ArrowRight } from '@element-plus/icons-vue'
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 2: 扩展 import，引入 computed**
|
||||||
|
|
||||||
|
将 `import { ref, onMounted, onUnmounted } from 'vue'` 改为 `import { ref, computed, onMounted, onUnmounted } from 'vue'`。
|
||||||
|
|
||||||
|
- [ ] **Step 3: 新增 state 与 helper，放在 `currentSession` 之后**
|
||||||
|
|
||||||
|
在 `const currentSession = ref(null)` 之后插入：
|
||||||
|
|
||||||
|
```js
|
||||||
|
// —— 搜索关键字（仅样式占位，本次不绑定行为） ——
|
||||||
|
const searchKeyword = ref('')
|
||||||
|
|
||||||
|
// —— 分组折叠状态：'today' | 'yesterday' | 'earlier' ——
|
||||||
|
const expandedGroups = ref(new Set())
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
function groupOf(session) {
|
||||||
|
const ts = parseTimestamp(session?.updateTime)
|
||||||
|
if (ts == null) {
|
||||||
|
console.warn('[ConversationSidebar] 无法解析会话时间', session)
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
|
||||||
|
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'])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 4: 在 `selectSession` 末尾追加 `syncExpandedWithCurrent()`**
|
||||||
|
|
||||||
|
将：
|
||||||
|
|
||||||
|
```js
|
||||||
|
function selectSession(session) {
|
||||||
|
currentSession.value = session
|
||||||
|
emit('select', session)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
改为：
|
||||||
|
|
||||||
|
```js
|
||||||
|
function selectSession(session) {
|
||||||
|
currentSession.value = session
|
||||||
|
emit('select', session)
|
||||||
|
syncExpandedWithCurrent()
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 5: 在 `fetchSessions` 的 `finally` 中调用 `syncExpandedWithCurrent()`**
|
||||||
|
|
||||||
|
将 `fetchSessions` 函数体中 `finally` 块改为：
|
||||||
|
|
||||||
|
```js
|
||||||
|
} finally {
|
||||||
|
// 强制最小 loading 时长，避免接口返回过快导致 icon 一闪而过
|
||||||
|
const elapsed = Date.now() - start
|
||||||
|
const remain = 300 - elapsed
|
||||||
|
if (remain > 0) await new Promise(resolve => setTimeout(resolve, remain))
|
||||||
|
loading.value = false
|
||||||
|
syncExpandedWithCurrent()
|
||||||
|
emit('ready')
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 6: 在 `handleDeleteSession` 删除条目后追加 `syncExpandedWithCurrent()`**
|
||||||
|
|
||||||
|
找到：
|
||||||
|
|
||||||
|
```js
|
||||||
|
if (currentSession.value?.sessionId === session.sessionId) {
|
||||||
|
currentSession.value = null
|
||||||
|
emit('select', null)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
在它之后追加：
|
||||||
|
|
||||||
|
```js
|
||||||
|
syncExpandedWithCurrent()
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 7: dev 验证（任务4）**
|
||||||
|
|
||||||
|
启动 dev，进入 `/frontend`：
|
||||||
|
- 列表加载完成后默认 `今天` 展开、昨天 / 更早折叠；
|
||||||
|
- 点击任一会话 → 仅其所在分组展开；
|
||||||
|
- 点击分组标题 → 切换展开 / 折叠。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 5: `ChatWindow.vue` —— 气泡节奏收紧
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Modify: `src/views/frontend/components/ChatWindow.vue`（`<style scoped lang="scss">` 段）
|
||||||
|
|
||||||
|
- [ ] **Step 1: 收紧容器与消息组**
|
||||||
|
|
||||||
|
在 `<style scoped lang="scss">` 中定位 `.chat-window` 与 `.message-group`，将：
|
||||||
|
|
||||||
|
```scss
|
||||||
|
.chat-window {
|
||||||
|
...
|
||||||
|
padding: 16px 20px;
|
||||||
|
...
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-group {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
...
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
分别改为：
|
||||||
|
|
||||||
|
```scss
|
||||||
|
.chat-window {
|
||||||
|
...
|
||||||
|
padding: 12px 16px;
|
||||||
|
...
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-group {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
...
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 2: 收紧气泡**
|
||||||
|
|
||||||
|
定位 `.message-bubble`（user / assistant 共享样式），将 `padding: 10px 14px;` 改为 `padding: 9px 13px;`；将 `border-radius: 12px;` 改为 `border-radius: 10px;`。
|
||||||
|
|
||||||
|
- [ ] **Step 3: dev 验证（任务5）**
|
||||||
|
|
||||||
|
启动 dev，进入 `/frontend`，选择一个会话发消息，目测：
|
||||||
|
- 用户 / 助手气泡圆角 10px；
|
||||||
|
- 气泡内边距 9 / 13px；
|
||||||
|
- 消息组间距 10px；
|
||||||
|
- 整体节奏与 `chat.png` 一致；
|
||||||
|
- 发送消息后流式追加仍自动滚到底。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 6: 端到端冒烟清单（合并验证）
|
||||||
|
|
||||||
|
**Files:** 无新增；仅执行 dev 自检。
|
||||||
|
|
||||||
|
- [ ] **Step 1: 深色主题**
|
||||||
|
|
||||||
|
进入 `/frontend` 默认深色：
|
||||||
|
- 容器底色 `#14171c`、卡片背景 `#1c1f24`；
|
||||||
|
- ChatHeader、ConversationSidebar、ChatWindow、InputArea 颜色一致；
|
||||||
|
- accent 高亮 `#6c8cff`（搜索框聚焦边框、分组标题、新建会话图标等）。
|
||||||
|
|
||||||
|
- [ ] **Step 2: 浅色主题未变**
|
||||||
|
|
||||||
|
切到浅色主题：底色 `#ffffff`、accent `#1890ff`；与改动前完全一致。
|
||||||
|
|
||||||
|
- [ ] **Step 3: 上下文 popover / 模型选择 / ElMessageBox**
|
||||||
|
|
||||||
|
点击 ChatHeader 切换模型、点击 InputArea 右下角上下文指示器、删除会话触发确认弹窗：新深色系跟随；浅色下保持原样。
|
||||||
|
|
||||||
|
- [ ] **Step 4: 侧栏分组 + 搜索框**
|
||||||
|
|
||||||
|
- 列表加载默认 `今天` 展开；
|
||||||
|
- 点击分组标题切换展开 / 折叠；
|
||||||
|
- 选中任一会话 → 仅其所在分组展开；
|
||||||
|
- 删除当前会话后折叠状态回退到 `今天`（或当前会话所在分组）；
|
||||||
|
- 搜索框聚焦高亮、placeholder "搜索会话"、输入不改变列表；
|
||||||
|
- 右键菜单仍可重命名 / 删除会话。
|
||||||
|
|
||||||
|
- [ ] **Step 5: 聊天模块**
|
||||||
|
|
||||||
|
- 用户 / 助手气泡圆角 10px、内边距 9/13px；
|
||||||
|
- 消息组间距 10px；
|
||||||
|
- 流式追加自动滚到底；
|
||||||
|
- 上拉后向下箭头按钮仍可点击回到底部；
|
||||||
|
- 处理详情折叠面板（thinking / tool）展开 / 折叠正常。
|
||||||
|
|
||||||
|
- [ ] **Step 6: 不做 git 推送**
|
||||||
|
|
||||||
|
本次仅修改本地文件，不运行 `git push` / `git commit`（如果用户希望记录变更，可手动提交）。
|
||||||
@@ -0,0 +1,542 @@
|
|||||||
|
# Frontend 顶部重排 + 搜索高亮 + 分组默认展开 Implementation Plan
|
||||||
|
|
||||||
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||||
|
|
||||||
|
**Goal:** 把 ChatHeader 顶部右侧改为"清空 icon + 模型下拉 + 文件面板折叠 icon"；标题前加 agentName 首字圆形 icon；文件面板默认展开；侧栏搜索框聚焦高亮；分组默认全部展开。
|
||||||
|
|
||||||
|
**Architecture:** 三个文件局部改动，不新增组件。ChatHeader 改为 props-driven（`modelOptions`、`modelValue`、`filePanelVisible`），通过 `update:modelValue` 与 `toggle-file-panel` 两个事件与父组件通讯。ConversationSidebar 调整 `syncExpandedWithCurrent` 默认行为并补充搜索框 `:focus` 样式。index.vue 默认 `filePanelVisible = true`、新增 `handleModelSelectChange` / `handleToggleFilePanel`、删除 `handleTabChange` 与 `setActiveTab` 调用。LlmModelModal 文件保留不引用。
|
||||||
|
|
||||||
|
**Tech Stack:** Vue 3.5 + Composition API + Element Plus 2.13（`el-select` / `el-option` / `Fold` / `Expand` / `Delete` 图标）+ Sass（sass-embedded 1.97）。无前端测试框架，沿用手动 dev 验证（Task 5）。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## File Structure
|
||||||
|
|
||||||
|
| 文件 | 操作 | 职责 |
|
||||||
|
|---|---|---|
|
||||||
|
| `src/views/frontend/components/ChatHeader.vue` | 改 | 模板重排（avatar / clear icon / model select / sidebar fold icon）；脚本替换（LlmModelModal 移除、新增 modelOptions 等 props、单一 update:modelValue 通道）；样式新增（.agent-avatar / .icon-btn / .model-select） |
|
||||||
|
| `src/views/frontend/components/ConversationSidebar.vue` | 改 | `.sidebar-search` 追加 `:focus` 样式；`syncExpandedWithCurrent` 改为全部展开 |
|
||||||
|
| `src/views/frontend/index.vue` | 改 | `filePanelVisible` 默认 `true`；删除 `handleTabChange`；`handleFilePanelClose` 中移除 `setActiveTab` 调用；新增 `modelSelectOptions` computed、`handleModelSelectChange`、`handleToggleFilePanel`；模板 ChatHeader props 与事件调整 |
|
||||||
|
| `src/views/frontend/components/LlmModelModal.vue` | 保留 | 文件保留，未来如需"更多模型"入口再启用 |
|
||||||
|
|
||||||
|
无新增文件；不新增组件抽象。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 1: ChatHeader —— props 与事件契约改造
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Modify: `src/views/frontend/components/ChatHeader.vue:33-67`（`<script setup>` 段）
|
||||||
|
|
||||||
|
- [ ] **Step 1: 替换 icon 导入**
|
||||||
|
|
||||||
|
将：
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { Cpu } from '@element-plus/icons-vue'
|
||||||
|
import LlmModelModal from './LlmModelModal.vue'
|
||||||
|
```
|
||||||
|
|
||||||
|
改为：
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { Delete, Fold, Expand } from '@element-plus/icons-vue'
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 2: 删除 LlmModelModal 引用与 tab 状态**
|
||||||
|
|
||||||
|
删除以下声明（出现在 `import` 之后、`defineProps` 之前）：
|
||||||
|
|
||||||
|
```js
|
||||||
|
const activeTab = ref('agent')
|
||||||
|
const showModelModal = ref(false)
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 3: 扩展 props**
|
||||||
|
|
||||||
|
将：
|
||||||
|
|
||||||
|
```js
|
||||||
|
const props = defineProps({
|
||||||
|
agentName: {
|
||||||
|
type: String,
|
||||||
|
default: '请选择会话'
|
||||||
|
},
|
||||||
|
currentModel: {
|
||||||
|
type: Object,
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
改为：
|
||||||
|
|
||||||
|
```js
|
||||||
|
const props = defineProps({
|
||||||
|
agentName: {
|
||||||
|
type: String,
|
||||||
|
default: '请选择会话'
|
||||||
|
},
|
||||||
|
currentModel: {
|
||||||
|
type: Object,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
modelOptions: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
filePanelVisible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 4: 替换 emits**
|
||||||
|
|
||||||
|
将：
|
||||||
|
|
||||||
|
```js
|
||||||
|
const emit = defineEmits(['tab-change', 'model-change', 'clear'])
|
||||||
|
```
|
||||||
|
|
||||||
|
改为：
|
||||||
|
|
||||||
|
```js
|
||||||
|
const emit = defineEmits(['clear', 'update:modelValue', 'toggle-file-panel'])
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 5: 删除 tab/modal 相关函数、删除 expose，新增 `agentNameInitial` / `handleSelectChange` / `handleToggleClick`**
|
||||||
|
|
||||||
|
将整个 `<script setup>` 中除 `defineProps` / `defineEmits` / icon 导入之外的所有函数（含 `handleTabClick` / `handleModelSelect` / `defineExpose` 块）替换为：
|
||||||
|
|
||||||
|
```js
|
||||||
|
const agentNameInitial = computed(() => {
|
||||||
|
const name = (props.agentName || '').trim()
|
||||||
|
if (!name) return '?'
|
||||||
|
// 中文取首字，英文取首字母
|
||||||
|
return [...name][0]
|
||||||
|
})
|
||||||
|
|
||||||
|
function handleSelectChange(value) {
|
||||||
|
emit('update:modelValue', value)
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleToggleClick() {
|
||||||
|
emit('toggle-file-panel')
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
并在 `<script setup>` 顶部补充 `import { computed } from 'vue'`（如果尚未导入）。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 2: ChatHeader —— 模板替换
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Modify: `src/views/frontend/components/ChatHeader.vue:0-31`（`<template>` 段）
|
||||||
|
|
||||||
|
- [ ] **Step 1: 整段替换 `<template>` 内容**
|
||||||
|
|
||||||
|
将 `<template>` 块从：
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div class="chat-header">
|
||||||
|
<div class="header-left">
|
||||||
|
<span class="conversation-name">{{ agentName }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<!-- 清空会话 -->
|
||||||
|
<el-button @click="emit('clear')">
|
||||||
|
清空会话
|
||||||
|
</el-button>
|
||||||
|
<!-- 模型选择 -->
|
||||||
|
<el-button @click="showModelModal = true">
|
||||||
|
{{ currentModel?.name || currentModel?.modelName || '选择模型' }}
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
:type="activeTab === 'agent' ? 'primary' : 'default'"
|
||||||
|
@click="handleTabClick('agent')"
|
||||||
|
>
|
||||||
|
智能体
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
:type="activeTab === 'file' ? 'primary' : 'default'"
|
||||||
|
@click="handleTabClick('file')"
|
||||||
|
>
|
||||||
|
文件
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 模型选择弹窗 -->
|
||||||
|
<LlmModelModal v-model="showModelModal" @select="handleModelSelect" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
替换为：
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div class="chat-header">
|
||||||
|
<div class="header-left">
|
||||||
|
<div class="agent-avatar">{{ agentNameInitial }}</div>
|
||||||
|
<span class="conversation-name">{{ agentName }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<el-tooltip content="清空会话" placement="bottom" :show-after="300">
|
||||||
|
<el-button class="icon-btn" link @click="emit('clear')">
|
||||||
|
<el-icon><Delete /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
|
||||||
|
<el-select
|
||||||
|
class="model-select"
|
||||||
|
:model-value="modelValue"
|
||||||
|
@update:model-value="handleSelectChange"
|
||||||
|
placeholder="选择模型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="opt in modelOptions"
|
||||||
|
:key="opt.value"
|
||||||
|
:label="opt.label"
|
||||||
|
:value="opt.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
|
||||||
|
<el-tooltip
|
||||||
|
:content="filePanelVisible ? '收起文件面板' : '展开文件面板'"
|
||||||
|
placement="bottom"
|
||||||
|
:show-after="300"
|
||||||
|
>
|
||||||
|
<el-button class="icon-btn" link @click="handleToggleClick">
|
||||||
|
<el-icon>
|
||||||
|
<component :is="filePanelVisible ? Fold : Expand" />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 3: ChatHeader —— 样式新增
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Modify: `src/views/frontend/components/ChatHeader.vue`（`<style scoped lang="scss">` 段）
|
||||||
|
|
||||||
|
- [ ] **Step 1: 重写 `<style scoped lang="scss">` 内容**
|
||||||
|
|
||||||
|
将现有 `<style scoped lang="scss">` 整段替换为：
|
||||||
|
|
||||||
|
```scss
|
||||||
|
.chat-header {
|
||||||
|
padding: 11px;
|
||||||
|
border-bottom: 1px solid var(--fe-border);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background: var(--fe-bg-elevated);
|
||||||
|
color: var(--fe-text-primary);
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
max-width: 480px;
|
||||||
|
|
||||||
|
.agent-avatar {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--fe-accent);
|
||||||
|
color: var(--fe-text-inverse);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation-name {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.icon-btn {
|
||||||
|
padding: 4px 8px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--fe-text-secondary);
|
||||||
|
height: 32px;
|
||||||
|
width: 32px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: var(--fe-radius-md);
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--fe-bg-hover);
|
||||||
|
color: var(--fe-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-icon {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-select {
|
||||||
|
width: 180px;
|
||||||
|
:deep(.el-select__wrapper) {
|
||||||
|
background: var(--fe-bg-elevated);
|
||||||
|
box-shadow: 0 0 0 1px var(--fe-border) inset;
|
||||||
|
border-radius: var(--fe-radius-md);
|
||||||
|
}
|
||||||
|
:deep(.el-select__placeholder) { color: var(--fe-text-muted); }
|
||||||
|
:deep(.el-select__selected-item) { color: var(--fe-text-primary); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 4: ConversationSidebar —— 搜索框聚焦高亮
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Modify: `src/views/frontend/components/ConversationSidebar.vue`（`<style scoped lang="scss">` 中 `.sidebar-search` 块）
|
||||||
|
|
||||||
|
- [ ] **Step 1: 在 `.sidebar-search` 内追加 `:focus` 规则**
|
||||||
|
|
||||||
|
找到：
|
||||||
|
|
||||||
|
```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); }
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
替换为：
|
||||||
|
|
||||||
|
```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);
|
||||||
|
transition: box-shadow 0.15s, background 0.15s;
|
||||||
|
}
|
||||||
|
:deep(.el-input__wrapper.is-focus) {
|
||||||
|
box-shadow: 0 0 0 1px var(--fe-accent) inset;
|
||||||
|
background: var(--fe-bg-elevated);
|
||||||
|
}
|
||||||
|
:deep(.el-input__inner) {
|
||||||
|
color: var(--fe-text-primary);
|
||||||
|
&::placeholder { color: var(--fe-text-muted); }
|
||||||
|
}
|
||||||
|
:deep(.el-input__wrapper.is-focus .el-input__inner::placeholder) {
|
||||||
|
color: var(--fe-text-secondary);
|
||||||
|
}
|
||||||
|
:deep(.el-input__prefix .el-icon) { color: var(--fe-text-muted); }
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 5: ConversationSidebar —— 分组默认全部展开
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Modify: `src/views/frontend/components/ConversationSidebar.vue`（`<script setup>` 中 `syncExpandedWithCurrent`）
|
||||||
|
|
||||||
|
- [ ] **Step 1: 重写 `syncExpandedWithCurrent` 函数体**
|
||||||
|
|
||||||
|
将：
|
||||||
|
|
||||||
|
```js
|
||||||
|
function syncExpandedWithCurrent() {
|
||||||
|
if (currentSession.value) {
|
||||||
|
expandedGroups.value = new Set([groupOf(currentSession.value)])
|
||||||
|
} else {
|
||||||
|
expandedGroups.value = new Set(['today'])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
替换为：
|
||||||
|
|
||||||
|
```js
|
||||||
|
function syncExpandedWithCurrent() {
|
||||||
|
// 用户要求默认全部展开；用户可点击分组标题手动收/展
|
||||||
|
expandedGroups.value = new Set(['today', 'yesterday', 'earlier'])
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 6: index.vue —— 文件面板默认展开 + 新增模型切换与折叠处理
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Modify: `src/views/frontend/index.vue`
|
||||||
|
|
||||||
|
- [ ] **Step 1: 文件面板默认 `true`**
|
||||||
|
|
||||||
|
将 `const filePanelVisible = ref(false);` 改为 `const filePanelVisible = ref(true);`。
|
||||||
|
|
||||||
|
- [ ] **Step 2: 新增 `modelSelectOptions` computed 与 `handleModelSelectChange`**
|
||||||
|
|
||||||
|
在 `currentModel = ref(null)` 附近、`initModels` 之前，插入：
|
||||||
|
|
||||||
|
```js
|
||||||
|
const modelSelectOptions = computed(() => modelList.value.map(m => ({
|
||||||
|
label: m.name || m.modelName || '',
|
||||||
|
value: m.modelName || m.name || ''
|
||||||
|
})))
|
||||||
|
|
||||||
|
function handleModelSelectChange(value) {
|
||||||
|
const found = modelList.value.find(m => (m.modelName || m.name) === value)
|
||||||
|
if (found) {
|
||||||
|
currentModel.value = found
|
||||||
|
ElMessage.success(`已选择模型: ${found.name || found.modelName}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 3: 新增 `handleToggleFilePanel`**
|
||||||
|
|
||||||
|
在 `handleModelChange` 之后插入：
|
||||||
|
|
||||||
|
```js
|
||||||
|
function handleToggleFilePanel() {
|
||||||
|
filePanelVisible.value = !filePanelVisible.value
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 4: 删除 `handleTabChange` 函数体**
|
||||||
|
|
||||||
|
将 `handleTabChange` 整个函数（含之前的 `function handleTabChange(tab) { ... }`）连同其上方空行一起删除。
|
||||||
|
|
||||||
|
- [ ] **Step 5: 删除 `handleFilePanelClose` 中的 `setActiveTab` 调用**
|
||||||
|
|
||||||
|
将：
|
||||||
|
|
||||||
|
```js
|
||||||
|
function handleFilePanelClose() {
|
||||||
|
filePanelVisible.value = false;
|
||||||
|
previewVisible.value = false;
|
||||||
|
chatHeaderRef.value?.setActiveTab('agent');
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
改为：
|
||||||
|
|
||||||
|
```js
|
||||||
|
function handleFilePanelClose() {
|
||||||
|
filePanelVisible.value = false;
|
||||||
|
previewVisible.value = false;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 6: 替换模板上的 `<ChatHeader>` 标签**
|
||||||
|
|
||||||
|
将：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<ChatHeader
|
||||||
|
ref="chatHeaderRef"
|
||||||
|
:agent-name="currentConversation?.agentName || '请选择会话'"
|
||||||
|
:current-model="currentModel"
|
||||||
|
@tab-change="handleTabChange"
|
||||||
|
@model-change="handleModelChange"
|
||||||
|
@clear="handleClear"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
替换为：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<ChatHeader
|
||||||
|
ref="chatHeaderRef"
|
||||||
|
:agent-name="currentConversation?.agentName || '请选择会话'"
|
||||||
|
:current-model="currentModel"
|
||||||
|
:model-options="modelSelectOptions"
|
||||||
|
:model-value="currentModel?.modelName || currentModel?.name || ''"
|
||||||
|
:file-panel-visible="filePanelVisible"
|
||||||
|
@update:model-value="handleModelSelectChange"
|
||||||
|
@toggle-file-panel="handleToggleFilePanel"
|
||||||
|
@clear="handleClear"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 7: 端到端冒烟清单
|
||||||
|
|
||||||
|
**Files:** 无新增；仅执行 dev 自检。
|
||||||
|
|
||||||
|
- [ ] **Step 1: ChatHeader 视觉**
|
||||||
|
|
||||||
|
启动 `npm run dev`，进入 `/frontend`，目测：
|
||||||
|
- 左侧 `agent-avatar` 圆形 icon（accent 背景、白字、显示 agentName 首字），后跟 agentName；
|
||||||
|
- 右侧依次：垃圾桶 icon（清空）、模型 el-select 下拉、文件面板折叠 icon（默认 Fold，因为 filePanelVisible 默认 true）；
|
||||||
|
- 不再有 "智能体" / "文件" 两个 tab 按钮；不再有 `LlmModelModal` 弹窗入口。
|
||||||
|
|
||||||
|
- [ ] **Step 2: 文件面板默认展开 + icon 切换**
|
||||||
|
|
||||||
|
- 页面加载后文件面板可见；
|
||||||
|
- 点击 ChatHeader 右侧 Fold icon → 文件面板收起，icon 变为 Expand；
|
||||||
|
- 再点 Expand icon → 文件面板展开，icon 变回 Fold。
|
||||||
|
|
||||||
|
- [ ] **Step 3: 模型下拉**
|
||||||
|
|
||||||
|
- el-select 显示当前模型名称；
|
||||||
|
- 切换下拉 → 立即生效（chatWindow 后续发送消息会带上新模型）；
|
||||||
|
- `ElMessage` 提示"已选择模型: …"。
|
||||||
|
|
||||||
|
- [ ] **Step 4: 清空 icon**
|
||||||
|
|
||||||
|
- 点击垃圾桶 icon → WebSocket 发送 `clear` 类型消息，聊天区消息清空；
|
||||||
|
- 控制台无 error。
|
||||||
|
|
||||||
|
- [ ] **Step 5: 搜索框聚焦高亮**
|
||||||
|
|
||||||
|
- 点击侧栏搜索框 → 输入框边框变为 accent 色；
|
||||||
|
- placeholder 颜色由 muted 变 secondary；
|
||||||
|
- 失焦恢复。
|
||||||
|
|
||||||
|
- [ ] **Step 6: 分组默认全部展开**
|
||||||
|
|
||||||
|
- 页面加载后 今天 / 昨天 / 更早 三段同时展开；
|
||||||
|
- 切换会话后仍全部展开（不回到"仅当前分组"）；
|
||||||
|
- 点击任一分组标题可手动折叠；切换会话或刷新会重置为全部展开。
|
||||||
|
|
||||||
|
- [ ] **Step 7: 不做 git 推送**
|
||||||
|
|
||||||
|
本次仅修改本地文件，不运行 `git push` / `git commit`（用户自行决定是否提交）。
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
# Frontend 上下文窗口 popover 主题适配 — Design Spec
|
||||||
|
|
||||||
|
**日期：** 2026-08-07
|
||||||
|
**状态：** Approved
|
||||||
|
**范围：** Bug 修复（CSS 变量 / Element Plus Teleport）
|
||||||
|
|
||||||
|
## 背景
|
||||||
|
|
||||||
|
`src/views/frontend/components/InputArea.vue` 中的"上下文窗口"指示器（`.context-indicator`）点击后弹出 `el-popover`，其中显示 token 使用量、阈值百分比等。当前问题是：该 popover 没有适配 frontend 的深 / 浅色主题。
|
||||||
|
|
||||||
|
## 根因
|
||||||
|
|
||||||
|
Element Plus 的 `el-popover` 默认 `teleported: true`（已确认，源码 `element-plus/es/components/tooltip/src/content.mjs`），弹出层被 Teleport 到 body 之外。
|
||||||
|
|
||||||
|
`body[data-fe-theme="light"]` 只覆盖了 `--fe-*` 系列变量，未覆盖 Element Plus 内部用到的 `--el-bg-color-overlay`、`--el-border-color-lighter`、`--el-text-color-regular` 等。结果是：
|
||||||
|
|
||||||
|
- popover 容器（`.el-popper`）回退到 Element Plus 默认值（浅色背景 + 浅色文本）
|
||||||
|
- 在深色主题下，与 frontend 整体深色风格不一致
|
||||||
|
- 而 `.context-popover` 内部的 `--fe-*` 变量虽然继承自 `:root`，但 popover 容器本身的背景 / 边框 / 文字色来自 `--el-*`，这些没被覆盖
|
||||||
|
|
||||||
|
## 方案
|
||||||
|
|
||||||
|
**给 `el-popover` 设置 `:teleported="false"`**，让 popover 容器保留在 `.frontend-container` DOM 树内，从而继承 `.frontend-container` 下的所有 `--el-*` / `--fe-*` 变量映射。
|
||||||
|
|
||||||
|
### 改动点
|
||||||
|
|
||||||
|
`src/views/frontend/components/InputArea.vue` 第 81-85 行的 `el-popover` 标签，新增 `:teleported="false"`：
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<el-popover
|
||||||
|
placement="top"
|
||||||
|
:width="280"
|
||||||
|
trigger="click"
|
||||||
|
:teleported="false"
|
||||||
|
>
|
||||||
|
```
|
||||||
|
|
||||||
|
`.context-popover` 现有的 scoped 样式（`.popover-title` / `.popover-body` / `.popover-footer` / `.token-count`）保持不变，因为它们使用 `--fe-*` 变量，本来就能工作。
|
||||||
|
|
||||||
|
### 不需要改动
|
||||||
|
|
||||||
|
- `theme.scss`：`.frontend-container` 已经把 `--el-bg-color-overlay`、`--el-text-color-regular`、`--el-color-success`、`--el-color-danger` 等都映射到 `--fe-*` 变量，只要 popover 在 `.frontend-container` 内就能自动生效
|
||||||
|
- 浅色覆盖：`.frontend-container[data-theme="light"]` 同样完整覆盖了 `--el-*` 系列
|
||||||
|
- `.context-popover` 的 scoped 样式：因为 `.context-popover` 本身在 InputArea 模板中，scoped 的 `data-v-xxx` 仍会附加到元素上，popover 留在组件树内后所有选择器自然匹配
|
||||||
|
|
||||||
|
## 验证
|
||||||
|
|
||||||
|
1. 切到深色主题，点击输入框右下角的"XX%"指示器 → popover 应为深色背景（`#252526` / `--fe-bg-elevated`）、浅色文字
|
||||||
|
2. 切到浅色主题，点击同一指示器 → popover 应为白色（`#ffffff` / `--el-bg-color`）、深色文字
|
||||||
|
3. 百分比 `el-tag`：深色主题下 `success` 是青色（`#4ec9b0`），`danger` 是珊瑚红（`#f48771`）；浅色主题下 `success` 是蓝色（`#1890ff`），`danger` 是红色（`#f56c6c`）
|
||||||
|
4. `token-count` 文字：深色下青色，浅色下蓝色
|
||||||
|
5. 重复点击 / 多次切换主题，popover 位置不漂移、不被聊天内容遮挡
|
||||||
|
|
||||||
|
## 非目标
|
||||||
|
|
||||||
|
- 不改 `el-popover` 的其它属性（placement、width、trigger）
|
||||||
|
- 不改 `theme.scss`
|
||||||
|
- 不改 `.context-popover` 现有样式（变量已经够用）
|
||||||
|
- 不动 `el-tooltip`（左下角 `@` 按钮的 tooltip，独立组件，独立处理）
|
||||||
@@ -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` 之后新增 `<div class="sidebar-search">`，内含 `<el-input v-model="searchKeyword" placeholder="搜索会话">`，前缀图标 `Search`；
|
||||||
|
- `<el-scrollbar>` 内部从 `v-for="session in sessionList"` 改为 `v-for="group in sessionGroups" :key="group.key"`：
|
||||||
|
- 每个 `group.items.length === 0` 不渲染；
|
||||||
|
- `<div class="group-header" @click="toggleGroup(group.key)">` 包含 `<span class="group-title">{{ group.label }}</span>` 与 `<el-icon class="group-toggle"><ArrowDown v-if="expandedGroups.has(group.key)" /><ArrowRight v-else /></el-icon>`；
|
||||||
|
- `<div v-show="expandedGroups.has(group.key)" class="group-items">` 渲染 `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`
|
||||||
|
|
||||||
|
仅改 `<style scoped lang="scss">`：
|
||||||
|
|
||||||
|
```scss
|
||||||
|
.chat-window {
|
||||||
|
// padding: 16px 20px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-group {
|
||||||
|
// margin-bottom: 12px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-bubble {
|
||||||
|
// padding: 10px 14px;
|
||||||
|
padding: 9px 13px;
|
||||||
|
// border-radius: 12px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
模板、`<script setup>`、`watch`、`onMounted`、`process-panel`、`scroll-to-bottom` 全部保持原样；`.scroll-to-bottom` 的颜色/阴影通过 `--fe-bg-elevated` / `--fe-shadow-md` 自动跟随新调色。
|
||||||
|
|
||||||
|
## 数据流
|
||||||
|
|
||||||
|
1. `ConversationSidebar.fetchSessions()` → `sessionList` 更新；
|
||||||
|
2. `sessionGroups`（computed）按 `updateTime` 派生今天 / 昨天 / 更早；
|
||||||
|
3. `syncExpandedWithCurrent()` 决定 `expandedGroups`；
|
||||||
|
4. 模板渲染：分组标题 + 当前展开分组内的会话项。
|
||||||
|
|
||||||
|
聊天模块无新增数据流，仅样式收紧。
|
||||||
|
|
||||||
|
## 异常处理
|
||||||
|
|
||||||
|
- `updateTime` 无法解析 → `parseTimestamp` 返回 `null` → `groupOf` 落回 `'earlier'`；控制台 `console.warn('无法解析会话时间', session)` 一次；
|
||||||
|
- 折叠 Set 为空 → `syncExpandedWithCurrent` 总能产出至少一个 key（`'today'` 或当前会话所在分组）；
|
||||||
|
- 搜索框无异常路径：用户输入不会改变列表。
|
||||||
|
|
||||||
|
## 验证
|
||||||
|
|
||||||
|
| 步骤 | 期望 |
|
||||||
|
|---|---|
|
||||||
|
| 1 | 启动 dev，深色主题下 frontend 容器底色变 `#14171c`，accent 高亮变 `#6c8cff` |
|
||||||
|
| 2 | 切到浅色主题：颜色与之前完全一致（`#ffffff` / `#1890ff`） |
|
||||||
|
| 3 | 上下文 popover / ChatHeader 模型选择 / `ElMessageBox` 弹窗主题一致（新色系跟随） |
|
||||||
|
| 4 | 列表加载完成后默认 `今天` 展开、昨天 / 更早折叠 |
|
||||||
|
| 5 | 点击任一会话 → 仅其所在分组展开 |
|
||||||
|
| 6 | 点击分组标题 → 切换展开 / 折叠 |
|
||||||
|
| 7 | 搜索框：聚焦高亮、placeholder "搜索会话"、输入无任何列表变化 |
|
||||||
|
| 8 | 聊天区：用户 / 助手气泡圆角 10px、内边距 9/13px；消息间距 10px；与 chat.png 节奏一致 |
|
||||||
|
| 9 | 发消息后流式追加仍自动滚到底；不回归 |
|
||||||
|
| 10 | 删会话后折叠状态保持 `今天`（或当前会话所在分组） |
|
||||||
|
|
||||||
|
## 风险
|
||||||
|
|
||||||
|
- 颜色变量变更可能与前端测试中硬编码颜色（如 `ChatWindow.vue` 内的 `color="#67C23A"` 等 icon 颜色）冲突；本次只动 `--fe-*` 全局变量，硬编码 icon 颜色保留原值；
|
||||||
|
- `parseTimestamp` 仅识别现有 3 种格式（毫秒 / 14 位 / 空格分隔），与 `ChatWindow.formatTime` 保持一致；其它格式落回 "更早" 不报错；
|
||||||
|
- 不做 git 推送；用户在本地合并 / 推送。
|
||||||
@@ -0,0 +1,276 @@
|
|||||||
|
# Frontend 顶部重排 + 搜索高亮 + 分组默认展开 Design Spec
|
||||||
|
|
||||||
|
**日期：** 2026-08-08
|
||||||
|
**状态：** Approved
|
||||||
|
**范围：** UI 调整（仅本地代码，不做 git 推送）
|
||||||
|
**前置：** 已完成 docs/superpowers/specs/2026-08-08-frontend-dark-theme-sidebar-search-chat-design.md 的深色主题 + 会话搜索/分组 + 聊天气泡节奏改动。本 spec 在此基础上扩展。
|
||||||
|
|
||||||
|
## 背景
|
||||||
|
|
||||||
|
根目录 `chat.png` 中聊天区顶部为：`[agent avatar] [agent name] …… [icon: clear] [model select] [icon: collapse]`。
|
||||||
|
|
||||||
|
当前 `ChatHeader.vue` 顶部右侧有四个按钮：清空会话 / 选择模型 / 智能体 / 文件。"智能体" / "文件" 是互斥 tab，会同时影响 `filePanelVisible` 与 `previewVisible`。本次去掉两个 tab，换成一个独立的"折叠文件面板"icon，让文件面板默认展开，由 icon 控制显隐。
|
||||||
|
|
||||||
|
同时修正：
|
||||||
|
- 搜索框聚焦时仅边框变 accent、placeholder 略亮（已配置样式但未生效）；
|
||||||
|
- 会话分组默认全部展开（当前默认仅当前会话所在分组展开）。
|
||||||
|
|
||||||
|
## 目标 / 非目标
|
||||||
|
|
||||||
|
**目标**
|
||||||
|
|
||||||
|
- ChatHeader 顶部右侧：`[icon: clear]` + `[el-select: model]` + `[icon: sidebar-fold/unfold]`；
|
||||||
|
- 标题前加 `agentName` 首字圆形 icon（accent 背景，白色字）；
|
||||||
|
- 文件面板默认展开，点击 sidebar-fold icon 折叠，再点 sidebar-unfold icon 展开；
|
||||||
|
- 搜索框聚焦高亮边框与 placeholder；
|
||||||
|
- 会话分组默认全部展开（`today / yesterday / earlier`）；
|
||||||
|
- 移除 `LlmModelModal` 在 ChatHeader 中的引用（文件保留）；
|
||||||
|
- 移除 `handleTabChange` 中"agent"分支与 `setActiveTab` 调用点。
|
||||||
|
|
||||||
|
**非目标**
|
||||||
|
|
||||||
|
- 不改 WebSocket、流式消息、自动下拉、`InputArea`、`UserArea`、右键菜单、`ChatWindow`、浅色主题、`theme.scss`；
|
||||||
|
- 不持久化文件面板折叠状态、模型选择状态；
|
||||||
|
- 不动后端 `listLlmModels`、`getLlmAngent` 等接口；
|
||||||
|
- 不在本次引入 `useFilePanelStore` / `useModelStore`（保持父组件持有状态）。
|
||||||
|
|
||||||
|
## 改动清单
|
||||||
|
|
||||||
|
### 1. `src/views/frontend/components/ChatHeader.vue`
|
||||||
|
|
||||||
|
#### 模板变更
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div class="chat-header">
|
||||||
|
<div class="header-left">
|
||||||
|
<div class="agent-avatar">{{ agentNameInitial }}</div>
|
||||||
|
<span class="conversation-name">{{ agentName }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<el-tooltip content="清空会话" placement="bottom" :show-after="300">
|
||||||
|
<el-button class="icon-btn" link @click="emit('clear')">
|
||||||
|
<el-icon><Delete /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
|
||||||
|
<el-select
|
||||||
|
class="model-select"
|
||||||
|
:model-value="modelValue"
|
||||||
|
@update:model-value="handleSelectChange"
|
||||||
|
size="default"
|
||||||
|
placeholder="选择模型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="opt in modelOptions"
|
||||||
|
:key="opt.value"
|
||||||
|
:label="opt.label"
|
||||||
|
:value="opt.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
|
||||||
|
<el-tooltip :content="filePanelVisible ? '收起文件面板' : '展开文件面板'" placement="bottom" :show-after="300">
|
||||||
|
<el-button class="icon-btn" link @click="handleToggleClick">
|
||||||
|
<el-icon><component :is="filePanelVisible ? Fold : Expand" /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
> 注：Element Plus 图标库中"面板折叠 / 展开"对应的图标名为 `Fold` / `Expand`（无 `SidebarFold` / `SidebarUnfold` 同名图标）。语义与"收起 / 展开文件面板"完全对应。
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 脚本变更
|
||||||
|
|
||||||
|
- `import { Delete, Fold, Expand } from '@element-plus/icons-vue'`；
|
||||||
|
- 删除 `import LlmModelModal from './LlmModelModal.vue'`、`activeTab` ref、`showModelModal` ref、`handleTabClick` 函数、`setActiveTab` expose 方法；
|
||||||
|
- 删除 `emit('tab-change', tab)`；
|
||||||
|
- 新增 props：`modelOptions: Array<{label, value}>`、`modelValue: String`、`filePanelVisible: Boolean`；
|
||||||
|
- 新增 emits：`update:modelValue`、`toggle-file-panel`；
|
||||||
|
- 新增 computed `agentNameInitial`：取 `agentName` 的第一个字符（中文取首字、英文取首字母），为空时返回 `?`；
|
||||||
|
- 新增 `handleSelectChange(value)`：emit `update:modelValue`；
|
||||||
|
- 新增 `handleToggleClick()`：emit `toggle-file-panel`；
|
||||||
|
- 删除 `handleModelSelect(model)` 与 `model-change` emit——切换模型统一通过 `update:modelValue` 单事件流，避免重复。
|
||||||
|
|
||||||
|
#### 样式新增
|
||||||
|
|
||||||
|
```scss
|
||||||
|
.agent-avatar {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--fe-accent);
|
||||||
|
color: var(--fe-text-inverse);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
max-width: 480px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn {
|
||||||
|
padding: 4px 8px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--fe-text-secondary);
|
||||||
|
height: 32px;
|
||||||
|
width: 32px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: var(--fe-radius-md);
|
||||||
|
&:hover {
|
||||||
|
background: var(--fe-bg-hover);
|
||||||
|
color: var(--fe-text-primary);
|
||||||
|
}
|
||||||
|
.el-icon { font-size: 18px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-select {
|
||||||
|
width: 180px;
|
||||||
|
:deep(.el-select__wrapper) {
|
||||||
|
background: var(--fe-bg-elevated);
|
||||||
|
box-shadow: 0 0 0 1px var(--fe-border) inset;
|
||||||
|
border-radius: var(--fe-radius-md);
|
||||||
|
}
|
||||||
|
:deep(.el-select__placeholder) { color: var(--fe-text-muted); }
|
||||||
|
:deep(.el-select__selected-item) { color: var(--fe-text-primary); }
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. `src/views/frontend/components/ConversationSidebar.vue`
|
||||||
|
|
||||||
|
#### 搜索框聚焦高亮
|
||||||
|
|
||||||
|
在已有 `.sidebar-search` 块内追加：
|
||||||
|
|
||||||
|
```scss
|
||||||
|
.sidebar-search {
|
||||||
|
:deep(.el-input__wrapper.is-focus) {
|
||||||
|
box-shadow: 0 0 0 1px var(--fe-accent) inset;
|
||||||
|
background: var(--fe-bg-elevated);
|
||||||
|
}
|
||||||
|
:deep(.el-input__wrapper.is-focus .el-input__inner::placeholder) {
|
||||||
|
color: var(--fe-text-secondary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 分组默认全部展开
|
||||||
|
|
||||||
|
修改 `syncExpandedWithCurrent`：
|
||||||
|
|
||||||
|
```js
|
||||||
|
function syncExpandedWithCurrent() {
|
||||||
|
// 用户要求默认全部展开；当前会话所在分组由图标高亮区分，无需特殊收/展
|
||||||
|
expandedGroups.value = new Set(['today', 'yesterday', 'earlier'])
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
`toggleGroup` 行为保持不变——用户可手动收/展某个分组，刷新或切换会话后会重置为全部展开。
|
||||||
|
|
||||||
|
### 3. `src/views/frontend/index.vue`
|
||||||
|
|
||||||
|
#### 状态修改
|
||||||
|
|
||||||
|
```js
|
||||||
|
const filePanelVisible = ref(true) // 原为 false
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 删除 / 新增函数
|
||||||
|
|
||||||
|
- 整体删除 `handleTabChange` 函数体（index.vue 模板上 `@tab-change="..."` 也删除）；
|
||||||
|
- 删除 `handleFilePanelClose` 中对 `chatHeaderRef.value?.setActiveTab('agent')` 的调用（仅保留函数体中 `filePanelVisible.value = false; previewVisible.value = false`）；
|
||||||
|
- 删除模板上 `@model-change="handleModelChange"`、`@clear` 保留；改用 `@update:model-value="handleModelSelectChange"` 单一通道；
|
||||||
|
- 新增 `handleToggleFilePanel()`：
|
||||||
|
|
||||||
|
```js
|
||||||
|
function handleToggleFilePanel() {
|
||||||
|
filePanelVisible.value = !filePanelVisible.value
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 模板调整
|
||||||
|
|
||||||
|
把 `<ChatHeader>` 改为：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<ChatHeader
|
||||||
|
ref="chatHeaderRef"
|
||||||
|
:agent-name="currentConversation?.agentName || '请选择会话'"
|
||||||
|
:current-model="currentModel"
|
||||||
|
:model-options="modelSelectOptions"
|
||||||
|
:model-value="currentModel?.modelName || currentModel?.name || ''"
|
||||||
|
:file-panel-visible="filePanelVisible"
|
||||||
|
@update:model-value="handleModelSelectChange"
|
||||||
|
@toggle-file-panel="handleToggleFilePanel"
|
||||||
|
@clear="handleClear"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 脚本新增
|
||||||
|
|
||||||
|
```js
|
||||||
|
const modelSelectOptions = computed(() => modelList.value.map(m => ({
|
||||||
|
label: m.name || m.modelName || '',
|
||||||
|
value: m.modelName || m.name || ''
|
||||||
|
})))
|
||||||
|
|
||||||
|
function handleModelSelectChange(value) {
|
||||||
|
const found = modelList.value.find(m => (m.modelName || m.name) === value)
|
||||||
|
if (found) {
|
||||||
|
currentModel.value = found
|
||||||
|
ElMessage.success(`已选择模型: ${found.name || found.modelName}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. `src/views/frontend/components/LlmModelModal.vue`
|
||||||
|
|
||||||
|
不修改，保留文件以备后续扩展（不再从 ChatHeader 引用）。
|
||||||
|
|
||||||
|
## 数据流
|
||||||
|
|
||||||
|
1. `index.vue` 持有 `currentModel` / `modelList` / `filePanelVisible`；
|
||||||
|
2. 把 `modelSelectOptions` 与 `model-value` 传给 ChatHeader；
|
||||||
|
3. ChatHeader `el-select` change → emit `update:modelValue(value)` → 父按 value 在 `modelList` 中查找匹配项 → 写 `currentModel` → emit `model-change`；
|
||||||
|
4. ChatHeader 点击折叠 icon → emit `toggle-file-panel` → 父翻转 `filePanelVisible`；
|
||||||
|
5. 父根据 `filePanelVisible` 渲染 `<FilePanel>`。
|
||||||
|
|
||||||
|
## 异常处理
|
||||||
|
|
||||||
|
- `modelList` 为空：`el-select` 下拉空选项，不报错；
|
||||||
|
- `currentModel` 找不到匹配项：`handleModelSelectChange` 静默不更新，保留旧值；
|
||||||
|
- `agentName` 为空：`agent-avatar` 显示 `?`；
|
||||||
|
- 文件面板折叠 / 展开不持久化，刷新页面后默认展开；
|
||||||
|
- `LlmModelModal.vue` 文件保留但失去引用入口——下一轮如需"更多模型"再加回；本轮不删文件。
|
||||||
|
|
||||||
|
## 验证
|
||||||
|
|
||||||
|
| 步骤 | 期望 |
|
||||||
|
|---|---|
|
||||||
|
| 1 | 启动 dev，深色主题下顶部 ChatHeader：左侧 `agent-avatar` 圆形（accent 背景）+ agent 名称；右侧依次：垃圾桶 icon、模型下拉、文件面板折叠 icon |
|
||||||
|
| 2 | 切换会话，`agent-avatar` 文字随 `agentName` 首字变化 |
|
||||||
|
| 3 | 文件面板默认展开；点击 sidebar-fold icon → 文件面板收起，icon 变为 sidebar-unfold；再点 → 展开 |
|
||||||
|
| 4 | 切换模型下拉 → 立即生效；ChatHeader 模型 select 与后端 `listLlmModels` 一致 |
|
||||||
|
| 5 | 点击垃圾桶 icon → 触发 `handleClear`，WebSocket 发送 `clear` 类型消息，会话消息清空 |
|
||||||
|
| 6 | 搜索框聚焦：边框变为 accent 色，placeholder 颜色变浅；失焦恢复 |
|
||||||
|
| 7 | 会话侧栏分组今天 / 昨天 / 更早 默认全部展开；点击任一分组标题可手动折叠 |
|
||||||
|
| 8 | 浅色主题下所有上述功能保持一致（继承 `--fe-*`） |
|
||||||
|
| 9 | WebSocket 流式消息、自动下拉、Token 轮询等不回归 |
|
||||||
|
| 10 | 不做 git 推送；本地变更未提交 |
|
||||||
|
|
||||||
|
## 风险
|
||||||
|
|
||||||
|
- 删除 `handleTabChange` 时要确认 index.vue 模板上无 `@tab-change="..."` 残留；
|
||||||
|
- 删除 `setActiveTab` expose 方法时确认 index.vue 内无 `chatHeaderRef.value?.setActiveTab(...)` 调用（`handleFilePanelClose` 中有，需要一并删除）；
|
||||||
|
- 移除 `LlmModelModal` 引用可能使该文件成为孤儿；保留即可，无外部影响；
|
||||||
|
- `el-select` 与 `el-button` 共存于 `.header-right` 的 `gap: 8px` 样式需保持视觉留白与上一轮 `8px` 一致。
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 509 KiB After Width: | Height: | Size: 525 KiB |
@@ -1,40 +1,49 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="chat-header">
|
<div class="chat-header">
|
||||||
<div class="header-left">
|
<div class="header-left">
|
||||||
|
<div class="agent-avatar">{{ agentNameInitial }}</div>
|
||||||
<span class="conversation-name">{{ agentName }}</span>
|
<span class="conversation-name">{{ agentName }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-right">
|
<div class="header-right">
|
||||||
<!-- 清空会话 -->
|
<el-tooltip content="清空会话" placement="bottom" :show-after="300">
|
||||||
<el-button @click="emit('clear')">
|
<el-button class="icon-btn icon-btn--danger" link @click="emit('clear')">
|
||||||
清空会话
|
<el-icon><Brush /></el-icon>
|
||||||
</el-button>
|
</el-button>
|
||||||
<!-- 模型选择 -->
|
</el-tooltip>
|
||||||
<el-button @click="showModelModal = true">
|
|
||||||
{{ currentModel?.name || currentModel?.modelName || '选择模型' }}
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
:type="activeTab === 'agent' ? 'primary' : 'default'"
|
|
||||||
@click="handleTabClick('agent')"
|
|
||||||
>
|
|
||||||
智能体
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
:type="activeTab === 'file' ? 'primary' : 'default'"
|
|
||||||
@click="handleTabClick('file')"
|
|
||||||
>
|
|
||||||
文件
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 模型选择弹窗 -->
|
<el-select
|
||||||
<LlmModelModal v-model="showModelModal" @select="handleModelSelect" />
|
class="model-select"
|
||||||
|
:model-value="modelValue"
|
||||||
|
@update:model-value="handleSelectChange"
|
||||||
|
popper-class="frontend-el-select-dropdown"
|
||||||
|
placeholder="选择模型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="opt in modelOptions"
|
||||||
|
:key="opt.value"
|
||||||
|
:label="opt.label"
|
||||||
|
:value="opt.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
|
||||||
|
<el-tooltip
|
||||||
|
:content="filePanelVisible ? '收起文件面板' : '展开文件面板'"
|
||||||
|
placement="bottom"
|
||||||
|
:show-after="300"
|
||||||
|
>
|
||||||
|
<el-button class="icon-btn" link @click="handleToggleClick">
|
||||||
|
<el-icon>
|
||||||
|
<component :is="filePanelVisible ? Fold : Expand" />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { computed } from 'vue'
|
||||||
import { Cpu } from '@element-plus/icons-vue'
|
import { Brush, Fold, Expand } from '@element-plus/icons-vue'
|
||||||
import LlmModelModal from './LlmModelModal.vue'
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
agentName: {
|
agentName: {
|
||||||
@@ -44,26 +53,36 @@ const props = defineProps({
|
|||||||
currentModel: {
|
currentModel: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: null
|
default: null
|
||||||
|
},
|
||||||
|
modelOptions: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
filePanelVisible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const activeTab = ref('agent')
|
const emit = defineEmits(['clear', 'update:modelValue', 'toggle-file-panel'])
|
||||||
const showModelModal = ref(false)
|
|
||||||
|
|
||||||
const emit = defineEmits(['tab-change', 'model-change', 'clear'])
|
const agentNameInitial = computed(() => {
|
||||||
|
const name = (props.agentName || '').trim()
|
||||||
|
if (!name) return '?'
|
||||||
|
// 中文取首字，英文取首字母
|
||||||
|
return [...name][0]
|
||||||
|
})
|
||||||
|
|
||||||
function handleTabClick(tab) {
|
function handleSelectChange(value) {
|
||||||
activeTab.value = tab
|
emit('update:modelValue', value)
|
||||||
emit('tab-change', tab)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
defineExpose({
|
function handleToggleClick() {
|
||||||
setActiveTab: (tab) => {
|
emit('toggle-file-panel')
|
||||||
activeTab.value = tab
|
|
||||||
}
|
|
||||||
})
|
|
||||||
function handleModelSelect(model) {
|
|
||||||
emit('model-change', model)
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -78,8 +97,25 @@ function handleModelSelect(model) {
|
|||||||
color: var(--fe-text-primary);
|
color: var(--fe-text-primary);
|
||||||
|
|
||||||
.header-left {
|
.header-left {
|
||||||
max-width: 400px;
|
display: flex;
|
||||||
overflow: hidden;
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
max-width: 480px;
|
||||||
|
|
||||||
|
.agent-avatar {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--fe-accent);
|
||||||
|
color: var(--fe-text-inverse);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.conversation-name {
|
.conversation-name {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -93,6 +129,43 @@ function handleModelSelect(model) {
|
|||||||
.header-right {
|
.header-right {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.icon-btn {
|
||||||
|
padding: 4px 8px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--fe-text-secondary);
|
||||||
|
height: 32px;
|
||||||
|
width: 32px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: var(--fe-radius-md);
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--fe-bg-hover);
|
||||||
|
color: var(--fe-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
&--danger:hover {
|
||||||
|
color: var(--fe-danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-icon {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-select {
|
||||||
|
width: 180px;
|
||||||
|
:deep(.el-select__wrapper) {
|
||||||
|
background: var(--fe-bg-elevated);
|
||||||
|
box-shadow: 0 0 0 1px var(--fe-border) inset;
|
||||||
|
border-radius: var(--fe-radius-md);
|
||||||
|
}
|
||||||
|
:deep(.el-select__placeholder) { color: var(--fe-text-muted); }
|
||||||
|
:deep(.el-select__selected-item) { color: var(--fe-text-primary); }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -445,7 +445,7 @@ defineExpose({ scrollToBottom, forceScrollToBottom })
|
|||||||
.chat-window {
|
.chat-window {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 16px 20px;
|
padding: 12px 16px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -491,7 +491,7 @@ defineExpose({ scrollToBottom, forceScrollToBottom })
|
|||||||
}
|
}
|
||||||
|
|
||||||
.message-group {
|
.message-group {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
&.user-group {
|
&.user-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -501,7 +501,7 @@ defineExpose({ scrollToBottom, forceScrollToBottom })
|
|||||||
.message-bubble {
|
.message-bubble {
|
||||||
background: var(--fe-bg-elevated);
|
background: var(--fe-bg-elevated);
|
||||||
color: var(--fe-text-primary);
|
color: var(--fe-text-primary);
|
||||||
border-radius: 16px 16px 4px 16px;
|
border-radius: 10px 10px 4px 10px;
|
||||||
box-shadow: var(--fe-shadow-sm);
|
box-shadow: var(--fe-shadow-sm);
|
||||||
max-width: 70%;
|
max-width: 70%;
|
||||||
|
|
||||||
@@ -530,15 +530,16 @@ defineExpose({ scrollToBottom, forceScrollToBottom })
|
|||||||
.message-bubble {
|
.message-bubble {
|
||||||
background: var(--fe-bg-elevated);
|
background: var(--fe-bg-elevated);
|
||||||
color: var(--fe-text-primary);
|
color: var(--fe-text-primary);
|
||||||
border-radius: 16px 16px 16px 4px;
|
border-radius: 10px 10px 10px 4px;
|
||||||
box-shadow: var(--fe-shadow-sm);
|
box-shadow: var(--fe-shadow-sm);
|
||||||
max-width: 70%;
|
max-width: 70%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-bubble {
|
.message-bubble {
|
||||||
padding: 10px 14px;
|
padding: 9px 13px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
.message-text {
|
.message-text {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
@@ -24,12 +24,30 @@
|
|||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="sidebar-search">
|
||||||
|
<el-input
|
||||||
|
v-model="searchKeyword"
|
||||||
|
placeholder="搜索会话"
|
||||||
|
:prefix-icon="Search"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<el-scrollbar class="sidebar-scrollbar">
|
<el-scrollbar class="sidebar-scrollbar">
|
||||||
<div v-if="loading && sessionList.length === 0" class="loading-tip">
|
<div v-if="loading && sessionList.length === 0" class="loading-tip">
|
||||||
加载中...
|
加载中...
|
||||||
</div>
|
</div>
|
||||||
|
<template v-for="group in sessionGroups" :key="group.key">
|
||||||
|
<template v-if="group.items.length > 0">
|
||||||
|
<div class="group-header" @click="toggleGroup(group.key)">
|
||||||
|
<span class="group-title">{{ group.label }}</span>
|
||||||
|
<el-icon class="group-toggle">
|
||||||
|
<ArrowDown v-if="expandedGroups.has(group.key)" />
|
||||||
|
<ArrowRight v-else />
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
<div v-show="expandedGroups.has(group.key)" class="group-items">
|
||||||
<div
|
<div
|
||||||
v-for="session in sessionList"
|
v-for="session in group.items"
|
||||||
:key="session.sessionId"
|
:key="session.sessionId"
|
||||||
class="conversation-item"
|
class="conversation-item"
|
||||||
:class="{ active: currentSession?.sessionId === session.sessionId, 'has-new-message': session.hasNewMessage }"
|
:class="{ active: currentSession?.sessionId === session.sessionId, 'has-new-message': session.hasNewMessage }"
|
||||||
@@ -43,6 +61,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div v-if="session.hasNewMessage" class="new-message-dot"></div>
|
<div v-if="session.hasNewMessage" class="new-message-dot"></div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
|
||||||
<!-- 右键菜单 -->
|
<!-- 右键菜单 -->
|
||||||
<teleport to="body">
|
<teleport to="body">
|
||||||
@@ -67,9 +88,9 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, onUnmounted } from 'vue'
|
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||||
import { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
import { DArrowLeft, DArrowRight, Refresh, Plus, Delete, Loading } from '@element-plus/icons-vue'
|
import { DArrowLeft, DArrowRight, Refresh, Plus, Delete, Loading, Search, ArrowDown, ArrowRight } from '@element-plus/icons-vue'
|
||||||
import { listChatSessions, deleteChatSession, renameChatSession } from '@/api/frontend'
|
import { listChatSessions, deleteChatSession, renameChatSession } from '@/api/frontend'
|
||||||
import { formatTimeAgo } from '@/utils/time'
|
import { formatTimeAgo } from '@/utils/time'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
@@ -82,6 +103,70 @@ const currentSession = ref(null)
|
|||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const emit = defineEmits(['select', 'new-session', 'ready'])
|
const emit = defineEmits(['select', 'new-session', 'ready'])
|
||||||
|
|
||||||
|
// —— 搜索关键字（仅样式占位，本次不绑定行为） ——
|
||||||
|
const searchKeyword = ref('')
|
||||||
|
|
||||||
|
// —— 分组折叠状态：'today' | 'yesterday' | 'earlier' ——
|
||||||
|
const expandedGroups = ref(new Set())
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
function groupOf(session) {
|
||||||
|
const ts = parseTimestamp(session?.updateTime)
|
||||||
|
if (ts == null) {
|
||||||
|
console.warn('[ConversationSidebar] 无法解析会话时间', session)
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
|
||||||
|
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() {
|
||||||
|
// 用户要求默认全部展开；用户可点击分组标题手动收/展
|
||||||
|
expandedGroups.value = new Set(['today', 'yesterday', 'earlier'])
|
||||||
|
}
|
||||||
|
|
||||||
// 响应式：viewport ≤ 900px 收缩，> 900px 展开
|
// 响应式：viewport ≤ 900px 收缩，> 900px 展开
|
||||||
let sidebarMediaQuery = null
|
let sidebarMediaQuery = null
|
||||||
const sidebarBreakpointHandler = (e) => {
|
const sidebarBreakpointHandler = (e) => {
|
||||||
@@ -148,6 +233,7 @@ function toggleSidebar() {
|
|||||||
function selectSession(session) {
|
function selectSession(session) {
|
||||||
currentSession.value = session
|
currentSession.value = session
|
||||||
emit('select', session)
|
emit('select', session)
|
||||||
|
syncExpandedWithCurrent()
|
||||||
}
|
}
|
||||||
|
|
||||||
async function fetchSessions() {
|
async function fetchSessions() {
|
||||||
@@ -169,6 +255,7 @@ async function fetchSessions() {
|
|||||||
const remain = 300 - elapsed
|
const remain = 300 - elapsed
|
||||||
if (remain > 0) await new Promise(resolve => setTimeout(resolve, remain))
|
if (remain > 0) await new Promise(resolve => setTimeout(resolve, remain))
|
||||||
loading.value = false
|
loading.value = false
|
||||||
|
syncExpandedWithCurrent()
|
||||||
emit('ready')
|
emit('ready')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -201,6 +288,7 @@ async function handleDeleteSession(session) {
|
|||||||
currentSession.value = null
|
currentSession.value = null
|
||||||
emit('select', null)
|
emit('select', null)
|
||||||
}
|
}
|
||||||
|
syncExpandedWithCurrent()
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if (error !== 'cancel') {
|
if (error !== 'cancel') {
|
||||||
console.error('删除会话失败:', error)
|
console.error('删除会话失败:', error)
|
||||||
@@ -352,6 +440,50 @@ defineExpose({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
transition: box-shadow 0.15s, background 0.15s;
|
||||||
|
}
|
||||||
|
:deep(.el-input__wrapper.is-focus) {
|
||||||
|
box-shadow: 0 0 0 1px var(--fe-accent) inset;
|
||||||
|
background: var(--fe-bg-elevated);
|
||||||
|
}
|
||||||
|
:deep(.el-input__inner) {
|
||||||
|
color: var(--fe-text-primary);
|
||||||
|
&::placeholder { color: var(--fe-text-muted); }
|
||||||
|
}
|
||||||
|
:deep(.el-input__wrapper.is-focus .el-input__inner::placeholder) {
|
||||||
|
color: var(--fe-text-secondary);
|
||||||
|
}
|
||||||
|
: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; }
|
||||||
|
|
||||||
@keyframes sidebar-rotate {
|
@keyframes sidebar-rotate {
|
||||||
from { transform: rotate(0deg); }
|
from { transform: rotate(0deg); }
|
||||||
to { transform: rotate(360deg); }
|
to { transform: rotate(360deg); }
|
||||||
@@ -378,7 +510,7 @@ defineExpose({
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
border-radius: 8px;
|
border-radius: var(--fe-radius-md);
|
||||||
color: var(--fe-text-primary);
|
color: var(--fe-text-primary);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
|
|||||||
@@ -790,6 +790,13 @@ function handleNodeClick(data) {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
// 浅色主题下 el-scrollbar 滚动区背景设白
|
||||||
|
:deep(.el-scrollbar__wrap) {
|
||||||
|
body[data-fe-theme="light"] & {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.loading-wrapper,
|
.loading-wrapper,
|
||||||
.empty-wrapper {
|
.empty-wrapper {
|
||||||
padding:20px;
|
padding:20px;
|
||||||
|
|||||||
@@ -11,11 +11,13 @@
|
|||||||
<div class="main-content">
|
<div class="main-content">
|
||||||
<!-- 顶部栏 -->
|
<!-- 顶部栏 -->
|
||||||
<ChatHeader
|
<ChatHeader
|
||||||
ref="chatHeaderRef"
|
|
||||||
:agent-name="currentConversation?.agentName || '请选择会话'"
|
:agent-name="currentConversation?.agentName || '请选择会话'"
|
||||||
:current-model="currentModel"
|
:current-model="currentModel"
|
||||||
@tab-change="handleTabChange"
|
:model-options="modelSelectOptions"
|
||||||
@model-change="handleModelChange"
|
:model-value="currentModel?.modelName || currentModel?.name || ''"
|
||||||
|
:file-panel-visible="filePanelVisible"
|
||||||
|
@update:model-value="handleModelSelectChange"
|
||||||
|
@toggle-file-panel="handleToggleFilePanel"
|
||||||
@clear="handleClear"
|
@clear="handleClear"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@@ -183,14 +185,13 @@ const chatWindowRef = ref();
|
|||||||
const inputAreaRef = ref();
|
const inputAreaRef = ref();
|
||||||
const conversationSidebarRef = ref();
|
const conversationSidebarRef = ref();
|
||||||
const editorTextareaRef = ref();
|
const editorTextareaRef = ref();
|
||||||
const chatHeaderRef = ref();
|
|
||||||
|
|
||||||
const currentConversation = ref(null);
|
const currentConversation = ref(null);
|
||||||
const messages = ref([]);
|
const messages = ref([]);
|
||||||
const quotedFiles = ref([]);
|
const quotedFiles = ref([]);
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const switchingConversation = ref(false);
|
const switchingConversation = ref(false);
|
||||||
const filePanelVisible = ref(false);
|
const filePanelVisible = ref(true);
|
||||||
|
|
||||||
// 智能体市场跳转带来的 agentId
|
// 智能体市场跳转带来的 agentId
|
||||||
const agentId = ref(null);
|
const agentId = ref(null);
|
||||||
@@ -206,7 +207,6 @@ const activeWorkspacePath = computed(() => {
|
|||||||
// 模型相关
|
// 模型相关
|
||||||
const currentModel = ref(null);
|
const currentModel = ref(null);
|
||||||
const modelList = ref([]);
|
const modelList = ref([]);
|
||||||
const showModelModal = ref(false);
|
|
||||||
|
|
||||||
// 文件预览相关
|
// 文件预览相关
|
||||||
const previewVisible = ref(false);
|
const previewVisible = ref(false);
|
||||||
@@ -307,6 +307,19 @@ async function loadAgentIfNeeded() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const modelSelectOptions = computed(() => modelList.value.map(m => ({
|
||||||
|
label: m.name || m.modelName || '',
|
||||||
|
value: m.modelName || m.name || ''
|
||||||
|
})))
|
||||||
|
|
||||||
|
function handleModelSelectChange(value) {
|
||||||
|
const found = modelList.value.find(m => (m.modelName || m.name) === value)
|
||||||
|
if (found) {
|
||||||
|
currentModel.value = found
|
||||||
|
ElMessage.success(`已选择模型: ${found.name || found.modelName}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 初始化模型列表
|
// 初始化模型列表
|
||||||
async function initModels() {
|
async function initModels() {
|
||||||
try {
|
try {
|
||||||
@@ -806,24 +819,13 @@ function transformMessages(rawMessages) {
|
|||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleTabChange(tab) {
|
|
||||||
if (tab === "agent") {
|
|
||||||
filePanelVisible.value = false;
|
|
||||||
previewVisible.value = false;
|
|
||||||
} else if (tab === "file") {
|
|
||||||
filePanelVisible.value = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleFilePanelClose() {
|
function handleFilePanelClose() {
|
||||||
filePanelVisible.value = false;
|
filePanelVisible.value = false;
|
||||||
previewVisible.value = false;
|
previewVisible.value = false;
|
||||||
chatHeaderRef.value?.setActiveTab('agent');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleModelChange(model) {
|
function handleToggleFilePanel() {
|
||||||
currentModel.value = model;
|
filePanelVisible.value = !filePanelVisible.value
|
||||||
ElMessage.success(`已选择模型: ${model.name || model.modelName || model.llmName}`);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleClear() {
|
function handleClear() {
|
||||||
|
|||||||
@@ -3,34 +3,34 @@
|
|||||||
// --fe- 前缀保证不会与 admin 主题变量冲突（admin 模块未使用 --fe-*）。
|
// --fe- 前缀保证不会与 admin 主题变量冲突（admin 模块未使用 --fe-*）。
|
||||||
:root {
|
:root {
|
||||||
// —— 基础色 ——
|
// —— 基础色 ——
|
||||||
--fe-bg-base: #1e1e1e;
|
--fe-bg-base: #14171c;
|
||||||
--fe-bg-elevated: #252526;
|
--fe-bg-elevated: #1c1f24;
|
||||||
--fe-bg-overlay: #2d2d30;
|
--fe-bg-overlay: #23272e;
|
||||||
--fe-bg-input: #3c3c3c;
|
--fe-bg-input: #2a2e35;
|
||||||
--fe-bg-hover: #2a2d2e;
|
--fe-bg-hover: #1f2329;
|
||||||
|
|
||||||
// —— 边框 ——
|
// —— 边框 ——
|
||||||
--fe-border: #3c3c3c;
|
--fe-border: #2c3138;
|
||||||
--fe-border-strong: #555555;
|
--fe-border-strong: #4a505a;
|
||||||
|
|
||||||
// —— 文本 ——
|
// —— 文本 ——
|
||||||
--fe-text-primary: #e6e6e6;
|
--fe-text-primary: #e4e6eb;
|
||||||
--fe-text-secondary: #a0a0a0;
|
--fe-text-secondary: #9aa0a6;
|
||||||
--fe-text-muted: #6e6e6e;
|
--fe-text-muted: #6b7280;
|
||||||
--fe-text-inverse: #1e1e1e;
|
--fe-text-inverse: #14171c;
|
||||||
|
|
||||||
// —— 品牌色 ——
|
// —— 品牌色 ——
|
||||||
--fe-accent: #4ec9b0;
|
--fe-accent: #6c8cff;
|
||||||
--fe-accent-hover: #5fd9c0;
|
--fe-accent-hover: #8aa3ff;
|
||||||
--fe-accent-soft: rgba(78, 201, 176, 0.15);
|
--fe-accent-soft: rgba(108, 140, 255, 0.15);
|
||||||
--fe-danger: #f48771;
|
--fe-danger: #f07178;
|
||||||
--fe-danger-soft: rgba(244, 135, 113, 0.1);
|
--fe-danger-soft: rgba(240, 113, 120, 0.1);
|
||||||
--fe-warning: #dcdcaa;
|
--fe-warning: #e0a050;
|
||||||
--fe-info: #569cd6;
|
--fe-info: #6cc4d6;
|
||||||
--fe-info-soft: rgba(86, 156, 214, 0.1);
|
--fe-info-soft: rgba(108, 196, 214, 0.1);
|
||||||
--fe-info-border: rgba(86, 156, 214, 0.4);
|
--fe-info-border: rgba(108, 196, 214, 0.4);
|
||||||
--fe-accent-border: rgba(78, 201, 176, 0.4);
|
--fe-accent-border: rgba(108, 140, 255, 0.4);
|
||||||
--fe-danger-border: rgba(244, 135, 113, 0.4);
|
--fe-danger-border: rgba(240, 113, 120, 0.4);
|
||||||
|
|
||||||
// —— 布局尺寸 ——
|
// —— 布局尺寸 ——
|
||||||
--fe-sidebar-width: 260px;
|
--fe-sidebar-width: 260px;
|
||||||
@@ -41,9 +41,9 @@
|
|||||||
--fe-radius-sm: 4px;
|
--fe-radius-sm: 4px;
|
||||||
--fe-radius-md: 6px;
|
--fe-radius-md: 6px;
|
||||||
--fe-radius-lg: 12px;
|
--fe-radius-lg: 12px;
|
||||||
--fe-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
--fe-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
|
||||||
--fe-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
|
--fe-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
|
||||||
--fe-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5);
|
--fe-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.65);
|
||||||
}
|
}
|
||||||
|
|
||||||
// —— 浅色主题覆盖（通过 body[data-fe-theme="light"] 切换，由 settings.js 同步）——
|
// —— 浅色主题覆盖（通过 body[data-fe-theme="light"] 切换，由 settings.js 同步）——
|
||||||
@@ -215,6 +215,34 @@ body[data-fe-theme="light"] {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// —— ElSelect 下拉面板（Teleport 到 body，需打 popper-class 标记）——
|
||||||
|
// 在 ChatHeader 模型下拉里使用 popper-class="frontend-el-select-dropdown"，
|
||||||
|
// 让弹出的 .el-select-dropdown 继承 frontend 主题。
|
||||||
|
.frontend-el-select-dropdown {
|
||||||
|
--el-bg-color: var(--fe-bg-elevated);
|
||||||
|
--el-bg-color-overlay: var(--fe-bg-overlay);
|
||||||
|
--el-text-color-primary: var(--fe-text-primary);
|
||||||
|
--el-text-color-regular: var(--fe-text-secondary);
|
||||||
|
--el-text-color-secondary: var(--fe-text-muted);
|
||||||
|
--el-text-color-placeholder: var(--fe-text-muted);
|
||||||
|
--el-border-color: var(--fe-border);
|
||||||
|
--el-border-color-light: var(--fe-border);
|
||||||
|
--el-border-color-lighter: var(--fe-border);
|
||||||
|
--el-border-color-extra-light: var(--fe-border);
|
||||||
|
--el-fill-color-blank: var(--fe-bg-elevated);
|
||||||
|
--el-fill-color-light: var(--fe-bg-hover);
|
||||||
|
--el-fill-color-lighter: var(--fe-bg-hover);
|
||||||
|
--el-color-primary: var(--fe-accent);
|
||||||
|
--el-color-primary-light-3: var(--fe-accent-hover);
|
||||||
|
--el-color-primary-light-5: var(--fe-accent-soft);
|
||||||
|
--el-color-primary-light-7: var(--fe-accent-soft);
|
||||||
|
--el-color-primary-light-9: var(--fe-accent-soft);
|
||||||
|
--el-color-danger: var(--fe-danger);
|
||||||
|
|
||||||
|
border: 1px solid var(--fe-border);
|
||||||
|
box-shadow: var(--fe-shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
// —— 全局右键菜单（用于会话列表 / 文件面板等，通过 Teleport 渲染到 body）——
|
// —— 全局右键菜单（用于会话列表 / 文件面板等，通过 Teleport 渲染到 body）——
|
||||||
// --fe-* 变量在 :root 全局可继承，菜单元素样式不受所在 DOM 位置影响。
|
// --fe-* 变量在 :root 全局可继承，菜单元素样式不受所在 DOM 位置影响。
|
||||||
.context-menu {
|
.context-menu {
|
||||||
|
|||||||
Reference in New Issue
Block a user