From e863545074e35093729a92f1cec252555d600bf2 Mon Sep 17 00:00:00 2001 From: jingrow Date: Wed, 21 Jan 2026 18:07:18 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B8=B8=E7=94=A8=E9=A2=9C=E8=89=B2=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E5=88=B036=E4=B8=AA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/locales/zh-CN.json | 2 +- .../tools/add_background/add_background.vue | 157 ++++++++++++------ 2 files changed, 108 insertions(+), 51 deletions(-) diff --git a/src/locales/zh-CN.json b/src/locales/zh-CN.json index d1ebb81..72e5cba 100644 --- a/src/locales/zh-CN.json +++ b/src/locales/zh-CN.json @@ -1115,7 +1115,7 @@ "Background Color": "背景颜色", "Add to favorites": "添加到收藏", "Remove from favorites": "从收藏中移除", - "Favorite Colors": "收藏颜色", + "Favorite Colors": "收藏的颜色", "Color already in favorites": "颜色已在收藏中", "Maximum 12 favorite colors allowed. Please remove one first.": "最多允许12个收藏颜色，请先移除一个", "Color added to favorites": "颜色已添加到收藏", diff --git a/src/views/tools/add_background/add_background.vue b/src/views/tools/add_background/add_background.vue index 2fab839..076f180 100644 --- a/src/views/tools/add_background/add_background.vue +++ b/src/views/tools/add_background/add_background.vue @@ -161,17 +161,7 @@
-
-

{{ t('Background Color') }}

- -
+

{{ t('Background Color') }}

- +
+ + +
@@ -343,20 +343,57 @@ const removeFavoriteColor = (color: string) => { } } -// 12 common background colors - light to dark +// 36 common background colors - light to dark gradient const commonColors = ref([ - '#FFFFFF', // White - '#F5F5F5', // Very Light Gray - '#E8E8E8', // Light Gray - '#D4D4D4', // Gray - '#FFE4E1', // Light Pink - '#FFD7BE', // Light Peach - '#FFF4CC', // Light Yellow - '#D4E4BC', // Light Green - '#C8E6F5', // Light Blue - '#E6D7FF', // Light Purple - '#BEBEBE', // Medium Gray - '#A0A0A0' // Dark Gray + // Pure Whites (3) + '#FFFFFF', // Pure White + '#FEFEFE', // Almost White + '#FAFAFA', // Off White + + // Light Grays (6) + '#F5F5F5', // Very Light Gray 1 + '#F0F0F0', // Very Light Gray 2 + '#EBEBEB', // Very Light Gray 3 + '#E8E8E8', // Light Gray 1 + '#E0E0E0', // Light Gray 2 + '#DADADA', // Light Gray 3 + + // Light Pinks & Peaches (6) + '#FFE4E1', // Misty Rose + '#FFDDE1', // Light Pink + '#FFE4CC', // Light Peach 1 + '#FFD7BE', // Light Peach 2 + '#FFDAB9', // Peach Puff + '#FFCBA4', // Deep Peach + + // Light Yellows & Creams (6) + '#FFFACD', // Lemon Chiffon + '#FFF4CC', // Light Yellow 1 + '#FFECB3', // Light Yellow 2 + '#FFE4B5', // Moccasin + '#FFDEAD', // Navajo White + '#FFD699', // Light Orange + + // Light Greens & Blues (6) + '#E8F5E9', // Light Green 1 + '#D4EDDA', // Light Green 2 + '#D4E4BC', // Pale Green + '#E0F7FA', // Light Cyan + '#C8E6F5', // Light Sky Blue + '#B3E5FC', // Light Blue + + // Light Purples & Lavenders (3) + '#F3E5F5', // Lavender Blush + '#EDE7F6', // Light Purple 1 + '#E6D7FF', // Light Purple 2 + + // Medium to Dark Grays (6) + '#D4D4D4', // Medium Gray 1 + '#CACACA', // Medium Gray 2 + '#BEBEBE', // Medium Gray 3 + '#B0B0B0', // Medium Gray 4 + '#A0A0A0', // Dark Gray 1 + '#909090' // Dark Gray 2 ]) // OKLCH color utilities - perceptually uniform color space @@ -1837,28 +1874,27 @@ const removeHistoryItem = (index: number) => { gap: 16px; } -.section-header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - padding-bottom: 12px; - border-bottom: 1px solid #e5e7eb; -} - .section-title { font-size: 14px; font-weight: 600; color: #1f2937; margin: 0; - flex: 1; + padding-bottom: 12px; + border-bottom: 1px solid #e5e7eb; +} + +.hex-input-wrapper { + display: flex; + align-items: center; + gap: 6px; + width: 100%; } .add-favorite-btn { - width: 32px; - height: 32px; + width: 44px; + height: 44px; border: 1px solid #e5e7eb; - border-radius: 6px; + border-radius: 8px; background: white; color: #fbbf24; cursor: pointer; @@ -1870,7 +1906,7 @@ const removeHistoryItem = (index: number) => { flex-shrink: 0; i { - font-size: 14px; + font-size: 16px; } &:hover:not(:disabled) { @@ -1916,7 +1952,7 @@ const removeHistoryItem = (index: number) => { } .sidebar-hex-input { - width: 100%; + flex: 1; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; @@ -1927,6 +1963,7 @@ const removeHistoryItem = (index: number) => { outline: none; transition: all 0.2s ease; text-align: center; + min-width: 0; &:focus { border-color: #1fc76f; @@ -1942,7 +1979,7 @@ const removeHistoryItem = (index: number) => { .favorite-colors-grid, .common-colors-grid { display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(6, 1fr); gap: 10px; } @@ -2343,9 +2380,28 @@ const removeHistoryItem = (index: number) => { box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05); } + .hex-input-wrapper { + flex-direction: row; + } + + .add-favorite-btn { + width: 44px; + height: 44px; + + i { + font-size: 18px; + } + } + + .sidebar-hex-input { + font-size: 13px; + padding: 10px; + } + .favorite-colors-grid, .common-colors-grid { - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(6, 1fr); + gap: 8px; } .history-bar { @@ -2391,7 +2447,8 @@ const removeHistoryItem = (index: number) => { .favorite-colors-grid, .common-colors-grid { - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(6, 1fr); + gap: 8px; } } \ No newline at end of file