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

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

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

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

@@ -1,60 +1,142 @@
 <template>
-  <main class="yxg-page">
-    <div class="yxg-hero">
-      <BackButton />
-      <PageTitle feature="relation" title="人格匹配" sub="合盘指数 · 恋爱/友情/婚姻 · 相处建议" />
-    </div>
-    <div class="yxg-sheet sheet-pad">
-      <div class="yxg-card">
-        <label class="yxg-label">TA 的称呼</label>
-        <input class="yxg-input" v-model="otherName" placeholder="例如：伴侣" />
-        <label class="yxg-label">关系类型</label>
-        <select class="yxg-select" v-model="relationType">
-          <option value="partner">伴侣</option>
-          <option value="friend">朋友</option>
-          <option value="family">家人</option>
-          <option value="other">其他</option>
-        </select>
-        <label class="yxg-label">TA 的生日</label>
-        <BirthDateInputs v-model:year="oy" v-model:month="om" v-model:day="od" compact />
-        <p class="yxg-hint">将使用你最近一份「我」的档案进行匹配。</p>
-        <p v-if="loading" class="yxg-hint">生成中…</p>
-        <button class="yxg-btn yxg-btn-block" type="button" :disabled="loading" @click="run">
-          {{ loading ? '生成中…' : '开始匹配' }}
-        </button>
-        <p v-if="error" class="yxg-err">
-          {{ error }}
-          <router-link v-if="needSelf" class="yxg-link" to="/">去首页做愈心解码</router-link>
-        </p>
+  <PageShell>
+    <template #hero>
+      <div class="top-row">
+        <BackButton />
+        <span class="who-static">人格匹配</span>
+        <button v-if="report" type="button" class="share-ico" aria-label="分享" @click="shareOpen = true">↗</button>
+        <span v-else class="spacer" />
       </div>
+    </template>
+
+    <div class="body">
+      <template v-if="!report">
+        <div class="hero-block">
+          <h1 class="hero-title">看见彼此的相处模样</h1>
+          <p class="hero-sub">基于档案与生日，理解相处模式 · 性格对照 · 默契指数</p>
+        </div>
+
+        <div class="focus-chips" role="tablist">
+          <button
+            v-for="f in focusTabs"
+            :key="f.key"
+            type="button"
+            class="fchip"
+            :class="{ on: focus === f.key }"
+            @click="focus = f.key"
+          >
+            {{ f.label }}
+          </button>
+        </div>
+
+        <div class="deco-card" aria-hidden="true">
+          <div class="deco-blur">
+            <span class="deco-av me" />
+            <span class="deco-heart">♡</span>
+            <span class="deco-av ta" />
+          </div>
+          <p class="deco-hint">{{ focusHint }}</p>
+        </div>
+
+        <div class="yxg-card form-card">
+          <label class="yxg-label">关系类型</label>
+          <div class="rel-chips">
+            <button
+              v-for="r in relationOptions"
+              :key="r.value"
+              type="button"
+              class="rchip"
+              :class="{ on: relationType === r.value }"
+              @click="relationType = r.value"
+            >
+              {{ r.label }}
+            </button>
+          </div>
+          <label class="yxg-label">TA 的称呼</label>
+          <input class="yxg-input" v-model="otherName" placeholder="例如：伴侣" />
+          <label class="yxg-label">TA 的生日</label>
+          <BirthDateInputs v-model:year="oy" v-model:month="om" v-model:day="od" compact />
+          <p class="yxg-hint">将使用你最近一份「我」的档案进行匹配。</p>
+          <button class="cta" type="button" :disabled="loading" @click="run">
+            {{ loading ? '生成中…' : '去匹配' }}
+          </button>
+          <p v-if="error" class="yxg-err">
+            {{ error }}
+            <router-link v-if="needSelf" class="yxg-link" to="/">去首页做愈心解码</router-link>
+          </p>
+        </div>
+      </template>
+
+      <template v-else>
+        <p class="diff-lead">{{ diff }}</p>
+
+        <div class="mode-tabs" role="tablist">
+          <button
+            v-for="t in resultTabs"
+            :key="t.key"
+            type="button"
+            class="mode-tab"
+            :class="{ on: tab === t.key }"
+            @click="tab = t.key"
+          >
+            {{ t.label }}
+          </button>
+        </div>
+
+        <template v-if="tab === 'index'">
+          <div class="pair-spot">
+            <div class="who"><span class="tag">我</span><strong>{{ meStyle || '—' }}</strong></div>
+            <span class="vs">×</span>
+            <div class="who"><span class="tag">TA</span><strong>{{ otherStyle || '—' }}</strong></div>
+          </div>
+          <div class="spotlight-row">
+            <div v-if="harmony != null" class="spot big">
+              <em>默契指数</em>
+              <strong>{{ harmony }}</strong>
+            </div>
+            <div v-if="fitLabel" class="spot badge-spot">
+              <span class="fit-badge">{{ fitLabel }}</span>
+            </div>
+          </div>
+          <div class="indices">
+            <div class="idx"><em>恋爱</em><strong>{{ loveIndex ?? '—' }}</strong></div>
+            <div class="idx"><em>友情</em><strong>{{ friendIndex ?? '—' }}</strong></div>
+            <div class="idx"><em>婚姻</em><strong>{{ marriageIndex ?? '—' }}</strong></div>
+          </div>
+        </template>
+
+        <template v-else-if="tab === 'compare'">
+          <MatchCompare
+            :me-style="meStyle"
+            :other-style="otherStyle"
+            :fit-label="fitLabel"
+            :harmony="harmony"
+            :love="loveIndex"
+            :friend="friendIndex"
+            :marriage="marriageIndex"
+            :star-compare="starCompare"
+            :dimensions="dimCompare"
+          />
+        </template>
+
+        <p v-else class="tips-intro">基于你们的档案，以下是相处与沟通建议。</p>
 
