chore: rollback mainlayout
This commit is contained in:
@@ -119,56 +119,56 @@ onMounted(() => {
|
|||||||
|
|
||||||
<!-- Sidebar -->
|
<!-- Sidebar -->
|
||||||
<aside :class="[
|
<aside :class="[
|
||||||
'fixed lg:static inset-y-0 z-50 w-44 2xl:w-52 border-r bg-white dark:bg-slate-900 flex flex-col transition-all duration-300 ease-in-out',
|
'fixed lg:static inset-y-0 z-50 w-44 border-r bg-white dark:bg-slate-950 flex flex-col transition-all duration-300 ease-in-out',
|
||||||
mobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
|
mobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
|
||||||
]">
|
]">
|
||||||
<div class="h-14 flex items-center justify-center px-4 font-bold text-lg border-b relative bg-white dark:bg-slate-900">
|
<div class="h-14 flex items-center justify-center px-4 font-semibold text-lg border-b relative bg-white dark:bg-slate-950">
|
||||||
<span>{{ siteSettings.title }}</span>
|
<span>{{ siteSettings.title }}</span>
|
||||||
<Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden absolute right-2" @click="mobileMenuOpen = false">
|
<Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden absolute right-2" @click="mobileMenuOpen = false">
|
||||||
<X class="h-4 w-4" />
|
<X class="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<nav class="flex-1 px-3 py-6 space-y-1 flex flex-col items-center overflow-y-auto custom-scrollbar bg-white dark:bg-slate-900">
|
<nav class="flex-1 px-3 py-6 space-y-1 flex flex-col items-center overflow-y-auto bg-white dark:bg-slate-950">
|
||||||
<RouterLink v-for="item in navItems" :key="item.to" :to="item.to" custom v-slot="{ navigate }">
|
<RouterLink v-for="item in navItems" :key="item.to" :to="item.to" custom v-slot="{ navigate }">
|
||||||
<Button variant="ghost"
|
<Button variant="ghost"
|
||||||
:class="['justify-start gap-3 h-9 px-3 w-full', isItemActive(item) && 'bg-slate-100 dark:bg-slate-800 text-primary font-semibold shadow-sm']"
|
:class="['justify-start gap-3 h-9 px-3 w-full', isItemActive(item) && 'bg-accent text-accent-foreground']"
|
||||||
@click="handleNavClick(navigate)">
|
@click="handleNavClick(navigate)">
|
||||||
<component :is="item.icon" class="h-3.5 w-3.5" />
|
<component :is="item.icon" class="h-4 w-4" />
|
||||||
<span class="text-[13px]">{{ item.label }}</span>
|
{{ item.label }}
|
||||||
</Button>
|
</Button>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
</nav>
|
</nav>
|
||||||
<div class="px-3 py-4 border-t flex justify-center bg-white dark:bg-slate-900">
|
<div class="px-3 py-4 border-t flex justify-center bg-white dark:bg-slate-950">
|
||||||
<Button variant="ghost" class="justify-start gap-3 h-9 px-3 w-full text-muted-foreground hover:text-destructive hover:bg-destructive/5 transition-colors"
|
<Button variant="ghost" class="justify-start gap-3 h-9 px-3 w-full text-muted-foreground hover:text-foreground"
|
||||||
@click="logout">
|
@click="logout">
|
||||||
<LogOut class="h-3.5 w-3.5" />
|
<LogOut class="h-4 w-4" />
|
||||||
<span class="text-[13px]">退出登录</span>
|
退出登录
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<!-- Main Content Area -->
|
<!-- Main Content Area -->
|
||||||
<main class="flex-1 flex flex-col min-w-0 relative bg-slate-50/30 dark:bg-slate-950/20">
|
<main class="flex-1 flex flex-col min-w-0 relative bg-gray-50/50 dark:bg-transparent">
|
||||||
<!-- Top Navigation Bar -->
|
<!-- Top Navigation Bar -->
|
||||||
<header class="h-14 border-b bg-white dark:bg-slate-900 flex items-center justify-between px-4 lg:px-6 shrink-0 sticky top-0 z-30 shadow-sm">
|
<header class="h-14 border-b bg-white dark:bg-slate-950 flex items-center justify-between px-4 lg:px-6 shrink-0 sticky top-0 z-30">
|
||||||
<div class="flex items-center gap-3 flex-1 min-w-0">
|
<div class="flex items-center gap-3 flex-1 min-w-0">
|
||||||
<Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden shrink-0 border bg-slate-50 dark:bg-slate-800" @click="mobileMenuOpen = true">
|
<Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden shrink-0 border" @click="mobileMenuOpen = true">
|
||||||
<Menu class="h-4 w-4" />
|
<Menu class="h-5 w-5" />
|
||||||
</Button>
|
</Button>
|
||||||
<span class="text-xs text-muted-foreground truncate italic opacity-80" :title="sentence" style="color: #6b7280;">
|
<span class="text-sm text-muted-foreground truncate" :title="sentence">
|
||||||
<span class="hidden sm:inline">{{ sentence }}</span>
|
<span class="hidden sm:inline">{{ sentence }}</span>
|
||||||
<span class="sm:hidden">{{ sentenceContent }}</span>
|
<span class="sm:hidden">{{ sentenceContent }}</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-2">
|
||||||
<SystemNotice />
|
<SystemNotice />
|
||||||
<ThemeToggle />
|
<ThemeToggle />
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Page View Container -->
|
<!-- Page View Container -->
|
||||||
<div class="flex-1 overflow-auto custom-scrollbar relative">
|
<div class="flex-1 overflow-auto relative">
|
||||||
<div class="p-4 lg:p-6 2xl:p-10 mx-auto">
|
<div class="p-4 lg:p-6 mx-auto">
|
||||||
<RouterView />
|
<RouterView />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user