Merge branch 'feat/add-card-list-component' into 'main_dev'

feat: 新增卡片列表组件

See merge request yunteng/thingskit-front!1040

 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>;

@@ -2,15 +2,46 @@ import { BasicPageParams } from '/@/api/model/baseModel';
 
 export interface ConfigurationCenterItemsModal {
   id: string;
-  name: string;
-  createTime: string;
   creator: string;
-  remark: string;
-  publicId?: string;
-  organizationId?: string;
-  platform?: string;
-  productIds?: string;
+  createTime: string;
+  updater: string;
+  updateTime: string;
+  name: string;
+  enabled: boolean;
+  tenantId: string;
+  publicId: string;
+  viewType: string;
+  accessCredentials: string;
+  organizationId: string;
+  platform: string;
+  thumbnail: string;
+  organizationDTO: OrganizationDto;
+  templateId: string;
+  productAndDevice: ProductAndDevice[];
+  remark?: string;
+}
+
+export interface OrganizationDto {
+  name: string;
+  enabled: boolean;
+  sort: number;
+  children: any[];
 }
+
+export interface ProductAndDevice {
+  profileId: string;
+  name: string;
+  transportType: string;
+  deviceType: string;
+  deviceList: DeviceList[];
+}
+
+export interface DeviceList {
+  deviceId: string;
+  name: string;
+  codeType: any;
+}
+
 export type queryPageParams = BasicPageParams & {
   name?: Nullable<string>;
   organizationId?: Nullable<number>;

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

+export { default as BasicCardList } from './src/BasicCardList.vue';
+export { useCardList } from './src/hooks/useCardList';

+<script setup lang="ts">
+  import { BasicForm, FormActionType, useForm } from '/@/components/Form';
+  import { List, ListProps, Button, Tooltip } from 'ant-design-vue';
+  import { computed, Ref, ref, toRaw, unref, useSlots, watch } from 'vue';
+  import { useCardListScroll } from './hooks/useCardListScroll';
+  import { BasicCardListPropsType, CardListActionType } from './types';
+  import CardListLayout from './components/CardListLayout.vue';
+  import { usePagination } from './hooks/usePagination';
+  import { useLoading } from './hooks/useLoading';
+  import { useCardListData } from './hooks/useCardListData';
+  import { useListGrid } from './hooks/useListGrid';
+  import { FETCH_SETTING } from '../../Table/src/const';
+  import { useCardForm } from './hooks/useCardForm';
+  import { Icon } from '/@/components/Icon';
+
+  const emit = defineEmits<{
+    (eventName: 'fetchSuccess', result: { items: Recordable[]; total: number }): void;
+    (eventName: 'fetchError', error: Error): void;
+    (
+      eventName: 'register',
+      cardListActionType: CardListActionType,
+      formActions: FormActionType
+    ): void;
+  }>();
+
+  const slots = useSlots();
+
+  const props = withDefaults(defineProps<BasicCardListPropsType>(), {
+    showCardListHeader: true,
+    showCardListSetting: true,
+    useSearchForm: false,
+    gutter: 16,
+    immediate: true,
+    fetchSetting: () => FETCH_SETTING,
+    autoCreateKey: true,
+  });
+
+  const tableData = ref<Recordable[]>([]);
+
+  const listElRef = ref<Nullable<ComponentElRef>>(null);
+
+  const innerPropsRef = ref<BasicCardListPropsType>();
+
+  const [registerForm, formActions] = useForm();
+
+  const getProps = computed<BasicCardListPropsType>(() => {
+    return { ...props, ...(unref(innerPropsRef) || {}) } as BasicCardListPropsType;
+  });
+
+  const { getListGrid, cardListLayout } = useListGrid(getProps);
+
+  const { getPaginationInfo, getPagination, setPagination } = usePagination(
+    getProps,
+    cardListLayout
+  );
+
+  const { loading, setLoading, getLoading } = useLoading();
+
+  const { getDataSourceRef, getRowKey, fetch, reload } = useCardListData(getProps, formActions, {
+    setLoading,
+    getPaginationInfo,
+    emit,
+    tableData,
+    setPagination,
+  });
+
+  const { redoHeight, containerHeight } = useCardListScroll(
+    listElRef as Ref<Nullable<ComponentElRef>>,
+    getProps,
+    getDataSourceRef
+  );
+
+  const { replaceFormSlotKey, getFormProps, getFormSlotKeys } = useCardForm(
+    getProps,
+    slots,
+    fetch,
+    getLoading
+  );
+
+  function handleCardListChange() {
+    reload();
+  }
+
+  const getBindData = computed<ListProps>(() => {
+    const dataSource = unref(getDataSourceRef);
+
+    return {
+      dataSource,
+      grid: unref(getListGrid),
+      loading: unref(loading),
+      pagination: {
+        ...toRaw(unref(getPaginationInfo)),
+        onChange: (current: number, pageSize: number) => {
+          setPagination({ current, pageSize });
+          handleCardListChange();
+        },
+      },
+      rowKey: unref(getRowKey),
+    } as ListProps;
+  });
+
+  watch(cardListLayout, () => {
+    const pageSize = cardListLayout.row * cardListLayout.col;
+    setPagination({ pageSize });
+    handleCardListChange();
+  });
+
+  const CartListActionType: CardListActionType = {
+    setProps,
+    setLoading,
+    setPagination,
+    getPagination,
+    reload,
+  };
+
+  function setProps(props: Partial<BasicCardListPropsType> = {}) {
+    innerPropsRef.value = { ...(unref(innerPropsRef) || {}), ...props } as BasicCardListPropsType;
+  }
+
+  emit('register', CartListActionType, formActions);
+</script>
+
+<template>
+  <main class="basic-card-list p-4 flex flex-col w-full h-full">
+    <section v-if="getProps.useSearchForm" class="w-full bg-light-50 dark:bg-dark-900 p-4 mb-4">
+      <BasicForm
+        @register="registerForm"
+        v-bind="getFormProps"
+        @advanced-change="redoHeight"
+        @reset="reload()"
+        @submit="reload()"
+      >
+        <template #[replaceFormSlotKey(item)]="data" v-for="item in getFormSlotKeys">
+          <slot :name="item" v-bind="data"></slot>
+        </template>
+      </BasicForm>
+    </section>
+
+    <section class="w-full bg-light-50 dark:bg-dark-900 p-4 flex-auto h-full">
+      <List ref="listElRef" v-bind="getBindData">
+        <template #header>
+          <section class="flex justify-between items-center">
+            <div>
+              <span v-if="getProps.title" class="font-bold text-base px-4">
+                {{ getProps.title }}
+              </span>
+              <slot v-else name="title"></slot>
+            </div>
+            <div class="flex flex-auto justify-end mr-4">
+              <slot name="toolbar"></slot>
+            </div>
+            <div v-if="showCardListSetting" class="flex gap-4">
+              <CardListLayout v-model:row="cardListLayout.row" v-model:col="cardListLayout.col" />
+              <Tooltip title="刷新">
+                <Button type="primary" @click="reload()" :loading="loading">
+                  <Icon icon="ant-design:reload-outlined" :size="20" />
+                </Button>
+              </Tooltip>
+            </div>
+          </section>
+        </template>
+        <template #renderItem="{ item }">
+          <List.Item :style="{ '--totalHeight': containerHeight }">
+            <slot name="renderItem" :item="item" :totalHeight="containerHeight"></slot>
+          </List.Item>
+        </template>
+      </List>
+    </section>
+  </main>
+</template>
+
+<style lang="less" scoped>
+  .basic-card-list {
+    :deep(.ant-list) {
+      .ant-spin-container {
+        overflow-x: hidden;
+        overflow-y: auto;
+      }
+
+      .ant-list-header {
+        border-bottom: transparent;
+      }
+
+      .ant-list-pagination {
+        margin-top: 16px;
+        height: 25px;
+      }
+
+      .ant-list-empty-text {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+</style>

+<script setup lang="ts">
+  import { Button, Popover } from 'ant-design-vue';
+  import { reactive, ref, watch } from 'vue';
+  import { Icon } from '/@/components/Icon';
+
+  const emit = defineEmits(['update:row', 'update:col']);
+
+  const props = withDefaults(
+    defineProps<{
+      row?: number;
+      col?: number;
+    }>(),
+    {
+      row: 2,
+      col: 5,
+    }
+  );
+
+  const MAX_ROW = 4;
+  const MAX_COL = 9;
+
+  const visible = ref(false);
+
+  const selectedLayout = reactive({ row: props.row, col: props.col });
+
+  const handleOver = (row: number, col: number) => {
+    Object.assign(selectedLayout, { row, col });
+  };
+
+  const handleSelectConfirm = () => {
+    const { row, col } = selectedLayout;
+    emit('update:row', row);
+    emit('update:col', col);
+    visible.value = false;
+  };
+
+  watch(
+    () => [props.row, props.col],
+    () => {
+      selectedLayout.row = props.row;
+      selectedLayout.col = props.col;
+    }
+  );
+</script>
+
+<template>
+  <Popover v-model:visible="visible">
+    <template #content>
+      <section class="flex flex-wrap w-36">
+        <table class="border-collapse" @click="handleSelectConfirm">
+          <tr v-for="row in MAX_ROW" :key="row" class="border border-gray-300 border-solid">
+            <td
+              v-for="col in MAX_COL"
+              :class="selectedLayout.col >= col && selectedLayout.row >= row ? 'bg-blue-500' : ''"
+              :key="col"
+              class="w-4 h-4 border border-gray-300 border-solid cursor-pointer"
+              @mouseover="handleOver(row, col)"
+            >
+            </td>
+          </tr>
+        </table>
+        <div class="text-center w-full">
+          {{ selectedLayout.col }} x {{ selectedLayout.row }} 布局
+        </div>
+      </section>
+    </template>
+    <Button type="primary">
+      <Icon icon="ant-design:layout-filled" :size="20" />
+    </Button>
+  </Popover>
+</template>

+import type { ComputedRef, ExtractPropTypes, Slots } from 'vue';
+import { unref, computed } from 'vue';
+import { isFunction } from '/@/utils/is';
+import { BasicCardListPropsType } from '../types';
+import { FetchParams } from './useCardListData';
+import { basicProps } from '/@/components/Form/src/props';
+
+export function useCardForm(
+  propsRef: ComputedRef<BasicCardListPropsType>,
+  slots: Slots,
+  fetch: (opt?: FetchParams | undefined) => Promise<void>,
+  getLoading: ComputedRef<boolean | undefined>
+) {
+  const getFormProps = computed((): ExtractPropTypes<typeof basicProps> => {
+    const { formConfig } = unref(propsRef);
+    const { submitButtonOptions } = formConfig || {};
+    return {
+      showAdvancedButton: true,
+      ...formConfig,
+      submitButtonOptions: { loading: unref(getLoading), ...submitButtonOptions },
+      compact: true,
+    } as any;
+  });
+
+  const getFormSlotKeys: ComputedRef<string[]> = computed(() => {
+    const keys = Object.keys(slots);
+    return keys
+      .map((item) => (item.startsWith('form-') ? item : null))
+      .filter((item) => !!item) as string[];
+  });
+
+  function replaceFormSlotKey(key: string) {
+    if (!key) return '';
+    return key?.replace?.(/form\-/, '') ?? '';
+  }
+
+  function handleSearchInfoChange(info: Recordable) {
+    const { handleSearchInfoFn } = unref(propsRef);
+    if (handleSearchInfoFn && isFunction(handleSearchInfoFn)) {
+      info = handleSearchInfoFn(info) || info;
+    }
+    fetch({ searchInfo: info, page: 1 });
+  }
+
+  return {
+    getFormProps,
+    replaceFormSlotKey,
+    getFormSlotKeys,
+    handleSearchInfoChange,
+  };
+}

+import { WatchStopHandle, onUnmounted, ref, unref, watch } from 'vue';
+import { BasicCardListPropsType, CardListActionType } from '../types';
+import { isProdMode } from '/@/utils/env';
+import { error } from '/@/utils/log';
+import { FormActionType } from '/@/components/Form';
+import { getDynamicProps } from '/@/utils';
+import { PaginationProps } from 'ant-design-vue';
+import { FetchParams } from './useCardListData';
+
+type UseTableMethod = CardListActionType & {
+  getForm: () => FormActionType;
+};
+
+export function useCardList(
+  cardListProps?: BasicCardListPropsType
+): [(instance: CardListActionType, formInstance: FormActionType) => void, CardListActionType] {
+  const cardListRef = ref<Nullable<CardListActionType>>(null);
+  const loadedRef = ref<Nullable<boolean>>(false);
+  const formRef = ref<Nullable<FormActionType>>(null);
+
+  let stopWatch: WatchStopHandle;
+
+  function register(instance: CardListActionType, formInstance: FormActionType) {
+    isProdMode() &&
+      onUnmounted(() => {
+        cardListRef.value = null;
+        loadedRef.value = null;
+      });
+
+    if (unref(loadedRef) && isProdMode() && instance === unref(cardListRef)) return;
+
+    cardListRef.value = instance;
+    formRef.value = formInstance;
+    cardListProps && instance.setProps(getDynamicProps(cardListProps));
+    loadedRef.value = true;
+
+    stopWatch?.();
+
+    stopWatch = watch(
+      () => cardListProps,
+      () => {
+        cardListProps && instance.setProps(getDynamicProps(cardListProps));
+      },
+      {
+        immediate: true,
+        deep: true,
+      }
+    );
+  }
+
+  function getTableInstance(): CardListActionType {
+    const table = unref(cardListRef);
+    if (!table) {
+      error(
+        'The CardList instance has not been obtained yet, please make sure the table is presented when performing the table operation!'
+      );
+    }
+    return table as CardListActionType;
+  }
+
+  const cardListActionType: UseTableMethod = {
+    getForm: () => {
+      return unref(formRef) as unknown as FormActionType;
+    },
+    setLoading: (loading: boolean) => {
+      return getTableInstance().setLoading(loading);
+    },
+    setProps: (props: Partial<BasicCardListPropsType>) => {
+      getTableInstance().setProps(props);
+    },
+    getPagination: () => {
+      return getTableInstance().getPagination();
+    },
+    setPagination: (pagination: Partial<PaginationProps>) => {
+      return getTableInstance().setPagination(pagination);
+    },
+    reload: (opt?: FetchParams) => {
+      return getTableInstance().reload(opt);
+    },
+  };
+
+  return [register, cardListActionType];
+}

+import { Ref, computed, onMounted, ref, unref, watch, watchEffect } from 'vue';
+import { BasicCardListPropsType, CardListEmitType, UseLoading, UsePaginationType } from '../types';
+import { FormActionType } from '/@/components/Form';
+import { isBoolean, isFunction } from '/@/utils/is';
+import { FETCH_SETTING, ROW_KEY } from '/@/components/Table/src/const';
+import { PaginationProps } from 'ant-design-vue';
+import { cloneDeep, get } from 'lodash-es';
+import { buildUUID } from '/@/utils/uuid';
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+
+interface ActionType {
+  setLoading: UseLoading['setLoading'];
+  getPaginationInfo: UsePaginationType['getPaginationInfo'];
+  setPagination: UsePaginationType['setPagination'];
+  tableData: Ref<Recordable[]>;
+  emit: CardListEmitType;
+}
+
+export interface FetchParams {
+  searchInfo?: Recordable;
+  page?: number;
+  sortInfo?: Recordable;
+  filterInfo?: Recordable;
+}
+
+export function useCardListData(
+  propsRef: Ref<BasicCardListPropsType>,
+  formActionType: FormActionType,
+  actionType: ActionType
+) {
+  const { getFieldsValue } = unref(formActionType)! || {};
+  const { getPaginationInfo, setLoading, setPagination, tableData, emit } = actionType;
+
+  const dataSourceRef = ref<Recordable[]>([]);
+  const rawDataSourceRef = ref<Recordable>({});
+
+  watchEffect(() => {
+    tableData.value = unref(dataSourceRef);
+  });
+
+  watch(
+    () => unref(propsRef).dataSource,
+    () => {
+      const { dataSource, api } = unref(propsRef);
+      !api && dataSource && (dataSourceRef.value = dataSource);
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  function setTableKey(items: any[]) {
+    if (!items || !Array.isArray(items)) return;
+    items.forEach((item) => {
+      if (!item[ROW_KEY]) {
+        item[ROW_KEY] = buildUUID();
+      }
+      if (item.children && item.children.length) {
+        setTableKey(item.children);
+      }
+    });
+  }
+
+  const getAutoCreateKey = computed(() => {
+    return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
+  });
+
+  const getRowKey = computed(() => {
+    const { rowKey } = unref(propsRef);
+    return unref(getAutoCreateKey) ? ROW_KEY : rowKey;
+  });
+
+  const getDataSourceRef = computed(() => {
+    const dataSource = unref(dataSourceRef);
+    if (!dataSource || dataSource.length === 0) {
+      return unref(dataSourceRef);
+    }
+    if (unref(getAutoCreateKey)) {
+      const firstItem = dataSource[0];
+      const lastItem = dataSource[dataSource.length - 1];
+
+      if (firstItem && lastItem) {
+        if (!firstItem[ROW_KEY] || !lastItem[ROW_KEY]) {
+          const data = cloneDeep(unref(dataSourceRef));
+          data.forEach((item) => {
+            if (!item[ROW_KEY]) {
+              item[ROW_KEY] = buildUUID();
+            }
+            if (item.children && item.children.length) {
+              setTableKey(item.children);
+            }
+          });
+          dataSourceRef.value = data;
+        }
+      }
+    }
+    return unref(dataSourceRef);
+  });
+
+  async function fetch(opt?: FetchParams) {
+    const { api, searchInfo, fetchSetting, beforeFetch, afterFetch, useSearchForm, pagination } =
+      unref(propsRef);
+
+    if (!api || !isFunction(api)) return;
+
+    try {
+      setLoading(true);
+      const { pageField, sizeField, listField, totalField } = Object.assign(
+        {},
+        FETCH_SETTING,
+        fetchSetting
+      );
+      let pageParams: Recordable = {};
+
+      const { current = 1, pageSize = 10 } = unref(getPaginationInfo) as PaginationProps;
+
+      if ((isBoolean(pagination) && !pagination) || isBoolean(getPaginationInfo)) {
+        pageParams = {};
+      } else {
+        pageParams[pageField] = current;
+        pageParams[sizeField] = pageSize;
+      }
+
+      let params: Recordable = {
+        ...pageParams,
+        ...(useSearchForm ? getFieldsValue() : {}),
+        ...searchInfo,
+      };
+      if (beforeFetch && isFunction(beforeFetch)) {
+        params = (await beforeFetch(params)) || params;
+      }
+
+      const res = await api(params);
+      rawDataSourceRef.value = res;
+
+      const isArrayResult = Array.isArray(res);
+
+      let resultItems: Recordable[] = isArrayResult ? res : get(res, listField);
+      const resultTotal: number = isArrayResult ? 0 : get(res, totalField);
+
+      // 假如数据变少，导致总页数变少并小于当前选中页码，通过getPaginationRef获取到的页码是不正确的，需获取正确的页码再次执行
+      if (resultTotal) {
+        const currentTotalPage = Math.ceil(resultTotal / pageSize);
+        if (current > currentTotalPage) {
+          setPagination({
+            current: currentTotalPage,
+          });
+          fetch(opt);
+        }
+      }
+
+      if (afterFetch && isFunction(afterFetch)) {
+        resultItems = (await afterFetch(resultItems, res)) || resultItems;
+      }
+      dataSourceRef.value = resultItems;
+      setPagination({
+        total: resultTotal || 0,
+      });
+      if (opt && opt.page) {
+        setPagination({
+          current: opt.page || 1,
+        });
+      }
+      emit('fetchSuccess', {
+        items: unref(resultItems),
+        total: resultTotal,
+      });
+    } catch (error) {
+      emit('fetchError', error as Error);
+      dataSourceRef.value = [];
+      setPagination({
+        total: 0,
+      });
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function reload(opt?: FetchParams) {
+    await fetch(opt);
+  }
+
+  onMounted(() => {
+    useTimeoutFn(() => {
+      unref(propsRef).immediate && fetch();
+    }, 16);
+  });
+
+  return {
+    reload,
+    fetch,
+    getRowKey,
+    getDataSourceRef,
+  };
+}

+import { Ref, ref, unref, watch } from 'vue';
+import { getBoundingClientRect } from '/@/utils/domUtils';
+import { BasicCardListPropsType } from '../types';
+import { useDebounceFn } from '@vueuse/core';
+
+export function useCardListScroll(
+  cardListElRef: Ref<Nullable<ComponentElRef>>,
+  propsRef: Ref<BasicCardListPropsType>,
+  getDataSourceRef: Ref<Recordable[]>
+) {
+  const containerHeight = ref(0);
+
+  const redoHeight = () => {
+    const listEl = unref(cardListElRef)?.$el;
+    if (!listEl) return;
+
+    const listContainerEl = listEl.querySelector('.ant-spin-container') as HTMLDivElement;
+
+    if (!listContainerEl) return;
+
+    const rect = getBoundingClientRect(listContainerEl);
+
+    if (!rect) return;
+
+    const { top } = rect as DOMRect;
+
+    const { offsetHeight: otherOffsetHeight = 0 } = unref(propsRef);
+
+    const totalHeight = document.documentElement.clientHeight;
+
+    const offsetHeight = 32;
+
+    const paginationHeight = 25 + 16;
+
+    const residualHeight = totalHeight - top - offsetHeight - paginationHeight - otherOffsetHeight;
+
+    listContainerEl.style.maxHeight = `${residualHeight}px`;
+    listContainerEl.style.height = `${residualHeight}px`;
+
+    containerHeight.value = residualHeight;
+  };
+
+  const debounceRedoHeight = useDebounceFn(redoHeight, 100);
+
+  watch(
+    () => [unref(getDataSourceRef)?.length],
+    () => {
+      debounceRedoHeight();
+    },
+    {
+      flush: 'post',
+    }
+  );
+
+  return { redoHeight, containerHeight };
+}

+import { ComputedRef, computed, unref } from 'vue';
+
+export function useCardListSelected(
+  getDataSourceRef: ComputedRef<(Recordable & { checked?: boolean })[]>
+) {
+  const getHasSelectedRecordStatus = computed(() =>
+    unref(getDataSourceRef).find((item) => item.checked)
+  );
+
+  // function handlerSelect
+
+  return {
+    getHasSelectedRecordStatus,
+  };
+}

+import { Ref, computed, reactive, unref, watch } from 'vue';
+import { BasicCardListPropsType, ListGridType } from '../types';
+import { getListGridByColumn } from '../utils';
+import { screenMap, sizeEnum } from '/@/enums/breakpointEnum';
+
+export function useListGrid(getProps: Ref<BasicCardListPropsType>) {
+  const cardListLayout = reactive({ row: 2, col: 5 });
+
+  const getListGrid = computed<ListGridType>(() => {
+    const { col } = cardListLayout;
+    const { gutter = 16 } = unref(getProps);
+    return {
+      column: col,
+      gutter,
+      ...getListGridByColumn(col),
+    } as ListGridType;
+  });
+
+  watch(
+    () => unref(getProps).baseLayout,
+    () => {
+      Object.assign(cardListLayout, unref(getProps).baseLayout);
+    }
+  );
+
+  function getScreenSize() {
+    const width = document.body.clientWidth;
+    const xs = screenMap.get(sizeEnum.XS)!;
+    const sm = screenMap.get(sizeEnum.SM)!;
+    const md = screenMap.get(sizeEnum.MD)!;
+    const lg = screenMap.get(sizeEnum.LG)!;
+    const xl = screenMap.get(sizeEnum.XL)!;
+    if (width < xs) {
+      return sizeEnum.XS;
+    } else if (width < sm) {
+      return sizeEnum.SM;
+    } else if (width < md) {
+      return sizeEnum.MD;
+    } else if (width < lg) {
+      return sizeEnum.LG;
+    } else if (width < xl) {
+      return sizeEnum.XL;
+    } else {
+      return sizeEnum.XXL;
+    }
+  }
+
+  return {
+    getListGrid,
+    cardListLayout,
+    getScreenSize,
+  };
+}

+import { computed, ref, unref } from 'vue';
+
+export function useLoading() {
+  const loading = ref(false);
+
+  const setLoading = (status: boolean) => (loading.value = status);
+
+  const getLoading = computed(() => unref(loading));
+
+  return {
+    loading,
+    getLoading,
+    setLoading,
+  };
+}

+import { PaginationProps } from 'ant-design-vue';
+import { Ref, computed, ref, unref } from 'vue';
+import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
+import { BasicCardListPropsType } from '../types';
+import { isBoolean } from '/@/utils/is';
+
+interface ItemRender {
+  page: number;
+  type: 'page' | 'prev' | 'next';
+  originalElement: any;
+}
+
+function itemRender({ page, type, originalElement }: ItemRender) {
+  if (type === 'prev') {
+    return page === 0 ? null : <LeftOutlined />;
+  } else if (type === 'next') {
+    return page === 1 ? null : <RightOutlined />;
+  }
+  return originalElement;
+}
+
+export function usePagination(
+  propsRef: Ref<BasicCardListPropsType>,
+  cardLayoutRef: Record<'row' | 'col', number>
+) {
+  const configRef = ref<PaginationProps>({
+    hideOnSinglePage: false,
+  });
+
+  const getPaginationInfo = computed(() => {
+    const { pagination } = unref(propsRef);
+    const { col, row } = cardLayoutRef;
+
+    return {
+      current: 1,
+      pageSize: col * row,
+      size: 'small',
+      defaultPageSize: col * row,
+      showTotal: (total: number) => `共 ${total} 条数据`,
+      showSizeChanger: false,
+      itemRender: itemRender,
+      showQuickJumper: true,
+      ...(isBoolean(pagination) ? {} : pagination),
+      ...unref(configRef),
+    } as Partial<PaginationProps>;
+  });
+
+  const setPagination = (info: Partial<PaginationProps>) => {
+    const paginationInfo = unref(getPaginationInfo);
+    configRef.value = {
+      ...(!isBoolean(paginationInfo) ? paginationInfo : {}),
+      ...info,
+    };
+  };
+
+  function getPagination() {
+    return unref(getPaginationInfo);
+  }
+
+  return { getPaginationInfo, setPagination, getPagination };
+}

+import { PaginationProps } from 'ant-design-vue';
+import { FormProps } from '../../Form';
+import { FetchSetting } from '../../Table';
+import { useLoading } from './hooks/useLoading';
+import { usePagination } from './hooks/usePagination';
+import { FetchParams, useCardListData } from './hooks/useCardListData';
+
+// export interface CardList
+
+export interface BasicCardListPropsType<T = Recordable> {
+  title?: string;
+  formConfig?: FormProps;
+  showCardListSetting?: boolean;
+  useSearchForm?: boolean;
+  api?: (params?: any) => Promise<any>;
+  dataSource?: any[];
+  beforeFetch?: (params: FetchParams) => Promise<Recordable>;
+  pagination?: PaginationProps;
+  offsetHeight?: number;
+  gutter?: number;
+  searchInfo?: Recordable;
+  fetchSetting?: FetchSetting;
+  afterFetch?: (items: T[], result: any) => Promise<any[]>;
+  autoCreateKey?: boolean;
+  rowKey?: (item: T) => string | number;
+  immediate?: boolean;
+  handleSearchInfoFn?: Fn;
+  baseLayout?: Record<'row' | 'col', number>;
+  selections?: boolean;
+}
+
+export type ListGridType = Record<'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', number> & {
+  gutter: number | [number, number];
+};
+
+export type UseLoading = ReturnType<typeof useLoading>;
+
+export type UsePaginationType = ReturnType<typeof usePagination>;
+export type UseCardListDataType = ReturnType<typeof useCardListData>;
+
+export interface CardListActionType {
+  setProps: (props: Partial<BasicCardListPropsType>) => void;
+  setLoading: UseLoading['setLoading'];
+  setPagination: UsePaginationType['setPagination'];
+  getPagination: UsePaginationType['getPagination'];
+  reload: UseCardListDataType['reload'];
+}
+
+export interface CardListEmitType {
+  (eventName: 'fetchSuccess', result: { items: Recordable[]; total: number }): void;
+  (eventName: 'fetchError', error: Error): void;
+}
+
+export interface CardListRenderItem<T = Recordable & { checked?: boolean }> {
+  item: T;
+  totalHeight: number;
+}
+
+export interface CardListSelectionsType<T = Recordable> {
+  onSelect?: (record: T, selected: boolean) => any;
+  onSelectAll: (selectedRecords: T[]) => any;
+  onSelectInvert: (selectedRecords: T[]) => any;
+}

+import { ListGridType } from '../types';
+
+export const getListGridByColumn = (col: number): Omit<ListGridType, 'gutter' | 'column'> => {
+  return {
+    xxl: col,
+    xl: col,
+    lg: col,
+    md: col,
+    sm: col,
+    xs: col,
+  };
+  // return {
+  //   xxl: col,
+  //   xl: Math.max(1, col - 1),
+  //   lg: Math.max(1, col - 2),
+  //   md: Math.max(1, col - 3),
+  //   sm: Math.max(1, col - 4),
+  //   xs: Math.max(1, col - 5),
+  // };
+};

 export { default as ModeSwitchButton } from './ModeSwitchButton.vue';
 export { default as CardLayoutButton } from './CardLayoutButton.vue';
 export { default as AuthIcon } from './AuthIcon.vue';
+export { default as AuthDropDown } from './AuthDropDown.vue';
 export {
   EnumTableCardMode,
   EnumTableChartMode,

+import { WatchStopHandle, onUnmounted, ref, unref, watch } from 'vue';
+import { OrganizationTreeActionType } from '../src/types';
+import { isProdMode } from '/@/utils/env';
+import { error } from '/@/utils/log';
+import { OrganizationTreePropsType } from '../src/props';
+import { getDynamicProps } from '/@/utils';
+
+export function useOrganizationTree(
+  organizationTreeProps?: Partial<OrganizationTreePropsType>
+): [(instance: OrganizationTreeActionType) => void, OrganizationTreeActionType] {
+  const organizationTreeRef = ref<Nullable<OrganizationTreeActionType>>(null);
+  const loadedRef = ref<Nullable<boolean>>(false);
+  let stopWatch: WatchStopHandle;
+  function register(instance: OrganizationTreeActionType) {
+    isProdMode() &&
+      onUnmounted(() => {
+        organizationTreeRef.value = null;
+        loadedRef.value = null;
+      });
+
+    if (unref(loadedRef) && isProdMode() && instance === unref(organizationTreeRef)) return;
+
+    organizationTreeRef.value = instance;
+    loadedRef.value = true;
+
+    stopWatch?.();
+
+    stopWatch = watch(
+      () => organizationTreeProps,
+      () => {
+        organizationTreeProps && instance.setProps(getDynamicProps(organizationTreeProps));
+      },
+      {
+        immediate: true,
+        deep: true,
+      }
+    );
+  }
+
+  function getOrganizationTreeInstance(): OrganizationTreeActionType {
+    const organizationTree = unref(organizationTreeRef);
+    if (!organizationTree) {
+      error(
+        'The organization tree instance has not been obtained yet, please make sure the table is presented when performing the table operation!'
+      );
+    }
+    return organizationTree as OrganizationTreeActionType;
+  }
+
+  const organizationTreeActionType: OrganizationTreeActionType = {
+    getSelectKey: () => getOrganizationTreeInstance().getSelectKey(),
+    clearSelected: () => getOrganizationTreeInstance().clearSelected(),
+    setProps: (props: Partial<OrganizationTreePropsType>) =>
+      getOrganizationTreeInstance().setProps(props),
+  };
+
+  return [register, organizationTreeActionType];
+}

 import { useResetOrganizationTree } from './hooks/useOrganization';
 import OrganizationIdTree from './src/OrganizationIdTree.vue';
+export { useOrganizationTree } from './hooks/useOrganizationTree';
 
 export { OrganizationIdTree, useResetOrganizationTree };

@@ -17,41 +17,41 @@
       </div>
     </div>
     <div :style="{ width: foldFlag ? '0px' : '100%' }" class="bg-white mr-0 overflow-hidden h-full">
-      <BasicTree
-        title="组织列表"
-        toolbar
-        search
-        :clickRowToExpand="false"
-        :treeData="treeData"
-        :expandedKeys="treeExpandData"
-        :replaceFields="{ key: 'id', title: 'name' }"
-        :selectedKeys="selectedKeys"
-        @select="handleSelect"
-        v-bind="$attrs"
-      />
+      <BasicTree v-bind="getBindData" />
     </div>
   </div>
 </template>
 <script lang="ts" setup name="OrganizationIdTree">
-  import { onMounted, ref, unref } from 'vue';
+  import { computed, onMounted, ref, unref, useAttrs } from 'vue';
   import { BasicTree, TreeItem } from '/@/components/Tree';
   import { getOrganizationList } from '/@/api/system/system';
   import { CaretRightOutlined } from '@ant-design/icons-vue';
   import { getBoundingClientRect } from '/@/utils/domUtils';
+  import { BasicTreePropsType, OrganizationTreeActionType } from './types';
+  import { OrganizationTreePropsType } from './props';
+
+  const props = defineProps<OrganizationTreePropsType>();
+
+  const attrs = useAttrs();
 
   const tree = ref<Nullable<HTMLDivElement>>();
-  const emit = defineEmits(['select']);
+  const emit = defineEmits(['select', 'register']);
   const treeData = ref<TreeItem[]>([]);
   const selectedKeys = ref<string[]>();
-  const treeExpandData = ref([]);
+  const treeExpandData = ref<string[]>([]);
+
+  const innerProps = ref<OrganizationTreePropsType>({});
+
   //获取所有父级id
-  function findForAllId(data = [], arr = []) {
+  function findForAllId(data: Recordable[] = [], arr: string[] = []) {
     for (const item of data) {
       arr.push(item.id);
     }
     return arr;
   }
-  function handleSelect(keys) {
+
+  function handleSelect(keys: string[]) {
+    selectedKeys.value = keys;
     emit('select', keys[0]);
   }
   function resetOrganization() {
@@ -81,9 +81,41 @@
 
     setTreeHeight();
   });
+
   defineExpose({
     resetOrganization,
   });
+
+  const getProps = computed<OrganizationTreePropsType>(() => ({ ...props, ...unref(innerProps) }));
+
+  const getBindData = computed(() => {
+    return {
+      title: '组织列表',
+      toolbar: true,
+      search: true,
+      clickRowToExpand: false,
+      treeData: unref(treeData),
+      expandedKeys: unref(treeExpandData),
+      replaceFields: { key: 'id', title: 'name' },
+      selectedKeys: unref(selectedKeys),
+      ...attrs,
+      ...unref(getProps),
+      onSelect: (keys: string[]) => {
+        handleSelect(keys);
+        unref(getProps)?.onSelect?.(keys?.[0]);
+      },
+    } as BasicTreePropsType;
+  });
+
+  const setProps = (props: Partial<OrganizationTreePropsType>) => {
+    innerProps.value = { ...(props || {}) };
+  };
+
+  emit('register', {
+    clearSelected: resetOrganization,
+    getSelectKey: () => unref(selectedKeys)?.[0],
+    setProps,
+  } as OrganizationTreeActionType);
 </script>
 
 <style scoped lang="less">

+export interface OrganizationTreePropsType {
+  onSelect?: (selectKeys: string) => any;
+}

+import { ExtractPropTypes } from 'vue';
+import { basicProps } from '/@/components/Tree/src/props';
+import { OrganizationTreePropsType } from './props';
+
+export interface OrganizationTreeActionType {
+  clearSelected(): void;
+  getSelectKey(): undefined | string;
+  setProps(props: Partial<OrganizationTreePropsType>): any;
+}
+
+export type BasicTreePropsType = Partial<ExtractPropTypes<typeof basicProps>>;

-<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 { isDevMode } from '/@/utils/env';
-  import { Authority } from '/@/components/Authority';
-  import { Popconfirm } from 'ant-design-vue';
-  import { Tag } from 'ant-design-vue';
-  import { useGlobSetting } from '/@/hooks/setting';
-  export default defineComponent({
-    components: {
-      PageWrapper,
-      OrganizationIdTree,
-      BasicTable,
-      TableAction,
-      ContactDrawer,
-      Authority,
-      Popconfirm,
-      Tag,
-    },
-    setup() {
-      const { configurationPrefix } = useGlobSetting();
-      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(
-          `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${
-            record!.id
-          }&lightbox=1`
-        );
-      };
-      const handleDesign = (record: Recordable | null) => {
-        window.open(
-          `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`
-        );
-      };
-
-      return {
-        Platform,
-        searchInfo,
-        hasBatchDelete,
-        handleCreateOrEdit,
-        handleDeleteOrBatchDelete,
-        handleSelect,
-        handleSuccess,
-        handlePreview,
-        handleDesign,
-        registerTable,
-        registerDrawer,
-        organizationIdTreeRef,
-      };
-    },
-  });
-</script>

 <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 { BasicCardList, useCardList } from '/@/components/CardList';
   import {
     deleteConfigurationCenter,
     getPage,
     shareConfiguration,
   } from '/@/api/configuration/center/configurationCenter';
+  import { searchFormSchema, ConfigurationPermission } from './center.data';
   import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
-  import { PageWrapper } from '/@/components/Page';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { ConfigurationPermission, Platform, searchFormSchema } from './center.data';
-  import { useMessage } from '/@/hooks/web/useMessage';
   import { Authority } from '/@/components/Authority';
-  import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';
-  import { useDrawer } from '/@/components/Drawer';
-  import { getBoundingClientRect } from '/@/utils/domUtils';
+  import { Button, Card, Tooltip } from 'ant-design-vue';
+  import { useRole } from '/@/hooks/business/useRole';
   import configurationSrc from '/@/assets/icons/configuration.svg';
-  import { cloneDeep } from 'lodash';
+  import { Platform } from '../center/center.data';
+  import { computed, unref } from 'vue';
+  import { createScadaPageLink, ScadaModeEnum } from '../center/help';
+  import { useDrawer } from '/@/components/Drawer';
   import { usePermission } from '/@/hooks/web/usePermission';
-  import { AuthIcon, CardLayoutButton } from '/@/components/Widget';
-  import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
-  import { ShareModal } from '/@/views/common/ShareModal';
-  import { ViewTypeNameEnum } from '../../common/ShareModal/config';
-  import { useModal } from '/@/components/Modal';
-  import { ViewType } from '../../visual/board/config/panelDetail';
-  import { useRole } from '/@/hooks/business/useRole';
-  import { useClipboard } from '@vueuse/core';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { Icon } from '/@/components/Icon';
-  import { createScadaPageLink, ScadaModeEnum } from './help';
-
-  const listColumn = ref(5);
-
-  const { createMessage } = useMessage();
-
-  const { isCustomerUser } = useRole();
-
-  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();
+  import { AuthIcon, AuthDropDown } from '/@/components/Widget';
+  import { cloneDeep } from 'lodash-es';
+  import { OrganizationIdTree, useOrganizationTree } from '../../common/organizationIdTree';
+  import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';
+  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: '组态列表',
+    gutter: 4,
+    formConfig: {
+      schemas: searchFormSchema,
+      labelWidth: 80,
+      resetFunc: async () => {
+        clearSelected();
+      },
+    },
+    beforeFetch: async (params: Recordable) => {
+      return { ...params, organizationId: getSelectKey(), isTemplate: 0 };
     },
   });
 
-  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();
-    },
-    submitFunc: async () => {
-      const value = getFieldsValue();
-      getListData(value);
+  const [registerOrgTree, { getSelectKey, clearSelected }] = useOrganizationTree({
+    onSelect: () => {
+      reload();
     },
   });
 
-  async function getListData(value: Recordable = {}) {
-    try {
-      loading.value = true;
-      const pageSize = unref(listColumn) * 2;
-      const { items, total } = await getPage({
-        organizationId: unref(organizationId),
-        ...value,
-        isTemplate: 0,
-        page: pagination.current!,
-        pageSize,
-      });
-
-      dataSource.value = items;
-      Object.assign(pagination, { total, pageSize });
-    } catch (error) {
-    } finally {
-      loading.value = false;
-    }
-  }
+  const [registerDrawer, { openDrawer }] = useDrawer();
 
-  onMounted(() => {
-    getListData();
-  });
+  const [registerShareModal, { openModal }] = useModal();
 
-  const searchInfo = reactive<Recordable>({});
-  const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
-  const handleSelect = (orgId: number) => {
-    organizationId.value = orgId;
-    getListData();
+  const handleOpenShareModal = (record: ConfigurationCenterItemsModal) => {
+    openModal(true, { record, href: createShareUrl(record) });
   };
 
-  const [registerDrawer, { openDrawer }] = useDrawer();
+  const { createMessage } = useMessage();
+
+  const { isCustomerUser } = useRole();
 
   const { hasPermission } = usePermission();
 
@@ -141,19 +100,6 @@
     createScadaPageLink(record, ScadaModeEnum.DESIGN);
   };
 
-  const handleDelete = async (record: ConfigurationCenterItemsModal) => {
-    try {
-      await deleteConfigurationCenter([record.id]);
-      createMessage.success('删除成功');
-      await getListData();
-    } catch (error) {}
-  };
-
-  const handleCardLayoutChange = () => {
-    pagination.current = 1;
-    getListData();
-  };
-
   const createShareUrl = (record: ConfigurationCenterItemsModal) => {
     return createScadaPageLink(record, ScadaModeEnum.SHARE, false);
   };
@@ -168,209 +114,138 @@
     }
   };
 
-  const [registerShareModal, { openModal }] = useModal();
-
-  const handleOpenShareModal = (record: ConfigurationCenterItemsModal) => {
-    openModal(true, { record, href: createShareUrl(record) });
+  const handleDelete = async (record: ConfigurationCenterItemsModal) => {
+    try {
+      await deleteConfigurationCenter([record.id]);
+      createMessage.success('删除成功');
+      await reload();
+    } catch (error) {}
   };
-
-  const listEl = ref<Nullable<ComponentElRef>>(null);
-
-  onMounted(() => {
-    const clientHeight = document.documentElement.clientHeight;
-    const rect = getBoundingClientRect(unref(listEl)!.$el! as HTMLElement) 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');
-  });
 </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>
-            <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',
-              }"
-              hoverable
-              class="card-container"
+  <section class="flex w-full h-full">
+    <OrganizationIdTree @register="registerOrgTree" />
+    <BasicCardList class="flex-auto p-4 w-3/4 xl:w-4/5 w-full" @register="register">
+      <template #toolbar>
+        <div class="flex gap-3 justify-end">
+          <Authority v-if="!isCustomerUser" :value="ConfigurationPermission.CREATE">
+            <Button type="primary" @click="handleCreateOrUpdate()">新增组态</Button>
+          </Authority>
+        </div>
+      </template>
+      <template #renderItem="{ item }: CardListRenderItem<ConfigurationCenterItemsModal>">
+        <Card
+          :style="{
+            '--viewType': item.viewType === ViewTypeEnum.PUBLIC_VIEW ? '#faad14' : '#1890ff',
+          }"
+          hoverable
+          class="card-container"
+        >
+          <template #cover>
+            <div
+              class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative bg-light-50 rounded-tl-10xl"
             >
-              <template #cover>
-                <div
-                  class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative"
-                >
-                  <img
-                    class="w-full h-36"
-                    alt="example"
-                    :src="item.thumbnail || configurationSrc"
-                    @click="handlePreview(item)"
+              <img
+                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">
+                {{ ViewTypeNameEnum[item.viewType] }}
+              </span>
+            </div>
+          </template>
+          <template class="ant-card-actions" #actions>
+            <Tooltip title="预览">
+              <AuthIcon
+                :auth="ConfigurationPermission.PREVIEW"
+                class="!text-lg"
+                icon="ant-design:eye-outlined"
+                @click="handlePreview(item)"
+              />
+            </Tooltip>
+            <Tooltip v-if="!isCustomerUser" title="设计">
+              <AuthIcon
+                :auth="ConfigurationPermission.DESIGN"
+                class="!text-lg"
+                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: '编辑',
+                  auth: ConfigurationPermission.UPDATE,
+                  icon: 'clarity:note-edit-line',
+                  event: '',
+                  onClick: handleCreateOrUpdate.bind(null, item),
+                },
+                {
+                  text: '删除',
+                  auth: ConfigurationPermission.DELETE,
+                  icon: 'ant-design:delete-outlined',
+                  event: '',
+                  popconfirm: {
+                    title: '是否确认删除操作?',
+                    onConfirm: handleDelete.bind(null, item),
+                  },
+                },
+              ]"
+              :trigger="['hover']"
+            />
+          </template>
+          <Card.Meta>
+            <template #title>
+              <span class="truncate">{{ item.name }}</span>
+            </template>
+            <template #description>
+              <div class="truncate h-11">
+                <div class="truncate flex justify-between items-center">
+                  <div>{{ item.organizationDTO?.name }}</div>
+                  <Icon
+                    :icon="
+                      item.platform === Platform.PC
+                        ? 'ri:computer-line'
+                        : 'clarity:mobile-phone-solid'
+                    "
                   />
-                  <span
-                    class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1"
-                  >
-                    {{ ViewTypeNameEnum[item.viewType] || ViewTypeNameEnum.PRIVATE_VIEW }}
-                  </span>
                 </div>
-              </template>
-              <template class="ant-card-actions" #actions>
-                <Tooltip title="预览">
-                  <AuthIcon
-                    :auth="ConfigurationPermission.PREVIEW"
-                    class="!text-lg"
-                    icon="ant-design:eye-outlined"
-                    @click="handlePreview(item)"
-                  />
-                </Tooltip>
-                <Tooltip v-if="!isCustomerUser" title="设计">
-                  <AuthIcon
-                    :auth="ConfigurationPermission.DESIGN"
-                    class="!text-lg"
-                    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: '编辑',
-                      auth: ConfigurationPermission.UPDATE,
-                      icon: 'clarity:note-edit-line',
-                      event: '',
-                      onClick: handleCreateOrUpdate.bind(null, item),
-                    },
-                    {
-                      text: '删除',
-                      auth: ConfigurationPermission.DELETE,
-                      icon: 'ant-design:delete-outlined',
-                      event: '',
-                      popconfirm: {
-                        title: '是否确认删除操作?',
-                        onConfirm: handleDelete.bind(null, item),
-                      },
-                    },
-                  ]"
-                  :trigger="['hover']"
-                />
-              </template>
-              <Card.Meta>
-                <template #title>
-                  <span class="truncate">{{ item.name }}</span>
-                </template>
-                <template #description>
-                  <div class="truncate h-11">
-                    <div class="truncate flex justify-between items-center">
-                      <div>{{ item.organizationDTO.name }}</div>
-                      <Icon
-                        :icon="
-                          item.platform === Platform.PC
-                            ? 'ri:computer-line'
-                            : 'clarity:mobile-phone-solid'
-                        "
-                      />
-                    </div>
-                    <div class="truncate">{{ item.remark || '' }} </div>
-                  </div>
-                </template>
-              </Card.Meta>
-            </Card>
-          </List.Item>
-        </template>
-      </List>
-    </section>
-    <ConfigurationCenterDrawer @register="registerDrawer" @success="getListData" />
-    <ShareModal
-      @register="registerShareModal"
-      :shareApi="shareConfiguration"
-      @success="getListData"
-    />
-  </PageWrapper>
+                <div class="truncate">{{ item.remark || '' }} </div>
+              </div>
+            </template>
+          </Card.Meta>
+        </Card>
+      </template>
+    </BasicCardList>
+    <ConfigurationCenterDrawer @register="registerDrawer" @success="reload()" />
+    <ShareModal @register="registerShareModal" :shareApi="shareConfiguration" @success="reload" />
+  </section>
 </template>
 
 <style lang="less" scoped>
