Просмотр исходного кода

style(admin): B-24 活动/测评页面美化

- Activities/ActivityRegistrationReview/ActivityReview: 状态 el-tag 迁移 StatusTag(含报名状态三元)、#999→--adm-text-45、删 scoped/非 scoped sort CSS 重复定义
- Assessment/AssessmentAssign/AssessmentOrders/AssessmentProducts: 状态/类型 el-tag 迁移 StatusTag(appointmentType 初测/复测→primary)、#999→--adm-text-45、删死 CSS(.card-title/.admin-page-header/.sort-tag)及 sort CSS 重复定义
- ActivityRegistrationReview 页头 h2 区 → PageHeader
liaoxg 3 недель назад
Родитель
Сommit
d8b391dfe3

+ 5 - 41
cfc-web/src/views/admin/Activities.vue

@@ -68,7 +68,7 @@
         <el-table-column label="封面" width="80">
         <el-table-column label="封面" width="80">
           <template slot-scope="{ row }">
           <template slot-scope="{ row }">
             <img v-if="row.coverImage" :src="row.coverImage" style="width:40px;height:40px;object-fit:cover;border-radius:4px;" />
             <img v-if="row.coverImage" :src="row.coverImage" style="width:40px;height:40px;object-fit:cover;border-radius:4px;" />
-            <span v-else style="color:#999">无</span>
+            <span v-else style="color:var(--adm-text-45)">无</span>
           </template>
           </template>
         </el-table-column>
         </el-table-column>
         <el-table-column prop="title" label="活动标题" min-width="160" show-overflow-tooltip>
         <el-table-column prop="title" label="活动标题" min-width="160" show-overflow-tooltip>
@@ -105,9 +105,7 @@
         </el-table-column>
         </el-table-column>
         <el-table-column label="状态" width="100">
         <el-table-column label="状态" width="100">
           <template slot-scope="{ row }">
           <template slot-scope="{ row }">
-            <el-tag :type="statusType(row.status)" size="mini">
-              {{ statusLabel(row.status) }}
-            </el-tag>
+            <StatusTag :type="statusType(row.status)" size="mini" :text="statusLabel(row.status)" />
           </template>
           </template>
         </el-table-column>
         </el-table-column>
         <el-table-column prop="startTime" label="开始时间" width="170">
         <el-table-column prop="startTime" label="开始时间" width="170">
@@ -171,9 +169,7 @@
         <el-table-column prop="registrantName" label="报名人" width="100" />
         <el-table-column prop="registrantName" label="报名人" width="100" />
         <el-table-column label="状态" width="90">
         <el-table-column label="状态" width="90">
           <template slot-scope="{ row }">
           <template slot-scope="{ row }">
-            <el-tag :type="row.status === 'approved' ? 'success' : row.status === 'rejected' ? 'danger' : 'warning'">
-              {{ row.status === 'approved' ? '已通过' : row.status === 'rejected' ? '已拒绝' : '待审核' }}
-            </el-tag>
+            <StatusTag :type="row.status === 'approved' ? 'success' : row.status === 'rejected' ? 'danger' : 'warning'" :text="row.status === 'approved' ? '已通过' : row.status === 'rejected' ? '已拒绝' : '待审核'" />
           </template>
           </template>
         </el-table-column>
         </el-table-column>
         <el-table-column prop="registeredAt" label="报名时间" width="160">
         <el-table-column prop="registeredAt" label="报名时间" width="160">
@@ -185,10 +181,10 @@
           <template slot-scope="{ row }">
           <template slot-scope="{ row }">
             <el-button v-if="row.status === 'pending'" type="success" size="small" @click="handleRegApprove(row)">通过</el-button>
             <el-button v-if="row.status === 'pending'" type="success" size="small" @click="handleRegApprove(row)">通过</el-button>
             <el-button v-if="row.status === 'pending'" type="danger" size="small" @click="handleRegReject(row)">拒绝</el-button>
             <el-button v-if="row.status === 'pending'" type="danger" size="small" @click="handleRegReject(row)">拒绝</el-button>
