测试了login、migong和test的接口

src/api/autoCounterPart.js

@@ -0,0 +1,23 @@
+import request from "@/utils/request.js";
+
+
+
+export const getCounterPartListInterface = () => {
+}
+
+export const addCounterPartInterface = (id) => {
+}
+
+export const getCounterPartTableInterface = () => {
+}
+
+export const editCounterPartInterface = (id) => {}
+
+export const deleteCounterPartInterface = (id) => {}
+
+export const resetCounterPartInterface = (id) => {}
+
+export const getCounterPartItemInterface = (id) => {}
+
+export const getAllUser = () => {}
+

src/api/byte.js

@@ -1,9 +1,9 @@
 import request from '@/utils/request.js'
 
-export const sendByteInterface = (context) => {
-    return request.get('/api/test', {
+export const sendByteInterface = (nick, pid, src) => {
+    return request.get('/test/send', {
         params: {
-            byte: context
+            nick, pid, src
         }
     })
 }

src/api/login.js

@@ -7,3 +7,17 @@ export const gameLoginInterface = (username, password) => {
         password: password,
     })
 }
+
+export const addRoleInterface = (username, password) => {
+    return request.get('/login/add', {
+        params: {
+            acc: username,
+            pwd: password,
+        }
+    })
+}
+
+export const getRolesInterface = () => {
+    return request.get('/login/roles')
+}
+

src/api/maze.js

@@ -0,0 +1,13 @@
+import request from "@/utils/request.js";
+
+export const getMazeTasksInterface = () => {
+    return request.get('/migong/missions')
+}
+
+export const addMazeTaskInterface = (nick) => {
+    return request.get('/migong/add', {
+        params: {
+            nick: nick
+        }
+    })
+}

src/router/index.js

@@ -14,6 +14,7 @@ const router = createRouter({
         {path: '/toolBox/common', component: () => import('@/views/toolBox/commonPage.vue')},
         {path: '/toolBox/test', component: () => import('@/views/toolBox/testPage.vue')},
         {path: '/autoCounterPart', component: () => import('@/views/autoCounterPart/autoCounterPartPage.vue')},
+        {path: '/maze', component: () => import('@/views/maze/mazePage.vue')},
       ]
     },
 

src/stores/modules/autoCounterPart.js

@@ -0,0 +1,97 @@
+import {defineStore} from "pinia";
+import {ref} from "vue";
+
+import {getCounterPartListInterface} from "@/api/autoCounterPart.js";
+
+
+export const useAutoCounterPart = defineStore("AutoCounterPart", () => {
+    const counterPartList = ref([
+        {
+            id: 1,
+            name: '啵咕'
+        },
+        {
+            id: 2,
+            name: '蚂蚁'
+        },
+        {
+            id: 3,
+            name: '小鸡'
+        },
+    ])
+    const counterPartTable = ref([
+        {
+            id: 1,
+            name: '啵咕',
+            count: 15
+        },
+        {
+            id: 2,
+            name: '蚂蚁',
+            count: 30
+        },
+        {
+            id: 3,
+            name: '小鸡',
+            count: 6
+        },
+    ])
+
+    const counterPartItem = ref([
+        {
+            id: 1,
+            fight: true
+        },
+        {
+            id: 2,
+            fight: false
+        },
+        {
+            id: 3,
+            fight: false
+        },
+        {
+            id: 4,
+            fight: true
+        }
+    ])
+
+    const users = ref([
+        {
+            id: 1,
+            name: '张三'
+        },
+        {
+            id: 2,
+            name: '李四'
+        },
+        {
+            id: 3,
+            name: '王二麻子'
+        },
+        {
+            id: 4,
+            name: '约翰'
+        },
+        {
+            id: 5,
+            name: '杰克'
+        },
+        {
+            id: 6,
+            name: '奥特曼'
+        },
+    ])
+
+
+    const getCounterPartList = async () => {
+        return
+        // const res = await getCounterPartList(counterPartList)
+        // counterPartList.value = res.data
+    }
+
+    return {
+        counterPartTable, counterPartList, counterPartItem, users,
+        getCounterPartList,
+    }
+})

src/stores/modules/maze.js

@@ -0,0 +1,17 @@
+import {defineStore} from "pinia";
+import {ref} from 'vue'
+import {getMazeTasksInterface} from "@/api/maze.js";
+
+export const useMazeStore = defineStore('mazeStore', () => {
+    const task = ref([])
+
+    const getMazeTasks = async () => {
+        const res = await getMazeTasksInterface()
+        task.value = res.data
+    }
+
+    return {
+        task,
+        getMazeTasks,
+    }
+})

src/stores/modules/roles.js

@@ -0,0 +1,19 @@
+import {defineStore} from "pinia";
+import {ref} from 'vue'
+import {getRolesInterface} from "@/api/login.js";
+
+export const useRolesStore = defineStore('rolesStore', () => {
+    const liveRoles = ref([])
+    const currentRole = ref('')
+
+    const getRoles = async () => {
+        const res = await getRolesInterface()
+        liveRoles.value = res.data
+    }
+
+    return {
+        liveRoles, currentRole,
+        getRoles
+    }
+})
+

src/utils/request.js

@@ -1,28 +1,35 @@
 import axios from "axios";
+import {ElMessage} from 'element-plus'
 
 const instance = axios.create({
-  baseURL: 'http://localhost:5000',
-  timeout: 10000,
-  // headers: {'X-Custom-Header': 'foobar'}
+    baseURL: 'http://localhost:8080',
+    timeout: 10000,
+    // headers: {'X-Custom-Header': 'foobar'}
 });
 
 // 添加请求拦截器
 instance.interceptors.request.use(function (config) {
     // 在发送请求之前做些什么
     return config;
-  }, function (error) {
+}, function (error) {
     // 对请求错误做些什么
+    console.log(error)
     return Promise.reject(error);
-  });
+});
 
 // 添加响应拦截器
 instance.interceptors.response.use(function (response) {
     // 对响应数据做点什么
+    // 方便调试用
+    ElMessage({
+        message: response.data,
+        type: 'success',
+    })
     return response;
-  }, function (error) {
+}, function (error) {
     // 对响应错误做点什么
     return Promise.reject(error);
-  });
+});
 
 
 export default instance