-  .configuration-list:deep(.ant-list-header) {
-    border-bottom: none !important;
-  }
-
-  .configuration-list:deep(.ant-list-pagination) {
-    height: 24px;
-  }
-
-  .configuration-list:deep(.ant-card-body) {
-    padding: 16px !important;
-  }
-
-  .configuration-list:deep(.ant-list-empty-text) {
-    @apply w-full h-full flex justify-center items-center;
-  }
-
   .card-container {
-    // background-color: red;
-    .img-container {
-      border-top-left-radius: 80px;
-      background-color: #fff;
-
-      img {
-        border-top-left-radius: 80px;
-      }
+    :deep(.ant-card-cover) {
+      background-color: var(--viewType);
     }
   }
-
-  .card-container:deep(.ant-card-cover) {
-    background-color: var(--viewType);
-  }
 </style>

-<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 } from './center.data';
-  import { Platform } from '../center/center.data';
-  import {
-    getPage,
-    deleteConfigurationCenter,
-  } from '/@/api/configuration/center/configurationCenter';
-  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-  import { isDevMode } from '/@/utils/env';
-  import { Authority } from '/@/components/Authority';
-  import { Popconfirm } from 'ant-design-vue';
-  import { Tag } from 'ant-design-vue';
-  import { useGlobSetting } from '/@/hooks/setting';
-  export default defineComponent({
-    components: {
-      PageWrapper,
-      OrganizationIdTree,
-      BasicTable,
-      TableAction,
-      ContactDrawer,
-      Authority,
-      Popconfirm,
-      Tag,
-    },
-    setup() {
-      const { configurationPrefix } = useGlobSetting();
-      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(
-          `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${
-            record!.id
-          }&lightbox=1`
-        );
-      };
-      const handleDesign = (record: Recordable | null) => {
-        window.open(
-          `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`
-        );
-      };
-
-      return {
-        Platform,
-        searchInfo,
-        hasBatchDelete,
-        handleCreateOrEdit,
-        handleDeleteOrBatchDelete,
-        handleSelect,
-        handleSuccess,
-        handlePreview,
-        handleDesign,
-        registerTable,
-        registerDrawer,
-        organizationIdTreeRef,
-      };
-    },
-  });
-</script>

