refactor(action-detail): B-4a index + 4 diagram 组件令牌化（零观感变化）

- 5 文件共 83 处 hex 全映射全局令牌：tailwind slate 阶 44 + 状态族 25 + 品牌/维度色 7 + 文字填充 7
- uni.scss 新登记 5 枚：$status-success-light-3 #34D399、$status-info-light #38BDF8、$status-danger-light #F87171、$facade-text-slate-deep #475569、$facade-fill-slate #F1F5F9
- #1E293B/#64748B/#94A3B8/#FFF7ED/#1A1A2E 按 single-source 映射既有全局（$uni-text-color 等旧层 + $app-text-subtle 新层）
- index 保留单页专有 $c-tint-mint-wash #E6FFF2；equiv-regression 五连 PASS

cfc-frontend/pages/action-detail/components/AbilityDiagram.vue

@@ -552,14 +552,14 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .ability-graph-wrapper {
   position: relative;
   width: 100%;
   min-height: 200px;
   height: auto;
   margin: 10rpx 0;
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 24rpx;
   overflow: hidden;
 }
@@ -579,7 +579,7 @@ export default {
   margin-top: -16rpx;
 }
 .popup-content {
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 20rpx;
   box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
@@ -605,23 +605,23 @@ export default {
 .popup-name {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1E293B;
+  color: $uni-text-color;
 }
 .popup-relation {
   font-size: 22rpx;
-  color: #64748B;
+  color: $uni-text-color-secondary;
   margin-top: 2rpx;
 }
 .popup-skills-section {
   padding: 12rpx 0;
-  border-top: 1rpx solid #F1F5F9;
-  border-bottom: 1rpx solid #F1F5F9;
+  border-top: 1rpx solid $facade-fill-slate;
+  border-bottom: 1rpx solid $facade-fill-slate;
   margin-bottom: 12rpx;
 }
 .popup-skills-title {
   font-size: 24rpx;
   font-weight: 700;
-  color: #F59E0B;
+  color: $status-warning-2;
   display: block;
   margin-bottom: 8rpx;
 }
@@ -632,14 +632,14 @@ export default {
 }
 .popup-skill-item {
   font-size: 22rpx;
-  color: #475569;
-  background: #FEF3C7;
+  color: $facade-text-slate-deep;
+  background: $status-warning-soft;
   border-radius: 8rpx;
   padding: 4rpx 10rpx;
 }
 .popup-skill-more {
   font-size: 22rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
   padding: 4rpx 6rpx;
 }
 .popup-time {
@@ -649,11 +649,11 @@ export default {
 }
 .popup-time-label {
   font-size: 22rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
 }
 .popup-time-value {
   font-size: 22rpx;
-  color: #475569;
+  color: $facade-text-slate-deep;
 }
 .popup-arrow {
   position: absolute;
@@ -664,7 +664,7 @@ export default {
   height: 0;
   border-left: 8rpx solid transparent;
   border-right: 8rpx solid transparent;
-  border-top: 8rpx solid #FFFFFF;
+  border-top: 8rpx solid $app-surface;
 }
 
 /* 空状态 */
@@ -675,7 +675,7 @@ export default {
   align-items: center;
   justify-content: center;
   padding: 60rpx 20rpx;
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 24rpx;
   margin: 10rpx 0;
 }
@@ -686,16 +686,16 @@ export default {
 .empty-text {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1E293B;
+  color: $uni-text-color;
   margin-bottom: 8rpx;
 }
 .empty-hint {
   font-size: 24rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
   margin-bottom: 24rpx;
 }
 .loading-text {
   font-size: 28rpx;
-  color: #64748B;
+  color: $uni-text-color-secondary;
 }
 </style>

cfc-frontend/pages/action-detail/components/DimensionSubDims.vue

@@ -58,7 +58,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .dim-subdims {
   margin: 20rpx 30rpx;
   background: rgba(255, 255, 255, 0.95);
@@ -73,12 +73,12 @@ export default {
 .dim-title {
   font-size: 32rpx;
   font-weight: 700;
-  color: #1a1a2e;
+  color: $app-ink-night;
   display: block;
 }
 .dim-subtitle {
   font-size: 24rpx;
-  color: #94a3b8;
+  color: $app-text-subtle;
   margin-top: 6rpx;
   display: block;
 }
@@ -111,13 +111,13 @@ export default {
 .dim-item-label {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1e293b;
+  color: $uni-text-color;
   display: block;
   line-height: 1.4;
 }
 .dim-item-desc {
   font-size: 22rpx;
-  color: #94a3b8;
+  color: $app-text-subtle;
   margin-top: 4rpx;
   display: block;
   line-height: 1.4;
@@ -132,9 +132,9 @@ export default {
   font-weight: 700;
   line-height: 1;
 }
-.score-good { color: #16a34a; }
-.score-ok { color: #d97706; }
-.score-low { color: #dc2626; }
+.score-good { color: $status-success-strong-2; }
+.score-ok { color: $status-warning-deep; }
+.score-low { color: $status-danger-deep; }
 .dim-item-level {
   font-size: 20rpx;
   font-weight: 500;
@@ -146,16 +146,16 @@ export default {
   margin-left: auto;
 }
 .level-good {
-  color: #16a34a;
-  background: #f0fdf4;
+  color: $status-success-strong-2;
+  background: $status-success-tint-2;
 }
 .level-ok {
-  color: #d97706;
-  background: #fffbeb;
+  color: $status-warning-deep;
+  background: $status-warning-tint;
 }
 .level-low {
-  color: #dc2626;
-  background: #fef2f2;
+  color: $status-danger-deep;
+  background: $status-danger-tint-2;
 }
 .dim-bar-track {
   height: 8rpx;

cfc-frontend/pages/action-detail/components/OctopusDiagram.vue

@@ -538,14 +538,14 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .octopus-wrapper {
   position: relative;
   width: 100%;
   min-height: 200px;
   height: auto;
   margin: 10rpx 0;
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 24rpx;
   overflow: hidden;
 }
@@ -561,7 +561,7 @@ export default {
   align-items: center;
   justify-content: center;
   padding: 60rpx 20rpx;
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 24rpx;
   margin: 10rpx 0;
 }
@@ -572,17 +572,17 @@ export default {
 .empty-text {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1E293B;
+  color: $uni-text-color;
   margin-bottom: 8rpx;
 }
 .empty-hint {
   font-size: 24rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
   margin-bottom: 24rpx;
 }
 .loading-text {
   font-size: 28rpx;
-  color: #64748B;
+  color: $uni-text-color-secondary;
 }
 .action-btn {
   display: inline-block;
@@ -592,8 +592,8 @@ export default {
   font-weight: 600;
 }
 .action-btn-primary {
-  background: #F97316;
-  color: #FFFFFF;
+  background: $brand-primary;
+  color: $app-surface;
 }
 .reanalyze-btn {
   position: absolute;
@@ -604,7 +604,7 @@ export default {
   border-radius: 20rpx;
   padding: 8rpx 16rpx;
   font-size: 22rpx;
-  color: #64748B;
+  color: $uni-text-color-secondary;
 }
 /* 成效弹窗 */
 .effect-popup {
@@ -615,7 +615,7 @@ export default {
   margin-top: -16rpx;
 }
 .popup-content {
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 20rpx;
   box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.12);
@@ -631,7 +631,7 @@ export default {
 .popup-name {
   font-size: 26rpx;
   font-weight: 600;
-  color: #1E293B;
+  color: $uni-text-color;
 }
 .popup-tags {
   display: flex;
@@ -644,23 +644,23 @@ export default {
   border-radius: 6rpx;
   margin-right: 8rpx;
   margin-top: 4rpx;
-  background: #FFF7ED;
-  color: #F97316;
+  background: $uni-primary-pale;
+  color: $brand-primary;
 }
 .popup-keypersons {
-  border-top: 1rpx solid #F1F5F9;
+  border-top: 1rpx solid $facade-fill-slate;
   padding-top: 10rpx;
   margin-top: 8rpx;
 }
 .popup-title {
   font-size: 22rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
   display: block;
   margin-bottom: 6rpx;
 }
 .kp-item {
   font-size: 22rpx;
-  color: #475569;
+  color: $facade-text-slate-deep;
   display: block;
   margin-bottom: 4rpx;
 }
@@ -671,8 +671,8 @@ export default {
 }
 .kp-sys-badge {
   font-size: 18rpx;
-  color: #10B981;
-  background: #ECFDF5;
+  color: $status-success;
+  background: $status-success-tint;
   padding: 2rpx 10rpx;
   border-radius: 6rpx;
   flex-shrink: 0;
@@ -682,13 +682,13 @@ export default {
 }
 .empty-text {
   font-size: 22rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
 }
 .popup-actions {
   display: flex;
   justify-content: center;
   margin-top: 12rpx;
   padding-top: 12rpx;
-  border-top: 1rpx solid #F1F5F9;
+  border-top: 1rpx solid $facade-fill-slate;
 }
 </style>

cfc-frontend/pages/action-detail/components/PearlDiagram.vue

@@ -852,14 +852,14 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .pearl-graph-wrapper {
   position: relative;
   width: 100%;
   min-height: 200px;
   height: auto;
   margin: 10rpx 0;
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 24rpx;
   overflow: visible;
 }
@@ -883,7 +883,7 @@ export default {
   margin-top: 16rpx;
 }
 .popup-content {
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 20rpx;
   box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
@@ -909,7 +909,7 @@ export default {
 .popup-name {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1E293B;
+  color: $uni-text-color;
 }
 .popup-tags {
   display: flex;
@@ -923,17 +923,17 @@ export default {
   margin-right: 8rpx;
 }
 .popup-tag-rel {
-  background: #F1F5F9;
-  color: #64748B;
+  background: $facade-fill-slate;
+  color: $uni-text-color-secondary;
 }
 .popup-skills {
   padding: 10rpx 0;
-  border-top: 1rpx solid #F1F5F9;
+  border-top: 1rpx solid $facade-fill-slate;
 }
 .popup-skill-count {
   font-size: 22rpx;
   font-weight: 600;
-  color: #F59E0B;
+  color: $status-warning-2;
   display: block;
   margin-bottom: 6rpx;
 }
@@ -943,17 +943,17 @@ export default {
 }
 .popup-skill-item {
   font-size: 20rpx;
-  color: #64748B;
+  color: $uni-text-color-secondary;
   margin-right: 8rpx;
   margin-bottom: 4rpx;
 }
 .popup-desc {
   padding: 10rpx 0;
-  border-top: 1rpx solid #F1F5F9;
+  border-top: 1rpx solid $facade-fill-slate;
 }
 .popup-desc-text {
   font-size: 22rpx;
-  color: #475569;
+  color: $facade-text-slate-deep;
   display: block;
 }
 .popup-actions {
@@ -968,21 +968,21 @@ export default {
   font-size: 24rpx;
 }
 .action-btn-primary {
-  background: #F97316;
-  color: #FFFFFF;
+  background: $brand-primary;
+  color: $app-surface;
 }
 .action-btn-delete {
-  background: #FEE2E2;
-  color: #EF4444;
+  background: $status-danger-soft;
+  color: $status-danger;
   margin-left: 16rpx;
 }
 .action-btn-contact {
-  background: #3B82F6;
-  color: #fff;
+  background: $status-info;
+  color: $app-surface;
 }
 .action-btn-priority {
-  background: #8B5CF6;
-  color: #fff;
+  background: $facade-violet;
+  color: $app-surface;
 }
 .popup-arrow {
   position: absolute;
@@ -993,13 +993,13 @@ export default {
   height: 0;
   border-left: 8rpx solid transparent;
   border-right: 8rpx solid transparent;
-  border-top: 8rpx solid #FFFFFF;
+  border-top: 8rpx solid $app-surface;
 }
 .popup-arrow-down {
   bottom: auto;
   top: -8rpx;
   border-top: none;
-  border-bottom: 8rpx solid #FFFFFF;
+  border-bottom: 8rpx solid $app-surface;
 }
 
 /* 空状态 */
@@ -1010,7 +1010,7 @@ export default {
   align-items: center;
   justify-content: center;
   padding: 60rpx 20rpx;
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 24rpx;
   margin: 10rpx 0;
 }
@@ -1021,16 +1021,16 @@ export default {
 .empty-text {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1E293B;
+  color: $uni-text-color;
   margin-bottom: 8rpx;
 }
 .empty-hint {
   font-size: 24rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
   margin-bottom: 24rpx;
 }
 .loading-text {
   font-size: 28rpx;
-  color: #64748B;
+  color: $uni-text-color-secondary;
 }
 </style>

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

@@ -857,26 +857,28 @@ export default {
 </script>
 
 <style scoped lang="scss">
+// 薄荷极浅底（单页专有；vs $status-success-tint #ECFDF5 全局浅档）
+$c-tint-mint-wash: #E6FFF2;
 
 // 页面级局部调色板：仅本页专有色阶，跨页共性一律走 uni.scss 全局令牌
 // 信息蓝
-$c-info: #0EA5E9;
-$c-action-light: #34D399;
-$c-action-lighter: #6EE7B7;
+$c-info: $uni-info;
+$c-action-light: $status-success-light-3;
+$c-action-lighter: $status-success-light-2;
 // 信息蓝·亮阶
-$c-info-light: #38BDF8;
+$c-info-light: $status-info-light;
 // 危险·亮阶（渐变尾）
-$c-danger-light: #F87171;
+$c-danger-light: $status-danger-light;
 // 次级文字
-$c-text-soft: #64748B;
+$c-text-soft: $uni-text-color-secondary;
 // 深次级文字
-$c-text-deep: #475569;
+$c-text-deep: $facade-text-slate-deep;
 // 下沉底 / 分隔
-$c-surface-sunken: #F1F5F9;
+$c-surface-sunken: $facade-fill-slate;
 // 成功·亮阶（渐变尾）
-$c-success-light: #A7F3D0;
+$c-success-light: $status-success-light;
 // 薄荷极浅底
-$c-tint-mint: #E6FFF2;
+$c-tint-mint: $c-tint-mint-wash;
 
 .container {
   min-height: 100vh;

cfc-frontend/uni.scss

@@ -624,3 +624,8 @@ $facade-hairline:     #E0E0E0; // 浅灰描边（26 文件高频）
 $status-success-soft-2: #DCFCE7; // green-100 浅档（15 文件；vs $status-success-soft #D1FAE5 emerald-100）
 $status-success-strong-2: #16A34A; // green-600 深文字（21 文件；vs $status-success-strong #065F46 emerald-800）
 $status-success-2:   #22C55E; // green-500 成功主色·副档（13 文件；vs $status-success #10B981 emerald-500）
+$status-success-light-3: #34D399; // emerald-400 成功亮档·三档（20 文件；vs $status-success-light #A7F3D0 / -light-2 #6EE7B7）
+$status-info-light:    #38BDF8; // sky-400 信息亮档（3 文件；vs $status-info #3B82F6 blue-500）
+$status-danger-light:  #F87171; // red-400 危险亮档（3 文件；vs $status-danger #EF4444 red-500）
+$facade-text-slate-deep: #475569; // slate-600 深灰蓝文字（16 文件；vs $facade-text-slate #6B7280 gray-500）
+$facade-fill-slate:    #F1F5F9; // slate-100 浅灰蓝填充（36 文件；vs $facade-fill-gray-100 #F3F4F6 gray-100）