perf: adjust modal width && link visual options and component config

 <script lang="ts" setup>
-  import { computed } from 'vue';
+  import { computed, unref } from 'vue';
   import { Space, Tooltip } from 'ant-design-vue';
-  import type { DigitalDashBoardLayout, DigitalDashBoardValue } from './digitalDashBoard.config';
+  import {
+    DigitalComponentDefaultConfig,
+    DigitalDashBoardLayout,
+    DigitalDashBoardValue,
+  } from './digitalDashBoard.config';
   import { dateUtil } from '/@/utils/dateUtil';
   import {
     fontSize,
@@ -9,6 +13,7 @@
     DEFAULT_DATE_FORMAT,
     DEFAULT_RADIO_RECORD,
   } from '../../detail/config/util';
+  import { isNaN } from 'lodash';
 
   const props = defineProps<{
     layout: DigitalDashBoardLayout;
@@ -16,8 +21,12 @@
     radio?: RadioRecord;
   }>();
 
+  const getPropsValue = computed(() => {
+    return { ...DigitalComponentDefaultConfig, ...props.value };
+  });
+
   const integerPart = computed(() => {
-    let { value = 0 } = props.value;
+    let { value = 0 } = unref(getPropsValue);
     const { max = 5 } = props.layout;
     if (isNaN(value)) value = 0;
     let _value = Number(value).toFixed(2).split('.')[0];
@@ -28,7 +37,7 @@
   });
 
   const decimalPart = computed(() => {
-    let { value = 0 } = props.value;
+    let { value = 0 } = unref(getPropsValue);
     const { keepNumber = 2 } = props.layout;
     if (isNaN(value)) value = 0;
     let _value = Number(value)?.toFixed(2).split('.')[1];
@@ -56,7 +65,7 @@
               :key="number"
               class="border border-gray-400 p-2"
               :style="{
-                color: props.value.fontColor,
+                color: getPropsValue.fontColor,
                 fontSize: fontSize({ radio: getRadio, basic: 20 }),
               }"
             >
@@ -69,7 +78,7 @@
               :key="number"
               class="border border-gray-400 p-1"
               :style="{
-                color: props.value.fontColor,
+                color: getPropsValue.fontColor,
                 fontSize: fontSize({ radio: getRadio, basic: 18 }),
               }"
             >
@@ -84,7 +93,7 @@
         :style="{ fontSize: fontSize({ radio: getRadio, basic: 18 }) }"
       >
         <span>{{ props.value.name || '电表' }}</span>
-        <span class="px-1">({{ 'kw/h' }})</span>
+        <span class="px-1">({{ getPropsValue.unit }})</span>
       </div>
       <div
         class="text-center mt-1 text-gray-400 text-xs truncate"

 import { EChartsOption } from 'echarts';
 import { fontSize } from '../../detail/config/util';
 import { Gradient, visualOptionField } from '../../detail/config/visualOptions';
-import { DataComponentRecord, DataSource, GradientInfo } from '/@/api/dataBoard/model';
+import {
+  ComponentInfo,
+  DataComponentRecord,
+  DataSource,
+  GradientInfo,
+} from '/@/api/dataBoard/model';
 import { isArray } from '/@/utils/is';
 import { buildUUID } from '/@/utils/uuid';
 
@@ -36,11 +41,13 @@ export interface DashboardComponentLayout {
   componentType: InstrumentComponentType;
 }
 
