From d0f0c9428e504076b41cf7c66d1bf0f3fc0aaf7d Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Sat, 7 Oct 2023 18:08:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E6=9C=BA=E5=8D=A1=E7=89=87=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 orion-ops-ui/src/api/asset/host.ts            |  1 +
 orion-ops-ui/src/assets/style/layout.less     |  4 ++
 .../src/components/card/list/index.vue        | 71 +++++++++++++++----
 orion-ops-ui/src/types/card.ts                | 13 +++-
 orion-ops-ui/src/types/table.ts               | 26 -------
 orion-ops-ui/src/utils/index.ts               | 18 ++++-
 .../components/host-identity-table.vue        |  6 +-
 .../host-key/components/host-key-table.vue    |  6 +-
 .../asset/host/components/host-card-list.vue  | 64 ++++++++++++++---
 .../asset/host/components/host-table.vue      | 23 +-----
 orion-ops-ui/src/views/asset/host/index.vue   | 39 +++++++++-
 .../src/views/asset/host/types/card.fields.ts |  2 +
 .../src/views/asset/host/types/const.ts       | 10 +--
 .../views/user/role/components/role-table.vue |  6 +-
 .../views/user/user/components/user-table.vue |  6 +-
 15 files changed, 203 insertions(+), 92 deletions(-)

diff --git a/orion-ops-ui/src/api/asset/host.ts b/orion-ops-ui/src/api/asset/host.ts
index 72bc22b7..aaea3050 100644
--- a/orion-ops-ui/src/api/asset/host.ts
+++ b/orion-ops-ui/src/api/asset/host.ts
@@ -23,6 +23,7 @@ export interface HostUpdateRequest extends HostCreateRequest {
  * 主机查询请求
  */
 export interface HostQueryRequest extends Pagination {
+  searchValue?: string;
   id?: number;
   name?: string;
   code?: string;
diff --git a/orion-ops-ui/src/assets/style/layout.less b/orion-ops-ui/src/assets/style/layout.less
index 3d160e75..22963d1f 100644
--- a/orion-ops-ui/src/assets/style/layout.less
+++ b/orion-ops-ui/src/assets/style/layout.less
@@ -80,6 +80,10 @@
   cursor: pointer;
 }
 
+.card-filter-wrapper {
+  padding: 18px 24px 14px 24px;
+}
+
 .usn {
   user-select: none;
 }
diff --git a/orion-ops-ui/src/components/card/list/index.vue b/orion-ops-ui/src/components/card/list/index.vue
index aab4417a..f00d6278 100644
--- a/orion-ops-ui/src/components/card/list/index.vue
+++ b/orion-ops-ui/src/components/card/list/index.vue
@@ -26,7 +26,7 @@
             <a-space>
               <!-- 创建 -->
               <div v-permission="addPermission"
-                   v-if="!handleVisible.disableAdd"
+                   v-show="!handleVisible.disableAdd"
                    class="header-icon-wrapper"
                    title="创建"
                    @click="emits('add')">
@@ -53,12 +53,28 @@
                          @change="e => emits('update:searchValue', e)"
                          @keydown.enter="emits('search')" />
               </div>
-              <!-- 过滤 -->
-              <div v-if="!handleVisible.disableFilter"
-                   class="header-icon-wrapper"
-                   title="选择过滤条件">
-                <icon-filter />
-              </div>
+              <!-- 过滤条件 -->
+              <a-popover position="br" trigger="click" content-class="card-filter-wrapper">
+                <div v-if="!handleVisible.disableFilter"
+                     ref="filterRef"
+                     class="header-icon-wrapper"
+                     title="选择过滤条件">
+                  <a-badge :count="filterCount" :dot-style="{zoom: '.75'}" :offset="[9, -6]">
+                    <icon-filter />
+                  </a-badge>
+                </div>
+                <template #content>
+                  <!-- 过滤表单 -->
+                  <slot name="filterContent" />
+                  <!-- 操作按钮 -->
+                  <div class="filter-bottom-container">
+                    <a-space>
+                      <a-button size="mini" @click="filterReset">重置</a-button>
+                      <a-button size="mini" type="primary" @click="filterSearch">过滤</a-button>
+                    </a-space>
+                  </div>
+                </template>
+              </a-popover>
               <!-- 搜索 -->
               <div v-if="!handleVisible.disableSearch"
                    class="header-icon-wrapper"
@@ -119,9 +135,10 @@
             <template v-if="fieldConfig && fieldConfig.fields">
               <div :class="['fields-container', fieldConfig.bodyClass]">
                 <template v-for="(field, index) in fieldConfig.fields">
-                  <a-row align="center"
+                  <a-row :align="fieldConfig.rowAlign || field.rowAlign || 'center'"
                          :style="{
-                           'margin-bottom': fieldConfig.rowGap || '10px'
+                           'margin-bottom': index !== fieldConfig.fields.length - 1 ? (fieldConfig.rowGap || '10px') : false,
+                           'height': fieldConfig.height || field.height || 'unset'
                          }">
                     <!-- label -->
                     <a-col :span="fieldConfig.labelSpan || 8" :offset="fieldConfig.labelOffset || 0"
