feat(admin): apply shared blue-white self-operated workbench style

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { Info } from '@lucide/vue'
 import { computed, nextTick, onActivated, onDeactivated, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -96,7 +97,7 @@ watch(warehouseCode, code => { if (code) { selectedWarehouse = code; emit('wareh
 const fields = computed<QueryField[]>(() => {
   const result: QueryField[] = [
     { key: 'warehouseCode', type: 'select', label: '仓库', width: 210, placeholder: '请选择仓库（必选）', props: { clearable: false }, options: [...new Map((overview.value?.warehouses ?? []).map(row => [row.warehouseCode, { value: row.warehouseCode, label: row.warehouseName || row.warehouseCode }])).values()] },
-    { key: 'customerCode', label: '客户', type: 'select', width: 210, options: ownerDirectory.options.value, placeholder: '名称或编码搜索', props: { filterable: true, clearable: true, disabled: !!drilldown.value } },
+    { key: 'customerCode', label: '货主', type: 'select', width: 210, options: ownerDirectory.options.value, placeholder: '货主名称或编码', props: { filterable: true, clearable: true, disabled: !!drilldown.value } },
     { key: 'sku', type: 'input', label: 'SKU', width: 230, placeholder: '输入SKU编码（精确查询）' },
   ]
   if (props.mode === 'inventory') result.push(
@@ -123,7 +124,7 @@ async function sortSalesQuantity() {
 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: 'sku', label: 'SKU', minWidth: 170, ...(props.mode === 'inventory' ? { slotName: 'sku' } : {}) },
+  { prop: 'sku', label: 'SKU', minWidth: 170, ...(props.mode === 'inventory' ? { slotName: 'sku', fixed: 'left' } : {}) },
   { prop: 'productName', label: '商品名称', minWidth: 190 },
   { key: 'owner', label: '所属货主', minWidth: 140, slotName: 'owner' },
   { key: 'unit', label: '单位', width: 70, slotName: 'unit' },
@@ -342,28 +343,29 @@ onDeactivated(() => { poller.stop(); dataFence.cancel(); dailyFence.cancel(); tr
 onUnmounted(() => { poller.stop(); dataFence.cancel(); dailyFence.cancel(); document.removeEventListener('visibilitychange', visibility) })
 </script>
 <template>
-  <AdminPage class="admin-density">
+  <AdminPage class="admin-density admin-workbench">
     <p v-if="!permitted" role="alert">没有自营经营数据查看权限。</p>
     <ListPageLayout v-else>
+      <div class="workbench-table" :class="{ 'is-compact-toolbar': mode === 'sales' && !$slots['view-tabs'] }">
       <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 v-if="$slots['view-tabs']" #toolbar-start><slot name="view-tabs" /></template>
         <template #filters><p v-if="ownerDirectory.error.value" role="alert">{{ ownerDirectory.error.value }}</p><QueryToolbar v-model="filters" :fields="fields" ariaLabel="自营SKU筛选" :preference-key="`self-operated-${mode}-query`" :loading="loading" :search-on-reset="false" @search="search" @reset="reset" /></template>
         <template #notices>
-      <p v-if="mode === 'inventory' && context" class="analytics-note" data-testid="inventory-window-summary">销量统计（北京时间）：{{ context.rangeStartDate ?? '—' }} 至 {{ context.rangeEndDateExclusive ? previousDate(context.rangeEndDateExclusive) : '—' }}，共 {{ displayedWindowDays }} 天。{{ origin ? '沿用经营总览所选区间；未完整的日期不推算日均。' : '不含今天；今天的出库不计入日均及可售天数。' }}库存使用最新已查询的采集值。</p>
+      <p v-if="mode === 'inventory' && context" class="analytics-note workbench-note" data-testid="inventory-window-summary">销量统计（北京时间）：{{ context.rangeStartDate ?? '—' }} 至 {{ context.rangeEndDateExclusive ? previousDate(context.rangeEndDateExclusive) : '—' }}，共 {{ displayedWindowDays }} 天。{{ origin ? '沿用经营总览所选区间；未完整的日期不推算日均。' : '不含今天；今天的出库不计入日均及可售天数。' }}库存使用最新已查询的采集值。</p>
       <p v-if="routeProblem" role="alert">{{ routeProblem }}；已停止查询，不能按全仓条件继续。<el-button @click="returnOverview">返回经营总览</el-button></p>
       <div v-if="origin" class="density-actions"><span>{{ drilldown?.summary ?? '来自经营总览 · 来源筛选已清除，保留原有效版本' }}</span><el-button v-if="drilldown" @click="clearDrilldown">清除来源条件</el-button><el-button @click="returnOverview">返回经营总览</el-button></div>
-      <p v-if="runtimeError" class="analytics-note" role="status">{{ runtimeError }}；最近观测：{{ beijingTime(overview?.observedAt) }}</p>
+      <p v-if="runtimeError" class="analytics-note workbench-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>
-      <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 ? '北京时间已跨日。' : '有新数据可用。' }}<template v-if="origin">请返回经营总览刷新原图。</template><template v-else>当前列表仍使用上次查询版本。<el-button :disabled="loading" @click="search">更新数据</el-button></template></p>
+      <p v-if="salesRangePending" class="analytics-note workbench-note" role="status">日期范围尚未应用，请选择完整起止日期后点击查询。<template v-if="rows.length">当前列表及每日趋势仍使用上次已应用的统计区间。</template></p>
+      <p v-if="newData || newDay" class="analytics-note workbench-note" role="status">{{ newDay ? '北京时间已跨日。' : '有新数据可用。' }}<template v-if="origin">请返回经营总览刷新原图。</template><template v-else>当前列表仍使用上次查询版本。<el-button :disabled="loading" @click="search">更新数据</el-button></template></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>
+            <div class="analytics-information admin-density admin-workbench">
+      <p v-if="mode === 'inventory' && context" class="analytics-note workbench-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 workbench-note" data-testid="inventory-window">销量计算区间（北京时间）：{{ context.rangeStartDate ?? '—' }} 至 {{ context.rangeEndDateExclusive ? previousDate(context.rangeEndDateExclusive) : '—' }}（含截止日），{{ displayedWindowDays }} 天；销量状态：{{ label(context.salesStatus) }}。未采齐不推算日均及预计可售天数。</p>
       <div class="analytics-rules">
 
         <p>{{ summaryMode ? '最近3／7／15／30天均截至昨日（北京时间）；自定义按所选起止日期查询。完整区间显示出库量，未完整区间显示已采集量；未知数据不按零计算。' : mode === 'inventory' ? '按页面所示销量区间计算；窗口未采齐时不以部分销量推算日均或可售天数。' : '使用截至昨日的完整自然日；日均和可售天数由已采集数据计算。' }}同一SKU属于不同货主时分别展示。</p>
@@ -403,8 +405,9 @@ onUnmounted(() => { poller.stop(); dataFence.cancel(); dailyFence.cancel(); docu
         </template>
         <template v-for="key in ['physicalQuantity', 'availableQuantity', 'frozenQuantity', 'defectivePhysicalQuantity', 'transitQuantity'] as const" :key="key" #[key]="{ row }">{{ quantityText(asInventory(row)[key]) }}<span v-if="asMetric(row).quantityStatuses?.[key] && asMetric(row).quantityStatuses?.[key] !== 'VALID'">（{{ label(asMetric(row).quantityStatuses?.[key]) }}）</span></template>
       </DataTable>
+      </div>
     </ListPageLayout>
-    <AppDialog v-model="trendOpen" class="admin-density-dialog" title="SKU每日出库趋势" width="1120px" :loading="trendLoading" :show-confirm="false" cancel-text="关闭" fullscreenable>
+    <AppDialog v-model="trendOpen" class="admin-density-dialog admin-workbench is-dialog" title="SKU每日出库趋势" width="1120px" :loading="trendLoading" :show-confirm="false" cancel-text="关闭" fullscreenable>
       <div class="admin-density">
         <LoadErrorState v-if="trendError" title="趋势读取失败" :message="trendError" compact><template #details><ApiErrorMeta v-if="trendErrorDetails" :details="trendErrorDetails" /></template></LoadErrorState>
         <template v-if="daily">
@@ -422,7 +425,7 @@ onUnmounted(() => { poller.stop(); dataFence.cancel(); dailyFence.cancel(); docu
 .inventory-sort-arrows { display: inline-flex; flex-direction: column; color: var(--el-text-color-placeholder); font-size: 9px; line-height: 10px; }
 .inventory-sort-arrows .active { color: var(--el-color-primary); }
 .inventory-missing { display: block; color: var(--el-text-color-secondary); }
-.analytics-note, .analytics-rules { margin: 0; font-size: var(--admin-font-caption); }
+.analytics-rules { margin: 0; font-size: var(--admin-font-caption); }
 .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; }