style(admin): B-34 余下 admin 页令牌化 + SysConfig/ProblemDomain 等 8 页删 sort 死样式 + ProductSkuEditor/VectorKnowledgeBase StatusTag

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

@@ -65,7 +65,7 @@
     <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:var(--adm-success);font-size:32px"></i>
-        <p style="margin:12px 0 0;font-size:16px;color:#303133">保存成功</p>
+        <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>
@@ -198,13 +198,4 @@ export default {
 .knowledge-tag {
   padding: 20px;
 }
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: var(--adm-primary);
-}
 </style>

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

@@ -124,7 +124,7 @@
             <div
               v-for="(step, idx) in flowSteps"
               :key="idx"
-              style="margin-bottom:8px;padding:8px;border:1px solid #eee;border-radius:4px;"
+              style="margin-bottom:8px;padding:8px;border:1px solid var(--adm-border-split);border-radius:4px;"
             >
               <el-input v-model="step.title" placeholder="步骤标题" style="width:40%;margin-right:8px" size="small" />
               <el-input v-model="step.desc" placeholder="步骤描述" style="width:40%;margin-right:8px" size="small" />
@@ -274,19 +274,3 @@ export default {
     }
   }
 }
-<style scoped>
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: var(--adm-primary);
-}
-.sort-tag {
-  margin-left: 8px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-</style>

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

@@ -1413,12 +1413,6 @@ async loadGiftRule(productId) {
   padding: 20px 24px;
   flex-shrink: 0;
 }
-.product-edit /deep/ .admin-page-title {
-  font-size: 20px;
-  font-weight: 600;
-  line-height: 1.4;
-  color: rgba(0, 0, 0, 0.88);
-}
 .product-edit /deep/ .el-form-item__label {
   font-weight: 500;
   color: rgba(0, 0, 0, 0.65);

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

@@ -101,13 +101,13 @@
           <el-select v-model="addForm.productId" filterable placeholder="搜索商品" style="width: 100%;">
             <el-option v-for="p in productOptions" :key="p.id" :label="p.name" :value="p.id">
               <span style="float:left">{{ p.name }}</span>
-              <span style="float:right;color:#999;font-size:12px;">{{ p.price != null ? (p.price/100).toFixed(2) + '元' : '' }}</span>
+              <span style="float:right;color:var(--adm-text-45);font-size:12px;">{{ p.price != null ? (p.price/100).toFixed(2) + '元' : '' }}</span>
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="P点(bps)">
           <el-input-number v-model="addForm.ppoint" :min="0" :max="10000" :step="100" style="width: 100%;" />
-          <div style="color:#999;font-size:12px;margin-top:4px;">10000 bps = 100%，例：1000 bps = 10%</div>
+          <div style="color:var(--adm-text-45);font-size:12px;margin-top:4px;">10000 bps = 100%，例：1000 bps = 10%</div>
         </el-form-item>
         <el-form-item label="生效日期">
           <el-date-picker v-model="addForm.startDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 100%;" />
@@ -261,18 +261,4 @@ export default {
   border-radius: 4px;
 }
 
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: var(--adm-primary);
-}
-.sort-tag {
-  margin-left: 8px;
-  cursor: pointer;
-  white-space: nowrap;
-}
 </style>

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

@@ -180,13 +180,4 @@ export default {
   object-fit: cover;
   border-radius: 4px;
 }
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: var(--adm-primary);
-}
 </style>

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

@@ -40,7 +40,7 @@
                 class="product-thumb"
                 @click="previewImage(row.coverImage)"
               />
-              <span v-else style="color:#999">-</span>
+              <span v-else style="color:var(--adm-text-45)">-</span>
             </template>
           </el-table-column>
           <el-table-column prop="name" label="商品名称" min-width="150" show-overflow-tooltip>
@@ -255,13 +255,4 @@ export default {
 .header-search {
   width: 180px;
 }
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: var(--adm-primary);
-}
 </style>

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

