ソースを参照

refactor(dimensions): 五维页面通俗化改造,让普通人也能看懂

文案优化:
- 身:'七维健康图' → '健康指标',加'身体健康各项指标'说明
- 智:'情绪商数/心理韧性/神经质' → '情绪管理/抗压能力/情绪稳定性'
- 富:'认知雷达' → '学习能力评估',加'找出可以提升的方向'说明
- 行:'家庭关系图谱' → '家庭关系','关系域评估' → '关系质量'
- 心:'成长溪流' → '财富成长',加'看到每月的成长变化'说明

新增得分解读卡片:
- 每个维度页新增'健康/情绪/学习/关系/财富解读'卡片
- 80分以上绿色✅,60-80分黄色⚠️,60分以下红色❗
- 配一句话建议:保持/关注/改善

其他:
- 修复 FamilyMemberStrip 双 v-if 语法错误
- 新增 .section-sub 和 .score-explain-card 样式
iwt 1 ヶ月 前
コミット
bf327e3dae

+ 14 - 6
cfc-frontend/pages/action-detail/index.vue

@@ -15,8 +15,7 @@
 
     <!-- 家庭成员选择条 -->
     <FamilyMemberStrip
-      v-if="currentView === 'self'"
-      v-if="isLoggedIn"
+      v-if="currentView === 'self' && isLoggedIn"
       :members="familyMembersVisible"
       :selectedMemberId="selectedMemberId"
       @select="onFamilyMemberSelect"
@@ -32,14 +31,23 @@
     <FamilyEnergyBar
       v-if="isLoggedIn"
       dimensionCode="action"
+    <!-- 关系解读 -->
+    <view class="section score-explain-card" 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>
+      <text class="explain-text">{{ actionScore >= 80 ? '家庭关系和谐,家人沟通顺畅。' : actionScore >= 60 ? '家庭关系一般,建议多花时间陪伴家人。' : '家庭关系需要改善,建议进行家庭沟通活动。' }}</text>
+    </view>
       :sandboxData="sandboxData"
       :dualDimension="dualDimension" />
 
-    <!-- 登录后:家庭关系图谱(行维度核心) -->
+    <!-- 登录后:家庭关系(行维度核心) -->
     <view class="section" v-if="isLoggedIn">
       <view class="section-header">
-        <text class="section-title">家庭关系图谱</text>
-        <text class="section-sub">拖拽节点,查看家人能量</text>
+        <text class="section-title">家庭关系</text>
+        <text class="section-sub">了解每位家人的关系质量,改善沟通方式</text>
+        <text class="section-sub">点击家人节点,查看关系详情</text>
       </view>
       <FamilyRelationGraph
         dimensionCode="action"
@@ -53,7 +61,7 @@
     <!-- 行6维关系域雷达图(登录后) -->
     <view class="section" v-if="isLoggedIn && currentMemberEnergies">
       <view class="section-header">
-        <text class="section-title">🫂 关系域评估</text>
+        <text class="section-title">🫂 关系质量</text>
       </view>
       <RadarChart
         :dimensions="actionDimensions"

+ 40 - 4
cfc-frontend/pages/body-detail/index.vue

@@ -16,8 +16,9 @@
     <!-- 雷达图(始终显示,无用户数据时仅显示人群平均值) -->
     <view class="section">
       <view class="section-header">
-        <text class="section-title">七维健康图</text>
-        <text class="avg-badge" v-if="!dimensionData">同龄同性平均值 · 上传报告后显示个人数据</text>
+        <text class="section-title">健康指标</text>
+        <text class="section-sub">身体健康各项指标,分数越高代表越健康</text>
+        <text class="avg-badge" v-if="!dimensionData">同龄同性平均值 · 上传健康报告后显示个人数据</text>
       </view>
       <RadarChart
         v-if="radarDimensions && radarDimensions.length >= 3"
@@ -34,8 +35,7 @@
 
     <!-- 家庭成员选择条 -->
     <FamilyMemberStrip
