zfp
/
kob
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

10.2 实现AcApp端（中）

Browse Source
master
barney 2 years ago
parent d4e0391f83
commit 43df2b3f8b
9 changed files with 546 additions and 227 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      acapp/src/App.vue
  2. 8
      acapp/src/components/ContentField.vue
  3. 4
      acapp/src/components/MatchGround.vue
  4. 53
      acapp/src/components/PlayGround.vue
  5. 38
      acapp/src/components/ResultBoard.vue
  6. 2
      acapp/src/views/MenuView.vue
  7. 128
      acapp/src/views/ranklist/RanklistIndexView.vue
  8. 148
      acapp/src/views/record/RecordIndexView.vue
  9. 212
      acapp/src/views/user/bot/UserBotIndexView.vue

12
acapp/src/App.vue
Unescape View File

@ -2,16 +2,10 @@
<div class="game-body"> <div class="game-body">
<MenuView v-if="$store.state.router.router_name === 'menu'" /> <MenuView v-if="$store.state.router.router_name === 'menu'" />
<PkIndexView v-else-if="$store.state.router.router_name === 'pk'" /> <PkIndexView v-else-if="$store.state.router.router_name === 'pk'" />
<RanklistIndexView <RanklistIndexView v-else-if="$store.state.router.router_name === 'ranklist'"/>
v-else-if="$store.state.router.router_name === 'ranklist'"
/>
<RecordIndexView v-else-if="$store.state.router.router_name === 'record'"/> <RecordIndexView v-else-if="$store.state.router.router_name === 'record'"/>
<RecordContentView <RecordContentView v-else-if="$store.state.router.router_name === 'record_content'"/>
v-else-if="$store.state.router.router_name === 'record_content'" <UserBotIndexView v-else-if="$store.state.router.router_name === 'user_bot'"/>
/>
<UserBotIndexView
v-else-if="$store.state.router.router_name === 'user_bot'"
/>
</div> </div>
</template> </template>

8
acapp/src/components/ContentField.vue
Unescape View File

