feat: 新增主题色选项

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

@@ -1,7 +1,7 @@
 <template>
   <div
     class="go-edit-range"
-    :style="useSizeStyle(size)"
+    :style="style"
     @mousedown="mousedownHandleUnStop($event, undefined)"
   >
     <slot></slot>
@@ -9,21 +9,37 @@
 </template>
 
 <script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useSizeStyle } from '../../hooks/useStyle.hook'
 import { mousedownHandleUnStop } from '../../hooks/useDrop.hook'
 
-const size = {
-  w: 1920,
-  h: 1080
-}
+const chartEditStoreStore = useChartEditStoreStore()
 
+const canvasConfig = ref(chartEditStoreStore.getEditCanvasConfig)
+
+const size = computed(() => {
+  return {
+    w: canvasConfig.value.width,
+    h: canvasConfig.value.height
+  }
+})
+
+const background = computed(() => {
+  const background = canvasConfig.value.background
+  return background ? background : '#232324'
+})
+
+const style = computed(() => {
+  // @ts-ignore
+  return { ...useSizeStyle(size.value), background: background.value }
+})
 </script>
 
 <style lang="scss" scoped>
 @include go(edit-range) {
   position: relative;
   border: 1px solid;
-  background-color: #333;
   border-radius: 15px;
   @include filter-bg-color('background-color2');
   @include fetch-theme('box-shadow');

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

@@ -17,9 +17,6 @@
         @click="handleClick"
       >
         <span class="btn-text">历史记录</span>
-        <!-- <n-icon class="lock-icon" size="18" :depth="2">
-          <TimeOutlineIcon />
-        </n-icon> -->
       </n-button>
     </n-dropdown>
 
@@ -48,7 +45,6 @@ import {
 } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
 
 const {
-  TimeOutlineIcon,
   DesktopOutlineIcon,
   PencilIcon,
   TrashIcon,

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

@@ -45,7 +45,6 @@ export const handleDragOver = (e: DragEvent) => {
   if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
 }
 
-
 // * 不拦截默认行为点击
 export const mousedownHandleUnStop = (
   e: MouseEvent,

src/views/chart/ContentEdit/index.vue

@@ -30,6 +30,7 @@
             class="edit-content-chart"
             :is="item.key"
             :chartData="item"
+            :themeData="themeData"
             :style="useSizeStyle(item.attr)"
           />
         </ShapeBox>
@@ -43,7 +44,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { ContentBox } from '../ContentBox/index'
 import { EditRange } from './components/EditRange'
 import { EditBottom } from './components/EditBottom'
@@ -56,9 +57,9 @@ import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { getChartEditStore } from './hooks/useStore.hook'
 import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
 import { CreateComponentType } from '@/packages/index.d'
+import { chartColors } from '@/settings/chartThemes/index'
 
 const chartEditStore = getChartEditStore()
-
 const { handleContextMenu } = useContextMenu()
 
 // 布局处理
@@ -68,6 +69,14 @@ useLayout()
 const editRangeRef = ref<HTMLElement | null>(null)
 const { mouseenterHandle, mouseleaveHandle, mousedownHandle } = useMouseHandle()
 
+// 主题色注入
+const themeData = computed(() => {
+  const theme = chartEditStore.getEditCanvasConfig.chartTheme
+  if(theme === 'dark') return 'dark'
+  //  @ts-ignore
+  return chartColors[theme]
+})
+
 // 键盘事件
 onMounted(() => {
   useAddKeyboard()