Northern_Lights/NapCatQQ
1
0
Fork 0
mirror of https://github.com/NapNeko/NapCatQQ.git synced 2026-02-06 13:05:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 布局面板基础结构

Browse Source
This commit is contained in:
手瓜一十雪
2024-11-15 13:25:02 +08:00
parent 084526a350
commit 53e0d70679
8 changed files with 85 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
napcat.webui/src/components/Dashboard.vue
View File

@@ -1,5 +1,10 @@
<template>
<SidebarMenu :menuItems="menuItems" />
<div>
<SidebarMenu :menuItems="menuItems" />
<div class="content">
<router-view />
</div>
</div>
</template>
<script>
@@ -12,12 +17,20 @@ export default {
data() {
return {
menuItems: [
{ value: 'item1', icon: 'dashboard', label: '基础信息', route: '/basic-info' },
{ value: 'item3', icon: 'play-circle', label: '网络配置', route: '/network-config' },
{ value: 'item4', icon: 'edit-1', label: '日志查看', route: '/log-view' },
{ value: 'item5', icon: 'info-circle', label: '关于我们', route: '/about-us' }
{ value: 'item1', icon: 'dashboard', label: '基础信息', route: '/dashboard/basic-info' },
{ value: 'item3', icon: 'play-circle', label: '网络配置', route: '/dashboard/network-config' },
{ value: 'item4', icon: 'play-circle', label: '其余配置', route: '/dashboard/other-config' },
{ value: 'item5', icon: 'edit-1', label: '日志查看', route: '/dashboard/log-view' },
{ value: 'item6', icon: 'info-circle', label: '关于我们', route: '/dashboard/about-us' }
]
};
}
}
</script>
</script>
<style scoped>
.content {
margin-left: 200px; /* 根据侧边栏宽度调整 */
padding: 20px;
}
</style>

20
napcat.webui/src/components/webui/Nav.vue
View File

@@ -1,10 +1,10 @@
<template>
<t-menu theme="light" default-value="2-1" :collapsed="collapsed">
<t-menu theme="light" default-value="2-1" :collapsed="collapsed" class="sidebar-menu">
<template #logo>
<span>WebUi</span>
</template>
<router-link v-for="item in menuItems" :key="item.value" :to="item.route">
<t-menu-item :value="item.value" :disabled="item.disabled">
<t-menu-item :value="item.value" :disabled="item.disabled" class="menu-item">
<template #icon>
<t-icon :name="item.icon" />
</template>
@@ -24,4 +24,18 @@ export default {
}
}
}
</script>
</script>
<style scoped>
.sidebar-menu {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 200px; /* 根据需要调整宽度 */
}
.menu-item {
margin-bottom: 10px; /* 根据需要调整间距 */
}
</style>