feat: 新增推荐色

src/components/ThemeColorSelect/components/ColorList.vue

@@ -1,4 +1,29 @@
 <template>
+  <div
+    class="content-left-item go-transition-quick go-mb-0"
+    span="12 1000:6 1400:4 1800:4 2200:2"
+    v-for="(item, index) in designColorRecommend"
+    :key="index"
+    @click="colorSelectHandle(item)"
+  >
+    <n-space>
+      <div class="content-left-item-color" :style="{ backgroundColor: item.hex }" />
+      <n-space vertical>
+        <n-space>
+          <span :style="{ color: item.hex }">{{ item.name }}</span>
+          <span class="Pinyin-upper">{{ item.pinyin.toUpperCase() }}</span>
+        </n-space>
+        <n-text>
+          {{ item.hex }}
+          <n-divider vertical />
+          {{
+            `rgb(${item.RGB[0]}, ${item.RGB[1]}, ${item.RGB[2]})`
+          }}
+        </n-text>
+      </n-space>
+    </n-space>
+  </div>
+  <n-divider/>
   <div
     class="content-left-item go-transition-quick"
     span="12 1000:6 1400:4 1800:4 2200:2"
@@ -17,7 +42,7 @@
           {{ item.hex }}
           <n-divider vertical />
           {{
-            `rgb(${item.RGB[0]}, ${item.RGB[0]}, ${item.RGB[0]})`
+            `rgb(${item.RGB[0]}, ${item.RGB[1]}, ${item.RGB[2]})`
           }}
         </n-text>
       </n-space>
@@ -28,6 +53,7 @@
 <script lang="ts" setup>
 import { AppThemeColorType } from '@/store/modules/designStore/designStore.d'
 import designColor from '@/settings/designColor.json'
+import designColorRecommend from '@/settings/designColorRecommend.json'
 
 const emits = defineEmits(['colorSelectHandle'])
 
@@ -40,8 +66,8 @@ const colorSelectHandle = (color: AppThemeColorType) => {
 .content-left-item {
   position: relative;
   display: flex;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
-  margin-right: 20px;
+  margin-right: 10px;
   padding: 10px 20px;
   min-width: 300px;
   border-radius: 5px;

src/settings/designColor.json

@@ -191,22 +191,6 @@
     "name": "酪黄",
     "pinyin": "laohuang"
   },
-  {
-    "CMYK": [
-      1,
-      17,
-      50,
-      0
-    ],
-    "RGB": [
-      247,
-      218,
-      148
-    ],
-    "hex": "#f7da94",
-    "name": "香水玫瑰黄",
-    "pinyin": "xiangshuimeiguihuang"
-  },
   {
     "CMYK": [
       1,

src/settings/designColorRecommend.json

@@ -0,0 +1,25 @@
+[{
+    "RGB": [81, 214, 169],
+    "hex": "#51d6a9",
+    "name": "碧空绿",
+    "pinyin": "bikonlv"
+  },
+  {
+    "RGB": [16, 174, 194],
+    "hex": "#10aec2",
+    "name": "甸子蓝",
+    "pinyin": "dianzilan"
+  },
+  {
+    "RGB": [60, 126, 255],
+    "hex": "#3c7eff",
+    "name": "深海蓝",
+    "pinyin": "shenhailan"
+  },
+  {
+    "RGB": [248, 223, 114],
+    "hex": "#f8df72",
+    "name": "茉莉黄",
+    "pinyin": "molihuang"
+  }
+]