style(admin): C-2 MembershipCenter 内联 style 清理 29 处全归零 - 宽度 w-160/180/240/320 工具类 + 对话框分区 mv-* 类 + hint 提示类

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

@@ -7,7 +7,7 @@
     </PageHeader>
 
     <!-- 统计概览 -->
-    <el-row :gutter="16" style="margin-bottom:16px;">
+    <el-row :gutter="16" class="mb-16">
       <el-col :xs="12" :sm="8" :md="4" v-for="(card, idx) in statCards" :key="idx">
         <StatCard :label="card.label" :value="card.value" :icon="card.icon" :color="card.color" />
       </el-col>
@@ -137,7 +137,7 @@
               v-model="maintainSearch"
               placeholder="手机号 / 昵称 / 用户ID"
               clearable
-              style="width:240px;"
+              class="w-240"
               @keyup.enter.native="handleMaintainSearch"
             />
             <el-button type="primary" size="small" icon="el-icon-search" @click="handleMaintainSearch" :loading="maintainSearching">搜索</el-button>
@@ -176,11 +176,11 @@
     <!-- 权限详情对话框 -->
     <el-dialog title="功能权限详情" :visible.sync="featuresVisible" width="520px" @close="featuresVisible = false">
       <div v-if="currentLevel">
-        <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
+        <div class="mv-head">
           <StatusTag :type="levelTagType(currentLevel.levelCode)" size="medium" :text="currentLevel.levelCode" />
-          <span style="font-size:16px;font-weight:600;">{{ currentLevel.levelName }}</span>
+          <span class="mv-name">{{ currentLevel.levelName }}</span>
         </div>
-        <p class="text-muted" style="margin:0 0 16px;">{{ currentLevel.levelDesc || '暂无描述' }}</p>
+        <p class="text-muted mv-desc">{{ currentLevel.levelDesc || '暂无描述' }}</p>
         <el-descriptions :column="2" border size="small">
           <el-descriptions-item label="月费">{{ formatPrice(currentLevel.priceMonthly) }} 元</el-descriptions-item>
           <el-descriptions-item label="年费">{{ formatPrice(currentLevel.priceYearly) }} 元</el-descriptions-item>
@@ -196,9 +196,9 @@
             <StatusTag :type="currentLevel.teacherConsultation ? 'success' : 'info'" size="mini" :text="currentLevel.teacherConsultation ? '支持' : '不支持'" />
           </el-descriptions-item>
         </el-descriptions>
-        <div v-if="parseFeatures(currentLevel.features).length" style="margin-top:16px;">
-          <div style="font-weight:600;margin-bottom:8px;color:var(--adm-text-65);">功能权限列表</div>
-          <div style="display:flex;flex-wrap:wrap;gap:6px;">
+        <div v-if="parseFeatures(currentLevel.features).length" class="mv-feat-section">
+          <div class="mv-feat-title">功能权限列表</div>
+          <div class="mv-feat-chips">
             <el-tag v-for="(f, i) in parseFeatures(currentLevel.features)" :key="i" size="small">{{ f }}</el-tag>
           </div>
         </div>
@@ -212,18 +212,18 @@
     <el-dialog title="会员维护" :visible.sync="maintainVisible" width="480px" @close="maintainVisible = false">
       <el-form :model="maintainForm" label-width="90px" size="small">
         <el-form-item label="用户">
-          <span style="font-weight:500;">{{ maintainForm.nickname }}</span>
-          <span class="text-muted" style="margin-left:6px;">ID: {{ maintainForm.id }}</span>
+          <span class="mv-uid">{{ maintainForm.nickname }}</span>
+          <span class="text-muted mv-id">ID: {{ maintainForm.id }}</span>
         </el-form-item>
         <el-form-item label="会员等级" required>
-          <el-select v-model="maintainForm.memberLevel" style="width:180px;" placeholder="选择等级">
+          <el-select v-model="maintainForm.memberLevel" class="w-180" placeholder="选择等级">
             <el-option v-for="lv in safeLevels" :key="lv.levelCode" :label="lv.levelName + ' (' + lv.levelCode + ')'" :value="lv.levelCode" />
           </el-select>
-          <span class="text-muted" style="margin-left:8px;font-size:12px;">选终身会员则永久有效</span>
+          <span class="text-muted hint-ml">选终身会员则永久有效</span>
         </el-form-item>
         <el-form-item label="推荐人ID">
-          <el-input v-model="maintainForm.referrerIdStr" placeholder="留空不变，填 0 清除" style="width:180px;" />
-          <span class="text-muted" style="margin-left:8px;font-size:12px;">填目标用户ID</span>
+          <el-input v-model="maintainForm.referrerIdStr" placeholder="留空不变，填 0 清除" class="w-180" />
+          <span class="text-muted hint-ml">填目标用户ID</span>
         </el-form-item>
       </el-form>
       <div slot="footer">
@@ -237,42 +237,42 @@
       <el-form :model="editForm" label-width="100px" size="small">
         <el-form-item label="等级编码">
           <el-tag>{{ editForm.levelCode }}</el-tag>
-          <span style="color:var(--adm-text-45);margin-left:8px;font-size:12px;">编码不可修改</span>
+          <span class="form-hint">编码不可修改</span>
         </el-form-item>
         <el-form-item label="等级名称" required>
-          <el-input v-model="editForm.levelName" placeholder="如：家庭会员" maxlength="32" show-word-limit style="width:320px;" />
+          <el-input v-model="editForm.levelName" placeholder="如：家庭会员" maxlength="32" show-word-limit class="w-320" />
         </el-form-item>
         <el-form-item label="等级描述">
