feat: P1 合盘/星座/问答与测测完整设计包及模拟器取证工具

落地 synastry/star/ask API 与 H5 页面，补齐 cece-frontend-re complete-design 证据文档，并加入 Android 模拟器截图抓取脚本。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-03 11:37:53 +08:00
parent 15a9db374a
commit bd22d9dddd
248 changed files with 26309 additions and 842 deletions
@@ -0,0 +1,178 @@
+<template>
+  <main class="yxg-page">
+    <div class="yxg-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>
+
+        <div class="yxg-card">
+          <label class="yxg-label">生日（用于关联档案）</label>
+          <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>
+
+        <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>
+      </template>
+      <p class="yxg-disc">意象卡片用于投射与自我反思，不判定好坏，也不预测未来。</p>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+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 PageTitle from '../components/PageTitle.vue'
+import ReportRich from '../components/ReportRich.vue'
+import { AnalyticsEvent, track } from '../lib/analytics'
+
+const scenes = ref<{ key: string; label: string }[]>([])
+const scene = ref('情绪整理')
+const quota = ref<{ remaining: number; daily_free: number; unlimited: boolean } | null>(null)
+const year = ref('')
+const month = ref('')
+const day = ref('')
+const wantDepth = ref(false)
+const drawing = ref(false)
+const paying = ref(false)
+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 summary = computed(() => (report.value?.summary || {}) as Record<string, unknown>)
+const detail = computed(() => (report.value?.detail || null) as Record<string, unknown> | null)
+const quotaLabel = computed(() => {
+  if (!quota.value) return '…'
+  if (quota.value.unlimited) return '不限（会员）'
+  return `${quota.value.remaining} / ${quota.value.daily_free}`
+})
+
+function selectScene(key: string) {
+  scene.value = key
+  track('cards_scene_selected', { scene: key })
+}
+
+async function refreshQuota() {
+  quota.value = await api.getImageCardQuota()
+}
+
+async function boot() {
+  try {
+    const [sc] = await Promise.all([api.listImageCardScenes(), refreshQuota()])
+    scenes.value = sc.items || []
+    if (scenes.value.length && !scenes.value.find((s) => s.key === scene.value)) {
+      scene.value = scenes.value[0].key
+    }
+  } catch (e) {
+    bootError.value = e instanceof Error ? e.message : '加载失败'
+  }
+}
+
+async function draw() {
+  error.value = ''
+  const y = Number(year.value)
+  const m = Number(month.value)
+  const d = Number(day.value)
+  const msg = validateBirth(y, m, d)
+  if (msg) {
+    error.value = msg
+    return
+  }
+  drawing.value = true
+  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: '我' })
+    const out = await api.drawImageCard({
+      profile_id: profile.id,
+      scene: scene.value,
+      depth: wantDepth.value,
+    })
+    cards.value = out.cards || []
+    report.value = out.report
+    quota.value = {
+      remaining: out.quota_left,
+      daily_free: quota.value?.daily_free || 3,
+      unlimited: !!quota.value?.unlimited,
+    }
+    track('cards_drawn', { scene: scene.value, depth: wantDepth.value ? 1 : 0 })
+  } catch (e) {
+    const m = e instanceof Error ? e.message : '抽取失败'
+    error.value = m
+    if (m.includes('次数')) track('cards_quota_exhausted')
+  } finally {
+    drawing.value = false
+  }
+}
+
+async function buyDeep() {
+  if (!report.value) return
+  paying.value = true
+  error.value = ''
+  track(AnalyticsEvent.DeepAccessClicked, { surface: 'cards' })
+  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(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);
+}
+.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>