-import { Platform } from './center.data';
-import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
-import { useGlobSetting } from '/@/hooks/setting';
-
-export enum ScadaModeEnum {
-  LIGHTBOX = 'lightbox',
-  DESIGN = 'design',
-  SHARE = 'share',
-}
-
-interface ScadaLinkParamsType {
-  configurationId: string;
-  organizationId: string;
-  mode: ScadaModeEnum;
-  platform: Platform;
-  publicId?: string;
-}
-
-const getRandomString = () => Number(Math.random().toString().substring(2)).toString(36);
-
-export const encode = (record: Recordable) => {
-  let hash = JSON.stringify(record);
-  const mixinString = getRandomString()
-    .slice(0, 10)
-    .padEnd(10, getRandomString())
-    .split('')
-    .map((item) => (Math.random() > 0.5 ? item.toUpperCase() : item))
-    .join('');
-  hash = window.btoa(hash);
-  hash = hash.substring(0, 6) + mixinString + hash.substring(6);
-  hash = window.btoa(hash);
-  return hash;
-};
-
-export const createScadaPageLink = (
-  record: ConfigurationCenterItemsModal,
-  mode: ScadaModeEnum = ScadaModeEnum.DESIGN,
-  open = true
-) => {
-  const { configurationPrefix } = useGlobSetting();
-  const params: ScadaLinkParamsType = {
-    configurationId: record.id,
-    organizationId: record.organizationId!,
-    mode: mode,
-    platform: record.platform as Platform,
-  };
-
-  if (mode === ScadaModeEnum.SHARE) {
-    params.publicId = record.publicId;
-  }
-
-  const href = new URL(location.origin);
-  href.pathname = configurationPrefix;
-  href.hash = encode(params);
-  open && window.open(href.href);
-  return href.href;
-};

 <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 { BasicCardList, useCardList } from '/@/components/CardList';
   import {
     deleteConfigurationCenter,
     getPage,
   } from '/@/api/configuration/center/configurationCenter';
