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

style(sandbox): 还原浠艾福能量沙盘原始深色配色

用户要求恢复 B2 适配之前的原始配色(深色海军蓝容器 + 五行亮色)。
B2(bcdf7d81c)曾把容器改成浅色并压暗数据色以适配浅底,现整体还原:

- 容器 .wuxing-sandbox:浅色 $app-surface → 深色海军蓝渐变
  ($facade-ink-navy → $accent-navy → $app-ink-night-2)
- 标题 .sandbox-title:$app-text → 浅蓝 #8FC5E8
- 星图区 .sandbox-star:$dim-sandbox-fill 浅底 → 透明(深底透出)
- 五维数据色(DIM_ICON_URIS / render.STROKE / DECOR / flow.WUXING_COLORS)
  深档(#9D174D/#9C4A1A/#4338CA/#92400E/#047857)→ 原始五行亮色
  (心=#FF6B35 身=#8D6E63 智=#FFD700 富=#42A5F5 行=#4CAF50)
- 顶点标签 / 维度条 / 能量徽标:浅底浅色调 → 深底上的亮色 + 半透明五行底色
- 星廓描边 SAND:暖沙 → 浅蓝 #8FC5E8 同系,深底可见
- 太极 INK 不变(绘于白色底圆上,不受容器背景影响)

保留 B2 的 SVG 图标体系与 a11y(canvas role=img/aria-label)。
验证:npm run build:mp-weixin 通过(exit 0);audit-mp-antipatterns ERROR 0。
Agnes Agent 1 неделя назад
Родитель
Сommit
60c67beaeb

+ 7 - 7
cfc-frontend/components/wuxing-sandbox-helpers/flow-animation.js

@@ -14,15 +14,15 @@
  */
  */
 
 
 /**
 /**
- * 粒子颜色:与 render.js 同一套 deep 档(uni.scss $dim-data-*)
- * 暖底 #FCE7CE 上对比度 ≥3:1,粒子不再用旧高饱和五行色
+ * 粒子颜色:与 render.js 同一套原始五行亮色
+ * 深色容器上高对比可见
  */
  */
 var WUXING_COLORS = [
 var WUXING_COLORS = [
-  { r: 156, g: 74, b: 26 },   // 0 土·身 (body)   $dim-data-body   #9C4A1A
-  { r: 157, g: 23, b: 77 },   // 1 火·心 (mind)   $dim-data-mind   #9D174D
-  { r: 67, g: 56, b: 202 },   // 2 金·智 (wisdom) $dim-data-wisdom #4338CA
-  { r: 4, g: 120, b: 87 },    // 3 木·行 (action) $dim-data-action #047857
-  { r: 146, g: 64, b: 14 }    // 4 水·富 (wealth) $dim-data-wealth #92400E
+  { r: 141, g: 110, b: 99 },  // 0 土·身 (body)   #8D6E63
+  { r: 255, g: 107, b: 53 },  // 1 火·心 (mind)   #FF6B35
+  { r: 255, g: 215, b: 0 },   // 2 金·智 (wisdom) #FFD700
+  { r: 76,  g: 175, b: 80 },  // 3 木·行 (action) #4CAF50
+  { r: 66,  g: 165, b: 245 }  // 4 水·富 (wealth) #42A5F5
 ]
 ]
 
 
 var DIM_KEYS = ['body', 'mind', 'wisdom', 'action', 'wealth']
 var DIM_KEYS = ['body', 'mind', 'wisdom', 'action', 'wealth']

+ 13 - 13
cfc-frontend/components/wuxing-sandbox-helpers/render.js

@@ -5,33 +5,33 @@
  * 配色口径(2026-10-27 主理人裁定 · 首页重设计 B2)
  * 配色口径(2026-10-27 主理人裁定 · 首页重设计 B2)
  * - 环形顶点顺序 = sortedDimensions 序:心(火) -> 身(土) -> 智(金) -> 富(水) -> 行(木),不可改
  * - 环形顶点顺序 = sortedDimensions 序:心(火) -> 身(土) -> 智(金) -> 富(水) -> 行(木),不可改
  * - ts 入参即按上面的环形顺序排列:[mind, body, wisdom, wealth, action]
  * - ts 入参即按上面的环形顺序排列:[mind, body, wisdom, wealth, action]
- * - 数据笔触(星臂描边)统一用 deep 档(uni.scss $dim-data-*),对填充 #FCE7CE ≥3:1
+ * - 数据笔触(星臂描边)统一用原始五行亮色,深色容器上高对比可见
  * - 五行主色仅作装饰(星臂 tint 填充 / 光晕),不再承载数据识别
  * - 五行主色仅作装饰(星臂 tint 填充 / 光晕),不再承载数据识别
  */
  */
 
 
 /** 环形顶点顺序(= sortedDimensions 序):0 心 1 身 2 智 3 富 4 行 */
 /** 环形顶点顺序(= sortedDimensions 序):0 心 1 身 2 智 3 富 4 行 */
 export var DIM_RING = ['mind', 'body', 'wisdom', 'wealth', 'action']
 export var DIM_RING = ['mind', 'body', 'wisdom', 'wealth', 'action']
 
 
-/** 数据笔触深档(与 uni.scss $dim-data-* 一致) */
+/** 数据笔触(原始五行亮色,深色容器上高对比可见) */
 var STROKE = {
 var STROKE = {
-  mind:   { r: 157, g: 23,  b: 77  },  // $dim-data-mind   #9D174D
-  body:   { r: 156, g: 74,  b: 26  },  // $dim-data-body   #9C4A1A
-  wisdom: { r: 67,  g: 56,  b: 202 },  // $dim-data-wisdom #4338CA
-  wealth: { r: 146, g: 64,  b: 14  },  // $dim-data-wealth #92400E
-  action: { r: 4,   g: 120, b: 87  }   // $dim-data-action #047857
+  mind:   { r: 255, g: 107, b: 53  },  // 心·火  #FF6B35
+  body:   { r: 141, g: 110, b: 99  },  // 身·土  #8D6E63
+  wisdom: { r: 255, g: 215, b: 0   },  // 智·金  #FFD700
+  wealth: { r: 66,  g: 165, b: 245 },  // 富·水  #42A5F5
+  action: { r: 76,  g: 175, b: 80  }   // 行·木  #4CAF50
 }
 }
 
 
 /** 装饰主色(tint 填充 / 光晕;uni.scss $dim-* 主档,仅装饰不承载数据) */
 /** 装饰主色(tint 填充 / 光晕;uni.scss $dim-* 主档,仅装饰不承载数据) */
 var DECOR = {
 var DECOR = {
-  mind:   { r: 255, g: 107, b: 157 },  // $dim-mind   #FF6B9D
-  body:   { r: 194, g: 112, b: 61  },  // $dim-body   #C2703D
-  wisdom: { r: 99,  g: 102, b: 241 },  // $dim-wisdom #6366F1
-  wealth: { r: 245, g: 158, b: 11  },  // $dim-wealth #F59E0B
-  action: { r: 16,  g: 185, b: 129 }   // $dim-action #10B981
+  mind:   { r: 255, g: 107, b: 53  },  // 心·火  #FF6B35
+  body:   { r: 141, g: 110, b: 99  },  // 身·土  #8D6E63
+  wisdom: { r: 255, g: 215, b: 0   },  // 智·金  #FFD700
+  wealth: { r: 66,  g: 165, b: 245 },  // 富·水  #42A5F5
+  action: { r: 76,  g: 175, b: 80  }   // 行·木  #4CAF50
 }
 }
 
 
 /** 暖中性(星廓 / 太极),与填充 #FCE7CE 同色系 */
 /** 暖中性(星廓 / 太极),与填充 #FCE7CE 同色系 */
-var SAND = { r: 176, g: 137, b: 104 }  // 暖沙描边
+var SAND = { r: 143, g: 197, b: 232 }  // 浅蓝描边
 var INK  = { r: 74,  g: 55,  b: 40  }  // 暖褐墨(太极深面 / 深色数字)
 var INK  = { r: 74,  g: 55,  b: 40  }  // 暖褐墨(太极深面 / 深色数字)
 
 
 function rgba(c, a) {
 function rgba(c, a) {

+ 30 - 30
cfc-frontend/components/wuxing-sandbox.vue

@@ -109,7 +109,7 @@ import {
  *
  *
  * mp-weixin WXML 不支持模板内联 <svg>,故用 data:image/svg+xml 作为 <image> src
  * mp-weixin WXML 不支持模板内联 <svg>,故用 data:image/svg+xml 作为 <image> src
  * (仓库既有模式:pages/shop/order-list/order-list.vue)。SVG 文档是独立渲染上下文,
  * (仓库既有模式:pages/shop/order-list/order-list.vue)。SVG 文档是独立渲染上下文,
- * currentColor 无法继承宿主 CSS,故 stroke 颜色在此处按 $dim-data-* / $brand-primary-deep
+ * currentColor 无法继承宿主 CSS,故 stroke 颜色在此处按原始五行亮色(身=$brown-warm 心=$mind-accent 智=$accent-gold 富=$mat-blue-400 行=$mat-green)硬编码
  * 词表取色(与 uni.scss 令牌一一对应,注释映射;Canvas/JS 侧无法使用 SCSS 变量)。
  * 词表取色(与 uni.scss 令牌一一对应,注释映射;Canvas/JS 侧无法使用 SCSS 变量)。
  *
  *
  * 五行语义由形状承载:心=火焰 身=山 智=闪电 富=水滴 行=叶。
  * 五行语义由形状承载:心=火焰 身=山 智=闪电 富=水滴 行=叶。
@@ -166,13 +166,13 @@ var ICON_PATHS = {
   ]
   ]
 }
 }
 
 
-// 数据笔触深档(与 uni.scss $dim-data-* 一致)—— 图标颜色 = 数据笔触色,保证对填充 #FCE7CE ≥3:1
+// 数据笔触(还原原始五行亮色:身=暖棕 心=橙红 智=金 富=蓝 行=绿)—— 图标为描边,深色容器上亮色高对比可见
 var DIM_ICON_URIS = {
 var DIM_ICON_URIS = {
-  mind:   svgUri(ICON_PATHS.flame,    '#9D174D'), // $dim-data-mind   #9D174D
-  body:   svgUri(ICON_PATHS.mountain, '#9C4A1A'), // $dim-data-body   #9C4A1A
-  wisdom: svgUri(ICON_PATHS.lightning,'#4338CA'), // $dim-data-wisdom #4338CA
-  wealth: svgUri(ICON_PATHS.droplet,  '#92400E'), // $dim-data-wealth #92400E
-  action: svgUri(ICON_PATHS.leaf,     '#047857')  // $dim-data-action #047857
+  mind:   svgUri(ICON_PATHS.flame,    '#FF6B35'), // 心·火  $mind-accent
+  body:   svgUri(ICON_PATHS.mountain, '#8D6E63'), // 身·土  $brown-warm
+  wisdom: svgUri(ICON_PATHS.lightning,'#FFD700'), // 智·金  $accent-gold
+  wealth: svgUri(ICON_PATHS.droplet,  '#42A5F5'), // 富·水  $mat-blue-400
+  action: svgUri(ICON_PATHS.leaf,     '#4CAF50')  // 行·木  $mat-green
 }
 }
 
 
 // UI 图标(品牌深橙,对白底 / 品牌浅底均 ≥3:1;$brand-primary-deep #C2410C)
 // UI 图标(品牌深橙,对白底 / 品牌浅底均 ≥3:1;$brand-primary-deep #C2410C)
@@ -789,15 +789,15 @@ export default {
 
 
 <style scoped lang="scss">
 <style scoped lang="scss">
 /* ============================================================
 /* ============================================================
-容器:浅色暖调卡片(与 B1 .dim-band 视觉语言一致)
+容器:深色海军蓝卡片(还原原始配色)
 ============================================================ */
 ============================================================ */
 .wuxing-sandbox {
 .wuxing-sandbox {
   margin: 20rpx $uni-space-lg;
   margin: 20rpx $uni-space-lg;
   padding: 20rpx 24rpx 24rpx;
   padding: 20rpx 24rpx 24rpx;
-  background: $app-surface;
-  border: 1rpx solid rgba($brand-primary, 0.12);
+  background: linear-gradient(135deg, $facade-ink-navy, $accent-navy, $app-ink-night-2);
+  border: 1rpx solid rgba(255, 255, 255, 0.12);
   border-radius: $radius-lg;
   border-radius: $radius-lg;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.28);
   position: relative;
   position: relative;
   overflow: hidden;
   overflow: hidden;
 }
 }
@@ -811,7 +811,7 @@ export default {
   position: relative;
   position: relative;
   z-index: 5;
   z-index: 5;
 }
 }
-.sandbox-title { font-size: calc(26rpx * var(--font-scale, 1)); font-weight: bold; color: $app-text; margin-left: 8rpx; }
+.sandbox-title { font-size: calc(26rpx * var(--font-scale, 1)); font-weight: bold; color: #8FC5E8; margin-left: 8rpx; }
 .sandbox-logo { width: 32rpx; height: 32rpx; flex-shrink: 0; }
 .sandbox-logo { width: 32rpx; height: 32rpx; flex-shrink: 0; }
 
 
 /* ---- 右上角切换(触控 ≥44px = 88rpx) ---- */
 /* ---- 右上角切换(触控 ≥44px = 88rpx) ---- */
@@ -891,7 +891,7 @@ export default {
   display: flex;
   display: flex;
   justify-content: center;
   justify-content: center;
   align-items: center;
   align-items: center;
-  background: $dim-sandbox-fill;
+  background: transparent;
   border-radius: $radius-md;
   border-radius: $radius-md;
 }
 }
 
 
@@ -911,7 +911,7 @@ export default {
 }
 }
 
 
 /* ============================================================
 /* ============================================================
-顶点:图标 + 中文标签(图标形状承载五行语义,深档色承载数据)
+顶点:图标 + 中文标签(图标形状承载五行语义,亮色(原始五行色)承载数据)
 ============================================================ */
 ============================================================ */
 .star-point {
 .star-point {
   position: absolute; transform: translate(-50%, -50%); z-index: 3;
   position: absolute; transform: translate(-50%, -50%); z-index: 3;
@@ -935,24 +935,24 @@ export default {
   flex-shrink: 0;
   flex-shrink: 0;
   border: 1rpx solid transparent;
   border: 1rpx solid transparent;
 }
 }
-.point-dot--mind { background: $dim-mind-tint; border-color: rgba($dim-mind, 0.35); box-shadow: 0 0 12rpx rgba($dim-mind, 0.22); }
-.point-dot--body { background: $dim-body-tint; border-color: rgba($dim-body, 0.35); box-shadow: 0 0 12rpx rgba($dim-body, 0.22); }
-.point-dot--wisdom { background: $dim-wisdom-tint; border-color: rgba($dim-wisdom, 0.35); box-shadow: 0 0 12rpx rgba($dim-wisdom, 0.22); }
-.point-dot--wealth { background: $dim-wealth-tint; border-color: rgba($dim-wealth, 0.35); box-shadow: 0 0 12rpx rgba($dim-wealth, 0.22); }
-.point-dot--action { background: $dim-action-tint; border-color: rgba($dim-action, 0.35); box-shadow: 0 0 12rpx rgba($dim-action, 0.22); }
+.point-dot--mind { background: rgba(255, 107, 53, 0.18); border-color: rgba(255, 107, 53, 0.5); box-shadow: 0 0 12rpx rgba(255, 107, 53, 0.45); }
+.point-dot--body { background: rgba(141, 110, 99, 0.22); border-color: rgba(141, 110, 99, 0.55); box-shadow: 0 0 12rpx rgba(141, 110, 99, 0.45); }
+.point-dot--wisdom { background: rgba(255, 215, 0, 0.18); border-color: rgba(255, 215, 0, 0.5); box-shadow: 0 0 12rpx rgba(255, 215, 0, 0.4); }
+.point-dot--wealth { background: rgba(66, 165, 245, 0.18); border-color: rgba(66, 165, 245, 0.5); box-shadow: 0 0 12rpx rgba(66, 165, 245, 0.45); }
+.point-dot--action { background: rgba(76, 175, 80, 0.18); border-color: rgba(76, 175, 80, 0.5); box-shadow: 0 0 12rpx rgba(76, 175, 80, 0.45); }
 
 
 .point-icon { width: 40rpx; height: 40rpx; }  /* 20px 下可辨识 */
 .point-icon { width: 40rpx; height: 40rpx; }  /* 20px 下可辨识 */
-.point-label { font-size: calc(22rpx * var(--font-scale, 1)); font-weight: bold; color: $app-text; margin-top: 6rpx; letter-spacing: 2rpx; }
+.point-label { font-size: calc(22rpx * var(--font-scale, 1)); font-weight: bold; color: rgba(143, 197, 232, 0.85); margin-top: 6rpx; letter-spacing: 2rpx; }
 .star-point--row .point-label,
 .star-point--row .point-label,
 .star-point--rev .point-label { margin-top: 0; }
 .star-point--rev .point-label { margin-top: 0; }
 .point-energy { font-size: calc(18rpx * var(--font-scale, 1)); font-weight: 600; padding: 1rpx 10rpx; border-radius: 16rpx; margin-top: 2rpx; }
 .point-energy { font-size: calc(18rpx * var(--font-scale, 1)); font-weight: 600; padding: 1rpx 10rpx; border-radius: 16rpx; margin-top: 2rpx; }
 .star-point--row .point-energy,
 .star-point--row .point-energy,
 .star-point--rev .point-energy { margin-top: 0; }
 .star-point--rev .point-energy { margin-top: 0; }
-.point-energy--mind { color: $dim-data-mind; background: $dim-mind-tint; }
-.point-energy--body { color: $dim-data-body; background: $dim-body-tint; }
-.point-energy--wisdom { color: $dim-data-wisdom; background: $dim-wisdom-tint; }
-.point-energy--wealth { color: $dim-data-wealth; background: $dim-wealth-tint; }
-.point-energy--action { color: $dim-data-action; background: $dim-action-tint; }
+.point-energy--mind { color: #FF6B35; background: rgba(255, 107, 53, 0.16); }
+.point-energy--body { color: #B08968; background: rgba(141, 110, 99, 0.16); }
+.point-energy--wisdom { color: #FFD700; background: rgba(255, 215, 0, 0.16); }
+.point-energy--wealth { color: #42A5F5; background: rgba(66, 165, 245, 0.16); }
+.point-energy--action { color: #4CAF50; background: rgba(76, 175, 80, 0.16); }
 
 
 .star-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 4; width: 180rpx; height: 180rpx; border-radius: 50%; }
 .star-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 4; width: 180rpx; height: 180rpx; border-radius: 50%; }
 
 
@@ -992,11 +992,11 @@ preview 轻量引导条(标题 + 徽章 + 弱化五边形轮廓)
   font-size: calc(20rpx * var(--font-scale, 1));
   font-size: calc(20rpx * var(--font-scale, 1));
   padding: 6rpx 12rpx; border-radius: 8rpx; white-space: nowrap;
   padding: 6rpx 12rpx; border-radius: 8rpx; white-space: nowrap;
 }
 }
-.dim-item--body { color: $dim-data-body; background: $dim-body-tint; }
-.dim-item--wisdom { color: $dim-data-wisdom; background: $dim-wisdom-tint; }
-.dim-item--wealth { color: $dim-data-wealth; background: $dim-wealth-tint; }
-.dim-item--action { color: $dim-data-action; background: $dim-action-tint; }
-.dim-item--mind { color: $dim-data-mind; background: $dim-mind-tint; }
+.dim-item--body { color: #B08968; background: rgba(141, 110, 99, 0.16); }
+.dim-item--wisdom { color: #FFD700; background: rgba(255, 215, 0, 0.16); }
+.dim-item--wealth { color: #42A5F5; background: rgba(66, 165, 245, 0.16); }
+.dim-item--action { color: #4CAF50; background: rgba(76, 175, 80, 0.16); }
+.dim-item--mind { color: #FF6B35; background: rgba(255, 107, 53, 0.16); }
 .dim-item-icon { width: 24rpx; height: 24rpx; margin-right: 4rpx; flex-shrink: 0; }
 .dim-item-icon { width: 24rpx; height: 24rpx; margin-right: 4rpx; flex-shrink: 0; }
 
 
 /* 降低动效偏好:CSS 侧关闭过渡 */
 /* 降低动效偏好:CSS 侧关闭过渡 */