style(admin): C-5 ActivityEdit/CouponManagement 内联 style 清理 35 处全归零 - full-width/w-200 宽度类 + success-* 成功弹窗类 + editor-body/form-hint 类

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

@@ -27,7 +27,7 @@
         :description="statusDescription"
         show-icon
         :closable="false"
-        style="margin-bottom: 16px;"
+        class="mb-16"
       />
 
       <div class="activity-edit-form-wrap">
@@ -41,7 +41,7 @@
         </el-form-item>
 
         <el-form-item label="活动类型" prop="activityType">
-          <el-select v-model="form.activityType" placeholder="请选择活动类型" style="width:100%" :disabled="readonly">
+          <el-select v-model="form.activityType" placeholder="请选择活动类型" class="full-width" :disabled="readonly">
             <el-option label="线下活动" value="offline" />
             <el-option label="线上活动" value="online" />
             <el-option label="主题活动" value="campaign" />
@@ -51,7 +51,7 @@
         <el-form-item label="活动描述" prop="description">
           <div class="rich-editor" :class="{ 'is-disabled': readonly }">
             <Toolbar :editor="editorInstance" :defaultConfig="toolbarConfig" />
-            <Editor :defaultConfig="editorConfig" v-model="form.description" @onCreated="handleEditorCreated" :disabled="readonly" style="min-height: 300px;" />
+            <Editor :defaultConfig="editorConfig" v-model="form.description" @onCreated="handleEditorCreated" :disabled="readonly" class="editor-body" />
           </div>
         </el-form-item>
 
@@ -69,10 +69,10 @@
               <img v-if="form.coverImage" :src="form.coverImage" class="cover-preview" />
               <el-button v-else type="primary" plain>+ 上传封面</el-button>
             </el-upload>
-            <el-button v-if="form.coverImage" size="mini" type="text" style="margin-left:10px;" @click="form.coverImage = ''">清除</el-button>
+            <el-button v-if="form.coverImage" size="mini" type="text" class="ml-10" @click="form.coverImage = ''">清除</el-button>
           </template>
           <img v-else-if="form.coverImage" :src="form.coverImage" class="cover-preview" />
-          <span v-else style="color:var(--adm-text-45)">无封面</span>
+          <span v-else class="text-muted">无封面</span>
         </el-form-item>
 
         <el-form-item label="五维权重">
@@ -90,12 +90,12 @@
         <el-row :gutter="16">
           <el-col :span="12">
             <el-form-item label="最大人数">
-              <el-input-number v-model="form.maxParticipants" :min="0" :max="99999" placeholder="0表示不限" style="width:100%" :disabled="readonly" />
+              <el-input-number v-model="form.maxParticipants" :min="0" :max="99999" placeholder="0表示不限" class="full-width" :disabled="readonly" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="价格(元)">
-              <el-input-number v-model="form.priceYuan" :min="0" :precision="2" :step="0.01" placeholder="0表示免费" style="width:100%" :disabled="readonly" />
+              <el-input-number v-model="form.priceYuan" :min="0" :precision="2" :step="0.01" placeholder="0表示免费" class="full-width" :disabled="readonly" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -103,7 +103,7 @@
         <el-row :gutter="16">
           <el-col :span="12">
             <el-form-item label="会员价(元)">
-              <el-input-number v-model="form.memberPriceYuan" :min="0" :precision="2" :step="0.01" placeholder="留空等于普通价" style="width:100%" :disabled="readonly" />
+              <el-input-number v-model="form.memberPriceYuan" :min="0" :precision="2" :step="0.01" placeholder="留空等于普通价" class="full-width" :disabled="readonly" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -111,12 +111,12 @@
         <el-row :gutter="16">
           <el-col :span="12">
             <el-form-item label="开始时间" prop="startTime">
-              <el-date-picker v-model="form.startTime" type="datetime" placeholder="选择开始时间" style="width:100%" :disabled="readonly" />
+              <el-date-picker v-model="form.startTime" type="datetime" placeholder="选择开始时间" class="full-width" :disabled="readonly" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="结束时间" prop="endTime">
-              <el-date-picker v-model="form.endTime" type="datetime" placeholder="选择结束时间" style="width:100%" :disabled="readonly" />
+              <el-date-picker v-model="form.endTime" type="datetime" placeholder="选择结束时间" class="full-width" :disabled="readonly" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -124,7 +124,7 @@
         <el-row :gutter="16">
           <el-col :span="12">
             <el-form-item label="可见范围">
-              <el-select v-model="form.visibility" placeholder="请选择可见范围" style="width:100%" :disabled="readonly">
+              <el-select v-model="form.visibility" placeholder="请选择可见范围" class="full-width" :disabled="readonly">
                 <el-option label="公开" value="public" />
                 <el-option label="受限" value="restricted" />
                 <el-option label="全体" value="all" />