-          <el-input v-model="editForm.levelDesc" type="textarea" :rows="2" maxlength="200" show-word-limit style="width:320px;" />
+          <el-input v-model="editForm.levelDesc" type="textarea" :rows="2" maxlength="200" show-word-limit class="w-320" />
         </el-form-item>
         <el-form-item label="级别排序">
-          <el-input-number v-model="editForm.levelOrder" :min="1" :max="999" :step="1" style="width:160px;" />
-          <span style="color:var(--adm-text-45);margin-left:8px;font-size:12px;">数字越小级别越低，低级别可见则更高级别也可见</span>
+          <el-input-number v-model="editForm.levelOrder" :min="1" :max="999" :step="1" class="w-160" />
+          <span class="mv-hint">数字越小级别越低，低级别可见则更高级别也可见</span>
         </el-form-item>
         <el-form-item label="月费(元)">
-          <el-input-number v-model="editForm.priceMonthly" :min="0" :step="100" :precision="0" style="width:160px;" />
+          <el-input-number v-model="editForm.priceMonthly" :min="0" :step="100" :precision="0" class="w-160" />
         </el-form-item>
         <el-form-item label="季费(元)">
-          <el-input-number v-model="editForm.priceQuarterly" :min="0" :step="100" :precision="0" style="width:160px;" />
+          <el-input-number v-model="editForm.priceQuarterly" :min="0" :step="100" :precision="0" class="w-160" />
         </el-form-item>
         <el-form-item label="年费(元)">
-          <el-input-number v-model="editForm.priceYearly" :min="0" :step="100" :precision="0" style="width:160px;" />
+          <el-input-number v-model="editForm.priceYearly" :min="0" :step="100" :precision="0" class="w-160" />
         </el-form-item>
         <el-form-item label="月原价(元)">
-          <el-input-number v-model="editForm.originalPriceMonthly" :min="0" :step="100" :precision="0" style="width:160px;" />
-          <span style="color:var(--adm-text-45);margin-left:8px;font-size:12px;">留空/0 表示无折扣</span>
+          <el-input-number v-model="editForm.originalPriceMonthly" :min="0" :step="100" :precision="0" class="w-160" />
+          <span class="mv-hint">留空/0 表示无折扣</span>
         </el-form-item>
         <el-form-item label="季原价(元)">
-          <el-input-number v-model="editForm.originalPriceQuarterly" :min="0" :step="100" :precision="0" style="width:160px;" />
+          <el-input-number v-model="editForm.originalPriceQuarterly" :min="0" :step="100" :precision="0" class="w-160" />
         </el-form-item>
         <el-form-item label="年原价(元)">
-          <el-input-number v-model="editForm.originalPriceYearly" :min="0" :step="100" :precision="0" style="width:160px;" />
+          <el-input-number v-model="editForm.originalPriceYearly" :min="0" :step="100" :precision="0" class="w-160" />
         </el-form-item>
         <el-form-item label="家庭成员上限">
-          <el-input-number v-model="editForm.maxChildren" :min="0" :max="99" :step="1" style="width:160px;" />
+          <el-input-number v-model="editForm.maxChildren" :min="0" :max="99" :step="1" class="w-160" />
         </el-form-item>
         <el-form-item label="每日任务上限">
-          <el-input-number v-model="editForm.maxTasksPerDay" :min="0" :max="999" :step="1" style="width:160px;" />
+          <el-input-number v-model="editForm.maxTasksPerDay" :min="0" :max="999" :step="1" class="w-160" />
         </el-form-item>
         <el-form-item label="AI审核">
           <el-switch v-model="editForm.aiReviewEnabled" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="关闭" />
@@ -284,7 +284,7 @@
           <el-switch v-model="editForm.teacherConsultation" :active-value="1" :inactive-value="0" active-text="支持" inactive-text="不支持" />
         </el-form-item>
         <el-form-item label="功能权限">
-          <el-input v-model="editForm.features" type="textarea" :rows="2" placeholder="JSON 数组或逗号分隔，如：[\"basic_tasks\",\"points_system\"]" style="width:320px;" />
+          <el-input v-model="editForm.features" type="textarea" :rows="2" placeholder="JSON 数组或逗号分隔，如：[\"basic_tasks\",\"points_system\"]" class="w-320" />
         </el-form-item>
       </el-form>
       <div slot="footer">
@@ -596,6 +596,23 @@ export default {
 </script>
 
 <style scoped>
+/* == C 批内联 style 清理：工具类 == */
+.w-240 { width: 240px; }
+.w-180 { width: 180px; }
+.w-160 { width: 160px; }
+.w-320 { width: 320px; }
+.mb-16 { margin-bottom: 16px; }
+.mv-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
+.mv-name { font-size: 16px; font-weight: 600; }
+.mv-desc { margin: 0 0 16px; }
+.mv-feat-section { margin-top: 16px; }
+.mv-feat-title { font-weight: 600; margin-bottom: 8px; color: var(--adm-text-65); }
+.mv-feat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.mv-uid { font-weight: 500; }
+.mv-id { margin-left: 6px; }
+.mv-hint { color: var(--adm-text-45); margin-left: 8px; font-size: 12px; }
+.hint-ml { margin-left: 8px; font-size: 12px; }
+
 /* ---- 升级路径 ---- */
 .level-path {
   display: inline-flex;