Merge branch 'local_dev_ft_wip_configuation' into 'main_dev'

模板组态的修改

See merge request yunteng/thingskit-front!972

@@ -8,10 +8,10 @@ VITE_GLOB_PUBLIC_PATH = /
 # Please note that no line breaks
 
 # 本地
-VITE_PROXY = [["/api","http://localhost:8080/api"],["/thingskit-scada","http://localhost:5173/thingskit-scada"],["/large-designer", "http://localhost:5555/large-designer/"]]
+VITE_PROXY = [["/api","http://10.0.152.126:8080/api"],["/thingskit-scada","http://localhost:5173/thingskit-scada"],["/large-designer", "http://localhost:5555/large-designer/"]]
 
 # 实时数据的ws地址
-VITE_GLOB_WEB_SOCKET = ws://localhost:8080/api/ws/plugins/telemetry?token=
+VITE_GLOB_WEB_SOCKET = ws://10.152.126:8080/api/ws/plugins/telemetry?token=
 
 # Delete console
 VITE_GLOB_DROP_CONSOLE = true

@@ -14,6 +14,7 @@ export interface ConfigurationCenterItemsModal {
 export type queryPageParams = BasicPageParams & {
   name?: Nullable<string>;
   organizationId?: Nullable<number>;
+  isTemplate?: number;
 };
 
 export interface ConfigurationModal {

@@ -41,6 +41,7 @@ import ApiSelectScrollLoad from './components/ApiSelectScrollLoad.vue';
 import InputGroup from './components/InputGroup.vue';
 import RegisterAddressInput from '/@/views/task/center/components/PollCommandInput/RegisterAddressInput.vue';
 import ExtendDesc from '/@/components/Form/src/externalCompns/components/ExtendDesc/index.vue';
+import DeviceProfileForm from '/@/components/Form/src/externalCompns/components/DeviceProfileForm/index.vue';
 
 const componentMap = new Map<ComponentType, Component>();
 
@@ -89,6 +90,7 @@ componentMap.set('ApiSelectScrollLoad', ApiSelectScrollLoad);
 componentMap.set('InputGroup', InputGroup);
 componentMap.set('RegisterAddressInput', RegisterAddressInput);
 componentMap.set('ExtendDesc', ExtendDesc);
+componentMap.set('DeviceProfileForm', DeviceProfileForm);
 
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);

+<template>
+  <div v-for="(param, index) in dynamicInput.params" :key="index" style="display: flex">
+    <a-input placeholder="产品" v-model:value="param.label" :disabled="true" />
+    <Select
+      placeholder="请选择设备"
+      v-model:value="param.value"
+      style="width: 100%"
+      v-bind="createPickerSearch()"
+      mode="multiple"
+      labelInValue
+    />
+    <MinusCircleOutlined
+      v-if="dynamicInput.params.length > min && !disabled"
+      class="dynamic-delete-button"
+      @click="remove(param)"
+      style="width: 50px"
+    />
+  </div>
+</template>
+<script lang="ts" name="DeviceProfileForm">
+  import { MinusCircleOutlined } from '@ant-design/icons-vue';
+  import { defineComponent, reactive, UnwrapRef, watchEffect } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { isEmpty } from '/@/utils/is';
+  import { Select } from 'ant-design-vue';
+  import { createPickerSearch } from '/@/utils/pickerSearch';
+
+  interface Params {
+    label: string;
+    value: string;
+  }
+
+  export default defineComponent({
+    name: 'DeviceProfileForm',
+    components: {
+      MinusCircleOutlined,
+      Select,
+    },
+    //--------------不继承Antd Design Vue Input的所有属性 否则控制台报大片警告--------------
+    inheritAttrs: false,
+    props: {
+      value: propTypes.object.def({}),
+      //自定义删除按钮多少才会显示
+      min: propTypes.integer.def(0),
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    emits: ['change', 'update:value'],
+    setup(props, { emit }) {
+      //input动态数据
+      const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] });
+
+      //删除Input
+      const remove = (item: Params) => {
+        let index = dynamicInput.params.indexOf(item);
+        if (index !== -1) {
+          dynamicInput.params.splice(index, 1);
+        }
+        emitChange();
+      };
+
+      //监听传入数据value
+      watchEffect(() => {
+        initVal();
+      });
+
+      /**
+       * 初始化数值
+       */
+      function initVal() {
+        dynamicInput.params = [];
+        if (props.value) {
+          let jsonObj = props.value;
+          Object.keys(jsonObj).forEach((key) => {
+            dynamicInput.params.push({ label: key, value: jsonObj[key] });
+          });
+        }
+      }
+
+      /**
+       * 数值改变
+       */
+      function emitChange() {
+        let obj = {};
+        if (dynamicInput.params.length > 0) {
+          dynamicInput.params.forEach((item) => {
+            obj[item.label] = item.value;
+          });
+        }
+        emit('change', isEmpty(obj) ? '' : obj);
+        emit('update:value', isEmpty(obj) ? '' : obj);
+      }
+
+      return {
+        dynamicInput,
+        emitChange,
+        remove,
+        createPickerSearch,
+      };
+    },
+  });
+</script>
+<style scoped>
+  .dynamic-delete-button {
+    cursor: pointer;
+    position: relative;
+    top: 4px;
+    font-size: 24px;
+    color: #999;
+    transition: all 0.3s;
+  }
+
+  .dynamic-delete-button:hover {
+    color: #777;
+  }
+
+  .dynamic-delete-button[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+</style>

@@ -137,4 +137,5 @@ export type ComponentType =
   | 'CorrelationFilters'
   | 'RelationsQuery'
   | 'CredentialsCard'
-  | 'ApiComplete';
+  | 'ApiComplete'
+  | 'DeviceProfileForm';

@@ -7,36 +7,88 @@
     width="30%"
     @ok="handleSubmit"
   >
-    <BasicForm @register="registerForm" />
+    <BasicForm @register="registerForm">
+      <!-- 模板选择 -->
+      <template #templateId="{ model }">
+        <Select
+          v-model:value="model['templateId']"
+          placeholder="请选择模板"
+          style="width: 100%"
+          :options="selectTemplateOptions"
+          @change="handleTemplateChange"
+          v-bind="createPickerSearch()"
+          :disabled="templateDisabled"
+        />
+      </template>
+      <!-- 产品选择 -->
+      <template #productIds="{ model }">
+        <SelectDeviceProfile
+          v-if="model['templateId']"
+          ref="selectDeviceProfileRef"
+          :selectOptions="selectOptions"
+          :organizationId="model['organizationId']"
+        />
+      </template>
+    </BasicForm>
   </BasicDrawer>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, computed, unref } from 'vue';
