diff --git a/src/App.vue b/src/App.vue
index d947c4a..5e38ba5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { RouterView } from "vue-router";
+  import { RouterView } from "vue-router";
 </script>
 
 <template>
diff --git a/src/assets/404.jpg b/src/assets/404.jpg
new file mode 100644
index 0000000..0d227b1
Binary files /dev/null and b/src/assets/404.jpg differ
diff --git a/src/assets/favicon.ico b/src/assets/favicon.ico
new file mode 100644
index 0000000..df36fcf
Binary files /dev/null and b/src/assets/favicon.ico differ
diff --git a/src/main.ts b/src/main.ts
index 4699532..4a0741e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,22 +1,22 @@
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import * as ElementPlusIconsVue from '@element-plus/icons-vue'
-import App from './App.vue'
-import router from './router'
-import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
-import '@/assets/global.css'
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+import App from "./App.vue";
+import router from "./router";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+import "@/assets/global.css";
+import { useFilesStore } from "@/stores/index";
 
-
-
-const app = createApp(App)
+const app = createApp(App);
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-    app.component(key, component)
+  app.component(key, component);
 }
 
-app.use(ElementPlus)
-app.use(createPinia().use(piniaPluginPersistedstate))
-app.use(router)
+app.use(ElementPlus);
+app.use(createPinia().use(piniaPluginPersistedstate));
+app.use(router);
+app.provide("filesStore", useFilesStore());
 
