style(admin): B-26 评论/优惠券/告警/指标/MBTI 页面美化

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

@@ -1,7 +1,6 @@
 <template>
   <div class="comment-review admin-page">
-    <div class="header">
-      <h2>评论审核</h2>
+    <PageHeader title="评论审核">
       <div class="filters">
         <el-select v-model="listQuery.status" @change="loadList" placeholder="审核状态" style="width:140px" clearable>
           <el-option label="全部" value="" />
@@ -12,7 +11,7 @@
         <el-input v-model="listQuery.articleId" placeholder="文章ID" style="width:160px" clearable @keyup.enter.native="loadList" />
         <el-button type="primary" @click="loadList">查询</el-button>
       </div>
-    </div>
+    </PageHeader>
         <div class="adm-table-wrap">
 <el-table :data="list" v-loading="loading" border stripe height="100%">
       <el-table-column prop="id" label="ID" width="60">
@@ -32,14 +31,15 @@
       </el-table-column>
       <el-table-column label="评论内容" min-width="300">
         <template slot-scope="{ row }">
-          <span v-if="row.parentId" style="color:#999">[回复] </span>{{ row.content }}
+          <span v-if="row.parentId" style="color:var(--adm-text-45)">[回复] </span>{{ row.content }}
         </template>
       </el-table-column>
       <el-table-column label="状态" width="100">
         <template slot-scope="{ row }">
-          <el-tag :type="row.status === 'approved' ? 'success' : row.status === 'rejected' ? 'danger' : 'warning'">
-            {{ { pending: '待审核', approved: '已通过', rejected: '已驳回' }[row.status] }}
-          </el-tag>
+          <StatusTag
+            :type="row.status === 'approved' ? 'success' : row.status === 'rejected' ? 'danger' : 'warning'"
+            :text="{ pending: '待审核', approved: '已通过', rejected: '已驳回' }[row.status]"
+          />
         </template>
       </el-table-column>
       <el-table-column prop="createdAt" label="时间" width="160">
@@ -144,15 +144,5 @@ export default {
 }
 </script>
 <style scoped>
-.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
 .filters { display: flex; gap: 10px; align-items: center; }
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: #409eff;
-}
 </style>

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

@@ -28,7 +28,7 @@
           </el-table-column>
           <el-table-column label="发放类型" width="120">
             <template slot-scope="{ row }">
-              <el-tag size="mini" :type="grantTypeTagType(row.grantType)">{{ grantTypeLabel(row.grantType) }}</el-tag>
+              <StatusTag size="mini" :type="grantTypeTagType(row.grantType)" :text="grantTypeLabel(row.grantType)" />
             </template>
           </el-table-column>
           <el-table-column prop="period" label="周期标识" width="120">
@@ -166,18 +166,4 @@ export default {
 
 <style scoped>
 .coupon-grant-log { padding: 20px; }
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: #409eff;
-}
-.sort-tag {
-  margin-left: 8px;
-  cursor: pointer;
-  white-space: nowrap;
-}
 </style>

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

@@ -32,7 +32,7 @@
 
         <el-table-column label="类型" width="110">
           <template slot-scope="{ row }">
-            <el-tag size="mini">{{ typeLabel(row.type) }}</el-tag>
+            <StatusTag size="mini" type="primary" :text="typeLabel(row.type)" />
           </template>
         </el-table-column>
 
@@ -72,9 +72,7 @@
         </el-table-column>
         <el-table-column label="状态" width="80">
           <template slot-scope="{ row }">
-            <el-tag :type="row.status !== 'DISABLED' ? 'success' : 'info'" size="mini">
-              {{ row.status !== 'DISABLED' ? '启用' : '停用' }}
-            </el-tag>
+            <StatusTag size="mini" :type="row.status !== 'DISABLED' ? 'success' : 'info'" :text="row.status !== 'DISABLED' ? '启用' : '停用'" />
           </template>
         </el-table-column>
         <el-table-column label="操作" width="180" fixed="right">
@@ -184,8 +182,8 @@
 
     <el-dialog title="操作成功" :visible.sync="successDialogVisible" width="400px" :close-on-click-modal="false">
       <div style="text-align:center;padding:10px 0">
-        <i class="el-icon-success" style="color:#67C23A;font-size:32px"></i>
-        <p style="margin:12px 0 0;font-size:16px;color:#303133">保存成功</p>
+        <i class="el-icon-success" style="color:var(--adm-success);font-size:32px"></i>
+        <p style="margin:12px 0 0;font-size:16px;color:var(--adm-text-88)">保存成功</p>
       </div>
       <div slot="footer">
         <el-button type="primary" @click="handleContinue">继续添加</el-button>
@@ -489,19 +487,4 @@ export default {
 
 <style scoped>
 .coupon-management { padding: 20px; }
-
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: #409eff;
-}
-.sort-tag {
-  margin-left: 8px;
-  cursor: pointer;
-  white-space: nowrap;
-}
 </style>

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

@@ -1,14 +1,13 @@
 <template>
   <div class="emotion-alert-manage admin-page">
-    <div class="header">
-      <h2>情绪告警管理</h2>
+    <PageHeader title="情绪告警管理">
       <el-input v-model="keyword" placeholder="搜索..." prefix-icon="el-icon-search" style="width:200px" clearable @keyup.enter.native="handleSearch" @clear="handleSearch" />
       <el-radio-group v-model="resolvedFilter" @change="onFilterChange">
         <el-radio-button label="">全部</el-radio-button>
         <el-radio-button label="false">未处理</el-radio-button>
         <el-radio-button label="true">已处理</el-radio-button>
       </el-radio-group>
