refactor(ECR-001): Phase F types/sdk 对齐并拆分超标 H5 页
抽出 OpenAPI DTO；将 Ask/Report/Profile/Star 等 8 页拆到 ≤400 行，并修 ScaleSummary、fortuneKey、Scale 选答与单测。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jackyu66git
@@ -10,283 +10,85 @@
|
||||
</template>
|
||||
|
||||
<div class="body">
|
||||
<template v-if="!report">
|
||||
<div class="hero-block">
|
||||
<h1 class="hero-title">看见彼此的相处模样</h1>
|
||||
<p class="hero-sub">基于档案与生日，理解相处模式 · 性格对照 · 默契指数</p>
|
||||
</div>
|
||||
<RelationLanding
|
||||
v-if="!report"
|
||||
v-model:focus="focus"
|
||||
v-model:relation-type="relationType"
|
||||
v-model:other-name="otherName"
|
||||
v-model:oy="oy"
|
||||
v-model:om="om"
|
||||
v-model:od="od"
|
||||
:focus-hint="focusHint"
|
||||
:loading="loading"
|
||||
:error="error"
|
||||
:need-self="needSelf"
|
||||
@run="run"
|
||||
/>
|
||||
|
||||
<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>
|
||||
|
||||
<ReportRich :summary="summary" :detail="detail" :deep="!!report.has_deep_access" />
|
||||
|
||||
<div v-if="!report.has_deep_access" class="lock-card">
|
||||
<p>完整相处建议、冲突修复与本周练习可在深度版或成长会员中查看。</p>
|
||||
<button class="cta soft" type="button" :disabled="paying" @click="buyDeep">解锁完整分析</button>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
<RelationResult
|
||||
v-else
|
||||
v-model:tab="tab"
|
||||
:diff="diff"
|
||||
:me-style="meStyle"
|
||||
:other-style="otherStyle"
|
||||
:fit-label="fitLabel"
|
||||
:harmony="harmony"
|
||||
:love-index="loveIndex"
|
||||
:friend-index="friendIndex"
|
||||
:marriage-index="marriageIndex"
|
||||
:star-compare="starCompare"
|
||||
:dim-compare="dimCompare"
|
||||
:summary="summary"
|
||||
:detail="detail"
|
||||
:report="report"
|
||||
:paying="paying"
|
||||
@buy-deep="buyDeep"
|
||||
@share="shareOpen = true"
|
||||
/>
|
||||
</div>
|
||||
<ShareSheet :open="shareOpen" :payload="sharePayload" @close="shareOpen = false" />
|
||||
</PageShell>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import type { GrowthReport, Profile } from '@yuxingu/types'
|
||||
import { api } from '../api/client'
|
||||
import BackButton from '../components/BackButton.vue'
|
||||
import BirthDateInputs from '../components/BirthDateInputs.vue'
|
||||
import MatchCompare from '../components/MatchCompare.vue'
|
||||
import PageShell from '../components/PageShell.vue'
|
||||
import ReportRich from '../components/ReportRich.vue'
|
||||
import RelationLanding from '../components/relation/RelationLanding.vue'
|
||||
import RelationResult from '../components/relation/RelationResult.vue'
|
||||
import ShareSheet from '../components/ShareSheet.vue'
|
||||
import { AnalyticsEvent, track } from '../lib/analytics'
|
||||
import type { RelationSharePayload } from '../lib/shareLink'
|
||||
import { useRelationPage } from '../composables/useRelationPage'
|
||||
|
||||
const otherName = ref('TA')
|
||||
const relationType = ref('partner')
|
||||
const oy = ref('1992')
|
||||
const om = ref('6')
|
||||
const od = ref('8')
|
||||
const loading = ref(false)
|
||||
const paying = ref(false)
|
||||
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)
|
||||
const meStyle = computed(() => String(summary.value.me_style || ''))
|
||||
const otherStyle = computed(() => String(summary.value.other_style || ''))
|
||||
const diff = computed(() => String(summary.value.diff_one_liner || ''))
|
||||
const fitLabel = computed(() => String(summary.value.fit_label || ''))
|
||||
const harmony = computed(() => {
|
||||
const n = summary.value.harmony_index
|
||||
return typeof n === 'number' ? n : null
|
||||
})
|
||||
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 starCompare = computed(() => {
|
||||
const raw = summary.value.star_compare
|
||||
return Array.isArray(raw) ? (raw as { key: string; title: string; me: string; other: string; note?: string }[]) : []
|
||||
})
|
||||
const dimCompare = computed(() => {
|
||||
const raw = summary.value.dimension_compare
|
||||
return Array.isArray(raw)
|
||||
? (raw as { key: string; title: string; me_score?: number; other_score?: number; note?: string }[])
|
||||
: []
|
||||
})
|
||||
const meKeys = computed(() => (Array.isArray(summary.value.me_keywords) ? (summary.value.me_keywords as string[]) : []))
|
||||
const otherKeys = computed(() =>
|
||||
Array.isArray(summary.value.other_keywords) ? (summary.value.other_keywords as string[]) : [],
|
||||
)
|
||||
const sharePayload = computed<RelationSharePayload | null>(() => {
|
||||
if (!report.value) return null
|
||||
return {
|
||||
type: 'relation',
|
||||
me: meStyle.value,
|
||||
other: otherStyle.value,
|
||||
diff: diff.value,
|
||||
keywords: [...meKeys.value.slice(0, 3), ...otherKeys.value.slice(0, 3)],
|
||||
}
|
||||
})
|
||||
|
||||
async function ensureSelf(): Promise<Profile> {
|
||||
const { items } = await api.listProfiles()
|
||||
const self = (items || []).find((p) => p.relation === 'self')
|
||||
if (self) return self
|
||||
throw new Error('请先在首页完成愈心解码，创建「我」的个人档案')
|
||||
}
|
||||
|
||||
async function run() {
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
needSelf.value = false
|
||||
report.value = null
|
||||
try {
|
||||
const y = Number(oy.value)
|
||||
const m = Number(om.value)
|
||||
const d = Number(od.value)
|
||||
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({
|
||||
relation: 'other',
|
||||
birth_date: birth,
|
||||
display_name: otherName.value || 'TA',
|
||||
relation_type: relationType.value,
|
||||
})
|
||||
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 : '生成失败'
|
||||
error.value = msg
|
||||
needSelf.value = msg.includes('个人档案') || msg.includes('愈心解码') || msg.includes('性格探索')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function buyDeep() {
|
||||
if (!report.value) return
|
||||
paying.value = true
|
||||
track(AnalyticsEvent.DeepAccessClicked, { surface: 'relation' })
|
||||
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
|
||||
}
|
||||
}
|
||||
const {
|
||||
otherName,
|
||||
relationType,
|
||||
oy,
|
||||
om,
|
||||
od,
|
||||
loading,
|
||||
paying,
|
||||
error,
|
||||
report,
|
||||
shareOpen,
|
||||
needSelf,
|
||||
focus,
|
||||
tab,
|
||||
focusHint,
|
||||
summary,
|
||||
detail,
|
||||
meStyle,
|
||||
otherStyle,
|
||||
diff,
|
||||
fitLabel,
|
||||
harmony,
|
||||
loveIndex,
|
||||
friendIndex,
|
||||
marriageIndex,
|
||||
starCompare,
|
||||
dimCompare,
|
||||
sharePayload,
|
||||
run,
|
||||
buyDeep,
|
||||
} = useRelationPage()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -312,215 +114,4 @@ async function buyDeep() {
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user