style(admin): C-3 ProfileManagement 内联 style 清理 23 处全归零 - 过滤栏 filter-bar 合并 + 标签 tag-mr + 分区 section-title/rec-block/rec-label/dim-label 类

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

@@ -7,33 +7,33 @@
       
 </PageHeader>
 
-      <div class="filter-bar" style="margin-bottom:12px;display:flex;gap:12px;align-items:center;">
-        <el-input v-model="searchForm.memberId" placeholder="家庭成员ID" clearable style="width:160px;" @keyup.enter.native="loadList" />
+      <div class="filter-bar">
+        <el-input v-model="searchForm.memberId" placeholder="家庭成员ID" clearable class="w-160" @keyup.enter.native="loadList" />
         <el-button type="primary" size="mini" @click="loadList">搜索</el-button>
         <el-button size="mini" @click="resetSearch">重置</el-button>
       </div>
 
             <div class="adm-table-wrap">
-<el-table :data="list" v-loading="loading" border stripe style="min-width:800px;" height="100%">
+<el-table :data="list" v-loading="loading" border stripe class="min-w-800" height="100%">
         <el-table-column prop="id" label="ID" width="70" />
         <el-table-column prop="name" label="姓名" width="100" />
         <el-table-column prop="age" label="年龄" width="70" />
         <el-table-column label="五维评分" width="320">
           <template slot-scope="{ row }">
             <span v-if="row.dimension_scores">
-              <el-tag size="mini" style="margin-right:4px;" :color="dimColor('body')">{{ row.dimension_scores.body || '-' }}</el-tag>
-              <el-tag size="mini" style="margin-right:4px;" :color="dimColor('wisdom')">{{ row.dimension_scores.wisdom || '-' }}</el-tag>
-              <el-tag size="mini" style="margin-right:4px;" :color="dimColor('mind')">{{ row.dimension_scores.mind || '-' }}</el-tag>
-              <el-tag size="mini" style="margin-right:4px;" :color="dimColor('action')">{{ row.dimension_scores.action || '-' }}</el-tag>
+              <el-tag size="mini" class="tag-mr" :color="dimColor('body')">{{ row.dimension_scores.body || '-' }}</el-tag>
+              <el-tag size="mini" class="tag-mr" :color="dimColor('wisdom')">{{ row.dimension_scores.wisdom || '-' }}</el-tag>
+              <el-tag size="mini" class="tag-mr" :color="dimColor('mind')">{{ row.dimension_scores.mind || '-' }}</el-tag>
+              <el-tag size="mini" class="tag-mr" :color="dimColor('action')">{{ row.dimension_scores.action || '-' }}</el-tag>
               <el-tag size="mini" :color="dimColor('wealth')">{{ row.dimension_scores.wealth || '-' }}</el-tag>
             </span>
-            <span v-else style="color:var(--adm-text-25)">暂无</span>
+            <span v-else class="text-faint">暂无</span>
           </template>
         </el-table-column>
         <el-table-column label="问题域" width="160">
           <template slot-scope="{ row }">
-            <el-tag v-for="d in (row.problem_domains || [])" :key="d" size="mini" style="margin-right:4px;">{{ domainLabel(d) }}</el-tag>
-            <span v-if="!row.problem_domains || row.problem_domains.length === 0" style="color:var(--adm-text-25)">-</span>
+            <el-tag v-for="d in (row.problem_domains || [])" :key="d" size="mini" class="tag-mr">{{ domainLabel(d) }}</el-tag>
+            <span v-if="!row.problem_domains || row.problem_domains.length === 0" class="text-faint">-</span>
           </template>
         </el-table-column>
         <el-table-column prop="computed_at" label="更新时间" width="160">
@@ -51,7 +51,7 @@
       </div>
 
       <el-pagination
-        style="margin-top:16px;text-align:right;"
+        class="pager-right"
         layout="total, prev, pager, next"
         :total="total"
         :current-page="page"
@@ -68,15 +68,15 @@
           <el-descriptions-item label="年龄">{{ currentProfile.member && currentProfile.member.age }}</el-descriptions-item>
         </el-descriptions>
 
-        <h4 style="margin:16px 0 8px;color:var(--adm-text-88);">五维评分</h4>
+        <h4 class="section-title">五维评分</h4>
         <el-row :gutter="12" v-if="currentProfile.dimension_scores">
           <el-col :span="4" v-for="(score, dim) in currentProfile.dimension_scores" :key="dim">
             <el-progress type="dashboard" :percentage="score" :color="dimColor(dim)" :width="70" :stroke-width="8" />
-            <div style="text-align:center;font-size:12px;margin-top:4px;">{{ dimName(dim) }}</div>
+            <div class="dim-label">{{ dimName(dim) }}</div>
           </el-col>
         </el-row>
 
