nuxt-app/app/pages/admin.vue

<script setup lang="ts">
import type { NavItem } from '~/components/admin/AdminSidebarNav.vue'

definePageMeta({
  layout: false
})
const { user, clear } = useAuthSession()

const adminNav: NavItem[] = [
  {
    label: '仪表盘',
    to: '/admin/dashboard',
    icon: 'lucide:layout-dashboard'
  },
  {
    label: '定时任务',
    to: '/admin/scheduler',
    icon: 'lucide:clock'
  },
  {
    label: '系统管理',
    icon: 'lucide:settings',
    children: [
      { label: '用户管理', to: '/admin/users' },
    ]
  },
]

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">
              <Icon name="lucide:line-chart" />
            </span>
            <span class="brand-name">管理后台</span>
          </NuxtLink>
        </div>

        <AdminSidebarNav :nav="adminNav" />

        <div class="sidebar-footer">
          <NuxtLink to="/" class="home-link">
            <Icon name="lucide:home" />
            返回首页
          </NuxtLink>
          <NuxtLink is="div" class="user-section" to="/admin/profile" v-if="user">
            <div class="user-avatar">
              {{ user.username?.charAt(0).toUpperCase() }}
            </div>
            <div class="user-info">
              <span class="user-name">{{ user.nickname || user.username }}</span>
              <span class="user-role">{{ user.role === "user" ? "普通用户" : "管理员" }}</span>
            </div>
            <button class="logout-btn" @click.stop.prevent="logout" title="退出登录">
              <Icon name="lucide:log-out" />
            </button>
          </NuxtLink>
        </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 :deep(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-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 :deep(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);
  cursor: pointer;
}

.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 :deep(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>