refactor(action-detail): B-4c 最后四页令牌化——action-detail 生态 13/13 收官（零观感变化）

- interaction-log 36 + octopus-add-effect 35 + pearl-add-resource 28 + relationship-questionnaire 35 = 134 处全映射
- 全部映射既有令牌（本批 6 枚新令牌已在 B-4b 预登记）：品牌橙 $brand-primary 系 24 + 填充 31 + 文字 39 + indigo/pink 族 5 + 其余维度/状态色 35
- equiv-regression 四连 PASS

cfc-frontend/pages/action-detail/interaction-log.vue

@@ -416,10 +416,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .container {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: $facade-fill-2;
   padding: 24rpx;
 }
 .page-header {
@@ -428,17 +428,17 @@ export default {
 .page-title {
   font-size: 36rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 .form-section {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 24rpx;
   margin-bottom: 20rpx;
 }
 .section-label {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   font-weight: 500;
   display: block;
   margin-bottom: 16rpx;
@@ -450,22 +450,22 @@ export default {
 }
 .member-item {
   padding: 16rpx 24rpx;
-  border: 2rpx solid #e0e0e0;
+  border: 2rpx solid $facade-hairline;
   border-radius: 12rpx;
-  background: #fafafa;
+  background: $facade-fill-ghost;
 }
 .member-item.selected {
-  border-color: #F97316;
-  background: #FFF7ED;
+  border-color: $brand-primary;
+  background: $uni-primary-pale;
 }
 .member-name {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
 }
 .member-rel {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .type-grid {
   display: flex;
@@ -477,21 +477,21 @@ export default {
   width: calc(25% - 12rpx);
   padding: 20rpx 0;
   text-align: center;
-  border: 2rpx solid #e0e0e0;
+  border: 2rpx solid $facade-hairline;
   border-radius: 12rpx;
-  background: #fafafa;
+  background: $facade-fill-ghost;
 }
 .type-item.selected {
-  border-color: #F97316;
-  background: #FFF7ED;
+  border-color: $brand-primary;
+  background: $uni-primary-pale;
 }
 .custom-type-input {
   margin-top: 20rpx;
-  border: 2rpx solid #e0e0e0;
+  border: 2rpx solid $facade-hairline;
   border-radius: 12rpx;
   padding: 16rpx 20rpx;
   font-size: 28rpx;
-  background: #fafafa;
+  background: $facade-fill-ghost;
 }
 .type-icon {
   font-size: 40rpx;
@@ -500,12 +500,12 @@ export default {
 }
 .type-name {
   font-size: 22rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 .desc-input {
   width: 100%;
   height: 160rpx;
-  background: #fafafa;
+  background: $facade-fill-ghost;
   border-radius: 12rpx;
   padding: 20rpx;
   font-size: 28rpx;
@@ -518,25 +518,25 @@ export default {
 }
 .time-option {
   padding: 16rpx 32rpx;
-  border: 2rpx solid #e0e0e0;
+  border: 2rpx solid $facade-hairline;
   border-radius: 12rpx;
   font-size: 28rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 .time-option.selected {
-  border-color: #F97316;
-  color: #F97316;
-  background: #FFF7ED;
+  border-color: $brand-primary;
+  color: $brand-primary;
+  background: $uni-primary-pale;
 }
 .custom-time {
   margin-top: 12rpx;
 }
 .time-display {
   padding: 20rpx;
-  background: #fafafa;
+  background: $facade-fill-ghost;
   border-radius: 12rpx;
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 /* ===== 附件上传样式 ===== */
@@ -545,7 +545,7 @@ export default {
 }
 .media-subtitle {
   font-size: 24rpx;
-  color: #666;
+  color: $facade-text-body;
   display: block;
   margin-bottom: 12rpx;
 }
@@ -572,7 +572,7 @@ export default {
   width: 40rpx;
   height: 40rpx;
   background: rgba(0, 0, 0, 0.6);
-  color: #fff;
+  color: $app-surface;
   font-size: 24rpx;
   display: flex;
   align-items: center;
@@ -583,7 +583,7 @@ export default {
 .audio-item {
   width: 200rpx;
   height: 100rpx;
-  background: #f0f0f0;
+  background: $facade-fill;
   border-radius: 8rpx;
 }
 .video-placeholder,
@@ -602,7 +602,7 @@ export default {
 .video-name,
 .audio-name {
   font-size: 20rpx;
-  color: #666;
+  color: $facade-text-body;
   margin-top: 8rpx;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -612,8 +612,8 @@ export default {
 .media-add {
   width: 150rpx;
   height: 150rpx;
-  background: #fafafa;
-  border: 2rpx dashed #ddd;
+  background: $facade-fill-ghost;
+  border: 2rpx dashed $facade-border-soft;
   border-radius: 8rpx;
   display: flex;
   flex-direction: column;
@@ -622,11 +622,11 @@ export default {
 }
 .media-add-icon {
   font-size: 48rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .media-add-text {
   font-size: 20rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 8rpx;
 }
 
@@ -636,14 +636,14 @@ export default {
 }
 .btn-submit {
   width: 100%;
-  background: #F97316;
-  color: #fff;
+  background: $brand-primary;
+  color: $app-surface;
   border: none;
   border-radius: 12rpx;
   padding: 24rpx 0;
   font-size: 32rpx;
 }
 .btn-submit[disabled] {
-  background: #ccc;
+  background: $facade-text-ghost;
 }
 </style>

cfc-frontend/pages/action-detail/octopus-add-effect.vue

@@ -213,10 +213,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .container {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: $facade-fill-2;
   padding: 24rpx;
 }
 .page-header {
@@ -225,28 +225,28 @@ export default {
 .page-title {
   font-size: 36rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 .form-section {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 24rpx;
   margin-bottom: 20rpx;
 }
 .section-label {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   font-weight: 500;
   display: block;
   margin-bottom: 16rpx;
 }
 .required-mark {
-  color: #F97316;
+  color: $brand-primary;
 }
 .amount-input {
   width: 100%;
   height: 88rpx;
-  background: #fafafa;
+  background: $facade-fill-ghost;
   border-radius: 12rpx;
   padding: 0 20rpx;
   font-size: 28rpx;
@@ -255,7 +255,7 @@ export default {
 .desc-input {
   width: 100%;
   height: 160rpx;
-  background: #fafafa;
+  background: $facade-fill-ghost;
   border-radius: 12rpx;
   padding: 20rpx;
   font-size: 28rpx;
@@ -272,21 +272,21 @@ export default {
 }
 .kp-add-link {
   font-size: 26rpx;
-  color: #F97316;
+  color: $brand-primary;
 }
 .kp-list {
   margin-top: 16rpx;
 }
 .kp-item {
   padding: 16rpx 20rpx;
-  border: 2rpx solid #e0e0e0;
+  border: 2rpx solid $facade-hairline;
   border-radius: 12rpx;
-  background: #fafafa;
+  background: $facade-fill-ghost;
   margin-bottom: 12rpx;
 }
 .kp-item.selected {
-  border-color: #F97316;
-  background: #FFF7ED;
+  border-color: $brand-primary;
+  background: $uni-primary-pale;
 }
 .kp-info {
   display: flex;
@@ -295,25 +295,25 @@ export default {
 }
 .kp-name {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 .kp-org {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .kp-match-btn {
   font-size: 22rpx;
-  color: #0EA5E9;
+  color: $uni-info;
   padding: 4rpx 12rpx;
-  border: 1rpx solid #0EA5E9;
+  border: 1rpx solid $uni-info;
   border-radius: 8rpx;
-  background: #F0F9FF;
+  background: $tint-sky-soft;
   flex-shrink: 0;
 }
 .kp-sys-badge {
   font-size: 20rpx;
-  color: #10B981;
-  background: #ECFDF5;
+  color: $status-success;
+  background: $status-success-tint;
   padding: 2rpx 12rpx;
   border-radius: 6rpx;
   margin-left: 8rpx;
@@ -327,41 +327,41 @@ export default {
   font-size: 22rpx;
   padding: 6rpx 20rpx;
   border-radius: 8rpx;
-  border: 2rpx solid #e0e0e0;
-  color: #666;
+  border: 2rpx solid $facade-hairline;
+  color: $facade-text-body;
 }
 .role-tag.active {
-  border-color: #F97316;
-  background: #F97316;
-  color: #fff;
+  border-color: $brand-primary;
+  background: $brand-primary;
+  color: $app-surface;
 }
 .empty-hint {
   font-size: 26rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .submit-bar {
   margin-top: 40rpx;
 }
 .btn-submit {
   width: 100%;
-  background: #F97316;
-  color: #fff;
+  background: $brand-primary;
+  color: $app-surface;
   border: none;
   border-radius: 12rpx;
   padding: 24rpx 0;
   font-size: 32rpx;
 }
 .btn-submit[disabled] {
-  background: #ccc;
+  background: $facade-text-ghost;
 }
 .form-picker {
   width: 45%;
   height: 88rpx;
-  background: #fafafa;
+  background: $facade-fill-ghost;
   border-radius: 12rpx;
   padding: 0 20rpx;
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   display: flex;
   align-items: center;
   box-sizing: border-box;
@@ -373,7 +373,7 @@ export default {
 }
 .datetime-sep {
   font-size: 28rpx;
-  color: #ccc;
+  color: $facade-text-ghost;
 }
 /* 手机号匹配 */
 .phone-match-row {
@@ -384,7 +384,7 @@ export default {
 .phone-input {
   flex: 1;
   height: 88rpx;
-  background: #fafafa;
+  background: $facade-fill-ghost;
   border-radius: 12rpx;
   padding: 0 20rpx;
   font-size: 28rpx;
@@ -394,15 +394,15 @@ export default {
   padding: 0 28rpx;
   height: 88rpx;
   line-height: 88rpx;
-  background: #0EA5E9;
-  color: #fff;
+  background: $uni-info;
+  color: $app-surface;
   border-radius: 12rpx;
   font-size: 28rpx;
   flex-shrink: 0;
 }
 .phone-match-result {
   font-size: 24rpx;
-  color: #0EA5E9;
+  color: $uni-info;
   margin-top: 12rpx;
   display: block;
 }

cfc-frontend/pages/action-detail/pearl-add-resource.vue

@@ -139,10 +139,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .container {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: $facade-fill-2;
   padding: 24rpx;
 }
 .page-header {
@@ -151,23 +151,23 @@ export default {
 .page-title {
   font-size: 36rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 .form-section {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 24rpx;
   margin-bottom: 20rpx;
 }
 .section-label {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   font-weight: 500;
   display: block;
   margin-bottom: 16rpx;
 }
 .required-mark {
-  color: #F97316;
+  color: $brand-primary;
 }
 .cat-tabs {
   display: flex;
@@ -176,16 +176,16 @@ export default {
 }
 .cat-tab {
   padding: 12rpx 32rpx;
-  border: 2rpx solid #e0e0e0;
+  border: 2rpx solid $facade-hairline;
   border-radius: 999rpx;
   font-size: 26rpx;
-  color: #666;
-  background: #fafafa;
+  color: $facade-text-body;
+  background: $facade-fill-ghost;
 }
 .cat-tab.active {
-  border-color: #F97316;
-  color: #F97316;
-  background: #FFF7ED;
+  border-color: $brand-primary;
+  color: $brand-primary;
+  background: $uni-primary-pale;
 }
 .type-grid {
   display: flex;
@@ -196,22 +196,22 @@ export default {
   width: calc(33.33% - 11rpx);
   padding: 20rpx 0;
   text-align: center;
-  border: 2rpx solid #e0e0e0;
+  border: 2rpx solid $facade-hairline;
   border-radius: 12rpx;
-  background: #fafafa;
+  background: $facade-fill-ghost;
 }
 .type-item.selected {
-  border-color: #F97316;
-  background: #FFF7ED;
+  border-color: $brand-primary;
+  background: $uni-primary-pale;
 }
 .type-name {
   font-size: 22rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 .name-input {
   width: 100%;
   height: 88rpx;
-  background: #fafafa;
+  background: $facade-fill-ghost;
   border-radius: 12rpx;
   padding: 0 20rpx;
   font-size: 28rpx;
@@ -220,7 +220,7 @@ export default {
 .desc-input {
   width: 100%;
   height: 160rpx;
-  background: #fafafa;
+  background: $facade-fill-ghost;
   border-radius: 12rpx;
   padding: 20rpx;
   font-size: 28rpx;
@@ -233,40 +233,40 @@ export default {
 }
 .member-item {
   padding: 16rpx 24rpx;
-  border: 2rpx solid #e0e0e0;
+  border: 2rpx solid $facade-hairline;
   border-radius: 12rpx;
-  background: #fafafa;
+  background: $facade-fill-ghost;
 }
 .member-item.selected {
-  border-color: #F97316;
-  background: #FFF7ED;
+  border-color: $brand-primary;
+  background: $uni-primary-pale;
 }
 .member-name {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
 }
 .member-rel {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .empty-hint {
   font-size: 26rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .submit-bar {
   margin-top: 40rpx;
 }
 .btn-submit {
   width: 100%;
-  background: #F97316;
-  color: #fff;
+  background: $brand-primary;
+  color: $app-surface;
   border: none;
   border-radius: 12rpx;
   padding: 24rpx 0;
   font-size: 32rpx;
 }
 .btn-submit[disabled] {
-  background: #ccc;
+  background: $facade-text-ghost;
 }
 </style>

cfc-frontend/pages/action-detail/relationship-questionnaire.vue

@@ -180,10 +180,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .container {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: $facade-fill-2;
   padding: 24rpx;
 }
 .page-header {
@@ -192,12 +192,12 @@ export default {
 .page-title {
   font-size: 36rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
 }
 .page-subtitle {
   font-size: 26rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 8rpx;
   display: block;
 }
@@ -207,17 +207,17 @@ export default {
 }
 .loading-text {
   font-size: 28rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .empty-text {
   font-size: 28rpx;
-  color: #999;
+  color: $facade-text-muted;
   display: block;
   margin-bottom: 30rpx;
 }
 .btn-generate, .btn-submit {
-  background: #F97316;
-  color: #fff;
+  background: $brand-primary;
+  color: $app-surface;
   border: none;
   border-radius: 12rpx;
   padding: 24rpx 60rpx;
@@ -229,7 +229,7 @@ export default {
   gap: 24rpx;
 }
 .question-item {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 28rpx;
 }
@@ -242,12 +242,12 @@ export default {
   border-radius: 6rpx;
   margin-right: 12rpx;
 }
-.dimension-tag.trust { background: #D1FAE5; color: #059669; }
-.dimension-tag.intimacy { background: #FCE7F3; color: #DB2777; }
-.dimension-tag.communication { background: #E0E7FF; color: #4338CA; }
+.dimension-tag.trust { background: $status-success-soft; color: $status-success-deep; }
+.dimension-tag.intimacy { background: $accent-pink-tint; color: $accent-pink-deep; }
+.dimension-tag.communication { background: $accent-indigo-tint; color: $accent-indigo-ink; }
 .question-text {
   font-size: 30rpx;
-  color: #333;
+  color: $facade-text-strong;
   line-height: 1.6;
   display: block;
   margin-top: 12rpx;
@@ -262,32 +262,32 @@ export default {
   align-items: center;
   gap: 16rpx;
   padding: 20rpx;
-  border: 2rpx solid #e0e0e0;
+  border: 2rpx solid $facade-hairline;
   border-radius: 12rpx;
-  background: #fafafa;
+  background: $facade-fill-ghost;
 }
 .option-item.selected {
-  border-color: #F97316;
-  background: #FFF7ED;
+  border-color: $brand-primary;
+  background: $uni-primary-pale;
 }
 .option-letter {
   width: 44rpx;
   height: 44rpx;
   line-height: 44rpx;
   text-align: center;
-  background: #f0f0f0;
+  background: $facade-fill;
   border-radius: 50%;
   font-size: 24rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 .option-item.selected .option-letter {
-  background: #F97316;
-  color: #fff;
+  background: $brand-primary;
+  color: $app-surface;
 }
 .option-text {
   flex: 1;
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 .submit-bar {
   margin-top: 20rpx;
@@ -296,7 +296,7 @@ export default {
   width: 100%;
 }
 .btn-submit[disabled] {
-  background: #ccc;
+  background: $facade-text-ghost;
 }
 .result-overlay {
   position: fixed;
@@ -312,14 +312,14 @@ export default {
 }
 .result-card {
   width: 600rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx;
   padding: 40rpx;
 }
 .result-title {
   font-size: 32rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
   text-align: center;
   margin-bottom: 30rpx;
@@ -338,12 +338,12 @@ export default {
 .result-score-label {
   width: 60rpx;
   font-size: 26rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 .result-bar-bg {
   flex: 1;
   height: 16rpx;
-  background: #f0f0f0;
+  background: $facade-fill;
   border-radius: 8rpx;
   overflow: hidden;
 }
@@ -351,19 +351,19 @@ export default {
   height: 100%;
   border-radius: 8rpx;
 }
-.result-bar-fill.trust { background: #10B981; }
-.result-bar-fill.intimacy { background: #FF6B9D; }
-.result-bar-fill.communication { background: #6366F1; }
+.result-bar-fill.trust { background: $status-success; }
+.result-bar-fill.intimacy { background: $dim-mind; }
+.result-bar-fill.communication { background: $dim-wisdom; }
 .result-score-value {
   width: 50rpx;
   font-size: 26rpx;
-  color: #333;
+  color: $facade-text-strong;
   text-align: right;
 }
 .btn-close {
   width: 100%;
-  background: #F97316;
-  color: #fff;
+  background: $brand-primary;
+  color: $app-surface;
   border: none;
   border-radius: 12rpx;
   padding: 20rpx 0;