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.
316 lines
6.6 KiB
316 lines
6.6 KiB
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: false
|
|
})
|
|
const { user, clear } = useAuthSession()
|
|
|
|
const adminNav = [
|
|
{
|
|
label: '仪表盘',
|
|
to: '/admin/dashboard',
|
|
icon: 'dashboard'
|
|
},
|
|
{
|
|
label: '定时任务',
|
|
to: '/admin/scheduler',
|
|
icon: 'schedule'
|
|
},
|
|
{
|
|
label: '个人资料',
|
|
to: '/admin/profile',
|
|
icon: 'user'
|
|
},
|
|
]
|
|
|
|
const iconPaths: Record<string, string> = {
|
|
dashboard: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6',
|
|
schedule: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z',
|
|
user: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
|
|
}
|
|
|
|
const logout = async () => {
|
|
await clear()
|
|
navigateTo("/")
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="admin-layout">
|
|
<div class="admin-container">
|
|
<aside class="admin-sidebar">
|
|
<div class="sidebar-header">
|
|
<NuxtLink to="/admin/dashboard" class="brand-link">
|
|
<span class="brand-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</span>
|
|
<span class="brand-name">管理后台</span>
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<NuxtLink
|
|
v-for="item in adminNav"
|
|
:key="item.to"
|
|
:to="item.to"
|
|
class="sidebar-link"
|
|
active-class="active"
|
|
>
|
|
<svg class="sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path :d="iconPaths[item.icon]" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<span class="sidebar-link-label">{{ item.label }}</span>
|
|
</NuxtLink>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
<NuxtLink to="/" class="home-link">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
返回首页
|
|
</NuxtLink>
|
|
<div class="user-section" v-if="user">
|
|
<div class="user-avatar">
|
|
{{ user.username?.charAt(0).toUpperCase() }}
|
|
</div>
|
|
<div class="user-info">
|
|
<span class="user-name">{{ user.username }}</span>
|
|
<span class="user-role">管理员</span>
|
|
</div>
|
|
<button class="logout-btn" @click="logout" title="退出登录">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="admin-main">
|
|
<NuxtPage />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.admin-layout {
|
|
min-height: 100vh;
|
|
background: var(--color-canvas);
|
|
}
|
|
|
|
.admin-container {
|
|
display: flex;
|
|
}
|
|
|
|
.admin-sidebar {
|
|
width: 260px;
|
|
flex-shrink: 0;
|
|
background: var(--color-surface-dark);
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
height: 100vh;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 20px 16px 16px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.brand-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.brand-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
background: var(--color-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.brand-icon svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
color: var(--color-on-primary);
|
|
}
|
|
|
|
.brand-name {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: var(--color-on-dark);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.sidebar-nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: 16px 12px;
|
|
flex: 1;
|
|
}
|
|
|
|
.sidebar-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 12px;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
color: var(--color-on-dark-soft);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.sidebar-link:hover {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
color: var(--color-on-dark);
|
|
}
|
|
|
|
.sidebar-link.active {
|
|
background: var(--color-primary);
|
|
color: var(--color-on-primary);
|
|
}
|
|
|
|
.sidebar-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
flex-shrink: 0;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.sidebar-link:hover .sidebar-icon,
|
|
.sidebar-link.active .sidebar-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
.sidebar-footer {
|
|
padding: 16px 12px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.home-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 10px;
|
|
border-radius: 6px;
|
|
text-decoration: none;
|
|
color: var(--color-on-dark-soft);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.home-link:hover {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
color: var(--color-on-dark);
|
|
}
|
|
|
|
.home-link svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.user-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px;
|
|
border-radius: 8px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
background: var(--color-primary);
|
|
color: var(--color-on-primary);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.user-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
}
|
|
|
|
.user-name {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--color-on-dark);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.user-role {
|
|
font-size: 11px;
|
|
color: var(--color-on-dark-soft);
|
|
}
|
|
|
|
.logout-btn {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 6px;
|
|
color: var(--color-on-dark-soft);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.logout-btn:hover {
|
|
background: rgba(198, 69, 69, 0.2);
|
|
color: #c64545;
|
|
}
|
|
|
|
.logout-btn svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.admin-main {
|
|
flex: 1;
|
|
margin-left: 260px;
|
|
min-height: 100vh;
|
|
background: var(--color-canvas);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.admin-sidebar {
|
|
display: none;
|
|
}
|
|
|
|
.admin-main {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
</style>
|