src/views/autoCounterPart/autoCounterPartPage.vue

@@ -1,23 +1,34 @@
 <script setup>
 
 import {ref} from "vue";
+import {useAutoCounterPart} from "@/stores/modules/autoCounterPart.js";
+import {
+  addCounterPartInterface,
+  resetCounterPartInterface,
+  deleteCounterPartInterface,
+  editCounterPartInterface
+} from "@/api/autoCounterPart.js";
 
-const testTableData = [
-  {
-    Name: '副本1',
-    Count: 15
-  },
-  {
-    Name: '副本2',
-    Count: 30
-  },
-  {
-    Name: '副本3',
-    Count: 6
-  },
-]
+const autoCounterPartStore = useAutoCounterPart();
+autoCounterPartStore.getCounterPartList()
 
-const visible = ref(true)
+const visible = ref(false)
+const selectedCounterPart = ref('')
+
+const resetAction = async (id) => {
+  const res = await resetCounterPartInterface.delete(id)
+}
+
+const deleteAction = async (id) => {
+  const res = await deleteCounterPartInterface.delete(id)
+}
+
+const editAction = async (id) => {
+  visible.value = true
+  const res = await editCounterPartInterface.edit(id)
+}
+
+const itemForm = ref()
 
 </script>
 
@@ -27,38 +38,43 @@ const visible = ref(true)
       <el-select
           placeholder="选择副本"
           style="width: 240px; margin-right: 20px;"
+          v-model="selectedCounterPart"
       >
-        <el-option v-for="item in 3" :key="item">副本{{ item }}</el-option>
-
+        <el-option
+            v-for="item in autoCounterPartStore.counterPartList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+        ></el-option>
       </el-select>
-      <el-button type="primary">添加</el-button>
-      <el-button type="warning">关闭拦截</el-button>
-      <el-button type="warning">拦截测试</el-button>
+      <el-button type="primary" @click="addCounterPartInterface(selectedCounterPart)">添加</el-button>
+      <el-button type="warning" disabled>关闭拦截</el-button>
+      <el-button type="warning" disabled>拦截测试</el-button>
 
     </el-header>
     <el-main>
       <el-table
           style="width: 600px"
-          :data="testTableData"
+          :data="autoCounterPartStore.counterPartTable"
       >
         <el-table-column label="副本名称">
           <template #default="scope">
             <el-icon>
               <Flag/>
             </el-icon>
