diff --git a/web/package-lock.json b/web/package-lock.json
index 7a0f7e2..7966c8a 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,6 +8,7 @@
       "name": "web",
       "version": "0.1.0",
       "dependencies": {
+        "@floating-ui/vue": "^0.2.0",
         "bootstrap": "^5.2.3",
         "core-js": "^3.8.3",
         "jquery": "^3.6.3",
@@ -1773,6 +1774,59 @@
         "node": ">=10"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.2.0.tgz",
+      "integrity": "sha512-GHUXPEhMEmTpnpIfesFA2KAoMJPb1SPQw964tToQwt+BbGXdhqTCWT1rOb0VURGylsxsYxiGMnseJ3IlclVpVA=="
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.2.0.tgz",
+      "integrity": "sha512-QXzg57o1cjLz3cGETzKXjI3kx1xyS49DW9l7kV2jw2c8Yftd434t2hllX0sVGn2Q8MtcW/4pNm8bfE1/4n6mng==",
+      "dependencies": {
+        "@floating-ui/core": "^1.2.0"
+      }
+    },
+    "node_modules/@floating-ui/vue": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/vue/-/vue-0.2.0.tgz",
+      "integrity": "sha512-2FjxjcXIbt5aT3KncAAlnPV1CanjA5thmTH+JZtvD6g/6sneexGKI5mJA8ru8c6+1CQX8dUBzh7Te/afoALZYA==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.1.0",
+        "vue-demi": "^0.13.11"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^2.0.0 || >=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@floating-ui/vue/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -1947,6 +2001,12 @@
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
       "dev": true
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "peer": true
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz",
diff --git a/web/package.json b/web/package.json
index 59684d2..681ca46 100644
--- a/web/package.json
+++ b/web/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@floating-ui/vue": "^0.2.0",
     "bootstrap": "^5.2.3",
     "core-js": "^3.8.3",
     "jquery": "^3.6.3",
diff --git a/web/src/App.vue b/web/src/App.vue
index f45a698..f73ff78 100644
--- a/web/src/App.vue
+++ b/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>
diff --git a/web/src/components/ContentBase.vue b/web/src/components/ContentBase.vue
new file mode 100644
index 0000000..26422a5
--- /dev/null
+++ b/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>
diff --git a/web/src/components/NavBar.vue b/web/src/components/NavBar.vue
new file mode 100644
index 0000000..f7da1fd
--- /dev/null
+++ b/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>
diff --git a/web/src/router/index.js b/web/src/router/index.js
index 09802f4..844762d 100644
--- a/web/src/router/index.js
+++ b/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
\ No newline at end of file
diff --git a/web/src/views/error/NotFound.vue b/web/src/views/error/NotFound.vue
new file mode 100644
index 0000000..5e3997c
--- /dev/null
+++ b/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>
diff --git a/web/src/views/pk/PkIndexView.vue b/web/src/views/pk/PkIndexView.vue
new file mode 100644
index 0000000..bb20eee
--- /dev/null
+++ b/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>
diff --git a/web/src/views/ranklist/RanklistIndexView.vue b/web/src/views/ranklist/RanklistIndexView.vue
new file mode 100644
index 0000000..9d51d53
--- /dev/null
+++ b/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>
diff --git a/web/src/views/record/RecordIndexView.vue b/web/src/views/record/RecordIndexView.vue
new file mode 100644
index 0000000..47a3f93
--- /dev/null
+++ b/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>
diff --git a/web/src/views/user/bot/UserBotIndexView.vue b/web/src/views/user/bot/UserBotIndexView.vue
new file mode 100644
index 0000000..672e170
--- /dev/null
+++ b/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>