Lan
2025-09-04 10:24:25 +08:00
parent 7043b6755c
commit 4c8a17bb8d
3 changed files with 18 additions and 21 deletions
+15 -18
View File
@@ -1,13 +1,13 @@
<template> <template>
<div class="min-h-screen flex flex-col lg:flex-row transition-colors duration-300" <div class="h-screen flex flex-col lg:flex-row transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']"> :class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']">
<!-- Sidebar --> <!-- Sidebar -->
<aside <aside
class="fixed inset-y-0 left-0 z-50 w-64 transform transition-all duration-300 ease-in-out lg:relative lg:translate-x-0 border-r" class="fixed inset-y-0 border-transparent left-0 z-50 w-64 transform transition-all duration-300 ease-in-out lg:relative lg:translate-x-0 border-r flex flex-col h-full lg:h-screen"
:class="[ :class="[
isDarkMode isDarkMode
? 'bg-gray-800 bg-opacity-90 backdrop-filter backdrop-blur-xl border-gray-700' ? 'bg-gray-800 bg-opacity-90 backdrop-filter backdrop-blur-xl '
: 'bg-white border-gray-200', : 'bg-white ',
{ '-translate-x-full': !isSidebarOpen } { '-translate-x-full': !isSidebarOpen }
]"> ]">
<!-- Logo区域 --> <!-- Logo区域 -->
@@ -29,7 +29,7 @@
</div> </div>
<!-- 导航菜单 --> <!-- 导航菜单 -->
<nav class="flex-1 overflow-y-auto"> <nav class="flex-1 overflow-y-auto custom-scrollbar">
<ul class="p-4 space-y-2"> <ul class="p-4 space-y-2">
<li v-for="item in menuItems" :key="item.id"> <li v-for="item in menuItems" :key="item.id">
<a @click="router.push(item.redirect)" <a @click="router.push(item.redirect)"
@@ -51,9 +51,9 @@
</aside> </aside>
<!-- Main Content --> <!-- Main Content -->
<div class="flex-1 flex flex-col min-h-screen"> <div class="flex-1 flex flex-col h-full">
<!-- Header --> <!-- Header -->
<header class="shadow-md border-b transition-colors duration-300" <header class="shadow-md border-b transition-colors duration-300 h-64px"
:class="[isDarkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200']"> :class="[isDarkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200']">
<div class="flex items-center justify-between h-16 px-4"> <div class="flex items-center justify-between h-16 px-4">
<button @click="toggleSidebar" class="lg:hidden"> <button @click="toggleSidebar" class="lg:hidden">
@@ -63,7 +63,7 @@
</header> </header>
<!-- Content --> <!-- Content -->
<main class="flex-1 p-6 overflow-y-auto transition-colors duration-300" <main class="overflow-y-auto transition-colors duration-300 custom-scrollbar"
:class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']"> :class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']">
<router-view /> <router-view />
</main> </main>
@@ -79,7 +79,7 @@ import { useRouter } from 'vue-router'
interface MenuItem { interface MenuItem {
id: string id: string
name: string name: string
icon: any icon: typeof LayoutDashboardIcon
redirect: string redirect: string
} }
@@ -220,7 +220,7 @@ input:checked+.slider {
.custom-scrollbar { .custom-scrollbar {
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 8px; width: 6px;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
@@ -229,15 +229,17 @@ input:checked+.slider {
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #cbd5e0; background-color: #cbd5e0;
border-radius: 4px; border-radius: 3px;
&:hover { &:hover {
background-color: #a0aec0; background-color: #a0aec0;
} }
} }
}
/* 适配暗黑模式 */ /* 暗黑模式下的滚动条样式 */
:deep(.dark &::-webkit-scrollbar-thumb) { :global(.dark) .custom-scrollbar {
&::-webkit-scrollbar-thumb {
background-color: #4a5568; background-color: #4a5568;
&:hover { &:hover {
@@ -245,9 +247,4 @@ input:checked+.slider {
} }
} }
} }
/* 确保内容区域不会被截断 */
.space-y-6 {
margin-bottom: 5rem;
}
</style> </style>
+2 -2
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="p-6 h-screen overflow-y-auto custom-scrollbar"> <div class="p-6 overflow-y-auto custom-scrollbar">
<h2 class="text-2xl font-bold mb-6" :class="[isDarkMode ? 'text-white' : 'text-gray-800']"> <h2 class="text-2xl font-bold mb-6" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
仪表盘 仪表盘
</h2> </h2>
@@ -97,7 +97,7 @@
<!-- 添加版本和版权信息 --> <!-- 添加版本和版权信息 -->
<div class="mt-auto text-center py-4" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"> <div class="mt-auto text-center py-4" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
<p class="text-sm"> <p class="text-sm">
版本 v2.0.3 更新时间2025-03-03 版本 v2.2.1 更新时间2025-09-04
</p> </p>
<p class="text-sm mt-1"> <p class="text-sm mt-1">
© {{ new Date().getFullYear() }} <a href="https://github.com/vastsa/FileCodeBox">FileCodeBox</a> © {{ new Date().getFullYear() }} <a href="https://github.com/vastsa/FileCodeBox">FileCodeBox</a>
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="p-6 h-screen overflow-y-auto custom-scrollbar"> <div class="p-6 overflow-y-auto custom-scrollbar">
<!-- 页面标题和统计信息 --> <!-- 页面标题和统计信息 -->
<div class="mb-8"> <div class="mb-8">
<h2 class="text-2xl font-bold mb-4" :class="[isDarkMode ? 'text-white' : 'text-gray-800']"> <h2 class="text-2xl font-bold mb-4" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">