+  import { defineComponent, ref, computed, unref, Ref, onMounted, nextTick } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
+  import { Select } from 'ant-design-vue';
   import { formSchema, PC_DEFAULT_CONTENT, PHONE_DEFAULT_CONTENT, Platform } from './center.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { saveOrUpdateConfigurationCenter } from '/@/api/configuration/center/configurationCenter';
+  import {
+    saveOrUpdateConfigurationCenter,
+    getPage,
+  } from '/@/api/configuration/center/configurationCenter';
   import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
   import { buildUUID } from '/@/utils/uuid';
+  import SelectDeviceProfile from './components/SelectDeviceProfile.vue';
+  import { createPickerSearch } from '/@/utils/pickerSearch';
+  import type { queryPageParams } from '/@/api/configuration/center/model/configurationCenterModal';
+  import { getDeviceProfile } from '/@/api/alarm/position';
 
   export default defineComponent({
     name: 'ConfigurationDrawer',
-    components: { BasicDrawer, BasicForm },
+    components: { BasicDrawer, BasicForm, SelectDeviceProfile, Select },
     emits: ['success', 'register'],
     setup(_, { emit }) {
       const isUpdate = ref(true);
 
-      const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
+      const selectDeviceProfileRef = ref<InstanceType<typeof SelectDeviceProfile>>();
+
+      const [registerForm, { validate, setFieldsValue, resetFields, updateSchema }] = useForm({
         labelWidth: 120,
         schemas: formSchema,
         showActionButtonGroup: false,
       });
 
+      const updateEnableTemplate = async (enable: number, disabled: boolean) => {
+        await setFieldsValue({
+          enableTemplate: enable,
+        });
+        await updateSchema({
+          field: 'enableTemplate',
+          componentProps: {
+            disabled,
+            checkedValue: 1,
+            unCheckedValue: 0,
+            checkedChildren: '开',
+            unCheckedChildren: '关',
+          },
+        });
+      };
+
       const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+        await nextTick();
         await resetFields();
         setDrawerProps({ confirmLoading: false });
         isUpdate.value = !!data?.isUpdate;
+        selectDeviceProfileRef.value?.retValue();
+        await updateEnableTemplate(0, false);
+        templateDisabled.value = false;
         if (unref(isUpdate)) {
           if (data.record.thumbnail) {
             data.record.thumbnail = [
@@ -49,9 +101,62 @@
             Reflect.deleteProperty(data.record, 'organizationId');
             await setFieldsValue(data.record);
           }
+          // 业务 编辑如果有templateId 则启用模板开关禁用,模板不能选择，产品和设备可以选择
+          if (Reflect.get(data.record, 'templateId')) {
+            await updateEnableTemplate(1, true);
+            templateDisabled.value = true;
+            //回显产品和设备
+            const { productAndDevice } = data.record;
+            selectOptions.value = productAndDevice?.map((item) => ({
+              label: item.name,
+              value: item.profileId,
+            }));
+            selectDeviceProfileRef.value?.setValue(productAndDevice);
+          } else {
+            const productAndDevice = data.record['productAndDevice'];
+            setFieldsValue({
+              productId: productAndDevice?.map((item) => item.profileId),
+            });
+          }
         }
       });
 
+      //新增修改
+      const templateDisabled = ref(false);
+      onMounted(() => {
+        getTemplate({
+          page: 1,
+          pageSize: 30,
+        });
+      });
+
+      const selectTemplateOptions: Ref<any[]> = ref([]);
+      const getTemplate = async (params: queryPageParams) => {
+        const { items } = await getPage({ ...params, isTemplate: 1 });
+        selectTemplateOptions.value = items.map((item) => ({
+          ...item,
+          label: item.name,
+          value: item.id,
+        }));
+      };
+
+      const selectOptions: Ref<any[]> = ref([]);
+
+      const handleTemplateChange = async (_, option) => {
+        const { productAndDevice } = option;
+        if (!productAndDevice) return;
+        selectOptions.value = productAndDevice.map((item) => ({
+          label: item.name,
+          value: item.profileId,
+        }));
+        await nextTick();
+        // 赋值
+        selectDeviceProfileRef.value?.setFieldsValue(
+          productAndDevice.map((item) => ({ label: item.name, value: item.profileId }))
+        );
+      };
+      //
+
       const getTitle = computed(() => (!unref(isUpdate) ? '新增组态中心' : '编辑组态中心'));
 
       const getDefaultContent = (platform: Platform) => {
@@ -61,10 +166,44 @@
         return PHONE_DEFAULT_CONTENT;
       };
 
+      // 获取产品
+      const getCurrentAllProduct = async (products: string[]) => {
+        const resp = (await getDeviceProfile()) as any;
+        if (!resp) return;
+        const values = resp?.map((item) => ({ name: item.name, profileId: item.id }));
+        return values.filter((item) => products?.includes(item.profileId));
+      };
+
       async function handleSubmit() {
         try {
           const { createMessage } = useMessage();
           const values = await validate();
+          if (!values) return;
+          const selectDevice = selectDeviceProfileRef.value?.getSelectDevice();
+          if (values['enableTemplate'] === 1) {
+            if (!values['templateId']) return createMessage.error('未选择模板');
+            // 业务 启用模板，产品和设备必填
+            if (values['templateId']) {
+              values.templateId = values['templateId'];
+              if (Array.isArray(selectDevice) && selectDevice.length == 0)
+                return createMessage.error('您已经选择了模板，但产品或者设备未选择');
+              if (
+                selectDevice?.some(
+                  (item) =>
+                    !item.name ||
+                    item.deviceList.includes('' || undefined) ||
+                    item.deviceList.length == 0
+                )
+              ) {
+                return createMessage.error('您已经选择了模板，但产品或者设备未选择');
+              }
+              values.productAndDevice = selectDevice;
+            }
+          } else {
+            const { productId } = values;
+            values.productAndDevice = await getCurrentAllProduct(productId);
+            Reflect.deleteProperty(values, 'productId');
+          }
           if (Reflect.has(values, 'thumbnail')) {
             const file = (values.thumbnail || []).at(0) || {};
             values.thumbnail = file.url || null;
@@ -87,6 +226,12 @@
         registerDrawer,
         registerForm,
         handleSubmit,
+        selectOptions,
+        selectTemplateOptions,
+        handleTemplateChange,
+        createPickerSearch,
+        selectDeviceProfileRef,
+        templateDisabled,
       };
     },
   });

@@ -83,6 +83,7 @@ export const searchFormSchema: FormSchema[] = [
   },
 ];
 
