创建我的 Bot 页面 + 添加 VAceEditor 编辑器
This commit is contained in:
parent
7524007b9c
commit
31dbe94707
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -1,96 +1,259 @@
|
|||
<template>
|
||||
<ContentBase>我的Bot
|
||||
<div class="row">添加 Bot 测试：{{ error_message }}</div>
|
||||
<div class="row">删除 Bot 测试：{{ remove_message }}</div>
|
||||
<div class="row">更新 Bot 测试：{{ update_message }}</div>
|
||||
<div class="row">获取 Bot 列表测试：{{ getlist_message }}</div>
|
||||
</ContentBase>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<div class="card" style="margin-top:20px">
|
||||
<div class="card-body">
|
||||
<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 $ from "jquery";
|
||||
import { useStore } from "vuex";
|
||||
import { ref } from "vue";
|
||||
import { ref } from 'vue';
|
||||
// reactive 用于绑定对象
|
||||
import { reactive } 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 remove_message = ref('');
|
||||
let update_message = ref('');
|
||||
let getlist_message = ref('');
|
||||
let bots = ref([]);
|
||||
|
||||
/* store.dispatch("add", {
|
||||
title: "Bot 的标题",
|
||||
description: "Bot 的描述",
|
||||
content: "标题的代码",
|
||||
success(resp) {
|
||||
console.log(resp);
|
||||
error_message.value = resp.error_message;
|
||||
},
|
||||
error(resp) {
|
||||
console.log(resp);
|
||||
error_message.value = resp.error_message;
|
||||
}
|
||||
// 创建 botadd 对象
|
||||
const botadd = reactive({
|
||||
title: "",
|
||||
description: "",
|
||||
content: "",
|
||||
error_message: "",
|
||||
})
|
||||
|
||||
// bot 添加方法
|
||||
const add_bot_func = () => {
|
||||
botadd.error_message = "";
|
||||
// 添加 bot
|
||||
store.dispatch("add", {
|
||||
title: botadd.title,
|
||||
description: botadd.description,
|
||||
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: 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;
|
||||
}
|
||||
bot_id: bot.id,
|
||||
success() {
|
||||
// 删除成功,则刷新列表
|
||||
refresh_bots();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/* store.dispatch("getList", {
|
||||
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);
|
||||
getlist_message.value = resp;
|
||||
bots.value = resp;
|
||||
},
|
||||
error(resp) {
|
||||
console.log(resp);
|
||||
getlist_message.value = resp;
|
||||
}
|
||||
}) */
|
||||
},
|
||||
})
|
||||
};
|
||||
|
||||
refresh_bots();
|
||||
|
||||
return {
|
||||
error_message,
|
||||
remove_message,
|
||||
update_message,
|
||||
getlist_message,
|
||||
}
|
||||
bots,
|
||||
botadd,
|
||||
add_bot_func,
|
||||
remove_bot_func,
|
||||
update_bot_func,
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue