page: 📄 重做用户登录日志页面

src/store/monitor/userLoginLog.ts

@@ -21,13 +21,45 @@ export const useUserLoginLogStore = defineStore('userLoginLogStore', {
 				// 登录token
 				token: undefined,
 				// 登录Ip
-				ipRegion: undefined,
-				// 登录Ip地点
 				ipAddress: undefined,
+				// 登录Ip归属地
+				ipRegion: undefined,
 				// 登录时代理
 				userAgent: undefined,
 				// 操作类型
 				type: undefined,
+				// 标识客户端是否是通过Ajax发送请求的
+				xRequestedWith: undefined,
+				// 用户代理的品牌和版本
+				secChUa: undefined,
+				// 用户代理的底层平台架构
+				secChUaArch: undefined,
+				// 用户代理的底层CPU架构位数
+				secChUaBitness: undefined,
+				// 用户代理是否在手机设备上运行
+				secChUaMobile: undefined,
+				// 用户代理的设备模型
+				secChUaModel: undefined,
+				// 用户代理的底层操作系统/平台
+				secChUaPlatform: undefined,
+				// 用户代理的底层操作系统版本
+				secChUaPlatformVersion: undefined,
+				// 客户端设备像素比
+				contentDpr: undefined,
+				// 客户端RAM内存的近似值
+				deviceMemory: undefined,
+				// 客户端设备像素比
+				dpr: undefined,
+				// 布局视口宽度
+				viewportWidth: undefined,
+				// 所需资源宽度
+				width: undefined,
+				// 客户端连接到服务器的近似带宽
+				downlink: undefined,
+				// 有效连接类型
+				ect: undefined,
+				// 应用层往返时间
+				rtt: undefined,
 			},
 			// 分页查询结果
 			pagination: {

src/views/monitor/userLoginLog/index.vue

@@ -60,27 +60,120 @@ onMounted(() => {
 <template>
 	<div class="main">
 		<el-form ref="formRef" :inline="true" :model="userLoginLogStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
+			<!-- 用户Id -->
 			<el-form-item :label="$t('userLoginLog_userId')" prop="userId">
 				<el-input v-model="userLoginLogStore.form.userId" :placeholder="`${$t('input')}${$t('userLoginLog_userId')}`" class="!w-[180px]" clearable />
 			</el-form-item>
+
+			<!-- 用户名 -->
 			<el-form-item :label="$t('userLoginLog_username')" prop="username">
 				<el-input v-model="userLoginLogStore.form.username" :placeholder="`${$t('input')}${$t('userLoginLog_username')}`" class="!w-[180px]" clearable />
 			</el-form-item>
+
+			<!-- 登录token -->
 			<el-form-item :label="$t('userLoginLog_token')" prop="token">
 				<el-input v-model="userLoginLogStore.form.token" :placeholder="`${$t('input')}${$t('userLoginLog_token')}`" class="!w-[180px]" clearable />
 			</el-form-item>
-			<el-form-item :label="$t('userLoginLog_ipRegion')" prop="ip">
+
-				<el-input v-model="userLoginLogStore.form.ipRegion" :placeholder="`${$t('input')}${$t('userLoginLog_ipRegion')}`" class="!w-[180px]" clearable />
+			<!-- 登录Ip -->
-			</el-form-item>
 			<el-form-item :label="$t('userLoginLog_ipAddress')" prop="ipAddress">
 				<el-input v-model="userLoginLogStore.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="userLoginLogStore.form.ipRegion" :placeholder="`${$t('input')}${$t('userLoginLog_ipRegion')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 登录时代理 -->
 			<el-form-item :label="$t('userLoginLog_userAgent')" prop="userAgent">
 				<el-input v-model="userLoginLogStore.form.userAgent" :placeholder="`${$t('input')}${$t('userLoginLog_userAgent')}`" class="!w-[180px]" clearable />
 			</el-form-item>
+
+			<!-- 操作类型 -->
 			<el-form-item :label="$t('userLoginLog_type')" prop="type">
 				<el-input v-model="userLoginLogStore.form.type" :placeholder="`${$t('input')}${$t('userLoginLog_type')}`" class="!w-[180px]" clearable />
 			</el-form-item>
+
+			<!-- 标识客户端是否是通过Ajax发送请求的 -->
+			<el-form-item :label="$t('userLoginLog_xRequestedWith')" prop="xRequestedWith">
+				<el-input v-model="userLoginLogStore.form.xRequestedWith" :placeholder="`${$t('input')}${$t('userLoginLog_xRequestedWith')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 用户代理的品牌和版本 -->
+			<el-form-item :label="$t('userLoginLog_secChUa')" prop="secChUa">
+				<el-input v-model="userLoginLogStore.form.secChUa" :placeholder="`${$t('input')}${$t('userLoginLog_secChUa')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 用户代理的底层平台架构 -->
+			<el-form-item :label="$t('userLoginLog_secChUaArch')" prop="secChUaArch">
+				<el-input v-model="userLoginLogStore.form.secChUaArch" :placeholder="`${$t('input')}${$t('userLoginLog_secChUaArch')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 用户代理的底层CPU架构位数 -->
+			<el-form-item :label="$t('userLoginLog_secChUaBitness')" prop="secChUaBitness">
+				<el-input v-model="userLoginLogStore.form.secChUaBitness" :placeholder="`${$t('input')}${$t('userLoginLog_secChUaBitness')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 用户代理是否在手机设备上运行 -->
+			<el-form-item :label="$t('userLoginLog_secChUaMobile')" prop="secChUaMobile">
+				<el-input v-model="userLoginLogStore.form.secChUaMobile" :placeholder="`${$t('input')}${$t('userLoginLog_secChUaMobile')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 用户代理的设备模型 -->
+			<el-form-item :label="$t('userLoginLog_secChUaModel')" prop="secChUaModel">
+				<el-input v-model="userLoginLogStore.form.secChUaModel" :placeholder="`${$t('input')}${$t('userLoginLog_secChUaModel')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 用户代理的底层操作系统/平台 -->
+			<el-form-item :label="$t('userLoginLog_secChUaPlatform')" prop="secChUaPlatform">
+				<el-input v-model="userLoginLogStore.form.secChUaPlatform" :placeholder="`${$t('input')}${$t('userLoginLog_secChUaPlatform')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 用户代理的底层操作系统版本 -->
+			<el-form-item :label="$t('userLoginLog_secChUaPlatformVersion')" prop="secChUaPlatformVersion">
+				<el-input v-model="userLoginLogStore.form.secChUaPlatformVersion" :placeholder="`${$t('input')}${$t('userLoginLog_secChUaPlatformVersion')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 客户端设备像素比 -->
+			<el-form-item :label="$t('userLoginLog_contentDpr')" prop="contentDpr">
+				<el-input v-model="userLoginLogStore.form.contentDpr" :placeholder="`${$t('input')}${$t('userLoginLog_contentDpr')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 客户端RAM内存的近似值 -->
+			<el-form-item :label="$t('userLoginLog_deviceMemory')" prop="deviceMemory">
+				<el-input v-model="userLoginLogStore.form.deviceMemory" :placeholder="`${$t('input')}${$t('userLoginLog_deviceMemory')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 客户端设备像素比 -->
+			<el-form-item :label="$t('userLoginLog_dpr')" prop="dpr">
+				<el-input v-model="userLoginLogStore.form.dpr" :placeholder="`${$t('input')}${$t('userLoginLog_dpr')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 布局视口宽度 -->
+			<el-form-item :label="$t('userLoginLog_viewportWidth')" prop="viewportWidth">
+				<el-input v-model="userLoginLogStore.form.viewportWidth" :placeholder="`${$t('input')}${$t('userLoginLog_viewportWidth')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 所需资源宽度 -->
+			<el-form-item :label="$t('userLoginLog_width')" prop="width">
+				<el-input v-model="userLoginLogStore.form.width" :placeholder="`${$t('input')}${$t('userLoginLog_width')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 客户端连接到服务器的近似带宽 -->
+			<el-form-item :label="$t('userLoginLog_downlink')" prop="downlink">
+				<el-input v-model="userLoginLogStore.form.downlink" :placeholder="`${$t('input')}${$t('userLoginLog_downlink')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 有效连接类型 -->
+			<el-form-item :label="$t('userLoginLog_ect')" prop="ect">
+				<el-input v-model="userLoginLogStore.form.ect" :placeholder="`${$t('input')}${$t('userLoginLog_ect')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 应用层往返时间 -->
+			<el-form-item :label="$t('userLoginLog_rtt')" prop="rtt">
+				<el-input v-model="userLoginLogStore.form.rtt" :placeholder="`${$t('input')}${$t('userLoginLog_rtt')}`" class="!w-[180px]" clearable />
+			</el-form-item>
 			<el-form-item>
 				<el-button :icon="useRenderIcon('ri:search-line')" :loading="userLoginLogStore.loading" type="primary" @click="onSearch"> {{ $t('search') }} </el-button>
 				<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> {{ $t('buttons.reset') }}</el-button>
@@ -117,15 +210,11 @@ onMounted(() => {
 					@page-current-change="onCurrentPageChange"
 				>
 					<template #createUser="{ row }">
-						<el-button v-show="row.createUser" link type="primary" @click="selectUserinfo(row.createUser)">
+						<el-button link type="primary" @click="selectUserinfo(row.createUser)">{{ $t('table.createUser') }} </el-button>
-							{{ $t('table.createUser') }}
-						</el-button>
 					</template>
 
 					<template #updateUser="{ row }">
-						<el-button v-show="row.updateUser" link type="primary" @click="selectUserinfo(row.updateUser)">
+						<el-button link type="primary" @click="selectUserinfo(row.updateUser)">{{ $t('table.updateUser') }} </el-button>
-							{{ $t('table.updateUser') }}
-						</el-button>
 					</template>
 
 					<template #operation="{ row }">

src/views/monitor/userLoginLog/user-login-log-dialog.vue

@@ -14,11 +14,45 @@ const props = withDefaults(defineProps<FormProps>(), {
 		// 登录token
 		token: undefined,
 		// 登录Ip
-		ipRegion: undefined,
-		// 登录Ip地点
 		ipAddress: undefined,
+		// 登录Ip归属地
+		ipRegion: undefined,
 		// 登录时代理
 		userAgent: undefined,
+		// 操作类型
+		type: undefined,
+		// 标识客户端是否是通过Ajax发送请求的
+		xRequestedWith: undefined,
+		// 用户代理的品牌和版本
+		secChUa: undefined,
+		// 用户代理的底层平台架构
+		secChUaArch: undefined,
+		// 用户代理的底层CPU架构位数
+		secChUaBitness: undefined,
+		// 用户代理是否在手机设备上运行
+		secChUaMobile: undefined,
+		// 用户代理的设备模型
+		secChUaModel: undefined,
+		// 用户代理的底层操作系统/平台
+		secChUaPlatform: undefined,
+		// 用户代理的底层操作系统版本
+		secChUaPlatformVersion: undefined,
+		// 客户端设备像素比
+		contentDpr: undefined,
+		// 客户端RAM内存的近似值
+		deviceMemory: undefined,
+		// 客户端设备像素比
+		dpr: undefined,
+		// 布局视口宽度
+		viewportWidth: undefined,
+		// 所需资源宽度
+		width: undefined,
+		// 客户端连接到服务器的近似带宽
+		downlink: undefined,
+		// 有效连接类型
+		ect: undefined,
+		// 应用层往返时间
+		rtt: undefined,
 	}),
 });
 
@@ -46,18 +80,103 @@ defineExpose({ formRef });
 		</el-form-item>
 
 		<!-- 登录Ip -->
-		<el-form-item :label="$t('userLoginLog_ipRegion')" prop="ip">
-			<el-input v-model="form.ipRegion" :placeholder="$t('input') + $t('userLoginLog_ipRegion')" autocomplete="off" type="text" />
-		</el-form-item>
-
-		<!-- 登录Ip地点 -->
 		<el-form-item :label="$t('userLoginLog_ipAddress')" prop="ipAddress">
 			<el-input v-model="form.ipAddress" :placeholder="$t('input') + $t('userLoginLog_ipAddress')" autocomplete="off" type="text" />
 		</el-form-item>
 
+		<!-- 登录Ip归属地 -->
+		<el-form-item :label="$t('userLoginLog_ipRegion')" prop="ipRegion">
+			<el-input v-model="form.ipRegion" :placeholder="$t('input') + $t('userLoginLog_ipRegion')" autocomplete="off" type="text" />
+		</el-form-item>
+
 		<!-- 登录时代理 -->
 		<el-form-item :label="$t('userLoginLog_userAgent')" prop="userAgent">
 			<el-input v-model="form.userAgent" :placeholder="$t('input') + $t('userLoginLog_userAgent')" autocomplete="off" type="text" />
 		</el-form-item>
+
+		<!-- 操作类型 -->
+		<el-form-item :label="$t('userLoginLog_type')" prop="type">
+			<el-input v-model="form.type" :placeholder="$t('input') + $t('userLoginLog_type')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 标识客户端是否是通过Ajax发送请求的 -->
+		<el-form-item :label="$t('userLoginLog_xRequestedWith')" prop="xRequestedWith">
+			<el-input v-model="form.xRequestedWith" :placeholder="$t('input') + $t('userLoginLog_xRequestedWith')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 用户代理的品牌和版本 -->
+		<el-form-item :label="$t('userLoginLog_secChUa')" prop="secChUa">
+			<el-input v-model="form.secChUa" :placeholder="$t('input') + $t('userLoginLog_secChUa')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 用户代理的底层平台架构 -->
+		<el-form-item :label="$t('userLoginLog_secChUaArch')" prop="secChUaArch">
+			<el-input v-model="form.secChUaArch" :placeholder="$t('input') + $t('userLoginLog_secChUaArch')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 用户代理的底层CPU架构位数 -->
+		<el-form-item :label="$t('userLoginLog_secChUaBitness')" prop="secChUaBitness">
+			<el-input v-model="form.secChUaBitness" :placeholder="$t('input') + $t('userLoginLog_secChUaBitness')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 用户代理是否在手机设备上运行 -->
+		<el-form-item :label="$t('userLoginLog_secChUaMobile')" prop="secChUaMobile">
+			<el-input v-model="form.secChUaMobile" :placeholder="$t('input') + $t('userLoginLog_secChUaMobile')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 用户代理的设备模型 -->
+		<el-form-item :label="$t('userLoginLog_secChUaModel')" prop="secChUaModel">
+			<el-input v-model="form.secChUaModel" :placeholder="$t('input') + $t('userLoginLog_secChUaModel')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 用户代理的底层操作系统/平台 -->
+		<el-form-item :label="$t('userLoginLog_secChUaPlatform')" prop="secChUaPlatform">
+			<el-input v-model="form.secChUaPlatform" :placeholder="$t('input') + $t('userLoginLog_secChUaPlatform')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 用户代理的底层操作系统版本 -->
+		<el-form-item :label="$t('userLoginLog_secChUaPlatformVersion')" prop="secChUaPlatformVersion">
+			<el-input v-model="form.secChUaPlatformVersion" :placeholder="$t('input') + $t('userLoginLog_secChUaPlatformVersion')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 客户端设备像素比 -->
+		<el-form-item :label="$t('userLoginLog_contentDpr')" prop="contentDpr">
+			<el-input v-model="form.contentDpr" :placeholder="$t('input') + $t('userLoginLog_contentDpr')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 客户端RAM内存的近似值 -->
+		<el-form-item :label="$t('userLoginLog_deviceMemory')" prop="deviceMemory">
+			<el-input v-model="form.deviceMemory" :placeholder="$t('input') + $t('userLoginLog_deviceMemory')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 客户端设备像素比 -->
+		<el-form-item :label="$t('userLoginLog_dpr')" prop="dpr">
+			<el-input v-model="form.dpr" :placeholder="$t('input') + $t('userLoginLog_dpr')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 布局视口宽度 -->
+		<el-form-item :label="$t('userLoginLog_viewportWidth')" prop="viewportWidth">
+			<el-input v-model="form.viewportWidth" :placeholder="$t('input') + $t('userLoginLog_viewportWidth')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 所需资源宽度 -->
+		<el-form-item :label="$t('userLoginLog_width')" prop="width">
+			<el-input v-model="form.width" :placeholder="$t('input') + $t('userLoginLog_width')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 客户端连接到服务器的近似带宽 -->
+		<el-form-item :label="$t('userLoginLog_downlink')" prop="downlink">
+			<el-input v-model="form.downlink" :placeholder="$t('input') + $t('userLoginLog_downlink')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 有效连接类型 -->
+		<el-form-item :label="$t('userLoginLog_ect')" prop="ect">
+			<el-input v-model="form.ect" :placeholder="$t('input') + $t('userLoginLog_ect')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 应用层往返时间 -->
+		<el-form-item :label="$t('userLoginLog_rtt')" prop="rtt">
+			<el-input v-model="form.rtt" :placeholder="$t('input') + $t('userLoginLog_rtt')" autocomplete="off" type="text" />
+		</el-form-item>
 	</el-form>
 </template>

src/views/monitor/userLoginLog/utils/columns.ts

@@ -6,24 +6,116 @@ export const columns: TableColumnList = [
 	{ type: 'selection', align: 'left' },
 	{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
 	// 用户Id
-	{ label: $t('userLoginLog_userId'), prop: 'userId' },
+	{ label: $t('userLoginLog_userId'), prop: 'userId', width: 180 },
 	// 用户名
-	{ label: $t('userLoginLog_username'), prop: 'username' },
+	{ label: $t('userLoginLog_username'), prop: 'username', width: 180 },
-	// 登录token
-	{ label: $t('userLoginLog_token'), prop: 'token' },
 	// 登录Ip
-	{ label: $t('userLoginLog_ipAddress'), prop: 'ipAddress' },
+	{ label: $t('userLoginLog_ipAddress'), prop: 'ipAddress', width: 180 },
-	// 登录Ip地点
+	// 登录Ip归属地
-	{ label: $t('userLoginLog_ipRegion'), prop: 'ipRegion' },
+	{ label: $t('userLoginLog_ipRegion'), prop: 'ipRegion', width: 130 },
 	// 登录时代理
-	{ label: $t('userLoginLog_userAgent'), prop: 'userAgent' },
+	{ label: $t('userLoginLog_userAgent'), prop: 'userAgent', width: 200 },
 	// 操作类型
-	{ label: $t('userLoginLog_type'), prop: 'type' },
+	{ label: $t('userLoginLog_type'), prop: 'type', width: 130 },
+	// 标识客户端是否是通过Ajax发送请求的
+	{ label: $t('userLoginLog_xRequestedWith'), prop: 'xRequestedWith', width: 130 },
+	// 用户代理的品牌和版本
+	{ label: $t('userLoginLog_secChUa'), prop: 'secChUa', width: 150 },
+	// 用户代理的底层平台架构
+	{ label: $t('userLoginLog_secChUaArch'), prop: 'secChUaArch', width: 150 },
+	// 用户代理的底层CPU架构位数
+	{ label: $t('userLoginLog_secChUaBitness'), prop: 'secChUaBitness', width: 150 },
+	// 用户代理是否在手机设备上运行
+	{ label: $t('userLoginLog_secChUaMobile'), prop: 'secChUaMobile', width: 150 },
+	// 用户代理的设备模型
+	{ label: $t('userLoginLog_secChUaModel'), prop: 'secChUaModel', width: 150 },
+	// 用户代理的底层操作系统/平台
+	{ label: $t('userLoginLog_secChUaPlatform'), prop: 'secChUaPlatform', width: 160 },
+	// 用户代理的底层操作系统版本
+	{ label: $t('userLoginLog_secChUaPlatformVersion'), prop: 'secChUaPlatformVersion', width: 180 },
+	// 客户端设备像素比
+	{ label: $t('userLoginLog_contentDpr'), prop: 'contentDpr', width: 150 },
+	// 客户端RAM内存的近似值
+	{ label: $t('userLoginLog_deviceMemory'), prop: 'deviceMemory', width: 150 },
+	// 客户端设备像素比
+	{ label: $t('userLoginLog_dpr'), prop: 'dpr', width: 150 },
+	// 布局视口宽度
+	{ label: $t('userLoginLog_viewportWidth'), prop: 'viewportWidth', width: 150 },
+	// 所需资源宽度
+	{ label: $t('userLoginLog_width'), prop: 'width', width: 150 },
+	// 客户端连接到服务器的近似带宽
+	{ label: $t('userLoginLog_downlink'), prop: 'downlink', width: 150 },
+	// 有效连接类型
+	{ label: $t('userLoginLog_ect'), prop: 'ect', width: 150 },
+	// 应用层往返时间
+	{ label: $t('userLoginLog_rtt'), prop: 'rtt', width: 150 },
+	// 登录token
+	{ label: $t('userLoginLog_token'), prop: 'token', width: 260 },
 	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
 	{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
 	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90 },
 	{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90 },
-	{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
+	{ label: $t('table.operation'), fixed: 'right', width: 160, slot: 'operation' },
 ];
 
-export const rules = reactive({});
+// 添加规则
+export const rules = reactive({
+	// 用户Id
+	userId: [{ required: true, message: `${$t('input')}${$t('userLoginLog_userId')}`, trigger: 'blur' }],
+	// 用户名
+	username: [{ required: true, message: `${$t('input')}${$t('userLoginLog_username')}`, trigger: 'blur' }],
+	// 登录token
+	token: [{ required: true, message: `${$t('input')}${$t('userLoginLog_token')}`, trigger: 'blur' }],
+	// 登录Ip
+	ipAddress: [{ required: true, message: `${$t('input')}${$t('userLoginLog_ipAddress')}`, trigger: 'blur' }],
+	// 登录Ip归属地
+	ipRegion: [{ required: true, message: `${$t('input')}${$t('userLoginLog_ipRegion')}`, trigger: 'blur' }],
+	// 登录时代理
+	userAgent: [{ required: true, message: `${$t('input')}${$t('userLoginLog_userAgent')}`, trigger: 'blur' }],
+	// 操作类型
+	type: [{ required: true, message: `${$t('input')}${$t('userLoginLog_type')}`, trigger: 'blur' }],
+	// 标识客户端是否是通过Ajax发送请求的
+	xRequestedWith: [{ required: true, message: `${$t('input')}${$t('userLoginLog_xRequestedWith')}`, trigger: 'blur' }],
+	// 用户代理的品牌和版本
+	secChUa: [{ required: true, message: `${$t('input')}${$t('userLoginLog_secChUa')}`, trigger: 'blur' }],
+	// 用户代理的底层平台架构
+	secChUaArch: [{ required: true, message: `${$t('input')}${$t('userLoginLog_secChUaArch')}`, trigger: 'blur' }],
+	// 用户代理的底层CPU架构位数
+	secChUaBitness: [{ required: true, message: `${$t('input')}${$t('userLoginLog_secChUaBitness')}`, trigger: 'blur' }],
+	// 用户代理是否在手机设备上运行
+	secChUaMobile: [{ required: true, message: `${$t('input')}${$t('userLoginLog_secChUaMobile')}`, trigger: 'blur' }],
+	// 用户代理的设备模型
+	secChUaModel: [{ required: true, message: `${$t('input')}${$t('userLoginLog_secChUaModel')}`, trigger: 'blur' }],
+	// 用户代理的底层操作系统/平台
+	secChUaPlatform: [
+		{
+			required: true,
+			message: `${$t('input')}${$t('userLoginLog_secChUaPlatform')}`,
+			trigger: 'blur',
+		},
+	],
+	// 用户代理的底层操作系统版本
+	secChUaPlatformVersion: [
+		{
+			required: true,
+			message: `${$t('input')}${$t('userLoginLog_secChUaPlatformVersion')}`,
+			trigger: 'blur',
+		},
+	],
+	// 客户端设备像素比
+	contentDpr: [{ required: true, message: `${$t('input')}${$t('userLoginLog_contentDpr')}`, trigger: 'blur' }],
+	// 客户端RAM内存的近似值
+	deviceMemory: [{ required: true, message: `${$t('input')}${$t('userLoginLog_deviceMemory')}`, trigger: 'blur' }],
+	// 客户端设备像素比
+	dpr: [{ required: true, message: `${$t('input')}${$t('userLoginLog_dpr')}`, trigger: 'blur' }],
+	// 布局视口宽度
+	viewportWidth: [{ required: true, message: `${$t('input')}${$t('userLoginLog_viewportWidth')}`, trigger: 'blur' }],
+	// 所需资源宽度
+	width: [{ required: true, message: `${$t('input')}${$t('userLoginLog_width')}`, trigger: 'blur' }],
+	// 客户端连接到服务器的近似带宽
+	downlink: [{ required: true, message: `${$t('input')}${$t('userLoginLog_downlink')}`, trigger: 'blur' }],
+	// 有效连接类型
+	ect: [{ required: true, message: `${$t('input')}${$t('userLoginLog_ect')}`, trigger: 'blur' }],
+	// 应用层往返时间
+	rtt: [{ required: true, message: `${$t('input')}${$t('userLoginLog_rtt')}`, trigger: 'blur' }],
+});

src/views/monitor/userLoginLog/utils/hooks.ts

@@ -33,10 +33,26 @@ export function onUpdate(row: any) {
 				userId: row.userId,
 				username: row.username,
 				token: row.token,
-				ipRegion: row.ipRegion,
 				ipAddress: row.ipAddress,
+				ipRegion: row.ipRegion,
 				userAgent: row.userAgent,
 				type: row.type,
+				xRequestedWith: row.xRequestedWith,
+				secChUa: row.secChUa,
+				secChUaArch: row.secChUaArch,
+				secChUaBitness: row.secChUaBitness,
+				secChUaMobile: row.secChUaMobile,
+				secChUaModel: row.secChUaModel,
+				secChUaPlatform: row.secChUaPlatform,
+				secChUaPlatformVersion: row.secChUaPlatformVersion,
+				contentDpr: row.contentDpr,
+				deviceMemory: row.deviceMemory,
+				dpr: row.dpr,
+				viewportWidth: row.viewportWidth,
+				width: row.width,
+				downlink: row.downlink,
+				ect: row.ect,
+				rtt: row.rtt,
 			},
 		},
 		draggable: true,

src/views/monitor/userLoginLog/utils/types.ts

@@ -7,13 +7,45 @@ export interface FormItemProps {
 	// 登录token
 	token: string;
 	// 登录Ip
-	ipRegion: string;
-	// 登录Ip地点
 	ipAddress: string;
+	// 登录Ip归属地
+	ipRegion: string;
 	// 登录时代理
 	userAgent: string;
 	// 操作类型
 	type: string;
+	// 标识客户端是否是通过Ajax发送请求的
+	xRequestedWith: string;
+	// 用户代理的品牌和版本
+	secChUa: string;
+	// 用户代理的底层平台架构
+	secChUaArch: string;
+	// 用户代理的底层CPU架构位数
+	secChUaBitness: string;
+	// 用户代理是否在手机设备上运行
+	secChUaMobile: string;
+	// 用户代理的设备模型
+	secChUaModel: string;
+	// 用户代理的底层操作系统/平台
+	secChUaPlatform: string;
+	// 用户代理的底层操作系统版本
+	secChUaPlatformVersion: string;
+	// 客户端设备像素比
+	contentDpr: string;
+	// 客户端RAM内存的近似值
+	deviceMemory: string;
+	// 客户端设备像素比
+	dpr: string;
+	// 布局视口宽度
+	viewportWidth: string;
+	// 所需资源宽度
+	width: string;
+	// 客户端连接到服务器的近似带宽
+	downlink: string;
+	// 有效连接类型
+	ect: string;
+	// 应用层往返时间
+	rtt: string;
 }
 
 // 添加或修改表单Props