refactor(ECR-001): Phase F types/sdk 对齐并拆分超标 H5 页

抽出 OpenAPI DTO；将 Ask/Report/Profile/Star 等 8 页拆到 ≤400 行，并修 ScaleSummary、fortuneKey、Scale 选答与单测。

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

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

@@ -9,21 +9,15 @@
     </template>
 
     <div class="body">
-      <template v-if="needBirth && !report">
-        <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="cta" type="button" :disabled="loading" @click="start">
-            {{ loading ? '生成中…' : '生成我的节律' }}
-          </button>
-          <p v-if="error" class="yxg-err">{{ error }}</p>
-        </div>
-      </template>
+      <RhythmIntro
+        v-if="needBirth && !report"
+        v-model:year="year"
+        v-model:month="month"
+        v-model:day="day"
+        :loading="loading"
+        :error="error"
+        @start="start"
+      />
 
       <p v-else-if="loading" class="yxg-hint">正在生成节律…</p>
       <p v-else-if="error && !report" class="yxg-err">
@@ -31,78 +25,23 @@
         <button type="button" class="yxg-link" @click="load">重试</button>
       </p>
 
-      <template v-else-if="report">
-        <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>
-      </template>
+      <RhythmResult
+        v-else-if="report"
+        v-model:tab="tab"
+        :headline="headline"
+        :one-liner="oneLiner"
+        :style-label="styleLabel"
+        :overview-text="overviewText"
+        :week-focus="weekFocus"
+        :keywords="keywords"
+        :solar-tip="solarTip"
+        :wuxing-bars="wuxingBars"
+        :summary="summary"
+        :detail="detail"
+        :report="report"
+        :paying="paying"
+        @buy-deep="buyDeep"
+      />
 
       <p class="yxg-disc">本内容为自我探索与生活方式参考，不构成医疗建议，亦非占卜预测。</p>
     </div>
@@ -110,148 +49,36 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
-import type { GrowthReport } from '@yuxingu/types'
-import { validateBirth } from '@yuxingu/utils'
-import { api } from '../api/client'
 import BackButton from '../components/BackButton.vue'
-import BirthDateInputs from '../components/BirthDateInputs.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'
+import RhythmIntro from '../components/rhythm/RhythmIntro.vue'
+import RhythmResult from '../components/rhythm/RhythmResult.vue'
+import { useLifeRhythmPage } from '../composables/useLifeRhythmPage'
 
-const route = useRoute()
-const loading = ref(false)
-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
-  error.value = ''
-  needBirth.value = false
-  try {
-    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 : '加载失败'
-    needBirth.value = true
-  } finally {
-    loading.value = false
-  }
-}
-
-async function start() {
-  const y = Number(year.value)
-  const m = Number(month.value)
-  const d = Number(day.value)
-  const msg = validateBirth(y, m, d)
-  if (msg) {
-    error.value = msg
-    return
-  }
-  await generate(y, m, d)
-}
-
-async function load() {
-  const reportId = String(route.query.report_id || '')
-  if (reportId) {
-    loading.value = true
-    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
-    }
-    return
-  }
-  const y = Number(route.query.y)
-  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)
-  }
-}
-
-async function buyDeep() {
-  if (!report.value) return
-  paying.value = true
-  error.value = ''
-  track(AnalyticsEvent.DeepAccessClicked, { surface: 'rhythm' })
-  try {
-    const { order_id } = await api.createOrder({ kind: 'deep_access', report_id: report.value.id })
-    await api.payMock(order_id)
-    report.value = await api.getReport(report.value.id)
-    track(AnalyticsEvent.PurchaseCompleted, { kind: 'deep_access' })
-  } catch (e) {
-    error.value = e instanceof Error ? e.message : '支付失败'
-  } finally {
-    paying.value = false
-  }
-}
-
-onMounted(load)
+const {
+  loading,
+  needBirth,
+  error,
+  report,
+  paying,
+  tab,
+  year,
+  month,
+  day,
+  summary,
+  detail,
+  headline,
+  oneLiner,
+  styleLabel,
+  overviewText,
+  weekFocus,
+  keywords,
+  solarTip,
+  wuxingBars,
+  start,
+  load,
+  buyDeep,
+} = useLifeRhythmPage()
 </script>
 
 <style scoped>
@@ -270,150 +97,4 @@ onMounted(load)
 }
 .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>