refactor(self-operated): focus analytics pages on SKU metrics

src/modules/self-operated/components/AnalyticsView.vue

@@ -11,27 +11,25 @@ import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { getApiErrorMessage, getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
 import { analyticsApi } from '../api/analytics'
-import type { BusinessQuery, DailyResponse, InventoryAttention, InventorySort, Metric, Overview, OwnerOverview, QueryContext, RangePreset, SalesSummary } from '../types'
+import type { BusinessQuery, DailyResponse, InventoryAttention, InventorySort, Metric, Overview, QueryContext, RangePreset, SalesSummary } from '../types'
 import { RequestFence, RuntimePoller, contextParams, hasActiveTask, label, beijingTime, reasonsText, quantityText, sameContext, shownQuantity, validateCustomRange } from '../state'
 import SkuTrend from './SkuTrend.vue'
-import OwnerPicker from './OwnerPicker.vue'
-import OwnerOverviewPanel from './OwnerOverviewPanel.vue'
 
 const props = defineProps<{ mode: 'sales' | 'inventory' }>()
 const route = useRoute()
 const router = useRouter()
 const access = useAccessPreviewStore()
 const permitted = computed(() => access.can('platform:self-operated-analytics:list'))
-const filters = ref<QueryModel>({ warehouseCode: typeof route.query.warehouseCode === 'string' ? route.query.warehouseCode : '', customerCode: typeof route.query.customerCode === 'string' ? route.query.customerCode : '', sku: typeof route.query.sku === 'string' ? route.query.sku : '' })
-const applied = ref({ customerCode: String(filters.value.customerCode), sku: String(filters.value.sku) })
+function initialFilters(): QueryModel { return { warehouseCode: typeof route.query.warehouseCode === 'string' ? route.query.warehouseCode : '', sku: typeof route.query.sku === 'string' ? route.query.sku : '', analysis: 'summary', rangePreset: 'TODAY', windowDays: 30, attention: 'ALL', sortBy: 'AVAILABLE_DESC', threshold: '', customStart: '', customEnd: '' } }
+const filters = ref<QueryModel>(initialFilters())
+const applied = ref({ sku: String(filters.value.sku) })
 const overview = ref<Overview | null>(null)
 const context = ref<QueryContext | null>(null)
 const rows = ref<(SalesSummary | Metric)[]>([])
 const daily = ref<DailyResponse | null>(null)
-const ownerOverview = ref<OwnerOverview | null>(null)
-const attention = ref<InventoryAttention>('ALL')
-const sortBy = ref<InventorySort>('AVAILABLE_DESC')
-const thresholdInput = ref('')
+const attention = computed(() => (filters.value.attention || 'ALL') as InventoryAttention)
+const sortBy = computed(() => (filters.value.sortBy || 'AVAILABLE_DESC') as InventorySort)
+const thresholdInput = computed(() => String(filters.value.threshold ?? ''))
 const appliedInventory = ref<{ attention: InventoryAttention; sortBy: InventorySort; coverageDaysThreshold?: number }>({ attention: 'ALL', sortBy: 'AVAILABLE_DESC' })
 const loading = ref(false)
 const error = ref('')
@@ -42,24 +40,39 @@ const newDay = ref(false)
 const current = ref(1)
 const size = ref(20)
 const total = ref(0)
-const preset = ref<RangePreset>('TODAY')
-const customStart = ref('')
-const customEnd = ref('')
-const tab = ref<'summary' | 'hot' | 'slow'>('summary')
-const windowDays = ref<7 | 30>(30)
+const preset = computed(() => (filters.value.rangePreset || 'TODAY') as RangePreset)
+const customStart = computed(() => String(filters.value.customStart ?? ''))
+const customEnd = computed(() => String(filters.value.customEnd ?? ''))
+const tab = computed(() => (filters.value.analysis || 'summary') as 'summary' | 'hot' | 'slow')
+const windowDays = computed(() => Number(filters.value.windowDays || 30) as 7 | 30)
 const sourceAccount = 'lingxing-primary'
 const warehouseCode = computed(() => String(filters.value.warehouseCode ?? ''))
-const fields = computed<QueryField[]>(() => [
-  { key: 'warehouseCode', type: 'select', label: '仓库', options: [...new Map((overview.value?.warehouses ?? []).map(row => [row.warehouseCode, { value: row.warehouseCode, label: row.warehouseName || row.warehouseCode }])).values()] },
-  { key: 'sku', type: 'input', label: 'SKU', placeholder: '原始 SKU 精确编码' },
-])
+const fields = computed<QueryField[]>(() => {
+  const result: QueryField[] = [
+    { key: 'warehouseCode', type: 'select', label: '仓库', width: 210, placeholder: '请选择仓库（必选）', options: [...new Map((overview.value?.warehouses ?? []).map(row => [row.warehouseCode, { value: row.warehouseCode, label: row.warehouseName || row.warehouseCode }])).values()] },
+    { key: 'sku', type: 'input', label: 'SKU', width: 230, placeholder: '输入SKU编码（精确查询）' },
+  ]
+  if (props.mode === 'inventory') result.push(
+    { key: 'attention', type: 'select', label: '库存关注', width: 200, props: { 'aria-label': '库存关注' }, options: [{ value: 'ALL', label: '全部库存关注' }, { value: 'NO_OUTBOUND_30D', label: '近30天无出库' }, { value: 'COVERAGE_GT_THRESHOLD', label: '可售天数超过阈值' }, { value: 'FROZEN_STOCK', label: '冻结库存' }, { value: 'DEFECTIVE_STOCK', label: '次品库存' }, { value: 'UNASSESSABLE', label: '数据不足／待观察' }] },
+    { key: 'threshold', type: 'input', label: '可售天数阈值', width: 160, placeholder: '可售天数阈值（天）', props: { 'aria-label': '可售天数阈值', inputmode: 'numeric' } },
+    { key: 'sortBy', type: 'select', label: '库存排序', width: 210, options: [{ value: 'AVAILABLE_DESC', label: '正品可售量从高到低' }, { value: 'COVERAGE_DAYS_DESC', label: '可售天数从高到低' }, { value: 'PHYSICAL_DESC', label: '全品质实物从高到低' }, { value: 'OUTBOUND_30D_ASC', label: '近30天出库从低到高' }] },
+  )
+  else {
+    result.push({ key: 'analysis', type: 'select', label: '销量类别', width: 170, props: { clearable: false }, options: [{ value: 'summary', label: 'SKU销量' }, { value: 'hot', label: '热销Top100' }, { value: 'slow', label: '滞销Top100' }] })
+    if (tab.value === 'summary') {
+      result.push({ key: 'rangePreset', type: 'select', label: '销量日期', width: 150, props: { clearable: false }, options: [{ value: 'TODAY', label: '今日' }, { value: 'LAST_3_DAYS', label: '近3天' }, { value: 'THIS_WEEK', label: '本周' }, { value: 'LAST_15_DAYS', label: '近15天' }, { value: 'THIS_MONTH', label: '本月' }, { value: 'CUSTOM', label: '自定义' }] })
+      if (preset.value === 'CUSTOM') result.push({ key: 'customStart', type: 'date', label: '开始日期', width: 160 }, { key: 'customEnd', type: 'date', label: '结束日期', width: 160 })
+    } else if (tab.value === 'hot') result.push({ key: 'windowDays', type: 'select', label: '热销窗口', width: 180, props: { clearable: false }, options: [{ value: 7, label: '近7个完整自然日' }, { value: 30, label: '近30个完整自然日' }] })
+  }
+  return result
+})
 const summaryMode = computed(() => props.mode === 'sales' && tab.value === 'summary')
 const columns = computed<DataTableColumn[]>(() => [
   ...(summaryMode.value ? [{ key: 'actions', label: '操作', width: 110, slotName: 'actions', fixed: 'left' }] : []),
-  { prop: 'customerCode', label: '货主编码', minWidth: 140 },
-  ...(props.mode === 'inventory' ? [{ prop: 'customerName', label: '货主名称', minWidth: 140 }] : []),
   { prop: 'sku', label: 'SKU', minWidth: 170, ...(props.mode === 'inventory' ? { slotName: 'sku' } : {}) },
-  { prop: 'productName', label: '商品名称', minWidth: 190 }, { prop: 'quantityUnit', label: '单位', width: 80 },
+  { prop: 'productName', label: '商品名称', minWidth: 190 },
+  { key: 'owner', label: '所属货主', minWidth: 140, slotName: 'owner' },
+  { key: 'unit', label: '单位', width: 70, slotName: 'unit' },
   ...(props.mode === 'inventory' ? [
     { key: 'physicalQuantity', label: '全品质实物', width: 110, slotName: 'physicalQuantity' },
     { key: 'availableQuantity', label: '正品可售', width: 110, slotName: 'availableQuantity' },
@@ -74,14 +87,14 @@ const columns = computed<DataTableColumn[]>(() => [
   ] : [{ key: 'quantity', label: summaryMode.value ? '区间出库量 / 已采集量' : '完整窗口出库量', width: 200, slotName: 'quantity' }]),
   { key: 'status', label: '数据状态', minWidth: 130, slotName: 'status' },
   { key: 'reason', label: '说明', minWidth: 220, slotName: 'reason' },
-])
+].map(column => ['quantity', 'physicalQuantity', 'availableQuantity', 'frozenQuantity', 'defectivePhysicalQuantity', 'transitQuantity', 'outboundQuantity30d', 'averageDailyOutboundQuantity', 'inventoryCoverageDays'].includes(String(column.key)) ? { ...column, align: 'right' } : column))
 const dataFence = new RequestFence()
 const dailyFence = new RequestFence()
 const runtimeFence = new RequestFence()
 function asSummary(row: unknown) { return row as SalesSummary }
 function asMetric(row: unknown) { return row as Metric }
 function query(): BusinessQuery {
-  const result: BusinessQuery = { sourceAccount, warehouseCode: warehouseCode.value, customerCode: applied.value.customerCode || undefined, sku: applied.value.sku || undefined, current: current.value, size: size.value, ...contextParams(context.value) }
+  const result: BusinessQuery = { sourceAccount, warehouseCode: warehouseCode.value, sku: applied.value.sku || undefined, current: current.value, size: size.value, ...contextParams(context.value) }
   if (summaryMode.value) {
     result.rangePreset = preset.value
     if (preset.value === 'CUSTOM') { result.startDate = customStart.value; result.endDate = customEnd.value }
@@ -95,7 +108,7 @@ async function load(reset = false) {
     const problem = validateCustomRange(customStart.value, customEnd.value, context.value?.anchorDate)
     if (problem) { error.value = problem; return }
   }
-  if (reset) { context.value = null; daily.value = null; ownerOverview.value = null; rows.value = []; total.value = 0; newData.value = false; current.value = 1 }
+  if (reset) { context.value = null; daily.value = null; rows.value = []; total.value = 0; newData.value = false; current.value = 1 }
   dailyFence.cancel()
   const request = dataFence.begin()
   loading.value = true
@@ -107,18 +120,12 @@ async function load(reset = false) {
       : tab.value === 'hot' ? await analyticsApi.hot(params, request.signal)
         : tab.value === 'slow' ? await analyticsApi.slow(params, request.signal) : await analyticsApi.summary(params, request.signal)
     if (!request.current()) return
-    if (context.value && !sameContext(context.value, result.context)) throw new Error('查询版本已变化，请整体刷新')
-    const owner = props.mode === 'inventory' && applied.value.customerCode
-      ? await analyticsApi.ownerOverview({ sourceAccount, warehouseCode: warehouseCode.value, customerCode: applied.value.customerCode, coverageDaysThreshold: appliedInventory.value.coverageDaysThreshold, ...contextParams(result.context) }, request.signal)
-      : null
-    if (!request.current()) return
-    if (owner && !sameContext(result.context, owner.context)) throw new Error('货主概览版本与明细不一致，请整体刷新')
+    if (context.value && !sameContext(context.value, result.context)) throw new Error('查询版本已变化，请重新查询')
     context.value = result.context
-    ownerOverview.value = owner
     rows.value = result.records
     total.value = result.total
     daily.value = null
-  } catch (cause) { if (request.current()) { errorDetails.value = getApiErrorDetails(cause, '查询失败，保留上次成功数据；可整体刷新重新获取版本'); error.value = errorDetails.value.message } }
+  } catch (cause) { if (request.current()) { errorDetails.value = getApiErrorDetails(cause, '查询失败，请重新查询'); error.value = errorDetails.value.message } }
   finally { if (request.current()) loading.value = false }
 }
 async function showTrend(row: SalesSummary | Metric) {
@@ -132,7 +139,7 @@ async function showTrend(row: SalesSummary | Metric) {
     } else if (params.rangePreset === 'CUSTOM') { params.startDate = customStart.value; params.endDate = customEnd.value }
     const result = await analyticsApi.daily(params, request.signal)
     if (!request.current()) return
-    if (!context.value || !sameContext(context.value, result.context)) throw new Error('趋势版本与列表不一致，请整体刷新')
+    if (!context.value || !sameContext(context.value, result.context)) throw new Error('趋势版本与列表不一致，请重新查询')
     daily.value = result
   } catch (cause) { if (request.current()) error.value = getApiErrorMessage(cause, 'SKU趋势读取失败') }
 }
