style(admin): C-1 ProductEdit 内联 style 清理 44 处全归零 - 表单控件宽度 w-*/full-width 工具类 + form-hint 系列提示文字类 + 间距 ml/mr/mt-8 + bundle-row/sp-opt-* 行内布局类

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

@@ -17,7 +17,7 @@
         </el-form-item>
 
         <el-form-item label="商品类型" prop="productType">
-          <el-select v-model="form.productType" placeholder="请选择商品类型" style="width: 200px;">
+          <el-select v-model="form.productType" placeholder="请选择商品类型" class="w-200">
             <el-option label="实物商品" value="physical" />
             <el-option label="虚拟商品" value="virtual" />
             <el-option label="优惠券" value="coupon" />
@@ -31,27 +31,27 @@
             <el-radio :label="1">是</el-radio>
             <el-radio :label="0">否</el-radio>
           </el-radio-group>
-          <span style="margin-left: 10px; font-size: 12px; color: var(--adm-text-45);">开启后自动同步商品信息至营养产品，小程序营养产品详情可跳转购买</span>
+          <span class="form-hint">开启后自动同步商品信息至营养产品，小程序营养产品详情可跳转购买</span>
         </el-form-item>
 
         <el-form-item label="商品分类">
-          <el-select v-model="form.categoryId" placeholder="请选择分类（用于前台商城筛选）" clearable filterable style="width: 300px;">
+          <el-select v-model="form.categoryId" placeholder="请选择分类（用于前台商城筛选）" clearable filterable class="w-300">
             <el-option-group v-for="group in categoryGroups" :key="group.label" :label="group.label">
               <el-option v-for="cat in group.options" :key="cat.id" :label="cat.label" :value="cat.id" />
             </el-option-group>
           </el-select>
-          <div style="font-size: 12px; color: var(--adm-text-45); margin-top: 4px;">不选则不出现在商城分类筛选中；可在「商品分类管理」中维护分类</div>
+          <div class="form-hint-mt4">不选则不出现在商城分类筛选中；可在「商品分类管理」中维护分类</div>
         </el-form-item>
 
         <el-form-item label="商品标签">
-          <el-input v-model="form.tags" placeholder="逗号分隔，如: 育儿,亲子,心理" maxlength="200" clearable style="width: 400px;" />
-          <div style="font-size: 12px; color: var(--adm-text-45); margin-top: 4px;">用于小程序文章详情页「相关商品」推荐：标签与文章标签一字不差才会匹配，留空则不参与匹配</div>
+          <el-input v-model="form.tags" placeholder="逗号分隔，如: 育儿,亲子,心理" maxlength="200" clearable class="w-400" />
+          <div class="form-hint-mt4">用于小程序文章详情页「相关商品」推荐：标签与文章标签一字不差才会匹配，留空则不参与匹配</div>
         </el-form-item>
 
         <!-- 测评商品扩展信息 -->
         <template v-if="form.productType === 'assessment'">
           <el-form-item label="测评类型">
-            <el-select v-model="form.assessmentType" placeholder="请选择测评类型" style="width: 200px;">
+            <el-select v-model="form.assessmentType" placeholder="请选择测评类型" class="w-200">
               <el-option label="单包" value="single" />
               <el-option label="组合" value="bundle" />
             </el-select>
@@ -59,17 +59,17 @@
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="测评次数">
-                <el-input-number v-model="form.totalSessions" :min="1" :max="999" :precision="0" style="width: 100%;" controls />
+                <el-input-number v-model="form.totalSessions" :min="1" :max="999" :precision="0" class="full-width" controls />
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="有效期(天)">
-                <el-input-number v-model="form.validityDays" :min="1" :max="3650" :precision="0" :default-value="365" style="width: 100%;" controls />
+                <el-input-number v-model="form.validityDays" :min="1" :max="3650" :precision="0" :default-value="365" class="full-width" controls />
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="规划师范围">
-                <el-select v-model="form.guideScope" placeholder="不限" style="width: 100%;">
+                <el-select v-model="form.guideScope" placeholder="不限" class="full-width">
                   <el-option label="不限" value="all" />
                   <el-option label="指定规划师" value="assigned" />
                   <el-option label="自动分配" value="auto" />
