⚠ Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠ You can decompress Drawing data with the command palette: ‘Decompress current Excalidraw file’. For more info check in plugin settings under ‘Saving’
Excalidraw Data
Text Elements
“UI Component (MarketingObjectiveList)”
“UI Component (MarketingObjectiveList)”
“useModule / SchemaModule (@ad/ad-create-core)”
“useModule / SchemaModule (@ad/ad-create-core)”
“biz 包 (Field Objects)”
“biz 包 (Field Objects)”
“MobX Store (CampaignModel)”
“MobX Store (CampaignModel)”
“formatter (transCampaignToServer)”
“formatter (transCampaignToServer)”
“Swagger Service (CampaignController)”
“Swagger Service (CampaignController)”
“Backend /rest/esp/promotion/campaign”
“Backend /rest/esp/promotion/campaign”
用户点击「商品推广」卡片
用户选择「商品售卖」场景 → 「通投广告」→「自定义」
用户切换「预算智投」→「开启」
用户填写「计划预算」500元
用户点击「下一步」提交
onChange(EMarketingObjective.product)
触发 FieldMarketingObjectiveWatcher(newV, oldV, formHelper, ctx)
formHelper.setFieldValue(‘deliveryScenario’, firstScenario) 自动将投放场景重置为该营销目标的默认值
groupValues.marketingObjective = 1 groupValues.deliveryScenario = productSale (MobX observable 更新)
observer 触发重渲染
deliveryScenario 列表重新渲染 (RenderDeliveryScenario 读取新的 marketingObjective)
各字段 onChange 传播
FieldDeliveryScenarioWatcher / FieldAdTypeWatcher 联动
级联更新 adType、deliveryMethod
groupValues 中各字段逐一更新
budgetSmartAllocation onChange(EBudgetSmartAllocation.open)
budgetSmartAllocationWatcher 触发
校验/更新 speed (强制为 costCap)
isCBO computed 变为 true
Budget 组件 disabledUnlimited=true 预算「不限」选项禁用
budget.onChange({ dayBudgetType: days, dayBudget: 500 })
budgetWatcher → 类型变化时 clearFieldError(‘budget’)
validateTrigger onValidate → budgetValidator(value, {budgetSmartAllocation}, ctx)
验证通过 (≥500元)
store.models.campaign.submit(data)
transCampaignToServer({ version, setting })
CampaignCreateReq DTO {marketingObjective:1, deliveryScenario:1, adType:1, deliveryMethod:2, dayBudget:50000(厘), budgetType:1 …}
createCampaignPost(CampaignCreateReq)
POST /rest/esp/promotion/campaign/create
{data: {campaignId: 123}}
campaignIdData
message.success(‘计划创建成功’)
跳转至广告组/创意步骤
- 提交
CampaignModel.submit()\n区分 add / modify 模式
transCampaignToServer()\nform values → CampaignCreateReq DTO\ndayBudget: toCent(500) = 50000 (厘)
createCampaignPost()\nPOST /rest/esp/promotion/campaign/create\n带 refactorVersion=PC_V3 (白名单)
返回 campaignId\n跳转广告组/创意步骤
- 校验
validateTrigger: onValidate\n(点击下一步时触发)
budgetValidator(value, {budgetSmartAllocation}, ctx)\n根据 EVersion / isCBO / speed\n动态计算 min/max\n普通:5001亿 / CBO:50010万
campaignNameValidator\nonBlur 时触发\n调用 fetchUniqueName API 异步校验唯一性
3b. 预算智投 联动
用户开启预算智投\nbudgetSmartAllocationWatcher
isCBO computed = true\nBudget.disabledUnlimited=true\n「不限」选项禁用
budget isShow = deliveryMethod !== host\n托管投放不展示计划预算
- 用户交互 → 联动
用户点击「商品推广」\nonChange(EMarketingObjective.product=1)
FieldMarketingObjectiveWatcher 触发\nformHelper.setFieldValue\n(‘deliveryScenario’, productSale)
FieldDeliveryScenarioWatcher\n级联重置 adType
FieldAdTypeWatcher\n级联重置 deliveryMethod
MobX groupValues 更新\n→ observer 触发重渲染\n下游字段选项/isShow 变化
- 表单渲染
CampaignVersionModule\nuseModule({ watch, schema })
SchemaModule + FieldRender\n用 schema 描述每个字段\n传入 component / validate / isShow
MarketingObjectiveList\nDeliveryScenarioList\nAdType Selector\nDeliveryMethod Selector
- 初始化 (页面挂载)
CampaignInitialValues\n从 whiteList 读取白名单\n决定默认营销目标/场景/方式
CampaignModel.groupValues\n= CampaignInitialValues\n(MobX makeAutoObservable)