-            <span v-else style="color: #999;">已处理</span>
+            <span v-else style="color: var(--adm-text-45);">已处理</span>
           </template>
           </template>
         </el-table-column>
         </el-table-column>
-      <p v-if="!registrations.length && !regLoading" style="text-align:center;color:#999;">暂无报名记录</p>
+      <p v-if="!registrations.length && !regLoading" style="text-align:center;color:var(--adm-text-45);">暂无报名记录</p>
     </el-dialog>
     </el-dialog>
   
   
   </el-table>
   </el-table>
@@ -452,39 +448,7 @@ export default {
 .activities >>> .el-table__body-wrapper {
 .activities >>> .el-table__body-wrapper {
   overflow-y: auto;
   overflow-y: auto;
 }
 }
-.admin-page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 12px;
-}
-.admin-page-title {
-  font-size: 18px;
-  font-weight: bold;
-}
-.admin-page-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
 .header-search {
 .header-search {
   width: 220px;
   width: 220px;
 }
 }
-
-.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>
 </style>

+ 4 - 20
cfc-web/src/views/admin/ActivityRegistrationReview.vue

@@ -1,7 +1,6 @@
 <template>
 <template>
   <div class="registration-review admin-page">
   <div class="registration-review admin-page">
-    <div class="header">
-      <h2>活动报名审核</h2>
+    <PageHeader title="活动报名审核">
       <div class="filters">
       <div class="filters">
         <el-select v-model="activityId" placeholder="选择活动" @change="loadList" style="width: 200px;" clearable>
         <el-select v-model="activityId" placeholder="选择活动" @change="loadList" style="width: 200px;" clearable>
           <el-option v-for="a in activityList" :key="a.id" :label="a.title" :value="a.id" />
           <el-option v-for="a in activityList" :key="a.id" :label="a.title" :value="a.id" />
@@ -14,7 +13,7 @@
           <el-option label="已拒绝" value="rejected" />
           <el-option label="已拒绝" value="rejected" />
         </el-select>
         </el-select>
       </div>
       </div>
-    </div>
+    </PageHeader>
 
 
     <div class="adm-table-wrap">
     <div class="adm-table-wrap">
       <el-table height="100%" :data="filteredList" v-loading="loading" border stripe>
       <el-table height="100%" :data="filteredList" v-loading="loading" border stripe>
@@ -38,9 +37,7 @@
           <span class="sort-header" @click.stop="onSortClick('status', $event)">状态<span v-if="sortIndex('status') !== null" class="sort-index" :class="sortClass('status') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('status') }}</span>{{ sortIcon('status') }}</span>
           <span class="sort-header" @click.stop="onSortClick('status', $event)">状态<span v-if="sortIndex('status') !== null" class="sort-index" :class="sortClass('status') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('status') }}</span>{{ sortIcon('status') }}</span>
         </template>
         </template>
         <template slot-scope="{ row }">
         <template slot-scope="{ row }">
-          <el-tag :type="row.status === 'approved' ? 'success' : row.status === 'rejected' ? 'danger' : 'warning'">
-            {{ row.status === 'approved' ? '已通过' : row.status === 'rejected' ? '已拒绝' : '待审核' }}
-          </el-tag>
+          <StatusTag :type="row.status === 'approved' ? 'success' : row.status === 'rejected' ? 'danger' : 'warning'" :text="row.status === 'approved' ? '已通过' : row.status === 'rejected' ? '已拒绝' : '待审核'" />
         </template>
         </template>
       </el-table-column>
       </el-table-column>
       <el-table-column prop="registeredAt" label="报名时间" width="160">
       <el-table-column prop="registeredAt" label="报名时间" width="160">
@@ -55,7 +52,7 @@
         <template slot-scope="{ row }">
         <template slot-scope="{ row }">
           <el-button v-if="row.status === 'pending'" type="success" size="mini" @click="handleApprove(row)">通过</el-button>
           <el-button v-if="row.status === 'pending'" type="success" size="mini" @click="handleApprove(row)">通过</el-button>
           <el-button v-if="row.status === 'pending'" type="danger" size="mini" @click="showRejectDialog(row)">拒绝</el-button>
           <el-button v-if="row.status === 'pending'" type="danger" size="mini" @click="showRejectDialog(row)">拒绝</el-button>
