From a6d1baec3ecc1a016ba2109dbd09e0aa8871276d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Fri, 19 Aug 2022 10:02:09 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E5=8F=98=E6=9B=B4=E9=A2=9C=E8=89=B2=EF=BC=8C=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=B8=8D=E4=BC=9A=E6=9B=B4=E6=96=B0=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CanvasPage/components/ChartThemeColor/index.vue      | 9 +++++++--
 .../components/ChartAnimation/index.vue                  | 8 ++++++--
 .../ChartData/components/ChartDataAjax/index.vue         | 8 ++++++--
 .../components/RequestGlobalConfig/index.vue             | 7 +++++--
 .../chart/ContentEdit/components/EditAlignLine/index.vue | 8 ++++++--
 .../chart/ContentEdit/components/EditRule/index.vue      | 9 +++++++--
 .../chart/ContentEdit/components/EditSelect/index.vue    | 7 +++++--
 .../chart/ContentEdit/components/EditShapeBox/index.vue  | 9 ++++++---
 .../components/LayersGroupListItem/index.vue             | 6 +++++-
 .../ContentLayers/components/LayersListItem/index.vue    | 8 ++++++--
 10 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue
index 18c43f66..8313bda2 100644
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed } from 'vue'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import {
@@ -46,8 +46,13 @@ const chartEditStore = useChartEditStore()
 
 // 全局颜色
 const designStore = useDesignStore()
-const themeColor = ref(designStore.getAppTheme)
 
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+// 选中名称
 const selectName = computed(() => {
   return chartEditStore.getEditCanvasConfig.chartThemeColor
 })
diff --git a/src/views/chart/ContentConfigurations/components/ChartAnimation/index.vue b/src/views/chart/ContentConfigurations/components/ChartAnimation/index.vue
index 86151033..b4b716fc 100644
--- a/src/views/chart/ContentConfigurations/components/ChartAnimation/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartAnimation/index.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { animations } from '@/settings/animations/index'
 import { CollapseItem } from '@/components/Pages/ChartItemSetting'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
@@ -42,12 +42,16 @@ import { useTargetData } from '../hooks/useTargetData.hook'
 
 // 全局颜色
 const designStore = useDesignStore()
-const themeColor = ref(designStore.getAppTheme)
 
 const hoverPreviewAnimate = ref('')
 
 const { targetData } = useTargetData()
 
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
 // * 选中的动画样式
 const activeIndex = (value: string) => {
   const selectValue = targetData.value.styles.animations
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
index b5dfdb20..3b49e509 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
@@ -84,7 +84,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, onBeforeUnmount, watchEffect, toRaw } from 'vue'
+import { ref, toRefs, computed, onBeforeUnmount, watchEffect, toRaw } from 'vue'
 import { icon } from '@/plugins'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
@@ -108,7 +108,6 @@ const {
   requestIntervalUnit: GlobalRequestIntervalUnit
 } = toRefs(chartEditStore.getRequestGlobalConfig)
 const designStore = useDesignStore()
-const themeColor = ref(designStore.getAppTheme)
 
 // 是否展示数据分析
 const loading = ref(false)
@@ -142,6 +141,11 @@ const sendHandle = async () => {
   }
 }
 
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
 watchEffect(() => {
   const filter = targetData.value?.filter
   if (lastFilter !== filter && firstFocus) {
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalConfig/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalConfig/index.vue
index 5af26725..9ffffe07 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalConfig/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalConfig/index.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs } from 'vue'
+import { ref, toRefs, computed } from 'vue'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
@@ -79,9 +79,12 @@ const { requestOriginUrl, requestInterval, requestIntervalUnit } = toRefs(chartE
 const editDisabled = ref(true)
 
 const designStore = useDesignStore()
-const themeColor = ref(designStore.getAppTheme)
 
 const showTable = ref(false)
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue
index 8fd12d3d..21cd161f 100644
--- a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue
+++ b/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
diff --git a/src/views/chart/ContentEdit/components/EditRule/index.vue b/src/views/chart/ContentEdit/components/EditRule/index.vue
index 74bcd0c4..fc2c4588 100644
--- a/src/views/chart/ContentEdit/components/EditRule/index.vue
+++ b/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>
diff --git a/src/views/chart/ContentEdit/components/EditSelect/index.vue b/src/views/chart/ContentEdit/components/EditSelect/index.vue
index c7d37836..e307e118 100644
--- a/src/views/chart/ContentEdit/components/EditSelect/index.vue
+++ b/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()
 
diff --git a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
index bfa14b47..dc521ad8 100644
--- a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
+++ b/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
diff --git a/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue b/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue
index 26bd65c3..9c4fb019 100644
--- a/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue
+++ b/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue
@@ -70,9 +70,13 @@ const { FolderIcon, FolderOpenIcon } = icon.ionicons5
 const chartEditStore = useChartEditStore()
 const { handleContextMenu, onClickOutSide } = useContextMenu()
 
-const themeColor = ref(designStore.getAppTheme)
 const expend = ref(false)
 
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
 // 右键
 const optionsHandle = (
   targetList: MenuOptionsItemType[],
diff --git a/src/views/chart/ContentLayers/components/LayersListItem/index.vue b/src/views/chart/ContentLayers/components/LayersListItem/index.vue
index 2ca255c5..43e5311e 100644
--- a/src/views/chart/ContentLayers/components/LayersListItem/index.vue
+++ b/src/views/chart/ContentLayers/components/LayersListItem/index.vue
@@ -22,16 +22,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, computed } from 'vue'
+import { toRefs, computed } from 'vue'
 import { requireErrorImg } from '@/utils'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
 // 全局颜色
 const designStore = useDesignStore()
-const themeColor = ref(designStore.getAppTheme)
 const chartEditStore = useChartEditStore()
 
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
 const props = defineProps({
   componentData: {
     type: Object,