实现bot代码执行的微服务 botrunningsystem, 主服务前后端做出对应修改

web/src/components/MatchGround.vue

@@ -2,15 +2,27 @@
 <template>
     <div class="matchground">
         <div class="row">
-            <!-- 左边 6 份,右边 6 份 -->
-            <div class="col-6">
+            <!-- 左边 4 份,右边 4 份,中间留 4 份用于选择出战方式 -->
+            <div class="col-4">
                 <!-- 用户自己的信息 -->
                 <div class="user-photo">
                     <img :src="$store.state.user.photo" alt="">
                 </div>
                 <div class="user-username">{{ $store.state.user.username }}</div>
             </div>
-            <div class="col-6">
+            <div class="col-4">
+                <div class="user-select-bot">
+                    <!-- v-model 绑定 selece_bot -->
+                    <select v-model="select_bot" class="form-select" aria-label="Default select example">
+                        <!-- 玩家亲自出战的 value 置为 -1, 如果不是亲自出战, 则是非负数 -->
+                        <option value="-1" selected>亲自出战</option>
+                        <option v-for="bot in bots" :key="bot.id" :value="bot.id">
+                            {{ bot.title }}
+                        </option>
+                    </select>
+                </div>
+            </div>
+            <div class="col-4">
                 <!-- 对手的信息 -->
                 <div class="opponent-photo">
                     <img :src="$store.state.pk.opponent_photo" alt="">
@@ -33,32 +45,60 @@ export default {
     setup: () => {
         const store = useStore();
         let match_btn_info = ref("开始匹配")
+        let bots = ref([]);
+        let select_bot = ref("-1");   // 选中的 bot 一开始是 -1 ,即一开始是亲自出战模式
 
         const click_match_btn = () => {
             if (match_btn_info.value === "开始匹配") {
                 match_btn_info.value = "取消";
+                console.log(select_bot.value);
                 // 向后端发请求,使用 JSON.stringify() 将一个 JSON 封装成一字符串
                 store.state.pk.socket.send(JSON.stringify({
                     // 传一个 event 域
-                    event:"start-matching",
+                    event: "start-matching",
+                    bot_id:select_bot.value,
                 }));
             } else {
                 match_btn_info.value = "开始匹配";
                 store.state.pk.socket.send(JSON.stringify({
-                    event:"stop-matching",
+                    event: "stop-matching",
                 }))
             }
         }
 
+        const refresh_bots = () => {
+            // 获取 bots 列表
+            store.dispatch("getList", {
+                success(resp) {
+                    console.log(resp);
+                    bots.value = resp;
+                },
+                error(resp) {
+                    console.log(resp);
+                }
+            })
+        }
+
+        refresh_bots(); // 从云端动态获取 bots
+
+
         return {
             match_btn_info,
             click_match_btn,
+            bots,
+            select_bot,
         }
     }
 };
 </script>
 
 <style scoped>
+div.user-select-bot {
+    padding-top: 20vh;
+    width: 60%;
+    margin: 0 auto;
+}
+
 .matchground {
     /* 60% 浏览器宽度, 70% 浏览器高度 */
     width: 60vw;

web/src/views/pk/PkIndexView.vue

@@ -36,6 +36,8 @@ export default {
         photo: "https://typoraflykhan.oss-cn-beijing.aliyuncs.com/202302251825860.png",
       })
 
+      store.commit("updateLoser", "none");
+
       // 新建 WebSocket
       socket = new WebSocket(socketUrl);
       store.commit("updateSocket", socket);