-        <h4 style="margin:16px 0 8px;color:var(--adm-text-88);">身体指标</h4>
+        <h4 class="section-title">身体指标</h4>
         <el-descriptions :column="3" border size="small" v-if="currentProfile.body_metrics">
           <el-descriptions-item label="平均睡眠(h)">{{ currentProfile.body_metrics.sleep_dur_avg || '-' }}</el-descriptions-item>
           <el-descriptions-item label="深睡占比(%)">{{ currentProfile.body_metrics.deep_sleep_pct || '-' }}</el-descriptions-item>
@@ -85,7 +85,7 @@
           <el-descriptions-item label="月饮食记录数">{{ currentProfile.body_metrics.meal_records_count || 0 }}</el-descriptions-item>
         </el-descriptions>
 
-        <h4 style="margin:16px 0 8px;color:var(--adm-text-88);">心理指标</h4>
+        <h4 class="section-title">心理指标</h4>
         <el-descriptions :column="3" border size="small" v-if="currentProfile.mind_metrics">
           <el-descriptions-item label="正向情绪占比">{{ currentProfile.mind_metrics.emotion_joy_ratio != null ? (currentProfile.mind_metrics.emotion_joy_ratio * 100).toFixed(0) + '%' : '-' }}</el-descriptions-item>
           <el-descriptions-item label="平均压力(1-10)">{{ currentProfile.mind_metrics.stress_avg || '-' }}</el-descriptions-item>
@@ -94,21 +94,21 @@
           <el-descriptions-item label="平均心情效价">{{ currentProfile.mind_metrics.mood_score_avg || '-' }}</el-descriptions-item>
         </el-descriptions>
 
-        <h4 style="margin:16px 0 8px;color:var(--adm-text-88);">行为活跃</h4>
+        <h4 class="section-title">行为活跃</h4>
         <el-descriptions :column="3" border size="small" v-if="currentProfile.action_metrics">
           <el-descriptions-item label="任务完成率">{{ currentProfile.action_metrics.task_completion_rate != null ? (currentProfile.action_metrics.task_completion_rate * 100).toFixed(0) + '%' : '-' }}</el-descriptions-item>
           <el-descriptions-item label="连续打卡(天)">{{ currentProfile.action_metrics.checkin_streak || 0 }}</el-descriptions-item>
           <el-descriptions-item label="7日积分">{{ currentProfile.action_metrics.points_velocity_7d || 0 }}</el-descriptions-item>
         </el-descriptions>
 
-        <h4 style="margin:16px 0 8px;color:var(--adm-text-88);">推荐内容</h4>
-        <div v-if="currentProfile.tasks && currentProfile.tasks.length > 0" style="margin-bottom:8px;">
-          <span style="font-size:13px;color:var(--adm-text-65);">任务：</span>
-          <el-tag v-for="t in currentProfile.tasks" :key="t.id" size="small" style="margin-right:4px;">{{ t.title }}</el-tag>
+        <h4 class="section-title">推荐内容</h4>
+        <div v-if="currentProfile.tasks && currentProfile.tasks.length > 0" class="rec-block">
+          <span class="rec-label">任务：</span>
+          <el-tag v-for="t in currentProfile.tasks" :key="t.id" size="small" class="tag-mr">{{ t.title }}</el-tag>
         </div>
-        <div v-if="currentProfile.articles && currentProfile.articles.length > 0" style="margin-bottom:8px;">
-          <span style="font-size:13px;color:var(--adm-text-65);">文章：</span>
-          <el-tag v-for="a in currentProfile.articles" :key="a.id" size="small" style="margin-right:4px;">{{ a.title }}</el-tag>
+        <div v-if="currentProfile.articles && currentProfile.articles.length > 0" class="rec-block">
+          <span class="rec-label">文章：</span>
+          <el-tag v-for="a in currentProfile.articles" :key="a.id" size="small" class="tag-mr">{{ a.title }}</el-tag>
         </div>
       </div>
     </el-dialog>
@@ -189,6 +189,16 @@ export default {
 
 <style scoped>
 .admin-page { padding: 16px; }
-.filter-bar { display: flex; align-items: center; }
+.filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
 .el-progress { margin: 0 auto; }
+/* == C 批内联清理工具类 == */
+.w-160 { width: 160px; }
+.min-w-800 { min-width: 800px; }
+.tag-mr { margin-right: 4px; }
+.text-faint { color: var(--adm-text-25); }
+.pager-right { margin-top: 16px; text-align: right; }
+.section-title { margin: 16px 0 8px; color: var(--adm-text-88); }
+.dim-label { text-align: center; font-size: 12px; margin-top: 4px; }
+.rec-block { margin-bottom: 8px; }
+.rec-label { font-size: 13px; color: var(--adm-text-65); }
 </style>