ContiNew/continew-admin
1
1
Fork 0
mirror of https://github.com/continew-org/continew-admin.git synced 2025-11-04 10:57:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化：聚合日志相关 API，封装 date-range-picker 组件并优化部分细节

Browse Source
This commit is contained in:
Charles7c
2023-01-20 14:44:03 +08:00
parent d8debf5481
commit 8cf15fd4a8
14 changed files with 236 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
continew-admin-ui/src/api/monitor/log.ts Normal file
View File

@@ -0,0 +1,99 @@
import axios from 'axios';
import qs from 'query-string';
export interface LogRecord {
logId: string;
clientIp: string;
location: string;
browser: string;
createTime: string;
}
export interface LoginLogRecord extends LogRecord {
description: string;
status: number;
errorMsg: string;
createUserString: string;
}
export interface OperationLogRecord extends LogRecord {
description: string;
status: number;
errorMsg: string;
createUserString: string;
}
export interface SystemLogRecord extends LogRecord {
statusCode: number;
requestMethod: string;
requestUrl: string;
elapsedTime: number;
exceptionDetail?: string;
}
export interface SystemLogDetailRecord extends SystemLogRecord {
requestHeaders: string;
requestBody: string;
responseHeaders: string;
responseBody: string;
}
export interface LoginLogParams extends Partial<LoginLogRecord> {
page: number;
size: number;
sort: Array<string>;
}
export interface LoginLogListRes {
list: LoginLogRecord[];
total: number;
}
export function queryLoginLogList(params: LoginLogParams) {
return axios.get<LoginLogListRes>('/monitor/log/login', {
params,
paramsSerializer: (obj) => {
return qs.stringify(obj);
},
});
}
export interface OperationLogParams extends Partial<OperationLogRecord> {
page: number;
size: number;
sort: Array<string>;
uid?: string;
}
export interface OperationLogListRes {
list: OperationLogRecord[];
total: number;
}
export function queryOperationLogList(params: OperationLogParams) {
return axios.get<OperationLogListRes>('/monitor/log/operation', {
params,
paramsSerializer: (obj) => {
return qs.stringify(obj);
},
});
}
export interface SystemLogParams extends Partial<SystemLogRecord> {
page: number;
size: number;
sort: Array<string>;
}
export interface SystemLogListRes {
list: SystemLogRecord[];
total: number;
}
export function querySystemLogList(params: SystemLogParams) {
return axios.get<SystemLogListRes>('/monitor/log/system', {
params,
paramsSerializer: (obj) => {
return qs.stringify(obj);
},
});
}
export function querySystemLogDetail(logId: string) {
return axios.get<SystemLogDetailRecord>(`/monitor/log/system/${logId}`);
}

33
continew-admin-ui/src/api/monitor/login-log.ts
View File

@@ -1,33 +0,0 @@
import axios from 'axios';
import qs from 'query-string';
export interface LoginLogRecord {
logId: string;
status: number;
clientIp: string;
location: string;
browser: string;
errorMsg: string;
createUserString: string;
createTime: string;
}
export interface LoginLogParams extends Partial<LoginLogRecord> {
page: number;
size: number;
sort: Array<string>;
}
export interface LoginLogListRes {
list: LoginLogRecord[];
total: number;
}
export function queryLoginLogList(params: LoginLogParams) {
return axios.get<LoginLogListRes>('/monitor/log/login', {
params,
paramsSerializer: (obj) => {
return qs.stringify(obj);
},
});
}

35
continew-admin-ui/src/api/monitor/operation-log.ts
View File

@@ -1,35 +0,0 @@
import axios from 'axios';
import qs from 'query-string';
export interface OperationLogRecord {
logId: string;
description: string;
status: number;
clientIp: string;
location: string;
browser: string;
errorMsg: string;
createUserString: string;
createTime: string;
}
export interface OperationLogParams extends Partial<OperationLogRecord> {
page: number;
size: number;
sort: Array<string>;
uid?: string;
}
export interface OperationLogListRes {
list: OperationLogRecord[];
total: number;
}
export function queryOperationLogList(params: OperationLogParams) {
return axios.get<OperationLogListRes>('/monitor/log/operation', {
params,
paramsSerializer: (obj) => {
return qs.stringify(obj);
},
});
}

59
continew-admin-ui/src/api/monitor/system-log.ts
View File

@@ -1,59 +0,0 @@
import axios from 'axios';
import qs from 'query-string';
export interface SystemLogRecord {
logId: string;
statusCode: number;
requestMethod: string;
requestUrl: string;
elapsedTime: number;
clientIp: string;
location: string;
browser: string;
errorMsg: string;
exceptionDetail?: string;
createUserString: string;
createTime: string;
}
export interface SystemLogParams extends Partial<SystemLogRecord> {
page: number;
size: number;
sort: Array<string>;
}
export interface SystemLogListRes {
list: SystemLogRecord[];
total: number;
}
export function querySystemLogList(params: SystemLogParams) {
return axios.get<SystemLogListRes>('/monitor/log/system', {
params,
paramsSerializer: (obj) => {
return qs.stringify(obj);
},
});
}
export interface SystemLogDetailRecord {
logId: string;
description: string;
requestUrl: string;
requestMethod: string;
requestHeaders: string;
requestBody: string;
statusCode: number;
responseHeaders: string;
responseBody: string;
elapsedTime: number;
clientIp: string;
location: string;
browser: string;
createUserString: string;
createTime: string;
}
export function querySystemLogDetail(logId: string) {
return axios.get<SystemLogDetailRecord>(`/monitor/log/system/${logId}`);
}

