perf: visual board out of const && types

@@ -4,11 +4,18 @@
   };
 </script>
 <script lang="ts" setup>
-  import { ControlComponentValue } from './control.config';
+  import { RadioRecord } from '../../detail/config/util';
 
-  const props = defineProps<{
-    value?: ControlComponentValue;
-  }>();
+  interface VisualComponentProps<Layout = Recordable, Value = Recordable> {
+    value?: Value;
+    layout?: Layout;
+    radio?: RadioRecord;
+    random?: boolean;
+    add?: (key: string, method: Fn) => void;
+    update?: () => void;
+    remove?: (key: string) => void;
+  }
+  const props = defineProps<VisualComponentProps>();
 
   const emit = defineEmits(['update:value', 'change']);
 

 import { EChartsOption } from 'echarts';
-import { FrontComponent } from '../help';
+import { FrontComponent } from '../../const/const';
 import { fontSize, RadioRecord } from '../../detail/config/util';
 import { Gradient, visualOptionField } from '../../detail/config/visualOptions';
 import {

 <script lang="ts" setup>
-  import { useSlots } from 'vue';
   import { useUpdateCenter } from '../../hook/useUpdateCenter';
   import { FrontDataSourceRecord } from '../../types/type';
 
@@ -7,10 +6,8 @@
     dataSource: FrontDataSourceRecord[];
   }>();
 
-  const slot = useSlots();
-
   const { update, add, remove } = useUpdateCenter();
-  console.log({ dataSource: props.dataSource });
+
   defineExpose({ update });
 </script>
 
@@ -21,15 +18,12 @@
     <div class="widget-content">
       <div
         v-for="item in props.dataSource"
-        :key="item.uuid"
+        :key="item.id"
         :style="{ width: `${item.width || 100}%`, height: `${item.height || 100}%` }"
         class="widget-item"
       >
         <div class="widget-box">
-          <div
-            class="widget-controls-container"
-            :style="{ height: slot.footer ? 'calc(100% - 20px)' : '100%' }"
-          >
+          <div class="widget-controls-container">
             <slot
               name="controls"
               :record="item"
@@ -38,12 +32,6 @@
               :update="update"
             ></slot>
           </div>
-          <div class="widget-value">
-            <slot name="value" :record="item"></slot>
-          </div>
-          <div class="widget-label">
-            <slot name="label" :record="item"></slot>
-          </div>
         </div>
       </div>
     </div>
