diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 78813d8..55f84c7 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -5,5 +5,7 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
+  const ElMess: typeof import('element-plus/es')['ElMess']
+  const ElMessaeg: typeof import('element-plus/es')['ElMessaeg']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
 }
diff --git a/components.d.ts b/components.d.ts
index 64a8690..3fbccd8 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,7 +7,6 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']
@@ -22,7 +21,6 @@ declare module 'vue' {
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElUpload: typeof import('element-plus/es')['ElUpload']
-    ElWatermark: typeof import('element-plus/es')['ElWatermark']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VanButton: typeof import('vant/es')['Button']
diff --git a/package-lock.json b/package-lock.json
index 4f045b8..0493e26 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@types/crypto-js": "^4.2.1",
         "axios": "^1.6.2",
         "crypto-js": "^4.2.0",
+        "echarts": "^5.4.3",
         "element-plus": "^2.4.2",
         "vant": "^4.7.3",
         "vue": "^3.3.4",
@@ -1590,6 +1591,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz",
+      "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.4.4"
+      }
+    },
     "node_modules/element-plus": {
       "version": "2.4.3",
       "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.4.3.tgz",
@@ -2877,6 +2887,11 @@
         "typescript": ">=4.2.0"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/type-check/-/type-check-0.4.0.tgz",
@@ -3297,6 +3312,14 @@
       "engines": {
         "node": ">=10"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz",
+      "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 52c5813..a6c5bab 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@types/crypto-js": "^4.2.1",
     "axios": "^1.6.2",
     "crypto-js": "^4.2.0",
+    "echarts": "^5.4.3",
     "element-plus": "^2.4.2",
     "vant": "^4.7.3",
     "vue": "^3.3.4",
diff --git a/src/App.vue b/src/App.vue
index fa6b202..c9f9e8e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,7 +11,7 @@ const onInitOrResize = () => {
   }
 }
 onMounted(() => {
-  window.onresize = onInitOrResize;
+  window.addEventListener("resize", onInitOrResize);
   onInitOrResize();
 })
 </script>
diff --git a/src/entities/AccessInformation.ts b/src/entities/AccessInformation.ts
new file mode 100644
index 0000000..616210a
--- /dev/null
+++ b/src/entities/AccessInformation.ts
@@ -0,0 +1,17 @@
+/**
+ * 访问情况类
+ */
+export interface AccessInformation {
+    /**
+     * 总下载量
+     */
+    totalDownload: number;
+    /**
+     * 总访问量
+     */
+    totalAccess: number;
+    /**
+     * 日期
+     */
+    date: string;
+}
\ No newline at end of file
diff --git a/src/entities/SearchType.ts b/src/entities/SearchType.ts
new file mode 100644
index 0000000..342dc4c
--- /dev/null
+++ b/src/entities/SearchType.ts
@@ -0,0 +1,25 @@
+/**
+ * 搜索类型
+ */
+export enum SearchType {
+    /**
+     * 文件名
+     */
+    FILE_NAME,
+    /**
+     * 文件ID
+     */
+    ID,
+    /**
+     * 上传者
+     */
+    UPLOADER,
+    /**
+     * 上传日期
+     */
+    UPLOAD_DAY,
+    /**
+     * 文件类型
+     */
+    TYPE
+}
\ No newline at end of file
diff --git a/src/views/AppPC.vue b/src/views/AppPC.vue
index 508dd38..e55dc13 100644
--- a/src/views/AppPC.vue
+++ b/src/views/AppPC.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- 主容器 -->
   <div class="Home">
     <!-- 顶部区域 -->
     <el-row>
@@ -30,9 +31,48 @@
           </div>
           <!-- 用户属性区域 -->
           <div class="HeaderHomeUserInfo">
-            <img :src="userAvatar" alt="用户头像"/>
+            <img :src="userAvatar" alt="用户头像" @click="imgLoginBox"/>
             <span>{{ userName }}</span>
           </div>
+          <!-- 用户登录弹窗 -->
+          <van-popup v-model:show="userAvatarLoginShow" round class="userLoginBox">
+            <!-- 登录/注册弹窗内容 -->
+            <div class="login-content">
+              <h2>登录/注册</h2>
+              <p>欢迎来到文件分享站</p>
+              <label for="userName">用户名</label>
+              <van-field id="userName" v-model="userName" center placeholder="请输入用户名"/>
+              <!-- 用户名输入框 -->
+              <label for="password">密码</label>
+              <van-field id="password" v-model="userPassword" center type="password" placeholder="请输入用户密码"/>
+              <!-- 密码输入框 -->
+              <div class="actions">
+                <van-button class="userLoginButton" @click="userLogin" type="primary">登录</van-button>
+                <!-- 登录按钮 -->
+                <van-button class="userLoginButton" @click="userEnroll" type="primary">注册后登录</van-button>
+                <!-- 注册按钮 -->
+              </div>
+            </div>
+          </van-popup>
+          <!-- 用户属性弹窗 -->
+          <van-popup v-model:show="userAvatarLoginShowTools" round position="top" class="userLoginBox">
+            <!-- 登录弹窗 -->
+            <div class="login-content">
+              <h2>个人中心</h2>
+              <h3>用户属性:</h3>
+              <div>
+                <p class="userNameId">用户ID: {{ userAboutId }} </p>
+                <p class="userNameName">用户名称: {{ userAboutName }}</p>
+                <p class="userNameType">用户类型:
+                  <span v-if="userAboutAuth === 'admin'">管理员</span>
+                  <span v-else-if="userAboutAuth === 'user'">普通用户</span>
+                  <span v-else>未登录</span>
+                </p>
+              </div>
+              <h3>功能区:</h3>
+              <el-button type="primary" @click="logout">退出登录</el-button>
+            </div>
+          </van-popup>
         </div>
       </el-col>
     </el-row>
@@ -42,14 +82,16 @@
       <el-col :span="17" class="Left">
         <div class="LeftFileList">
           <!-- 文件表格 -->
-          <el-table ref="fileListTable" :data="pagedLeftFileListData" class="LeftFileListData" border stripe
+          <el-table ref="fileListTable" :data="pageFileData" class="LeftFileListData" border stripe
                     style="width: 100%">
-            <el-table-column prop="LeftFileListDataID" label="ID" width="100"/>
-            <el-table-column prop="LeftFileListDataName" label="文件名称" width="650"/>
-            <el-table-column prop="LeftFileListDataFormat" label="文件格式" width="150"/>
-            <el-table-column prop="LeftFileListDataSize" label="文件大小" width="160"/>
-            <el-table-column prop="LeftFileListDataUpLoader" label="上传者" width="150"/>
-            <el-table-column prop="LeftFileListDataOption" fixed="right" label="操作" width="155">
+            <el-table-column prop="id" label="ID" width="100"/>
+            <el-table-column prop="name" label="文件名称" width="650"/>
+            <el-table-column prop="type" label="文件格式" width="150"/>
+            <el-table-column label="文件大小" width="160">
+              <template #default="scope">{{ parserByteSize(scope.row.size) }}</template>
+            </el-table-column>
+            <el-table-column prop="uploaderName" label="上传者" width="150"/>
+            <el-table-column fixed="right" label="操作" width="155">
               <!-- 操作列模板 -->
               <template #default>
                 <el-button link type="primary">下载</el-button>
@@ -65,7 +107,7 @@
               :page-sizes="[20]"
               :page-size="20"
               layout="prev, pager, next"
-              :total="LeftFileListData.length"
+              :total="totalFileCount"
               class="Pagination"
           />
         </div>
@@ -94,10 +136,11 @@
           </el-upload>
         </div>
         <!-- 访问量统计 -->
-        <div class="access">
+        <span>访问量统计:</span>
+        <div class="access" ref="accessDiv">
           <el-row :gutter="24">
             <el-col :span="12">
-              <el-card class="card" shadow="never" style="margin:10px 0 5px 5px">
+              <el-card class="card" shadow="never" style="margin:5px 0 5px 5px">
                 <template #header>
                   <span>访问量</span>
                 </template>
@@ -108,7 +151,7 @@
               </el-card>
             </el-col>
             <el-col :span="12">
-              <el-card class="card" shadow="never" style="margin: 10px 5px 5px 0">
+              <el-card class="card" shadow="never" style="margin: 5px 5px 5px 0">
                 <template #header>
                   <span>访问量</span>
                 </template>
@@ -120,20 +163,50 @@
               </el-card>
             </el-col>
           </el-row>
+          <canvas ref="mainCanvas" :width="mainCanvasWidth" height="400"></canvas>
         </div>
       </el-col>
     </el-row>
   </div>
 </template>
 
+
 <script setup lang="ts">
-// 导入ElementIcon
 import {Search, Moon, Sunny, UploadFilled} from '@element-plus/icons-vue';
-// 导入ref
-import {ref, computed} from 'vue';
+import {ref, onMounted, markRaw} from 'vue';
 import {useDark, useToggle} from "@vueuse/core"
+import {GridComponent} from 'echarts/components';
+import {LineChart} from 'echarts/charts';
+import {UniversalTransition} from 'echarts/features';
+import {CanvasRenderer} from 'echarts/renderers';
+import {LegendComponent} from 'echarts/components';
+import {EChartsType} from "echarts";
+import * as echarts from 'echarts/core';
+import {getAllFiles, Result} from "../api/Requester.ts";
+import {login} from '../api/Requester';
+import {AxiosResponse} from "axios";
+import {User} from "../entities/User.ts";
+import {ElMessage} from "element-plus";
 
+echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition, LegendComponent]);
 