-      <template v-if="report">
-        <p class="yxg-lead">{{ diff }}</p>
-        <MatchCompare
-          :me-style="meStyle"
-          :other-style="otherStyle"
-          :fit-label="fitLabel"
-          :harmony="harmony"
-          :love="loveIndex"
-          :friend="friendIndex"
-          :marriage="marriageIndex"
-          :star-compare="starCompare"
-          :dimensions="dimCompare"
-        />
         <ReportRich :summary="summary" :detail="detail" :deep="!!report.has_deep_access" />
-        <div v-if="!report.has_deep_access" class="yxg-card lock">
-          <p>完整相处建议、冲突修复、对话示例与本周练习可在深度版或成长会员中查看。</p>
-          <button class="yxg-btn" type="button" :disabled="paying" @click="buyDeep">解锁完整分析（模拟支付）</button>
+
+        <div v-if="!report.has_deep_access" class="lock-card">
+          <p>完整相处建议、冲突修复与本周练习可在深度版或成长会员中查看。</p>
+          <button class="cta soft" type="button" :disabled="paying" @click="buyDeep">解锁完整分析</button>
         </div>
-        <div class="links">
-          <router-link class="yxg-link-plain" to="/star">看看星座 →</router-link>
-          <router-link class="yxg-link-plain" to="/portrait">回看愈心解码 →</router-link>
+
+        <div class="sticky-bar">
+          <button type="button" class="sb-btn" @click="shareOpen = true">分享</button>
+          <router-link class="sb-btn primary" to="/ask">去问答</router-link>
+          <router-link class="sb-btn" to="/synastry">合盘</router-link>
         </div>
-        <button type="button" class="yxg-btn yxg-btn-ghost share-btn" @click="shareOpen = true">生成分享卡</button>
       </template>
     </div>
     <ShareSheet :open="shareOpen" :payload="sharePayload" @close="shareOpen = false" />
-  </main>
+  </PageShell>
 </template>
 
 <script setup lang="ts">
@@ -64,7 +146,7 @@ import { api } from '../api/client'
 import BackButton from '../components/BackButton.vue'
 import BirthDateInputs from '../components/BirthDateInputs.vue'
 import MatchCompare from '../components/MatchCompare.vue'
-import PageTitle from '../components/PageTitle.vue'
+import PageShell from '../components/PageShell.vue'
 import ReportRich from '../components/ReportRich.vue'
 import ShareSheet from '../components/ShareSheet.vue'
 import { AnalyticsEvent, track } from '../lib/analytics'
@@ -81,6 +163,34 @@ const error = ref('')
 const report = ref<GrowthReport | null>(null)
 const shareOpen = ref(false)
 const needSelf = ref(false)
