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

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

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

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

@@ -1,52 +1,108 @@
 <template>
-  <main class="yxg-page">
-    <div class="yxg-hero">
+  <PageShell>
+    <template #hero>
       <BackButton />
-      <PageTitle feature="cards" title="意象卡片" sub="选一个场景，抽取一张（或组合）卡片做反思练习" />
-    </div>
-    <div class="yxg-sheet sheet-pad">
-      <p v-if="bootError" class="yxg-err">{{ bootError }}</p>
-      <template v-else>
-        <p class="yxg-meta quota">今日剩余 {{ quotaLabel }}</p>
-        <div class="scenes">
-          <button
-            v-for="s in scenes"
-            :key="s.key"
-            type="button"
-            class="yxg-chip yxg-chip-solid scene"
-            :class="{ on: scene === s.key }"
-            @click="selectScene(s.key)"
-          ><span class="si icon-teal" aria-hidden="true">◈</span>{{ s.label }}</button>
-        </div>
+    </template>
 
-        <div class="yxg-card">
-          <label class="yxg-label">生日（用于关联档案）</label>
+    <div class="body" :class="{ 'has-results': cards.length }">
+      <!-- Greeting -->
+      <div class="greet">
+        <div class="greet-icons" aria-hidden="true">
+          <HomeToolIcon name="cards" :size="44" />
+          <HomeToolIcon name="ask" :size="36" class="icon-offset" />
+        </div>
+        <h1 class="greet-title">Hi，我是愈心 AI</h1>
+        <p class="greet-sub">来用意念卡片整理问题吧</p>
+        <p v-if="bootError" class="yxg-err">{{ bootError }}（仍可填写后重试抽取）</p>
+        <p class="quota">今日剩余 {{ quotaLabel }} · 场景 {{ scene }}</p>
+      </div>
+
+      <!-- Prompt rows (landing) -->
+      <div v-if="!cards.length" class="prompt-list">
+        <button
+          v-for="(row, i) in promptRows"
+          :key="i"
+          type="button"
+          class="prompt-row"
+          @click="onPromptClick(row)"
+        >
+          <span class="prompt-ico" aria-hidden="true">{{ row.icon }}</span>
+          <span class="prompt-text">{{ row.label }}</span>
+          <span class="prompt-go" aria-hidden="true">→</span>
+        </button>
+      </div>
+
+      <!-- Mode chips -->
+      <div v-if="!cards.length" class="mode-row" role="group" aria-label="抽卡模式">
+        <button
+          type="button"
+          class="mode-chip"
+          :class="{ on: !wantDepth }"
+          @click="wantDepth = false"
+        >
+          单卡
+        </button>
+        <button
+          type="button"
+          class="mode-chip"
+          :class="{ on: wantDepth }"
+          @click="wantDepth = true"
+        >
+          三卡组合
+        </button>
+      </div>
+
+      <!-- Collapsible birth -->
+      <div v-if="!cards.length" class="birth-fold">
+        <button type="button" class="birth-toggle" @click="showBirth = !showBirth">
+          <span>关联生日</span>
+          <span class="caret" :class="{ open: showBirth }">▾</span>
+        </button>
+        <div v-show="showBirth" class="birth-panel yxg-card soft">
           <BirthDateInputs v-model:year="year" v-model:month="month" v-model:day="day" compact />
-          <label class="chk"><input v-model="wantDepth" type="checkbox" /> 请求三卡组合（会员直接解锁；否则可模拟支付）</label>
           <button class="yxg-btn yxg-btn-block" type="button" :disabled="drawing" @click="draw">
             {{ drawing ? '抽取中…' : '抽取卡片' }}
           </button>
-          <p v-if="error" class="yxg-err">{{ error }}</p>
         </div>
+      </div>
 
