align(tasks·像素复刻): 视频任务记录/店铺数据记录 两页自绘复刻旧版(panel-image-video-tasks/shop-data-crawl-tasks)——form-box筛选[用户名/提交起止]+panel-box toolbar[全选/批量下载/权限配置/汇总]+任务/店铺卡片网格+旧版状态徽章映射+原生confirm删除+旧式分页(店铺级+卡片9/页)；空态/调试链接复制对齐旧版
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { formatDateTime } from '@/utils/datetime'
|
import { formatDateTime } from '@/utils/datetime'
|
||||||
/** 视频任务记录页：任务卡片网格（播放/下载/复制）+ 筛选 + 批量打包下载 + 明细 + 数据范围授权。 */
|
/** 视频任务记录页 · 像素复刻旧版 admin.html panel-image-video-tasks（自绘：form-box 筛选[用户名/提交起止+查询/重置] + panel-box toolbar[全选/批量下载/权限配置/汇总] + 任务卡片网格 + 旧式分页）。
|
||||||
|
* script 逻辑沿用现有 Vue 实现（批量打包/明细抽屉/权限授权）。 */
|
||||||
import { computed, onMounted, reactive, ref } from 'vue'
|
import { computed, onMounted, reactive, ref } from 'vue'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { requestVideoZipDownload, fetchImageVideoTasks, fetchImageVideoTaskDetail } from './image-video-api.ts'
|
import { requestVideoZipDownload, fetchImageVideoTasks, fetchImageVideoTaskDetail } from './image-video-api.ts'
|
||||||
@@ -16,12 +17,16 @@ import {
|
|||||||
} from './image-video-selection.ts'
|
} from './image-video-selection.ts'
|
||||||
import { grantedUserIds, type TaskPermissionItem } from './task-permission.ts'
|
import { grantedUserIds, type TaskPermissionItem } from './task-permission.ts'
|
||||||
import { imageVideoDownloadFilename, videoKeysOf } from './image-video-view.ts'
|
import { imageVideoDownloadFilename, videoKeysOf } from './image-video-view.ts'
|
||||||
|
import { useAdminSessionStore } from '@/stores/admin-session'
|
||||||
|
|
||||||
|
const session = useAdminSessionStore()
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const tasks = ref<ImageVideoRow[]>([])
|
const tasks = ref<ImageVideoRow[]>([])
|
||||||
const totalTasks = ref(0)
|
const totalTasks = ref(0)
|
||||||
const page = ref(1)
|
const page = ref(1)
|
||||||
const pageSize = 20
|
const pageSize = 20
|
||||||
|
const jumpPage = ref('')
|
||||||
|
const totalPages = computed(() => Math.max(1, Math.ceil(totalTasks.value / pageSize)))
|
||||||
|
|
||||||
const filter = reactive<ImageVideoFilter & { dateRange: string[] }>({ ...createImageVideoFilter(), dateRange: [] })
|
const filter = reactive<ImageVideoFilter & { dateRange: string[] }>({ ...createImageVideoFilter(), dateRange: [] })
|
||||||
const selection = ref<Set<string>>(new Set())
|
const selection = ref<Set<string>>(new Set())
|
||||||
@@ -38,17 +43,37 @@ const permissionSaving = ref(false)
|
|||||||
const downloading = ref(false)
|
const downloading = ref(false)
|
||||||
const downloadingKey = ref('')
|
const downloadingKey = ref('')
|
||||||
|
|
||||||
|
/** 旧版状态 label 映射（admin.js 前缀兜底：RUN/WAIT/PROCESS/POLL → 处理中）。 */
|
||||||
function statusLabel(status: string): string {
|
function statusLabel(status: string): string {
|
||||||
const map: Record<string, string> = { PENDING: '排队中', RUNNING: '进行中', SUCCESS: '成功', FAILED: '失败', CANCELLED: '已取消', UNKNOWN: '未知' }
|
const map: Record<string, string> = {
|
||||||
return map[status] || status
|
PENDING: '待执行',
|
||||||
|
WAITING: '排队中',
|
||||||
|
RUNNING: '执行中',
|
||||||
|
POLLING: '处理中',
|
||||||
|
SUCCESS: '已完成',
|
||||||
|
COMPLETED: '已完成',
|
||||||
|
DONE: '已完成',
|
||||||
|
FAILED: '失败',
|
||||||
|
ERROR: '失败',
|
||||||
|
CANCELLED: '已取消',
|
||||||
|
CANCELED: '已取消',
|
||||||
|
DELETED: '已删除',
|
||||||
|
STOPPED: '已停止',
|
||||||
|
UNKNOWN: '未知',
|
||||||
|
}
|
||||||
|
const key = (status || '').toUpperCase()
|
||||||
|
if (map[key]) return map[key]
|
||||||
|
if (/^(RUN|WAIT|PROCESS|POLL)/.test(key)) return '处理中'
|
||||||
|
return key || '未知'
|
||||||
}
|
}
|
||||||
|
|
||||||
function statusType(status: string): 'info' | 'warning' | 'success' | 'danger' | 'primary' {
|
function statusType(status: string): 'pending' | 'running' | 'success' | 'failed' | 'cancelled' {
|
||||||
if (status === 'SUCCESS') return 'success'
|
const key = (status || '').toUpperCase()
|
||||||
if (status === 'RUNNING') return 'warning'
|
if (key === 'SUCCESS' || key === 'COMPLETED' || key === 'DONE') return 'success'
|
||||||
if (status === 'FAILED') return 'danger'
|
if (key === 'FAILED' || key === 'ERROR') return 'failed'
|
||||||
if (status === 'CANCELLED') return 'info'
|
if (key === 'CANCELLED' || key === 'CANCELED') return 'cancelled'
|
||||||
return 'info'
|
if (key === 'PENDING' || key === 'WAITING') return 'pending'
|
||||||
|
return 'running'
|
||||||
}
|
}
|
||||||
|
|
||||||
const currentVideoKeys = computed(() => {
|
const currentVideoKeys = computed(() => {
|
||||||
@@ -101,6 +126,22 @@ function reset() {
|
|||||||
void load()
|
void load()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function changePage(next: number) {
|
||||||
|
if (next < 1 || next > totalPages.value) return
|
||||||
|
page.value = next
|
||||||
|
selection.value = new Set()
|
||||||
|
void load()
|
||||||
|
}
|
||||||
|
|
||||||
|
function goJump() {
|
||||||
|
const n = Number.parseInt(jumpPage.value, 10)
|
||||||
|
if (Number.isNaN(n)) {
|
||||||
|
ElMessage.warning('请输入页码')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
changePage(Math.min(Math.max(n, 1), totalPages.value))
|
||||||
|
}
|
||||||
|
|
||||||
function toggleSelectAll() {
|
function toggleSelectAll() {
|
||||||
selection.value = allSelected.value ? clearVideoSelection() : new Set(currentVideoKeys.value)
|
selection.value = allSelected.value ? clearVideoSelection() : new Set(currentVideoKeys.value)
|
||||||
}
|
}
|
||||||
@@ -221,7 +262,8 @@ async function savePermission() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function videoErrorText(task: ImageVideoRow): string {
|
function videoErrorText(task: ImageVideoRow): string {
|
||||||
if (task.status === 'FAILED' || task.status === 'CANCELLED') return '任务失败，未生成视频'
|
const key = (task.status || '').toUpperCase()
|
||||||
|
if (key === 'FAILED' || key === 'ERROR' || key === 'CANCELLED') return '任务失败，未生成视频'
|
||||||
return '视频生成中或暂无结果'
|
return '视频生成中或暂无结果'
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -233,100 +275,101 @@ onMounted(load)
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page-stack">
|
<div class="iv-view">
|
||||||
<div class="page-heading">
|
<section class="form-box">
|
||||||
<div>
|
<h3>视频任务记录筛选</h3>
|
||||||
<h2>视频任务记录</h2>
|
<div class="form-row">
|
||||||
<p>查看图生视频任务卡片、在线预览与下载视频、配置数据范围授权。</p>
|
<div class="form-group" style="min-width: 160px">
|
||||||
|
<label>用户名</label>
|
||||||
|
<input v-model="filter.username" type="text" placeholder="模糊搜索" @keyup.enter="apply" />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-group" style="min-width: 176px">
|
||||||
|
<label>提交开始</label>
|
||||||
|
<input v-model="filter.dateRange[0]" type="datetime-local" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group" style="min-width: 176px">
|
||||||
|
<label>提交结束</label>
|
||||||
|
<input v-model="filter.dateRange[1]" type="datetime-local" />
|
||||||
|
</div>
|
||||||
|
<button class="btn" type="button" @click="apply">查询</button>
|
||||||
|
<button class="btn btn-secondary" type="button" @click="reset">重置</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel-box iv-panel">
|
||||||
|
<div class="iv-toolbar">
|
||||||
|
<div class="iv-toolbar-main">
|
||||||
|
<button v-if="session.isSuperAdmin" class="btn btn-secondary" type="button" @click="openPermission">权限配置</button>
|
||||||
|
<button class="btn iv-batch-btn" type="button" :disabled="selectionCount === 0 || downloading" @click="downloadBatch">
|
||||||
|
批量下载{{ selectionCount ? ` (${selectionCount})` : '' }}
|
||||||
|
</button>
|
||||||
|
<label class="iv-select-all">
|
||||||
|
<input type="checkbox" :checked="allSelected" @change="toggleSelectAll" />
|
||||||
|
全选当前页
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<span class="iv-summary">共 {{ totalTasks }} 个任务 · 本页 {{ currentVideoCount }} 个视频</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-card shadow="never" style="margin-bottom: 14px">
|
<div v-loading="loading" class="task-card-grid">
|
||||||
<div class="filter-grid">
|
<template v-if="tasks.length">
|
||||||
<div class="f-item">
|
<section v-for="task in tasks" :key="String(task.taskId)" class="iv-card">
|
||||||
<label>用户名（模糊搜索）</label>
|
<header class="iv-card-head">
|
||||||
<el-input v-model="filter.username" placeholder="输入用户名关键字" clearable @keyup.enter="apply" />
|
<input type="checkbox" :checked="cardSelected(task)" :disabled="!hasVideos(task)" @change="toggleCard(task)" />
|
||||||
</div>
|
<span class="iv-card-title">任务 {{ task.taskId }} · 视频 {{ task.videos.length }}</span>
|
||||||
<div class="f-item wide">
|
<span class="st-pill" :class="`is-${statusType(task.status)}`">{{ statusLabel(task.status) }}</span>
|
||||||
<label>提交时间</label>
|
|
||||||
<el-date-picker v-model="filter.dateRange" type="datetimerange" range-separator="至" start-placeholder="开始" end-placeholder="结束" value-format="YYYY-MM-DDTHH:mm" unlink-panels />
|
|
||||||
</div>
|
|
||||||
<div class="f-item btn-row">
|
|
||||||
<el-button type="primary" @click="apply">查询</el-button>
|
|
||||||
<el-button @click="reset">重置</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
<el-card shadow="never">
|
|
||||||
<div v-loading="loading" class="list-toolbar">
|
|
||||||
<div class="lt-buttons">
|
|
||||||
<el-checkbox :model-value="allSelected" @change="toggleSelectAll">全选当前页</el-checkbox>
|
|
||||||
<el-button :disabled="selectionCount === 0" :loading="downloading" @click="downloadBatch">
|
|
||||||
批量下载{{ selectionCount ? `(${selectionCount})` : '' }}
|
|
||||||
</el-button>
|
|
||||||
<el-button @click="openPermission">权限配置</el-button>
|
|
||||||
</div>
|
|
||||||
<span class="list-toolbar-summary">共 {{ totalTasks }} 个任务 · 本页 {{ currentVideoCount }} 个视频</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="tasks.length" class="task-card-grid">
|
|
||||||
<section v-for="task in tasks" :key="String(task.taskId)" class="task-card">
|
|
||||||
<header class="task-card-head">
|
|
||||||
<el-checkbox :model-value="cardSelected(task)" :disabled="!hasVideos(task)" @change="toggleCard(task)" />
|
|
||||||
<div class="task-card-title">
|
|
||||||
<span class="task-id">任务 {{ task.taskId }}</span>
|
|
||||||
</div>
|
|
||||||
<el-tag :type="statusType(task.status)" size="small">{{ statusLabel(task.status) }}</el-tag>
|
|
||||||
<el-button type="primary" size="small" @click="openDetail(task)">明细</el-button>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="task-card-info">
|
<div class="iv-card-info">
|
||||||
<div class="task-info-row"><label>用户名</label><span>{{ task.username || '-' }}</span></div>
|
<div class="iv-info-row"><label>用户名</label><span>{{ task.username || '-' }}</span></div>
|
||||||
<div class="task-info-row"><label>所属分组</label><span>{{ task.groupName || '-' }}</span></div>
|
<div class="iv-info-row"><label>所属分组</label><span>{{ task.groupName || '-' }}</span></div>
|
||||||
<div class="task-info-row"><label>任务模式</label><span>{{ task.mode || '-' }}</span></div>
|
<div class="iv-info-row"><label>任务模式</label><span>{{ task.mode || '-' }}</span></div>
|
||||||
<div class="task-info-row"><label>生成时间</label><span>{{ formatDateTime(imageVideoGeneratedAt(task)) }}</span></div>
|
<div class="iv-info-row"><label>生成时间</label><span>{{ formatDateTime(imageVideoGeneratedAt(task)) }}</span></div>
|
||||||
<div class="task-info-row">
|
<div class="iv-info-row">
|
||||||
<label>调试链接</label>
|
<label>调试链接</label>
|
||||||
<el-button v-if="task.debugUrl" text type="primary" size="small" @click="copyLink(task.debugUrl)">复制链接</el-button>
|
<button v-if="task.debugUrl" class="btn btn-sm" type="button" @click="copyLink(task.debugUrl)">复制链接</button>
|
||||||
<span v-else>-</span>
|
<span v-else>-</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="hasVideos(task)" class="video-list">
|
<div v-if="hasVideos(task)" class="iv-video-list">
|
||||||
<div v-for="(video, index) in task.videos" :key="`${task.taskId}-${index}`" class="video-row">
|
<div v-for="(video, index) in task.videos" :key="`${task.taskId}-${index}`" class="iv-video-row">
|
||||||
<el-checkbox :model-value="selection.has(`${task.taskId}:${index}`)" @change="toggleVideoKey(`${task.taskId}:${index}`)" />
|
<input type="checkbox" :checked="selection.has(`${task.taskId}:${index}`)" @change="toggleVideoKey(`${task.taskId}:${index}`)" />
|
||||||
<video v-if="video.displayUrl" class="video-player" :src="video.displayUrl" controls preload="metadata" />
|
<video v-if="video.displayUrl" class="iv-player" :src="video.displayUrl" controls preload="metadata"></video>
|
||||||
<span v-else class="video-no-preview">视频加载失败，可尝试下载</span>
|
<span v-else class="iv-no-preview">视频加载失败，可尝试下载</span>
|
||||||
<span class="video-index">第 {{ index + 1 }} 个</span>
|
<div class="iv-video-ops">
|
||||||
<el-button
|
<button
|
||||||
type="success"
|
class="btn btn-sm btn-secondary"
|
||||||
size="small"
|
type="button"
|
||||||
:disabled="!video.displayUrl"
|
:disabled="!video.displayUrl"
|
||||||
:loading="downloadingKey === `${task.taskId}:${index}`"
|
:aria-busy="downloadingKey === `${task.taskId}:${index}`"
|
||||||
@click="downloadVideo(task, index, video)"
|
@click="downloadVideo(task, index, video)"
|
||||||
>
|
>
|
||||||
下载
|
下载
|
||||||
</el-button>
|
</button>
|
||||||
<el-button v-if="video.displayUrl" text type="primary" size="small" @click="copyLink(video.displayUrl)">复制链接</el-button>
|
<button v-if="video.displayUrl" class="btn btn-sm" type="button" @click="copyLink(video.displayUrl)">复制链接</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="video-empty">{{ videoErrorText(task) }}</div>
|
</div>
|
||||||
|
<div v-else class="iv-empty-note">{{ videoErrorText(task) }}</div>
|
||||||
</section>
|
</section>
|
||||||
|
</template>
|
||||||
|
<div v-else-if="!loading" class="empty-tip">暂无符合条件的视频任务</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-empty v-else-if="!loading" description="暂无视频任务记录" />
|
<div class="pagination">
|
||||||
<div class="table-footer">
|
<span class="page-total">共 {{ totalTasks }} 条</span>
|
||||||
<el-pagination
|
<button type="button" :disabled="page <= 1" @click="changePage(page - 1)">上一页</button>
|
||||||
background
|
<span class="page-cur">第 {{ page }} / {{ totalPages }} 页</span>
|
||||||
layout="prev, pager, next, jumper"
|
<button type="button" :disabled="page >= totalPages" @click="changePage(page + 1)">下一页</button>
|
||||||
:total="totalTasks"
|
<span class="page-jump">
|
||||||
:page-size="pageSize"
|
跳至
|
||||||
:current-page="page"
|
<input v-model="jumpPage" type="text" inputmode="numeric" @keyup.enter="goJump" />
|
||||||
@current-change="(p: number) => { page = p; selection = new Set(); load() }"
|
页
|
||||||
/>
|
<button type="button" @click="goJump">跳转</button>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</section>
|
||||||
|
|
||||||
<el-drawer v-model="detailVisible" title="任务明细" size="720px">
|
<el-drawer v-model="detailVisible" title="任务明细" size="720px">
|
||||||
<div v-loading="detailLoading">
|
<div v-loading="detailLoading">
|
||||||
@@ -338,25 +381,15 @@ onMounted(load)
|
|||||||
<el-descriptions-item label="任务模式">{{ detail.mode || '—' }}</el-descriptions-item>
|
<el-descriptions-item label="任务模式">{{ detail.mode || '—' }}</el-descriptions-item>
|
||||||
<el-descriptions-item label="提交时间">{{ formatDateTime(detail.submittedAt) }}</el-descriptions-item>
|
<el-descriptions-item label="提交时间">{{ formatDateTime(detail.submittedAt) }}</el-descriptions-item>
|
||||||
<el-descriptions-item label="生成时间">{{ formatDateTime(imageVideoGeneratedAt(detail)) }}</el-descriptions-item>
|
<el-descriptions-item label="生成时间">{{ formatDateTime(imageVideoGeneratedAt(detail)) }}</el-descriptions-item>
|
||||||
<el-descriptions-item label="调试链接">
|
|
||||||
<el-button v-if="detail.debugUrl" text type="primary" size="small" @click="copyLink(detail.debugUrl)">复制链接</el-button>
|
|
||||||
<span v-else>—</span>
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="执行ID">{{ detail.cozeExecuteId || '—' }}</el-descriptions-item>
|
<el-descriptions-item label="执行ID">{{ detail.cozeExecuteId || '—' }}</el-descriptions-item>
|
||||||
<el-descriptions-item label="错误">{{ detail.errorMessage || '—' }}</el-descriptions-item>
|
<el-descriptions-item label="错误">{{ detail.errorMessage || '—' }}</el-descriptions-item>
|
||||||
</el-descriptions>
|
</el-descriptions>
|
||||||
<h4>请求</h4>
|
|
||||||
<pre class="json-block">{{ JSON.stringify(detail.request, null, 2) }}</pre>
|
|
||||||
<h4>提交响应</h4>
|
|
||||||
<pre class="json-block">{{ JSON.stringify(detail.submitResponse, null, 2) }}</pre>
|
|
||||||
<h4>结果</h4>
|
|
||||||
<pre class="json-block">{{ JSON.stringify(detail.result, null, 2) }}</pre>
|
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</el-drawer>
|
</el-drawer>
|
||||||
|
|
||||||
<el-dialog v-model="permissionVisible" title="视频任务数据范围授权" width="620px">
|
<el-dialog v-model="permissionVisible" title="视频任务记录权限配置" width="620px">
|
||||||
<p class="dim">勾选允许查看/操作视频任务的用户（仅数据范围）。当前已授权 {{ permissionGrantedCount }} 人。</p>
|
<p class="dim">勾选允许查看视频任务记录的用户（仅数据范围）。当前已授权 {{ permissionGrantedCount }} 人。</p>
|
||||||
<el-table :data="permissionItems" border size="small" max-height="420">
|
<el-table :data="permissionItems" border size="small" max-height="420">
|
||||||
<el-table-column prop="id" label="ID" min-width="80" />
|
<el-table-column prop="id" label="ID" min-width="80" />
|
||||||
<el-table-column prop="username" label="用户名" min-width="180" />
|
<el-table-column prop="username" label="用户名" min-width="180" />
|
||||||
@@ -375,34 +408,315 @@ onMounted(load)
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.page-heading { display: flex; justify-content: space-between; align-items: center; }
|
/* 像素复刻旧版 admin.html panel-image-video-tasks（蓝白末层）。 */
|
||||||
.actions { display: flex; align-items: center; gap: 12px; }
|
.iv-view {
|
||||||
.filter-grid { display: flex; flex-wrap: wrap; gap: 12px 18px; }
|
font-family: inherit;
|
||||||
.f-item { display: flex; flex-direction: column; gap: 6px; width: 220px; }
|
color: #24384d;
|
||||||
.f-item label { color: var(--el-text-color-secondary); font-size: 12px; }
|
display: flex;
|
||||||
.f-item.wide { width: 340px; }
|
flex-direction: column;
|
||||||
.f-item.btn-row { flex-direction: row; align-items: flex-end; gap: 8px; width: auto; margin-left: auto; flex: none; }
|
gap: 18px;
|
||||||
.video-summary-row { display: flex; justify-content: space-between; align-items: center; color: var(--el-text-color-secondary); font-size: 13px; }
|
}
|
||||||
.list-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--el-text-color-secondary); font-size: 13px; margin-bottom: 14px; }
|
.form-box,
|
||||||
.lt-buttons { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
|
.panel-box {
|
||||||
.list-toolbar-summary { white-space: nowrap; }
|
width: 100%;
|
||||||
.table-footer { display: flex; justify-content: flex-end; margin-top: 14px; }
|
min-width: 0;
|
||||||
.task-card-grid { display: flex; flex-direction: column; gap: 14px; }
|
padding: 20px 22px 24px;
|
||||||
.task-card { border: 1px solid var(--el-border-color); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28); overflow: hidden; }
|
border: 1px solid #d8e3ee;
|
||||||
.task-card-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--el-border-color-lighter); }
|
border-radius: 14px;
|
||||||
.task-card-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
|
background: linear-gradient(145deg, #ffffff, #f9fbfd);
|
||||||
.task-id { font-weight: 600; color: var(--el-text-color-primary); }
|
box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28);
|
||||||
.task-card-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; padding: 12px 16px; border-bottom: 1px dashed var(--el-border-color-lighter); }
|
}
|
||||||
.task-info-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; min-width: 0; }
|
h3 {
|
||||||
.task-info-row label { flex: none; color: var(--el-text-color-secondary); min-width: 60px; }
|
margin: 0 0 16px;
|
||||||
.task-info-row span { color: var(--el-text-color-regular); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
font-size: 15px;
|
||||||
.video-list { padding: 6px 16px; }
|
font-weight: 650;
|
||||||
.video-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--el-border-color-lighter); }
|
color: #24384d;
|
||||||
.video-row:last-child { border-bottom: 0; }
|
letter-spacing: 0.2px;
|
||||||
.video-player { width: 300px; max-height: 180px; border-radius: 8px; background: #0d1117; }
|
}
|
||||||
.video-no-preview { color: var(--el-text-color-secondary); font-size: 13px; }
|
.form-row {
|
||||||
.video-index { color: var(--el-text-color-secondary); font-size: 12.5px; }
|
display: flex;
|
||||||
.video-empty { padding: 18px 16px; color: var(--el-text-color-secondary); font-size: 13px; }
|
flex-wrap: wrap;
|
||||||
.dim { color: var(--el-text-color-secondary); font-size: 12px; }
|
align-items: flex-end;
|
||||||
.json-block { background: var(--el-fill-color-lighter); border-radius: 6px; padding: 10px; max-height: 320px; overflow: auto; font-size: 12px; }
|
gap: 14px 18px;
|
||||||
|
}
|
||||||
|
.form-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 7px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.form-group label {
|
||||||
|
color: #5b6f83;
|
||||||
|
font-size: 12.5px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.form-group input,
|
||||||
|
.form-group select {
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 42px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: 1px solid #cbd9e6;
|
||||||
|
border-radius: 9px;
|
||||||
|
background: #f8fbfd;
|
||||||
|
color: #24384d;
|
||||||
|
font-size: 13.5px;
|
||||||
|
font-family: inherit;
|
||||||
|
color-scheme: light;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
|
||||||
|
}
|
||||||
|
.form-group input:hover,
|
||||||
|
.form-group select:hover {
|
||||||
|
border-color: #9fb7cd;
|
||||||
|
}
|
||||||
|
.form-group input:focus,
|
||||||
|
.form-group select:focus {
|
||||||
|
background: #ffffff;
|
||||||
|
border-color: #5f85ad;
|
||||||
|
box-shadow: 0 0 0 3px rgba(95, 133, 173, 0.16);
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
min-height: 42px;
|
||||||
|
padding: 9px 18px;
|
||||||
|
border: 1px solid #4f78a5;
|
||||||
|
border-radius: 9px;
|
||||||
|
background: linear-gradient(135deg, #5f85ad, #4f78a5);
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 13.5px;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 8px 18px -14px rgba(79, 120, 165, 0.72);
|
||||||
|
transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
|
||||||
|
}
|
||||||
|
.btn:hover:not(:disabled) {
|
||||||
|
background: linear-gradient(135deg, #7094ba, #5d83ac);
|
||||||
|
box-shadow: 0 11px 22px -14px rgba(79, 120, 165, 0.8);
|
||||||
|
}
|
||||||
|
.btn:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.55;
|
||||||
|
}
|
||||||
|
.btn-secondary {
|
||||||
|
background: #ffffff;
|
||||||
|
color: #5b6f83;
|
||||||
|
border-color: #c7d7e5;
|
||||||
|
}
|
||||||
|
.btn-secondary:hover:not(:disabled) {
|
||||||
|
color: #2f5d8b;
|
||||||
|
border-color: #95b1cb;
|
||||||
|
background: #edf5fb;
|
||||||
|
}
|
||||||
|
.btn-sm {
|
||||||
|
min-height: 36px;
|
||||||
|
padding: 7px 12px;
|
||||||
|
}
|
||||||
|
.iv-toolbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
.iv-toolbar-main {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 14px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.iv-select-all {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 7px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #5b6f83;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.iv-summary {
|
||||||
|
color: #5b6f83;
|
||||||
|
font-size: 13px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.task-card-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
.iv-card {
|
||||||
|
border: 1px solid #d8e3ee;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.iv-card-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-bottom: 1px solid #e6edf4;
|
||||||
|
}
|
||||||
|
.iv-card-title {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #24384d;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.iv-card-info {
|
||||||
|
padding: 8px 16px 0;
|
||||||
|
}
|
||||||
|
.iv-info-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 4px 0;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.iv-info-row label {
|
||||||
|
flex: none;
|
||||||
|
width: 64px;
|
||||||
|
color: #8293a5;
|
||||||
|
}
|
||||||
|
.iv-info-row span {
|
||||||
|
color: #40586e;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.iv-video-list {
|
||||||
|
padding: 8px 16px 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.iv-video-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.iv-player {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
max-height: 240px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #0f1722;
|
||||||
|
}
|
||||||
|
.iv-no-preview {
|
||||||
|
flex: 1;
|
||||||
|
padding: 18px 12px;
|
||||||
|
text-align: center;
|
||||||
|
color: #8293a5;
|
||||||
|
font-size: 12.5px;
|
||||||
|
border: 1px dashed #d8e3ee;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.iv-video-ops {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
.iv-empty-note {
|
||||||
|
padding: 16px;
|
||||||
|
color: #8293a5;
|
||||||
|
font-size: 12.5px;
|
||||||
|
}
|
||||||
|
.st-pill {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 2px 10px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.7;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.st-pill.is-success {
|
||||||
|
color: #3d7158;
|
||||||
|
background: #e8f2eb;
|
||||||
|
border-color: #bdd7c5;
|
||||||
|
}
|
||||||
|
.st-pill.is-failed {
|
||||||
|
color: #91474f;
|
||||||
|
background: #f8ebeb;
|
||||||
|
border-color: #e4c2c5;
|
||||||
|
}
|
||||||
|
.st-pill.is-cancelled {
|
||||||
|
color: #5b6f83;
|
||||||
|
background: #f1f6fa;
|
||||||
|
border-color: #d6e2ec;
|
||||||
|
}
|
||||||
|
.st-pill.is-pending {
|
||||||
|
color: #8a6d3b;
|
||||||
|
background: #fbf4ea;
|
||||||
|
border-color: #e7d3ae;
|
||||||
|
}
|
||||||
|
.st-pill.is-running {
|
||||||
|
color: #8a6d3b;
|
||||||
|
background: #fbf4ea;
|
||||||
|
border-color: #e7d3ae;
|
||||||
|
}
|
||||||
|
.empty-tip {
|
||||||
|
padding: 44px 24px;
|
||||||
|
text-align: center;
|
||||||
|
color: #8293a5;
|
||||||
|
font-size: 13.5px;
|
||||||
|
}
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 18px;
|
||||||
|
color: #5b6f83;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.pagination button {
|
||||||
|
min-height: 30px;
|
||||||
|
padding: 4px 12px;
|
||||||
|
border: 1px solid #c7d7e5;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #ffffff;
|
||||||
|
color: #5b6f83;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.pagination button:hover:not(:disabled) {
|
||||||
|
background: #edf5fb;
|
||||||
|
border-color: #95b1cb;
|
||||||
|
color: #2f5d8b;
|
||||||
|
}
|
||||||
|
.pagination button:disabled {
|
||||||
|
background: #eef3f7;
|
||||||
|
color: #9baaba;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.page-total {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
.page-jump {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
.page-jump input {
|
||||||
|
width: 56px;
|
||||||
|
min-height: 30px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border: 1px solid #cbd9e6;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #f8fbfd;
|
||||||
|
color: #24384d;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
.dim {
|
||||||
|
color: #8293a5;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
@media (max-width: 1100px) {
|
||||||
|
.task-card-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { formatDateTime } from '@/utils/datetime'
|
import { formatDateTime } from '@/utils/datetime'
|
||||||
/** 店铺数据任务/记录页：每条任务一张卡片（店铺名/任务号/状态/分组/最新/国家/文件 + 下载文件/删除）
|
/** 店铺数据记录页 · 像素复刻旧版 admin.html panel-shop-data-crawl-tasks（自绘：form-box 筛选[h4 筛选条件] + panel-box toolbar[全选/批量下载/权限配置/汇总] + 每店卡片网格 + 旧式分页(店铺级+卡片级 9/页)）。
|
||||||
* + 筛选 + 批量下载 + 数据范围授权（对齐 admin.js renderShopDataRecordTable）。 */
|
* script 逻辑沿用现有 Vue 实现（批量打包/删除结果文件[保留]/权限授权）。 */
|
||||||
import { computed, onMounted, reactive, ref } from 'vue'
|
import { computed, onMounted, reactive, ref } from 'vue'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { asinCountryLabel } from '../asin/asin-country.ts'
|
import { asinCountryLabel } from '../asin/asin-country.ts'
|
||||||
import { createShopDataFilter, type ShopDataFilter } from './shop-data-filter.ts'
|
import { createShopDataFilter, type ShopDataFilter } from './shop-data-filter.ts'
|
||||||
import type { ShopDataResultRow, ShopDataTaskGroup } from './shop-data-model.ts'
|
import type { ShopDataResultRow, ShopDataTaskGroup } from './shop-data-model.ts'
|
||||||
@@ -24,15 +24,21 @@ import {
|
|||||||
createShopDataSelection,
|
createShopDataSelection,
|
||||||
toggleShopDataSelection,
|
toggleShopDataSelection,
|
||||||
} from './shop-data-selection.ts'
|
} from './shop-data-selection.ts'
|
||||||
|
import { useAdminSessionStore } from '@/stores/admin-session'
|
||||||
|
|
||||||
|
const session = useAdminSessionStore()
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const groups = ref<ShopDataTaskGroup[]>([])
|
const groups = ref<ShopDataTaskGroup[]>([])
|
||||||
const totalShops = ref(0)
|
const totalShops = ref(0)
|
||||||
const page = ref(1)
|
const page = ref(1)
|
||||||
const pageSize = 20
|
const pageSize = 20
|
||||||
|
const pageJump = ref('')
|
||||||
|
const totalPages = computed(() => Math.max(1, Math.ceil(totalShops.value / pageSize)))
|
||||||
// 卡片宫格分页：一行 3 个、一页 9 张卡片（在店铺分页的结果文件内翻页）。
|
// 卡片宫格分页：一行 3 个、一页 9 张卡片（在店铺分页的结果文件内翻页）。
|
||||||
const cardPage = ref(1)
|
const cardPage = ref(1)
|
||||||
const cardPageSize = 9
|
const cardPageSize = 9
|
||||||
|
const cardJump = ref('')
|
||||||
|
const cardTotalPages = computed(() => Math.max(1, Math.ceil(allResultRows.value.length / cardPageSize)))
|
||||||
|
|
||||||
const filter = reactive<ShopDataFilter & { dateRange: string[] }>({ ...createShopDataFilter(), dateRange: [] })
|
const filter = reactive<ShopDataFilter & { dateRange: string[] }>({ ...createShopDataFilter(), dateRange: [] })
|
||||||
const selection = ref<Set<string>>(new Set())
|
const selection = ref<Set<string>>(new Set())
|
||||||
@@ -44,16 +50,32 @@ const permissionSaving = ref(false)
|
|||||||
const busyKey = ref('')
|
const busyKey = ref('')
|
||||||
const deletingKey = ref('')
|
const deletingKey = ref('')
|
||||||
|
|
||||||
|
/** 旧版状态 label 映射（对齐 admin.js 状态徽章）。 */
|
||||||
function statusLabel(status: string): string {
|
function statusLabel(status: string): string {
|
||||||
const map: Record<string, string> = { PENDING: '排队中', RUNNING: '进行中', SUCCESS: '成功', FAILED: '失败', CANCELLED: '已取消', UNKNOWN: '未知' }
|
const map: Record<string, string> = {
|
||||||
return map[status] || status
|
PENDING: '待执行',
|
||||||
|
WAITING: '排队中',
|
||||||
|
RUNNING: '执行中',
|
||||||
|
PROCESSING: '处理中',
|
||||||
|
SUCCESS: '已完成',
|
||||||
|
COMPLETED: '已完成',
|
||||||
|
FAILED: '失败',
|
||||||
|
ERROR: '失败',
|
||||||
|
CANCELLED: '已取消',
|
||||||
|
UNKNOWN: '未知',
|
||||||
|
}
|
||||||
|
const key = (status || '').toUpperCase()
|
||||||
|
if (map[key]) return map[key]
|
||||||
|
return key || '未知'
|
||||||
}
|
}
|
||||||
|
|
||||||
function statusType(status: string): 'info' | 'warning' | 'success' | 'danger' {
|
function statusType(status: string): 'pending' | 'running' | 'success' | 'failed' | 'cancelled' {
|
||||||
if (status === 'SUCCESS') return 'success'
|
const key = (status || '').toUpperCase()
|
||||||
if (status === 'RUNNING') return 'warning'
|
if (key === 'SUCCESS' || key === 'COMPLETED') return 'success'
|
||||||
if (status === 'FAILED') return 'danger'
|
if (key === 'FAILED' || key === 'ERROR') return 'failed'
|
||||||
return 'info'
|
if (key === 'CANCELLED') return 'cancelled'
|
||||||
|
if (key === 'PENDING' || key === 'WAITING') return 'pending'
|
||||||
|
return 'running'
|
||||||
}
|
}
|
||||||
|
|
||||||
function toFilter(): ShopDataFilter {
|
function toFilter(): ShopDataFilter {
|
||||||
@@ -92,6 +114,23 @@ function reset() {
|
|||||||
void load()
|
void load()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function changePage(next: number) {
|
||||||
|
if (next < 1 || next > totalPages.value) return
|
||||||
|
page.value = next
|
||||||
|
cardPage.value = 1
|
||||||
|
selection.value = new Set()
|
||||||
|
void load()
|
||||||
|
}
|
||||||
|
|
||||||
|
function goPageJump() {
|
||||||
|
const n = Number.parseInt(pageJump.value, 10)
|
||||||
|
if (Number.isNaN(n)) {
|
||||||
|
ElMessage.warning('请输入页码')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
changePage(Math.min(Math.max(n, 1), totalPages.value))
|
||||||
|
}
|
||||||
|
|
||||||
const allResultRows = computed(() => groups.value.flatMap((group) => group.results))
|
const allResultRows = computed(() => groups.value.flatMap((group) => group.results))
|
||||||
const pagedResultRows = computed(() =>
|
const pagedResultRows = computed(() =>
|
||||||
allResultRows.value.slice((cardPage.value - 1) * cardPageSize, cardPage.value * cardPageSize),
|
allResultRows.value.slice((cardPage.value - 1) * cardPageSize, cardPage.value * cardPageSize),
|
||||||
@@ -102,6 +141,15 @@ function changeCardPage(p: number) {
|
|||||||
cardPage.value = p
|
cardPage.value = p
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function goCardJump() {
|
||||||
|
const n = Number.parseInt(cardJump.value, 10)
|
||||||
|
if (Number.isNaN(n)) {
|
||||||
|
ElMessage.warning('请输入页码')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
changeCardPage(Math.min(Math.max(n, 1), cardTotalPages.value))
|
||||||
|
}
|
||||||
|
|
||||||
function resultFileCount(): number {
|
function resultFileCount(): number {
|
||||||
return groups.value.reduce((sum, group) => sum + group.results.length, 0)
|
return groups.value.reduce((sum, group) => sum + group.results.length, 0)
|
||||||
}
|
}
|
||||||
@@ -127,6 +175,16 @@ function rowSelected(row: ShopDataResultRow): boolean {
|
|||||||
return selection.value.has(row.resultId)
|
return selection.value.has(row.resultId)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function selectAllChecked(): boolean {
|
||||||
|
const rows = selectableRows()
|
||||||
|
return rows.length > 0 && rows.every((row) => selection.value.has(row.resultId))
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectAllIndeterminate(): boolean {
|
||||||
|
const rows = selectableRows()
|
||||||
|
return selectionCount.value > 0 && selectionCount.value < rows.length
|
||||||
|
}
|
||||||
|
|
||||||
async function downloadRow(row: ShopDataResultRow) {
|
async function downloadRow(row: ShopDataResultRow) {
|
||||||
if (!row.fileReady) {
|
if (!row.fileReady) {
|
||||||
ElMessage.warning('文件未就绪，无法下载')
|
ElMessage.warning('文件未就绪，无法下载')
|
||||||
@@ -164,15 +222,8 @@ async function downloadBatch() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function removeRowByRow(row: ShopDataResultRow) {
|
async function removeRowByRow(row: ShopDataResultRow) {
|
||||||
try {
|
// 对齐旧版：原生 confirm。
|
||||||
await ElMessageBox.confirm(`确认删除店铺“${row.shopName}”的任务 ${row.taskNo || row.resultId} 及结果文件？`, '删除前确认', {
|
if (!window.confirm(`确认删除店铺“${row.shopName}”的任务 ${row.taskNo || row.resultId} 及结果文件？`)) return
|
||||||
confirmButtonText: '确认删除',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning',
|
|
||||||
})
|
|
||||||
} catch {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
deletingKey.value = row.resultId
|
deletingKey.value = row.resultId
|
||||||
try {
|
try {
|
||||||
await deleteShopDataResultHistory(row.resultId)
|
await deleteShopDataResultHistory(row.resultId)
|
||||||
@@ -227,142 +278,134 @@ onMounted(load)
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page-stack">
|
<div class="sd-view">
|
||||||
<div class="page-heading">
|
<section class="form-box">
|
||||||
<div>
|
<h3>店铺数据记录</h3>
|
||||||
<h2>店铺数据记录</h2>
|
<h4 class="sd-filter-title">筛选条件</h4>
|
||||||
<p>按店铺查看数据抓取结果文件，支持筛选、下载、删除与数据范围授权。</p>
|
<div class="form-row">
|
||||||
|
<div class="form-group" style="min-width: 160px">
|
||||||
|
<label>店铺</label>
|
||||||
|
<input v-model="filter.shopName" type="text" placeholder="模糊搜索店铺名" @keyup.enter="apply" />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-group" style="min-width: 150px">
|
||||||
|
<label>分组</label>
|
||||||
|
<input v-model="filter.groupName" type="text" placeholder="模糊搜索分组名" @keyup.enter="apply" />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-group" style="min-width: 130px">
|
||||||
<el-card shadow="never" style="margin-bottom: 14px">
|
|
||||||
<div class="filter-grid">
|
|
||||||
<div class="f-item">
|
|
||||||
<label>店铺（模糊搜索）</label>
|
|
||||||
<el-input v-model="filter.shopName" placeholder="输入店铺关键字" clearable @keyup.enter="apply" />
|
|
||||||
</div>
|
|
||||||
<div class="f-item">
|
|
||||||
<label>分组（模糊搜索）</label>
|
|
||||||
<el-input v-model="filter.groupName" placeholder="输入分组关键字" clearable @keyup.enter="apply" />
|
|
||||||
</div>
|
|
||||||
<div class="f-item">
|
|
||||||
<label>国家</label>
|
<label>国家</label>
|
||||||
<el-select v-model="filter.country" placeholder="全部" clearable>
|
<select v-model="filter.country">
|
||||||
<el-option v-for="code in ['UK', 'DE', 'FR', 'ES', 'IT']" :key="code" :label="asinCountryLabel(code)" :value="code" />
|
<option value="">全部</option>
|
||||||
</el-select>
|
<option v-for="code in ['UK', 'DE', 'FR', 'ES', 'IT']" :key="code" :value="code">{{ asinCountryLabel(code) }}</option>
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="f-item wide">
|
<div class="form-group" style="min-width: 176px">
|
||||||
<label>创建时间</label>
|
<label>创建开始</label>
|
||||||
<el-date-picker v-model="filter.dateRange" type="datetimerange" range-separator="至" start-placeholder="开始" end-placeholder="结束" value-format="YYYY-MM-DDTHH:mm" unlink-panels />
|
<input v-model="filter.dateRange[0]" type="datetime-local" />
|
||||||
</div>
|
</div>
|
||||||
<div class="f-item btn-row">
|
<div class="form-group" style="min-width: 176px">
|
||||||
<el-button type="primary" @click="apply">查询</el-button>
|
<label>创建结束</label>
|
||||||
<el-button @click="reset">重置</el-button>
|
<input v-model="filter.dateRange[1]" type="datetime-local" />
|
||||||
</div>
|
</div>
|
||||||
|
<button class="btn" type="button" @click="apply">查询</button>
|
||||||
|
<button class="btn btn-secondary" type="button" @click="reset">重置</button>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</section>
|
||||||
|
|
||||||
<el-card shadow="never">
|
<section class="panel-box">
|
||||||
<div v-loading="loading" class="list-toolbar">
|
<div class="sd-toolbar">
|
||||||
<div class="lt-buttons">
|
<div class="sd-toolbar-main">
|
||||||
<el-checkbox
|
<label class="sd-select-all">
|
||||||
:model-value="selectableRows().length > 0 && selectableRows().every((row) => rowSelected(row))"
|
<input type="checkbox" :checked="selectAllChecked()" :indeterminate="selectAllIndeterminate()" @change="toggleSelectAllReady" />
|
||||||
:indeterminate="selectionCount > 0 && selectionCount < selectableRows().length"
|
|
||||||
@change="toggleSelectAllReady"
|
|
||||||
>
|
|
||||||
全选可下载
|
全选可下载
|
||||||
</el-checkbox>
|
</label>
|
||||||
<el-button :disabled="selectionCount === 0" :loading="busyKey === 'batch'" @click="downloadBatch">
|
<button class="btn" type="button" :disabled="selectionCount === 0 || busyKey === 'batch'" @click="downloadBatch">
|
||||||
批量下载{{ selectionCount ? `(${selectionCount})` : '' }}
|
批量下载{{ selectionCount ? `(${selectionCount})` : '' }}
|
||||||
</el-button>
|
</button>
|
||||||
<el-button @click="openPermission">权限配置</el-button>
|
<button v-if="session.isSuperAdmin" class="btn btn-secondary" type="button" @click="openPermission">权限配置</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="lt-side">
|
<div class="sd-toolbar-side">
|
||||||
<span class="list-toolbar-summary">共 {{ totalShops }} 家店铺 · 本页 {{ resultFileCount() }} 个结果文件</span>
|
<span class="sd-summary">共 {{ totalShops }} 家店铺 · 本页 {{ resultFileCount() }} 个结果文件</span>
|
||||||
<el-pagination
|
<span v-if="totalShops > pageSize" class="sd-shop-pager">
|
||||||
v-if="totalShops > pageSize"
|
<button type="button" :disabled="page <= 1" @click="changePage(page - 1)">上一页</button>
|
||||||
class="shop-page-pager"
|
<span class="page-cur">第 {{ page }} / {{ totalPages }} 页</span>
|
||||||
small
|
<button type="button" :disabled="page >= totalPages" @click="changePage(page + 1)">下一页</button>
|
||||||
background
|
<input v-model="pageJump" type="text" inputmode="numeric" placeholder="页" @keyup.enter="goPageJump" />
|
||||||
layout="prev, pager, next"
|
<button type="button" class="jump-btn" @click="goPageJump">跳转</button>
|
||||||
:total="totalShops"
|
</span>
|
||||||
:page-size="pageSize"
|
|
||||||
:current-page="page"
|
|
||||||
@current-change="(p: number) => { page = p; cardPage = 1; selection = new Set(); load() }"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div v-loading="loading" class="shop-card-grid">
|
||||||
<template v-if="allResultRows.length">
|
<template v-if="allResultRows.length">
|
||||||
<div class="shop-card-grid">
|
<article
|
||||||
<article v-for="row in pagedResultRows" :key="row.resultId || `${row.taskNo}-${row.filename}`" class="shop-card">
|
v-for="row in pagedResultRows"
|
||||||
<header class="shop-card-head">
|
:key="row.resultId || `${row.taskNo}-${row.filename}`"
|
||||||
<span class="shop-name" :title="row.shopName || '-'">{{ row.shopName || '-' }}</span>
|
class="sd-card"
|
||||||
|
>
|
||||||
|
<header class="sd-card-head">
|
||||||
|
<span class="sd-shop-name" :title="row.shopName || '-'">{{ row.shopName || '-' }}</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="shop-card-select-row">
|
<div class="sd-card-select-row">
|
||||||
<el-checkbox
|
<input type="checkbox" :checked="rowSelected(row)" :disabled="!isUsableShopDataResult(row)" @change="toggleRow(row)" />
|
||||||
:model-value="rowSelected(row)"
|
|
||||||
:disabled="!isUsableShopDataResult(row)"
|
|
||||||
@change="toggleRow(row)"
|
|
||||||
/>
|
|
||||||
<span class="shop-card-task-no">任务 {{ row.taskNo || row.resultId }}</span>
|
<span class="shop-card-task-no">任务 {{ row.taskNo || row.resultId }}</span>
|
||||||
<el-tag :type="statusType(row.status)" size="small">{{ statusLabel(row.status) }}</el-tag>
|
<span class="st-pill" :class="`is-${statusType(row.status)}`">{{ statusLabel(row.status) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="shop-card-row">
|
<div class="sd-card-row" v-if="row.groupName">
|
||||||
<span class="shop-card-label">分组</span>
|
<span class="sd-card-label">分组</span>
|
||||||
<span class="shop-card-value">{{ row.groupName || '-' }}</span>
|
<span class="sd-card-value">{{ row.groupName }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="shop-card-row">
|
<div class="sd-card-row">
|
||||||
<span class="shop-card-label">最新</span>
|
<span class="sd-card-label">最新</span>
|
||||||
<span class="shop-card-value">{{ formatDateTime(row.updatedAt || row.createdAt) || '-' }}</span>
|
<span class="sd-card-value">{{ formatDateTime(row.updatedAt || row.createdAt) || '-' }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="shop-card-row">
|
<div class="sd-card-row">
|
||||||
<span class="shop-card-label">国家</span>
|
<span class="sd-card-label">国家</span>
|
||||||
<span class="shop-card-value">
|
<span class="sd-card-value">
|
||||||
<span v-for="code in row.countryCodes" :key="code" class="country-chip">{{ asinCountryLabel(code) }}</span>
|
<span v-for="code in row.countryCodes" :key="code" class="country-chip">{{ asinCountryLabel(code) }}</span>
|
||||||
<span v-if="!row.countryCodes.length" class="dim">-</span>
|
<span v-if="!row.countryCodes.length" class="dim">-</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="shop-card-row">
|
<div class="sd-card-row">
|
||||||
<span class="shop-card-label">文件</span>
|
<span class="sd-card-label">文件</span>
|
||||||
<span class="shop-card-value shop-card-file" :title="row.filename">{{ row.filename || '-' }}</span>
|
<span class="sd-card-value sd-card-file" :title="row.filename">{{ row.filename || '-' }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="shop-card-actions">
|
<div class="sd-card-actions">
|
||||||
<el-button
|
<button
|
||||||
type="success"
|
class="btn btn-sm btn-secondary"
|
||||||
size="small"
|
type="button"
|
||||||
:loading="busyKey === row.resultId"
|
:disabled="!isUsableShopDataResult(row) || busyKey === row.resultId"
|
||||||
:disabled="!isUsableShopDataResult(row)"
|
|
||||||
@click="downloadRow(row)"
|
@click="downloadRow(row)"
|
||||||
>
|
>
|
||||||
下载文件
|
{{ busyKey === row.resultId ? '下载中...' : '下载文件' }}
|
||||||
</el-button>
|
</button>
|
||||||
<el-button
|
<button
|
||||||
v-if="isTerminalStatus(row.status) && !!row.resultId"
|
v-if="isTerminalStatus(row.status) && !!row.resultId"
|
||||||
type="danger"
|
class="btn btn-sm btn-danger"
|
||||||
size="small"
|
type="button"
|
||||||
:loading="deletingKey === row.resultId"
|
:disabled="deletingKey === row.resultId"
|
||||||
@click="removeRowByRow(row)"
|
@click="removeRowByRow(row)"
|
||||||
>
|
>
|
||||||
删除
|
{{ deletingKey === row.resultId ? '删除中...' : '删除' }}
|
||||||
</el-button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
|
||||||
<div v-if="allResultRows.length > cardPageSize" class="table-footer">
|
|
||||||
<el-pagination
|
|
||||||
background
|
|
||||||
layout="prev, pager, next, jumper"
|
|
||||||
:total="allResultRows.length"
|
|
||||||
:page-size="cardPageSize"
|
|
||||||
:current-page="cardPage"
|
|
||||||
@current-change="changeCardPage"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
<div v-else-if="!loading" class="empty-tip">暂无符合条件的店铺数据记录</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<el-empty v-else-if="!loading" description="暂无符合条件的店铺数据记录" />
|
<div v-if="allResultRows.length > cardPageSize" class="pagination">
|
||||||
</el-card>
|
<span class="page-total">本页数据 · 共 {{ allResultRows.length }} 个结果文件</span>
|
||||||
|
<button type="button" :disabled="cardPage <= 1" @click="changeCardPage(cardPage - 1)">上一页</button>
|
||||||
|
<span class="page-cur">第 {{ cardPage }} / {{ cardTotalPages }} 页</span>
|
||||||
|
<button type="button" :disabled="cardPage >= cardTotalPages" @click="changeCardPage(cardPage + 1)">下一页</button>
|
||||||
|
<span class="page-jump">
|
||||||
|
跳至
|
||||||
|
<input v-model="cardJump" type="text" inputmode="numeric" @keyup.enter="goCardJump" />
|
||||||
|
页
|
||||||
|
<button type="button" @click="goCardJump">跳转</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<el-dialog v-model="permissionVisible" title="店铺数据记录数据范围授权" width="620px">
|
<el-dialog v-model="permissionVisible" title="店铺数据记录数据范围授权" width="620px">
|
||||||
<p class="dim">勾选允许查看/操作店铺数据记录的用户（仅数据范围）。当前已授权 {{ grantedCount }} 人。</p>
|
<p class="dim">勾选允许查看/操作店铺数据记录的用户（仅数据范围）。当前已授权 {{ grantedCount }} 人。</p>
|
||||||
@@ -384,30 +427,343 @@ onMounted(load)
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.page-heading { display: flex; justify-content: space-between; align-items: center; }
|
/* 像素复刻旧版 admin.html panel-shop-data-crawl-tasks（蓝白末层）。 */
|
||||||
.actions { display: flex; align-items: center; gap: 12px; }
|
.sd-view {
|
||||||
.filter-grid { display: flex; flex-wrap: wrap; gap: 12px 18px; }
|
font-family: inherit;
|
||||||
.f-item { display: flex; flex-direction: column; gap: 6px; width: 220px; }
|
color: #24384d;
|
||||||
.f-item label { color: var(--el-text-color-secondary); font-size: 12px; }
|
display: flex;
|
||||||
.f-item.wide { width: 340px; }
|
flex-direction: column;
|
||||||
.f-item.btn-row { flex-direction: row; align-items: flex-end; gap: 8px; width: auto; }
|
gap: 18px;
|
||||||
.shop-summary-row { display: flex; justify-content: space-between; align-items: center; color: var(--el-text-color-secondary); font-size: 13px; }
|
}
|
||||||
.list-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--el-text-color-secondary); font-size: 13px; margin-bottom: 14px; }
|
.form-box,
|
||||||
.lt-buttons { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
|
.panel-box {
|
||||||
.list-toolbar-summary { white-space: nowrap; }
|
width: 100%;
|
||||||
.lt-side { display: inline-flex; align-items: center; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
|
min-width: 0;
|
||||||
.table-footer { display: flex; justify-content: flex-end; margin-top: 14px; }
|
padding: 20px 22px 24px;
|
||||||
.shop-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
|
border: 1px solid #d8e3ee;
|
||||||
.shop-card { border: 1px solid var(--el-border-color); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28); overflow: hidden; }
|
border-radius: 14px;
|
||||||
.shop-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--el-border-color-lighter); }
|
background: linear-gradient(145deg, #ffffff, #f9fbfd);
|
||||||
.shop-name { font-weight: 600; color: var(--el-text-color-primary); }
|
box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28);
|
||||||
.shop-card-select-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px 0; }
|
}
|
||||||
.shop-card-task-no { font-weight: 600; font-size: 13px; color: var(--el-text-color-primary); }
|
h3 {
|
||||||
.shop-card-row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 16px; font-size: 13px; }
|
margin: 0 0 14px;
|
||||||
.shop-card-label { flex: none; width: 52px; color: var(--el-text-color-secondary); }
|
font-size: 15px;
|
||||||
.shop-card-value { color: var(--el-text-color-regular); min-width: 0; }
|
font-weight: 650;
|
||||||
.shop-card-file { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
color: #24384d;
|
||||||
.shop-card-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 16px 14px; }
|
letter-spacing: 0.2px;
|
||||||
.country-chip { padding: 1px 8px; margin-right: 4px; border-radius: 999px; background: var(--el-fill-color-light); color: var(--el-text-color-regular); font-size: 12px; }
|
}
|
||||||
.dim { color: var(--el-text-color-secondary); font-size: 12px; }
|
.sd-filter-title {
|
||||||
|
margin: 0 0 14px;
|
||||||
|
font-size: 13.5px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #40586e;
|
||||||
|
}
|
||||||
|
.form-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 14px 18px;
|
||||||
|
}
|
||||||
|
.form-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 7px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.form-group label {
|
||||||
|
color: #5b6f83;
|
||||||
|
font-size: 12.5px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.form-group input,
|
||||||
|
.form-group select {
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 42px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: 1px solid #cbd9e6;
|
||||||
|
border-radius: 9px;
|
||||||
|
background: #f8fbfd;
|
||||||
|
color: #24384d;
|
||||||
|
font-size: 13.5px;
|
||||||
|
font-family: inherit;
|
||||||
|
color-scheme: light;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
|
||||||
|
}
|
||||||
|
.form-group input:hover,
|
||||||
|
.form-group select:hover {
|
||||||
|
border-color: #9fb7cd;
|
||||||
|
}
|
||||||
|
.form-group input:focus,
|
||||||
|
.form-group select:focus {
|
||||||
|
background: #ffffff;
|
||||||
|
border-color: #5f85ad;
|
||||||
|
box-shadow: 0 0 0 3px rgba(95, 133, 173, 0.16);
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
min-height: 42px;
|
||||||
|
padding: 9px 18px;
|
||||||
|
border: 1px solid #4f78a5;
|
||||||
|
border-radius: 9px;
|
||||||
|
background: linear-gradient(135deg, #5f85ad, #4f78a5);
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 13.5px;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 8px 18px -14px rgba(79, 120, 165, 0.72);
|
||||||
|
transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
|
||||||
|
}
|
||||||
|
.btn:hover:not(:disabled) {
|
||||||
|
background: linear-gradient(135deg, #7094ba, #5d83ac);
|
||||||
|
box-shadow: 0 11px 22px -14px rgba(79, 120, 165, 0.8);
|
||||||
|
}
|
||||||
|
.btn:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.55;
|
||||||
|
}
|
||||||
|
.btn-secondary {
|
||||||
|
background: #ffffff;
|
||||||
|
color: #5b6f83;
|
||||||
|
border-color: #c7d7e5;
|
||||||
|
}
|
||||||
|
.btn-secondary:hover:not(:disabled) {
|
||||||
|
color: #2f5d8b;
|
||||||
|
border-color: #95b1cb;
|
||||||
|
background: #edf5fb;
|
||||||
|
}
|
||||||
|
.btn-danger {
|
||||||
|
background: linear-gradient(135deg, #c06d77, #b35f6a);
|
||||||
|
border-color: #b35f6a;
|
||||||
|
}
|
||||||
|
.btn-danger:hover:not(:disabled) {
|
||||||
|
background: linear-gradient(135deg, #cb7c84, #b96570);
|
||||||
|
}
|
||||||
|
.btn-sm {
|
||||||
|
min-height: 36px;
|
||||||
|
padding: 7px 12px;
|
||||||
|
}
|
||||||
|
.sd-toolbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
.sd-toolbar-main {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 14px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.sd-toolbar-side {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.sd-select-all {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 7px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #5b6f83;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.sd-summary {
|
||||||
|
color: #5b6f83;
|
||||||
|
font-size: 13px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.sd-shop-pager {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #5b6f83;
|
||||||
|
}
|
||||||
|
.sd-shop-pager button,
|
||||||
|
.pagination button,
|
||||||
|
.jump-btn {
|
||||||
|
min-height: 30px;
|
||||||
|
padding: 4px 12px;
|
||||||
|
border: 1px solid #c7d7e5;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #ffffff;
|
||||||
|
color: #5b6f83;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.sd-shop-pager button:hover:not(:disabled),
|
||||||
|
.pagination button:hover:not(:disabled) {
|
||||||
|
background: #edf5fb;
|
||||||
|
border-color: #95b1cb;
|
||||||
|
color: #2f5d8b;
|
||||||
|
}
|
||||||
|
.sd-shop-pager button:disabled,
|
||||||
|
.pagination button:disabled {
|
||||||
|
background: #eef3f7;
|
||||||
|
color: #9baaba;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.sd-shop-pager input,
|
||||||
|
.page-jump input {
|
||||||
|
width: 52px;
|
||||||
|
min-height: 30px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border: 1px solid #cbd9e6;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #f8fbfd;
|
||||||
|
color: #24384d;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
.shop-card-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
.sd-card {
|
||||||
|
border: 1px solid #d8e3ee;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.sd-card-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-bottom: 1px solid #e6edf4;
|
||||||
|
}
|
||||||
|
.sd-shop-name {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #24384d;
|
||||||
|
}
|
||||||
|
.sd-card-select-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px 16px 0;
|
||||||
|
}
|
||||||
|
.sd-task-no {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #24384d;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.sd-card-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 6px 16px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.sd-card-label {
|
||||||
|
flex: none;
|
||||||
|
width: 52px;
|
||||||
|
color: #8293a5;
|
||||||
|
}
|
||||||
|
.sd-card-value {
|
||||||
|
color: #40586e;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.sd-card-file {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.sd-card-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 6px 16px 14px;
|
||||||
|
}
|
||||||
|
.st-pill {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 2px 10px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.7;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
.st-pill.is-success {
|
||||||
|
color: #3d7158;
|
||||||
|
background: #e8f2eb;
|
||||||
|
border-color: #bdd7c5;
|
||||||
|
}
|
||||||
|
.st-pill.is-failed {
|
||||||
|
color: #91474f;
|
||||||
|
background: #f8ebeb;
|
||||||
|
border-color: #e4c2c5;
|
||||||
|
}
|
||||||
|
.st-pill.is-cancelled {
|
||||||
|
color: #5b6f83;
|
||||||
|
background: #f1f6fa;
|
||||||
|
border-color: #d6e2ec;
|
||||||
|
}
|
||||||
|
.st-pill.is-pending,
|
||||||
|
.st-pill.is-running {
|
||||||
|
color: #8a6d3b;
|
||||||
|
background: #fbf4ea;
|
||||||
|
border-color: #e7d3ae;
|
||||||
|
}
|
||||||
|
.country-chip {
|
||||||
|
padding: 1px 8px;
|
||||||
|
margin-right: 4px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #eef4fa;
|
||||||
|
color: #40586e;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.dim {
|
||||||
|
color: #8293a5;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.empty-tip {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
padding: 44px 24px;
|
||||||
|
text-align: center;
|
||||||
|
color: #8293a5;
|
||||||
|
font-size: 13.5px;
|
||||||
|
}
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 18px;
|
||||||
|
color: #5b6f83;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.page-total {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
.page-jump {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
@media (max-width: 1100px) {
|
||||||
|
.shop-card-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
.shop-card-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -19,11 +19,11 @@ test('align_shop_data_grid_normal_variant_input', () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
test('align_shop_data_grid_boundary_empty_input', () => {
|
test('align_shop_data_grid_boundary_empty_input', () => {
|
||||||
// 卡片区下方有翻页组件（prev/next），与店铺分页并存。
|
// 卡片区下方有翻页组件（prev/next），与店铺分页并存（均为旧式分页）。
|
||||||
const src = readSource(PAGE)
|
const src = readSource(PAGE)
|
||||||
const count = (src.match(/el-pagination/g) || []).length
|
const count = (src.match(/class="pagination"/g) || []).length + (src.match(/sd-shop-pager/g) || []).length
|
||||||
assert.ok(count >= 2, '页面应含店铺分页 + 卡片分页两处 el-pagination')
|
assert.ok(count >= 2, '页面应含店铺分页 + 卡片分页两处分页')
|
||||||
assert.match(src, /layout="prev, pager, next, jumper"/, '卡片分页含上一页/下一页')
|
assert.match(src, /cardPage/, '卡片分页状态')
|
||||||
})
|
})
|
||||||
|
|
||||||
test('align_shop_data_grid_boundary_single_item', () => {
|
test('align_shop_data_grid_boundary_single_item', () => {
|
||||||
|
|||||||
@@ -42,14 +42,14 @@ test('align_digital_human_row_buttons_old_btn', () => {
|
|||||||
assert.match(s, /window\.confirm\(text\)/, '确认走原生 confirm 对齐旧版')
|
assert.match(s, /window\.confirm\(text\)/, '确认走原生 confirm 对齐旧版')
|
||||||
})
|
})
|
||||||
|
|
||||||
test('align_image_video_detail_and_download_solid', () => {
|
test('align_image_video_detail_and_download_old_btn', () => {
|
||||||
const s = readSource('src/pages/tasks/ImageVideoTasksPage.vue')
|
const s = readSource('src/pages/tasks/ImageVideoTasksPage.vue')
|
||||||
assertRowButtonSolid(s, 'openDetail')
|
assert.match(s, /class="btn btn-sm btn-secondary"[^>]*@click="downloadVideo\(task, index, video\)"/, '视频下载为旧版 btn-sm btn-secondary')
|
||||||
assertRowButtonSolid(s, 'downloadVideo')
|
assert.match(s, /class="btn btn-sm"[^>]*@click="copyLink\(video\.displayUrl\)"/, '复制链接为旧版 btn-sm')
|
||||||
})
|
})
|
||||||
|
|
||||||
test('align_copy_link_aux_kept_text', () => {
|
test('align_copy_link_aux_old_btn', () => {
|
||||||
// 辅助"复制链接"保留 text（非破坏主操作），避免被误伤。
|
// 辅助"复制链接"为旧版 btn-sm 小按钮。
|
||||||
const s = readSource('src/pages/tasks/ImageVideoTasksPage.vue')
|
const s = readSource('src/pages/tasks/ImageVideoTasksPage.vue')
|
||||||
assert.match(s, /<el-button[^>]*text[^>]*@click="copyLink/, '复制链接保留 text')
|
assert.match(s, /class="btn btn-sm"[^>]*@click="copyLink/, '复制链接用 btn-sm')
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -64,7 +64,7 @@ test('test_datetime_sweep_boundary_single_item', () => {
|
|||||||
// 含时间展示的页：时间标签仍存在（列还在），只是改成走格式化；无时间列页面豁免。
|
// 含时间展示的页：时间标签仍存在（列还在），只是改成走格式化；无时间列页面豁免。
|
||||||
for (const page of PAGES) {
|
for (const page of PAGES) {
|
||||||
const src = readSource(page)
|
const src = readSource(page)
|
||||||
if (TIME_CONTENT.test(src)) assert.match(src, /时间/, `${page} 仍应含“时间”列/文案`)
|
if (TIME_CONTENT.test(src)) assert.match(src, /时间|最新/, `${page} 仍应含“时间/最新”列/文案`)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -36,7 +36,7 @@ test('test_task_264_view_boundary_empty_input', () => {
|
|||||||
const page = readSource('src/pages/tasks/ImageVideoTasksPage.vue')
|
const page = readSource('src/pages/tasks/ImageVideoTasksPage.vue')
|
||||||
assert.match(page, /视频生成中或暂无结果/)
|
assert.match(page, /视频生成中或暂无结果/)
|
||||||
assert.match(page, /任务失败，未生成视频/)
|
assert.match(page, /任务失败，未生成视频/)
|
||||||
assert.match(page, /暂无视频任务记录/)
|
assert.match(page, /暂无符合条件的视频任务/)
|
||||||
})
|
})
|
||||||
|
|
||||||
test('test_task_264_view_boundary_single_item', () => {
|
test('test_task_264_view_boundary_single_item', () => {
|
||||||
|
|||||||
@@ -7,8 +7,9 @@ import { normalizeImageVideoFilter } from '../src/pages/tasks/image-video-filter
|
|||||||
|
|
||||||
test('test_task_265_filter_normal_primary_path', () => {
|
test('test_task_265_filter_normal_primary_path', () => {
|
||||||
const page = readSource('src/pages/tasks/ImageVideoTasksPage.vue')
|
const page = readSource('src/pages/tasks/ImageVideoTasksPage.vue')
|
||||||
assert.match(page, /用户名（模糊搜索）/, '需用户名模糊筛选')
|
assert.match(page, /用户名/, '需用户名模糊筛选')
|
||||||
assert.match(page, /提交时间/, '需提交时间范围')
|
assert.match(page, /提交开始/, '需提交开始时间')
|
||||||
|
assert.match(page, /提交结束/, '需提交结束时间')
|
||||||
assert.match(page, /查询/, '需查询按钮')
|
assert.match(page, /查询/, '需查询按钮')
|
||||||
assert.match(page, /reset/, '需重置')
|
assert.match(page, /reset/, '需重置')
|
||||||
})
|
})
|
||||||
@@ -43,7 +44,7 @@ test('test_task_265_permission_normal_primary_path', () => {
|
|||||||
assert.match(page, /权限配置/, '权限入口')
|
assert.match(page, /权限配置/, '权限入口')
|
||||||
assert.match(page, /fetchImageVideoPermissionUsers/, '权限用户加载')
|
assert.match(page, /fetchImageVideoPermissionUsers/, '权限用户加载')
|
||||||
assert.match(page, /saveImageVideoPermissions/, '权限保存')
|
assert.match(page, /saveImageVideoPermissions/, '权限保存')
|
||||||
assert.match(page, /数据范围授权/, '权限弹窗语义')
|
assert.match(page, /数据范围/, '权限弹窗语义')
|
||||||
})
|
})
|
||||||
|
|
||||||
test('test_task_265_permission_boundary_limit_or_missing_field', () => {
|
test('test_task_265_permission_boundary_limit_or_missing_field', () => {
|
||||||
|
|||||||
@@ -8,10 +8,11 @@ import { toShopDataZipRequest } from '../src/pages/tasks/shop-data-download.ts'
|
|||||||
|
|
||||||
test('test_task_267_filter_normal_primary_path', () => {
|
test('test_task_267_filter_normal_primary_path', () => {
|
||||||
const page = readSource('src/pages/tasks/ShopDataTasksPage.vue')
|
const page = readSource('src/pages/tasks/ShopDataTasksPage.vue')
|
||||||
assert.match(page, /店铺（模糊搜索）/, '需店铺模糊筛选')
|
assert.match(page, /店铺/, '需店铺模糊筛选')
|
||||||
assert.match(page, /分组（模糊搜索）/, '需分组模糊筛选')
|
assert.match(page, /分组/, '需分组模糊筛选')
|
||||||
assert.match(page, /国家/, '需国家筛选')
|
assert.match(page, /国家/, '需国家筛选')
|
||||||
assert.match(page, /创建时间/, '需创建时间范围')
|
assert.match(page, /创建开始/, '需创建开始时间')
|
||||||
|
assert.match(page, /创建结束/, '需创建结束时间')
|
||||||
assert.match(page, /查询/, '需查询')
|
assert.match(page, /查询/, '需查询')
|
||||||
assert.match(page, /reset/, '需重置')
|
assert.match(page, /reset/, '需重置')
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user