jackyu66gitandCursor
bd22d9dddd
落地 synastry/star/ask API 与 H5 页面，补齐 cece-frontend-re complete-design 证据文档，并加入 Android 模拟器截图抓取脚本。 Co-authored-by: Cursor <cursoragent@cursor.com>
67 lines
1.7 KiB
Vue
67 lines
1.7 KiB
Vue
<template>
|
||
<main class="yxg-page">
|
||
<div class="yxg-hero">
|
||
<PageTitle feature="explore" title="探索" sub="六大分类 · 找到适合你的自我理解方式" />
|
||
</div>
|
||
|
||
<div class="yxg-sheet">
|
||
<p v-if="loading" class="yxg-hint pad">加载中…</p>
|
||
<p v-else-if="error" class="yxg-err pad">
|
||
{{ error }}
|
||
<button type="button" class="yxg-link" @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>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onMounted, ref } from 'vue'
|
||
import { api } from '../api/client'
|
||
import PageTitle from '../components/PageTitle.vue'
|
||
|
||
type Cat = {
|
||
key: string
|
||
title: string
|
||
description: string
|
||
icon: string
|
||
tone: string
|
||
items?: unknown[]
|
||
}
|
||
|
||
const categories = ref<Cat[]>([])
|
||
const loading = ref(true)
|
||
const error = ref('')
|
||
|
||
async function load() {
|
||
loading.value = true
|
||
error.value = ''
|
||
try {
|
||
const res = await api.getExploreCatalog()
|
||
categories.value = res.categories || []
|
||
} catch (e) {
|
||
error.value = e instanceof Error ? e.message : '加载失败'
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
onMounted(load)
|
||
</script>
|
||
|
||
<style scoped>
|
||
.pad{padding:8px 16px}
|
||
.yxg-list{margin-top:8px}
|
||
</style>
|