完成web端导航栏

web/src/App.vue

@@ -1,34 +1,18 @@
 <template>
-  <div>Bot昵称：{{ bot_name }}</div>
-  <div>Bot战力：{{ bot_rating }}</div>
-  <router-view />
+  <NavBar />
+  <!-- router-view 定义在 router 文件夹的 index.js 中 -->
+  <router-view></router-view>
 </template>
 
 <script>
-import $ from "jquery";
-import { ref } from "vue";
+// 导入 NavBar 组件
+import NavBar from "./components/NavBar.vue";
+// 导入 BootStrap 的 css 和 js 依赖以同步 BootStrap 样式
+import "bootstrap/dist/css/bootstrap.css";
+import "bootstrap/dist/js/bootstrap";
 
 export default {
-  name: "App",
-  setup: () => {
-    let bot_name = ref("");
-    let bot_rating = ref("");
-
-    $.ajax({
-      url: "http://localhost:3000/pk/getbotinfo/",
-      type: "get",
-      success: (resp) => {
-        // console.log(resp);
-        bot_name.value = resp.name;
-        bot_rating.value = resp.rating;
-      },
-    });
-
-    return {
-      bot_name,
-      bot_rating,
-    };
-  },
+  components: { NavBar },
 };
 </script>
 <style>

web/src/components/ContentBase.vue

@@ -0,0 +1,22 @@
+<template>
+  <!-- container是一个自适应大小的容器 -->
+  <div class="container">
+    <!-- card 布局可以绘制框体 -->
+    <div class="card">
+      <div class="card-body">
+        <!-- slot 可以作为母版,将子组件嵌套在里面 -->
+        <!-- 子组件要填充的内容都会渲染到 slot 里面 -->
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script></script>
+
+<style>
+.container {
+  /* 到顶部距离 20px */
+  margin-top: 20px;
+}
+</style>

web/src/components/NavBar.vue

@@ -0,0 +1,76 @@
+<template>
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <div class="container">
+      <router-link class="navbar-brand" :to="{ name: 'home' }">King of Bot</router-link>
+      <div class="collapse navbar-collapse" id="navbarText">
+        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+          <li class="nav-item">
+            <!-- :class 是 v-bind:class 的简写 -->
+            <router-link
+              :class="route_name == 'pk_index' ? 'nav-link active' : 'nav-link'"
+              :to="{ name: 'pk_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>
+          <li class="nav-item">
+            <router-link
+              :class="route_name == 'record_index' ? 'nav-link active' : 'nav-link'"
+              :to="{ name: 'record_index' }"
+              >排行榜</router-link
+            >
+          </li>
+        </ul>
+        <ul class="navbar-nav">
+          <!-- 下拉菜单样式 -->
+          <li class="nav-item dropdown">
+            <a
+              class="nav-link dropdown-toggle"
+              href="#"
+              role="button"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              flykhan
+            </a>
+            <ul class="dropdown-menu">
+              <li>
+                <router-link class="dropdown-item" :to="{ name: 'user_bot_index' }"
+                  >我的Bot</router-link
+                >
+              </li>
+              <!-- 下拉菜单分割线 -->
+              <li><hr class="dropdown-divider" /></li>
+              <li><a class="dropdown-item" href="#">退出</a></li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script>
+import { useRoute } from "vue-router";
+import { computed } from "vue";
+
+export default {
+  setup() {
+    const route = useRoute();
+    // 用于判断当前选中的是哪个 nav-link 链接,结合上文操作将选中的 nav-link 改为 nav-link active 模式
+    let route_name = computed(() => route.name);
+
+    return {
+      route_name,
+    };
+  },
+};
+</script>
+
+<style></style>

web/src/router/index.js

@@ -1,7 +1,50 @@
 import { createRouter, createWebHistory } from 'vue-router'
+// 导入所有 view 页面
+import PkIndexView from '../views/pk/PkIndexView.vue'
+import RanklistIndexView from '../views/ranklist/RanklistIndexView.vue'
+import RecordIndexView from '../views/record/RecordIndexView.vue'
+import UserBotIndexView from '../views/user/bot/UserBotIndexView.vue'
+import NotFound from '../views/error/NotFound.vue'
 
 
+// 定义所有页面的 URL 路由
 const routes = [
+  {
+    path:'/',
+    name:'home',
+    // 重定向:将 home 重定向到 pk 页面
+    redirect:'/pk/'
+  },
+  {
+    path:'/pk/',
+    name:'pk_index',
+    component:PkIndexView
+  },
+  {
+    path:'/ranklist/',
+    name:'ranklist_index',
+    component:RanklistIndexView
+  },
+  {
+    path:'/record/',
+    name:'record_index',
+    component:RecordIndexView
+  },
+  {
+    path:'/user/bot/',
+    name:'user_bot_index',
+    component:UserBotIndexView
+  },
+  {
+    path:'/404/',
+    name:'404',
+    component:NotFound
+  },
+  {
+    // 正则匹配所有其他非法页面到 404
+    path:'/:catchAll(.*)',
+    redirect:'/404/'
+  }
 ]
 
 const router = createRouter({
@@ -9,4 +52,4 @@ const router = createRouter({
   routes
 })
 
-export default router
+export default router

web/src/views/error/NotFound.vue

@@ -0,0 +1,15 @@
+<template>
+  <ContentBase>404 Not Found</ContentBase>
+</template>
+
+<script>
+import ContentBase from "../../components/ContentBase.vue";
+
+export default {
+  components: {
+    ContentBase,
+  },
+};
+</script>
+
+<style scoped></style>

web/src/views/pk/PkIndexView.vue

@@ -0,0 +1,15 @@
+<template>
+  <ContentBase>对战</ContentBase>
+</template>
+
+<script>
+import ContentBase from "../../components/ContentBase.vue";
+
+export default {
+  components: {
+    ContentBase,
+  },
+};
+</script>
+
+<style scoped></style>

web/src/views/ranklist/RanklistIndexView.vue

@@ -0,0 +1,15 @@
+<template>
+  <ContentBase>对局列表</ContentBase>
+</template>
+
+<script>
+import ContentBase from "../../components/ContentBase.vue";
+
+export default {
+  components: {
+    ContentBase,
+  },
+};
+</script>
+
+<style scoped></style>

web/src/views/record/RecordIndexView.vue

@@ -0,0 +1,15 @@
+<template>
+  <ContentBase>排行榜</ContentBase>
+</template>
+
+<script>
+import ContentBase from "../../components/ContentBase.vue";
+
+export default {
+  components: {
+    ContentBase,
+  },
+};
+</script>
+
+<style scoped></style>

web/src/views/user/bot/UserBotIndexView.vue

@@ -0,0 +1,15 @@
+<template>
+  <ContentBase>我的Bot</ContentBase>
+</template>
+
+<script>
+import ContentBase from "../../../components/ContentBase.vue";
+
+export default {
+  components: {
+    ContentBase,
+  },
+};
+</script>
+
+<style scoped></style>