perf: 优化模版组态页面,使用卡片列表组件

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

-<template>
-  <div>
-    <PageWrapper dense contentFullHeight contentClass="flex">
-      <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
-      <BasicTable
-        style="flex: auto"
-        :clickToRowSelect="false"
-        @register="registerTable"
-        :searchInfo="searchInfo"
-        class="w-3/4 xl:w-4/5"
-      >
-        <template #platform="{ record }">
-          <Tag :color="record.platform === Platform.PHONE ? 'cyan' : 'blue'">
-            {{ record.platform === Platform.PHONE ? '移动端' : 'PC端' }}
-          </Tag>
-        </template>
-        <template #toolbar>
-          <Authority value="api:yt:configuration:center:post">
-            <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增组态 </a-button>
-          </Authority>
-          <Authority value="api:yt:configuration:center:delete">
-            <Popconfirm
-              title="您确定要批量删除数据"
-              ok-text="确定"
-              cancel-text="取消"
-              @confirm="handleDeleteOrBatchDelete(null)"
-            >
-              <a-button type="primary" color="error" :disabled="hasBatchDelete">
-                批量删除
-              </a-button>
-            </Popconfirm>
-          </Authority>
-        </template>
-        <template #action="{ record }">
-          <TableAction
-            :actions="[
-              {
-                label: '设计',
-                auth: 'api:yt:configuration:center:get_configuration_info:get',
-                icon: 'clarity:note-edit-line',
-                onClick: handleDesign.bind(null, record),
-              },
-              {
-                label: '预览',
-                auth: 'api:yt:configuration:center:get_configuration_info:get',
-                icon: 'ant-design:eye-outlined',
-                onClick: handlePreview.bind(null, record),
-              },
-              {
-                label: '编辑',
-                auth: 'api:yt:configuration:center:update',
-                icon: 'clarity:note-edit-line',
-                onClick: handleCreateOrEdit.bind(null, record),
-              },
-              {
-                label: '删除',
-                auth: 'api:yt:configuration:center:delete',
-                icon: 'ant-design:delete-outlined',
-                color: 'error',
-                popConfirm: {
-                  title: '是否确认删除',
-                  confirm: handleDeleteOrBatchDelete.bind(null, record),
-                },
-              },
-            ]"
-          />
-        </template>
-      </BasicTable>
-    </PageWrapper>
-    <ContactDrawer @register="registerDrawer" @success="handleSuccess" />
-  </div>
-</template>
-
-<script lang="ts">
-  import { defineComponent, reactive, nextTick } from 'vue';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { PageWrapper } from '/@/components/Page';
-  import { useDrawer } from '/@/components/Drawer';
-  import ContactDrawer from './ConfigurationCenterDrawer.vue';
-  import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
-  import { searchFormSchema, columns, Platform } from './center.data';
-  import {
-    getPage,
-    deleteConfigurationCenter,
-  } from '/@/api/configuration/center/configurationCenter';
-  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-  import { isDevMode } from '/@/utils/env';
-  import { Authority } from '/@/components/Authority';
-  import { Popconfirm } from 'ant-design-vue';
-  import { Tag } from 'ant-design-vue';
-  import { useGlobSetting } from '/@/hooks/setting';
-  export default defineComponent({
-    components: {
-      PageWrapper,
-      OrganizationIdTree,
-      BasicTable,
-      TableAction,
-      ContactDrawer,
-      Authority,
-      Popconfirm,
-      Tag,
-    },
-    setup() {
-      const { configurationPrefix } = useGlobSetting();
-      const isDev = isDevMode();
-      const searchInfo = reactive<Recordable>({});
-      const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
-      // 表格hooks
-      const [registerTable, { reload, setProps }] = useTable({
-        title: '组态中心列表',
-        api: getPage,
-        columns,
-        clickToRowSelect: false,
-        formConfig: {
-          labelWidth: 120,
-          schemas: searchFormSchema,
-          resetFunc: resetFn,
-        },
-        showIndexColumn: false,
-        useSearchForm: true,
-        showTableSetting: true,
-        bordered: true,
-        rowKey: 'id',
-        actionColumn: {
-          width: 200,
-          title: '操作',
-          dataIndex: 'action',
-          slots: { customRender: 'action' },
-          fixed: 'right',
-        },
-      });
-      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
-        deleteConfigurationCenter,
-        handleSuccess,
-        setProps
-      );
-      nextTick(() => {
-        setProps(selectionOptions);
-      });
-
-      // 弹框
-      const [registerDrawer, { openDrawer }] = useDrawer();
-
-      // 刷新
-      function handleSuccess() {
-        reload();
-      }
-      // 新增或编辑
-      const handleCreateOrEdit = (record: Recordable | null) => {
-        if (record) {
-          openDrawer(true, {
-            isUpdate: true,
-            record,
-          });
-        } else {
-          openDrawer(true, {
-            isUpdate: false,
-          });
-        }
-      };
-      // 树形选择器
-      const handleSelect = (organizationId: string) => {
-        searchInfo.organizationId = organizationId;
-        handleSuccess();
-      };
-
-      const handlePreview = (record: Recordable | null) => {
-        window.open(
-          `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${
-            record!.id
-          }&lightbox=1`
-        );
-      };
-      const handleDesign = (record: Recordable | null) => {
-        window.open(
-          `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`
-        );
-      };
-
-      return {
-        Platform,
-        searchInfo,
-        hasBatchDelete,
-        handleCreateOrEdit,
-        handleDeleteOrBatchDelete,
-        handleSelect,
-        handleSuccess,
-        handlePreview,
-        handleDesign,
-        registerTable,
-        registerDrawer,
-        organizationIdTreeRef,
-      };
-    },
-  });
-</script>

