feat: 按测测功能重构 H5 首页与各子页，并修正顶栏「+」添加档案菜单

对齐测测交互：首页「+」支持邀请填档案/添加档案/邀请合盘；各 Tab 与工具页按同一视觉与功能标准落地；本地对照截图目录显式忽略。

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/user-h5/src/pages/LifeRhythmPage.vue

@@ -1,36 +1,112 @@
 <template>
-  <main class="yxg-page">
-    <div class="yxg-hero">
-      <BackButton />
-      <PageTitle feature="rhythm" title="身心节律" :sub="needBirth && !report ? '填写生日，生成身心节律生活建议' : undefined" />
-    </div>
-    <div class="yxg-sheet sheet-pad">
+  <PageShell>
+    <template #hero>
+      <div class="top-row">
+        <BackButton />
+        <span class="who-static">身心节律</span>
+        <span class="spacer" />
+      </div>
+    </template>
+
+    <div class="body">
       <template v-if="needBirth && !report">
-        <div class="yxg-card">
+        <div class="intro-card">
+          <HomeToolIcon name="rhythm" :size="64" />
+          <h1 class="intro-title">身心节律</h1>
+          <p class="intro-sub">填写生日，看见作息 · 饮食 · 活动的节奏建议（生活方式参考，非算命）</p>
+        </div>
+        <div class="yxg-card form-card">
+          <label class="yxg-label">生日</label>
           <BirthDateInputs v-model:year="year" v-model:month="month" v-model:day="day" />
-          <button class="yxg-btn yxg-btn-block mt" type="button" :disabled="loading" @click="start">开始</button>
+          <button class="cta" type="button" :disabled="loading" @click="start">
+            {{ loading ? '生成中…' : '生成我的节律' }}
+          </button>
           <p v-if="error" class="yxg-err">{{ error }}</p>
         </div>
       </template>
-      <p v-else-if="loading" class="yxg-hint">正在生成…</p>
-      <p v-else-if="error" class="yxg-err">
+
+      <p v-else-if="loading" class="yxg-hint">正在生成节律…</p>
+      <p v-else-if="error && !report" class="yxg-err">
         {{ error }}
         <button type="button" class="yxg-link" @click="load">重试</button>
       </p>
+
       <template v-else-if="report">
-        <p class="yxg-meta head">{{ headline }}</p>
-        <p v-if="oneLiner" class="yxg-lead">{{ oneLiner }}</p>
-        <ReportRich :summary="summary" :detail="detail" :deep="!!report.has_deep_access" />
-        <div v-if="!report.has_deep_access" class="yxg-card lock">
-          <p>完整节律建议与练习可在深度版或成长会员中查看。</p>
-          <button class="yxg-btn" type="button" :disabled="paying" @click="buyDeep">查看深度版（模拟支付）</button>
+        <div class="mode-tabs" role="tablist">
+          <button
+            v-for="t in resultTabs"
+            :key="t.key"
+            type="button"
+            class="mode-tab"
+            :class="{ on: tab === t.key }"
+            @click="tab = t.key"
+          >
+            {{ t.label }}
+          </button>
+        </div>
+
+        <template v-if="tab === 'overview'">
+          <h2 class="hl">{{ headline || '我的身心节律' }}</h2>
+          <p v-if="oneLiner" class="lead">{{ oneLiner }}</p>
+          <div v-if="keywords.length" class="tags">
+            <span v-for="k in keywords" :key="k" class="tag">{{ k }}</span>
+          </div>
+          <div v-if="styleLabel" class="spotlight">
+            <strong>节律倾向</strong>
+            <p>{{ styleLabel }}</p>
+          </div>
+          <p v-if="overviewText" class="overview">{{ overviewText }}</p>
+        </template>
+
+        <template v-else-if="tab === 'wuxing'">
+          <WuxingBars v-if="wuxingBars.length" :bars="wuxingBars" />
+          <div v-else class="empty-soft">
+            <HomeToolIcon name="rhythm" :size="48" />
+            <p>暂无五行分布数据，可从概览与建议了解节律倾向。</p>
+          </div>
+          <ReportRich :summary="summary" :detail="null" :deep="false" />
+        </template>
+
+        <template v-else-if="tab === 'tips'">
+          <ReportRich :summary="summary" :detail="detail" :deep="!!report.has_deep_access" />
+          <div v-if="!report.has_deep_access" class="lock-card">
+            <p>完整习惯方案与本周练习可在深度版或成长会员中查看。</p>
+            <button class="cta soft" type="button" :disabled="paying" @click="buyDeep">解锁深度版</button>
+          </div>
+        </template>
+
+        <template v-else>
+          <router-link class="term-card" to="/companion">
+            <div class="term-ico" aria-hidden="true">
+              <HomeToolIcon name="companion" :size="40" />
+            </div>
+            <div class="term-body">
+              <strong>节气生活陪伴</strong>
+              <p>{{ solarTip || '结合当季节气，微调作息与饮食节奏。' }}</p>
+            </div>
+            <span class="term-go" aria-hidden="true">›</span>
+          </router-link>
+          <p v-if="weekFocus" class="focus-tip">本周关注：{{ weekFocus }}</p>
+        </template>
+
+        <div class="sticky-bar">
+          <router-link class="sb-btn primary" to="/companion">去节气陪伴</router-link>
+          <button
+            v-if="!report.has_deep_access"
+            class="sb-btn"
+            type="button"
+            :disabled="paying"
+            @click="buyDeep"
+          >
+            解锁深度
+          </button>
+          <router-link class="sb-btn" to="/ask">去问答</router-link>
         </div>
