feat: 新增组件预览

src/views/chart/ContentCharts/components/ItemBox/index.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, toRaw } from 'vue'
 import { MacOsControlBtn } from '@/components/MacOsControlBtn/index'
 import { componentInstall } from '@/utils'
 import { DragKeyEnum } from '@/enums/editPageEnum'
@@ -37,9 +37,10 @@ defineProps({
 // 拖拽处理
 const handleDragStart = (e: DragEvent, item: ConfigType) => {
   // 动态注册图表组件
-  componentInstall(item.key, item.node)
+  componentInstall(item.key, item.node())
+  componentInstall(item.conKey, item.conNode())
   // 将配置项绑定到拖拽属性上
-  e!.dataTransfer!.setData(DragKeyEnum.DROG_KEY, JSON.stringify(omit(item, ['node', 'image'])))
+  e!.dataTransfer!.setData(DragKeyEnum.DROG_KEY, JSON.stringify(omit(item, ['node', 'conNode', 'image'])))
 }
 </script>
 

src/views/chart/ContentConfigurations/components/ChartSetting/index.vue

@@ -16,7 +16,7 @@
     <!-- 位置 -->
     <PositionSetting :chartAttr="targetData.attr" />
     <!-- 自定义配置项 -->
-    <component :is="targetData.chartConfig.conNode()" :optionData="targetData.option"></component>
+    <component :is="targetData.chartConfig.conKey" :optionData="targetData.option"></component>
     <!-- 全局设置 --> 
     <GlobalSetting :optionData="targetData.option" :in-chart="true" />
   </div>
@@ -24,15 +24,11 @@
 
 <script setup lang="ts">
 import { computed, Ref } from 'vue'
-import { loadAsyncComponent } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { GlobalSetting, PositionSetting, SizeSetting } from '@/components/ChartItemSetting/index'
 import { CreateComponentType } from '@/packages/index.d'
 import { SettingItemBox } from '@/components/ChartItemSetting/index'
 
-const GlobalSettingCom = loadAsyncComponent(() =>
-  import('@/components/ChartItemSetting/index')
-)
 const chartEditStore = useChartEditStore()
 
 const targetData: Ref<CreateComponentType> = computed(() => {

src/views/chart/ContentEdit/components/EditAlignLine/index.vue

@@ -312,7 +312,7 @@ watch(
     border-width: 1px;
     border-style: solid;
     border-color: v-bind('themeColor');
-    opacity: 0.3;
+    opacity: 0.7;
     &.visible {
       display: block;
     }