编辑器核心概念说明 可视化代码生成平台 · 控件面板 / 控件属性 / 控件分组
<div class="ed-concepts" 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;">可视化代码生成平台 · 控件面板 / 控件属性 / 控件分组</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><b>控件面板</b>提供「能放什么」、<b>控件属性</b>决定「这个具体长啥样 / 存哪」、<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;">
<p style="margin:0 0 10px;">底部悬浮的「胶囊按钮区」，按分组一行行陈列所有可用控件（单行文本、下拉、会员价格、自动编号……），点一下就往画布末尾追加一个字段。位置 / 收起状态记在 <code style="background:#0f172a;color:#e2e8f0;padding:2px 7px;border-radius:5px;font-size:13px;">localStorage</code>，刷新后仍在原地。</p>
<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;"><b>① 零记忆成本</b>：不用记控件长啥样、叫啥名，看着点就行；<b>② 随手可取</b>：悬浮底部不占画布栅格，随时点随时加；<b>③ 可定制货架</b>：右键控件「移动到分组」，把常用控件归到自己组，团队按需组织。</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;">
<p style="margin:0 0 10px;">画布右侧停靠的属性框——选中某个字段后，这里显示它的标题、字段名、数据库类型、默认值、是否必填 / 列表 / 搜索、外观行为属性等，改完实时生效并随保存入库。</p>
<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;">给「单个控件实例」做配置：同一类控件（如两个单行文本）靠属性区分出「手机号」「邮箱」。覆盖三层：基础信息（名 / 类型 / 必填）、业务开关（列表 / 搜索）、外观行为（🎨 外观 N 项，如 placeholder、选项源）。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>好处</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>① 一处配置、即时预览</b>：改属性画布立刻变，所见即所得；<b>② 复用 + 差异</b>：控件模板统一，实例各配各的，既规范又灵活；<b>③ 降门槛</b>：把数据库字段、校验、展示逻辑收敛成一个表单，非开发也能配。</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;">
<p style="margin:0 0 10px;">两处复用同一份「分组名单」：<br>
· <b>控件库侧</b>：分组名当页签，下方只显示该组控件（如「基础 / 电商 / 域名」）；<br>
· <b>画布侧</b>：把字段归到分组，发布后前台按分组渲染成<b>表单页签 / 区块</b>（如「基本配置 / 联系方式 / 公司信息」）。</p>
<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;"><b>① 大表单不混乱</b>：几十个字段按业务切成区块 / 页签，编辑和填写都清晰；<b>② 一套分类两处受益</b>：控件库怎么归类，前台页面就怎么分段，心智模型统一；<b>③ 可演进</b>：分组改名 / 调序不丢数据，空分组也占位，改版安全。</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:8px 12px;background:#f1f5f9;width:130px;">环节</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>
</tbody></table>
<p style="margin:12px 0 0;">流程：<b>控件面板</b>取料 → <b>控件属性</b>定型 → <b>控件分组</b>归位，发布即生成规范可维护的业务表单。</p>
</div>
<div style="background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:14px 18px;margin:20px 0;font-size:13px;color:#64748b;">
本文档随控件文档一同维护，路径：<code style="background:#0f172a;color:#e2e8f0;padding:2px 7px;border-radius:5px;">public/widgets/编辑器概念说明.html</code>
</div>
</div>
页:
[1]