+const focus = ref('mode')
+const tab = ref<'index' | 'compare' | 'tips'>('index')
+
+const focusTabs = [
+  { key: 'mode', label: '相处模式' },
+  { key: 'personality', label: '性格对照' },
+  { key: 'sync', label: '默契指数' },
+]
+const relationOptions = [
+  { value: 'partner', label: '伴侣' },
+  { value: 'friend', label: '朋友' },
+  { value: 'family', label: '家人' },
+  { value: 'other', label: '其他' },
+]
+const resultTabs = [
+  { key: 'index' as const, label: '指数' },
+  { key: 'compare' as const, label: '对照' },
+  { key: 'tips' as const, label: '建议' },
+]
+
+const focusHint = computed(() => {
+  const map: Record<string, string> = {
+    mode: '看见日常互动里，谁更主动、谁更需要空间',
+    personality: '对照彼此的性格关键词与表达习惯',
+    sync: '恋爱 · 友情 · 婚姻维度的默契参考',
+  }
+  return map[focus.value] || map.mode
+})
 
 const summary = computed(() => (report.value?.summary || {}) as Record<string, unknown>)
 const detail = computed(() => (report.value?.detail || null) as Record<string, unknown> | null)
@@ -140,9 +250,7 @@ async function run() {
     const y = Number(oy.value)
     const m = Number(om.value)
     const d = Number(od.value)
-    if (!y || !m || !d) {
-      throw new Error('请填写 TA 的完整生日')
-    }
+    if (!y || !m || !d) throw new Error('请填写 TA 的完整生日')
     const self = await ensureSelf()
     const birth = `${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`
     const other = await api.createProfile({
@@ -153,6 +261,7 @@ async function run() {
     })
     const out = await api.createRelationInsight(self.id, other.id)
     report.value = out.report
+    tab.value = 'index'
     track(AnalyticsEvent.RelationCompleted)
   } catch (e) {
     const msg = e instanceof Error ? e.message : '生成失败'
@@ -181,9 +290,237 @@ async function buyDeep() {
 </script>
 
 <style scoped>
-.yxg-card{margin:8px 0 12px}
-.yxg-card .yxg-label:first-child{margin-top:0}
-.yxg-btn{margin-top:12px}
-.lock .yxg-btn,.share-btn{width:100%}
-.links{display:flex;flex-direction:column;gap:8px;margin:12px 0}
+.top-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-bottom: 4px;
+}
+.who-static {
+  flex: 1;
+  font-size: 16px;
+  font-weight: 700;
+  text-align: center;
+}
+.spacer { width: 36px; }
+.share-ico {
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.8);
+  font-size: 16px;
+}
+.body { padding: 8px 16px 88px; }
+.hero-block { text-align: center; padding: 12px 8px 4px; }
+.hero-title {
+  font-family: var(--font-display);
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: #222;
+}
+.hero-sub { font-size: 13px; color: #888; margin-top: 8px; line-height: 1.5; }
+.focus-chips {
+  display: flex;
+  gap: 8px;
+  margin: 14px 0;
+  justify-content: center;
+}
+.fchip {
+  padding: 8px 14px;
+  border-radius: var(--radius-pill);
+  border: 1px solid #f0ebe8;
+  background: #fafafa;
+  font-size: 12px;
+  color: #666;
+  font-weight: 600;
+}
+.fchip.on {
+  background: #fff5f4;
+  border-color: #f5c4bc;
+  color: var(--color-primary);
+}
+.deco-card {
+  margin-bottom: 14px;
+  padding: 20px 16px;
+  border-radius: var(--radius-xl);
+  background: linear-gradient(145deg, #fff0ec, #ffe4dc);
+  text-align: center;
+  overflow: hidden;
+}
+.deco-blur {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  filter: blur(0.5px);
+}
+.deco-av {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: linear-gradient(145deg, #ffd0c4, #ffb8a8);
+  opacity: 0.85;
+}
+.deco-av.ta { background: linear-gradient(145deg, #d8eaff, #b4d2f5); }
+.deco-heart { font-size: 20px; color: var(--color-primary); opacity: 0.7; }
+.deco-hint { margin-top: 12px; font-size: 12px; color: #8a6a5a; line-height: 1.45; }
+.form-card { margin-top: 4px; }
+.rel-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
+.rchip {
+  padding: 8px 16px;
+  border-radius: var(--radius-pill);
+  border: 1px solid #eee;
+  background: #fafafa;
+  font-size: 13px;
+  color: #666;
+}
+.rchip.on {
+  background: linear-gradient(135deg, #ff7a6e, var(--color-primary));
+  color: #fff;
+  border-color: transparent;
+}
+.cta {
+  margin-top: 14px;
+  width: 100%;
+  padding: 13px;
+  border: none;
+  border-radius: 22px;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 600;
+  background: linear-gradient(135deg, #ff7a6e, var(--color-primary));
+  box-shadow: 0 6px 16px rgba(229, 77, 66, 0.28);
+}
+.cta.soft {
+  background: #fff;
+  color: var(--color-primary);
+  border: 1.5px solid #f5c4bc;
+  box-shadow: none;
+}
+.cta:disabled { opacity: 0.45; }
+.diff-lead {
+  font-size: 15px;
+  font-weight: 600;
+  color: #444;
+  line-height: 1.5;
+  margin-bottom: 12px;
+}
+.pair-spot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-bottom: 12px;
+  padding: 14px;
+  border-radius: var(--radius-xl);
+  background: #fafafa;
+}
+.pair-spot .who { text-align: center; flex: 1; }
+.pair-spot .tag {
+  display: block;
+  font-size: 11px;
+  color: #999;
+  margin-bottom: 4px;
+}
+.pair-spot strong { font-size: 14px; color: #222; }
+.pair-spot .vs { font-size: 18px; color: var(--color-primary); opacity: 0.6; }
+.mode-tabs {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 14px;
+  background: #fafafa;
+  border-radius: var(--radius-pill);
+  padding: 4px;
+}
+.mode-tab {
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 9px 4px;
+  border-radius: var(--radius-pill);
+  font-size: 13px;
+  color: #888;
+  font-weight: 600;
+}
+.mode-tab.on {
+  background: #fff;
+  color: var(--color-primary);
+  box-shadow: 0 2px 8px rgba(229, 77, 66, 0.1);
+}
+.spotlight-row { display: flex; gap: 10px; margin-bottom: 12px; }
+.spot {
+  flex: 1;
+  padding: 16px;
+  border-radius: var(--radius-xl);
+  background: linear-gradient(145deg, #fff0ec, #ffe4dc);
+  text-align: center;
+  box-shadow: var(--shadow-card);
+}
+.spot em { display: block; font-style: normal; font-size: 12px; color: #999; margin-bottom: 4px; }
+.spot strong { font-size: 32px; font-family: var(--font-display); color: var(--color-primary); }
+.badge-spot { display: flex; align-items: center; justify-content: center; }
+.fit-badge {
+  background: linear-gradient(135deg, #ff7a6e, var(--color-primary));
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  padding: 8px 14px;
+  border-radius: var(--radius-pill);
+}
+.indices {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.idx {
+  background: #fff5f4;
+  border: 1px solid #ffe0dc;
+  border-radius: 14px;
+  padding: 12px 8px;
+  text-align: center;
+}
+.idx em { display: block; font-style: normal; font-size: 11px; color: #999; margin-bottom: 4px; }
+.idx strong { font-size: 22px; color: var(--color-primary); font-family: var(--font-display); }
+.lock-card {
+  margin-top: 12px;
+  padding: 16px;
+  background: linear-gradient(145deg, #fff8e8, #ffeec8);
+  border-radius: var(--radius-xl);
+}
+.tips-intro { font-size: 13px; color: #888; margin-bottom: 12px; line-height: 1.5; }
+.sticky-bar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 20;
+  display: flex;
+  gap: 8px;
+  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(12px);
+  border-top: 1px solid #f0ebe8;
+}
+.sb-btn {
+  flex: 1;
+  padding: 11px 8px;
+  border-radius: 22px;
+  border: 1.5px solid #f0ebe8;
+  background: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  color: #555;
+  text-align: center;
+  text-decoration: none;
+}
+.sb-btn.primary {
+  background: linear-gradient(135deg, #ff7a6e, var(--color-primary));
+  color: #fff;
+  border: none;
+}
+.yxg-label { display: block; margin: 12px 0 6px; font-size: 12px; color: #999; }
+.yxg-label:first-child { margin-top: 0; }
 </style>