-            <span>{{ scope.row.Name }}</span>
+            <span>{{ scope.row.name }}</span>
           </template>
         </el-table-column>
         <el-table-column label="完成次数">
           <template #default="scope">
-            <span>{{ scope.row.Count }}</span>
+            <span>{{ scope.row.count }}</span>
           </template>
         </el-table-column>
         <el-table-column label="操作" width="300px">
           <template #default="scope">
-            <el-button type="info">复位</el-button>
-            <el-button type="primary">编辑</el-button>
-            <el-button type="danger">删除</el-button>
+            <el-button type="info" @click="resetAction(scope.row.id)">复位</el-button>
+            <el-button type="primary" @click="editAction(scope.row.id)">编辑</el-button>
+            <el-button type="danger" @click="deleteAction(scope.row.id)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -67,12 +83,20 @@ const visible = ref(true)
         <template #header="{ close, titleId, titleClass }">
           <h4 :id="titleId" :class="titleClass">配置</h4>
           <el-button type="primary">保存</el-button>
-          <el-button type="warning">取消</el-button>
+          <el-button type="warning" @click="visible=false">取消</el-button>
           <el-button type="success">刷新用户</el-button>
         </template>
         <el-form>
-          <el-form-item v-for="item in 4" :key="item" :label="'用户'+ item">
-            <el-select :placeholder="'请选择用户' + item" style="width: 240px; margin-right: 20px;">
+          <el-form-item v-for="(item, index) in autoCounterPartStore.counterPartItem" :key="item.id"
+                        :label="'用户'+ (index+1)">
+            <el-select :placeholder="'请选择用户' + (index+1)" style="width: 240px; margin-right: 20px;">
+              <el-option
+                  v-for="item in autoCounterPartStore.users"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+
+              ></el-option>
             </el-select>
             <el-checkbox label="不出手"></el-checkbox>
           </el-form-item>

src/views/layout/gameLogin.vue

@@ -1,11 +1,14 @@
 <script setup>
 
 import {ref} from "vue";
-import {gameLoginInterface} from '@/api/login.js'
+import {addRoleInterface, getRolesInterface} from '@/api/login.js'
 import {useAccountStore} from "@/stores/index.js";
+import {useRolesStore} from "@/stores/modules/roles.js";
 import {Delete} from "@element-plus/icons-vue";
+import {ElMessage} from 'element-plus'
 
 const accountStore = useAccountStore();
