fix: 雷达图标签边界约束 + 底部留白防tabbar遮挡 + 五维卡片标题单行 + 移除闭环图

cfc-frontend/components/RadarChart.vue

@@ -5,9 +5,10 @@
       :style="containerStyle"
     >
       <canvas
-        id="radarCanvas"
+        :id="canvasId"
         type="2d"
         class="radar-canvas"
+        :style="canvasStyle"
       ></canvas>
       <!-- 透明点击感应层 -->
       <view class="radar-tap-layer" @click="onCanvasTap"></view>
@@ -111,7 +112,9 @@ export default {
       _canvasTop: 0,
       /** 动画插值中的分数 */
       _animScores: [],
-      _animId: null
+      _animId: null,
+      /** 当前实例唯一的 canvas id（同页多实例时避免 select('#radarCanvas') 命中错误节点） */
+      canvasId: 'radarCanvas_' + (this._uid || 0)
     }
   },
   computed: {
@@ -119,12 +122,13 @@ export default {
     dimCount: function() {
       return this.dimensions ? this.dimensions.length : 0
     },
-    /** 容器内联样式 */
+    /** 容器内联样式（字符串形式，微信小程序 style 绑定只可靠支持字符串） */
     containerStyle: function() {
-      return {
-        width: this.width + 'rpx',
-        height: this.height + 'rpx'
-      }
+      return 'width:' + this.width + 'rpx;height:' + this.height + 'rpx'
+    },
+    /** canvas 内联样式：显式撑开尺寸，避免 100%/100% 在 flex 容器中塌陷为 0 */
+    canvasStyle: function() {
+      return 'width:' + this.width + 'rpx;height:' + this.height + 'rpx'
     },
     /** N 边形的 N 个顶点的标准角度（弧度），从顶部顺时针 */
     vertexAngles: function() {
@@ -165,6 +169,8 @@ export default {
         if (!success && retryCount < maxRetry) {
           retryCount++
           setTimeout(tryInit, 60)
+        } else if (!success) {
+          console.log('[RadarChart] 初始化失败，重试 ' + maxRetry + ' 次后放弃', self.canvasId)
         }
       })
     }
@@ -193,43 +199,80 @@ export default {
     initCanvas: function(cb) {
       var self = this
       uni.createSelectorQuery().in(this)
-        .select('#radarCanvas')
+        .select('#' + this.canvasId)
         .fields({ node: true, size: true, rect: true })
         .exec(function(res) {
-          if (!res || !res[0]) { if (cb) cb(false); return }
-          var info = res[0]
-          if (!info.node) { if (cb) cb(false); return }
-
-          var canvas = info.node
-          var width = info.width
-          var height = info.height
-          if (!width || !height) { if (cb) cb(false); return }
-
-          var system = uni.getWindowInfo()
-          var pixelRatio = system.pixelRatio || 2
-
-          canvas.width = width * pixelRatio
-          canvas.height = height * pixelRatio
-
-          var ctx = canvas.getContext('2d')
-          ctx.scale(pixelRatio, pixelRatio)
-
-          self.ctx = ctx
-          self._canvasNode = canvas
-          self.canvasWidth = width
-          self.canvasHeight = height
-          self.dpr = pixelRatio
-          self._canvasLeft = info.left || 0
-          self._canvasTop = info.top || 0
-          self.canvasReady = true
-
-          // 有分数则播放动画，否则只画网格
-          if (self.scores && self.scores.length >= self.dimCount && self.dimCount >= 3) {
-            self._startAnimation()
-          } else {
-            self._doRender()
+          // 兜底：回调内任何异常都必须走 cb(false)，否则 mounted 的重试机制永远不触发 → 永久空白且无日志
+          try {
+            if (!res || !res[0]) {
+              console.log('[RadarChart] 查询失败: 未找到 canvas 节点', self.canvasId)
+              if (cb) cb(false)
+              return
+            }
+            var info = res[0]
+            if (!info.node) {
+              console.log('[RadarChart] node 为空: canvas type=2d 节点获取失败', self.canvasId)
+              if (cb) cb(false)
+              return
+            }
+
+            var canvas = info.node
+            var width = info.width
+            var height = info.height
+            if (!width || !height) {
+              // 兜底：canvas 100%/100% 在 flex 容器中塌陷时 fields size 返回 0，改用 props 的 rpx 换算 px
+              console.log('[RadarChart] 查询尺寸为 0，改用 props rpx 换算: width=' + width + ' height=' + height, self.canvasId)
+              var winWidth = 375
+              try {
+                var winInfo = uni.getWindowInfo()
+                winWidth = winInfo.windowWidth || 375
+              } catch (e2) {}
+              width = Math.round((self.width || 600) * winWidth / 750)
+              height = Math.round((self.height || 600) * winWidth / 750)
+              console.log('[RadarChart] 兜底尺寸: ' + width + 'x' + height, self.canvasId)
+            }
+
+            var pixelRatio = 2
+            try {
+              var system = uni.getWindowInfo()
+              pixelRatio = system.pixelRatio || 2
+            } catch (e) {
+              console.log('[RadarChart] uni.getWindowInfo() 不可用，使用默认 pixelRatio=2', e)
+            }
+
+            canvas.width = width * pixelRatio
+            canvas.height = height * pixelRatio
+
+            var ctx = canvas.getContext('2d')
+            if (!ctx) {
+              console.log('[RadarChart] canvas.getContext(2d) 返回 null', self.canvasId)
+              if (cb) cb(false)
+              return
+            }
+            ctx.scale(pixelRatio, pixelRatio)
+
+            self.ctx = ctx
+            self._canvasNode = canvas
+            self.canvasWidth = width
+            self.canvasHeight = height
+            self.dpr = pixelRatio
+            self._canvasLeft = info.left || 0
+            self._canvasTop = info.top || 0
+            self.canvasReady = true
+
+            console.log('[RadarChart] 初始化成功', 'size=' + width + 'x' + height, 'canvasId=' + self.canvasId, 'pixelRatio=' + pixelRatio)
+
+            // 有分数则播放动画，否则只画网格
+            if (self.scores && self.scores.length >= self.dimCount && self.dimCount >= 3) {
+              self._startAnimation()
+            } else {
+              self._doRender()
+            }
+            if (cb) cb(true)
+          } catch (e) {
+            console.log('[RadarChart] initCanvas 回调异常', e)
+            if (cb) cb(false)
           }
-          if (cb) cb(true)
         })
     },
 
@@ -459,12 +502,22 @@ export default {
       var dims = this.dimensions
       if (!dims || dims.length < n) { return }
 
-      var labelOffset = 36
+      var labelOffset = 30
+      // 画布边缘留白（px），防止标签文字超出画布被裁切
+      var pad = 4
+      var w = this.canvasWidth
+      var h = this.canvasHeight
+
+      ctx.font = 'bold 13px -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif'
+      ctx.fillStyle = this.labelColor || '#1E293B'
 
       for (var i = 0; i < n; i++) {
         var dim = dims[i]
         if (!dim) { continue }
 
+        var label = dim.label || ''
+        if (!label) { continue }
+
         var angle = angles[i]
         var labelR = outerR + labelOffset
         var lx = cx + labelR * Math.cos(angle)
@@ -477,43 +530,50 @@ export default {
         // 将角度归一化到 0 ~ 2PI
         var a = ((angle % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI)
 
-        if (a < (1 * Math.PI) / 6 || a >= (11 * Math.PI) / 6) {
-          // 右侧（-30°~30°）：上右 / 下右
-          if (a < Math.PI / 2) {
-            // 下右
-            align = 'left'
-            baseline = 'top'
-          } else {
-            // 上右
-            align = 'left'
-            baseline = 'bottom'
-          }
+        if (a < Math.PI / 6 || a >= (11 * Math.PI) / 6) {
+          // 右侧（-30°~30°）
+          align = 'left'
+          baseline = 'middle'
         } else if (a < (5 * Math.PI) / 6) {
           // 底部（30°~150°）
           align = 'center'
           baseline = 'top'
         } else if (a < (7 * Math.PI) / 6) {
           // 左侧（150°~210°）
-          if (a < Math.PI) {
-            // 下左
-            align = 'right'
-            baseline = 'top'
-          } else {
-            // 上左
-            align = 'right'
-            baseline = 'bottom'
-          }
+          align = 'right'
+          baseline = 'middle'
         } else {
           // 顶部（210°~330°）
           align = 'center'
           baseline = 'bottom'
         }
 
-        ctx.font = 'bold 13px -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif'
-        ctx.fillStyle = this.labelColor || '#1E293B'
+        // 估算文字宽高（13px 字体：中文≈13px/字，ASCII≈8px/字）
+        var textW = 0
+        for (var ci = 0; ci < label.length; ci++) {
+          textW += label.charCodeAt(ci) > 255 ? 13 : 8
+        }
+        var textH = 13
+
+        // 边界约束：将文字位置限制在画布内，避免顶/底/左右标签出界被裁切
+        if (align === 'left') {
+          lx = Math.min(lx, w - textW - pad)
+        } else if (align === 'right') {
+          lx = Math.max(lx, textW + pad)
+        } else {
+          lx = Math.max(textW / 2 + pad, Math.min(lx, w - textW / 2 - pad))
+        }
+        if (baseline === 'top') {
+          ly = Math.min(ly, h - textH - pad)
+        } else if (baseline === 'bottom') {
+          ly = Math.max(ly, textH + pad)
+        } else {
+          ly = Math.max(textH / 2 + pad, Math.min(ly, h - textH / 2 - pad))
+        }
+
         ctx.textAlign = align
         ctx.textBaseline = baseline
-        ctx.fillText(dim.label || '', lx, ly)
+        ctx.fillText(label, lx, ly)
       }
     },
 

cfc-frontend/pages/growth-main/index.vue

@@ -4,96 +4,6 @@
       <PageBanner theme="action" tagline="干预 · 记录 · 成长" quote="知行合一，每天进步一点点" />
       <!-- 品牌定位语 -->
       <view class="brand-strap"><text class="brand-strap-text">看见改变正在发生</text></view>
-      <!-- 五维健康体系 -->
-      <view class="wuxing-section">
-        <view class="wuxing-title">身·心·智·行·富 五维闭环</view>
-        <view class="wuxing-desc">五行相生相克，构成家庭健康的完整生态</view>
-        <view class="wuxing-diagram">
-          <view class="wd-center">
-            <text class="wd-center-text">家庭健康</text>
-            <text class="wd-center-sub">闭环系统</text>
-          </view>
-          <view class="wd-ring">
-            <view class="wd-node wd-body" @click="goPage('/pages/body-detail/index')">
-              <text class="wd-icon">🌏</text>
-              <text class="wd-name">身</text>
-              <text class="wd-desc">主动健康</text>
-            </view>
-            <view class="wd-node wd-wisdom" @click="goPage('/pages/wisdom-detail/index')">
-              <text class="wd-icon">⚡</text>
-              <text class="wd-name">智</text>
-              <text class="wd-desc">赋能未来</text>
-            </view>
-            <view class="wd-node wd-wealth" @click="goPage('/pages/wealth/index')">
-              <text class="wd-icon">💧</text>
-              <text class="wd-name">富</text>
-              <text class="wd-desc">利他创富</text>
-            </view>
-            <view class="wd-node wd-action" @click="goPage('/pages/action-detail/member-action-detail')">
-              <text class="wd-icon">🌿</text>
-              <text class="wd-name">行</text>
-              <text class="wd-desc">人际和谐</text>
-            </view>
-            <view class="wd-node wd-mind" @click="goPage('/pages/mind-detail/index')">
-              <text class="wd-icon">🔥</text>
-              <text class="wd-name">心</text>
-              <text class="wd-desc">大爱相随</text>
-            </view>
-          </view>
-        </view>
-        <view class="wuxing-relations">
-          <view class="rel-group">
-            <text class="rel-title">相生 → 系统前进</text>
-            <view class="rel-chain">
-              <text class="rel-item">🌏 身</text><text class="rel-arrow">→</text>
-              <text class="rel-item">⚡ 智</text><text class="rel-arrow">→</text>
-              <text class="rel-item">💧 富</text><text class="rel-arrow">→</text>
-              <text class="rel-item">🌿 行</text><text class="rel-arrow">→</text>
-              <text class="rel-item">🔥 心</text><text class="rel-arrow">→</text>
-              <text class="rel-item">🌏 身</text>
-            </view>
-            <text class="rel-hint">健康孕育智慧，智慧创造价值，价值滋养关系，关系反哺心灵，心灵守护健康</text>
-          </view>
-          <view class="rel-group">
-            <text class="rel-title">相克 → 系统平衡</text>
-            <view class="rel-chain">
-              <text class="rel-item">🌏 身</text><text class="rel-op">克</text><text class="rel-item">💧 富</text><text class="rel-dot">·</text>
-              <text class="rel-item">⚡ 智</text><text class="rel-op">克</text><text class="rel-item">🌿 行</text><text class="rel-dot">·</text>
-              <text class="rel-item">💧 富</text><text class="rel-op">克</text><text class="rel-item">🔥 心</text><text class="rel-dot">·</text>
-              <text class="rel-item">🌿 行</text><text class="rel-op">克</text><text class="rel-item">🌏 身</text><text class="rel-dot">·</text>
-              <text class="rel-item">🔥 心</text><text class="rel-op">克</text><text class="rel-item">⚡ 智</text>
-            </view>
-            <text class="rel-hint">健康不换来金钱，算计不如真诚，财富服务家庭，关爱有度，大爱留理性</text>
-          </view>
-        </view>
-        <view class="wuxing-cards">
-          <view class="wc-card wc-body" @click="goPage('/pages/body-detail/index')">
-            <text class="wc-icon">🌏</text>
-            <text class="wc-name">身 · 主动健康</text>
-            <text class="wc-text">用最适合的方法，从根源调理全家体质</text>
-          </view>
-          <view class="wc-card wc-wisdom" @click="goPage('/pages/wisdom-detail/index')">
-            <text class="wc-icon">⚡</text>
-            <text class="wc-name">智 · 赋能未来</text>
-            <text class="wc-text">心智测评与综合素质培养，开启下一代大智慧</text>
-          </view>
-          <view class="wc-card wc-wealth" @click="goPage('/pages/wealth/index')">
-            <text class="wc-icon">💧</text>
-            <text class="wc-name">富 · 利他创富</text>
-            <text class="wc-text">在利他分享中实现家庭第二收入曲线</text>
-          </view>
-          <view class="wc-card wc-action" @click="goPage('/pages/action-detail/member-action-detail')">
-            <text class="wc-icon">🌿</text>
-            <text class="wc-name">行 · 人际和谐</text>
-            <text class="wc-text">亲子关系·夫妻关系·社交人脉，以和谐滋养幸福</text>
-          </view>
-          <view class="wc-card wc-mind" @click="goPage('/pages/mind-detail/index')">
-            <text class="wc-icon">🔥</text>
-            <text class="wc-name">心 · 大爱相随</text>
-            <text class="wc-text">心理学视角解读自我与家人，升华家族纽带</text>
-          </view>
-        </view>
-      </view>
       <!-- 理念卡 -->
       <view class="concept-card">
         <text class="concept-quote">记录不是目的，看见改变才是。</text>
@@ -126,27 +36,94 @@
       </view>
       <!-- 功能预览 -->
       <view class="guest-features">
-        <view class="feat-card" @click="goPage('/pages/health/daily-checkin')">
+        <view class="feat-card" @click="handleGuestFeatureTap">
           <text class="feat-icon">✅</text>
           <text class="feat-title">每日打卡</text>
           <text class="feat-desc">饮食·运动·睡眠·心情</text>
         </view>
-        <view class="feat-card" @click="goPage('/pages/health/survey-questionnaire?dim=all')">
+        <view class="feat-card" @click="handleGuestFeatureTap">
           <text class="feat-icon">📋</text>
           <text class="feat-title">定期调研</text>
           <text class="feat-desc">每周家庭健康问卷</text>
         </view>
-        <view class="feat-card">
+        <view class="feat-card" @click="handleGuestFeatureTap">
           <text class="feat-icon">🏆</text>
           <text class="feat-title">里程碑</text>
           <text class="feat-desc">连续打卡·挑战完成</text>
         </view>
-        <view class="feat-card" @click="goPage('/pages/activity/index')">
+        <view class="feat-card" @click="handleGuestFeatureTap">
           <text class="feat-icon">🎯</text>
           <text class="feat-title">家庭挑战</text>
           <text class="feat-desc">全家参与的互动任务</text>
         </view>
       </view>
+      <!-- 五维健康体系 -->
+      <view class="wuxing-section">
+        <view class="wuxing-title">身·心·智·行·富 · 可执行的成长闭环</view>
+        <view class="wuxing-desc">五行相生相克，动起来、坚持做，让成长真正发生</view>
+        <view class="wuxing-relations">
+          <view class="rel-group">
+            <text class="rel-title">相生 → 系统前进</text>
+            <view class="rel-chain">
+              <text class="rel-item">🌏 身</text><text class="rel-arrow">→</text>
+              <text class="rel-item">⚡ 智</text><text class="rel-arrow">→</text>
+              <text class="rel-item">💧 富</text><text class="rel-arrow">→</text>
+              <text class="rel-item">🌿 行</text><text class="rel-arrow">→</text>
+              <text class="rel-item">🔥 心</text><text class="rel-arrow">→</text>
+              <text class="rel-item">🌏 身</text>
+            </view>
+            <text class="rel-hint">身勤则强，智勤则开，富勤则聚，行勤则和，心勤则安</text>
+          </view>
+          <view class="rel-group">
+            <text class="rel-title">相克 → 系统平衡</text>
+            <view class="rel-chain">
+              <text class="rel-item">🌏 身</text><text class="rel-op">克</text><text class="rel-item">💧 富</text><text class="rel-dot">·</text>
+              <text class="rel-item">⚡ 智</text><text class="rel-op">克</text><text class="rel-item">🌿 行</text><text class="rel-dot">·</text>
+              <text class="rel-item">💧 富</text><text class="rel-op">克</text><text class="rel-item">🔥 心</text><text class="rel-dot">·</text>
+              <text class="rel-item">🌿 行</text><text class="rel-op">克</text><text class="rel-item">🌏 身</text><text class="rel-dot">·</text>
+              <text class="rel-item">🔥 心</text><text class="rel-op">克</text><text class="rel-item">⚡ 智</text>
+            </view>
+            <text class="rel-hint">不拿身体换快钱，不算计关系得失，财富服务家庭，关爱有度、不溺爱越界</text>
+          </view>
+        </view>
+        <view class="wuxing-cards">
+          <view class="wc-card wc-body" @click="goPage('/pages/body-detail/index')">
+            <text class="wc-icon">🌏</text>
+            <view class="wc-info">
+              <text class="wc-name">身 · 主动健康</text>
+              <text class="wc-text">每天动一动、睡得香，身体状态看得见地变好</text>
+            </view>
+          </view>
+          <view class="wc-card wc-wisdom" @click="goPage('/pages/wisdom-detail/index')">
+            <text class="wc-icon">⚡</text>
+            <view class="wc-info">
+              <text class="wc-name">智 · 赋能未来</text>
+              <text class="wc-text">每天读几页、练一会专注，智慧是练出来的</text>
+            </view>
+          </view>
+          <view class="wc-card wc-wealth" @click="goPage('/pages/wealth/index')">
+            <text class="wc-icon">💧</text>
+            <view class="wc-info">
+              <text class="wc-name">富 · 利他创富</text>
+              <text class="wc-text">坚持分享与积累，把第二收入曲线做出来</text>
+            </view>
+          </view>
+          <view class="wc-card wc-action" @click="goPage('/pages/action-detail/member-action-detail')">
+            <text class="wc-icon">🌿</text>
+            <view class="wc-info">
+              <text class="wc-name">行 · 人际和谐</text>
+              <text class="wc-text">从一次倾听开始，让家庭关系每天升温</text>
+            </view>
+          </view>
+          <view class="wc-card wc-mind" @click="goPage('/pages/mind-detail/index')">
+            <text class="wc-icon">🔥</text>
+            <view class="wc-info">
+              <text class="wc-name">心 · 大爱相随</text>
+              <text class="wc-text">每天留 10 分钟说说话，把家人的心事接住</text>
+            </view>
+          </view>
+        </view>
+      </view>
       <!-- 登录引导 -->
       <view class="login-guide-section">
         <LoginGuideCard
@@ -298,6 +275,7 @@ export default {
     viewAllHistory: function() { uni.navigateTo({ url: '/pages/health/survey-history?memberId=' + this.memberId }) },
     goActivityDetail: function(act) { uni.navigateTo({ url: '/pages/activity/activity-detail/activity-detail?id=' + act.id }) },
     goMoreActivities: function() { uni.navigateTo({ url: '/pages/activity/index' }) },
+    handleGuestFeatureTap: function() { uni.showToast({ title: '登录后即可体验该功能', icon: 'none' }) },
     goPage: function(url) { uni.navigateTo({ url: url }) },
     loadTrackingData: function(key) { return this.trackingData[key] || [] },
     async loadAllData() {
@@ -363,7 +341,7 @@ export default {
 }
 </script>
 <style scoped>
-.container{background:#FFF7ED;min-height:100vh;padding-bottom:120rpx}
+  .container{background:#FFF7ED;min-height:100vh;padding-bottom:calc(160rpx + env(safe-area-inset-bottom))}
 .section{margin:16rpx 24rpx}
 /* 游客态 */
 .brand-strap{margin:0 24rpx 16rpx;background:linear-gradient(135deg,#F0FFF4,rgba(16,185,129,0.1));border-radius:16rpx;padding:20rpx 24rpx}
@@ -382,8 +360,8 @@ export default {
 .metric-up{font-size:26rpx;font-weight:bold;color:#10B981}
 .metric-label{font-size:20rpx;color:#999;margin-top:4rpx}
 .case-note{font-size:22rpx;color:#888;display:block}
-.guest-features{display:flex;flex-wrap:wrap;margin:0 24rpx 16rpx}
-.feat-card{width:calc(50% - 8rpx);background:#fff;border-radius:20rpx;padding:24rpx;margin-bottom:16rpx;margin-right:16rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
+.guest-features{display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 24rpx 16rpx}
+.feat-card{width:calc(50% - 8rpx);box-sizing:border-box;background:#fff;border-radius:20rpx;padding:24rpx;margin-bottom:16rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
 .feat-icon{font-size:40rpx;display:block;margin-bottom:8rpx}
 .feat-title{font-size:26rpx;font-weight:600;color:#333;display:block;margin-bottom:4rpx}
 .feat-desc{font-size:22rpx;color:#999;display:block}
@@ -445,36 +423,17 @@ export default {
 .survey-more{text-align:right;font-size:22rpx;color:#F97316;padding-top:8rpx}
 .survey-empty{padding:12rpx 0}
 .survey-empty-text{font-size:24rpx;color:#999}
-</style>
 
 /* ===== 五维闭环体系样式 ===== */
 .wuxing-section { margin: 0 24rpx 16rpx; background: #fff; border-radius: 20rpx; padding: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
 .wuxing-title { font-size: 30rpx; font-weight: bold; color: #333; text-align: center; margin-bottom: 6rpx; }
 .wuxing-desc { font-size: 22rpx; color: #999; text-align: center; margin-bottom: 20rpx; }
 .wuxing-diagram { position: relative; height: 320rpx; margin: 0 auto 20rpx; }
-.wd-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 140rpx; height: 140rpx; background: linear-gradient(135deg, #10B981, #34D399); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4rpx 20rpx rgba(16,185,129,0.3); z-index: 2; }
-.wd-center-text { font-size: 24rpx; font-weight: bold; color: #fff; }
-.wd-center-sub { font-size: 18rpx; color: rgba(255,255,255,0.8); margin-top: 2rpx; }
-.wd-ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
-.wd-node { position: absolute; width: 130rpx; text-align: center; cursor: pointer; }
-.wd-node:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
-.wd-node:nth-child(2) { top: 25%; right: 0; }
-.wd-node:nth-child(3) { bottom: 25%; right: 0; }
-.wd-node:nth-child(4) { bottom: 0; left: 50%; transform: translateX(-50%); }
-.wd-node:nth-child(5) { bottom: 25%; left: 0; }
-.wd-icon { font-size: 40rpx; display: block; }
-.wd-name { font-size: 26rpx; font-weight: bold; display: block; margin-top: 4rpx; }
-.wd-desc { font-size: 18rpx; color: #999; display: block; }
-.wd-node.wd-body .wd-name { color: #FF8C42; }
-.wd-node.wd-wisdom .wd-name { color: #6366F1; }
-.wd-node.wd-wealth .wd-name { color: #F59E0B; }
-.wd-node.wd-action .wd-name { color: #10B981; }
-.wd-node.wd-mind .wd-name { color: #FF6B9D; }
 .wuxing-relations { margin-top: 8rpx; }
 .rel-group { margin-bottom: 16rpx; }
 .rel-title { font-size: 24rpx; font-weight: bold; color: #333; margin-bottom: 8rpx; display: block; }
 .rel-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4rpx; margin-bottom: 6rpx; }
-.rel-item { font-size: 22rpx; padding: 4rpx 10rpx; border-radius: 8rpx; background: #f5f5f5; }
+.rel-item { font-size: 22rpx; padding: 4rpx 10rpx; border-radius: 8rpx; background: #f7f7f7; color: #555; }
 .rel-arrow { font-size: 20rpx; color: #10B981; font-weight: bold; }
 .rel-op { font-size: 20rpx; color: #f56c6c; font-weight: bold; }
 .rel-dot { font-size: 20rpx; color: #ccc; }
@@ -483,15 +442,17 @@ export default {
 .wc-card { display: flex; align-items: center; padding: 16rpx 20rpx; border-radius: 16rpx; border: 2rpx solid #f0f0f0; }
 .wc-card:active { opacity: 0.85; }
 .wc-icon { font-size: 36rpx; margin-right: 16rpx; flex-shrink: 0; }
-.wc-name { font-size: 24rpx; font-weight: 600; flex: 1; }
-.wc-text { font-size: 20rpx; color: #999; display: block; margin-top: 2rpx; }
-.wc-body { border-color: rgba(255,140,66,0.3); background: rgba(255,140,66,0.04); }
+.wc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.wc-name { font-size: 24rpx; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.wc-text { font-size: 20rpx; color: #999; display: block; margin-top: 4rpx; white-space: normal; }
+.wc-body { border-color: rgba(255,140,66,0.3); background: rgba(255,140,66,0.04); border-left: 8rpx solid #FF8C42; }
 .wc-body .wc-name { color: #FF8C42; }
-.wc-wisdom { border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.04); }
+.wc-wisdom { border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.04); border-left: 8rpx solid #6366F1; }
 .wc-wisdom .wc-name { color: #6366F1; }
-.wc-wealth { border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.04); }
+.wc-wealth { border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.04); border-left: 8rpx solid #F59E0B; }
 .wc-wealth .wc-name { color: #F59E0B; }
-.wc-action { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.04); }
+.wc-action { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.04); border-left: 8rpx solid #10B981; }
 .wc-action .wc-name { color: #10B981; }
-.wc-mind { border-color: rgba(255,107,157,0.3); background: rgba(255,107,157,0.04); }
+.wc-mind { border-color: rgba(255,107,157,0.3); background: rgba(255,107,157,0.04); border-left: 8rpx solid #FF6B9D; }
 .wc-mind .wc-name { color: #FF6B9D; }
+</style>

cfc-frontend/pages/health-main/index.vue

@@ -43,54 +43,27 @@
           <text class="self-test-arrow">›</text>
         </view>
       </view>
-      <!-- 登录引导 -->
-      <view class="login-guide-section">
-        <LoginGuideCard
-          title="解锁全家健康数据"
-          :items="[
-            '查看七维雷达图与健康报告AI解读',
-            '完成测评获取个性化健康方案',
-            '每日打卡追踪身体/情绪/认知趋势'
-          ]" />
+      <!-- 数据预览（示例） -->
+      <view class="demo-section">
+        <view class="demo-section-head">
+          <text class="demo-section-title">登录后 · 看懂这些数据</text>
+          <text class="demo-section-sub">示例数据 · 上传报告 / 完成测评后展示真实结果</text>
+        </view>
+        <view class="demo-chart-title-row">
+          <text class="demo-chart-name">🟠 身体七维</text>
+          <text class="demo-chart-tag">示例</text>
+        </view>
+        <RadarChart :dimensions="demoBodyDims" :scores="demoBodyScores" fillColor="#FF8C42" childName="示例" width="560" height="460" />
+        <view class="demo-chart-title-row">
+          <text class="demo-chart-name">🧠 认知雷达</text>
+          <text class="demo-chart-tag">示例</text>
+        </view>
+        <RadarChart :dimensions="demoCogDims" :scores="demoCogScores" fillColor="#6366F1" childName="示例" width="560" height="460" />
       </view>
-
       <!-- 五维健康体系 -->
       <view class="wuxing-section">
-        <view class="wuxing-title">身·心·智·行·富 五维闭环</view>
-        <view class="wuxing-desc">五行相生相克，构成家庭健康的完整生态</view>
-        <view class="wuxing-diagram">
-          <view class="wd-center">
-            <text class="wd-center-text">家庭健康</text>
-            <text class="wd-center-sub">闭环系统</text>
-          </view>
-          <view class="wd-ring">
-            <view class="wd-node wd-body" @click="goPage('/pages/body-detail/index')">
-              <text class="wd-icon">🌏</text>
-              <text class="wd-name">身</text>
-              <text class="wd-desc">主动健康</text>
-            </view>
-            <view class="wd-node wd-wisdom" @click="goPage('/pages/wisdom-detail/index')">
-              <text class="wd-icon">⚡</text>
-              <text class="wd-name">智</text>
-              <text class="wd-desc">赋能未来</text>
-            </view>
-            <view class="wd-node wd-wealth" @click="goPage('/pages/wealth/index')">
-              <text class="wd-icon">💧</text>
-              <text class="wd-name">富</text>
-              <text class="wd-desc">利他创富</text>
-            </view>
-            <view class="wd-node wd-action" @click="goPage('/pages/action-detail/member-action-detail')">
-              <text class="wd-icon">🌿</text>
-              <text class="wd-name">行</text>
-              <text class="wd-desc">人际和谐</text>
-            </view>
-            <view class="wd-node wd-mind" @click="goPage('/pages/mind-detail/index')">
-              <text class="wd-icon">🔥</text>
-              <text class="wd-name">心</text>
-              <text class="wd-desc">大爱相随</text>
-            </view>
-          </view>
-        </view>
+        <view class="wuxing-title">身·心·智·行·富 · 看得见的健康闭环</view>
+        <view class="wuxing-desc">五行相生相克，从报告和测评里，真正读懂家人的身体</view>
         <view class="wuxing-relations">
           <view class="rel-group">
             <text class="rel-title">相生 → 系统前进</text>
@@ -132,37 +105,58 @@
               <text class="rel-op">克</text>
               <text class="rel-item">⚡ 智</text>
             </view>
-            <text class="rel-hint">健康不换来金钱，算计不如真诚，财富服务家庭，关爱有度，大爱留理性</text>
+            <text class="rel-hint">莫以健康换金钱，真诚胜过算计，财富服务家庭，关爱有度、大爱留白</text>
           </view>
         </view>
         <view class="wuxing-cards">
           <view class="wc-card wc-body" @click="goPage('/pages/body-detail/index')">
             <text class="wc-icon">🌏</text>
-            <text class="wc-name">身 · 主动健康</text>
-            <text class="wc-text">用最适合的方法，从根源调理全家体质</text>
+            <view class="wc-info">
+              <text class="wc-name">身 · 主动健康</text>
+              <text class="wc-text">读懂每一份报告，看见全家体质的变化</text>
+            </view>
           </view>
           <view class="wc-card wc-wisdom" @click="goPage('/pages/wisdom-detail/index')">
             <text class="wc-icon">⚡</text>
-            <text class="wc-name">智 · 赋能未来</text>
-            <text class="wc-text">心智测评与综合素质培养，开启下一代大智慧</text>
+            <view class="wc-info">
+              <text class="wc-name">智 · 赋能未来</text>
+              <text class="wc-text">一次测评，看见孩子真实的专注与潜能</text>
+            </view>
           </view>
           <view class="wc-card wc-wealth" @click="goPage('/pages/wealth/index')">
             <text class="wc-icon">💧</text>
-            <text class="wc-name">富 · 利他创富</text>
-            <text class="wc-text">在利他分享中实现家庭第二收入曲线</text>
+            <view class="wc-info">
+              <text class="wc-name">富 · 利他创富</text>
+              <text class="wc-text">看懂健康与财富的关系，明白身体是最大的本钱</text>
+            </view>
           </view>
           <view class="wc-card wc-action" @click="goPage('/pages/action-detail/member-action-detail')">
             <text class="wc-icon">🌿</text>
-            <text class="wc-name">行 · 人际和谐</text>
-            <text class="wc-text">亲子关系·夫妻关系·社交人脉，以和谐滋养幸福</text>
+            <view class="wc-info">
+              <text class="wc-name">行 · 人际和谐</text>
+              <text class="wc-text">看懂关系里的情绪，看见家人真实的需求</text>
+            </view>
           </view>
           <view class="wc-card wc-mind" @click="goPage('/pages/mind-detail/index')">
             <text class="wc-icon">🔥</text>
-            <text class="wc-name">心 · 大爱相随</text>
-            <text class="wc-text">心理学视角解读自我与家人，升华家族纽带</text>
+            <view class="wc-info">
+              <text class="wc-name">心 · 大爱相随</text>
+              <text class="wc-text">读懂情绪的信号，听懂家人没说出口的话</text>
+            </view>
           </view>
         </view>
       </view>
+
+      <!-- 登录引导 -->
+      <view class="login-guide-section">
+        <LoginGuideCard
+          title="解锁全家健康数据"
+          :items="[
+            '查看七维雷达图与健康报告AI解读',
+            '完成测评获取个性化健康方案',
+            '每日打卡追踪身体/情绪/认知趋势'
+          ]" />
+      </view>
     </view>
     <view v-else>
       <PageBanner theme="body" tagline="看见·主动健康闭环" quote="采集→看见→行动" />
@@ -286,7 +280,25 @@ export default {
         { code: 'cognitive', label: '认知能力测评', icon: '🧠', score: null },
         { code: 'mental', label: '心理健康测评', icon: '💖', score: null },
         { code: 'relationship', label: '关系质量测评', icon: '🤝', score: null }
-      ]
+      ],
+      demoBodyDims: [
+        { label: '生长发育', key: 'growth' },
+        { label: '睡眠质量', key: 'sleep' },
+        { label: '视力健康', key: 'vision' },
+        { label: '免疫力', key: 'immunity' },
+        { label: '营养均衡', key: 'nutrition' },
+        { label: '肠胃健康', key: 'gut' },
+        { label: '运动活力', key: 'exercise' }
+      ],
+      demoBodyScores: [72, 68, 75, 80, 70, 78, 82],
+      demoCogDims: [
+        { label: '记忆力', key: 'memory' },
+        { label: '注意力', key: 'attention' },
+        { label: '逻辑推理', key: 'logic' },
+        { label: '空间想象', key: 'spatial' },
+        { label: '语言表达', key: 'language' }
+      ],
+      demoCogScores: [78, 72, 85, 68, 80]
     }
   },
   computed: {
@@ -354,8 +366,6 @@ export default {
     goReportDetail: function(report) {
       uni.navigateTo({ url: '/pages/health/report-list' + (report && report.id ? '?reportId=' + report.id : '') })
     },
-    goSelfTest: function() { uni.navigateTo({ url: '/pages/health/survey-questionnaire?dim=all' }) },
-
     goSelfTest: function() { uni.navigateTo({ url: '/pages/health/survey-questionnaire?dim=all' }) },
     goPlanSummary: function() {
       var url = '/pages/health/health-plan-summary'
@@ -402,7 +412,7 @@ export default {
 </script>
 
 <style scoped>
-.container { background: #F8F8F8; min-height: 100vh; padding-bottom: 120rpx; }
+  .container { background: #F8F8F8; min-height: 100vh; padding-bottom: calc(160rpx + env(safe-area-inset-bottom)); }
 .section { margin: 16rpx 24rpx; }
 .tab-bar { display: flex; background: #fff; margin: 0 24rpx 16rpx; border-radius: 16rpx; padding: 8rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
 .tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12rpx 0; position: relative; border-radius: 12rpx; }
@@ -458,15 +468,14 @@ export default {
 .plan-btn { background: linear-gradient(135deg, #F97316, #FB923C); color: #fff; font-size: 24rpx; border: none; border-radius: 20rpx; padding: 10rpx 28rpx; height: 56rpx; line-height: 36rpx; margin: 0; }
 .plan-goal { font-size: 24rpx; color: #666; line-height: 1.5; display: block; }
 .plan-hint { font-size: 22rpx; color: #999; display: block; }
-</style>
-/* ===== 游客态新增样式 ===== */
+/* ===== 游客态样式 ===== */
 .brand-strap { margin: 0 24rpx 16rpx; background: linear-gradient(135deg, #FFF7ED, rgba(249,115,22,0.08)); border-radius: 16rpx; padding: 20rpx 24rpx; }
 .brand-strap-text { font-size: 26rpx; color: #F97316; font-weight: 600; }
 .pain-card { margin: 0 24rpx 16rpx; background: #fff; border-radius: 20rpx; padding: 28rpx; border-left: 6rpx solid #F97316; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
 .pain-quote { font-size: 32rpx; font-weight: bold; color: #333; display: block; margin-bottom: 8rpx; }
 .pain-desc { font-size: 26rpx; color: #888; display: block; }
-.guest-features { display: flex; flex-wrap: wrap; margin: 0 24rpx 16rpx; }
-.feat-card { width: calc(50% - 12rpx); background: #fff; border-radius: 20rpx; padding: 24rpx 20rpx; margin-bottom: 16rpx; margin-right: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
+.guest-features { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 24rpx 16rpx; }
+.feat-card { width: 48.5%; box-sizing: border-box; background: #fff; border-radius: 20rpx; padding: 24rpx 20rpx; margin-bottom: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
 .feat-icon { font-size: 44rpx; display: block; margin-bottom: 10rpx; }
 .feat-title { font-size: 26rpx; font-weight: 600; color: #333; display: block; margin-bottom: 4rpx; }
 .feat-desc { font-size: 22rpx; color: #999; display: block; }
@@ -477,6 +486,13 @@ export default {
 .self-test-title { font-size: 28rpx; font-weight: bold; color: #fff; display: block; }
 .self-test-sub { font-size: 22rpx; color: rgba(255,255,255,0.8); display: block; margin-top: 4rpx; }
 .self-test-arrow { font-size: 36rpx; color: rgba(255,255,255,0.7); }
+.demo-section { margin: 0 24rpx 16rpx; }
+.demo-section-head { margin-bottom: 8rpx; }
+.demo-section-title { font-size: 30rpx; font-weight: bold; color: #333; display: block; }
+.demo-section-sub { font-size: 22rpx; color: #999; display: block; margin-top: 4rpx; }
+.demo-chart-title-row { display: flex; align-items: center; justify-content: space-between; margin: 8rpx 8rpx 0; padding: 0 8rpx; }
+.demo-chart-name { font-size: 26rpx; font-weight: 600; color: #333; }
+.demo-chart-tag { font-size: 20rpx; color: #F97316; background: rgba(249,115,22,0.1); border-radius: 8rpx; padding: 4rpx 12rpx; }
 .login-guide-section { margin: 0 24rpx 24rpx; }
 
 /* ===== 五维闭环体系样式 ===== */
@@ -484,46 +500,29 @@ export default {
 .wuxing-title { font-size: 30rpx; font-weight: bold; color: #333; text-align: center; margin-bottom: 6rpx; }
 .wuxing-desc { font-size: 22rpx; color: #999; text-align: center; margin-bottom: 20rpx; }
 .wuxing-diagram { position: relative; height: 320rpx; margin: 0 auto 20rpx; }
-.wd-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 140rpx; height: 140rpx; background: linear-gradient(135deg, #F97316, #FB923C); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4rpx 20rpx rgba(249,115,22,0.3); z-index: 2; }
-.wd-center-text { font-size: 24rpx; font-weight: bold; color: #fff; }
-.wd-center-sub { font-size: 18rpx; color: rgba(255,255,255,0.8); margin-top: 2rpx; }
-.wd-ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
-.wd-node { position: absolute; width: 130rpx; text-align: center; cursor: pointer; }
-.wd-node:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
-.wd-node:nth-child(2) { top: 25%; right: 0; }
-.wd-node:nth-child(3) { bottom: 25%; right: 0; }
-.wd-node:nth-child(4) { bottom: 0; left: 50%; transform: translateX(-50%); }
-.wd-node:nth-child(5) { bottom: 25%; left: 0; }
-.wd-icon { font-size: 40rpx; display: block; }
-.wd-name { font-size: 26rpx; font-weight: bold; display: block; margin-top: 4rpx; }
-.wd-desc { font-size: 18rpx; color: #999; display: block; }
-.wd-node.wd-body .wd-name { color: #FF8C42; }
-.wd-node.wd-wisdom .wd-name { color: #6366F1; }
-.wd-node.wd-wealth .wd-name { color: #F59E0B; }
-.wd-node.wd-action .wd-name { color: #10B981; }
-.wd-node.wd-mind .wd-name { color: #FF6B9D; }
 .wuxing-relations { margin-top: 8rpx; }
 .rel-group { margin-bottom: 16rpx; }
 .rel-title { font-size: 24rpx; font-weight: bold; color: #333; margin-bottom: 8rpx; display: block; }
 .rel-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4rpx; margin-bottom: 6rpx; }
-.rel-item { font-size: 22rpx; padding: 4rpx 10rpx; border-radius: 8rpx; background: #f5f5f5; }
+.rel-item { font-size: 22rpx; padding: 4rpx 10rpx; border-radius: 8rpx; background: #f7f7f7; color: #555; }
 .rel-arrow { font-size: 20rpx; color: #F97316; font-weight: bold; }
-.rel-arrow-cl { font-size: 20rpx; color: #f56c6c; font-weight: bold; }
 .rel-dot { font-size: 20rpx; color: #ccc; }
 .rel-hint { font-size: 20rpx; color: #999; line-height: 1.5; display: block; }
 .wuxing-cards { display: flex; flex-direction: column; gap: 10rpx; margin-top: 16rpx; }
 .wc-card { display: flex; align-items: center; padding: 16rpx 20rpx; border-radius: 16rpx; border: 2rpx solid #f0f0f0; }
 .wc-card:active { opacity: 0.85; }
 .wc-icon { font-size: 36rpx; margin-right: 16rpx; flex-shrink: 0; }
-.wc-name { font-size: 24rpx; font-weight: 600; flex: 1; }
-.wc-text { font-size: 20rpx; color: #999; display: block; margin-top: 2rpx; }
-.wc-body { border-color: rgba(255,140,66,0.3); background: rgba(255,140,66,0.04); }
+.wc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.wc-name { font-size: 24rpx; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.wc-text { font-size: 20rpx; color: #999; display: block; margin-top: 4rpx; white-space: normal; }
+.wc-body { border-color: rgba(255,140,66,0.3); background: rgba(255,140,66,0.04); border-left: 8rpx solid #FF8C42; }
 .wc-body .wc-name { color: #FF8C42; }
-.wc-wisdom { border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.04); }
+.wc-wisdom { border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.04); border-left: 8rpx solid #6366F1; }
 .wc-wisdom .wc-name { color: #6366F1; }
-.wc-wealth { border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.04); }
+.wc-wealth { border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.04); border-left: 8rpx solid #F59E0B; }
 .wc-wealth .wc-name { color: #F59E0B; }
-.wc-action { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.04); }
+.wc-action { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.04); border-left: 8rpx solid #10B981; }
 .wc-action .wc-name { color: #10B981; }
-.wc-mind { border-color: rgba(255,107,157,0.3); background: rgba(255,107,157,0.04); }
+.wc-mind { border-color: rgba(255,107,157,0.3); background: rgba(255,107,157,0.04); border-left: 8rpx solid #FF6B9D; }
 .wc-mind .wc-name { color: #FF6B9D; }
+</style>

cfc-frontend/pages/profile-main/profile.vue

@@ -2,12 +2,20 @@
   <view class="container">
 
     <!-- 未登录 -->
-    <view v-if="!isLoggedIn" class="login-prompt">
-      <text class="prompt-icon">👤</text>
-      <text class="prompt-title">登录浠艾福</text>
-      <text class="prompt-desc">登录后查看个人资料、积分记录、能量数据与家庭管理</text>
-      <button class="login-btn" @click="goLogin">登录 / 注册</button>
-      <text class="skip-link" @click="goSkip">暂不登录，先逛逛 ›</text>
+    <view v-if="!isLoggedIn">
+      <view class="login-prompt">
+        <text class="prompt-icon">👤</text>
+        <text class="prompt-title">登录浠艾福</text>
+        <text class="prompt-desc">登录后查看个人资料、积分记录、能量数据与家庭管理</text>
+        <button class="login-btn" @click="goLogin">登录 / 注册</button>
+        <text class="skip-link" @click="goSkip">暂不登录，先逛逛 ›</text>
+      </view>
+
+      <!-- 理念卡 -->
+      <view class="philosophy-card">
+        <text class="philosophy-title">照顾家庭，从照顾好自己开始</text>
+        <text class="philosophy-desc">你的状态，就是家的状态。先安顿好自己，才有余力温暖家人。</text>
+      </view>
     </view>
 
     <!-- 已登录 -->
@@ -637,7 +645,7 @@ export default {
 .container {
   min-height: 100vh;
   background: #f5f7fa;
-  padding-bottom: 120rpx;
+  padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
 }
 
 /* 登录 */
@@ -663,6 +671,26 @@ export default {
   margin-top: 24rpx;
   text-decoration: underline;
 }
+.philosophy-card {
+  margin: 0 40rpx 48rpx;
+  background: linear-gradient(135deg, #fff7ed, rgba(249, 115, 22, 0.06));
+  border-radius: 20rpx;
+  padding: 28rpx 32rpx;
+  border-left: 6rpx solid #F97316;
+}
+.philosophy-title {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333;
+  display: block;
+  margin-bottom: 8rpx;
+}
+.philosophy-desc {
+  font-size: 24rpx;
+  color: #888;
+  line-height: 1.6;
+  display: block;
+}
 
 /* 退出切换 */
 .exit-switch {