+// 表单
 export const formSchema: FormSchema[] = [
   {
     field: 'thumbnail',
@@ -112,14 +113,9 @@ export const formSchema: FormSchema[] = [
         onPreview: (fileList: FileItem) => {
           createImgPreview({ imageList: [fileList.url!] });
         },
-        // showUploadList: {
-        //   showDownloadIcon: true,
-        //   showRemoveIcon: true,
-        // },
       };
     },
   },
-
   {
     field: 'name',
     label: '组态名称',
@@ -137,17 +133,76 @@ export const formSchema: FormSchema[] = [
     component: 'OrgTreeSelect',
   },
   {
+    field: 'platform',
+    label: '平台',
+    required: true,
+    component: 'RadioGroup',
+    defaultValue: Platform.PC,
+    componentProps: {
+      defaultValue: Platform.PC,
+      options: [
+        { label: 'PC端', value: Platform.PC },
+        { label: '移动端', value: Platform.PHONE },
+      ],
+    },
+  },
+  {
+    field: 'enableTemplate', //前端控制
+    label: '启用模版',
+    component: 'Switch',
+    defaultValue: 0,
+    componentProps: ({ formActionType }) => {
+      const { setFieldsValue } = formActionType;
+      return {
+        checkedValue: 1,
+        unCheckedValue: 0,
+        checkedChildren: '开',
+        unCheckedChildren: '关',
+        onChange() {
+          setFieldsValue({
+            productIds: [],
+          });
+        },
+      };
+    },
+  },
+  {
     field: 'isTemplate',
-    label: '模版',
+    label: '默认启用模版',
     component: 'Switch',
     defaultValue: 0,
     componentProps: {
       checkedValue: 1,
       unCheckedValue: 0,
     },
+    show: false,
   },
   {
-    field: 'productIds',
+    field: 'templateId', //暂且使用插槽形式
+    label: '模板',
+    component: 'Input',
+    slot: 'templateId',
+    colProps: { span: 24 },
+    ifShow: ({ values }) => values['enableTemplate'] === 1,
+  },
+  {
+    field: 'productIds', //暂且使用插槽形式
+    label: '产品',
+    component: 'Input',
+    slot: 'productIds',
+    colProps: { span: 24 },
+    ifShow: ({ values }) => values['enableTemplate'] === 1 && values['templateId'],
+  },
+  {
+    field: 'deviceIds', //暂且使用插槽形式
+    label: '设备',
+    component: 'Input',
+    slot: 'deviceIds',
+    colProps: { span: 24 },
+    ifShow: ({ values }) => values['enableTemplate'] === 1 && values['templateId'],
+  },
+  {
+    field: 'productId',
     label: '产品',
     component: 'ApiSelect',
     required: true,
@@ -155,22 +210,18 @@ export const formSchema: FormSchema[] = [
       api: getDeviceProfile,
       mode: 'multiple',
       labelField: 'name',
-      valueField: 'tbProfileId',
-    },
-  },
-  {
-    field: 'platform',
-    label: '平台',
-    required: true,
-    component: 'RadioGroup',
-    defaultValue: Platform.PC,
-    componentProps: {
-      defaultValue: Platform.PC,
-      options: [
-        { label: 'PC端', value: Platform.PC },
-        { label: '移动端', value: Platform.PHONE },
-      ],
+      valueField: 'id',
+      placeholder: '请选择产品',
+      getPopupContainer: (triggerNode) => triggerNode.parentNode,
+      filterOption: (inputValue: string, option: Record<'label' | 'value', string>) => {
+        let { label, value } = option;
+        label = label.toLowerCase();
+        value = value.toLowerCase();
+        inputValue = inputValue.toLowerCase();
+        return label.includes(inputValue) || value.includes(inputValue);
+      },
     },
+    ifShow: ({ values }) => values['enableTemplate'] === 0,
   },
   {
     field: 'remark',

+<template>
+  <div v-for="param in dynamicInput.params" :key="param.name" class="mt-4 flex gap-2">
+    <a-input :disabled="true" v-model:value="param.name" class="w-1/2 flex-1" />
+    <Select
+      placeholder="请选择设备"
+      v-model:value="param.deviceList"
+      class="!w-1/2"
+      :options="selectOptions"
+      v-bind="createPickerSearch()"
+      @change="emitChange"
+      mode="multiple"
+      allowClear
+    />
+  </div>
+</template>
+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  };
+</script>
+<script lang="ts" setup name="SelectAttributes">
+  import { reactive, UnwrapRef, watchEffect, ref } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { Select } from 'ant-design-vue';
+  import { createPickerSearch } from '/@/utils/pickerSearch';
+  import { byOrganizationIdGetMasterDevice } from '/@/api/ruleengine/ruleengineApi';
+
+  const props = defineProps({
+    value: propTypes.object.def({}),
+    organizationId: {
+      type: String,
+      required: true,
+    },
+  });
+
+  const selectOptions: any = ref([]);
+
+  //动态数据
+  const dynamicInput: UnwrapRef<{ params: any[] }> = reactive({ params: [] });
+
+  const initVal = async () => {
+    if (props.value) {
+      if (props.organizationId) {
+        const resp = await byOrganizationIdGetMasterDevice({
+          organizationId: props.organizationId,
+          deviceProfileId: props.value.value,
+        });
+        selectOptions.value = resp.map((item) => ({
+          label: item.alias || item.name,
+          value: item.tbDeviceId,
+        }));
+      }
+      dynamicInput.params.push({
+        name: props.value.label,
+        profileId: props.value.value,
+        deviceList: props.value.deviceList?.filter(Boolean)?.map((item) => item.deviceId),
+      });
+    }
+  };
+
+  //数值改变
+  const valEffect = watchEffect(() => {
+    initVal();
+  });
+
+  valEffect();
+
+  //chang改变
+  const emitChange = () => {
+    const findDeviceDict = selectOptions.value.map((item) => {
+      if (dynamicInput.params[0].deviceList?.includes(item.value)) {
+        return {
+          name: item.label,
+          deviceId: item.value,
+        };
+      }
+    });
+    return {
+      ...dynamicInput.params[0],
+      deviceList: findDeviceDict.filter(Boolean),
+    };
+  };
+  defineExpose({
+    emitChange,
+  });
+</script>
+<style scoped lang="css">
+  .dynamic-delete-button {
+    cursor: pointer;
+    position: relative;
+    top: 4px;
+    font-size: 24px;
+    color: #999;
+    transition: all 0.3s;
+  }
+
+  .dynamic-delete-button:hover {
+    color: #777;
+  }
+
+  .dynamic-delete-button[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+</style>

+<template>
+  <Select
+    placeholder="请选择产品"
+    v-model:value="selectValue"
+    style="width: 100%"
+    :options="selectOptions"
+    v-bind="createPickerSearch()"
+    @change="handleDeviceProfileChange"
+    mode="multiple"
+    labelInValue
+  />
+  <template v-for="(item, index) in profileList" :key="item.value">
+    <SelectDevice
+      :ref="bindDeviceRef.deviceAttrRef"
+      :value="item"
+      :index="index"
+      :organizationId="organizationId"
+    />
+  </template>
+</template>
+<script lang="ts" setup name="SelectDevice">
+  import { ref, Ref, PropType, unref, nextTick, onMounted } from 'vue';
+  import { Select } from 'ant-design-vue';
+  import SelectDevice from './SelectDevice.vue';
+  import { createPickerSearch } from '/@/utils/pickerSearch';
+
+  import { getDeviceProfile } from '/@/api/alarm/position';
+
+  defineProps({
+    selectOptions: {
+      type: Array as PropType<any[]>,
+      required: true,
+    },
+    organizationId: {
+      type: String,
+      required: true,
+    },
+  });
+
+  const selectValue = ref([]);
+  const selectOptions = ref<any>([]);
+
+  const bindDeviceRef = {
+    deviceAttrRef: ref([]),
+  };
+
+  const profileList: Ref<any[]> = ref([]);
+
+  const handleDeviceProfileChange = (_, options) => {
+    profileList.value = options;
+  };
+
+  const getSelectDevice = () => {
+    return unref(bindDeviceRef.deviceAttrRef)?.map((item: any) => item.emitChange());
+  };
+
+  const setFieldsValue = async (productIds) => {
+    await nextTick();
+    if (!productIds && !productIds.length) {
+      return;
+    }
+    selectValue.value = productIds;
+
+    profileList.value = productIds;
+  };
+
+  const setValue = (value: any) => {
+    selectValue.value = value.map((item) => ({
+      label: item.name,
+      key: item.profileId,
+    }));
+    profileList.value = value.map((item) => {
+      return {
+        label: item.name,
+        value: item.profileId,
+        deviceList: item.deviceList,
+      };
+    });
+  };
+  const retValue = () => {
+    selectValue.value = [];
+    profileList.value = [];
+  };
+
+  onMounted(async () => {
+    const values = await getDeviceProfile();
+    selectOptions.value = values.map((item) => ({
+      label: item.name,
+      value: item.id,
+    }));
+  });
+
+  defineExpose({
+    getSelectDevice,
+    setValue,
+    retValue,
+    setFieldsValue,
+  });
+</script>
+<style scoped lang="css"></style>

@@ -77,6 +77,7 @@
       const { items, total } = await getPage({
         organizationId: unref(organizationId),
         ...value,
+        isTemplate: 0,
         page: pagination.current!,
         pageSize,
       });

+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="30%"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema, PC_DEFAULT_CONTENT, PHONE_DEFAULT_CONTENT, Platform } from './center.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { saveOrUpdateConfigurationCenter } from '/@/api/configuration/center/configurationCenter';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { buildUUID } from '/@/utils/uuid';
+  import { getDeviceProfile } from '/@/api/alarm/position';
+
+  export default defineComponent({
+    name: 'ConfigurationDrawer',
+    components: { BasicDrawer, BasicForm },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const isUpdate = ref(true);
+
+      const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
+        labelWidth: 120,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+      });
+
+      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+        await resetFields();
+        setDrawerProps({ confirmLoading: false });
+        isUpdate.value = !!data?.isUpdate;
+        if (unref(isUpdate)) {
+          if (data.record.thumbnail) {
+            data.record.thumbnail = [
+              { uid: buildUUID(), name: 'name', url: data.record.thumbnail } as FileItem,
+            ];
+          }
+          if (data.record.organizationDTO) {
+            await setFieldsValue(data.record);
+          } else {
+            Reflect.deleteProperty(data.record, 'organizationId');
+            await setFieldsValue(data.record);
+          }
+          if (!data.record?.productAndDevice) return;
+          const productAndDevice = data.record['productAndDevice'];
+          setFieldsValue({
+            productIds: productAndDevice.map((item) => item.profileId),
+          });
+        }
+      });
+
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增模板' : '编辑模板'));
+
+      const getDefaultContent = (platform: Platform) => {
+        if (platform === Platform.PC) {
+          return PC_DEFAULT_CONTENT;
+        }
+        return PHONE_DEFAULT_CONTENT;
+      };
+
+      // 获取产品
+      const getCurrentAllProduct = async (products: string[]) => {
+        const resp = (await getDeviceProfile()) as any;
+        if (!resp) return;
+        const values = resp.map((item) => ({ name: item.name, profileId: item.id }));
+        return values.filter((item) => products.includes(item.profileId));
+      };
+
+      async function handleSubmit() {
+        try {
+          const { createMessage } = useMessage();
+          const values = await validate();
+          if (!values) return;
+          const reflectProduct = await getCurrentAllProduct(values['productIds']);
+          if (Reflect.has(values, 'thumbnail')) {
+            const file = (values.thumbnail || []).at(0) || {};
+            values.thumbnail = file.url || null;
+          }
+          setDrawerProps({ confirmLoading: true });
+          let saveMessage = '添加成功';
+          let updateMessage = '修改成功';
+          values.defaultContent = getDefaultContent(values.platform);
+          values.productAndDevice = reflectProduct;
+          Reflect.deleteProperty(values, 'productIds');
+          await saveOrUpdateConfigurationCenter(values, unref(isUpdate));
+          closeDrawer();
+          emit('success');
+          createMessage.success(unref(isUpdate) ? updateMessage : saveMessage);
+        } finally {
+          setDrawerProps({ confirmLoading: false });
+        }
+      }
+
+      return {
+        getTitle,
+        registerDrawer,
+        registerForm,
+        handleSubmit,
+      };
+    },
+  });
+</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, 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>

