fix(admin): 后台时间统一展示为 YYYY-MM-DD HH:mm:ss（formatDateTime 全页接入）

2026-09-05 21:52:00 +08:00
parent cabbb4be0b
commit eebdb7af2d
15 changed files with 1553 additions and 7 deletions
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { formatDateTime } from '@/utils/datetime'
 import { computed, onMounted, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useAdminSessionStore } from '@/stores/admin-session'
@@ -101,7 +102,7 @@ onMounted(loadGroups)
          </template>
        </el-table-column>
        <el-table-column prop="updatedAt" label="修改时间" min-width="170">
-          <template #default="{ row }">{{ row.updatedAt || row.createdAt || '—' }}</template>
+          <template #default="{ row }">{{ formatDateTime(row.updatedAt || row.createdAt) }}</template>
        </el-table-column>
        <el-table-column label="操作" width="140" fixed="right">
          <template #default="{ row }">
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { formatDateTime } from '@/utils/datetime'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { createMenu, deleteMenu, loadMenuManageTree, updateMenu } from './menu-manage-api'
@@ -133,7 +134,9 @@ onMounted(loadMenus)
            {{ parentNameOf(row) }}
          </template>
        </el-table-column>
-        <el-table-column prop="createdAt" label="创建时间" min-width="150" />
+        <el-table-column prop="createdAt" label="创建时间" min-width="150">
+          <template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template>
+        </el-table-column>
        <el-table-column prop="sortOrder" label="排序" width="90" />
        <el-table-column label="操作" width="160" fixed="right">
          <template #default="{ row }">
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { formatDateTime } from '@/utils/datetime'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import type { AdminUser } from '@/types/admin'
@@ -164,7 +165,9 @@ onMounted(loadUsers)
          </template>
        </el-table-column>
        <el-table-column prop="creatorUsername" label="所属管理员" width="160" />