-      v-if="currentView === 'self'"
-      v-if="isLoggedIn"
+      v-if="currentView === 'self' && isLoggedIn"
       :members="familyMembersVisible"
       :selectedMemberId="selectedMemberId"
       @select="onFamilyMemberSelect"
@@ -442,6 +442,42 @@ export default {
   color: #fff;
   font-weight: 600;
 }
+
+/* 页面说明 */
+.section-sub {
+  font-size: 22rpx;
+  color: rgba(255,255,255,0.55);
+  margin-top: 6rpx;
+  display: block;
+}
+
+/* 得分解读卡片 */
+.score-explain-card {
+  margin: 20rpx 30rpx;
+  padding: 28rpx 24rpx;
+  background: rgba(255,255,255,0.1);
+  border-radius: 20rpx;
+  border: 1rpx solid rgba(255,255,255,0.15);
+}
+.explain-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 14rpx;
+}
+.explain-icon {
+  font-size: 36rpx;
+  margin-right: 10rpx;
+}
+.explain-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #fff;
+}
+.explain-text {
+  font-size: 26rpx;
+  color: rgba(255,255,255,0.8);
+  line-height: 1.6;
+}
 <style scoped>
 .body-container {
   min-height: 100vh;

+ 45 - 10
cfc-frontend/pages/mind-detail/index.vue

@@ -25,8 +25,7 @@
 
     <!-- 家庭成员选择条 -->
     <FamilyMemberStrip
-      v-if="currentView === 'self'"
-      v-if="isLoggedIn"
+      v-if="currentView === 'self' && isLoggedIn"
       :members="familyMembersVisible"
       :selectedMemberId="selectedMemberId"
       @select="onFamilyMemberSelect"
@@ -81,7 +80,7 @@
         <!-- 肠脑轴情绪卡片 -->
         <view class="section" v-if="gutIndicators && gutIndicators.length > 0">
           <view class="section-header">
-            <text class="section-title">&#x1F9E0; 肠脑情绪关联</text>
+            <text class="section-title">🌱 情绪与肠胃</text>
           </view>
           <view class="gut-insight-text" v-if="gutInsight">
             <text>{{ gutInsight }}</text>
@@ -132,7 +131,7 @@
     <!-- 心13维雷达图(分组展示,登录后且选中成员时) -->
     <view class="section" v-if="isLoggedIn && currentMemberEnergies">
       <view class="section-header">
-        <text class="section-title">&#x1F9E0; 心理维度详解</text>
+        <text class="section-title">🧠 情绪与性格</text>
       </view>
       <view class="radar-group" v-for="(group, gIdx) in mindRadarGroups" :key="gIdx">
         <text class="radar-group-label">{{ group.label }}</text>
@@ -187,8 +186,8 @@ components: { TabTransition, PageBanner, RadarChart, FamilyEnergyBar, PsychCrisi
       emiData: null,
       emiLoading: true,
       emiDimensions: [
-        { key: 'emotionScore', label: '情绪商数', color: '#FF6B35' },
-        { key: 'resilienceScore', label: '心理韧性', color: '#F97316' },
+        { key: 'emotionScore', label: '情绪管理', color: '#FF6B35' },
+        { key: 'resilienceScore', label: '抗压能力', color: '#F97316' },
         { key: 'stressCopingScore', label: '压力应对', color: '#FB923C' },
         { key: 'selfAwarenessScore', label: '自我认知', color: '#FBBF24' }
       ],
@@ -198,7 +197,7 @@ components: { TabTransition, PageBanner, RadarChart, FamilyEnergyBar, PsychCrisi
         { key: 'conscientiousnessScore', label: '尽责性' },
         { key: 'extraversionScore', label: '外向性' },
         { key: 'agreeablenessScore', label: '宜人性' },
-        { key: 'neuroticismScore', label: '神经质' }
+        { key: 'neuroticismScore', label: '情绪稳定性' }
       ],
 
       // 功能入口
@@ -251,14 +250,14 @@ components: { TabTransition, PageBanner, RadarChart, FamilyEnergyBar, PsychCrisi
             { key: 'bigFiveConscientiousness', label: '尽责性' },
             { key: 'bigFiveExtraversion', label: '外向性' },
             { key: 'bigFiveAgreeableness', label: '宜人性' },
-            { key: 'bigFiveNeuroticism', label: '神经质' }
+            { key: 'bigFiveNeuroticism', label: '情绪稳定性' }
           ]
         },
         {
           label: '情绪稳定',
           dimensions: [
-            { key: 'emotionEmotion', label: '情绪商数' },
-            { key: 'emotionResilience', label: '心理韧性' },
+            { key: 'emotionEmotion', label: '情绪管理' },
+            { key: 'emotionResilience', label: '抗压能力' },
             { key: 'emotionStressCoping', label: '压力应对' },
             { key: 'emotionSelfAwareness', label: '自我认知' }
           ]
@@ -945,6 +944,42 @@ var descList = descMap[this.dominantElement] || descMap.wood
   color: #fff;
   font-weight: 600;
 }
+
+/* 页面说明 */
+.section-sub {
+  font-size: 22rpx;
+  color: rgba(255,255,255,0.55);
+  margin-top: 6rpx;
+  display: block;
+}
+
+/* 得分解读卡片 */
+.score-explain-card {
+  margin: 20rpx 30rpx;
+  padding: 28rpx 24rpx;
+  background: rgba(255,255,255,0.1);
+  border-radius: 20rpx;
+  border: 1rpx solid rgba(255,255,255,0.15);
+}
+.explain-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 14rpx;
+}
+.explain-icon {
+  font-size: 36rpx;
+  margin-right: 10rpx;
+}
+.explain-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #fff;
+}
+.explain-text {
+  font-size: 26rpx;
+  color: rgba(255,255,255,0.8);
+  line-height: 1.6;
+}
 <style scoped>
 .container {
   min-height: 100vh;

+ 41 - 4
cfc-frontend/pages/wealth/index.vue

@@ -75,10 +75,11 @@
         :score="wealthScore"
         :delta="deltaPercent" />
 
-      <!-- 成长溪流 -->
+      <!-- 财富成长 -->
       <view class="section stream-section">
         <view class="section-header">
-          <text class="section-title">📈 成长溪流</text>
+          <text class="section-title">💰 财富成长</text>
+          <text class="section-sub">记录家庭财富积累过程,看到每月的成长变化</text>
         </view>
         <view class="stream-stages">
           <view
@@ -233,7 +234,7 @@ export default {
         referralCount: 0,
         referralCode: ''
       },
-      // 成长溪流
+      // 财富成长
       deltaPercent: 5.2,
       streamStages: [
         { key: 'start', icon: '💧', name: '起步', desc: '新人阶段', range: '0-30%' },
@@ -518,6 +519,42 @@ export default {
   color: #fff;
   font-weight: 600;
 }
+
+/* 页面说明 */
+.section-sub {
+  font-size: 22rpx;
+  color: rgba(255,255,255,0.55);
+  margin-top: 6rpx;
+  display: block;
+}
+
+/* 得分解读卡片 */
+.score-explain-card {
+  margin: 20rpx 30rpx;
+  padding: 28rpx 24rpx;
+  background: rgba(255,255,255,0.1);
+  border-radius: 20rpx;
+  border: 1rpx solid rgba(255,255,255,0.15);
+}
+.explain-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 14rpx;
+}
+.explain-icon {
+  font-size: 36rpx;
+  margin-right: 10rpx;
+}
+.explain-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #fff;
+}
+.explain-text {
+  font-size: 26rpx;
+  color: rgba(255,255,255,0.8);
+  line-height: 1.6;
+}
 <style scoped>
 .container {
   min-height: 100vh;
@@ -544,7 +581,7 @@ export default {
   color: #999;
 }
 
-/* 成长溪流 */
+/* 财富成长 */
 .stream-section {
   background: #fff;
   border-radius: 20rpx;

+ 50 - 5
cfc-frontend/pages/wisdom-detail/index.vue

@@ -13,11 +13,12 @@
       <text class="brand-strap-text">提升全家认知能力与学习效率</text>
     </view>
 
-    <!-- 2. 认知雷达图(始终显示,无数据时仅显示人群平均值) -->
+    <!-- 2. 学习能力评估图(始终显示,无数据时仅显示人群平均值) -->
     <view class="section">
       <view class="section-header">
-        <text class="section-title">认知雷达</text>
-        <text class="avg-badge" v-if="!cognitiveReport">同龄平均值 · 完成测评后显示个人数据</text>
+        <text class="section-title">学习能力评估</text>
+        <text class="section-sub">通过测评了解全家认知能力,找出可以提升的方向</text>
+        <text class="avg-badge" v-if="!cognitiveReport">同龄平均值 · 完成认知测评后显示个人数据</text>
         <text class="section-more" v-if="isLoggedIn" @click="goCognitiveReport">查看详情 ›</text>
       </view>
       <RadarChart
@@ -32,8 +33,7 @@
 
     <!-- 家庭成员选择条 -->
     <FamilyMemberStrip
-      v-if="currentView === 'self'"
-      v-if="isLoggedIn"
+      v-if="currentView === 'self' && isLoggedIn"
       :members="familyMembersVisible"
       :selectedMemberId="selectedMemberId"
       @select="onFamilyMemberSelect"
@@ -52,6 +52,15 @@
       :sandboxData="sandboxData"
       :dualDimension="dualDimension" />
 
+    <!-- 学习解读 -->
+    <view class="section score-explain-card" v-if="isLoggedIn && currentView === 'self' && dualDimension">
+      <view class="explain-header">
+        <text class="explain-icon">{{ (dualDimension.primary && dualDimension.primary.score || 0) >= 80 ? '✅' : (dualDimension.primary && dualDimension.primary.score || 0) >= 60 ? '⚠️' : '❗' }}</text>
+        <text class="explain-title">学习解读</text>
+      </view>
+      <text class="explain-text">{{ (dualDimension.primary && dualDimension.primary.score || 0) >= 80 ? '学习能力良好,继续保持学习节奏。' : (dualDimension.primary && dualDimension.primary.score || 0) >= 60 ? '学习能力一般,建议多做认知训练。' : '学习能力需要提升,建议进行专业评估。' }}</text>
+    </view>
+
     <!-- ===== DAN 报告(登录后) ===== -->
     <view class="section" v-if="isLoggedIn">
       <view class="section-header">
@@ -421,6 +430,42 @@ export default {
   color: #fff;
   font-weight: 600;
 }
+
+/* 页面说明 */
+.section-sub {
+  font-size: 22rpx;
+  color: rgba(255,255,255,0.55);
+  margin-top: 6rpx;
+  display: block;
+}
+
+/* 得分解读卡片 */
+.score-explain-card {
+  margin: 20rpx 30rpx;
+  padding: 28rpx 24rpx;
+  background: rgba(255,255,255,0.1);
+  border-radius: 20rpx;
+  border: 1rpx solid rgba(255,255,255,0.15);
+}
+.explain-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 14rpx;
+}
+.explain-icon {
+  font-size: 36rpx;
+  margin-right: 10rpx;
+}
+.explain-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #fff;
+}
+.explain-text {
+  font-size: 26rpx;
+  color: rgba(255,255,255,0.8);
+  line-height: 1.6;
+}
 <style scoped>
 .wisdom-container {
   min-height: 100vh;

+ 1 - 1
cfc-web/.last_build_commit

@@ -1 +1 @@
-57a532e59ed6ca2560b714259f6794658bc4a043
+2b6db4a0a5d72d6ac24899f24e6eade065a1f369

+ 2 - 2
cfc-web/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cfc-web",
-  "version": "1.0.1025",
+  "version": "1.0.1026",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cfc-web",
-      "version": "1.0.1025",
+      "version": "1.0.1026",
       "dependencies": {
         "@wangeditor/editor": "^5.1.23",
         "@wangeditor/editor-for-vue": "^1.0.2",