@@ -57,7 +57,7 @@
         <el-table-column label="操作" width="160" align="center">
           <template slot-scope="scope">
             <el-button type="text" size="mini" @click="openEdit(scope.row)">编辑</el-button>
-            <el-button type="text" size="mini" style="color:#f56c6c" @click="handleDelete(scope.row)">删除</el-button>
+            <el-button type="text" size="mini" style="color:var(--adm-error-text)" @click="handleDelete(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -90,7 +90,7 @@
         </el-form-item>
         <el-form-item label="题目">
           <div style="width:100%">
-            <div v-for="(q, qIdx) in form.questions" :key="qIdx" style="margin-bottom:12px;padding:10px;border:1px solid #eee;border-radius:4px;">
+            <div v-for="(q, qIdx) in form.questions" :key="qIdx" style="margin-bottom:12px;padding:10px;border:1px solid var(--adm-border-split);border-radius:4px;">
               <el-input v-model="q.text" placeholder="题目文本" style="margin-bottom:8px" />
               <el-tag
                 v-for="(opt, oIdx) in q.options"
@@ -109,7 +109,7 @@
                 @blur="addOption(q, qIdx)"
               />
               <el-button type="text" size="mini" @click="addOptionInput(qIdx)">+ 添加选项</el-button>
-              <el-button type="text" size="mini" style="color:#f56c6c" @click="removeQuestion(qIdx)">删除题目</el-button>
+              <el-button type="text" size="mini" style="color:var(--adm-error-text)" @click="removeQuestion(qIdx)">删除题目</el-button>
             </div>
             <el-button type="primary" size="mini" plain @click="addQuestion">+ 添加题目</el-button>
           </div>
@@ -136,7 +136,7 @@
           <el-input v-model="aiForm.topic" placeholder="如：饮食习惯、睡眠质量" />
         </el-form-item>
       </el-form>
-      <div v-if="aiResult" style="margin-top:12px;padding:10px;background:#f5f5f5;border-radius:4px;max-height:300px;overflow-y:auto;">
+      <div v-if="aiResult" style="margin-top:12px;padding:10px;background:var(--adm-bg-header);border-radius:4px;max-height:300px;overflow-y:auto;">
         <pre>{{ aiResult }}</pre>
       </div>
       <span slot="footer">
@@ -305,31 +305,4 @@ export default {
     }
   }
 }
-</script>
-
-<style scoped>
-.admin-page-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-.admin-page-title {
-  font-size: 16px;
-  font-weight: bold;
-  margin-right: auto;
-}
-.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>
+</script>

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

@@ -1,13 +1,11 @@
 <template>
   <div class="sys-config admin-page">
-<div class="header admin-page-header">
-      <h2 class="admin-page-title">系统配置</h2>
-      <div class="flex items-center gap-sm">
+    <el-card>
+      <PageHeader slot="header" title="系统配置">
         <el-input v-model="keyword" placeholder="搜索配置..." prefix-icon="el-icon-search" clearable @keyup.enter.native="handleSearch" @clear="handleSearch" />
         <el-button type="primary" size="small" @click="addConfig" icon="el-icon-plus">新增配置</el-button>
-      </div>
-    </div>
-        <div class="adm-table-wrap">
+      </PageHeader>
+      <div class="adm-table-wrap">
 <el-table :data="list" v-loading="loading" border stripe height="100%">
       <el-table-column prop="configKey" label="配置键" min-width="200" show-overflow-tooltip>
         <template slot="header">
@@ -35,17 +33,18 @@
         </template>
       </el-table-column>
     </el-table>
-    </div>
+      </div>
 
