Explorar el Código

refactor(profile-main): A-3 门面令牌化——我的 TabBar 页 style 块硬编码色全量收敛(零观感变化)

pages/profile-main/profile.vue(我的 TabBar,原债务 249 / 83 硬编码色):
- <style scoped> → <style scoped lang="scss">,新增 16 个页面级局部调色板变量
- 78 处 hex + 17 处 rgba → 令牌:全局同值令牌 11 种($brand-primary/
  $brand-primary-light/$dim-wisdom/wealth/action/$uni-text-color/
  $uni-border-color-light/$app-surface/$app-text-subtle/$status-warning-deep),
  页面局部 16 个(文字阶 7 / 填充阶 4 / 品牌淡底 / wisdom 中阶 /
  Ant 红 / pink 双阶 / indigo)
- 与 index-home / health-main 同族:$c-text-strong/$c-text-muted/$c-brand-tint 同名同值

验证:dart-sass 编译 PASS;等价回归 PASS;style hex 残留 16 = 调色板声明数;
无死变量;transition:all 0。
liaoxg hace 1 semana
padre
commit
adad2e8fdb
Se han modificado 1 ficheros con 102 adiciones y 83 borrados
  1. 102 83
      cfc-frontend/pages/profile-main/profile.vue

+ 102 - 83
cfc-frontend/pages/profile-main/profile.vue

@@ -828,10 +828,29 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+// ===== 页面级局部调色板(单页专有色阶;同值才映射全局令牌,约定见 uni.scss §14) =====
+// 与 index-home / health-main 同族:$c-text-strong/$c-text-muted/$c-brand-tint 同名同值
+$c-text-strong:     #333;
+$c-text-body:       #666;
+$c-text-muted:      #999;
+$c-text-faint:      #888;
+$c-text-ghost:      #CCC;
+$c-text-gray-400:   #9CA3AF;
+$c-text-slate-2:    #6B7280;
+$c-fill:            #F0F0F0;
+$c-fill-2b:         #F2F2F2;
+$c-fill-warm-gray:  #F8F4EF;
+$c-brand-tint:      #FFF7ED;   // 品牌淡底(与 index-home 同值,待提升全局)
+$c-wisdom-mid:      #4F46E5;   // indigo-600
+$c-danger-ant:      #FF4D4F;   // Ant Design 红
+$c-pink:            #EC4899;   // pink-500
+$c-pink-deep:       #DB2777;   // pink-600
+$c-indigo:          #667EEA;   // indigo-500(rgba 渐变用)
+
 .container {
   min-height: 100vh;
-  background: #F8F4EF;
+  background: $c-fill-warm-gray;
   padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
 }
 
@@ -843,38 +862,38 @@ export default {
   padding: 200rpx 60rpx;
 }
 .prompt-icon { font-size: 100rpx; margin-bottom: 30rpx; }
