feat: add sliding switch component && switch with icon component

@@ -40,12 +40,9 @@
     .slider {
     .slider {
       width: 80px;
       width: 80px;
       height: 40px;
       height: 40px;
+      display: flex;
+      align-items: center;
       box-sizing: border-box;
       box-sizing: border-box;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
       border: 2px solid #ecf0f3;
       border: 2px solid #ecf0f3;
       border-radius: 20px;
       border-radius: 20px;
       box-shadow: -2px -2px 8px #fff, -2px -2px 12px hsl(0deg 0% 100% / 50%),
       box-shadow: -2px -2px 8px #fff, -2px -2px 12px hsl(0deg 0% 100% / 50%),
@@ -57,15 +54,14 @@
     }
     }
 
 
     .slider::after {
     .slider::after {
-      position: absolute;
       cursor: pointer;
       cursor: pointer;
       display: block;
       display: block;
       content: '';
       content: '';
       width: 24px;
       width: 24px;
       height: 24px;
       height: 24px;
       border-radius: 50%;
       border-radius: 50%;
-      top: 6px;
-      left: 6px;
+      margin-left: 6px;
+      margin-right: 6px;
       background-color: #ecf0f3;
       background-color: #ecf0f3;
       box-shadow: -2px -2px 8px #fff, -2px -2px 12px hsl(0deg 0% 100% / 50%),
       box-shadow: -2px -2px 8px #fff, -2px -2px 12px hsl(0deg 0% 100% / 50%),
         inset 2px 2px 4px hsl(0deg 0% 100% / 10%), 2px 2px 8px rgb(0 0 0 / 30%);
         inset 2px 2px 4px hsl(0deg 0% 100% / 10%), 2px 2px 8px rgb(0 0 0 / 30%);
@@ -80,13 +76,16 @@
     input:checked ~ .slider::after {
     input:checked ~ .slider::after {
       transform: translateX(35px);
       transform: translateX(35px);
     }
     }
+
     input:not(:checked) ~ .on {
     input:not(:checked) ~ .on {
       opacity: 0;
       opacity: 0;
-      transform: translateX(0px);
+      transform: translateX(0);
     }
     }
 
 
     .on,
     .on,
     .off {
     .off {
+      position: absolute;
+      top: 0;
       display: inline-block;
       display: inline-block;
       margin-left: 3px;
       margin-left: 3px;
       width: 34px;
       width: 34px;
@@ -97,7 +96,9 @@
     .on {
     .on {
       color: #039be5;
       color: #039be5;
     }
     }
+
     .off {
     .off {
+      right: 6px;
       color: #999;
       color: #999;
     }
     }
   }
   }

+<script lang="ts" setup>
+  import { Switch } from 'ant-design-vue';
+  import { computed } from 'vue';
+  import { DEFAULT_RADIO_RECORD, fontSize, RadioRecord } from '../../detail/config/util';
+  import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
+  import {
+    ControlComponentDefaultConfig,
+    ControlComponentValue,
+    ControlComponentLayout,
+  } from './control.config';
+  const props = withDefaults(
+    defineProps<{
+      layout?: ControlComponentLayout;
+      value?: ControlComponentValue;
+      radio?: RadioRecord;
+    }>(),
+    {
+      value: () => ControlComponentDefaultConfig,
+    }
+  );
+  const getRadio = computed(() => {
+    return props.radio || DEFAULT_RADIO_RECORD;
+  });
+</script>
+
+<template>
+  <div class="flex items-center w-full h-full p-4">
+    <div class="flex-auto flex truncate">
+      <SvgIcon
+        :name="props.value?.icon!"
+        prefix="iconfont"
+        :style="{
+          color: props.value?.iconColor,
+          width: fontSize({ radioRecord: getRadio, basic: 30, min: 16 }),
+          height: fontSize({ radioRecord: getRadio, basic: 30, min: 16 }),
+        }"
+      />
+      <span class="flex-auto mx-4 flex items-center truncate inline-block">属性名</span>
+    </div>
+    <Switch />
+  </div>
+</template>

 import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
 import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
 
 
-export interface ToggleSwitchValue {
+export interface ControlComponentLayout {
+  [key: string]: any;
+}
+
+export interface ControlComponentValue {
   value?: boolean;
   value?: boolean;
+  name?: string;
+  icon?: string;
+  iconColor?: string;
 }
 }
 
 
+export const ControlComponentDefaultConfig: ControlComponentValue = {
+  icon: 'shuiwen',
+  iconColor: '#367BFF',
+};
+
 export const transformControlConfig = (
 export const transformControlConfig = (
   _ComponentConfig: Recordable,
   _ComponentConfig: Recordable,
   _record: DataComponentRecord,
   _record: DataComponentRecord,
   dataSourceRecord: DataSource
   dataSourceRecord: DataSource
 ) => {
 ) => {
   return {
   return {
-    value: dataSourceRecord.componentInfo.value,
+    value: {
+      value: dataSourceRecord.componentInfo.value,
+      icon: dataSourceRecord.componentInfo.icon,
+    } as ControlComponentValue,
   };
   };
 };
 };

 import { Component } from 'vue';
 import { Component } from 'vue';
-import TextComponent from './TextComponent/TextComponent.vue';
 import {
 import {
   TextComponent1Config,
   TextComponent1Config,
   TextComponent3Config,
   TextComponent3Config,
@@ -9,8 +8,6 @@ import {
   transformTextComponentConfig,
   transformTextComponentConfig,
 } from './TextComponent/config';
 } from './TextComponent/config';
 import { ComponentInfo, DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
 import { ComponentInfo, DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
-import DashBoardComponent from './InstrumentComponent/DashBoardComponent.vue';
-import PictureComponent from './PictureComponent/PictureComponent.vue';
 import { transformPictureConfig } from './PictureComponent/pictureComponent.config';
 import { transformPictureConfig } from './PictureComponent/pictureComponent.config';
 import {
 import {
   DashboardComponentLayout,
   DashboardComponentLayout,
@@ -20,10 +17,16 @@ import {
   instrumentComponent2,
   instrumentComponent2,
   transformDashboardComponentConfig,
   transformDashboardComponentConfig,
 } from './InstrumentComponent/dashBoardComponent.config';
 } from './InstrumentComponent/dashBoardComponent.config';
-import DigitalDashBoard from './InstrumentComponent/DigitalDashBoard.vue';
 import { DigitalComponentDefaultConfig } from './InstrumentComponent/digitalDashBoard.config';
 import { DigitalComponentDefaultConfig } from './InstrumentComponent/digitalDashBoard.config';
+import { transformControlConfig } from './ControlComponent/control.config';
+
+import TextComponent from './TextComponent/TextComponent.vue';
+import DashBoardComponent from './InstrumentComponent/DashBoardComponent.vue';
+import PictureComponent from './PictureComponent/PictureComponent.vue';
+import DigitalDashBoard from './InstrumentComponent/DigitalDashBoard.vue';
 import ToggleSwitch from './ControlComponent/ToggleSwitch.vue';
 import ToggleSwitch from './ControlComponent/ToggleSwitch.vue';
-import { transformControlConfig } from './ControlComponent/toggleSwitch.config';
+import SlidingSwitch from './ControlComponent/SlidingSwitch.vue';
+import SwitchWithIcon from './ControlComponent/SwitchWithIcon.vue';
 
 
 export enum FrontComponentCategory {
 export enum FrontComponentCategory {
   TEXT = 'text',
   TEXT = 'text',
@@ -52,6 +55,8 @@ export enum FrontComponent {
   DIGITAL_DASHBOARD_COMPONENT = 'digital-dashboard-component',
   DIGITAL_DASHBOARD_COMPONENT = 'digital-dashboard-component',
   PICTURE_COMPONENT_1 = 'picture-component-1',
   PICTURE_COMPONENT_1 = 'picture-component-1',
   CONTROL_COMPONENT_TOGGLE_SWITCH = 'control-component-toggle-switch',
   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',
 }
 }
 
 
 export interface ComponentConfig {
 export interface ComponentConfig {
@@ -138,6 +143,20 @@ frontComponentMap.set(FrontComponent.PICTURE_COMPONENT_1, {
   transformConfig: transformPictureConfig,
   transformConfig: transformPictureConfig,
 });
 });
 
 
+frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_SWITCH_WITH_ICON, {
+  Component: SwitchWithIcon,
+  ComponentKey: FrontComponent.CONTROL_COMPONENT_SWITCH_WITH_ICON,
+  ComponentCategory: FrontComponentCategory.CONTROL,
+  transformConfig: transformControlConfig,
+});
+
+frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_SLIDING_SWITCH, {
+  Component: SlidingSwitch,
+  ComponentKey: FrontComponent.CONTROL_COMPONENT_SLIDING_SWITCH,
+  ComponentCategory: FrontComponentCategory.CONTROL,
+  transformConfig: transformControlConfig,
+});
+
 frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH, {
 frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH, {
   Component: ToggleSwitch,
   Component: ToggleSwitch,
   ComponentKey: FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH,
   ComponentKey: FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH,

@@ -2,7 +2,7 @@
   import { CopyOutlined, DeleteOutlined, SettingOutlined } from '@ant-design/icons-vue';
   import { CopyOutlined, DeleteOutlined, SettingOutlined } from '@ant-design/icons-vue';
   import { Tooltip, Button } from 'ant-design-vue';
   import { Tooltip, Button } from 'ant-design-vue';
   import { FormActionType, useForm } from '/@/components/Form';
   import { FormActionType, useForm } from '/@/components/Form';
-  import { basicSchema, dataSourceSchema } from '../config/basicConfiguration';
+  import { basicSchema } from '../config/basicConfiguration';
   import BasicForm from '/@/components/Form/src/BasicForm.vue';
   import BasicForm from '/@/components/Form/src/BasicForm.vue';
   import { ref, shallowReactive, unref, nextTick, watch } from 'vue';
   import { ref, shallowReactive, unref, nextTick, watch } from 'vue';
   import VisualOptionsModal from './VisualOptionsModal.vue';
   import VisualOptionsModal from './VisualOptionsModal.vue';
@@ -13,6 +13,7 @@
   import { DataBoardLayoutInfo } from '../../types/type';
   import { DataBoardLayoutInfo } from '../../types/type';
   import { FrontComponent } from '../../components/help';
   import { FrontComponent } from '../../components/help';
   import { computed } from '@vue/reactivity';
   import { computed } from '@vue/reactivity';
+  import BasicDataSourceForm from './DataSourceForm/BasicDataSourceForm.vue';
 
 
   type DataSourceFormEL = { [key: string]: Nullable<FormActionType> };
   type DataSourceFormEL = { [key: string]: Nullable<FormActionType> };
 
 
@@ -196,17 +197,7 @@
         选择设备
         选择设备
       </div>
       </div>
       <div class="pl-2 flex-auto">
       <div class="pl-2 flex-auto">
-        <BasicForm
-          :ref="(el) => setFormEl(el, item.id)"
-          :schemas="dataSourceSchema"
-          class="w-full flex-1 data-source-form"
-          :show-action-button-group="false"
-          :row-props="{
-            gutter: 10,
-          }"
-          layout="inline"
-          :label-col="{ span: 0 }"
-        />
+        <BasicDataSourceForm :ref="(el) => setFormEl(el, item.id)" />
       </div>
       </div>
       <div class="flex justify-center gap-3 w-24">
       <div class="flex justify-center gap-3 w-24">
         <Tooltip title="复制">
         <Tooltip title="复制">

+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { dataSourceSchema } from '../../config/basicConfiguration';
+  import { FormActionType } from '/@/components/Form';
+  import BasicForm from '/@/components/Form/src/BasicForm.vue';
+  const formEl = ref<Nullable<FormActionType>>(null);
+
+  defineExpose({ formActionType: formEl });
+</script>
+
+<template>
+  <BasicForm
+    ref="formEl"
+    :schemas="dataSourceSchema"
+    class="w-full flex-1 data-source-form"
+    :show-action-button-group="false"
+    :row-props="{
+      gutter: 10,
+    }"
+    layout="inline"
+    :label-col="{ span: 0 }"
+  />
+</template>

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