perf: 优化数据看板分页界面

@@ -15,6 +15,8 @@ export interface UpdateDataBoardParams extends AddDataBoardParams {
 export interface GetDataBoardParams {
 export interface GetDataBoardParams {
   page?: number;
   page?: number;
   pageSize?: number;
   pageSize?: number;
+  name?: string;
+  organizationId?: string;
   orderFiled?: string;
   orderFiled?: string;
   orderType?: string;
   orderType?: string;
 }
 }
@@ -47,7 +49,9 @@ export interface DataBoardRecord {
   layout: Layout[];
   layout: Layout[];
   defaultConfig: string;
   defaultConfig: string;
   tenantStatus: string;
   tenantStatus: string;
+  componentNum?: number;
   publicId: string;
   publicId: string;
+  organizationId?: string;
   accessCredentials?: string;
   accessCredentials?: string;
 }
 }
 
 

@@ -96,7 +96,7 @@
         },
         },
       },
       },
       rowKey: unref(getRowKey),
       rowKey: unref(getRowKey),
-    };
+    } as ListProps;
   });
   });
 
 
   watch(cardListLayout, () => {
   watch(cardListLayout, () => {
@@ -122,7 +122,7 @@
 
 
 <template>
 <template>
   <main class="basic-card-list p-4 flex flex-col w-full h-full">
   <main class="basic-card-list p-4 flex flex-col w-full h-full">
-    <section class="w-full bg-light-50 dark:bg-dark-900 p-4 mb-4">
+    <section v-if="getProps.useSearchForm" class="w-full bg-light-50 dark:bg-dark-900 p-4 mb-4">
       <BasicForm
       <BasicForm
         @register="registerForm"
         @register="registerForm"
         v-bind="getFormProps"
         v-bind="getFormProps"
@@ -141,8 +141,10 @@
         <template #header>
         <template #header>
           <section class="flex justify-between items-center">
           <section class="flex justify-between items-center">
             <div>
             <div>
-              <span v-if="title"></span>
-              <slot v-else name="name"></slot>
+              <span v-if="getProps.title" class="font-bold text-base px-4">
+                {{ getProps.title }}
+              </span>
+              <slot v-else name="title"></slot>
             </div>
             </div>
             <div class="flex flex-auto justify-end mr-4">
             <div class="flex flex-auto justify-end mr-4">
               <slot name="toolbar"></slot>
               <slot name="toolbar"></slot>

@@ -126,7 +126,6 @@ export function useCardListData(
         ...(useSearchForm ? getFieldsValue() : {}),
         ...(useSearchForm ? getFieldsValue() : {}),
         ...searchInfo,
         ...searchInfo,
       };
       };
-
       if (beforeFetch && isFunction(beforeFetch)) {
       if (beforeFetch && isFunction(beforeFetch)) {
         params = (await beforeFetch(params)) || params;
         params = (await beforeFetch(params)) || params;
       }
       }

-import { Ref, computed, reactive, unref } from 'vue';
+import { Ref, computed, reactive, unref, watch } from 'vue';
 import { BasicCardListPropsType, ListGridType } from '../types';
 import { BasicCardListPropsType, ListGridType } from '../types';
 import { getListGridByColumn } from '../utils';
 import { getListGridByColumn } from '../utils';
 import { screenMap, sizeEnum } from '/@/enums/breakpointEnum';
 import { screenMap, sizeEnum } from '/@/enums/breakpointEnum';
@@ -16,6 +16,13 @@ export function useListGrid(getProps: Ref<BasicCardListPropsType>) {
     } as ListGridType;
     } as ListGridType;
   });
   });
 
 
