@longhongguo/form-create-ant-design-vue 3.4.53 → 3.4.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.4.53",
+  "version": "3.4.54",
   "description": "AntDesignVue版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。",
   "main": "./dist/form-create.min.js",
   "module": "./dist/form-create.esm.js",

package/src/components/businessComponent/BuildStoreAuditDetail.vue

@@ -274,16 +274,16 @@
             <span>{{ item.platformName }}</span>
             <span>{{ item.settlementText }}</span>
           </div>
-          <div class="fc-bsad-grid two mt16">
-            <div class="fc-bsad-item">
+          <div v-if="buildPlatformRows.length" class="fc-bsad-grid two mt16">
+            <div v-if="buildPlatformSelectedIds.includes(1)" class="fc-bsad-item">
               <label>美团建店店名与 logo 来源</label>
               <div>{{ buildNameLogoModeText(detail.mtBuildNameLogoMode, 'mt') }}</div>
             </div>
-            <div class="fc-bsad-item">
-              <label>饿了么建店店名与 logo 来源</label>
+            <div v-if="buildPlatformSelectedIds.includes(2)" class="fc-bsad-item">
+              <label>淘宝建店店名与 logo 来源</label>
               <div>{{ buildNameLogoModeText(detail.ebBuildNameLogoMode, 'eb') }}</div>
             </div>
-            <div class="fc-bsad-item">
+            <div v-if="buildPlatformSelectedIds.includes(3)" class="fc-bsad-item">
               <label>京东建店店名与 logo 来源</label>
               <div>{{ buildNameLogoModeText(detail.jdBuildNameLogoMode, 'jd') }}</div>
             </div>
@@ -1081,6 +1081,9 @@ export default {
         }))
     })
 
