第 5 阶段：纠纷、通知与后台-4

frontend/src/api/listings.ts

@@ -75,3 +75,18 @@ export async function offlineListing(id: number) {
   const { data } = await apiClient.delete<ApiResponse<{ offline: boolean }>>(`/listings/${id}`)
   return data.data
 }
+
+export async function fetchPendingReviewListings() {
+  const { data } = await apiClient.get<ApiResponse<{ items: Listing[] }>>('/admin/listings/pending')
+  return data.data.items
+}
+
+export async function approveListing(id: number) {
+  const { data } = await apiClient.post<ApiResponse<Listing>>(`/admin/listings/${id}/approve`)
+  return data.data
+}
+
+export async function rejectListing(id: number, reason: string) {
+  const { data } = await apiClient.post<ApiResponse<Listing>>(`/admin/listings/${id}/reject`, { reason })
+  return data.data
+}

frontend/src/layouts/AppLayout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Bell, House, Key, Operation, Phone, ScaleToOriginal, Shop, Tickets, UserFilled, Wallet } from '@element-plus/icons-vue'
+import { Bell, House, Key, Operation, Phone, ScaleToOriginal, Shop, Tickets, UserFilled, Wallet, View } from '@element-plus/icons-vue'
 
 const navItems = [
   { label: '首页', to: '/', icon: House },
@@ -9,6 +9,7 @@ const navItems = [
   { label: '通知', to: '/notifications', icon: Bell },
   { label: '实名', to: '/realname', icon: UserFilled },
   { label: '后台登录', to: '/admin/login', icon: Key },
+  { label: '审核', to: '/admin/listings/review', icon: View },
   { label: '仲裁', to: '/admin/disputes', icon: ScaleToOriginal },
   { label: '配置', to: '/admin/system-configs', icon: Operation },
   { label: '登录', to: '/login', icon: Phone },

frontend/src/router/index.ts

@@ -19,6 +19,7 @@ const router = createRouter({
     { path: '/seller/earnings', name: 'seller-earnings', component: () => import('@/views/seller/SellerEarningsView.vue') },
     { path: '/admin/login', name: 'admin-login', component: () => import('@/views/admin/AdminLoginView.vue') },
     { path: '/admin/dashboard', name: 'admin-dashboard', component: () => import('@/views/admin/AdminDashboardView.vue') },
+    { path: '/admin/listings/review', name: 'admin-listing-review', component: () => import('@/views/admin/AdminListingReviewView.vue') },
     { path: '/admin/disputes', name: 'admin-disputes', component: () => import('@/views/admin/AdminDisputesView.vue') },
     { path: '/admin/system-configs', name: 'admin-system-configs', component: () => import('@/views/admin/AdminSystemConfigsView.vue') },
   ],

frontend/src/views/admin/AdminDashboardView.vue

@@ -75,10 +75,10 @@ function money(value?: number) {
           <span>待仲裁申诉</span>
           <strong>{{ dashboard.pending.disputes }}</strong>
         </RouterLink>
-        <div class="pending-row">
+        <RouterLink class="pending-row" to="/admin/listings/review">
           <span>待审核商品</span>
           <strong>{{ dashboard.pending.listing_reviews }}</strong>
-        </div>
+        </RouterLink>
         <div class="pending-row">
           <span>待交接订单</span>
           <strong>{{ dashboard.pending.pending_handoffs }}</strong>
@@ -95,6 +95,10 @@ function money(value?: number) {
           <span>仲裁中心</span>
           <strong>进入</strong>
         </RouterLink>
+        <RouterLink class="pending-row" to="/admin/listings/review">
+          <span>商品审核</span>
+          <strong>进入</strong>
+        </RouterLink>
         <RouterLink class="pending-row" to="/admin/system-configs">
           <span>系统配置</span>
           <strong>进入</strong>

frontend/src/views/admin/AdminListingReviewView.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { onMounted, ref } from 'vue'
+
+import { approveListing, fetchPendingReviewListings, rejectListing, type Listing } from '@/api/listings'
+
+const loading = ref(false)
+const submitting = ref(false)
+const listings = ref<Listing[]>([])
+const activeListing = ref<Listing | null>(null)
+const rejectReason = ref('')
+
+onMounted(loadListings)
+
+async function loadListings() {
+  loading.value = true
+  try {
+    listings.value = await fetchPendingReviewListings()
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handleApprove(row: Listing) {
+  submitting.value = true
+  try {
+    await approveListing(row.id)
+    ElMessage.success('审核通过，商品已上架')
+    await loadListings()
+  } catch (error) {
+    ElMessage.error(readError(error, '审核失败'))
+  } finally {
+    submitting.value = false
+  }
+}
+
+function openReject(row: Listing) {
+  activeListing.value = row
+  rejectReason.value = row.review_reason || ''
+}
+
+async function handleReject() {
+  if (!activeListing.value) return
+  submitting.value = true
+  try {
+    await rejectListing(activeListing.value.id, rejectReason.value)
+    ElMessage.success('已拒绝发布并通知号主')
+    activeListing.value = null
+    rejectReason.value = ''
+    await loadListings()
+  } catch (error) {
+    ElMessage.error(readError(error, '拒绝失败'))
+  } finally {
+    submitting.value = false
+  }
+}
+
+function readError(error: unknown, fallback: string) {
+  if (typeof error === 'object' && error && 'response' in error) {
+    const response = (error as { response?: { data?: { message?: string } } }).response
+    return response?.data?.message || fallback
+  }
+  return fallback
+}
+</script>
+
+<template>
+  <section class="page">
+    <div class="page-header-row">
+      <div class="page-header">
+        <p class="eyebrow">Review</p>
+        <h1>商品审核</h1>
+        <p>审核号主提交的账号资产、价格、押金和租期规则。</p>
+      </div>
+      <el-button @click="loadListings">刷新</el-button>
+    </div>
+
+    <el-table v-loading="loading" class="table-panel" :data="listings">
+      <el-table-column prop="title" label="标题" min-width="180" />
+      <el-table-column prop="owner_id" label="号主" width="90" />
+      <el-table-column prop="server_region" label="区服" width="120" />
+      <el-table-column prop="login_platform" label="平台" width="120" />
+      <el-table-column prop="haf_coin_amount" label="哈夫币" width="110" />
+      <el-table-column prop="rank_level" label="段位" width="110" />
+      <el-table-column prop="price_hourly" label="时租" width="90" />
+      <el-table-column prop="deposit_amount" label="押金" width="90" />
+      <el-table-column prop="updated_at" label="提交时间" min-width="180" />
+      <el-table-column label="操作" width="170" fixed="right">
+        <template #default="{ row }">
+          <el-button size="small" type="primary" :loading="submitting" @click="handleApprove(row)">通过</el-button>
+          <el-button size="small" type="danger" @click="openReject(row)">拒绝</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog :model-value="!!activeListing" title="拒绝发布" width="560px" @update:model-value="activeListing = null">
+      <div v-if="activeListing" class="dialog-body">
+        <p><strong>{{ activeListing.title }}</strong></p>
+        <el-input v-model="rejectReason" type="textarea" :rows="4" placeholder="填写拒绝原因，号主会在通知中看到审核结果" />
+      </div>
+      <template #footer>
+        <el-button @click="activeListing = null">取消</el-button>
+        <el-button type="danger" :loading="submitting" @click="handleReject">确认拒绝</el-button>
+      </template>
+    </el-dialog>
+  </section>
+</template>

frontend/src/views/seller/SellerListingsView.vue

@@ -20,7 +20,7 @@ async function loadListings() {
 
 async function submitReview(id: number) {
   await submitListingReview(id)
-  ElMessage.success('已提交审核并自动上架')
+  ElMessage.success('已提交审核，等待后台处理')
   await loadListings()
 }
 
@@ -52,10 +52,13 @@ async function offline(id: number) {
       <el-table-column prop="deposit_amount" label="押金" width="100" />
       <el-table-column prop="status" label="状态" width="110" />
       <el-table-column prop="review_status" label="审核" width="110" />
-      <el-table-column label="操作" width="180">
+      <el-table-column prop="review_reason" label="审核原因" min-width="160" show-overflow-tooltip />
+      <el-table-column label="操作" width="190">
         <template #default="{ row }">
-          <el-button size="small" @click="submitReview(row.id)">上架</el-button>
-          <el-button size="small" type="danger" @click="offline(row.id)">下架</el-button>
+          <el-button size="small" :disabled="row.review_status === 'pending' || row.status === 'rented'" @click="submitReview(row.id)">
+            提审
+          </el-button>
+          <el-button size="small" type="danger" :disabled="row.status === 'rented'" @click="offline(row.id)">下架</el-button>
         </template>
       </el-table-column>
     </el-table>