This commit is contained in:
2026-09-12 11:45:57 +08:00
parent 497530d6a9
commit 8bc86c8567
3 changed files with 700 additions and 463 deletions
@@ -44,8 +44,6 @@ const downloadingIds = ref(new Set<string>())
const voidingIds = ref(new Set<string>())
const customerOptions = ref<PlatformTenantResource[]>([])
const customersLoading = ref(false)
const originSelections = ref<Record<string, string>>({})
const overseasSelections = ref<Record<string, string>>({})
const filters = ref<PriceBookFilters>({ customerId: '0', status: '' })
const appliedFilters = ref<PriceBookFilters>({ ...filters.value })
let loadSequence = 0
@@ -74,13 +72,14 @@ const queryFields = computed<QueryField[]>(() => [
{ label: '待确认', value: 'PENDING_CONFIRMATION' },
{ label: '生效中', value: 'ACTIVE' },
{ label: '已替换', value: 'SUPERSEDED' },
{ label: '已作废', value: 'VOIDED' },
{ label: '解析失败', value: 'FAILED' },
],
},
])
const columns: DataTableColumn[] = [
{ key: 'actions', label: '操作', width: 210, fixed: 'left', slotName: 'actions' },
{ key: 'actions', label: '操作', width: 300, fixed: 'left', slotName: 'actions' },
{ key: 'scope', label: '报价范围', minWidth: 190, slotName: 'scope' },
{ key: 'version', label: '价格表版本', minWidth: 180, slotName: 'version' },
{ key: 'originalFileName', prop: 'originalFileName', label: '原始文件', minWidth: 250, showOverflowTooltip: true, defaultVisible: false },
@@ -95,7 +94,6 @@ const canEdit = computed(() => access.can('firstleg:fba-pricing:rate:edit'))
const pagedRows = computed(() => rows.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value))
const activeCount = computed(() => rows.value.filter((row) => row.status === 'ACTIVE').length)
const pendingCount = computed(() => rows.value.filter((row) => row.status === 'PENDING_CONFIRMATION').length)
const selectedScopeLabel = computed(() => priceBookScopeLabel(appliedFilters.value.customerId))
const loadErrorMessage = computed(() => loadError.value?.message || '')
function formatDateTime(value: string | null | undefined) {
@@ -127,46 +125,17 @@ async function loadCustomerOptions() {
}
}
function formatMoney(value: number, currency: string) {
return `${currency} ${value.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 4 })}`
}
function priceBookStatusMeta(status: PriceBookStatus) {
const values = {
PENDING_CONFIRMATION: { label: '待确认', type: 'warning' as const },
ACTIVE: { label: '生效中', type: 'success' as const },
SUPERSEDED: { label: '已替换', type: 'info' as const },
VOIDED: { label: '已作废', type: 'info' as const },
FAILED: { label: '解析失败', type: 'danger' as const },
}
return values[status]
}
function priceModelLabel(value: string) {
return value === 'REGION_WEIGHT_TIER' ? '海派区域阶梯价' : '按仓价格'
}
function pricingTaxModeLabel(value: string | null) {
if (value === 'TAX_INCLUDED') return '包税'
if (value === 'TAX_EXCLUDED') return '不包税'
return '-'
}
function rateDestinationLabel(rate: PlatformPriceBookParsedRate) {
if (rate.destinationType === 'OVERSEAS') return rate.destinationName || rate.destinationCode || '-'
if (rate.destinationType === 'FBA') return rate.destinationCode || rate.destinationName || '-'
return rate.regionCode || '-'
}
function issueLocation(issue: PlatformPriceBookParseIssue) {
return [issue.sourceSheetName, issue.sourceRowNumber ? `第 ${issue.sourceRowNumber} 行` : null, issue.sourceCell]
.filter(Boolean)
.join(' · ') || '-'
}
function sourceLocation(rate: PlatformPriceBookParsedRate) {
return `${rate.sourceSheetName} · 第 ${rate.sourceRowNumber} 行`
}
function apiErrorMessage(error: unknown, fallback: string) {
const details = getApiErrorDetails(error, fallback)
return details.requestId ? `${details.message}(requestId: ${details.requestId})` : details.message
@@ -248,134 +217,8 @@ function selectUploadFile(event: Event) {
uploadFile.value = file
}
function resetMappings(value: PlatformPriceBookDetail) {
const origins: Record<string, string> = {}
const overseas: Record<string, string> = {}
const originByKey = new Map<string, OriginMappingRow>()
const overseasByKey = new Map<string, OverseasMappingRow>()
for (const rate of value.rates) {
const originCode = rate.originWarehouseCode.trim()
if (originCode) {
const key = mappingKey(originCode)
if (!originByKey.has(key)) originByKey.set(key, {
key,
sourceCode: originCode,
sourceName: rate.originWarehouseName || originCode,
warehouseId: rate.originWarehouseId,
})
}
if (rate.destinationType === 'OVERSEAS' && rate.destinationName?.trim()) {
const sourceName = rate.destinationName.trim()
const key = mappingKey(sourceName)
if (!overseasByKey.has(key)) overseasByKey.set(key, {
key,
sourceName,
destinationCode: rate.destinationCode,
warehouseId: rate.destinationWarehouseId,
})
}
}
for (const row of originByKey.values()) {
if (row.warehouseId) origins[row.key] = row.warehouseId
}
for (const row of overseasByKey.values()) {
if (row.warehouseId) overseas[row.key] = row.warehouseId
}
originSelections.value = origins
overseasSelections.value = overseas
}
function autoSelectExactWarehouseMappings() {
const origins = { ...originSelections.value }
const overseas = { ...overseasSelections.value }
const usedOrigins = new Set(Object.values(origins))
const usedOverseas = new Set(Object.values(overseas))
for (const row of originMappingRows.value) {
if (origins[row.key]) continue
const matches = domesticWarehouses.value.filter((warehouse) => originWarehouseMatches(row, warehouse))
if (matches.length !== 1) continue
const warehouseId = String(matches[0].id)
if (!usedOrigins.has(warehouseId)) {
origins[row.key] = warehouseId
usedOrigins.add(warehouseId)
}
}
for (const row of overseasMappingRows.value) {
if (overseas[row.key]) continue
const matches = overseasWarehouses.value.filter((warehouse) => overseasWarehouseMatches(row, warehouse))
if (matches.length !== 1) continue
const warehouseId = String(matches[0].id)
if (!usedOverseas.has(warehouseId)) {
overseas[row.key] = warehouseId
usedOverseas.add(warehouseId)
}
}
originSelections.value = origins
overseasSelections.value = overseas
}
function applyDetail(value: PlatformPriceBookDetail) {
detail.value = value
selectedVersionId.value = value.version.id
selectedChannelCode.value = value.channels[0]?.channelCode || ''
resetMappings(value)
if (mappingWarehousesLoaded.value) autoSelectExactWarehouseMappings()
}
async function loadMappingWarehouses(force = false) {
if (mappingWarehousesLoaded.value && !force) return true
const sequence = ++warehouseSequence
mappingWarehousesLoading.value = true
mappingWarehousesError.value = null
try {
const result = await listAllPlatformWarehouses()
if (sequence !== warehouseSequence) return false
mappingWarehouses.value = result
mappingWarehousesLoaded.value = true
autoSelectExactWarehouseMappings()
return true
} catch (error) {
if (sequence === warehouseSequence) {
mappingWarehouses.value = []
mappingWarehousesLoaded.value = false
mappingWarehousesError.value = getApiErrorDetails(error, '平台公共仓库加载失败,请稍后重试')
}
return false
} finally {
if (sequence === warehouseSequence) mappingWarehousesLoading.value = false
}
}
async function openDetail(row: PlatformPriceBookVersion) {
const sequence = ++detailSequence
selectedVersionId.value = row.id
detailOpen.value = true
detailLoading.value = true
detailError.value = null
detail.value = null
try {
const result = await getPlatformPriceBook(row.id)
if (sequence !== detailSequence) return
applyDetail(result)
if (result.version.status === 'PENDING_CONFIRMATION' && canEdit.value) await loadMappingWarehouses()
} catch (error) {
if (sequence !== detailSequence) return
detailError.value = getApiErrorDetails(error, '船期价格表详情加载失败,请稍后重试')
} finally {
if (sequence === detailSequence) detailLoading.value = false
}
}
async function showUploadedDetail(value: PlatformPriceBookDetail) {
detailSequence += 1
detailOpen.value = true
detailLoading.value = false
detailError.value = null
applyDetail(value)
if (value.version.status === 'PENDING_CONFIRMATION' && canEdit.value) await loadMappingWarehouses()
function openDetail(row: PlatformPriceBookVersion) {
void router.push({ name: 'fba-carrier-rate-detail', params: { versionId: row.id } })
}
async function submitUpload() {
@@ -389,9 +232,9 @@ async function submitUpload() {
const result = await uploadPlatformPriceBook(file, uploadCustomerId.value)
uploadOpen.value = false
resetUpload()
await showUploadedDetail(result)
ElMessage.success('价格表已解析,请核对结果并确认仓库映射。')
await loadPriceBooks()
ElMessage.success('价格表已解析,请在详情页核对结果并确认仓库映射。')
await router.push({ name: 'fba-carrier-rate-detail', params: { versionId: result.version.id } })
} catch (error) {
ElMessage.error(apiErrorMessage(error, '价格表上传或解析失败,请检查文件后重试'))
await loadPriceBooks()
@@ -400,69 +243,6 @@ async function submitUpload() {
}
}
function originWarehouseMatches(row: OriginMappingRow, warehouse: PlatformWarehouseResource) {
return mappingKey(warehouse.warehouseCode) === mappingKey(row.sourceCode)
}
function overseasWarehouseMatches(row: OverseasMappingRow, warehouse: PlatformWarehouseResource) {
return !row.destinationCode || mappingKey(warehouse.warehouseCode) === mappingKey(row.destinationCode)
}
function selectedByOther(selections: Record<string, string>, currentKey: string, warehouseId: string) {
return Object.entries(selections).some(([key, selected]) => key !== currentKey && selected === warehouseId)
}
function originWarehouseDisabled(row: OriginMappingRow, warehouse: PlatformWarehouseResource) {
return !originWarehouseMatches(row, warehouse)
|| selectedByOther(originSelections.value, row.key, String(warehouse.id))
}
function overseasWarehouseDisabled(row: OverseasMappingRow, warehouse: PlatformWarehouseResource) {
return !overseasWarehouseMatches(row, warehouse)
|| selectedByOther(overseasSelections.value, row.key, String(warehouse.id))
}
function buildConfirmationRequest(): PriceBookConfirmationRequest {
return {
originMappings: originMappingRows.value.map((row) => ({
originWarehouseCode: row.sourceCode,
warehouseId: originSelections.value[row.key],
})),
overseasMappings: overseasMappingRows.value.map((row) => ({
sourceDestinationName: row.sourceName,
warehouseId: overseasSelections.value[row.key],
})),
}
}
async function confirmPriceBook() {
if (!detail.value || !canConfirmDetail.value) return
try {
await ElMessageBox.confirm(
`确认后,该价格表会立即成为“${priceBookScopeLabel(detail.value.version.customerId)}”的唯一生效版本,并仅替换同一报价范围的当前生效版本。历史版本和原始文件将继续保留。`,
'确认并生效船期价格表',
{ type: 'warning', confirmButtonText: '确认并立即生效', cancelButtonText: '取消' },
)
} catch (error) {
if (error === 'cancel' || error === 'close') return
ElMessage.error('确认操作未完成,请重试。')
return
}
publishing.value = true
try {
const result = await publishPlatformPriceBook(detail.value.version.id, buildConfirmationRequest())
applyDetail(result)
ElMessage.success('船期价格表已生效,上一生效版本已保留为历史版本。')
await loadPriceBooks()
} catch (error) {
ElMessage.error(apiErrorMessage(error, '确认生效失败,请根据校验结果修正后重试'))
if (selectedVersionId.value) await openDetail({ id: selectedVersionId.value } as PlatformPriceBookVersion)
} finally {
publishing.value = false
}
}
async function downloadSource(row: PlatformPriceBookVersion) {
const next = new Set(downloadingIds.value)
next.add(row.id)
@@ -480,26 +260,54 @@ async function downloadSource(row: PlatformPriceBookVersion) {
}
}
async function voidPending(row: PlatformPriceBookVersion) {
if (row.status !== 'PENDING_CONFIRMATION' || !canEdit.value) return
let reason = ''
try {
const result = await ElMessageBox.prompt(
`作废后,版本 V${row.versionNo} 将不能再确认生效;版本记录和原始文件会继续保留。`,
'作废待确认价格表',
{
type: 'warning',
confirmButtonText: '确认作废',
cancelButtonText: '取消',
inputPlaceholder: '请输入作废原因',
inputValidator: (value) => value.trim() ? true : '请输入作废原因',
inputPattern: /^.{1,500}$/s,
inputErrorMessage: '作废原因不能超过 500 个字符',
},
)
reason = result.value.trim()
} catch (error) {
if (error === 'cancel' || error === 'close') return
ElMessage.error('作废操作未完成,请重试。')
return
}
const next = new Set(voidingIds.value)
next.add(row.id)
voidingIds.value = next
try {
await voidPlatformPriceBook(row.id, reason)
ElMessage.success(`价格表 V${row.versionNo} 已作废`)
await loadPriceBooks()
} catch (error) {
ElMessage.error(apiErrorMessage(error, '价格表作废失败,请稍后重试'))
} finally {
const current = new Set(voidingIds.value)
current.delete(row.id)
voidingIds.value = current
}
}
function detailActionLabel(row: PlatformPriceBookVersion) {
return row.status === 'PENDING_CONFIRMATION' && canEdit.value ? '查看并确认' : '查看详情'
}
function closeDetail() {
if (publishing.value) return
detailOpen.value = false
}
watch(uploadOpen, (open) => {
if (!open && !uploading.value) resetUpload()
})
watch(detailOpen, (open) => {
if (open || publishing.value) return
detailSequence += 1
detailLoading.value = false
detailError.value = null
})
onMounted(() => {
void loadCustomerOptions()
void loadPriceBooks()
@@ -557,6 +365,14 @@ onMounted(() => {
:loading="downloadingIds.has((row as PlatformPriceBookVersion).id)"
@click="downloadSource(row as PlatformPriceBookVersion)"
><Download :size="15" />原文件</el-button>
<el-button
v-if="canEdit && (row as PlatformPriceBookVersion).status === 'PENDING_CONFIRMATION'"
size="small"
plain
type="danger"
:loading="voidingIds.has((row as PlatformPriceBookVersion).id)"
@click="voidPending(row as PlatformPriceBookVersion)"
><CircleX :size="15" />作废</el-button>
</div>
</template>
<template #version="{ row }"><div class="version-cell"><strong>V{{ (row as PlatformPriceBookVersion).versionNo }}</strong></div></template>
@@ -595,136 +411,6 @@ onMounted(() => {
</div>
</AppDialog>
<AppDrawer
v-model="detailOpen"
:title="detail ? `船期价格表 · V${detail.version.versionNo}` : '船期价格表详情'"
size="min(920px, 96vw)"
:loading="detailLoading"
:show-footer="isPendingDetail && canEdit"
:confirm-loading="publishing"
:confirm-disabled="!canConfirmDetail"
confirm-text="确认并立即生效"
@confirm="confirmPriceBook"
@cancel="closeDetail"
>
<template #footer="{ close, submitting }">
<div class="price-book-footer">
<el-button :disabled="submitting" @click="close">取消</el-button>
<el-button type="primary" :loading="publishing" :disabled="detailLoading || !canConfirmDetail" @click="confirmPriceBook"><CircleCheck :size="16" />确认并立即生效</el-button>
</div>
</template>
<section v-if="detailError" class="detail-load-error" role="alert">
<strong>价格表详情暂时无法加载</strong>
<p>{{ detailError.message }}</p>
<ApiErrorMeta :details="detailError" />
<el-button type="primary" @click="selectedVersionId && openDetail({ id: selectedVersionId } as PlatformPriceBookVersion)"><RefreshCw :size="16" />重新加载</el-button>
</section>
<DetailPageLayout v-else-if="detail" class="detail-content" aria-label="船期价格表版本详情">
<template #header><header class="detail-summary">
<div class="detail-summary__title"><FileSpreadsheet :size="22" /><div><h3>{{ detail.version.originalFileName }}</h3><p>{{ priceBookScopeLabel(detail.version.customerId) }} · 版本 V{{ detail.version.versionNo }} · 上传于 {{ formatDateTime(detail.version.createdAt) }}</p></div></div>
<div class="detail-summary__actions"><el-tag :type="priceBookStatusMeta(detail.version.status).type" effect="light">{{ priceBookStatusMeta(detail.version.status).label }}</el-tag><el-button :loading="downloadingIds.has(detail.version.id)" @click="downloadSource(detail.version)"><Download :size="16" />下载原文件</el-button></div>
</header></template>
<template #summary><section class="detail-section version-facts">
<dl class="detail-grid">
<div><dt>解析渠道</dt><dd>{{ detail.version.channelCount }}</dd></div>
<div><dt>解析价格行</dt><dd>{{ detail.version.rateCount }}</dd></div>
<div><dt>阻断错误</dt><dd :class="{ 'is-danger': detail.version.blockingErrorCount }">{{ detail.version.blockingErrorCount }}</dd></div>
<div><dt>警告</dt><dd>{{ detail.version.warningCount }}</dd></div>
<div><dt>实际生效区间</dt><dd>{{ formatEffectivePeriod(detail.version) }}</dd></div>
</dl>
</section></template>
<section v-if="isPendingDetail && canEdit" class="detail-section mapping-section">
<header class="detail-section__heading"><div><h3><Warehouse :size="17" />仓库映射</h3><p>来源编码必须匹配启用的平台公共仓库编码。</p></div></header>
<el-alert
v-if="nonMappingBlockingIssues.length"
title="当前文件存在无法通过仓库映射解决的阻断错误,请修改原 Excel 后重新上传。"
type="error"
:closable="false"
show-icon
/>
<el-alert v-else-if="confirmationHint" :title="confirmationHint" :type="canConfirmDetail ? 'success' : 'warning'" :closable="false" show-icon />
<div v-if="mappingWarehousesError" class="mapping-load-error" role="alert">
<div><strong>平台仓库候选加载失败</strong><p>{{ mappingWarehousesError.message }}</p><ApiErrorMeta :details="mappingWarehousesError" /></div>
<el-button :loading="mappingWarehousesLoading" @click="loadMappingWarehouses(true)"><RefreshCw :size="16" />重新加载</el-button>
</div>
<div v-else-if="mappingWarehousesLoaded" class="mapping-groups">
<section class="mapping-group">
<h4>起运仓映射</h4>
<div v-for="row in originMappingRows" :key="row.key" class="mapping-row">
<div><strong>{{ row.sourceName }}</strong><span>来源编码:{{ row.sourceCode }}</span></div>
<el-select v-model="originSelections[row.key]" filterable placeholder="请选择匹配的国内仓">
<el-option
v-for="warehouse in domesticWarehouses"
:key="String(warehouse.id)"
:label="`${warehouse.warehouseName}(${warehouse.warehouseCode})`"
:value="String(warehouse.id)"
:disabled="originWarehouseDisabled(row, warehouse)"
/>
</el-select>
</div>
</section>
<section v-if="overseasMappingRows.length" class="mapping-group">
<h4>海外仓映射</h4>
<div v-for="row in overseasMappingRows" :key="row.key" class="mapping-row">
<div><strong>{{ row.sourceName }}</strong><span>目的仓编码:{{ row.destinationCode || '未提供' }}</span></div>
<el-select v-model="overseasSelections[row.key]" filterable placeholder="请选择匹配的海外仓">
<el-option
v-for="warehouse in overseasWarehouses"
:key="String(warehouse.id)"
:label="`${warehouse.warehouseName}(${warehouse.warehouseCode})`"
:value="String(warehouse.id)"
:disabled="overseasWarehouseDisabled(row, warehouse)"
/>
</el-select>
</div>
</section>
<el-alert v-if="mappingCandidatesMissing" title="未找到编码匹配的启用平台公共仓库,请先在仓库管理中补齐对应仓库。" type="warning" :closable="false" show-icon />
<el-alert v-if="hasMissingOverseasSource" title="有海外仓价格行缺少来源名称,无法确认映射。" type="error" :closable="false" show-icon />
</div>
</section>
<section class="detail-section">
<header class="detail-section__heading"><div><h3><AlertTriangle :size="17" />解析与校验</h3><p>阻断错误未解决时不能生效;价格行不可在页面内修改。</p></div></header>
<el-empty v-if="!detail.issues.length" description="未发现解析问题" :image-size="72" />
<el-table v-else :data="detail.issues" size="small" max-height="280" aria-label="价格表解析问题">
<el-table-column label="级别" width="90"><template #default="{ row }"><el-tag :type="(row as PlatformPriceBookParseIssue).severity === 'BLOCKING' ? 'danger' : 'warning'" size="small">{{ (row as PlatformPriceBookParseIssue).severity === 'BLOCKING' ? '阻断' : '警告' }}</el-tag></template></el-table-column>
<el-table-column prop="issueCode" label="编码" min-width="165" show-overflow-tooltip />
<el-table-column prop="message" label="说明" min-width="250" show-overflow-tooltip />
<el-table-column label="来源" min-width="180"><template #default="{ row }">{{ issueLocation(row as PlatformPriceBookParseIssue) }}</template></el-table-column>
</el-table>
</section>
<section class="detail-section channel-preview">
<header class="detail-section__heading"><div><h3><Ship :size="17" />按渠道预览</h3><p>显示上传 Excel 的解析结果,确认页不提供在线改价。</p></div></header>
<el-empty v-if="!detail.channels.length" description="未解析出渠道" :image-size="72" />
<template v-else>
<el-tabs v-model="selectedChannelCode" class="channel-tabs">
<el-tab-pane v-for="channel in detail.channels" :key="channel.channelCode" :label="channel.channelName" :name="channel.channelCode" />
</el-tabs>
<div class="channel-meta"><span>{{ priceModelLabel(selectedChannel?.priceModel || '') }}</span><span>表页:{{ selectedChannel?.sourceSheetName || '-' }}</span></div>
<el-table :data="selectedChannelRates" size="small" max-height="360" border stripe aria-label="渠道价格行预览">
<el-table-column label="渠道" min-width="140" show-overflow-tooltip><template #default>{{ selectedChannel?.channelName || '—' }}</template></el-table-column>
<el-table-column prop="originWarehouseName" label="起运仓" min-width="130" show-overflow-tooltip />
<el-table-column label="目的地" min-width="140"><template #default="{ row }">{{ rateDestinationLabel(row as PlatformPriceBookParsedRate) }}</template></el-table-column>
<el-table-column label="包税方式" width="105"><template #default="{ row }">{{ pricingTaxModeLabel((row as PlatformPriceBookParsedRate).pricingTaxMode) }}</template></el-table-column>
<el-table-column prop="chargeUnit" label="单位" width="78" />
<el-table-column label="单价" min-width="120"><template #default="{ row }">{{ formatMoney((row as PlatformPriceBookParsedRate).unitPrice, (row as PlatformPriceBookParsedRate).currency) }}</template></el-table-column>
<el-table-column label="参考时效" min-width="130" show-overflow-tooltip><template #default>{{ selectedChannel?.referenceTransit || '—' }}</template></el-table-column>
<el-table-column label="最晚进仓时间" min-width="150" show-overflow-tooltip><template #default>{{ selectedChannel?.latestWarehouseEntry || '—' }}</template></el-table-column>
<el-table-column label="船期" min-width="150" show-overflow-tooltip><template #default>{{ selectedChannel?.estimatedDepartureText || selectedChannel?.estimatedDepartureDate || '—' }}</template></el-table-column>
<el-table-column label="附加费" min-width="180" show-overflow-tooltip><template #default>{{ selectedChannel?.surchargeDescription || '—' }}</template></el-table-column>
<el-table-column label="备注" min-width="180" show-overflow-tooltip><template #default>{{ selectedChannel?.remark || '—' }}</template></el-table-column>
<el-table-column label="生效状态" width="105"><template #default>{{ priceBookStatusMeta(detail.version.status).label }}</template></el-table-column>
<el-table-column label="来源" min-width="170"><template #default="{ row }">{{ sourceLocation(row as PlatformPriceBookParsedRate) }}</template></el-table-column>
</el-table>
</template>
</section>
</DetailPageLayout>
</AppDrawer>
</AdminPage>
</template>
@@ -732,8 +418,6 @@ onMounted(() => {
.price-book-page { min-width: 0; }
.table-actions { display: flex; min-height: 32px; align-items: center; gap: 8px; }
.table-actions :deep(.el-button + .el-button) { margin-left: 0; }
.price-book-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.price-book-footer :deep(.el-button) { margin-left: 0; }
.version-cell { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.version-cell strong { color: var(--cc-text); }
.version-cell span, .metric-cell span { color: var(--cc-muted); font-size: 11px; }
@@ -751,59 +435,8 @@ onMounted(() => {
.upload-file-name span { color: var(--cc-muted); font-size: 12px; }
.upload-file-name.is-empty strong { color: var(--cc-muted); font-weight: 400; }
.upload-file-error { margin: -8px 0 0; color: var(--el-color-danger); font-size: 12px; }
.detail-load-error { display: flex; min-height: 220px; align-items: flex-start; justify-content: center; flex-direction: column; }
.detail-load-error strong { color: var(--cc-danger); font-size: 15px; }
.detail-load-error p { margin: 6px 0; color: var(--cc-text); font-size: 13px; }
.detail-load-error :deep(.el-button) { margin-top: 16px; }
.detail-content { display: grid; min-width: 0; gap: 20px; }
.detail-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--cc-border); }
.detail-summary__title, .detail-summary__actions { display: flex; min-width: 0; align-items: flex-start; gap: 10px; }
.detail-summary__title > svg { flex: 0 0 22px; margin-top: 2px; color: var(--cc-primary); }
.detail-summary__title h3 { margin: 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: 17px; line-height: 1.5; }
.detail-summary__title p { margin: 5px 0 0; color: var(--cc-muted); font-size: 12px; }
.detail-summary__actions { flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.detail-section { display: grid; gap: 14px; min-width: 0; }
.detail-section__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.detail-section__heading h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--cc-text); font-size: 14px; }
.detail-section__heading h3 svg { color: var(--cc-primary); }
.detail-section__heading p { margin: 5px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.55; }
.version-facts { padding-bottom: 18px; border-bottom: 1px solid var(--cc-border); }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid var(--cc-border); border-radius: 8px; overflow: hidden; }
.detail-grid > div { min-width: 0; padding: 12px 14px; border-right: 1px solid var(--cc-border); background: var(--cc-surface-soft, #f8fafc); }
.detail-grid > div:nth-child(3n) { border-right: 0; }
.detail-grid > div:nth-child(-n+3) { border-bottom: 1px solid var(--cc-border); }
.detail-grid dt { color: var(--cc-muted); font-size: 11px; }
.detail-grid dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: 15px; font-weight: 700; }
.mapping-section { padding: 16px; border: 1px solid var(--cc-border); border-radius: 8px; background: var(--cc-surface-soft, #f8fafc); }
.mapping-groups { display: grid; gap: 16px; }
.mapping-group { display: grid; gap: 8px; }
.mapping-group h4 { margin: 0; color: var(--cc-text); font-size: 13px; }
.mapping-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(280px, 1fr); align-items: center; gap: 16px; padding: 12px; border: 1px solid var(--cc-border); border-radius: 8px; background: #fff; }
.mapping-row > div { display: grid; min-width: 0; gap: 4px; }
.mapping-row strong { overflow-wrap: anywhere; color: var(--cc-text); font-size: 13px; }
.mapping-row span { overflow-wrap: anywhere; color: var(--cc-muted); font-size: 12px; }
.mapping-load-error { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid color-mix(in srgb, var(--cc-danger) 24%, var(--cc-border)); border-radius: 8px; background: #fff; }
.mapping-load-error strong { color: var(--cc-danger); font-size: 13px; }
.mapping-load-error p { margin: 4px 0; color: var(--cc-text); font-size: 12px; }
.channel-tabs { width: 100%; min-width: 0; margin-bottom: 0; overflow: hidden; }
.channel-preview :deep(.el-table) { width: 100%; max-width: 100%; min-width: 0; }
.channel-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 0 8px; color: var(--cc-muted); font-size: 12px; }
@media (max-width: 720px) {
.table-actions :deep(.el-button) { min-height: 40px; }
.price-book-footer :deep(.el-button) { min-height: 44px; }
.upload-file-control, .detail-summary, .mapping-load-error { align-items: stretch; flex-direction: column; }
.detail-summary__actions { justify-content: flex-start; }
.detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-grid > div:nth-child(3n) { border-right: 1px solid var(--cc-border); }
.detail-grid > div:nth-child(2n) { border-right: 0; }
.detail-grid > div:nth-child(-n+3) { border-bottom: 0; }
.detail-grid > div:nth-child(-n+4) { border-bottom: 1px solid var(--cc-border); }
.mapping-row { grid-template-columns: 1fr; gap: 10px; }
.mapping-row :deep(.el-select) { width: 100%; }
}
@media (max-width: 420px) {
.detail-grid { grid-template-columns: 1fr; }
.detail-grid > div, .detail-grid > div:nth-child(3n) { border-right: 0; border-bottom: 1px solid var(--cc-border); }
.detail-grid > div:last-child { border-bottom: 0; }
.upload-file-control { align-items: stretch; flex-direction: column; }
}
</style>