From cb83bca12dc931c9d2342d23edf122605c1945f9 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Fri, 20 Jun 2025 14:19:22 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=B8=AA=E4=BA=BA=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=20=E5=9C=A8=E7=BA=BF=E8=AE=BE=E5=A4=87=20=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/monitor/online/model.d.ts         |   1 +
 .../profile/components/online-device.vue      | 102 +++++++++++-------
 2 files changed, 67 insertions(+), 36 deletions(-)

diff --git a/apps/web-antd/src/api/monitor/online/model.d.ts b/apps/web-antd/src/api/monitor/online/model.d.ts
index b93395fe..bf807acd 100644
--- a/apps/web-antd/src/api/monitor/online/model.d.ts
+++ b/apps/web-antd/src/api/monitor/online/model.d.ts
@@ -7,4 +7,5 @@ export interface OnlineUser {
   browser: string;
   os: string;
   loginTime: number;
+  deviceType: string;
 }
diff --git a/apps/web-antd/src/views/_core/profile/components/online-device.vue b/apps/web-antd/src/views/_core/profile/components/online-device.vue
index 926f2bab..b5ce947c 100644
--- a/apps/web-antd/src/views/_core/profile/components/online-device.vue
+++ b/apps/web-antd/src/views/_core/profile/components/online-device.vue
@@ -1,52 +1,82 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { OnlineUser } from '#/api/monitor/online/model';
 
-import { Popconfirm } from 'ant-design-vue';
+import { onMounted, shallowRef } from 'vue';
+
+import { getPopupContainer } from '@vben/utils';
+
+import {
+  Card,
+  Descriptions,
+  DescriptionsItem,
+  Popconfirm,
+  Spin,
+  Tag,
+} from 'ant-design-vue';
+import dayjs from 'dayjs';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { forceLogout2, onlineDeviceList } from '#/api/monitor/online';
-import { columns } from '#/views/monitor/online/data';
-
-const gridOptions: VxeGridProps = {
-  columns,
-  keepSource: true,
-  pagerConfig: {
-    enabled: false,
-  },
-  proxyConfig: {
-    ajax: {
-      query: async () => {
-        return await onlineDeviceList();
-      },
-    },
-  },
-  rowConfig: {
-    keyField: 'tokenId',
-  },
-};
-
-const [BasicTable, tableApi] = useVbenVxeGrid({ gridOptions });
+import { renderBrowserIcon, renderOsIcon } from '#/utils/render';
 
 async function handleForceOffline(row: Recordable<any>) {
   await forceLogout2(row.tokenId);
-  await tableApi.query();
+  await loadData();
 }
+
+const list = shallowRef<OnlineUser[]>([]);
+const loading = shallowRef(false);
+async function loadData() {
+  loading.value = true;
+  const resp = await onlineDeviceList();
+  list.value = resp.rows;
+  loading.value = false;
+}
+onMounted(loadData);
 </script>
 
 <template>
-  <div>
-    <BasicTable table-title="我的在线设备">
-      <template #action="{ row }">
-        <Popconfirm
-          :title="`确认强制下线[${row.userName}]?`"
-          placement="left"
-          @confirm="handleForceOffline(row)"
+  <div class="mb-6">
+    <Spin :spinning="loading">
+      <div
+        class="grid max-h-[calc(100vh/2)] min-h-[100px] grid-cols-1 gap-4 overflow-auto lg:grid-cols-2 2xl:grid-cols-3"
+      >
+        <Card
+          v-for="online in list"
+          :key="online.tokenId"
+          size="small"
+          :title="`登录时间: ${dayjs(online.loginTime).format('YYYY-MM-DD HH:mm:ss')}`"
         >
-          <a-button danger size="small" type="link">强制下线</a-button>
-        </Popconfirm>
-      </template>
-    </BasicTable>
+          <template #extra>
+            <Popconfirm
+              title="确认强制下线?"
+              placement="left"
+              :get-popup-container="getPopupContainer"
+              @confirm="handleForceOffline(online)"
+            >
+              <a-button danger size="small">强制下线</a-button>
+            </Popconfirm>
+          </template>
+          <Descriptions size="middle" :column="2">
+            <DescriptionsItem label="登录平台">
+              <Tag>{{ online.deviceType }}</Tag>
+            </DescriptionsItem>
+            <DescriptionsItem label="登录地址">
+              {{ online.loginLocation }}
+            </DescriptionsItem>
+            <DescriptionsItem label="浏览器">
+              <component :is="renderBrowserIcon(online.browser)" />
+            </DescriptionsItem>
+            <DescriptionsItem label="系统">
+              <component :is="renderOsIcon(online.os)" />
+            </DescriptionsItem>
+            <DescriptionsItem label="IP地址">
+              {{ online.ipaddr }}
+            </DescriptionsItem>
+          </Descriptions>
+        </Card>
+      </div>
+    </Spin>
   </div>
 </template>