-          <span v-else style="color: #999;">已处理</span>
+          <span v-else style="color: var(--adm-text-45);">已处理</span>
         </template>
         </template>
       </el-table-column>
       </el-table-column>
     </el-table>
     </el-table>
@@ -164,18 +161,5 @@ export default {
 </script>
 </script>
 
 
 <style scoped>
 <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; }
 .filters { display: flex; align-items: center; gap: 12px; }
 </style>
 </style>
-<style>
-.sort-header { cursor: pointer; user-select: none; }
-.sort-header:hover { color: #409EFF; }
-.sort-asc-badge, .sort-desc-badge {
-  display: inline-block; font-size: 10px; margin-left: 2px;
-  width: 14px; height: 14px; line-height: 14px; text-align: center;
-  border-radius: 3px; color: #fff; vertical-align: middle;
-}
-.sort-asc-badge { background: #409EFF; }
-.sort-desc-badge { background: #E6A23C; }
-</style>

+ 1 - 12
cfc-web/src/views/admin/ActivityReview.vue

@@ -51,7 +51,7 @@
           <StatusTag v-if="row.status === 'draft'" type="warning" text="待审核" />
           <StatusTag v-if="row.status === 'draft'" type="warning" text="待审核" />
           <StatusTag v-else-if="row.status === 'published'" type="success" text="已发布" />
           <StatusTag v-else-if="row.status === 'published'" type="success" text="已发布" />
           <StatusTag v-else-if="row.status === 'rejected'" type="danger" text="已驳回" />
           <StatusTag v-else-if="row.status === 'rejected'" type="danger" text="已驳回" />
-          <el-tag v-else type="info">{{ row.status }}</el-tag>
+          <StatusTag v-else type="info" :text="row.status" />
         </template>
         </template>
       </el-table-column>
       </el-table-column>
       <el-table-column label="操作" width="200" fixed="right">
       <el-table-column label="操作" width="200" fixed="right">
@@ -201,14 +201,3 @@ export default {
   color: #ccc;
   color: #ccc;
 }
 }
 </style>
 </style>
-<style>
-.sort-header { cursor: pointer; user-select: none; }
-.sort-header:hover { color: #409EFF; }
-.sort-asc-badge, .sort-desc-badge {
-  display: inline-block; font-size: 10px; margin-left: 2px;
-  width: 14px; height: 14px; line-height: 14px; text-align: center;
-  border-radius: 3px; color: #fff; vertical-align: middle;
-}
-.sort-asc-badge { background: #409EFF; }
-.sort-desc-badge { background: #E6A23C; }
-</style>

+ 2 - 10
cfc-web/src/views/admin/Assessment.vue

@@ -33,9 +33,7 @@
         <el-table-column prop="content" label="内容" show-overflow-tooltip />
         <el-table-column prop="content" label="内容" show-overflow-tooltip />
         <el-table-column prop="status" label="状态" width="80">
         <el-table-column prop="status" label="状态" width="80">
           <template slot-scope="scope">
           <template slot-scope="scope">
-            <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'" size="small">
-              {{ scope.row.status === 'active' ? '启用' : '停用' }}
-            </el-tag>
+            <StatusTag :type="scope.row.status === 'active' ? 'success' : 'info'" size="small" :text="scope.row.status === 'active' ? '启用' : '停用'" />
           </template>
           </template>
         </el-table-column>
         </el-table-column>
         <el-table-column prop="createdAt" label="创建时间" width="160" />
         <el-table-column prop="createdAt" label="创建时间" width="160" />
@@ -206,15 +204,9 @@ export default {
   margin-bottom: 20px;
   margin-bottom: 20px;
 }
 }
 
 
-.card-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #303133;
-}
-
 .form-tip {
 .form-tip {
   margin-left: 10px;
   margin-left: 10px;
-  color: #909399;
+  color: var(--adm-text-45);
 }
 }
 
 
 .materials-card ::v-deep .el-card__body {
 .materials-card ::v-deep .el-card__body {

+ 1 - 17
cfc-web/src/views/admin/AssessmentAssign.vue

@@ -28,7 +28,7 @@
           </el-table-column>
           </el-table-column>
           <el-table-column label="类型" width="80">
           <el-table-column label="类型" width="80">
             <template slot-scope="{ row }">
             <template slot-scope="{ row }">
-              <el-tag size="mini">{{ row.appointmentType === 'initial' ? '初测' : row.appointmentType === 'retest' ? '复测' : row.appointmentType || '-' }}</el-tag>
+              <StatusTag type="primary" size="mini" :text="row.appointmentType === 'initial' ? '初测' : row.appointmentType === 'retest' ? '复测' : (row.appointmentType || '-')" />
             </template>
             </template>
           </el-table-column>
           </el-table-column>
           <el-table-column label="备注" min-width="160" show-overflow-tooltip>
           <el-table-column label="备注" min-width="160" show-overflow-tooltip>
@@ -189,24 +189,8 @@ export default {
 </script>
 </script>
 
 
 <style scoped>
 <style scoped>
-.assessment-assign .admin-page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
 .pagination-wrap {
 .pagination-wrap {
   margin-top: 20px;
   margin-top: 20px;
   text-align: right;
   text-align: right;
 }
 }
-</style>
-<style>
-.sort-header { cursor: pointer; user-select: none; }
-.sort-header:hover { color: #409EFF; }
-.sort-asc-badge, .sort-desc-badge {
-  display: inline-block; font-size: 10px; margin-left: 2px;
-  width: 14px; height: 14px; line-height: 14px; text-align: center;
-  border-radius: 3px; color: #fff; vertical-align: middle;
-}
-.sort-asc-badge { background: #409EFF; }
-.sort-desc-badge { background: #E6A23C; }
 </style>
 </style>

+ 2 - 25
cfc-web/src/views/admin/AssessmentOrders.vue

@@ -54,7 +54,7 @@
         </el-table-column>
         </el-table-column>
         <el-table-column label="状态" width="100">
         <el-table-column label="状态" width="100">
           <template slot-scope="{ row }">
           <template slot-scope="{ row }">
-            <el-tag :type="statusType(row.status)" size="mini">{{ statusLabel(row.status) }}</el-tag>
+            <StatusTag :type="statusType(row.status)" size="mini" :text="statusLabel(row.status)" />
           </template>
           </template>
         </el-table-column>
         </el-table-column>
         <el-table-column label="创建时间" width="155">
         <el-table-column label="创建时间" width="155">
@@ -99,7 +99,7 @@
           <el-descriptions-item label="预约日期">{{ currentOrder.appointmentDate || '-' }}</el-descriptions-item>
           <el-descriptions-item label="预约日期">{{ currentOrder.appointmentDate || '-' }}</el-descriptions-item>
           <el-descriptions-item label="当前规划师">
           <el-descriptions-item label="当前规划师">
             <span v-if="currentOrder.guideName">{{ currentOrder.guideName }}</span>
             <span v-if="currentOrder.guideName">{{ currentOrder.guideName }}</span>
-            <span v-else style="color: #999;">未分配</span>
+            <span v-else style="color: var(--adm-text-45);">未分配</span>
           </el-descriptions-item>
           </el-descriptions-item>
         </el-descriptions>
         </el-descriptions>
 
 
@@ -248,13 +248,6 @@ export default {
 </script>
 </script>
 
 
 <style scoped>
 <style scoped>
-.assessment-orders .admin-page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 10px;
-}
 .filter-bar {
 .filter-bar {
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
@@ -263,20 +256,4 @@ export default {
   margin-top: 20px;
   margin-top: 20px;
   text-align: right;
   text-align: right;
 }
 }
-.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>
 </style>

+ 4 - 18
cfc-web/src/views/admin/AssessmentProducts.vue

@@ -38,15 +38,13 @@
           <template slot-scope="{ row }">
           <template slot-scope="{ row }">
             <img v-if="row.coverImage" :src="row.coverImage" class="product-thumb"
             <img v-if="row.coverImage" :src="row.coverImage" class="product-thumb"
                  @click="previewImage(row.coverImage)" />
                  @click="previewImage(row.coverImage)" />
-            <span v-else style="color:#999">-</span>
+            <span v-else style="color:var(--adm-text-45)">-</span>
           </template>
           </template>
         </el-table-column>
         </el-table-column>
         <el-table-column prop="name" label="商品名称" min-width="160" show-overflow-tooltip />
         <el-table-column prop="name" label="商品名称" min-width="160" show-overflow-tooltip />
         <el-table-column label="测评类型" width="90">
         <el-table-column label="测评类型" width="90">
           <template slot-scope="{ row }">
           <template slot-scope="{ row }">
-            <el-tag :type="row.assessmentType === 'bundle' ? 'warning' : 'primary'" size="mini">
-              {{ row.assessmentType === 'bundle' ? '组合' : '单包' }}
-            </el-tag>
+            <StatusTag :type="row.assessmentType === 'bundle' ? 'warning' : 'primary'" size="mini" :text="row.assessmentType === 'bundle' ? '组合' : '单包'" />
           </template>
           </template>
         </el-table-column>
         </el-table-column>
         <el-table-column label="次数" width="70" prop="totalSessions" />
         <el-table-column label="次数" width="70" prop="totalSessions" />
@@ -58,7 +56,7 @@
         </el-table-column>
         </el-table-column>
         <el-table-column label="状态" width="90">
         <el-table-column label="状态" width="90">
           <template slot-scope="{ row }">
           <template slot-scope="{ row }">
-            <el-tag :type="statusType(row.status)" size="mini">{{ statusLabel(row.status) }}</el-tag>
+            <StatusTag :type="statusType(row.status)" size="mini" :text="statusLabel(row.status)" />
           </template>
           </template>
         </el-table-column>
         </el-table-column>
         <el-table-column label="操作" width="160" fixed="right">
         <el-table-column label="操作" width="160" fixed="right">
@@ -97,7 +95,7 @@
         <el-descriptions-item label="规划师范围">{{ detail.guideScope }}</el-descriptions-item>
         <el-descriptions-item label="规划师范围">{{ detail.guideScope }}</el-descriptions-item>
         <el-descriptions-item label="价格(元)">{{ formatPriceWithSymbol(detail.price || 0) }}</el-descriptions-item>
         <el-descriptions-item label="价格(元)">{{ formatPriceWithSymbol(detail.price || 0) }}</el-descriptions-item>
         <el-descriptions-item label="状态">
         <el-descriptions-item label="状态">
-          <el-tag :type="statusType(detail.status)" size="mini">{{ statusLabel(detail.status) }}</el-tag>
+          <StatusTag :type="statusType(detail.status)" size="mini" :text="statusLabel(detail.status)" />
         </el-descriptions-item>
         </el-descriptions-item>
       </el-descriptions>
       </el-descriptions>
     </el-dialog>
     </el-dialog>
@@ -207,20 +205,8 @@ export default {
 
 
 <style scoped>
 <style scoped>
 .assessment-products { padding: 20px; }
 .assessment-products { padding: 20px; }
-.admin-page-header { display: flex; justify-content: space-between; align-items: center; }
 .admin-page-actions { display: flex; gap: 8px; align-items: center; }
 .admin-page-actions { display: flex; gap: 8px; align-items: center; }
 .header-search { width: 200px; }
 .header-search { width: 200px; }
 .product-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; cursor: pointer; }
 .product-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; cursor: pointer; }
 .pagination-wrap { margin-top: 16px; text-align: right; }
 .pagination-wrap { margin-top: 16px; text-align: right; }
 </style>
 </style>
-<style>
-.sort-header { cursor: pointer; user-select: none; }
-.sort-header:hover { color: #409EFF; }
-.sort-asc-badge, .sort-desc-badge {
-  display: inline-block; font-size: 10px; margin-left: 2px;
-  width: 14px; height: 14px; line-height: 14px; text-align: center;
-  border-radius: 3px; color: #fff; vertical-align: middle;
-}
-.sort-asc-badge { background: #409EFF; }
-.sort-desc-badge { background: #E6A23C; }
-</style>