Refactor/themes (#311)

* refactor: theme

src/views/welcome/components/Bar.vue

@@ -1,9 +1,17 @@
 <script setup lang="ts">
-import { ref, type Ref } from "vue";
-import { useECharts } from "@pureadmin/utils";
+import { ref, computed, type Ref } from "vue";
+import { useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
+
+const { isDark } = useDark();
+
+let theme: EchartOptions["theme"] = computed(() => {
+  return isDark.value ? "dark" : "light";
+});
 
 const barChartRef = ref<HTMLDivElement | null>(null);
-const { setOptions } = useECharts(barChartRef as Ref<HTMLDivElement>);
+const { setOptions } = useECharts(barChartRef as Ref<HTMLDivElement>, {
+  theme
+});
 
 setOptions(
   {

src/views/welcome/components/Infinite.vue

@@ -64,7 +64,7 @@ let classOption = reactive({
 </script>
 
 <template>
-  <div class="infinite">
+  <div class="infinite bg-[#fafafa] dark:bg-dark">
     <ul class="top">
       <li>更新日期</li>
       <li>项目名称</li>
@@ -98,7 +98,7 @@ let classOption = reactive({
     font-size: 14px;
     color: #909399;
     font-weight: 400;
-    background: #fafafa;
+    // background: #fafafa;
 
     li {
       width: 34%;

src/views/welcome/components/Line.vue

@@ -1,9 +1,17 @@
 <script setup lang="ts">
-import { ref, type Ref } from "vue";
-import { useECharts } from "@pureadmin/utils";
+import { ref, computed, type Ref } from "vue";
+import { useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
+
+const { isDark } = useDark();
+
+let theme: EchartOptions["theme"] = computed(() => {
+  return isDark.value ? "dark" : "light";
+});
 
 const lineChartRef = ref<HTMLDivElement | null>(null);
-const { setOptions } = useECharts(lineChartRef as Ref<HTMLDivElement>);
+const { setOptions } = useECharts(lineChartRef as Ref<HTMLDivElement>, {
+  theme
+});
 
 setOptions(
   {

src/views/welcome/components/Pie.vue

@@ -1,9 +1,17 @@
 <script setup lang="ts">
-import { ref, type Ref } from "vue";
-import { useECharts } from "@pureadmin/utils";
+import { ref, computed, type Ref } from "vue";
+import { useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
+
+const { isDark } = useDark();
+
+let theme: EchartOptions["theme"] = computed(() => {
+  return isDark.value ? "dark" : "light";
+});
 
 const pieChartRef = ref<HTMLDivElement | null>(null);
-const { setOptions } = useECharts(pieChartRef as Ref<HTMLDivElement>);
+const { setOptions } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
+  theme
+});
 
 setOptions(
   {

src/views/welcome/index.vue

@@ -35,7 +35,7 @@ const openDepot = (): void => {
 
 <template>
   <div class="welcome">
-    <el-card class="top-content">
+    <el-card class="top-content dark:border-none">
       <div class="left-mark">
         <img :src="avatars" title="直达仓库地址" @click="openDepot" />
         <span>{{ greetings }}</span>
@@ -233,7 +233,7 @@ const openDepot = (): void => {
     justify-content: space-between;
     align-items: center;
     height: 60px;
-    background: #fff;
+    background: var(--el-bg-color);
 
     .left-mark {
       display: flex;