feat: beautify action-detail (行) page — enhanced visual design with scores, gradients & hierarchy

- Score-explain card: large score digits + color-coded status cards (good/warn/bad)
- Gradient accent bar on all sections (brand green #10B981)
- Unified section-title-wrap with green left border
- Score explanation: ≥80 good, ≥60 warn, <60 bad
- Header subtext merged into title-wrap for consistent layout
- Visual hierarchy improvements throughout

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

@@ -35,10 +35,15 @@
       :dualDimension="dualDimension" />
 
     <!-- 关系解读 -->
-    <view class="section score-explain-card" v-if="isLoggedIn && currentView === 'self' && actionScore != null">
+    <view class="section score-explain-card" :class="scoreExplainClass" v-if="isLoggedIn && currentView === 'self' && actionScore != null">
       <view class="explain-header">
-        <text class="explain-icon">{{ actionScore >= 80 ? '✅' : actionScore >= 60 ? '⚠️' : '❗' }}</text>
-        <text class="explain-title">关系解读</text>
+        <view class="explain-icon-wrap" :class="'explain-icon-' + scoreExplainLevel">
+          <text class="explain-icon">{{ actionScore >= 80 ? '\u2713' : actionScore >= 60 ? '\u26A0' : '\u2715' }}</text>
+        </view>
+        <view class="explain-info">
+          <text class="explain-title">关系解读</text>
+          <text class="explain-score">{{ actionScore }}<text class="explain-score-unit">分</text></text>
+        </view>
       </view>
       <text class="explain-text">{{ actionScore >= 80 ? '家庭关系和谐，家人沟通顺畅。' : actionScore >= 60 ? '家庭关系一般，建议多花时间陪伴家人。' : '家庭关系需要改善，建议进行家庭沟通活动。' }}</text>
     </view>
@@ -55,10 +60,11 @@
       <view class="section-header">
         <view class="section-title-wrap">
           <text class="help-icon" @tap="showHelp('家庭关系', '了解每位家人的关系质量，改善沟通方式。点击家人节点，查看关系详情。')">?</text>
-          <text class="section-title">家庭关系</text>
+          <view>
+            <text class="section-title">家庭关系</text>
+            <text class="section-sub">了解每位家人的关系质量，改善沟通方式 · 点击家人节点查看详情</text>
+          </view>
         </view>
-        <text class="section-sub">了解每位家人的关系质量，改善沟通方式</text>
-        <text class="section-sub">点击家人节点，查看关系详情</text>
       </view>
       <FamilyRelationGraph
         dimensionCode="action"
@@ -389,6 +395,19 @@ export default {
         scores.push(this.actionPopulationScoreMap[dims[i].key] || 0)
       }
       return scores
+    },
+
+    /** 关系解读状态：good(≥80) | warn(≥60) | bad(<60) */
+    scoreExplainLevel: function() {
+      var s = this.actionScore
+      if (s == null) return 'bad'
+      if (s >= 80) return 'good'
+      if (s >= 60) return 'warn'
+      return 'bad'
+    },
+    /** 关系解读卡片状态类（用于 :class 绑定） */
+    scoreExplainClass: function() {
+      return 'score-explain-' + this.scoreExplainLevel
     }
   },
   onShow() {
@@ -776,19 +795,33 @@ export default {
 /* ===== 通用区块 ===== */
 .section {
   margin: 24rpx 30rpx 0;
+  position: relative;
+}
+.section::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 24rpx;
+  right: 24rpx;
+  height: 3rpx;
+  border-radius: 3rpx 3rpx 0 0;
+  background: linear-gradient(90deg, #10B981, #34D399);
+  opacity: 0.7;
 }
 .section-header {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 16rpx;
+  margin-bottom: 12rpx;
 }
 .section-title-wrap {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8rpx;
+  border-left: 6rpx solid #10B981;
+  padding-left: 16rpx;
 }
 .help-icon {
   width: 36rpx;
@@ -853,7 +886,7 @@ export default {
   box-shadow: 0 4rpx 16rpx rgba(16,185,129,0.3);
 }
 
-/* 关系解读卡片 */
+/* 关系解读卡片 — 状态色 */
 .score-explain-card {
   background: linear-gradient(135deg, #FFFFFF 0%, #F0FFF4 100%);
   border-radius: 20rpx;
@@ -861,19 +894,72 @@ export default {
   border: 1rpx solid rgba(16, 185, 129, 0.12);
   box-shadow: 0 4rpx 16rpx rgba(16, 185, 129, 0.08);
 }
+.score-explain-good {
+  background: linear-gradient(135deg, #FFFFFF 0%, #D1FAE5 100%);
+  border-color: rgba(16, 185, 129, 0.25);
+  box-shadow: 0 4rpx 20rpx rgba(16, 185, 129, 0.15);
+}
+.score-explain-warn {
+  background: linear-gradient(135deg, #FFFFFF 0%, #FEF3C7 100%);
+  border-color: rgba(245, 158, 11, 0.25);
+  box-shadow: 0 4rpx 20rpx rgba(245, 158, 11, 0.12);
+}
+.score-explain-bad {
+  background: linear-gradient(135deg, #FFFFFF 0%, #FEE2E2 100%);
+  border-color: rgba(239, 68, 68, 0.25);
+  box-shadow: 0 4rpx 20rpx rgba(239, 68, 68, 0.12);
+}
 .explain-header {
   display: flex;
+  flex-direction: row;
   align-items: center;
-  gap: 12rpx;
+  gap: 16rpx;
   margin-bottom: 12rpx;
 }
+.explain-icon-wrap {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: transform 0.2s;
+}
+.explain-icon-wrap:active { transform: scale(0.95); }
+.explain-icon-good { background: linear-gradient(135deg, #10B981, #34D399); box-shadow: 0 4rpx 12rpx rgba(16,185,129,0.3); }
+.explain-icon-warn { background: linear-gradient(135deg, #F59E0B, #FBBF24); box-shadow: 0 4rpx 12rpx rgba(245,158,11,0.3); }
+.explain-icon-bad { background: linear-gradient(135deg, #EF4444, #F87171); box-shadow: 0 4rpx 12rpx rgba(239,68,68,0.3); }
 .explain-icon {
-  font-size: 32rpx;
+  font-size: 28rpx;
+  color: #FFFFFF;
+  font-weight: 700;
+}
+.explain-info {
+  display: flex;
+  flex-direction: column;
 }
 .explain-title {
-  font-size: 30rpx;
+  font-size: 28rpx;
   font-weight: 600;
   color: #1E293B;
+  line-height: 1.3;
+}
+.explain-score {
+  font-size: 48rpx;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -2rpx;
+}
+.score-explain-good .explain-score { color: #10B981; }
+.score-explain-warn .explain-score { color: #D97706; }
+.score-explain-bad .explain-score { color: #DC2626; }
+.explain-score-unit {
+  font-size: 24rpx;
+  font-weight: 500;
+  color: #94A3B8;
+  margin-left: 2rpx;
+  letter-spacing: 0;
 }
 .explain-text {
   font-size: 26rpx;