feat: Echarts 组件适配主题颜色 (#7087)

frontend/src/components/v-charts/components/Line.vue

@@ -30,10 +30,24 @@ const props = defineProps({
     option: {
         type: Object,
         required: true,
-    }, // option: { title , xData, yData, formatStr, yAxis, grid, tooltip}
+    },
 });
 
 const seriesStyle = [
+    {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+                offset: 0,
+                color: getComputedStyle(document.documentElement).getPropertyValue('--panel-color-primary').trim(),
+            },
+            {
+                offset: 1,
+                color: getComputedStyle(document.documentElement)
+                    .getPropertyValue('--panel-color-primary-light-9')
+                    .trim(),
+            },
+        ]),
+    },
     {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
@@ -98,6 +112,7 @@ function initChart() {
             series.push({
                 name: item?.name,
                 type: 'line',
+                itemStyle: seriesStyle[index + 2],
                 areaStyle: seriesStyle[index],
                 data: item?.data,
                 showSymbol: false,

frontend/src/styles/element-dark.scss

@@ -443,8 +443,4 @@ html.dark {
         color: #ffffff;
         background-color: var(--panel-main-bg-color-10) !important;
     }
-
-    .el-loading-mask {
-        background-color: rgba(36, 38, 51, 0.8);
-    }
 }

frontend/src/views/login/components/login-form.vue

@@ -559,4 +559,8 @@ onMounted(() => {
     color: #005eeb !important;
     background-color: #e5eefd !important;
 }
+
+:deep(.el-loading-mask) {
+    background-color: rgba(229, 238, 253, 0.8) !important;
+}
 </style>