feat: 按测测功能重构 H5 首页与各子页，并修正顶栏「+」添加档案菜单
对齐测测交互：首页「+」支持邀请填档案/添加档案/邀请合盘；各 Tab 与工具页按同一视觉与功能标准落地；本地对照截图目录显式忽略。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jackyu66git
@@ -1,35 +1,62 @@
|
||||
<template>
|
||||
<main class="yxg-page">
|
||||
<div class="yxg-hero">
|
||||
<PageTitle feature="explore" title="探索" sub="六大分类 · 找到适合你的自我理解方式" />
|
||||
</div>
|
||||
<PageShell>
|
||||
<template #hero>
|
||||
<div class="head">
|
||||
<h1 class="title">探索</h1>
|
||||
<p class="sub">测评 · 工具 · 自我理解</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="yxg-sheet">
|
||||
<p v-if="loading" class="yxg-hint pad">加载中…</p>
|
||||
<p v-else-if="error" class="yxg-err pad">
|
||||
<!-- 推荐宫格（对齐首页 12 宫 + 截图「更多」墙） -->
|
||||
<section class="sec">
|
||||
<div class="sec-head">
|
||||
<span class="sec-title">推荐工具</span>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<router-link
|
||||
v-for="t in featured"
|
||||
:key="t.to + t.label"
|
||||
:to="t.to"
|
||||
class="g-item"
|
||||
>
|
||||
<HomeToolIcon :name="t.icon" :size="52" />
|
||||
<span class="g-label">{{ t.label }}</span>
|
||||
<span v-if="t.badge" class="g-badge" :class="'b-' + (t.badgeTone || 'hot')">{{ t.badge }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sec">
|
||||
<div class="sec-head">
|
||||
<span class="sec-title">全部分类</span>
|
||||
</div>
|
||||
<p v-if="loading" class="hint">加载中…</p>
|
||||
<p v-else-if="error" class="err">
|
||||
{{ error }}
|
||||
<button type="button" class="yxg-link" @click="load">重试</button>
|
||||
<button type="button" class="retry" @click="load">重试</button>
|
||||
</p>
|
||||
<ul v-else class="yxg-list">
|
||||
<li v-for="c in categories" :key="c.key">
|
||||
<router-link :to="`/explore/${c.key}`">
|
||||
<span class="yxg-mark" :class="'icon-' + c.tone" aria-hidden="true">{{ c.icon }}</span>
|
||||
<span class="yxg-body">
|
||||
<strong>{{ c.title }}</strong>
|
||||
<span class="desc">{{ c.description }} · {{ c.items?.length || 0 }} 项</span>
|
||||
</span>
|
||||
<span class="chev" aria-hidden="true">›</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
<div v-else class="cat-list">
|
||||
<ListRow
|
||||
v-for="c in categories"
|
||||
:key="c.key"
|
||||
:to="`/explore/${c.key}`"
|
||||
:title="c.title"
|
||||
:desc="`${c.description} · ${c.items?.length || 0} 项`"
|
||||
:icon="toolIconFor(c.key)"
|
||||
:badge="hotBadge(c)"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</PageShell>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { api } from '../api/client'
|
||||
import PageTitle from '../components/PageTitle.vue'
|
||||
import HomeToolIcon, { type HomeToolIconName } from '../components/HomeToolIcon.vue'
|
||||
import ListRow from '../components/ListRow.vue'
|
||||
import PageShell from '../components/PageShell.vue'
|
||||
import { toolIconFor } from '../lib/toolIconMap'
|
||||
|
||||
type Cat = {
|
||||
key: string
|
||||
@@ -37,13 +64,33 @@ type Cat = {
|
||||
description: string
|
||||
icon: string
|
||||
tone: string
|
||||
items?: unknown[]
|
||||
items?: { badge?: string }[]
|
||||
}
|
||||
|
||||
const featured: { to: string; label: string; icon: HomeToolIconName; badge?: string; badgeTone?: 'hot' | 'new' }[] = [
|
||||
{ to: '/scales/mbti-lite', label: '人格测试', icon: 'mbti' },
|
||||
{ to: '/star', label: '星座', icon: 'star' },
|
||||
{ to: '/portrait', label: '愈心解码', icon: 'portrait', badge: '热', badgeTone: 'hot' },
|
||||
{ to: '/rhythm', label: '身心节律', icon: 'rhythm' },
|
||||
{ to: '/synastry', label: '合盘', icon: 'synastry', badge: '新', badgeTone: 'new' },
|
||||
{ to: '/ask', label: 'AI问答', icon: 'ask' },
|
||||
{ to: '/companion', label: '节气陪伴', icon: 'companion' },
|
||||
{ to: '/cards', label: '意象卡片', icon: 'cards' },
|
||||
{ to: '/reports', label: '成长报告', icon: 'reports', badge: '新', badgeTone: 'new' },
|
||||
{ to: '/growth-plan', label: '成长计划', icon: 'growth' },
|
||||
{ to: '/relation', label: '人格匹配', icon: 'relation' },
|
||||
{ to: '/membership', label: '成长会员', icon: 'growth' },
|
||||
]
|
||||
|
||||
const categories = ref<Cat[]>([])
|
||||
const loading = ref(true)
|
||||
const error = ref('')
|
||||
|
||||
function hotBadge(c: Cat) {
|
||||
const b = c.items?.find((i) => i.badge)?.badge
|
||||
return b || undefined
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
@@ -61,6 +108,90 @@ onMounted(load)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pad{padding:8px 16px}
|
||||
.yxg-list{margin-top:8px}
|
||||
.head { padding: 4px 0 8px; }
|
||||
.title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.sub {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.38);
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.sec { padding: 0 16px; margin-top: 18px; }
|
||||
.sec:first-child { margin-top: 12px; }
|
||||
.sec-head { margin-bottom: 12px; }
|
||||
.sec-title {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 14px 6px;
|
||||
}
|
||||
.g-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: inherit;
|
||||
transition: transform var(--duration-fast) ease;
|
||||
}
|
||||
.g-item:active { transform: scale(0.92); }
|
||||
.g-label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.g-badge {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: 4px;
|
||||
font-size: 9px;
|
||||
font-weight: 650;
|
||||
color: #fff;
|
||||
padding: 2px 5px;
|
||||
border-radius: 7px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.g-badge.b-hot {
|
||||
background: linear-gradient(135deg, #ff7a6e, var(--color-primary));
|
||||
}
|
||||
.g-badge.b-new {
|
||||
background: linear-gradient(135deg, #6eb6ff, #4a90e2);
|
||||
}
|
||||
.cat-list {
|
||||
background: #fafafa;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 4px 10px;
|
||||
}
|
||||
.cat-list :deep(.lr) {
|
||||
border-bottom: 1px solid #f0ebe8;
|
||||
}
|
||||
.cat-list :deep(.lr:last-child) {
|
||||
border-bottom: none;
|
||||
}
|
||||
.hint, .err {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-secondary);
|
||||
padding: 8px 0;
|
||||
}
|
||||
.err { color: var(--color-primary); }
|
||||
.retry {
|
||||
margin-left: 8px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--color-accent-blue);
|
||||
font-size: 13px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user