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

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>