perf: 替换任务中心列表的组件

 <script setup lang="ts">
 <script setup lang="ts">
-  import { Button, List, Space, Tooltip } from 'ant-design-vue';
-  import { PageWrapper } from '/@/components/Page';
-  import { BasicForm, useForm } from '/@/components/Form';
+  import { Button } from 'ant-design-vue';
   import { PermissionEnum, formSchemas } from './config';
   import { PermissionEnum, formSchemas } from './config';
   import { TaskCard } from './components/TaskCard';
   import { TaskCard } from './components/TaskCard';
   import { getTaskCenterList } from '/@/api/task';
   import { getTaskCenterList } from '/@/api/task';
-  import { ref, unref } from 'vue';
-  import { onMounted } from 'vue';
   import { DetailModal } from './components/DetailModal';
   import { DetailModal } from './components/DetailModal';
   import { useModal } from '/@/components/Modal';
   import { useModal } from '/@/components/Modal';
   import { TaskRecordType } from '/@/api/task/model';
   import { TaskRecordType } from '/@/api/task/model';
-  import { reactive } from 'vue';
-  import { ReloadOutlined } from '@ant-design/icons-vue';
   import { DataActionModeEnum } from '/@/enums/toolEnum';
   import { DataActionModeEnum } from '/@/enums/toolEnum';
   import { Authority } from '/@/components/Authority';
   import { Authority } from '/@/components/Authority';
-  import { getBoundingClientRect } from '/@/utils/domUtils';
   import { RunTaskModal } from './components/RunTaskModal';
   import { RunTaskModal } from './components/RunTaskModal';
   import { DetailDrawer } from './components/DetailDrawer';
   import { DetailDrawer } from './components/DetailDrawer';
   import { useDrawer } from '/@/components/Drawer';
   import { useDrawer } from '/@/components/Drawer';
+  import { BasicCardList, useCardList } from '/@/components/CardList';
 
 
   const [registerModal, { openModal }] = useModal();
   const [registerModal, { openModal }] = useModal();
   const [registerDrawer, { openDrawer }] = useDrawer();
   const [registerDrawer, { openDrawer }] = useDrawer();
   const [registerRunTaskModal, { openModal: openRunTaskModal }] = useModal();
   const [registerRunTaskModal, { openModal: openRunTaskModal }] = useModal();
 
 
-  const [registerForm, { getFieldsValue }] = useForm({
-    schemas: formSchemas,
-    baseColProps: { span: 8 },
-    compact: true,
-    showAdvancedButton: true,
-    labelWidth: 100,
-    submitFunc: async () => {
-      getDataSource();
+  const [registerCardList, { reload }] = useCardList({
+    title: '任务列表',
+    api: getTaskCenterList,
+    baseLayout: { col: 4, row: 4 },
+    useSearchForm: true,
+    formConfig: {
+      schemas: formSchemas,
+      labelWidth: 100,
+      baseColProps: { span: 8 },
     },
     },
-    resetFunc: async () => {
-      getDataSource({});
+    beforeFetch: async (params: Recordable) => {
+      return { ...params };
     },
     },
   });
   });
 
 
