feat: 路由

napcat.webui/package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "qrcode": "^1.5.4",
     "tdesign-vue-next": "^1.10.3",
-    "vue": "^3.5.12"
+    "vue": "^3.5.12",
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.4",

napcat.webui/src/App.vue

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

napcat.webui/src/components/Dashboard.vue

@@ -0,0 +1,12 @@
+<template>
+    <div>
+        <h1>面板</h1>
+        <p>欢迎来到面板页面！</p>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'Dashboard'
+};
+</script>

napcat.webui/src/components/WebUiLogin.vue

@@ -20,7 +20,10 @@
 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 formData = reactive({
     token: '',
@@ -28,11 +31,13 @@ const formData = reactive({
 
 const onSubmit = async ({ validateResult, firstError }) => {
     if (validateResult === true) {
+        await router.push({ path: '/dashboard' });
         MessagePlugin.success('登录中...');
     } else {
         MessagePlugin.error('登录失败');
     }
 };
+
 </script>
 <style scoped>
 .login-container {

napcat.webui/src/main.ts

@@ -10,13 +10,14 @@ import {
     Option as TOption
 
 } from 'tdesign-vue-next';
+import { router } from './router';
 
 const app = createApp(App);
+app.use(router);
 app.use(TButton);
 app.use(TInput);
 app.use(TForm);
 app.use(TFormItem);
 app.use(TSelect);
 app.use(TOption);
-
 app.mount('#app');

napcat.webui/src/router/index.ts

@@ -0,0 +1,16 @@
+import { createWebHistory, createRouter } from 'vue-router'
+import Dashboard from '../components/Dashboard.vue';
+import QQLogin from '../components/QQLogin.vue';
+import WebUiLogin from '../components/WebUiLogin.vue';
+
+const routes = [
+  { path: '/', redirect: '/webui' },
+  { path: '/webui', component: WebUiLogin, name: 'WebUiLogin' },
+  { path: '/qqlogin', component: QQLogin , name: 'QQLogin'},
+  { path: '/dashboard', component: Dashboard, name: 'Dashboard' }
+]
+
+export const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})

napcat.webui/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}