Explorar el Código

refactor(facade): A-5/A-6 门面令牌化——认知大厅 + 服务中心 style 块硬编码色收敛(零观感变化)

pages/cognitive-hall.vue(debt 60 / 20 硬编码色):
- <style scoped> → <style scoped lang="scss">,9 个局部调色板变量
  (文字阶 6 含 CCC/BBB/AAA 三档 ghost / 发丝线 / 深夜蓝黑 / violet)
- 20 hex + 1 rgba → 令牌:$dim-wisdom/$app-surface/$app-bg/$dim-action + 局部

pages/service-center/index.vue(debt 60 / 20 硬编码色):
- <style scoped> → <style scoped lang="scss">,6 个局部调色板变量
  ($c-text-muted/$c-text-slate-2/$c-fill-warm-gray/$c-violet/$c-info-blue/$c-cyan)
- 20 hex + 4 rgba → 令牌:$app-surface/$uni-text-color/$dim-wealth/$dim-action + 局部

两页 script/template 区均零 hex。与前 4 页同族:$c-violet/$c-text-slate-2/
$c-fill-warm-gray 同名同值。

验证:dart-sass 编译 PASS;两页等价回归均 PASS;style hex 残留 = 调色板声明数;
无死变量;transition:all 0。
liaoxg hace 1 semana
padre
commit
77578ab81e
Se han modificado 2 ficheros con 63 adiciones y 42 borrados
  1. 33 21
      cfc-frontend/pages/cognitive-hall.vue
  2. 30 21
      cfc-frontend/pages/service-center/index.vue

+ 33 - 21
cfc-frontend/pages/cognitive-hall.vue

