Răsfoiți Sursa

feat: dict.getDictColor 增加兜底色板,确保订单/支付状态有区分度

优先级:字典表配置 → 内置语义色板 → 通用色板取模
Order.status: 开机蓝/成功绿/失败红/取消灰
Order.pay: 未支付橙/已支付绿

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
skyline 3 zile în urmă
părinte
comite
56463fff0d
1 a modificat fișierele cu 32 adăugiri și 1 ștergeri
  1. 32 1
      admin-h5/src/utils/dict.js

+ 32 - 1
admin-h5/src/utils/dict.js

@@ -6,6 +6,24 @@ const DICT_KEY = 'dicts'
 /**
  * 字典工具模块 — 对标 PC 端 admin-web-new/src/utils/dict.ts
  */
+const COLOR_PALETTE = [
+  '#1890FF', '#52C41A', '#FAAD14', '#F5222D', '#722ED1',
+  '#13C2C2', '#EB2F96', '#FA8C16', '#2F54EB', '#009688',
+]
+
+const BUILTIN_COLORS = {
+  'Order.status': {
+    0: '#1890FF',   // 开机 — 蓝色
+    1: '#52C41A',   // 成功 — 绿色
+    2: '#F5222D',   // 失败 — 红色
+    3: '#999999',   // 取消 — 灰色
+  },
+  'Order.pay': {
+    0: '#FAAD14',   // 未支付 — 橙色
+    1: '#52C41A',   // 已支付 — 绿色
+  },
+}
+
 const dictUtil = {
   /**
    * 加载全部字典数据,按 code 分组后存入 storage
@@ -82,6 +100,7 @@ const dictUtil = {
 
   /**
    * 根据字典编码和值获取颜色
+   * 优先级:字典配置 → 内置语义色板 → 通用色板取模
    * @param {string} code - 字典编码
    * @param {*} value - 字典值
    * @returns {string} 颜色值
@@ -92,7 +111,19 @@ const dictUtil = {
     }
     const list = dictUtil.getDictList(code)
     const item = list.find(k => k.value == value)
-    return item?.color || ''
+    if (item?.color) {
+      return item.color
+    }
+    // 兜底:内置语义色板
+    if (BUILTIN_COLORS[code] && BUILTIN_COLORS[code][value]) {
+      return BUILTIN_COLORS[code][value]
+    }
+    // 兜底:通用色板取模
+    const v = Number(value)
+    if (!isNaN(v)) {
+      return COLOR_PALETTE[Math.abs(v) % COLOR_PALETTE.length]
+    }
+    return ''
   },
 
   /**