-        <template v-if="cards.length">
-          <article v-for="c in cards" :key="c.id" class="yxg-card">
-            <h2 class="card-title">{{ c.title }}</h2>
-            <p class="imagery">{{ c.imagery }}</p>
-            <p><strong>反思</strong> {{ c.prompt }}</p>
-            <p class="tip">{{ c.tip }}</p>
-          </article>
-          <ReportRich v-if="report" :summary="summary" :detail="detail" :deep="!!report.has_deep_access" />
-          <div v-if="report && !report.has_deep_access && wantDepth" class="yxg-card lock">
-            <p>三卡组合解读需深度版或成长会员。</p>
-            <button class="yxg-btn" type="button" :disabled="paying" @click="buyDeep">解锁组合（模拟支付）</button>
-          </div>
-          <router-link v-if="report" class="yxg-link-plain report-link" :to="`/reports/${report.id}`">在报告页打开 →</router-link>
-        </template>
+      <!-- Results -->
+      <template v-if="cards.length">
+        <article v-for="c in cards" :key="c.id" class="yxg-card card-result">
+          <h2 class="card-title">{{ c.title }}</h2>
+          <p class="imagery">{{ c.imagery }}</p>
+          <p><strong>反思</strong> {{ c.prompt }}</p>
+          <p class="tip">{{ c.tip }}</p>
+        </article>
+        <ReportRich v-if="report" :summary="summary" :detail="detail" :deep="!!report.has_deep_access" />
+        <div v-if="report && !report.has_deep_access && wantDepth" class="yxg-card lock">
+          <p>三卡组合解读需深度版或成长会员。</p>
+          <button class="yxg-btn" type="button" :disabled="paying" @click="buyDeep">解锁组合（模拟支付）</button>
+        </div>
+        <router-link v-if="report" class="yxg-link-plain report-link" :to="`/reports/${report.id}`">
+          在报告页打开 →
+        </router-link>
       </template>
-      <p class="yxg-disc">意象卡片用于投射与自我反思，不判定好坏，也不预测未来。</p>
+
+      <p class="yxg-disc ai-note">意象卡片用于投射与自我反思，不判定好坏，也不预测未来。部分内容由 AI 生成，仅供参考。</p>
+      <p v-if="error" class="yxg-err err-float">{{ error }}</p>
     </div>
-  </main>
+
+    <!-- Bottom input bar -->
+    <div v-if="!cards.length" class="input-bar">
+      <input
+        v-model="questionInput"
+        type="text"
+        class="question-in"
+        placeholder="让我来解答你的问题吧"
+        @keydown.enter="sendDraw"
+      />
+      <button type="button" class="send-btn" :disabled="drawing" aria-label="发送并抽取" @click="sendDraw">
+        <span v-if="drawing" class="send-spin">…</span>
+        <span v-else class="send-ico" aria-hidden="true">↑</span>
+      </button>
+    </div>
+  </PageShell>
 </template>
 
 <script setup lang="ts">
@@ -56,7 +112,8 @@ import { validateBirth } from '@yuxingu/utils'
 import { api } from '../api/client'
 import BackButton from '../components/BackButton.vue'
 import BirthDateInputs from '../components/BirthDateInputs.vue'
-import PageTitle from '../components/PageTitle.vue'
+import HomeToolIcon from '../components/HomeToolIcon.vue'
+import PageShell from '../components/PageShell.vue'
 import ReportRich from '../components/ReportRich.vue'
 import { AnalyticsEvent, track } from '../lib/analytics'
 
@@ -73,6 +130,15 @@ const error = ref('')
 const bootError = ref('')
 const cards = ref<{ id: string; title: string; imagery: string; prompt: string; tip: string }[]>([])
 const report = ref<GrowthReport | null>(null)
+const questionInput = ref('')
+const showBirth = ref(false)
+
+const promptRows = [
+  { icon: '🌊', label: '最近情绪有点乱，帮我理一理', scene: '情绪整理' },
+  { icon: '💬', label: '和 TA 相处时，我总在重复什么模式？', scene: '关系反思' },
+  { icon: '🪞', label: '我想更了解自己此刻的状态', scene: '自我觉察' },
+  { icon: '🍃', label: '生活节奏太快，我需要一点方向感', scene: '生活节奏' },
+]
 
 const summary = computed(() => (report.value?.summary || {}) as Record<string, unknown>)
 const detail = computed(() => (report.value?.detail || null) as Record<string, unknown> | null)
@@ -82,11 +148,35 @@ const quotaLabel = computed(() => {
   return `${quota.value.remaining} / ${quota.value.daily_free}`
 })
 
+function birthFilled() {
+  const y = Number(year.value)
+  const m = Number(month.value)
+  const d = Number(day.value)
+  return !validateBirth(y, m, d)
+}
+
 function selectScene(key: string) {
   scene.value = key
   track('cards_scene_selected', { scene: key })
 }
 
+function onPromptClick(row: { label: string; scene: string }) {
+  selectScene(row.scene)
+  questionInput.value = row.label
+  if (birthFilled()) {
+    draw()
+  } else {
+    showBirth.value = true
+  }
+}
+
+function sendDraw() {
+  if (questionInput.value.trim()) {
+    scene.value = questionInput.value.trim()
+  }
+  draw()
+}
+
 async function refreshQuota() {
   quota.value = await api.getImageCardQuota()
 }
