From 43df2b3f8b67cc3a50023fb1264be0f9d8a301e4 Mon Sep 17 00:00:00 2001
From: barney <15270405776@163.com>
Date: Sat, 10 Sep 2022 00:22:35 +0800
Subject: [PATCH] =?UTF-8?q?10.2=20=E5=AE=9E=E7=8E=B0AcApp=E7=AB=AF?=
 =?UTF-8?q?=EF=BC=88=E4=B8=AD=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 acapp/src/App.vue                             |  18 +-
 acapp/src/components/ContentField.vue         |   8 +-
 acapp/src/components/MatchGround.vue          |   4 +-
 acapp/src/components/PlayGround.vue           |  59 +++-
 acapp/src/components/ResultBoard.vue          |  66 +++--
 acapp/src/views/MenuView.vue                  |   2 +-
 .../src/views/ranklist/RanklistIndexView.vue  | 128 ++++++--
 acapp/src/views/record/RecordIndexView.vue    | 212 ++++++++++----
 acapp/src/views/user/bot/UserBotIndexView.vue | 276 +++++++++++-------
 9 files changed, 546 insertions(+), 227 deletions(-)

diff --git a/acapp/src/App.vue b/acapp/src/App.vue
index b541347..b24a917 100644
--- a/acapp/src/App.vue
+++ b/acapp/src/App.vue
@@ -1,18 +1,12 @@
 <template>
-  <div class="game-body">
+<div class="game-body">
     <MenuView v-if="$store.state.router.router_name === 'menu'" />
     <PkIndexView v-else-if="$store.state.router.router_name === 'pk'" />
-    <RanklistIndexView
-      v-else-if="$store.state.router.router_name === 'ranklist'"
-    />
-    <RecordIndexView v-else-if="$store.state.router.router_name === 'record'" />
-    <RecordContentView
-      v-else-if="$store.state.router.router_name === 'record_content'"
-    />
-    <UserBotIndexView
-      v-else-if="$store.state.router.router_name === 'user_bot'"
-    />
-  </div>
+    <RanklistIndexView v-else-if="$store.state.router.router_name === 'ranklist'"/>
+    <RecordIndexView v-else-if="$store.state.router.router_name === 'record'"/>
+    <RecordContentView v-else-if="$store.state.router.router_name === 'record_content'"/>
+    <UserBotIndexView v-else-if="$store.state.router.router_name === 'user_bot'"/>
+</div>
 </template>
 
 <script>
