From c13bacbc3e8ab3d3fcdf1379365e2e17313d09cc Mon Sep 17 00:00:00 2001
From: yml <yml@yml.com>
Date: Sun, 24 May 2026 22:56:58 +0800
Subject: [PATCH] =?UTF-8?q?pc=20=E7=AB=AF=20=E5=8F=91=E5=B8=83=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E5=88=9D=E6=AD=A5=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/seller/SellerListingCreateView.vue  | 1708 ++++++++++++++++-
 1 file changed, 1624 insertions(+), 84 deletions(-)

diff --git a/frontend/src/views/seller/SellerListingCreateView.vue b/frontend/src/views/seller/SellerListingCreateView.vue
index 46e5311..b866e94 100644
--- a/frontend/src/views/seller/SellerListingCreateView.vue
+++ b/frontend/src/views/seller/SellerListingCreateView.vue
@@ -1,35 +1,401 @@
 <script setup lang="ts">
-import { ElMessage } from 'element-plus'
-import { reactive, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Delete, Picture, RefreshRight, UploadFilled } from '@element-plus/icons-vue'
 
-import { uploadFile } from '@/api/files'
+import { fetchFileBlobByURL, uploadFile } from '@/api/files'
+import {
+  emptyListingPublishOptions,
+  emptyListingSalePriceConfig,
+  fetchListingPublishOptions,
+  fetchListingSalePriceConfig,
+  type ChargeMode,
+  type ListingPublishOptions,
+  type PublishSalePriceConfig,
+  type QuantityKey,
+  type ScreenshotKey,
+} from '@/api/listingOptions'
 import { createListing } from '@/api/listings'
 
+type PublishForm = {
+  server_region: string
+  face_owner: string
+  haf_coin_amount: number | ''
+  rank_level: string
+  secret_kd: string
+  fire_level: number | ''
+  daily_loss_m: number | ''
+  accelerated_sale_ratio: number | ''
+  season_insurance: string
+  stamina_level: string
+  load_level: string
+  login_method: string
+  online_start: string
+  online_end: string
+  ban_record: string
+  common_regions: string[]
+  deposit_amount: number | ''
+  remark: string
+}
+
+interface PublishDraft {
+  form: PublishForm
+  quantityValues: Record<QuantityKey, number>
+  quantityModes: Record<QuantityKey, ChargeMode>
+  screenshotFiles: Record<ScreenshotKey, string>
+  selectedSkins: string[]
+}
+
+const draftKey = 'hfb.pc.publish.draft'
+const dailyLossOptions = [10, 20, 30, 40, 50]
 const router = useRouter()
 const loading = ref(false)
 const uploading = ref(false)
