FinAgent 前端进度博客（十）｜前端风格优化

系列说明：本系列按「首页 → 登录 → 各功能页」记录前端进度。本文为 第 10 篇：前端风格全面优化，引入 Studio Ink 设计系统，实现温暖编辑风格的视觉升级

日期：2026-06-21
模块：web → styles.css / 全局主题系统

---

负责模块：前端与可视化

本周任务：对整个项目的前端风格进行全面优化，引入 Studio Ink 设计系统，实现从冷色调到温暖编辑风格的视觉升级，同时保持日间/夜间主题的完美适配。

---

1. 背景与目标

FinAgent 系统原有的前端风格采用冷色调的蓝色系设计，虽然专业但缺乏温度和亲和力。随着系统功能的不断完善，用户对视觉体验的要求也在提升。本次目标是通过引入全新的 Studio Ink 设计系统，打造一个更加温暖、专业、具有编辑风格的金融分析平台。

此前系统存在以下视觉问题：

• 色彩系统过于冷峻，缺乏情感温度
• 阴影和边框处理不够精致
• 字体选择不够现代
• 滚动条样式与整体风格不协调
• 部分组件的圆角和间距不够统一

本次目标：

• 色彩系统升级：引入 Studio Ink 温暖编辑风格调色板
• 主题系统优化：完善日间/夜间主题的色彩映射
• 设计语言统一：统一圆角、阴影、间距等设计token
• 字体系统优化：采用 DM Sans 现代字体
• 滚动条美化：自定义滚动条样式，提升整体质感
• 兼容性保障：通过 legacy 别名确保旧代码平滑迁移

---

2. 改造概览

区域	本次升级
色彩系统	引入 Studio Ink 调色板：ink、paper、sage、clay、slate、rose、wine
主题系统	完善日间/夜间主题的 CSS 变量映射，增加平滑过渡
设计token	统一圆角（14px、10px、22px、999px）、阴影、间距
字体系统	采用 DM Sans 字体，提升现代感和可读性
滚动条	自定义滚动条样式，light/dark 主题下保持可见
兼容层	保留 legacy 别名（–fi-navy、–fi-green 等），确保平滑迁移
过渡动画	关键 UI 元素增加 0.35s ease 过渡，避免主题切换闪变

---

3. 实现要点

3.1 Studio Ink 色彩系统

Studio Ink 是一个温暖的编辑风格调色板，灵感来自传统墨水和纸张的质感。主色调包括：

• ink 系列：墨色系，用于主要文字和深色元素

  • –ink：#1e2a32（主墨色）
  • –ink-soft：#3d4f5c（柔和墨色）
  • –ink-muted：#64748b（静默墨色）

• paper 系列：纸张色系，用于背景和表面

  • –paper：#f7f4ef（主纸张色）
  • –paper-elevated：#fdfcfa（提升纸张色）

• sage 系列：鼠尾草绿系，用于强调色和交互元素

  • –sage：#4a6b5a（主鼠尾草绿）
  • –sage-hover：#3f5c4d（悬停色）
  • –sage-light：#6d8f7c（浅色）
  • –sage-mist：#e9f0eb（雾色）

• clay 系列：陶土色系，用于辅助强调

  • –clay：#a88862（主陶土色）
  • –clay-deep：#7a6348（深色）
  • –clay-mist：#f4ece2（雾色）

• slate、rose、wine 系列：板岩色、玫瑰色、酒红色，用于不同场景的辅助色

3.2 主题系统优化

日间/夜间主题通过 CSS 变量实现，关键变化：

• 日间主题：使用温暖的纸张色和墨色，营造舒适的阅读环境
• 夜间主题：反转色彩，使用深色背景和浅色文字，保护眼睛
• 过渡动画：关键 UI 元素增加 0.35s ease 过渡，避免主题切换时的闪变
• 阴影调整：夜间主题下阴影更加柔和，避免过于刺眼

主题切换通过 data-theme 属性驱动，所有颜色变量都定义在 :root 和 :root[data-theme=“dark”] 中。

3.3 设计语言统一

统一的设计 token 确保整体风格的一致性：

• 圆角系统：

  • –radius：14px（默认圆角）
  • –radius-sm：10px（小圆角）
  • –radius-lg：22px（大圆角）
  • –radius-pill：999px（胶囊圆角）

• 阴影系统：

  • –fi-shadow：0 10px 40px rgba(30, 42, 50, 0.07)（默认阴影）
  • –fi-shadow-sm：0 4px 18px rgba(30, 42, 50, 0.05)（小阴影）
  • –fi-glow-sage：0 6px 20px rgba(74, 107, 90, 0.18)（鼠尾草绿光晕）

• 间距系统：统一使用 4px 基数，确保间距的节奏感

3.4 字体系统优化

采用 DM Sans 字体，提升现代感和可读性：

font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
  "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", 
  "Microsoft YaHei", sans-serif;

DM Sans 是一款现代无衬线字体，具有优秀的屏幕显示效果和可读性，特别适合金融数据密集的场景。

3.5 滚动条美化

自定义滚动条样式，确保在 light/dark 主题下都保持可见：

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid var(--scrollbar-track);
}

滚动条使用圆角设计，与整体风格保持一致。日间主题下滚动条为浅灰色，夜间主题下为深灰色。

3.6 兼容性保障

为了确保旧代码的平滑迁移，保留了 legacy 别名：

/* Legacy aliases (theme layer) */
--fi-navy: var(--ink);
--fi-navy-soft: var(--ink-soft);
--fi-green: var(--sage);
--fi-green-hover: var(--sage-hover);
--fi-green-light: var(--sage-light);
--fi-green-soft: var(--sage-mist);

这些别名映射到新的色彩系统，确保使用旧变量名的代码仍然可以正常工作。

3.7 组件样式适配

所有组件样式都适配新的色彩系统：

• 卡片组件：使用 --surface-color 和 --surface-border
• 按钮组件：使用 --sage-mist 和 --sage
• 输入框组件：使用 --surface-color 和 --surface-border
• 导航组件：使用 --sidebar-bg、–sidebar-text、–sidebar-border
• 头部组件：使用 --header-bg、–header-fg、–header-border

每个组件都经过精心调优，确保在日间/夜间主题下都有良好的视觉效果。

---

4. 涉及文件

文件	变更说明
web/src/styles.css	重构：引入 Studio Ink 色彩系统，重构全局样式
web/src/theme-flaticon.css	保持不变：图标字体样式

---

5. 小结

本篇完成了前端风格的全面优化，引入了 Studio Ink 设计系统，实现了从冷色调到温暖编辑风格的视觉升级。通过色彩系统、主题系统、设计语言、字体系统、滚动条样式的全面优化，打造了一个更加专业、温暖、具有现代感的金融分析平台。

---

（FinAgent 项目实训进度记录 · 前端风格优化篇）