-        <el-table-column prop="createdAt" label="创建时间" width="180" />
+        <el-table-column prop="createdAt" label="创建时间" width="180">
+          <template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template>
+        </el-table-column>
        <el-table-column label="操作" width="160" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" :disabled="!editableOf(row)" @click="openEdit(row)">编辑</el-button>
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { formatDateTime } from '@/utils/datetime'
 /** 不符合 ASIN（品牌数据库）：分页 + 手动新增/编辑/删除。 */
 import { onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -173,7 +174,9 @@ onMounted(() => {
            </el-tag>
          </template>
        </el-table-column>
-        <el-table-column prop="createdAt" label="创建时间" min-width="170" />
+        <el-table-column prop="createdAt" label="创建时间" min-width="170">
+          <template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template>
+        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button text type="primary" size="small" @click="openEdit(row as InvalidAsinItem)">编辑</el-button>
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { formatDateTime } from '@/utils/datetime'
 /** 数据去重总数据(registry)：对齐 admin panel-dedupe-total-data —— 扩充筛选(用户名/日期/分组)、行编辑/删除、新增/删除导入(轮询)、导出。 */
 import { onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -300,7 +301,9 @@ onMounted(() => {
        <el-table-column label="分组" width="150">
          <template #default="{ row }">{{ (row as DedupeTotalItem).groupName || '—' }}</template>
        </el-table-column>
-        <el-table-column prop="createdAt" label="创建时间" width="170" />
+        <el-table-column prop="createdAt" label="创建时间" width="170">
+          <template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template>
+        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="openEdit(row as DedupeTotalItem)">编辑</el-button>
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { formatDateTime } from '@/utils/datetime'
 /** 查询 ASIN：对齐 admin panel-query-asin —— 宽表筛选 + 行内「配置」抽屉(逐国 ASIN，留空=删除该站点) + 导入添加/删除导入/导出。 */
 import { onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -277,7 +278,9 @@ onMounted(() => {
            <span v-else class="dim">—</span>
          </template>
        </el-table-column>
-        <el-table-column prop="updatedAt" label="更新时间" min-width="160" />
+        <el-table-column prop="updatedAt" label="更新时间" min-width="160">
+          <template #default="{ row }">{{ formatDateTime(row.updatedAt) }}</template>
+        </el-table-column>
        <el-table-column label="操作" width="90" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="openConfig(row as QueryAsinItem)">配置</el-button>
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { formatDateTime } from '@/utils/datetime'
 /** 最低价 ASIN（跳过跟价）：对齐 admin panel-skip-price-asin —— 价格范围筛选、行内「配置」抽屉
 *  (逐国 ASIN+最低价，留空=删除该站点、低价必带 ASIN)、导入添加/删除导入/导出。 */
 import { onMounted, reactive, ref } from 'vue'
@@ -315,7 +316,9 @@ onMounted(() => {
            <template #default="{ row }">{{ priceOf(row as SkipPriceItem, code) ?? '—' }}</template>
          </el-table-column>
        </template>
-        <el-table-column prop="updatedAt" label="更新时间" min-width="160" />
+        <el-table-column prop="updatedAt" label="更新时间" min-width="160">
+          <template #default="{ row }">{{ formatDateTime(row.updatedAt) }}</template>
+        </el-table-column>
        <el-table-column label="操作" width="90" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="openConfig(row as SkipPriceItem)">配置</el-button>
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { formatDateTime } from '@/utils/datetime'
+/** 数字人版本管理页：列表 + 上传 + 发布 + 设最新 + 下载。 */
+import { onMounted, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { fetchDigitalHumanVersions, uploadDigitalHumanVersion, releaseDigitalHumanVersion, setLatestDigitalHumanVersion } from './digitalhuman-api.ts'
+import type { DigitalHumanVersion } from './digitalhuman-dto.ts'
+import { validateDigitalHumanUpload } from './digitalhuman-upload-model.ts'
+
+const loading = ref(false)
+const items = ref<DigitalHumanVersion[]>([])
+
+const uploadVisible = ref(false)
+const uploading = ref(false)
+const form = ref({ version: '', file: null as { name?: string; size?: number } | null, changelog: '', minClientVersion: '' })
+
+const confirming = ref<string | null>(null)
+
+function formatSize(size?: number): string {
+  if (size === undefined || size === null) return ''
+  if (size < 1024) return `${size}B`
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)}KB`
+  return `${(size / 1024 / 1024).toFixed(1)}MB`
+}
+
+async function load() {
+  loading.value = true
+  try {
+    items.value = (await fetchDigitalHumanVersions()).items
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '版本列表加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function onFileChange(file: File) {
+  form.value.file = file
+}
+
+async function submitUpload() {
+  const { valid, errors } = validateDigitalHumanUpload({ ...form.value, file: form.value.file })
+  if (!valid) {
+    ElMessage.warning(errors.version || errors.file || '请完善上传信息')
+    return
+  }
+  uploading.value = true
+  try {
+    await uploadDigitalHumanVersion(
+      { version: form.value.version, file: form.value.file, changelog: form.value.changelog, minClientVersion: form.value.minClientVersion },
+      form.value.file?.name,
+    )
+    ElMessage.success('上传成功')
+    uploadVisible.value = false
+    form.value = { version: '', file: null, changelog: '', minClientVersion: '' }
+    load()
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '上传失败')
+  } finally {
+    uploading.value = false
+  }
+}
+
+async function release(row: DigitalHumanVersion) {
+  confirming.value = row.version
+  try {
+    await ElMessageBox.confirm(`确认发布版本 ${row.version}？`, '发布版本', { type: 'warning' })
+    await releaseDigitalHumanVersion(row.version)
+    ElMessage.success('已发布')
+    load()
+  } catch (error) {
+    if (error === 'cancel' || error === 'close') return
+    ElMessage.error(error instanceof Error ? error.message : '发布失败')
+  } finally {
+    confirming.value = null
+  }
+}
+
+async function setLatest(row: DigitalHumanVersion) {
+  confirming.value = row.version
+  try {
+    await ElMessageBox.confirm(`将 ${row.version} 设为最新版本？`, '设为最新', { type: 'warning' })
+    await setLatestDigitalHumanVersion(row.version)
+    ElMessage.success('已设为最新')
+    load()
+  } catch (error) {
+    if (error === 'cancel' || error === 'close') return
+    ElMessage.error(error instanceof Error ? error.message : '操作失败')
+  } finally {
+    confirming.value = null
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="page-stack">
+    <div class="page-heading">
+      <div>
+        <h2>数字人版本管理</h2>
+        <p>管理数字人客户端的草稿/已发布版本。</p>
+      </div>
+      <div class="actions">
+        <el-button type="primary" @click="uploadVisible = true">上传数字人版本</el-button>
+      </div>
+    </div>
+
+    <el-card shadow="never">
+      <el-table v-loading="loading" :data="items" stripe border>
+        <el-table-column prop="version" label="版本号" min-width="150" />
+        <el-table-column label="状态" width="110">
+          <template #default="{ row }">
+            <el-tag :type="(row as DigitalHumanVersion).status === 'RELEASED' ? 'success' : 'info'" size="small">
+              {{ (row as DigitalHumanVersion).status === 'RELEASED' ? '已发布' : '草稿' }}
+            </el-tag>
+            <el-tag v-if="(row as DigitalHumanVersion).isLatest" type="primary" size="small" effect="dark" style="margin-left: 4px">最新</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="大小" width="110">
+          <template #default="{ row }">{{ formatSize((row as DigitalHumanVersion).fileSize) || '—' }}</template>
+        </el-table-column>
+        <el-table-column prop="minClientVersion" label="最低客户端" width="120">
+          <template #default="{ row }">{{ (row as DigitalHumanVersion).minClientVersion || '—' }}</template>
+        </el-table-column>
+        <el-table-column prop="changelog" label="更新说明" min-width="180" show-overflow-tooltip />
+        <el-table-column prop="createdAt" label="创建时间" min-width="170">
+          <template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template>
+        </el-table-column>
+        <el-table-column prop="releasedAt" label="发布时间" min-width="170">
+          <template #default="{ row }">{{ formatDateTime((row as DigitalHumanVersion).releasedAt) }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="{ row }">
+            <el-button v-if="(row as DigitalHumanVersion).status === 'DRAFT'" text type="warning" size="small" :loading="confirming === (row as DigitalHumanVersion).version" @click="release(row as DigitalHumanVersion)">发布</el-button>
+            <el-button text type="primary" size="small" :loading="confirming === (row as DigitalHumanVersion).version" @click="setLatest(row as DigitalHumanVersion)">设最新</el-button>
+            <el-button v-if="(row as DigitalHumanVersion).downloadUrl" text type="success" size="small">
+              <el-link type="success" :href="(row as DigitalHumanVersion).downloadUrl" target="_blank">下载</el-link>
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-dialog v-model="uploadVisible" title="上传数字人版本" width="560px">
+      <el-form label-width="110px">
+        <el-form-item label="版本号" required>
+          <el-input v-model="form.version" placeholder="如 1.0.2" />
+        </el-form-item>
+        <el-form-item label="压缩包" required>
+          <el-upload :auto-upload="false" :limit="1" accept=".zip,.rar,.7z" :on-change="(file: any) => onFileChange(file.raw)" :on-remove="() => (form.file = null)">
+            <el-button>选择文件</el-button>
+          </el-upload>
+          <div v-if="form.file" class="dim">{{ form.file.name }}</div>
+        </el-form-item>
+        <el-form-item label="最低客户端">
+          <el-input v-model="form.minClientVersion" placeholder="可选，客户端最低版本要求" />
+        </el-form-item>
+        <el-form-item label="更新说明">
+          <el-input v-model="form.changelog" type="textarea" :rows="3" placeholder="可选" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="uploadVisible = false">取消</el-button>
+        <el-button type="primary" :loading="uploading" @click="submitUpload">上传</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.page-heading { display: flex; justify-content: space-between; align-items: flex-start; }
+.actions { display: flex; align-items: center; gap: 10px; }
+.dim { color: var(--el-text-color-secondary); font-size: 12px; }
+</style>
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { formatDateTime } from '@/utils/datetime'
+/** 历史生成记录页：分页 + 时间/用户筛选 + 结果大图预览。 */
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { fetchHistoryList } from './history-api.ts'
+import type { HistoryRecordItem } from './history-dto.ts'
+
+const loading = ref(false)
+const rows = ref<HistoryRecordItem[]>([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = 15
+const filter = reactive({ userId: '', dateRange: [] as string[] })
+
+const previewVisible = ref(false)
+const previewItem = ref<HistoryRecordItem | null>(null)
+
+function imageUrls(item: HistoryRecordItem): string[] {
+  const urls: string[] = []
+  for (const url of item.resultUrls || []) urls.push(url)
+  if (item.longImageUrl) urls.push(item.longImageUrl)
+  return urls
+}
+
+async function load() {
+  loading.value = true
+  try {
+    const userId = filter.userId.trim()
+    const result = await fetchHistoryList({
+      page: page.value,
+      pageSize,
+      userId: userId ? Number(userId) : undefined,
+      timeStart: filter.dateRange?.[0] || '',
+      timeEnd: filter.dateRange?.[1] || '',
+    })
+    rows.value = result.items
+    total.value = result.total
+    page.value = result.page
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '历史记录加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function apply() {
+  page.value = 1
+  load()
+}
+
+function reset() {
+  filter.userId = ''
+  filter.dateRange = []
+  page.value = 1
+  load()
+}
+
+function openPreview(item: HistoryRecordItem) {
+  previewItem.value = item
+  previewVisible.value = true
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="page-stack">
+    <div class="page-heading">
+      <div>
+        <h2>生成记录</h2>
+        <p>查看各用户在后台生成的历史记录与结果图。</p>
+      </div>
+    </div>
+
+    <el-card shadow="never" style="margin-bottom: 14px">
+      <div class="filter-grid">
+        <div class="f-item">
+          <label>用户ID</label>
+          <el-input v-model="filter.userId" placeholder="按用户ID筛选" clearable @keyup.enter="apply" />
+        </div>
+        <div class="f-item wide">
+          <label>生成时间</label>
+          <el-date-picker v-model="filter.dateRange" type="daterange" range-separator="至" start-placeholder="开始" end-placeholder="结束" value-format="YYYY-MM-DD" 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">
+      <el-table v-loading="loading" :data="rows" stripe border>
+        <el-table-column prop="id" label="ID" width="90" />
+        <el-table-column prop="username" label="用户" width="140" />
+        <el-table-column prop="panelType" label="记录类型" min-width="150" />
+        <el-table-column label="结果数" width="90" align="center">
+          <template #default="{ row }">{{ (row as HistoryRecordItem).resultUrls.length }}</template>
+        </el-table-column>
+        <el-table-column prop="createdAt" label="生成时间" min-width="180">
+          <template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template>
+        </el-table-column>
+        <el-table-column label="缩略图" min-width="200">
+          <template #default="{ row }">
+            <el-image
+              v-for="(url, index) in ((row as HistoryRecordItem).resultUrls.slice(0, 4))"
+              :key="index"
+              :src="url"
+              :preview-src-list="(row as HistoryRecordItem).resultUrls"
+              preview-teleported
+              fit="cover"
+              style="width: 56px; height: 56px; margin-right: 6px; border-radius: 4px"
+            />
+            <span v-if="(row as HistoryRecordItem).resultUrls.length > 4" class="dim">+{{ (row as HistoryRecordItem).resultUrls.length - 4 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="110" fixed="right">
+          <template #default="{ row }">
+            <el-button text type="primary" size="small" @click="openPreview(row as HistoryRecordItem)">查看大图</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="table-footer">
+        <span>共 <b>{{ total.toLocaleString() }}</b> 条</span>
+        <el-pagination background layout="prev, pager, next, jumper" :total="total" :page-size="pageSize" :current-page="page" @current-change="(p: number) => { page = p; load() }" />
+      </div>
+    </el-card>
+
+    <el-dialog v-model="previewVisible" :title="previewItem ? `记录 #${previewItem.id} 结果图` : '结果图'" width="820px" top="6vh">
+      <div v-if="previewItem" class="preview-meta">
+        <el-tag size="small">{{ previewItem.username }}</el-tag>
+        <span>{{ previewItem.panelType }}</span>
+        <span>{{ formatDateTime(previewItem.createdAt) }}</span>
+      </div>
+      <div v-if="previewItem && imageUrls(previewItem).length" class="preview-grid">
+        <el-image v-for="(url, index) in imageUrls(previewItem)" :key="index" :src="url" :preview-src-list="imageUrls(previewItem)" :initial-index="index" preview-teleported fit="contain" style="max-width: 100%" class="preview-img" />
+      </div>
+      <el-empty v-else description="无结果图片" />
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.filter-grid { display: flex; flex-wrap: wrap; gap: 12px 18px; }
+.f-item { display: flex; flex-direction: column; gap: 6px; width: 180px; }
+.f-item label { color: var(--el-text-color-secondary); font-size: 12px; }
+.f-item.wide { width: 320px; }
+.f-item.btn-row { flex-direction: row; align-items: flex-end; gap: 8px; width: auto; }
+.table-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; }
+.table-footer span { color: var(--el-text-color-secondary); font-size: 12.5px; }
+.table-footer b { color: var(--el-text-color-primary); }
+.dim { color: var(--el-text-color-secondary); font-size: 12px; }
+.preview-meta { display: flex; align-items: center; gap: 12px; color: var(--el-text-color-secondary); font-size: 12px; margin-bottom: 12px; }
+.preview-grid { display: flex; flex-direction: column; gap: 12px; }
+.preview-img { width: 100%; border: 1px solid var(--el-border-color-lighter); border-radius: 6px; }
+</style>
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { formatDateTime } from '@/utils/datetime'
+/** 软件版本管理页：客户端版本列表 + 上传新版本。 */
+import { onMounted, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { fetchSoftwareVersions, uploadSoftwareVersion } from './version-api.ts'
+import type { SoftwareVersionItem } from './version-dto.ts'
+import { isNonEmptyVersion } from './version-dto.ts'
+
+const loading = ref(false)
+const items = ref<SoftwareVersionItem[]>([])
+
+const uploadVisible = ref(false)
+const uploading = ref(false)
+const newVersion = ref('')
+const pickedFile = ref<File | null>(null)
+
+async function load() {
+  loading.value = true
+  try {
+    items.value = (await fetchSoftwareVersions()).items
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '版本列表加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function onFileChange(file: File) {
+  pickedFile.value = file
+}
+
+async function submitUpload() {
+  if (!isNonEmptyVersion(newVersion.value)) {
+    ElMessage.warning('版本号不能为空')
+    return
+  }
+  if (!pickedFile.value) {
+    ElMessage.warning('请选择程序压缩包')
+    return
+  }
+  uploading.value = true
+  try {
+    await uploadSoftwareVersion(newVersion.value.trim(), pickedFile.value, pickedFile.value.name)
+    ElMessage.success('上传成功')
+    uploadVisible.value = false
+    newVersion.value = ''
+    pickedFile.value = null
+    load()
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '上传失败')
+  } finally {
+    uploading.value = false
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="page-stack">
+    <div class="page-heading">
+      <div>
+        <h2>软件版本管理</h2>
+        <p>管理客户端更新包版本（用于 /api/version/latest 下发）。</p>
+      </div>
+      <div class="actions">
+        <el-button type="primary" @click="uploadVisible = true">上传新版本</el-button>
+      </div>
+    </div>
+
+    <el-card shadow="never">
+      <el-table v-loading="loading" :data="items" stripe border>
+        <el-table-column prop="version" label="版本号" min-width="180" />
+        <el-table-column label="下载" min-width="260">
+          <template #default="{ row }">
+            <el-link v-if="(row as SoftwareVersionItem).fileUrl" type="primary" :href="(row as SoftwareVersionItem).fileUrl" target="_blank">{{ (row as SoftwareVersionItem).fileUrl }}</el-link>
+            <span v-else class="dim">—</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createdAt" label="创建时间" min-width="190">
+          <template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-dialog v-model="uploadVisible" title="上传软件版本" width="520px">
+      <el-form label-width="110px">
+        <el-form-item label="版本号" required>
+          <el-input v-model="newVersion" placeholder="如 1.0.2" />
+        </el-form-item>
+        <el-form-item label="程序压缩包" required>
+          <el-upload :auto-upload="false" :limit="1" accept=".zip,.rar,.7z,.exe" :on-change="(file: any) => onFileChange(file.raw)" :on-remove="() => (pickedFile = null)">
+            <el-button>选择文件</el-button>
+          </el-upload>
+          <div v-if="pickedFile" class="dim">{{ pickedFile.name }}</div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="uploadVisible = false">取消</el-button>
+        <el-button type="primary" :loading="uploading" @click="submitUpload">上传</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.page-heading { display: flex; justify-content: space-between; align-items: flex-start; }
+.actions { display: flex; align-items: center; gap: 10px; }
+.dim { color: var(--el-text-color-secondary); font-size: 12px; }
+</style>
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { formatDateTime } from '@/utils/datetime'
+/** 店铺密钥管理页：分页 + 新增/编辑/删除；紫鸟令牌仅掩码展示。 */
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { fetchShopKeyList, submitCreateShopKey, updateShopKey, deleteShopKey } from './shop-key-api.ts'
+import { emptyShopKeyForm } from './shop-key-form-model.ts'
+import type { ShopKeyItem } from './shop-dto.ts'
+import { toSensitiveString, type IpWhitelistStatus } from './shop-dto.ts'
+
+const loading = ref(false)
+const rows = ref<ShopKeyItem[]>([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = 15
+
+const dialogVisible = ref(false)
+const editingId = ref<number | null>(null)
+const saving = ref(false)
+const form = reactive(emptyShopKeyForm())
+
+function maskToken(token: string): string {
+  const value = (token || '')
+  if (value.length <= 8) return '••••••••'
+  return `${value.slice(0, 4)}••••••••${value.slice(-4)}`
+}
+
+function statusText(status: IpWhitelistStatus): string {
+  return status === 'ALLOWED' ? '已白名单' : status === 'BLOCKED' ? '被拦截' : '未知'
+}
+
+async function load() {
+  loading.value = true
+  try {
+    const result = await fetchShopKeyList({ page: page.value, pageSize })
+    rows.value = result.items
+    total.value = result.total
+    page.value = result.page
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '密钥列表加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function openCreate() {
+  editingId.value = null
+  Object.assign(form, emptyShopKeyForm())
+  dialogVisible.value = true
+}
+
+function openEdit(row: ShopKeyItem) {
+  editingId.value = row.id
+  Object.assign(form, emptyShopKeyForm())
+  form.remarkName = row.remarkName
+  form.ziniaoAccountName = row.ziniaoAccountName
+  dialogVisible.value = true
+}
+
+async function submit() {
+  saving.value = true
+  try {
+    if (editingId.value == null) {
+      await submitCreateShopKey({ ...form })
+    } else {
+      await updateShopKey(editingId.value, { ...form })
+    }
+    ElMessage.success(editingId.value == null ? '已新增' : '已保存')
+    dialogVisible.value = false
+    load()
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '保存失败')
+  } finally {
+    saving.value = false
+  }
+}
+
+async function remove(row: ShopKeyItem) {
+  try {
+    await ElMessageBox.confirm(`确认删除密钥「${row.ziniaoAccountName}」？`, '删除密钥', { type: 'warning' })
+  } catch {
+    return
+  }
+  try {
+    await deleteShopKey(row.id)
+    ElMessage.success('已删除')
+    load()
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '删除失败')
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="page-stack">
+    <div class="page-heading">
+      <div>
+        <h2>店铺密钥管理</h2>
+        <p>管理各店铺的紫鸟浏览器账号与令牌。</p>
+      </div>
+      <el-button type="primary" @click="openCreate">新增密钥</el-button>
+    </div>
+
+    <el-card shadow="never">
+      <el-table v-loading="loading" :data="rows" stripe border>
+        <el-table-column prop="id" label="ID" width="80" />
+        <el-table-column prop="remarkName" label="备注名" min-width="140">
+          <template #default="{ row }">{{ (row as ShopKeyItem).remarkName || '—' }}</template>
+        </el-table-column>
+        <el-table-column prop="ziniaoAccountName" label="紫鸟账号" min-width="160" />
+        <el-table-column label="紫鸟令牌" min-width="200">
+          <template #default="{ row }">
+            <el-tooltip :content="(row as ShopKeyItem).ziniaoToken" placement="top">
+              <code class="mono-mask">{{ maskToken((row as ShopKeyItem).ziniaoToken) }}</code>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column label="IP白名单" width="130" align="center">
+          <template #default="{ row }">
+            <el-tag :type="(row as ShopKeyItem).ipWhitelistStatus === 'ALLOWED' ? 'success' : (row as ShopKeyItem).ipWhitelistStatus === 'BLOCKED' ? 'danger' : 'info'" size="small">
+              {{ statusText((row as ShopKeyItem).ipWhitelistStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createdAt" label="创建时间" min-width="170">
+          <template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="160" fixed="right">
+          <template #default="{ row }">
+            <el-button text type="primary" size="small" @click="openEdit(row as ShopKeyItem)">编辑</el-button>
+            <el-button text type="danger" size="small" @click="remove(row as ShopKeyItem)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="table-footer">
+        <span>共 <b>{{ total.toLocaleString() }}</b> 条</span>
+        <el-pagination background layout="prev, pager, next, jumper" :total="total" :page-size="pageSize" :current-page="page" @current-change="(p: number) => { page = p; load() }" />
+      </div>
+    </el-card>
+
+    <el-dialog v-model="dialogVisible" :title="editingId == null ? '新增密钥' : '编辑密钥'" width="560px">
+      <el-form label-width="110px">
+        <el-form-item label="备注名">
+          <el-input v-model="form.remarkName" placeholder="可选" />
+        </el-form-item>
+        <el-form-item label="紫鸟账号" required>
+          <el-input v-model="form.ziniaoAccountName" placeholder="紫鸟浏览器账号名称" />
+        </el-form-item>
+        <el-form-item label="紫鸟令牌" required>
+          <el-input v-model="form.ziniaoToken" type="textarea" :rows="3" placeholder="粘贴紫鸟令牌（将自动去除 Bearer 前缀）" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="submit">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.page-heading { display: flex; justify-content: space-between; align-items: center; }
+.table-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; }
+.table-footer span { color: var(--el-text-color-secondary); font-size: 12.5px; }
+.table-footer b { color: var(--el-text-color-primary); }
+.mono-mask { font-family: Consolas, monospace; font-size: 12px; background: var(--el-fill-color-light); padding: 2px 6px; border-radius: 4px; }
+</style>
@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { formatDateTime } from '@/utils/datetime'
+/** 店铺管理页：分组/关键字筛选 + 分页 + 新增/编辑/凭证明文/删除。 */
+import { computed, onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useAdminSessionStore } from '@/stores/admin-session'
+import {
+  deleteShopManage,
+  fetchShopCredential,
+  fetchShopManageGroups,
+  fetchShopManageList,
+  submitCreateShopManage,
+  submitUpdateShopManage,
+} from './shop-manage-api.ts'
+import { emptyShopManageForm } from './shop-manage-form-model.ts'
+import type { ShopCredential, ShopGroupOption, ShopSummary } from './shop-dto.ts'
+
+const session = useAdminSessionStore()
+const loading = ref(false)
+const rows = ref<ShopSummary[]>([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = 15
+
+const groups = ref<ShopGroupOption[]>([])
+const filter = reactive({ shopName: '', groupId: null as number | null })
+
+const dialogVisible = ref(false)
+const editingId = ref<number | null>(null)
+const saving = ref(false)
+const form = reactive(emptyShopManageForm())
+
+const credentialVisible = ref(false)
+const credential = ref<ShopCredential | null>(null)
+
+const groupOptions = computed(() => groups.value)
+
+async function loadGroups() {
+  try {
+    groups.value = await fetchShopManageGroups()
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '分组加载失败')
+  }
+}
+
+async function load() {
+  loading.value = true
+  try {
+    const result = await fetchShopManageList({
+      page: page.value,
+      pageSize,
+      groupId: filter.groupId,
+      shopName: filter.shopName.trim() || undefined,
+    })
+    rows.value = result.items
+    total.value = result.total
+    page.value = result.page
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '店铺列表加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function apply() {
+  page.value = 1
+  load()
+}
+
+function reset() {
+  filter.shopName = ''
+  filter.groupId = null
+  page.value = 1
+  load()
+}
+
+function openCreate() {
+  editingId.value = null
+  Object.assign(form, emptyShopManageForm())
+  dialogVisible.value = true
+}
+
+function openEdit(row: ShopSummary) {
+  editingId.value = row.id
+  Object.assign(form, {
+    groupId: row.groupId,
+    shopName: row.shopName,
+    mallName: row.mallName,
+    znUsername: row.znUsername,
+    account: row.account,
+    password: '',
+  })
+  dialogVisible.value = true
+}
+
+async function submit() {
+  saving.value = true
+  try {
+    const createdById = session.user?.id ?? 0
+    if (editingId.value == null) {
+      await submitCreateShopManage({ ...form }, createdById)
+      ElMessage.success('已新增店铺')
+    } else {
+      await submitUpdateShopManage(editingId.value, { ...form })
+      ElMessage.success('已保存')
+    }
+    dialogVisible.value = false
+    load()
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '保存失败')
+  } finally {
+    saving.value = false
+  }
+}
+
+async function showCredential(row: ShopSummary) {
+  try {
+    credential.value = await fetchShopCredential(row.id, row.shopName)
+    credentialVisible.value = true
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '读取凭证失败')
+  }
+}
+
+async function remove(row: ShopSummary) {
+  try {
+    await ElMessageBox.confirm(`确认删除店铺「${row.shopName}」？`, '删除店铺', { type: 'warning' })
+  } catch {
+    return
+  }
+  try {
+    await deleteShopManage(row.id)
+    ElMessage.success('已删除')
+    load()
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '删除失败')
+  }
+}
+
+async function copyCredential(text: string) {
+  try {
+    await navigator.clipboard.writeText(text)
+    ElMessage.success('已复制')
+  } catch {
+    ElMessage.warning('复制失败，请手动选择复制')
+  }
+}
+
+onMounted(() => {
+  loadGroups()
+  load()
+})
+</script>
+
+<template>
+  <div class="page-stack">
+    <div class="page-heading">
+      <div>
+        <h2>店铺管理</h2>
+        <p>管理店铺账号、所属分组与自动化账号。</p>
+      </div>
+      <el-button type="primary" @click="openCreate">新增店铺</el-button>
+    </div>
+
+    <el-card shadow="never" style="margin-bottom: 14px">
+      <div class="filter-grid">
+        <div class="f-item">
+          <label>分组</label>
+          <el-select v-model="filter.groupId" placeholder="全部分组" clearable>
+            <el-option v-for="group in groupOptions" :key="group.id" :label="group.groupName" :value="group.id" />
+          </el-select>
+        </div>
+        <div class="f-item">
+          <label>店铺名称</label>
+          <el-input v-model="filter.shopName" placeholder="模糊搜索店铺名" clearable @keyup.enter="apply" />
+        </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">
+      <el-table v-loading="loading" :data="rows" stripe border>
+        <el-table-column prop="id" label="ID" width="80" />
+        <el-table-column prop="shopName" label="店铺名称" min-width="160" />
+        <el-table-column prop="mallName" label="商城" min-width="120" />
+        <el-table-column prop="groupName" label="分组" min-width="120" />
+        <el-table-column prop="account" label="账号" min-width="140" />
+        <el-table-column label="密码" width="140">
+          <template #default="{ row }">{{ (row as ShopSummary).passwordMasked || '—' }}</template>
+        </el-table-column>
+        <el-table-column prop="znUsername" label="自动化账号" min-width="140">
+          <template #default="{ row }">{{ (row as ShopSummary).znUsername || '—' }}</template>
+        </el-table-column>
+        <el-table-column prop="createdAt" label="创建时间" min-width="170">
+          <template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="220" fixed="right">
+          <template #default="{ row }">
+            <el-button text type="primary" size="small" @click="openEdit(row as ShopSummary)">编辑</el-button>
+            <el-button text type="warning" size="small" @click="showCredential(row as ShopSummary)">凭证</el-button>
+            <el-button text type="danger" size="small" @click="remove(row as ShopSummary)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="table-footer">
+        <span>共 <b>{{ total.toLocaleString() }}</b> 条</span>
+        <el-pagination background layout="prev, pager, next, jumper" :total="total" :page-size="pageSize" :current-page="page" @current-change="(p: number) => { page = p; load() }" />
+      </div>
+    </el-card>
+
+    <el-dialog v-model="dialogVisible" :title="editingId == null ? '新增店铺' : '编辑店铺'" width="600px">
+      <el-form label-width="120px">
+        <el-form-item label="所属分组" required>
+          <el-select v-model="form.groupId" placeholder="选择分组">
+            <el-option v-for="group in groupOptions" :key="group.id" :label="group.groupName" :value="group.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="店铺名称" required>
+          <el-input v-model="form.shopName" placeholder="店铺名称" />
+        </el-form-item>
+        <el-form-item label="商城名称" required>
+          <el-input v-model="form.mallName" placeholder="如 amazon" />
+        </el-form-item>
+        <el-form-item label="账号" required>
+          <el-input v-model="form.account" placeholder="登录账号" />
+        </el-form-item>
+        <el-form-item label="密码" required>
+          <el-input v-model="form.password" type="password" show-password :placeholder="editingId == null ? '登录密码' : '留空则不修改？(后端必填，编辑需重填)'" />
+        </el-form-item>
+        <el-form-item label="自动化账号">
+          <el-input v-model="form.znUsername" placeholder="可选，紫鸟自动化账号" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="submit">保存</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="credentialVisible" title="店铺明文凭据" width="560px">
+      <el-descriptions v-if="credential" :column="1" border>
+        <el-descriptions-item label="店铺名称">{{ credential.shopName }}</el-descriptions-item>
+        <el-descriptions-item label="分组">{{ credential.groupName || '—' }}</el-descriptions-item>
+        <el-descriptions-item label="商城">{{ credential.mallName || '—' }}</el-descriptions-item>
+        <el-descriptions-item label="账号">{{ credential.account }}</el-descriptions-item>
+        <el-descriptions-item label="密码">
+          <code>{{ credential.password }}</code>
+          <el-button text type="primary" size="small" @click="copyCredential(credential.password)">复制</el-button>
+        </el-descriptions-item>
+        <el-descriptions-item label="自动化账号">{{ credential.znUsername || '—' }}</el-descriptions-item>
+      </el-descriptions>
+      <p class="dim">明文凭据仅在本窗口临时显示，请勿外泄。</p>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.page-heading { display: flex; justify-content: space-between; align-items: center; }
+.filter-grid { display: flex; flex-wrap: wrap; gap: 12px 18px; }
+.f-item { display: flex; flex-direction: column; gap: 6px; width: 200px; }
+.f-item label { color: var(--el-text-color-secondary); font-size: 12px; }
+.f-item.btn-row { flex-direction: row; align-items: flex-end; gap: 8px; width: auto; }
+.table-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; }
+.table-footer span { color: var(--el-text-color-secondary); font-size: 12.5px; }
+.table-footer b { color: var(--el-text-color-primary); }
+.dim { color: var(--el-text-color-secondary); font-size: 12px; }
+</style>
@@ -0,0 +1,305 @@
+<script setup lang="ts">
+import { formatDateTime } from '@/utils/datetime'
+/** 视频任务记录页：筛选 + 分页表格 + 明细抽屉 + 视频批量下载 + 数据范围权限配置。 */
+import { computed, onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+  fetchImageVideoPermissionUsers,
+  fetchImageVideoTaskDetail,
+  fetchImageVideoTasks,
+  requestVideoZipDownload,
+  saveImageVideoPermissions,
+} from './image-video-api.ts'
+import { createImageVideoFilter, type ImageVideoFilter } from './image-video-filter.ts'
+import type { ImageVideoDetail, ImageVideoRow } from './image-video-model.ts'
+import { parseVideoSelectionKey } from './image-video-download.ts'
+import type { TaskPermissionItem } from './task-permission.ts'
+import { grantedUserIds } from './task-permission.ts'
+import type { TaskStatus } from './task-model.ts'
+
+const loading = ref(false)
+const rows = ref<ImageVideoRow[]>([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = 20
+
+const filter = reactive<ImageVideoFilter & { dateRange: string[] }>({ ...createImageVideoFilter(), dateRange: [] })
+
+const detailVisible = ref(false)
+const detailLoading = ref(false)
+const detail = ref<ImageVideoDetail | null>(null)
+
+const permissionVisible = ref(false)
+const permissionItems = ref<TaskPermissionItem[]>([])
+const permissionInitial = ref<number[]>([])
+const permissionSaving = ref(false)
+
+const downloading = ref(false)
+
+function statusLabel(status: TaskStatus): string {
+  const map: Record<string, string> = { PENDING: '排队中', RUNNING: '进行中', SUCCESS: '成功', FAILED: '失败', CANCELLED: '已取消', UNKNOWN: '未知' }
+  return map[status] || status
+}
+
+function statusType(status: TaskStatus): 'info' | 'warning' | 'success' | 'danger' | 'primary' {
+  if (status === 'SUCCESS') return 'success'
+  if (status === 'RUNNING') return 'warning'
+  if (status === 'FAILED') return 'danger'
+  if (status === 'CANCELLED') return 'info'
+  return 'info'
+}
+
+async function load() {
+  loading.value = true
+  try {
+    const result = await fetchImageVideoTasks(toFilter(), page.value, pageSize)
+    rows.value = result.items
+    total.value = result.total
+    page.value = result.page
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '视频任务加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function toFilter(): ImageVideoFilter {
+  return {
+    username: filter.username.trim(),
+    userId: filter.userId,
+    status: filter.status,
+    executeId: filter.executeId.trim(),
+    submittedFrom: filter.dateRange?.[0] || '',
+    submittedTo: filter.dateRange?.[1] || '',
+  }
+}
+
+function apply() {
+  page.value = 1
+  load()
+}
+
+function reset() {
+  Object.assign(filter, createImageVideoFilter())
+  filter.dateRange = []
+  page.value = 1
+  load()
+}
+
+async function openDetail(row: ImageVideoRow) {
+  detailLoading.value = true
+  detailVisible.value = true
+  try {
+    detail.value = await fetchImageVideoTaskDetail(row.taskId)
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '详情加载失败')
+    detailVisible.value = false
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+function videoKeysOf(row: ImageVideoRow): string[] {
+  const taskId = Number(row.taskId)
+  if (!taskId) return []
+  return (row.videos.length ? row.videos.map((_, index) => `${taskId}:${index}`) : [`${taskId}:0`]).filter((key) => parseVideoSelectionKey(key))
+}
+
+async function downloadRow(row: ImageVideoRow) {
+  const keys = videoKeysOf(row)
+  if (!keys.length) {
+    ElMessage.warning('该任务没有可下载的视频')
+    return
+  }
+  downloading.value = true
+  try {
+    const { blob, fileCount, errorCount } = await requestVideoZipDownload(keys)
+    saveBlob(blob, `视频下载_任务${row.taskId}.zip`)
+    const note = errorCount ? `，${errorCount} 个失败` : ''
+    ElMessage.success(`已打包 ${fileCount ?? keys.length} 个文件${note}`)
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '下载失败')
+  } finally {
+    downloading.value = false
+  }
+}
+
+function saveBlob(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob)
+  const anchor = document.createElement('a')
+  anchor.href = url
+  anchor.download = filename
+  anchor.click()
+  URL.revokeObjectURL(url)
+}
+
+async function openPermission() {
+  try {
+    permissionItems.value = await fetchImageVideoPermissionUsers()
+    permissionInitial.value = grantedUserIds(permissionItems.value)
+    permissionVisible.value = true
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '权限用户加载失败')
+  }
+}
+
+function toggleGrant(item: TaskPermissionItem) {
+  item.granted = !item.granted
+}
+
+async function savePermission() {
+  permissionSaving.value = true
+  try {
+    const next = grantedUserIds(permissionItems.value)
+    await saveImageVideoPermissions(next)
+    permissionInitial.value = next
+    ElMessage.success('权限已保存')
+    permissionVisible.value = false
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '保存失败')
+  } finally {
+    permissionSaving.value = false
+  }
+}
+
+const grantedCount = computed(() => grantedUserIds(permissionItems.value).length)
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="page-stack">
+    <div class="page-heading">
+      <div>
+        <h2>视频任务记录</h2>
+        <p>查看图生视频任务、下载结果、配置数据范围授权。</p>
+      </div>
+      <div class="actions">
+        <el-button :loading="downloading" @click="openPermission">权限配置</el-button>
+      </div>
+    </div>
+
+    <el-card shadow="never" style="margin-bottom: 14px">
+      <div class="filter-grid">
+        <div class="f-item">
+          <label>用户名</label>
+          <el-input v-model="filter.username" placeholder="用户名模糊" clearable @keyup.enter="apply" />
+        </div>
+        <div class="f-item">
+          <label>用户ID</label>
+          <el-input v-model="filter.userId" placeholder="可选" clearable @keyup.enter="apply" />
+        </div>
+        <div class="f-item">
+          <label>状态</label>
+          <el-select v-model="filter.status" placeholder="全部" clearable>
+            <el-option label="排队中" value="PENDING" />
+            <el-option label="进行中" value="RUNNING" />
+            <el-option label="成功" value="SUCCESS" />
+            <el-option label="失败" value="FAILED" />
+            <el-option label="已取消" value="CANCELLED" />
+          </el-select>
+        </div>
+        <div class="f-item">
+          <label>执行ID</label>
+          <el-input v-model="filter.executeId" placeholder="coze 执行ID" clearable @keyup.enter="apply" />
+        </div>
+        <div class="f-item wide">
+          <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">
+      <el-table v-loading="loading" :data="rows" stripe border>
+        <el-table-column prop="taskId" label="任务ID" width="110" />
+        <el-table-column prop="username" label="用户" width="130" />
+        <el-table-column prop="groupName" label="分组" width="120" />
+        <el-table-column label="状态" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="statusType((row as ImageVideoRow).status)" size="small">{{ statusLabel((row as ImageVideoRow).status) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="视频数" width="90" align="center">
+          <template #default="{ row }">{{ (row as ImageVideoRow).videos.length }}</template>
+        </el-table-column>
+        <el-table-column prop="cozeExecuteId" label="执行ID" min-width="150">
+          <template #default="{ row }">{{ (row as ImageVideoRow).cozeExecuteId || '—' }}</template>
+        </el-table-column>
+        <el-table-column label="提交时间" min-width="170">
+          <template #default="{ row }">{{ formatDateTime((row as ImageVideoRow).submittedAt) }}</template>
+        </el-table-column>
+        <el-table-column label="完成时间" min-width="170">
+          <template #default="{ row }">{{ formatDateTime((row as ImageVideoRow).completedAt) }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="150" fixed="right">
+          <template #default="{ row }">
+            <el-button text type="primary" size="small" @click="openDetail(row as ImageVideoRow)">明细</el-button>
+            <el-button text type="success" size="small" :loading="downloading" @click="downloadRow(row as ImageVideoRow)">下载</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="table-footer">
+        <span>共 <b>{{ total.toLocaleString() }}</b> 条</span>
+        <el-pagination background layout="prev, pager, next, jumper" :total="total" :page-size="pageSize" :current-page="page" @current-change="(p: number) => { page = p; load() }" />
+      </div>
+    </el-card>
+
+    <el-drawer v-model="detailVisible" title="任务明细" size="720px">
+      <div v-loading="detailLoading">
+        <template v-if="detail">
+          <el-descriptions :column="2" border size="small">
+            <el-descriptions-item label="任务ID">{{ detail.taskId }}</el-descriptions-item>
+            <el-descriptions-item label="用户">{{ detail.username }}</el-descriptions-item>
+            <el-descriptions-item label="状态">{{ statusLabel(detail.status) }}</el-descriptions-item>
+            <el-descriptions-item label="提交时间">{{ formatDateTime(detail.submittedAt) }}</el-descriptions-item>
+            <el-descriptions-item label="执行ID">{{ detail.cozeExecuteId || '—' }}</el-descriptions-item>
+            <el-descriptions-item label="错误">{{ detail.errorMessage || '—' }}</el-descriptions-item>
+          </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>
+      </div>
+    </el-drawer>
+
+    <el-dialog v-model="permissionVisible" title="视频任务数据范围授权" width="620px">
+      <p class="dim">勾选允许查看/操作视频任务的用户（仅数据范围，非按钮权限）。当前已授权 {{ grantedCount }} 人。</p>
+      <el-table :data="permissionItems" border size="small" max-height="420">
+        <el-table-column prop="id" label="ID" width="80" />
+        <el-table-column prop="username" label="用户名" min-width="160" />
+        <el-table-column label="授权" width="90" align="center">
+          <template #default="{ row }">
+            <el-checkbox :model-value="(row as TaskPermissionItem).granted" @change="toggleGrant(row as TaskPermissionItem)" />
+          </template>
+        </el-table-column>
+      </el-table>
+      <template #footer>
+        <el-button @click="permissionVisible = false">取消</el-button>
+        <el-button type="primary" :loading="permissionSaving" @click="savePermission">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.page-heading { display: flex; justify-content: space-between; align-items: center; }
+.actions { display: flex; align-items: center; gap: 10px; }
+.filter-grid { display: flex; flex-wrap: wrap; gap: 12px 18px; }
+.f-item { display: flex; flex-direction: column; gap: 6px; width: 170px; }
+.f-item label { color: var(--el-text-color-secondary); font-size: 12px; }
+.f-item.wide { width: 340px; }
+.f-item.btn-row { flex-direction: row; align-items: flex-end; gap: 8px; width: auto; }
+.table-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; }
+.table-footer span { color: var(--el-text-color-secondary); font-size: 12.5px; }
+.table-footer b { color: var(--el-text-color-primary); }
+.dim { color: var(--el-text-color-secondary); font-size: 12px; }
+.json-block { background: var(--el-fill-color-lighter); border-radius: 6px; padding: 10px; max-height: 320px; overflow: auto; font-size: 12px; }
+</style>
@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import { formatDateTime } from '@/utils/datetime'
+/** 店铺数据任务/记录页：按店铺分组展示抓取结果文件，支持筛选、单文件下载、批量下载入口与数据范围授权。 */
+import { computed, onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { asinCountryLabel } from '../asin/asin-country.ts'
+import { createShopDataFilter, type ShopDataFilter } from './shop-data-filter.ts'
+import type { ShopDataResultRow } from './shop-data-model.ts'
+import { fetchShopDataTaskList, requestShopDataZipDownload, fetchShopDataTaskPermissionUsers, saveShopDataTaskPermissions } from './shop-data-api.ts'
+import type { TaskStatus } from './task-model.ts'
+import type { TaskPermissionItem } from './task-permission.ts'
+import { grantedUserIds } from './task-permission.ts'
+
+const loading = ref(false)
+const rows = ref<ShopDataResultRow[]>([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = 20
+const shopCount = ref(0)
+
+const filter = reactive<ShopDataFilter & { dateRange: string[] }>({ ...createShopDataFilter(), dateRange: [] })
+
+const permissionVisible = ref(false)
+const permissionItems = ref<TaskPermissionItem[]>([])
+const permissionInitial = ref<number[]>([])
+const permissionSaving = ref(false)
+const downloadingKey = ref('')
+
+function statusLabel(status: TaskStatus): string {
+  const map: Record<string, string> = { PENDING: '排队中', RUNNING: '进行中', SUCCESS: '成功', FAILED: '失败', CANCELLED: '已取消', UNKNOWN: '未知' }
+  return map[status] || status
+}
+
+function statusType(status: TaskStatus): 'info' | 'warning' | 'success' | 'danger' {
+  if (status === 'SUCCESS') return 'success'
+  if (status === 'RUNNING') return 'warning'
+  if (status === 'FAILED') return 'danger'
+  return 'info'
+}
+
+function toFilter(): ShopDataFilter {
+  return {
+    shopName: filter.shopName.trim(),
+    groupName: filter.groupName.trim(),
+    country: filter.country.trim(),
+    createdFrom: filter.dateRange?.[0] || '',
+    createdTo: filter.dateRange?.[1] || '',
+  }
+}
+
+async function load() {
+  loading.value = true
+  try {
+    const result = await fetchShopDataTaskList(toFilter(), page.value, pageSize)
+    const groups = result.items
+    shopCount.value = groups.length
+    rows.value = groups.flatMap((group) => group.results)
+    total.value = result.total
+    page.value = result.page
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '店铺数据任务加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function apply() {
+  page.value = 1
+  load()
+}
+
+function reset() {
+  Object.assign(filter, createShopDataFilter())
+  filter.dateRange = []
+  page.value = 1
+  load()
+}
+
+async function downloadRow(row: ShopDataResultRow) {
+  if (!row.fileReady) {
+    ElMessage.warning('文件未就绪，无法下载')
+    return
+  }
+  downloadingKey.value = row.resultId
+  try {
+    const { blob, fileCount, errorCount } = await requestShopDataZipDownload([row.resultId])
+    saveBlob(blob, row.filename || `店铺数据_${row.shopName}.zip`)
+    const note = errorCount ? `，${errorCount} 个失败` : ''
+    ElMessage.success(`已打包 ${fileCount ?? 1} 个文件${note}`)
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '下载失败')
+  } finally {
+    downloadingKey.value = ''
+  }
+}
+
+function saveBlob(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob)
+  const anchor = document.createElement('a')
+  anchor.href = url
+  anchor.download = filename
+  anchor.click()
+  URL.revokeObjectURL(url)
+}
+
+async function openPermission() {
+  try {
+    permissionItems.value = await fetchShopDataTaskPermissionUsers()
+    permissionInitial.value = grantedUserIds(permissionItems.value)
+    permissionVisible.value = true
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '权限用户加载失败')
+  }
+}
+
+function toggleGrant(item: TaskPermissionItem) {
+  item.granted = !item.granted
+}
+
+async function savePermission() {
+  permissionSaving.value = true
+  try {
+    const next = grantedUserIds(permissionItems.value)
+    await saveShopDataTaskPermissions(next)
+    permissionInitial.value = next
+    ElMessage.success('权限已保存')
+    permissionVisible.value = false
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '保存失败')
+  } finally {
+    permissionSaving.value = false
+  }
+}
+
+const grantedCount = computed(() => grantedUserIds(permissionItems.value).length)
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="page-stack">
+    <div class="page-heading">
+      <div>
+        <h2>店铺数据任务/记录</h2>
+        <p>查看各店铺数据抓取结果文件，下载结果，配置数据范围授权。</p>
+      </div>
+      <div class="actions">
+        <el-button @click="openPermission">权限配置</el-button>
+      </div>
+    </div>
+
+    <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>
+          <el-select v-model="filter.country" placeholder="全部" clearable>
+            <el-option v-for="code in ['UK', 'DE', 'FR', 'ES', 'IT']" :key="code" :label="asinCountryLabel(code)" :value="code" />
+          </el-select>
+        </div>
+        <div class="f-item wide">
+          <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">
+      <el-table v-loading="loading" :data="rows" stripe border>
+        <el-table-column label="店铺" min-width="140">
+          <template #default="{ row }">
+            {{ (row as ShopDataResultRow).shopName }}
+            <el-tag v-if="(row as ShopDataResultRow).groupName" size="small" effect="plain" style="margin-left: 4px">{{ (row as ShopDataResultRow).groupName }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="username" label="用户" width="120" />
+        <el-table-column prop="taskNo" label="任务号" min-width="140" />
+        <el-table-column label="状态" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="statusType((row as ShopDataResultRow).status)" size="small">{{ statusLabel((row as ShopDataResultRow).status) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="站点" width="130">
+          <template #default="{ row }">
+            <span v-for="code in (row as ShopDataResultRow).countryCodes" :key="code" class="chip-gap">{{ asinCountryLabel(code) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="filename" label="文件名" min-width="200" show-overflow-tooltip />
+        <el-table-column label="行数" width="90" align="center">
+          <template #default="{ row }">{{ (row as ShopDataResultRow).rowCount ?? '—' }}</template>
+        </el-table-column>
+        <el-table-column label="创建时间" min-width="160">
+          <template #default="{ row }">{{ formatDateTime((row as ShopDataResultRow).createdAt) }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="150" fixed="right">
+          <template #default="{ row }">
+            <el-button text type="success" size="small" :loading="downloadingKey === (row as ShopDataResultRow).resultId" :disabled="!(row as ShopDataResultRow).fileReady" @click="downloadRow(row as ShopDataResultRow)">下载</el-button>
+            <el-button v-if="(row as ShopDataResultRow).fileUrl" text type="primary" size="small">
+              <el-link type="primary" :href="(row as ShopDataResultRow).fileUrl" target="_blank">查看</el-link>
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="table-footer">
+        <span>共 <b>{{ rows.length }}</b> 个结果文件（本页 {{ shopCount }} 家店铺 · 总计 {{ total.toLocaleString() }} 记录）</span>
+        <el-pagination background layout="prev, pager, next, jumper" :total="total" :page-size="pageSize" :current-page="page" @current-change="(p: number) => { page = p; load() }" />
+      </div>
+    </el-card>
+
+    <el-dialog v-model="permissionVisible" title="店铺数据任务数据范围授权" width="620px">
+      <p class="dim">勾选允许查看/操作店铺数据任务的用户。当前已授权 {{ grantedCount }} 人。</p>
+      <el-table :data="permissionItems" border size="small" max-height="420">
+        <el-table-column prop="id" label="ID" width="80" />
+        <el-table-column prop="username" label="用户名" min-width="160" />
+        <el-table-column label="授权" width="90" align="center">
+          <template #default="{ row }">
+            <el-checkbox :model-value="(row as TaskPermissionItem).granted" @change="toggleGrant(row as TaskPermissionItem)" />
+          </template>
+        </el-table-column>
+      </el-table>
+      <template #footer>
+        <el-button @click="permissionVisible = false">取消</el-button>
+        <el-button type="primary" :loading="permissionSaving" @click="savePermission">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.page-heading { display: flex; justify-content: space-between; align-items: center; }
+.actions { display: flex; align-items: center; gap: 10px; }
+.filter-grid { display: flex; flex-wrap: wrap; gap: 12px 18px; }
+.f-item { display: flex; flex-direction: column; gap: 6px; width: 170px; }
+.f-item label { color: var(--el-text-color-secondary); font-size: 12px; }
+.f-item.wide { width: 340px; }
+.f-item.btn-row { flex-direction: row; align-items: flex-end; gap: 8px; width: auto; }
+.table-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; }
+.table-footer span { color: var(--el-text-color-secondary); font-size: 12.5px; }
+.table-footer b { color: var(--el-text-color-primary); }
+.dim { color: var(--el-text-color-secondary); font-size: 12px; }
+.chip-gap { margin-right: 4px; }
+</style>
@@ -0,0 +1,87 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { readSource } from './helpers.ts'
+
+// module13（时间统一 YYYY-MM-DD HH:mm:ss）全页接入不变式：
+// 所有时间展示列/文本走 formatDateTime；不残留“裸日期 prop 列”或“时间 || '—'”旧写法。
+// 例外：DuplicateCheckPage 不动。
+
+const PAGES = [
+  'src/pages/account/GroupsPage.vue',
+  'src/pages/account/MenusPage.vue',
+  'src/pages/account/UsersPage.vue',
+  'src/pages/asin/AsinInvalidPage.vue',
+  'src/pages/asin/DedupeRegistryPage.vue',
+  'src/pages/asin/QueryAsinPage.vue',
+  'src/pages/asin/SkipPricePage.vue',
+  'src/pages/records/RecordsHistoryPage.vue',
+  'src/pages/records/RecordsSoftwareVersionPage.vue',
+  'src/pages/records/RecordsDigitalHumanVersionPage.vue',
+  'src/pages/shop/ShopKeysPage.vue',
+  'src/pages/shop/ShopManagePage.vue',
+  'src/pages/tasks/ImageVideoTasksPage.vue',
+  'src/pages/tasks/ShopDataTasksPage.vue',
+]
+
+const TIME_PROPS = 'createdAt|updatedAt|releasedAt|submittedAt|completedAt'
+
+test('test_datetime_sweep_normal_primary_path', () => {
+  for (const page of PAGES) {
+    const src = readSource(page)
+    assert.match(src, /formatDateTime/, `${page} 需引用 formatDateTime`)
+  }
+})
+
+test('test_datetime_sweep_normal_variant_input', () => {
+  // 各页时间列/文本确实经由 formatDateTime 包裹（至少含一次调用点）。
+  for (const page of PAGES) {
+    const src = readSource(page)
+    assert.ok((src.match(/formatDateTime\(/g) || []).length >= 1, `${page} 至少一处 formatDateTime 调用`)
+  }
+})
+
+test('test_datetime_sweep_normal_repeated_operation_is_idempotent', () => {
+  const check = (src: string) => new RegExp(`prop="(${TIME_PROPS})"[^>]*/>`).test(src)
+  for (const page of PAGES) {
+    const src = readSource(page)
+    assert.equal(check(src), false, `${page} 不得残留无 formatter 的裸日期 prop 列`)
+  }
+})
+
+test('test_datetime_sweep_boundary_empty_input', () => {
+  // 不再使用“时间字段 || '—'”旧兜底写法（空值由 formatDateTime 统一处理；
+  // 允许 updatedAt || createdAt 这种字段优先级写法，其值最终仍进 formatDateTime）。
+  for (const page of PAGES) {
+    const src = readSource(page)
+    assert.ok(!new RegExp(`\\.(${TIME_PROPS})\\s*\\|\\|\\s*['"]—['"]`).test(src), `${page} 不得再写 时间||'—'`)
+  }
+})
+
+test('test_datetime_sweep_boundary_single_item', () => {
+  // 时间标签仍存在（列还在），只是改成走格式化。
+  for (const page of PAGES) {
+    const src = readSource(page)
+    assert.match(src, /时间/, `${page} 仍应含“时间”列/文案`)
+  }
+})
+
+test('test_datetime_sweep_boundary_limit_or_missing_field', () => {
+  // 工具模块可被各页 import；路径为 @/utils/datetime。
+  for (const page of PAGES) {
+    const src = readSource(page)
+    assert.match(src, /from ['"]@\/utils\/datetime['"]/, `${page} 需 import 自 @/utils/datetime`)
+  }
+})
+
+test('test_datetime_sweep_invalid_input_rejected', () => {
+  // 例外页 DuplicateCheckPage 未接入且未改动（保持自身实现）。
+  const dup = readSource('src/pages/tasks/DuplicateCheckPage.vue')
+  assert.equal(/formatDateTime/.test(dup), false, 'DuplicateCheckPage 不应引入统一时间格式化')
+})
+
+test('test_datetime_sweep_dependency_failure_returns_actionable_message', () => {
+  // 时间字段名清单应覆盖当前出现过的展示字段。
+  const util = readSource('src/utils/datetime.ts')
+  assert.match(util, /formatDateTime/)
+  assert.match(util, /\\d\{2\}:\\d\{2\}:\\d\{2\}/, '工具输出含 HH:mm:ss 正则')
+})