-const screenshotUrls = ref<string[]>([])
-const form = reactive({
-  title: '',
-  description: '',
-  server_region: '微信区',
-  login_platform: 'QQ',
-  rank_level: '',
-  haf_coin_amount: 0,
-  price: 50,
-  deposit_amount: 100,
+const suppressDraftSave = ref(false)
+const publishOptions = ref<ListingPublishOptions>(emptyListingPublishOptions)
+const salePriceConfig = ref<PublishSalePriceConfig>(emptyListingSalePriceConfig)
+const fileInput = ref<HTMLInputElement | null>(null)
+const activeUploadKey = ref<ScreenshotKey>('coin')
+
+function defaultForm(): PublishForm {
+  return {
+    server_region: '',
+    face_owner: '',
+    haf_coin_amount: '',
+    rank_level: '',
+    secret_kd: '',
+    fire_level: '',
+    daily_loss_m: 10,
+    accelerated_sale_ratio: '',
+    season_insurance: '',
+    stamina_level: '',
+    load_level: '',
+    login_method: '',
+    online_start: '',
+    online_end: '',
+    ban_record: '',
+    common_regions: [],
+    deposit_amount: '',
+    remark: '',
+  }
+}
+
+const form = reactive<PublishForm>(defaultForm())
+const quantityValues = reactive<Record<QuantityKey, number>>({})
+const quantityModes = reactive<Record<QuantityKey, ChargeMode>>({})
+const screenshotFiles = reactive<Record<ScreenshotKey, string>>({})
+const screenshotPreviews = reactive<Record<ScreenshotKey, string>>({})
+const selectedSkins = ref<string[]>([])
+
+const serverOptions = computed(() => publishOptions.value.server_options)
+const faceOptions = computed(() => publishOptions.value.face_options)
+const rankOptions = computed(() => publishOptions.value.rank_options)
+const insuranceOptions = computed(() => publishOptions.value.insurance_options)
+const levelOptions = computed(() => publishOptions.value.level_options)
+const loginMethodOptions = computed(() => publishOptions.value.login_method_options)
+const regionOptions = computed(() => publishOptions.value.region_options)
+const banRecordOptions = computed(() => publishOptions.value.ban_record_options)
+const banEvidenceOptions = computed(() => publishOptions.value.ban_evidence_options)
+const skinGroups = computed(() => publishOptions.value.skin_groups)
+const quantityItems = computed(() => publishOptions.value.quantity_items)
+const screenshotSlots = computed(() => publishOptions.value.screenshot_slots)
+const priceConfig = computed(() => publishOptions.value.price_config)
+const fireLevelMin = computed(() => publishOptions.value.fire_level_min || 38)
+const fireLevelPlaceholder = computed(() => `等级低于${fireLevelMin.value}级的号无法发布`)
+const screenshotUrls = computed(() =>
+  screenshotSlots.value.map((item) => screenshotFiles[item.key]).filter((url): url is string => Boolean(url)),
+)
+const coinMAmount = computed(() => Number(form.haf_coin_amount || 0))
+const coinWanAmount = computed(() => coinMAmount.value * 100)
+const dailyLossMAmount = computed(() => Number(form.daily_loss_m || 10))
+const dailyLossRatioAdjustment = computed(() =>
+  Math.min(Math.max(Math.floor((dailyLossMAmount.value - 10) / 10), 0), 4),
+)
+const calculatedSellerReferenceRatio = computed(() => calculateSellerReferenceRatio())
+const calculatedDefaultSaleRatio = computed(() => calculatedSellerReferenceRatio.value)
+const maxAcceleratedSaleRatio = computed(() =>
+  calculatedDefaultSaleRatio.value > 0 ? roundRatio(calculatedDefaultSaleRatio.value + 10) : 0,
+)
+const calculatedRatio = computed(() => readFinalSaleRatio())
+const calculatedCoinBasePrice = computed(() => {
+  if (calculatedRatio.value <= 0) return 0
+  return roundMoney(coinWanAmount.value / calculatedRatio.value)
+})
+const calculatedConsumablePrice = computed(() => calculateConsumablePrice())
+const calculatedSellerPrice = computed(() =>
+  calculatedRatio.value > 0 ? roundMoney(calculatedCoinBasePrice.value + calculatedConsumablePrice.value) : 0,
+)
+const calculatedPlatformPricing = computed(() => calculatePlatformPricing())
+const calculatedFinalPrice = computed(() => calculatedPlatformPricing.value.buyerTotalPrice)
+const calculatedRatioText = computed(() => (calculatedRatio.value > 0 ? `1:${formatNumber(calculatedRatio.value)}` : '--'))
+const calculatedDefaultSaleRatioText = computed(() =>
+  calculatedDefaultSaleRatio.value > 0 ? `1:${formatNumber(calculatedDefaultSaleRatio.value)}` : '--',
+)
+const saleRatioRangeText = computed(() => {
+  if (calculatedDefaultSaleRatio.value <= 0) return '完成基础信息后自动计算参考比例'
+  return `可设置 1:${formatNumber(calculatedDefaultSaleRatio.value)} ~ 1:${formatNumber(maxAcceleratedSaleRatio.value)}`
+})
+const acceleratedSaleRatioPlaceholder = computed(() => {
+  if (calculatedDefaultSaleRatio.value <= 0) return '填写资料后自动生成可设置范围'
+  return `默认 ${formatNumber(calculatedDefaultSaleRatio.value)}，最高 ${formatNumber(maxAcceleratedSaleRatio.value)}`
+})
+const selectedSkinCount = computed(() => selectedSkins.value.length)
+const uploadedScreenshotCount = computed(() => screenshotUrls.value.length)
+const requiredScreenshotCount = computed(() => screenshotSlots.value.filter((item) => isScreenshotRequired(item)).length)
+const publishTitle = computed(() => {
+  const parts = [form.server_region, form.rank_level, coinMAmount.value ? `${coinMAmount.value}M哈夫币` : ''].filter(Boolean)
+  return parts.length ? parts.join(' ') : '待完善账号信息'
 })
 
+onMounted(() => {
+  restoreDraft()
+  loadPublishOptions()
+})
+
+onBeforeUnmount(() => {
+  revokeAllScreenshotPreviews()
+})
+
+watch(
+  [form, quantityValues, quantityModes, screenshotFiles, selectedSkins],
+  () => {
+    saveDraft()
+  },
+  { deep: true },
+)
+
+async function loadPublishOptions() {
+  try {
+    const [nextPublishOptions, nextSalePriceConfig] = await Promise.all([
+      fetchListingPublishOptions(),
+      fetchListingSalePriceConfig(),
+    ])
+    publishOptions.value = nextPublishOptions
+    salePriceConfig.value = nextSalePriceConfig
+  } catch {
+    publishOptions.value = emptyListingPublishOptions
+    salePriceConfig.value = emptyListingSalePriceConfig
+  }
+}
+
+function buildDraft(): PublishDraft {
+  return {
+    form: {
+      ...form,
+      common_regions: [...form.common_regions],
+    },
+    quantityValues: { ...quantityValues },
+    quantityModes: { ...quantityModes },
+    screenshotFiles: { ...screenshotFiles },
+    selectedSkins: [...selectedSkins.value],
+  }
+}
+
+function saveDraft() {
+  if (suppressDraftSave.value) return
+  localStorage.setItem(draftKey, JSON.stringify(buildDraft()))
+}
+
+function restoreDraft() {
+  const raw = localStorage.getItem(draftKey)
+  if (!raw) return
+  try {
+    const draft = JSON.parse(raw) as Partial<PublishDraft>
+    Object.assign(form, normalizeDraftForm(draft.form))
+    Object.assign(quantityValues, draft.quantityValues || {})
+    Object.assign(quantityModes, draft.quantityModes || {})
+    Object.assign(screenshotFiles, draft.screenshotFiles || {})
+    selectedSkins.value = Array.isArray(draft.selectedSkins)
+      ? draft.selectedSkins.filter((skin): skin is string => typeof skin === 'string')
+      : []
+    hydrateScreenshotPreviews()
+  } catch {
+    localStorage.removeItem(draftKey)
+  }
+}
+
+function normalizeDraftForm(value: unknown): PublishForm {
+  const next = defaultForm()
+  if (!isRecord(value)) return next
+  for (const key of Object.keys(next) as Array<keyof PublishForm>) {
+    if (key === 'common_regions') continue
+    const draftValue = value[key]
+    if (draftValue !== undefined) next[key] = draftValue as never
+  }
+  next.common_regions = Array.isArray(value.common_regions)
+    ? value.common_regions.filter((region): region is string => typeof region === 'string')
+    : []
+  return next
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+function resetDraftState() {
+  Object.assign(form, defaultForm())
+  for (const key of Object.keys(quantityValues)) delete quantityValues[key]
+  for (const key of Object.keys(quantityModes)) delete quantityModes[key]
+  for (const key of Object.keys(screenshotFiles)) delete screenshotFiles[key]
+  revokeAllScreenshotPreviews()
+  selectedSkins.value = []
+  activeUploadKey.value = 'coin'
+}
+
+async function handleResetDraft() {
+  try {
+    await ElMessageBox.confirm('将清空当前填写内容和本地草稿。', '重置发布内容', {
+      confirmButtonText: '重置',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+  } catch {
+    return
+  }
+  suppressDraftSave.value = true
+  resetDraftState()
+  localStorage.removeItem(draftKey)
+  ElMessage.success('已重置')
+  window.setTimeout(() => {
+    suppressDraftSave.value = false
+  })
+}
+
+function toggleSkin(skin: string) {
+  selectedSkins.value = selectedSkins.value.includes(skin)
+    ? selectedSkins.value.filter((item) => item !== skin)
+    : [...selectedSkins.value, skin]
+}
+
+function toggleRegion(region: string) {
+  form.common_regions = form.common_regions.includes(region)
+    ? form.common_regions.filter((item) => item !== region)
+    : [...form.common_regions, region]
+}
+
+function triggerUpload(key: ScreenshotKey) {
+  activeUploadKey.value = key
+  fileInput.value?.click()
+}
+
+async function handleScreenshotUpload(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  if (!file) return
+  const key = activeUploadKey.value
+  const previewURL = URL.createObjectURL(file)
+  setScreenshotPreview(key, previewURL)
+  uploading.value = true
+  try {
+    const uploaded = await uploadFile(file, 'listing')
+    screenshotFiles[key] = uploaded.url
+    ElMessage.success('截图已上传')
+  } catch (error) {
+    revokeScreenshotPreview(key)
+    ElMessage.error(readError(error, '截图上传失败'))
+  } finally {
+    uploading.value = false
+    input.value = ''
+  }
+}
+
+function removeScreenshot(key: ScreenshotKey) {
+  screenshotFiles[key] = ''
+  revokeScreenshotPreview(key)
+}
+
+function getScreenshotPreviewURL(key: ScreenshotKey) {
+  return screenshotPreviews[key] || screenshotFiles[key] || ''
+}
+
+function setScreenshotPreview(key: ScreenshotKey, previewURL: string) {
+  revokeScreenshotPreview(key)
+  screenshotPreviews[key] = previewURL
+}
+
+function revokeScreenshotPreview(key: ScreenshotKey) {
+  const previewURL = screenshotPreviews[key]
+  if (previewURL?.startsWith('blob:')) URL.revokeObjectURL(previewURL)
+  delete screenshotPreviews[key]
+}
+
+function revokeAllScreenshotPreviews() {
+  for (const key of Object.keys(screenshotPreviews)) revokeScreenshotPreview(key)
+}
+
+async function hydrateScreenshotPreviews() {
+  for (const [key, fileURL] of Object.entries(screenshotFiles)) {
+    if (!fileURL || screenshotPreviews[key] || !fileURL.startsWith('/api/files/object')) continue
+    try {
+      const blob = await fetchFileBlobByURL(fileURL)
+      setScreenshotPreview(key, URL.createObjectURL(blob))
+    } catch {
+      // 草稿预览失败不影响已上传文件地址，提交时仍会带上原 URL。
+    }
+  }
+}
+
+function handleFireLevelInput(value: string | number | undefined) {
+  if (value === '' || value === undefined) {
+    form.fire_level = ''
+    return
+  }
+  const level = Number(value)
+  form.fire_level = Number.isFinite(level) ? Math.trunc(level) : ''
+}
+
+function handleAcceleratedSaleRatioInput(value: string | number | undefined) {
+  if (value === '' || value === undefined) {
+    form.accelerated_sale_ratio = ''
+    return
+  }
+  const ratio = Number(value)
+  form.accelerated_sale_ratio = Number.isFinite(ratio) ? ratio : ''
+}
+
+function clampAcceleratedSaleRatioInput() {
+  if (!hasAcceleratedSaleRatioInput() || calculatedDefaultSaleRatio.value <= 0) return
+  const ratio = Number(form.accelerated_sale_ratio)
+  if (!Number.isFinite(ratio)) {
+    form.accelerated_sale_ratio = ''
+    return
+  }
+  form.accelerated_sale_ratio = roundRatio(
+    Math.min(Math.max(ratio, calculatedDefaultSaleRatio.value), maxAcceleratedSaleRatio.value),
+  )
+}
+
+function useReferenceSaleRatio() {
+  form.accelerated_sale_ratio = ''
+}
+
+function useMaxAcceleratedSaleRatio() {
+  if (maxAcceleratedSaleRatio.value <= 0) return
+  form.accelerated_sale_ratio = maxAcceleratedSaleRatio.value
+}
+
 async function handleSubmit() {
+  const error = validateForm()
+  if (error) {
+    ElMessage.warning(error)
+    return
+  }
   loading.value = true
   try {
-    const price = Number(form.price || 0)
     const listing = await createListing({
-      ...form,
-      price,
+      title: publishTitle.value,
+      description: form.remark,
+      server_region: form.server_region,
+      login_platform: form.login_method,
+      rank_level: form.rank_level,
+      haf_coin_amount: coinMAmount.value * 1000000,
+      asset_summary: buildAssetSummary(),
       screenshot_urls: screenshotUrls.value,
+      price: calculatedFinalPrice.value,
+      deposit_amount: Number(form.deposit_amount),
     })
+    localStorage.removeItem(draftKey)
     ElMessage.success(
       listing.status === 'published' && listing.review_status === 'approved'
         ? '发布成功，已上架'
@@ -43,25 +409,259 @@ async function handleSubmit() {
   }
 }
 
-async function handleScreenshotUpload(event: Event) {
-  const input = event.target as HTMLInputElement
-  const file = input.files?.[0]
-  if (!file) return
-  uploading.value = true
-  try {
-    const uploaded = await uploadFile(file, 'listing')
-    screenshotUrls.value = [...screenshotUrls.value, uploaded.url]
-    ElMessage.success('截图已上传')
-  } catch (error) {
-    ElMessage.error(readError(error, '截图上传失败'))
-  } finally {
-    uploading.value = false
-    input.value = ''
+function validateForm() {
+  if (!form.server_region) return '请选择区服'
+  if (coinMAmount.value <= 0) return '请填写哈夫币/M'
+  if (!form.rank_level) return '请选择段位'
+  if (!form.fire_level) return '请填写烽火等级'
+  if (Number(form.fire_level) < fireLevelMin.value) return `烽火等级低于${fireLevelMin.value}级的号无法发布`
+  if (!form.season_insurance) return '请选择赛季保险'
+  if (!form.stamina_level) return '请选择体力等级'
+  if (!form.load_level) return '请选择负重等级'
+  if (!dailyLossOptions.includes(dailyLossMAmount.value)) return '请选择每日损耗'
+  if (hasAcceleratedSaleRatioInput()) {
+    const ratio = Number(form.accelerated_sale_ratio)
+    if (!Number.isFinite(ratio) || ratio <= 0) return '加速出售比例格式不正确'
+    if (calculatedDefaultSaleRatio.value > 0 && ratio < calculatedDefaultSaleRatio.value) {
+      return `加速出售比例不能低于默认比例 1:${formatNumber(calculatedDefaultSaleRatio.value)}`
+    }
+    if (maxAcceleratedSaleRatio.value > 0 && ratio > maxAcceleratedSaleRatio.value) {
+      return `加速出售比例不能超过 1:${formatNumber(maxAcceleratedSaleRatio.value)}`
+    }
+  }
+  if (banRecordOptions.value.length && !form.ban_record) return '请选择封禁记录'
+  if (form.deposit_amount === '' || Number(form.deposit_amount) < 0) return '请填写押金'
+  if (!Number.isFinite(Number(form.deposit_amount))) return '押金格式不正确'
+  if (calculatedConsumablePrice.value > 0 && Number(form.deposit_amount) <= calculatedConsumablePrice.value) {
+    return `押金必须大于额外消耗品总价值 ¥${calculatedConsumablePrice.value}`
+  }
+  if (!calculatedFinalPrice.value) return '请完善币数、保险、体力和负重后再发布'
+  if (!Number.isFinite(calculatedFinalPrice.value)) return '发布价格计算异常，请检查填写内容'
+  for (const item of screenshotSlots.value) {
+    if (isScreenshotRequired(item) && !screenshotFiles[item.key]) return `请上传${item.label}`
+  }
+  return ''
+}
+
+function isScreenshotRequired(item: { key: string; required: boolean }) {
+  return item.required || (item.key === 'tencentSecurity' && shouldRequireBanEvidence())
+}
+
+function shouldRequireBanEvidence() {
+  return banEvidenceOptions.value.includes(form.ban_record)
+}
+
+function buildAssetSummary() {
+  return {
+    face_owner: form.face_owner,
+    secret_kd: form.secret_kd,
+    fire_level: Number(form.fire_level),
+    daily_loss_m: dailyLossMAmount.value,
+    publish_ratio: calculatedPlatformPricing.value.buyerRatio,
+    price_breakdown: {
+      seller_reference_ratio: calculatedSellerReferenceRatio.value,
+      seller_ratio: calculatedRatio.value,
+      seller_coin_base_price: calculatedCoinBasePrice.value,
+      seller_total_price: calculatedSellerPrice.value,
+      consumable_price: calculatedConsumablePrice.value,
+      daily_loss_ratio_adjustment: dailyLossRatioAdjustment.value,
+      accelerated_sale_ratio: hasAcceleratedSaleRatioInput()
+        ? Number(form.accelerated_sale_ratio)
+        : calculatedDefaultSaleRatio.value,
+      buyer_coin_base_price: calculatedPlatformPricing.value.buyerCoinBasePrice,
+      buyer_total_price: calculatedFinalPrice.value,
+      buyer_ratio: calculatedPlatformPricing.value.buyerRatio,
+      platform_markup_amount: calculatedPlatformPricing.value.platformMarkupAmount,
+      platform_rule_type: calculatedPlatformPricing.value.ruleType,
+    },
+    season_insurance: form.season_insurance,
+    stamina_level: form.stamina_level,
+    load_level: form.load_level,
+    resources: quantityItems.value.map((item) => ({
+      key: item.key,
+      label: item.label,
+      price: item.price,
+      quantity: Number(quantityValues[item.key] || 0),
+      mode: quantityModes[item.key] || '收费',
+    })),
+    skin_groups: skinGroups.value.reduce<Record<string, string[]>>((groups, group) => {
+      groups[group.key] = group.options.filter((skin) => selectedSkins.value.includes(skin))
+      return groups
+    }, {}),
+    online_time: {
+      start: form.online_start,
+      end: form.online_end,
+    },
+    ban_record: form.ban_record,
+    common_regions: form.common_regions,
+    remark: form.remark,
   }
 }
 
-function removeScreenshot(index: number) {
-  screenshotUrls.value = screenshotUrls.value.filter((_, itemIndex) => itemIndex !== index)
+function roundMoney(value: number) {
+  return Math.round(value * 100) / 100
+}
+
+function calculateConsumablePrice() {
+  const total = quantityItems.value.reduce((sum, item) => {
+    const quantity = Number(quantityValues[item.key] || 0)
+    const mode = quantityModes[item.key] || '收费'
+    if (quantity <= 0 || mode !== '收费') return sum
+    return sum + quantity * readUnitPrice(item.price)
+  }, 0)
+  return roundMoney(total)
+}
+
+function readUnitPrice(priceText: string) {
+  const normalized = priceText.replace(/，/g, ',').trim()
+  const fractionMatch = normalized.match(/(\d+(?:\.\d+)?)\s*元\s*\/\s*(\d+(?:\.\d+)?)/)
+  if (fractionMatch) {
+    const amount = Number(fractionMatch[1])
+    const count = Number(fractionMatch[2])
+    return count > 0 ? amount / count : 0
+  }
+  const singleMatch = normalized.match(/(\d+(?:\.\d+)?)\s*元/)
+  return singleMatch ? Number(singleMatch[1]) : 0
+}
+
+function calculateSellerReferenceRatio() {
+  if (coinMAmount.value <= 0 || !form.season_insurance || !form.stamina_level || !form.load_level) return 0
+  const baseRatio = getInsuranceBaseRatio(publishOptions.value.ratio_config, form.season_insurance)
+  if (baseRatio <= 0) return 0
+  return (
+    baseRatio +
+    calculateConfigPenalty(publishOptions.value.ratio_config) +
+    getCoinCorrection(publishOptions.value.ratio_config, coinMAmount.value) +
+    dailyLossRatioAdjustment.value
+  )
+}
+
+function readFinalSaleRatio() {
+  const defaultRatio = calculatedDefaultSaleRatio.value
+  if (defaultRatio <= 0) return 0
+  if (!hasAcceleratedSaleRatioInput()) return defaultRatio
+  const ratio = Number(form.accelerated_sale_ratio)
+  if (!Number.isFinite(ratio) || ratio <= 0) return defaultRatio
+  return roundRatio(Math.min(Math.max(ratio, defaultRatio), maxAcceleratedSaleRatio.value))
+}
+
+function hasAcceleratedSaleRatioInput() {
+  return form.accelerated_sale_ratio !== '' && form.accelerated_sale_ratio !== null
+}
+
+function calculatePlatformPricing() {
+  if (calculatedRatio.value <= 0 || calculatedCoinBasePrice.value <= 0) return emptyPlatformPricing()
+  const fixedRule = findSaleFixedMarkupRule()
+  if (fixedRule) {
+    return buildPlatformPricing(roundMoney(calculatedCoinBasePrice.value + Number(fixedRule.markup_amount || 0)), 'fixed_markup')
+  }
+  const ratioRule = findSaleRatioAdjustmentRule()
+  const ratioSubtract = ratioRule ? Number(ratioRule.ratio_subtract || 0) : 0
+  const buyerRatio = calculatedRatio.value - ratioSubtract
+  if (buyerRatio > 0 && ratioRule) {
+    return buildPlatformPricing(roundMoney(coinWanAmount.value / buyerRatio), 'ratio_subtract')
+  }
+  return buildPlatformPricing(calculatedCoinBasePrice.value, 'none')
+}
+
+function buildPlatformPricing(buyerCoinBasePrice: number, ruleType: string) {
+  const buyerTotalPrice = roundMoney(buyerCoinBasePrice + calculatedConsumablePrice.value)
+  return {
+    buyerCoinBasePrice,
+    buyerTotalPrice,
+    buyerRatio: calculateEffectiveRatio(buyerCoinBasePrice),
+    platformMarkupAmount: roundMoney(buyerTotalPrice - calculatedSellerPrice.value),
+    ruleType,
+  }
+}
+
+function emptyPlatformPricing() {
+  return {
+    buyerCoinBasePrice: 0,
+    buyerTotalPrice: 0,
+    buyerRatio: 0,
+    platformMarkupAmount: 0,
+    ruleType: 'none',
+  }
+}
+
+function findSaleFixedMarkupRule() {
+  return [...salePriceConfig.value.fixed_markup_rules]
+    .sort((a, b) => a.min_m - b.min_m)
+    .find((item, index, rules) => isCoinInSaleRange(item, index, rules, { includeLastMax: true }))
+}
+
+function findSaleRatioAdjustmentRule() {
+  return [...salePriceConfig.value.ratio_adjustment_rules]
+    .sort((a, b) => a.min_m - b.min_m)
+    .find((item, index, rules) => isCoinInSaleRange(item, index, rules, { excludeFirstMin: true }))
+}
+
+function isCoinInSaleRange(
+  item: { min_m: number; max_m: number },
+  index: number,
+  rules: Array<{ min_m: number; max_m: number }>,
+  options: { includeLastMax?: boolean; excludeFirstMin?: boolean } = {},
+) {
+  const maxM = Number(item.max_m || 0)
+  const minM = Number(item.min_m || 0)
+  const minMatched = options.excludeFirstMin && index === 0 ? coinMAmount.value > minM : coinMAmount.value >= minM
+  const isLastRule = index === rules.length - 1
+  const maxMatched =
+    maxM <= 0 || coinMAmount.value < maxM || (options.includeLastMax && isLastRule && coinMAmount.value <= maxM)
+  return minMatched && maxMatched
+}
+
+function calculateEffectiveRatio(price: number) {
+  if (price <= 0) return 0
+  return roundRatio(coinWanAmount.value / price)
+}
+
+function getInsuranceBaseRatio(config: { insurance_base_ratios: Array<{ insurance: string; ratio: number }> }, insurance: string) {
+  return config.insurance_base_ratios.find((item) => item.insurance === insurance)?.ratio || 0
+}
+
+function calculateConfigPenalty(config: { config_items: Array<{ kind: string; group_key?: string; missing_penalty: number }> }) {
+  return config.config_items.reduce((sum, item) => {
+    return isRatioConfigItemMatched(item) ? sum : sum + Number(item.missing_penalty || 0)
+  }, 0)
+}
+
+function isRatioConfigItemMatched(item: { kind: string; group_key?: string }) {
+  if (item.kind === 'skin_group') return hasSelectedSkinGroup(item.group_key || '')
+  if (item.kind === 'max_stamina') return isMaxLevel(form.stamina_level)
+  if (item.kind === 'max_load') return isMaxLevel(form.load_level)
+  return false
+}
+
+function hasSelectedSkinGroup(groupKey: string) {
+  const group = skinGroups.value.find((item) => item.key === groupKey)
+  if (!group) return false
+  return group.options.some((skin) => selectedSkins.value.includes(skin))
+}
+
+function isMaxLevel(value: string) {
+  const currentLevel = readLevelNumber(value)
+  const maxLevel = Math.max(...levelOptions.value.map(readLevelNumber).filter(Boolean))
+  if (currentLevel > 0 && maxLevel > 0) return currentLevel >= maxLevel
+  return value === levelOptions.value[levelOptions.value.length - 1]
+}
+
+function readLevelNumber(value: string) {
+  const match = value.match(/\d+/)
+  return match ? Number(match[0]) : 0
+}
+
+function getCoinCorrection(config: { coin_corrections: Array<{ threshold_m: number; correction: number }> }, coinM: number) {
+  return [...config.coin_corrections].sort((a, b) => b.threshold_m - a.threshold_m).find((item) => coinM > item.threshold_m)?.correction || 0
+}
+
+function formatNumber(value: number) {
+  return Number.isInteger(value) ? `${value}` : `${Math.round(value * 10) / 10}`
+}
+
+function roundRatio(value: number) {
+  return Math.round(value * 10) / 10
 }
 
 function readError(error: unknown, fallback: string) {
@@ -74,60 +674,1000 @@ function readError(error: unknown, fallback: string) {
 </script>
 
 <template>
-  <section class="page">
-    <div class="page-header">
-      <p class="eyebrow">Create Listing</p>
-      <h1>发布账号</h1>
-      <p>一期先记录账号资产说明和哈夫币填报值，下单时会生成订单资产快照。</p>
-    </div>
-
-    <el-form class="listing-form" label-position="top">
-      <el-form-item label="标题">
-        <el-input v-model="form.title" placeholder="例如：高段位哈夫币充足账号" />
-      </el-form-item>
-      <el-form-item label="账号说明">
-        <el-input v-model="form.description" type="textarea" :rows="3" />
-      </el-form-item>
-      <el-form-item label="账号资产截图">
-        <div class="upload-stack">
-          <div class="upload-line">
-            <input
-              type="file"
-              accept="image/jpeg,image/png,image/webp,application/pdf"
-              :disabled="uploading || screenshotUrls.length >= 12"
-              @change="handleScreenshotUpload"
-            />
-            <el-button :loading="uploading" disabled>最多 12 个</el-button>
+  <main class="publish-page">
+    <div class="publish-layout">
+      <section class="form-column">
+        <section class="form-section">
+          <div class="section-heading">
+            <h2>基础资料</h2>
+            <span>{{ publishTitle }}</span>
           </div>
-          <div v-if="screenshotUrls.length" class="evidence-list">
-            <div v-for="(url, index) in screenshotUrls" :key="url" class="evidence-row">
-              <span>{{ url }}</span>
-              <el-button size="small" @click="removeScreenshot(index)">移除</el-button>
+
+          <div class="field-row">
+            <label>区服<span>*</span></label>
+            <div class="chip-group">
+              <button
+                v-for="opt in serverOptions"
+                :key="opt"
+                type="button"
+                class="chip"
+                :class="{ active: form.server_region === opt }"
+                @click="form.server_region = opt"
+              >
+                {{ opt }}
+              </button>
             </div>
           </div>
+
+          <div v-if="faceOptions.length" class="field-row">
+            <label>是否本人人脸</label>
+            <div class="chip-group">
+              <button
+                v-for="opt in faceOptions"
+                :key="opt"
+                type="button"
+                class="chip"
+                :class="{ active: form.face_owner === opt }"
+                @click="form.face_owner = opt"
+              >
+                {{ opt }}
+              </button>
+            </div>
+          </div>
+
+          <div class="compact-grid">
+            <label class="input-block">
+              <span>哈夫币/M<b>*</b></span>
+              <el-input-number v-model="form.haf_coin_amount" :min="0" :controls="false" placeholder="100M 写 100" />
+            </label>
+            <label class="input-block">
+              <span>绝密KD</span>
+              <el-input v-model="form.secret_kd" type="number" placeholder="填写绝密KD" />
+            </label>
+            <label class="input-block">
+              <span>烽火等级<b>*</b></span>
+              <el-input-number
+                :model-value="form.fire_level"
+                :min="0"
+                :controls="false"
+                :placeholder="fireLevelPlaceholder"
+                @update:model-value="handleFireLevelInput"
+              />
+            </label>
+          </div>
+
+          <div class="field-row">
+            <label>段位<span>*</span></label>
+            <div class="chip-group">
+              <button
+                v-for="opt in rankOptions"
+                :key="opt"
+                type="button"
+                class="chip"
+                :class="{ active: form.rank_level === opt }"
+                @click="form.rank_level = opt"
+              >
+                {{ opt }}
+              </button>
+            </div>
+          </div>
+
+          <div class="field-row">
+            <label>赛季保险<span>*</span></label>
+            <div class="chip-group">
+              <button
+                v-for="opt in insuranceOptions"
+                :key="opt"
+                type="button"
+                class="chip"
+                :class="{ active: form.season_insurance === opt }"
+                @click="form.season_insurance = opt"
+              >
+                {{ opt }}
+              </button>
+            </div>
+          </div>
+
+          <div class="level-panel">
+            <div class="level-row">
+              <strong><span>*</span>体力</strong>
+              <div class="level-options">
+                <button
+                  v-for="opt in levelOptions"
+                  :key="`stamina-${opt}`"
+                  type="button"
+                  class="level-btn"
+                  :class="{ active: form.stamina_level === opt }"
+                  @click="form.stamina_level = opt"
+                >
+                  {{ opt }}
+                </button>
+              </div>
+            </div>
+            <div class="level-row">
+              <strong><span>*</span>负重</strong>
+              <div class="level-options">
+                <button
+                  v-for="opt in levelOptions"
+                  :key="`load-${opt}`"
+                  type="button"
+                  class="level-btn"
+                  :class="{ active: form.load_level === opt }"
+                  @click="form.load_level = opt"
+                >
+                  {{ opt }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section v-if="quantityItems.length" class="form-section">
+          <div class="section-heading">
+            <h2>额外消耗品</h2>
+            <span>收费项会计入每日价格</span>
+          </div>
+          <div class="quantity-grid">
+            <div v-for="item in quantityItems" :key="item.key" class="quantity-item">
+              <div class="quantity-meta">
+                <strong :title="item.placeholder || item.label">{{ item.label }}</strong>
+                <small>{{ item.price }}</small>
+              </div>
+              <el-input-number v-model="quantityValues[item.key]" :min="0" :controls="false" />
+              <div class="mode-toggle">
+                <button
+                  type="button"
+                  :class="{ active: quantityModes[item.key] === '赠送' }"
+                  @click="quantityModes[item.key] = '赠送'"
+                >
+                  赠送
+                </button>
+                <button
+                  type="button"
+                  :class="{ active: (quantityModes[item.key] || '收费') === '收费' }"
+                  @click="quantityModes[item.key] = '收费'"
+                >
+                  收费
+                </button>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="form-section">
+          <div class="section-heading">
+            <h2>皮肤与交接</h2>
+            <span>已选 {{ selectedSkinCount }} 项皮肤</span>
+          </div>
+
+          <div v-if="skinGroups.length" class="skin-groups">
+            <div v-for="group in skinGroups" :key="group.key" class="skin-group">
+              <div class="skin-title">
+                <strong>{{ group.title }}</strong>
+                <span>{{ group.options.filter((skin) => selectedSkins.includes(skin)).length }} 项</span>
+              </div>
+              <div class="chip-group">
+                <button
+                  v-for="skin in group.options"
+                  :key="skin"
+                  type="button"
+                  class="chip"
+                  :class="{ active: selectedSkins.includes(skin) }"
+                  @click="toggleSkin(skin)"
+                >
+                  {{ skin }}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div class="field-row">
+            <label>上号方式</label>
+            <div class="chip-group">
+              <button
+                v-for="opt in loginMethodOptions"
+                :key="opt"
+                type="button"
+                class="chip"
+                :class="{ active: form.login_method === opt }"
+                @click="form.login_method = opt"
+              >
+                {{ opt }}
+              </button>
+            </div>
+            <p class="field-hint">优先推荐账密登录，出售速度通常更快；请结合账号安全情况自行选择。</p>
+          </div>
+
+          <div class="compact-grid two">
+            <label class="input-block">
+              <span>在线开始</span>
+              <el-time-picker v-model="form.online_start" value-format="HH:mm" format="HH:mm" placeholder="开始时间" />
+            </label>
+            <label class="input-block">
+              <span>在线结束</span>
+              <el-time-picker v-model="form.online_end" value-format="HH:mm" format="HH:mm" placeholder="结束时间" />
+            </label>
+          </div>
+          <p class="field-hint">请填写能稳定联系上您的时间，便于扫码、冻结人脸和订单交接。</p>
+
+          <div v-if="banRecordOptions.length" class="field-row">
+            <label>封禁记录<span>*</span></label>
+            <div class="chip-group">
+              <button
+                v-for="opt in banRecordOptions"
+                :key="opt"
+                type="button"
+                class="chip"
+                :class="{ active: form.ban_record === opt }"
+                @click="form.ban_record = opt"
+              >
+                {{ opt }}
+              </button>
+            </div>
+          </div>
+
+          <div v-if="regionOptions.length" class="region-panel">
+            <div class="region-title">
+              <strong>常用登录地区</strong>
+              <span>已选 {{ form.common_regions.length }}</span>
+            </div>
+            <div class="region-grid">
+              <button
+                v-for="region in regionOptions"
+                :key="region"
+                type="button"
+                class="region-btn"
+                :class="{ active: form.common_regions.includes(region) }"
+                @click="toggleRegion(region)"
+              >
+                {{ region }}
+              </button>
+            </div>
+          </div>
+        </section>
+
+        <section class="form-section">
+          <div class="section-heading">
+            <h2>截图材料</h2>
+            <span>{{ uploadedScreenshotCount }}/{{ screenshotSlots.length }} 已上传</span>
+          </div>
+          <div class="upload-grid">
+            <div v-for="slot in screenshotSlots" :key="slot.key" class="upload-item">
+              <div class="upload-copy">
+                <strong>{{ slot.label }}<span v-if="isScreenshotRequired(slot)">*</span></strong>
+                <small>{{ slot.hint }}</small>
+              </div>
+              <div v-if="screenshotFiles[slot.key]" class="upload-preview">
+                <img :src="getScreenshotPreviewURL(slot.key)" :alt="slot.label" />
+                <button type="button" @click="removeScreenshot(slot.key)">
+                  <el-icon><Delete /></el-icon>
+                </button>
+              </div>
+              <button v-else type="button" class="upload-add" :disabled="uploading" @click="triggerUpload(slot.key)">
+                <el-icon><Picture /></el-icon>
+                <span>{{ uploading && activeUploadKey === slot.key ? '上传中' : '上传' }}</span>
+              </button>
+            </div>
+          </div>
+          <input
+            ref="fileInput"
+            type="file"
+            accept="image/jpeg,image/png,image/webp"
+            class="hidden-file"
+            @change="handleScreenshotUpload"
+          />
+        </section>
+
+        <section class="form-section">
+          <div class="section-heading">
+            <h2>押金与价格</h2>
+            <span>系统按资料自动计算售价</span>
+          </div>
+
+          <div class="compact-grid two">
+            <label class="input-block">
+              <span>押金<b>*</b></span>
+              <el-input-number
+                v-model="form.deposit_amount"
+                :min="0"
+                :controls="false"
+                :placeholder="priceConfig.deposit_placeholder"
+              />
+            </label>
+            <label class="input-block">
+              <span>每日损耗<b>*</b></span>
+              <div class="chip-group compact">
+                <button
+                  v-for="loss in dailyLossOptions"
+                  :key="loss"
+                  type="button"
+                  class="chip"
+                  :class="{ active: dailyLossMAmount === loss }"
+                  @click="form.daily_loss_m = loss"
+                >
+                  {{ loss }}M/天
+                </button>
+              </div>
+            </label>
+          </div>
+
+          <div class="ratio-panel">
+            <div class="ratio-reference">
+              <span>参考比例</span>
+              <strong>{{ calculatedDefaultSaleRatioText }}</strong>
+            </div>
+            <p>{{ saleRatioRangeText }}，比例越高出租速度越快。</p>
+            <div class="ratio-mode-grid">
+              <button
+                type="button"
+                class="ratio-mode-btn"
+                :class="{ active: !hasAcceleratedSaleRatioInput() }"
+                :disabled="calculatedDefaultSaleRatio <= 0"
+                @click="useReferenceSaleRatio"
+              >
+                <strong>参考比例</strong>
+                <span>{{ calculatedDefaultSaleRatio > 0 ? `1元=${formatNumber(calculatedDefaultSaleRatio)}万` : '自动计算' }}</span>
+              </button>
+              <button
+                type="button"
+                class="ratio-mode-btn"
+                :class="{ active: hasAcceleratedSaleRatioInput() }"
+                :disabled="maxAcceleratedSaleRatio <= 0"
+                @click="useMaxAcceleratedSaleRatio"
+              >
+                <strong>加速比例</strong>
+                <span>{{ maxAcceleratedSaleRatio > 0 ? `最高 1元=${formatNumber(maxAcceleratedSaleRatio)}万` : '自动计算' }}</span>
+              </button>
+            </div>
+            <label class="input-block">
+              <span>自定比例</span>
+              <el-input-number
+                :model-value="form.accelerated_sale_ratio"
+                :min="0"
+                :controls="false"
+                :placeholder="acceleratedSaleRatioPlaceholder"
+                @update:model-value="handleAcceleratedSaleRatioInput"
+                @blur="clampAcceleratedSaleRatioInput"
+              />
+            </label>
+          </div>
+
+          <div class="price-grid">
+            <div class="price-cell">
+              <span>卖家比例</span>
+              <strong>{{ calculatedRatioText }}</strong>
+            </div>
+            <div class="price-cell">
+              <span>纯币基础价</span>
+              <strong>{{ calculatedCoinBasePrice ? `¥${calculatedCoinBasePrice}` : '--' }}</strong>
+            </div>
+            <div class="price-cell">
+              <span>额外消耗品</span>
+              <strong>¥{{ calculatedConsumablePrice }}</strong>
+            </div>
+            <div class="price-cell accent">
+              <span>买家每日价</span>
+              <strong>{{ calculatedFinalPrice ? `¥${calculatedFinalPrice}` : '--' }}</strong>
+            </div>
+          </div>
+
+          <label class="input-block remark">
+            <span>备注</span>
+            <el-input
+              v-model="form.remark"
+              type="textarea"
+              :rows="4"
+              placeholder="如有不可使用的物资，请在此备注，并在买家下单后主动提醒。"
+            />
+          </label>
+        </section>
+      </section>
+
+      <aside class="summary-column">
+        <div class="summary-panel">
+          <div class="summary-main">
+            <span>预计买家每日价</span>
+            <strong>{{ calculatedFinalPrice ? `¥${calculatedFinalPrice}` : '--' }}</strong>
+          </div>
+          <div class="summary-list">
+            <div>
+              <span>哈夫币</span>
+              <strong>{{ coinMAmount || '--' }}M</strong>
+            </div>
+            <div>
+              <span>押金</span>
+              <strong>{{ form.deposit_amount === '' ? '--' : `¥${form.deposit_amount}` }}</strong>
+            </div>
+            <div>
+              <span>截图材料</span>
+              <strong>{{ uploadedScreenshotCount }}/{{ requiredScreenshotCount }}</strong>
+            </div>
+            <div>
+              <span>加价规则</span>
+              <strong>{{ calculatedPlatformPricing.ruleType }}</strong>
+            </div>
+          </div>
+          <div class="summary-actions">
+            <el-button :icon="UploadFilled" type="primary" :loading="loading" @click="handleSubmit">保存发布</el-button>
+            <el-button :icon="RefreshRight" :disabled="loading" @click="handleResetDraft">重置草稿</el-button>
+          </div>
         </div>
-      </el-form-item>
-      <div class="form-grid">
-        <el-form-item label="区服">
-          <el-input v-model="form.server_region" />
-        </el-form-item>
-        <el-form-item label="平台">
-          <el-input v-model="form.login_platform" />
-        </el-form-item>
-        <el-form-item label="段位">
-          <el-input v-model="form.rank_level" />
-        </el-form-item>
-        <el-form-item label="哈夫币数量">
-          <el-input-number v-model="form.haf_coin_amount" :min="0" />
-        </el-form-item>
-        <el-form-item label="价格">
-          <el-input-number v-model="form.price" :min="0" />
-        </el-form-item>
-        <el-form-item label="押金">
-          <el-input-number v-model="form.deposit_amount" :min="0" />
-        </el-form-item>
-      </div>
-      <el-button type="primary" :loading="loading" @click="handleSubmit">保存发布</el-button>
-    </el-form>
-  </section>
+      </aside>
+    </div>
+  </main>
 </template>
+
+<style scoped>
+.publish-page {
+  min-width: 0;
+  color: #20242a;
+}
+
+.publish-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 320px;
+  gap: 20px;
+  max-width: 1480px;
+  margin: 0 auto;
+}
+
+.form-column {
+  display: grid;
+  min-width: 0;
+  gap: 16px;
+}
+
+.form-section,
+.summary-panel {
+  border: 1px solid #e6ebf2;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 12px 34px rgba(20, 34, 56, 0.05);
+}
+
+.form-section {
+  padding: 18px;
+}
+
+.section-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.section-heading h2 {
+  margin: 0;
+  color: #171b24;
+  font-size: 17px;
+}
+
+.section-heading span {
+  color: #7b8492;
+  font-size: 13px;
+  font-weight: 700;
+  text-align: right;
+}
+
+.field-row {
+  display: grid;
+  grid-template-columns: 118px minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
+  margin-top: 14px;
+}
+
+.field-row > label,
+.input-block > span {
+  color: #303743;
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 32px;
+}
+
+.field-row label span,
+.input-block b,
+.level-row strong span,
+.upload-copy strong span {
+  color: #f04438;
+}
+
+.chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+}
+
+.chip-group.compact {
+  align-items: center;
+  min-height: 32px;
+}
+
+.chip,
+.level-btn,
+.region-btn,
+.mode-toggle button,
+.ratio-mode-btn {
+  border: 1px solid #d6dce5;
+  background: #fff;
+  color: #596474;
+  font-weight: 800;
+  cursor: pointer;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
+}
+
+.chip {
+  min-height: 32px;
+  padding: 0 13px;
+  border-radius: 16px;
+  font-size: 13px;
+}
+
+.chip.active,
+.level-btn.active,
+.region-btn.active {
+  border-color: #1477ff;
+  background: #1477ff;
+  color: #fff;
+}
+
+.compact-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+  margin-top: 14px;
+}
+
+.compact-grid.two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.input-block {
+  display: grid;
+  min-width: 0;
+  gap: 7px;
+}
+
+.input-block :deep(.el-input-number),
+.input-block :deep(.el-input),
+.input-block :deep(.el-date-editor) {
+  width: 100%;
+}
+
+.input-block :deep(.el-input__wrapper),
+.input-block :deep(.el-textarea__inner) {
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px #dfe5ee inset;
+}
+
+.level-panel {
+  display: grid;
+  gap: 10px;
+  margin-top: 16px;
+}
+
+.level-row {
+  display: grid;
+  grid-template-columns: 74px minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+  padding: 12px;
+  border-radius: 8px;
+  background: #f7f9fc;
+}
+
+.level-row strong {
+  font-size: 13px;
+}
+
+.level-options {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.level-btn {
+  height: 32px;
+  min-width: 0;
+  border-radius: 16px;
+}
+
+.field-hint {
+  grid-column: 2;
+  margin: 0;
+  color: #7f8895;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.quantity-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.quantity-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 112px 112px;
+  gap: 10px;
+  align-items: center;
+  min-height: 76px;
+  padding: 12px;
+  border-radius: 8px;
+  background: #f7f9fc;
+}
+
+.quantity-meta {
+  display: grid;
+  min-width: 0;
+  gap: 5px;
+}
+
+.quantity-meta strong {
+  overflow: hidden;
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.quantity-meta small,
+.upload-copy small,
+.skin-title span,
+.region-title span {
+  color: #7f8895;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.quantity-item :deep(.el-input-number) {
+  width: 100%;
+  min-width: 0;
+}
+
+.mode-toggle {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+  min-width: 0;
+}
+
+.mode-toggle button {
+  height: 32px;
+  min-width: 0;
+  border-radius: 8px;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.mode-toggle button.active {
+  border-color: #ff6a00;
+  background: #fff3ea;
+  color: #e65f00;
+}
+
+.skin-groups {
+  display: grid;
+  gap: 12px;
+}
+
+.skin-group,
+.region-panel,
+.ratio-panel {
+  display: grid;
+  gap: 10px;
+  padding: 12px;
+  border-radius: 8px;
+  background: #f7f9fc;
+}
+
+.skin-title,
+.region-title {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 13px;
+}
+
+.region-grid {
+  display: grid;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.region-btn {
+  height: 32px;
+  min-width: 0;
+  border-radius: 16px;
+}
+
+.upload-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.upload-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 96px;
+  gap: 12px;
+  align-items: center;
+  min-height: 112px;
+  padding: 12px;
+  border: 1px solid #e6ebf2;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.upload-copy {
+  display: grid;
+  min-width: 0;
+  gap: 6px;
+}
+
+.upload-copy strong {
+  color: #232a35;
+  font-size: 14px;
+}
+
+.upload-copy small {
+  line-height: 1.45;
+}
+
+.upload-add,
+.upload-preview {
+  width: 96px;
+  height: 88px;
+  border-radius: 8px;
+}
+
+.upload-add {
+  display: grid;
+  place-items: center;
+  border: 1px dashed #c7ceda;
+  background: #fff;
+  color: #727d8d;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.upload-add:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.upload-preview {
+  position: relative;
+  overflow: hidden;
+  background: #e8edf4;
+}
+
+.upload-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.upload-preview button {
+  position: absolute;
+  right: 6px;
+  bottom: 6px;
+  display: grid;
+  width: 28px;
+  height: 28px;
+  place-items: center;
+  border: none;
+  border-radius: 8px;
+  background: rgba(17, 24, 39, 0.72);
+  color: #fff;
+  cursor: pointer;
+}
+
+.hidden-file {
+  display: none;
+}
+
+.ratio-panel {
+  margin-top: 14px;
+}
+
+.ratio-reference {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.ratio-reference span {
+  color: #303743;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.ratio-reference strong,
+.price-cell strong,
+.summary-main strong {
+  color: #ff6a00;
+  font-weight: 900;
+}
+
+.ratio-reference strong {
+  font-size: 22px;
+}
+
+.ratio-panel p {
+  margin: 0;
+  color: #7f8895;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.ratio-mode-grid,
+.price-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.ratio-mode-btn {
+  display: grid;
+  gap: 6px;
+  min-height: 72px;
+  padding: 12px;
+  border-radius: 8px;
+  text-align: left;
+}
+
+.ratio-mode-btn span {
+  color: #7f8895;
+  font-size: 12px;
+}
+
+.ratio-mode-btn.active {
+  border-color: #ff6a00;
+  background: #fff7f0;
+  color: #ff6a00;
+}
+
+.ratio-mode-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.price-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin-top: 14px;
+}
+
+.price-cell {
+  display: grid;
+  gap: 6px;
+  min-height: 82px;
+  padding: 14px;
+  border-radius: 8px;
+  background: #f7f9fc;
+}
+
+.price-cell span {
+  color: #6f7a89;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.price-cell strong {
+  overflow-wrap: anywhere;
+  font-size: 21px;
+}
+
+.price-cell.accent {
+  background: #fff7f0;
+}
+
+.remark {
+  margin-top: 14px;
+}
+
+.summary-column {
+  min-width: 0;
+}
+
+.summary-panel {
+  position: sticky;
+  top: 152px;
+  padding: 16px;
+}
+
+.summary-main {
+  display: grid;
+  gap: 8px;
+  padding: 16px;
+  border-radius: 8px;
+  background: #fff7f0;
+}
+
+.summary-main span,
+.summary-list span {
+  color: #6f7a89;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.summary-main strong {
+  font-size: 34px;
+  line-height: 1;
+}
+
+.summary-list {
+  display: grid;
+  gap: 10px;
+  margin: 14px 0;
+}
+
+.summary-list div {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eef2f6;
+}
+
+.summary-list strong {
+  color: #20242a;
+  font-size: 13px;
+  text-align: right;
+}
+
+.summary-actions {
+  display: grid;
+  gap: 10px;
+}
+
+.summary-actions :deep(.el-button) {
+  width: 100%;
+  margin-left: 0;
+}
+
+@media (max-width: 1180px) {
+  .publish-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .summary-column {
+    display: none;
+  }
+}
+
+@media (max-width: 860px) {
+  .field-row,
+  .compact-grid,
+  .compact-grid.two,
+  .quantity-grid,
+  .upload-grid,
+  .price-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .field-hint {
+    grid-column: auto;
+  }
+
+  .quantity-item,
+  .upload-item {
+    grid-template-columns: 1fr;
+  }
+
+  .upload-add,
+  .upload-preview {
+    width: 100%;
+  }
+
+  .region-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+</style>