1

electron-vue-template/src/renderer/components/amazon/AmazonDashboard.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
 import { amazonApi } from '../../api/amazon'
 
 // 响应式状态
@@ -7,7 +8,6 @@ const loading = ref(false) // 主加载状态
 const tableLoading = ref(false) // 表格加载状态
 const progressPercentage = ref(0) // 进度百分比
 const localProductData = ref<any[]>([]) // 本地产品数据
-const singleAsin = ref('') // 单个ASIN输入
 const currentAsin = ref('') // 当前处理的ASIN
 const genmaiLoading = ref(false) // Genmai Spirit加载状态
 
@@ -25,9 +25,27 @@ const paginatedData = computed(() => {
   return localProductData.value.slice(start, end)
 })
 
+// 左侧步骤栏进度
+const activeStep = computed(() => {
+  // 0 导入/输入 -> 1 采集 -> 2 查看校验 -> 3 导出
+  if (loading.value && progressPercentage.value < 100) return 1
+  if (!localProductData.value.length) return 0
+  if (localProductData.value.length && progressPercentage.value < 100) return 1
+  return 2
+})
+
+// 左侧：网站地区 & 待采集队列
+const region = ref('JP')
+const regionOptions = [
+  { label: '日本 (Japan)', value: 'JP', flag: '🇯🇵' },
+  { label: '美国 (USA)', value: 'US', flag: '🇺🇸' },
+  { label: '中国 (China)', value: 'CN', flag: '🇨🇳' },
+]
+const pendingAsins = ref<string[]>([])
+
 // 通用消息提示
 function showMessage(message: string, type: 'success' | 'warning' | 'error' | 'info' = 'info') {
-  alert(`[${type.toUpperCase()}] ${message}`)
+  ElMessage({ message, type })
 }
 
 // Excel文件上传处理 - 主要业务逻辑入口
@@ -46,8 +64,9 @@ async function processExcelFile(file: File) {
       return
     }
 
-    showMessage(`成功解析 ${asinList.length} 个ASIN`, 'success')
-    await batchGetProductInfo(asinList)
+    // 存入待采集队列，等待用户点击“获取数据”再开始
+    pendingAsins.value = asinList
+    showMessage(`成功解析 ${asinList.length} 个ASIN，点击“获取数据”开始采集`, 'success')
   } catch (error: any) {
     showMessage(error.message || '处理文件失败', 'error')
   } finally {
@@ -144,26 +163,18 @@ async function batchGetProductInfo(asinList: string[]) {
   }
 }
 
