fix(selfop): render inventory turnover cells and data status

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

@@ -2,6 +2,7 @@
 import '@/styles/adminDensity.css'
 import { computed, onActivated, onDeactivated, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { Info } from '@lucide/vue'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
 import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
@@ -15,7 +16,7 @@ import { RequestFence, beijingTime, contextParams } from '../state'
 import type { DailyResponse, Overview } from '../types'
 import type { TurnoverQuery, TurnoverResponse, TurnoverRow, TurnoverSort, TurnoverWindow } from '../turnoverTypes'
 import { turnoverRoute, validateTurnover, yesterdayBeijing, turnoverSorts } from '../turnoverNavigation'
-import { totalText, turnoverChart, turnoverNumber, windowText, turnoverReasonsText as reasonsText } from '../turnoverPresentation'
+import { totalText, turnoverTotalNote, inventoryCollectionNotice, turnoverChart, turnoverNumber, windowText, turnoverReasonsText as reasonsText } from '../turnoverPresentation'
 import AnalyticsChart from './AnalyticsChart.vue'
 import ChartDetailsDialog from './ChartDetailsDialog.vue'
 import SkuTrend from './SkuTrend.vue'
@@ -50,20 +51,30 @@ const fields = computed<QueryField[]>(() => [
 ])
 const ownerMode = computed(() => applied.value?.groupBy === 'OWNER')
 const columns = computed<DataTableColumn[]>(() => [
-  ...(ownerMode.value ? [] : [{ prop: 'sku', label: 'SKU', slot: 'sku', minWidth: 155 }, { prop: 'productName', label: '商品名称', minWidth: 170 }]),
-  { prop: 'customerCode', label: '所属货主', slot: 'owner', minWidth: 160 },
+  ...(ownerMode.value ? [] : [{ prop: 'sku', label: 'SKU', slotName: 'sku', minWidth: 155 }, { prop: 'productName', label: '商品名称', minWidth: 170 }]),
+  { prop: 'customerCode', label: '所属货主', slotName: 'owner', minWidth: 160 },
   ...(ownerMode.value ? [{ prop: 'physicalSkuCount', label: '有实物SKU数', minWidth: 125 }] : []),
-  { prop: 'physicalQuantity', label: '实物件数', slot: 'physicalQuantity', minWidth: 145 }, { prop: 'availableQuantity', label: '正品可售', slot: 'availableQuantity', minWidth: 145 },
-  ...([7, 15, 30] as const).map(n => ({ prop: `outbound${n}`, label: `${n}日出库`, slot: `outbound${n}`, minWidth: 160 })),
-  { prop: 'averageDailyOutboundQuantity', label: `${applied.value?.baseWindowDays ?? 30}日日均`, slot: 'daily', minWidth: 110 },
-  ...(ownerMode.value ? [{ prop: 'noOutbound30d', label: '无出库SKU / 实物', slot: 'noOutbound', minWidth: 190 }, { prop: 'slowCoverage', label: '慢消化SKU / 待判断', slot: 'slow', minWidth: 175 }] : [{ prop: 'inventoryCoverageDays', label: '预计可售天数', slot: 'coverage', minWidth: 150 }]),
-  { prop: 'attentionReasons', label: '状态与样本', slot: 'status', minWidth: 180 },
-  ...(expanded.value ? [{ prop: 'frozenQuantity', label: '冻结件数', slot: 'frozenQuantity', minWidth: 125 }, { prop: 'defectiveQuantity', label: '次品实物', slot: 'defectiveQuantity', minWidth: 125 }, { prop: 'averagePhysicalQuantity', label: '期间平均实物', slot: 'averageStock', minWidth: 145 }, { prop: 'quantityTurnoverCount', label: '期间件数周转', slot: 'turnover', minWidth: 145 }, { prop: 'lastObservedOutboundDate', label: '最近已观测出库日', slot: 'lastDate', minWidth: 180 }] : []),
+  { prop: 'physicalQuantity', label: '实物件数', slotName: 'physicalQuantity', minWidth: 145 }, { prop: 'availableQuantity', label: '正品可售', slotName: 'availableQuantity', minWidth: 145 },
+  ...([7, 15, 30] as const).map(n => ({ prop: `outbound${n}`, label: `${n}日出库`, slotName: `outbound${n}`, minWidth: 160 })),
+  { prop: 'averageDailyOutboundQuantity', label: `${applied.value?.baseWindowDays ?? 30}日日均`, slotName: 'daily', minWidth: 110 },
+  ...(ownerMode.value ? [{ prop: 'noOutbound30d', label: '无出库SKU / 实物', slotName: 'noOutbound', minWidth: 190 }, { prop: 'slowCoverage', label: '慢消化SKU / 待判断', slotName: 'slow', minWidth: 175 }] : [{ prop: 'inventoryCoverageDays', label: '预计可售天数', slotName: 'coverage', minWidth: 150 }]),
+  { prop: 'attentionReasons', label: '状态与样本', slotName: 'status', minWidth: 180 },
+  ...(expanded.value ? [{ prop: 'frozenQuantity', label: '冻结件数', slotName: 'frozenQuantity', minWidth: 125 }, { prop: 'defectiveQuantity', label: '次品实物', slotName: 'defectiveQuantity', minWidth: 125 }, { prop: 'averagePhysicalQuantity', label: '期间平均实物', slotName: 'averageStock', minWidth: 145 }, { prop: 'quantityTurnoverCount', label: '期间件数周转', slotName: 'turnover', minWidth: 145 }, { prop: 'lastObservedOutboundDate', label: '最近已观测出库日', slotName: 'lastDate', minWidth: 180 }] : []),
 ])
 const cards = computed(() => data.value?.summary ? [
   { name: '实物件数', value: data.value.summary.physicalQuantity }, { name: '正品可售件数', value: data.value.summary.availableQuantity },
   { name: '近30日无出库SKU', value: data.value.summary.noOutboundSkuCount }, { name: '待评估SKU', value: data.value.summary.unassessableSkuCount },
 ] : [])
+const runtimeError = ref('')
+const inventoryRuntime = computed(() => runtime.value?.warehouses.find(w => w.warehouseCode === applied.value?.warehouseCode && w.dataFamily === 'INVENTORY'))
+const collectionNotice = computed(() => !data.value || runtimeError.value ? '' : inventoryCollectionNotice(inventoryRuntime.value))
+async function refreshRuntime() {
+  const request = runtimeFence.begin()
+  try {
+    const result = await analyticsApi.overview('lingxing-primary', undefined, request.signal)
+    if (request.current()) { runtime.value = result; runtimeError.value = '' }
+  } catch { if (request.current()) runtimeError.value = '采集状态更新失败，请到数据采集查看；库存查询结果仍按其观测时间展示。' }
+}
 function castRow(row: unknown) { return row as TurnoverRow }
 function restoreThreshold(warehouse: string) {
   try {
@@ -96,6 +107,7 @@ async function load(refresh = false) {
   if (!q.snapshotContext) { q.current = 1; page.value = 1; q.includeOverview = true }
   const previous = data.value
   const request = fence.begin(); loading.value = true
+  if (refresh) void refreshRuntime()
   try {
     const result = await analyticsApi.turnover(q, request.signal)
     if (!request.current()) return
@@ -166,7 +178,7 @@ async function initialize() {
   try {
     const result = await analyticsApi.overview('lingxing-primary', undefined, request.signal)
     if (!request.current()) return
-    runtime.value = result
+    runtime.value = result; runtimeError.value = ''
     if (!filters.value.warehouseCode) filters.value.warehouseCode = warehouses.value[0]?.value ?? ''
     if (route.query.coverageDaysThreshold == null) filters.value.coverageDaysThreshold = restoreThreshold(String(filters.value.warehouseCode || ''))
     if (filters.value.warehouseCode) await load()
@@ -186,22 +198,29 @@ onUnmounted(() => { fence.cancel(); runtimeFence.cancel(); trendFence.cancel() }
       <LoadErrorState v-if="error" title="库存周转读取失败" :message="error.message" compact @retry="runtime ? load() : initialize()"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
       <p v-if="inputError" role="alert">{{ inputError }}</p><p v-if="notice" role="status">{{ notice }}</p>
       <DataTable :data="data?.rows ?? []" :columns="columns" :loading="loading" :total="data?.total ?? 0" :page="page" :page-size="size" appearance="integrated" :empty-text="!warehouses.length ? '暂无可用仓库' : error ? '读取失败，请重试' : '暂无符合条件的数据'" @update:page="page = $event; load()" @update:page-size="size = $event; search()">
-        <template #toolbar-actions><el-button @click="router.push('/self-operated/collection')">数据采集</el-button><el-button @click="page = 1; load(true)">整体刷新</el-button><el-button @click="expanded = !expanded">{{ expanded ? '收起扩展列' : '扩展列' }}</el-button></template>
+        <template #toolbar-start><slot name="view-tabs"><h2 class="turnover-title">库存周转<span>销量 · 库存 · 周转效率</span></h2></slot></template>
+        <template #toolbar-actions><el-button @click="router.push('/self-operated/collection')">数据采集</el-button><el-button @click="page = 1; load(true)">整体刷新</el-button><el-button @click="expanded = !expanded">{{ expanded ? '收起扩展列' : '扩展列' }}</el-button><el-popover title="统计说明" trigger="click" placement="bottom-end" :width="460" teleported><template #reference><el-button aria-label="库存周转统计说明" title="统计说明"><Info :size="16" /></el-button></template><div class="turnover-rules"><p>7／15／30天均为截至所选日期的完整滚动窗口。日均仅使用完整窗口；预计可售天数使用查询时固定的当前正品可售库存，不是库龄。</p><p>期间件数周转次数＝同期完整出库÷每日首次合格计划库存的实物均值。缺日、缺商品或单位异常不补零；当前库存不代替历史平均库存。件数不是占用空间，快慢标签仅供人工复核。</p><p>货主视图按“含此类SKU的货主”筛选；未知数量保留已知小计，不平均SKU可售天数。库存过期不抹去有完整证据的历史销量与周转。</p></div></el-popover></template>
         <template #filters>
           <QueryToolbar :model-value="filters" :fields="fields" ariaLabel="库存周转查询" preference-key="selfop-turnover-query" @update:model-value="changeFilters" @search="search" @reset="reset" />
+        </template>
+        <template #before-results>
           <div class="turnover-context">
             <template v-if="filters.customerCode"><el-tag closable @close="filters.customerCode = ''; search()">货主：{{ filters.customerCode }}</el-tag><el-button v-if="ownerReturn" link @click="returnOwners">返回货主汇总</el-button></template>
             <template v-if="data"><span>{{ applied?.customerCode ? '本货主概览' : '本仓概览' }} · 截止 {{ applied?.endDate }} · 基准 {{ applied?.baseWindowDays }} 天</span><span>当前库存采集 {{ beijingTime(data.context.inventoryObservedFrom) }} 至 {{ beijingTime(data.context.inventoryObservedUntil) }}</span><span v-if="error">保留 {{ beijingTime(data.context.queryAsOf) }} 查询结果</span></template>
           </div>
-          <div v-if="cards.length" class="turnover-cards"><article v-for="card in cards" :key="card.name"><span>{{ card.name }}</span><strong>{{ totalText(card.value) }}</strong></article></div>
+          <p v-if="data?.context.analyticsContext.inventoryStatus === 'STALE'" class="turnover-context" role="status">当前库存已过期，实物、可售、货主排名及预计可售天数暂不可用；最近库存观测完成于 {{ beijingTime(data.context.inventoryObservedUntil) }}。采集成功后请整体刷新。</p>
+          <p v-else-if="data?.context.analyticsContext.inventoryStatus === 'UNKNOWN'" class="turnover-context" role="status">当前尚无可用库存版本，请查看数据采集。</p>
+          <p v-if="collectionNotice" class="turnover-context" role="status">{{ collectionNotice }}；采集状态截至 {{ beijingTime(inventoryRuntime?.observedAt) }}。<el-button link @click="router.push('/self-operated/collection')">查看数据采集</el-button></p>
+          <p v-if="runtimeError" class="turnover-context" role="status">{{ runtimeError }}</p>
+          <div v-if="cards.length" class="turnover-cards"><article v-for="card in cards" :key="card.name"><span>{{ card.name }}</span><strong>{{ turnoverNumber(card.value.value) }}</strong><small>{{ turnoverTotalNote(card.value) }}</small></article></div>
           <template v-if="data?.charts">
             <div class="turnover-context"><el-button link @click="chartsOpen = !chartsOpen">{{ chartsOpen ? '收起图表' : '展开图表' }}</el-button><span>图表与指标为{{ applied?.customerCode ? '本货主' : '本仓' }}整体，不随列表SKU或关注筛选改变</span></div>
             <div v-if="chartsOpen" class="turnover-charts">
-              <section><h3>货主实物件数 Top10</h3><AnalyticsChart class="turnover-chart" :option="turnoverChart(data.charts, 'owners')" @select="event => { const owner = data?.charts?.ownerPhysicalTop[event.dataIndex]; if (owner) selectOwner(owner.customerCode) }" /><p>{{ data.charts.unknownOwnerCount }} 个货主未能完整计算</p><ChartDetailsDialog title="货主实物件数明细" :reset-on="data.context.snapshotContext"><table><thead><tr><th>货主</th><th>实物件数</th></tr></thead><tbody><tr v-for="owner in data.charts.ownerPhysicalTop" :key="owner.customerCode"><td><el-button link @click="selectOwner(owner.customerCode)">{{ owner.customerName || owner.customerCode }}</el-button></td><td>{{ turnoverNumber(owner.physicalQuantity) }}</td></tr></tbody></table></ChartDetailsDialog></section>
-              <section><h3>7／15／30 日日均出库</h3><AnalyticsChart class="turnover-chart" :option="turnoverChart(data.charts, 'daily')" /><p v-for="window in data.charts.averageDaily" :key="window.days">{{ window.days }}日：{{ window.dataStatus === 'COMPLETE' ? `${turnoverNumber(window.averageDailyOutboundQuantity)} 件/日` : `覆盖不足：完整${window.completeDayCount}日，部分${window.partialDayCount}日，未知${window.unknownDayCount}日` }}</p><ChartDetailsDialog title="日均出库与覆盖明细" :reset-on="data.context.snapshotContext"><p v-for="window in data.charts.averageDaily" :key="window.days">{{ window.startDate }} 至 {{ window.endDateExclusive }}（不含）：{{ windowText(window) }}；{{ reasonsText(window.reasonCodes) }}</p></ChartDetailsDialog></section>
+              <section><h3>货主实物件数 Top10</h3><AnalyticsChart v-if="data.charts.ownerPhysicalTop.length" class="turnover-chart" :option="turnoverChart(data.charts, 'owners')" @select="event => { const owner = data?.charts?.ownerPhysicalTop[event.dataIndex]; if (owner) selectOwner(owner.customerCode) }" /><div v-else class="turnover-chart-empty"><strong>暂无可排名的库存数据</strong><span>库存数量尚未完整确认，确认后展示货主排名</span></div><p class="turnover-chart-note">{{ data.charts.unknownOwnerCount }} 个货主未能完整计算</p><ChartDetailsDialog title="货主实物件数明细" :reset-on="data.context.snapshotContext"><table><thead><tr><th>货主</th><th>实物件数</th></tr></thead><tbody><tr v-for="owner in data.charts.ownerPhysicalTop" :key="owner.customerCode"><td><el-button link @click="selectOwner(owner.customerCode)">{{ owner.customerName || owner.customerCode }}</el-button></td><td>{{ turnoverNumber(owner.physicalQuantity) }}</td></tr></tbody></table></ChartDetailsDialog></section>
+              <section><h3>7／15／30 日日均出库</h3><AnalyticsChart class="turnover-chart" :option="turnoverChart(data.charts, 'daily')" /><div class="turnover-window-summary"><div v-for="window in data.charts.averageDaily" :key="window.days"><span>{{ window.days }}日日均</span><strong>{{ window.dataStatus === 'COMPLETE' ? `${turnoverNumber(window.averageDailyOutboundQuantity)} 件/日` : '覆盖不足' }}</strong><small v-if="window.dataStatus !== 'COMPLETE'">完整 {{ window.completeDayCount }} / {{ window.days }} 日</small></div></div><ChartDetailsDialog title="日均出库与覆盖明细" :reset-on="data.context.snapshotContext"><p v-for="window in data.charts.averageDaily" :key="window.days">{{ window.startDate }} 至 {{ window.endDateExclusive }}（不含）：{{ windowText(window) }}；{{ reasonsText(window.reasonCodes) }}</p></ChartDetailsDialog></section>
             </div>
           </template>
-          <nav class="turnover-context" aria-label="库存关注快捷筛选"><el-button link @click="quickFocus('ALL', 'PHYSICAL_DESC')">全部／实物件数最多</el-button><el-button link @click="quickFocus('NO_OUTBOUND_30D', ownerMode ? 'NO_OUTBOUND_PHYSICAL_DESC' : 'PHYSICAL_DESC')">近30日无出库</el-button><el-button link @click="quickFocus('COVERAGE_GT', ownerMode ? 'PHYSICAL_DESC' : 'COVERAGE_DESC')">消化较慢</el-button><el-button link @click="quickFocus('COVERAGE_LE', ownerMode ? 'PHYSICAL_DESC' : 'COVERAGE_ASC')">消化较快</el-button><el-button link @click="quickFocus('UNASSESSABLE', 'PHYSICAL_DESC')">待评估</el-button></nav><details class="turnover-rules"><summary>统计说明</summary><p>7／15／30天均为截至所选日期的完整滚动窗口。日均仅使用完整窗口；预计可售天数使用查询时固定的当前正品可售库存，不是库龄。</p><p>期间件数周转次数＝同期完整出库÷每日首次合格计划库存的实物均值。缺日、缺商品或单位异常不补零；当前库存不代替历史平均库存。件数不是占用空间，快慢标签仅供人工复核。</p><p>货主视图按“含此类SKU的货主”筛选；未知数量保留已知小计，不平均SKU可售天数。库存过期不抹去有完整证据的历史销量与周转。</p></details>
+          <nav class="turnover-context turnover-focus" aria-label="库存关注快捷筛选"><el-button :type="applied?.focus === 'ALL' ? 'primary' : 'default'" :plain="applied?.focus !== 'ALL'" @click="quickFocus('ALL', 'PHYSICAL_DESC')">全部／实物件数最多</el-button><el-button :type="applied?.focus === 'NO_OUTBOUND_30D' ? 'primary' : 'default'" :plain="applied?.focus !== 'NO_OUTBOUND_30D'" @click="quickFocus('NO_OUTBOUND_30D', ownerMode ? 'NO_OUTBOUND_PHYSICAL_DESC' : 'PHYSICAL_DESC')">近30日无出库</el-button><el-button :type="applied?.focus === 'COVERAGE_GT' ? 'primary' : 'default'" :plain="applied?.focus !== 'COVERAGE_GT'" @click="quickFocus('COVERAGE_GT', ownerMode ? 'PHYSICAL_DESC' : 'COVERAGE_DESC')">消化较慢</el-button><el-button :type="applied?.focus === 'COVERAGE_LE' ? 'primary' : 'default'" :plain="applied?.focus !== 'COVERAGE_LE'" @click="quickFocus('COVERAGE_LE', ownerMode ? 'PHYSICAL_DESC' : 'COVERAGE_ASC')">消化较快</el-button><el-button :type="applied?.focus === 'UNASSESSABLE' ? 'primary' : 'default'" :plain="applied?.focus !== 'UNASSESSABLE'" @click="quickFocus('UNASSESSABLE', 'PHYSICAL_DESC')">待评估</el-button></nav>
           <p class="turnover-context">筛选结果：{{ data?.total ?? 0 }} {{ ownerMode ? '个货主' : '条SKU' }}</p>
         </template>
         <template #sku="{ row }"><el-button link type="primary" @click="showTrend(castRow(row))">{{ castRow(row).sku }}</el-button></template>
@@ -217,20 +236,37 @@ onUnmounted(() => { fence.cancel(); runtimeFence.cancel(); trendFence.cancel() }
         <template #turnover="{ row }">{{ turnoverNumber(castRow(row).quantityTurnoverCount) }} 次/{{ applied?.baseWindowDays }}日</template>
         <template #lastDate="{ row }">{{ castRow(row).lastObservedOutboundDate || '已采集历史内未见出库' }}</template>
       </DataTable>
-      <AppDialog v-model="trendOpen" class="admin-density-dialog" title="SKU每日出库趋势" width="1120px" :show-confirm="false" :loading="trendLoading" cancel-text="关闭" fullscreenable><LoadErrorState v-if="trendError" title="趋势读取失败" :message="trendError.message" compact><template #details><ApiErrorMeta :details="trendError" /></template></LoadErrorState><SkuTrend v-if="daily" :data="daily" /></AppDialog>
-      <AppDialog v-model="evidenceOpen" class="admin-density-dialog" title="周转样本与覆盖证据" width="1040px" :show-confirm="false" cancel-text="关闭" fullscreenable><template v-if="evidence && data"><p>{{ evidence.customerCode }} · {{ evidence.sku || '货主汇总' }}；合格日样本 {{ evidence.qualifiedSampleDays }}/{{ evidence.requiredSampleDays }}；积累起点 {{ data.context.accumulationStartedOn || '尚无日样本' }}</p><p>缺口日期：{{ evidence.missingSampleDates.join('、') || '无日期缺口' }}</p><p>{{ reasonsText(evidence.sampleReasonCodes) }}</p><p v-for="window in evidence.windows" :key="window.days">{{ window.days }}日：{{ windowText(window) }}；完整{{ window.completeDayCount }}日／部分{{ window.partialDayCount }}日／未知{{ window.unknownDayCount }}日</p><p>日代表规则：每天首次合格计划采集；仅纳入 {{ beijingTime(data.context.queryAsOf) }} 以前已发布代表。</p></template></AppDialog>
+      <AppDialog v-model="trendOpen" class="admin-density-dialog" title="SKU每日出库趋势" width="1120px" :show-confirm="false" :loading="trendLoading" cancel-text="关闭" append-to-body fullscreenable><LoadErrorState v-if="trendError" title="趋势读取失败" :message="trendError.message" compact><template #details><ApiErrorMeta :details="trendError" /></template></LoadErrorState><SkuTrend v-if="daily" :data="daily" /></AppDialog>
+      <AppDialog v-model="evidenceOpen" class="admin-density-dialog" title="周转样本与覆盖证据" width="1040px" :show-confirm="false" cancel-text="关闭" append-to-body fullscreenable><template v-if="evidence && data"><p>{{ evidence.customerCode }} · {{ evidence.sku || '货主汇总' }}；合格日样本 {{ evidence.qualifiedSampleDays }}/{{ evidence.requiredSampleDays }}；积累起点 {{ data.context.accumulationStartedOn || '尚无日样本' }}</p><p>缺口日期：{{ evidence.missingSampleDates.join('、') || '无日期缺口' }}</p><p>{{ reasonsText(evidence.sampleReasonCodes) }}</p><p v-for="window in evidence.windows" :key="window.days">{{ window.days }}日：{{ windowText(window) }}；完整{{ window.completeDayCount }}日／部分{{ window.partialDayCount }}日／未知{{ window.unknownDayCount }}日</p><p>日代表规则：每天首次合格计划采集；仅纳入 {{ beijingTime(data.context.queryAsOf) }} 以前已发布代表。</p><p>日样本是每日库存观测，不是出库历史天数；补采和验证任务不计入。今天成功的计划库存，要在截止日包含今天时才进入窗口，历史缺日不能补零。</p></template></AppDialog>
     </template>
   </AdminPage>
 </template>
 <style scoped>
+.turnover-title { margin: 0; font-size: var(--admin-font-section); display: flex; align-items: center; gap: 16px; }
+.turnover-title span { font-size: var(--admin-font-caption); font-weight: 400; color: var(--el-text-color-secondary); }
 .turnover-context { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 10px 16px; color: var(--el-text-color-secondary); font-size: var(--admin-font-caption); }
-.turnover-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 12px 16px; }
-.turnover-cards article { padding: 16px; background: var(--el-fill-color-light); border-top: 3px solid var(--el-color-primary); border-radius: 8px; }
-.turnover-cards strong { display: block; font-size: 22px; margin-top: 10px; font-variant-numeric: tabular-nums; }
-.turnover-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 16px 16px; }
-.turnover-charts section { border: 1px solid var(--el-border-color-light); padding: 16px; border-radius: 8px; }
-.turnover-chart { height: 240px; }
-h3 { margin: 0; font-size: var(--admin-font-body); }
-small { display: block; color: var(--el-text-color-secondary); }
-.turnover-rules { padding: 10px 16px; font-size: var(--admin-font-caption); }
+.turnover-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 4px 16px 12px; }
+.turnover-cards article { position: relative; overflow: hidden; padding: 16px 20px; border: 1px solid var(--el-color-primary-light-8); background: linear-gradient(120deg, #fff, var(--el-color-primary-light-9)); border-radius: 10px; color: var(--el-color-primary); }
+.turnover-cards article:nth-child(2) { color: #248260; border-color: #dbeee5; background: linear-gradient(120deg, #fff, #edf8f1); }
+.turnover-cards article:nth-child(3) { color: #b37a22; border-color: #f4e7d3; background: linear-gradient(120deg, #fff, #fff6e8); }
+.turnover-cards article:nth-child(4) { color: #8a62bf; border-color: #e9e0f5; background: linear-gradient(120deg, #fff, #f6f0fc); }
+.turnover-cards article::after { content: ''; position: absolute; width: 88px; height: 88px; border-radius: 50%; right: -22px; top: -30px; background: currentColor; opacity: .07; pointer-events: none; }
+.turnover-cards article > span { color: var(--el-text-color-regular); }
+.turnover-cards strong { display: block; font-size: 28px; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
+.turnover-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 16px 12px; }
+.turnover-charts section { background: var(--el-bg-color); border: 1px solid var(--el-border-color-light); padding: 16px; border-radius: 10px; }
+.turnover-chart, .turnover-chart-empty { height: 220px; }
+.turnover-chart-empty { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: var(--el-text-color-secondary); background: var(--el-fill-color-lighter); border-radius: 8px; margin-top: 12px; }
+.turnover-chart-empty strong { color: var(--el-text-color-regular); }
+.turnover-chart-note { color: var(--el-text-color-secondary); font-size: var(--admin-font-caption); }
+.turnover-window-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 12px; }
+.turnover-window-summary > div { background: var(--el-fill-color-lighter); padding: 8px 12px; border-radius: 6px; }
+.turnover-window-summary span, .turnover-window-summary strong { display: block; }
+.turnover-window-summary span { color: var(--el-text-color-secondary); font-size: var(--admin-font-caption); margin-bottom: 4px; }
+.turnover-window-summary strong { font-variant-numeric: tabular-nums; }
+.turnover-focus { border-top: 1px solid var(--el-border-color-lighter); padding-top: 16px; gap: 8px; }
+.turnover-focus :deep(.el-button + .el-button) { margin-left: 0; }
+h3 { margin: 0 0 12px; font-size: var(--admin-font-body); border-left: 3px solid var(--el-color-primary); padding-left: 10px; }
+small { display: block; color: var(--el-text-color-secondary); font-size: var(--admin-font-caption); }
+.turnover-rules { font-size: var(--admin-font-caption); line-height: 1.7; }
 </style>