+const rolesStore = useRolesStore()
 
 const form = ref({
   username: '',
@@ -22,13 +25,16 @@ const rules = {
 }
 
 const loginForm = ref(null)
-const gameLogin = async () => {
+const addRole = async () => {
   await loginForm.value.validate()
-  // const res = await gameLoginInterface(form.value.username, form.value.password)
-  // console.log(res.data)
+  const res = await addRoleInterface(form.value.username, form.value.password)
   accountStore.addAccount(form.value.username, form.value.password)
 }
 
+const getRoles = () => {
+  rolesStore.getRoles()
+}
+
 const fillAccount = (username, password) => {
   form.value.username = username
   form.value.password = password
@@ -54,8 +60,9 @@ const fillAccount = (username, password) => {
         ></el-input>
       </el-form-item>
       <el-form-item class="center-content">
-        <el-button type="warning" @click="gameLogin">开启本地监听</el-button>
-        <el-button type="primary" @click="gameLogin">确认</el-button>
+<!--        <el-button type="warning" @click="gameLogin" disabled>开启本地监听</el-button>-->
+        <el-button type="primary" @click="addRole">添加角色</el-button>
+        <el-button type="primary" @click="getRoles">获取角色(测试)</el-button>
       </el-form-item>
     </el-form>
     <el-divider/>

src/views/layoutPage.vue

@@ -1,5 +1,8 @@
 <script setup>
+import {useRolesStore} from "@/stores/modules/roles.js";
+import {Refresh} from "@element-plus/icons-vue";
 
+const rolesStore = useRolesStore()
 </script>
 
 <template>
@@ -49,6 +52,13 @@
           </el-menu-item>
         </el-sub-menu>
 
+        <el-menu-item index="/maze">
+          <el-icon>
+            <MagicStick/>
+          </el-icon>
+          <span>迷宫寻宝</span>
+        </el-menu-item>
+
         <el-menu-item index="/autoCounterPart">
           <el-icon>
             <Burger/>
@@ -90,11 +100,13 @@
       <el-header>
         <el-select
             style="width: 150px"
-            placeholder="选择客户端"
+            placeholder="选择角色"
+            v-model="rolesStore.currentRole"
         >
-          <el-option v-for="item in 3" :key="item" :label="'客户端'"></el-option>
+          <el-option v-for="(item, index) in rolesStore.liveRoles" :key="index" :label="item" :value="item"></el-option>
 
         </el-select>
+        <el-button @click="rolesStore.getRoles()" type="primary" :icon="Refresh" circle class="refresh"></el-button>
       </el-header>
       <el-main>
         <router-view></router-view>
@@ -130,6 +142,10 @@
     border-bottom: 1px solid #777;
     height: 50px;
     line-height: 50px;
+
+    .refresh {
+      margin-left: 10px;
+    }
   }
 
 

src/views/maze/mazePage.vue

@@ -0,0 +1,40 @@
+<script setup>
+import {getMazeTasksInterface, addMazeTaskInterface} from "@/api/maze.js";
+import {ElMessage} from 'element-plus'
+import {useRolesStore} from "@/stores/modules/roles.js";
+import {useMazeStore} from "@/stores/modules/maze.js";
+
+const rolesStore = useRolesStore()
+const mazeStore = useMazeStore()
+
+const getMazeTasks = async () => {
+  await mazeStore.getMazeTasks()
+}
+
+const addMazeTasks = async () => {
+  if (rolesStore.currentRole) {
+    await addMazeTaskInterface(rolesStore.currentRole)
+    await getMazeTasks()
+  } else {
+    ElMessage({
+      message: '请先选择一个角色',
+      type: 'warning',
+    })
+  }
+}
+
+</script>
+
+<template>
+  <el-button @click="addMazeTasks">添加任务</el-button>
+  <el-button @click="getMazeTasks">获取任务</el-button>
+  <el-table :data="mazeStore.task" style="width: 600px">
+    <el-table-column prop="Nick" label="角色" width="180"/>
+    <el-table-column prop="Count" label="剩余次数" width="180"/>
+    <el-table-column prop="IsDone" label="是否完成"/>
+  </el-table>
+</template>
+
+<style scoped>
+
+</style>

src/views/toolBox/bytePage.vue

@@ -1,21 +1,40 @@
 <script setup>
 import {ref} from "vue"
 import {sendByteInterface} from "@/api/byte.js";
+import {useRolesStore} from "@/stores/modules/roles.js";
+import {ElMessage} from "element-plus";
+
+const rolesStore = useRolesStore()
 
 const form = ref({
+  id: '',
   context: ''
 })
 
 const rules = {
+  id: [
+    {required: true, message: '封包id不能为空', trigger: 'blur'},
+  ],
   context: [
-    {required: true, message: '字节内容不能为空', trigger: 'blur'}
+    {required: true, message: '载荷数据不能为空', trigger: 'blur'},
   ]
 }
 const byteForm = ref(null)
 const sendByte = async () => {
   await byteForm.value.validate()
-  const res = await sendByteInterface(form.value.context)
-  console.log(res.data)
+  if (rolesStore.currentRole) {
+    const res = await sendByteInterface(
+        rolesStore.currentRole,
+        form.value.id,
+        form.value.context,
+    )
+  } else {
+    ElMessage({
+      message: '请先选择一个角色',
+      type: 'warning',
+    })
+  }
+
 }
 </script>
 
@@ -26,7 +45,12 @@ const sendByte = async () => {
         :rules="rules"
         ref="byteForm"
     >
-      <el-form-item label="发送内容" prop="context">
+      <el-form-item label="封包id" prop="id">
+        <el-input
+            v-model="form.id"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="载荷数据" prop="context">
         <el-input
             type="textarea"
             :rows="5"

vite.config.js

@@ -1,16 +1,16 @@
-import { fileURLToPath, URL } from 'node:url'
+import {fileURLToPath, URL} from 'node:url'
 
-import { defineConfig } from 'vite'
+import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    vue(),
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
+    plugins: [
+        vue(),
+    ],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('./src', import.meta.url))
+        }
+    },
 })