🎨 重写侧边栏
This commit is contained in:
MoeSnowyFox
@@ -1,80 +1,63 @@
|
|||||||
<template>
|
<template>
|
||||||
<a-layout style="height: 100vh; overflow: hidden">
|
<a-layout style="height: 100vh; overflow: hidden" class="app-layout-collapsed">
|
||||||
<a-layout-sider
|
<a-layout-sider
|
||||||
v-model:collapsed="collapsed"
|
v-model:collapsed="collapsed"
|
||||||
:trigger="null"
|
|
||||||
collapsible
|
collapsible
|
||||||
:theme="isDark ? 'dark' : 'light'"
|
:trigger="null"
|
||||||
style="height: 100vh; position: fixed; left: 0; top: 0; z-index: 100"
|
|
||||||
:width="180"
|
:width="180"
|
||||||
:collapsed-width="60"
|
:collapsed-width="60"
|
||||||
|
:theme="isDark ? 'dark' : 'light'"
|
||||||
|
style="height: 100vh; position: fixed; left: 0; top: 0; z-index: 100"
|
||||||
>
|
>
|
||||||
<div class="sider-content">
|
<div class="sider-content">
|
||||||
<!-- Logo区域 - 点击切换展开/折叠 -->
|
<!-- Logo -->
|
||||||
<div class="logo" @click="collapsed = !collapsed">
|
<div class="logo" @click="toggleCollapse">
|
||||||
<img src="/src/assets/AUTO_MAA.ico" alt="AUTO_MAA" class="logo-image" />
|
<img src="/src/assets/AUTO_MAA.ico" alt="AUTO_MAA" class="logo-image" />
|
||||||
<div v-if="!collapsed" class="logo-text">AUTO_MAA</div>
|
<span class="logo-text" :class="{ 'text-hidden': collapsed }">AUTO_MAA</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 主菜单 -->
|
<!-- 主菜单容器 -->
|
||||||
<div class="main-menu">
|
<div class="main-menu-container">
|
||||||
<a-menu
|
<a-menu
|
||||||
v-model:selectedKeys="selectedKeys"
|
|
||||||
:theme="isDark ? 'dark' : 'light'"
|
|
||||||
mode="inline"
|
mode="inline"
|
||||||
:inline-collapsed="collapsed"
|
:inline-collapsed="collapsed"
|
||||||
|
:theme="isDark ? 'dark' : 'light'"
|
||||||
|
class="main-menu"
|
||||||
|
v-model:selectedKeys="selectedKeys"
|
||||||
>
|
>
|
||||||
<a-menu-item key="/home" @click="handleMenuClick('/home')">
|
<template v-for="item in mainMenuItems" :key="item.path">
|
||||||
<home-outlined />
|
<a-menu-item @click="goTo(item.path)" :data-title="item.label">
|
||||||
<span>主页</span>
|
<template #icon>
|
||||||
</a-menu-item>
|
<component :is="item.icon" />
|
||||||
<a-menu-item key="/scripts" @click="handleMenuClick('/scripts')">
|
</template>
|
||||||
<file-text-outlined />
|
<span v-if="!collapsed" class="menu-text">{{ item.label }}</span>
|
||||||
<span>脚本管理</span>
|
</a-menu-item>
|
||||||
</a-menu-item>
|
</template>
|
||||||
<a-menu-item key="/plans" @click="handleMenuClick('/plans')">
|
|
||||||
<calendar-outlined />
|
|
||||||
<span>计划管理</span>
|
|
||||||
</a-menu-item>
|
|
||||||
<a-menu-item key="/queue" @click="handleMenuClick('/queue')">
|
|
||||||
<unordered-list-outlined />
|
|
||||||
<span>调度队列</span>
|
|
||||||
</a-menu-item>
|
|
||||||
<a-menu-item key="/scheduler" @click="handleMenuClick('/scheduler')">
|
|
||||||
<control-outlined />
|
|
||||||
<span>调度中心</span>
|
|
||||||
</a-menu-item>
|
|
||||||
<a-menu-item key="/history" @click="handleMenuClick('/history')">
|
|
||||||
<history-outlined />
|
|
||||||
<span>历史记录</span>
|
|
||||||
</a-menu-item>
|
|
||||||
</a-menu>
|
</a-menu>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 底部设置菜单 -->
|
<!-- 底部菜单（带3px底部内边距） -->
|
||||||
<div class="bottom-menu">
|
<a-menu
|
||||||
<a-menu
|
mode="inline"
|
||||||
v-model:selectedKeys="selectedKeys"
|
:inline-collapsed="collapsed"
|
||||||
:theme="isDark ? 'dark' : 'light'"
|
:theme="isDark ? 'dark' : 'light'"
|
||||||
mode="inline"
|
class="bottom-menu"
|
||||||
:inline-collapsed="collapsed"
|
v-model:selectedKeys="selectedKeys"
|
||||||
>
|
>
|
||||||
<a-menu-item key="/settings" @click="handleMenuClick('/settings')">
|
<template v-for="item in bottomMenuItems" :key="item.path">
|
||||||
<setting-outlined />
|
<a-menu-item @click="goTo(item.path)" :data-title="item.label">
|
||||||
<span>设置</span>
|
<template #icon>
|
||||||
|
<component :is="item.icon" />
|
||||||
|
</template>
|
||||||
|
<span v-if="!collapsed" class="menu-text">{{ item.label }}</span>
|
||||||
</a-menu-item>
|
</a-menu-item>
|
||||||
</a-menu>
|
</template>
|
||||||
</div>
|
</a-menu>
|
||||||
</div>
|
</div>
|
||||||
</a-layout-sider>
|
</a-layout-sider>
|
||||||
|
|
||||||
<a-layout
|
<!-- 主内容区 -->
|
||||||
:style="{
|
<a-layout :style="{ marginLeft: collapsed ? '60px' : '180px', transition: 'margin-left 0.2s', height: '100vh' }">
|
||||||
marginLeft: collapsed ? '60px' : '180px',
|
|
||||||
height: '100vh',
|
|
||||||
transition: 'margin-left 0.2s',
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<a-layout-content
|
<a-layout-content
|
||||||
class="content-area"
|
class="content-area"
|
||||||
:style="{
|
:style="{
|
||||||
@@ -109,15 +92,35 @@ const route = useRoute()
|
|||||||
const { isDark } = useTheme()
|
const { isDark } = useTheme()
|
||||||
|
|
||||||
const collapsed = ref<boolean>(false)
|
const collapsed = ref<boolean>(false)
|
||||||
const selectedKeys = ref<string[]>([route.path])
|
|
||||||
|
|
||||||
// 监听路由变化更新选中状态
|
// 菜单数据
|
||||||
const currentRoute = computed(() => route.path)
|
const mainMenuItems = [
|
||||||
selectedKeys.value = [currentRoute.value]
|
{ path: '/home', label: '主页', icon: HomeOutlined },
|
||||||
|
{ path: '/scripts', label: '脚本管理', icon: FileTextOutlined },
|
||||||
|
{ path: '/plans', label: '计划管理', icon: CalendarOutlined },
|
||||||
|
{ path: '/queue', label: '调度队列', icon: UnorderedListOutlined },
|
||||||
|
{ path: '/scheduler', label: '调度中心', icon: ControlOutlined },
|
||||||
|
{ path: '/history', label: '历史记录', icon: HistoryOutlined },
|
||||||
|
]
|
||||||
|
|
||||||
const handleMenuClick = (path: string) => {
|
const bottomMenuItems = [
|
||||||
|
{ path: '/settings', label: '设置', icon: SettingOutlined },
|
||||||
|
]
|
||||||
|
|
||||||
|
// 自动同步选中项
|
||||||
|
const selectedKeys = computed(() => {
|
||||||
|
const path = route.path
|
||||||
|
const allItems = [...mainMenuItems, ...bottomMenuItems]
|
||||||
|
const matched = allItems.find(item => path.startsWith(item.path))
|
||||||
|
return [matched?.path || '/home']
|
||||||
|
})
|
||||||
|
|
||||||
|
const goTo = (path: string) => {
|
||||||
router.push(path)
|
router.push(path)
|
||||||
selectedKeys.value = [path]
|
}
|
||||||
|
|
||||||
|
const toggleCollapse = () => {
|
||||||
|
collapsed.value = !collapsed.value
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -126,141 +129,154 @@ const handleMenuClick = (path: string) => {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
padding-bottom: 4px; /* 关键：添加3px底部内边距 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Logo */
|
||||||
.logo {
|
.logo {
|
||||||
height: 64px;
|
height: 42px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
padding: 0 12px;
|
||||||
gap: 12px;
|
margin: 4px;
|
||||||
padding: 16px;
|
|
||||||
margin: 16px;
|
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.2s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo:hover {
|
.logo:hover {
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
background-color: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
:deep(.ant-layout-sider-light) .logo:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-image {
|
.logo-image {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
object-fit: contain;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-text {
|
.logo-text {
|
||||||
|
margin-left: 12px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
letter-spacing: 1px;
|
white-space: nowrap;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
.logo-text.text-hidden {
|
||||||
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 浅色模式下的 Logo 悬停效果 */
|
/* 主菜单容器 */
|
||||||
:deep(.ant-layout-sider-light) .logo:hover {
|
.main-menu-container {
|
||||||
background-color: rgba(0, 0, 0, 0.04);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-menu {
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow: auto;
|
||||||
padding-bottom: 60px;
|
/* 修复滚动条显示问题 */
|
||||||
/* 为底部设置菜单留出空间 */
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: rgba(0,0,0,0.2) transparent;
|
||||||
|
}
|
||||||
|
.main-menu-container::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
.main-menu-container::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.main-menu-container::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(0,0,0,0.2);
|
||||||
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 底部菜单 */
|
||||||
.bottom-menu {
|
.bottom-menu {
|
||||||
position: absolute;
|
margin-top: auto;
|
||||||
bottom: 0;
|
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
left: 0;
|
}
|
||||||
right: 0;
|
:deep(.ant-layout-sider-light .bottom-menu) {
|
||||||
background: inherit;
|
border-top: 1px solid rgba(0, 0, 0, 0.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 深色模式下的底部菜单边框 */
|
/* 菜单项文字 */
|
||||||
:deep(.ant-layout-sider-dark) .bottom-menu {
|
.menu-text {
|
||||||
/*
|
margin-left: 36px;
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
white-space: nowrap;
|
||||||
*/
|
opacity: 1;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 浅色模式下的底部菜单边框 */
|
/* 主题颜色 */
|
||||||
:deep(.ant-layout-sider-light) .bottom-menu {
|
:deep(.ant-layout-sider-dark) .logo-text,
|
||||||
/*
|
:deep(.ant-layout-sider-dark) .menu-text {
|
||||||
border-top: 1px solid #d9d9d9;
|
color: #fff;
|
||||||
|
|
||||||
*/
|
|
||||||
}
|
}
|
||||||
|
:deep(.ant-layout-sider-light) .logo-text,
|
||||||
/* 深色模式样式 */
|
:deep(.ant-layout-sider-light) .menu-text {
|
||||||
:deep(.ant-layout-sider-dark) .logo-text {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 浅色模式样式 */
|
|
||||||
:deep(.ant-layout-sider-light) .logo-text {
|
|
||||||
color: rgba(0, 0, 0, 0.88);
|
color: rgba(0, 0, 0, 0.88);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 浅色模式下的侧边栏背景色 */
|
/* 菜单项统一样式 */
|
||||||
:deep(.ant-layout-sider-light) {
|
:deep(.ant-menu-item),
|
||||||
background: #f5f5f5 !important;
|
:deep(.ant-menu-item-selected) {
|
||||||
}
|
|
||||||
|
|
||||||
/* 浅色模式下的菜单背景色 */
|
|
||||||
:deep(.ant-layout-sider-light .ant-menu-light) {
|
|
||||||
background: #f5f5f5 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-layout-sider) {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 34px;
|
||||||
|
margin: 0 6px;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 移除菜单右边框 */
|
/* 图标绝对定位 */
|
||||||
:deep(.ant-menu) {
|
:deep(.ant-menu-item .ant-menu-item-icon) {
|
||||||
border-right: none !important;
|
position: absolute;
|
||||||
border-inline-end: none !important;
|
left: 16px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 18px;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 更强制地移除菜单右边框 */
|
/* 隐藏内容区滚动条 */
|
||||||
:deep(.ant-menu-light.ant-menu-root.ant-menu-inline),
|
|
||||||
:deep(.ant-menu-light.ant-menu-root.ant-menu-vertical),
|
|
||||||
:deep(.ant-menu-dark.ant-menu-root.ant-menu-inline),
|
|
||||||
:deep(.ant-menu-dark.ant-menu-root.ant-menu-vertical) {
|
|
||||||
border-inline-end: none !important;
|
|
||||||
border-right: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 确保折叠时图标显示 */
|
|
||||||
:deep(.ant-menu-inline-collapsed .ant-menu-item) {
|
|
||||||
padding: 0 calc(50% - 14px);
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-menu-inline-collapsed .ant-menu-item .anticon) {
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 隐藏内容区域滚动条 */
|
|
||||||
.content-area {
|
.content-area {
|
||||||
/* Webkit 浏览器 (Chrome, Safari, Edge) */
|
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
/* Firefox */
|
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-area::-webkit-scrollbar {
|
.content-area::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 隐藏侧边栏主菜单滚动条 */
|
|
||||||
.main-menu {
|
|
||||||
scrollbar-width: none;
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-menu::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<!-- 全局样式 -->
|
||||||
|
<style>
|
||||||
|
/* 收缩状态下，通过 data-title 显示 Tooltip */
|
||||||
|
.app-layout-collapsed .ant-menu-inline-collapsed .ant-menu-item:hover::before {
|
||||||
|
content: attr(data-title);
|
||||||
|
position: absolute;
|
||||||
|
left: 60px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background: #1890ff;
|
||||||
|
color: #fff;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: 12px;
|
||||||
|
z-index: 1000;
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 修复底部菜单在折叠状态下的tooltip位置 */
|
||||||
|
.app-layout-collapsed .ant-menu-inline-collapsed .bottom-menu .ant-menu-item:hover::before {
|
||||||
|
left: 60px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确保底部菜单在收缩状态下也有3px间距 */
|
||||||
|
.app-layout-collapsed .ant-menu-inline-collapsed .bottom-menu {
|
||||||
|
padding-bottom: 6px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user