99 lines
5.4 KiB
HTML
99 lines
5.4 KiB
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>
|