From 6708903c654c4afe1e1c6371de82fb98cab6b19b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=89=8B=E7=93=9C=E4=B8=80=E5=8D=81=E9=9B=AA?=
 <nanaeonn@outlook.com>
Date: Fri, 15 Nov 2024 11:32:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9F=BA=E7=A1=80=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=E6=8B=BC=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 napcat.webui/src/assets/Sotheby.ttf        | Bin 0 -> 11752 bytes
 napcat.webui/src/components/Dashboard.vue  |   1 +
 napcat.webui/src/components/QQLogin.vue    | 176 +++++++++------------
 napcat.webui/src/components/WebUiLogin.vue |  59 ++++++-
 napcat.webui/src/css/font.css              |   6 +
 napcat.webui/src/{ => css}/style.css       |  25 +--
 napcat.webui/src/main.ts                   |   1 -
 7 files changed, 140 insertions(+), 128 deletions(-)
 create mode 100644 napcat.webui/src/assets/Sotheby.ttf
 create mode 100644 napcat.webui/src/css/font.css
 rename napcat.webui/src/{ => css}/style.css (76%)

diff --git a/napcat.webui/src/assets/Sotheby.ttf b/napcat.webui/src/assets/Sotheby.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..bb9630f28ac0308fcb0a00005a7b9ac1dcb24f09
GIT binary patch
literal 11752
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
JW2xZle*rjc{$~IH

literal 0
HcmV?d00001

diff --git a/napcat.webui/src/components/Dashboard.vue b/napcat.webui/src/components/Dashboard.vue
index b79c484b..14edff81 100644
--- a/napcat.webui/src/components/Dashboard.vue
+++ b/napcat.webui/src/components/Dashboard.vue
@@ -6,6 +6,7 @@
 </template>
 
 <script>
+import '../css/style.css';
 export default {
   name: 'Dashboard'
 };
diff --git a/napcat.webui/src/components/QQLogin.vue b/napcat.webui/src/components/QQLogin.vue
index 1b6758fc..3286d5e3 100644
--- a/napcat.webui/src/components/QQLogin.vue
+++ b/napcat.webui/src/components/QQLogin.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="login-container">
-        <h2>Login</h2>
+        <h2 class="sotheby-font">QQ Login</h2>
         <div class="login-methods">
-            <t-button id="quick-login" class="login-method active" @click="showQuickLogin">Quick Login</t-button>
-            <t-button id="qrcode-login" class="login-method" @click="showQrCodeLogin">QR Code</t-button>
+            <t-button id="quick-login" class="login-method" :class="{ active: isQuickLoginVisible }" @click="showQuickLogin">Quick Login</t-button>
+            <t-button id="qrcode-login" class="login-method" :class="{ active: isQrCodeVisible }" @click="showQrCodeLogin">QR Code</t-button>
         </div>
         <div id="quick-login-dropdown" class="login-form" v-show="isQuickLoginVisible">
             <t-select id="quick-login-select" v-model="selectedAccount" @change="selectAccount">
@@ -15,98 +15,81 @@
         </div>
         <p id="message">{{ message }}</p>
     </div>
+    <div class="footer">
+        Power By NapCat.WebUi
+    </div>
 </template>
 
-<script>
+<script setup>
 import { ref, onMounted } from 'vue';
-import { Button as TButton, Select as TSelect, Option as TOption } from 'tdesign-vue-next';
+import { Button as TButton, Select as TSelect, Option as TOption, MessagePlugin } from 'tdesign-vue-next';
 import QRCode from 'qrcode';
-import { MessagePlugin } from 'tdesign-vue-next';
+import { useRouter, useRoute } from 'vue-router';
 
-export default {
-    components: {
-        TButton,
-        TSelect,
-        TOption,
-    },
-    setup() {
-        const isQuickLoginVisible = ref(true);
-        const isQrCodeVisible = ref(false);
-        const quickLoginList = ref([]);
-        const selectedAccount = ref('');
-        const message = ref('');
+const router = useRouter();
+const route = useRoute();
+const isQuickLoginVisible = ref(true);
+const isQrCodeVisible = ref(false);
+const quickLoginList = ref([]);
+const selectedAccount = ref('');
+const message = ref('');
 
-        const showQuickLogin = () => {
-            isQuickLoginVisible.value = true;
-            isQrCodeVisible.value = false;
-        };
-
-        const showQrCodeLogin = () => {
-            isQuickLoginVisible.value = false;
-            isQrCodeVisible.value = true;
-        };
-
-        const selectAccount = async (accountName) => {
-            //const { result, errMsg } = await SetQuickLogin(accountName, localStorage.getItem('auth'));
-            if (true) {
-                MessagePlugin.success("登录成功即将跳转");
-                
-            } else {
-                MessagePlugin.error("登录失败," + errMsg);
-            }
-        };
-
-        const generateQrCode = (data, canvas) => {
-            QRCode.toCanvas(canvas, data, function (error) {
-                if (error) console.log(error);
-                console.log('QR Code generated!');
-            });
-        };
-
-        const InitPages = async () => {
-            // let QuickLists = await GetQQQucickLoginList(localStorage.getItem('auth'));
-            quickLoginList.value = ['example1', 'example2', 'example3'];
-            // generateQrCode(await GetQQLoginQrcode(localStorage.getItem('auth')), document.querySelector('#qrcode-canvas'));
-            generateQrCode('test', document.querySelector('#qrcode-canvas'));
-            setInterval(HeartBeat, 3000);
-        };
-
-        onMounted(() => {
-            InitPages();
-        });
-
-        return {
-            isQuickLoginVisible,
-            isQrCodeVisible,
-            quickLoginList,
-            selectedAccount,
-            message,
-            showQuickLogin,
-            showQrCodeLogin,
-            selectAccount,
-        };
-    },
+const showQuickLogin = () => {
+    isQuickLoginVisible.value = true;
+    isQrCodeVisible.value = false;
 };
+
+const showQrCodeLogin = () => {
+    isQuickLoginVisible.value = false;
+    isQrCodeVisible.value = true;
+};
+
+const selectAccount = async (accountName) => {
+    //const { result, errMsg } = await SetQuickLogin(accountName, localStorage.getItem('auth'));
+    if (true) {
+        MessagePlugin.success("登录成功即将跳转");
+        await router.push({ path: '/dashboard' });
+    } else {
+        MessagePlugin.error("登录失败," + errMsg);
+    }
+};
+
+const generateQrCode = (data, canvas) => {
+    QRCode.toCanvas(canvas, data, function (error) {
+        if (error) console.log(error);
+        console.log('QR Code generated!');
+    });
+};
+
+const InitPages = async () => {
+    // let QuickLists = await GetQQQucickLoginList(localStorage.getItem('auth'));
+    quickLoginList.value = ['example1', 'example2', 'example3'];
+    // generateQrCode(await GetQQLoginQrcode(localStorage.getItem('auth')), document.querySelector('#qrcode-canvas'));
+    generateQrCode('test', document.querySelector('#qrcode-canvas'));
+    setInterval(HeartBeat, 3000);
+};
+
+onMounted(() => {
+    InitPages();
+});
 </script>
 
 <style scoped>
-body {
-    font-family: Arial, sans-serif;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    background-color: #f0f2f5;
-}
-
 .login-container {
     padding: 20px;
     border-radius: 5px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     background-color: white;
     max-width: 400px;
     min-width: 300px;
     position: relative;
+    margin: 0 auto;
+}
+
+@media (max-width: 600px) {
+    .login-container {
+        width: 90%;
+        min-width: unset;
+    }
 }
 
 .login-methods {
@@ -142,26 +125,23 @@ body {
     text-align: center;
 }
 
-button {
+.sotheby-font {
+    font-family: Sotheby, Helvetica, monospace;
+    font-size: 3.125rem;
+    line-height: 1.2;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+}
+
+.footer {
+    text-align: center;
+    margin: 0;
+    font-size: 0.875rem;
+    color: #888;
+    position: fixed;
+    bottom: 20px;
+    left: 0;
+    right: 0;
     width: 100%;
-    padding: 10px;
-    background-color: #007BFF;
-    color: white;
-    border: none;
-    cursor: pointer;
-    transition: all 0.3s;
-}
-
-button:hover {
-    background-color: #0056b3;
-}
-
-.hidden {
-    display: none;
-}
-
-#qrcode-canvas {
-    width: 200px;
-    height: 200px;
+    background-color: white;
 }
 </style>
\ No newline at end of file
diff --git a/napcat.webui/src/components/WebUiLogin.vue b/napcat.webui/src/components/WebUiLogin.vue
index 72771782..31ba2996 100644
--- a/napcat.webui/src/components/WebUiLogin.vue
+++ b/napcat.webui/src/components/WebUiLogin.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="login-container">
-        <h2>WebUi Login</h2>
+        <h2 class="sotheby-font">WebUi Login</h2>
         <t-form ref="form" :data="formData" :colon="true" :label-width="0" @submit="onSubmit">
             <t-form-item name="password">
                 <t-input v-model="formData.token" type="password" clearable placeholder="请输入Token">
@@ -14,16 +14,20 @@
             </t-form-item>
         </t-form>
     </div>
+    <div class="footer">
+        Power By NapCat.WebUi
+    </div>
 </template>
 
 <script setup>
+import '../css/font.css';
 import { reactive, ref } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { LockOnIcon } from 'tdesign-icons-vue-next';
 import { useRouter, useRoute } from 'vue-router';
 
-const router = useRouter()
-const route = useRoute()
+const router = useRouter();
+const route = useRoute();
 
 const formData = reactive({
     token: '',
@@ -31,8 +35,8 @@ const formData = reactive({
 
 const onSubmit = async ({ validateResult, firstError }) => {
     if (validateResult === true) {
-        await router.push({ path: '/dashboard' });
         MessagePlugin.success('登录中...');
+        await router.push({ path: '/qqlogin' });
     } else {
         MessagePlugin.error('登录失败');
     }
@@ -43,15 +47,60 @@ const onSubmit = async ({ validateResult, firstError }) => {
 .login-container {
     padding: 20px;
     border-radius: 5px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     background-color: white;
     max-width: 400px;
     min-width: 300px;
     position: relative;
+    margin: 0 auto;
+}
+
+@media (max-width: 600px) {
+    .login-container {
+        width: 90%;
+        min-width: unset;
+    }
 }
 
 .error-message {
     color: red;
     margin-top: 5px;
 }
+
+.tdesign-demo-block-column {
+    display: flex;
+    flex-direction: column;
+    row-gap: 16px;
+}
+
+.tdesign-demo-block-column-large {
+    display: flex;
+    flex-direction: column;
+    row-gap: 32px;
+}
+
+.tdesign-demo-block-row {
+    display: flex;
+    column-gap: 16px;
+    align-items: center;
+}
+
+.sotheby-font {
+    font-family: Sotheby, Helvetica, monospace;
+    font-size: 3.125rem;
+    line-height: 1.2;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+}
+
+.footer {
+    text-align: center;
+    margin: 0;
+    font-size: 0.875rem;
+    color: #888;
+    position: fixed;
+    bottom: 20px;
+    left: 0;
+    right: 0;
+    width: 100%;
+    background-color: white;
+}
 </style>
\ No newline at end of file
diff --git a/napcat.webui/src/css/font.css b/napcat.webui/src/css/font.css
new file mode 100644
index 00000000..e00fdda5
--- /dev/null
+++ b/napcat.webui/src/css/font.css
@@ -0,0 +1,6 @@
+@font-face {
+  font-family: 'Sotheby';
+  src: url('../assets/Sotheby.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
\ No newline at end of file
diff --git a/napcat.webui/src/style.css b/napcat.webui/src/css/style.css
similarity index 76%
rename from napcat.webui/src/style.css
rename to napcat.webui/src/css/style.css
index 1f25ad19..9997725c 100644
--- a/napcat.webui/src/style.css
+++ b/napcat.webui/src/css/style.css
@@ -81,27 +81,4 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
-}
-
-
-/* 竖排展示 demo 行间距 16px */
-.tdesign-demo-block-column {
-  display: flex;
-  flex-direction: column;
-  row-gap: 16px;
-}
-
-/* 竖排展示 demo 行间距 32px */
-.tdesign-demo-block-column-large {
-  display: flex;
-  flex-direction: column;
-  row-gap: 32px;
-}
-
-/* 横排排展示 demo 列间距 16px */
-.tdesign-demo-block-row {
-  display: flex;
-  column-gap: 16px;
-  align-items: center;
-}
-
+}
\ No newline at end of file
diff --git a/napcat.webui/src/main.ts b/napcat.webui/src/main.ts
index 0e260159..9c9c0679 100644
--- a/napcat.webui/src/main.ts
+++ b/napcat.webui/src/main.ts
@@ -1,5 +1,4 @@
 import { createApp } from 'vue'
-import './style.css'
 import App from './App.vue'
 import {
     Button as TButton,