feat: vchart主题插件

package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@arco-design/color": "^0.4.0",
     "@visactor/vchart": "^1.11.0",
+    "@visactor/vchart-arco-theme": "^1.11.0",
     "dc-admin": "link:",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   '@visactor/vchart':
     specifier: ^1.11.0
     version: 1.11.0
+  '@visactor/vchart-arco-theme':
+    specifier: ^1.11.0
+    version: 1.11.0(@visactor/vchart@1.11.0)
   dc-admin:
     specifier: 'link:'
     version: 'link:'
@@ -1692,6 +1695,23 @@ packages:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
 
+  /@visactor/vchart-arco-theme@1.11.0(@visactor/vchart@1.11.0):
+    resolution: {integrity: sha512-yjIXzM4Gd9dSyEmiH4MhwXutHT9I/AMsuzIqTIfwCyVpEEnbZNejjxZutGIidNdEt1qtApQECVZ970TCBJHz7w==}
+    peerDependencies:
+      '@visactor/vchart': '>=1.10.4'
+    dependencies:
+      '@visactor/vchart': 1.11.0
+      '@visactor/vchart-theme-utils': 1.11.0(@visactor/vchart@1.11.0)
+    dev: false
+
+  /@visactor/vchart-theme-utils@1.11.0(@visactor/vchart@1.11.0):
+    resolution: {integrity: sha512-GMQeT+X0hI6EQpd2GTdMYBwZbsR4B/NvAURYWzWTFW4KYdefEKHQMZNlq81aagJZTF3M09CZTkg9/uWRuBSqgQ==}
+    peerDependencies:
+      '@visactor/vchart': '>=1.10.4'
+    dependencies:
+      '@visactor/vchart': 1.11.0
+    dev: false
+
   /@visactor/vchart@1.11.0:
     resolution: {integrity: sha512-omEwPwLzi9PioVmiP/9L8IJoJnqRs/LsGPEkFhQYCBdSSuyh+OApWXo/a7jL/t7PsRSZVIeogmXh6YUY72XuLw==}
     dependencies:

src/main.ts

@@ -17,6 +17,9 @@ import "virtual:svg-icons-register";
 import i18n from "@/lang/index";
 // 引入字体
 import "@/assets/fonts/fonts.scss";
+// vchart-arco-theme 主题关联-黑暗模式
+import { initVChartArcoTheme } from "@visactor/vchart-arco-theme";
+initVChartArcoTheme();
 const app = createApp(App);
 app.use(ArcoVue, {
   componentPrefix: "arco"

src/style/global-theme.scss

@@ -46,7 +46,7 @@ $color-text-3: var(--color-text-3); // 次要信息 二级字体色
 $color-text-4: var(--color-text-4); // 置灰信息
 
 // 背景色
-$color-bg-1: var(--color-bg-1); // 整体背景色
+$color-bg-1: var(--color-bg-1); // 整体背景色-可用于main窗口背景
 $color-bg-2: var(--color-bg-2); // 一级容器背景
 $color-bg-3: var(--color-bg-3); // 二级容器背景
 $color-bg-4: var(--color-bg-4); // 三级容器背景

src/views/home/home.vue

@@ -193,7 +193,7 @@ const financeData = ref([
 <style lang="scss" scoped>
 .home {
   padding: $padding;
-  background: $color-bg-2;
+  background: $color-bg-1;
 }
 .box-title {
   display: flex;
@@ -312,11 +312,13 @@ const financeData = ref([
   .sell-histogram {
     width: calc(100% - 600px - $padding);
     height: 400px;
+    padding-bottom: $padding;
   }
   .monthly-analysis {
     margin-left: $padding;
     width: 600px;
     height: 400px;
+    padding-bottom: $padding;
   }
 }
 </style>