GuanM/NapCatQQ
1
0
Fork 0
mirror of https://github.com/NapNeko/NapCatQQ.git synced 2025-07-19 12:03:37 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: webui

Browse Source
This commit is contained in:
pk5ls20
2024-11-15 23:39:19 +08:00
parent 1ec1040e43
commit fe0bda11d3
33 changed files with 647 additions and 499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,77 +1,71 @@
<template>
<t-menu theme="light" default-value="2-1" :collapsed="collapsed" class="sidebar-menu">
<template #logo>
</template>
<router-link v-for="item in menuItems" :key="item.value" :to="item.route">
<t-menu-item :value="item.value" :disabled="item.disabled" class="menu-item">
<template #icon>
<t-icon :name="item.icon" />
<t-menu theme="light" default-value="2-1" :collapsed="collapsed" class="sidebar-menu">
<template #logo> </template>
<router-link v-for="item in menuItems" :key="item.value" :to="item.route">
<t-menu-item :value="item.value" :disabled="item.disabled" class="menu-item">
<template #icon>
<t-icon :name="item.icon" />
</template>
{{ item.label }}
</t-menu-item>
</router-link>
<template #operations>
<t-button class="t-demo-collapse-btn" variant="text" shape="square" @click="changeCollapsed">
<template #icon><t-icon :name="iconName" /></template>
</t-button>
</template>
{{ item.label }}
</t-menu-item>
</router-link>
<template #operations>
<t-button class="t-demo-collapse-btn" variant="text" shape="square" @click="changeCollapsed">
<template #icon><t-icon :name="iconName" /></template>
</t-button>
</template>
</t-menu>
</t-menu>
</template>
<script>
import { defineComponent, ref, onMounted } from 'vue';
<script setup lang="ts">
import { ref, defineProps } from 'vue';
export default defineComponent({
name: 'SidebarMenu',
props: {
menuItems: {
type: Array,
required: true
}
},
setup() {
const collapsed = ref(localStorage.getItem('sidebar-collapsed') === 'true');
const iconName = ref(collapsed.value ? 'menu-unfold' : 'menu-fold');
type MenuItem = {
value: string;
label: string;
route: string;
icon?: string;
disabled?: boolean;
};
const changeCollapsed = () => {
collapsed.value = !collapsed.value;
iconName.value = collapsed.value ? 'menu-unfold' : 'menu-fold';
localStorage.setItem('sidebar-collapsed', collapsed.value);
};
defineProps<{
menuItems: MenuItem[];
}>();
return {
collapsed,
iconName,
changeCollapsed
};
}
});
const collapsed = ref<boolean>(localStorage.getItem('sidebar-collapsed') === 'true');
const iconName = ref<string>(collapsed.value ? 'menu-unfold' : 'menu-fold');
const changeCollapsed = (): void => {
collapsed.value = !collapsed.value;
iconName.value = collapsed.value ? 'menu-unfold' : 'menu-fold';
localStorage.setItem('sidebar-collapsed', collapsed.value.toString());
};
</script>
<style scoped>
.sidebar-menu {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 200px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 200px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.sidebar-menu {
width: 100px; /* 移动端侧边栏宽度 */
}
.sidebar-menu {
width: 100px; /* 移动端侧边栏宽度 */
}
}
.logo-text {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.menu-item {
margin-bottom: 10px;
margin-bottom: 10px;
}
</style>
</style>