Prechádzať zdrojové kódy

feat(dimensions): 五维页面新增个人/家庭视图切换

- body/mind/wisdom/action/wealth 五个维度页均新增视图切换条
- 个人视图:展示选中家庭成员的维度能量和流水
- 家庭视图:展示全家该维度平均能量,隐藏成员切换条
- 切换时调用 /api/energy/sandbox?view=family 加载家庭聚合数据
- 新增 .view-toggle / .toggle-btn 样式(半透明胶囊按钮)
iwt 1 mesiac pred
rodič
commit
57a532e59e

+ 39 - 2
cfc-frontend/pages/action-detail/index.vue

@@ -15,6 +15,7 @@
 
     <!-- 家庭成员选择条 -->
     <FamilyMemberStrip
+      v-if="currentView === 'self'"
       v-if="isLoggedIn"
       :members="familyMembersVisible"
       :selectedMemberId="selectedMemberId"
@@ -118,7 +119,7 @@ import DimensionProducts from '../../components/DimensionProducts.vue'
 import DimensionIntroCard from '../../components/DimensionIntroCard.vue'
 import AIFloatingAvatar from '../../components/AIFloatingAvatar.vue'
 import RadarChart from '../../components/RadarChart.vue'
-import { getVisibleSections, getEnergyOverview, getChildren, getFamilyEnergySandbox, getVisibleFamilyMembers } from '../../utils/api.js'
+import { getVisibleSections, getEnergyOverview, getChildren, getFamilyEnergySandbox, getEnergySandbox, getVisibleFamilyMembers } from '../../utils/api.js'
 
 export default {
   components: { TabTransition, PageBanner, FamilyEnergyBar, FamilyRelationGraph, FamilyMemberStrip, DimensionTasks, DimensionActivities, DimensionProducts, DimensionIntroCard, AIFloatingAvatar, RadarChart },
@@ -136,6 +137,7 @@ export default {
       childrenChecked: false,
       membersChecked: false,
       sandboxData: null,
+      currentView: 'self', // 'self' | 'family'
       dualDimension: null,
       selfId: null,
       visibleSections: [],
@@ -326,7 +328,21 @@ export default {
         }
       }).catch(function(e) {
         console.log('获取沙盘数据失败', e)
-      })
+      }
+    switchView: function(view) {
+      this.currentView = view
+      if (view === 'family') {
+        this.selectedMemberId = null
+        var self = this
+        getEnergySandbox('family').then(function(res) {
+          if (res && res.data && !res.data.locked) {
+            self.sandboxData = res.data.familyData || res.data
+          }
+        }).catch(function(e) { console.log('获取家庭数据失败', e) })
+      } else {
+        this.loadSandboxData()
+      }
+    },)
     },
     loadEnergyData: function() {
       var self = this
@@ -412,6 +428,27 @@ export default {
 }
 </script>
 
+
+.view-toggle {
+  display: flex;
+  margin: 20rpx 30rpx;
+  background: rgba(255,255,255,0.12);
+  border-radius: 12rpx;
+  padding: 6rpx;
+}
+.toggle-btn {
+  flex: 1;
+  text-align: center;
+  padding: 12rpx 0;
+  border-radius: 8rpx;
+  font-size: 26rpx;
+  color: rgba(255,255,255,0.65);
+}
+.toggle-btn.active {
+  background: rgba(255,255,255,0.22);
+  color: #fff;
+  font-weight: 600;
+}
 <style scoped>
 .container {
   min-height: 100vh;

+ 39 - 2
cfc-frontend/pages/body-detail/index.vue

@@ -34,6 +34,7 @@
 
     <!-- 家庭成员选择条 -->
     <FamilyMemberStrip
+      v-if="currentView === 'self'"
       v-if="isLoggedIn"
       :members="familyMembersVisible"
       :selectedMemberId="selectedMemberId"
@@ -107,7 +108,7 @@ import RadarChart from '../../components/RadarChart.vue'
 import AIFloatingAvatar from '../../components/AIFloatingAvatar.vue'
 import DimensionIntroCard from '../../components/DimensionIntroCard.vue'
 import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
-import { getVisibleSections, getEnergyOverview, getChildren, getFamilyEnergySandbox, getVisibleFamilyMembers, getDimensionOverview } from '../../utils/api.js'
+import { getVisibleSections, getEnergyOverview, getChildren, getFamilyEnergySandbox, getEnergySandbox, getVisibleFamilyMembers, getDimensionOverview } from '../../utils/api.js'
 
 export default {
   components: { TabTransition, PageBanner, FamilyEnergyBar, RadarChart, AIFloatingAvatar, FamilyMemberStrip, DimensionIntroCard },
@@ -126,6 +127,7 @@ export default {
       childrenChecked: false,
       membersChecked: false,
       sandboxData: null,
+      currentView: 'self', // 'self' | 'family'
       dualDimension: null,
       visibleSections: [],
       dimensionData: null,
@@ -300,7 +302,21 @@ export default {
         }
       }).catch(function(e) {
         console.log('获取沙盘数据失败', e)
-      })
+      }
+    switchView: function(view) {
+      this.currentView = view
+      if (view === 'family') {
+        this.selectedMemberId = null
+        var self = this
+        getEnergySandbox('family').then(function(res) {
+          if (res && res.data && !res.data.locked) {
+            self.sandboxData = res.data.familyData || res.data
+          }
+        }).catch(function(e) { console.log('获取家庭数据失败', e) })
+      } else {
+        this.loadSandboxData()
+      }
+    },)
     },
     loadEnergyData: function() {
       var self = this
@@ -405,6 +421,27 @@ export default {
 }
 </script>
 
+
+.view-toggle {
+  display: flex;
+  margin: 20rpx 30rpx;
+  background: rgba(255,255,255,0.12);
+  border-radius: 12rpx;
+  padding: 6rpx;
+}
+.toggle-btn {
+  flex: 1;
+  text-align: center;
+  padding: 12rpx 0;
+  border-radius: 8rpx;
+  font-size: 26rpx;
+  color: rgba(255,255,255,0.65);
+}
+.toggle-btn.active {
+  background: rgba(255,255,255,0.22);
+  color: #fff;
+  font-weight: 600;
+}
 <style scoped>
 .body-container {
   min-height: 100vh;

+ 39 - 2
cfc-frontend/pages/mind-detail/index.vue

@@ -25,6 +25,7 @@
 
     <!-- 家庭成员选择条 -->
     <FamilyMemberStrip
+      v-if="currentView === 'self'"
       v-if="isLoggedIn"
       :members="familyMembersVisible"
       :selectedMemberId="selectedMemberId"
@@ -165,7 +166,7 @@ import PsychCrisisBanner from '../../components/PsychCrisisBanner.vue'
 import AIFloatingAvatar from '../../components/AIFloatingAvatar.vue'
 import FamilyTianpanCard from '../../components/FamilyTianpanCard.vue'
 import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
-import { getVisibleSections, getEmiReport, getFamilyEnergySandbox, getChildren, getVisibleFamilyMembers, getEnergyOverview, getContactList, getHealthAlerts, getMilestones, getDanReportByChild, getFamilyFortune } from '../../utils/api.js'
+import { getVisibleSections, getEmiReport, getFamilyEnergySandbox, getEnergySandbox, getChildren, getVisibleFamilyMembers, getEnergyOverview, getContactList, getHealthAlerts, getMilestones, getDanReportByChild, getFamilyFortune } from '../../utils/api.js'
 import nav from '../../utils/nav.js'
 import config from '../../config.js'
 import { parseDate } from '../../utils/format.js'
@@ -235,6 +236,7 @@ components: { TabTransition, PageBanner, RadarChart, FamilyEnergyBar, PsychCrisi
       userName: '',
       children: [],
       sandboxData: null,
+      currentView: 'self', // 'self' | 'family'
       contactList: [],
       healthAlerts: [],
       milestones: [],
@@ -736,7 +738,21 @@ var descList = descMap[this.dominantElement] || descMap.wood
         if (res && res.data) {
           self.sandboxData = res.data
         }
-      }).catch(function() {})
+      }).catch(function() {}
+    switchView: function(view) {
+      this.currentView = view
+      if (view === 'family') {
+        this.selectedMemberId = null
+        var self = this
+        getEnergySandbox('family').then(function(res) {
+          if (res && res.data && !res.data.locked) {
+            self.sandboxData = res.data.familyData || res.data
+          }
+        }).catch(function(e) { console.log('获取家庭数据失败', e) })
+      } else {
+        this.loadSandboxData()
+      }
+    },)
     },
     loadEnergyData: function() {
       var self = this
@@ -908,6 +924,27 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 </script>
 
+
+.view-toggle {
+  display: flex;
+  margin: 20rpx 30rpx;
+  background: rgba(255,255,255,0.12);
+  border-radius: 12rpx;
+  padding: 6rpx;
+}
+.toggle-btn {
+  flex: 1;
+  text-align: center;
+  padding: 12rpx 0;
+  border-radius: 8rpx;
+  font-size: 26rpx;
+  color: rgba(255,255,255,0.65);
+}
+.toggle-btn.active {
+  background: rgba(255,255,255,0.22);
+  color: #fff;
+  font-weight: 600;
+}
 <style scoped>
 .container {
   min-height: 100vh;

+ 22 - 0
cfc-frontend/pages/wealth/index.vue

@@ -57,6 +57,7 @@
 
       <!-- 家庭成员选择条 -->
       <FamilyMemberStrip
+      v-if="currentView === 'self'"
         v-if="isLoggedIn"
         :members="familyMembersVisible"
         :selectedMemberId="selectedMemberId"
@@ -496,6 +497,27 @@ export default {
 }
 </script>
 
+
+.view-toggle {
+  display: flex;
+  margin: 20rpx 30rpx;
+  background: rgba(255,255,255,0.12);
+  border-radius: 12rpx;
+  padding: 6rpx;
+}
+.toggle-btn {
+  flex: 1;
+  text-align: center;
+  padding: 12rpx 0;
+  border-radius: 8rpx;
+  font-size: 26rpx;
+  color: rgba(255,255,255,0.65);
+}
+.toggle-btn.active {
+  background: rgba(255,255,255,0.22);
+  color: #fff;
+  font-weight: 600;
+}
 <style scoped>
 .container {
   min-height: 100vh;

+ 24 - 1
cfc-frontend/pages/wisdom-detail/index.vue

@@ -32,6 +32,7 @@
 
     <!-- 家庭成员选择条 -->
     <FamilyMemberStrip
+      v-if="currentView === 'self'"
       v-if="isLoggedIn"
       :members="familyMembersVisible"
       :selectedMemberId="selectedMemberId"
@@ -121,7 +122,7 @@ import FamilyEnergyBar from '../../components/FamilyEnergyBar.vue'
 import AIFloatingAvatar from '../../components/AIFloatingAvatar.vue'
 import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
 import DimensionIntroCard from '../../components/DimensionIntroCard.vue'
-import { getVisibleSections, getChildren, getFamilyEnergySandbox, getAssessmentLatestResult, getDanReportByChild } from '../../utils/api.js'
+import { getVisibleSections, getChildren, getFamilyEnergySandbox, getEnergySandbox, getAssessmentLatestResult, getDanReportByChild } from '../../utils/api.js'
 import { parseDate } from '../../utils/format.js'
 
 export default {
@@ -138,6 +139,7 @@ export default {
       familyMembersVisible: [],
       selectedMemberId: null,
       sandboxData: null,
+      currentView: 'self', // 'self' | 'family'
       dualDimension: null,
       visibleSections: [],
       cognitiveReport: null,
@@ -398,6 +400,27 @@ export default {
 }
 </script>
 
+
+.view-toggle {
+  display: flex;
+  margin: 20rpx 30rpx;
+  background: rgba(255,255,255,0.12);
+  border-radius: 12rpx;
+  padding: 6rpx;
+}
+.toggle-btn {
+  flex: 1;
+  text-align: center;
+  padding: 12rpx 0;
+  border-radius: 8rpx;
+  font-size: 26rpx;
+  color: rgba(255,255,255,0.65);
+}
+.toggle-btn.active {
+  background: rgba(255,255,255,0.22);
+  color: #fff;
+  font-weight: 600;
+}
 <style scoped>
 .wisdom-container {
   min-height: 100vh;

+ 1 - 1
cfc-web/.last_build_commit

@@ -1 +1 @@
-c061e0dd96fd8b6d98447c43f9f4571cae886775
+42c3ef24535be64778d102bb5c1c066b614844a4

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

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