贯通商品编号全流程

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;