From 987f4f73a27353c3236e378bea8d4632e42516d7 Mon Sep 17 00:00:00 2001
From: mtruning <1262327911@qq.com>
Date: Sun, 13 Mar 2022 00:42:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=8E=A8=E8=8D=90?=
 =?UTF-8?q?=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ThemeColorSelect/components/ColorList.vue | 32 +++++++++++++++++--
 src/settings/designColor.json                 | 16 ----------
 src/settings/designColorRecommend.json        | 25 +++++++++++++++
 3 files changed, 54 insertions(+), 19 deletions(-)
 create mode 100644 src/settings/designColorRecommend.json

diff --git a/src/components/ThemeColorSelect/components/ColorList.vue b/src/components/ThemeColorSelect/components/ColorList.vue
index af65fd2d..5e6841e5 100644
--- a/src/components/ThemeColorSelect/components/ColorList.vue
+++ b/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-right: 20px;
+  margin-bottom: 10px;
+  margin-right: 10px;
   padding: 10px 20px;
   min-width: 300px;
   border-radius: 5px;
diff --git a/src/settings/designColor.json b/src/settings/designColor.json
index 9a78f677..5e506ba4 100644
--- a/src/settings/designColor.json
+++ b/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,
diff --git a/src/settings/designColorRecommend.json b/src/settings/designColorRecommend.json
new file mode 100644
index 00000000..6ec95e5a
--- /dev/null
+++ b/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"
+  }
+]
\ No newline at end of file