style(admin): unify dialog layouts and dense readonly presentation

src/modules/self-operated/components/SkuTrend.test.ts

@@ -1,4 +1,5 @@
 vi.mock('@/shared/components/AppDialog.vue', () => ({ default: { props: ['modelValue'], template: '<section v-if="modelValue"><slot /></section>' } }))
+import ElementPlus from 'element-plus'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 import { defineComponent } from 'vue'
@@ -15,7 +16,7 @@ function data(status = 'COMPLETE'): DailyResponse {
 }
 describe('SKU daily trend axes', () => {
   it('shows both axes, intermediate dates, zero and maximum ticks for a 30-day window', () => {
-    const w = mount(SkuTrend, { props: { data: data() } })
+    const w = mount(SkuTrend, { props: { data: data() }, global: { plugins: [ElementPlus] } })
     const chart = w.findComponent({ name: 'VChart' })
     const option = chart.props('option')
     expect(option.xAxis).toMatchObject({ type: 'category', name: '日期（北京时间）' })
@@ -24,11 +25,11 @@ describe('SKU daily trend axes', () => {
     expect(option.series[1].data).toEqual(Array(30).fill(1))
     expect(option.tooltip.trigger).toBe('axis')
     expect(chart.props('initOptions')).toEqual({ renderer: 'canvas' })
-    expect(w.find('svg').exists()).toBe(false)
+    expect(w.get('.sku-trend').find('svg').exists()).toBe(false)
     w.unmount()
   })
   it('retains axes and date markers for an unknown window without drawing zero points', () => {
-    const w = mount(SkuTrend, { props: { data: data('UNKNOWN') } })
+    const w = mount(SkuTrend, { props: { data: data('UNKNOWN') }, global: { plugins: [ElementPlus] } })
     expect(w.text()).toContain('未知日期不作为零销量')
     const option = w.findComponent({ name: 'VChart' }).props('option')
     expect(option.series[0].data.every((point: { value: number | null }) => point.value === null)).toBe(true)

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import InlineHelp from '@/shared/components/InlineHelp.vue'
 import { computed } from 'vue'
 import ChartDetailsDialog from './ChartDetailsDialog.vue'
 import AnalyticsChart from './AnalyticsChart.vue'
@@ -11,11 +12,10 @@ const hasData = computed(() => props.data.points.some(point => point.dataStatus
 </script>
 <template>
   <section aria-label="SKU每日出库趋势">
-    <h3>{{ data.summary.sku }} · 每日出库趋势</h3>
+    <h3>{{ data.summary.sku }} · 每日出库趋势 <InlineHelp title="出库趋势图例说明"><p class="trend-legend">实线／实心点：完整日 · 虚线／空心点：未完整日 · 空缺：未知，缺失日期断线</p></InlineHelp></h3>
     <p>所属货主：{{ data.summary.customerCode || '—' }} · {{ data.summary.productName || '—' }}</p>
     <p>{{ data.summary.dataStatus === 'COMPLETE' ? '完整出库量' : '已采集出库量' }}：{{ quantityText(shownQuantity(data.summary)) }} {{ data.summary.quantityUnit === 'PCS' ? '件' : '单位未知' }}；{{ label(data.summary.dataStatus) }}。今日为已采集累计。</p>
     <p v-if="!hasData">所选范围尚无可靠数据，未知日期不作为零销量。</p>
-    <p class="trend-legend">实线／实心点：完整日 · 虚线／空心点：未完整日 · 空缺：未知，缺失日期断线</p>
     <AnalyticsChart :option="option" class="sku-trend" aria-label="SKU每日出库趋势" />
     <ChartDetailsDialog title="每日数量、完整性及覆盖证据" :reset-on="data">
       <table class="density-table"><thead><tr><th>北京时间日期</th><th>完整出库量</th><th>已采集量</th><th>状态</th><th>覆盖截止</th><th>缺口原因</th></tr></thead><tbody>