@@ -156,18 +156,30 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+// ===== 页面级局部调色板(单页专有色阶;同值才映射全局令牌,约定见 uni.scss §14) =====
+// violet-500(与 index-home 同名同值)
+$c-text-body:    #666;
+$c-text-muted:   #999;
+$c-text-faint:   #888;
+$c-text-ghost:   #CCC;
+$c-text-ghost-2: #BBB;
+$c-text-ghost-3: #AAA;
+$c-border-hair:  #EEE;      // 发丝分隔线
+$c-ink-night:    #1A1A2E;   // 深夜蓝黑(本页深色文字)
+$c-violet:       #8B5CF6;   // violet-500
+
 .page {
   min-height: 100vh;
-  background: #f5f7fa;
+  background: $app-bg;
   padding-bottom: 40rpx;
   box-sizing: border-box;
 }
 
 .header {
   padding: 40rpx 30rpx 30rpx;
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-  color: #fff;
+  background: linear-gradient(135deg, $dim-wisdom 0%, $c-violet 100%);
+  color: $app-surface;
 }
 
 .title {
@@ -185,7 +197,7 @@ export default {
 
 .member-selector {
   padding: 24rpx 30rpx;
-  background: #fff;
+  background: $app-surface;
   margin: 20rpx 0;
   border-radius: 16rpx;
   margin-left: 30rpx;
@@ -194,7 +206,7 @@ export default {
 
 .selector-label {
   font-size: 26rpx;
-  color: #666;
+  color: $c-text-body;
 }
 
 .member-tabs {
@@ -208,14 +220,14 @@ export default {
   padding: 10rpx 28rpx;
   border-radius: 30rpx;
   margin: 8rpx 8rpx 0 0;
-  background: #eee;
+  background: $c-border-hair;
   font-size: 26rpx;
-  color: #666;
+  color: $c-text-body;
 }
 
 .member-tab-active {
-  background: #6366f1;
-  color: #fff;
+  background: $dim-wisdom;
+  color: $app-surface;
 }
 
 .game-list {
@@ -226,7 +238,7 @@ export default {
   display: flex;
   flex-direction: row;
   align-items: center;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 28rpx;
   margin-bottom: 20rpx;
@@ -255,41 +267,41 @@ export default {
 .game-name {
   font-size: 30rpx;
   font-weight: bold;
-  color: #1a1a2e;
+  color: $c-ink-night;
   display: block;
 }
 
 .game-desc {
   font-size: 24rpx;
-  color: #888;
+  color: $c-text-faint;
   margin-top: 6rpx;
   display: block;
 }
 
 .game-status {
   font-size: 22rpx;
-  color: #10B981;
+  color: $dim-action;
   margin-top: 8rpx;
   display: block;
 }
 
 .game-status-pending {
   font-size: 22rpx;
-  color: #aaa;
+  color: $c-text-ghost-3;
   margin-top: 8rpx;
   display: block;
 }
 
 .game-arrow {
   font-size: 40rpx;
-  color: #ccc;
+  color: $c-text-ghost;
   margin-left: 16rpx;
 }
 
 .loading, .empty {
   text-align: center;
   padding: 80rpx 40rpx;
-  color: #999;
+  color: $c-text-muted;
   font-size: 28rpx;
 }
 
@@ -301,7 +313,7 @@ export default {
 
 .empty-hint {
   font-size: 24rpx;
-  color: #bbb;
+  color: $c-text-ghost-2;
   margin-top: 10rpx;
   display: block;
 }
@@ -321,12 +333,12 @@ export default {
 }
 
 .btn--outline {
-  border: 2rpx solid #6366f1;
-  color: #6366f1;
+  border: 2rpx solid $dim-wisdom;
+  color: $dim-wisdom;
   background: transparent;
 }
 
 .btn--outline:active {
-  background: rgba(99,102,241,0.08);
+  background: rgba($dim-wisdom, 0.08);
 }
 </style>

+ 30 - 21
cfc-frontend/pages/service-center/index.vue

@@ -132,9 +132,18 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+// ===== 页面级局部调色板(单页专有色阶;同值才映射全局令牌,约定见 uni.scss §14) =====
+// 与 index-home / profile-main 同族:$c-text-slate-2/$c-fill-warm-gray/$c-violet 同名同值
+$c-text-muted:     #999;
+$c-text-slate-2:   #64748B;   // slate-500
+$c-fill-warm-gray: #F8F4EF;
+$c-violet:         #8B5CF6;   // violet-500
+$c-info-blue:      #3B82F6;   // blue-500
+$c-cyan:           #06B6D4;   // cyan-500
+
 .container {
-  background: #F8F4EF;
+  background: $c-fill-warm-gray;
   min-height: 100vh;
   padding: 0 0 40rpx;
 }
@@ -144,7 +153,7 @@ export default {
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx 16rpx 0 0;
   padding: 24rpx 30rpx;
   margin-bottom: 24rpx;
@@ -154,12 +163,12 @@ export default {
 .header-title {
   font-size: 34rpx;
   font-weight: bold;
-  color: #1E293B;
+  color: $uni-text-color;
 }
 
 .header-close {
   font-size: 28rpx;
-  color: #999;
+  color: $c-text-muted;
 }
 
 /* 统计卡片横排(替代 grid,使用 flexbox) */
@@ -173,7 +182,7 @@ export default {
 
 .stat-card {
   flex: 1;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 24rpx;
   align-items: center;
@@ -181,26 +190,26 @@ export default {
   flex-direction: column;
 }
 
-.stat-card.blue { border-top: 4rpx solid #3B82F6; }
-.stat-card.green { border-top: 4rpx solid #10B981; }
-.stat-card.gold { border-top: 4rpx solid #F59E0B; }
-.stat-card.purple { border-top: 4rpx solid #8B5CF6; }
+.stat-card.blue { border-top: 4rpx solid $c-info-blue; }
+.stat-card.green { border-top: 4rpx solid $dim-action; }
+.stat-card.gold { border-top: 4rpx solid $dim-wealth; }
+.stat-card.purple { border-top: 4rpx solid $c-violet; }
 
 .stat-value {
   font-size: 36rpx;
   font-weight: bold;
-  color: #1E293B;
+  color: $uni-text-color;
   display: block;
   margin-bottom: 8rpx;
 }
 
 .stat-label {
   font-size: 24rpx;
-  color: #64748B;
+  color: $c-text-slate-2;
 }
 
 .section {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 24rpx;
   margin: 0 24rpx 24rpx;
@@ -209,7 +218,7 @@ export default {
 .section-title {
   font-size: 30rpx;
   font-weight: bold;
-  color: #1E293B;
+  color: $uni-text-color;
   margin-bottom: 20rpx;
 }
 
@@ -227,7 +236,7 @@ export default {
   flex-direction: column;
   align-items: center;
   padding: 20rpx 0;
-  background: #F8F4EF;
+  background: $c-fill-warm-gray;
   border-radius: 16rpx;
 }
 
@@ -242,19 +251,19 @@ export default {
   margin-bottom: 12rpx;
 }
 
-.menu-icon.blue { background: rgba(59, 130, 246, 0.15); color: #3B82F6; }
-.menu-icon.green { background: rgba(16, 185, 129, 0.15); color: #10B981; }
-.menu-icon.cyan { background: rgba(6, 182, 212, 0.15); color: #06B6D4; }
-.menu-icon.purple { background: rgba(139, 92, 246, 0.15); color: #8B5CF6; }
+.menu-icon.blue { background: rgba($c-info-blue, 0.15); color: $c-info-blue; }
+.menu-icon.green { background: rgba($dim-action, 0.15); color: $dim-action; }
+.menu-icon.cyan { background: rgba($c-cyan, 0.15); color: $c-cyan; }
+.menu-icon.purple { background: rgba($c-violet, 0.15); color: $c-violet; }
 
 .menu-label {
   font-size: 24rpx;
-  color: #64748B;
+  color: $c-text-slate-2;
 }
 
 .empty-tip {
   text-align: center;
-  color: #999;
+  color: $c-text-muted;
   padding: 60rpx 0;
   font-size: 26rpx;
 }