分隔线 控件 可视化代码生成平台 · 辅助类控件
<div style="max-width:920px;margin:0 auto;font-family:-apple-system,'Microsoft YaHei',sans-serif;color:#1f2937;line-height:1.7;">
<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;">分隔线 控件</div>
<div style="margin:0;opacity:.9;">可视化代码生成平台 · 辅助类控件（12/14）</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>纯排版元素，把表单按区块分组，如"基础信息 / 价格库存 / 高级配置"之间加一道分隔。<br>
<b>存储：</b><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;">
<tbody><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;">水平分隔线，可居中显示分隔文字（如"价格库存"）。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>行为交互</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">纯展示，无输入；线型可选实线/虚线/点线。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>样式</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">线型、上下间距、文字位置与颜色可配。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>数据</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">无——不建列、不入库、不参与增删改查；仅排版，删除即移除。</td></tr>
</tbody></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;">
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tbody><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><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><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><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><td style="border:1px solid #e5e7eb;padding:7px 10px;">与上下控件的距离（px）。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">显示</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">排序权重</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><td style="border:1px solid #e5e7eb;padding:7px 10px;">停用即移除该排版线（无数据影响）。</td></tr>
</tbody></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;">带文字的分隔线（虚线）</span>
<div style="border-top:1px dashed #cbd5e1;height:0;margin:14px 0;"></div>
<div style="text-align:center;color:#94a3b8;font-size:13px;">价格与库存</div>
<pre style="background:#0f172a;color:#e2e8f0;padding:10px 14px;border-radius:8px;font-size:12px;overflow:auto;margin:10px 0 0;">控件: divider | 文字: 价格与库存 | 线型: 虚线 | 间距: 16</pre>
</div>
<div style="background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:10px;padding:12px 16px;font-size:14px;margin:12px 0;">技巧：分隔线不在业务表建字段，因此没有"停用/复活"概念，删除即移除排版；用它把长表单切成区块，录入体验更好。</div>
<div style="margin-top:36px;color:#6b7280;font-size:13px;text-align:center;">分隔线 控件文档 · 随工具迭代更新</div></div>
页:
[1]