Add in-design tweak controls

# 电商详情页模板可调参数改造方案

一、实现思路

核心是把「写死的代码」改成「配置驱动」，即运营改配置项，页面自动生效，无需碰代码。常用方式有两种：

• 后台可视化配置：在CMS或自建运营后台加表单，运营填写参数，存库后前端读取渲染（推荐，适合长期）
• 配置文件方案：模板读取JSON/YAML配置，运营改文件即可（轻量，适合快速上线）

二、需要开放的三个参数设计

1. 主图尺寸

• 提供宽高输入框 + 预设选项（如 1:1 / 3:4 / 自定义）
• 建议限定范围（如最小300px、最大不超过容器宽度），防止运营设出破版尺寸
• 保存后主图区域自适应，图片按比例缩放不变形

2. 价格标签颜色

• 使用颜色选择器（color picker），支持色板+自定义输入色值
• 可同时开放：标签背景色、文字颜色、圆角大小，提升灵活性
• 内置几套预设配色（红促、金尊、绿惠等），降低运营选择成本

3. 促销角标文案

• 纯文本输入框，限制字数（如10-20字内），避免溢出
• 支持预留变量，如 {discount} 自动填充折扣数（可选进阶功能）
• 可顺带开放角标位置（左上/右上）和背景样式

三、落地步骤（以最简配置文件方案为例）

1. 抽离模板中主图尺寸、价格样式、角标文案为变量

2. 新建 config.json，字段如：

```json

{

"mainImage": { "width": 750, "ratio": "1:1" },

"priceTag": { "bgColor": "#ff4d4f", "textColor": "#ffffff" },

"cornerText": "限时直降"

}

```

3. 页面初始化时读取配置渲染

4. 加参数校验（尺寸范围、色值格式、文案字数），防止填错导致页面异常

四、注意事项

• 默认值兜底：配置缺失或非法时回退到默认样式，保证页面永不白屏
• 改动留痕：后台方案建议记录修改人和时间，方便追溯
• 预览功能：让运营保存前先预览效果，减少误操作返工

按此改造后，运营在后台或改配置文件即可自助调整，前端无需介入。