-  import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
-  import { PageWrapper } from '/@/components/Page';
-  import { BasicForm, useForm } from '/@/components/Form';
   import { searchFormSchema, ConfigurationTemplatePermission } from './center.data';
-  import { useMessage } from '/@/hooks/web/useMessage';
+  import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
   import { Authority } from '/@/components/Authority';
-  import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';
-  import { useDrawer } from '/@/components/Drawer';
-  import { getBoundingClientRect } from '/@/utils/domUtils';
+  import { Button, Card, Tooltip } from 'ant-design-vue';
+  import { useRole } from '/@/hooks/business/useRole';
   import configurationSrc from '/@/assets/icons/configuration.svg';
-  import { cloneDeep } from 'lodash';
+  import { Platform } from '../center/center.data';
+  import { computed, unref } from 'vue';
+  import { createScadaPageLink, ScadaModeEnum } from '../center/help';
+  import { useDrawer } from '/@/components/Drawer';
   import { usePermission } from '/@/hooks/web/usePermission';
-  import { AuthIcon, CardLayoutButton } from '/@/components/Widget';
-  import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
-  import { useRole } from '/@/hooks/business/useRole';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { Icon } from '/@/components/Icon';
-  import { createScadaPageLink, ScadaModeEnum } from './help';
-  import { Platform } from '../center/center.data';
-
-  const listColumn = ref(5);
-
-  const { createMessage } = useMessage();
-
-  const { isCustomerUser } = useRole();
-
-  const organizationId = ref<Nullable<number>>(null);
+  import { AuthIcon, AuthDropDown } from '/@/components/Widget';
+  import { cloneDeep } from 'lodash-es';
+  import { OrganizationIdTree, useOrganizationTree } from '../../common/organizationIdTree';
+  import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';
 
