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

Feat/add card list component

See merge request yunteng/thingskit-front!1051

@@ -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 {

-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);
+  }
+
+  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> {
+  customCheckedStyle?: boolean;
+  beforeSelectValidate?: (record: Recordable) => boolean;
   onSelect?: (record: T, selected: boolean) => any;
-  onSelectAll: (selectedRecords: T[]) => any;
-  onSelectInvert: (selectedRecords: T[]) => any;
+  onSelectAll?: (selectedRecords: T[]) => any;
 }

@@ -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',

 <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,9 @@
   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';
 
   defineProps<{
     mode: EnumTableCardMode;
@@ -42,94 +34,39 @@
     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 [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;
+      },
     },
   });
 
   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 +84,13 @@
     });
   };
 
-  const handleDelete = async (id: string[]) => {
+  const handleDelete = async () => {
     try {
-      await deviceConfigDelete(id);
+      const ids = getSelectedKeys();
+      await deviceConfigDelete(ids);
       createMessage.success('删除成功');
-      await getDataSource();
+      clearSelectedKeys();
+      await reload();
     } catch (error) {
       throw error;
     }
@@ -163,155 +102,108 @@
       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"
+          >
+            <Button type="primary" danger> 批量删除 </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
+                class="!w-32"
+                :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 +214,4 @@
   .profile-list:deep(.ant-card-body) {
     @apply !p-4;
   }
-
-  :deep(.ant-spin-nested-loading) {
-    height: 40rem;
-  }
 </style>

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