task-280(验收反馈): 重复检测对齐reference P0(分组筛选生效/抽屉聚合+汇总徽章/台账计数预载/total_dup计数/矩阵表头吸顶;后端含工作区在途console化代码)

2026-09-06 02:41:44 +08:00
parent 3dd39bba44
commit ab787ceff7
8 changed files with 1350 additions and 0 deletions
@@ -0,0 +1,694 @@
+<script setup lang="ts">
+/**
+ * 店铺数据重复检查 · 撞款控制台（reference asin-store-console 后台化，自家样式）。
+ * 数据面：/duplicate-check-console(指标/店铺/撞款全集/分组统计) + /duplicate-check-ledger(台账分页) + /duplicate-check-export(CSV)。
+ */
+import { computed, onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import type { DuplicateItem, DuplicateOccurrence, DuplicateMetrics } from './duplicate-model.ts'
+import { fetchDuplicateConsole, fetchDuplicateLedger, requestDuplicateCsvBlob, type LedgerSortKey } from './duplicate-console-api.ts'
+import { aggregateDrawerRows, drawerSummaryOf, dupWithinGroup, indexShopGroups, type DrawerAggRow, type DrawerSummary, type ShopGroups } from './duplicate-console-logic.ts'
+import type { DuplicateConsole, LedgerPage, LedgerRow } from './duplicate-console-model.ts'
+import { ASIN_COUNTRY_CODES, asinCountryLabel } from '../asin/asin-country.ts'
+
+type Tab = 'dup' | 'ledger'
+type Scope = 'global' | 'group'
+
+const consoleData = ref<DuplicateConsole | null>(null)
+const loading = ref(false)
+const loadError = ref('')
+const reanalyzing = ref(false)
+
+const filter = reactive({ asin: '', shop: '', group: '', country: '', dateRange: [] as string[] })
+
+const activeTab = ref<Tab>('dup')
+const scope = ref<Scope>('global')
+const selectedGroup = ref('')
+const shopGroups = ref<ShopGroups>({ members: {}, shopGroupNames: {} })
+
+const ledgerItems = ref<LedgerRow[]>([])
+const ledgerTotal = ref(0)
+const ledgerPage = ref(1)
+const ledgerLoading = ref(false)
+const sortState = reactive<{ key: LedgerSortKey | ''; dir: 'asc' | 'desc' }>({ key: 'earliest', dir: 'asc' })
+
+const drawerVisible = ref(false)
+const drawerTitle = ref('')
+const drawerBrand = ref('')
+const drawerDup = ref(false)
+const drawerOccurrences = ref<DuplicateOccurrence[]>([])
+/** 明细抽屉：店铺×站点聚合 + 汇总徽章（对齐 reference 抽屉的 次数/国家chips/最早上架）。 */
+const drawerAggRows = computed<DrawerAggRow[]>(() => aggregateDrawerRows(drawerOccurrences.value))
+const drawerSummary = computed<DrawerSummary>(() => drawerSummaryOf(drawerOccurrences.value))
+
+const groupInfoVisible = ref(false)
+
+const overview = computed(() => consoleData.value?.overview ?? null)
+const summary = computed<DuplicateMetrics | null>(() => overview.value?.summary ?? null)
+const shops = computed(() => overview.value?.shops ?? [])
+const dupItems = computed(() => consoleData.value?.dup ?? [])
+const groupStats = computed(() => consoleData.value?.groups ?? [])
+
+const countryOptions = computed<string[]>(() => {
+  const codes = new Set<string>(ASIN_COUNTRY_CODES as readonly string[])
+  for (const shop of shops.value) for (const code of shop.countryCodes || []) codes.add(code.toUpperCase())
+  for (const item of dupItems.value) for (const occ of item.occurrences) if (occ.country) codes.add(occ.country.toUpperCase())
+  return [...codes]
+})
+
+const kpis = computed(() => {
+  const s = summary.value
+  const totalDup = dupItems.value.length
+  const groupDupTotal = groupStats.value.reduce((sum, group) => sum + group.dupCount, 0)
+  const siteCount = s?.siteCount ?? 0
+  return [
+    { label: '唯一ASIN', value: (s?.asinTotal ?? 0).toLocaleString(), sub: '去重后', danger: false },
+    { label: '上架记录', value: (s?.recordTotal ?? 0).toLocaleString(), sub: '含重复扫描', danger: false },
+    { label: '在售店铺', value: (s?.shopCount ?? 0).toLocaleString(), sub: '本批数据', danger: false },
+    { label: '分组', value: groupStats.value.length.toLocaleString(), sub: groupStats.value.map((group) => group.name).join(' / ') || '未配置', danger: false },
+    { label: '全店撞款', value: (s?.duplicateAsinTotal ?? totalDup).toLocaleString(), sub: '≥2店在售', danger: true },
+    { label: '组内撞款', value: groupDupTotal.toLocaleString(), sub: '分组内≥2店', danger: groupDupTotal > 0 },
+    { label: '覆盖站点', value: siteCount.toLocaleString(), sub: countryOptions.value.map(asinCountryLabel).join(' / '), danger: false },
+  ]
+})
+
+const storeDistribution = computed(() => {
+  const list = shops.value.map((shop) => ({ name: shop.shopName, group: shop.groupName, records: shop.recordCount, asins: shop.asinCount }))
+  const max = Math.max(1, ...list.map((s) => s.records))
+  return { max, list }
+})
+
+function dateFrom(): string {
+  return filter.dateRange?.[0] || ''
+}
+function dateTo(): string {
+  return filter.dateRange?.[1] || ''
+}
+
+function activeFilterParams() {
+  return { asin: filter.asin.trim(), shopName: filter.shop.trim(), group: filter.group.trim(), country: filter.country, site: '', dateFrom: dateFrom(), dateTo: dateTo() }
+}
+
+function selectedGroupMembers(): string[] {
+  if (!selectedGroup.value) return []
+  return shopGroups.value.members[selectedGroup.value] || []
+}
+
+const groupChips = computed(() => groupStats.value.filter((group) => group.shopCount >= 2))
+
+/** 当前撞款行集：全局=撞款全集；分组=组内成员撞款子集。 */
+const dupRows = computed<DuplicateItem[]>(() => {
+  if (scope.value === 'global') return dupItems.value
+  return dupWithinGroup(dupItems.value, selectedGroupMembers())
+})
+
+/** 矩阵列：分组范围=该组成员店；全店=全部可见店铺。 */
+const matrixShops = computed<string[]>(() => {
+  if (scope.value === 'group') return selectedGroupMembers()
+  return shops.value.map((shop) => shop.shopName)
+})
+
+const activeGroupStat = computed(() => groupStats.value.find((group) => group.name === selectedGroup.value) || null)
+/** 撞款 Tab 计数：全店范围取后端权威 total_dup（防后端截断计数偏小）；分组范围取组内子集长度。 */
+const totalDupCount = computed(() => (scope.value === 'global' ? (consoleData.value?.totalDup ?? dupRows.value.length) : dupRows.value.length))
+
+function itemBrand(item: DuplicateItem): string {
+  for (const occ of item.occurrences || []) if (occ.brand) return occ.brand
+  return ''
+}
+
+/* ----- 矩阵单元格辅助 ----- */
+function shopKey(name: string): string {
+  return (name || '').trim().toLowerCase()
+}
+function cellOccurrences(item: DuplicateItem, shop: string): DuplicateOccurrence[] {
+  const key = shopKey(shop)
+  return (item.occurrences || []).filter((occ) => shopKey(occ.shopName) === key)
+}
+function cellCount(item: DuplicateItem, shop: string): number {
+  return cellOccurrences(item, shop).length
+}
+function cellCountryDots(item: DuplicateItem, shop: string): string[] {
+  const codes = new Set<string>()
+  for (const occ of cellOccurrences(item, shop)) if (occ.country) codes.add(occ.country.toUpperCase())
+  return [...codes]
+}
+function cellCountryCount(item: DuplicateItem, shop: string, code: string): number {
+  return cellOccurrences(item, shop).filter((occ) => (occ.country || '').toUpperCase() === code).length
+}
+function cellTitle(item: DuplicateItem, shop: string): string {
+  const count = cellCount(item, shop)
+  if (!count) return `${shop} 无此 ASIN`
+  const sites = cellCountryDots(item, shop).map((code) => `${asinCountryLabel(code)} ${cellCountryCount(item, shop, code)}条`).join('、')
+  return `${shop} 在售 ${count} 条 · ${sites}`
+}
+
+async function loadConsole() {
+  loading.value = true
+  loadError.value = ''
+  try {
+    consoleData.value = await fetchDuplicateConsole({ view: '', ...activeFilterParams() })
+    shopGroups.value = indexShopGroups(shops.value)
+    if (groupStats.value.length && !groupStats.value.some((group) => group.name === selectedGroup.value)) {
+      selectedGroup.value = groupChips.value[0] ? groupChips.value[0].name : ''
+    }
+  } catch (error) {
+    loadError.value = error instanceof Error ? error.message : '撞款数据加载失败'
+    ElMessage.error(loadError.value)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadLedger(page: number, resetSort = false) {
+  ledgerLoading.value = true
+  try {
+    if (resetSort) {
+      sortState.key = 'earliest'
+      sortState.dir = 'asc'
+    }
+    const result: LedgerPage = await fetchDuplicateLedger({ view: '', ...activeFilterParams() }, page, 100, sortState.key, sortState.dir)
+    ledgerItems.value = result.items
+    ledgerTotal.value = result.total
+    ledgerPage.value = result.page
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '台账加载失败')
+  } finally {
+    ledgerLoading.value = false
+  }
+}
+
+function applyQuery() {
+  if (dateFrom() && dateTo() && dateFrom() > dateTo()) {
+    ElMessage.warning('开始日期不能晚于结束日期')
+    return
+  }
+  loadConsole()
+  if (activeTab.value === 'ledger') loadLedger(1)
+}
+
+function resetQuery() {
+  filter.asin = ''
+  filter.shop = ''
+  filter.group = ''
+  filter.country = ''
+  filter.dateRange = []
+  scope.value = 'global'
+  selectedGroup.value = ''
+  activeTab.value = 'dup'
+  applyQuery()
+}
+
+function switchTab(tab: Tab) {
+  activeTab.value = tab
+  if (tab === 'ledger') loadLedger(1, true)
+}
+
+function switchScope(next: Scope) {
+  scope.value = next
+  if (next === 'group' && !selectedGroup.value && groupChips.value.length) selectedGroup.value = groupChips.value[0].name
+}
+
+async function reAnalyze() {
+  reanalyzing.value = true
+  try {
+    await fetchDuplicateConsole({ view: '', asin: '', shopName: '', country: '', site: '', dateFrom: '', dateTo: '' })
+    await loadConsole()
+    ElMessage.success('重新分析完成，已同步最新扫描结果')
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '重新分析失败')
+  } finally {
+    reanalyzing.value = false
+  }
+}
+
+interface ShopSiteBlock {
+  shopName: string
+  groupName: string
+  sites: { country: string; times: string[] }[]
+  count: number
+}
+
+/** occurrence 按 店铺 → 站点 → 时间 汇总成撞款卡结构。 */
+function shopBlocks(item: DuplicateItem, restrictShops: string[] = []): ShopSiteBlock[] {
+  const restrict = new Set(restrictShops.map(shopKey))
+  const order: string[] = []
+  const blocks = new Map<string, ShopSiteBlock>()
+  for (const occ of item.occurrences || []) {
+    const shop = occ.shopName || ''
+    if (restrict.size && !restrict.has(shopKey(shop))) continue
+    let block = blocks.get(shop)
+    if (!block) {
+      block = { shopName: shop, groupName: occ.groupName || '', sites: [], count: 0 }
+      blocks.set(shop, block)
+      order.push(shop)
+    }
+    const country = occ.country || ''
+    let site = block.sites.find((s) => s.country === country)
+    if (!site) {
+      site = { country, times: [] }
+      block.sites.push(site)
+    }
+    if (occ.date) site.times.push(occ.date)
+    block.count++
+  }
+  return order.map((shop) => blocks.get(shop) as ShopSiteBlock)
+}
+
+function openDrawer(asin: string, brand: string, dupFlag: boolean, occurrences: DuplicateOccurrence[]) {
+  drawerTitle.value = asin
+  drawerBrand.value = brand
+  drawerDup.value = dupFlag
+  drawerOccurrences.value = [...occurrences]
+  drawerVisible.value = true
+}
+
+function openDupDrawer(item: DuplicateItem) {
+  openDrawer(item.asin, itemBrand(item), item.shopCount >= 2, item.occurrences)
+}
+
+function openLedgerDrawer(row: LedgerRow) {
+  openDrawer(row.asin, row.brand, row.storeCount >= 2, row.occurrences)
+}
+
+function onLedgerSort(change: { prop: string; order: string | null }) {
+  const key = change.prop as LedgerSortKey
+  if (!change.order || !key) return
+  sortState.key = key
+  sortState.dir = change.order === 'descending' ? 'desc' : 'asc'
+  loadLedger(1)
+}
+
+async function exportCsv() {
+  let view = 'monitor'
+  const params = activeFilterParams()
+  if (activeTab.value === 'ledger') {
+    view = 'all'
+  } else if (scope.value === 'group' && selectedGroup.value) {
+    params.shopName = selectedGroup.value
+  }
+  try {
+    const blob = await requestDuplicateCsvBlob({ view, ...params }, view)
+    saveBlob(blob, `店铺数据_${activeTab.value === 'ledger' ? '台账' : '撞款'}_${new Date().toISOString().slice(0, 10)}.csv`)
+    ElMessage.success('已导出 CSV')
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '导出失败')
+  }
+}
+
+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)
+}
+
+function siteColor(code: string): string {
+  const map: Record<string, string> = { UK: '#2E5BE6', DE: '#D9912B', FR: '#7C5CD6', ES: '#1F9D62', IT: '#D63A4A' }
+  return map[code.toUpperCase()] || '#98A1B1'
+}
+
+function displayDate(value: string): string {
+  return (value || '').slice(0, 16)
+}
+
+onMounted(() => {
+  loadConsole()
+  // 台账 Tab 计数打开即显示：挂载时预取第一页拿 total（对齐 reference 渲染即见台账条数）。
+  void loadLedger(1)
+})
+</script>
+
+<template>
+  <div class="page-stack dup-console">
+    <div class="page-heading">
+      <div>
+        <h2>店铺数据撞款监控</h2>
+        <p>按 ASIN×店铺×站点分析同一 ASIN 在多家自营店铺/分组内的重复上架；分组归属来自店铺管理，只读展示。</p>
+      </div>
+      <div class="actions">
+        <span v-if="overview" class="updated">数据更新时间 {{ overview.scannedAt || '—' }}</span>
+        <el-button :loading="reanalyzing" @click="reAnalyze">重新分析</el-button>
+        <el-button @click="exportCsv">导出CSV</el-button>
+      </div>
+    </div>
+
+    <el-alert v-if="loadError" type="error" :title="loadError" :closable="false" show-icon style="margin-bottom: 12px" />
+
+    <el-card shadow="never" style="margin-bottom: 14px">
+      <div class="filter-grid">
+        <div class="f-item">
+          <label>ASIN</label>
+          <el-input v-model="filter.asin" placeholder="模糊搜索ASIN" clearable @keyup.enter="applyQuery" />
+        </div>
+        <div class="f-item">
+          <label>店铺</label>
+          <el-select v-model="filter.shop" placeholder="全部店铺" clearable filterable>
+            <el-option v-for="shop in shops" :key="shop.shopName" :label="shop.shopName" :value="shop.shopName" />
+          </el-select>
+        </div>
+        <div class="f-item">
+          <label>分组</label>
+          <el-select v-model="filter.group" placeholder="全部分组" clearable filterable>
+            <el-option v-for="group in groupStats" :key="group.name" :label="group.name" :value="group.name" />
+          </el-select>
+        </div>
+        <div class="f-item">
+          <label>国家/站点</label>
+          <el-select v-model="filter.country" placeholder="全部国家" clearable>
+            <el-option v-for="code in countryOptions" :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="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="applyQuery">查询</el-button>
+          <el-button @click="resetQuery">重置</el-button>
+        </div>
+      </div>
+    </el-card>
+
+    <template v-if="consoleData && !loading">
+      <!-- KPI -->
+      <div class="kpi-row">
+        <div v-for="kpi in kpis" :key="kpi.label" class="kpi-card" :class="{ danger: kpi.danger }">
+          <div class="k-label">{{ kpi.label }}</div>
+          <div class="k-value">{{ kpi.value }}</div>
+          <div class="k-sub">{{ kpi.sub }}</div>
+        </div>
+      </div>
+
+      <!-- 店铺上架分布 -->
+      <el-card shadow="never" style="margin-bottom: 14px">
+        <div class="card-title">店铺上架分布 <span class="hint">各店铺在本批站点中的上架记录量</span></div>
+        <div class="store-bars">
+          <div v-for="bar in storeDistribution.list" :key="bar.name" class="s-bar">
+            <div class="s-name">
+              <span>{{ bar.name }}<span v-if="bar.group" class="s-group"> · {{ bar.group }}</span></span>
+              <b>{{ bar.records.toLocaleString() }}</b>
+            </div>
+            <div class="s-track"><div class="s-fill" :style="{ width: Math.round((bar.records / storeDistribution.max) * 100) + '%' }"></div></div>
+            <div class="s-meta">{{ bar.asins.toLocaleString() }} 个 ASIN</div>
+          </div>
+        </div>
+      </el-card>
+
+      <!-- 主区 Tabs -->
+      <div class="tab-bar">
+        <div class="tabs">
+          <button class="tab" :class="{ active: activeTab === 'dup' }" @click="switchTab('dup')">撞款监控 <span class="t-count">{{ totalDupCount }}</span></button>
+          <button class="tab" :class="{ active: activeTab === 'ledger' }" @click="switchTab('ledger')">全部ASIN台账 <span class="t-count">{{ ledgerTotal }}</span></button>
+        </div>
+        <el-button text type="primary" @click="groupInfoVisible = true">分组说明</el-button>
+      </div>
+
+      <!-- ============ 撞款监控 ============ -->
+      <template v-if="activeTab === 'dup'">
+        <div class="scope-bar">
+          <div class="seg">
+            <button class="seg-btn" :class="{ active: scope === 'global' }" @click="switchScope('global')">全店撞款</button>
+            <button class="seg-btn" :class="{ active: scope === 'group' }" @click="switchScope('group')">分组撞款</button>
+          </div>
+          <div v-if="scope === 'group'" class="group-chips">
+            <template v-if="groupChips.length">
+              <button v-for="group in groupChips" :key="group.name" class="g-chip" :class="{ active: selectedGroup === group.name, dup: group.dupCount > 0 }" @click="selectedGroup = group.name">
+                {{ group.name }} <span class="g-count">{{ group.shopCount }}店 · {{ group.dupCount }}撞款</span>
+              </button>
+            </template>
+            <span v-else class="dim">暂无 ≥2 家店铺的分组，无法做分组撞款分析</span>
+          </div>
+        </div>
+
+        <div v-if="scope === 'group' && activeGroupStat" class="group-summary">
+          <div class="gs-item"><div class="gs-v">{{ activeGroupStat.shopCount }}</div><div class="gs-l">组员店铺</div></div>
+          <div class="gs-item"><div class="gs-v">{{ activeGroupStat.asinUnique.toLocaleString() }}</div><div class="gs-l">组内唯一ASIN</div></div>
+          <div class="gs-item"><div class="gs-v">{{ activeGroupStat.recordCount.toLocaleString() }}</div><div class="gs-l">组内上架记录</div></div>
+          <div class="gs-item" :class="{ warn: activeGroupStat.dupCount > 0 }"><div class="gs-v">{{ activeGroupStat.dupCount }}</div><div class="gs-l">组内撞款ASIN</div></div>
+        </div>
+
+        <div class="section-title">撞款覆盖矩阵 <span class="hint">行 = ASIN，列 = 店铺；数字为该店在售此 ASIN 的记录量，点击行看明细</span></div>
+        <div class="matrix-wrap">
+          <table v-if="dupRows.length" class="matrix">
+            <thead>
+              <tr>
+                <th>ASIN</th>
+                <th>品牌</th>
+                <th v-for="shop in matrixShops" :key="shop" style="text-align: center">{{ shop }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in dupRows" :key="item.asin" @click="openDupDrawer(item)">
+                <td class="asin-cell">{{ item.asin }}</td>
+                <td class="brand-cell">{{ itemBrand(item) || '—' }}</td>
+                <td v-for="shop in matrixShops" :key="shop" style="text-align: center">
+                  <div class="m-cell" :class="{ empty: cellCount(item, shop) === 0 }" :title="cellTitle(item, shop)">
+                    {{ cellCount(item, shop) || '' }}
+                    <span class="dots"><span v-for="code in cellCountryDots(item, shop)" :key="code" class="m-dot" :style="{ background: siteColor(code) }"></span></span>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <el-empty v-else description="当前范围下没有撞款ASIN" />
+        </div>
+
+        <div class="section-title" style="margin-top: 22px">撞款详情 <span class="hint">同一 ASIN 在多家店铺的上架时间明细</span></div>
+        <div v-if="dupRows.length" class="dup-cards">
+          <div v-for="item in dupRows" :key="item.asin" class="dup-card">
+            <div class="dup-head">
+              <span class="dup-asin">{{ item.asin }}</span>
+              <span class="badge dup">{{ item.shopCount }}店在售</span>
+              <span class="dup-brand">{{ itemBrand(item) || '未知品牌' }}</span>
+              <el-button text type="primary" size="small" @click="openDupDrawer(item)">查看明细</el-button>
+            </div>
+            <div class="dup-body">
+              <div v-for="block in shopBlocks(item)" :key="block.shopName" class="store-col">
+                <div class="st-name">{{ block.shopName }}<span class="st-count">{{ block.count }} 条</span></div>
+                <div v-if="block.groupName" class="st-grp">分组：{{ block.groupName }}</div>
+                <div v-for="site in block.sites" :key="site.country" class="c-site">
+                  <div class="c-site-head">
+                    <span class="m-dot" :style="{ background: siteColor(site.country) }"></span>{{ asinCountryLabel(site.country) }} · {{ site.times.length }} 次
+                  </div>
+                  <div class="c-times">
+                    <span v-for="(time, index) in site.times" :key="index" class="c-time">{{ time }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <el-empty v-else description="当前范围下没有撞款ASIN" />
+      </template>
+
+      <!-- ============ 全部ASIN台账 ============ -->
+      <template v-else>
+        <el-card shadow="never">
+          <el-table v-loading="ledgerLoading" :data="ledgerItems" stripe border @sort-change="onLedgerSort">
+            <el-table-column prop="asin" label="ASIN" min-width="140" sortable="custom">
+              <template #default="{ row }">
+                <el-link type="primary" @click="openLedgerDrawer(row as LedgerRow)">{{ row.asin }}</el-link>
+              </template>
+            </el-table-column>
+            <el-table-column prop="brand" label="品牌" min-width="120" sortable="custom" />
+            <el-table-column prop="storeCount" label="上架店铺" width="110" sortable="custom" align="center">
+              <template #default="{ row }">
+                <el-tag :type="(row as LedgerRow).storeCount >= 2 ? 'danger' : 'success'" size="small">{{ (row as LedgerRow).storeCount }} 店</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="涉及店铺" min-width="190">
+              <template #default="{ row }">
+                <el-tag v-for="store in (row as LedgerRow).stores" :key="store" size="small" class="tag-gap" type="info" effect="plain">{{ store }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="分组" min-width="120">
+              <template #default="{ row }">
+                <template v-if="(row as LedgerRow).groups.length">
+                  <el-tag v-for="group in (row as LedgerRow).groups" :key="group" size="small" class="tag-gap">{{ group }}</el-tag>
+                </template>
+                <span v-else class="dim">—</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="站点" min-width="130">
+              <template #default="{ row }">
+                <span v-for="code in (row as LedgerRow).countries" :key="code" class="site-chip" :style="{ background: siteColor(code) + '1F', color: siteColor(code) }">{{ asinCountryLabel(code) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="recordCount" label="上架次数" width="100" sortable="custom" align="center" />
+            <el-table-column prop="earliest" label="最早上架" min-width="165" sortable="custom">
+              <template #default="{ row }">{{ displayDate((row as LedgerRow).earliest) }}</template>
+            </el-table-column>
+            <el-table-column prop="latest" label="最近上架" min-width="165" sortable="custom">
+              <template #default="{ row }">{{ displayDate((row as LedgerRow).latest) }}</template>
+            </el-table-column>
+            <el-table-column label="操作" width="90" fixed="right">
+              <template #default="{ row }">
+                <el-button text type="primary" size="small" @click="openLedgerDrawer(row as LedgerRow)">明细</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="table-footer">
+            <span>共 <b>{{ ledgerTotal.toLocaleString() }}</b> 条</span>
+            <el-pagination background layout="prev, pager, next, jumper" :total="ledgerTotal" :page-size="100" :current-page="ledgerPage" @current-change="(page: number) => loadLedger(page)" />
+          </div>
+        </el-card>
+      </template>
+    </template>
+
+    <div v-else-if="!loadError && !loading" class="empty-state" v-loading="loading">
+      <el-empty description="暂无扫描结果，请点击右上角「重新分析」触发撞款扫描" />
+    </div>
+  </div>
+
+  <!-- 明细抽屉 -->
+  <el-drawer v-model="drawerVisible" :title="drawerTitle" size="600px">
+    <div class="drawer-head">
+      <span v-if="drawerDup" class="badge dup">撞款</span>
+      <span class="d-brand">{{ drawerTitle }} · 品牌：{{ drawerBrand || '未知' }}</span>
+    </div>
+    <div v-if="drawerOccurrences.length" class="drawer-badges">
+      <span class="badge store">{{ drawerSummary.shopCount }} 家店铺</span>
+      <span v-for="code in drawerSummary.countries" :key="code" class="chip" :style="{ background: siteColor(code) }">{{ asinCountryLabel(code) }}</span>
+      <span class="badge count">{{ drawerSummary.totalRecords }} 次上架</span>
+      <span class="badge time">最早上架 {{ drawerSummary.earliest }}</span>
+    </div>
+    <el-table v-if="drawerAggRows.length" :data="drawerAggRows" border size="small">
+      <el-table-column prop="shopName" label="店铺" min-width="130" />
+      <el-table-column label="分组" min-width="90">
+        <template #default="{ row }">{{ (row as DrawerAggRow).groupName || '—' }}</template>
+      </el-table-column>
+      <el-table-column label="站点" min-width="80">
+        <template #default="{ row }">{{ asinCountryLabel((row as DrawerAggRow).country || '') }}</template>
+      </el-table-column>
+      <el-table-column label="上架时间（升序）" min-width="170">
+        <template #default="{ row }">
+          <div v-for="(time, index) in (row as DrawerAggRow).times" :key="index" class="drawer-time">{{ time }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="次数" min-width="70" align="center">
+        <template #default="{ row }">{{ (row as DrawerAggRow).count }}</template>
+      </el-table-column>
+    </el-table>
+    <el-empty v-else description="暂无上架时间明细" />
+  </el-drawer>
+
+  <!-- 分组说明（只读） -->
+  <el-drawer v-model="groupInfoVisible" title="分组撞款说明" size="520px">
+    <el-alert type="info" :closable="false" show-icon title="分组归属来自「店铺管理」的真实店铺分组，仅用于本页分组撞款范围切换；本页不做分组编辑。如需调整店铺所属分组，请到店铺管理维护（会影响对应负责人的数据查看范围）。" />
+    <el-table :data="groupStats" border style="margin-top: 14px">
+      <el-table-column prop="name" label="分组" min-width="110" />
+      <el-table-column label="店铺数" width="80" align="center">
+        <template #default="{ row }">{{ (row as { shopCount: number }).shopCount }}</template>
+      </el-table-column>
+      <el-table-column label="成员店铺" min-width="200">
+        <template #default="{ row }">
+          <el-tag v-for="shop in (shopGroups.members[(row as { name: string }).name] || [])" :key="shop" size="small" class="tag-gap" effect="plain">{{ shop }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="组内撞款" width="90" align="center">
+        <template #default="{ row }">{{ (row as { dupCount: number }).dupCount }}</template>
+      </el-table-column>
+    </el-table>
+  </el-drawer>
+</template>
+
+<style scoped>
+.dup-console { max-width: 1560px; }
+.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
+.page-heading .actions { display: flex; align-items: center; gap: 10px; }
+.updated { color: var(--el-text-color-secondary); font-size: 12px; }
+.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: 320px; }
+.f-item.btn-row { flex-direction: row; align-items: flex-end; gap: 8px; width: auto; }
+.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
+.kpi-card { background: var(--el-bg-color); border: 1px solid var(--el-border-color-lighter); border-radius: 10px; padding: 12px 16px; box-shadow: var(--el-box-shadow-lighter); }
+.k-label { color: var(--el-text-color-secondary); font-size: 12px; margin-bottom: 6px; }
+.k-value { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
+.kpi-card.danger .k-value { color: var(--el-color-danger); }
+.k-sub { color: var(--el-text-color-secondary); font-size: 11px; margin-top: 3px; }
+.card-title { font-size: 13px; font-weight: 600; margin-bottom: 12px; display: flex; gap: 8px; align-items: baseline; }
+.hint { font-size: 11px; font-weight: 400; color: var(--el-text-color-secondary); }
+.store-bars { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
+.s-name { display: flex; justify-content: space-between; font-size: 12px; color: var(--el-text-color-secondary); margin-bottom: 5px; }
+.s-name b { color: var(--el-text-color-primary); font-weight: 600; }
+.s-group { color: var(--el-text-color-secondary); }
+.s-track { height: 8px; background: var(--el-fill-color-light); border-radius: 5px; overflow: hidden; }
+.s-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #6366f1, #8b9cf6); }
+.s-meta { font-size: 11px; color: var(--el-text-color-secondary); margin-top: 5px; }
+.tab-bar { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 14px; }
+.tabs { display: flex; gap: 4px; background: var(--el-bg-color); border: 1px solid var(--el-border-color-lighter); border-radius: 9px; padding: 4px; }
+.tab { padding: 7px 18px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--el-text-color-regular); cursor: pointer; background: transparent; border: none; display: inline-flex; gap: 7px; align-items: center; }
+.tab:hover { color: var(--el-color-primary); }
+.tab.active { background: var(--el-color-primary); color: #fff; }
+.t-count { background: rgba(0, 0, 0, 0.12); border-radius: 10px; padding: 0 7px; font-size: 11px; }
+.tab.active .t-count { background: rgba(255, 255, 255, 0.25); }
+.scope-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
+.seg { display: flex; gap: 4px; background: var(--el-bg-color); border: 1px solid var(--el-border-color-lighter); border-radius: 9px; padding: 4px; }
+.seg-btn { padding: 7px 16px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--el-text-color-regular); border: none; background: transparent; cursor: pointer; }
+.seg-btn:hover { color: var(--el-color-primary); }
+.seg-btn.active { background: var(--el-color-primary); color: #fff; }
+.group-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+.g-chip { padding: 7px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 600; background: var(--el-bg-color); border: 1px solid var(--el-border-color); color: var(--el-text-color-regular); cursor: pointer; transition: all 0.15s; }
+.g-chip:hover { border-color: var(--el-color-primary); color: var(--el-color-primary); }
+.g-chip.active { background: var(--el-color-primary); border-color: var(--el-color-primary); color: #fff; }
+.g-chip.dup:not(.active) { border-color: #f3c6cc; background: #fdebed; color: #d63a4a; }
+.g-count { font-size: 11px; opacity: 0.85; }
+.dim { color: var(--el-text-color-secondary); font-size: 12px; }
+.group-summary { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--el-bg-color); border: 1px solid var(--el-border-color-lighter); border-radius: 10px; margin-bottom: 16px; overflow: hidden; }
+.gs-item { padding: 14px 20px; border-right: 1px solid var(--el-border-color-lighter); }
+.gs-item:last-child { border-right: none; }
+.gs-v { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
+.gs-item.warn .gs-v { color: var(--el-color-danger); }
+.gs-l { font-size: 12px; color: var(--el-text-color-secondary); margin-top: 4px; }
+.section-title { font-size: 14px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
+.matrix-wrap { overflow-x: auto; border-radius: 10px; background: var(--el-bg-color); border: 1px solid var(--el-border-color-lighter); }
+table.matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
+table.matrix th { background: var(--el-fill-color-lighter); color: var(--el-text-color-regular); font-size: 12px; font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--el-border-color-lighter); text-align: left; white-space: nowrap; }
+table.matrix td { padding: 8px 12px; border-bottom: 1px solid var(--el-border-color-extra-light); white-space: nowrap; }
+table.matrix tbody tr { cursor: pointer; }
+table.matrix tbody tr:hover td { background: var(--el-fill-color-light); }
+.asin-cell { font-family: 'Cascadia Mono', Consolas, monospace; font-weight: 700; color: var(--el-color-primary); }
+.brand-cell { color: var(--el-text-color-secondary); }
+.m-cell { width: 42px; height: 30px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--el-color-primary); background: var(--el-color-primary-light-9); position: relative; }
+.m-cell.empty { background: var(--el-fill-color-light); color: var(--el-text-color-placeholder); font-weight: 400; }
+.dots { position: absolute; bottom: 2px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; }
+.m-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
+.dup-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
+.dup-card { background: var(--el-bg-color); border: 1px solid var(--el-border-color-lighter); border-radius: 10px; overflow: hidden; }
+.dup-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--el-border-color-lighter); background: var(--el-fill-color-lighter); flex-wrap: wrap; }
+.dup-asin { font-family: 'Cascadia Mono', Consolas, monospace; font-weight: 700; color: var(--el-color-primary); font-size: 13px; }
+.badge { display: inline-flex; align-items: center; border-radius: 20px; padding: 2px 9px; font-size: 11px; font-weight: 600; white-space: nowrap; }
+.badge.dup { background: #fdebed; color: #d63a4a; }
+.dup-brand { color: var(--el-text-color-secondary); font-size: 12px; }
+.dup-body { padding: 12px 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
+.store-col .st-name { font-size: 12.5px; font-weight: 700; margin-bottom: 6px; display: flex; gap: 6px; align-items: center; }
+.st-count { font-size: 11px; color: var(--el-text-color-secondary); font-weight: 400; }
+.st-grp { font-size: 10.5px; color: var(--el-text-color-secondary); margin-bottom: 4px; }
+.c-site { font-size: 11px; color: var(--el-text-color-regular); margin-top: 6px; }
+.c-site-head { font-weight: 600; display: flex; gap: 5px; align-items: center; }
+.c-times { margin-top: 2px; }
+.c-time { font-family: 'Cascadia Mono', Consolas, monospace; font-size: 11px; color: var(--el-text-color-secondary); line-height: 1.7; display: block; }
+.site-chip { border-radius: 5px; padding: 1px 7px; font-size: 11.5px; margin-right: 4px; font-weight: 600; display: inline-block; }
+.tag-gap { margin-right: 4px; margin-bottom: 2px; }
+.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); }
+.drawer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
+.d-brand { color: var(--el-text-color-secondary); font-size: 13px; }
+/* 明细抽屉汇总徽章组（对齐 reference：N家店铺/国家chips/N次上架/最早上架）。 */
+.drawer-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
+.badge.store { background: #e8f1fa; color: #2f5d8b; }
+.badge.count { background: #fdebed; color: #d63a4a; }
+.badge.time { background: var(--el-fill-color-light); color: var(--el-text-color-regular); }
+.chip { border-radius: 20px; padding: 2px 9px; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; }
+.drawer-time { font-family: 'Cascadia Mono', Consolas, monospace; font-size: 11.5px; color: var(--el-text-color-regular); line-height: 1.7; }
+/* 矩阵表头吸顶（对齐 reference sticky 表头）。 */
+.matrix-wrap { max-height: 480px; overflow-y: auto; }
+table.matrix th { position: sticky; top: 0; z-index: 1; }
+.empty-state { margin-top: 12px; }
+</style>
@@ -0,0 +1,65 @@
+/** 撞款控制台/台账适配：/api/admin/shop-data-crawl/duplicate-check-console、-ledger、-export。 */
+import { http } from '@/api/http'
+import { toDuplicateItemsQuery, type DuplicateFilter } from './duplicate-filter.ts'
+import {
+  parseDuplicateConsole,
+  parseLedgerPage,
+  type DuplicateConsole,
+  type LedgerPage,
+} from './duplicate-console-model.ts'
+
+export const DUPLICATE_CHECK_ENDPOINT = '/api/admin/shop-data-crawl'
+
+/** console 端点吃 asin/shop_name/group/country/site/date_from/date_to；多余分页参数后端忽略。 */
+function toConsoleQuery(filter: DuplicateFilter): Record<string, string> {
+  const query: Record<string, string> = {}
+  const asin = (filter.asin || '').trim()
+  if (asin) query.asin = asin
+  const shopName = (filter.shopName || '').trim()
+  if (shopName) query.shop_name = shopName
+  const group = (filter.group || '').trim()
+  if (group) query.group = group
+  const country = (filter.country || '').trim()
+  if (country) query.country = country
+  const site = (filter.site || '').trim()
+  if (site) query.site = site
+  const dateFrom = (filter.dateFrom || '').trim()
+  if (dateFrom) query.date_from = dateFrom
+  const dateTo = (filter.dateTo || '').trim()
+  if (dateTo) query.date_to = dateTo
+  return query
+}
+
+export type LedgerSortKey = 'asin' | 'brand' | 'store_count' | 'record_count' | 'earliest' | 'latest'
+
+/** 加载撞款控制台快照：GET /duplicate-check-console。 */
+export async function fetchDuplicateConsole(filter: DuplicateFilter): Promise<DuplicateConsole> {
+  const { data } = await http.get<unknown>(`${DUPLICATE_CHECK_ENDPOINT}/duplicate-check-console`, {
+    params: toConsoleQuery(filter),
+  })
+  return parseDuplicateConsole(data)
+}
+
+/** 加载全部 ASIN 台账分页（含未撞款）：GET /duplicate-check-ledger。 */
+export async function fetchDuplicateLedger(
+  filter: DuplicateFilter,
+  page: number,
+  pageSize: number,
+  sortKey: LedgerSortKey | '',
+  sortDir: 'asc' | 'desc',
+): Promise<LedgerPage> {
+  const params: Record<string, string | number> = { ...toConsoleQuery(filter), page, page_size: pageSize }
+  if (sortKey) params.sort_key = sortKey
+  params.sort_dir = sortDir
+  const { data } = await http.get<unknown>(`${DUPLICATE_CHECK_ENDPOINT}/duplicate-check-ledger`, { params })
+  return parseLedgerPage(data)
+}
+
+/** 导出 CSV(撞款 view=monitor / 台账 view=all)：GET /duplicate-check-export → Blob。 */
+export async function requestDuplicateCsvBlob(filter: DuplicateFilter, view: string): Promise<Blob> {
+  const { data } = await http.get<Blob>(`${DUPLICATE_CHECK_ENDPOINT}/duplicate-check-export`, {
+    params: toDuplicateItemsQuery({ ...filter, view }, 1, 100),
+    responseType: 'blob',
+  })
+  return data
+}
@@ -0,0 +1,144 @@
+/** 撞款控制台视图派生（分组索引 / 组内撞款子集 / 店铺列并集）：纯逻辑。 */
+import type { DuplicateItem, DuplicateOccurrence, DuplicateShop } from './duplicate-model.ts'
+
+export interface ShopGroups {
+  /** 分组名 → 成员店铺（展示名，保持首次出现顺序）。 */
+  members: Record<string, string[]>
+  /** 店铺展示名 → 所属分组名（含多分组拆分的每一组）。 */
+  shopGroupNames: Record<string, string[]>
+}
+
+const GROUP_SEPARATOR = /[、,，/;；]/
+
+function shopKey(name: string): string {
+  return (name || '').trim().toLowerCase()
+}
+
+function splitTokens(value: string): string[] {
+  const out: string[] = []
+  for (const token of (value || '').split(GROUP_SEPARATOR)) {
+    const group = token.trim()
+    if (group && !out.includes(group)) out.push(group)
+  }
+  return out
+}
+
+/** 由店铺分布构建 分组→成员 与 店铺→分组 双向索引。 */
+export function indexShopGroups(shops: DuplicateShop[]): ShopGroups {
+  const members: Record<string, string[]> = {}
+  const shopGroupNames: Record<string, string[]> = {}
+  for (const shop of shops || []) {
+    const display = (shop.shopName || '').trim()
+    if (!display) continue
+    const groups = splitTokens(shop.groupName || '')
+    for (const group of groups) {
+      const list = members[group] || (members[group] = [])
+      if (!list.includes(display)) list.push(display)
+      const owned = shopGroupNames[display] || (shopGroupNames[display] = [])
+      if (!owned.includes(group)) owned.push(group)
+    }
+  }
+  return { members, shopGroupNames }
+}
+
+/** 仅在指定成员店铺(展示名)内保留 occurrences；重算 shop_count，返回 ≥2 店的撞款子集。 */
+export function dupWithinGroup(items: DuplicateItem[], memberShops: string[]): DuplicateItem[] {
+  const memberKeys = new Set<string>()
+  for (const shop of memberShops || []) memberKeys.add(shopKey(shop))
+  const result: DuplicateItem[] = []
+  for (const item of items || []) {
+    const kept: DuplicateOccurrence[] = []
+    const shops = new Set<string>()
+    for (const occ of item.occurrences || []) {
+      if (memberKeys.has(shopKey(occ.shopName))) {
+        kept.push(occ)
+        shops.add(occ.shopName || '')
+      }
+    }
+    if (kept.length > 0 && shops.size >= 2) {
+      result.push({ asin: item.asin, shopCount: shops.size, recordCount: kept.length, occurrences: kept })
+    }
+  }
+  return result
+}
+
+/** 撞款行涉及店铺的并集列（出现顺序去重）；memberShops 非空时仅取交集成员的子集顺序。 */
+export function storeColumnsOf(items: DuplicateItem[], memberShops: string[] = []): string[] {
+  const restricted = new Set(memberShops.map((shop) => shopKey(shop)))
+  const useRestricted = restricted.size > 0
+  const order: string[] = []
+  const seen = new Set<string>()
+  const push = (name: string): void => {
+    const key = shopKey(name)
+    if (!name || seen.has(key) || (useRestricted && !restricted.has(key))) return
+    seen.add(key)
+    order.push(name)
+  }
+  for (const item of items || []) {
+    for (const occ of item.occurrences || []) push(occ.shopName || '')
+  }
+  if (order.length === 0 && memberShops.length > 0) {
+    // 无撞款行但该组有成员店铺：矩阵列仍需展示组员店。
+    for (const shop of memberShops) {
+      const key = shopKey(shop)
+      if (!seen.has(key)) {
+        seen.add(key)
+        order.push(shop)
+      }
+    }
+  }
+  return order
+}
+
+/** 明细抽屉聚合行：店铺×站点聚合（对齐 reference 抽屉的 店铺/分组/站点/上架时间(升序堆叠)/次数）。 */
+export interface DrawerAggRow {
+  shopName: string
+  groupName: string
+  country: string
+  times: string[]
+  count: number
+}
+
+export function aggregateDrawerRows(occurrences: DuplicateOccurrence[]): DrawerAggRow[] {
+  const rows = new Map<string, DrawerAggRow>()
+  for (const occ of occurrences || []) {
+    const key = `${shopKey(occ.shopName)}|${(occ.country || '').trim().toUpperCase()}`
+    let row = rows.get(key)
+    if (!row) {
+      row = { shopName: occ.shopName || '', groupName: occ.groupName || '', country: (occ.country || '').trim(), times: [], count: 0 }
+      rows.set(key, row)
+    }
+    row.times.push(occ.date || '')
+    row.count += 1
+  }
+  const list = [...rows.values()]
+  for (const row of list) row.times.sort()
+  return list
+}
+
+/** 明细抽屉汇总徽章：N店在售/N家店铺/国家chips/N次上架/最早上架。 */
+export interface DrawerSummary {
+  shopCount: number
+  countries: string[]
+  totalRecords: number
+  earliest: string
+}
+
+export function drawerSummaryOf(occurrences: DuplicateOccurrence[]): DrawerSummary {
+  const shops = new Set<string>()
+  const countries: string[] = []
+  const seenCountry = new Set<string>()
+  let earliest = ''
+  let totalRecords = 0
+  for (const occ of occurrences || []) {
+    if (occ.shopName) shops.add(shopKey(occ.shopName))
+    const country = (occ.country || '').trim()
+    if (country && !seenCountry.has(country)) {
+      seenCountry.add(country)
+      countries.push(country)
+    }
+    if (occ.date && (!earliest || occ.date < earliest)) earliest = occ.date
+    totalRecords += 1
+  }
+  return { shopCount: shops.size, countries, totalRecords, earliest }
+}
@@ -9,6 +9,8 @@ export interface DuplicateFilter {
  view: string
  asin: string
  shopName: string
+  /** 分组筛选（撞款分组名，后端按组员店铺裁剪可见集）。 */
+  group?: string
  country: string
  site: string
  dateFrom: string