feat: 翻新除了配置文件的所有代码了

napcat.webui/src/components/QQLogin.vue

@@ -2,52 +2,41 @@
     <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: isQuickLoginVisible }" @click="showQuickLogin">Quick Login</t-button>
-            <t-button id="qrcode-login" class="login-method" :class="{ active: isQrCodeVisible }" @click="showQrCodeLogin">QR Code</t-button>
+            <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>
         </div>
-        <div id="quick-login-dropdown" class="login-form" v-show="isQuickLoginVisible">
-            <t-select id="quick-login-select" v-model="selectedAccount" @change="selectAccount">
+        <div id="quick-login-dropdown" class="login-form" v-show="loginMethod === 'quick'">
+            <t-select id="quick-login-select" v-model="selectedAccount" @change="selectAccount"
+                placeholder="Select Account">
                 <t-option v-for="account in quickLoginList" :key="account" :value="account">{{ account }}</t-option>
             </t-select>
         </div>
-        <div id="qrcode" class="qrcode" v-show="isQrCodeVisible">
-            <canvas id="qrcode-canvas"></canvas>
+        <div id="qrcode" class="qrcode" v-show="loginMethod === 'qrcode'">
+            <canvas ref="qrcodeCanvas"></canvas>
         </div>
-        <p id="message">{{ message }}</p>
-    </div>
-    <div class="footer">
-        Power By NapCat.WebUi
     </div>
 </template>
 
 <script setup>
-import '../css/style.css';
 import { ref, onMounted } from 'vue';
-import { Button as TButton, Select as TSelect, Option as TOption, MessagePlugin } from 'tdesign-vue-next';
 import QRCode from 'qrcode';
-import { useRouter, useRoute } from 'vue-router';
+import { useRouter } from 'vue-router';
+import { MessagePlugin } from 'tdesign-vue-next';
+import { QQLoginManager } from '../backend/shell.ts';
 
 const router = useRouter();
-const route = useRoute();
-const isQuickLoginVisible = ref(true);
-const isQrCodeVisible = ref(false);
+const loginMethod = ref('quick');
 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 qrcodeCanvas = ref(null);
+const qqLoginManager = new QQLoginManager(localStorage.getItem('auth'));
+let heartBeatTimer = null;
 
 const selectAccount = async (accountName) => {
-    //const { result, errMsg } = await SetQuickLogin(accountName, localStorage.getItem('auth'));
-    if (true) {
+    const { result, errMsg } = await qqLoginManager.setQuickLogin(accountName);
+    if (result) {
         MessagePlugin.success("登录成功即将跳转");
         await router.push({ path: '/dashboard/basic-info' });
     } else {
@@ -62,12 +51,18 @@ const generateQrCode = (data, canvas) => {
     });
 };
 
+const HeartBeat = async () => {
+    let isLogined = await qqLoginManager.checkQQLoginStatus();
+    if (isLogined) {
+        clearInterval(heartBeatTimer);
+        await router.push({ path: '/dashboard/basic-info' });
+    }
+};
+
 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);
+    quickLoginList.value = await qqLoginManager.getQQQuickLoginList();
+    generateQrCode(await qqLoginManager.getQQLoginQrcode(), qrcodeCanvas.value);
+    heartBeatTimer = setInterval(HeartBeat, 3000);
 };
 
 onMounted(() => {

napcat.webui/src/components/WebUiLogin.vue

@@ -22,28 +22,66 @@
 <script setup>
 import '../css/style.css';
 import '../css/font.css';
-import { reactive, ref } from 'vue';
+import { reactive, ref, onMounted } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { LockOnIcon } from 'tdesign-icons-vue-next';
-import { useRouter, useRoute } from 'vue-router';
+import { useRouter } from 'vue-router';
+import { QQLoginManager } from '../backend/shell';
 
 const router = useRouter();
-const route = useRoute();
 
 const formData = reactive({
     token: '',
 });
 
-const onSubmit = async ({ validateResult, firstError }) => {
-    if (validateResult === true) {
-        MessagePlugin.success('登录中...');
-        await router.push({ path: '/qqlogin' });
+const handleLoginSuccess = async (credential) => {
+    localStorage.setItem('auth', credential);
+    const loginManager = new QQLoginManager(credential);
+    const isQQLoggedIn = await loginManager.checkQQLoginStatus();
+    if (isQQLoggedIn) {
+        await router.push({ path: '/config' });
     } else {
-        MessagePlugin.error('登录失败');
+        await router.push({ path: '/qqlogin' });
+    }
+    MessagePlugin.success('登录成功');
+};
+
+const handleLoginFailure = (message) => {
+    MessagePlugin.error(message);
+};
+
+const checkLoginStatus = async () => {
+    const storedCredential = localStorage.getItem('auth');
+    if (storedCredential) {
+        const loginManager = new QQLoginManager(storedCredential);
+        const isQQLoggedIn = await loginManager.checkQQLoginStatus();
+        if (isQQLoggedIn) {
+            await router.push({ path: '/dashboard/basic-info' });
+        } else {
+            await router.push({ path: '/qqlogin' });
+        }
     }
 };
 
+onMounted(() => {
+    checkLoginStatus();
+});
+
+const onSubmit = async ({ validateResult }) => {
+    if (validateResult === true) {
+        const loginManager = new QQLoginManager('');
+        const credential = await loginManager.loginWithToken(formData.token);
+        if (credential) {
+            await handleLoginSuccess(credential);
+        } else {
+            handleLoginFailure('登录失败，请检查Token');
+        }
+    } else {
+        handleLoginFailure('请填写Token');
+    }
+};
 </script>
+
 <style scoped>
 .login-container {
     padding: 20px;
@@ -62,11 +100,6 @@ const onSubmit = async ({ validateResult, firstError }) => {
     }
 }
 
-.error-message {
-    color: red;
-    margin-top: 5px;
-}
-
 .tdesign-demo-block-column {
     display: flex;
     flex-direction: column;