条件组合（AND/OR） 控件 可视化代码生成平台 · 复合数据控件
<div style="background:linear-gradient(135deg,#1e3a8a,#2563eb);color:#fff;border-radius:16px;padding:34px 32px;margin-bottom:24px;">
<div style="margin:0 0 6px;font-size:28px;font-weight:700;">条件组合（AND/OR） 控件</div>
<div style="margin:0;opacity:.9;">可视化代码生成平台 · 复合数据控件（24/27）</div>
</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:16px 0;box-shadow:0 1px 3px rgba(0,0,0,.04);">
<b>用途：</b>让用户在表单里搭"条件规则"——多个变量用 AND/OR 组合（如 金额>100 且 地区=华南），存成规则 JSON。<br>
<b>存储：</b><code style="background:#0f172a;color:#e2e8f0;padding:2px 7px;border-radius:5px;font-size:13px;">text（存规则 JSON）。</code><br>
<b>列表/搜索：</b>不进搜索；详情展示。<br>
<b>适用：</b>促销规则、筛选条件、工作流判断等需要"用户自定义逻辑"的场景。
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">控件解析（外观 · 行为交互 · 样式 · 数据）</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:14px 0;">
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:8px 12px;background:#f1f5f9;width:96px;">维度</th><th style="border:1px solid #e5e7eb;padding:8px 12px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>外观</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">条件行（变量下拉 · 运算符 · 值）+ AND/OR 连接切换 + 增删行；顶部选整体逻辑。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>行为交互</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">加行/删行；切换 AND/OR；选变量后按变量类型出对应值输入。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>样式</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">运算符集合、变量列表由 dict 配置；样式随主题。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>数据</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">整组规则以 JSON 存 text；dict 配"可选变量"（变量名=中文名）。</td></tr>
</table>
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">属性面板（右侧）功能详解</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:14px 0;">
<div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">① 基础设置</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">字段名</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">业务表列名（text）。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">标签</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">如"优惠条件"。</td></tr>
</table><div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">② 变量配置（dict）</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">可选变量</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">每行 变量名=中文名，如 amount=订单金额、qty=订单数量。</td></tr>
</table><div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">③ 逻辑</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">AND/OR</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">整体与/或切换；多行间连接。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">运算符</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">大于/小于/等于/包含等。</td></tr>
</table><div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">④ 高级</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">启用 / 停用</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">停用仅隐藏。</td></tr>
</table>
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">演示</div>
<div style="background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;padding:14px 16px;margin:12px 0;">
<span style="font-size:13px;color:#6b7280;display:block;margin-bottom:6px;">优惠条件（AND/OR）</span>
<div style="font-size:13px;border:1px solid #e5e7eb;border-radius:8px;padding:8px;color:#374151;">
<select style="padding:4px 6px;border:1px solid #cbd5e1;border-radius:6px;"><option>订单金额</option></select>
<select style="padding:4px 6px;border:1px solid #cbd5e1;border-radius:6px;"><option>></option></select>
<input value="100" style="width:60px;padding:4px 6px;border:1px solid #cbd5e1;border-radius:6px;"><br>
<span style="color:#2563eb;font-weight:600;">且(AND)</span><br>
<select style="padding:4px 6px;border:1px solid #cbd5e1;border-radius:6px;"><option>地区</option></select>
<select style="padding:4px 6px;border:1px solid #cbd5e1;border-radius:6px;"><option>=</option></select>
<input value="华南" style="width:60px;padding:4px 6px;border:1px solid #cbd5e1;border-radius:6px;">
</div>
</div>
<div style="background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:10px;padding:12px 16px;font-size:14px;margin:12px 0;">技巧：条件组合把"业务规则"交给用户搭；取值时解析 JSON 逐条判定。变量列表写在 dict，变量名要和后端判定逻辑对应。</div>
<div style="margin-top:36px;color:#6b7280;font-size:13px;text-align:center;">条件组合（AND/OR） 控件文档 · 随工具迭代更新</div>
页:
[1]