Add history bar and fix add button in RemoveBackground tool

apps/jingrow/frontend/src/views/tools/RemoveBackground.vue

@@ -1,7 +1,34 @@
 <template>
   <div class="remove-background-page">
+    <!-- 文件输入框，始终存在 -->
+    <input
+      ref="fileInputRef"
+      type="file"
+      accept="image/*"
+      style="display: none"
+      @change="handleFileSelect"
+    />
+    
     <div class="page-header">
       <h2>{{ t('Remove Background') }}</h2>
+      <!-- 工具栏图标 -->
+      <div v-if="uploadedImage" class="toolbar-actions">
+        <button
+          v-if="resultImage"
+          class="toolbar-btn"
+          @click="handleDownload"
+          :title="t('Download')"
+        >
+          <i class="fa fa-download"></i>
+        </button>
+        <button 
+          class="toolbar-btn"
+          @click="resetUpload"
+          :title="t('Change Image')"
+        >
+          <i class="fa fa-refresh"></i>
+        </button>
+      </div>
     </div>
 
     <div class="page-content">
@@ -17,13 +44,6 @@
             @dragleave="handleDragLeave"
             @click="triggerFileInput"
           >
-            <input
-              ref="fileInputRef"
-              type="file"
-              accept="image/*"
-              style="display: none"
-              @change="handleFileSelect"
-            />
             <div class="upload-content">
               <div class="upload-icon">
                 <i class="fa fa-cloud-upload"></i>
@@ -82,20 +102,48 @@
           </div>
         </div>
 
-        <!-- 操作按钮 -->
+        <!-- 底部历史记录栏 -->
-        <div v-if="uploadedImage" class="action-buttons">
+        <div v-if="historyList.length > 0 || uploadedImage" class="history-bar">
+          <div class="history-scroll-container">
+            <!-- 添加新图片按钮 -->
             <button 
-            v-if="resultImage"
+              type="button"
-            class="action-btn download-btn"
+              class="history-item add-button"
-            @click="handleDownload"
+              @click.stop="triggerFileInput"
+              :title="t('Add New Image')"
             >
-            <i class="fa fa-download"></i>
+              <i class="fa fa-plus"></i>
-            {{ t('Download') }}
-          </button>
-          <button class="action-btn change-image-btn" @click="resetUpload">
-            <i class="fa fa-refresh"></i>
-            {{ t('Change Image') }}
             </button>
+
+            <!-- 历史记录缩略图列表 -->
+            <div
+              v-for="(item, index) in historyList"
+              :key="item.id"
+              class="history-item"
+              :class="{ 'active': currentHistoryIndex === index }"
+              @click="selectHistoryItem(index)"
+            >
+              <div class="history-thumbnail">
+                <img :src="getHistoryThumbnailUrl(item)" alt="History" />
+                <div v-if="currentHistoryIndex === index" class="active-indicator">
+                  <i class="fa fa-arrow-up"></i>
+                </div>
+              </div>
+            </div>
+
+            <!-- 当前正在处理的图片（如果还没有添加到历史记录） -->
+            <div
+              v-if="uploadedImage && resultImage && currentHistoryIndex === -1"
+              class="history-item active"
+            >
+              <div class="history-thumbnail">
+                <img :src="resultImageUrl" alt="Current" />
+                <div class="active-indicator">
+                  <i class="fa fa-arrow-up"></i>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -113,6 +161,15 @@ import { useAuthStore } from '@/shared/stores/auth'
 const message = useMessage()
 const authStore = useAuthStore()
 
+// 历史记录项类型
+interface HistoryItem {
+  id: string
+  originalImageUrl: string
+  originalImageFile: File | null
+  resultImage: string // Base64编码的结果图片
+  timestamp: number
+}
+
 // 文件相关
 const fileInputRef = ref<HTMLInputElement | null>(null)
 const uploadedImage = ref<File | null>(null)
