style(admin): C-10 ProductSkuEditor/ProductPpointManage/InventoryInboundCreate/GuidePopupConfig/gates 内联 style 归零

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

@@ -6,10 +6,10 @@
       </PageHeader>
       <el-form inline>
         <el-form-item label="标识">
-          <el-input v-model="query.slug" placeholder="slug" clearable style="width:180px" />
+          <el-input v-model="query.slug" placeholder="slug" clearable class="w-180" />
         </el-form-item>
         <el-form-item label="状态">
-          <el-select v-model="query.status" clearable placeholder="全部" style="width:120px">
+          <el-select v-model="query.status" clearable placeholder="全部" class="w-120">
             <el-option label="启用" :value="1" />
             <el-option label="禁用" :value="0" />
           </el-select>
@@ -82,15 +82,15 @@
         </el-form-item>
         <SectionTitle title="步骤（留空则单步弹窗）" />
         <div v-for="(step, idx) in form.steps" :key="idx" class="step-row">
-          <el-input v-model="step.title" placeholder="步骤标题" style="width:160px" />
-          <el-input v-model="step.icon" placeholder="图标" style="width:100px" />
-          <el-input v-model="step.desc" placeholder="步骤描述" style="flex:1" />
+          <el-input v-model="step.title" placeholder="步骤标题" class="w-160" />
+          <el-input v-model="step.icon" placeholder="图标" class="w-100" />
+          <el-input v-model="step.desc" placeholder="步骤描述" class="flex-1" />
           <el-button type="text" @click="removeStep(idx)">删除</el-button>
         </div>
         <el-button type="text" @click="addStep">+ 添加步骤</el-button>
         <SectionTitle title="触发条件" />
         <div v-for="(trg, idx) in form.triggers" :key="'t' + idx" class="step-row">
-          <el-select v-model="trg.triggerType" placeholder="触发类型" style="width:160px">
+          <el-select v-model="trg.triggerType" placeholder="触发类型" class="w-160">
             <el-option label="首次登录" value="first_login" />
             <el-option label="进入页面" value="page_enter" />
             <el-option label="完成任务" value="task_complete" />
@@ -98,8 +98,8 @@
             <el-option label="每日活跃" value="daily_active" />
             <el-option label="切换角色" value="role_change" />
           </el-select>
-          <el-input v-model="trg.targetPage" placeholder="目标页面" style="width:160px" />
-          <el-input v-model="trg.minRole" placeholder="角色 parent/child/teacher" style="width:160px" />
+          <el-input v-model="trg.targetPage" placeholder="目标页面" class="w-160" />
+          <el-input v-model="trg.minRole" placeholder="角色 parent/child/teacher" class="w-160" />
           <el-button type="text" @click="removeTrigger(idx)">删除</el-button>
         </div>
         <el-button type="text" @click="addTrigger">+ 添加触发条件</el-button>
