From 00fc7f82b92d06a161398ffb6483b641bdab851f Mon Sep 17 00:00:00 2001
From: jackyu66git <jackyu666@icloud.com>
Date: Wed, 5 Aug 2026 22:38:32 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ECR-005):=20=E5=86=8D=E6=8B=86=20Ask/D?=
 =?UTF-8?q?ecode/Portrait=20=E4=B8=8E=20composable=EF=BC=8C=E8=A1=A5?=
 =?UTF-8?q?=E5=BC=BA=20OpenAPI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

压低贴线 SFC/composable；报告/档案/量表/意象卡 path 挂 Envelope $ref；CI ESS 门禁跟到 ECR-005。

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .github/workflows/ci.yml                      |  12 +-
 apps/user-h5/src/components/DecodePanel.vue   | 386 +++---------------
 apps/user-h5/src/components/ask/AskAiPane.vue | 311 ++------------
 .../src/components/ask/AskComposer.vue        |  95 +++++
 apps/user-h5/src/components/ask/AskEmpty.vue  |  41 ++
 apps/user-h5/src/components/ask/AskGreet.vue  |  97 +++++
 .../src/components/ask/AskMessageList.vue     |  63 +++
 .../src/components/ask/AskProfileBar.vue      |  87 ++++
 .../decode/DecodeConstitutionCard.vue         | 101 +++++
 .../src/components/decode/DecodeDeepExtra.vue |  80 ++++
 .../components/decode/DecodeNumberCard.vue    | 132 ++++++
 .../src/components/decode/DecodeSolarTip.vue  |  58 +++
 .../src/composables/profilePageActions.ts     | 263 ++++++++++++
 .../user-h5/src/composables/useDecodePanel.ts | 128 ++++++
 .../src/composables/usePortraitPage.ts        | 146 +++++++
 .../user-h5/src/composables/useProfilePage.ts | 260 +++---------
 apps/user-h5/src/composables/useReportPage.ts | 243 +++--------
 .../src/composables/useStarProfilePage.ts     | 154 ++-----
 apps/user-h5/src/lib/reportSummary.ts         | 181 ++++++++
 apps/user-h5/src/lib/starSummary.ts           | 119 ++++++
 apps/user-h5/src/pages/PortraitPage.vue       | 142 +------
 docs/CHANGELOG.md                             |   1 +
 docs/CODE_REVIEW/ECR-005.md                   |   6 +
 docs/ECR/ECR-005-h5-openapi-hygiene.md        |  23 ++
 .../ECR-005-h5-openapi-hygiene.md             |   3 +
 docs/PROJECT_PROFILE.md                       |   4 +-
 docs/STATE/ECR-005.md                         |   7 +
 docs/TASKS/TASK-20260805-ECR005.yaml          |  23 ++
 docs/TEST_REPORT/ECR-005.md                   |   9 +
 docs/TRACEABILITY.md                          |   1 +
 proto/openapi.yaml                            |  92 ++++-
 31 files changed, 2017 insertions(+), 1251 deletions(-)
 create mode 100644 apps/user-h5/src/components/ask/AskComposer.vue
 create mode 100644 apps/user-h5/src/components/ask/AskEmpty.vue
 create mode 100644 apps/user-h5/src/components/ask/AskGreet.vue
 create mode 100644 apps/user-h5/src/components/ask/AskMessageList.vue
 create mode 100644 apps/user-h5/src/components/ask/AskProfileBar.vue
 create mode 100644 apps/user-h5/src/components/decode/DecodeConstitutionCard.vue
 create mode 100644 apps/user-h5/src/components/decode/DecodeDeepExtra.vue
 create mode 100644 apps/user-h5/src/components/decode/DecodeNumberCard.vue
 create mode 100644 apps/user-h5/src/components/decode/DecodeSolarTip.vue
 create mode 100644 apps/user-h5/src/composables/profilePageActions.ts
 create mode 100644 apps/user-h5/src/composables/useDecodePanel.ts
 create mode 100644 apps/user-h5/src/composables/usePortraitPage.ts
 create mode 100644 apps/user-h5/src/lib/reportSummary.ts
 create mode 100644 apps/user-h5/src/lib/starSummary.ts
 create mode 100644 docs/CODE_REVIEW/ECR-005.md
 create mode 100644 docs/ECR/ECR-005-h5-openapi-hygiene.md
 create mode 100644 docs/ENGINEERING_SPEC/ECR-005-h5-openapi-hygiene.md
 create mode 100644 docs/STATE/ECR-005.md
 create mode 100644 docs/TASKS/TASK-20260805-ECR005.yaml
 create mode 100644 docs/TEST_REPORT/ECR-005.md

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 28bd7a2..65ad0a4 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -40,19 +40,19 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - name: ESS artifact presence (ECR-004)
+      - name: ESS artifact presence (active ECR)
         run: |
-          test -f docs/ECR/ECR-004-hygiene-followup.md
-          test -f docs/TASKS/TASK-20260805-ECR004.yaml
-          test -f docs/TEST_REPORT/ECR-004.md
-          test -f docs/STATE/ECR-004.md
+          test -f docs/ECR/ECR-005-h5-openapi-hygiene.md
+          test -f docs/TASKS/TASK-20260805-ECR005.yaml
+          test -f docs/TEST_REPORT/ECR-005.md
+          test -f docs/STATE/ECR-005.md
           echo "ESS docs gate OK"
       - name: ess-validate when ESS_ROOT available
         env:
           ESS_ROOT: ${{ vars.ESS_ROOT }}
         run: |
           if [ -n "$ESS_ROOT" ] && [ -f "$ESS_ROOT/scripts/ess-validate.py" ]; then
-            python scripts/ess-validate.py --phase coding --ecr ECR-004 --task docs/TASKS/TASK-20260805-ECR004.yaml
+            python scripts/ess-validate.py --phase coding --ecr ECR-005 --task docs/TASKS/TASK-20260805-ECR005.yaml
           else
             echo "ESS_ROOT not configured in CI — skipped full ess-validate"
           fi
diff --git a/apps/user-h5/src/components/DecodePanel.vue b/apps/user-h5/src/components/DecodePanel.vue
index 4ea15b4..c5f001f 100644
--- a/apps/user-h5/src/components/DecodePanel.vue
+++ b/apps/user-h5/src/components/DecodePanel.vue
@@ -3,111 +3,52 @@
     <p v-if="!hasDecodeShape && oneLiner" class="legacy-note">
       {{ personTitle ? `${personTitle} · ` : '' }}{{ oneLiner }}
     </p>
