151 lines
3.5 KiB
Vue
151 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
Binary,
|
|
Code2,
|
|
Crown,
|
|
Image,
|
|
LayoutGrid,
|
|
Lightbulb,
|
|
Maximize,
|
|
User,
|
|
Workflow
|
|
} from 'lucide-vue-next';
|
|
|
|
const menuStore = useMenuStore()
|
|
|
|
// 路径到图标的映射
|
|
const iconMap: any = {
|
|
'/model-square': LayoutGrid,
|
|
'/picture-square':Lightbulb,
|
|
'/work-square':Workflow,
|
|
'/web-ui': Image,
|
|
'/comfy-ui': Workflow,
|
|
'/training-lora': Binary,
|
|
'/high-availability': Maximize,
|
|
'/api-platform': Code2,
|
|
'/creator-center': Code2,
|
|
'/personal-center': User,
|
|
'/member-center': Crown,
|
|
}
|
|
const route = useRoute()
|
|
|
|
// 监听路由变化
|
|
watch(
|
|
() => route.path,
|
|
(path) => {
|
|
menuStore.setActiveMenu(path)
|
|
},
|
|
{ immediate: true }, // 这样一进入页面就会执行一次
|
|
)
|
|
|
|
// 更新菜单项中的图标
|
|
menuStore.menuItems = menuStore.menuItems.map(item => ({
|
|
...item,
|
|
LucideIcon: iconMap[item.path], // 添加 Lucide 图标组件
|
|
}))
|
|
|
|
function handleSide(event: Event, path: string) {
|
|
if (path === '/member-center') {
|
|
event.preventDefault() // 阻止默认行为
|
|
event.stopPropagation() // 阻止事件冒泡
|
|
const baseUrl = window.location.origin
|
|
window.open(`${baseUrl}/member-center`, '_blank', 'noopener,noreferrer')
|
|
// 确保当前路由不变
|
|
// nextTick(() => {
|
|
// debugger
|
|
// if (route.path !== window.location.pathname) {
|
|
// navigateTo(route.path, { replace: true })
|
|
// }
|
|
// })
|
|
}
|
|
else {
|
|
menuStore.setActiveMenu(path)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex h-screen flex-col bg-white dark:bg-dark-800">
|
|
<!-- Header -->
|
|
<Header />
|
|
|
|
<!-- Main Content -->
|
|
<div class="flex flex-1 overflow-hidden">
|
|
<!-- Sidebar -->
|
|
<nav class="w-[200px] border-r border-gray-100 bg-gray-50/50 py-2 dark:border-dark-700 dark:bg-dark-800/50">
|
|
<div class="space-y-1 px-2">
|
|
<NuxtLink
|
|
v-for="item in menuStore.menuItems"
|
|
:key="item.path"
|
|
:to="item.path"
|
|
class="flex items-center gap-3 rounded-lg px-4 py-4 text-[15px] font-medium no-underline transition-colors"
|
|
:class="[
|
|
menuStore.activeMenu === item.path
|
|
? 'bg-blue-500/8 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400'
|
|
: 'text-gray-600 hover:bg-gray-500/5 dark:text-gray-300 dark:hover:bg-dark-700/50',
|
|
]"
|
|
@click="(event: Event) => handleSide(event, item.path)"
|
|
>
|
|
<!-- 只显示 Lucide 图标 -->
|
|
<component
|
|
:is="item.LucideIcon"
|
|
class="h-[14px] w-[14px]"
|
|
:class="menuStore.activeMenu === item.path
|
|
? 'text-blue-600 dark:text-blue-400'
|
|
: 'text-gray-500 dark:text-gray-400'"
|
|
/>
|
|
|
|
<span>{{ item.label }}</span>
|
|
</NuxtLink>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Page Content -->
|
|
<main class="flex-1 overflow-auto">
|
|
<slot />
|
|
</main>
|
|
|
|
<!-- 登录框组件 -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
:root {
|
|
--primary: rgb(59, 130, 246);
|
|
--primary-hover: rgb(37, 99, 235);
|
|
}
|
|
|
|
::selection {
|
|
background: var(--primary);
|
|
color: white;
|
|
}
|
|
|
|
/* 自定义滚动条 */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #e5e7eb;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #d1d5db;
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
background: #374151;
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb:hover {
|
|
background: #4b5563;
|
|
}
|
|
</style>
|