refactor: 登录信息 使用原生重构

This commit is contained in:
dap 2025-04-03 15:02:26 +08:00
parent 5d47026908
commit b5150b5863
2 changed files with 46 additions and 10 deletions

View File

@ -9,4 +9,5 @@ export interface LoginLog {
os: string;
msg: string;
loginTime: string;
clientKey: string;
}

View File

@ -1,22 +1,26 @@
<script setup lang="ts">
import type { LoginLog } from '#/api/monitor/logininfo/model';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DictEnum } from '@vben/constants';
import { Description, useDescription } from '#/components/description';
import { Descriptions, DescriptionsItem } from 'ant-design-vue';
import { modalSchema } from './data';
const [registerDescription, { setDescProps }] = useDescription({
column: 1,
schema: modalSchema(),
});
import { renderBrowserIcon, renderDict, renderOsIcon } from '#/utils/render';
const loginInfo = ref<LoginLog>();
const [BasicModal, modalApi] = useVbenModal({
onOpenChange: (isOpen) => {
if (!isOpen) {
return null;
}
const data = modalApi.getData();
setDescProps({ data }, true);
const record = modalApi.getData() as LoginLog;
loginInfo.value = record;
},
onClosed() {
loginInfo.value = undefined;
},
});
</script>
@ -28,6 +32,37 @@ const [BasicModal, modalApi] = useVbenModal({
class="w-[550px]"
title="登录日志"
>
<Description @register="registerDescription" />
<Descriptions v-if="loginInfo" size="small" :column="1" bordered>
<DescriptionsItem label="登录状态">
<component
:is="renderDict(loginInfo.status, DictEnum.SYS_COMMON_STATUS)"
/>
</DescriptionsItem>
<DescriptionsItem label="登录平台">
{{ loginInfo.clientKey.toLowerCase() }}
</DescriptionsItem>
<DescriptionsItem label="账号信息">
{{
`账号: ${loginInfo.userName} / ${loginInfo.ipaddr} / ${loginInfo.loginLocation}`
}}
</DescriptionsItem>
<DescriptionsItem label="登录时间">
{{ loginInfo.loginTime }}
</DescriptionsItem>
<DescriptionsItem label="登录信息">
<span
class="font-semibold"
:class="{ 'text-red-500': loginInfo.status !== '0' }"
>
{{ loginInfo.msg }}
</span>
</DescriptionsItem>
<DescriptionsItem label="登录设备">
<component :is="renderOsIcon(loginInfo.os)" />
</DescriptionsItem>
<DescriptionsItem label="浏览器">
<component :is="renderBrowserIcon(loginInfo.browser)" />
</DescriptionsItem>
</Descriptions>
</BasicModal>
</template>