feat(frontend-vue): 亚马逊运营工具台与新功能页接入——新版工具台(amazon-console+tool-catalog)、品牌检测/ASIN变体采集/查询ASIN 三个工具页 Vue 化并对接既有后端与桌面桥接；桌面首页/登录页 Vue 化(沿用旧视觉)；补充 vc_*/get_device_id/save_file_from_url 桥类型、dev 代理；品牌默认勾选排名+FBM；修正 query-asin 标题
含未提交新版改造累积：Brand*Tab 套入工具台壳(AmazonToolPageShell/AmazonTopBar)与目录/权限联动。
This commit is contained in:
@@ -0,0 +1,688 @@
|
||||
<template>
|
||||
<div class="page-shell module-page">
|
||||
<AmazonToolPageShell tool-id="variant">
|
||||
|
||||
<div class="main-content">
|
||||
<aside class="left-panel">
|
||||
<div class="section-title">输入方式</div>
|
||||
<div class="input-tabs">
|
||||
<button
|
||||
type="button"
|
||||
class="input-tab"
|
||||
:class="{ active: inputMode === 'asin' }"
|
||||
@click="inputMode = 'asin'"
|
||||
>粘贴 ASIN</button>
|
||||
<button
|
||||
type="button"
|
||||
class="input-tab"
|
||||
:class="{ active: inputMode === 'file' }"
|
||||
@click="inputMode = 'file'"
|
||||
>Excel 文件</button>
|
||||
</div>
|
||||
|
||||
<div v-if="inputMode === 'asin'" class="input-panel">
|
||||
<div class="hint">每行一个 ASIN，支持批量粘贴。</div>
|
||||
<textarea
|
||||
v-model="asinText"
|
||||
class="asin-textarea"
|
||||
rows="9"
|
||||
placeholder="每行一个 ASIN，例如： B0xxxxxxxx"
|
||||
></textarea>
|
||||
<div class="asin-count">已输入 <b>{{ asinLines.length }}</b> 个 ASIN</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="input-panel">
|
||||
<div class="hint">选择含 ASIN 的 Excel（需含表头行）或多个文件。</div>
|
||||
<div class="btns">
|
||||
<button type="button" class="opt-btn" :disabled="!hasBridge" @click="selectFiles">
|
||||
选择 Excel
|
||||
</button>
|
||||
</div>
|
||||
<div class="selected-files">
|
||||
<template v-if="selectedFiles.length">
|
||||
<span v-for="file in selectedFiles" :key="file" :title="file">{{ baseName(file) }}</span>
|
||||
</template>
|
||||
<span v-else>暂未选择文件</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">采集国家（可多选）</div>
|
||||
<div class="country-group">
|
||||
<label
|
||||
v-for="country in COUNTRY_OPTIONS"
|
||||
:key="country.code"
|
||||
class="country-chip"
|
||||
:class="{ selected: selectedCountries.includes(country.code) }"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="country.code"
|
||||
v-model="selectedCountries"
|
||||
/>
|
||||
<span>{{ country.label }}（{{ country.code }}）</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="country-hint" :class="{ error: selectedCountries.length === 0 }">
|
||||
{{ selectedCountries.length === 0 ? '至少选择一个国家' : `已选 ${selectedCountries.length} 个国家` }}
|
||||
</p>
|
||||
|
||||
<div v-if="!hasBridge" class="bridge-tip">
|
||||
变体采集在本机客户端执行，当前浏览器环境无桌面桥接，仅可预览页面。
|
||||
</div>
|
||||
|
||||
<div class="run-row">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-run"
|
||||
:disabled="!hasBridge || submitting || !canSubmit"
|
||||
@click="submitTask"
|
||||
>
|
||||
{{ submitting ? '提交中...' : '开始采集（添加到任务队列）' }}
|
||||
</button>
|
||||
</div>
|
||||
<p class="loading-msg">
|
||||
任务在远程批处理队列执行，提交后到右侧查看进度并下载结果文件。
|
||||
</p>
|
||||
</aside>
|
||||
|
||||
<section class="right-panel">
|
||||
<div class="panel-header">
|
||||
<span>变体采集任务</span>
|
||||
<div class="panel-actions">
|
||||
<button type="button" class="btn-refresh" @click="refreshList">刷新任务状态</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-list-wrap">
|
||||
<div v-if="!currentTasks.length" class="empty-tasks">暂无变体采集任务</div>
|
||||
<ul v-else class="task-list">
|
||||
<li v-for="item in currentTasks" :key="`vc-${item.task_id}`" class="task-item">
|
||||
<div class="left">
|
||||
<span class="id">任务 {{ item.task_id }}</span>
|
||||
<div v-if="taskMeta(item).source" class="files">来源：{{ taskMeta(item).source }}</div>
|
||||
<div class="files">采集国家：{{ countryText(item) || '-' }}</div>
|
||||
<div class="files">更新时间：{{ item.update_time || formatDateTime(item.updated_at) }}</div>
|
||||
<div v-if="latestMessage(item)" class="files">{{ latestMessage(item) }}</div>
|
||||
</div>
|
||||
<div class="task-right">
|
||||
<span class="status" :class="statusClass(item.status)">{{ statusText(item.status) }}</span>
|
||||
<button type="button" class="act-btn" @click="refreshTask(item)">更新</button>
|
||||
<button type="button" class="act-btn" @click="showDetail(item)">详情</button>
|
||||
<button
|
||||
v-if="hasResultFiles(item)"
|
||||
type="button"
|
||||
class="act-btn ok"
|
||||
@click="downloadResult(item)"
|
||||
>下载结果</button>
|
||||
<button
|
||||
v-if="hasSourceFile(item)"
|
||||
type="button"
|
||||
class="act-btn"
|
||||
@click="downloadSource(item)"
|
||||
>下载源文件</button>
|
||||
<button type="button" class="act-btn warn" @click="reexportTask(item)">重新导出</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div v-if="currentTasks.length" class="pagination">
|
||||
<span class="page-info">共 {{ totalCount }} 条 · 第 {{ currentPage }} / {{ totalPages }} 页</span>
|
||||
<div class="page-btns">
|
||||
<button type="button" class="page-btn" :disabled="currentPage <= 1" @click="goPage(currentPage - 1)">上一页</button>
|
||||
<button type="button" class="page-btn" :disabled="currentPage >= totalPages" @click="goPage(currentPage + 1)">下一页</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</AmazonToolPageShell>
|
||||
|
||||
<el-dialog v-model="detailVisible" title="任务详情" width="620px">
|
||||
<div v-if="detailItem" class="detail-body">
|
||||
<div class="kv-row"><span class="kv-key">任务 ID</span><span class="kv-val">{{ detailItem.task_id }}</span></div>
|
||||
<div class="kv-row"><span class="kv-key">状态</span><span class="kv-val">{{ statusText(detailItem.status) }}</span></div>
|
||||
<div class="kv-row"><span class="kv-key">采集国家</span><span class="kv-val">{{ countryText(detailItem) || '-' }}</span></div>
|
||||
<div class="kv-row"><span class="kv-key">更新时间</span><span class="kv-val">{{ detailItem.update_time || formatDateTime(detailItem.updated_at) }}</span></div>
|
||||
<div class="kv-row"><span class="kv-key">进度信息</span><span class="kv-val">{{ latestMessage(detailItem) || '-' }}</span></div>
|
||||
<template v-if="resultFiles(detailItem).length">
|
||||
<div class="kv-section">结果文件</div>
|
||||
<div v-for="(url, index) in resultFiles(detailItem)" :key="index" class="kv-row">
|
||||
<span class="kv-key">文件 {{ index + 1 }}</span>
|
||||
<a class="kv-val link" :href="url" target="_blank" rel="noopener">{{ url }}</a>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="detailItem.task_data?.file_url">
|
||||
<div class="kv-section">源文件</div>
|
||||
<div class="kv-row">
|
||||
<span class="kv-key">源文件</span>
|
||||
<a class="kv-val link" :href="detailItem.task_data.file_url" target="_blank" rel="noopener">{{ detailItem.task_data.file_url }}</a>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import AmazonToolPageShell from '@/pages/amazon/components/AmazonToolPageShell.vue'
|
||||
import {
|
||||
getPywebviewApi,
|
||||
type VariantTaskListItem,
|
||||
} from '@/shared/bridges/pywebview'
|
||||
import { saveUrlWithProgress } from '@/shared/utils/download-progress'
|
||||
|
||||
/** 本地任务记录：桥接返回的列表项 + 前端维护字段 */
|
||||
type VariantEntry = VariantTaskListItem & {
|
||||
updated_at?: number
|
||||
message?: string
|
||||
meta?: { source?: string; execute_country?: string[] }
|
||||
}
|
||||
|
||||
const COUNTRY_OPTIONS = [
|
||||
{ code: 'DE', label: '德国' },
|
||||
{ code: 'UK', label: '英国' },
|
||||
{ code: 'FR', label: '法国' },
|
||||
{ code: 'IT', label: '意大利' },
|
||||
{ code: 'ES', label: '西班牙' },
|
||||
] as const
|
||||
|
||||
const PAGE_SIZE = 8
|
||||
|
||||
const inputMode = ref<'asin' | 'file'>('asin')
|
||||
const asinText = ref('')
|
||||
const selectedFiles = ref<string[]>([])
|
||||
const selectedCountries = ref<string[]>([])
|
||||
const submitting = ref(false)
|
||||
|
||||
const tasks = reactive<Record<string, VariantEntry>>({})
|
||||
const currentTaskIds = ref<string[]>([])
|
||||
const currentPage = ref(1)
|
||||
const totalPages = ref(1)
|
||||
const totalCount = ref(0)
|
||||
const isLoading = ref(false)
|
||||
|
||||
const detailVisible = ref(false)
|
||||
const detailItem = ref<VariantEntry | null>(null)
|
||||
|
||||
const hasBridge = computed(() => Boolean(getPywebviewApi()?.vc_start_collect))
|
||||
const asinLines = computed(() => asinText.value.split(/\r?\n/).map((s) => s.trim()).filter(Boolean))
|
||||
const currentTasks = computed(() =>
|
||||
currentTaskIds.value.map((id) => tasks[id]).filter((item): item is VariantEntry => Boolean(item)),
|
||||
)
|
||||
const canSubmit = computed(() =>
|
||||
inputMode.value === 'asin' ? asinLines.value.length > 0 : selectedFiles.value.length > 0,
|
||||
)
|
||||
|
||||
let autoTimer: number | null = null
|
||||
let refreshTimer: number | null = null
|
||||
|
||||
function uid() {
|
||||
const raw = typeof window === 'undefined' ? '' : window.localStorage.getItem('uid') || ''
|
||||
return raw.trim()
|
||||
}
|
||||
|
||||
function baseName(path: string) {
|
||||
return path.split(/[\\/]/).pop() || path
|
||||
}
|
||||
|
||||
function statusText(status?: number | string) {
|
||||
const numeric = Number(status)
|
||||
if (numeric === 0 || String(status).toLowerCase() === 'pending' || String(status).toLowerCase() === 'queued') return '排队中'
|
||||
if (numeric === 1 || String(status).toLowerCase() === 'running' || String(status).toLowerCase() === 'processing') return '执行中'
|
||||
if (numeric === 2 || ['success', 'completed', 'done'].includes(String(status).toLowerCase())) return '已完成'
|
||||
if (numeric === 3 || ['failed', 'error'].includes(String(status).toLowerCase())) return '失败'
|
||||
if (['cancelled', 'stopped'].includes(String(status).toLowerCase())) return '已取消'
|
||||
if (status === 0 || status === 1 || status === 2 || status === 3) return statusText(String(status))
|
||||
return String(status ?? '未知')
|
||||
}
|
||||
|
||||
function statusClass(status?: number | string) {
|
||||
const numeric = Number(status)
|
||||
if (numeric === 1 || String(status).toLowerCase() === 'running') return 'running'
|
||||
if (numeric === 2 || ['success', 'completed', 'done'].includes(String(status).toLowerCase())) return 'success'
|
||||
if (numeric === 3 || ['failed', 'error'].includes(String(status).toLowerCase())) return 'failed'
|
||||
if (['cancelled', 'stopped'].includes(String(status).toLowerCase())) return 'cancelled'
|
||||
return 'pending'
|
||||
}
|
||||
|
||||
function isBusy(status?: number | string) {
|
||||
const numeric = Number(status)
|
||||
return numeric === 0 || numeric === 1 || String(status).toLowerCase() === 'pending' || String(status).toLowerCase() === 'running'
|
||||
}
|
||||
|
||||
function toArray(value?: string[] | string) {
|
||||
if (!value) return []
|
||||
return Array.isArray(value) ? value.filter(Boolean) : [value]
|
||||
}
|
||||
|
||||
function countriesOf(item?: VariantEntry) {
|
||||
return item?.meta?.execute_country || item?.task_data?.execute_country || []
|
||||
}
|
||||
|
||||
function countryText(item?: VariantEntry) {
|
||||
return countriesOf(item).join('、') || '-'
|
||||
}
|
||||
|
||||
function latestMessage(item: VariantEntry) {
|
||||
const raw = item.res_mes || item.message
|
||||
return (raw || '').trim() || '等待后台处理…'
|
||||
}
|
||||
|
||||
function taskMeta(item: VariantEntry) {
|
||||
return { source: item.meta?.source || '' }
|
||||
}
|
||||
|
||||
function resultFiles(item?: VariantEntry) {
|
||||
return toArray(item?.file_url)
|
||||
}
|
||||
|
||||
function hasResultFiles(item: VariantTaskListItem) {
|
||||
const resType = Number(item.res_type)
|
||||
return (resType === 1 || String(item.res_type) === '1') && resultFiles(item).length > 0
|
||||
}
|
||||
|
||||
function hasSourceFile(item: VariantTaskListItem) {
|
||||
return Boolean(item.task_data?.file_url)
|
||||
}
|
||||
|
||||
function formatDateTime(value?: number | string) {
|
||||
if (!value) return '-'
|
||||
const ms = typeof value === 'number' ? value : Number(new Date(String(value)))
|
||||
if (!Number.isFinite(ms)) return String(value)
|
||||
const date = new Date(ms)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
const hours = String(date.getHours()).padStart(2, '0')
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0')
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
||||
}
|
||||
|
||||
async function selectFiles() {
|
||||
const bridge = getPywebviewApi()
|
||||
if (!bridge?.vc_select_input_files) {
|
||||
ElMessage.warning('当前环境不支持文件选择，请在本机客户端中打开')
|
||||
return
|
||||
}
|
||||
try {
|
||||
const files = await bridge.vc_select_input_files()
|
||||
selectedFiles.value = files || []
|
||||
if (selectedFiles.value.length) {
|
||||
ElMessage.success(`已选择 ${selectedFiles.value.length} 个文件`)
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '选择文件失败')
|
||||
}
|
||||
}
|
||||
|
||||
function registerTask(taskId: string, meta?: { source?: string; execute_country?: string[] }) {
|
||||
if (!taskId) return
|
||||
if (!tasks[taskId]) {
|
||||
tasks[taskId] = { task_id: taskId, status: 0, updated_at: Date.now(), meta: meta || {} }
|
||||
} else if (meta) {
|
||||
tasks[taskId].meta = { ...tasks[taskId].meta, ...meta }
|
||||
}
|
||||
}
|
||||
|
||||
async function submitTask() {
|
||||
if (!hasBridge.value) {
|
||||
ElMessage.warning('请在桌面客户端中打开本页面执行变体采集')
|
||||
return
|
||||
}
|
||||
if (!selectedCountries.value.length) {
|
||||
ElMessage.warning('请至少选择一个采集国家')
|
||||
return
|
||||
}
|
||||
if (!uid()) {
|
||||
ElMessage.warning('未获取到用户信息，请重新登录后再试')
|
||||
return
|
||||
}
|
||||
const bridge = getPywebviewApi()!
|
||||
const params: {
|
||||
mode: 'asin' | 'file'
|
||||
countries: string[]
|
||||
uid: string
|
||||
asins?: string[]
|
||||
files?: string[]
|
||||
} = {
|
||||
mode: inputMode.value,
|
||||
countries: selectedCountries.value,
|
||||
uid: uid(),
|
||||
}
|
||||
if (inputMode.value === 'asin') {
|
||||
params.asins = asinLines.value
|
||||
} else {
|
||||
params.files = selectedFiles.value
|
||||
}
|
||||
submitting.value = true
|
||||
try {
|
||||
const res = await bridge.vc_start_collect!(params)
|
||||
if (res?.success) {
|
||||
const added = res.tasks || []
|
||||
ElMessage.success(`已添加 ${added.length} 个任务`)
|
||||
added.forEach((task) => {
|
||||
registerTask(task.task_id, { source: task.source, execute_country: task.execute_country })
|
||||
})
|
||||
if (inputMode.value === 'asin') {
|
||||
asinText.value = ''
|
||||
} else {
|
||||
selectedFiles.value = []
|
||||
}
|
||||
await loadTasks(1)
|
||||
} else {
|
||||
throw new Error(res?.error || '添加任务失败')
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '添加任务失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshTask(item: VariantTaskListItem) {
|
||||
const bridge = getPywebviewApi()
|
||||
if (!bridge?.vc_query_task) return
|
||||
try {
|
||||
const res = await bridge.vc_query_task(item.task_id)
|
||||
if (!res?.success) {
|
||||
ElMessage.error(res?.error || '查询失败')
|
||||
return
|
||||
}
|
||||
const entry = tasks[item.task_id] || { task_id: item.task_id, meta: {} }
|
||||
if (res.status !== undefined && res.status !== null) {
|
||||
entry.status = res.status
|
||||
}
|
||||
const data = res.data
|
||||
if (data && typeof data === 'object') {
|
||||
entry.message = (data as { message?: string }).message || (data as { msg?: string }).msg || ''
|
||||
if (data.res_mes) {
|
||||
entry.res_mes = data.res_mes
|
||||
entry.message = data.res_mes
|
||||
}
|
||||
if (data.res_type !== undefined) entry.res_type = data.res_type
|
||||
if (data.file_url) entry.file_url = data.file_url
|
||||
if (data.task_data) entry.task_data = data.task_data
|
||||
} else if (typeof data === 'string') {
|
||||
entry.message = data
|
||||
}
|
||||
entry.updated_at = Date.now()
|
||||
tasks[item.task_id] = entry
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '查询失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function loadTasks(page?: number) {
|
||||
const bridge = getPywebviewApi()
|
||||
if (!bridge?.vc_list_tasks) return
|
||||
if (isLoading.value) return
|
||||
if (!uid()) return
|
||||
isLoading.value = true
|
||||
try {
|
||||
const targetPage = page || currentPage.value || 1
|
||||
const res = await bridge.vc_list_tasks({ uid: uid(), page: targetPage, page_size: PAGE_SIZE })
|
||||
if (!res?.success) return
|
||||
currentPage.value = res.page || targetPage || 1
|
||||
totalPages.value = Math.max(1, res.total_page || 1)
|
||||
totalCount.value = res.total || (res.tasks || []).length
|
||||
|
||||
const ids: string[] = []
|
||||
;(res.tasks || []).forEach((item) => {
|
||||
if (!item.task_id) return
|
||||
registerTask(item.task_id, {})
|
||||
const entry = tasks[item.task_id]
|
||||
entry.status = item.status
|
||||
if (item.update_time) entry.update_time = item.update_time
|
||||
entry.res_type = item.res_type
|
||||
entry.res_mes = item.res_mes
|
||||
entry.file_url = item.file_url
|
||||
entry.task_data = item.task_data
|
||||
if (item.res_mes) entry.message = item.res_mes
|
||||
entry.updated_at = Date.now()
|
||||
ids.push(item.task_id)
|
||||
})
|
||||
currentTaskIds.value = ids
|
||||
} catch {
|
||||
/* 静默：列表加载失败时保留现状 */
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function goPage(page: number) {
|
||||
if (page < 1 || page > totalPages.value) return
|
||||
void loadTasks(page)
|
||||
}
|
||||
|
||||
function refreshList() {
|
||||
ElMessage.info('正在刷新任务状态…')
|
||||
void loadTasks(currentPage.value || 1)
|
||||
}
|
||||
|
||||
async function downloadResult(item: VariantTaskListItem) {
|
||||
const bridge = getPywebviewApi()
|
||||
const urls = resultFiles(item)
|
||||
if (!bridge?.vc_download_files_as_zip) {
|
||||
ElMessage.warning('当前环境不支持下载，请在桌面客户端中打开')
|
||||
return
|
||||
}
|
||||
if (!urls.length) {
|
||||
ElMessage.warning('没有可下载的结果文件')
|
||||
return
|
||||
}
|
||||
try {
|
||||
const downloadId = `res_${item.task_id}_${Date.now()}`
|
||||
const res = await bridge.vc_download_files_as_zip({
|
||||
urls,
|
||||
zip_name: `variant_collection_${item.task_id}.zip`,
|
||||
download_id: downloadId,
|
||||
})
|
||||
if (res?.success) {
|
||||
ElMessage.success('结果已打包保存')
|
||||
} else {
|
||||
throw new Error(res?.error || '下载失败')
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '下载失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function downloadSource(item: VariantTaskListItem) {
|
||||
const srcUrl = item.task_data?.file_url
|
||||
if (!srcUrl) {
|
||||
ElMessage.warning('没有可下载的源文件')
|
||||
return
|
||||
}
|
||||
const name = srcUrl.split(/[\\/?]/).filter(Boolean).pop() || 'source.xlsx'
|
||||
const result = await saveUrlWithProgress(srcUrl, name, `src_${item.task_id}_${Date.now()}`)
|
||||
if (result.success) {
|
||||
ElMessage.success(`源文件已保存：${result.path || name}`)
|
||||
} else if (result.error && result.error !== '用户取消') {
|
||||
ElMessage.error(result.error)
|
||||
}
|
||||
}
|
||||
|
||||
async function reexportTask(item: VariantTaskListItem) {
|
||||
const bridge = getPywebviewApi()
|
||||
if (!bridge?.vc_export_task) {
|
||||
ElMessage.warning('当前环境不支持导出，请在桌面客户端中打开')
|
||||
return
|
||||
}
|
||||
const numeric = Number(item.status)
|
||||
if (numeric === 1) {
|
||||
try {
|
||||
await ElMessageBox.confirm('任务正在执行中，导出会终止任务，是否继续导出？', '重新导出', { type: 'warning' })
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
}
|
||||
try {
|
||||
const startRes = await bridge.vc_export_task(item.task_id)
|
||||
if (!startRes?.success || !startRes.file_id) {
|
||||
throw new Error(startRes?.error || '发起导出失败')
|
||||
}
|
||||
ElMessage.info('已发起导出，正在轮询结果…')
|
||||
const result = await pollExport(bridge, startRes.file_id)
|
||||
if (result && Number(result.status) === 2 && result.file_url) {
|
||||
const name = result.file_name || result.file_url.split(/[\\/?]/).filter(Boolean).pop() || 'export.xlsx'
|
||||
const dlRes = await saveUrlWithProgress(result.file_url, name, `exp_${startRes.file_id}`)
|
||||
if (dlRes.success) {
|
||||
ElMessage.success(`导出文件已保存：${dlRes.path || name}`)
|
||||
} else if (dlRes.error && dlRes.error !== '用户取消') {
|
||||
ElMessage.error(dlRes.error)
|
||||
}
|
||||
void loadTasks(currentPage.value || 1)
|
||||
} else if (result && Number(result.status) === 3) {
|
||||
ElMessage.error(result.error || '后台导出失败')
|
||||
} else {
|
||||
ElMessage.warning('导出超时或状态未知，请稍后重试')
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '导出失败')
|
||||
}
|
||||
}
|
||||
|
||||
function pollExport(bridge: NonNullable<ReturnType<typeof getPywebviewApi>>, fileId: string) {
|
||||
return new Promise<{ status?: number | string; file_url?: string; file_name?: string; error?: string } | null>((resolve) => {
|
||||
let count = 0
|
||||
const maxAttempts = 60
|
||||
const tick = async () => {
|
||||
count += 1
|
||||
try {
|
||||
const res = await bridge.vc_query_export!(fileId)
|
||||
if (res?.success) {
|
||||
const st = Number(res.status)
|
||||
if (st === 2 || st === 3) {
|
||||
resolve(res)
|
||||
return
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
/* 网络异常继续轮询 */
|
||||
}
|
||||
if (count >= maxAttempts) {
|
||||
resolve(null)
|
||||
return
|
||||
}
|
||||
autoTimer = window.setTimeout(tick, 2000)
|
||||
}
|
||||
void tick()
|
||||
})
|
||||
}
|
||||
|
||||
function showDetail(item: VariantTaskListItem) {
|
||||
detailItem.value = { ...item, task_data: item.task_data ? { ...item.task_data } : undefined }
|
||||
detailVisible.value = true
|
||||
}
|
||||
|
||||
function scheduleAutoRefresh() {
|
||||
if (autoTimer) {
|
||||
window.clearTimeout(autoTimer)
|
||||
autoTimer = null
|
||||
}
|
||||
autoTimer = window.setTimeout(async () => {
|
||||
await loadTasks(currentPage.value || 1)
|
||||
if (currentTasks.value.some((item) => isBusy(item.status))) {
|
||||
scheduleAutoRefresh()
|
||||
}
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
function startPolling() {
|
||||
void loadTasks(1)
|
||||
refreshTimer = window.setInterval(() => {
|
||||
void loadTasks(currentPage.value || 1)
|
||||
}, 60 * 1000)
|
||||
}
|
||||
|
||||
function cleanup() {
|
||||
if (autoTimer) {
|
||||
window.clearTimeout(autoTimer)
|
||||
autoTimer = null
|
||||
}
|
||||
if (refreshTimer) {
|
||||
window.clearInterval(refreshTimer)
|
||||
refreshTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
startPolling()
|
||||
scheduleAutoRefresh()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
cleanup()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.module-page { min-height: 100vh; background: #151a25; }
|
||||
.main-content { display: flex; height: calc(100vh - 56px); min-height: calc(100vh - 56px); }
|
||||
.left-panel { width: 420px; background: #1c2333; padding: 20px; overflow-y: auto; border-right: 1px solid #2e3a52; }
|
||||
.right-panel { flex: 1; min-width: 0; background: #151a25; display: flex; flex-direction: column; }
|
||||
.section-title { font-size: 13px; color: #a0acbe; margin: 14px 0 10px; }
|
||||
.hint, .loading-msg, .files, .country-hint { color: #5e6878; font-size: 12px; line-height: 1.5; }
|
||||
.hint { margin-bottom: 8px; }
|
||||
.input-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
|
||||
.input-tab { flex: 1; padding: 9px 0; border: 1px solid #3e4a62; border-radius: 8px; background: #2e3a52; color: #a0acbe; font-size: 13px; cursor: pointer; }
|
||||
.input-tab.active { background: rgba(64, 158, 255, 0.15); color: #409eff; border-color: #409eff; }
|
||||
.input-panel { margin-bottom: 4px; }
|
||||
.asin-textarea { width: 100%; box-sizing: border-box; min-height: 150px; padding: 10px; background: #151a25; color: #c8d2e2; border: 1px solid #3e4a62; border-radius: 8px; font-size: 13px; line-height: 1.6; resize: vertical; outline: none; }
|
||||
.asin-textarea:focus { border-color: #409eff; }
|
||||
.asin-count { margin-top: 8px; color: #5e6878; font-size: 12px; }
|
||||
.asin-count b { color: #c8d2e2; }
|
||||
.btns, .run-row { display: flex; gap: 10px; flex-wrap: wrap; }
|
||||
.opt-btn { padding: 8px 14px; color: #c8d2e2; background: #2e3a52; border: 1px solid #3e4a62; border-radius: 7px; cursor: pointer; font-size: 12px; }
|
||||
.opt-btn:hover:not(:disabled) { color: #3498db; border-color: #3498db; }
|
||||
.opt-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.selected-files { margin-top: 10px; color: #a0acbe; font-size: 12px; word-break: break-all; }
|
||||
.selected-files span { display: block; margin: 3px 0; }
|
||||
.country-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
|
||||
.country-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid #333; border-radius: 8px; background: #2e3a52; color: #c8d2e2; font-size: 12px; cursor: pointer; user-select: none; }
|
||||
.country-chip.selected { border-color: #409eff; background: rgba(64, 158, 255, 0.12); color: #e6f2ff; }
|
||||
.country-chip input { width: 15px; height: 15px; accent-color: #409eff; cursor: pointer; }
|
||||
.country-hint { margin: 10px 0 4px; }
|
||||
.country-hint.error { color: #e6a23c; }
|
||||
.country-hint b { color: #c8d2e2; }
|
||||
.bridge-tip { margin: 12px 0; padding: 9px 12px; border-radius: 8px; background: rgba(230, 162, 60, 0.1); color: #e6a23c; font-size: 11px; line-height: 1.6; }
|
||||
.btn-run { padding: 10px 18px; color: #f5f8fc; background: #27ae60; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; }
|
||||
.btn-run:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.loading-msg { margin-top: 10px; }
|
||||
.panel-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid #2e3a52; color: #f5f8fc; font-size: 15px; font-weight: 600; }
|
||||
.panel-actions { display: flex; gap: 8px; }
|
||||
.btn-refresh { padding: 6px 12px; color: #c8d2e2; background: #2e3a52; border: 1px solid #3e4a62; border-radius: 6px; cursor: pointer; font-size: 12px; }
|
||||
.task-list-wrap { flex: 1; padding: 16px 20px; overflow: auto; }
|
||||
.empty-tasks { color: #5e6878; font-size: 13px; padding: 28px; text-align: center; }
|
||||
.task-list { list-style: none; margin: 0; padding: 0; }
|
||||
.task-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid #2e3a52; border-radius: 8px; background: #1c2333; }
|
||||
.left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
|
||||
.id { color: #f5f8fc; font-size: 13px; font-weight: 600; }
|
||||
.task-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
|
||||
.status { padding: 4px 10px; border-radius: 6px; font-size: 12px; white-space: nowrap; }
|
||||
.status.pending { background: rgba(149, 165, 166, 0.18); color: #a0acbe; }
|
||||
.status.running { background: rgba(52, 152, 219, 0.18); color: #3498db; }
|
||||
.status.success { background: rgba(46, 204, 113, 0.18); color: #2ecc71; }
|
||||
.status.failed { background: rgba(231, 76, 60, 0.18); color: #ff6b6b; }
|
||||
.status.cancelled { background: rgba(149, 165, 166, 0.18); color: #a0acbe; }
|
||||
.act-btn { padding: 4px 9px; border-radius: 6px; font-size: 12px; background: #2e3a52; color: #c8d2e2; border: 1px solid #3e4a62; cursor: pointer; }
|
||||
.act-btn.ok { background: rgba(52, 152, 219, 0.18); color: #69b6ff; border-color: transparent; }
|
||||
.act-btn.warn { background: rgba(230, 162, 60, 0.14); color: #e6a23c; border-color: transparent; }
|
||||
.pagination { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 4px; }
|
||||
.page-info { color: #5e6878; font-size: 12px; }
|
||||
.page-btns { display: flex; gap: 8px; }
|
||||
.page-btn { padding: 5px 12px; border-radius: 6px; background: #2e3a52; color: #c8d2e2; border: 1px solid #3e4a62; cursor: pointer; font-size: 12px; }
|
||||
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
.detail-body { max-height: 60vh; overflow: auto; }
|
||||
.kv-row { display: flex; gap: 12px; padding: 6px 0; font-size: 13px; }
|
||||
.kv-key { flex-shrink: 0; width: 110px; color: #5e6878; }
|
||||
.kv-val { color: #c8d2e2; word-break: break-all; }
|
||||
.kv-val.link { color: #69b6ff; }
|
||||
.kv-section { margin: 10px 0 4px; font-size: 12px; color: #a0acbe; border-bottom: 1px solid #333; padding-bottom: 4px; }
|
||||
@media (max-width: 1100px) {
|
||||
.main-content { flex-direction: column; height: auto; }
|
||||
.left-panel { width: 100%; border-right: none; border-bottom: 1px solid #2e3a52; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user