-        <router-link class="yxg-link-plain report-link" to="/companion">查看今日节气陪伴 →</router-link>
-        <router-link v-if="report.id" class="yxg-link-plain report-link" :to="`/reports/${report.id}`">在报告页打开 →</router-link>
       </template>
+
       <p class="yxg-disc">本内容为自我探索与生活方式参考，不构成医疗建议，亦非占卜预测。</p>
     </div>
-  </main>
+  </PageShell>
 </template>
 
 <script setup lang="ts">
@@ -41,8 +117,10 @@ import { validateBirth } from '@yuxingu/utils'
 import { api } from '../api/client'
 import BackButton from '../components/BackButton.vue'
 import BirthDateInputs from '../components/BirthDateInputs.vue'
-import PageTitle from '../components/PageTitle.vue'
+import HomeToolIcon from '../components/HomeToolIcon.vue'
+import PageShell from '../components/PageShell.vue'
 import ReportRich from '../components/ReportRich.vue'
+import WuxingBars, { type WuxingBar } from '../components/WuxingBars.vue'
 import { AnalyticsEvent, track } from '../lib/analytics'
 
 const route = useRoute()
@@ -51,14 +129,53 @@ const needBirth = ref(true)
 const error = ref('')
 const report = ref<GrowthReport | null>(null)
 const paying = ref(false)
+const tab = ref<'overview' | 'wuxing' | 'tips' | 'term'>('overview')
 const year = ref(String(route.query.y || ''))
 const month = ref(String(route.query.m || ''))
 const day = ref(String(route.query.d || ''))
 
+const resultTabs = [
+  { key: 'overview' as const, label: '概览' },
+  { key: 'wuxing' as const, label: '五行' },
+  { key: 'tips' as const, label: '建议' },
+  { key: 'term' as const, label: '节气' },
+]
+
 const summary = computed(() => (report.value?.summary || {}) as Record<string, unknown>)
 const detail = computed(() => (report.value?.detail || null) as Record<string, unknown> | null)
 const headline = computed(() => String(summary.value.headline || ''))
 const oneLiner = computed(() => String(summary.value.one_liner || ''))
