style(admin): B-32 review 模块余下 8 页 + ReviewCenter/AuditDetailDrawer 令牌化与 StatusTag 迁移

cfc-web/src/views/admin/ReviewCenter.vue

@@ -146,9 +146,9 @@ export default {
 .review-center { padding: 16px; }
 .summary-row { margin-bottom: 16px; }
 .summary-card { cursor: pointer; text-align: center; }
-.summary-card.active { border-color: #409EFF; }
+.summary-card.active { border-color: var(--adm-primary); }
 .summary-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; }
-.summary-count { font-size: 24px; font-weight: bold; color: #409EFF; }
-.summary-label { font-size: 12px; color: #666; }
+.summary-count { font-size: 24px; font-weight: bold; color: var(--adm-primary); }
+.summary-label { font-size: 12px; color: var(--adm-text-65); }
 .detail-card { min-height: 400px; }
 </style>

cfc-web/src/views/admin/review/GuideAudit.vue

@@ -30,7 +30,7 @@
       </el-table-column>
       <el-table-column label="审核状态" width="100">
         <template slot-scope="{ row }">
-          <el-tag :type="statusType(row.status)">{{ statusLabel(row.status) }}</el-tag>
+          <StatusTag :type="statusType(row.status)" :text="statusLabel(row.status)" />
         </template>
       </el-table-column>
       <el-table-column label="提交时间" width="160">
@@ -86,9 +86,9 @@
           <el-form-item label="详细地址">{{ currentRow.addressDetail || '-' }}</el-form-item>
         </template>
         <el-form-item label="审核状态">
-          <el-tag :type="statusType(currentRow.status)">{{ statusLabel(currentRow.status) }}</el-tag>
+          <StatusTag :type="statusType(currentRow.status)" :text="statusLabel(currentRow.status)" />
         </el-form-item>
-        <el-form-item label="驳回原因" v-if="currentRow.rejectReason" style="color:#f56c6c;">
+        <el-form-item label="驳回原因" v-if="currentRow.rejectReason" style="color:var(--adm-error-text);">
           {{ currentRow.rejectReason }}
         </el-form-item>
       </el-form>
@@ -215,12 +215,7 @@ export default {
 </script>
 
 <style scoped>
-.filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding: 12px; background: #fff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
-.no-op { color: #ccc; }
-.sort-header { cursor: pointer; user-select: none; font-weight: 500; font-size: 12px; }
-.sort-header:hover { color: #409eff; }
-.sort-index { color: #fff; border-radius: 8px; font-size: 10px; padding: 0 4px; margin: 0 2px; }
-.sort-asc-badge { background: #f56c6c; }
-.sort-desc-badge { background: #409eff; }
-.audit-img { max-width: 160px; max-height: 110px; border-radius: 4px; margin-right: 8px; border: 1px solid #eee; }
+.filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding: 12px; background: var(--adm-bg-container); border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
+.no-op { color: var(--adm-text-25); }
+.audit-img { max-width: 160px; max-height: 110px; border-radius: 4px; margin-right: 8px; border: 1px solid var(--adm-border-split); }
 </style>

cfc-web/src/views/admin/review/HierarchyAudit.vue

@@ -38,7 +38,7 @@
       </el-table-column>
       <el-table-column label="审核状态" width="100">
         <template slot-scope="{ row }">
-          <el-tag :type="statusType(row.status)">{{ statusLabel(row.status) }}</el-tag>
+          <StatusTag :type="statusType(row.status)" :text="statusLabel(row.status)" />
         </template>
       </el-table-column>
       <el-table-column label="操作" width="120" fixed="right">
@@ -65,9 +65,9 @@
           <div style="white-space:pre-wrap;">{{ currentRow.reason || '-' }}</div>
         </el-form-item>
         <el-form-item label="审核状态">
-          <el-tag :type="statusType(currentRow.status)">{{ statusLabel(currentRow.status) }}</el-tag>
+          <StatusTag :type="statusType(currentRow.status)" :text="statusLabel(currentRow.status)" />
         </el-form-item>
-        <el-form-item label="驳回原因" v-if="currentRow.rejectReason" style="color:#f56c6c;">
+        <el-form-item label="驳回原因" v-if="currentRow.rejectReason" style="color:var(--adm-error-text);">
           {{ currentRow.rejectReason }}
         </el-form-item>
       </el-form>
@@ -131,11 +131,6 @@ export default {
 </script>
 
 <style scoped>
-.filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding: 12px; background: #fff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
-.no-op { color: #ccc; }
-.sort-header { cursor: pointer; user-select: none; font-weight: 500; font-size: 12px; }
-.sort-header:hover { color: #409eff; }
-.sort-index { color: #fff; border-radius: 8px; font-size: 10px; padding: 0 4px; margin: 0 2px; }
-.sort-asc-badge { background: #f56c6c; }
-.sort-desc-badge { background: #409eff; }
+.filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding: 12px; background: var(--adm-bg-container); border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
+.no-op { color: var(--adm-text-25); }
 </style>

cfc-web/src/views/admin/review/NutritionistAudit.vue

@@ -27,7 +27,7 @@
       </el-table-column>
       <el-table-column label="审核状态" width="100">
         <template slot-scope="{ row }">
-          <el-tag :type="statusType(row.status)">{{ statusLabel(row.status) }}</el-tag>
+          <StatusTag :type="statusType(row.status)" :text="statusLabel(row.status)" />
         </template>
       </el-table-column>
       <el-table-column label="提交时间" width="160">
@@ -82,9 +82,9 @@
           <el-form-item label="详细地址">{{ currentRow.addressDetail || '-' }}</el-form-item>
         </template>
         <el-form-item label="审核状态">
-          <el-tag :type="statusType(currentRow.status)">{{ statusLabel(currentRow.status) }}</el-tag>
+          <StatusTag :type="statusType(currentRow.status)" :text="statusLabel(currentRow.status)" />
         </el-form-item>
-        <el-form-item label="驳回原因" v-if="currentRow.rejectReason" style="color:#f56c6c;">
+        <el-form-item label="驳回原因" v-if="currentRow.rejectReason" style="color:var(--adm-error-text);">
           {{ currentRow.rejectReason }}
         </el-form-item>
       </el-form>
@@ -211,12 +211,7 @@ export default {
 </script>
 
 <style scoped>
-.filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding: 12px; background: #fff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
-.no-op { color: #ccc; }
-.sort-header { cursor: pointer; user-select: none; font-weight: 500; font-size: 12px; }
-.sort-header:hover { color: #409eff; }
-.sort-index { color: #fff; border-radius: 8px; font-size: 10px; padding: 0 4px; margin: 0 2px; }
-.sort-asc-badge { background: #f56c6c; }
-.sort-desc-badge { background: #409eff; }
-.audit-img { max-width: 160px; max-height: 110px; border-radius: 4px; margin-right: 8px; border: 1px solid #eee; }
+.filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding: 12px; background: var(--adm-bg-container); border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
+.no-op { color: var(--adm-text-25); }
+.audit-img { max-width: 160px; max-height: 110px; border-radius: 4px; margin-right: 8px; border: 1px solid var(--adm-border-split); }
 </style>

cfc-web/src/views/admin/review/PackageAudit.vue

@@ -38,13 +38,13 @@
       </el-table-column>
       <el-table-column label="审核状态" width="90">
         <template slot-scope="{ row }">
-          <el-tag :type="statusType(row.status)" size="small">{{ statusLabel(row.status) }}</el-tag>
+          <StatusTag :type="statusType(row.status)" :text="statusLabel(row.status)" size="small" />
         </template>
       </el-table-column>
       <el-table-column prop="rejectReason" label="拒绝原因" min-width="150" show-overflow-tooltip>
         <template slot-scope="{ row }">
-          <span v-if="row.rejectReason" style="color:#f56c6c;">{{ row.rejectReason }}</span>
-          <span v-else style="color:#999;">-</span>
+          <span v-if="row.rejectReason" style="color:var(--adm-error-text);">{{ row.rejectReason }}</span>
+          <span v-else style="color:var(--adm-text-45);">-</span>
         </template>
       </el-table-column>
       <el-table-column prop="createdAt" label="申请时间" width="160">
@@ -80,14 +80,14 @@
       <el-form v-if="currentRow" label-width="110px" size="small">
         <el-form-item label="ID">{{ currentRow.id }}</el-form-item>
         <el-form-item label="任务模板名称">{{ currentRow.name }}</el-form-item>
-        <el-form-item label="状态"><el-tag :type="statusType(currentRow.status)">{{ statusLabel(currentRow.status) }}</el-tag></el-form-item>
+        <el-form-item label="状态"><StatusTag :type="statusType(currentRow.status)" :text="statusLabel(currentRow.status)" /></el-form-item>
         <el-form-item label="周期">{{ currentRow.cycleDays }} 天</el-form-item>
         <el-form-item label="价格">{{ formatPrice(currentRow.price) }}</el-form-item>
         <el-form-item label="创建时间">{{ currentRow.createdAt }}</el-form-item>
         <el-form-item label="详细介绍" v-if="currentRow.description">
-          <div style="border:1px solid #eee;padding:10px;border-radius:4px;background:#fafafa;white-space:pre-wrap;">{{ currentRow.description }}</div>
+          <div style="border:1px solid var(--adm-border-split);padding:10px;border-radius:4px;background:var(--adm-bg-header);white-space:pre-wrap;">{{ currentRow.description }}</div>
         </el-form-item>
-        <el-form-item label="拒绝原因" v-if="currentRow.rejectReason" style="color:#f56c6c;">
+        <el-form-item label="拒绝原因" v-if="currentRow.rejectReason" style="color:var(--adm-error-text);">
           {{ currentRow.rejectReason }}
         </el-form-item>
       </el-form>
@@ -237,10 +237,5 @@ export default {
 </script>
 
 <style scoped>
-.filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding: 12px; background: #fff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); flex-wrap: wrap; }
-.sort-header { cursor: pointer; user-select: none; font-weight: 500; font-size: 12px; }
-.sort-header:hover { color: #409eff; }
-.sort-index { color: #fff; border-radius: 8px; font-size: 10px; padding: 0 4px; margin: 0 2px; }
-.sort-asc-badge { background: #f56c6c; }
-.sort-desc-badge { background: #409eff; }
+.filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding: 12px; background: var(--adm-bg-container); border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); flex-wrap: wrap; }
 </style>

cfc-web/src/views/admin/review/PendingRefundAudit.vue

@@ -34,9 +34,7 @@
         </el-table-column>
         <el-table-column label="类型" width="100">
           <template slot-scope="{ row }">
-            <el-tag :type="row.orderType === 'product' ? 'primary' : 'warning'" size="small">
-              {{ row.orderType === 'product' ? '商品退款' : '提现退款' }}
-            </el-tag>
+            <StatusTag size="small" :type="row.orderType === 'product' ? 'primary' : 'warning'" :text="row.orderType === 'product' ? '商品退款' : '提现退款'" />
           </template>
         </el-table-column>
         <el-table-column label="订单号" width="180">
@@ -66,7 +64,7 @@
         </el-table-column>
         <el-table-column label="状态" width="100">
           <template slot-scope="{ row }">
-            <el-tag :type="statusType(row.status)">{{ statusLabel(row.status) }}</el-tag>
+            <StatusTag :type="statusType(row.status)" :text="statusLabel(row.status)" />
           </template>
         </el-table-column>
         <el-table-column label="尝试次数" width="80">
@@ -120,14 +118,14 @@
         <el-form-item label="订单号">{{ currentRow.orderNo || '-' }}</el-form-item>
         <el-form-item label="提现申请ID">{{ currentRow.withdrawalRequestId || '-' }}</el-form-item>
         <el-form-item label="用户">{{ currentRow.userName || '用户' + currentRow.userId }}</el-form-item>
-        <el-form-item label="退款金额" style="font-weight:bold;color:#f56c6c;">{{ formatPriceWithSymbol(currentRow.amount) }}</el-form-item>
+        <el-form-item label="退款金额" style="font-weight:bold;color:var(--adm-error-text);">{{ formatPriceWithSymbol(currentRow.amount) }}</el-form-item>
         <el-form-item label="实退金额">{{ currentRow.refundedAmount ? formatPriceWithSymbol(currentRow.refundedAmount) : '-' }}</el-form-item>
         <el-form-item label="状态">
-          <el-tag :type="statusType(currentRow.status)">{{ statusLabel(currentRow.status) }}</el-tag>
+          <StatusTag :type="statusType(currentRow.status)" :text="statusLabel(currentRow.status)" />
         </el-form-item>
         <el-form-item label="尝试次数">{{ currentRow.attemptCount }}/{{ currentRow.maxAttempts }}</el-form-item>
-        <el-form-item label="失败原因" v-if="currentRow.failureReason" style="color:#f56c6c;">{{ currentRow.failureReason }}</el-form-item>
-        <el-form-item label="中止原因" v-if="currentRow.remark" style="color:#909399;">{{ currentRow.remark }}</el-form-item>
+        <el-form-item label="失败原因" v-if="currentRow.failureReason" style="color:var(--adm-error-text);">{{ currentRow.failureReason }}</el-form-item>
+        <el-form-item label="中止原因" v-if="currentRow.remark" style="color:var(--adm-text-45);">{{ currentRow.remark }}</el-form-item>
         <el-form-item label="创建时间">{{ formatTime(currentRow.createdAt) }}</el-form-item>
       </el-form>
     </audit-detail-drawer>
@@ -261,12 +259,7 @@ export default {
 </script>
 
 <style scoped>
-.filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding: 12px; background: #fff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
+.filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding: 12px; background: var(--adm-bg-container); border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
 .summary-bar { margin-bottom: 12px; }
-.sort-header { cursor: pointer; user-select: none; font-weight: 500; font-size: 12px; }
-.sort-header:hover { color: #409eff; }
-.sort-index { color: #fff; border-radius: 8px; font-size: 10px; padding: 0 4px; margin: 0 2px; }
-.sort-asc-badge { background: #f56c6c; }
-.sort-desc-badge { background: #409eff; }
-.amount { font-weight: 500; color: #f56c6c; }
+.amount { font-weight: 500; color: var(--adm-error-text); }
 </style>

cfc-web/src/views/admin/review/ProductAudit.vue

@@ -23,7 +23,7 @@
       </el-table-column>
       <el-table-column label="审核状态" width="100">
         <template slot-scope="{ row }">
-          <el-tag :type="statusType(row.status)">{{ statusLabel(row.status) }}</el-tag>
+          <StatusTag :type="statusType(row.status)" :text="statusLabel(row.status)" />
         </template>
       </el-table-column>
       <el-table-column prop="rejectReason" label="原因" width="160" show-overflow-tooltip>
@@ -59,7 +59,7 @@
         <el-form-item label="商品描述">
           <div style="white-space:pre-wrap;">{{ detail.description || '-' }}</div>
         </el-form-item>
-        <el-form-item label="驳回原因" v-if="currentRow.rejectReason" style="color:#f56c6c;">
+        <el-form-item label="驳回原因" v-if="currentRow.rejectReason" style="color:var(--adm-error-text);">
           {{ currentRow.rejectReason }}
         </el-form-item>
       </el-form>
@@ -130,11 +130,6 @@ export default {
 </script>
 
 <style scoped>
-.filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding: 12px; background: #fff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
-.no-op { color: #ccc; }
-.sort-header { cursor: pointer; user-select: none; font-weight: 500; font-size: 12px; }
-.sort-header:hover { color: #409eff; }
-.sort-index { color: #fff; border-radius: 8px; font-size: 10px; padding: 0 4px; margin: 0 2px; }
-.sort-asc-badge { background: #f56c6c; }
-.sort-desc-badge { background: #409eff; }
+.filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding: 12px; background: var(--adm-bg-container); border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
+.no-op { color: var(--adm-text-25); }
 </style>

cfc-web/src/views/admin/review/VendorAudit.vue

@@ -30,7 +30,7 @@
       </el-table-column>
       <el-table-column label="审核状态" width="100">
         <template slot-scope="{ row }">
-          <el-tag :type="statusType(row.status)">{{ statusLabel(row.status) }}</el-tag>
+          <StatusTag :type="statusType(row.status)" :text="statusLabel(row.status)" />
         </template>
       </el-table-column>
       <el-table-column label="提交时间" width="160">
@@ -90,9 +90,9 @@
           <el-form-item label="资质说明">{{ currentRow.raw.description || currentRow.raw.qualification || '-' }}</el-form-item>
         </template>
         <el-form-item label="审核状态">
-          <el-tag :type="statusType(currentRow.status)">{{ statusLabel(currentRow.status) }}</el-tag>
+          <StatusTag :type="statusType(currentRow.status)" :text="statusLabel(currentRow.status)" />
         </el-form-item>
-        <el-form-item label="驳回原因" v-if="currentRow.rejectReason" style="color:#f56c6c;">
+        <el-form-item label="驳回原因" v-if="currentRow.rejectReason" style="color:var(--adm-error-text);">
           {{ currentRow.rejectReason }}
         </el-form-item>
       </el-form>
@@ -225,12 +225,7 @@ export default {
 </script>
 
 <style scoped>
-.filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding: 12px; background: #fff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
-.no-op { color: #ccc; }
-.sort-header { cursor: pointer; user-select: none; font-weight: 500; font-size: 12px; }
-.sort-header:hover { color: #409eff; }
-.sort-index { color: #fff; border-radius: 8px; font-size: 10px; padding: 0 4px; margin: 0 2px; }
-.sort-asc-badge { background: #f56c6c; }
-.sort-desc-badge { background: #409eff; }
-.audit-img { max-width: 160px; max-height: 110px; border-radius: 4px; margin-right: 8px; border: 1px solid #eee; }
+.filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding: 12px; background: var(--adm-bg-container); border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
+.no-op { color: var(--adm-text-25); }
+.audit-img { max-width: 160px; max-height: 110px; border-radius: 4px; margin-right: 8px; border: 1px solid var(--adm-border-split); }
 </style>

cfc-web/src/views/admin/review/WithdrawAudit.vue

@@ -28,7 +28,7 @@
       </el-table-column>
       <el-table-column label="审核状态" width="100">
         <template slot-scope="{ row }">
-          <el-tag :type="statusType(row.status)">{{ statusLabel(row.status) }}</el-tag>
+          <StatusTag :type="statusType(row.status)" :text="statusLabel(row.status)" />
         </template>
       </el-table-column>
       <el-table-column prop="createdAt" label="申请时间" width="160">
@@ -64,15 +64,15 @@
       <el-form v-if="currentRow" label-width="100px" size="small">
         <el-form-item label="申请ID">{{ currentRow.id }}</el-form-item>
         <el-form-item label="用户">{{ currentRow.nickname || currentRow.userName || '-' }}</el-form-item>
-        <el-form-item label="提现金额" style="font-weight:bold;color:#f56c6c;">{{ formatPrice(currentRow.amount) }}</el-form-item>
+        <el-form-item label="提现金额" style="font-weight:bold;color:var(--adm-error-text);">{{ formatPrice(currentRow.amount) }}</el-form-item>
         <el-form-item label="账户信息">
           <div style="white-space:pre-wrap;word-break:break-all;">{{ currentRow.accountInfo || '-' }}</div>
         </el-form-item>
         <el-form-item label="申请时间">{{ currentRow.createdAt || '-' }}</el-form-item>
         <el-form-item label="审核状态">
-          <el-tag :type="statusType(currentRow.status)">{{ statusLabel(currentRow.status) }}</el-tag>
+          <StatusTag :type="statusType(currentRow.status)" :text="statusLabel(currentRow.status)" />
         </el-form-item>
-        <el-form-item label="驳回原因" v-if="currentRow.remark || currentRow.rejectReason" style="color:#f56c6c;">
+        <el-form-item label="驳回原因" v-if="currentRow.remark || currentRow.rejectReason" style="color:var(--adm-error-text);">
           {{ currentRow.remark || currentRow.rejectReason }}
         </el-form-item>
       </el-form>
@@ -182,10 +182,5 @@ export default {
 </script>
 
 <style scoped>
-.filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding: 12px; background: #fff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
-.sort-header { cursor: pointer; user-select: none; font-weight: 500; font-size: 12px; }
-.sort-header:hover { color: #409eff; }
-.sort-index { color: #fff; border-radius: 8px; font-size: 10px; padding: 0 4px; margin: 0 2px; }
-.sort-asc-badge { background: #f56c6c; }
-.sort-desc-badge { background: #409eff; }
+.filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding: 12px; background: var(--adm-bg-container); border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
 </style>

cfc-web/src/views/admin/review/components/AuditDetailDrawer.vue

@@ -11,7 +11,7 @@
   >
     <div v-loading="loading" class="audit-detail-wrap">
       <div class="audit-detail-head">
-        <el-tag :type="statusTagType" size="small">{{ statusLabel }}</el-tag>
+        <StatusTag :type="statusTagType" :text="statusLabel" size="small" />
         <slot name="head" />
       </div>
       <div class="audit-detail-body">
@@ -157,7 +157,7 @@ export default {
   overflow-y: auto;
 }
 .audit-detail-footer {
-  border-top: 1px solid #ebeef5;
+  border-top: 1px solid var(--adm-border-split);
   padding-top: 12px;
   margin-top: 12px;
   text-align: right;