perf: DEFECT-809 refactor configuration center page

 import { defHttp } from '/@/utils/http/axios';
 import type {
   queryPageParams,
-  ConfigurationModal,
   ConfigurationCenterParams,
   ConfigurationCenterInfo,
+  ConfigurationCenterItemsModal,
 } from './model/configurationCenterModal';
 import { getPageData } from '../../base';
 enum API {
@@ -11,7 +11,7 @@ enum API {
 }
 
 export const getPage = (params: queryPageParams) => {
-  return getPageData<ConfigurationModal>(params, API.basicUrl);
+  return getPageData<ConfigurationCenterItemsModal>(params, API.basicUrl);
 };
 
 export const saveConfigurationCenter = (params: ConfigurationCenterParams) => {

 import { BasicPageParams } from '/@/api/model/baseModel';
-import { ContactParams } from '/@/api/alarm/contact/model/alarmContactModal';
 
-interface ConfigurationCenterItemsModal {
+export interface ConfigurationCenterItemsModal {
   id: string;
   name: string;
   createTime: string;
   creator: string;
   remark: string;
 }
-export type queryPageParams = BasicPageParams & { name: string; organizationId: string };
+export type queryPageParams = BasicPageParams & {
+  name?: Nullable<string>;
+  organizationId?: Nullable<number>;
+};
 
 export interface ConfigurationModal {
   items: ConfigurationCenterItemsModal[];

-<script setup lang="ts">
-  import {} from '/@/components/';
-</script>
-
-<template>
-  <CardList :params="params" :api="demoListApi" @get-method="getMethod" @delete="handleDel">
-    <template #header>
-      <Button type="primary" color="error"> 按钮1 </Button>
-      <Button type="primary" color="success"> 按钮2 </Button>
-    </template>
-  </CardList>
-</template>

+<template>
+  <div>
+    <PageWrapper dense contentFullHeight contentClass="flex">
+      <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
+      <BasicTable
+        style="flex: auto"
+        :clickToRowSelect="false"
+        @register="registerTable"
+        :searchInfo="searchInfo"
+        class="w-3/4 xl:w-4/5"
+      >
+        <template #platform="{ record }">
+          <Tag :color="record.platform === Platform.PHONE ? 'cyan' : 'blue'">
+            {{ record.platform === Platform.PHONE ? '移动端' : 'PC端' }}
+          </Tag>
+        </template>
+        <template #toolbar>
+          <Authority value="api:yt:configuration:center:post">
+            <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增组态 </a-button>
+          </Authority>
+          <Authority value="api:yt:configuration:center:delete">
+            <Popconfirm
+              title="您确定要批量删除数据"
+              ok-text="确定"
+              cancel-text="取消"
+              @confirm="handleDeleteOrBatchDelete(null)"
+            >
+              <a-button type="primary" color="error" :disabled="hasBatchDelete">
+                批量删除
+              </a-button>
+            </Popconfirm>
+          </Authority>
+        </template>
+        <template #action="{ record }">
+          <TableAction
+            :actions="[
+              {
+                label: '设计',
+                auth: 'api:yt:configuration:center:get_configuration_info:get',
+                icon: 'clarity:note-edit-line',
+                onClick: handleDesign.bind(null, record),
+              },
+              {
+                label: '预览',
+                auth: 'api:yt:configuration:center:get_configuration_info:get',
+                icon: 'ant-design:eye-outlined',
+                onClick: handlePreview.bind(null, record),
+              },
+              {
+                label: '编辑',
+                auth: 'api:yt:configuration:center:update',
+                icon: 'clarity:note-edit-line',
+                onClick: handleCreateOrEdit.bind(null, record),
+              },
+              {
+                label: '删除',
+                auth: 'api:yt:configuration:center:delete',
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  confirm: handleDeleteOrBatchDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </BasicTable>
+    </PageWrapper>
+    <ContactDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, nextTick } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { PageWrapper } from '/@/components/Page';
+  import { useDrawer } from '/@/components/Drawer';
+  import ContactDrawer from './ConfigurationCenterDrawer.vue';
+  import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
+  import { searchFormSchema, columns, Platform } from './center.data';
+  import {
+    getPage,
+    deleteConfigurationCenter,
+  } from '/@/api/configuration/center/configurationCenter';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { getAppEnvConfig, isDevMode } from '/@/utils/env';
+  import { Authority } from '/@/components/Authority';
+  import { Popconfirm } from 'ant-design-vue';
+  import { Tag } from 'ant-design-vue';
+  export default defineComponent({
+    components: {
+      PageWrapper,
+      OrganizationIdTree,
+      BasicTable,
+      TableAction,
+      ContactDrawer,
+      Authority,
+      Popconfirm,
+      Tag,
+    },
+    setup() {
+      const { VITE_GLOB_CONFIGURATION } = getAppEnvConfig();
+      const isDev = isDevMode();
+      const searchInfo = reactive<Recordable>({});
+      const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
+      // 表格hooks
+      const [registerTable, { reload, setProps }] = useTable({
+        title: '组态中心列表',
+        api: getPage,
+        columns,
+        clickToRowSelect: false,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+          resetFunc: resetFn,
+        },
+        showIndexColumn: false,
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        rowKey: 'id',
+        actionColumn: {
+          width: 200,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: 'right',
+        },
+      });
+      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+        deleteConfigurationCenter,
+        handleSuccess,
+        setProps
+      );
+      nextTick(() => {
+        setProps(selectionOptions);
+      });
+
+      // 弹框
+      const [registerDrawer, { openDrawer }] = useDrawer();
+
+      // 刷新
+      function handleSuccess() {
+        reload();
+      }
+      // 新增或编辑
+      const handleCreateOrEdit = (record: Recordable | null) => {
+        if (record) {
+          openDrawer(true, {
+            isUpdate: true,
+            record,
+          });
+        } else {
+          openDrawer(true, {
+            isUpdate: false,
+          });
+        }
+      };
+      // 树形选择器
+      const handleSelect = (organizationId: string) => {
+        searchInfo.organizationId = organizationId;
+        handleSuccess();
+      };
+
+      const handlePreview = (record: Recordable | null) => {
+        window.open(
+          `${VITE_GLOB_CONFIGURATION}/${isDev ? '?dev=1&' : '?'}configurationId=${
+            record!.id
+          }&lightbox=1`
+        );
+      };
+      const handleDesign = (record: Recordable | null) => {
+        window.open(
+          `${VITE_GLOB_CONFIGURATION}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`
+        );
+      };
+
+      return {
+        Platform,
+        searchInfo,
+        hasBatchDelete,
+        handleCreateOrEdit,
+        handleDeleteOrBatchDelete,
+        handleSelect,
+        handleSuccess,
+        handlePreview,
+        handleDesign,
+        registerTable,
+        registerDrawer,
+        organizationIdTreeRef,
+      };
+    },
+  });
+</script>

-<template>
-  <div>
-    <PageWrapper dense contentFullHeight contentClass="flex">
-      <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
-      <BasicTable
-        style="flex: auto"
-        :clickToRowSelect="false"
-        @register="registerTable"
-        :searchInfo="searchInfo"
-        class="w-3/4 xl:w-4/5"
-      >
-        <template #platform="{ record }">
-          <Tag :color="record.platform === Platform.PHONE ? 'cyan' : 'blue'">
-            {{ record.platform === Platform.PHONE ? '移动端' : 'PC端' }}
-          </Tag>
-        </template>
-        <template #toolbar>
-          <Authority value="api:yt:configuration:center:post">
-            <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增组态 </a-button>
-          </Authority>
-          <Authority value="api:yt:configuration:center:delete">
-            <Popconfirm
-              title="您确定要批量删除数据"
-              ok-text="确定"
-              cancel-text="取消"
-              @confirm="handleDeleteOrBatchDelete(null)"
-            >
-              <a-button type="primary" color="error" :disabled="hasBatchDelete">
-                批量删除
-              </a-button>
-            </Popconfirm>
-          </Authority>
-        </template>
-        <template #action="{ record }">
-          <TableAction
-            :actions="[
-              {
-                label: '设计',
-                auth: 'api:yt:configuration:center:get_configuration_info:get',
-                icon: 'clarity:note-edit-line',
-                onClick: handleDesign.bind(null, record),
-              },
-              {
-                label: '预览',
-                auth: 'api:yt:configuration:center:get_configuration_info:get',
-                icon: 'ant-design:eye-outlined',
-                onClick: handlePreview.bind(null, record),
-              },
-              {
-                label: '编辑',
-                auth: 'api:yt:configuration:center:update',
-                icon: 'clarity:note-edit-line',
-                onClick: handleCreateOrEdit.bind(null, record),
-              },
-              {
-                label: '删除',
-                auth: 'api:yt:configuration:center:delete',
-                icon: 'ant-design:delete-outlined',
-                color: 'error',
-                popConfirm: {
-                  title: '是否确认删除',
-                  confirm: handleDeleteOrBatchDelete.bind(null, record),
-                },
-              },
-            ]"
-          />
-        </template>
-      </BasicTable>
-    </PageWrapper>
-    <ContactDrawer @register="registerDrawer" @success="handleSuccess" />
-  </div>
-</template>
-
-<script lang="ts">
-  import { defineComponent, reactive, nextTick } from 'vue';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { PageWrapper } from '/@/components/Page';
-  import { useDrawer } from '/@/components/Drawer';
-  import ContactDrawer from './ConfigurationCenterDrawer.vue';
-  import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
-  import { searchFormSchema, columns, Platform } from './center.data';
+<script setup lang="ts">
+  import { List, Card, Button, PaginationProps, Popover, Slider, Tooltip } from 'ant-design-vue';
+  import {
+    ReloadOutlined,
+    AppstoreOutlined,
+    EyeOutlined,
+    EditOutlined,
+    EllipsisOutlined,
+  } from '@ant-design/icons-vue';
+  import { onMounted, reactive, ref, unref } from 'vue';
+  import { OrganizationIdTree, useResetOrganizationTree } from '../../common/organizationIdTree';
   import {
-    getPage,
     deleteConfigurationCenter,
+    getPage,
   } from '/@/api/configuration/center/configurationCenter';
-  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-  import { getAppEnvConfig, isDevMode } from '/@/utils/env';
+  import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
+  import { PageWrapper } from '/@/components/Page';
+  import { Dropdown } from '/@/components/Dropdown';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { searchFormSchema } from './center.data';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { Authority } from '/@/components/Authority';
-  import { Popconfirm } from 'ant-design-vue';
-  import { Tag } from 'ant-design-vue';
-  export default defineComponent({
-    components: {
-      PageWrapper,
-      OrganizationIdTree,
-      BasicTable,
-      TableAction,
-      ContactDrawer,
-      Authority,
-      Popconfirm,
-      Tag,
+  import { isDevMode } from '/@/utils/env';
+  import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';
+  import { useDrawer } from '/@/components/Drawer';
+  import { useSyncConfirm } from '/@/hooks/component/useSyncConfirm';
+  import { getBoundingClientRect } from '/@/utils/domUtils';
+
+  const listColumn = ref(4);
+
+  const { createMessage } = useMessage();
+
+  const organizationId = ref<Nullable<number>>(null);
+
+  const pagination = reactive<PaginationProps>({
+    size: 'small',
+    showTotal: (total: number) => `共 ${total} 条数据`,
+    current: 1,
+    onChange: (page: number) => {
+      pagination.current = page;
+      getListData();
+    },
+  });
+
+  const loading = ref(false);
+
+  const dataSource = ref<ConfigurationCenterItemsModal[]>([]);
+
+  const [registerForm, { getFieldsValue }] = useForm({
+    schemas: searchFormSchema,
+    showAdvancedButton: true,
+    labelWidth: 100,
+    compact: true,
+    resetFunc: () => {
+      resetFn();
+      organizationId.value = null;
+      return getListData();
     },
-    setup() {
-      const { VITE_GLOB_CONFIGURATION } = getAppEnvConfig();
-      const isDev = isDevMode();
-      const searchInfo = reactive<Recordable>({});
-      const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
-      // 表格hooks
-      const [registerTable, { reload, setProps }] = useTable({
-        title: '组态中心列表',
-        api: getPage,
-        columns,
-        clickToRowSelect: false,
-        formConfig: {
-          labelWidth: 120,
-          schemas: searchFormSchema,
-          resetFunc: resetFn,
-        },
-        showIndexColumn: false,
-        useSearchForm: true,
-        showTableSetting: true,
-        bordered: true,
-        rowKey: 'id',
-        actionColumn: {
-          width: 200,
-          title: '操作',
-          dataIndex: 'action',
-          slots: { customRender: 'action' },
-          fixed: 'right',
-        },
+    submitFunc: async () => {
+      const value = getFieldsValue();
+      getListData(value);
+    },
+  });
+
+  async function getListData(value: Recordable = {}) {
+    try {
+      loading.value = true;
+      const pageSize = 4 * unref(listColumn);
+      const { items, total } = await getPage({
+        organizationId: unref(organizationId),
+        ...value,
+        page: pagination.current!,
+        pageSize,
+      });
+      dataSource.value = items;
+      pagination.total = total;
+      pagination.pageSize = pageSize;
+    } catch (error) {
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  onMounted(() => {
+    getListData();
+  });
+
+  const searchInfo = reactive<Recordable>({});
+  const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
+  const handleSelect = (orgId: number) => {
+    organizationId.value = orgId;
+    getListData();
+  };
+
+  const [registerDrawer, { openDrawer }] = useDrawer();
+
+  const handleCreateOrUpdate = (record?: ConfigurationCenterItemsModal) => {
+    if (record) {
+      openDrawer(true, {
+        isUpdate: true,
+        record,
       });
-      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
-        deleteConfigurationCenter,
-        handleSuccess,
-        setProps
-      );
-      nextTick(() => {
-        setProps(selectionOptions);
+    } else {
+      openDrawer(true, {
+        isUpdate: false,
       });
+    }
+  };
 
-      // 弹框
-      const [registerDrawer, { openDrawer }] = useDrawer();
-
-      // 刷新
-      function handleSuccess() {
-        reload();
-      }
-      // 新增或编辑
-      const handleCreateOrEdit = (record: Recordable | null) => {
-        if (record) {
-          openDrawer(true, {
-            isUpdate: true,
-            record,
-          });
-        } else {
-          openDrawer(true, {
-            isUpdate: false,
-          });
-        }
-      };
-      // 树形选择器
-      const handleSelect = (organizationId: string) => {
-        searchInfo.organizationId = organizationId;
-        handleSuccess();
-      };
-
-      const handlePreview = (record: Recordable | null) => {
-        window.open(
-          `${VITE_GLOB_CONFIGURATION}/${isDev ? '?dev=1&' : '?'}configurationId=${
-            record!.id
-          }&lightbox=1`
-        );
-      };
-      const handleDesign = (record: Recordable | null) => {
-        window.open(
-          `${VITE_GLOB_CONFIGURATION}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`
-        );
-      };
-
-      return {
-        Platform,
-        searchInfo,
-        hasBatchDelete,
-        handleCreateOrEdit,
-        handleDeleteOrBatchDelete,
-        handleSelect,
-        handleSuccess,
-        handlePreview,
-        handleDesign,
-        registerTable,
-        registerDrawer,
-        organizationIdTreeRef,
-      };
-    },
+  const { VITE_GLOB_CONFIGURATION } = import.meta.env;
+  const isDev = isDevMode();
+
+  const handlePreview = (record: ConfigurationCenterItemsModal) => {
+    console.log(record);
+    window.open(
+      `${VITE_GLOB_CONFIGURATION}/${isDev ? '?dev=1&' : '?'}configurationId=${
+        record!.id
+      }&lightbox=1`
+    );
+  };
+
+  const handleDesign = (record: ConfigurationCenterItemsModal) => {
+    window.open(
+      `${VITE_GLOB_CONFIGURATION}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`
+    );
+  };
+
+  const { createSyncConfirm } = useSyncConfirm();
+  const handleDelete = async (record: ConfigurationCenterItemsModal) => {
+    try {
+      await createSyncConfirm({ iconType: 'warning', content: '是否确认删除操作?' });
+      await deleteConfigurationCenter([record.id]);
+      createMessage.success('删除成功');
+      await getListData();
+    } catch (error) {}
+  };
+
+  const listEl = ref<Nullable<ComponentElRef>>(null);
+
+  onMounted(() => {
+    const clientHeight = document.documentElement.clientHeight;
+    const rect = getBoundingClientRect(unref(listEl)!.$el!) as DOMRect;
+    const paginationHeight = 24 + 24;
+    const listContainerMarginBottom = 16 + 8 + 32 + 20;
+    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');
   });
 </script>
+
+<template>
+  <PageWrapper dense contentFullHeight contentClass="flex">
+    <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
+    <section class="flex-auto pl-9 p-4 configuration-list">
+      <div class="flex-auto w-full bg-light-50 dark:bg-dark-900 p-4">
+        <BasicForm @register="registerForm" />
+      </div>
+      <List
+        ref="listEl"
+        :loading="loading"
+        class="flex-auto bg-light-50 dark:bg-dark-900 !p-2 !mt-4"
+        position="bottom"
+        :pagination="pagination"
+        :data-source="dataSource"
+        :grid="{ gutter: 4, column: listColumn }"
+      >
+        <template #header>
+          <div class="flex gap-3 justify-end">
+            <Button type="primary" @click="handleCreateOrUpdate()">新增组态</Button>
+            <Popover :trigger="['hover']">
+              <template #content>
+                <div class="w-40">
+                  <Slider
+                    v-model:value="listColumn"
+                    :max="12"
+                    :min="4"
+                    :marks="{ 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9, 10: 10, 11: 11, 12: 12 }"
+                    @change="getListData"
+                  />
+                </div>
+              </template>
+              <Button type="primary">
+                <AppstoreOutlined />
+              </Button>
+            </Popover>
+            <Button type="primary" @click="getListData">
+              <ReloadOutlined @click="getListData" />
+            </Button>
+          </div>
+        </template>
+        <template #renderItem="{ item }">
+          <List.Item>
+            <Card hoverable>
+              <template #cover>
+                <img
+                  alt="example"
+                  src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
+                />
+              </template>
+              <template class="ant-card-actions" #actions>
+                <Authority value="api:yt:configuration:center:get_configuration_info:get">
+                  <Tooltip title="预览">
+                    <EyeOutlined key="setting" @click="handlePreview(item)" />
+                  </Tooltip>
+                </Authority>
+                <Authority value="api:yt:configuration:center:update">
+                  <Tooltip title="编辑">
+                    <EditOutlined key="edit" @click="handleCreateOrUpdate(item)" />
+                  </Tooltip>
+                </Authority>
+                <Dropdown
+                  :dropMenuList="[
+                    {
+                      text: '设计',
+                      auth: 'api:yt:configuration:center:get_configuration_info:get',
+                      icon: 'clarity:note-edit-line',
+                      onClick: handleDesign.bind(null, item),
+                    },
+                    {
+                      text: '删除',
+                      auth: 'api:yt:configuration:center:delete',
+                      icon: 'ant-design:delete-outlined',
+                      color: 'error',
+                      onClick: handleDelete.bind(null, item),
+                    },
+                  ]"
+                  :trigger="['hover']"
+                >
+                  <EllipsisOutlined key="ellipsis" />
+                </Dropdown>
+              </template>
+              <Card.Meta :title="item.name">
+                <template #description>
+                  <div class="truncate">{{ item.organizationDTO.name }}</div>
+                  <div class="truncate">{{ item.remark }} </div>
+                </template>
+              </Card.Meta>
+            </Card>
+          </List.Item>
+        </template>
+      </List>
+    </section>
+    <ConfigurationCenterDrawer @register="registerDrawer" @success="getListData" />
+  </PageWrapper>
+</template>
+
+<style lang="less" scoped>
+  .configuration-list:deep(.ant-list-header) {
+    border-bottom: none !important;
+  }
+
+  .configuration-list:deep(.ant-list-pagination) {
+    height: 24px;
+    background-color: #fff;
+  }
+</style>