feat(frontend): DAN报告详情页复用blocks渲染器，按类型分别展示

cfc-frontend/pages/dan-assessment/report-result.vue

@@ -11,89 +11,9 @@
       <text class="loading-text">加载中...</text>
     </view>
 
-    <template v-else-if="result">
-      <!-- 综合得分 -->
-      <view class="section overview-card">
-        <view class="overview-header">
-          <text class="overview-title">综合评估</text>
-          <text class="overview-score">{{ result.overallScore || '--' }}</text>
-        </view>
-        <view class="overview-desc" v-if="result.analysisReport">
-          <text>{{ result.analysisReport }}</text>
-        </view>
-      </view>
-
-      <!-- 认知七维雷达图 -->
-      <view class="section radar-section">
-        <view class="section-header">
-          <text class="section-title">🧠 认知能力</text>
-        </view>
-        <RadarChart
-          :dimensions="cognitiveDimensions"
-          :scores="cognitiveScores"
-          fillColor="#6366F1"
-          gridColor="#E0E7FF"
-          labelColor="#3730A3"
-          :width="560"
-          :height="460" />
-        <view class="score-row" v-for="(dim, i) in cognitiveDimensions" :key="i">
-          <text class="score-label">{{ dim.label }}</text>
-          <view class="score-bar-bg">
-            <view class="score-bar-fill" :style="'width:' + Math.min(100, result[dim.key] || 0) + '%;background:' + dim.color"></view>
-          </view>
-          <text class="score-num">{{ result[dim.key] || 0 }}</text>
-        </view>
-      </view>
-
-      <!-- EMI 心理维度 -->
-      <view class="section">
-        <view class="section-header">
-          <text class="section-title">💖 心理素养</text>
-        </view>
-        <view class="score-row" v-for="(dim, i) in emiDimensions" :key="i">
-          <text class="score-label">{{ dim.label }}</text>
-          <view class="score-bar-bg">
-            <view class="score-bar-fill" :style="'width:' + Math.min(100, result[dim.key] || 0) + '%;background:' + dim.color"></view>
-          </view>
-          <text class="score-num">{{ result[dim.key] || 0 }}</text>
-        </view>
-      </view>
-
-      <!-- 大五人格 -->
-      <view class="section">
-        <view class="section-header">
-          <text class="section-title">🌈 人格特质</text>
-        </view>
-        <view class="score-row" v-for="(dim, i) in bigFiveDimensions" :key="i">
-          <text class="score-label">{{ dim.label }}</text>
-          <view class="score-bar-bg">
-            <view class="score-bar-fill" :style="'width:' + Math.min(100, result[dim.key] || 0) + '%;background:' + dim.color"></view>
-          </view>
-          <text class="score-num">{{ result[dim.key] || 0 }}</text>
-        </view>
-        <view class="bigfive-total" v-if="result.bigFiveOverallScore != null">
-          <text>大五综合分：</text>
-          <text class="bigfive-val">{{ result.bigFiveOverallScore }}</text>
-        </view>
-      </view>
-
-      <!-- 成长建议 -->
-      <view class="section suggestion-card" v-if="result.growthSuggestions">
-        <view class="section-title">🌱 成长建议</view>
-        <text class="suggestion-text">{{ result.growthSuggestions }}</text>
-      </view>
-
-      <!-- 报告内容块 -->
-      <view class="section" v-if="blocks && blocks.length > 0">
-        <view class="section-header">
-          <text class="section-title">📋 报告内容</text>
-        </view>
-        <view class="block-item" v-for="(block, i) in blocks" :key="i">
-          <text class="block-title">{{ block.title || '' }}</text>
-          <text class="block-content">{{ block.content || '' }}</text>
-        </view>
-      </view>
-
+    <template v-else-if="blocks && blocks.length > 0">
+      <!-- 报告内容块（后端按类型组装，前端通用渲染） -->
+      <report-blocks-renderer :blocks="blocks" />
     </template>
 
     <view class="empty-wrap" v-else>
@@ -105,47 +25,33 @@
 </template>
 
 <script>
