feat: 完善颜色选择

package.json

@@ -2,7 +2,7 @@
   "name": "go-view",
   "version": "1.1.11",
   "engines": {
-    "node": ">=16.14 <18.0.0"
+    "node": ">=16.14"
   },
   "scripts": {
     "dev": "vite --host",
@@ -39,7 +39,7 @@
     "keymaster": "^1.6.2",
     "mitt": "^3.0.0",
     "monaco-editor": "^0.33.0",
-    "naive-ui": "2.34.3",
+    "naive-ui": "2.40.3",
     "pinia": "^2.0.13",
     "screenfull": "^6.0.1",
     "three": "^0.145.0",

src/views/chart/ContentConfigurations/components/CanvasPage/components/VChartThemeColor/index.vue

@@ -1,27 +1,72 @@
 <template>
   <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>
+      <div
+        class="theme-item"
+        :class="{ active: item.value === vChartThemeName }"
+        size="small"
+        @click="selectThemeHandle(item)"
+      >
+        <div class="go-flex-items-center">
+          <n-ellipsis style="text-align: left; width: 72px">{{ item.name }} </n-ellipsis>
+          <n-space :wrap-item="false" :size="2">
+            <span
+              class="theme-color-item"
+              v-for="colorItem in item.colors"
+              :key="colorItem"
+              :style="{ backgroundColor: colorItem }"
+            ></span>
+          </n-space>
+        </div>
+      </div>
     </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)">
-        {{ item.name }}
-      </n-card>
+      <div
+        class="theme-item"
+        :class="{ active: item.value === vChartThemeName }"
+        size="small"
+        @click="selectThemeHandle(item)"
+      >
+        <div class="go-flex-items-center">
+          <n-ellipsis style="text-align: left; width: 72px">{{ item.name }} </n-ellipsis>
+          <n-space :wrap-item="false" :size="2">
+            <span
+              class="theme-color-item"
+              v-for="colorItem in item.colors"
+              :key="colorItem"
+              :style="{ backgroundColor: colorItem }"
+            ></span>
+          </n-space>
+        </div>
+      </div>
     </n-gi>
   </n-grid>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { useVCharts } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
 
+const chartEditStore = useChartEditStore()
+const designStore = useDesignStore()
 const vCharts = useVCharts()
 const themeMap = vCharts.getThemeMap()
+
+const vChartThemeName = computed(() => {
+  return chartEditStore.getEditCanvasConfig.vChartThemeName
+})
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
 const list = ref<
   Array<{
     name: string
@@ -32,52 +77,52 @@ const list = ref<
   {
     name: '火山蓝（默认）',
     value: 'vScreenVolcanoBlue',
-    colors: []
+    colors: ['#2D64DD', '#284588', '#58B4B6']
   },
   {
     name: '党建红',
     value: 'vScreenPartyRed',
-    colors: []
+    colors: ['#d3d3d4', '#d68a46', '#d74f3c']
   },
   {
     name: '清新蜡笔',
     value: 'vScreenClean',
-    colors: []
+    colors: ['#94AF60', '#7696B8', '#d6837a']
   },
   {
     name: '郊外',
     value: 'vScreenOutskirts',
-    colors: []
+    colors: ['#A7C4E6', '#e1bf99', '#c0bcbb']
   },
   {
     name: '汽车蓝橙',
     value: 'vScreenBlueOrange',
-    colors: []
+    colors: ['#acd5fa', '#cc896b', '#5ea4dd']
   },
   {
     name: '金融黄',
     value: 'vScreenFinanceYellow',
-    colors: []
+    colors: ['#d7d7d7', '#f09761', '#f7d177']
   },
   {
     name: '文旅青',
     value: 'vScreenWenLvCyan',
-    colors: []
+    colors: ['#63c6ba', '#dcb974', '#a34440']
   },
   {
     name: '电力绿',
     value: 'vScreenElectricGreen',
-    colors: []
+    colors: ['#75faf2', '#ee813e', '#f4ce7f']
   },
   {
     name: '电商紫',
     value: 'vScreenECommercePurple',
-    colors: []
+    colors: ['#6d4cf6', '#ed7266', '#5f83f7']
   },
   {
     name: '红蓝',
     value: 'vScreenRedBlue',
-    colors: []
+    colors: ['#2e6cf6', '#bc4741', '#c1e4fb']
   }
 ])
 
