refactor: 重构显示total的逻辑

apps/web-antd/src/views/monitor/online/index.vue

@@ -4,6 +4,8 @@ import type { VbenFormProps } from '@vben/common-ui';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 import type { OnlineUser } from '#/api/monitor/online/model';
 
+import { ref } from 'vue';
+
 import { Page } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
 
@@ -25,6 +27,7 @@ const formOptions: VbenFormProps = {
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
 };
 
+const onlineCount = ref(0);
 const gridOptions: VxeGridProps = {
   columns,
   height: 'auto',
@@ -34,10 +37,12 @@ const gridOptions: VxeGridProps = {
   },
   proxyConfig: {
     ajax: {
-      query: async (_, formValues) => {
-        return await onlineList({
+      query: async (_, formValues = {}) => {
+        const resp = await onlineList({
           ...formValues,
         });
+        onlineCount.value = resp.total;
+        return resp;
       },
     },
   },
@@ -58,10 +63,6 @@ async function handleForceOffline(row: OnlineUser) {
   await forceLogout(row.tokenId);
   await tableApi.query();
 }
-
-function onlineCount() {
-  return tableApi?.grid?.getData?.()?.length ?? 0;
-}
 </script>
 
 <template>
@@ -71,7 +72,7 @@ function onlineCount() {
         <div class="mr-1 pl-1 text-[1rem]">
           <div>
             在线用户列表 (共
-            <span class="text-primary font-bold">{{ onlineCount() }}</span>
+            <span class="text-primary font-bold">{{ onlineCount }}</span>
             人在线)
           </div>
         </div>