feat: 页面登录逻辑添加

frontend/src/App.vue

@@ -15,9 +15,13 @@
         text-color="#fff"
         router
         active-text-color="#ffd04b">
-        <el-menu-item index="/">
+        <el-menu-item index="/code/list">
           <el-icon><Guide /></el-icon>
-          <span slot="title">爬虫开发</span>
+          <span slot="title">爬虫列表</span>
+        </el-menu-item>
+        <el-menu-item index="/audit/list">
+          <el-icon><Setting /></el-icon>
+          <span slot="title">审核列表</span> 
         </el-menu-item>
         <el-menu-item index="/setting">
           <el-icon><Setting /></el-icon>

frontend/src/router/index.js

@@ -2,6 +2,9 @@
 import { createRouter, createWebHashHistory } from 'vue-router';
 import store from '../store';
 
+
+import { ServerActionCheckLogin } from "../../wailsjs/go/main/App"
+
 import Home from "../views/Home.vue"
 import Run from "../views/Run.vue"
 import Setting from "../views/Setting.vue"
@@ -10,7 +13,19 @@ import Login from "../views/Login.vue"
 const routes = [
   {
     path: '/',
-    name: 'Home',
+    redirect: '/code/list'
+  },
+  {
+    path: '/code/list',
+    name: 'codeList',
+    component: Home,
+    meta: {
+      requiresAuth: true
+    }
+  },
+  {
+    path: '/audit/list',
+    name: 'auditList',
     component: Home,
     meta: {
       requiresAuth: true
@@ -45,8 +60,11 @@ const router = createRouter({
   routes
 });
 
-router.beforeEach((to, from, next) => {
-  if (to.meta.requiresAuth) {
+router.beforeEach(async (to, from, next) => {
+  if (!store.state.isAuthenticated) {
+    await store.dispatch('checkLogin')
+  }
+  if (to.meta.requiresAuth && !store.state.isAuthenticated) {
     next('/login')
   } else {
     next()

frontend/src/store/index.js

@@ -1,9 +1,8 @@
 // src/store/index.js
 import { createStore } from 'vuex';
 import { House, Setting, Help } from '@element-plus/icons-vue';
-// import { login } from '../api/modules/home'
-import { ServerActionUserLogin } from "../../wailsjs/go/main/App"
-import { GetLoginState, PutLoginState } from "../../wailsjs/go/main/App"
+import { ServerActionUserLogin, ServerActionCheckLogin } from '../../wailsjs/go/main/App'
+import ruleList from './modules/ruleList'
 
 const iconComponents = {
   house: House,
@@ -39,16 +38,34 @@ export default createStore({
     },
     actions: {
         async login({ commit }, credentials) {
-            // login(credentials)
-            const r = await ServerActionUserLogin({
+            const res = await ServerActionUserLogin({
                 username: credentials.username,
                 password: credentials.password
             })
-            console.log(r)
-
-            // console.log("登录信息：",credentials)
-            commit('SET_USER_INFO', credentials);
-            commit('SET_AUTHENTICATED', true);
+            if (res) {
+                const userInfo = res.data
+                if (userInfo && Object.keys(userInfo).length > 0) {
+                    // 登录成功
+                    commit('SET_USER_INFO', userInfo);
+                    commit('SET_AUTHENTICATED', true);
+                } else {
+                    console.log('login error')
+                }
+            }
+            return res
+        },
+        async checkLogin({ commit }) {
+            const res = await ServerActionCheckLogin()
+            if (res) {
+                const userInfo = res.data
+                if (userInfo && Object.keys(userInfo).length > 0) {
+                    // 登录成功
+                    commit('SET_USER_INFO', userInfo);
+                    commit('SET_AUTHENTICATED', true);
+                } else {
+                    console.log('login error')
+                }
+            }
         },
         logout({ commit }) {
             commit('SET_AUTHENTICATED', false);
@@ -57,5 +74,8 @@ export default createStore({
     getters: {
         // 定义一个 Getter 来获取当前登录用户的信息
         getCurrentUser: (state) => state.userInfo,
+    },
+    modules: {
+        ruleList
     }
 });

frontend/src/store/modules/ruleList.js

@@ -0,0 +1,38 @@
+import { ServerActionCodeList } from '../../../wailsjs/go/main/App'
+
+// 爬虫列表模块(局部模块)
+export default {
+  namespaced: true, // 开启命名空间
+  state () {
+    return {
+      listState: {
+        loaded: false,
+        loading: false,
+        pageNum: 1, // 页码
+        pageSize: 10, // 每页多少条
+        total: 0, // 返回的总数据条数
+        list: [], // 数据列表
+      }
+    }
+  },
+  mutations: {
+    // 定义mutations，用于同步修改状态
+    updateNickname (state, payload) {
+      state.profile.nickname = payload
+    }
+  },
+  actions: {
+    // 定义actions，用于异步修改状态
+    async getCodeList({ commit }, payload) {
+      const r = await ServerActionCodeList({
+          modifyuser: payload.modifyuser, // 维护人
+          state: payload.state, // 爬虫状态
+          search: payload.search, // 搜索内容
+          start: 0,
+          limit: 10
+      })
+      return r
+    }
+  },
+  getters: {}
+}

frontend/src/views/Home.vue

@@ -1,7 +1,5 @@
 <template>
-
-    <Navigator pageTitle="首页"></Navigator>
-
+    <Navigator pageTitle="爬虫列表"></Navigator>
     <div class="space"></div>
     <el-card>
         <el-header style="text-align: center;">
@@ -50,8 +48,6 @@
                 <el-table-column prop="channel" label="栏目" width="90" show-overflow-tooltip></el-table-column>
                 <el-table-column prop="url" label="栏目地址" width="90" show-overflow-tooltip></el-table-column>
                 <el-table-column prop="author" label="开发者" width="90" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="listItemCss" label="列表CSS选择器" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="titleCss" label="详情CSS选择器" show-overflow-tooltip></el-table-column>
                 <el-table-column align="right">
                     <template #header>
                         <el-input v-model="search" size="small" placeholder="按照代码过滤" />
@@ -75,22 +71,23 @@
     </el-card>
     <InsertSpider ref="insertSpiderDialog" :onSubmit="onInsertSpiderOk"></InsertSpider>
     <EditSpider ref="editSpiderDialog" @custom-event="dialogEvents.editSpiderConfigSaveEvent" />
-    <!-- <Login ref="loginDialog" @login-event="dialogEvents.loginEvent" /> -->
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { BrowserOpenURL, EventsOn } from "../../wailsjs/runtime"
 import { LoadSpiderConfigAll, SaveOrUpdateSpiderConfig } from "../../wailsjs/go/main/App"
-import { GetLoginState, PutLoginState } from "../../wailsjs/go/main/App"
+import { GetLoginState, PutLoginState, ServerActionCheckLogin } from "../../wailsjs/go/main/App"
 import { ImportSpiderConfigByExcelFile, SwitchSpiderConfig, DeleteSpiderConfig, SelectOpenFilePath } from "../../wailsjs/go/main/App"
 import Navigator from "../components/Navigator.vue"
 import InsertSpider from "../components/InsertSpider.vue"
 import EditSpider from "../components/EditSpider.vue"
 
 const router = useRouter();
+const store = useStore();
 const spiderTable = ref(null)
 
 const tableData = ref([
@@ -313,18 +310,24 @@ const handleSave = () => {
         duration: 3000,
     });
 }
+
+// const listState = computed(() => store.state.rulesList.listState)
+
+const getTableList = async () => {
+    console.log('getlist')
+    // const r = await store.dispatch('rulesList/getCodeList', {
+    //     modifyuser: 'lyf', // 维护人
+    //     state: -1, // 爬虫状态
+    //     search: '', // 搜索内容
+    // });
+    // console.log(r)
+}
+getTableList()
+
 //快捷键绑定
 onMounted(() => {
     window.addEventListener('keydown', handleShortcut);
-    GetLoginState().then(r => {
-        console.log("login state ", r)
-        if (loginDialog.value.dialogVisible) {
-            loginDialog.value.dialogVisible = !r
-        } else {
-            console.log("login dialog is not visible")
-        }
-    })
-
+    
 })
 //快捷键解绑
 onUnmounted(() => {

frontend/src/views/Login.vue

@@ -41,7 +41,11 @@ const form = ref({})
 const doLogin = async () => {
     //TODO 这里需要调用后台方法实现登录
     const r = await store.dispatch('login', {...form.value});
-    console.log(r)
-    // router.push({ name: 'Home' });
+    if (store.state.isAuthenticated) {
+        // 登录成功。跳转首页
+        router.replace({ name: 'codeList' })
+    } else {
+        // 登录失败，提示
+    }
 }
 </script>