From c777398bdc7cdbabd01689907813e9ac83c38031 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Wed, 21 Jan 2026 22:31:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=B7=BB=E5=8A=A0=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E9=A1=B5=E9=9D=A2=E5=8F=B3=E8=BE=B9=E6=A0=8F=E7=9A=84?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E9=A2=9C=E8=89=B2=E5=BC=B9=E7=AA=97=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tools/add_background/add_background.vue   | 45 +++++++++++++++++--
 1 file changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/views/tools/add_background/add_background.vue b/src/views/tools/add_background/add_background.vue
index 03049bc..ab9ab50 100644
--- a/src/views/tools/add_background/add_background.vue
+++ b/src/views/tools/add_background/add_background.vue
@@ -298,11 +298,11 @@ favorite-colors-grid<template>
                     <div 
                       v-if="!backgroundColor" 
                       class="sidebar-color-picker-empty"
-                      @click="backgroundColor = '#FFFFFF'"
+                      @click="triggerColorPicker"
                     >
                     </div>
                     <input
-                      v-else
+                      v-if="backgroundColor"
                       v-model="backgroundColor"
                       type="color"
                       class="sidebar-color-picker"
@@ -450,11 +450,11 @@ favorite-colors-grid<template>
                 <div 
                   v-if="!backgroundColor" 
                   class="sidebar-color-picker-empty"
-                  @click="backgroundColor = '#FFFFFF'"
+                  @click="triggerColorPicker"
                 >
                 </div>
                 <input
-                  v-else
+                  v-if="backgroundColor"
                   v-model="backgroundColor"
                   type="color"
                   class="sidebar-color-picker"
@@ -702,6 +702,43 @@ const removeFavoriteColor = (color: string) => {
   }
 }
 
+// Trigger color picker when clicking on empty checkerboard
+const triggerColorPicker = (event: MouseEvent) => {
+  // Get the position of the checkerboard element
+  const targetElement = event.currentTarget as HTMLElement
+  const rect = targetElement.getBoundingClientRect()
+  
+  // Create a temporary color input at the checkerboard position
+  const tempInput = document.createElement('input')
+  tempInput.type = 'color'
+  tempInput.value = '#FFFFFF'
+  tempInput.style.position = 'fixed'
+  tempInput.style.left = `${rect.left}px`
+  tempInput.style.top = `${rect.top}px`
+  tempInput.style.width = `${rect.width}px`
+  tempInput.style.height = `${rect.height}px`
+  tempInput.style.opacity = '0'
+  tempInput.style.border = 'none'
+  tempInput.style.cursor = 'pointer'
+  
+  document.body.appendChild(tempInput)
+  
+  tempInput.addEventListener('input', (e) => {
+    const target = e.target as HTMLInputElement
+    backgroundColor.value = target.value
+    onColorChange()
+  })
+  
+  tempInput.addEventListener('change', () => {
+    setTimeout(() => {
+      document.body.removeChild(tempInput)
+    }, 100)
+  })
+  
+  // Trigger click to open color picker
+  tempInput.click()
+}
+
 // Fetch Pexels images
 const fetchPexelsImages = async () => {
   // Skip fetching if no API key is configured