修改前端(1)

master
barney 2 years ago
parent e03a71776a
commit e362c88737
  1. 37
      web/src/components/MatchGround.vue
  2. 2
      web/src/components/NavBar.vue
  3. 1
      web/src/components/ResultBoard.vue
  4. 6
      web/src/store/pk.js
  5. 6
      web/src/views/pk/PkIndexView.vue
  6. 10
      web/src/views/ranklist/RanklistIndexView.vue
  7. 14
      web/src/views/record/RecordIndexView.vue
  8. 2
      web/src/views/user/account/UserAcWingCodeIndex.vue
  9. 632
      web/src/views/user/bot/UserBotIndexView.vue

@ -28,7 +28,17 @@
{{ $store.state.pk.opponent_username }} {{ $store.state.pk.opponent_username }}
</div> </div>
</div> </div>
<div class="col-12" style="text-align: center; padding-top: 10vh;">
<div style="text-align:center" class="load" v-if="$store.state.pk.status === 'matching' && $store.state.pk.loading && !is_matched" >
<span style="font-size:1.5rem">正在匹配中&nbsp;</span>
<span class="spinner-border spinner-border-md" role="status" aria-hidden="true"></span>
</div>
<!-- <div style="text-align:center;" v-if="!$store.state.pk.loading">
<span style="font-size:1.5rem;color:red;">匹配成功,即将开始游戏!!!</span>
</div> -->
<div class="col-12" style="text-align:center">
<button type="button" v-if="is_matched" class="btn btn-success btn-lg" @click="click_match_btn">{{match_btn_info}}</button> <button type="button" v-if="is_matched" class="btn btn-success btn-lg" @click="click_match_btn">{{match_btn_info}}</button>
<button type="button" v-else class="btn btn-danger btn-lg" @click="click_match_btn">{{match_btn_info}}</button> <button type="button" v-else class="btn btn-danger btn-lg" @click="click_match_btn">{{match_btn_info}}</button>
</div> </div>
@ -62,7 +72,6 @@ export default {
})); }));
}else { }else {
match_btn_info.value = "开始匹配"; match_btn_info.value = "开始匹配";
is_matched.value = true; is_matched.value = true;
store.state.pk.socket.send(JSON.stringify({ store.state.pk.socket.send(JSON.stringify({
@ -100,8 +109,8 @@ export default {
<style scoped> <style scoped>
.matchground { .matchground {
width: 60vw; width: 60vw;
height: 70vh; height: min(60vh,60vw);
margin: 40px auto; margin: 10vh auto;
background-color: rgba(123, 197, 212, 0.5); background-color: rgba(123, 197, 212, 0.5);
} }
@ -109,7 +118,7 @@ export default {
img { img {
margin-top: 10vh; margin-top: 10vh;
border-radius: 50%; border-radius: 50%;
width: 20vh; width: min(20vh,15vw);
} }
.user_photo { .user_photo {
@ -117,8 +126,8 @@ img {
} }
.username { .username {
margin-top: 30px; margin-top: 3vh;
font-size: 24px; font-size: 3vh;
font-weight: bold; font-weight: bold;
color:black; color:black;
text-align: center; text-align: center;
@ -129,8 +138,20 @@ img {
} }
.select-bot > select { .select-bot > select {
widows: 60%; font-size: 2.5vh;
margin: 0 auto; margin: 0 auto;
}
button {
margin-top: 4vh;
text-align: center;
}
.load {
position: absolute;
top: 24vh;
left: 1.3vh;
} }
</style> </style>

@ -27,7 +27,7 @@
<router-link class="dropdown-item" :to="{name: 'user_bot_index'}">我的Bot</router-link> <router-link class="dropdown-item" :to="{name: 'user_bot_index'}">我的Bot</router-link>
</li> </li>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#" @click="logout">退出</a></li> <li><a class="dropdown-item" href="#" @click="logout">退出</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>

@ -31,6 +31,7 @@ export default {
const store = useStore(); const store = useStore();
const reset = () => { const reset = () => {
store.commit("updateLoading",true);
store.commit("updateStatus","matching"); store.commit("updateStatus","matching");
store.commit("updateLoser","none"); store.commit("updateLoser","none");
store.commit("updateOpponent", { store.commit("updateOpponent", {

@ -12,7 +12,8 @@ export default {
b_sx: 0, b_sx: 0,
b_sy: 0, b_sy: 0,
gameObject: null, gameObject: null,
loser: "none" //"none","all","A","B" none表示还没有结果 loser: "none", //"none","all","A","B" none表示还没有结果
loading: true, // 显示正在加载中
}, },
getters: { getters: {
}, },
@ -27,6 +28,9 @@ export default {
updateStatus(state, status) { updateStatus(state, status) {
state.status = status; state.status = status;
}, },
updateLoading(state, loading) {
state.loading = loading;
},
updateGame(state, game) { updateGame(state, game) {
state.gamemap = game.map; state.gamemap = game.map;
state.a_id = game.a_id; state.a_id = game.a_id;

@ -57,9 +57,12 @@ export default {
photo: data.opponent_photo, photo: data.opponent_photo,
}); });
// loading
store.commit("updateLoading",false);
setTimeout(() => { setTimeout(() => {
store.commit("updateStatus", "playing"); store.commit("updateStatus", "playing");
}, 200); // 0.2(穿bug) },0.2); // 0.2
// (id) // (id)
store.commit("updateGame", data.game); store.commit("updateGame", data.game);
@ -89,6 +92,7 @@ export default {
}); });
// pk // pk
onUnmounted(() => { onUnmounted(() => {
store.commit("updateLoading",true);
socket.close(); socket.close();
}); });
}, },

@ -22,16 +22,16 @@
</tbody> </tbody>
</table> </table>
<nav aria-label="..."> <nav aria-label="...">
<ul class="pagination" style="float: right;"> <ul class="pagination" style="float: right;">
<li class="page-item" @click="click_page(-2)"> <li class="page-item" @click="click_page(-2)">
<a class="page-link" href="#">上一页</a> <a class="page-link" href="#">&laquo;</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="'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="page-link" href="#">{{ page.number }}</a>
</li> </li>
<li class="page-item" @click="click_page(-1)"> <li class="page-item" @click="click_page(-1)">
<a class="page-link" href="#">下一页</a> <a class="page-link" href="#">&raquo;</a>
</li> </li>
</ul> </ul>
</nav> </nav>
@ -71,13 +71,13 @@ export default {
} }
const click_page = page => { const click_page = page => {
let max_pages = parseInt(Math.ceil(total_users / 8));
if (page === -2) page = currentPage - 1; if (page === -2) page = currentPage - 1;
else if (page === -1) page = currentPage + 1; else if (page === -1) page = currentPage + 1;
let max_pages = parseInt(Math.ceil(total_users / 8));
if (page >= 1 && page <= max_pages) { if (page >= 1 && page <= max_pages) {
pull_page(page); pull_page(page);
} }
console.log(currentPage);
} }

@ -42,13 +42,13 @@
<nav aria-label="..." style="float: right;"> <nav aria-label="..." style="float: right;">
<ul class="pagination"> <ul class="pagination">
<li class="page-item"> <li class="page-item">
<a class="page-link" href="#" @click="click_page(-2)">上一页</a> <a class="page-link" href="#" @click="click_page(-2)">&laquo;</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="'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="page-link" href="#">{{page.number}}</a>
</li> </li>
<li class="page-item"> <li class="page-item">
<a class="page-link" href="#" @click="click_page(-1)">下一页</a> <a class="page-link" href="#" @click="click_page(-1)">&raquo;</a>
</li> </li>
</ul> </ul>
</nav> </nav>
@ -203,4 +203,14 @@ export default {
color: red; color: red;
} }
button {
cursor: pointer;
}
button:hover {
background-color: coral;
border: none;
border-color: coral;
}
</style> </style>

@ -23,7 +23,7 @@ export default {
if (resp.result === "success") { if (resp.result === "success") {
console.log(resp); console.log(resp);
// jwt_token // jwt_token
localStorage.setItem("jwt_token",resp.jwt_token); // localStorage.setItem("jwt_token",resp.jwt_token);
store.commit("updateToken",resp.jwt_token); store.commit("updateToken",resp.jwt_token);
router.push({ name:"home" }); // router.push({ name:"home" }); //
store.commit("updatePullingInfo",false); store.commit("updatePullingInfo",false);

@ -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 = ()=> { const cancel_add = () => {
Modal.getInstance("#add_bot_btn").hide(); Modal.getInstance("#add_bot_btn").hide();
refresh_bots(); refresh_bots();
} };
const refresh_bots = () => { const refresh_bots = () => {
$.ajax({ $.ajax({
url: "https://kob.bnblogs.cc/api/user/bot/getlist/", url: "https://kob.bnblogs.cc/api/user/bot/getlist/",
type: "GET", type: "GET",
headers:{ headers: {
"Authorization": "Bearer " + store.state.user.token, // Authorization: "Bearer " + store.state.user.token, //
}, },
success(resp){ success(resp) {
// bot // bot
bots.value = resp; bots.value = resp;
} },
}) });
} };
refresh_bots(); refresh_bots();
// bot // bot
const add_bot = () => { const add_bot = () => {
new_bot.error_msg = ""; new_bot.error_msg = "";
$.ajax({ $.ajax({
url: "https://kob.bnblogs.cc/api/user/bot/add/", url: "https://kob.bnblogs.cc/api/user/bot/add/",
type: "POST", type: "POST",
data: { data: {
title: new_bot.title, title: new_bot.title,
description: new_bot.description, description: new_bot.description,
content: new_bot.content, content: new_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") { // bot if (resp.error_msg === "success") {
new_bot.title = "", // bot
new_bot.description="", (new_bot.title = ""),
new_bot.content="", (new_bot.description = ""),
Modal.getInstance("#add_bot_btn").hide(); (new_bot.content = ""),
refresh_bots(); Modal.getInstance("#add_bot_btn").hide();
} refresh_bots();
else { } else {
new_bot.error_msg = resp.error_msg; // new_bot.error_msg = resp.error_msg; //
} }
} },
}) });
} };
// bot
const update_bot = (bot) => {
$.ajax({
url: "https://kob.bnblogs.cc/api/user/bot/update/",
type: "POST",
data: {
bot_id: bot.id,
title: bot.title,
description: bot.description,
content: bot.content,
},
headers: {
Authorization: "Bearer " + store.state.user.token,
},
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; //
}
},
});
};
// bot // bot
const update_bot = (bot) => { const remove_bot = (bot) => {
$.ajax({ console.log(bot);
url: "https://kob.bnblogs.cc/api/user/bot/update/", $.ajax({
type: "POST", url: "https://kob.bnblogs.cc/api/user/bot/remove/",
data: { type: "POST",
bot_id: bot.id, data: {
title: bot.title, bot_id: bot.id,
description: bot.description, },
content: bot.content, headers: {
}, Authorization: "Bearer " + store.state.user.token,
headers:{ },
"Authorization": "Bearer " + store.state.user.token, success(resp) {
}, console.log(resp);
success(resp) { if (resp.error_msg === "success") {
if (resp.error_msg === "success") { // bot Modal.getInstance("#remove-bot-btn-" + bot.id).hide();
Modal.getInstance("#update-bot-btn-"+bot.id).hide(); // bot
refresh_bots(); refresh_bots();
} }
else { },
new_bot.error_msg = resp.error_msg; // });
} };
}
})
}
// bot return {
const remove_bot = (bot) => { bots,
$.ajax({ new_bot,
url: "https://kob.bnblogs.cc/api/user/bot/remove/", add_bot,
type: "POST", remove_bot,
data: { update_bot,
bot_id: bot.id cancel_update,
}, cancel_add,
headers:{ };
"Authorization": "Bearer " + store.state.user.token, },
}, };
success(resp) {
console.log(resp)
if (resp.error_msg === "success") { // 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…
Cancel
Save