@ -31,10 +31,10 @@ div.content-field {
div.back { div.back {
position: absolute; position: absolute;
right: 5vw; right: 3vw;
bottom: 5vh; bottom: 3vh;
cursor: pointer; cursor: pointer;
font-size: 24px; font-size: 20px;
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
color: white; color: white;
@ -43,7 +43,7 @@ div.back {
} }
div.back:hover { div.back:hover {
scale: 1.2; transform: scale(1.2);
transition: 400ms; transition: 400ms;
} }
</style> </style>

4
acapp/src/components/MatchGround.vue
Unescape View File

@ -168,10 +168,10 @@ img {
} }
.select-bot > select { .select-bot > select {
font-size: 18px; font-size: 16px;
width: 20vw; width: 20vw;
border-radius: 5px; border-radius: 5px;
height: 6vh; height: 4vh;
} }
.mybtn { .mybtn {

53
acapp/src/components/PlayGround.vue
Unescape View File

@ -1,15 +1,32 @@
<template> <template>
<div class="content-field">
<div class="playground"> <div class="playground">
<GameMap /> <GameMap />
</div> </div>
<div class="back" @click="handleClickBack">
返回
</div>
</div>
</template> </template>
<script> <script>
import GameMap from './GameMap.vue' // 导入GameMap组件(.vue结尾) import GameMap from './GameMap.vue'
import { useStore } from "vuex";
export default { export default {
components: { // 使用GameMap组件 components: {
GameMap, GameMap,
},
setup() {
const store = useStore();
const handleClickBack = () => {
store.commit("updateRouterName","menu");
}
return {
handleClickBack,
}
} }
} }
</script> </script>
@ -17,8 +34,34 @@ export default {
<style scoped> <style scoped>
/* div标签的样式 */ /* div标签的样式 */
div.playground { div.playground {
width: 60vw; width: 40vw;
height: 70vh; height: 50vh;
margin: 40px auto; }
div.content-field {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
div.back {
position: absolute;
right: 3vw;
bottom: 3vh;
cursor: pointer;
font-size: 20px;
font-weight: bold;
font-style: italic;
color: white;
user-select: none;
}
div.back:hover {
transform: scale(1.2);
transition: 400ms;
} }
</style> </style>

38
acapp/src/components/ResultBoard.vue
Unescape View File

@ -1,4 +1,6 @@
<template> <template>
<div class="field">
<div>
<div class="result-board"> <div class="result-board">
<div class="result-text" v-if="$store.state.pk.loser === 'all'"> <div class="result-text" v-if="$store.state.pk.loser === 'all'">
Draw Draw
@ -17,7 +19,9 @@
</div> </div>
<div class="reset-btn"> <div class="reset-btn">
<button @click="reset" class="btn btn-warning lg">再来一次!</button> <button @click="reset">再来一次!</button>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -50,29 +54,47 @@ export default {
<style scoped> <style scoped>
.field {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.result-board { .result-board {
width: 30vw;
height: 30vh;
background-color: rgba(34, 20, 77, 0.5); background-color: rgba(34, 20, 77, 0.5);
position: absolute; position: absolute;
top: 30vh; width:20vw;
left: 35vw; height: 10vw;
top: 10vw;
left: 15vw;
} }
.result-text { .result-text {
font-size: 50px; font-size: 40px;
color:yellowgreen; color:yellowgreen;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
font-style: italic; font-style: italic;
padding-top: 4vh; padding-top: 2vh;
padding-bottom: 4vh; padding-bottom: 2vh;
} }
.reset-btn { .reset-btn {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
}
button {
background-color: #0dcaf0;
border-radius: 0.2vw;
border: none;
border-color: #0dcaf0;
font-size: 1.3vw;
margin-right: 1vw;
} }
</style> </style>

2
acapp/src/views/MenuView.vue
Unescape View File

@ -71,7 +71,7 @@ div.menu-item {
} }
div.menu-item:hover { div.menu-item:hover {
scale: 1.2; transform: scale(1.2);
transition: 400ms; transition: 400ms;
} }

128
acapp/src/views/ranklist/RanklistIndexView.vue
Unescape View File

@ -1,20 +1,25 @@
<template> <template>
<ContentField> <ContentField>
<table class="table table-striped table-hover table-sm" style="text-align: center;"> <div class="game-table">
<div>
<table style="text-align: center;">
<thead> <thead>
<tr> <tr>
<th>玩家</th> <th style="text-align: left;">玩家</th>
<th>积分</th> <th>积分</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="user in users" :key="user.id" class=align-middle> <tr v-for="user in users" :key="user.id">
<td>
<img :src="user.photo" alt="" class="user_photo">&nbsp; <td style="text-align: center;">
<div class="username userA">{{user.username}}</div> <div class="oneline">
<img :src="user.photo" alt="" class="user_photo" />
<span class="username userA">&nbsp;{{user.username}}</span>
</div>
</td> </td>
<td> <td class="rating">
{{user.rating}} {{user.rating}}
</td> </td>
@ -22,20 +27,21 @@
</tbody> </tbody>
</table> </table>
<nav aria-label="..."> <nav>
<ul class="pagination" style="float: right;"> <ul style="padding: 0;">
<li class="page-item" @click="click_page(-2)"> <li class="game-page-item" @click="click_page(-2)">
<a class="page-link" href="#">上一页</a> <a class="game-page-link" href="#">上一页</a>
</li> </li>
<li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)"> <li :class="'game-page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)">
<a class="page-link" href="#">{{ page.number }}</a> <a class="game-page-link" href="#">{{ page.number }}</a>
</li> </li>
<li class="page-item" @click="click_page(-1)"> <li class="game-page-item" @click="click_page(-1)">
<a class="page-link" href="#">下一页</a> <a class="game-page-link" href="#">下一页</a>
</li> </li>
</ul> </ul>
</nav> </nav>
</div>
</div>
</ContentField> </ContentField>
</template> </template>
@ -114,14 +120,25 @@ export default {
<style scoped> <style scoped>
.user_photo{ .user_photo{
width: 4vh; width: 2vw;
border-radius: 50%; border-radius: 50%;
} }
.oneline {
display: flex;
justify-content: center;
align-items: center;
}
.username { .username {
font-weight: bold; font-weight: bold;
font-size: 1vw; font-size: 1vw;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
width: 25vw;
} }
.userA { .userA {
color: blue; color: blue;
} }
@ -130,4 +147,79 @@ export default {
color: red; color: red;
} }
div.game-table {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
td {
height: 2.5vw;
}
th {
text-align: center;
}
div.game-table table{
background-color: rgba(255, 255, 255, 0.4);
text-align: center;
}
.rating {
width: 15vw;
}
button {
background-color: #0dcaf0;
border-radius: 0.2vw;
border: none;
border-color: #0dcaf0;
font-size: 1vw;
margin-right: 1vw;
}
nav {
display: flex;
justify-content: center;
align-items: center;
margin-top: 2rem;
}
.game-page-item {
display: inline-block;
padding: 0.5vw 0.5vw;
font-size: 0.5vw;
background-color: white;
border: 1px solid #dee2e6;
user-select: none;
}
.game-page-item.active {
background-color: #0d6efd;
}
.game-page-item.active > a {
color: white;
}
.game-page-item:hover {
background-color: #e9ecef;
cursor: pointer;
}
.game-page-link {
color: #0d6efd;
text-decoration: none;
}
</style> </style>

148
acapp/src/views/record/RecordIndexView.vue
Unescape View File

@ -1,10 +1,12 @@
<template> <template>
<ContentField> <ContentField>
<table class="table table-striped table-hover table-sm align-middle" style="text-align: center;"> <div class="game-table">
<thead> <div>
<table>
<thead style="text-align: center;">
<tr> <tr>
<th>player A</th> <th style="text-align: left;">player A</th>
<th>player B</th> <th style="text-align: left;">player B</th>
<th>对战结果</th> <th>对战结果</th>
<th>对战时间</th> <th>对战时间</th>
<th>操作</th> <th>操作</th>
@ -12,46 +14,51 @@
</thead> </thead>
<tbody> <tbody>
<tr v-for="record in records" :key="record.record.id" class=align-middle> <tr v-for="record in records" :key="record.record.id" class=align-middle>
<td > <td style="text-align:left;">
<div class="oneline">
<img :src="record.a_photo" alt="" class="user_photo">&nbsp; <img :src="record.a_photo" alt="" class="user_photo">&nbsp;
<div class="username userA">{{record.a_username}}</div> <span class="username userA" >&nbsp;{{record.a_username}}</span>
</div>
</td> </td>
<td> <td style="text-align:left;">
<div class="oneline">
<img :src="record.b_photo" alt="" class="user_photo">&nbsp; <img :src="record.b_photo" alt="" class="user_photo">&nbsp;
<div class="username userB">{{record.b_username}}</div> <span class="username userB">&nbsp;{{record.b_username}}</span>
</div>
</td> </td>
<td> <td>
<div class="info"> <div class="info-res">
{{record.result}} {{record.result}}
</div> </div>
</td> </td>
<td> <td>
<div class="info"> <div class="info-time">
{{record.record.createTime}} {{record.record.createTime}}
</div> </div>
</td> </td>
<td> <td>
<button class="btn btn-info sm" @click="open_record_content(record.record.id)">查看录像</button> <button @click="open_record_content(record.record.id)">查看录像</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<nav aria-label="..." style="float: right;"> <nav>
<ul class="pagination"> <ul style="padding: 0;">
<li class="page-item"> <li class="game-page-item">
<a class="page-link" href="#" @click="click_page(-2)">上一页</a> <a class="game-page-link" href="#" @click="click_page(-2)">上一页</a>
</li> </li>
<li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)"> <li :class="'game-page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)">
<a class="page-link" href="#">{{page.number}}</a> <a class="game-page-link" href="#">{{page.number}}</a>
</li> </li>
<li class="page-item"> <li class="game-page-item">
<a class="page-link" href="#" @click="click_page(-1)">下一页</a> <a class="game-page-link" href="#" @click="click_page(-1)">下一页</a>
</li> </li>
</ul> </ul>
</nav> </nav>
</div>
</div>
</ContentField> </ContentField>
</template> </template>
@ -160,6 +167,7 @@ export default {
// 恢复对局的败者 // 恢复对局的败者
store.commit("updateRecordLoser",record.record.loser); store.commit("updateRecordLoser",record.record.loser);
store.commit("updateRouterName","record_content");
break; break;
} }
} }
@ -178,12 +186,37 @@ export default {
<style scoped> <style scoped>
.user_photo{ .user_photo{
width: 4vh; width: 2vw;
border-radius: 50%; border-radius: 50%;
} }
.oneline {
display: flex;
justify-content: center;
align-items: center;
}
.username { .username {
font-weight: bold; font-weight: bold;
font-size: 1vw; font-size: 1vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 5vw;
}
.info-res {
width: 10vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.info-time {
width: 14vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.userA { .userA {
@ -194,4 +227,75 @@ export default {
color: red; color: red;
} }
div.game-table {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
div.game-table table{
background-color: rgba(255, 255, 255, 0.4);
text-align: center;
}
button {
background-color: #0dcaf0;
border-radius: 0.2vw;
border: none;
border-color: #0dcaf0;
font-size: 1vw;
margin-right: 1vw;
}
td {
height: 2.5vw;
}
th {
text-align: center;
}
nav {
display: flex;
justify-content: center;
align-items: center;
margin-top: 2rem;
}
.game-page-item {
display: inline-block;
padding: 0.5vw 0.5vw;
font-size: 0.5vw;
background-color: white;
border: 1px solid #dee2e6;
user-select: none;
}
.game-page-item.active {
background-color: #0d6efd;
}
.game-page-item.active > a {
color: white;
}
.game-page-item:hover {
background-color: #e9ecef;
cursor: pointer;
}
.game-page-link {
color: #0d6efd;
text-decoration: none;
}
</style> </style>

212
acapp/src/views/user/bot/UserBotIndexView.vue
Unescape View File

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