From 75b13beaa8c5c13b587746a7f1062f087544f5db Mon Sep 17 00:00:00 2001
From: MoYi <1545929126@qq.com>
Date: Sat, 2 Dec 2023 22:00:34 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E4=B8=8B=E8=BD=BD?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E4=B8=8E=E8=AE=BF=E9=97=AE=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=9A=84=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/Requester.ts |  15 ++-
 src/entities/Auth.ts |   2 +-
 src/entities/User.ts |   2 +-
 src/views/AppPC.vue  | 306 +++++++++++++++++++++++--------------------
 4 files changed, 177 insertions(+), 148 deletions(-)

diff --git a/src/api/Requester.ts b/src/api/Requester.ts
index 045ffc9..94c70a9 100644
--- a/src/api/Requester.ts
+++ b/src/api/Requester.ts
@@ -6,6 +6,7 @@ import {User} from "../entities/User";
 import {Auth} from "../entities/Auth";
 import {File} from "../entities/File";
 import {SearchType} from "../entities/SearchType.ts";
+import {AccessInformation} from "../entities/AccessInformation.ts";
 
 export const baseUrl = 'http://localhost:8081';
 
@@ -27,7 +28,7 @@ const instance = axios.create({
     timeout: 1000,
     headers: {'Content-Type': 'application/json'}
 });
