常用颜色增加到36个

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": "颜色已添加到收藏",

src/views/tools/add_background/add_background.vue

@@ -161,8 +161,23 @@
     <div v-if="uploadedImage" class="right-sidebar">
       <div class="sidebar-content">
         <div class="color-picker-section">
-          <div class="section-header">
           <h4 class="section-title">{{ t('Background Color') }}</h4>
+          <div class="color-picker-container">
+            <input
+              v-model="backgroundColor"
+              type="color"
+              class="sidebar-color-picker"
+              @input="onColorChange"
+            />
+            <div class="hex-input-wrapper">
+              <input
+                v-model="backgroundColor"
+                type="text"
+                class="sidebar-hex-input"
+                placeholder="#FFFFFF"
+                @input="onHexInputChange"
+                @blur="onHexInputBlur"
+              />
               <button
                 class="add-favorite-btn"
                 @click="addToFavorites"
@@ -172,21 +187,6 @@
                 <i class="fa fa-star"></i>
               </button>
             </div>
-          <div class="color-picker-container">
-            <input
-              v-model="backgroundColor"
-              type="color"
-              class="sidebar-color-picker"
-              @input="onColorChange"
-            />
-            <input
-              v-model="backgroundColor"
-              type="text"
-              class="sidebar-hex-input"
-              placeholder="#FFFFFF"
-              @input="onHexInputChange"
-              @blur="onHexInputBlur"
-            />
           </div>
         </div>
         
@@ -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
+  // Pure Whites (3)
-  '#F5F5F5', // Very Light Gray
+  '#FFFFFF', // Pure White
-  '#E8E8E8', // Light Gray
+  '#FEFEFE', // Almost White
-  '#D4D4D4', // Gray
+  '#FAFAFA', // Off White
-  '#FFE4E1', // Light Pink
+  
-  '#FFD7BE', // Light Peach
+  // Light Grays (6)
-  '#FFF4CC', // Light Yellow
+  '#F5F5F5', // Very Light Gray 1
-  '#D4E4BC', // Light Green
+  '#F0F0F0', // Very Light Gray 2
-  '#C8E6F5', // Light Blue
+  '#EBEBEB', // Very Light Gray 3
-  '#E6D7FF', // Light Purple
+  '#E8E8E8', // Light Gray 1
-  '#BEBEBE', // Medium Gray
+  '#E0E0E0', // Light Gray 2
-  '#A0A0A0'  // Dark Gray
+  '#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;
+  width: 44px;
-  height: 32px;
+  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;
   }
 }
 </style>