@@ -160,14 +167,14 @@ function search() {
     return
   }
   appliedInventory.value = { attention: attention.value, sortBy: sortBy.value, coverageDaysThreshold: rawThreshold ? Number(rawThreshold) : undefined }
-  applied.value = { customerCode: String(filters.value.customerCode ?? ''), sku: String(filters.value.sku ?? '') }
-  ownerOverview.value = null
+  applied.value = { sku: String(filters.value.sku ?? '').trim() }
   current.value = 1
-  void load()
+  void load(true)
 }
-function link(path: string) { void router.push({ path, query: { warehouseCode: warehouseCode.value, customerCode: applied.value.customerCode, sku: applied.value.sku } }) }
-watch(warehouseCode, () => { dataFence.cancel(); dailyFence.cancel(); rows.value = []; ownerOverview.value = null; total.value = 0; context.value = null; daily.value = null; error.value = ''; current.value = 1; void load(true) })
-watch([preset, tab, windowDays], () => { current.value = 1; void load() })
+function reset() { filters.value = { ...initialFilters(), warehouseCode: '', sku: '' }; applied.value = { sku: '' }; appliedInventory.value = { attention: 'ALL', sortBy: 'AVAILABLE_DESC' } }
+function link(path: string) { void router.push({ path, query: { warehouseCode: warehouseCode.value, sku: applied.value.sku } }) }
+watch(warehouseCode, () => { dataFence.cancel(); dailyFence.cancel(); rows.value = []; total.value = 0; context.value = null; daily.value = null; error.value = ''; current.value = 1; void load(true) })
+watch([preset, tab, windowDays], () => { current.value = 1; if (!summaryMode.value || preset.value !== 'CUSTOM' || customStart.value && customEnd.value) void load() })
 watch([current, size], () => { void load() })
 onMounted(() => { visibility(); poller.start(); document.addEventListener('visibilitychange', visibility); void load() })
 onUnmounted(() => { poller.stop(); dataFence.cancel(); dailyFence.cancel(); document.removeEventListener('visibilitychange', visibility) })
