feat(frontend): 天盘首页canvas节点标注生肖灵数+成员弹窗增强

cfc-frontend/pages/tianpan/index.vue

@@ -98,7 +98,7 @@
         <view class="popup-body">
           <view class="member-info-row">
             <text class="info-label">生肖:</text>
-            <text class="info-value">{{ selectedMember.zodiac || '-' }}</text>
+            <text class="info-value">{{ selectedMember.zodiacName || selectedMember.zodiac || '-' }}</text>
           </view>
           <view class="member-info-row">
             <text class="info-label">星座:</text>
@@ -108,6 +108,14 @@
             <text class="info-label">代际:</text>
             <text class="info-value">{{ selectedMember.generation || '-' }}</text>
           </view>
+          <view class="member-info-row" v-if="selectedMember.lifeNumber">
+            <text class="info-label">灵数:</text>
+            <text class="info-value">{{ selectedMember.lifeNumber }}</text>
+          </view>
+          <view class="member-info-row" v-if="selectedMember.eightCharacters">
+            <text class="info-label">八字:</text>
+            <text class="info-value">{{ getEightCharsText(selectedMember.eightCharacters) }}</text>
+          </view>
           <view class="energy-bars">
             <view class="energy-bar-item" v-for="energy in selectedMember.energy" :key="energy.type">
               <text class="energy-label">{{ energy.label }}</text>
@@ -117,6 +125,16 @@
               <text class="energy-value">{{ energy.value }}</text>
             </view>
           </view>
+          <view class="energy-bars" v-if="selectedMember.dimensionBaseScores">
+            <text class="energy-section-title">五维基础分</text>
+            <view class="energy-bar-item" v-for="(val, key) in selectedMember.dimensionBaseScores" :key="getDimKey(key)">
+              <text class="energy-label">{{ getDimLabel(key) }}</text>
+              <view class="energy-bar">
+                <view class="energy-fill" :style="{ width: val + '%', background: getDimColor(key) }"></view>
+              </view>
+              <text class="energy-value">{{ val }}</text>
+            </view>
+          </view>
         </view>
         <view class="popup-footer">
           <button class="detail-btn" @click="goToMemberDetail">查看详情</button>
@@ -397,6 +415,20 @@ export default {
         ctx.textBaseline = 'middle'
         ctx.fillText(member.nickname || member.name, x, y)
         
+        // 绘制生肖+灵数标注
+        var showLabel = member.zodiacName || member.lifeNumber
+        if (showLabel) {
+          var labelParts = []
+          if (member.zodiacName) labelParts.push(member.zodiacName)
+          if (member.lifeNumber) labelParts.push('灵数' + member.lifeNumber)
+          var label = labelParts.join('·')
+          ctx.font = '9px sans-serif'
+          ctx.fillStyle = this.getMemberColor(member.effectiveRole)
+          ctx.textAlign = 'center'
+          ctx.textBaseline = 'top'
+          ctx.fillText(label, x, y + 18)
+        }
+        
         // 存储点击区域
         if (!this.memberHitAreas) {
           this.memberHitAreas = []
@@ -507,6 +539,28 @@ export default {
       return colorMap[role] || '#6B7280'
     },
     
+    getEightCharsText: function(eightChars) {
+      if (!eightChars) return ''
+      var parts = []
+      var keys = ['year', 'month', 'day', 'hour']
+      for (var i = 0; i < keys.length; i++) {
+        if (eightChars[keys[i]]) parts.push(eightChars[keys[i]])
+      }
+      return parts.join('  ')
+    },
+    
+    getDimKey: function(key) { return 'dim-' + key },
+    
+    getDimLabel: function(key) {
+      var labels = { body: '身', mind: '心', wisdom: '智', action: '行', wealth: '富' }
+      return labels[key] || key
+    },
+    
+    getDimColor: function(key) {
+      var colors = { body: '#FF8C42', mind: '#FF6B9D', wisdom: '#6366F1', action: '#10B981', wealth: '#F59E0B' }
+      return colors[key] || '#6B7280'
+    },
+    
     onCanvasTouchEnd: function(e) {
       if (!e || !e.changedTouches || !e.changedTouches[0]) {
         return
@@ -872,6 +926,14 @@ export default {
   margin-top: 20px;
 }
 
+.energy-section-title {
+  font-size: 14px;
+  font-weight: bold;
+  color: #1F2937;
+  margin-bottom: 12px;
+  display: block;
+}
+
 .energy-bar-item {
   display: flex;
   align-items: center;