+const styleLabel = computed(() => String(summary.value.style_label || ''))
+const overviewText = computed(() => String(summary.value.overview || ''))
+const weekFocus = computed(() => String(summary.value.week_focus || ''))
+const keywords = computed(() =>
+  Array.isArray(summary.value.keywords) ? (summary.value.keywords as string[]) : [],
+)
+const solarTip = computed(() => {
+  const st = summary.value.solar_term
+  if (st && typeof st === 'object') {
+    const tip = (st as Record<string, unknown>).tip
+    if (tip) return String(tip)
+  }
+  return String(summary.value.today_tip || summary.value.life_tip || '')
+})
+
+const wuxingBars = computed((): WuxingBar[] => {
+  const wx = summary.value.wuxing
+  if (!wx || typeof wx !== 'object') return []
+  const bars = (wx as Record<string, unknown>).bars
+  if (!Array.isArray(bars)) return []
+  return bars
+    .map((b) => {
+      const o = b as Record<string, unknown>
+      return {
+        el: String(o.el || o.element || ''),
+        pct: Number(o.pct ?? o.score ?? 0),
+        color: String(o.color || '#E54D42'),
+      }
+    })
+    .filter((b) => b.el)
+})
 
 async function generate(y: number, m: number, d: number) {
   loading.value = true
@@ -68,6 +185,7 @@ async function generate(y: number, m: number, d: number) {
     const birth = `${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`
     const profile = await api.createProfile({ relation: 'self', birth_date: birth, display_name: '我' })
     report.value = await api.createRhythm(profile.id)
+    tab.value = 'overview'
     track(AnalyticsEvent.PortraitCompleted, { source: 'rhythm' })
   } catch (e) {
     error.value = e instanceof Error ? e.message : '加载失败'
@@ -96,8 +214,10 @@ async function load() {
     needBirth.value = false
     try {
       report.value = await api.getReport(reportId)
+      tab.value = 'overview'
     } catch (e) {
       error.value = e instanceof Error ? e.message : '加载失败'
+      needBirth.value = true
     } finally {
       loading.value = false
     }
@@ -107,6 +227,9 @@ async function load() {
   const m = Number(route.query.m)
   const d = Number(route.query.d)
   if (y && m && d && !validateBirth(y, m, d)) {
+    year.value = String(y)
+    month.value = String(m)
+    day.value = String(d)
     await generate(y, m, d)
   }
 }
@@ -132,9 +255,165 @@ onMounted(load)
 </script>
 
 <style scoped>
-.yxg-card{margin:8px 0 12px}
-.mt{margin-top:14px}
-.head{margin:4px 0 8px;font-size:13px}
-.lock .yxg-btn{margin-top:12px;width:100%}
-.report-link{display:block;margin-top:12px}
+.top-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-bottom: 4px;
+}
+.who-static {
+  flex: 1;
+  font-size: 16px;
+  font-weight: 700;
+  text-align: center;
+  color: var(--color-text-primary);
+}
+.spacer { width: 36px; }
+.body { padding: 8px 16px 88px; }
+.intro-card { text-align: center; padding: 20px 12px 8px; }
+.intro-title {
+  font-family: var(--font-display);
+  font-size: 24px;
+  font-weight: 700;
+  margin-top: 8px;
+  letter-spacing: 0.08em;
+}
+.intro-sub { font-size: 13px; color: #888; margin-top: 6px; line-height: 1.5; }
+.form-card { margin-top: 12px; }
+.cta {
+  margin-top: 14px;
+  width: 100%;
+  padding: 13px;
+  border: none;
+  border-radius: 22px;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 600;
+  background: linear-gradient(135deg, #ff7a6e, var(--color-primary));
+  box-shadow: 0 6px 16px rgba(229, 77, 66, 0.28);
+}
+.cta.soft {
+  background: #fff;
+  color: var(--color-primary);
+  border: 1.5px solid #f5c4bc;
+  box-shadow: none;
+}
+.cta:disabled { opacity: 0.45; }
+.mode-tabs {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 14px;
+  background: #fafafa;
+  border-radius: var(--radius-pill);
+  padding: 4px;
+}
+.mode-tab {
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 9px 4px;
+  border-radius: var(--radius-pill);
+  font-size: 13px;
+  color: #888;
+  font-weight: 600;
+}
+.mode-tab.on {
+  background: #fff;
+  color: var(--color-primary);
+  box-shadow: 0 2px 8px rgba(229, 77, 66, 0.1);
+}
+.hl {
+  font-family: var(--font-display);
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.35;
+  color: #222;
+}
+.lead { margin-top: 8px; font-size: 13px; color: #777; line-height: 1.55; }
+.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
+.tag {
+  font-size: 11px;
+  padding: 4px 10px;
+  border-radius: var(--radius-pill);
+  background: rgba(255, 255, 255, 0.8);
+  color: #8a4a3a;
+  font-weight: 600;
+  border: 1px solid #f5e8e4;
+}
+.spotlight {
+  margin-top: 14px;
+  padding: 14px;
+  border-radius: var(--radius-xl);
+  background: linear-gradient(145deg, #fff0ec, #ffe4dc);
+  box-shadow: var(--shadow-card);
+}
+.spotlight strong { font-size: 14px; color: #222; }
+.spotlight p { margin-top: 6px; font-size: 13px; color: #666; line-height: 1.5; }
+.overview { margin-top: 12px; font-size: 13px; color: #555; line-height: 1.65; }
+.empty-soft {
+  text-align: center;
+  padding: 24px 16px;
+  border-radius: var(--radius-xl);
+  background: #fafafa;
+  color: #999;
+  font-size: 13px;
+  line-height: 1.5;
+  margin-bottom: 12px;
+}
+.empty-soft p { margin-top: 10px; }
+.lock-card {
+  margin-top: 12px;
+  padding: 16px;
+  background: linear-gradient(145deg, #fff8e8, #ffeec8);
+  border-radius: var(--radius-xl);
+}
+.term-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  border-radius: var(--radius-xl);
+  background: linear-gradient(145deg, #fff0ec, #ffe4dc);
+  box-shadow: var(--shadow-card);
+  color: inherit;
+}
+.term-body { flex: 1; min-width: 0; }
+.term-body strong { font-size: 15px; color: #222; }
+.term-body p { margin-top: 4px; font-size: 12px; color: #666; line-height: 1.45; }
+.term-go { font-size: 20px; color: var(--color-primary); }
+.focus-tip { margin-top: 12px; font-size: 13px; color: #888; }
+.sticky-bar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 20;
+  display: flex;
+  gap: 8px;
+  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(12px);
+  border-top: 1px solid #f0ebe8;
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
+}
+.sb-btn {
+  flex: 1;
+  padding: 11px 8px;
+  border-radius: 22px;
+  border: 1.5px solid #f0ebe8;
+  background: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  color: #555;
+  text-align: center;
+  text-decoration: none;
+}
+.sb-btn.primary {
+  background: linear-gradient(135deg, #ff7a6e, var(--color-primary));
+  color: #fff;
+  border: none;
+  box-shadow: 0 4px 12px rgba(229, 77, 66, 0.25);
+}
+.sb-btn:disabled { opacity: 0.45; }
+.yxg-label { display: block; margin-bottom: 8px; font-size: 12px; color: #999; }
 </style>