创建我的 Bot 页面 + 添加 VAceEditor 编辑器

web/package-lock.json

@@ -14,6 +14,7 @@
         "jquery": "^3.6.3",
         "vue": "^3.2.13",
         "vue-router": "^4.0.3",
+        "vue3-ace-editor": "^2.2.2",
         "vuex": "^4.0.0"
       },
       "devDependencies": {
@@ -3227,6 +3228,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/ace-builds": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmmirror.com/ace-builds/-/ace-builds-1.15.2.tgz",
+      "integrity": "sha512-ANXWnANcB4XgC9tyCtG8EXjeDdDY6iJuPQs+pDiZF/2chQMU7LTOBgw9xJdeRzRyNX5+KGZKwgB80XyY2n5QvA=="
+    },
     "node_modules/acorn": {
       "version": "8.8.1",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.8.1.tgz",
@@ -9010,6 +9016,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz",
@@ -10368,6 +10379,16 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vue3-ace-editor": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmmirror.com/vue3-ace-editor/-/vue3-ace-editor-2.2.2.tgz",
+      "integrity": "sha512-fZ6OWosbU+odLrtrcGC/536QjCigujYJB0Hf6/tBp+ef/ohTadwQAqyBlVzOmvrmzZyubphpV9zkaZcx5Fuivw==",
+      "dependencies": {
+        "ace-builds": "^1.4.13",
+        "resize-observer-polyfill": "^1.5.1",
+        "vue": "^3.2.26"
+      }
+    },
     "node_modules/vuex": {
       "version": "4.1.0",
       "resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.1.0.tgz",

web/package.json

@@ -14,6 +14,7 @@
     "jquery": "^3.6.3",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",
+    "vue3-ace-editor": "^2.2.2",
     "vuex": "^4.0.0"
   },
   "devDependencies": {

web/src/views/user/bot/UserBotIndexView.vue

@@ -1,96 +1,259 @@
 <template>
-  <ContentBase>我的Bot
+  <div class="container">
-    <div class="row">添加 Bot 测试：{{ error_message }}</div>
+    <div class="row">
-    <div class="row">删除 Bot 测试：{{ remove_message }}</div>
+      <div class="col-3">
-    <div class="row">更新 Bot 测试：{{ update_message }}</div>
+        <div class="card" style="margin-top:20px">
-    <div class="row">获取 Bot 列表测试：{{ getlist_message }}</div>
+          <div class="card-body">
-  </ContentBase>
+            <img :src="$store.state.user.photo" alt="" style="width:100% ">
+          </div>
+        </div>
+      </div>
+      <div class="col-9">
+        <div class="card" style="margin-top:20px">
+          <!-- 卡片标题 -->
+          <div class="card-header">
+            <span style="font-size:120%; font-weight:bold">我的Bot</span>
+            <!-- data-bs-toggle="modal" data-bs-target="#exampleModal" 用于将按钮绑定到 Modal 框 -->
+            <button type="button" class="btn btn-primary btn-sm float-end" data-bs-toggle="modal"
+              data-bs-target="#add-bot-button">创建Bot</button>
+            <!-- Modal -->
+            <!-- data-bs-backdrop="static" data-bs-keyboard="false" 用于使 modal 框静止 -->
+            <div class="modal fade" id="add-bot-button" data-bs-backdrop="static" data-bs-keyboard="false">
+              <!-- modal-xl 用于使用大的 modal 框 -->
+              <div class="modal-dialog modal-xl">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <h1 class="modal-title fs-5" id="create-bot">创建Bot</h1>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                  </div>
+                  <div class="modal-body">
+                    <!-- 相关信息编辑部分 -->
+                    <div class="mb-3">
+                      <label for="add-bot-title" class="form-label">名称</label>
+                      <input v-model="botadd.title" type="text" class="form-control" id="add-bot-title"
+                        placeholder="请输入bot名称">
+                    </div>
+                    <div class="mb-3">
+                      <label for="add-bot-description" class="form-label">简介</label>
+                      <textarea v-model="botadd.description" class="form-control" id="add-bot-description" rows="2"
+                        placeholder="请输入bot简介"></textarea>
+                    </div>
+                    <div class="mb-3">
+                      <label for="add-bot-code" class="form-label">代码</label>
+                      <!-- <textarea v-model="botadd.content" class="form-control" id="add-bot-code" rows="7"
+                        placeholder="请编写bot代码"></textarea> -->
+
+                      <VAceEditor v-model:value="botadd.content" @init="editorInit" lang="c_cpp" theme="textmate"
+                        style="height: 300px" />
+                    </div>
+                  </div>
+                  <div class="modal-footer">
+                    <!-- 写报错信息 -->
+                    <div class="error-message" style="color:red">{{ botadd.error_message }}</div>
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
+                    <button type="button" class="btn btn-primary" @click="add_bot_func">保存</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="card-body">
+            <!-- 插入表格 -->
+            <table class="table table-striped">
+              <!-- 创建表头: th 表示列 -->
+              <thead>
+                <th>名称</th>
+                <th>创建时间</th>
+                <th>操作</th>
+              </thead>
+              <!-- 创建表身: tr 表示行 -->
+              <tbody>
+                <tr v-for="bot in bots" :key="bot.id">
+                  <td>{{ bot.title }}</td>
+                  <td>{{ bot.createtime }}</td>
+                  <td>
+                    <button type="button" class="btn btn-warning btn-sm" style="margin-right:30px" data-bs-toggle="modal"
+                      :data-bs-target="'#modify-bot-button-' + bot.id">修改</button>
+                    <!-- remove_bot_func() 需要加上 (bot) 表示有参数 -->
+                    <button type="button" class="btn btn-danger btn-sm" @click="remove_bot_func(bot)">删除</button>
+
+                    <!-- Modal -->
+                    <!-- data-bs-backdrop="static" data-bs-keyboard="false" 用于使 modal 框静止 -->
+                    <div class="modal fade" :id="'modify-bot-button-' + bot.id" data-bs-backdrop="static"
+                      data-bs-keyboard="false">
+                      <!-- modal-xl 用于使用大的 modal 框 -->
+                      <div class="modal-dialog modal-xl">
+                        <div class="modal-content">
+                          <div class="modal-header">
+                            <h1 class="modal-title fs-5" id="create-bot">修改Bot</h1>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                          </div>
+                          <div class="modal-body">
+                            <!-- 相关信息编辑部分 -->
+                            <div class="mb-3">
+                              <label for="add-bot-title" class="form-label">名称</label>
+                              <input v-model="bot.title" type="text" class="form-control" id="add-bot-title">
+                            </div>
+                            <div class="mb-3">
+                              <label for="add-bot-description" class="form-label">简介</label>
+                              <textarea v-model="bot.description" class="form-control" id="add-bot-description"
+                                rows="2"></textarea>
+                            </div>
+                            <div class="mb-3">
+                              <label for="add-bot-code" class="form-label">代码</label>
+                              <!-- <textarea v-model="bot.content" class="form-control" id="add-bot-code" rows="7"></textarea> -->
+
+                              <VAceEditor v-model:value="bot.content" @init="editorInit" lang="c_cpp" theme="textmate"
+                                style="height: 300px" />
+                            </div>
+                          </div>
+                          <div class="modal-footer">
+                            <!-- 写报错信息 -->
+                            <div class="error-message" style="color:red">{{ bot.error_message }}</div>
+                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消修改</button>
+                            <button type="button" class="btn btn-primary" @click="update_bot_func(bot)">保存修改</button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import ContentBase from "../../../components/ContentBase.vue";
+import { ref } from 'vue';
-// import $ from "jquery";
+// reactive 用于绑定对象
-import { useStore } from "vuex";
+import { reactive } from 'vue';
-import { ref } from "vue";
+// import $ from 'jquery';
+import { useStore } from 'vuex';
+// 用于关闭 Modal 框
+import { Modal } from 'bootstrap/dist/js/bootstrap';
+// 用于集成 vue3-ace-editor 编辑器
+import { VAceEditor } from 'vue3-ace-editor';
+import ace from 'ace-builds';
 
 export default {
   components: {
-    ContentBase,
+    VAceEditor,
   },
   setup: () => {
+    // ace-editor 配置
+    ace.config.set(
+      "basePath",
+      "https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/")
+
     const store = useStore();
-    let error_message = ref('');
+    let bots = ref([]);
-    let remove_message = ref('');
-    let update_message = ref('');
-    let getlist_message = ref('');
 
-    /*     store.dispatch("add", {
+    // 创建 botadd 对象
-          title: "Bot 的标题",
+    const botadd = reactive({
-          description: "Bot 的描述",
+      title: "",
-          content: "标题的代码",
+      description: "",
-          success(resp) {
+      content: "",
-            console.log(resp);
+      error_message: "",
-            error_message.value = resp.error_message;
-          },
-          error(resp) {
-            console.log(resp);
-            error_message.value = resp.error_message;
-          }
-        })
-    
-        store.dispatch("remove", {
-          bot_id: 18,
-          success(resp) {
-            if (resp.error_message === "success") {
-              console.log(resp);
-              remove_message.value = resp.error_message;
-            } else {
-              console.log("botremove" + resp.error_message);
-              remove_message.value = resp.error_message;
-            }
-          },
-          error(resp) {
-            console.log("botremove" + resp);
-            remove_message.value = resp.error_message;
-          }
-        }) */
-
-    store.dispatch("update", {
-      bot_id: 24,
-      title: "Bot 的标题新24",
-      description: "Bot 的描述24",
-      content: "标题的代码24",
-      success(resp) {
-        if (resp.error_message === "success") {
-          console.log("更新成功" + resp.error_message);
-          update_message.value = resp.error_message;
-        } else {
-          console.log("更新失败" + resp.error_message);
-          update_message.value = resp.error_message;
-        }
-      }
     })
 
-    /*     store.dispatch("getList", {
+    // bot 添加方法
-          success(resp) {
+    const add_bot_func = () => {
-            console.log(resp);
+      botadd.error_message = "";
-            getlist_message.value = resp;
+      // 添加 bot
-          },
+      store.dispatch("add", {
-          error(resp) {
+        title: botadd.title,
-            console.log(resp);
+        description: botadd.description,
-            getlist_message.value = resp;
+        content: botadd.content,
+        success(resp) {
+          if (resp.error_message === "success") {
+            // 如果成功,则刷新一下列表
+            refresh_bots();
+            // 成功之后,需要将 botadd 之前填入的信息清空
+            botadd.title = "";
+            botadd.description = "";
+            botadd.content = "";
+            // 成功之后,关闭 Modal 框
+            Modal.getInstance("#add-bot-button").hide();
+            botadd.error_message = resp.error_message;
+          } else {
+            botadd.error_message = resp.error_message;
           }
-        }) */
+        },
+        error(resp) {
+          botadd.error_message = resp.error_message;
+        }
+      })
+    }
+
+    const remove_bot_func = (bot) => {
+      // 删除 bot
+      store.dispatch("remove", {
+        bot_id: bot.id,
+        success() {
+          // 删除成功,则刷新列表
+          refresh_bots();
+        }
+      })
+    }
+
+    const update_bot_func = (bot) => {
+      // 更新 bot
+      store.dispatch("update", {
+        bot_id: bot.id,
+        title: bot.title,
+        description: bot.description,
+        content: bot.content,
+        success(resp) {
+          if (resp.error_message === "success") {
+            // 如果成功,则刷新一下列表
+            refresh_bots();
+            // 成功之后,需要将 botadd 之前填入的信息清空
+            bot.title = "";
+            bot.description = "";
+            bot.content = "";
+            bot.error_message = resp.error_message;
+            // 成功之后,关闭 Modal 框
+            Modal.getInstance('#modify-bot-button-' + bot.id).hide();
+
+          } else {
+            bot.error_message = resp.error_message;
+          }
+        },
+        error(resp) {
+          bot.error_message = resp.error_message;
+        }
+      })
+    }
+
+    const refresh_bots = () => {
+      // 获取 Bots 列表
+      store.dispatch("getList", {
+        success(resp) {
+          console.log(resp);
+          bots.value = resp;
+        },
+        error(resp) {
+          console.log(resp);
+        },
+      })
+    };
+
+    refresh_bots();
 
     return {
-      error_message,
+      bots,
-      remove_message,
+      botadd,
-      update_message,
+      add_bot_func,
-      getlist_message,
+      remove_bot_func,
+      update_bot_func,
     }
+
   }
-
-
 };
 </script>