+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+import { createImgPreview } from '/@/components/Preview';
+import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
+import { useComponentRegister } from '/@/components/Form';
+import { OrgTreeSelect } from '../../common/OrgTreeSelect';
+import { getDeviceProfile } from '/@/api/alarm/position';
+
+useComponentRegister('OrgTreeSelect', OrgTreeSelect);
+export enum Platform {
+  PHONE = 'phone',
+  PC = 'pc',
+}
+
+export enum ConfigurationPermission {
+  CREATE = 'api:yt:configuration:center:post',
+  UPDATE = 'api:yt:configuration:center:update',
+  DELETE = 'api:yt:configuration:center:delete',
+  DESIGN = 'api:yt:configuration:center:get_configuration_info:design',
+  PREVIEW = 'api:yt:configuration:center:get_configuration_info:preview',
+  SHARE = 'api:yt:configuration:center:share',
+  UN_SHARE = 'api:yt:configuration:center:monopoly',
+}
+
+export const PC_DEFAULT_CONTENT =
+  '<mxfile><diagram>dZHBDsIgDIafhvuEzOh5Tr142sEzGXWQsHVhmKFP7xbAidMT5fv/UtoSVrTuZHgvLyhAE5oJR9iBUMrybT4dM3l4stnTzJPGKBHYAir1hACj7a4EDInRImqr+hTW2HVQ24RxY3BMbTfUadWeN7ACVc31ml6VsPK7jVk4g2pkLJ3tgtLy6A5gkFzg+IFYSVhhEK2PWleAnscXB+Pzjn/U988MdPZHwhQsb0+XZEesfAE=</diagram></mxfile>';
+
+export const PHONE_DEFAULT_CONTENT =
+  '<mxfile><diagram>dZHBEoIgEEC/hru6lXU2q0snD50Z2YQZdB2k0fr6dMCMsU4sb9+ysDDI6uFseCuvJFCzJBIDgyNLkjjdw7hM5OnIYRc5UBklvLSAQr3Qw1l7KIFdIFoibVUbwpKaBksbMG4M9aF2Jx12bXmFK1CUXK/pTQkrHd3E24VfUFXSd04hdYmaz65/SCe5oP4LQc4gM0TWRfWQoZ5mN4/F1Z3+ZD/3MtjYHwVjsJw9boIPgvwN</diagram></mxfile>';
+// 表格列数据
+export const columns: BasicColumn[] = [
+  {
+    title: '组态名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '所属组织',
+    dataIndex: 'organizationDTO.name',
+    width: 160,
+  },
+  {
+    title: '平台',
+    dataIndex: 'platform',
+    width: 100,
+    slots: { customRender: 'platform' },
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    width: 200,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 120,
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateTime',
+    width: 120,
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    flag: 'ACTION',
+    width: 260,
+    slots: { customRender: 'action' },
+  },
+];
+
+// 查询字段
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '组态名称',
+    component: 'Input',
+    colProps: { span: 8 },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入组态名称',
+    },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'thumbnail',
+    label: '缩略图',
+    component: 'ApiUpload',
+    changeEvent: 'update:fileList',
+    valueField: 'fileList',
+    componentProps: () => {
+      return {
+        listType: 'picture-card',
+        maxFileLimit: 1,
+        accept: '.png,.jpg,.jpeg,.gif',
+        api: async (file: File) => {
+          try {
+            const formData = new FormData();
+            formData.set('file', file);
+            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
+            return {
+              uid: fileStaticUri,
+              name: fileName,
+              url: fileStaticUri,
+            } as FileItem;
+          } catch (error) {
+            return {};
+          }
+        },
+        onPreview: (fileList: FileItem) => {
+          createImgPreview({ imageList: [fileList.url!] });
+        },
+        // showUploadList: {
+        //   showDownloadIcon: true,
+        //   showRemoveIcon: true,
+        // },
+      };
+    },
+  },
+
+  {
+    field: 'name',
+    label: '模板名称',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入模板名称',
+      maxLength: 36,
+    },
+  },
+  {
+    field: 'organizationId',
+    label: '所属组织',
+    required: true,
+    component: 'OrgTreeSelect',
+  },
+  {
+    field: 'productIds',
+    label: '产品',
+    component: 'ApiSelect',
+    required: true,
+    componentProps: {
+      api: getDeviceProfile,
+      mode: 'multiple',
+      labelField: 'name',
+      valueField: 'id',
+    },
+  },
+  {
+    field: 'isTemplate',
+    label: '',
+    component: 'Switch',
+    required: true,
+    defaultValue: 1,
+    componentProps: {
+      disabled: true,
+      checkedValue: 1,
+      unCheckedValue: 0,
+    },
+    show: false,
+  },
+  {
+    field: 'platform',
+    label: '平台',
+    required: true,
+    component: 'RadioGroup',
+    defaultValue: Platform.PC,
+    componentProps: {
+      defaultValue: Platform.PC,
+      options: [
+        { label: 'PC端', value: Platform.PC },
+        { label: '移动端', value: Platform.PHONE },
+      ],
+    },
+  },
+  {
+    field: 'remark',
+    label: '备注',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入备注',
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'id',
+    label: '',
+    component: 'Input',
+    show: false,
+    componentProps: {
+      maxLength: 36,
+      placeholder: 'id',
+    },
+  },
+];