@@ -128,6 +185,10 @@ const resultImageUrl = computed(() => {
   return `data:image/png;base64,${resultImage.value}`
 })
 
+// 历史记录
+const historyList = ref<HistoryItem[]>([])
+const currentHistoryIndex = ref<number>(-1) // -1 表示当前正在处理的图片，>=0 表示历史记录索引
+
 // 状态
 const isDragging = ref(false)
 const processing = ref(false)
@@ -137,7 +198,11 @@ const isDraggingSplitLine = ref(false)
 
 // 触发文件选择
 const triggerFileInput = () => {
-  fileInputRef.value?.click()
+  if (fileInputRef.value) {
+    // 重置文件输入框的值，确保每次点击都能触发 change 事件
+    fileInputRef.value.value = ''
+    fileInputRef.value.click()
+  }
 }
 
 // 处理文件选择
@@ -187,6 +252,7 @@ const processFile = (file: File) => {
   uploadedImage.value = file
   resultImage.value = ''
   splitPosition.value = 0 // 重置分割线位置到最左边，默认显示完整结果图
+  currentHistoryIndex.value = -1 // 重置为当前处理状态
   
   // 创建预览URL
   const reader = new FileReader()
@@ -204,11 +270,41 @@ const resetUpload = () => {
   uploadedImageUrl.value = ''
   resultImage.value = ''
   splitPosition.value = 0
+  currentHistoryIndex.value = -1
   if (fileInputRef.value) {
     fileInputRef.value.value = ''
   }
 }
 
+// 选择历史记录项
+const selectHistoryItem = (index: number) => {
+  if (index < 0 || index >= historyList.value.length) return
+  
+  const item = historyList.value[index]
+  currentHistoryIndex.value = index
+  
+  // 恢复原图和结果图
+  uploadedImageUrl.value = item.originalImageUrl
+  resultImage.value = item.resultImage
+  splitPosition.value = 0
+  
+  // 恢复文件对象（如果存在）
+  uploadedImage.value = item.originalImageFile
+}
+
+// 获取历史记录缩略图URL
+const getHistoryThumbnailUrl = (item: HistoryItem): string => {
+  // 优先显示结果图（去背景后的图片）
+  if (item.resultImage) {
+    if (item.resultImage.startsWith('data:')) {
+      return item.resultImage
+    }
+    return `data:image/png;base64,${item.resultImage}`
+  }
+  // 如果没有结果图，显示原图
+  return item.originalImageUrl
+}
+
 // 拖动竖线处理
 const handleSplitLineMouseDown = (e: MouseEvent) => {
   e.preventDefault()
@@ -290,6 +386,23 @@ const handleRemoveBackground = async () => {
           const firstResult = result.data[0]
           if (firstResult.success && firstResult.image_content) {
             resultImage.value = firstResult.image_content
+            
+            // 将结果添加到历史记录（如果当前是新的处理，不是从历史记录中选择的）
+            if (currentHistoryIndex.value === -1 && uploadedImage.value && uploadedImageUrl.value) {
+              const historyItem: HistoryItem = {
+                id: `history-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+                originalImageUrl: uploadedImageUrl.value,
+                originalImageFile: uploadedImage.value,
+                resultImage: firstResult.image_content,
+                timestamp: Date.now()
+              }
+              historyList.value.push(historyItem)
+              currentHistoryIndex.value = historyList.value.length - 1
+            } else if (currentHistoryIndex.value >= 0) {
+              // 如果是从历史记录中选择的，更新该历史记录项的结果
+              historyList.value[currentHistoryIndex.value].resultImage = firstResult.image_content
+            }
+            
             message.success(t('Background removed successfully!'))
           } else {
             message.error(firstResult.error || t('Failed to remove background'))
@@ -381,24 +494,24 @@ const handleDownload = () => {
 <style scoped lang="scss">
 .remove-background-page {
   width: 100%;
-  padding: 16px;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  align-items: center;
 }
 
 .remove-background-page > .page-content {
   width: 100%;
   max-width: 1000px;
+  margin: 0 auto;
+  padding: 16px;
 }
 
 .page-header {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  margin-bottom: 24px;
+  width: 100%;
-  padding: 0;
+  padding: 16px 24px;
 }
 
 .page-header h2 {
@@ -408,6 +521,41 @@ const handleDownload = () => {
   margin: 0;
 }
 
+/* 工具栏图标 */
+.toolbar-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.toolbar-btn {
+  width: 36px;
+  height: 36px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: white;
+  color: #64748b;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+
+  i {
+    font-size: 14px;
+  }
+
+  &:hover {
+    border-color: #1fc76f;
+    color: #1fc76f;
+    background: #f0fdf4;
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
 .header-content {
   display: flex;
   align-items: center;
@@ -760,49 +908,143 @@ h1 {
   }
 }
 
-/* 操作按钮 */
+/* 底部历史记录栏 */
-.action-buttons {
+.history-bar {
-  display: flex;
+  width: 100%;
-  gap: 12px;
+  padding: 16px 0;
-  justify-content: center;
+  background: white;
-  flex-wrap: wrap;
+  border-top: 1px solid #e5e7eb;
   margin-top: 24px;
 }
 
-.action-btn {
+.history-scroll-container {
-  min-width: 140px;
+  display: flex;
-  height: 40px;
+  gap: 12px;
-  padding: 0 20px;
+  overflow-x: auto;
-  border: 1px solid #e5e7eb;
+  overflow-y: hidden;
+  padding: 0 16px;
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 transparent;
+
+  &::-webkit-scrollbar {
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 3px;
+
+    &:hover {
+      background: #94a3b8;
+    }
+  }
+}
+
+.history-item {
+  flex-shrink: 0;
+  width: 80px;
+  height: 80px;
   border-radius: 8px;
-  background: white;
-  color: #64748b;
   cursor: pointer;
-  display: inline-flex;
+  transition: all 0.2s ease;
+  position: relative;
+
+  &.add-button {
+    background: white;
+    border: 2px dashed #cbd5e1;
+    display: flex;
     align-items: center;
     justify-content: center;
-  gap: 8px;
+    color: #64748b;
-  font-size: 14px;
-  font-weight: 500;
     transition: all 0.2s ease;
+    padding: 0;
+    margin: 0;
+    outline: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
 
     i {
-    font-size: 14px;
+      font-size: 24px;
+      pointer-events: none;
     }
 
     &:hover {
       border-color: #1fc76f;
       color: #1fc76f;
       background: #f0fdf4;
-    transform: translateY(-1px);
-    box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15);
     }
 
     &:active {
-    transform: translateY(0);
+      transform: scale(0.95);
+    }
+
+    &:focus {
+      outline: none;
+      border-color: #1fc76f;
+    }
+  }
+
+  &.active {
+    .history-thumbnail {
+      border-color: #1fc76f;
+      border-width: 3px;
+    }
   }
 }
 
+.history-thumbnail {
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  border: 2px solid #e5e7eb;
+  overflow: hidden;
+  position: relative;
+  background: 
+    linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
+    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
+    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
+  background-size: 10px 10px;
+  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
+  transition: all 0.2s ease;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+  }
+
+  &:hover {
+    border-color: #1fc76f;
+    transform: scale(1.05);
+  }
+}
+
+.active-indicator {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 20px;
+  height: 20px;
+  background: #1fc76f;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  border: 2px solid white;
+
+  i {
+    font-size: 10px;
+    color: white;
+  }
+}
 
 /* 响应式设计 */
 @media (max-width: 768px) {
@@ -831,12 +1073,14 @@ h1 {
     }
   }
 
-  .action-buttons {
+  .history-item {
-    flex-direction: column;
+    width: 64px;
-
+    height: 64px;
-    .action-btn {
-      width: 100%;
   }
+
+  .history-scroll-container {
+    gap: 8px;
+    padding: 0 8px;
   }
 }
 </style>