parent
e03a71776a
commit
e362c88737
9 changed files with 451 additions and 261 deletions
@ -1,276 +1,426 @@ |
|||||||
<template> |
<template> |
||||||
<div class="container"> |
<div class="container"> |
||||||
<div class="row"> |
<div class="row"> |
||||||
<div class="col-3"> |
<div class="col-3"> |
||||||
<div class="card" style="margin-top: 30px"> |
<div class="card" style="margin-top: 30px"> |
||||||
<div class="card-body"> |
<div class="card-body"> |
||||||
<img :src="$store.state.user.photo" alt=""> |
<img :src="$store.state.user.photo" alt="" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="col-9"> |
||||||
|
<div class="card" style="margin-top: 30px"> |
||||||
|
<div class="card-header"> |
||||||
|
<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> |
||||||
|
</div> |
||||||
|
<div class="modal-body"> |
||||||
|
<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> |
||||||
|
<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> |
||||||
|
|
||||||
|
<div class="mb-3"> |
||||||
|
<label for="add_bot_code" class="form-label" |
||||||
|
>bot的代码</label |
||||||
|
> |
||||||
|
<VAceEditor |
||||||
|
v-model:value="new_bot.content" |
||||||
|
@init="editorInit" |
||||||
|
lang="c_cpp" |
||||||
|
theme="textmate" |
||||||
|
:options="{ fontSize: 16 }" |
||||||
|
style="height: 200px" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
<div class="modal-footer"> |
||||||
|
<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> |
</div> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
|
|
||||||
|
<div class="card-body"> |
||||||
|
<table class="table table-striped table-hover"> |
||||||
|
<!--表头--> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th>名称</th> |
||||||
|
<th>创建时间</th> |
||||||
|
<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 |
||||||
|
data-bs-toggle="modal" |
||||||
|
:data-bs-target="'#remove-bot-btn-' + bot.id" |
||||||
|
> |
||||||
|
删除 |
||||||
|
</button> |
||||||
|
|
||||||
<div class="col-9"> |
<div |
||||||
<div class="card" style="margin-top: 30px"> |
class="modal fade" |
||||||
<div class="card-header" > |
:id="'remove-bot-btn-' + bot.id" |
||||||
<span style="font-size: 20px; font-weight: bold ">我的bots</span> |
tabindex="-1" |
||||||
<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-dialog"> |
||||||
<div class="modal fade" id="add_bot_btn" tabindex="-1"> |
|
||||||
<div class="modal-dialog modal-lg"> |
|
||||||
<div class="modal-content"> |
<div class="modal-content"> |
||||||
<div class="modal-header"> |
<div class="modal-header"> |
||||||
<h5 class="modal-title" id="exampleModalLabel">创建新的bot</h5> |
<h5 class="modal-title">删除提示框</h5> |
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
<button |
||||||
|
type="button" |
||||||
|
class="btn-close" |
||||||
|
data-bs-dismiss="modal" |
||||||
|
aria-label="Close" |
||||||
|
></button> |
||||||
|
</div> |
||||||
|
<div class="modal-body"> |
||||||
|
<p>是否确定要删除该bot</p> |
||||||
|
</div> |
||||||
|
<div class="modal-footer"> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
class="btn btn-info" |
||||||
|
data-bs-dismiss="modal" |
||||||
|
> |
||||||
|
我再想想 |
||||||
|
</button> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
class="btn btn-danger" |
||||||
|
@click="remove_bot(bot)" |
||||||
|
> |
||||||
|
确认删除 |
||||||
|
</button> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
<div class="modal-body"> |
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<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> |
||||||
|
</div> |
||||||
|
<div class="modal-body"> |
||||||
<form> |
<form> |
||||||
<div class="mb-3"> |
<div class="mb-3"> |
||||||
<label for="add_bot_title" class="form-label">bot名称</label> |
<label for="add_bot_title" class="form-label" |
||||||
<input type="text" v-model="new_bot.title" class="form-control" id="add_bot_title" placeholder="请输入新bot的名称"> |
>bot名称</label |
||||||
</div> |
> |
||||||
<div class="mb-3"> |
<input |
||||||
<label for="add_bot_description" class="form-label">bot简介</label> |
type="text" |
||||||
<textarea class="form-control" v-model="new_bot.description" id="add_bot_description" rows= "3" placeholder="请输入新bot的简介"></textarea> |
v-model="bot.title" |
||||||
</div> |
class="form-control" |
||||||
|
id="add_bot_title" |
||||||
|
/> |
||||||
|
</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> |
||||||
|
|
||||||
<div class="mb-3"> |
<div class="mb-3"> |
||||||
<label for="add_bot_code" class="form-label">bot的代码</label> |
<label for="add_bot_code" class="form-label" |
||||||
|
>bot的代码</label |
||||||
|
> |
||||||
<VAceEditor |
<VAceEditor |
||||||
v-model:value="new_bot.content" |
v-model:value="bot.content" |
||||||
@init="editorInit" |
@init="editorInit" |
||||||
lang="c_cpp" |
lang="c_cpp" |
||||||
theme="textmate" |
theme="textmate" |
||||||
:options="{fontSize: 16}" |
:options="{ fontSize: 16 }" |
||||||
style="height: 300px" /> |
style="height: 200px" |
||||||
</div> |
/> |
||||||
|
</div> |
||||||
</form> |
</form> |
||||||
</div> |
</div> |
||||||
<div class="modal-footer"> |
<div class="modal-footer"> |
||||||
<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> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="card-body"> |
|
||||||
<table class="table table-striped table-hover"> |
|
||||||
<!--表头--> |
|
||||||
<thead> |
|
||||||
<tr> |
|
||||||
<th>名称</th> |
|
||||||
<th>创建时间</th> |
|
||||||
<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> |
|
||||||
</div> |
|
||||||
<div class="modal-body"> |
|
||||||
<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> |
|
||||||
<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> |
|
||||||
|
|
||||||
<div class="mb-3"> |
|
||||||
<label for="add_bot_code" class="form-label">bot的代码</label> |
|
||||||
<VAceEditor |
|
||||||
v-model:value="bot.content" |
|
||||||
@init="editorInit" |
|
||||||
lang="c_cpp" |
|
||||||
theme="textmate" |
|
||||||
:options="{fontSize: 16}" |
|
||||||
style="height: 300px" /> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
</div> |
|
||||||
<div class="modal-footer"> |
|
||||||
<div class="error_msg">{{ bot.error_msg }}</div> |
<div class="error_msg">{{ bot.error_msg }}</div> |
||||||
<button type="button" class="btn btn-success" @click="update_bot(bot)" btn-sm>保存修改</button> |
<button |
||||||
<button type="button" class="btn btn-danger" btn-sm @click="cancel_update(bot)">取消</button> |
type="button" |
||||||
</div> |
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> |
||||||
</div> |
</div> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</td> |
||||||
</td> |
</tr> |
||||||
</tr> |
</tbody> |
||||||
</tbody> |
</table> |
||||||
</table> |
</div> |
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
</div> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import { ref,reactive } from "vue" |
import { ref, reactive } from "vue"; |
||||||
import $ from 'jquery' |
import $ from "jquery"; |
||||||
import { useStore } from "vuex" |
import { useStore } from "vuex"; |
||||||
import {Modal} from "bootstrap/dist/js/bootstrap" |
import { Modal } from "bootstrap/dist/js/bootstrap"; |
||||||
|
|
||||||
import { VAceEditor } from 'vue3-ace-editor'; |
import { VAceEditor } from "vue3-ace-editor"; |
||||||
import ace from 'ace-builds'; |
import ace from "ace-builds"; |
||||||
|
|
||||||
export default { |
export default { |
||||||
components:{ |
components: { |
||||||
VAceEditor, |
VAceEditor, |
||||||
}, |
}, |
||||||
setup() { |
setup() { |
||||||
ace.config.set( |
ace.config.set( |
||||||
"basePath", |
"basePath", |
||||||
"https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/"); |
"https://cdn.jsdelivr.net/npm/ace-builds@" + |
||||||
const store = useStore(); |
require("ace-builds").version + |
||||||
let bots = ref([]) // 定义bot列表 |
"/src-noconflict/" |
||||||
const new_bot = reactive({ |
); |
||||||
title: "", |
const store = useStore(); |
||||||
description: "", |
let bots = ref([]); // 定义bot列表 |
||||||
content: "", |
const new_bot = reactive({ |
||||||
error_msg: "", |
title: "", |
||||||
}) |
description: "", |
||||||
|
content: "", |
||||||
|
error_msg: "", |
||||||
|
}); |
||||||
|
|
||||||
const cancel_update = (bot)=> { |
const cancel_update = (bot) => { |
||||||
Modal.getInstance("#update-bot-btn-"+bot.id).hide(); |
Modal.getInstance("#update-bot-btn-" + bot.id).hide(); |
||||||
refresh_bots(); |
refresh_bots(); |
||||||
} |
}; |
||||||
|
|
||||||
const cancel_add = ()=> { |
|
||||||
Modal.getInstance("#add_bot_btn").hide(); |
|
||||||
refresh_bots(); |
|
||||||
} |
|
||||||
|
|
||||||
const refresh_bots = () => { |
const cancel_add = () => { |
||||||
$.ajax({ |
Modal.getInstance("#add_bot_btn").hide(); |
||||||
url: "https://kob.bnblogs.cc/api/user/bot/getlist/", |
refresh_bots(); |
||||||
type: "GET", |
}; |
||||||
headers:{ |
|
||||||
"Authorization": "Bearer " + store.state.user.token, // 任何需要登录才能显示的都要加这个验证 |
|
||||||
}, |
|
||||||
success(resp){ |
|
||||||
// 将后端得到的数据传给bot |
|
||||||
bots.value = resp; |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
refresh_bots(); |
|
||||||
|
|
||||||
// 点击创建bot按钮触发的事件 |
const refresh_bots = () => { |
||||||
const add_bot = () => { |
$.ajax({ |
||||||
new_bot.error_msg = ""; |
url: "https://kob.bnblogs.cc/api/user/bot/getlist/", |
||||||
$.ajax({ |
type: "GET", |
||||||
url: "https://kob.bnblogs.cc/api/user/bot/add/", |
headers: { |
||||||
type: "POST", |
Authorization: "Bearer " + store.state.user.token, // 任何需要登录才能显示的都要加这个验证 |
||||||
data: { |
}, |
||||||
title: new_bot.title, |
success(resp) { |
||||||
description: new_bot.description, |
// 将后端得到的数据传给bot |
||||||
content: new_bot.content, |
bots.value = resp; |
||||||
}, |
}, |
||||||
headers:{ |
}); |
||||||
"Authorization": "Bearer " + store.state.user.token, |
}; |
||||||
}, |
refresh_bots(); |
||||||
success(resp) { |
|
||||||
if (resp.error_msg === "success") { // 添加bot成功 |
|
||||||
new_bot.title = "", |
|
||||||
new_bot.description="", |
|
||||||
new_bot.content="", |
|
||||||
Modal.getInstance("#add_bot_btn").hide(); |
|
||||||
refresh_bots(); |
|
||||||
} |
|
||||||
else { |
|
||||||
new_bot.error_msg = resp.error_msg; // 返回错误信息 |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
|
// 点击创建bot按钮触发的事件 |
||||||
// 点击更新bot按钮触发的事件 |
const add_bot = () => { |
||||||
const update_bot = (bot) => { |
new_bot.error_msg = ""; |
||||||
$.ajax({ |
$.ajax({ |
||||||
url: "https://kob.bnblogs.cc/api/user/bot/update/", |
url: "https://kob.bnblogs.cc/api/user/bot/add/", |
||||||
type: "POST", |
type: "POST", |
||||||
data: { |
data: { |
||||||
bot_id: bot.id, |
title: new_bot.title, |
||||||
title: bot.title, |
description: new_bot.description, |
||||||
description: bot.description, |
content: new_bot.content, |
||||||
content: bot.content, |
}, |
||||||
}, |
headers: { |
||||||
headers:{ |
Authorization: "Bearer " + store.state.user.token, |
||||||
"Authorization": "Bearer " + store.state.user.token, |
}, |
||||||
}, |
success(resp) { |
||||||
success(resp) { |
if (resp.error_msg === "success") { |
||||||
if (resp.error_msg === "success") { // 更新bot成功 |
// 添加bot成功 |
||||||
Modal.getInstance("#update-bot-btn-"+bot.id).hide(); |
(new_bot.title = ""), |
||||||
refresh_bots(); |
(new_bot.description = ""), |
||||||
} |
(new_bot.content = ""), |
||||||
else { |
Modal.getInstance("#add_bot_btn").hide(); |
||||||
new_bot.error_msg = resp.error_msg; // 返回错误信息 |
refresh_bots(); |
||||||
} |
} else { |
||||||
} |
new_bot.error_msg = resp.error_msg; // 返回错误信息 |
||||||
}) |
} |
||||||
} |
}, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
// 点击删除bot按钮触发的事件 |
// 点击更新bot按钮触发的事件 |
||||||
const remove_bot = (bot) => { |
const update_bot = (bot) => { |
||||||
$.ajax({ |
$.ajax({ |
||||||
url: "https://kob.bnblogs.cc/api/user/bot/remove/", |
url: "https://kob.bnblogs.cc/api/user/bot/update/", |
||||||
type: "POST", |
type: "POST", |
||||||
data: { |
data: { |
||||||
bot_id: bot.id |
bot_id: bot.id, |
||||||
}, |
title: bot.title, |
||||||
headers:{ |
description: bot.description, |
||||||
"Authorization": "Bearer " + store.state.user.token, |
content: bot.content, |
||||||
}, |
}, |
||||||
success(resp) { |
headers: { |
||||||
console.log(resp) |
Authorization: "Bearer " + store.state.user.token, |
||||||
if (resp.error_msg === "success") { // 添加bot成功 |
}, |
||||||
refresh_bots(); |
success(resp) { |
||||||
} |
if (resp.error_msg === "success") { |
||||||
} |
// 更新bot成功 |
||||||
}) |
Modal.getInstance("#update-bot-btn-" + bot.id).hide(); |
||||||
} |
refresh_bots(); |
||||||
|
} else { |
||||||
|
new_bot.error_msg = resp.error_msg; // 返回错误信息 |
||||||
|
} |
||||||
|
}, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
return { |
// 点击删除bot按钮触发的事件 |
||||||
bots, |
const remove_bot = (bot) => { |
||||||
new_bot, |
console.log(bot); |
||||||
add_bot, |
$.ajax({ |
||||||
remove_bot, |
url: "https://kob.bnblogs.cc/api/user/bot/remove/", |
||||||
update_bot, |
type: "POST", |
||||||
cancel_update, |
data: { |
||||||
cancel_add, |
bot_id: bot.id, |
||||||
} |
}, |
||||||
} |
headers: { |
||||||
|
Authorization: "Bearer " + store.state.user.token, |
||||||
} |
}, |
||||||
|
success(resp) { |
||||||
|
console.log(resp); |
||||||
|
if (resp.error_msg === "success") { |
||||||
|
Modal.getInstance("#remove-bot-btn-" + bot.id).hide(); |
||||||
|
// 删除bot成功 |
||||||
|
refresh_bots(); |
||||||
|
} |
||||||
|
}, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
return { |
||||||
|
bots, |
||||||
|
new_bot, |
||||||
|
add_bot, |
||||||
|
remove_bot, |
||||||
|
update_bot, |
||||||
|
cancel_update, |
||||||
|
cancel_add, |
||||||
|
}; |
||||||
|
}, |
||||||
|
}; |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style scoped> |
<style scoped> |
||||||
img{ |
img { |
||||||
width: 100% |
width: 100%; |
||||||
} |
} |
||||||
.error_msg{ |
.error_msg { |
||||||
font-size: 20px; |
font-size: 20px; |
||||||
font-weight: bold; |
font-weight: bold; |
||||||
color: red; |
color: red; |
||||||
} |
} |
||||||
</style> |
</style> |
Loading…
Reference in new issue