yidaima/RuoYi-Vue/.superpowers/brainstorm/807-1781880145/content/backend-chart-block-architecture.html

<h2>推荐架构：业务块协议 2.0</h2>
<p class="subtitle">不是另造一套后台设计器，而是在现有业务块体系上增加“适用端、块类型、单表聚合数据集、分端模板”。</p>

<div class="mockup">
  <div class="mockup-header">设计态 → 保存校验 → 代码生成 → 后台运行态</div>
  <div class="mockup-body" style="padding:18px">
    <div style="display:grid;grid-template-columns:1.05fr 42px 1.05fr 42px 1.1fr 42px 1.05fr;align-items:stretch;gap:8px">
      <div style="border:1px solid #cfe0f4;border-radius:8px;background:#f6faff;padding:14px">
        <div class="label">DESIGNER</div>
        <h3 style="margin-top:6px">后台页面设计器</h3>
        <p>后台素材面板仅展示 <code>surfaces: ["admin"]</code> 的业务块。</p>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px;font-size:12px">
          <span style="padding:7px;border-radius:5px;background:white;border:1px solid #dce8f6">指标卡</span>
          <span style="padding:7px;border-radius:5px;background:white;border:1px solid #dce8f6">折线图</span>
          <span style="padding:7px;border-radius:5px;background:white;border:1px solid #dce8f6">柱状图</span>
          <span style="padding:7px;border-radius:5px;background:white;border:1px solid #dce8f6">饼图</span>
        </div>
      </div>
      <div style="display:flex;align-items:center;justify-content:center;color:#7a93b2;font-size:24px">→</div>
      <div style="border:1px solid #d8e7d9;border-radius:8px;background:#f7fbf7;padding:14px">
        <div class="label">CONTRACT</div>
        <h3 style="margin-top:6px">统一块定义与布局 JSON</h3>
        <p><code>kind: chart</code>、<code>surfaces</code>、<code>dataset</code>、<code>chart</code>、<code>templates</code>。</p>
        <div style="margin-top:12px;padding:9px;border-radius:6px;background:white;border:1px solid #dfebdf;font-size:12px">
          数据表 + 维度 + 指标 + 筛选 + 排序 + Top N
        </div>
      </div>
      <div style="display:flex;align-items:center;justify-content:center;color:#7a93b2;font-size:24px">→</div>
      <div style="border:1px solid #f0dfbf;border-radius:8px;background:#fffaf2;padding:14px">
        <div class="label">GENERATOR</div>
        <h3 style="margin-top:6px">注册、校验与生成</h3>
        <p>现有 <code>BusinessBlockRegistryService</code> 继续负责定义加载和字段校验。</p>
        <div style="display:grid;gap:6px;margin-top:12px;font-size:12px">
          <span style="padding:7px;border-radius:5px;background:white;border:1px solid #f0e5d1">生成 Vue + ECharts 组件</span>
          <span style="padding:7px;border-radius:5px;background:white;border:1px solid #f0e5d1">生成 Controller / Service / Mapper</span>
        </div>
      </div>
      <div style="display:flex;align-items:center;justify-content:center;color:#7a93b2;font-size:24px">→</div>
      <div style="border:1px solid #e0d7f2;border-radius:8px;background:#faf8ff;padding:14px">
        <div class="label">RUNTIME</div>
        <h3 style="margin-top:6px">生成后的 RuoYi 后台</h3>
        <p>每个块调用自己的只读聚合接口，返回统一 <code>dimensions + series</code>。</p>
        <div style="margin-top:12px;padding:9px;border-radius:6px;background:white;border:1px solid #e8e1f4;font-size:12px">
          权限注解 + 参数白名单 + 空态/错误态
        </div>
      </div>
    </div>
  </div>
</div>

<div class="split" style="margin-top:18px">
  <div class="mockup">
    <div class="mockup-header">业务块定义（平台内置）</div>
    <div class="mockup-body">
      <pre style="margin:0;font-size:12px;line-height:1.55;white-space:pre-wrap">{
  "code": "admin_line_chart",
  "kind": "chart",
  "surfaces": ["admin"],
  "placement": "embedded",
  "chartType": "line",
  "datasetSchema": "single-table-aggregate-v1",
  "templates": {
    "adminComponent": "...",
    "backend": "..."
  }
}</pre>
    </div>
  </div>
  <div class="mockup">
    <div class="mockup-header">页面中的块实例（用户配置）</div>
    <div class="mockup-body">
      <pre style="margin:0;font-size:12px;line-height:1.55;white-space:pre-wrap">{
  "blockCode": "admin_line_chart",
  "title": "近 30 天销售趋势",
  "dataset": {
    "table": "shop_order",
    "dimension": { "field": "create_time", "timeUnit": "day" },
    "metrics": [{ "field": "amount", "aggregate": "sum" }],
    "filters": [{ "field": "status", "operator": "eq", "value": "PAID" }]
  }
}</pre>
    </div>
  </div>
</div>

<div class="section" style="margin-top:18px">
  <h3>关键边界</h3>
  <ul>
    <li>后台页面可放普通 CRUD 区域，也可在顶部/底部嵌入图表块；另支持纯“业务块页面”拼成看板。</li>
    <li>不保存 SQL，只保存字段级 DSL；后端根据数据库元数据白名单生成固定 SQL。</li>
    <li>前台继续使用现有轮播、公告、购物车等块；一期图表定义只声明 <code>admin</code>，不会出现在前台素材池。</li>
    <li>现有 <code>business-blocks-v1</code> 和 <code>embeddedBlocks</code> 保持兼容，老页面无需迁移。</li>
  </ul>
</div>

<div style="margin-top:16px;padding:13px;border-radius:8px;background:#eef6ff;border:1px solid #d9e9ff">
  <strong>建议结论：</strong>业务块仍是一套注册表，但模板和可见范围按端分开；数据集能力作为图表块的公共子协议，而不是复制到四个块里。
</div>