-export const instrumentComponent1 = (params?: {
-  value: number;
-  unit: string;
-  fontColor: string;
-}): EChartsOption => {
+export enum GradientColor {
+  FIRST = '#67e0e3',
+  SECOND = '#37a2da',
+  THIRD = '#fd666d',
+}
+
+export const instrumentComponent1 = (params?: Partial<ComponentInfo>): EChartsOption => {
   const { value = 10, unit = '°C' } = params || {};
   return {
     series: [
@@ -108,7 +115,7 @@ export const instrumentComponent1 = (params?: {
         },
         data: [
           {
-            value: value,
+            value: value as number,
           },
         ],
       },
@@ -146,7 +153,7 @@ export const instrumentComponent1 = (params?: {
         },
         data: [
           {
-            value: value,
+            value: value as number,
           },
         ],
       },
@@ -154,16 +161,11 @@ export const instrumentComponent1 = (params?: {
   };
 };
 
-export const instrumentComponent2 = (params?: {
-  gradient: GradientInfo[];
-  value: number;
-  unit: string;
-  fontColor: string;
-}): EChartsOption => {
-  const { gradient = [], value = 0, unit = 'km/h' } = params || {};
-  const firstRecord = getGradient(Gradient.FIRST, gradient);
-  const secondRecord = getGradient(Gradient.SECOND, gradient);
-  const thirdRecord = getGradient(Gradient.THIRD, gradient);
+export const instrumentComponent2 = (params?: Partial<ComponentInfo>): EChartsOption => {
+  const { gradientInfo = [], value = 0, unit = 'km/h' } = params || {};
+  const firstRecord = getGradient(Gradient.FIRST, gradientInfo);
+  const secondRecord = getGradient(Gradient.SECOND, gradientInfo);
+  const thirdRecord = getGradient(Gradient.THIRD, gradientInfo);
 
   let max = thirdRecord?.value || secondRecord?.value || firstRecord?.value || 70;
   max = Number(1 + Array(String(max).length).fill(0).join(''));
@@ -182,9 +184,9 @@ export const instrumentComponent2 = (params?: {
           lineStyle: {
             width: 20,
             color: [
-              [firstGradient, firstRecord?.color || '#67e0e3'],
-              [secondGradient, secondRecord?.color || '#37a2da'],
-              [1, thirdRecord?.color || '#fd666d'],
+              [firstGradient, firstRecord?.color || GradientColor.FIRST],
+              [secondGradient, secondRecord?.color || GradientColor.SECOND],
+              [1, thirdRecord?.color || GradientColor.THIRD],
             ],
           },
         },
@@ -223,7 +225,7 @@ export const instrumentComponent2 = (params?: {
         },
         data: [
           {
-            value: value,
+            value: value as number,
           },
         ],
       },
@@ -293,14 +295,23 @@ export const update_instrument_2_value = (value) => {
 
 function setGradientInfo(dataSource: DataSource) {
   const componentInfo = dataSource.componentInfo;
-  return instrumentComponent2({
-    unit: componentInfo.unit,
-    value: 0,
-    gradient: componentInfo.gradientInfo,
-    fontColor: componentInfo.fontColor,
-  });
+  return instrumentComponent2(componentInfo);
 }
 
+export const Instrument1DefaultConfig: Partial<ComponentInfo> = {
+  fontColor: '#FD7347',
+};
+
+export const Instrument2DefaultConfig: Partial<ComponentInfo> = {
+  fontColor: GradientColor.FIRST,
+  unit: 'km/h',
+  gradientInfo: [
+    { key: Gradient.FIRST, value: 30, color: GradientColor.FIRST },
+    { key: Gradient.SECOND, value: 70, color: GradientColor.SECOND },
+    { key: Gradient.THIRD, value: 80, color: GradientColor.THIRD },
+  ],
+};
+
 export const transformDashboardComponentConfig = (
   config: DashboardComponentLayout,
   record: DataComponentRecord,

+import { ComponentInfo } from '/@/api/dataBoard/model';
+
 export type DigitalDashBoardComponentType = 'digital-dashboard-component';
 
 export interface DigitalDashBoardLayout {
@@ -12,3 +14,8 @@ export interface DigitalDashBoardValue {
   value?: number;
   fontColor?: string;
 }
+
+export const DigitalComponentDefaultConfig: Partial<ComponentInfo> = {
+  fontColor: '#000',
+  unit: 'kw/h',
+};

 import { EChartsOption } from 'echarts';
 import { Component } from 'vue';
 import { WidgetComponentType } from '../../detail/config/visualOptions';
-import { instrumentComponent1, instrumentComponent2 } from './dashBoardComponent.config';
+import {
+  Instrument1DefaultConfig,
+  Instrument2DefaultConfig,
+  instrumentComponent1,
+  instrumentComponent2,
+} from './dashBoardComponent.config';
 import DashBoardComponent from './DashBoardComponent.vue';
 import DigitalDashBoard from './DigitalDashBoard.vue';
 import { buildUUID } from '/@/utils/uuid';
@@ -20,13 +25,13 @@ interface InstrumentComponentConfig {
 export const instrumentComponentConfig: InstrumentComponentConfig[] = [
   {
     id: 'instrument-component-1',
-    layout: { chartOption: instrumentComponent1() },
+    layout: { chartOption: instrumentComponent1(Instrument1DefaultConfig) },
     component: DashBoardComponent,
     value: { id: buildUUID() },
   },
   {
     id: 'instrument-component-2',
-    layout: { chartOption: instrumentComponent2() },
+    layout: { chartOption: instrumentComponent2(Instrument2DefaultConfig) },
     component: DashBoardComponent,
     value: { id: buildUUID() },
   },

@@ -7,7 +7,7 @@
     DEFAULT_RADIO_RECORD,
     DEFAULT_DATE_FORMAT,
   } from '../../detail/config/util';
-  import type { TextComponentLayout, TextComponentValue } from './config';
+  import { TextComponentDefaultConfig, TextComponentLayout, TextComponentValue } from './config';
   import { SvgIcon } from '/@/components/Icon';
   import { dateUtil } from '/@/utils/dateUtil';
   const props = defineProps({
@@ -17,7 +17,8 @@
     },
     value: {
       type: Object as PropType<TextComponentValue>,
-      default: () => ({ name: '温度', value: 123 } as TextComponentValue),
+      default: () =>
+        ({ ...TextComponentDefaultConfig, name: '温度', value: 123 } as TextComponentValue),
     },
     radio: {
       type: Object as PropType<RadioRecord>,

-import { formatToDateTime } from '/@/utils/dateUtil';
-import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
+import { ComponentInfo, DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
 export interface TextComponentLayout {
   id: string;
   base?: boolean;
@@ -26,28 +25,21 @@ export type TextComponentType =
   | 'text-component-4'
   | 'text-component-5';
 
-type TextComponentDefault = TextComponentLayout & { value: TextComponentValue };
+type TextComponentDefault = TextComponentLayout;
 
 export const TextComponent1Config: TextComponentDefault = {
   id: 'text-component-1',
   base: true,
-  value: { value: 123, name: '温度' },
 };
 
 export const TextComponent2Config: TextComponentDefault = {
   id: 'text-component-2',
   base: false,
-  value: { value: 123, name: '温度' },
 };
 export const TextComponent3Config: TextComponentDefault = {
   id: 'text-component-3',
   base: false,
   showUpdate: true,
-  value: {
-    value: 123,
-    name: '温度',
-    updateTime: formatToDateTime(new Date(), 'YYYY-MM-DD HH:mm:ss'),
-  },
 };
 export const TextComponent4Config: TextComponentDefault = {
   id: 'text-component-4',
@@ -55,19 +47,19 @@ export const TextComponent4Config: TextComponentDefault = {
   showIcon: true,
   showUpdate: true,
   showUnit: true,
-  value: {
-    value: 123,
-    name: '温度',
-    updateTime: formatToDateTime(new Date(), 'YYYY-MM-DD HH:mm:ss'),
-    unit: '℃',
-  },
 };
 export const TextComponent5Config: TextComponentDefault = {
   id: 'text-component-5',
   base: false,
   showIcon: true,
   showUnit: true,
-  value: { value: 123, name: '温度', unit: '℃' },
+};
+
+export const TextComponentDefaultConfig: Partial<ComponentInfo> = {
+  fontColor: '#000',
+  unit: '℃',
+  iconColor: '#000',
+  icon: 'CO2',
 };
 
 export const textComponentConfig: TextComponentDefault[] = [

@@ -11,8 +11,9 @@
   import type { ComponentInfo, DataSource } from '/@/api/dataBoard/model';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { DataBoardLayoutInfo } from '../../types/type';
-  import { FrontComponent } from '../config/help';
+  import { FrontComponent, getComponentDefaultConfig } from '../config/help';
   import { computed } from '@vue/reactivity';
+  import { WidgetComponentType } from '../config/visualOptions';
 
   type DataSourceFormEL = { [key: string]: Nullable<FormActionType> };
 
@@ -96,9 +97,14 @@
       createMessage.warning('请先选择可视化组件');
       return;
     }
+
+    const defaultConfig = getComponentDefaultConfig(props.frontId as WidgetComponentType);
+
+    const componentInfo: ComponentInfo = { ...defaultConfig, ...(item.componentInfo || {}) };
+
     openModal(true, {
       recordId: item.id,
-      componentInfo: item.componentInfo,
+      componentInfo,
     });
   };
 

@@ -36,7 +36,6 @@
       componentRecord.value = data.record || ({} as unknown as DataBoardLayoutInfo);
       frontId.value = data.record?.record?.frontId || '';
       isEdit.value = data.isEdit || false;
-      console.log(unref(isEdit));
     }
   );
 

@@ -87,7 +87,7 @@
     @register="register"
     @ok="handleClose"
     title="选项"
-    width="60%"
+    width="40%"
   >
     <BasicForm class="form" @register="registerForm" :schemas="getSchemas" />
   </BasicModal>

@@ -23,7 +23,7 @@
     :style="{ borderColor: props.controlId === props.checkedId ? '#1a74e8' : '#f0f0f0' }"
     hoverable
     bordered
-    class="w-60 h-60 widget-select !bg-light-50"
+    class="w-60 h-60 widget-select !bg-light-50 cursor-pointer"
     @click="handleClick"
   >
     <div class="widget-container">

@@ -6,20 +6,24 @@ import {
   TextComponent3Config,
   TextComponent4Config,
   TextComponent5Config,
+  TextComponentDefaultConfig,
   transformTextComponentConfig,
 } from '../../components/TextComponent/config';
-import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
+import { ComponentInfo, DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
 import DashBoardComponent from '../../components/InstrumentComponent/DashBoardComponent.vue';
 import PictureComponent from '../../components/PictureComponent/PictureComponent.vue';
 import { transformPictureConfig } from '../../components/PictureComponent/pictureComponent.config';
 import { WidgetComponentType } from './visualOptions';
 import {
   DashboardComponentLayout,
+  Instrument1DefaultConfig,
+  Instrument2DefaultConfig,
   instrumentComponent1,
   instrumentComponent2,
   transformDashboardComponentConfig,
 } from '../../components/InstrumentComponent/dashBoardComponent.config';
 import DigitalDashBoard from '../../components/InstrumentComponent/DigitalDashBoard.vue';
+import { DigitalComponentDefaultConfig } from '../../components/InstrumentComponent/digitalDashBoard.config';
 export enum FrontComponent {
   TEXT_COMPONENT_1 = 'text-component-1',
   TEXT_COMPONENT_2 = 'text-component-2',
@@ -42,6 +46,11 @@ export interface ComponentConfig {
   ) => Recordable;
 }
 
+export const frontComponentDefaultConfigMap = new Map<
+  WidgetComponentType,
+  Partial<ComponentInfo>
+>();
+
 export const frontComponentMap = new Map<WidgetComponentType, ComponentConfig>();
 
 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_1, {
@@ -103,3 +112,21 @@ frontComponentMap.set(FrontComponent.PICTURE_COMPONENT_1, {
   ComponentConfig: {},
   transformConfig: transformPictureConfig,
 });
+
+frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_1, TextComponentDefaultConfig);
+frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_2, TextComponentDefaultConfig);
+frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_3, TextComponentDefaultConfig);
+frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_4, TextComponentDefaultConfig);
+frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_5, TextComponentDefaultConfig);
+
+frontComponentDefaultConfigMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, Instrument1DefaultConfig);
+frontComponentDefaultConfigMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, Instrument2DefaultConfig);
+
+frontComponentDefaultConfigMap.set(
+  FrontComponent.DIGITAL_DASHBOARD_COMPONENT,
+  DigitalComponentDefaultConfig
+);
+
+export const getComponentDefaultConfig = (key: WidgetComponentType) => {
+  return frontComponentDefaultConfigMap.get(key) || {};
+};

@@ -175,7 +175,7 @@ schemasMap.set('text-component-1', modeOne);
 schemasMap.set('text-component-2', modeOne);
 schemasMap.set('text-component-3', modeOne);
 schemasMap.set('text-component-4', modeTwo);
-schemasMap.set('text-component-4', modeTwo);
+schemasMap.set('text-component-5', modeTwo);
 schemasMap.set('instrument-component-1', modeOne);
 schemasMap.set('instrument-component-2', modeThree);
 schemasMap.set('digital-dashboard-component', modeFour);

@@ -88,9 +88,9 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
         throw Error(error as string);
       }
     },
-    onDisconnected() {
-      close();
-    },
+    // onDisconnected() {
+    //   close();
+    // },
   });
 
   const setCmdId = (cmdId: number, record: CmdMapping) => {