diff --git a/acapp/src/components/ContentField.vue b/acapp/src/components/ContentField.vue
index e3777ba..7fbe232 100644
--- a/acapp/src/components/ContentField.vue
+++ b/acapp/src/components/ContentField.vue
@@ -31,10 +31,10 @@ div.content-field {
 
 div.back {
     position: absolute;
-    right: 5vw;
-    bottom: 5vh;
+    right: 3vw;
+    bottom: 3vh;
     cursor: pointer;
-    font-size: 24px;
+    font-size: 20px;
     font-weight: bold;
     font-style: italic;
     color: white;
@@ -43,7 +43,7 @@ div.back {
 }
 
 div.back:hover {
-    scale: 1.2;
+    transform: scale(1.2);
     transition: 400ms;
 }
 </style>
\ No newline at end of file
diff --git a/acapp/src/components/MatchGround.vue b/acapp/src/components/MatchGround.vue
index a41f932..0927e97 100644
--- a/acapp/src/components/MatchGround.vue
+++ b/acapp/src/components/MatchGround.vue
@@ -168,10 +168,10 @@ img {
 }
 
 .select-bot > select {
-  font-size: 18px;
+  font-size: 16px;
   width: 20vw;
   border-radius: 5px;
-  height: 6vh;
+  height: 4vh;
 }
 
 .mybtn {
diff --git a/acapp/src/components/PlayGround.vue b/acapp/src/components/PlayGround.vue
index c54c9df..15e6bec 100644
--- a/acapp/src/components/PlayGround.vue
+++ b/acapp/src/components/PlayGround.vue
@@ -1,24 +1,67 @@
 <template>
-    <div class="playground">
-        <GameMap />
+    <div class="content-field">
+        <div class="playground">
+            <GameMap />
+        </div>
+        <div class="back" @click="handleClickBack">
+            返回
+        </div>
     </div>
 </template>
 
+
 <script>
-import GameMap from './GameMap.vue' // 导入GameMap组件(.vue结尾)
+import GameMap from './GameMap.vue' 
+import { useStore } from "vuex";
 
 export default {
-    components: { // 使用GameMap组件
+    components: { 
         GameMap,
-    }
+    },
+    setup() {
+        const store = useStore();
+        const handleClickBack = () => {
+            store.commit("updateRouterName","menu");
+        }
+
+        return {
+            handleClickBack,
+        }
+}
 }
 </script>
 
 <style scoped> 
 /* div标签的样式 */
 div.playground {
-    width: 60vw;
-    height: 70vh;
-    margin: 40px auto;
+    width: 40vw;
+    height: 50vh;
+}
+
+
+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>
\ No newline at end of file
diff --git a/acapp/src/components/ResultBoard.vue b/acapp/src/components/ResultBoard.vue
index 0929fd4..3bda693 100644
--- a/acapp/src/components/ResultBoard.vue
+++ b/acapp/src/components/ResultBoard.vue
@@ -1,23 +1,27 @@
 <template>
-    <div class="result-board">
-        <div class="result-text" v-if="$store.state.pk.loser === 'all'">
-            Draw
-        </div>
+    <div class="field">
+        <div>
+            <div class="result-board">
+                <div class="result-text" v-if="$store.state.pk.loser === 'all'">
+                    Draw
+                    </div> 
 
-        <div class="result-text" v-else-if="$store.state.pk.loser === 'A' && $store.state.pk.a_id === parseInt($store.state.user.id)">
-            Lose
-        </div>
+                <div class="result-text" v-else-if="$store.state.pk.loser === 'A' && $store.state.pk.a_id === parseInt($store.state.user.id)">
+                    Lose
+                </div>
 
-        <div class="result-text" v-else-if="$store.state.pk.loser === 'B' && $store.state.pk.b_id == parseInt($store.state.user.id)">
-            Lose
-        </div>
+                <div class="result-text" v-else-if="$store.state.pk.loser === 'B' && $store.state.pk.b_id == parseInt($store.state.user.id)">
+                    Lose
+                </div>
 
-        <div class="result-text" v-else>
-            You Win
-        </div>
+                <div class="result-text" v-else>
+                    You Win
+                </div>
 
-        <div class="reset-btn">
-            <button @click="reset" class="btn btn-warning lg">再来一次!</button>
+                <div class="reset-btn">
+                    <button @click="reset">再来一次!</button>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -50,29 +54,47 @@ export default {
 
 
 <style scoped> 
+
+
+.field {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}
+
 .result-board {
-    width: 30vw;
-    height: 30vh;
     background-color: rgba(34, 20, 77, 0.5);
     position: absolute;
-    top: 30vh;
-    left: 35vw;
+    width:20vw;
+    height: 10vw;
+    top: 10vw;
+    left: 15vw;
 }
 
 .result-text {
-    font-size: 50px;
+    font-size: 40px;
     color:yellowgreen;
     font-weight: bold;
     text-align: center;
     font-style: italic;
-    padding-top: 4vh;
-    padding-bottom: 4vh;
+    padding-top: 2vh;
+    padding-bottom: 2vh;
 }
 
 .reset-btn {
     width: 100%;
     display: flex;
     justify-content: center;
+}
 
+button {
+    background-color: #0dcaf0;
+    border-radius: 0.2vw;
+    border: none;
+    border-color: #0dcaf0;
+    font-size: 1.3vw;
+    margin-right: 1vw;
 }
 </style>
\ No newline at end of file
diff --git a/acapp/src/views/MenuView.vue b/acapp/src/views/MenuView.vue
index 0ca135a..ebca505 100644
--- a/acapp/src/views/MenuView.vue
+++ b/acapp/src/views/MenuView.vue
@@ -71,7 +71,7 @@ div.menu-item {
 }
 
 div.menu-item:hover {
-    scale: 1.2;
+    transform: scale(1.2);
     transition: 400ms;
 }
 
diff --git a/acapp/src/views/ranklist/RanklistIndexView.vue b/acapp/src/views/ranklist/RanklistIndexView.vue
index 38a0695..a9928f8 100644
--- a/acapp/src/views/ranklist/RanklistIndexView.vue
+++ b/acapp/src/views/ranklist/RanklistIndexView.vue
@@ -1,20 +1,25 @@
 <template>
     <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>
                 <tr>
-                    <th>玩家</th>
+                    <th style="text-align: left;">玩家</th>
                     <th>积分</th>
                 </tr>   
             </thead>
             <tbody>
-                <tr v-for="user in users" :key="user.id" class=align-middle>
-                    <td>
-                        <img :src="user.photo" alt="" class="user_photo">&nbsp;
-                        <div class="username userA">{{user.username}}</div>
+                <tr v-for="user in users" :key="user.id">
+                    
+                    <td style="text-align: center;">
+                        <div class="oneline">
+                        <img :src="user.photo" alt="" class="user_photo" />
+                        <span class="username userA">&nbsp;{{user.username}}</span>
+                        </div>
                     </td>
                 
-                    <td>
+                    <td class="rating">
                         {{user.rating}}
                     </td>
 
@@ -22,20 +27,21 @@
             </tbody>
         </table>
 
-         <nav aria-label="...">
-        <ul class="pagination" style="float: right;">
-            <li class="page-item" @click="click_page(-2)">
-                <a class="page-link" href="#">上一页</a>
+        <nav>
+        <ul style="padding: 0;">
+            <li class="game-page-item" @click="click_page(-2)">
+                <a class="game-page-link" href="#">上一页</a>
             </li>
-            <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>
+            <li :class="'game-page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)">
+                <a class="game-page-link" href="#">{{ page.number }}</a>
             </li>
-            <li class="page-item" @click="click_page(-1)">
-                <a class="page-link" href="#">下一页</a>
+            <li class="game-page-item" @click="click_page(-1)">
+                <a class="game-page-link" href="#">下一页</a>
             </li>
         </ul>
         </nav>
-
+            </div>
+        </div>
     </ContentField>
 </template>
 
@@ -114,14 +120,25 @@ export default {
 
 <style scoped>
 .user_photo{
-    width: 4vh;
+    width: 2vw;
     border-radius: 50%;
 }
+
+.oneline {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .username {
     font-weight: bold;
     font-size: 1vw;
+    overflow: hidden;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 25vw;
 }
-
 .userA {
    color: blue;
 }
@@ -130,4 +147,79 @@ export default {
     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>
\ No newline at end of file
diff --git a/acapp/src/views/record/RecordIndexView.vue b/acapp/src/views/record/RecordIndexView.vue
index efb56fc..70a7efe 100644
--- a/acapp/src/views/record/RecordIndexView.vue
+++ b/acapp/src/views/record/RecordIndexView.vue
@@ -1,57 +1,64 @@
 <template>
     <ContentField>
-        <table class="table table-striped table-hover table-sm align-middle" style="text-align: center;">
-            <thead>
-                <tr>
-                    <th>player A</th>
-                    <th>player B</th>
-                    <th>对战结果</th> 
-                    <th>对战时间</th>
-                    <th>操作</th>
-                </tr>   
-            </thead>
-            <tbody>
-                <tr v-for="record in records" :key="record.record.id" class=align-middle>
-                    <td >
-                        <img :src="record.a_photo" alt="" class="user_photo">&nbsp;
-                        <div class="username userA">{{record.a_username}}</div>
-                    </td>
-                    <td>
-                        <img :src="record.b_photo" alt="" class="user_photo">&nbsp;
-                        <div class="username userB">{{record.b_username}}</div>
-                    </td>
-                    <td>
-                        <div class="info">
-                            {{record.result}}
-                        </div>
-                        
-                    </td>
-
-                    <td>
-                        <div class="info">
-                            {{record.record.createTime}}
-                        </div>
-                    </td>
-                    <td>
-                        <button class="btn btn-info sm" @click="open_record_content(record.record.id)">查看录像</button>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-
-        <nav aria-label="..." style="float: right;">
-            <ul class="pagination">
-                <li class="page-item">
-                <a class="page-link" href="#" @click="click_page(-2)">上一页</a>
-                </li>
-                <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>
-                </li>
-                <li class="page-item">
-                <a class="page-link" href="#" @click="click_page(-1)">下一页</a>
-                </li>
-            </ul>
-        </nav>
+        <div class="game-table">
+            <div>
+                <table>
+                    <thead style="text-align: center;">
+                        <tr>
+                        <th style="text-align: left;">player A</th>
+                        <th style="text-align: left;">player B</th>
+                        <th>对战结果</th> 
+                        <th>对战时间</th>
+                        <th>操作</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="record in records" :key="record.record.id" class=align-middle>
+                            <td style="text-align:left;">
+                                <div class="oneline">
+                                    <img :src="record.a_photo" alt="" class="user_photo">&nbsp;
+                                    <span class="username userA" >&nbsp;{{record.a_username}}</span>
+                                </div>
+                            </td>
+                            <td style="text-align:left;">
+                                <div class="oneline">
+                                    <img :src="record.b_photo" alt="" class="user_photo">&nbsp;
+                                    <span class="username userB">&nbsp;{{record.b_username}}</span>
+                                </div>
+                                
+                            </td>
+                            <td>
+                                <div class="info-res">
+                                    {{record.result}}
+                                </div>
+                            </td>
+                            <td>
+                                <div class="info-time">
+                                    {{record.record.createTime}}
+                                </div>
+                            </td>
+                            <td>
+                                <button @click="open_record_content(record.record.id)">查看录像</button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                <nav>
+                    <ul style="padding: 0;">
+                        <li class="game-page-item">
+                            <a class="game-page-link" href="#" @click="click_page(-2)">上一页</a>
+                        </li>
+                        <li :class="'game-page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)">
+                            <a class="game-page-link" href="#">{{page.number}}</a>
+                        </li>
+                        <li class="game-page-item">
+                            <a class="game-page-link" href="#" @click="click_page(-1)">下一页</a>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+        </div>
     </ContentField>
 </template>
 
@@ -159,7 +166,8 @@ export default {
                     })
 
                     // 恢复对局的败者
-                    store.commit("updateRecordLoser",record.record.loser);                    
+                    store.commit("updateRecordLoser",record.record.loser);
+                    store.commit("updateRouterName","record_content");
                     break;
                 }
             }
@@ -178,12 +186,37 @@ export default {
 
 <style scoped>
 .user_photo{
-    width: 4vh;
+    width: 2vw;
     border-radius: 50%;
 }
+
+.oneline {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .username {
     font-weight: bold;
     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 {
@@ -194,4 +227,75 @@ export default {
     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>
\ No newline at end of file
diff --git a/acapp/src/views/user/bot/UserBotIndexView.vue b/acapp/src/views/user/bot/UserBotIndexView.vue
index 9d5c6cd..f57511b 100644
--- a/acapp/src/views/user/bot/UserBotIndexView.vue
+++ b/acapp/src/views/user/bot/UserBotIndexView.vue
@@ -1,127 +1,124 @@
 <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 class="game-table">
+        <div>  
+
+
+            <div class="card-header" style="padding-bottom: 10px" >
+                <span style="font-size: 20px; font-weight: bold ">我的bots</span>
+                <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>
-        </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 >
+                    <form>
+                        <div class="center">
+                            <label for="add_bot_title">bot名称:&nbsp;</label>
+                            <input type="text" v-model="new_bot.title" style="width: 70%;"  class="form-control" id="add_bot_title" placeholder="请输入新bot的名称">
                         </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 class="center">
+                            <div>
+                                <label for="add_bot_description">bot简介:&nbsp;</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的代码:&nbsp;</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>
+                            <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>
                 </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>
-                            <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 class="card-body">
+            <table>
+                <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" 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>
+                                <form>
+                                    <div class="center">
+                                        <label for="add_bot_title">bot名称:&nbsp;</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简介:&nbsp;</label>
+                                        </div>
+
+                                        <div>
+                                            <textarea class="form-control" v-model="bot.description" id="add_bot_description" style="margin-top: 2vh;width: 28.5vw;"></textarea>
+                                        </div>
+
+                                    </div>
+
+                                    <div>
+                                        <label for="add_bot_code">bot的代码:&nbsp;</label>
+                                            <VAceEditor
+                                                v-model:value="bot.content"
+                                                @init="editorInit"
+                                                lang="c_cpp"
+                                                theme="textmate"
+                                                :options="{fontSize: 10}" 
+                                                style="height: 20vh" />
+                                    </div>
+                                </form>
+                            </div>
+                        <div>
+                        <div class="error_msg">{{ bot.error_msg }}</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>
                     </div>
                     </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
+                    </tr>
+                </tbody>
+            </table>
+        </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>
\ No newline at end of file