feat：修改色版展示

src/settings/chartThemes/index.ts

@@ -29,16 +29,31 @@ export const chartColors = {
 export const defaultTheme = 'dark'
 
 export const chartColorsName = {
-  dark: '暗黑（默认）',
-  customed: '明亮',
+  dark: '明亮',
+  customed: '暗淡',
   macarons: '马卡龙',
   walden: '蓝绿',
-  chalk: '粉红',
-  essos: '橘红',
-  vintage: '复古',
-  purplePassion: '深紫',
-  westeros: '灰粉',
   wonderland: '青草',
-  roma: '罗马红',
+  purplePassion: '深紫',
+  vintage: '复古',
+  chalk: '粉红',
+  westeros: '灰粉',
+  essos: '橘红',
   shine: '深色',
+  roma: '罗马红',
+}
+
+export const chartColorsshow = {
+  dark: 'linear-gradient(to right, #4992ff 0%, #7cffb2 100%)',
+  customed: 'linear-gradient(to right, #5470c6 0%, #91cc75 100%)',
+  macarons: 'linear-gradient(to right, #2ec7c9 0%, #b6a2de 100%)',
+  walden: 'linear-gradient(to right, #3fb1e3 0%, #6be6c1 100%)',
+  wonderland: 'linear-gradient(to right, #4ea397 0%, #22c3aa 100%)',
+  purplePassion: 'linear-gradient(to right, #9b8bba 0%, #e098c7 100%)',
+  vintage: 'linear-gradient(to right, #d87c7c 0%, #919e8b 100%)',
+  chalk: 'linear-gradient(to right, #fc97af 0%, #d4a4eb 100%)',
+  westeros: 'linear-gradient(to right, #516b91 0%, #edafda 100%)',
+  essos: 'linear-gradient(to right, #893448 0%, #d95850 100%)',
+  shine: 'linear-gradient(to right, #c12e34 0%, #0098d9 100%)',
+  roma: 'linear-gradient(to right, #e01f54 0%, #5e4ea5 100%)',
 }

src/views/chart/ContentDetails/components/CanvasPage/components/ChartTheme/index.vue

@@ -15,12 +15,16 @@
           <div class="go-flex-items-center">
             <n-text>{{ chartColorsName[key] }}</n-text>
             <span
-              class="color-item"
+              class="theme-color-item"
               v-for="colorItem in fetchShowColors(value.color)"
               :key="colorItem"
               :style="{ backgroundColor: colorItem }"
             />
           </div>
+          <div
+            class="theme-bottom"
+            :style="{ backgroundImage: chartColorsshow[key] }"
+          ></div>
         </n-card>
       </n-collapse-item>
     </n-collapse>
@@ -31,7 +35,11 @@
 import { ref, computed } from 'vue'
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasFilterEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { chartColors, chartColorsName } from '@/settings/chartThemes/index'
+import {
+  chartColors,
+  chartColorsName,
+  chartColorsshow
+} from '@/settings/chartThemes/index'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import cloneDeep from 'lodash/cloneDeep'
 import { icon } from '@/plugins'
@@ -65,14 +73,16 @@ const selectTheme = (theme: string) => {
     padding: 0;
     @include filter-bg-color('background-color4-shallow');
     border-radius: 23px;
+    overflow: hidden;
     @include deep() {
       .n-card__content {
         padding-top: 5px;
-        padding-bottom: 5px;
+        padding-bottom: 10px;
       }
     }
     &.selected {
       border: 1px solid v-bind('themeColor');
+      border-bottom: 1px solid rgba(0, 0, 0, 0);
     }
     &:first-child {
       margin-top: 0;
@@ -80,12 +90,20 @@ const selectTheme = (theme: string) => {
     .go-flex-items-center {
       justify-content: space-between;
     }
-    .color-item {
+    .theme-color-item {
       display: inline-block;
       width: 20px;
       height: 20px;
       border-radius: 50%;
     }
+    .theme-bottom {
+      position: absolute;
+      left: 0;
+      bottom: 0px;
+      width: 100%;
+      height: 3px;
+      background-image: linear-gradient(to right, #e0c3fc 0%, #8ec5fc 100%);
+    }
   }
 }
 </style>