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

napcat.webui/src/components/Dashboard.vue

@@ -1,18 +1,28 @@
 <template>
     <t-layout class="dashboard-container">
-        <div ref="menuRef">
-            <SidebarMenu :menu-items="menuItems" class="sidebar-menu" />
+        <div v-if="!mediaQuery.matches">
+            <SidebarMenu
+                :menu-items="menuItems"
+                class="sidebar-menu"
+                :menu-width="sidebarWidth"
+            />
         </div>
         <t-layout>
             <router-view />
         </t-layout>
+        <div v-if="mediaQuery.matches" class="bottom-menu">
+            <BottomMenu :menu-items="menuItems" />
+        </div>
     </t-layout>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import SidebarMenu from './webui/Nav.vue';
+import BottomMenu from './webui/NavBottom.vue';
 import emitter from '@/ts/event-bus';
+const mediaQuery = window.matchMedia('(max-width: 768px)');
+const sidebarWidth = ['232px', '64px'];
 interface MenuItem {
     value: string;
     icon: string;
@@ -27,13 +37,18 @@ const menuItems = ref<MenuItem[]>([
     { value: 'item5', icon: 'system-log', label: '日志查看', route: '/dashboard/log-view' },
     { value: 'item6', icon: 'info-circle', label: '关于我们', route: '/dashboard/about-us' },
 ]);
-const menuRef = ref<HTMLDivElement | null>(null);
 emitter.on('sendMenu', (event) => {
-    emitter.emit('sendWidth', menuRef.value?.offsetWidth);
-    localStorage.setItem('menuWidth', menuRef.value?.offsetWidth?.toString() || '0');
+    const menuWidth = event ? sidebarWidth[1] : sidebarWidth[0];
+    emitter.emit('sendWidth', menuWidth);
+    localStorage.setItem('menuWidth', menuWidth.toString() || '0');
 });
+
 onMounted(() => {
-    localStorage.setItem('menuWidth', menuRef.value?.offsetWidth?.toString() || '0');
+    if (mediaQuery.matches){
+        localStorage.setItem('menuWidth', '0');
+    }
+});
+onUnmounted(() => {
 });
 </script>
 
@@ -49,6 +64,12 @@ onMounted(() => {
     position: relative;
     z-index: 2;
 }
+.bottom-menu {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    z-index: 2;
+}
 
 @media (max-width: 768px) {
     .content {
@@ -56,3 +77,19 @@ onMounted(() => {
     }
 }
 </style>
+<style>
+@media (max-width: 768px) {
+    .t-head-menu__inner .t-menu:first-child {
+        margin-left: 0;
+    }
+    .t-head-menu__inner{
+        width: 100%;
+    }
+    .t-head-menu .t-menu{
+        justify-content: space-evenly;
+    }
+    .t-menu__content{
+        display: none;
+    }
+}
+</style>

napcat.webui/src/components/QQLogin.vue

@@ -1,5 +1,5 @@
 <template>
-    <t-card class="layout">
+    <t-card class="layout" :bordered="false">
         <div class="login-container">
             <h2 class="sotheby-font">QQ Login</h2>
             <div class="login-methods">

napcat.webui/src/components/WebUiLogin.vue

@@ -1,5 +1,5 @@
 <template>
-    <t-card class="layout">
+    <t-card class="layout" :bordered="false">
         <div class="login-container">
             <h2 class="sotheby-font">WebUi Login</h2>
             <t-form ref="form" :data="formData" colon :label-width="0" @submit="onSubmit">

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>