@@ -92,93 +137,114 @@ const industryList = ref<
   {
     name: '明亮（适用白背景）',
     value: 'light',
-    colors: []
+    colors: ['#3063f6', '#5dc3f9', '#f1f2f5']
   },
   {
     name: '暗黑（适用黑背景）',
     value: 'dark',
-    colors: []
+    colors: ['#3063f6', '#5dc3f9', '#414348']
   },
   {
     name: '亮-金融行业',
     value: 'veODesignLightFinance',
-    colors: []
+    colors: ['#dbba95', '#314b5e', '#f1f2f5']
   },
   {
     name: '暗-金融行业',
     value: 'veODesignDarkFinance',
-    colors: []
+    colors: ['#dbba95', '#314b5e', '#414348']
   },
   {
     name: '亮-政府行业',
     value: 'veODesignLightGovernment',
-    colors: []
+    colors: ['#c0403a', '#f6c552', '#f1f2f5']
   },
   {
     name: '暗-政府行业',
     value: 'veODesignDarkGovernment',
-    colors: []
+    colors: ['#c0403a', '#f6c552', '#414348']
   },
   {
     name: '亮-消费行业',
     value: 'veODesignLightConsumer',
-    colors: []
+    colors: ['#3f36ab', '#eb4854', '#f1f2f5']
   },
   {
     name: '暗-消费行业',
     value: 'veODesignDarkConsumer',
-    colors: []
+    colors: ['#3f36ab', '#eb4854', '#414348']
   },
   {
     name: '亮-汽车行业',
     value: 'veODesignLightAutomobile',
-    colors: []
+    colors: ['#1515d1', '#abb6cd', '#f1f2f5']
   },
   {
     name: '暗-汽车行业',
     value: 'veODesignDarkAutomobile',
-    colors: []
+    colors: ['#1515d1', '#abb6cd', '#414348']
   },
   {
     name: '亮-文旅行业',
     value: 'veODesignLightCulturalTourism',
-    colors: []
+    colors: ['#77b897', '#3c5a4b', '#f1f2f5']
   },
   {
     name: '暗-文旅行业',
     value: 'veODesignDarkCulturalTourism',
-    colors: []
+    colors: ['#77b897', '#3c5a4b', '#414348']
   },
   {
     name: '亮-医疗行业',
     value: 'veODesignLightMedical',
-    colors: []
+    colors: ['#76d0d1', '#314787', '#f1f2f5']
   },
   {
     name: '暗-医疗行业',
     value: 'veODesignDarkMedical',
-    colors: []
+    colors: ['#76d0d1', '#314787', '#414348']
   },
   {
     name: '亮-新能源行业',
     value: 'veODesignLightNewEnergy',
-    colors: []
+    colors: ['#64d886', '#1f3b76', '#f1f2f5']
   },
   {
     name: '暗-新能源行业',
     value: 'veODesignDarkNewEnergy',
-    colors: []
+    colors: ['#64d886', '#1f3b76', '#414348']
   }
 ])
 
 const selectThemeHandle = (item: { name: string; value: keyof typeof themeMap; colors: string[] }) => {
   vCharts.setTheme(item.value)
+  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.VCHART_THEME_NAME, item.value)
 }
 </script>
 
 <style lang="scss" scoped>
-.theme-item,
-.theme-item-industry {
+$radius: 6px;
+$itemRadius: 2px;
+.theme-item {
+  display: flex;
+  align-items: center;
+  height: 34px;
+  padding: 0 16px;
+  overflow: hidden;
   cursor: pointer;
+  font-size: 13px;
+  border-radius: $radius;
+  @include fetch-bg-color('background-color4-shallow');
+  &.active {
+    /* border: 1px solid v-bind('themeColor'); */
+    /* border-bottom: 1px solid rgba(0, 0, 0, 0); */
+    color: v-bind('themeColor');
+  }
+  .theme-color-item {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border-radius: $itemRadius;
+  }
 }
 </style>