laobinghu
ce208df092
核心功能: - 项目初始化 (Nuxt 4 + Nuxt UI + Pinia + ofetch) - TypeScript 类型定义 (User, Article, Comment, API 响应) - 认证系统 (登录/登出、Cookie 支持、权限中间件) - 文章列表页 (筛选、分页、响应式布局) - 文章详情页 (Markdown 渲染、评论系统) - 文章编辑器 (左右分栏、实时预览、Markdown 工具栏) 管理后台: - 侧边栏布局、权限检查 - 数据分析 (数据统计卡片、热门文章、评论审核统计) - 文章管理 (表格、筛选、删除) - 评论管理 (审核通过/拒绝、删除) - 用户管理 (角色管理、删除) 全局组件: - 导航栏 (暗色模式切换、移动端菜单) - 页脚 - 403/404 错误页 配置文件: - .env.example 环境变量模板 - nuxt.config.ts 完整配置 - 自定义 CSS 样式
39 lines
1015 B
Vue
39 lines
1015 B
Vue
<template>
|
|
<UDropdown :items="items" :popper="{ placement: 'bottom-end' }">
|
|
<UButton
|
|
:label="user?.displayName || user?.username"
|
|
variant="ghost"
|
|
class="p-2"
|
|
>
|
|
<template v-if="user?.avatarUrl" #leading>
|
|
<UAvatar :src="user.avatarUrl" size="2xs" />
|
|
</template>
|
|
<template v-else #leading>
|
|
<div
|
|
class="w-6 h-6 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center text-xs font-medium text-indigo-700 dark:text-indigo-300"
|
|
>
|
|
{{ (user?.displayName || user?.username || 'U').charAt(0).toUpperCase() }}
|
|
</div>
|
|
</template>
|
|
</UButton>
|
|
|
|
<template #item="{ item }">
|
|
<span>{{ item.label }}</span>
|
|
</template>
|
|
</UDropdown>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { user, logout } = useAuth()
|
|
|
|
const items = computed(() => [
|
|
[
|
|
{
|
|
label: '退出登录',
|
|
icon: 'i-heroicons-arrow-right-start-on-rectangle',
|
|
click: () => logout(),
|
|
},
|
|
],
|
|
])
|
|
</script>
|