diff --git a/bun.lockb b/bun.lockb
index e31a977..80b95c2 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index b6908a1..370f52d 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,8 @@
     "tailwindcss": "^3.4.14",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.8"
+    "vite": "^5.4.8",
+    "vite-plugin-pages": "^0.32.3"
   },
   "lint-staged": {
     "*.(ts|vue)": [
diff --git a/src/App.vue b/src/App.vue
index 21c6126..bbb0ea4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,37 +1,7 @@
-<script setup lang="ts">
-import { Button } from '@/components/ui/button';
-import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardFooter,
-    CardHeader,
-    CardTitle, } from '@/components/ui/card';
-</script>
+<script setup lang="ts"></script>
 
 <template>
-
-    <Card class="Card">
-    <CardHeader>
-      <CardTitle>组件的基本导入使用</CardTitle>
-      <CardDescription>卡片组件的描述</CardDescription>
-    </CardHeader>
-    <CardContent>
-    卡片组件的内容填充区
-    </CardContent>
-    <CardFooter>
-     卡片组件的表尾
-        <Button class="absolute left-4">Button</Button>
-    </CardFooter>
-  </Card>
+    <RouterView></RouterView>
 </template>
 
-<style lang="scss" scoped>
-.Card{
-    width: 300px;
-    height: 300px;
-    background-color: #fff;
-    margin: auto;
-    border-radius: 10px;
-}
-</style>
\ No newline at end of file
+<style lang="scss" scoped></style>
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
new file mode 100644
index 0000000..1d46c38
--- /dev/null
+++ b/src/layouts/DefaultLayout.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template></template>
+
+<style lang="scss" scoped></style>
diff --git a/src/main.ts b/src/main.ts
index 70f703c..e90c909 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import "@/assets/styles/index.scss";
+import router from "@/router";
 
-createApp(App).mount("#app");
+createApp(App).use(router).mount("#app");
diff --git a/src/pages/dashboard/index.vue b/src/pages/dashboard/index.vue
new file mode 100644
index 0000000..102cf06
--- /dev/null
+++ b/src/pages/dashboard/index.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>控制台</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/pages/index.vue b/src/pages/index.vue
new file mode 100644
index 0000000..e50b417
--- /dev/null
+++ b/src/pages/index.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>首页</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/pages/message/index.vue b/src/pages/message/index.vue
new file mode 100644
index 0000000..b9016c1
--- /dev/null
+++ b/src/pages/message/index.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>消息中心</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/pages/profile/index.vue b/src/pages/profile/index.vue
new file mode 100644
index 0000000..814fb07
--- /dev/null
+++ b/src/pages/profile/index.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>用户中心</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/pages/recruitment/index.vue b/src/pages/recruitment/index.vue
new file mode 100644
index 0000000..b68a3b1
--- /dev/null
+++ b/src/pages/recruitment/index.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>招新</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/router/index.ts b/src/router/index.ts
index e69de29..53c8389 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -0,0 +1,7 @@
+import { createRouter, createWebHistory } from "vue-router";
+import routes from "~pages";
+const router = createRouter({
+    history: createWebHistory(),
+    routes,
+});
+export default router;
diff --git a/src/shared/loading-status/LoadingLogin.vue b/src/shared/loading-status/LoadingLogin.vue
deleted file mode 100644
index 6536b25..0000000
--- a/src/shared/loading-status/LoadingLogin.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-    <transition name="loading" tag="div">
-        <div class="loading-center" v-if="isShow">
-            <div class="wavy">
-                <!-- --i是自定义属性，可通过var函数调用 -->
-                <span style="--i:1;">l</span>
-                <span style="--i:2;">o</span>
-                <span style="--i:3;">a</span>
-                <span style="--i:4;">d</span>
-                <span style="--i:5;">i</span>
-                <span style="--i:6;">n</span>
-                <span style="--i:7;">g</span>
-                <span style="--i:8;">.</span>
-                <span style="--i:9;">.</span>
-                <span style="--i:10;">.</span>
-            </div>
-        </div>
-    </transition>
-</template>
-<script setup>
-import { ref,onMounted } from 'vue'
-
-let isShow = ref(true)
-onMounted(() => {
-    isShow.value = false
-    console.log('挂载完成');
-})
-</script>
-
-<style lang="css" scoped>
-.loading-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    background-color: #000;
-}
-
-.wavy {
-    /* 相对定位 */
-    position: relative;
-    /* 倒影效果 */
-    -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, 0.2));
-}
-
-.wavy span {
-    position: relative;
-    display: inline-block;
-    color: #fff;
-    font-size: 70px;
-    text-transform: uppercase;
-    letter-spacing: 8px;
-    /* 执行动画：动画名 时长 加速后减速 无限次播放 */
-    animation: wavyAnimate 1s ease-in-out infinite;
-    /* 通过var函数调用自定义属性--i，在计算出动画延迟时间 */
-    animation-delay: calc(0.1s * var(--i));
-}
-
-/* 进入的起点 离开的终点 */
-.loading-leave-to {
-    transform: translateY(-100%);
-}
-
-/* 进入的终点 离开的起点*/
-.loading-leave {
-    transform: translateY(0);
-}
-
-.loading-leave-active {
-    transition: 0.5s linear;
-}
-
-/* 定义动画 */
-@keyframes wavyAnimate {
-    0% {
-        transform: translateY(0);
-    }
-
-    20% {
-        transform: translateY(-20px);
-    }
-
-    40%,
-    100% {
-        transform: translateY(0);
-    }
-}
-
-@media screen and (max-width: 1000px) {
-    .wavy span {
-        font-size: 25px;
-    }
-}
-</style>
\ No newline at end of file
diff --git a/src/shared/loading-status/LoadingPage.vue b/src/shared/loading-status/LoadingPage.vue
deleted file mode 100644
index 1b75ce9..0000000
--- a/src/shared/loading-status/LoadingPage.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-    <div class="container">
-        <div class="loader"></div>
-    </div>
-</template>
-
-<script setup>
-
-</script>
-
-<style lang="scss" scoped>
-* {
-    /* 初始化 */
-    margin: 0;
-    padding: 0;
-}
-
-body {
-    overflow: hidden;
-}
-
-.container {
-    width: 100vw;
-    height: 100vh;
-    position: absolute;
-    z-index: 10000;
-    background-color: rgba(0, 0, 0, 0.6);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-}
-
-/* 外圈 */
-.loader {
-    width: 200px;
-    height: 200px;
-    /* 相对定位 */
-    position: relative;
-    border-radius: 50%;
-    border: 4px solid transparent;
-    border-top-color: #4bc0c8;
-    /* 执行动画：动画名 时长 线性的 无限次播放 */
-    animation: spin 2s linear infinite;
-}
-
-/* 中圈 */
-.loader::before {
-    content: "";
-    /* 绝对定位 */
-    position: absolute;
-    left: 5px;
-    top: 5px;
-    right: 5px;
-    bottom: 5px;
-    border-radius: 50%;
-    border: 4px solid transparent;
-    border-top-color: #c779d0;
-    /* 执行动画：动画名 时长 线性的 无限次播放 */
-    animation: spin 3s linear infinite;
-}
-
-/* 内圈 */
-.loader::after {
-    content: "";
-    position: absolute;
-    left: 15px;
-    top: 15px;
-    right: 15px;
-    bottom: 15px;
-    border-radius: 50%;
-    border: 4px solid transparent;
-    border-top-color: #feac5e;
-    /* 执行动画：动画名 时长 线性的 无限次播放 */
-    animation: spin 1.5s linear infinite;
-}
-
-/* 定义动画 */
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}
-</style>
\ No newline at end of file
diff --git a/src/shared/loading-status/NoData.vue b/src/shared/loading-status/NoData.vue
deleted file mode 100644
index b78e827..0000000
--- a/src/shared/loading-status/NoData.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup>
-
-</script>
-<template>
-    <div class="noDataContainer">
-        <div class="noData">
-            <img class="noDataImg" src="../assets/暂无数据.png" alt="">
-            <p class="noDataText">暂无数据</p>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.noDataContainer{
-    width: 100%;
-    height: 100%;
-    padding-top: 50px;
-
-    .noData{
-        text-align: center;
-        .noDataImg{
-            width: 200px;
-            height: auto;
-            object-fit: cover;
-        }
-
-        .noDataText{
-            color: #999;
-            padding-top: 20px;
-            text-align: center;
-            padding-right: 20px;
-        }
-    }
-}
-</style>
\ No newline at end of file
diff --git a/src/shared/loading-status/NoInter.vue b/src/shared/loading-status/NoInter.vue
deleted file mode 100644
index 2349db1..0000000
--- a/src/shared/loading-status/NoInter.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<script setup>
-
-function goBack() {
-    window.history.back();
-}
-</script>
-<template>
-    <div class="NoInternet">
-        <div class="noInter-center">
-            <!-- <WifiOff :size="200" color="#999"/> -->
-            <img src="../assets/Error Alien Spaceship.png" alt="">
-            <div class="noInter-left">
-                <h1>Sorry~</h1>
-                <p class="text-center">网页走丢了，请稍后重试</p>
-                <button @click="goBack">返回</button>
-                <!-- <Button></Button> -->
-            </div>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.NoInternet {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100vh;
-    background-color: #e5e5e5;
-
-    .noInter-center {
-        // width: 80%;
-        display: flex;
-        flex-direction: row-reverse;
-        justify-content: center;
-        align-items: center;
-
-        .noInter-left {
-            // width: 50%;;
-
-            h1 {
-                // font-family:'STXinwei';
-                font-family: 'Courier New', Courier, monospace;
-                font-size: 80px;
-                // font-family: 'STXingkai';
-                // font-family: 'Arial';
-            }
-
-            p {
-                margin-top: 20px;
-                font-size: 25px;
-                font-family: 'KaiTi', Tahoma, Geneva, Verdana, sans-serif;
-            }
-        }
-
-        button {
-            margin-top: 30px;
-            width: 150px;
-            height: 40px;
-            border-radius: 20px;
-            background-color: #7a97f4;
-            color: white;
-            font-size: 18px;
-            // border: 1.5px solid #f6f6f6;
-            border: none;
-
-            &:hover {
-                background-color: #8ba3f4;
-                // color: #fff;
-            }
-
-            &:active {
-                background-color: #6b8df4;
-            }
-        }
-    }
-}
-
-
-@media screen and (max-width: 1000px) {
-    .NoInternet {
-        min-height: 100vh;
-        height: 100%;
-        padding-bottom: 100px;
-
-        .noInter-center {
-            flex-direction: column;
-
-            .noInter-left {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-
-                h1 {
-                    font-size: 50px;
-                }
-
-                p {
-                    font-size: 20px;
-                }
-            }
-
-            img {
-                width: 90%;
-            }
-
-
-        }
-    }
-
-}
-</style>
\ No newline at end of file
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 11f02fe..5c48b96 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-pages/client" />
diff --git a/vite.config.ts b/vite.config.ts
index 07561b5..58799a4 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,6 +4,7 @@ import { resolve } from "node:path";
 import vue from "@vitejs/plugin-vue";
 import autoprefixer from "autoprefixer";
 import tailwind from "tailwindcss";
+import Pages from "vite-plugin-pages";
 
 export default defineConfig({
     css: {
@@ -16,7 +17,13 @@ export default defineConfig({
             },
         },
     },
-    plugins: [vue()],
+    plugins: [
+        vue(),
+        Pages({
+            pagesDir: "src/pages",
+            extensions: ["vue"],
+        }),
+    ],
     resolve: {
         alias: {
             "@": resolve(__dirname, "./src"),