重构添加背景页面

src/views/tools/add_background/add_background.vue

@@ -21,6 +21,26 @@
     
     <div class="page-header">
       <h2>{{ t('Add Background') }}</h2>
+      <!-- Background Color Selection in Header Center -->
+      <div v-if="uploadedImage" class="header-color-controls">
+        <label class="header-color-label">{{ t('Background Color') }}</label>
+        <div class="header-color-picker-container">
+          <input
+            v-model="backgroundColor"
+            type="color"
+            class="header-color-picker"
+            @input="onColorChange"
+          />
+          <input
+            v-model="backgroundColor"
+            type="text"
+            class="header-hex-input"
+            placeholder="#FFFFFF"
+            @input="onHexInputChange"
+            @blur="onHexInputBlur"
+          />
+        </div>
+      </div>
       <div v-if="uploadedImage" class="toolbar-actions">
         <button
           v-if="resultImage"
@@ -87,29 +107,6 @@
             </div>
 
             <div v-else class="preview-section">
-              <!-- Background Color Selection -->
-              <div v-if="uploadedImage" class="background-controls">
-                <div class="control-group">
-                  <label class="control-label">{{ t('Background Color') }}</label>
-                  <div class="color-picker-container">
-                    <input
-                      v-model="backgroundColor"
-                      type="color"
-                      class="color-picker"
-                      @input="onColorChange"
-                    />
-                    <input
-                      v-model="backgroundColor"
-                      type="text"
-                      class="hex-input"
-                      placeholder="#FFFFFF"
-                      @input="onHexInputChange"
-                      @blur="onHexInputBlur"
-                    />
-                  </div>
-                </div>
-              </div>
-
               <div class="canvas-container" v-show="uploadedImage">
                 <canvas 
                   ref="canvasRef" 
@@ -122,25 +119,6 @@
               </div>
             </div>
           </div>
-          
-          <!-- Color Palette Sidebar -->
-          <div v-if="uploadedImage" class="color-palette-sidebar">
-            <div class="palette-section">
-              <h4 class="palette-title">{{ t('Color Tones') }}</h4>
-              <div class="palette-grid">
-                <div
-                  v-for="(color, index) in colorPalette"
-                  :key="index"
-                  class="palette-color"
-                  :class="{ 'active': color === backgroundColor }"
-                  :style="{ backgroundColor: color }"
-                  @click="selectPaletteColor(color)"
-                  :title="color"
-                >
-                </div>
-              </div>
-            </div>
-          </div>
         </div>
 
         <div v-if="historyList.length > 0 || uploadedImage" class="history-bar">
@@ -185,6 +163,27 @@
         </div>
       </div>
     </div>
