caowangrenbo
472c66ebd8
- 新增 styles/theme.css：CSS 变量覆盖默认主题（主色 #4F46E5、圆角、阴影、页面背景），html.dark 暗色变量 - 新增 stores/theme.ts：暗色/亮色切换，localStorage 持久化 - main.ts 引入 element-plus 暗色 css-vars 与主题文件，挂载前初始化主题 - index.html 加 SVG favicon 与防暗色闪烁内联脚本 - AdminLayout：深色可折叠侧栏、header 面包屑 + 暗色切换按钮、页面切换过渡 - UserLayout：header 打磨 + 暗色切换按钮 - LoginView/ApplyView：统一品牌渐变背景与卡片，登录页 OTP 输入行内联发送按钮、登录按钮唯一通栏主按钮（修复按钮错位）
129 lines
3.3 KiB
Vue
129 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
import { useThemeStore } from '@/stores/theme'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const auth = useAuthStore()
|
|
const theme = useThemeStore()
|
|
|
|
const activeMenu = computed(() => route.path)
|
|
const username = computed(() => auth.me?.username ?? '')
|
|
|
|
async function onLogout() {
|
|
await auth.logout()
|
|
router.push('/login')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<el-container class="user-layout">
|
|
<el-header class="header">
|
|
<span class="logo">
|
|
<span class="logo-icon">
|
|
<el-icon :size="18"><Monitor /></el-icon>
|
|
</span>
|
|
<span class="logo-text">服务器用户管理</span>
|
|
</span>
|
|
<el-menu :default-active="activeMenu" router mode="horizontal" :ellipsis="false" class="nav">
|
|
<el-menu-item index="/me/profile">账号信息</el-menu-item>
|
|
<el-menu-item index="/me/keys">我的密钥</el-menu-item>
|
|
<el-menu-item index="/me/audit">我的审计</el-menu-item>
|
|
</el-menu>
|
|
<div class="header-right">
|
|
<el-tooltip :content="theme.isDark ? '切换到亮色' : '切换到暗色'">
|
|
<el-button link class="icon-btn" @click="theme.toggle()">
|
|
<el-icon :size="17"><Sunny v-if="theme.isDark" /><Moon v-else /></el-icon>
|
|
</el-button>
|
|
</el-tooltip>
|
|
<el-dropdown @command="onLogout">
|
|
<span class="user-chip">
|
|
<el-avatar :size="26" class="avatar">{{ username.slice(0, 1).toUpperCase() }}</el-avatar>
|
|
<span>{{ username }}</span>
|
|
<el-icon><ArrowDown /></el-icon>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</el-header>
|
|
<el-main class="main">
|
|
<router-view v-slot="{ Component }">
|
|
<transition name="fade" mode="out-in">
|
|
<component :is="Component" />
|
|
</transition>
|
|
</router-view>
|
|
</el-main>
|
|
</el-container>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.user-layout {
|
|
min-height: 100vh;
|
|
}
|
|
.header {
|
|
height: var(--app-header-height);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
background: var(--el-bg-color);
|
|
border-bottom: 1px solid var(--el-border-color-light);
|
|
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
|
|
}
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
.logo-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 9px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
|
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
|
|
}
|
|
.logo-text {
|
|
font-weight: 650;
|
|
font-size: 15px;
|
|
}
|
|
.nav {
|
|
flex: 1;
|
|
border-bottom: none;
|
|
}
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
.icon-btn {
|
|
color: var(--el-text-color-regular);
|
|
padding: 4px;
|
|
}
|
|
.user-chip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
.avatar {
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
|
color: #fff;
|
|
}
|
|
.main {
|
|
padding: 20px;
|
|
background: var(--el-bg-color-page);
|
|
}
|
|
</style>
|