yidaima/RuoYi-Vue/.superpowers/brainstorm/manual-31932-20260527140727/content/designer-a-detail.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>