NapNeko · Ander-pixe · Nov 24, 2024 · Nov 25, 2024 · Nov 25, 2024 · Nov 26, 2024
diff --git a/napcat.webui/index.html b/napcat.webui/index.html
@@ -1,13 +1,13 @@
 <!doctype html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="./logo_webui.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>NapCat WebUI</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="./src/main.ts"></script>
-  </body>
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="./src/main.ts"></script>
+</body>
 </html>
diff --git a/napcat.webui/package.json b/napcat.webui/package.json
@@ -14,7 +14,7 @@
     "qrcode": "^1.5.4",
     "tdesign-icons-vue-next": "^0.3.3",
     "tdesign-vue-next": "^1.10.3",
-    "vue": "^3.5.12",
+    "vue": "^3.5.13",
     "vue-router": "^4.4.5"
   },
   "devDependencies": {

diff --git a/napcat.webui/public/logo_webui.png b/napcat.webui/public/logo_webui.png
diff --git a/napcat.webui/src/App.vue b/napcat.webui/src/App.vue
@@ -1,7 +1,119 @@
 <template>
-    <div id="app">
+    <div id="app" theme-mode="dark">
         <router-view />
     </div>
+    <div v-if="show">
+        <t-sticky-tool
+            shape="round"
+            placement="right-bottom"
+            :offset="[-50, 10]"
+            @click="changeTheme"
+        >
+            <t-sticky-item label="浅色" popup="切换浅色模式" >
+                <template #icon><sunny-icon/></template>
+            </t-sticky-item>
+            <t-sticky-item label="深色" popup="切换深色模式" >
+                <template #icon><mode-dark-icon/></template>
+            </t-sticky-item>
+            <t-sticky-item label="自动" popup="跟随系统" >
+                <template #icon><control-platform-icon/></template>
+            </t-sticky-item>
+        </t-sticky-tool>
+    </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue';
+import { ControlPlatformIcon, ModeDarkIcon, SunnyIcon } from 'tdesign-icons-vue-next';
+const smallScreen = window.matchMedia('(max-width: 768px)');
+interface Item {
+    label: string;
+    popup: string;
+}
+
+interface Context {
+    item: Item;
+}
+enum ThemeMode {
+    Dark = 'dark',
+    Light = 'light',
+    Auto = 'auto',
+}
+const themeLabelMap: Record<string, ThemeMode> = {
+    '浅色': ThemeMode.Light,
+    '深色': ThemeMode.Dark,
+    '自动': ThemeMode.Auto,
+};
+const show = ref<boolean>(true)
+const createSetThemeAttributeFunction = () => {
+    let mediaQueryForAutoTheme: MediaQueryList | null = null;
+    return (mode: ThemeMode | null) => {
+        const element = document.documentElement;
+        if (mode === ThemeMode.Dark) {
+            element.setAttribute('theme-mode', ThemeMode.Dark);
+        } else if (mode === ThemeMode.Light) {
+            element.removeAttribute('theme-mode');
+        } else if (mode === ThemeMode.Auto) {
+            mediaQueryForAutoTheme = window.matchMedia('(prefers-color-scheme: dark)');
+            const handleMediaChange = (e: MediaQueryListEvent) => {
+                if (e.matches) {
+                    element.setAttribute('theme-mode', ThemeMode.Dark);
+                } else {
+                    element.removeAttribute('theme-mode');
+                }
+            };
+            mediaQueryForAutoTheme.addEventListener('change', handleMediaChange);
+            const event = new Event('change');
+            Object.defineProperty(event,'matches', {
+                value: mediaQueryForAutoTheme.matches,
+                writable: false
+            });
+            mediaQueryForAutoTheme.dispatchEvent(event);
+            onBeforeUnmount(() => {
+                if (mediaQueryForAutoTheme) {
+                    mediaQueryForAutoTheme.removeEventListener('change', handleMediaChange);
+                }
+            });
+        }
+    };
+};
+
+const setThemeAttribute = createSetThemeAttributeFunction();
+
+const getStoredTheme = (): ThemeMode | null => {
+    return localStorage.getItem('theme') as ThemeMode | null;
+};
+
+const initTheme = () => {
+    const storedTheme = getStoredTheme();
+    if (storedTheme === null) {
+        setThemeAttribute(ThemeMode.Auto);
+    } else {
+        setThemeAttribute(storedTheme);
+    }
+};
+
+const changeTheme = (context: Context) => {
+    const themeLabel = themeLabelMap[context.item.label] as ThemeMode;
+    console.log(themeLabel);
+    setThemeAttribute(themeLabel);
+    localStorage.setItem('theme', themeLabel);
+};
+const haddingFbars = () => {
+    show.value = !smallScreen.matches;
+    if (smallScreen.matches) {
+        localStorage.setItem('theme', 'auto');
+    }
+};
+onMounted(() => {
+    initTheme();
+    haddingFbars()
+    window.addEventListener('resize', haddingFbars);
+});
+onUnmounted(() => {
+    window.removeEventListener('resize', haddingFbars);
+});
+</script>
+<style  scoped>
+
+</style>
diff --git a/napcat.webui/src/assets/logo_webui.png b/napcat.webui/src/assets/logo_webui.png
diff --git a/napcat.webui/src/components/Dashboard.vue b/napcat.webui/src/components/Dashboard.vue
@@ -1,51 +1,57 @@
 <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;
     label: string;
     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' },
     { value: 'item4', icon: 'setting', label: '其余配置', route: '/dashboard/other-config' },
     { 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 {
     position: relative;
     z-index: 2;
 }
 
-.content {
-    flex: 1;
-    /* padding: 20px; */
-    overflow: auto;
-    position: relative;
-    z-index: 1;
-}
 
 @media (max-width: 768px) {
     .content {

diff --git a/napcat.webui/src/components/QQLogin.vue b/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>
diff --git a/napcat.webui/src/components/WebUiLogin.vue b/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>