feat: 🚀 用户请求日志记录

2024-12-29 13:05:33 +08:00 · 2024-12-29 13:05:33 +08:00 · 07ed1789ab
parent 3bfff5a884
commit 07ed1789ab
10 changed files with 540 additions and 63 deletions
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@ -1,5 +1,5 @@
 # 使用官方的 Nginx 镜像作为基础镜像
-FROM nginx
+FROM nginx:1.27.3

 # 删除默认的 Nginx 配置文件
 RUN rm /etc/nginx/conf.d/default.conf
--- a/src/api/v1/log/requestLog.ts
+++ b/src/api/v1/log/requestLog.ts
@ -0,0 +1,27 @@
+import { http } from '@/api/service/request';
+import type { BaseResult, ResultTable } from '@/api/service/types';
+
+/** 用户请求日志---获取用户请求日志列表 */
+export const fetchRequestLogList = (data: any) => {
+	data = {
+		url: data.url,
+		userId: data.userId,
+		username: data.username,
+		token: data.token,
+		ipAddress: data.ipAddress,
+		ipRegion: data.ipRegion,
+		userAgent: data.userAgent,
+		arg: data.arg,
+		result: data.result,
+		executeTime: data.executeTime,
+		xRequestedWith: data.xRequestedWith,
+		currentPage: data.currentPage,
+		pageSize: data.pageSize,
+	};
+	return http.request<BaseResult<ResultTable>>('get', `userRequestLog/getRequestLogList/${data.currentPage}/${data.pageSize}`, { params: data });
+};
+
+/** 用户请求日志---删除用户请求日志 */
+export const fetchDeletedRequestLogByIds = (data: any) => {
+	return http.request<BaseResult<object>>('delete', 'userRequestLog/deletedRequestLogByIds', { data });
+};
--- a/src/store/monitor/requestLog.ts
+++ b/src/store/monitor/requestLog.ts
@ -0,0 +1,62 @@
+import { defineStore } from 'pinia';
+import { pageSizes } from '@/enums/baseConstant';
+import { storeMessage } from '@/utils/message';
+import { storePagination } from '@/store/useStorePagination';
+import { fetchDeletedRequestLogByIds, fetchRequestLogList } from '@/api/v1/log/requestLog';
+
+/**
+ * 用户登录日志 Store
+ */
+export const useRequestLogStore = defineStore('requestLogStore', {
+	state() {
+		return {
+			// 用户登录日志列表
+			datalist: [],
+			// 查询表单
+			form: {
+				// 用户名
+				username: undefined,
+				// 登录Ip
+				ipAddress: undefined,
+				// 登录Ip归属地
+				ipRegion: undefined,
+				// 登录时代理
+				userAgent: undefined,
+				// 操作类型
+				type: undefined,
+				// 标识客户端是否是通过Ajax发送请求的
+				xRequestedWith: undefined,
+			},
+			// 分页查询结果
+			pagination: {
+				currentPage: 1,
+				pageSize: 30,
+				total: 1,
+				pageSizes,
+			},
+			// 加载
+			loading: false,
+		};
+	},
+	getters: {},
+	actions: {
+		/** 获取用户请求日志列表 */
+		async getRequestLogList() {
+			// 整理请求参数
+			const data = { ...this.pagination, ...this.form };
+
+			// 获取用户登录日志列表
+			const result = await fetchRequestLogList(data);
+
+			// 公共页面函数hook
+			const pagination = storePagination.bind(this);
+			return pagination(result);
+		},
+
+		/** 删除用户请求日志 */
+		async deletedRequestLogByIds(data: any) {
+			const result = await fetchDeletedRequestLogByIds(data);
+			return storeMessage(result);
+		},
+	},
+});
--- a/src/views/monitor/requestLog/index.vue
+++ b/src/views/monitor/requestLog/index.vue
@ -0,0 +1,143 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { columns } from '@/views/monitor/requestLog/utils/columns';
+import PureTableBar from '@/components/TableBar/src/bar';
+import PureTable from '@pureadmin/table';
+import { deleteIds, onDeleteBatch, onSearch, onView } from '@/views/monitor/requestLog/utils/hooks';
+import Delete from '@iconify-icons/ep/delete';
+import View from '@iconify-icons/ep/view';
+import Refresh from '@iconify-icons/ep/refresh';
+import { selectUserinfo } from '@/components/Table/Userinfo/columns';
+import { $t } from '@/plugins/i18n';
+import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
+import { FormInstance } from 'element-plus';
+import { auth } from '@/views/monitor/requestLog/utils/auth';
+import { hasAuth } from '@/router/utils';
+import { useRequestLogStore } from '@/store/monitor/requestLog';
+
+const tableRef = ref();
+const formRef = ref();
+const requestLogStore = useRequestLogStore();
+
+/** 当前页改变时 */
+const onCurrentPageChange = async (value: number) => {
+	requestLogStore.pagination.currentPage = value;
+	await onSearch();
+};
+
+/** 当分页发生变化 */
+const onPageSizeChange = async (value: number) => {
+	requestLogStore.pagination.pageSize = value;
+	await onSearch();
+};
+
+/** 选择多行 */
+const onSelectionChange = (rows: Array<any>) => {
+	deleteIds.value = rows.map((row: any) => row.id);
+};
+
+/** 重置表单 */
+const resetForm = async (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	formEl.resetFields();
+	await onSearch();
+};
+
+onMounted(() => {
+	onSearch();
+});
+</script>
+
+<template>
+	<div class="main">
+		<el-form ref="formRef" :inline="true" :model="requestLogStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
+			<!-- url -->
+			<el-form-item :label="$t('url')" prop="url">
+				<el-input v-model="requestLogStore.form.url" :placeholder="`${$t('input')}${$t('url')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 用户名 -->
+			<el-form-item :label="$t('userLoginLog_username')" prop="username">
+				<el-input v-model="requestLogStore.form.username" :placeholder="`${$t('input')}${$t('userLoginLog_username')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 登录Ip -->
+			<el-form-item :label="$t('userLoginLog_ipAddress')" prop="ipAddress">
+				<el-input v-model="requestLogStore.form.ipAddress" :placeholder="`${$t('input')}${$t('userLoginLog_ipAddress')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 登录Ip归属地 -->
+			<el-form-item :label="$t('userLoginLog_ipRegion')" prop="ipRegion">
+				<el-input v-model="requestLogStore.form.ipRegion" :placeholder="`${$t('input')}${$t('userLoginLog_ipRegion')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 标识客户端是否是通过Ajax发送请求的 -->
+			<el-form-item :label="$t('userLoginLog_xRequestedWith')" prop="xRequestedWith">
+				<el-input
+					v-model="requestLogStore.form.xRequestedWith"
+					:placeholder="`${$t('input')}${$t('userLoginLog_xRequestedWith')}`"
+					class="!w-[180px]"
+					clearable
+				/>
+			</el-form-item>
+
+			<el-form-item>
+				<el-button :icon="useRenderIcon('ri:search-line')" :loading="requestLogStore.loading" type="primary" @click="onSearch">
+					{{ $t('search') }}
+				</el-button>
+				<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> {{ $t('buttons.reset') }}</el-button>
+			</el-form-item>
+		</el-form>
+		<Auth :value="auth.search" />
+
+		<PureTableBar :columns="columns" :title="$t('userLoginLog')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
+			<template #buttons>
+				<!-- 批量删除按钮 -->
+				<el-button v-if="hasAuth(auth.deleted)" :disabled="!(deleteIds.length > 0)" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
+					{{ $t('deleteBatches') }}
+				</el-button>
+			</template>
+
+			<template v-slot="{ size, dynamicColumns }">
+				<pure-table
+					ref="tableRef"
+					:adaptiveConfig="{ offsetBottom: 96 }"
+					:columns="dynamicColumns"
+					:data="requestLogStore.datalist"
+					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
+					:loading="requestLogStore.loading"
+					:pagination="requestLogStore.pagination"
+					:size="size"
+					adaptive
+					align-whole="center"
+					border
+					highlight-current-row
+					row-key="id"
+					showOverflowTooltip
+					table-layout="auto"
+					@page-size-change="onPageSizeChange"
+					@selection-change="onSelectionChange"
+					@page-current-change="onCurrentPageChange"
+				>
+					<template #createUser="{ row }">
+						<el-button v-show="row.createUser" link type="primary" @click="selectUserinfo(row.createUser)">
+							{{ row.createUsername }}
+						</el-button>
+					</template>
+
+					<template #updateUser="{ row }">
+						<el-button v-show="row.updateUser" link type="primary" @click="selectUserinfo(row.updateUser)">
+							{{ row.updateUsername }}
+						</el-button>
+					</template>
+
+					<template #operation="{ row }">
+						<el-button v-if="hasAuth(auth.search)" :icon="useRenderIcon(View)" :size="size" class="reset-margin" link type="primary" @click="onView(row)">
+							{{ $t('view') }}
+						</el-button>
+					</template>
+				</pure-table>
+			</template>
+		</PureTableBar>
+	</div>
+</template>
--- a/src/views/monitor/requestLog/user-login-log-dialog.vue
+++ b/src/views/monitor/requestLog/user-login-log-dialog.vue
@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import { rules } from '@/views/monitor/userLoginLog/utils/columns';
+import { FormProps } from '@/views/monitor/userLoginLog/utils/types';
+import { $t } from '@/plugins/i18n';
+
+const props = withDefaults(defineProps<FormProps>(), {
+	formInline: () => ({
+		// 用户Id
+		userId: undefined,
+		// 用户名
+		username: undefined,
+		// 登录token
+		token: undefined,
+		// 登录Ip
+		ipAddress: undefined,
+		// 登录Ip归属地
+		ipRegion: undefined,
+		// 登录时代理
+		userAgent: undefined,
+		// 请求URL
+		url: undefined,
+		// 参数
+		arg: undefined,
+		// 结果
+		result: undefined,
+		// 执行时间
+		executeTime: undefined,
+		// 标识客户端是否是通过Ajax发送请求的
+		xRequestedWith: undefined,
+	}),
+});
+
+const formRef = ref<FormInstance>();
+const form = ref(props.formInline);
+
+defineExpose({ formRef });
+</script>
+
+<template>
+	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
+		<!-- 请求URL -->
+		<el-form-item :label="$t('url')" prop="url">
+			<el-input v-model="form.url" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 用户Id -->
+		<el-form-item :label="$t('userLoginLog_userId')" prop="userId">
+			<el-input v-model="form.userId" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 用户名 -->
+		<el-form-item :label="$t('userLoginLog_username')" prop="username">
+			<el-input v-model="form.username" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 登录token -->
+		<el-form-item :label="$t('userLoginLog_token')" prop="token">
+			<el-input v-model="form.token" :autosize="{ minRows: 2, maxRows: 8 }" autocomplete="off" type="textarea" />
+		</el-form-item>
+
+		<!-- 登录Ip -->
+		<el-form-item :label="$t('userLoginLog_ipAddress')" prop="ipAddress">
+			<el-input v-model="form.ipAddress" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 登录Ip归属地 -->
+		<el-form-item :label="$t('userLoginLog_ipRegion')" prop="ipRegion">
+			<el-input v-model="form.ipRegion" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 登录时代理 -->
+		<el-form-item :label="$t('userLoginLog_userAgent')" prop="userAgent">
+			<el-input v-model="form.userAgent" :autosize="{ minRows: 2, maxRows: 8 }" autocomplete="off" type="textarea" />
+		</el-form-item>
+
+		<!-- 标识客户端是否是通过Ajax发送请求的 -->
+		<el-form-item :label="$t('userLoginLog_xRequestedWith')" prop="xRequestedWith">
+			<el-input v-model="form.xRequestedWith" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 参数 -->
+		<el-form-item :label="$t('arg')" prop="arg">
+			<el-input v-model="form.arg" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 结果 -->
+		<el-form-item :label="$t('result')" prop="result">
+			<el-input v-model="form.result" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 执行时间 -->
+		<el-form-item :label="$t('executeTime')" prop="executeTime">
+			<el-input v-model="form.executeTime" autocomplete="off" type="text" />
+		</el-form-item>
+	</el-form>
+</template>
--- a/src/views/monitor/requestLog/utils/auth.ts
+++ b/src/views/monitor/requestLog/utils/auth.ts
@ -0,0 +1,6 @@
+export const auth = {
+	// 分页查询
+	search: ['userRequestLog::getRequestLogList'],
+	// 删除操作
+	deleted: ['userRequestLog::deletedRequestLogByIds'],
+};
--- a/src/views/monitor/requestLog/utils/columns.ts
+++ b/src/views/monitor/requestLog/utils/columns.ts
@ -0,0 +1,27 @@
+import { $t } from '@/plugins/i18n';
+
+// 表格列
+export const columns: TableColumnList = [
+	{ type: 'selection', align: 'left' },
+	{ type: 'index', index: (index: number) => index + 1, label: '序号', minWidth: 60 },
+	// 请求URL
+	{ label: $t('url'), prop: 'url', minWidth: 300 },
+	// 用户名
+	{ label: $t('userLoginLog_username'), prop: 'username', minWidth: 180 },
+	// 登录Ip
+	{ label: $t('userLoginLog_ipAddress'), prop: 'ipAddress', minWidth: 130 },
+	// 登录Ip归属地
+	{ label: $t('userLoginLog_ipRegion'), prop: 'ipRegion', minWidth: 160 },
+	// 参数
+	{ label: $t('arg'), prop: 'arg', minWidth: 130 },
+	// 结果
+	{ label: $t('result'), prop: 'result', minWidth: 130 },
+	{ label: $t('executeTime'), prop: 'executeTime', sortable: true, width: 160 },
+	// 登录时代理
+	{ label: $t('userLoginLog_userAgent'), prop: 'userAgent', minWidth: 200 },
+	// 标识客户端是否是通过Ajax发送请求的
+	{ label: $t('userLoginLog_xRequestedWith'), prop: 'xRequestedWith', minWidth: 150 },
+	// 登录token
+	{ label: $t('userLoginLog_token'), prop: 'token', width: 200 },
+	{ label: $t('table.operation'), fixed: 'right', width: 90, slot: 'operation' },
+];
--- a/src/views/monitor/requestLog/utils/hooks.ts
+++ b/src/views/monitor/requestLog/utils/hooks.ts
@ -0,0 +1,83 @@
+import { addDialog } from '@/components/BaseDialog/index';
+import UserLoginLogDialog from '@/views/monitor/requestLog/user-login-log-dialog.vue';
+import { useRequestLogStore } from '@/store/monitor/requestLog';
+import { h, ref } from 'vue';
+import { message } from '@/utils/message';
+import { $t } from '@/plugins/i18n';
+import DeleteBatchDialog from '@/components/Table/DeleteBatchDialog.vue';
+
+export const formRef = ref();
+// 删除ids
+export const deleteIds = ref([]);
+const requestLogStore = useRequestLogStore();
+
+/** 搜索初始化用户登录日志 */
+export async function onSearch() {
+	requestLogStore.loading = true;
+	await requestLogStore.getRequestLogList();
+	requestLogStore.loading = false;
+}
+
+/**
+ * * 查看用户登录日志
+ * @param row
+ */
+export function onView(row: any) {
+	addDialog({
+		title: `${$t('view')}${$t('userLoginLog')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				url: row.url,
+				userId: row.userId,
+				username: row.username,
+				token: row.token,
+				ipAddress: row.ipAddress,
+				ipRegion: row.ipRegion,
+				userAgent: row.userAgent,
+				arg: row.arg,
+				result: row.result,
+				executeTime: row.executeTime,
+				xRequestedWith: row.xRequestedWith,
+			},
+		},
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(UserLoginLogDialog, { ref: formRef }),
+		beforeSure: async done => {
+			done();
+			await onSearch();
+		},
+	});
+}
+
+/** 批量删除 */
+export const onDeleteBatch = async () => {
+	const ids = deleteIds.value;
+	const formDeletedBatchRef = ref();
+
+	addDialog({
+		title: $t('deleteBatchTip'),
+		width: '30%',
+		props: { formInline: { confirmText: '' } },
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(DeleteBatchDialog, { ref: formDeletedBatchRef }),
+		beforeSure: (done, { options }) => {
+			formDeletedBatchRef.value.formDeletedBatchRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const text = options.props.formInline.confirmText.toLowerCase();
+				if (text === 'yes' || text === 'y') {
+					// 删除数据
+					await requestLogStore.deletedRequestLogByIds(ids);
+					await onSearch();
+
+					done();
+				} else message($t('deleteBatchTip'), { type: 'warning' });
+			});
+		},
+	});
+};
--- a/src/views/monitor/requestLog/utils/types.ts
+++ b/src/views/monitor/requestLog/utils/types.ts
@ -0,0 +1,31 @@
+// 添加或者修改表单元素
+
+export interface FormItemProps {
+	// 用户Id
+	userId: number;
+	// 用户名
+	username: string;
+	// 登录token
+	token: string;
+	// 登录Ip
+	ipAddress: string;
+	// 登录Ip归属地
+	ipRegion: string;
+	// 登录时代理
+	userAgent: string;
+	// 请求URL
+	url: string;
+	// 参数
+	arg: string;
+	// 结果
+	result: string;
+	// 执行时间
+	executeTime: string;
+	// 标识客户端是否是通过Ajax发送请求的
+	xRequestedWith: string;
+}
+
+// 添加或修改表单Props
+export interface FormProps {
+	formInline: FormItemProps;
+}
--- a/src/views/monitor/userLoginLog/utils/hooks.ts
+++ b/src/views/monitor/userLoginLog/utils/hooks.ts
@ -13,9 +13,9 @@ const userLoginLogStore = useUserLoginLogStore();

 /** 搜索初始化用户登录日志 */
 export async function onSearch() {
-	userLoginLogStore.loading = true;
-	await userLoginLogStore.getUserLoginLogList();
-	userLoginLogStore.loading = false;
+  userLoginLogStore.loading = true;
+  await userLoginLogStore.getUserLoginLogList();
+  userLoginLogStore.loading = false;
 }

 /**
@ -23,76 +23,76 @@ export async function onSearch() {
 * @param row
 */
 export function onView(row: any) {
-	addDialog({
-		title: `${$t('view')}${$t('userLoginLog')}`,
-		width: '30%',
-		props: {
-			formInline: {
-				userId: row.userId,
-				username: row.username,
-				token: row.token,
-				ipAddress: row.ipAddress,
-				ipRegion: row.ipRegion,
-				userAgent: row.userAgent,
-				type: row.type,
-				xRequestedWith: row.xRequestedWith,
-			},
-		},
-		draggable: true,
-		fullscreenIcon: true,
-		closeOnClickModal: false,
-		contentRenderer: () => h(UserLoginLogDialog, { ref: formRef }),
-		beforeSure: async done => {
-			done();
-			await onSearch();
-		},
-	});
+  addDialog({
+    title: `${$t('view')}${$t('userLoginLog')}`,
+    width: '30%',
+    props: {
+      formInline: {
+        userId: row.userId,
+        username: row.username,
+        token: row.token,
+        ipAddress: row.ipAddress,
+        ipRegion: row.ipRegion,
+        userAgent: row.userAgent,
+        type: row.type,
+        xRequestedWith: row.xRequestedWith,
+      },
+    },
+    draggable: true,
+    fullscreenIcon: true,
+    closeOnClickModal: false,
+    contentRenderer: () => h(UserLoginLogDialog, { ref: formRef }),
+    beforeSure: async done => {
+      done();
+      await onSearch();
+    },
+  });
 }

 /** 删除用户登录日志 */
 export const onDelete = async (row: any) => {
-	const id = row.id;
+  const id = row.id;

-	// 是否确认删除
-	const result = await messageBox({
-		title: $t('confirmDelete'),
-		showMessage: false,
-		confirmMessage: undefined,
-		cancelMessage: $t('confirmDelete'),
-	});
-	if (!result) return;
+  // 是否确认删除
+  const result = await messageBox({
+    title: $t('confirmDelete'),
+    showMessage: false,
+    confirmMessage: undefined,
+    cancelMessage: $t('confirmDelete'),
+  });
+  if (!result) return;

-	// 删除数据
-	await userLoginLogStore.deleteUserLoginLog([id]);
-	await onSearch();
+  // 删除数据
+  await userLoginLogStore.deleteUserLoginLog([id]);
+  await onSearch();
 };

 /** 批量删除 */
 export const onDeleteBatch = async () => {
-	const ids = deleteIds.value;
-	const formDeletedBatchRef = ref();
+  const ids = deleteIds.value;
+  const formDeletedBatchRef = ref();

-	addDialog({
-		title: $t('deleteBatchTip'),
-		width: '30%',
-		props: { formInline: { confirmText: '' } },
-		draggable: true,
-		fullscreenIcon: true,
-		closeOnClickModal: false,
-		contentRenderer: () => h(DeleteBatchDialog, { ref: formDeletedBatchRef }),
-		beforeSure: (done, { options }) => {
-			formDeletedBatchRef.value.formDeletedBatchRef.validate(async (valid: any) => {
-				if (!valid) return;
+  addDialog({
+    title: $t('deleteBatchTip'),
+    width: '30%',
+    props: { formInline: { confirmText: '' } },
+    draggable: true,
+    fullscreenIcon: true,
+    closeOnClickModal: false,
+    contentRenderer: () => h(DeleteBatchDialog, { ref: formDeletedBatchRef }),
+    beforeSure: (done, { options }) => {
+      formDeletedBatchRef.value.formDeletedBatchRef.validate(async (valid: any) => {
+        if (!valid) return;

-				const text = options.props.formInline.confirmText.toLowerCase();
-				if (text === 'yes' || text === 'y') {
-					// 删除数据
-					await userLoginLogStore.deleteUserLoginLog(ids);
-					await onSearch();
+        const text = options.props.formInline.confirmText.toLowerCase();
+        if (text === 'yes' || text === 'y') {
+          // 删除数据
+          await userLoginLogStore.deleteUserLoginLog(ids);
+          await onSearch();

-					done();
-				} else message($t('deleteBatchTip'), { type: 'warning' });
-			});
-		},
-	});
+          done();
+        } else message($t('deleteBatchTip'), { type: 'warning' });
+      });
+    },
+  });
 };