+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 {
+    deleteConfigurationCenter,
+    getPage,
+    shareConfiguration,
+  } 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 { ConfigurationPermission, Platform, searchFormSchema } from './center.data';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { Authority } from '/@/components/Authority';
+  import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';
+  import { useDrawer } from '/@/components/Drawer';
+  import { getBoundingClientRect } from '/@/utils/domUtils';
+  import configurationSrc from '/@/assets/icons/configuration.svg';
+  import { cloneDeep } from 'lodash';
+  import { usePermission } from '/@/hooks/web/usePermission';
+  import { AuthIcon, CardLayoutButton } from '/@/components/Widget';
+  import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
+  import { ShareModal } from '/@/views/common/ShareModal';
+  import { ViewTypeNameEnum } from '../../common/ShareModal/config';
+  import { useModal } from '/@/components/Modal';
+  import { ViewType } from '../../visual/board/config/panelDetail';
+  import { useRole } from '/@/hooks/business/useRole';
+  import { useClipboard } from '@vueuse/core';
+  import { Icon } from '/@/components/Icon';
+  import { createScadaPageLink, ScadaModeEnum } from './help';
+
+  const listColumn = ref(5);
+
+  const { createMessage } = useMessage();
+
+  const { isCustomerUser } = useRole();
+
+  const organizationId = ref<Nullable<number>>(null);
+
+  const pagination = reactive<PaginationProps>({
+    size: 'small',
+    showTotal: (total: number) => `共 ${total} 条数据`,
+    current: 1,
+    pageSize: unref(listColumn) * 2,
+    onChange: (page: number) => {
+      pagination.current = page;
+      getListData();
+    },
+  });
+
+  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);
+    },
+  });
+
+  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 searchInfo = reactive<Recordable>({});
+  const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
+  const handleSelect = (orgId: number) => {
+    organizationId.value = orgId;
+    getListData();
+  };
+
+  const [registerDrawer, { openDrawer }] = useDrawer();
+
+  const { hasPermission } = usePermission();
+
+  const getPreviewFlag = computed(() => {
+    return hasPermission(ConfigurationPermission.PREVIEW);
+  });
+
+  const getDesignFlag = computed(() => {
+    return hasPermission(ConfigurationPermission.DESIGN);
+  });
+
+  const getShareFlag = computed(() => {
+    return hasPermission(ConfigurationPermission.SHARE);
+  });
+
+  const handleCreateOrUpdate = (record?: ConfigurationCenterItemsModal) => {
+    if (record) {
+      openDrawer(true, {
+        isUpdate: true,
+        record: cloneDeep(record),
+      });
+    } else {
+      openDrawer(true, {
+        isUpdate: false,
+      });
+    }
+  };
+
+  const handlePreview = (record: ConfigurationCenterItemsModal) => {
+    if (!unref(getPreviewFlag)) return;
+    createScadaPageLink(record, ScadaModeEnum.LIGHTBOX);
+  };
+
+  const handleDesign = (record: ConfigurationCenterItemsModal) => {
+    if (!unref(getDesignFlag)) return;
+
+    createScadaPageLink(record, ScadaModeEnum.DESIGN);
+  };
+
+  const handleDelete = async (record: ConfigurationCenterItemsModal) => {
+    try {
+      await deleteConfigurationCenter([record.id]);
+      createMessage.success('删除成功');
+      await getListData();
+    } catch (error) {}
+  };
+
+  const handleCardLayoutChange = () => {
+    pagination.current = 1;
+    getListData();
+  };
+
+  const createShareUrl = (record: ConfigurationCenterItemsModal) => {
+    return createScadaPageLink(record, ScadaModeEnum.SHARE, false);
+  };
+
+  const { copied, copy } = useClipboard({ legacy: true });
+  const handleCreateShareUrl = async (record: ConfigurationCenterItemsModal) => {
+    if (!unref(getShareFlag)) return;
+    const url = createShareUrl(record);
+    await copy(url);
+    if (unref(copied)) {
+      createMessage.success('复制成功～');
+    }
+  };
+
+  const [registerShareModal, { openModal }] = useModal();
+
+  const handleOpenShareModal = (record: ConfigurationCenterItemsModal) => {
+    openModal(true, { record, href: createShareUrl(record) });
+  };
+
+  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="ConfigurationPermission.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': item.viewType === ViewType.PUBLIC_VIEW ? '#1890ff' : '#faad14',
+              }"
+              hoverable
+              class="card-container"
+            >
+              <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)"
+                  />
+                  <span
+                    class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1"
+                  >
+                    {{ ViewTypeNameEnum[item.viewType] || ViewTypeNameEnum.PRIVATE_VIEW }}
+                  </span>
+                </div>
+              </template>
+              <template class="ant-card-actions" #actions>
+                <Tooltip v-if="!isCustomerUser" title="设计">
+                  <AuthIcon
+                    :auth="ConfigurationPermission.DESIGN"
+                    class="!text-lg"
+                    icon="ant-design:edit-outlined"
+                    @click="handleDesign(item)"
+                  />
+                </Tooltip>
+                <Tooltip title="点击复制分享链接">
+                  <AuthIcon
+                    :auth="ConfigurationPermission.SHARE"
+                    :disabled="!item.publicId"
+                    class="!text-lg"
+                    icon="ant-design:share-alt-outlined"
+                    @click="handleCreateShareUrl(item)"
+                  />
+                </Tooltip>
+                <AuthDropDown
+                  v-if="!isCustomerUser"
+                  :dropMenuList="[
+                    {
+                      text: '分享',
+                      auth: ConfigurationPermission.SHARE,
+                      icon: 'ant-design:share-alt-outlined',
+                      event: '',
+                      onClick: handleOpenShareModal.bind(null, item),
+                    },
+                    {
+                      text: '编辑',
+                      auth: ConfigurationPermission.UPDATE,
+                      icon: 'clarity:note-edit-line',
+                      event: '',
+                      onClick: handleCreateOrUpdate.bind(null, item),
+                    },
+                    {
+                      text: '删除',
+                      auth: ConfigurationPermission.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" />
+    <ShareModal
+      @register="registerShareModal"
+      :shareApi="shareConfiguration"
+      @success="getListData"
+    />
+  </PageWrapper>
+</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>