-axios.interceptors.request.use(function (config) {
+instance.interceptors.request.use(function (config) {
     config.headers['Authorization'] = window.sessionStorage.getItem("authorization");
     return config;
 }, function (error) {
@@ -36,8 +37,8 @@ axios.interceptors.request.use(function (config) {
 });
 
 // 添加响应拦截器
-axios.interceptors.response.use(function (response) {
-    const authorization = response.headers['Set-Authorization'];
+instance.interceptors.response.use(function (response) {
+    const authorization = response.headers['set-authorization'];
     if (authorization) {
         window.sessionStorage.setItem("authorization", authorization);
     }
@@ -137,5 +138,11 @@ export const search = (page: number, num: number, searchType: SearchType, data:
  * @param count 获取的天数
  */
 export const getAccessInformation = (count: number) => {
-    return instance.get<File[]>("/api/access/get", {params: {count}});
+    return instance.get<AccessInformation[]>("/api/access/get", {params: {count}});
+}
+/**
+ * 获取总访问情况
+ */
+export const getTotalAccessInformation = () => {
+    return instance.get<AccessInformation>("/api/access/getAll");
 }
\ No newline at end of file
diff --git a/src/entities/Auth.ts b/src/entities/Auth.ts
index ac1f7d0..98bcb97 100644
--- a/src/entities/Auth.ts
+++ b/src/entities/Auth.ts
@@ -9,5 +9,5 @@ export enum Auth {
     /**
      * 管理员
      */
-    ADMIN
+    ADMIN,
 }
\ No newline at end of file
diff --git a/src/entities/User.ts b/src/entities/User.ts
index 3dec1f4..6587af7 100644
--- a/src/entities/User.ts
+++ b/src/entities/User.ts
@@ -7,7 +7,7 @@ export interface User {
     /**
      * 用户id
      */
-    id: string
+    id: number;
     /**
      * 用户名
      */
diff --git a/src/views/AppPC.vue b/src/views/AppPC.vue
index 44a3a15..c0f9ef8 100644
--- a/src/views/AppPC.vue
+++ b/src/views/AppPC.vue
@@ -6,14 +6,10 @@
       <el-col :span="24" class="Header">
         <!-- 顶部内容区域 -->
         <div class="HeaderHome">
-          <!-- 主题切换按钮 -->
-          <el-switch v-model="colorTheme" class="ml-2 input-button"
-                     style="--el-switch-on-color: var(--el-border-color-dark); --el-switch-off-color: var(--el-border-color-light)"
-                     :active-icon="Moon" :inactive-icon="Sunny" @change="handleColorThemeChange"/>
           <!-- 顶部输入框 -->
           <div class="HeaderHomeInput">
             <!-- 输入框属性与文本 -->
-            <el-input v-model="HeaderHomeInputText" placeholder="请输入要搜索的内容">
+            <el-input v-model="HeaderHomeInputText" class="inputText" placeholder="请输入要搜索的内容">
               <!-- 选择下拉框 -->
               <template #prepend>
                 <el-select placeholder="名字" value-key="1" style="width: 100px">
@@ -55,17 +51,16 @@
             </div>
           </van-popup>
           <!-- 用户属性弹窗 -->
-          <van-popup v-model:show="userAvatarLoginShowTools" round position="top" class="userLoginBox">
+          <van-popup v-model:show="userAvatarLoginShowTools" round 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-if="userAboutAuth === Auth.ADMIN">管理员</span>
+                  <span v-else-if="userAboutAuth === Auth.USER">普通用户</span>
                   <span v-else>未登录</span>
                 </p>
               </div>
@@ -73,6 +68,20 @@
               <el-button type="primary" @click="logout">退出登录</el-button>
             </div>
           </van-popup>
+          <!-- 文件详情 -->
+          <van-popup v-model:show="aboutFile" round class="adoutFile">
+            <div class="aboutFileBox">
+              <h2>文件名称:<span>XXXXXXX</span></h2>
+              <div>
+                <p>文件ID: <span>1</span></p>
+                <p>文件名: <span>测试</span></p>
+                <p>文件类型: <span>exe</span></p>
+                <p>文件MD5: <span>hjs7g90shds7s09ydg9s07gs90g7s7g</span></p>
+                <p>文件上传者: <span>wzp</span></p>
+                <p>文件上传时间: <span>2022-07-12 16:21:39</span></p>
+              </div>
+            </div>
+          </van-popup>
         </div>
       </el-col>
     </el-row>
@@ -91,12 +100,12 @@
               <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">
+            <el-table-column fixed="right" label="操作" :width="fileOptions">
               <!-- 操作列模板 -->
               <template #default>
                 <el-button link type="primary">下载</el-button>
-                <el-button link type="primary">详情</el-button>
-                <el-button link type="danger">删除</el-button>
+                <el-button link type="primary" @click="about">详情</el-button>
+                <el-button link type="danger" v-if="userAboutAuth === Auth.ADMIN">删除</el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -144,26 +153,26 @@
                 <template #header>
                   <span>访问量</span>
                 </template>
-                <div class="trafficData">12,584</div>
+                <div class="trafficData"> {{ allAccess }}</div>
                 <div class="trafficDataTag">同昨日增长
-                  <el-tag type="success">+5%</el-tag>
+                  <el-tag type="success">+{{ allContrastAccess }}条</el-tag>
                 </div>
               </el-card>
             </el-col>
             <el-col :span="12">
               <el-card class="card" shadow="never" style="margin: 5px 5px 5px 0">
                 <template #header>
-                  <span>访问量</span>
+                  <span>下载量</span>
                 </template>
-                <div class="trafficData">584</div>
+                <div class="trafficData"> {{ allDownload }}</div>
                 <div class="trafficDataTag">
-                  同昨日减少
-                  <el-tag type="danger">-15%</el-tag>
+                  同昨日增加
+                  <el-tag type="success">+{{ allContrastDownload }}条</el-tag>
                 </div>
               </el-card>
             </el-col>
           </el-row>
-          <canvas ref="mainCanvas" :width="mainCanvasWidth" height="400"></canvas>
+          <canvas ref="mainCanvas" height="400"></canvas>
         </div>
       </el-col>
     </el-row>
@@ -172,28 +181,49 @@
 
 
 <script setup lang="ts">
-import {Search, Moon, Sunny, UploadFilled} from '@element-plus/icons-vue';
-import {ref, onMounted, markRaw} from 'vue';
+import {Search, UploadFilled} from '@element-plus/icons-vue';
+import 'element-plus/theme-chalk/dark/css-vars.css'
+import {ref, onMounted, computed} 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 {getAllFiles, register, Result, getAccessInformation, getTotalAccessInformation} from "../api/Requester.ts";
 import {login} from '../api/Requester';
 import {AxiosResponse} from "axios";
 import {User} from "../entities/User.ts";
 import {ElMessage} from "element-plus";
+import {Auth} from "../entities/Auth.ts";
+import {File} from "../entities/File.ts";
+import {AccessInformation} from "../entities/AccessInformation.ts";
 
 echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition, LegendComponent]);
 
 // TODO: 用户属性
-const userAboutId = ref<number>(0);
-const userAboutName = ref<string>("未登录");
-const userAboutAuth = ref<string>("未登录");
+const userAboutName = computed(() => {
+  const username = sessionStorage.getItem("username");
+  if (username) {
+    return username;
+  }
+  return "未登录"
+})
+const userAboutAuth = computed(() => {
+  const authStorage = sessionStorage.getItem("auth");
+  if (authStorage) {
+    console.log(authStorage)
+    switch (authStorage) {
+      case "admin":
+        return Auth.ADMIN;
+      default:
+        return Auth.USER;
+    }
+  } else {
+    return "未登录"
+  }
+})
 
 // TODO: 头部组件
 // 搜索输入框
@@ -208,21 +238,35 @@ const userAvatarLoginShow = ref<boolean>(false);
 // 用户属性弹窗
 const userAvatarLoginShowTools = ref<boolean>(false);
 // 主题切换
-const isDark = useDark();
-const colorTheme = ref<boolean>(isDark.value);
+const isDark = useDark()
 const toggleDark = useToggle(isDark);
-const handleColorThemeChange = () => {
-  toggleDark();
+const colorTheme = ref<boolean>(isDark.value);
+// 自动主题
+const autoSetTheme = () => {
+  const now = new Date();
+  const hour = now.getHours();
+  colorTheme.value = !(hour >= 0 && hour < 24);
+  toggleDark(colorTheme.value);
 }
 // TODO: 左侧文件列表
+const aboutFile = ref<boolean>(false);
+// admin 与 user 的UI变动
+const fileOptions = computed(() => {
+  switch (userAboutAuth.value) {
+    case Auth.ADMIN:
+      return 160;
+    default:
+      return 110;
+  }
+});
 // 分页相关数据
 const CurrentPage = ref(1);
 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
+    totalFileCount.value = res.data.data.total;
+    pageFileData.value = res.data.data.data;
   })
 }
 const parserByteSize = (byte: number): string => {
@@ -247,7 +291,7 @@ const HandleCurrentChange = (val: number) => {
 };
 
 // TODO: 右侧访问量统计与上传文件
-// 近5日访问数据
+// 访问情况
 const option = {
   xAxis: {
     type: 'category',
@@ -257,7 +301,7 @@ const option = {
     type: 'value'
   },
   legend: { // 启用 legend 配置项
-    data: ['访问量', '同昨日增长'], // 指定图例的标签
+    data: ['访问量', '下载量'], // 指定图例的标签
     orient: "vertical",
     right: 10,
     top: 'center'
@@ -265,22 +309,37 @@ const option = {
   series: [
     {
       name: '访问量',
-      data: [820, 932, 901, 934, 1290],
+      data: [],
       type: 'line',
       smooth: true
     },
     {
-      name: '同昨日增长',
-      data: [120, 132, 201, 334, 590],
+      name: '下载量',
+      data: [],
       type: 'line',
       smooth: true
     }
   ]
 };
-// 图标长宽数据
+// 近5日访问数据
+const contrastAccess = ref<number>();
+const contrastDownload = ref<number>();
+const fiveData = () => {
+  getAccessInformation(5)
+      .then((res: AxiosResponse<AccessInformation[]>) => {
+        for (let datum of res.data) {
+          option.series[0].data.push(datum.totalAccess);
+          option.series[1].data.push(datum.totalDownload);
+        }
+        contrastAccess.value = res.data[4].totalAccess
+        contrastDownload.value = res.data[4].totalDownload
+        changeFigureSize();
+      })
+}
+// 图表长宽数据
 const mainCanvas = ref<HTMLCanvasElement>();
 const accessDiv = ref<HTMLDivElement>();
-const charts = ref<EChartsType>();
+let charts: echarts.ECharts;
 const changeFigureSize = () => {
   if (!mainCanvas.value) {
     return;
@@ -289,18 +348,32 @@ const changeFigureSize = () => {
     return;
   }
   mainCanvas.value.width = accessDiv.value.clientWidth;
-  if (charts.value) {
-    charts.value.resize({"width": mainCanvas.value.width, "height": mainCanvas.value.height})
+  if (charts) {
+    charts.resize({"width": mainCanvas.value.width, "height": mainCanvas.value.height})
   } else {
-    charts.value = markRaw(echarts.init(mainCanvas.value))
-    charts.value.setOption(option)
+    charts = echarts.init(mainCanvas.value);
+    charts.setOption(option)
   }
 }
+// 所有数据总和
+const allAccess = ref<number>();
+const allDownload = ref<number>();
+const allData = () => {
+  getTotalAccessInformation()
+      .then((res: AxiosResponse<AccessInformation>) => {
+        const resdata = res.data;
+        allAccess.value = resdata.totalAccess
+        allDownload.value = resdata.totalDownload
+      })
+}
+// 增长数据
+const allContrastAccess = contrastAccess;
+const allContrastDownload = contrastDownload;
 
 // TODO: 用户点击事件
 // 点击用户头像弹出登录窗口
 const imgLoginBox = () => {
-  if (sessionStorage.getItem("userInfo") || localStorage.getItem("userInfo")) {
+  if (sessionStorage.getItem("authorization")) {
     // 如果本地存储中有用户信息，即用户已登录
     // 显示用户信息窗口并隐藏登录窗口
     userAvatarLoginShowTools.value = true;
@@ -314,13 +387,10 @@ const imgLoginBox = () => {
 // 点击登录按钮
 const userLogin = () => {
   // 清理本地cookie
-  localStorage.removeItem("userInfo");
-  sessionStorage.removeItem("userInfo");
+  sessionStorage.clear();
   // 用户登录函数
   if (userName.value == "" || userPassword.value == "") {
     ElMessage.error("用户名密码不能为空");
-    localStorage.removeItem("userInfo");
-    sessionStorage.removeItem("userInfo");
     return;
   }
   // 调用登录接口
@@ -328,117 +398,65 @@ const userLogin = () => {
       .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)
+          const username = res.data.data.name;
+          sessionStorage.setItem("username", username);
+          sessionStorage.setItem("auth", res.data.data.auth.toString());
           // 延迟一段时间后显示用户信息窗口
           setTimeout(() => {
             imgLoginBox();
-          }, 1500); // 1500毫秒（1.5秒）延迟示例
+          }, 1000); // 1000毫秒（1秒）延迟示例
           ElMessage.success("登录成功!");
+          window.location.reload()
         } else {
           ElMessage.error("登录失败,用户名密码错误!");
-          localStorage.removeItem("userInfo");
-          sessionStorage.removeItem("userInfo");
         }
       })
-      .catch(() => {
-        ElMessage.error("登录失败,用户名密码错误!");
-        localStorage.removeItem("userInfo");
-        sessionStorage.removeItem("userInfo");
-      });
 };
+// 注销登陆
 const logout = () => {
+  // 提醒弹窗
+  ElMessage.success("退出成功!")
   // 清除本地存储中的用户信息
-  localStorage.removeItem("userInfo");
-  sessionStorage.removeItem("userInfo");
-  // 刷新页面
-  window.location.reload();
+  sessionStorage.clear();
+  userAvatarLoginShowTools.value = false;
+  window.location.reload()
 };
-
-// TODO: 页面加载执行
-// 在页面加载时检查sessionStorage中的用户信息
-const checkSessionStorageUserInfo = () => {
-  if (checkedStorage) {
-    return; // 如果已经检查过，不再重复执行
+// 用户注册并登录接口
+const userEnroll = () => {
+  // 用户注册函数
+  if (userName.value == '' || userPassword.value == '') {
+    ElMessage.error("用户名密码不能为空")
+    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();
-  }
-};
-
+  register(userName.value, userPassword.value, Auth.USER).then((res) => {
+    switch (res.data.status) {
+      case 251:
+        ElMessage.error("邀请码错误！");
+        break;
+      case 501:
+        ElMessage.error("存在同名用户！");
+        break;
+      case 200:
+        ElMessage.success("注册成功");
+        sessionStorage.setItem("username", res.data.data.name);
+        sessionStorage.setItem("auth", res.data.data.auth.toString());
+        break;
+      default:
+        ElMessage.error("无法注册！");
+    }
+  });
+}
+// 文件详情
+const about = () => {
+  aboutFile.value = true
+}
 // TODO: onMounted实时更新
 onMounted(() => {
   window.addEventListener("resize", changeFigureSize);
-  changeFigureSize();
+  fiveData();
   showAllFiles();
-  checkSessionStorageUserInfo();
-  checkLocalStorageUserInfo();
-  checkedStorage = true
+  autoSetTheme();
+  allData();
 })
 </script>
 
@@ -522,4 +540,8 @@ img {
 .userLoginButton {
   margin: 10px 10px 0 10px;
 }
+
+.aboutFileBox {
+  margin: 20px;
+}
 </style>

From 8dbb0c862ee4683254fd3a4b4ca48fc26b50ec54 Mon Sep 17 00:00:00 2001
From: Wzp-2008 <minecraftwzpmc@163.com>
Date: Sun, 3 Dec 2023 17:14:54 +0800
Subject: [PATCH 2/4] style: rename some element and class

---
 components.d.ts     |   1 -
 src/views/AppPC.vue | 128 ++++++++++++++++++++++----------------------
 vite.config.ts      |   4 +-
 3 files changed, 66 insertions(+), 67 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 3fbccd8..0e7dcfc 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -16,7 +16,6 @@ declare module 'vue' {
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
diff --git a/src/views/AppPC.vue b/src/views/AppPC.vue
index c0f9ef8..8f6734a 100644
--- a/src/views/AppPC.vue
+++ b/src/views/AppPC.vue
@@ -1,15 +1,15 @@
 <template>
   <!-- 主容器 -->
-  <div class="Home">
+  <div>
     <!-- 顶部区域 -->
     <el-row>
-      <el-col :span="24" class="Header">
+      <el-col :span="24">
         <!-- 顶部内容区域 -->
-        <div class="HeaderHome">
+        <div class="header">
           <!-- 顶部输入框 -->
-          <div class="HeaderHomeInput">
+          <div>
             <!-- 输入框属性与文本 -->
-            <el-input v-model="HeaderHomeInputText" class="inputText" placeholder="请输入要搜索的内容">
+            <el-input v-model="searchInput" placeholder="请输入要搜索的内容">
               <!-- 选择下拉框 -->
               <template #prepend>
                 <el-select placeholder="名字" value-key="1" style="width: 100px">
@@ -26,41 +26,41 @@
             </el-input>
           </div>
           <!-- 用户属性区域 -->
-          <div class="HeaderHomeUserInfo">
+          <div class="header-user">
             <img :src="userAvatar" alt="用户头像" @click="imgLoginBox"/>
-            <span>{{ userName }}</span>
+            <span>{{ username }}</span>
           </div>
           <!-- 用户登录弹窗 -->
-          <van-popup v-model:show="userAvatarLoginShow" round class="userLoginBox">
+          <van-popup v-model:show="userAvatarLoginShow" round>
             <!-- 登录/注册弹窗内容 -->
             <div class="login-content">
               <h2>登录/注册</h2>
               <p>欢迎来到文件分享站</p>
               <label for="userName">用户名</label>
-              <van-field id="userName" v-model="userName" center placeholder="请输入用户名"/>
+              <van-field id="userName" v-model="usernameInput" center placeholder="请输入用户名"/>
               <!-- 用户名输入框 -->
               <label for="password">密码</label>
-              <van-field id="password" v-model="userPassword" center type="password" placeholder="请输入用户密码"/>
+              <van-field id="password" v-model="userPasswordInput" center type="password" placeholder="请输入用户密码"/>
               <!-- 密码输入框 -->
               <div class="actions">
-                <van-button class="userLoginButton" @click="userLogin" type="primary">登录</van-button>
+                <van-button class="user-login-register-button" @click="userLogin" type="primary">登录</van-button>
                 <!-- 登录按钮 -->
-                <van-button class="userLoginButton" @click="userEnroll" type="primary">注册后登录</van-button>
+                <van-button class="user-login-register-button" @click="userEnroll" type="primary">注册后登录</van-button>
                 <!-- 注册按钮 -->
               </div>
             </div>
           </van-popup>
           <!-- 用户属性弹窗 -->
-          <van-popup v-model:show="userAvatarLoginShowTools" round class="userLoginBox">
+          <van-popup v-model:show="userAvatarLoginShowTools" round>
             <!-- 登录弹窗 -->
             <div class="login-content">
               <h2>个人中心</h2>
               <h3>用户属性:</h3>
               <div>
-                <p class="userNameName">用户名称: {{ userAboutName }}</p>
-                <p class="userNameType">用户类型:
-                  <span v-if="userAboutAuth === Auth.ADMIN">管理员</span>
-                  <span v-else-if="userAboutAuth === Auth.USER">普通用户</span>
+                <p>用户名称: {{ username }}</p>
+                <p>用户类型:
+                  <span v-if="userAuth === Auth.ADMIN">管理员</span>
+                  <span v-else-if="userAuth === Auth.USER">普通用户</span>
                   <span v-else>未登录</span>
                 </p>
               </div>
@@ -69,8 +69,8 @@
             </div>
           </van-popup>
           <!-- 文件详情 -->
-          <van-popup v-model:show="aboutFile" round class="adoutFile">
-            <div class="aboutFileBox">
+          <van-popup v-model:show="showFileInformation" round>
+            <div class="file-information-popover">
               <h2>文件名称:<span>XXXXXXX</span></h2>
               <div>
                 <p>文件ID: <span>1</span></p>
@@ -86,13 +86,12 @@
       </el-col>
     </el-row>
     <!-- 下面区域 -->
-    <el-row class="LeftAndRightBox">
+    <el-row class="main">
       <!-- 左侧区域 -->
-      <el-col :span="17" class="Left">
-        <div class="LeftFileList">
+      <el-col :span="17" class="files-data">
+        <div>
           <!-- 文件表格 -->
-          <el-table ref="fileListTable" :data="pageFileData" class="LeftFileListData" border stripe
-                    style="width: 100%">
+          <el-table ref="fileListTable" :data="pageFileData" class="files-data-table" border stripe>
             <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"/>
@@ -100,30 +99,30 @@
               <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="fileOptions">
+            <el-table-column fixed="right" label="操作" :width="fileOptionRowWidth">
               <!-- 操作列模板 -->
               <template #default>
                 <el-button link type="primary">下载</el-button>
-                <el-button link type="primary" @click="about">详情</el-button>
-                <el-button link type="danger" v-if="userAboutAuth === Auth.ADMIN">删除</el-button>
+                <el-button link type="primary" @click="showFileInformationDialog">详情</el-button>
+                <el-button link type="danger" v-if="userAuth === Auth.ADMIN">删除</el-button>
               </template>
             </el-table-column>
           </el-table>
           <!-- 分页组件 -->
           <el-pagination
               @current-change="HandleCurrentChange"
-              :current-page="CurrentPage"
+              :current-page="currentPage"
               :page-sizes="[20]"
               :page-size="20"
               layout="prev, pager, next"
               :total="totalFileCount"
-              class="Pagination"
+              class="pagination"
           />
         </div>
       </el-col>
       <!-- 右侧区域 -->
-      <el-col :span="7" class="Right">
-        <div class="upload">
+      <el-col :span="7" class="file-uploader">
+        <div>
           <span>文件上传:</span>
           <el-upload
               class="upload-demo"
@@ -146,15 +145,15 @@
         </div>
         <!-- 访问量统计 -->
         <span>访问量统计:</span>
-        <div class="access" ref="accessDiv">
+        <div ref="accessDiv">
           <el-row :gutter="24">
             <el-col :span="12">
               <el-card class="card" shadow="never" style="margin:5px 0 5px 5px">
                 <template #header>
                   <span>访问量</span>
                 </template>
-                <div class="trafficData"> {{ allAccess }}</div>
-                <div class="trafficDataTag">同昨日增长
+                <div class="access-data"> {{ allAccess }}</div>
+                <div class="access-data-increase">同昨日增长
                   <el-tag type="success">+{{ allContrastAccess }}条</el-tag>
                 </div>
               </el-card>
@@ -164,8 +163,8 @@
                 <template #header>
                   <span>下载量</span>
                 </template>
-                <div class="trafficData"> {{ allDownload }}</div>
-                <div class="trafficDataTag">
+                <div class="access-data"> {{ allDownload }}</div>
+                <div class="access-data-increase">
                   同昨日增加
                   <el-tag type="success">+{{ allContrastDownload }}条</el-tag>
                 </div>
@@ -203,14 +202,14 @@ import {AccessInformation} from "../entities/AccessInformation.ts";
 echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition, LegendComponent]);
 
 // TODO: 用户属性
-const userAboutName = computed(() => {
+const username = computed(() => {
   const username = sessionStorage.getItem("username");
   if (username) {
     return username;
   }
   return "未登录"
 })
-const userAboutAuth = computed(() => {
+const userAuth = computed(() => {
   const authStorage = sessionStorage.getItem("auth");
   if (authStorage) {
     console.log(authStorage)
@@ -227,12 +226,12 @@ const userAboutAuth = computed(() => {
 
 // TODO: 头部组件
 // 搜索输入框
-const HeaderHomeInputText = ref('');
+const searchInput = ref('');
 // 用户头像
 const userAvatar = 'src/assets/userAvatar.jpg';
 // 用户名
-const userName = ref<string>("");
-const userPassword = ref<string>("");
+const usernameInput = ref<string>("");
+const userPasswordInput = ref<string>("");
 // 用户登录弹窗
 const userAvatarLoginShow = ref<boolean>(false);
 // 用户属性弹窗
@@ -249,10 +248,10 @@ const autoSetTheme = () => {
   toggleDark(colorTheme.value);
 }
 // TODO: 左侧文件列表
-const aboutFile = ref<boolean>(false);
+const showFileInformation = ref<boolean>(false);
 // admin 与 user 的UI变动
-const fileOptions = computed(() => {
-  switch (userAboutAuth.value) {
+const fileOptionRowWidth = computed(() => {
+  switch (userAuth.value) {
     case Auth.ADMIN:
       return 160;
     default:
@@ -260,11 +259,11 @@ const fileOptions = computed(() => {
   }
 });
 // 分页相关数据
-const CurrentPage = ref(1);
+const currentPage = ref(1);
 const totalFileCount = ref<number>(0);
 const pageFileData = ref<File[]>([]);
 const showAllFiles = () => {
-  getAllFiles(CurrentPage.value, 20).then((res) => {
+  getAllFiles(currentPage.value, 20).then((res) => {
     totalFileCount.value = res.data.data.total;
     pageFileData.value = res.data.data.data;
   })
@@ -286,7 +285,7 @@ const parserByteSize = (byte: number): string => {
 }
 // 处理当前页变化
 const HandleCurrentChange = (val: number) => {
-  CurrentPage.value = val;
+  currentPage.value = val;
   showAllFiles();
 };
 
@@ -389,12 +388,12 @@ const userLogin = () => {
   // 清理本地cookie
   sessionStorage.clear();
   // 用户登录函数
-  if (userName.value == "" || userPassword.value == "") {
+  if (usernameInput.value == "" || userPasswordInput.value == "") {
     ElMessage.error("用户名密码不能为空");
     return;
   }
   // 调用登录接口
-  login(userName.value, userPassword.value)
+  login(usernameInput.value, userPasswordInput.value)
       .then((res: AxiosResponse<Result<User>>) => {
         // 发送登录请求
         if (res.data.status == 200) {
@@ -424,11 +423,11 @@ const logout = () => {
 // 用户注册并登录接口
 const userEnroll = () => {
   // 用户注册函数
-  if (userName.value == '' || userPassword.value == '') {
+  if (usernameInput.value == '' || userPasswordInput.value == '') {
     ElMessage.error("用户名密码不能为空")
     return;
   }
-  register(userName.value, userPassword.value, Auth.USER).then((res) => {
+  register(usernameInput.value, userPasswordInput.value, Auth.USER).then((res) => {
     switch (res.data.status) {
       case 251:
         ElMessage.error("邀请码错误！");
@@ -447,8 +446,8 @@ const userEnroll = () => {
   });
 }
 // 文件详情
-const about = () => {
-  aboutFile.value = true
+const showFileInformationDialog = () => {
+  showFileInformation.value = true
 }
 // TODO: onMounted实时更新
 onMounted(() => {
@@ -463,7 +462,7 @@ onMounted(() => {
 
 <style scoped>
 /* 顶部样式 */
-.HeaderHome {
+.header {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -471,7 +470,7 @@ onMounted(() => {
 }
 
 /* 用户属性样式 */
-.HeaderHomeUserInfo {
+.header-user {
   display: flex;
   align-items: center;
 }
@@ -484,45 +483,46 @@ img {
   margin: 10px 10px 10px 10px;
 }
 
-.LeftAndRightBox {
+.main {
   flex-direction: row;
   flex-wrap: nowrap;
   width: calc(100% - 40px);
 }
 
 /* 左侧样式 */
-.Left {
+.files-data {
   margin: 5px 5px 0 15px;
   font-size: smaller;
 }
 
-.Right {
+.file-uploader {
   margin: 5px -15px 0 5px;
 }
 
 /* 分页样式 */
-.Pagination {
+.pagination {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 /* 设置列表高度为100% */
-.LeftFileListData {
+.files-data-table {
   height: 100%;
+  width: 100% !important;
 }
 
 .card {
   border-radius: 10px;
 }
 
-.trafficData {
+.access-data {
   font-size: 40px;
   font-weight: bold;
   line-height: 1.5;
 }
 
-.trafficDataTag {
+.access-data-increase {
   display: flex;
   font-size: 15px;
   font-weight: bold;
@@ -537,11 +537,11 @@ img {
   left: 50%;
 }
 
-.userLoginButton {
+.user-login-register-button {
   margin: 10px 10px 0 10px;
 }
 
-.aboutFileBox {
+.file-information-popover {
   margin: 20px;
 }
 </style>
diff --git a/vite.config.ts b/vite.config.ts
index 5ebe28c..56b2d05 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -11,10 +11,10 @@ export default defineConfig({
     server: {
         host: "0.0.0.0",
         port: 5173,
-        https: {
+/*        https: {
             key: readFileSync("keys/agent2-key.pem"),
             cert: readFileSync("keys/agent2-cert.pem"),
-        }
+        }*/
     },
     plugins: [
         AutoImport({

From b24103ea7f776465b8c89891860389585c587619 Mon Sep 17 00:00:00 2001
From: Wzp-2008 <minecraftwzpmc@163.com>
Date: Sun, 3 Dec 2023 17:17:25 +0800
Subject: [PATCH 3/4] style: rename some element and class

---
 src/views/AppPC.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/AppPC.vue b/src/views/AppPC.vue
index 8f6734a..2038ccf 100644
--- a/src/views/AppPC.vue
+++ b/src/views/AppPC.vue
@@ -110,7 +110,7 @@
           </el-table>
           <!-- 分页组件 -->
           <el-pagination
-              @current-change="HandleCurrentChange"
+              @current-change="handlerPageChange"
               :current-page="currentPage"
               :page-sizes="[20]"
               :page-size="20"
@@ -284,7 +284,7 @@ const parserByteSize = (byte: number): string => {
   return (byte / 1024 / 1024 / 1024 / 1024).toFixed(2) + "TB";
 }
 // 处理当前页变化
-const HandleCurrentChange = (val: number) => {
+const handlerPageChange = (val: number) => {
   currentPage.value = val;
   showAllFiles();
 };

From 6e2346cbd686ba8dc063c9d51939bd1fb7707f53 Mon Sep 17 00:00:00 2001
From: Wzp-2008 <minecraftwzpmc@163.com>
Date: Sun, 3 Dec 2023 17:37:47 +0800
Subject: [PATCH 4/4] fix: fix some bug

---
 components.d.ts     |  1 +
 src/views/AppPC.vue | 42 +++++++++++++++++++++++++-----------------
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 0e7dcfc..3e13022 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -24,6 +24,7 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     VanButton: typeof import('vant/es')['Button']
     VanCellGroup: typeof import('vant/es')['CellGroup']
+    VanConfigProvider: typeof import('vant/es')['ConfigProvider']
     VanField: typeof import('vant/es')['Field']
     VanImage: typeof import('vant/es')['Image']
     VanPopup: typeof import('vant/es')['Popup']
diff --git a/src/views/AppPC.vue b/src/views/AppPC.vue
index 2038ccf..fa1baf4 100644
--- a/src/views/AppPC.vue
+++ b/src/views/AppPC.vue
@@ -1,4 +1,5 @@
 <template>
+  <van-config-provider :theme="vantTheme"></van-config-provider>
   <!-- 主容器 -->
   <div>
     <!-- 顶部区域 -->
@@ -26,8 +27,8 @@
             </el-input>
           </div>
           <!-- 用户属性区域 -->
-          <div class="header-user">
-            <img :src="userAvatar" alt="用户头像" @click="imgLoginBox"/>
+          <div class="header-user" @click="imgLoginBox">
+            <img :src="userAvatar" alt="用户头像"/>
             <span>{{ username }}</span>
           </div>
           <!-- 用户登录弹窗 -->
@@ -182,7 +183,7 @@
 <script setup lang="ts">
 import {Search, UploadFilled} from '@element-plus/icons-vue';
 import 'element-plus/theme-chalk/dark/css-vars.css'
-import {ref, onMounted, computed} from 'vue';
+import {ref, onMounted, computed, onBeforeMount} from 'vue';
 import {useDark, useToggle} from "@vueuse/core"
 import {GridComponent} from 'echarts/components';
 import {LineChart} from 'echarts/charts';
@@ -226,7 +227,7 @@ const userAuth = computed(() => {
 
 // TODO: 头部组件
 // 搜索输入框
-const searchInput = ref('');
+const searchInput = ref<string>('');
 // 用户头像
 const userAvatar = 'src/assets/userAvatar.jpg';
 // 用户名
@@ -239,13 +240,17 @@ const userAvatarLoginShowTools = ref<boolean>(false);
 // 主题切换
 const isDark = useDark()
 const toggleDark = useToggle(isDark);
-const colorTheme = ref<boolean>(isDark.value);
+const vantTheme = ref<"light" | "dark">("light");
 // 自动主题
-const autoSetTheme = () => {
+const initTheme = () => {
   const now = new Date();
   const hour = now.getHours();
-  colorTheme.value = !(hour >= 0 && hour < 24);
-  toggleDark(colorTheme.value);
+  if (hour < 7 || hour > 16){
+    toggleDark(true);
+    vantTheme.value = "dark";
+    return;
+  }
+  toggleDark(false);
 }
 // TODO: 左侧文件列表
 const showFileInformation = ref<boolean>(false);
@@ -259,7 +264,7 @@ const fileOptionRowWidth = computed(() => {
   }
 });
 // 分页相关数据
-const currentPage = ref(1);
+const currentPage = ref<number>(1);
 const totalFileCount = ref<number>(0);
 const pageFileData = ref<File[]>([]);
 const showAllFiles = () => {
@@ -308,13 +313,11 @@ const option = {
   series: [
     {
       name: '访问量',
-      data: [],
       type: 'line',
       smooth: true
     },
     {
       name: '下载量',
-      data: [],
       type: 'line',
       smooth: true
     }
@@ -326,10 +329,14 @@ const contrastDownload = ref<number>();
 const fiveData = () => {
   getAccessInformation(5)
       .then((res: AxiosResponse<AccessInformation[]>) => {
+        const accessCounts = [];
+        const downloadCounts = [];
         for (let datum of res.data) {
-          option.series[0].data.push(datum.totalAccess);
-          option.series[1].data.push(datum.totalDownload);
+          accessCounts.push(datum.totalAccess);
+          downloadCounts.push(datum.totalDownload);
         }
+        option.series[0]['data'] = accessCounts;
+        option.series[1]['data'] = downloadCounts;
         contrastAccess.value = res.data[4].totalAccess
         contrastDownload.value = res.data[4].totalDownload
         changeFigureSize();
@@ -360,9 +367,8 @@ const allDownload = ref<number>();
 const allData = () => {
   getTotalAccessInformation()
       .then((res: AxiosResponse<AccessInformation>) => {
-        const resdata = res.data;
-        allAccess.value = resdata.totalAccess
-        allDownload.value = resdata.totalDownload
+        allAccess.value = res.data.totalAccess
+        allDownload.value = res.data.totalDownload
       })
 }
 // 增长数据
@@ -450,11 +456,13 @@ const showFileInformationDialog = () => {
   showFileInformation.value = true
 }
 // TODO: onMounted实时更新
+onBeforeMount(() => {
+  initTheme();
+})
 onMounted(() => {
   window.addEventListener("resize", changeFigureSize);
   fiveData();
   showAllFiles();
-  autoSetTheme();
   allData();
 })
 </script>