贯通商品编号全流程

backend/internal/modules/dispute/dto.go

@@ -12,6 +12,7 @@ type DisputeDTO struct {
 	ID                uint64         `json:"id"`
 	OrderID           uint64         `json:"order_id"`
 	OrderNo           string         `json:"order_no"`
+	ListingNo         string         `json:"listing_no"`
 	Title             string         `json:"title"`
 	InitiatorID       uint64         `json:"initiator_id"`
 	TargetUserID      uint64         `json:"target_user_id"`

backend/internal/modules/dispute/repository.go

@@ -403,15 +403,17 @@ func roundMoney(value float64) float64 {
 
 func (r *Repository) baseQuery() *gorm.DB {
 	return r.db.Table("disputes AS d").
-		Select("d.*, o.order_no, a.title").
+		Select("d.*, o.order_no, l.listing_no, a.title").
 		Joins("JOIN rental_orders AS o ON o.id = d.order_id").
+		Joins("JOIN rental_listings AS l ON l.id = o.listing_id").
 		Joins("JOIN game_accounts AS a ON a.id = o.account_id")
 }
 
 type disputeRow struct {
 	model.Dispute
-	OrderNo string
+	OrderNo   string
-	Title   string
+	ListingNo string
+	Title     string
 }
 
 func (row disputeRow) toDTO() DisputeDTO {
@@ -419,6 +421,7 @@ func (row disputeRow) toDTO() DisputeDTO {
 		ID:                row.ID,
 		OrderID:           row.OrderID,
 		OrderNo:           row.OrderNo,
+		ListingNo:         row.ListingNo,
 		Title:             row.Title,
 		InitiatorID:       row.InitiatorID,
 		TargetUserID:      row.TargetUserID,

backend/internal/modules/order/dto.go

@@ -12,6 +12,7 @@ type OrderDTO struct {
 	ID                     uint64         `json:"id"`
 	OrderNo                string         `json:"order_no"`
 	ListingID              uint64         `json:"listing_id"`
+	ListingNo              string         `json:"listing_no"`
 	AccountID              uint64         `json:"account_id"`
 	OwnerID                uint64         `json:"owner_id"`
 	RenterID               uint64         `json:"renter_id"`

backend/internal/modules/order/repository.go

@@ -163,7 +163,7 @@ func (r *Repository) Create(renterID uint64, req CreateRequest) (*OrderDTO, erro
 		if err := tx.Clauses(clause.Locking{Strength: "UPDATE"}).First(&account, listing.AccountID).Error; err != nil {
 			return err
 		}
-		snapshot, err := makeAccountSnapshot(account)
+		snapshot, err := makeAccountSnapshot(account, listing)
 		if err != nil {
 			return err
 		}
@@ -1374,13 +1374,15 @@ func (r *Repository) findCheckout(id uint64) (*model.OrderCheckout, error) {
 
 func (r *Repository) baseQuery() *gorm.DB {
 	return r.db.Table("rental_orders AS o").
-		Select("o.*, a.title, a.server_region, a.login_platform").
+		Select("o.*, l.listing_no, a.title, a.server_region, a.login_platform").
+		Joins("JOIN rental_listings AS l ON l.id = o.listing_id").
 		Joins("JOIN game_accounts AS a ON a.id = o.account_id")
 }
 
 func (r *Repository) adminQuery() *gorm.DB {
 	return r.db.Table("rental_orders AS o").
-		Select("o.*, a.title, a.server_region, a.login_platform, owner.phone AS owner_phone, renter.phone AS renter_phone").
+		Select("o.*, l.listing_no, a.title, a.server_region, a.login_platform, owner.phone AS owner_phone, renter.phone AS renter_phone").
+		Joins("JOIN rental_listings AS l ON l.id = o.listing_id").
 		Joins("JOIN game_accounts AS a ON a.id = o.account_id").
 		Joins("JOIN users AS owner ON owner.id = o.owner_id").
 		Joins("JOIN users AS renter ON renter.id = o.renter_id")
@@ -1389,6 +1391,7 @@ func (r *Repository) adminQuery() *gorm.DB {
 type orderRow struct {
 	model.RentalOrder
 	Title         string
+	ListingNo     string
 	ServerRegion  string
 	LoginPlatform string
 	OwnerPhone    string
@@ -1405,6 +1408,7 @@ func (row orderRow) toAdminDTO() OrderDTO {
 		ID:                     row.ID,
 		OrderNo:                row.OrderNo,
 		ListingID:              row.ListingID,
+		ListingNo:              row.ListingNo,
 		AccountID:              row.AccountID,
 		OwnerID:                row.OwnerID,
 		RenterID:               row.RenterID,
@@ -1607,8 +1611,10 @@ func sanitizeOrderSnapshot(snapshot *datatypes.JSON, role string) {
 	*snapshot = datatypes.JSON(raw)
 }
 
-func makeAccountSnapshot(account model.GameAccount) (datatypes.JSON, error) {
+func makeAccountSnapshot(account model.GameAccount, listing model.RentalListing) (datatypes.JSON, error) {
 	payload := map[string]any{
+		"listing_id":       listing.ID,
+		"listing_no":       listing.ListingNo,
 		"account_id":       account.ID,
 		"title":            account.Title,
 		"game_name":        account.GameName,

frontend/src/features/admin/views/AdminDisputesView.vue

@@ -6,6 +6,7 @@ import { arbitrateDispute, fetchAdminDisputes, type Dispute } from '@/features/d
 import { fetchAdminFileBlob } from '@/shared/api/files'
 import { disputeStatusLabel } from '@/utils/statusLabels'
 import { formatDateTime } from '@/utils/time'
+import { formatListingNo } from '@/utils/listingDisplay'
 import AdminTablePagination from '../components/AdminTablePagination.vue'
 
 const loading = ref(false)
@@ -114,6 +115,9 @@ function readError(error: unknown, fallback: string) {
     </div>
 
     <el-table v-loading="loading" class="table-panel" :data="disputes">
+      <el-table-column label="商品编号" width="140">
+        <template #default="{ row }">{{ formatListingNo(row.listing_no) }}</template>
+      </el-table-column>
       <el-table-column prop="order_no" label="订单号" min-width="210" />
       <el-table-column prop="title" label="账号" min-width="160" />
       <el-table-column prop="type" label="类型" width="150" />
@@ -164,7 +168,8 @@ function readError(error: unknown, fallback: string) {
     >
       <div v-if="activeDispute" class="dialog-body">
         <p>
-          <strong>{{ activeDispute.order_no }}</strong> · {{ activeDispute.title }}
+          <strong>{{ activeDispute.order_no }}</strong> · 商品编号
+          {{ formatListingNo(activeDispute.listing_no) }} · {{ activeDispute.title }}
         </p>
         <p>{{ activeDispute.description }}</p>
         <el-select v-model="result" class="full-control" placeholder="选择裁决结果">
@@ -215,7 +220,8 @@ function readError(error: unknown, fallback: string) {
     >
       <div v-if="evidenceDispute" class="dialog-body">
         <p>
-          <strong>{{ evidenceDispute.order_no }}</strong> · {{ evidenceDispute.title }}
+          <strong>{{ evidenceDispute.order_no }}</strong> · 商品编号
+          {{ formatListingNo(evidenceDispute.listing_no) }} · {{ evidenceDispute.title }}
         </p>
         <div v-for="item in evidenceItems(evidenceDispute)" :key="item" class="evidence-row">
           <span>{{ item }}</span>

frontend/src/features/admin/views/AdminListingDetailView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { CopyDocument } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { computed, onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
@@ -12,6 +13,7 @@ import {
 } from '@/features/listings'
 import { listingReviewStatusLabel, listingStatusLabel } from '@/utils/statusLabels'
 import { formatDateTime } from '@/utils/time'
+import { formatListingCode } from '@/utils/listingDisplay'
 
 const route = useRoute()
 const loading = ref(false)
@@ -41,6 +43,16 @@ async function loadListing() {
   }
 }
 
+async function copyListingCode() {
+  if (!listing.value) return
+  try {
+    await navigator.clipboard.writeText(formatListingCode(listing.value))
+    ElMessage.success('商品编号已复制')
+  } catch {
+    ElMessage.error('复制失败')
+  }
+}
+
 function openAction(type: 'offline' | 'abnormal') {
   actionType.value = type
   reason.value = ''
@@ -104,11 +116,12 @@ function readError(error: unknown, fallback: string) {
   <section class="page" v-loading="loading">
     <div v-if="listing" class="page-header-row">
       <div class="page-header">
-        <p class="eyebrow">Listing #{{ listing.id }}</p>
+        <p class="eyebrow">商品编号：{{ formatListingCode(listing) }}</p>
         <h1>商品详情</h1>
         <p>{{ listing.title }} · {{ listing.server_region }} / {{ listing.login_platform }}</p>
       </div>
       <div class="toolbar-actions">
+        <el-button :icon="CopyDocument" @click="copyListingCode">复制编号</el-button>
         <RouterLink to="/admin/listings">
           <el-button>返回列表</el-button>
         </RouterLink>
@@ -143,6 +156,7 @@ function readError(error: unknown, fallback: string) {
     <div v-if="listing" class="dashboard-panels">
       <div class="order-panel dashboard-panel">
         <h2>账号信息</h2>
+        <p>商品编号：{{ formatListingCode(listing) }}</p>
         <p>账号 ID：{{ listing.account_id }}</p>
         <p>游戏：{{ listing.game_name }}</p>
         <p>区服：{{ listing.server_region }}</p>

frontend/src/features/admin/views/AdminListingReviewView.vue

@@ -13,6 +13,7 @@ import {
 } from '@/features/listings'
 import {
   assetRegions,
+  formatListingCode,
   formatHafCoinM,
   getCoinWan,
   getListingConsumablePrice,
@@ -483,6 +484,9 @@ function riskTagType(level: RiskLevel) {
 
 function reviewSearchText(row: Listing) {
   return [
+    row.listing_no,
+    row.id,
+    row.account_id,
     row.title,
     row.owner_phone,
     row.owner_nickname,
@@ -606,7 +610,7 @@ function readError(error: unknown, fallback: string) {
             v-model="filters.keyword"
             :prefix-icon="Search"
             clearable
-            placeholder="搜索标题、客服、段位、皮肤"
+            placeholder="搜索编号、标题、客服、段位、皮肤"
           />
           <el-select v-model="filters.risk" placeholder="风险筛选">
             <el-option label="全部待审" value="all" />
@@ -626,7 +630,10 @@ function readError(error: unknown, fallback: string) {
             @click="selectListing(item)"
           >
             <div class="queue-title-row">
-              <strong>{{ item.title }}</strong>
+              <div>
+                <span class="queue-code">编号 {{ formatListingCode(item) }}</span>
+                <strong>{{ item.title }}</strong>
+              </div>
               <span>{{ formatHafCoinM(getCoinWan(item)) }}</span>
             </div>
             <div class="queue-meta">
@@ -656,7 +663,7 @@ function readError(error: unknown, fallback: string) {
         <section class="review-hero-panel">
           <div class="hero-title">
             <div>
-              <p>商品 #{{ selectedListing.id }}</p>
+              <p>商品编号 {{ formatListingCode(selectedListing) }}</p>
               <h2>{{ selectedListing.title }}</h2>
             </div>
             <div class="hero-actions">
@@ -1154,6 +1161,7 @@ function readError(error: unknown, fallback: string) {
 }
 
 .queue-title-row strong {
+  display: block;
   min-width: 0;
   color: #1b2559;
   font-size: 14px;
@@ -1167,6 +1175,15 @@ function readError(error: unknown, fallback: string) {
   font-weight: 800;
 }
 
+.queue-title-row .queue-code {
+  display: inline-flex;
+  margin-bottom: 4px;
+  padding: 2px 7px;
+  border-radius: 999px;
+  background: #eff6ff;
+  font-size: 12px;
+}
+
 .queue-meta,
 .risk-strip,
 .skin-list,

frontend/src/features/admin/views/AdminOrderDetailView.vue

@@ -16,6 +16,7 @@ import {
 } from '@/features/orders'
 import { handoffStatusLabel, orderStatusLabel } from '@/utils/statusLabels'
 import { formatDateTime } from '@/utils/time'
+import { formatListingNo } from '@/utils/listingDisplay'
 
 const route = useRoute()
 const loading = ref(false)
@@ -25,6 +26,9 @@ const handoffRecords = ref<HandoffRecord[]>([])
 const actionType = ref<'close' | 'abnormal' | ''>('')
 const reason = ref('')
 const refundStatus = ref<RefundStatus | null>(null)
+const listingCode = computed(() =>
+  order.value ? formatListingNo(order.value.listing_no, order.value.listing_id) : '-'
+)
 const refunding = ref(false)
 
 const snapshotText = computed(() => JSON.stringify(order.value?.account_snapshot || {}, null, 2))
@@ -144,7 +148,10 @@ function formatHandoffRecordType(type: string) {
       <div class="page-header">
         <p class="eyebrow">{{ order.order_no }}</p>
         <h1>订单详情</h1>
-        <p>{{ order.title }} · {{ order.server_region }} / {{ order.login_platform }}</p>
+        <p>
+          商品编号 {{ listingCode }} · {{ order.title }} · {{ order.server_region }} /
+          {{ order.login_platform }}
+        </p>
       </div>
       <div class="toolbar-actions">
         <RouterLink to="/admin/orders">
@@ -200,6 +207,7 @@ function formatHandoffRecordType(type: string) {
     <div v-if="order" class="dashboard-panels">
       <div class="order-panel dashboard-panel">
         <h2>用户信息</h2>
+        <p>商品编号：{{ listingCode }}</p>
         <p>租客：{{ order.renter_phone || order.renter_id }}</p>
         <p>号主：{{ order.owner_phone || order.owner_id }}</p>
         <p>开始：{{ formatDateTime(orderRentedAt(), '未开始') }}</p>
@@ -230,7 +238,7 @@ function formatHandoffRecordType(type: string) {
     >
       <div v-if="order" class="dialog-body">
         <p>
-          <strong>{{ order.order_no }}</strong> · {{ order.title }}
+          <strong>{{ order.order_no }}</strong> · 商品编号 {{ listingCode }} · {{ order.title }}
         </p>
         <el-input
           v-model="reason"

frontend/src/features/admin/views/AdminOrdersView.vue

@@ -4,6 +4,7 @@ import { computed, onMounted, ref } from 'vue'
 import { fetchAdminOrders, type Order } from '@/features/orders'
 import { handoffStatusLabel, orderStatusLabel, settlementStatusLabel } from '@/utils/statusLabels'
 import { formatDateTime } from '@/utils/time'
+import { formatListingNo } from '@/utils/listingDisplay'
 import AdminTablePagination from '../components/AdminTablePagination.vue'
 
 const status = ref('')
@@ -65,6 +66,11 @@ const filteredOrders = computed(() => {
     </div>
 
     <el-table v-loading="loading" class="table-panel" :data="filteredOrders">
+      <el-table-column label="商品编号" width="140">
+        <template #default="{ row }">{{
+          formatListingNo(row.listing_no, row.listing_id)
+        }}</template>
+      </el-table-column>
       <el-table-column prop="order_no" label="订单号" min-width="230" />
       <el-table-column prop="title" label="账号" min-width="170" />
       <el-table-column prop="renter_phone" label="租客" min-width="130" />

frontend/src/features/disputes/api/disputes.ts

@@ -7,6 +7,7 @@ export interface Dispute {
   id: number
   order_id: number
   order_no: string
+  listing_no: string
   title: string
   initiator_id: number
   target_user_id: number

frontend/src/features/listings/views/ListingDetailView.vue

@@ -16,6 +16,7 @@ import {
   assetRegions,
   formatEstimatedRentalDuration,
   formatHafCoinM,
+  formatListingCode,
   formatRatio,
   getCoinWan,
   getDailyLoss,
@@ -248,6 +249,16 @@ async function submitOrder() {
   }
 }
 
+async function copyListingCode() {
+  if (!listing.value) return
+  try {
+    await navigator.clipboard.writeText(formatListingCode(listing.value))
+    ElMessage.success('商品编号已复制')
+  } catch {
+    ElMessage.error('复制失败')
+  }
+}
+
 function handleAgreementScroll(type: 'virtual' | 'renter') {
   updateAgreementReadState(type)
 }
@@ -336,6 +347,9 @@ function listingPrice(item: Listing) {
               <span v-if="getLoginMethod(listing)">{{ getLoginMethod(listing) }}</span>
               <span v-if="listing.rank_level">{{ listing.rank_level }}</span>
             </div>
+            <button class="detail-code-chip" type="button" @click="copyListingCode">
+              编号 {{ formatListingCode(listing) }}
+            </button>
             <h1>{{ getListingTitle(listing) }}</h1>
             <p>{{ getListingSubtitle(listing) }}</p>
           </div>
@@ -606,6 +620,19 @@ function listingPrice(item: Listing) {
   font-weight: 900;
 }
 
+.detail-code-chip {
+  width: fit-content;
+  margin-top: 10px;
+  padding: 5px 10px;
+  border: 1px solid rgba(147, 197, 253, 0.6);
+  border-radius: 999px;
+  background: rgba(239, 246, 255, 0.92);
+  color: #2563eb;
+  font-size: 12px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
 .detail-hero-overlay h1 {
   margin: 0;
   color: #ffffff;

frontend/src/features/listings/views/ListingsView.vue

@@ -13,8 +13,6 @@ import {
   type HomeBannerSlide,
 } from '@/features/listings/api/homeConfig'
 import {
-  assetRegions,
-  formatHafCoinM,
   getCoinM,
   getCoinWan,
   getListingChips,
@@ -102,7 +100,6 @@ type RangePresets = Record<string, Array<{ label: string; min: string; max: stri
 
 const selectedFilters = ref<SelectedFilters>({})
 const rangeFilters = ref<RangeFilters>({})
-const searchValue = ref('')
 const sortOpen = ref(false)
 const filterOpen = ref(false)
 
@@ -306,7 +303,6 @@ function toggleSortPanel() {
 function clearFilters() {
   selectedFilters.value = {}
   rangeFilters.value = {}
-  searchValue.value = ''
 }
 
 /* ------------------------------------------------------------------ */
@@ -324,12 +320,7 @@ const activeFilterCount = computed(() => {
 })
 
 const filteredListings = computed(() => {
-  const keyword = searchValue.value.trim().toLowerCase()
+  const filtered = listings.value.filter(item => matchesFilters(item))
-  const filtered = listings.value.filter(item => {
-    if (!matchesFilters(item)) return false
-    if (!keyword) return true
-    return searchText(item).includes(keyword)
-  })
   return sortListings(filtered)
 })
 
@@ -371,24 +362,6 @@ function inRange(value: number, range: { min: string; max: string }) {
   return true
 }
 
-function searchText(item: Listing) {
-  return [
-    item.title,
-    item.description,
-    getServerRegion(item),
-    getLoginMethod(item),
-    item.rank_level,
-    readAssetString(item, 'season_insurance'),
-    readAssetString(item, 'stamina_level'),
-    readAssetString(item, 'load_level'),
-    formatHafCoinM(getCoinWan(item)),
-    assetRegions(item).join(' '),
-    ...publishOptions.value.skin_groups.map(group => getSkinGroup(item, group.key).join(' ')),
-  ]
-    .join(' ')
-    .toLowerCase()
-}
-
 function sortListings(items: Listing[]) {
   const sorted = [...items]
   if (sortBy.value === 'comprehensive') return sorted
@@ -438,19 +411,8 @@ function parseQuantityUnit(price: string) {
       </span>
     </div>
 
-    <!-- 搜索 + 排序 + 筛选入口 -->
+    <!-- 排序 + 筛选入口，搜索统一保留在首页顶部 -->
     <div class="toolbar">
-      <div class="search-box">
-        <svg class="search-icon" viewBox="0 0 20 20" fill="currentColor">
-          <path
-            fill-rule="evenodd"
-            d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-            clip-rule="evenodd"
-          />
-        </svg>
-        <input v-model="searchValue" placeholder="搜区服 / 段位 / 哈夫币数量" />
-      </div>
-
       <button type="button" class="toolbar-btn sort-btn" @click="toggleSortPanel">
         <span>{{ activeSortLabel }}</span>
         <svg
@@ -748,7 +710,7 @@ function parseQuantityUnit(price: string) {
 }
 
 /* ================================================================== */
-/*  工具栏：搜索 + 排序 + 筛选                                           */
+/*  工具栏：排序 + 筛选                                                  */
 /* ================================================================== */
 .toolbar {
   display: flex;
@@ -757,47 +719,6 @@ function parseQuantityUnit(price: string) {
   margin-bottom: 12px;
 }
 
-.search-box {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: 0 1 360px;
-  height: 38px;
-  padding: 0 12px;
-  border-radius: 10px;
-  background: #f4f6f8;
-  border: 1px solid transparent;
-  transition:
-    border-color 0.15s,
-    box-shadow 0.15s;
-}
-
-.search-box:focus-within {
-  border-color: #1477ff;
-  box-shadow: 0 0 0 3px rgba(20, 119, 255, 0.1);
-  background: #fff;
-}
-
-.search-icon {
-  width: 16px;
-  height: 16px;
-  color: #a0aab6;
-  flex-shrink: 0;
-}
-
-.search-box input {
-  border: none;
-  outline: none;
-  background: transparent;
-  color: #17233d;
-  font-size: 13px;
-  width: 100%;
-}
-
-.search-box input::placeholder {
-  color: #a0aab6;
-}
-
 .toolbar-btn {
   display: flex;
   align-items: center;

frontend/src/features/listings/views/MobileListingDetailView.vue

@@ -15,6 +15,7 @@ import { formatMoney } from '@/shared/utils/money'
 import {
   assetRegions,
   formatHafCoinM,
+  formatListingCode,
   formatRatio,
   getCoinWan,
   getDailyLoss,
@@ -257,6 +258,16 @@ function readError(error: unknown, fallback: string) {
   }
   return fallback
 }
+
+async function copyListingCode() {
+  if (!listing.value) return
+  try {
+    await navigator.clipboard.writeText(formatListingCode(listing.value))
+    showToast({ message: '商品编号已复制', icon: 'passed' })
+  } catch {
+    showToast({ message: '复制失败', icon: 'cross' })
+  }
+}
 </script>
 
 <template>
@@ -309,6 +320,9 @@ function readError(error: unknown, fallback: string) {
           </van-tag>
           <van-tag v-if="listing.rank_level" plain size="medium">{{ listing.rank_level }}</van-tag>
         </div>
+        <button class="mobile-code-chip" type="button" @click="copyListingCode">
+          编号 {{ formatListingCode(listing) }}
+        </button>
         <h2 class="detail-title">{{ getListingTitle(listing) }}</h2>
         <p class="detail-desc">{{ getListingSubtitle(listing) }}</p>
       </div>
@@ -601,6 +615,17 @@ function readError(error: unknown, fallback: string) {
   margin-bottom: 8px;
 }
 
+.mobile-code-chip {
+  margin-bottom: 8px;
+  padding: 4px 9px;
+  border: 1px solid #dbeafe;
+  border-radius: 999px;
+  background: #eff6ff;
+  color: #2563eb;
+  font-size: 12px;
+  font-weight: 800;
+}
+
 .detail-title {
   margin: 0 0 6px;
   font-size: 20px;

frontend/src/features/orders/api/orders.ts

@@ -6,6 +6,7 @@ export interface Order {
   id: number
   order_no: string
   listing_id: number
+  listing_no: string
   account_id: number
   owner_id: number
   renter_id: number

frontend/src/features/orders/views/MobileOrderDetailView.vue

@@ -24,6 +24,7 @@ import {
 import { useSessionStore } from '@/stores/session'
 import { handoffStatusLabel, orderStatusLabel } from '@/utils/statusLabels'
 import { formatDateTime } from '@/utils/time'
+import { formatListingNo } from '@/utils/listingDisplay'
 
 const route = useRoute()
 const router = useRouter()
@@ -43,6 +44,9 @@ const uploadingEvidence = ref(false)
 const openingChat = ref(false)
 const order = ref<Order | null>(null)
 const handoffRecords = ref<HandoffRecord[]>([])
+const listingCode = computed(() =>
+  order.value ? formatListingNo(order.value.listing_no, order.value.listing_id) : '-'
+)
 const handoffContent = ref('')
 const checkoutForm = ref({
   content: '',
@@ -600,6 +604,16 @@ function getStatusTagType(status: string) {
   if (['cancelled', 'closed'].includes(status)) return 'danger'
   return 'danger'
 }
+
+async function copyListingCode() {
+  if (!order.value) return
+  try {
+    await navigator.clipboard.writeText(listingCode.value)
+    showToast({ message: '商品编号已复制', icon: 'passed' })
+  } catch {
+    showToast({ message: '复制失败', icon: 'cross' })
+  }
+}
 </script>
 
 <template>
@@ -634,6 +648,9 @@ function getStatusTagType(status: string) {
             {{ orderStatusLabel(order.status) }}
           </van-tag>
         </div>
+        <button class="listing-code-chip" type="button" @click="copyListingCode">
+          商品编号 {{ listingCode }}
+        </button>
         <h2 class="order-title">{{ order.title }}</h2>
         <div class="order-meta-grid">
           <div class="meta-item">
@@ -762,7 +779,7 @@ function getStatusTagType(status: string) {
 
       <!-- Handoff Records list -->
       <section class="card-section">
-        <h3 class="section-title">交接日志</h3>
+        <h3 class="section-title">交接日志 · 商品编号 {{ listingCode }}</h3>
         <van-empty
           v-if="handoffRecords.length === 0"
           image="search"
@@ -1276,6 +1293,17 @@ function getStatusTagType(status: string) {
   font-family: monospace;
 }
 
+.listing-code-chip {
+  margin-bottom: 10px;
+  padding: 4px 9px;
+  border: 1px solid #dbeafe;
+  border-radius: 999px;
+  background: #eff6ff;
+  color: #2563eb;
+  font-size: 12px;
+  font-weight: 800;
+}
+
 .order-title {
   font-size: 18px;
   font-weight: 700;

frontend/src/features/orders/views/MobileOrdersView.vue

@@ -12,6 +12,7 @@ import {
 } from '@/features/orders/api/orders'
 import { useSessionStore } from '@/stores/session'
 import { formatDateMinute } from '@/utils/time'
+import { formatListingNo } from '@/utils/listingDisplay'
 
 const router = useRouter()
 const route = useRoute()
@@ -139,6 +140,19 @@ function ownerActualIncome(order: Order) {
   const value = order.checkout?.owner_income_amount
   return typeof value === 'number' ? value : null
 }
+
+function formatListingCode(order: Order) {
+  return formatListingNo(order.listing_no, order.listing_id)
+}
+
+async function copyListingCode(order: Order) {
+  try {
+    await navigator.clipboard.writeText(formatListingCode(order))
+    showToast({ message: '商品编号已复制', icon: 'passed' })
+  } catch {
+    showToast({ message: '复制失败', icon: 'cross' })
+  }
+}
 </script>
 
 <template>
@@ -197,6 +211,9 @@ function ownerActualIncome(order: Order) {
 
         <!-- 卡片体：关键信息 -->
         <div class="card-body">
+          <button class="listing-code-chip" type="button" @click.stop="copyListingCode(order)">
+            商品编号 {{ formatListingCode(order) }}
+          </button>
           <h3 class="order-title">{{ order.title }}</h3>
           <div class="tag-row">
             <span class="info-tag">{{ order.server_region }}</span>
@@ -370,6 +387,17 @@ function ownerActualIncome(order: Order) {
   line-height: 1;
 }
 
+.listing-code-chip {
+  margin-bottom: 8px;
+  padding: 4px 9px;
+  border: 1px solid #dbeafe;
+  border-radius: 999px;
+  background: #eff6ff;
+  color: #2563eb;
+  font-size: 12px;
+  font-weight: 800;
+}
+
 /* 状态徽章颜色 - 现代轻量化配色 */
 .badge-pending_payment {
   color: #ff6a00;

frontend/src/features/orders/views/OrderDetailView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ElMessage } from 'element-plus'
-import { ChatDotRound, Loading } from '@element-plus/icons-vue'
+import { ChatDotRound, CopyDocument, Loading } from '@element-plus/icons-vue'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import QRCode from 'qrcode'
@@ -27,6 +27,7 @@ import {
 import { useSessionStore } from '@/stores/session'
 import { handoffStatusLabel, orderStatusLabel } from '@/utils/statusLabels'
 import { formatDateTime } from '@/utils/time'
+import { formatListingNo } from '@/utils/listingDisplay'
 
 const route = useRoute()
 const router = useRouter()
@@ -48,6 +49,10 @@ const handoffRecords = ref<HandoffRecord[]>([])
 const handoffContent = ref('')
 const paymentDialogVisible = ref(false)
 const activePayment = ref<PaymentOrder | null>(null)
+
+const listingCode = computed(() =>
+  order.value ? formatListingNo(order.value.listing_no, order.value.listing_id) : '-'
+)
 const paymentQRCodeURL = ref('')
 const qrGenerating = ref(false)
 const checkingPayment = ref(false)
@@ -675,6 +680,16 @@ function formatHandoffRecordType(type: string) {
   }
   return typeMap[type] || type
 }
+
+async function copyListingCode() {
+  if (!order.value) return
+  try {
+    await navigator.clipboard.writeText(listingCode.value)
+    ElMessage.success('商品编号已复制')
+  } catch {
+    ElMessage.error('复制失败')
+  }
+}
 </script>
 
 <template>
@@ -685,6 +700,9 @@ function formatHandoffRecordType(type: string) {
           <p class="eyebrow">订单号：{{ order.order_no }}</p>
           <h1>{{ order.title }}</h1>
           <p class="order-meta">{{ order.server_region }} / {{ order.login_platform }}</p>
+          <el-button size="small" plain :icon="CopyDocument" @click="copyListingCode">
+            商品编号 {{ listingCode }}
+          </el-button>
         </div>
         <el-button type="primary" :loading="openingChat" @click="openOrderChat">
           <el-icon style="margin-right: 4px"><ChatDotRound /></el-icon>
@@ -793,6 +811,7 @@ function formatHandoffRecordType(type: string) {
         <div v-if="order" class="timeline-section">
           <div class="section-header">
             <h2>交接记录</h2>
+            <span>商品编号 {{ listingCode }}</span>
           </div>
           <el-empty v-if="handoffRecords.length === 0" description="暂无交接记录" />
           <el-timeline v-else>

frontend/src/features/orders/views/OrdersView.vue

@@ -8,6 +8,7 @@ import { fetchOrders, type Order } from '@/features/orders'
 import { useSessionStore } from '@/stores/session'
 import { orderStatusLabel } from '@/utils/statusLabels'
 import { formatDateTime } from '@/utils/time'
+import { formatListingNo } from '@/utils/listingDisplay'
 
 const loading = ref(false)
 const orders = ref<Order[]>([])
@@ -40,6 +41,9 @@ const displayOrders = computed(() => {
     filtered = filtered.filter(
       order =>
         order.order_no.toLowerCase().includes(keyword) ||
+        formatListingCode(order).toLowerCase().includes(keyword) ||
+        String(order.listing_id).includes(keyword) ||
+        String(order.account_id).includes(keyword) ||
         order.title.toLowerCase().includes(keyword)
     )
   }
@@ -152,6 +156,19 @@ async function copyOrderNo(orderNo: string) {
   }
 }
 
+function formatListingCode(order: Order) {
+  return formatListingNo(order.listing_no, order.listing_id)
+}
+
+async function copyListingCode(order: Order) {
+  try {
+    await navigator.clipboard.writeText(formatListingCode(order))
+    ElMessage.success('商品编号已复制')
+  } catch {
+    ElMessage.error('复制失败')
+  }
+}
+
 function getPaymentDeadline(order: Order) {
   if (order.status !== 'pending_payment' || !order.created_at) return null
   if (order.payment_deadline_at) {
@@ -182,7 +199,7 @@ function getCountdownMinutes(order: Order) {
     <div class="orders-toolbar">
       <el-input
         v-model="searchKeyword"
-        placeholder="搜索订单号 / 账号 / 起始数字"
+        placeholder="搜索订单号 / 商品编号 / 账号"
         :prefix-icon="Search"
         clearable
         class="search-input"
@@ -220,6 +237,16 @@ function getCountdownMinutes(order: Order) {
             </div>
           </template>
         </el-table-column>
+        <el-table-column label="商品编号" width="150">
+          <template #default="{ row }">
+            <div class="order-no-cell">
+              <span class="order-no-text">{{ formatListingCode(row) }}</span>
+              <el-icon class="copy-icon" @click="copyListingCode(row)">
+                <CopyDocument />
+              </el-icon>
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column prop="title" label="账号" min-width="180" />
         <el-table-column label="金额" width="132">
           <template #default="{ row }">
@@ -299,6 +326,10 @@ function getCountdownMinutes(order: Order) {
               {{ orderRole(order) }}
             </el-tag>
           </div>
+          <button class="listing-code-line" type="button" @click.stop="copyListingCode(order)">
+            商品编号 {{ formatListingCode(order) }}
+            <el-icon><CopyDocument /></el-icon>
+          </button>
           <div class="card-title">{{ order.title }}</div>
           <div class="card-meta">
             <div class="meta-row">
@@ -425,6 +456,22 @@ function getCountdownMinutes(order: Order) {
   color: #4a5568;
 }
 
+.listing-code-line {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: 5px;
+  margin-top: 10px;
+  padding: 4px 9px;
+  border: 1px solid #dbeafe;
+  border-radius: 999px;
+  background: #eff6ff;
+  color: #2563eb;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
 .copy-icon {
   cursor: pointer;
   color: #9ca3af;

frontend/src/features/seller/views/SellerHandoffsView.vue

@@ -6,6 +6,7 @@ import { useSessionStore } from '@/stores/session'
 import { handoffStatusLabel, orderStatusLabel } from '@/utils/statusLabels'
 import { formatDateTime } from '@/utils/time'
 import { formatMoney } from '@/shared/utils/money'
+import { formatListingNo } from '@/utils/listingDisplay'
 
 const session = useSessionStore()
 const loading = ref(false)
@@ -113,6 +114,11 @@ function money(value: unknown) {
     </div>
 
     <el-table v-loading="loading" class="table-panel" :data="displayOrders">
+      <el-table-column label="商品编号" width="140">
+        <template #default="{ row }">{{
+          formatListingNo(row.listing_no, row.listing_id)
+        }}</template>
+      </el-table-column>
       <el-table-column prop="order_no" label="订单号" min-width="220" />
       <el-table-column prop="title" label="账号" min-width="180" />
       <el-table-column label="金额" width="120">

frontend/src/features/seller/views/SellerListingsView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Plus, Refresh } from '@element-plus/icons-vue'
+import { CopyDocument, Plus, Refresh } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { computed, onMounted, ref } from 'vue'
 
@@ -10,7 +10,7 @@ import {
   type Listing,
 } from '@/features/listings'
 import { listingReviewStatusLabel, listingStatusLabel } from '@/utils/statusLabels'
-import { getListingSellerPrice } from '@/utils/listingDisplay'
+import { formatListingCode, getListingSellerPrice } from '@/utils/listingDisplay'
 
 const loading = ref(false)
 const submittingID = ref<number | null>(null)
@@ -106,6 +106,15 @@ function listingPrice(row: Listing) {
   return `¥${Math.round(getListingSellerPrice(row))}`
 }
 
+async function copyListingCode(row: Listing) {
+  try {
+    await navigator.clipboard.writeText(formatListingCode(row))
+    ElMessage.success('商品编号已复制')
+  } catch {
+    ElMessage.error('复制失败')
+  }
+}
+
 function coinText(row: Listing) {
   const coinM = Number(row.haf_coin_amount || 0) / 1000000
   return Number.isInteger(coinM) ? `${coinM}M` : `${coinM.toFixed(2)}M`
@@ -185,7 +194,13 @@ function isPendingReview(row: Listing) {
       <article v-for="item in displayListings" :key="item.id" class="listing-card">
         <div class="listing-main">
           <div class="listing-title-row">
-            <h3>{{ item.title }}</h3>
+            <div class="listing-title-main">
+              <button class="listing-code-chip" type="button" @click="copyListingCode(item)">
+                编号 {{ formatListingCode(item) }}
+                <el-icon><CopyDocument /></el-icon>
+              </button>
+              <h3>{{ item.title }}</h3>
+            </div>
             <div class="listing-tags">
               <span class="status-pill" :class="statusTone(item.status)">{{
                 listingStatusLabel(item.status)
@@ -348,6 +363,27 @@ function isPendingReview(row: Listing) {
   gap: 12px;
 }
 
+.listing-title-main {
+  display: grid;
+  min-width: 0;
+  gap: 6px;
+}
+
+.listing-code-chip {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 9px;
+  border: 1px solid #dbeafe;
+  border-radius: 999px;
+  background: #eff6ff;
+  color: #2563eb;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
 .listing-title-row h3 {
   min-width: 0;
   margin: 0;

frontend/src/shared/utils/listingDisplay.ts

@@ -23,8 +23,15 @@ export function getCoinM(item: Listing) {
 }
 
 export function formatListingCode(item: Listing) {
-  if (item.listing_no) return item.listing_no
+  return formatListingNo(item.listing_no, item.id)
-  return `SP${String(item.id).padStart(6, '0')}`
+}
+
+export function formatListingNo(listingNo?: string, listingID?: number | string) {
+  if (listingNo) return listingNo
+  if (listingID !== undefined && listingID !== null && listingID !== '') {
+    return `SP${String(listingID).padStart(6, '0')}`
+  }
+  return '-'
 }
 
 export function formatHafCoinM(amountWan: number) {

frontend/src/utils/listingDisplay.ts

@@ -23,8 +23,15 @@ export function getCoinM(item: Listing) {
 }
 
 export function formatListingCode(item: Listing) {
-  if (item.listing_no) return item.listing_no
+  return formatListingNo(item.listing_no, item.id)
-  return `SP${String(item.id).padStart(6, '0')}`
+}
+
+export function formatListingNo(listingNo?: string, listingID?: number | string) {
+  if (listingNo) return listingNo
+  if (listingID !== undefined && listingID !== null && listingID !== '') {
+    return `SP${String(listingID).padStart(6, '0')}`
+  }
+  return '-'
 }
 
 export function formatHafCoinM(amountWan: number) {