@@ -134,7 +134,7 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="可见对象">
-              <el-select v-model="form.visibleScope" placeholder="请选择可见对象类型" style="width:100%" :disabled="readonly">
+              <el-select v-model="form.visibleScope" placeholder="请选择可见对象类型" class="full-width" :disabled="readonly">
                 <el-option label="不限" value="" />
                 <el-option label="家庭" value="family" />
                 <el-option label="角色" value="role" />
@@ -149,8 +149,8 @@
         </el-form-item>
 
         <el-form-item label="签到积分">
-          <el-input-number v-model="form.checkinPoints" :min="0" :max="9999" placeholder="0使用系统默认" style="width:200px" :disabled="readonly" />
-          <span style="margin-left:8px;color:var(--adm-text-45);font-size:12px;">0表示使用系统默认积分</span>
+          <el-input-number v-model="form.checkinPoints" :min="0" :max="9999" placeholder="0使用系统默认" class="w-200" :disabled="readonly" />
+          <span class="form-hint">0表示使用系统默认积分</span>
         </el-form-item>
       </el-form>
       </div>
@@ -158,11 +158,11 @@
 
     <!-- 创建成功弹窗 -->
     <el-dialog title="创建成功" :visible.sync="successDialogVisible" width="420px" :close-on-click-modal="false" :show-close="false">
-      <div style="text-align:center;padding:10px 0;">
-        <i class="el-icon-circle-check" style="font-size:48px;color:var(--adm-success);"></i>
-        <p style="font-size:16px;margin-top:12px;">活动「{{ form.title }}」已创建成功</p>
+      <div class="success-body">
+        <i class="el-icon-circle-check success-icon"></i>
+        <p class="success-text">活动「{{ form.title }}」已创建成功</p>
       </div>
-      <div slot="footer" style="text-align:center;">
+      <div slot="footer" class="success-footer">
         <el-button @click="handleContinueAdd">继续添加</el-button>
         <el-button @click="$router.push('/activities')">返回列表</el-button>
         <el-button type="primary" @click="handlePublishAndBack" :loading="publishing">直接发布</el-button>
@@ -560,6 +560,19 @@ activityId
 </script>
 
 <style scoped>
