refactor: 个人中心 在线设备 样式重构

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;
 }

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>