|
|
|
@ -1,9 +1,11 @@ |
|
|
|
<script setup lang="ts"> |
|
|
|
import { useAuthStore } from '@/stores/auth' |
|
|
|
import { useRouter } from 'vue-router' |
|
|
|
import { useTheme } from '@/composables/useTheme' |
|
|
|
|
|
|
|
const auth = useAuthStore() |
|
|
|
const router = useRouter() |
|
|
|
const theme = useTheme() |
|
|
|
|
|
|
|
async function handleLogout() { |
|
|
|
try { |
|
|
|
@ -25,6 +27,14 @@ async function handleLogout() { |
|
|
|
<router-link v-if="auth.isAdmin" to="/admin/users">用户管理</router-link> |
|
|
|
<router-link v-if="auth.isAdmin" to="/admin/comments">评论审核</router-link> |
|
|
|
</nav> |
|
|
|
<div class="sidebar-foot"> |
|
|
|
<button |
|
|
|
class="theme-toggle" |
|
|
|
type="button" |
|
|
|
:title="theme.isDark ? '切至天青昼' : '切至黛墨夜'" |
|
|
|
@click="theme.toggle()" |
|
|
|
>{{ theme.isDark ? '昼' : '夜' }}</button> |
|
|
|
</div> |
|
|
|
</aside> |
|
|
|
<div class="content-wrap"> |
|
|
|
<header class="topbar"> |
|
|
|
@ -32,7 +42,11 @@ async function handleLogout() { |
|
|
|
<a href="#" class="logout-link" @click.prevent="handleLogout">退出</a> |
|
|
|
</header> |
|
|
|
<main class="content"> |
|
|
|
<router-view /> |
|
|
|
<router-view v-slot="{ Component }"> |
|
|
|
<transition name="page" mode="out-in"> |
|
|
|
<component :is="Component" /> |
|
|
|
</transition> |
|
|
|
</router-view> |
|
|
|
</main> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -41,18 +55,23 @@ async function handleLogout() { |
|
|
|
<style scoped> |
|
|
|
.admin-layout { |
|
|
|
display: flex; |
|
|
|
min-height: calc(100vh - 56px); |
|
|
|
min-height: calc(100vh - 60px); |
|
|
|
} |
|
|
|
|
|
|
|
.sidebar { |
|
|
|
width: 200px; |
|
|
|
background: #1f2430; |
|
|
|
flex-shrink: 0; |
|
|
|
background: var(--ac-header-bg); |
|
|
|
padding: 20px 12px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
transition: background-color var(--song-dur-2) var(--song-ease); |
|
|
|
} |
|
|
|
|
|
|
|
.sidebar-title { |
|
|
|
color: #fff; |
|
|
|
color: var(--ac-header-text); |
|
|
|
font-size: 15px; |
|
|
|
font-weight: 400; |
|
|
|
margin: 0 0 16px; |
|
|
|
padding-left: 8px; |
|
|
|
} |
|
|
|
@ -66,22 +85,49 @@ async function handleLogout() { |
|
|
|
.sidebar-nav a { |
|
|
|
display: block; |
|
|
|
padding: 10px 14px; |
|
|
|
border-radius: 6px; |
|
|
|
color: #cfd3dc; |
|
|
|
border-radius: var(--song-radius-l); |
|
|
|
color: var(--ac-header-muted); |
|
|
|
text-decoration: none; |
|
|
|
font-size: 14px; |
|
|
|
transition: background var(--song-dur-1) var(--song-ease), color var(--song-dur-1) var(--song-ease); |
|
|
|
} |
|
|
|
|
|
|
|
.sidebar-nav a.router-link-active, |
|
|
|
.sidebar-nav a:hover { |
|
|
|
background: #2c3340; |
|
|
|
color: #fff; |
|
|
|
background: var(--ac-header-active-bg); |
|
|
|
color: var(--ac-header-text); |
|
|
|
} |
|
|
|
|
|
|
|
.sidebar-foot { |
|
|
|
margin-top: auto; |
|
|
|
padding: 12px 8px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.theme-toggle { |
|
|
|
width: 100%; |
|
|
|
height: 34px; |
|
|
|
border: 1px solid var(--ac-border); |
|
|
|
border-radius: var(--song-radius-m); |
|
|
|
background: transparent; |
|
|
|
color: var(--ac-header-muted); |
|
|
|
font-family: var(--song-font-serif); |
|
|
|
font-size: 15px; |
|
|
|
letter-spacing: 0.1em; |
|
|
|
cursor: pointer; |
|
|
|
transition: color var(--song-dur-1) var(--song-ease), border-color var(--song-dur-1) var(--song-ease), background var(--song-dur-1) var(--song-ease); |
|
|
|
} |
|
|
|
|
|
|
|
.theme-toggle:hover { |
|
|
|
color: var(--ac-header-text); |
|
|
|
border-color: var(--ac-header-muted); |
|
|
|
background: var(--ac-header-active-bg); |
|
|
|
} |
|
|
|
|
|
|
|
.content-wrap { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
min-width: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.topbar { |
|
|
|
@ -91,17 +137,17 @@ async function handleLogout() { |
|
|
|
gap: 16px; |
|
|
|
height: 52px; |
|
|
|
padding: 0 20px; |
|
|
|
background: #fff; |
|
|
|
border-bottom: 1px solid #e5e5ea; |
|
|
|
background: var(--ac-bg-card); |
|
|
|
border-bottom: 1px solid var(--ac-border); |
|
|
|
} |
|
|
|
|
|
|
|
.current-user { |
|
|
|
color: #5c6470; |
|
|
|
color: var(--ac-text-secondary); |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
|
|
|
|
.logout-link { |
|
|
|
color: #d33c3c; |
|
|
|
color: var(--ac-danger); |
|
|
|
text-decoration: none; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
|
