tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(profile): 重构个人中心页面并优化日志模块

Browse Source 
- 重构个人中心页面布局和样式
- 优化日志模块类型定义和页面展示
- 添加用户统计接口
- 更新环境配置切换到线上API
This commit is contained in:
Ray.Hao
2026-03-23 21:34:57 +08:00
parent e49ca1ef54
commit 834df6cd83
8 changed files with 425 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.env.development
View File

@@ -6,13 +6,9 @@ VITE_APP_TITLE=vue3-element-admin
VITE_APP_BASE_API=/dev-api
# 接口地址
# VITE_APP_API_URL=https://api.youlai.tech # 线上
# VITE_APP_API_URL=https://api.youlai.tech/v2 # 线上(多租户)
VITE_APP_API_URL=http://localhost:8000 # 本地
# SSE 端点（默认 /api/v1/sse/connect）
# VITE_APP_SSE_ENDPOINT=/api/v1/sse/connect
VITE_APP_API_URL=https://api.youlai.tech # 线上
# VITE_APP_API_URL=https://api.youlai.tech/v2 # 线上(多租户)
# VITE_APP_API_URL=http://localhost:8000 # 本地
# 启用 Mock 服务(true:开启 false:关闭)
VITE_MOCK_DEV_SERVER=false

6
src/api/system/statistics.ts
View File

