修改webui

napcat.webui/src/components/Dashboard.vue

@@ -1,16 +1,18 @@
 <template>
-    <div class="dashboard-container">
-        <SidebarMenu :menu-items="menuItems" class="sidebar-menu" />
-        <div class="content">
-            <router-view />
+    <t-layout class="dashboard-container">
+        <div ref="menuRef">
+            <SidebarMenu :menu-items="menuItems" class="sidebar-menu" />
         </div>
-    </div>
+        <t-layout>
+            <router-view />
+        </t-layout>
+    </t-layout>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import SidebarMenu from './webui/Nav.vue';
-
+import emitter from '@/ts/event-bus';
 interface MenuItem {
     value: string;
     icon: string;
@@ -18,6 +20,7 @@ interface MenuItem {
     route: string;
 }
 
+
 const menuItems = ref<MenuItem[]>([
     { value: 'item1', icon: 'dashboard', label: '基础信息', route: '/dashboard/basic-info' },
     { value: 'item3', icon: 'wifi-1', label: '网络配置', route: '/dashboard/network-config' },
@@ -25,13 +28,23 @@ 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<any>(null)
+emitter.on('sendMenu', (event) => {
+    emitter.emit('sendWidth',menuRef.value.offsetWidth);
+    localStorage.setItem('menuWidth', menuRef.value.offsetWidth);
+});
+onMounted(() => {
+    localStorage.setItem('menuWidth', menuRef.value.offsetWidth);
+});
 </script>
 
 <style scoped>
+
 .dashboard-container {
     display: flex;
     flex-direction: row;
     height: 100vh;
+    width: 100%;
 }
 
 .sidebar-menu {
@@ -39,13 +52,6 @@ const menuItems = ref<MenuItem[]>([
     z-index: 2;
 }
 
-.content {
-    flex: 1;
-    /* padding: 20px; */
-    overflow: auto;
-    position: relative;
-    z-index: 1;
-}
 
 @media (max-width: 768px) {
     .content {

napcat.webui/src/components/QQLogin.vue

@@ -1,36 +1,43 @@
 <template>
-    <div class="login-container">
-        <h2 class="sotheby-font">QQ Login</h2>
-        <div class="login-methods">
-            <t-button
-                id="quick-login"
-                class="login-method"
-                :class="{ active: loginMethod === 'quick' }"
-                @click="loginMethod = 'quick'"
-                >Quick Login</t-button
-            >
-            <t-button
-                id="qrcode-login"
-                class="login-method"
-                :class="{ active: loginMethod === 'qrcode' }"
-                @click="loginMethod = 'qrcode'"
-                >QR Code</t-button
-            >
+    <t-card class="layout">
+        <div class="login-container">
+            <h2 class="sotheby-font">QQ Login</h2>
+            <div class="login-methods">
+                <t-tooltip  content="快速登录" >
+                    <t-button
+                        id="quick-login"
+                        class="login-method"
+                        :class="{ active: loginMethod === 'quick' }"
+                        @click="loginMethod = 'quick'"
+                    >Quick Login</t-button
+                    >
+                </t-tooltip>
+                <t-tooltip content="二维码登录" >
+                    <t-button
+                        id="qrcode-login"
+                        class="login-method"
+                        :class="{ active: loginMethod === 'qrcode' }"
+                        @click="loginMethod = 'qrcode'"
+                    >QR Code</t-button
+                    >
+                </t-tooltip>
+            </div>
+            <div v-show="loginMethod === 'quick'" id="quick-login-dropdown" class="login-form">
+                <t-select
+                    id="quick-login-select"
+                    v-model="selectedAccount"
+                    placeholder="Select Account"
+                    @change="selectAccount"
+                >
+                    <t-option v-for="account in quickLoginList" :key="account" :value="account">{{ account }}</t-option>
+                </t-select>
+            </div>
+            <div v-show="loginMethod === 'qrcode'" id="qrcode" class="qrcode">
+                <canvas ref="qrcodeCanvas"></canvas>
+            </div>
         </div>
-        <div v-show="loginMethod === 'quick'" id="quick-login-dropdown" class="login-form">
-            <t-select
-                id="quick-login-select"
-                v-model="selectedAccount"
-                placeholder="Select Account"
-                @change="selectAccount"
-            >
-                <t-option v-for="account in quickLoginList" :key="account" :value="account">{{ account }}</t-option>
-            </t-select>
-        </div>
-        <div v-show="loginMethod === 'qrcode'" id="qrcode" class="qrcode">
-            <canvas ref="qrcodeCanvas"></canvas>
-        </div>
-    </div>
+        <t-footer class="footer">Power By NapCat.WebUi</t-footer>
+    </t-card>
 </template>
 
 <script setup lang="ts">
@@ -95,14 +102,16 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.layout{
+    height: 100vh;
+}
 .login-container {
     padding: 20px;
     border-radius: 5px;
-    background-color: white;
     max-width: 400px;
     min-width: 300px;
     position: relative;
-    margin: 0 auto;
+    margin: 50px auto;
 }
 
 @media (max-width: 600px) {
@@ -161,7 +170,5 @@ onMounted(() => {
     bottom: 20px;
     left: 0;
     right: 0;
-    width: 100%;
-    background-color: white;
 }
 </style>

napcat.webui/src/components/WebUiLogin.vue

@@ -1,20 +1,22 @@
 <template>
-    <div class="login-container">
-        <h2 class="sotheby-font">WebUi Login</h2>
-        <t-form ref="form" :data="formData" colon :label-width="0" @submit="onSubmit">
-            <t-form-item name="password">
-                <t-input v-model="formData.token" type="password" clearable placeholder="请输入Token">
-                    <template #prefix-icon>
-                        <lock-on-icon />
-                    </template>
-                </t-input>
-            </t-form-item>
-            <t-form-item>
-                <t-button theme="primary" type="submit" block>登录</t-button>
-            </t-form-item>
-        </t-form>
-    </div>
-    <div class="footer">Power By NapCat.WebUi</div>
+    <t-card  class="layout">
+        <div class="login-container">
+            <h2 class="sotheby-font">WebUi Login</h2>
+            <t-form ref="form" :data="formData" colon :label-width="0" @submit="onSubmit">
+                <t-form-item name="password">
+                    <t-input v-model="formData.token" type="password" clearable placeholder="请输入Token">
+                        <template #prefix-icon>
+                            <lock-on-icon />
+                        </template>
+                    </t-input>
+                </t-form-item>
+                <t-form-item>
+                    <t-button theme="primary" type="submit" block>登录</t-button>
+                </t-form-item>
+            </t-form>
+        </div>
+        <t-footer class="footer">Power By NapCat.WebUi</t-footer>
+    </t-card>
 </template>
 
 <script setup lang="ts">
@@ -94,14 +96,16 @@ const onSubmit = async ({ validateResult }: { validateResult: boolean }) => {
 </script>
 
 <style scoped>
+.layout{
+    height: 100vh;
+}
 .login-container {
     padding: 20px;
     border-radius: 5px;
-    background-color: white;
     max-width: 400px;
     min-width: 300px;
     position: relative;
-    margin: 0 auto;
+    margin: 50px auto;
 }
 
 @media (max-width: 600px) {
@@ -145,7 +149,5 @@ const onSubmit = async ({ validateResult }: { validateResult: boolean }) => {
     bottom: 20px;
     left: 0;
     right: 0;
-    width: 100%;
-    background-color: white;
 }
 </style>

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

@@ -1,16 +1,25 @@
 <template>
-    <t-menu theme="light" default-value="2-1" :collapsed="collapsed" class="sidebar-menu">
-        <template #logo> </template>
+    <t-menu  theme="light" default-value="2-1" :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" />
+                <div class="logo-textBox">
+                    <div class="logo-text">{{ collapsed? '' : 'NapCat' }}</div>
+                </div>
+            </div>
+        </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>
+            <t-tooltip :disabled="!collapsed" :content="item.label" placement="right">
+                <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>
         <template #operations>
-            <t-button class="t-demo-collapse-btn" variant="text" shape="square" @click="changeCollapsed">
+            <t-button :disabled="disBtn" class="t-demo-collapse-btn" variant="text" shape="square" @click="changeCollapsed">
                 <template #icon><t-icon :name="iconName" /></template>
             </t-button>
         </template>
@@ -18,7 +27,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps } from 'vue';
+import { ref, defineProps, onMounted, watch } from 'vue';
+import emitter from '@/ts/event-bus';
 
 type MenuItem = {
     value: string;
@@ -31,15 +41,39 @@ type MenuItem = {
 defineProps<{
     menuItems: MenuItem[];
 }>();
-
 const collapsed = ref<boolean>(localStorage.getItem('sidebar-collapsed') === 'true');
 const iconName = ref<string>(collapsed.value ? 'menu-unfold' : 'menu-fold');
+const disBtn = ref<boolean>(false);
 
 const changeCollapsed = (): void => {
     collapsed.value = !collapsed.value;
     iconName.value = collapsed.value ? 'menu-unfold' : 'menu-fold';
     localStorage.setItem('sidebar-collapsed', collapsed.value.toString());
 };
+watch(collapsed, (newValue, oldValue) => {
+    setTimeout(()=>{
+        emitter.emit('sendMenu', collapsed.value);
+    },300)
+});
+onMounted(() => {
+    const mediaQuery = window.matchMedia('(max-width: 800px)');
+    const handleMediaChange = (e: MediaQueryListEvent) => {
+        disBtn.value = e.matches;
+        if (e.matches) {
+            collapsed.value = e.matches;
+        }
+    };
+    mediaQuery.addEventListener('change', handleMediaChange);
+    const event = new Event('change');
+    Object.defineProperty(event,'matches', {
+        value: mediaQuery.matches,
+        writable: false
+    });
+    mediaQuery.dispatchEvent(event);
+    return () => {
+        mediaQuery.removeEventListener('change', handleMediaChange);
+    };
+});
 </script>
 
 <style scoped>
@@ -57,12 +91,28 @@ const changeCollapsed = (): void => {
         width: 100px; /* 移动端侧边栏宽度 */
     }
 }
-
+.logo{
+    display: flex;
+    width: auto;
+    height: 100%;
+}
+.logo-img{
+    object-fit: contain;
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+.logo-textBox{
+    display: flex;
+    align-items: center;
+    margin-left: 10px;
+}
 .logo-text {
     display: block;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    font-size: 22px;
+    font-family: Sotheby, Helvetica, monospace;
 }
 
 .menu-item {