@@ -83,18 +83,18 @@
         <template v-if="form.productType === 'bundle'">
           <SectionTitle title="套餐组成" />
           <el-form-item label="组成商品">
-            <div v-for="(item, idx) in bundleItems" :key="'bi' + idx" style="display:flex; align-items:center; margin-bottom:8px; gap:8px; flex-wrap:wrap;">
-              <el-select v-model="item.childProductId" filterable remote placeholder="搜索子商品" :remote-method="(q) => searchBundleProduct(q, idx)" style="width:220px;" @change="(pid) => onBundleProductChange(pid, idx)">
+            <div v-for="(item, idx) in bundleItems" :key="'bi' + idx" class="bundle-row">
+              <el-select v-model="item.childProductId" filterable remote placeholder="搜索子商品" :remote-method="(q) => searchBundleProduct(q, idx)" class="w-220" @change="(pid) => onBundleProductChange(pid, idx)">
                 <el-option v-for="p in item.productOptions" :key="p.id" :label="(p.name || 'ID:' + p.id) + ' (库存:' + (p.stock || 0) + ')'" :value="p.id" />
               </el-select>
-              <el-select v-if="item.skuOptions.length" v-model="item.childSkuId" placeholder="选择规格" clearable style="width:160px;">
+              <el-select v-if="item.skuOptions.length" v-model="item.childSkuId" placeholder="选择规格" clearable class="w-160">
                 <el-option v-for="s in item.skuOptions" :key="s.id" :label="(s.specs || '默认') + ' (库存:' + (s.stock || 0) + ')'" :value="s.id" />
               </el-select>
-              <el-input-number v-model="item.quantity" :min="1" :precision="0" size="small" style="width:110px;" />
+              <el-input-number v-model="item.quantity" :min="1" :precision="0" size="small" class="w-110" />
               <el-button type="danger" size="mini" @click="removeBundleItem(idx)">删除</el-button>
             </div>
             <el-button type="primary" size="mini" plain @click="addBundleItem()">＋ 添加子商品</el-button>
-            <div style="margin-top:8px; font-size:12px; color:var(--adm-text-45);">套餐出库时自动完成所有组成商品出库（数量 × 套餐数量）</div>
+            <div class="form-hint-mt8">套餐出库时自动完成所有组成商品出库（数量 × 套餐数量）</div>
           </el-form-item>
         </template>
 
@@ -106,7 +106,7 @@
             active-text="开启"
             inactive-text="关闭"
           />
-          <span style="margin-left: 10px; font-size: 12px; color: var(--adm-text-45);">在成长档案上传页推荐该商品</span>
+          <span class="form-hint">在成长档案上传页推荐该商品</span>
         </el-form-item>
 
         <el-form-item label="商品简介" prop="intro">
@@ -114,14 +114,14 @@
         </el-form-item>
 
         <el-form-item label="排序值">
-          <el-input-number v-model="form.sortOrder" :min="0" :precision="0" style="width: 200px;" controls />
-          <span style="margin-left: 10px; font-size: 12px; color: var(--adm-text-45);">越小越靠前</span>
+          <el-input-number v-model="form.sortOrder" :min="0" :precision="0" class="w-200" controls />
+          <span class="form-hint">越小越靠前</span>
         </el-form-item>
 
         <el-form-item label="商品描述" prop="description">
           <div class="rich-editor">
             <Toolbar :editor="editorInstance" :defaultConfig="toolbarConfig" />
