feat: QQLogin

napcat.webui/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "qrcode": "^1.5.4",
     "tdesign-vue-next": "^1.10.3",
     "vue": "^3.5.12"
   },

napcat.webui/src/App.vue

@@ -1,9 +1,25 @@
-<template>
+<!-- <template>
   <div id="app">
     <LoginForm />
   </div>
 </template>
 
 <script setup>
-import LoginForm from './components/WebUiLogin.vue';
+import LoginForm from './components/QQ.vue';
-</script>
+</script> -->
+<template>
+  <div id="app">
+    <QQLogin />
+  </div>
+</template>
+
+<script>
+import QQLogin from './components/QQLogin.vue';
+
+export default {
+  name: 'App',
+  components: {
+    QQLogin
+  }
+};
+</script>

napcat.webui/src/components/HelloWorld.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

napcat.webui/src/components/QQLogin.vue

@@ -0,0 +1,167 @@
+<template>
+    <div class="login-container">
+        <h2>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>
+        </div>
+        <div id="quick-login-dropdown" class="login-form" v-show="isQuickLoginVisible">
+            <t-select id="quick-login-select" v-model="selectedAccount" @change="selectAccount">
+                <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>
+        <p id="message">{{ message }}</p>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+import { Button as TButton, Select as TSelect, Option as TOption } from 'tdesign-vue-next';
+import QRCode from 'qrcode';
+import { MessagePlugin } from 'tdesign-vue-next';
+
+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 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,
+        };
+    },
+};
+</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;
+}
+
+.login-methods {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+
+.login-method {
+    padding: 10px 15px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.login-method.active {
+    background-color: #e6f0ff;
+    color: #007BFF;
+}
+
+.login-form,
+.qrcode {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.qrcode {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+    text-align: center;
+}
+
+button {
+    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;
+}
+</style>

napcat.webui/src/components/WebUiLogin.vue

@@ -3,7 +3,7 @@
         <h2>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.password" type="password" clearable placeholder="请输入Token">
+                <t-input v-model="formData.token" type="password" clearable placeholder="请输入Token">
                     <template #prefix-icon>
                         <lock-on-icon />
                     </template>
@@ -13,7 +13,6 @@
                 <t-button theme="primary" type="submit" block>登录</t-button>
             </t-form-item>
         </t-form>
-        <p class="error-message" v-if="errorMessage">{{ errorMessage }}</p>
     </div>
 </template>
 
@@ -22,22 +21,16 @@ import { reactive, ref } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { LockOnIcon } from 'tdesign-icons-vue-next';
 
-const formData = reactive({
-    password: '',
-});
 
-const errorMessage = ref('');
+const formData = reactive({
+    token: '',
+});
 
 const onSubmit = async ({ validateResult, firstError }) => {
     if (validateResult === true) {
-        errorMessage.value = '';
+        MessagePlugin.success('登录中...');
-        try {
-            // 处理表单提交逻辑
-        } catch (error) {
-            errorMessage.value = '登录失败，请重试';
-        }
     } else {
-        errorMessage.value = firstError;
+        MessagePlugin.error('登录失败');
     }
 };
 </script>

napcat.webui/src/main.ts

@@ -1,12 +1,22 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
-import { Button as TButton, Input as TInput, Form as TForm, FormItem as TFormItem } from 'tdesign-vue-next';
+import {
+    Button as TButton,
+    Input as TInput,
+    Form as TForm,
+    FormItem as TFormItem,
+    Select as TSelect,
+    Option as TOption
+
+} from 'tdesign-vue-next';
 
 const app = createApp(App);
 app.use(TButton);
 app.use(TInput);
 app.use(TForm);
 app.use(TFormItem);
+app.use(TSelect);
+app.use(TOption);
 
 app.mount('#app');