shiyong.qin/EPEEAIKit

Fork 0

Files

Shin@HOME 40de992516 加了一堆模型和一堆功能

2026-04-16 00:36:21 +08:00

9.9 KiB

Raw Blame History

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. 排版

字体

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 山雾玻璃面板

.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 静态发光边框

.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

.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 山雾背景

背景不再使用静态光斑，改为多层缓慢漂移的云雾：

/* 远景雾 — 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 雾气滚动边缘

主要滚动区域（聊天消息、会话列表）的顶部和底部使用渐变遮罩，让内容看起来消失在云雾中：

.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 设计融合：

沉浸感：深墨底色营造夜间远山的静谧氛围，适合创意工具
自然动效：所有动画模拟自然现象（云烟飘动），而非机械闪烁
克制用色：石青石绿只用于高亮和交互反馈，不滥用；赭金极少量点缀
雾气意境：从边框云烟到背景漂移到滚动渐隐，统一的"雾"意象贯穿全站

9.9 KiB Raw Blame History Unescape Escape