fix: 解决动态变更颜色，部分组件不会更新的问题

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

@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, watch } from 'vue'
+import { reactive, computed, watch } from 'vue'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
@@ -21,7 +21,6 @@ import throttle from 'lodash/throttle'
 import cloneDeep from 'lodash/cloneDeep'
 // 全局颜色
 const designStore = useDesignStore()
-const themeColor = ref(designStore.getAppTheme)
 
 const chartEditStore = useChartEditStore()
 const settingStore = useSettingStore()
@@ -49,6 +48,11 @@ const useComponentStyle = (attr?: Partial<{ x: number; y: number }>) => {
   return componentStyle
 }
 
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
 // * 吸附距离
 const minDistance = computed(() => {
   return settingStore.getChartAlignRange

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

@@ -11,13 +11,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs } from 'vue'
+import { toRefs, computed } from 'vue'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 
 const chartEditStore = useChartEditStore()
 const designStore = useDesignStore()
-const themeColor = ref(designStore.getAppTheme)
 
 const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
 
@@ -34,6 +33,12 @@ const lines = {
   h: [],
   v: []
 }
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
 </script>
 
 <style>

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

@@ -6,7 +6,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, watch } from 'vue'
+import { ref, toRefs, watch, computed } from 'vue'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useSizeStyle, useComponentStyle } from '../../hooks/useStyle.hook'
@@ -14,10 +14,13 @@ import { selectBoxIndex } from '@/settings/designSetting'
 
 // 全局颜色
 const designStore = useDesignStore()
-const themeColor = ref(designStore.getAppTheme)
 const chartEditStore = useChartEditStore()
 const { isSelect, scale } = toRefs(chartEditStore.getEditCanvas)
 
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
 // 位置
 const positionStyle = ref()
 

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

@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, PropType } from 'vue'
+import { computed, PropType } from 'vue'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
@@ -39,9 +39,7 @@ const props = defineProps({
   }
 })
 
-// 全局颜色
 const designStore = useDesignStore()
-const themeColor = ref(designStore.getAppTheme)
 const chartEditStore = useChartEditStore()
 
 // 锚点
@@ -50,6 +48,11 @@ const pointList = ['t', 'r', 'b', 'l', 'lt', 'rt', 'lb', 'rb']
 // 光标朝向
 const cursorResize = ['n', 'e', 's', 'w', 'nw', 'ne', 'sw', 'se']
 
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
 // 计算当前选中目标
 const hover = computed(() => {
   return props.item.id === chartEditStore.getTargetChart.hoverId