1

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

@@ -295,6 +295,17 @@ onMounted(async () => {
       <div class="body-layout">
         <!-- 左侧步骤栏 -->
         <aside class="steps-sidebar">
+          <!-- 顶部标签栏 -->
+          <div class="top-tabs">
+            <div class="tab-item active">
+              <span class="tab-icon">📦</span>
+              <span class="tab-text">ASIN查询</span>
+            </div>
+            <div class="tab-item" @click="openGenmaiSpirit">
+              <span class="tab-icon">🔍</span>
+              <span class="tab-text">跟卖精灵</span>
+            </div>
+          </div>
           <div class="steps-title">操作流程：</div>
           <div class="steps-flow">
             <!-- 1 -->
@@ -356,7 +367,6 @@ onMounted(async () => {
                     </div>
                     <div class="export-progress-text">{{ Math.round(exportProgress) }}%</div>
                   </div>
-                  <el-button size="small" class="w100 btn-blue" :loading="genmaiLoading" @click="openGenmaiSpirit">{{ genmaiLoading ? '启动中...' : '跟卖精灵' }}</el-button>
                 </div>
               </div>
             </div>
@@ -453,14 +463,25 @@ 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%; }
+
+/* 顶部标签栏 */
+.top-tabs { display: flex; margin-bottom: 8px; }
+.tab-item { flex: 1; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 4px 6px; cursor: pointer; transition: all 0.2s ease; background: #f5f7fa; color: #606266; font-size: 11px; font-weight: 500; border: 1px solid #ebeef5; }
+.tab-item:first-child { border-radius: 3px 0 0 3px; }
+.tab-item:last-child { border-radius: 0 3px 3px 0; border-left: none; }
+.tab-item:hover { background: #e8f4ff; color: #409EFF; }
+.tab-item.active { background: #1677FF; color: #fff; border-color: #1677FF; cursor: default; }
+.tab-icon { font-size: 12px; }
+.tab-text { line-height: 1; }
+
+.body-layout { display: flex; gap: 12px; flex: 1; overflow: hidden; }
 .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; text-align: left; }
+.steps-title { font-size: 14px; font-weight: 600; color: #303133;  text-align: left; }
 .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; }
+.steps-flow:before { content: ''; position: absolute; left: 11px; top: 20px; bottom: 0; width: 1px; background: rgba(229, 231, 235, 0.6); }
+.flow-item { position: relative; display: grid; grid-template-columns: 22px 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 .step-index { position: static; width: 22px; height: 22px; line-height: 22px; 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; }
@@ -521,14 +542,14 @@ onMounted(async () => {
 .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; }
+.table th { background: #f5f7fa; color: #909399; font-weight: 600; padding: 12px 8px; border-bottom: 2px solid #ebeef5; text-align: center; }
+.table td { padding: 10px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; text-align: center; }
 .table tbody tr:hover { background: #f9f9f9; }
 .table th:nth-child(1), .table td:nth-child(1) { width: 33.33%; }
 .table th:nth-child(2), .table td:nth-child(2) { width: 33.33%; }
 .table th:nth-child(3), .table td:nth-child(3) { width: 33.33%; }
 .asin-out { color: #f56c6c; font-weight: 600; }
-.seller-info { display: flex; align-items: center; gap: 4px; }
+.seller-info { display: flex; align-items: center; gap: 4px; justify-content: center; }
 .seller { color: #303133; font-weight: 500; }
 .shipper { color: #909399; font-size: 12px; }
 .price { color: #e6a23c; font-weight: 600; }