xieyinlu/zhilu-admin
1
0
Fork 0
mirror of https://github.com/ccmjga/zhilu-admin synced 2026-03-13 21:27:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

更新AopLogQueryDto中的时间字段类型为OffsetDateTime，优化AopLogRepository中的时间范围查询逻辑，调整前端模拟数据生成器以支持新的时间格式，修复日期选择器样式，优化日志管理页面的用户体验。

Browse Source
This commit is contained in:
Chuck1sn
2025-07-08 14:36:51 +08:00
parent eecc8bedae
commit deece30554
15 changed files with 3258 additions and 3285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
backend/src/main/java/com/zl/mjga/dto/aoplog/AopLogQueryDto.java
View File

@@ -1,6 +1,8 @@
package com.zl.mjga.dto.aoplog;
import java.time.LocalDateTime;
import java.time.OffsetDateTime;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@@ -30,10 +32,10 @@ public class AopLogQueryDto {
private String ipAddress;
/** 开始时间 */
private LocalDateTime startTime;
private OffsetDateTime startTime;
/** 结束时间 */
private LocalDateTime endTime;
private OffsetDateTime endTime;
/** 最小执行时间（毫秒） */
private Long minExecutionTime;

6
backend/src/main/java/com/zl/mjga/repository/AopLogRepository.java
View File

@@ -96,13 +96,11 @@ public class AopLogRepository extends AopLogDao {
// 时间范围查询
if (queryDto.getStartTime() != null) {
OffsetDateTime startTime = queryDto.getStartTime().atOffset(OffsetDateTime.now().getOffset());
condition = condition.and(AOP_LOG.CREATE_TIME.ge(startTime));
condition = condition.and(AOP_LOG.CREATE_TIME.ge(queryDto.getStartTime()));
}
if (queryDto.getEndTime() != null) {
OffsetDateTime endTime = queryDto.getEndTime().atOffset(OffsetDateTime.now().getOffset());
condition = condition.and(AOP_LOG.CREATE_TIME.le(endTime));
condition = condition.and(AOP_LOG.CREATE_TIME.le(queryDto.getEndTime()));
}
// 执行时间范围

148
frontend/src/api/mocks/aopLogHandlers.ts
View File

@@ -3,82 +3,86 @@ import { http, HttpResponse } from "msw";
// 生成AOP日志数据
const generateAopLog = () => ({
id: faker.number.int({ min: 1, max: 1000 }),
className: faker.helpers.arrayElement([
"com.example.controller.UserController",
"com.example.service.UserService",
"com.example.controller.RoleController",
"com.example.service.RoleService",
"com.example.controller.DepartmentController",
"com.example.service.DepartmentService",
]),
methodName: faker.helpers.arrayElement([
"findById",
"save",
"update",
"delete",
"findAll",
"findByName",
"pageQuery",
]),
methodArgs: JSON.stringify([
{ name: "id", value: faker.number.int({ min: 1, max: 100 }) },
{ name: "name", value: faker.person.fullName() },
]),
returnValue: JSON.stringify({
id: faker.number.int({ min: 1, max: 100 }),
name: faker.person.fullName(),
success: true,
}),
executionTime: faker.number.int({ min: 10, max: 5000 }),
success: faker.datatype.boolean(0.9), // 90%成功率
errorMessage: faker.helpers.maybe(() => faker.lorem.sentence(), { probability: 0.1 }),
userId: faker.number.int({ min: 1, max: 100 }),
username: faker.internet.userName(),
ipAddress: faker.internet.ip(),
userAgent: faker.internet.userAgent(),
curl: `curl -X GET "${faker.internet.url()}" -H "Authorization: Bearer ${faker.string.alphanumeric(32)}"`,
createTime: faker.date.recent({ days: 30 }).toISOString(),
id: faker.number.int({ min: 1, max: 1000 }),
className: faker.helpers.arrayElement([
"com.example.controller.UserController",
"com.example.service.UserService",
"com.example.controller.RoleController",
"com.example.service.RoleService",
"com.example.controller.DepartmentController",
"com.example.service.DepartmentService",
]),
methodName: faker.helpers.arrayElement([
"findById",
"save",
"update",
"delete",
"findAll",
"findByName",
"pageQuery",
]),
methodArgs: JSON.stringify([
{ name: "id", value: faker.number.int({ min: 1, max: 100 }) },
{ name: "name", value: faker.person.fullName() },
]),
returnValue: JSON.stringify({
id: faker.number.int({ min: 1, max: 100 }),
name: faker.person.fullName(),
success: true,
}),
executionTime: faker.number.int({ min: 10, max: 5000 }),
success: faker.datatype.boolean(0.9), // 90%成功率
errorMessage: faker.helpers.maybe(() => faker.lorem.sentence(), {
probability: 0.1,
}),
userId: faker.number.int({ min: 1, max: 100 }),
username: faker.internet.userName(),
ipAddress: faker.internet.ip(),
userAgent: faker.internet.userAgent(),
curl: `curl -X GET "${faker.internet.url()}" -H "Authorization: Bearer ${faker.string.alphanumeric(32)}"`,
createTime: faker.date.recent({ days: 30 }).toISOString(),
});
export default [
// 分页查询AOP日志
http.get("/aop-log/page-query", () => {
const mockData = {
data: faker.helpers.multiple(generateAopLog, { count: 10 }),
total: 100,
};
return HttpResponse.json(mockData);
}),
// 分页查询AOP日志
http.get("/aop-log/page-query", () => {
const mockData = {
data: faker.helpers.multiple(generateAopLog, { count: 10 }),
total: 100,
};
return HttpResponse.json(mockData);
}),
// 查询单条日志详情
http.get("/aop-log/:id", ({ params }) => {
const id = params.id;
return HttpResponse.json({
...generateAopLog(),
id: Number(id),
});
}),
// 查询单条日志详情
http.get("/aop-log/:id", ({ params }) => {
const id = params.id;
return HttpResponse.json({
...generateAopLog(),
id: Number(id),
});
}),
// 删除单条日志
http.delete("/aop-log/:id", ({ params }) => {
console.log(`Captured a "DELETE /aop-log/${params.id}" request`);
return HttpResponse.json({ success: true });
}),
// 删除单条日志
http.delete("/aop-log/:id", ({ params }) => {
console.log(`Captured a "DELETE /aop-log/${params.id}" request`);
return HttpResponse.json({ success: true });
}),
// 批量删除日志
http.delete("/aop-log/batch", async ({ request }) => {
const ids = await request.json();
console.log(`Captured a "DELETE /aop-log/batch" request with ids: ${ids}`);
return HttpResponse.json(ids.length);
}),
// 批量删除日志
http.delete("/aop-log/batch", async ({ request }) => {
const ids = await request.json();
console.log(`Captured a "DELETE /aop-log/batch" request with ids: ${ids}`);
return HttpResponse.json(ids.length);
}),
// 删除指定时间前的日志
http.delete("/aop-log/before", ({ params }) => {
const { beforeTime } = Object.fromEntries(
new URL(params.request.url).searchParams
);
console.log(`Captured a "DELETE /aop-log/before" request with time: ${beforeTime}`);
return HttpResponse.json(faker.number.int({ min: 5, max: 50 }));
}),
];
// 删除指定时间前的日志
http.delete("/aop-log/before", ({ params }) => {
const { beforeTime } = Object.fromEntries(
new URL(params.request.url).searchParams,
);
console.log(
`Captured a "DELETE /aop-log/before" request with time: ${beforeTime}`,
);
return HttpResponse.json(faker.number.int({ min: 5, max: 50 }));
}),
];

143
frontend/src/api/mocks/knowledgeHandlers.ts
View File

@@ -3,90 +3,95 @@ import { http, HttpResponse } from "msw";
// 生成模拟的知识库数据
const generateLibrary = () => ({
id: faker.number.int({ min: 1, max: 100 }),
name: faker.lorem.words(2),
description: faker.lorem.sentence(),
createTime: faker.date.recent().toISOString()
id: faker.number.int({ min: 1, max: 100 }),
name: faker.lorem.words(2),
description: faker.lorem.sentence(),
createTime: faker.date.recent().toISOString(),
});
// 生成模拟的文档数据
const generateDoc = (libId: number) => ({
id: faker.number.int({ min: 1, max: 1000 }),
libId,
name: faker.system.fileName(),
identify: faker.string.uuid(),
path: faker.system.filePath(),
meta: {},
enable: faker.datatype.boolean(),
status: faker.helpers.arrayElement(["SUCCESS", "INDEXING"]),
createTime: faker.date.recent().toISOString(),
updateTime: faker.date.recent().toISOString()
id: faker.number.int({ min: 1, max: 1000 }),
libId,
name: faker.system.fileName(),
identify: faker.string.uuid(),
path: faker.system.filePath(),
meta: {},
enable: faker.datatype.boolean(),
status: faker.helpers.arrayElement(["SUCCESS", "INDEXING"]),
createTime: faker.date.recent().toISOString(),
updateTime: faker.date.recent().toISOString(),
});
// 生成模拟的文档段落数据
const generateSegment = (docId: number) => ({
id: faker.number.int({ min: 1, max: 10000 }),
docId,
embeddingId: faker.string.uuid(),
content: faker.lorem.paragraphs(),
tokenUsage: faker.number.int({ min: 10, max: 1000 })
id: faker.number.int({ min: 1, max: 10000 }),
docId,
embeddingId: faker.string.uuid(),
content: faker.lorem.paragraphs(),
tokenUsage: faker.number.int({ min: 10, max: 1000 }),
});
export default [
// 获取知识库列表
http.get("/knowledge/libraries", () => {
const libraries = faker.helpers.multiple(generateLibrary, { count: 5 });
return HttpResponse.json(libraries);
}),
// 获取知识库列表
http.get("/knowledge/libraries", () => {
const libraries = faker.helpers.multiple(generateLibrary, { count: 5 });
return HttpResponse.json(libraries);
}),
// 获取文档列表
http.get("/knowledge/docs", ({ request }) => {
const url = new URL(request.url);
const libraryId = Number(url.searchParams.get("libraryId"));
if (Number.isNaN(libraryId)) {
return new HttpResponse(null, { status: 400 });
}
const docs = faker.helpers.multiple(() => generateDoc(libraryId), { count: 8 });
return HttpResponse.json(docs);
}),
// 获取文档列表
http.get("/knowledge/docs", ({ request }) => {
const url = new URL(request.url);
const libraryId = Number(url.searchParams.get("libraryId"));
// 获取文档段落
http.get("/knowledge/segments", ({ request }) => {
const url = new URL(request.url);
const libraryDocId = Number(url.searchParams.get("libraryDocId"));
if (Number.isNaN(libraryDocId)) {
return new HttpResponse(null, { status: 400 });
}
const segments = faker.helpers.multiple(() => generateSegment(libraryDocId), { count: 12 });
return HttpResponse.json(segments);
}),
if (Number.isNaN(libraryId)) {
return new HttpResponse(null, { status: 400 });
}
// 创建/更新知识库
http.post("/knowledge/library", async () => {
return HttpResponse.json({ success: true });
}),
const docs = faker.helpers.multiple(() => generateDoc(libraryId), {
count: 8,
});
return HttpResponse.json(docs);
}),
// 删除知识库
http.delete("/knowledge/library", () => {
return HttpResponse.json({ success: true });
}),
// 获取文档段落
http.get("/knowledge/segments", ({ request }) => {
const url = new URL(request.url);
const libraryDocId = Number(url.searchParams.get("libraryDocId"));
// 更新文档
http.put("/knowledge/doc", async () => {
return HttpResponse.json({ success: true });
}),
if (Number.isNaN(libraryDocId)) {
return new HttpResponse(null, { status: 400 });
}
// 删除文档
http.delete("/knowledge/doc", () => {
return HttpResponse.json({ success: true });
}),
const segments = faker.helpers.multiple(
() => generateSegment(libraryDocId),
{ count: 12 },
);
return HttpResponse.json(segments);
}),
// 上传文档
http.post("/knowledge/doc/upload", async () => {
return HttpResponse.text("upload-success");
}),
];
// 创建/更新知识库
http.post("/knowledge/library", async () => {
return HttpResponse.json({ success: true });
}),
// 删除知识库
http.delete("/knowledge/library", () => {
return HttpResponse.json({ success: true });
}),
// 更新文档
http.put("/knowledge/doc", async () => {
return HttpResponse.json({ success: true });
}),
// 删除文档
http.delete("/knowledge/doc", () => {
return HttpResponse.json({ success: true });
}),
// 上传文档
http.post("/knowledge/doc/upload", async () => {
return HttpResponse.text("upload-success");
}),
];