+
+    <!-- Right Sidebar for Color Tones -->
+    <div v-if="uploadedImage" class="right-sidebar">
+      <div class="sidebar-content">
+        <div class="palette-section">
+          <h4 class="palette-title">{{ t('Color Tones') }}</h4>
+          <div class="palette-grid">
+            <div
+              v-for="(color, index) in colorPalette"
+              :key="index"
+              class="palette-color"
+              :class="{ 'active': color === backgroundColor }"
+              :style="{ backgroundColor: color }"
+              @click="selectPaletteColor(color)"
+              :title="color"
+            >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -1225,18 +1224,8 @@ const removeHistoryItem = (index: number) => {
   align-items: center;
   width: 100%;
   padding: 12px 36px;
-}
+  gap: 16px;
-
+  padding-right: 316px; /* Make space for right sidebar + padding */
-.page-content {
-  flex: 1;
-  width: 100%;
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 12px 16px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  min-height: 0;
 }
 
 .page-header h2 {
@@ -1244,6 +1233,91 @@ const removeHistoryItem = (index: number) => {
   font-weight: 600;
   color: #1f2937;
   margin: 0;
+  flex-shrink: 0;
+}
+
+/* Header Color Controls */
+.header-color-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  justify-content: center;
+}
+
+.header-color-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #64748b;
+  white-space: nowrap;
+}
+
+.header-color-picker-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.header-color-picker {
+  width: 48px;
+  height: 48px;
+  border: 2px solid #e5e7eb;
+  border-radius: 8px;
+  cursor: pointer;
+  background: none;
+  
+  &::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+  
+  &::-webkit-color-swatch {
+    border: none;
+    border-radius: 6px;
+  }
+}
+
+.header-hex-input {
+  width: 120px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-size: 14px;
+  font-family: monospace;
+  color: #1f2937;
+  background: white;
+  outline: none;
+  transition: all 0.2s ease;
+
+  &:focus {
+    border-color: #1fc76f;
+    box-shadow: 0 0 0 3px rgba(31, 199, 111, 0.1);
+  }
+
+  &.invalid {
+    border-color: #ef4444;
+    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+  }
+}
+
+.page-content {
+  flex: 1;
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+  padding-right: 296px; /* Make space for right sidebar + padding */
+}
+
+.page-header h2 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
+  flex-shrink: 0;
 }
 
 .toolbar-actions {
@@ -1291,9 +1365,10 @@ const removeHistoryItem = (index: number) => {
 .main-area {
   flex: 1;
   display: flex;
-  gap: 16px;
+  gap: 0;
   overflow: hidden;
   min-height: 0;
+  position: relative;
 }
 
 .upload-section {
@@ -1303,10 +1378,10 @@ const removeHistoryItem = (index: number) => {
   overflow: hidden;
   min-height: 0;
   background: white;
-  border-radius: 12px;
+  border-radius: 0;
   padding: 24px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: none;
-  border: 1px solid #e5e7eb;
+  border: none;
 }
 
 .upload-section:has(.preview-section) {
@@ -1498,109 +1573,8 @@ const removeHistoryItem = (index: number) => {
   flex-direction: column;
   overflow: hidden;
   min-height: 0;
-  padding: 12px;
+  padding: 0;
-}
+  background: #fafbfc;
-
-.background-controls {
-  flex-shrink: 0;
-  padding: 20px;
-  background: #f8fafc;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.control-group {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-bottom: 16px;
-}
-
-.control-label {
-  font-size: 14px;
-  font-weight: 600;
-  color: #64748b;
-  min-width: 120px;
-}
-
-.color-picker-container {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.color-picker {
-  width: 48px;
-  height: 48px;
-  border: 2px solid #e5e7eb;
-  border-radius: 8px;
-  cursor: pointer;
-  background: none;
-  
-  &::-webkit-color-swatch-wrapper {
-    padding: 0;
-  }
-  
-  &::-webkit-color-swatch {
-    border: none;
-    border-radius: 6px;
-  }
-}
-
-.hex-input {
-  width: 120px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 10px 12px;
-  font-size: 14px;
-  font-family: monospace;
-  color: #1f2937;
-  background: white;
-  outline: none;
-  transition: all 0.2s ease;
-
-  &:focus {
-    border-color: #1fc76f;
-    box-shadow: 0 0 0 3px rgba(31, 199, 111, 0.1);
-  }
-
-  &.invalid {
-    border-color: #ef4444;
-    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
-  }
-}
-
-.action-buttons {
-  display: flex;
-  justify-content: center;
-}
-
-.apply-btn {
-  padding: 12px 32px;
-  background: #1fc76f;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  font-size: 15px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover:not(:disabled) {
-    background: #16a34a;
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(31, 199, 111, 0.3);
-  }
-
-  &:active:not(:disabled) {
-    transform: translateY(0);
-  }
-
-  &:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    transform: none;
-    box-shadow: none;
-  }
 }
 
 .canvas-container {
@@ -1622,57 +1596,67 @@ const removeHistoryItem = (index: number) => {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-/* Color Palette Sidebar */
+/* Right Sidebar - Naive UI Style */
-.color-palette-sidebar {
+.right-sidebar {
-  width: 180px;
+  position: fixed;
-  flex-shrink: 0;
+  right: 0;
+  top: 64px; /* Below app header */
+  bottom: 0;
+  width: 280px;
   background: white;
-  border-radius: 12px;
+  border-left: 1px solid #e5e7eb;
-  padding: 16px;
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.05);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  z-index: 100;
-  border: 1px solid #e5e7eb;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sidebar-content {
+  flex: 1;
   overflow-y: auto;
-  max-height: 100%;
+  padding: 20px;
 }
 
 .palette-section {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 16px;
 }
 
 .palette-title {
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 600;
-  color: #374151;
+  color: #1f2937;
   margin: 0;
-  padding-bottom: 8px;
+  padding-bottom: 12px;
   border-bottom: 1px solid #e5e7eb;
 }
 
 .palette-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
-  gap: 8px;
+  gap: 10px;
 }
 
 .palette-color {
   aspect-ratio: 1;
-  border-radius: 6px;
+  border-radius: 8px;
   cursor: pointer;
   border: 2px solid transparent;
   transition: all 0.15s ease;
   position: relative;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   
   &:hover {
-    transform: scale(1.1);
+    transform: scale(1.08);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     z-index: 1;
   }
   
   &.active {
     border-color: #1fc76f;
-    box-shadow: 0 0 0 2px rgba(31, 199, 111, 0.3);
+    box-shadow: 0 0 0 3px rgba(31, 199, 111, 0.25);
     
     &::after {
       content: '';
@@ -1680,11 +1664,11 @@ const removeHistoryItem = (index: number) => {
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      width: 8px;
+      width: 10px;
-      height: 8px;
+      height: 10px;
       background: white;
       border-radius: 50%;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
     }
   }
 }
@@ -1893,14 +1877,30 @@ const removeHistoryItem = (index: number) => {
 @media (max-width: 768px) {
   .page-header {
     padding: 10px 12px;
+    flex-wrap: wrap;
+    padding-right: 12px; /* Reset padding on mobile */
   }
 
   .page-header h2 {
     font-size: 18px;
+    width: 100%;
+  }
+
+  .header-color-controls {
+    width: 100%;
+    justify-content: flex-start;
+    order: 2;
+  }
+
+  .toolbar-actions {
+    order: 1;
+    margin-left: auto;
   }
 
   .page-content {
     padding: 8px 12px;
+    padding-right: 12px;
+    padding-bottom: 220px; /* Make space for bottom sidebar */
   }
 
   .upload-section {
@@ -1942,29 +1942,29 @@ const removeHistoryItem = (index: number) => {
   }
 
   .preview-section {
-    padding: 8px;
+    padding: 0;
   }
 
-  .background-controls {
+  .canvas-container {
-    padding: 16px;
+    padding: 20px;
+    padding-right: 20px;
   }
 
-  .control-group {
+  .right-sidebar {
-    flex-direction: column;
+    position: fixed;
-    align-items: flex-start;
-    gap: 12px;
-  }
-
-  .control-label {
-    min-width: auto;
-  }
-
-  .color-picker-container {
     width: 100%;
+    height: 200px;
+    top: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-left: none;
+    border-top: 1px solid #e5e7eb;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
   }
 
-  .hex-input {
+  .palette-grid {
-    flex: 1;
+    grid-template-columns: repeat(6, 1fr);
   }
 
   .history-bar {
@@ -1993,25 +1993,23 @@ const removeHistoryItem = (index: number) => {
   .main-area {
     flex-direction: column;
   }
-
-  .color-palette-sidebar {
-    width: 100%;
-    max-height: 120px;
-    order: -1;
-  }
-
-  .palette-grid {
-    grid-template-columns: repeat(6, 1fr);
-  }
 }
 
 @media (max-width: 1024px) and (min-width: 769px) {
-  .color-palette-sidebar {
+  .page-header {
-    width: 140px;
+    padding-right: 276px; /* Adjust for smaller sidebar */
+  }
+
+  .page-content {
+    padding-right: 256px; /* Adjust for smaller sidebar */
+  }
+
+  .right-sidebar {
+    width: 240px;
   }
   
   .palette-grid {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 </style>