@@ -111,6 +201,7 @@ async function draw() {
   const msg = validateBirth(y, m, d)
   if (msg) {
     error.value = msg
+    showBirth.value = true
     return
   }
   drawing.value = true
@@ -160,19 +251,216 @@ onMounted(boot)
 </script>
 
 <style scoped>
-.quota{margin:0 0 10px}
-.scenes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
-.scene{display:inline-flex;align-items:center;gap:6px}
-.si{
-  width:22px;height:22px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
-  font-size:12px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.03);
+.body {
+  padding: 0 16px 88px;
+}
+.body.has-results {
+  padding-bottom: 24px;
+}
+
+.greet {
+  text-align: center;
+  padding: 8px 0 20px;
+}
+.greet-icons {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 4px;
+  margin-bottom: 12px;
+}
+.icon-offset {
+  margin-bottom: -4px;
+  opacity: 0.85;
+}
+.greet-title {
+  font-family: var(--font-display);
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--color-text-primary);
+  letter-spacing: 0.04em;
+  margin: 0;
+}
+.greet-sub {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  margin: 6px 0 10px;
+}
+.quota {
+  font-size: 11px;
+  color: var(--color-text-tertiary);
+  margin: 0;
+}
+
+.prompt-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 18px;
+}
+.prompt-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 14px;
+  border: none;
+  border-radius: var(--radius-xl);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-card);
+  text-align: left;
+  cursor: pointer;
+  transition: transform var(--duration-fast) ease;
+}
+.prompt-row:active {
+  transform: scale(0.985);
+}
+.prompt-ico {
+  font-size: 22px;
+  flex-shrink: 0;
+  width: 36px;
+  text-align: center;
+}
+.prompt-text {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  line-height: 1.45;
+}
+.prompt-go {
+  font-size: 14px;
+  color: var(--color-primary);
+  opacity: 0.6;
+}
+
+.mode-row {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+.mode-chip {
+  border: 1.5px solid #eee;
+  background: #fff;
+  border-radius: 999px;
+  padding: 8px 20px;
+  font-size: 13px;
+  color: #666;
+  cursor: pointer;
+}
+.mode-chip.on {
+  background: linear-gradient(135deg, #ff7a6e, var(--color-primary));
+  color: #fff;
+  border-color: transparent;
+  box-shadow: 0 4px 12px rgba(229, 77, 66, 0.22);
+}
+
+.birth-fold {
+  margin-bottom: 12px;
+}
+.birth-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 12px 14px;
+  border: none;
+  border-radius: var(--radius-lg);
+  background: rgba(255, 255, 255, 0.7);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+.caret {
+  transition: transform 0.2s ease;
+}
+.caret.open {
+  transform: rotate(180deg);
+}
+.birth-panel {
+  margin-top: 8px;
+}
+.birth-panel :deep(.bd) {
+  margin: 8px 0 12px;
+}
+
+.card-result {
+  margin-bottom: 12px;
+}
+.imagery {
+  color: #666;
+  margin-bottom: 8px;
+}
+.tip {
+  color: #3d6b45;
+  margin-top: 6px;
+}
+.lock .yxg-btn {
+  margin-top: 12px;
+  width: 100%;
+}
+.report-link {
+  display: block;
+  margin-top: 12px;
+}
+.ai-note {
+  margin-top: 16px;
+}
+.err-float {
+  margin-top: 8px;
+}
+
+.input-bar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0));
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
+}
+.question-in {
+  flex: 1;
+  border: 1.5px solid #eee;
+  border-radius: 22px;
+  padding: 11px 16px;
+  font-size: 14px;
+  background: #fdfaf8;
+  outline: none;
+}
+.question-in:focus {
+  border-color: rgba(229, 77, 66, 0.35);
+}
+.send-btn {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  border: none;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #ff7a6e, var(--color-primary));
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(229, 77, 66, 0.28);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.send-btn:disabled {
+  opacity: 0.6;
+}
+.send-ico {
+  line-height: 1;
+  margin-top: -2px;
 }
-.yxg-card{margin:0 0 12px}
-.yxg-card .yxg-label:first-child{margin-top:0}
-:deep(.bd){margin:8px 0 12px}
-.chk{display:flex;align-items:center;gap:8px;font-size:13px;color:#666;margin:4px 0 12px}
-.imagery{color:#666;margin-bottom:8px}
-.tip{color:#3d6b45;margin-top:6px}
-.lock .yxg-btn{margin-top:12px;width:100%}
-.report-link{display:block;margin-top:12px}
 </style>