-    <!-- 数字性格 -->
-    <section class="card">
-      <span class="tag tag-num">数字性格密码</span>
-      <div class="hex">{{ mainNumber }}</div>
-      <div class="p-title">
-        <template v-if="mainNumber !== '—'">{{ mainNumber }}号人 · </template>{{ personTitle || '愈心解码' }}
-      </div>
-      <div v-if="oneLiner" class="p-oneline">{{ oneLiner }}</div>
-      <div v-if="hasPyramid" class="pyr-wrap">
-        <NumberPyramid :pyramid="pyramid" />
-      </div>
-      <PayLock
-        :unlocked="deep"
-        :paying="paying"
-        title="解锁你的完整密码"
-        desc="天赋优势 · 人生课题 · 适合方向 · 联合码深度解读"
-        @unlock="$emit('unlock')"
-      >
-        <template v-if="deep && numberDeep.talent">
-          <p><b>天赋优势：</b>{{ numberDeep.talent }}</p>
-          <p><b>人生课题：</b>{{ numberDeep.topic }}</p>
-          <p><b>适合方向：</b>{{ numberDeep.direction }}</p>
-          <p><b>能量解读：</b>{{ numberDeep.desc }}</p>
-        </template>
-        <p v-else>{{ lockTeaserNumber }}</p>
-        <template v-if="deep && missing.length">
-          <p class="sub-h">缺失数字</p>
-          <p v-for="m in missing" :key="'m' + m.n">· 缺{{ m.n }}：{{ m.msg }}</p>
-        </template>
-        <template v-if="deep && joints.length">
-          <p class="sub-h">联合码分组</p>
-          <div v-for="(g, i) in joints" :key="'j' + i" class="joint">
-            <strong>{{ g.label }}</strong>
-            <p class="muted">{{ g.desc }}</p>
-            <p v-for="(c, j) in g.codes || []" :key="'c' + j" class="muted">
-              {{ c.code }} · {{ c.label }}
-            </p>
-          </div>
-        </template>
-      </PayLock>
-    </section>
-
-    <!-- 五行体质 -->
-    <section class="card">
-      <span class="tag tag-ys">五行体质画像</span>
-      <div class="ys-type">{{ wuxing.primary || '—' }}</div>
-      <div class="ys-dir">核心养护：{{ wuxing.care_dir || careDir }}</div>
-      <WuxingBars v-if="bars.length" :bars="bars" />
-      <div v-if="emotionText" class="p-oneline">情绪画像：{{ emotionText }}</div>
-      <PayLock
-        :unlocked="deep"
-        :paying="paying"
-        title="解锁五行体质深度分析"
-        desc="脏腑画像 · 易感倾向 · 食疗 · 运动作息方案"
-        @unlock="$emit('unlock')"
-      >
-        <template v-if="deep && constitutionDeep.body">
-          <p><b>体质特征：</b>{{ constitutionDeep.body }}</p>
-          <p><b>调养要点：</b>{{ constitutionDeep.tips }}</p>
-          <p><b>易感倾向：</b>{{ constitutionDeep.risk }}</p>
-          <p><b>季节风险：</b>{{ constitutionDeep.season_risk }}</p>
-          <p><b>食疗方向：</b>{{ constitutionDeep.food }}</p>
-          <p><b>作息节律：</b>{{ constitutionDeep.rhythm }}</p>
-        </template>
-        <p v-else>{{ lockTeaserWuxing }}</p>
-      </PayLock>
-      <p class="disc-mini">{{ constitutionDisclaimer }}</p>
-    </section>
-
-    <!-- 今日锦囊（始终免费） -->
-    <section class="card jn">
-      <span class="tag tag-ys">今日养生锦囊</span>
-      <div class="st">
-        当前节气：{{ todayTip.solar_term || '—' }}
-        <template v-if="todayTip.season_el"> · 时令 {{ todayTip.season_el }} 当令</template>
-      </div>
-      <h4>今日调养建议</h4>
-      <div class="row"><b>宜：</b>{{ todayTip.yi || '—' }}</div>
-      <div class="row"><b>忌：</b>{{ todayTip.ji || '—' }}</div>
-    </section>
-
-    <div class="deep-links">
-      <button type="button" class="d-num" @click="showDeepExtra = !showDeepExtra">
-        {{ showDeepExtra ? '收起数字深解' : '完整数字报告' }} →
-      </button>
-      <router-link class="d-ys" to="/relation">测测契合度 →</router-link>
-    </div>
-    <div v-if="showDeepExtra && deep" class="card extra">
-      <p class="muted">主数 {{ mainNumber }} · {{ personTitle }} · 五行 {{ numberDeep.elem }}</p>
-      <p>{{ numberDeep.desc }}</p>
-    </div>
-    <div v-else-if="showDeepExtra && !deep" class="card extra">
-      <p class="muted">解锁深度版后可展开完整数字能量与联合码解读。</p>
-      <button type="button" class="yxg-btn" :disabled="paying" @click="$emit('unlock')">
-        解锁完整分析（模拟支付）
-      </button>
-    </div>
+    <DecodeNumberCard
+      :main-number="mainNumber"
+      :person-title="personTitle"
+      :one-liner="oneLiner"
+      :has-pyramid="hasPyramid"
+      :pyramid="pyramid"
+      :deep="deep"
+      :paying="paying"
+      :lock-teaser="lockTeaserNumber"
+      :number-deep="numberDeep"
+      :missing="missing"
+      :joints="joints"
+      @unlock="$emit('unlock')"
+    />
+    <DecodeConstitutionCard
+      :primary="wuxing.primary"
+      :care-dir="wuxing.care_dir ? String(wuxing.care_dir) : careDir"
+      :bars="bars"
+      :emotion-text="emotionText"
+      :deep="deep"
+      :paying="paying"
+      :lock-teaser="lockTeaserWuxing"
+      :disclaimer="constitutionDisclaimer"
+      :constitution-deep="constitutionDeep"
+      @unlock="$emit('unlock')"
+    />
+    <DecodeSolarTip :tip="todayTip" />
+    <DecodeDeepExtra
+      :deep="deep"
+      :paying="paying"
+      :main-number="mainNumber"
+      :person-title="personTitle"
+      :elem="numberDeep.elem"
+      :desc="numberDeep.desc"
+      @unlock="$emit('unlock')"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import NumberPyramid from './NumberPyramid.vue'
-import PayLock from './PayLock.vue'
-import WuxingBars, { type WuxingBar } from './WuxingBars.vue'
+import { toRef } from 'vue'
+import DecodeConstitutionCard from './decode/DecodeConstitutionCard.vue'
+import DecodeDeepExtra from './decode/DecodeDeepExtra.vue'
+import DecodeNumberCard from './decode/DecodeNumberCard.vue'
+import DecodeSolarTip from './decode/DecodeSolarTip.vue'
+import { useDecodePanel } from '../composables/useDecodePanel'
 
 const props = defineProps<{
   summary: Record<string, unknown>
@@ -118,100 +59,26 @@ const props = defineProps<{
 
 defineEmits<{ unlock: [] }>()
 
-const showDeepExtra = ref(false)
-
-const mainNumber = computed(() => {
-  const n = Number(props.summary.main_number)
-  if (Number.isFinite(n) && n > 0) return n
-  const pk = Number(props.summary.pattern_key)
-  if (Number.isFinite(pk) && pk > 0) return pk
-  return '—'
-})
-const personTitle = computed(() =>
-  String(props.summary.person_title || props.summary.style_label || props.summary.style_badge || ''),
-)
-const oneLiner = computed(() =>
-  String(props.summary.one_liner || props.summary.headline || props.summary.overview || ''),
-)
-const pyramid = computed(() => (props.summary.pyramid || {}) as Record<string, number>)
-const hasPyramid = computed(() => Object.keys(pyramid.value).length > 0)
-const hasDecodeShape = computed(
-  () => props.summary.main_number != null || props.summary.pyramid != null || props.summary.wuxing != null,
-)
-
-const wuxing = computed(() => (props.summary.wuxing || {}) as Record<string, unknown>)
-const bars = computed<WuxingBar[]>(() => {
-  const raw = wuxing.value.bars
-  if (!Array.isArray(raw)) return []
-  return raw.map((b) => {
-    const o = b as Record<string, unknown>
-    return { el: String(o.el || ''), pct: Number(o.pct || 0), color: String(o.color || '#999') }
-  })
-})
-const careDir = computed(() => {
-  const s = wuxing.value.strong
-  const w = wuxing.value.weak
-  if (s && w) return `养${s} · 需呵护${w}`
-  return '—'
-})
-const emotionText = computed(() => {
-  const e = wuxing.value.emotion
-  return Array.isArray(e) ? e.join(' · ') : ''
-})
-
-const todayTip = computed(() => (props.summary.today_tip || {}) as Record<string, string>)
-const constitutionDisclaimer = computed(
-  () =>
-    String(props.summary.disclaimer_constitution || '') ||
-    '体质与调养内容为生活方式参考，非医疗建议。',
-)
-const lockTeaserNumber = computed(
-  () =>
-    String(props.summary.lock_teaser_number || '') ||
-    '天赋优势与人生课题、适合方向与能量长文，解锁后查看。',
-)
-const lockTeaserWuxing = computed(
-  () =>
-    String(props.summary.lock_teaser_wuxing || '') ||
-    '体质特征、调养要点、易感倾向、食疗与作息节律，解锁后查看。',
-)
-
-const numberDeep = computed(() => {
-  const d = (props.detail?.number_deep || {}) as Record<string, unknown>
-  return {
-    talent: String(d.talent || ''),
-    topic: String(d.topic || ''),
-    direction: String(d.direction || ''),
-    desc: String(d.desc || ''),
-    elem: String(d.elem || ''),
-  }
-})
-const constitutionDeep = computed(() => {
-  const d = (props.detail?.constitution_deep || {}) as Record<string, unknown>
-  return {
-    body: String(d.body || ''),
-    tips: String(d.tips || ''),
-    risk: String(d.risk || ''),
-    season_risk: String(d.season_risk || ''),
-    food: String(d.food || ''),
-    rhythm: String(d.rhythm || ''),
-  }
-})
-const missing = computed(() => {
-  const d = (props.detail?.number_deep || {}) as Record<string, unknown>
-  const arr = d.missing
-  if (!Array.isArray(arr)) return [] as { n: number; msg: string }[]
-  return arr.map((x) => {
-    const o = x as Record<string, unknown>
-    return { n: Number(o.n), msg: String(o.msg || '') }
-  })
-})
-const joints = computed(() => {
-  const d = (props.detail?.number_deep || {}) as Record<string, unknown>
-  const arr = d.joints
-  if (!Array.isArray(arr)) return [] as { label: string; desc: string; codes: { code: string; label: string }[] }[]
-  return arr as { label: string; desc: string; codes: { code: string; label: string }[] }[]
-})
+const {
+  mainNumber,
+  personTitle,
+  oneLiner,
+  pyramid,
+  hasPyramid,
+  hasDecodeShape,
+  wuxing,
+  bars,
+  careDir,
+  emotionText,
+  todayTip,
+  constitutionDisclaimer,
+  lockTeaserNumber,
+  lockTeaserWuxing,
+  numberDeep,
+  constitutionDeep,
+  missing,
+  joints,
+} = useDecodePanel(toRef(props, 'summary'), toRef(props, 'detail'))
 </script>
 
 <style scoped>
@@ -232,133 +99,4 @@ const joints = computed(() => {
   border-radius: 14px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
 }
-.card {
-  background: #fff;
-  border-radius: 18px;
-  padding: 20px;
-  margin: 14px 0;
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
-}
-.tag {
-  display: inline-block;
-  font-size: 11px;
-  padding: 3px 10px;
-  border-radius: 20px;
-  color: #fff;
-  font-weight: 600;
-  margin-bottom: 10px;
-}
-.tag-num {
-  background: var(--num);
-}
-.tag-ys {
-  background: var(--ys);
-}
-.hex {
-  width: 76px;
-  height: 76px;
-  margin: 6px auto 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 34px;
-  font-weight: 800;
-  color: #fff;
-  background: linear-gradient(135deg, var(--num), var(--num-d));
-  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-}
-.p-title {
-  text-align: center;
-  font-size: 18px;
-  font-weight: 700;
-  color: var(--num-d);
-}
-.p-oneline {
-  text-align: center;
-  font-size: 13px;
-  color: #999;
-  margin-top: 4px;
-  line-height: 1.55;
-}
-.pyr-wrap {
-  margin: 16px 0 4px;
-}
-.ys-type {
-  text-align: center;
-  font-size: 20px;
-  font-weight: 700;
-  color: var(--ys-d);
-  margin: 4px 0;
-}
-.ys-dir {
-  text-align: center;
-  font-size: 13px;
-  color: #999;
-}
-.disc-mini {
-  font-size: 11px;
-  color: #aaa;
-  text-align: center;
-  margin-top: 12px;
-  line-height: 1.5;
-}
-.jn h4 {
-  font-size: 14px;
-  color: var(--ys-d);
-  margin: 8px 0;
-}
-.jn .row {
-  font-size: 13px;
-  line-height: 2;
-  color: #555;
-}
-.jn .row b {
-  color: var(--ys-d);
-}
-.jn .st {
-  font-size: 12px;
-  color: #999;
-  margin-bottom: 4px;
-}
-.deep-links {
-  display: flex;
-  gap: 10px;
-  margin: 16px 0;
-}
-.deep-links a,
-.deep-links button {
-  flex: 1;
-  text-align: center;
-  padding: 13px 6px;
-  border-radius: 14px;
-  color: #fff;
-  text-decoration: none;
-  font-size: 13px;
-  font-weight: 600;
-  border: none;
-  cursor: pointer;
-}
-.d-num {
-  background: linear-gradient(135deg, var(--num), var(--num-d));
-}
-.d-ys {
-  background: linear-gradient(135deg, var(--ys), var(--ys-d));
-}
-.sub-h {
-  margin-top: 10px;
-  font-weight: 700;
-  color: #555;
-}
-.joint {
-  margin-top: 8px;
-}
-.muted {
-  color: #888;
-  font-size: 12px;
-  line-height: 1.7;
-}
-.extra .yxg-btn {
-  margin-top: 10px;
-  width: 100%;
-}
 </style>
diff --git a/apps/user-h5/src/components/ask/AskAiPane.vue b/apps/user-h5/src/components/ask/AskAiPane.vue
index 50b382e..5bcff24 100644
--- a/apps/user-h5/src/components/ask/AskAiPane.vue
+++ b/apps/user-h5/src/components/ask/AskAiPane.vue
@@ -5,105 +5,45 @@
       {{ bootError }}
       <button type="button" class="retry" @click="$emit('boot')">重试</button>
     </p>
-    <template v-else-if="!profiles.length">
-      <div class="card empty">
-        <HomeToolIcon name="ask" :size="56" />
-        <p>还没有个人档案。完成愈心解码后再来提问，回答会更贴合你。</p>
-        <router-link class="cta" to="/portrait">去愈心解码</router-link>
-      </div>
-    </template>
+    <AskEmpty v-else-if="!profiles.length" />
     <template v-else>
-      <div v-if="!messages.length" class="card greet reveal">
-        <div class="greet-row">
-          <HomeToolIcon name="ask" :size="48" />
-          <div>
-            <p class="hi">Hi，我是愈心 AI</p>
-            <p class="hi-sub">最近有什么事，都可以和我聊聊</p>
-          </div>
-        </div>
-        <div class="prompts">
-          <button
-            v-for="s in guidePrompts"
-            :key="s.key"
-            type="button"
-            class="prompt"
-            @click="$emit('pick-scene', s)"
-          >
-            {{ s.label }}
-          </button>
-        </div>
-        <button type="button" class="advisor-link" @click="$emit('switch-advisor')">
-          也可以看看成长顾问 →
-        </button>
-      </div>
-
-      <div class="card controls">
-        <label class="lbl">档案</label>
-        <select class="sel" :value="profileId" @change="$emit('update:profileId', ($event.target as HTMLSelectElement).value); $emit('profile-change')">
-          <option v-for="p in profiles" :key="p.id" :value="p.id">
-            {{ p.relation === 'self' ? '我的档案' : `TA · ${p.display_name || '未命名'}` }}
-          </option>
-        </select>
-        <div class="quick">
-          <button
-            v-for="q in quickTools"
-            :key="q.to"
-            type="button"
-            class="q-btn"
-            @click="$emit('navigate', q.to)"
-          >
-            {{ q.label }}
-          </button>
-        </div>
-      </div>
-
-      <div class="thread" ref="threadRef">
-        <div v-for="m in messages" :key="m.id" :class="['bubble', m.role]">
-          <p>{{ m.content }}</p>
-        </div>
-        <p v-if="sending" class="hint pad">助手正在回复…</p>
-      </div>
-
+      <AskGreet
+        v-if="!messages.length"
+        @pick-scene="$emit('pick-scene', $event)"
+        @switch-advisor="$emit('switch-advisor')"
+      />
+      <AskProfileBar
+        :profiles="profiles"
+        :profile-id="profileId"
+        @update:profile-id="$emit('update:profileId', $event)"
+        @profile-change="$emit('profile-change')"
+        @navigate="$emit('navigate', $event)"
+      />
+      <AskMessageList :messages="messages" :sending="sending" />
       <p v-if="sendError" class="err pad">
         {{ sendError }}
         <router-link v-if="quotaExhausted" class="retry" to="/membership">开通成长会员</router-link>
       </p>
-
-      <div class="composer-wrap">
-        <p v-if="quota" class="quota">
-          剩余 {{ quota.remaining }} 次
-          <span v-if="!quota.active_membership">（免费 {{ quota.free_limit }}）</span>
-        </p>
-        <form class="composer" @submit.prevent="$emit('send')">
-          <textarea
-            class="ta"
-            :value="draft"
-            rows="2"
-            placeholder="让我来解答你的问题吧"
-            :disabled="sending || (quota !== null && quota.remaining <= 0)"
-            @input="$emit('update:draft', ($event.target as HTMLTextAreaElement).value)"
-          />
-          <button
-            class="send"
-            type="submit"
-            :disabled="sending || !draft.trim() || (quota !== null && quota.remaining <= 0)"
-          >
-            发送
-          </button>
-        </form>
-        <p class="ai-note">部分内容由 AI 生成，仅供参考</p>
-      </div>
+      <AskComposer
+        :draft="draft"
+        :sending="sending"
+        :quota="quota"
+        @update:draft="$emit('update:draft', $event)"
+        @send="$emit('send')"
+      />
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref, watch } from 'vue'
 import type { AskMessage, AskQuota, Profile } from '@yuxingu/types'
-import HomeToolIcon from '../HomeToolIcon.vue'
-import { askQuickTools, askScenes } from '../../composables/useAskPage'
+import AskComposer from './AskComposer.vue'
+import AskEmpty from './AskEmpty.vue'
+import AskGreet from './AskGreet.vue'
+import AskMessageList from './AskMessageList.vue'
+import AskProfileBar from './AskProfileBar.vue'
 
-const props = defineProps<{
+defineProps<{
   bootLoading: boolean
   bootError: string
   profiles: Profile[]
@@ -116,16 +56,6 @@ const props = defineProps<{
   quota: AskQuota | null
 }>()
 
-const threadRef = ref<HTMLElement | null>(null)
-
-watch(
-  () => props.messages.length,
-  async () => {
-    await nextTick()
-    if (threadRef.value) threadRef.value.scrollTop = threadRef.value.scrollHeight
-  },
-)
-
 defineEmits<{
   boot: []
   'pick-scene': [s: { key: string; prompt: string }]
@@ -136,9 +66,6 @@ defineEmits<{
   'update:draft': [v: string]
   send: []
 }>()
-
-const guidePrompts = askScenes
-const quickTools = askQuickTools
 </script>
 
 <style scoped>
@@ -147,183 +74,6 @@ const quickTools = askQuickTools
   position: relative;
   z-index: 2;
 }
-.card {
-  background: var(--color-surface);
-  border-radius: var(--radius-xl);
-  padding: 16px;
-  box-shadow: var(--shadow-hero);
-  margin-bottom: 12px;
-}
-.card.empty {
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  color: #666;
-}
-.greet-row {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  margin-bottom: 14px;
-}
-.hi {
-  font-size: 16px;
-  font-weight: 700;
-  color: var(--color-text-primary);
-}
-.hi-sub {
-  font-size: 12px;
-  color: #888;
-  margin-top: 2px;
-}
-.prompts {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.prompt {
-  text-align: left;
-  border: 1px solid #f0ebe8;
-  background: #fffaf8;
-  border-radius: 14px;
-  padding: 12px 14px;
-  font-size: 13px;
-  color: #444;
-  line-height: 1.45;
-}
-.prompt:active {
-  background: #fff0ec;
-  border-color: #f5c4bc;
-}
-.advisor-link {
-  margin-top: 12px;
-  border: none;
-  background: transparent;
-  font-size: 12px;
-  color: var(--color-primary);
-  font-weight: 600;
-}
-.controls .lbl {
-  display: block;
-  font-size: 12px;
-  color: #999;
-  margin-bottom: 6px;
-}
-.sel {
-  width: 100%;
-  padding: 10px 12px;
-  border-radius: 12px;
-  border: 1.5px solid #eee;
-  background: var(--color-input-bg);
-  font-size: 14px;
-  outline: none;
-}
-.quick {
-  display: flex;
-  gap: 8px;
-  margin-top: 12px;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-.q-btn {
-  flex-shrink: 0;
-  padding: 7px 12px;
-  border-radius: var(--radius-pill);
-  border: 1px solid #f0ebe8;
-  background: #fff;
-  font-size: 12px;
-  color: #666;
-}
-.thread {
-  overflow-y: auto;
-  max-height: 36vh;
-  padding: 4px 0 12px;
-}
-.bubble {
-  margin: 8px 0;
-  padding: 12px 14px;
-  border-radius: 16px;
-  font-size: 14px;
-  line-height: 1.65;
-  white-space: pre-wrap;
-  box-shadow: var(--shadow-card);
-  background: #fff;
-}
-.bubble.user {
-  margin-left: 28px;
-  color: #333;
-}
-.bubble.assistant {
-  margin-right: 28px;
-  background: #fff5f4;
-  color: #444;
-  box-shadow: none;
-}
-.composer-wrap {
-  position: sticky;
-  bottom: 72px;
-  padding-top: 8px;
-  background: linear-gradient(180deg, transparent, var(--color-bg-sheet) 24%);
-}
-.quota {
-  font-size: 11px;
-  color: #aaa;
-  margin-bottom: 6px;
-}
-.composer {
-  display: flex;
-  gap: 8px;
-  align-items: flex-end;
-}
-.ta {
-  flex: 1;
-  resize: none;
-  min-height: 44px;
-  padding: 11px 14px;
-  border-radius: 16px;
-  border: 1.5px solid #eee;
-  background: #fff;
-  font-size: 14px;
-  font-family: inherit;
-  outline: none;
-}
-.ta:focus {
-  border-color: #f0b8b0;
-}
-.send {
-  flex-shrink: 0;
-  padding: 11px 16px;
-  border: none;
-  border-radius: 22px;
-  color: #fff;
-  font-size: 14px;
-  font-weight: 600;
-  background: linear-gradient(135deg, #ff7a6e, var(--color-primary));
-  box-shadow: 0 6px 16px rgba(229, 77, 66, 0.28);
-}
-.send:disabled {
-  opacity: 0.45;
-}
-.ai-note {
-  margin-top: 8px;
-  font-size: 10px;
-  color: #ccc;
-  text-align: center;
-}
-.cta {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 12px 20px;
-  border-radius: 22px;
-  background: linear-gradient(135deg, #ff7a6e, var(--color-primary));
-  color: #fff;
-  font-weight: 600;
-  font-size: 14px;
-  box-shadow: 0 6px 16px rgba(229, 77, 66, 0.28);
-}
 .hint {
   font-size: 13px;
   color: #999;
@@ -344,11 +94,4 @@ const quickTools = askQuickTools
   font-size: 13px;
   margin-left: 6px;
 }
-.reveal {
-  animation: rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
-}
-@keyframes rise {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
 </style>
diff --git a/apps/user-h5/src/components/ask/AskComposer.vue b/apps/user-h5/src/components/ask/AskComposer.vue
new file mode 100644
index 0000000..689aa23
--- /dev/null
+++ b/apps/user-h5/src/components/ask/AskComposer.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="composer-wrap">
+    <p v-if="quota" class="quota">
+      剩余 {{ quota.remaining }} 次
+      <span v-if="!quota.active_membership">（免费 {{ quota.free_limit }}）</span>
+    </p>
+    <form class="composer" @submit.prevent="$emit('send')">
+      <textarea
+        class="ta"
+        :value="draft"
+        rows="2"
+        placeholder="让我来解答你的问题吧"
+        :disabled="sending || (quota !== null && quota.remaining <= 0)"
+        @input="$emit('update:draft', ($event.target as HTMLTextAreaElement).value)"
+      />
+      <button
+        class="send"
+        type="submit"
+        :disabled="sending || !draft.trim() || (quota !== null && quota.remaining <= 0)"
+      >
+        发送
+      </button>
+    </form>
+    <p class="ai-note">部分内容由 AI 生成，仅供参考</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AskQuota } from '@yuxingu/types'
+
+defineProps<{
+  draft: string
+  sending: boolean
+  quota: AskQuota | null
+}>()
+
+defineEmits<{
+  'update:draft': [v: string]
+  send: []
+}>()
+</script>
+
+<style scoped>
+.composer-wrap {
+  position: sticky;
+  bottom: 72px;
+  padding-top: 8px;
+  background: linear-gradient(180deg, transparent, var(--color-bg-sheet) 24%);
+}
+.quota {
+  font-size: 11px;
+  color: #aaa;
+  margin-bottom: 6px;
+}
+.composer {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+}
+.ta {
+  flex: 1;
+  resize: none;
+  min-height: 44px;
+  padding: 11px 14px;
+  border-radius: 16px;
+  border: 1.5px solid #eee;
+  background: #fff;
+  font-size: 14px;
+  font-family: inherit;
+  outline: none;
+}
+.ta:focus {
+  border-color: #f0b8b0;
+}
+.send {
+  flex-shrink: 0;
+  padding: 11px 16px;
+  border: none;
+  border-radius: 22px;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  background: linear-gradient(135deg, #ff7a6e, var(--color-primary));
+  box-shadow: 0 6px 16px rgba(229, 77, 66, 0.28);
+}
+.send:disabled {
+  opacity: 0.45;
+}
+.ai-note {
+  margin-top: 8px;
+  font-size: 10px;
+  color: #ccc;
+  text-align: center;
+}
+</style>
diff --git a/apps/user-h5/src/components/ask/AskEmpty.vue b/apps/user-h5/src/components/ask/AskEmpty.vue
new file mode 100644
index 0000000..5102463
--- /dev/null
+++ b/apps/user-h5/src/components/ask/AskEmpty.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="card empty">
+    <HomeToolIcon name="ask" :size="56" />
+    <p>还没有个人档案。完成愈心解码后再来提问，回答会更贴合你。</p>
+    <router-link class="cta" to="/portrait">去愈心解码</router-link>
+  </div>
+</template>
+
+<script setup lang="ts">
+import HomeToolIcon from '../HomeToolIcon.vue'
+</script>
+
+<style scoped>
+.card {
+  background: var(--color-surface);
+  border-radius: var(--radius-xl);
+  padding: 16px;
+  box-shadow: var(--shadow-hero);
+  margin-bottom: 12px;
+}
+.card.empty {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  color: #666;
+}
+.cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 20px;
+  border-radius: 22px;
+  background: linear-gradient(135deg, #ff7a6e, var(--color-primary));
+  color: #fff;
+  font-weight: 600;
+  font-size: 14px;
+  box-shadow: 0 6px 16px rgba(229, 77, 66, 0.28);
+}
+</style>
diff --git a/apps/user-h5/src/components/ask/AskGreet.vue b/apps/user-h5/src/components/ask/AskGreet.vue
new file mode 100644
index 0000000..5cd694e
--- /dev/null
+++ b/apps/user-h5/src/components/ask/AskGreet.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="card greet reveal">
+    <div class="greet-row">
+      <HomeToolIcon name="ask" :size="48" />
+      <div>
+        <p class="hi">Hi，我是愈心 AI</p>
+        <p class="hi-sub">最近有什么事，都可以和我聊聊</p>
+      </div>
+    </div>
+    <div class="prompts">
+      <button
+        v-for="s in guidePrompts"
+        :key="s.key"
+        type="button"
+        class="prompt"
+        @click="$emit('pick-scene', s)"
+      >
+        {{ s.label }}
+      </button>
+    </div>
+    <button type="button" class="advisor-link" @click="$emit('switch-advisor')">
+      也可以看看成长顾问 →
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import HomeToolIcon from '../HomeToolIcon.vue'
+import { askScenes } from '../../composables/useAskPage'
+
+defineEmits<{
+  'pick-scene': [s: { key: string; prompt: string }]
+  'switch-advisor': []
+}>()
+
+const guidePrompts = askScenes
+</script>
+
+<style scoped>
+.card {
+  background: var(--color-surface);
+  border-radius: var(--radius-xl);
+  padding: 16px;
+  box-shadow: var(--shadow-hero);
+  margin-bottom: 12px;
+}
+.greet-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 14px;
+}
+.hi {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+.hi-sub {
+  font-size: 12px;
+  color: #888;
+  margin-top: 2px;
+}
+.prompts {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.prompt {
+  text-align: left;
+  border: 1px solid #f0ebe8;
+  background: #fffaf8;
+  border-radius: 14px;
+  padding: 12px 14px;
+  font-size: 13px;
+  color: #444;
+  line-height: 1.45;
+}
+.prompt:active {
+  background: #fff0ec;
+  border-color: #f5c4bc;
+}
+.advisor-link {
+  margin-top: 12px;
+  border: none;
+  background: transparent;
+  font-size: 12px;
+  color: var(--color-primary);
+  font-weight: 600;
+}
+.reveal {
+  animation: rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+@keyframes rise {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+</style>
diff --git a/apps/user-h5/src/components/ask/AskMessageList.vue b/apps/user-h5/src/components/ask/AskMessageList.vue
new file mode 100644
index 0000000..6254d6e
--- /dev/null
+++ b/apps/user-h5/src/components/ask/AskMessageList.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="thread" ref="threadRef">
+    <div v-for="m in messages" :key="m.id" :class="['bubble', m.role]">
+      <p>{{ m.content }}</p>
+    </div>
+    <p v-if="sending" class="hint pad">助手正在回复…</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref, watch } from 'vue'
+import type { AskMessage } from '@yuxingu/types'
+
+const props = defineProps<{
+  messages: AskMessage[]
+  sending: boolean
+}>()
+
+const threadRef = ref<HTMLElement | null>(null)
+
+watch(
+  () => props.messages.length,
+  async () => {
+    await nextTick()
+    if (threadRef.value) threadRef.value.scrollTop = threadRef.value.scrollHeight
+  },
+)
+</script>
+
+<style scoped>
+.thread {
+  overflow-y: auto;
+  max-height: 36vh;
+  padding: 4px 0 12px;
+}
+.bubble {
+  margin: 8px 0;
+  padding: 12px 14px;
+  border-radius: 16px;
+  font-size: 14px;
+  line-height: 1.65;
+  white-space: pre-wrap;
+  box-shadow: var(--shadow-card);
+  background: #fff;
+}
+.bubble.user {
+  margin-left: 28px;
+  color: #333;
+}
+.bubble.assistant {
+  margin-right: 28px;
+  background: #fff5f4;
+  color: #444;
+  box-shadow: none;
+}
+.hint {
+  font-size: 13px;
+  color: #999;
+  text-align: center;
+  padding: 24px;
+}
+.pad { padding: 0 4px; }
+</style>
diff --git a/apps/user-h5/src/components/ask/AskProfileBar.vue b/apps/user-h5/src/components/ask/AskProfileBar.vue
new file mode 100644
index 0000000..a9e1364
--- /dev/null
+++ b/apps/user-h5/src/components/ask/AskProfileBar.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="card controls">
+    <label class="lbl">档案</label>
+    <select
+      class="sel"
+      :value="profileId"
+      @change="
+        $emit('update:profileId', ($event.target as HTMLSelectElement).value);
+        $emit('profile-change')
+      "
+    >
+      <option v-for="p in profiles" :key="p.id" :value="p.id">
+        {{ p.relation === 'self' ? '我的档案' : `TA · ${p.display_name || '未命名'}` }}
+      </option>
+    </select>
+    <div class="quick">
+      <button
+        v-for="q in quickTools"
+        :key="q.to"
+        type="button"
+        class="q-btn"
+        @click="$emit('navigate', q.to)"
+      >
+        {{ q.label }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Profile } from '@yuxingu/types'
+import { askQuickTools } from '../../composables/useAskPage'
+
+defineProps<{
+  profiles: Profile[]
+  profileId: string
+}>()
+
+defineEmits<{
+  'update:profileId': [v: string]
+  'profile-change': []
+  navigate: [to: string]
+}>()
+
+const quickTools = askQuickTools
+</script>
+
+<style scoped>
+.card {
+  background: var(--color-surface);
+  border-radius: var(--radius-xl);
+  padding: 16px;
+  box-shadow: var(--shadow-hero);
+  margin-bottom: 12px;
+}
+.controls .lbl {
+  display: block;
+  font-size: 12px;
+  color: #999;
+  margin-bottom: 6px;
+}
+.sel {
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1.5px solid #eee;
+  background: var(--color-input-bg);
+  font-size: 14px;
+  outline: none;
+}
+.quick {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.q-btn {
+  flex-shrink: 0;
+  padding: 7px 12px;
+  border-radius: var(--radius-pill);
+  border: 1px solid #f0ebe8;
+  background: #fff;
+  font-size: 12px;
+  color: #666;
+}
+</style>
diff --git a/apps/user-h5/src/components/decode/DecodeConstitutionCard.vue b/apps/user-h5/src/components/decode/DecodeConstitutionCard.vue
new file mode 100644
index 0000000..e65bf7f
--- /dev/null
+++ b/apps/user-h5/src/components/decode/DecodeConstitutionCard.vue
@@ -0,0 +1,101 @@
+<template>
+  <section class="card">
+    <span class="tag tag-ys">五行体质画像</span>
+    <div class="ys-type">{{ primary || '—' }}</div>
+    <div class="ys-dir">核心养护：{{ careDir }}</div>
+    <WuxingBars v-if="bars.length" :bars="bars" />
+    <div v-if="emotionText" class="p-oneline">情绪画像：{{ emotionText }}</div>
+    <PayLock
+      :unlocked="deep"
+      :paying="paying"
+      title="解锁五行体质深度分析"
+      desc="脏腑画像 · 易感倾向 · 食疗 · 运动作息方案"
+      @unlock="$emit('unlock')"
+    >
+      <template v-if="deep && constitutionDeep.body">
+        <p><b>体质特征：</b>{{ constitutionDeep.body }}</p>
+        <p><b>调养要点：</b>{{ constitutionDeep.tips }}</p>
+        <p><b>易感倾向：</b>{{ constitutionDeep.risk }}</p>
+        <p><b>季节风险：</b>{{ constitutionDeep.season_risk }}</p>
+        <p><b>食疗方向：</b>{{ constitutionDeep.food }}</p>
+        <p><b>作息节律：</b>{{ constitutionDeep.rhythm }}</p>
+      </template>
+      <p v-else>{{ lockTeaser }}</p>
+    </PayLock>
+    <p class="disc-mini">{{ disclaimer }}</p>
+  </section>
+</template>
+
+<script setup lang="ts">
+import PayLock from '../PayLock.vue'
+import WuxingBars, { type WuxingBar } from '../WuxingBars.vue'
+
+defineProps<{
+  primary: unknown
+  careDir: string
+  bars: WuxingBar[]
+  emotionText: string
+  deep: boolean
+  paying?: boolean
+  lockTeaser: string
+  disclaimer: string
+  constitutionDeep: {
+    body: string
+    tips: string
+    risk: string
+    season_risk: string
+    food: string
+    rhythm: string
+  }
+}>()
+
+defineEmits<{ unlock: [] }>()
+</script>
+
+<style scoped>
+.card {
+  background: #fff;
+  border-radius: 18px;
+  padding: 20px;
+  margin: 14px 0;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
+}
+.tag {
+  display: inline-block;
+  font-size: 11px;
+  padding: 3px 10px;
+  border-radius: 20px;
+  color: #fff;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+.tag-ys {
+  background: var(--ys, #5cb85c);
+}
+.ys-type {
+  text-align: center;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--ys-d, #3f8f45);
+  margin: 4px 0;
+}
+.ys-dir {
+  text-align: center;
+  font-size: 13px;
+  color: #999;
+}
+.p-oneline {
+  text-align: center;
+  font-size: 13px;
+  color: #999;
+  margin-top: 4px;
+  line-height: 1.55;
+}
+.disc-mini {
+  font-size: 11px;
+  color: #aaa;
+  text-align: center;
+  margin-top: 12px;
+  line-height: 1.5;
+}
+</style>
diff --git a/apps/user-h5/src/components/decode/DecodeDeepExtra.vue b/apps/user-h5/src/components/decode/DecodeDeepExtra.vue
new file mode 100644
index 0000000..e61e982
--- /dev/null
+++ b/apps/user-h5/src/components/decode/DecodeDeepExtra.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <div class="deep-links">
+      <button type="button" class="d-num" @click="expanded = !expanded">
+        {{ expanded ? '收起数字深解' : '完整数字报告' }} →
+      </button>
+      <router-link class="d-ys" to="/relation">测测契合度 →</router-link>
+    </div>
+    <div v-if="expanded && deep" class="card extra">
+      <p class="muted">主数 {{ mainNumber }} · {{ personTitle }} · 五行 {{ elem }}</p>
+      <p>{{ desc }}</p>
+    </div>
+    <div v-else-if="expanded && !deep" class="card extra">
+      <p class="muted">解锁深度版后可展开完整数字能量与联合码解读。</p>
+      <button type="button" class="yxg-btn" :disabled="paying" @click="$emit('unlock')">
+        解锁完整分析（模拟支付）
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+  deep: boolean
+  paying?: boolean
+  mainNumber: number | string
+  personTitle: string
+  elem: string
+  desc: string
+}>()
+
+defineEmits<{ unlock: [] }>()
+
+const expanded = ref(false)
+</script>
+
+<style scoped>
+.card {
+  background: #fff;
+  border-radius: 18px;
+  padding: 20px;
+  margin: 14px 0;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
+}
+.deep-links {
+  display: flex;
+  gap: 10px;
+  margin: 16px 0;
+}
+.deep-links a,
+.deep-links button {
+  flex: 1;
+  text-align: center;
+  padding: 13px 6px;
+  border-radius: 14px;
+  color: #fff;
+  text-decoration: none;
+  font-size: 13px;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+}
+.d-num {
+  background: linear-gradient(135deg, var(--num, #c8923a), var(--num-d, #8a6d3b));
+}
+.d-ys {
+  background: linear-gradient(135deg, var(--ys, #5cb85c), var(--ys-d, #3f8f45));
+}
+.muted {
+  color: #888;
+  font-size: 12px;
+  line-height: 1.7;
+}
+.extra .yxg-btn {
+  margin-top: 10px;
+  width: 100%;
+}
+</style>
diff --git a/apps/user-h5/src/components/decode/DecodeNumberCard.vue b/apps/user-h5/src/components/decode/DecodeNumberCard.vue
new file mode 100644
index 0000000..8f235ea
--- /dev/null
+++ b/apps/user-h5/src/components/decode/DecodeNumberCard.vue
@@ -0,0 +1,132 @@
+<template>
+  <section class="card">
+    <span class="tag tag-num">数字性格密码</span>
+    <div class="hex">{{ mainNumber }}</div>
+    <div class="p-title">
+      <template v-if="mainNumber !== '—'">{{ mainNumber }}号人 · </template>{{ personTitle || '愈心解码' }}
+    </div>
+    <div v-if="oneLiner" class="p-oneline">{{ oneLiner }}</div>
+    <div v-if="hasPyramid" class="pyr-wrap">
+      <NumberPyramid :pyramid="pyramid" />
+    </div>
+    <PayLock
+      :unlocked="deep"
+      :paying="paying"
+      title="解锁你的完整密码"
+      desc="天赋优势 · 人生课题 · 适合方向 · 联合码深度解读"
+      @unlock="$emit('unlock')"
+    >
+      <template v-if="deep && numberDeep.talent">
+        <p><b>天赋优势：</b>{{ numberDeep.talent }}</p>
+        <p><b>人生课题：</b>{{ numberDeep.topic }}</p>
+        <p><b>适合方向：</b>{{ numberDeep.direction }}</p>
+        <p><b>能量解读：</b>{{ numberDeep.desc }}</p>
+      </template>
+      <p v-else>{{ lockTeaser }}</p>
+      <template v-if="deep && missing.length">
+        <p class="sub-h">缺失数字</p>
+        <p v-for="m in missing" :key="'m' + m.n">· 缺{{ m.n }}：{{ m.msg }}</p>
+      </template>
+      <template v-if="deep && joints.length">
+        <p class="sub-h">联合码分组</p>
+        <div v-for="(g, i) in joints" :key="'j' + i" class="joint">
+          <strong>{{ g.label }}</strong>
+          <p class="muted">{{ g.desc }}</p>
+          <p v-for="(c, j) in g.codes || []" :key="'c' + j" class="muted">
+            {{ c.code }} · {{ c.label }}
+          </p>
+        </div>
+      </template>
+    </PayLock>
+  </section>
+</template>
+
+<script setup lang="ts">
+import NumberPyramid from '../NumberPyramid.vue'
+import PayLock from '../PayLock.vue'
+
+defineProps<{
+  mainNumber: number | string
+  personTitle: string
+  oneLiner: string
+  hasPyramid: boolean
+  pyramid: Record<string, number>
+  deep: boolean
+  paying?: boolean
+  lockTeaser: string
+  numberDeep: {
+    talent: string
+    topic: string
+    direction: string
+    desc: string
+  }
+  missing: { n: number; msg: string }[]
+  joints: { label: string; desc: string; codes: { code: string; label: string }[] }[]
+}>()
+
+defineEmits<{ unlock: [] }>()
+</script>
+
+<style scoped>
+.card {
+  background: #fff;
+  border-radius: 18px;
+  padding: 20px;
+  margin: 14px 0;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
+}
+.tag {
+  display: inline-block;
+  font-size: 11px;
+  padding: 3px 10px;
+  border-radius: 20px;
+  color: #fff;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+.tag-num {
+  background: var(--num, #c8923a);
+}
+.hex {
+  width: 76px;
+  height: 76px;
+  margin: 6px auto 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 34px;
+  font-weight: 800;
+  color: #fff;
+  background: linear-gradient(135deg, var(--num, #c8923a), var(--num-d, #8a6d3b));
+  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
+}
+.p-title {
+  text-align: center;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--num-d, #8a6d3b);
+}
+.p-oneline {
+  text-align: center;
+  font-size: 13px;
+  color: #999;
+  margin-top: 4px;
+  line-height: 1.55;
+}
+.pyr-wrap {
+  margin: 16px 0 4px;
+}
+.sub-h {
+  margin-top: 10px;
+  font-weight: 700;
+  color: #555;
+}
+.joint {
+  margin-top: 8px;
+}
+.muted {
+  color: #888;
+  font-size: 12px;
+  line-height: 1.7;
+}
+</style>
diff --git a/apps/user-h5/src/components/decode/DecodeSolarTip.vue b/apps/user-h5/src/components/decode/DecodeSolarTip.vue
new file mode 100644
index 0000000..a005728
--- /dev/null
+++ b/apps/user-h5/src/components/decode/DecodeSolarTip.vue
@@ -0,0 +1,58 @@
+<template>
+  <section class="card jn">
+    <span class="tag tag-ys">今日养生锦囊</span>
+    <div class="st">
+      当前节气：{{ tip.solar_term || '—' }}
+      <template v-if="tip.season_el"> · 时令 {{ tip.season_el }} 当令</template>
+    </div>
+    <h4>今日调养建议</h4>
+    <div class="row"><b>宜：</b>{{ tip.yi || '—' }}</div>
+    <div class="row"><b>忌：</b>{{ tip.ji || '—' }}</div>
+  </section>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  tip: Record<string, string>
+}>()
+</script>
+
+<style scoped>
+.card {
+  background: #fff;
+  border-radius: 18px;
+  padding: 20px;
+  margin: 14px 0;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
+}
+.tag {
+  display: inline-block;
+  font-size: 11px;
+  padding: 3px 10px;
+  border-radius: 20px;
+  color: #fff;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+.tag-ys {
+  background: var(--ys, #5cb85c);
+}
+.jn h4 {
+  font-size: 14px;
+  color: var(--ys-d, #3f8f45);
+  margin: 8px 0;
+}
+.jn .row {
+  font-size: 13px;
+  line-height: 2;
+  color: #555;
+}
+.jn .row b {
+  color: var(--ys-d, #3f8f45);
+}
+.jn .st {
+  font-size: 12px;
+  color: #999;
+  margin-bottom: 4px;
+}
+</style>
diff --git a/apps/user-h5/src/composables/profilePageActions.ts b/apps/user-h5/src/composables/profilePageActions.ts
new file mode 100644
index 0000000..d5271ea
--- /dev/null
+++ b/apps/user-h5/src/composables/profilePageActions.ts
@@ -0,0 +1,263 @@
+import type { Ref } from 'vue'
+import type { Router } from 'vue-router'
+import type { Profile } from '@yuxingu/types'
+import { api } from '../api/client'
+import { copyText } from '../lib/shareLink'
+
+export const profileRelationOptions = [
+  { value: 'family', label: '家人' },
+  { value: 'friend', label: '朋友' },
+  { value: 'partner', label: '伴侣' },
+  { value: 'colleague', label: '同事' },
+  { value: 'other', label: '其他' },
+]
+
+export function formatProfileDate(v: string) {
+  return (v || '').slice(0, 10)
+}
+
+export function avatarInitial(p: Profile) {
+  const n = p.display_name || (p.relation === 'self' ? '我' : 'T')
+  return n.slice(0, 1)
+}
+
+export function relationLabel(t?: string | null) {
+  const map: Record<string, string> = {
+    partner: '伴侣',
+    friend: '朋友',
+    family: '家人',
+    colleague: '同事',
+    other: '关系对象',
+  }
+  return map[t || ''] || '关系对象'
+}
+
+export function splitBirth(v: string) {
+  const s = formatProfileDate(v)
+  const [y, m, d] = s.split('-')
+  return { y: y || '', m: m ? String(Number(m)) : '', d: d ? String(Number(d)) : '' }
+}
+
+export function joinBirth(y: string, m: string, d: string) {
+  const yi = Number(y)
+  const mi = Number(m)
+  const di = Number(d)
+  if (!yi || !mi || !di) return ''
+  return `${yi}-${String(mi).padStart(2, '0')}-${String(di).padStart(2, '0')}`
+}
+
+export type ProfilePageActionRefs = {
+  items: Ref<Profile[]>
+  loading: Ref<boolean>
+  error: Ref<string>
+  busyId: Ref<string>
+  editing: Ref<Profile | null>
+  showAddForm: Ref<boolean>
+  showInviteFill: Ref<boolean>
+  formName: Ref<string>
+  formY: Ref<string>
+  formM: Ref<string>
+  formD: Ref<string>
+  formPlace: Ref<string>
+  formRelationType: Ref<string>
+  formGeoVisible: Ref<boolean>
+  formError: Ref<string>
+  saving: Ref<boolean>
+  newName: Ref<string>
+  newY: Ref<string>
+  newM: Ref<string>
+  newD: Ref<string>
+  newPlace: Ref<string>
+  newRelationType: Ref<string>
+  addError: Ref<string>
+  adding: Ref<boolean>
+  inviting: Ref<boolean>
+  invitePath: Ref<string>
+  inviteError: Ref<string>
+  inviteHint: Ref<string>
+  copyBusy: Ref<boolean>
+  selfProfile: { value: Profile | undefined }
+  routeAdd: () => string | undefined
+  routeInviteFill: () => string | undefined
+  router: Router
+}
+
+export function createProfilePageActions(r: ProfilePageActionRefs) {
+  function toggleAdd() {
+    r.showAddForm.value = !r.showAddForm.value
+    if (r.showAddForm.value) {
+      r.editing.value = null
+      r.showInviteFill.value = false
+    }
+  }
+
+  function openAddForm() {
+    r.showAddForm.value = true
+    r.showInviteFill.value = false
+    r.editing.value = null
+  }
+
+  function openInviteFill() {
+    r.showInviteFill.value = true
+    r.showAddForm.value = false
+    r.editing.value = null
+    r.inviteError.value = ''
+    if (!r.selfProfile.value) {
+      r.inviteHint.value = '请先完成自己的档案，再邀请好友填写。'
+    } else {
+      r.inviteHint.value = ''
+    }
+  }
+
+  function closeInviteFill() {
+    r.showInviteFill.value = false
+    void r.router.replace({ path: '/profile', query: {} })
+  }
+
+  function applyQueryFlags() {
+    if (r.routeAdd() === '1') openAddForm()
+    if (r.routeInviteFill() === '1') openInviteFill()
+  }
+
+  async function createFillInvite() {
+    if (!r.selfProfile.value) {
+      r.inviteError.value = '请先完成自己的档案'
+      return
+    }
+    r.inviting.value = true
+    r.inviteError.value = ''
+    r.inviteHint.value = ''
+    try {
+      const res = await api.createSynastryInvite(r.selfProfile.value.id)
+      r.invitePath.value = `${location.origin}${res.path}`
+      r.inviteHint.value = '好友打开链接后填写生日即可；也可用于合盘。'
+    } catch (e) {
+      r.inviteError.value = e instanceof Error ? e.message : '生成失败'
+    } finally {
+      r.inviting.value = false
+    }
+  }
+
+  async function copyInvite() {
+    if (!r.invitePath.value) return
+    r.copyBusy.value = true
+    const ok = await copyText(r.invitePath.value)
+    r.inviteHint.value = ok ? '链接已复制，发给家人或朋友即可。' : '复制失败，请长按链接手动复制。'
+    r.copyBusy.value = false
+  }
+
+  async function load() {
+    r.loading.value = true
+    r.error.value = ''
+    try {
+      const res = await api.listProfiles()
+      r.items.value = res.items || []
+    } catch (e) {
+      r.error.value = e instanceof Error ? e.message : '加载失败'
+    } finally {
+      r.loading.value = false
+    }
+  }
+
+  function startEdit(p: Profile) {
+    r.editing.value = p
+    r.showAddForm.value = false
+    r.formName.value = p.display_name || ''
+    const b = splitBirth(p.birth_date)
+    r.formY.value = b.y
+    r.formM.value = b.m
+    r.formD.value = b.d
+    r.formPlace.value = p.birth_place || ''
+    r.formRelationType.value = p.relation_type || 'partner'
+    r.formGeoVisible.value = !!p.geo_visible
+    r.formError.value = ''
+  }
+
+  async function saveEdit() {
+    if (!r.editing.value) return
+    r.saving.value = true
+    r.formError.value = ''
+    try {
+      const birth = joinBirth(r.formY.value, r.formM.value, r.formD.value)
+      if (!birth) throw new Error('请填写生日')
+      const body: {
+        display_name: string
+        birth_date: string
+        relation_type?: string
+        birth_place?: string
+        geo_visible?: boolean
+      } = {
+        display_name: r.formName.value.trim(),
+        birth_date: birth,
+        birth_place: r.formPlace.value || '',
+      }
+      if (r.editing.value.relation === 'other') body.relation_type = r.formRelationType.value
+      if (r.editing.value.relation === 'self') body.geo_visible = r.formGeoVisible.value
+      await api.updateProfile(r.editing.value.id, body)
+      r.editing.value = null
+      await load()
+    } catch (e) {
+      r.formError.value = e instanceof Error ? e.message : '保存失败'
+    } finally {
+      r.saving.value = false
+    }
+  }
+
+  async function remove(p: Profile) {
+    if (!confirm(`确定删除「${p.display_name || '档案'}」？`)) return
+    r.busyId.value = p.id
+    r.error.value = ''
+    try {
+      await api.deleteProfile(p.id)
+      if (r.editing.value?.id === p.id) r.editing.value = null
+      await load()
+    } catch (e) {
+      r.error.value = e instanceof Error ? e.message : '删除失败'
+    } finally {
+      r.busyId.value = ''
+    }
+  }
+
+  async function addOther() {
+    r.adding.value = true
+    r.addError.value = ''
+    try {
+      const birth = joinBirth(r.newY.value, r.newM.value, r.newD.value)
+      if (!birth) throw new Error('请填写生日')
+      await api.createProfile({
+        relation: 'other',
+        birth_date: birth,
+        display_name: r.newName.value.trim() || 'TA',
+        relation_type: r.newRelationType.value,
+        birth_place: r.newPlace.value || undefined,
+      })
+      r.newName.value = ''
+      r.newY.value = ''
+      r.newM.value = ''
+      r.newD.value = ''
+      r.newPlace.value = ''
+      r.showAddForm.value = false
+      await load()
+      if (r.routeAdd() === '1') void r.router.replace({ path: '/profile', query: {} })
+    } catch (e) {
+      r.addError.value = e instanceof Error ? e.message : '添加失败'
+    } finally {
+      r.adding.value = false
+    }
+  }
+
+  return {
+    toggleAdd,
+    openAddForm,
+    openInviteFill,
+    closeInviteFill,
+    applyQueryFlags,
+    createFillInvite,
+    copyInvite,
+    load,
+    startEdit,
+    saveEdit,
+    remove,
+    addOther,
+  }
+}
diff --git a/apps/user-h5/src/composables/useDecodePanel.ts b/apps/user-h5/src/composables/useDecodePanel.ts
new file mode 100644
index 0000000..230ea2e
--- /dev/null
+++ b/apps/user-h5/src/composables/useDecodePanel.ts
@@ -0,0 +1,128 @@
+import { computed, type Ref } from 'vue'
+import type { WuxingBar } from '../components/WuxingBars.vue'
+
+export function useDecodePanel(
+  summary: Ref<Record<string, unknown>> | (() => Record<string, unknown>),
+  detail: Ref<Record<string, unknown> | null> | (() => Record<string, unknown> | null),
+) {
+  const getSummary = typeof summary === 'function' ? summary : () => summary.value
+  const getDetail = typeof detail === 'function' ? detail : () => detail.value
+
+  const mainNumber = computed(() => {
+    const s = getSummary()
+    const n = Number(s.main_number)
+    if (Number.isFinite(n) && n > 0) return n
+    const pk = Number(s.pattern_key)
+    if (Number.isFinite(pk) && pk > 0) return pk
+    return '—'
+  })
+  const personTitle = computed(() => {
+    const s = getSummary()
+    return String(s.person_title || s.style_label || s.style_badge || '')
+  })
+  const oneLiner = computed(() => {
+    const s = getSummary()
+    return String(s.one_liner || s.headline || s.overview || '')
+  })
+  const pyramid = computed(() => (getSummary().pyramid || {}) as Record<string, number>)
+  const hasPyramid = computed(() => Object.keys(pyramid.value).length > 0)
+  const hasDecodeShape = computed(() => {
+    const s = getSummary()
+    return s.main_number != null || s.pyramid != null || s.wuxing != null
+  })
+
+  const wuxing = computed(() => (getSummary().wuxing || {}) as Record<string, unknown>)
+  const bars = computed<WuxingBar[]>(() => {
+    const raw = wuxing.value.bars
+    if (!Array.isArray(raw)) return []
+    return raw.map((b) => {
+      const o = b as Record<string, unknown>
+      return { el: String(o.el || ''), pct: Number(o.pct || 0), color: String(o.color || '#999') }
+    })
+  })
+  const careDir = computed(() => {
+    const s = wuxing.value.strong
+    const w = wuxing.value.weak
+    if (s && w) return `养${s} · 需呵护${w}`
+    return '—'
+  })
+  const emotionText = computed(() => {
+    const e = wuxing.value.emotion
+    return Array.isArray(e) ? e.join(' · ') : ''
+  })
+
+  const todayTip = computed(() => (getSummary().today_tip || {}) as Record<string, string>)
+  const constitutionDisclaimer = computed(
+    () =>
+      String(getSummary().disclaimer_constitution || '') ||
+      '体质与调养内容为生活方式参考，非医疗建议。',
+  )
+  const lockTeaserNumber = computed(
+    () =>
+      String(getSummary().lock_teaser_number || '') ||
+      '天赋优势与人生课题、适合方向与能量长文，解锁后查看。',
+  )
+  const lockTeaserWuxing = computed(
+    () =>
+      String(getSummary().lock_teaser_wuxing || '') ||
+      '体质特征、调养要点、易感倾向、食疗与作息节律，解锁后查看。',
+  )
+
+  const numberDeep = computed(() => {
+    const d = (getDetail()?.number_deep || {}) as Record<string, unknown>
+    return {
+      talent: String(d.talent || ''),
+      topic: String(d.topic || ''),
+      direction: String(d.direction || ''),
+      desc: String(d.desc || ''),
+      elem: String(d.elem || ''),
+    }
+  })
+  const constitutionDeep = computed(() => {
+    const d = (getDetail()?.constitution_deep || {}) as Record<string, unknown>
+    return {
+      body: String(d.body || ''),
+      tips: String(d.tips || ''),
+      risk: String(d.risk || ''),
+      season_risk: String(d.season_risk || ''),
+      food: String(d.food || ''),
+      rhythm: String(d.rhythm || ''),
+    }
+  })
+  const missing = computed(() => {
+    const d = (getDetail()?.number_deep || {}) as Record<string, unknown>
+    const arr = d.missing
+    if (!Array.isArray(arr)) return [] as { n: number; msg: string }[]
+    return arr.map((x) => {
+      const o = x as Record<string, unknown>
+      return { n: Number(o.n), msg: String(o.msg || '') }
+    })
+  })
+  const joints = computed(() => {
+    const d = (getDetail()?.number_deep || {}) as Record<string, unknown>
+    const arr = d.joints
+    if (!Array.isArray(arr)) return [] as { label: string; desc: string; codes: { code: string; label: string }[] }[]
+    return arr as { label: string; desc: string; codes: { code: string; label: string }[] }[]
+  })
+
+  return {
+    mainNumber,
+    personTitle,
+    oneLiner,
+    pyramid,
+    hasPyramid,
+    hasDecodeShape,
+    wuxing,
+    bars,
+    careDir,
+    emotionText,
+    todayTip,
+    constitutionDisclaimer,
+    lockTeaserNumber,
+    lockTeaserWuxing,
+    numberDeep,
+    constitutionDeep,
+    missing,
+    joints,
+  }
+}
diff --git a/apps/user-h5/src/composables/usePortraitPage.ts b/apps/user-h5/src/composables/usePortraitPage.ts
new file mode 100644
index 0000000..233537c
--- /dev/null
+++ b/apps/user-h5/src/composables/usePortraitPage.ts
@@ -0,0 +1,146 @@
+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 { AnalyticsEvent, track } from '../lib/analytics'
+import type { PortraitSharePayload } from '../lib/shareLink'
+
+export function usePortraitPage() {
+  const route = useRoute()
+  const loading = ref(false)
+  const needBirth = ref(true)
+  const error = ref('')
+  const formError = ref('')
+  const report = ref<GrowthReport | null>(null)
+  const paying = ref(false)
+  const shareOpen = ref(false)
+  const year = ref(String(route.query.y || ''))
+  const month = ref(String(route.query.m || ''))
+  const day = ref(String(route.query.d || ''))
+
+  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 keywords = computed(() =>
+    Array.isArray(summary.value.keywords) ? (summary.value.keywords as string[]) : [],
+  )
+  const sharePayload = computed<PortraitSharePayload | null>(() => {
+    if (!report.value) return null
+    return {
+      type: 'portrait',
+      title: headline.value || String(summary.value.person_title || '愈心解码'),
+      line: oneLiner.value,
+      keywords: keywords.value,
+    }
+  })
+
+  async function generate(y: number, m: number, d: number) {
+    loading.value = true
+    error.value = ''
+    formError.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.createPortrait(profile.id)
+      track(AnalyticsEvent.PortraitCompleted, { source: 'form' })
+    } 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) {
+      formError.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
+      error.value = ''
+      try {
+        report.value = await api.getReport(reportId)
+        track(AnalyticsEvent.PortraitCompleted, { source: 'report_id' })
+      } 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)
+      return
+    }
+    needBirth.value = true
+    loading.value = false
+  }
+
+  function retry() {
+    if (report.value) {
+      load()
+      return
+    }
+    needBirth.value = true
+    error.value = ''
+  }
+
+  async function buyDeep() {
+    if (!report.value) return
+    paying.value = true
+    error.value = ''
+    track(AnalyticsEvent.DeepAccessClicked, { surface: 'portrait' })
+    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)
+
+  return {
+    loading,
+    needBirth,
+    error,
+    formError,
+    report,
+    paying,
+    shareOpen,
+    year,
+    month,
+    day,
+    summary,
+    detail,
+    sharePayload,
+    start,
+    retry,
+    buyDeep,
+  }
+}
diff --git a/apps/user-h5/src/composables/useProfilePage.ts b/apps/user-h5/src/composables/useProfilePage.ts
index 3e82b49..3fe3127 100644
--- a/apps/user-h5/src/composables/useProfilePage.ts
+++ b/apps/user-h5/src/composables/useProfilePage.ts
@@ -1,50 +1,15 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import type { Profile } from '@yuxingu/types'
-import { api } from '../api/client'
-import { copyText } from '../lib/shareLink'
+import {
+  avatarInitial,
+  createProfilePageActions,
+  formatProfileDate,
+  profileRelationOptions,
+  relationLabel,
+} from './profilePageActions'
 
-export const profileRelationOptions = [
-  { value: 'family', label: '家人' },
-  { value: 'friend', label: '朋友' },
-  { value: 'partner', label: '伴侣' },
-  { value: 'colleague', label: '同事' },
-  { value: 'other', label: '其他' },
-]
-
-export function formatProfileDate(v: string) {
-  return (v || '').slice(0, 10)
-}
-
-export function avatarInitial(p: Profile) {
-  const n = p.display_name || (p.relation === 'self' ? '我' : 'T')
-  return n.slice(0, 1)
-}
-
-export function relationLabel(t?: string | null) {
-  const map: Record<string, string> = {
-    partner: '伴侣',
-    friend: '朋友',
-    family: '家人',
-    colleague: '同事',
-    other: '关系对象',
-  }
-  return map[t || ''] || '关系对象'
-}
-
-function splitBirth(v: string) {
-  const s = formatProfileDate(v)
-  const [y, m, d] = s.split('-')
-  return { y: y || '', m: m ? String(Number(m)) : '', d: d ? String(Number(d)) : '' }
-}
-
-function joinBirth(y: string, m: string, d: string) {
-  const yi = Number(y)
-  const mi = Number(m)
-  const di = Number(d)
-  if (!yi || !mi || !di) return ''
-  return `${yi}-${String(mi).padStart(2, '0')}-${String(di).padStart(2, '0')}`
-}
+export { profileRelationOptions, formatProfileDate, avatarInitial, relationLabel }
 
 export function useProfilePage() {
   const route = useRoute()
@@ -83,168 +48,53 @@ export function useProfilePage() {
   const selfProfile = computed(() => items.value.find((p) => p.relation === 'self'))
   const others = computed(() => items.value.filter((p) => p.relation !== 'self'))
 
-  function toggleAdd() {
-    showAddForm.value = !showAddForm.value
-    if (showAddForm.value) {
-      editing.value = null
-      showInviteFill.value = false
-    }
-  }
-
-  function openAddForm() {
-    showAddForm.value = true
-    showInviteFill.value = false
-    editing.value = null
-  }
-
-  function openInviteFill() {
-    showInviteFill.value = true
-    showAddForm.value = false
-    editing.value = null
-    inviteError.value = ''
-    if (!selfProfile.value) {
-      inviteHint.value = '请先完成自己的档案，再邀请好友填写。'
-    } else {
-      inviteHint.value = ''
-    }
-  }
-
-  function closeInviteFill() {
-    showInviteFill.value = false
-    void router.replace({ path: '/profile', query: {} })
-  }
-
-  function applyQueryFlags() {
-    if (route.query.add === '1') openAddForm()
-    if (route.query.inviteFill === '1') openInviteFill()
-  }
-
-  async function createFillInvite() {
-    if (!selfProfile.value) {
-      inviteError.value = '请先完成自己的档案'
-      return
-    }
-    inviting.value = true
-    inviteError.value = ''
-    inviteHint.value = ''
-    try {
-      const res = await api.createSynastryInvite(selfProfile.value.id)
-      invitePath.value = `${location.origin}${res.path}`
-      inviteHint.value = '好友打开链接后填写生日即可；也可用于合盘。'
-    } catch (e) {
-      inviteError.value = e instanceof Error ? e.message : '生成失败'
-    } finally {
-      inviting.value = false
-    }
-  }
-
-  async function copyInvite() {
-    if (!invitePath.value) return
-    copyBusy.value = true
-    const ok = await copyText(invitePath.value)
-    inviteHint.value = ok ? '链接已复制，发给家人或朋友即可。' : '复制失败，请长按链接手动复制。'
-    copyBusy.value = false
-  }
-
-  async function load() {
-    loading.value = true
-    error.value = ''
-    try {
-      const res = await api.listProfiles()
-      items.value = res.items || []
-    } catch (e) {
-      error.value = e instanceof Error ? e.message : '加载失败'
-    } finally {
-      loading.value = false
-    }
-  }
-
-  function startEdit(p: Profile) {
-    editing.value = p
-    showAddForm.value = false
-    formName.value = p.display_name || ''
-    const b = splitBirth(p.birth_date)
-    formY.value = b.y
-    formM.value = b.m
-    formD.value = b.d
-    formPlace.value = p.birth_place || ''
-    formRelationType.value = p.relation_type || 'partner'
-    formGeoVisible.value = !!p.geo_visible
-    formError.value = ''
-  }
-
-  async function saveEdit() {
-    if (!editing.value) return
-    saving.value = true
-    formError.value = ''
-    try {
-      const birth = joinBirth(formY.value, formM.value, formD.value)
-      if (!birth) throw new Error('请填写生日')
-      const body: {
-        display_name: string
-        birth_date: string
-        relation_type?: string
-        birth_place?: string
-        geo_visible?: boolean
-      } = {
-        display_name: formName.value.trim(),
-        birth_date: birth,
-        birth_place: formPlace.value || '',
-      }
-      if (editing.value.relation === 'other') body.relation_type = formRelationType.value
-      if (editing.value.relation === 'self') body.geo_visible = formGeoVisible.value
-      await api.updateProfile(editing.value.id, body)
-      editing.value = null
-      await load()
-    } catch (e) {
-      formError.value = e instanceof Error ? e.message : '保存失败'
-    } finally {
-      saving.value = false
-    }
-  }
-
-  async function remove(p: Profile) {
-    if (!confirm(`确定删除「${p.display_name || '档案'}」？`)) return
-    busyId.value = p.id
-    error.value = ''
-    try {
-      await api.deleteProfile(p.id)
-      if (editing.value?.id === p.id) editing.value = null
-      await load()
-    } catch (e) {
-      error.value = e instanceof Error ? e.message : '删除失败'
-    } finally {
-      busyId.value = ''
-    }
-  }
-
-  async function addOther() {
-    adding.value = true
-    addError.value = ''
-    try {
-      const birth = joinBirth(newY.value, newM.value, newD.value)
-      if (!birth) throw new Error('请填写生日')
-      await api.createProfile({
-        relation: 'other',
-        birth_date: birth,
-        display_name: newName.value.trim() || 'TA',
-        relation_type: newRelationType.value,
-        birth_place: newPlace.value || undefined,
-      })
-      newName.value = ''
-      newY.value = ''
-      newM.value = ''
-      newD.value = ''
-      newPlace.value = ''
-      showAddForm.value = false
-      await load()
-      if (route.query.add === '1') void router.replace({ path: '/profile', query: {} })
-    } catch (e) {
-      addError.value = e instanceof Error ? e.message : '添加失败'
-    } finally {
-      adding.value = false
-    }
-  }
+  const {
+    toggleAdd,
+    openInviteFill,
+    closeInviteFill,
+    applyQueryFlags,
+    createFillInvite,
+    copyInvite,
+    load,
+    startEdit,
+    saveEdit,
+    remove,
+    addOther,
+  } = createProfilePageActions({
+    items,
+    loading,
+    error,
+    busyId,
+    editing,
+    showAddForm,
+    showInviteFill,
+    formName,
+    formY,
+    formM,
+    formD,
+    formPlace,
+    formRelationType,
+    formGeoVisible,
+    formError,
+    saving,
+    newName,
+    newY,
+    newM,
+    newD,
+    newPlace,
+    newRelationType,
+    addError,
+    adding,
+    inviting,
+    invitePath,
+    inviteError,
+    inviteHint,
+    copyBusy,
+    selfProfile,
+    routeAdd: () => route.query.add as string | undefined,
+    routeInviteFill: () => route.query.inviteFill as string | undefined,
+    router,
+  })
 
   watch(
     () => [route.query.add, route.query.inviteFill],
diff --git a/apps/user-h5/src/composables/useReportPage.ts b/apps/user-h5/src/composables/useReportPage.ts
index 1285c12..eb0d85b 100644
--- a/apps/user-h5/src/composables/useReportPage.ts
+++ b/apps/user-h5/src/composables/useReportPage.ts
@@ -3,34 +3,33 @@ import { useRoute } from 'vue-router'
 import type { GrowthReport } from '@yuxingu/types'
 import { api } from '../api/client'
 import type { WheelAspect, WheelPlanet } from '../components/NatalWheel.vue'
-import type { SignCard } from '../components/SignCards.vue'
 import { AnalyticsEvent, track } from '../lib/analytics'
-import type { PortraitSharePayload, RelationSharePayload, SharePayload } from '../lib/shareLink'
-export const reportStarPanels = [
-  { key: 'chart', label: '星盘' },
-  { key: 'fortune', label: '运势' },
-  { key: 'planets', label: '行星' },
-]
+import {
+  ascLonFromSummary,
+  buildReportSharePayload,
+  formatCreatedAt,
+  fortuneBundleFrom,
+  mapAspectPreview,
+  mapTransits,
+  numOrNull,
+  planetsFrom,
+  relatedLinkForType,
+  reportFortuneKeys,
+  reportStarPanels,
+  reportSynTabs,
+  reportTypeLabel,
+  signCardsFrom,
+  summaryKeywords,
+  synActiveBlockFrom,
+  synChartPair,
+  synChartsFrom,
+  synOverlayFrom,
+  wheelPlanetsFrom,
+} from '../lib/reportSummary'
+import type { SharePayload } from '../lib/shareLink'
+import { asPlanets, ascLonFromChart } from '../lib/synastryChart'
 
-export const reportSynTabs = [
-  { key: 'compare', label: '比较' },
-  { key: 'composite', label: '组合' },
-  { key: 'davison', label: '时空' },
-  { key: 'marks_me', label: '马克斯' },
-  { key: 'overlay', label: '配对' },
-  { key: 'composite_progressed', label: '组合次限' },
-]
-
-export const reportFortuneKeys = ['daily', 'weekly', 'monthly', 'yearly', 'lifetime'] as const
-
-type FortunePeriod = {
-  title?: string
-  label?: string
-  score?: number
-  tip?: string
-  dims?: { love?: number; career?: number; money?: number; mood?: number }
-}
-type PlanetRow = { key: string; title: string; sign: string; degree: string; house: number }
+export { reportStarPanels, reportSynTabs, reportFortuneKeys }
 
 export function useReportPage() {
   const route = useRoute()
@@ -47,186 +46,46 @@ export function useReportPage() {
   const detail = computed(() => (report.value?.detail || null) as Record<string, unknown> | null)
   const headline = computed(() => String(summary.value.headline || summary.value.diff_one_liner || ''))
   const oneLiner = computed(() => String(summary.value.one_liner || summary.value.diff_one_liner || ''))
-  const keywords = computed(() => {
-    if (Array.isArray(summary.value.keywords)) return summary.value.keywords as string[]
-    const a = Array.isArray(summary.value.me_keywords) ? (summary.value.me_keywords as string[]) : []
-    const b = Array.isArray(summary.value.other_keywords) ? (summary.value.other_keywords as string[]) : []
-    return [...a, ...b]
-  })
-  const typeLabel = computed(() => {
-    const map: Record<string, string> = {
-      portrait: '愈心解码',
-      relation: '人格匹配',
-      synastry: '合盘',
-      star: '星座',
-      rhythm: '身心节律',
-      image_card: '意象卡片',
-    }
-    return map[report.value?.type || ''] || '成长报告'
-  })
+  const keywords = computed(() => summaryKeywords(summary.value))
+  const typeLabel = computed(() => reportTypeLabel(report.value?.type))
   const showModeTabs = computed(() => report.value?.type === 'star' || report.value?.type === 'synastry')
   const activePanels = computed(() => (report.value?.type === 'synastry' ? reportSynTabs : reportStarPanels))
+  const relatedLink = computed(() => relatedLinkForType(report.value?.type))
 
-  const relatedLink = computed(() => {
-    const t = report.value?.type
-    if (t === 'star') return { to: '/star', label: '星座' }
-    if (t === 'synastry') return { to: '/synastry', label: '合盘' }
-    if (t === 'portrait') return { to: '/portrait', label: '解码' }
-    if (t === 'relation') return { to: '/relation', label: '匹配' }
-    if (t === 'rhythm') return { to: '/rhythm', label: '节律' }
-    return { to: '/reports', label: '全部' }
-  })
+  const ascLon = computed(() => ascLonFromSummary(summary.value))
+  const wheelPlanets = computed<WheelPlanet[]>(() => wheelPlanetsFrom(summary.value))
+  const aspectPreview = computed<WheelAspect[]>(() => mapAspectPreview(summary.value.aspects_preview))
+  const transits = computed(() => mapTransits(summary.value))
 
-  const chartObj = computed(() =>
-    summary.value.chart && typeof summary.value.chart === 'object'
-      ? (summary.value.chart as Record<string, unknown>)
-      : {},
-  )
-  const ascLon = computed(() => (typeof chartObj.value.asc_lon === 'number' ? chartObj.value.asc_lon : null))
-  const wheelPlanets = computed<WheelPlanet[]>(() => {
-    const raw = summary.value.planets
-    if (!Array.isArray(raw)) return []
-    return raw.map((p) => {
-      const o = p as Record<string, unknown>
-      return {
-        key: String(o.key),
-        title: String(o.title),
-        sign: String(o.sign),
-        degree: String(o.degree),
-        house: Number(o.house),
-        lon: Number(o.lon),
-      }
-    })
-  })
-  const aspectPreview = computed<WheelAspect[]>(() => {
-    const raw = summary.value.aspects_preview
-    if (!Array.isArray(raw)) return []
-    return raw.map((a) => {
-      const o = a as Record<string, unknown>
-      return { a: String(o.a), b: String(o.b), type: String(o.type), orb: Number(o.orb) }
-    })
-  })
-  const transits = computed(() => {
-    const raw = summary.value.transits
-    if (Array.isArray(raw)) return raw as { key: string; title: string; aspect: string; tip: string }[]
-    const o = summary.value.outlook
-    if (o && typeof o === 'object' && Array.isArray((o as { transits?: unknown }).transits)) {
-      return (o as { transits: { key: string; title: string; aspect: string; tip: string }[] }).transits
-    }
-    return []
-  })
-  const synCharts = computed(() =>
-    summary.value.charts && typeof summary.value.charts === 'object'
-      ? (summary.value.charts as Record<string, unknown>)
-      : {},
-  )
-  const synActiveBlock = computed(() => {
-    const c = synCharts.value[panelKey.value]
-    return c && typeof c === 'object' ? (c as Record<string, unknown>) : null
-  })
+  const synCharts = computed(() => synChartsFrom(summary.value))
+  const synActiveBlock = computed(() => synActiveBlockFrom(synCharts.value, panelKey.value))
   const synActiveTip = computed(() => String(synActiveBlock.value?.tip || ''))
-  const synActivePlanets = computed<WheelPlanet[]>(() => {
-    const raw = synActiveBlock.value?.planets
-    if (!Array.isArray(raw)) return []
-    return raw.map((p) => {
-      const x = p as Record<string, unknown>
-      return {
-        key: String(x.key),
-        title: String(x.title),
-        sign: String(x.sign),
-        degree: String(x.degree),
-        house: Number(x.house),
-        lon: Number(x.lon),
-      }
-    })
-  })
-  const synActiveAsc = computed(() =>
-    typeof synActiveBlock.value?.asc_lon === 'number' ? (synActiveBlock.value.asc_lon as number) : null,
-  )
-  const synOverlayEntries = computed(() => {
-    const o = synCharts.value.overlay
-    if (!o || typeof o !== 'object') return []
-    const raw = (o as { entries?: unknown }).entries
-    return Array.isArray(raw) ? (raw as { planet: string; house: number; house_tip: string }[]) : []
-  })
+  const synActivePlanets = computed<WheelPlanet[]>(() => asPlanets(synActiveBlock.value?.planets))
+  const synActiveAsc = computed(() => ascLonFromChart(synActiveBlock.value))
+  const synOverlayEntries = computed(() => synOverlayFrom(synCharts.value))
+  const synPlanetsA = computed(() => synChartPair(summary.value, 'chart_a').planets)
+  const synPlanetsB = computed(() => synChartPair(summary.value, 'chart_b').planets)
+  const synAscA = computed(() => synChartPair(summary.value, 'chart_a').asc)
+  const synAscB = computed(() => synChartPair(summary.value, 'chart_b').asc)
 
-  function synChart(key: 'chart_a' | 'chart_b'): { planets: WheelPlanet[]; asc: number | null } {
-    const c = summary.value[key]
-    if (!c || typeof c !== 'object') return { planets: [], asc: null }
-    const o = c as { planets?: unknown; asc_lon?: number }
-    const planets = Array.isArray(o.planets)
-      ? o.planets.map((p) => {
-          const x = p as Record<string, unknown>
-          return {
-            key: String(x.key),
-            title: String(x.title),
-            sign: String(x.sign),
-            degree: String(x.degree),
-            house: Number(x.house),
-            lon: Number(x.lon),
-          }
-        })
-      : []
-    return { planets, asc: typeof o.asc_lon === 'number' ? o.asc_lon : null }
-  }
-  const synPlanetsA = computed(() => synChart('chart_a').planets)
-  const synPlanetsB = computed(() => synChart('chart_b').planets)
-  const synAscA = computed(() => synChart('chart_a').asc)
-  const synAscB = computed(() => synChart('chart_b').asc)
-  const createdLabel = computed(() => {
-    const t = report.value?.created_at
-    if (!t) return ''
-    try {
-      return new Date(t).toLocaleDateString('zh-CN')
-    } catch {
-      return t
-    }
-  })
-  const signCards = computed(() => {
-    const raw = summary.value.sign_cards
-    return Array.isArray(raw) ? (raw as SignCard[]) : []
-  })
+  const createdLabel = computed(() => formatCreatedAt(report.value?.created_at))
+  const signCards = computed(() => signCardsFrom(summary.value))
   const activeCard = computed(() => signCards.value.find((c) => c.key === signTab.value) || signCards.value[0])
-  const fortuneBundle = computed(() => {
-    const o = summary.value.outlook
-    return o && typeof o === 'object' ? (o as Record<string, FortunePeriod>) : {}
-  })
+  const fortuneBundle = computed(() => fortuneBundleFrom(summary.value))
   const activeFortune = computed(() => fortuneBundle.value[fortuneKey.value] || null)
-  const planets = computed(() => {
-    const raw = summary.value.planets
-    return Array.isArray(raw) ? (raw as PlanetRow[]) : []
-  })
-  const loveIndex = computed(() => (typeof summary.value.love_index === 'number' ? summary.value.love_index : null))
-  const friendIndex = computed(() =>
-    typeof summary.value.friend_index === 'number' ? summary.value.friend_index : null,
-  )
-  const marriageIndex = computed(() =>
-    typeof summary.value.marriage_index === 'number' ? summary.value.marriage_index : null,
-  )
+  const planets = computed(() => planetsFrom(summary.value))
+  const loveIndex = computed(() => numOrNull(summary.value.love_index))
+  const friendIndex = computed(() => numOrNull(summary.value.friend_index))
+  const marriageIndex = computed(() => numOrNull(summary.value.marriage_index))
   const hasMatchIndex = computed(
     () =>
       (report.value?.type === 'relation' || report.value?.type === 'synastry') &&
       (loveIndex.value != null || friendIndex.value != null || marriageIndex.value != null),
   )
 
-  const sharePayload = computed<SharePayload | null>(() => {
-    if (!report.value) return null
-    if (report.value.type === 'relation') {
-      return {
-        type: 'relation',
-        me: String(summary.value.me_style || ''),
-        other: String(summary.value.other_style || ''),
-        diff: String(summary.value.diff_one_liner || ''),
-        keywords: keywords.value,
-      } as RelationSharePayload
-    }
-    return {
-      type: 'portrait',
-      title: headline.value,
-      line: oneLiner.value,
-      keywords: keywords.value,
-    } as PortraitSharePayload
-  })
+  const sharePayload = computed<SharePayload | null>(() =>
+    buildReportSharePayload(report.value, summary.value, headline.value, oneLiner.value, keywords.value),
+  )
 
   async function load() {
     loading.value = true
diff --git a/apps/user-h5/src/composables/useStarProfilePage.ts b/apps/user-h5/src/composables/useStarProfilePage.ts
index 43d6b5c..6d41936 100644
--- a/apps/user-h5/src/composables/useStarProfilePage.ts
+++ b/apps/user-h5/src/composables/useStarProfilePage.ts
@@ -4,38 +4,29 @@ import type { GrowthReport } from '@yuxingu/types'
 import { validateBirth } from '@yuxingu/utils'
 import { api } from '../api/client'
 import type { WheelAspect, WheelPlanet } from '../components/NatalWheel.vue'
-import type { SignCard } from '../components/SignCards.vue'
 import { AnalyticsEvent, track } from '../lib/analytics'
+import {
+  ascLonFromSummary,
+  fortuneBundleFrom,
+  signCardsFrom,
+} from '../lib/reportSummary'
 import type { PortraitSharePayload } from '../lib/shareLink'
+import {
+  aspectLinesFrom,
+  aspectsFrom,
+  buildGridCells,
+  chartObjFrom,
+  fortuneLabel,
+  housesFromChart,
+  loadWheelSettings,
+  planetsAsRows,
+  saveWheelSettings,
+  starFortuneKeys,
+  starViewTabs,
+  toWheelPlanets,
+} from '../lib/starSummary'
 
-const SETTINGS_KEY = 'yuxingu_star_wheel_settings'
-
-export const starViewTabs = [
-  { key: 'overview' as const, label: '概览' },
-  { key: 'chart' as const, label: '星盘' },
-  { key: 'fortune' as const, label: '运势' },
-  { key: 'planets' as const, label: '行星' },
-]
-
-export const starFortuneKeys = ['daily', 'weekly', 'monthly', 'yearly', 'lifetime'] as const
-
-type FortunePeriod = {
-  title?: string
-  label?: string
-  score?: number
-  tip?: string
-  focus?: string
-  boost?: string
-  caution?: string
-  dims?: { love?: number; career?: number; money?: number; mood?: number }
-}
-type PlanetRow = WheelPlanet & { element?: string; modality?: string }
-type AspectRow = WheelAspect & { a_title?: string; b_title?: string; label?: string }
-type HouseRow = { num: number; sign: string }
-
-export function fortuneLabel(k: string) {
-  return ({ daily: '今日', weekly: '本周', monthly: '本月', yearly: '今年', lifetime: '一生' } as Record<string, string>)[k] || k
-}
+export { starViewTabs, starFortuneKeys, fortuneLabel }
 
 export function useStarProfilePage() {
   const route = useRoute()
@@ -52,106 +43,41 @@ export function useStarProfilePage() {
   const birthPlace = ref('')
   const view = ref<'overview' | 'chart' | 'fortune' | 'planets'>('overview')
   const signTab = ref('sun')
-  const fortuneKey = ref<'daily' | 'weekly' | 'monthly' | 'yearly' | 'lifetime'>('daily')
-  const showOuter = ref(true)
-  const tightOrb = ref(false)
+  const fortuneKey = ref<(typeof starFortuneKeys)[number]>('daily')
+  const settings = loadWheelSettings()
+  const showOuter = ref(settings.showOuter)
+  const tightOrb = ref(settings.tightOrb)
 
-  try {
-    const raw = localStorage.getItem(SETTINGS_KEY)
-    if (raw) {
-      const o = JSON.parse(raw) as { showOuter?: boolean; tightOrb?: boolean }
-      if (typeof o.showOuter === 'boolean') showOuter.value = o.showOuter
-      if (typeof o.tightOrb === 'boolean') tightOrb.value = o.tightOrb
-    }
-  } catch {
-    /* ignore */
-  }
   watch([showOuter, tightOrb], () => {
-    localStorage.setItem(SETTINGS_KEY, JSON.stringify({ showOuter: showOuter.value, tightOrb: tightOrb.value }))
+    saveWheelSettings(showOuter.value, tightOrb.value)
   })
 
   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 keywords = computed(() => (Array.isArray(summary.value.keywords) ? (summary.value.keywords as string[]) : []))
-  const chartObj = computed(() =>
-    summary.value.chart && typeof summary.value.chart === 'object' ? (summary.value.chart as Record<string, unknown>) : {},
+  const keywords = computed(() =>
+    Array.isArray(summary.value.keywords) ? (summary.value.keywords as string[]) : [],
   )
+  const chartObj = computed(() => chartObjFrom(summary.value))
   const chartNote = computed(() => String(chartObj.value.note || ''))
-  const ascLon = computed(() => (typeof chartObj.value.asc_lon === 'number' ? chartObj.value.asc_lon : null))
-  const houses = computed(() => (Array.isArray(chartObj.value.houses) ? (chartObj.value.houses as HouseRow[]) : []))
-  const signCards = computed(() => {
-    const raw = summary.value.sign_cards
-    return Array.isArray(raw) ? (raw as SignCard[]) : []
-  })
+  const ascLon = computed(() => ascLonFromSummary(summary.value))
+  const houses = computed(() => housesFromChart(chartObj.value))
+  const signCards = computed(() => signCardsFrom(summary.value))
   const activeCard = computed(() => signCards.value.find((c) => c.key === signTab.value) || signCards.value[0])
-  const fortuneBundle = computed(() => {
-    const o = summary.value.outlook
-    return o && typeof o === 'object' ? (o as Record<string, FortunePeriod>) : {}
-  })
+  const fortuneBundle = computed(() => fortuneBundleFrom(summary.value))
   const activeFortune = computed(() => fortuneBundle.value[fortuneKey.value] || null)
-  const planets = computed(() => {
-    const raw = summary.value.planets
-    return Array.isArray(raw) ? (raw as PlanetRow[]) : []
-  })
-  const wheelPlanets = computed<WheelPlanet[]>(() =>
-    planets.value.map((p) => ({
-      key: p.key,
-      title: p.title,
-      sign: p.sign,
-      degree: p.degree,
-      house: p.house,
-      lon: Number(p.lon),
-      element: p.element,
-      modality: p.modality,
-    })),
-  )
-  const aspectPreview = computed(() => {
-    const raw = summary.value.aspects_preview
-    return Array.isArray(raw) ? (raw as AspectRow[]) : []
-  })
+  const planets = computed(() => planetsAsRows(summary.value))
+  const wheelPlanets = computed<WheelPlanet[]>(() => toWheelPlanets(planets.value))
+  const aspectPreview = computed(() => aspectsFrom(summary.value.aspects_preview))
   const fullAspects = computed(() => {
     const raw = detail.value?.aspects
-    return Array.isArray(raw) ? (raw as AspectRow[]) : aspectPreview.value
+    return Array.isArray(raw) ? aspectsFrom(raw) : aspectPreview.value
   })
-  const aspectLines = computed<WheelAspect[]>(() => {
-    const src = report.value?.has_deep_access ? fullAspects.value : aspectPreview.value
-    return src.map((a) => ({ a: a.a, b: a.b, type: a.type, orb: a.orb, label: a.label }))
-  })
-
-  const gridCells = computed(() => {
-    const cards = signCards.value
-    const slots: { key: string; nick: string; role: string; center?: boolean }[] = []
-    const order = ['sun', 'moon', 'rise', 'venus', 'mars', 'mercury', 'north_node', 'juno', 'jupiter']
-    const byKey = new Map(cards.map((c) => [c.key, c]))
-    const planetByKey = new Map(planets.value.map((p) => [p.key, p]))
-    for (let i = 0; i < 9; i++) {
-      if (i === 4) {
-        slots.push({ key: '_center', nick: '', role: '', center: true })
-        continue
-      }
-      const key = order[i < 4 ? i : i - 1] || cards[i]?.key || `p${i}`
-      const c = byKey.get(key)
-      const p = planetByKey.get(key)
-      if (c) {
-        slots.push({
-          key: c.key,
-          nick: (c.teaser || c.label || c.title).slice(0, 6),
-          role: `${c.title}${c.label}`,
-        })
-      } else if (p) {
-        slots.push({ key: p.key, nick: p.sign, role: `${p.title}${p.sign}` })
-      } else if (cards[i < 4 ? i : i - 1]) {
-        const x = cards[i < 4 ? i : i - 1]
-        slots.push({ key: x.key, nick: (x.teaser || x.label).slice(0, 6), role: `${x.title}${x.label}` })
-      } else {
-        slots.push({ key: `empty${i}`, nick: '—', role: '待生成' })
-      }
-    }
-    return slots
-  })
-
+  const aspectLines = computed<WheelAspect[]>(() =>
+    aspectLinesFrom(report.value?.has_deep_access, fullAspects.value, aspectPreview.value),
+  )
+  const gridCells = computed(() => buildGridCells(signCards.value, planets.value))
   const sharePayload = computed<PortraitSharePayload | null>(() => {
     if (!report.value) return null
     return { type: 'portrait', title: headline.value || '我的星座', line: oneLiner.value, keywords: keywords.value }
diff --git a/apps/user-h5/src/lib/reportSummary.ts b/apps/user-h5/src/lib/reportSummary.ts
new file mode 100644
index 0000000..8b27c5b
--- /dev/null
+++ b/apps/user-h5/src/lib/reportSummary.ts
@@ -0,0 +1,181 @@
+import type { GrowthReport } from '@yuxingu/types'
+import type { WheelAspect, WheelPlanet } from '../components/NatalWheel.vue'
+import type { SignCard } from '../components/SignCards.vue'
+import type { PortraitSharePayload, RelationSharePayload, SharePayload } from './shareLink'
+import { asPlanets, ascLonFromChart, chartBlock, overlayEntriesFrom } from './synastryChart'
+
+export const reportStarPanels = [
+  { key: 'chart', label: '星盘' },
+  { key: 'fortune', label: '运势' },
+  { key: 'planets', label: '行星' },
+]
+
+export const reportSynTabs = [
+  { key: 'compare', label: '比较' },
+  { key: 'composite', label: '组合' },
+  { key: 'davison', label: '时空' },
+  { key: 'marks_me', label: '马克斯' },
+  { key: 'overlay', label: '配对' },
+  { key: 'composite_progressed', label: '组合次限' },
+]
+
+export const reportFortuneKeys = ['daily', 'weekly', 'monthly', 'yearly', 'lifetime'] as const
+
+export type FortunePeriod = {
+  title?: string
+  label?: string
+  score?: number
+  tip?: string
+  focus?: string
+  boost?: string
+  caution?: string
+  dims?: { love?: number; career?: number; money?: number; mood?: number }
+}
+
+export type PlanetRow = { key: string; title: string; sign: string; degree: string; house: number }
+
+export type TransitRow = { key: string; title: string; aspect: string; tip: string }
+
+export function reportTypeLabel(type?: string) {
+  const map: Record<string, string> = {
+    portrait: '愈心解码',
+    relation: '人格匹配',
+    synastry: '合盘',
+    star: '星座',
+    rhythm: '身心节律',
+    image_card: '意象卡片',
+  }
+  return map[type || ''] || '成长报告'
+}
+
+export function relatedLinkForType(t?: string) {
+  if (t === 'star') return { to: '/star', label: '星座' }
+  if (t === 'synastry') return { to: '/synastry', label: '合盘' }
+  if (t === 'portrait') return { to: '/portrait', label: '解码' }
+  if (t === 'relation') return { to: '/relation', label: '匹配' }
+  if (t === 'rhythm') return { to: '/rhythm', label: '节律' }
+  return { to: '/reports', label: '全部' }
+}
+
+export function summaryKeywords(summary: Record<string, unknown>): string[] {
+  if (Array.isArray(summary.keywords)) return summary.keywords as string[]
+  const a = Array.isArray(summary.me_keywords) ? (summary.me_keywords as string[]) : []
+  const b = Array.isArray(summary.other_keywords) ? (summary.other_keywords as string[]) : []
+  return [...a, ...b]
+}
+
+export function chartObjFrom(summary: Record<string, unknown>): Record<string, unknown> {
+  return summary.chart && typeof summary.chart === 'object'
+    ? (summary.chart as Record<string, unknown>)
+    : {}
+}
+
+export function mapAspectPreview(raw: unknown): WheelAspect[] {
+  if (!Array.isArray(raw)) return []
+  return raw.map((a) => {
+    const o = a as Record<string, unknown>
+    return { a: String(o.a), b: String(o.b), type: String(o.type), orb: Number(o.orb) }
+  })
+}
+
+export function mapTransits(summary: Record<string, unknown>): TransitRow[] {
+  const raw = summary.transits
+  if (Array.isArray(raw)) return raw as TransitRow[]
+  const o = summary.outlook
+  if (o && typeof o === 'object' && Array.isArray((o as { transits?: unknown }).transits)) {
+    return (o as { transits: TransitRow[] }).transits
+  }
+  return []
+}
+
+export function synChartsFrom(summary: Record<string, unknown>): Record<string, unknown> {
+  return summary.charts && typeof summary.charts === 'object'
+    ? (summary.charts as Record<string, unknown>)
+    : {}
+}
+
+export function synActiveBlockFrom(
+  charts: Record<string, unknown>,
+  panelKey: string,
+): Record<string, unknown> | null {
+  return chartBlock(charts, panelKey)
+}
+
+export function synChartPair(
+  summary: Record<string, unknown>,
+  key: 'chart_a' | 'chart_b',
+): { planets: WheelPlanet[]; asc: number | null } {
+  const c = summary[key]
+  if (!c || typeof c !== 'object') return { planets: [], asc: null }
+  const o = c as { planets?: unknown; asc_lon?: number }
+  return { planets: asPlanets(o.planets), asc: typeof o.asc_lon === 'number' ? o.asc_lon : null }
+}
+
+export function synOverlayFrom(charts: Record<string, unknown>) {
+  return overlayEntriesFrom(charts).map((e) => ({
+    planet: e.planet,
+    house: e.house,
+    house_tip: e.house_tip,
+  }))
+}
+
+export function formatCreatedAt(t?: string) {
+  if (!t) return ''
+  try {
+    return new Date(t).toLocaleDateString('zh-CN')
+  } catch {
+    return t
+  }
+}
+
+export function signCardsFrom(summary: Record<string, unknown>): SignCard[] {
+  const raw = summary.sign_cards
+  return Array.isArray(raw) ? (raw as SignCard[]) : []
+}
+
+export function fortuneBundleFrom(summary: Record<string, unknown>): Record<string, FortunePeriod> {
+  const o = summary.outlook
+  return o && typeof o === 'object' ? (o as Record<string, FortunePeriod>) : {}
+}
+
+export function planetsFrom(summary: Record<string, unknown>): PlanetRow[] {
+  const raw = summary.planets
+  return Array.isArray(raw) ? (raw as PlanetRow[]) : []
+}
+
+export function wheelPlanetsFrom(summary: Record<string, unknown>): WheelPlanet[] {
+  return asPlanets(summary.planets)
+}
+
+export function ascLonFromSummary(summary: Record<string, unknown>): number | null {
+  return ascLonFromChart(chartObjFrom(summary))
+}
+
+export function numOrNull(v: unknown): number | null {
+  return typeof v === 'number' ? v : null
+}
+
+export function buildReportSharePayload(
+  report: GrowthReport | null,
+  summary: Record<string, unknown>,
+  headline: string,
+  oneLiner: string,
+  keywords: string[],
+): SharePayload | null {
+  if (!report) return null
+  if (report.type === 'relation') {
+    return {
+      type: 'relation',
+      me: String(summary.me_style || ''),
+      other: String(summary.other_style || ''),
+      diff: String(summary.diff_one_liner || ''),
+      keywords,
+    } as RelationSharePayload
+  }
+  return {
+    type: 'portrait',
+    title: headline,
+    line: oneLiner,
+    keywords,
+  } as PortraitSharePayload
+}
diff --git a/apps/user-h5/src/lib/starSummary.ts b/apps/user-h5/src/lib/starSummary.ts
new file mode 100644
index 0000000..dc2c6f3
--- /dev/null
+++ b/apps/user-h5/src/lib/starSummary.ts
@@ -0,0 +1,119 @@
+import type { WheelAspect, WheelPlanet } from '../components/NatalWheel.vue'
+import type { SignCard } from '../components/SignCards.vue'
+import type { FortunePeriod } from './reportSummary'
+import { chartObjFrom, fortuneBundleFrom, signCardsFrom } from './reportSummary'
+
+export type { FortunePeriod }
+export { chartObjFrom, fortuneBundleFrom, signCardsFrom }
+
+export const SETTINGS_KEY = 'yuxingu_star_wheel_settings'
+
+export const starViewTabs = [
+  { key: 'overview' as const, label: '概览' },
+  { key: 'chart' as const, label: '星盘' },
+  { key: 'fortune' as const, label: '运势' },
+  { key: 'planets' as const, label: '行星' },
+]
+
+export const starFortuneKeys = ['daily', 'weekly', 'monthly', 'yearly', 'lifetime'] as const
+
+export type PlanetRow = WheelPlanet & { element?: string; modality?: string }
+export type AspectRow = WheelAspect & { a_title?: string; b_title?: string; label?: string }
+export type HouseRow = { num: number; sign: string }
+
+export type GridCell = { key: string; nick: string; role: string; center?: boolean }
+
+export function fortuneLabel(k: string) {
+  return (
+    ({ daily: '今日', weekly: '本周', monthly: '本月', yearly: '今年', lifetime: '一生' } as Record<
+      string,
+      string
+    >)[k] || k
+  )
+}
+
+export function housesFromChart(chart: Record<string, unknown>): HouseRow[] {
+  return Array.isArray(chart.houses) ? (chart.houses as HouseRow[]) : []
+}
+
+export function planetsAsRows(summary: Record<string, unknown>): PlanetRow[] {
+  const raw = summary.planets
+  return Array.isArray(raw) ? (raw as PlanetRow[]) : []
+}
+
+export function toWheelPlanets(planets: PlanetRow[]): WheelPlanet[] {
+  return planets.map((p) => ({
+    key: p.key,
+    title: p.title,
+    sign: p.sign,
+    degree: p.degree,
+    house: p.house,
+    lon: Number(p.lon),
+    element: p.element,
+    modality: p.modality,
+  }))
+}
+
+export function aspectsFrom(raw: unknown): AspectRow[] {
+  return Array.isArray(raw) ? (raw as AspectRow[]) : []
+}
+
+export function aspectLinesFrom(
+  hasDeep: boolean | undefined,
+  full: AspectRow[],
+  preview: AspectRow[],
+): WheelAspect[] {
+  const src = hasDeep ? full : preview
+  return src.map((a) => ({ a: a.a, b: a.b, type: a.type, orb: a.orb, label: a.label }))
+}
+
+export function buildGridCells(cards: SignCard[], planets: PlanetRow[]): GridCell[] {
+  const slots: GridCell[] = []
+  const order = ['sun', 'moon', 'rise', 'venus', 'mars', 'mercury', 'north_node', 'juno', 'jupiter']
+  const byKey = new Map(cards.map((c) => [c.key, c]))
+  const planetByKey = new Map(planets.map((p) => [p.key, p]))
+  for (let i = 0; i < 9; i++) {
+    if (i === 4) {
+      slots.push({ key: '_center', nick: '', role: '', center: true })
+      continue
+    }
+    const key = order[i < 4 ? i : i - 1] || cards[i]?.key || `p${i}`
+    const c = byKey.get(key)
+    const p = planetByKey.get(key)
+    if (c) {
+      slots.push({
+        key: c.key,
+        nick: (c.teaser || c.label || c.title).slice(0, 6),
+        role: `${c.title}${c.label}`,
+      })
+    } else if (p) {
+      slots.push({ key: p.key, nick: p.sign, role: `${p.title}${p.sign}` })
+    } else if (cards[i < 4 ? i : i - 1]) {
+      const x = cards[i < 4 ? i : i - 1]
+      slots.push({ key: x.key, nick: (x.teaser || x.label).slice(0, 6), role: `${x.title}${x.label}` })
+    } else {
+      slots.push({ key: `empty${i}`, nick: '—', role: '待生成' })
+    }
+  }
+  return slots
+}
+
+export function loadWheelSettings(): { showOuter: boolean; tightOrb: boolean } {
+  try {
+    const raw = localStorage.getItem(SETTINGS_KEY)
+    if (raw) {
+      const o = JSON.parse(raw) as { showOuter?: boolean; tightOrb?: boolean }
+      return {
+        showOuter: typeof o.showOuter === 'boolean' ? o.showOuter : true,
+        tightOrb: typeof o.tightOrb === 'boolean' ? o.tightOrb : false,
+      }
+    }
+  } catch {
+    /* ignore */
+  }
+  return { showOuter: true, tightOrb: false }
+}
+
+export function saveWheelSettings(showOuter: boolean, tightOrb: boolean) {
+  localStorage.setItem(SETTINGS_KEY, JSON.stringify({ showOuter, tightOrb }))
+}
diff --git a/apps/user-h5/src/pages/PortraitPage.vue b/apps/user-h5/src/pages/PortraitPage.vue
index 0b8e542..6e68dc2 100644
--- a/apps/user-h5/src/pages/PortraitPage.vue
+++ b/apps/user-h5/src/pages/PortraitPage.vue
@@ -56,7 +56,6 @@
       <p class="yxg-disc">自我探索与生活方式参考，不是占卜或算命。体质内容非医疗建议。</p>
     </div>
 
-    <!-- Sticky bottom CTAs -->
     <div v-if="report" class="sticky-bar">
       <router-link class="sticky-btn" to="/ask">去问答</router-link>
       <router-link class="sticky-btn primary" to="/relation">去做匹配</router-link>
@@ -68,135 +67,32 @@
 </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 DecodePanel from '../components/DecodePanel.vue'
 import HomeToolIcon from '../components/HomeToolIcon.vue'
 import PageShell from '../components/PageShell.vue'
 import ShareSheet from '../components/ShareSheet.vue'
-import { AnalyticsEvent, track } from '../lib/analytics'
-import type { PortraitSharePayload } from '../lib/shareLink'
+import { usePortraitPage } from '../composables/usePortraitPage'
 
-const route = useRoute()
-const loading = ref(false)
-const needBirth = ref(true)
-const error = ref('')
-const formError = ref('')
-const report = ref<GrowthReport | null>(null)
-const paying = ref(false)
-const shareOpen = ref(false)
-const year = ref(String(route.query.y || ''))
-const month = ref(String(route.query.m || ''))
-const day = ref(String(route.query.d || ''))
-
-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 keywords = computed(() => (Array.isArray(summary.value.keywords) ? (summary.value.keywords as string[]) : []))
-const sharePayload = computed<PortraitSharePayload | null>(() => {
-  if (!report.value) return null
-  return {
-    type: 'portrait',
-    title: headline.value || String(summary.value.person_title || '愈心解码'),
-    line: oneLiner.value,
-    keywords: keywords.value,
-  }
-})
-
-async function generate(y: number, m: number, d: number) {
-  loading.value = true
-  error.value = ''
-  formError.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.createPortrait(profile.id)
-    track(AnalyticsEvent.PortraitCompleted, { source: 'form' })
-  } 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) {
-    formError.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
-    error.value = ''
-    try {
-      report.value = await api.getReport(reportId)
-      track(AnalyticsEvent.PortraitCompleted, { source: 'report_id' })
-    } 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)
-    return
-  }
-  needBirth.value = true
-  loading.value = false
-}
-
-function retry() {
-  if (report.value) {
-    load()
-    return
-  }
-  needBirth.value = true
-  error.value = ''
-}
-
-async function buyDeep() {
-  if (!report.value) return
-  paying.value = true
-  error.value = ''
-  track(AnalyticsEvent.DeepAccessClicked, { surface: 'portrait' })
-  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,
+  formError,
+  report,
+  paying,
+  shareOpen,
+  year,
+  month,
+  day,
+  summary,
+  detail,
+  sharePayload,
+  start,
+  retry,
+  buyDeep,
+} = usePortraitPage()
 </script>
 
 <style scoped>
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 7dac0a9..6d5b794 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -13,3 +13,4 @@
 - QA：修 Playwright `/psy/` 路径与过时断言；e2e 2/2 绿（见 TEST_REPORT/ECR-001-phaseF-qa.md）
 - **ECR-001 Closed**；**ECR-002 Closed**；**ECR-003**：删 JSON `fortune` 双写，`lucky`→`boost`，H5 改读 `outlook`
 - **ECR-004**：Synastry 再拆 · Scale vitest · Membership nil 守卫 · OpenAPI schemas · GitHub CI
+- **ECR-005**：Ask/Decode/Portrait/Report/Star/Profile 再拆；OpenAPI 关键 path `$ref`
diff --git a/docs/CODE_REVIEW/ECR-005.md b/docs/CODE_REVIEW/ECR-005.md
new file mode 100644
index 0000000..ef21c8b
--- /dev/null
+++ b/docs/CODE_REVIEW/ECR-005.md
@@ -0,0 +1,6 @@
+# CODE_REVIEW — ECR-005
+
+**Decision: PASS / Approve**
+
+Blockers: 无  
+Nits: ReportsPage 299 行可贴线后再拆；OpenAPI 仍有部分 path 仅 description。
diff --git a/docs/ECR/ECR-005-h5-openapi-hygiene.md b/docs/ECR/ECR-005-h5-openapi-hygiene.md
new file mode 100644
index 0000000..7d07454
--- /dev/null
+++ b/docs/ECR/ECR-005-h5-openapi-hygiene.md
@@ -0,0 +1,23 @@
+# ECR-005
+
+**Title:** H5 二次拆分与 OpenAPI 契约补强  
+**Status:** Approved  
+**Date:** 2026-08-05  
+**Change Level:** L2（结构 / 契约；无产品扩行为）  
+
+## Change
+
+1. 拆分 AskAiPane / DecodePanel；抽出 usePortraitPage / useDecodePanel  
+2. 精简 useReportPage / useStarProfilePage / useProfilePage（纯函数/actions 外提）  
+3. OpenAPI：报告/档案/探索测试/意象卡关键 path 挂 `$ref`；star 描述改为 outlook  
+
+## Acceptance
+
+- [x] 上述目标文件 ≤250（ReportsPage 299 贴线可接受）  
+- [x] test:h5 36/36 · build:h5  
+- [x] OpenAPI 关键 GrowthReport / Profile / ScaleDetail / ImageCard 信封  
+- [x] ESS 工件  
+
+## Linked
+
+TASK / STATE / TEST_REPORT / CODE_REVIEW under ECR-005  
diff --git a/docs/ENGINEERING_SPEC/ECR-005-h5-openapi-hygiene.md b/docs/ENGINEERING_SPEC/ECR-005-h5-openapi-hygiene.md
new file mode 100644
index 0000000..3de00b2
--- /dev/null
+++ b/docs/ENGINEERING_SPEC/ECR-005-h5-openapi-hygiene.md
@@ -0,0 +1,3 @@
+# ENGINEERING_SPEC — ECR-005
+
+See ECR-005. Move/extract only; OpenAPI additive `$ref`.
diff --git a/docs/PROJECT_PROFILE.md b/docs/PROJECT_PROFILE.md
index 2e442f5..b52bab9 100644
--- a/docs/PROJECT_PROFILE.md
+++ b/docs/PROJECT_PROFILE.md
@@ -45,9 +45,9 @@
 
 ## Active anchors
 
-- ECR: **ECR-004** hygiene follow-up（Approved）；ECR-001/002/003 Closed / shipped
+- ECR: **ECR-005** H5/OpenAPI hygiene（Approved）；ECR-001–004 Closed / shipped
 - EXP: （无）
-- STATE: `docs/STATE/ECR-004.md`
+- STATE: `docs/STATE/ECR-005.md`
 - TRACEABILITY: `docs/TRACEABILITY.md`
 - ADR: `.ai/adr/0007-ess-ai-dual-track.md`
 - Product status: `.ai/product/p1-status.md`（**P1 Complete**）
diff --git a/docs/STATE/ECR-005.md b/docs/STATE/ECR-005.md
new file mode 100644
index 0000000..1ce08f5
--- /dev/null
+++ b/docs/STATE/ECR-005.md
@@ -0,0 +1,7 @@
+# STATE — ECR-005
+
+| Field | Value |
+|-------|--------|
+| ECR | ECR-005 |
+| Status | review PASS · awaiting push |
+| Updated | 2026-08-05 |
diff --git a/docs/TASKS/TASK-20260805-ECR005.yaml b/docs/TASKS/TASK-20260805-ECR005.yaml
new file mode 100644
index 0000000..2b40614
--- /dev/null
+++ b/docs/TASKS/TASK-20260805-ECR005.yaml
@@ -0,0 +1,23 @@
+# docs/TASKS/TASK-20260805-ECR005.yaml
+task_id: ECR-005-h5-openapi
+role: engineer
+phase: coding
+tool: cursor
+status: coded
+
+input:
+  - docs/ECR/ECR-005-h5-openapi-hygiene.md
+  - .ai/coding.md
+
+output:
+  - apps/user-h5/src/**
+  - proto/openapi.yaml
+  - docs/TEST_REPORT/ECR-005.md
+
+forbidden:
+  - redesign_scope
+  - api_url_change
+  - behavior_change
+
+next_agent: reviewer
+notes: Ask/Decode/Portrait/Report/Star/Profile splits + OpenAPI refs.
diff --git a/docs/TEST_REPORT/ECR-005.md b/docs/TEST_REPORT/ECR-005.md
new file mode 100644
index 0000000..83a4665
--- /dev/null
+++ b/docs/TEST_REPORT/ECR-005.md
@@ -0,0 +1,9 @@
+# Test Report — ECR-005
+
+- [x] AskAiPane 97 · DecodePanel 102 · PortraitPage 225  
+- [x] useReport 169 · useStar 228 · useProfile 152  
+- [x] OpenAPI GrowthReport/Profile/ScaleDetail/ImageCard `$ref`  
+- [x] `npm run test:h5` 36/36 · `build:h5` PASS  
+
+## Gate
+PASS
diff --git a/docs/TRACEABILITY.md b/docs/TRACEABILITY.md
index fff24dd..0807127 100644
--- a/docs/TRACEABILITY.md
+++ b/docs/TRACEABILITY.md
@@ -10,3 +10,4 @@
 | ECR-002 | fortune→outlook package | **Closed** | `docs/ECR/ECR-002-fortune-hygiene.md` |
 | ECR-003 | outlook JSON hygiene（删 fortune / lucky→boost） | review PASS | TEST_REPORT · CODE_REVIEW/ECR-003.md |
 | ECR-004 | Synastry 再拆 · Scale 测 · Membership 守卫 · OpenAPI · CI | review PASS | TEST_REPORT · CODE_REVIEW/ECR-004.md |
+| ECR-005 | Ask/Decode/Portrait 再拆 · composable 外提 · OpenAPI `$ref` | review PASS | TEST_REPORT · CODE_REVIEW/ECR-005.md |
diff --git a/proto/openapi.yaml b/proto/openapi.yaml
index c32eb18..aad1363 100644
--- a/proto/openapi.yaml
+++ b/proto/openapi.yaml
@@ -63,6 +63,14 @@ paths:
       responses:
         '200':
           description: OK
+          content:
+            application/json:
+              schema:
+                allOf:
+                  - $ref: '#/components/schemas/Envelope'
+                  - type: object
+                    properties:
+                      data: { $ref: '#/components/schemas/Profile' }
 
   /api/v1/profiles/{id}:
     patch:
@@ -73,6 +81,14 @@ paths:
       responses:
         '200':
           description: OK
+          content:
+            application/json:
+              schema:
+                allOf:
+                  - $ref: '#/components/schemas/Envelope'
+                  - type: object
+                    properties:
+                      data: { $ref: '#/components/schemas/Profile' }
     delete:
       tags: [profile]
       summary: 删除个人档案
@@ -98,6 +114,10 @@ paths:
       responses:
         '200':
           description: 返回 GrowthReport（detail 按权益裁剪）
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/EnvelopeGrowthReport'
 
   /api/v1/explore/catalog:
     get:
@@ -179,7 +199,11 @@ paths:
                 profile_id: { type: string, format: uuid }
       responses:
         '200':
-          description: GrowthReport type=star（含 chart/planets/aspects_preview/fortune/transits）
+          description: GrowthReport type=star（含 chart/planets/aspects_preview/outlook/transits）
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/EnvelopeGrowthReport'
 
   /api/v1/reports/synastry:
     post:
@@ -274,6 +298,10 @@ paths:
       responses:
         '200':
           description: GrowthReport type=synastry
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/EnvelopeGrowthReport'
 
   /api/v1/reports/rhythm:
     post:
@@ -291,6 +319,10 @@ paths:
       responses:
         '200':
           description: GrowthReport type=rhythm
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/EnvelopeGrowthReport'
 
   /api/v1/image-cards/scenes:
     get:
@@ -299,6 +331,10 @@ paths:
       responses:
         '200':
           description: OK
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/EnvelopeImageCardScenes'
 
   /api/v1/image-cards/quota:
     get:
@@ -307,6 +343,10 @@ paths:
       responses:
         '200':
           description: OK
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/EnvelopeImageCardQuota'
 
   /api/v1/image-cards/draw:
     post:
@@ -354,6 +394,10 @@ paths:
       responses:
         '200':
           description: OK
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/EnvelopeReportList'
 
   /api/v1/reports/{id}:
     get:
@@ -364,6 +408,10 @@ paths:
       responses:
         '200':
           description: OK
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/EnvelopeGrowthReport'
 
   /api/v1/scales:
     get:
@@ -389,6 +437,10 @@ paths:
       responses:
         '200':
           description: OK
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/EnvelopeScaleDetail'
 
   /api/v1/scales/{slug}/result:
     post:
@@ -756,3 +808,41 @@ components:
         - type: object
           properties:
             data: { $ref: '#/components/schemas/AskQuota' }
+
+    EnvelopeReportList:
+      allOf:
+        - $ref: '#/components/schemas/Envelope'
+        - type: object
+          properties:
+            data:
+              type: object
+              properties:
+                items:
+                  type: array
+                  items: { $ref: '#/components/schemas/GrowthReport' }
+
+    EnvelopeScaleDetail:
+      allOf:
+        - $ref: '#/components/schemas/Envelope'
+        - type: object
+          properties:
+            data: { $ref: '#/components/schemas/ScaleDetail' }
+
+    EnvelopeImageCardScenes:
+      allOf:
+        - $ref: '#/components/schemas/Envelope'
+        - type: object
+          properties:
+            data:
+              type: object
+              properties:
+                items:
+                  type: array
+                  items: { $ref: '#/components/schemas/ImageCardScene' }
+
+    EnvelopeImageCardQuota:
+      allOf:
+        - $ref: '#/components/schemas/Envelope'
+        - type: object
+          properties:
+            data: { $ref: '#/components/schemas/ImageCardQuota' }