-  const pagination = reactive<PaginationProps>({
-    size: 'small',
-    showTotal: (total: number) => `共 ${total} 条数据`,
-    current: 1,
-    pageSize: unref(listColumn) * 2,
-    onChange: (page: number) => {
-      pagination.current = page;
-      getListData();
+  const [register, { reload }] = useCardList({
+    api: getPage,
+    useSearchForm: true,
+    title: '模版列表',
+    gutter: 4,
+    formConfig: {
+      schemas: searchFormSchema,
+      labelWidth: 80,
+      resetFunc: async () => {
+        clearSelected();
+      },
+    },
+    beforeFetch: async (params: Recordable) => {
+      return { ...params, organizationId: getSelectKey(), isTemplate: 1 };
     },
   });
 
-  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();
-    },
-    submitFunc: async () => {
-      const value = getFieldsValue();
-      getListData(value);
+  const [registerOrgTree, { getSelectKey, clearSelected }] = useOrganizationTree({
+    onSelect: () => {
+      reload();
     },
   });
 
-  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,
-        isTemplate: 1,
-      });
-
-      dataSource.value = items;
-      Object.assign(pagination, { total, pageSize });
-    } catch (error) {
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  onMounted(() => {
-    getListData();
-  });
+  const [registerDrawer, { openDrawer }] = useDrawer();
 
-  const searchInfo = reactive<Recordable>({});
-  const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
-  const handleSelect = (orgId: number) => {
-    organizationId.value = orgId;
-    getListData();
-  };
+  const { createMessage } = useMessage();
 
-  const [registerDrawer, { openDrawer }] = useDrawer();
+  const { isCustomerUser } = useRole();
 
   const { hasPermission } = usePermission();
 
@@ -136,191 +89,106 @@
     try {
       await deleteConfigurationCenter([record.id]);
       createMessage.success('删除成功');
-      await getListData();
+      await 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 HTMLElement) 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');
-  });
 </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="ConfigurationTemplatePermission.CREATE">