-// 单个ASIN查询
-async function searchSingleAsin() {
-  const asin = singleAsin.value.trim()
-  if (!asin) return
-
-  localProductData.value = []
+// 点击开始采集
+async function startQueuedFetch() {
+  if (!pendingAsins.value.length) {
+    showMessage('请先导入ASIN列表', 'warning')
+    return
+  }
   loading.value = true
-
+  tableLoading.value = true
   try {
-    const resp = await amazonApi.getProductsBatch([asin], `SINGLE_${Date.now()}`)
-    if (resp?.data?.products?.length > 0) {
-      localProductData.value = resp.data.products
-      showMessage('查询成功', 'success')
-      singleAsin.value = ''
-    } else {
-      showMessage('未找到商品信息', 'warning')
-    }
-  } catch (e: any) {
-    showMessage(e?.message || '查询失败', 'error')
+    await batchGetProductInfo(pendingAsins.value)
   } finally {
+    tableLoading.value = false
     loading.value = false
   }
 }
@@ -255,99 +266,138 @@ onMounted(async () => {
 <template>
   <div class="amazon-root">
     <div class="main-container">
-
-      <!-- 文件导入和操作区域 -->
-      <div class="import-section" @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop="onDrop" :class="{ 'drag-active': dragActive }">
-        <div class="import-controls">
-          <!-- 文件上传按钮 -->
-          <el-button type="primary" :disabled="loading" @click="openAmazonUpload">
-            📂 {{ loading ? '处理中...' : '导入ASIN列表' }}
-          </el-button>
-          <input ref="amazonUpload" style="display:none" type="file" accept=".csv,.txt,.xls,.xlsx" @change="handleExcelUpload" :disabled="loading" />
-
-          <!-- 单个ASIN输入 -->
-          <div class="single-input">
-            <input class="text" v-model="singleAsin" placeholder="输入单个ASIN" :disabled="loading" @keyup.enter="searchSingleAsin" />
-            <el-button type="info" :disabled="!singleAsin || loading" @click="searchSingleAsin">查询</el-button>
-          </div>
-
-          <!-- 操作按钮组 -->
-          <div class="action-buttons">
-            <el-button type="danger" :disabled="!loading" @click="stopFetch">停止获取</el-button>
-            <el-button type="success" :disabled="!localProductData.length || loading" @click="exportToExcel">导出Excel</el-button>
-            <el-button type="warning" :loading="genmaiLoading" @click="openGenmaiSpirit">{{ genmaiLoading ? '启动中...' : '跟卖精灵' }}</el-button>
-          </div>
-        </div>
-        <!-- 进度条显示 -->
-        <div class="progress-section" v-if="loading">
-          <div class="progress-box">
-            <div class="progress-container">
-              <div class="progress-bar">
-                <div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
+      <div class="body-layout">
+        <!-- 左侧步骤栏 -->
+        <aside class="steps-sidebar">
+          <div class="steps-title">查询步骤：</div>
+          <div class="steps-flow">
+            <!-- 1 -->
+            <div class="flow-item">
+              <div class="step-index">1</div>
+              <div class="step-card">
+                <div class="step-header"><div class="title">导入ASIN</div></div>
+                <div class="desc">仅支持包含 ASIN 列的 CSV/Excel 文档</div>
+                <div class="links">
+                  <a class="link" @click.prevent>点击查看示例</a>
+                  <span class="sep">|</span>
+                  <a class="link" @click.prevent>点击下载模板</a>
+                </div>
+                <div class="dropzone" @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop="onDrop" @click="openAmazonUpload">
+                  <div class="dz-el-icon">📤</div>
+                  <div class="dz-text">点击或将文件拖拽到这里上传</div>
+                  <div class="dz-sub">支持 .csv .txt .xls .xlsx</div>
+                </div>
+                <input ref="amazonUpload" style="display:none" type="file" accept=".csv,.txt,.xls,.xlsx" @change="handleExcelUpload" :disabled="loading" />
               </div>
-              <div class="progress-text">{{ progressPercentage }}%</div>
             </div>
-            <div class="current-status" v-if="currentAsin">{{ currentAsin }}</div>
-          </div>
-        </div>
-      </div>
+            <!-- 2 网站地区 -->
+            <div class="flow-item">
+              <div class="step-index">2</div>
+              <div class="step-card">
+                <div class="step-header"><div class="title">网站地区</div></div>
+                <div class="desc">请选择目标网站地区，如：日本区</div>
+                <el-select v-model="region" placeholder="选择地区" size="small" style="width: 100%">
+                  <el-option v-for="opt in regionOptions" :key="opt.value" :label="opt.label" :value="opt.value">
+                    <span style="margin-right:6px">{{ opt.flag }}</span>{{ opt.label }}
+                  </el-option>
+                </el-select>
+              </div>
+            </div>
+            <!-- 3 获取数据 -->
+            <div class="flow-item">
+              <div class="step-index">3</div>
+              <div class="step-card">
+                <div class="step-header"><div class="title">获取数据</div></div>
+                <div class="desc">导入表格后，点击下方按钮开始获取ASIN数据</div>
+                <el-button size="small" class="w100 btn-blue" :disabled="!pendingAsins.length || loading" @click="startQueuedFetch">{{ loading ? '处理中...' : '获取数据' }}</el-button>
+                <div class="mini-hint" v-if="pendingAsins.length">已导入 {{ pendingAsins.length }} 个 ASIN</div>
+                <!-- 左侧不再显示进度条 -->
+              </div>
+            </div>
+            <!-- 4 -->
+            <div class="flow-item">
+              <div class="step-index">4</div>
+              <div class="step-card">
+                <div class="step-header"><div class="title">导出数据</div></div>
+                <div class="action-buttons column">
+                  <el-button size="small" class="w100 btn-blue" :disabled="!localProductData.length || loading" @click="exportToExcel">导出Excel</el-button>
+                  
+                  <el-button size="small" class="w100 btn-blue" plain :disabled="!loading" @click="stopFetch">停止获取</el-button>
+                  <el-button size="small" class="w100 btn-blue" :loading="genmaiLoading" @click="openGenmaiSpirit">{{ genmaiLoading ? '启动中...' : '跟卖精灵' }}</el-button>
 
-      <!-- 数据显示区域 -->
-      <div class="table-container">
-        <!-- 数据表格（无数据时也显示表头） -->
-        <div class="table-section">
-          <div class="table-wrapper">
-            <table class="table">
-              <thead>
-              <tr>
-                <th>ASIN</th>
-                <th>卖家/配送方</th>
-                <th>当前售价</th>
-              </tr>
-              </thead>
-              <tbody>
-                <tr v-for="row in paginatedData" :key="row.asin">
-                  <td>{{ row.asin }}</td>
-                  <td>
-                    <div class="seller-info">
-                      <span class="seller">{{ row.seller || '无货' }}</span>
-                      <span v-if="row.shipper && row.shipper !== row.seller" class="shipper">/ {{ row.shipper }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </aside>
+
+        <!-- 右侧主区域 -->
+        <section class="content-panel">
+
+          <!-- 数据显示区域 -->
+          <div class="table-container">
+            <div class="table-section">
+              <!-- 表格上方进度条（与乐天一致） -->
+              <div class="progress-section" v-if="loading">
+                <div class="progress-box">
+                  <div class="progress-container">
+                    <div class="progress-bar">
+                      <div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
                     </div>
-                  </td>
-                  <td>
-                    <span class="price">{{ row.price || '无货' }}</span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div v-if="paginatedData.length === 0" class="empty-abs">
-            <div class="empty-container">
-              <div class="empty-icon">📄</div>
-              <div class="empty-text">暂无数据，请导入ASIN列表</div>
+                    <div class="progress-text">{{ progressPercentage }}%</div>
+                  </div>
+                </div>
+              </div>
+              <div class="table-wrapper">
+                <table class="table">
+                  <thead>
+                  <tr>
+                    <th>ASIN</th>
+                    <th>卖家/配送方</th>
+                    <th>当前售价</th>
+                  </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="row in paginatedData" :key="row.asin">
+                      <td>{{ row.asin }}</td>
+                      <td>
+                        <div class="seller-info">
+                          <span class="seller">{{ row.seller || '无货' }}</span>
+                          <span v-if="row.shipper && row.shipper !== row.seller" class="shipper">/ {{ row.shipper }}</span>
+                        </div>
+                      </td>
+                      <td>
+                        <span class="price">{{ row.price || '无货' }}</span>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <div v-if="paginatedData.length === 0" class="empty-abs">
+                <div v-if="tableLoading || loading" class="empty-container">
+                  <div class="spinner">⟳</div>
+                  <div>加载中...</div>
+                </div>
+                <div v-else class="empty-container">
+                  <div class="empty-icon">📄</div>
+                  <div class="empty-text">暂无数据，请导入ASIN列表</div>
+                </div>
+              </div>
+            </div>
+            <div class="pagination-fixed" >
+              <el-pagination
+                background
+                :current-page="currentPage"
+                :page-sizes="[15,30,50,100]"
+                :page-size="pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="localProductData.length"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+              />
             </div>
           </div>
-
-          <!-- 表格加载遮罩 -->
-          <div v-if="tableLoading && paginatedData.length === 0" class="table-loading">
-            <div class="spinner">⟳</div>
-            <div>加载中...</div>
-          </div>
-        </div>
-
-        <!-- 分页器 -->
-        <div class="pagination-fixed" >
-          <el-pagination
-            background
-            :current-page="currentPage"
-            :page-sizes="[15,30,50,100]"
-            :page-size="pageSize"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="localProductData.length"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-          />
-        </div>
+        </section>
       </div>
     </div>
   </div>
@@ -356,6 +406,45 @@ onMounted(async () => {
 <style scoped>
 .amazon-root { position: absolute; inset: 0; background: #f5f5f5; padding: 12px; box-sizing: border-box; }
 .main-container { background: #fff; border-radius: 4px; padding: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); height: 100%; display: flex; flex-direction: column; }
+.body-layout { display: flex; gap: 12px; height: 100%; }
+.steps-sidebar { width: 220px; background: #fff; border: 1px solid #ebeef5; border-radius: 6px; padding: 10px; height: 100%; flex-shrink: 0; }
+.steps-title { font-size: 14px; font-weight: 600; color: #303133; margin-bottom: 8px; }
+.steps-flow { position: relative; }
+.steps-flow:before { content: ''; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: #e5e7eb; }
+.flow-item { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 8px 0; }
+.flow-item + .flow-item { border-top: 1px dashed #ebeef5; }
+.flow-item .step-index { position: static; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%; background: #1677FF; color: #fff; font-size: 12px; font-weight: 600; margin-top: 2px; }
+.flow-item:after { display: none; }
+.step-card { border: none; border-radius: 0; padding: 0; background: transparent; }
+.step-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
+.title { font-size: 13px; font-weight: 600; color: #303133; text-align: left; }
+.desc { font-size: 12px; color: #909399; margin-bottom: 8px; text-align: left; }
+.links { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
+.link { color: #409EFF; cursor: pointer; font-size: 12px; }
+.sep { color: #dcdfe6; }
+.content-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+
+.left-controls { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
+.dropzone { border: 1px dashed #c0c4cc; border-radius: 6px; padding: 16px; text-align: center; cursor: pointer; background: #fafafa; }
+.dropzone:hover { background: #f6fbff; border-color: #409EFF; }
+.dz-icon { font-size: 20px; margin-bottom: 6px; }
+.dz-text { color: #303133; font-size: 13px; }
+.dz-sub { color: #909399; font-size: 12px; }
+.single-input.left { display: flex; gap: 8px; }
+.action-buttons.column { display: flex; flex-direction: column; gap: 8px; }
+.form-row { margin-bottom: 10px; }
+.label { display: block; font-size: 12px; color: #606266; margin-bottom: 6px; }
+
+/* 统一左侧控件宽度与主色 */
+.steps-sidebar :deep(.el-date-editor),
+.steps-sidebar :deep(.el-range-editor.el-input__wrapper),
+.steps-sidebar :deep(.el-input),
+.steps-sidebar :deep(.el-input__wrapper),
+.steps-sidebar :deep(.el-select) { width: 100%; box-sizing: border-box; }
+.btn-blue { background: #1677FF; border-color: #1677FF; color: #fff; }
+.btn-blue:disabled { background: #a6c8ff; border-color: #a6c8ff; color: #fff; }
+.w100 { width: 100%; }
+.steps-sidebar :deep(.el-button + .el-button) { margin-left: 0; }
 .import-section { margin-bottom: 10px; flex-shrink: 0; }
 .import-controls { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
 .single-input { display: flex; align-items: center; gap: 8px; }
@@ -363,16 +452,21 @@ onMounted(async () => {
 .text:focus { border-color: #409EFF; }
 .text:disabled { background: #f5f7fa; color: #c0c4cc; }
 .action-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
-.progress-section { margin: 15px 0 10px 0; }
-.progress-box { padding: 8px 0; }
-.progress-container { display: flex; align-items: center; position: relative; padding-right: 50px; margin-bottom: 8px; }
-.progress-bar { flex: 1; height: 3px; background: #ebeef5; border-radius: 2px; overflow: hidden; }
-.progress-fill { height: 100%; background: linear-gradient(90deg, #409EFF, #66b1ff); border-radius: 2px; transition: width 0.3s ease; }
-.progress-text { position: absolute; right: 0; font-size: 13px; color: #409EFF; font-weight: 500; }
+.progress-section { margin: 12px 12px 6px 12px; }
+.progress-box { padding: 4px 0; }
+.progress-container { display: flex; align-items: center; gap: 8px; }
+.progress-bar { flex: 1; height: 6px; background: #e3eeff; border-radius: 999px; overflow: hidden; }
+.progress-fill { height: 100%; background: #1677FF; border-radius: 999px; transition: width 0.3s ease; }
+.progress-text { font-size: 13px; color: #1677FF; font-weight: 500; min-width: 44px; text-align: right; }
 .current-status { font-size: 12px; color: #606266; padding-left: 2px; }
 .table-container { display: flex; flex-direction: column; flex: 1; min-height: 400px; overflow: hidden; }
 .table-section { flex: 1; overflow: hidden; position: relative; background: #fff; border: 1px solid #ebeef5; border-radius: 4px; display: flex; flex-direction: column; }
 .table-wrapper { flex: 1; overflow: auto; }
+.table-wrapper { scrollbar-width: thin; scrollbar-color: #c0c4cc transparent; }
+.table-wrapper::-webkit-scrollbar { width: 6px; height: 6px; }
+.table-wrapper::-webkit-scrollbar-track { background: transparent; }
+.table-wrapper::-webkit-scrollbar-thumb { background: #c0c4cc; border-radius: 3px; }
+.table-wrapper:hover::-webkit-scrollbar-thumb { background: #a8abb2; }
 .table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
 .table th { background: #f5f7fa; color: #909399; font-weight: 600; padding: 12px 8px; border-bottom: 2px solid #ebeef5; text-align: left; }
 .table td { padding: 10px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }