新增商品编号搜索

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;