From 8903a194c9523545fe5db4b6c00e2f2e2dd390bd Mon Sep 17 00:00:00 2001
From: liuwenxin <1009266660@qq.com>
Date: Mon, 19 Oct 2026 15:54:59 +0800
Subject: [PATCH] =?UTF-8?q?style(frontend):=20=E5=AD=97=E4=BD=93=E5=95=86?=
 =?UTF-8?q?=E7=94=A8=E5=90=88=E8=A7=84=E2=80=94=E2=80=94=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?=E5=BE=AE=E8=BD=AF=E9=9B=85=E9=BB=91=EF=BC=8C=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E6=80=9D=E6=BA=90=E9=BB=91=E4=BD=93=E5=BC=80=E6=BA=90=E6=A0=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- index.css 两处字体栈移除 Microsoft YaHei：品牌字与正文统一思源黑体（OFL）
  + HarmonyOS Sans 开源序列，Helvetica/Arial 仅作西文回退
- README 视觉章节对齐 v3 靛蓝体系：配色表/质感来源/落地方式/签名元素/构图
  更新，旧「宋体品牌字」「两档金」表述修正并写明商用字体禁用约定
- 设计预览页字体栈与品牌字候选卡同步，echarts chartFont 去雅黑

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 docs/design/视觉方向预览.html  | 12 ++++++------
 frontend/README.md                   | 29 +++++++++++++++-------------
 frontend/src/assets/styles/index.css | 13 +++++++++----
 3 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/docs/design/视觉方向预览.html b/docs/design/视觉方向预览.html
index 0b46168..9d118c7 100644
--- a/docs/design/视觉方向预览.html
+++ b/docs/design/视觉方向预览.html
@@ -35,7 +35,7 @@
 
     --ys-radius: 10px;
     --ys-radius-sm: 7px;
-    --ys-font: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', -apple-system,
+    --ys-font: 'Noto Sans SC', 'PingFang SC', -apple-system,
       'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
     --ys-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
 
@@ -46,8 +46,8 @@
     /* 极微噪点：去除大色块的塑料感（内联 SVG，无外部依赖） */
     --ys-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
 
-    /* 品牌字：思源黑体（现代几何黑体；实施时自托管 4 字子集，内网可用） */
-    --ys-font-brand: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    /* 品牌字：思源黑体（现代几何黑体；实施时自托管 4 字子集，内网可用）；栈内禁用微软雅黑等需授权字体 */
+    --ys-font-brand: 'Noto Sans SC', 'Source Han Sans SC', 'HarmonyOS Sans SC', 'PingFang SC', sans-serif;
   }
 
   * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -556,8 +556,8 @@
         <div class="bc-cap">B · 思源黑体 300 细体 · 0.42em</div>
       </div>
       <div class="bc">
-        <div style="font-family:'Microsoft YaHei',sans-serif;font-weight:600;letter-spacing:.25em;font-size:16px">衍水集团</div>
-        <div class="bc-cap">C · 微软雅黑 600 · 0.25em</div>
+        <div style="font-weight:600;letter-spacing:.25em;font-size:16px">衍水集团</div>
+        <div class="bc-cap">C · 系统默认 600（不指定字体，展示回退效果）· 0.25em</div>
       </div>
     </div>
   </section>
@@ -936,7 +936,7 @@
 <script src="echarts.min.js"></script>
 <script>
   /* 仪表盘图表：ECharts 定制主题（圆角柱 / 无网格线 / 浅灰轴标签）——实施时前端引入 echarts 依赖 */
