auth/auth-web
auth
/
auth-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Bunny 2024-10-19 01:18:38 +08:00
parent 623168769f
commit f119f943f9
6 changed files with 412 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/store/monitor/userLoginLog.ts
View File

@ -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: {

107
src/views/monitor/userLoginLog/index.vue
View File

@ -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 />
</el-form-item>
<!-- 登录Ip -->
<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)">
{{ $t('table.createUser') }}
</el-button>
<el-button link type="primary" @click="selectUserinfo(row.createUser)">{{ $t('table.createUser') }} </el-button>
</template>
<template #updateUser="{ row }">
<el-button v-show="row.updateUser" link type="primary" @click="selectUserinfo(row.updateUser)">
{{ $t('table.updateUser') }}
</el-button>
<el-button link type="primary" @click="selectUserinfo(row.updateUser)">{{ $t('table.updateUser') }} </el-button>
</template>
<template #operation="{ row }">

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

@ -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>

114
src/views/monitor/userLoginLog/utils/columns.ts
View File

@ -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' },
// 登录token
{ label: $t('userLoginLog_token'), prop: 'token' },
{ label: $t('userLoginLog_username'), prop: 'username', width: 180 },
// 登录Ip
{ label: $t('userLoginLog_ipAddress'), prop: 'ipAddress' },
// 登录Ip地点
{ label: $t('userLoginLog_ipRegion'), prop: 'ipRegion' },
{ label: $t('userLoginLog_ipAddress'), prop: 'ipAddress', width: 180 },
// 登录Ip归属地
{ 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' }],
});

18
src/views/monitor/userLoginLog/utils/hooks.ts
View File

@ -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,

36
src/views/monitor/userLoginLog/utils/types.ts
View File

@ -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