-              <Button type="primary" @click="handleCreateOrUpdate()">新增模板</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': '#1890ff',
-              }"
-              hoverable
-              class="card-container"
+  <section class="flex w-full h-full">
+    <OrganizationIdTree @register="registerOrgTree" />
+    <BasicCardList class="flex-auto p-4 w-3/4 xl:w-4/5 w-full" @register="register">
+      <template #toolbar>
+        <div class="flex gap-3 justify-end">
+          <Authority v-if="!isCustomerUser" :value="ConfigurationTemplatePermission.CREATE">
+            <Button type="primary" @click="handleCreateOrUpdate()">新增模版</Button>
+          </Authority>
+        </div>
+      </template>
+      <template #renderItem="{ item }: CardListRenderItem<ConfigurationCenterItemsModal>">
+        <Card
+          :style="{
+            '--viewType': '#1890ff',
+          }"
+          hoverable
+          class="card-container"
+        >
+          <template #cover>
+            <div
+              class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative"
             >
-              <template #cover>
-                <div
-                  class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative"
-                >
-                  <img
-                    class="w-full h-36"
-                    alt="example"
-                    :src="item.thumbnail || configurationSrc"
-                    @click="handlePreview(item)"
+              <img
+                class="w-full max-h-32 h-32"
+                alt="example"
+                :src="item.thumbnail || configurationSrc"
+                @click="handlePreview(item)"
+              />
+            </div>
+          </template>
+          <template class="ant-card-actions" #actions>
+            <Tooltip title="预览">
+              <AuthIcon
+                :auth="ConfigurationTemplatePermission.PREVIEW"
+                class="!text-lg"
+                icon="ant-design:eye-outlined"
+                @click="handlePreview(item)"
+              />
+            </Tooltip>
+            <Tooltip v-if="!isCustomerUser" title="设计">
+              <AuthIcon
+                :auth="ConfigurationTemplatePermission.DESIGN"
+                class="!text-lg"
+                icon="ant-design:edit-outlined"
+                @click="handleDesign(item)"
+              />
+            </Tooltip>
+            <AuthDropDown
+              v-if="!isCustomerUser"
+              :dropMenuList="[
+                {
+                  text: '编辑',
+                  auth: ConfigurationTemplatePermission.UPDATE,
+                  icon: 'clarity:note-edit-line',
+                  event: '',
+                  onClick: handleCreateOrUpdate.bind(null, item),
+                },
+                {
+                  text: '删除',
+                  auth: ConfigurationTemplatePermission.DELETE,
+                  icon: 'ant-design:delete-outlined',
+                  event: '',
+                  popconfirm: {
+                    title: '是否确认删除操作?',
+                    onConfirm: handleDelete.bind(null, item),
+                  },
+                },
+              ]"
+              :trigger="['hover']"
+            />
+          </template>
+          <Card.Meta>
+            <template #title>
+              <span class="truncate">{{ item.name }}</span>
+            </template>
+            <template #description>
+              <div class="truncate h-11">
+                <div class="truncate flex justify-between items-center">
+                  <div>{{ item.organizationDTO?.name }}</div>
+                  <Icon
+                    :icon="
+                      item.platform === Platform.PC
+                        ? 'ri:computer-line'
+                        : 'clarity:mobile-phone-solid'
+                    "
                   />