@@ -178,4 +178,10 @@ export default {
 .step-row { display: flex; align-items: center; margin-bottom: 8px; }
 .step-row .el-input, .step-row .el-select { margin-right: 8px; }
 .drawer-footer { margin-top: 16px; text-align: right; }
+.flex-1 { flex: 1; }
+/* == C 批内联清理工具类 == */
+.w-180 { width: 180px; }
+.w-120 { width: 120px; }
+.w-160 { width: 160px; }
+.w-100 { width: 100px; }
 </style>

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

@@ -9,39 +9,39 @@
       <div class="inbound-create-form-wrap">
       <el-form label-width="100px">
         <el-form-item label="入库日期">
-          <el-date-picker v-model="form.inboundDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:200px;" />
+          <el-date-picker v-model="form.inboundDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" class="w-200" />
         </el-form-item>
 
         <el-form-item label="经办人">
-          <el-input v-model="form.operatorName" placeholder="经办人姓名" style="width:200px;" />
+          <el-input v-model="form.operatorName" placeholder="经办人姓名" class="w-200" />
         </el-form-item>
 
         <el-form-item label="供应商">
-          <el-select v-model="form.supplierId" filterable placeholder="搜索选择供应商" style="width:300px;" @change="(v) => { const s = supplierOptions.find(x => x.id === v); form.supplierName = s ? s.name : ''; }">
+          <el-select v-model="form.supplierId" filterable placeholder="搜索选择供应商" class="w-300" @change="(v) => { const s = supplierOptions.find(x => x.id === v); form.supplierName = s ? s.name : ''; }">
             <el-option v-for="s in supplierOptions" :key="s.id" :label="s.name" :value="s.id" />
           </el-select>
         </el-form-item>
 
         <el-form-item label="总金额(元)">
-          <el-input v-model.number="form.totalAmount" type="number" placeholder="入库总金额" style="width:200px;" />
+          <el-input v-model.number="form.totalAmount" type="number" placeholder="入库总金额" class="w-200" />
         </el-form-item>
 
         <el-form-item label="入库明细">
-          <div v-for="(item, idx) in form.items" :key="idx" style="display:flex;gap:8px;margin-bottom:8px;align-items:center;flex-wrap:wrap;">
-            <el-select v-model="item.productId" filterable remote placeholder="搜索商品" :remote-method="(q) => searchProduct(q, idx)" style="width:220px;" @change="(v) => onProductSelect(v, idx)">
+          <div v-for="(item, idx) in form.items" :key="idx" class="item-row">
+            <el-select v-model="item.productId" filterable remote placeholder="搜索商品" :remote-method="(q) => searchProduct(q, idx)" class="w-220" @change="(v) => onProductSelect(v, idx)">
               <el-option v-for="p in item.productOptions" :key="p.id" :label="p.name + ' (ID:' + p.id + ')'" :value="p.id" />
             </el-select>
-            <el-select v-model="item.skuId" placeholder="选择规格" clearable style="width:150px;" v-if="item.skuOptions && item.skuOptions.length">
+            <el-select v-model="item.skuId" placeholder="选择规格" clearable class="w-150" v-if="item.skuOptions && item.skuOptions.length">
               <el-option v-for="s in item.skuOptions" :key="s.id" :label="s.specs || '默认'" :value="s.id" />
             </el-select>
-            <el-input v-model.number="item.quantity" placeholder="数量" type="number" min="1" style="width:100px;" />
+            <el-input v-model.number="item.quantity" placeholder="数量" type="number" min="1" class="w-100" />
             <el-button type="danger" size="mini" @click="form.items.splice(idx,1)">删除</el-button>
           </div>
           <el-button type="primary" size="mini" @click="addItem">添加行</el-button>
         </el-form-item>
 
         <el-form-item label="备注">
-          <el-input v-model="form.remark" type="textarea" :rows="2" style="width:400px;" />
+          <el-input v-model="form.remark" type="textarea" :rows="2" class="w-400" />
         </el-form-item>
 
         <el-form-item>
@@ -167,4 +167,12 @@ export default {
   padding-right: 8px;
   margin-right: -8px;
 }
+/* == C 批内联清理工具类 == */
+.w-200 { width: 200px; }
+.w-300 { width: 300px; }
+.w-220 { width: 220px; }
+.w-150 { width: 150px; }
+.w-100 { width: 100px; }
+.w-400 { width: 400px; }
+.item-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; flex-wrap: wrap; }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="product-ppoint admin-page">
     <PageHeader title="P点（可分配利润）配置" subtitle="按商品维护可分配利润基点">
-      <el-input v-model="searchText" placeholder="商品名称搜索" prefix-icon="el-icon-search" style="width: 200px;" clearable @keyup.enter.native="loadList" />
+      <el-input v-model="searchText" placeholder="商品名称搜索" prefix-icon="el-icon-search" class="w-200" clearable @keyup.enter.native="loadList" />
       <el-button type="primary" @click="loadList">查询</el-button>
       <el-button type="success" @click="openAddDialog">新增配置</el-button>
       <el-tag
@@ -52,7 +52,7 @@
             :max="10000"
             :step="100"
             size="small"
-            style="width: 100px;"
+            class="w-100"
           />
         </template>
       </el-table-column>
@@ -92,25 +92,25 @@
       :page-size="size"
       :total="total"
       layout="total, prev, pager, next"
-      style="margin-top: 20px; text-align: right;"
+      class="pagination-right"
     />
 
     <el-dialog title="新增P点配置" :visible.sync="addDialogVisible" width="500px">
       <el-form :model="addForm" label-width="100px">
         <el-form-item label="选择商品">
-          <el-select v-model="addForm.productId" filterable placeholder="搜索商品" style="width: 100%;">
+          <el-select v-model="addForm.productId" filterable placeholder="搜索商品" class="full-width">
             <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:var(--adm-text-45);font-size:12px;">{{ p.price != null ? (p.price/100).toFixed(2) + '元' : '' }}</span>
