编辑器核心概念说明 可视化代码生成平台 · 控件面板 / 控件属性 / 控件分组

农哥

编辑器核心概念说明

可视化代码生成平台 · 控件面板 / 控件属性 / 控件分组

一句话：控件面板提供「能放什么」、控件属性决定「这个具体长啥样 / 存哪」、控件分组管「怎么归类、前台怎么分段」——三者配合，非开发也能拼出规范、可维护的业务表单。

一、控件面板（控件库）

底部悬浮的「胶囊按钮区」，按分组一行行陈列所有可用控件（单行文本、下拉、会员价格、自动编号……），点一下就往画布末尾追加一个字段。位置 / 收起状态记在 localStorage，刷新后仍在原地。

维度	说明
作用	搭页面的「原材料货架」——所有可拖进表单的控件集中一处，不用手写代码；控件按分组排成一行行胶囊，可拖走、可收起。
好处	① 零记忆成本：不用记控件长啥样、叫啥名，看着点就行；② 随手可取：悬浮底部不占画布栅格，随时点随时加；③ 可定制货架：右键控件「移动到分组」，把常用控件归到自己组，团队按需组织。

二、控件属性（字段属性面板）

画布右侧停靠的属性框——选中某个字段后，这里显示它的标题、字段名、数据库类型、默认值、是否必填 / 列表 / 搜索、外观行为属性等，改完实时生效并随保存入库。

维度	说明
作用	给「单个控件实例」做配置：同一类控件（如两个单行文本）靠属性区分出「手机号」「邮箱」。覆盖三层：基础信息（名 / 类型 / 必填）、业务开关（列表 / 搜索）、外观行为（🎨 外观 N 项，如 placeholder、选项源）。
好处	① 一处配置、即时预览：改属性画布立刻变，所见即所得；② 复用 + 差异：控件模板统一，实例各配各的，既规范又灵活；③ 降门槛：把数据库字段、校验、展示逻辑收敛成一个表单，非开发也能配。

三、控件分组（分组管理）

两处复用同一份「分组名单」：
· 控件库侧：分组名当页签，下方只显示该组控件（如「基础 / 电商 / 域名」）；
· 画布侧：把字段归到分组，发布后前台按分组渲染成表单页签 / 区块（如「基本配置 / 联系方式 / 公司信息」）。

维度	说明
作用	点标签＝把当前选中字段归组；「✎ 编辑名单」可增 / 改 / 删 / 排序，改名自动同步组内全部字段，删组＝字段回「基本」。名单随保存入库，空分组也保留（页签布局下照样出这个页签，里面是空提示）。
好处	① 大表单不混乱：几十个字段按业务切成区块 / 页签，编辑和填写都清晰；② 一套分类两处受益：控件库怎么归类，前台页面就怎么分段，心智模型统一；③ 可演进：分组改名 / 调序不丢数据，空分组也占位，改版安全。

四、三者协作关系

环节	由谁负责
选择放什么控件	控件面板（从货架取料，追加到画布）
配置这个控件	控件属性（字段名 / 类型 / 必填 / 列表搜索 / 外观行为）
归类与分段	控件分组（控件库分类 + 前台页签 / 区块）

流程：控件面板取料 → 控件属性定型 → 控件分组归位，发布即生成规范可维护的业务表单。

本文档随控件文档一同维护，路径：public/widgets/编辑器概念说明.html