Browse Source

feat(mind): 替换EMI四维条形图为大五人格雷达图,右上角添加测试按钮

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
Xiaogang Liao 2 months ago
parent
commit
0107af65c2
1 changed files with 29 additions and 23 deletions
  1. 29 23
      cfc-frontend/pages/mind/index.vue

+ 29 - 23
cfc-frontend/pages/mind/index.vue

@@ -71,18 +71,22 @@
       </view>
     </view>
 
-    <!-- EMI 四维条形图 -->
+    <!-- ===== 大五人格雷达图 ===== -->
     <view class="emi-section" v-if="emiData">
       <view class="emi-card">
-        <text class="emi-card-title">EMI 心理四维</text>
-        <view class="emi-bar-item" v-for="dim in emiDimensions" :key="dim.key">
-          <text class="emi-bar-label">{{ dim.label }}</text>
-          <view class="emi-bar-track">
-            <view class="emi-bar-fill" :style="{ width: (emiData[dim.key] || 0) + '%', background: dim.color }"></view>
+        <view class="personality-header">
+          <text class="emi-card-title">大五人格</text>
+          <view class="test-btn" @click="goAssessment">
+            <text class="test-btn-text">测试</text>
           </view>
-          <text class="emi-bar-score">{{ emiData[dim.key] || 0 }}</text>
-          <text :class="['emi-bar-level', 'level-' + getScoreLevel(emiData[dim.key] || 0)]">{{ getScoreLevelText(emiData[dim.key] || 0) }}</text>
         </view>
+        <RadarChart
+          :dimensions="personalityDimensions"
+          :scores="personalityScores"
+          :childName="currentChildName || '孩子'"
+          fillColor="#8B5CF6"
+          gridColor="#EDE9FE"
+          labelColor="#6D28D9" />
         <view class="emi-footer">
           <text class="emi-overall">综合EQ分: {{ emiData.overallScore || 0 }}</text>
           <view class="emi-link" @click="goEmotionReport">
@@ -102,20 +106,6 @@
       <view class="placeholder-btn" @click="goLogin" v-else>立即登录</view>
     </view>
 
-    <!-- ===== 大五人格雷达图(从EMI数据中提取) ===== -->
-    <view class="section personality-section" v-if="emiData">
-      <view class="section-header">
-        <text class="section-title">大五人格</text>
-      </view>
-      <RadarChart
-        :dimensions="personalityDimensions"
-        :scores="personalityScores"
-        :childName="currentChildName || '孩子'"
-        fillColor="#8B5CF6"
-        gridColor="#EDE9FE"
-        labelColor="#6D28D9" />
-    </view>
-
     <!-- 每日心理 -->
     <view class="section" v-if="sectionVisible('daily_tip')">
       <view class="section-header">
@@ -908,9 +898,25 @@ export default {
   font-size: 30rpx;
   font-weight: bold;
   color: #333;
-  margin-bottom: 24rpx;
   display: block;
 }
+.personality-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24rpx;
+}
+.test-btn {
+  background: #8B5CF6;
+  padding: 8rpx 28rpx;
+  border-radius: 30rpx;
+}
+.test-btn-text {
+  font-size: 24rpx;
+  color: #fff;
+  font-weight: 500;
+}
 .emi-bar-item {
   display: flex;
   flex-direction: row;