Преглед изворни кода

refactor(miniapp): 五维页接入设计令牌体系(UniForge 阶段一:语义基座)

- uni.scss 新增 12 节真实语义令牌:品牌橙 $brand-primary(#F97316)、五维 $dim-body/mind/wisdom/action/wealth(+soft)、语义角色 $app-bg/surface/text/text-secondary/text-muted/border、状态与动效令牌、dim-card/press-scale/touch-target mixin。背景:原 token 主色蓝 #5B9BD5 与线上实际主色橙 #F97316 脱节,五维色长期硬编码未入体系

- 五页 style 接入 lang="scss",74 处硬编码改为语义令牌(数值等价,视觉零变化)

- action-detail 修复 3 处 transition: all,改为显式 opacity/transform + $ease-standard

- 修复 pages/wealth/index.vue 缺失 </style> 结尾标签(文件被截断且 HEAD 同样损坏,会阻断整包编译)

- 验证:dart-sass 逐页编译五页 style 区块全部通过
liaoxg пре 1 недеља
родитељ
комит
91be6f099a

+ 27 - 27
cfc-frontend/pages/action-detail/index.vue

@@ -842,10 +842,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .container {
   min-height: 100vh;
-  background: linear-gradient(180deg, #F0FFF4 0%, #F5F7FA 40%);
+  background: linear-gradient(180deg, #F0FFF4 0%, $app-bg 40%);
   padding-bottom: 120rpx;
 }
 
@@ -853,7 +853,7 @@ export default {
 .brand-strap {
   margin: 24rpx 30rpx 0;
   padding: 28rpx 32rpx;
-  background: linear-gradient(135deg, #10B981 0%, #34D399 50%, #6EE7B7 100%);
+  background: linear-gradient(135deg, $dim-action 0%, #34D399 50%, #6EE7B7 100%);
   border-radius: 24rpx;
   box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.25);
   position: relative;
@@ -881,7 +881,7 @@ export default {
 }
 .brand-strap-text {
   font-size: 30rpx;
-  color: #FFFFFF;
+  color: $app-surface;
   font-weight: 600;
   text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
   position: relative;
@@ -892,7 +892,7 @@ export default {
 .monthly-guidance {
   margin: 20rpx 30rpx 0;
   padding: 24rpx 28rpx;
-  background: linear-gradient(135deg, #FFFFFF 0%, #F0FFF4 100%);
+  background: linear-gradient(135deg, $app-surface 0%, #F0FFF4 100%);
   border-radius: 20rpx;
   border: 1rpx solid rgba(16, 185, 129, 0.15);
   box-shadow: 0 4rpx 16rpx rgba(16, 185, 129, 0.08);
@@ -920,7 +920,7 @@ export default {
   right: 24rpx;
   height: 3rpx;
   border-radius: 3rpx 3rpx 0 0;
-  background: linear-gradient(90deg, #10B981, #34D399);
+  background: linear-gradient(90deg, $dim-action, #34D399);
   opacity: 0.7;
 }
 .section-header {
@@ -935,7 +935,7 @@ export default {
   flex-direction: row;
   align-items: center;
   gap: 8rpx;
-  border-left: 8rpx solid #10B981;
+  border-left: 8rpx solid $dim-action;
   padding-left: 16rpx;
 }
 .help-icon {
@@ -949,12 +949,12 @@ export default {
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  transition: all 0.2s;
-  background: #FFFFFF;
+  transition: opacity 0.2s $ease-standard, transform 0.2s $ease-standard;
+  background: $app-surface;
 }
 .help-icon:active {
-  border-color: #10B981;
-  color: #10B981;
+  border-color: $dim-action;
+  color: $dim-action;
   background: #F0FFF4;
   transform: scale(1.1);
 }
@@ -978,7 +978,7 @@ export default {
   font-size: 24rpx;
   font-weight: 500;
   white-space: nowrap;
-  transition: all 0.2s;
+  transition: opacity 0.2s $ease-standard, transform 0.2s $ease-standard;
   box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
 }
 .section-link:active {
@@ -996,31 +996,31 @@ export default {
   box-shadow: 0 4rpx 16rpx rgba(14,165,233,0.3);
 }
 .section-link-ability {
-  background: linear-gradient(135deg, #10B981, #34D399);
+  background: linear-gradient(135deg, $dim-action, #34D399);
   color: #fff;
   box-shadow: 0 4rpx 16rpx rgba(16,185,129,0.3);
 }
 
 /* 关系解读卡片 — 状态色 */
 .score-explain-card {
-  background: linear-gradient(135deg, #FFFFFF 0%, #F0FFF4 100%);
+  background: linear-gradient(135deg, $app-surface 0%, #F0FFF4 100%);
   border-radius: 20rpx;
   padding: 28rpx 32rpx;
   border: 1rpx solid rgba(16, 185, 129, 0.12);
   box-shadow: 0 4rpx 16rpx rgba(16, 185, 129, 0.08);
 }
 .score-explain-good {
-  background: linear-gradient(135deg, #FFFFFF 0%, #D1FAE5 100%);
+  background: linear-gradient(135deg, $app-surface 0%, #D1FAE5 100%);
   border-color: rgba(16, 185, 129, 0.25);
   box-shadow: 0 4rpx 20rpx rgba(16, 185, 129, 0.15);
 }
 .score-explain-warn {
-  background: linear-gradient(135deg, #FFFFFF 0%, #FEF3C7 100%);
+  background: linear-gradient(135deg, $app-surface 0%, #FEF3C7 100%);
   border-color: rgba(245, 158, 11, 0.25);
   box-shadow: 0 4rpx 20rpx rgba(245, 158, 11, 0.12);
 }
 .score-explain-bad {
-  background: linear-gradient(135deg, #FFFFFF 0%, #FEE2E2 100%);
+  background: linear-gradient(135deg, $app-surface 0%, #FEE2E2 100%);
   border-color: rgba(239, 68, 68, 0.25);
   box-shadow: 0 4rpx 20rpx rgba(239, 68, 68, 0.12);
 }
@@ -1042,12 +1042,12 @@ export default {
   transition: transform 0.2s;
 }
 .explain-icon-wrap:active { transform: scale(0.95); }
-.explain-icon-good { background: linear-gradient(135deg, #10B981, #34D399); box-shadow: 0 4rpx 12rpx rgba(16,185,129,0.3); }
+.explain-icon-good { background: linear-gradient(135deg, $dim-action, #34D399); box-shadow: 0 4rpx 12rpx rgba(16,185,129,0.3); }
 .explain-icon-warn { background: linear-gradient(135deg, #F59E0B, #FBBF24); box-shadow: 0 4rpx 12rpx rgba(245,158,11,0.3); }
 .explain-icon-bad { background: linear-gradient(135deg, #EF4444, #F87171); box-shadow: 0 4rpx 12rpx rgba(239,68,68,0.3); }
 .explain-icon {
   font-size: 28rpx;
-  color: #FFFFFF;
+  color: $app-surface;
   font-weight: 700;
 }
 .explain-info {
@@ -1066,7 +1066,7 @@ export default {
   line-height: 1;
   letter-spacing: -2rpx;
 }
-.score-explain-good .explain-score { color: #10B981; }
+.score-explain-good .explain-score { color: $dim-action; }
 .score-explain-warn .explain-score { color: #D97706; }
 .score-explain-bad .explain-score { color: #DC2626; }
 .explain-score-unit {
@@ -1096,7 +1096,7 @@ export default {
   z-index: 999;
 }
 .help-dialog {
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 24rpx;
   width: 85%;
   max-width: 520rpx;
@@ -1110,7 +1110,7 @@ export default {
   align-items: center;
   padding: 28rpx 32rpx 20rpx;
   border-bottom: 1rpx solid #F1F5F9;
-  background: linear-gradient(135deg, #F0FFF4, #FFFFFF);
+  background: linear-gradient(135deg, #F0FFF4, $app-surface);
 }
 .help-dialog-title {
   font-size: 32rpx;
@@ -1147,7 +1147,7 @@ export default {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
-  background: linear-gradient(135deg, #FFFFFF 0%, #F0FFF4 100%);
+  background: linear-gradient(135deg, $app-surface 0%, #F0FFF4 100%);
   border-radius: 24rpx;
   padding: 32rpx 16rpx;
   box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.1);
@@ -1170,7 +1170,7 @@ export default {
   justify-content: center;
   margin-bottom: 12rpx;
   box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.15);
-  transition: all 0.2s;
+  transition: opacity 0.2s $ease-standard, transform 0.2s $ease-standard;
 }
 .func-item:active .func-icon-wrap {
   transform: scale(0.95);
@@ -1200,7 +1200,7 @@ export default {
 }
 .portrait-tier {
   font-size: 26rpx;
-  color: #10B981;
+  color: $dim-action;
   font-weight: bold;
   margin-left: 16rpx;
 }
@@ -1243,7 +1243,7 @@ export default {
 .portrait-dim-score {
   font-size: 26rpx;
   font-weight: bold;
-  color: #10B981;
+  color: $dim-action;
   margin-right: 12rpx;
 }
 .portrait-dim-bar-track {
@@ -1268,7 +1268,7 @@ export default {
   padding: 16rpx 20rpx;
   background: linear-gradient(135deg, #F0FFF4, #E6FFF2);
   border-radius: 12rpx;
-  border-left: 8rpx solid #10B981;
+  border-left: 8rpx solid $dim-action;
   margin-top: 16rpx;
 }
 .portrait-tip-text {

+ 25 - 25
cfc-frontend/pages/body-detail/index.vue

@@ -624,17 +624,17 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .body-container {
   min-height: 100vh;
-  background-color: #F5F7FA;
+  background-color: $app-bg;
   display: flex;
   flex-direction: column;
 }
 
 /* ─── 健康概览卡片 ─── */
 .health-overview-card {
-  background-color: #FFFFFF;
+  background-color: $app-surface;
   border-radius: 24rpx;
   margin: 20rpx 20rpx 12rpx;
   box-shadow: 0 4rpx 16rpx rgba(255, 140, 66, 0.12);
@@ -649,7 +649,7 @@ export default {
 .overview-title {
   font-size: 32rpx;
   font-weight: 700;
-  color: #FF8C42;
+  color: $dim-body;
   margin-bottom: 4rpx;
   display: block;
 }
@@ -683,7 +683,7 @@ export default {
   width: 52rpx;
   height: 52rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, #FF8C42, #FFB366);
+  background: linear-gradient(135deg, $dim-body, #FFB366);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -709,7 +709,7 @@ export default {
 .overview-value {
   font-size: 40rpx;
   font-weight: 700;
-  color: #FF8C42;
+  color: $dim-body;
 }
 
 .overview-placeholder {
@@ -753,14 +753,14 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #FF8C42, #FF6B1A);
+  background: linear-gradient(135deg, $dim-body, #FF6B1A);
   border-radius: 48rpx;
   padding: 20rpx 0;
   box-shadow: 0 4rpx 16rpx rgba(255, 107, 26, 0.35);
 }
 
 .overview-nav-btn-text {
-  color: #FFFFFF;
+  color: $app-surface;
   font-size: 26rpx;
   font-weight: 600;
 }
@@ -770,14 +770,14 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #FFFFFF;
+  background-color: $app-surface;
   border-radius: 48rpx;
   padding: 20rpx 0;
-  border: 2rpx solid #FF8C42;
+  border: 2rpx solid $dim-body;
 }
 
 .overview-nav-btn-secondary-text {
-  color: #FF8C42;
+  color: $dim-body;
   font-size: 26rpx;
   font-weight: 600;
 }
@@ -787,7 +787,7 @@ export default {
 .indicator-section,
 .gut-section,
 .risk-section {
-  background-color: #FFFFFF;
+  background-color: $app-surface;
   border-radius: 24rpx;
   margin: 0 20rpx 16rpx;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
@@ -799,7 +799,7 @@ export default {
   align-items: center;
   padding: 24rpx 24rpx 16rpx;
   border-bottom: 1rpx solid #F5F5F5;
-  border-left: 8rpx solid #FF8C42;
+  border-left: 8rpx solid $dim-body;
 }
 
 .section-title {
@@ -810,7 +810,7 @@ export default {
 
 .section-more {
   font-size: 24rpx;
-  color: #FF8C42;
+  color: $dim-body;
   font-weight: 500;
   margin-left: auto;
   padding-left: 16rpx;
@@ -873,7 +873,7 @@ export default {
 .indicator-value {
   font-size: 40rpx;
   font-weight: 700;
-  color: #FF8C42;
+  color: $dim-body;
 }
 
 .indicator-placeholder {
@@ -889,7 +889,7 @@ export default {
 
 /* ─── 肠道菌群 ─── */
 .gut-section {
-  background-color: #FFFFFF;
+  background-color: $app-surface;
   border-radius: 24rpx;
   margin: 0 20rpx 16rpx;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
@@ -905,7 +905,7 @@ export default {
 
 .gut-summary-text {
   font-size: 26rpx;
-  color: #FF8C42;
+  color: $dim-body;
   font-weight: 500;
 }
 
@@ -976,14 +976,14 @@ export default {
 }
 
 .gut-upload-link {
-  color: #FF8C42;
+  color: $dim-body;
   margin-left: 8rpx;
   font-weight: 500;
 }
 
 /* ─── 疾病风险 ─── */
 .risk-section {
-  background-color: #FFFFFF;
+  background-color: $app-surface;
   border-radius: 24rpx;
   margin: 0 20rpx 16rpx;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
@@ -1028,7 +1028,7 @@ export default {
 }
 
 .risk-severe .risk-level { color: #FF6B6B; }
-.risk-attention .risk-level { color: #FF8C42; }
+.risk-attention .risk-level { color: $dim-body; }
 .risk-normal .risk-level { color: #999; }
 
 /* ─── 月引导语 ─── */
@@ -1042,7 +1042,7 @@ export default {
 }
 .portrait-tier {
   font-size: 26rpx;
-  color: #FF8C42;
+  color: $dim-body;
   font-weight: bold;
   margin-left: 16rpx;
 }
@@ -1084,7 +1084,7 @@ export default {
 .portrait-dim-score {
   font-size: 28rpx;
   font-weight: bold;
-  color: #FF8C42;
+  color: $dim-body;
   margin-right: 16rpx;
 }
 .portrait-dim-bar-track {
@@ -1108,7 +1108,7 @@ export default {
   padding: 16rpx 20rpx;
   background: linear-gradient(135deg, #FFF7ED, #FFF0E4);
   border-radius: 12rpx;
-  border-left: 8rpx solid #FF8C42;
+  border-left: 8rpx solid $dim-body;
 }
 .portrait-tip-text {
   font-size: 24rpx;
@@ -1132,7 +1132,7 @@ export default {
 
 .guidance-text {
   font-size: 24rpx;
-  color: #FF8C42;
+  color: $dim-body;
 }
 
 /* ─── 品牌定位语(登录前) ─── */
@@ -1144,7 +1144,7 @@ export default {
 }
 .brand-strap-text {
   font-size: 26rpx;
-  color: #FF8C42;
+  color: $dim-body;
   font-weight: 600;
 }
 

+ 12 - 12
cfc-frontend/pages/mind-detail/index.vue

@@ -1187,10 +1187,10 @@ var descList = descMap[this.dominantElement] || descMap.wood
   }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .container {
   min-height: 100vh;
-  background: #f5f7fa;
+  background: $app-bg;
   padding-bottom: 120rpx;
 }
 
@@ -1771,7 +1771,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 .energy-label {
   font-size: 28rpx;
   font-weight: 700;
-  background: linear-gradient(135deg, #F59E0B, #FF6B9D);
+  background: linear-gradient(135deg, #F59E0B, $dim-mind);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -1804,7 +1804,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
   top: 4rpx;
   bottom: 4rpx;
   width: 4rpx;
-  background: linear-gradient(180deg, #F59E0B, #FF6B9D);
+  background: linear-gradient(180deg, #F59E0B, $dim-mind);
   border-radius: 2rpx;
 }
 
@@ -2051,7 +2051,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 .indicator-name { font-size: 26rpx; color: #666; font-weight: 500; }
 .indicator-unit { font-size: 22rpx; color: #999; }
 .indicator-body { margin-bottom: 8rpx; }
-.indicator-value { font-size: 40rpx; font-weight: bold; color: #FF6B9D; }
+.indicator-value { font-size: 40rpx; font-weight: bold; color: $dim-mind; }
 .indicator-placeholder { font-size: 26rpx; color: #ccc; }
 .indicator-range { font-size: 20rpx; color: #bbb; }
 .bottom-spacer { height: 120rpx; }
@@ -2088,7 +2088,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .gut-indicator-impact {
   font-size: 18rpx;
-  color: #FF6B9D;
+  color: $dim-mind;
   display: block;
   margin-top: 2rpx;
 }
@@ -2214,7 +2214,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 .ki-num {
   font-size: 30rpx;
   font-weight: 700;
-  color: #FF6B9D;
+  color: $dim-mind;
 }
 .ki-fortune {
   font-size: 24rpx;
@@ -2342,7 +2342,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
   padding: 20rpx 28rpx;
   background: linear-gradient(135deg, #FFF0F5, rgba(255,107,157,0.12));
   border-radius: 16rpx;
-  border-left: 8rpx solid #FF6B9D;
+  border-left: 8rpx solid $dim-mind;
 }
 .brand-strap-text {
   font-size: 26rpx;
@@ -2356,7 +2356,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
   padding: 20rpx 28rpx;
   background: linear-gradient(135deg, #FFF0F5, rgba(255,107,157,0.08));
   border-radius: 16rpx;
-  border-left: 8rpx solid #FF6B9D;
+  border-left: 8rpx solid $dim-mind;
   display: flex;
   align-items: center;
   gap: 12rpx;
@@ -2389,7 +2389,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .portrait-tier {
   font-size: 26rpx;
-  color: #FF6B9D;
+  color: $dim-mind;
   font-weight: bold;
   margin-left: 16rpx;
 }
@@ -2431,7 +2431,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 .portrait-dim-score {
   font-size: 26rpx;
   font-weight: bold;
-  color: #FF6B9D;
+  color: $dim-mind;
   margin-right: 12rpx;
 }
 .portrait-dim-bar-track {
@@ -2456,7 +2456,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
   padding: 16rpx 20rpx;
   background: linear-gradient(135deg, #FFF0F5, #FDF2F7);
   border-radius: 12rpx;
-  border-left: 8rpx solid #FF6B9D;
+  border-left: 8rpx solid $dim-mind;
   margin-top: 16rpx;
 }
 .portrait-tip-text {

+ 22 - 17
cfc-frontend/pages/wealth/index.vue

@@ -729,7 +729,11 @@ export default {
       uni.navigateTo({ url: '/pages/discover-detail/product-detail/product-detail?id=' + id })
     },
     getImageUrl: function(path) {
-      return config.API_BASE_URL + path
+      if (!path || path === 'null' || path === 'undefined' || path === '/null') return ''
+      var s = String(path).trim()
+      if (!s || s === 'null' || s === '/null') return ''
+      if (s.indexOf('http://') === 0 || s.indexOf('https://') === 0) return s
+      return config.API_BASE_URL + (s.charAt(0) === '/' ? s : '/' + s)
     },
     onServiceClick(action) {
       if (this[action]) {
@@ -796,10 +800,10 @@ export default {
   color: rgba(255,255,255,0.8);
   line-height: 1.6;
 }
-<style scoped>
+<style scoped lang="scss">
 .container {
   min-height: 100vh;
-  background: #f5f7fa;
+  background: $app-bg;
   padding-bottom: 120rpx;
 }
 
@@ -864,7 +868,7 @@ export default {
 }
 .stage-range {
   font-size: 20rpx;
-  color: #F59E0B;
+  color: $dim-wealth;
   margin-top: 4rpx;
 }
 .stream-water {
@@ -876,14 +880,14 @@ export default {
 .stream-water-fill {
   height: 100%;
   border-radius: 10rpx;
-  background: linear-gradient(90deg, #F59E0B, #FBBF24);
+  background: linear-gradient(90deg, $dim-wealth, #FBBF24);
   transition: width 0.8s ease;
 }
 .stream-percent {
   display: block;
   text-align: right;
   font-size: 22rpx;
-  color: #F59E0B;
+  color: $dim-wealth;
   margin-top: 8rpx;
 }
 .stream-tip {
@@ -910,7 +914,7 @@ export default {
 .disc-value {
   font-size: 56rpx;
   font-weight: bold;
-  color: #F59E0B;
+  color: $dim-wealth;
   margin-top: 8rpx;
 }
 .disc-sub {
@@ -949,7 +953,7 @@ export default {
 }
 .disc-sub-action {
   font-size: 22rpx;
-  color: #F59E0B;
+  color: $dim-wealth;
   margin-top: 8rpx;
 }
 
@@ -973,7 +977,7 @@ export default {
 .child-wealth-value {
   font-size: 36rpx;
   font-weight: bold;
-  color: #F59E0B;
+  color: $dim-wealth;
   margin-top: 8rpx;
 }
 .child-wealth-label {
@@ -1002,7 +1006,7 @@ export default {
 .trend-bar {
   flex: 1;
   margin: 0 6rpx;
-  background: linear-gradient(180deg, #FBBF24, #F59E0B);
+  background: linear-gradient(180deg, #FBBF24, $dim-wealth);
   border-radius: 6rpx 6rpx 0 0;
 }
 .child-trend-days {
@@ -1065,7 +1069,7 @@ export default {
   padding: 20rpx 28rpx;
   background: linear-gradient(135deg, #FFFBEB, rgba(245,158,11,0.12));
   border-radius: 16rpx;
-  border-left: 8rpx solid #F59E0B;
+  border-left: 8rpx solid $dim-wealth;
 }
 .brand-strap-text {
   font-size: 26rpx;
@@ -1109,7 +1113,7 @@ export default {
   padding: 4rpx 12rpx 12rpx;
   font-size: 26rpx;
   font-weight: bold;
-  color: #F59E0B;
+  color: $dim-wealth;
 }
 
 /* 保单管理 */
@@ -1214,7 +1218,7 @@ export default {
 }
 .insight-tip-text {
   font-size: 22rpx;
-  color: #F59E0B;
+  color: $dim-wealth;
 }
 
 /* 维度画像样式 */
@@ -1228,7 +1232,7 @@ export default {
 }
 .portrait-tier {
   font-size: 26rpx;
-  color: #F59E0B;
+  color: $dim-wealth;
   font-weight: bold;
   margin-left: 16rpx;
 }
@@ -1271,7 +1275,7 @@ export default {
 .portrait-dim-score {
   font-size: 26rpx;
   font-weight: bold;
-  color: #F59E0B;
+  color: $dim-wealth;
   margin-right: 12rpx;
 }
 .portrait-dim-bar-track {
@@ -1296,7 +1300,7 @@ export default {
   padding: 16rpx 20rpx;
   background: linear-gradient(135deg, #FFF7ED, #FFF3E8);
   border-radius: 12rpx;
-  border-left: 8rpx solid #F59E0B;
+  border-left: 8rpx solid $dim-wealth;
   margin-top: 16rpx;
 }
 .portrait-tip-text {
@@ -1316,4 +1320,5 @@ export default {
   gap: 12rpx;
 }
 .guidance-icon { font-size: 32rpx; flex-shrink: 0; }
-.guidance-text { font-size: 26rpx; color: #F59E0B; font-weight: 500; }
+.guidance-text { font-size: 26rpx; color: $dim-wealth; font-weight: 500; }
+</style>

+ 17 - 17
cfc-frontend/pages/wisdom-detail/index.vue

@@ -739,10 +739,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .wisdom-container {
   min-height: 100vh;
-  background: #f5f7fa;
+  background: $app-bg;
   padding-bottom: 120rpx;
 }
 
@@ -822,7 +822,7 @@ export default {
 .section-more {
   flex-shrink: 0;
   font-size: 24rpx;
-  color: #6366F1;
+  color: $dim-wisdom;
 }
 
 /* 得分解读卡片 */
@@ -830,7 +830,7 @@ export default {
   background: #fff;
   border-radius: 24rpx;
   padding: 28rpx 24rpx;
-  border-left: 8rpx solid #6366F1;
+  border-left: 8rpx solid $dim-wisdom;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
 }
 .explain-header {
@@ -856,7 +856,7 @@ export default {
 
 /* 主按钮 */
 .primary-btn {
-  background: linear-gradient(135deg, #6366F1, #4F46E5);
+  background: linear-gradient(135deg, $dim-wisdom, #4F46E5);
   color: #fff;
   font-size: 26rpx;
   font-weight: bold;
@@ -880,7 +880,7 @@ export default {
 .indicator-name { font-size: 26rpx; color: #666; font-weight: 500; }
 .indicator-unit { font-size: 22rpx; color: #999; }
 .indicator-body { margin-bottom: 8rpx; }
-.indicator-value { font-size: 40rpx; font-weight: bold; color: #6366F1; }
+.indicator-value { font-size: 40rpx; font-weight: bold; color: $dim-wisdom; }
 .indicator-placeholder { font-size: 26rpx; color: #ccc; }
 .indicator-range { font-size: 20rpx; color: #bbb; }
 .bottom-spacer { height: 120rpx; }
@@ -928,7 +928,7 @@ export default {
 }
 .dan-view-link {
   font-size: 26rpx;
-  color: #6366F1;
+  color: $dim-wisdom;
 }
 .dan-empty {
   background: #fff;
@@ -954,7 +954,7 @@ export default {
   padding: 24rpx 28rpx;
   background: linear-gradient(135deg, #F0F0FF, rgba(99,102,241,0.16));
   border-radius: 16rpx;
-  border-left: 8rpx solid #6366F1;
+  border-left: 8rpx solid $dim-wisdom;
   box-shadow: 0 2rpx 12rpx rgba(99,102,241,0.12);
 }
 .brand-strap-text {
@@ -970,7 +970,7 @@ export default {
   padding: 20rpx 28rpx;
   background: linear-gradient(135deg, #F0F0FF, rgba(99,102,241,0.08));
   border-radius: 16rpx;
-  border-left: 8rpx solid #6366F1;
+  border-left: 8rpx solid $dim-wisdom;
   display: flex;
   align-items: center;
   gap: 12rpx;
@@ -985,7 +985,7 @@ export default {
 /* ===== 肠胃与认知卡片 ===== */
 .gut-cog-subtitle {
   font-size: 24rpx;
-  color: #6366F1;
+  color: $dim-wisdom;
   margin-bottom: 16rpx;
   display: block;
 }
@@ -1011,7 +1011,7 @@ export default {
 }
 .gut-indicator-impact {
   font-size: 18rpx;
-  color: #6366F1;
+  color: $dim-wisdom;
   display: block;
   margin-top: 2rpx;
 }
@@ -1068,7 +1068,7 @@ export default {
   margin-bottom: 24rpx;
 }
 .gut-upload-btn {
-  background: linear-gradient(135deg, #6366F1, #818CF8);
+  background: linear-gradient(135deg, $dim-wisdom, #818CF8);
   color: #fff;
   font-size: 26rpx;
   font-weight: 600;
@@ -1129,7 +1129,7 @@ export default {
 }
 .insight-tip-text {
   font-size: 22rpx;
-  color: #6366F1;
+  color: $dim-wisdom;
 }
 .insight-empty {
   display: flex;
@@ -1143,7 +1143,7 @@ export default {
   margin-bottom: 20rpx;
 }
 .insight-btn {
-  background: linear-gradient(135deg, #6366F1, #818CF8);
+  background: linear-gradient(135deg, $dim-wisdom, #818CF8);
   color: #fff;
   font-size: 26rpx;
   font-weight: 600;
@@ -1165,7 +1165,7 @@ export default {
 }
 .portrait-tier {
   font-size: 26rpx;
-  color: #6366F1;
+  color: $dim-wisdom;
   font-weight: bold;
   margin-left: 16rpx;
 }
@@ -1207,7 +1207,7 @@ export default {
 .portrait-dim-score {
   font-size: 26rpx;
   font-weight: bold;
-  color: #6366F1;
+  color: $dim-wisdom;
   margin-right: 12rpx;
 }
 .portrait-dim-bar-track {
@@ -1232,7 +1232,7 @@ export default {
   padding: 16rpx 20rpx;
   background: linear-gradient(135deg, #F0F4FF, #E8F1FE);
   border-radius: 12rpx;
-  border-left: 8rpx solid #6366F1;
+  border-left: 8rpx solid $dim-wisdom;
   margin-top: 16rpx;
 }
 .portrait-tip-text {

+ 64 - 1
cfc-frontend/uni.scss

@@ -338,4 +338,67 @@ $uni-transition-slow: 0.3s ease;
 .skeleton-block {
   @include skeleton;
   height: 160rpx;
-}
+}
+
+
+// ============================================================
+// 12. 五维 + 品牌运行时令牌(对齐真实线上视觉)
+// ============================================================
+// 背景:原 $uni-primary(#5B9BD5 蓝) 与线上实际主色不一致,且五维色长期硬编码在页面里。
+// 本段补齐「真实在用」的语义令牌;页面改用这些名字,避免逐个硬编码。
+// 注意:mp-weixin 对 CSS var(--x) 运行时解析不稳定,故统一用 SCSS 变量(编译期内联,零运行时风险)。
+
+/* 品牌主色 —— 与 pages.json tabBar.selectedColor 一致 */
+$brand-primary: #F97316;
+$brand-primary-dark: #EA580C;
+$brand-primary-soft: rgba(249, 115, 22, 0.12);
+
+/* 五维身份色:页面 PageBanner / 分段左条 / CTA / 价值卡浅底统一取用 */
+$dim-body:   #FF8C42;
+$dim-mind:   #FF6B9D;
+$dim-wisdom: #6366F1;
+$dim-action: #10B981;
+$dim-wealth: #F59E0B;
+
+$dim-body-soft:   rgba(255, 140, 66, 0.15);
+$dim-mind-soft:   rgba(255, 107, 157, 0.15);
+$dim-wisdom-soft: rgba(99, 102, 241, 0.15);
+$dim-action-soft: rgba(16, 185, 129, 0.15);
+$dim-wealth-soft: rgba(245, 158, 11, 0.15);
+
+/* 语义角色(与应用真实观感一致) */
+$app-bg:             #F5F7FA;
+$app-surface:        #FFFFFF;
+$app-surface-subtle: #F7F8FA;
+$app-text:           #17181C;
+$app-text-secondary: #606875;
+$app-text-muted:     #8A94A3;
+$app-border-subtle:  #E7EBF0;
+$app-border:         #CBD5E1;
+
+/* 状态:按压/禁用用透明度与语言表达,不新增多套颜色 */
+$press-opacity:    0.85;
+$disabled-opacity: 0.45;
+
+/* 动效令牌:只声明稳定属性,禁止 transition: all */
+$ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+$dur-press:      0.12s;
+$dur-state:      0.2s;
+$dur-structural: 0.26s;
+
+/* 可复用 mixin */
+@mixin dim-card($radius: $uni-radius-md) {
+  background: $app-surface;
+  border-radius: $radius;
+  box-shadow: $uni-shadow-sm;
+}
+
+@mixin press-scale {
+  transition: opacity $dur-press $ease-standard, transform $dur-press $ease-standard;
+  &:active { opacity: $press-opacity; }
+}
+
+@mixin touch-target($size: 88rpx) {
+  min-height: $size;
+  min-width: $size;
+}