You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
4.2 KiB
121 lines
4.2 KiB
<script setup lang="ts">
|
|
type HomeUser = {
|
|
username: string
|
|
nickname?: string | null
|
|
avatar?: string | null
|
|
role: 'admin' | 'user' | string
|
|
publicSlug?: string | null
|
|
}
|
|
|
|
defineProps<{
|
|
user: HomeUser
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-4">
|
|
<section class="rounded-2xl border border-default bg-gradient-to-br from-primary/5 via-default to-elevated px-6 py-6 sm:px-8">
|
|
<div class="grid gap-4 lg:grid-cols-3">
|
|
<UCard class="ring-1 ring-default/60 lg:col-span-2">
|
|
<div class="flex flex-wrap items-start justify-between gap-4">
|
|
<div class="flex min-w-0 items-start gap-3">
|
|
<UAvatar :src="user.avatar || undefined" :alt="user.username" size="lg" class="ring-1 ring-default" />
|
|
<div class="min-w-0">
|
|
<p class="text-xs font-medium text-muted">
|
|
当前用户
|
|
</p>
|
|
<p class="truncate text-lg font-semibold text-highlighted">
|
|
{{ user.nickname?.trim() || user.username }}
|
|
</p>
|
|
<NuxtLink
|
|
to="/me/profile"
|
|
class="block truncate text-sm text-muted transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
|
|
>
|
|
@{{ user.username }} · {{ user.role === 'admin' ? '管理员' : '用户' }}
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
v-if="user.publicSlug"
|
|
:to="`/@${user.publicSlug}`"
|
|
target="_blank"
|
|
class="mt-1 block text-sm tabular-nums text-[#d46a31] transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
|
|
>
|
|
{{ `/@${user.publicSlug}` }}
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
v-else
|
|
to="/me/profile"
|
|
class="mt-1 block text-sm text-muted transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
|
|
>
|
|
未设置公开主页地址（去设置）
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<UButton to="/me" size="sm" icon="i-lucide-layout-dashboard">
|
|
控制台
|
|
</UButton>
|
|
<UButton to="/me/profile" size="sm" color="neutral" variant="outline">
|
|
编辑资料
|
|
</UButton>
|
|
<UButton
|
|
v-if="user.publicSlug"
|
|
:to="`/@${user.publicSlug}`"
|
|
target="_blank"
|
|
size="sm"
|
|
color="neutral"
|
|
variant="outline"
|
|
icon="i-lucide-external-link"
|
|
>
|
|
公开主页
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<UCard>
|
|
<p class="text-xs font-medium text-muted">
|
|
管理与常用
|
|
</p>
|
|
<div class="mt-3 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
|
|
v-if="user.role === 'admin'"
|
|
to="/me/admin/config"
|
|
size="xs"
|
|
color="primary"
|
|
variant="soft"
|
|
>
|
|
应用配置
|
|
</UButton>
|
|
<UButton
|
|
v-if="user.role === 'admin'"
|
|
to="/me/admin/users"
|
|
size="xs"
|
|
color="primary"
|
|
variant="soft"
|
|
>
|
|
用户管理
|
|
</UButton>
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
</section>
|
|
|
|
<UAlert
|
|
v-if="!user.publicSlug"
|
|
color="warning"
|
|
variant="subtle"
|
|
title="还没有公开主页地址"
|
|
description="在「资料」中设置 public slug 后，访客即可通过 /@你的地址 访问你的公开内容。"
|
|
icon="i-lucide-alert-circle"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|