youshang/erp_sb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
ZiJIe
2025-09-23 17:20:58 +08:00
parent ca2b70dfbe
commit 5f3e9a08f6
25 changed files with 1471 additions and 1095 deletions
Download Patch File Download Diff File Expand all files Collapse all files

322
electron-vue-template/src/renderer/components/amazon/AmazonDashboard.vue
View File

@@ -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; }

1
electron-vue-template/src/renderer/components/auth/LoginDialog.vue
View File

@@ -31,7 +31,6 @@ async function handleAuth() {
authLoading.value = true
try {
const data = await authApi.login(authForm.value)
localStorage.setItem('token', data.token)
emit('loginSuccess', {
token: data.token,
user: {

14
electron-vue-template/src/renderer/components/layout/NavigationBar.vue
View File

@@ -57,7 +57,7 @@ defineEmits<Emits>()
<style scoped>
.top-navbar {
height: 48px;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
@@ -94,12 +94,12 @@ defineEmits<Emits>()
}
.nav-btn {
width: 36px;
height: 32px;
width: 32px;
height: 28px;
border: none;
background: #fff;
cursor: pointer;
font-size: 16px;
font-size: 14px;
color: #606266;
display: flex;
align-items: center;
@@ -131,13 +131,13 @@ defineEmits<Emits>()
}
.nav-btn-round {
width: 32px;
height: 32px;
width: 28px;
height: 28px;
border: 1px solid #dcdfe6;
border-radius: 50%;
background: #fff;
cursor: pointer;
font-size: 14px;
font-size: 12px;
color: #606266;
display: flex;
align-items: center;

498
electron-vue-template/src/renderer/components/rakuten/RakutenDashboard.vue
View File

@@ -30,6 +30,41 @@ const progressStarted = ref(false)
const progressPercentage = ref(0)
const totalProducts = ref(0)
const processedProducts = ref(0)
// 进度头部文案（展示在进度条上方）
const successCount = computed(() =>
allProducts.value.filter(
(p: any) => p && p.mapRecognitionLink && String(p.mapRecognitionLink).trim() !== ''
).length
)
const progressHeader = computed(() => {
if (!progressStarted.value) return ''
if (progressPercentage.value >= 100) {
return `数据获取完成（成功获取 ${successCount.value} 个） 左侧操作栏点击“导出数据”按钮，可导出为Excel文件`
}
return '数据获取中'
})
// 左侧步骤栏进度
const activeStep = computed(() => {
// 0 导入/输入 -> 1 获取1688 -> 2 查看校验 -> 3 导出
if (loading.value && progressPercentage.value < 100) return 1
if (!allProducts.value.length) return 0
if (allProducts.value.length && progressPercentage.value < 100) return 1
// 数据已经准备好
return 2
})
// 左侧：上传文件名与地区
const selectedFileName = ref('')
const pendingFile = ref<File | null>(null)
const region = ref('JP')
const regionOptions = [
{ label: '日本 (Japan)', value: 'JP', flag: '🇯🇵' },
{ label: '美国 (USA)', value: 'US', flag: '🇺🇸' },
{ label: '中国 (China)', value: 'CN', flag: '🇨🇳' },
]
// 获取数据筛选：查询日期
const dateRange = ref<string[] | null>(null)
function handleSizeChange(size: number) {
pageSize.value = size
@@ -89,7 +124,7 @@ function beforeUpload(file: File) {
async function processFile(file: File) {
if (!beforeUpload(file)) return
progressStarted.value = true
progressStarted.value = false
progressPercentage.value = 0
totalProducts.value = 0
processedProducts.value = 0
@@ -97,20 +132,10 @@ async function processFile(file: File) {
tableLoading.value = true
currentBatchId.value = `RAKUTEN_${Date.now()}`
try {
const resp = await rakutenApi.getProducts({file, batchId: currentBatchId.value})
const products = (resp.products || []).map(p => ({...p, skuPrices: parseSkuPrices(p)}))
allProducts.value = products
statusMessage.value = `已获取 ${allProducts.value.length} 个乐天商品`
const needSearch = allProducts.value.filter(p => p && p.imgUrl && !p.mapRecognitionLink)
if (needSearch.length > 0) {
statusType.value = 'info'
statusMessage.value = `已获取 ${allProducts.value.length} 个乐天商品，正在自动获取1688数据...`
await startBatch1688Search(needSearch)
} else {
statusType.value = 'success'
statusMessage.value = `已获取 ${allProducts.value.length} 个乐天商品，所有数据已完整！`
}
pendingFile.value = file
selectedFileName.value = file.name
statusType.value = 'info'
statusMessage.value = `文件已准备：${file.name}，点击“获取数据”开始解析并识图`
} catch (e: any) {
statusMessage.value = e?.message || '上传失败'
statusType.value = 'error'
@@ -153,17 +178,9 @@ async function searchSingleShop() {
try {
const resp = await rakutenApi.getProducts({shopName: shop, batchId: currentBatchId.value})
allProducts.value = (resp.products || []).filter((p: any) => p.originalShopName === shop).map(p => ({ ...p, skuPrices: parseSkuPrices(p) }))
statusMessage.value = `店铺 ${shop} 共 ${allProducts.value.length} 条`
statusType.value = 'info'
statusMessage.value = `店铺 ${shop} 共 ${allProducts.value.length} 条，点击“获取数据”开始识图`
singleShopName.value = ''
const needSearch = allProducts.value.filter(p => p && p.imgUrl && !p.mapRecognitionLink)
if (needSearch.length > 0) {
await startBatch1688Search(needSearch)
} else if (allProducts.value.length > 0) {
statusType.value = 'success'
statusMessage.value = `店铺 ${shop} 的数据已加载完成，所有1688链接都已存在！`
progressPercentage.value = 100
}
} catch (e: any) {
statusMessage.value = e?.message || '查询失败'
statusType.value = 'error'
@@ -173,6 +190,41 @@ async function searchSingleShop() {
}
}
// 点击“获取数据”触发识图
async function handleStartSearch() {
// 如果存在待解析文件，先请求后端解析再进入识图
if (pendingFile.value) {
try {
loading.value = true
tableLoading.value = true
currentBatchId.value = `RAKUTEN_${Date.now()}`
// 清空旧表格数据，开始新的获取流程
allProducts.value = []
progressStarted.value = true
progressPercentage.value = 0
totalProducts.value = 0
processedProducts.value = 0
const resp = await rakutenApi.getProducts({file: pendingFile.value, batchId: currentBatchId.value})
const products = (resp.products || []).map(p => ({...p, skuPrices: parseSkuPrices(p)}))
allProducts.value = products
pendingFile.value = null
} catch (e) {
statusType.value = 'error'
statusMessage.value = '解析失败，请重试'
} finally {
loading.value = false
tableLoading.value = false
}
}
const items = allProducts.value.filter(p => p && p.imgUrl && !p.mapRecognitionLink)
if (items.length === 0) {
statusType.value = 'warning'
statusMessage.value = '没有可识图的商品，请先导入或查询店铺'
return
}
await startBatch1688Search(items)
}
function stopTask() {
loading.value = false
tableLoading.value = false
@@ -195,15 +247,15 @@ async function startBatch1688Search(products: any[]) {
processedProducts.value = 0
progressStarted.value = true
progressPercentage.value = 0
// 开始阶段不显示提示文案，仅显示进度条
statusType.value = 'info'
statusMessage.value = `正在获取1688数据，共 ${totalProducts.value} 个商品...`
statusMessage.value = ''
await serialSearch1688(items)
if (processedProducts.value >= totalProducts.value) {
progressPercentage.value = 100
statusType.value = 'success'
const successCount = allProducts.value.filter(p => p && p.mapRecognitionLink && String(p.mapRecognitionLink).trim() !== '').length
statusMessage.value = `成功获取 ${successCount} 个`
statusMessage.value = ''
}
loading.value = false
}
@@ -264,130 +316,183 @@ onMounted(loadLatest)
<template>
<div class="rakuten-root">
<div class="main-container">
<div class="body-layout">
<!-- 左侧步骤栏 -->
<aside class="steps-sidebar">
<div class="steps-title">查询步骤：</div>
<!-- 文件导入和操作区域 -->
<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="openRakutenUpload">
📂 {{ loading ? '处理中...' : '导入店铺名列表' }}
</el-button>
<input ref="uploadInputRef" style="display:none" type="file" accept=".xlsx,.xls" @change="handleExcelUpload"
:disabled="loading"/>
<!-- 单个店铺名输入 -->
<div class="single-input">
<el-input v-model="singleShopName" placeholder="输入单个店铺名" :disabled="loading"
@keyup.enter="searchSingleShop" style="width: 140px"/>
<el-button type="info" :disabled="!singleShopName || loading" @click="searchSingleShop">查询</el-button>
</div>
<!-- 操作按钮组 -->
<div class="action-buttons">
<el-button type="danger" :disabled="!loading" @click="stopTask">停止获取</el-button>
<el-button type="success" :disabled="!allProducts.length || loading" @click="exportToExcel">导出Excel
</el-button>
</div>
</div>
<!-- 进度条显示 -->
<div class="progress-section" v-if="progressStarted">
<div class="progress-box">
<div class="progress-container">
<div class="progress-bar">
<div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
</div>
<div class="progress-text">{{ progressPercentage }}%</div>
<div class="steps-flow">
<!-- Step 1 导入乐天店铺 -->
<div class="flow-item">
<div class="step-index">1</div>
<div class="step-card">
<div class="step-header">
<div class="title">导入乐天店铺</div>
</div>
<div class="desc">请导入店铺信息，仅限 Excel 文件；表格第一列必须为乐天店铺名。</div>
<div class="links">
<a class="link" @click.prevent>点击查看示例</a>
<span class="sep">|</span>
<a class="link" @click.prevent>点击下载模板</a>
</div>
<div class="current-status" v-if="statusMessage">{{ statusMessage }}</div>
</div>
</div>
</div>
<!-- 数据显示区域 -->
<div class="table-container">
<!-- 数据表格（无数据时也显示表头） -->
<div class="table-section">
<div class="table-wrapper">
<table class="table">
<thead>
<tr>
<th>店铺名</th>
<th>商品链接</th>
<th>商品图片</th>
<th>排名</th>
<th>商品标题</th>
<th>价格</th>
<th>1688识图链接</th>
<th>1688运费</th>
<th>1688中位价</th>
<th>1688最低价</th>
<th>1688中间价</th>
<th>1688最高价</th>
</tr>
</thead>
<tbody>
<tr v-for="row in paginatedData" :key="row.productUrl + (row.productTitle || '')">
<td class="truncate shop-col" :title="row.originalShopName">{{ row.originalShopName }}</td>
<td class="truncate url-col">
<el-input v-if="row.productUrl" :value="row.productUrl" readonly @click="$event.target.select()" size="small"/>
<span v-else>--</span>
</td>
<td>
<div class="image-container" v-if="row.imgUrl">
<img :src="row.imgUrl" class="thumb" alt="thumb"/>
<div class="dropzone" @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop="onDrop" @click="openRakutenUpload" :class="{ disabled: loading }">
<div class="dz-el-icon">📤</div>
<div class="dz-text">点击或将文件拖拽到这里上传</div>
<div class="dz-sub">支持扩展名：.xls .xlsx .numbers</div>
<div class="dz-sub">文件单列：1/1</div>
</div>
<input ref="uploadInputRef" style="display:none" type="file" accept=".xlsx,.xls" @change="handleExcelUpload" :disabled="loading"/>
<div v-if="selectedFileName" class="file-chip">
<span class="dot"></span>
<span class="name">{{ selectedFileName }}</span>
</div>
</div>
</div>
<!-- Step 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>
<!-- Step 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">导入表格后，点击下方按钮开始获取店铺商品数据</div>
<el-button size="small" class="w100 btn-blue" :loading="loading" @click="handleStartSearch" :disabled="loading || (!pendingFile && allProducts.length === 0)">获取数据</el-button>
</div>
</div>
<!-- Step 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="mini-hint">点击下方按钮导出为 Excel</div>
<el-button size="small" class="w100 btn-blue" :disabled="!allProducts.length || loading" @click="exportToExcel">导出数据</el-button>
</div>
</div>
</div>
</aside>
<!-- 右侧主区域 -->
<section class="content-panel">
<!-- 数据显示区域 -->
<div class="table-container">
<div class="table-section">
<!-- 表格上方进度条（移动到表格容器内部） -->
<div v-if="progressStarted" class="progress-head">
<div class="progress-title">
<span v-if="progressPercentage>=100" class="ok-badge">●</span>
<span class="title-text">{{ progressHeader }}</span>
</div>
<div class="progress-section">
<div class="progress-box">
<div class="progress-container">
<div class="progress-bar">
<div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
</div>
<div class="progress-text">{{ progressPercentage }}%</div>
</div>
<span v-else>无图片</span>
</td>
<td>
<span v-if="row.ranking">{{ row.ranking }}</span>
<span v-else>--</span>
</td>
<td class="truncate" :title="row.productTitle">{{ row.productTitle || '--' }}</td>
<td>{{ row.price ? row.price + '円' : '--' }}</td>
<td class="truncate url-col">
<el-input v-if="row.mapRecognitionLink" :value="row.mapRecognitionLink" readonly @click="$event.target.select()" size="small"/>
<span v-else-if="row.searching1688">搜索中...</span>
<span v-else>--</span>
</td>
<td>{{ row.freight ?? '--' }}</td>
<td>{{ row.median ?? '--' }}</td>
<td>{{ row.skuPrices?.[0] ?? '--' }}</td>
<td>{{ row.skuPrices?.[Math.floor(row.skuPrices.length / 2)] ?? '--' }}</td>
<td>{{ row.skuPrices?.[row.skuPrices.length - 1] ?? '--' }}</td>
</tr>
</div>
</div>
</div>
<div class="table-wrapper">
<table class="table">
<thead>
<tr>
<th>店铺名</th>
<th>商品链接</th>
<th>商品图片</th>
<th>排名</th>
<th>商品标题</th>
<th>价格</th>
<th>1688识图链接</th>
<th>1688运费</th>
<th>1688中位价</th>
<th>1688最低价</th>
<th>1688中间价</th>
<th>1688最高价</th>
</tr>
</thead>
<tbody>
<tr v-for="row in paginatedData" :key="row.productUrl + (row.productTitle || '')">
<td class="truncate shop-col" :title="row.originalShopName">{{ row.originalShopName }}</td>
<td class="truncate url-col">
<el-input v-if="row.productUrl" :value="row.productUrl" readonly @click="$event.target.select()" size="small"/>
<span v-else>--</span>
</td>
<td>
<div class="image-container" v-if="row.imgUrl">
<img :src="row.imgUrl" class="thumb" alt="thumb"/>
</div>
<span v-else>无图片</span>
</td>
<td>
<span v-if="row.ranking">{{ row.ranking }}</span>
<span v-else>--</span>
</td>
<td class="truncate" :title="row.productTitle">{{ row.productTitle || '--' }}</td>
<td>{{ row.price ? row.price + '円' : '--' }}</td>
<td class="truncate url-col">
<el-input v-if="row.mapRecognitionLink" :value="row.mapRecognitionLink" readonly @click="$event.target.select()" size="small"/>
<span v-else-if="row.searching1688">搜索中...</span>
<span v-else>--</span>
</td>
<td>{{ row.freight ?? '--' }}</td>
<td>{{ row.median ?? '--' }}</td>
<td>{{ row.skuPrices?.[0] ?? '--' }}</td>
<td>{{ row.skuPrices?.[Math.floor(row.skuPrices.length / 2)] ?? '--' }}</td>
<td>{{ row.skuPrices?.[row.skuPrices.length - 1] ?? '--' }}</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">暂无数据，请导入店铺名列表</div>
</div>
</div>
</div>
</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">暂无数据，请导入店铺名列表</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="allProducts.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="allProducts.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</section>
</div>
</div>
</div>
@@ -412,6 +517,58 @@ onMounted(loadLatest)
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; }
.mini-hint { font-size: 12px; color: #909399; margin-top: 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; }
.dropzone.disabled { opacity: .6; cursor: not-allowed; }
.dz-el-icon { font-size: 20px; margin-bottom: 6px; color: #909399; }
.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; }
.file-chip { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #f5f7fa; border-radius: 4px; font-size: 12px; color: #606266; margin-top: 6px; }
.file-chip .dot { width: 6px; height: 6px; background: #409EFF; border-radius: 50%; display: inline-block; }
.file-chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress-section.left { margin-top: 10px; }
.full { width: 100%; }
.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;
@@ -438,32 +595,16 @@ onMounted(loadLatest)
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; }
.progress-head { padding: 8px 12px 0 12px; }
.progress-title { display:flex; align-items:center; gap:8px; color:#606266; font-size: 13px; margin-bottom: 6px; }
.progress-title .ok-badge { color: #52c41a; font-size: 12px; }
.progress-title .title-text { color:#303133; font-weight:600; }
.current-status {
font-size: 12px;
@@ -506,12 +647,12 @@ onMounted(loadLatest)
.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 {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.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: max-content; min-width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
background: #f5f7fa;
@@ -547,7 +688,7 @@ onMounted(loadLatest)
.empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.6; }
.empty-text { font-size: 14px; color: #909399; }
.import-section.drag-active { border: 1px dashed #409EFF; border-radius: 6px; }
.empty-abs { position: absolute; left: 0; right: 0; top: 48px; bottom: 0; display: flex; align-items: center; justify-content: center; }
.empty-abs { position: absolute; left: 0; right: 0; top: 48px; bottom: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.image-container {
display: flex;
@@ -577,6 +718,7 @@ onMounted(loadLatest)
align-items: center;
font-size: 14px;
color: #606266;
pointer-events: none;
}
.spinner {

326
electron-vue-template/src/renderer/components/zebra/ZebraDashboard.vue
View File

@@ -1,9 +1,14 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { zebraApi, type ZebraOrder } from '../../api/zebra'
import { zebraApi, type ZebraOrder, type BanmaAccount } from '../../api/zebra'
import AccountManager from '../common/AccountManager.vue'
type Shop = { id: string; shopName: string }
const accounts = ref<BanmaAccount[]>([])
const accountId = ref<number>()
const isCollapsed = ref(false)
const shopList = ref<Shop[]>([])
const selectedShops = ref<string[]>([])
const dateRange = ref<string[]>([])
@@ -21,6 +26,10 @@ const fetchCurrentPage = ref(1)
const fetchTotalPages = ref(0)
const fetchTotalItems = ref(0)
const isFetching = ref(false)
function selectAccount(id: number) {
accountId.value = id
loadShops()
}
const paginatedData = computed(() => {
const start = (currentPage.value - 1) * pageSize.value
@@ -48,6 +57,19 @@ async function loadShops() {
}
}
async function loadAccounts() {
try {
const res = await zebraApi.getAccounts()
const list = (res as any)?.data ?? res
accounts.value = Array.isArray(list) ? list : []
const def = accounts.value.find(a => a.isDefault === 1) || accounts.value[0]
accountId.value = def?.id
await loadShops()
} catch (e) {
accounts.value = []
}
}
function handleSizeChange(size: number) {
pageSize.value = size
currentPage.value = 1
@@ -133,52 +155,154 @@ async function exportToExcel() {
}
onMounted(async () => {
await loadShops()
await loadAccounts()
try {
const latest = await zebraApi.getLatestOrders()
allOrderData.value = latest?.orders || []
} catch {}
})
</script>
// 账号对话框
const accountDialogVisible = ref(false)
const accountForm = ref<BanmaAccount>({ isDefault: 0, status: 1 })
const isEditMode = ref(false)
const formUsername = ref('')
const formPassword = ref('')
const rememberPwd = ref(true)
const managerVisible = ref(false)
function openAddAccount() {
isEditMode.value = false
accountForm.value = { name: '', username: '', isDefault: 0, status: 1 }
formUsername.value = ''
formPassword.value = ''
accountDialogVisible.value = true
}
function openManageAccount() {
const cur = accounts.value.find(a => a.id === accountId.value)
if (!cur) return
isEditMode.value = true
accountForm.value = { ...cur }
formUsername.value = cur.username || ''
formPassword.value = localStorage.getItem(`banma:pwd:${cur.username || ''}`) || ''
accountDialogVisible.value = true
}
async function submitAccount() {
if (!formUsername.value) { alert('请输入账号'); return }
const payload: BanmaAccount = {
id: accountForm.value.id,
name: accountForm.value.name || formUsername.value,
username: formUsername.value,
isDefault: accountForm.value.isDefault || 0,
status: accountForm.value.status || 1,
}
const { id } = await zebraApi.saveAccount(payload)
if (rememberPwd.value && formPassword.value) {
localStorage.setItem(`banma:pwd:${formUsername.value}`, formPassword.value)
} else {
localStorage.removeItem(`banma:pwd:${formUsername.value}`)
}
accountDialogVisible.value = false
await loadAccounts()
if (id) accountId.value = id
}
async function removeCurrentAccount() {
if (!isEditMode.value || !accountForm.value.id) return
if (!confirm('确认删除该账号？')) return
await zebraApi.removeAccount(accountForm.value.id)
accountDialogVisible.value = false
await loadAccounts()
}
</script>
<template>
<div class="zebra-root">
<div class="main-container">
<!-- 筛选和操作区域 -->
<div class="import-section">
<div class="import-controls">
<!-- 店铺选择 -->
<el-select v-model="selectedShops" multiple placeholder="选择店铺" style="width: 260px;" :disabled="loading">
<el-option v-for="shop in shopList" :key="shop.id" :label="shop.shopName" :value="shop.id"></el-option>
</el-select>
<!-- 日期选择 -->
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 200px;"
:disabled="loading"
/>
<!-- 操作按钮组 -->
<div class="action-buttons">
<el-button type="primary" :disabled="loading" @click="fetchData">
📂 {{ loading ? '处理中...' : '获取订单数据' }}
</el-button>
<el-button type="danger" :disabled="!loading" @click="stopFetch">停止获取</el-button>
<el-button type="success" :disabled="exportLoading || !allOrderData.length" @click="exportToExcel">导出Excel</el-button>
</div>
<div class="layout">
<aside :class="['aside', { collapsed: isCollapsed }]">
<div class="aside-header">
<span>操作流程</span>
<el-button link @click="isCollapsed = !isCollapsed">{{ isCollapsed ? '展开' : '收起' }}</el-button>
</div>
<div class="aside-steps">
<section class="step step-accounts">
<div class="step-index">1</div>
<div class="step-body">
<div class="step-title">需要查询的账号</div>
<div class="tip">请选择需要查询数据的账号，如未添加账号，请点击“添加账号”。</div>
<template v-if="accounts.length">
<el-scrollbar :class="['account-list', { 'scroll-limit': accounts.length > 3 }]">
<div>
<div
v-for="a in accounts"
:key="a.id"
:class="['acct-item', { selected: accountId === a.id }]"
@click="selectAccount(Number(a.id))"
>
<span class="acct-row">
<span :class="['status-dot', a.status === 1 ? 'on' : 'off']"></span>
<img class="avatar" src="/image/img_v3_02qd_052605f0-4be3-44db-9691-35ee5ff6201g.jpg" alt="avatar" />
<span class="acct-text">{{ a.name || a.username }}</span>
<span v-if="a.isDefault===1" class="tag">默认</span>
<span v-if="accountId === a.id" class="acct-check">✔️</span>
</span>
</div>
</div>
</el-scrollbar>
</template>
<template v-else>
<div class="placeholder-box">
<img class="placeholder-img" src="/icon/image.png" alt="add-account" />
<div class="placeholder-tip">请添加 斑马ERP 账号</div>
</div>
</template>
<div class="step-actions btn-row sticky-actions">
<el-button size="small" class="w50" @click="openAddAccount">添加账号</el-button>
<el-button size="small" class="w50 btn-blue" @click="managerVisible = true">账号管理</el-button>
</div>
</div>
</section>
<!-- 进度条显示：移动到底部，以免挤压表头 -->
</div>
<section class="step">
<div class="step-index">2</div>
<div class="step-body">
<div class="step-title">需要查询的日期</div>
<div class="tip">请选择查询数据的日期范围。</div>
<el-select v-model="selectedShops" multiple placeholder="选择店铺" :disabled="loading || !accounts.length" size="small" style="width: 100%">
<el-option v-for="shop in shopList" :key="shop.id" :label="shop.shopName" :value="shop.id" />
</el-select>
<div style="height: 8px"></div>
<el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :disabled="loading || !accounts.length" size="small" style="width: 100%" />
</div>
</section>
<!-- 数据显示区域 -->
<div class="table-container">
<section class="step">
<div class="step-index">3</div>
<div class="step-body">
<div class="step-title">获取数据</div>
<div class="tip">点击下方按钮，开始查询订单数据。</div>
<div class="btn-col">
<el-button size="small" class="w100 btn-blue" :disabled="loading || !accounts.length" @click="fetchData">{{ loading ? '处理中...' : '获取数据' }}</el-button>
<el-button size="small" :disabled="!loading" @click="stopFetch" class="w100">停止获取</el-button>
</div>
</div>
</section>
<section class="step">
<div class="step-index">4</div>
<div class="step-body">
<div class="step-title">导出数据</div>
<div class="tip">点击下方按钮，可导出数据为 Excel。</div>
<div class="btn-col">
<el-button size="small" type="success" :disabled="exportLoading || !allOrderData.length" @click="exportToExcel" class="w100">导出数据</el-button>
</div>
</div>
</section>
</div>
</aside>
<div class="content">
<!-- 数据表格（无数据时也显示表头） -->
<div class="table-section">
<div class="table-wrapper">
@@ -237,17 +361,15 @@ onMounted(async () => {
</div>
<div v-if="paginatedData.length === 0" class="empty-abs">
<div class="empty-container">
<div v-if="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">暂无数据，请获取订单</div>
</div>
</div>
<!-- 表格加载遮罩：仅在无数据时显示 -->
<div v-if="loading && !allOrderData.length" class="table-loading">
<div class="spinner">⟳</div>
<div>加载中...</div>
</div>
</div>
<!-- 底部区域：进度条 + 分页器 -->
@@ -269,6 +391,29 @@ onMounted(async () => {
</div>
</div>
</div>
<!-- 账号新增/编辑对话框 -->
<el-dialog v-model="accountDialogVisible" width="420px" class="add-account-dialog">
<template #header>
<div class="aad-header">
<img class="aad-icon" src="/icon/image.png" alt="logo" />
<div class="aad-title">添加账号</div>
</div>
</template>
<div class="aad-row">
<el-input v-model="formUsername" placeholder="请输入账号" />
</div>
<div class="aad-row">
<el-input v-model="formPassword" placeholder="请输入密码" type="password" show-password />
</div>
<div class="aad-row aad-opts">
<el-checkbox v-model="rememberPwd">保存密码</el-checkbox>
</div>
<template #footer>
<el-button type="primary" class="btn-blue" style="width: 100%" @click="submitAccount">登录</el-button>
</template>
</el-dialog>
<AccountManager v-model="managerVisible" platform="zebra" @add="openAddAccount" />
</div>
</template>
@@ -280,26 +425,68 @@ export default {
<style scoped>
.zebra-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; }
.import-section { margin-bottom: 10px; flex-shrink: 0; }
.import-controls { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.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; }
.current-status { font-size: 12px; color: #606266; padding-left: 2px; }
.table-container { display: flex; flex-direction: column; flex: 1; min-height: 400px; overflow: hidden; }
.empty-section { flex: 1; display: flex; justify-content: center; align-items: center; background: #fff; border: 1px solid #ebeef5; border-radius: 6px; }
.empty-container { text-align: center; }
.empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.6; }
.empty-text { font-size: 14px; color: #909399; }
.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 { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { background: #f5f7fa; color: #909399; font-weight: 600; padding: 12px 8px; border-bottom: 2px solid #ebeef5; text-align: left; }
.layout { background: #fff; border-radius: 4px; padding: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); height: 100%; display: grid; grid-template-columns: 220px 1fr; gap: 12px; }
.aside { border: 1px solid #ebeef5; border-radius: 4px; padding: 10px; display: flex; flex-direction: column; transition: width 0.2s ease; }
.aside.collapsed { width: 56px; overflow: hidden; }
.aside-header { display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: #606266; margin-bottom: 8px; }
.aside-steps { position: relative; }
.step { display: grid; grid-template-columns: 24px 1fr; gap: 10px; position: relative; padding: 8px 0; }
.step + .step { border-top: 1px dashed #ebeef5; }
.step-index { width: 24px; height: 24px; background: #1677FF; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; margin-top: 2px; }
.step-body { min-width: 0; text-align: left; }
.step-title { font-size: 13px; color: #606266; margin-bottom: 6px; font-weight: 600; text-align: left; }
.aside-steps:before { content: ''; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: #e5e7eb; }
.account-list {height: auto; }
.step-actions { margin-top: 8px; display: flex; gap: 8px; }
.step-accounts { position: relative; }
.sticky-actions { position: sticky; bottom: 0; background: #fafafa; padding-top: 8px; }
.scroll-limit { max-height: 160px; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-col { display: flex; flex-direction: column; gap: 6px; }
.w50 { width: 48%; }
.w100 { width: 100%; }
.placeholder-box { display:flex; align-items:center; justify-content:center; flex-direction:column; height: 140px; background: #fff; border: 1px solid #ebeef5; border-radius: 4px; }
.placeholder-img { width: 120px; opacity: 0.9; }
.placeholder-tip { margin-top: 6px; font-size: 12px; color: #a8abb2; }
.aside :deep(.el-date-editor) { width: 100%; }
.aside :deep(.el-range-editor.el-input__wrapper) { width: 100%; box-sizing: border-box; }
.aside :deep(.el-input),
.aside :deep(.el-input__wrapper),
.aside :deep(.el-select) { width: 100%; box-sizing: border-box; }
.aside :deep(.el-button + .el-button) { margin-left: 0 !important; }
.btn-row :deep(.el-button) { width: 100%; }
.btn-col :deep(.el-button) { width: 100%; }
.btn-blue { background: #1677FF; border-color: #1677FF; color: #fff; }
.btn-blue:disabled { background: #a6c8ff; border-color: #a6c8ff; color: #fff; }
.tip { color: #909399; font-size: 12px; margin-bottom: 8px; text-align: left; }
.avatar { width: 18px; height: 18px; border-radius: 50%; margin-right: 6px; vertical-align: -2px; }
.acct-text { vertical-align: middle; }
.acct-row { display: grid; grid-template-columns: 8px 18px 1fr auto; align-items: center; gap: 6px; width: 100%; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.status-dot.on { background: #22c55e; }
.status-dot.off { background: #f87171; }
.acct-item { padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.acct-item.selected { background: #eef5ff; box-shadow: inset 0 0 0 1px #d6e4ff; }
.acct-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: transparent; color: #111; font-size: 14px; }
.account-list::-webkit-scrollbar { width: 0; height: 0; }
.add-account-dialog .aad-header { display:flex; flex-direction: column; align-items:center; gap:8px; padding-top: 8px; width: 100%; }
.add-account-dialog .aad-icon { width: 120px; height: auto; }
.add-account-dialog .aad-title { font-weight: 600; font-size: 18px; text-align: center; }
.add-account-dialog .aad-row { margin-top: 12px; }
.add-account-dialog .aad-opts { display:flex; align-items:center; }
/* 居中 header，避免右上角关闭按钮影响视觉中心 */
:deep(.add-account-dialog .el-dialog__header) { text-align: center; padding-right: 0; display: block; }
.content { display: grid; grid-template-rows: 1fr auto; min-height: 0; }
.table-section { min-height: 0; overflow: hidden; position: relative; background: #fff; border: 1px solid #ebeef5; border-radius: 4px; display: flex; flex-direction: column; }
.table-wrapper { flex: 1; overflow: auto; overflow-x: 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: max-content; min-width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { background: #f5f7fa; color: #909399; font-weight: 600; padding: 12px 8px; border-bottom: 2px solid #ebeef5; text-align: left; white-space: nowrap; }
.table td { padding: 10px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.table tbody tr:hover { background: #f9f9f9; }
.truncate { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@@ -310,14 +497,13 @@ export default {
.table-loading { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 14px; color: #606266; }
.spinner { font-size: 24px; animation: spin 1s linear infinite; margin-bottom: 8px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.pagination-fixed { flex-shrink: 0; padding: 8px 12px; background: #f9f9f9; border-radius: 4px; display: flex; justify-content: center; border-top: 1px solid #ebeef5; margin-top: 8px; }
.tag { display: inline-block; padding: 2px 6px; font-size: 12px; background: #ecf5ff; color: #409EFF; border-radius: 3px; }
.empty-tip { text-align: center; color: #909399; padding: 16px 0; }
.empty-container { text-align: center; }
.empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.6; }
.empty-text { font-size: 14px; color: #909399; }
.empty-abs { position: absolute; left: 0; right: 0; top: 48px; bottom: 0; display: flex; align-items: center; justify-content: center; }
.pagination-fixed { position: sticky; bottom: 0; z-index: 2; padding: 8px 12px; background: #f9f9f9; border-radius: 4px; display: flex; justify-content: center; border-top: 1px solid #ebeef5; margin-top: 8px; }
.tag { display: inline-block; padding: 0 6px; margin-left: 6px; font-size: 12px; background: #ecf5ff; color: #409EFF; border-radius: 3px; }
.empty-abs { position: absolute; left: 0; right: 0; top: 48px; bottom: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.progress-bottom { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.progress-bottom .progress-bar { width: 100%; height: 6px; background: #e3eeff; border-radius: 999px; overflow: hidden; }
.progress-bottom .progress-fill { height: 100%; background: #1677FF; border-radius: 999px; transition: width 0.3s ease; }
.progress-bottom .progress-text { font-size: 13px; color: #1677FF; font-weight: 500; min-width: 44px; text-align: right; }
</style>