@@ -176,38 +183,24 @@ onUnmounted(() => { poller.stop(); dataFence.cancel(); dailyFence.cancel(); docu
   <AdminPage class="admin-density">
     <p v-if="!permitted" role="alert">没有自营经营数据查看权限。</p>
     <ListPageLayout v-else>
-      <p>来源账号：{{ sourceAccount }} · 北京时间 Asia/Shanghai · 数量为每个 SKU 的件数 PCS</p>
-      <QueryToolbar v-model="filters" :fields="fields" ariaLabel="自营分析筛选" :loading="loading" @search="search" @reset="search" />
-      <OwnerPicker :model-value="String(filters.customerCode ?? '')" :source-account="sourceAccount" :warehouse-code="warehouseCode" :context="context" @update:model-value="filters.customerCode = $event; search()" />
-      <div v-if="mode === 'inventory'" class="density-actions">
-        <label>库存关注 <el-select v-model="attention" aria-label="库存关注"><el-option v-for="item in [{ value: 'ALL', label: '全部' }, { value: 'NO_OUTBOUND_30D', label: '近30天无出库' }, { value: 'COVERAGE_GT_THRESHOLD', label: '可售天数超过阈值' }, { value: 'FROZEN_STOCK', label: '冻结库存' }, { value: 'DEFECTIVE_STOCK', label: '次品库存' }, { value: 'UNASSESSABLE', label: '数据不足／待观察' }]" :key="item.value" :value="item.value" :label="item.label" /></el-select></label>
-        <label>可售天数阈值 <el-input v-model="thresholdInput" aria-label="可售天数阈值" placeholder="可选，正整数天" /></label>
-        <label>排序 <el-select v-model="sortBy" aria-label="库存排序"><el-option v-for="item in [{ value: 'AVAILABLE_DESC', label: '正品可售量从高到低' }, { value: 'COVERAGE_DAYS_DESC', label: '可售天数从高到低' }, { value: 'PHYSICAL_DESC', label: '全品质实物从高到低' }, { value: 'OUTBOUND_30D_ASC', label: '近30天出库从低到高' }]" :key="item.value" :value="item.value" :label="item.label" /></el-select></label>
-        <el-button :disabled="!warehouseCode || loading" @click="search">应用库存关注</el-button>
-      </div>
-      <p v-if="!warehouseCode">请先选择仓库。货主默认为全部已授权范围。</p>
-      <p v-if="runtimeError" role="status">{{ runtimeError }}；最近观测：{{ beijingTime(overview?.observedAt) }}</p>
+      <QueryToolbar v-model="filters" :fields="fields" ariaLabel="自营SKU筛选" :loading="loading" :search-on-reset="false" @search="search" @reset="reset" />
+      <p v-if="runtimeError" class="analytics-note" role="status">{{ runtimeError }}；最近观测：{{ beijingTime(overview?.observedAt) }}</p>
       <LoadErrorState v-if="error" title="查询未完成" :message="error" :loading="loading" compact @retry="load(true)"><template #details><ApiErrorMeta v-if="errorDetails" :details="errorDetails" /></template></LoadErrorState>
-      <div v-if="mode === 'sales'" class="density-tabs" role="tablist" aria-label="销量分析类别">
-        <button v-for="item in [{ key: 'summary', name: 'SKU销量' }, { key: 'hot', name: '热销Top100' }, { key: 'slow', name: '滞销Top100' }]" :key="item.key" type="button" role="tab" :aria-selected="tab === item.key" :class="{ 'is-active': tab === item.key }" @click="tab = item.key as typeof tab">{{ item.name }}</button>
-      </div>
-      <div v-if="summaryMode" class="density-actions">
-        <el-button v-for="option in [{ key: 'TODAY', label: '今日' }, { key: 'LAST_3_DAYS', label: '近3天' }, { key: 'THIS_WEEK', label: '本周' }, { key: 'LAST_15_DAYS', label: '近15天' }, { key: 'THIS_MONTH', label: '本月' }, { key: 'CUSTOM', label: '自定义' }]" :key="option.key" :type="preset === option.key ? 'primary' : 'default'" @click="preset = option.key as RangePreset">{{ option.label }}</el-button>
-        <template v-if="preset === 'CUSTOM'"><el-date-picker v-model="customStart" type="date" value-format="YYYY-MM-DD" aria-label="开始日期" /><el-date-picker v-model="customEnd" type="date" value-format="YYYY-MM-DD" aria-label="结束日期" /><el-button @click="search">应用日期</el-button></template>
-      </div>
-      <div v-else-if="mode === 'sales' && tab === 'hot'"><label>完整日窗口 <el-select v-model="windowDays" aria-label="热销完整日窗口"><el-option :value="7" label="7个完整自然日" /><el-option :value="30" label="30个完整自然日" /></el-select></label></div>
-      <p v-else>固定使用截至昨日的 30 个完整自然日窗口。{{ mode === 'inventory' ? '实物含全品质，可售仅正品；冻结及次品不重复计入实物，在途不计当前占仓。日均量及可售天数由服务端计算，阈值仅用于本次查询。' : '滞销观察资格由服务端判断。' }}</p>
-      <p v-if="context">查询基准：{{ beijingTime(context.queryAsOf) }}（北京时间）；有效至 {{ beijingTime(context.queryExpiresAt) }}。范围 {{ context.rangeStartDate ?? '—' }} 至 {{ context.rangeEndDateExclusive ?? '—' }}（结束边界不含）。销量覆盖截至 {{ context.salesCoveredUntil ? beijingTime(context.salesCoveredUntil) : '尚无可用数据' }}；销量发布 {{ beijingTime(context.salesPublishedAt) }}；库存采集 {{ beijingTime(context.inventoryObservedFrom) }} 至 {{ beijingTime(context.inventoryObservedUntil) }}。{{ context.rebuildRequired ? '修订待重建' : '' }}</p>
-      <p v-if="newData" role="status">有新数据，可整体刷新。</p>
-      <p v-if="newDay" role="status">北京时间已跨日；当前范围仍按原查询基准日，整体刷新后取得新日期和版本。</p>
-      <p v-if="context && !summaryMode">指标计算窗口：{{ context.rangeStartDate ?? '—' }} 至 {{ context.rangeEndDateExclusive ?? '—' }}（结束边界不含）；{{ context.calculationWindowDays ?? (tab === 'hot' ? windowDays : 30) }} 天。</p>
-      <p v-for="state in (overview?.warehouses ?? []).filter(item => item.warehouseCode === warehouseCode)" :key="state.dataFamily">{{ state.dataFamily === 'INVENTORY' ? '库存' : '销量' }}当前时效：{{ label(state.dataFreshness) }}；最近发布时间 {{ beijingTime(state.lastPublishedAt) }}。运行状态按最近观测判断。</p>
-      <OwnerOverviewPanel v-if="mode === 'inventory' && ownerOverview" :data="ownerOverview" />
-      <p v-else-if="mode === 'inventory'">{{ applied.customerCode ? '当前货主尚无可用经营概览。' : '选择一个具体货主后显示全量经营概览；当前可浏览全仓 SKU 明细。' }}</p>
-      <DataTable appearance="integrated" v-model:page="current" v-model:page-size="size" :data="rows" :columns="columns" :loading="loading" :total="total" empty-text="所选范围无记录或尚无可用数据">
-        <template #toolbar-actions><el-button :disabled="!warehouseCode || loading" @click="load(true)">整体刷新</el-button><el-button :disabled="!warehouseCode" @click="link('/self-operated/collection')">查看采集状态</el-button><el-button :disabled="!warehouseCode" @click="link(mode === 'sales' ? '/self-operated/inventory' : '/self-operated/sales')">{{ mode === 'sales' ? '查看库存' : '查看销量' }}</el-button></template>
-        <template #actions="{ row }"><el-button link @click="showTrend(asSummary(row))">每日趋势</el-button></template>
-        <template #sku="{ row }"><el-button link :aria-label="`查看 ${asMetric(row).customerCode} ${asMetric(row).sku} 每日趋势`" @click="showTrend(asMetric(row))">{{ asMetric(row).sku }}</el-button></template>
+      <p v-if="newData || newDay" class="analytics-note" role="status">{{ newDay ? '北京时间已跨日。' : '有新数据。' }}点击查询更新数据。</p>
+      <details class="analytics-rules">
+        <summary>统计说明 · 北京时间／件</summary>
+        <p>{{ summaryMode ? '今日显示已采集量，完整日期显示出库量；未知数据不按零计算。' : '使用截至昨日的完整自然日；日均和可售天数由已采集数据计算。' }}同一SKU属于不同货主时分别展示。</p>
+        <p v-if="mode === 'inventory'">实物含全品质，可售仅正品；冻结、次品不重复计入实物，在途不计当前占仓。可售天数阈值只用于本次查询。</p>
+        <p v-if="context">查询时间：{{ beijingTime(context.queryAsOf) }}；有效至 {{ beijingTime(context.queryExpiresAt) }}。销量覆盖截至 {{ context.salesCoveredUntil ? beijingTime(context.salesCoveredUntil) : '尚无可用数据' }}。{{ context.rebuildRequired ? '数据修订待重建。' : '' }}</p>
+        <p v-if="context">实际计算区间：{{ context.rangeStartDate ?? '—' }} 至 {{ context.rangeEndDateExclusive ?? '—' }}（截止日不含）<template v-if="context.calculationWindowDays != null">；{{ context.calculationWindowDays }} 天</template>。</p>
+        <p v-for="state in (overview?.warehouses ?? []).filter(item => item.warehouseCode === warehouseCode)" :key="state.dataFamily">{{ state.dataFamily === 'INVENTORY' ? '库存' : '销量' }}数据：{{ label(state.dataFreshness) }}；最近发布时间 {{ beijingTime(state.lastPublishedAt) }}。</p>
+      </details>
+      <DataTable appearance="integrated" v-model:page="current" v-model:page-size="size" :data="rows" :columns="columns" :loading="loading" :total="total" :empty-text="!warehouseCode ? '请选择仓库后查询SKU' : error ? '查询失败，请重试' : '暂无符合条件的SKU数据'">
+        <template #toolbar-actions><el-button :disabled="!warehouseCode" @click="link('/self-operated/collection')">查看采集状态</el-button><el-button :disabled="!warehouseCode" @click="link(mode === 'sales' ? '/self-operated/inventory' : '/self-operated/sales')">{{ mode === 'sales' ? '查看库存' : '查看销量' }}</el-button></template>
+        <template #actions="{ row }"><el-button class="density-action" @click="showTrend(asSummary(row))">每日趋势</el-button></template>
+        <template #sku="{ row }"><el-button class="density-action" :aria-label="`查看 ${asMetric(row).customerCode} ${asMetric(row).sku} 每日趋势`" @click="showTrend(asMetric(row))">{{ asMetric(row).sku }}</el-button></template>
+        <template #owner="{ row }"><span>{{ asMetric(row).customerName || asMetric(row).customerCode || '—' }}</span><small v-if="asMetric(row).customerName && asMetric(row).customerCode" class="analytics-owner-code">{{ asMetric(row).customerCode }}</small></template>
+        <template #unit="{ row }">{{ asMetric(row).quantityUnit === 'PCS' ? '件' : asMetric(row).quantityUnit || '—' }}</template>
         <template #lastOutbound="{ row }">{{ asMetric(row).lastObservedOutboundDate ?? '已采集历史内未见出库' }}<br />历史覆盖起点：{{ asMetric(row).observedHistoryStartDate ?? '—' }}</template>
         <template #attention="{ row }">{{ reasonsText(asMetric(row).attentionReasons) }}</template>
         <template #quantity="{ row }">{{ quantityText(summaryMode ? shownQuantity(asSummary(row)) : asMetric(row).outboundQuantity) }} {{ summaryMode && asSummary(row).dataStatus !== 'COMPLETE' ? '（已采集，未完整）' : '' }}</template>
@@ -216,9 +209,15 @@ onUnmounted(() => { poller.stop(); dataFence.cancel(); dailyFence.cancel(); docu
         <template v-for="key in ['physicalQuantity', 'availableQuantity', 'frozenQuantity', 'defectivePhysicalQuantity', 'transitQuantity', 'outboundQuantity30d', 'averageDailyOutboundQuantity', 'inventoryCoverageDays'] as const" :key="key" #[key]="{ row }">{{ quantityText(asMetric(row)[key]) }}<span v-if="asMetric(row).quantityStatuses?.[key] && asMetric(row).quantityStatuses?.[key] !== 'VALID'">（{{ label(asMetric(row).quantityStatuses?.[key]) }}）</span></template>
       </DataTable>
       <template v-if="daily && (summaryMode || mode === 'inventory')">
-        <el-button @click="router.push({ path: mode === 'inventory' ? '/self-operated/sales' : '/self-operated/inventory', query: { warehouseCode, customerCode: daily.summary.customerCode, sku: daily.summary.sku } })">{{ mode === 'inventory' ? '在销量页查看该 SKU' : '在库存页查看该 SKU' }}</el-button>
+        <el-button @click="router.push({ path: mode === 'inventory' ? '/self-operated/sales' : '/self-operated/inventory', query: { warehouseCode, sku: daily.summary.sku } })">{{ mode === 'inventory' ? '在销量页查看该SKU（全部货主）' : '在库存页查看该SKU（全部货主）' }}</el-button>
         <SkuTrend :data="daily" />
       </template>
     </ListPageLayout>
   </AdminPage>
 </template>
+<style scoped>
+.analytics-note, .analytics-rules { margin: 0; font-size: var(--admin-font-caption); }
+.analytics-rules summary { cursor: pointer; }
+.analytics-rules p { margin: var(--admin-space-2) 0; }
+.analytics-owner-code { display: block; font-size: var(--admin-font-caption); color: var(--el-text-color-secondary); }
+</style>