fix: visual board dynamic data source can not get fields value

 <script lang="ts" setup>
+  import { ControlComponentValue } from './control.config';
+
   const props = defineProps<{
-    value?: boolean;
+    value?: ControlComponentValue;
   }>();
 
   const emit = defineEmits(['update:value', 'change']);
@@ -14,7 +16,12 @@
 
 <template>
   <label class="sliding-switch">
-    <input :value="props.value" type="checkbox" :checked="props.value" @change="handleChange" />
+    <input
+      :value="props.value?.value"
+      type="checkbox"
+      :checked="props.value?.value"
+      @change="handleChange"
+    />
     <span class="slider"></span>
     <span class="on">ON</span>
     <span class="off">OFF</span>

@@ -27,10 +27,10 @@
   <div class="flex items-center w-full h-full p-4">
     <div class="flex-auto flex truncate">
       <SvgIcon
-        :name="props.value?.icon!"
+        :name="props.value?.icon! || ControlComponentDefaultConfig.icon!"
         prefix="iconfont"
         :style="{
-          color: props.value?.iconColor,
+          color: props.value?.iconColor || ControlComponentDefaultConfig.iconColor,
           width: fontSize({ radioRecord: getRadio, basic: 30, min: 16 }),
           height: fontSize({ radioRecord: getRadio, basic: 30, min: 16 }),
         }"

 <script lang="ts" setup>
   import { computed } from '@vue/reactivity';
   import { DEFAULT_RADIO_RECORD, fontSize, RadioRecord } from '../../detail/config/util';
+  import { ControlComponentValue } from './control.config';
 
   const props = defineProps<{
-    value?: boolean;
+    value?: ControlComponentValue;
     layout?: Recordable;
     radio?: RadioRecord;
   }>();
@@ -30,7 +31,12 @@
     }"
   >
     <label class="switch">
-      <input :value="props.value" type="checkbox" :checked="props.value" @change="handleChange" />
+      <input
+        :value="props.value?.value"
+        type="checkbox"
+        :checked="props.value?.value"
+        @change="handleChange"
+      />
       <div class="button">
         <div class="light"></div>
         <div class="dots"></div>

@@ -4,7 +4,7 @@
   import { FormActionType, useForm } from '/@/components/Form';
   import { basicSchema } from '../config/basicConfiguration';
   import BasicForm from '/@/components/Form/src/BasicForm.vue';
-  import { ref, shallowReactive, unref, nextTick, watch } from 'vue';
+  import { ref, shallowReactive, unref, nextTick, watch, computed } from 'vue';
   import VisualOptionsModal from './VisualOptionsModal.vue';
   import { useModal } from '/@/components/Modal';
   import { buildUUID } from '/@/utils/uuid';
@@ -12,8 +12,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { DataBoardLayoutInfo } from '../../types/type';
   import { FrontComponent } from '../../components/help';
-  import { computed } from '@vue/reactivity';
-  import BasicDataSourceForm from './DataSourceForm/BasicDataSourceForm.vue';
+  import { getDataSourceComponent } from './DataSourceForm/help';
 
   type DataSourceFormEL = { [key: string]: Nullable<FormActionType> };
 
@@ -21,7 +20,7 @@
 
   const props = defineProps<{
     record: DataBoardLayoutInfo;
-    frontId?: string;
+    frontId?: FrontComponent;
     defaultConfig?: Partial<ComponentInfo>;
   }>();
 
@@ -40,7 +39,7 @@
   const dataSourceEl = shallowReactive<DataSourceFormEL>({} as unknown as DataSourceFormEL);
 
   const setFormEl = (el: any, id: string) => {
-    if (!dataSourceEl[id] && el) {
+    if (id && el) {
       const { formActionType } = el as unknown as { formActionType: FormActionType };
       dataSourceEl[id] = formActionType;
     }
@@ -176,6 +175,10 @@
     ~index && (unref(dataSource)[index].componentInfo = value);
   };
 
+  const dataSourceComponent = computed(() => {
+    return getDataSourceComponent(props.frontId as FrontComponent);
+  });
+
   defineExpose({
     getAllDataSourceFieldValue,
     validate,
@@ -197,7 +200,8 @@
         选择设备
       </div>
       <div class="pl-2 flex-auto">
-        <BasicDataSourceForm :ref="(el) => setFormEl(el, item.id)" />
+        <!-- <BasicDataSourceForm /> -->
+        <component :is="dataSourceComponent" :ref="(el) => setFormEl(el, item.id)" />
       </div>
       <div class="flex justify-center gap-3 w-24">
         <Tooltip title="复制">

@@ -71,6 +71,7 @@
       resetForm();
     } catch (error: unknown) {
       if (unref(activeKey) !== 'basicConfig') activeKey.value = 'basicConfig';
+      throw error;
     }
   };
 

+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicForm, FormActionType } from '/@/components/Form';
+  import { controlFormSchema } from '../../config/basicConfiguration';
+
+  const formEl = ref<Nullable<FormActionType>>();
+
+  const setFormEl = (el: any) => {
+    formEl.value = el;
+  };
+
+  const getFieldsValue = () => {
+    return unref(formEl)!.getFieldsValue();
+  };
+
+  const validate = async () => {
+    await unref(formEl)!.validate();
+  };
+
+  const setFieldsValue = async (record: Recordable) => {
+    await unref(formEl)!.setFieldsValue(record);
+  };
+
+  const clearValidate = async (name?: string | string[]) => {
+    await unref(formEl)!.clearValidate(name);
+  };
+  defineExpose({
+    formActionType: { getFieldsValue, validate, setFieldsValue, clearValidate },
+  });
+</script>
+
+<template>
+  <div class="w-full flex-1">
+    <BasicForm
+      :ref="(el) => setFormEl(el)"
+      :schemas="controlFormSchema"
+      class="w-full flex-1 data-source-form"
+      :show-action-button-group="false"
+      :row-props="{
+        gutter: 10,
+      }"
+      layout="inline"
+      :label-col="{ span: 0 }"
+    />
+  </div>
+</template>

+import { Component } from 'vue';
+import { FrontComponent } from '../../../components/help';
+import BasicDataSourceForm from './BasicDataSourceForm.vue';
+import ControlDataSourceForm from './ControlDataSourceForm.vue';
+
+const dataSourceComponentMap = new Map<FrontComponent, Component>();
+
+dataSourceComponentMap.set(FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH, ControlDataSourceForm);
+
+export const getDataSourceComponent = (frontId: FrontComponent) => {
+  if (dataSourceComponentMap.has(frontId)) return dataSourceComponentMap.get(frontId)!;
+  return BasicDataSourceForm;
+};

@@ -217,3 +217,24 @@ export const dataSourceSchema: FormSchema[] = [
     },
   },
 ];
+
+export const controlFormSchema: FormSchema[] = [
+  {
+    field: DataSourceField.DEVICE_RENAME,
+    component: 'Input',
+    label: '设备',
+    colProps: { span: 8 },
+    componentProps: {
+      placeholder: '设备重命名',
+    },
+  },
+  {
+    field: DataSourceField.ATTRIBUTE_RENAME,
+    component: 'Input',
+    label: '属性',
+    colProps: { span: 8 },
+    componentProps: {
+      placeholder: '属性重命名',
+    },
+  },
+];

@@ -185,10 +185,6 @@
     openModal(true, { isEdit: false });
   };
 
-  onMounted(() => {
-    handleOpenCreatePanel();
-  });
-
   const getLayoutInfo = () => {
     return unref(dataBoardList).map((item) => {
       return {