+              <span class="pull-left">{{ p.name }}</span>
+              <span class="pull-right">{{ 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:var(--adm-text-45);font-size:12px;margin-top:4px;">10000 bps = 100%，例：1000 bps = 10%</div>
+          <el-input-number v-model="addForm.ppoint" :min="0" :max="10000" :step="100" class="full-width" />
+          <div class="hint">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%;" />
+          <el-date-picker v-model="addForm.startDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" class="full-width" />
         </el-form-item>
       </el-form>
       <div slot="footer">
@@ -260,5 +260,12 @@ export default {
   object-fit: cover;
   border-radius: 4px;
 }
-
+/* == C 批内联清理工具类 == */
+.w-200 { width: 200px; }
+.w-100 { width: 100px; }
+.pagination-right { margin-top: 20px; text-align: right; }
+.full-width { width: 100%; }
+.pull-left { float: left; }
+.pull-right { float: right; color: var(--adm-text-45); font-size: 12px; }
+.hint { color: var(--adm-text-45); font-size: 12px; margin-top: 4px; }
 </style>

cfc-web/src/views/admin/components/ProductSkuEditor.vue

@@ -26,8 +26,8 @@
       <el-table-column prop="stock" label="库存" width="80" />
       <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:var(--adm-text-45)">-</span>
+          <img v-if="row.image" :src="row.image" class="sku-thumb" />
+          <span v-else class="text-muted">-</span>
         </template>
       </el-table-column>
       <el-table-column label="启用" width="70">
@@ -46,7 +46,7 @@
 
     <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px" @close="resetForm">
       <el-form ref="skuForm" :model="skuForm" :rules="skuRules" label-width="80px">
-        <el-radio-group v-model="isLinkedMode" size="small" style="margin-bottom:16px;">
+        <el-radio-group v-model="isLinkedMode" size="small" class="mb-16">
           <el-radio-button :label="false">规格变体</el-radio-button>
           <el-radio-button :label="true">关联商品</el-radio-button>
         </el-radio-group>
@@ -58,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: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 v-if="skuForm.linkedProductId" class="linked-card">
+              <img v-if="skuForm.linkedProductImage" :src="skuForm.linkedProductImage" class="linked-thumb" />
               <div>
                 <div>{{ skuForm.linkedProductName }}</div>
-                <div style="font-size:12px;color:var(--adm-text-45);">¥{{ skuForm.linkedProductPrice ? (skuForm.linkedProductPrice/100).toFixed(2) : '0.00' }} | 库存 {{ skuForm.linkedProductStock }}</div>
+                <div class="linked-info">¥{{ skuForm.linkedProductPrice ? (skuForm.linkedProductPrice/100).toFixed(2) : '0.00' }} | 库存 {{ skuForm.linkedProductStock }}</div>
               </div>
               <el-button size="mini" type="text" @click="openProductPicker">更换</el-button>
             </div>
@@ -75,13 +75,13 @@
           <el-input v-model="skuForm.specs" placeholder="例如：颜色:红色;尺码:M" />
         </el-form-item>
         <el-form-item label="售价(元)" prop="price">
-          <el-input-number v-model="skuForm.price" :min="0" :precision="2" style="width: 100%;" />
+          <el-input-number v-model="skuForm.price" :min="0" :precision="2" class="full-width" />
         </el-form-item>
         <el-form-item label="原价(元)">
-          <el-input-number v-model="skuForm.originalPrice" :min="0" :precision="2" style="width: 100%;" />
+          <el-input-number v-model="skuForm.originalPrice" :min="0" :precision="2" class="full-width" />
         </el-form-item>
         <el-form-item label="库存" prop="stock">
-          <el-input-number v-model="skuForm.stock" :min="0" :precision="0" style="width: 100%;" />
+          <el-input-number v-model="skuForm.stock" :min="0" :precision="0" class="full-width" />
         </el-form-item>
         <el-form-item label="规格图片">
           <div class="sku-image-row">
@@ -521,4 +521,12 @@ const baseURL = process.env.VUE_APP_BASE_API || ''
   border-radius: 4px;
   border: 1px solid var(--adm-border-base);
 }
+/* == C 批内联清理工具类 == */
+.sku-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
+.text-muted { color: var(--adm-text-45); }
+.mb-16 { margin-bottom: 16px; }
+.linked-card { margin-top: 8px; display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--adm-bg-header); border-radius: 4px; }
+.linked-thumb { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; }
+.linked-info { font-size: 12px; color: var(--adm-text-45); }
+.full-width { width: 100%; }
 </style>

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

@@ -6,7 +6,7 @@
       </PageHeader>
 
             <div class="adm-table-wrap">
