Merge branch 'main_dev' of http://git.yunteng.com/yunteng/thingskit-front into fix/rule-chain-field

@@ -43,120 +43,7 @@ export interface IDeviceConfigAddOrEditModel {
   icon?: string;
   id?: string;
   name?: string;
-  profileData?: {
-    configuration: {};
-    transportConfiguration: {};
-    provisionConfiguration: {
-      provisionDeviceSecret: string;
-    };
-    //报警类型字段
-    alarms: [
-      {
-        id: 'highTemperatureAlarmID';
-        alarmType: 'High Temperature Alarm';
-        createRules: {
-          additionalProp1: {
-            condition: {
-              condition: [
-                {
-                  key: {
-                    type: 'TIME_SERIES';
-                    key: 'temp';
-                  };
-                  valueType: 'NUMERIC';
-                  value: {};
-                  predicate: {};
-                }
-              ];
-              spec: {};
-            };
-            schedule: {
-              type: 'ANY_TIME';
-            };
-            alarmDetails: string;
-            dashboardId: {
-              id: '784f394c-42b6-435a-983c-b7beff2784f9';
-              entityType: 'DASHBOARD';
-            };
-          };
-          additionalProp2: {
-            condition: {
-              condition: [
-                {
-                  key: {
-                    type: 'TIME_SERIES';
-                    key: 'temp';
-                  };
-                  valueType: 'NUMERIC';
-                  value: {};
-                  predicate: {};
-                }
-              ];
-              spec: {};
-            };
-            schedule: {
-              type: 'ANY_TIME';
-            };
-            alarmDetails: string;
-            dashboardId: {
-              id: '784f394c-42b6-435a-983c-b7beff2784f9';
-              entityType: 'DASHBOARD';
-            };
-          };
-          additionalProp3: {
-            condition: {
-              condition: [
-                {
-                  key: {
-                    type: 'TIME_SERIES';
-                    key: 'temp';
-                  };
-                  valueType: 'NUMERIC';
-                  value: {};
-                  predicate: {};
-                }
-              ];
-              spec: {};
-            };
-            schedule: {
-              type: 'ANY_TIME';
-            };
-            alarmDetails: string;
-            dashboardId: {
-              id: '784f394c-42b6-435a-983c-b7beff2784f9';
-              entityType: 'DASHBOARD';
-            };
-          };
-        };
-        clearRule: {
-          condition: {
-            condition: [
-              {
-                key: {
-                  type: 'TIME_SERIES';
-                  key: 'temp';
-                };
-                valueType: 'NUMERIC';
-                value: {};
-                predicate: {};
-              }
-            ];
-            spec: {};
-          };
-          schedule: {
-            type: 'ANY_TIME';
-          };
-          alarmDetails: string;
-          dashboardId: {
-            id: '784f394c-42b6-435a-983c-b7beff2784f9';
-            entityType: 'DASHBOARD';
-          };
-        };
-        propagate: true;
-        propagateRelationTypes: [string];
-      }
-    ];
-  };
+  profileData?: ProfileData;
   roleIds?: [string];
   tbProfileId?: string;
   tenantExpireTime?: '2021-12-15T02:17:26.645Z';
@@ -219,7 +106,7 @@ export interface ProfileData {
   configuration: Configuration;
   transportConfiguration: TransportConfiguration;
   provisionConfiguration: ProvisionConfiguration;
-  alarms?: any;
+  alarms: any;
 }
 
 export interface ProfileRecord {
@@ -297,8 +184,3 @@ export interface Configuration {
 export interface TransportConfiguration {
   type: string;
 }
-
-export interface ProvisionConfiguration {
-  type: string;
-  provisionDeviceSecret: any;
-}

 <script setup lang="ts">
   import { BasicForm, FormActionType, useForm } from '/@/components/Form';
-  import { List, ListProps, Button, Tooltip } from 'ant-design-vue';
+  import { List, ListProps, Button, Tooltip, DropdownButton, Menu } from 'ant-design-vue';
   import { computed, Ref, ref, toRaw, unref, useSlots, watch } from 'vue';
   import { useCardListScroll } from './hooks/useCardListScroll';
   import { BasicCardListPropsType, CardListActionType } from './types';
@@ -12,6 +12,7 @@
   import { FETCH_SETTING } from '../../Table/src/const';
   import { useCardForm } from './hooks/useCardForm';
   import { Icon } from '/@/components/Icon';
+  import { useCardListSelected } from './hooks/useCardListSelected';
 
   const emit = defineEmits<{
     (eventName: 'fetchSuccess', result: { items: Recordable[]; total: number }): void;
@@ -33,6 +34,7 @@
     immediate: true,
     fetchSetting: () => FETCH_SETTING,
     autoCreateKey: true,
+    offsetHeight: 0,
   });
 
   const tableData = ref<Recordable[]>([]);
@@ -56,7 +58,15 @@
 
   const { loading, setLoading, getLoading } = useLoading();
 
-  const { getDataSourceRef, getRowKey, fetch, reload } = useCardListData(getProps, formActions, {
+  const {
+    getDataSourceRef,
+    getRowKey,
+    fetch,
+    reload,
+    updateTableDataRecord,
+    findCardDataRecord,
+    setCardListData,
+  } = useCardListData(getProps, formActions, {
     setLoading,
     getPaginationInfo,
     emit,
@@ -77,14 +87,31 @@
     getLoading
   );
 
+  const {
+    handlerSelected,
+    selectedClass,
+    selectedKeys,
+    selectAllToggle,
+    selectedAll,
+    clearSelectedKeys,
+    getSelectedKeys,
+    getSelectedRecords,
+    getSelections,
+  } = useCardListSelected(getDataSourceRef, getProps, {
+    updateTableDataRecord,
+    findCardDataRecord,
+    getRowKey,
+    setCardListData,
+  });
+
   function handleCardListChange() {
     reload();
   }
 
-  const getBindData = computed<ListProps>(() => {
+  const getBindValues = computed<ListProps>(() => {
     const dataSource = unref(getDataSourceRef);
 
-    return {
+    const props = {
       dataSource,
       grid: unref(getListGrid),
       loading: unref(loading),
@@ -95,8 +122,9 @@
           handleCardListChange();
         },
       },
-      rowKey: unref(getRowKey),
+      rowKey: (record: Recordable) => record[unref(getRowKey)],
     } as ListProps;
+    return props;
   });
 
   watch(cardListLayout, () => {
@@ -111,6 +139,11 @@
     setPagination,
     getPagination,
     reload,
+    selectedAll,
+    clearSelectedKeys,
+    getSelectedKeys,
+    getSelectedRecords,
+    getSelections,
   };
 
   function setProps(props: Partial<BasicCardListPropsType> = {}) {
@@ -137,7 +170,7 @@
     </section>
 
     <section class="w-full bg-light-50 dark:bg-dark-900 p-4 flex-auto h-full">
-      <List ref="listElRef" v-bind="getBindData">
+      <List ref="listElRef" v-bind="getBindValues">
         <template #header>
           <section class="flex justify-between items-center">
             <div>
@@ -146,10 +179,21 @@
               </span>
               <slot v-else name="title"></slot>
             </div>
-            <div class="flex flex-auto justify-end mr-4">
+            <div class="flex flex-auto justify-end mr-4 gap-4">
               <slot name="toolbar"></slot>
             </div>
             <div v-if="showCardListSetting" class="flex gap-4">
+              <DropdownButton v-if="getProps.selections" @click="selectAllToggle" type="primary">
+                <template #overlay>
+                  <Menu>
+                    <Menu.Item @click="selectedAll">全选</Menu.Item>
+                    <Menu.Item @click="clearSelectedKeys">反选</Menu.Item>
+                  </Menu>
+                </template>
+                <span>
+                  {{ selectedKeys.length === getDataSourceRef.length ? '反选' : '全选' }}
+                </span>
+              </DropdownButton>
               <CardListLayout v-model:row="cardListLayout.row" v-model:col="cardListLayout.col" />
               <Tooltip title="刷新">
                 <Button type="primary" @click="reload()" :loading="loading">
@@ -159,9 +203,18 @@
             </div>
           </section>
         </template>
-        <template #renderItem="{ item }">
-          <List.Item :style="{ '--totalHeight': containerHeight }">
-            <slot name="renderItem" :item="item" :totalHeight="containerHeight"></slot>
+        <template #renderItem="{ item }: BasicCardListRenderItem<any>">
+          <List.Item
+            :class="selectedKeys.includes(item[getRowKey]) ? selectedClass : ''"
+            @click="handlerSelected($event, item)"
+          >
+            <slot
+              name="renderItem"
+              :item="item"
+              :totalHeight="containerHeight"
+              :checked="item?.checked"
+            >
+            </slot>
           </List.Item>
         </template>
       </List>
@@ -175,6 +228,38 @@
       .ant-spin-container {
         overflow-x: hidden;
         overflow-y: auto;
+
+        .ant-list-item {
+          border: 2px transparent solid;
+          position: relative;
+
+          &.basic-card-list-item-checked {
+            border: 2px solid #377dff;
+
+            &::after {
+              position: absolute;
+              inset-block-start: 2px;
+              inset-inline-end: 2px;
+              width: 0;
+              height: 0;
+              border: 10px solid #1677ff;
+              border-block-end: 10px solid transparent;
+              border-inline-start: 10px solid transparent;
+              // border-start-end-radius: 6px;
+              content: '';
+            }
+
+            &::before {
+              content: '';
+              position: absolute;
+              background-color: #53a2fd;
+              width: 100%;
+              height: 100%;
+              opacity: 0.2;
+              z-index: 99;
+            }
+          }
+        }
       }
 
       .ant-list-header {

@@ -35,7 +35,7 @@
   };
 
   watch(
-    () => [props.row, props.col],
+    () => [props.row, props.col, visible.value],
     () => {
       selectedLayout.row = props.row;
       selectedLayout.col = props.col;

-import { WatchStopHandle, onUnmounted, ref, unref, watch } from 'vue';
+import { WatchStopHandle, ref, unref, watch } from 'vue';
 import { BasicCardListPropsType, CardListActionType } from '../types';
 import { isProdMode } from '/@/utils/env';
 import { error } from '/@/utils/log';
@@ -6,8 +6,9 @@ import { FormActionType } from '/@/components/Form';
 import { getDynamicProps } from '/@/utils';
 import { PaginationProps } from 'ant-design-vue';
 import { FetchParams } from './useCardListData';
+import { tryOnUnmounted } from '@vueuse/core';
 
-type UseTableMethod = CardListActionType & {
+type UseCardListMethod = CardListActionType & {
   getForm: () => FormActionType;
 };
 
@@ -22,7 +23,7 @@ export function useCardList(
 
   function register(instance: CardListActionType, formInstance: FormActionType) {
     isProdMode() &&
-      onUnmounted(() => {
+      tryOnUnmounted(() => {
         cardListRef.value = null;
         loadedRef.value = null;
       });
@@ -48,34 +49,49 @@ export function useCardList(
     );
   }
 
-  function getTableInstance(): CardListActionType {
-    const table = unref(cardListRef);
-    if (!table) {
+  function getCardListInstance(): CardListActionType {
+    const cardList = unref(cardListRef);
+    if (!cardList) {
       error(
-        'The CardList instance has not been obtained yet, please make sure the table is presented when performing the table operation!'
+        'The CardList instance has not been obtained yet, please make sure the card list is presented when performing the card list operation!'
       );
     }
-    return table as CardListActionType;
+    return cardList as CardListActionType;
   }
 
-  const cardListActionType: UseTableMethod = {
+  const cardListActionType: UseCardListMethod = {
     getForm: () => {
       return unref(formRef) as unknown as FormActionType;
     },
     setLoading: (loading: boolean) => {
-      return getTableInstance().setLoading(loading);
+      return getCardListInstance().setLoading(loading);
     },
     setProps: (props: Partial<BasicCardListPropsType>) => {
-      getTableInstance().setProps(props);
+      getCardListInstance().setProps(props);
     },
     getPagination: () => {
-      return getTableInstance().getPagination();
+      return getCardListInstance().getPagination();
     },
     setPagination: (pagination: Partial<PaginationProps>) => {
-      return getTableInstance().setPagination(pagination);
+      return getCardListInstance().setPagination(pagination);
     },
     reload: (opt?: FetchParams) => {
-      return getTableInstance().reload(opt);
+      return getCardListInstance().reload(opt);
+    },
+    selectedAll: () => {
+      return getCardListInstance().selectedAll();
+    },
+    clearSelectedKeys: () => {
+      return getCardListInstance().clearSelectedKeys();
+    },
+    getSelectedKeys: () => {
+      return getCardListInstance().getSelectedKeys();
+    },
+    getSelectedRecords: () => {
+      return getCardListInstance().getSelectedRecords();
+    },
+    getSelections: () => {
+      return getCardListInstance().getSelections();
     },
   };
 

@@ -49,25 +49,22 @@ export function useCardListData(
     }
   );
 
-  function setTableKey(items: any[]) {
+  function setCardKey(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 getAutoCreateKey = computed<boolean>(() => {
+    return !!(unref(propsRef).autoCreateKey && !unref(propsRef).rowKey);
   });
 
-  const getRowKey = computed(() => {
+  const getRowKey = computed<string | number>(() => {
     const { rowKey } = unref(propsRef);
-    return unref(getAutoCreateKey) ? ROW_KEY : rowKey;
+    return unref(getAutoCreateKey) ? ROW_KEY : rowKey!;
   });
 
   const getDataSourceRef = computed(() => {
@@ -87,13 +84,14 @@ export function useCardListData(
               item[ROW_KEY] = buildUUID();
             }
             if (item.children && item.children.length) {
-              setTableKey(item.children);
+              setCardKey(item.children);
             }
           });
           dataSourceRef.value = data;
         }
       }
     }
+
     return unref(dataSourceRef);
   });
 
@@ -176,10 +174,47 @@ export function useCardListData(
     }
   }
 
+  function findCardDataRecord(rowKey: string | number) {
+    if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
+
+    const rowKeyName = unref(getRowKey);
+    if (!rowKeyName) return;
+
+    const findRow = (array: any[]) => {
+      let ret;
+      array.some(function iter(r) {
+        if (Reflect.has(r, rowKeyName) && r[rowKeyName] === rowKey) {
+          ret = r;
+          return true;
+        }
+      });
+      return ret;
+    };
+
+    return findRow(dataSourceRef.value);
+  }
+
+  function updateTableDataRecord(
+    rowKey: string | number,
+    record: Recordable
+  ): Recordable | undefined {
+    const row = findCardDataRecord(rowKey);
+    if (row) {
+      for (const field in row) {
+        if (Reflect.has(record, field)) row[field] = record[field];
+      }
+      return row;
+    }
+  }
+
   async function reload(opt?: FetchParams) {
     await fetch(opt);
   }
 
+  function setCardListData<T = Recordable>(values: T[]) {
+    dataSourceRef.value = values as Recordable[];
+  }
+
   onMounted(() => {
     useTimeoutFn(() => {
       unref(propsRef).immediate && fetch();
@@ -191,5 +226,8 @@ export function useCardListData(
     fetch,
     getRowKey,
     getDataSourceRef,
+    setCardListData,
+    findCardDataRecord,
+    updateTableDataRecord,
   };
 }

-import { ComputedRef, computed, unref } from 'vue';
+import { ComputedRef, computed, ref, toRaw, unref, watch } from 'vue';
+import { BasicCardListPropsType, CardListSelectionsType, UseCardListDataType } from '../types';
+import { isBoolean, isFunction } from '/@/utils/is';
+import { cloneDeep } from 'lodash-es';
+
+export const CHECKED_FIELD = 'CARD_LIST_CHECKED_STATUS';
+
+export const DEFAULT_SELECTED_CLASS = 'basic-card-list-item-checked';
+
+interface CardListSelectActionType {
+  updateTableDataRecord: UseCardListDataType['updateTableDataRecord'];
+  findCardDataRecord: UseCardListDataType['findCardDataRecord'];
+  getRowKey: UseCardListDataType['getRowKey'];
+  setCardListData: UseCardListDataType['setCardListData'];
+}
 
 export function useCardListSelected(
-  getDataSourceRef: ComputedRef<(Recordable & { checked?: boolean })[]>
+  getDataSourceRef: ComputedRef<Recordable[]>,
+  propsRef: ComputedRef<BasicCardListPropsType>,
+  { getRowKey }: CardListSelectActionType
 ) {
+  const selectedKeys = ref<string[]>([]);
+
+  const selectedClass = ref('');
+
+  const selectionRef = ref<CardListSelectionsType>({});
+
+  const getSelectionsRef = computed<CardListSelectionsType & { enabled: boolean }>(() => {
+    const { selections } = unref(propsRef);
+    return {
+      enabled: !!selections,
+      ...unref(selectionRef),
+      ...(isBoolean(selections) ? {} : selections),
+    };
+  });
+
   const getHasSelectedRecordStatus = computed(() =>
     unref(getDataSourceRef).find((item) => item.checked)
   );
 
-  // function handlerSelect
+  const getShouldUseDefaultStyle = computed(
+    () => unref(getSelectionsRef).enabled && !unref(getSelectionsRef).customCheckedStyle
+  );
+
+  watch(
+    getSelectionsRef,
+    () => {
+      selectedClass.value =
+        isBoolean(unref(propsRef).selections) ||
+        !(unref(propsRef).selections as CardListSelectionsType).customCheckedStyle
+          ? DEFAULT_SELECTED_CLASS
+          : '';
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  function handlerSelected(_event: MouseEvent, record: Recordable) {
+    if (!unref(getSelectionsRef).enabled) return;
+
+    if (unref(getSelectionsRef).beforeSelectValidate) {
+      if (!unref(getSelectionsRef).beforeSelectValidate?.(record)) return;
+    }
+
+    const rowKey = record[unref(getRowKey)];
+    const index = unref(selectedKeys).findIndex((key) => key === rowKey);
+    ~index ? selectedKeys.value.splice(index, 1) : unref(selectedKeys).push(rowKey);
+
+    if (!unref(getSelectionsRef).onSelect) return;
+
+    unref(getSelectionsRef)?.onSelect?.(record, !!~index, getSelectedRecords());
+  }
+
+  function selectedAll() {
+    selectedKeys.value = unref(getDataSourceRef)
+      .filter(
+        (item) =>
+          isFunction(unref(getSelectionsRef).beforeSelectValidate) &&
+          unref(getSelectionsRef).beforeSelectValidate?.(item)
+      )
+      .map((item) => item[unref(getRowKey)]);
+
+    if (!unref(getSelectionsRef).onSelect) return;
+
+    unref(getSelectionsRef)?.onSelectAll?.(toRaw(unref(getDataSourceRef)));
+  }
+
+  function clearSelectedKeys() {
+    selectedKeys.value = [];
+  }
+
+  function getSelectedKeys() {
+    return toRaw(unref(selectedKeys));
+  }
+
+  function getSelectedRecords() {
+    const data = cloneDeep(unref(getDataSourceRef));
+    return data.filter((item) => unref(selectedKeys).includes(item[unref(getRowKey)]));
+  }
+
+  function selectAllToggle() {
+    unref(getDataSourceRef).length === unref(selectedKeys).length
+      ? (selectedKeys.value = [])
+      : selectedAll();
+  }
+
+  function getSelections() {
+    return unref(getSelectionsRef);
+  }
 
   return {
+    selectedKeys,
+    selectedClass,
+    getShouldUseDefaultStyle,
     getHasSelectedRecordStatus,
+    getSelections,
+    handlerSelected,
+    selectedAll,
+    selectAllToggle,
+    clearSelectedKeys,
+    getSelectedKeys,
+    getSelectedRecords,
   };
 }

@@ -4,6 +4,7 @@ import { FetchSetting } from '../../Table';
 import { useLoading } from './hooks/useLoading';
 import { usePagination } from './hooks/usePagination';
 import { FetchParams, useCardListData } from './hooks/useCardListData';
+import { useCardListSelected } from './hooks/useCardListSelected';
 
 // export interface CardList
 
@@ -22,11 +23,11 @@ export interface BasicCardListPropsType<T = Recordable> {
   fetchSetting?: FetchSetting;
   afterFetch?: (items: T[], result: any) => Promise<any[]>;
   autoCreateKey?: boolean;
-  rowKey?: (item: T) => string | number;
+  rowKey?: string | number;
   immediate?: boolean;
   handleSearchInfoFn?: Fn;
   baseLayout?: Record<'row' | 'col', number>;
-  selections?: boolean;
+  selections?: boolean | CardListSelectionsType;
 }
 
 export type ListGridType = Record<'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', number> & {
@@ -36,14 +37,22 @@ export type ListGridType = Record<'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' |
 export type UseLoading = ReturnType<typeof useLoading>;
 
 export type UsePaginationType = ReturnType<typeof usePagination>;
+
 export type UseCardListDataType = ReturnType<typeof useCardListData>;
 
+export type UseCardListSelected = ReturnType<typeof useCardListSelected>;
+
 export interface CardListActionType {
   setProps: (props: Partial<BasicCardListPropsType>) => void;
   setLoading: UseLoading['setLoading'];
   setPagination: UsePaginationType['setPagination'];
   getPagination: UsePaginationType['getPagination'];
   reload: UseCardListDataType['reload'];
+  selectedAll: UseCardListSelected['selectedAll'];
+  clearSelectedKeys: UseCardListSelected['clearSelectedKeys'];
+  getSelectedKeys: UseCardListSelected['getSelectedKeys'];
+  getSelectedRecords: UseCardListSelected['getSelectedRecords'];
+  getSelections: UseCardListSelected['getSelections'];
 }
 
 export interface CardListEmitType {
@@ -51,13 +60,9 @@ export interface CardListEmitType {
   (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;
+export interface CardListSelectionsType {
+  customCheckedStyle?: boolean;
+  beforeSelectValidate?: (record: Recordable) => boolean;
+  onSelect?: (record: Recordable, selected: boolean, allSelectedRecord: Recordable[]) => any;
+  onSelectAll?: (selectedRecords: Recordable[]) => any;
 }

@@ -19,30 +19,12 @@
         </Button>
       </template>
       <template #toolbar>
-        <Tooltip>
-          <template #title>
-            <div>激活未确认: 可以处理，清除</div>
-            <div>激活已确认: 只可清除，已经处理</div>
-            <div>清除未确认: 只可处理，已经清除</div>
-            <div>清除已确认: 不需要做处理和清除</div>
-          </template>
-          <Button @click="handleBatchClear" type="primary" :disabled="getCanBatchClear">
-            <QuestionCircleOutlined class="cursor-pointer" />
-            <span>批量清除</span>
-          </Button>
-        </Tooltip>
-        <Tooltip>
-          <template #title>
-            <div>激活未确认: 可以处理，清除</div>
-            <div>激活已确认: 只可清除，已经处理</div>
-            <div>清除未确认: 只可处理，已经清除</div>
-            <div>清除已确认: 不需要做处理和清除</div>
-          </template>
-          <Button @click="handleBatchAck" type="primary" :disabled="getCanBatchAck">
-            <QuestionCircleOutlined class="cursor-pointer" />
-            <span>批量处理</span>
-          </Button>
-        </Tooltip>
+        <Button @click="handleBatchClear" type="primary" :disabled="getCanBatchClear">
+          <span>批量清除</span>
+        </Button>
+        <Button @click="handleBatchAck" type="primary" :disabled="getCanBatchAck">
+          <span>批量处理</span>
+        </Button>
       </template>
     </BasicTable>
     <AlarmDetailDrawer @register="registerDetailDrawer" @success="handleSuccess" />
@@ -55,7 +37,7 @@
   import { doBatchAckAlarm, doBatchClearAlarm, getDeviceAlarm } from '/@/api/device/deviceManager';
   import { useDrawer } from '/@/components/Drawer';
   import AlarmDetailDrawer from './cpns/AlarmDetailDrawer.vue';
-  import { Modal, Button, Tooltip } from 'ant-design-vue';
+  import { Modal, Button } from 'ant-design-vue';
   import { JsonPreview } from '/@/components/CodeEditor';
   import { getDeviceDetail } from '/@/api/device/deviceManager';
   import { getAttribute } from '/@/api/ruleengine/ruleengineApi';
@@ -67,7 +49,6 @@
   import { AlarmLogItem } from '/@/api/device/model/deviceConfigModel';
   import { AlarmStatus } from '/@/enums/alarmEnum';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
 
   const props = defineProps<{
     deviceId?: string;

@@ -134,7 +134,7 @@
           </Authority>
         </div>
       </template>
-      <template #renderItem="{ item }: CardListRenderItem<ConfigurationCenterItemsModal>">
+      <template #renderItem="{ item }: BasicCardListRenderItem<ConfigurationCenterItemsModal>">
         <Card
           :style="{
             '--viewType': item.viewType === ViewTypeEnum.PUBLIC_VIEW ? '#faad14' : '#1890ff',

@@ -105,7 +105,7 @@
           </Authority>
         </div>
       </template>
-      <template #renderItem="{ item }: CardListRenderItem<ConfigurationCenterItemsModal>">
+      <template #renderItem="{ item }: BasicCardListRenderItem<ConfigurationCenterItemsModal>">
         <Card
           :style="{
             '--viewType': '#1890ff',

@@ -150,7 +150,7 @@
           </Authority>
         </section>
       </template>
-      <template #renderItem="{ item }: CardListRenderItem<BigScreenCenterItemsModel>">
+      <template #renderItem="{ item }: BasicCardListRenderItem<BigScreenCenterItemsModel>">
         <Card
           :style="{
             '--viewType': item.viewType === ViewType.PUBLIC_VIEW ? '#1890ff' : '#faad14',

@@ -188,6 +188,12 @@ export const basicInfoForm: FormSchema[] = [
     },
   },
   {
+    field: FieldsEnum.TRANSPORT_TYPE,
+    label: '',
+    component: 'Input',
+    show: false,
+  },
+  {
     field: FieldsEnum.GATEWAY_TB_DEVICE_ID,
     component: 'ApiSelect',
     label: '网关设备',

 <script lang="ts" setup>
-  import { PageWrapper } from '/@/components/Page';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { List, Button, Tooltip, Card, PaginationProps, Image, Popconfirm } from 'ant-design-vue';
-  import { ReloadOutlined } from '@ant-design/icons-vue';
-  import { computed, onMounted, reactive, ref, unref } from 'vue';
-  import {
-    AuthIcon,
-    CardLayoutButton,
-    EnumTableCardMode,
-    ModeSwitchButton,
-  } from '/@/components/Widget';
+  import { Button, Tooltip, Card, Image, Popconfirm } from 'ant-design-vue';
+  import { AuthIcon, EnumTableCardMode, ModeSwitchButton } from '/@/components/Widget';
   import { Authority } from '/@/components/Authority';
   import {
     deviceConfigDelete,
@@ -29,8 +20,10 @@
   import { useModal } from '/@/components/Modal';
   import { useDrawer } from '/@/components/Drawer';
   import productDefault from '/@/assets/icons/product-default.svg';
-  import { useRoute } from 'vue-router';
   import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
+  import { BasicCardList, useCardList } from '/@/components/CardList';
+  import { useRoute } from 'vue-router';
+  import { ref } from 'vue-demi';
 
   defineProps<{
     mode: EnumTableCardMode;
@@ -42,94 +35,44 @@
     SET_DEFAULT = 'setDefault',
     DELETE = 'delete',
   }
+
   const IMAGE_FALLBACK = productDefault;
 
   const { createMessage } = useMessage();
 
-  const [register, { getFieldsValue, setFieldsValue }] = useForm({
-    showAdvancedButton: true,
-    labelWidth: 100,
-    compact: true,
-    baseColProps: { span: 8 },
-    schemas: searchFormSchema,
-    resetFunc: async () => {
-      getDataSource({ name: '' });
+  const { query } = useRoute();
+
+  const disabledDeleteFlag = ref(true);
+
+  const [registerCardList, { reload, getSelectedKeys, clearSelectedKeys }] = useCardList({
+    api: deviceConfigGetQuery,
+    useSearchForm: true,
+    gutter: 4,
+    rowKey: 'id',
+    formConfig: {
+      schemas: searchFormSchema,
+      labelWidth: 100,
+      model: {
+        name: (query as Recordable)?.name ? decodeURIComponent((query as Recordable)?.name) : null,
+      },
     },
-    submitFunc: async () => {
-      getDataSource({ pageSize: pagination.pageSize, page: 1 });
+    selections: {
+      beforeSelectValidate: (record: ProfileRecord) => {
+        return !record.default;
+      },
+      onSelect: (_record, _flag, allSelecteds) => {
+        disabledDeleteFlag.value = !allSelecteds.length;
+      },
     },
   });
 
   const [registerModal, { openModal }] = useModal();
   const [registerDrawer, { openDrawer }] = useDrawer();
 
-  const loading = ref(false);
-
-  const colNumber = ref(5);
-
-  const pagination = reactive<PaginationProps>({
-    size: 'small',
-    showTotal: (total: number) => `共 ${total} 条数据`,
-    current: 1,
-    pageSize: unref(colNumber) * 2,
-    onChange: (page: number) => {
-      pagination.current = page;
-      getDataSource();
-    },
-  });
-
-  const dataSource = ref<ProfileRecord[]>([]);
-
-  const getSelectAllFlag = computed(() => {
-    return unref(dataSource).every((item) => item.checked || item.default);
-  });
-
-  const getCheckedRecord = computed(() => {
-    return unref(dataSource)
-      .filter((item) => item.checked && !item.default)
-      .map((item) => item.id);
-  });
-
-  const getDataSource = async (otherParams: Recordable = {}) => {
-    try {
-      loading.value = true;
-      if (otherParams) {
-        setFieldsValue(otherParams);
-      }
-      const params = getFieldsValue();
-      const pageSize = unref(colNumber) * 2;
-      const { items, total } = await deviceConfigGetQuery({
-        page: pagination.current,
-        pageSize: unref(colNumber) * 2,
-        ...params,
-        ...otherParams,
-      });
-      Object.assign(pagination, { total, pageSize });
-      dataSource.value = items.map((item) => ({ ...item, checked: false }));
-    } catch (error) {
-    } finally {
-      loading.value = false;
-    }
-  };
-
   const handleModeChange = (mode: EnumTableCardMode) => {
     emit('changeMode', mode);
   };
 
-  const handleCheckCard = (item: ProfileRecord) => {
-    if (item.default || item.name == 'default') return;
-    item.checked = !item.checked;
-  };
-
-  const handleSelectAll = () => {
-    dataSource.value = unref(dataSource).map((item) => {
-      return {
-        ...item,
-        checked: !item.default ? !unref(getSelectAllFlag) : false,
-      };
-    });
-  };
-
   const handleCreate = () => {
     openModal(true, {
       isUpdate: false,
@@ -147,11 +90,14 @@
     });
   };
 
-  const handleDelete = async (id: string[]) => {
+  const handleDelete = async (ids?: string[]) => {
     try {
-      await deviceConfigDelete(id);
+      ids = ids || getSelectedKeys();
+      await deviceConfigDelete(ids);
       createMessage.success('删除成功');
-      await getDataSource();
+      clearSelectedKeys();
+      disabledDeleteFlag.value = true;
+      await reload();
     } catch (error) {
       throw error;
     }
@@ -163,155 +109,109 @@
       const data = await setDeviceProfileIsDefaultApi(tbProfileId, 'default', defaultObj);
       if (!data) return createMessage.error('设置该产品为默认失败');
       createMessage.success('设置该产品为默认成功');
-      await getDataSource();
+      await reload();
     } catch (error) {
       throw error;
     }
   };
-
-  const handleCardLayoutChange = () => {
-    pagination.current = 1;
-    getDataSource();
-  };
-
-  const { query: routeParams } = useRoute();
-  onMounted(() => {
-    routeParams.name = decodeURIComponent(
-      ((routeParams as unknown as Recordable) || {})?.name || ''
-    );
-    getDataSource(routeParams);
-  });
 </script>
 
 <template>
-  <PageWrapper dense contentFullHeight contentClass="flex">
-    <section class="flex-auto p-4 w-full profile-list">
-      <div class="flex-auto w-full bg-light-50 dark:bg-dark-900 p-4">
-        <BasicForm @register="register" />
-      </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: colNumber }"
-      >
-        <template #header>
-          <div class="flex gap-3 justify-end">
-            <Authority :value="ProductPermission.CREATE">
-              <Button type="primary" @click="handleCreate">新增产品</Button>
-            </Authority>
-
-            <Button type="primary" @click="handleSelectAll">
-              {{ getSelectAllFlag ? '反选' : '全选' }}
-            </Button>
-            <Authority :value="ProductPermission.DELETE">
-              <Popconfirm
-                title="您确定要批量删除数据"
-                ok-text="确定"
-                cancel-text="取消"
-                @confirm="handleDelete(getCheckedRecord)"
-                :disabled="!getCheckedRecord.length"
-              >
-                <Button type="primary" danger :disabled="!getCheckedRecord.length">
-                  批量删除
-                </Button>
-              </Popconfirm>
-            </Authority>
-
-            <ModeSwitchButton :value="$props.mode" @change="handleModeChange" />
-            <CardLayoutButton v-model:value="colNumber" @change="handleCardLayoutChange" />
-
-            <Tooltip title="刷新">
-              <Button type="primary" @click="getDataSource">
-                <ReloadOutlined :spin="loading" />
-              </Button>
+  <section>
+    <BasicCardList @register="registerCardList">
+      <template #toolbar>
+        <Authority :value="ProductPermission.CREATE">
+          <Button type="primary" @click="handleCreate">新增产品</Button>
+        </Authority>
+
+        <ModeSwitchButton :value="$props.mode" @change="handleModeChange" />
+
+        <Authority :value="ProductPermission.DELETE">
+          <Popconfirm
+            title="您确定要批量删除数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleDelete()"
+            :disabled="disabledDeleteFlag"
+          >
+            <Button type="primary" danger :disabled="disabledDeleteFlag"> 批量删除 </Button>
+          </Popconfirm>
+        </Authority>
+      </template>
+      <template #renderItem="{ item }: BasicCardListRenderItem<ProfileRecord>">
+        <Card hoverable>
+          <template #cover>
+            <div class="h-full w-full !flex justify-center items-center text-center p-1">
+              <Image
+                @click.stop
+                wrapper-class-name="!w-32 !h-32 !flex !items-center"
+                :src="item.image || IMAGE_FALLBACK"
+                placeholder
+                :fallback="IMAGE_FALLBACK"
+              />
+            </div>
+          </template>
+          <template class="ant-card-actions" #actions>
+            <Tooltip title="详情">
+              <AuthIcon
+                :auth="ProductPermission.DETAIL"
+                class="!text-lg"
+                icon="ant-design:eye-outlined"
+                @click.stop="handleShowDetail(item)"
+              />
+            </Tooltip>
+            <Tooltip title="编辑">
+              <AuthIcon
+                :auth="ProductPermission.UPDATE"
+                class="!text-lg"
+                icon="ant-design:form-outlined"
+                @click.stop="handleUpdate(item)"
+                :disabled="item.name == 'default'"
+              />
             </Tooltip>
-          </div>
-        </template>
-        <template #renderItem="{ item }">
-          <List.Item>
-            <Card
-              hoverable
-              @click="handleCheckCard(item)"
-              :class="item.checked ? '!border-blue-500 !border-2' : ''"
-            >
-              <template #cover>
-                <div class="h-full w-full !flex justify-center items-center text-center p-1">
-                  <Image
-                    @click.stop
-                    :height="144"
-                    :src="item.image || IMAGE_FALLBACK"
-                    placeholder
-                    :fallback="IMAGE_FALLBACK"
-                  />
-                </div>
-              </template>
-              <template class="ant-card-actions" #actions>
-                <Tooltip title="详情">
-                  <AuthIcon
-                    :auth="ProductPermission.DETAIL"
-                    class="!text-lg"
-                    icon="ant-design:eye-outlined"
-                    @click.stop="handleShowDetail(item)"
-                  />
-                </Tooltip>
-                <Tooltip title="编辑">
-                  <AuthIcon
-                    :auth="ProductPermission.UPDATE"
-                    class="!text-lg"
-                    icon="ant-design:form-outlined"
-                    @click.stop="handleUpdate(item)"
-                    :disabled="item.name == 'default'"
-                  />
-                </Tooltip>
-                <AuthDropDown
-                  @click.stop
-                  :trigger="['hover']"
-                  :drop-menu-list="[
-                    {
-                      text: '默认',
-                      event: DropMenuEvent.SET_DEFAULT,
-                      icon: 'ant-design:unordered-list-outlined',
-                      onClick: handleSetDefault.bind(null, item),
-                      disabled: item.default,
-                    },
-                    {
-                      text: '删除',
-                      event: DropMenuEvent.DELETE,
-                      auth: ProductPermission.DELETE,
-                      icon: 'ant-design:delete-outlined',
-                      popconfirm: {
-                        title: '是否确认删除操作?',
-                        onConfirm: handleDelete.bind(null, [item.id]),
-                        disabled: item.default,
-                      },
-                      disabled: item.default || item.name == 'default',
-                    },
-                  ]"
-                />
-              </template>
-              <Card.Meta>
-                <template #title>
-                  <span class="truncate"> {{ item.name }} </span>
-                </template>
-                <template #description>
-                  <div class="truncate h-11">
-                    <div class="truncate">{{ DeviceTypeName[item.deviceType] }} </div>
-                    <div class="truncate">{{ item.transportType }} </div>
-                  </div>
-                </template>
-              </Card.Meta>
-            </Card>
-          </List.Item>
-        </template>
-      </List>
-    </section>
-    <DeviceProfileModal @register="registerModal" @success="getDataSource" />
+            <AuthDropDown
+              @click.stop
+              :trigger="['hover']"
+              :drop-menu-list="[
+                {
+                  text: '默认',
+                  event: DropMenuEvent.SET_DEFAULT,
+                  icon: 'ant-design:unordered-list-outlined',
+                  onClick: handleSetDefault.bind(null, item),
+                  disabled: item.default,
+                },
+                {
+                  text: '删除',
+                  event: DropMenuEvent.DELETE,
+                  auth: ProductPermission.DELETE,
+                  icon: 'ant-design:delete-outlined',
+                  popconfirm: {
+                    title: '是否确认删除操作?',
+                    onConfirm: handleDelete.bind(null, [item.id]),
+                    disabled: item.default,
+                  },
+                  disabled: item.default || item.name == 'default',
+                },
+              ]"
+            />
+          </template>
+          <Card.Meta>
+            <template #title>
+              <span class="truncate"> {{ item.name }} </span>
+            </template>
+            <template #description>
+              <div class="truncate h-11">
+                <div class="truncate">{{ DeviceTypeName[item.deviceType] }} </div>
+                <div class="truncate">{{ item.transportType }} </div>
+              </div>
+            </template>
+          </Card.Meta>
+        </Card>
+      </template>
+    </BasicCardList>
+    <DeviceProfileModal @register="registerModal" @success="reload" />
     <DeviceProfileDrawer @register="registerDrawer" />
-  </PageWrapper>
+  </section>
 </template>
 
 <style lang="less" scoped>
@@ -322,8 +222,4 @@
   .profile-list:deep(.ant-card-body) {
     @apply !p-4;
   }
-
-  :deep(.ant-spin-nested-loading) {
-    height: 40rem;
-  }
 </style>

@@ -30,7 +30,7 @@
         <Attribute
           v-if="activeKey === FunctionType.PROPERTIES"
           :openModalMode="openModalMode"
-          :transportType="record.transportType"
+          :transportType="record?.transportType"
           ref="AttrRef"
         />
         <Service
@@ -82,7 +82,7 @@
 
   const isTCPGatewaySubDevice = computed(() => {
     const { record } = props;
-    const { deviceType, transportType } = record;
+    const { deviceType, transportType } = record || {};
     return deviceType === DeviceTypeEnum.SENSOR && transportType === 'TCP';
   });
 

@@ -15,7 +15,7 @@
   import { formSchemas } from '/@/components/Form/src/externalCompns/components/StructForm/config';
   import { TransportTypeEnum } from '../../../../components/TransportDescript/const';
 
-  const props = defineProps<{ openModalMode: OpenModelMode; transportType: string }>();
+  const props = defineProps<{ openModalMode: OpenModelMode; transportType?: string | undefined }>();
 
   const [register, { validate, resetFields, setFieldsValue, setProps }] = useForm({
     labelWidth: 100,

@@ -18,7 +18,9 @@
 
   const [register, { validate, resetFields, setFieldsValue, setProps }] = useForm({
     labelWidth: 100,
-    schemas: serviceSchemas(props.record.transportType === 'TCP'),
+    schemas: serviceSchemas(
+      props.record.transportType === 'TCP' || props.record.ifShowClass === true
+    ),
     actionColOptions: {
       span: 14,
     },

@@ -4,12 +4,6 @@ import { CreateModalDefineExposeType, AwaitPopupWindowReturnDataType } from '../
 import { EdgeData, NodeData } from '../types/node';
 import { DataActionModeEnum } from '/@/enums/toolEnum';
 import { ElementsTypeEnum } from '../enum';
-import { FilterCategoryComponentEnum } from '../enum/category';
-import { useMessage } from '/@/hooks/web/useMessage';
-import { CheckExistenceFieldsNameEnum } from '../enum/formField/filter';
-import { useI18n } from '/@/hooks/web/useI18n';
-
-const { t } = useI18n();
 
 interface OptionsType {
   mode: DataActionModeEnum;
@@ -108,25 +102,12 @@ export function useAwaitPopupWindowBindData(
     );
   };
 
-  const { createMessage } = useMessage();
-
   const handleSubmit = async (extraData: Recordable = {}) => {
     const { flag } = await validate();
     if (!flag) return;
+    await unref(createComponentEl)?.beforeSubmit?.();
     const value = await unref(createComponentEl)?.getFieldsValue?.();
-    const { config } = nodeData.value || {};
-    if (
-      config?.key === FilterCategoryComponentEnum.CHECK_EXISTENCE_FIELDS &&
-      !value?.messageNames &&
-      !value?.messageNames
-    ) {
-      createMessage.warning(
-        `${t(CheckExistenceFieldsNameEnum.MESSAGE_NAMES)}和${t(
-          CheckExistenceFieldsNameEnum.METADATA_NAMES
-        )}最少选填一个`
-      );
-      return true;
-    }
+
     unref(resolveFn)?.({
       flag: true,
       data: handleSubmitData(extraData, value),

@@ -3,11 +3,16 @@
   import { BasicForm, useForm } from '/@/components/Form';
   import { formSchemas } from './create.config';
   import { NodeData } from '../../../types/node';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { CheckExistenceFieldsNameEnum } from '../../../enum/formField/filter';
 
   defineProps<{
     config: NodeData;
   }>();
 
+  const { t } = useI18n();
+
   const [register, { validate, getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: formSchemas,
     showActionButtonGroup: false,
@@ -24,9 +29,22 @@
     setFieldsValue(value);
   };
 
+  const { createMessage } = useMessage();
+  const beforeSubmit = async () => {
+    const value = getFieldsValue();
+    if (!value?.messageNames && !value?.messageNames) {
+      const errorMessage = `${t(CheckExistenceFieldsNameEnum.MESSAGE_NAMES)}和${t(
+        CheckExistenceFieldsNameEnum.METADATA_NAMES
+      )}最少选填一个`;
+      createMessage.warning(errorMessage);
+      return Promise.reject(errorMessage);
+    }
+  };
+
   defineExpose({
     setFieldsValue: setValue,
     getFieldsValue: getValue,
+    beforeSubmit,
   } as CreateModalDefineExposeType);
 </script>
 

@@ -56,8 +56,7 @@
   const handleModalOk = async () => {
     await validate();
     const data = getFieldsValue();
-    const flag = await handleSubmit(data);
-    if (flag) return;
+    await handleSubmit(data);
     resetFieldsValue();
   };
 

@@ -15,6 +15,8 @@ export interface CreateModalDefineExposeType {
   validate?: () => Promise<{ flag: boolean; error?: RuleError }>;
   getFieldsValue?: () => Promise<Recordable>;
   setFieldsValue?: (value?: DefaultNodeConfig, nodeData?: NodeData) => void;
+  clearValidate?: (name?: string | string[] | undefined) => Promise<void>;
+  beforeSubmit?: () => Promise<any>;
 }
 
 export interface CreateModalDefineEmitType {

@@ -137,9 +137,10 @@ export const getFormSchemas = (hasAlarmNotify: Ref<boolean>): FormSchema[] => {
     },
     {
       field: FormFieldsEnum.ENABLE_CLEAR_RULE,
-      label: '',
+      label: ' ',
       component: 'Checkbox',
       ifShow: ({ model }) => model[FormFieldsEnum.OUT_TARGET] === ExecutionActionEnum.MSG_NOTIFY,
+      labelWidth: 24,
       renderComponentContent: () => ({
         default: () => [
           h('span', FormFieldsNameEnum.ENABLE_CLEAR_RULE),

@@ -14,7 +14,7 @@ import { ConditionItemType } from '../ConditionFilter/type';
 export function useFlipFlopData(
   flipFlopListRef: Ref<FlipFlopItemType[]>
 ): DefineComponentsBasicExpose<FlipFlopConditionType[]> {
-  const getEventTriggerCOndition = (
+  const getEventTriggerCondition = (
     basicRecord: FlipFlopFormRecordType,
     _flipFlopItem: FlipFlopItemType
   ): ConditionItemType[] => {
@@ -23,7 +23,7 @@ export function useFlipFlopData(
       {
         key: {
           type: DeviceTriggerTypeEum.DEVICE_EVENT,
-          key: deviceEventTriggerKey,
+          key: 'eventIdentifier',
         },
         valueType: TriggerValueTypeEnum.STRING,
         predicate: {
@@ -41,7 +41,7 @@ export function useFlipFlopData(
     const { conditionType } = basicRecord;
     return conditionType === DeviceTriggerTypeEum.TIME_SERIES
       ? flipFlopItem.conditionRef?.getFieldsValue() || []
-      : getEventTriggerCOndition(basicRecord, flipFlopItem);
+      : getEventTriggerCondition(basicRecord, flipFlopItem);
   };
 
   const crateFlipFlopCondition = (flipFlopItem: FlipFlopItemType): FlipFlopConditionType => {
@@ -106,6 +106,7 @@ export function useFlipFlopData(
         const { key, valueType } = firstItem;
         const { type, unit, predicate } = condition.spec;
         const { defaultValue } = predicate || {};
+        const { value } = firstItem.predicate;
 
         const record = {
           ...data,
@@ -122,7 +123,7 @@ export function useFlipFlopData(
 
         if (key.type === DeviceTriggerTypeEum.DEVICE_EVENT) {
           Object.assign(record, {
-            [FormFieldEnum.DEVICE_EVENT_TRIGGER_KEY]: key.key,
+            [FormFieldEnum.DEVICE_EVENT_TRIGGER_KEY]: value.defaultValue,
             [FormFieldEnum.CONDITION_KEY]: null,
           });
         }

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

@@ -154,7 +154,7 @@
           <Button type="primary" @click="handleOpenDetailModal">新增看板</Button>
         </Authority>
       </template>
-      <template #renderItem="{ item }: CardListRenderItem<DataBoardRecord>">
+      <template #renderItem="{ item }: BasicCardListRenderItem<DataBoardRecord>">
         <Card class="data-card cursor-pointer">
           <template #title>
             <div class="font-bold">{{ item.name }}</div>

@@ -20,7 +20,7 @@ export interface DefineComponentsBasicExpose<T = Recordable> {
 }
 
 declare global {
-  interface CardListRenderItem<T = Recordable & { checked?: boolean }> {
+  interface BasicCardListRenderItem<T = Recordable> {
     item: T;
     totalHeight: number;
   }