feat:实时日志、关于and部分样式优化

napcat.webui/src/components/webui/Nav.vue

@@ -1,5 +1,5 @@
 <template>
-    <t-menu theme="light" default-value="2-1" :collapsed="collapsed" class="sidebar-menu">
+    <t-menu theme="light" :width="menuWidth" :collapsed="collapsed" class="sidebar-menu">
         <template #logo>
             <div class="logo">
                 <img class="logo-img" :width="collapsed ? 35 : 'auto'" src="@/assets/logo_webui.png" alt="logo" />
@@ -43,10 +43,11 @@ type MenuItem = {
     icon?: string;
     disabled?: boolean;
 };
-
 defineProps<{
     menuItems: MenuItem[];
+    menuWidth: string | number | Array<string | number>;
 }>();
+const mediaQuery = window.matchMedia('(max-width: 800px)');
 const collapsed = ref<boolean>(localStorage.getItem('sidebar-collapsed') === 'true');
 const iconName = ref<string>(collapsed.value ? 'menu-unfold' : 'menu-fold');
 const disBtn = ref<boolean>(false);
@@ -57,12 +58,10 @@ const changeCollapsed = (): void => {
     localStorage.setItem('sidebar-collapsed', collapsed.value.toString());
 };
 watch(collapsed, (newValue, oldValue) => {
-    setTimeout(() => {
-        emitter.emit('sendMenu', collapsed.value);
-    }, 300);
+    emitter.emit('sendMenu', collapsed.value);
 });
 onMounted(() => {
-    const mediaQuery = window.matchMedia('(max-width: 800px)');
+    emitter.emit('sendMenu', collapsed.value);
     const handleMediaChange = (e: MediaQueryListEvent) => {
         disBtn.value = e.matches;
         if (e.matches) {

napcat.webui/src/components/webui/NavBottom.vue

@@ -0,0 +1,37 @@
+<template>
+    <t-head-menu theme="light"  class="bottom-menu">
+        <router-link v-for="item in menuItems" :key="item.value" :to="item.route">
+            <t-tooltip :content="item.label" placement="top">
+                <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>
+            </t-tooltip>
+        </router-link>
+    </t-head-menu>
+</template>
+<script setup lang="ts">
+import { defineProps } from 'vue';
+
+type MenuItem = {
+    value: string;
+    label: string;
+    route: string;
+    icon?: string;
+    disabled?: boolean;
+};
+
+defineProps<{
+    menuItems: MenuItem[];
+}>();
+</script>
+<style scoped>
+.bottom-menu {
+    display: flex;
+    justify-content: center;
+    border-top: 0.8px solid #ddd;
+}
+</style>