@@ -1,13 +1,13 @@
import request from "@/utils/request";
import type { VisitTrendQueryParams, VisitTrendDetail, VisitStatsDetail } from "@/types/api";
const STATISTICS_BASE_URL = "/api/v1/statistics";
const STATISTICS_BASE_URL = "/api/v1/logs";
const StatisticsAPI = {
/** 获取访问趋势统计 */
getVisitTrend(queryParams: VisitTrendQueryParams) {
return request<any, VisitTrendDetail>({
url: `${STATISTICS_BASE_URL}/visits/trend`,
url: `${STATISTICS_BASE_URL}/views/trend`,
method: "get",
params: queryParams,
});
@@ -15,7 +15,7 @@ const StatisticsAPI = {
/** 获取访问概览统计 */
getVisitOverview() {
return request<any, VisitStatsDetail>({
url: `${STATISTICS_BASE_URL}/visits/overview`,
url: `${STATISTICS_BASE_URL}/views`,
method: "get",
});
},

3
src/api/system/user.ts
View File

@@ -11,6 +11,9 @@ import type {
MobileUpdateForm,
EmailUpdateForm,
OptionItem,
UserEventQueryParams,
UserEventItem,
LoginDeviceItem,
} from "@/types/api";
const USER_BASE_URL = "/api/v1/users";

2
src/components/NoticeDropdown/useNotice.ts
View File

@@ -67,7 +67,7 @@ export function useNotice() {
// ============================================
function setupSubscription() {
if (unsubscribe || !isConnected.value) return;
if (unsubscribe) return;
// 订阅新通知事件
unsubscribe = on(NOTICE_EVENT, (data: any) => {

44
src/types/api/log.ts
View File

@@ -6,7 +6,7 @@ import type { BaseQueryParams } from "./common";
/** 日志分页查询参数 */
export interface LogQueryParams extends BaseQueryParams {
/** 搜索关键字 */
/** 搜索关键字(IP/操作人) */
keywords?: string;
/** 操作时间 */
createTime?: [string, string];
@@ -15,29 +15,39 @@ export interface LogQueryParams extends BaseQueryParams {
/** 日志分页对象 */
export interface LogItem {
/** 日志ID */
id: string;
/** 日志模块 */
module: string;
/** 日志内容 */
content: string;
id: number;
/** 模块 */
module?: string;
/** 操作类型 */
actionType?: string;
/** 操作标题 */
title?: string;
/** 自定义日志内容 */
content?: string;
/** 操作人ID */
operatorId?: number;
/** 操作人名称 */
operatorName?: string;
/** 请求路径 */
requestUri?: string;
/** 请求方法 */
method?: string;
requestMethod?: string;
/** IP地址 */
ip: string;
ip?: string;
/** 地区 */
region: string;
region?: string;
/** 设备 */
device?: string;
/** 浏览器 */
browser: string;
/** 终端系统 */
os: string;
browser?: string;
/** 操作系统 */
os?: string;
/** 状态：0失败 1成功 */
status?: number;
/** 执行时间(毫秒) */
executionTime: number;
/** 创建人ID */
createBy?: string;
executionTime?: number;
/** 错误信息 */
errorMsg?: string;
/** 操作时间 */
createTime?: string;
/** 操作人 */
operator: string;
}

4
src/views/login/index.vue
View File

@@ -106,10 +106,10 @@ const formComponents = {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
min-height: 100vh;
padding: clamp(1rem, 3vw, 2rem);
overflow: hidden;
overflow-x: hidden;
overflow-y: auto;
background-color: #f5f7ff;
&::before {

575
src/views/profile/index.vue
View File

@@ -1,163 +1,195 @@
<template>
<div class="profile-container">
<div class="p-4">
<el-row :gutter="20">
<!-- 左侧个人信息卡片 -->
<el-col :span="8">
<el-card class="user-card">
<div class="user-info">
<div class="avatar-wrapper">
<el-avatar :src="userStore.userInfo.avatar" :size="100" />
<el-button
type="info"
class="avatar-edit-btn"
circle
:icon="Camera"
size="small"
@click="triggerFileUpload"
/>
<input
ref="fileInput"
type="file"
style="display: none"
accept="image/*"
@change="handleFileChange"
/>
<el-col :xs="24" :sm="24" :md="8" :lg="6">
<div class="left-column">
<!-- 用户信息卡片 -->
<el-card class="user-card">
<div class="user-info">
<div class="avatar-wrapper">
<el-avatar :src="userStore.userInfo.avatar" :size="100" />
<el-button
type="info"
class="avatar-edit-btn"
circle
:icon="Camera"
size="small"
@click="triggerFileUpload"
/>
<input
ref="fileInput"
type="file"
style="display: none"
accept="image/*"
@change="handleFileChange"
/>
</div>
<div class="user-name">
<span class="nickname">{{ userProfile.nickname }}</span>
<el-icon class="edit-icon" @click="handleOpenDialog(DialogType.ACCOUNT)">
<Edit />
</el-icon>
</div>
<div class="user-role">{{ userProfile.roleNames }}</div>
<el-descriptions :column="1" size="small" border class="profile-desc">
<el-descriptions-item>
<template #label>
<div class="cell-item">
<el-icon><User /></el-icon>
用户名
</div>
</template>
<span>{{ userProfile.username }}</span>
<el-icon v-if="userProfile.gender === 1" class="gender-icon male">
<Male />
</el-icon>
<el-icon v-else class="gender-icon female"><Female /></el-icon>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item">
<el-icon><Iphone /></el-icon>
手机号码
</div>
</template>
<span :class="{ 'text-muted': !userProfile.mobile }">
{{ userProfile.mobile || "未绑定" }}
</span>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item">
<el-icon><Message /></el-icon>
邮箱
</div>
</template>
<span :class="{ 'text-muted': !userProfile.email }">
{{ userProfile.email || "未绑定" }}
</span>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item">
<el-icon><OfficeBuilding /></el-icon>
部门
</div>
</template>
{{ userProfile.deptName || "-" }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item">
<el-icon><Timer /></el-icon>
创建时间
</div>
</template>
{{ userProfile.createTime }}
</el-descriptions-item>
</el-descriptions>
</div>
<div class="user-name">
<span class="nickname">{{ userProfile.nickname }}</span>
<el-icon class="edit-icon" @click="handleOpenDialog(DialogType.ACCOUNT)">
<Edit />
</el-icon>
</div>
<div class="user-role">{{ userProfile.roleNames }}</div>
</div>
<el-divider />
<div class="user-stats">
<div class="stat-item">
<div class="stat-value">0</div>
<div class="stat-label">待办</div>
</div>
<div class="stat-item">
<div class="stat-value">0</div>
<div class="stat-label">消息</div>
</div>
<div class="stat-item">
<div class="stat-value">0</div>
<div class="stat-label">通知</div>
</div>
</div>
</el-card>
</el-card>
</div>
</el-col>
<!-- 右侧信息卡片 -->
<el-col :span="16">
<el-card class="info-card">
<template #header>
<div class="card-header">
<span>账号信息</span>
</div>
</template>
<el-descriptions :column="1" border>
<el-descriptions-item label="用户名">
{{ userProfile.username }}
<el-icon v-if="userProfile.gender === 1" class="gender-icon male">
<Male />
</el-icon>
<el-icon v-else class="gender-icon female">
<Female />
</el-icon>
</el-descriptions-item>
<el-descriptions-item label="手机号码">
{{ userProfile.mobile || "未绑定" }}
</el-descriptions-item>
<el-descriptions-item label="邮箱">
{{ userProfile.email || "未绑定" }}
</el-descriptions-item>
<el-descriptions-item label="部门">
{{ userProfile.deptName }}
</el-descriptions-item>
<el-descriptions-item label="创建时间">
{{ userProfile.createTime }}
</el-descriptions-item>
</el-descriptions>
</el-card>
<el-col :xs="24" :sm="24" :md="16" :lg="18">
<div class="right-column">
<!-- 安全设置卡片 -->
<el-card class="security-card">
<template #header>
<div class="card-header">
<span class="card-header-title">
<el-icon><Key /></el-icon>
安全设置
</span>
</div>
</template>
<div class="security-list">
<div class="security-item">
<div class="security-left">
<div class="security-icon password">
<el-icon><Lock /></el-icon>
</div>
<div class="security-content">
<div class="security-title">账户密码</div>
<div class="security-desc">定期修改密码有助于保护账户安全</div>
</div>
</div>
<el-button type="primary" link @click="handleOpenDialog(DialogType.PASSWORD)">
修改
</el-button>
</div>
<el-card class="security-card">
<template #header>
<div class="card-header">
<span>安全设置</span>
</div>
</template>
<div class="security-item">
<div class="security-info">
<div class="security-title">账户密码</div>
<div class="security-desc">定期修改密码有助于保护账户安全</div>
</div>
<el-button type="primary" link @click="() => handleOpenDialog(DialogType.PASSWORD)">
修改
</el-button>
</div>
<div class="security-item">
<div class="security-left">
<div class="security-icon mobile">
<el-icon><Iphone /></el-icon>
</div>
<div class="security-content">
<div class="security-title">手机号</div>
<div class="security-desc">{{ mobileSecurityDesc }}</div>
</div>
</div>
<div class="security-actions">
<el-button
v-if="userProfile.mobile"
type="primary"
link
@click="handleOpenDialog(DialogType.MOBILE)"
>
更换
</el-button>
<el-button
v-if="userProfile.mobile"
type="danger"
link
@click="handleUnbindMobile"
>
解绑
</el-button>
<el-button
v-else
type="primary"
link
@click="handleOpenDialog(DialogType.MOBILE)"
>
绑定
</el-button>
</div>
</div>
<div class="security-item">
<div class="security-info">
<div class="security-title">手机号</div>
<div class="security-desc">
{{ mobileSecurityDesc }}
<div class="security-item">
<div class="security-left">
<div class="security-icon email">
<el-icon><Message /></el-icon>
</div>
<div class="security-content">
<div class="security-title">邮箱</div>
<div class="security-desc">{{ emailSecurityDesc }}</div>
</div>
</div>
<div class="security-actions">
<el-button
v-if="userProfile.email"
type="primary"
link
@click="handleOpenDialog(DialogType.EMAIL)"
>
更换
</el-button>
<el-button v-if="userProfile.email" type="danger" link @click="handleUnbindEmail">
解绑
</el-button>
<el-button v-else type="primary" link @click="handleOpenDialog(DialogType.EMAIL)">
绑定
</el-button>
</div>
</div>
</div>
<div class="flex items-center gap-2">
<el-button
v-if="userProfile.mobile"
type="primary"
link
@click="() => handleOpenDialog(DialogType.MOBILE)"
>
更换
</el-button>
<el-button v-if="userProfile.mobile" type="danger" link @click="handleUnbindMobile">
解绑
</el-button>
<el-button
v-else
type="primary"
link
@click="() => handleOpenDialog(DialogType.MOBILE)"
>
绑定
</el-button>
</div>
</div>
<div class="security-item">
<div class="security-info">
<div class="security-title">邮箱</div>
<div class="security-desc">
{{ emailSecurityDesc }}
</div>
</div>
<div class="flex items-center gap-2">
<el-button
v-if="userProfile.email"
type="primary"
link
@click="() => handleOpenDialog(DialogType.EMAIL)"
>
更换
</el-button>
<el-button v-if="userProfile.email" type="danger" link @click="handleUnbindEmail">
解绑
</el-button>
<el-button
v-else
type="primary"
link
@click="() => handleOpenDialog(DialogType.EMAIL)"
>
绑定
</el-button>
</div>
</div>
</el-card>
</el-card>
</div>
</el-col>
</el-row>
@@ -282,7 +314,19 @@ import FileAPI from "@/api/file";
import { useUserStoreHook } from "@/store";
import { redirectToLogin } from "@/utils/auth";
import { Camera } from "@element-plus/icons-vue";
import {
Camera,
Edit,
Lock,
Iphone,
Message,
User,
Male,
Female,
OfficeBuilding,
Timer,
Key,
} from "@element-plus/icons-vue";
const userStore = useUserStoreHook();
@@ -298,8 +342,9 @@ const enum DialogType {
const dialogState = reactive({
visible: false,
title: "",
type: "" as DialogType, // 修改账号资料,修改密码、绑定手机、绑定邮箱"
type: "" as DialogType,
});
const userProfileFormRef = ref();
const passwordChangeFormRef = ref();
const mobileBindingFormRef = ref();
@@ -316,7 +361,6 @@ const mobileTimer = ref();
const emailCountdown = ref(0);
const emailTimer = ref();
// 修改密码校验规则
const passwordChangeRules = {
oldPassword: [{ required: true, message: "请输入原密码", trigger: "blur" }],
newPassword: [{ required: true, message: "请输入新密码", trigger: "blur" }],
@@ -379,24 +423,21 @@ function maskEmail(email?: string) {
const mobileSecurityDesc = computed(() => {
return userProfile.value.mobile
? `已绑定：${maskMobile(userProfile.value.mobile)}`
: "未绑定手机号";
: "未绑定手机号，建议立即绑定";
});
const emailSecurityDesc = computed(() => {
return userProfile.value.email ? `已绑定：${maskEmail(userProfile.value.email)}` : "未绑定邮箱";
return userProfile.value.email
? `已绑定：${maskEmail(userProfile.value.email)}`
: "未绑定邮箱，建议立即绑定";
});
/**
* 打开弹窗
* @param type 弹窗类型 ACCOUNT: 账号资料 PASSWORD: 修改密码 MOBILE: 绑定手机 EMAIL: 绑定邮箱
*/
const handleOpenDialog = (type: DialogType) => {
dialogState.type = type;
dialogState.visible = true;
switch (type) {
case DialogType.ACCOUNT:
dialogState.title = "账号资料";
// 初始化表单数据
dialogState.title = "编辑资料";
userProfileForm.nickname = userProfile.value.nickname;
userProfileForm.avatar = userProfile.value.avatar;
userProfileForm.gender = userProfile.value.gender;
@@ -459,25 +500,18 @@ async function handleUnbindEmail() {
}
}
/**
* 发送手机验证码
*/
function handleSendMobileCode() {
if (!mobileUpdateForm.mobile) {
ElMessage.error("请输入手机号");
return;
}
// 验证手机号格式
const reg = /^1[3-9]\d{9}$/;
if (!reg.test(mobileUpdateForm.mobile)) {
ElMessage.error("手机号格式不正确");
return;
}
// 发送短信验证码
UserAPI.sendMobileCode(mobileUpdateForm.mobile).then(() => {
ElMessage.success("验证码发送成功");
// 倒计时 60s 重新发送
mobileCountdown.value = 60;
mobileTimer.value = setInterval(() => {
if (mobileCountdown.value > 0) {
@@ -489,25 +523,19 @@ function handleSendMobileCode() {
});
}
/**
* 发送邮箱验证码
*/
function handleSendEmailCode() {
if (!emailUpdateForm.email) {
ElMessage.error("请输入邮箱");
return;
}
// 验证邮箱格式
const reg = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
if (!reg.test(emailUpdateForm.email)) {
ElMessage.error("邮箱格式不正确");
return;
}
// 发送邮箱验证码
UserAPI.sendEmailCode(emailUpdateForm.email).then(() => {
ElMessage.success("验证码发送成功");
// 倒计时 60s 重新发送
emailCountdown.value = 60;
emailTimer.value = setInterval(() => {
if (emailCountdown.value > 0) {
@@ -519,9 +547,6 @@ function handleSendEmailCode() {
});
}
/**
* 提交表单
*/
const handleSubmit = async () => {
try {
if (dialogState.type === DialogType.ACCOUNT) {
@@ -561,9 +586,6 @@ const handleSubmit = async () => {
}
};
/**
* 取消
*/
const handleCancel = () => {
dialogState.visible = false;
if (dialogState.type === DialogType.ACCOUNT) {
@@ -587,18 +609,14 @@ const handleFileChange = async (event: Event) => {
const target = event.target as HTMLInputElement;
const file = target.files ? target.files[0] : null;
if (file) {
// 调用文件上传API
const data = await FileAPI.uploadFile(file);
// 更新用户信息
await UserAPI.updateProfile({
avatar: data.url,
});
// 更新用户头像
userStore.userInfo.avatar = data.url;
}
};
/** 加载用户信息 */
const loadUserProfile = async () => {
const data = await UserAPI.getProfile();
userProfile.value = data;
@@ -625,21 +643,27 @@ onBeforeUnmount(() => {
</script>
<style lang="scss" scoped>
.profile-container {
min-height: calc(100vh - 84px);
padding: 20px;
background: var(--el-fill-color-blank);
.left-column {
display: flex;
flex-direction: column;
gap: 16px;
}
.right-column {
display: flex;
flex-direction: column;
gap: 16px;
}
// 用户信息卡片
.user-card {
.user-info {
padding: 20px 0;
text-align: center;
.avatar-wrapper {
position: relative;
display: inline-block;
margin-bottom: 16px;
margin-bottom: 12px;
.avatar-edit-btn {
position: absolute;
@@ -656,7 +680,7 @@ onBeforeUnmount(() => {
}
.user-name {
margin-bottom: 8px;
margin-bottom: 4px;
.nickname {
font-size: 18px;
@@ -665,10 +689,10 @@ onBeforeUnmount(() => {
}
.edit-icon {
margin-left: 8px;
margin-left: 6px;
color: var(--el-text-color-secondary);
cursor: pointer;
transition: all 0.3s ease;
transition: color 0.2s;
&:hover {
color: var(--el-color-primary);
@@ -677,115 +701,128 @@ onBeforeUnmount(() => {
}
.user-role {
font-size: 14px;
margin-bottom: 16px;
font-size: 13px;
color: var(--el-text-color-secondary);
}
}
.user-stats {
display: flex;
justify-content: space-around;
padding: 16px 0;
.profile-desc {
text-align: left;
.stat-item {
text-align: center;
.stat-value {
font-size: 20px;
font-weight: 600;
color: var(--el-text-color-primary);
.cell-item {
display: flex;
gap: 6px;
align-items: center;
}
.stat-label {
margin-top: 4px;
font-size: 12px;
color: var(--el-text-color-secondary);
.text-muted {
color: var(--el-text-color-placeholder);
}
.gender-icon {
font-size: 16px;
&.male {
color: var(--el-color-primary);
}
&.female {
color: #f56c6c;
}
}
}
}
}
.info-card,
// 右侧卡片通用样式
.security-card {
margin-bottom: 20px;
.card-header {
font-size: 16px;
font-weight: 600;
color: var(--el-text-color-primary);
display: flex;
align-items: center;
justify-content: space-between;
.card-header-title {
display: flex;
gap: 8px;
align-items: center;
font-size: 16px;
font-weight: 600;
color: var(--el-text-color-primary);
}
}
}
// 安全设置
.security-list {
display: flex;
flex-direction: column;
}
.security-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
padding: 16px;
border-bottom: 1px solid var(--el-border-color-lighter);
transition: background 0.2s ease;
.security-info {
&:last-child {
border-bottom: none;
}
&:hover {
background: var(--el-fill-color-light);
border-radius: 8px;
}
.security-left {
display: flex;
gap: 12px;
align-items: center;
}
.security-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-size: 20px;
border-radius: 8px;
&.password {
color: var(--el-color-primary);
background: var(--el-color-primary-light-9);
}
&.mobile {
color: var(--el-color-success);
background: var(--el-color-success-light-9);
}
&.email {
color: var(--el-color-warning);
background: var(--el-color-warning-light-9);
}
}
.security-content {
.security-title {
margin-bottom: 4px;
font-size: 16px;
font-size: 15px;
font-weight: 500;
color: var(--el-text-color-primary);
}
.security-desc {
font-size: 14px;
font-size: 13px;
color: var(--el-text-color-secondary);
}
}
}
.el-descriptions {
.el-descriptions__label {
font-weight: 500;
color: var(--el-text-color-regular);
}
.el-descriptions__content {
color: var(--el-text-color-primary);
}
.gender-icon {
margin-left: 8px;
font-size: 16px;
&.male {
color: #409eff;
}
&.female {
color: #f56c6c;
}
}
}
.el-dialog {
.el-dialog__header {
padding: 20px;
margin: 0;
border-bottom: 1px solid var(--el-border-color-light);
}
.el-dialog__body {
padding: 30px 20px;
}
.el-dialog__footer {
padding: 20px;
border-top: 1px solid var(--el-border-color-light);
}
}
// 响应式适配
@media (max-width: 768px) {
.profile-container {
padding: 10px;
}
.el-col {
width: 100%;
.security-actions {
display: flex;
gap: 8px;
}
}
</style>

100
src/views/system/log/index.vue
View File

@@ -5,7 +5,7 @@
<el-form-item prop="keywords" label="关键字">
<el-input
v-model="queryParams.keywords"
placeholder="日志内容"
placeholder="IP/操作人"
clearable
@keyup.enter="handleQuery"
/>
@@ -39,15 +39,31 @@
border
class="data-table__content"
>
<el-table-column label="操作时间" prop="createTime" width="220" />
<el-table-column label="操作人" prop="operator" width="120" />
<el-table-column label="日志模块" prop="module" width="100" />
<el-table-column label="日志内容" prop="content" min-width="200" />
<el-table-column label="IP 地址" prop="ip" width="150" />
<el-table-column label="地区" prop="region" width="150" />
<el-table-column label="浏览器" prop="browser" width="150" />
<el-table-column label="终端系统" prop="os" width="200" show-overflow-tooltip />
<el-table-column label="执行时间(ms)" prop="executionTime" width="150" />
<el-table-column label="操作标题" prop="title" min-width="180" show-overflow-tooltip />
<el-table-column label="状态" prop="status" width="80" align="center">
<template #default="{ row }">
<el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
{{ row.status === 1 ? "成功" : "失败" }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="IP地址" prop="ip" width="140" />
<el-table-column label="请求路径" prop="requestUri" min-width="180" show-overflow-tooltip />
<el-table-column label="请求方法" prop="requestMethod" width="100" align="center">
<template #default="{ row }">
<el-tag :type="getMethodTagType(row.requestMethod)" size="small" effect="plain">
{{ row.requestMethod }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="执行时间(ms)" prop="executionTime" width="120" align="center" />
<el-table-column label="操作人" prop="operatorName" width="120" />
<el-table-column label="操作时间" prop="createTime" width="180" />
<el-table-column label="操作" width="80" align="center" fixed="right">
<template #default="{ row }">
<el-button type="primary" link size="small" @click="handleDetail(row)">详情</el-button>
</template>
</el-table-column>
</el-table>
<pagination
@@ -58,6 +74,39 @@
@pagination="fetchData"
/>
</el-card>
<!-- 详情弹窗 -->
<el-dialog v-model="detailVisible" title="日志详情" width="720px">
<el-descriptions :column="2" border>
<el-descriptions-item label="操作标题" :span="2">
{{ detailData.title }}
</el-descriptions-item>
<el-descriptions-item label="状态">
<el-tag :type="detailData.status === 1 ? 'success' : 'danger'" size="small">
{{ detailData.status === 1 ? "成功" : "失败" }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="执行时间">
{{ detailData.executionTime }}ms
</el-descriptions-item>
<el-descriptions-item label="操作人">{{ detailData.operatorName }}</el-descriptions-item>
<el-descriptions-item label="操作时间">{{ detailData.createTime }}</el-descriptions-item>
<el-descriptions-item label="IP地址">{{ detailData.ip }}</el-descriptions-item>
<el-descriptions-item label="请求方法">{{ detailData.requestMethod }}</el-descriptions-item>
<el-descriptions-item label="请求路径" :span="2">
{{ detailData.requestUri }}
</el-descriptions-item>
<el-descriptions-item label="浏览器">{{ detailData.browser }}</el-descriptions-item>
<el-descriptions-item label="操作系统">{{ detailData.os }}</el-descriptions-item>
<el-descriptions-item label="自定义内容" :span="2">
<div v-if="detailData.content" class="whitespace-pre-wrap">{{ detailData.content }}</div>
<span v-else class="color-text-placeholder">无</span>
</el-descriptions-item>
<el-descriptions-item v-if="detailData.errorMsg" label="错误信息" :span="2">
<span class="color-danger">{{ detailData.errorMsg }}</span>
</el-descriptions-item>
</el-descriptions>
</el-dialog>
</div>
</template>
@@ -69,7 +118,18 @@ defineOptions({
import LogAPI from "@/api/system/log";
import type { LogItem, LogQueryParams } from "@/types/api";
import type { FormInstance } from "element-plus";
import type { FormInstance, TagProps } from "element-plus";
function getMethodTagType(method: string): TagProps["type"] {
const map: Record<string, TagProps["type"]> = {
GET: undefined,
POST: "success",
PUT: "warning",
DELETE: "danger",
PATCH: "info",
};
return map[method?.toUpperCase()] ?? "info";
}
// 表单引用
const queryFormRef = ref<FormInstance>();
@@ -87,9 +147,10 @@ const pageData = ref<LogItem[]>();
const total = ref(0);
const loading = ref(false);
/**
* 加载日志列表数据
*/
// 详情弹窗
const detailVisible = ref(false);
const detailData = ref<Partial<LogItem>>({});
function fetchData(): void {
loading.value = true;
LogAPI.getPage(queryParams)
@@ -102,17 +163,11 @@ function fetchData(): void {
});
}
/**
* 查询按钮点击事件
*/
function handleQuery(): void {
queryParams.pageNum = 1;
fetchData();
}
/**
* 重置查询
*/
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
queryParams.pageNum = 1;
@@ -120,6 +175,11 @@ function handleResetQuery(): void {
fetchData();
}
function handleDetail(row: LogItem): void {
detailData.value = row;
detailVisible.value = true;
}
onMounted(() => {
handleQuery();
});