79
continew-admin-ui/src/components/date-range-picker/index.vue Normal file
View File

@@ -0,0 +1,79 @@
<template>
<a-range-picker
style="width: 100%"
:shortcuts="shortcuts"
shortcuts-position="left"
:format="format"
:show-time="showTime"
:placeholder="placeholder"
/>
</template>
<script lang="ts" setup>
import { computed, PropType } from 'vue';
import { ShortcutType } from '@arco-design/web-vue';
import dayjs from 'dayjs';
defineProps({
format: {
type: String,
default: 'YYYY-MM-DD HH:mm:ss',
},
showTime: {
type: Boolean,
default: true,
},
placeholder: {
type: Array as PropType<string[]>,
default: (): string[] => ['开始时间', '结束时间'],
},
});
const shortcuts = computed<ShortcutType[]>(() => {
return [
{
label: '今天',
value: (): Date[] => [
dayjs().startOf('day').toDate(),
dayjs().toDate()
]
},
{
label: '昨天',
value: (): Date[] => [
dayjs().subtract(1, 'day').startOf('day').toDate(),
dayjs().subtract(1, 'day').endOf('day').toDate()
]
},
{
label: '本周',
value: (): Date[] => [
dayjs().startOf('week').add(1, 'day').toDate(),
dayjs().toDate()
]
},
{
label: '本月',
value: (): Date[] => [
dayjs().startOf('month').toDate(),
dayjs().toDate()
]
},
{
label: '本年',
value: (): Date[] => [
dayjs().startOf('year').toDate(),
dayjs().toDate()
]
}
];
});
</script>
<script lang="ts">
export default {
name: 'DateRangePicker',
};
</script>
<style scoped lang="less"></style>

2
continew-admin-ui/src/components/index.ts
View File

@@ -11,6 +11,7 @@ import {
} from 'echarts/components';
import Chart from './chart/index.vue';
import Breadcrumb from './breadcrumb/index.vue';
import DateRangePicker from './date-range-picker/index.vue';
// Manually introduce ECharts modules to reduce packing size
@@ -31,5 +32,6 @@ export default {
install(Vue: App) {
Vue.component('Chart', Chart);
Vue.component('Breadcrumb', Breadcrumb);
Vue.component('DateRangePicker', DateRangePicker);
},
};

16
continew-admin-ui/src/views/monitor/log/login/index.vue
View File

@@ -25,12 +25,7 @@
field="createTime"
hide-label
>
<a-range-picker
v-model="queryFormData.createTime"
format="YYYY-MM-DD HH:mm:ss"
show-time
style="width: 100%"
/>
<date-range-picker v-model="queryFormData.createTime" />
</a-form-item>
<a-button type="primary" @click="toQuery">
<template #icon>
@@ -85,7 +80,7 @@
<script lang="ts" setup>
import { computed, ref, reactive } from 'vue';
import useLoading from '@/hooks/loading';
import { queryLoginLogList, LoginLogRecord, LoginLogParams } from '@/api/monitor/login-log';
import { queryLoginLogList, LoginLogRecord, LoginLogParams } from '@/api/monitor/log';
import { Pagination } from '@/types/global';
import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
@@ -135,9 +130,10 @@
title: '登录状态',
dataIndex: 'status',
slotName: 'status',
align: 'center',
},
{
title: '登录IP',
title: '登录 IP',
dataIndex: 'clientIp',
},
{
@@ -153,6 +149,8 @@
dataIndex: 'createTime',
},
]);
// 查询列表
const fetchData = async (
params: LoginLogParams = { page: 1, size: 10, sort: ['createTime,desc'] }
) => {
@@ -162,8 +160,6 @@
renderData.value = data.list;
pagination.current = params.page;
pagination.total = data.total;
} catch (err) {
// you can report use errorHandler or other
} finally {
setLoading(false);
}

16
continew-admin-ui/src/views/monitor/log/operation/index.vue
View File

@@ -37,12 +37,7 @@
field="createTime"
hide-label
>
<a-range-picker
v-model="queryFormData.createTime"
format="YYYY-MM-DD HH:mm:ss"
show-time
style="width: 100%"
/>
<date-range-picker v-model="queryFormData.createTime" />
</a-form-item>
<a-button type="primary" @click="toQuery">
<template #icon>
@@ -97,7 +92,7 @@
<script lang="ts" setup>
import { computed, ref, reactive } from 'vue';
import useLoading from '@/hooks/loading';
import { queryOperationLogList, OperationLogRecord, OperationLogParams } from '@/api/monitor/operation-log';
import { queryOperationLogList, OperationLogRecord, OperationLogParams } from '@/api/monitor/log';
import { Pagination } from '@/types/global';
import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
@@ -152,9 +147,10 @@
title: '操作状态',
dataIndex: 'status',
slotName: 'status',
align: 'center',
},
{
title: '操作IP',
title: '操作 IP',
dataIndex: 'clientIp',
},
{
@@ -166,6 +162,8 @@
dataIndex: 'browser',
},
]);
// 查询列表
const fetchData = async (
params: OperationLogParams = { page: 1, size: 10, sort: ['createTime,desc'] }
) => {
@@ -175,8 +173,6 @@
renderData.value = data.list;
pagination.current = params.page;
pagination.total = data.total;
} catch (err) {
// you can report use errorHandler or other
} finally {
setLoading(false);
}