-<el-table :data="gateList" border v-loading="loading" style="width:100%" height="100%">
+<el-table :data="gateList" border v-loading="loading" class="full-width" height="100%">
         <el-table-column prop="sortOrder" label="排序" width="60" align="center">
           <template slot="header">
             <span class="sort-header" @click.stop="onSortClick('sortOrder', $event)">排序<span v-if="sortIndex('sortOrder') !== null" class="sort-index" :class="sortClass('sortOrder') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('sortOrder') }}</span>{{ sortIcon('sortOrder') }}</span>
@@ -60,8 +60,8 @@
         </el-table-column>
         <el-table-column label="奖励" width="140">
           <template slot-scope="scope">
-            <span v-if="scope.row.rewardPoints > 0" style="color: var(--adm-warning-text)">+{{ scope.row.rewardPoints }} CF值</span>
-            <span v-if="scope.row.rewardEnergy > 0" style="color: var(--adm-primary);margin-left:6px">+{{ scope.row.rewardEnergy }}能量</span>
+            <span v-if="scope.row.rewardPoints > 0" class="text-warning">+{{ scope.row.rewardPoints }} CF值</span>
+            <span v-if="scope.row.rewardEnergy > 0" class="text-primary-ml6">+{{ scope.row.rewardEnergy }}能量</span>
             <span v-if="!scope.row.rewardPoints && !scope.row.rewardEnergy">—</span>
           </template>
           <template slot="header">
@@ -81,7 +81,7 @@
         </el-table-column>
       </el-table>
       </div>
-      <div style="margin-top:15px;text-align:right">
+      <div class="pagination-right">
         <el-pagination
           background
           layout="total, prev, pager, next, sizes"
@@ -96,7 +96,7 @@
     </el-card>
 
     <!-- 家庭进度管理 -->
-    <el-card style="margin-top:20px">
+    <el-card class="mt-20">
       <div slot="header">
         <SectionTitle title="家庭进度管理" />
       </div>
@@ -138,7 +138,7 @@
     <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px">
       <el-form :model="form" :rules="formRules" ref="form" label-width="100px">
         <el-form-item label="关卡类型" prop="gateType">
-          <el-select v-model="form.gateType" style="width:100%">
+          <el-select v-model="form.gateType" class="full-width">
             <el-option label="五维自检" value="SELF_CHECK"></el-option>
             <el-option label="邀请家人" value="INVITE_FAMILY"></el-option>
             <el-option label="创建家人" value="CREATE_FAMILY_MEMBER"></el-option>
@@ -156,7 +156,7 @@
           <el-input v-model="form.description" type="textarea" :rows="2" placeholder="关卡说明文字"></el-input>
         </el-form-item>
         <el-form-item label="图标">
-          <el-input v-model="form.icon" placeholder="如：📝" style="width:120px"></el-input>
+          <el-input v-model="form.icon" placeholder="如：📝" class="w-120"></el-input>
         </el-form-item>
         <el-form-item label="排序号">
           <el-input-number v-model="form.sortOrder" :min="0" :max="999"></el-input-number>
@@ -174,7 +174,7 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="解锁目标">
-          <el-select v-model="form.unlockTarget" style="width:100%">
+          <el-select v-model="form.unlockTarget" class="full-width">
             <el-option label="个人沙盘" value="PERSONAL_SANDBOX"></el-option>
             <el-option label="全家沙盘" value="FAMILY_SANDBOX"></el-option>
             <el-option label="孩子微行动" value="CHILD_MICRO_ACTION"></el-option>
@@ -187,7 +187,7 @@
         </el-form-item>
         <el-form-item label="条件参数">
           <el-input v-model="form.conditionParams" placeholder='如：{"count":1} 或 {"days":3}'></el-input>
-          <div style="font-size:12px;color: var(--adm-text-45);margin-top:4px">
+          <div class="hint">
             SELF_CHECK: {"minCount":1} | MICRO_ACTION: {"count":1} | STREAK_DAYS: {"days":3}
           </div>
         </el-form-item>
@@ -482,4 +482,13 @@ export default {
 .sort-header:hover {
   color: var(--adm-primary);
 }
+/* == C 批内联清理工具类 == */
+.full-width { width: 100%; }
+.w-120 { width: 120px; }
+.text-warning { color: var(--adm-warning-text); }
+.text-primary { color: var(--adm-primary); }
+.text-primary-ml6 { color: var(--adm-primary); margin-left: 6px; }
+.pagination-right { margin-top: 15px; text-align: right; }
+.mt-20 { margin-top: 20px; }
+.hint { font-size: 12px; color: var(--adm-text-45); margin-top: 4px; }
 </style>