perf: data component visualization configuration setting default selected first item

@@ -110,6 +110,8 @@
 
 
   watch(() => props.layout.componentType, updateChartType);
   watch(() => props.layout.componentType, updateChartType);
 
 
+  // watch(() => props.value.gradientInfo, updateChartType);
+
   let timeout: Nullable<number> = null;
   let timeout: Nullable<number> = null;
 
 
   function handleRandomValue() {
   function handleRandomValue() {
@@ -139,7 +141,10 @@
   <div class="flex flex-col w-full h-full min-w-3 min-h-3">
   <div class="flex flex-col w-full h-full min-w-3 min-h-3">
     <div :id="getControlsWidgetId()" class="widget-charts w-full h-full flex-auto"></div>
     <div :id="getControlsWidgetId()" class="widget-charts w-full h-full flex-auto"></div>
     <div>
     <div>
-      <div class="text-center" :style="{ fontSize: fontSize({ radio: getRadio, basic: 16 }) }">
+      <div
+        class="text-center"
+        :style="{ fontSize: fontSize({ radio: getRadio, basic: 16, max: 18 }), color: '#666' }"
+      >
         {{ props.value.name }}
         {{ props.value.name }}
       </div>
       </div>
       <Tooltip
       <Tooltip

@@ -12,6 +12,7 @@
   import { decode } from '../../config/config';
   import { decode } from '../../config/config';
   import { ComponentInfo } from '/@/api/dataBoard/model';
   import { ComponentInfo } from '/@/api/dataBoard/model';
   import { useCalcGridLayout } from '../../hook/useCalcGridLayout';
   import { useCalcGridLayout } from '../../hook/useCalcGridLayout';
+  import { FrontComponent } from '../config/help';
 
 
   interface DataComponentRouteParams extends RouteParams {
   interface DataComponentRouteParams extends RouteParams {
     id: string;
     id: string;
@@ -31,7 +32,7 @@
     return decode((ROUTE.params as DataComponentRouteParams).boardId as string);
     return decode((ROUTE.params as DataComponentRouteParams).boardId as string);
   });
   });
 
 
-  const frontId = ref('');
+  const frontId = ref(FrontComponent.TEXT_COMPONENT_1);
 
 
   const isEdit = ref(false);
   const isEdit = ref(false);
 
 
@@ -42,7 +43,8 @@
   const [register, { closeModal, changeOkLoading }] = useModalInner(
   const [register, { closeModal, changeOkLoading }] = useModalInner(
     (data: { isEdit: boolean; record?: DataBoardLayoutInfo }) => {
     (data: { isEdit: boolean; record?: DataBoardLayoutInfo }) => {
       componentRecord.value = data.record || ({} as unknown as DataBoardLayoutInfo);
       componentRecord.value = data.record || ({} as unknown as DataBoardLayoutInfo);
-      frontId.value = data.record?.record?.frontId || '';
+      frontId.value =
+        (data.record?.record?.frontId as FrontComponent) || FrontComponent.TEXT_COMPONENT_1;
       isEdit.value = data.isEdit || false;
       isEdit.value = data.isEdit || false;
     }
     }
   );
   );
@@ -54,7 +56,7 @@
 
 
   const resetForm = () => {
   const resetForm = () => {
     isEdit.value = false;
     isEdit.value = false;
-    frontId.value = '';
+    frontId.value = FrontComponent.TEXT_COMPONENT_1;
     componentRecord.value = {} as unknown as DataBoardLayoutInfo;
     componentRecord.value = {} as unknown as DataBoardLayoutInfo;
     componentDefaultConfig.value = {};
     componentDefaultConfig.value = {};
   };
   };