-.prompt-title { font-size: 40rpx; font-weight: bold; color: #333; margin-bottom: 16rpx; }
-.prompt-desc { font-size: 26rpx; color: #999; margin-bottom: 20rpx; }
+.prompt-title { font-size: 40rpx; font-weight: bold; color: $c-text-strong; margin-bottom: 16rpx; }
+.prompt-desc { font-size: 26rpx; color: $c-text-muted; margin-bottom: 20rpx; }
 .login-btn {
-  background: linear-gradient(135deg, #F97316, #FB923C);
-  color: #fff;
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
+  color: $app-surface;
   border-radius: 50rpx;
   font-size: 30rpx;
   padding: 24rpx 80rpx;
 }
 .skip-link {
   font-size: 26rpx;
-  color: #999;
+  color: $c-text-muted;
   margin-top: 24rpx;
   text-decoration: underline;
 }
 .philosophy-card {
   margin: 0 40rpx 48rpx;
-  background: linear-gradient(135deg, #FFF7ED, rgba(249, 115, 22, 0.06));
+  background: linear-gradient(135deg, $c-brand-tint, rgba($brand-primary, 0.06));
   border-radius: 20rpx;
   padding: 28rpx 32rpx;
-  border-left: 6rpx solid #F97316;
+  border-left: 6rpx solid $brand-primary;
 }
 .philosophy-title {
   font-size: 28rpx;
   font-weight: bold;
-  color: #333;
+  color: $c-text-strong;
   display: block;
   margin-bottom: 8rpx;
 }
 .philosophy-desc {
   font-size: 24rpx;
-  color: #888;
+  color: $c-text-faint;
   line-height: 1.6;
   display: block;
 }
@@ -882,8 +901,8 @@ export default {
 /* 退出切换 */
 .exit-switch {
   margin: 0 30rpx 16rpx;
-  background: linear-gradient(135deg, #F97316, #FB923C);
-  color: #fff;
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
+  color: $app-surface;
   padding: 16rpx;
   border-radius: 12rpx;
   text-align: center;
@@ -893,13 +912,13 @@ export default {
 /* 身份卡 */
 .user-card {
   margin: 24rpx 30rpx 20rpx;
-  background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
+  background: linear-gradient(135deg, $brand-primary 0%, $brand-primary-light 100%);
   border-radius: 24rpx;
   padding: 32rpx 32rpx;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  box-shadow: 0 8rpx 32rpx rgba(102,126,234,0.3);
+  box-shadow: 0 8rpx 32rpx rgba($c-indigo, 0.3);
 }
 .user-card-left {
   display: flex;
@@ -910,13 +929,13 @@ export default {
   width: 100rpx;
   height: 100rpx;
   border-radius: 50%;
-  background: rgba(255,255,255,0.2);
+  background: rgba($app-surface, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 20rpx;
   overflow: hidden;
-  border: 3rpx solid rgba(255,255,255,0.3);
+  border: 3rpx solid rgba($app-surface, 0.3);
 }
 .avatar-img {
   width: 100rpx;
@@ -925,7 +944,7 @@ export default {
 }
 .avatar-text {
   font-size: 44rpx;
-  color: #fff;
+  color: $app-surface;
 }
 .user-meta { flex: 1; }
 .user-name-row {
@@ -937,18 +956,18 @@ export default {
 .nickname {
   font-size: 34rpx;
   font-weight: bold;
-  color: #fff;
+  color: $app-surface;
 }
 .role-tag {
   font-size: 20rpx;
-  background: rgba(255,255,255,0.2);
-  color: #fff;
+  background: rgba($app-surface, 0.2);
+  color: $app-surface;
   padding: 4rpx 14rpx;
   border-radius: 20rpx;
 }
 .referrer-line {
   font-size: 24rpx;
-  color: rgba(255,255,255,0.7);
+  color: rgba($app-surface, 0.7);
   margin-bottom: 6rpx;
 }
 .user-sub {
@@ -961,7 +980,7 @@ export default {
   padding: 6rpx 20rpx;
   border-radius: 22rpx;
   font-weight: bold;
-  border: 2rpx solid rgba(255,255,255,0.35);
+  border: 2rpx solid rgba($app-surface, 0.35);
   display: flex;
   align-items: center;
   gap: 6rpx;
@@ -972,23 +991,23 @@ export default {
   content: '👑';
   font-size: 18rpx;
 }
-.level-FREE { background: linear-gradient(135deg, #9CA3AF, #6B7280); color: #fff; }
+.level-FREE { background: linear-gradient(135deg, $c-text-gray-400, $c-text-slate-2); color: $app-surface; }
 .level-FREE::before { content: ''; }
-.level-FAMILY { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; }
-.level-PREMIUM { background: linear-gradient(135deg, #6366F1, #4F46E5); color: #fff; }
+.level-FAMILY { background: linear-gradient(135deg, $dim-wealth, $status-warning-deep); color: $app-surface; }
+.level-PREMIUM { background: linear-gradient(135deg, $dim-wisdom, $c-wisdom-mid); color: $app-surface; }
 .level-LIFETIME {
-  background: linear-gradient(135deg, #EC4899, #DB2777);
-  color: #fff;
-  box-shadow: 0 4rpx 16rpx rgba(236,72,153,0.45);
-  border-color: rgba(255,255,255,0.55);
+  background: linear-gradient(135deg, $c-pink, $c-pink-deep);
+  color: $app-surface;
+  box-shadow: 0 4rpx 16rpx rgba($c-pink, 0.45);
+  border-color: rgba($app-surface, 0.55);
 }
 .days-left {
   font-size: 20rpx;
-  color: rgba(255,255,255,0.85);
+  color: rgba($app-surface, 0.85);
 }
 .upgrade-btn {
-  background: rgba(255,255,255,0.22);
-  border: 2rpx solid rgba(255,255,255,0.6);
+  background: rgba($app-surface, 0.22);
+  border: 2rpx solid rgba($app-surface, 0.6);
   border-radius: 20rpx;
   padding: 6rpx 20rpx;
   flex-shrink: 0;
@@ -1000,7 +1019,7 @@ export default {
 .upgrade-btn-text {
   font-size: 20rpx;
   font-weight: bold;
-  color: #fff;
+  color: $app-surface;
   line-height: 1;
 }
 .user-card-right {
@@ -1008,24 +1027,24 @@ export default {
   flex-direction: column;
   align-items: center;
   gap: 6rpx;
-  background: rgba(255,255,255,0.15);
+  background: rgba($app-surface, 0.15);
   padding: 12rpx 24rpx;
   border-radius: 14rpx;
 }
 .points-num {
   font-size: 36rpx;
   font-weight: bold;
-  color: #fff;
+  color: $app-surface;
 }
 .points-label {
   font-size: 20rpx;
-  color: rgba(255,255,255,0.7);
+  color: rgba($app-surface, 0.7);
 }
 
 /* 家庭成员速览 */
 .family-strip {
   margin: 0 30rpx 20rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 20rpx 24rpx 16rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
@@ -1039,11 +1058,11 @@ export default {
 .family-strip-title {
   font-size: 26rpx;
   font-weight: bold;
-  color: #333;
+  color: $c-text-strong;
 }
 .family-strip-count {
   font-size: 22rpx;
-  color: #999;
+  color: $c-text-muted;
 }
 .family-avatars {
   display: flex;
@@ -1064,7 +1083,7 @@ export default {
   width: 72rpx;
   height: 72rpx;
   border-radius: 50%;
-  background: #f0f0f0;
+  background: $c-fill;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1078,15 +1097,15 @@ export default {
 }
 .family-avatar-text {
   font-size: 28rpx;
-  color: #666;
+  color: $c-text-body;
 }
 .family-avatar-wrap.family-avatar-add {
-  background: #F8F4EF;
-  border: 2rpx dashed #ccc;
+  background: $c-fill-warm-gray;
+  border: 2rpx dashed $c-text-ghost;
 }
 .family-avatar-plus {
   font-size: 36rpx;
-  color: #999;
+  color: $c-text-muted;
 }
 .family-avatar-tag {
   position: absolute;
@@ -1095,22 +1114,22 @@ export default {
   font-size: 14rpx;
   padding: 2rpx 6rpx;
   border-radius: 8rpx;
-  color: #fff;
+  color: $app-surface;
 }
-.family-avatar-tag.tag-parent { background: #6366F1; }
-.family-avatar-tag.tag-child { background: #F97316; }
-.family-avatar-tag.tag-teacher { background: #10B981; }
-.family-avatar-tag.tag-member { background: #9CA3AF; }
+.family-avatar-tag.tag-parent { background: $dim-wisdom; }
+.family-avatar-tag.tag-child { background: $brand-primary; }
+.family-avatar-tag.tag-teacher { background: $dim-action; }
+.family-avatar-tag.tag-member { background: $c-text-gray-400; }
 .family-avatar-name {
   font-size: 20rpx;
-  color: #666;
+  color: $c-text-body;
   white-space: nowrap;
 }
 
 /* 个人成就 */
 .achievement-section {
   margin: 0 30rpx 20rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 24rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
@@ -1124,11 +1143,11 @@ export default {
 .section-title {
   font-size: 28rpx;
   font-weight: bold;
-  color: #333;
+  color: $c-text-strong;
 }
 .section-sub {
   font-size: 22rpx;
-  color: #999;
+  color: $c-text-muted;
 }
 .achievement-grid {
   display: flex;
@@ -1159,12 +1178,12 @@ export default {
 .ach-num {
   font-size: 28rpx;
   font-weight: bold;
-  color: #333;
+  color: $c-text-strong;
   line-height: 1;
 }
 .ach-label {
   font-size: 20rpx;
-  color: #999;
+  color: $c-text-muted;
   line-height: 1;
 }
 
@@ -1180,10 +1199,10 @@ export default {
 }
 .order-all-link {
   font-size: 24rpx;
-  color: #999;
+  color: $c-text-muted;
 }
 .order-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 24rpx 12rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
@@ -1220,15 +1239,15 @@ export default {
   height: 30rpx;
   line-height: 30rpx;
   border-radius: 15rpx;
-  background: #FF4D4F;
-  color: #fff;
+  background: $c-danger-ant;
+  color: $app-surface;
   font-size: 18rpx;
   text-align: center;
   padding: 0 6rpx;
 }
 .order-grid-text {
   font-size: 22rpx;
-  color: #666;
+  color: $c-text-body;
   line-height: 1;
 }
 .order-extra-row {
@@ -1236,7 +1255,7 @@ export default {
   align-items: center;
   margin-top: 20rpx;
   padding-top: 20rpx;
-  border-top: 1rpx solid #F2F2F2;
+  border-top: 1rpx solid $c-fill-2b;
 }
 .order-extra-item {
   flex: 1;
@@ -1250,15 +1269,15 @@ export default {
 }
 .order-extra-text {
   font-size: 24rpx;
-  color: #333;
+  color: $c-text-strong;
 }
 .order-extra-badge {
   min-width: 30rpx;
   height: 30rpx;
   line-height: 30rpx;
   border-radius: 15rpx;
-  background: #F97316;
-  color: #fff;
+  background: $brand-primary;
+  color: $app-surface;
   font-size: 18rpx;
   text-align: center;
   padding: 0 6rpx;
@@ -1266,7 +1285,7 @@ export default {
 .order-extra-divider {
   width: 1rpx;
   height: 30rpx;
-  background: #F2F2F2;
+  background: $c-fill-2b;
 }
 
 /* 规划师服务中心入口 */
@@ -1274,16 +1293,16 @@ export default {
   margin: 0 30rpx 20rpx;
 }
 .service-center-card {
-  background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
+  background: linear-gradient(135deg, $brand-primary 0%, $brand-primary-light 100%);
   border-radius: 20rpx;
   padding: 24rpx;
   display: flex;
   align-items: center;
   gap: 20rpx;
-  box-shadow: 0 4rpx 16rpx rgba(249,115,22,0.25);
+  box-shadow: 0 4rpx 16rpx rgba($brand-primary, 0.25);
 }
 .service-center-card.disabled-card {
-  background: linear-gradient(135deg, #e2e8f0, #94a3b8);
+  background: linear-gradient(135deg, $uni-border-color-light, $app-text-subtle);
   box-shadow: none;
   opacity: 0.8;
 }
@@ -1296,24 +1315,24 @@ export default {
 .service-center-title {
   font-size: 30rpx;
   font-weight: bold;
-  color: #fff;
+  color: $app-surface;
   display: block;
 }
 .service-center-desc {
   font-size: 22rpx;
-  color: rgba(255,255,255,0.8);
+  color: rgba($app-surface, 0.8);
   margin-top: 6rpx;
   display: block;
 }
 .service-center-card.disabled-card .service-center-title {
-  color: #fff;
+  color: $app-surface;
 }
 .service-center-card.disabled-card .service-center-desc {
-  color: rgba(255,255,255,0.9);
+  color: rgba($app-surface, 0.9);
 }
 .service-center-arrow {
   font-size: 40rpx;
-  color: #fff;
+  color: $app-surface;
 }
 
 /* 设置 + 退出 */
@@ -1323,7 +1342,7 @@ export default {
 }
 .menu-row {
   width: 100%;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 24rpx;
   display: flex;
@@ -1338,15 +1357,15 @@ export default {
 .menu-row-text {
   flex: 1;
   font-size: 26rpx;
-  color: #333;
+  color: $c-text-strong;
 }
 .menu-row-arrow {
   font-size: 28rpx;
-  color: #ccc;
+  color: $c-text-ghost;
 }
 .logout-btn {
   width: 100%;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 24rpx;
   text-align: center;
@@ -1354,7 +1373,7 @@ export default {
 }
 .logout-text {
   font-size: 26rpx;
-  color: #FF4D4F;
+  color: $c-danger-ant;
   font-weight: 500;
 }
 
@@ -1366,7 +1385,7 @@ export default {
   width: 80rpx;
   height: 80rpx;
   border-radius: 50%;
-  background: #fff;
+  background: $app-surface;
   box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.15);
   display: flex;
   align-items: center;
@@ -1383,7 +1402,7 @@ export default {
   position: absolute;
   width: 16rpx;
   height: 16rpx;
-  border: 4rpx solid #1E293B;
+  border: 4rpx solid $uni-text-color;
   border-radius: 3rpx;
   box-sizing: border-box;
 }
@@ -1396,7 +1415,7 @@ export default {
   top: 20rpx;
   width: 7rpx;
   height: 7rpx;
-  background: #1E293B;
+  background: $uni-text-color;
   border-radius: 1rpx;
 }
 .qr-cluster {
@@ -1411,7 +1430,7 @@ export default {
   width: 7rpx;
   height: 7rpx;
   margin: 1rpx;
-  background: #1E293B;
+  background: $uni-text-color;
   border-radius: 1rpx;
 }
 </style>