feat: expand EasyCode software factory workflows
This commit is contained in:
王鹏
@@ -0,0 +1,99 @@
|
||||
<h2>A 方案细化：集成式页面设计工作台</h2>
|
||||
<p class="subtitle">一期不做万能低代码平台，先在现有“项目生成工作台”里新增一个可视化步骤，服务于模板生成。</p>
|
||||
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">页面设计器主界面</div>
|
||||
<div class="mockup-body" style="display:grid; gap:12px;">
|
||||
<div style="display:grid; grid-template-columns: 220px minmax(360px, 1fr) 280px; gap:12px; min-height:360px;">
|
||||
<div class="mock-sidebar" style="display:grid; align-content:start; gap:10px;">
|
||||
<div class="label">菜单与页面</div>
|
||||
<div style="padding:10px; background:#e8f1ff; border-radius:6px; border-left:4px solid #2563eb;">
|
||||
图书目录<br><small>/books · 列表页</small>
|
||||
</div>
|
||||
<div style="padding:10px; background:#fff; border-radius:6px;">
|
||||
图书详情<br><small>/books/:id · 详情页</small>
|
||||
</div>
|
||||
<div style="padding:10px; background:#fff; border-radius:6px;">
|
||||
我的借阅<br><small>/my-borrows · 当前用户列表</small>
|
||||
</div>
|
||||
<button class="mock-button">+ 添加菜单</button>
|
||||
<button class="mock-button">+ 添加子页面</button>
|
||||
</div>
|
||||
|
||||
<div class="mock-content" style="display:grid; align-content:start; gap:10px;">
|
||||
<div class="label">页面画布：列表页布局</div>
|
||||
<div class="placeholder" style="height:52px;">
|
||||
查询区：书名、分类、状态、创建时间
|
||||
</div>
|
||||
<div class="placeholder" style="height:48px;">
|
||||
工具栏：新增、导出、批量删除、业务按钮
|
||||
</div>
|
||||
<div class="placeholder" style="height:118px;">
|
||||
表格：封面、书名、作者、库存、状态、更新时间、行操作
|
||||
</div>
|
||||
<div class="placeholder" style="height:48px;">
|
||||
分页：页码 / 每页条数 / 总数
|
||||
</div>
|
||||
<div class="placeholder" style="height:54px;">
|
||||
弹窗表单：新增 / 编辑字段布局
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mock-sidebar" style="display:grid; align-content:start; gap:10px;">
|
||||
<div class="label">属性面板</div>
|
||||
<input class="mock-input" placeholder="页面名称：图书目录">
|
||||
<input class="mock-input" placeholder="绑定表：book_info">
|
||||
<input class="mock-input" placeholder="页面类型：list">
|
||||
<input class="mock-input" placeholder="显示字段：6 个">
|
||||
<input class="mock-input" placeholder="查询字段：4 个">
|
||||
<input class="mock-input" placeholder="按钮动作：新增 / 导出">
|
||||
<button class="mock-button">保存页面设计</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="split">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">一期保存的核心 DSL</div>
|
||||
<div class="mockup-body">
|
||||
<pre style="margin:0; white-space:pre-wrap; font-size:12px;">appBlueprint.frontendPages[].layout = {
|
||||
pageType: "list",
|
||||
tableName: "book_info",
|
||||
regions: [
|
||||
{ type: "query", fields: ["title", "category", "status"] },
|
||||
{ type: "toolbar", actions: ["create", "export"] },
|
||||
{ type: "table", fields: ["cover", "title", "stock"] },
|
||||
{ type: "form", fields: ["title", "author", "price"] }
|
||||
]
|
||||
}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">生成链路</div>
|
||||
<div class="mockup-body" style="display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:10px;">
|
||||
<div class="placeholder">保存布局</div>
|
||||
<div class="placeholder">校验字段/动作</div>
|
||||
<div class="placeholder">Velocity 读取 DSL</div>
|
||||
<div class="placeholder">生成 Vue 页面</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="options">
|
||||
<div class="option" data-choice="frontend-only" onclick="toggleSelect(this)">
|
||||
<div class="letter">1</div>
|
||||
<div class="content">
|
||||
<h3>一期只做用户前台页面</h3>
|
||||
<p>覆盖 frontendMenus / frontendPages / qing 前台模板，先把面向用户的页面生成做漂亮、做稳。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" data-choice="frontend-and-admin" onclick="toggleSelect(this)">
|
||||
<div class="letter">2</div>
|
||||
<div class="content">
|
||||
<h3>一期同时做前台 + 后台管理页</h3>
|
||||
<p>设计器范围更完整，但会同时牵动 qing 前台模板和 RuoYi 后台 Vue 模板，交付风险更高。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,117 @@
|
||||
<h2>菜单与页面设计器方案草图</h2>
|
||||
<p class="subtitle">目标是把“菜单、页面布局、字段显示、按钮动作、模板生成”串成一个可保存、可预览、可生成代码的设计工作台。先看 3 个落地方向，点选你更偏好的方向。</p>
|
||||
|
||||
<div class="cards">
|
||||
<div class="card" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="card-image">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">A. 集成到现有生成工作台</div>
|
||||
<div class="mockup-body" style="display:grid; gap:10px;">
|
||||
<div style="display:grid; grid-template-columns: 180px 1fr 220px; gap:10px; min-height:220px;">
|
||||
<div class="mock-sidebar">
|
||||
<div class="label">菜单树</div>
|
||||
<div style="padding:8px; background:#e8f1ff; border-radius:6px; margin-top:10px;">图书目录</div>
|
||||
<div style="padding:8px; margin-top:6px;">我的借阅</div>
|
||||
<div style="padding:8px; margin-top:6px;">订单记录</div>
|
||||
</div>
|
||||
<div class="mock-content">
|
||||
<div class="label">页面画布</div>
|
||||
<div class="placeholder" style="height:36px;">搜索区：书名 / 分类 / 状态</div>
|
||||
<div class="placeholder" style="height:52px;">工具栏：新增 / 导出 / 批量删除</div>
|
||||
<div class="placeholder" style="height:92px;">表格列：书名、作者、库存、状态、操作</div>
|
||||
</div>
|
||||
<div class="mock-sidebar">
|
||||
<div class="label">属性面板</div>
|
||||
<input class="mock-input" placeholder="页面标题">
|
||||
<input class="mock-input" placeholder="绑定数据表">
|
||||
<button class="mock-button">保存设计</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>A. 轻量集成版（推荐先做）</h3>
|
||||
<p>在 easycode-web 的生成页中新增“页面设计”步骤，复用现有 appBlueprint、database、businessActions。实现最快，风险最低。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="card-image">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">B. 独立低代码设计器</div>
|
||||
<div class="mockup-body" style="display:grid; gap:10px;">
|
||||
<div style="display:grid; grid-template-columns: 160px 1fr 260px; gap:10px; min-height:220px;">
|
||||
<div class="mock-sidebar">
|
||||
<div class="label">组件库</div>
|
||||
<button class="mock-button">查询表单</button>
|
||||
<button class="mock-button">数据表格</button>
|
||||
<button class="mock-button">详情卡片</button>
|
||||
<button class="mock-button">动作按钮</button>
|
||||
</div>
|
||||
<div class="mock-content">
|
||||
<div class="label">拖拽画布</div>
|
||||
<div class="placeholder" style="height:50px;">Header</div>
|
||||
<div class="placeholder" style="height:110px;">Grid / Form / Table 自由组合</div>
|
||||
<div class="placeholder" style="height:42px;">Footer Actions</div>
|
||||
</div>
|
||||
<div class="mock-sidebar">
|
||||
<div class="label">配置</div>
|
||||
<input class="mock-input" placeholder="组件 ID">
|
||||
<input class="mock-input" placeholder="字段映射">
|
||||
<input class="mock-input" placeholder="按钮动作">
|
||||
<input class="mock-input" placeholder="权限规则">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>B. 完整低代码版</h3>
|
||||
<p>独立页面设计器，支持组件库、嵌套容器、拖拽排序、响应式布局、权限和动作绑定。能力强，但一期范围会明显变大。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="c" onclick="toggleSelect(this)">
|
||||
<div class="card-image">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">C. AI 蓝图 + 人工微调</div>
|
||||
<div class="mockup-body" style="display:grid; gap:10px;">
|
||||
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:10px; min-height:220px;">
|
||||
<div class="mock-content">
|
||||
<div class="label">AI 生成结构</div>
|
||||
<div class="placeholder" style="height:44px;">菜单与页面</div>
|
||||
<div class="placeholder" style="height:44px;">字段显示规则</div>
|
||||
<div class="placeholder" style="height:44px;">按钮与业务动作</div>
|
||||
<div class="placeholder" style="height:44px;">模板参数</div>
|
||||
</div>
|
||||
<div class="mock-content">
|
||||
<div class="label">人工确认</div>
|
||||
<div class="placeholder" style="height:76px;">可视化微调</div>
|
||||
<div class="placeholder" style="height:76px;">JSON 差异对照</div>
|
||||
<button class="mock-button">确认并生成模板</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>C. AI 辅助配置版</h3>
|
||||
<p>让 AI 先生成页面布局 DSL，再由用户在可视化界面修正。很贴合当前 AI 任务链，但需要更强的校验和回滚。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>我建议的一期边界</h3>
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">一期先打通闭环：设计 -> 保存 -> 预览 -> 模板生成</div>
|
||||
<div class="mockup-body" style="display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap:10px;">
|
||||
<div class="placeholder">菜单树</div>
|
||||
<div class="placeholder">页面 DSL</div>
|
||||
<div class="placeholder">字段显示</div>
|
||||
<div class="placeholder">按钮绑定</div>
|
||||
<div class="placeholder">Velocity 生成</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user