优化

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import { Info } from '@lucide/vue'
 import { computed, nextTick, onActivated, onDeactivated, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import AdminPage from '@/shared/components/AdminPage.vue'
@@ -290,18 +291,25 @@ onUnmounted(() => { poller.stop(); dataFence.cancel(); dailyFence.cancel(); docu
       <LoadErrorState v-if="error" title="查询未完成" :message="error" :loading="loading" compact @retry="load(true)"><template #details><ApiErrorMeta v-if="errorDetails" :details="errorDetails" /></template></LoadErrorState>
       <p v-if="salesRangePending" class="analytics-note" role="status">日期范围尚未应用，请选择完整起止日期后点击查询。<template v-if="rows.length">当前列表及每日趋势仍使用上次已应用的统计区间。</template></p>
       <p v-if="newData || newDay" class="analytics-note" role="status">{{ newDay ? '北京时间已跨日。' : '有新数据。' }}点击查询更新数据。</p>
+
+        </template>
+        <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>
+          <el-popover placement="bottom-end" trigger="click" :width="460" title="统计口径与采集时间" teleported>
+            <template #reference><el-button aria-label="统计口径与采集时间" title="统计口径与采集时间"><Info :size="16" aria-hidden="true" /></el-button></template>
+            <div class="analytics-information admin-density">
       <p v-if="mode === 'inventory' && context" class="analytics-note" data-testid="inventory-observation">本仓库存采集时间（北京时间）：{{ beijingTime(context.inventoryObservedFrom) }} 至 {{ beijingTime(context.inventoryObservedUntil) }}。{{ context.inventoryObservedFrom && context.inventoryObservedUntil ? '当前列表来自本仓一轮完整分页观测，各页在该时段内采集，不代表同一瞬间的库存。' : '尚无完整库存观测时段，缺失时间不以发布时间代替。' }}</p>
       <p v-if="mode === 'inventory' && context" class="analytics-note" data-testid="inventory-window">销量计算区间（北京时间）：{{ context.rangeStartDate ?? '—' }} 至 {{ context.rangeEndDateExclusive ? previousDate(context.rangeEndDateExclusive) : '—' }}（含截止日），{{ displayedWindowDays }} 天；销量状态：{{ label(context.salesStatus) }}。未采齐不推算日均及预计可售天数。</p>
-      <details class="analytics-rules">
-        <summary>统计说明 · 北京时间／件</summary>
+      <div class="analytics-rules">
+
         <p>{{ summaryMode ? '今日显示已采集量，完整日期显示出库量；未知数据不按零计算。' : mode === 'inventory' ? '按所选截止日及10／30个完整自然日计算；窗口未采齐时不以部分销量推算日均或可售天数。' : '使用截至昨日的完整自然日；日均和可售天数由已采集数据计算。' }}同一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>
+      </div>
+            </div>
+          </el-popover>
         </template>
-        <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>
@@ -327,7 +335,8 @@ onUnmounted(() => { poller.stop(); dataFence.cancel(); dailyFence.cancel(); docu
 </template>
 <style scoped>
 .analytics-note, .analytics-rules { margin: 0; font-size: var(--admin-font-caption); }
-.analytics-rules summary { cursor: pointer; }
+.analytics-information { max-height: 65vh; overflow-y: auto; overflow-wrap: anywhere; }
+.analytics-information > p { margin: var(--admin-space-2) 0; }
 .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>