加了一堆模型和一堆功能

2026-04-16 00:36:21 +08:00
parent 47c0863bab
commit 40de992516
34 changed files with 3111 additions and 718 deletions
--- a/docs/art-agent/VISUAL-STYLE-GUIDE.md
+++ b/docs/art-agent/VISUAL-STYLE-GUIDE.md
@@ -0,0 +1,293 @@
+# EPEEKit 视觉风格指南
+
+> 设计语言：**青绿山水 · 现代演绎**（灵感来源于《千里江山图》）
+> 更新日期：2026-04-15
+
+## 1. 设计语言总结
+
+### 核心风格关键词
+
+- **墨绿深底** — 深山暗处般的底色，取代冷蓝黑
+- **石青石绿** — 千里江山图中的矿物质颜料色，作为主高亮
+- **云烟雾气** — 所有发光和动画效果模拟山间云烟缓慢飘散
+- **山雾玻璃** — 毛玻璃面板带微弱绿底色，如透过薄雾看山
+- **赭金点缀** — 点景人物宫殿的暖色调，用于收藏星标等少量强调
+
+### 视觉感受
+
+> 整体氛围应该是：深夜远眺层峦叠嶂，薄雾在山间缓缓流动，
+> 石青石绿的山色在暗底上若隐若现，偶有赭金灯火点缀其间。
+
+---
+
+## 2. 色彩体系
+
+### 主色调
+
+| 语义 | 变量名 | 色值 | 色彩隐喻 |
+|------|--------|------|---------|
+| 背景主色 | `--bg-primary` | `#0C1210` | 深山暗处 |
+| 背景次级 | `--bg-secondary` | `#131E1A` | 苔藓暗绿 / 山石基底 |
+| 背景三级 | `--bg-tertiary` | `#1C2A24` | 松烟绿 / 远山中层 |
+| 卡片表面 | `--bg-card` | `rgba(16, 30, 24, 0.65)` | 半透明山岩 |
+| 主高亮色 | `--accent` | `#4DB8A4` | 石青绿 — 千里江山图的石青 |
+| 高亮 hover | `--accent-hover` | `#6CD4BE` | 石青亮态 |
+| 辅助高亮 | `--accent-secondary` | `#3A8FB7` | 石绿蓝 — 千里江山图的石绿 |
+| 热门/警告 | `--hot` | `#C4654A` | 赭石红 — 点景人物/宫殿暖色 |
+| 文字主色 | `--text-primary` | `#E0E8E2` | 微泛绿的月白 |
+| 文字次级 | `--text-secondary` | `#7A9485` | 青灰绿 |
+| 边框色 | `--border` | `rgba(77, 184, 164, 0.12)` | 石青半透明 |
+| 发光边框 | `--border-glow` | `rgba(77, 184, 164, 0.25)` | 石青发光态 |
+| 雾气基础 | `--mist` | `rgba(77, 184, 164, 0.06)` | 云雾底色 |
+| 赭金点缀 | `--gold` | `#B8935A` | 用于收藏星标等极少量暖色 |
+
+### 色彩来源说明
+
+石青（`#4DB8A4`）和石绿蓝（`#3A8FB7`）取自《千里江山图》中使用的矿物质颜料色，
+经过现代演绎降低饱和度，使其在深色 UI 中不会过于刺眼。
+赭石红（`#C4654A`）来源于画中点景人物和宫殿使用的暖色颜料。
+
+---
+
+## 3. 排版
+
+### 字体
+
+```css
+font-family: 'Inter', system-ui, -apple-system, sans-serif;
+```
+
+### 尺寸梯度
+
+| 用途 | 大小 | 字重 |
+|------|------|------|
+| 页面标题 | 20px | 700 |
+| 区块标题 | 16px | 600 |
+| 正文/卡片名 | 14px | 500 |
+| 辅助文字 | 12px | 400 |
+| 标签/徽章 | 11px | 600 |
+
+---
+
+## 4. 布局架构
+
+### 整体结构
+
+```
+┌─────────────────────────────────────────────────────┐
+│  Top Nav (56px) — 山雾玻璃面板                        │
+├──────────┬──────────────────────────────────────────┤
+│  侧边栏    │  主内容区（对话 / 资源库）                  │
+│  (280px)  │  (flex-1)                                │
+│  会话列表   │  ┌────────────────────────────────────┐ │
+│  标签筛选   │  │ 对话消息 / 图片网格                   │ │
+│  (fog-scroll) │ │ (fog-scroll 雾气边缘)              │ │
+│           │  └────────────────────────────────────┘ │
+│           │  输入区                                   │
+└──────────┴──────────────────────────────────────────┘
+```
+
+### 间距系统
+
+- 面板间间距：0（紧贴，用边框分隔）
+- 卡片网格间距：16px
+- 内容区内边距：20px
+- 面板内边距：16px
+
+---
+
+## 5. 组件风格规范
+
+### 5.1 导航栏
+
+- 高度 56px，背景 `--bg-secondary`/80 + 毛玻璃
+- Logo 方块使用 `--accent` 背景 + 石青发光阴影
+- 导航项带图标 + 文字
+- 活动项使用 `.glow-border`（云烟边框）
+- 非活动项 hover 时只显示静态边框，不触发动画
+
+### 5.2 侧边栏
+
+- 山雾玻璃背景：`bg-[var(--bg-secondary)]/80 backdrop-blur-xl`
+- 对话图标带石青色 drop-shadow 微光
+- 会话列表使用 `.fog-scroll` 实现顶底雾气渐隐
+- 活动会话使用 `.glow-border`
+
+### 5.3 聊天消息区
+
+- 用户消息：`--accent/15` 背景 + 石青边框
+- 助手消息：`.glass-panel`（山雾玻璃）
+- 加载动画：石青色脉冲圆点
+- 滚动区域使用 `.fog-scroll`
+
+### 5.4 资源库卡片
+
+- 圆角 12px
+- 使用 `.neon-border` 静态发光边框
+- Hover 时边框微微变亮 + 图片 scale(1.03)
+- 底部信息区：`--bg-secondary/80` 毛玻璃
+
+### 5.5 图片详情面板
+
+- 山雾玻璃背景：`--bg-secondary/90 backdrop-blur-xl`
+- 操作按钮区：石青主色 + 三级背景辅助色
+
+---
+
+## 6. 视觉效果
+
+### 6.1 山雾玻璃面板
+
+```css
+.glass-panel {
+  background:
+    linear-gradient(165deg, rgba(16, 30, 24, 0.15) 0%, transparent 50%),
+    rgba(16, 30, 24, 0.55);
+  backdrop-filter: blur(24px) saturate(1.1);
+  border: 1px solid var(--border);
+}
+```
+
+相比传统 Glassmorphism，增加了微弱绿底色渐变层，
+模拟透过薄雾看山石的质感。blur 增加到 24px 以加强朦胧感。
+
+### 6.2 静态发光边框
+
+```css
+.neon-border {
+  border: 1px solid var(--border);          /* rgba(77, 184, 164, 0.12) */
+  transition: border-color 200ms ease, box-shadow 200ms ease;
+}
+.neon-border:hover {
+  border-color: var(--border-glow);         /* rgba(77, 184, 164, 0.25) */
+  box-shadow: 0 0 18px rgba(77, 184, 164, 0.08),
+              inset 0 0 12px rgba(77, 184, 164, 0.03);
+}
+```
+
+### 6.2.1 云烟缭绕边框
+
+用于导航活动项、活动会话等"选中态"组件。
+
+**交互模式**：
+- **常态（选中）**：石青色微弱均匀静态发光边框 + box-shadow
+- **hover**：云烟缓慢缭绕效果通过 `opacity 600ms ease` 平滑淡入
+- **鼠标移开**：云烟通过 `opacity 600ms ease` 平滑淡散，无跳变
+
+**视觉感受**：hover 时边缘有一团朦胧的云烟缓慢飘过，而非锐利的光线旋转。
+
+**技术实现**：
+- `@property --glow-angle` 注册可动画角度属性
+- `conic-gradient` 使用 40-50% 的宽弧段（比之前的 20% 更宽），更柔和
+- 旋转周期 6s（比之前的 3s 更慢），模拟云烟的悠缓
+- `::before` — 云烟边框层，mask-composite 裁出 1.5px 边框
+- `::after` — 雾气扩散层，`blur(12px)`（比之前的 6px 更大），范围 `inset: -6px`
+- 两层伪元素默认 `opacity: 0`，hover 时 `opacity: 1`，transition 600ms
+
+```css
+.glow-border {
+  border: 1px solid rgba(77, 184, 164, 0.18);
+  box-shadow: 0 0 10px rgba(77, 184, 164, 0.05);
+}
+.glow-border::before,
+.glow-border::after {
+  animation: mistSpin 6s linear infinite;
+  opacity: 0;
+  transition: opacity 600ms ease;
+}
+.glow-border:hover::before,
+.glow-border:hover::after {
+  opacity: 1;
+}
+```
+
+### 6.3 山雾背景
+
+背景不再使用静态光斑，改为多层缓慢漂移的云雾：
+
+```css
+/* 远景雾 — 60s 缓慢漂移 */
+body::before {
+  inset: -10%;
+  background:
+    radial-gradient(ellipse 80% 50% at 15% 75%, rgba(77, 184, 164, 0.07) ...),
+    radial-gradient(ellipse 60% 40% at 75% 25%, rgba(58, 143, 183, 0.05) ...),
+    radial-gradient(ellipse 90% 60% at 50% 50%, rgba(77, 184, 164, 0.03) ...);
+  animation: fogDriftFar 60s ease-in-out infinite;
+}
+
+/* 近景雾 — 45s 不同速率漂移 */
+body::after {
+  inset: -15%;
+  background:
+    radial-gradient(ellipse 70% 45% at 80% 70%, rgba(77, 184, 164, 0.06) ...),
+    radial-gradient(ellipse 50% 60% at 25% 30%, rgba(58, 143, 183, 0.04) ...);
+  animation: fogDriftNear 45s ease-in-out infinite;
+}
+```
+
+两层雾使用不同的漂移速率和方向，模拟远山和近山的视差效果。
+`inset` 使用负值以避免雾气漂移时在屏幕边缘露出空白。
+
+### 6.4 雾气滚动边缘
+
+主要滚动区域（聊天消息、会话列表）的顶部和底部使用渐变遮罩，
+让内容看起来消失在云雾中：
+
+```css
+.fog-scroll {
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0px,
+    black 36px,
+    black calc(100% - 36px),
+    transparent 100%
+  );
+}
+```
+
+纯 CSS 实现，无 JS 开销。36px 的渐变区域提供柔和的过渡。
+
+### 6.5 过渡动画
+
+- 所有交互元素：`transition: all 200ms ease`
+- 云烟淡入淡出：600ms ease
+- 面板展开/折叠：250ms ease-in-out
+- 新消息出现：`fadeIn 200ms ease-out` + `translateY(8px → 0)`
+- 背景雾气漂移：45-60s ease-in-out infinite
+
+---
+
+## 7. 与原版 Cyberpunk 风格的对比
+
+| 维度 | Cyberpunk | 青绿山水 |
+|------|-----------|---------|
+| 底色 | 冷蓝黑 `#0B0E14` | 墨绿黑 `#0C1210` |
+| 高亮色 | 霓虹绿 `#00E5A0` | 石青绿 `#4DB8A4` |
+| 发光效果 | 锐利霓虹光线旋转 | 柔和云烟缓慢缭绕 |
+| 旋转速度 | 3s/圈 | 6s/圈 |
+| 光晕模糊 | blur(6px) | blur(12px) |
+| 渐变弧段 | 20%（锐利光束） | 40-50%（弥漫雾团） |
+| 背景 | 静态双色光斑 | 多层漂移云雾 |
+| 面板质感 | 标准毛玻璃 | 山雾玻璃（绿底渐变） |
+| 滚动边缘 | 无 | 雾气渐隐 |
+| 警告色 | 霓虹红 `#FF3B5C` | 赭石红 `#C4654A` |
+
+---
+
+## 8. 响应式断点
+
+| 断点 | 布局 |
+|------|------|
+| ≥768px (md) | 双栏：侧边栏(280px) + 主内容区(flex-1) |
+| <768px | 单栏：侧边栏为固定抽屉 + 主内容区全宽 |
+
+---
+
+## 9. 设计哲学
+
+本风格将中国传统青绿山水画的色彩语言与现代暗色 UI 设计融合：
+- **沉浸感**：深墨底色营造夜间远山的静谧氛围，适合创意工具
+- **自然动效**：所有动画模拟自然现象（云烟飘动），而非机械闪烁
+- **克制用色**：石青石绿只用于高亮和交互反馈，不滥用；赭金极少量点缀
+- **雾气意境**：从边框云烟到背景漂移到滚动渐隐，统一的"雾"意象贯穿全站