perf: 优化数据大屏使用组件重构

 import { BasicPageParams } from '/@/api/model/baseModel';
+import { ViewType } from '/@/views/visual/board/config/panelDetail';
 
 export interface BigScreenCenterItemsModel {
   id: string;
+  thumbnail?: string;
   name: string;
   createTime: string;
   creator: string;
@@ -9,6 +11,8 @@ export interface BigScreenCenterItemsModel {
   state: number;
   publicId: string;
   organizationId?: string;
+  viewType?: ViewType;
+  organizationDTO: { name: string };
 }
 export type queryPageParams = BasicPageParams & {
   name?: Nullable<string>;

@@ -25,10 +25,12 @@
   import { useClipboard } from '@vueuse/core';
   import { useModal } from '/@/components/Modal';
   import { ShareModal } from '/@/views/common/ShareModal';
+  import { ViewTypeEnum, ViewTypeNameEnum } from '../../common/ShareModal/config';
 
   const [register, { reload }] = useCardList({
     api: getPage,
     useSearchForm: true,
+    title: '组态列表',
     formConfig: {
       schemas: searchFormSchema,
       labelWidth: 80,
@@ -134,7 +136,7 @@
       <template #renderItem="{ item }: CardListRenderItem<ConfigurationCenterItemsModal>">
         <Card
           :style="{
-            '--viewType': item.publicId ? '#faad14' : '#1890ff',
+            '--viewType': item.viewType === ViewTypeEnum.PUBLIC_VIEW ? '#faad14' : '#1890ff',
           }"
           hoverable
           class="card-container"
@@ -144,13 +146,13 @@
               class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative bg-light-50 rounded-tl-10xl"
             >
               <img
-                class="w-full max-h-32 object-contain !rounded-tl-10xl"
+                class="w-full max-h-32 h-32 object-contain !rounded-tl-10xl"
                 alt="example"
                 :src="item.thumbnail || configurationSrc"
                 @click="handlePreview(item)"
               />
               <span class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1">
-                {{ item.publicId ? '公开' : '私有' }}
+                {{ ViewTypeNameEnum[item.viewType] }}
               </span>
             </div>
           </template>

@@ -25,6 +25,7 @@
   const [register, { reload }] = useCardList({
     api: getPage,
     useSearchForm: true,
+    title: '模版列表',
     formConfig: {
       schemas: searchFormSchema,
       labelWidth: 80,
@@ -116,7 +117,7 @@
               class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative"
             >
               <img
-                class="w-full max-h-32"
+                class="w-full max-h-32 h-32"
                 alt="example"
                 :src="item.thumbnail || configurationSrc"
                 @click="handlePreview(item)"

 <script setup lang="ts">
-  import { List, Card, Button, PaginationProps, Tooltip } from 'ant-design-vue';
-  import { ReloadOutlined } from '@ant-design/icons-vue';
-  import { computed, onMounted, reactive, ref, unref } from 'vue';
-  import { OrganizationIdTree, useResetOrganizationTree } from '../common/organizationIdTree';
+  import { Card, Button, Tooltip } from 'ant-design-vue';
+  import { computed, unref } from 'vue';
+  import { OrganizationIdTree, useOrganizationTree } from '../common/organizationIdTree';
   import {
     bigScreenCancelPublish,
     bigScreenPublish,
@@ -12,17 +11,15 @@
   } from '/@/api/bigscreen/center/bigscreenCenter';
   import { BigScreenCenterItemsModel } from '/@/api/bigscreen/center/model/bigscreenCenterModel';
   import { PageWrapper } from '/@/components/Page';
-  import { BasicForm, useForm } from '/@/components/Form';
   import { ConfigurationPermission, searchFormSchema } from './config';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { Authority } from '/@/components/Authority';
   import ConfigurationCenterDrawer from './BigScreenDrawer.vue';
   import { useDrawer } from '/@/components/Drawer';
-  import { getBoundingClientRect } from '/@/utils/domUtils';
   import configurationSrc from '/@/assets/icons/configuration.svg';
   import { cloneDeep } from 'lodash';
   import { useGlobSetting } from '/@/hooks/setting';
-  import { AuthIcon, CardLayoutButton } from '/@/components/Widget';
+  import { AuthIcon } from '/@/components/Widget';
   import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
   import { PublicApiDrawer } from './publicApi/index';
   import { useModal } from '/@/components/Modal';
@@ -33,79 +30,36 @@
   import { RoleEnum } from '/@/enums/roleEnum';
   import { useRole } from '/@/hooks/business/useRole';
   import { useClipboard } from '@vueuse/core';
+  import { BasicCardList, useCardList } from '/@/components/CardList';
 
-  const listColumn = ref(5);
-
-  const { createMessage } = useMessage();
-
-  const organizationId = ref<Nullable<number>>(null);
-
-  const pagination = reactive<PaginationProps>({
-    size: 'small',
-    showTotal: (total: number) => `共 ${total} 条数据`,
-    current: 1,
-    pageSize: unref(listColumn) * 2,
-    onChange: (page: number) => {
-      pagination.current = page;
-      getListData();
+  const [registerOrgTree, { getSelectKey, clearSelected }] = useOrganizationTree({
+    onSelect: () => {
+      reload();
     },
   });
 
-  const loading = ref(false);
-  const { isCustomerUser } = useRole();
-
-  const dataSource = ref<BigScreenCenterItemsModel[]>([]);
-
-  const [registerForm, { getFieldsValue }] = useForm({
-    schemas: searchFormSchema,
-    showAdvancedButton: true,
-    labelWidth: 100,
-    compact: true,
-    resetFunc: () => {
-      resetFn();
-      organizationId.value = null;
-      return getListData();
+  const [registerCardList, { reload }] = useCardList({
+    api: getPage,
+    title: '数据大屏',
+    useSearchForm: true,
+    formConfig: {
+      labelWidth: 80,
+      schemas: searchFormSchema,
+      resetFunc: async () => clearSelected(),
     },
-    submitFunc: async () => {
-      const value = getFieldsValue();
-      getListData(value);
+    beforeFetch: async (params: Recordable) => {
+      return { ...params, organizationId: getSelectKey() };
     },
   });
 
-  async function getListData(value: Recordable = {}) {
-    try {
-      loading.value = true;
-      const pageSize = unref(listColumn) * 2;
-      const { items, total } = await getPage({
-        organizationId: unref(organizationId),
-        ...value,
-        page: pagination.current!,
-        pageSize,
-      });
-
-      dataSource.value = items;
-      Object.assign(pagination, { total, 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 [registerPublicDrawer, { openDrawer: openPublicApiDrawer }] = useDrawer();
 
+  const { createMessage } = useMessage();
+
+  const { isCustomerUser } = useRole();
+
   const handleCreateOrUpdate = (record?: BigScreenCenterItemsModel) => {
     if (record) {
       openDrawer(true, {
@@ -140,37 +94,10 @@
     try {
       await deleteBigScreenenter([record.id]);
       createMessage.success('删除成功');
-      await getListData();
+      reload();
     } catch (error) {}
   };
 
-  const handleCardLayoutChange = () => {
-    pagination.current = 1;
-    getListData();
-  };
-
-  const listEl = ref<Nullable<ComponentElRef>>(null);
-
-  onMounted(() => {
-    const clientHeight = document.documentElement.clientHeight;
-    const rect = getBoundingClientRect(unref(listEl)!.$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 + 56;
-    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');
-  });
-
-  const getPublicApiListData = () => {};
-
   const [registerShareModal, { openModal }] = useModal();
   const handleOpenShareModal = (record: BigScreenCenterItemsModel) => {
     openModal(true, { record, href: createShareUrl(record) });
@@ -182,6 +109,7 @@
   };
 
   const userStore = useUserStore();
+
   const hasPublicInterfacePermission = computed(() => {
     return userStore.getUserInfo.roles![0] !== RoleEnum.CUSTOMER_USER;
   });
@@ -197,166 +125,143 @@
   const handlePublish = async ({ id, state }) => {
     state === 0 ? await bigScreenPublish(id) : await bigScreenCancelPublish(id);
     createMessage.success(state === 0 ? '发布成功' : '取消发布成功');
-    getListData();
+    reload();
   };
 </script>
 
 <template>
   <PageWrapper dense contentFullHeight contentClass="flex">
-    <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
-    <section class="flex-auto p-4 w-3/4 xl:w-4/5 w-full 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">
-            <Authority v-if="!isCustomerUser" :value="ConfigurationPermission.CREATE">
-              <Button type="primary" @click="handleCreateOrUpdate()"> 新增大屏 </Button>
-            </Authority>
-            <Authority
-              v-if="hasPublicInterfacePermission"
-              :value="ConfigurationPermission.PUBLISH_INTERFACE"
-            >
-              <Button type="primary" @click="handleCreateOrUpdatePublicApi()">公共接口管理</Button>
-            </Authority>
-            <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
-            <Tooltip title="刷新">
-              <Button type="primary" @click="getListData">
-                <ReloadOutlined />
-              </Button>
-            </Tooltip>
-          </div>
-        </template>
-        <template #renderItem="{ item }">
-          <List.Item>
-            <Card
-              :style="{
-                '--viewType': item.viewType === ViewType.PUBLIC_VIEW ? '#1890ff' : '#faad14',
-              }"
-              class="card-container"
-            >
-              <template #cover>
-                <div class="h-full w-full relative hover-show-modal-content img-container">
-                  <img
-                    style="position: relative"
-                    class="w-full h-45 hover-show-modal"
-                    alt="example"
-                    :src="item.thumbnail || configurationSrc"
-                    @click="handlePreview(item)"
-                  />
-                  <span
-                    class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1"
+    <OrganizationIdTree @register="registerOrgTree" />
+    <BasicCardList
+      @register="registerCardList"
+      class="flex-auto p-4 w-3/4 xl:w-4/5 w-full configuration-list"
+    >
+      <template #toolbar>
+        <section class="flex gap-4">
+          <Authority v-if="!isCustomerUser" :value="ConfigurationPermission.CREATE">
+            <Button type="primary" @click="handleCreateOrUpdate()"> 新增大屏 </Button>
+          </Authority>
+          <Authority
+            v-if="hasPublicInterfacePermission"
+            :value="ConfigurationPermission.PUBLISH_INTERFACE"
+          >
+            <Button type="primary" @click="handleCreateOrUpdatePublicApi()">公共接口管理</Button>
+          </Authority>
+        </section>
+      </template>
+      <template #renderItem="{ item }: CardListRenderItem<BigScreenCenterItemsModel>">
+        <Card
+          :style="{
+            '--viewType': item.viewType === ViewType.PUBLIC_VIEW ? '#1890ff' : '#faad14',
+          }"
+          class="card-container"
+        >
+          <template #cover>
+            <div class="h-full w-full relative hover-show-modal-content img-container">
+              <img
+                style="position: relative"
+                class="w-full h-45 hover-show-modal"
+                alt="example"
+                :src="item.thumbnail || configurationSrc"
+                @click="handlePreview(item)"
+              />
+              <span class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1">
+                {{
+                  item.viewType ? ViewTypeNameEnum[item.viewType] : ViewTypeNameEnum.PRIVATE_VIEW
+                }}
+              </span>
+              <div class="masker-content">
+                <div class="masker-text">
+                  <div
+                    ><span>{{ item.name }}</span></div
                   >
-                    {{ ViewTypeNameEnum[item.viewType] || ViewTypeNameEnum.PRIVATE_VIEW }}
-                  </span>
-                  <div class="masker-content">
-                    <div class="masker-text">
-                      <div
-                        ><span>{{ item.name }}</span></div
-                      >
-                      <div>
-                        <span class="masker-text-org"
-                          >所属组织：{{ item?.organizationDTO?.name }}</span
-                        >
-                      </div>
-                      <div>
-                        <span class="masker-text-state"
-                          >发布状态：{{ item.state === 1 ? '已发布' : '未发布' }}</span
-                        >
-                      </div>
-                    </div>
+                  <div>
+                    <span class="masker-text-org">所属组织：{{ item?.organizationDTO?.name }}</span>
+                  </div>
+                  <div>
+                    <span class="masker-text-state"
+                      >发布状态：{{ item.state === 1 ? '已发布' : '未发布' }}</span
+                    >
                   </div>
                 </div>
-              </template>
-              <template class="ant-card-actions" #actions>
-                <Tooltip title="预览">
-                  <AuthIcon
-                    class="!text-lg"
-                    icon="ant-design:eye-outlined"
-                    @click="handlePreview(item)"
-                  />
-                </Tooltip>
-                <Tooltip v-if="!isCustomerUser" title="设计">
-                  <AuthIcon
-                    :auth="ConfigurationPermission.DESIGN"
-                    :disabled="item.state === 1"
-                    icon="ant-design:edit-outlined"
-                    @click="handleDesign(item)"
-                  />
-                </Tooltip>
-                <Tooltip title="点击复制分享链接">
-                  <AuthIcon
-                    :auth="ConfigurationPermission.SHARE"
-                    :disabled="!item.publicId"
-                    class="!text-lg"
-                    icon="ant-design:share-alt-outlined"
-                    @click="handleCreateShareUrl(item)"
-                  />
-                </Tooltip>
-                <AuthDropDown
-                  v-if="!isCustomerUser"
-                  :dropMenuList="[
-                    {
-                      text: '分享',
-                      auth: ConfigurationPermission.SHARE,
-                      icon: 'ant-design:share-alt-outlined',
-                      event: '',
-                      onClick: handleOpenShareModal.bind(null, item),
-                    },
-                    {
-                      text: item.state == 0 ? '发布' : '取消发布',
-                      auth: ConfigurationPermission.PUBLISH,
-                      icon:
-                        item.state == 0
-                          ? 'ant-design:node-expand-outlined'
-                          : 'ant-design:node-collapse-outlined',
-                      event: '',
-                      onClick: handlePublish.bind(null, item),
-                    },
-                    {
-                      text: '编辑',
-                      auth: ConfigurationPermission.UPDATE,
-                      icon: 'clarity:note-edit-line',
-                      event: '',
-                      onClick: handleCreateOrUpdate.bind(null, item),
-                      disabled: item.state === 0 ? false : true,
-                    },
-                    {
-                      text: '删除',
-                      auth: ConfigurationPermission.DELETE,
-                      icon: 'ant-design:delete-outlined',
-                      disabled: item.state === 0 ? false : true,
-                      event: '',
-                      popconfirm: {
-                        title: '是否确认删除操作?',
-                        onConfirm: handleDelete.bind(null, item),
-                      },
-                    },
-                  ]"
-                  :trigger="['hover']"
-                />
-              </template>
-            </Card>
-          </List.Item>
-        </template>
-      </List>
-    </section>
-    <ShareModal
-      @register="registerShareModal"
-      :shareApi="shareLargeScreen"
-      @success="getListData"
-    />
-    <ConfigurationCenterDrawer @register="registerDrawer" @success="getListData" />
-    <PublicApiDrawer @register="registerPublicDrawer" @success="getPublicApiListData" />
+              </div>
+            </div>
+          </template>
+          <template class="ant-card-actions" #actions>
+            <Tooltip title="预览">
+              <AuthIcon
+                class="!text-lg"
+                icon="ant-design:eye-outlined"
+                @click="handlePreview(item)"
+              />
+            </Tooltip>
+            <Tooltip v-if="!isCustomerUser" title="设计">
+              <AuthIcon
+                :auth="ConfigurationPermission.DESIGN"
+                :disabled="item.state === 1"
+                icon="ant-design:edit-outlined"
+                @click="handleDesign(item)"
+              />
+            </Tooltip>
+            <Tooltip title="点击复制分享链接">
+              <AuthIcon
+                :auth="ConfigurationPermission.SHARE"
+                :disabled="!item.publicId"
+                class="!text-lg"
+                icon="ant-design:share-alt-outlined"
+                @click="handleCreateShareUrl(item)"
+              />
+            </Tooltip>
+            <AuthDropDown
+              v-if="!isCustomerUser"
+              :dropMenuList="[
+                {
+                  text: '分享',
+                  auth: ConfigurationPermission.SHARE,
+                  icon: 'ant-design:share-alt-outlined',
+                  event: '',
+                  onClick: handleOpenShareModal.bind(null, item),
+                },
+                {
+                  text: item.state == 0 ? '发布' : '取消发布',
+                  auth: ConfigurationPermission.PUBLISH,
+                  icon:
+                    item.state == 0
+                      ? 'ant-design:node-expand-outlined'
+                      : 'ant-design:node-collapse-outlined',
+                  event: '',
+                  onClick: handlePublish.bind(null, item),
+                },
+                {
+                  text: '编辑',
+                  auth: ConfigurationPermission.UPDATE,
+                  icon: 'clarity:note-edit-line',
+                  event: '',
+                  onClick: handleCreateOrUpdate.bind(null, item),
+                  disabled: item.state === 0 ? false : true,
+                },
+                {
+                  text: '删除',
+                  auth: ConfigurationPermission.DELETE,
+                  icon: 'ant-design:delete-outlined',
+                  disabled: item.state === 0 ? false : true,
+                  event: '',
+                  popconfirm: {
+                    title: '是否确认删除操作?',
+                    onConfirm: handleDelete.bind(null, item),
+                  },
+                },
+              ]"
+              :trigger="['hover']"
+            />
+          </template>
+        </Card>
+      </template>
+    </BasicCardList>
+
+    <ShareModal @register="registerShareModal" :shareApi="shareLargeScreen" @success="reload()" />
+    <ConfigurationCenterDrawer @register="registerDrawer" @success="reload()" />
+    <PublicApiDrawer @register="registerPublicDrawer" />
   </PageWrapper>
 </template>
 

@@ -22,6 +22,7 @@
   import { useClipboard } from '@vueuse/core';
   import { DATA_BOARD_SHARE_URL } from '../palette';
   import { BasicCardList, useCardList } from '/@/components/CardList';
+  import Authority from '/@/components/Authority/src/Authority.vue';
 
   const router = useRouter();
 
@@ -139,7 +140,9 @@
   <section>
     <BasicCardList @register="registerCardList">
       <template #toolbar>
-        <Button type="primary" @click="handleOpenDetailModal">新增看板</Button>
+        <Authority :value="VisualBoardPermission.CREATE">
+          <Button type="primary" @click="handleOpenDetailModal">新增看板</Button>
+        </Authority>
       </template>
       <template #renderItem="{ item }: CardListRenderItem<DataBoardRecord>">
         <Card class="data-card cursor-pointer">