修复图标透明度错误

PBH-BTN · Jan 10, 2025 · 048e92b · 048e92b
1 parent 93fd07f
commit 048e92b
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 41 deletions.
diff --git a/webui/src/views/charts/components/banTrends.vue b/webui/src/views/charts/components/banTrends.vue
@@ -99,7 +99,18 @@ const option = reactive({
   range: [dayjs().startOf('day').add(-7, 'day').toDate(), new Date()]
 })
 
-const usedOption = computed(() => chartOptions.value)
+const usedOption = computed(() => ({
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: darkStore.isDark ? '#333335' : '#ffffff',
+    borderColor: darkStore.isDark ? '#333335' : '#ffffff',
+    textStyle: {
+      color: darkStore.isDark ? 'rgba(255, 255, 255, 0.7)' : undefined
+    }
+  },
+  backgroundColor: darkStore.isDark ? 'rgba(0, 0, 0, 0.0)' : undefined,
+  ...chartOptions.value
+}))
 
 const chartOptions = ref({
   xAxis: {
@@ -109,14 +120,6 @@ const chartOptions = ref({
   yAxis: {
     type: 'value'
   },
-  tooltip: {
-    trigger: 'axis',
-    backgroundColor: darkStore.isDark ? '#333335' : '',
-    borderColor: darkStore.isDark ? '#333335' : '',
-    textStyle: {
-      color: darkStore.isDark ? 'rgba(255, 255, 255, 0.7)' : ''
-    }
-  },
   grid: {
     left: '15%'
   },
@@ -126,8 +129,7 @@ const chartOptions = ref({
       type: 'line',
       name: t('page.charts.line.options.field')
     }
-  ],
-  backgroundColor: darkStore.isDark ? 'rgba(0, 0, 0, 0.0)' : undefined
+  ]
 })
 
 watch(option, (v) => {

diff --git a/webui/src/views/charts/components/fieldPie.vue b/webui/src/views/charts/components/fieldPie.vue
@@ -97,19 +97,22 @@ const loadingOptions = computed(() => ({
 }))
 const err = ref<Error>()
 
-const usedOption = computed(() => chartOption.value)
-
-const chartOption = ref({
+const usedOption = computed(() => ({
   tooltip: {
     trigger: 'item',
     appendToBody: true,
     formatter: '<p style="word-wrap:break-all"><b>{b}</b></p>  {c} ({d}%)',
-    backgroundColor: darkStore.isDark ? '#333335' : '',
-    borderColor: darkStore.isDark ? '#333335' : '',
+    backgroundColor: darkStore.isDark ? '#333335' : '#ffffff',
+    borderColor: darkStore.isDark ? '#333335' : '#ffffff',
     textStyle: {
-      color: darkStore.isDark ? 'rgba(255, 255, 255, 0.7)' : ''
+      color: darkStore.isDark ? 'rgba(255, 255, 255, 0.7)' : undefined
     }
   },
+  backgroundColor: darkStore.isDark ? 'rgba(0, 0, 0, 0.0)' : undefined,
+  ...chartOption.value
+}))
+
+const chartOption = ref({
   legend: {
     orient: 'vertical',
     left: 'right',
@@ -126,7 +129,6 @@ const chartOption = ref({
       show: true
     }
   },
-  backgroundColor: darkStore.isDark ? 'rgba(0, 0, 0, 0.0)' : undefined,
   series: [
     {
       name: t('page.charts.options.field.' + option.field),

diff --git a/webui/src/views/charts/components/ispPie.vue b/webui/src/views/charts/components/ispPie.vue
@@ -130,19 +130,22 @@ const loadingOptions = computed(() => ({
   maskColor: darkStore.isDark ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.4)'
 }))
 
-const usedOption = computed(() => chartOption.value)
-
-const chartOption = ref({
+const usedOption = computed(() => ({
   tooltip: {
     trigger: 'item',
     appendToBody: true,
     formatter: '<p style="word-wrap:break-all"><b>{b}</b></p>  {c} ({d}%)',
-    backgroundColor: darkStore.isDark ? '#333335' : '',
-    borderColor: darkStore.isDark ? '#333335' : '',
+    backgroundColor: darkStore.isDark ? '#333335' : '#ffffff',
+    borderColor: darkStore.isDark ? '#333335' : '#ffffff',
     textStyle: {
-      color: darkStore.isDark ? 'rgba(255, 255, 255, 0.7)' : ''
+      color: darkStore.isDark ? 'rgba(255, 255, 255, 0.7)' : undefined
     }
   },
+  backgroundColor: darkStore.isDark ? 'rgba(0, 0, 0, 0.0)' : undefined,
+  ...chartOption.value
+}))
+
+const chartOption = ref({
   legend: {
     orient: 'vertical',
     left: 'right',
@@ -159,7 +162,6 @@ const chartOption = ref({
       show: true
     }
   },
-  backgroundColor: darkStore.isDark ? 'rgba(0, 0, 0, 0.0)' : undefined,
   series: [
     {
       name: '',

diff --git a/webui/src/views/charts/components/traffic.vue b/webui/src/views/charts/components/traffic.vue
@@ -111,18 +111,16 @@ const loadingOptions = computed(() => ({
 const { t, d } = useI18n()
 
 const err = ref<Error>()
-const usedOption = computed(() => chartOptions.value)
-
-const chartOptions = ref({
+const usedOption = computed(() => ({
   tooltip: {
     trigger: 'axis',
     axisPointer: {
       type: 'shadow'
     },
-    backgroundColor: darkStore.isDark ? '#333335' : '',
-    borderColor: darkStore.isDark ? '#333335' : '',
+    backgroundColor: darkStore.isDark ? '#333335' : '#ffffff',
+    borderColor: darkStore.isDark ? '#333335' : '#ffffff',
     textStyle: {
-      color: darkStore.isDark ? 'rgba(255, 255, 255, 0.7)' : ''
+      color: darkStore.isDark ? 'rgba(255, 255, 255, 0.7)' : undefined
     },
     formatter: function (value: CallbackDataParams[]) {
       return (
@@ -137,6 +135,10 @@ const chartOptions = ref({
     }
   },
   backgroundColor: darkStore.isDark ? 'rgba(0, 0, 0, 0.0)' : undefined,
+  ...chartOptions.value
+}))
+
+const chartOptions = ref({
   legend: {
     data: [t('page.charts.traffic.options.download'), t('page.charts.traffic.options.upload')]
   },

diff --git a/webui/src/views/charts/components/trends.vue b/webui/src/views/charts/components/trends.vue
@@ -88,7 +88,18 @@ const loadingOptions = computed(() => ({
   textColor: darkStore.isDark ? 'rgba(255, 255, 255, 0.9)' : 'rgb(29, 33, 41)',
   maskColor: darkStore.isDark ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.4)'
 }))
-const usedOption = computed(() => chartOptions.value)
+const usedOption = computed(() => ({
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: darkStore.isDark ? '#333335' : '#ffffff',
+    borderColor: darkStore.isDark ? '#333335' : '#ffffff',
+    textStyle: {
+      color: darkStore.isDark ? 'rgba(255, 255, 255, 0.7)' : ''
+    }
+  },
+  backgroundColor: darkStore.isDark ? 'rgba(0, 0, 0, 0.0)' : undefined,
+  ...chartOptions.value
+}))
 
 const chartOptions = ref({
   xAxis: {
@@ -98,15 +109,7 @@ const chartOptions = ref({
   yAxis: {
     type: 'value'
   },
-  tooltip: {
-    trigger: 'axis',
-    backgroundColor: darkStore.isDark ? '#333335' : '',
-    borderColor: darkStore.isDark ? '#333335' : '',
-    textStyle: {
-      color: darkStore.isDark ? 'rgba(255, 255, 255, 0.7)' : ''
-    }
-  },
-  backgroundColor: darkStore.isDark ? 'rgba(0, 0, 0, 0.0)' : undefined,
+
   series: [
     {
       data: [] as [Date, number][],