Jelajahi Sumber

feat(frontend): 登录前五维能量沙盘以 mock 数据展示完整星图

- 未登录态首页将五行沙盘从轻量引导条(preview)升级为完整星图(live)
- 新增 utils/wuxing-sandbox-mock.js:登录前演示数据(心92 身78 智74 富80 行76 健康指数82,源自设计稿星图样例)
- 沙盘含维度条与成员切换(本人/爸爸/妈妈/全家),点顶点仍触发登录
Agnes Agent 1 Minggu lalu
induk
melakukan
e4748206de

+ 14 - 2
cfc-frontend/pages/index-home/index.vue

@@ -347,8 +347,17 @@
       <text class="how-it-works-hint">登录 / 注册后,按引导依次完成,全家健康即刻开始 ›</text>
       <text class="how-it-works-hint">登录 / 注册后,按引导依次完成,全家健康即刻开始 ›</text>
     </view>
     </view>
 
 
-    <!-- 五行沙盘预览 -->
-    <wuxing-sandbox mode="preview" badgeText="登录查看完整报告" @point-click="handleLogin" />
+    <!-- 五行沙盘:登录前以 mock 数据展示完整星图(登录后由真实 /api/energy/sandbox 数据替换) -->
+    <wuxing-sandbox
+      mode="live"
+      :scores="wuxingSandboxMock.scores"
+      :overallScore="wuxingSandboxMock.overallScore"
+      :members="wuxingSandboxMock.members"
+      :personalData="wuxingSandboxMock.personalData"
+      :dimensions="wuxingSandboxMock.dimensions"
+      showDimensionBar
+      starHeight="480rpx"
+      @point-click="handleLogin" />
 
 
     <!-- 推荐阅读(无条件展示,置顶) -->
     <!-- 推荐阅读(无条件展示,置顶) -->
     <view class="section">
     <view class="section">
@@ -460,6 +469,7 @@
 <script>
 <script>
 import store from '../../store/index.js'
 import store from '../../store/index.js'
 import WuxingSandbox from '../../components/wuxing-sandbox.vue'
 import WuxingSandbox from '../../components/wuxing-sandbox.vue'
+import wuxingSandboxMock from '../../utils/wuxing-sandbox-mock.js'
 import GateLock from '../../components/gate-lock.vue'
 import GateLock from '../../components/gate-lock.vue'
 import FamilyFeed from '../../components/FamilyFeed.vue'
 import FamilyFeed from '../../components/FamilyFeed.vue'
 import DimensionProducts from '../../components/DimensionProducts.vue'
 import DimensionProducts from '../../components/DimensionProducts.vue'
@@ -562,6 +572,8 @@ components: {
       ],
       ],
       showProducts: true,
       showProducts: true,
       showArticles: true,
       showArticles: true,
+      // 登录前能量沙盘演示数据(mock,登录后由真实接口数据替换)
+      wuxingSandboxMock: wuxingSandboxMock,
       gradientColors: [
       gradientColors: [
         `linear-gradient(135deg, ${BrandColors.action}, ${BrandColors.successLight3})`,
         `linear-gradient(135deg, ${BrandColors.action}, ${BrandColors.successLight3})`,
         `linear-gradient(135deg, ${BrandColors.info}, ${BrandColors.infoLight})`,
         `linear-gradient(135deg, ${BrandColors.info}, ${BrandColors.infoLight})`,

+ 57 - 0
cfc-frontend/utils/wuxing-sandbox-mock.js

@@ -0,0 +1,57 @@
+/**
+ * 五行能量沙盘 —— 登录前演示数据(mock)。
+ *
+ * 用途:未登录态首页/发现页在用户登录前展示完整的五维能量沙盘(星图 + 维度条 + 成员切换),
+ * 由于此时没有真实的后端数据,使用一组固定演示值。登录后由 /api/energy/sandbox 真实数据替换。
+ *
+ * 数值来源:设计稿 docs/redesign/cfc-home-redesign.html §星图样例
+ * (全家五维能量星图:心 92,身 78,智 74,富 80,行 76,健康指数 82),
+ * 与 wuxing-sandbox.vue 的 prop 结构(scores / overallScore / members / personalData / dimensions)一一对应。
+ *
+ * 约定:scores 为「全家」视角聚合分;personalData 为「本人」视角数据(含 members 数组以定位 self);
+ *       members 为可切换的成员列表(memberId 与 personalData.members[0] 一致者视为本人,切换面板中省略)。
+ */
+
+var WUXING_SANDBOX_MOCK = {
+  // 全家视角五维分(viewMode === 'family' 时读取;overallScore 供 resolveSandboxOverall 读取)
+  scores: {
+    body: 78,
+    mind: 92,
+    wisdom: 74,
+    action: 76,
+    wealth: 80,
+    overallScore: 82
+  },
+  // 太极阳面 / 星图读屏综合分(familyEnergy 与 starAriaLabel 读取)
+  overallScore: 82,
+  // 「本人」视角沙盘数据(viewMode === 'personal' 时读取;members[0] 为 self)
+  personalData: {
+    memberId: 1,
+    name: '小李',
+    bodyScore: 78,
+    mindScore: 92,
+    wisdomScore: 74,
+    actionScore: 76,
+    wealthScore: 80,
+    overallScore: 82,
+    members: [
+      { memberId: 1, name: '小李', bodyScore: 78, mindScore: 92, wisdomScore: 74, actionScore: 76, wealthScore: 80, overallScore: 82 }
+    ]
+  },
+  // 可切换成员列表(成员选择面板:本人 / 各成员 / 全家)
+  members: [
+    { memberId: 1, name: '小李', bodyScore: 78, mindScore: 92, wisdomScore: 74, actionScore: 76, wealthScore: 80, overallScore: 82 },
+    { memberId: 2, name: '爸爸', bodyScore: 70, mindScore: 88, wisdomScore: 79, actionScore: 82, wealthScore: 75, overallScore: 79 },
+    { memberId: 3, name: '妈妈', bodyScore: 82, mindScore: 85, wisdomScore: 81, actionScore: 78, wealthScore: 72, overallScore: 80 }
+  ],
+  // 维度中文名/五行(sortedDimensions 名称与元素来源;缺省时组件内 DIM_META 兜底)
+  dimensions: [
+    { code: 'body', name: '身', element: '土' },
+    { code: 'mind', name: '心', element: '火' },
+    { code: 'wisdom', name: '智', element: '金' },
+    { code: 'action', name: '行', element: '木' },
+    { code: 'wealth', name: '富', element: '水' }
+  ]
+}
+
+export default WUXING_SANDBOX_MOCK