-  const chartFont = "'PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif";
+  const chartFont = "'Noto Sans SC','PingFang SC',sans-serif";
   const rev = echarts.init(document.getElementById('chartRev'), null, { renderer: 'svg' });
   rev.setOption({
     grid: { left: 0, right: 0, top: 6, bottom: 20, containLabel: true },
diff --git a/frontend/README.md b/frontend/README.md
index 511ca74..02857a7 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -79,27 +79,30 @@ pnpm build        # 类型检查 + 生产构建
 
 ## 视觉设计
 
-**设计立意**：公司名「衍水」是水，而中文「流水账」字面就是**流水之账**——系统的全部工作正是记录回款怎么流、绩效怎么算。视觉方向由此而生：深水面板 + 流动的层理线，即公司名的意象，也是业务的隐喻。
+**设计立意**：公司名「衍水」是水，而中文「流水账」字面就是**流水之账**——系统的全部工作正是记录回款怎么流、绩效怎么算。视觉方向由此而生：中性灰白的水面纸感 + 靛蓝点缀，安静、克制，长时间核数不累眼。完整规范见 `docs/design/视觉方向预览.html`（2026-10-12 起为 v3「质感版」）。
 
-**配色**（金色分两档是有意的：亮金只用于深色底、深金只用于浅色底，两处对比度都达标）
+**配色**（靛蓝只作重点点缀——主按钮 / 链接 / 焦点 / 当前菜单，大面积用中性灰白）
 
 | 名 | 值 | 用途 |
 | --- | --- | --- |
-| 深渊 | `#061A22` | 品牌面板底色 |
-| 沉碧 | `#0F3646` | 面板渐变、水纹线 |
-| 青金 | `#C9A227` | **深色底上**的细线与边框 |
-| 赭金 | `#8F6520` | **浅色底上**的主按钮（配白字约 6.2:1） |
-| 素纸 | `#FAFAF7` | 表单侧底色 |
-| 墨 | `#16262D` | 正文 |
+| 靛蓝 | `#2e4ba8` | 主按钮、链接、焦点、当前菜单（配白字约 7.5:1） |
+| 深靛 | `#223a85` | 主色深阶（按压态） |
+| 淡靛 | `#edf1fa` | 选中底色、浅色强调底 |
+| 纸白 | `#ffffff` | 卡片与面板底色 |
+| 雾灰 | `#f4f5f8` | 页面底色 |
+| 墨 | `#1c2333` | 正文 |
+| 墨灰 | `#5b6577` / `#9aa3b2` | 次级文本 / 辅助文本 |
 
-**字体**：品牌名用**宋体**（衬线，拟正式、拟账册），正文用系统无衬线，数字与验证码用等宽。
+**字体**：品牌名用**思源黑体**（`Noto Sans SC` / `Source Han Sans SC`，开源可商用），正文用同一无衬线栈，数字与验证码用等宽。**禁止引入微软雅黑、宋体等需商业授权的字体**——CSS 字体栈、设计稿、导出物一律只用开源或免费商用字体（如阿里巴巴普惠体、HarmonyOS Sans）。
 **界面不引入网络字体**——内网环境字体加载不可靠，靠字重、字距与留白做层次更稳妥。新页面请沿用这套字号节奏。
 
-**落地方式**：品牌色已提升为全局 CSS 变量（`src/assets/styles/index.css` 的 `:root`，`--ys-*` 前缀），登录页与布局、系统管理页面共用；全局还把 `--el-color-primary` 指向赭金，Element Plus 组件默认走品牌色。登录页 scoped 里的同名局部变量只是全局 token 的别名。
+**质感来源**（而非装饰）：表面 1–2% 明度差的微渐变、半透明描边、近距 + 远距分层阴影、内高光 / 内阴影、极微噪点（内联 SVG）、精确排版（字距 / 等宽数字 / 行高节律）。
 
-**签名元素**：品牌面板的水纹层理线，越往下越密（如潜向深处），载入时用 `stroke-dashoffset` 逐条画出——**一个统一的入场动作，而不是散落的特效**。
+**落地方式**：品牌色已提升为全局 CSS 变量（`src/assets/styles/index.css` 的 `:root`，`--ys-*` 前缀），登录页、布局与各业务页面共用；全局把 `--el-color-primary` 指向靛蓝，并按 Element Plus 公式预计算了 light-3/5/7/8/9 与 dark-2 色阶（不用 `color-mix()`，避免依赖较新浏览器特性）。旧 token 名（深水青 / 金色系列）在 `:root` 中保留映射，存量页面迁移完成后移除。
 
-**构图**：品牌内容（名称 / 金线 / 系统名 / 主标语 / 环节行）**垂直居中聚成一块**，配一层柔和径向光晕作落点。
+**签名元素**：**渐隐靛蓝水线**——仪表盘等页面标题下的细线（56px，左实右虚）与登录页品牌名下的短线（40px），「衍水」之水的提纯，全站唯一的装饰性元素；登录页右上角另有涟漪同心圆与顶部靛蓝天光作背景（低透明度）。与早期深色面板 + 水纹层理同一意象，品牌连续而非推倒重来。
+
+**构图**：登录页品牌内容（名称 / 标语 / 水线）**垂直居中聚成一块**，配一层柔和径向光晕作落点。
 早期版本用 `space-between` 把品牌与标语顶到两端，中间空出大半屏，两处都成了孤岛——超宽屏会把这种疏离放大得更明显。**内容块要限宽**（`max-width`），否则宽屏下文字会被拉散。
 
 ### 写代码时的三条约定
@@ -110,7 +113,7 @@ pnpm build        # 类型检查 + 生产构建
 
 ## 验证码图片
 
-后端自绘渲染（`backend/app/core/captcha_image.py`），**不再使用 `captcha` 库的默认输出**——那是随机彩色字符 + 重噪点，与界面视觉体系冲突。自绘后字符为墨蓝、底为素纸、干扰线与噪点取自同一套配色。
+后端自绘渲染（`backend/app/core/captcha_image.py`），**不再使用 `captcha` 库的默认输出**——那是随机彩色字符 + 重噪点，与界面视觉体系冲突。自绘后字符为深青色、底为暖白、干扰线与噪点取自同一套配色。
 
 识别难度由**逐字随机旋转（±14°）+ 垂直抖动（±2px）+ 正弦干扰曲线 + 双层噪点**共同保证，与原实现相当；笔画加了 1px 描边——本系统用户是营销人员，屏幕与年龄跨度大，验证码过难会直接变成支持负担。
 
diff --git a/frontend/src/assets/styles/index.css b/frontend/src/assets/styles/index.css
index daad5d6..e657b17 100644
--- a/frontend/src/assets/styles/index.css
+++ b/frontend/src/assets/styles/index.css
@@ -30,8 +30,12 @@
   --ys-text: #1c2333;
   --ys-muted: #5b6577;
 
-  /* 品牌字：思源黑体（实施时自托管 4 字子集，内网可用） */
-  --ys-font-brand: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  /*
+   * 品牌字：思源黑体（实施时自托管 4 字子集，内网可用）。
+   * 栈内只用开源/免费商用字体 —— 微软雅黑、宋体等需商业授权的系统字体不得入栈。
+   */
+  --ys-font-brand: 'Noto Sans SC', 'Source Han Sans SC', 'HarmonyOS Sans SC', 'PingFang SC',
+    sans-serif;
 
   /*
    * Element Plus 主色 = 靛蓝（白字对比约 7.5:1）。
@@ -60,8 +64,9 @@ body,
 }
 
 body {
-  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
-    'Microsoft YaHei', Arial, sans-serif;
+  /* 与品牌栈同源：开源字体优先；Helvetica/Arial 仅为西文回退（系统自带，不涉字体文件分发） */
+  font-family: 'Noto Sans SC', 'Source Han Sans SC', 'HarmonyOS Sans SC', 'PingFang SC',
+    'Helvetica Neue', Arial, sans-serif;
   font-size: 14px;
   color: var(--ys-ink);
   background-color: var(--ys-mist);