perf: 优化产品页面使用组件

@@ -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';
@@ -96,6 +96,7 @@
     clearSelectedKeys,
     getSelectedKeys,
     getSelectedRecords,
+    getSelections,
   } = useCardListSelected(getDataSourceRef, getProps, {
     updateTableDataRecord,
     findCardDataRecord,
@@ -142,6 +143,7 @@
     clearSelectedKeys,
     getSelectedKeys,
     getSelectedRecords,
+    getSelections,
   };
 
   function setProps(props: Partial<BasicCardListPropsType> = {}) {
@@ -177,13 +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">
-              <Button v-if="getProps.selections" @click="selectAllToggle" type="primary">
-                {{ selectedKeys.length === getDataSourceRef.length ? '反选' : '全选' }}
-              </Button>
+              <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">
@@ -193,7 +203,7 @@
             </div>
           </section>
         </template>
-        <template #renderItem="{ item }: CardListRenderItem">
+        <template #renderItem="{ item }: BasicCardListRenderItem<any>">
           <List.Item
             :class="selectedKeys.includes(item[getRowKey]) ? selectedClass : ''"
             @click="handlerSelected($event, item)"

@@ -8,7 +8,7 @@ import { PaginationProps } from 'ant-design-vue';
 import { FetchParams } from './useCardListData';
 import { tryOnUnmounted } from '@vueuse/core';
 
-type UseTableMethod = CardListActionType & {
+type UseCardListMethod = CardListActionType & {
   getForm: () => FormActionType;
 };
 
@@ -49,46 +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 getTableInstance().selectedAll();
+      return getCardListInstance().selectedAll();
     },
     clearSelectedKeys: () => {
-      return getTableInstance().clearSelectedKeys();
+      return getCardListInstance().clearSelectedKeys();
     },
     getSelectedKeys: () => {
-      return getTableInstance().getSelectedKeys();
+      return getCardListInstance().getSelectedKeys();
     },
     getSelectedRecords: () => {
-      return getTableInstance().getSelectedRecords();
+      return getCardListInstance().getSelectedRecords();
+    },
+    getSelections: () => {
+      return getCardListInstance().getSelections();
     },
   };
 

 import { ComputedRef, computed, ref, toRaw, unref, watch } from 'vue';
 import { BasicCardListPropsType, CardListSelectionsType, UseCardListDataType } from '../types';
-import { isBoolean } from '/@/utils/is';
+import { isBoolean, isFunction } from '/@/utils/is';
 import { cloneDeep } from 'lodash-es';
 
 export const CHECKED_FIELD = 'CARD_LIST_CHECKED_STATUS';
@@ -23,18 +23,27 @@ export function useCardListSelected(
 
   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)
   );
 
   const getShouldUseDefaultStyle = computed(
-    () =>
-      isBoolean(unref(propsRef).selections) ||
-      !(unref(propsRef).selections as CardListSelectionsType).customCheckedStyle
+    () => unref(getSelectionsRef).enabled && !unref(getSelectionsRef).customCheckedStyle
   );
 
   watch(
-    () => unref(propsRef).selections,
+    getSelectionsRef,
     () => {
       selectedClass.value =
         isBoolean(unref(propsRef).selections) ||
@@ -48,24 +57,33 @@ export function useCardListSelected(
   );
 
   function handlerSelected(_event: MouseEvent, record: Recordable) {
-    if (!unref(propsRef).selections) return;
+    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 (isBoolean(unref(propsRef).selections)) return;
+    if (!unref(getSelectionsRef).onSelect) return;
 
-    (unref(propsRef).selections as CardListSelectionsType)?.onSelect?.(record, !!~index);
+    unref(getSelectionsRef)?.onSelect?.(record, !!~index);
   }
 
   function selectedAll() {
-    selectedKeys.value = unref(getDataSourceRef).map((item) => item[unref(getRowKey)]);
+    selectedKeys.value = unref(getDataSourceRef)
+      .filter(
+        (item) =>
+          isFunction(unref(getSelectionsRef).beforeSelectValidate) &&
+          unref(getSelectionsRef).beforeSelectValidate?.(item)
+      )
+      .map((item) => item[unref(getRowKey)]);
 
-    if (isBoolean(unref(propsRef).selections)) return;
+    if (!unref(getSelectionsRef).onSelect) return;
 
-    (unref(propsRef).selections as CardListSelectionsType)?.onSelectAll?.(
-      toRaw(unref(getDataSourceRef))
-    );
+    unref(getSelectionsRef)?.onSelectAll?.(toRaw(unref(getDataSourceRef)));
   }
 
   function clearSelectedKeys() {
@@ -87,11 +105,16 @@ export function useCardListSelected(
       : selectedAll();
   }
 
+  function getSelections() {
+    return unref(getSelectionsRef);
+  }
+
   return {
     selectedKeys,
     selectedClass,
     getShouldUseDefaultStyle,
     getHasSelectedRecordStatus,
+    getSelections,
     handlerSelected,
     selectedAll,
     selectAllToggle,

@@ -52,6 +52,7 @@ export interface CardListActionType {
   clearSelectedKeys: UseCardListSelected['clearSelectedKeys'];
   getSelectedKeys: UseCardListSelected['getSelectedKeys'];
   getSelectedRecords: UseCardListSelected['getSelectedRecords'];
+  getSelections: UseCardListSelected['getSelections'];
 }
 
 export interface CardListEmitType {
@@ -61,6 +62,7 @@ export interface CardListEmitType {
 
 export interface CardListSelectionsType<T = Recordable> {
   customCheckedStyle?: boolean;
+  beforeSelectValidate?: (record: Recordable) => boolean;
   onSelect?: (record: T, selected: boolean) => any;
-  onSelectAll: (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;
   }