refactor: visual board component config

 <script lang="ts" setup>
+  import { RadioRecord } from '../../detail/config/util';
+
   const props = defineProps<{
     value?: boolean;
+    layout?: Recordable;
+    radio?: RadioRecord;
   }>();
 
   const emit = defineEmits(['update:value', 'change']);
@@ -76,12 +80,12 @@
     transform-origin: center center -20px;
     transform: translateZ(20px) rotateX(-25deg);
     transform-style: preserve-3d;
-    background-color: #9b0621;
     width: 100%;
     height: 100%;
     position: relative;
     cursor: pointer;
     background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
+    background-color: #9b0621;
     background-repeat: no-repeat;
   }
 
@@ -113,7 +117,7 @@
     transform: translateY(30px) rotateX(-90deg);
     position: absolute;
     bottom: 0;
-    box-shadow: 0 30px 8px 0px black, 0 60px 20px 0px rgb(0 0 0 / 50%);
+    box-shadow: 0 30px 8px 0 black, 0 60px 20px 0 rgb(0 0 0 / 50%);
   }
 
   .switch .light {

+export interface ToggleSwitchValue {
+  value?: boolean;
+}
+
+export const transform = () => {};

@@ -102,11 +102,6 @@
 
   watch(() => props.value, updateChartValue);
 
-  // watch(
-  //   () => [props.value.gradientInfo, props.value.unit, props.value.valueColor, props.value.name],
-  //   updateChartValue
-  // );
-
   const updateChartFont = useThrottleFn(() => {
     const option = beforeUpdateFn(props.layout.componentType);
     setTimeout(() => {
@@ -123,8 +118,6 @@
 
   watch(() => props.layout.componentType, updateChartType);
 
-  // watch(() => props.value.gradientInfo, updateChartType);
-
   let timeout: Nullable<number> = null;
 
   function handleRandomValue() {

 import { EChartsOption } from 'echarts';
+import { FrontComponent } from '../help';
 import { fontSize, RadioRecord } from '../../detail/config/util';
 import { Gradient, visualOptionField } from '../../detail/config/visualOptions';
 import {
@@ -10,8 +11,6 @@ import {
 import { isArray } from '/@/utils/is';
 import { buildUUID } from '/@/utils/uuid';
 
-export type InstrumentComponentType = 'instrument-component-1' | 'instrument-component-2';
-
 export type GradientKey =
   | visualOptionField.FIRST_PHASE_COLOR
   | visualOptionField.FIRST_PHASE_VALUE
@@ -38,7 +37,7 @@ export interface DashBoardValue {
 
 export interface DashboardComponentLayout {
   chartOption: EChartsOption;
-  componentType: InstrumentComponentType;
+  componentType: FrontComponent;
 }
 
 export enum GradientColor {

 import { ComponentInfo } from '/@/api/dataBoard/model';
 
-export type DigitalDashBoardComponentType = 'digital-dashboard-component';
-
 export interface DigitalDashBoardLayout {
   max: number;
   keepNumber: number;

 import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
 
-export type PictureComponentType = 'picture-component-1';
-
-export interface PictureComponentLayout {}
-
 export interface PictureComponentValue {
   value?: string;
   updateTime?: string;
 }
 
 export const transformPictureConfig = (
-  config: PictureComponentLayout,
-  record: DataComponentRecord,
+  _config: Recordable,
+  _record: DataComponentRecord,
   dataSourceRecord: DataSource
 ) => {
   const componentInfo = dataSourceRecord.componentInfo;

@@ -18,12 +18,6 @@ export interface TextComponentValue {
   deviceName?: string;
 }
 
-export type TextComponentType =
-  | 'text-component-1'
-  | 'text-component-3'
-  | 'text-component-4'
-  | 'text-component-5';
-
 type TextComponentDefault = TextComponentLayout;
 
 export const TextComponent1Config: TextComponentDefault = {

 import { Component } from 'vue';
-import TextComponent from '../../components/TextComponent/TextComponent.vue';
+import TextComponent from './TextComponent/TextComponent.vue';
 import {
   TextComponent1Config,
   TextComponent3Config,
@@ -7,12 +7,11 @@ import {
   TextComponent5Config,
   TextComponentDefaultConfig,
   transformTextComponentConfig,
-} from '../../components/TextComponent/config';
+} from './TextComponent/config';
 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 DashBoardComponent from './InstrumentComponent/DashBoardComponent.vue';
+import PictureComponent from './PictureComponent/PictureComponent.vue';
+import { transformPictureConfig } from './PictureComponent/pictureComponent.config';
 import {
   DashboardComponentLayout,
   Instrument1DefaultConfig,
@@ -20,9 +19,10 @@ import {
   instrumentComponent1,
   instrumentComponent2,
   transformDashboardComponentConfig,
-} from '../../components/InstrumentComponent/dashBoardComponent.config';
-import DigitalDashBoard from '../../components/InstrumentComponent/DigitalDashBoard.vue';
-import { DigitalComponentDefaultConfig } from '../../components/InstrumentComponent/digitalDashBoard.config';
+} from './InstrumentComponent/dashBoardComponent.config';
+import DigitalDashBoard from './InstrumentComponent/DigitalDashBoard.vue';
+import { DigitalComponentDefaultConfig } from './InstrumentComponent/digitalDashBoard.config';
+import ToggleSwitch from './ControlComponent/ToggleSwitch.vue';
 
 export enum FrontComponentCategory {
   TEXT = 'text',
@@ -32,13 +32,13 @@ export enum FrontComponentCategory {
   MAP = 'map',
 }
 
-export enum FrontComponentCategoryName {
-  text = '文本组件',
-  picture = '图片组件',
-  instrument = '仪表组件',
-  control = '控制组件',
-  map = '地图组件',
-}
+export const FrontComponentCategoryName = {
+  [FrontComponentCategory.TEXT]: '文本组件',
+  [FrontComponentCategory.INSTRUMENT]: '仪表组件',
+  [FrontComponentCategory.CONTROL]: '控制组件',
+  [FrontComponentCategory.PICTURE]: '图片组件',
+  [FrontComponentCategory.MAP]: '地图组件',
+};
 
 export enum FrontComponent {
   TEXT_COMPONENT_1 = 'text-component-1',
@@ -50,6 +50,7 @@ export enum FrontComponent {
   INSTRUMENT_COMPONENT_2 = 'instrument-component-2',
   DIGITAL_DASHBOARD_COMPONENT = 'digital-dashboard-component',
   PICTURE_COMPONENT_1 = 'picture-component-1',
+  CONTROL_COMPONENT_TOGGLE_SWITCH = 'control-component-toggle-switch',
 }
 
 export interface ComponentConfig {
@@ -64,12 +65,9 @@ export interface ComponentConfig {
   ) => Recordable;
 }
 
-export const frontComponentDefaultConfigMap = new Map<
-  WidgetComponentType,
-  Partial<ComponentInfo>
->();
+export const frontComponentDefaultConfigMap = new Map<FrontComponent, Partial<ComponentInfo>>();
 
-export const frontComponentMap = new Map<WidgetComponentType, ComponentConfig>();
+export const frontComponentMap = new Map<FrontComponent, ComponentConfig>();
 
 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_1, {
   Component: TextComponent,
@@ -139,6 +137,12 @@ frontComponentMap.set(FrontComponent.PICTURE_COMPONENT_1, {
   transformConfig: transformPictureConfig,
 });
 
+frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH, {
+  Component: ToggleSwitch,
+  ComponentKey: FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH,
+  transformConfig: () => {},
+});
+
 frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_1, TextComponentDefaultConfig);
 frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_3, TextComponentDefaultConfig);
 frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_4, TextComponentDefaultConfig);
@@ -152,6 +156,6 @@ frontComponentDefaultConfigMap.set(
   DigitalComponentDefaultConfig
 );
 
-export const getComponentDefaultConfig = (key: WidgetComponentType) => {
+export const getComponentDefaultConfig = (key: FrontComponent) => {
   return frontComponentDefaultConfigMap.get(key) || {};
 };

@@ -11,7 +11,7 @@
   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 } from '../../components/help';
   import { computed } from '@vue/reactivity';
 
   type DataSourceFormEL = { [key: string]: Nullable<FormActionType> };
@@ -112,8 +112,6 @@
       return;
     }
 
-    // const defaultConfig = getComponentDefaultConfig(props.frontId as WidgetComponentType);
-
     const componentInfo: ComponentInfo = {
       ...(props.defaultConfig || {}),
       ...(item.componentInfo || {}),

@@ -12,7 +12,7 @@
   import { decode } from '../../config/config';
   import { ComponentInfo } from '/@/api/dataBoard/model';
   import { useCalcGridLayout } from '../../hook/useCalcGridLayout';
-  import { FrontComponent } from '../config/help';
+  import { FrontComponent } from '../../components/help';
 
   interface DataComponentRouteParams extends RouteParams {
     id: string;

@@ -2,12 +2,12 @@
   import { Tabs, List } from 'ant-design-vue';
   import VisualWidgetSelect from './VisualWidgetSelect.vue';
   import {
+    FrontComponent,
     FrontComponentCategory,
     FrontComponentCategoryName,
     getComponentDefaultConfig,
-  } from '../config/help';
-  import { WidgetComponentType } from '../config/visualOptions';
-  import { frontComponentMap } from '../config/help';
+  } from '../../components/help';
+  import { frontComponentMap } from '../../components/help';
   import { computed } from 'vue';
 
   interface DataSource {
@@ -40,7 +40,7 @@
     return Array.from(category.values());
   });
 
-  const handleCheck = (checked: WidgetComponentType) => {
+  const handleCheck = (checked: FrontComponent) => {
     const defaultConfig = getComponentDefaultConfig(checked);
     emit('update:value', checked);
     emit('change', defaultConfig);

 <script lang="ts" setup>
   import { ref, unref } from 'vue';
   import {
-    WidgetComponentType,
     schemasMap,
     VisualOptionParams,
     visualOptionField,
@@ -11,6 +10,7 @@
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { ComponentInfo } from '/@/api/dataBoard/model';
   import { computed } from '@vue/reactivity';
+  import { FrontComponent } from '../../components/help';
 
   const emit = defineEmits(['close', 'register']);
 
@@ -21,7 +21,7 @@
   const recordId = ref('');
 
   const getSchemas = computed(() => {
-    return schemasMap.get((props.value as WidgetComponentType) || 'text-component-1');
+    return schemasMap.get((props.value as FrontComponent) || 'text-component-1');
   });
 
   const [registerForm, method] = useForm({

-import { InstrumentComponentType } from '../../components/InstrumentComponent/dashBoardComponent.config';
-import { DigitalDashBoardComponentType } from '../../components/InstrumentComponent/digitalDashBoard.config';
-import { PictureComponentType } from '../../components/PictureComponent/pictureComponent.config';
-import { TextComponentType } from '../../components/TextComponent/config';
 import { FormSchema } from '/@/components/Form';
 
-export type WidgetComponentType =
-  | TextComponentType
-  | InstrumentComponentType
-  | DigitalDashBoardComponentType
-  | PictureComponentType;
-
 export interface VisualOptionParams {
   [visualOptionField.FONT_COLOR]: string;
   [visualOptionField.UNIT]: string;
@@ -198,7 +188,7 @@ export const modeFour: FormSchema[] = [
   },
 ];
 
-export const schemasMap = new Map<WidgetComponentType, FormSchema[]>();
+export const schemasMap = new Map<string, FormSchema[]>();
 
 schemasMap.set('text-component-1', modeOne);
 schemasMap.set('text-component-2', modeOne);

@@ -33,11 +33,10 @@
     DataSource,
     Layout,
   } from '/@/api/dataBoard/model';
-  import { frontComponentMap } from './config/help';
+  import { frontComponentMap } from '../components/help';
   import { calcScale } from './config/util';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { DataBoardLayoutInfo } from '../types/type';
-  import { WidgetComponentType } from './config/visualOptions';
   import Authority from '/@/components/Authority/src/Authority.vue';
   import { useSocketConnect } from '../hook/useSocketConnect';
   import { buildUUID } from '/@/utils/uuid';
@@ -45,6 +44,7 @@
   import trendIcon from '/@/assets/svg/trend.svg';
   import backIcon from '/@/assets/images/back.png';
   import { useCalcGridLayout } from '../hook/useCalcGridLayout';
+  import { FrontComponent } from '../components/help';
 
   const ROUTE = useRoute();
 
@@ -299,7 +299,7 @@
 
   const getComponent = (record: DataComponentRecord) => {
     const frontComponent = record.frontId;
-    const component = frontComponentMap.get(frontComponent as WidgetComponentType);
+    const component = frontComponentMap.get(frontComponent as FrontComponent);
     return component?.Component;
   };
 
@@ -308,7 +308,7 @@
     dataSourceRecord: DataSource
   ) => {
     const frontComponent = record.frontId;
-    const component = frontComponentMap.get(frontComponent as WidgetComponentType);
+    const component = frontComponentMap.get(frontComponent as FrontComponent);
     return component?.transformConfig(component.ComponentConfig || {}, record, dataSourceRecord);
   };