100 lines
4.4 KiB
HTML
100 lines
4.4 KiB
HTML
<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>
|