A 方案：集成式页面设计工作台

一期先接在现有 easycode-web 生成页里，新增“页面设计”步骤。它复用系统蓝图、数据库设计和业务动作绑定，让用户通过可视化方式调整菜单、页面区域、字段显示和按钮动作，最后影响模板生成。

主界面结构

页面画布：列表页布局

查询区：书名、分类、状态、创建时间

工具栏：新增、导出、批量删除、业务按钮

表格：封面、书名、作者、库存、状态、更新时间、行操作

分页：页码 / 每页条数 / 总数

弹窗表单：新增 / 编辑字段布局

一期保存的页面 DSL

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"] }
  ]
}

生成链路

保存布局

校验字段

校验按钮

模板读取 DSL

生成 Vue 页面