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

Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/211

.gitignore

@@ -24,4 +24,7 @@ Thumbs.db
 
 # ---- Obsidian ----
 .obsidian/
-.claudian/sessions/conv-1781943335504-q62bzosye.meta.json
+.claudian/
+修改过程笔记/
+学习复盘/
+docs/follow-up/

README.md

@@ -1,181 +1,561 @@
 # CamTalk
 
-多模态实时 AI 视觉对话助手。用户通过摄像头和麦克风与 AI 交互，AI 理解视觉场景和语音输入后，以文字和语音形式给出自然回应。
+<div align="center">
 
-- **路演视频**：[哔哩哔哩弹幕网——七牛云第四批议题1](https://www.bilibili.com/video/BV1dDJK6cE5S/)
-- **线上体验**：http://8.161.227.145:9000
+**多模态实时 AI 视觉对话助手**
 
-> ⚠️ **注意**：由于线上地址使用 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`，回车
-> 2. 将 **Insecure origins treated as secure** 选项设置为 **Enabled**（已启用）
-> 3. 在输入框中输入 `http://8.161.227.145:9000` 地址
-> 4. 点击右下角弹出的 **Relaunch** 按钮，自动重启浏览器
->
-> 重启后即可在该 HTTP 地址下正常调用摄像头和麦克风。
+> 1. 访问 `chrome://flags/#unsafely-treat-insecure-origin-as-secure`
+> 2. 启用该选项，并在输入框填入 `http://8.161.227.145:9000`
+> 3. 点击 **Relaunch** 重启浏览器
 
-![](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[浏览器客户端]
-        A1[媒体采集]
-        A2[VAD 语音检测]
-        A3[关键帧检测]
-        A4[UI 渲染]
+    subgraph Browser["🌐 浏览器客户端"]
+        UI["React UI 渲染"]
+        VAD["VAD 语音检测"]
+        Media["媒体采集"]
     end
 
-    subgraph gateway[Go 网关 :8080]
-        B1[WebSocket Handler]
-        B2[Session Manager]
-        B3[AI Orchestrator]
-        B4[REST API]
-        B5[Auth 模块]
-        B6[Store 层]
+    subgraph Gateway["⚙️ Go 网关 (Eino Graph)"]
+        WS["WebSocket Handler"]
+        Auth["JWT 认证"]
+        Session["会话管理 (三级存储)"]
+        Orch["AI 编排器 (7节点DAG)"]
     end
 
-    subgraph cloud[云端 AI 服务]
-        C1[STT 语音识别]
-        C2[LLM 多模态推理]
-        C3[TTS 语音合成]
+    subgraph AI["☁️ 云端 AI 服务"]
+        STT["STT (MiMo/Deepgram)"]
+        LLM["LLM (qwen3-vl-plus)"]
+        TTS["TTS (MiMo/OpenAI)"]
     end
 
-    client <-->|WebSocket| gateway
-    gateway <-->|HTTP| cloud
+    Browser <-->|"WebSocket<br/>(JWT + query/config)"| Gateway
+    Orch --> STT
+    Orch --> LLM
+    Orch --> TTS
 ```
 
-**关键模式**：LLM 文本流和 TTS 音频流并行推送，用户先看到文字、紧接着听到语音，感知延迟 < 0.5 秒。
+### AI 编排流水线（Eino Graph）
 
-## 技术栈
+基于 [CloudWeGo Eino](https://github.com/cloudwego/eino) 框架的声明式 7 节点 DAG：
 
-| 层级 | 技术 |
-|------|------|
-| 前端 | 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 |
+```
+START → STT → History → ChatModel → Msg2Str → Splitter → TTS → Done → END
+```
 
-## 项目结构
+**核心优势**：
+- **流式处理**：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/     # 麦克风音频采集
-│       │   ├── EdgeProcessor/  # VAD + 关键帧检测
-│       │   ├── WebSocketManager/ # WS 连接管理
-│       │   ├── ChatPanel/      # 消息展示
-│       │   ├── VideoPreview/   # 摄像头画面预览
+│       │   ├── MicManager/     # 麦克风音频采集 + VAD
+│       │   ├── WebSocketManager/ # WS 连接生命周期
+│       │   ├── ChatPanel/      # 消息展示 + 流式回复
 │       │   ├── SessionSidebar/ # 对话历史侧边栏
-│       │   ├── ConfigPanel/    # 配置面板
-│       │   └── Toast/          # 通知提示
+│       │   └── ConfigPanel/    # 配置面板（主题/TTS/语言/场景）
 │       ├── hooks/              # 自定义 Hooks
-│       │   ├── useVisionSession.ts  # 核心会话 Hook
+│       │   ├── useVisionSession.ts  # 核心会话 Hook (~500 行)
 │       │   ├── useSessionList.ts    # 对话列表管理
 │       │   └── useObservationMode.ts # 观察模式
 │       ├── lib/                # 工具库
-│       │   ├── websocket.ts    # WebSocket 连接管理
-│       │   ├── api.ts          # REST API 客户端
-│       │   ├── auth.tsx        # 认证上下文（JWT 管理）
-│       │   ├── audio.ts        # 音频编码
-│       │   ├── ttsPlayer.ts    # TTS 播放器
-│       │   ├── i18n/           # 国际化（zh-CN/en-US/ja-JP）
-│       │   └── sampling.ts     # 采样策略
+│       │   ├── websocket.ts    # WebSocket 单例（心跳/重连/订阅）
+│       │   ├── api.ts          # REST 客户端（401拦截+刷新）
+│       │   ├── auth.tsx        # AuthProvider（JWT 自动刷新）
+│       │   ├── ttsPlayer.ts    # TTS 流式播放队列
+│       │   └── i18n/           # 国际化（zh-CN/en-US/ja-JP）
 │       └── types/              # TypeScript 类型定义
-├── backend/                    # Go 网关
-│   ├── cmd/server/             # 入口
+├── backend/                    # ⚙️ Go 网关
+│   ├── 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/             # 配置管理
-│       ├── models/             # 数据模型
-│       ├── errors/             # 错误码
-│       └── logger/             # 日志
-├── migrations/                 # 数据库迁移（嵌入式 SQL）
-├── docs/                       # 设计文档
-└── CLAUDE.md                   # Claude Code 指引
+│       ├── config/             # 配置管理（Viper）
+│       └── logger/             # 日志（Zap + Trace ID）
+├── migrations/                 # 📊 数据库迁移（嵌入式 SQL）
+├── docs/                       # 📚 设计文档
+│   ├── 01-架构设计.md
+│   ├── 02-接口文档.md
+│   ├── 08-Eino框架与编排设计.md
+│   ├── 10-鉴权体系.md
+│   └── 13-日志追踪.md
+├── deploy.sh                   # 🐳 部署脚本（Docker Compose）
+├── docker-compose.yml          # 容器编排配置
+└── CLAUDE.md                   # 🤖 Claude Code 开发指引
 ```
 
-## 快速开始
+## 🚀 快速开始
 
 ### 前置条件
 
-- Node.js >= 18
-- Go >= 1.25
+- **Node.js** >= 18
+- **Go** >= 1.25
+- **PostgreSQL** >= 15（可选 Docker）
+- **Redis** >= 7（可选，用于缓存加速）
 
-### 前端
+### 本地开发
+
+#### 1. 克隆项目
 
 ```bash
-cd frontend
-npm install
-npm run dev          # Vite 开发服务器 http://localhost:5173
+git clone https://github.com/yourusername/CamTalk.git
+cd CamTalk
 ```
 
-### 后端
+#### 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_`）。
-
-```bash
-# 最小启动（需要至少一个 AI 服务的 API Key）
-cd backend
-CAMTALK_AI_LLM_API_KEY=sk-xxx \
-CAMTALK_AI_STT_API_KEY=xxx \
+# 启动服务（监听 :8080）
 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`
-**服务端 → 客户端**：`connected`、`stt_result`、`llm_chunk`、`llm_done`、`tts_audio`、`error`、`pong`
+#### 5. 访问应用
 
-完整协议见 [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) | 功能创意与规划 |
-| [对话历史技术设计](docs/conversation-history-technical-design.md) | 对话历史功能的前端技术方案 |
+| [09-情景切换](docs/09-情景切换.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>

backend/cmd/server/main.go

@@ -10,6 +10,7 @@ import (
 	"time"
 
 	"github.com/gin-gonic/gin"
+	"github.com/jackc/pgx/v5/pgxpool"
 	"github.com/redis/go-redis/v9"
 
 	"github.com/hhs/camtalk/internal/api"
@@ -22,6 +23,7 @@ import (
 	"github.com/hhs/camtalk/internal/ratelimit"
 	"github.com/hhs/camtalk/internal/session"
 	"github.com/hhs/camtalk/internal/store"
+	"github.com/hhs/camtalk/internal/trace"
 	"github.com/hhs/camtalk/internal/ws"
 	migrations "github.com/hhs/camtalk/migrations"
 )
@@ -55,6 +57,7 @@ func main() {
 	var userRepo store.UserRepository
 	var msgRepo store.MessageRepository
 	var sessRepo store.SessionRepository
+	var pool *pgxpool.Pool // 数据库连接池
 
 	// L3: PostgreSQL（冷数据持久化层）
 	dsn := cfg.Storage.Persistence.DSN
@@ -66,7 +69,8 @@ func main() {
 			logger.Log.Fatalw("storage.persistence.dsn is required when persistence is enabled",
 				"hint", "set CAMTALK_STORAGE_DSN environment variable")
 		}
-		pool, err := store.NewPostgresPool(ctx, dsn)
+		var err error
+		pool, err = store.NewPostgresPool(ctx, dsn)
 		if err != nil {
 			logger.Log.Fatalw("failed to connect to postgres", "error", err)
 		}
@@ -182,7 +186,11 @@ func main() {
 	}
 
 	// 初始化 Eino Graph + Orchestrator
-	pipelineGraph, err := eino.NewPipelineGraph(ctx, cfg, sttService, ttsService, sessionMgr)
+	var userScenarioRepo store.UserScenarioRepository
+	if pool != nil {
+		userScenarioRepo = store.NewPostgresUserScenarioRepo(pool)
+	}
+	pipelineGraph, err := eino.NewPipelineGraph(ctx, cfg, sttService, ttsService, sessionMgr, userScenarioRepo)
 	if err != nil {
 		logger.Log.Fatalw("failed to create eino pipeline graph", "error", err)
 	}
@@ -219,7 +227,9 @@ func main() {
 	}
 
 	r := gin.New()
-	r.Use(gin.Recovery())
+	r.Use(trace.TraceMiddleware())    // 第一层：生成 trace ID
+	r.Use(trace.GinLogger())          // 第二层：记录请求
+	r.Use(trace.GinRecovery())        // 第三层：panic 恢复
 
 	// REST API
 	apiGroup := r.Group("/api")
@@ -239,8 +249,23 @@ func main() {
 	convHandler := api.NewConversationHandler(sessionMgr, tokenMgr, msgRepo)
 	convHandler.RegisterRoutes(apiGroup)
 
+	// UserScenario REST 端点
+	if pool != nil {
+		userScenarioRepo := store.NewPostgresUserScenarioRepo(pool)
+		userScenarioHandler := api.NewUserScenarioHandler(userScenarioRepo)
+		scenarioGroup := apiGroup.Group("/scenarios")
+		scenarioGroup.Use(auth.AuthMiddleware(tokenMgr))
+		{
+			scenarioGroup.GET("", userScenarioHandler.List)
+			scenarioGroup.POST("", userScenarioHandler.Create)
+			scenarioGroup.GET("/:id", userScenarioHandler.Get)
+			scenarioGroup.PATCH("/:id", userScenarioHandler.Update)
+			scenarioGroup.DELETE("/:id", userScenarioHandler.Delete)
+		}
+	}
+
 	// WebSocket
-	r.GET("/ws", ws.ServeWS(sessionMgr, orch, cfg, tokenMgr, limiter))
+	r.GET("/ws", ws.ServeWS(sessionMgr, orch, cfg, tokenMgr, limiter, userScenarioRepo))
 
 	// HTTP Server
 	srv := &http.Server{

backend/go.mod

@@ -3,6 +3,7 @@ module github.com/hhs/camtalk
 go 1.25.0
 
 require (
+	github.com/alicebob/miniredis/v2 v2.38.0
 	github.com/cloudwego/eino v0.9.9
 	github.com/cloudwego/eino-ext/components/model/openai v0.1.13
 	github.com/gin-gonic/gin v1.10.0
@@ -11,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
@@ -19,7 +21,6 @@ require (
 )
 
 require (
-	github.com/alicebob/miniredis/v2 v2.38.0 // indirect
 	github.com/bahlo/generic-list-go v0.2.0 // indirect
 	github.com/buger/jsonparser v1.1.1 // indirect
 	github.com/bytedance/gopkg v0.1.3 // indirect

backend/go.sum

@@ -129,9 +129,12 @@ github.com/modern-go/reflect2 v1.0.2 h1:xBagoLtFs94CBntxluKeaWgTMpvLxC4ur3nMaC9G
 github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjYzDa0/r8luk=
 github.com/nikolalohinski/gonja v1.5.3 h1:GsA+EEaZDZPGJ8JtpeGN78jidhOlxeJROpqMT9fTj9c=
 github.com/nikolalohinski/gonja v1.5.3/go.mod h1:RmjwxNiXAEqcq1HeK5SSMmqFJvKOfTfXhkJv6YBtPa4=
+github.com/oklog/ulid/v2 v2.1.1 h1:suPZ4ARWLOJLegGFiZZ1dFAkqzhMjL3J1TzI+5wHz8s=
+github.com/oklog/ulid/v2 v2.1.1/go.mod h1:rcEKHmBBKfef9DhnvX7y1HZBYxjXb0cP5ExxNsTT1QQ=
 github.com/onsi/ginkgo v1.6.0/go.mod h1:lLunBs/Ym6LB5Z9jYTR76FiuTmxDTDusOGeTQH+WWjE=
 github.com/onsi/ginkgo v1.8.0/go.mod h1:lLunBs/Ym6LB5Z9jYTR76FiuTmxDTDusOGeTQH+WWjE=
 github.com/onsi/gomega v1.5.0/go.mod h1:ex+gbHU/CVuBBDIJjb2X0qEXbFg53c61hWP/1CpauHY=
+github.com/pborman/getopt v0.0.0-20170112200414-7148bc3a4c30/go.mod h1:85jBQOZwpVEaDAr341tbn15RS4fCAsIst0qp7i8ex1o=
 github.com/pelletier/go-toml/v2 v2.2.4 h1:mye9XuhQ6gvn5h28+VilKrrPoQVanw5PMw/TB0t5Ec4=
 github.com/pelletier/go-toml/v2 v2.2.4/go.mod h1:2gIqNv+qfxSVS7cM2xJQKtLSTLUE9V8t9Stt+h56mCY=
 github.com/pkg/errors v0.8.0/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=

backend/internal/ai/llm/scenarios.go

@@ -84,41 +84,65 @@ var scenarioPrompts = map[string]scenarioPrompt{
 }
 
 // GetScenarioPrompt 根据情景 ID 和语言获取对应的 system prompt。
+// 支持系统预置情景和用户自建情景。
+// customScenarios: 用户自建情景映射表（scenarioID → prompt），可为 nil
 // 返回空字符串表示无此情景（使用默认 prompt）。
-func GetScenarioPrompt(scenarioID, language string) string {
+func GetScenarioPrompt(scenarioID, language string, customScenarios map[string]string) string {
 	if scenarioID == "" || scenarioID == "free_chat" {
 		return ""
 	}
-	p, ok := scenarioPrompts[scenarioID]
-	if !ok {
-		return ""
+
+	// 1. 优先查找系统预置情景
+	if p, ok := scenarioPrompts[scenarioID]; ok {
+		switch {
+		case strings.HasPrefix(language, "zh"):
+			return p.ZH
+		case strings.HasPrefix(language, "ja"):
+			return p.JA
+		default:
+			return p.EN
+		}
 	}
-	switch {
-	case strings.HasPrefix(language, "zh"):
-		return p.ZH
-	case strings.HasPrefix(language, "ja"):
-		return p.JA
-	default:
-		return p.EN
+
+	// 2. 查找用户自建情景
+	if customScenarios != nil {
+		if customPrompt, ok := customScenarios[scenarioID]; ok {
+			return customPrompt
+		}
 	}
+
+	// 3. 默认空字符串
+	return ""
 }
 
 // GetScenarioGreeting 根据情景 ID 和语言获取对应的首句引导。
+// 支持系统预置情景和用户自建情景。
+// customGreetings: 用户自建情景的首句引导映射表（scenarioID → greeting），可为 nil
 // 返回空字符串表示无此情景或不需要引导（自由对话）。
-func GetScenarioGreeting(scenarioID, language string) string {
+func GetScenarioGreeting(scenarioID, language string, customGreetings map[string]string) string {
 	if scenarioID == "" || scenarioID == "free_chat" {
 		return ""
 	}
-	p, ok := scenarioPrompts[scenarioID]
-	if !ok {
-		return ""
+
+	// 1. 优先查找系统预置情景
+	if p, ok := scenarioPrompts[scenarioID]; ok {
+		switch {
+		case strings.HasPrefix(language, "zh"):
+			return p.GreetingZH
+		case strings.HasPrefix(language, "ja"):
+			return p.GreetingJA
+		default:
+			return p.GreetingEN
+		}
 	}
-	switch {
-	case strings.HasPrefix(language, "zh"):
-		return p.GreetingZH
-	case strings.HasPrefix(language, "ja"):
-		return p.GreetingJA
-	default:
-		return p.GreetingEN
+
+	// 2. 查找用户自建情景
+	if customGreetings != nil {
+		if customGreeting, ok := customGreetings[scenarioID]; ok {
+			return customGreeting
+		}
 	}
+
+	// 3. 默认空字符串
+	return ""
 }

backend/internal/ai/tts/mimo.go

@@ -11,6 +11,8 @@ import (
 	"strings"
 	"time"
 
+	"github.com/hhs/camtalk/internal/trace"
+	"github.com/hhs/camtalk/internal/util"
 	"go.uber.org/zap"
 )
 
@@ -108,7 +110,11 @@ func (m *MiMoService) SynthesizeStream(ctx context.Context, textStream <-chan st
 
 			audio, err := m.synthesize(ctx, text, voice)
 			if err != nil {
-				m.logger.Warnw("mimo tts: synthesize failed", "error", err, "text", text)
+				log := trace.FromContext(ctx)
+				log.Warnw("mimo tts: synthesize failed",
+					"error", err,
+					"text_len", len(text),
+					"text_preview", util.Truncate(text, 100))
 				// 静默跳过，不中断整个流
 				continue
 			}

backend/internal/ai/tts/openai.go

@@ -9,6 +9,8 @@ import (
 	"net/http"
 	"time"
 
+	"github.com/hhs/camtalk/internal/trace"
+	"github.com/hhs/camtalk/internal/util"
 	"go.uber.org/zap"
 )
 
@@ -81,7 +83,11 @@ func (o *OpenAIService) SynthesizeStream(ctx context.Context, textStream <-chan
 
 			audio, err := o.synthesize(ctx, text, voice, speed)
 			if err != nil {
-				o.logger.Warnw("tts: synthesize failed", "error", err, "text", text)
+				log := trace.FromContext(ctx)
+				log.Warnw("tts: synthesize failed",
+					"error", err,
+					"text_len", len(text),
+					"text_preview", util.Truncate(text, 100))
 				// 静默跳过，不中断整个流
 				continue
 			}

backend/internal/api/auth.go

@@ -9,6 +9,7 @@ import (
 	"github.com/hhs/camtalk/internal/auth"
 	apperr "github.com/hhs/camtalk/internal/errors"
 	"github.com/hhs/camtalk/internal/ratelimit"
+	"github.com/hhs/camtalk/internal/trace"
 )
 
 // AuthHandler 提供认证相关的 REST 端点。
@@ -53,6 +54,9 @@ func (h *AuthHandler) RegisterRoutes(rg *gin.RouterGroup, limiter ratelimit.Limi
 
 // Register POST /api/auth/register — 用户注册。
 func (h *AuthHandler) Register(c *gin.Context) {
+	log := trace.FromContext(c.Request.Context())
+	clientIP := c.ClientIP()
+
 	var req auth.RegisterRequest
 	if err := c.ShouldBindJSON(&req); err != nil {
 		c.JSON(http.StatusBadRequest, gin.H{
@@ -72,15 +76,25 @@ func (h *AuthHandler) Register(c *gin.Context) {
 
 	resp, err := h.authService.Register(c.Request.Context(), req)
 	if err != nil {
+		log.Warnw("register failed",
+			"username", req.Username,
+			"client_ip", clientIP,
+			"error", err)
 		handleAuthError(c, err)
 		return
 	}
 
+	log.Infow("register success",
+		"username", req.Username,
+		"client_ip", clientIP)
 	c.JSON(http.StatusCreated, resp)
 }
 
 // Login POST /api/auth/login — 用户登录。
 func (h *AuthHandler) Login(c *gin.Context) {
+	log := trace.FromContext(c.Request.Context())
+	clientIP := c.ClientIP()
+
 	var req auth.LoginRequest
 	if err := c.ShouldBindJSON(&req); err != nil {
 		c.JSON(http.StatusBadRequest, gin.H{
@@ -100,15 +114,24 @@ func (h *AuthHandler) Login(c *gin.Context) {
 
 	resp, err := h.authService.Login(c.Request.Context(), req)
 	if err != nil {
+		log.Warnw("login failed",
+			"username", req.Username,
+			"client_ip", clientIP,
+			"error", err)
 		handleAuthError(c, err)
 		return
 	}
 
+	log.Infow("login success",
+		"username", req.Username,
+		"client_ip", clientIP)
 	c.JSON(http.StatusOK, resp)
 }
 
 // Refresh POST /api/auth/refresh — 刷新令牌。
 func (h *AuthHandler) Refresh(c *gin.Context) {
+	log := trace.FromContext(c.Request.Context())
+
 	var req auth.RefreshRequest
 	if err := c.ShouldBindJSON(&req); err != nil {
 		c.JSON(http.StatusBadRequest, gin.H{
@@ -128,15 +151,21 @@ func (h *AuthHandler) Refresh(c *gin.Context) {
 
 	resp, err := h.authService.Refresh(c.Request.Context(), req)
 	if err != nil {
+		log.Warnw("token refresh failed",
+			"client_ip", c.ClientIP(),
+			"error", err)
 		handleAuthError(c, err)
 		return
 	}
 
+	log.Infow("token refresh success",
+		"client_ip", c.ClientIP())
 	c.JSON(http.StatusOK, resp)
 }
 
 // Logout POST /api/auth/logout — 登出（需要认证）。
 func (h *AuthHandler) Logout(c *gin.Context) {
+	log := trace.FromContext(c.Request.Context())
 	userID := c.GetString(auth.ContextKeyUserID)
 
 	var req struct {
@@ -159,6 +188,9 @@ func (h *AuthHandler) Logout(c *gin.Context) {
 	}
 
 	if err := h.authService.Logout(c.Request.Context(), userID, req.RefreshToken); err != nil {
+		log.Errorw("logout failed",
+			"user_id", userID,
+			"error", err)
 		c.JSON(http.StatusInternalServerError, gin.H{
 			"code":    apperr.CodeInternalError,
 			"message": "failed to logout",
@@ -166,6 +198,8 @@ func (h *AuthHandler) Logout(c *gin.Context) {
 		return
 	}
 
+	log.Infow("logout success",
+		"user_id", userID)
 	c.JSON(http.StatusOK, gin.H{
 		"message": "logged out successfully",
 	})
@@ -174,8 +208,8 @@ func (h *AuthHandler) Logout(c *gin.Context) {
 // validateCredentials 校验用户名和密码格式。
 // 返回空字符串表示校验通过，否则返回错误描述。
 func validateCredentials(username, password string) string {
-	if len(username) < 3 || len(username) > 64 {
-		return "username must be 3-64 characters"
+	if len(username) > 64 {
+		return "username must not exceed 64 characters"
 	}
 	if len(password) < 8 || len(password) > 72 {
 		return "password must be 8-72 characters"

backend/internal/api/conversation.go

@@ -13,6 +13,7 @@ import (
 	"github.com/hhs/camtalk/internal/models"
 	"github.com/hhs/camtalk/internal/session"
 	"github.com/hhs/camtalk/internal/store"
+	"github.com/hhs/camtalk/internal/trace"
 )
 
 // ConversationHandler 提供对话相关的 REST 端点。
@@ -47,6 +48,7 @@ func (h *ConversationHandler) RegisterRoutes(rg *gin.RouterGroup) {
 
 // List GET /api/conversations — 获取当前用户的对话列表。
 func (h *ConversationHandler) List(c *gin.Context) {
+	log := trace.FromContext(c.Request.Context())
 	userID := c.GetString(auth.ContextKeyUserID)
 
 	page, _ := strconv.Atoi(c.DefaultQuery("page", "1"))
@@ -61,6 +63,9 @@ func (h *ConversationHandler) List(c *gin.Context) {
 
 	summaries, total, err := h.sessionMgr.ListByUser(c.Request.Context(), userID, page, size)
 	if err != nil {
+		log.Errorw("list conversations failed",
+			"user_id", userID,
+			"error", err)
 		c.JSON(http.StatusInternalServerError, gin.H{
 			"code":    apperr.CodeInternalError,
 			"message": "failed to list conversations",
@@ -83,6 +88,7 @@ type CreateConversationRequest struct {
 
 // Create POST /api/conversations — 创建新对话。
 func (h *ConversationHandler) Create(c *gin.Context) {
+	log := trace.FromContext(c.Request.Context())
 	userID := c.GetString(auth.ContextKeyUserID)
 
 	var req CreateConversationRequest
@@ -95,6 +101,9 @@ func (h *ConversationHandler) Create(c *gin.Context) {
 
 	sessionID, err := h.sessionMgr.Create(c.Request.Context(), userID, cfg)
 	if err != nil {
+		log.Errorw("create conversation failed",
+			"user_id", userID,
+			"error", err)
 		c.JSON(http.StatusInternalServerError, gin.H{
 			"code":    apperr.CodeInternalError,
 			"message": "failed to create conversation",
@@ -104,6 +113,9 @@ func (h *ConversationHandler) Create(c *gin.Context) {
 
 	sess, err := h.sessionMgr.Get(c.Request.Context(), sessionID)
 	if err != nil {
+		log.Errorw("retrieve created conversation failed",
+			"session_id", sessionID,
+			"error", err)
 		c.JSON(http.StatusInternalServerError, gin.H{
 			"code":    apperr.CodeInternalError,
 			"message": "failed to retrieve created conversation",
@@ -111,6 +123,9 @@ func (h *ConversationHandler) Create(c *gin.Context) {
 		return
 	}
 
+	log.Infow("conversation created",
+		"conversation_id", sess.ID,
+		"user_id", userID)
 	c.JSON(http.StatusCreated, gin.H{
 		"id":          sess.ID,
 		"title":       sess.Title,
@@ -144,6 +159,7 @@ type UpdateTitleRequest struct {
 
 // UpdateTitle PATCH /api/conversations/:id — 更新对话标题。
 func (h *ConversationHandler) UpdateTitle(c *gin.Context) {
+	log := trace.FromContext(c.Request.Context())
 	sessionID := c.Param("id")
 
 	// 先校验归属
@@ -176,6 +192,9 @@ func (h *ConversationHandler) UpdateTitle(c *gin.Context) {
 			})
 			return
 		}
+		log.Errorw("update title failed",
+			"session_id", sessionID,
+			"error", err)
 		c.JSON(http.StatusInternalServerError, gin.H{
 			"code":    apperr.CodeInternalError,
 			"message": "failed to update title",
@@ -190,6 +209,7 @@ func (h *ConversationHandler) UpdateTitle(c *gin.Context) {
 
 // Delete DELETE /api/conversations/:id — 删除对话。
 func (h *ConversationHandler) Delete(c *gin.Context) {
+	log := trace.FromContext(c.Request.Context())
 	sessionID := c.Param("id")
 
 	// 先校验归属
@@ -205,6 +225,9 @@ func (h *ConversationHandler) Delete(c *gin.Context) {
 			})
 			return
 		}
+		log.Errorw("delete conversation failed",
+			"session_id", sessionID,
+			"error", err)
 		c.JSON(http.StatusInternalServerError, gin.H{
 			"code":    apperr.CodeInternalError,
 			"message": "failed to delete conversation",
@@ -221,6 +244,7 @@ func (h *ConversationHandler) Delete(c *gin.Context) {
 //   - limit: 返回消息数量上限，默认 50
 //   - before: 消息 ID 游标（用于分页），返回此 ID 之前的消息
 func (h *ConversationHandler) GetMessages(c *gin.Context) {
+	log := trace.FromContext(c.Request.Context())
 	sessionID := c.Param("id")
 
 	// 先校验归属
@@ -239,6 +263,9 @@ func (h *ConversationHandler) GetMessages(c *gin.Context) {
 	if h.msgRepo != nil {
 		messages, err := h.msgRepo.GetMessages(c.Request.Context(), sessionID, limit, beforeID)
 		if err != nil {
+			log.Errorw("get messages failed",
+				"session_id", sessionID,
+				"error", err)
 			c.JSON(http.StatusInternalServerError, gin.H{
 				"code":    apperr.CodeInternalError,
 				"message": "failed to get messages",
@@ -246,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,
@@ -263,6 +293,9 @@ func (h *ConversationHandler) GetMessages(c *gin.Context) {
 			})
 			return
 		}
+		log.Errorw("get messages failed",
+			"session_id", sessionID,
+			"error", err)
 		c.JSON(http.StatusInternalServerError, gin.H{
 			"code":    apperr.CodeInternalError,
 			"message": "failed to get messages",
@@ -284,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,

backend/internal/api/session.go

@@ -8,6 +8,7 @@ import (
 
 	"github.com/hhs/camtalk/internal/models"
 	"github.com/hhs/camtalk/internal/session"
+	"github.com/hhs/camtalk/internal/trace"
 )
 
 // SessionHandler 提供会话相关的 REST 端点。
@@ -27,6 +28,8 @@ type CreateSessionRequest struct {
 
 // CreateSession POST /api/sessions — 创建新会话。
 func (h *SessionHandler) CreateSession(c *gin.Context) {
+	log := trace.FromContext(c.Request.Context())
+
 	var req CreateSessionRequest
 	// 请求体可选，解析失败不报错（使用默认配置）
 	_ = c.ShouldBindJSON(&req)
@@ -38,6 +41,8 @@ func (h *SessionHandler) CreateSession(c *gin.Context) {
 
 	sessionID, err := h.sessionMgr.Create(c.Request.Context(), "", cfg)
 	if err != nil {
+		log.Errorw("create session failed",
+			"error", err)
 		c.JSON(http.StatusInternalServerError, gin.H{
 			"code":    "INTERNAL_ERROR",
 			"message": "failed to create session",
@@ -48,6 +53,9 @@ func (h *SessionHandler) CreateSession(c *gin.Context) {
 	// 获取创建后的会话以返回 created_at
 	sess, err := h.sessionMgr.Get(c.Request.Context(), sessionID)
 	if err != nil {
+		log.Errorw("retrieve created session failed",
+			"session_id", sessionID,
+			"error", err)
 		c.JSON(http.StatusInternalServerError, gin.H{
 			"code":    "INTERNAL_ERROR",
 			"message": "failed to retrieve created session",
@@ -55,6 +63,8 @@ func (h *SessionHandler) CreateSession(c *gin.Context) {
 		return
 	}
 
+	log.Infow("session created",
+		"session_id", sess.ID)
 	c.JSON(http.StatusCreated, gin.H{
 		"session_id": sess.ID,
 		"created_at": sess.CreatedAt,
@@ -63,6 +73,7 @@ func (h *SessionHandler) CreateSession(c *gin.Context) {
 
 // DestroySession DELETE /api/sessions/:id — 销毁会话。
 func (h *SessionHandler) DestroySession(c *gin.Context) {
+	log := trace.FromContext(c.Request.Context())
 	sessionID := c.Param("id")
 
 	err := h.sessionMgr.Destroy(c.Request.Context(), sessionID)
@@ -74,6 +85,9 @@ func (h *SessionHandler) DestroySession(c *gin.Context) {
 			})
 			return
 		}
+		log.Errorw("destroy session failed",
+			"session_id", sessionID,
+			"error", err)
 		c.JSON(http.StatusInternalServerError, gin.H{
 			"code":    "INTERNAL_ERROR",
 			"message": "failed to destroy session",
@@ -81,6 +95,8 @@ func (h *SessionHandler) DestroySession(c *gin.Context) {
 		return
 	}
 
+	log.Infow("session destroyed",
+		"session_id", sessionID)
 	c.Status(http.StatusNoContent)
 }
 

backend/internal/api/user_scenario_handler.go

@@ -0,0 +1,208 @@
+package api
+
+import (
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+
+	"github.com/hhs/camtalk/internal/logger"
+	"github.com/hhs/camtalk/internal/models"
+	"github.com/hhs/camtalk/internal/store"
+)
+
+const (
+	MaxScenariosPerUser = 20   // 每个用户最多 20 个自建情景
+	MaxPromptLength     = 2000 // Prompt 最大长度
+)
+
+// UserScenarioHandler 用户情景 API Handler。
+type UserScenarioHandler struct {
+	repo store.UserScenarioRepository
+}
+
+// NewUserScenarioHandler 创建用户情景 Handler。
+func NewUserScenarioHandler(repo store.UserScenarioRepository) *UserScenarioHandler {
+	return &UserScenarioHandler{repo: repo}
+}
+
+// List 获取用户的所有自建情景。
+// GET /api/scenarios
+func (h *UserScenarioHandler) List(c *gin.Context) {
+	userID, exists := c.Get("user_id")
+	if !exists {
+		c.JSON(http.StatusUnauthorized, gin.H{"error": "未登录"})
+		return
+	}
+
+	scenarios, err := h.repo.FindByUserID(c.Request.Context(), userID.(string))
+	if err != nil {
+		logger.Log.Errorw("查询用户情景失败", "user_id", userID, "error", err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "查询失败"})
+		return
+	}
+
+	if scenarios == nil {
+		scenarios = []*models.UserScenario{}
+	}
+
+	c.JSON(http.StatusOK, models.UserScenarioListResponse{
+		Scenarios: scenarios,
+		Total:     len(scenarios),
+	})
+}
+
+// Create 创建用户情景。
+// POST /api/scenarios
+func (h *UserScenarioHandler) Create(c *gin.Context) {
+	userID, exists := c.Get("user_id")
+	if !exists {
+		c.JSON(http.StatusUnauthorized, gin.H{"error": "未登录"})
+		return
+	}
+
+	var req models.CreateUserScenarioRequest
+	if err := c.ShouldBindJSON(&req); err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "参数错误: " + err.Error()})
+		return
+	}
+
+	// 检查用户是否已达上限
+	count, err := h.repo.CountByUserID(c.Request.Context(), userID.(string))
+	if err != nil {
+		logger.Log.Errorw("统计用户情景数量失败", "user_id", userID, "error", err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "创建失败"})
+		return
+	}
+	if count >= MaxScenariosPerUser {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "已达创建上限（最多 20 个）"})
+		return
+	}
+
+	// 创建情景
+	scenario := &models.UserScenario{
+		UserID:      userID.(string),
+		Name:        req.Name,
+		Icon:        req.Icon,
+		Description: req.Description,
+		Prompt:      req.Prompt,
+		Greeting:    req.Greeting,
+		Language:    req.Language,
+	}
+
+	if err := h.repo.Create(c.Request.Context(), scenario); err != nil {
+		logger.Log.Errorw("创建用户情景失败", "user_id", userID, "error", err)
+		if err.Error() == "duplicate key value violates unique constraint" {
+			c.JSON(http.StatusBadRequest, gin.H{"error": "情景名称已存在"})
+			return
+		}
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "创建失败"})
+		return
+	}
+
+	logger.Log.Infow("创建用户情景成功", "user_id", userID, "scenario_id", scenario.ID)
+	c.JSON(http.StatusCreated, scenario)
+}
+
+// Get 获取单个情景详情。
+// GET /api/scenarios/:id
+func (h *UserScenarioHandler) Get(c *gin.Context) {
+	userID, exists := c.Get("user_id")
+	if !exists {
+		c.JSON(http.StatusUnauthorized, gin.H{"error": "未登录"})
+		return
+	}
+
+	scenarioID := c.Param("id")
+	scenario, err := h.repo.FindByIDAndUserID(c.Request.Context(), scenarioID, userID.(string))
+	if err != nil {
+		logger.Log.Errorw("查询用户情景失败", "user_id", userID, "scenario_id", scenarioID, "error", err)
+		c.JSON(http.StatusNotFound, gin.H{"error": "情景不存在或无权限"})
+		return
+	}
+
+	c.JSON(http.StatusOK, scenario)
+}
+
+// Update 更新用户情景。
+// PATCH /api/scenarios/:id
+func (h *UserScenarioHandler) Update(c *gin.Context) {
+	userID, exists := c.Get("user_id")
+	if !exists {
+		c.JSON(http.StatusUnauthorized, gin.H{"error": "未登录"})
+		return
+	}
+
+	scenarioID := c.Param("id")
+
+	// 查询并校验所有权
+	scenario, err := h.repo.FindByIDAndUserID(c.Request.Context(), scenarioID, userID.(string))
+	if err != nil {
+		logger.Log.Errorw("查询用户情景失败", "user_id", userID, "scenario_id", scenarioID, "error", err)
+		c.JSON(http.StatusNotFound, gin.H{"error": "情景不存在或无权限"})
+		return
+	}
+
+	var req models.UpdateUserScenarioRequest
+	if err := c.ShouldBindJSON(&req); err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "参数错误: " + err.Error()})
+		return
+	}
+
+	// 更新字段
+	if req.Name != nil {
+		scenario.Name = *req.Name
+	}
+	if req.Icon != nil {
+		scenario.Icon = *req.Icon
+	}
+	if req.Description != nil {
+		scenario.Description = *req.Description
+	}
+	if req.Prompt != nil {
+		scenario.Prompt = *req.Prompt
+	}
+	if req.Greeting != nil {
+		scenario.Greeting = *req.Greeting
+	}
+	if req.Language != nil {
+		scenario.Language = *req.Language
+	}
+
+	if err := h.repo.Update(c.Request.Context(), scenario); err != nil {
+		logger.Log.Errorw("更新用户情景失败", "user_id", userID, "scenario_id", scenarioID, "error", err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "更新失败"})
+		return
+	}
+
+	logger.Log.Infow("更新用户情景成功", "user_id", userID, "scenario_id", scenarioID)
+	c.JSON(http.StatusOK, scenario)
+}
+
+// Delete 删除用户情景。
+// DELETE /api/scenarios/:id
+func (h *UserScenarioHandler) Delete(c *gin.Context) {
+	userID, exists := c.Get("user_id")
+	if !exists {
+		c.JSON(http.StatusUnauthorized, gin.H{"error": "未登录"})
+		return
+	}
+
+	scenarioID := c.Param("id")
+
+	// 查询并校验所有权
+	_, err := h.repo.FindByIDAndUserID(c.Request.Context(), scenarioID, userID.(string))
+	if err != nil {
+		logger.Log.Errorw("查询用户情景失败", "user_id", userID, "scenario_id", scenarioID, "error", err)
+		c.JSON(http.StatusNotFound, gin.H{"error": "情景不存在或无权限"})
+		return
+	}
+
+	if err := h.repo.Delete(c.Request.Context(), scenarioID); err != nil {
+		logger.Log.Errorw("删除用户情景失败", "user_id", userID, "scenario_id", scenarioID, "error", err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "删除失败"})
+		return
+	}
+
+	logger.Log.Infow("删除用户情景成功", "user_id", userID, "scenario_id", scenarioID)
+	c.Status(http.StatusNoContent)
+}

backend/internal/auth/middleware.go

@@ -5,6 +5,8 @@ import (
 	"strings"
 
 	"github.com/gin-gonic/gin"
+
+	"github.com/hhs/camtalk/internal/trace"
 )
 
 // contextKey 用于在 Gin context 中存储 Claims 的 key。
@@ -17,8 +19,13 @@ const (
 // 校验成功后将 user_id 和 username 写入 Gin Context。
 func AuthMiddleware(tokenMgr *TokenManager) gin.HandlerFunc {
 	return func(c *gin.Context) {
+		log := trace.FromContext(c.Request.Context())
 		authHeader := c.GetHeader("Authorization")
 		if authHeader == "" {
+			log.Warnw("auth rejected",
+				"client_ip", c.ClientIP(),
+				"path", c.Request.URL.Path,
+				"reason", "missing authorization header")
 			c.AbortWithStatusJSON(http.StatusUnauthorized, gin.H{
 				"code":    "INVALID_TOKEN",
 				"message": "missing authorization header",
@@ -29,6 +36,10 @@ func AuthMiddleware(tokenMgr *TokenManager) gin.HandlerFunc {
 		// 提取 Bearer token
 		parts := strings.SplitN(authHeader, " ", 2)
 		if len(parts) != 2 || !strings.EqualFold(parts[0], "Bearer") {
+			log.Warnw("auth rejected",
+				"client_ip", c.ClientIP(),
+				"path", c.Request.URL.Path,
+				"reason", "invalid authorization format")
 			c.AbortWithStatusJSON(http.StatusUnauthorized, gin.H{
 				"code":    "INVALID_TOKEN",
 				"message": "invalid authorization format",
@@ -38,6 +49,11 @@ func AuthMiddleware(tokenMgr *TokenManager) gin.HandlerFunc {
 
 		claims, err := tokenMgr.ValidateAccess(parts[1])
 		if err != nil {
+			log.Warnw("auth rejected",
+				"client_ip", c.ClientIP(),
+				"path", c.Request.URL.Path,
+				"reason", "invalid or expired token",
+				"error", err)
 			c.AbortWithStatusJSON(http.StatusUnauthorized, gin.H{
 				"code":    "INVALID_TOKEN",
 				"message": "invalid or expired token",

backend/internal/eino/adapter.go

@@ -8,20 +8,12 @@ import (
 
 	"github.com/cloudwego/eino/compose"
 
-	"github.com/hhs/camtalk/internal/logger"
 	"github.com/hhs/camtalk/internal/models"
 	"github.com/hhs/camtalk/internal/orchestrator"
 	"github.com/hhs/camtalk/internal/session"
+	"github.com/hhs/camtalk/internal/trace"
 )
 
-// ctxKeySessionID sessionID 的 context key。
-type ctxKeySessionID struct{}
-
-// WithSessionID 将 sessionID 注入 context。
-func WithSessionID(ctx context.Context, sessionID string) context.Context {
-	return context.WithValue(ctx, ctxKeySessionID{}, sessionID)
-}
-
 // EinoOrchestrator 实现 orchestrator.Orchestrator 接口。
 // 将 Eino Graph 包装为现有接口，WS Handler 几乎不用改。
 type EinoOrchestrator struct {
@@ -48,19 +40,19 @@ func (e *EinoOrchestrator) ProcessQuery(
 	req models.WsQuery,
 	sender orchestrator.Sender,
 ) error {
-	log := logger.Log
+	log := trace.FromContext(ctx)
 	startTime := time.Now()
 
 	// 1. 设置活跃请求
 	if err := e.sessionMgr.SetActiveRequest(ctx, sessionID, req.RequestID); err != nil {
-		log.Errorw("设置活跃请求失败", "error", err)
+		return err
 	}
 	defer e.sessionMgr.ClearActiveRequest(ctx, sessionID)
 
 	// 2. 获取会话配置
 	sess, err := e.sessionMgr.Get(ctx, sessionID)
 	if err != nil {
-		log.Errorw("获取会话失败", "error", err)
+		log.Errorw("get session failed", "error", err)
 		sender.SendError(models.WsError{
 			Type:      "error",
 			RequestID: req.RequestID,
@@ -75,7 +67,7 @@ func (e *EinoOrchestrator) ProcessQuery(
 	if req.Text == "" && req.Audio != "" {
 		audioData, err = base64.StdEncoding.DecodeString(req.Audio)
 		if err != nil {
-			log.Errorw("音频解码失败", "error", err)
+			log.Errorw("audio decode failed", "error", err)
 			sender.SendError(models.WsError{
 				Type:      "error",
 				RequestID: req.RequestID,
@@ -90,7 +82,7 @@ func (e *EinoOrchestrator) ProcessQuery(
 	if req.Image != "" {
 		imageData, err = base64.StdEncoding.DecodeString(req.Image)
 		if err != nil {
-			log.Errorw("图片解码失败", "error", err)
+			log.Errorw("image decode failed", "error", err)
 			sender.SendError(models.WsError{
 				Type:      "error",
 				RequestID: req.RequestID,
@@ -107,7 +99,7 @@ func (e *EinoOrchestrator) ProcessQuery(
 	// 5. 注入 context 值（供 Callback 和 Lambda 节点使用）
 	ctx = WithSender(ctx, sender)
 	ctx = WithRequestID(ctx, req.RequestID)
-	ctx = WithSessionID(ctx, sessionID)
+	ctx = trace.WithSessionID(ctx, sessionID)
 	ctx = WithStartTime(ctx, startTime)
 
 	// 创建 State 并从 input 复制元数据
@@ -119,12 +111,13 @@ func (e *EinoOrchestrator) ProcessQuery(
 	state.Language = input.Language
 	state.DetailLevel = sess.Config.DetailLevel
 	state.TTSEnabled = input.TTSEnabled
+	state.UserID = input.UserID
 	ctx = WithPipelineState(ctx, state)
 
 	// 6. 调用 Graph（Stream 模式 + 运行时 Callback）
 	streamReader, err := e.graph.Runnable.Stream(ctx, input, e.callbacks)
 	if err != nil {
-		log.Errorw("Graph Stream 启动失败", "error", err)
+		log.Errorw("graph stream start failed", "error", err)
 		sender.SendError(models.WsError{
 			Type:      "error",
 			RequestID: req.RequestID,
@@ -142,7 +135,7 @@ func (e *EinoOrchestrator) ProcessQuery(
 			if err == io.EOF {
 				break
 			}
-			log.Errorw("Graph Stream 消费错误", "error", err)
+			log.Errorw("graph stream consume error", "error", err)
 			break
 		}
 		output = o
@@ -158,7 +151,7 @@ func (e *EinoOrchestrator) ProcessQuery(
 			Role:    "user",
 			Content: userText,
 		}); err != nil {
-			log.Errorw("追加用户消息到历史失败", "session", sessionID, "error", err)
+			log.Errorw("append user message failed", "error", err)
 		}
 	}
 
@@ -168,15 +161,12 @@ func (e *EinoOrchestrator) ProcessQuery(
 			Role:    "assistant",
 			Content: output.FullResponse,
 		}); err != nil {
-			log.Errorw("追加助手消息到历史失败", "session", sessionID, "error", err)
+			log.Errorw("append assistant message failed", "error", err)
 		}
 	}
 
 	latency := time.Since(startTime).Milliseconds()
-	log.Infow("Eino 编排完成",
-		"request_id", req.RequestID,
-		"latency_ms", latency,
-		"session_id", sessionID)
+	log.Infow("eino pipeline completed", "latency_ms", latency)
 
 	return nil
 }

backend/internal/eino/callback.go

@@ -9,14 +9,13 @@ import (
 	"github.com/cloudwego/eino/schema"
 	callbacksHelper "github.com/cloudwego/eino/utils/callbacks"
 
-	"github.com/hhs/camtalk/internal/logger"
 	"github.com/hhs/camtalk/internal/models"
 	"github.com/hhs/camtalk/internal/orchestrator"
+	"github.com/hhs/camtalk/internal/trace"
 )
 
 // context key 类型，避免与其他包冲突。
 type ctxKeySender struct{}
-type ctxKeyRequestID struct{}
 type ctxKeyState struct{}
 
 // WithSender 将 Sender 注入 context。
@@ -24,9 +23,9 @@ func WithSender(ctx context.Context, sender orchestrator.Sender) context.Context
 	return context.WithValue(ctx, ctxKeySender{}, sender)
 }
 
-// WithRequestID 将 requestID 注入 context。
+// WithRequestID 将 requestID 注入 context（使用 trace 包）。
 func WithRequestID(ctx context.Context, requestID string) context.Context {
-	return context.WithValue(ctx, ctxKeyRequestID{}, requestID)
+	return trace.WithRequestID(ctx, requestID)
 }
 
 // WithPipelineState 将 PipelineState 注入 context。
@@ -40,10 +39,9 @@ func senderFromCtx(ctx context.Context) orchestrator.Sender {
 	return s
 }
 
-// requestIDFromCtx 从 context 获取 requestID。
+// requestIDFromCtx 从 context 获取 requestID（使用 trace 包）。
 func requestIDFromCtx(ctx context.Context) string {
-	s, _ := ctx.Value(ctxKeyRequestID{}).(string)
-	return s
+	return trace.GetRequestID(ctx)
 }
 
 // stateFromCtx 从 context 获取 PipelineState。
@@ -62,7 +60,7 @@ func BuildCallbackHandler() callbacks.Handler {
 	return callbacksHelper.NewHandlerHelper().
 		ChatModel(&callbacksHelper.ModelCallbackHandler{
 			OnEndWithStreamOutput: func(ctx context.Context, info *callbacks.RunInfo, output *schema.StreamReader[*model.CallbackOutput]) context.Context {
-				log := logger.Log
+				log := trace.FromContext(ctx)
 				sender := senderFromCtx(ctx)
 				requestID := requestIDFromCtx(ctx)
 				state := stateFromCtx(ctx)

backend/internal/eino/graph.go

@@ -13,6 +13,7 @@ import (
 	"github.com/hhs/camtalk/internal/logger"
 	"github.com/hhs/camtalk/internal/models"
 	"github.com/hhs/camtalk/internal/session"
+	"github.com/hhs/camtalk/internal/store"
 )
 
 const (
@@ -42,6 +43,7 @@ func NewPipelineGraph(
 	sttService stt.Service,
 	ttsService tts.Service,
 	sessionMgr session.Manager,
+	scenarioRepo store.UserScenarioRepository,
 ) (*PipelineGraph, error) {
 	log := logger.Log
 
@@ -68,7 +70,7 @@ func NewPipelineGraph(
 	maxHistory := cfg.Session.MaxHistory
 
 	_ = g.AddLambdaNode(nodeSTT, NewSTTLambda(sttService))
-	_ = g.AddLambdaNode(nodeHistory, NewHistoryLambda(sessionMgr.GetHistory, maxHistory))
+	_ = g.AddLambdaNode(nodeHistory, NewHistoryLambda(sessionMgr.GetHistory, scenarioRepo, maxHistory))
 	_ = g.AddChatModelNode(nodeLLM, chatModel)
 	_ = g.AddLambdaNode(nodeMessageToString, NewMessageToStringLambda())
 	_ = g.AddLambdaNode(nodeSplitter, NewSplitterLambda())
@@ -112,5 +114,6 @@ func buildPipelineInput(req models.WsQuery, sessionID string, sess *models.Sessi
 		Language:   sess.Config.Language,
 		Scenario:   sess.Config.Scenario,
 		TTSEnabled: sess.Config.TTSEnabled,
+		UserID:     sess.UserID,
 	}
 }

backend/internal/eino/graph_test.go

@@ -13,6 +13,7 @@ import (
 	"github.com/hhs/camtalk/internal/ai/tts"
 	"github.com/hhs/camtalk/internal/models"
 	"github.com/hhs/camtalk/internal/orchestrator"
+	"github.com/hhs/camtalk/internal/trace"
 )
 
 // --- Mock STT Service ---
@@ -176,7 +177,7 @@ func TestContextInjection(t *testing.T) {
 	sender := &mockSender{}
 	ctx = WithSender(ctx, sender)
 	ctx = WithRequestID(ctx, "req-123")
-	ctx = WithSessionID(ctx, "sess-456")
+	ctx = trace.WithSessionID(ctx, "sess-456")
 	ctx = WithStartTime(ctx, time.Now())
 	ctx = WithPipelineState(ctx, genLocalState(ctx))
 
@@ -214,7 +215,7 @@ func TestNewHistoryLambda_ReturnsNonNil(t *testing.T) {
 	fetcher := func(ctx context.Context, sessionID string, limit int) ([]models.Message, error) {
 		return nil, nil
 	}
-	lambda := NewHistoryLambda(fetcher, 10)
+	lambda := NewHistoryLambda(fetcher, nil, 10)
 	require.NotNil(t, lambda)
 }
 

backend/internal/eino/nodes_done.go

@@ -6,8 +6,8 @@ import (
 
 	"github.com/cloudwego/eino/compose"
 
-	"github.com/hhs/camtalk/internal/logger"
 	"github.com/hhs/camtalk/internal/models"
+	"github.com/hhs/camtalk/internal/trace"
 )
 
 // ctxKeyStartTime 请求开始时间的 context key。
@@ -33,7 +33,7 @@ func latencyFromCtx(ctx context.Context) int64 {
 // 历史消息追加由适配器负责（避免重复写入）。
 func NewDoneLambda(defaultModel string) *compose.Lambda {
 	return compose.InvokableLambda(func(ctx context.Context, _ struct{}) (PipelineOutput, error) {
-		log := logger.Log
+		log := trace.FromContext(ctx)
 		sender := senderFromCtx(ctx)
 		state := stateFromCtx(ctx)
 
@@ -70,13 +70,11 @@ func NewDoneLambda(defaultModel string) *compose.Lambda {
 				}
 			}
 			if err := sender.SendLLMDone(done); err != nil {
-				log.Errorw("发送 llm_done 失败", "error", err)
+				log.Errorw("send llm_done failed", "error", err)
 			}
 		}
 
-		log.Infow("查询处理完成",
-			"request_id", requestID,
-			"response_length", len(fullResponse))
+		log.Infow("query processing completed", "response_length", len(fullResponse))
 
 		return PipelineOutput{
 			TranscribedText: transcribedText,

backend/internal/eino/nodes_history.go

@@ -8,8 +8,9 @@ import (
 	"github.com/cloudwego/eino/schema"
 
 	"github.com/hhs/camtalk/internal/ai/llm"
-	"github.com/hhs/camtalk/internal/logger"
 	"github.com/hhs/camtalk/internal/models"
+	"github.com/hhs/camtalk/internal/store"
+	"github.com/hhs/camtalk/internal/trace"
 )
 
 // NewHistoryLambda 创建历史组装 Lambda 节点。
@@ -17,9 +18,13 @@ import (
 //
 // 从 PipelineState 读取请求元数据（SessionID、Scenario、ImageData 等），
 // 构建系统提示词，组装历史消息和当前用户输入（含多模态图片）。
-func NewHistoryLambda(historyFetcher func(ctx context.Context, sessionID string, limit int) ([]models.Message, error), maxHistory int) *compose.Lambda {
+func NewHistoryLambda(
+	historyFetcher func(ctx context.Context, sessionID string, limit int) ([]models.Message, error),
+	scenarioRepo store.UserScenarioRepository,
+	maxHistory int,
+) *compose.Lambda {
 	return compose.InvokableLambda(func(ctx context.Context, sttOut STTOutput) ([]*schema.Message, error) {
-		log := logger.Log
+		log := trace.FromContext(ctx)
 
 		// 从 State 读取请求元数据
 		state := stateFromCtx(ctx)
@@ -34,10 +39,31 @@ func NewHistoryLambda(historyFetcher func(ctx context.Context, sessionID string,
 		scenario := state.Scenario
 		detailLevel := state.DetailLevel
 		language := sttOut.Language
+		userID := state.UserID
 		state.mu.Unlock()
 
-		// 构建系统提示词
-		scenarioPrompt := llm.GetScenarioPrompt(scenario, language)
+		// 加载用户自建情景（如果有 userID 和 scenarioRepo）
+		var customScenarios map[string]string
+		var customGreetings map[string]string
+		if userID != "" && scenarioRepo != nil {
+			scenarios, err := scenarioRepo.FindByUserID(ctx, userID)
+			if err != nil {
+				log.Warnw("load user scenarios failed", "user_id", userID, "error", err)
+			} else if len(scenarios) > 0 {
+				customScenarios = make(map[string]string, len(scenarios))
+				customGreetings = make(map[string]string, len(scenarios))
+				for _, s := range scenarios {
+					customScenarios[s.ID] = s.Prompt
+					if s.Greeting != "" {
+						customGreetings[s.ID] = s.Greeting
+					}
+				}
+				log.Debugw("loaded user scenarios", "user_id", userID, "count", len(scenarios))
+			}
+		}
+
+		// 构建系统提示词（支持用户自建情景）
+		scenarioPrompt := llm.GetScenarioPrompt(scenario, language, customScenarios)
 		systemPrompt := llm.BuildSystemPrompt(language, detailLevel, scenarioPrompt)
 
 		// 构建 system message（仅文本，多模态内容只能放在 user 角色）
@@ -52,7 +78,7 @@ func NewHistoryLambda(historyFetcher func(ctx context.Context, sessionID string,
 		if historyFetcher != nil && sessionID != "" {
 			history, err := historyFetcher(ctx, sessionID, maxHistory)
 			if err != nil {
-				log.Warnw("获取历史消息失败，继续处理", "error", err, "request_id", requestID)
+				log.Warnw("fetch history failed, continuing", "error", err, "request_id", requestID)
 			} else {
 				for _, msg := range history {
 					messages = append(messages, &schema.Message{
@@ -95,8 +121,7 @@ func NewHistoryLambda(historyFetcher func(ctx context.Context, sessionID string,
 			})
 		}
 
-		log.Infow("历史组装完成",
-			"request_id", requestID,
+		log.Debugw("history assembled",
 			"message_count", len(messages),
 			"has_image", len(imageData) > 0,
 			"scenario", scenario)

backend/internal/eino/nodes_stt.go

@@ -8,8 +8,9 @@ import (
 	"github.com/cloudwego/eino/compose"
 
 	"github.com/hhs/camtalk/internal/ai/stt"
-	"github.com/hhs/camtalk/internal/logger"
 	"github.com/hhs/camtalk/internal/models"
+	"github.com/hhs/camtalk/internal/trace"
+	"github.com/hhs/camtalk/internal/util"
 )
 
 // NewSTTLambda 创建 STT Lambda 节点。
@@ -20,7 +21,7 @@ import (
 // 识别结果通过 Sender 发送 stt_result 到客户端。
 func NewSTTLambda(sttService stt.Service) *compose.Lambda {
 	return compose.InvokableLambda(func(ctx context.Context, input PipelineInput) (STTOutput, error) {
-		log := logger.Log
+		log := trace.FromContext(ctx)
 		sender := senderFromCtx(ctx)
 		requestID := requestIDFromCtx(ctx)
 
@@ -39,8 +40,9 @@ func NewSTTLambda(sttService stt.Service) *compose.Lambda {
 
 		// 文本输入模式：跳过 STT
 		if input.Text != "" {
-			log.Infow("使用文本输入，跳过 STT",
-				"request_id", requestID, "text", input.Text)
+			log.Debugw("text input mode, skipping stt",
+				"text_len", len(input.Text),
+				"text_preview", util.Truncate(input.Text, 50))
 
 			// 发送 stt_result 保持前端消息流一致性
 			if sender != nil {
@@ -50,7 +52,7 @@ func NewSTTLambda(sttService stt.Service) *compose.Lambda {
 					Text:      input.Text,
 					IsFinal:   true,
 				}); err != nil {
-					log.Errorw("发送 stt_result 失败", "error", err)
+					log.Errorw("send stt_result failed", "error", err)
 				}
 			}
 
@@ -73,8 +75,7 @@ func NewSTTLambda(sttService stt.Service) *compose.Lambda {
 			return STTOutput{}, fmt.Errorf("stt: no audio data provided")
 		}
 
-		log.Infow("开始语音识别",
-			"request_id", requestID, "audio_bytes", len(input.AudioData))
+		log.Debugw("stt recognition started", "audio_bytes", len(input.AudioData))
 
 		// 调用 STT 服务
 		text, err := sttService.Recognize(ctx, input.AudioData, stt.Options{
@@ -83,7 +84,7 @@ func NewSTTLambda(sttService stt.Service) *compose.Lambda {
 			Language:   input.Language,
 		})
 		if err != nil {
-			log.Errorw("语音识别失败", "error", err, "request_id", requestID)
+			log.Errorw("stt recognition failed", "error", err)
 			if sender != nil {
 				sender.SendError(models.WsError{
 					Type:      "error",
@@ -97,11 +98,13 @@ func NewSTTLambda(sttService stt.Service) *compose.Lambda {
 
 		// STT 返回空文本
 		if strings.TrimSpace(text) == "" {
-			log.Infow("语音识别结果为空", "request_id", requestID)
+			log.Infow("stt returned empty text")
 			text = "（未识别到语音）"
 		}
 
-		log.Infow("语音识别完成", "request_id", requestID, "text", text)
+		log.Debugw("stt recognition completed",
+			"text_len", len(text),
+			"text_preview", util.Truncate(text, 50))
 
 		// 发送 stt_result
 		if sender != nil {
@@ -111,7 +114,7 @@ func NewSTTLambda(sttService stt.Service) *compose.Lambda {
 				Text:      text,
 				IsFinal:   true,
 			}); err != nil {
-				log.Errorw("发送 stt_result 失败", "error", err)
+				log.Errorw("send stt_result failed", "error", err)
 			}
 		}
 

backend/internal/eino/nodes_tts.go

@@ -9,8 +9,8 @@ import (
 	"github.com/cloudwego/eino/schema"
 
 	"github.com/hhs/camtalk/internal/ai/tts"
-	"github.com/hhs/camtalk/internal/logger"
 	"github.com/hhs/camtalk/internal/models"
+	"github.com/hhs/camtalk/internal/trace"
 )
 
 // NewTTSLambda 创建 TTS Transform Lambda 节点。
@@ -26,7 +26,7 @@ func NewTTSLambda(ttsService tts.Service, ttsVoice string, ttsSpeed float64, tts
 			defer sw.Close()
 			defer input.Close()
 
-			log := logger.Log
+			log := trace.FromContext(ctx)
 			sender := senderFromCtx(ctx)
 			requestID := requestIDFromCtx(ctx)
 
@@ -48,7 +48,7 @@ func NewTTSLambda(ttsService tts.Service, ttsVoice string, ttsSpeed float64, tts
 					if err == io.EOF {
 						break
 					}
-					log.Errorw("TTS: stream recv error", "error", err, "request_id", requestID)
+					log.Errorw("TTS: stream recv error", "error", err)
 					break
 				}
 				if sentence != "" {
@@ -61,7 +61,7 @@ func NewTTSLambda(ttsService tts.Service, ttsVoice string, ttsSpeed float64, tts
 				return
 			}
 
-			log.Infow("开始 TTS 合成", "request_id", requestID, "sentence_count", len(sentences))
+			log.Infow("开始 TTS 合成", "sentence_count", len(sentences))
 
 			// 将句子数组转为 channel
 			sentenceCh := make(chan string, len(sentences))
@@ -78,7 +78,7 @@ func NewTTSLambda(ttsService tts.Service, ttsVoice string, ttsSpeed float64, tts
 				SampleRate: ttsSampleRate,
 			})
 			if err != nil {
-				log.Errorw("TTS 合成启动失败（已跳过）", "error", err, "request_id", requestID)
+				log.Errorw("TTS 合成启动失败（已跳过）", "error", err)
 				sw.Send(struct{}{}, nil)
 				return
 			}
@@ -87,7 +87,7 @@ func NewTTSLambda(ttsService tts.Service, ttsVoice string, ttsSpeed float64, tts
 			for chunk := range ttsStream {
 				select {
 				case <-ctx.Done():
-					log.Infow("TTS 流被中断", "request_id", requestID)
+					log.Debugw("tts stream interrupted")
 					sw.Send(struct{}{}, ctx.Err())
 					return
 				default:
@@ -107,7 +107,7 @@ func NewTTSLambda(ttsService tts.Service, ttsVoice string, ttsSpeed float64, tts
 				}
 			}
 
-			log.Infow("TTS 合成完成", "request_id", requestID)
+			log.Infow("TTS 合成完成")
 			sw.Send(struct{}{}, nil)
 		}()
 

backend/internal/eino/state.go

@@ -23,6 +23,7 @@ type PipelineState struct {
 	DetailLevel string
 	Language    string
 	TTSEnabled  bool
+	UserID      string // 新增：用户 ID，用于加载自建情景
 }
 
 // genLocalState 创建每请求的 PipelineState 实例。

backend/internal/eino/types.go

@@ -12,6 +12,7 @@ type PipelineInput struct {
 	Language   string // zh / en
 	Scenario   string // free_chat, interviewer, etc.
 	TTSEnabled bool
+	UserID     string // 用户 ID，用于加载自建情景
 }
 
 // PipelineOutput Graph 统一输出。

backend/internal/models/user_scenario.go

@@ -0,0 +1,43 @@
+package models
+
+import "time"
+
+// UserScenario 用户自建情景。
+type UserScenario struct {
+	ID          string    `json:"id"`
+	UserID      string    `json:"user_id"`
+	Name        string    `json:"name"`
+	Icon        string    `json:"icon"`
+	Description string    `json:"description"`
+	Prompt      string    `json:"prompt"`
+	Greeting    string    `json:"greeting,omitempty"`
+	Language    string    `json:"language"`
+	CreatedAt   time.Time `json:"created_at"`
+	UpdatedAt   time.Time `json:"updated_at"`
+}
+
+// CreateUserScenarioRequest 创建用户情景请求。
+type CreateUserScenarioRequest struct {
+	Name        string `json:"name" binding:"required,min=2,max=50"`
+	Icon        string `json:"icon,omitempty"`
+	Description string `json:"description,omitempty" binding:"omitempty,max=100"`
+	Prompt      string `json:"prompt" binding:"required,min=10,max=2000"`
+	Greeting    string `json:"greeting,omitempty" binding:"omitempty,max=500"`
+	Language    string `json:"language,omitempty"`
+}
+
+// UpdateUserScenarioRequest 更新用户情景请求。
+type UpdateUserScenarioRequest struct {
+	Name        *string `json:"name,omitempty" binding:"omitempty,min=2,max=50"`
+	Icon        *string `json:"icon,omitempty"`
+	Description *string `json:"description,omitempty" binding:"omitempty,max=100"`
+	Prompt      *string `json:"prompt,omitempty" binding:"omitempty,min=10,max=2000"`
+	Greeting    *string `json:"greeting,omitempty" binding:"omitempty,max=500"`
+	Language    *string `json:"language,omitempty"`
+}
+
+// UserScenarioListResponse 用户情景列表响应。
+type UserScenarioListResponse struct {
+	Scenarios []*UserScenario `json:"scenarios"`
+	Total     int             `json:"total"`
+}

backend/internal/ratelimit/middleware.go

@@ -5,6 +5,8 @@ import (
 	"net/http"
 
 	"github.com/gin-gonic/gin"
+
+	"github.com/hhs/camtalk/internal/trace"
 )
 
 // Middleware 返回 Gin 中间件，按 key 维度限流。
@@ -26,6 +28,13 @@ func Middleware(limiter Limiter, keyFunc func(*gin.Context) string) gin.HandlerF
 		allowed, retryAfter := limiter.Allow(c.Request.Context(), key)
 
 		if !allowed {
+			log := trace.FromContext(c.Request.Context())
+			log.Warnw("rate limited",
+				"client_ip", c.ClientIP(),
+				"path", c.Request.URL.Path,
+				"limit_key", key,
+				"retry_after_sec", int(retryAfter.Seconds()+0.5))
+
 			// 设置 Retry-After header（秒）
 			c.Header("Retry-After", fmt.Sprintf("%d", int(retryAfter.Seconds()+0.5)))
 

backend/internal/ratelimit/redis_bucket.go

@@ -7,6 +7,7 @@ import (
 	"time"
 
 	"github.com/hhs/camtalk/internal/config"
+	"github.com/hhs/camtalk/internal/trace"
 	"github.com/redis/go-redis/v9"
 )
 
@@ -72,6 +73,7 @@ func NewRedisLimiter(client *redis.Client, cfg config.RateLimitConfig) *RedisLim
 
 // Allow 实现 Limiter 接口。
 func (l *RedisLimiter) Allow(ctx context.Context, key string) (bool, time.Duration) {
+	log := trace.FromContext(ctx)
 	cfg := l.getBucketConfig(key)
 
 	now := float64(time.Now().UnixNano()) / 1e9 // 秒，浮点
@@ -81,6 +83,7 @@ func (l *RedisLimiter) Allow(ctx context.Context, key string) (bool, time.Durati
 		cfg.Capacity, cfg.Rate, now, ttl).Result()
 
 	if err != nil {
+		log.Errorw("rate limit check failed", "key", key, "error", err)
 		// Redis 错误时降级：允许请求（fail-open 策略）
 		return true, 0
 	}
@@ -100,6 +103,7 @@ func (l *RedisLimiter) Allow(ctx context.Context, key string) (bool, time.Durati
 	}
 
 	retryAfter := time.Duration(retryAfterSec*1000) * time.Millisecond
+	log.Warnw("rate limit triggered", "key", key, "retry_after_sec", retryAfterSec)
 	return false, retryAfter
 }
 

backend/internal/session/redis.go

@@ -10,8 +10,9 @@ import (
 	"github.com/google/uuid"
 	"github.com/redis/go-redis/v9"
 
-	"github.com/hhs/camtalk/internal/logger"
 	"github.com/hhs/camtalk/internal/models"
+	"github.com/hhs/camtalk/internal/trace"
+	"github.com/hhs/camtalk/internal/util"
 )
 
 // RedisManager 基于 Redis 的 SessionManager 实现。
@@ -87,7 +88,8 @@ func (m *RedisManager) CreateWithID(ctx context.Context, id string, userID strin
 		return "", fmt.Errorf("redis create session: %w", err)
 	}
 
-	logger.Log.Debugw("redis session created", "session", id, "user_id", userID)
+	log := trace.FromContext(ctx)
+	log.Debugw("redis session created", "session_id", id, "user_id", userID)
 	return id, nil
 }
 
@@ -96,8 +98,11 @@ const placeholderHistoryMark = "__placeholder__"
 
 // Get 获取会话。
 func (m *RedisManager) Get(ctx context.Context, sessionID string) (*models.Session, error) {
+	log := trace.FromContext(ctx)
+
 	vals, err := m.rdb.HGetAll(ctx, metaKey(sessionID)).Result()
 	if err != nil {
+		log.Errorw("redis get session failed", "session_id", sessionID, "error", err)
 		return nil, fmt.Errorf("redis get session: %w", err)
 	}
 	if len(vals) == 0 {
@@ -115,6 +120,7 @@ func (m *RedisManager) Get(ctx context.Context, sessionID string) (*models.Sessi
 	sess.Config.DetailLevel = vals["config.detail_level"]
 	sess.Config.Language = vals["config.language"]
 
+	log.Debugw("redis session retrieved", "session_id", sessionID)
 	return sess, nil
 }
 
@@ -150,7 +156,9 @@ func (m *RedisManager) UpdateConfig(ctx context.Context, sessionID string, patch
 
 	// 刷新 TTL
 	m.rdb.Expire(ctx, metaKey(sessionID), m.ttl)
-	logger.Log.Debugw("redis session config updated", "session", sessionID)
+
+	log := trace.FromContext(ctx)
+	log.Debugw("redis session config updated", "session_id", sessionID)
 	return nil
 }
 
@@ -170,7 +178,9 @@ func (m *RedisManager) UpdateTitle(ctx context.Context, sessionID string, title
 	}
 
 	m.rdb.Expire(ctx, metaKey(sessionID), m.ttl)
-	logger.Log.Debugw("redis session title updated", "session", sessionID, "title", title)
+
+	log := trace.FromContext(ctx)
+	log.Debugw("redis session title updated", "session_id", sessionID, "title", title)
 	return nil
 }
 
@@ -285,7 +295,11 @@ func (m *RedisManager) GetHistory(ctx context.Context, sessionID string, limit i
 		}
 		var msg models.Message
 		if err := json.Unmarshal([]byte(raw), &msg); err != nil {
-			logger.Log.Warnw("invalid history entry", "session", sessionID, "raw", raw)
+			log := trace.FromContext(ctx)
+			log.Warnw("invalid history entry",
+				"session_id", sessionID,
+				"raw_len", len(raw),
+				"raw_preview", util.Truncate(raw, 100))
 			continue
 		}
 		msgs = append(msgs, msg)
@@ -436,7 +450,8 @@ func (m *RedisManager) Destroy(ctx context.Context, sessionID string) error {
 		m.rdb.SRem(ctx, userSessKey(userID), sessionID)
 	}
 
-	logger.Log.Debugw("redis session destroyed", "session", sessionID)
+	log := trace.FromContext(ctx)
+	log.Debugw("redis session destroyed", "session_id", sessionID)
 	return nil
 }
 

backend/internal/store/cached_user.go

@@ -6,7 +6,7 @@ import (
 
 	"github.com/redis/go-redis/v9"
 
-	"github.com/hhs/camtalk/internal/logger"
+	"github.com/hhs/camtalk/internal/trace"
 )
 
 // Redis key 前缀。
@@ -83,7 +83,8 @@ func (r *CachedUserRepository) SaveRefreshToken(ctx context.Context, userID, tok
 	pipe.Set(ctx, key, userID, ttl)
 	pipe.SAdd(ctx, userRefreshKey(userID), tokenHash)
 	if _, err := pipe.Exec(ctx); err != nil {
-		logger.Log.Warnw("Redis cache write failed for refresh token", "error", err)
+		log := trace.FromContext(ctx)
+		log.Warnw("redis cache write failed for refresh token", "error", err)
 		// 降级：DB 已写入成功，Redis 失败不影响正确性
 	}
 	return nil
@@ -100,7 +101,8 @@ func (r *CachedUserRepository) FindRefreshToken(ctx context.Context, tokenHash s
 	}
 	// redis.Nil 表示 key 不存在，其他错误记录日志后降级到 DB
 	if err != redis.Nil {
-		logger.Log.Warnw("Redis cache read failed for refresh token", "error", err)
+		log := trace.FromContext(ctx)
+		log.Warnw("redis cache read failed for refresh token", "error", err)
 	}
 
 	// 降级到 DB
@@ -139,7 +141,8 @@ func (r *CachedUserRepository) DeleteRefreshToken(ctx context.Context, tokenHash
 		pipe.SRem(ctx, userRefreshKey(userID), tokenHash)
 	}
 	if _, err := pipe.Exec(ctx); err != nil {
-		logger.Log.Warnw("Redis cache delete failed for refresh token", "error", err)
+		log := trace.FromContext(ctx)
+		log.Warnw("redis cache delete failed for refresh token", "error", err)
 	}
 	return nil
 }
@@ -159,7 +162,8 @@ func (r *CachedUserRepository) DeleteUserRefreshTokens(ctx context.Context, user
 		}
 		keys = append(keys, userKey)
 		if err := r.rdb.Del(ctx, keys...).Err(); err != nil {
-			logger.Log.Warnw("Redis cache batch delete failed for user refresh tokens", "error", err, "userID", userID)
+			log := trace.FromContext(ctx)
+			log.Warnw("redis cache batch delete failed for user refresh tokens", "error", err, "user_id", userID)
 		}
 	}
 

backend/internal/store/message_pg.go

@@ -8,6 +8,7 @@ import (
 	"github.com/jackc/pgx/v5/pgxpool"
 
 	"github.com/hhs/camtalk/internal/models"
+	"github.com/hhs/camtalk/internal/trace"
 )
 
 // PgMessageRepository 基于 PostgreSQL 的 MessageRepository 实现。
@@ -21,14 +22,24 @@ func NewPgMessageRepository(pool *pgxpool.Pool) *PgMessageRepository {
 }
 
 func (r *PgMessageRepository) SaveMessage(ctx context.Context, sessionID string, msg models.Message, tokensUsed int) error {
+	log := trace.FromContext(ctx)
+
 	_, err := r.pool.Exec(ctx,
 		`INSERT INTO messages (session_id, role, content, tokens_used) VALUES ($1, $2, $3, $4)`,
 		sessionID, msg.Role, msg.Content, tokensUsed,
 	)
-	return err
+	if err != nil {
+		log.Errorw("save message failed", "session_id", sessionID, "role", msg.Role, "error", err)
+		return err
+	}
+
+	log.Debugw("message saved", "session_id", sessionID, "role", msg.Role, "tokens_used", tokensUsed)
+	return nil
 }
 
 func (r *PgMessageRepository) GetMessages(ctx context.Context, sessionID string, limit int, beforeID int64) ([]StoredMessage, error) {
+	log := trace.FromContext(ctx)
+
 	if limit <= 0 {
 		limit = 50
 	}
@@ -56,6 +67,7 @@ func (r *PgMessageRepository) GetMessages(ctx context.Context, sessionID string,
 		)
 	}
 	if err != nil {
+		log.Errorw("get messages failed", "session_id", sessionID, "error", err)
 		return nil, err
 	}
 
@@ -64,31 +76,39 @@ func (r *PgMessageRepository) GetMessages(ctx context.Context, sessionID string,
 		rows[i], rows[j] = rows[j], rows[i]
 	}
 
+	log.Debugw("messages retrieved", "session_id", sessionID, "count", len(rows))
 	return rows, nil
 }
 
 func (r *PgMessageRepository) queryMessages(ctx context.Context, query string, args ...any) ([]StoredMessage, error) {
+	log := trace.FromContext(ctx)
+
 	pgxRows, err := r.pool.Query(ctx, query, args...)
 	if err != nil {
+		log.Errorw("query messages failed", "error", err)
 		return nil, err
 	}
 	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 {
+			log.Errorw("scan message row failed", "error", err)
 			return nil, err
 		}
 		messages = append(messages, m)
 	}
 	if err := pgxRows.Err(); err != nil {
+		log.Errorw("iterate message rows failed", "error", err)
 		return nil, err
 	}
 	return messages, nil
 }
 
 func (r *PgMessageRepository) GetLastMessage(ctx context.Context, sessionID string) (*StoredMessage, error) {
+	log := trace.FromContext(ctx)
+
 	var m StoredMessage
 	err := r.pool.QueryRow(ctx,
 		`SELECT id, session_id, role, content, tokens_used, created_at
@@ -102,24 +122,34 @@ func (r *PgMessageRepository) GetLastMessage(ctx context.Context, sessionID stri
 		return nil, ErrMessageNotFound
 	}
 	if err != nil {
+		log.Errorw("get last message failed", "session_id", sessionID, "error", err)
 		return nil, err
 	}
+
+	log.Debugw("last message retrieved", "session_id", sessionID, "message_id", m.ID)
 	return &m, nil
 }
 
 func (r *PgMessageRepository) GetMessageCount(ctx context.Context, sessionID string) (int, error) {
+	log := trace.FromContext(ctx)
+
 	var count int
 	err := r.pool.QueryRow(ctx,
 		`SELECT COUNT(*) FROM messages WHERE session_id = $1`,
 		sessionID,
 	).Scan(&count)
 	if err != nil {
+		log.Errorw("get message count failed", "session_id", sessionID, "error", err)
 		return 0, err
 	}
+
+	log.Debugw("message count retrieved", "session_id", sessionID, "count", count)
 	return count, nil
 }
 
 func (r *PgMessageRepository) GetSessionMessageStats(ctx context.Context, sessionIDs []string) (map[string]SessionMessageStats, error) {
+	log := trace.FromContext(ctx)
+
 	if len(sessionIDs) == 0 {
 		return map[string]SessionMessageStats{}, nil
 	}
@@ -143,6 +173,7 @@ func (r *PgMessageRepository) GetSessionMessageStats(ctx context.Context, sessio
 		sessionIDs,
 	)
 	if err != nil {
+		log.Errorw("get session message stats failed", "session_count", len(sessionIDs), "error", err)
 		return nil, err
 	}
 	defer rows.Close()
@@ -152,12 +183,16 @@ func (r *PgMessageRepository) GetSessionMessageStats(ctx context.Context, sessio
 		var sid string
 		var stats SessionMessageStats
 		if err := rows.Scan(&sid, &stats.MessageCount, &stats.LastMessage); err != nil {
+			log.Errorw("scan message stats row failed", "error", err)
 			return nil, err
 		}
 		result[sid] = stats
 	}
 	if err := rows.Err(); err != nil {
+		log.Errorw("iterate message stats rows failed", "error", err)
 		return nil, err
 	}
+
+	log.Debugw("session message stats retrieved", "session_count", len(sessionIDs), "result_count", len(result))
 	return result, nil
 }

backend/internal/store/session_pg.go

@@ -6,6 +6,8 @@ import (
 
 	"github.com/jackc/pgx/v5"
 	"github.com/jackc/pgx/v5/pgxpool"
+
+	"github.com/hhs/camtalk/internal/trace"
 )
 
 // PgSessionRepository 基于 PostgreSQL 的 SessionRepository 实现。
@@ -19,6 +21,8 @@ func NewPgSessionRepository(pool *pgxpool.Pool) *PgSessionRepository {
 }
 
 func (r *PgSessionRepository) Save(ctx context.Context, s SessionRecord) error {
+	log := trace.FromContext(ctx)
+
 	_, err := r.pool.Exec(ctx,
 		`INSERT INTO sessions (id, user_id, title, config, created_at, updated_at)
 		 VALUES ($1, $2, $3, $4, $5, $6)
@@ -28,10 +32,18 @@ func (r *PgSessionRepository) Save(ctx context.Context, s SessionRecord) error {
 		   updated_at = EXCLUDED.updated_at`,
 		s.ID, s.UserID, s.Title, s.Config, s.CreatedAt, s.UpdatedAt,
 	)
-	return err
+	if err != nil {
+		log.Errorw("save session failed", "session_id", s.ID, "error", err)
+		return err
+	}
+
+	log.Debugw("session saved", "session_id", s.ID, "user_id", s.UserID)
+	return nil
 }
 
 func (r *PgSessionRepository) FindByID(ctx context.Context, id string) (*SessionRecord, error) {
+	log := trace.FromContext(ctx)
+
 	var s SessionRecord
 	err := r.pool.QueryRow(ctx,
 		`SELECT id, user_id, title, config, created_at, updated_at
@@ -41,12 +53,17 @@ func (r *PgSessionRepository) FindByID(ctx context.Context, id string) (*Session
 		return nil, ErrSessionNotFound
 	}
 	if err != nil {
+		log.Errorw("find session failed", "session_id", id, "error", err)
 		return nil, err
 	}
+
+	log.Debugw("session found", "session_id", id)
 	return &s, nil
 }
 
 func (r *PgSessionRepository) FindByUser(ctx context.Context, userID string, page, size int) ([]SessionRecord, int, error) {
+	log := trace.FromContext(ctx)
+
 	if page <= 0 {
 		page = 1
 	}
@@ -60,6 +77,7 @@ func (r *PgSessionRepository) FindByUser(ctx context.Context, userID string, pag
 	if err := r.pool.QueryRow(ctx,
 		`SELECT COUNT(*) FROM sessions WHERE user_id = $1`, userID,
 	).Scan(&total); err != nil {
+		log.Errorw("count user sessions failed", "user_id", userID, "error", err)
 		return nil, 0, err
 	}
 
@@ -73,6 +91,7 @@ func (r *PgSessionRepository) FindByUser(ctx context.Context, userID string, pag
 		userID, size, offset,
 	)
 	if err != nil {
+		log.Errorw("find user sessions failed", "user_id", userID, "error", err)
 		return nil, 0, err
 	}
 	defer rows.Close()
@@ -81,66 +100,90 @@ func (r *PgSessionRepository) FindByUser(ctx context.Context, userID string, pag
 	for rows.Next() {
 		var s SessionRecord
 		if err := rows.Scan(&s.ID, &s.UserID, &s.Title, &s.Config, &s.CreatedAt, &s.UpdatedAt); err != nil {
+			log.Errorw("scan session row failed", "user_id", userID, "error", err)
 			return nil, 0, err
 		}
 		list = append(list, s)
 	}
 	if err := rows.Err(); err != nil {
+		log.Errorw("iterate session rows failed", "user_id", userID, "error", err)
 		return nil, 0, err
 	}
+
+	log.Debugw("user sessions found", "user_id", userID, "count", len(list), "total", total)
 	return list, total, nil
 }
 
 func (r *PgSessionRepository) UpdateTitle(ctx context.Context, id string, title string) error {
+	log := trace.FromContext(ctx)
+
 	tag, err := r.pool.Exec(ctx,
 		`UPDATE sessions SET title = $2, updated_at = NOW() WHERE id = $1`,
 		id, title,
 	)
 	if err != nil {
+		log.Errorw("update session title failed", "session_id", id, "error", err)
 		return err
 	}
 	if tag.RowsAffected() == 0 {
 		return ErrSessionNotFound
 	}
+
+	log.Debugw("session title updated", "session_id", id)
 	return nil
 }
 
 func (r *PgSessionRepository) UpdateConfig(ctx context.Context, id string, configJSON []byte) error {
+	log := trace.FromContext(ctx)
+
 	tag, err := r.pool.Exec(ctx,
 		`UPDATE sessions SET config = $2, updated_at = NOW() WHERE id = $1`,
 		id, configJSON,
 	)
 	if err != nil {
+		log.Errorw("update session config failed", "session_id", id, "error", err)
 		return err
 	}
 	if tag.RowsAffected() == 0 {
 		return ErrSessionNotFound
 	}
+
+	log.Debugw("session config updated", "session_id", id)
 	return nil
 }
 
 func (r *PgSessionRepository) Touch(ctx context.Context, id string) error {
+	log := trace.FromContext(ctx)
+
 	tag, err := r.pool.Exec(ctx,
 		`UPDATE sessions SET updated_at = NOW() WHERE id = $1`, id,
 	)
 	if err != nil {
+		log.Errorw("touch session failed", "session_id", id, "error", err)
 		return err
 	}
 	if tag.RowsAffected() == 0 {
 		return ErrSessionNotFound
 	}
+
+	log.Debugw("session touched", "session_id", id)
 	return nil
 }
 
 func (r *PgSessionRepository) Delete(ctx context.Context, id string) error {
+	log := trace.FromContext(ctx)
+
 	tag, err := r.pool.Exec(ctx,
 		`DELETE FROM sessions WHERE id = $1`, id,
 	)
 	if err != nil {
+		log.Errorw("delete session failed", "session_id", id, "error", err)
 		return err
 	}
 	if tag.RowsAffected() == 0 {
 		return ErrSessionNotFound
 	}
+
+	log.Debugw("session deleted", "session_id", id)
 	return nil
 }

backend/internal/store/user_pg.go

@@ -7,6 +7,8 @@ import (
 
 	"github.com/jackc/pgx/v5"
 	"github.com/jackc/pgx/v5/pgxpool"
+
+	"github.com/hhs/camtalk/internal/trace"
 )
 
 // PgUserRepository 基于 PostgreSQL 的 UserRepository 实现。
@@ -20,18 +22,25 @@ func NewPgUserRepository(pool *pgxpool.Pool) *PgUserRepository {
 }
 
 func (r *PgUserRepository) Create(ctx context.Context, username, passwordHash string) (string, error) {
+	log := trace.FromContext(ctx)
+
 	var id string
 	err := r.pool.QueryRow(ctx,
 		`INSERT INTO users (username, password_hash) VALUES ($1, $2) RETURNING id`,
 		username, passwordHash,
 	).Scan(&id)
 	if err != nil {
+		log.Errorw("create user failed", "username", username, "error", err)
 		return "", err
 	}
+
+	log.Debugw("user created", "user_id", id, "username", username)
 	return id, nil
 }
 
 func (r *PgUserRepository) FindByUsername(ctx context.Context, username string) (*User, error) {
+	log := trace.FromContext(ctx)
+
 	var u User
 	err := r.pool.QueryRow(ctx,
 		`SELECT id, username, password_hash, created_at, updated_at FROM users WHERE username = $1`,
@@ -41,12 +50,17 @@ func (r *PgUserRepository) FindByUsername(ctx context.Context, username string)
 		return nil, ErrUserNotFound
 	}
 	if err != nil {
+		log.Errorw("find user by username failed", "username", username, "error", err)
 		return nil, err
 	}
+
+	log.Debugw("user found by username", "user_id", u.ID, "username", username)
 	return &u, nil
 }
 
 func (r *PgUserRepository) FindByID(ctx context.Context, id string) (*User, error) {
+	log := trace.FromContext(ctx)
+
 	var u User
 	err := r.pool.QueryRow(ctx,
 		`SELECT id, username, password_hash, created_at, updated_at FROM users WHERE id = $1`,
@@ -56,20 +70,33 @@ func (r *PgUserRepository) FindByID(ctx context.Context, id string) (*User, erro
 		return nil, ErrUserNotFound
 	}
 	if err != nil {
+		log.Errorw("find user by id failed", "user_id", id, "error", err)
 		return nil, err
 	}
+
+	log.Debugw("user found by id", "user_id", id)
 	return &u, nil
 }
 
 func (r *PgUserRepository) SaveRefreshToken(ctx context.Context, userID, tokenHash string, expiresAt time.Time) error {
+	log := trace.FromContext(ctx)
+
 	_, err := r.pool.Exec(ctx,
 		`INSERT INTO refresh_tokens (user_id, token_hash, expires_at) VALUES ($1, $2, $3)`,
 		userID, tokenHash, expiresAt,
 	)
-	return err
+	if err != nil {
+		log.Errorw("save refresh token failed", "user_id", userID, "error", err)
+		return err
+	}
+
+	log.Debugw("refresh token saved", "user_id", userID)
+	return nil
 }
 
 func (r *PgUserRepository) FindRefreshToken(ctx context.Context, tokenHash string) (string, error) {
+	log := trace.FromContext(ctx)
+
 	var userID string
 	err := r.pool.QueryRow(ctx,
 		`SELECT user_id FROM refresh_tokens WHERE token_hash = $1 AND expires_at > NOW()`,
@@ -79,23 +106,42 @@ func (r *PgUserRepository) FindRefreshToken(ctx context.Context, tokenHash strin
 		return "", ErrRefreshTokenNotFound
 	}
 	if err != nil {
+		log.Errorw("find refresh token failed", "error", err)
 		return "", err
 	}
+
+	log.Debugw("refresh token found", "user_id", userID)
 	return userID, nil
 }
 
 func (r *PgUserRepository) DeleteRefreshToken(ctx context.Context, tokenHash string) error {
+	log := trace.FromContext(ctx)
+
 	_, err := r.pool.Exec(ctx,
 		`DELETE FROM refresh_tokens WHERE token_hash = $1`,
 		tokenHash,
 	)
-	return err
+	if err != nil {
+		log.Errorw("delete refresh token failed", "error", err)
+		return err
+	}
+
+	log.Debugw("refresh token deleted")
+	return nil
 }
 
 func (r *PgUserRepository) DeleteUserRefreshTokens(ctx context.Context, userID string) error {
+	log := trace.FromContext(ctx)
+
 	_, err := r.pool.Exec(ctx,
 		`DELETE FROM refresh_tokens WHERE user_id = $1`,
 		userID,
 	)
-	return err
+	if err != nil {
+		log.Errorw("delete user refresh tokens failed", "user_id", userID, "error", err)
+		return err
+	}
+
+	log.Debugw("user refresh tokens deleted", "user_id", userID)
+	return nil
 }

backend/internal/store/user_scenario_repository.go

@@ -0,0 +1,276 @@
+package store
+
+import (
+	"context"
+	"fmt"
+	"time"
+
+	"github.com/google/uuid"
+	"github.com/jackc/pgx/v5"
+	"github.com/jackc/pgx/v5/pgxpool"
+
+	"github.com/hhs/camtalk/internal/models"
+	"github.com/hhs/camtalk/internal/trace"
+)
+
+// UserScenarioRepository 用户自建情景仓储接口。
+type UserScenarioRepository interface {
+	Create(ctx context.Context, scenario *models.UserScenario) error
+	FindByID(ctx context.Context, id string) (*models.UserScenario, error)
+	FindByIDAndUserID(ctx context.Context, id, userID string) (*models.UserScenario, error)
+	FindByUserID(ctx context.Context, userID string) ([]*models.UserScenario, error)
+	Update(ctx context.Context, scenario *models.UserScenario) error
+	Delete(ctx context.Context, id string) error
+	CountByUserID(ctx context.Context, userID string) (int, error)
+}
+
+// PostgresUserScenarioRepo PostgreSQL 实现。
+type PostgresUserScenarioRepo struct {
+	pool *pgxpool.Pool
+}
+
+// NewPostgresUserScenarioRepo 创建 PostgreSQL 用户情景仓储。
+func NewPostgresUserScenarioRepo(pool *pgxpool.Pool) UserScenarioRepository {
+	return &PostgresUserScenarioRepo{pool: pool}
+}
+
+// Create 创建用户情景。
+func (r *PostgresUserScenarioRepo) Create(ctx context.Context, scenario *models.UserScenario) error {
+	log := trace.FromContext(ctx)
+
+	query := `
+		INSERT INTO user_scenarios (id, user_id, name, icon, description, prompt, greeting, language, created_at, updated_at)
+		VALUES ($1, $2, $3, $4, NULLIF($5, ''), $6, NULLIF($7, ''), $8, $9, $10)
+		RETURNING id, created_at, updated_at
+	`
+
+	now := time.Now()
+	scenario.CreatedAt = now
+	scenario.UpdatedAt = now
+
+	if scenario.ID == "" {
+		scenario.ID = uuid.New().String()
+	}
+	if scenario.Icon == "" {
+		scenario.Icon = "✨"
+	}
+	if scenario.Language == "" {
+		scenario.Language = "zh-CN"
+	}
+
+	err := r.pool.QueryRow(ctx, query,
+		scenario.ID,
+		scenario.UserID,
+		scenario.Name,
+		scenario.Icon,
+		scenario.Description,
+		scenario.Prompt,
+		scenario.Greeting,
+		scenario.Language,
+		scenario.CreatedAt,
+		scenario.UpdatedAt,
+	).Scan(&scenario.ID, &scenario.CreatedAt, &scenario.UpdatedAt)
+
+	if err != nil {
+		log.Errorw("create user scenario failed", "user_id", scenario.UserID, "name", scenario.Name, "error", err)
+		return fmt.Errorf("create user scenario: %w", err)
+	}
+
+	log.Debugw("user scenario created", "scenario_id", scenario.ID, "user_id", scenario.UserID, "name", scenario.Name)
+	return nil
+}
+
+// FindByID 根据 ID 查找情景。
+func (r *PostgresUserScenarioRepo) FindByID(ctx context.Context, id string) (*models.UserScenario, error) {
+	log := trace.FromContext(ctx)
+
+	query := `
+		SELECT id, user_id, name, icon, description, prompt, greeting, language, created_at, updated_at
+		FROM user_scenarios
+		WHERE id = $1
+	`
+
+	var scenario models.UserScenario
+	err := r.pool.QueryRow(ctx, query, id).Scan(
+		&scenario.ID,
+		&scenario.UserID,
+		&scenario.Name,
+		&scenario.Icon,
+		&scenario.Description,
+		&scenario.Prompt,
+		&scenario.Greeting,
+		&scenario.Language,
+		&scenario.CreatedAt,
+		&scenario.UpdatedAt,
+	)
+
+	if err == pgx.ErrNoRows {
+		return nil, fmt.Errorf("user scenario not found: %s", id)
+	}
+	if err != nil {
+		log.Errorw("find user scenario failed", "scenario_id", id, "error", err)
+		return nil, fmt.Errorf("find user scenario: %w", err)
+	}
+
+	log.Debugw("user scenario found", "scenario_id", id)
+	return &scenario, nil
+}
+
+// FindByIDAndUserID 根据 ID 和用户 ID 查找情景（权限校验）。
+func (r *PostgresUserScenarioRepo) FindByIDAndUserID(ctx context.Context, id, userID string) (*models.UserScenario, error) {
+	log := trace.FromContext(ctx)
+
+	query := `
+		SELECT id, user_id, name, icon, description, prompt, greeting, language, created_at, updated_at
+		FROM user_scenarios
+		WHERE id = $1 AND user_id = $2
+	`
+
+	var scenario models.UserScenario
+	err := r.pool.QueryRow(ctx, query, id, userID).Scan(
+		&scenario.ID,
+		&scenario.UserID,
+		&scenario.Name,
+		&scenario.Icon,
+		&scenario.Description,
+		&scenario.Prompt,
+		&scenario.Greeting,
+		&scenario.Language,
+		&scenario.CreatedAt,
+		&scenario.UpdatedAt,
+	)
+
+	if err == pgx.ErrNoRows {
+		return nil, fmt.Errorf("user scenario not found or no permission")
+	}
+	if err != nil {
+		log.Errorw("find user scenario by id and user failed", "scenario_id", id, "user_id", userID, "error", err)
+		return nil, fmt.Errorf("find user scenario: %w", err)
+	}
+
+	log.Debugw("user scenario found by id and user", "scenario_id", id, "user_id", userID)
+	return &scenario, nil
+}
+
+// FindByUserID 查找用户的所有情景。
+func (r *PostgresUserScenarioRepo) FindByUserID(ctx context.Context, userID string) ([]*models.UserScenario, error) {
+	log := trace.FromContext(ctx)
+
+	query := `
+		SELECT id, user_id, name, icon, description, prompt, greeting, language, created_at, updated_at
+		FROM user_scenarios
+		WHERE user_id = $1
+		ORDER BY created_at DESC
+	`
+
+	rows, err := r.pool.Query(ctx, query, userID)
+	if err != nil {
+		log.Errorw("find user scenarios failed", "user_id", userID, "error", err)
+		return nil, fmt.Errorf("find user scenarios: %w", err)
+	}
+	defer rows.Close()
+
+	var scenarios []*models.UserScenario
+	for rows.Next() {
+		var s models.UserScenario
+		err := rows.Scan(
+			&s.ID,
+			&s.UserID,
+			&s.Name,
+			&s.Icon,
+			&s.Description,
+			&s.Prompt,
+			&s.Greeting,
+			&s.Language,
+			&s.CreatedAt,
+			&s.UpdatedAt,
+		)
+		if err != nil {
+			log.Errorw("scan user scenario row failed", "user_id", userID, "error", err)
+			return nil, fmt.Errorf("scan user scenario: %w", err)
+		}
+		scenarios = append(scenarios, &s)
+	}
+
+	if err = rows.Err(); err != nil {
+		log.Errorw("iterate user scenarios failed", "user_id", userID, "error", err)
+		return nil, fmt.Errorf("iterate user scenarios: %w", err)
+	}
+
+	log.Debugw("user scenarios found", "user_id", userID, "count", len(scenarios))
+	return scenarios, nil
+}
+
+// Update 更新用户情景。
+func (r *PostgresUserScenarioRepo) Update(ctx context.Context, scenario *models.UserScenario) error {
+	log := trace.FromContext(ctx)
+
+	query := `
+		UPDATE user_scenarios
+		SET name = $1, icon = $2, description = $3, prompt = $4, greeting = $5, language = $6, updated_at = $7
+		WHERE id = $8 AND user_id = $9
+		RETURNING updated_at
+	`
+
+	scenario.UpdatedAt = time.Now()
+
+	err := r.pool.QueryRow(ctx, query,
+		scenario.Name,
+		scenario.Icon,
+		scenario.Description,
+		scenario.Prompt,
+		scenario.Greeting,
+		scenario.Language,
+		scenario.UpdatedAt,
+		scenario.ID,
+		scenario.UserID,
+	).Scan(&scenario.UpdatedAt)
+
+	if err == pgx.ErrNoRows {
+		return fmt.Errorf("user scenario not found or no permission")
+	}
+	if err != nil {
+		log.Errorw("update user scenario failed", "scenario_id", scenario.ID, "user_id", scenario.UserID, "error", err)
+		return fmt.Errorf("update user scenario: %w", err)
+	}
+
+	log.Debugw("user scenario updated", "scenario_id", scenario.ID, "user_id", scenario.UserID)
+	return nil
+}
+
+// Delete 删除用户情景。
+func (r *PostgresUserScenarioRepo) Delete(ctx context.Context, id string) error {
+	log := trace.FromContext(ctx)
+
+	query := `DELETE FROM user_scenarios WHERE id = $1`
+
+	result, err := r.pool.Exec(ctx, query, id)
+	if err != nil {
+		log.Errorw("delete user scenario failed", "scenario_id", id, "error", err)
+		return fmt.Errorf("delete user scenario: %w", err)
+	}
+
+	if result.RowsAffected() == 0 {
+		return fmt.Errorf("user scenario not found")
+	}
+
+	log.Debugw("user scenario deleted", "scenario_id", id)
+	return nil
+}
+
+// CountByUserID 统计用户的情景数量。
+func (r *PostgresUserScenarioRepo) CountByUserID(ctx context.Context, userID string) (int, error) {
+	log := trace.FromContext(ctx)
+
+	query := `SELECT COUNT(*) FROM user_scenarios WHERE user_id = $1`
+
+	var count int
+	err := r.pool.QueryRow(ctx, query, userID).Scan(&count)
+	if err != nil {
+		log.Errorw("count user scenarios failed", "user_id", userID, "error", err)
+		return 0, fmt.Errorf("count user scenarios: %w", err)
+	}
+
+	log.Debugw("user scenarios counted", "user_id", userID, "count", count)
+	return count, nil
+}

backend/internal/trace/context.go

@@ -0,0 +1,46 @@
+package trace
+
+import "context"
+
+type traceIDKey struct{}
+type requestIDKey struct{}
+type sessionIDKey struct{}
+
+// WithTraceID 将 trace ID 注入 context（连接级/会话级标识）
+func WithTraceID(ctx context.Context, traceID string) context.Context {
+	return context.WithValue(ctx, traceIDKey{}, traceID)
+}
+
+// GetTraceID 从 context 提取 trace ID
+func GetTraceID(ctx context.Context) string {
+	if v, ok := ctx.Value(traceIDKey{}).(string); ok {
+		return v
+	}
+	return ""
+}
+
+// WithRequestID 将 request ID 注入 context（单次请求/查询标识）
+func WithRequestID(ctx context.Context, requestID string) context.Context {
+	return context.WithValue(ctx, requestIDKey{}, requestID)
+}
+
+// GetRequestID 从 context 提取 request ID
+func GetRequestID(ctx context.Context) string {
+	if v, ok := ctx.Value(requestIDKey{}).(string); ok {
+		return v
+	}
+	return ""
+}
+
+// WithSessionID 将 session ID 注入 context（会话存储标识）
+func WithSessionID(ctx context.Context, sessionID string) context.Context {
+	return context.WithValue(ctx, sessionIDKey{}, sessionID)
+}
+
+// GetSessionID 从 context 提取 session ID
+func GetSessionID(ctx context.Context) string {
+	if v, ok := ctx.Value(sessionIDKey{}).(string); ok {
+		return v
+	}
+	return ""
+}

backend/internal/trace/eino_test.go

@@ -0,0 +1,42 @@
+package trace_test
+
+import (
+	"context"
+	"testing"
+
+	"github.com/cloudwego/eino/compose"
+	"github.com/hhs/camtalk/internal/trace"
+)
+
+func TestEinoContextPropagation(t *testing.T) {
+	ctx := context.Background()
+	testTraceID := "01J5TEST123456789"
+	ctx = trace.WithTraceID(ctx, testTraceID)
+
+	var capturedTraceID string
+
+	g := compose.NewGraph[string, string]()
+	g.AddLambdaNode("test_node", compose.InvokableLambda(
+		func(ctx context.Context, input string) (string, error) {
+			capturedTraceID = trace.GetTraceID(ctx)
+			return "ok", nil
+		},
+	))
+	g.AddEdge(compose.START, "test_node")
+	g.AddEdge("test_node", compose.END)
+
+	runnable, err := g.Compile(ctx)
+	if err != nil {
+		t.Fatalf("compile failed: %v", err)
+	}
+
+	_, err = runnable.Invoke(ctx, "test_input")
+	if err != nil {
+		t.Fatalf("invoke failed: %v", err)
+	}
+
+	if capturedTraceID != testTraceID {
+		t.Errorf("trace_id lost in Eino propagation: got %q, want %q",
+			capturedTraceID, testTraceID)
+	}
+}

backend/internal/trace/gin_logger.go

@@ -0,0 +1,63 @@
+package trace
+
+import (
+	"time"
+
+	"github.com/gin-gonic/gin"
+)
+
+// GinLogger 记录每个 HTTP 请求的 method/path/status/latency
+func GinLogger() gin.HandlerFunc {
+	return func(c *gin.Context) {
+		start := time.Now()
+		path := c.Request.URL.Path
+		query := c.Request.URL.RawQuery
+
+		c.Next()
+
+		latency := time.Since(start).Milliseconds()
+		status := c.Writer.Status()
+		log := FromContext(c.Request.Context())
+
+		fields := []interface{}{
+			"method", c.Request.Method,
+			"path", path,
+			"status", status,
+			"latency_ms", latency,
+			"client_ip", c.ClientIP(),
+		}
+		if query != "" {
+			fields = append(fields, "query", query)
+		}
+		if errStr := c.Errors.String(); errStr != "" {
+			fields = append(fields, "errors", errStr)
+		}
+
+		switch {
+		case status >= 500:
+			log.Errorw("request completed", fields...)
+		case status >= 400:
+			log.Warnw("request completed", fields...)
+		default:
+			log.Infow("request completed", fields...)
+		}
+	}
+}
+
+// GinRecovery 自定义 panic 恢复中间件，使用 zap 记录
+func GinRecovery() gin.HandlerFunc {
+	return func(c *gin.Context) {
+		defer func() {
+			if err := recover(); err != nil {
+				log := FromContext(c.Request.Context())
+				log.Errorw("panic recovered",
+					"error", err,
+					"path", c.Request.URL.Path,
+					"method", c.Request.Method,
+					"client_ip", c.ClientIP())
+				c.AbortWithStatus(500)
+			}
+		}()
+		c.Next()
+	}
+}

backend/internal/trace/id.go

@@ -0,0 +1,22 @@
+package trace
+
+import (
+	cryptorand "crypto/rand"
+	"sync"
+	"time"
+
+	"github.com/oklog/ulid/v2"
+)
+
+var entropyPool = sync.Pool{
+	New: func() interface{} {
+		return ulid.Monotonic(cryptorand.Reader, 0)
+	},
+}
+
+// GenerateTraceID 生成并发安全的 ULID trace ID
+func GenerateTraceID() string {
+	entropy := entropyPool.Get().(*ulid.MonotonicEntropy)
+	defer entropyPool.Put(entropy)
+	return ulid.MustNew(ulid.Timestamp(time.Now()), entropy).String()
+}

backend/internal/trace/logger.go

@@ -0,0 +1,25 @@
+package trace
+
+import (
+	"context"
+
+	"github.com/hhs/camtalk/internal/logger"
+	"go.uber.org/zap"
+)
+
+// FromContext 返回自动附加 trace_id/request_id/session_id 的 logger
+func FromContext(ctx context.Context) *zap.SugaredLogger {
+	log := logger.Log
+
+	if traceID := GetTraceID(ctx); traceID != "" {
+		log = log.With("trace_id", traceID)
+	}
+	if requestID := GetRequestID(ctx); requestID != "" {
+		log = log.With("request_id", requestID)
+	}
+	if sessionID := GetSessionID(ctx); sessionID != "" {
+		log = log.With("session_id", sessionID)
+	}
+
+	return log
+}

backend/internal/trace/middleware.go

@@ -0,0 +1,17 @@
+package trace
+
+import "github.com/gin-gonic/gin"
+
+// TraceMiddleware 为每个 HTTP 请求生成 trace ID 并注入 context
+func TraceMiddleware() gin.HandlerFunc {
+	return func(c *gin.Context) {
+		traceID := GenerateTraceID()
+		ctx := WithTraceID(c.Request.Context(), traceID)
+		ctx = WithRequestID(ctx, traceID) // REST: trace_id == request_id
+
+		c.Request = c.Request.WithContext(ctx)
+		c.Header("X-Trace-ID", traceID) // 返回给客户端用于排查
+
+		c.Next()
+	}
+}

backend/internal/util/string.go

@@ -0,0 +1,9 @@
+package util
+
+// Truncate 截断字符串到指定长度，超出部分用 "..." 替换
+func Truncate(s string, maxLen int) string {
+	if len(s) <= maxLen {
+		return s
+	}
+	return s[:maxLen] + "..."
+}

backend/internal/ws/handler.go

@@ -15,11 +15,12 @@ import (
 	"github.com/hhs/camtalk/internal/auth"
 	"github.com/hhs/camtalk/internal/config"
 	"github.com/hhs/camtalk/internal/errors"
-	"github.com/hhs/camtalk/internal/logger"
 	"github.com/hhs/camtalk/internal/models"
 	"github.com/hhs/camtalk/internal/orchestrator"
 	"github.com/hhs/camtalk/internal/ratelimit"
 	"github.com/hhs/camtalk/internal/session"
+	"github.com/hhs/camtalk/internal/store"
+	"github.com/hhs/camtalk/internal/trace"
 )
 
 // newUpgrader 根据配置创建 WebSocket upgrader。
@@ -43,12 +44,12 @@ func newUpgrader(cfg *config.Config) websocket.Upgrader {
 
 // Client 代表一个 WebSocket 客户端连接。
 type Client struct {
-	conn          *websocket.Conn
-	sessionID     string
-	sessionMgr    session.Manager
-	orchestrator  orchestrator.Orchestrator
-	cancelFuncs   map[string]context.CancelFunc // requestID → cancel func
-	mu            sync.Mutex
+	conn         *websocket.Conn
+	sessionID    string
+	sessionMgr   session.Manager
+	orchestrator orchestrator.Orchestrator
+	cancelFuncs  map[string]context.CancelFunc // requestID → cancel func
+	mu           sync.Mutex
 }
 
 // SendJSON 向客户端发送 JSON 消息（公开以便 errors 包调用）。
@@ -95,19 +96,19 @@ func (w *WSClient) SendError(err models.WsError) error {
 }
 
 // ServeWS 处理 WebSocket 升级请求。
-func ServeWS(sessionMgr session.Manager, orch orchestrator.Orchestrator, cfg *config.Config, tokenMgr *auth.TokenManager, limiter ratelimit.Limiter) gin.HandlerFunc {
+func ServeWS(sessionMgr session.Manager, orch orchestrator.Orchestrator, cfg *config.Config, tokenMgr *auth.TokenManager, limiter ratelimit.Limiter, scenarioRepo store.UserScenarioRepository) gin.HandlerFunc {
 	upgrader := newUpgrader(cfg)
 	heartbeatInterval := time.Duration(cfg.Server.HeartbeatInterval) * time.Second
 	heartbeatTimeout := time.Duration(cfg.Server.HeartbeatTimeout) * time.Second
 	version := cfg.App.Version
 
 	return func(c *gin.Context) {
-		serveWS(c, sessionMgr, orch, upgrader, heartbeatInterval, heartbeatTimeout, version, tokenMgr, limiter)
+		serveWS(c, sessionMgr, orch, upgrader, heartbeatInterval, heartbeatTimeout, version, tokenMgr, limiter, scenarioRepo)
 	}
 }
 
 func serveWS(c *gin.Context, sessionMgr session.Manager, orch orchestrator.Orchestrator,
-	upgrader websocket.Upgrader, heartbeatInterval, heartbeatTimeout time.Duration, version string, tokenMgr *auth.TokenManager, limiter ratelimit.Limiter) {
+	upgrader websocket.Upgrader, heartbeatInterval, heartbeatTimeout time.Duration, version string, tokenMgr *auth.TokenManager, limiter ratelimit.Limiter, scenarioRepo store.UserScenarioRepository) {
 
 	// --- JWT 认证（upgrade 前完成，失败直接返回 HTTP 错误） ---
 	token := c.Query("token")
@@ -133,9 +134,20 @@ func serveWS(c *gin.Context, sessionMgr session.Manager, orch orchestrator.Orche
 		}
 	}
 
+	// 生成连接级 trace ID（整个 WebSocket 生命周期使用）
+	ctx := c.Request.Context()
+	traceID := trace.GetTraceID(ctx)
+	if traceID == "" {
+		// 如果 REST 中间件未生成（不应发生），fallback 生成
+		traceID = trace.GenerateTraceID()
+		ctx = trace.WithTraceID(ctx, traceID)
+		c.Request = c.Request.WithContext(ctx)
+	}
+
 	conn, err := upgrader.Upgrade(c.Writer, c.Request, nil)
 	if err != nil {
-		logger.Log.Errorw("websocket upgrade failed", "error", err)
+		log := trace.FromContext(ctx)
+		log.Errorw("websocket upgrade failed", "error", err)
 		return
 	}
 	defer conn.Close()
@@ -144,13 +156,17 @@ func serveWS(c *gin.Context, sessionMgr session.Manager, orch orchestrator.Orche
 	var sessionID string
 	if conversationID != "" {
 		sessionID = conversationID
-		logger.Log.Infow("resuming conversation", "session", sessionID, "user_id", userID)
+		ctx = trace.WithSessionID(ctx, sessionID)
+		log := trace.FromContext(ctx)
+		log.Infow("resuming conversation", "user_id", userID)
 	} else {
 		sessionID, err = sessionMgr.Create(context.Background(), userID, models.DefaultConfig())
 		if err != nil {
-			logger.Log.Errorw("create session failed", "error", err)
+			log := trace.FromContext(ctx)
+			log.Errorw("create session failed", "error", err)
 			return
 		}
+		ctx = trace.WithSessionID(ctx, sessionID)
 	}
 
 	client := &Client{
@@ -167,7 +183,8 @@ func serveWS(c *gin.Context, sessionMgr session.Manager, orch orchestrator.Orche
 		SessionID:     sessionID,
 		ServerVersion: version,
 	})
-	logger.Log.Infow("client connected", "session", sessionID, "user_id", userID, "username", username)
+	log := trace.FromContext(ctx)
+	log.Infow("client connected", "user_id", userID, "username", username)
 
 	// 心跳检测
 	lastPong := time.Now()
@@ -185,7 +202,8 @@ func serveWS(c *gin.Context, sessionMgr session.Manager, orch orchestrator.Orche
 			select {
 			case <-ticker.C:
 				if time.Since(lastPong) > heartbeatTimeout {
-					logger.Log.Warnw("heartbeat timeout", "session", sessionID)
+					log := trace.FromContext(ctx)
+					log.Warnw("heartbeat timeout")
 					conn.Close()
 					return
 				}
@@ -200,7 +218,8 @@ func serveWS(c *gin.Context, sessionMgr session.Manager, orch orchestrator.Orche
 		_, message, err := conn.ReadMessage()
 		if err != nil {
 			if websocket.IsUnexpectedCloseError(err, websocket.CloseGoingAway, websocket.CloseNormalClosure) {
-				logger.Log.Warnw("ws read error", "error", err)
+				log := trace.FromContext(ctx)
+				log.Warnw("ws read error", "error", err)
 			}
 			break
 		}
@@ -225,14 +244,18 @@ func serveWS(c *gin.Context, sessionMgr session.Manager, orch orchestrator.Orche
 				errors.SendWSError(client, errors.CodeInvalidMessage, msg.RequestID, err)
 				continue
 			}
-			logger.Log.Infow("query received", "session", sessionID, "request", msg.RequestID)
+
+			// 注入 request ID 到 context
+			queryCtx := trace.WithRequestID(ctx, msg.RequestID)
+			log := trace.FromContext(queryCtx)
+			log.Infow("query received", "has_image", msg.Image != "", "has_audio", msg.Audio != "")
 
 			// 限流检查
 			if limiter != nil {
 				key := fmt.Sprintf("%s:query", userID)
 				allowed, retryAfter := limiter.Allow(context.Background(), key)
 				if !allowed {
-					logger.Log.Warnw("rate limited", "user_id", userID, "retry_after", retryAfter)
+					log.Warnw("rate limited", "user_id", userID, "retry_after", retryAfter)
 					errors.SendWSError(client, errors.CodeRateLimited, msg.RequestID,
 						fmt.Errorf("rate limited, retry after %s", retryAfter.Round(time.Second)))
 					continue
@@ -241,16 +264,16 @@ func serveWS(c *gin.Context, sessionMgr session.Manager, orch orchestrator.Orche
 
 			// 刷新会话 TTL
 			if err := client.sessionMgr.Touch(context.Background(), sessionID); err != nil {
-				logger.Log.Warnw("touch session failed", "session", sessionID, "error", err)
+				log.Warnw("touch session failed", "error", err)
 			}
 
 			// 标记活跃请求
 			if err := client.sessionMgr.SetActiveRequest(context.Background(), sessionID, msg.RequestID); err != nil {
-				logger.Log.Warnw("set active request failed", "session", sessionID, "error", err)
+				log.Warnw("set active request failed", "error", err)
 			}
 
 			// 创建可取消的 context
-			ctx, cancel := context.WithCancel(context.Background())
+			processCtx, cancel := context.WithCancel(queryCtx)
 			client.mu.Lock()
 			client.cancelFuncs[msg.RequestID] = cancel
 			client.mu.Unlock()
@@ -270,8 +293,9 @@ func serveWS(c *gin.Context, sessionMgr session.Manager, orch orchestrator.Orche
 					_ = client.sessionMgr.ClearActiveRequest(context.Background(), sessionID)
 				}()
 
-				if err := client.orchestrator.ProcessQuery(ctx, sessionID, msg, sender); err != nil {
-					logger.Log.Errorw("process query failed", "session", sessionID, "request", msg.RequestID, "error", err)
+				if err := client.orchestrator.ProcessQuery(processCtx, sessionID, msg, sender); err != nil {
+					log := trace.FromContext(processCtx)
+					log.Errorw("process query failed", "error", err)
 				}
 			}()
 
@@ -297,13 +321,28 @@ func serveWS(c *gin.Context, sessionMgr session.Manager, orch orchestrator.Orche
 			if msg.Payload.Scenario != nil {
 				scenarioID = *msg.Payload.Scenario
 			}
-			logger.Log.Infow("config updated", "session", sessionID, "scenario", scenarioID)
+			log := trace.FromContext(ctx)
+			log.Infow("config updated", "scenario", scenarioID)
 
 			// 如果切换了情景（非自由对话），返回首句引导
 			if scenarioID != "" && scenarioID != "free_chat" {
 				sess, err := client.sessionMgr.Get(context.Background(), sessionID)
 				if err == nil && sess != nil {
-					greeting := llm.GetScenarioGreeting(scenarioID, sess.Config.Language)
+					// 加载用户自建情景
+					var customGreetings map[string]string
+					if sess.UserID != "" && scenarioRepo != nil {
+						scenarios, err := scenarioRepo.FindByUserID(context.Background(), sess.UserID)
+						if err == nil && len(scenarios) > 0 {
+							customGreetings = make(map[string]string, len(scenarios))
+							for _, s := range scenarios {
+								if s.Greeting != "" {
+									customGreetings[s.ID] = s.Greeting
+								}
+							}
+						}
+					}
+
+					greeting := llm.GetScenarioGreeting(scenarioID, sess.Config.Language, customGreetings)
 					if greeting != "" {
 						// 发送首句作为 AI 消息
 						_ = client.SendJSON(models.WsLLMChunk{
@@ -335,7 +374,8 @@ func serveWS(c *gin.Context, sessionMgr session.Manager, orch orchestrator.Orche
 			}
 
 		case "interrupt":
-			logger.Log.Infow("interrupt received", "session", sessionID)
+			log := trace.FromContext(ctx)
+			log.Infow("interrupt received")
 
 			// 获取活跃请求 ID 并取消
 			reqID, _ := client.sessionMgr.GetActiveRequestID(context.Background(), sessionID)
@@ -363,12 +403,14 @@ func serveWS(c *gin.Context, sessionMgr session.Manager, orch orchestrator.Orche
 	// 取消所有活跃请求
 	client.mu.Lock()
 	for reqID, cancel := range client.cancelFuncs {
-		logger.Log.Infow("canceling active request on disconnect", "session", sessionID, "request", reqID)
+		log := trace.FromContext(ctx)
+		log.Infow("canceling active request on disconnect", "request", reqID)
 		cancel()
 	}
 	client.cancelFuncs = make(map[string]context.CancelFunc)
 	client.mu.Unlock()
 
 	// 断开连接时不销毁会话，让其自然过期（支持重连恢复）
-	logger.Log.Infow("client disconnected", "session", sessionID)
+	log = trace.FromContext(ctx)
+	log.Infow("client disconnected")
 }

backend/internal/ws/handler_test.go

@@ -8,11 +8,11 @@ import (
 	"testing"
 	"time"
 
+	"context"
 	"github.com/gin-gonic/gin"
 	"github.com/gorilla/websocket"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
-	"context"
 
 	"github.com/hhs/camtalk/internal/auth"
 	"github.com/hhs/camtalk/internal/config"
@@ -148,7 +148,7 @@ func setupTestServer(t *testing.T, orch orchestrator.Orchestrator) (*httptest.Se
 		Server:  config.ServerConfig{HeartbeatInterval: 30, HeartbeatTimeout: 60},
 		Session: config.SessionConfig{MaxHistory: 20},
 	}
-	r.GET("/ws", ServeWS(sessionMgr, orch, cfg, tokenMgr, nil))
+	r.GET("/ws", ServeWS(sessionMgr, orch, cfg, tokenMgr, nil, nil))
 
 	srv := httptest.NewServer(r)
 
@@ -221,9 +221,9 @@ func TestWS_QueryFullFlow(t *testing.T) {
 	imageB64 := base64.StdEncoding.EncodeToString([]byte("fake-image-data"))
 
 	mock := &MockOrchestrator{
-		STTResult:  "你好，世界",
-		LLMDeltas:  []string{"你好", "，世界！"},
-		TTSAudios:  []string{base64.StdEncoding.EncodeToString([]byte("mp3-data-1")), base64.StdEncoding.EncodeToString([]byte("mp3-data-2"))},
+		STTResult: "你好，世界",
+		LLMDeltas: []string{"你好", "，世界！"},
+		TTSAudios: []string{base64.StdEncoding.EncodeToString([]byte("mp3-data-1")), base64.StdEncoding.EncodeToString([]byte("mp3-data-2"))},
 	}
 
 	srv, wsURL := setupTestServer(t, mock)
@@ -332,7 +332,7 @@ func TestWS_UnknownMessageType(t *testing.T) {
 	err := conn.WriteJSON(map[string]string{"type": "unknown_type"})
 	require.NoError(t, err)
 
- errMsg := readJSON(t, conn)
+	errMsg := readJSON(t, conn)
 	assert.Equal(t, "error", errMsg["type"])
 	assert.Equal(t, "INVALID_MESSAGE", errMsg["code"])
 	assert.Contains(t, errMsg["message"], "unknown message type")
@@ -591,7 +591,7 @@ func setupTestServerEx(t *testing.T, orch orchestrator.Orchestrator) (*httptest.
 		Server:  config.ServerConfig{HeartbeatInterval: 30, HeartbeatTimeout: 60},
 		Session: config.SessionConfig{MaxHistory: 20},
 	}
-	r.GET("/ws", ServeWS(sessionMgr, orch, cfg, tokenMgr, nil))
+	r.GET("/ws", ServeWS(sessionMgr, orch, cfg, tokenMgr, nil, nil))
 
 	srv := httptest.NewServer(r)
 	return srv, tokenMgr, sessionMgr
@@ -642,7 +642,7 @@ func TestWS_AuthExpiredToken(t *testing.T) {
 		Server:  config.ServerConfig{HeartbeatInterval: 30, HeartbeatTimeout: 60},
 		Session: config.SessionConfig{MaxHistory: 20},
 	}
-	r.GET("/ws", ServeWS(sessionMgr, &MockOrchestrator{}, cfg, tokenMgr, nil))
+	r.GET("/ws", ServeWS(sessionMgr, &MockOrchestrator{}, cfg, tokenMgr, nil, nil))
 	srv := httptest.NewServer(r)
 	defer srv.Close()
 

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 创建时间';

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 '消息创建时间';

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 '会话最后更新时间';

backend/migrations/004_user_scenarios.down.sql

@@ -0,0 +1,6 @@
+-- 004_user_scenarios.down.sql
+-- 回滚用户自建情景表
+
+DROP INDEX IF EXISTS idx_user_scenarios_created_at;
+DROP INDEX IF EXISTS idx_user_scenarios_user_id;
+DROP TABLE IF EXISTS user_scenarios;

backend/migrations/004_user_scenarios.up.sql

@@ -0,0 +1,40 @@
+-- 004_user_scenarios.up.sql
+-- 用户自建情景表
+
+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(20) DEFAULT '✨',
+    description VARCHAR(100),
+    prompt TEXT NOT NULL,
+    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 (description IS NULL OR char_length(description) <= 100),
+    CONSTRAINT check_prompt_length CHECK (char_length(prompt) >= 10),
+    CONSTRAINT check_greeting_length CHECK (greeting IS NULL OR char_length(greeting) <= 500)
+);
+
+-- 为用户 ID 创建索引，加速查询
+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 '用户自建情景表，存储用户创建的 AI 对话情景配置';
+COMMENT ON COLUMN user_scenarios.id IS '情景唯一标识符 (UUID)';
+COMMENT ON COLUMN user_scenarios.user_id IS '所属用户 ID，外键关联 users 表，用户删除时级联删除';
+COMMENT ON COLUMN user_scenarios.name IS '情景名称 (2-50 字符)，如"创意写作导师"';
+COMMENT ON COLUMN user_scenarios.icon IS 'Emoji 图标 (最多 20 字符)，支持复合 Emoji，如"🎨"';
+COMMENT ON COLUMN user_scenarios.description IS '简短描述 (最多 100 字符)，可选，显示在情景卡片上';
+COMMENT ON COLUMN user_scenarios.prompt IS '角色 System Prompt (最少 10 字符，无上限)，定义 AI 行为和对话风格';
+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 '情景最后更新时间';

docs/08-Eino框架与编排设计.md

@@ -1,9 +1,5 @@
 # CamTalk Eino 框架与编排设计
 
-> 创建日期：2026-06-19  
-> 状态：已实施  
-> 合并自：`10-Eino重构方案.md` + `11-Eino框架技术文档.md`
-
 ## 1. 概述
 
 ### 1.1 为什么选择 Eino

docs/09-情景切换.md

@@ -1,9 +1,5 @@
 # 情景切换功能
 
-**状态**: ✅ 已完成
-
----
-
 ## 功能概述
 
 情景切换功能允许用户选择不同的对话场景，AI 会根据选择的情景扮演不同的角色：

docs/10-鉴权体系.md

@@ -805,8 +805,9 @@ func (r *CachedUserRepository) DeleteRefreshToken(ctx, tokenHash) error {
 ```
 
 **降级策略**：
-- Redis 操作失败时记录日志，但不阻断主流程
+- Redis 操作失败时使用 `trace.FromContext(ctx)` 记录 Warn 日志（带 trace_id），但不阻断主流程
 - DB 是唯一真实数据源，Redis 仅用于加速
+- 详见 `docs/13-日志追踪.md` — 存储层日志实现
 
 ### 6. Gin 中间件实现
 

docs/11-令牌桶限流.md

@@ -360,7 +360,7 @@ if cfg.RateLimit.Enabled {
         logger.Log.Info("rate limiter initialized with Redis backend")
     } else {
         // 单实例：使用内存令牌桶
-        limiter = ratelimit.NewLimiter(cfg.RateLimit)
+        limiter = ratelimit.NewMemoryLimiter(cfg.RateLimit)
         logger.Log.Info("rate limiter initialized with in-memory backend")
     }
     defer limiter.Stop()
@@ -590,9 +590,9 @@ case "query":
     // 限流检查
     if limiter != nil {
         key := fmt.Sprintf("%s:query", userID)
-        allowed, retryAfter := limiter.Allow(context.Background(), key)
+        allowed, retryAfter := limiter.Allow(ctx, key)
         if !allowed {
-            logger.Log.Warnw("rate limited", "user_id", userID, "retry_after", retryAfter)
+            // 限流触发时自动记录 Warn 日志（在 limiter 内部使用 trace.FromContext）
             errors.SendWSError(client, errors.CodeRateLimited, msg.RequestID,
                 fmt.Errorf("rate limited, retry after %s", retryAfter.Round(time.Second)))
             continue
@@ -605,7 +605,7 @@ case "query":
 **设计要点**：
 - key 格式：`userID:query`（用户级限流）
 - 拒绝时发送 `RATE_LIMITED` 错误到客户端
-- 记录警告日志（便于监控告警）
+- 限流触发时 `RedisLimiter.Allow` 内部自动记录 Warn 日志（带 trace_id，详见 `docs/13-日志追踪.md`）
 - 不阻塞其他消息类型（`ping`/`config`/`interrupt` 不限流）
 
 ### 配置加载与依赖注入

docs/12-自定义情景.md

@@ -0,0 +1,425 @@
+# 自建情景功能
+
+## 概述
+
+用户可以创建自己的情景，而不仅限于系统预置的 5 种情景。
+
+**系统预置情景**（不可修改）：
+- 💬 自由对话
+- 🎯 模拟面试官
+- 📚 英语老师
+- ⚔️ 辩论对手
+- 🌐 同声翻译
+
+**用户自建情景**（可增删改）：
+- 🎨 创意写作导师
+- 🧘 心理咨询师
+- 👨‍🍳 私人厨师
+- 📖 历史学家
+- ... （用户自由创建）
+
+**用户旅程**：
+
+```
+1. 用户点击"创建情景"按钮
+   ↓
+2. 弹出创建对话框
+   ↓
+3. 填写表单：
+   - 情景名称（必填）
+   - 情景图标（可选）
+   - 简短描述（可选）
+   - 角色 Prompt（必填，最少 10 字）
+   - 首句引导（可选）
+   ↓
+4. 点击"创建"
+   ↓
+5. 情景保存到数据库
+   ↓
+6. 情景出现在选择列表中
+   ↓
+7. 用户切换到自建情景
+   ↓
+8. AI 按照用户设定的 Prompt 扮演角色
+```
+
+**核心特性**：完整 CRUD 操作（创建/查看/编辑/删除），通过 `user_id` 实现用户数据完全隔离，Eino Graph 管线深度集成（动态加载自建情景 Prompt），中文/英文/日文全覆盖，Modal 对话框 + 图标选择器 + Prompt 编写指南，创建后立即可用无需刷新。
+
+## 技术架构
+
+### 数据流
+
+**创建情景**：
+
+```
+用户填写表单 → POST /api/scenarios → Handler 验证
+→ Repository.Create → PostgreSQL 插入 → 返回情景对象
+```
+
+**AI 对话使用自建情景**：
+
+```
+WebSocket 连接 → ServeWS 获取 userID
+→ Eino Graph 初始化 → nodes_history 查询 user_scenarios
+→ GetScenarioPrompt(customScenarios) → 构建 System Prompt
+→ LLM 生成回复
+```
+
+### Eino 框架集成
+
+**数据传递链路**：
+
+```
+JWT Token → userID
+    ↓
+Session.UserID
+    ↓
+PipelineInput.UserID
+    ↓
+PipelineState.UserID
+    ↓
+nodes_history.go: scenarioRepo.FindByUserID(userID)
+    ↓
+构建 customScenarios map[string]string
+    ↓
+llm.GetScenarioPrompt(scenarioID, language, customScenarios)
+    ↓
+LLM 使用自建情景 Prompt
+```
+
+**关键修改文件**：
+
+| 文件 | 变更说明 |
+|------|----------|
+| `backend/internal/eino/state.go` | PipelineState 添加 `UserID` |
+| `backend/internal/eino/types.go` | PipelineInput 添加 `UserID` |
+| `backend/internal/eino/graph.go` | 接受 `scenarioRepo` 参数 |
+| `backend/internal/eino/adapter.go` | 设置 UserID |
+| `backend/internal/eino/nodes_history.go` | 查询自建情景 |
+| `backend/internal/ws/handler.go` | 首句引导支持自建情景 |
+
+## 数据模型
+
+### 数据库表结构
+
+**表名**: `user_scenarios`
+
+```sql
+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 '✨',
+    description VARCHAR(100),  -- 可选
+    prompt TEXT NOT NULL,
+    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 (description IS NULL OR char_length(description) <= 100),
+    CONSTRAINT check_prompt_length CHECK (char_length(prompt) >= 10 AND char_length(prompt) <= 2000),
+    CONSTRAINT check_greeting_length CHECK (greeting IS NULL OR char_length(greeting) <= 500)
+);
+
+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);
+```
+
+**字段说明**:
+
+| 字段 | 说明 |
+|------|------|
+| `id` | 情景唯一标识 |
+| `user_id` | 所属用户，实现数据隔离 |
+| `name` | 情景名称（2-50 字符） |
+| `icon` | Emoji 图标（默认 ✨） |
+| `description` | 简短描述（可选，最多 100 字符） |
+| `prompt` | 角色 System Prompt（10-2000 字符） |
+| `greeting` | 首句引导（可选，最多 500 字符） |
+| `language` | 默认语言（zh-CN / en-US / ja-JP） |
+
+### 后端数据模型
+
+```go
+// backend/internal/models/user_scenario.go
+
+type UserScenario struct {
+    ID          string    `json:"id"`
+    UserID      string    `json:"user_id"`
+    Name        string    `json:"name"`
+    Icon        string    `json:"icon"`
+    Description string    `json:"description"`
+    Prompt      string    `json:"prompt"`
+    Greeting    string    `json:"greeting,omitempty"`
+    Language    string    `json:"language"`
+    CreatedAt   time.Time `json:"created_at"`
+    UpdatedAt   time.Time `json:"updated_at"`
+}
+
+type CreateUserScenarioRequest struct {
+    Name        string `json:"name" binding:"required,min=2,max=50"`
+    Icon        string `json:"icon,omitempty"`
+    Description string `json:"description,omitempty" binding:"omitempty,max=100"`
+    Prompt      string `json:"prompt" binding:"required,min=10,max=2000"`
+    Greeting    string `json:"greeting,omitempty" binding:"omitempty,max=500"`
+    Language    string `json:"language,omitempty"`
+}
+```
+
+### 前端数据结构
+
+```typescript
+// frontend/src/lib/api/scenarios.ts
+
+export interface UserScenario {
+  id: string;
+  user_id: string;
+  name: string;
+  icon: string;
+  description: string;
+  prompt: string;
+  greeting?: string;
+  language: string;
+  created_at: string;
+  updated_at: string;
+}
+
+// frontend/src/hooks/useScenarios.ts
+
+export interface ExtendedScenario {
+  id: string;
+  icon: string;
+  name: string;
+  nameKey?: string;
+  description?: string;
+  descKey?: string;
+  isCustom: boolean;
+  prompt?: string;
+  greeting?: string;
+  language?: string;
+}
+```
+
+## REST API
+
+### API 端点
+
+| 方法 | 路径 | 说明 | 权限 |
+|------|------|------|------|
+| GET | `/api/scenarios` | 获取用户的所有自建情景 | 需登录 |
+| POST | `/api/scenarios` | 创建新情景 | 需登录 |
+| GET | `/api/scenarios/:id` | 获取单个情景详情 | 需登录 |
+| PATCH | `/api/scenarios/:id` | 更新情景 | 需登录 |
+| DELETE | `/api/scenarios/:id` | 删除情景 | 需登录 |
+
+### API 示例
+
+**创建情景**：
+
+```http
+POST /api/scenarios
+Authorization: Bearer <access_token>
+Content-Type: application/json
+
+{
+  "name": "创意写作导师",
+  "icon": "✨",
+  "description": "帮助构思故事情节和写作技巧",
+  "prompt": "你是一位创意写作导师，帮助用户构思故事情节、人物设定和写作技巧...",
+  "greeting": "你好！我是你的创意写作导师。今天想聊聊什么故事创意呢？",
+  "language": "zh-CN"
+}
+```
+
+响应 201 Created：
+
+```json
+{
+  "id": "uuid-xxx",
+  "user_id": "uuid-user",
+  "name": "创意写作导师",
+  "icon": "✨"
+}
+```
+
+**获取列表**：
+
+```http
+GET /api/scenarios
+Authorization: Bearer <access_token>
+```
+
+响应 200 OK：
+
+```json
+{
+  "scenarios": [],
+  "total": 3
+}
+```
+
+## 前端实现
+
+### 组件结构
+
+```
+frontend/src/
+├── components/
+│   ├── CreateScenarioModal/
+│   │   └── index.tsx          # 创建情景对话框
+│   ├── EditScenarioModal/
+│   │   └── index.tsx          # 编辑情景对话框
+│   └── ConfigPanel/
+│       └── index.tsx          # 设置面板（改造）
+├── hooks/
+│   └── useScenarios.ts        # 情景管理 Hook
+└── lib/
+    └── api/
+        └── scenarios.ts        # API 调用封装
+```
+
+### 核心 Hook
+
+```typescript
+// useScenarios.ts
+
+export function useScenarios(token: string | null) {
+  const [allScenarios, setAllScenarios] = useState<ExtendedScenario[]>([]);
+
+  // 合并系统预置 + 用户自建
+  useEffect(() => {
+    const systemScenarios = scenarios.map(s => ({...s, isCustom: false}));
+    const customScenarios = customList.map(s => ({...s, isCustom: true}));
+    setAllScenarios([...systemScenarios, ...customScenarios]);
+  }, [customList]);
+
+  return {
+    allScenarios,
+    createScenario,
+    updateScenario,
+    deleteScenario,
+  };
+}
+```
+
+### 创建情景表单
+
+**表单字段**：
+
+- 名称（必填，2-50 字符）
+- 图标（可选，24 个预设 emoji）
+- 描述（可选，最多 100 字符）
+- Prompt（必填，10-2000 字符）
+- 首句引导（可选，最多 500 字符）
+- 语言（可选，默认 zh-CN）
+
+**表单验证**：
+
+- 实时字符计数
+- 长度限制提示
+- 必填项高亮
+
+## 使用指南
+
+### 后端 API 测试
+
+```bash
+# 1. 注册用户
+curl -X POST http://localhost:8080/api/auth/register \
+  -H "Content-Type: application/json" \
+  -d '{"username":"testuser","password":"test12345"}'
+
+# 2. 创建情景
+TOKEN="<access_token>"
+curl -X POST http://localhost:8080/api/scenarios \
+  -H "Authorization: Bearer $TOKEN" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "name": "创意写作导师",
+    "icon": "✨",
+    "prompt": "你是一位创意写作导师...",
+    "language": "zh-CN"
+  }'
+
+# 3. 获取列表
+curl -X GET http://localhost:8080/api/scenarios \
+  -H "Authorization: Bearer $TOKEN"
+
+# 4. 更新情景
+curl -X PATCH http://localhost:8080/api/scenarios/<id> \
+  -H "Authorization: Bearer $TOKEN" \
+  -H "Content-Type: application/json" \
+  -d '{"name":"高级写作导师"}'
+
+# 5. 删除情景
+curl -X DELETE http://localhost:8080/api/scenarios/<id> \
+  -H "Authorization: Bearer $TOKEN"
+```
+
+### 前端功能测试
+
+1. 刷新浏览器（Cmd+Shift+R）
+2. 登录账户
+3. 打开设置面板（右上角齿轮）
+4. 滚动到"我的情景"区域
+5. 点击"+ 创建新情景"
+6. 填写表单并提交
+7. 验证列表中出现新情景
+8. 切换到自建情景，验证首句引导
+9. 发送消息，验证 AI 使用自建 Prompt
+10. 编辑情景，验证数据预填充
+11. 删除情景，验证二次确认
+
+## 安全与限制
+
+### 用户配额
+
+```go
+const MaxScenariosPerUser = 20  // 每个用户最多 20 个自建情景
+```
+
+### 权限控制
+
+- 只能查看/编辑/删除自己的情景
+- 系统预置情景不可编辑/删除
+- 后端验证 `user_id` 匹配
+
+### 数据验证
+
+**后端**：
+
+- 名称：2-50 字符
+- 描述：可选，最多 100 字符
+- Prompt：10-2000 字符
+- 首句引导：可选，最多 500 字符
+
+**前端**：
+
+- 实时字符计数
+- 超长提示
+- 必填项高亮
+
+## 未来优化方向
+
+**V1.1**：
+
+- Prompt 模板库
+- 实时预览效果
+- 导入导出功能
+- 情景搜索和筛选
+
+**V2.0**：
+
+- 情景市场
+- 情景分享链接
+- AI 辅助优化 Prompt
+- 协作编辑（团队情景）
+
+## 参考资料
+
+- [CLAUDE.md](../CLAUDE.md) — 项目开发指南
+- [02-接口文档.md](./02-接口文档.md) — WebSocket 和 REST API
+- [自建情景功能-权限隔离说明.md](./自建情景功能-权限隔离说明.md) — 安全设计

docs/13-日志追踪.md

@@ -0,0 +1,544 @@
+# 日志追踪系统
+
+## 概述
+
+CamTalk 全链路日志追踪系统，通过统一的 trace ID 机制，将 REST API 和 WebSocket 两大入口的所有日志串联起来，实现分布式环境下的请求链路可观测性。
+
+**核心目标**：
+- 统一 trace ID 贯穿 REST/WebSocket 两大入口
+- 所有日志自动附加 trace_id/request_id/session_id
+- 保护用户隐私，敏感文本截断或降级
+- 支持按 trace_id 快速定位完整请求链路
+
+## Trace ID 作用域
+
+| 标识 | 作用域 | 生成时机 | 用途 |
+|-----|--------|---------|------|
+| `trace_id` | **连接级**（整个 WebSocket 生命周期）<br/>**请求级**（单次 REST 请求） | REST: 中间件生成<br/>WebSocket: 升级时生成 | 关联同一连接/请求的所有日志 |
+| `session_id` | 会话级（对话上下文存储） | ServeWS 时生成 | 标识会话存储 |
+| `request_id` | 查询级（单次 WebSocket 查询） | 客户端每次查询传入 | 区分同一连接的不同查询 |
+
+**WebSocket 场景示例**：用户打开页面建立 WebSocket，发起 3 次对话查询：
+
+```
+连接建立    trace_id=01J5AAA  session_id=uuid-123
+  ├─ 查询1  trace_id=01J5AAA  request_id=req-001  (问天气)
+  ├─ 查询2  trace_id=01J5AAA  request_id=req-002  (问新闻)
+  └─ 查询3  trace_id=01J5AAA  request_id=req-003  (问股票)
+```
+
+**REST 场景示例**：
+
+```
+POST /api/auth/login    trace_id=01J5BBB  request_id=01J5BBB
+GET  /api/conversations trace_id=01J5CCC  request_id=01J5CCC
+```
+
+## 核心组件
+
+```mermaid
+graph TB
+    subgraph trace包["trace 包"]
+        ID["id.go<br/>ULID 生成器"]
+        CTX["context.go<br/>context key 管理"]
+        LOG["logger.go<br/>context-aware logger"]
+        MW["middleware.go<br/>Gin trace 中间件"]
+    end
+    
+    subgraph logger包["logger 包"]
+        GINLOG["middleware.go<br/>Gin 请求日志"]
+        GINREC["GinRecovery<br/>panic 恢复"]
+    end
+    
+    subgraph 入口层["入口层"]
+        REST["REST API<br/>trace 中间件注入"]
+        WS["WebSocket<br/>ServeWS 注入"]
+    end
+    
+    subgraph 业务层["业务层"]
+        HANDLER["Handler"]
+        ADAPTER["Eino Adapter"]
+        NODES["Eino Nodes"]
+    end
+    
+    subgraph 存储层["存储层"]
+        PG["PostgreSQL<br/>session/user/message/scenario"]
+        REDIS["Redis<br/>session/cache/ratelimit"]
+    end
+    
+    ID --> MW
+    CTX --> LOG
+    LOG --> HANDLER
+    LOG --> ADAPTER
+    LOG --> NODES
+    LOG --> PG
+    LOG --> REDIS
+    MW --> REST
+    GINLOG --> REST
+    WS --> LOG
+```
+
+### trace/id.go — ULID 生成器
+
+使用 ULID（Universally Unique Lexicographically Sortable Identifier）作为 trace ID：
+- 时间排序：前 48 位是毫秒时间戳，天然按时间排序
+- 唯一性：后 80 位随机数，冲突概率极低
+- 并发安全：使用 `crypto/rand` + `sync.Pool` 复用 entropy 对象
+
+```go
+package trace
+
+import (
+    cryptorand "crypto/rand"
+    "sync"
+    "time"
+    "github.com/oklog/ulid/v2"
+)
+
+var entropyPool = sync.Pool{
+    New: func() interface{} {
+        return ulid.Monotonic(cryptorand.Reader, 0)
+    },
+}
+
+// GenerateTraceID 生成并发安全的 ULID trace ID
+func GenerateTraceID() string {
+    entropy := entropyPool.Get().(*ulid.MonotonicEntropy)
+    defer entropyPool.Put(entropy)
+    return ulid.MustNew(ulid.Timestamp(time.Now()), entropy).String()
+}
+```
+
+### trace/context.go — Context Key 管理
+
+统一管理所有 trace 相关的 context key：
+
+```go
+package trace
+
+import "context"
+
+type traceIDKey struct{}
+type requestIDKey struct{}
+type sessionIDKey struct{}
+
+// WithTraceID 将 trace ID 注入 context
+func WithTraceID(ctx context.Context, traceID string) context.Context {
+    return context.WithValue(ctx, traceIDKey{}, traceID)
+}
+
+func GetTraceID(ctx context.Context) string {
+    if v, ok := ctx.Value(traceIDKey{}).(string); ok {
+        return v
+    }
+    return ""
+}
+
+// 类似定义 WithRequestID/GetRequestID 和 WithSessionID/GetSessionID
+```
+
+### trace/logger.go — Context-Aware Logger
+
+自动从 context 提取 trace 字段并附加到日志：
+
+```go
+package trace
+
+import (
+    "context"
+    "github.com/hhs/camtalk/internal/logger"
+    "go.uber.org/zap"
+)
+
+// FromContext 返回自动附加 trace_id/request_id/session_id 的 logger
+func FromContext(ctx context.Context) *zap.SugaredLogger {
+    log := logger.Log
+    
+    if traceID := GetTraceID(ctx); traceID != "" {
+        log = log.With("trace_id", traceID)
+    }
+    if requestID := GetRequestID(ctx); requestID != "" {
+        log = log.With("request_id", requestID)
+    }
+    if sessionID := GetSessionID(ctx); sessionID != "" {
+        log = log.With("session_id", sessionID)
+    }
+    
+    return log
+}
+```
+
+**使用模式对比**：
+
+```go
+// Before: 手动传递字段
+logger.Log.Infow("message", "session", sessionID, "request", requestID)
+
+// After: 自动附加
+trace.FromContext(ctx).Infow("message")
+```
+
+### trace/middleware.go — Gin Trace 中间件
+
+为 REST 请求生成 trace ID 并注入 context：
+
+```go
+package trace
+
+import "github.com/gin-gonic/gin"
+
+// TraceMiddleware 为每个 HTTP 请求生成 trace ID 并注入 context
+func TraceMiddleware() gin.HandlerFunc {
+    return func(c *gin.Context) {
+        traceID := GenerateTraceID()
+        ctx := WithTraceID(c.Request.Context(), traceID)
+        ctx = WithRequestID(ctx, traceID) // REST: trace_id == request_id
+        
+        c.Request = c.Request.WithContext(ctx)
+        c.Header("X-Trace-ID", traceID) // 返回给客户端用于排查
+        
+        c.Next()
+    }
+}
+```
+
+### logger/middleware.go — 请求日志与 Panic 恢复
+
+记录所有 HTTP 请求的 method/path/status/latency：
+
+```go
+package logger
+
+import (
+    "time"
+    "github.com/gin-gonic/gin"
+    "github.com/hhs/camtalk/internal/trace"
+)
+
+// GinLogger 记录每个 HTTP 请求的基础信息
+func GinLogger() gin.HandlerFunc {
+    return func(c *gin.Context) {
+        start := time.Now()
+        path := c.Request.URL.Path
+        
+        c.Next()
+        
+        latency := time.Since(start).Milliseconds()
+        status := c.Writer.Status()
+        log := trace.FromContext(c.Request.Context())
+        
+        switch {
+        case status >= 500:
+            log.Errorw("request completed", "method", c.Request.Method, 
+                "path", path, "status", status, "latency_ms", latency)
+        case status >= 400:
+            log.Warnw("request completed", "method", c.Request.Method,
+                "path", path, "status", status, "latency_ms", latency)
+        default:
+            log.Infow("request completed", "method", c.Request.Method,
+                "path", path, "status", status, "latency_ms", latency)
+        }
+    }
+}
+
+// GinRecovery 自定义 panic 恢复中间件
+func GinRecovery() gin.HandlerFunc {
+    return func(c *gin.Context) {
+        defer func() {
+            if err := recover(); err != nil {
+                log := trace.FromContext(c.Request.Context())
+                log.Errorw("panic recovered", "error", err,
+                    "path", c.Request.URL.Path, "method", c.Request.Method)
+                c.AbortWithStatus(500)
+            }
+        }()
+        c.Next()
+    }
+}
+```
+
+## 中间件注册顺序
+
+在 `cmd/server/main.go` 中，三层中间件按顺序注册：
+
+```go
+r := gin.New()
+r.Use(trace.TraceMiddleware())    // 第一层：生成 trace ID
+r.Use(logger.GinLogger())          // 第二层：记录请求
+r.Use(logger.GinRecovery())        // 第三层：panic 恢复
+```
+
+## 日志输出示例
+
+### REST 请求
+
+```json
+{
+  "level": "info",
+  "ts": 1718956800.123,
+  "msg": "login success",
+  "trace_id": "01J5A2B3C4D5E6F7G8H9J0K1M",
+  "request_id": "01J5A2B3C4D5E6F7G8H9J0K1M",
+  "username": "test_user"
+}
+```
+
+### WebSocket 查询链路（含存储层）
+
+```json
+// 1. 查询接收
+{"level":"info", "trace_id":"01J5XXX", "session_id":"abc-123", "request_id":"req-456", "msg":"query received"}
+
+// 2. 会话加载（Redis）
+{"level":"debug", "trace_id":"01J5XXX", "session_id":"abc-123", "request_id":"req-456", "msg":"redis session retrieved", "session_id":"abc-123"}
+
+// 3. STT 完成
+{"level":"debug", "trace_id":"01J5XXX", "session_id":"abc-123", "request_id":"req-456", "msg":"stt recognition completed", "text_len":45}
+
+// 4. LLM 完成
+{"level":"info", "trace_id":"01J5XXX", "session_id":"abc-123", "request_id":"req-456", "msg":"llm generation completed", "tokens":150}
+
+// 5. 消息持久化（PostgreSQL）
+{"level":"debug", "trace_id":"01J5XXX", "session_id":"abc-123", "request_id":"req-456", "msg":"message saved", "role":"user", "tokens_used":45}
+{"level":"debug", "trace_id":"01J5XXX", "session_id":"abc-123", "request_id":"req-456", "msg":"message saved", "role":"assistant", "tokens_used":150}
+
+// 6. Pipeline 完成
+{"level":"info", "trace_id":"01J5XXX", "session_id":"abc-123", "request_id":"req-456", "msg":"query processing completed", "latency_ms":2340}
+```
+
+### 限流触发场景
+
+```json
+{"level":"warn", "trace_id":"01J5YYY", "msg":"rate limit triggered", "key":"ratelimit:user-456:query", "retry_after_sec":2.5}
+```
+
+## 日志查询操作
+
+### 按 trace_id 查询完整链路
+
+**本地开发（文件日志）**：
+```bash
+# 查看完整链路
+grep 'trace_id":"01J5XXX"' backend.log | jq .
+
+# 查看链路时间线
+grep 'trace_id":"01J5XXX"' backend.log | jq -r '[.ts, .msg] | @tsv'
+```
+
+**Grafana Loki**：
+```logql
+{app="camtalk-backend"} 
+  |= "trace_id=01J5XXX" 
+  | json 
+  | line_format "{{.ts}} [{{.level}}] {{.msg}}"
+```
+
+### 查询慢请求（延迟 > 5s）
+
+```logql
+{app="camtalk-backend"} 
+  | json 
+  | msg="query processing completed" 
+  | latency_ms > 5000
+```
+
+### 查询数据库错误
+
+```logql
+{app="camtalk-backend"} 
+  | json 
+  | level="error" 
+  | msg=~".*failed" 
+  | line_format "{{.trace_id}} {{.msg}} {{.error}}"
+```
+
+### 查询 Redis 降级事件
+
+```logql
+{app="camtalk-backend"} 
+  | json 
+  | level="warn" 
+  | msg=~"redis.*failed"
+```
+
+### 查询错误率
+
+```logql
+sum(count_over_time({app="camtalk-backend"} | json | level="error" [5m]))
+```
+
+## 敏感内容处理规范
+
+### 完全禁止记录
+
+- 用户明文密码
+- JWT token 完整内容（仅记录 "token_present: true"）
+- API Key 完整值（仅记录前 8 字符 + "..."）
+
+### 截断后记录（最多 50 字符）
+
+- 用户输入文本 → `text_preview`
+- LLM 生成文本 → `text_preview`
+- STT 识别文本 → `text_preview`
+
+**示例**：
+```go
+log.Debugw("stt recognition completed",
+    "text_len", len(text),
+    "text_preview", util.Truncate(text, 50))
+```
+
+### 仅记录长度/大小
+
+- 图片数据 → `image_size_bytes`
+- 音频数据 → `audio_size_bytes`
+
+### 降级为 Debug 级别
+
+所有包含用户文本预览的日志，生产环境默认不输出。
+
+## 日志级别使用准则
+
+| 场景 | 级别 | 示例 |
+|-----|------|-----|
+| 请求生命周期里程碑 | Info | `"query received"`, `"pipeline completed"` |
+| 中间步骤详情 | Debug | `"stt recognition completed"`, `"history assembled"` |
+| 敏感内容相关 | Debug | 所有包含用户文本的日志 |
+| 预期内的失败 | Warn | `"login failed"`, `"rate limited"` |
+| 系统错误 | Error | `"database query failed"`, `"tts synthesis failed"` |
+| 严重故障 | Error + stack | `"panic recovered"` |
+
+## 存储层日志实现
+
+### PostgreSQL Repository 层
+
+所有数据库操作统一使用 `trace.FromContext(ctx)` 记录日志：
+
+**已实现文件**：
+- `backend/internal/store/session_pg.go` — 会话 CRUD
+- `backend/internal/store/user_pg.go` — 用户与 refresh token 操作
+- `backend/internal/store/message_pg.go` — 对话消息存储
+- `backend/internal/store/user_scenario_repository.go` — 用户自定义情景
+
+**日志策略**：
+
+```go
+func (r *PgSessionRepository) Save(ctx context.Context, s SessionRecord) error {
+    log := trace.FromContext(ctx)
+    
+    _, err := r.pool.Exec(ctx, ...)
+    if err != nil {
+        log.Errorw("save session failed", "session_id", s.ID, "error", err)
+        return err
+    }
+    
+    log.Debugw("session saved", "session_id", s.ID, "user_id", s.UserID)
+    return nil
+}
+```
+
+**NotFound 处理**：预期内的空结果不记录错误：
+
+```go
+if errors.Is(err, pgx.ErrNoRows) {
+    return nil, ErrSessionNotFound  // 不记录日志
+}
+if err != nil {
+    log.Errorw("find session failed", "session_id", id, "error", err)
+    return nil, err
+}
+```
+
+### Redis 服务层
+
+**已实现文件**：
+- `backend/internal/session/redis.go` — RedisManager（会话存储）
+- `backend/internal/store/cached_user.go` — CachedUserRepository（用户缓存装饰器）
+- `backend/internal/ratelimit/redis_bucket.go` — RedisLimiter（令牌桶限流器）
+
+**会话存储日志**（`redis.go`）：
+
+```go
+func (m *RedisManager) Get(ctx context.Context, sessionID string) (*models.Session, error) {
+    log := trace.FromContext(ctx)
+    
+    vals, err := m.rdb.HGetAll(ctx, metaKey(sessionID)).Result()
+    if err != nil {
+        log.Errorw("redis get session failed", "session_id", sessionID, "error", err)
+        return nil, fmt.Errorf("redis get session: %w", err)
+    }
+    
+    if len(vals) == 0 {
+        return nil, ErrSessionNotFound  // 不记录日志
+    }
+    
+    log.Debugw("redis session retrieved", "session_id", sessionID)
+    return session, nil
+}
+```
+
+**缓存降级日志**（`cached_user.go`）：
+
+```go
+if _, err := pipe.Exec(ctx); err != nil {
+    log := trace.FromContext(ctx)
+    log.Warnw("redis cache write failed for refresh token", "error", err)
+    // 降级：DB 已写入成功，Redis 失败不影响正确性
+}
+```
+
+**限流触发日志**（`redis_bucket.go`）：
+
+```go
+func (l *RedisLimiter) Allow(ctx context.Context, key string) (bool, time.Duration) {
+    log := trace.FromContext(ctx)
+    
+    result, err := l.script.Run(ctx, ...).Result()
+    if err != nil {
+        log.Errorw("rate limit check failed", "key", key, "error", err)
+        return true, 0  // fail-open 策略
+    }
+    
+    if allowed == 0 {
+        log.Warnw("rate limit triggered", "key", key, "retry_after_sec", retryAfterSec)
+        return false, retryAfter
+    }
+    
+    return true, 0
+}
+```
+
+**级别选择原则**：
+- **Error**：Redis 连接失败、Lua 脚本执行失败（影响功能）
+- **Warn**：缓存写入失败（可降级）、限流触发（预期内异常）
+- **Debug**：正常操作完成（避免 Info 级别噪音）
+
+## 编码规范
+
+1. **日志语言**：统一使用英文
+2. **结构化**：始终使用 `Infow`/`Errorw`/`Warnw`/`Debugw`
+3. **Context 传递**：使用 `trace.FromContext(ctx)` 而非直接引用 `logger.Log`
+4. **敏感内容**：禁止在 Info 及以上级别记录用户文本原文
+5. **错误日志**：采用"调用方记录"原则，底层函数 return wrapped error
+6. **级别约定**：
+   - `Debug`：内部状态跟踪、开发调试信息（数据库/缓存成功操作）
+   - `Info`：请求/连接生命周期、关键操作里程碑
+   - `Warn`：可降级异常（Redis 故障、限流触发）
+   - `Error`：影响用户的操作失败（数据库错误、Redis 连接失败）
+   - `Fatal`：仅启动阶段不可恢复错误
+7. **预期内的空结果**：`pgx.ErrNoRows`、`redis.Nil` 等不记录错误日志
+
+## 性能考量
+
+### FromContext 开销
+
+- 有 trace_id：~200-300 ns/op
+- 无 trace_id：~10-20 ns/op（仅返回全局 logger）
+- 1000 QPS 场景额外开销约 0.2ms，可接受
+
+### ULID 生成吞吐量
+
+- 单线程：~500k ops/s
+- 并发 8 线程：~2M ops/s
+
+**验收标准**：1000 QPS 下，trace 系统开销 < 1% CPU，< 0.5ms P99 延迟。

docs/README.md

@@ -17,6 +17,8 @@ CamTalk 是一款多模态实时 AI 视觉对话助手。用户通过摄像头
 | [09-情景切换](09-情景切换.md) | 多情景 AI 角色扮演系统（面试官、英语老师、辩论对手、翻译员、自由对话） |
 | [10-鉴权体系](10-鉴权体系.md) | JWT 双 token 轮转认证、bcrypt 密码哈希、Refresh Token Rotation、安全机制 |
 | [11-令牌桶限流](11-令牌桶限流.md) | 令牌桶限流算法、内存/Redis 双实现、Gin 中间件、WebSocket query 限流 |
+| [12-自定义情景](12-自定义情景.md) | 用户自定义情景的完整设计 |
+| [13-日志追踪](13-日志追踪.md) | 全链路日志追踪系统（trace ID、敏感内容保护、日志规范） |
 
 
 ## 推荐阅读顺序
@@ -30,6 +32,8 @@ CamTalk 是一款多模态实时 AI 视觉对话助手。用户通过摄像头
 7. **09-情景切换** — 多情景 AI 角色扮演系统
 8. **10-鉴权体系** — 认证授权机制详细设计
 9. **11-令牌桶限流** — 速率限制设计
+10. **12-自定义情景** — 用户自定义情景
+11. **13-日志追踪** — 全链路日志追踪（trace ID、敏感内容保护、开发参考）
 
 ## 功能扩展方向
 

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);
-}
-
-@keyframes slideInLeft {
-  from { transform: translateX(-100%); }
-  to { transform: translateX(0); }
+  transition: transform 0.2s ease-out, visibility 0s linear 0.2s;
 }
 
 .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 {
@@ -644,12 +659,6 @@ body {
   transition: all var(--transition-fast);
 }
 
-.ai-vision-indicator--active {
-  color: var(--color-success);
-  background: rgba(52, 211, 153, 0.15);
-  animation: pulse 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
-}
-
 /* ---- 视频控制栏 ---- */
 
 .video-controls {
@@ -658,7 +667,7 @@ body {
   flex-direction: column;
   align-items: center;
   gap: 10px;
-  padding: 8px 0;
+  padding: 10px 0 4px;
 }
 
 .video-controls__row {
@@ -750,16 +759,6 @@ body {
   gap: 10px;
 }
 
-.chat-panel-header__mode {
-  font-size: 0.68rem;
-  font-weight: 500;
-  color: var(--color-success);
-  background: rgba(52, 211, 153, 0.08);
-  padding: 3px 10px;
-  border-radius: 12px;
-  letter-spacing: 0.02em;
-}
-
 /* ---- Scenario Quick Selector (chat header) ---- */
 .scenario-selector {
   appearance: none;
@@ -916,6 +915,8 @@ body {
   gap: 10px;
   padding: 6px 0;
   background: transparent;
+  max-width: 100%;
+  align-self: center;
 }
 
 .chat-message--system::before,
@@ -1090,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 {
@@ -1103,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 {
@@ -1375,9 +1394,9 @@ body {
   to { opacity: 1; }
 }
 
-@keyframes slideInRight {
-  from { transform: translateX(100%); }
-  to { transform: translateX(0); }
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 /* ---- Scrollbar ---- */
@@ -1403,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);
@@ -1432,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;
-  letter-spacing: 0.01em;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .device-select {
-  padding: 5px 10px;
-  font-size: 0.72rem;
-  border-radius: var(--radius-sm);
+  flex: 1;
+  min-width: 0;
+  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-align: center;
+  text-overflow: ellipsis;
 }
 
 .device-select:hover {
@@ -1473,38 +1744,6 @@ body {
   outline-offset: 1px;
 }
 
-/* Mode switcher */
-.video-controls__mode {
-  display: flex;
-  gap: 2px;
-  background: var(--color-surface-2);
-  border-radius: var(--radius-sm);
-  padding: 2px;
-  justify-content: center;
-}
-
-.mode-btn {
-  background: none;
-  border: none;
-  color: var(--color-text-muted);
-  font-size: 0.7rem;
-  font-weight: 500;
-  padding: 5px 12px;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  white-space: nowrap;
-}
-
-.mode-btn:hover {
-  color: var(--color-text);
-}
-
-.mode-btn--active {
-  background: var(--color-primary);
-  color: white;
-}
-
 /* ---- Text-only mode (video ended, chat preserved) ---- */
 
 .video-controls__text-only {
@@ -1972,3 +2211,420 @@ body {
   background: rgba(248, 113, 113, 0.15);
   border-color: rgba(248, 113, 113, 0.4);
 }
+
+/* ============================================================
+   Custom Scenarios Styles — 白色商务风格（使用 CSS 变量）
+   ============================================================ */
+
+/* Scenario list */
+.scenario-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.scenario-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.scenario-item:hover {
+  background: var(--color-surface-3);
+  border-color: var(--color-surface-3);
+}
+
+.scenario-item input[type="radio"] {
+  cursor: pointer;
+}
+
+.scenario-item__icon {
+  font-size: 20px;
+  line-height: 1;
+}
+
+.scenario-item__name {
+  flex: 1;
+  font-size: 14px;
+  color: var(--color-text);
+}
+
+.scenario-item__desc {
+  font-size: 12px;
+  color: var(--color-text-muted);
+  margin-top: 2px;
+}
+
+/* Custom scenario with edit/delete buttons */
+.scenario-item--custom {
+  padding: 8px 10px;
+}
+
+.scenario-item__radio {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  cursor: pointer;
+}
+
+.scenario-item__info {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 2px;
+}
+
+.scenario-item__actions {
+  display: flex;
+  gap: 6px;
+  margin-left: auto;
+}
+
+.scenario-action-btn {
+  padding: 4px 8px;
+  background: transparent;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.scenario-action-btn:hover {
+  background: var(--color-surface-2);
+  border-color: var(--color-surface-3);
+  color: var(--color-text);
+}
+
+.scenario-action-btn--confirm {
+  background: rgba(248, 113, 113, 0.1);
+  border-color: rgba(248, 113, 113, 0.2);
+  color: var(--color-error);
+}
+
+.scenario-empty {
+  padding: 16px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--color-text-muted);
+  font-style: italic;
+}
+
+/* Create scenario button */
+.config-create-btn {
+  margin-left: auto;
+  padding: 4px 12px;
+  font-size: 12px;
+  background: rgba(59, 130, 246, 0.08);
+  border: 1px solid rgba(59, 130, 246, 0.2);
+  border-radius: 999px;
+  color: var(--color-primary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.config-create-btn:hover {
+  background: rgba(59, 130, 246, 0.16);
+  border-color: rgba(59, 130, 246, 0.4);
+}
+
+.config-group__title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* Modal overlay */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  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: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  width: 90%;
+  max-width: 600px;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 16px 48px rgba(10, 10, 15, 0.25);
+  animation: slideUp 0.3s;
+}
+
+.modal--large {
+  max-width: 700px;
+}
+
+.modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.modal__title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-text);
+  letter-spacing: -0.01em;
+}
+
+.modal__close {
+  background: transparent;
+  border: none;
+  font-size: 20px;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-fast);
+}
+
+.modal__close:hover {
+  background: var(--color-surface-2);
+  color: var(--color-text);
+}
+
+.modal__body {
+  padding: 24px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.modal__footer {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  padding-top: 16px;
+  border-top: 1px solid var(--color-border);
+  margin-top: 8px;
+}
+
+/* Form elements */
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text);
+  margin-bottom: 8px;
+}
+
+.form-required {
+  color: var(--color-primary);
+}
+
+.form-input,
+.form-textarea,
+.form-select {
+  width: 100%;
+  padding: 10px 12px;
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  color: var(--color-text);
+  font-size: 14px;
+  font-family: inherit;
+  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: var(--color-primary);
+  background: var(--color-surface);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.form-textarea {
+  resize: vertical;
+  min-height: 80px;
+  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+  line-height: 1.6;
+}
+
+.form-hint {
+  display: block;
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
+
+.form-error {
+  padding: 12px;
+  background: rgba(248, 113, 113, 0.08);
+  border: 1px solid rgba(248, 113, 113, 0.2);
+  border-radius: var(--radius-sm);
+  color: var(--color-error);
+  font-size: 13px;
+  margin-top: 12px;
+}
+
+/* Icon picker */
+.icon-picker {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.icon-picker__item {
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.icon-picker__item:hover {
+  background: var(--color-surface-3);
+  border-color: var(--color-surface-3);
+  transform: scale(1.05);
+}
+
+.icon-picker__item--active {
+  background: rgba(59, 130, 246, 0.1);
+  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: var(--color-primary);
+  font-size: 12px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+  margin-left: auto;
+  transition: all var(--transition-fast);
+}
+
+.form-guide-btn:hover {
+  background: rgba(59, 130, 246, 0.06);
+}
+
+.form-guide {
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  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: var(--color-text);
+}
+
+.form-guide ul {
+  margin: 8px 0;
+  padding-left: 20px;
+  color: var(--color-text-muted);
+}
+
+.form-guide__code {
+  background: var(--color-surface-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding: 12px;
+  margin-top: 8px;
+  overflow-x: auto;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--color-text);
+}
+
+/* Buttons (modal-scoped overrides — only affect modal context) */
+.modal .btn {
+  padding: 10px 20px;
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  border: 1px solid transparent;
+}
+
+.modal .btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.modal .btn--primary {
+  background: var(--color-primary);
+  color: white;
+  border-color: var(--color-primary);
+}
+
+.modal .btn--primary:hover:not(:disabled) {
+  background: var(--color-primary-hover);
+  border-color: var(--color-primary-hover);
+}
+
+.modal .btn--secondary {
+  background: var(--color-surface-2);
+  color: var(--color-text-muted);
+  border-color: var(--color-border);
+}
+
+.modal .btn--secondary:hover:not(:disabled) {
+  background: var(--color-surface-3);
+  border-color: var(--color-surface-3);
+  color: var(--color-text);
+}
+
+/* Animations — fadeIn & slideUp defined in main animation section above */

frontend/src/App.tsx

@@ -7,33 +7,74 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { v4 as uuidv4 } from "uuid";
 import { useVisionSession } from "./hooks/useVisionSession";
 import { useSessionList } from "./hooks/useSessionList";
+import { useScenarios } from "./hooks/useScenarios";
 import { VideoPreview } from "./components/VideoPreview";
 import { ChatPanel } from "./components/ChatPanel";
 import { ConfigPanel } from "./components/ConfigPanel";
 import { SessionSidebar } from "./components/SessionSidebar";
 import { ToastContainer } from "./components/Toast";
 import { LandingPage } from "./components/LandingPage";
+import { CreateScenarioModal } from "./components/CreateScenarioModal";
+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 { scenarios } from "./lib/scenarios";
+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";
 
-/** AI 视觉模式 */
-type VisionMode = "realtime" | "ondemand" | "chat";
+// ---- 统一 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();
   const [showConfig, setShowConfig] = useState(false);
+  const [showCreateScenario, setShowCreateScenario] = useState(false);
+  const [editingScenario, setEditingScenario] = useState<UserScenario | null>(null);
   const [theme, setTheme] = useState<Theme>(loadTheme);
   const [elapsed, setElapsed] = useState(0);
   const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [visionMode, setVisionMode] = useState<VisionMode>("ondemand");
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
+  // ---- 自建情景管理 ----
+  const {
+    allScenarios,
+    createScenario,
+    updateScenario,
+    deleteScenario,
+  } = useScenarios(accessToken);
+
   // 切换主题时更新 <html> 的 data-theme 属性
   useEffect(() => {
     document.documentElement.setAttribute("data-theme", theme);
@@ -78,8 +119,6 @@ function AppContent() {
     config,
     updateConfig,
     stats,
-    mode,
-    isObserving,
     startSession,
     stopSession,
     stopVideo,
@@ -89,6 +128,9 @@ function AppContent() {
     toggleCamera,
     toggleMic,
     sendTextMessage,
+    cameras,
+    mics,
+    switchDevice,
   } = useVisionSession(accessToken, activeSessionId);
 
   const isConnected = connectionStatus === "connected";
@@ -185,15 +227,24 @@ function AppContent() {
 
   // ---- 情景选择 ----
   const handleSelectScenario = useCallback((scenarioId: string) => {
-    const sc = scenarios.find(s => s.id === scenarioId);
+    const sc = allScenarios.find((s) => s.id === scenarioId);
     const updates: Partial<import("./types").SessionConfig> = { scenario: scenarioId };
-    // 如果情景有默认语言，同步切换
-    if (sc?.defaultLanguage) {
-      updates.language = sc.defaultLanguage;
+    // 如果情景有默认语言，同步切换（仅系统预置情景）
+    if (sc && !sc.isCustom) {
+      const systemScenario = sc as any;
+      if (systemScenario.defaultLanguage) {
+        updates.language = systemScenario.defaultLanguage;
+      }
     }
     updateConfig(updates);
-    // 插入系统提示消息
-    const scenarioName = sc ? `${sc.icon} ${tr(sc.nameKey)}` : scenarioId;
+    // 插入系统提示消息（自建情景的 icon 是 SVG ID，需转为 emoji）
+    const iconText = sc
+      ? (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",
@@ -202,9 +253,6 @@ function AppContent() {
     }]);
   }, [updateConfig, setMessages, tr]);
 
-  // 当前情景对象
-  const activeScenario = scenarios.find(s => s.id === (config.scenario || "free_chat")) || scenarios[0];
-
   // ---- 键盘快捷键 ----
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
@@ -281,22 +329,52 @@ 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
-          config={config}
-          theme={theme}
-          username={user?.username}
-          onUpdate={updateConfig}
-          onThemeChange={handleThemeChange}
-          onLogout={logout}
-          onClose={() => setShowConfig(false)}
+      <ConfigPanel
+        config={config}
+        theme={theme}
+        username={user?.username}
+        allScenarios={allScenarios}
+        open={showConfig}
+        onUpdate={updateConfig}
+        onThemeChange={handleThemeChange}
+        onLogout={logout}
+        onClose={() => setShowConfig(false)}
+        onCreateScenario={() => {
+          setShowConfig(false);
+          setShowCreateScenario(true);
+        }}
+        onEditScenario={(scenario) => {
+          setShowConfig(false);
+          setEditingScenario(scenario);
+        }}
+        onDeleteScenario={deleteScenario}
+      />
+
+      {/* 创建情景 Modal */}
+      {showCreateScenario && (
+        <CreateScenarioModal
+          onClose={() => setShowCreateScenario(false)}
+          onSubmit={async (data) => {
+            await createScenario(data);
+          }}
+        />
+      )}
+
+      {/* 编辑情景 Modal */}
+      {editingScenario && (
+        <EditScenarioModal
+          scenario={editingScenario}
+          onClose={() => setEditingScenario(null)}
+          onSubmit={async (id, data) => {
+            await updateScenario(id, data);
+          }}
         />
       )}
 
@@ -316,13 +394,13 @@ function AppContent() {
               <div className="detail-badge">HD</div>
             )}
             {/* AI 视觉状态指示 */}
-            {isConnected && visionMode !== "chat" && (
-              <div className={`ai-vision-indicator ${isObserving ? "ai-vision-indicator--active" : ""}`}>
+            {isConnected && (
+              <div className="ai-vision-indicator">
                 <svg width="14" height="14" 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>
-                <span>{isObserving ? tr("video.observing") : "AI"}</span>
+                <span>AI</span>
               </div>
             )}
             {isSpeaking && (
@@ -332,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">
@@ -355,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 ? (
@@ -363,100 +472,105 @@ function AppContent() {
                 <button className="btn btn--primary btn--lg" onClick={startSession}>
                   {connectionStatus === "connecting" ? tr("controls.connecting") : tr("controls.startVideo")}
                 </button>
-                {/* 设备选择器 */}
-                <div className="video-controls__devices">
-                  <div className="device-select-wrapper">
-                    <label className="device-select-label">📷 {tr("controls.device.camera")}</label>
-                    <select className="device-select" defaultValue="default">
-                      <option value="default">{tr("controls.device.default")}</option>
-                    </select>
-                  </div>
-                  <div className="device-select-wrapper">
-                    <label className="device-select-label">🎤 {tr("controls.device.mic")}</label>
-                    <select className="device-select" defaultValue="default">
-                      <option value="default">{tr("controls.device.default")}</option>
-                    </select>
-                  </div>
-                </div>
-                {/* 模式切换器 */}
-                <div className="video-controls__mode">
-                  <button
-                    className={`mode-btn ${visionMode === "realtime" ? "mode-btn--active" : ""}`}
-                    onClick={() => setVisionMode("realtime")}
-                  >
-                    {tr("controls.mode.realtime")}
-                  </button>
-                  <button
-                    className={`mode-btn ${visionMode === "ondemand" ? "mode-btn--active" : ""}`}
-                    onClick={() => setVisionMode("ondemand")}
-                  >
-                    {tr("controls.mode.ondemand")}
-                  </button>
-                  <button
-                    className={`mode-btn ${visionMode === "chat" ? "mode-btn--active" : ""}`}
-                    onClick={() => setVisionMode("chat")}
-                  >
-                    {tr("controls.mode.chat")}
-                  </button>
-                </div>
               </>
             ) : isCameraOn ? (
               <>
                 {/* 视频通话态：核心控制工具栏 */}
                 <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-ctrl-pill btn-ctrl-pill--recognize"
+                    onClick={handleRecognize}
+                    disabled={isProcessing}
+                  >
+                    <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>
-                  {/* 识别画面按钮（按需模式下显示） */}
-                  {visionMode === "ondemand" && (
-                    <button
-                      className="btn--recognize"
-                      onClick={handleRecognize}
-                      disabled={isProcessing}
-                    >
-                      🔍 {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__mode">
-                  <button
-                    className={`mode-btn ${visionMode === "realtime" ? "mode-btn--active" : ""}`}
-                    onClick={() => setVisionMode("realtime")}
-                  >
-                    {tr("controls.mode.realtime")}
-                  </button>
-                  <button
-                    className={`mode-btn ${visionMode === "ondemand" ? "mode-btn--active" : ""}`}
-                    onClick={() => setVisionMode("ondemand")}
-                  >
-                    {tr("controls.mode.ondemand")}
-                  </button>
-                  <button
-                    className={`mode-btn ${visionMode === "chat" ? "mode-btn--active" : ""}`}
-                    onClick={() => setVisionMode("chat")}
-                  >
-                    {tr("controls.mode.chat")}
-                  </button>
+                {/* 设备选择器 */}
+                <div className="video-controls__devices">
+                  <div className="device-select-wrapper">
+                    <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"}
+                      onChange={(e) => switchDevice("camera", e.target.value === "default" ? "" : e.target.value)}
+                    >
+                      <option value="default">{tr("controls.device.default")}</option>
+                      {cameras.map((d) => (
+                        <option key={d.deviceId} value={d.deviceId}>{d.label}</option>
+                      ))}
+                    </select>
+                  </div>
+                  <div className="device-select-wrapper">
+                    <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"}
+                      onChange={(e) => switchDevice("mic", e.target.value === "default" ? "" : e.target.value)}
+                    >
+                      <option value="default">{tr("controls.device.default")}</option>
+                      {mics.map((d) => (
+                        <option key={d.deviceId} value={d.deviceId}>{d.label}</option>
+                      ))}
+                    </select>
+                  </div>
                 </div>
               </>
             ) : (
@@ -464,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">
@@ -486,19 +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")}
-              >
-                {scenarios.map((sc) => (
-                  <option key={sc.id} value={sc.id}>{sc.icon} {tr(sc.nameKey)}</option>
-                ))}
-              </select>
-              {isConnected && mode === "observation" && (
-                <span className="chat-panel-header__mode">{tr("chat.mode.observation")}</span>
-              )}
               {isConnected && stats.queryCount > 0 && (
                 <span className="chat-panel-header__stats">
                   {stats.queryCount} {tr("statusbar.recognitions")}
@@ -519,6 +620,7 @@ function AppContent() {
               currentReply={currentReply}
               connectionStatus={connectionStatus}
               currentScenario={config.scenario}
+              allScenarios={allScenarios}
               isProcessing={isProcessing}
               isVADReady={isVADReady}
               vadError={vadError ?? undefined}

frontend/src/components/CameraManager/index.tsx

@@ -19,10 +19,13 @@ export function useCamera() {
   const [stream, setStream] = useState<MediaStream | null>(null);
   const [error, setError] = useState<string | null>(null);
 
-  const startCamera = useCallback(async () => {
+  const startCamera = useCallback(async (deviceId?: string) => {
     try {
+      const videoConstraints: MediaTrackConstraints = deviceId
+        ? { deviceId: { exact: deviceId }, width: 640, height: 480 }
+        : { facingMode: "environment", width: 640, height: 480 };
       const mediaStream = await navigator.mediaDevices.getUserMedia({
-        video: { facingMode: "environment", width: 640, height: 480 },
+        video: videoConstraints,
         audio: false,
       });
       setStream(mediaStream);

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: "🔤", titleKey: "scene.text", descKey: "scene.text.desc", prompt: t("scene.text") },
-    { icon: "📦", 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}><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: <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: <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: <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>
-                <p>{t(`scenario.${activeScenario}.hint`)}</p>
+                <strong>{activeScenarioObj ? (activeScenarioObj.nameKey ? t(activeScenarioObj.nameKey) : ('name' in activeScenarioObj ? activeScenarioObj.name : '')) : ""}</strong>
+                {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 切换） */}
-            {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 模式） */}
+            {/* 视觉分析快捷卡片（仅 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>
       )}

frontend/src/components/ConfigPanel/index.tsx

@@ -1,31 +1,79 @@
 // ============================================================
 // ConfigPanel — 右侧抽屉式配置面板
-// 职责：主题切换、TTS 开关、detail level 切换、语言选择、情景选择
+// 职责：主题切换、TTS 开关、detail level 切换、语言选择、情景选择（含自建）
 // ============================================================
 
+import { useState } from "react";
 import { useI18n } from "../../lib/i18n";
-import { scenarios } from "../../lib/scenarios";
 import type { SessionConfig, Theme } from "../../types";
+import type { ExtendedScenario } from "../../hooks/useScenarios";
+import type { UserScenario } from "../../lib/api/scenarios";
 
 interface ConfigPanelProps {
   config: SessionConfig;
   theme: Theme;
   username?: string;
+  allScenarios: ExtendedScenario[];
+  open: boolean;
   onUpdate: (partial: Partial<SessionConfig>) => void;
   onThemeChange: (theme: Theme) => void;
   onLogout?: () => void;
   onClose: () => void;
+  onCreateScenario: () => void;
+  onEditScenario: (scenario: UserScenario) => void;
+  onDeleteScenario: (id: string) => void;
 }
 
-export function ConfigPanel({ config, theme, username, onUpdate, onThemeChange, onLogout, onClose }: ConfigPanelProps) {
+export function ConfigPanel({
+  config,
+  theme,
+  username,
+  allScenarios,
+  open,
+  onUpdate,
+  onThemeChange,
+  onLogout,
+  onClose,
+  onCreateScenario,
+  onEditScenario,
+  onDeleteScenario,
+}: ConfigPanelProps) {
   const { t } = useI18n();
+  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
+
+  // 分组：系统预置 vs 自建
+  const systemScenarios = allScenarios.filter((s) => !s.isCustom);
+  const customScenarios = allScenarios.filter((s) => s.isCustom);
+
+  const handleDelete = (id: string) => {
+    if (deleteConfirm === id) {
+      onDeleteScenario(id);
+      setDeleteConfirm(null);
+      // 如果当前选中的情景被删除，切换回自由对话
+      if (config.scenario === id) {
+        onUpdate({ scenario: "free_chat" });
+      }
+    } else {
+      setDeleteConfirm(id);
+      // 3秒后自动取消确认
+      setTimeout(() => setDeleteConfirm(null), 3000);
+    }
+  };
 
   return (
-    <div className="drawer-overlay" onClick={onClose}>
-      <div className="drawer" onClick={(e) => e.stopPropagation()}>
+    <div
+      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}>✕</button>
+          <button className="drawer__close" onClick={onClose}>
+            ✕
+          </button>
         </div>
 
         <div className="drawer__body">
@@ -90,21 +138,89 @@ export function ConfigPanel({ config, theme, username, onUpdate, onThemeChange,
                 <option value="ja-JP">日本語</option>
               </select>
             </label>
+          </div>
 
-            <label className="config-row">
-              <div className="config-row__info">
-                <span className="config-row__label">{t("settings.scenario")}</span>
-                <span className="config-row__desc">{t("settings.scenario.desc")}</span>
-              </div>
-              <select
-                value={config.scenario || "free_chat"}
-                onChange={(e) => onUpdate({ scenario: e.target.value })}
+          {/* 系统预置情景 */}
+          <div className="config-group">
+            <div className="config-group__title">{t("settings.scenario.system")}</div>
+            <div className="scenario-list">
+              {systemScenarios.map((sc) => (
+                <label key={sc.id} className="scenario-item">
+                  <input
+                    type="radio"
+                    name="scenario"
+                    value={sc.id}
+                    checked={config.scenario === sc.id}
+                    onChange={(e) => onUpdate({ scenario: e.target.value })}
+                  />
+                  <span className="scenario-item__icon">{sc.icon}</span>
+                  <span className="scenario-item__name">
+                    {sc.nameKey ? t(sc.nameKey) : sc.name}
+                  </span>
+                </label>
+              ))}
+            </div>
+          </div>
+
+          {/* 自建情景 */}
+          <div className="config-group">
+            <div className="config-group__title">
+              {t("settings.scenario.custom")}
+              <button
+                className="config-create-btn"
+                onClick={onCreateScenario}
+                title={t("scenario.create.button")}
               >
-                {scenarios.map((sc) => (
-                  <option key={sc.id} value={sc.id}>{sc.icon} {t(sc.nameKey)}</option>
+                + {t("scenario.create.button")}
+              </button>
+            </div>
+
+            {customScenarios.length === 0 ? (
+              <div className="scenario-empty">
+                {t("settings.scenario.empty")}
+              </div>
+            ) : (
+              <div className="scenario-list">
+                {customScenarios.map((sc) => (
+                  <div key={sc.id} className="scenario-item scenario-item--custom">
+                    <label className="scenario-item__radio">
+                      <input
+                        type="radio"
+                        name="scenario"
+                        value={sc.id}
+                        checked={config.scenario === sc.id}
+                        onChange={(e) => onUpdate({ scenario: e.target.value })}
+                      />
+                      <span className="scenario-item__icon">{sc.icon}</span>
+                      <div className="scenario-item__info">
+                        <span className="scenario-item__name">{sc.name}</span>
+                        {sc.description && (
+                          <span className="scenario-item__desc">{sc.description}</span>
+                        )}
+                      </div>
+                    </label>
+                    <div className="scenario-item__actions">
+                      <button
+                        className="scenario-action-btn scenario-action-btn--edit"
+                        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 ${
+                          deleteConfirm === sc.id ? "scenario-action-btn--confirm" : ""
+                        }`}
+                        onClick={() => handleDelete(sc.id)}
+                        title={deleteConfirm === sc.id ? t("common.confirmDelete") : t("common.delete")}
+                      >
+                        {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>
                 ))}
-              </select>
-            </label>
+              </div>
+            )}
           </div>
 
           {username && onLogout && (
@@ -116,10 +232,7 @@ export function ConfigPanel({ config, theme, username, onUpdate, onThemeChange,
                   <span className="config-row__desc">{username}</span>
                 </div>
               </div>
-              <button
-                className="config-logout-btn"
-                onClick={onLogout}
-              >
+              <button className="config-logout-btn" onClick={onLogout}>
                 {t("auth.logout")}
               </button>
             </div>

frontend/src/components/CreateScenarioModal/index.tsx

@@ -0,0 +1,257 @@
+// ============================================================
+// CreateScenarioModal — 创建自建情景对话框
+// 职责：提供表单让用户创建新的自定义情景
+// ============================================================
+
+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>;
+}
+
+export function CreateScenarioModal({ onClose, onSubmit }: CreateScenarioModalProps) {
+  const { t } = useI18n();
+  const [name, setName] = useState("");
+  const [icon, setIcon] = useState(DEFAULT_SCENARIO_ICON_ID);
+  const [description, setDescription] = useState("");
+  const [prompt, setPrompt] = useState("");
+  const [greeting, setGreeting] = useState("");
+  const [language, setLanguage] = useState("zh-CN");
+  const [error, setError] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showGuide, setShowGuide] = useState(false);
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  // 点击遮罩关闭
+  const handleOverlayClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.target === overlayRef.current) onClose();
+    },
+    [onClose]
+  );
+
+  // ESC 关闭
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onClose]);
+
+  // 阻止 body 滚动
+  useEffect(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, []);
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      setError("");
+
+      // 表单验证
+      if (name.length < 2 || name.length > 50) {
+        setError(t("scenario.error.nameLength"));
+        return;
+      }
+      if (prompt.length < 10 || prompt.length > 2000) {
+        setError(t("scenario.error.promptLength"));
+        return;
+      }
+      if (greeting && greeting.length > 500) {
+        setError(t("scenario.error.greetingLength"));
+        return;
+      }
+
+      setIsSubmitting(true);
+      try {
+        await onSubmit({
+          name,
+          icon,
+          description: description || undefined,
+          prompt,
+          greeting: greeting || undefined,
+          language,
+        });
+        onClose();
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Unknown error");
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [name, icon, description, prompt, greeting, language, onSubmit, onClose, t]
+  );
+
+  return (
+    <div
+      ref={overlayRef}
+      className="modal-overlay"
+      onClick={handleOverlayClick}
+    >
+      <div className="modal modal--large" onClick={(e) => e.stopPropagation()}>
+        <div className="modal__header">
+          <span className="modal__title">{t("scenario.create.title")}</span>
+          <button className="modal__close" onClick={onClose}>
+            ✕
+          </button>
+        </div>
+
+        <form className="modal__body" onSubmit={handleSubmit}>
+          {/* 名称 */}
+          <div className="form-group">
+            <label className="form-label">
+              {t("scenario.create.name")} <span className="form-required">*</span>
+            </label>
+            <input
+              type="text"
+              className="form-input"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder={t("scenario.create.namePlaceholder")}
+              maxLength={50}
+              required
+            />
+            <span className="form-hint">{name.length}/50</span>
+          </div>
+
+          {/* 图标选择 */}
+          <div className="form-group">
+            <label className="form-label">{t("scenario.create.icon")}</label>
+            <div className="icon-picker">
+              {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>
+          </div>
+
+          {/* 描述 */}
+          <div className="form-group">
+            <label className="form-label">{t("scenario.create.description")}</label>
+            <input
+              type="text"
+              className="form-input"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder={t("scenario.create.descriptionPlaceholder")}
+              maxLength={100}
+            />
+            <span className="form-hint">{description.length}/100</span>
+          </div>
+
+          {/* Prompt */}
+          <div className="form-group">
+            <label className="form-label">
+              {t("scenario.create.prompt")} <span className="form-required">*</span>
+              <button
+                type="button"
+                className="form-guide-btn"
+                onClick={() => setShowGuide(!showGuide)}
+              >
+                {showGuide ? "▼" : "▶"} {t("scenario.create.promptGuide")}
+              </button>
+            </label>
+            {showGuide && (
+              <div className="form-guide">
+                <p><strong>{t("scenario.create.promptGuide.tips")}</strong></p>
+                <ul>
+                  <li>{t("scenario.create.promptGuide.tip1")}</li>
+                  <li>{t("scenario.create.promptGuide.tip2")}</li>
+                  <li>{t("scenario.create.promptGuide.tip3")}</li>
+                </ul>
+                <p><strong>{t("scenario.create.promptGuide.example")}</strong></p>
+                <pre className="form-guide__code">
+{`你是一位创意写作导师。
+帮助用户构思故事情节、人物设定和写作技巧。
+
+【角色定位】
+- 你是导师，不是代笔人
+- 激发用户创意，不直接给答案
+
+【交互规则】
+1. 提出启发性问题
+2. 给出具体、可操作的建议
+3. 回答控制在3-5句话`}
+                </pre>
+              </div>
+            )}
+            <textarea
+              className="form-textarea"
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              placeholder={t("scenario.create.promptPlaceholder")}
+              rows={8}
+              maxLength={2000}
+              required
+            />
+            <span className="form-hint">{prompt.length}/2000</span>
+          </div>
+
+          {/* 首句引导 */}
+          <div className="form-group">
+            <label className="form-label">{t("scenario.create.greeting")}</label>
+            <textarea
+              className="form-textarea"
+              value={greeting}
+              onChange={(e) => setGreeting(e.target.value)}
+              placeholder={t("scenario.create.greetingPlaceholder")}
+              rows={3}
+              maxLength={500}
+            />
+            <span className="form-hint">{greeting.length}/500</span>
+          </div>
+
+          {/* 语言 */}
+          <div className="form-group">
+            <label className="form-label">{t("scenario.create.language")}</label>
+            <select
+              className="form-select"
+              value={language}
+              onChange={(e) => setLanguage(e.target.value)}
+            >
+              <option value="zh-CN">中文</option>
+              <option value="en-US">English</option>
+              <option value="ja-JP">日本語</option>
+            </select>
+          </div>
+
+          {error && <div className="form-error">{error}</div>}
+
+          <div className="modal__footer">
+            <button
+              type="button"
+              className="btn btn--secondary"
+              onClick={onClose}
+              disabled={isSubmitting}
+            >
+              {t("common.cancel")}
+            </button>
+            <button
+              type="submit"
+              className="btn btn--primary"
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? t("common.creating") : t("common.create")}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

frontend/src/components/EditScenarioModal/index.tsx

@@ -0,0 +1,270 @@
+// ============================================================
+// EditScenarioModal — 编辑自建情景对话框
+// 职责：提供表单让用户编辑现有的自定义情景
+// ============================================================
+
+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;
+  onClose: () => void;
+  onSubmit: (id: string, data: UpdateScenarioRequest) => Promise<void>;
+}
+
+export function EditScenarioModal({ scenario, onClose, onSubmit }: EditScenarioModalProps) {
+  const { t } = useI18n();
+  const [name, setName] = useState(scenario.name);
+  const [icon, setIcon] = useState(scenario.icon);
+  const [description, setDescription] = useState(scenario.description);
+  const [prompt, setPrompt] = useState(scenario.prompt);
+  const [greeting, setGreeting] = useState(scenario.greeting);
+  const [language, setLanguage] = useState(scenario.language);
+  const [error, setError] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showGuide, setShowGuide] = useState(false);
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  // 点击遮罩关闭
+  const handleOverlayClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.target === overlayRef.current) onClose();
+    },
+    [onClose]
+  );
+
+  // ESC 关闭
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onClose]);
+
+  // 阻止 body 滚动
+  useEffect(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, []);
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      setError("");
+
+      // 表单验证
+      if (name.length < 2 || name.length > 50) {
+        setError(t("scenario.error.nameLength"));
+        return;
+      }
+      if (prompt.length < 10 || prompt.length > 2000) {
+        setError(t("scenario.error.promptLength"));
+        return;
+      }
+      if (greeting && greeting.length > 500) {
+        setError(t("scenario.error.greetingLength"));
+        return;
+      }
+
+      setIsSubmitting(true);
+      try {
+        await onSubmit(scenario.id, {
+          name,
+          icon,
+          description: description || undefined,
+          prompt,
+          greeting: greeting || undefined,
+          language,
+        });
+        onClose();
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Unknown error");
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [scenario.id, name, icon, description, prompt, greeting, language, onSubmit, onClose, t]
+  );
+
+  return (
+    <div
+      ref={overlayRef}
+      className="modal-overlay"
+      onClick={handleOverlayClick}
+    >
+      <div className="modal modal--large" onClick={(e) => e.stopPropagation()}>
+        <div className="modal__header">
+          <span className="modal__title">{t("scenario.edit.title")}</span>
+          <button className="modal__close" onClick={onClose}>
+            ✕
+          </button>
+        </div>
+
+        <form className="modal__body" onSubmit={handleSubmit}>
+          {/* 名称 */}
+          <div className="form-group">
+            <label className="form-label">
+              {t("scenario.create.name")} <span className="form-required">*</span>
+            </label>
+            <input
+              type="text"
+              className="form-input"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder={t("scenario.create.namePlaceholder")}
+              maxLength={50}
+              required
+            />
+            <span className="form-hint">{name.length}/50</span>
+          </div>
+
+          {/* 图标选择 */}
+          <div className="form-group">
+            <label className="form-label">{t("scenario.create.icon")}</label>
+            <div className="icon-picker">
+              {/* 如果当前图标是旧版 emoji（不在 SVG 图标集中），显示为可选项 */}
+              {!SCENARIO_ICON_SET.some((ic) => ic.id === icon) && (
+                <button
+                  key="__legacy"
+                  type="button"
+                  className={`icon-picker__item icon-picker__item--active`}
+                  onClick={() => {/* already selected, no-op */}}
+                  title="当前图标（旧版）"
+                >
+                  {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>
+          </div>
+
+          {/* 描述 */}
+          <div className="form-group">
+            <label className="form-label">{t("scenario.create.description")}</label>
+            <input
+              type="text"
+              className="form-input"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder={t("scenario.create.descriptionPlaceholder")}
+              maxLength={100}
+            />
+            <span className="form-hint">{description.length}/100</span>
+          </div>
+
+          {/* Prompt */}
+          <div className="form-group">
+            <label className="form-label">
+              {t("scenario.create.prompt")} <span className="form-required">*</span>
+              <button
+                type="button"
+                className="form-guide-btn"
+                onClick={() => setShowGuide(!showGuide)}
+              >
+                {showGuide ? "▼" : "▶"} {t("scenario.create.promptGuide")}
+              </button>
+            </label>
+            {showGuide && (
+              <div className="form-guide">
+                <p><strong>{t("scenario.create.promptGuide.tips")}</strong></p>
+                <ul>
+                  <li>{t("scenario.create.promptGuide.tip1")}</li>
+                  <li>{t("scenario.create.promptGuide.tip2")}</li>
+                  <li>{t("scenario.create.promptGuide.tip3")}</li>
+                </ul>
+                <p><strong>{t("scenario.create.promptGuide.example")}</strong></p>
+                <pre className="form-guide__code">
+{`你是一位创意写作导师。
+帮助用户构思故事情节、人物设定和写作技巧。
+
+【角色定位】
+- 你是导师，不是代笔人
+- 激发用户创意，不直接给答案
+
+【交互规则】
+1. 提出启发性问题
+2. 给出具体、可操作的建议
+3. 回答控制在3-5句话`}
+                </pre>
+              </div>
+            )}
+            <textarea
+              className="form-textarea"
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              placeholder={t("scenario.create.promptPlaceholder")}
+              rows={8}
+              maxLength={2000}
+              required
+            />
+            <span className="form-hint">{prompt.length}/2000</span>
+          </div>
+
+          {/* 首句引导 */}
+          <div className="form-group">
+            <label className="form-label">{t("scenario.create.greeting")}</label>
+            <textarea
+              className="form-textarea"
+              value={greeting}
+              onChange={(e) => setGreeting(e.target.value)}
+              placeholder={t("scenario.create.greetingPlaceholder")}
+              rows={3}
+              maxLength={500}
+            />
+            <span className="form-hint">{greeting.length}/500</span>
+          </div>
+
+          {/* 语言 */}
+          <div className="form-group">
+            <label className="form-label">{t("scenario.create.language")}</label>
+            <select
+              className="form-select"
+              value={language}
+              onChange={(e) => setLanguage(e.target.value)}
+            >
+              <option value="zh-CN">中文</option>
+              <option value="en-US">English</option>
+              <option value="ja-JP">日本語</option>
+            </select>
+          </div>
+
+          {error && <div className="form-error">{error}</div>}
+
+          <div className="modal__footer">
+            <button
+              type="button"
+              className="btn btn--secondary"
+              onClick={onClose}
+              disabled={isSubmitting}
+            >
+              {t("common.cancel")}
+            </button>
+            <button
+              type="submit"
+              className="btn btn--primary"
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? t("common.saving") : t("common.save")}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

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: "🧠", label: "边缘预处理" },
-                { icon: "🔌", label: "WebSocket" },
-                { icon: "⚡", label: "Eino 编排" },
-                { icon: "👁️", label: "视觉理解" },
-                { icon: "💬", 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="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: <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: <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: <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: <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: <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: <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: "💼", title: "面试准备者", desc: "开启模拟面试模式，AI 面试官通过摄像头观察你的表情与状态，给出针对性反馈" },
-              { avatar: "🌍", title: "跨境交流者", desc: "出国旅行时对着外文菜单、路牌实时翻译，AI 语音播报翻译结果" },
-              { avatar: "👁️", 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="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: <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: <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: <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: <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: "🗣️", title: "英语老师", desc: "AI 外教结合摄像头场景进行英语口语教学，实时纠正语法", tag: "学习" },
-              { icon: "🎤", title: "模拟面试", desc: "AI 面试官根据你的回答追问，通过摄像头观察你的表现", tag: "求职" },
-              { icon: "⚔️", 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"><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: <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: <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: <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: <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>

frontend/src/components/MicManager/index.tsx

@@ -12,15 +12,13 @@ export function useMicrophone() {
   const [error, setError] = useState<string | null>(null);
   const audioContextRef = useRef<AudioContext | null>(null);
 
-  const startMic = useCallback(async () => {
+  const startMic = useCallback(async (deviceId?: string) => {
     try {
+      const audioConstraints: MediaTrackConstraints = deviceId
+        ? { deviceId: { exact: deviceId }, sampleRate: 16000, channelCount: 1, echoCancellation: true, noiseSuppression: true }
+        : { sampleRate: 16000, channelCount: 1, echoCancellation: true, noiseSuppression: true };
       const mediaStream = await navigator.mediaDevices.getUserMedia({
-        audio: {
-          sampleRate: 16000,
-          channelCount: 1,
-          echoCancellation: true,
-          noiseSuppression: true,
-        },
+        audio: audioConstraints,
         video: false,
       });
       setStream(mediaStream);

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 className="sidebar">
+      <div
+        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>
                         </>

frontend/src/hooks/useDeviceList.ts

@@ -0,0 +1,44 @@
+// ============================================================
+// useDeviceList — 设备枚举 Hook
+// 职责：枚举摄像头/麦克风设备列表，监听设备热插拔
+// 注意：首次枚举需要先有一次成功的 getUserMedia 授权
+// ============================================================
+
+import { useCallback, useEffect, useState } from "react";
+
+export interface DeviceInfo {
+  deviceId: string;
+  label: string;
+}
+
+export function useDeviceList() {
+  const [cameras, setCameras] = useState<DeviceInfo[]>([]);
+  const [mics, setMics] = useState<DeviceInfo[]>([]);
+
+  /** 枚举当前可用的音视频输入设备 */
+  const refreshDevices = useCallback(async () => {
+    try {
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      setCameras(
+        devices
+          .filter((d) => d.kind === "videoinput")
+          .map((d) => ({ deviceId: d.deviceId, label: d.label || `摄像头 ${d.deviceId.slice(0, 4)}` }))
+      );
+      setMics(
+        devices
+          .filter((d) => d.kind === "audioinput")
+          .map((d) => ({ deviceId: d.deviceId, label: d.label || `麦克风 ${d.deviceId.slice(0, 4)}` }))
+      );
+    } catch (err) {
+      console.warn("[DeviceList] 枚举设备失败:", err);
+    }
+  }, []);
+
+  // 监听设备热插拔
+  useEffect(() => {
+    navigator.mediaDevices.addEventListener("devicechange", refreshDevices);
+    return () => navigator.mediaDevices.removeEventListener("devicechange", refreshDevices);
+  }, [refreshDevices]);
+
+  return { cameras, mics, refreshDevices };
+}

frontend/src/hooks/useObservationMode.ts

@@ -1,88 +0,0 @@
-// ============================================================
-// useObservationMode — 观察模式 Hook
-// 职责：定时采帧 → 关键帧检测 → 画面变化时触发回调
-// 来源：docs/05-用户故事.md US-05（持续场景监控）
-// ============================================================
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import { sampleFrame, compareFrames } from "../components/EdgeProcessor";
-
-/** 画面变化显著阈值 */
-const CHANGE_THRESHOLD = 0.85;
-/** 采样间隔（ms） */
-const SAMPLE_INTERVAL = 5000;
-
-export interface ObservationOptions {
-  /** 画面变化回调，携带当前帧的 DataURL */
-  onChange?: (frameDataUrl: string) => void;
-}
-
-export function useObservationMode(options?: ObservationOptions) {
-  const [isObserving, setIsObserving] = useState(false);
-  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
-  const prevFrameRef = useRef<Uint8ClampedArray | null>(null);
-  const optionsRef = useRef(options);
-
-  useEffect(() => {
-    optionsRef.current = options;
-  }, [options]);
-
-  /**
-   * 启动观察模式
-   * @param video 摄像头 video 元素
-   * @param captureFrame 从 video 捕获 DataURL 的函数
-   */
-  const startObserving = useCallback(
-    (video: HTMLVideoElement | null, captureFrame: () => string | null) => {
-      if (!video) return;
-
-      // 立即采一帧作为基准
-      prevFrameRef.current = sampleFrame(video);
-
-      intervalRef.current = setInterval(() => {
-        const current = sampleFrame(video);
-        if (!current) return;
-
-        if (prevFrameRef.current) {
-          const { similarity } = compareFrames(prevFrameRef.current, current);
-
-          if (similarity < CHANGE_THRESHOLD) {
-            console.log(
-              `[Observation] 画面变化 (similarity=${similarity.toFixed(2)})`,
-            );
-            const frameDataUrl = captureFrame();
-            if (frameDataUrl) {
-              optionsRef.current?.onChange?.(frameDataUrl);
-            }
-          }
-        }
-
-        prevFrameRef.current = current;
-      }, SAMPLE_INTERVAL);
-
-      setIsObserving(true);
-    },
-    [],
-  );
-
-  /** 停止观察模式 */
-  const stopObserving = useCallback(() => {
-    if (intervalRef.current) {
-      clearInterval(intervalRef.current);
-      intervalRef.current = null;
-    }
-    prevFrameRef.current = null;
-    setIsObserving(false);
-  }, []);
-
-  // 组件卸载时清理
-  useEffect(() => {
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-      }
-    };
-  }, []);
-
-  return { isObserving, startObserving, stopObserving };
-}

frontend/src/hooks/useScenarios.ts

@@ -0,0 +1,147 @@
+// ============================================================
+// useScenarios — 用户自建情景管理 Hook
+// 职责：封装自建情景的加载、创建、更新、删除逻辑，合并系统预置情景
+// ============================================================
+
+import { useCallback, useEffect, useState } from "react";
+import { scenarios as systemScenarios } from "../lib/scenarios";
+import * as api from "../lib/api/scenarios";
+
+export interface ExtendedScenario {
+  id: string;
+  icon: string;
+  name: string;        // 直接显示的名称（系统情景用 nameKey，自建情景用 name）
+  nameKey?: string;    // i18n key（仅系统预置情景有）
+  descKey?: string;    // i18n key（仅系统预置情景有）
+  description?: string; // 直接显示的描述（自建情景）
+  isCustom: boolean;   // true = 自建情景，false = 系统预置
+  prompt?: string;     // 仅自建情景有
+  greeting?: string;   // 仅自建情景有
+  language?: string;   // 仅自建情景有
+}
+
+export function useScenarios(token: string | null) {
+  const [customScenarios, setCustomScenarios] = useState<api.UserScenario[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // 合并系统预置 + 自建情景
+  const allScenarios: ExtendedScenario[] = [
+    // 系统预置情景
+    ...systemScenarios.map((s) => ({
+      id: s.id,
+      icon: s.icon,
+      name: s.nameKey,
+      nameKey: s.nameKey,
+      descKey: s.descKey,
+      isCustom: false,
+    })),
+    // 用户自建情景
+    ...customScenarios.map((s: api.UserScenario) => ({
+      id: s.id,
+      icon: s.icon,
+      name: s.name,
+      description: s.description,
+      isCustom: true,
+      prompt: s.prompt,
+      greeting: s.greeting,
+      language: s.language,
+    })),
+  ];
+
+  // 加载用户自建情景
+  const loadCustomScenarios = useCallback(async () => {
+    if (!token) {
+      setCustomScenarios([]);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await api.listUserScenarios(token);
+      setCustomScenarios(result.scenarios || []);
+    } catch (err) {
+      console.error("Failed to load custom scenarios:", err);
+      setError(err instanceof Error ? err.message : "Unknown error");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [token]);
+
+  // 创建新情景
+  const createScenario = useCallback(
+    async (data: api.CreateScenarioRequest) => {
+      if (!token) throw new Error("Not authenticated");
+
+      setError(null);
+      try {
+        const newScenario = await api.createUserScenario(token, data);
+        setCustomScenarios((prev) => [...prev, newScenario]);
+        return newScenario;
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Unknown error";
+        setError(message);
+        throw err;
+      }
+    },
+    [token]
+  );
+
+  // 更新情景
+  const updateScenario = useCallback(
+    async (id: string, data: api.UpdateScenarioRequest) => {
+      if (!token) throw new Error("Not authenticated");
+
+      setError(null);
+      try {
+        const updated = await api.updateUserScenario(token, id, data);
+        setCustomScenarios((prev) =>
+          prev.map((s) => (s.id === id ? updated : s))
+        );
+        return updated;
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Unknown error";
+        setError(message);
+        throw err;
+      }
+    },
+    [token]
+  );
+
+  // 删除情景
+  const deleteScenario = useCallback(
+    async (id: string) => {
+      if (!token) throw new Error("Not authenticated");
+
+      setError(null);
+      try {
+        await api.deleteUserScenario(token, id);
+        setCustomScenarios((prev) => prev.filter((s) => s.id !== id));
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Unknown error";
+        setError(message);
+        throw err;
+      }
+    },
+    [token]
+  );
+
+  // 登录后自动加载
+  useEffect(() => {
+    if (token) {
+      loadCustomScenarios();
+    }
+  }, [token, loadCustomScenarios]);
+
+  return {
+    allScenarios,
+    customScenarios,
+    isLoading,
+    error,
+    loadCustomScenarios,
+    createScenario,
+    updateScenario,
+    deleteScenario,
+  };
+}

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);

frontend/src/hooks/useVisionSession.ts

@@ -17,11 +17,9 @@ import { useCamera } from "../components/CameraManager";
 import { useMicrophone } from "../components/MicManager";
 import { useVAD, sampleFrame } from "../components/EdgeProcessor";
 import { useWebSocketManager } from "../components/WebSocketManager";
-import { useObservationMode } from "./useObservationMode";
+import { useDeviceList } from "./useDeviceList";
 import type { ChatMessage, SessionConfig, ServerMessage, LLMDoneMessage } from "../types";
 
-export type SessionMode = "dialogue" | "observation";
-
 export interface SessionStats {
   queryCount: number;
   totalTokens: number;
@@ -35,7 +33,6 @@ export function useVisionSession(accessToken?: string | null, conversationId?: s
   const [isAudioPlaying, setIsAudioPlaying] = useState(false);
   const [config, setConfig] = useState<SessionConfig>(loadConfig);
   const [stats, setStats] = useState<SessionStats>({ queryCount: 0, totalTokens: 0 });
-  const [mode, setMode] = useState<SessionMode>("dialogue");
   const [isCameraOn, setIsCameraOn] = useState(false);
   const [isMicOn, setIsMicOn] = useState(false);
 
@@ -59,6 +56,7 @@ export function useVisionSession(accessToken?: string | null, conversationId?: s
   const { videoRef, captureFrame, startCamera, stopCamera, stream } = useCamera();
   const { startMic, stopMic } = useMicrophone();
   const { status, connect, disconnect, send } = useWebSocketManager();
+  const { cameras, mics, refreshDevices } = useDeviceList();
 
   // 用 ref 跟踪 isProcessing，避免 VAD 回调闭包问题
   const isProcessingRef = useRef(false);
@@ -78,49 +76,6 @@ export function useVisionSession(accessToken?: string | null, conversationId?: s
     conversationIdRef.current = conversationId;
   }, [conversationId]);
 
-  // 观察模式：画面变化时自动发送 query
-  const { isObserving, startObserving, stopObserving } = useObservationMode({
-    onChange: useCallback(
-      (frameDataUrl: string) => {
-        if (isProcessingRef.current) return;
-
-        const requestId = uuidv4();
-        send({
-          type: "query",
-          request_id: requestId,
-          image: dataUrlToBase64(frameDataUrl),
-          audio: "", // 观察模式无音频
-        });
-
-        setMessages((prev) => [
-          ...prev,
-          {
-            id: uuidv4(),
-            role: "user",
-            content: t("session.changeDetected"),
-            timestamp: Date.now(),
-          },
-        ]);
-        setStats((prev) => ({ ...prev, queryCount: prev.queryCount + 1 }));
-        setIsProcessing(true);
-      },
-      [send],
-    ),
-  });
-
-  /** 切换对话/观察模式 */
-  const toggleMode = useCallback(() => {
-    setMode((prev) => {
-      const next = prev === "dialogue" ? "observation" : "dialogue";
-      if (next === "observation") {
-        startObserving(videoRef.current, captureFrame);
-      } else {
-        stopObserving();
-      }
-      return next;
-    });
-  }, [videoRef, captureFrame, startObserving, stopObserving]);
-
   // WebSocket 连接成功后发送 config + flush 待发消息
   useEffect(() => {
     if (status === "connected") {
@@ -324,14 +279,14 @@ export function useVisionSession(accessToken?: string | null, conversationId?: s
 
     // 2. 尝试获取摄像头（可选）
     try {
-      await startCamera();
+      await startCamera(config.cameraDeviceId || undefined);
       setIsCameraOn(true);
     } catch {
       console.warn("[Session] 无法获取摄像头权限，将以纯文本模式运行");
     }
 
     // 3. 尝试获取麦克风（可选）
-    const micStream = await startMic();
+    const micStream = await startMic(config.micDeviceId || undefined);
     if (micStream) {
       setIsMicOn(true);
       // 4. 启动 VAD（仅在麦克风可用时）
@@ -339,12 +294,13 @@ export function useVisionSession(accessToken?: string | null, conversationId?: s
     } else {
       console.warn("[Session] 无法获取麦克风权限，将以文本输入模式运行");
     }
-  }, [startCamera, startMic, connect, startVAD, accessToken]);
+
+    // 5. 授权后刷新设备列表
+    refreshDevices();
+  }, [startCamera, startMic, connect, startVAD, accessToken, config.cameraDeviceId, config.micDeviceId, refreshDevices]);
 
   /** 结束会话 */
   const stopSession = useCallback(async () => {
-    stopObserving();
-    setMode("dialogue");
     await stopVAD();
     stopMic();
     stopCamera();
@@ -359,12 +315,10 @@ export function useVisionSession(accessToken?: string | null, conversationId?: s
     prevFrameRef.current = null;
     setIsCameraOn(false);
     setIsMicOn(false);
-  }, [stopObserving, stopVAD, stopMic, stopCamera, disconnect]);
+  }, [stopVAD, stopMic, stopCamera, disconnect]);
 
   /** 结束视频，保留聊天和连接 */
   const stopVideo = useCallback(async () => {
-    stopObserving();
-    setMode("dialogue");
     await stopVAD();
     stopMic();
     stopCamera();
@@ -375,7 +329,7 @@ export function useVisionSession(accessToken?: string | null, conversationId?: s
     setIsCameraOn(false);
     setIsMicOn(false);
     // 不断开 WebSocket，不清空消息、统计
-  }, [stopObserving, stopVAD, stopMic, stopCamera]);
+  }, [stopVAD, stopMic, stopCamera]);
 
   /** 摄像头开关 */
   const toggleCamera = useCallback(async () => {
@@ -383,10 +337,10 @@ export function useVisionSession(accessToken?: string | null, conversationId?: s
       stopCamera();
       setIsCameraOn(false);
     } else {
-      await startCamera();
+      await startCamera(config.cameraDeviceId || undefined);
       setIsCameraOn(true);
     }
-  }, [isCameraOn, startCamera, stopCamera]);
+  }, [isCameraOn, startCamera, stopCamera, config.cameraDeviceId]);
 
   /** 麦克风开关 */
   const toggleMic = useCallback(async () => {
@@ -395,13 +349,13 @@ export function useVisionSession(accessToken?: string | null, conversationId?: s
       stopMic();
       setIsMicOn(false);
     } else {
-      const micStream = await startMic();
+      const micStream = await startMic(config.micDeviceId || undefined);
       if (micStream) {
         await startVAD(micStream);
         setIsMicOn(true);
       }
     }
-  }, [isMicOn, startMic, stopMic, startVAD, stopVAD]);
+  }, [isMicOn, startMic, stopMic, startVAD, stopVAD, config.micDeviceId]);
 
   /** 打断当前回复 */
   const interrupt = useCallback(() => {
@@ -421,6 +375,31 @@ export function useVisionSession(accessToken?: string | null, conversationId?: s
     setIsProcessing(false);
   }, [send, currentReply]);
 
+  /** 切换设备（摄像头或麦克风） */
+  const switchDevice = useCallback(async (kind: "camera" | "mic", deviceId: string) => {
+    if (kind === "camera") {
+      updateConfig({ cameraDeviceId: deviceId || undefined });
+      if (isCameraOn) {
+        stopCamera();
+        try {
+          await startCamera(deviceId || undefined);
+        } catch {
+          console.warn("[Session] 切换摄像头失败");
+        }
+      }
+    } else {
+      updateConfig({ micDeviceId: deviceId || undefined });
+      if (isMicOn) {
+        await stopVAD();
+        stopMic();
+        const micStream = await startMic(deviceId || undefined);
+        if (micStream) {
+          await startVAD(micStream);
+        }
+      }
+    }
+  }, [isCameraOn, isMicOn, stopCamera, startCamera, stopMic, startMic, stopVAD, startVAD, updateConfig]);
+
   /** 发送文本消息（手动输入） */
   const sendTextMessage = useCallback(
     (text: string) => {
@@ -480,9 +459,6 @@ export function useVisionSession(accessToken?: string | null, conversationId?: s
     config,
     updateConfig,
     stats,
-    mode,
-    isObserving,
-    toggleMode,
     startSession,
     stopSession,
     stopVideo,
@@ -493,5 +469,8 @@ export function useVisionSession(accessToken?: string | null, conversationId?: s
     toggleMic,
     sendTextMessage,
     captureFrame,
+    cameras,
+    mics,
+    switchDevice,
   };
 }

frontend/src/lib/api/scenarios.ts

@@ -0,0 +1,120 @@
+// ============================================================
+// scenarios API — 用户自建情景 API 调用
+// 职责：封装 /api/scenarios 的 CRUD 操作
+// ============================================================
+
+// 开发环境通过 Vite 代理，生产环境使用同域名
+const API_BASE = "";
+
+export interface UserScenario {
+  id: string;
+  user_id: string;
+  name: string;
+  icon: string;
+  description: string;
+  prompt: string;
+  greeting: string;
+  language: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CreateScenarioRequest {
+  name: string;
+  icon?: string;
+  description?: string;
+  prompt: string;
+  greeting?: string;
+  language?: string;
+}
+
+export interface UpdateScenarioRequest {
+  name?: string;
+  icon?: string;
+  description?: string;
+  prompt?: string;
+  greeting?: string;
+  language?: string;
+}
+
+export interface ScenariosListResponse {
+  scenarios: UserScenario[];
+  total: number;
+}
+
+// 获取用户的所有自建情景
+export async function listUserScenarios(token: string): Promise<ScenariosListResponse> {
+  const res = await fetch(`${API_BASE}/api/scenarios`, {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: "Network error" }));
+    throw new Error(err.error || "Failed to list scenarios");
+  }
+  return res.json();
+}
+
+// 创建新情景
+export async function createUserScenario(
+  token: string,
+  data: CreateScenarioRequest
+): Promise<UserScenario> {
+  const res = await fetch(`${API_BASE}/api/scenarios`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify(data),
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: "Network error" }));
+    throw new Error(err.error || "Failed to create scenario");
+  }
+  return res.json();
+}
+
+// 获取单个情景详情
+export async function getUserScenario(token: string, id: string): Promise<UserScenario> {
+  const res = await fetch(`${API_BASE}/api/scenarios/${id}`, {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: "Network error" }));
+    throw new Error(err.error || "Failed to get scenario");
+  }
+  return res.json();
+}
+
+// 更新情景
+export async function updateUserScenario(
+  token: string,
+  id: string,
+  data: UpdateScenarioRequest
+): Promise<UserScenario> {
+  const res = await fetch(`${API_BASE}/api/scenarios/${id}`, {
+    method: "PATCH",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify(data),
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: "Network error" }));
+    throw new Error(err.error || "Failed to update scenario");
+  }
+  return res.json();
+}
+
+// 删除情景
+export async function deleteUserScenario(token: string, id: string): Promise<void> {
+  const res = await fetch(`${API_BASE}/api/scenarios/${id}`, {
+    method: "DELETE",
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: "Network error" }));
+    throw new Error(err.error || "Failed to delete scenario");
+  }
+}

frontend/src/lib/i18n/en-US.ts

@@ -48,7 +48,6 @@ export const enUS: TranslationMap = {
   "scenario.interpreter.hint": "AI will translate your speech in real-time (Chinese-English), without explanations",
 
   // Video indicators
-  "video.observing": "👁️ Observing",
   "video.listening": "🎤 Listening...",
   "video.playing": "🔊 Playing...",
   "video.initVad": "Initializing voice detection...",
@@ -67,8 +66,6 @@ export const enUS: TranslationMap = {
   "controls.cameraOn": "Turn on camera",
   "controls.micOff": "Turn off microphone",
   "controls.micOn": "Turn on microphone",
-  "controls.observing": "👁️ Observing",
-  "controls.observation": "👁️ Observe",
   "controls.interrupt": "⏹ Interrupt",
   "controls.stop": "End Session",
   "controls.stopVideo": "End Video",
@@ -77,7 +74,6 @@ export const enUS: TranslationMap = {
 
   // Chat panel
   "chat.title": "Chat",
-  "chat.mode.observation": "Observing",
   "chat.reconnecting": "Connection lost, reconnecting...",
   "chat.connecting": "Connecting to server...",
   "chat.vadInit": "Initializing voice detection...",
@@ -91,7 +87,6 @@ export const enUS: TranslationMap = {
   "chat.scenarioSwitched": "Switched to {name} mode",
 
   // Session messages
-  "session.changeDetected": "👁️ Scene change detected",
   "session.recognizing": "(Recognizing speech...)",
   "session.sttFailed": "(Speech recognition failed, please try again)",
   "session.noSpeech": "(No speech detected)",
@@ -138,12 +133,7 @@ export const enUS: TranslationMap = {
 
   // Video controls (enhanced)
   "controls.recognize": "Analyze Scene",
-  "controls.device.camera": "Camera",
-  "controls.device.mic": "Microphone",
   "controls.device.default": "Default",
-  "controls.mode.realtime": "Realtime",
-  "controls.mode.ondemand": "On-demand",
-  "controls.mode.chat": "Chat only",
 
   // Status bar
   "statusbar.ready": "Ready · Select devices to start",
@@ -165,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?",
@@ -178,4 +168,42 @@ export const enUS: TranslationMap = {
   // Account (in settings)
   "settings.account": "Account",
   "settings.account.user": "Current user",
+
+  // Custom scenarios
+  "settings.scenario.system": "System Scenarios",
+  "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",
+  "scenario.create.namePlaceholder": "e.g. Creative Writing Coach",
+  "scenario.create.icon": "Icon",
+  "scenario.create.description": "Brief Description",
+  "scenario.create.descriptionPlaceholder": "One-line summary of this scenario",
+  "scenario.create.prompt": "System Prompt",
+  "scenario.create.promptPlaceholder": "Define the AI's role and interaction rules...",
+  "scenario.create.promptGuide": "View Guide",
+  "scenario.create.promptGuide.tips": "Writing tips:",
+  "scenario.create.promptGuide.tip1": "Clearly define the role: who you are, who you are not",
+  "scenario.create.promptGuide.tip2": "List interaction rules: how to respond, how many sentences",
+  "scenario.create.promptGuide.tip3": "Add constraints: what not to do",
+  "scenario.create.promptGuide.example": "Example:",
+  "scenario.create.greeting": "Greeting (Optional)",
+  "scenario.create.greetingPlaceholder": "The first message when switching to this scenario...",
+  "scenario.create.language": "Default Language",
+  "scenario.error.nameLength": "Scenario name must be 2-50 characters",
+  "scenario.error.promptLength": "Prompt must be 10-2000 characters",
+  "scenario.error.greetingLength": "Greeting must not exceed 500 characters",
+
+  // Common actions
+  "common.cancel": "Cancel",
+  "common.create": "Create",
+  "common.creating": "Creating...",
+  "common.save": "Save",
+  "common.saving": "Saving...",
+  "common.edit": "Edit",
+  "common.delete": "Delete",
+  "common.confirmDelete": "Click again to confirm",
 };

frontend/src/lib/i18n/ja-JP.ts

@@ -48,7 +48,6 @@ export const jaJP: TranslationMap = {
   "scenario.interpreter.hint": "AIがあなたの発言をリアルタイムで翻訳します（中日相互翻訳、説明なし）",
 
   // Video indicators
-  "video.observing": "👁️ 観察中",
   "video.listening": "🎤 聞き取り中...",
   "video.playing": "🔊 再生中...",
   "video.initVad": "音声検出を初期化中...",
@@ -67,8 +66,6 @@ export const jaJP: TranslationMap = {
   "controls.cameraOn": "カメラをオン",
   "controls.micOff": "マイクをオフ",
   "controls.micOn": "マイクをオン",
-  "controls.observing": "👁️ 観察中",
-  "controls.observation": "👁️ 観察モード",
   "controls.interrupt": "⏹ 中断",
   "controls.stop": "対話を終了",
   "controls.stopVideo": "ビデオ終了",
@@ -77,7 +74,6 @@ export const jaJP: TranslationMap = {
 
   // Chat panel
   "chat.title": "チャット",
-  "chat.mode.observation": "観察モード",
   "chat.reconnecting": "接続が切断されました。再接続中...",
   "chat.connecting": "サーバーに接続中...",
   "chat.vadInit": "音声検出を初期化中...",
@@ -91,7 +87,6 @@ export const jaJP: TranslationMap = {
   "chat.scenarioSwitched": "{name} モードに切り替えました",
 
   // Session messages
-  "session.changeDetected": "👁️ シーン変化を検出",
   "session.recognizing": "（音声認識中...）",
   "session.sttFailed": "（音声認識に失敗しました。もう一度お試しください）",
   "session.noSpeech": "（音声が検出されませんでした）",
@@ -138,12 +133,7 @@ export const jaJP: TranslationMap = {
 
   // Video controls (enhanced)
   "controls.recognize": "シーンを分析",
-  "controls.device.camera": "カメラ",
-  "controls.device.mic": "マイク",
   "controls.device.default": "デフォルト",
-  "controls.mode.realtime": "リアルタイム",
-  "controls.mode.ondemand": "オンデマンド",
-  "controls.mode.chat": "チャットのみ",
 
   // Status bar
   "statusbar.ready": "準備完了 · デバイスを選択して開始",
@@ -165,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": "すでにアカウントをお持ちですか？",
@@ -178,4 +168,42 @@ export const jaJP: TranslationMap = {
   // Account (in settings)
   "settings.account": "アカウント",
   "settings.account.user": "現在のユーザー",
+
+  // Custom scenarios
+  "settings.scenario.system": "システムシナリオ",
+  "settings.scenario.custom": "マイシナリオ",
+  "settings.scenario.empty": "カスタムシナリオはまだありません。上のボタンをクリックして作成してください。",
+  "scenario.create.button": "新しいシナリオ",
+  "scenario.createChip": "新規",
+  "scenario.create.title": "カスタムシナリオを作成",
+  "scenario.edit.title": "シナリオを編集",
+  "scenario.create.name": "シナリオ名",
+  "scenario.create.namePlaceholder": "例：クリエイティブライティングコーチ",
+  "scenario.create.icon": "アイコン",
+  "scenario.create.description": "簡単な説明",
+  "scenario.create.descriptionPlaceholder": "このシナリオの概要を一文で",
+  "scenario.create.prompt": "システムプロンプト",
+  "scenario.create.promptPlaceholder": "AIの役割と対話ルールを定義...",
+  "scenario.create.promptGuide": "ガイドを見る",
+  "scenario.create.promptGuide.tips": "作成のヒント：",
+  "scenario.create.promptGuide.tip1": "役割を明確に定義：何者で、何者でないか",
+  "scenario.create.promptGuide.tip2": "対話ルールをリスト化：応答方法、文数",
+  "scenario.create.promptGuide.tip3": "制約を追加：何をしないか",
+  "scenario.create.promptGuide.example": "例：",
+  "scenario.create.greeting": "挨拶（オプション）",
+  "scenario.create.greetingPlaceholder": "このシナリオに切り替えた時の最初のメッセージ...",
+  "scenario.create.language": "デフォルト言語",
+  "scenario.error.nameLength": "シナリオ名は2〜50文字で入力してください",
+  "scenario.error.promptLength": "プロンプトは10〜2000文字で入力してください",
+  "scenario.error.greetingLength": "挨拶は500文字以内で入力してください",
+
+  // Common actions
+  "common.cancel": "キャンセル",
+  "common.create": "作成",
+  "common.creating": "作成中...",
+  "common.save": "保存",
+  "common.saving": "保存中...",
+  "common.edit": "編集",
+  "common.delete": "削除",
+  "common.confirmDelete": "もう一度クリックして確認",
 };

frontend/src/lib/i18n/zh-CN.ts

@@ -48,7 +48,6 @@ export const zhCN: TranslationMap = {
   "scenario.interpreter.hint": "AI 会实时翻译你的话（中英互译），无解释评论",
 
   // Video indicators
-  "video.observing": "👁️ 观察中",
   "video.listening": "🎤 正在聆听...",
   "video.playing": "🔊 正在播放...",
   "video.initVad": "正在初始化语音检测...",
@@ -61,23 +60,20 @@ export const zhCN: TranslationMap = {
 
   // Controls
   "controls.connecting": "连接中...",
-  "controls.start": "🎙️ 开始对话",
-  "controls.startVideo": "🎙️ 开始视频通话",
+  "controls.start": "开始对话",
+  "controls.startVideo": "开始视频通话",
   "controls.cameraOff": "关闭摄像头",
   "controls.cameraOn": "开启摄像头",
   "controls.micOff": "关闭麦克风",
   "controls.micOn": "开启麦克风",
-  "controls.observing": "👁️ 观察中",
-  "controls.observation": "👁️ 观察模式",
   "controls.interrupt": "⏹ 打断",
   "controls.stop": "结束对话",
   "controls.stopVideo": "结束视频",
   "controls.endSession": "结束会话",
-  "controls.resumeVideo": "📹 重新开始视频",
+  "controls.resumeVideo": "重新开始视频",
 
   // Chat panel
   "chat.title": "对话",
-  "chat.mode.observation": "观察模式",
   "chat.reconnecting": "连接已断开，正在重连...",
   "chat.connecting": "正在连接服务...",
   "chat.vadInit": "正在初始化语音检测...",
@@ -91,7 +87,6 @@ export const zhCN: TranslationMap = {
   "chat.scenarioSwitched": "已切换到 {name} 模式",
 
   // Session messages
-  "session.changeDetected": "👁️ 画面变化检测",
   "session.recognizing": "（语音识别中...）",
   "session.sttFailed": "（语音识别失败，请重试）",
   "session.noSpeech": "（未识别到语音）",
@@ -138,12 +133,7 @@ export const zhCN: TranslationMap = {
 
   // Video controls (enhanced)
   "controls.recognize": "识别画面",
-  "controls.device.camera": "摄像头",
-  "controls.device.mic": "麦克风",
   "controls.device.default": "默认",
-  "controls.mode.realtime": "实时分析",
-  "controls.mode.ondemand": "按需识别",
-  "controls.mode.chat": "纯聊天",
 
   // Status bar
   "statusbar.ready": "就绪 · 选择设备后开始通话",
@@ -165,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": "已有账号？",
@@ -178,4 +168,42 @@ export const zhCN: TranslationMap = {
   // Account (in settings)
   "settings.account": "账号",
   "settings.account.user": "当前用户",
+
+  // Custom scenarios
+  "settings.scenario.system": "系统预置情景",
+  "settings.scenario.custom": "我的情景",
+  "settings.scenario.empty": "还没有自建情景，点击上方按钮创建",
+  "scenario.create.button": "创建新情景",
+  "scenario.createChip": "新建",
+  "scenario.create.title": "创建自建情景",
+  "scenario.edit.title": "编辑情景",
+  "scenario.create.name": "情景名称",
+  "scenario.create.namePlaceholder": "例如：创意写作导师",
+  "scenario.create.icon": "图标",
+  "scenario.create.description": "简短描述",
+  "scenario.create.descriptionPlaceholder": "一句话介绍这个情景的作用",
+  "scenario.create.prompt": "System Prompt",
+  "scenario.create.promptPlaceholder": "定义 AI 的角色和交互规则...",
+  "scenario.create.promptGuide": "查看编写指南",
+  "scenario.create.promptGuide.tips": "编写提示：",
+  "scenario.create.promptGuide.tip1": "明确角色定位：你是谁，不是谁",
+  "scenario.create.promptGuide.tip2": "列出交互规则：如何回答，每次几句话",
+  "scenario.create.promptGuide.tip3": "添加约束条件：不要做什么",
+  "scenario.create.promptGuide.example": "示例：",
+  "scenario.create.greeting": "首句引导（可选）",
+  "scenario.create.greetingPlaceholder": "切换到此情景时，AI 的第一句话...",
+  "scenario.create.language": "默认语言",
+  "scenario.error.nameLength": "情景名称需要 2-50 个字符",
+  "scenario.error.promptLength": "Prompt 需要 10-2000 个字符",
+  "scenario.error.greetingLength": "首句引导不超过 500 个字符",
+
+  // Common actions
+  "common.cancel": "取消",
+  "common.create": "创建",
+  "common.creating": "创建中...",
+  "common.save": "保存",
+  "common.saving": "保存中...",
+  "common.edit": "编辑",
+  "common.delete": "删除",
+  "common.confirmDelete": "再次点击确认删除",
 };

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";

frontend/src/types/index.ts

@@ -10,6 +10,8 @@ export interface SessionConfig {
   detailLevel: "low" | "high";
   language: string;
   scenario: string;    // 情景 ID，如 "free_chat"、"interviewer"
+  cameraDeviceId?: string;  // 摄像头设备 ID，空 = 系统默认
+  micDeviceId?: string;     // 麦克风设备 ID，空 = 系统默认
 }
 
 export type Theme = "dark" | "light";