shiyong.qin/EPEEAIKit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

小优化，产品愿景，视觉规范，交互和导航大版本

Browse Source
This commit is contained in:
Nostars Developer
2026-04-16 18:11:35 +08:00
parent 5878f7d9f4
commit 10f9c0061a
51 changed files with 5010 additions and 847 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
docs/art-agent/VISUAL-STYLE-GUIDE.md
View File

@@ -1,22 +1,24 @@
# EPEEKit 视觉风格指南
> 设计语言：**青绿山水 · 现代演绎**（灵感来源于《千里江山图》）
> 更新日期：2026-04-15
> 设计语言：**白底青绿 · 绢本山水**（灵感来源于《千里江山图》）
> 更新日期：2026-04-16
## 1. 设计语言总结
### 核心风格关键词
- **墨绿深底** — 深山暗处般的底色，取代冷蓝黑
- **石青石绿** — 千里江山图中的矿物质颜料色，作为主高亮
- **绢本白底** — 画卷绢纸的微暖白色，取代暗色系背景
- **石青石绿** — 千里江山图中的矿物质颜料色，用于框体边框和高亮
- **云烟雾气** — 所有发光和动画效果模拟山间云烟缓慢飘散
- **山雾玻璃** — 毛玻璃面板带微弱绿底色，如透过薄雾看山
- **白纱玻璃** — 白色半透明毛玻璃面板，如薄纱覆于绢面
- **赭金点缀** — 点景人物宫殿的暖色调，用于收藏星标等少量强调
- **墨色文字** — 正文使用接近墨黑色，清晰可读
### 视觉感受
> 整体氛围应该是：深夜远眺层峦叠嶂，薄雾在山间缓缓流动，
> 石青石绿的山色在暗底上若隐若现，偶有赭金灯火点缀其间。
> 整体氛围应该是：白色绢底铺展，青绿山色点缀于框体和光效之中，
> 文字如墨书于纸上，偶有赭金灯火点缀其间。
> 像在白昼中远眺千里江山，青绿分明而不压迫。
---
@@ -26,27 +28,34 @@
| 语义 | 变量名 | 色值 | 色彩隐喻 |
|------|--------|------|---------|
| 背景主色 | `--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` | 石绿蓝 — 千里江山图的石绿 |
| 背景主色 | `--bg-primary` | `#FAFAF7` | 绢本微暖白 |
| 背景次级 | `--bg-secondary` | `#F2F1EC` | 绢纸淡米色 |
| 背景三级 | `--bg-tertiary` | `#E8E6DF` | 染旧的纸色 |
| 卡片表面 | `--bg-card` | `rgba(255, 255, 255, 0.8)` | 白纱覆面 |
| 主高亮色 | `--accent` | `#2E8B7A` | 石青 — 千里江山图的石青 |
| 高亮 hover | `--accent-hover` | `#3AA38E` | 石青亮态 |
| 辅助高亮 | `--accent-secondary` | `#3A7FB8` | 石绿蓝 — 千里江山图的石绿 |
| 热门/警告 | `--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)` | 云雾底色 |
| 文字主色 | `--text-primary` | `#1A1A1A` | 墨黑 |
| 文字次级 | `--text-secondary` | `#6B7B8A` | 灰蓝 |
| 边框色 | `--border` | `rgba(46, 139, 122, 0.15)` | 石青半透明 |
| 发光边框 | `--border-glow` | `rgba(46, 139, 122, 0.30)` | 石青发光态 |
| 雾气基础 | `--mist` | `rgba(46, 139, 122, 0.04)` | 淡雅云雾 |
| 赭金点缀 | `--gold` | `#B8935A` | 用于收藏星标等极少量暖色 |
### 色彩来源说明
石青（`#4DB8A4`）和石绿蓝（`#3A8FB7`）取自《千里江山图》中使用的矿物质颜料色，
经过现代演绎降低饱和度，使其在深色 UI 中不会过于刺眼。
石青（`#2E8B7A`）和石绿蓝（`#3A7FB8`）取自《千里江山图》中使用的矿物质颜料色，
经过适度加深以确保在白底 UI 上对比度足够、清晰可辨。
赭石红（`#C4654A`）来源于画中点景人物和宫殿使用的暖色颜料。
### 与旧版（暗绿底）的关键差异
真正的千里江山图是**青绿设色于绢本白底之上**——山体的石青石绿占据画面，
但大面积留白（云、水、天际）给了青绿色块呼吸感。旧版将背景设为墨绿深色，
导致全屏绿色信息量过载，层次反而被压扁。新版回归绢本白底，让青绿色作为
框体和高亮的点缀，更贴近原画精髓。
---
## 3. 排版
@@ -75,7 +84,7 @@ font-family: 'Inter', system-ui, -apple-system, sans-serif;
```
┌─────────────────────────────────────────────────────┐
│ Top Nav (56px) — 山雾玻璃面板 │
│ Top Nav (56px) — 白纱玻璃面板 │
├──────────┬──────────────────────────────────────────┤
│ 侧边栏 │ 主内容区（对话 / 资源库） │
│ (280px) │ (flex-1) │
@@ -100,23 +109,23 @@ font-family: 'Inter', system-ui, -apple-system, sans-serif;
### 5.1 导航栏
- 高度 56px，背景 `--bg-secondary`/80 + 毛玻璃
- Logo 方块使用 `--accent` 背景 + 石青发光阴影
- 高度 56px，背景 `--bg-secondary` + 毛玻璃
- Logo 方块使用 `--accent` 背景 + 白色文字 + 石青发光阴影
- 导航项带图标 + 文字
- 活动项使用 `.glow-border`（云烟边框）
- 非活动项 hover 时只显示静态边框，不触发动画
### 5.2 侧边栏
- 山雾玻璃背景：`bg-[var(--bg-secondary)]/80 backdrop-blur-xl`
- 白纱玻璃背景：`bg-[var(--bg-secondary)] backdrop-blur-xl`
- 对话图标带石青色 drop-shadow 微光
- 会话列表使用 `.fog-scroll` 实现顶底雾气渐隐
- 活动会话使用 `.glow-border`
### 5.3 聊天消息区
- 用户消息：`--accent/15` 背景 + 石青边框
- 助手消息：`.glass-panel`（山雾玻璃）
- 用户消息：`--accent/8` ~ `--accent/15` 渐变背景，左上切角，墨色文字
- 助手消息：`.surface-2`（白纱玻璃）+ 石青左边框
- 加载动画：石青色脉冲圆点
- 滚动区域使用 `.fog-scroll`
@@ -129,39 +138,36 @@ font-family: 'Inter', system-ui, -apple-system, sans-serif;
### 5.5 图片详情面板
- 山雾玻璃背景：`--bg-secondary/90 backdrop-blur-xl`
- 白纱玻璃背景：`--bg-secondary/90 backdrop-blur-xl`
- 操作按钮区：石青主色 + 三级背景辅助色
---
## 6. 视觉效果
### 6.1 山雾玻璃面板
### 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);
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(20px) 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) */
border: 1px solid var(--border); /* rgba(46, 139, 122, 0.15) */
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);
border-color: var(--border-glow); /* rgba(46, 139, 122, 0.30) */
box-shadow: 0 0 18px rgba(46, 139, 122, 0.08),
inset 0 0 12px rgba(46, 139, 122, 0.03);
}
```
@@ -178,16 +184,16 @@ font-family: 'Inter', system-ui, -apple-system, sans-serif;
**技术实现**：
- `@property --glow-angle` 注册可动画角度属性
- `conic-gradient` 使用 40-50% 的宽弧段（比之前的 20% 更宽），更柔和
- 旋转周期 6s（比之前的 3s 更慢），模拟云烟的悠缓
- `conic-gradient` 使用 40-50% 的宽弧段，更柔和
- 旋转周期 6s，模拟云烟的悠缓
- `::before` — 云烟边框层，mask-composite 裁出 1.5px 边框
- `::after` — 雾气扩散层，`blur(12px)`（比之前的 6px 更大），范围 `inset: -6px`
- `::after` — 雾气扩散层，`blur(12px)`
- 两层伪元素默认 `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);
border: 1px solid rgba(46, 139, 122, 0.20);
box-shadow: 0 0 10px rgba(46, 139, 122, 0.06);
}
.glow-border::before,
.glow-border::after {
@@ -203,31 +209,31 @@ font-family: 'Inter', system-ui, -apple-system, sans-serif;
### 6.3 山雾背景
背景不再使用静态光斑，改为多层缓慢漂移的云雾：
背景使用多层缓慢漂移的淡雅云雾（极低透明度，在白底上若隐若现）：
```css
/* 远景雾 — 60s 缓慢漂移 */
body::before {
.fog-layer-far {
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) ...);
radial-gradient(ellipse 80% 50% at 15% 75%, rgba(46, 139, 122, 0.04) ...),
radial-gradient(ellipse 60% 40% at 75% 25%, rgba(58, 127, 184, 0.03) ...),
radial-gradient(ellipse 90% 60% at 50% 50%, rgba(46, 139, 122, 0.02) ...);
animation: fogDriftFar 60s ease-in-out infinite;
}
/* 近景雾 — 45s 不同速率漂移 */
body::after {
.fog-layer-near {
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) ...);
radial-gradient(ellipse 70% 45% at 80% 70%, rgba(46, 139, 122, 0.03) ...),
radial-gradient(ellipse 50% 60% at 25% 30%, rgba(58, 127, 184, 0.025) ...);
animation: fogDriftNear 45s ease-in-out infinite;
}
```
两层雾使用不同的漂移速率和方向，模拟远山和近山的视差效果。
`inset` 使用负值以避免雾气漂移时在屏幕边缘露出空白。
透明度远低于暗色版本，在白底上呈现为淡淡的青绿色氤氲。
### 6.4 雾气滚动边缘
@@ -258,20 +264,18 @@ body::after {
---
## 7. 与原版 Cyberpunk 风格的对比
## 7. 与旧版（暗绿底 Cyberpunk 风格）的对比
| 维度 | Cyberpunk | 青绿山水 |
|------|-----------|---------|
| 底色 | 冷蓝黑 `#0B0E14` | 墨绿黑 `#0C1210` |
| 高亮色 | 霓虹绿 `#00E5A0` | 石青绿 `#4DB8A4` |
| 发光效果 | 锐利霓虹光线旋转 | 柔和云烟缓慢缭绕 |
| 旋转速度 | 3s/圈 | 6s/圈 |
| 光晕模糊 | blur(6px) | blur(12px) |
| 渐变弧段 | 20%（锐利光束） | 40-50%（弥漫雾团） |
| 背景 | 静态双色光斑 | 多层漂移云雾 |
| 面板质感 | 标准毛玻璃 | 山雾玻璃（绿底渐变） |
| 滚动边缘 | 无 | 雾气渐隐 |
| 警告色 | 霓虹红 `#FF3B5C` | 赭石红 `#C4654A` |
| 维度 | 旧版暗绿 | 新版白底青绿 |
|------|----------|------------|
| 底色 | 墨绿黑 `#0C1210` | 绢本白 `#FAFAF7` |
| 高亮色 | 石青 `#4DB8A4` | 石青 `#2E8B7A`（加深适配白底） |
| 文字色 | 微绿月白 `#E0E8E2` | 墨黑 `#1A1A1A` |
| 面板质感 | 绿底毛玻璃 | 白色毛玻璃 |
| 背景雾气 | 中等透明度（暗底上可见） | 极低透明度（白底上若隐若现） |
| 发光效果 | 柔和云烟缓慢缭绕 | 保持，但阴影更轻柔 |
| 整体感受 | 深夜远山 | 白昼绢本 |
| 可读性 | 浅色字暗底，OK | 墨色字白底，更佳 |
---
@@ -286,8 +290,9 @@ body::after {
## 9. 设计哲学
本风格将中国传统青绿山水画的色彩语言与现代暗色 UI 设计融合：
- **沉浸感**：深墨底色营造夜间远山的静谧氛围，适合创意工具
本风格将中国传统青绿山水画的色彩语言与现代白色 UI 设计融合：
- **绢本留白**：白底如绢纸铺展，给青绿色块留出呼吸空间
- **青绿设色**：石青石绿只用于框体边框、高亮和交互反馈，克制而鲜明
- **自然动效**：所有动画模拟自然现象（云烟飘动），而非机械闪烁
- **克制用色**：石青石绿只用于高亮和交互反馈，不滥用；赭金极少量点缀
- **墨色可读**：正文使用接近纯黑的墨色，在白底上对比度极佳
- **雾气意境**：从边框云烟到背景漂移到滚动渐隐，统一的"雾"意象贯穿全站