From 1cee71e18fbd1dc33dd41d33cecd50bc1de14203 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Tue, 13 Jan 2026 21:26:47 +0800
Subject: [PATCH] =?UTF-8?q?refactor(login-info-modal):=20=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=20computed=20=E9=87=8D=E6=9E=84=E6=8F=8F=E8=BF=B0?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=A1=B9=E4=BB=A5=E6=8F=90=E9=AB=98=E5=8F=AF?=
 =?UTF-8?q?=E7=BB=B4=E6=8A=A4=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../monitor/logininfor/login-info-modal.vue   | 93 ++++++++++++-------
 1 file changed, 58 insertions(+), 35 deletions(-)

diff --git a/apps/web-antd/src/views/monitor/logininfor/login-info-modal.vue b/apps/web-antd/src/views/monitor/logininfor/login-info-modal.vue
index 58cef6fc..498a1f81 100644
--- a/apps/web-antd/src/views/monitor/logininfor/login-info-modal.vue
+++ b/apps/web-antd/src/views/monitor/logininfor/login-info-modal.vue
@@ -1,12 +1,14 @@
-<script setup lang="ts">
+<script setup lang="tsx">
+import type { DescriptionsProps } from 'antdv-next';
+
 import type { LoginLog } from '#/api/monitor/logininfo/model';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { DictEnum } from '@vben/constants';
 
-import { Descriptions, DescriptionsItem } from 'antdv-next';
+import { Descriptions } from 'antdv-next';
 
 import { renderBrowserIcon, renderDict, renderOsIcon } from '#/utils/render';
 
@@ -23,6 +25,52 @@ const [BasicModal, modalApi] = useVbenModal({
     loginInfo.value = undefined;
   },
 });
+
+const items = computed<DescriptionsProps['items']>(() => {
+  if (!loginInfo.value) {
+    return [];
+  }
+  const data = loginInfo.value;
+  return [
+    {
+      label: '登录状态',
+      content: renderDict(data.status, DictEnum.SYS_COMMON_STATUS),
+    },
+    {
+      label: '登录平台',
+      content: data.clientKey?.toLowerCase(),
+    },
+    {
+      label: '账号信息',
+      content: `账号: ${data.userName} / ${data.ipaddr} / ${data.loginLocation}`,
+    },
+    {
+      label: '登录时间',
+      content: data.loginTime,
+    },
+    {
+      label: '登录信息',
+      content: (
+        <span
+          class={{
+            'font-semibold': true,
+            'text-red-500': data.status !== '0',
+          }}
+        >
+          {data.msg}
+        </span>
+      ),
+    },
+    {
+      label: '登录设备',
+      content: renderOsIcon(data.os),
+    },
+    {
+      label: '浏览器',
+      content: renderBrowserIcon(data.browser),
+    },
+  ];
+});
 </script>
 
 <template>
@@ -32,37 +80,12 @@ const [BasicModal, modalApi] = useVbenModal({
     class="w-[550px]"
     title="登录日志"
   >
-    <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>
+    <Descriptions
+      v-if="loginInfo"
+      :column="1"
+      :items="items"
+      bordered
+      size="small"
+    />
   </BasicModal>
 </template>