57 lines
1.6 KiB
Vue
57 lines
1.6 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
|
|
<!-- 移动端遮罩层 -->
|
|
<div
|
|
v-if="isSidebarOpen"
|
|
class="fixed inset-0 bg-gray-900/50 z-40 lg:hidden"
|
|
@click="isSidebarOpen = false"
|
|
/>
|
|
|
|
<!-- 侧边栏 -->
|
|
<AppSidebar
|
|
class="fixed top-0 bottom-0 z-50 transition-transform duration-300 ease-in-out"
|
|
:class="isSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'"
|
|
/>
|
|
|
|
<!-- Right Content Area -->
|
|
<div class="flex-1 lg:ml-64 flex flex-col min-w-0">
|
|
<!-- Fixed Header -->
|
|
<AppHeader
|
|
class="fixed top-0 right-0 left-0 lg:left-64 z-30 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700"
|
|
:is-sidebar-open="isSidebarOpen"
|
|
:toggle-sidebar="toggleSidebar"
|
|
/>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-1 overflow-y-auto pt-16">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<slot />
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<AppFooter />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { watch } from 'vue'
|
|
|
|
const isSidebarOpen = ref(false)
|
|
|
|
// 切换侧边栏
|
|
const toggleSidebar = () => {
|
|
isSidebarOpen.value = !isSidebarOpen.value
|
|
console.log('侧边栏状态:', isSidebarOpen.value) // 调试信息
|
|
}
|
|
|
|
// 监听路由变化，在移动端自动关闭侧边栏
|
|
watch(() => useRoute().path, () => {
|
|
if (isSidebarOpen.value) {
|
|
isSidebarOpen.value = false
|
|
}
|
|
})
|
|
</script> |