Kaynağa Gözat

refactor(mind-detail): B-1c family-dashboard 令牌化——42 处硬编码色收敛(零观感变化)

- 全全局映射、零局部调色板:42 处全部落到既有令牌
  ($dim-mind 系 6 / $uni-text-color 8 / $facade-* 系 21 /
  $status-* 2 / $app-surface 5)
- 顺势登记 §16 tailwind gray 阶 5 枚(全库 6~18 文件复用),
  本页 gray-50/100/200/400/700 直接引用
- 验证:等价回归 PASS(编译产物逐字节相同)、零残留 hex
liaoxg 1 hafta önce
ebeveyn
işleme
3c2c4f5f87
1 değiştirilmiş dosya ile 42 ekleme ve 42 silme
  1. 42 42
      cfc-frontend/pages/mind-detail/family-dashboard.vue

+ 42 - 42
cfc-frontend/pages/mind-detail/family-dashboard.vue

@@ -670,9 +670,9 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .family-dashboard {
-  background-color: #F9FAFB;
+  background-color: $facade-fill-gray-50;
   min-height: 100vh;
   padding-bottom: 40rpx;
 }
@@ -682,45 +682,45 @@ export default {
   position: sticky;
   top: 0;
   z-index: 100;
-  background-color: #FFFFFF;
+  background-color: $app-surface;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   padding: 30rpx 30rpx 16rpx;
-  border-bottom: 1rpx solid #F3F4F6;
+  border-bottom: 1rpx solid $facade-fill-gray-100;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 }
 .dashboard-icon {
   width: 64rpx;
   height: 64rpx;
   border-radius: 32rpx;
-  background-color: #FFF0F3;
+  background-color: $dim-mind-tint-2;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .dashboard-icon-text {
   font-size: 32rpx;
-  color: #FF6B9D;
+  color: $dim-mind;
 }
 .dashboard-title {
   font-size: 32rpx;
   font-weight: 700;
-  color: #1E293B;
+  color: $uni-text-color;
 }
 .dashboard-menu {
   position: relative;
 }
 .dashboard-menu-text {
   font-size: 36rpx;
-  color: #9CA3AF;
+  color: $facade-text-gray-400;
 }
 .dashboard-menu-dropdown {
   position: absolute;
   right: 0;
   top: 60rpx;
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 12rpx;
   box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
   padding: 12rpx 0;
@@ -730,10 +730,10 @@ export default {
 .menu-item {
   padding: 20rpx 24rpx;
   font-size: 28rpx;
-  color: #374151;
+  color: $facade-text-gray-700;
 }
 .menu-item:active {
-  background-color: #F9FAFB;
+  background-color: $facade-fill-gray-50;
 }
 
 /* ===== 数据卡片 ===== */
@@ -750,11 +750,11 @@ export default {
 .card-title {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1E293B;
+  color: $uni-text-color;
 }
 .card-subtitle {
   font-size: 22rpx;
-  color: #64748B;
+  color: $uni-text-color-secondary;
   margin-top: 4rpx;
 }
 .card-body {
@@ -767,7 +767,7 @@ export default {
 }
 .footer-tip {
   font-size: 24rpx;
-  color: #6B7280;
+  color: $facade-text-slate;
 }
 
 /* 运势数据项 */
@@ -802,13 +802,13 @@ export default {
 }
 .data-label {
   font-size: 22rpx;
-  color: #64748B;
+  color: $uni-text-color-secondary;
   margin-bottom: 4rpx;
 }
 .data-value {
   font-size: 26rpx;
   font-weight: 600;
-  color: #1E293B;
+  color: $uni-text-color;
 }
 
 /* 心情部分 */
@@ -822,19 +822,19 @@ export default {
 .mood-text {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1E293B;
+  color: $uni-text-color;
   vertical-align: bottom;
 }
 .mood-bar {
   margin-top: 16rpx;
   height: 12rpx;
-  background-color: #E5E7EB;
+  background-color: $facade-gray-200;
   border-radius: 6rpx;
   overflow: hidden;
 }
 .mood-bar-fill {
   height: 100%;
-  background: linear-gradient(90deg, #FF6B9D, #FF8FB1);
+  background: linear-gradient(90deg, $dim-mind, $dim-mind-light-2);
   border-radius: 6rpx;
   transition: width 0.5s;
 }
@@ -853,19 +853,19 @@ export default {
 /* ===== 数据趋势区块 ===== */
 .dashboard-section {
   margin: 20rpx 30rpx;
-  background-color: #FFFFFF;
+  background-color: $app-surface;
   border-radius: 24rpx;
   overflow: hidden;
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
 }
 .section-header {
   padding: 20rpx 30rpx;
-  border-bottom: 1rpx solid #F3F4F6;
+  border-bottom: 1rpx solid $facade-fill-gray-100;
 }
 .section-title {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1E293B;
+  color: $uni-text-color;
 }
 .section-body {
   padding: 20rpx 30rpx 30rpx;
@@ -891,7 +891,7 @@ export default {
 .calendar-month {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1E293B;
+  color: $uni-text-color;
 }
 .calendar-grid {
   display: grid;
@@ -912,11 +912,11 @@ export default {
   cursor: default;
 }
 .calendar-day.has-data {
-  background-color: #F9FAFB;
+  background-color: $facade-fill-gray-50;
 }
 .calendar-day.current-day {
-  background-color: #FFF0F3;
-  border: 1rpx solid #FF6B9D;
+  background-color: $dim-mind-tint-2;
+  border: 1rpx solid $dim-mind;
 }
 .day-number {
   font-size: 24rpx;
@@ -933,9 +933,9 @@ export default {
   height: 16rpx;
   border-radius: 50%;
 }
-.fortune-lv-0, .fortune-lv-1 { background-color: #EF4444; }
-.fortune-lv-2 { background-color: #FBBF24; }
-.fortune-lv-3, .fortune-lv-4 { background-color: #8B5CF6; }
+.fortune-lv-0, .fortune-lv-1 { background-color: $status-danger; }
+.fortune-lv-2 { background-color: $status-warning; }
+.fortune-lv-3, .fortune-lv-4 { background-color: $facade-violet; }
 
 /* ===== 历史周报 ===== */
 .report-list {
@@ -947,7 +947,7 @@ export default {
   display: flex;
   flex-direction: row;
   align-items: center;
-  background-color: #F9FAFB;
+  background-color: $facade-fill-gray-50;
   padding: 20rpx;
   border-radius: 16rpx;
 }
@@ -957,14 +957,14 @@ export default {
 .report-icon {
   width: 64rpx;
   height: 64rpx;
-  background-color: #FFF0F3;
+  background-color: $dim-mind-tint-2;
   border-radius: 16rpx;
   margin-right: 16rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 32rpx;
-  color: #FF6B9D;
+  color: $dim-mind;
 }
 .report-info {
   flex: 1;
@@ -974,11 +974,11 @@ export default {
 .report-title {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1E293B;
+  color: $uni-text-color;
 }
 .report-date {
   font-size: 22rpx;
-  color: #64748B;
+  color: $uni-text-color-secondary;
   margin-top: 4rpx;
 }
 .report-action {
@@ -986,7 +986,7 @@ export default {
 }
 .report-download {
   font-size: 24rpx;
-  color: #FF6B9D;
+  color: $dim-mind;
   font-weight: 500;
 }
 
@@ -1007,13 +1007,13 @@ export default {
   width: 90%;
   max-width: 600rpx;
   max-height: 80vh;
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 24rpx;
   overflow: hidden;
 }
 .modal-header {
   padding: 24rpx 30rpx;
-  border-bottom: 1rpx solid #F3F4F6;
+  border-bottom: 1rpx solid $facade-fill-gray-100;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -1022,11 +1022,11 @@ export default {
 .modal-title {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1E293B;
+  color: $uni-text-color;
 }
 .modal-close {
   font-size: 32rpx;
-  color: #9CA3AF;
+  color: $facade-text-gray-400;
 }
 .modal-close:active {
   opacity: 0.7;
@@ -1040,12 +1040,12 @@ export default {
 }
 .modal-footer {
   padding: 20rpx 30rpx;
-  border-top: 1rpx solid #F3F4F6;
+  border-top: 1rpx solid $facade-fill-gray-100;
   text-align: center;
 }
 .modal-btn {
-  background-color: #FF6B9D;
-  color: #FFFFFF;
+  background-color: $dim-mind;
+  color: $app-surface;
   border: none;
   border-radius: 8rpx;
   padding: 12rpx 24rpx;