diff --git a/backend/src/main/java/com/kob/backend/pojo/Bot.java b/backend/src/main/java/com/kob/backend/pojo/Bot.java
index 11aaa18..d8564f4 100644
--- a/backend/src/main/java/com/kob/backend/pojo/Bot.java
+++ b/backend/src/main/java/com/kob/backend/pojo/Bot.java
@@ -19,8 +19,8 @@ public class Bot {
     private String description;
     private String content;
     private Integer rating;
-    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "Asia/Shanghai")
     private Date createtime;
-    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "Asia/Shanghai")
     private Date modifytime;
 }
diff --git a/backend/src/main/java/com/kob/backend/service/impl/user/account/LoginServiceImpl.java b/backend/src/main/java/com/kob/backend/service/impl/user/account/LoginServiceImpl.java
index 54106a8..4f1ce03 100644
--- a/backend/src/main/java/com/kob/backend/service/impl/user/account/LoginServiceImpl.java
+++ b/backend/src/main/java/com/kob/backend/service/impl/user/account/LoginServiceImpl.java
@@ -37,6 +37,7 @@ public class LoginServiceImpl implements LoginService {
         Map<String,String> map = new HashMap<>();
         map.put("error_message","success");
         map.put("token",jwt);
+        System.out.println(jwt);
         return map;
     }
 }
diff --git a/web/package-lock.json b/web/package-lock.json
index 8947b3b..9903679 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -14,6 +14,7 @@
         "jquery": "^3.6.0",
         "vue": "^3.2.13",
         "vue-router": "^4.0.3",
+        "vue3-ace-editor": "^2.2.2",
         "vuex": "^4.0.0"
       },
       "devDependencies": {
@@ -3126,6 +3127,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/ace-builds": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmmirror.com/ace-builds/-/ace-builds-1.9.5.tgz",
+      "integrity": "sha512-6iVEUPfqiKIGKsA63InrUhRRASmfuGnJCUBzkz/pL1BCPPEjasBp6fBA7mj4ovihICouopYYZaAKYhg6zypAwg=="
+    },
     "node_modules/acorn": {
       "version": "8.8.0",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.8.0.tgz",
@@ -8847,6 +8853,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz",
@@ -10184,6 +10195,16 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vue3-ace-editor": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmmirror.com/vue3-ace-editor/-/vue3-ace-editor-2.2.2.tgz",
+      "integrity": "sha512-fZ6OWosbU+odLrtrcGC/536QjCigujYJB0Hf6/tBp+ef/ohTadwQAqyBlVzOmvrmzZyubphpV9zkaZcx5Fuivw==",
+      "dependencies": {
+        "ace-builds": "^1.4.13",
+        "resize-observer-polyfill": "^1.5.1",
+        "vue": "^3.2.26"
+      }
+    },
     "node_modules/vuex": {
       "version": "4.0.2",
       "resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.0.2.tgz",
@@ -13264,6 +13285,11 @@
         "negotiator": "0.6.3"
       }
     },