-app.mount('#app')
+app.mount("#app");
diff --git a/src/router/index.ts b/src/router/index.ts
index dcb8a48..3625452 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,3 +1,4 @@
+import NotFound from "@/views/404/NotFound.vue";
 import { createRouter, createWebHistory } from "vue-router";
 
 const router = createRouter({
@@ -5,8 +6,12 @@ const router = createRouter({
   routes: [
     {
       path: "/",
-      component: import("@/views/layout/layoutContainer.vue"),
+      component: () => import("@/views/dashboard/layout.vue"),
     },
+    {
+      path:"/404",
+      component: ()=> import("@/views/404/NotFound.vue"),
+    }
     // {
     //   path: '/about',
     //   name: 'about',
diff --git a/src/stores/index.ts b/src/stores/index.ts
index e69de29..313ee5e 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -0,0 +1,2 @@
+export * from "./modules/files";
+export * from "./modules/user";
diff --git a/src/stores/modules/files.ts b/src/stores/modules/files.ts
new file mode 100644
index 0000000..c07625d
--- /dev/null
+++ b/src/stores/modules/files.ts
@@ -0,0 +1,27 @@
+import { defineStore } from "pinia";
+import { ref, type Ref, computed, type ComputedRef } from "vue";
+import { type file } from "@/stores/type";
+export const useFilesStore = defineStore(
+  "files",
+  () => {
+    const Files: Ref<file[]> = ref([]);
+    const clearFiles = () => {
+      Files.value = [];
+    };
+    const setFiles = (files: file[]) => {
+      Files.value = files;
+    };
+    const isEmpty: ComputedRef<boolean> = computed(() => {
+      return Files.value.length === 0;
+    });
+    return {
+      Files,
+      isEmpty,
+      clearFiles,
+      setFiles,
+    };
+  },
+  {
+    persist: true,
+  }
+);
diff --git a/src/stores/modules/user.ts b/src/stores/modules/user.ts
index 8d63296..46e36f0 100644
--- a/src/stores/modules/user.ts
+++ b/src/stores/modules/user.ts
@@ -1,25 +1,23 @@
-import { defineStore } from 'pinia'
-import { ref, type Ref } from 'vue'
+import { defineStore } from "pinia";
+import { ref, type Ref } from "vue";
 
 export const useUserStore = defineStore(
-    'user',
-    () => {
-        const token: Ref<string> = ref("")
-        const setToken = (newToken: string) => {
-            token.value = newToken;
-        };
-        const removeToken = () => {
-            token.value = "";
-        };
-        return {
-            token,
-            setToken,
-            removeToken,
-
-        }
-
-    },
-    {
-        persist: true,
-    }
-)
\ No newline at end of file
+  "user",
+  () => {
+    const token: Ref<string> = ref("");
+    const setToken = (newToken: string) => {
+      token.value = newToken;
+    };
+    const removeToken = () => {
+      token.value = "";
+    };
+    return {
+      token,
+      setToken,
+      removeToken,
+    };
+  },
+  {
+    persist: true,
+  }
+);
diff --git a/src/stores/type.ts b/src/stores/type.ts
new file mode 100644
index 0000000..d29b472
--- /dev/null
+++ b/src/stores/type.ts
@@ -0,0 +1,22 @@
+export interface option {
+  name: string;
+  icon: any;
+  click: Function;
+}
+/**
+ *
+ *
+ * @export
+ * @interface file
+ */
+export interface file {
+  name: string;
+  isFolder: boolean;
+  updateTime: string;
+  id: string;
+  fileType: string;
+  size: number;
+  icon: any;
+  isVisible: boolean;
+  options: option[];
+}
diff --git a/src/views/404/NotFound.vue b/src/views/404/NotFound.vue
new file mode 100644
index 0000000..0e0209c
--- /dev/null
+++ b/src/views/404/NotFound.vue
@@ -0,0 +1,94 @@
+<template>
+    <div class="not-found">
+        <el-card class="not-found-card" shadow="hover">
+            <el-image src="../src/assets/404.jpg" fit="cover" class="not-found-image" />
+            <h1 class="not-found-title">页面未找到</h1>
+            <p class="not-found-description">抱歉，您访问的页面不存在。</p>
+            <el-button type="primary" @click="goHome" class="home-button">
+                <el-icon>
+                    <home />
+                </el-icon> 返回首页
+            </el-button>
+        </el-card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import { HomeFilled as home } from '@element-plus/icons-vue';
+
+const router = useRouter();
+
+const goHome = () => {
+    router.push('/');
+};
+</script>
+
+<style scoped>
+.not-found {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 100vw;
+    background-color: #f0f2f5;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    overflow-x: hidden;
+}
+
+.not-found-card {
+    text-align: center;
+    padding: 15px;
+    /* 调整卡片内边距 */
+    max-width: 480px;
+    /* 调整卡片最大宽度 */
+    width: 100%;
+    max-height: 420px;
+    /* 调整卡片最大高度 */
+    border-radius: 7.2px;
+    /* 调整卡片圆角半径 */
+    box-shadow: 0 3.6px 9.6px rgba(0, 0, 0, 0.15);
+    background-color: white;
+    box-sizing: border-box;
+}
+
+.not-found-image {
+    width: 100%;
+    max-width: 300px;
+    /* 调整图片最大宽度 */
+    max-height: 180px;
+    /* 调整图片最大高度 */
+    margin-bottom: 18px;
+    /* 调整图片下方外边距 */
+    border-radius: 7.2px;
+    /* 调整图片圆角半径 */
+}
+
+.not-found-title {
+    font-size: 1.5rem;
+    /* 调整标题字体大小 */
+    margin-bottom: 12px;
+    /* 调整标题下方外边距 */
+}
+
+.not-found-description {
+    font-size: 0.9rem;
+    /* 调整描述字体大小 */
+    margin-bottom: 18px;
+    /* 调整描述下方外边距 */
+}
+
+.home-button {
+    font-size: 0.75rem;
+    /* 调整按钮的字体大小 */
+    padding: 6px 12px;
+    /* 调整按钮的内边距 */
+}
+
+.home-button el-icon {
+    font-size: 0.9rem;
+    /* 调整按钮图标的大小 */
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/FileTable.vue b/src/views/dashboard/components/FileTable.vue
new file mode 100644
index 0000000..6daf802
--- /dev/null
+++ b/src/views/dashboard/components/FileTable.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ElIcon, ElMessage, ElTable, ElTableColumn, ElPopover, ElInput } from "element-plus"
+import { ref, type Ref, markRaw, inject } from "vue";
+
+import {
+    Document,
+    VideoPlay,
+    MoreFilled,
+    Download,
+    DocumentDelete,
+    Edit,
+    Picture,
+    Headset,
+} from "@element-plus/icons-vue";
+
+import { type file } from "@/stores/type";
+
+import { files } from "./test-data";
+
+const filesStore: any = inject("filesStore")
+filesStore.clearFiles()
+
+const selectionChange = (files: file[]) => {
+    filesStore.setFiles(files)
+}
+
+
+const mouseEnter = (row: file) => {
+    row.isVisible = true
+}
+
+const mouseLeave = (row: file) => {
+    row.isVisible = false
+}
+
+</script>
+<template>
+    <el-table :data="files" class="table" :default-sort="{ prop: 'date', order: 'descending' }"
+        @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave" @selection-change="selectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column type="index" width="50" />
+        <el-table-column label="文件名" width="180">
+            <template #default="scope">
+                <div style="display: flex; align-items: center">
+                    <el-icon>
+                        <component :is="scope.row.icon" />
+                    </el-icon>
+                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
+                </div>
+            </template>
+        </el-table-column>
+        <el-table-column width="180">
+            <template #default="scope">
+                <div style="display: flex; align-items: center;justify-content: space-around;"
+                    v-if="scope.row.isVisible">
+                    <el-popover effect="light" trigger="hover" placement="top" width="auto"
+                        v-for="option in scope.row.options">
+                        <template #default>
+                            <h5 style="text-align: center;">{{ option.name }}</h5>
+                        </template>
+                        <template #reference>
+                            <el-icon>
+                                <component :is="option.icon" />
+                            </el-icon>
+                        </template>
+                    </el-popover>
+                </div>
+            </template>
+        </el-table-column>
+        <el-table-column prop="updateTime" label="修改日期" width="180" />
+        <el-table-column prop="fileType" label="文件类型" width="180" />
+        <el-table-column prop="size" label="大小" />
+    </el-table>
+</template>
+
+<style scoped lang="less">
+.table {
+    width: 100%;
+    // outline: auto red;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/NavigationBar.vue b/src/views/dashboard/components/NavigationBar.vue
new file mode 100644
index 0000000..7af0997
--- /dev/null
+++ b/src/views/dashboard/components/NavigationBar.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ElSubMenu, ElMenu, ElMenuItem, ElAvatar, ElIcon } from "element-plus";
+import { UserFilled, Back, Help } from "@element-plus/icons-vue";
+import { ref, type Ref } from "vue";
+
+const activeIndex: Ref<string> = ref("1");
+const errorHandler = () => true
+
+</script>
+
+<template>
+    <el-menu :default-active="activeIndex" class="Navigation-Bar" mode="horizontal" background-color="#545c64"
+        text-color="#fff" active-text-color="#ffd04b">
+        <el-menu-item index="1">盘网网盘</el-menu-item>
+        <el-sub-menu index="2">
+            <template #title>
+                <el-avatar @error="errorHandler">
+                    <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
+                </el-avatar>
+            </template>
+            <el-menu-item index="2-1">
+                <el-icon>
+                    <UserFilled />
+                </el-icon>
+                <span>个人主页</span>
+            </el-menu-item>
+            <el-menu-item index="2-2">
+                <el-icon>
+                    <Help />
+                </el-icon>
+                <span>帮助中心</span>
+            </el-menu-item>
+            <el-menu-item index="2-3">
+                <el-icon>
+                    <Back />
+                </el-icon>
+                <span> 退出登录</span>
+            </el-menu-item>
+        </el-sub-menu>
+    </el-menu>
+</template>
+
+<style scoped lang="less">
+.Navigation-Bar {
+    display: flex;
+    justify-content: space-between;
+}
+</style>
diff --git a/src/views/dashboard/components/PageHeader.vue b/src/views/dashboard/components/PageHeader.vue
new file mode 100644
index 0000000..ef75841
--- /dev/null
+++ b/src/views/dashboard/components/PageHeader.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import {
+    ElPageHeader,
+    ElBreadcrumb,
+    ElBreadcrumbItem,
+    ElIcon,
+    ElButton,
+    ElInput,
+    ElMessage,
+    ElButtonGroup
+} from "element-plus";
+
+import {
+    Upload,
+    FolderAdd,
+    Search,
+    Share,
+    Delete,
+    Download,
+    CopyDocument,
+    Rank
+} from "@element-plus/icons-vue"
+import { ref, type Ref, inject, markRaw } from "vue";
+// 输入框值
+const searchInput: Ref<string> = ref("")
+// 当前文件夹名
+const currentFolder: Ref<string> = ref("")
+// 面包屑路径
+const paths: Ref<string[]> = ref(["homepage", "r1", "r2"])
+// 返回上一页
+const backButton = () => {
+    ElMessage("back")
+}
+const filesStore: any = inject("filesStore")
+// 被选中文件的按钮组
+const buttonGroup = ref([
+    {
+        name: "分享",
+        icon: markRaw(Share),
+        click: () => {
+            ElMessage("分享");
+        },
+    },
+    {
+        name: "下载",
+        icon: markRaw(Download),
+        click: () => {
+            ElMessage("下载");
+        },
+    },
+    {
+        name: "删除",
+        icon: markRaw(Delete),
+        click: () => {
+            ElMessage("删除");
+        },
+    },
+    {
+        name: "复制",
+        icon: markRaw(CopyDocument),
+        click: () => {
+            ElMessage("复制");
+        },
+    },
+    {
+        name: "移动",
+        icon: markRaw(Rank),
+        click: () => {
+            ElMessage("移动");
+        },
+    },
+])
+
+
+</script>
+
+<template>
+    <div class="buttons">
+        <div>
+            <div v-if="filesStore.isEmpty">
+                <el-button type="primary">
+                    <el-icon>
+                        <Upload />
+                    </el-icon>
+                    <span>上传文件</span>
+                </el-button>
+                <el-button type="primary" text>
+                    <el-icon>
+                        <FolderAdd />
+                    </el-icon>
+                    <span>创建新文件夹</span>
+                </el-button>
+            </div>
+            <div v-else>
+                <el-button-group>
+                    <el-button v-for="button, index of buttonGroup" :key="index" @click="button.click">
+                        <el-icon>
+                            <component :is="button.icon"></component>
+                        </el-icon>
+                        <div>
+                            {{ button.name }}
+                        </div>
+                    </el-button>
+                </el-button-group>
+            </div>
+        </div>
+        <div>
+            <el-input v-model="searchInput" style="width: 200px" clearable placeholder="请输入" :prefix-icon="Search"
+                maxlength="10" />
+        </div>
+    </div>
+    <el-page-header @back="backButton">
+        <template #breadcrumb>
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item v-for="path, index in paths " :key="index">
+                    {{ path }}
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </template>
+        <template #content>
+            <span class="text-large font-600 mr-3"> {{ paths.slice(-1)[0] }} </span>
+        </template>
+    </el-page-header>
+</template>
+
+<style scoped lang="less">
+.buttons {
+    margin: 20px 0 20px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    // outline: auto red;
+}
+</style>
diff --git a/src/views/dashboard/components/Pagination.vue b/src/views/dashboard/components/Pagination.vue
new file mode 100644
index 0000000..cd1833a
--- /dev/null
+++ b/src/views/dashboard/components/Pagination.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+
+<template>
+
+</template>
+
+<style scoped lang="less"></style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/SideBar.vue b/src/views/dashboard/components/SideBar.vue
new file mode 100644
index 0000000..c8573c2
--- /dev/null
+++ b/src/views/dashboard/components/SideBar.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import {
+    ElSubMenu,
+    ElMenu,
+    ElMenuItem,
+    ElIcon,
+
+} from "element-plus";
+import {
+    Document,
+    Menu as IconMenu,
+    Share,
+    Files,
+    Picture,
+    VideoPlay,
+    Headset,
+    Fold,
+    Expand,
+    MoreFilled,
+    House,
+    Delete
+} from "@element-plus/icons-vue";
+import { ref, type Ref, markRaw } from "vue";
+
+const isCollapse: Ref<boolean> = ref(true)
+
+const subMenuItems = ref([
+    { icon: markRaw(Picture), content: "图片" },
+    { icon: markRaw(Document), content: "文档" },
+    { icon: markRaw(VideoPlay), content: "视频" },
+    { icon: markRaw(Headset), content: "音频" },
+    { icon: markRaw(MoreFilled), content: "其他" },
+])
+
+
+</script>
+
+<template>
+    <el-menu default-active="2" :collapse="isCollapse" class="side-bar">
+        <el-menu-item index="1" @click="isCollapse = !isCollapse">
+            <el-icon>
+                <Expand v-if="isCollapse" />
+                <Fold v-else />
+            </el-icon>
+        </el-menu-item>
+        <el-menu-item index="2">
+            <el-icon>
+                <House />
+            </el-icon>
+            <span>首页</span>
+        </el-menu-item>
+        <el-sub-menu index="2">
+            <template #title>
+                <el-icon>
+                    <Files />
+                </el-icon>
+                <span>文件</span>
+            </template>
+            <el-menu-item v-for="item, index in subMenuItems" :key="index">
+                <el-icon>
+                    <component :is="item.icon" />
+                </el-icon>
+                <span>{{ item.content }}</span>
+            </el-menu-item>
+        </el-sub-menu>
+        <el-menu-item index="4">
+            <el-icon>
+                <Share />
+            </el-icon>
+            <span>分享</span>
+        </el-menu-item>
+        <el-menu-item index="5">
+            <el-icon>
+                <Delete />
+            </el-icon>
+            <span>回收站</span>
+        </el-menu-item>
+    </el-menu>
+
+</template>
+
+<style scoped lang="less">
+.side-bar {
+    height: 100%;
+    // outline: auto red;
+}
+</style>
diff --git a/src/views/dashboard/components/test-data.ts b/src/views/dashboard/components/test-data.ts
new file mode 100644
index 0000000..c29713c
--- /dev/null
+++ b/src/views/dashboard/components/test-data.ts
@@ -0,0 +1,183 @@
+import { type file } from "@/stores/type";
+import { ref, type Ref, markRaw } from "vue";
+import {
+  ElIcon,
+  ElMessage,
+  ElTable,
+  ElTableColumn,
+  ElPopover,
+  ElInput,
+} from "element-plus";
+import {
+  Document,
+  VideoPlay,
+  MoreFilled,
+  Download,
+  DocumentDelete,
+  Edit,
+  Picture,
+  Headset,
+} from "@element-plus/icons-vue";
+
+export const files: Ref<file[]> = ref([
+  {
+    name: "123",
+    isFolder: false,
+    updateTime: "2003-01-2",
+    id: "adsacafasf",
+    fileType: "image",
+    size: 22,
+    icon: markRaw(Picture),
+    isVisible: false,
+    options: [
+      {
+        name: "下载",
+        icon: markRaw(Download),
+        click: () => {
+          ElMessage("下载");
+        },
+      },
+      {
+        name: "删除",
+        icon: markRaw(DocumentDelete),
+        click: () => {
+          ElMessage("删除");
+        },
+      },
+      {
+        name: "编辑",
+        icon: markRaw(Edit),
+        click: () => {
+          ElMessage("编辑");
+        },
+      },
+      {
+        name: "更多",
+        icon: markRaw(MoreFilled),
+        click: () => {
+          ElMessage("更多");
+        },
+      },
+    ],
+  },
+  {
+    name: "sffdasd",
+    isFolder: false,
+    updateTime: "2023-01-12",
+    id: "adsacaf",
+    fileType: "video",
+    size: 22,
+    icon: markRaw(VideoPlay),
+    isVisible: false,
+    options: [
+      {
+        name: "下载",
+        icon: markRaw(Download),
+        click: () => {
+          ElMessage("下载");
+        },
+      },
+      {
+        name: "删除",
+        icon: markRaw(DocumentDelete),
+        click: () => {
+          ElMessage("删除");
+        },
+      },
+      {
+        name: "编辑",
+        icon: markRaw(Edit),
+        click: () => {
+          ElMessage("编辑");
+        },
+      },
+      {
+        name: "更多",
+        icon: markRaw(MoreFilled),
+        click: () => {
+          ElMessage("更多");
+        },
+      },
+    ],
+  },
+  {
+    name: "sgdfhnd",
+    isFolder: false,
+    updateTime: "2013-01-12",
+    id: "bsdfsdfg",
+    fileType: "document",
+    size: 22,
+    icon: markRaw(Document),
+    isVisible: false,
+    options: [
+      {
+        name: "下载",
+        icon: markRaw(Download),
+        click: () => {
+          ElMessage("下载");
+        },
+      },
+      {
+        name: "删除",
+        icon: markRaw(DocumentDelete),
+        click: () => {
+          ElMessage("删除");
+        },
+      },
+      {
+        name: "编辑",
+        icon: markRaw(Edit),
+        click: () => {
+          ElMessage("编辑");
+        },
+      },
+      {
+        name: "更多",
+        icon: markRaw(MoreFilled),
+        click: () => {
+          ElMessage("更多");
+        },
+      },
+    ],
+  },
+  {
+    name: "basdf",
+    isFolder: false,
+    updateTime: "2024-01-12",
+    id: "bsddfhdhfdfg",
+    fileType: "audio",
+    size: 22,
+    icon: markRaw(Headset),
+    isVisible: false,
+    options: [
+      {
+        name: "下载",
+        icon: markRaw(Download),
+        click: () => {
+          ElMessage("下载");
+        },
+      },
+      {
+        name: "删除",
+        icon: markRaw(DocumentDelete),
+        click: () => {
+          ElMessage("删除");
+        },
+      },
+      {
+        name: "编辑",
+        icon: markRaw(Edit),
+        click: () => {
+          ElMessage("编辑");
+        },
+      },
+      {
+        name: "更多",
+        icon: markRaw(MoreFilled),
+        click: () => {
+          ElMessage("更多");
+        },
+      },
+    ],
+  },
+]);
diff --git a/src/views/dashboard/layout.vue b/src/views/dashboard/layout.vue
new file mode 100644
index 0000000..ce0802a
--- /dev/null
+++ b/src/views/dashboard/layout.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import {
+    ElMain,
+    ElContainer,
+    ElHeader,
+    ElAside
+} from "element-plus"
+import NavigationBar from "./components/NavigationBar.vue";
+import SideBar from "./components/SideBar.vue"
+import PageHeader from "./components/PageHeader.vue"
+import FileTable from "./components/FileTable.vue"
+import UserInfo from "../user-info-page/UserInfo.vue";
+
+</script>
+
+<template>
+    <el-container class="layout-container">
+        <el-header style="padding: 0">
+            <navigation-bar></navigation-bar>
+        </el-header>
+        <el-container>
+            <side-bar />
+            <el-main>
+                <!-- <page-header />
+                <file-table /> -->
+                <user-info />
+            </el-main>
+        </el-container>
+    </el-container>
+</template>
+
+<style scoped lang="less">
+.layout-container {
+    height: 100vh;
+}
+
+.Navigation-Bar {
+    width: 100%;
+    // margin: 0;
+
+}
+
+.aside {
+    height: 100%;
+    // outline: auto red;
+}
+</style>
diff --git a/src/views/layout/components/NavigationBar.vue b/src/views/layout/components/NavigationBar.vue
deleted file mode 100644
index 7f501ab..0000000
--- a/src/views/layout/components/NavigationBar.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-  import { ElSubMenu, ElMenu, ElMenuItem } from "element-plus";
-  import { ref, type Ref } from "vue";
-
-  const activeIndex: Ref<string> = ref("1");
-  const handleSelect = (key: string, keyPath: string[]) => {
-    console.log(key, keyPath);
-  };
-</script>
-
-<template>
-  <el-menu :default-active="activeIndex" class="Navigation-Bar" mode="horizontal" background-color="#545c64"
-    text-color="#fff" active-text-color="#ffd04b" @select="handleSelect">
-    <el-menu-item index="1">Processing Center</el-menu-item>
-    <el-sub-menu index="2">
-      <template #title>Workspace</template>
-      <el-menu-item index="2-1">item one</el-menu-item>
-      <el-menu-item index="2-2">item two</el-menu-item>
-      <el-menu-item index="2-3">item three</el-menu-item>
-      <el-sub-menu index="2-4">
-        <template #title>item four</template>
-        <el-menu-item index="2-4-1">item one</el-menu-item>
-        <el-menu-item index="2-4-2">item two</el-menu-item>
-        <el-menu-item index="2-4-3">item three</el-menu-item>
-      </el-sub-menu>
-    </el-sub-menu>
-    <el-menu-item index="3" disabled>Info</el-menu-item>
-    <el-menu-item index="4">Orders</el-menu-item>
-  </el-menu>
-</template>
-
-<style scoped lang="less"></style>
diff --git a/src/views/layout/components/PageHeader.vue b/src/views/layout/components/PageHeader.vue
deleted file mode 100644
index 2ae1ca9..0000000
--- a/src/views/layout/components/PageHeader.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-    import {
-        ElPageHeader,
-        ElBreadcrumb,
-        ElBreadcrumbItem,
-    } from "element-plus";
-    import { ref, type Ref } from "vue";
-</script>
-
-<template>
-    <el-page-header>
-        <template #breadcrumb>
-            <el-breadcrumb separator="/">
-                <el-breadcrumb-item :to="{ path: './page-header.html' }">
-                    homepage
-                </el-breadcrumb-item>
-                <el-breadcrumb-item><a href="./page-header.html">route 1</a></el-breadcrumb-item>
-                <el-breadcrumb-item>route 2</el-breadcrumb-item>
-            </el-breadcrumb>
-        </template>
-        <template #content>
-            <span class="text-large font-600 mr-3"> Title </span>
-        </template>
-    </el-page-header>
-</template>
-
-<style scoped lang="less"></style>
diff --git a/src/views/layout/components/SideBar.vue b/src/views/layout/components/SideBar.vue
deleted file mode 100644
index 60368eb..0000000
--- a/src/views/layout/components/SideBar.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<script setup lang="ts">
-    import {
-        ElCol,
-        ElRow,
-        ElSubMenu,
-        ElMenu,
-        ElMenuItem,
-        ElIcon,
-        ElMenuItemGroup,
-
-    } from "element-plus";
-    import {
-        Document,
-        Menu as IconMenu,
-        Location,
-        Setting,
-    } from "@element-plus/icons-vue";
-    import { ref, type Ref } from "vue";
-    const handleOpen = (key: string, keyPath: string[]) => {
-        console.log(key, keyPath);
-    };
-    const handleClose = (key: string, keyPath: string[]) => {
-        console.log(key, keyPath);
-    };
-</script>
-
-<template>
-    <el-col :span="24">
-        <el-menu default-active="2" style="height: 100%" @open="handleOpen" @close="handleClose">
-            <el-sub-menu index="1">
-                <template #title>
-                    <el-icon>
-                        <location />
-                    </el-icon>
-                    <span>Navigator One</span>
-                </template>
-                <el-menu-item-group title="Group One">
-                    <el-menu-item index="1-1">item one</el-menu-item>
-                    <el-menu-item index="1-2">item two</el-menu-item>
-                </el-menu-item-group>
-                <el-menu-item-group title="Group Two">
-                    <el-menu-item index="1-3">item three</el-menu-item>
-                </el-menu-item-group>
-                <el-sub-menu index="1-4">
-                    <template #title>item four</template>
-                    <el-menu-item index="1-4-1">item one</el-menu-item>
-                </el-sub-menu>
-            </el-sub-menu>
-            <el-menu-item index="2">
-                <el-icon><icon-menu /></el-icon>
-                <span>Navigator Two</span>
-            </el-menu-item>
-            <el-menu-item index="3" disabled>
-                <el-icon>
-                    <document />
-                </el-icon>
-                <span>Navigator Three</span>
-            </el-menu-item>
-            <el-menu-item index="4">
-                <el-icon>
-                    <setting />
-                </el-icon>
-                <span>Navigator Four</span>
-            </el-menu-item>
-        </el-menu>
-    </el-col>
-</template>
-
-<style scoped lang="less"></style>
diff --git a/src/views/layout/layoutContainer.vue b/src/views/layout/layoutContainer.vue
deleted file mode 100644
index 0d66d5e..0000000
--- a/src/views/layout/layoutContainer.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-
-  import NavigationBar from "./components/NavigationBar.vue";
-  import SideBar from "./components/SideBar.vue"
-  import PageHeader from "./components/PageHeader.vue"
-</script>
-
-<template>
-  <el-container class="layout-container">
-    <el-header style="padding: 0">
-      <navigation-bar></navigation-bar>
-    </el-header>
-    <el-container>
-      <el-aside class="aside">
-        <side-bar></side-bar>
-      </el-aside>
-      <el-main>
-        <page-header></page-header>
-      </el-main>
-    </el-container>
-  </el-container>
-</template>
-
-<style scoped lang="less">
-  .layout-container {
-    height: 100vh;
-  }
-
-  .Navigation-Bar {
-    width: 100%;
-    // margin: 0;
-  }
-
-  .aside {
-    height: 100%;
-    // outline: auto red;
-  }
-</style>
diff --git a/src/views/user-info-page/UserInfo.vue b/src/views/user-info-page/UserInfo.vue
new file mode 100644
index 0000000..27d97dd
--- /dev/null
+++ b/src/views/user-info-page/UserInfo.vue
@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { ref, computed, reactive } from 'vue';
+import type { ComponentSize } from 'element-plus'
+import type { UploadProps } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import Header from './components/Header.vue';
+import FootLeft from './components/FootLeft.vue';
+import FootRight from './components/FootRight.vue';
+
+const size = ref<ComponentSize>('default')
+const iconStyle = computed(() => {
+    const marginMap = {
+        large: '8px',
+        default: '6px',
+        small: '4px',
+    }
+    return {
+        marginRight: marginMap[size.value] || marginMap.default,
+    }
+})
+const nickname = ref('用户名')
+const design = ref("我行我素")
+const account = ref('Asher')
+const age = ref()
+const sex = ref('男')
+const email = ref()
+const mobilePhoneNumber = ref('18428074640')
+const area = ref("四川")
+const hobby = ref()
+const work = ref()
+
+
+
+const dialogFormVisible = ref(false)
+const form = reactive({
+    name: '',
+    region: '',
+    date1: '',
+    date2: '',
+    delivery: false,
+    type: [],
+    resource: '',
+    desc: '',
+})
+const formLabelWidth = '50px'
+
+const imageUrl = ref('')
+
+const handleAvatarSuccess: UploadProps['onSuccess'] = (
+    response,
+    uploadFile
+) => {
+    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
+}
+
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+    if (rawFile.type !== 'image/jpeg') {
+        ElMessage.error('Avatar picture must be JPG format!')
+        return false
+    } else if (rawFile.size / 1024 / 1024 > 2) {
+        ElMessage.error('Avatar picture size can not exceed 2MB!')
+        return false
+    }
+    return true
+}
+</script>
+
+<template>
+    <div>
+        <Header></Header>
+
+        <div class="person_body">
+            <foot-left></foot-left>
+            <div class="person_body_right">
+                <div>
+                    <el-card>
+                        <el-descriptions class="margin-top" title="简介" :column="2" size="large" border>
+                            <template #extra>
+                                <el-button type="primary" size="medium" plain
+                                    @click="dialogFormVisible = true">操作</el-button>
+                            </template>
+                            <!-- 列表 -->
+                            <el-descriptions-item width>
+                                <template #label>
+                                    <el-icon>
+                                        <PictureFilled />
+                                    </el-icon>
+                                    头像
+                                </template>
+                                <img class="img" src="@/assets/favicon.ico" alt="" />
+                            </el-descriptions-item>
+                            <el-descriptions-item>
+                                <template #label>
+                                    <div class="cell-item">
+                                        <el-icon :style="iconStyle">
+                                            <user />
+                                        </el-icon>
+                                        username
+                                    </div>
+                                </template>
+                                {{ account }}
+                            </el-descriptions-item>
+                            <el-descriptions-item>
+                                <template #label>
+                                    <el-icon>
+                                        <Avatar />
+                                    </el-icon>
+                                    昵称
+                                </template>
+                                {{ nickname }}
+                            </el-descriptions-item>
+                            <el-descriptions-item>
+                                <template #label>
+                                    <el-icon>
+                                        <Odometer />
+                                    </el-icon>
+                                    年龄
+                                </template>
+                                {{ age }}
+                            </el-descriptions-item>
+                            <el-descriptions-item>
+                                <template #label>
+                                    <el-icon>
+                                        <Female />
+                                    </el-icon>
+                                    <el-icon>
+                                        <Male />
+                                    </el-icon>
+                                    性别
+                                </template>
+                                <el-tag size="small">{{ sex }}</el-tag>
+                            </el-descriptions-item>
+                            <el-descriptions-item>
+                                <template #label>
+                                    <el-icon>
+                                        <Message />
+                                    </el-icon>
+                                    邮箱Email
+                                </template>
+                                {{ email }}
+                            </el-descriptions-item>
+                            <el-descriptions-item>
+                                <template #label>
+                                    <el-icon>
+                                        <Iphone />
+                                    </el-icon>
+                                    手机号码
+                                </template>
+                                {{ mobilePhoneNumber }}
+                            </el-descriptions-item>
+                            <el-descriptions-item>
+                                <template #label>
+                                    <el-icon>
+                                        <Location />
+                                    </el-icon>
+                                    地区
+                                </template>
+                                {{ area }}
+                            </el-descriptions-item>
+                            <el-descriptions-item>
+                                <template #label>
+                                    <el-icon>
+                                        <OfficeBuilding />
+                                    </el-icon>
+                                    职业
+                                </template>
+                                {{ work }}
+                            </el-descriptions-item>
+
+                            <el-descriptions-item>
+                                <template #label>
+                                    <el-icon>
+                                        <Star />
+                                    </el-icon>
+                                    兴趣爱好
+                                </template>
+                                {{ hobby }}
+                            </el-descriptions-item>
+                            <el-descriptions-item>
+                                <template #label>
+                                    <el-icon>
+                                        <Star />
+                                    </el-icon>
+                                    个性签名
+                                </template>
+                                {{ design }}
+                            </el-descriptions-item>
+                            <el-descriptions-item>
+                                <template #label>
+                                    <el-icon>
+                                        <Calendar />
+                                    </el-icon>
+                                    注册日期
+                                </template>
+                                {{ createDate | formatDate }}
+                            </el-descriptions-item>
+                        </el-descriptions>
+                    </el-card>
+                </div>
+            </div>
+        </div>
+
+
+        <!-- 操作对话框 -->
+        <el-dialog v-model="dialogFormVisible" title="修改个人简介" width="600" top="20%" draggable="true">
+            <el-form :model="form">
+                <el-form-item label="头像:" :label-width="formLabelWidth">
+                    <el-upload class="avatar-uploader"
+                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :show-file-list="false"
+                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
+                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+                        <el-icon v-else class="avatar-uploader-icon">
+                            <Plus />
+                        </el-icon>
+                    </el-upload>
+                </el-form-item>
+                <el-form-item label="姓名" :label-width="formLabelWidth">
+                    <el-input v-model="form.name" autocomplete="off" />
+                </el-form-item>
+                <el-form-item label="性别" :label-width="formLabelWidth">
+                    <el-select v-model="form.region" placeholder="请选择性别">
+                        <el-option label="男" value="1" />
+                        <el-option label="女" value="0" />
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="dialogFormVisible = false">取消</el-button>
+                    <el-button type="primary" @click="dialogFormVisible = false">
+                        确认修改
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+
+</template>
+
+
+
+<style scoped lang="less">
+.person_body {
+    width: 1000px;
+    margin-top: 210px;
+    display: flex;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 5px;
+}
+
+.person_body_right {
+    width: 70%;
+    height: 500px;
+    border-radius: 5px;
+    background-color: white;
+}
+
+.box-card {
+    height: 500px;
+}
+
+.el-descriptions {
+    margin-top: 20px;
+}
+
+.margin-top {
+    margin-top: 20px;
+}
+
+.el-button {
+    width: 84px;
+}
+
+.avatar-uploader .avatar {
+    width: 78px;
+    height: 78px;
+    display: block;
+}
+</style>
+
+<style>
+.avatar-uploader .el-upload {
+    border: 1px dashed var(--el-border-color);
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+    border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 128px;
+    height: 128px;
+    text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/user-info-page/components/FootLeft.vue b/src/views/user-info-page/components/FootLeft.vue
new file mode 100644
index 0000000..7d044a5
--- /dev/null
+++ b/src/views/user-info-page/components/FootLeft.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+const handleOpen = (key: string, keyPath: string[]) => {
+    console.log(key, keyPath)
+}
+const handleClose = (key: string, keyPath: string[]) => {
+    console.log(key, keyPath)
+}
+</script>
+
+<template>
+    <div class="person_body_left">
+        <el-card class="box-card" :body-style="{ padding: '0px' }">
+            <div slot="header" class="clearfix">
+                <span class="person_body_list" style="border-bottom: none">个人中心</span>
+            </div>
+
+            <el-menu active-text-color="#00c3ff" class="el-menu-vertical-demo" :default-active="'info'"
+                @open="handleOpen" @close="handleClose">
+                <el-menu-item index="info">
+                    <el-icon>
+                        <user />
+                    </el-icon>
+                    <span>个人简介</span>
+                </el-menu-item>
+                <el-menu-item index="myarticle">
+                    <el-icon>
+                        <Files />
+                    </el-icon>
+                    <span>个人文件</span>
+                </el-menu-item>
+                <el-menu-item index="mycollect">
+                    <el-icon>
+                        <StarFilled />
+                    </el-icon>
+                    <span>收藏文件</span>
+                </el-menu-item>
+                <el-menu-item index="myfan">
+                    <el-icon>
+                        <DeleteFilled />
+                    </el-icon>
+                    <span>回收站</span>
+                </el-menu-item>
+            </el-menu>
+        </el-card>
+    </div>
+</template>
+
+<style scoped lang="less">
+.person_body_left {
+    width: 27%;
+    height: 500px;
+    border-radius: 5px;
+    margin-right: 3%;
+    text-align: center;
+}
+
+.person_body_list {
+    width: 100%;
+    height: 50px;
+    margin-top: 25px;
+    font-size: 22px;
+    border-bottom: 1px solid #f0f0f0;
+    color: #409eff;
+}
+
+.el-menu-item {
+    margin-top: 22px;
+}
+
+.box-card {
+    height: 500px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/user-info-page/components/Header.vue b/src/views/user-info-page/components/Header.vue
new file mode 100644
index 0000000..6c2ca36
--- /dev/null
+++ b/src/views/user-info-page/components/Header.vue
@@ -0,0 +1,139 @@
+<script setup="ts">
+import { ref, reactive } from 'vue';
+
+const nickname = ref('用户名');
+const design = ref("我行我素");
+const recycleCounts = ref()
+const collectCounts = ref()
+const goodCounts = ref()
+</script>
+
+<template>
+    <div class="PersonTop">
+        <div class="PersonTop_img">
+            <img v-image-preview />
+        </div>
+        <div class="PersonTop_text">
+            <div class="user_text">
+                <div class="user_name">
+                    <span> {{ nickname }} </span>
+                </div>
+                <div class="user-v">
+                    <span class="user-v-font">优质网盘作者</span>
+                </div>
+                <div class="user_qianming">
+                    <span> {{ design }}</span>
+                </div>
+                <div class="user_anniu">
+                    <el-button class="el-icon-edit" type="primary" size="medium" plain @click="">编辑</el-button>
+                </div>
+            </div>
+            <div class="user_num">
+                <div style="cursor: pointer" @click="">
+                    <div class="num_number">{{ recycleCounts }}</div>
+                    <span class="num_text">回收数</span>
+                </div>
+                <div style="cursor: pointer" @click="">
+                    <div class="num_number">{{ collectCounts }}</div>
+                    <span class="num_text">收藏数</span>
+                </div>
+                <div>
+                    <div class="num_number">{{ goodCounts }}</div>
+                    <span class="num_text">文件数</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.PersonTop {
+    width: 1000px;
+    height: 140px;
+    padding-top: 20px;
+    background-color: white;
+    margin-top: 30px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    border-radius: 5px;
+}
+
+
+.PersonTop_img {
+    width: 150px;
+    height: 120px;
+    background-color: #8c939d;
+    margin-right: 24px;
+    margin-left: 20px;
+    overflow: hidden;
+    border-radius: 20px;
+}
+
+.PersonTop_img img {
+    width: 100%;
+    height: 100%;
+    border-radius: 20px;
+}
+
+.PersonTop_text {
+    height: 120px;
+    width: 880px;
+    display: flex;
+}
+
+.user_text {
+    width: 60%;
+    height: 100%;
+    line-height: 30px;
+}
+
+.user_name {
+    font-weight: bold;
+}
+
+.user-v {
+    margin-bottom: -5px;
+}
+
+.user-v-img {
+    width: 15px;
+    height: 15px;
+}
+
+.user-v-font {
+    font-size: 15px;
+    color: #00c3ff;
+}
+
+.user_qianming {
+    font-size: 14px;
+    color: #999;
+}
+
+.user_num {
+    width: 40%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.user_num>div {
+    text-align: center;
+    border-right: 1px dotted #999;
+    box-sizing: border-box;
+    width: 80px;
+    height: 40px;
+    line-height: 20px;
+}
+
+.num_text {
+    color: #999;
+}
+
+.num_number {
+    font-size: 20px;
+    color: #333;
+}
+</style>
\ No newline at end of file