Просмотр исходного кода

feat(admin): 全系统主色加深至 AA 达标并解耦五维品牌色

Agnes Agent 2 дней назад
Родитель
Сommit
44e95b979b
2 измененных файлов с 16 добавлено и 11 удалено
  1. 8 8
      cfc-web/src/styles/admin-tokens.css
  2. 8 3
      cfc-web/src/utils/colorTokens.js

+ 8 - 8
cfc-web/src/styles/admin-tokens.css

@@ -19,10 +19,10 @@
    使所有引用旧变量的规则自动纳入新体系,无需逐条改写。
    ============================================================ */
 :root {
-  /* ---- 品牌主色与功能色(Ant Design 5 语义色) ---- */
-  --color-primary: #1677FF;          /* 原 #409EFF → Ant 蓝 */
-  --color-primary-light: #4096FF;    /* hover */
-  --color-primary-dark: #0958D9;     /* active */
+  /* ---- 品牌主色与功能色(主色加深以满足 AA) ---- */
+  --color-primary: #0B5FCC;          /* 加深以满足 AA 对比度 */
+  --color-primary-light: #0958D9;    /* hover:比 default 更深 */
+  --color-primary-dark: #003EB3;     /* active:三态最深 */
   --color-success: #52C41A;          /* 原 #67C23A */
   --color-warning: #FAAD14;          /* 原 #E6A23C */
   --color-danger: #FF4D4F;           /* 原 #F56C6C */
@@ -81,9 +81,9 @@
   --width-select-xl: 200px;
 
   /* ---- 企业级语义令牌(Ant 规范,新增样式优先使用这一组) ---- */
-  --adm-primary: #1677FF;
-  --adm-primary-hover: #4096FF;
-  --adm-primary-active: #0958D9;
+  --adm-primary: #0B5FCC;
+  --adm-primary-hover: #0958D9;
+  --adm-primary-active: #003EB3;
   --adm-success: #52C41A;
   --adm-success-text: #389E0D;
   --adm-success-bg: #F6FFED;
@@ -96,7 +96,7 @@
   --adm-error-text: #CF1322;
   --adm-error-bg: #FFF1F0;
   --adm-error-border: #FFCCC7;
-  --adm-info: #1677FF;
+  --adm-info: #0B5FCC;
   --adm-info-text: #0958D9;
   --adm-info-bg: #E6F4FF;
   --adm-info-border: #91CAFF;

+ 8 - 3
cfc-web/src/utils/colorTokens.js

@@ -8,7 +8,9 @@
  * 2. `--adm-primary` 等令牌的取值在 admin-tokens.css 中定义,本模块只读取不改动;
  * 3. canvas / echarts 的 itemStyle.color、color 数组不解析 CSS 变量,
  *    必须经 adminColor() 用 getComputedStyle 读取运行时令牌值;
- * 4. 普通 DOM 样式仍优先写 `var(--adm-primary)`,不要为了统一样式而多绕一层 JS。
+ * 4. 普通 DOM 样式仍优先写 `var(--adm-primary)`,不要为了统一样式而多绕一层 JS;
+ * 5. 后台主色令牌与五维品牌色已解耦、互不影响:主色加深后不再与五维「智」同源,
+ *    adminColor('primary') 的兜底值由 ADMIN_PRIMARY_FALLBACK 独立提供,五维色值恒定不动。
  */
 
 /** 五维色彩映射(单一出口) */
@@ -20,6 +22,9 @@ export const DIMENSION_COLORS = {
   mind: '#FF6B9D' // 心
 }
 
+/** 后台主色兜底值:与五维品牌色解耦,独立维护,勿复用 DIMENSION_COLORS.wisdom */
+const ADMIN_PRIMARY_FALLBACK = '#0B5FCC'
+
 /** 后台语义令牌 → CSS 变量名 */
 const TOKEN_VAR_MAP = {
   primary: '--adm-primary',
@@ -54,8 +59,8 @@ export function adminColor(key) {
   if (Object.prototype.hasOwnProperty.call(DIMENSION_COLORS, key)) return DIMENSION_COLORS[key]
   const varName = TOKEN_VAR_MAP[key]
   if (!varName) return ''
-  // primary 的兜底值与五维「智」同源(--adm-primary 即 #1677FF)
-  const fallback = key === 'primary' ? DIMENSION_COLORS.wisdom : ''
+  // 兜底值独立于五维品牌色:后台主色加深后与「智」解耦,两者互不影响
+  const fallback = key === 'primary' ? ADMIN_PRIMARY_FALLBACK : ''
   return readCssVar(varName, fallback)
 }