diff --git a/package.json b/package.json
index cca11b7..f656b1a 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/node": "^20.8.7",
     "element-plus": "^2.4.1",
+    "normalize.css": "^8.0.1",
     "vue": "^3.3.4",
     "vue-router": "^4.0.13",
     "vuex": "^4.0.2"
diff --git a/src/App.vue b/src/App.vue
index 0a8fcf1..5877516 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,26 +1,19 @@
+<template>
+  <el-config-provider :locale="zhCn">
+    <router-view></router-view>
+  </el-config-provider>
+</template>
+
 <script setup>
-const showMsg = () => {
-  ElMessageBox.alert('您好！！')
-}
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 </script>
 
-<template>
-  <div id="nav">
-    <router-link to="/">Home</router-link>
-    |
-    <router-link to="/about">About</router-link>
-  </div>
-  <el-button type="primary" @click="showMsg">按键</el-button>
-  <br>
-  <hr>
-  <el-icon :size="36" :color="color">
-    <edit></edit>
-  </el-icon>
-  <hr>
-  <router-view></router-view>
-</template>
 
-<style scoped>
+
+<style>
+body {
+  height: 100%;
+}
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -29,4 +22,12 @@ const showMsg = () => {
   color: #2c3e50;
   margin-top: 60px;
 }
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cursor {
+  cursor: pointer;
+}
 </style>