28
continew-admin-ui/src/views/monitor/log/system/index.vue
View File

@@ -7,12 +7,7 @@
<a-col :span="24">
<a-form ref="queryFormRef" :model="queryFormData" layout="inline">
<a-form-item field="createTime" hide-label>
<a-range-picker
v-model="queryFormData.createTime"
format="YYYY-MM-DD HH:mm:ss"
show-time
style="width: 100%"
/>
<date-range-picker v-model="queryFormData.createTime" />
</a-form-item>
<a-button type="primary" @click="toQuery">
<template #icon>
@@ -88,7 +83,7 @@
<template #title>日志详情</template>
<div style="margin: 10px 0 0 10px">
<a-descriptions title="基础信息" :column="2" bordered>
<a-descriptions-item label="客户端IP">
<a-descriptions-item label="客户端 IP">
<a-skeleton v-if="detailLoading" :animation="true">
<a-skeleton-line :widths="['200px']" :rows="1" />
</a-skeleton>
@@ -100,7 +95,7 @@
</a-skeleton>
<span v-else>{{ renderDetailData.browser }}</span>
</a-descriptions-item>
<a-descriptions-item label="IP归属地">
<a-descriptions-item label="IP 归属地">
<a-skeleton v-if="detailLoading" :animation="true">
<a-skeleton-line :widths="['200px']" :rows="1" />
</a-skeleton>
@@ -149,7 +144,7 @@
</a-skeleton>
<span v-else>{{ renderDetailData.requestMethod }}</span>
</a-descriptions-item>
<a-descriptions-item label="请求URL" :span="2">
<a-descriptions-item label="请求 URL" :span="2">
<a-skeleton v-if="detailLoading" :animation="true">
<a-skeleton-line :rows="1" />
</a-skeleton>
@@ -201,7 +196,6 @@
<a-space v-else>
<VueJsonPretty
v-if="renderDetailData.requestHeaders"
:path="'res'"
:data="JSON.parse(renderDetailData.requestHeaders)"
:show-length="true" />
<span v-else>无</span>
@@ -237,7 +231,7 @@
querySystemLogList,
SystemLogRecord,
SystemLogParams,
} from '@/api/monitor/system-log';
} from '@/api/monitor/log';
import { Pagination } from '@/types/global';
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
import { FormInstance } from '@arco-design/web-vue/es/form';
@@ -253,7 +247,6 @@
const renderData = ref<SystemLogRecord[]>([]);
const renderDetailData = ref<SystemLogDetailRecord>({
logId: '',
description: '',
requestUrl: '',
requestMethod: '',
requestHeaders: '',
@@ -265,7 +258,6 @@
clientIp: '',
location: '',
browser: '',
createUserString: '',
createTime: '',
});
@@ -290,22 +282,24 @@
title: '状态码',
dataIndex: 'statusCode',
slotName: 'statusCode',
align: 'center',
},
{
title: '请求方式',
dataIndex: 'requestMethod',
align: 'center',
},
{
title: '请求URI',
title: '请求 URI',
dataIndex: 'requestUrl',
slotName: 'requestUrl',
},
{
title: '客户端IP',
title: '客户端 IP',
dataIndex: 'clientIp',
},
{
title: 'IP归属地',
title: 'IP 归属地',
dataIndex: 'location',
},
{
@@ -316,6 +310,7 @@
title: '请求耗时',
dataIndex: 'elapsedTime',
slotName: 'elapsedTime',
align: 'center',
},
{
title: '创建时间',
@@ -324,6 +319,7 @@
{
title: '操作',
slotName: 'operations',
align: 'center',
},
]);

7
continew-admin-ui/src/views/system/user/center/components/operation-log.vue
View File

@@ -42,10 +42,10 @@
</template>
<script lang="ts" setup>
import { computed, ref, reactive } from "vue";
import { computed, ref, reactive } from 'vue';
import { useLoginStore } from '@/store';
import useLoading from '@/hooks/loading';
import { queryOperationLogList, OperationLogRecord, OperationLogParams } from '@/api/monitor/operation-log';
import { queryOperationLogList, OperationLogRecord, OperationLogParams } from '@/api/monitor/log';
import { Pagination } from '@/types/global';
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
@@ -78,9 +78,10 @@
title: '操作状态',
dataIndex: 'status',
slotName: 'status',
align: 'center',
},
{
title: '操作IP',
title: '操作 IP',
dataIndex: 'clientIp',
},
{