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 1/3] 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 2/3] 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 3/3] 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>