fix: 新增组件拖拽

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

@@ -1,13 +1,18 @@
 <template>
   <div class="go-edit-bottom">
-    <n-popselect :options="shortcutKeyOptions" size="medium">
-      <n-button class="scale-btn" secondary size="mini">
-        <n-icon class="lock-icon" size="18" :depth="2">
-          <DicomOverlayIcon />
-        </n-icon>
-      </n-button>
-    </n-popselect>
-
+    <n-space>
+      <n-text>
+        滤镜设置
+      </n-text>
+      <!-- 快捷键提示 -->
+      <n-popselect :options="shortcutKeyOptions" size="medium">
+        <n-button class="scale-btn" secondary size="mini">
+          <n-icon class="lock-icon" size="18" :depth="3">
+            <DicomOverlayIcon />
+          </n-icon>
+        </n-button>
+      </n-popselect>
+    </n-space>
     <n-space class="bottom-ri">
       <!-- 缩放比例 -->
       <n-select
@@ -55,11 +60,14 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, toRefs, shallowReactive, watchEffect } from 'vue'
+import { reactive, ref, toRefs, watchEffect } from 'vue'
 import { icon } from '@/plugins'
 const { LockClosedOutlineIcon, LockOpenOutlineIcon } = icon.ionicons5
 const { DicomOverlayIcon } = icon.carbon
-import { getChartEditStore, getChartEditStoreEnum } from '../../hooks/useStore.hook'
+import {
+  getChartEditStore,
+  getChartEditStoreEnum
+} from '../../hooks/useStore.hook'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 
 // 全局颜色
@@ -71,7 +79,7 @@ const chartEditStoreEnum = getChartEditStoreEnum()
 const { lockScale, scale } = toRefs(chartEditStore.getEditCanvas)
 
 // 缩放选项
-let filterOptions = reactive([
+let filterOptions = [
   {
     label: '自适应',
     value: 0
@@ -92,7 +100,7 @@ let filterOptions = reactive([
     label: '200%',
     value: 200
   }
-])
+]
 
 // 选择值
 const filterValue = ref('')
@@ -127,7 +135,7 @@ const sliderMaks = reactive({
 })
 
 // 快捷键
-const shortcutKeyOptions = shallowReactive([
+const shortcutKeyOptions = [
   {
     label: '键盘快捷键列表',
     value: '1'
@@ -136,7 +144,7 @@ const shortcutKeyOptions = shallowReactive([
     label: 'Ctrl + C 复制',
     value: '2'
   }
-])
+]
 
 // 监听 scale 变化
 watchEffect(() => {

src/views/chart/components/ContentEdit/hooks/useDrop.hook.ts

@@ -3,27 +3,36 @@ import { useThrottleFn } from '@vueuse/core'
 import { getChartEditStore } from './useStore.hook'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { DragKeyEnum } from '@/enums/editPageEnum'
+import { createComponent } from '@/packages'
+import { ConfigType } from '@/packages/index.d'
 
 const chartEditStore = getChartEditStore()
 const { scale } = toRefs(chartEditStore.getEditCanvas)
 
 // * 拖拽中
-export const handleDrop = (e: DragEvent) => {
+export const handleDrop = async (e: DragEvent) => {
   e.preventDefault()
   const Loading = window['$loading']
   try {
     Loading.start()
 
-    const chartName = e!.dataTransfer!.getData(DragKeyEnum.DROG_KEY)
-    console.log(chartName)
-    chartEditStore.setMousePosition(e.offsetX, e.offsetY)
+    const drayDataString = e!.dataTransfer!.getData(DragKeyEnum.DROG_KEY)
+
+    const dropData: Exclude<ConfigType, ['node', 'image']> = JSON.parse(
+      drayDataString
+    )
+
+    let newComponent= await createComponent(dropData)
+    newComponent.setPosition(e.offsetX, e.offsetY)
+    
+    chartEditStore.addComponentList(newComponent)
 
     setTimeout(() => {
       Loading.finish()
     })
   } catch (error) {
     Loading.error()
-    window['$message'].success(`添加图表失败，请保存数据后刷新重试`)
+    window['$message'].success(`图表正在研发中, 敬请期待...`)
   }
 }
 

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

@@ -11,7 +11,12 @@
   >
     <div id="go-chart-edit-content">
       <!-- 中间区域 -->
-      <EditRange></EditRange>
+      <EditRange>
+        <!-- 组件名称会重复，必须使用 id -->
+        <div v-for="item in chartEditStore.getComponentList" :key="item.id">
+          <component :is="item.key" />
+        </div>
+      </EditRange>
     </div>
     <!-- 底部控制 -->
     <template #bottom>
@@ -21,12 +26,15 @@
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, onMounted,toRefs } from 'vue'
+import { onUnmounted, onMounted, toRefs } from 'vue'
 import { ContentBox } from '../ContentBox/index'
 import { EditRange } from './components/EditRange'
 import { EditBottom } from './components/EditBottom'
 import { useLayout } from './hooks/useLayout.hook'
 import { handleDrop, handleDragOver } from './hooks/useDrop.hook'
+import { getChartEditStore } from './hooks/useStore.hook'
+
+const chartEditStore = getChartEditStore()
 
 // 布局处理
 useLayout()