@@ -165,7 +182,7 @@
         </a-col>
         <!-- 添加卡片 -->
         <a-col v-permission="addPermission"
-               v-if="createCardPosition === 'tail'"
+               v-show="createCardPosition === 'tail'"
                v-bind="cardLayoutCols">
           <create-card :card-height="cardHeight"
                        :create-card-description="createCardDescription"
@@ -191,10 +208,12 @@
 </script>
 
 <script setup lang="ts">
-  import { compile, computed, h, PropType } from 'vue';
+  import { compile, computed, h, PropType, ref } from 'vue';
   import { useAppStore } from '@/store';
   import { PaginationProps, ResponsiveValue } from '@arco-design/web-vue';
-  import { Position, CardRecord, ColResponsiveValue, HandleVisible, CardFieldConfig } from '@/types/card';
+  import { CardRecord, ColResponsiveValue, HandleVisible, CardFieldConfig, CardPosition } from '@/types/card';
+  import fieldConfig from '@/views/asset/host/types/card.fields';
+  import { triggerMouseEvent } from '@/utils';
 
   const appStore = useAppStore();
   const headerWidth = computed(() => {
@@ -204,6 +223,8 @@
     return `calc(100% - ${menuWidth}px)`;
   });
 
+  const filterRef = ref();
+
   const searchValueRef = computed<string>({
     get() {
       return props.searchValue as string;
@@ -238,6 +259,10 @@
       default: () => []
     },
     cardHeight: Number,
+    filterCount: {
+      type: Number,
+      default: () => 0
+    },
     searchInputWidth: {
       type: String,
       default: () => '200px'
@@ -251,7 +276,7 @@
       default: () => '点击此处进行创建'
     },
     createCardPosition: {
-      type: String as PropType<Position>,
+      type: String as PropType<CardPosition>,
       default: () => '暂无数据 点击此处进行创建'
     },
     cardLayoutGutter: {
@@ -306,6 +331,18 @@
     }
   };
 
+  // 重置过滤
+  const filterReset = () => {
+    emits('reset');
+    triggerMouseEvent(filterRef);
+  };
+
+  // 搜索
+  const filterSearch = () => {
+    emits('search');
+    triggerMouseEvent(filterRef);
+  };
+
 </script>
 
 <style scoped lang="less">
@@ -371,7 +408,6 @@
         align-items: center;
       }
     }
-
   }
 
   .header-icon-wrapper {
@@ -392,6 +428,12 @@
     background: var(--color-fill-3);
   }
 