-    <el-pagination
-      @size-change="onSizeChange"
-      @current-change="onPageChange"
-      :current-page="page"
-      :page-size="size"
-      :total="total"
-      layout="total, prev, pager, next"
-      class="pagination-wrap"
-    />
+      <el-pagination
+        @size-change="onSizeChange"
+        @current-change="onPageChange"
+        :current-page="page"
+        :page-size="size"
+        :total="total"
+        layout="total, prev, pager, next"
+        class="pagination-wrap"
+      />
+    </el-card>
 
     <!-- 编辑弹窗 -->
     <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px" :close-on-click-modal="false">
@@ -204,13 +203,4 @@ export default {
 .sys-config {
   padding: 20px;
 }
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: #409eff;
-}
 </style>

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

@@ -46,7 +46,7 @@
         <el-table-column prop="id" label="ID" width="200" show-overflow-tooltip />
         <el-table-column prop="source" label="来源" width="120">
           <template slot-scope="{ row }">
-            <el-tag :type="sourceTagType(row.source)" size="mini">{{ sourceLabel(row.source) }}</el-tag>
+            <StatusTag :type="sourceTagType(row.source)" :text="sourceLabel(row.source)" size="mini" />
           </template>
         </el-table-column>
         <el-table-column prop="title" label="标题" min-width="160" show-overflow-tooltip>

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

@@ -110,8 +110,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>
@@ -243,19 +243,4 @@ export default {
 }
 </script>
 
-<style scoped>
-.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/components/ProductSkuEditor.vue

@@ -27,14 +27,12 @@
       <el-table-column label="规格图片" width="80">
         <template slot-scope="{ row }">
           <img v-if="row.image" :src="row.image" 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>
       </el-table-column>
       <el-table-column label="启用" width="70">
         <template slot-scope="{ row }">
-          <el-tag :type="row.enabled ? 'success' : 'info'" size="mini">
-            {{ row.enabled ? '是' : '否' }}
-          </el-tag>
+          <StatusTag :type="row.enabled ? 'success' : 'info'" :text="row.enabled ? '是' : '否'" size="mini" />
         </template>
       </el-table-column>
       <el-table-column label="操作" width="120" fixed="right">
@@ -60,11 +58,11 @@
           </el-form-item>
           <el-form-item label="关联商品">
             <el-button size="small" @click="openProductPicker">选择商品</el-button>
-            <div v-if="skuForm.linkedProductId" style="margin-top:8px;display:flex;align-items:center;gap:10px;padding:8px;background:#f5f7fa;border-radius:4px;">
+            <div v-if="skuForm.linkedProductId" style="margin-top:8px;display:flex;align-items:center;gap:10px;padding:8px;background:var(--adm-bg-header);border-radius:4px;">
               <img v-if="skuForm.linkedProductImage" :src="skuForm.linkedProductImage" style="width:50px;height:50px;object-fit:cover;border-radius:4px;" />
               <div>
                 <div>{{ skuForm.linkedProductName }}</div>
-                <div style="font-size:12px;color:#999;">¥{{ skuForm.linkedProductPrice ? (skuForm.linkedProductPrice/100).toFixed(2) : '0.00' }} | 库存 {{ skuForm.linkedProductStock }}</div>
+                <div style="font-size:12px;color:var(--adm-text-45);">¥{{ skuForm.linkedProductPrice ? (skuForm.linkedProductPrice/100).toFixed(2) : '0.00' }} | 库存 {{ skuForm.linkedProductStock }}</div>
               </div>
               <el-button size="mini" type="text" @click="openProductPicker">更换</el-button>
             </div>
@@ -509,7 +507,7 @@ const baseURL = process.env.VUE_APP_BASE_API || ''
 .sku-title {
   font-size: 14px;
   font-weight: 600;
-  color: #303133;
+  color: var(--adm-text-88);
 }
 .sku-image-row {
   display: flex;
@@ -521,6 +519,6 @@ const baseURL = process.env.VUE_APP_BASE_API || ''
   height: 60px;
   object-fit: cover;
   border-radius: 4px;
-  border: 1px solid #ddd;
+  border: 1px solid var(--adm-border-base);
 }
 </style>