feat: 新增登录页面和登录客户端方法调用2

frontend/src/components/Login.vue

@@ -1,35 +0,0 @@
-<template>
-    <el-dialog width="40%" title="用户登录" v-model="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
-        <el-form :model="formData" label-width="80px">
-            <el-form-item label="用户名">
-                <el-input v-model="formData.username" placeholder="usercode"></el-input>
-            </el-form-item>
-            <el-form-item label="密码">
-                <el-input type="password" v-model="formData.password"></el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" @click="submitForm">登录</el-button>
-            </el-form-item>
-        </el-form>
-    </el-dialog>
-</template>
-<script setup>
-import { ref, defineEmits, defineExpose } from 'vue';
-const dialogVisible = ref(false)
-const emit = defineEmits(['login-event']);
-
-//实现用户身份登录
-const submitForm=()=>{
-    //TODO
-    dialogVisible.value=false
-    emit('login-event',{...formData.value})
-}
-
-//
-const formData = ref({})
-//这里是重点
-defineExpose({
-    dialogVisible,
-    emit
-})
-</script>

frontend/src/main.js

@@ -1,10 +1,15 @@
 import { createApp } from 'vue'
+import store from './store'
+
+//element-plus 初始化
 import ElementPlus from 'element-plus'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
-
 import 'element-plus/dist/index.css'
 import './style.css';
+import 'element-plus/theme-chalk/index.css';
+
+//平台自身的设置
 import router from './router';
 import App from './App.vue'
 
@@ -17,5 +22,6 @@ app.use(ElementPlus, {
   locale: zhCn,
 })
 app.use(router);
+app.use(store);
 
 app.mount('#app')

frontend/src/router/index.js

@@ -1,33 +1,56 @@
 // router/index.js
 import { createRouter, createWebHashHistory } from 'vue-router';
+import store from '../store';
+
 import Home from "../views/Home.vue"
 import Run from "../views/Run.vue"
 import Setting from "../views/Setting.vue"
-
+import Login from "../views/Login.vue"
 
 const routes = [
   {
     path: '/',
     name: 'Home',
-    component: Home
+    component: Home,
+    meta: {
+      requiresAuth: true
+    }
   },
   {
     path: '/run',
     name: 'run',
-    component: Run
+    component: Run,
+    meta: {
+      requiresAuth: true
+    }
   },
   {
     path: '/setting',
     name: 'setting',
-    component: Setting
+    component: Setting,
+    meta: {
+      requiresAuth: true
+    }
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: Login
   },
   // 更多路由...
 ];
 
 const router = createRouter({
-  //history: createWebHistory(process.env.BASE_URL),
   history: createWebHashHistory(),
   routes
 });
 
+router.beforeEach((to, from, next) => {
+  if (to.meta.requiresAuth) {
+    next('/login')
+  } else {
+    next()
+  }
+})
+
 export default router;

frontend/src/store/index.js

@@ -3,6 +3,7 @@ import { createStore } from 'vuex';
 import { House, Setting, Help } from '@element-plus/icons-vue';
 // import { login } from '../api/modules/home'
 import { Login } from "../../wailsjs/go/main/App"
+import { GetLoginState, PutLoginState } from "../../wailsjs/go/main/App"
 
 const iconComponents = {
   house: House,

frontend/src/views/Home.vue

@@ -75,7 +75,7 @@
     </el-card>
     <InsertSpider ref="insertSpiderDialog" :onSubmit="onInsertSpiderOk"></InsertSpider>
     <EditSpider ref="editSpiderDialog" @custom-event="dialogEvents.editSpiderConfigSaveEvent" />
-    <Login ref="loginDialog" @login-event="dialogEvents.loginEvent" />
+    <!-- <Login ref="loginDialog" @login-event="dialogEvents.loginEvent" /> -->
 </template>
 
 <script setup>
@@ -89,9 +89,6 @@ import { ImportSpiderConfigByExcelFile, SwitchSpiderConfig, DeleteSpiderConfig,
 import Navigator from "../components/Navigator.vue"
 import InsertSpider from "../components/InsertSpider.vue"
 import EditSpider from "../components/EditSpider.vue"
-import Login from "../components/Login.vue"
-
-
 
 const router = useRouter();
 const spiderTable = ref(null)

frontend/src/views/Login.vue

@@ -31,6 +31,7 @@ import { ref } from 'vue';
 import Navigator from '../components/Navigator.vue'
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
+// import { GetLoginState, PutLoginState } from "../../wailsjs/go/main/App"
 
 const store = useStore();
 const router = useRouter();