-import RadarChart from '../../components/RadarChart.vue'
+import ReportBlocksRenderer from '../../components/report-blocks-renderer.vue'
 import { getDanReportDetail } from '../../utils/api.js'
 
 export default {
-  components: { RadarChart },
+  components: { ReportBlocksRenderer },
   data() {
     return {
       reportId: null,
       loading: true,
       headInfo: null,
-      result: null,
-      blocks: [],
-      cognitiveDimensions: [
-        { key: 'attentionScore', label: '注意力', color: '#6366F1' },
-        { key: 'focusScore', label: '专注力', color: '#818CF8' },
-        { key: 'memoryScore', label: '记忆力', color: '#A5B4FC' },
-        { key: 'logicScore', label: '逻辑思维', color: '#C7D2FE' },
-        { key: 'perceptionScore', label: '感知能力', color: '#6366F1' },
-        { key: 'spatialScore', label: '空间思维', color: '#818CF8' },
-        { key: 'processingSpeedScore', label: '加工速度', color: '#A5B4FC' }
-      ],
-      emiDimensions: [
-        { key: 'emotionScore', label: '情绪商数', color: '#FF6B9D' },
-        { key: 'resilienceScore', label: '心理韧性', color: '#F472B6' },
-        { key: 'stressCopingScore', label: '压力应对', color: '#EC4899' },
-        { key: 'selfAwarenessScore', label: '自我认知', color: '#DB2777' }
-      ],
-      bigFiveDimensions: [
-        { key: 'opennessScore', label: '开放性', color: '#F59E0B' },
-        { key: 'conscientiousnessScore', label: '尽责性', color: '#FBBF24' },
-        { key: 'extraversionScore', label: '外向性', color: '#FCD34D' },
-        { key: 'agreeablenessScore', label: '宜人性', color: '#FDE68A' },
-        { key: 'neuroticismScore', label: '神经质', color: '#F59E0B' }
-      ]
+      blocks: []
     }
   },
   computed: {
     dimensionLabel() {
-      if (!this.result) return ''
-      var dim = this.result.dimension
-      return dim === 'mind' ? '心维度 (A2)' : dim === 'wisdom' ? '智维度 (B4)' : ''
+      if (!this.headInfo || !this.headInfo.dimension) return ''
+      var map = {
+        mind: '心维度 (A2)',
+        wisdom: '智维度 (B4)',
+        cognition: '认知维度 (A1)',
+        learning: '学习能力 (B3)',
+        behavior: '行为教养 (B2)',
+        career: '职业发展 (B6)',
+        campus: '校园标准 (C1)',
+        adolescent: '青春期挑战 (B5)'
+      }
+      return map[this.headInfo.dimension] || ''
     }
   },
   onLoad(options) {
@@ -163,16 +69,12 @@ export default {
           return
         }
         var data = res.data
-        // head info
         self.headInfo = {
-          personName: data.personName || data.childName || '',
-          dateText: data.assessmentDate ? data.assessmentDate.substring(0, 10) : (data.confirmedAt ? data.confirmedAt.substring(0, 10) : ''),
+          personName: (data.result && data.result.childName) || data.childName || '',
+          dateText: data.confirmedAt ? data.confirmedAt.substring(0, 10) : '',
           dimension: data.dimension
         }
-        // linked result scores
-        self.result = data.result || null
-        // blocks
-        self.blocks = (data.blocks || []).filter(function(b) { return b.title || b.content })
+        self.blocks = (data.blocks || []).filter(function(b) { return b && (b.items && b.items.length || b.content) })
       }).catch(function(e) {
         self.loading = false
         uni.showToast({ title: '加载异常', icon: 'none' })
@@ -194,35 +96,5 @@ export default {
 .head-date { font-size: 24rpx; opacity: 0.85; display: block; margin-top: 8rpx; }
 .head-dim { font-size: 22rpx; background: rgba(255,255,255,0.2); border-radius: 20rpx; padding: 4rpx 16rpx; margin-top: 12rpx; display: inline-block; }
 
-.section { margin: 20rpx 24rpx; background: #fff; border-radius: 20rpx; padding: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
-.section-header { display: flex; align-items: center; margin-bottom: 20rpx; }
-.section-title { font-size: 30rpx; font-weight: bold; color: #333; }
-
-.overview-card { text-align: center; }
-.overview-header { display: flex; align-items: baseline; justify-content: center; gap: 12rpx; margin-bottom: 16rpx; }
-.overview-title { font-size: 28rpx; color: #666; }
-.overview-score { font-size: 56rpx; font-weight: bold; color: #6366F1; }
-.overview-desc { font-size: 26rpx; color: #666; line-height: 1.6; }
-
-.radar-section { padding-bottom: 12rpx; }
-
-.score-row { display: flex; align-items: center; margin-bottom: 16rpx; }
-.score-label { font-size: 24rpx; color: #555; width: 140rpx; flex-shrink: 0; }
-.score-bar-bg { flex: 1; height: 16rpx; background: #F0F0F0; border-radius: 8rpx; margin: 0 16rpx; overflow: hidden; }
-.score-bar-fill { height: 100%; border-radius: 8rpx; transition: width 0.3s; }
-.score-num { font-size: 24rpx; color: #666; width: 60rpx; text-align: right; flex-shrink: 0; }
-
-.bigfive-total { margin-top: 16rpx; padding-top: 16rpx; border-top: 1rpx solid #F0F0F0; font-size: 26rpx; color: #666; }
-.bigfive-val { font-size: 32rpx; font-weight: bold; color: #F59E0B; margin-left: 8rpx; }
-
-.suggestion-card { background: linear-gradient(135deg, #FFF7ED, #FEF3C7); }
-.suggestion-card .section-title { margin-bottom: 16rpx; }
-.suggestion-text { font-size: 26rpx; color: #92400E; line-height: 1.8; }
-
-.block-item { padding: 20rpx 0; border-bottom: 1rpx solid #F5F5F5; }
-.block-item:last-child { border-bottom: none; }
-.block-title { font-size: 28rpx; font-weight: 600; color: #333; display: block; margin-bottom: 8rpx; }
-.block-content { font-size: 26rpx; color: #666; line-height: 1.6; }
-
 .bottom-spacer { height: 40rpx; }
 </style>