Просмотр исходного кода

feat(five-dimensions): 新增五维能量统一总览页

- 新增 pages/energy/index.vue:五维统一总览
  * 展示全家/个人五维能量条 + 雷达图
  * 成员切换(全家总览/其他家庭成员)
  * 点击维度卡片跳转对应详情页
- pages.json 注册 energy/index 路由
- npm run build 通过
iwt 1 месяц назад
Родитель
Сommit
8a15f3f000
3 измененных файлов с 649 добавлено и 1 удалено
  1. 6 0
      cfc-frontend/pages.json
  2. 642 0
      cfc-frontend/pages/energy/index.vue
  3. 1 1
      cfc-web/.last_build_commit

+ 6 - 0
cfc-frontend/pages.json

@@ -670,6 +670,12 @@
     {
       "root": "pages/energy",
       "pages": [
+        {
+          "path": "index",
+          "style": {
+            "navigationBarTitleText": "五维能量"
+          }
+        },
         {
           "path": "detail",
           "style": {

+ 642 - 0
cfc-frontend/pages/energy/index.vue

@@ -0,0 +1,642 @@
+<template>
+  <view class="container">
+    <!-- 顶部导航栏 -->
+    <view class="nav-bar" :style="{ background: navGradient }">
+      <view class="nav-back" @click="goBack">
+        <text class="nav-back-icon">&#x2190;</text>
+      </view>
+      <text class="nav-title">{{ pageTitle }}</text>
+      <view class="nav-right" @click="showMemberPicker = true">
+        <text class="nav-current-member">{{ currentMemberName }}</text>
+        <text class="nav-arrow">▼</text>
+      </view>
+    </view>
+
+    <!-- 加载中 -->
+    <view class="loading-wrap" v-if="loading">
+      <text class="loading-text">加载中...</text>
+    </view>
+
+    <!-- 未登录 -->
+    <template v-else-if="!isLoggedIn">
+      <view class="empty-state">
+        <text class="empty-icon">🌟</text>
+        <text class="empty-title">登录后查看五维能量</text>
+        <text class="empty-desc">了解您和家人的身·智·富·行·心能量状态</text>
+        <button class="login-btn" @click="goLogin">去登录</button>
+      </view>
+    </template>
+
+    <!-- 已登录 -->
+    <template v-else-if="!loading && sandboxData">
+      <!-- ===== 能量总览卡 ===== -->
+      <view class="overview-card">
+        <view class="overview-header">
+          <view class="overview-avatar" :style="{ background: avatarGradient }">
+            <text class="avatar-text">{{ avatarChar }}</text>
+          </view>
+          <view class="overview-info">
+            <text class="overview-name">{{ currentMemberName }}</text>
+            <text class="overview-role">{{ currentRoleLabel }}</text>
+          </view>
+          <view class="overview-score">
+            <text class="score-value">{{ overallScore || '--' }}</text>
+            <text class="score-label">综合能量</text>
+          </view>
+        </view>
+
+        <!-- 五维能量条 -->
+        <view class="dims-row">
+          <view class="dim-bar" v-for="dim in dimList" :key="dim.code" @click="goDimension(dim.code)">
+            <view class="dim-icon-wrap" :style="{ background: dim.color }">
+              <text class="dim-icon">{{ dim.icon }}</text>
+            </view>
+            <view class="dim-bar-track">
+              <view class="dim-bar-fill" :style="{ width: getDimScore(dim.code) + '%', background: dim.color }"></view>
+            </view>
+            <text class="dim-bar-score">{{ getDimScore(dim.code) }}</text>
+            <text class="dim-bar-label">{{ dim.label }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- ===== 五维雷达图 ===== -->
+      <view class="section radar-section">
+        <view class="section-header">
+          <text class="section-title">五维雷达</text>
+          <text class="section-hint" v-if="currentView === 'family'">全家平均</text>
+          <text class="section-hint" v-else>{{ currentMemberName }}个人</text>
+        </view>
+        <RadarChart
+          v-if="radarDims.length >= 3"
+          :dimensions="radarDims"
+          :scores="radarScores"
+          :avg-scores="[]"
+          fillColor="rgba(102,126,234,0.2)"
+          strokeColor="#667eea"
+          gridColor="rgba(102,126,234,0.15)"
+          labelColor="#888"
+          :width="580"
+          :height="580"
+          @dimensionClick="goDimension" />
+        <view class="empty-radar" v-else>
+          <text>暂无足够数据生成雷达图</text>
+        </view>
+      </view>
+
+      <!-- ===== 家庭成员对比 ===== -->
+      <view class="section compare-section" v-if="currentView !== 'self' && familyMembers.length > 1">
+        <view class="section-header">
+          <text class="section-title">家庭成员能量对比</text>
+        </view>
+        <view class="compare-list">
+          <view
+            class="compare-item"
+            v-for="m in familyMembers"
+            :key="m.memberId"
+            :class="{ active: selectedMemberId === m.memberId }"
+            @click="selectMember(m)">
+            <view class="compare-avatar" :style="{ background: memberColor(m) }">
+              <text class="compare-avatar-text">{{ m.name ? m.name.charAt(0) : '?' }}</text>
+            </view>
+            <view class="compare-info">
+              <text class="compare-name">{{ m.name || '成员' }}</text>
+              <text class="compare-role">{{ m.familyRole || m.memberType || '' }}</text>
+            </view>
+            <view class="compare-score">
+              <text class="compare-score-value" :style="{ color: memberColor(m) }">{{ m.overallScore || '--' }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- ===== 快速入口 ===== -->
+      <view class="section quick-section">
+        <view class="section-header">
+          <text class="section-title">能量详情</text>
+        </view>
+        <view class="quick-grid">
+          <view
+            class="quick-item"
+            v-for="dim in dimList"
+            :key="dim.code"
+            @click="goDimension(dim.code)">
+            <view class="quick-icon-wrap" :style="{ background: dim.color + '22' }">
+              <text class="quick-icon">{{ dim.icon }}</text>
+            </view>
+            <text class="quick-label">{{ dim.label }}</text>
+            <text class="quick-score">{{ getDimScore(dim.code) }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 底部占位 -->
+      <view class="bottom-spacer"></view>
+    </template>
+
+    <!-- 成员选择弹窗 -->
+    <view class="modal-mask" v-if="showMemberPicker" @click="showMemberPicker = false">
+      <view class="member-picker" @click.stop>
+        <view class="picker-header">
+          <text class="picker-title">选择查看对象</text>
+          <text class="picker-close" @click="showMemberPicker = false">×</text>
+        </view>
+        <view class="picker-item" :class="{ active: currentView === 'family' }" @click="switchView('family')">
+          <text class="picker-icon">🏠</text>
+          <text class="picker-label">全家总览</text>
+          <text class="picker-desc">家庭整体能量状态</text>
+        </view>
+        <view
+          class="picker-item"
+          v-for="m in familyMembers"
+          :key="m.memberId"
+          :class="{ active: selectedMemberId === m.memberId }"
+          @click="selectMember(m); showMemberPicker = false">
+          <view class="picker-avatar" :style="{ background: memberColor(m) }">
+            <text class="picker-avatar-text">{{ m.name ? m.name.charAt(0) : '?' }}</text>
+          </view>
+          <text class="picker-label">{{ m.name || '成员' }}</text>
+          <text class="picker-desc">{{ m.familyRole || m.memberType || '' }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import RadarChart from '../../components/RadarChart.vue'
+import { getFamilyEnergySandbox, getVisibleFamilyMembers } from '../../utils/api.js'
+
+var DIM_CONFIG = [
+  { code: 'body',    label: '身', icon: '💪', color: '#10B981', gradient: 'linear-gradient(135deg,#10B981,#34D399)' },
+  { code: 'mind',    label: '心', icon: '❤️', color: '#8B5CF6', gradient: 'linear-gradient(135deg,#8B5CF6,#A78BFA)' },
+  { code: 'wisdom',  label: '智', icon: '🧠', color: '#F59E0B', gradient: 'linear-gradient(135deg,#F59E0B,#FBBF24)' },
+  { code: 'action',  label: '行', icon: '⚡', color: '#F97316', gradient: 'linear-gradient(135deg,#F97316,#FB923C)' },
+  { code: 'wealth',  label: '富', icon: '💎', color: '#3B82F6', gradient: 'linear-gradient(135deg,#3B82F6,#60A5FA)' }
+]
+
+export default {
+  components: { RadarChart },
+  data() {
+    return {
+      loading: true,
+      isLoggedIn: false,
+      sandboxData: null,
+      familyMembers: [],
+      selectedMemberId: null,
+      currentView: 'self', // self | family
+      showMemberPicker: false
+    }
+  },
+  computed: {
+    dimList() { return DIM_CONFIG },
+    currentMember() {
+      if (this.currentView === 'family') return null
+      return this.familyMembers.find(m => m.memberId === this.selectedMemberId) || null
+    },
+    currentMemberName() {
+      if (this.currentView === 'family') return '全家'
+      if (!this.currentMember) return '我'
+      return this.currentMember.name || '成员'
+    },
+    currentRoleLabel() {
+      if (this.currentView === 'family') return '家庭整体'
+      if (!this.currentMember) return ''
+      return this.currentMember.familyRole || this.currentMember.memberType || ''
+    },
+    overallScore() {
+      if (this.currentView === 'family') {
+        return this.sandboxData && this.sandboxData.overallScore
+      }
+      if (this.currentMember) {
+        return this.currentMember.overallScore
+      }
+      return null
+    },
+    avatarChar() {
+      if (this.currentView === 'family') return '🏠'
+      if (this.currentMember) return (this.currentMember.name || '?').charAt(0)
+      return '👤'
+    },
+    avatarGradient() {
+      if (this.currentView === 'family') return 'linear-gradient(135deg,#667eea,#764ba2)'
+      if (this.currentMember) return this.memberColor(this.currentMember)
+      return 'linear-gradient(135deg,#8B5CF6,#A78BFA)'
+    },
+    navTitle() { return this.currentMemberName + ' · 五维能量' },
+    navGradient() {
+      if (this.currentView === 'family') return 'linear-gradient(135deg,#667eea,#764ba2)'
+      if (this.currentMember) {
+        var dim = DIM_CONFIG[0]
+        return dim.gradient
+      }
+      return 'linear-gradient(135deg,#667eea,#764ba2)'
+    },
+    pageTitle() { return this.navTitle },
+    radarDims() {
+      return DIM_CONFIG.map(d => d.label)
+    },
+    radarScores() {
+      if (this.currentView === 'family') {
+        var d = this.sandboxData
+        return DIM_CONFIG.map(dim => d ? (d[dim.code + 'Score'] || 0) : 0)
+      }
+      if (this.currentMember) {
+        return DIM_CONFIG.map(dim => this.currentMember[dim.code + 'Score'] || 0)
+      }
+      return [0, 0, 0, 0, 0]
+    }
+  },
+  onLoad() {
+    this.checkLogin()
+    this.loadData()
+  },
+  onShow() {
+    if (this.isLoggedIn) this.loadData()
+  },
+  methods: {
+    checkLogin() {
+      this.isLoggedIn = !!uni.getStorageSync('token')
+    },
+    goLogin() {
+      uni.navigateTo({ url: '/pages/login/login' })
+    },
+    goBack() {
+      uni.navigateBack({ fail: function() { uni.switchTab({ url: '/pages/index-home/index' }) } })
+    },
+    memberColor(member) {
+      if (!member) return 'linear-gradient(135deg,#8B5CF6,#A78BFA)'
+      var types = { parent: '#F59E0B', child: '#10B981', teacher: '#3B82F6' }
+      var t = member.memberType || 'parent'
+      var colors = {
+        parent: 'linear-gradient(135deg,#F59E0B,#FBBF24)',
+        child:  'linear-gradient(135deg,#10B981,#34D399)',
+        teacher:'linear-gradient(135deg,#3B82F6,#60A5FA)'
+      }
+      return colors[t] || colors.parent
+    },
+    getDimScore(code) {
+      if (this.currentView === 'family') {
+        return this.sandboxData ? (this.sandboxData[code + 'Score'] || 0) : 0
+      }
+      if (this.currentMember) {
+        return this.currentMember[code + 'Score'] || 0
+      }
+      return 0
+    },
+    async loadData() {
+      this.loading = true
+      try {
+        var res = await getFamilyEnergySandbox()
+        if (res && res.code === 200 && res.data) {
+          this.sandboxData = res.data
+          // 如果是新格式,提取 familyData
+          if (res.data.familyData) {
+            this.sandboxData = res.data.familyData
+          }
+        }
+        // 加载家庭成员
+        var memRes = await getVisibleFamilyMembers()
+        if (memRes && memRes.code === 200 && memRes.data) {
+          this.familyMembers = memRes.data
+          // 默认选中第一个非自己(如果有)
+          if (this.familyMembers.length > 0 && !this.selectedMemberId) {
+            this.selectedMemberId = this.familyMembers[0].memberId
+          }
+        }
+      } catch (e) {
+        console.error('加载能量数据失败', e)
+      } finally {
+        this.loading = false
+      }
+    },
+    switchView(view) {
+      this.currentView = view
+      if (view === 'family') {
+        this.selectedMemberId = null
+      }
+      this.showMemberPicker = false
+    },
+    selectMember(member) {
+      this.selectedMemberId = member.memberId
+      this.currentView = 'self'
+      this.showMemberPicker = false
+    },
+    goDimension(code) {
+      var url = ''
+      switch (code) {
+        case 'body':    url = '/pages/body-detail/index'
+        case 'mind':    url = '/pages/mind-detail/index'
+        case 'wisdom':  url = '/pages/wisdom-detail/index'
+        case 'action':  url = '/pages/action-detail/index'
+        case 'wealth':  url = '/pages/wealth/index'
+        default:        return
+      }
+      if (this.currentView !== 'family' && this.selectedMemberId) {
+        url += '?memberId=' + this.selectedMemberId
+      }
+      uni.navigateTo({ url: url })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #0F1B2D 0%, #1A2744 100%);
+  padding-bottom: 40rpx;
+}
+.nav-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 20rpx 30rpx;
+  padding-top: 40rpx;
+}
+.nav-back {
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255,255,255,0.1);
+  border-radius: 30rpx;
+}
+.nav-back-icon {
+  font-size: 32rpx;
+  color: #fff;
+}
+.nav-title {
+  flex: 1;
+  text-align: center;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #fff;
+  margin-right: 80rpx;
+}
+.nav-right {
+  position: absolute;
+  right: 30rpx;
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  background: rgba(255,255,255,0.1);
+  padding: 10rpx 20rpx;
+  border-radius: 30rpx;
+}
+.nav-current-member {
+  font-size: 24rpx;
+  color: #fff;
+}
+.nav-arrow {
+  font-size: 20rpx;
+  color: rgba(255,255,255,0.6);
+}
+.loading-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 200rpx;
+}
+.loading-text {
+  font-size: 28rpx;
+  color: rgba(255,255,255,0.5);
+}
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 200rpx 40rpx;
+}
+.empty-icon { font-size: 100rpx; margin-bottom: 20rpx; }
+.empty-title { font-size: 32rpx; color: #fff; font-weight: 600; margin-bottom: 12rpx; }
+.empty-desc { font-size: 24rpx; color: rgba(255,255,255,0.5); text-align: center; margin-bottom: 40rpx; }
+.login-btn {
+  width: 280rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: #fff;
+  border-radius: 40rpx;
+  font-size: 28rpx;
+  border: none;
+}
+/* ===== 总览卡 ===== */
+.overview-card {
+  margin: 20rpx 30rpx;
+  padding: 30rpx;
+  background: rgba(255,255,255,0.06);
+  border-radius: 24rpx;
+  border: 1rpx solid rgba(255,255,255,0.1);
+}
+.overview-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 30rpx;
+}
+.overview-avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20rpx;
+  flex-shrink: 0;
+}
+.avatar-text { font-size: 36rpx; }
+.overview-info { flex: 1; }
+.overview-name { font-size: 32rpx; font-weight: 600; color: #fff; display: block; }
+.overview-role { font-size: 22rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; }
+.overview-score { text-align: right; }
+.score-value { font-size: 48rpx; font-weight: 700; color: #667eea; display: block; line-height: 1; }
+.score-label { font-size: 20rpx; color: rgba(255,255,255,0.4); }
+/* ===== 五维能量条 ===== */
+.dims-row {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+.dim-bar {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+.dim-icon-wrap {
+  width: 52rpx;
+  height: 52rpx;
+  border-radius: 12rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.dim-icon { font-size: 26rpx; }
+.dim-bar-track {
+  flex: 1;
+  height: 20rpx;
+  background: rgba(255,255,255,0.08);
+  border-radius: 10rpx;
+  overflow: hidden;
+}
+.dim-bar-fill {
+  height: 100%;
+  border-radius: 10rpx;
+  transition: width 0.5s ease;
+}
+.dim-bar-score {
+  width: 50rpx;
+  text-align: right;
+  font-size: 26rpx;
+  font-weight: 600;
+  color: #fff;
+  flex-shrink: 0;
+}
+.dim-bar-label {
+  width: 40rpx;
+  font-size: 22rpx;
+  color: rgba(255,255,255,0.5);
+  text-align: center;
+  flex-shrink: 0;
+}
+/* ===== 雷达图 ===== */
+.section {
+  margin: 20rpx 30rpx;
+}
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16rpx;
+}
+.section-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #fff;
+}
+.section-hint {
+  font-size: 22rpx;
+  color: rgba(255,255,255,0.4);
+}
+.radar-section { }
+.empty-radar {
+  text-align: center;
+  padding: 80rpx;
+  color: rgba(255,255,255,0.3);
+  font-size: 26rpx;
+}
+/* ===== 成员对比 ===== */
+.compare-section { }
+.compare-list {
+  background: rgba(255,255,255,0.06);
+  border-radius: 20rpx;
+  overflow: hidden;
+  border: 1rpx solid rgba(255,255,255,0.08);
+}
+.compare-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 30rpx;
+  border-bottom: 1rpx solid rgba(255,255,255,0.06);
+  background: rgba(255,255,255,0.02);
+}
+.compare-item:last-child { border-bottom: none; }
+.compare-item.active { background: rgba(102,126,234,0.15); }
+.compare-avatar {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 32rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20rpx;
+  flex-shrink: 0;
+}
+.compare-avatar-text { font-size: 28rpx; color: #fff; font-weight: 600; }
+.compare-info { flex: 1; }
+.compare-name { font-size: 28rpx; color: #fff; font-weight: 500; display: block; }
+.compare-role { font-size: 22rpx; color: rgba(255,255,255,0.4); margin-top: 4rpx; display: block; }
+.compare-score { text-align: right; }
+.compare-score-value { font-size: 36rpx; font-weight: 700; }
+/* ===== 快速入口 ===== */
+.quick-section { }
+.quick-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+  background: rgba(255,255,255,0.06);
+  border-radius: 20rpx;
+  padding: 20rpx;
+  border: 1rpx solid rgba(255,255,255,0.08);
+}
+.quick-item {
+  width: calc(20% - 14rpx);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20rpx 0;
+  background: rgba(255,255,255,0.04);
+  border-radius: 16rpx;
+}
+.quick-icon-wrap {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 12rpx;
+}
+.quick-icon { font-size: 36rpx; }
+.quick-label { font-size: 22rpx; color: rgba(255,255,255,0.7); margin-bottom: 6rpx; }
+.quick-score { font-size: 28rpx; font-weight: 600; color: #fff; }
+/* ===== 成员选择弹窗 ===== */
+.modal-mask {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.6);
+  z-index: 1000;
+  display: flex;
+  align-items: flex-end;
+}
+.member-picker {
+  width: 100%;
+  background: #1A2744;
+  border-radius: 32rpx 32rpx 0 0;
+  padding: 20rpx 30rpx 60rpx;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+.picker-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24rpx;
+}
+.picker-title { font-size: 30rpx; font-weight: 600; color: #fff; }
+.picker-close { font-size: 40rpx; color: rgba(255,255,255,0.4); line-height: 1; }
+.picker-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 0;
+  border-bottom: 1rpx solid rgba(255,255,255,0.06);
+}
+.picker-item:last-child { border-bottom: none; }
+.picker-item.active { background: rgba(102,126,234,0.1); margin: 0 -30rpx; padding-left: 30rpx; padding-right: 30rpx; border-radius: 16rpx; }
+.picker-icon { font-size: 36rpx; margin-right: 20rpx; }
+.picker-avatar {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 32rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20rpx;
+  flex-shrink: 0;
+}
+.picker-avatar-text { font-size: 28rpx; color: #fff; font-weight: 600; }
+.picker-label { font-size: 28rpx; color: #fff; font-weight: 500; flex: 1; }
+.picker-desc { font-size: 22rpx; color: rgba(255,255,255,0.4); margin-top: 4rpx; display: block; }
+.bottom-spacer { height: 40rpx; }
+</style>

+ 1 - 1
cfc-web/.last_build_commit

@@ -1 +1 @@
-43cee64f8306e99009900578879784352f886bda
+01e14f67415ce3f620b53536eaff29a3eacd0531