super/crawler-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(frontend): 全站背景图 webp 化(bg.jpg 4MB→251KB 压缩 + bg.webp)＋品牌工具页默认策略调优（品牌检测默认改精确匹配 Simple、Terms 后置）＋任务面板/登录页/亚马逊控制台观感微调

Browse Source
This commit is contained in:
黄自达
2026-09-09 18:32:48 +08:00
parent 9a487ae9a7
commit 83cb3ff84e
29 changed files with 565 additions and 570 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-vue/src/pages/brand/components/BrandQueryAsinTab.vue
+32 -32
View File
@@ -7,7 +7,7 @@
<div class="section-title">店铺输入</div>
<div class="input-zone">
<div class="hint">
左侧负责录入店铺并加入备选区，确认命中后启动任务。查询ASIN按店铺串行执行：上一个任务完成后会自动开始下一个，失败也会继续下一个。
左侧负责录入店铺并加入备选区，确认匹配结果后启动任务。查询会按店铺逐个执行：上一个店铺查完会自动开始下一个，失败也会继续。
</div>
<div class="input-row">
<el-input
@@ -77,16 +77,16 @@
:disabled="isQueueBusy || !matchedRunnableItems.length"
@click="pushToPythonQueue"
>
{{ isQueueBusy ? "串行执行中..." : "启动任务" }}
{{ isQueueBusy ? "按顺序执行中..." : "启动任务" }}
</button>
</div>
<p class="loading-msg">
当前页面会按店铺串行推送任务，并在任务成功或失败后自动接续下一个任务。服务端临时重启时会自动重试查询状态，恢复后继续后续店铺。
店铺会按顺序逐个查询：上一个店铺查完（无论成功或失败）都会自动开始下一个。如果中途网络异常，系统会自动恢复并继续处理。
</p>
<div v-if="queuePushResult" class="queue-debug-card">
<div class="section-title queue-debug-title">队列状态</div>
<div class="section-title queue-debug-title">任务状态</div>
<div class="queue-debug-line">{{ queuePushResult }}</div>
<pre v-if="queuePayloadText" class="queue-debug-payload">{{
queuePayloadText
@@ -394,7 +394,7 @@ function formatMatchStatus(status?: string) {
MATCHED: "已匹配",
PENDING: "待匹配",
CONFLICT: "需人工确认",
INDEX_STALE: "索引过期",
INDEX_STALE: "匹配已过期",
};
return map[value] || value || "-";
}
@@ -403,12 +403,12 @@ function formatMatchRemark(row: QueryAsinShopQueueItem) {
const message = (row.matchMessage || "").trim();
if (message) return message;
if (row.matched && row.matchStatus === "MATCHED") {
return "索引已命中，可启动任务";
return "已匹配成功，可启动任务";
}
if (row.matched) {
return "已命中索引，请结合状态列确认";
return "已匹配成功，请查看状态确认";
}
return "未命中或未就绪，请检查店铺名";
return "未匹配成功，请检查店铺名";
}
function flattenQueryAsinRows(record: Pick<QueryAsinHistoryItem, "shopName" | "queryAsins">) {
@@ -665,8 +665,8 @@ function reconcileActiveQueueTaskWithHistory() {
const missingTaskId = activeTaskId.value;
clearActiveQueueTask();
queuePushResult.value = pendingQueue.value.length
? `任务 ${missingTaskId} 已不存在，已跳过并继续剩余队列`
: "当前任务已不存在，已释放本地队列状态";
? `任务 ${missingTaskId} 已不存在，已跳过并继续剩余任务`
: "当前任务已不存在，已重置本地状态";
resetQueueWorkerIfIdle();
}
@@ -812,7 +812,7 @@ async function runMatch() {
function removeMatchedRow(row: QueryAsinShopQueueItem) {
if (hasQueueWork.value) {
ElMessage.warning("队列执行中，请等待当前串行任务结束后再调整");
ElMessage.warning("任务执行中，请等待当前任务结束后再调整");
return;
}
matchedItems.value = matchedItems.value.filter(
@@ -878,7 +878,7 @@ async function waitForTaskTerminal(taskId: number) {
return "FAILED";
}
if (transientErrorCount > 0) {
queuePushResult.value = `任务 ${taskId} 后端已恢复，继续等待执行结果...`;
queuePushResult.value = `任务 ${taskId} 服务已恢复，继续等待执行结果...`;
}
transientErrorCount = 0;
const item = findHistoryItemByTaskId(taskId);
@@ -893,10 +893,10 @@ async function waitForTaskTerminal(taskId: number) {
transientErrorCount += 1;
if (transientErrorCount >= MAX_TRANSIENT_ERRORS) {
throw new Error(
`任务 ${taskId} 等待后端恢复超时，请稍后刷新查看状态`,
`任务 ${taskId} 等待服务恢复超时，请稍后刷新查看状态`,
);
}
queuePushResult.value = `任务 ${taskId} 执行中，正在等待后端服务恢复（${transientErrorCount}/${MAX_TRANSIENT_ERRORS}）...`;
queuePushResult.value = `任务 ${taskId} 执行中，正在等待服务恢复（${transientErrorCount}/${MAX_TRANSIENT_ERRORS}）...`;
}
await sleep(getTaskPollIntervalMs());
}
@@ -932,7 +932,7 @@ async function processQueue() {
const created = await withTransientRetry(
() => createQueryAsinTask([buildTaskItem(nextItem)]),
(attempt, maxAttempts) => {
queuePushResult.value = `后端服务暂时不可用，正在重试创建任务（${attempt}/${maxAttempts}）...`;
queuePushResult.value = `服务暂时不可用，正在重试创建任务（${attempt}/${maxAttempts}）...`;
},
);
const createdItem = created.items?.[0]
@@ -961,7 +961,7 @@ async function processQueue() {
shops: [
{
shopName: createdItem.shopName || nextItem.shopName || "",
error: `任务 ${created.taskId} 数据校验未通过，已阻止推送`,
error: `任务 ${created.taskId} 数据校验未通过，已阻止启动`,
shopDone: true,
submissionId: createSubmissionId(
created.taskId,
@@ -971,7 +971,7 @@ async function processQueue() {
],
});
await refreshTaskViews();
queuePushResult.value = `任务 ${created.taskId} 数据校验未通过，已阻止推送并继续下一个任务`;
queuePushResult.value = `任务 ${created.taskId} 数据校验未通过，已阻止启动并继续下一个任务`;
clearActiveQueueTask();
continue;
}
@@ -982,7 +982,7 @@ async function processQueue() {
shops: [
{
shopName: createdItem.shopName || nextItem.shopName || "",
error: pushResult?.error || `任务 ${created.taskId} 推送失败`,
error: pushResult?.error || `任务 ${created.taskId} 启动失败`,
shopDone: true,
submissionId: createSubmissionId(
created.taskId,
@@ -992,7 +992,7 @@ async function processQueue() {
],
});
await refreshTaskViews();
queuePushResult.value = `任务 ${created.taskId} 推送失败，已自动继续下一个任务`;
queuePushResult.value = `任务 ${created.taskId} 启动失败，已自动继续下一个任务`;
clearActiveQueueTask();
continue;
}
@@ -1000,11 +1000,11 @@ async function processQueue() {
setTaskStartTime(created.taskId);
queuePushResult.value =
pendingQueue.value.length > 0
? `任务 ${created.taskId} 已入队，等待完成后自动继续下一个（剩余 ${pendingQueue.value.length} 条）`
: `任务 ${created.taskId} 已入队，等待执行完成`;
? `任务 ${created.taskId} 已提交，等待完成后自动继续下一个（剩余 ${pendingQueue.value.length} 条）`
: `任务 ${created.taskId} 已提交，等待执行完成`;
}
queuePushResult.value = "串行队列已执行完成";
queuePushResult.value = "任务已按顺序执行完成";
await refreshTaskViews();
ElMessage.success("查询ASIN队列已按顺序执行完成");
} catch (error) {
@@ -1031,7 +1031,7 @@ async function pushToPythonQueue() {
}
pendingQueue.value = mergeQueueItems(pendingQueue.value, runnable);
saveQueueState();
queuePushResult.value = `已加入 ${runnable.length} 条店铺，开始串行执行`;
queuePushResult.value = `已加入 ${runnable.length} 条店铺，开始按顺序执行`;
await processQueue();
}
@@ -1073,7 +1073,7 @@ async function deleteTaskRecord(item: QueryAsinHistoryItem) {
removeHistoryItemLocally(item);
await loadCandidates();
resetQueueWorkerIfIdle();
ElMessage.success("后端记录已不存在，已同步移除本地记录");
ElMessage.success("记录已不存在，已同步移除本地记录");
return;
}
ElMessage.error(error instanceof Error ? error.message : "删除失败");
@@ -1126,21 +1126,21 @@ async function batchDeleteHistory(views: TaskItemView[]) {
</script>
<style scoped>
.module-page { min-height: 100vh; background: #151a25; }
.module-page { min-height: 100vh; background: #242424; }
.main-content { display: flex; min-height: calc(100vh - 56px); height: calc(100vh - 56px); }
.left-panel { width: 400px; background: #1c2333; padding: 20px; overflow-y: auto; border-right: 1px solid #2e3a52; }
.right-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #151a25; }
.left-panel { width: 400px; background: #242424; padding: 20px; overflow-y: auto; border-right: 1px solid #2e3a52; }
.right-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #242424; }
.section-title { font-size: 13px; color: #a0acbe; margin-bottom: 10px; }
.input-zone { border: 1px dashed #3e4a62; border-radius: 10px; padding: 16px; background: #2e3a52; margin-bottom: 20px; }
.input-zone { border: 1px dashed #3e4a62; border-radius: 10px; padding: 16px; background: #242424; margin-bottom: 20px; }
.hint { color: #5e6878; font-size: 12px; margin-bottom: 12px; line-height: 1.5; text-align: left; }
.input-row { display: flex; gap: 10px; align-items: center; }
.input-row :deep(.el-input) { flex: 1; }
.opt-btn { padding: 8px 12px; font-size: 12px; color: #c8d2e2; background: #2e3a52; border: 1px solid #3e4a62; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.opt-btn { padding: 8px 12px; font-size: 12px; color: #c8d2e2; background: #242424; border: 1px solid #3e4a62; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.opt-btn:hover:not(:disabled) { color: #3498db; border-color: #3498db; }
.opt-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.empty-candidates { color: #5e6878; font-size: 13px; padding: 16px; border: 1px dashed #333; border-radius: 8px; margin-bottom: 16px; }
.candidate-table-scroll { max-height: 320px; overflow: auto; margin-bottom: 18px; border-radius: 8px; border: 1px solid #2e3a52; }
.candidate-table { --el-table-bg-color: #2e3a52; --el-table-tr-bg-color: #2e3a52; --el-table-header-bg-color: #2e3a52; --el-table-text-color: #c8d2e2; --el-table-border-color: #333; }
.candidate-table { --el-table-bg-color: #242424; --el-table-tr-bg-color: #242424; --el-table-header-bg-color: #2e3a52; --el-table-text-color: #c8d2e2; --el-table-border-color: #333; }
.link-danger { background: none; border: none; color: #e74c3c; cursor: pointer; font-size: 12px; padding: 0; }
.link-danger:hover { text-decoration: underline; }
.run-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
@@ -1157,8 +1157,8 @@ async function batchDeleteHistory(views: TaskItemView[]) {
.subsection-title { font-size: 13px; color: #a0acbe; margin: 8px 0 10px; }
.match-empty { color: #5e6878; font-size: 13px; padding: 12px 8px; margin-bottom: 12px; text-align: center; }
.match-table { margin-bottom: 18px; }
.match-table :deep(.el-table__body tr:hover > td.el-table__cell), .match-table :deep(.el-table__body tr.hover-row > td.el-table__cell), .match-table :deep(.el-table__body tr.current-row > td.el-table__cell) { background-color: var(--el-table-tr-bg-color, #222) !important; }
.result-table { --el-table-bg-color: #222; --el-table-tr-bg-color: #222; --el-table-header-bg-color: #2e3a52; --el-table-text-color: #c8d2e2; --el-table-border-color: #333; }
.match-table :deep(.el-table__body tr:hover > td.el-table__cell), .match-table :deep(.el-table__body tr.hover-row > td.el-table__cell), .match-table :deep(.el-table__body tr.current-row > td.el-table__cell) { background-color: var(--el-table-tr-bg-color, #242424) !important; }
.result-table { --el-table-bg-color: #242424; --el-table-tr-bg-color: #242424; --el-table-header-bg-color: #2e3a52; --el-table-text-color: #c8d2e2; --el-table-border-color: #333; }
.ok { color: #27ae60; }
.fail { color: #e67e22; }
.download { padding: 6px 10px; border-radius: 6px; font-size: 12px; background: rgba(52, 152, 219, 0.18); color: #69b6ff; border: none; cursor: pointer; }