feat(wuxing-sandbox): 提取五行沙盘为独立组件，替换首页内联实现

zxyj-frontend/components/wuxing-sandbox.vue

@@ -0,0 +1,142 @@
+<template>
+  <view class="wuxing-sandbox">
+    <view class="sandbox-header">
+      <text class="sandbox-title">五行能量沙盘</text>
+      <text class="sandbox-badge">{{ badgeText }}</text>
+    </view>
+    <view class="sandbox-star">
+      <view class="star-point star-point-top" @click="onPointClick('mind')">
+        <text class="point-icon">🔥</text>
+        <text class="point-label">心·火</text>
+        <text class="point-status" v-if="mode === 'preview'">点此登录</text>
+      </view>
+      <view class="star-point star-point-left" @click="onPointClick('action')">
+        <text class="point-icon">🌿</text>
+        <text class="point-label">行·木</text>
+        <text class="point-status" v-if="mode === 'preview'">点此登录</text>
+      </view>
+      <view class="star-point star-point-right" @click="onPointClick('wealth')">
+        <text class="point-icon">💧</text>
+        <text class="point-label">富·水</text>
+        <text class="point-status" v-if="mode === 'preview'">点此登录</text>
+      </view>
+      <view class="star-point star-point-bl" @click="onPointClick('wisdom')">
+        <text class="point-icon">⚔️</text>
+        <text class="point-label">智·金</text>
+        <text class="point-status" v-if="mode === 'preview'">点此登录</text>
+      </view>
+      <view class="star-point star-point-br" @click="onPointClick('body')">
+        <text class="point-icon">🌏</text>
+        <text class="point-label">身·土</text>
+        <text class="point-status" v-if="mode === 'preview'">点此登录</text>
+      </view>
+      <view class="star-center">
+        <text class="center-text">五行平衡</text>
+        <text class="center-sub">共同成长</text>
+      </view>
+    </view>
+    <view class="shenke-hint" v-if="mode === 'preview'">
+      <text class="hint-text">🌱 完成测评，点亮「身·土」</text>
+    </view>
+    <view class="dimension-bar" v-if="mode !== 'preview'">
+      <view class="dim-item inactive">🌿行</view>
+      <text class="dim-arrow">→</text>
+      <view class="dim-item inactive">🔥心</view>
+      <text class="dim-arrow">→</text>
+      <view class="dim-item inactive">🌏身</view>
+      <text class="dim-arrow">→</text>
+      <view class="dim-item inactive">⚔️智</view>
+      <text class="dim-arrow">→</text>
+      <view class="dim-item inactive">💧富</view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    mode: { type: String, default: 'preview' },
+    badgeText: { type: String, default: '综合成长力 0%' }
+  },
+  methods: {
+    onPointClick(domain) {
+      this.$emit('point-click', domain)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.wuxing-sandbox {
+  margin: 20rpx 30rpx;
+  padding: 30rpx;
+  background: linear-gradient(135deg, #1a1a2e, #16213e);
+  border-radius: 24rpx;
+  position: relative;
+  overflow: hidden;
+}
+.sandbox-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30rpx;
+}
+.sandbox-title {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #FFD700;
+}
+.sandbox-badge {
+  font-size: 22rpx;
+  color: #aaa;
+  background: rgba(255,255,255,0.1);
+  padding: 6rpx 16rpx;
+  border-radius: 20rpx;
+}
+.sandbox-star {
+  position: relative;
+  height: 400rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.star-point {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 120rpx;
+}
+.star-point-top { top: 0; left: 50%; transform: translateX(-50%); }
+.star-point-left { top: 120rpx; left: 20rpx; }
+.star-point-right { top: 120rpx; right: 20rpx; }
+.star-point-bl { bottom: 40rpx; left: 60rpx; }
+.star-point-br { bottom: 40rpx; right: 60rpx; }
+.point-icon { font-size: 50rpx; margin-bottom: 6rpx; }
+.point-label { font-size: 22rpx; color: #fff; font-weight: bold; }
+.point-status { font-size: 18rpx; color: #FF6B6B; margin-top: 4rpx; }
+.star-center {
+  width: 120rpx; height: 120rpx;
+  background: radial-gradient(circle, rgba(255,215,0,0.2), rgba(255,215,0,0.05));
+  border: 2rpx solid rgba(255,215,0,0.3);
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.center-text { font-size: 22rpx; color: #FFD700; font-weight: bold; }
+.center-sub { font-size: 18rpx; color: #aaa; }
+.shenke-hint { text-align: center; margin-top: 10rpx; }
+.hint-text { font-size: 22rpx; color: rgba(255,215,0,0.7); }
+.dimension-bar {
+  display: flex; align-items: center; justify-content: center;
+  margin-top: 20rpx; gap: 8rpx;
+}
+.dim-item {
+  font-size: 22rpx; color: #FFD700;
+  background: rgba(255,215,0,0.1);
+  padding: 6rpx 14rpx; border-radius: 12rpx;
+}
+.dim-arrow { font-size: 20rpx; color: rgba(255,215,0,0.3); }
+</style>

zxyj-frontend/pages/index/child-index.vue

@@ -52,38 +52,7 @@
       </view>
 
       <!-- 五行能量沙盘（汐艾福） -->
-      <view class="wuxing-sandbox">
-        <view class="sandbox-header">
-          <text class="sandbox-title">我的五行能量</text>
-          <text class="sandbox-badge">综合 0%</text>
-        </view>
-        <view class="sandbox-star">
-          <view class="star-point star-point-top" @click="goToDomain('mind')">
-            <text class="point-icon">🔥</text>
-            <text class="point-label">心·火</text>
-          </view>
-          <view class="star-point star-point-left" @click="goToDomain('action')">
-            <text class="point-icon">🌿</text>
-            <text class="point-label">行·木</text>
-          </view>
-          <view class="star-point star-point-right" @click="goToDomain('wealth')">
-            <text class="point-icon">💧</text>
-            <text class="point-label">富·水</text>
-          </view>
-          <view class="star-point star-point-bl" @click="goToDomain('wisdom')">
-            <text class="point-icon">⚔️</text>
-            <text class="point-label">智·金</text>
-          </view>
-          <view class="star-point star-point-br" @click="goToDomain('body')">
-            <text class="point-icon">🌏</text>
-            <text class="point-label">身·土</text>
-          </view>
-          <view class="star-center">
-            <text class="center-text">我的能量</text>
-            <text class="center-sub">加油成长</text>
-          </view>
-        </view>
-      </view>
+      <wuxing-sandbox mode="child" badgeText="综合 0%" @point-click="goToDomain" />
 
       <!-- 任务进度卡片 -->
       <view class="task-card">
@@ -180,8 +149,10 @@
 
 <script>
 import { getChildren, getTodayTasks } from '../../utils/api.js'
+import WuxingSandbox from '../../components/wuxing-sandbox.vue'
 
 export default {
+  components: { WuxingSandbox },
   data() {
     return {
       loading: true,
@@ -878,95 +849,5 @@ export default {
   opacity: 0.6;
 }
 
-/* ===== 五行能量沙盘（汐艾福） ===== */
-.wuxing-sandbox {
-  margin: 20rpx 30rpx;
-  padding: 30rpx;
-  background: linear-gradient(135deg, #1a1a2e, #16213e);
-  border-radius: 24rpx;
-  position: relative;
-  overflow: hidden;
-}
-.sandbox-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 30rpx;
-}
-.sandbox-title {
-  font-size: 28rpx;
-  font-weight: bold;
-  color: #FFD700;
-}
-.sandbox-badge {
-  font-size: 22rpx;
-  color: #aaa;
-  background: rgba(255,255,255,0.1);
-  padding: 6rpx 16rpx;
-  border-radius: 20rpx;
-}
-.sandbox-star {
-  position: relative;
-  height: 400rpx;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.star-point {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 120rpx;
-}
-.star-point-top {
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-}
-.star-point-left {
-  top: 120rpx;
-  left: 20rpx;
-}
-.star-point-right {
-  top: 120rpx;
-  right: 20rpx;
-}
-.star-point-bl {
-  bottom: 40rpx;
-  left: 60rpx;
-}
-.star-point-br {
-  bottom: 40rpx;
-  right: 60rpx;
-}
-.point-icon {
-  font-size: 50rpx;
-  margin-bottom: 6rpx;
-}
-.point-label {
-  font-size: 22rpx;
-  color: #fff;
-  font-weight: bold;
-}
-.star-center {
-  width: 120rpx;
-  height: 120rpx;
-  background: radial-gradient(circle, rgba(255,215,0,0.2), rgba(255,215,0,0.05));
-  border: 2rpx solid rgba(255,215,0,0.3);
-  border-radius: 50%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-.center-text {
-  font-size: 22rpx;
-  color: #FFD700;
-  font-weight: bold;
-}
-.center-sub {
-  font-size: 18rpx;
-  color: #aaa;
-}
+
 </style>

zxyj-frontend/pages/index/parent-index.vue

@@ -66,61 +66,7 @@
       </view>
 
       <!-- 五行能量沙盘（汐艾福） -->
-      <view class="wuxing-sandbox">
-        <view class="sandbox-header">
-          <text class="sandbox-title">五行能量沙盘</text>
-          <text class="sandbox-badge">综合成长力 0%</text>
-        </view>
-        <view class="sandbox-star">
-          <!-- 五角星布局 -->
-          <view class="star-point star-point-top" @click="goToDomain('mind')">
-            <text class="point-icon">🔥</text>
-            <text class="point-label">心·火</text>
-            <text class="point-status inactive">待激活</text>
-          </view>
-          <view class="star-point star-point-left" @click="goToDomain('action')">
-            <text class="point-icon">🌿</text>
-            <text class="point-label">行·木</text>
-            <text class="point-status inactive">待激活</text>
-          </view>
-          <view class="star-point star-point-right" @click="goToDomain('wealth')">
-            <text class="point-icon">💧</text>
-            <text class="point-label">富·水</text>
-            <text class="point-status inactive">待激活</text>
-          </view>
-          <view class="star-point star-point-bl" @click="goToDomain('wisdom')">
-            <text class="point-icon">⚔️</text>
-            <text class="point-label">智·金</text>
-            <text class="point-status inactive">待激活</text>
-          </view>
-          <view class="star-point star-point-br" @click="goToDomain('body')">
-            <text class="point-icon">🌏</text>
-            <text class="point-label">身·土</text>
-            <text class="point-status inactive">待激活</text>
-          </view>
-          <!-- 中心徽章 -->
-          <view class="star-center">
-            <text class="center-text">五行平衡</text>
-            <text class="center-sub">共同成长</text>
-          </view>
-        </view>
-        <!-- 相生指引 -->
-        <view class="shenke-hint">
-          <text class="hint-text">🌱 完成测评，点亮「身·土」</text>
-        </view>
-        <!-- 维度状态条 -->
-        <view class="dimension-bar">
-          <view class="dim-item inactive">🌿行</view>
-          <text class="dim-arrow">→</text>
-          <view class="dim-item inactive">🔥心</view>
-          <text class="dim-arrow">→</text>
-          <view class="dim-item inactive">🌏身</view>
-          <text class="dim-arrow">→</text>
-          <view class="dim-item inactive">⚔️智</view>
-          <text class="dim-arrow">→</text>
-          <view class="dim-item inactive">💧富</view>
-        </view>
-      </view>
+      <wuxing-sandbox mode="parent" badgeText="综合成长力 0%" @point-click="goToDomain" />
 
       <!-- 会员Banner（汐福俱乐部） -->
       <view class="membership-banner" @click="goToMembership">
@@ -300,8 +246,10 @@
 
 <script>
 import { getFamilyMembers, getChildren, getPendingReviewTasks, getPendingWishes, approveTask, rejectTask, getChildCompletionStats, getParentDashboard } from '../../utils/api.js'
+import WuxingSandbox from '../../components/wuxing-sandbox.vue'
 
 export default {
+  components: { WuxingSandbox },
   data() {
     return {
       nickname: '',
@@ -1246,137 +1194,5 @@ export default {
   color: #8B4513;
 }
 
-/* ===== 五行能量沙盘（汐艾福） ===== */
-.wuxing-sandbox {
-  margin: 20rpx 30rpx;
-  padding: 30rpx;
-  background: linear-gradient(135deg, #1a1a2e, #16213e);
-  border-radius: 24rpx;
-  position: relative;
-  overflow: hidden;
-}
-.sandbox-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 30rpx;
-}
-.sandbox-title {
-  font-size: 28rpx;
-  font-weight: bold;
-  color: #FFD700;
-}
-.sandbox-badge {
-  font-size: 22rpx;
-  color: #aaa;
-  background: rgba(255,255,255,0.1);
-  padding: 6rpx 16rpx;
-  border-radius: 20rpx;
-}
-.sandbox-star {
-  position: relative;
-  height: 400rpx;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.star-point {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 120rpx;
-}
-.star-point-top {
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-}
-.star-point-left {
-  top: 120rpx;
-  left: 20rpx;
-}
-.star-point-right {
-  top: 120rpx;
-  right: 20rpx;
-}
-.star-point-bl {
-  bottom: 40rpx;
-  left: 60rpx;
-}
-.star-point-br {
-  bottom: 40rpx;
-  right: 60rpx;
-}
-.point-icon {
-  font-size: 50rpx;
-  margin-bottom: 6rpx;
-}
-.point-label {
-  font-size: 22rpx;
-  color: #fff;
-  font-weight: bold;
-}
-.point-status {
-  font-size: 18rpx;
-  margin-top: 4rpx;
-}
-.point-status.inactive {
-  color: #666;
-}
-.point-status.active {
-  color: #4CAF50;
-}
-.star-center {
-  width: 120rpx;
-  height: 120rpx;
-  background: radial-gradient(circle, rgba(255,215,0,0.2), rgba(255,215,0,0.05));
-  border: 2rpx solid rgba(255,215,0,0.3);
-  border-radius: 50%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-.center-text {
-  font-size: 22rpx;
-  color: #FFD700;
-  font-weight: bold;
-}
-.center-sub {
-  font-size: 18rpx;
-  color: #aaa;
-}
-.shenke-hint {
-  text-align: center;
-  margin: 20rpx 0;
-}
-.hint-text {
-  font-size: 24rpx;
-  color: #FFD700;
-  opacity: 0.8;
-}
-.dimension-bar {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8rpx;
-}
-.dim-item {
-  padding: 6rpx 16rpx;
-  border-radius: 20rpx;
-  font-size: 22rpx;
-}
-.dim-item.inactive {
-  background: rgba(255,255,255,0.1);
-  color: #666;
-}
-.dim-item.active {
-  background: rgba(76,175,80,0.3);
-  color: #4CAF50;
-}
-.dim-arrow {
-  color: #444;
-  font-size: 20rpx;
-}
+
 </style>