+    "ace-builds": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmmirror.com/ace-builds/-/ace-builds-1.9.5.tgz",
+      "integrity": "sha512-6iVEUPfqiKIGKsA63InrUhRRASmfuGnJCUBzkz/pL1BCPPEjasBp6fBA7mj4ovihICouopYYZaAKYhg6zypAwg=="
+    },
     "acorn": {
       "version": "8.8.0",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.8.0.tgz",
@@ -17734,6 +17760,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz",
@@ -18823,6 +18854,16 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue3-ace-editor": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmmirror.com/vue3-ace-editor/-/vue3-ace-editor-2.2.2.tgz",
+      "integrity": "sha512-fZ6OWosbU+odLrtrcGC/536QjCigujYJB0Hf6/tBp+ef/ohTadwQAqyBlVzOmvrmzZyubphpV9zkaZcx5Fuivw==",
+      "requires": {
+        "ace-builds": "^1.4.13",
+        "resize-observer-polyfill": "^1.5.1",
+        "vue": "^3.2.26"
+      }
+    },
     "vuex": {
       "version": "4.0.2",
       "resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.0.2.tgz",
diff --git a/web/package.json b/web/package.json
index 4202131..a43beef 100644
--- a/web/package.json
+++ b/web/package.json
@@ -14,6 +14,7 @@
     "jquery": "^3.6.0",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",
+    "vue3-ace-editor": "^2.2.2",
     "vuex": "^4.0.0"
   },
   "devDependencies": {
diff --git a/web/public/favicon.ico b/web/public/favicon.ico
index df36fcf..6432bdc 100644
Binary files a/web/public/favicon.ico and b/web/public/favicon.ico differ
diff --git a/web/public/favicon2.ico b/web/public/favicon2.ico
new file mode 100644
index 0000000..92227cf
Binary files /dev/null and b/web/public/favicon2.ico differ
diff --git a/web/src/App.vue b/web/src/App.vue
index 411da1f..7c28790 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,13 +1,13 @@
 <template>
   <NavBar/>
-<router-view/>
+<router-view></router-view>
 </template>
 
 
 <script>
 import  NavBar  from './components/NavBar.vue';
 import "bootstrap/dist/css/bootstrap.min.css";
-import "bootstrap/dist/js/bootstrap.min.js";
+import "bootstrap/dist/js/bootstrap.js";
 
 export default {
   components: { NavBar },
diff --git a/web/src/components/ContentField.vue b/web/src/components/ContentField.vue
index 1e446ec..b38e466 100644
--- a/web/src/components/ContentField.vue
+++ b/web/src/components/ContentField.vue
@@ -14,7 +14,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 div.content-field {
     margin-top: 20px ;
 }
diff --git a/web/src/components/NavBar.vue b/web/src/components/NavBar.vue
index 3327216..79fa5c4 100644
--- a/web/src/components/NavBar.vue
+++ b/web/src/components/NavBar.vue
@@ -2,27 +2,23 @@
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
   <div class="container">
     <router-link class='navbar-brand'  :to="{name:'home'}">King Of Bots</router-link>
-    <!-- <a class="navbar-brand" href="#">King Of Bots</a> -->
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
+
     <div class="collapse navbar-collapse" id="navbarText">
-     
       <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        
         <li class="nav-item">
-          <!-- <a class="nav-link active" aria-current="page" href="/pk/">对战</a> -->
           <!-- router-link单页面 -->
-
           <router-link :class="route_name == 'pk_index' ? 'nav-link active' : 'nav-link' " :to="{name:'pk_index'}">PK</router-link>
         </li>
+
         <li class="nav-item">
-          <!-- <a class="nav-link" href="/record/">对局列表</a> -->
           <router-link :class="route_name == 'record_index' ? 'nav-link active' : 'nav-link' " :to="{name:'record_index'}">对局列表</router-link>
         </li>
+       
         <li class="nav-item">
-          <!-- <a class="nav-link" href="/ranklist/">排行榜</a> -->
           <router-link :class="route_name == 'ranklist_index' ? 'nav-link active' : 'nav-link' " :to="{name:'ranklist_index'}">排行榜</router-link>
         </li>
+      
       </ul>
 
       <ul class="navbar-nav" v-if="$store.state.user.is_login">
@@ -30,22 +26,26 @@
             <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
             {{$store.state.user.username}}
             </a>
-            <ul class="dropdown-menu" aria-labelledby="navbarDropdown"  style="margin:0">
-                <router-link class="dropdown-item" :to="{name:'user_bot_index'}">我的Bots</router-link>                
+             
+            <ul class="dropdown-menu" aria-labelledby="navbarDropdown" style="margin:0">
+                <li>
+                  <router-link class="dropdown-item" :to="{name:'user_bot_index'}">我的Bots</router-link>
+                </li>
                 <li><hr class="dropdown-divider"></li>
                 <li><a class="dropdown-item" @click="logout" href="#">退出</a></li>
             </ul>
         </li>
       </ul>
+
       <ul class="navbar-nav" v-else-if="!$store.state.user.pulling_info">
         <li class="nav-item">
-            <router-link class="nav-link" :to="{name:'user_account_login'}" role="button"  aria-expanded="false">
+            <router-link class="nav-link" :to="{name:'user_account_login'}" role="button">
             登录
             </router-link>
         </li>
 
         <li class="nav-item">
-            <router-link class="nav-link" :to="{name:'user_account_register'}" href="#" role="button"  aria-expanded="false">
+            <router-link class="nav-link" :to="{name:'user_account_register'}"  role="button">
             注册
             </router-link>
         </li>
diff --git a/web/src/views/user/account/copy.vue b/web/src/views/user/account/copy.vue
index b3a80e0..8d8142c 100644
--- a/web/src/views/user/account/copy.vue
+++ b/web/src/views/user/account/copy.vue
@@ -1,3 +1,417 @@
+
+        // const add_bot = () =>{
+        //     botadd.error_message="",
+            
+        //     $.ajax({
+        //         url:"http://localhost:3000/user/bot/add/",
+        //         type: "POST",
+        //         data:{
+        //             title:botadd.title,
+        //             description:botadd.description,
+        //             content:botadd.content,
+        //         },
+        //         headers:{
+        //             Authorization:"Bearer " + store.state.user.token,
+        //         },
+        //         success(resp){
+        //             if(resp.error_message === "success"){
+        //                 botadd.title = "",
+        //                 botadd.description = "",
+        //                 botadd.content = "",
+        //                 Modal.getInstance("#add-bot-btn").hide();
+        //                 refresh_bots();
+        //             } else {
+        //                 botadd.error_message = resp.error_message;
+        //             }
+                    
+        //         }
+
+        //     })
+            
+
+        // }
+
+
+        return {
+            bots,
+            botadd,
+            add_bot,
+        }
+        // //bot add
+        // $.ajax({
+        // url:"http://localhost:3000/user/bot/add/",
+        // type:"post",
+        // data:{
+        //     title:"My title ",
+        //     description:"My description ",
+        //     content:"My content ",
+        // },
+        // headers:{
+        //     Authorization:"Bearer " + store.state.user.token,
+        // },
+        // success(resp){
+        //     console.log(resp);
+        // },
+        // errror(resp){
+        //     console.log(resp);
+        // }
+        // });
+
+
+        // //bot remove
+        // $.ajax({
+        // url:"http://localhost:3000/user/bot/remove/",
+        // type:"post",
+        // data:{
+        //     bot_id : 5,
+        // },
+        // headers:{
+        //     Authorization:"Bearer " + store.state.user.token,
+        // },
+        // success(resp){
+        //     console.log(resp);
+        // },
+        // errror(resp){
+        //     console.log(resp);
+        // }
+        // });
+
+
+        // //bot update
+        // $.ajax({
+        // url:"http://localhost:3000/user/bot/update/",
+        // type:"post",
+        // data:{
+        //     bot_id : 8,
+        //     title:"new title",
+        //     description:"new description",
+        //     content:"new content",
+        // },
+        // headers:{
+        //     Authorization:"Bearer " + store.state.user.token,
+        // },
+        // success(resp){
+        //     console.log(resp);
+        // },
+        // errror(resp){
+        //     console.log(resp);
+        // }
+        // });
+
+
+
+
+
+
+
+
+
+
+
+
+
+<template>
+    <div class="container">
+        <div class="row">
+
+            <div class="col-3">
+                <div class="card" style="margin-top:20px;">
+                    <div class="card-body">
+                        <img :src="$store.state.user.photo" alt="头像无法显示~" style="width:100%; border-radius:150px">        
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-9">
+                <div class="card" style="margin-top:20px;">
+                    
+                    <div class="card-header">
+                        <span style="font-size:130%">我的Bot</span>
+                        <button type="button" class="btn btn-info float-end"  data-bs-toggle="modal" data-bs-target="#add-bot-btn">创建</button>
+                    </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">
+                                    <th>{{bot.title}}</th>
+                                    <th>{{bot.createtime}}</th>
+                                    <th>
+                                        <button type="button" class="btn btn-secondary">修改</button>
+                                        <button type="button" class="btn btn-danger" style="margin-left:20px">删除</button>
+                                    </th>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+    
+    <!-- Modal -->
+    <div class="modal fade" id="add-bot-btn" tabindex="-1">
+    <div class="modal-dialog  modal-xl">
+        <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">
+            <div class="mb-3">
+                <label for="add-bot-title" class="form-label">名称</label>
+                <input v-model="botadd.title" type="text" class="form-control" id="add-bot-title" placeholder="请输入Bot名称">
+            </div>
+            <div class="mb-3">
+                <label for="add-bot-description" class="form-label">简介</label>
+                <textarea v-model="botadd.description" type="text" class="form-control" id="add-bot-description" rows="3" placeholder="请输入Bot代码"></textarea>
+            </div>
+            <div class="mb-3">
+                <label for="add-bot-code" class="form-label">代码</label>
+                <textarea v-model="botadd.content" type="text" class="form-control" id="add-bot-code" rows="7" placeholder="请输入Bot代码"></textarea>
+            </div>
+        </div>
+        <div class="modal-footer">
+            <div class="error-message">{{botadd.error_message}}</div>
+            <button type="button" class="btn btn-secondary"  @click="add_bot">创建</button>
+            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">取消</button>
+        </div>
+        </div>
+    </div>
+    </div>
+
+</template>
+
+<script>
+import { ref , reactive } from "vue"
+import $ from "jquery"
+import { useStore } from "vuex"
+import { Modal } from 'bootstrap/dist/js/bootstrap'
+
+export default {
+    setup(){
+        
+        const store = useStore();
+
+        let bots = ref([]);
+        const botadd = reactive({
+            title:"",
+            description:"",
+            content:"",
+            error_message:"",
+        })
+        const refresh_bots = ( ) =>{
+            $.ajax({
+                url:"http://localhost:3000/user/bot/getlist/",
+                type:"get",
+                headers:{
+                  Authorization:"Bearer " + store.state.user.token,
+                },
+                success(resp){
+                    console.log(resp);
+                    bots.value = resp ;
+                },
+                errror(resp){
+                    console.log(resp);
+                }
+            })
+        }
+        
+        refresh_bots();
+
+        const add_bot = () => {
+            botadd.error_message = "";
+            $.ajax({
+                url: "http://127.0.0.1:3000/user/bot/add/",
+                type: "post",
+                data: {
+                    title: botadd.title,
+                    description: botadd.description,
+                    content: botadd.content,
+                },
+                headers: {
+                    Authorization: "Bearer " + store.state.user.token,
+                },
+                success(resp) {
+                    if (resp.error_message === "success") {
+                        botadd.title = "";
+                        botadd.description = "";
+                        botadd.content = "";
+                        Modal.getInstance("#add-bot-btn").hide();
+                        refresh_bots();
+                    } else {
+                        botadd.error_message = resp.error_message;
+                    }
+                }
+            })
+        }
+
+        // const add_bot = () =>{
+        //     botadd.error_message="",
+            
+        //     $.ajax({
+        //         url:"http://localhost:3000/user/bot/add/",
+        //         type: "POST",
+        //         data:{
+        //             title:botadd.title,
+        //             description:botadd.description,
+        //             content:botadd.content,
+        //         },
+        //         headers:{
+        //             Authorization:"Bearer " + store.state.user.token,
+        //         },
+        //         success(resp){
+        //             if(resp.error_message === "success"){
+        //                 botadd.title = "",
+        //                 botadd.description = "",
+        //                 botadd.content = "",
+        //                 Modal.getInstance("#add-bot-btn").hide();
+        //                 refresh_bots();
+        //             } else {
+        //                 botadd.error_message = resp.error_message;
+        //             }
+                    
+        //         }
+
+        //     })
+            
+
+        // }
+
+
+        return {
+            bots,
+            botadd,
+            add_bot,
+        }
+        // //bot add
+        // $.ajax({
+        // url:"http://localhost:3000/user/bot/add/",
+        // type:"post",
+        // data:{
+        //     title:"My title ",
+        //     description:"My description ",
+        //     content:"My content ",
+        // },
+        // headers:{
+        //     Authorization:"Bearer " + store.state.user.token,
+        // },
+        // success(resp){
+        //     console.log(resp);
+        // },
+        // errror(resp){
+        //     console.log(resp);
+        // }
+        // });
+
+
+        // //bot remove
+        // $.ajax({
+        // url:"http://localhost:3000/user/bot/remove/",
+        // type:"post",
+        // data:{
+        //     bot_id : 5,
+        // },
+        // headers:{
+        //     Authorization:"Bearer " + store.state.user.token,
+        // },
+        // success(resp){
+        //     console.log(resp);
+        // },
+        // errror(resp){
+        //     console.log(resp);
+        // }
+        // });
+
+
+        // //bot update
+        // $.ajax({
+        // url:"http://localhost:3000/user/bot/update/",
+        // type:"post",
+        // data:{
+        //     bot_id : 8,
+        //     title:"new title",
+        //     description:"new description",
+        //     content:"new content",
+        // },
+        // headers:{
+        //     Authorization:"Bearer " + store.state.user.token,
+        // },
+        // success(resp){
+        //     console.log(resp);
+        // },
+        // errror(resp){
+        //     console.log(resp);
+        // }
+        // });
+
+
+    }
+
+}
+</script>
+
+<style scoped>
+div.error-message {
+    color: red;
+}
+</style>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 <template>
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
   <div class="container">
@@ -25,20 +439,371 @@
         </li>
       </ul>
 
-      <ul class="navbar-nav">
+      <ul class="navbar-nav" v-if="$store.state.user.is_login">
         <li class="nav-item dropdown">
-            
             <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-            {{this.$store.state.user.is_login}}
+            {{$store.state.user.username}}
             </a>
             <ul class="dropdown-menu" aria-labelledby="navbarDropdown"  style="margin:0">
                 <router-link class="dropdown-item" :to="{name:'user_bot_index'}">我的Bots</router-link>                
                 <li><hr class="dropdown-divider"></li>
-                <li><a class="dropdown-item" href="#">退出</a></li>
+                <li><a class="dropdown-item" @click="logout" href="#">退出</a></li>
             </ul>
         </li>
       </ul>
+      <ul class="navbar-nav" v-else-if="!$store.state.user.pulling_info">
+        <li class="nav-item">
+            <router-link class="nav-link" :to="{name:'user_account_login'}" role="button"  aria-expanded="false">
+            登录
+            </router-link>
+        </li>
+
+        <li class="nav-item">
+            <router-link class="nav-link" :to="{name:'user_account_register'}"  role="button"  aria-expanded="false">
+            注册
+            </router-link>
+        </li>
+      </ul>
+    
+    </div>
+  </div>
+</nav>
+</template>
+
+<script>
+//坑：注意 {}
+import { useRoute } from "vue-router";
+import { computed } from "vue";
+import { useStore } from "vuex";
+
+export default {
+
+    setup(){
+        const route = useRoute();
+        const store = useStore();
+
+        //实时计算  路由名称
+        let route_name = computed( () => route.name );
+        
+        const logout = () => {
+          store.dispatch("logout");
+        }
+
+        return {
+            route_name,
+            logout,
+        }
+    }
+
+}
+</script>
+
+<style scoped>
+
+</style>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<template>
+    <div class="container">
+        <div class="row">
+
+            <div class="col-3">
+                <div class="card" style="margin-top:20px;">
+                    <div class="card-body">
+                        <img :src="$store.state.user.photo" alt="头像无法显示~" style="width:100%;">        
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-9">
+                <div class="card" style="margin-top:20px;">
+                    
+                    <div class="card-header">
+                        <span style="font-size:130%">我的Bot</span>
+                        <button type="button" class="btn btn-info float-end" data-bs-toggle="modal" data-bs-target="#add-bot-btn">创建</button>
+                    
+                        <!-- Modal -->
+                        <!-- aria-labelledby="exampleModalLabel" aria-hidden="true" -->
+                        <div class="modal fade" id="add-bot-btn" tabindex="-1">
+                        <div class="modal-dialog modal-xl">
+                            <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">
+                                <div class="mb-3">
+                                    <label for="add-bot-title" class="form-label">名称</label>
+                                    <input v-model="botadd.title" type="text" class="form-control" id="add-bot-title" placeholder="请输入Bot名称">
+                                </div>
+                                <div class="mb-3">
+                                    <label for="add-bot-description" class="form-label">简介</label>
+                                    <textarea v-model="botadd.description" class="form-control" rows="3" id="add-bot-description"  placeholder="请输入Bot简介"></textarea>
+                                </div>
+                                <div class="mb-3">
+                                    <label for="add-bot-code" class="form-label">代码</label>
+                                    <textarea v-model="botadd.content"  class="form-control" rows="7" id="add-bot-code" placeholder="请输入Bot代码"></textarea>
+                                </div>
+                            </div>
+                            <div class="modal-footer">
+                                <div class="error-message">{{botadd.error_message}}</div>
+                                <button type="button" class="btn btn-primary" @click="add_bot">创建</button>
+                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</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">
+                                    <th>{{bot.title}}</th>
+                                    <th>{{bot.createtime}}</th>
+                                    <th>
+                                        <button type="button" class="btn btn-secondary" style="margin-right:10px">修改</button>
+                                        <button type="button" class="btn btn-danger" >删除</button>
+                                    </th>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
     
+
+</template>
+
+<script>
+import { ref , reactive } from "vue"
+import $ from "jquery"
+import { useStore } from "vuex"
+import { Modal } from "bootstrap/dist/js/bootstrap.js"
+
+export default {
+    setup(){
+        
+        const store = useStore();
+
+        let bots = ref([]);
+        const botadd = reactive({
+            title:"",
+            description:"",
+            content:"",
+            error_message:"",
+        })
+
+        const refresh_bots = () =>{
+            $.ajax({
+                url:"http://localhost:3000/user/bot/getlist/",
+                type:"get",
+                headers:{
+                  Authorization:"Bearer " + store.state.user.token,
+                },
+                success(resp){
+                    bots.value = resp ;
+                }
+            })
+        }
+        
+        refresh_bots();
+
+        const add_bot = () => {
+            botadd.error_message = "";
+            $.ajax({
+                url: "http://127.0.0.1:3000/user/bot/add/",
+                type: "post",
+                data: {
+                    title: botadd.title,
+                    description: botadd.description,
+                    content: botadd.content,
+                },
+                headers: {
+                    Authorization: "Bearer " + store.state.user.token,
+                },
+                success(resp) {
+                    if (resp.error_message === "success") {
+                        botadd.title = "";
+                        botadd.description = "";
+                        botadd.content = "";
+                        Modal.getInstance("#add-bot-btn").hide();
+                        refresh_bots(); 
+                    } else {
+                        botadd.error_message = resp.error_message;
+                    }
+                }
+            })
+        }
+
+        return {
+            bots,
+            botadd,
+            add_bot,
+        }
+    }
+
+
+
+}
+</script>
+
+<style scoped>
+div.error-message {
+    color: red;
+}
+</style>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<template>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+  <div class="container">
+    <router-link class='navbar-brand'  :to="{name:'home'}">King Of Bots</router-link>
+
+    <div class="collapse navbar-collapse" id="navbarText">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        
+        <li class="nav-item">
+          <!-- router-link单页面 -->
+          <router-link :class="route_name == 'pk_index' ? 'nav-link active' : 'nav-link' " :to="{name:'pk_index'}">PK</router-link>
+        </li>
+
+        <li class="nav-item">
+          <router-link :class="route_name == 'record_index' ? 'nav-link active' : 'nav-link' " :to="{name:'record_index'}">对局列表</router-link>
+        </li>
+       
+        <li class="nav-item">
+          <router-link :class="route_name == 'ranklist_index' ? 'nav-link active' : 'nav-link' " :to="{name:'ranklist_index'}">排行榜</router-link>
+        </li>
+      
+      </ul>
+
+      <ul class="navbar-nav" v-if="$store.state.user.is_login">
+        <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            {{$store.state.user.username}}
+            </a>
+             
+            <ul class="dropdown-menu" aria-labelledby="navbarDropdown" style="margin:0">
+                <li>
+                  <router-link class="dropdown-item" :to="{name:'user_bot_index'}">我的Bots</router-link>
+                </li>
+                <li><hr class="dropdown-divider"></li>
+                <li><a class="dropdown-item" @click="logout" href="#">退出</a></li>
+            </ul>
+        </li>
+      </ul>
+
+      <ul class="navbar-nav" v-else-if="!$store.state.user.pulling_info">
+        <li class="nav-item">
+            <router-link class="nav-link" :to="{name:'user_account_login'}" role="button">
+            登录
+            </router-link>
+        </li>
+
+        <li class="nav-item">
+            <router-link class="nav-link" :to="{name:'user_account_register'}"  role="button">
+            注册
+            </router-link>
+        </li>
+      </ul>
     
     </div>
   </div>
@@ -49,16 +814,24 @@
 //坑：注意 {}
 import { useRoute } from "vue-router";
 import { computed } from "vue";
+import { useStore } from "vuex";
 
 export default {
 
-    //不太理解
     setup(){
         const route = useRoute();
+        const store = useStore();
+
         //实时计算  路由名称
         let route_name = computed( () => route.name );
+        
+        const logout = () => {
+          store.dispatch("logout");
+        }
+
         return {
-            route_name
+            route_name,
+            logout,
         }
     }
 
@@ -67,4 +840,41 @@ export default {
 
 <style scoped>
 
+</style>
+
+
+
+
+
+
+
+
+
+
+
+
+<template>
+  <NavBar/>
+<router-view/>
+</template>
+
+
+<script>
+import  NavBar  from './components/NavBar.vue';
+import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap/dist/js/bootstrap.min.js";
+
+export default {
+  components: { NavBar },
+  name:"app",
+}
+</script>
+
+
+
+<style>
+body {
+  background-image: url("@/assets/images/background.png");
+  background-size: cover;
+}
 </style>
\ No newline at end of file
diff --git a/web/src/views/user/bot/UserBotIndexView.vue b/web/src/views/user/bot/UserBotIndexView.vue
index a2221b9..f178b78 100644
--- a/web/src/views/user/bot/UserBotIndexView.vue
+++ b/web/src/views/user/bot/UserBotIndexView.vue
@@ -1,99 +1,272 @@
 <template>
-    <ContentField>
-        我的Bots
-    </ContentField>
+    <div class="container">
+        <div class="row">
+
+            <div class="col-3">
+                <div class="card" style="margin-top:20px;">
+                    <div class="card-body">
+                        <img :src="$store.state.user.photo" alt="头像无法显示~" style="width:100%;">        
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-9">
+                <div class="card" style="margin-top:20px;">
+                    
+                    <div class="card-header">
+                        <span style="font-size:130%">我的Bot</span>
+                        <button type="button" class="btn btn-info float-end" data-bs-toggle="modal" data-bs-target="#add-bot-btn">创建</button>
+                    
+                        <!-- Modal -->
+                        <div class="modal fade" id="add-bot-btn" tabindex="-1">
+                        <div class="modal-dialog modal-xl">
+                            <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">
+                                <div class="mb-3">
+                                    <label for="add-bot-title" class="form-label">名称</label>
+                                    <input v-model="botadd.title" type="text" class="form-control" id="add-bot-title" placeholder="请输入Bot名称">
+                                </div>
+                                <div class="mb-3">
+                                    <label for="add-bot-description" class="form-label">简介</label>
+                                    <textarea v-model="botadd.description" class="form-control" rows="3" id="add-bot-description"  placeholder="请输入Bot简介"></textarea>
+                                </div>
+                                <div class="mb-3">
+                                    <label for="add-bot-code" class="form-label">代码</label>
+                                        <VAceEditor
+                                        v-model:value="botadd.content"
+                                        @init="editorInit"
+                                        lang="c_cpp"
+                                        theme="textmate"
+                                        style="height: 300px" />
+                                </div>
+                            </div>
+                            <div class="modal-footer">
+                                <div class="error-message">{{botadd.error_message}}</div>
+                                <button type="button" class="btn btn-primary" @click="add_bot">创建</button>
+                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</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">
+                                    <th>{{bot.title}}</th>
+                                    <th>{{bot.createtime}}</th>
+                                    <th>
+                                        <button type="button" class="btn btn-secondary" style="margin-right:10px"  data-bs-toggle="modal" :data-bs-target="'#update-bot-modal-'+bot.id">修改</button>
+                                        <button type="button" class="btn btn-danger" @click="remove_bot(bot)">删除</button>
+                                    </th>
+
+                                    <!-- Modal -->
+                                    <div class="modal fade" :id="'update-bot-modal-'+bot.id" tabindex="-1">
+                                    <div class="modal-dialog modal-xl">
+                                        <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">
+                                            <div class="mb-3">
+                                                <label for="add-bot-title" class="form-label">名称</label>
+                                                <input v-model="bot.title" type="text" class="form-control" id="add-bot-title" placeholder="请输入Bot名称">
+                                            </div>
+                                            <div class="mb-3">
+                                                <label for="add-bot-description" class="form-label">简介</label>
+                                                <textarea v-model="bot.description" class="form-control" rows="3" id="add-bot-description"  placeholder="请输入Bot简介"></textarea>
+                                            </div>
+                                            <div class="mb-3">
+                                                <label for="add-bot-code" class="form-label">代码</label>
+                                                    <VAceEditor
+                                                    v-model:value="bot.content"
+                                                    @init="editorInit"
+                                                    lang="c_cpp"
+                                                    theme="textmate"
+                                                    style="height: 300px" />
+                                            </div>
+                                        </div>
+                                        <div class="modal-footer">
+                                            <div class="error-message">{{bot.error_message}}</div>
+                                            <button type="button" class="btn btn-primary" @click="update_bot(bot)">确定</button>
+                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
+                                        </div>
+                                        </div>
+                                    </div>
+                                    </div>
+
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+    
+
 </template>
 
 <script>
-import ContentField from "@/components/ContentField"
+import { ref , reactive } from "vue"
 import $ from "jquery"
-import { useStore } from "vuex";
+import { useStore } from "vuex"
+import { Modal } from "bootstrap/dist/js/bootstrap.js"
+//代码区域需要
+import { VAceEditor } from 'vue3-ace-editor';
+import ace from 'ace-builds';
+
 
 export default {
     components:{
-        ContentField
+        VAceEditor,
     },
     setup(){
+        //配置编译器
+        ace.config.set(
+            "basePath", 
+            "https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/")
+        
         const store = useStore();
-        // //bot add
-        // $.ajax({
-        // url:"http://localhost:3000/user/bot/add/",
-        // type:"post",
-        // data:{
-        //     title:"My title ",
-        //     description:"My description ",
-        //     content:"My content ",
-        // },
-        // headers:{
-        //     Authorization:"Bearer " + store.state.user.token,
-        // },
-        // success(resp){
-        //     console.log(resp);
-        // },
-        // errror(resp){
-        //     console.log(resp);
-        // }
-        // });
-
-
-        // //bot remove
-        // $.ajax({
-        // url:"http://localhost:3000/user/bot/remove/",
-        // type:"post",
-        // data:{
-        //     bot_id : 5,
-        // },
-        // headers:{
-        //     Authorization:"Bearer " + store.state.user.token,
-        // },
-        // success(resp){
-        //     console.log(resp);
-        // },
-        // errror(resp){
-        //     console.log(resp);
-        // }
-        // });
-
-
-        // //bot update
-        // $.ajax({
-        // url:"http://localhost:3000/user/bot/update/",
-        // type:"post",
-        // data:{
-        //     bot_id : 8,
-        //     title:"new title",
-        //     description:"new description",
-        //     content:"new content",
-        // },
-        // headers:{
-        //     Authorization:"Bearer " + store.state.user.token,
-        // },
-        // success(resp){
-        //     console.log(resp);
-        // },
-        // errror(resp){
-        //     console.log(resp);
-        // }
-        // });
-
-        // //bot getlist
-        // $.ajax({
-        // url:"http://localhost:3000/user/bot/getlist/",
-        // type:"get",
-        // headers:{
-        //     Authorization:"Bearer " + store.state.user.token,
-        // },
-        // success(resp){
-        //     console.log(resp);
-        // },
-        // errror(resp){
-        //     console.log(resp);
-        // }
-        // });
+
+        let bots = ref([]);
+        const botadd = reactive({
+            title:"",
+            description:"",
+            content:"",
+            error_message:"",
+        })
+
+        //更新所有bot
+        const refresh_bots = () =>{
+            $.ajax({
+                url:"http://localhost:3000/user/bot/getlist/",
+                type:"get",
+                headers:{
+                  Authorization:"Bearer " + store.state.user.token,
+                },
+                success(resp){
+                    bots.value = resp ;
+                }
+            })
+        }
+        
+        refresh_bots();
+
+        //添加一个bot
+        const add_bot = () => {
+            botadd.error_message = "";
+            $.ajax({
+                url: "http://127.0.0.1:3000/user/bot/add/",
+                type: "post",
+                data: {
+                    title: botadd.title,
+                    description: botadd.description,
+                    content: botadd.content,
+                },
+                headers: {
+                    Authorization: "Bearer " + store.state.user.token,
+                },
+                success(resp) {
+                    if (resp.error_message === "success") {
+                        botadd.title = "";
+                        botadd.description = "";
+                        botadd.content = "";
+                        Modal.getInstance("#add-bot-btn").hide();//创建Bot后关闭Modal
+                        refresh_bots(); //增删改-->都需要更新
+                    } else {
+                        botadd.error_message = resp.error_message;
+                    }
+                }
+            })
+        }
+
+        //删除一个bot
+        const remove_bot = (bot) => {
+            $.ajax({
+                url: "http://127.0.0.1:3000/user/bot/remove/",
+                type: "post",
+                data: {
+                    bot_id:bot.id,
+                },
+                headers: {
+                    Authorization: "Bearer " + store.state.user.token,
+                },
+                success(resp) {
+                    if (resp.error_message === "success") {
+                        refresh_bots(); //增删改-->都需要更新
+                    }
+                }
+            })
+        }
+
+
+        //修改一个bot
+        const update_bot = (bot) => {
+            bot.error_message = "";
+            $.ajax({
+                url: "http://127.0.0.1:3000/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_message === "success") {
+                        Modal.getInstance("#update-bot-modal-"+bot.id).hide();//创建Bot后关闭Modal
+                        refresh_bots(); //增删改-->都需要更新
+                    } else {
+                        bot.error_message = resp.error_message;
+                    }
+                }
+            })
+        }
+
+
+        return {
+            bots,
+            botadd,
+            add_bot,
+            remove_bot,
+            update_bot,
+        }
     }
+
+
+
 }
 </script>
 
-<style>
+<style scoped>
+div.error-message {
+    color: red;
+}
+</style>
+
+
 
-</style>
\ No newline at end of file