Merge pull request 'refactor: 优化数据库迁移文件约束和注释' (#211 ) from refatcor/table-structure into main

Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/211
refactor: 优化数据库迁移文件约束和注释
2026-06-23 23:42:40 +08:00 · 2026-06-23 23:41:49 +08:00 · 2026-06-23 22:58:56 +08:00 · 2026-06-23 22:58:02 +08:00 · 2026-06-23 11:11:08 +08:00 · 2026-06-23 11:10:37 +08:00
23 changed files with 1357 additions and 428 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -24,4 +24,7 @@ Thumbs.db
 # ---- Obsidian ----
 .obsidian/
-.claudian/sessions/conv-1781943335504-q62bzosye.meta.json
+.claudian/
 修改过程笔记/
 学习复盘/
 docs/follow-up/
--- a/README.md
+++ b/README.md
@@ -1,181 +1,561 @@
 # CamTalk
-多模态实时 AI 视觉对话助手。用户通过摄像头和麦克风与 AI 交互，AI 理解视觉场景和语音输入后，以文字和语音形式给出自然回应。
+<div align="center">
- **路演视频**：[哔哩哔哩弹幕网——七牛云第四批议题1](https://www.bilibili.com/video/BV1dDJK6cE5S/)
+**多模态实时 AI 视觉对话助手**
 - **线上体验**：http://8.161.227.145:9000
-> ⚠️ **注意**：由于线上地址使用 HTTP 协议，浏览器默认禁止在非 HTTPS 环境下调用摄像头和麦克风。需要按以下步骤配置 Chrome 浏览器：
+用户通过摄像头和麦克风与 AI 交互，AI 理解视觉场景和语音输入后，以文字和语音形式给出自然回应
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Go Version](https://img.shields.io/badge/Go-1.25+-00ADD8?logo=go)](https://go.dev/)
 [![React](https://img.shields.io/badge/React-18-61DAFB?logo=react)](https://react.dev/)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5-3178C6?logo=typescript)](https://www.typescriptlang.org/)
 [路演视频](https://www.bilibili.com/video/BV1dDJK6cE5S/) • [在线体验](http://8.161.227.145:9000) • [文档](docs/README.md)
 </div>
 ---
 > ⚠️ **在线体验提示**：由于演示环境使用 HTTP 协议，需配置 Chrome 允许非 HTTPS 下访问摄像头/麦克风：
 >
-> 1. 在浏览器地址栏中输入 `chrome://flags/#unsafely-treat-insecure-origin-as-secure`，回车
+> 1. 访问 `chrome://flags/#unsafely-treat-insecure-origin-as-secure`
-> 2. 将 **Insecure origins treated as secure** 选项设置为 **Enabled**（已启用）
+> 2. 启用该选项，并在输入框填入 `http://8.161.227.145:9000`
-> 3. 在输入框中输入 `http://8.161.227.145:9000` 地址
+> 3. 点击 **Relaunch** 重启浏览器
 > 4. 点击右下角弹出的 **Relaunch** 按钮，自动重启浏览器
 >
 > 重启后即可在该 HTTP 地址下正常调用摄像头和麦克风。
-![](docs/pictures/1.png)
+![CamTalk 界面截图](docs/pictures/1.png)
-## 架构
+## ✨ 核心特性
-三层系统，前端做轻量预处理，后端做智能编排，云端 AI 服务按需调用：
+- 🎥 **多模态理解**：摄像头视觉 + 麦克风语音双输入，AI 理解完整场景
 - 🗣️ **自然对话**：基于 VAD 的端到端语音交互，低延迟流式响应
 - 🚀 **实时推送**：LLM 文本流 + TTS 音频流并行推送，感知延迟 < 0.5 秒
 - 🎭 **情景模式**：自由对话、面试官、英语老师等多场景支持
 - 💾 **对话历史**：自动保存会话，支持搜索、重命名、删除、时间分组
 - 🔐 **安全认证**：JWT 双 token 轮转 + Refresh Token Rotation 防重放
 - 📊 **三级存储**：Memory → Redis → PostgreSQL 自动降级，保障可靠性
 - 🌐 **国际化**：支持中文、英文、日文界面
 ## 🏗️ 系统架构
 CamTalk 采用**三层架构**：前端轻量预处理 → Go 网关智能编排 → 云端 AI 按需调用
 ```mermaid
 graph TB
-    subgraph client[浏览器客户端]
+    subgraph Browser["🌐 浏览器客户端"]
-        A1[媒体采集]
+        UI["React UI 渲染"]
-        A2[VAD 语音检测]
+        VAD["VAD 语音检测"]
-        A3[关键帧检测]
+        Media["媒体采集"]
        A4[UI 渲染]
    end
-    subgraph gateway[Go 网关 :8080]
+    subgraph Gateway["⚙️ Go 网关 (Eino Graph)"]
-        B1[WebSocket Handler]
+        WS["WebSocket Handler"]
-        B2[Session Manager]
+        Auth["JWT 认证"]
-        B3[AI Orchestrator]
+        Session["会话管理 (三级存储)"]
-        B4[REST API]
+        Orch["AI 编排器 (7节点DAG)"]
        B5[Auth 模块]
        B6[Store 层]
    end
-    subgraph cloud[云端 AI 服务]
+    subgraph AI["☁️ 云端 AI 服务"]
-        C1[STT 语音识别]
+        STT["STT (MiMo/Deepgram)"]
-        C2[LLM 多模态推理]
+        LLM["LLM (qwen3-vl-plus)"]
-        C3[TTS 语音合成]
+        TTS["TTS (MiMo/OpenAI)"]
    end
-    client <-->|WebSocket| gateway
+    Browser <-->|"WebSocket<br/>(JWT + query/config)"| Gateway
-    gateway <-->|HTTP| cloud
+    Orch --> STT
    Orch --> LLM
    Orch --> TTS
 ```
-**关键模式**：LLM 文本流和 TTS 音频流并行推送，用户先看到文字、紧接着听到语音，感知延迟 < 0.5 秒。
+### AI 编排流水线（Eino Graph）
-## 技术栈
+基于 [CloudWeGo Eino](https://github.com/cloudwego/eino) 框架的声明式 7 节点 DAG：
-| 层级 | 技术 |
+```
-|------|------|
+START → STT → History → ChatModel → Msg2Str → Splitter → TTS → Done → END
-| 前端 | React 18, TypeScript, Vite, @ricky0123/vad-web |
+```
 | 后端 | Go, Gin, gorilla/websocket, Viper, Zap |
 | STT | MiMo ASR（默认） / Deepgram |
 | LLM | DashScope qwen3-vl-plus（默认，通过 eino-ext OpenAI ChatModel 接入） |
 | TTS | MiMo TTS（默认） / OpenAI TTS |
-## 项目结构
+**核心优势**：
 - **流式处理**：ChatModel 逐 token 推送，Callback AOP 机制实时转发客户端
 - **句子级 TTS**：Splitter 实时切分句子，TTS 逐句并行合成，无需等待完整回复
 - **类型安全**：Go 泛型 + 编译期检查，Graph 拓扑错误在编译时发现
 ## 🛠️ 技术栈
 <table>
 <tr>
 <td><b>层级</b></td>
 <td><b>技术选型</b></td>
 <td><b>说明</b></td>
 </tr>
 <tr>
 <td><b>前端</b></td>
 <td>React 18 + TypeScript + Vite</td>
 <td>组件化开发，类型安全，快速热更新</td>
 </tr>
 <tr>
 <td><b>VAD</b></td>
 <td>@ricky0123/vad-web (ONNX Runtime)</td>
 <td>浏览器端语音活动检测，零延迟</td>
 </tr>
 <tr>
 <td><b>后端</b></td>
 <td>Go 1.25+ + Gin + gorilla/websocket</td>
 <td>高并发 goroutine，长连接管理</td>
 </tr>
 <tr>
 <td><b>AI 编排</b></td>
 <td>CloudWeGo Eino Graph</td>
 <td>声明式 DAG，Stream 模式，Callback AOP</td>
 </tr>
 <tr>
 <td><b>STT</b></td>
 <td>MiMo ASR（默认）/ Deepgram</td>
 <td>实时语音识别，多语言支持</td>
 </tr>
 <tr>
 <td><b>LLM</b></td>
 <td>DashScope qwen3-vl-plus</td>
 <td>多模态推理（通过 eino-ext OpenAI 接入）</td>
 </tr>
 <tr>
 <td><b>TTS</b></td>
 <td>MiMo TTS（默认）/ OpenAI TTS</td>
 <td>自然语音合成</td>
 </tr>
 <tr>
 <td><b>存储</b></td>
 <td>PostgreSQL 15 + Redis 7</td>
 <td>三级存储架构：Memory → Redis → PG</td>
 </tr>
 <tr>
 <td><b>认证</b></td>
 <td>JWT (HS256) + bcrypt</td>
 <td>双 token 轮转 + Refresh Token Rotation</td>
 </tr>
 <tr>
 <td><b>配置</b></td>
 <td>Viper + godotenv</td>
 <td>YAML + .env + 环境变量覆盖</td>
 </tr>
 <tr>
 <td><b>日志</b></td>
 <td>Zap</td>
 <td>高性能结构化日志 + Trace ID 追踪</td>
 </tr>
 </table>
 ## 📁 项目结构
 ```
 CamTalk/
-├── frontend/                   # 浏览器客户端
+├── frontend/                   # 🌐 浏览器客户端
 │   └── src/
 │       ├── components/         # UI 组件
 │       │   ├── LandingPage/    # 登录着陆页 + LoginModal
 │       │   ├── AuthPage/       # 登录/注册表单
 │       │   ├── CameraManager/  # 摄像头流采集
-│       │   ├── MicManager/     # 麦克风音频采集
+│       │   ├── MicManager/     # 麦克风音频采集 + VAD
-│       │   ├── EdgeProcessor/  # VAD + 关键帧检测
+│       │   ├── WebSocketManager/ # WS 连接生命周期
-│       │   ├── WebSocketManager/ # WS 连接管理
+│       │   ├── ChatPanel/      # 消息展示 + 流式回复
 │       │   ├── ChatPanel/      # 消息展示
 │       │   ├── VideoPreview/   # 摄像头画面预览
 │       │   ├── SessionSidebar/ # 对话历史侧边栏
-│       │   ├── ConfigPanel/    # 配置面板
+│       │   └── ConfigPanel/    # 配置面板（主题/TTS/语言/场景）
 │       │   └── Toast/          # 通知提示
 │       ├── hooks/              # 自定义 Hooks
-│       │   ├── useVisionSession.ts  # 核心会话 Hook
+│       │   ├── useVisionSession.ts  # 核心会话 Hook (~500 行)
 │       │   ├── useSessionList.ts    # 对话列表管理
 │       │   └── useObservationMode.ts # 观察模式
 │       ├── lib/                # 工具库
-│       │   ├── websocket.ts    # WebSocket 连接管理
+│       │   ├── websocket.ts    # WebSocket 单例（心跳/重连/订阅）
-│       │   ├── api.ts          # REST API 客户端
+│       │   ├── api.ts          # REST 客户端（401拦截+刷新）
-│       │   ├── auth.tsx        # 认证上下文（JWT 管理）
+│       │   ├── auth.tsx        # AuthProvider（JWT 自动刷新）
-│       │   ├── audio.ts        # 音频编码
+│       │   ├── ttsPlayer.ts    # TTS 流式播放队列
-│       │   ├── ttsPlayer.ts    # TTS 播放器
+│       │   └── i18n/           # 国际化（zh-CN/en-US/ja-JP）
 │       │   ├── i18n/           # 国际化（zh-CN/en-US/ja-JP）
 │       │   └── sampling.ts     # 采样策略
 │       └── types/              # TypeScript 类型定义
-├── backend/                    # Go 网关
+├── backend/                    # ⚙️ Go 网关
-│   ├── cmd/server/             # 入口
+│   ├── cmd/server/             # 服务入口（main.go）
 │   └── internal/
 │       ├── eino/               # 🔥 Eino Graph 编排层（7节点DAG）
 │       │   ├── graph.go        # Graph 构建与编译
 │       │   ├── adapter.go      # EinoOrchestrator 适配器
 │       │   ├── callback.go     # LLM token 推送回调
 │       │   ├── state.go        # 跨节点状态管理
 │       │   └── nodes_*.go      # STT/History/Splitter/TTS/Done 节点
 │       ├── session/            # 会话管理（TieredManager 三级存储）
 │       ├── store/              # 持久化层（Repository 接口 + PG/内存实现）
 │       │   ├── user_pg.go      # PostgreSQL 实现
 │       │   └── cached_user.go  # Redis 缓存装饰器
 │       ├── auth/               # 认证（JWT/bcrypt/中间件）
 │       ├── ai/                 # AI 服务抽象层
 │       │   ├── llm/            # LLM 提示词与场景
 │       │   ├── stt/            # STT 服务（MiMo/Deepgram）
 │       │   └── tts/            # TTS 服务（MiMo/OpenAI）
 │       ├── eino/               # Eino Graph 编排层（7 节点 DAG）
 │       ├── orchestrator/       # Orchestrator 接口
 │       ├── session/            # 会话管理（三级存储：Memory/Redis/PG）
 │       ├── store/              # 持久化层（Repository 接口 + PG/内存实现）
 │       ├── auth/               # 认证（JWT、bcrypt、中间件）
 │       ├── ws/                 # WebSocket Handler
 │       ├── api/                # REST API（Auth/Conversation）
-│       ├── config/             # 配置管理
+│       ├── config/             # 配置管理（Viper）
-│       ├── models/             # 数据模型
+│       └── logger/             # 日志（Zap + Trace ID）
-│       ├── errors/             # 错误码
+├── migrations/                 # 📊 数据库迁移（嵌入式 SQL）
-│       └── logger/             # 日志
+├── docs/                       # 📚 设计文档
-├── migrations/                 # 数据库迁移（嵌入式 SQL）
+│   ├── 01-架构设计.md
-├── docs/                       # 设计文档
+│   ├── 02-接口文档.md
-└── CLAUDE.md                   # Claude Code 指引
+│   ├── 08-Eino框架与编排设计.md
 │   ├── 10-鉴权体系.md
 │   └── 13-日志追踪.md
 ├── deploy.sh                   # 🐳 部署脚本（Docker Compose）
 ├── docker-compose.yml          # 容器编排配置
 └── CLAUDE.md                   # 🤖 Claude Code 开发指引
 ```
-## 快速开始
+## 🚀 快速开始
 ### 前置条件
- Node.js >= 18
+- **Node.js** >= 18
- Go >= 1.25
+- **Go** >= 1.25
 - **PostgreSQL** >= 15（可选 Docker）
 - **Redis** >= 7（可选，用于缓存加速）
-### 前端
+### 本地开发
 #### 1. 克隆项目
 ```bash
-cd frontend
+git clone https://github.com/yourusername/CamTalk.git
-npm install
+cd CamTalk
 npm run dev          # Vite 开发服务器 http://localhost:5173
 ```
-### 后端
+#### 2. 配置环境变量
 ```bash
 # 复制环境变量模板
 cp backend/.env.example backend/.env
 # 编辑 .env 文件，填入以下必需配置：
 # - CAMTALK_AUTH_JWT_SECRET（使用 openssl rand -hex 32 生成）
 # - CAMTALK_STORAGE_DSN（PostgreSQL 连接字符串）
 # - CAMTALK_AI_LLM_API_KEY（DashScope API Key）
 # - CAMTALK_AI_STT_API_KEY（MiMo/Deepgram API Key）
 # - CAMTALK_AI_TTS_API_KEY（MiMo/OpenAI API Key）
 ```
 #### 3. 启动后端
 ```bash
 cd backend
 # 安装依赖
 go mod download
 go run ./cmd/server  # 启动网关 :8080
 ```
-### 配置
+# 运行数据库迁移（自动创建表）
 go run ./cmd/server migrate
-后端配置文件位于 `backend/config/config.yaml`，支持环境变量覆盖（前缀 `CAMTALK_`）。
+# 启动服务（监听 :8080）
 ```bash
 # 最小启动（需要至少一个 AI 服务的 API Key）
 cd backend
 CAMTALK_AI_LLM_API_KEY=sk-xxx \
 CAMTALK_AI_STT_API_KEY=xxx \
 go run ./cmd/server
 ```
-配置优先级：环境变量 > `config.{env}.yaml` > `config.yaml` > `.env`
+#### 4. 启动前端
-## WebSocket 协议
+```bash
 cd frontend
-连接地址：`ws://localhost:8080/ws`
+# 安装依赖
 npm install
-所有消息为 JSON 文本帧，统一信封格式 `{type, request_id?, timestamp?}`。
+# 启动开发服务器（http://localhost:5173）
 npm run dev
 ```
-**客户端 → 服务端**：`query`、`config`、`interrupt`、`ping`
+#### 5. 访问应用
 **服务端 → 客户端**：`connected`、`stt_result`、`llm_chunk`、`llm_done`、`tts_audio`、`error`、`pong`
-完整协议见 [docs/02-接口文档.md](docs/02-接口文档.md)。
+打开浏览器访问 [http://localhost:5173](http://localhost:5173)，注册账号后即可开始使用。
-## 文档
+#### 6. 代码检查与测试
 ```bash
 # 安装 Go 代码检查工具
 go install github.com/golangci/golangci-lint/cmd/golangci-lint@latest
 # 运行后端代码检查
 cd backend
 golangci-lint run
 # 后端单元测试
 go test ./...
 # 后端集成测试（需要 PostgreSQL）
 go test -tags=integration ./...
 # 前端代码检查
 cd frontend
 npm run lint
 # 前端测试
 npm test
 ```
 ### 远程部署
 #### 方式一：Docker Compose（推荐）
 ```bash
 # 1. 克隆代码到服务器
 git clone https://github.com/yourusername/CamTalk.git
 cd CamTalk
 # 2. 配置环境变量
 cp backend/.env.example backend/.env
 # 编辑 .env 文件，填入生产环境配置
 # 3. 一键部署（frontend + backend + postgres + redis）
 ./deploy.sh up
 # 4. 查看日志
 ./deploy.sh logs
 # 5. 停止服务
 ./deploy.sh down
 ```
 部署完成后访问 [http://localhost:9000](http://localhost:9000)
 #### 方式二：手动部署
 ```bash
 # 1. 构建前端
 cd frontend
 npm install
 npm run build  # 输出到 dist/
 # 2. 构建后端
 cd backend
 go build -o camtalk ./cmd/server
 # 3. 配置 Nginx
 # 参考 nginx.conf.example 配置反向代理
 # 4. 启动服务
 APP_ENV=prod ./camtalk
 # 5. 使用 systemd 管理（可选）
 sudo systemctl enable camtalk
 sudo systemctl start camtalk
 ```
 #### 环境变量检查清单
 部署前确保已配置以下环境变量：
 - ✅ `CAMTALK_AUTH_JWT_SECRET`（使用 `openssl rand -hex 32` 生成）
 - ✅ `CAMTALK_STORAGE_DSN`（PostgreSQL 连接字符串）
 - ✅ `CAMTALK_AI_LLM_API_KEY`（DashScope API Key）
 - ✅ `CAMTALK_AI_STT_API_KEY`（STT 服务 API Key）
 - ✅ `CAMTALK_AI_TTS_API_KEY`（TTS 服务 API Key）
 - ✅ `APP_ENV=prod`（启用生产环境配置）
 ### 配置优先级
 ```
 环境变量 > config.{APP_ENV}.yaml > config.yaml > .env
 ```
 通过 `APP_ENV=prod` 切换生产环境配置（启用限流 + 严格 CORS）
 ## 📡 WebSocket 协议
 连接地址：`ws://localhost:8080/ws?token=<jwt>&conversation_id=<uuid>`
 所有消息为 JSON 文本帧，统一信封格式：
 ```typescript
 interface BaseMessage {
  type: string;
  request_id?: string;
  timestamp?: number;
 }
 ```
 ### 客户端 → 服务端
 | 消息类型 | 说明 | 示例 |
 |---------|------|------|
 | `query` | 发送视觉+语音查询 | `{type: "query", image: "base64...", audio: "base64..."}` |
 | `config` | 更新会话配置 | `{type: "config", scenario: "interviewer", language: "en"}` |
 | `interrupt` | 中断当前响应 | `{type: "interrupt", request_id: "xxx"}` |
 | `ping` | 心跳保活 | `{type: "ping"}` |
 ### 服务端 → 客户端
 | 消息类型 | 说明 | 触发时机 |
 |---------|------|---------|
 | `connected` | 连接成功 | WebSocket 握手后 |
 | `stt_result` | STT 识别结果 | STT 节点完成 |
 | `llm_chunk` | LLM 文本增量 | ChatModel 逐 token（Callback） |
 | `llm_done` | LLM 推理完成 | Done 节点执行 |
 | `tts_audio` | TTS 音频片段 | TTS 节点逐句合成 |
 | `error` | 错误通知 | 任意节点失败 |
 | `pong` | 心跳响应 | 响应 `ping` |
 **心跳机制**：
 - 客户端每 30 秒发送 `ping`
 - 服务端 60 秒无消息自动断连
 - 断连后自动重连（指数退避 1s → 30s）
 完整协议定义见 [docs/02-接口文档.md](docs/02-接口文档.md)
 ## 🔐 认证体系
 CamTalk 采用 **JWT 双 token 轮转 + Refresh Token Rotation** 安全机制：
 ### 双 Token 设计
 | Token | 有效期 | 存储位置 | 用途 |
 |-------|-------|---------|------|
 | `access_token` | 120 分钟 | 前端内存（推荐）/ localStorage | 访问受保护资源 |
 | `refresh_token` | 7 天 | httpOnly Cookie（推荐）/ localStorage | 刷新 access_token |
 ### Refresh Token Rotation
 每次刷新 token 时：
 1. 验证 `refresh_token` 签名和有效期
 2. 查询数据库中的 SHA256 哈希
 3. **如果哈希不存在** → 检测到 token 复用 → **吊销该用户所有 token**
 4. 删除旧 refresh_token，生成新 token pair
 5. 返回新 access_token + refresh_token
 **防重放攻击**：旧 refresh_token 立即失效，复用时触发全局吊销，强制所有设备重新登录。
 ### REST API 端点
 - `POST /api/auth/register` — 用户注册
 - `POST /api/auth/login` — 用户登录
 - `POST /api/auth/refresh` — 刷新 token
 - `POST /api/auth/logout` — 登出（需认证）
 - `GET /api/conversations` — 获取对话列表（需认证）
 - `POST /api/conversations` — 创建对话（需认证）
 - `GET /api/health` — 健康检查
 详细设计见 [docs/10-鉴权体系.md](docs/10-鉴权体系.md)
 ## 💾 三级存储架构
 **TieredManager** 实现会话状态的三级存储，平衡性能与可靠性：
 ```
 ┌─────────────┐
 │  L1 Memory  │ ← 微秒级读写，进程内缓存
 ├─────────────┤
 │  L2 Redis   │ ← 毫秒级访问，跨实例共享
 ├─────────────┤
 │ L3 PostgreSQL│ ← 持久化存储，数据可靠性
 └─────────────┘
 ```
 **特性**：
 - ✅ **自动降级**：Redis 故障时自动切换到 Memory + PostgreSQL 模式
 - ✅ **灵活配置**：支持单级（Memory）、双级（Memory + PG）、完整三级
 - ✅ **TTL 管理**：会话默认 30 分钟过期，自动清理
 - ✅ **写穿透**：数据先写 L1，异步同步到 L2/L3
 ## 📊 数据库设计
 系统使用 PostgreSQL 存储持久化数据：
 ### 核心表
 | 表名 | 说明 | 关键字段 |
 |------|------|---------|
 | `users` | 用户账户 | `id (UUID)`, `username (UNIQUE)`, `password_hash (bcrypt)` |
 | `sessions` | 对话会话 | `id (UUID)`, `user_id (FK)`, `title`, `config (JSONB)` |
 | `messages` | 消息记录 | `id (BIGSERIAL)`, `session_id (FK)`, `role`, `content`, `tokens_used` |
 | `refresh_tokens` | 刷新令牌 | `token_hash (PK, SHA256)`, `user_id (FK)`, `expires_at` |
 **关系**：`users 1:N sessions 1:N messages`，`users 1:N refresh_tokens`
 **迁移管理**：使用嵌入式 SQL 文件（`backend/migrations/`），应用启动时自动执行。
 ## 🛡️ 安全特性
 - 🔒 **密码安全**：bcrypt (cost=10) 哈希，自动生成盐值
 - 🔑 **Token 安全**：JWT HS256 签名，refresh_token SHA256 哈希存储
 - 🚫 **防重放攻击**：Refresh Token Rotation + 复用检测自动吊销
 - 🌐 **传输安全**：生产环境强制 HTTPS，开发环境 Vite proxy 同源代理
 - 🚦 **限流保护**：令牌桶算法（生产环境启用），防暴力破解
 - 🔍 **日志追踪**：全链路 Trace ID，请求/响应/错误统一记录
 ## 🌍 部署架构
 ```
 ┌─────────────┐
 │   Nginx     │ ← 反向代理（静态资源 + API + WebSocket）
 └──────┬──────┘
       │
 ┌──────┴───────────────────┐
 │  Go Gateway 集群          │
 │  ├─ Gateway-1            │
 │  ├─ Gateway-2            │
 │  └─ Gateway-N            │
 └───┬────────────┬─────────┘
    │            │
 ┌───┴────┐  ┌───┴────────┐
 │ Redis  │  │ PostgreSQL │
 └────────┘  └────────────┘
    │
 ┌───┴────────────────────┐
 │  外部 AI 服务           │
 │  ├─ DashScope (LLM)   │
 │  ├─ MiMo (STT/TTS)    │
 │  └─ Deepgram (可选)    │
 └───────────────────────┘
 ```
 **跨域策略**：Nginx 统一反代前后端到同一域名，无跨域问题。
 **水平扩展**：Gateway 无状态设计，会话状态存储在 Redis/PostgreSQL，支持多实例部署。
 ## 📖 文档
 ### 核心设计文档
 | 文档 | 内容 |
 |------|------|
 | [01-架构设计](docs/01-架构设计.md) | 三层架构、技术栈、数据库设计、部署方案 |
 | [02-接口文档](docs/02-接口文档.md) | WebSocket 协议、REST API、AI 服务层、编排器、配置管理 |
 | [08-Eino框架与编排设计](docs/08-Eino框架与编排设计.md) | Eino Graph 7 节点 DAG、节点实现、流式处理、Callback AOP |
 | [10-鉴权体系](docs/10-鉴权体系.md) | JWT 双 token 轮转、Refresh Token Rotation、密码安全、中间件 |
 | [11-令牌桶限流](docs/11-令牌桶限流.md) | 限流算法、配置策略、生产环境保护 |
 | [13-日志追踪](docs/13-日志追踪.md) | Zap 日志、Trace ID 全链路追踪、日志级别 |
 ### 功能文档
 | 文档 | 内容 |
 |------|------|
 | [03-技术选型](docs/03-技术选型.md) | AI 服务栈、持久化层、前端边缘处理选型 |
 | [04-用户故事](docs/04-用户故事.md) | 用户场景与优先级 |
 | [05-语音交互](docs/05-语音交互.md) | VAD → STT → LLM → TTS 全链路 |
 | [06-视觉理解](docs/06-视觉理解.md) | 帧采样、关键帧检测、多模态输入 |
 | [07-成本控制](docs/07-成本控制.md) | 采样策略、端云协同、模型分级 |
-| [08-功能创意](docs/08-功能创意.md) | 功能创意与规划 |
+| [09-情景切换](docs/09-情景切换.md) | 情景模式设计与实现 |
-| [对话历史技术设计](docs/conversation-history-technical-design.md) | 对话历史功能的前端技术方案 |
+| [12-自定义情景](docs/12-自定义情景.md) | 用户自定义情景功能（规划中） |
 ## License
-[MIT](LICENSE) © XEngineers
+## 🐛 问题反馈
 遇到问题？请提交 [Issue](https://github.com/yourusername/CamTalk/issues)，并提供以下信息：
 - 操作系统版本
 - Go / Node.js 版本
 - 错误日志（后端日志 + 浏览器控制台）
 - 复现步骤
 ## 📝 版权声明
 MIT License © 2024 XEngineers
 ---
 <div align="center">
 **Built with ❤️ using Go, React, and AI**
 [⬆️ 回到顶部](#camtalk)
 </div>
--- a/backend/go.mod
+++ b/backend/go.mod
@@ -12,6 +12,7 @@ require (
 	github.com/gorilla/websocket v1.5.3
 	github.com/jackc/pgx/v5 v5.10.0
 	github.com/joho/godotenv v1.5.1
 	github.com/oklog/ulid/v2 v2.1.1
 	github.com/redis/go-redis/v9 v9.20.1
 	github.com/spf13/viper v1.21.0
 	github.com/stretchr/testify v1.11.1
@@ -53,7 +54,6 @@ require (
 	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
 	github.com/modern-go/reflect2 v1.0.2 // indirect
 	github.com/nikolalohinski/gonja v1.5.3 // indirect
 	github.com/oklog/ulid/v2 v2.1.1 // indirect
 	github.com/pelletier/go-toml/v2 v2.2.4 // indirect
 	github.com/pkg/errors v0.9.1 // indirect
 	github.com/pmezard/go-difflib v1.0.0 // indirect
--- a/backend/internal/api/auth.go
+++ b/backend/internal/api/auth.go
@@ -208,8 +208,8 @@ func (h *AuthHandler) Logout(c *gin.Context) {
 // validateCredentials 校验用户名和密码格式。
 // 返回空字符串表示校验通过，否则返回错误描述。
 func validateCredentials(username, password string) string {
-	if len(username) < 3 || len(username) > 64 {
+	if len(username) > 64 {
-		return "username must be 3-64 characters"
+		return "username must not exceed 64 characters"
 	}
 	if len(password) < 8 || len(password) > 72 {
 		return "password must be 8-72 characters"
--- a/backend/internal/api/conversation.go
+++ b/backend/internal/api/conversation.go
@@ -273,6 +273,9 @@ func (h *ConversationHandler) GetMessages(c *gin.Context) {
 			return
 		}
 		count, _ := h.msgRepo.GetMessageCount(c.Request.Context(), sessionID)
 		if messages == nil {
 			messages = []store.StoredMessage{}
 		}
 		c.JSON(http.StatusOK, gin.H{
 			"messages": messages,
 			"total":    count,
@@ -314,6 +317,9 @@ func (h *ConversationHandler) GetMessages(c *gin.Context) {
 	}
 	messages := allMessages[start:]
 	if messages == nil {
 		messages = []models.Message{}
 	}
 	c.JSON(http.StatusOK, gin.H{
 		"messages": messages,
 		"total":    total,
--- a/backend/internal/store/message_pg.go
+++ b/backend/internal/store/message_pg.go
@@ -90,7 +90,7 @@ func (r *PgMessageRepository) queryMessages(ctx context.Context, query string, a
 	}
 	defer pgxRows.Close()
-	var messages []StoredMessage
+	messages := make([]StoredMessage, 0)
 	for pgxRows.Next() {
 		var m StoredMessage
 		if err := pgxRows.Scan(&m.ID, &m.SessionID, &m.Role, &m.Content, &m.TokensUsed, &m.CreatedAt); err != nil {
--- a/backend/migrations/001_users.up.sql
+++ b/backend/migrations/001_users.up.sql
@@ -10,6 +10,14 @@ CREATE TABLE IF NOT EXISTS users (
 -- 用户名索引（用于登录查询）
 CREATE INDEX IF NOT EXISTS idx_users_username ON users(username);
 -- 表和列注释
 COMMENT ON TABLE users IS '用户表，存储系统所有注册用户的基本信息';
 COMMENT ON COLUMN users.id IS '用户唯一标识符 (UUID)';
 COMMENT ON COLUMN users.username IS '用户名，最大 64 字符，全局唯一';
 COMMENT ON COLUMN users.password_hash IS '密码哈希值，使用 bcrypt 算法（cost=10）';
 COMMENT ON COLUMN users.created_at IS '用户注册时间';
 COMMENT ON COLUMN users.updated_at IS '用户信息最后更新时间';
 -- Refresh Token 表
 CREATE TABLE IF NOT EXISTS refresh_tokens (
    id         UUID PRIMARY KEY DEFAULT gen_random_uuid(),
@@ -24,3 +32,11 @@ CREATE INDEX IF NOT EXISTS idx_refresh_tokens_token_hash ON refresh_tokens(token
 -- 用户 ID 索引（用于登出所有设备）
 CREATE INDEX IF NOT EXISTS idx_refresh_tokens_user_id ON refresh_tokens(user_id);
 -- 表和列注释
 COMMENT ON TABLE refresh_tokens IS 'Refresh Token 表，用于 JWT 双 token 机制的长期身份验证';
 COMMENT ON COLUMN refresh_tokens.id IS 'Token 唯一标识符 (UUID)';
 COMMENT ON COLUMN refresh_tokens.user_id IS '所属用户 ID，外键关联 users 表，用户删除时级联删除';
 COMMENT ON COLUMN refresh_tokens.token_hash IS 'Token 哈希值，使用 SHA-256 算法，十六进制编码 (64 字符)';
 COMMENT ON COLUMN refresh_tokens.expires_at IS 'Token 过期时间，默认有效期 7 天';
 COMMENT ON COLUMN refresh_tokens.created_at IS 'Token 创建时间';
--- a/backend/migrations/002_messages.up.sql
+++ b/backend/migrations/002_messages.up.sql
@@ -2,10 +2,12 @@
 CREATE TABLE IF NOT EXISTS messages (
    id          BIGSERIAL PRIMARY KEY,
    session_id  UUID NOT NULL,
-    role        VARCHAR(16) NOT NULL,  -- "user" | "assistant" | "system"
+    role        VARCHAR(10) NOT NULL,
    content     TEXT NOT NULL,
    tokens_used INTEGER NOT NULL DEFAULT 0,
-    created_at  TIMESTAMPTZ NOT NULL DEFAULT NOW()
+    created_at  TIMESTAMPTZ NOT NULL DEFAULT NOW(),
    CONSTRAINT check_tokens_non_negative CHECK (tokens_used >= 0)
 );
 -- 按会话查询消息（分页核心索引）
@@ -15,3 +17,12 @@ CREATE INDEX IF NOT EXISTS idx_messages_session_id_created_at
 -- 按会话查询最后一条消息
 CREATE INDEX IF NOT EXISTS idx_messages_session_id_id_desc
    ON messages(session_id, id DESC);
 -- 表和列注释
 COMMENT ON TABLE messages IS '消息表，存储所有会话的消息记录';
 COMMENT ON COLUMN messages.id IS '消息唯一标识符，自增序列';
 COMMENT ON COLUMN messages.session_id IS '所属会话 ID，关联 sessions 表';
 COMMENT ON COLUMN messages.role IS '消息角色，可选值: ''user'' (用户), ''assistant'' (AI 助手), ''system'' (系统)';
 COMMENT ON COLUMN messages.content IS '消息内容，无长度限制';
 COMMENT ON COLUMN messages.tokens_used IS '消息消耗的 token 数量，用于计费统计';
 COMMENT ON COLUMN messages.created_at IS '消息创建时间';
--- a/backend/migrations/003_sessions.up.sql
+++ b/backend/migrations/003_sessions.up.sql
@@ -1,11 +1,22 @@
 CREATE TABLE IF NOT EXISTS sessions (
    id           UUID PRIMARY KEY,
    user_id      UUID NOT NULL,
-    title        VARCHAR(256) NOT NULL DEFAULT '新对话',
+    title        VARCHAR(100) NOT NULL DEFAULT '新对话',
    config       JSONB NOT NULL DEFAULT '{}',
    created_at   TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-    updated_at   TIMESTAMPTZ NOT NULL DEFAULT NOW()
+    updated_at   TIMESTAMPTZ NOT NULL DEFAULT NOW(),
    CONSTRAINT check_title_length CHECK (char_length(title) >= 1 AND char_length(title) <= 100)
 );
 CREATE INDEX IF NOT EXISTS idx_sessions_user_id ON sessions (user_id);
 CREATE INDEX IF NOT EXISTS idx_sessions_user_updated ON sessions (user_id, updated_at DESC);
 -- 表和列注释
 COMMENT ON TABLE sessions IS '会话表，存储用户的对话会话信息';
 COMMENT ON COLUMN sessions.id IS '会话唯一标识符 (UUID)';
 COMMENT ON COLUMN sessions.user_id IS '所属用户 ID，关联 users 表';
 COMMENT ON COLUMN sessions.title IS '会话标题，默认为"新对话"，长度 1-100 字符';
 COMMENT ON COLUMN sessions.config IS '会话配置 (JSONB)，包含: tts_enabled (布尔), detail_level (''low''/''high''), language (语言代码), scenario (情景 ID)';
 COMMENT ON COLUMN sessions.created_at IS '会话创建时间';
 COMMENT ON COLUMN sessions.updated_at IS '会话最后更新时间';
--- a/backend/migrations/004_user_scenarios.up.sql
+++ b/backend/migrations/004_user_scenarios.up.sql
@@ -5,18 +5,19 @@ CREATE TABLE user_scenarios (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    name VARCHAR(50) NOT NULL,
-    icon VARCHAR(10) DEFAULT '✨',
+    icon VARCHAR(20) DEFAULT '✨',
-    description VARCHAR(100) NOT NULL,
+    description VARCHAR(100),
    prompt TEXT NOT NULL,
-    greeting VARCHAR(200),
+    greeting VARCHAR(500),
    language VARCHAR(10) DEFAULT 'zh-CN',
    created_at TIMESTAMP NOT NULL DEFAULT NOW(),
    updated_at TIMESTAMP NOT NULL DEFAULT NOW(),
    CONSTRAINT unique_user_scenario UNIQUE(user_id, name),
    CONSTRAINT check_name_length CHECK (char_length(name) >= 2 AND char_length(name) <= 50),
-    CONSTRAINT check_description_length CHECK (char_length(description) >= 5 AND char_length(description) <= 100),
+    CONSTRAINT check_description_length CHECK (description IS NULL OR char_length(description) <= 100),
-    CONSTRAINT check_prompt_length CHECK (char_length(prompt) >= 50 AND char_length(prompt) <= 2000)
+    CONSTRAINT check_prompt_length CHECK (char_length(prompt) >= 10),
    CONSTRAINT check_greeting_length CHECK (greeting IS NULL OR char_length(greeting) <= 500)
 );
 -- 为用户 ID 创建索引，加速查询
@@ -25,12 +26,15 @@ CREATE INDEX idx_user_scenarios_user_id ON user_scenarios(user_id);
 -- 为创建时间创建索引，用于排序
 CREATE INDEX idx_user_scenarios_created_at ON user_scenarios(created_at DESC);
-COMMENT ON TABLE user_scenarios IS '用户自建情景表';
+-- 表和列注释
-COMMENT ON COLUMN user_scenarios.id IS '情景唯一标识';
+COMMENT ON TABLE user_scenarios IS '用户自建情景表，存储用户创建的 AI 对话情景配置';
-COMMENT ON COLUMN user_scenarios.user_id IS '所属用户 ID，外键关联 users 表';
+COMMENT ON COLUMN user_scenarios.id IS '情景唯一标识符 (UUID)';
-COMMENT ON COLUMN user_scenarios.name IS '情景名称，如"创意写作导师"';
+COMMENT ON COLUMN user_scenarios.user_id IS '所属用户 ID，外键关联 users 表，用户删除时级联删除';
-COMMENT ON COLUMN user_scenarios.icon IS 'Emoji 图标，如"🎨"';
+COMMENT ON COLUMN user_scenarios.name IS '情景名称 (2-50 字符)，如"创意写作导师"';
-COMMENT ON COLUMN user_scenarios.description IS '简短描述，显示在情景卡片上';
+COMMENT ON COLUMN user_scenarios.icon IS 'Emoji 图标 (最多 20 字符)，支持复合 Emoji，如"🎨"';
-COMMENT ON COLUMN user_scenarios.prompt IS '角色 System Prompt，定义 AI 行为';
+COMMENT ON COLUMN user_scenarios.description IS '简短描述 (最多 100 字符)，可选，显示在情景卡片上';
-COMMENT ON COLUMN user_scenarios.greeting IS '首句引导，可选';
+COMMENT ON COLUMN user_scenarios.prompt IS '角色 System Prompt (最少 10 字符，无上限)，定义 AI 行为和对话风格';
-COMMENT ON COLUMN user_scenarios.language IS '默认语言，如 zh-CN、en-US';
+COMMENT ON COLUMN user_scenarios.greeting IS '首句引导 (最多 500 字符)，可选，AI 的开场白';
 COMMENT ON COLUMN user_scenarios.language IS '默认语言代码 (如 zh-CN、en-US、ja-JP)';
 COMMENT ON COLUMN user_scenarios.created_at IS '情景创建时间';
 COMMENT ON COLUMN user_scenarios.updated_at IS '情景最后更新时间';
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -217,7 +217,15 @@ body {
  background: rgba(10, 10, 15, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
-  animation: fadeIn 0.2s ease;
+  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
 }
 .sidebar-backdrop--visible {
  opacity: 1;
  pointer-events: auto;
 }
 .sidebar {
@@ -232,17 +240,21 @@ body {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  overflow: hidden;
  animation: slideInLeft 0.3s var(--transition-smooth);
  box-shadow: 8px 0 40px rgba(10, 10, 15, 0.4);
-}
+  transition: transform 0.2s ease-out, visibility 0s linear 0.2s;
@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
 }
 .sidebar--collapsed {
-  display: none;
+  transform: translateX(-100%);
  pointer-events: none;
  visibility: hidden;
 }
 .sidebar--open {
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
  transition: transform 0.2s ease-out, visibility 0s linear 0s;
 }
 .sidebar__header {
@@ -495,7 +507,10 @@ body {
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
-  gap: 10px;
+  gap: 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
 }
 .video-container {
@@ -652,7 +667,7 @@ body {
  flex-direction: column;
  align-items: center;
  gap: 10px;
-  padding: 8px 0;
+  padding: 10px 0 4px;
 }
 .video-controls__row {
@@ -900,6 +915,8 @@ body {
  gap: 10px;
  padding: 6px 0;
  background: transparent;
  max-width: 100%;
  align-self: center;
 }
 .chat-message--system::before,
@@ -1074,7 +1091,15 @@ body {
  background: rgba(10, 10, 15, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
-  animation: fadeIn 0.25s var(--transition-smooth);
+  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
 }
 .drawer-overlay--visible {
  opacity: 1;
  pointer-events: auto;
 }
 .drawer {
@@ -1087,8 +1112,18 @@ body {
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.35s var(--transition-smooth);
  box-shadow: -8px 0 40px rgba(10, 10, 15, 0.5);
  transition: transform 0.2s ease-out;
 }
 .drawer--collapsed {
  transform: translateX(100%);
  pointer-events: none;
 }
 .drawer--open {
  transform: translateX(0);
  pointer-events: auto;
 }
 .drawer__header {
@@ -1359,9 +1394,9 @@ body {
  to { opacity: 1; }
 }
-@keyframes slideInRight {
+@keyframes slideUp {
-  from { transform: translateX(100%); }
+  from { opacity: 0; transform: translateY(20px); }
-  to { transform: translateX(0); }
+  to { opacity: 1; transform: translateY(0); }
 }
 /* ---- Scrollbar ---- */
@@ -1387,11 +1422,258 @@ body {
 .video-controls__toolbar {
  display: flex;
-  gap: 6px;
+  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
 }
 /* ---- Round Control Buttons (Camera / Mic) ---- */
 .btn-ctrl-round {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  position: relative;
 }
 .btn-ctrl-round:hover {
  background: var(--color-surface-3);
  border-color: var(--color-surface-3);
  color: var(--color-text);
  transform: scale(1.06);
 }
 .btn-ctrl-round:active {
  transform: scale(0.95);
 }
 .btn-ctrl-round--on {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.3);
  color: var(--color-success);
 }
 .btn-ctrl-round--on:hover {
  background: rgba(52, 211, 153, 0.18);
  border-color: rgba(52, 211, 153, 0.45);
 }
 .btn-ctrl-round--off {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.2);
  color: var(--color-error);
 }
 .btn-ctrl-round--off:hover {
  background: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.35);
 }
 .btn-ctrl-round--speaking {
  animation: micPulse 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.45);
 }
 /* ---- Pill Control Buttons (Recognize / Interrupt / Stop) ---- */
 .btn-ctrl-pill {
  padding: 8px 16px;
  border-radius: 22px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  white-space: nowrap;
 }
 .btn-ctrl-pill:hover:not(:disabled) {
  background: var(--color-surface-3);
  color: var(--color-text);
  border-color: var(--color-surface-3);
 }
 .btn-ctrl-pill:active:not(:disabled) {
  transform: translateY(1px);
 }
 .btn-ctrl-pill:disabled {
  opacity: 0.5;
  cursor: not-allowed;
 }
 .btn-ctrl-pill--recognize {
  background: rgba(59, 130, 246, 0.1);
  color: var(--color-primary);
  border-color: rgba(59, 130, 246, 0.25);
 }
 .btn-ctrl-pill--recognize:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
 }
 .btn-ctrl-pill--interrupt {
  background: rgba(251, 191, 36, 0.1);
  color: var(--color-warning);
  border-color: rgba(251, 191, 36, 0.25);
 }
 .btn-ctrl-pill--interrupt:hover:not(:disabled) {
  background: rgba(251, 191, 36, 0.2);
  border-color: rgba(251, 191, 36, 0.4);
 }
 .btn-ctrl-pill--stop {
  background: rgba(248, 113, 113, 0.1);
  color: var(--color-error);
  border-color: rgba(248, 113, 113, 0.2);
 }
 .btn-ctrl-pill--stop:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.18);
  border-color: rgba(248, 113, 113, 0.35);
 }
 /* ---- Scenario Chip Strip (horizontal scroll, video panel) ---- */
 .scenario-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
 }
 .scenario-strip__label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  opacity: 0.7;
  padding: 0 2px;
 }
 .scenario-strip__scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  /* Thin scrollbar - visible but unobtrusive */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
 }
 .scenario-strip__scroll::-webkit-scrollbar {
  height: 3px;
 }
 .scenario-strip__scroll::-webkit-scrollbar-track {
  background: transparent;
 }
 .scenario-strip__scroll::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 2px;
 }
 .scenario-strip__scroll:hover::-webkit-scrollbar-thumb {
  background: var(--color-text-muted);
 }
 /* Individual scenario chip */
 .scenario-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1;
 }
 .scenario-chip:hover {
  background: var(--color-surface-3);
  border-color: var(--color-surface-3);
  color: var(--color-text);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(10, 10, 15, 0.12);
 }
 .scenario-chip:active {
  transform: translateY(0);
 }
 /* Active chip */
 .scenario-chip--active {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.35);
  color: var(--color-primary);
 }
 .scenario-chip--active:hover {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.45);
  color: var(--color-primary);
 }
 /* "+" create new scenario chip */
 .scenario-chip--add {
  border-style: dashed;
  opacity: 0.7;
 }
 .scenario-chip--add:hover {
  opacity: 1;
  border-style: solid;
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(59, 130, 246, 0.06);
 }
 .scenario-chip--add .scenario-chip__icon {
  display: inline-flex;
  align-items: center;
 }
 .scenario-chip__icon {
  font-size: 0.9rem;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
 }
 .scenario-chip__name {
  letter-spacing: 0.01em;
 }
 /* ---- Legacy button styles kept for backward compat ---- */
 .btn--recognize {
  background: rgba(59, 130, 246, 0.1);
  color: var(--color-primary);
@@ -1416,35 +1698,40 @@ body {
 /* Device selectors */
 .video-controls__devices {
  display: flex;
-  gap: 12px;
+  gap: 8px;
  justify-content: center;
  width: 100%;
 }
 .device-select-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
 }
 .device-select-label {
-  font-size: 0.65rem;
+  font-size: 0.72rem;
  color: var(--color-text-muted);
-  font-weight: 500;
+  flex-shrink: 0;
-  letter-spacing: 0.01em;
+  display: inline-flex;
  align-items: center;
  justify-content: center;
 }
 .device-select {
-  padding: 5px 10px;
+  flex: 1;
-  font-size: 0.72rem;
+  min-width: 0;
-  border-radius: var(--radius-sm);
+  padding: 5px 8px;
  font-size: 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
-  min-width: 120px;
+  text-overflow: ellipsis;
  text-align: center;
 }
 .device-select:hover {
@@ -1926,7 +2213,7 @@ body {
 }
 /* ============================================================
-   Custom Scenarios Styles
+   Custom Scenarios Styles — 白色商务风格（使用 CSS 变量）
   ============================================================ */
 /* Scenario list */
@@ -1942,16 +2229,16 @@ body {
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--color-surface-2);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
  cursor: pointer;
-  transition: all 0.2s;
+  transition: all var(--transition-fast);
 }
 .scenario-item:hover {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--color-surface-3);
-  border-color: rgba(255, 255, 255, 0.15);
+  border-color: var(--color-surface-3);
 }
 .scenario-item input[type="radio"] {
@@ -1966,12 +2253,12 @@ body {
 .scenario-item__name {
  flex: 1;
  font-size: 14px;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--color-text);
 }
 .scenario-item__desc {
  font-size: 12px;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--color-text-muted);
  margin-top: 2px;
 }
@@ -2004,28 +2291,31 @@ body {
 .scenario-action-btn {
  padding: 4px 8px;
  background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--color-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--color-text-muted);
  cursor: pointer;
-  transition: all 0.2s;
+  transition: all var(--transition-fast);
 }
 .scenario-action-btn:hover {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--color-surface-2);
-  border-color: rgba(255, 255, 255, 0.2);
+  border-color: var(--color-surface-3);
  color: var(--color-text);
 }
 .scenario-action-btn--confirm {
-  background: rgba(248, 113, 113, 0.15);
+  background: rgba(248, 113, 113, 0.1);
-  border-color: rgba(248, 113, 113, 0.3);
+  border-color: rgba(248, 113, 113, 0.2);
  color: var(--color-error);
 }
 .scenario-empty {
  padding: 16px;
  text-align: center;
  font-size: 13px;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--color-text-muted);
  font-style: italic;
 }
@@ -2034,17 +2324,17 @@ body {
  margin-left: auto;
  padding: 4px 12px;
  font-size: 12px;
-  background: rgba(196, 97, 47, 0.15);
+  background: rgba(59, 130, 246, 0.08);
-  border: 1px solid rgba(196, 97, 47, 0.3);
+  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 999px;
-  color: #C4612F;
+  color: var(--color-primary);
  cursor: pointer;
-  transition: all 0.2s;
+  transition: all var(--transition-fast);
 }
 .config-create-btn:hover {
-  background: rgba(196, 97, 47, 0.25);
+  background: rgba(59, 130, 246, 0.16);
-  border-color: rgba(196, 97, 47, 0.5);
+  border-color: rgba(59, 130, 246, 0.4);
 }
 .config-group__title {
@@ -2060,25 +2350,30 @@ body {
  left: 0;
  right: 0;
  bottom: 0;
-  background: rgba(0, 0, 0, 0.7);
+  background: rgba(10, 10, 15, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn 0.2s;
 }
 [data-theme="light"] .modal-overlay {
  background: rgba(0, 0, 0, 0.3);
 }
 .modal {
-  background: #1F2421;
+  background: var(--color-surface);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--color-border);
-  border-radius: 12px;
+  border-radius: var(--radius);
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 16px 48px rgba(10, 10, 15, 0.25);
  animation: slideUp 0.3s;
 }
@@ -2091,20 +2386,21 @@ body {
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  border-bottom: 1px solid var(--color-border);
 }
 .modal__title {
  font-size: 18px;
-  font-weight: 500;
+  font-weight: 600;
-  color: rgba(255, 255, 255, 0.95);
+  color: var(--color-text);
  letter-spacing: -0.01em;
 }
 .modal__close {
  background: transparent;
  border: none;
-  font-size: 24px;
+  font-size: 20px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  width: 32px;
@@ -2112,13 +2408,13 @@ body {
  display: flex;
  align-items: center;
  justify-content: center;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
-  transition: all 0.2s;
+  transition: all var(--transition-fast);
 }
 .modal__close:hover {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--color-surface-2);
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--color-text);
 }
 .modal__body {
@@ -2132,7 +2428,7 @@ body {
  gap: 12px;
  justify-content: flex-end;
  padding-top: 16px;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  border-top: 1px solid var(--color-border);
  margin-top: 8px;
 }
@@ -2147,12 +2443,12 @@ body {
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
-  color: rgba(255, 255, 255, 0.85);
+  color: var(--color-text);
  margin-bottom: 8px;
 }
 .form-required {
-  color: #C4612F;
+  color: var(--color-primary);
 }
 .form-input,
@@ -2160,21 +2456,28 @@ body {
 .form-select {
  width: 100%;
  padding: 10px 12px;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--color-surface-2);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--color-border);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--color-text);
  font-size: 14px;
  font-family: inherit;
-  transition: all 0.2s;
+  transition: all var(--transition-fast);
 }
 .form-input::placeholder,
 .form-textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
 }
 .form-input:focus,
 .form-textarea:focus,
 .form-select:focus {
  outline: none;
-  border-color: rgba(196, 97, 47, 0.5);
+  border-color: var(--color-primary);
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }
 .form-textarea {
@@ -2188,15 +2491,15 @@ body {
  display: block;
  margin-top: 4px;
  font-size: 12px;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--color-text-muted);
 }
 .form-error {
  padding: 12px;
-  background: rgba(248, 113, 113, 0.15);
+  background: rgba(248, 113, 113, 0.08);
-  border: 1px solid rgba(248, 113, 113, 0.3);
+  border: 1px solid rgba(248, 113, 113, 0.2);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
-  color: #f87171;
+  color: var(--color-error);
  font-size: 13px;
  margin-top: 12px;
 }
@@ -2216,129 +2519,112 @@ body {
  align-items: center;
  justify-content: center;
  font-size: 22px;
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--color-surface-2);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
  cursor: pointer;
-  transition: all 0.2s;
+  transition: all var(--transition-fast);
 }
 .icon-picker__item:hover {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--color-surface-3);
-  border-color: rgba(255, 255, 255, 0.2);
+  border-color: var(--color-surface-3);
  transform: scale(1.05);
 }
 .icon-picker__item--active {
-  background: rgba(196, 97, 47, 0.2);
+  background: rgba(59, 130, 246, 0.1);
-  border-color: rgba(196, 97, 47, 0.5);
+  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
 }
 /* Prompt guide */
 .form-guide-btn {
  background: transparent;
  border: none;
-  color: #C4612F;
+  color: var(--color-primary);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
  margin-left: auto;
-  transition: all 0.2s;
+  transition: all var(--transition-fast);
 }
 .form-guide-btn:hover {
-  background: rgba(196, 97, 47, 0.1);
+  background: rgba(59, 130, 246, 0.06);
 }
 .form-guide {
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--color-surface-2);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text);
 }
 .form-guide strong {
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--color-text);
 }
 .form-guide ul {
  margin: 8px 0;
  padding-left: 20px;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--color-text-muted);
 }
 .form-guide__code {
-  background: rgba(0, 0, 0, 0.3);
+  background: var(--color-surface-3);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--color-border);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
  padding: 12px;
  margin-top: 8px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--color-text);
 }
-/* Buttons */
+/* Buttons (modal-scoped overrides — only affect modal context) */
-.btn {
+.modal .btn {
  padding: 10px 20px;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
  font-size: 14px;
-  font-weight: 500;
+  font-weight: 600;
  cursor: pointer;
-  transition: all 0.2s;
+  transition: all var(--transition-fast);
  border: 1px solid transparent;
 }
-.btn:disabled {
+.modal .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
 }
-.btn--primary {
+.modal .btn--primary {
-  background: #C4612F;
+  background: var(--color-primary);
  color: white;
-  border-color: #C4612F;
+  border-color: var(--color-primary);
 }
-.btn--primary:hover:not(:disabled) {
+.modal .btn--primary:hover:not(:disabled) {
-  background: #A94E22;
+  background: var(--color-primary-hover);
-  border-color: #A94E22;
+  border-color: var(--color-primary-hover);
 }
-.btn--secondary {
+.modal .btn--secondary {
-  background: transparent;
+  background: var(--color-surface-2);
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--color-text-muted);
-  border-color: rgba(255, 255, 255, 0.2);
+  border-color: var(--color-border);
 }
-.btn--secondary:hover:not(:disabled) {
+.modal .btn--secondary:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--color-surface-3);
-  border-color: rgba(255, 255, 255, 0.3);
+  border-color: var(--color-surface-3);
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--color-text);
 }
-/* Animations */
+/* Animations — fadeIn & slideUp defined in main animation section above */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
 }
@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
 }
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -19,11 +19,43 @@ import { EditScenarioModal } from "./components/EditScenarioModal";
 import { AuthProvider, useAuth } from "./lib/auth";
 import { loadConfig, loadTheme, saveTheme } from "./lib/storage";
 import { I18nContext, parseLocale, t } from "./lib/i18n";
 import { renderScenarioIconById } from "./lib/scenarioIcons";
 import type { Locale } from "./lib/i18n";
 /** SVG 图标 ID → emoji 映射（用于纯文本场景，如系统消息） */
 const ICON_ID_TO_EMOJI: Record<string, string> = {
  sparkles: "✨", theater: "🎭", palette: "🎨", target: "🎯", film: "🎬",
  "book-open": "📖", book: "📚", edit: "✏️", clipboard: "📋", "map-pin": "📍",
  search: "🔍", lightbulb: "💡", briefcase: "💼", code: "💻", "graduation-cap": "🎓",
  mic: "🎤", music: "🎵", globe: "🌐", heart: "❤️", shield: "🛡️",
  zap: "⚡", coffee: "☕", tool: "🔧", "message-circle": "💬",
 };
 import type { Theme } from "./types";
 import type { UserScenario } from "./lib/api/scenarios";
 import "./App.css";
 // ---- 统一 SVG 图标系统（Feather-style，stroke-based） ----
 const SVG_PROPS = { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" as const, strokeLinejoin: "round" as const };
 /** 系统情景 SVG 图标映射 */
 function scenarioSvgIcon(id: string) {
  switch (id) {
    case "free_chat":
      return (<svg {...SVG_PROPS}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>);
    case "interviewer":
      return (<svg {...SVG_PROPS}><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>);
    case "english_teacher":
      return (<svg {...SVG_PROPS}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>);
    case "debate":
      return (<svg {...SVG_PROPS}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M8 10h8"/><path d="M8 14h4"/></svg>);
    case "interpreter":
      return (<svg {...SVG_PROPS}><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>);
    default:
      return null;
  }
 }
 /** 内部组件，确保在 I18nContext.Provider 内部使用 hooks */
 function AppContent() {
  const { isAuthenticated, isLoading, user, logout, accessToken } = useAuth();
@@ -205,10 +237,14 @@ function AppContent() {
      }
    }
    updateConfig(updates);
-    // 插入系统提示消息
+    // 插入系统提示消息（自建情景的 icon 是 SVG ID，需转为 emoji）
-    const scenarioName = sc
+    const iconText = sc
-      ? `${sc.icon} ${sc.nameKey ? tr(sc.nameKey) : sc.name}`
+      ? (ICON_ID_TO_EMOJI[sc.icon] || sc.icon)
      : "";
    const displayName = sc
      ? (sc.nameKey ? tr(sc.nameKey) : sc.name)
      : scenarioId;
    const scenarioName = iconText ? `${iconText} ${displayName}` : displayName;
    setMessages(prev => [...prev, {
      id: uuidv4(),
      role: "system",
@@ -217,9 +253,6 @@ function AppContent() {
    }]);
  }, [updateConfig, setMessages, tr]);
  // 当前情景对象
  const activeScenario = allScenarios.find((s) => s.id === (config.scenario || "free_chat")) || allScenarios[0];
  // ---- 键盘快捷键 ----
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
@@ -296,34 +329,33 @@ function AppContent() {
        sessions={sessions}
        activeSessionId={activeSessionId}
        open={sidebarOpen}
-        onToggle={() => setSidebarOpen((v) => !v)}
+        onClose={() => setSidebarOpen(false)}
        onNewSession={handleNewSession}
        onSelectSession={handleSelectSession}
        onDeleteSession={handleDeleteSession}
        onRenameSession={renameSession}
      />
-      {showConfig && (
+      <ConfigPanel
-        <ConfigPanel
+        config={config}
-          config={config}
+        theme={theme}
-          theme={theme}
+        username={user?.username}
-          username={user?.username}
+        allScenarios={allScenarios}
-          allScenarios={allScenarios}
+        open={showConfig}
-          onUpdate={updateConfig}
+        onUpdate={updateConfig}
-          onThemeChange={handleThemeChange}
+        onThemeChange={handleThemeChange}
-          onLogout={logout}
+        onLogout={logout}
-          onClose={() => setShowConfig(false)}
+        onClose={() => setShowConfig(false)}
-          onCreateScenario={() => {
+        onCreateScenario={() => {
-            setShowConfig(false);
+          setShowConfig(false);
-            setShowCreateScenario(true);
+          setShowCreateScenario(true);
-          }}
+        }}
-          onEditScenario={(scenario) => {
+        onEditScenario={(scenario) => {
-            setShowConfig(false);
+          setShowConfig(false);
-            setEditingScenario(scenario);
+          setEditingScenario(scenario);
-          }}
+        }}
-          onDeleteScenario={deleteScenario}
+        onDeleteScenario={deleteScenario}
-        />
+      />
      )}
      {/* 创建情景 Modal */}
      {showCreateScenario && (
@@ -378,7 +410,7 @@ function AppContent() {
              <div className="video-indicator video-indicator--audio">{tr("video.playing")}</div>
            )}
            {vadError && (
-              <div className="video-indicator video-indicator--error">⚠️ {vadError}</div>
+              <div className="video-indicator video-indicator--error"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> {vadError}</div>
            )}
            {!isConnected && !stream && (
              <div className="video-placeholder">
@@ -401,6 +433,37 @@ function AppContent() {
            )}
          </div>
          {/* ---- 情景选择芯片条（视频下方） ---- */}
          <div className="scenario-strip">
            <span className="scenario-strip__label">{tr("settings.scenario")}</span>
            <div className="scenario-strip__scroll">
              {allScenarios.map((sc) => (
                <button
                  key={sc.id}
                  className={`scenario-chip ${config.scenario === sc.id ? "scenario-chip--active" : ""}`}
                  onClick={() => handleSelectScenario(sc.id)}
                  title={sc.description ? sc.description : sc.descKey ? tr(sc.descKey) : sc.name}
                >
                  <span className="scenario-chip__icon">
                    {scenarioSvgIcon(sc.id) || renderScenarioIconById(sc.icon, 14) || sc.icon}
                  </span>
                  <span className="scenario-chip__name">{sc.nameKey ? tr(sc.nameKey) : sc.name}</span>
                </button>
              ))}
              {/* 新建情景快捷入口 */}
              <button
                className="scenario-chip scenario-chip--add"
                onClick={() => setShowCreateScenario(true)}
                title={tr("scenario.create.button")}
              >
                <span className="scenario-chip__icon">
                  <svg {...SVG_PROPS}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                </span>
                <span className="scenario-chip__name">{tr("scenario.createChip")}</span>
              </button>
            </div>
          </div>
          {/* 视频下方控制区（三层结构） */}
          <div className="video-controls">
            {!isConnected ? (
@@ -415,40 +478,75 @@ function AppContent() {
                {/* 视频通话态：核心控制工具栏 */}
                <div className="video-controls__toolbar">
                  <button
-                    className={`btn btn--ctrl ${isCameraOn ? "btn--ctrl-on" : "btn--ctrl-off"}`}
+                    className={`btn-ctrl-round ${isCameraOn ? "btn-ctrl-round--on" : "btn-ctrl-round--off"}`}
                    onClick={toggleCamera}
                    title={isCameraOn ? tr("controls.cameraOff") : tr("controls.cameraOn")}
                  >
-                    📷
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      {isCameraOn ? (
                        <>
                          <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
                          <circle cx="12" cy="13" r="4" />
                        </>
                      ) : (
                        <>
                          <path d="M16 16v1a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2m5.66 0H14a2 2 0 0 1 2 2v3.34l1 1L23 7v10" />
                          <line x1="1" y1="1" x2="23" y2="23" />
                        </>
                      )}
                    </svg>
                  </button>
                  <button
-                    className={`btn btn--ctrl ${isMicOn ? "btn--ctrl-on" : "btn--ctrl-off"} ${isSpeaking ? "btn--speaking" : ""}`}
+                    className={`btn-ctrl-round ${isMicOn ? "btn-ctrl-round--on" : "btn-ctrl-round--off"} ${isSpeaking ? "btn-ctrl-round--speaking" : ""}`}
                    onClick={toggleMic}
                    title={isMicOn ? tr("controls.micOff") : tr("controls.micOn")}
                  >
-                    🎤
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      {isMicOn ? (
                        <>
                          <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
                          <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
                          <line x1="12" y1="19" x2="12" y2="23" />
                          <line x1="8" y1="23" x2="16" y2="23" />
                        </>
                      ) : (
                        <>
                          <line x1="1" y1="1" x2="23" y2="23" />
                          <path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6" />
                          <path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2c0 .76-.12 1.49-.34 2.17" />
                          <line x1="12" y1="19" x2="12" y2="23" />
                          <line x1="8" y1="23" x2="16" y2="23" />
                        </>
                      )}
                    </svg>
                  </button>
                  {/* 识别画面按钮 */}
                  <button
-                    className="btn--recognize"
+                    className="btn-ctrl-pill btn-ctrl-pill--recognize"
                    onClick={handleRecognize}
                    disabled={isProcessing}
                  >
-                    🔍 {tr("controls.recognize")}
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <circle cx="11" cy="11" r="8" />
                      <line x1="21" y1="21" x2="16.65" y2="16.65" />
                    </svg>
                    {tr("controls.recognize")}
                  </button>
                  {isProcessing && (
-                    <button className="btn btn--warning" onClick={interrupt}>
+                    <button className="btn-ctrl-pill btn-ctrl-pill--interrupt" onClick={interrupt}>
                      {tr("controls.interrupt")}
                    </button>
                  )}
-                  <button className="btn btn--danger" onClick={stopVideo}>
+                  <button className="btn-ctrl-pill btn-ctrl-pill--stop" onClick={stopVideo}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <rect x="6" y="6" width="12" height="12" rx="2" />
                    </svg>
                    {tr("controls.stopVideo")}
                  </button>
                </div>
                {/* 设备选择器 */}
                <div className="video-controls__devices">
                  <div className="device-select-wrapper">
-                    <label className="device-select-label">📷</label>
+                    <label className="device-select-label"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg></label>
                    <select
                      className="device-select"
                      value={config.cameraDeviceId || "default"}
@@ -461,7 +559,7 @@ function AppContent() {
                    </select>
                  </div>
                  <div className="device-select-wrapper">
-                    <label className="device-select-label">🎤</label>
+                    <label className="device-select-label"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg></label>
                    <select
                      className="device-select"
                      value={config.micDeviceId || "default"}
@@ -480,7 +578,7 @@ function AppContent() {
                {/* 文字对话态：视频已结束 */}
                <div className="video-controls__text-only">
                  <div className="video-ended-hint">
-                    <span className="video-ended-hint__title">📹 {tr("video.ended")}</span>
+                    <span className="video-ended-hint__title"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg> {tr("video.ended")}</span>
                    <span className="video-ended-hint__sub">{tr("video.ended.hint")}</span>
                  </div>
                  <div className="video-controls__toolbar">
@@ -502,18 +600,6 @@ function AppContent() {
          <div className="chat-panel-header">
            <span>{tr("chat.title")}</span>
            <div className="chat-panel-header__right">
              <select
                className="scenario-selector"
                value={activeScenario.id}
                onChange={(e) => handleSelectScenario(e.target.value)}
                title={tr("settings.scenario")}
              >
                {allScenarios.map((sc) => (
                  <option key={sc.id} value={sc.id}>
                    {sc.icon} {sc.nameKey ? tr(sc.nameKey) : sc.name}
                  </option>
                ))}
              </select>
              {isConnected && stats.queryCount > 0 && (
                <span className="chat-panel-header__stats">
                  {stats.queryCount} {tr("statusbar.recognitions")}
@@ -534,6 +620,7 @@ function AppContent() {
              currentReply={currentReply}
              connectionStatus={connectionStatus}
              currentScenario={config.scenario}
              allScenarios={allScenarios}
              isProcessing={isProcessing}
              isVADReady={isVADReady}
              vadError={vadError ?? undefined}
--- a/frontend/src/components/ChatPanel/index.tsx
+++ b/frontend/src/components/ChatPanel/index.tsx
@@ -4,9 +4,10 @@
 // 增强：空状态情景选择卡片、语音输入按钮
 // ============================================================
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 import { useI18n } from "../../lib/i18n";
 import { scenarios } from "../../lib/scenarios";
 import type { ExtendedScenario } from "../../hooks/useScenarios";
 import type { ChatMessage } from "../../types";
 import type { ConnectionStatus } from "../../lib/websocket";
@@ -15,6 +16,7 @@ interface ChatPanelProps {
  currentReply?: string;
  connectionStatus: ConnectionStatus;
  currentScenario?: string;
  allScenarios?: ExtendedScenario[];
  isProcessing?: boolean;
  isVADReady?: boolean;
  vadError?: string | null;
@@ -28,12 +30,13 @@ interface ChatPanelProps {
 }
 /** 场景卡片数据（视觉分析快捷） */
-function getSceneCards(t: (key: string) => string) {
+function getSceneCards(t: (key: string) => string): { icon: ReactNode; titleKey: string; descKey: string; prompt: string }[] {
  const svgProps = { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" as const, strokeLinejoin: "round" as const };
  return [
-    { icon: "👁", titleKey: "scene.describe", descKey: "scene.describe.desc", prompt: t("scene.describe") },
+    { icon: <svg {...svgProps}><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>, titleKey: "scene.describe", descKey: "scene.describe.desc", prompt: t("scene.describe") },
-    { icon: "🔤", titleKey: "scene.text", descKey: "scene.text.desc", prompt: t("scene.text") },
+    { icon: <svg {...svgProps}><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>, titleKey: "scene.text", descKey: "scene.text.desc", prompt: t("scene.text") },
-    { icon: "📦", titleKey: "scene.object", descKey: "scene.object.desc", prompt: t("scene.object") },
+    { icon: <svg {...svgProps}><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>, titleKey: "scene.object", descKey: "scene.object.desc", prompt: t("scene.object") },
-    { icon: "💡", titleKey: "scene.suggest", descKey: "scene.suggest.desc", prompt: t("scene.suggest") },
+    { icon: <svg {...svgProps}><line x1="9" y1="18" x2="15" y2="18"/><line x1="10" y1="22" x2="14" y2="22"/><path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"/></svg>, titleKey: "scene.suggest", descKey: "scene.suggest.desc", prompt: t("scene.suggest") },
  ];
 }
@@ -42,6 +45,7 @@ export function ChatPanel({
  currentReply,
  connectionStatus,
  currentScenario,
  allScenarios,
  isProcessing,
  isVADReady,
  vadError,
@@ -51,7 +55,6 @@ export function ChatPanel({
  onSendText,
  onToggleMic,
  onSceneCard,
  onSelectScenario,
 }: ChatPanelProps) {
  const bottomRef = useRef<HTMLDivElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
@@ -103,6 +106,10 @@ export function ChatPanel({
    }
  };
  // 当前情景对象（优先从 allScenarios 查找，含自建情景；兜底用系统情景）
  const scenarioList = allScenarios || scenarios;
  const activeScenarioObj = scenarioList.find(sc => sc.id === activeScenario);
  return (
    <div className="chat-panel">
      <div className="chat-panel__messages" ref={containerRef}>
@@ -111,44 +118,26 @@ export function ChatPanel({
          <div className="chat-panel__scenario-hint">
            <div className="scenario-hint-card">
              <span className="scenario-hint-card__icon">
-                {scenarios.find(s => s.id === activeScenario)?.icon}
+                {activeScenarioObj?.icon}
              </span>
              <div className="scenario-hint-card__text">
-                <strong>{t(scenarios.find(s => s.id === activeScenario)?.nameKey || "")}</strong>
+                <strong>{activeScenarioObj ? (activeScenarioObj.nameKey ? t(activeScenarioObj.nameKey) : ('name' in activeScenarioObj ? activeScenarioObj.name : '')) : ""}</strong>
-                <p>{t(`scenario.${activeScenario}.hint`)}</p>
+                {activeScenarioObj && (activeScenarioObj.descKey || ('description' in activeScenarioObj && activeScenarioObj.description)) && (
                  <p>{activeScenarioObj.descKey ? t(activeScenarioObj.descKey) : ('description' in activeScenarioObj ? activeScenarioObj.description : '')}</p>
                )}
              </div>
            </div>
          </div>
        )}
-        {/* 空状态：情景选择 + 场景卡片 */}
+        {/* 空状态：欢迎信息 */}
        {isEmpty && (
          <div className="chat-panel__welcome">
-            <span className="chat-panel__welcome-icon">{scenarios.find(s => s.id === activeScenario)?.icon || "💬"}</span>
+            <span className="chat-panel__welcome-icon">{activeScenarioObj?.icon || <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>}</span>
            <p>{isConnected ? t("chat.welcome.prompt") : t("chat.empty.prompt")}</p>
            <span className="chat-panel__welcome-hint">{isConnected ? t("chat.welcome.hint") : t("chat.empty.hint")}</span>
-            {/* 情景选择卡片（非 free_chat 时隐藏，因为已通过 header 切换） */}
+            {/* 视觉分析快捷卡片（仅 free_chat 模式 + 已连接） */}
            {isFreeChat && onSelectScenario && (
              <div className="scenario-cards">
                <div className="scenario-cards__title">{t("scenario.choose")}</div>
                {scenarios.filter(s => s.id !== "free_chat").map((sc) => (
                  <button
                    key={sc.id}
                    className="scenario-card"
                    onClick={() => onSelectScenario(sc.id)}
                  >
                    <span className="scenario-card__icon">{sc.icon}</span>
                    <div className="scenario-card__text">
                      <span className="scenario-card__title">{t(sc.nameKey)}</span>
                      <span className="scenario-card__desc">{t(sc.descKey)}</span>
                    </div>
                  </button>
                ))}
              </div>
            )}
            {/* 视觉分析快捷卡片（仅 free_chat 模式） */}
            {isFreeChat && isConnected && (
              <div className="scene-cards">
                {sceneCards.map((card) => (
@@ -262,7 +251,7 @@ export function ChatPanel({
              onClick={onToggleMic}
              title={t("chat.input.voice")}
            >
-              🎤
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
            </button>
          )}
          <button
@@ -271,7 +260,7 @@ export function ChatPanel({
            disabled={!inputText.trim() || connectionStatus === "connecting"}
            title={t("chat.send")}
          >
-            ➤
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
          </button>
        </form>
      )}
--- a/frontend/src/components/ConfigPanel/index.tsx
+++ b/frontend/src/components/ConfigPanel/index.tsx
@@ -14,6 +14,7 @@ interface ConfigPanelProps {
  theme: Theme;
  username?: string;
  allScenarios: ExtendedScenario[];
  open: boolean;
  onUpdate: (partial: Partial<SessionConfig>) => void;
  onThemeChange: (theme: Theme) => void;
  onLogout?: () => void;
@@ -28,6 +29,7 @@ export function ConfigPanel({
  theme,
  username,
  allScenarios,
  open,
  onUpdate,
  onThemeChange,
  onLogout,
@@ -59,8 +61,14 @@ export function ConfigPanel({
  };
  return (
-    <div className="drawer-overlay" onClick={onClose}>
+    <div
-      <div className="drawer" onClick={(e) => e.stopPropagation()}>
+      className={`drawer-overlay ${open ? 'drawer-overlay--visible' : ''}`}
      onClick={onClose}
    >
      <div
        className={`drawer ${open ? 'drawer--open' : 'drawer--collapsed'}`}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="drawer__header">
          <span className="drawer__title">{t("settings.title")}</span>
          <button className="drawer__close" onClick={onClose}>
@@ -197,7 +205,7 @@ export function ConfigPanel({
                        onClick={() => onEditScenario(sc as unknown as UserScenario)}
                        title={t("common.edit")}
                      >
-                        ✏️
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                      </button>
                      <button
                        className={`scenario-action-btn scenario-action-btn--delete ${
@@ -206,7 +214,7 @@ export function ConfigPanel({
                        onClick={() => handleDelete(sc.id)}
                        title={deleteConfirm === sc.id ? t("common.confirmDelete") : t("common.delete")}
                      >
-                        {deleteConfirm === sc.id ? "✓" : "🗑"}
+                        {deleteConfirm === sc.id ? "✓" : <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>}
                      </button>
                    </div>
                  </div>
--- a/frontend/src/components/CreateScenarioModal/index.tsx
+++ b/frontend/src/components/CreateScenarioModal/index.tsx
@@ -6,24 +6,17 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useI18n } from "../../lib/i18n";
 import type { CreateScenarioRequest } from "../../lib/api/scenarios";
 import { SCENARIO_ICON_SET, DEFAULT_SCENARIO_ICON_ID } from "../../lib/scenarioIcons";
 interface CreateScenarioModalProps {
  onClose: () => void;
  onSubmit: (data: CreateScenarioRequest) => Promise<void>;
 }
 // 预设常用图标
 const PRESET_ICONS = [
  "✨", "🎭", "🎨", "🎯", "🎪", "🎬",
  "📖", "📚", "📝", "📋", "📌", "📍",
  "🔬", "🔭", "🔮", "💡", "💼", "💻",
  "🎓", "🎤", "🎵", "🎸", "🎹", "🎺",
 ];
 export function CreateScenarioModal({ onClose, onSubmit }: CreateScenarioModalProps) {
  const { t } = useI18n();
  const [name, setName] = useState("");
-  const [icon, setIcon] = useState("✨");
+  const [icon, setIcon] = useState(DEFAULT_SCENARIO_ICON_ID);
  const [description, setDescription] = useState("");
  const [prompt, setPrompt] = useState("");
  const [greeting, setGreeting] = useState("");
@@ -134,14 +127,15 @@ export function CreateScenarioModal({ onClose, onSubmit }: CreateScenarioModalPr
          <div className="form-group">
            <label className="form-label">{t("scenario.create.icon")}</label>
            <div className="icon-picker">
-              {PRESET_ICONS.map((ic) => (
+              {SCENARIO_ICON_SET.map((ic) => (
                <button
-                  key={ic}
+                  key={ic.id}
                  type="button"
-                  className={`icon-picker__item ${icon === ic ? "icon-picker__item--active" : ""}`}
+                  className={`icon-picker__item ${icon === ic.id ? "icon-picker__item--active" : ""}`}
-                  onClick={() => setIcon(ic)}
+                  onClick={() => setIcon(ic.id)}
                  title={ic.label}
                >
-                  {ic}
+                  {ic.render(22)}
                </button>
              ))}
            </div>
--- a/frontend/src/components/EditScenarioModal/index.tsx
+++ b/frontend/src/components/EditScenarioModal/index.tsx
@@ -6,6 +6,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useI18n } from "../../lib/i18n";
 import type { UpdateScenarioRequest, UserScenario } from "../../lib/api/scenarios";
 import { SCENARIO_ICON_SET } from "../../lib/scenarioIcons";
 interface EditScenarioModalProps {
  scenario: UserScenario;
@@ -13,14 +14,6 @@ interface EditScenarioModalProps {
  onSubmit: (id: string, data: UpdateScenarioRequest) => Promise<void>;
 }
 // 预设常用图标
 const PRESET_ICONS = [
  "✨", "🎭", "🎨", "🎯", "🎪", "🎬",
  "📖", "📚", "📝", "📋", "📌", "📍",
  "🔬", "🔭", "🔮", "💡", "💼", "💻",
  "🎓", "🎤", "🎵", "🎸", "🎹", "🎺",
 ];
 export function EditScenarioModal({ scenario, onClose, onSubmit }: EditScenarioModalProps) {
  const { t } = useI18n();
  const [name, setName] = useState(scenario.name);
@@ -135,14 +128,27 @@ export function EditScenarioModal({ scenario, onClose, onSubmit }: EditScenarioM
          <div className="form-group">
            <label className="form-label">{t("scenario.create.icon")}</label>
            <div className="icon-picker">
-              {PRESET_ICONS.map((ic) => (
+              {/* 如果当前图标是旧版 emoji（不在 SVG 图标集中），显示为可选项 */}
              {!SCENARIO_ICON_SET.some((ic) => ic.id === icon) && (
                <button
-                  key={ic}
+                  key="__legacy"
                  type="button"
-                  className={`icon-picker__item ${icon === ic ? "icon-picker__item--active" : ""}`}
+                  className={`icon-picker__item icon-picker__item--active`}
-                  onClick={() => setIcon(ic)}
+                  onClick={() => {/* already selected, no-op */}}
                  title="当前图标（旧版）"
                >
-                  {ic}
+                  {icon}
                </button>
              )}
              {SCENARIO_ICON_SET.map((ic) => (
                <button
                  key={ic.id}
                  type="button"
                  className={`icon-picker__item ${icon === ic.id ? "icon-picker__item--active" : ""}`}
                  onClick={() => setIcon(ic.id)}
                  title={ic.label}
                >
                  {ic.render(22)}
                </button>
              ))}
            </div>
--- a/frontend/src/components/LandingPage/index.tsx
+++ b/frontend/src/components/LandingPage/index.tsx
@@ -180,13 +180,13 @@ export function LandingPage() {
          <div className="lp-flow-wrapper lp-fade-in">
            <div className="lp-flow-steps">
              {[
-                { icon: "📷", label: "摄像头采集" },
+                { icon: <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>, label: "摄像头采集" },
-                { icon: "🧠", label: "边缘预处理" },
+                { icon: <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><path d="M12 2a5 5 0 0 1 5 5c0 1.5-.7 2.8-1.7 3.7L12 14l-3.3-3.3A5 5 0 0 1 12 2z"/><path d="M12 14v8"/><path d="M8 18h8"/></svg>, label: "边缘预处理" },
-                { icon: "🔌", label: "WebSocket" },
+                { icon: <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/></svg>, label: "WebSocket" },
-                { icon: "⚡", label: "Eino 编排" },
+                { icon: <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>, label: "Eino 编排" },
-                { icon: "👁️", label: "视觉理解" },
+                { icon: <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>, label: "视觉理解" },
-                { icon: "💬", label: "流式回复" },
+                { icon: <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>, label: "流式回复" },
-                { icon: "🔊", label: "语音输出" },
+                { icon: <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>, label: "语音输出" },
              ].map((step, i, arr) => (
                <div key={i} style={{ display: "contents" }}>
                  <div className="lp-flow-step">
@@ -212,27 +212,27 @@ export function LandingPage() {
          <div className="lp-features-grid">
            {[
              {
-                num: "01", icon: "⚡",
+                num: "01", icon: <svg width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>,
                title: "流式并行推送",
                desc: "LLM 文本流与 TTS 音频流并行输出。用户先看到文字，紧接着听到语音，感知延迟低于 0.5 秒，接近真人对话节奏。",
              },
              {
-                num: "02", icon: "🧠",
+                num: "02", icon: <svg width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><path d="M12 2a5 5 0 0 1 5 5c0 1.5-.7 2.8-1.7 3.7L12 14l-3.3-3.3A5 5 0 0 1 12 2z"/><path d="M12 14v8"/><path d="M8 18h8"/></svg>,
                title: "声明式 AI 编排",
                desc: "基于 CloudWeGo Eino Graph 的 7 节点 DAG 流水线（STT → History → ChatModel → Splitter → TTS），类型安全、可扩展、易测试。",
              },
              {
-                num: "03", icon: "💰",
+                num: "03", icon: <svg width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>,
                title: "端云协同降本",
                desc: "浏览器端 VAD 语音检测 + 关键帧像素比较 + 混合采样策略，节省 70% 带宽，月成本从 $5,000 降至 $300，降幅 90%。",
              },
              {
-                num: "04", icon: "🎯",
+                num: "04", icon: <svg width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>,
                title: "多场景智能模式",
                desc: "5 种 AI 角色（自由对话 / 模拟面试 / 英语老师 / 辩论对手 / 同声翻译）× 3 种视觉模式 × 观察模式，灵活覆盖学习与工作。",
              },
              {
-                num: "05", icon: "🏗️",
+                num: "05", icon: <svg width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12" y2="18"/><line x1="12" y1="6" x2="12" y2="6"/><line x1="4" y1="10" x2="20" y2="10"/><line x1="8" y1="2" x2="8" y2="10"/><line x1="16" y1="10" x2="16" y2="18"/></svg>,
                title: "生产级工程架构",
                desc: "三级存储自动降级（Memory → Redis → PostgreSQL）、JWT 双 token 认证、Docker Compose 一键部署、完善的错误处理与降级策略。",
              },
@@ -259,11 +259,11 @@ export function LandingPage() {
          </div>
          <div className="lp-users-grid">
            {[
-              { avatar: "🧑‍🎓", title: "语言学习者", desc: "对着课本或实物，与 AI 英语外教用英语自由对话，实时纠正语法和发音" },
+              { avatar: <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>, title: "语言学习者", desc: "对着课本或实物，与 AI 英语外教用英语自由对话，实时纠正语法和发音" },
-              { avatar: "💼", title: "面试准备者", desc: "开启模拟面试模式，AI 面试官通过摄像头观察你的表情与状态，给出针对性反馈" },
+              { avatar: <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>, title: "面试准备者", desc: "开启模拟面试模式，AI 面试官通过摄像头观察你的表情与状态，给出针对性反馈" },
-              { avatar: "🌍", title: "跨境交流者", desc: "出国旅行时对着外文菜单、路牌实时翻译，AI 语音播报翻译结果" },
+              { avatar: <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>, title: "跨境交流者", desc: "出国旅行时对着外文菜单、路牌实时翻译，AI 语音播报翻译结果" },
-              { avatar: "👁️", title: "视障人士", desc: "AI 实时描述摄像头画面中的环境、障碍物和文字，提供无障碍信息辅助" },
+              { avatar: <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>, title: "视障人士", desc: "AI 实时描述摄像头画面中的环境、障碍物和文字，提供无障碍信息辅助" },
-              { avatar: "🔬", title: "学生 / 教师", desc: "对着题目问「怎么做？」，AI 看到画面后逐步讲解，就像身边有一位私教" },
+              { avatar: <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>, title: "学生 / 教师", desc: "对着题目问「怎么做？」，AI 看到画面后逐步讲解，就像身边有一位私教" },
            ].map((u) => (
              <div className="lp-user-card lp-fade-in" key={u.title}>
                <div className="lp-user-card__avatar">{u.avatar}</div>
@@ -283,11 +283,11 @@ export function LandingPage() {
          </div>
          <div className="lp-scenes-list">
            {[
-              { icon: "💬", title: "自由对话", desc: "对着摄像头随意聊天，AI 实时理解画面并语音回答", tag: "通用" },
+              { icon: <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>, title: "自由对话", desc: "对着摄像头随意聊天，AI 实时理解画面并语音回答", tag: "通用" },
-              { icon: "🗣️", title: "英语老师", desc: "AI 外教结合摄像头场景进行英语口语教学，实时纠正语法", tag: "学习" },
+              { icon: <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>, title: "英语老师", desc: "AI 外教结合摄像头场景进行英语口语教学，实时纠正语法", tag: "学习" },
-              { icon: "🎤", title: "模拟面试", desc: "AI 面试官根据你的回答追问，通过摄像头观察你的表现", tag: "求职" },
+              { icon: <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>, title: "模拟面试", desc: "AI 面试官根据你的回答追问，通过摄像头观察你的表现", tag: "求职" },
-              { icon: "⚔️", title: "辩论对手", desc: "AI 反驳你的观点，锻炼你的逻辑思维和表达能力", tag: "思维" },
+              { icon: <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M8 10h8"/><path d="M8 14h4"/></svg>, title: "辩论对手", desc: "AI 反驳你的观点，锻炼你的逻辑思维和表达能力", tag: "思维" },
-              { icon: "🌐", title: "同声翻译", desc: "实时识别画面中的外语文字并语音翻译，口语化输出", tag: "工具" },
+              { icon: <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>, title: "同声翻译", desc: "实时识别画面中的外语文字并语音翻译，口语化输出", tag: "工具" },
            ].map((s) => (
              <div className="lp-scene-row lp-fade-in" key={s.title}>
                <div className="lp-scene-row__icon">{s.icon}</div>
--- a/frontend/src/components/SessionSidebar/index.tsx
+++ b/frontend/src/components/SessionSidebar/index.tsx
@@ -12,7 +12,7 @@ interface SessionSidebarProps {
  sessions: SessionSummary[];
  activeSessionId: string | null;
  open: boolean;
-  onToggle: () => void;
+  onClose: () => void;
  onNewSession: () => void;
  onSelectSession: (id: string) => void;
  onDeleteSession: (id: string) => void;
@@ -56,7 +56,7 @@ export function SessionSidebar({
  sessions,
  activeSessionId,
  open,
-  onToggle,
+  onClose,
  onNewSession,
  onSelectSession,
  onDeleteSession,
@@ -88,7 +88,7 @@ export function SessionSidebar({
  const handleSelect = (id: string) => {
    onSelectSession(id);
    // 选择后自动收起侧边栏
-    onToggle();
+    onClose();
  };
  // 过滤 + 分组
@@ -118,8 +118,6 @@ export function SessionSidebar({
    return groups;
  }, [sessions, searchQuery]);
  if (!open) return null;
  const groupLabels: Record<TimeGroup, string> = {
    today: t("sidebar.today"),
    yesterday: t("sidebar.yesterday"),
@@ -128,14 +126,17 @@ export function SessionSidebar({
  return (
    <>
-      <div className="sidebar-backdrop" onClick={onToggle} />
+      <div
-      <div className="sidebar">
+        className={`sidebar-backdrop ${open ? 'sidebar-backdrop--visible' : ''}`}
        onClick={onClose}
      />
      <div className={`sidebar ${open ? 'sidebar--open' : 'sidebar--collapsed'}`}>
        {/* 头部：新建 + 收起 */}
        <div className="sidebar__header">
          <button className="sidebar__new-btn" onClick={onNewSession}>
            ✚ {t("sidebar.new")}
          </button>
-          <button className="sidebar__toggle" onClick={onToggle} title={t("sidebar.collapse")}>
+          <button className="sidebar__toggle" onClick={onClose} title={t("sidebar.collapse")}>
            ✕
          </button>
        </div>
@@ -187,7 +188,7 @@ export function SessionSidebar({
                        <>
                          {/* 视频标记图标 */}
                          {session.messageCount > 5 && (
-                            <span className="sidebar__item-icon" title={t("sidebar.video")}>📹</span>
+                            <span className="sidebar__item-icon" title={t("sidebar.video")}><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg></span>
                          )}
                          <div className="sidebar__item-content">
                            <div className="sidebar__item-title">{session.title}</div>
@@ -207,7 +208,7 @@ export function SessionSidebar({
                              }}
                              title={t("sidebar.rename")}
                            >
-                              ✏
+                              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                            </button>
                            <button
                              className="sidebar__action-btn sidebar__action-btn--danger"
@@ -217,7 +218,7 @@ export function SessionSidebar({
                              }}
                              title={t("sidebar.delete")}
                            >
-                              🗑
+                              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                            </button>
                          </div>
                        </>
--- a/frontend/src/hooks/useSessionList.ts
+++ b/frontend/src/hooks/useSessionList.ts
@@ -80,7 +80,7 @@ export function useSessionList(accessToken?: string | null) {
    try {
      const res = await listConversations(accessToken);
      if (res.data) {
-        const list = res.data.conversations.map(toSessionSummary);
+        const list = (res.data.conversations || []).map(toSessionSummary);
        setSessions(list);
        // 恢复上次选中的会话（如果仍然存在）
        const lastId = localStorage.getItem(LAST_ACTIVE_KEY);
@@ -193,7 +193,7 @@ export function useSessionList(accessToken?: string | null) {
      try {
        const res = await getConversationMessages(accessToken, sessionId);
        if (res.data) {
-          return res.data.messages.map(toChatMessage);
+          return (res.data.messages || []).map(toChatMessage);
        }
      } catch (err) {
        console.error("[SessionList] 加载消息失败:", err);
--- a/frontend/src/lib/i18n/en-US.ts
+++ b/frontend/src/lib/i18n/en-US.ts
@@ -155,9 +155,9 @@ export const enUS: TranslationMap = {
  "auth.login": "Sign In",
  "auth.register": "Sign Up",
  "auth.username": "Username",
-  "auth.username.placeholder": "3-64 characters",
+  "auth.username.placeholder": "Enter username",
  "auth.password": "Password",
-  "auth.password.placeholder": "8-72 characters",
+  "auth.password.placeholder": "Enter password",
  "auth.submitting": "Please wait...",
  "auth.noAccount": "Don't have an account?",
  "auth.hasAccount": "Already have an account?",
@@ -174,6 +174,7 @@ export const enUS: TranslationMap = {
  "settings.scenario.custom": "My Scenarios",
  "settings.scenario.empty": "No custom scenarios yet. Click the button above to create one.",
  "scenario.create.button": "New Scenario",
  "scenario.createChip": "New",
  "scenario.create.title": "Create Custom Scenario",
  "scenario.edit.title": "Edit Scenario",
  "scenario.create.name": "Scenario Name",
--- a/frontend/src/lib/i18n/ja-JP.ts
+++ b/frontend/src/lib/i18n/ja-JP.ts
@@ -155,9 +155,9 @@ export const jaJP: TranslationMap = {
  "auth.login": "ログイン",
  "auth.register": "新規登録",
  "auth.username": "ユーザー名",
-  "auth.username.placeholder": "3〜64文字",
+  "auth.username.placeholder": "ユーザー名を入力",
  "auth.password": "パスワード",
-  "auth.password.placeholder": "8〜72文字",
+  "auth.password.placeholder": "パスワードを入力",
  "auth.submitting": "お待ちください...",
  "auth.noAccount": "アカウントをお持ちでないですか？",
  "auth.hasAccount": "すでにアカウントをお持ちですか？",
@@ -174,6 +174,7 @@ export const jaJP: TranslationMap = {
  "settings.scenario.custom": "マイシナリオ",
  "settings.scenario.empty": "カスタムシナリオはまだありません。上のボタンをクリックして作成してください。",
  "scenario.create.button": "新しいシナリオ",
  "scenario.createChip": "新規",
  "scenario.create.title": "カスタムシナリオを作成",
  "scenario.edit.title": "シナリオを編集",
  "scenario.create.name": "シナリオ名",
--- a/frontend/src/lib/i18n/zh-CN.ts
+++ b/frontend/src/lib/i18n/zh-CN.ts
@@ -60,8 +60,8 @@ export const zhCN: TranslationMap = {
  // Controls
  "controls.connecting": "连接中...",
-  "controls.start": "🎙️ 开始对话",
+  "controls.start": "开始对话",
-  "controls.startVideo": "🎙️ 开始视频通话",
+  "controls.startVideo": "开始视频通话",
  "controls.cameraOff": "关闭摄像头",
  "controls.cameraOn": "开启摄像头",
  "controls.micOff": "关闭麦克风",
@@ -70,7 +70,7 @@ export const zhCN: TranslationMap = {
  "controls.stop": "结束对话",
  "controls.stopVideo": "结束视频",
  "controls.endSession": "结束会话",
-  "controls.resumeVideo": "📹 重新开始视频",
+  "controls.resumeVideo": "重新开始视频",
  // Chat panel
  "chat.title": "对话",
@@ -155,9 +155,9 @@ export const zhCN: TranslationMap = {
  "auth.login": "登录",
  "auth.register": "注册",
  "auth.username": "用户名",
-  "auth.username.placeholder": "3-64 个字符",
+  "auth.username.placeholder": "请输入用户名",
  "auth.password": "密码",
-  "auth.password.placeholder": "8-72 个字符",
+  "auth.password.placeholder": "请输入密码",
  "auth.submitting": "请稍候...",
  "auth.noAccount": "还没有账号？",
  "auth.hasAccount": "已有账号？",
@@ -174,6 +174,7 @@ export const zhCN: TranslationMap = {
  "settings.scenario.custom": "我的情景",
  "settings.scenario.empty": "还没有自建情景，点击上方按钮创建",
  "scenario.create.button": "创建新情景",
  "scenario.createChip": "新建",
  "scenario.create.title": "创建自建情景",
  "scenario.edit.title": "编辑情景",
  "scenario.create.name": "情景名称",
--- a/frontend/src/lib/scenarioIcons.tsx
+++ b/frontend/src/lib/scenarioIcons.tsx
@@ -0,0 +1,124 @@
 // ============================================================
 // scenarioIcons — 自建情景 SVG 图标集（Feather-style）
 // 职责：为 CreateScenarioModal / EditScenarioModal 提供图标选项
 //       为情景芯片条渲染自建情景的 SVG 图标
 // ============================================================
 import React from "react";
 const P = { viewBox: "0 0 24 24", fill: "none" as const, stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" as const, strokeLinejoin: "round" as const };
 export interface ScenarioIconDef {
  id: string;
  label: string;
  render: (size?: number) => React.ReactElement;
 }
 /** 自建情景可选的 Feather SVG 图标集 */
 export const SCENARIO_ICON_SET: ScenarioIconDef[] = [
  {
    id: "sparkles", label: "通用助手",
    render: (s = 16) => (<svg width={s} height={s} {...P}><path d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z"/><path d="M18 14l.75 2.25L21 17l-2.25.75L18 20l-.75-2.25L15 17l2.25-.75L18 14z"/><path d="M5 17l.5 1.5L7 19l-1.5.5L5 21l-.5-1.5L3 19l1.5-.5L5 17z"/></svg>),
  },
  {
    id: "theater", label: "角色扮演",
    render: (s = 16) => (<svg width={s} height={s} {...P}><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>),
  },
  {
    id: "palette", label: "创意设计",
    render: (s = 16) => (<svg width={s} height={s} {...P}><circle cx="13.5" cy="6.5" r=".5"/><circle cx="17.5" cy="10.5" r=".5"/><circle cx="8.5" cy="7.5" r=".5"/><circle cx="6.5" cy="12.5" r=".5"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.93 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.04-.23-.29-.38-.63-.38-1.04 0-.83.67-1.5 1.5-1.5H16c3.31 0 6-2.69 6-6 0-5.5-4.5-9.92-10-9.92z"/></svg>),
  },
  {
    id: "target", label: "目标导向",
    render: (s = 16) => (<svg width={s} height={s} {...P}><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>),
  },
  {
    id: "film", label: "影视娱乐",
    render: (s = 16) => (<svg width={s} height={s} {...P}><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg>),
  },
  {
    id: "book-open", label: "阅读学习",
    render: (s = 16) => (<svg width={s} height={s} {...P}><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>),
  },
  {
    id: "book", label: "教程指南",
    render: (s = 16) => (<svg width={s} height={s} {...P}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>),
  },
  {
    id: "edit", label: "写作编辑",
    render: (s = 16) => (<svg width={s} height={s} {...P}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>),
  },
  {
    id: "clipboard", label: "任务管理",
    render: (s = 16) => (<svg width={s} height={s} {...P}><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/></svg>),
  },
  {
    id: "map-pin", label: "导航定位",
    render: (s = 16) => (<svg width={s} height={s} {...P}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>),
  },
  {
    id: "search", label: "搜索探索",
    render: (s = 16) => (<svg width={s} height={s} {...P}><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>),
  },
  {
    id: "lightbulb", label: "灵感启发",
    render: (s = 16) => (<svg width={s} height={s} {...P}><line x1="9" y1="18" x2="15" y2="18"/><line x1="10" y1="22" x2="14" y2="22"/><path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"/></svg>),
  },
  {
    id: "briefcase", label: "商务办公",
    render: (s = 16) => (<svg width={s} height={s} {...P}><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>),
  },
  {
    id: "code", label: "编程开发",
    render: (s = 16) => (<svg width={s} height={s} {...P}><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>),
  },
  {
    id: "graduation-cap", label: "教育培训",
    render: (s = 16) => (<svg width={s} height={s} {...P}><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg>),
  },
  {
    id: "mic", label: "语音对话",
    render: (s = 16) => (<svg width={s} height={s} {...P}><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>),
  },
  {
    id: "music", label: "音乐艺术",
    render: (s = 16) => (<svg width={s} height={s} {...P}><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>),
  },
  {
    id: "globe", label: "翻译跨语言",
    render: (s = 16) => (<svg width={s} height={s} {...P}><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>),
  },
  {
    id: "heart", label: "健康关怀",
    render: (s = 16) => (<svg width={s} height={s} {...P}><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>),
  },
  {
    id: "shield", label: "安全防护",
    render: (s = 16) => (<svg width={s} height={s} {...P}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>),
  },
  {
    id: "zap", label: "快速高效",
    render: (s = 16) => (<svg width={s} height={s} {...P}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>),
  },
  {
    id: "coffee", label: "休闲聊天",
    render: (s = 16) => (<svg width={s} height={s} {...P}><path d="M18 8h1a4 4 0 0 1 0 8h-1"/><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></svg>),
  },
  {
    id: "tool", label: "工具助手",
    render: (s = 16) => (<svg width={s} height={s} {...P}><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>),
  },
  {
    id: "message-circle", label: "对话问答",
    render: (s = 16) => (<svg width={s} height={s} {...P}><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>),
  },
 ];
 /** 根据图标 ID 渲染 SVG，找不到返回 null */
 export function renderScenarioIconById(iconId: string, size = 14): React.ReactElement | null {
  const def = SCENARIO_ICON_SET.find((d) => d.id === iconId);
  return def ? def.render(size) : null;
 }
 /** 默认图标 ID */
 export const DEFAULT_SCENARIO_ICON_ID = "sparkles";
Author	SHA1	Message	Date
huanghaosheng	f9a01269d2	Merge pull request 'refactor: 优化数据库迁移文件约束和注释' (#211 ) from refatcor/table-structure into main All checks were successful Deploy / deploy (push) Successful in 39s Details Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/211	2026-06-23 23:42:40 +08:00
hhs	74f1a8eb34	refactor: 优化数据库迁移文件约束和注释迁移文件优化： - 001_users.up.sql: 添加完整表和列注释，说明密码哈希算法 (bcrypt) 和 token 哈希算法 (SHA-256) - 002_messages.up.sql: 收紧 role 字段至 VARCHAR(10)，添加 tokens_used 非负约束，补充完整注释 - 003_sessions.up.sql: 收紧 title 字段至 VARCHAR(100) 并添加长度约束 (1-100)，详细说明 config JSONB 结构 - 004_user_scenarios.up.sql: 修复 greeting 字段冲突 (VARCHAR(500))，扩大 icon 至 VARCHAR(20) 支持复合 Emoji，prompt 改为 TEXT 无上限，优化约束逻辑后端代码修改： - auth.go: 移除用户名最小长度限制 (3 字符)，仅保留最大长度 64 前端国际化修改： - 更新三种语言的登录/注册表单 placeholder 文本，移除字符长度要求提示 - zh-CN: "请输入用户名" / "请输入密码" - en-US: "Enter username" / "Enter password" - ja-JP: "ユーザー名を入力" / "パスワードを入力" 删除文件： - 移除临时修复迁移文件 (005_fix_user_scenarios_description.*) - 删除临时诊断脚本 (fix_user_scenarios.sql, check_constraints.sql) 所有约束修改都是放宽限制，不影响现有数据。	2026-06-23 23:41:49 +08:00
huanghaosheng	4dd4138197	Merge pull request 'fix: 减少自定义情景中数据库表对 prompt 的约束' (#210 ) from fix/database into main All checks were successful Deploy / deploy (push) Successful in 33s Details Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/210	2026-06-23 22:58:56 +08:00
hhs	5ef059eb40	fix: 减少自定义情景中数据库表对 prompt 的约束	2026-06-23 22:58:02 +08:00
huanghaosheng	9523fe6650	Merge pull request 'fix: 修复无法正常自定义情景的问题' (#209 ) from fix/frontend into main All checks were successful Deploy / deploy (push) Successful in 39s Details Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/209	2026-06-23 11:11:08 +08:00
hhs	a219934f4b	fix: 修复无法正常自定义情景的问题	2026-06-23 11:10:37 +08:00
huanghaosheng	72a8d4803e	Merge pull request 'fix: 修复前端语法问题' (#208 ) from fix/frontend into main All checks were successful Deploy / deploy (push) Successful in 28s Details Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/208	2026-06-22 21:59:14 +08:00
hhs	dcf53a3783	fix: 修复前端语法问题	2026-06-22 21:58:49 +08:00
cfy777	b5ec6551bf	Merge pull request 'styles：美化样式' (#207 ) from feat/styles into main Some checks failed Deploy / deploy (push) Failing after 17s Details Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/207	2026-06-22 19:32:47 +08:00
cfy666	79d321c78a	fix: 自建情景在聊天面板与系统消息中正确显示图标和名称	2026-06-22 16:02:02 +08:00
huanghaosheng	57bd8c72b8	Merge pull request 'feat: v2 版本' (#206 ) from v2 into main All checks were successful Deploy / deploy (push) Successful in 18s Details Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/206	2026-06-22 16:01:27 +08:00
huanghaosheng	d640b5b41b	Merge pull request 'docs: 优化首页 README 文档' (#205 ) from develop into v2 All checks were successful Deploy / deploy (push) Successful in 18s Details Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/205	2026-06-22 15:47:39 +08:00
cfy666	f1b9e4fcc1	fix: 系统消息最大宽度限制与居中对齐	2026-06-22 15:08:26 +08:00
cfy666	18aa5f1949	refactor: 场景配置与弹窗样式改用 CSS 变量，适配白色主题	2026-06-22 15:03:58 +08:00
huanghaosheng	a16628119a	Merge pull request 'docs: 优化首页部分内容重复' (#204 ) from docs/readme into develop Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/204	2026-06-22 14:50:11 +08:00
hhs	3888941f85	docs: 优化首页部分内容重复	2026-06-22 14:49:52 +08:00
huanghaosheng	0a816049fa	Merge pull request 'docs: 优化首页 README 项目部署指南' (#203 ) from docs/readme into develop Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/203	2026-06-22 14:43:34 +08:00
cfy666	140a178993	fix: 侧栏收起时使用 visibility 隐藏避免闪烁	2026-06-22 14:43:04 +08:00
hhs	31c1720c00	docs: 优化首页 README 项目部署指南	2026-06-22 14:42:56 +08:00
huanghaosheng	c6093c01c1	Merge pull request 'docs: 优化首页 README' (#202 ) from docs/readme into develop Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/202	2026-06-22 14:37:50 +08:00
hhs	3267f35edb	docs: 优化首页 README	2026-06-22 14:37:32 +08:00
huanghaosheng	a309c269e0	Merge pull request 'docs: 完善首页 README 文件' (#201 ) from docs/readme into develop Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/201	2026-06-22 14:36:20 +08:00
hhs	22930f0080	docs: 完善首页 README 文件	2026-06-22 14:35:53 +08:00
huanghaosheng	c00b8a83d9	Merge pull request 'fix: 优化侧栏弹出延迟问题' (#200 ) from develop into v2 All checks were successful Deploy / deploy (push) Successful in 28s Details Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/200	2026-06-22 13:17:18 +08:00
huanghaosheng	36007babcb	Merge pull request 'fix: 优化侧栏弹出延迟问题' (#199 ) from fix/frontend into develop Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/199	2026-06-22 13:16:59 +08:00
hhs	f01c84d89e	fix: 优化侧栏弹出延迟问题	2026-06-22 13:16:31 +08:00
huanghaosheng	c3808ff38c	Merge pull request 'fix: 修复“设置”侧栏双重展开的问题' (#198 ) from develop into v2 All checks were successful Deploy / deploy (push) Successful in 29s Details Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/198	2026-06-22 13:03:04 +08:00
huanghaosheng	2740bea755	Merge pull request 'fix: 修复“设置”侧栏双重展开的问题' (#197 ) from fix/frontend into develop Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/197	2026-06-22 13:02:43 +08:00
hhs	69b9694cfe	fix: 修复“设置”侧栏双重展开的问题	2026-06-22 13:02:05 +08:00
huanghaosheng	70ee212ea2	Merge pull request 'fix: 修复前端侧边栏无法平滑弹出的问题' (#196 ) from develop into v2 All checks were successful Deploy / deploy (push) Successful in 28s Details Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/196	2026-06-22 12:55:43 +08:00
huanghaosheng	f08f547e76	Merge pull request 'fix: 修复前端侧边栏无法平滑弹出的问题' (#195 ) from fix/frontend into develop Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/195	2026-06-22 12:55:24 +08:00
hhs	03a19befe1	fix: 修复前端侧边栏无法平滑弹出的问题	2026-06-22 12:53:09 +08:00
huanghaosheng	c4b68b77d1	Merge pull request 'fix: 修复空会话返回 null 导致前端崩溃的问题' (#194 ) from develop into v2 All checks were successful Deploy / deploy (push) Successful in 43s Details Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/194	2026-06-22 12:40:37 +08:00
huanghaosheng	f2a883bda8	Merge pull request 'fix: 修复空会话返回 null 导致前端崩溃的问题' (#193 ) from fix/frontend into develop Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/193	2026-06-22 12:40:18 +08:00
hhs	4cc0713459	fix: 修复空会话返回 null 导致前端崩溃的问题 ## 问题描述当用户创建新会话但未发送任何消息就切换到其他会话时，前端控制台报错： "TypeError: Cannot read properties of null (reading 'map')" 根本原因：Go 后端未初始化的切片序列化为 JSON 时会变成 `null` 而非 `[]`，前端尝试对 `null` 调用 `.map()` 导致崩溃。 ## 修复方案采用多层防御策略，同时修复后端和前端： ### 后端修复（确保 API 契约正确） 1. message_pg.go:93 - 将 `var messages []StoredMessage` 改为 `messages := make([]StoredMessage, 0)`，确保空结果序列化为 `[]` 2. conversation.go - 在两个响应路径（PG 查询 + 内存回退）添加防御性 nil 检查 ### 前端防御（多层保护） 1. useSessionList.ts - 在 loadMessages 和 loadSessions 中添加 null 合并操作 `(res.data.messages \|\| [])` 确保即使后端退化也不会崩溃 ## 影响范围 - 所有空会话（新建后未发送消息的对话）现在可以正常切换 - API 响应符合 JSON 最佳实践（数组字段永远是 `[]` 而非 `null`）	2026-06-22 12:39:37 +08:00
hhs	2180751a9b	fix: 修复前端侧边栏双重展开动画问题移除条件渲染和 CSS animation 的冲突，改用纯 CSS transition 控制显示/隐藏。问题根源： - 组件使用 `if (!open) return null;` 条件渲染，导致挂载时立即出现 - CSS 同时使用 `animation: slideInLeft`，触发从 -100% 的二次滑入 - 两个独立显示机制叠加，造成双重动画闪烁修复方案： - SessionSidebar: 移除条件渲染，始终保持 DOM 存在，通过动态 className 控制状态 - App.css: 移除 `animation` 和 `@keyframes`，改用 `transition: transform` - 新增 `.sidebar--collapsed` / `.sidebar--open` 类控制 `translateX` - 新增 `.sidebar-backdrop--visible` 类控制背景遮罩淡入淡出 - 添加 `pointer-events: none` 确保隐藏状态不响应交互影响范围： - frontend/src/components/SessionSidebar/index.tsx - frontend/src/App.css	2026-06-22 12:05:54 +08:00
huanghaosheng	964c5c967e	Merge pull request 'fix: 修复前端侧边栏弹出异常问题' (#192 ) from develop into v2 All checks were successful Deploy / deploy (push) Successful in 47s Details Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/192	2026-06-22 11:20:01 +08:00
huanghaosheng	dcd08d031c	Merge pull request 'fix: 修复前端侧边栏弹出异常问题' (#191 ) from fix/frontend into develop Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/191	2026-06-22 11:19:34 +08:00
hhs	6bca4e0d47	fix: 修复前端侧边栏弹出异常问题	2026-06-22 11:15:41 +08:00
huanghaosheng	881c3f9853	Merge pull request 'fix: 修复前端 TypeScript 编译错误' (#190 ) from develop into v2 All checks were successful Deploy / deploy (push) Successful in 23s Details Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/190	2026-06-22 00:30:00 +08:00
huanghaosheng	2881941be6	Merge pull request 'fix: 修复前端 TypeScript 编译错误' (#189 ) from fix/frontend into develop Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/189	2026-06-22 00:29:42 +08:00
hhs	1b99d24fc1	fix: 修复前端 TypeScript 编译错误 - 移除 App.tsx 中未使用的 activeScenario 变量 - 修复 ChatPanel 中 ReactNode 的 type-only import - 移除 ChatPanel 中未使用的 onSelectScenario 参数修复 CI 构建失败问题	2026-06-22 00:28:59 +08:00
huanghaosheng	f9e68b96b9	Merge pull request 'refactor: 重构视频面板 UI，情景选择改为卡片网格，控制按钮改为 SVG 图标' (#188 ) from develop into v2 Some checks failed Deploy / deploy (push) Failing after 11s Details Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/188	2026-06-22 00:14:16 +08:00
huanghaosheng	c58c6b59a5	Merge pull request 'refactor: 重构视频面板 UI，情景选择改为卡片网格，控制按钮改为 SVG 图标' (#187 ) from feat/stylechange into develop Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/187	2026-06-22 00:13:44 +08:00
cfy666	e24fb2cc19	refactor: 将情景图标和设备选择器的 emoji 统一替换为 SVG 图标 - 新增 scenarioIcons.tsx 提取情景图标渲染逻辑 - 情景芯片、设备选择器、警告提示等 emoji 全部改为 Feather-style SVG - 调整 CSS 确保 SVG 图标居中对齐	2026-06-21 23:50:27 +08:00
cfy666	6cbabb63bb	refactor: 情景选择从卡片网格改为横向滚动芯片条 - 将 scenario-picker 网格布局改为 scenario-strip 横向滚动芯片条 - 新增「新建情景」快捷入口芯片（+按钮） - 新增 scenario.createChip 三语言翻译键	2026-06-21 23:23:22 +08:00
cfy666	949a707e0f	refactor: 重构视频面板 UI，情景选择改为卡片网格，控制按钮改为 SVG 图标 - 情景选择从 ChatPanel header 下拉菜单迁移至视频面板下方卡片网格 - 摄像头/麦克风按钮改为圆形 SVG 图标按钮 - 识别/中断/停止按钮改为药丸形状 SVG 图标按钮 - 设备选择器改为水平布局，优化空间利用 - 移除 ChatPanel 空状态中重复的情景卡片 - .gitignore 忽略 .claudian/ 和笔记目录	2026-06-21 22:58:02 +08:00