-            <Editor :defaultConfig="editorConfig" v-model="form.description" @onCreated="handleEditorCreated" style="min-height: 300px;" />
+            <Editor :defaultConfig="editorConfig" v-model="form.description" @onCreated="handleEditorCreated" class="editor-body" />
           </div>
         </el-form-item>
 
@@ -165,38 +165,38 @@
         <el-row :gutter="20">
           <el-col :span="6">
             <el-form-item label="售价(元)" prop="price">
-              <el-input-number v-model="form.price" :min="0" :precision="2" placeholder="0.00" style="width: 100%;" controls />
+              <el-input-number v-model="form.price" :min="0" :precision="2" placeholder="0.00" class="full-width" controls />
             </el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="会员价(元)">
-              <el-input-number v-model="form.memberPrice" :min="0" :precision="2" :step="0.01" placeholder="留空等于普通价" style="width: 100%;" controls />
+              <el-input-number v-model="form.memberPrice" :min="0" :precision="2" :step="0.01" placeholder="留空等于普通价" class="full-width" controls />
             </el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="库存" prop="stock">
-              <el-input-number v-model="form.stock" :min="0" :precision="0" placeholder="0" style="width: 100%;" controls />
+              <el-input-number v-model="form.stock" :min="0" :precision="0" placeholder="0" class="full-width" controls />
             </el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="最小购买数">
-              <el-input-number v-model="form.minQuantity" :min="1" :precision="0" placeholder="1" style="width: 100%;" controls />
+              <el-input-number v-model="form.minQuantity" :min="1" :precision="0" placeholder="1" class="full-width" controls />
             </el-form-item>
           </el-col>
         </el-row>
 
         <el-form-item label="所属体系">
-          <el-select v-model="form.distributionSystemId" placeholder="不属于任何体系" clearable :disabled="isSupplierAdmin" style="width: 100%" @change="handleSystemChange">
+          <el-select v-model="form.distributionSystemId" placeholder="不属于任何体系" clearable :disabled="isSupplierAdmin" class="full-width" @change="handleSystemChange">
             <el-option v-for="s in supplySystems" :key="s.id" :label="s.name" :value="s.id"></el-option>
           </el-select>
-          <span v-if="selectedSystem" style="font-size: 12px; color: var(--adm-text-45); margin-left: 8px">
+          <span v-if="selectedSystem" class="form-hint-ml8">
             平台留利: {{ selectedSystem.platformProfitRate }}% → {{ selectedSystem.platformProfitRate * 10 }}‰
           </span>
         </el-form-item>
 
         <el-form-item label="仅体系可见">
           <el-switch v-model="form.vendorVisible" />
-          <span style="margin-left: 10px; font-size: 12px; color: var(--adm-text-45);">开启后仅所属供应体系的用户可在列表中看到该商品，分享商品详情页所有人可访问</span>
+          <span class="form-hint">开启后仅所属供应体系的用户可在列表中看到该商品，分享商品详情页所有人可访问</span>
         </el-form-item>
 
         <el-form-item label="配送方式">
@@ -214,17 +214,17 @@
           <div class="service-person-list">
             <!-- 添加服务者下拉 -->
             <div class="add-person-row">
-              <el-select v-model="selectedGuideId" placeholder="选择服务商（已入驻）" style="width: 260px"
+              <el-select v-model="selectedGuideId" placeholder="选择服务商（已入驻）" class="w-260"
                          filterable @change="onSelectGuide">
                 <el-option v-for="g in filteredGuides" :key="g.userId"
                   :label="g.realName || g.nickname"
                   :value="g.userId">
-                  <span style="float:left">{{ g.realName || g.nickname }}</span>
-                  <span style="float:right;color:var(--adm-text-45);font-size:12px">{{ g.title || g.specialty || '' }}</span>
+                  <span class="sp-opt-name">{{ g.realName || g.nickname }}</span>
+                  <span class="sp-opt-desc">{{ g.title || g.specialty || '' }}</span>
                 </el-option>
               </el-select>