-                  <span
-                    class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1"
-                  >
-                    母版
-                  </span>
                 </div>
-              </template>
-              <template class="ant-card-actions" #actions>
-                <Tooltip title="预览">
-                  <AuthIcon
-                    :auth="ConfigurationTemplatePermission.PREVIEW"
-                    class="!text-lg"
-                    icon="ant-design:eye-outlined"
-                    @click="handlePreview(item)"
-                  />
-                </Tooltip>
-                <Tooltip v-if="!isCustomerUser" title="设计">
-                  <AuthIcon
-                    :auth="ConfigurationTemplatePermission.DESIGN"
-                    class="!text-lg"
-                    icon="ant-design:edit-outlined"
-                    @click="handleDesign(item)"
-                  />
-                </Tooltip>
-                <AuthDropDown
-                  v-if="!isCustomerUser"
-                  :dropMenuList="[
-                    {
-                      text: '编辑',
-                      auth: ConfigurationTemplatePermission.UPDATE,
-                      icon: 'clarity:note-edit-line',
-                      event: '',
-                      onClick: handleCreateOrUpdate.bind(null, item),
-                    },
-                    {
-                      text: '删除',
-                      auth: ConfigurationTemplatePermission.DELETE,
-                      icon: 'ant-design:delete-outlined',
-                      event: '',
-                      popconfirm: {
-                        title: '是否确认删除操作?',
-                        onConfirm: handleDelete.bind(null, item),
-                      },
-                    },
-                  ]"
-                  :trigger="['hover']"
-                />
-              </template>
-              <Card.Meta>
-                <template #title>
-                  <span class="truncate">{{ item.name }}</span>
-                </template>
-                <template #description>
-                  <div class="truncate h-11">
-                    <div class="truncate flex justify-between items-center">
-                      <div>{{ item.organizationDTO?.name }}</div>
-                      <Icon
-                        :icon="
-                          item.platform === Platform.PC
-                            ? 'ri:computer-line'
-                            : 'clarity:mobile-phone-solid'
-                        "
-                      />
-                    </div>
-                    <div class="truncate">{{ item.remark || '' }} </div>
-                  </div>
-                </template>
-              </Card.Meta>
-            </Card>
-          </List.Item>
-        </template>
-      </List>
-    </section>
-    <ConfigurationCenterDrawer @register="registerDrawer" @success="getListData" />
-  </PageWrapper>
+                <div class="truncate">{{ item.remark || '' }} </div>
+              </div>
+            </template>
+          </Card.Meta>
+        </Card>
+      </template>
+    </BasicCardList>
+    <ConfigurationCenterDrawer @register="registerDrawer" @success="reload()" />
+  </section>
 </template>
