refactor(login-info-modal): 使用 computed 重构描述列表项以提高可维护性

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>
+    <Descriptions
-      <DescriptionsItem label="登录状态">
+      v-if="loginInfo"
-        <component
+      :column="1"
-          :is="renderDict(loginInfo.status, DictEnum.SYS_COMMON_STATUS)"
+      :items="items"
-        />
+      bordered
-      </DescriptionsItem>
+      size="small"
-      <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>