-              <el-button type="primary" size="mini" style="margin-left:8px" @click="addSelectedGuide()">添加</el-button>
-              <div class="delivery-config-hint" style="margin-top:4px">时段由服务商在「服务商管理」中统一配置</div>
+              <el-button type="primary" size="mini" class="ml-8" @click="addSelectedGuide()">添加</el-button>
+              <div class="delivery-config-hint">时段由服务商在「服务商管理」中统一配置</div>
             </div>
             <!-- 已选服务者列表 -->
             <div v-for="(person, pIdx) in servicePersons" :key="pIdx" class="service-person-card">
@@ -240,7 +240,7 @@
                   <el-input v-model="person.title" placeholder="头衔" size="small" />
                 </el-col>
               </el-row>
-              <el-row :gutter="10" style="margin-top:8px">
+              <el-row :gutter="10" class="mt-8">
                 <el-col :span="12">
                   <el-input v-model.number="person.price" placeholder="专属价格(元)" size="small" type="number" />
                 </el-col>
@@ -248,7 +248,7 @@
                   <el-input v-model.number="person.originalPrice" placeholder="原价(元)" size="small" type="number" />
                 </el-col>
               </el-row>
-              <el-input v-model="person.intro" type="textarea" :rows="2" placeholder="个人介绍（可留空，自动从服务商资料代入）" size="small" style="margin-top:8px" />
+              <el-input v-model="person.intro" type="textarea" :rows="2" placeholder="个人介绍（可留空，自动从服务商资料代入）" size="small" class="mt-8" />
             </div>
           </div>
         </el-form-item>
@@ -257,9 +257,9 @@
         <el-form-item v-if="form.deliveryMethod === 5" label="线上服务时段">
           <div class="online-slot-list">
             <div v-for="(slot, idx) in onlineSlots" :key="idx" class="sp-slot-row">
-              <el-date-picker v-model="slot.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间" style="width: 190px" />
-              <el-date-picker v-model="slot.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间" style="width: 190px; margin-left: 8px" />
-              <el-input v-model.number="slot.maxCapacity" placeholder="容量" style="width: 90px; margin-left: 8px" />
+              <el-date-picker v-model="slot.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间" class="w-190" />
+              <el-date-picker v-model="slot.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间" class="w-190 ml-8" />
+              <el-input v-model.number="slot.maxCapacity" placeholder="容量" class="w-90 ml-8" />
               <el-button type="text" size="mini" @click="removeOnlineSlot(idx)">删除</el-button>
             </div>
             <el-button type="primary" plain size="mini" @click="addOnlineSlot()">+ 添加时段</el-button>
@@ -274,7 +274,7 @@
         </el-form-item>
 
         <el-form-item label="最低可见级别">
-          <el-select v-model="form.minVisibleLevel" placeholder="全部可见" clearable style="width: 200px;">
+          <el-select v-model="form.minVisibleLevel" placeholder="全部可见" clearable class="w-200">
             <el-option
               v-for="lv in membershipLevels"
               :key="lv.levelCode"
@@ -282,7 +282,7 @@
               :value="lv.levelCode"
             />
           </el-select>
-          <span style="margin-left: 10px; font-size: 12px; color: var(--adm-text-45);">留空=全部会员可见；选择后仅该级别及更高级别会员可见</span>
+          <span class="form-hint">留空=全部会员可见；选择后仅该级别及更高级别会员可见</span>
         </el-form-item>
 
         <el-form-item label="商品维度">
@@ -329,24 +329,24 @@
 
         <el-form-item label="赠送会员">
           <el-switch v-model="giftRuleEnabled" active-text="启用" inactive-text="停用" />