5200
frontend/src/api/types/schema.d.ts vendored
View File

File diff suppressed because it is too large Load Diff

105
frontend/src/assets/datepicker.css
View File

@@ -1,70 +1,69 @@
/* 日期选择器亮色主题 - 与 Flowbite 蓝色主题匹配 */ .dp__theme_light {
/* 基础颜色 */
--dp-background-color: #fff;
--dp-text-color: #1f2937; /* 对应 Flowbite 的 gray-800 */
/* 基础颜色 */
--dp-background-color: #fff;
--dp-text-color: #1f2937; /* 对应 Flowbite 的 gray-800 */
/* 主色调 */
--dp-primary-color: #2563eb; /* 对应 Flowbite 的 primary-600 */
--dp-primary-disabled-color: #93c5fd; /* 对应 Flowbite 的 primary-300 */
--dp-primary-text-color: #fff;
/* 主色调 */
--dp-primary-color: #2563eb; /* 对应 Flowbite 的 primary-600 */
--dp-primary-disabled-color: #93c5fd; /* 对应 Flowbite 的 primary-300 */
--dp-primary-text-color: #fff;
/* 次要颜色 */
--dp-secondary-color: #9ca3af; /* 对应 Flowbite 的 gray-400 */
/* 次要颜色 */
--dp-secondary-color: #9ca3af; /* 对应 Flowbite 的 gray-400 */
/* 背景颜色 */
--dp-background-color: var(--color-gray-50);
/* 背景颜色 */
--dp-background-color: var(--color-gray-50);
/* 边框颜色 */
--dp-border-color: var(--color-gray-300); /* 对应 Flowbite 的 gray-200 */
--dp-menu-border-color: #e5e7eb;
/* 边框颜色 */
--dp-border-color: var(--color-gray-300); /* 对应 Flowbite 的 gray-200 */
--dp-menu-border-color: #e5e7eb;
/* 禁用状态 */
--dp-disabled-color: #f3f4f6; /* 对应 Flowbite 的 gray-100 */
--dp-disabled-color-text: #9ca3af; /* 对应 Flowbite 的 gray-400 */
/* 禁用状态 */
--dp-disabled-color: #f3f4f6; /* 对应 Flowbite 的 gray-100 */
--dp-disabled-color-text: #9ca3af; /* 对应 Flowbite 的 gray-400 */
/* 滚动条 */
--dp-scroll-bar-background: #f3f4f6; /* 对应 Flowbite 的 gray-100 */
--dp-scroll-bar-color: #9ca3af; /* 对应 Flowbite 的 gray-400 */
/* 滚动条 */
--dp-scroll-bar-background: #f3f4f6; /* 对应 Flowbite 的 gray-100 */
--dp-scroll-bar-color: #9ca3af; /* 对应 Flowbite 的 gray-400 */
/* 成功状态 */
--dp-success-color: #10b981; /* 对应 Tailwind 的 emerald-500 */
--dp-success-color-disabled: #6ee7b7; /* 对应 Tailwind 的 emerald-300 */
/* 成功状态 */
--dp-success-color: #10b981; /* 对应 Tailwind 的 emerald-500 */
--dp-success-color-disabled: #6ee7b7; /* 对应 Tailwind 的 emerald-300 */
/* 图标颜色 */
--dp-icon-color: #6b7280; /* 对应 Flowbite 的 gray-500 */
/* 图标颜色 */
--dp-icon-color: #6b7280; /* 对应 Flowbite 的 gray-500 */
/* 危险/错误状态 */
--dp-danger-color: #ef4444; /* 对应 Tailwind 的 red-500 */
--dp-marker-color: #ef4444;
/* 危险/错误状态 */
--dp-danger-color: #ef4444; /* 对应 Tailwind 的 red-500 */
--dp-marker-color: #ef4444;
/* 提示颜色 */
--dp-tooltip-color: #f9fafb; /* 对应 Flowbite 的 gray-50 */
/* 提示颜色 */
--dp-tooltip-color: #f9fafb; /* 对应 Flowbite 的 gray-50 */
/* 高亮颜色 */
--dp-highlight-color: rgb(37 99 235 / 10%); /* 对应 Flowbite 的 primary-600 透明度 */
/* 高亮颜色 */
--dp-highlight-color: rgb(37 99 235 / 10%); /* 对应 Flowbite 的 primary-600 透明度 */
/* 日期范围相关 */
--dp-range-between-dates-background-color: var(--dp-hover-color, #eff6ff);
--dp-range-between-dates-text-color: var(--dp-hover-text-color, #1f2937);
--dp-range-between-border-color: var(--dp-hover-color, #eff6ff);
/* 日期范围相关 */
--dp-range-between-dates-background-color: var(--dp-hover-color, #eff6ff);
--dp-range-between-dates-text-color: var(--dp-hover-text-color, #1f2937);
--dp-range-between-border-color: var(--dp-hover-color, #eff6ff);
/* 圆角设置 - 匹配项目中的 rounded-lg */
--dp-border-radius: 0.5rem; /* 8px，匹配 Tailwind 的 rounded-lg */
--dp-cell-border-radius: 0.375rem; /* 6px，稍微小一点，更美观 */
}
/* 圆角设置 - 匹配项目中的 rounded-lg */
--dp-border-radius: 0.5rem; /* 8px，匹配 Tailwind 的 rounded-lg */
--dp-cell-border-radius: 0.375rem; /* 6px，稍微小一点，更美观 */
}
/* 修复日期文本与图标重叠的问题 */
.dp__input_wrap {
position: relative;
}
/* 修复日期文本与图标重叠的问题 */
.dp__input_wrap {
position: relative;
}
.dp__input {
padding-left: 2rem !important; /* 确保文本不会与图标重叠 */
}
.dp__input_icon {
position: absolute;
/* left: 0.75rem !important; */
right: auto !important;
}
.dp__input {
padding-left: 2rem !important; /* 确保文本不会与图标重叠 */
}
.dp__input_icon {
position: absolute;
/* left: 0.75rem !important; */
right: auto !important;
}

2
frontend/src/components/common/LogStatusBadge.vue
View File

@@ -19,6 +19,6 @@
<script setup lang="ts">
defineProps<{
success: boolean;
success: boolean;
}>();
</script>

14
frontend/src/components/tables/TablePagination.vue
View File

@@ -55,7 +55,7 @@ const props = defineProps<{
}>();
const emit = defineEmits<{
'change-page': [page: number];
"change-page": [page: number];
}>();
// 创建一个本地的totalPages引用
@@ -74,20 +74,20 @@ const {
} = usePagination({
initialPage: props.currentPage,
initialTotal: props.total,
maxVisiblePages: props.maxVisiblePages || 7 // 默认显示7个页码
maxVisiblePages: props.maxVisiblePages || 7, // 默认显示7个页码
});
const handlePageChangeClick = async (page: number) => {
if (page < 1 || page > totalPages.value) return;
if (props.pageChange) {
// 如果传入了pageChange函数，则调用它
await props.pageChange(page, pageSize.value);
} else {
// 否则触发change-page事件
emit('change-page', page);
emit("change-page", page);
}
updatePaginationState({
currentPage: page,
pageSize: pageSize.value,
@@ -116,7 +116,7 @@ watch(
total: props.total,
});
}
}
},
);
watch(
@@ -125,6 +125,6 @@ watch(
if (newVal !== undefined) {
localTotalPages.value = newVal;
}
}
},
);
</script>

174
frontend/src/composables/aop/useAopLogDelete.ts
View File

@@ -8,94 +8,94 @@ import { ref } from "vue";
* @returns 日志删除相关的状态和方法
*/
export function useAopLogDelete() {
const alertStore = useAlertStore();
const actionExcStore = useActionExcStore();
const loading = ref(false);
const alertStore = useAlertStore();
const actionExcStore = useActionExcStore();
const loading = ref(false);
/**
* 删除单条日志
* @param id 日志ID
*/
const deleteLog = async (id: number) => {
try {
loading.value = true;
await client.DELETE("/aop-log/{id}", {
params: {
path: {
id,
},
},
});
alertStore.showAlert({
level: "success",
content: "日志删除成功",
});
actionExcStore.notify(true);
return true;
} finally {
loading.value = false;
}
};
/**
* 删除单条日志
* @param id 日志ID
*/
const deleteLog = async (id: number) => {
try {
loading.value = true;
/**
* 批量删除日志
* @param ids 日志ID列表
*/
const batchDeleteLogs = async (ids: number[]) => {
try {
loading.value = true;
const response = await client.DELETE("/aop-log/batch", {
body: ids,
});
alertStore.showAlert({
level: "success",
content: `成功删除 ${response.data || 0} 条日志`,
});
actionExcStore.notify(true);
return true;
} finally {
loading.value = false;
}
};
await client.DELETE("/aop-log/{id}", {
params: {
path: {
id,
},
},
});
/**
* 删除指定时间前的日志
* @param beforeTime 时间点
*/
const deleteLogsBefore = async (beforeTime: string) => {
try {
loading.value = true;
const response = await client.DELETE("/aop-log/before", {
params: {
query: {
beforeTime,
},
},
});
alertStore.showAlert({
level: "success",
content: `成功删除 ${response.data || 0} 条日志`,
});
actionExcStore.notify(true);
return true;
} finally {
loading.value = false;
}
};
alertStore.showAlert({
level: "success",
content: "日志删除成功",
});
return {
loading,
deleteLog,
batchDeleteLogs,
deleteLogsBefore,
};
}
actionExcStore.notify(true);
return true;
} finally {
loading.value = false;
}
};
/**
* 批量删除日志
* @param ids 日志ID列表
*/
const batchDeleteLogs = async (ids: number[]) => {
try {
loading.value = true;
const response = await client.DELETE("/aop-log/batch", {
body: ids,
});
alertStore.showAlert({
level: "success",
content: `成功删除 ${response.data || 0} 条日志`,
});
actionExcStore.notify(true);
return true;
} finally {
loading.value = false;
}
};
/**
* 删除指定时间前的日志
* @param beforeTime 时间点
*/
const deleteLogsBefore = async (beforeTime: string) => {
try {
loading.value = true;
const response = await client.DELETE("/aop-log/before", {
params: {
query: {
beforeTime,
},
},
});
alertStore.showAlert({
level: "success",
content: `成功删除 ${response.data || 0} 条日志`,
});
actionExcStore.notify(true);
return true;
} finally {
loading.value = false;
}
};
return {
loading,
deleteLog,
batchDeleteLogs,
deleteLogsBefore,
};
}

223
frontend/src/composables/aop/useAopLogQuery.ts
View File

@@ -12,120 +12,121 @@ import { ref } from "vue";
* @returns 日志查询相关的状态和方法
*/
export function useAopLogQuery() {
const { currentPage, pageSize, total, updatePaginationState } = usePagination();
const { sortBy, handleSort, getSortField } = useSorting();
const logs = ref<components["schemas"]["AopLogRespDto"][]>([]);
const currentLog = ref<components["schemas"]["AopLogRespDto"]>();
const loading = ref(false);
const { currentPage, pageSize, total, updatePaginationState } =
usePagination();
const { sortBy, handleSort, getSortField } = useSorting();
/**
* 分页查询日志列表
* @param params 查询参数
*/
const fetchLogs = async (params: AopLogQueryParams = {}) => {
try {
loading.value = true;
// 处理日期范围
const queryParams: AopLogQueryParams = { ...params };
const response = await client.GET("/aop-log/page-query", {
params: {
query: {
pageRequestDto: {
page: currentPage.value,
size: pageSize.value,
sortBy: sortBy.value,
},
queryDto: queryParams,
},
},
});
if (response.data) {
logs.value = response.data.data || [];
updatePaginationState({ total: response.data.total || 0 });
}
return logs.value;
} finally {
loading.value = false;
}
};
const logs = ref<components["schemas"]["AopLogRespDto"][]>([]);
const currentLog = ref<components["schemas"]["AopLogRespDto"]>();
const loading = ref(false);
/**
* 获取单条日志详情
* @param id 日志ID
*/
const fetchLogDetail = async (id: number) => {
try {
loading.value = true;
const response = await client.GET("/aop-log/{id}", {
params: {
path: {
id,
},
},
});
if (response.data) {
currentLog.value = response.data;
}
return currentLog.value;
} finally {
loading.value = false;
}
};
/**
* 分页查询日志列表
* @param params 查询参数
*/
const fetchLogs = async (params: AopLogQueryParams = {}) => {
try {
loading.value = true;
/**
* 格式化日期时间
* @param dateTime 日期时间字符串
*/
const formatDateTime = (dateTime?: string) => {
if (!dateTime) return '';
return dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss');
};
// 处理日期范围
const queryParams: AopLogQueryParams = { ...params };
/**
* 格式化执行时间
* @param time 执行时间（毫秒）
*/
const formatExecutionTime = (time?: number) => {
if (!time) return '';
if (time < 1000) return `${time}ms`;
return `${(time / 1000).toFixed(2)}s`;
};
const response = await client.GET("/aop-log/page-query", {
params: {
query: {
pageRequestDto: {
page: currentPage.value,
size: pageSize.value,
sortBy: sortBy.value,
},
queryDto: queryParams,
},
},
});
/**
* 格式化JSON字符串
* @param jsonString JSON字符串
*/
const formatJson = (jsonString?: string) => {
if (!jsonString) return '';
try {
const obj = JSON.parse(jsonString);
return JSON.stringify(obj, null, 2);
} catch (e) {
return jsonString;
}
};
if (response.data) {
logs.value = response.data.data || [];
updatePaginationState({ total: response.data.total || 0 });
}
return {
logs,
currentLog,
loading,
currentPage,
pageSize,
total,
fetchLogs,
fetchLogDetail,
handleSort,
getSortField,
formatDateTime,
formatExecutionTime,
formatJson,
};
}
return logs.value;
} finally {
loading.value = false;
}
};
/**
* 获取单条日志详情
* @param id 日志ID
*/
const fetchLogDetail = async (id: number) => {
try {
loading.value = true;
const response = await client.GET("/aop-log/{id}", {
params: {
path: {
id,
},
},
});
if (response.data) {
currentLog.value = response.data;
}
return currentLog.value;
} finally {
loading.value = false;
}
};
/**
* 格式化日期时间
* @param dateTime 日期时间字符串
*/
const formatDateTime = (dateTime?: string) => {
if (!dateTime) return "";
return dayjs(dateTime).format("YYYY-MM-DD HH:mm:ss");
};
/**
* 格式化执行时间
* @param time 执行时间（毫秒）
*/
const formatExecutionTime = (time?: number) => {
if (!time) return "";
if (time < 1000) return `${time}ms`;
return `${(time / 1000).toFixed(2)}s`;
};
/**
* 格式化JSON字符串
* @param jsonString JSON字符串
*/
const formatJson = (jsonString?: string) => {
if (!jsonString) return "";
try {
const obj = JSON.parse(jsonString);
return JSON.stringify(obj, null, 2);
} catch (e) {
return jsonString;
}
};
return {
logs,
currentLog,
loading,
currentPage,
pageSize,
total,
fetchLogs,
fetchLogDetail,
handleSort,
getSortField,
formatDateTime,
formatExecutionTime,
formatJson,
};
}

