|
|
|
@ -7,6 +7,33 @@ const { allowRegister } = useGlobalConfig() |
|
|
|
|
|
|
|
const logoutLoading = ref(false) |
|
|
|
|
|
|
|
const features = [ |
|
|
|
{ |
|
|
|
title: '个人资料', |
|
|
|
desc: '生平叙事、头像、社交链接与公开主页 slug，支持分块可见性。', |
|
|
|
icon: 'i-lucide-user-round', |
|
|
|
to: '/me/profile', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: 'Markdown 文章', |
|
|
|
desc: '自写内容、slug、摘要与封面，每条可公开、私密或仅链接分享。', |
|
|
|
icon: 'i-lucide-file-text', |
|
|
|
to: '/me/posts', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '时光机', |
|
|
|
desc: '按时间轴记录里程碑事件，与文章、阅读流在同一叙事里呈现。', |
|
|
|
icon: 'i-lucide-history', |
|
|
|
to: '/me/timeline', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: 'RSS 收件箱', |
|
|
|
desc: '订阅源仅自己可见；定时拉取、去重，条目默认可再设为公开展示。', |
|
|
|
icon: 'i-lucide-rss', |
|
|
|
to: '/me/rss', |
|
|
|
}, |
|
|
|
] as const |
|
|
|
|
|
|
|
async function logout() { |
|
|
|
logoutLoading.value = true |
|
|
|
try { |
|
|
|
@ -20,72 +47,208 @@ async function logout() { |
|
|
|
</script> |
|
|
|
|
|
|
|
<template> |
|
|
|
<div class="max-w-5xl mx-auto py-8 space-y-6"> |
|
|
|
<UCard v-if="loggedIn"> |
|
|
|
<template #header> |
|
|
|
<div class="flex items-start justify-between gap-4"> |
|
|
|
<div> |
|
|
|
<h1 class="text-2xl font-semibold">欢迎回来，{{ user?.username }}</h1> |
|
|
|
<p class="text-sm text-muted mt-1">你已登录，可访问站内受保护内容。</p> |
|
|
|
<div class="mx-auto max-w-6xl space-y-12 pb-4"> |
|
|
|
<!-- Hero --> |
|
|
|
<section class="relative overflow-hidden rounded-2xl border border-default bg-gradient-to-br from-primary/5 via-default to-elevated px-6 py-12 sm:px-10 sm:py-16"> |
|
|
|
<div class="pointer-events-none absolute -right-20 -top-20 size-64 rounded-full bg-primary/10 blur-3xl" /> |
|
|
|
<div class="pointer-events-none absolute -bottom-24 -left-16 size-72 rounded-full bg-primary/5 blur-3xl" /> |
|
|
|
<div class="relative max-w-2xl space-y-4"> |
|
|
|
<UBadge color="primary" variant="subtle" size="md"> |
|
|
|
个人数据中心 |
|
|
|
</UBadge> |
|
|
|
<h1 class="text-3xl font-bold tracking-tight text-highlighted sm:text-4xl"> |
|
|
|
把你的故事、文章与阅读，收进一个地方 |
|
|
|
</h1> |
|
|
|
<p class="text-base text-muted sm:text-lg leading-relaxed"> |
|
|
|
Person Panel 面向「多用户、邀请制」场景：每位用户独立资料与订阅；公开主页可只展示你愿意公开的部分；RSS 在后台静默同步。 |
|
|
|
</p> |
|
|
|
<div class="flex flex-wrap gap-3 pt-2"> |
|
|
|
<template v-if="loggedIn"> |
|
|
|
<UButton to="/me" size="lg" icon="i-lucide-layout-dashboard"> |
|
|
|
进入控制台 |
|
|
|
</UButton> |
|
|
|
<UButton |
|
|
|
v-if="user?.publicSlug" |
|
|
|
:to="`/@${user.publicSlug}`" |
|
|
|
target="_blank" |
|
|
|
size="lg" |
|
|
|
color="neutral" |
|
|
|
variant="outline" |
|
|
|
icon="i-lucide-external-link" |
|
|
|
> |
|
|
|
预览公开主页 |
|
|
|
</UButton> |
|
|
|
<UButton |
|
|
|
v-else |
|
|
|
to="/me/profile" |
|
|
|
size="lg" |
|
|
|
color="neutral" |
|
|
|
variant="outline" |
|
|
|
icon="i-lucide-link" |
|
|
|
> |
|
|
|
设置公开链接 |
|
|
|
</UButton> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<UButton to="/login" size="lg" icon="i-lucide-log-in"> |
|
|
|
登录使用 |
|
|
|
</UButton> |
|
|
|
<UButton |
|
|
|
v-if="allowRegister" |
|
|
|
to="/register" |
|
|
|
size="lg" |
|
|
|
color="neutral" |
|
|
|
variant="outline" |
|
|
|
> |
|
|
|
注册账号 |
|
|
|
</UButton> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
|
|
|
|
<!-- 已登录：摘要条 --> |
|
|
|
<section v-if="loggedIn && user" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4"> |
|
|
|
<UCard class="ring-1 ring-default/60"> |
|
|
|
<div class="flex items-start gap-3"> |
|
|
|
<UAvatar :src="user.avatar || undefined" :alt="user.username" size="md" class="ring-1 ring-default" /> |
|
|
|
<div class="min-w-0 flex-1"> |
|
|
|
<p class="text-xs font-medium text-muted"> |
|
|
|
当前用户 |
|
|
|
</p> |
|
|
|
<p class="truncate font-semibold text-highlighted"> |
|
|
|
{{ user.nickname?.trim() || user.username }} |
|
|
|
</p> |
|
|
|
<p class="truncate text-xs text-muted"> |
|
|
|
@{{ user.username }} · {{ user.role === 'admin' ? '管理员' : '用户' }} |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<UBadge color="success" variant="subtle">已登录</UBadge> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</UCard> |
|
|
|
<UCard> |
|
|
|
<p class="text-xs font-medium text-muted"> |
|
|
|
公开主页 |
|
|
|
</p> |
|
|
|
<p class="mt-1 font-semibold text-highlighted"> |
|
|
|
{{ user.publicSlug ? `/@${user.publicSlug}` : '尚未设置' }} |
|
|
|
</p> |
|
|
|
<UButton to="/me/profile" size="xs" variant="link" class="mt-2 px-0"> |
|
|
|
去资料页配置 |
|
|
|
</UButton> |
|
|
|
</UCard> |
|
|
|
<UCard class="sm:col-span-2"> |
|
|
|
<p class="text-xs font-medium text-muted"> |
|
|
|
快捷入口 |
|
|
|
</p> |
|
|
|
<div class="mt-2 flex flex-wrap gap-2"> |
|
|
|
<UButton to="/me/posts" size="xs" variant="soft"> |
|
|
|
文章 |
|
|
|
</UButton> |
|
|
|
<UButton to="/me/timeline" size="xs" variant="soft"> |
|
|
|
时光机 |
|
|
|
</UButton> |
|
|
|
<UButton to="/me/rss" size="xs" variant="soft"> |
|
|
|
RSS |
|
|
|
</UButton> |
|
|
|
<UButton to="/me/profile" size="xs" variant="soft"> |
|
|
|
资料 |
|
|
|
</UButton> |
|
|
|
<UButton |
|
|
|
v-if="user.role === 'admin'" |
|
|
|
to="/me/admin/users" |
|
|
|
size="xs" |
|
|
|
color="primary" |
|
|
|
variant="soft" |
|
|
|
> |
|
|
|
用户管理 |
|
|
|
</UButton> |
|
|
|
</div> |
|
|
|
</UCard> |
|
|
|
</section> |
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-3"> |
|
|
|
<UCard> |
|
|
|
<p class="text-xs text-muted">状态</p> |
|
|
|
<p class="mt-1 font-medium">会话有效</p> |
|
|
|
</UCard> |
|
|
|
<UCard> |
|
|
|
<p class="text-xs text-muted">入口</p> |
|
|
|
<p class="mt-1 font-medium">首页 / 配置 / API</p> |
|
|
|
</UCard> |
|
|
|
<UCard> |
|
|
|
<p class="text-xs text-muted">建议</p> |
|
|
|
<p class="mt-1 font-medium">可继续扩展个人中心</p> |
|
|
|
<UAlert |
|
|
|
v-if="loggedIn && user && !user.publicSlug" |
|
|
|
color="warning" |
|
|
|
variant="subtle" |
|
|
|
title="还没有公开主页地址" |
|
|
|
description="在「资料」中设置 public slug 后，访客即可通过 /@你的地址 访问你的公开内容。" |
|
|
|
icon="i-lucide-alert-circle" |
|
|
|
/> |
|
|
|
|
|
|
|
<!-- 功能矩阵 --> |
|
|
|
<section class="space-y-4"> |
|
|
|
<div> |
|
|
|
<h2 class="text-xl font-semibold text-highlighted"> |
|
|
|
你能做什么 |
|
|
|
</h2> |
|
|
|
<p class="mt-1 text-sm text-muted"> |
|
|
|
四大模块覆盖展示、创作与阅读输入；权限与可见性按条目细粒度控制。 |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div class="grid gap-4 sm:grid-cols-2"> |
|
|
|
<UCard |
|
|
|
v-for="item in features" |
|
|
|
:key="item.title" |
|
|
|
class="group transition-shadow hover:shadow-md" |
|
|
|
> |
|
|
|
<div class="flex gap-4"> |
|
|
|
<span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary"> |
|
|
|
<UIcon :name="item.icon" class="size-6" /> |
|
|
|
</span> |
|
|
|
<div class="min-w-0 flex-1 space-y-2"> |
|
|
|
<h3 class="font-semibold text-highlighted"> |
|
|
|
{{ item.title }} |
|
|
|
</h3> |
|
|
|
<p class="text-sm leading-relaxed text-muted"> |
|
|
|
{{ item.desc }} |
|
|
|
</p> |
|
|
|
<UButton |
|
|
|
v-if="loggedIn" |
|
|
|
:to="item.to" |
|
|
|
size="xs" |
|
|
|
variant="link" |
|
|
|
class="px-0" |
|
|
|
trailing-icon="i-lucide-arrow-right" |
|
|
|
> |
|
|
|
打开 |
|
|
|
</UButton> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</UCard> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
|
|
|
|
<div class="mt-5 flex flex-wrap items-center gap-3"> |
|
|
|
<UButton to="/me" variant="solid"> |
|
|
|
进入控制台 |
|
|
|
<!-- 访客说明 --> |
|
|
|
<section v-if="!loggedIn" class="rounded-xl border border-dashed border-default bg-elevated/30 px-6 py-8"> |
|
|
|
<h3 class="font-semibold text-highlighted"> |
|
|
|
访客说明 |
|
|
|
</h3> |
|
|
|
<p class="mt-2 max-w-2xl text-sm text-muted leading-relaxed"> |
|
|
|
本站默认需登录后使用控制台。若你已有账号，请点击「登录」；新账号由管理员在后台创建（邀请制）。 |
|
|
|
</p> |
|
|
|
<div class="mt-4 flex flex-wrap gap-2"> |
|
|
|
<UButton to="/login"> |
|
|
|
登录 |
|
|
|
</UButton> |
|
|
|
<UButton color="neutral" :loading="logoutLoading" @click="logout"> |
|
|
|
退出登录 |
|
|
|
</UButton> |
|
|
|
<UButton to="/api/config/me" target="_blank" variant="outline"> |
|
|
|
配置 API |
|
|
|
<UButton v-if="allowRegister" to="/register" color="neutral" variant="outline"> |
|
|
|
注册 |
|
|
|
</UButton> |
|
|
|
</div> |
|
|
|
</UCard> |
|
|
|
|
|
|
|
<UCard v-else> |
|
|
|
<template #header> |
|
|
|
<div class="flex items-start justify-between gap-4"> |
|
|
|
<div> |
|
|
|
<h1 class="text-2xl font-semibold">欢迎来到本站</h1> |
|
|
|
<p class="text-sm text-muted mt-1">当前为访客模式，仅开放首页与认证页面。</p> |
|
|
|
</div> |
|
|
|
<UBadge color="neutral" variant="subtle">未登录</UBadge> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</section> |
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-3"> |
|
|
|
<UCard> |
|
|
|
<p class="text-xs text-muted">访问策略</p> |
|
|
|
<p class="mt-1 font-medium">登录优先，白名单放行</p> |
|
|
|
</UCard> |
|
|
|
<UCard> |
|
|
|
<p class="text-xs text-muted">安全能力</p> |
|
|
|
<p class="mt-1 font-medium">API 默认鉴权 + 401 统一处理</p> |
|
|
|
</UCard> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="mt-5 flex gap-3"> |
|
|
|
<UButton to="/login">去登录</UButton> |
|
|
|
<UButton v-if="allowRegister" to="/register" color="neutral" variant="outline">去注册</UButton> |
|
|
|
<!-- 已登录底部操作 --> |
|
|
|
<section v-if="loggedIn" class="flex flex-wrap items-center justify-between gap-4 rounded-xl border border-default bg-elevated/20 px-4 py-4"> |
|
|
|
<p class="text-sm text-muted"> |
|
|
|
需要退出当前会话？ |
|
|
|
</p> |
|
|
|
<div class="flex gap-2"> |
|
|
|
<UButton to="/api/config/me" target="_blank" variant="outline" color="neutral" size="sm"> |
|
|
|
配置 API（调试） |
|
|
|
</UButton> |
|
|
|
<UButton color="neutral" :loading="logoutLoading" size="sm" @click="logout"> |
|
|
|
退出登录 |
|
|
|
</UButton> |
|
|
|
</div> |
|
|
|
</UCard> |
|
|
|
</section> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