-          <el-select v-if="giftRuleEnabled" v-model="giftRuleLevel" placeholder="选择赠送等级" style="margin-left: 12px; width: 200px">
+          <el-select v-if="giftRuleEnabled" v-model="giftRuleLevel" placeholder="选择赠送等级" class="w-200 ml-12">
             <el-option v-for="lv in membershipLevels" :key="lv.levelCode" :label="lv.levelName" :value="lv.levelCode" />
           </el-select>
         </el-form-item>
 
         <el-form-item label="可选赠品">
-          <div style="width: 100%">
+          <div class="full-width">
             <div v-for="lv in membershipLevels" :key="lv.levelCode" class="gift-config-level">
               <div class="gift-config-level-title">{{ lv.levelName }} 赠品</div>
               <div v-for="(item, idx) in getGiftItems(lv.levelCode)" :key="getGiftItemKey(item, idx)" class="gift-config-item">
-                <el-select v-model="item.giftType" size="mini" style="width: 110px; margin-right: 8px">
+                <el-select v-model="item.giftType" size="mini" class="w-110 mr-8">
                   <el-option label="赠品商品" value="product" />
                   <el-option label="CF值" value="cf" />
                 </el-select>
-                <el-select v-if="item.giftType === 'product'" v-model="item.giftProductId" size="mini" filterable placeholder="选择赠品商品" style="width: 260px; margin-right: 8px">
+                <el-select v-if="item.giftType === 'product'" v-model="item.giftProductId" size="mini" filterable placeholder="选择赠品商品" class="w-260 mr-8">
                   <el-option v-for="p in onShelfProducts" :key="p.id" :label="p.name" :value="p.id" />
                 </el-select>
-                <el-input v-if="item.giftType === 'cf'" v-model.number="item.cfValue" size="mini" placeholder="CF值数量" type="number" style="width: 140px; margin-right: 8px" />
+                <el-input v-if="item.giftType === 'cf'" v-model.number="item.cfValue" size="mini" placeholder="CF值数量" type="number" class="w-140 mr-8" />
                 <el-button size="mini" type="text" @click="removeGiftItem(lv.levelCode, idx)">删除</el-button>
               </div>
               <el-button size="mini" type="text" @click="addGiftItem(lv.levelCode)">+ 添加赠品</el-button>
@@ -354,7 +354,7 @@
           </div>
         </el-form-item>
 
-        <div class="edit-form-footer" style="display:none;"></div>
+        <div class="edit-form-footer"></div>
       </el-form>
       </div>
     </el-card>
@@ -1183,8 +1183,64 @@ async loadGiftRule(productId) {
 }}
 </script>
 
-<style scoped>
-.product-edit {
+.editor-body {
+  min-height: 300px;
+}
+.form-hint {
+  font-size: 12px;
+  color: var(--adm-text-45);
+  margin-left: 10px;
+}
+.form-hint-mt4 {
+  font-size: 12px;
+  color: var(--adm-text-45);
+  margin-top: 4px;
+}
+.form-hint-mt8 {
+  font-size: 12px;
+  color: var(--adm-text-45);
+  margin-top: 8px;
+}
+.form-hint-ml8 {
+  font-size: 12px;
+  color: var(--adm-text-45);
+  margin-left: 8px;
+}
+.bundle-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.sp-opt-name {
+  float: left;
+}
+.sp-opt-desc {
+  float: right;
+  color: var(--adm-text-45);
+  font-size: 12px;
+}
+.full-width {
+  width: 100%;
+}
+.w-90 { width: 90px; }
+.w-110 { width: 110px; }
+.w-140 { width: 140px; }
+.w-160 { width: 160px; }
+.w-190 { width: 190px; }
+.w-200 { width: 200px; }
+.w-220 { width: 220px; }
+.w-260 { width: 260px; }
+.w-300 { width: 300px; }
+.w-400 { width: 400px; }
+.ml-8 { margin-left: 8px; }
+.ml-12 { margin-left: 12px; }
+.mr-8 { margin-right: 8px; }
+.edit-form-footer {
+  display: none;
+}
+</style>
   padding: 20px;
   flex: 1;
   display: flex;