可视化代码生成平台（低代码）使用文档
<!-- 标题：【开发工具】可视化代码生成平台（低代码）使用文档 --><div style="max-width:980px;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:40px 36px;margin-bottom:32px;">
<div style="margin:0 0 8px;font-size:30px;font-weight:700;">可视化代码生成平台（低代码）使用文档</div>
<div style="margin:0;opacity:.9;">适用于：带后台管理端的业务系统 · 可视化页面生成器 · 仅供后台管理员使用</div>
</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px 24px;margin:16px 0;box-shadow:0 1px 3px rgba(0,0,0,.04);">
<b>一句话定位：</b>它是内置在后台的「可视化页面生成器」。运营/开发在浏览器里拖一拖、填一填，就能生成一套标准的后台管理页（列表 + 表单 + 增删改查），无需打开外部编辑器、无需手写控制器和模板，页面定义存数据库、由通用引擎运行时渲染，可随时改、随时发布。
</div>
<div style="margin:38px 0 14px;font-size:22px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">一、作用（为什么需要它）</div>
<div style="font-size:15px;color:#374151;">业务系统里大量同质化的管理页——会员、订单、商品、财务、工单、文章/知识库……它们的形态几乎都是「一张表 + 列表 + 表单 + 增删改查」。代码生成工具把这种「页面」抽象成<strong>元数据</strong>：</div>
<ul style="font-size:15px;color:#374151;">
<li><code style="background:#0f172a;color:#e2e8f0;padding:2px 7px;border-radius:5px;font-size:13px;">t_codegen_page</code> —— 页面定义；</li>
<li><code style="background:#0f172a;color:#e2e8f0;padding:2px 7px;border-radius:5px;font-size:13px;">t_codegen_field</code> —— 字段定义。</li>
</ul>
<div style="margin:38px 0 14px;font-size:22px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">二、核心优点</div>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;">
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px 18px;"><b style="color:#2563eb;">零代码上手</b><br>拖拽控件 + 属性面板配置，浏览器内完成页面搭建。</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px 18px;"><b style="color:#2563eb;">元数据驱动</b><br>页面与字段全部存库，改定义即改页面。</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px 18px;"><b style="color:#2563eb;">自动建表/加字段</b><br>发布时自动 CREATE TABLE，后续新增字段 ALTER ADD COLUMN。</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px 18px;"><b style="color:#2563eb;">通用 CRUD 引擎</b><br>列表/搜索/分页/字典翻译/多选标签/增改删统一处理。</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px 18px;"><b style="color:#2563eb;">版本快照与回滚</b><br>每次发布前自动快照，可一键回到任意历史版本。</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px 18px;"><b style="color:#2563eb;">可编辑列表</b><br>列表内新增/双击编辑/行内删除，底部统一保存。</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px 18px;"><b style="color:#2563eb;">导航自动挂载</b><br>发布后菜单自动挂到后台左侧（菜单数据源独立维护）。</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px 18px;"><b style="color:#2563eb;">权限隔离</b><br>仅特定管理员角色可访问，普通账号被拦截。</div>
</div>
<div style="margin:38px 0 14px;font-size:22px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">三、功能清单</div>
<div style="margin:24px 0 10px;font-size:17px;font-weight:700;color:#0f172a;">3.1 已落地能力（基础阶段完成）</div>
<table style="width:100%;border-collapse:collapse;margin:14px 0;font-size:14px;background:#fff;">
<tbody><tr><th style="border:1px solid #e5e7eb;padding:9px 12px;background:#f1f5f9;text-align:left;">模块</th><th style="border:1px solid #e5e7eb;padding:9px 12px;background:#f1f5f9;text-align:left;">能力</th><th style="border:1px solid #e5e7eb;padding:9px 12px;background:#f1f5f9;text-align:left;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">路由兜底</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">四级解析</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">物理控制器→模板→引擎页→占位页，新增导航不再 404。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">导航体系</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">数据库化</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">统一由菜单数据表驱动。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">运行时引擎</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">自动列表/搜索/分页/字典翻译</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">引擎按元数据渲染。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">通用保存</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">校验+增改删/批量删</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">字段白名单+系统字段保护。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">发布联动</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">建表/加字段</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">CREATE TABLE / ALTER ADD COLUMN（只增不删）。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">可视化编辑器</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">三栏编辑</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">左控件库/中画布/右属性面板。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">编辑器交互</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">拖拽排序/实时属性编辑</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">纯前端无 Ajax，保存草稿/发布并建表。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">字段安全</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">停用不删列/路径/表名锁定</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">已发布页面路径与表名不可改。</td></tr>
</tbody></table>
<div style="margin:24px 0 10px;font-size:17px;font-weight:700;color:#0f172a;">3.2 增强能力（进阶阶段）</div>
<table style="width:100%;border-collapse:collapse;margin:14px 0;font-size:14px;background:#fff;">
<tbody><tr><th style="border:1px solid #e5e7eb;padding:9px 12px;background:#f1f5f9;text-align:left;">能力</th><th style="border:1px solid #e5e7eb;padding:9px 12px;background:#f1f5f9;text-align:left;">状态</th><th style="border:1px solid #e5e7eb;padding:9px 12px;background:#f1f5f9;text-align:left;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">历史版本与一键回滚</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">✅ 已落地</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">快照到版本表。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">系统字段自动写入</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">✅ 已落地</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">主键/排序/启用/创建/修改时间自动进定义。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">列表内启用/停用</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">✅ 已落地</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">0/1 字段无需进编辑页即可切换。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">可编辑列表</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">✅ 已落地</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">列表内增行/双击编辑/行内删除，底部保存。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">关联表取值（ref 字典）</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">已可用</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">ref:表名,id列,名称列，跨表下拉。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">字段联动/简单公式</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">规划中</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">条件组合/联动运算控件已存在，业务联动待完善。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">一键导出物理文件</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">规划中</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">导出控制器+模板物理文件。</td></tr>
</tbody></table>
<div style="margin:24px 0 10px;font-size:17px;font-weight:700;color:#0f172a;">3.3 控件库</div>
<ul style="font-size:15px;color:#374151;">
<li><b>基础输入：</b>单行/多行文本、数字、开关、颜色、密码/密钥；</li>
<li><b>选择项：</b>select、单选、多选（支持 ref 关联或 值=标签 字典）；</li>
<li><b>日期时间：</b>日期、日期时间；</li>
<li><b>富文本/地区：</b>富文本、行政区划；</li>
<li><b>资源：</b>图片、多图、视频、附件、远程资源；</li>
<li><b>高级：</b>标签、滑块、评分、图标、只读、随机、导航菜单、分隔线；</li>
<li><b>多行数据：</b>键值对、多行表格；</li>
<li><b>逻辑/价格：</b>条件组合、联动运算、价格矩阵。</li>
</ul>
<div style="background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:10px;padding:14px 18px;font-size:14px;">字典写法：静态 — 1=启用\n0=不启用；关联表 — ref:t_demo_category,id,name。</div>
<div style="margin:38px 0 14px;font-size:22px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">四、典型使用流程</div>
<div style="display:flex;gap:14px;margin:10px 0;"><div style="flex:0 0 28px;height:28px;background:#2563eb;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;">1</div><div style="font-size:15px;color:#374151;">进工具：后台「系统→开发工具→代码生成」（仅授权角色）。</div></div>
<div style="display:flex;gap:14px;margin:10px 0;"><div style="flex:0 0 28px;height:28px;background:#2563eb;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;">2</div><div style="font-size:15px;color:#374151;">新建页面：填 路径、数据表名、标题、菜单归属。</div></div>
<div style="display:flex;gap:14px;margin:10px 0;"><div style="flex:0 0 28px;height:28px;background:#2563eb;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;">3</div><div style="font-size:15px;color:#374151;">配置字段：拖入控件，设字段名/类型/控件/字典/必填等。</div></div>
<div style="display:flex;gap:14px;margin:10px 0;"><div style="flex:0 0 28px;height:28px;background:#2563eb;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;">4</div><div style="font-size:15px;color:#374151;">保存草稿：前端暂存，刷新可复原。</div></div>
<div style="display:flex;gap:14px;margin:10px 0;"><div style="flex:0 0 28px;height:28px;background:#2563eb;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;">5</div><div style="font-size:15px;color:#374151;">发布并建表：upsert 定义 + CREATE/ALTER + 菜单挂载 + 快照。</div></div>
<div style="display:flex;gap:14px;margin:10px 0;"><div style="flex:0 0 28px;height:28px;background:#2563eb;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;">6</div><div style="font-size:15px;color:#374151;">使用：左侧菜单进入，增删改查即用，可随时重发（带回滚）。</div></div>
<div style="margin:38px 0 14px;font-size:22px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">五、用本工具产出的示例模块</div>
<table style="width:100%;border-collapse:collapse;margin:14px 0;font-size:14px;background:#fff;">
<tbody><tr><th style="border:1px solid #e5e7eb;padding:9px 12px;background:#f1f5f9;text-align:left;">页面</th><th style="border:1px solid #e5e7eb;padding:9px 12px;background:#f1f5f9;text-align:left;">示例表</th><th style="border:1px solid #e5e7eb;padding:9px 12px;background:#f1f5f9;text-align:left;">菜单</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">客户管理</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">t_demo_customer</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">客户中心→客户管理</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">商品分类</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">t_demo_category</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">商品中心→商品分类</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">商品管理</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">t_demo_goods</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">商品中心→商品管理</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">订单管理</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">t_demo_order</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">交易→订单管理</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">文章管理</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">t_demo_article</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">内容→文章管理</td></tr>
</tbody></table>
<div style="background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:10px;padding:12px 16px;font-size:13px;">注：以上表名（t_demo_*）仅为文档示例，实际使用时由你在「新建页面」时自定义业务表名。</div>
<div style="margin:38px 0 14px;font-size:22px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">六、适用与不适用</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px 24px;margin:16px 0;">
<div style="font-size:17px;font-weight:700;color:#0f172a;">✅ 适合</div>
<ul style="font-size:15px;color:#374151;"><li>标准后台管理页（列表+表单+增删改查）；</li><li>业务表稳定、键值型字段；</li><li>需快速搭建或频繁小改；</li><li>运营自助配置。</li></ul>
<div style="font-size:17px;font-weight:700;color:#0f172a;">⚠️ 不适合（应手写）</div>
<ul style="font-size:15px;color:#374151;"><li>强业务逻辑流程（支付/开通/计费）；</li><li>复杂事务/跨表计算/外部 API 编排；</li><li>前台营销页（SEO/SSR）或会员中心定制页；</li><li>极致性能聚合报表。</li></ul>
</div>
<div style="margin:38px 0 14px;font-size:22px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">七、访问与安全</div>
<ul style="font-size:15px;color:#374151;">
<li>入口：<code style="background:#0f172a;color:#e2e8f0;padding:2px 7px;border-radius:5px;font-size:13px;">/admin/codegen</code>；页面运行在 <code style="background:#0f172a;color:#e2e8f0;padding:2px 7px;border-radius:5px;font-size:13px;">/admin/<path></code>。</li>
<li>权限：仅指定角色可访问，普通账号 403。</li>
<li>导航数据源：统一菜单数据表。</li>
</ul>
<div style="margin:38px 0 14px;font-size:22px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">八、技术结构速查（通用视角）</div>
<table style="width:100%;border-collapse:collapse;margin:14px 0;font-size:14px;background:#fff;">
<tbody><tr><th style="border:1px solid #e5e7eb;padding:9px 12px;background:#f1f5f9;text-align:left;">对象</th><th style="border:1px solid #e5e7eb;padding:9px 12px;background:#f1f5f9;text-align:left;">职责</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">构建器入口</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">工具首页/路线图/权限校验</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">页面渲染引擎</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">运行时读取元数据渲染列表/表单/保存</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">页面管理模块</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">页面定义 CRUD/字段编辑</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">字段/控件服务</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">控件清单/字典解析/系统字段</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">可视化编辑器前端</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">三栏拖拽编辑器（控件库/画布/属性面板）</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">元数据表</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">页面定义表/字段定义表（如 t_codegen_page / t_codegen_field）</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:9px 12px;">版本快照表</td><td style="border:1px solid #e5e7eb;padding:9px 12px;">发布快照（如 t_codegen_rev），支撑回滚</td></tr>
</tbody></table>
<div style="background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:10px;padding:14px 18px;font-size:14px;"><b>注意：</b>改定义=改页面；导出物理文件能力规划中；已发布页面 路径/表名 锁定。</div>
</div>
页:
[1]