style(admin): B-20 迁移 EnergySandbox/unified-knowledge/GuideConfig/HealthReportEdit/ProxyReportUpload/knowledge/OrderDetail

- 页头统一 PageHeader：EnergySandbox 五维能量沙盘、unified-knowledge 统一知识库（槽内保留模块计数 chip）、GuideConfig 引导配置（subtitle 接管 desc）、ProxyReportUpload 代传报告上传、OrderDetail 订单详情（back 回订单管理）
- 分区头统一 SectionTitle：EnergySandbox 家庭能量总览/家庭成员数据（搜索框入 extra slot）、GuideConfig 基本配置/步骤配置、HealthReportEdit 基本信息/健康指标/肠道菌群/疾病风险评估（添加按钮入 extra slot）、ProxyReportUpload 解析结果预览/AI解读结果/代上传历史、knowledge 维度筛选/标签筛选、OrderDetail 基本信息/收货信息/退款信息
- 状态标签统一 StatusTag：HealthReportEdit typeTag、ProxyReportUpload 预览绑定态/表格报告类型（getTypeTag）、knowledge 标签筛选 chip（primary 选中态品牌蓝）、OrderDetail statusType（pending_receipt ''→primary）
- CSS 令牌化 + 删死 CSS：EnergySandbox metric-card(#f8fafc/#ddd)/metric-name(#303133)、unified-knowledge module-key/json-hint(#909399)/module-name(#303133)/danger-text(#f56c6c)、GuideConfig form-tip/field-label(#909399)、ProxyReportUpload analysis-content(#333)、knowledge full-detail-text(#f5f7fa/#e4e7ed)、OrderDetail 空态(#999)；删除各页 card-header/card-title/page-header 等废弃规则

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

@@ -1,25 +1,23 @@
 <template>
   <div class="page-container admin-page">
     <el-card>
-      <div slot="header">
-        <span>五维能量沙盘</span>
+      <PageHeader slot="header" title="五维能量沙盘" subtitle="展示家庭在身、心、智、行、富五个维度的能量评分及综合指数">
         <el-button
           type="primary"
           size="small"
-          style="float: right"
+          icon="el-icon-refresh"
           @click="loadData"
           :loading="loading"
         >
           刷新
         </el-button>
-      </div>
-      <p class="page-desc">展示家庭在身、心、智、行、富五个维度的能量评分及综合指数</p>
+      </PageHeader>
     </el-card>
 
     <!-- 家庭能量总览 -->
     <el-card class="section-card" v-loading="loading">
       <div slot="header">
-        <span>家庭能量总览</span>
+        <SectionTitle title="家庭能量总览" />
       </div>
       <el-row :gutter="16">
         <el-col :span="4" v-for="item in dimensionList" :key="item.key">
@@ -38,8 +36,9 @@
     <!-- 家庭成员数据 -->
     <el-card class="section-card" v-loading="loading">
       <div slot="header">
-        <span>家庭成员数据</span>
-        <el-input v-model="memberKeyword" placeholder="搜索成员姓名..." prefix-icon="el-icon-search" size="small" clearable style="float: right; width: 200px;" />
+        <SectionTitle title="家庭成员数据">
+          <el-input v-model="memberKeyword" placeholder="搜索成员姓名..." prefix-icon="el-icon-search" size="small" clearable style="width: 200px;" />
+        </SectionTitle>
       </div>
             <div class="adm-table-wrap">
 <el-table :data="filteredMembers" border style="width: 100%" height="100%">
@@ -153,20 +152,14 @@ export default {
 </script>
 
 <style scoped>
-.page-desc {
-  color: #909399;
-  font-size: 13px;
-  margin: 0;
-}
-
 .section-card {
   margin-top: 16px;
 }
 
 .metric-card {
-  background: #f8fafc;
+  background: var(--adm-bg-header);
   border-radius: 8px;
-  border-top: 3px solid #ddd;
+  border-top: 3px solid var(--adm-border-base);
   padding: 16px 8px;
   text-align: center;
 }
@@ -174,7 +167,7 @@ export default {
 .metric-name {
   font-size: 16px;
   font-weight: 600;
-  color: #303133;
+  color: var(--adm-text-88);
   margin-bottom: 10px;
 }
 

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

@@ -1,15 +1,12 @@
 <template>
   <div class="guide-config admin-page">
-    <div class="header admin-page-header">
-      <h2 class="admin-page-title">引导配置</h2>
-      <div class="admin-page-desc">配置微信小程序引导遮罩的启用状态、展示位置与步骤内容</div>
-    </div>
+    <PageHeader title="引导配置" subtitle="配置微信小程序引导遮罩的启用状态、展示位置与步骤内容" />
 
     <div class="config-body" v-loading="loading">
       <!-- 基本配置 -->
       <el-card shadow="never" class="config-block">
-        <div slot="header" class="block-header">
-          <span class="block-title">基本配置</span>
+        <div slot="header">
+          <SectionTitle title="基本配置" />
         </div>
         <el-form :model="form" label-width="110px">
           <el-form-item label="启用引导">
@@ -30,8 +27,8 @@
 
       <!-- 步骤配置 -->
       <el-card shadow="never" class="config-block">
-        <div slot="header" class="block-header">
-          <span class="block-title">步骤配置</span>
+        <div slot="header">
+          <SectionTitle title="步骤配置" />
         </div>
         <el-tabs v-model="activeTab">
           <el-tab-pane label="家长端" name="parent">
@@ -209,11 +206,6 @@ export default {
 .guide-config {
   padding: 20px;
 }
-.admin-page-desc {
-  margin-top: 4px;
-  font-size: 13px;
-  color: #909399;
-}
 .config-body {
   max-width: 1200px;
   margin: 0 auto;
@@ -221,20 +213,13 @@ export default {
 .config-block {
   margin-bottom: 20px;
 }
-.block-header {
-  display: flex;
-  align-items: center;
-}
-.block-title {
-  font-weight: 600;
-}
 .version-input {
   max-width: 320px;
 }
 .form-tip {
   margin-top: 6px;
   font-size: 12px;
-  color: #909399;
+  color: var(--adm-text-45);
   line-height: 1.5;
 }
 .step-card {
@@ -251,7 +236,7 @@ export default {
 }
 .field-label {
   font-size: 12px;
-  color: #909399;
+  color: var(--adm-text-45);
   margin-bottom: 6px;
 }
 .desc-label {

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

@@ -5,9 +5,10 @@
     </div>
 
     <el-card v-loading="loading" class="edit-card" v-if="!loading">
-      <div slot="header" class="card-header">
-        <span class="card-title">基本信息</span>
-        <el-tag size="small" :type="typeTag">{{ typeLabel }}</el-tag>
+      <div slot="header">
+        <SectionTitle title="基本信息">
+          <StatusTag :type="typeTag" :text="typeLabel" />
+        </SectionTitle>
       </div>
 
       <el-form label-width="120px" class="summary-form">
@@ -66,11 +67,10 @@
     </el-card>
 
     <el-card v-loading="loading" class="edit-card" v-if="!loading && payload.indicators && payload.indicators.length">
-      <div slot="header" class="card-header">
-        <span class="card-title">健康指标 ({{ payload.indicators.length }})</span>
-        <div>
+      <div slot="header">
+        <SectionTitle title="健康指标 ({{ payload.indicators.length }})">
           <el-button size="mini" @click="addIndicator">添加指标</el-button>
-        </div>
+        </SectionTitle>
       </div>
             <div class="adm-table-wrap">
 <el-table :data="payload.indicators" border size="small" height="100%">
@@ -127,11 +127,10 @@
     </el-card>
 
     <el-card v-loading="loading" class="edit-card" v-if="!loading && payload.gutFlora && payload.gutFlora.length">
-      <div slot="header" class="card-header">
-        <span class="card-title">肠道菌群 ({{ payload.gutFlora.length }})</span>
-        <div>
+      <div slot="header">
+        <SectionTitle title="肠道菌群 ({{ payload.gutFlora.length }})">
           <el-button size="mini" @click="addGutFlora">添加菌群</el-button>
-        </div>
+        </SectionTitle>
       </div>
             <div class="adm-table-wrap">
 <el-table :data="payload.gutFlora" border size="small" height="100%">
@@ -174,11 +173,10 @@
     </el-card>
 
     <el-card v-loading="loading" class="edit-card" v-if="!loading && payload.diseaseRisks && payload.diseaseRisks.length">
-      <div slot="header" class="card-header">
-        <span class="card-title">疾病风险评估 ({{ payload.diseaseRisks.length }})</span>
-        <div>
+      <div slot="header">
+        <SectionTitle title="疾病风险评估 ({{ payload.diseaseRisks.length }})">
           <el-button size="mini" @click="addDiseaseRisk">添加风险</el-button>
-        </div>
+        </SectionTitle>
       </div>
             <div class="adm-table-wrap">
 <el-table :data="payload.diseaseRisks" border size="small" height="100%">
@@ -434,8 +432,6 @@ export default {
 .health-report-edit { padding: 16px; }
 .page-header { margin-bottom: 16px; }
 .edit-card { margin-bottom: 16px; }
-.card-header { display: flex; justify-content: space-between; align-items: center; }
-.card-title { font-size: 16px; font-weight: bold; }
 .summary-form { margin-top: 8px; }
 .action-bar { text-align: right; margin-top: 8px; }
 </style>

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

@@ -1,15 +1,13 @@
 <template>
   <div class="order-detail admin-page" v-loading="loading">
-    <div class="page-header">
-      <el-button type="text" @click="$router.push('/order-manage')">&lt; 返回订单管理</el-button>
-      <h2>订单详情</h2>
-    </div>
+    <PageHeader title="订单详情" back @back="$router.push('/order-manage')" />
 
     <template v-if="order">
       <el-card style="margin-bottom:20px;">
         <div slot="header">
-          <span>基本信息</span>
-          <el-tag :type="statusType(order.status)" style="margin-left:10px;">{{ statusLabel(order.status) }}</el-tag>
+          <SectionTitle title="基本信息">
+            <StatusTag :type="statusType(order.status)" :text="statusLabel(order.status)" />
+          </SectionTitle>
         </div>
         <el-descriptions :column="3" border>
           <el-descriptions-item label="订单编号">{{ order.orderNo }}</el-descriptions-item>
@@ -28,7 +26,9 @@
       </el-card>
 
       <el-card style="margin-bottom:20px;">
-        <div slot="header"><span>收货信息</span></div>
+        <div slot="header">
+          <SectionTitle title="收货信息" />
+        </div>
         <el-descriptions :column="3" border>
           <el-descriptions-item label="配送方式">{{ order.deliveryMethod == 2 ? '自提' : '快递' }}</el-descriptions-item>
           <el-descriptions-item label="自提码">{{ order.pickupCode || '-' }}</el-descriptions-item>
@@ -41,7 +41,9 @@
       </el-card>
 
       <el-card v-if="order.refundStatus" style="margin-bottom:20px;">
-        <div slot="header"><span>退款信息</span></div>
+        <div slot="header">
+          <SectionTitle title="退款信息" />
+        </div>
         <el-descriptions :column="3" border>
           <el-descriptions-item label="退款状态">{{ refundStatusLabel(order.refundStatus) }}</el-descriptions-item>
           <el-descriptions-item label="退款原因">{{ order.refundReason || '-' }}</el-descriptions-item>
@@ -57,7 +59,7 @@
       </div>
     </template>
 
-    <div v-else-if="!loading" style="text-align:center;padding:60px;color:#999;">
+    <div v-else-if="!loading" style="text-align:center;padding:60px;color:var(--adm-text-45);">
       <p>未找到订单信息</p>
     </div>
 
@@ -220,7 +222,7 @@ export default {
       }
     },
     statusType(status) {
-      var map = { pending: 'warning', paid: 'primary', pending_receipt: '', completed: 'success', cancelled: 'info', refunding: 'danger', refunded: 'danger', closed: 'info' }
+      var map = { pending: 'warning', paid: 'primary', pending_receipt: 'primary', completed: 'success', cancelled: 'info', refunding: 'danger', refunded: 'danger', closed: 'info' }
       return map[status] || 'info'
     },
     statusLabel(status) {
@@ -250,6 +252,4 @@ export default {
 
 <style scoped>
 .order-detail { padding: 20px; }
-.page-header { margin-bottom: 20px; }
-.page-header h2 { margin: 10px 0 0; }
 </style>

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

@@ -1,9 +1,7 @@
 <template>
   <div class="proxy-report-upload">
     <el-card>
-      <div slot="header" class="card-header">
-        <span class="card-title">代传报告上传</span>
-      </div>
+      <PageHeader slot="header" title="代传报告上传" />
       <el-form ref="uploadForm" :model="uploadForm" label-width="100px" class="upload-form">
         <el-form-item label="选择家庭" prop="familyId" required>
           <el-select v-model="uploadForm.familyId" placeholder="请选择家庭" filterable style="width:100%" @change="onFamilyChange">
@@ -32,11 +30,10 @@
 
     <!-- 解析结果预览 -->
     <el-card v-if="previewResult" style="margin-top:20px">
-      <div slot="header" class="card-header">
-        <span class="card-title">解析结果预览</span>
-        <el-tag :type="previewResult.needBind ? 'warning' : 'success'" size="small">
-          {{ previewResult.needBind ? '待绑定成员' : '已匹配成员' }}
-        </el-tag>
+      <div slot="header">
+        <SectionTitle title="解析结果预览">
+          <StatusTag :type="previewResult.needBind ? 'warning' : 'success'" :text="previewResult.needBind ? '待绑定成员' : '已匹配成员'" />
+        </SectionTitle>
       </div>
       <el-descriptions :column="2" border>
         <el-descriptions-item label="被检测人">{{ previewResult.extractedName || '-' }}</el-descriptions-item>
@@ -54,17 +51,18 @@
 
     <!-- AI解读结果 -->
     <el-card v-if="analysisResult" style="margin-top:20px">
-      <div slot="header" class="card-header">
-        <span class="card-title">AI解读结果</span>
-        <StatusTag type="success" size="small" text="已完成" />
+      <div slot="header">
+        <SectionTitle title="AI解读结果">
+          <StatusTag type="success" size="small" text="已完成" />
+        </SectionTitle>
       </div>
       <div v-html="analysisResult" class="analysis-content"></div>
     </el-card>
 
     <!-- 代传历史 -->
     <el-card style="margin-top:20px">
-      <div slot="header" class="card-header">
-        <span class="card-title">代上传历史记录</span>
+      <div slot="header">
+        <SectionTitle title="代上传历史记录" />
       </div>
       <div class="filter-bar">
         <el-select v-model="query.type" placeholder="报告类型" clearable style="width:140px">
@@ -88,7 +86,7 @@
           </el-table-column>
           <el-table-column label="报告类型" width="100">
             <template slot-scope="{ row }">
-              <el-tag size="small" :type="getTypeTag(row.reportType)">{{ typeLabel(row.reportType) }}</el-tag>
+              <StatusTag :type="getTypeTag(row.reportType)" :text="typeLabel(row.reportType)" />
             </template>
           </el-table-column>
           <el-table-column prop="title" label="标题" min-width="140" show-overflow-tooltip />
@@ -292,11 +290,9 @@ export default {
 
 <style scoped>
 .proxy-report-upload { padding: 16px; }
-.card-header { display: flex; justify-content: space-between; align-items: center; }
-.card-title { font-size: 16px; font-weight: bold; }
 .upload-form { max-width: 600px; }
 .filter-bar { display: flex; flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
 .pagination-wrap { margin-top: 16px; text-align: right; }
-.analysis-content { font-size: 14px; line-height: 1.8; color: #333; }
+.analysis-content { font-size: 14px; line-height: 1.8; color: var(--adm-text-88); }
 .analysis-content :deep(p) { margin: 8px 0; }
 </style>

cfc-web/src/views/admin/knowledge/index.vue

@@ -6,7 +6,9 @@
         <!-- 左侧筛选面板 -->
         <el-col :span="5">
           <el-card>
-            <div slot="header"><span>维度筛选</span></div>
+            <div slot="header">
+              <SectionTitle title="维度筛选" />
+            </div>
             <el-tree
               :data="dimensionTree"
               :props="{ label: 'dimensionName', children: 'children' }"
@@ -17,17 +19,18 @@
             />
           </el-card>
           <el-card style="margin-top: 12px">
-            <div slot="header"><span>标签筛选</span></div>
+            <div slot="header">
+              <SectionTitle title="标签筛选" />
+            </div>
             <div style="padding: 4px 0">
-              <el-tag
+              <StatusTag
                 v-for="tag in tags"
                 :key="tag.id"
                 :type="selectedTagId === tag.id ? 'primary' : 'info'"
+                :text="tag.tagName"
                 style="cursor: pointer; margin: 2px"
                 @click="handleTagClick(tag)"
-              >
-                {{ tag.tagName }}
-              </el-tag>
+              />
             </div>
             <el-button v-if="selectedTagId" type="text" size="small" @click="clearTagFilter">清除筛选</el-button>
           </el-card>
@@ -319,8 +322,8 @@ export default {
 .full-detail-text {
   white-space: pre-wrap;
   word-break: break-word;
-  background: #f5f7fa;
-  border: 1px solid #e4e7ed;
+  background: var(--adm-bg-header);
+  border: 1px solid var(--adm-border-split);
   border-radius: 4px;
   padding: 12px;
   max-height: 60vh;

cfc-web/src/views/admin/unified-knowledge.vue

@@ -1,19 +1,16 @@
 <template>
   <div class="unified-kb admin-page">
     <el-card>
-      <div slot="header" class="admin-page-header">
-        <span class="admin-page-title">统一知识库管理</span>
-        <div class="admin-page-actions">
-          <el-tag type="info" size="small">共 {{ overview.length }} 个模块</el-tag>
-          <el-button
-            type="primary"
-            size="small"
-            icon="el-icon-refresh"
-            :loading="loading"
-            @click="fetchOverview"
-          >刷新</el-button>
-        </div>
-      </div>
+      <PageHeader slot="header" title="统一知识库管理">
+        <el-tag type="info" size="small">共 {{ overview.length }} 个模块</el-tag>
+        <el-button
+          type="primary"
+          size="small"
+          icon="el-icon-refresh"
+          :loading="loading"
+          @click="fetchOverview"
+        >刷新</el-button>
+      </PageHeader>
 
       <el-alert
         title="模块内容存储于数据库表 knowledge_base_section，保存后热加载生效（无需重启服务）。"
@@ -231,15 +228,15 @@ export default {
 }
 .module-name {
   font-weight: 500;
-  color: #303133;
+  color: var(--adm-text-88);
 }
 .module-key {
   font-size: 12px;
-  color: #909399;
+  color: var(--adm-text-45);
   margin-top: 2px;
 }
 .danger-text {
-  color: #f56c6c;
+  color: var(--adm-error-text);
 }
 .json-toolbar {
   display: flex;
@@ -249,7 +246,7 @@ export default {
 }
 .json-hint {
   font-size: 12px;
-  color: #909399;
+  color: var(--adm-text-45);
 }
 .json-editor /deep/ .el-textarea__inner {
   font-family: Menlo, Consolas, 'Courier New', monospace;