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,494 @@
|
||||
<template>
|
||||
<div class="page-shell module-page">
|
||||
<AmazonToolPageShell tool-id="brand">
|
||||
|
||||
<div class="main-content">
|
||||
<aside class="left-panel">
|
||||
<div class="section-title">待检品牌文件</div>
|
||||
<div class="upload-zone">
|
||||
<div class="hint">
|
||||
Excel 每行含「品牌」列即会加入检测。可多选文件或选择整个文件夹（.xlsx）。检测由本机客户端执行，请在桌面客户端中打开本页面。
|
||||
</div>
|
||||
<div class="btns">
|
||||
<button type="button" class="opt-btn" :disabled="!hasBridge" @click="selectFiles">选择 Excel</button>
|
||||
<button type="button" class="opt-btn" :disabled="!hasBridge" @click="selectFolder">选择文件夹</button>
|
||||
</div>
|
||||
<div class="selected-files">
|
||||
<template v-if="selectedPaths.length">
|
||||
<span v-for="name in displayPaths" :key="name" :title="name">{{ baseName(name) }}</span>
|
||||
<span v-if="selectedPaths.length > displayPaths.length" class="more-line">
|
||||
还有 {{ selectedPaths.length - displayPaths.length }} 个文件未展开显示
|
||||
</span>
|
||||
</template>
|
||||
<span v-else>暂未选择文件</span>
|
||||
</div>
|
||||
<div v-if="!hasBridge" class="bridge-tip">当前浏览器环境无桌面客户端桥接，仅可预览页面；请用本机客户端打开。</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">匹配策略</div>
|
||||
<div class="radio-cards">
|
||||
<label class="radio-card" :class="{ selected: strategy === 'Terms' }">
|
||||
<input type="radio" name="brand-strategy" value="Terms" v-model="strategy" />
|
||||
<span class="radio-card-name">词条 / 嵌入匹配（Terms）</span>
|
||||
<span class="radio-card-desc">按品牌词条做宽范围比对，误杀率低，推荐第一遍使用</span>
|
||||
</label>
|
||||
<label class="radio-card" :class="{ selected: strategy === 'Simple' }">
|
||||
<input type="radio" name="brand-strategy" value="Simple" v-model="strategy" />
|
||||
<span class="radio-card-name">精确匹配（Simple）</span>
|
||||
<span class="radio-card-desc">仅精确命中才判为疑似，误杀最低</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="section-title">运行方式</div>
|
||||
<div class="run-mode-zone">
|
||||
<label class="run-mode-row">
|
||||
<input type="radio" name="brand-run-mode" value="immediate" v-model="runMode" />
|
||||
<span class="run-mode-text">立即执行（前台运行，可实时取消）</span>
|
||||
</label>
|
||||
<label class="run-mode-row">
|
||||
<input type="radio" name="brand-run-mode" value="queue" v-model="runMode" />
|
||||
<span class="run-mode-text">添加到任务队列（后台排队执行）</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="run-row">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-run"
|
||||
:disabled="!selectedPaths.length || submitting || !hasBridge || !hasUid"
|
||||
@click="submitRun"
|
||||
>
|
||||
{{ submitting ? '提交中...' : runMode === 'immediate' ? '立即运行品牌检测' : '添加到任务队列' }}
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="!hasBridge || !hasUid" class="env-tip">
|
||||
品牌检测在桌面客户端内执行：请在本机客户端登录后打开本页面使用（浏览器仅可预览界面）。
|
||||
</p>
|
||||
<p v-else class="loading-msg">
|
||||
检测完成后自动生成结果 Excel（含原始数据、不符合品牌、查询失败品牌），到右侧任务列表下载。
|
||||
</p>
|
||||
|
||||
<div class="section-title">文档模板</div>
|
||||
<div class="btns">
|
||||
<button type="button" class="opt-btn" :disabled="!hasBridge" @click="downloadTemplate('xlsx')">下载 Excel 模板</button>
|
||||
<button type="button" class="opt-btn" :disabled="!hasBridge" @click="downloadTemplate('zip')">下载文件夹模板</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section class="right-panel">
|
||||
<div class="panel-header">
|
||||
<span>品牌检测任务</span>
|
||||
<button type="button" class="btn-refresh" @click="loadTasks">刷新任务状态</button>
|
||||
</div>
|
||||
<div class="task-list-wrap">
|
||||
<div v-if="!tasks.length" class="empty-tasks">
|
||||
暂无品牌检测任务。选择待检文件后点击「运行」或「添加到任务队列」。
|
||||
</div>
|
||||
<ul v-else class="task-list">
|
||||
<li v-for="item in tasks" :key="`brand-${item.id}`" class="task-item">
|
||||
<div class="left">
|
||||
<span class="id" :title="taskDesc(item)">{{ taskDesc(item) }}</span>
|
||||
<div class="files">任务 ID：{{ item.id }}</div>
|
||||
<div v-if="item.file_paths?.length" class="files">文件：{{ item.file_paths.length }} 个</div>
|
||||
<div class="files">创建时间：{{ formatDateTime(item.created_at) }}</div>
|
||||
<template v-if="isRunning(item)">
|
||||
<div class="task-progress">
|
||||
<div class="task-progress-meta">
|
||||
<span>任务进度</span>
|
||||
<span>{{ taskProgress(item) }}%</span>
|
||||
</div>
|
||||
<div class="task-progress-track">
|
||||
<div class="task-progress-fill" :style="{ width: `${taskProgress(item)}%` }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="errorMessage(item)" class="files error">{{ errorMessage(item) }}</div>
|
||||
</template>
|
||||
<div v-else-if="errorMessage(item)" class="files error">错误：{{ errorMessage(item) }}</div>
|
||||
</div>
|
||||
<div class="task-right">
|
||||
<span class="status" :class="statusClass(item.status)">{{ statusText(item.status) }}</span>
|
||||
<button v-if="isRunning(item)" type="button" class="act-btn danger" @click="cancelTask(item)">取消</button>
|
||||
<button v-if="canDownload(item)" type="button" class="act-btn ok" @click="downloadResult(item)">下载结果</button>
|
||||
<button v-if="canDelete(item)" type="button" class="act-btn" @click="deleteTask(item)">删除</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</AmazonToolPageShell>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import AmazonToolPageShell from '@/pages/amazon/components/AmazonToolPageShell.vue'
|
||||
import { getPywebviewApi } from '@/shared/bridges/pywebview'
|
||||
import { requestPostJson } from '@/shared/api/http'
|
||||
import {
|
||||
cancelBrandTask,
|
||||
createBrandTask,
|
||||
deleteBrandTask,
|
||||
getBrandTaskDownloadUrl,
|
||||
getBrandTasks,
|
||||
runBrandNow,
|
||||
type BrandTaskItem,
|
||||
} from '@/shared/api/brand'
|
||||
|
||||
interface BrandExpandFolderPathsResponse {
|
||||
success: boolean
|
||||
paths?: string[]
|
||||
error?: string
|
||||
}
|
||||
|
||||
const selectedPaths = ref<string[]>([])
|
||||
const strategy = ref<'Terms' | 'Simple'>('Terms')
|
||||
const runMode = ref<'immediate' | 'queue'>('immediate')
|
||||
const submitting = ref(false)
|
||||
const tasks = ref<BrandTaskItem[]>([])
|
||||
|
||||
const hasBridge = computed(() => Boolean(getPywebviewApi()))
|
||||
const hasUid = computed(() => {
|
||||
const raw = typeof window === 'undefined' ? '' : window.localStorage.getItem('uid') || ''
|
||||
const numeric = Number(raw.trim())
|
||||
return Number.isFinite(numeric) && numeric > 0
|
||||
})
|
||||
const displayPaths = computed(() => selectedPaths.value.slice(0, 8))
|
||||
|
||||
function baseName(path: string) {
|
||||
return path.split(/[\\/]/).pop() || path
|
||||
}
|
||||
|
||||
let pollTimer: number | null = null
|
||||
|
||||
function hasRunning() {
|
||||
return tasks.value.some((item) => isRunning(item))
|
||||
}
|
||||
|
||||
function isRunning(item: BrandTaskItem) {
|
||||
return (item.status || '').toLowerCase() === 'running'
|
||||
}
|
||||
|
||||
function isTerminal(item: BrandTaskItem) {
|
||||
const status = (item.status || '').toLowerCase()
|
||||
return status === 'success' || status === 'failed' || status === 'cancelled'
|
||||
}
|
||||
|
||||
function canDelete(item: BrandTaskItem) {
|
||||
return !isRunning(item)
|
||||
}
|
||||
|
||||
function canDownload(item: BrandTaskItem) {
|
||||
const status = (item.status || '').toLowerCase()
|
||||
return status === 'success' && Boolean(item.result_paths?.zip_url)
|
||||
}
|
||||
|
||||
function taskProgress(item: BrandTaskItem) {
|
||||
const total = Number(item.progress_total) || 0
|
||||
const current = Number(item.progress_current) || 0
|
||||
if (!total) return 0
|
||||
return Math.max(0, Math.min(100, Math.round((current / total) * 100)))
|
||||
}
|
||||
|
||||
function taskDesc(item: BrandTaskItem) {
|
||||
const desc = (item.desc || '').trim()
|
||||
return desc ? (desc.length > 60 ? `${desc.slice(0, 60)}…` : desc) : `任务 #${item.id}`
|
||||
}
|
||||
|
||||
function errorMessage(item: BrandTaskItem) {
|
||||
return (item.error_message || '').trim()
|
||||
}
|
||||
|
||||
function statusText(status?: BrandTaskItem['status']) {
|
||||
const value = (status || '').toLowerCase()
|
||||
const map: Record<string, string> = {
|
||||
pending: '等待中',
|
||||
running: '执行中',
|
||||
success: '已完成',
|
||||
failed: '失败',
|
||||
cancelled: '已取消',
|
||||
}
|
||||
return map[value] || String(status ?? '未知')
|
||||
}
|
||||
|
||||
function statusClass(status?: BrandTaskItem['status']) {
|
||||
const value = (status || '').toLowerCase()
|
||||
if (value === 'running') return 'running'
|
||||
if (value === 'success') return 'success'
|
||||
if (value === 'failed') return 'failed'
|
||||
if (value === 'cancelled') return 'cancelled'
|
||||
return 'pending'
|
||||
}
|
||||
|
||||
function formatDateTime(value?: string) {
|
||||
if (!value) return '-'
|
||||
const date = new Date(value)
|
||||
if (Number.isNaN(date.getTime())) return value
|
||||
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}`
|
||||
}
|
||||
|
||||
function normalizeSelected(paths: string[]) {
|
||||
selectedPaths.value = paths
|
||||
.filter((path) => /\.xlsx$/i.test(path))
|
||||
.filter((path, index, array) => array.indexOf(path) === index)
|
||||
}
|
||||
|
||||
async function selectFiles() {
|
||||
const bridge = getPywebviewApi()
|
||||
if (!bridge?.select_brand_xlsx_files) {
|
||||
ElMessage.warning('当前环境不支持文件选择，请在本机客户端中打开')
|
||||
return
|
||||
}
|
||||
try {
|
||||
const paths = await bridge.select_brand_xlsx_files()
|
||||
if (!paths?.length) return
|
||||
normalizeSelected(paths)
|
||||
ElMessage.success(`已选择 ${selectedPaths.value.length} 个 Excel 文件`)
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '文件选择失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function selectFolder() {
|
||||
const bridge = getPywebviewApi()
|
||||
if (!bridge?.select_brand_folder) {
|
||||
ElMessage.warning('当前环境不支持文件夹选择，请在本机客户端中打开')
|
||||
return
|
||||
}
|
||||
try {
|
||||
const folder = await bridge.select_brand_folder()
|
||||
if (!folder) return
|
||||
const res = await requestPostJson<BrandExpandFolderPathsResponse>('/api/brand/expand-folder', { folder })
|
||||
if (!res.success || !res.paths?.length) {
|
||||
ElMessage.warning(res.error || '该文件夹下没有 xlsx 文件')
|
||||
return
|
||||
}
|
||||
normalizeSelected(res.paths)
|
||||
ElMessage.success(`已选择文件夹内 ${selectedPaths.value.length} 个 Excel 文件`)
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '文件夹选择失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function submitRun() {
|
||||
if (!hasBridge.value) {
|
||||
ElMessage.warning('请在桌面客户端中打开本页面执行品牌检测')
|
||||
return
|
||||
}
|
||||
if (!hasUid.value) {
|
||||
ElMessage.warning('未获取到登录用户，请先在本机客户端登录后再试')
|
||||
return
|
||||
}
|
||||
if (!selectedPaths.value.length) {
|
||||
ElMessage.warning('请先选择待检 Excel 文件')
|
||||
return
|
||||
}
|
||||
submitting.value = true
|
||||
try {
|
||||
if (runMode.value === 'immediate') {
|
||||
const res = await runBrandNow(selectedPaths.value, strategy.value)
|
||||
if (res.success && res.task_id) {
|
||||
ElMessage.success(`已创建任务 ${res.task_id}，客户端开始检测`)
|
||||
} else {
|
||||
throw new Error((res as { error?: string }).error || '运行失败')
|
||||
}
|
||||
} else {
|
||||
const res = await createBrandTask(selectedPaths.value, strategy.value)
|
||||
if (res.success && res.task_id) {
|
||||
ElMessage.success(`任务 ${res.task_id} 已添加到队列`)
|
||||
} else {
|
||||
throw new Error((res as { error?: string }).error || '添加失败')
|
||||
}
|
||||
}
|
||||
selectedPaths.value = []
|
||||
await loadTasks()
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '提交失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadTasks() {
|
||||
try {
|
||||
const res = await getBrandTasks()
|
||||
if (res.success && Array.isArray(res.items)) {
|
||||
tasks.value = res.items
|
||||
}
|
||||
} catch (error) {
|
||||
// 浏览器预览（无 uid / 无桌面后端）时静默，避免误报
|
||||
if (hasBridge.value && hasUid.value) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '任务列表加载失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function cancelTask(item: BrandTaskItem) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确认取消任务 ${item.id}？`, '取消任务', { type: 'warning' })
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
try {
|
||||
const res = await cancelBrandTask(item.id)
|
||||
if (!res.success) throw new Error((res as { error?: string }).error || '取消失败')
|
||||
ElMessage.success('已取消')
|
||||
await loadTasks()
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '取消失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteTask(item: BrandTaskItem) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确认删除任务 ${item.id}？删除后不可恢复。`, '删除任务', { type: 'warning' })
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
try {
|
||||
const res = await deleteBrandTask(item.id)
|
||||
if (!res.success) throw new Error((res as { error?: string }).error || '删除失败')
|
||||
ElMessage.success('已删除')
|
||||
await loadTasks()
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function downloadResult(item: BrandTaskItem) {
|
||||
const zipUrl = item.result_paths?.zip_url
|
||||
const filename = `brand_task_${item.id}.zip`
|
||||
const bridge = getPywebviewApi()
|
||||
if (bridge?.save_file_from_url && zipUrl) {
|
||||
try {
|
||||
const res = await bridge.save_file_from_url(zipUrl, filename)
|
||||
if (res.success) {
|
||||
ElMessage.success(`已保存：${res.path || filename}`)
|
||||
} else if (res.error && res.error !== '用户取消') {
|
||||
ElMessage.error(res.error)
|
||||
}
|
||||
return
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '下载失败')
|
||||
return
|
||||
}
|
||||
}
|
||||
if (zipUrl) {
|
||||
window.open(zipUrl, '_blank')
|
||||
return
|
||||
}
|
||||
window.open(getBrandTaskDownloadUrl(item.id), '_blank')
|
||||
}
|
||||
|
||||
async function downloadTemplate(kind: 'xlsx' | 'zip') {
|
||||
const bridge = getPywebviewApi()
|
||||
try {
|
||||
let res: { success: boolean; path?: string; error?: string } | undefined
|
||||
if (kind === 'xlsx') {
|
||||
res = bridge?.save_template_xlsx ? await bridge.save_template_xlsx() : undefined
|
||||
} else {
|
||||
res = bridge?.save_template_zip ? await bridge.save_template_zip() : undefined
|
||||
}
|
||||
if (res?.success) {
|
||||
ElMessage.success(`模板已保存至：${res.path}`)
|
||||
} else if (res?.error) {
|
||||
ElMessage.warning(res.error)
|
||||
} else {
|
||||
ElMessage.warning('当前环境不支持模板下载，请在本机客户端中打开')
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '模板下载失败')
|
||||
}
|
||||
}
|
||||
|
||||
function schedulePoll() {
|
||||
if (pollTimer) {
|
||||
window.clearTimeout(pollTimer)
|
||||
pollTimer = null
|
||||
}
|
||||
pollTimer = window.setTimeout(async () => {
|
||||
await loadTasks()
|
||||
if (hasRunning()) {
|
||||
schedulePoll()
|
||||
}
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void loadTasks()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (pollTimer) {
|
||||
window.clearTimeout(pollTimer)
|
||||
pollTimer = null
|
||||
}
|
||||
})
|
||||
</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: 12px 0 10px; }
|
||||
.hint, .loading-msg, .files, .muted { color: #5e6878; font-size: 12px; line-height: 1.5; }
|
||||
.hint { margin-bottom: 12px; }
|
||||
.upload-zone { border: 1px dashed #3e4a62; border-radius: 10px; padding: 16px; background: #2e3a52; margin-bottom: 6px; }
|
||||
.btns, .run-row { display: flex; gap: 10px; flex-wrap: wrap; }
|
||||
.run-row { margin-top: 14px; }
|
||||
.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: 12px; color: #a0acbe; font-size: 12px; word-break: break-all; }
|
||||
.selected-files span { display: block; margin: 3px 0; }
|
||||
.selected-files .more-line { color: #5e6878; }
|
||||
.bridge-tip { margin-top: 10px; color: #e6a23c; font-size: 11px; }
|
||||
.env-tip { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(230, 162, 60, 0.1); color: #e6a23c; font-size: 12px; line-height: 1.6; }
|
||||
.radio-cards { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
|
||||
.radio-card { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid #333; border-radius: 8px; background: #2e3a52; cursor: pointer; }
|
||||
.radio-card.selected { border-color: #409eff; background: rgba(64, 158, 255, 0.1); }
|
||||
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
|
||||
.radio-card-name { color: #c8d2e2; font-size: 13px; }
|
||||
.radio-card-desc { color: #5e6878; font-size: 11px; }
|
||||
.run-mode-zone { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid #333; border-radius: 8px; background: #2e3a52; }
|
||||
.run-mode-row { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: #c8d2e2; font-size: 12px; }
|
||||
.run-mode-row input { width: 15px; height: 15px; accent-color: #409eff; }
|
||||
.btn-run { padding: 10px 18px; color: #f5f8fc; background: #3498db; 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; }
|
||||
.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: 4px; }
|
||||
.id { color: #f5f8fc; font-size: 13px; font-weight: 600; }
|
||||
.files.error, .error { color: #ff6b6b; }
|
||||
.task-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
|
||||
.status { padding: 4px 10px; border-radius: 6px; font-size: 12px; }
|
||||
.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: 5px 10px; 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.danger { background: rgba(231, 76, 60, 0.15); color: #ff8f8f; border-color: transparent; }
|
||||
.task-progress { margin-top: 6px; max-width: 460px; }
|
||||
.task-progress-meta { display: flex; justify-content: space-between; color: #5e6878; font-size: 11px; margin-bottom: 4px; }
|
||||
.task-progress-track { height: 5px; border-radius: 3px; background: #333; overflow: hidden; }
|
||||
.task-progress-fill { height: 100%; background: #3498db; transition: width 0.25s ease; }
|
||||
@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