diff --git a/src/layout/components/PageHeader.vue b/src/layout/components/PageHeader.vue
new file mode 100644
index 0000000..9d3c79c
--- /dev/null
+++ b/src/layout/components/PageHeader.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="header-cont">
+    <div class="left">
+      <h1>
+        <router-link to="/">权限管理系统</router-link>
+      </h1>
+    </div>
+    <div class="right flex-center">
+      <div class="lang gap">
+        <span class="item active">简体中文</span> /
+        <span class="item">En</span>
+      </div>
+      <div class="gap cursor">
+        <router-link to="/personal/message"><el-icon><message/></el-icon></router-link>
+      </div>
+      <el-dropdown trigger="click">
+        <div class="flex-center cursor">
+          这里是用户名
+          <el-icon><caret-bottom /></el-icon>
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item>个人中心</el-dropdown-item>
+            <el-dropdown-item>退出</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Message from "@/views/personal/Message.vue";
+</script>
+
+<style lang="scss">
+.header-cont {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  height: 100%;
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+  h1 {
+    margin: 0;
+    font-size: 20px;
+  }
+  .gap {
+    margin-right: 20px;
+  }
+  .right {
+    .lang {
+      font-size: 14px;
+      .item {
+        cursor: pointer;
+        &.active {
+          font-size: 18px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+  .el-dropdown {
+    color: inherit;
+  }
+}
+</style>
diff --git a/src/layout/components/PageSiderbar.vue b/src/layout/components/PageSiderbar.vue
new file mode 100644
index 0000000..3a5ba06
--- /dev/null
+++ b/src/layout/components/PageSiderbar.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>这是侧边栏组件</div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
new file mode 100644
index 0000000..b91131e
--- /dev/null
+++ b/src/layout/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="page-container">
+    <header>
+      <page-header></page-header>
+    </header>
+    <main>
+      <div v-if="showLeft" class="left">
+        <page-siderbar></page-siderbar>
+      </div>
+      <div class="right">
+        <router-view></router-view>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import {useRoute} from "vue-router";
+import {computed} from "vue";
+
+import PageHeader from "@/layout/components/PageHeader.vue";
+import PageSiderbar from "@/layout/components/PageSiderbar.vue";
+
+const route = useRoute()
+const showLeft = computed(() => {
+  const routeName = route.name;
+  return !['Login', 'NotFound'].includes(routeName) && !/^Personal/.test(routeName);
+})
+</script>
+
+<style lang="scss">
+.page-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  > header {
+    height: 54px;
+    background: #000000;
+    color: #ffffff;
+  }
+  > main {
+    display: flex;
+    flex: 1;
+    overflow: auto;
+    > .left {
+      height: 100%;
+      background-color: #000000;
+      color: #ffffff;
+    }
+    > .right {
+      flex: 1;
+      overflow: hidden;
+      background-color: #f5f7f9;
+      > .main-body {
+        padding: 16px 16px 30px;
+        overflow: auto;
+        height: 100%;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/main.js b/src/main.js
index c52f2e0..10b4880 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,7 @@ import App from './App.vue'
 import router from "./router/index.js";
 import store from "./store/index.js";
 import * as ElIcons from "@element-plus/icons-vue";
+import 'normalize.css/normalize.css'
 
 const app = createApp(App);
 
diff --git a/src/router/index.js b/src/router/index.js
index 07d2b82..1ed205d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,17 +1,56 @@
 import {createRouter, createWebHashHistory} from 'vue-router'
+import Layout from '@/layout/index.vue'
 
 const routes = [
     {
-        path: '/',
-        name: 'Home',
-        component: () => import('../views/Home.vue')
+        path: "/",
+        name: "Home",
+        component: Layout,
+        children: [
+            {
+                path: "login",
+                name: "Login",
+                component: () => import("@/views/login/index.vue")
+            },
+            {
+                path: "404",
+                name: "NotFound",
+                component: () => import("@/views/404.vue")
+            },
+            {
+                path: "personal",
+                name: "Personal",
+                meta: {
+                    requireAuth: true,
+                },
+                component: () => import("@/views/personal/index.vue"),
+                children: [
+                    {
+                        path: "message",
+                        name: "PersonalMessage",
+                        meta: {
+                            requireAuth: true,
+                        },
+                        component: () => import("@/views/personal/Message.vue")
+                    }
+                ]
+            },
+            {
+                path: "app",
+                name: "App",
+                meta: {
+                    requireAuth: true,
+                },
+                component: () => import("@/views/app/index.vue")
+            },
+        ]
     },
     {
-        path: '/About',
-        name: 'About',
-        component: () => import('../views/About.vue')
-    },
+        path: "/:pathMatch(.*)*",
+        name: "404",
+        redirect: "/404"
+    }
 ]
 const router = createRouter({history: createWebHashHistory(), routes})
 
-export default router
\ No newline at end of file
+export default router
diff --git a/src/views/404.vue b/src/views/404.vue
new file mode 100644
index 0000000..5343365
--- /dev/null
+++ b/src/views/404.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  <h1>这是404页面</h1>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/views/About.vue b/src/views/About.vue
deleted file mode 100644
index 3a9e434..0000000
--- a/src/views/About.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  这是About页面
-  <hr>
-  <button @click="increase">增加</button>
-  <hr>
-  count: {{ count }}
-</template>
-
-<script setup>
-import {useStore} from "vuex";
-import {ref} from "vue";
-
-const store = useStore()
-let count = ref(3);
-
-function increase() {
-  count.value ++;
-  store.commit('increase', count.value);
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
deleted file mode 100644
index 1433c99..0000000
--- a/src/views/Home.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  这是Home页面
-  <hr>
-  <div class="wrap">
-    <p>count: {{ count }}</p>
-  </div>
-
-</template>
-
-<script setup>
-import {computed} from "vue";
-import {useStore} from "vuex";
-
-const store = useStore()
-const count = computed(() => store.state.count)
-
-</script>
-
-<style lang="scss">
-.wrap {
-  background: yellow;
-  p {
-    color: blue;
-    font-size: 24px;
-  }
-}
-</style>
diff --git a/src/views/app/index.vue b/src/views/app/index.vue
new file mode 100644
index 0000000..445ea6a
--- /dev/null
+++ b/src/views/app/index.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  <h1>这是内部首页</h1>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
new file mode 100644
index 0000000..69ed15c
--- /dev/null
+++ b/src/views/login/index.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  <h1>这是登录页面</h1>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/views/personal/Message.vue b/src/views/personal/Message.vue
new file mode 100644
index 0000000..7c91dbc
--- /dev/null
+++ b/src/views/personal/Message.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  <h1>这是个人中心消息页面</h1>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/views/personal/index.vue b/src/views/personal/index.vue
new file mode 100644
index 0000000..756a75e
--- /dev/null
+++ b/src/views/personal/index.vue
@@ -0,0 +1,12 @@
+<script setup>
+
+</script>
+
+<template>
+  <h1>这是个人中心页面</h1>
+  <router-view></router-view>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/vite.config.js b/vite.config.js
index 6675067..b6c518e 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,6 +3,7 @@ import vue from '@vitejs/plugin-vue'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import {ElementPlusResolver} from "unplugin-vue-components/resolvers";
+import { resolve } from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -16,4 +17,9 @@ export default defineConfig({
             resolvers: [ElementPlusResolver()]
         })
     ],
+    resolve:{
+        alias: {
+            '@': resolve(__dirname, 'src'),
+        }
+    }
 })
diff --git a/yarn.lock b/yarn.lock
index 334186f..12200c3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -209,6 +209,13 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.200.tgz#435b6035c7eba9cdf1e039af8212c9e9281e7149"
   integrity sha512-YI/M/4HRImtNf3pJgbF+W6FrXovqj+T+/HpENLTooK9PnkacBsDpeP3IpHab40CClUfhNmdM2WTNP2sa2dni5Q==
 
+"@types/node@^20.8.7":
+  version "20.8.7"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.8.7.tgz#ad23827850843de973096edfc5abc9e922492a25"
+  integrity sha512-21TKHHh3eUHIi2MloeptJWALuCu5H7HQTdTrWIFReA8ad+aggoX+lRes3ex7/FtpC+sVUpFMQ+QTfYr74mruiQ==
+  dependencies:
+    undici-types "~5.25.1"
+
 "@types/web-bluetooth@^0.0.16":
   version "0.0.16"
   resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8"
@@ -639,6 +646,11 @@ normalize-wheel-es@^1.2.0:
   resolved "https://registry.yarnpkg.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz#0fa2593d619f7245a541652619105ab076acf09e"
   integrity sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==
 
+normalize.css@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
+  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
+
 path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
@@ -760,6 +772,11 @@ ufo@^1.3.0:
   resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.3.1.tgz#e085842f4627c41d4c1b60ebea1f75cdab4ce86b"
   integrity sha512-uY/99gMLIOlJPwATcMVYfqDSxUR9//AUcgZMzwfSTJPDKzA1S8mX4VLqa+fiAtveraQUBCz4FFcwVZBGbwBXIw==
 
+undici-types@~5.25.1:
+  version "5.25.3"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.25.3.tgz#e044115914c85f0bcbb229f346ab739f064998c3"
+  integrity sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==
+
 unimport@^3.0.14:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/unimport/-/unimport-3.4.0.tgz#e8302c2eabdfc6e23b65e02c3dfe592e427e8340"