From 52ac6b7827791ff071c5cae1931d8a2116d6c580 Mon Sep 17 00:00:00 2001
From: yml <yml@yml.com>
Date: Fri, 22 May 2026 23:13:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E4=BC=98=E5=8C=96=20?=
 =?UTF-8?q?=E5=8F=91=E5=B8=83=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/internal/modules/listing/dto.go       |   78 +-
 .../internal/modules/listing/repository.go    |   37 +-
 frontend/components.d.ts                      |    7 -
 frontend/src/api/listings.ts                  |    2 +
 .../mobile/MobileSellerListingCreateView.vue  | 1272 +++++++++++++----
 5 files changed, 1106 insertions(+), 290 deletions(-)

diff --git a/backend/internal/modules/listing/dto.go b/backend/internal/modules/listing/dto.go
index 8ba2104..628bed1 100644
--- a/backend/internal/modules/listing/dto.go
+++ b/backend/internal/modules/listing/dto.go
@@ -3,47 +3,49 @@ package listing
 import "time"
 
 type ListingDTO struct {
-	ID             uint64     `json:"id"`
-	AccountID      uint64     `json:"account_id"`
-	OwnerID        uint64     `json:"owner_id"`
-	OwnerPhone     string     `json:"owner_phone,omitempty"`
-	OwnerNickname  string     `json:"owner_nickname,omitempty"`
-	Title          string     `json:"title"`
-	Description    string     `json:"description"`
-	GameName       string     `json:"game_name"`
-	ServerRegion   string     `json:"server_region"`
-	LoginPlatform  string     `json:"login_platform"`
-	RankLevel      string     `json:"rank_level"`
-	HafCoinAmount  int64      `json:"haf_coin_amount"`
-	ScreenshotURLS []string   `json:"screenshot_urls"`
-	PriceHourly    float64    `json:"price_hourly"`
-	PriceDaily     float64    `json:"price_daily"`
-	PriceWeekly    float64    `json:"price_weekly"`
-	DepositAmount  float64    `json:"deposit_amount"`
-	MinRentHours   int        `json:"min_rent_hours"`
-	MaxRentHours   int        `json:"max_rent_hours"`
-	Status         string     `json:"status"`
-	ReviewStatus   string     `json:"review_status"`
-	ReviewReason   string     `json:"review_reason"`
-	PublishedAt    *time.Time `json:"published_at"`
-	CreatedAt      time.Time  `json:"created_at"`
-	UpdatedAt      time.Time  `json:"updated_at"`
+	ID             uint64         `json:"id"`
+	AccountID      uint64         `json:"account_id"`
+	OwnerID        uint64         `json:"owner_id"`
+	OwnerPhone     string         `json:"owner_phone,omitempty"`
+	OwnerNickname  string         `json:"owner_nickname,omitempty"`
+	Title          string         `json:"title"`
+	Description    string         `json:"description"`
+	GameName       string         `json:"game_name"`
+	ServerRegion   string         `json:"server_region"`
+	LoginPlatform  string         `json:"login_platform"`
+	RankLevel      string         `json:"rank_level"`
+	HafCoinAmount  int64          `json:"haf_coin_amount"`
+	AssetSummary   map[string]any `json:"asset_summary,omitempty"`
+	ScreenshotURLS []string       `json:"screenshot_urls"`
+	PriceHourly    float64        `json:"price_hourly"`
+	PriceDaily     float64        `json:"price_daily"`
+	PriceWeekly    float64        `json:"price_weekly"`
+	DepositAmount  float64        `json:"deposit_amount"`
+	MinRentHours   int            `json:"min_rent_hours"`
+	MaxRentHours   int            `json:"max_rent_hours"`
+	Status         string         `json:"status"`
+	ReviewStatus   string         `json:"review_status"`
+	ReviewReason   string         `json:"review_reason"`
+	PublishedAt    *time.Time     `json:"published_at"`
+	CreatedAt      time.Time      `json:"created_at"`
+	UpdatedAt      time.Time      `json:"updated_at"`
 }
 
 type CreateRequest struct {
-	Title          string   `json:"title" binding:"required"`
-	Description    string   `json:"description"`
-	ServerRegion   string   `json:"server_region" binding:"required"`
-	LoginPlatform  string   `json:"login_platform" binding:"required"`
-	RankLevel      string   `json:"rank_level"`
-	HafCoinAmount  int64    `json:"haf_coin_amount"`
-	ScreenshotURLS []string `json:"screenshot_urls"`
-	PriceHourly    float64  `json:"price_hourly" binding:"required"`
-	PriceDaily     float64  `json:"price_daily"`
-	PriceWeekly    float64  `json:"price_weekly"`
-	DepositAmount  float64  `json:"deposit_amount" binding:"required"`
-	MinRentHours   int      `json:"min_rent_hours" binding:"required"`
-	MaxRentHours   int      `json:"max_rent_hours" binding:"required"`
+	Title          string         `json:"title" binding:"required"`
+	Description    string         `json:"description"`
+	ServerRegion   string         `json:"server_region" binding:"required"`
+	LoginPlatform  string         `json:"login_platform" binding:"required"`
+	RankLevel      string         `json:"rank_level"`
+	HafCoinAmount  int64          `json:"haf_coin_amount"`
+	AssetSummary   map[string]any `json:"asset_summary"`
+	ScreenshotURLS []string       `json:"screenshot_urls"`
+	PriceHourly    float64        `json:"price_hourly" binding:"required"`
+	PriceDaily     float64        `json:"price_daily"`
+	PriceWeekly    float64        `json:"price_weekly"`
+	DepositAmount  float64        `json:"deposit_amount" binding:"required"`
+	MinRentHours   int            `json:"min_rent_hours" binding:"required"`
+	MaxRentHours   int            `json:"max_rent_hours" binding:"required"`
 }
 
 type UpdateRequest = CreateRequest