-
-<style lang="less" scoped>
-  .configuration-list:deep(.ant-list-header) {
-    border-bottom: none !important;
-  }
-
-  .configuration-list:deep(.ant-list-pagination) {
-    height: 24px;
-  }
-
-  .configuration-list:deep(.ant-card-body) {
-    padding: 16px !important;
-  }
-
-  .configuration-list:deep(.ant-list-empty-text) {
-    @apply w-full h-full flex justify-center items-center;
-  }
-
-  .card-container {
-    // background-color: red;
-    .img-container {
-      border-top-left-radius: 80px;
-      background-color: #fff;
-
-      img {
-        border-top-left-radius: 80px;
-      }
-    }
-  }
-
-  .card-container:deep(.ant-card-cover) {
-    background-color: var(--viewType);
-  }
-</style>

 <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,37 @@
   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,
+    gutter: 4,
+    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 +95,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 +110,7 @@
   };
 
   const userStore = useUserStore();
+
   const hasPublicInterfacePermission = computed(() => {
     return userStore.getUserInfo.roles![0] !== RoleEnum.CUSTOMER_USER;
   });
@@ -197,166 +126,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>
 

-import { getOrganizationList } from '/@/api/system/system';
 import { FormSchema } from '/@/components/Form';
 import { ColEx } from '/@/components/Form/src/types';
 import { useGridLayout } from '/@/hooks/component/useGridLayout';
-import { copyTransFun } from '/@/utils/fnUtils';
 
 export const formSchema: FormSchema[] = [
   {
@@ -11,23 +9,8 @@ export const formSchema: FormSchema[] = [
     component: 'Input',
     // colProps: { span: 10 },
     colProps: useGridLayout(2, 3, 4) as unknown as ColEx,
-  },
-  {
-    field: 'organizationId',
-    component: 'ApiTreeSelect',
-    label: '组织',
-    // colProps: { span: 10 },
-    colProps: useGridLayout(2, 3, 4) as unknown as ColEx,
-    componentProps() {
-      return {
-        placeholder: '请选择组织',
-        api: async () => {
-          const data = await getOrganizationList();
-          copyTransFun(data as any as any[]);
-          return data;
-        },
-        getPopupContainer: () => document.body,
-      };
+    componentProps: {
+      placeholder: '请输入看板名称',
     },
   },
 ];

 <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 { useMessage } from '/@/hooks/web/useMessage';
   import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
@@ -13,12 +12,8 @@
   import { DataBoardRecord } from '/@/api/dataBoard/model';
   import { ViewType } from './config/panelDetail';
   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 { encode } from './config/config';
-  import { useForm, BasicForm } from '/@/components/Form';
   import { formSchema } from './config/searchForm';
   import { ShareModal } from '/@/views/common/ShareModal';
   import { ModalParamsType } from '/#/utils';
@@ -26,62 +21,33 @@
   import { useRole } from '/@/hooks/business/useRole';
   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';
+  import { OrganizationIdTree, useOrganizationTree } from '../../common/organizationIdTree';
 
-  const ListItem = List.Item;
   const router = useRouter();
 
   const { createMessage, createConfirm } = useMessage();
 
-  const listEL = ref();
-  const loading = ref(false);
-  const dataBoardList = ref<DataBoardRecord[]>([]);
+  const [registerOrgTree, { clearSelected, getSelectKey }] = useOrganizationTree({
+    onSelect: () => reload(),
+  });
 
-  const [searchFormRegister, searchFormMethod] = useForm({
-    schemas: formSchema,
-    labelWidth: 80,
-    layout: 'inline',
-    submitButtonOptions: {
-      loading: loading as unknown as boolean,
+  const [registerCardList, { reload }] = useCardList({
+    title: '数据看板',
+    api: getDataBoardList,
+    baseLayout: { col: 3, row: 3 },
+    useSearchForm: true,
+    formConfig: {
+      schemas: formSchema,
+      labelWidth: 80,
+      resetFunc: async () => clearSelected(),
     },
-    submitFunc: async () => {
-      try {
-        const params = searchFormMethod.getFieldsValue();
-        await getDatasource(params);
-      } catch (error) {}
-    },
-    resetFunc: async () => {
-      try {
-        await getDatasource();
-      } catch (error) {}
+    beforeFetch: async (params: Recordable) => {
+      return { ...params, organizationId: getSelectKey() };
     },
   });
 
-  // 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 { origin } = location;
     const { id, publicId } = record;
@@ -124,22 +90,6 @@
     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) => {
     openShareModal(true, {
       record,
@@ -175,7 +125,7 @@
     try {
       await deleteDataBoard([record.id]);
       createMessage.success('删除成功');
-      await getDatasource();
+      reload();
     } catch (error) {}
   };
 
@@ -188,106 +138,70 @@
     if (hasDetailPermission) {
       const boardId = encode(record.id);
       const boardName = encode(record.name);
-      const organizationId = encode(record?.organizationId);
+      const organizationId = encode(record!.organizationId!);
 
       router.push(`/visual/board/detail/${boardId}/${boardName}/${organizationId}`);
     } 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>
 
 <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 class="flex">
+    <OrganizationIdTree @register="registerOrgTree" />
+    <BasicCardList class="flex-auto p-4 w-3/4 xl:w-4/5 w-full" @register="registerCardList">
+      <template #toolbar>
+        <Authority :value="VisualBoardPermission.CREATE">
+          <Button type="primary" @click="handleOpenDetailModal">新增看板</Button>
+        </Authority>
+      </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>
-                </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>
 
 <style scoped lang="less">

 import type { ComputedRef, Ref } from 'vue';
-import { DataActionModeEnum } from '/@/enums/toolEnum';
 
-export type DynamicProps<T> = {
-  [P in keyof T]: Ref<T[P]> | T[P] | ComputedRef<T[P]>;
-};
+import { DataActionModeEnum } from '/@/enums/toolEnum';
 
 export interface ModalParamsType<T = Recordable> {
   mode: DataActionModeEnum;
@@ -11,9 +8,30 @@ export interface ModalParamsType<T = Recordable> {
   [key: string]: any;
 }
 
+export type DynamicProps<T> = {
+  [P in keyof T]: Ref<T[P]> | T[P] | ComputedRef<T[P]>;
+};
+
 export interface DefineComponentsBasicExpose<T = Recordable> {
   getFieldsValue: () => T;
   setFieldsValue: (value: T) => any;
   validate?: () => Promise<any>;
   resetFieldsValue?: (...args) => any;
 }
+
+declare global {
+  interface CardListRenderItem<T = Recordable & { checked?: boolean }> {
+    item: T;
+    totalHeight: number;
+  }
+
+  import { DataActionModeEnum } from '/@/enums/toolEnum';
+
+  interface ModalParamsType<T = Recordable> {
+    mode: DataActionModeEnum;
+    record: T;
+    [key: string]: any;
+  }
+}
+
+export {};