feat: 新增卡片列表组件

+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),
+    };
+  });
+
+  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 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="title"></span>
+              <slot v-else name="name"></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>
+            <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-row {
+          row-gap: 16px;
+
+          .ant-list-item {
+            margin-bottom: 0;
+          }
+        }
+      }
+
+      .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 { Ref, computed, reactive, unref } from 'vue';
+import { BasicCardListPropsType, ListGridType } from '../types';
+import { getListGridByColumn } from '../utils';
+
+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;
+  });
+
+  return {
+    getListGrid,
+    cardListLayout,
+  };
+}

+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;
+}
+
+export type ListGridType = Record<
+  'column' | 'gutter' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
+  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> {
+  item: T;
+  totalHeight: number;
+}

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

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

 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> {
+    item: T;
+    totalHeight: number;
+  }
+
+  import { DataActionModeEnum } from '/@/enums/toolEnum';
+
+  interface ModalParamsType<T = Recordable> {
+    mode: DataActionModeEnum;
+    record: T;
+    [key: string]: any;
+  }
+}
+
+export {};