diff --git a/backend/internal/modules/listing/repository.go b/backend/internal/modules/listing/repository.go
index f0c5c63..547dc22 100644
--- a/backend/internal/modules/listing/repository.go
+++ b/backend/internal/modules/listing/repository.go
@@ -29,6 +29,10 @@ func (r *Repository) Create(ownerID uint64, req CreateRequest) (*ListingDTO, err
 		if err != nil {
 			return err
 		}
+		assetSummary, err := marshalAssetSummary(req.AssetSummary)
+		if err != nil {
+			return err
+		}
 		account := model.GameAccount{
 			OwnerID:        ownerID,
 			GameName:       "delta_force",
@@ -38,6 +42,7 @@ func (r *Repository) Create(ownerID uint64, req CreateRequest) (*ListingDTO, err
 			Description:    req.Description,
 			RankLevel:      req.RankLevel,
 			HafCoinAmount:  req.HafCoinAmount,
+			AssetSummary:   assetSummary,
 			ScreenshotURLS: screenshots,
 			Status:         "draft",
 		}
@@ -82,6 +87,11 @@ func (r *Repository) Update(ownerID uint64, listingID uint64, req UpdateRequest)
 		account.LoginPlatform = req.LoginPlatform
 		account.RankLevel = req.RankLevel
 		account.HafCoinAmount = req.HafCoinAmount
+		assetSummary, err := marshalAssetSummary(req.AssetSummary)
+		if err != nil {
+			return err
+		}
+		account.AssetSummary = assetSummary
 		screenshots, err := marshalScreenshots(req.ScreenshotURLS)
 		if err != nil {
 			return err
@@ -397,7 +407,7 @@ func (r *Repository) findDTO(where string, args ...any) (*ListingDTO, error) {
 func (r *Repository) baseQuery() *gorm.DB {
 	return r.db.Table("rental_listings AS l").
 		Select(`l.*, a.title, a.description, a.game_name, a.server_region, a.login_platform, a.rank_level,
-			a.haf_coin_amount, a.screenshot_urls, COALESCE(u.phone, '') AS owner_phone, COALESCE(u.nickname, '') AS owner_nickname`).
+			a.haf_coin_amount, a.asset_summary, a.screenshot_urls, COALESCE(u.phone, '') AS owner_phone, COALESCE(u.nickname, '') AS owner_nickname`).
 		Joins("JOIN game_accounts AS a ON a.id = l.account_id").
 		Joins("LEFT JOIN users AS u ON u.id = l.owner_id")
 }
@@ -425,6 +435,7 @@ type listingRow struct {
 	LoginPlatform  string
 	RankLevel      string
 	HafCoinAmount  int64
+	AssetSummary   datatypes.JSON
 	ScreenshotURLS datatypes.JSON
 }
 
@@ -450,6 +461,7 @@ func (row listingRow) toDTO() ListingDTO {
 		LoginPlatform:  row.LoginPlatform,
 		RankLevel:      row.RankLevel,
 		HafCoinAmount:  row.HafCoinAmount,
+		AssetSummary:   decodeAssetSummary(row.AssetSummary),
 		ScreenshotURLS: decodeScreenshots(row.ScreenshotURLS),
 		PriceHourly:    row.PriceHourly,
 		PriceDaily:     row.PriceDaily,
@@ -478,6 +490,7 @@ func toDTO(account model.GameAccount, listing model.RentalListing) *ListingDTO {
 		LoginPlatform:  account.LoginPlatform,
 		RankLevel:      account.RankLevel,
 		HafCoinAmount:  account.HafCoinAmount,
+		AssetSummary:   decodeAssetSummary(account.AssetSummary),
 		ScreenshotURLS: decodeScreenshots(account.ScreenshotURLS),
 		PriceHourly:    listing.PriceHourly,
 		PriceDaily:     listing.PriceDaily,
@@ -518,6 +531,17 @@ func marshalScreenshots(urls []string) (datatypes.JSON, error) {
 	return datatypes.JSON(raw), nil
 }
 
+func marshalAssetSummary(summary map[string]any) (datatypes.JSON, error) {
+	if summary == nil {
+		return nil, nil
+	}
+	raw, err := json.Marshal(summary)
+	if err != nil {
+		return nil, err
+	}
+	return datatypes.JSON(raw), nil
+}
+
 func decodeScreenshots(raw datatypes.JSON) []string {
 	if len(raw) == 0 {
 		return []string{}
@@ -529,6 +553,17 @@ func decodeScreenshots(raw datatypes.JSON) []string {
 	return urls
 }
 
+func decodeAssetSummary(raw datatypes.JSON) map[string]any {
+	if len(raw) == 0 {
+		return nil
+	}
+	var summary map[string]any
+	if err := json.Unmarshal(raw, &summary); err != nil {
+		return nil
+	}
+	return summary
+}
+
 func appendAuditLog(tx *gorm.DB, actorID uint64, action string, bizType string, bizID uint64, meta AuditMeta, detail map[string]any) error {
 	raw, err := json.Marshal(detail)
 	if err != nil {
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 70802f1..3785345 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -17,21 +17,14 @@ declare module 'vue' {
     VanCell: typeof import('vant/es')['Cell']
     VanCellGroup: typeof import('vant/es')['CellGroup']
     VanCheckbox: typeof import('vant/es')['Checkbox']
-    VanDropdownItem: typeof import('vant/es')['DropdownItem']
-    VanDropdownMenu: typeof import('vant/es')['DropdownMenu']
     VanEmpty: typeof import('vant/es')['Empty']
     VanField: typeof import('vant/es')['Field']
-    VanGrid: typeof import('vant/es')['Grid']
-    VanGridItem: typeof import('vant/es')['GridItem']
     VanIcon: typeof import('vant/es')['Icon']
-    VanImage: typeof import('vant/es')['Image']
     VanLoading: typeof import('vant/es')['Loading']
     VanNoticeBar: typeof import('vant/es')['NoticeBar']
     VanPopup: typeof import('vant/es')['Popup']
     VanPullRefresh: typeof import('vant/es')['PullRefresh']
     VanSearch: typeof import('vant/es')['Search']
-    VanTabbar: typeof import('vant/es')['Tabbar']
-    VanTabbarItem: typeof import('vant/es')['TabbarItem']
     VanTag: typeof import('vant/es')['Tag']
   }
 }
diff --git a/frontend/src/api/listings.ts b/frontend/src/api/listings.ts
index cc1046c..aca58b5 100644
--- a/frontend/src/api/listings.ts
+++ b/frontend/src/api/listings.ts
@@ -13,6 +13,7 @@ export interface Listing {
   login_platform: string
   rank_level: string
   haf_coin_amount: number
+  asset_summary?: Record<string, unknown>
   screenshot_urls: string[]
   price_hourly: number
   price_daily: number
@@ -35,6 +36,7 @@ export interface ListingPayload {
   login_platform: string
   rank_level: string
   haf_coin_amount: number
+  asset_summary?: Record<string, unknown>
   screenshot_urls: string[]
   price_hourly: number
   price_daily: number
diff --git a/frontend/src/views/mobile/MobileSellerListingCreateView.vue b/frontend/src/views/mobile/MobileSellerListingCreateView.vue
index 79ae1c7..67468cd 100644
--- a/frontend/src/views/mobile/MobileSellerListingCreateView.vue
+++ b/frontend/src/views/mobile/MobileSellerListingCreateView.vue
@@ -1,46 +1,273 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
+import { computed, reactive, ref } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { showToast } from "vant";
 
 import { uploadFile } from "@/api/files";
 import { createListing } from "@/api/listings";
 
+type ChargeMode = "赠送" | "收费";
+
+type QuantityKey =
+  | "awmAmmo"
+  | "helmet6"
+  | "armor6"
+  | "kit5"
+  | "armor6Ammo"
+  | "gridCard9";
+
+type ScreenshotKey =
+  | "coin"
+  | "gameId"
+  | "totalAsset"
+  | "tencentSecurity"
+  | "skin";
+
+type SkinCategoryKey = "melee" | "operator" | "weapon";
+
 const router = useRouter();
 const route = useRoute();
 const loading = ref(false);
 const uploading = ref(false);
-const screenshotUrls = ref<string[]>([]);
 
-/** 判断当前底部导航是否激活 */
 function isNavActive(path: string) {
   if (path === "/m") return route.path === "/m";
   return route.path.startsWith(path);
 }
 
 const form = reactive({
-  title: "",
-  description: "",
-  server_region: "微信区",
-  login_platform: "QQ",
-  rank_level: "",
+  server_region: "",
+  face_owner: "",
   haf_coin_amount: 0,
-  price_hourly: 5,
-  price_daily: 50,
-  price_weekly: 300,
-  deposit_amount: 100,
-  min_rent_hours: 1,
-  max_rent_hours: 24,
+  rank_level: "",
+  secret_kd: "",
+  fire_level: "" as number | "",
+  season_insurance: "",
+  stamina_level: "",
+  load_level: "",
+  login_method: "账号密码",
+  online_start: "",
+  online_end: "",
+  ban_record: "",
+  common_regions: [] as string[],
+  deposit_amount: "" as number | "",
+  ratio: "" as number | "",
+  final_price: 0,
+  settlement_amount: 0,
+  rent_days: 0,
+  daily_loss: "",
+  remark: "",
 });
 
-/* 区服选项 */
-const serverOptions = ["微信区", "QQ区", "全平台"];
-const platformOptions = ["QQ", "微信", "Steam"];
+const quantityValues = reactive<Record<QuantityKey, number>>({
+  awmAmmo: 0,
+  helmet6: 0,
+  armor6: 0,
+  kit5: 0,
+  armor6Ammo: 0,
+  gridCard9: 0,
+});
 
-/* 截图相关 */
+const quantityModes = reactive<Record<QuantityKey, ChargeMode>>({
+  awmAmmo: "收费",
+  helmet6: "收费",
+  armor6: "收费",
+  kit5: "收费",
+  armor6Ammo: "收费",
+  gridCard9: "收费",
+});
+
+const screenshotFiles = reactive<Record<ScreenshotKey, string>>({
+  coin: "",
+  gameId: "",
+  totalAsset: "",
+  tencentSecurity: "",
+  skin: "",
+});
+
+const selectedSkins = ref<string[]>([]);
 const fileInput = ref<HTMLInputElement | null>(null);
+const activeUploadKey = ref<ScreenshotKey>("coin");
 
-function triggerUpload() {
+const serverOptions = ["QQ", "微信", "Steam"];
+const faceOptions = ["是", "否"];
+const rankOptions = [
+  "青铜",
+  "白银",
+  "黄金",
+  "铂金",
+  "钻石",
+  "黑鹰",
+  "三角洲巅峰",
+];
+const insuranceOptions = ["2*1", "2*2", "2*3", "3*3"];
+const levelOptions = ["1级", "2级", "3级", "4级", "5级", "6级", "7级"];
+const loginMethodOptions = ["扫码", "账号密码"];
+const regionOptions = [
+  "北京",
+  "天津",
+  "河北",
+  "山西",
+  "内蒙古",
+  "辽宁",
+  "吉林",
+  "黑龙江",
+  "上海",
+  "江苏",
+  "浙江",
+  "安徽",
+  "福建",
+  "江西",
+  "山东",
+  "河南",
+  "湖北",
+  "湖南",
+  "广东",
+  "广西",
+  "海南",
+  "重庆",
+  "四川",
+  "贵州",
+  "云南",
+  "陕西",
+  "甘肃",
+  "青海",
+  "宁夏",
+  "新疆",
+  "西藏",
+  "香港",
+  "澳门",
+  "台湾",
+];
+const skinGroups: Array<{
+  key: SkinCategoryKey;
+  title: string;
+  options: string[];
+}> = [
+  {
+    key: "melee",
+    title: "近战皮肤",
+    options: [
+      "坠星者",
+      "暗星",
+      "龙牙",
+      "信条",
+      "怜悯",
+      "赤枭",
+      "影锋",
+      "黑海",
+      "北极星",
+      "电锯惊魂",
+      "处刑者",
+    ],
+  },
+  {
+    key: "operator",
+    title: "干员皮肤",
+    options: [
+      "威龙-凌霄戍卫",
+      "红狼-蚀金玫瑰",
+      "露娜-黑天际线",
+      "蛊-能天使午夜邮差",
+      "骇爪-维什戴尔",
+      "骇爪-水墨云图",
+      "威龙-吴彦祖",
+      "威龙-铁面判官",
+      "威龙-壮志凌云",
+      "威龙-蛟龙特战队",
+      "蜂医-送葬人",
+      "蜂医-危险物质",
+      "蜂医-黑鹰坠落",
+      "牧羊人-街头之星",
+      "牧羊人-黑鹰坠落",
+      "乌鲁鲁-黑鹰坠落",
+      "红狼-黑鹰坠落",
+      "无名-夜鹰",
+      "深蓝-不破誓约",
+      "红狼-电锯惊魂",
+      "露娜-古墓丽影劳拉",
+      "赛伊德",
+    ],
+  },
+  {
+    key: "weapon",
+    title: "武器皮肤",
+    options: [
+      "M7棱镜攻势S2",
+      "腾龙气象感应",
+      "MP7电玩高手S2",
+      "M250电玩高手S2",
+      "AS Val悬赏令",
+      "K416命运",
+      "M4A1棱镜攻势",
+      "SCAR-H电玩高手",
+      "QBZ95王牌之剑",
+      "AUG气象感应",
+      "Vector美杜莎",
+      "KC17-造物纪元",
+    ],
+  },
+];
+
+const quantityItems: Array<{
+  key: QuantityKey;
+  label: string;
+  price: string;
+  placeholder?: string;
+}> = [
+  { key: "awmAmmo", label: "AWM子弹", price: "0.8元/发" },
+  { key: "helmet6", label: "6头数量", price: "2元/个" },
+  { key: "armor6", label: "6甲数量", price: "3元/个" },
+  { key: "kit5", label: "5级全装套数量", price: "5元/个" },
+  { key: "armor6Ammo", label: "6甲子弹", price: "0.26元/发" },
+  {
+    key: "gridCard9",
+    label: "9格体验卡",
+    price: "5元/张",
+    placeholder: "如果是赛季9格，此处填0即可",
+  },
+];
+
+const screenshotSlots: Array<{
+  key: ScreenshotKey;
+  label: string;
+  required: boolean;
+  hint: string;
+}> = [
+  { key: "coin", label: "纯币截图", required: true, hint: "请上传纯币截图（必传）" },
+  { key: "gameId", label: "游戏ID截图", required: true, hint: "请上传游戏ID截图（必传）" },
+  { key: "totalAsset", label: "总资产截图", required: true, hint: "请上传总资产截图（必传）" },
+  {
+    key: "tencentSecurity",
+    label: "腾讯安全中心截图",
+    required: true,
+    hint: "请上传腾讯安全中心截图（必传）",
+  },
+  { key: "skin", label: "皮肤截图", required: false, hint: "请上传皮肤截图（选传）" },
+];
+
+const screenshotUrls = computed(() =>
+  screenshotSlots.map((item) => screenshotFiles[item.key]).filter(Boolean)
+);
+
+function selectRadio<T extends string>(value: T, setter: (value: T) => void) {
+  setter(value);
+}
+
+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();
 }
 
@@ -51,7 +278,7 @@ async function handleScreenshotUpload(event: Event) {
   uploading.value = true;
   try {
     const uploaded = await uploadFile(file, "listing");
-    screenshotUrls.value = [...screenshotUrls.value, uploaded.url];
+    screenshotFiles[activeUploadKey.value] = uploaded.url;
     showToast({ message: "截图已上传", icon: "passed" });
   } catch (error) {
     showToast({ message: readError(error, "截图上传失败"), icon: "cross" });
@@ -61,19 +288,71 @@ async function handleScreenshotUpload(event: Event) {
   }
 }
 
-function removeScreenshot(index: number) {
-  screenshotUrls.value = screenshotUrls.value.filter((_, i) => i !== index);
+function removeScreenshot(key: ScreenshotKey) {
+  screenshotFiles[key] = "";
+}
+
+function handleFireLevelInput(value: string | number) {
+  if (value === "") {
+    form.fire_level = "";
+    return;
+  }
+  const level = Number(value);
+  if (!Number.isFinite(level)) {
+    form.fire_level = "";
+    return;
+  }
+  form.fire_level = Math.max(38, Math.trunc(level));
+}
+
+function calculatePrice() {
+  const coinWan = Number(form.haf_coin_amount || 0);
+  const ratio = Number(form.ratio || 0);
+  if (coinWan <= 0) {
+    showToast({ message: "请先填写哈夫币/万", icon: "warning-o" });
+    return;
+  }
+  if (ratio <= 0) {
+    showToast({ message: "比例需大于0", icon: "warning-o" });
+    return;
+  }
+  const finalPrice = roundMoney(coinWan / ratio);
+  const rentDays = coinWan >= 30000 ? 7 : coinWan >= 10000 ? 3 : 1;
+  form.final_price = finalPrice;
+  form.settlement_amount = finalPrice;
+  form.rent_days = rentDays;
+  form.daily_loss = coinWan >= 30000 ? "30M" : coinWan >= 10000 ? "20M" : "10M";
 }
 
-/* 提交 */
 async function handleSubmit() {
-  if (!form.title.trim()) {
-    showToast({ message: "请输入标题", icon: "warning-o" });
+  const error = validateForm();
+  if (error) {
+    showToast({ message: error, icon: "warning-o" });
     return;
   }
   loading.value = true;
   try {
-    await createListing({ ...form, screenshot_urls: screenshotUrls.value });
+    const title = `${form.server_region} ${form.rank_level} ${form.haf_coin_amount}万哈夫币`;
+    const rentDays = Math.max(Number(form.rent_days || 1), 1);
+    const dailyPrice = roundMoney(Number(form.final_price) / rentDays);
+    const hourlyPrice = Math.max(roundMoney(dailyPrice / 24), 0.01);
+
+    await createListing({
+      title,
+      description: form.remark,
+      server_region: form.server_region,
+      login_platform: form.login_method || "扫码",
+      rank_level: form.rank_level,
+      haf_coin_amount: Number(form.haf_coin_amount) * 10000,
+      asset_summary: buildAssetSummary(),
+      screenshot_urls: screenshotUrls.value,
+      price_hourly: hourlyPrice,
+      price_daily: dailyPrice,
+      price_weekly: roundMoney(dailyPrice * 7),
+      deposit_amount: Number(form.deposit_amount),
+      min_rent_hours: 24,
+      max_rent_hours: rentDays * 24,
+    });
     showToast({ message: "发布成功", icon: "passed" });
     await router.push("/m/profile");
   } catch (error) {
@@ -86,6 +365,73 @@ async function handleSubmit() {
   }
 }
 
+function validateForm() {
+  if (!form.server_region) return "请选择区服";
+  if (Number(form.haf_coin_amount) <= 0) return "请填写哈夫币/万";
+  if (!form.rank_level) return "请选择段位";
+  if (!form.fire_level) return "请填写烽火等级";
+  if (Number(form.fire_level) < 38) return "烽火等级低于38级的号无法发布";
+  if (!form.season_insurance) return "请选择赛季保险";
+  if (!form.stamina_level) return "请选择体力等级";
+  if (!form.load_level) return "请选择负重等级";
+  if (form.deposit_amount === "" || Number(form.deposit_amount) < 0) {
+    return "请填写押金";
+  }
+  if (!form.final_price || !form.settlement_amount || !form.rent_days) {
+    return "请先点击计算价格";
+  }
+  for (const item of screenshotSlots) {
+    if (item.required && !screenshotFiles[item.key]) {
+      return `请上传${item.label}`;
+    }
+  }
+  return "";
+}
+
+function buildAssetSummary() {
+  return {
+    face_owner: form.face_owner,
+    haf_coin_wan: Number(form.haf_coin_amount),
+    secret_kd: form.secret_kd,
+    fire_level: Number(form.fire_level),
+    season_insurance: form.season_insurance,
+    stamina_level: form.stamina_level,
+    load_level: form.load_level,
+    resources: quantityItems.map((item) => ({
+      key: item.key,
+      label: item.label,
+      quantity: Number(quantityValues[item.key] || 0),
+      mode: quantityModes[item.key],
+    })),
+    skins: selectedSkins.value,
+    skin_groups: skinGroups.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,
+    },
+    login_method: form.login_method,
+    ban_record: form.ban_record,
+    common_regions: form.common_regions,
+    screenshots: { ...screenshotFiles },
+    deposit_amount: Number(form.deposit_amount),
+    ratio: Number(form.ratio),
+    price: Number(form.final_price),
+    settlement_amount: Number(form.settlement_amount),
+    rent_days: Number(form.rent_days),
+    daily_loss: form.daily_loss,
+    remark: form.remark,
+  };
+}
+
+function roundMoney(value: number) {
+  return Math.round(value * 100) / 100;
+}
+
 function readError(error: unknown, fallback: string) {
   if (typeof error === "object" && error && "response" in error) {
     const response = (error as { response?: { data?: { message?: string } } })
@@ -98,51 +444,28 @@ function readError(error: unknown, fallback: string) {
 
 <template>
   <main class="mobile-publish">
-    <!-- 顶部导航 -->
     <header class="page-header">
-      <button class="back-btn" @click="router.back()">
+      <button class="back-btn" type="button" @click="router.back()">
         <van-icon name="arrow-left" :size="20" />
       </button>
       <h1>发布账号</h1>
       <span class="header-spacer"></span>
     </header>
 
-    <!-- 表单主体 -->
     <section class="form-body">
-      <!-- 基本信息 -->
       <div class="form-section">
-        <h2 class="section-title">基本信息</h2>
-        <van-field
-          v-model="form.title"
-          label="标题"
-          placeholder="例如：高段位哈夫币充足账号"
-          required
-          class="publish-field"
-        />
-        <van-field
-          v-model="form.description"
-          label="说明"
-          type="textarea"
-          placeholder="描述账号资产和特点"
-          rows="3"
-          autosize
-          class="publish-field"
-        />
-      </div>
+        <h2 class="section-title">基础资料</h2>
 
-      <!-- 游戏信息 -->
-      <div class="form-section">
-        <h2 class="section-title">游戏信息</h2>
-
-        <van-field label="区服" class="publish-field">
+        <van-field label="区服" required class="publish-field">
           <template #input>
             <div class="radio-group">
               <button
                 v-for="opt in serverOptions"
                 :key="opt"
+                type="button"
                 class="radio-btn"
                 :class="{ active: form.server_region === opt }"
-                @click="form.server_region = opt"
+                @click="selectRadio(opt, (value) => (form.server_region = value))"
               >
                 {{ opt }}
               </button>
@@ -150,15 +473,16 @@ function readError(error: unknown, fallback: string) {
           </template>
         </van-field>
 
-        <van-field label="平台" class="publish-field">
+        <van-field label="是否本人人脸" class="publish-field">
           <template #input>
             <div class="radio-group">
               <button
-                v-for="opt in platformOptions"
+                v-for="opt in faceOptions"
                 :key="opt"
+                type="button"
                 class="radio-btn"
-                :class="{ active: form.login_platform === opt }"
-                @click="form.login_platform = opt"
+                :class="{ active: form.face_owner === opt }"
+                @click="selectRadio(opt, (value) => (form.face_owner = value))"
               >
                 {{ opt }}
               </button>
@@ -167,103 +491,256 @@ function readError(error: unknown, fallback: string) {
         </van-field>
 
         <van-field
-          v-model="form.rank_level"
-          label="段位"
-          placeholder="如：钻石、战神"
+          v-model="form.haf_coin_amount"
+          label="哈夫币/万"
+          type="digit"
+          required
+          placeholder="只填写仓库右上角纯币数额，总资产不计算在内（建议清理仓库中所有非保留物品），100M写作10000"
+          class="publish-field"
+        />
+
+        <van-field label="段位" required class="publish-field">
+          <template #input>
+            <div class="radio-group">
+              <button
+                v-for="opt in rankOptions"
+                :key="opt"
+                type="button"
+                class="radio-btn"
+                :class="{ active: form.rank_level === opt }"
+                @click="selectRadio(opt, (value) => (form.rank_level = value))"
+              >
+                {{ opt }}
+              </button>
+            </div>
+          </template>
+        </van-field>
+
+        <van-field
+          v-model="form.secret_kd"
+          label="绝密KD"
+          type="number"
+          placeholder="填写绝密KD，如果数据对不上买家可以申请退款"
           class="publish-field"
         />
         <van-field
-          v-model="form.haf_coin_amount"
-          label="哈夫币"
+          :model-value="form.fire_level"
+          label="烽火等级"
           type="digit"
-          placeholder="0"
+          required
+          placeholder="等级低于38级的号无法发布"
           class="publish-field"
+          @update:model-value="handleFireLevelInput"
         />
-      </div>
+        <van-field label="赛季保险" required class="publish-field">
+          <template #input>
+            <div class="radio-group">
+              <button
+                v-for="opt in insuranceOptions"
+                :key="opt"
+                type="button"
+                class="radio-btn"
+                :class="{ active: form.season_insurance === opt }"
+                @click="selectRadio(opt, (value) => (form.season_insurance = value))"
+              >
+                {{ opt }}
+              </button>
+            </div>
+          </template>
+        </van-field>
 
-      <!-- 价格设置 -->
-      <div class="form-section">
-        <h2 class="section-title">价格设置</h2>
-        <div class="price-grid">
-          <van-field
-            v-model="form.price_hourly"
-            label="时租"
-            type="number"
-            suffix="元/小时"
-            class="publish-field price-field"
-          />
-          <van-field
-            v-model="form.price_daily"
-            label="日租"
-            type="number"
-            suffix="元/天"
-            class="publish-field price-field"
-          />
-          <van-field
-            v-model="form.price_weekly"
-            label="周租"
-            type="number"
-            suffix="元/周"
-            class="publish-field price-field"
-          />
-          <van-field
-            v-model="form.deposit_amount"
-            label="押金"
-            type="number"
-            suffix="元"
-            class="publish-field price-field"
-          />
+        <div class="level-panel">
+          <div class="level-row">
+            <div class="level-label"><span>*</span>体力</div>
+            <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="selectRadio(opt, (value) => (form.stamina_level = value))"
+              >
+                {{ opt }}
+              </button>
+            </div>
+          </div>
+          <div class="level-row">
+            <div class="level-label"><span>*</span>负重</div>
+            <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="selectRadio(opt, (value) => (form.load_level = value))"
+              >
+                {{ opt }}
+              </button>
+            </div>
+          </div>
         </div>
       </div>
 
-      <!-- 租期设置 -->
       <div class="form-section">
-        <h2 class="section-title">租期限制</h2>
-        <div class="period-row">
-          <van-field
-            v-model="form.min_rent_hours"
-            label="最短"
-            type="digit"
-            suffix="小时"
-            class="publish-field period-field"
-          />
-          <span class="period-sep">~</span>
-          <van-field
-            v-model="form.max_rent_hours"
-            label="最长"
-            type="digit"
-            suffix="小时"
-            class="publish-field period-field"
-          />
-        </div>
-      </div>
-
-      <!-- 账号截图 -->
-      <div class="form-section">
-        <h2 class="section-title">账号截图</h2>
-        <p class="section-hint">上传账号资产截图（最多12张）</p>
-
-        <div class="upload-area">
-          <div
-            v-for="(url, index) in screenshotUrls"
-            :key="url"
-            class="upload-item"
-          >
-            <img :src="url" class="upload-thumb" />
-            <button class="remove-btn" @click="removeScreenshot(index)">
-              ✕
+        <h2 class="section-title">资源道具</h2>
+        <div v-for="item in quantityItems" :key="item.key" class="quantity-row">
+          <div class="quantity-card">
+            <div class="quantity-meta">
+              <strong><span>*</span>{{ item.label }}</strong>
+              <small>{{ item.price }}</small>
+            </div>
+            <input
+              v-model="quantityValues[item.key]"
+              type="number"
+              inputmode="numeric"
+              min="0"
+              :placeholder="item.placeholder || '0'"
+              class="quantity-input"
+            />
+          </div>
+          <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>
 
-          <button
-            v-if="screenshotUrls.length < 12"
-            class="upload-add"
-            :disabled="uploading"
-            @click="triggerUpload"
-          >
-            <van-icon name="photograph" :size="24" color="#ccc" />
-            <span>{{ uploading ? "上传中" : "添加" }}</span>
-          </button>
+      <div class="form-section">
+        <h2 class="section-title">皮肤与交接</h2>
+        <div class="skin-groups">
+          <div v-for="group in skinGroups" :key="group.key" class="skin-group">
+            <div class="skin-group-title">
+              <span>{{ group.title }}</span>
+              <small>
+                {{
+                  group.options.filter((skin) => selectedSkins.includes(skin))
+                    .length
+                }} 项
+              </small>
+            </div>
+            <div class="multi-chip-group">
+              <button
+                v-for="skin in group.options"
+                :key="skin"
+                type="button"
+                class="radio-btn"
+                :class="{ active: selectedSkins.includes(skin) }"
+                @click="toggleSkin(skin)"
+              >
+                {{ skin }}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <van-field label="上号方式" class="publish-field">
+          <template #input>
+            <div class="radio-group">
+              <button
+                v-for="opt in loginMethodOptions"
+                :key="opt"
+                type="button"
+                class="radio-btn"
+                :class="{ active: form.login_method === opt }"
+                @click="selectRadio(opt, (value) => (form.login_method = value))"
+              >
+                {{ opt }}
+              </button>
+            </div>
+          </template>
+        </van-field>
+        <p class="field-hint">
+          优先推荐【账密登录】，出售速度约为扫码的数倍，两种方式安全性一致，账密登录更便捷，请自行衡量
+        </p>
+
+        <div class="time-row">
+          <van-field
+            v-model="form.online_start"
+            label="在线开始"
+            type="time"
+            class="publish-field time-field"
+          />
+          <van-field
+            v-model="form.online_end"
+            label="在线结束"
+            type="time"
+            class="publish-field time-field"
+          />
+        </div>
+        <p class="field-hint">
+          此在线时间指的是百分百能够联系上您的时间，若是在此期间联系不上您导致无法上号会扣除您的部分租金或上架押金，在线时长太短可能无法上架，请预留充足时间用于扫码以及冻结人脸，请谨慎填写
+        </p>
+
+        <van-field
+          v-model="form.ban_record"
+          label="封禁记录"
+          type="textarea"
+          rows="2"
+          autosize
+          placeholder="请自行填写封禁等信息"
+          class="publish-field"
+        />
+
+        <div class="region-panel">
+          <div class="region-title">
+            <span>常用登录地区</span>
+            <small>已选 {{ form.common_regions.length }}</small>
+          </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>
+        <p class="field-hint">
+          推荐勾选账号常用登录地，便于同地区玩家租用，可大幅减少账号触发异地登录保护。
+        </p>
+      </div>
+
+      <div class="form-section">
+        <h2 class="section-title">截图材料</h2>
+        <div class="upload-list">
+          <div v-for="slot in screenshotSlots" :key="slot.key" class="upload-line">
+            <div class="upload-meta">
+              <strong>{{ slot.label }}<span v-if="slot.required">*</span></strong>
+              <small>{{ slot.hint }}</small>
+            </div>
+            <div v-if="screenshotFiles[slot.key]" class="upload-preview">
+              <img :src="screenshotFiles[slot.key]" :alt="slot.label" />
+              <button type="button" @click="removeScreenshot(slot.key)">移除</button>
+            </div>
+            <button
+              v-else
+              type="button"
+              class="upload-add"
+              :disabled="uploading"
+              @click="triggerUpload(slot.key)"
+            >
+              <van-icon name="photograph" :size="22" color="#999" />
+              <span>{{ uploading && activeUploadKey === slot.key ? "上传中" : "上传" }}</span>
+            </button>
+          </div>
         </div>
 
         <input
@@ -275,7 +752,75 @@ function readError(error: unknown, fallback: string) {
         />
       </div>
 
-      <!-- 提交按钮 -->
+      <div class="form-section">
+        <h2 class="section-title">价格结算</h2>
+        <van-field
+          v-model="form.deposit_amount"
+          label="押金"
+          type="number"
+          required
+          placeholder="温馨提示：本押金用于保障账号安全。若买家在租用期间，使用非纯币类道具/资源（如消耗品、材料等）或导致账号被封禁，相关损失将直接从押金中扣除进行赔付。押金过高会延长出租等待时间（请自行衡量）感谢理解。"
+          suffix="元"
+          class="publish-field"
+        />
+        <van-field
+          v-model="form.ratio"
+          label="比例"
+          type="number"
+          placeholder="完成基础信息填写后请点击计算比例价格 1：请点击计算价格获取比例，最低比例0-建议6，比例越高出的速度越快，自行选择"
+          class="publish-field"
+        >
+          <template #left-icon>1:</template>
+        </van-field>
+
+        <van-button block class="calc-btn" @click="calculatePrice">
+          计算价格
+        </van-button>
+
+        <div class="result-grid">
+          <van-field
+            :model-value="form.final_price ? `¥${form.final_price}` : ''"
+            label="价格"
+            readonly
+            required
+            placeholder="请点击计算价格"
+            class="publish-field result-field"
+          />
+          <van-field
+            :model-value="form.settlement_amount ? `¥${form.settlement_amount}` : ''"
+            label="结算金额"
+            readonly
+            required
+            placeholder="请点击计算价格获取结算金额"
+            class="publish-field result-field"
+          />
+          <van-field
+            :model-value="form.rent_days ? `${form.rent_days}天` : ''"
+            label="租期"
+            readonly
+            placeholder="自动计算后显示"
+            class="publish-field result-field"
+          />
+          <van-field
+            v-model="form.daily_loss"
+            label="每日损耗"
+            readonly
+            placeholder="自动计算 10M/20M/30M"
+            class="publish-field result-field"
+          />
+        </div>
+
+        <van-field
+          v-model="form.remark"
+          label="备注"
+          type="textarea"
+          rows="3"
+          autosize
+          placeholder="如有一些不可使用的物资，请在此备注，并且在买家下单后，主动在群聊处，再次提醒买家"
+          class="publish-field"
+        />
+      </div>
+
       <van-button
         type="primary"
         block
@@ -289,7 +834,6 @@ function readError(error: unknown, fallback: string) {
       </van-button>
     </section>
 
-    <!-- 底部导航 -->
     <nav class="bottom-nav">
       <RouterLink
         to="/m"
@@ -334,11 +878,10 @@ function readError(error: unknown, fallback: string) {
 <style scoped>
 .mobile-publish {
   min-height: 100dvh;
-  background: #f5f7fa;
+  background: #f4f6f8;
   padding-bottom: 56px;
 }
 
-/* ========== 顶部导航 ========== */
 .page-header {
   position: sticky;
   top: 0;
@@ -348,7 +891,7 @@ function readError(error: unknown, fallback: string) {
   height: 48px;
   padding: 0 12px;
   background: #fff;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid #eceff3;
 }
 
 .page-header h1 {
@@ -366,7 +909,7 @@ function readError(error: unknown, fallback: string) {
   place-items: center;
   border: none;
   background: none;
-  color: #333;
+  color: #25282d;
   cursor: pointer;
 }
 
@@ -374,177 +917,407 @@ function readError(error: unknown, fallback: string) {
   width: 36px;
 }
 
-/* ========== 表单区 ========== */
 .form-body {
-  padding: 12px 16px 24px;
+  padding: 12px 14px 24px;
 }
 
 .form-section {
-  background: #fff;
-  border-radius: 12px;
   padding: 14px;
   margin-bottom: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  background: #fff;
+  border: 1px solid #edf0f4;
+  border-radius: 8px;
 }
 
 .section-title {
   margin: 0 0 10px;
   font-size: 14px;
   font-weight: 700;
-  color: #1a1a1a;
+  color: #171a1f;
 }
 
-.section-hint {
-  margin: -6px 0 8px;
+.field-hint {
+  margin: -2px 0 8px;
+  color: #858c96;
   font-size: 11px;
-  color: #999;
+  line-height: 1.5;
 }
 
 .publish-field {
-  margin-bottom: 6px;
+  margin-bottom: 8px;
   border-radius: 8px;
-  background: #f8f9fb;
+  background: #f8fafc;
   overflow: hidden;
 }
 
 .publish-field :deep(.van-field__label) {
-  color: #333;
-  font-weight: 600;
+  width: 88px;
+  color: #30343a;
   font-size: 13px;
-  width: 60px;
+  font-weight: 600;
 }
 
 .publish-field :deep(.van-field__control) {
+  color: #20242a;
   font-size: 14px;
 }
 
-/* ========== 单选按钮组 ========== */
-.radio-group {
+.radio-group,
+.multi-chip-group {
   display: flex;
-  gap: 8px;
   flex-wrap: wrap;
+  gap: 8px;
+}
+
+.radio-group.small {
+  gap: 6px;
 }
 
 .radio-btn {
-  padding: 5px 14px;
+  min-height: 28px;
+  padding: 5px 12px;
+  border: 1px solid #d7dce3;
   border-radius: 14px;
-  border: 1px solid #ddd;
   background: #fff;
-  color: #666;
+  color: #5c6470;
   font-size: 12px;
   font-weight: 600;
-  cursor: pointer;
-  transition: all 0.15s;
+  line-height: 1;
 }
 
 .radio-btn.active {
+  border-color: #1477ff;
   background: #1477ff;
   color: #fff;
+}
+
+.time-row,
+.result-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+}
+
+.level-panel {
+  display: grid;
+  gap: 8px;
+}
+
+.level-row {
+  display: grid;
+  grid-template-columns: 58px minmax(0, 1fr);
+  gap: 8px;
+  align-items: center;
+  padding: 10px;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.level-label {
+  color: #30343a;
+  font-size: 13px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.level-label span {
+  margin-right: 2px;
+  color: #ee0a24;
+}
+
+.level-options {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.level-btn {
+  min-width: 0;
+  height: 30px;
+  padding: 0;
+  border: 1px solid #d7dce3;
+  border-radius: 15px;
+  background: #fff;
+  color: #5c6470;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.level-btn.active {
+  border-color: #1477ff;
+  background: #1477ff;
+  color: #fff;
+}
+
+.quantity-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 92px;
+  gap: 8px;
+  align-items: stretch;
+  margin-bottom: 8px;
+}
+
+.quantity-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 72px;
+  gap: 10px;
+  align-items: center;
+  min-height: 72px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.quantity-meta {
+  display: grid;
+  min-width: 0;
+  gap: 5px;
+}
+
+.quantity-meta strong {
+  overflow: hidden;
+  color: #30343a;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.quantity-meta span {
+  margin-right: 2px;
+  color: #ee0a24;
+}
+
+.quantity-meta small {
+  color: #858c96;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.quantity-input {
+  width: 100%;
+  min-width: 0;
+  height: 36px;
+  padding: 0 8px;
+  border: 1px solid #e0e5ec;
+  border-radius: 8px;
+  background: #fff;
+  color: #20242a;
+  font-size: 16px;
+  font-weight: 700;
+  text-align: center;
+  outline: none;
+}
+
+.quantity-input:focus {
   border-color: #1477ff;
 }
 
-/* ========== 价格网格 ========== */
-.price-grid {
+.mode-toggle {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr;
   gap: 6px;
+  min-height: 72px;
 }
 
-.price-field :deep(.van-field__label) {
-  width: auto;
+.mode-toggle button {
+  border: 1px solid #d7dce3;
+  border-radius: 8px;
+  background: #fff;
+  color: #606873;
   font-size: 12px;
+  font-weight: 700;
 }
 
-.price-field :deep(.van-field__suffix) {
-  font-size: 11px;
-  color: #999;
+.mode-toggle button.active {
+  border-color: #ff6a00;
+  background: #fff3ea;
+  color: #e65f00;
 }
 
-/* ========== 租期行 ========== */
-.period-row {
+.skin-groups {
+  display: grid;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.skin-group {
+  padding: 10px;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.skin-group-title {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  color: #30343a;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.skin-group-title small {
+  color: #858c96;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.region-panel {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.region-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #30343a;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.region-title small {
+  color: #858c96;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.region-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 6px;
 }
 
-.period-field {
-  flex: 1;
+.region-btn {
+  min-width: 0;
+  height: 28px;
+  padding: 0 2px;
+  border: 1px solid #d7dce3;
+  border-radius: 14px;
+  background: #fff;
+  color: #5c6470;
+  font-size: 11px;
+  font-weight: 700;
 }
 
-.period-sep {
-  color: #ccc;
-  font-size: 16px;
-  padding-top: 16px;
-}
-
-/* ========== 截图上传 ========== */
-.upload-area {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.upload-item {
-  position: relative;
-  width: 72px;
-  height: 72px;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.upload-thumb {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.remove-btn {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 20px;
-  height: 20px;
-  display: grid;
-  place-items: center;
-  border: none;
-  border-radius: 0 0 0 8px;
-  background: rgba(0, 0, 0, 0.5);
+.region-btn.active {
+  border-color: #1477ff;
+  background: #1477ff;
   color: #fff;
-  font-size: 10px;
-  cursor: pointer;
+}
+
+.upload-list {
+  display: grid;
+  gap: 10px;
+}
+
+.upload-line {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 86px;
+  gap: 10px;
+  align-items: center;
+  min-height: 76px;
+  padding: 10px;
+  border: 1px solid #edf0f4;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.upload-meta {
+  display: grid;
+  gap: 4px;
+}
+
+.upload-meta strong {
+  color: #242830;
+  font-size: 13px;
+}
+
+.upload-meta span {
+  color: #f04438;
+}
+
+.upload-meta small {
+  color: #858c96;
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.upload-add,
+.upload-preview {
+  width: 76px;
+  height: 76px;
+  border-radius: 8px;
 }
 
 .upload-add {
-  width: 72px;
-  height: 72px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 2px;
-  border: 1px dashed #ccc;
-  border-radius: 8px;
-  background: #f8f9fb;
-  color: #999;
-  font-size: 10px;
-  cursor: pointer;
+  display: grid;
+  place-items: center;
+  border: 1px dashed #c7cdd6;
+  background: #fff;
+  color: #7b8490;
+  font-size: 11px;
 }
 
 .upload-add:disabled {
   opacity: 0.5;
 }
 
-/* ========== 提交按钮 ========== */
+.upload-preview {
+  position: relative;
+  overflow: hidden;
+  background: #e8ecf1;
+}
+
+.upload-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.upload-preview button {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 24px;
+  padding: 0 8px;
+  border: none;
+  border-radius: 8px 0 0;
+  background: rgba(0, 0, 0, 0.62);
+  color: #fff;
+  font-size: 11px;
+}
+
+.calc-btn {
+  height: 40px;
+  margin-bottom: 8px;
+  border: none;
+  border-radius: 8px;
+  background: #1477ff;
+  color: #fff;
+  font-weight: 700;
+}
+
+.result-field :deep(.van-field__control) {
+  color: #ff6a00;
+  font-weight: 800;
+}
+
 .submit-btn {
+  height: 44px;
   margin-top: 8px;
-  height: 44px;
+  border: none !important;
+  background: #ff6a00 !important;
   font-size: 15px;
   font-weight: 700;
-  background: #ff6a00 !important;
-  border: none !important;
 }
 
-/* ========== 底部导航 ========== */
 .bottom-nav {
   position: fixed;
   left: 0;
@@ -578,9 +1351,9 @@ function readError(error: unknown, fallback: string) {
 }
 
 .publish-pill {
+  display: grid;
   width: 36px;
   height: 26px;
-  display: grid;
   place-items: center;
   border-radius: 13px;
   background: #ff6a00;
@@ -589,11 +1362,22 @@ function readError(error: unknown, fallback: string) {
   font-weight: 900;
 }
 
-.nav-publish span {
-  color: #ff6a00;
-}
-
+.nav-publish span,
 .nav-publish.active span {
   color: #ff6a00;
 }
+
+@media (min-width: 430px) {
+  .time-row,
+  .result-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 370px) {
+  .level-options,
+  .region-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
 </style>