@@ -92,7 +80,7 @@
   .widget-controls-container {
     flex: 1 1 auto;
     width: 100%;
-    height: calc(100% - 20px);
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;

-import { Component } from 'vue';
 import {
   TextComponent1Config,
   TextComponent3Config,
@@ -7,7 +6,7 @@ import {
   TextComponentDefaultConfig,
   transformTextComponentConfig,
 } from './TextComponent/config';
-import { ComponentInfo, DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
+import { ComponentInfo } from '/@/api/dataBoard/model';
 import { transformPictureConfig } from './PictureComponent/pictureComponent.config';
 import {
   DashboardComponentLayout,
@@ -29,50 +28,8 @@ import SlidingSwitch from './ControlComponent/SlidingSwitch.vue';
 import SwitchWithIcon from './ControlComponent/SwitchWithIcon.vue';
 import MapComponent from './MapComponent/MapComponent.vue';
 import { transfromMapComponentConfig } from './MapComponent/map.config';
-
-export enum FrontComponentCategory {
-  TEXT = 'text',
-  PICTURE = 'picture',
-  INSTRUMENT = 'instrument',
-  CONTROL = 'control',
-  MAP = 'map',
-}
-
-export const FrontComponentCategoryName = {
-  [FrontComponentCategory.TEXT]: '文本组件',
-  [FrontComponentCategory.INSTRUMENT]: '仪表组件',
-  [FrontComponentCategory.CONTROL]: '控制组件',
-  [FrontComponentCategory.PICTURE]: '图片组件',
-  [FrontComponentCategory.MAP]: '地图组件',
-};
-
-export enum FrontComponent {
-  TEXT_COMPONENT_1 = 'text-component-1',
-  TEXT_COMPONENT_2 = 'text-component-2',
-  TEXT_COMPONENT_3 = 'text-component-3',
-  TEXT_COMPONENT_4 = 'text-component-4',
-  TEXT_COMPONENT_5 = 'text-component-5',
-  INSTRUMENT_COMPONENT_1 = 'instrument-component-1',
-  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',
-  CONTROL_COMPONENT_SWITCH_WITH_ICON = 'control-component-switch-with-icon',
-  CONTROL_COMPONENT_SLIDING_SWITCH = 'control-component-sliding-switch',
-  MAP_COMPONENT_TRACK = 'map-component-track',
-}
-
-export interface ComponentConfig {
-  Component: Component;
-  ComponentKey: FrontComponent;
-  ComponentConfig?: Recordable;
-  ComponentCategory: FrontComponentCategory;
-  transformConfig: (
-    componentConfig: Recordable,
-    record: DataComponentRecord,
-    dataSourceRecord: DataSource
-  ) => Recordable;
-}
+import { ComponentConfig } from '../types/type';
+import { FrontComponent, FrontComponentCategory } from '../const/const';
 
 export const frontComponentDefaultConfigMap = new Map<FrontComponent, Partial<ComponentInfo>>();
 

+export enum FrontComponentCategory {
+  TEXT = 'text',
+  PICTURE = 'picture',
+  INSTRUMENT = 'instrument',
+  CONTROL = 'control',
+  MAP = 'map',
+}
+
+export const FrontComponentCategoryName = {
+  [FrontComponentCategory.TEXT]: '文本组件',
+  [FrontComponentCategory.INSTRUMENT]: '仪表组件',
+  [FrontComponentCategory.CONTROL]: '控制组件',
+  [FrontComponentCategory.PICTURE]: '图片组件',
+  [FrontComponentCategory.MAP]: '地图组件',
+};
+
+export enum FrontComponent {
+  TEXT_COMPONENT_1 = 'text-component-1',
+  TEXT_COMPONENT_2 = 'text-component-2',
+  TEXT_COMPONENT_3 = 'text-component-3',
+  TEXT_COMPONENT_4 = 'text-component-4',
+  TEXT_COMPONENT_5 = 'text-component-5',
+  INSTRUMENT_COMPONENT_1 = 'instrument-component-1',
+  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',
+  CONTROL_COMPONENT_SWITCH_WITH_ICON = 'control-component-switch-with-icon',
+  CONTROL_COMPONENT_SLIDING_SWITCH = 'control-component-sliding-switch',
+  MAP_COMPONENT_TRACK = 'map-component-track',
+}

@@ -11,8 +11,8 @@
   import type { ComponentInfo, DataSource } from '/@/api/dataBoard/model';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { DataBoardLayoutInfo } from '../../types/type';
-  import { FrontComponent } from '../../components/help';
   import { getDataSourceComponent } from './DataSourceForm/help';
+  import { FrontComponent } from '../../const/const';
 
   type DataSourceFormEL = { [key: string]: Nullable<FormActionType> };
 

@@ -12,7 +12,7 @@
   import { decode } from '../../config/config';
   import { ComponentInfo } from '/@/api/dataBoard/model';
   import { useCalcGridLayout } from '../../hook/useCalcGridLayout';
-  import { FrontComponent } from '../../components/help';
+  import { FrontComponent } from '../../const/const';
 
   interface DataComponentRouteParams extends RouteParams {
     id: string;
@@ -23,8 +23,6 @@
   }>();
 
   const emit = defineEmits(['update', 'create', 'register']);
-  const activeKey = ref('basicConfig');
-
   const ROUTE = useRoute();
 
   const { createMessage } = useMessage();
@@ -70,7 +68,6 @@
       unref(isEdit) ? handleUpdateComponent(value) : handleAddComponent(value);
       resetForm();
     } catch (error: unknown) {
-      if (unref(activeKey) !== 'basicConfig') activeKey.value = 'basicConfig';
       window.console.error(error);
     }
   };
@@ -138,7 +135,7 @@
     @cancel="resetForm"
   >
     <section>
-      <Tabs v-model:activeKey="activeKey" type="card">
+      <Tabs type="card">
         <Tabs.TabPane key="basicConfig" tab="基础配置">
           <BasicConfiguration
             ref="basicConfigurationEl"

 import { Component } from 'vue';
-import { FrontComponent } from '../../../components/help';
+import { FrontComponent } from '../../../const/const';
 import BasicDataSourceForm from './BasicDataSourceForm.vue';
 import ControlDataSourceForm from './ControlDataSourceForm.vue';
 

 <script lang="ts" setup>
   import { Tabs, List } from 'ant-design-vue';
   import VisualWidgetSelect from './VisualWidgetSelect.vue';
+  import { getComponentDefaultConfig } from '../../components/help';
+  import { frontComponentMap } from '../../components/help';
+  import { computed } from 'vue';
   import {
     FrontComponent,
     FrontComponentCategory,
     FrontComponentCategoryName,
-    getComponentDefaultConfig,
-  } from '../../components/help';
-  import { frontComponentMap } from '../../components/help';
-  import { computed } from 'vue';
+  } from '../../const/const';
 
   interface DataSource {
     category: string;

@@ -44,7 +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';
+  import { FrontComponent } from '../const/const';
 
   const ROUTE = useRoute();
 

+import { Component } from 'vue';
 import { Layout } from 'vue3-grid-layout';
+import { FrontComponent, FrontComponentCategory } from '../const/const';
+import { RadioRecord } from '../detail/config/util';
 import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
 
 export type FrontDataSourceRecord = DataSource;
@@ -8,3 +11,25 @@ export type DataBoardLayoutInfo = Layout & {
   width?: number;
   height?: number;
 };
+
+export interface ComponentConfig {
+  Component: Component;
+  ComponentKey: FrontComponent;
+  ComponentConfig?: Recordable;
+  ComponentCategory: FrontComponentCategory;
+  transformConfig: (
+    componentConfig: Recordable,
+    record: DataComponentRecord,
+    dataSourceRecord: DataSource
+  ) => Recordable;
+}
+
+export interface VisualComponentProps<Layout = Recordable, Value = Recordable> {
+  value?: Value;
+  layout?: Layout;
+  radio?: RadioRecord;
+  random?: boolean;
+  add?: (key: string, method: Fn) => void;
+  update?: () => void;
+  remove?: (key: string) => void;
+}