-<template>
-  <div>
-    <PageWrapper dense contentFullHeight contentClass="flex">
-      <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
-      <BasicTable
-        style="flex: auto"
-        :clickToRowSelect="false"
-        @register="registerTable"
-        :searchInfo="searchInfo"
-        class="w-3/4 xl:w-4/5"
-      >
-        <template #platform="{ record }">
-          <Tag :color="record.platform === Platform.PHONE ? 'cyan' : 'blue'">
-            {{ record.platform === Platform.PHONE ? '移动端' : 'PC端' }}
-          </Tag>
-        </template>
-        <template #toolbar>
-          <Authority value="api:yt:configuration:center:post">
-            <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增组态 </a-button>
-          </Authority>
-          <Authority value="api:yt:configuration:center:delete">
-            <Popconfirm
-              title="您确定要批量删除数据"
-              ok-text="确定"
-              cancel-text="取消"
-              @confirm="handleDeleteOrBatchDelete(null)"
-            >
-              <a-button type="primary" color="error" :disabled="hasBatchDelete">
-                批量删除
-              </a-button>
-            </Popconfirm>
-          </Authority>
-        </template>
-        <template #action="{ record }">
-          <TableAction
-            :actions="[
-              {
-                label: '设计',
-                auth: 'api:yt:configuration:center:get_configuration_info:get',
-                icon: 'clarity:note-edit-line',
-                onClick: handleDesign.bind(null, record),
-              },
-              {
-                label: '预览',
-                auth: 'api:yt:configuration:center:get_configuration_info:get',
-                icon: 'ant-design:eye-outlined',
-                onClick: handlePreview.bind(null, record),
-              },
-              {
-                label: '编辑',
-                auth: 'api:yt:configuration:center:update',
-                icon: 'clarity:note-edit-line',
-                onClick: handleCreateOrEdit.bind(null, record),
-              },
-              {
-                label: '删除',
-                auth: 'api:yt:configuration:center:delete',
-                icon: 'ant-design:delete-outlined',
-                color: 'error',
-                popConfirm: {
-                  title: '是否确认删除',
-                  confirm: handleDeleteOrBatchDelete.bind(null, record),
-                },
-              },
-            ]"
-          />
-        </template>
-      </BasicTable>
-    </PageWrapper>
-    <ContactDrawer @register="registerDrawer" @success="handleSuccess" />
-  </div>
-</template>
-
-<script lang="ts">
-  import { defineComponent, reactive, nextTick } from 'vue';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { PageWrapper } from '/@/components/Page';
-  import { useDrawer } from '/@/components/Drawer';
-  import ContactDrawer from './ConfigurationCenterDrawer.vue';
-  import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
-  import { searchFormSchema, columns } from './center.data';
-  import { Platform } from '../center/center.data';
-  import {
-    getPage,
-    deleteConfigurationCenter,
-  } from '/@/api/configuration/center/configurationCenter';
-  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-  import { isDevMode } from '/@/utils/env';
-  import { Authority } from '/@/components/Authority';
-  import { Popconfirm } from 'ant-design-vue';
-  import { Tag } from 'ant-design-vue';
-  import { useGlobSetting } from '/@/hooks/setting';
-  export default defineComponent({
-    components: {
-      PageWrapper,
-      OrganizationIdTree,
-      BasicTable,
-      TableAction,
-      ContactDrawer,
-      Authority,
-      Popconfirm,
-      Tag,
-    },
-    setup() {
-      const { configurationPrefix } = useGlobSetting();
-      const isDev = isDevMode();
-      const searchInfo = reactive<Recordable>({});
-      const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
-      // 表格hooks
-      const [registerTable, { reload, setProps }] = useTable({
-        title: '组态中心列表',
-        api: getPage,
-        columns,
-        clickToRowSelect: false,
-        formConfig: {
-          labelWidth: 120,
-          schemas: searchFormSchema,
-          resetFunc: resetFn,
-        },
-        showIndexColumn: false,
-        useSearchForm: true,
-        showTableSetting: true,
-        bordered: true,
-        rowKey: 'id',
-        actionColumn: {
-          width: 200,
-          title: '操作',
-          dataIndex: 'action',
-          slots: { customRender: 'action' },
-          fixed: 'right',
-        },
-      });
-      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
-        deleteConfigurationCenter,
-        handleSuccess,
-        setProps
-      );
-      nextTick(() => {
-        setProps(selectionOptions);
-      });
-
-      // 弹框
-      const [registerDrawer, { openDrawer }] = useDrawer();
-
-      // 刷新
-      function handleSuccess() {
-        reload();
-      }
-      // 新增或编辑
-      const handleCreateOrEdit = (record: Recordable | null) => {
-        if (record) {
-          openDrawer(true, {
-            isUpdate: true,
-            record,
-          });
-        } else {
-          openDrawer(true, {
-            isUpdate: false,
-          });
-        }
-      };
-      // 树形选择器
-      const handleSelect = (organizationId: string) => {
-        searchInfo.organizationId = organizationId;
-        handleSuccess();
-      };
-
-      const handlePreview = (record: Recordable | null) => {
-        window.open(
-          `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${
-            record!.id
-          }&lightbox=1`
-        );
-      };
-      const handleDesign = (record: Recordable | null) => {
-        window.open(
-          `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`
-        );
-      };
-
-      return {
-        Platform,
-        searchInfo,
-        hasBatchDelete,
-        handleCreateOrEdit,
-        handleDeleteOrBatchDelete,
-        handleSelect,
-        handleSuccess,
-        handlePreview,
-        handleDesign,
-        registerTable,
-        registerDrawer,
-        organizationIdTreeRef,
-      };
-    },
-  });
-</script>

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

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