10
frontend/src/composables/common/usePagination.ts
View File

@@ -7,11 +7,11 @@ export interface PaginationState {
}
export interface UsePaginationOptions {
initialPage?: number;
initialPageSize?: number;
initialTotal?: number;
maxVisiblePages?: number;
}
initialPage?: number;
initialPageSize?: number;
initialTotal?: number;
maxVisiblePages?: number;
}
/**
* 分页逻辑Composable - 提供分页相关的状态和操作

34
frontend/src/router/modules/system.ts
View File

@@ -2,22 +2,22 @@ import type { RouteRecordRaw } from "vue-router";
import { Routes } from "../constants";
const systemRoutes: RouteRecordRaw[] = [
{
path: Routes.AOPLOGVIEW.path,
name: Routes.AOPLOGVIEW.name,
component: () => import("@/views/AopLogManagementPage.vue"),
meta: {
requiresAuth: true,
},
},
{
path: Routes.AOPLOGDETAILVIEW.path,
name: Routes.AOPLOGDETAILVIEW.name,
component: () => import("@/views/AopLogDetailPage.vue"),
meta: {
requiresAuth: true,
},
},
{
path: Routes.AOPLOGVIEW.path,
name: Routes.AOPLOGVIEW.name,
component: () => import("@/views/AopLogManagementPage.vue"),
meta: {
requiresAuth: true,
},
},
{
path: Routes.AOPLOGDETAILVIEW.path,
name: Routes.AOPLOGDETAILVIEW.name,
component: () => import("@/views/AopLogDetailPage.vue"),
meta: {
requiresAuth: true,
},
},
];
export default systemRoutes;
export default systemRoutes;

156
frontend/src/views/AopLogDetailPage.vue
View File

@@ -6,7 +6,8 @@
<div class="mt-2 sm:mt-0">
<Button variant="secondary" size="sm" @click="navigateBack">
<template #icon>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18">
</path>
</svg>
@@ -27,12 +28,12 @@
<div v-if="currentLog.curl" class="p-4 border-b border-gray-200">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-medium text-gray-900">CURL</h2>
<button
@click="copyCurl"
class="text-sm font-medium text-blue-600 hover:text-blue-800 flex items-center"
>
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
<button @click="copyCurl" class="text-sm font-medium text-blue-600 hover:text-blue-800 flex items-center">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
</path>
</svg>
{{ isCopied ? '已复制' : '复制' }}
</button>
@@ -41,7 +42,7 @@
<pre class="text-sm text-gray-800 overflow-x-auto whitespace-pre-wrap">{{ currentLog.curl }}</pre>
</div>
</div>
<!-- 基本信息 -->
<div class="p-4 border-b border-gray-200">
<div class="flex justify-between items-center mb-4">
@@ -90,12 +91,11 @@
<div class="p-4 border-b border-gray-200">
<h2 class="text-lg font-medium text-gray-900 mb-4">方法参数</h2>
<div class="bg-gray-50 p-4 rounded-lg">
<pre class="text-sm text-gray-800 overflow-x-auto whitespace-pre-wrap">{{ isMethodArgsExpanded ? formatJson(currentLog.methodArgs) : methodArgsPreview }}</pre>
<pre class="text-sm text-gray-800 overflow-x-auto whitespace-pre-wrap">{{ isMethodArgsExpanded ?
formatJson(currentLog.methodArgs) : methodArgsPreview }}</pre>
<div v-if="shouldCollapseMethodArgs" class="mt-2 flex justify-end">
<button
@click="isMethodArgsExpanded = !isMethodArgsExpanded"
class="text-blue-600 hover:text-blue-800 text-sm font-medium"
>
<button @click="isMethodArgsExpanded = !isMethodArgsExpanded"
class="text-blue-600 hover:text-blue-800 text-sm font-medium">
{{ isMethodArgsExpanded ? '折叠' : '展开' }}
</button>
</div>
@@ -106,12 +106,11 @@
<div class="p-4 border-b border-gray-200">
<h2 class="text-lg font-medium text-gray-900 mb-4">返回值</h2>
<div class="bg-gray-50 p-4 rounded-lg">
<pre class="text-sm text-gray-800 overflow-x-auto whitespace-pre-wrap">{{ isReturnValueExpanded ? formatJson(currentLog.returnValue) : returnValuePreview }}</pre>
<pre class="text-sm text-gray-800 overflow-x-auto whitespace-pre-wrap">{{ isReturnValueExpanded ?
formatJson(currentLog.returnValue) : returnValuePreview }}</pre>
<div v-if="shouldCollapseReturnValue" class="mt-2 flex justify-end">
<button
@click="isReturnValueExpanded = !isReturnValueExpanded"
class="text-blue-600 hover:text-blue-800 text-sm font-medium"
>
<button @click="isReturnValueExpanded = !isReturnValueExpanded"
class="text-blue-600 hover:text-blue-800 text-sm font-medium">
{{ isReturnValueExpanded ? '折叠' : '展开' }}
</button>
</div>
@@ -122,12 +121,11 @@
<div v-if="currentLog.errorMessage" class="p-4 border-b border-gray-200">
<h2 class="text-lg font-medium text-gray-900 mb-4">错误信息</h2>
<div class="bg-red-50 p-4 rounded-lg">
<pre class="text-sm text-red-800 overflow-x-auto whitespace-pre-wrap">{{ isErrorMessageExpanded ? currentLog.errorMessage : errorMessagePreview }}</pre>
<pre class="text-sm text-red-800 overflow-x-auto whitespace-pre-wrap">{{ isErrorMessageExpanded ?
currentLog.errorMessage : errorMessagePreview }}</pre>
<div v-if="shouldCollapseErrorMessage" class="mt-2 flex justify-end">
<button
@click="isErrorMessageExpanded = !isErrorMessageExpanded"
class="text-blue-600 hover:text-blue-800 text-sm font-medium"
>
<button @click="isErrorMessageExpanded = !isErrorMessageExpanded"
class="text-blue-600 hover:text-blue-800 text-sm font-medium">
{{ isErrorMessageExpanded ? '折叠' : '展开' }}
</button>
</div>
@@ -138,7 +136,8 @@
<div class="p-4 bg-gray-50 rounded-b-lg flex justify-end">
<Button variant="danger" @click="handleDeleteClick">
<template #icon>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
</path>
@@ -156,7 +155,7 @@
</div>
<!-- 删除确认对话框 -->
<ConfirmationDialog id="delete-log-modal" title="删除日志" content="确定要删除此日志吗？此操作不可撤销。"
<ConfirmationDialog id="delete-log-modal" title="删除日志" content="确定要删除此日志吗？此操作不可撤销。"
:closeModal="() => deleteLogModal?.hide()" :onSubmit="confirmDelete" />
</div>
</template>
@@ -173,7 +172,6 @@ import { Button } from "@/components/ui";
import { useAopLogDelete } from "@/composables/aop/useAopLogDelete";
import { useAopLogQuery } from "@/composables/aop/useAopLogQuery";
import { useErrorHandling } from "@/composables/common/useErrorHandling";
import { Routes } from "@/router/constants";
// 路由
@@ -181,17 +179,14 @@ const route = useRoute();
const router = useRouter();
const logId = Number(route.params.id);
// 获取错误处理
const { handleError } = useErrorHandling();
// 获取日志查询和删除的composables
const {
currentLog,
loading,
fetchLogDetail,
formatDateTime,
formatExecutionTime,
formatJson,
currentLog,
loading,
fetchLogDetail,
formatDateTime,
formatExecutionTime,
formatJson,
} = useAopLogQuery();
const { deleteLog } = useAopLogDelete();
@@ -211,90 +206,83 @@ const isCopied = ref(false);
const previewLength = 300;
const methodArgsPreview = computed(() => {
const content = formatJson(currentLog.value?.methodArgs);
return content && content.length > previewLength
? `${content.substring(0, previewLength)}...`
: content;
const content = formatJson(currentLog.value?.methodArgs);
return content && content.length > previewLength
? `${content.substring(0, previewLength)}...`
: content;
});
const returnValuePreview = computed(() => {
const content = formatJson(currentLog.value?.returnValue);
return content && content.length > previewLength
? `${content.substring(0, previewLength)}...`
: content;
const content = formatJson(currentLog.value?.returnValue);
return content && content.length > previewLength
? `${content.substring(0, previewLength)}...`
: content;
});
const errorMessagePreview = computed(() => {
const content = currentLog.value?.errorMessage;
return content && content.length > previewLength
? `${content.substring(0, previewLength)}...`
: content;
const content = currentLog.value?.errorMessage;
return content && content.length > previewLength
? `${content.substring(0, previewLength)}...`
: content;
});
// 判断是否需要折叠
const shouldCollapseMethodArgs = computed(() => {
const content = formatJson(currentLog.value?.methodArgs);
return content && content.length > previewLength;
const content = formatJson(currentLog.value?.methodArgs);
return content && content.length > previewLength;
});
const shouldCollapseReturnValue = computed(() => {
const content = formatJson(currentLog.value?.returnValue);
return content && content.length > previewLength;
const content = formatJson(currentLog.value?.returnValue);
return content && content.length > previewLength;
});
const shouldCollapseErrorMessage = computed(() => {
const content = currentLog.value?.errorMessage;
return content && content.length > previewLength;
const content = currentLog.value?.errorMessage;
return content && content.length > previewLength;
});
// 复制CURL命令
const copyCurl = () => {
if (currentLog.value?.curl) {
navigator.clipboard.writeText(currentLog.value.curl);
isCopied.value = true;
setTimeout(() => {
isCopied.value = false;
}, 2000);
}
if (currentLog.value?.curl) {
navigator.clipboard.writeText(currentLog.value.curl);
isCopied.value = true;
setTimeout(() => {
isCopied.value = false;
}, 2000);
}
};
// 返回日志列表
const navigateBack = () => {
router.push(Routes.AOPLOGVIEW.fullPath());
router.push(Routes.AOPLOGVIEW.fullPath());
};
// 处理删除点击
const handleDeleteClick = () => {
deleteLogModal.value?.show();
deleteLogModal.value?.show();
};
// 确认删除
const confirmDelete = async () => {
try {
if (currentLog.value?.id) {
await deleteLog(currentLog.value.id);
navigateBack();
}
} catch (error) {
handleError(error);
}
if (currentLog.value?.id) {
await deleteLog(currentLog.value.id);
navigateBack();
}
};
onMounted(async () => {
try {
// 初始化Flowbite
initFlowbite();
// 初始化Flowbite
initFlowbite();
// 初始化模态框
const $deleteModalElement = document.querySelector<HTMLElement>("#delete-log-modal");
if ($deleteModalElement) {
deleteLogModal.value = new Modal($deleteModalElement);
}
// 初始化模态框
const $deleteModalElement =
document.querySelector<HTMLElement>("#delete-log-modal");
if ($deleteModalElement) {
deleteLogModal.value = new Modal($deleteModalElement);
}
// 加载日志详情
await fetchLogDetail(logId);
} catch (error) {
handleError(error);
}
// 加载日志详情
await fetchLogDetail(logId);
});
</script>
</script>

321
frontend/src/views/AopLogManagementPage.vue
View File

@@ -92,7 +92,7 @@
<!-- 移动端卡片列表 -->
<div class="md:hidden mt-4">
<MobileCardListWithCheckbox :items="logs" v-model="selectedLogs" idField="id">
<template #item="{ item }">
<template v-for="item in logs" :key="item.id">
<div class="flex flex-col gap-2">
<div class="flex justify-between items-start">
<div class="font-medium text-gray-900 truncate max-w-[200px]" :title="item.className">
@@ -109,10 +109,6 @@
<div class="text-gray-500">执行时间</div>
<div>{{ formatExecutionTime(item.executionTime) }}</div>
</div>
<div>
<div class="text-gray-500">用户</div>
<div>{{ item.username || '-' }}</div>
</div>
<div>
<div class="text-gray-500">创建时间</div>
<div>{{ formatDateTime(item.createTime) }}</div>
@@ -172,8 +168,8 @@
删除此日期之前的所有日志
</label>
<div class="datepicker-container">
<VueDatePicker v-model="clearBeforeDate" locale="zh-CN" format="yyyy-MM-dd" :enable-time-picker="false"
:auto-apply="true" class="filter-datepicker" teleport="body" />
<VueDatePicker v-model="clearBeforeDate" locale="zh-CN" format="yyyy/MM/dd HH:mm:ss"
:enable-time-picker="false" :auto-apply="true" class="filter-datepicker" teleport="body" />
</div>
</div>
<div class="flex justify-end gap-2">
@@ -214,6 +210,7 @@ import { useErrorHandling } from "@/composables/common/useErrorHandling";
import { useActionExcStore } from "@/composables/store/useActionExcStore";
import { Routes } from "@/router/constants";
import type { AopLogQueryParams } from "@/types/AlertTypes";
import { formatDate } from "@/utils";
// 路由
const router = useRouter();
@@ -223,16 +220,14 @@ const { handleError } = useErrorHandling();
// 获取日志查询和删除的composables
const {
logs,
currentPage,
pageSize,
total,
loading,
fetchLogs,
formatDateTime,
formatExecutionTime,
handleSort,
getSortField,
logs,
currentPage,
pageSize,
total,
loading,
fetchLogs,
formatDateTime,
formatExecutionTime,
} = useAopLogQuery();
const { deleteLog, batchDeleteLogs, deleteLogsBefore } = useAopLogDelete();
@@ -253,230 +248,212 @@ const currentLogToDelete = ref<components["schemas"]["AopLogRespDto"]>();
// 筛选配置
const filterConfig = [
{
type: "input",
name: "className",
placeholder: "类名",
},
{
type: "input",
name: "methodName",
placeholder: "方法名",
},
{
type: "select",
name: "success",
placeholder: "状态",
options: [
{ value: "", label: "全部" },
{ value: "true", label: "成功" },
{ value: "false", label: "失败" },
],
},
{
type: "input",
name: "username",
placeholder: "用户名",
},
{
type: "date-range",
name: "dateRange",
},
{
type: "input",
name: "className",
placeholder: "类名",
},
{
type: "input",
name: "methodName",
placeholder: "方法名",
},
{
type: "select",
name: "success",
placeholder: "状态",
options: [
{ value: "", label: "全部" },
{ value: "true", label: "成功" },
{ value: "false", label: "失败" },
],
},
{
type: "input",
name: "username",
placeholder: "用户名",
},
{
type: "date-range",
name: "dateRange",
},
] as FilterItem[];
// 筛选值
const filterValues = reactive<{
className: string;
methodName: string;
success: string;
username: string;
dateRange: Date[];
className: string;
methodName: string;
success: string;
username: string;
dateRange: Date[];
}>({
className: "",
methodName: "",
success: "",
username: "",
dateRange: [],
className: "",
methodName: "",
success: "",
username: "",
dateRange: [],
});
// 表格列配置
const columns = [
{ title: "类名", field: "className", sortable: true },
{ title: "方法名", field: "methodName", sortable: true },
{ title: "执行时间", field: "executionTime", sortable: true },
{ title: "状态", field: "success" },
{ title: "用户", field: "username" },
{ title: "创建时间", field: "createTime", sortable: true },
{ title: "操作", field: "actions" },
{ title: "类名", field: "className", sortable: true },
{ title: "方法名", field: "methodName", sortable: true },
{ title: "执行时间", field: "executionTime", sortable: true },
{ title: "状态", field: "success" },
{ title: "用户", field: "username" },
{ title: "创建时间", field: "createTime", sortable: true },
{ title: "操作", field: "actions" },
];
// 更新筛选值
const updateFilterValues = (
values: Record<string, string | number | boolean | Date[] | undefined>
values: Record<string, string | number | boolean | Date[] | undefined>,
) => {
if (values.className !== undefined) {
filterValues.className = values.className as string;
}
if (values.methodName !== undefined) {
filterValues.methodName = values.methodName as string;
}
if (values.success !== undefined) {
filterValues.success = values.success as string;
}
if (values.username !== undefined) {
filterValues.username = values.username as string;
}
if (values.dateRange !== undefined) {
filterValues.dateRange = values.dateRange as Date[];
}
if (values.className !== undefined) {
filterValues.className = values.className as string;
}
if (values.methodName !== undefined) {
filterValues.methodName = values.methodName as string;
}
if (values.success !== undefined) {
filterValues.success = values.success as string;
}
if (values.username !== undefined) {
filterValues.username = values.username as string;
}
if (values.dateRange !== undefined) {
filterValues.dateRange = values.dateRange as Date[];
}
};
// 处理搜索
const handleSearch = async () => {
try {
const params: AopLogQueryParams = {
className: filterValues.className || undefined,
methodName: filterValues.methodName || undefined,
success: filterValues.success ? filterValues.success === "true" : undefined,
username: filterValues.username || undefined,
};
const params: AopLogQueryParams = {
className: filterValues.className || undefined,
methodName: filterValues.methodName || undefined,
success: filterValues.success ? filterValues.success === "true" : undefined,
};
// 处理日期范围
if (filterValues.dateRange && filterValues.dateRange.length === 2) {
params.startTime = filterValues.dateRange[0].toISOString();
params.endTime = filterValues.dateRange[1].toISOString();
}
// 处理日期范围
if (filterValues.dateRange && filterValues.dateRange.length === 2) {
params.startTime = formatDate(filterValues.dateRange[0]);
params.endTime = formatDate(filterValues.dateRange[1]);
}
await fetchLogs(params);
selectedLogs.value = [];
} catch (error) {
handleError(error);
}
await fetchLogs(params);
selectedLogs.value = [];
};
// 处理页码变化
const handlePageChange = async (page: number) => {
try {
currentPage.value = page;
await handleSearch();
} catch (error) {
handleError(error);
}
currentPage.value = page;
await handleSearch();
};
// 处理查看详情
const handleViewDetail = (log: components["schemas"]["AopLogRespDto"]) => {
if (log.id) {
router.push(Routes.AOPLOGDETAILVIEW.withParams({ id: log.id }));
}
if (log.id) {
router.push(Routes.AOPLOGDETAILVIEW.withParams({ id: log.id }));
}
};
// 处理删除点击
const handleDeleteClick = (log: components["schemas"]["AopLogRespDto"]) => {
currentLogToDelete.value = log;
deleteLogModal.value?.show();
currentLogToDelete.value = log;
deleteLogModal.value?.show();
};
// 确认删除
const confirmDelete = async () => {
try {
if (currentLogToDelete.value?.id) {
await deleteLog(currentLogToDelete.value.id);
await handleSearch();
deleteLogModal.value?.hide();
}
} catch (error) {
handleError(error);
}
if (currentLogToDelete.value?.id) {
await deleteLog(currentLogToDelete.value.id);
await handleSearch();
deleteLogModal.value?.hide();
}
};
// 处理批量删除点击
const handleBatchDeleteClick = () => {
if (selectedLogs.value.length > 0) {
batchDeleteLogsModal.value?.show();
}
if (selectedLogs.value.length > 0) {
batchDeleteLogsModal.value?.show();
}
};
// 确认批量删除
const confirmBatchDelete = async () => {
try {
if (selectedLogs.value.length > 0) {
await batchDeleteLogs(selectedLogs.value);
await handleSearch();
batchDeleteLogsModal.value?.hide();
}
} catch (error) {
handleError(error);
}
if (selectedLogs.value.length > 0) {
await batchDeleteLogs(selectedLogs.value);
await handleSearch();
batchDeleteLogsModal.value?.hide();
}
};
// 处理清理历史日志点击
const handleClearBeforeClick = () => {
clearBeforeModal.value?.show();
clearBeforeModal.value?.show();
};
// 关闭清理历史日志对话框
const closeClearBeforeModal = () => {
clearBeforeModal.value?.hide();
clearBeforeModal.value?.hide();
};
// 确认清理历史日志
const confirmClearBefore = async () => {
try {
if (clearBeforeDate.value) {
const dateString = clearBeforeDate.value.toISOString().split("T")[0];
await deleteLogsBefore(dateString);
await handleSearch();
clearBeforeModal.value?.hide();
}
} catch (error) {
handleError(error);
}
if (clearBeforeDate.value) {
const dateString = formatDate(clearBeforeDate.value);
await deleteLogsBefore(dateString!);
await handleSearch();
clearBeforeModal.value?.hide();
}
};
// 处理全选
const handleSelectAll = (selected: boolean) => {
if (selected) {
selectedLogs.value = logs.value.map(log => log.id).filter((id): id is number => id !== undefined);
} else {
selectedLogs.value = [];
}
if (selected) {
selectedLogs.value = logs.value
.map((log) => log.id)
.filter((id): id is number => id !== undefined);
} else {
selectedLogs.value = [];
}
};
// 初始化
const actionExcStore = useActionExcStore();
onMounted(async () => {
try {
// 初始化Flowbite
initFlowbite();
// 初始化Flowbite
initFlowbite();
// 初始化模态框
const $deleteModalElement = document.querySelector<HTMLElement>("#delete-log-modal");
const $batchDeleteModalElement = document.querySelector<HTMLElement>("#batch-delete-logs-modal");
const $clearBeforeModalElement = document.querySelector<HTMLElement>("#clear-before-modal");
// 初始化模态框
const $deleteModalElement =
document.querySelector<HTMLElement>("#delete-log-modal");
const $batchDeleteModalElement = document.querySelector<HTMLElement>(
"#batch-delete-logs-modal",
);
const $clearBeforeModalElement = document.querySelector<HTMLElement>(
"#clear-before-modal",
);
if ($deleteModalElement) {
deleteLogModal.value = new Modal($deleteModalElement);
}
if ($batchDeleteModalElement) {
batchDeleteLogsModal.value = new Modal($batchDeleteModalElement);
}
if ($clearBeforeModalElement) {
clearBeforeModal.value = new Modal($clearBeforeModalElement);
}
if ($deleteModalElement) {
deleteLogModal.value = new Modal($deleteModalElement);
}
if ($batchDeleteModalElement) {
batchDeleteLogsModal.value = new Modal($batchDeleteModalElement);
}
if ($clearBeforeModalElement) {
clearBeforeModal.value = new Modal($clearBeforeModalElement);
}
// 加载日志数据
await fetchLogs();
// 加载日志数据
await fetchLogs();
// 设置刷新回调
actionExcStore.setCallback((result) => {
if (result) {
handleSearch();
}
});
} catch (error) {
handleError(error);
}
// 设置刷新回调
actionExcStore.setCallback((result) => {
if (result) {
handleSearch();
}
});
});
</script>

1
frontend/src/views/UserManagementPage.vue
View File

@@ -164,7 +164,6 @@ import type { components } from "@/api/types/schema";
import PromotionBanner from "@/components/common/PromotionBanner.vue";
import { PlusIcon } from "@/components/icons";
import Breadcrumbs from "@/components/layout/Breadcrumbs.vue";
import ConfirmationDialog from "@/components/modals/ConfirmationDialog.vue";
import UserDeleteModal from "@/components/modals/ConfirmationDialog.vue";
import UserFormDialog from "@/components/modals/UserFormDialog.vue";
import TableButton from "@/components/tables/TableButton.vue";