From 844b95987efdaa691ee49859aa4ec38a645645b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Mon, 16 Dec 2024 21:01:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E7=9A=84UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/VChartThemeColor/index.vue     | 41 ++++++++++---------
 .../components/CanvasPage/index.vue           |  4 +-
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/VChartThemeColor/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/VChartThemeColor/index.vue
index 332f4224..cc416f5c 100644
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/VChartThemeColor/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/VChartThemeColor/index.vue
@@ -1,10 +1,12 @@
 <template>
-  <n-flex vertical>
-    <n-card class="theme-item" v-for="item in list" :key="item.value" size="small" @click="selectThemeHandle(item)">
-      {{ item.name }}
-    </n-card>
-  </n-flex>
-  行业模板
+  <n-grid :x-gap="8" :y-gap="8" :cols="2">
+    <n-gi v-for="item in list" :key="item.value">
+      <n-card class="theme-item" size="small" @click="selectThemeHandle(item)">
+        {{ item.name }}
+      </n-card>
+    </n-gi>
+  </n-grid>
+  <div class="go-my-4">行业模板</div>
   <n-grid :x-gap="8" :y-gap="8" :cols="2">
     <n-gi v-for="item in industryList" :key="item.value">
       <n-card class="theme-item-industry" size="small" @click="selectThemeHandle(item)">
@@ -28,17 +30,7 @@ const list = ref<
   }>
 >([
   {
-    name: '明亮',
-    value: 'light',
-    colors: []
-  },
-  {
-    name: '暗黑',
-    value: 'dark',
-    colors: []
-  },
-  {
-    name: '火山蓝',
+    name: '火山蓝（默认）',
     value: 'vScreenVolcanoBlue',
     colors: []
   },
@@ -97,6 +89,16 @@ const industryList = ref<
     colors: string[]
   }>
 >([
+  {
+    name: '明亮（适用白背景）',
+    value: 'light',
+    colors: []
+  },
+  {
+    name: '暗黑（适用黑背景）',
+    value: 'dark',
+    colors: []
+  },
   {
     name: '亮-金融行业',
     value: 'veODesignLightFinance',
@@ -175,9 +177,8 @@ const selectThemeHandle = (item: { name: string; value: keyof typeof themeMap; c
 </script>
 
 <style lang="scss" scoped>
-.theme-item {
+.theme-item,
+.theme-item-industry {
   cursor: pointer;
 }
-.theme-item-industry {
-}
 </style>
diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
index 90496aea..991eec91 100644
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
@@ -167,13 +167,13 @@ const selectColorOptions = [
 const globalTabList = [
   {
     key: 'ChartTheme',
-    title: '默认主题颜色',
+    title: '默认主题',
     icon: ColorPaletteIcon,
     render: ChartThemeColor
   },
   {
     key: 'VChartTheme',
-    title: 'VChart主题颜色',
+    title: 'VChart主题',
     icon: ColorPaletteIcon,
     render: VChartThemeColor
   },