-  const paginationChange = (page: number, pageSize: number) => {
-    pagination.current = page - 1 * pageSize > pagination.total ? 1 : page;
-    pagination.pageSize = pageSize;
-    getDataSource();
-  };
-
-  const pagination = reactive({
-    current: 1,
-    total: 0,
-    pageSize: 10,
-    size: 'small',
-    showSizeChanger: false,
-    showTotal: (total: number) => `共 ${total} 条数据`,
-    onChange: paginationChange,
-    onShowSizeChange: paginationChange,
-  });
-
-  const dataSource = ref<TaskRecordType[]>([]);
-  const loading = ref(false);
-  const getDataSource = async (params?: Recordable) => {
-    try {
-      loading.value = true;
-      params = params || getFieldsValue();
-      const { items, total } = await getTaskCenterList({
-        page: pagination.current,
-        pageSize: pagination.pageSize,
-        ...params,
-      });
-      dataSource.value = items;
-      pagination.total = total;
-    } catch (error) {
-      throw error;
-    } finally {
-      loading.value = false;
-    }
-  };
-
   const handleEdit = (record: TaskRecordType) => {
   const handleEdit = (record: TaskRecordType) => {
     openModal(true, {
     openModal(true, {
       record,
       record,
@@ -88,95 +46,35 @@
   const handleDetail = (record: TaskRecordType) => {
   const handleDetail = (record: TaskRecordType) => {
     openDrawer(true, { mode: DataActionModeEnum.READ, record } as ModalParamsType);
     openDrawer(true, { mode: DataActionModeEnum.READ, record } as ModalParamsType);
   };
   };
-
-  const reload = () => getDataSource();
-
-  const listElRef = ref<Nullable<ComponentElRef>>(null);
-
-  const setListHeight = () => {
-    const clientHeight = document.documentElement.clientHeight;
-    const rect = getBoundingClientRect(unref(listElRef)!.$el!) as DOMRect;
-    // margin-top 24 height 24
-    const paginationHeight = 24 + 24 + 8;
-    // list pading top 8 maring-top 8 extra slot 56
-    const listContainerMarginBottom = 8 + 8 + 72;
-    const listContainerHeight =
-      clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
-    const listContainerEl = (unref(listElRef)!.$el as HTMLElement).querySelector(
-      '.ant-spin-container'
-    ) as HTMLElement;
-    listContainerEl &&
-      (listContainerEl.style.height = listContainerHeight + 'px') &&
-      (listContainerEl.style.overflowY = 'auto') &&
-      (listContainerEl.style.overflowX = 'hidden');
-  };
-
-  onMounted(() => {
-    setListHeight();
-    getDataSource();
-  });
 </script>
 </script>
 
 
 <template>
 <template>
-  <PageWrapper class="task-center-container">
-    <section
-      class="bg-light-50 flex p-4 justify-between items-center dark:text-gray-300 dark:bg-dark-900"
-    >
-      <div class="text-2xl">任务中心</div>
-      <Authority :value="PermissionEnum.CREATE">
-        <Button
-          type="primary"
-          @click="openModal(true, { mode: DataActionModeEnum.CREATE } as ModalParamsType)"
-        >
-          创建任务
-        </Button>
-      </Authority>
-    </section>
-    <section
-      class="form-container bg-light-50 px-4 pt-4 mt-4 x dark:text-gray-300 dark:bg-dark-900"
-    >
-      <BasicForm @register="registerForm" />
-    </section>
-    <section class="bg-light-50 mt-4 p-4 dark:text-gray-300 dark:bg-dark-900">
-      <List
-        ref="listElRef"
-        :dataSource="dataSource"
-        :pagination="pagination"
-        :grid="{ gutter: 16, xs: 1, sm: 1, md: 2, lg: 3, xl: 3, xxl: 4, column: 4 }"
-        :loading="loading"
-      >
-        <template #header>
-          <section class="flex justify-between gap-4 min-h-12 items-center">
-            <div>
-              <span class="text-lg font-medium">任务列表</span>
-            </div>
-            <Space>
-              <!-- <CardLayoutButton v-model:value="colNumber" :max="4" :min="1" @change="reload" /> -->
-              <Tooltip v-if="dataSource.length" title="刷新">
-                <Button type="primary" @click="getDataSource">
-                  <ReloadOutlined :spin="loading" />
-                </Button>
-              </Tooltip>
-            </Space>
-          </section>
-        </template>
-        <template #renderItem="{ item }">
-          <List.Item :key="item.id">
-            <TaskCard
-              :record="item"
-              :reload="reload"
-              @runTask="handleRunTask"
-              @detail="handleDetail"
-              @edit="handleEdit"
-            />
-          </List.Item>
-        </template>
-      </List>
-    </section>
+  <section>
+    <BasicCardList class="flex-auto w-full" @register="registerCardList">
+      <template #toolbar>
+        <Authority :value="PermissionEnum.CREATE">
+          <Button
+            type="primary"
+            @click="openModal(true, { mode: DataActionModeEnum.CREATE } as ModalParamsType)"
+          >
+            创建任务
+          </Button>
+        </Authority>
+      </template>
+      <template #renderItem="{ item }">
+        <TaskCard
+          :record="item"
+          :reload="reload"
+          @runTask="handleRunTask"
+          @detail="handleDetail"
+          @edit="handleEdit"
+        />
+      </template>
+    </BasicCardList>
     <DetailDrawer @register="registerDrawer" />
     <DetailDrawer @register="registerDrawer" />
     <DetailModal @register="registerModal" :reload="reload" />
     <DetailModal @register="registerModal" :reload="reload" />
     <RunTaskModal :reload="reload" @register="registerRunTaskModal" />
     <RunTaskModal :reload="reload" @register="registerRunTaskModal" />
-  </PageWrapper>
+  </section>
 </template>
 </template>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>