|
|
|
|
@ -1,64 +1,59 @@ |
|
|
|
|
<template> |
|
|
|
|
<ContentField> |
|
|
|
|
<div class="container"> |
|
|
|
|
<div class="row"> |
|
|
|
|
<div class="col-3"> |
|
|
|
|
<div class="card" style="margin-top: 30px"> |
|
|
|
|
<div class="card-body"> |
|
|
|
|
<img :src="$store.state.user.photo" alt=""> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="game-table"> |
|
|
|
|
<div> |
|
|
|
|
|
|
|
|
|
<div class="col-9"> |
|
|
|
|
<div class="card" style="margin-top: 30px"> |
|
|
|
|
<div class="card-header" > |
|
|
|
|
|
|
|
|
|
<div class="card-header" style="padding-bottom: 10px" > |
|
|
|
|
<span style="font-size: 20px; font-weight: bold ">我的bots</span> |
|
|
|
|
<button type="button" class="btn btn-primary float-end" btn-sm data-bs-toggle="modal" data-bs-target="#add_bot_btn">创建bot</button> |
|
|
|
|
<!-- Modal --> |
|
|
|
|
<div class="modal fade" id="add_bot_btn" tabindex="-1"> |
|
|
|
|
<div class="modal-dialog modal-lg"> |
|
|
|
|
<div class="modal-content"> |
|
|
|
|
<div class="modal-header"> |
|
|
|
|
<h5 class="modal-title" id="exampleModalLabel">创建新的bot</h5> |
|
|
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
|
|
|
|
<button type="button" style="float: right; font-size: 15px;" @click="handle_click_create(true)">创建bot</button> |
|
|
|
|
|
|
|
|
|
<div class="game-modal" id="add_bot_btn" tabindex="-1" v-if="show_dialog"> |
|
|
|
|
<div > |
|
|
|
|
<h5 class="modal-title" style="margin: 2px;font-weight: bold; color:red;" id="exampleModalLabel">创建新的bot</h5> |
|
|
|
|
</div> |
|
|
|
|
<div class="modal-body"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div > |
|
|
|
|
<form> |
|
|
|
|
<div class="mb-3"> |
|
|
|
|
<label for="add_bot_title" class="form-label">bot名称</label> |
|
|
|
|
<input type="text" v-model="new_bot.title" class="form-control" id="add_bot_title" placeholder="请输入新bot的名称"> |
|
|
|
|
<div class="center"> |
|
|
|
|
<label for="add_bot_title">bot名称: </label> |
|
|
|
|
<input type="text" v-model="new_bot.title" style="width: 70%;" class="form-control" id="add_bot_title" placeholder="请输入新bot的名称"> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="center"> |
|
|
|
|
<div> |
|
|
|
|
<label for="add_bot_description">bot简介: </label> |
|
|
|
|
</div> |
|
|
|
|
<div class="mb-3"> |
|
|
|
|
<label for="add_bot_description" class="form-label">bot简介</label> |
|
|
|
|
<textarea class="form-control" v-model="new_bot.description" id="add_bot_description" rows= "3" placeholder="请输入新bot的简介"></textarea> |
|
|
|
|
<div> |
|
|
|
|
<textarea class="form-control" style="margin-top: 2vh;width: 31.5vw;" v-model="new_bot.description" id="add_bot_description" placeholder="请输入新bot的简介"></textarea> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="mb-3"> |
|
|
|
|
<label for="add_bot_code" class="form-label">bot的代码</label> |
|
|
|
|
<div > |
|
|
|
|
<label for="add_bot_code" >bot的代码: </label> |
|
|
|
|
<VAceEditor |
|
|
|
|
v-model:value="new_bot.content" |
|
|
|
|
@init="editorInit" |
|
|
|
|
lang="c_cpp" |
|
|
|
|
theme="textmate" |
|
|
|
|
:options="{fontSize: 16}" |
|
|
|
|
style="height: 300px" /> |
|
|
|
|
:options="{fontSize: 10}" |
|
|
|
|
style="height: 20vh" /> |
|
|
|
|
</div> |
|
|
|
|
</form> |
|
|
|
|
</div> |
|
|
|
|
<div class="modal-footer"> |
|
|
|
|
|
|
|
|
|
<div > |
|
|
|
|
<div class="error_msg">{{ new_bot.error_msg }}</div> |
|
|
|
|
<button type="button" class="btn btn-success" @click="add_bot" btn-sm>创建</button> |
|
|
|
|
<button type="button" class="btn btn-danger" btn-sm @click="cancel_add">取消</button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<button type="button" @click="handle_click_create(false)" style="float:right">取消</button> |
|
|
|
|
<button type="button" @click="add_bot" style="float:right;margin-right: 5px">创建</button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="card-body"> |
|
|
|
|
<table class="table table-striped table-hover"> |
|
|
|
|
<!--表头--> |
|
|
|
|
<table> |
|
|
|
|
<thead> |
|
|
|
|
<tr> |
|
|
|
|
<th>名称</th> |
|
|
|
|
@ -66,50 +61,54 @@ |
|
|
|
|
<th>操作</th> |
|
|
|
|
</tr> |
|
|
|
|
</thead> |
|
|
|
|
<!--内容--> |
|
|
|
|
<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-success" btn-sm style="margin-right: 10px" data-bs-toggle="modal" :data-bs-target="'#update-bot-btn-'+bot.id" >修改</button> |
|
|
|
|
<button type="button" class="btn btn-danger" btn-sm @click="remove_bot(bot)">删除</button> |
|
|
|
|
|
|
|
|
|
<div class="modal fade" :id="'update-bot-btn-'+bot.id" tabindex="-1"> |
|
|
|
|
<div class="modal-dialog modal-lg"> |
|
|
|
|
<div class="modal-content"> |
|
|
|
|
<div class="modal-header"> |
|
|
|
|
<h5 class="modal-title">修改bot信息</h5> |
|
|
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
|
|
|
|
<button type="button" style="margin-right: 10px" @click="show_update_modal_handler(bot.id, true)">修改</button> |
|
|
|
|
<button type="button" @click="remove_bot(bot)">删除</button> |
|
|
|
|
|
|
|
|
|
<div class="game-modal" :id="'update-bot-btn-'+bot.id" tabindex="-1" v-if="bot.show_update_modal"> |
|
|
|
|
<div> |
|
|
|
|
<div> |
|
|
|
|
<h5 style="margin: 2px;font-weight: bold;color:red;">修改bot信息</h5> |
|
|
|
|
</div> |
|
|
|
|
<div class="modal-body"> |
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
|
<form> |
|
|
|
|
<div class="mb-3"> |
|
|
|
|
<label for="add_bot_title" class="form-label">bot名称</label> |
|
|
|
|
<input type="text" v-model="bot.title" class="form-control" id="add_bot_title" > |
|
|
|
|
<div class="center"> |
|
|
|
|
<label for="add_bot_title">bot名称: </label> |
|
|
|
|
<input type="text" style="width: 70%;" v-model="bot.title" class="form-control" id="add_bot_title" > |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="center"> |
|
|
|
|
<div> |
|
|
|
|
<label for="add_bot_description">bot简介: </label> |
|
|
|
|
</div> |
|
|
|
|
<div class="mb-3"> |
|
|
|
|
<label for="add_bot_description" class="form-label">bot简介</label> |
|
|
|
|
<textarea class="form-control" v-model="bot.description" id="add_bot_description" rows= "3" ></textarea> |
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
|
<textarea class="form-control" v-model="bot.description" id="add_bot_description" style="margin-top: 2vh;width: 28.5vw;"></textarea> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="mb-3"> |
|
|
|
|
<label for="add_bot_code" class="form-label">bot的代码</label> |
|
|
|
|
<div> |
|
|
|
|
<label for="add_bot_code">bot的代码: </label> |
|
|
|
|
<VAceEditor |
|
|
|
|
v-model:value="bot.content" |
|
|
|
|
@init="editorInit" |
|
|
|
|
lang="c_cpp" |
|
|
|
|
theme="textmate" |
|
|
|
|
:options="{fontSize: 16}" |
|
|
|
|
style="height: 300px" /> |
|
|
|
|
:options="{fontSize: 10}" |
|
|
|
|
style="height: 20vh" /> |
|
|
|
|
</div> |
|
|
|
|
</form> |
|
|
|
|
</div> |
|
|
|
|
<div class="modal-footer"> |
|
|
|
|
<div> |
|
|
|
|
<div class="error_msg">{{ bot.error_msg }}</div> |
|
|
|
|
<button type="button" class="btn btn-success" @click="update_bot(bot)" btn-sm>保存修改</button> |
|
|
|
|
<button type="button" class="btn btn-danger" btn-sm @click="cancel_update(bot)">取消</button> |
|
|
|
|
</div> |
|
|
|
|
<button type="button" @click="show_update_modal_handler(bot.id, false)" style="float:right;margin-left: 5px">取消</button> |
|
|
|
|
<button type="button" @click="update_bot(bot)" style="float:right;">保存修改</button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -120,8 +119,6 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</ContentField> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
@ -129,7 +126,6 @@ |
|
|
|
|
import { ref,reactive } from "vue" |
|
|
|
|
import $ from 'jquery' |
|
|
|
|
import { useStore } from "vuex" |
|
|
|
|
import {Modal} from "bootstrap/dist/js/bootstrap" |
|
|
|
|
import ContentField from "@/components/ContentField.vue" |
|
|
|
|
import { VAceEditor } from 'vue3-ace-editor'; |
|
|
|
|
import ace from 'ace-builds'; |
|
|
|
|
@ -145,6 +141,7 @@ export default { |
|
|
|
|
"https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/"); |
|
|
|
|
const store = useStore(); |
|
|
|
|
let bots = ref([]) // 定义bot列表 |
|
|
|
|
let show_dialog = ref(false); |
|
|
|
|
const new_bot = reactive({ |
|
|
|
|
title: "", |
|
|
|
|
description: "", |
|
|
|
|
@ -152,13 +149,11 @@ export default { |
|
|
|
|
error_msg: "", |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const cancel_update = (bot)=> { |
|
|
|
|
Modal.getInstance("#update-bot-btn-"+bot.id).hide(); |
|
|
|
|
const cancel_update = ()=> { |
|
|
|
|
refresh_bots(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const cancel_add = ()=> { |
|
|
|
|
Modal.getInstance("#add_bot_btn").hide(); |
|
|
|
|
refresh_bots(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -170,6 +165,10 @@ export default { |
|
|
|
|
"Authorization": "Bearer " + store.state.user.token, // 任何需要登录才能显示的都要加这个验证 |
|
|
|
|
}, |
|
|
|
|
success(resp){ |
|
|
|
|
for (const bot of resp) { |
|
|
|
|
bot.show_update_modal = false; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 将后端得到的数据传给bot |
|
|
|
|
bots.value = resp; |
|
|
|
|
} |
|
|
|
|
@ -196,7 +195,7 @@ export default { |
|
|
|
|
new_bot.title = "", |
|
|
|
|
new_bot.description="", |
|
|
|
|
new_bot.content="", |
|
|
|
|
Modal.getInstance("#add_bot_btn").hide(); |
|
|
|
|
handle_click_create(false); |
|
|
|
|
refresh_bots(); |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
@ -223,7 +222,6 @@ export default { |
|
|
|
|
}, |
|
|
|
|
success(resp) { |
|
|
|
|
if (resp.error_msg === "success") { // 更新bot成功 |
|
|
|
|
Modal.getInstance("#update-bot-btn-"+bot.id).hide(); |
|
|
|
|
refresh_bots(); |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
@ -252,6 +250,21 @@ export default { |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
const handle_click_create = is_show => { |
|
|
|
|
show_dialog.value = is_show; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const show_update_modal_handler = (bot_id, is_show) => { |
|
|
|
|
const new_bots = []; |
|
|
|
|
for (const bot of bots.value) { |
|
|
|
|
if (bot.id === bot_id) { |
|
|
|
|
bot.show_update_modal = is_show; |
|
|
|
|
} |
|
|
|
|
new_bots.push(bot); |
|
|
|
|
} |
|
|
|
|
bots.value = new_bots; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return { |
|
|
|
|
bots, |
|
|
|
|
@ -261,6 +274,9 @@ export default { |
|
|
|
|
update_bot, |
|
|
|
|
cancel_update, |
|
|
|
|
cancel_add, |
|
|
|
|
show_dialog, |
|
|
|
|
handle_click_create, |
|
|
|
|
show_update_modal_handler, |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -268,12 +284,60 @@ export default { |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
img{ |
|
|
|
|
width: 100% |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.error_msg{ |
|
|
|
|
font-size: 20px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
color: red; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
div.game-table { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
width: 100%; |
|
|
|
|
padding-top: 10vh; |
|
|
|
|
height: calc(100%-10vh); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
td { |
|
|
|
|
width: 12vw; |
|
|
|
|
height: 1vw; |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
max-width: 12vw; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
th { |
|
|
|
|
height: 1vw; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
div.game-table table{ |
|
|
|
|
background-color: rgba(255, 255, 255, 0.4); |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.game-modal { |
|
|
|
|
background-color: white; |
|
|
|
|
padding: 10px; |
|
|
|
|
border-radius: 5px; |
|
|
|
|
position: absolute; |
|
|
|
|
width: 40vw; |
|
|
|
|
height: 46vh; |
|
|
|
|
left: 0; |
|
|
|
|
right: 0; |
|
|
|
|
top: 0; |
|
|
|
|
bottom: 0; |
|
|
|
|
margin: auto; |
|
|
|
|
text-align: left; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.center { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
</style> |
