wzp/FileShareUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

对接口,完整PC页面

Browse Source
This commit is contained in:
MoYi 2023-12-01 21:57:36 +08:00
parent f989fae126
commit 161d66f3f7
8 changed files with 388 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
auto-imports.d.ts vendored
View File

@ -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']
}

2
components.d.ts vendored
View File

@ -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']

23
package-lock.json generated
View File

@ -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"
}
}
}
}

1
package.json
View File

@ -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",

2
src/App.vue
View File

@ -11,7 +11,7 @@ const onInitOrResize = () => {
}
}
onMounted(() => {
window.onresize = onInitOrResize;
window.addEventListener("resize", onInitOrResize);
onInitOrResize();
})
</script>

17
src/entities/AccessInformation.ts Normal file
View File

@ -0,0 +1,17 @@
/**
* 访问情况类
*/
export interface AccessInformation {
/**
* 总下载量
*/
totalDownload: number;
/**
* 总访问量
*/
totalAccess: number;
/**
* 日期
*/
date: string;
}

25
src/entities/SearchType.ts Normal file
View File

@ -0,0 +1,25 @@
/**
* 搜索类型
*/
export enum SearchType {
/**
* 文件名
*/
FILE_NAME,
/**
* 文件ID
*/
ID,
/**
* 上传者
*/
UPLOADER,
/**
* 上传日期
*/
UPLOAD_DAY,
/**
* 文件类型
*/
TYPE
}

564
src/views/AppPC.vue
View File

@ -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>