+    /** 与 buildPlatformRows 一致，用于控制各平台「建店店名与 logo 来源」是否展示 */
+    const buildPlatformSelectedIds = computed(() => buildPlatformRows.value.map(r => r.platformId))
+
     function yesNoText(value) {
       if (value === 1) return '是'
       if (value === 0) return '否'
@@ -1106,13 +1109,13 @@ export default {
     }
 
     /**
-     * 建店店名与 logo 来源：1 / 2；美团 1 为「智鲜门店名称 + 智鲜品牌 logo」，饿了么/京东 1 为「智鲜」
+     * 建店店名与 logo 来源：1 / 2；美团 1 为「智鲜门店名称 + 智鲜品牌 logo」，淘宝/京东 1 为「智鲜」
      */
     function buildNameLogoModeText(mode, platformKey) {
       const n = toOptionalNumber(mode)
-      if (n === 2) return '选择门店名字'
+      if (n === 2) return '选择平台门店名字'
       if (n === 1) {
-        return '选择智鲜名字'
+        return '选择智鲜门店名字'
       }
       return '-'
     }
@@ -1250,6 +1253,7 @@ export default {
       foodMainBusinessTypeText,
       foodLicenseValidText,
       buildPlatformRows,
+      buildPlatformSelectedIds,
       repeatStoreCheckRows,
       distanceProtectRows,
       repeatInnerRows,

package/src/components/businessComponent/StoreBillRateAdjustBlock.vue

@@ -18,24 +18,29 @@
         />
         <span v-else class="fc-sbra-readonly">{{ storeNameReadonly }}</span>
       </a-form-item>
-
-      <div class="fc-sbra-section-label">当前平台费率与加包装费</div>
-      <a-row :gutter="[12, 16]" class="fc-sbra-rate-grid">
-        <a-col v-for="row in platformRows" :key="row.key" :xs="24" :lg="24">
-          <div class="fc-sbra-pair">
-            <div class="fc-sbra-field">
-              <span class="fc-sbra-inline-label">{{ row.rateTitle }}</span>
-              <span class="fc-sbra-value">{{ rateDisplay(row.rateField) || '—' }}</span>
-              <span class="fc-sbra-suffix">%</span>
-            </div>
-            <div class="fc-sbra-field">
-              <span class="fc-sbra-inline-label">加包装费</span>
-              <span class="fc-sbra-value">{{ rateDisplay(row.pkgField) || '—' }}</span>
-              <span class="fc-sbra-suffix fc-sbra-suffix-yuan">元</span>
+      <a-form-item
+        label=" "
+        :colon="false"
+        v-if="local.storeNameArr && local.storeNameArr.length > 0"
+      >
+        <div class="fc-sbra-section-label">所选门店各平台扣点与加包装费</div>
+        <a-row :gutter="[12, 16]" class="fc-sbra-rate-grid">
+          <a-col v-for="row in platformRows" :key="row.key" :xs="24" :lg="24">
+            <div class="fc-sbra-pair">
+              <div class="fc-sbra-field">
+                <span class="fc-sbra-inline-label">{{ row.rateTitle }}</span>
+                <span class="fc-sbra-value">{{ rateDisplay(row.rateField) || '—' }}</span>
+                <span class="fc-sbra-suffix">%</span>
+              </div>
+              <div class="fc-sbra-field">
+                <span class="fc-sbra-inline-label">加包装费</span>
+                <span class="fc-sbra-value">{{ rateDisplay(row.pkgField) || '—' }}</span>
+                <span class="fc-sbra-suffix fc-sbra-suffix-yuan">元</span>
+              </div>
             </div>
-          </div>
-        </a-col>
-      </a-row>
+          </a-col>
+        </a-row>
+      </a-form-item>
 
       <a-form-item label="新扣点比例" name="newDeductionRatio" :rules="formRules.newDeductionRatio">
         <a-select
@@ -435,7 +440,9 @@ export default {
   margin: 8px 0 12px;
 }
 .fc-sbra-rate-grid {
+  padding: 10px;
   margin-bottom: 16px;
+  background-color: #fafafa;
 }
 .fc-sbra-pair {
   display: flex;

package/src/components/businessComponent/StorePricingModeSwitchBlock.vue

@@ -0,0 +1,647 @@
+<template>
+  <div class="fc-spsp-block">
+    <a-form
+      ref="formRef"
+      :model="local"
+      :disabled="readOnly"
+      :label-col="{ style: { width: '140px' } }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <a-form-item label="智鲜门店名称" name="storeNameArr" :rules="formRules.storeNameArr">
+        <CusStoreSelect
+          v-if="!readOnly"
+          :model-value="local.storeNameArr"
+          :form-create-inject="formCreateInject"
+          :multiple="false"
+          placeholder="请选择门店"
+          @change="onStoreChange"
+        />
+        <span v-else class="fc-spsp-readonly">{{ storeNameReadonly }}</span>
+      </a-form-item>
+
+      <a-form-item label="当前模式" class="fc-spsp-mode-item">
+        <strong class="fc-spsp-mode-bold">{{ currentModeBoldText }}</strong>
+      </a-form-item>
+
+      <a-form-item label="切换新模式" class="fc-spsp-mode-item">
+        <strong class="fc-spsp-mode-bold">{{ newModeBoldText }}</strong>
+      </a-form-item>
+
+      <!-- 报价 → 扣点 -->
+      <template v-if="showDeductionBranch">
+        <div class="fc-spsp-section-title">切换后门店扣点比例</div>
+
+        <a-form-item label="公司承担包装袋" name="companyBearBag" :rules="formRules.companyBearBag">
+          <a-radio-group v-if="!readOnly" v-model:value="local.companyBearBag" @change="onCompanyBearBagChange">
+            <a-radio :value="1">是</a-radio>
+            <a-radio :value="0">否</a-radio>
+          </a-radio-group>
+          <span v-else class="fc-spsp-readonly">{{
+            radioLabel(companyBearBagOptions, local.companyBearBag)
+          }}</span>
+        </a-form-item>
+
+        <div class="fc-spsp-platform-wrap">
+          <div
+            v-for="row in platformRows"
+            :key="row.key"
+            class="fc-spsp-platform-row"
+          >
+            <div class="fc-spsp-platform-label">{{ row.label }}</div>
+            <div class="fc-spsp-platform-fields">
+              <a-form-item
+                :name="['platformDeduction', row.key, 'rate']"
+                :rules="formRules.platformRateRules"
+                class="fc-spsp-inline-item"
+              >
+                <a-select
+                  v-if="!readOnly"
+                  v-model:value="local.platformDeduction[row.key].rate"
+                  placeholder="扣点比例"
+                  allow-clear
+                  :options="deductionSelectOptions"
+                  :get-popup-container="popupContainer"
+                  style="width: 120px"
+                  @change="onPlatformRateChange(row.key)"
+                />
+                <span v-else class="fc-spsp-readonly">{{ local.platformDeduction[row.key].rate ?? '—' }}%</span>
+              </a-form-item>
+              <template v-if="local.companyBearBag === 1">
+                <span class="fc-spsp-platform-plus">+</span>
+                <span class="fc-spsp-platform-static">公司收取包装费</span>
+                <a-form-item
+                  :name="['platformDeduction', row.key, 'packageFee']"
+                  :rules="formRules.platformPackageRules"
+                  class="fc-spsp-inline-item"
+                >
+                  <a-select
+                    v-if="!readOnly"
+                    v-model:value="local.platformDeduction[row.key].packageFee"
+                    placeholder="元"
+                    allow-clear
+                    :options="packageSelectOptions"
+                    :get-popup-container="popupContainer"
+                    style="width: 100px"
+                    @change="onPlatformPackageChange(row.key)"
+                  />
+                  <span v-else class="fc-spsp-readonly">{{ local.platformDeduction[row.key].packageFee ?? '—' }}</span>
+                </a-form-item>
+                <span v-if="!readOnly || local.platformDeduction[row.key].packageFee != null" class="fc-spsp-platform-unit">元</span>
+              </template>
+            </div>
+          </div>
+        </div>
+
+        <ul class="fc-spsp-hints">
+          <li>当公司承担包装袋为「否」时，不展示公司收取包装费；</li>
+          <li>扣点比例：1%～15%，每 1% 一档；</li>
+          <li>包装费：0.1～1 元，每 0.1 一档；</li>
+          <li>先填写「美团」后，将默认同步到其余平台，之后各平台可单独修改。</li>
+        </ul>
+      </template>
+
+      <!-- 扣点 → 报价 -->
+      <template v-else-if="showQuoteBranch">
+        <a-form-item label="公司承担包装袋" name="companyBearBag" :rules="formRules.companyBearBag">
+          <a-radio-group v-if="!readOnly" v-model:value="local.companyBearBag" disabled>
+            <a-radio :value="1">是</a-radio>
+            <a-radio :value="0">否</a-radio>
+          </a-radio-group>
+          <span v-else class="fc-spsp-readonly">{{
+            radioLabel(companyBearBagOptions, local.companyBearBag)
+          }}</span>
+        </a-form-item>
+      </template>
+
+      <a-form-item label="申请/备注原因" name="applyReason" :rules="formRules.applyReason">
+        <FcEditorWrapper
+          :model-value="local.applyReason"
+          :form-create-inject="formCreateInject"
+          :read-only="readOnly"
+          placeholder="请填写申请或备注原因"
+          :height="220"
+          @update:model-value="onApplyReasonUpdate"
+        />
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script>
+import { ref, computed, watch, reactive } from 'vue'
+import CusStoreSelect from '../CusStoreSelect/index.vue'
+import FcEditorWrapper from '../FcEditorWrapper.vue'
+
+const PLATFORM_ROWS = [
+  { key: 'mt', label: '美团' },
+  { key: 'tb', label: '淘宝' },
+  { key: 'jd', label: '京东' },
+  { key: 'applet', label: '小程序' }
+]
+
+const DEDUCTION_SELECT_OPTIONS = Array.from({ length: 15 }, (_, i) => {
+  const v = i + 1
+  return { label: `${v}%`, value: v }
+})
+
+const PACKAGE_SELECT_OPTIONS = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1].map(n => ({
+  label: String(n),
+  value: n
+}))
+
+const COMPANY_BEAR_BAG_OPTIONS = [
+  { label: '是', value: 1 },
+  { label: '否', value: 0 }
+]
+
+function emptyPlatformSlot() {
+  return { rate: undefined, packageFee: undefined }
+}
+
+function emptyPlatformDeduction() {
+  return {
+    mt: emptyPlatformSlot(),
+    tb: emptyPlatformSlot(),
+    jd: emptyPlatformSlot(),
+    applet: emptyPlatformSlot()
+  }
+}
+
+function defaultModel() {
+  return {
+    storeName: '',
+    storeId: '',
+    storeNameArr: [],
+    oldPricingMode: undefined,
+    newPricingMode: undefined,
+    companyBearBag: undefined,
+    platformDeduction: emptyPlatformDeduction(),
+    applyReason: '',
+    storeInfo: null
+  }
+}
+
+function normalizeLocal(v) {
+  const d = defaultModel()
+  if (!v || typeof v !== 'object') return d
+  const merged = { ...d, ...v }
+  if (!Array.isArray(merged.storeNameArr)) merged.storeNameArr = []
+  merged.platformDeduction = {
+    ...emptyPlatformDeduction(),
+    ...(merged.platformDeduction || {})
+  }
+  PLATFORM_ROWS.forEach(({ key }) => {
+    merged.platformDeduction[key] = {
+      ...emptyPlatformSlot(),
+      ...(merged.platformDeduction[key] || {})
+    }
+  })
+  return merged
+}
+
+function applyStoreSelectionLogic(target, storeInfo) {
+  target.storeInfo = storeInfo ?? null
+  const pm = storeInfo?.pricingMode
+  const num = pm === '' || pm == null ? undefined : Number(pm)
+  target.oldPricingMode = Number.isFinite(num) ? num : undefined
+
+  const newPricingMode = num === 1 ? 2 : 1
+  target.newPricingMode = newPricingMode
+  target.platformDeduction = emptyPlatformDeduction()
+
+  if (newPricingMode === 1) {
+    target.companyBearBag = null
+  } else {
+    target.companyBearBag = 1
+  }
+}
+
+function clearAfterStoreReset(target) {
+  target.storeInfo = null
+  target.oldPricingMode = undefined
+  target.newPricingMode = undefined
+  target.companyBearBag = undefined
+  target.platformDeduction = emptyPlatformDeduction()
+}
+
+function stripRichText(val) {
+  if (val == null) return ''
+  return String(val)
+    .replace(/<[^>]*>/g, '')
+    .replace(/&nbsp;/gi, ' ')
+    .trim()
+}
+
+export default {
+  name: 'StorePricingModeSwitchBlock',
+  components: { CusStoreSelect, FcEditorWrapper },
+  props: {
+    modelValue: {
+      type: Object,
+      default: null
+    },
+    formCreateInject: {
+      type: Object,
+      default: null
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const formRef = ref(null)
+    const local = ref(normalizeLocal(props.modelValue))
+    /** 非美团平台是否被用户手动改过（改过则不再跟美团同步） */
+    const platformDirty = reactive({ tb: false, jd: false, applet: false })
+
+    const readOnly = computed(() => !!props.formCreateInject?.preview)
+    const platformRows = PLATFORM_ROWS
+    const deductionSelectOptions = DEDUCTION_SELECT_OPTIONS
+    const packageSelectOptions = PACKAGE_SELECT_OPTIONS
+    const companyBearBagOptions = COMPANY_BEAR_BAG_OPTIONS
+
+    const showDeductionBranch = computed(() => local.value.newPricingMode === 1)
+    const showQuoteBranch = computed(() => local.value.newPricingMode === 2)
+
+    const currentModeBoldText = computed(() => {
+      const m = local.value.oldPricingMode
+      if (m === 1) return '当前模式（扣点）'
+      if (m === 2) return '当前模式（报价）'
+      return '当前模式（—）'
+    })
+
+    const newModeBoldText = computed(() => {
+      const m = local.value.newPricingMode
+      if (m === 1) return '切换新模式（扣点）'
+      if (m === 2) return '切换新模式（报价）'
+      return '切换新模式（—）'
+    })
+
+    const storeNameReadonly = computed(() => {
+      const n = local.value.storeName
+      if (n) return n
+      const arr = local.value.storeNameArr
+      if (Array.isArray(arr) && arr.length && arr[0] && typeof arr[0] === 'object') {
+        return arr[0].label ?? arr[0].name ?? '—'
+      }
+      return '—'
+    })
+
+    function popupContainer(node) {
+      return node?.parentElement ?? document.body
+    }
+
+    function radioLabel(options, value) {
+      if (value === undefined || value === null) return '—'
+      const n = Number(value)
+      const hit = options.find(o => o.value === n || o.value === value)
+      return hit ? hit.label : String(value)
+    }
+
+    function emitChange() {
+      emit('update:modelValue', { ...local.value })
+    }
+
+    function resetPlatformDirty() {
+      platformDirty.tb = false
+      platformDirty.jd = false
+      platformDirty.applet = false
+    }
+
+    function syncFromLeader() {
+      const src = local.value.platformDeduction.mt
+      ;['tb', 'jd', 'applet'].forEach(k => {
+        if (!platformDirty[k]) {
+          local.value.platformDeduction[k].rate = src.rate
+          local.value.platformDeduction[k].packageFee = src.packageFee
+        }
+      })
+    }
+
+    function onPlatformRateChange(platformKey) {
+      if (platformKey === 'mt') {
+        syncFromLeader()
+      } else {
+        platformDirty[platformKey] = true
+      }
+      emitChange()
+      queueMicrotask(() => {
+        formRef.value?.validateFields?.([['platformDeduction', platformKey, 'rate']]).catch(() => {})
+      })
+    }
+
+    function onPlatformPackageChange(platformKey) {
+      if (platformKey === 'mt') {
+        syncFromLeader()
+      } else {
+        platformDirty[platformKey] = true
+      }
+      emitChange()
+      queueMicrotask(() => {
+        formRef.value
+          ?.validateFields?.([['platformDeduction', platformKey, 'packageFee']])
+          .catch(() => {})
+      })
+    }
+
+    function onCompanyBearBagChange() {
+      if (local.value.companyBearBag !== 1) {
+        PLATFORM_ROWS.forEach(({ key }) => {
+          local.value.platformDeduction[key].packageFee = undefined
+        })
+      }
+      emitChange()
+      queueMicrotask(() => {
+        PLATFORM_ROWS.forEach(({ key }) => {
+          formRef.value
+            ?.validateFields?.([['platformDeduction', key, 'packageFee']])
+            .catch(() => {})
+        })
+      })
+    }
+
+    function onApplyReasonUpdate(v) {
+      local.value.applyReason = v ?? ''
+      emitChange()
+      queueMicrotask(() => {
+        formRef.value?.validateFields?.(['applyReason']).catch(() => {})
+      })
+    }
+
+    function nextTickValidate(names) {
+      if (!names?.length) return
+      queueMicrotask(() => {
+        formRef.value?.validateFields?.(names).catch(() => {})
+      })
+    }
+
+    function onStoreChange(value, item) {
+      local.value.storeNameArr = Array.isArray(value) ? value : []
+      resetPlatformDirty()
+      if (!item || item.value == null || item.value === '') {
+        local.value.storeId = ''
+        local.value.storeName = ''
+        clearAfterStoreReset(local.value)
+        emitChange()
+        return
+      }
+      local.value.storeId = item.value
+      local.value.storeName = item.label ?? ''
+      emitChange()
+
+      const api = props.formCreateInject?.api
+      if (!api || typeof api.getStoreInfo !== 'function') return
+
+      api
+        .getStoreInfo(item.value)
+        .then(storeInfo => {
+          resetPlatformDirty()
+          if (storeInfo) applyStoreSelectionLogic(local.value, storeInfo)
+          else clearAfterStoreReset(local.value)
+          emitChange()
+          nextTickValidate(['companyBearBag'])
+        })
+        .catch(() => {})
+    }
+
+    const modeHint = '请选择设置了配送模式的门店/平台'
+
+    const formRules = computed(() => {
+      const v = local.value
+      const rules = {
+        storeNameArr: [
+          {
+            required: true,
+            validator: (_r, val) => {
+              const arr = Array.isArray(val) ? val : []
+              if (arr.length === 0) return Promise.reject(new Error('请选择门店'))
+              return Promise.resolve()
+            },
+            trigger: 'change'
+          }
+        ],
+        applyReason: [
+          {
+            validator: (_r, val) => {
+              if (!stripRichText(val)) return Promise.reject(new Error('请填写申请/备注原因'))
+              return Promise.resolve()
+            },
+            trigger: 'blur'
+          }
+        ],
+        platformRateRules: [
+          {
+            required: true,
+            validator: (_r, val) => {
+              if (v.newPricingMode !== 1) return Promise.resolve()
+              if (val === '' || val === undefined || val === null) {
+                return Promise.reject(new Error('请选择扣点比例'))
+              }
+              const n = Number(val)
+              if (!Number.isFinite(n) || n < 1 || n > 15) {
+                return Promise.reject(new Error('扣点比例须在 1%～15%'))
+              }
+              return Promise.resolve()
+            },
+            trigger: 'change'
+          }
+        ],
+        platformPackageRules: [
+          {
+            validator: (_r, val) => {
+              if (v.newPricingMode !== 1 || v.companyBearBag !== 1) return Promise.resolve()
+              if (val === '' || val === undefined || val === null) {
+                return Promise.reject(new Error('请选择包装费'))
+              }
+              return Promise.resolve()
+            },
+            trigger: 'change'
+          }
+        ]
+      }
+
+      rules.companyBearBag = [
+        {
+          validator: (_r, val) => {
+            if (v.newPricingMode === 1) {
+              if (val !== 0 && val !== 1) {
+                return Promise.reject(new Error('请选择公司承担包装袋'))
+              }
+            } else if (v.newPricingMode === 2) {
+              if (val !== 1) return Promise.reject(new Error('公司承担包装袋须为「是」'))
+            }
+            return Promise.resolve()
+          },
+          trigger: 'change'
+        }
+      ]
+
+      return rules
+    })
+
+    /** 无 name 的展示项：在提交前校验门店已带出模式 */
+    function validateModes() {
+      const v = local.value
+      if (!v.storeId && !v.storeNameArr?.length) return Promise.resolve()
+      if (v.oldPricingMode !== 1 && v.oldPricingMode !== 2) {
+        return Promise.reject(new Error(modeHint))
+      }
+      if (v.newPricingMode !== 1 && v.newPricingMode !== 2) {
+        return Promise.reject(new Error(modeHint))
+      }
+      return Promise.resolve()
+    }
+
+    function validate() {
+      return validateModes().then(() => {
+        if (!formRef.value?.validate) return Promise.resolve()
+        return formRef.value.validate().catch(err => Promise.reject(err || new Error('请完善表单')))
+      })
+    }
+
+    watch(
+      () => props.modelValue,
+      val => {
+        if (val && typeof val === 'object') local.value = normalizeLocal(val)
+      },
+      { deep: true }
+    )
+
+    return {
+      formRef,
+      local,
+      readOnly,
+      platformRows,
+      deductionSelectOptions,
+      packageSelectOptions,
+      companyBearBagOptions,
+      storeNameReadonly,
+      showDeductionBranch,
+      showQuoteBranch,
+      currentModeBoldText,
+      newModeBoldText,
+      formRules,
+      popupContainer,
+      radioLabel,
+      emitChange,
+      onStoreChange,
+      onCompanyBearBagChange,
+      onPlatformRateChange,
+      onPlatformPackageChange,
+      onApplyReasonUpdate,
+      validate
+    }
+  },
+  mounted() {
+    const inj = this.formCreateInject
+    const id = inj?.businessComponentId
+    const registry = inj?.$bcVm || inj?.$handle
+    if (id && registry?.registerBusinessComponent) {
+      registry.registerBusinessComponent(id, this)
+    }
+  },
+  beforeUnmount() {
+    const id = this.formCreateInject?.businessComponentId
+    const registry = this.formCreateInject?.$bcVm || this.formCreateInject?.$handle
+    if (id && registry?.unregisterBusinessComponent) registry.unregisterBusinessComponent(id)
+  },
+  methods: {
+    onSubmitPhase() {
+      return Promise.resolve()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.fc-spsp-block {
+  padding: 0 4px;
+  overflow: visible;
+}
+.fc-spsp-block :deep(.ant-form) {
+  overflow: visible;
+}
+.fc-spsp-block :deep(.ant-form-item) {
+  margin-bottom: 24px;
+}
+.fc-spsp-block :deep(.ant-form-item.ant-form-item-with-help),
+.fc-spsp-block :deep(.ant-form-item.ant-form-item-has-error) {
+  margin-bottom: 24px !important;
+}
+.fc-spsp-block :deep(.ant-form-item-control),
+.fc-spsp-block :deep(.ant-form-item-control-input),
+.fc-spsp-block :deep(.ant-form-item-control-input-content) {
+  overflow: visible !important;
+}
+.fc-spsp-block :deep(.ant-form-item-explain),
+.fc-spsp-block :deep(.ant-form-item-extra) {
+  line-height: 1.5;
+}
+.fc-spsp-block :deep(.ant-form-item .ant-row) {
+  align-items: flex-start;
+}
+.fc-spsp-mode-item :deep(.ant-form-item-label > label) {
+  color: rgba(0, 0, 0, 0.88);
+}
+.fc-spsp-mode-bold {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.88);
+}
+.fc-spsp-section-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.88);
+  margin: 4px 0 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.fc-spsp-platform-wrap {
+  margin-bottom: 12px;
+}
+.fc-spsp-platform-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 8px 12px;
+  margin-bottom: 12px;
+}
+.fc-spsp-platform-label {
+  min-width: 56px;
+  padding-top: 4px;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+}
+.fc-spsp-platform-fields {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 8px;
+  flex: 1;
+  min-width: 0;
+}
+.fc-spsp-inline-item {
+  margin-bottom: 0 !important;
+}
+.fc-spsp-platform-plus {
+  color: rgba(0, 0, 0, 0.45);
+}
+.fc-spsp-platform-static {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.65);
+  white-space: nowrap;
+}
+.fc-spsp-platform-unit {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.45);
+}
+.fc-spsp-hints {
+  margin: 0 0 20px;
+  padding-left: 18px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+  line-height: 1.6;
+}
+.fc-spsp-readonly {
+  color: #333;
+  display: inline-block;
+  min-height: 22px;
+}
+</style>