-      </div>
+    </PageHeader>
         <div class="adm-table-wrap">
 <el-table height="100%" :data="list" v-loading="loading" border stripe>
       <el-table-column prop="id" label="ID" width="70">
@@ -28,7 +27,7 @@
       </el-table-column>
       <el-table-column label="严重程度" width="100">
         <template slot-scope="{ row }">
-          <el-tag :type="severityType(row.severity)">{{ severityLabel(row.severity) }}</el-tag>
+          <StatusTag :type="severityType(row.severity)" :text="severityLabel(row.severity)" />
         </template>
       </el-table-column>
       <el-table-column prop="title" label="标题" width="180" show-overflow-tooltip>
@@ -43,9 +42,7 @@
       </el-table-column>
       <el-table-column label="状态" width="80">
         <template slot-scope="{ row }">
-          <el-tag :type="row.resolved ? 'success' : 'danger'" size="small">
-            {{ row.resolved ? '已处理' : '未处理' }}
-          </el-tag>
+          <StatusTag size="small" :type="row.resolved ? 'success' : 'danger'" :text="row.resolved ? '已处理' : '未处理'" />
         </template>
       </el-table-column>
       <el-table-column label="创建时间" width="160">
@@ -197,30 +194,7 @@ export default {
 .emotion-alert-manage {
   padding: 20px;
 }
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-.header h2 {
-  margin: 0;
-}
 .resolved-text {
-  color: #909399;
-}
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: #409eff;
-}
-.sort-tag {
-  margin-left: 8px;
-  cursor: pointer;
-  white-space: nowrap;
+  color: var(--adm-text-45);
 }
 </style>

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

@@ -1,9 +1,8 @@
 <template>
   <div class="indicator-correlations admin-page">
-    <div class="header">
-      <h2>指标关联配置</h2>
+    <PageHeader title="指标关联配置">
       <el-button type="warning" icon="el-icon-refresh" @click="calibrateAll">一键校准</el-button>
-    </div>
+    </PageHeader>
 
     <div class="adm-table-wrap">
       <el-table height="100%" :data="list" v-loading="loading" border stripe>
@@ -47,7 +46,7 @@
         </el-table-column>
         <el-table-column label="状态" width="80">
           <template slot-scope="{ row }">
-            <el-tag :type="row.status === 1 ? 'success' : 'info'" size="mini">{{ row.status === 1 ? '生效' : '停用' }}</el-tag>
+            <StatusTag size="mini" :type="row.status === 1 ? 'success' : 'info'" :text="row.status === 1 ? '生效' : '停用'" />
           </template>
         </el-table-column>
         <el-table-column label="操作" width="160" fixed="right">
@@ -260,7 +259,5 @@ export default {
 </script>
 
 <style scoped>
-.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
-.header h2 { margin: 0; }
-.tip-text { margin-left: 8px; font-size: 12px; color: #999; }
+.tip-text { margin-left: 8px; font-size: 12px; color: var(--adm-text-45); }
 </style>

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

@@ -1,7 +1,6 @@
 <template>
   <div class="indicator-mappings admin-page">
-    <div class="header">
-      <h2>指标映射管理</h2>
+    <PageHeader title="指标映射管理">
       <div class="filters">
         <el-select v-model="statusFilter" placeholder="状态" clearable style="width: 120px;" @change="listMappings">
           <el-option label="生效" :value="1" />
@@ -11,7 +10,7 @@
         <el-button type="primary" icon="el-icon-search" @click="listMappings">查询</el-button>
         <el-button type="success" icon="el-icon-upload2" @click="openImport">批量导入</el-button>
       </div>
-    </div>
+    </PageHeader>
 
     <div class="adm-table-wrap">
       <el-table height="100%" :data="list" v-loading="loading" border stripe>
@@ -31,7 +30,7 @@
         <el-table-column prop="priority" label="优先级" width="80" />
         <el-table-column label="状态" width="90">
           <template slot-scope="{ row }">
-            <el-tag :type="row.status === 1 ? 'success' : 'warning'" size="mini">{{ row.status === 1 ? '生效' : '待确认' }}</el-tag>
+            <StatusTag size="mini" :type="row.status === 1 ? 'success' : 'warning'" :text="row.status === 1 ? '生效' : '待确认'" />
           </template>
         </el-table-column>
         <el-table-column label="创建时间" width="160">
@@ -234,7 +233,5 @@ export default {
 </script>
 
 <style scoped>
-.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
-.header h2 { margin: 0; }
 .filters { display: flex; align-items: center; gap: 12px; }
 </style>

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

@@ -18,16 +18,14 @@
         <el-table-column prop="description" label="核心特质" show-overflow-tooltip />
         <el-table-column label="启用" width="80" align="center">
           <template slot-scope="scope">
-            <el-tag :type="scope.row.isActive === 1 ? 'success' : 'info'" size="mini">
-              {{ scope.row.isActive === 1 ? '启用' : '停用' }}
-            </el-tag>
+            <StatusTag size="mini" :type="scope.row.isActive === 1 ? 'success' : 'info'" :text="scope.row.isActive === 1 ? '启用' : '停用'" />
           </template>
         </el-table-column>
         <el-table-column label="操作" width="160" align="center" fixed="right">
           <template slot-scope="scope">
             <el-button type="text" size="mini" @click="openEdit(scope.row)">编辑</el-button>
             <el-popconfirm title="确认删除该画像？" @confirm="doDelete(scope.row)">
-              <el-button slot="reference" type="text" size="mini" style="color:#F56C6C">删除</el-button>
+              <el-button slot="reference" type="text" size="mini" style="color:var(--adm-error-text)">删除</el-button>
             </el-popconfirm>
           </template>
         </el-table-column>