feat: 基础逻辑拼接

napcat.webui/src/components/Dashboard.vue

@@ -6,6 +6,7 @@
 </template>
 
 <script>
+import '../css/style.css';
 export default {
   name: 'Dashboard'
 };

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="quick-login" class="login-method" :class="{ active: isQuickLoginVisible }" @click="showQuickLogin">Quick Login</t-button>
-            <t-button id="qrcode-login" class="login-method" @click="showQrCodeLogin">QR Code</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 {
+const router = useRouter();
-    components: {
+const route = useRoute();
-        TButton,
+const isQuickLoginVisible = ref(true);
-        TSelect,
+const isQrCodeVisible = ref(false);
-        TOption,
+const quickLoginList = ref([]);
-    },
+const selectedAccount = ref('');
-    setup() {
+const message = ref('');
-        const isQuickLoginVisible = ref(true);
-        const isQrCodeVisible = ref(false);
-        const quickLoginList = ref([]);
-        const selectedAccount = ref('');
-        const message = ref('');
 
-        const showQuickLogin = () => {
+const showQuickLogin = () => {
-            isQuickLoginVisible.value = true;
+    isQuickLoginVisible.value = true;
-            isQrCodeVisible.value = false;
+    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 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: white;
-    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;
 }
 </style>

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 router = useRouter();
-const route = useRoute()
+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>

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;
+}

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;
-}
-

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,