fix: 修改文件结构

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

@@ -0,0 +1,3 @@
+import EditBottom from './index.vue'
+
+export { EditBottom }

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

@@ -0,0 +1,188 @@
+<template>
+  <div class="go-edit-bottom">
+    <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
+        :disabled="lockScale"
+        class="scale-btn"
+        v-model:value="filterValue"
+        size="mini"
+        :options="filterOptions"
+        @update:value="selectHandle"
+      />
+
+      <!-- 锁定缩放 -->
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <n-button @click="lockHandle" text>
+            <n-icon
+              class="lock-icon"
+              :class="{ color: lockScale }"
+              size="18"
+              :depth="3"
+            >
+              <LockClosedOutlineIcon v-if="lockScale" />
+              <LockOpenOutlineIcon v-else />
+            </n-icon>
+          </n-button>
+        </template>
+        <span>{{ lockScale ? '解锁' : '锁定' }}当前比例</span>
+      </n-tooltip>
+
+      <!-- 拖动 -->
+      <n-slider
+        class="scale-slider"
+        v-model:value="sliderValue"
+        :default-value="50"
+        :min="10"
+        :max="200"
+        :step="5"
+        :format-tooltip="v => `${v}%`"
+        :disabled="lockScale"
+        :marks="sliderMaks"
+        @update:value="sliderHandle"
+      />
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+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 { useDesignStore } from '@/store/modules/designStore/designStore'
+
+// 全局颜色
+const designStore = useDesignStore()
+const themeColor = ref(designStore.getAppTheme)
+
+const chartEditStore = getChartEditStore()
+const chartEditStoreEnum = getChartEditStoreEnum()
+const { lockScale, scale } = toRefs(chartEditStore.getEditCanvas)
+
+// 缩放选项
+let filterOptions = [
+  {
+    label: '自适应',
+    value: 0
+  },
+  {
+    label: '50%',
+    value: 50
+  },
+  {
+    label: '100%',
+    value: 100
+  },
+  {
+    label: '150%',
+    value: 150
+  },
+  {
+    label: '200%',
+    value: 200
+  }
+]
+
+// 选择值
+const filterValue = ref('')
+
+// 用户自选择
+const selectHandle = (v: number) => {
+  if (v === 0) {
+    chartEditStore.computedScale()
+    return
+  }
+  chartEditStore.setScale(v / 100)
+}
+
+// 点击锁处理
+const lockHandle = () => {
+  chartEditStore.setEditCanvasItem(
+    chartEditStoreEnum.LOCK_SCALE,
+    !lockScale.value
+  )
+}
+
+// 拖动
+const sliderValue = ref(100)
+
+// 拖动处理
+const sliderHandle = (v: number) => {
+  chartEditStore.setScale(v / 100)
+}
+
+const sliderMaks = reactive({
+  100: ''
+})
+
+// 快捷键
+const shortcutKeyOptions = [
+  {
+    label: '键盘快捷键列表',
+    value: '1'
+  },
+  {
+    label: 'Ctrl + C 复制',
+    value: '2'
+  }
+]
+
+// 监听 scale 变化
+watchEffect(() => {
+  const value = (scale.value * 100).toFixed(0)
+  filterValue.value = `${value}%`
+  sliderValue.value = parseInt(value)
+})
+</script>
+
+<style lang="scss" scoped>
+@include go(edit-bottom) {
+  width: 100%;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .bottom-ri {
+    position: relative;
+    top: 15px;
+    .lock-icon {
+      padding-top: 4px;
+      &.color {
+        color: v-bind('themeColor');
+      }
+    }
+    .scale-btn {
+      font-size: 12px;
+      @include deep() {
+        .n-base-selection-label {
+          padding: 3px;
+        }
+      }
+    }
+    .scale-slider {
+      position: relative;
+      top: -4px;
+      width: 200px;
+    }
+  }
+}
+</style>

src/views/chart/ContentEdit/components/EditRange/index.ts

@@ -0,0 +1,3 @@
+import EditRange from './index.vue'
+
+export { EditRange }

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

