fix: https://github.com/vastsa/FileCodeBox/issues/306 https://github.com/vastsa/FileCodeBox/issues/279
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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,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']">
|
||||||
|
|||||||
Reference in New Issue
Block a user