+  .filter-bottom-container {
+    padding-top: 14px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
   :deep(.create-card) {
 
     &-body {
@@ -439,6 +481,7 @@
       padding-right: 8px;
       font-size: 14px;
       font-weight: 500;
+      user-select: none;
     }
 
     .field-value {
diff --git a/orion-ops-ui/src/types/card.ts b/orion-ops-ui/src/types/card.ts
index 8f1ae66e..ac307fd3 100644
--- a/orion-ops-ui/src/types/card.ts
+++ b/orion-ops-ui/src/types/card.ts
@@ -2,14 +2,19 @@ import { PaginationProps, ResponsiveValue } from '@arco-design/web-vue';
 import { reactive } from 'vue';
 
 /**
- * 对齐方式
+ * 字段对齐方式
  */
 export type Align = 'left' | 'center' | 'right';
 
+/**
+ * 行对齐方式
+ */
+export type RowAlign = 'stretch' | 'center' | 'end' | 'start';
+
 /**
  * 创建卡片位置
  */
-export type Position = 'head' | 'tail' | false;
+export type CardPosition = 'head' | 'tail' | false;
 
 /**
  * 卡片字段配置
@@ -22,6 +27,8 @@ export interface CardFieldConfig {
   labelOffset?: number;
   labelAlign?: Align;
   valueAlign?: Align;
+  rowAlign?: RowAlign;
+  height?: string;
   labelClass?: string;
   valueClass?: string;
 
@@ -35,6 +42,8 @@ export interface CardField {
   label: string;
   dataIndex: string;
   slotName?: string;
+  rowAlign?: RowAlign;
+  height?: string;
   labelClass?: string;
   valueClass?: string;
   ellipsis?: boolean;
diff --git a/orion-ops-ui/src/types/table.ts b/orion-ops-ui/src/types/table.ts
index 9de49222..b2dc5a5e 100644
--- a/orion-ops-ui/src/types/table.ts
+++ b/orion-ops-ui/src/types/table.ts
@@ -1,32 +1,6 @@
 import { PaginationProps, TableRowSelection } from '@arco-design/web-vue';
 import { reactive } from 'vue';
 
-/**
- * FIXME DELETE
- * 默认分页
- */
-export const defaultPagination = (): PaginationProps => {
-  return {
-    current: 1,
-    pageSize: 10,
-    showTotal: true,
-    showPageSize: true,
-    pageSizeOptions: [10, 20, 30, 50, 100]
-  };
-};
-
-/**
- * FIXME DELETE
- * 默认行选择器
- */
-export const defaultRowSelection = (): TableRowSelection => {
-  return {
-    type: 'checkbox',
-    showCheckedAll: true,
-    onlyCurrent: true,
-  };
-};
-
 /**
  * 创建列表分页
  */
diff --git a/orion-ops-ui/src/utils/index.ts b/orion-ops-ui/src/utils/index.ts
index d949dc35..2ddfc913 100644
--- a/orion-ops-ui/src/utils/index.ts
+++ b/orion-ops-ui/src/utils/index.ts
@@ -159,12 +159,26 @@ export function replaceNumber(value: string) {
 /**
  * 重设对象
  */
-export const resetObject = (obj: any) => {
-  Object.keys(obj).forEach(k => {
+export const resetObject = (obj: any, ignore: string[] = []) => {
+  Object.keys(obj)
+  .filter(s => !ignore.includes(s))
+  .forEach(k => {
     obj[k] = undefined;
   });
 };
 
+/**
+ * 重设对象
+ */
+export const objectTruthKeyCount = (obj: any, ignore: string[] = []) => {
+  return Object.keys(obj)
+  .filter(s => !ignore.includes(s))
+  .reduce(function(acc, curr) {
+    const currVal = obj[curr];
+    return acc + ~~(currVal !== undefined && currVal !== null && currVal?.length !== 0 && currVal !== '');
+  }, 0);
+};
+
 /**
  * 获取当前页面的缩放值
  */
diff --git a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue
index 16b09af3..89e5c14e 100644
--- a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue
+++ b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue
@@ -123,10 +123,10 @@
 <script lang="ts" setup>
   import { reactive, ref } from 'vue';
   import { deleteHostIdentity, getHostIdentityPage, HostIdentityQueryRequest, HostIdentityQueryResponse } from '@/api/asset/host-identity';
-  import { Message, PaginationProps } from '@arco-design/web-vue';
+  import { Message } from '@arco-design/web-vue';
   import useLoading from '@/hooks/loading';
   import columns from '../types/table.columns';
-  import { defaultPagination } from '@/types/table';
+  import { usePagination } from '@/types/table';
   import { getHostKeyList } from '@/api/asset/host-key';
   import { useCacheStore } from '@/store';
   import HostKeySelector from '@/components/asset/host-key/host-key-selector.vue';
@@ -141,7 +141,7 @@
   const emits = defineEmits(['openAdd', 'openUpdate', 'openKeyView']);
 
   const cacheStore = useCacheStore();
-  const pagination = reactive(defaultPagination()) as PaginationProps;
+  const pagination = usePagination();
 
   const formModel = reactive<HostIdentityQueryRequest>({
     id: undefined,
diff --git a/orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue b/orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue
index 01246d3c..eb05ab3a 100644
--- a/orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue
+++ b/orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue
@@ -96,16 +96,16 @@
 <script lang="ts" setup>
   import { reactive, ref } from 'vue';
   import { deleteHostKey, getHostKeyPage, HostKeyQueryRequest, HostKeyQueryResponse } from '@/api/asset/host-key';
-  import { Message, PaginationProps } from '@arco-design/web-vue';
+  import { Message } from '@arco-design/web-vue';
   import useLoading from '@/hooks/loading';
   import columns from '../types/table.columns';
-  import { defaultPagination } from '@/types/table';
+  import { usePagination } from '@/types/table';
 
   const tableRenderData = ref<HostKeyQueryResponse[]>([]);
   const { loading, setLoading } = useLoading();
   const emits = defineEmits(['openAdd', 'openUpdate', 'openView']);
 
-  const pagination = reactive(defaultPagination()) as PaginationProps;
+  const pagination = usePagination();
 
   const formModel = reactive<HostKeyQueryRequest>({
     id: undefined,
diff --git a/orion-ops-ui/src/views/asset/host/components/host-card-list.vue b/orion-ops-ui/src/views/asset/host/components/host-card-list.vue
index 6f027a02..0e4c4a05 100644
--- a/orion-ops-ui/src/views/asset/host/components/host-card-list.vue
+++ b/orion-ops-ui/src/views/asset/host/components/host-card-list.vue
@@ -1,12 +1,13 @@
 <template>
-  <card-list v-model:searchValue="formModel.name"
+  <card-list v-model:searchValue="formModel.searchValue"
              create-card-position="head"
-             :card-height="180"
+             :card-height="172"
              :loading="loading"
              :fieldConfig="fieldConfig"
              :list="list"
              :pagination="pagination"
              :card-layout-cols="cardColLayout"
+             :filter-count="filterCount"
              :add-permission="['asset:host:create']"
              @add="emits('openAdd')"
              @reset="reset"
@@ -66,9 +67,44 @@
         </a-dropdown>
       </a-space>
     </template>
-    <!-- 左侧条件 -->
-    <template #leftHandle>
-      <span>1</span>
+    <!-- 过滤条件 -->
+    <template #filterContent>
+      <a-form :model="formModel"
+              class="modal-form"
+              size="small"
+              ref="formRef"
+              label-align="right"
+              :style="{ width: '300px' }"
+              :label-col-props="{ span: 6 }"
+              :wrapper-col-props="{ span: 18 }">
+        <!-- id -->
+        <a-form-item field="id" label="主机id">
+          <a-input-number v-model="formModel.id"
+                          placeholder="请输入主机id"
+                          allow-clear
+                          hide-button />
+        </a-form-item>
+        <!-- 主机名称 -->
+        <a-form-item field="name" label="主机名称">
+          <a-input v-model="formModel.name" placeholder="请输入主机名称" allow-clear />
+        </a-form-item>
+        <!-- 主机编码 -->
+        <a-form-item field="code" label="主机编码">
+          <a-input v-model="formModel.code" placeholder="请输入主机编码" allow-clear />
+        </a-form-item>
+        <!-- 主机地址 -->
+        <a-form-item field="address" label="主机地址">
+          <a-input v-model="formModel.address" placeholder="请输入主机地址" allow-clear />
+        </a-form-item>
+        <!-- 主机标签 -->
+        <a-form-item field="tags" label="主机标签">
+          <tag-multi-selector v-model="formModel.tags"
+                              :allowCreate="false"
+                              :limit="0"
+                              type="HOST"
+                              placeholder="请选择主机标签" />
+        </a-form-item>
+      </a-form>
     </template>
   </card-list>
 </template>
@@ -81,13 +117,14 @@
 
 <script setup lang="ts">
   import { usePagination, useColLayout } from '@/types/card';
-  import { reactive, ref } from 'vue';
+  import { computed, reactive, ref } from 'vue';
   import useLoading from '@/hooks/loading';
-  import { dataColor, resetObject } from '@/utils';
+  import { dataColor, objectTruthKeyCount, resetObject } from '@/utils';
   import fieldConfig from '../types/card.fields';
   import { deleteHost, getHostPage, HostQueryRequest, HostQueryResponse } from '@/api/asset/host';
   import { Message } from '@arco-design/web-vue';
   import { tagColor } from '@/views/asset/host/types/const';
+  import TagMultiSelector from '@/components/tag/tag-multi-selector.vue';
   import useCopy from '@/hooks/copy';
 
   const { copy } = useCopy();
@@ -98,10 +135,21 @@
   const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig']);
 
   const formModel = reactive<HostQueryRequest>({
+    searchValue: undefined,
+    id: undefined,
     name: undefined,
+    code: undefined,
+    address: undefined,
+    favorite: undefined,
+    tags: undefined,
     extra: true
   });
 
+  // 条件数量
+  const filterCount = computed(() => {
+    return objectTruthKeyCount(formModel, ['searchValue', 'extra']);
+  });
+
   // 删除当前行
   const deleteRow = async (id: number) => {
     try {
@@ -133,7 +181,7 @@
 
   // 重置条件
   const reset = () => {
-    resetObject(formModel);
+    resetObject(formModel, ['extra']);
     fetchTableData();
   };
 
diff --git a/orion-ops-ui/src/views/asset/host/components/host-table.vue b/orion-ops-ui/src/views/asset/host/components/host-table.vue
index 26f28f6d..02126c81 100644
--- a/orion-ops-ui/src/views/asset/host/components/host-table.vue
+++ b/orion-ops-ui/src/views/asset/host/components/host-table.vue
@@ -160,17 +160,15 @@
 <script lang="ts" setup>
   import { reactive, ref } from 'vue';
   import { deleteHost, getHostPage, HostQueryRequest, HostQueryResponse } from '@/api/asset/host';
-  import { Message, PaginationProps } from '@arco-design/web-vue';
+  import { Message } from '@arco-design/web-vue';
   import useLoading from '@/hooks/loading';
   import columns from '../types/table.columns';
   import { tagColor } from '../types/const';
-  import { defaultPagination } from '@/types/table';
+  import { usePagination } from '@/types/table';
   import useCopy from '@/hooks/copy';
   import useFavorite from '@/hooks/favorite';
   import { dataColor } from '@/utils';
   import TagMultiSelector from '@/components/tag/tag-multi-selector.vue';
-  import { getTagList } from '@/api/meta/tag';
-  import { useCacheStore } from '@/store';
 
   const tagSelector = ref();
   const tableRenderData = ref<HostQueryResponse[]>([]);
@@ -180,7 +178,7 @@
   const { copy } = useCopy();
   const { toggle: toggleFavorite } = useFavorite('HOST');
 
-  const pagination = reactive(defaultPagination()) as PaginationProps;
+  const pagination = usePagination();
 
   const formModel = reactive<HostQueryRequest>({
     id: undefined,
@@ -244,21 +242,6 @@
   };
   fetchTableData();
 
-  // 加载 tags
-  const loadTags = async () => {
-    try {
-      const { data } = await getTagList('HOST');
-      // 设置到缓存
-      const cacheStore = useCacheStore();
-      cacheStore.set('tags', data);
-      // 重新初始化
-      tagSelector.value.initOptionData();
-    } catch {
-      Message.error('tag加载失败');
-    }
-  };
-  loadTags();
-
 </script>
 
 <style lang="less" scoped>
diff --git a/orion-ops-ui/src/views/asset/host/index.vue b/orion-ops-ui/src/views/asset/host/index.vue
index b78e9a91..61f2b8ce 100644
--- a/orion-ops-ui/src/views/asset/host/index.vue
+++ b/orion-ops-ui/src/views/asset/host/index.vue
@@ -14,8 +14,8 @@
                     @openUpdateConfig="(e) => config.open(e)" />
     <!-- 添加修改模态框 -->
     <host-form-modal ref="modal"
-                     @added="() => table.addedCallback()"
-                     @updated="() => table.updatedCallback()" />
+                     @added="modalAddCallback"
+                     @updated="modalUpdateCallback" />
     <!-- 配置面板 -->
     <host-config-drawer ref="config" />
   </div>
@@ -34,19 +34,52 @@
   import HostCardList from '@/views/asset/host/components/host-card-list.vue';
   import HostFormModal from './components/host-form-modal.vue';
   import HostConfigDrawer from '@/views/asset/host/components/host-config-drawer.vue';
+  import { getTagList } from '@/api/meta/tag';
+  import { Message } from '@arco-design/web-vue';
 
   const table = ref();
   const card = ref();
   const modal = ref();
   const config = ref();
   const appStore = useAppStore();
+  const cacheStore = useCacheStore();
 
   // FIXME 临时
   const renderTable = computed(() => appStore.hostView === 'card');
 
+  // 添加回调
+  const modalAddCallback = () => {
+    if (renderTable.value) {
+      table.value.addedCallback();
+    } else {
+      card.value.addedCallback();
+    }
+  };
+
+  // 修改回调
+  const modalUpdateCallback = () => {
+    console.log(renderTable.value);
+    if (renderTable.value) {
+      table.value.updatedCallback();
+    } else {
+      card.value.updatedCallback();
+    }
+  };
+
+  // 加载 tags
+  const loadTags = async () => {
+    try {
+      const { data } = await getTagList('HOST');
+      // 设置到缓存
+      cacheStore.set('tags', data);
+    } catch {
+      Message.error('tag加载失败');
+    }
+  };
+  loadTags();
+
   // 卸载时清除 tags cache
   onUnmounted(() => {
-    const cacheStore = useCacheStore();
     cacheStore.set('tags', []);
     cacheStore.set('hostKeys', []);
     cacheStore.set('hostIdentities', []);
diff --git a/orion-ops-ui/src/views/asset/host/types/card.fields.ts b/orion-ops-ui/src/views/asset/host/types/card.fields.ts
index 229876cd..076c81c2 100644
--- a/orion-ops-ui/src/views/asset/host/types/card.fields.ts
+++ b/orion-ops-ui/src/views/asset/host/types/card.fields.ts
@@ -12,11 +12,13 @@ export const fieldConfig = {
       label: '主机地址',
       dataIndex: 'address',
       slotName: 'address',
+      height: '24px',
       tooltip: true,
     }, {
       label: '主机标签',
       dataIndex: 'tags',
       slotName: 'tags',
+      rowAlign: 'start'
     },
   ] as CardField[]
 } as CardFieldConfig;
diff --git a/orion-ops-ui/src/views/asset/host/types/const.ts b/orion-ops-ui/src/views/asset/host/types/const.ts
index 49d30028..00187d1f 100644
--- a/orion-ops-ui/src/views/asset/host/types/const.ts
+++ b/orion-ops-ui/src/views/asset/host/types/const.ts
@@ -2,9 +2,9 @@
  * tag 颜色
  */
 export const tagColor = [
-  '#52C41A',
-  '#13C2C2',
-  '#1890FF',
-  '#9254de',
-  '#F759AB'
+  'arcoblue',
+  'green',
+  'purple',
+  'pinkpurple',
+  'magenta'
 ];
diff --git a/orion-ops-ui/src/views/user/role/components/role-table.vue b/orion-ops-ui/src/views/user/role/components/role-table.vue
index b80ed5c6..403b8831 100644
--- a/orion-ops-ui/src/views/user/role/components/role-table.vue
+++ b/orion-ops-ui/src/views/user/role/components/role-table.vue
@@ -126,18 +126,18 @@
 <script lang="ts" setup>
   import { reactive, ref } from 'vue';
   import { deleteRole, getRolePage, updateRoleStatus, RoleQueryRequest, RoleQueryResponse } from '@/api/user/role';
-  import { Message, PaginationProps } from '@arco-design/web-vue';
+  import { Message } from '@arco-design/web-vue';
   import useLoading from '@/hooks/loading';
   import columns from '../types/table.columns';
   import { RoleStatusEnum } from '../types/enum.types';
   import { toOptions, getEnumValue, toggleEnumValue, toggleEnum } from '@/utils/enum';
-  import { defaultPagination } from '@/types/table';
+  import { usePagination } from '@/types/table';
 
   const tableRenderData = ref<RoleQueryResponse[]>([]);
   const { loading, setLoading } = useLoading();
   const emits = defineEmits(['openAdd', 'openUpdate', 'openGrant']);
 
-  const pagination = reactive(defaultPagination()) as PaginationProps;
+  const pagination = usePagination();
 
   const formModel = reactive<RoleQueryRequest>({
     id: undefined,
diff --git a/orion-ops-ui/src/views/user/user/components/user-table.vue b/orion-ops-ui/src/views/user/user/components/user-table.vue
index a741e9bd..b95efad5 100644
--- a/orion-ops-ui/src/views/user/user/components/user-table.vue
+++ b/orion-ops-ui/src/views/user/user/components/user-table.vue
@@ -148,11 +148,11 @@
 <script lang="ts" setup>
   import { reactive, ref } from 'vue';
   import { deleteUser, getUserPage, updateUserStatus, UserQueryRequest, UserQueryResponse } from '@/api/user/user';
-  import { Message, PaginationProps } from '@arco-design/web-vue';
+  import { Message } from '@arco-design/web-vue';
   import useLoading from '@/hooks/loading';
   import columns from '../types/table.columns';
   import { UserStatusEnum } from '../types/enum.types';
-  import { defaultPagination } from '@/types/table';
+  import { usePagination } from '@/types/table';
   import { toOptions, getEnumValue } from '@/utils/enum';
   import { useUserStore } from '@/store';
 
@@ -160,7 +160,7 @@
   const { loading, setLoading } = useLoading();
   const emits = defineEmits(['openAdd', 'openUpdate', 'openResetPassword', 'openGrantRole']);
 
-  const pagination = reactive(defaultPagination()) as PaginationProps;
+  const pagination = usePagination();
 
   const formModel = reactive<UserQueryRequest>({
     id: undefined,