+/* == C 批内联清理工具类 == */
+.mb-16 { margin-bottom: 16px; }
+.full-width { width: 100%; }
+.w-200 { width: 200px; }
+.ml-10 { margin-left: 10px; }
+.text-muted { color: var(--adm-text-45); }
+.editor-body { min-height: 300px; }
+.form-hint { margin-left: 8px; color: var(--adm-text-45); font-size: 12px; }
+.success-body { text-align: center; padding: 10px 0; }
+.success-icon { font-size: 48px; color: var(--adm-success); }
+.success-text { font-size: 16px; margin-top: 12px; }
+.success-footer { text-align: center; }
+
 .activity-edit {
   padding: 20px;
   flex: 1;

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

@@ -110,24 +110,24 @@
           <el-input v-model="form.name" placeholder="请输入优惠券名称" />
         </el-form-item>
         <el-form-item label="类型" required>
-          <el-select v-model="form.type" placeholder="请选择类型" style="width: 100%">
+          <el-select v-model="form.type" placeholder="请选择类型" class="full-width">
             <el-option label="FIXED(满减)" value="FIXED" />
             <el-option label="CASH(无门槛)" value="CASH" />
             <el-option label="DISCOUNT(折扣)" value="DISCOUNT" />
           </el-select>
         </el-form-item>
         <el-form-item v-if="form.type !== 'DISCOUNT'" label="面值(元)" required>
-          <el-input-number v-model="form.valueYuan" :min="0.01" :step="0.5" :precision="2" style="width: 200px" />
+          <el-input-number v-model="form.valueYuan" :min="0.01" :step="0.5" :precision="2" class="w-200" />
         </el-form-item>
         <el-form-item v-if="form.type === 'DISCOUNT'" label="折扣率(千分比)" required>
-          <el-input-number v-model="form.discountRate" :min="1" :max="10000" :step="100" style="width: 200px" />
+          <el-input-number v-model="form.discountRate" :min="1" :max="10000" :step="100" class="w-200" />
           <div class="form-item-tip">9000 = 9折，10000 = 无折扣</div>
         </el-form-item>
         <el-form-item v-if="form.type === 'FIXED'" label="使用门槛(元)">
-          <el-input-number v-model="form.minSpendYuan" :min="0" :step="10" :precision="2" style="width: 200px" />
+          <el-input-number v-model="form.minSpendYuan" :min="0" :step="10" :precision="2" class="w-200" />
         </el-form-item>
         <el-form-item label="适用对象">
-          <el-select v-model="form.applicableTo" placeholder="请选择适用对象" style="width: 100%">
+          <el-select v-model="form.applicableTo" placeholder="请选择适用对象" class="full-width">
             <el-option label="全部商品" value="ALL" />
             <el-option label="会员服务" value="MEMBERSHIP" />
             <el-option label="特定商品" value="PRODUCT" />
@@ -139,11 +139,11 @@
           <div class="form-item-tip">留空 = 全场通用；仅适用对象选"特定商品"时必填</div>
         </el-form-item>
         <el-form-item label="积分兑换价">
-          <el-input-number v-model="form.pointsPrice" :min="0" :step="100" style="width: 200px" />
+          <el-input-number v-model="form.pointsPrice" :min="0" :step="100" class="w-200" />
           <div class="form-item-tip">0 = 不可积分兑换</div>
         </el-form-item>
         <el-form-item label="自动发放规则">
-          <el-select v-model="form.grantType" placeholder="不自动发放" style="width: 100%">
+          <el-select v-model="form.grantType" placeholder="不自动发放" class="full-width">
             <el-option label="不自动发放" value="" />
             <el-option label="JOIN(开通会员赠)" value="JOIN" />
             <el-option label="PERIODIC(周期补发)" value="PERIODIC" />
@@ -151,27 +151,27 @@
           </el-select>
         </el-form-item>
         <el-form-item v-if="form.grantType === 'JOIN' || form.grantType === 'PERIODIC'" label="适用会员等级">
-          <el-select v-model="form.grantLevelCode" placeholder="请选择会员等级" style="width: 100%">
+          <el-select v-model="form.grantLevelCode" placeholder="请选择会员等级" class="full-width">
             <el-option v-for="lv in memberLevelOptions" :key="lv.levelCode" :label="lv.levelName + '（' + lv.levelCode + '）'" :value="lv.levelCode" />
           </el-select>
         </el-form-item>
         <el-form-item v-if="form.grantType === 'PERIODIC'" label="补发周期">
-          <el-select v-model="form.grantPeriod" placeholder="请选择补发周期" style="width: 100%">
+          <el-select v-model="form.grantPeriod" placeholder="请选择补发周期" class="full-width">
             <el-option label="MONTHLY(每月)" value="MONTHLY" />
             <el-option label="QUARTERLY(每季度)" value="QUARTERLY" />
           </el-select>
         </el-form-item>
         <el-form-item v-if="form.grantType && form.grantType !== ''" label="每次发放数量">
-          <el-input-number v-model="form.grantQuantity" :min="1" :step="1" style="width: 200px" />
+          <el-input-number v-model="form.grantQuantity" :min="1" :step="1" class="w-200" />
         </el-form-item>
         <el-form-item label="有效期起" required>
-          <el-date-picker v-model="form.validFrom" type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd" style="width: 100%" />
+          <el-date-picker v-model="form.validFrom" type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd" class="full-width" />
         </el-form-item>
         <el-form-item label="有效期止" required>
-          <el-date-picker v-model="form.validUntil" type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd" style="width: 100%" />
+          <el-date-picker v-model="form.validUntil" type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd" class="full-width" />
         </el-form-item>
         <el-form-item label="发放总量" required>
-          <el-input-number v-model="form.totalCount" :min="1" :step="100" style="width: 200px" />
+          <el-input-number v-model="form.totalCount" :min="1" :step="100" class="w-200" />
         </el-form-item>
       </el-form>
       <div slot="footer">
@@ -181,9 +181,9 @@
     </el-dialog>
 
     <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:var(--adm-text-88)">保存成功</p>
+      <div class="success-body">
+        <i class="el-icon-success success-icon"></i>
+        <p class="success-text">保存成功</p>
       </div>
       <div slot="footer">
         <el-button type="primary" @click="handleContinue">继续添加</el-button>
@@ -194,7 +194,7 @@
     <el-dialog title="批量发放优惠券" :visible.sync="batchDialogVisible" width="500px">
       <el-form label-width="120px">
         <el-form-item label="选择优惠券" required>
-          <el-select v-model="batchCouponId" placeholder="请选择优惠券" style="width: 100%">
+          <el-select v-model="batchCouponId" placeholder="请选择优惠券" class="full-width">
             <el-option v-for="c in couponOptions" :key="c.id" :label="c.name" :value="c.id" />
           </el-select>
         </el-form-item>
@@ -487,4 +487,10 @@ export default {
 
 <style scoped>
 .coupon-management { padding: 20px; }
+/* == C 批内联清理工具类 == */
+.full-width { width: 100%; }
+.w-200 { width: 200px; }
+.success-body { text-align: center; padding: 10px 0; }
+.success-icon { color: var(--adm-success); font-size: 32px; }
+.success-text { margin: 12px 0 0; font-size: 16px; color: var(--adm-text-88); }
 </style>