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

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
 })

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

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) {

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>