+// TODO: 用户属性
+const userAboutId = ref<number>(0);
+const userAboutName = ref<string>("未登录");
+const userAboutAuth = ref<string>("未登录");
+
+// TODO: 头部组件
+// 搜索输入框
+const HeaderHomeInputText = ref('');
+// 用户头像
+const userAvatar = 'src/assets/userAvatar.jpg';
+// 用户名
+const userName = ref<string>("");
+const userPassword = ref<string>("");
+// 用户登录弹窗
+const userAvatarLoginShow = ref<boolean>(false);
+// 用户属性弹窗
+const userAvatarLoginShowTools = ref<boolean>(false);
 // 主题切换
 const isDark = useDark();
 const colorTheme = ref<boolean>(isDark.value);
@@ -141,245 +214,234 @@ const toggleDark = useToggle(isDark);
 const handleColorThemeChange = () => {
   toggleDark();
 }
-// 搜索输入框
-const HeaderHomeInputText = ref('');
-// 用户头像
-const userAvatar = 'src/assets/userAvatar.jpg';
-// 用户名
-const userName = 'MoYiJiangNans';
-// 文件列表数据
-const LeftFileListData = [
-  {
-    LeftFileListDataID: 1,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 2,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 3,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 4,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 5,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 6,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 7,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 8,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 9,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 10,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 11,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 12,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 13,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 14,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 15,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 16,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 17,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 18,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 19,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 20,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 21,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 22,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 23,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 24,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 25,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 26,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 27,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 28,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 29,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-  {
-    LeftFileListDataID: 30,
-    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
-    LeftFileListDataFormat: 'exe',
-    LeftFileListDataSize: '1748 KB',
-    LeftFileListDataUpLoader: 'MoYiJiangNans',
-  },
-];
-
+// TODO: 左侧文件列表
 // 分页相关数据
-// 当前页数
 const CurrentPage = ref(1);
-// 每页显示的条数
-const pageSize = ref(20);
-
+const totalFileCount = ref<number>(0);
+const pageFileData = ref<File[]>([]);
+const showAllFiles = () => {
+  getAllFiles(CurrentPage.value, 20).then((res) => {
+    totalFileCount.value = res.data.data.total
+    pageFileData.value = res.data.data.data
+  })
+}
+const parserByteSize = (byte: number): string => {
+  if (byte < 1024) {
+    return byte + 'B';
+  }
+  if (byte < 1024 * 1024) {
+    return (byte / 1024).toFixed(2) + "KB";
+  }
+  if (byte < 1024 * 1024 * 1024) {
+    return (byte / 1024 / 1024).toFixed(2) + "MB";
+  }
+  if (byte < 1024 * 1024 * 1024 * 1024) {
+    return (byte / 1024 / 1024 / 1024).toFixed(2) + "GB";
+  }
+  return (byte / 1024 / 1024 / 1024 / 1024).toFixed(2) + "TB";
+}
 // 处理当前页变化
 const HandleCurrentChange = (val: number) => {
   CurrentPage.value = val;
 };
 
-// 计算属性，根据当前页和每页条数来截取数据
-const pagedLeftFileListData = computed(() => {
-  const startIndex = (CurrentPage.value - 1) * pageSize.value;
-  const endIndex = startIndex + pageSize.value;
-  return LeftFileListData.slice(startIndex, endIndex);
-});
+// TODO: 右侧访问量统计与上传文件
+// 近5日访问数据
+const option = {
+  xAxis: {
+    type: 'category',
+    data: ['大大前天', '大前天', '前天', '昨天', '今天']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  legend: { // 启用 legend 配置项
+    data: ['访问量', '同昨日增长'], // 指定图例的标签
+    orient: "vertical",
+    right: 10,
+    top: 'center'
+  },
+  series: [
+    {
+      name: '访问量',
+      data: [820, 932, 901, 934, 1290],
+      type: 'line',
+      smooth: true
+    },
+    {
+      name: '同昨日增长',
+      data: [120, 132, 201, 334, 590],
+      type: 'line',
+      smooth: true
+    }
+  ]
+};
+// 图标长宽数据
+const mainCanvas = ref<HTMLCanvasElement>();
+const accessDiv = ref<HTMLDivElement>();
+const charts = ref<EChartsType>();
+const changeFigureSize = () => {
+  if (!mainCanvas.value) {
+    return;
+  }
+  if (!accessDiv.value) {
+    return;
+  }
+  mainCanvas.value.width = accessDiv.value.clientWidth;
+  if (charts.value) {
+    charts.value.resize({"width": mainCanvas.value.width, "height": mainCanvas.value.height})
+  } else {
+    charts.value = markRaw(echarts.init(mainCanvas.value))
+    charts.value.setOption(option)
+  }
+}
+
+// TODO: 用户点击事件
+// 点击用户头像弹出登录窗口
+const imgLoginBox = () => {
+  if (sessionStorage.getItem("userInfo") || localStorage.getItem("userInfo")) {
+    // 如果本地存储中有用户信息，即用户已登录
+    // 显示用户信息窗口并隐藏登录窗口
+    userAvatarLoginShowTools.value = true;
+    userAvatarLoginShow.value = false;
+  } else {
+    // 如果用户未登录，切换登录窗口的显示状态
+    userAvatarLoginShow.value = !userAvatarLoginShow.value;
+    userAvatarLoginShowTools.value = false;
+  }
+}
+// 点击登录按钮
+const userLogin = () => {
+  // 清理本地cookie
+  localStorage.removeItem("userInfo");
+  sessionStorage.removeItem("userInfo");
+  // 用户登录函数
+  if (userName.value == "" || userPassword.value == "") {
+    ElMessage.error("用户名密码不能为空");
+    localStorage.removeItem("userInfo");
+    sessionStorage.removeItem("userInfo");
+    return;
+  }
+  // 调用登录接口
+  login(userName.value, userPassword.value)
+      .then((res: AxiosResponse<Result<User>>) => {
+        // 发送登录请求
+        if (res.data.status == 200) {
+          // 登录成功
+          // 存储用户信息到sessionStorage
+          const userInfo = {
+            userName: userName.value,
+            userPassword: userPassword.value,
+          };
+          sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
+          console.log(res.data.data.name, res.data.data.id, res.data.data.auth);
+          const resdata = res.data.data
+          userAboutId.value = Number(resdata.id);
+          userAboutName.value = String(resdata.name);
+          userAboutAuth.value = String(resdata.auth)
+          // 延迟一段时间后显示用户信息窗口
+          setTimeout(() => {
+            imgLoginBox();
+          }, 1500); // 1500毫秒（1.5秒）延迟示例
+          ElMessage.success("登录成功!");
+        } else {
+          ElMessage.error("登录失败,用户名密码错误!");
+          localStorage.removeItem("userInfo");
+          sessionStorage.removeItem("userInfo");
+        }
+      })
+      .catch(() => {
+        ElMessage.error("登录失败,用户名密码错误!");
+        localStorage.removeItem("userInfo");
+        sessionStorage.removeItem("userInfo");
+      });
+};
+const logout = () => {
+  // 清除本地存储中的用户信息
+  localStorage.removeItem("userInfo");
+  sessionStorage.removeItem("userInfo");
+  // 刷新页面
+  window.location.reload();
+};
+
+// TODO: 页面加载执行
+// 在页面加载时检查sessionStorage中的用户信息
+const checkSessionStorageUserInfo = () => {
+  if (checkedStorage) {
+    return; // 如果已经检查过，不再重复执行
+  }
+  const userInfoString = sessionStorage.getItem("userInfo");
+  if (userInfoString) {
+    // 解析用户信息
+    const userInfo = JSON.parse(userInfoString);
+    userName.value = userInfo.userName;
+    userPassword.value = userInfo.userPassword;
+    // 验证用户信息
+    verifyUserInfo();
+  }
+};
+
+// 验证用户信息
+const verifyUserInfo = () => {
+  if (userName.value === "" || userPassword.value === "") {
+    return; // 用户名或密码为空，不进行验证
+  }
+  login(userName.value, userPassword.value)
+      .then((res: AxiosResponse<Result<User>>) => {
+        if (res.data.status === 200) {
+          console.log(res.data.data.name, res.data.data.id, res.data.data.auth);
+          userAboutId.value = Number(res.data.data.id);
+          userAboutName.value = String(res.data.data.name);
+          userAboutAuth.value = String(res.data.data.auth)
+          ElMessage.success("登录成功!");
+          userAvatarLoginShowTools.value = true; // 验证成功，显示用户信息窗口
+          userAvatarLoginShow.value = false; // 隐藏登录窗口
+        } else {
+          ElMessage.error("验证失败，请重新登录!");
+          userAvatarLoginShowTools.value = false; // 验证失败，隐藏用户信息窗口
+          userAvatarLoginShow.value = true; // 显示登录窗口
+          localStorage.removeItem("userInfo");
+          sessionStorage.removeItem("userInfo");
+        }
+      })
+      .catch(() => {
+        ElMessage.error("验证失败，请重新登录!");
+        userAvatarLoginShowTools.value = false; // 验证失败，隐藏用户信息窗口
+        userAvatarLoginShow.value = true; // 显示登录窗口
+        localStorage.removeItem("userInfo");
+        sessionStorage.removeItem("userInfo");
+      });
+};
+
+// 在页面加载时检查本地存储中的用户信息
+let checkedStorage = false;
+const checkLocalStorageUserInfo = () => {
+  if (checkedStorage) {
+    return; // 如果已经检查过，不再重复执行
+  }
+  const userInfoString = localStorage.getItem("userInfo");
+  if (userInfoString) {
+    // 解析用户信息
+    const userInfo = JSON.parse(userInfoString);
+    userName.value = userInfo.userName;
+    userPassword.value = userInfo.userPassword;
+    // 验证用户信息
+    verifyUserInfo();
+  }
+};
+
+// TODO: onMounted实时更新
+onMounted(() => {
+  window.addEventListener("resize", changeFigureSize);
+  changeFigureSize();
+  showAllFiles();
+  checkSessionStorageUserInfo();
+  checkLocalStorageUserInfo();
+  checkedStorage = true
+})
 </script>
 
+
 <style scoped>
 /* 顶部样式 */
 .HeaderHome {
@@ -447,4 +509,16 @@ img {
   font-weight: bold;
   line-height: 1.3;
 }
+
+.login-content {
+  width: 45vh;
+  height: 30vh;
+  margin: 20px;
+  top: 50%;
+  left: 50%;
+}
+
+.userLoginButton {
+  margin: 10px 10px 0 10px;
+}
 </style>