+  watch(
+    () => unref(getProps).baseLayout,
+    () => {
+      Object.assign(cardListLayout, unref(getProps).baseLayout);
+    }
+  );
+
   function getScreenSize() {
   function getScreenSize() {
     const width = document.body.clientWidth;
     const width = document.body.clientWidth;
     const xs = screenMap.get(sizeEnum.XS)!;
     const xs = screenMap.get(sizeEnum.XS)!;

@@ -25,6 +25,7 @@ export interface BasicCardListPropsType<T = Recordable> {
   rowKey?: (item: T) => string | number;
   rowKey?: (item: T) => string | number;
   immediate?: boolean;
   immediate?: boolean;
   handleSearchInfoFn?: Fn;
   handleSearchInfoFn?: Fn;
+  baseLayout?: Record<'row' | 'col', number>;
 }
 }
 
 
 export type ListGridType = Record<'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', number> & {
 export type ListGridType = Record<'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', number> & {

@@ -11,6 +11,9 @@ export const formSchema: FormSchema[] = [
     component: 'Input',
     component: 'Input',
     // colProps: { span: 10 },
     // colProps: { span: 10 },
     colProps: useGridLayout(2, 3, 4) as unknown as ColEx,
     colProps: useGridLayout(2, 3, 4) as unknown as ColEx,
+    componentProps: {
+      placeholder: '请输入看板名称',
+    },
   },
   },
   {
   {
     field: 'organizationId',
     field: 'organizationId',

 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { List, Card, Statistic, Button, Tooltip, Spin } from 'ant-design-vue';
-  import { onMounted, ref, unref } from 'vue';
-  import { PageWrapper } from '/@/components/Page';
+  import { Card, Statistic, Button, Tooltip } from 'ant-design-vue';
+  import { unref, computed } from 'vue';
   import { MoreOutlined, ShareAltOutlined } from '@ant-design/icons-vue';
   import { MoreOutlined, ShareAltOutlined } from '@ant-design/icons-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
   import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
   import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
@@ -13,12 +12,8 @@
   import { DataBoardRecord } from '/@/api/dataBoard/model';
   import { DataBoardRecord } from '/@/api/dataBoard/model';
   import { ViewType } from './config/panelDetail';
   import { ViewType } from './config/panelDetail';
   import { useRouter } from 'vue-router';
   import { useRouter } from 'vue-router';
-  import { getBoundingClientRect } from '/@/utils/domUtils';
-  import Authority from '/@/components/Authority/src/Authority.vue';
-  import { computed } from '@vue/reactivity';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { encode } from './config/config';
   import { encode } from './config/config';
-  import { useForm, BasicForm } from '/@/components/Form';
   import { formSchema } from './config/searchForm';
   import { formSchema } from './config/searchForm';
   import { ShareModal } from '/@/views/common/ShareModal';
   import { ShareModal } from '/@/views/common/ShareModal';
   import { ModalParamsType } from '/#/utils';
   import { ModalParamsType } from '/#/utils';
@@ -26,62 +21,23 @@
   import { useRole } from '/@/hooks/business/useRole';
   import { useRole } from '/@/hooks/business/useRole';
   import { useClipboard } from '@vueuse/core';
   import { useClipboard } from '@vueuse/core';
   import { DATA_BOARD_SHARE_URL } from '../palette';
   import { DATA_BOARD_SHARE_URL } from '../palette';
+  import { BasicCardList, useCardList } from '/@/components/CardList';
 
 
-  const ListItem = List.Item;
   const router = useRouter();
   const router = useRouter();
 
 
   const { createMessage, createConfirm } = useMessage();
   const { createMessage, createConfirm } = useMessage();
 
 
-  const listEL = ref();
-  const loading = ref(false);
-  const dataBoardList = ref<DataBoardRecord[]>([]);
-
-  const [searchFormRegister, searchFormMethod] = useForm({
-    schemas: formSchema,
-    labelWidth: 80,
-    layout: 'inline',
-    submitButtonOptions: {
-      loading: loading as unknown as boolean,
-    },
-    submitFunc: async () => {
-      try {
-        const params = searchFormMethod.getFieldsValue();
-        await getDatasource(params);
-      } catch (error) {}
-    },
-    resetFunc: async () => {
-      try {
-        await getDatasource();
-      } catch (error) {}
+  const [registerCardList, { reload }] = useCardList({
+    title: '数据看板',
+    api: getDataBoardList,
+    baseLayout: { col: 3, row: 3 },
+    useSearchForm: true,
+    formConfig: {
+      schemas: formSchema,
+      labelWidth: 80,
     },
     },
   });
   });
 
 
-  // about pagination
-  const page = ref(1);
-  const pageSize = ref(10);
-  const total = ref(0);
-  const paginationProp = ref({
-    showSizeChanger: false,
-    showQuickJumper: true,
-    pageSize,
-    current: page,
-    size: 'small',
-    total,
-    showTotal: (total) => `总 ${total} 条`,
-    onChange: pageChange,
-    onShowSizeChange: pageSizeChange,
-  });
-
-  function pageChange(p, pz) {
-    page.value = p;
-    pageSize.value = pz;
-    getDatasource();
-  }
-  function pageSizeChange(_current, size) {
-    pageSize.value = size;
-    getDatasource();
-  }
-
   const createShareUrl = (record: DataBoardRecord) => {
   const createShareUrl = (record: DataBoardRecord) => {
     const { origin } = location;
     const { origin } = location;
     const { id, publicId } = record;
     const { id, publicId } = record;
@@ -124,22 +80,6 @@
     return basicMenu;
     return basicMenu;
   });
   });
 
 
-  const getDatasource = async (params: Recordable = {}) => {
-    try {
-      loading.value = true;
-      const { total, items } = await getDataBoardList({
-        page: unref(paginationProp).current,
-        pageSize: unref(paginationProp).pageSize,
-        ...params,
-      });
-      dataBoardList.value = items;
-      paginationProp.value.total = total;
-    } catch (error) {
-    } finally {
-      loading.value = false;
-    }
-  };
-
   const handleOpenShareModal = (record: DataBoardRecord) => {
   const handleOpenShareModal = (record: DataBoardRecord) => {
     openShareModal(true, {
     openShareModal(true, {
       record,
       record,
@@ -175,7 +115,7 @@
     try {
     try {
       await deleteDataBoard([record.id]);
       await deleteDataBoard([record.id]);
       createMessage.success('删除成功');
       createMessage.success('删除成功');
-      await getDatasource();
+      reload();
     } catch (error) {}
     } catch (error) {}
   };
   };
 
 
@@ -188,106 +128,67 @@
     if (hasDetailPermission) {
     if (hasDetailPermission) {
       const boardId = encode(record.id);
       const boardId = encode(record.id);
       const boardName = encode(record.name);
       const boardName = encode(record.name);
-      const organizationId = encode(record?.organizationId);
+      const organizationId = encode(record!.organizationId!);
 
 
       router.push(`/visual/board/detail/${boardId}/${boardName}/${organizationId}`);
       router.push(`/visual/board/detail/${boardId}/${boardName}/${organizationId}`);
     } else createMessage.warning('没有权限');
     } else createMessage.warning('没有权限');
   };
   };
-
-  const handlePagenationPosition = () => {
-    const clientHeight = document.documentElement.clientHeight;
-    const rect = getBoundingClientRect(unref(listEL).$el!) as DOMRect;
-    const paginationHeight = 32 + 24 + 16;
-    const listContainerMarginBottom = 16;
-    const listContainerHeight =
-      clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
-    const listContainerEl = (unref(listEL).$el as HTMLElement).querySelector(
-      '.ant-spin-container'
-    ) as HTMLElement;
-    listContainerEl &&
-      (listContainerEl.style.height = listContainerHeight + 'px') &&
-      (listContainerEl.style.overflowY = 'auto') &&
-      (listContainerEl.style.overflowX = 'hidden');
-  };
-
-  onMounted(() => {
-    getDatasource();
-    handlePagenationPosition();
-  });
 </script>
 </script>
 
 
 <template>
 <template>
-  <PageWrapper>
-    <div class="flex items-center mb-3 bg-light-100 h-78px dark:text-gray-300 dark:bg-dark-900">
-      <div class="text-lg ml-30px mr-9px font-bold">自定义看板</div>
-      <Authority value="api:yt:data_board:add:post">
-        <Button v-if="!isCustomerUser" type="primary" @click="handleOpenDetailModal"
-          >创建看板</Button
-        >
-      </Authority>
-    </div>
-    <div class="bg-light-100 mb-6 w-full p-3 search-form dark:text-gray-300 dark:bg-dark-900">
-      <BasicForm class="flex-auto w-full" @register="searchFormRegister" />
-    </div>
-    <Spin :spinning="loading">
-      <List
-        ref="listEL"
-        :pagination="paginationProp"
-        :data-source="dataBoardList"
-        :grid="{ gutter: 20, column: 4, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 3 }"
-        class="data-board-list"
-      >
-        <template #renderItem="{ item }">
-          <ListItem>
-            <Card class="data-card cursor-pointer">
-              <template #title>
-                <div class="font-bold">{{ item.name }}</div>
-              </template>
-              <template #extra>
-                <Dropdown
-                  v-if="!isCustomerUser && dropMenuList.length"
-                  :trigger="['click']"
-                  @menu-event="(event) => handleMenuEvent(event, item)"
-                  :drop-menu-list="dropMenuList"
-                >
-                  <MoreOutlined class="rotate-90 transform cursor-pointer" />
-                </Dropdown>
-              </template>
-              <section @click="handleViewBoard(item)">
-                <div class="flex data-card__info">
-                  <div>
-                    <div>组件数量</div>
-                    <Statistic style="font-size: 22px" :value="item.componentNum">
-                      <template #suffix>
-                        <span class="text-sm">个</span>
-                      </template>
-                    </Statistic>
-                  </div>
-                </div>
-                <div class="flex justify-between mt-4 text-sm" style="color: #999">
-                  <div class="flex min-w-20 mr-3">
-                    <span>
-                      {{ item.viewType === ViewType.PRIVATE_VIEW ? '私有看板' : '公共看板' }}
-                    </span>
-                    <span v-if="item.viewType === ViewType.PUBLIC_VIEW">
-                      <Tooltip title="点击复制分享链接">
-                        <ShareAltOutlined class="ml-1" @click.stop="handleCopyShareUrl(item)" />
-                      </Tooltip>
-                    </span>
-                  </div>
-                  <Tooltip placement="topLeft" :title="item.createTime">
-                    <div class="truncate">{{ item.createTime }}</div>
+  <section>
+    <BasicCardList @register="registerCardList">
+      <template #toolbar>
+        <Button type="primary" @click="handleOpenDetailModal">新增看板</Button>
+      </template>
+      <template #renderItem="{ item }: CardListRenderItem<DataBoardRecord>">
+        <Card class="data-card cursor-pointer">
+          <template #title>
+            <div class="font-bold">{{ item.name }}</div>
+          </template>
+          <template #extra>
+            <Dropdown
+              v-if="!isCustomerUser && dropMenuList.length"
+              :trigger="['click']"
+              @menu-event="(event) => handleMenuEvent(event, item)"
+              :drop-menu-list="dropMenuList"
+            >
+              <MoreOutlined class="rotate-90 transform cursor-pointer" />
+            </Dropdown>
+          </template>
+          <section @click="handleViewBoard(item)">
+            <div class="flex data-card__info">
+              <div>
+                <div>组件数量</div>
+                <Statistic class="text-2xl" :value="item.componentNum">
+                  <template #suffix>
+                    <span class="text-sm">个</span>
+                  </template>
+                </Statistic>
+              </div>
+            </div>
+            <div class="flex justify-between mt-4 text-sm" style="color: #999">
+              <div class="flex min-w-20 mr-3">
+                <span>
+                  {{ item.viewType === ViewType.PRIVATE_VIEW ? '私有看板' : '公共看板' }}
+                </span>
+                <span v-if="item.viewType === ViewType.PUBLIC_VIEW">
+                  <Tooltip title="点击复制分享链接">
+                    <ShareAltOutlined class="ml-1" @click.stop="handleCopyShareUrl(item)" />
                   </Tooltip>
                   </Tooltip>
-                </div>
-              </section>
-            </Card>
-          </ListItem>
-        </template>
-      </List>
-    </Spin>
-    <ShareModal @register="registerShareModal" :shareApi="shareBoard" @success="getDatasource" />
-    <PanelDetailModal @register="registerModal" @change="getDatasource" />
-  </PageWrapper>
+                </span>
+              </div>
+              <Tooltip placement="topLeft" :title="item.createTime">
+                <div class="truncate">{{ item.createTime }}</div>
+              </Tooltip>
+            </div>
+          </section>
+        </Card>
+      </template>
+    </BasicCardList>
+    <ShareModal @register="registerShareModal" :shareApi="shareBoard" @success="reload()" />
+    <PanelDetailModal @register="registerModal" @change="reload()" />
+  </section>
 </template>
 </template>
 
 
 <style scoped lang="less">
 <style scoped lang="less">