@@ -0,0 +1,22 @@
+<template>
+  <div class="go-edit-range">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+@include go(edit-range) {
+  position: relative;
+  height: 1080px;
+  width: 1920px;
+  border: 1px solid;
+  background-color: #333;
+  border-radius: 15px;
+  @include filter-bg-color('background-color2');
+  @include fetch-theme('box-shadow');
+  @include filter-border-color('hover-border-color');
+  @include fetch-theme-custom('border-color', 'background-color4');
+}
+</style>

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

@@ -0,0 +1,44 @@
+import { toRefs } from 'vue'
+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 = async (e: DragEvent) => {
+  e.preventDefault()
+  const Loading = window['$loading']
+  try {
+    Loading.start()
+
+    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(`图表正在研发中, 敬请期待...`)
+  }
+}
+
+// * 拖拽结束
+export const handleDragOver = (e: DragEvent) => {
+  e.preventDefault()
+  e.stopPropagation()
+  if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
+}

src/views/chart/ContentEdit/hooks/useLayout.hook.ts

@@ -0,0 +1,29 @@
+import { onUnmounted, onMounted } from 'vue'
+import { getChartEditStore } from './useStore.hook'
+import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+
+const chartEditStore = getChartEditStore()
+
+export const useLayout = () => {
+  onMounted(() => {
+    // 设置 Dom 值(ref 不生效先用 document)
+    chartEditStore.setEditCanvasItem(
+      EditCanvasTypeEnum.EDIT_LAYOUT_DOM,
+      document.getElementById('go-chart-edit-layout')
+    )
+    chartEditStore.setEditCanvasItem(
+      EditCanvasTypeEnum.EDIT_CONTENT_DOM,
+      document.getElementById('go-chart-edit-content')
+    )
+
+    // 大小初始化
+    chartEditStore.setPageSize()
+
+    // 监听初始化
+    const removeScale = chartEditStore.listenerScale()
+
+    onUnmounted(() => {
+      removeScale()
+    })
+  })
+}

src/views/chart/ContentEdit/hooks/useStore.hook.ts

@@ -0,0 +1,10 @@
+import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+const chartEditStore = useChartEditStoreStore()
+
+export const getChartEditStore = () => {
+  return chartEditStore
+}
+export const getChartEditStoreEnum = () => {
+  return EditCanvasTypeEnum
+}

src/views/chart/ContentEdit/index.ts

@@ -0,0 +1,3 @@
+import ContentEdit from './index.vue'
+
+export { ContentEdit }

src/views/chart/ContentEdit/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <ContentBox
+    id="go-chart-edit-layout"
+    ref="editDomRef"
+    :flex="true"
+    :showTop="false"
+    :showBottom="true"
+    :depth="1"
+    @drop="handleDrop"
+    @dragover="handleDragOver"
+  >
+    <div id="go-chart-edit-content">
+      <!-- 中间区域 -->
+      <EditRange>
+        <!-- 组件名称会重复，必须使用 id -->
+        <component
+          class="edit-content-chart" 
+          v-for="item in chartEditStore.getComponentList"
+          :key="item.id"
+          :is="item.key"
+          :chartData="item"
+        />
+      </EditRange>
+    </div>
+    <!-- 底部控制 -->
+    <template #bottom>
+      <EditBottom />
+    </template>
+  </ContentBox>
+</template>
+
+<script lang="ts" setup>
+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()
+</script>
+
+<style lang="scss" scoped>
+@include goId(chart-edit-layout) {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  @include background-image("background-point");
+  @extend .go-point-bg;
+  @include goId(chart-edit-content) {
+    position: relative;
+    top: 20px;
+    left: 20px;
+    transform-origin: left top;
+    border: 1px solid rgba(0, 0, 0, 0);
+    overflow: hidden;
+    @extend .go-transition;
+    &.content-resize {
+      border-radius: 15px;
+      @include hover-border-color("hover-border-color");
+    }
+    .edit-content-chart{
+      position: absolute;
+    }
+  }
+}
+</style>