新增商品编号搜索

frontend/src/features/listings/api/listings.ts

@@ -4,6 +4,7 @@ import type { ListingReviewStatus, ListingStatus } from '@/shared/types/status'
 
 export interface Listing {
   id: number
+  listing_no: string
   account_id: number
   owner_id: number
   owner_phone?: string

frontend/src/features/listings/components/ListingCard.vue

@@ -7,6 +7,7 @@ import {
   getCoinWan,
   getDailyLoss,
   getListingDisplayPrice,
+  formatListingCode,
   getListingResources,
   getListingTitle,
   getLoginMethod,
@@ -100,7 +101,10 @@ function formatStatNumber(value: number) {
     <div class="card-details">
       <div class="card-title-row">
         <h3>{{ getListingTitle(listing) }}</h3>
-        <span v-if="dailyLoss" class="daily-loss">日耗 {{ dailyLoss }}</span>
+        <div class="card-title-meta">
+          <span class="listing-no">编号 {{ formatListingCode(listing) }}</span>
+          <span v-if="dailyLoss" class="daily-loss">日耗 {{ dailyLoss }}</span>
+        </div>
       </div>
 
       <div class="info-panel">
@@ -252,6 +256,23 @@ function formatStatNumber(value: number) {
   white-space: nowrap;
 }
 
+.card-title-meta {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.listing-no {
+  padding: 4px 10px;
+  border: 1px solid #dbeafe;
+  border-radius: 6px;
+  background: #eff6ff;
+  font-size: 12px;
+  font-weight: 800;
+  color: #2563eb;
+}
+
 .daily-loss {
   flex: 0 0 auto;
   padding: 4px 10px;

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import {
   defaultHomeAnnouncements,
   defaultHomeBanners,
@@ -24,6 +25,8 @@ const banners = ref<HomeBannerSlide[]>(defaultHomeBanners)
 const publishOptions = ref<ListingPublishOptions>(emptyListingPublishOptions)
 const sortBy = ref('recommended')
 const activeZone = ref('all')
+const route = useRoute()
+const router = useRouter()
 
 const {
   filters,
@@ -40,6 +43,8 @@ const {
   computed(() => listings.value)
 )
 
+filters.keyword = routeKeyword()
+
 const {
   loading,
   loadingMore,
@@ -50,6 +55,13 @@ const {
   zoneCount,
 } = useListingQuery(filters, sortBy, activeZone)
 
+watch(
+  () => route.query.keyword,
+  () => {
+    filters.keyword = routeKeyword()
+  }
+)
+
 const statCards = computed(() => [
   { label: '可租账号', value: `${totalListings.value}`, hint: '当前筛选结果' },
   {
@@ -127,6 +139,19 @@ function handleResetFilters() {
   resetFilters()
   activeZone.value = 'all'
   sortBy.value = 'recommended'
+  router.replace({
+    path: '/',
+    query: {
+      ...route.query,
+      keyword: undefined,
+    },
+  })
+}
+
+function routeKeyword() {
+  const keyword = route.query.keyword
+  if (Array.isArray(keyword)) return String(keyword[0] || '')
+  return typeof keyword === 'string' ? keyword : ''
 }
 
 loadHome()

frontend/src/features/listings/views/MobileHomeView.css

@@ -323,6 +323,18 @@
   white-space: nowrap;
 }
 
+.mobile-listing-no {
+  display: inline-flex;
+  width: fit-content;
+  margin-top: 6px;
+  padding: 3px 7px;
+  border-radius: 999px;
+  background: #eff6ff;
+  color: #2563eb;
+  font-size: 11px;
+  font-weight: 800;
+}
+
 .card-subtitle {
   margin: 6px 0 10px;
   color: #64748b;

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

@@ -26,6 +26,7 @@ import {
   getListingDisplayPrice,
   getListingSubtitle,
   getListingTitle,
+  formatListingCode,
   getLoginMethod,
   getServerRegion,
   hasAcceleratedSaleRatio,
@@ -377,7 +378,7 @@ function uniqueOptions(values: string[]) {
         <van-search
           v-model="searchValue"
           shape="round"
-          placeholder="搜区服 / 段位"
+          placeholder="搜编号 / 区服 / 段位"
           class="home-search"
         />
         <button
@@ -510,6 +511,7 @@ function uniqueOptions(values: string[]) {
               <div class="card-title-row">
                 <h2>{{ getListingTitle(item) }}</h2>
               </div>
+              <div class="mobile-listing-no">编号 {{ formatListingCode(item) }}</div>
               <p class="card-subtitle">{{ getListingSubtitle(item) }}</p>
               <div class="card-badges-row">
                 <span class="server-badge">{{ getServerRegion(item) }}</span>