diff --git a/backend/mini.db b/backend/mini.db
index 75196f1..e2a2455 100644
Binary files a/backend/mini.db and b/backend/mini.db differ
diff --git a/backend/mini.db-shm b/backend/mini.db-shm
new file mode 100644
index 0000000..cd21bd9
Binary files /dev/null and b/backend/mini.db-shm differ
diff --git a/backend/mini.db-wal b/backend/mini.db-wal
new file mode 100644
index 0000000..2f38425
Binary files /dev/null and b/backend/mini.db-wal differ
diff --git a/backend/tests/test_case.py b/backend/tests/test_case.py
index bdd84e8..b676cb2 100644
--- a/backend/tests/test_case.py
+++ b/backend/tests/test_case.py
@@ -75,7 +75,7 @@ params = [
             meta={"icon": "TeamOutlined"},
             path="/system/user",
             type=1,
-            component="/system/user.vue",
+            component="/system/user/user.vue",
             pid=1,
             identifier=None,
             api="/user",
@@ -89,7 +89,7 @@ params = [
             meta={"icon": "UserOutlined"},
             path="/system/role",
             type=1,
-            component="/system/role.vue",
+            component="/system/role/role.vue",
             pid=1,
             identifier=None,
             api="/role",
@@ -103,7 +103,7 @@ params = [
             meta={"icon": "MenuOutlined"},
             path="/system/menu",
             type=1,
-            component="/system/menu.vue",
+            component="/system/menu/menu.vue",
             pid=1,
             identifier=None,
             api="/menu",
@@ -117,7 +117,7 @@ params = [
             meta={"icon": "DashboardOutlined"},
             path="/setting/about",
             type=1,
-            component="/setting/about.vue",
+            component="/setting/about/about.vue",
             pid=2,
             identifier=None,
             api="/about",
diff --git a/frontend/src/assets/img/fastapi.svg b/frontend/src/assets/img/fastapi.svg
new file mode 100644
index 0000000..cf7c0c7
--- /dev/null
+++ b/frontend/src/assets/img/fastapi.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 6.3499999 6.3499999"
+   height="6.3499999mm"
+   width="6.3499999mm">
+  <defs
+     id="defs2" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-87.539286,-84.426191)"
+     id="layer1">
+    <path
+       id="path815"
+       d="m 87.539286,84.426191 h 6.35 v 6.35 h -6.35 z"
+       style="fill:none;stroke-width:0.26458332" />
+    <path
+       style="stroke-width:0.26458332;fill:#ffffff"
+       id="path817"
+       d="m 90.714286,84.960649 c -1.457854,0 -2.640542,1.182688 -2.640542,2.640542 0,1.457854 1.182688,2.640542 2.640542,2.640542 1.457854,0 2.640542,-1.182688 2.640542,-2.640542 0,-1.457854 -1.182688,-2.640542 -2.640542,-2.640542 z m -0.137583,4.757209 v -1.656292 h -0.92075 l 1.322916,-2.577042 v 1.656292 h 0.886354 z" />
+  </g>
+</svg>
diff --git a/frontend/src/assets/img/logo.png b/frontend/src/assets/img/logo.png
deleted file mode 100644
index d22b489..0000000
Binary files a/frontend/src/assets/img/logo.png and /dev/null differ
diff --git a/frontend/src/assets/img/vite.svg b/frontend/src/assets/img/vite.svg
new file mode 100644
index 0000000..de4aedd
--- /dev/null
+++ b/frontend/src/assets/img/vite.svg
@@ -0,0 +1,15 @@
+<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
+<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#BD34FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/frontend/src/components/layout/sider-menu.vue b/frontend/src/components/layout/sider-menu.vue
index b0e0bf9..854e820 100644
--- a/frontend/src/components/layout/sider-menu.vue
+++ b/frontend/src/components/layout/sider-menu.vue
@@ -2,25 +2,32 @@
 import { useRouter } from "vue-router";
 import { userStore } from "@/stores/user";
 import { loadIconCpn } from "@/utils/loadCpn";
+import { ref } from "vue";
 
 const store = userStore();
+const router = useRouter();
+
+// 菜单点击事件
+const menuClick = (menu) => {
+  router.push(menu.path);
+};
 </script>
 
 <template>
   <div class="sider-menu">
     <div class="logo"></div>
-    <a-menu theme="dark" mode="inline">
+    <a-menu theme="dark" mode="inline" v-model:selectedKeys="store.selectKey">
       <template v-for="menu in store.userMenus" :key="menu.id">
         <!-- 0 目录 顶层菜单 -->
         <template v-if="menu.type === 0">
-          <a-sub-menu :key="`${menu.id}`">
+          <a-sub-menu :key="menu.id">
             <template #icon>
               <component :is="loadIconCpn(menu.meta.icon)"></component>
             </template>
             <template #title>{{ menu.name }}</template>
             <!-- 1 组件 子菜单项 -->
             <template v-for="sub in menu.children" :key="sub.id">
-              <a-menu-item>
+              <a-menu-item @click="menuClick(sub)">
                 <template #icon>
                   <component :is="loadIconCpn(sub.meta.icon)"></component>
                 </template>
@@ -36,6 +43,7 @@ const store = userStore();
 
 <style scoped>
 .logo {
+  display: flex;
   height: 32px;
   background: rgba(255, 255, 255, 0.3);
   margin: 16px;
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 668b3c3..03ac7bd 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -4,6 +4,8 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./stores";
 
+import { userStore } from "./stores/user";
+
 import "normalize.css";
 import "@/assets/css/base.css";
 
@@ -12,6 +14,8 @@ import "ant-design-vue/dist/antd.css";
 const app = createApp(App);
 
 app.use(store);
+
+userStore().loadRoleRouter();
 app.use(router);
 
 app.mount("#app");
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index cf721ef..e2f563c 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import { message } from "ant-design-vue";
 import { userStore } from "@/stores/user";
+import { loadRouter } from "@/utils/loadCpn";
 
 const routes = [
   {
@@ -10,12 +11,17 @@ const routes = [
   {
     path: "/login",
     meta: { title: "登录页" },
-    component: () => import("@/views/login.vue"),
+    component: () => import("@/views/login/login.vue"),
   },
   {
+    name: "main",
     path: "/main",
     meta: { title: "主页" },
-    component: () => import("@/views/main.vue"),
+    component: () => import("@/views/main/main.vue"),
+  },
+  {
+    path: "/:pathMatch(.*)*",
+    component: () => import("@/views/error/404.vue"),
   },
 ];
 
diff --git a/frontend/src/stores/user.js b/frontend/src/stores/user.js
index 89d76b3..3ed7110 100644
--- a/frontend/src/stores/user.js
+++ b/frontend/src/stores/user.js
@@ -1,8 +1,10 @@
 import { ref, computed } from "vue";
 import { defineStore } from "pinia";
 import { message } from "ant-design-vue";
-import { getMenus, getUserInfo, login } from "@/service/user";
+
 import router from "@/router";
+import { loadRouter, loadDefaultMenu } from "@/utils/loadCpn";
+import { getMenus, getUserInfo, login } from "@/service/user";
 
 export const userStore = defineStore(
   "user",
@@ -11,6 +13,8 @@ export const userStore = defineStore(
     const userInfo = ref({});
     const userMenus = ref([]);
 
+    const selectKey = ref(null);
+
     const isLoading = ref(false);
 
     // getter
@@ -38,44 +42,42 @@ export const userStore = defineStore(
       const menus = await getMenus(info.data.roles[0].id);
       userMenus.value = menus.data;
 
+      // 3.1 加载权限
+      loadRouter(menus.data);
+
+      // 3.2 默认跳转路由
+      const defaultMenu = loadDefaultMenu(menus.data);
+
+      selectKey.value = [defaultMenu.id];
       // 4. 跳转
-      router.push("/main");
+      if (defaultMenu.path) {
+        router.push(defaultMenu.path);
+      } else {
+        router.push("/main");
+      }
 
       // 弹框提示登录成功
       message.success("登录成功.");
     };
 
+    // loadRouter 刷新问题
+    const loadRoleRouter = () => {
+      loadRouter(userMenus.value);
+    };
+
     return {
       token,
       accessToken,
       userInfo,
       userMenus,
       isLoading,
+      selectKey,
       $reset,
       loginAction,
+      loadRoleRouter,
     };
   },
   {
-    persist: true, // 解决pinia刷新时数据丢失问题
+    persist: true,
   }
 );
-
-// export const userStore = defineStore('user',{
-//     state: () => ({
-//         token: ""
-//     }),
-//     getters: {
-//         accessToken() {
-//             return `Bearer ${this.token}`
-//         }
-//     },
-//     actions: {
-//       async loginAction(data){
-//         const res = await login(data)
-//         console.log(res)
-//         this.token = res.data.token
-//         // uid.value = res.data.id
-//       }
-//     },
-//     persist: true
-// })
diff --git a/frontend/src/utils/loadCpn.js b/frontend/src/utils/loadCpn.js
index b0b8280..ea4cde6 100644
--- a/frontend/src/utils/loadCpn.js
+++ b/frontend/src/utils/loadCpn.js
@@ -1,6 +1,6 @@
 // 动态加载组件
-import { h } from "vue";
 import * as icons from "@ant-design/icons-vue";
+import router from "@/router";
 
 /**
  * 动态加载antd icon
@@ -13,4 +13,33 @@ function loadIconCpn(iconName) {
   return icons[iconName];
 }
 
-export { loadIconCpn };
+// 拿到views下所有.vue文件
+const modules = import.meta.glob("../views/**/**.vue");
+
+function loadRouter(menus) {
+  for (const menu of menus) {
+    //   type 为1 菜单组件
+    if (menu.type === 1 && menu.path !== "") {
+      const cnpPath = `../views/main${menu.component}`;
+
+      router.addRoute("main", {
+        path: menu.path,
+        name: menu.name,
+        // 映射取值
+        component: modules[/* @vite-ignore */ cnpPath],
+        meta: menu.meta,
+      });
+    } else if (menu.children) {
+      loadRouter(menu.children);
+    }
+  }
+}
+
+// 默认打开第一个
+function loadDefaultMenu(menus) {
+  for (const menu of menus) {
+    return menu.children.find((e) => e.type === 1);
+  }
+}
+
+export { loadIconCpn, loadRouter, loadDefaultMenu };
diff --git a/frontend/src/views/error/404.vue b/frontend/src/views/error/404.vue
new file mode 100644
index 0000000..540e85e
--- /dev/null
+++ b/frontend/src/views/error/404.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const toHome = () => {
+  router.push("/");
+};
+</script>
+
+<template>
+  <div>
+    <a-result status="404" title="404" sub-title="页面找不到~">
+      <template #extra>
+        <a-button type="primary" @click="toHome"> Back Home </a-button>
+      </template>
+    </a-result>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/frontend/src/views/login.vue b/frontend/src/views/login/login.vue
similarity index 100%
rename from frontend/src/views/login.vue
rename to frontend/src/views/login/login.vue
diff --git a/frontend/src/views/main.vue b/frontend/src/views/main/main.vue
similarity index 96%
rename from frontend/src/views/main.vue
rename to frontend/src/views/main/main.vue
index d383770..714380a 100644
--- a/frontend/src/views/main.vue
+++ b/frontend/src/views/main/main.vue
@@ -25,7 +25,7 @@ const logout = () => {
       <a-layout>
         <a-layout-header style="background: #fff; padding: 0">
           <!-- 页头 -->
-          <a-button @click="logout"></a-button>
+          <a-button @click="logout">退出</a-button>
         </a-layout-header>
         <!-- 面包屑 -->
         <a-layout-content
diff --git a/frontend/src/views/main/setting/about/about.vue b/frontend/src/views/main/setting/about/about.vue
new file mode 100644
index 0000000..2d246c7
--- /dev/null
+++ b/frontend/src/views/main/setting/about/about.vue
@@ -0,0 +1,7 @@
+<script setup></script>
+
+<template>
+  <div>about</div>
+</template>
+
+<style scoped></style>
diff --git a/frontend/src/views/main/system/menu/menu.vue b/frontend/src/views/main/system/menu/menu.vue
new file mode 100644
index 0000000..162e162
--- /dev/null
+++ b/frontend/src/views/main/system/menu/menu.vue
@@ -0,0 +1,7 @@
+<script setup></script>
+
+<template>
+  <div>menu</div>
+</template>
+
+<style scoped></style>
diff --git a/frontend/src/views/system/role.vue b/frontend/src/views/main/system/role/role.vue
similarity index 100%
rename from frontend/src/views/system/role.vue
rename to frontend/src/views/main/system/role/role.vue
diff --git a/frontend/src/views/main/system/user/user.vue b/frontend/src/views/main/system/user/user.vue
new file mode 100644
index 0000000..b1a7cde
--- /dev/null
+++ b/frontend/src/views/main/system/user/user.vue
@@ -0,0 +1,7 @@
+<script setup></script>
+
+<template>
+  <div>user</div>
+</template>
+
+<style scoped></style>
diff --git a/frontend/src/views/setting/about.vue b/frontend/src/views/setting/about.vue
deleted file mode 100644
index b62864d..0000000
--- a/frontend/src/views/setting/about.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-  <div>about</div>
-</template>
-
-<style scoped>
-
-</style>
diff --git a/frontend/src/views/system/menu.vue b/frontend/src/views/system/menu.vue
deleted file mode 100644
index b639786..0000000
--- a/frontend/src/views/system/menu.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-  <div>menu</div>
-</template>
-
-<style scoped>
-
-</style>
diff --git a/frontend/src/views/system/user.vue b/frontend/src/views/system/user.vue
deleted file mode 100644
index 3834d2d..0000000
--- a/frontend/src/views/system/user.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-  <div>user</div>
-</template>
-
-<style scoped>
-
-</style>