Browse Source
Add ReaderLayout and ShowcaseLayout components to enhance the public profile page, allowing for modular display of posts, timeline, and reading sections. This change establishes a unified navigation hub, improving user experience with structured content previews and consistent API handling. Made-with: Cursormain
6 changed files with 1110 additions and 229 deletions
@ -0,0 +1,352 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { unwrapApiBody, type ApiResponse } from '../../utils/http/factory' |
||||
|
import { safeExternalHref } from '../../utils/safe-external-href' |
||||
|
|
||||
|
type Section = 'posts' | 'timeline' | 'reading' |
||||
|
|
||||
|
type SocialLink = { |
||||
|
label: string |
||||
|
icon?: string |
||||
|
safeHref: string |
||||
|
} |
||||
|
|
||||
|
type PostItem = { |
||||
|
title?: string | null |
||||
|
excerpt?: string | null |
||||
|
slug?: string | null |
||||
|
publishedAt?: Date | string | null |
||||
|
} |
||||
|
|
||||
|
type TimelineItem = { |
||||
|
id?: number |
||||
|
title?: string | null |
||||
|
occurredOn?: Date | string | null |
||||
|
bodyMarkdown?: string | null |
||||
|
linkUrl?: string | null |
||||
|
} |
||||
|
|
||||
|
type ReadingItem = { |
||||
|
title?: string | null |
||||
|
canonicalUrl?: string | null |
||||
|
canonical_url?: string | null |
||||
|
} |
||||
|
|
||||
|
type ListPayload<T> = { |
||||
|
items: T[] |
||||
|
total: number |
||||
|
page: number |
||||
|
pageSize: number |
||||
|
} |
||||
|
|
||||
|
const props = defineProps<{ |
||||
|
slug: string |
||||
|
displayName: string |
||||
|
publicSlug: string | null |
||||
|
avatar: string | null |
||||
|
bioPreviewText: string |
||||
|
hasBioPreview: boolean |
||||
|
socialLinks: SocialLink[] |
||||
|
}>() |
||||
|
|
||||
|
const activeSection = ref<Section>('posts') |
||||
|
const postsPage = ref(1) |
||||
|
const timelinePage = ref(1) |
||||
|
const readingPage = ref(1) |
||||
|
|
||||
|
const { data: postsData, pending: postsPending } = await useAsyncData( |
||||
|
() => `reader-posts-${props.slug}-${postsPage.value}`, |
||||
|
async () => { |
||||
|
const base = `/api/public/profile/${encodeURIComponent(props.slug)}/posts` |
||||
|
const url = postsPage.value > 1 ? `${base}?page=${postsPage.value}` : base |
||||
|
const res = await $fetch<ApiResponse<ListPayload<PostItem>>>(url) |
||||
|
return unwrapApiBody(res) |
||||
|
}, |
||||
|
{ watch: [() => props.slug, postsPage] }, |
||||
|
) |
||||
|
|
||||
|
const { data: timelineData, pending: timelinePending } = await useAsyncData( |
||||
|
() => `reader-timeline-${props.slug}-${timelinePage.value}`, |
||||
|
async () => { |
||||
|
const base = `/api/public/profile/${encodeURIComponent(props.slug)}/timeline` |
||||
|
const url = timelinePage.value > 1 ? `${base}?page=${timelinePage.value}` : base |
||||
|
const res = await $fetch<ApiResponse<ListPayload<TimelineItem>>>(url) |
||||
|
return unwrapApiBody(res) |
||||
|
}, |
||||
|
{ watch: [() => props.slug, timelinePage] }, |
||||
|
) |
||||
|
|
||||
|
const { data: readingData, pending: readingPending } = await useAsyncData( |
||||
|
() => `reader-reading-${props.slug}-${readingPage.value}`, |
||||
|
async () => { |
||||
|
const base = `/api/public/profile/${encodeURIComponent(props.slug)}/reading` |
||||
|
const url = readingPage.value > 1 ? `${base}?page=${readingPage.value}` : base |
||||
|
const res = await $fetch<ApiResponse<ListPayload<ReadingItem>>>(url) |
||||
|
return unwrapApiBody(res) |
||||
|
}, |
||||
|
{ watch: [() => props.slug, readingPage] }, |
||||
|
) |
||||
|
|
||||
|
const postsTotal = computed(() => postsData.value?.total ?? 0) |
||||
|
const timelineTotal = computed(() => timelineData.value?.total ?? 0) |
||||
|
const readingTotal = computed(() => readingData.value?.total ?? 0) |
||||
|
|
||||
|
watch(() => props.slug, () => { |
||||
|
postsPage.value = 1 |
||||
|
timelinePage.value = 1 |
||||
|
readingPage.value = 1 |
||||
|
activeSection.value = 'posts' |
||||
|
}) |
||||
|
|
||||
|
function postTitle(it: PostItem): string { |
||||
|
const t = it.title |
||||
|
return typeof t === 'string' && t.trim().length ? t : '未命名文章' |
||||
|
} |
||||
|
|
||||
|
function postExcerpt(it: PostItem): string { |
||||
|
return typeof it.excerpt === 'string' ? it.excerpt : '' |
||||
|
} |
||||
|
|
||||
|
function postSlug(it: PostItem): string { |
||||
|
return typeof it.slug === 'string' ? it.slug : '' |
||||
|
} |
||||
|
|
||||
|
function timelineTitle(it: TimelineItem): string { |
||||
|
const t = it.title |
||||
|
return typeof t === 'string' && t.trim().length ? t : '未命名动态' |
||||
|
} |
||||
|
|
||||
|
function timelineBody(it: TimelineItem): string { |
||||
|
return typeof it.bodyMarkdown === 'string' ? it.bodyMarkdown : '' |
||||
|
} |
||||
|
|
||||
|
function timelineKey(it: TimelineItem, index: number): string | number { |
||||
|
return it.id ?? index |
||||
|
} |
||||
|
|
||||
|
function timelineHref(it: TimelineItem): string | undefined { |
||||
|
return safeExternalHref(it.linkUrl) |
||||
|
} |
||||
|
|
||||
|
function readingTitle(it: ReadingItem): string { |
||||
|
const t = it.title |
||||
|
return typeof t === 'string' && t.trim().length ? t : '未命名' |
||||
|
} |
||||
|
|
||||
|
function readingHref(it: ReadingItem): string | undefined { |
||||
|
return safeExternalHref(it.canonicalUrl ?? it.canonical_url) |
||||
|
} |
||||
|
|
||||
|
function readingHost(href: string | undefined): string { |
||||
|
if (!href) { |
||||
|
return '' |
||||
|
} |
||||
|
try { |
||||
|
return new URL(href).hostname |
||||
|
} |
||||
|
catch { |
||||
|
return href |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="grid gap-6 lg:grid-cols-[16rem_minmax(0,1fr)] xl:gap-8"> |
||||
|
<aside class="space-y-4 lg:sticky lg:top-20 lg:h-fit"> |
||||
|
<section class="rounded-2xl border border-default/80 bg-elevated/20 px-4 py-5"> |
||||
|
<div class="flex items-center gap-3"> |
||||
|
<img |
||||
|
v-if="avatar" |
||||
|
:src="avatar" |
||||
|
alt="" |
||||
|
class="h-14 w-14 rounded-full border border-default object-cover" |
||||
|
> |
||||
|
<div> |
||||
|
<p class="font-semibold text-highlighted"> |
||||
|
{{ displayName }} |
||||
|
</p> |
||||
|
<p v-if="publicSlug" class="text-xs text-muted"> |
||||
|
@{{ publicSlug }} |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<NuxtLink |
||||
|
v-if="hasBioPreview" |
||||
|
:to="`/@${slug}/about`" |
||||
|
class="mt-3 block rounded-lg border border-default/70 bg-default/20 px-3 py-2 text-xs text-muted hover:bg-elevated/40" |
||||
|
> |
||||
|
{{ bioPreviewText }} |
||||
|
</NuxtLink> |
||||
|
<ul v-if="socialLinks.length" class="mt-3 flex flex-wrap gap-2"> |
||||
|
<li v-for="(l, i) in socialLinks" :key="i"> |
||||
|
<a |
||||
|
:href="l.safeHref" |
||||
|
target="_blank" |
||||
|
rel="noopener noreferrer" |
||||
|
class="inline-flex items-center gap-1 rounded-md border border-default px-2 py-1 text-xs text-muted hover:text-default" |
||||
|
> |
||||
|
<UIcon :name="socialLinkIconName({ ...l, url: l.safeHref })" class="size-3.5" /> |
||||
|
{{ l.label }} |
||||
|
</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</section> |
||||
|
|
||||
|
<nav class="space-y-1 rounded-2xl border border-default/80 bg-elevated/20 p-2" aria-label="阅读区块切换"> |
||||
|
<button |
||||
|
type="button" |
||||
|
class="flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-sm transition-colors" |
||||
|
:class="activeSection === 'posts' ? 'bg-primary/15 text-highlighted' : 'text-muted hover:bg-elevated/50'" |
||||
|
@click="activeSection = 'posts'" |
||||
|
> |
||||
|
<span>文章</span> |
||||
|
<span class="text-xs tabular-nums">{{ postsTotal }}</span> |
||||
|
</button> |
||||
|
<button |
||||
|
type="button" |
||||
|
class="flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-sm transition-colors" |
||||
|
:class="activeSection === 'timeline' ? 'bg-primary/15 text-highlighted' : 'text-muted hover:bg-elevated/50'" |
||||
|
@click="activeSection = 'timeline'" |
||||
|
> |
||||
|
<span>时光机</span> |
||||
|
<span class="text-xs tabular-nums">{{ timelineTotal }}</span> |
||||
|
</button> |
||||
|
<button |
||||
|
type="button" |
||||
|
class="flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-sm transition-colors" |
||||
|
:class="activeSection === 'reading' ? 'bg-primary/15 text-highlighted' : 'text-muted hover:bg-elevated/50'" |
||||
|
@click="activeSection = 'reading'" |
||||
|
> |
||||
|
<span>阅读</span> |
||||
|
<span class="text-xs tabular-nums">{{ readingTotal }}</span> |
||||
|
</button> |
||||
|
</nav> |
||||
|
</aside> |
||||
|
|
||||
|
<section class="min-w-0"> |
||||
|
<div v-if="activeSection === 'posts'" class="space-y-4"> |
||||
|
<h2 class="text-lg font-semibold text-highlighted"> |
||||
|
文章 |
||||
|
</h2> |
||||
|
<div v-if="postsPending" class="text-sm text-muted"> |
||||
|
加载中… |
||||
|
</div> |
||||
|
<UEmpty v-else-if="!postsData?.total" title="暂无公开文章" /> |
||||
|
<template v-else> |
||||
|
<NuxtLink |
||||
|
v-for="(p, i) in postsData.items" |
||||
|
:key="`${postSlug(p)}-${i}`" |
||||
|
:to="`/@${slug}/posts/${encodeURIComponent(postSlug(p))}`" |
||||
|
class="block rounded-xl border border-default/80 bg-elevated/20 px-4 py-4" |
||||
|
> |
||||
|
<div class="font-semibold text-highlighted"> |
||||
|
{{ postTitle(p) }} |
||||
|
</div> |
||||
|
<p v-if="postExcerpt(p)" class="mt-2 text-sm text-muted line-clamp-3"> |
||||
|
{{ postExcerpt(p) }} |
||||
|
</p> |
||||
|
</NuxtLink> |
||||
|
<div v-if="postsData.total > 10" class="flex justify-end"> |
||||
|
<UPagination |
||||
|
:page="postsPage" |
||||
|
:total="postsData.total" |
||||
|
:items-per-page="10" |
||||
|
size="sm" |
||||
|
@update:page="postsPage = $event" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
</div> |
||||
|
|
||||
|
<div v-else-if="activeSection === 'timeline'" class="space-y-4"> |
||||
|
<h2 class="text-lg font-semibold text-highlighted"> |
||||
|
时光机 |
||||
|
</h2> |
||||
|
<div v-if="timelinePending" class="text-sm text-muted"> |
||||
|
加载中… |
||||
|
</div> |
||||
|
<UEmpty v-else-if="!timelineData?.total" title="暂无公开动态" /> |
||||
|
<template v-else> |
||||
|
<article |
||||
|
v-for="(e, i) in timelineData.items" |
||||
|
:key="timelineKey(e, i)" |
||||
|
class="rounded-xl border border-default/80 bg-elevated/20 px-4 py-4" |
||||
|
> |
||||
|
<div class="flex items-start justify-between gap-3"> |
||||
|
<h3 class="font-semibold text-highlighted"> |
||||
|
{{ timelineTitle(e) }} |
||||
|
</h3> |
||||
|
<time |
||||
|
v-if="e.occurredOn" |
||||
|
class="text-xs tabular-nums text-muted" |
||||
|
:datetime="occurredOnToIsoAttr(e.occurredOn)" |
||||
|
>{{ formatOccurredOnDisplay(e.occurredOn) }}</time> |
||||
|
</div> |
||||
|
<p v-if="timelineBody(e)" class="mt-2 whitespace-pre-wrap text-sm text-muted"> |
||||
|
{{ timelineBody(e) }} |
||||
|
</p> |
||||
|
<a |
||||
|
v-if="timelineHref(e)" |
||||
|
:href="timelineHref(e)" |
||||
|
target="_blank" |
||||
|
rel="noopener noreferrer" |
||||
|
class="mt-2 inline-flex text-sm text-primary hover:underline" |
||||
|
> |
||||
|
打开链接 |
||||
|
</a> |
||||
|
</article> |
||||
|
<div v-if="timelineData.total > 10" class="flex justify-end"> |
||||
|
<UPagination |
||||
|
:page="timelinePage" |
||||
|
:total="timelineData.total" |
||||
|
:items-per-page="10" |
||||
|
size="sm" |
||||
|
@update:page="timelinePage = $event" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
</div> |
||||
|
|
||||
|
<div v-else class="space-y-4"> |
||||
|
<h2 class="text-lg font-semibold text-highlighted"> |
||||
|
阅读 |
||||
|
</h2> |
||||
|
<div v-if="readingPending" class="text-sm text-muted"> |
||||
|
加载中… |
||||
|
</div> |
||||
|
<UEmpty v-else-if="!readingData?.total" title="暂无公开阅读条目" /> |
||||
|
<template v-else> |
||||
|
<template v-for="(it, i) in readingData.items" :key="i"> |
||||
|
<a |
||||
|
v-if="readingHref(it)" |
||||
|
:href="readingHref(it)" |
||||
|
target="_blank" |
||||
|
rel="noopener noreferrer" |
||||
|
class="block rounded-xl border border-default/80 bg-elevated/20 px-4 py-4" |
||||
|
> |
||||
|
<div class="font-semibold text-highlighted"> |
||||
|
{{ readingTitle(it) }} |
||||
|
</div> |
||||
|
<div class="mt-2 text-sm text-muted"> |
||||
|
{{ readingHost(readingHref(it)) }} |
||||
|
</div> |
||||
|
</a> |
||||
|
<div v-else class="rounded-xl border border-default/80 bg-elevated/20 px-4 py-4"> |
||||
|
<div class="font-semibold text-highlighted"> |
||||
|
{{ readingTitle(it) }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<div v-if="readingData.total > 10" class="flex justify-end"> |
||||
|
<UPagination |
||||
|
:page="readingPage" |
||||
|
:total="readingData.total" |
||||
|
:items-per-page="10" |
||||
|
size="sm" |
||||
|
@update:page="readingPage = $event" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
</div> |
||||
|
</section> |
||||
|
</div> |
||||
|
</template> |
||||
@ -0,0 +1,260 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
type PublicPostListItem = { |
||||
|
title?: string | null |
||||
|
excerpt?: string | null |
||||
|
slug?: string | null |
||||
|
publishedAt?: Date | string | null |
||||
|
} |
||||
|
|
||||
|
type PublicTimelineItem = { |
||||
|
id?: number |
||||
|
title?: string | null |
||||
|
occurredOn?: Date | string | null |
||||
|
bodyMarkdown?: string | null |
||||
|
} |
||||
|
|
||||
|
type PublicRssListItem = { |
||||
|
title?: string | null |
||||
|
canonicalUrl?: string | null |
||||
|
canonical_url?: string | null |
||||
|
} |
||||
|
|
||||
|
type NormalizedModule<T> = { |
||||
|
items: T[] |
||||
|
total: number |
||||
|
} |
||||
|
|
||||
|
type SocialLink = { |
||||
|
label: string |
||||
|
icon?: string |
||||
|
safeHref: string |
||||
|
} |
||||
|
|
||||
|
const props = defineProps<{ |
||||
|
slug: string |
||||
|
displayName: string |
||||
|
publicSlug: string | null |
||||
|
avatar: string | null |
||||
|
bioPreviewText: string |
||||
|
hasBioPreview: boolean |
||||
|
socialLinks: SocialLink[] |
||||
|
postsModule: NormalizedModule<PublicPostListItem> |
||||
|
timelineModule: NormalizedModule<PublicTimelineItem> |
||||
|
readingModule: NormalizedModule<PublicRssListItem> |
||||
|
}>() |
||||
|
|
||||
|
function postTitle(it: PublicPostListItem): string { |
||||
|
const t = it.title |
||||
|
return typeof t === 'string' && t.trim().length ? t : '未命名文章' |
||||
|
} |
||||
|
|
||||
|
function postExcerpt(it: PublicPostListItem): string { |
||||
|
return typeof it.excerpt === 'string' ? it.excerpt : '' |
||||
|
} |
||||
|
|
||||
|
function postSlug(it: PublicPostListItem): string { |
||||
|
return typeof it.slug === 'string' ? it.slug : '' |
||||
|
} |
||||
|
|
||||
|
function timelineTitle(it: PublicTimelineItem): string { |
||||
|
const t = it.title |
||||
|
return typeof t === 'string' && t.trim().length ? t : '未命名动态' |
||||
|
} |
||||
|
|
||||
|
function timelineBody(it: PublicTimelineItem): string { |
||||
|
return typeof it.bodyMarkdown === 'string' ? it.bodyMarkdown : '' |
||||
|
} |
||||
|
|
||||
|
function timelineKey(it: PublicTimelineItem, index: number): string | number { |
||||
|
return it.id ?? index |
||||
|
} |
||||
|
|
||||
|
function rssHref(it: PublicRssListItem): string | undefined { |
||||
|
return it.canonicalUrl ?? it.canonical_url ?? undefined |
||||
|
} |
||||
|
|
||||
|
function rssTitle(it: PublicRssListItem): string { |
||||
|
const t = it.title |
||||
|
return typeof t === 'string' && t.trim().length ? t : '未命名' |
||||
|
} |
||||
|
|
||||
|
function rssHostname(href: string | undefined): string { |
||||
|
if (!href) { |
||||
|
return '' |
||||
|
} |
||||
|
try { |
||||
|
return new URL(href).hostname |
||||
|
} |
||||
|
catch { |
||||
|
return href |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const hasModuleContent = computed(() => |
||||
|
props.postsModule.total > 0 || props.timelineModule.total > 0 || props.readingModule.total > 0, |
||||
|
) |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="mx-auto flex w-full max-w-xl flex-col gap-10 sm:gap-12"> |
||||
|
<section |
||||
|
class="w-full rounded-2xl border border-default/80 bg-elevated/25 px-6 py-8 text-center shadow-sm ring-1 ring-black/5 dark:ring-white/10 sm:px-10 sm:py-9" |
||||
|
aria-label="个人资料" |
||||
|
> |
||||
|
<div class="flex flex-col items-center gap-4"> |
||||
|
<div v-if="avatar" class="flex justify-center"> |
||||
|
<img |
||||
|
:src="avatar" |
||||
|
alt="" |
||||
|
class="h-24 w-24 rounded-full border-2 border-default object-cover shadow-md ring-4 ring-primary/10" |
||||
|
> |
||||
|
</div> |
||||
|
<div class="space-y-1"> |
||||
|
<h1 class="text-balance text-2xl font-semibold tracking-tight text-highlighted sm:text-3xl"> |
||||
|
{{ displayName }} |
||||
|
</h1> |
||||
|
<p |
||||
|
v-if="publicSlug" |
||||
|
class="text-sm font-medium tabular-nums text-muted" |
||||
|
> |
||||
|
@{{ publicSlug }} |
||||
|
</p> |
||||
|
</div> |
||||
|
<ul |
||||
|
v-if="socialLinks.length" |
||||
|
class="flex flex-wrap items-center justify-center gap-2.5" |
||||
|
aria-label="社交链接" |
||||
|
> |
||||
|
<li v-for="(l, i) in socialLinks" :key="i"> |
||||
|
<a |
||||
|
:href="l.safeHref" |
||||
|
target="_blank" |
||||
|
rel="noopener noreferrer" |
||||
|
:title="l.label" |
||||
|
:aria-label="`${l.label}（新窗口打开）`" |
||||
|
class="flex size-10 items-center justify-center rounded-full border border-default/80 bg-default/40 text-primary transition-colors hover:border-primary/35 hover:bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary" |
||||
|
> |
||||
|
<UIcon |
||||
|
:name="socialLinkIconName({ ...l, url: l.safeHref })" |
||||
|
class="size-5 shrink-0 opacity-90" |
||||
|
/> |
||||
|
</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<section |
||||
|
v-if="hasBioPreview" |
||||
|
class="w-full" |
||||
|
> |
||||
|
<NuxtLink |
||||
|
:to="`/@${slug}/about`" |
||||
|
class="block rounded-2xl border border-default/70 bg-elevated/20 p-5 transition-colors hover:border-primary/25 hover:bg-elevated/35 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary sm:p-6" |
||||
|
> |
||||
|
<p class="text-sm leading-relaxed text-toned sm:text-base"> |
||||
|
{{ bioPreviewText }} |
||||
|
</p> |
||||
|
<p class="mt-3 text-xs font-medium text-primary"> |
||||
|
查看完整介绍 |
||||
|
</p> |
||||
|
</NuxtLink> |
||||
|
</section> |
||||
|
|
||||
|
<template v-if="hasModuleContent"> |
||||
|
<PublicHubModuleCard |
||||
|
title="文章" |
||||
|
:total="postsModule.total" |
||||
|
description="最近发布的文章摘要，进入后可查看完整内容。" |
||||
|
:to="`/@${slug}/posts`" |
||||
|
> |
||||
|
<template #preview> |
||||
|
<NuxtLink |
||||
|
v-for="(p, i) in postsModule.items.slice(0, 2)" |
||||
|
:key="`${postSlug(p)}-${i}`" |
||||
|
:to="`/@${slug}/posts/${encodeURIComponent(postSlug(p))}`" |
||||
|
class="block rounded-lg border border-default/80 bg-default/30 px-3 py-2 transition-colors hover:bg-elevated/40" |
||||
|
> |
||||
|
<div class="text-sm font-medium text-highlighted"> |
||||
|
{{ postTitle(p) }} |
||||
|
</div> |
||||
|
<time |
||||
|
v-if="p.publishedAt" |
||||
|
class="mt-1 block text-xs tabular-nums text-muted" |
||||
|
:datetime="occurredOnToIsoAttr(p.publishedAt)" |
||||
|
>{{ formatPublishedDateOnly(p.publishedAt) }}</time> |
||||
|
<p v-if="postExcerpt(p)" class="mt-1 line-clamp-2 text-xs text-muted"> |
||||
|
{{ postExcerpt(p) }} |
||||
|
</p> |
||||
|
</NuxtLink> |
||||
|
</template> |
||||
|
</PublicHubModuleCard> |
||||
|
|
||||
|
<PublicHubModuleCard |
||||
|
title="时光机" |
||||
|
:total="timelineModule.total" |
||||
|
description="近期动态与节点，仅展示入口预览。" |
||||
|
:to="`/@${slug}/timeline`" |
||||
|
> |
||||
|
<template #preview> |
||||
|
<div |
||||
|
v-for="(e, i) in timelineModule.items.slice(0, 2)" |
||||
|
:key="timelineKey(e, i)" |
||||
|
class="rounded-lg border border-default/80 bg-default/30 px-3 py-2" |
||||
|
> |
||||
|
<div class="text-sm font-medium text-highlighted"> |
||||
|
{{ timelineTitle(e) }} |
||||
|
</div> |
||||
|
<time |
||||
|
v-if="e.occurredOn" |
||||
|
class="mt-1 block text-xs tabular-nums text-muted" |
||||
|
:datetime="occurredOnToIsoAttr(e.occurredOn)" |
||||
|
>{{ formatOccurredOnDisplay(e.occurredOn) }}</time> |
||||
|
<p v-if="timelineBody(e)" class="mt-1 line-clamp-2 text-xs text-muted"> |
||||
|
{{ timelineBody(e) }} |
||||
|
</p> |
||||
|
</div> |
||||
|
</template> |
||||
|
</PublicHubModuleCard> |
||||
|
|
||||
|
<PublicHubModuleCard |
||||
|
title="阅读" |
||||
|
:total="readingModule.total" |
||||
|
description="最近收藏/阅读条目，进入阅读页获取完整列表。" |
||||
|
:to="`/@${slug}/reading`" |
||||
|
> |
||||
|
<template #preview> |
||||
|
<template v-for="(item, i) in readingModule.items.slice(0, 2)" :key="i"> |
||||
|
<a |
||||
|
v-if="rssHref(item)" |
||||
|
:href="rssHref(item)" |
||||
|
target="_blank" |
||||
|
rel="noopener noreferrer" |
||||
|
class="block rounded-lg border border-default/80 bg-default/30 px-3 py-2 transition-colors hover:bg-elevated/40" |
||||
|
> |
||||
|
<div class="text-sm font-medium text-highlighted"> |
||||
|
{{ rssTitle(item) }} |
||||
|
</div> |
||||
|
<div class="mt-1 text-xs text-muted"> |
||||
|
{{ rssHostname(rssHref(item)) }} |
||||
|
</div> |
||||
|
</a> |
||||
|
<div |
||||
|
v-else |
||||
|
class="rounded-lg border border-default/80 bg-default/30 px-3 py-2" |
||||
|
> |
||||
|
<div class="text-sm font-medium text-highlighted"> |
||||
|
{{ rssTitle(item) }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</template> |
||||
|
</PublicHubModuleCard> |
||||
|
</template> |
||||
|
<UEmpty |
||||
|
v-else |
||||
|
title="这里还没有公开内容" |
||||
|
description="站主尚未发布任何公开文章或动态。" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
@ -0,0 +1,317 @@ |
|||||
|
# Public Home Subpages Implementation Plan |
||||
|
|
||||
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. |
||||
|
|
||||
|
**Goal:** 将 `@slug` 首页收敛为“导航中枢”，统一公开口径，并把完整内容承载下沉到 `posts/timeline/reading` 子页面。 |
||||
|
|
||||
|
**Architecture:** 在服务端新增“中枢聚合查询”层，确保首页卡片计数与子页分页共用同一 public 过滤口径；在前端将 `app/pages/@[publicSlug]/index.vue` 重构为统一模块卡片骨架（标题、描述、预览、查看全部）。同时补齐公开 API 口径测试与页面标题/canonical 校验，避免 unlisted/private 泄漏与 SEO 冲突。 |
||||
|
|
||||
|
**Tech Stack:** Nuxt 4、Vue 3、Nitro API、Drizzle ORM、Bun Test |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## File Structure |
||||
|
|
||||
|
**Create** |
||||
|
- `server/service/public-hub/index.ts`：公开中枢聚合服务（模块计数 + 预览） |
||||
|
- `server/service/public-hub/index.test.ts`：中枢聚合口径测试（public/unlisted/private） |
||||
|
- `app/components/public-hub/HubModuleCard.vue`：统一模块卡片组件 |
||||
|
- `docs/superpowers/specs/2026-04-24-public-home-subpages-design.md`（仅在实现偏差时补充变更说明） |
||||
|
|
||||
|
**Modify** |
||||
|
- `server/api/public/profile/[publicSlug].get.ts`：改为调用中枢聚合服务，统一返回结构 |
||||
|
- `server/api/public/profile/[publicSlug]/posts/index.get.ts`：校验与中枢相同 public 过滤逻辑 |
||||
|
- `server/api/public/profile/[publicSlug]/timeline/index.get.ts`：校验与中枢相同 public 过滤逻辑 |
||||
|
- `server/api/public/profile/[publicSlug]/reading/index.get.ts`：校验与中枢相同 public 过滤逻辑 |
||||
|
- `app/pages/@[publicSlug]/index.vue`：改造成“导航中枢”布局，限制每模块最多 2 条预览 |
||||
|
- `app/pages/@[publicSlug]/posts/index.vue`：补充 canonical 与空态文案一致性 |
||||
|
- `app/pages/@[publicSlug]/timeline/index.vue`：补充 canonical 与空态文案一致性 |
||||
|
- `app/pages/@[publicSlug]/reading/index.vue`：补充 canonical 与空态文案一致性 |
||||
|
|
||||
|
**Test** |
||||
|
- `server/service/public-hub/index.test.ts` |
||||
|
- `server/utils/site-public.test.ts`（扩展 canonical 相关断言，如涉及公用函数） |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### Task 1: 建立公开中枢聚合服务（统一口径） |
||||
|
|
||||
|
**Files:** |
||||
|
- Create: `server/service/public-hub/index.ts` |
||||
|
- Test: `server/service/public-hub/index.test.ts` |
||||
|
|
||||
|
- [ ] **Step 1: 写失败测试（只允许 public 进入中枢）** |
||||
|
|
||||
|
```ts |
||||
|
import { describe, expect, test } from "bun:test"; |
||||
|
import { buildPublicHubPayload } from "./index"; |
||||
|
|
||||
|
describe("buildPublicHubPayload", () => { |
||||
|
test("only exposes public items in counts and previews", async () => { |
||||
|
const payload = await buildPublicHubPayload("alice"); |
||||
|
expect(payload.modules.posts.total).toBeGreaterThanOrEqual(0); |
||||
|
expect(payload.modules.posts.preview.every((x) => x.visibility === "public")).toBe(true); |
||||
|
expect(payload.modules.timeline.preview.every((x) => x.visibility === "public")).toBe(true); |
||||
|
expect(payload.modules.reading.preview.every((x) => x.visibility === "public")).toBe(true); |
||||
|
}); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 2: 运行测试确认失败** |
||||
|
|
||||
|
Run: `bun test server/service/public-hub/index.test.ts` |
||||
|
Expected: FAIL（`buildPublicHubPayload` 未定义或断言失败） |
||||
|
|
||||
|
- [ ] **Step 3: 写最小实现（聚合 + preview limit）** |
||||
|
|
||||
|
```ts |
||||
|
export async function buildPublicHubPayload(publicSlug: string) { |
||||
|
const posts = await getPublicPostsPreviewBySlug(publicSlug, { limit: 2 }); |
||||
|
const timeline = await getPublicTimelinePreviewBySlug(publicSlug, { limit: 2 }); |
||||
|
const reading = await getPublicRssPreviewBySlug(publicSlug, { limit: 2 }); |
||||
|
return { |
||||
|
modules: { |
||||
|
posts: { total: posts.total, preview: posts.items }, |
||||
|
timeline: { total: timeline.total, preview: timeline.items }, |
||||
|
reading: { total: reading.total, preview: reading.items }, |
||||
|
}, |
||||
|
}; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 4: 再跑测试确认通过** |
||||
|
|
||||
|
Run: `bun test server/service/public-hub/index.test.ts` |
||||
|
Expected: PASS |
||||
|
|
||||
|
- [ ] **Step 5: 提交** |
||||
|
|
||||
|
```bash |
||||
|
git add server/service/public-hub/index.ts server/service/public-hub/index.test.ts |
||||
|
git commit -m "feat(public-hub): add unified public aggregation service" |
||||
|
``` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### Task 2: 接入公开主页 API，统一首页返回结构 |
||||
|
|
||||
|
**Files:** |
||||
|
- Modify: `server/api/public/profile/[publicSlug].get.ts` |
||||
|
- Test: `server/service/public-hub/index.test.ts` |
||||
|
|
||||
|
- [ ] **Step 1: 写失败测试（首页口径与中枢一致）** |
||||
|
|
||||
|
```ts |
||||
|
test("profile endpoint uses unified module totals", async () => { |
||||
|
const payload = await buildPublicHubPayload("alice"); |
||||
|
expect(payload.modules.posts.total).toEqual(payload.modules.posts.preview.length || payload.modules.posts.total); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 2: 运行测试确认失败** |
||||
|
|
||||
|
Run: `bun test server/service/public-hub/index.test.ts -t "profile endpoint uses unified module totals"` |
||||
|
Expected: FAIL（尚未在 API 层接入） |
||||
|
|
||||
|
- [ ] **Step 3: 在 API 中改为调用中枢服务** |
||||
|
|
||||
|
```ts |
||||
|
import { buildPublicHubPayload } from "#server/service/public-hub"; |
||||
|
|
||||
|
const hub = await buildPublicHubPayload(publicSlug); |
||||
|
return R.success({ |
||||
|
user: ..., |
||||
|
bio: ..., |
||||
|
links, |
||||
|
modules: hub.modules, |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 4: 运行测试确认通过** |
||||
|
|
||||
|
Run: `bun test server/service/public-hub/index.test.ts` |
||||
|
Expected: PASS |
||||
|
|
||||
|
- [ ] **Step 5: 提交** |
||||
|
|
||||
|
```bash |
||||
|
git add server/api/public/profile/[publicSlug].get.ts server/service/public-hub/index.test.ts |
||||
|
git commit -m "refactor(public-api): use unified hub payload for profile home" |
||||
|
``` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### Task 3: 抽象首页模块卡片组件（统一结构与文案） |
||||
|
|
||||
|
**Files:** |
||||
|
- Create: `app/components/public-hub/HubModuleCard.vue` |
||||
|
- Modify: `app/pages/@[publicSlug]/index.vue` |
||||
|
|
||||
|
- [ ] **Step 1: 写失败测试（组件渲染规范）** |
||||
|
|
||||
|
```ts |
||||
|
test("hub card renders title, total, preview and CTA", () => { |
||||
|
// mount PublicHubModuleCard with minimal props |
||||
|
// assert contains "查看全部文章" and preview length <= 2 |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 2: 运行测试确认失败** |
||||
|
|
||||
|
Run: `bun test app/components/public-hub` |
||||
|
Expected: FAIL（组件不存在） |
||||
|
|
||||
|
- [ ] **Step 3: 实现统一卡片组件并替换首页模块区** |
||||
|
|
||||
|
```vue |
||||
|
<PublicHubModuleCard |
||||
|
module-key="posts" |
||||
|
title="文章" |
||||
|
:total="data.modules.posts.total" |
||||
|
cta-text="查看全部文章" |
||||
|
:to="`/@${slug}/posts`" |
||||
|
:preview-items="data.modules.posts.preview" |
||||
|
/> |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 4: 手工验证页面结构** |
||||
|
|
||||
|
Run: `bun run dev` |
||||
|
Expected: `@slug` 首页显示三张模块卡，顺序为文章→时光机→阅读，且每卡最多 2 条预览。 |
||||
|
|
||||
|
- [ ] **Step 5: 提交** |
||||
|
|
||||
|
```bash |
||||
|
git add app/components/public-hub/HubModuleCard.vue app/pages/@[publicSlug]/index.vue |
||||
|
git commit -m "feat(public-home): switch to hub-style module cards" |
||||
|
``` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### Task 4: 子页面与首页口径一致性校验（计数、空态、排序） |
||||
|
|
||||
|
**Files:** |
||||
|
- Modify: `server/api/public/profile/[publicSlug]/posts/index.get.ts` |
||||
|
- Modify: `server/api/public/profile/[publicSlug]/timeline/index.get.ts` |
||||
|
- Modify: `server/api/public/profile/[publicSlug]/reading/index.get.ts` |
||||
|
|
||||
|
- [ ] **Step 1: 写失败测试（子页 total 与中枢同口径）** |
||||
|
|
||||
|
```ts |
||||
|
test("subpage totals match hub totals for same slug", async () => { |
||||
|
const hub = await buildPublicHubPayload("alice"); |
||||
|
const posts = await getPublicPostsBySlug("alice", { page: 1, pageSize: 10 }); |
||||
|
expect(posts.total).toBe(hub.modules.posts.total); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 2: 运行测试确认失败** |
||||
|
|
||||
|
Run: `bun test server/service/public-hub/index.test.ts -t "subpage totals match hub totals"` |
||||
|
Expected: FAIL（若当前查询条件不一致） |
||||
|
|
||||
|
- [ ] **Step 3: 对齐各子页 API 的 public 过滤和排序** |
||||
|
|
||||
|
```ts |
||||
|
where(and(eq(ownerId, userId), eq(visibility, "public"))) |
||||
|
orderBy(desc(publishedAt)) |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 4: 再跑测试确认通过** |
||||
|
|
||||
|
Run: `bun test server/service/public-hub/index.test.ts` |
||||
|
Expected: PASS |
||||
|
|
||||
|
- [ ] **Step 5: 提交** |
||||
|
|
||||
|
```bash |
||||
|
git add server/api/public/profile/[publicSlug]/posts/index.get.ts server/api/public/profile/[publicSlug]/timeline/index.get.ts server/api/public/profile/[publicSlug]/reading/index.get.ts server/service/public-hub/index.test.ts |
||||
|
git commit -m "fix(public-content): align subpage totals and ordering with hub" |
||||
|
``` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### Task 5: SEO 与 canonical 一致性 |
||||
|
|
||||
|
**Files:** |
||||
|
- Modify: `app/pages/@[publicSlug]/index.vue` |
||||
|
- Modify: `app/pages/@[publicSlug]/posts/index.vue` |
||||
|
- Modify: `app/pages/@[publicSlug]/timeline/index.vue` |
||||
|
- Modify: `app/pages/@[publicSlug]/reading/index.vue` |
||||
|
- Test: `server/utils/site-public.test.ts`（如复用站点 URL 工具） |
||||
|
|
||||
|
- [ ] **Step 1: 写失败测试（canonical 生成）** |
||||
|
|
||||
|
```ts |
||||
|
test("site public url helper builds stable origin", () => { |
||||
|
process.env.NUXT_PUBLIC_SITE_URL = "https://example.com"; |
||||
|
expect(getSitePublicUrlFromEnv()).toBe("https://example.com"); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 2: 运行测试确认失败（若需扩展 helper）** |
||||
|
|
||||
|
Run: `bun test server/utils/site-public.test.ts` |
||||
|
Expected: FAIL（若新增 helper 尚未实现） |
||||
|
|
||||
|
- [ ] **Step 3: 在公开页面统一设置 canonical 与标题语义** |
||||
|
|
||||
|
```ts |
||||
|
useSeoMeta({ title: `${slug.value} 的主页` }); |
||||
|
useHead({ link: [{ rel: "canonical", href: canonicalUrl.value }] }); |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 4: 回归验证** |
||||
|
|
||||
|
Run: `bun test server/utils/site-public.test.ts && bun run dev` |
||||
|
Expected: 测试通过；页面 head 中 canonical 正确，unlisted 页面不在公开导航入口。 |
||||
|
|
||||
|
- [ ] **Step 5: 提交** |
||||
|
|
||||
|
```bash |
||||
|
git add app/pages/@[publicSlug]/index.vue app/pages/@[publicSlug]/posts/index.vue app/pages/@[publicSlug]/timeline/index.vue app/pages/@[publicSlug]/reading/index.vue server/utils/site-public.test.ts |
||||
|
git commit -m "feat(public-seo): unify canonical metadata for public hub pages" |
||||
|
``` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### Task 6: 最终验收与文档同步 |
||||
|
|
||||
|
**Files:** |
||||
|
- Modify: `docs/superpowers/specs/2026-04-24-public-home-subpages-design.md`（如有实现差异） |
||||
|
- Modify: `docs/superpowers/plans/2026-04-24-public-home-subpages-implementation-plan.md`（勾选执行项） |
||||
|
|
||||
|
- [ ] **Step 1: 执行最小验收清单** |
||||
|
|
||||
|
Run: `bun test server/service/public-hub/index.test.ts && bun test server/utils/site-public.test.ts` |
||||
|
Expected: 全部 PASS |
||||
|
|
||||
|
- [ ] **Step 2: 手工回归公开访问路径** |
||||
|
|
||||
|
Run: `bun run dev` |
||||
|
Expected: |
||||
|
- `@slug` 首页仅显示公开预览 |
||||
|
- `unlisted` 不出现在首页与公开子页列表 |
||||
|
- 子页分页总数与首页卡片计数一致 |
||||
|
|
||||
|
- [ ] **Step 3: 同步文档（如有偏差）** |
||||
|
|
||||
|
```md |
||||
|
## 实现偏差记录 |
||||
|
- [日期] 将阅读模块 CTA 文案从“查看阅读清单”改为“查看全部阅读条目”，以匹配现有信息架构术语。 |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 4: 最终提交** |
||||
|
|
||||
|
```bash |
||||
|
git add docs/superpowers/specs/2026-04-24-public-home-subpages-design.md docs/superpowers/plans/2026-04-24-public-home-subpages-implementation-plan.md |
||||
|
git commit -m "docs(plan): finalize implementation checklist for public hub mode" |
||||
|
``` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## Self-Review |
||||
|
|
||||
|
1. **Spec coverage:** 已覆盖首页中枢化、模块卡片规范、可见性口径一致、SEO/canonical、验收测试与扩展约束。 |
||||
|
2. **Placeholder scan:** 计划内无 TBD/TODO/“后续补充”占位项。 |
||||
|
3. **Type consistency:** 统一使用 `public` 口径、`modules.posts|timeline|reading` 命名，避免前后不一致。 |
||||
@ -0,0 +1,147 @@ |
|||||
|
# 个人主页子页面化能力评审设计（导航中枢模式） |
||||
|
|
||||
|
## 1. 背景与目标 |
||||
|
|
||||
|
当前项目已经具备公开主页与多个公开子页面能力，用户可以从个人主页进入文章、时光机、阅读（RSS）等模块。 |
||||
|
本次评审目标是将 `@slug` 主页明确定位为“导航中枢”，避免主页继续演化为内容聚合长页。 |
||||
|
|
||||
|
目标如下： |
||||
|
|
||||
|
- `@slug` 仅承担入口分发职责，不承担长内容阅读。 |
||||
|
- 文章、时光机、阅读均为一等子页面，具备独立列表与分页能力。 |
||||
|
- 公开、仅链接、私密三种可见性在公开侧严格边界清晰。 |
||||
|
- 新增模块可按统一规范接入，保持长期可扩展性。 |
||||
|
|
||||
|
## 2. 方案结论 |
||||
|
|
||||
|
本次评审采用 **方案 1：导航中枢**。 |
||||
|
|
||||
|
- 主页只展示身份信息、模块入口卡片、每模块 1-2 条预览和“查看全部”。 |
||||
|
- 子页面承载完整列表、详情跳转与后续模块特有能力。 |
||||
|
- 首页不引入模块专属复杂交互（例如筛选、排序、阅读模式）。 |
||||
|
|
||||
|
## 3. 信息架构 |
||||
|
|
||||
|
### 3.1 页面定位 |
||||
|
|
||||
|
- `@slug`：个人站首页（目录页 / 导航中枢） |
||||
|
- `@slug/posts`：文章列表页 |
||||
|
- `@slug/timeline`：时光机列表页 |
||||
|
- `@slug/reading`：阅读（RSS）列表页 |
||||
|
|
||||
|
### 3.2 入口层级 |
||||
|
|
||||
|
- 一级入口：文章 / 时光机 / 阅读模块卡片 |
||||
|
- 二级入口：卡片内最近 1-2 条预览 |
||||
|
- 三级入口：统一“查看全部”按钮进入子页 |
||||
|
|
||||
|
### 3.3 内容边界 |
||||
|
|
||||
|
- 首页每模块最多展示 2 条预览（建议可配置，默认 2）。 |
||||
|
- 首页不展示完整正文，不承载深度浏览流程。 |
||||
|
- 详情阅读、历史翻页、重度交互全部下沉到子页面。 |
||||
|
|
||||
|
### 3.4 可扩展约束 |
||||
|
|
||||
|
新增公开模块必须满足： |
||||
|
|
||||
|
- 提供 `@slug/<module>` 独立子页 |
||||
|
- 在 `@slug` 提供模块卡片入口 |
||||
|
- 提供统一“查看全部”跳转 |
||||
|
|
||||
|
## 4. 入口组件规范 |
||||
|
|
||||
|
### 4.1 卡片结构（统一骨架） |
||||
|
|
||||
|
每个模块卡片应包含： |
||||
|
|
||||
|
- 标题行：模块名 + 公开总数（如“文章 · 24”） |
||||
|
- 描述行：模块价值说明（10-18 字） |
||||
|
- 预览区：最近 1-2 条（标题 + 日期/来源） |
||||
|
- 操作区：主按钮“查看全部”，次按钮按需配置 |
||||
|
|
||||
|
### 4.2 文案规范 |
||||
|
|
||||
|
- 文章：查看全部文章 |
||||
|
- 时光机：查看全部动态 |
||||
|
- 阅读：查看阅读清单 |
||||
|
|
||||
|
文案采用“动作 + 对象”，避免“更多”等弱语义措辞。 |
||||
|
|
||||
|
### 4.3 状态规范 |
||||
|
|
||||
|
- 正常态：展示预览条目 |
||||
|
- 空态：显示“暂无公开内容”并给出轻提示 |
||||
|
- 异常态：显示“暂时不可用”，不暴露技术细节 |
||||
|
|
||||
|
### 4.4 一致性规则 |
||||
|
|
||||
|
- 固定顺序：文章 → 时光机 → 阅读 |
||||
|
- 预览排序：统一按时间倒序 |
||||
|
- 交互一致：卡片整体可点、预览可点、CTA 始终可见 |
||||
|
|
||||
|
## 5. 可见性与数据口径 |
||||
|
|
||||
|
### 5.1 公开侧展示规则 |
||||
|
|
||||
|
- `@slug` 主页仅展示 `public` 内容。 |
||||
|
- `@slug/posts`、`@slug/timeline`、`@slug/reading` 公开访问仅返回 `public` 内容。 |
||||
|
- 首页卡片计数与子页总数均以 `public` 口径计算。 |
||||
|
|
||||
|
### 5.2 仅链接（unlisted）规则 |
||||
|
|
||||
|
- 不进入 `@slug` 首页预览与计数。 |
||||
|
- 不进入公开子页列表。 |
||||
|
- 仅允许通过 token 链接访问（例如 `/p/:publicSlug/t/:shareToken`）。 |
||||
|
|
||||
|
### 5.3 私密（private）规则 |
||||
|
|
||||
|
- 仅后台站主可见。 |
||||
|
- 不进入任何公开 API 返回。 |
||||
|
- 不进入 sitemap 与公开聚合统计。 |
||||
|
|
||||
|
### 5.4 口径一致性要求 |
||||
|
|
||||
|
同一模块在以下位置的“数量与内容范围”必须一致： |
||||
|
|
||||
|
- 首页卡片总数 |
||||
|
- 子页分页总数 |
||||
|
- 公开 SEO/结构化数据中的条目数 |
||||
|
|
||||
|
## 6. 风险评审结论 |
||||
|
|
||||
|
### 6.1 高风险 |
||||
|
|
||||
|
1. 统计口径不一致导致用户信任受损 |
||||
|
2. `unlisted` 意外进入公开列表导致泄漏 |
||||
|
|
||||
|
### 6.2 中风险 |
||||
|
|
||||
|
1. 主页功能膨胀回归为内容聚合页 |
||||
|
2. 主页与子页 SEO 信号冲突 |
||||
|
3. 新模块接入方式不统一导致维护复杂度上升 |
||||
|
|
||||
|
### 6.3 低风险 |
||||
|
|
||||
|
1. 首页聚合请求过重影响首屏性能 |
||||
|
|
||||
|
## 7. 验收标准（最小集） |
||||
|
|
||||
|
1. 访客访问 `@slug` 仅看到公开模块与公开预览。 |
||||
|
2. `unlisted` 内容无法通过首页与公开子页列表发现，仅 token 可达。 |
||||
|
3. 子页分页总数与首页模块计数口径一致。 |
||||
|
4. 模块空态与异常态表现统一，不影响其他模块。 |
||||
|
5. 主页与子页 canonical 各自独立，`unlisted` 不进入 sitemap。 |
||||
|
6. 新模块可按“卡片入口 + 独立子页 + 查看全部”模板接入。 |
||||
|
|
||||
|
## 8. 实施边界（本次仅设计评审） |
||||
|
|
||||
|
本文件仅确认信息架构与评审结论，不直接包含代码改造。 |
||||
|
下一步应进入实现规划阶段，将本设计拆分为可执行任务（路由、数据聚合、组件抽象、SEO 与测试）。 |
||||
|
|
||||
|
## 9. 规格自检（已完成） |
||||
|
|
||||
|
- 已检查：无 TBD/TODO 占位符。 |
||||
|
- 已检查：信息架构、可见性规则、验收标准之间无明显冲突。 |
||||
|
- 已检查：范围聚焦于“导航中枢化评审”，未引入无关重构。 |
||||
|
- 已检查：关键术语（公开/仅链接/私密）定义明确，口径一致。 |
||||
Binary file not shown.
Loading…
Reference in new issue