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

125 lines
6.8 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<h2>配置协议与运行边界</h2>
<p class="subtitle">一期采用字段级 DSL生成固定代码不提供 SQL 编辑器、跨表关联、公式脚本或任意 ECharts 配置。</p>
<div class="split">
<div class="mockup">
<div class="mockup-header">单表聚合 DSLsingle-table-aggregate-v1</div>
<div class="mockup-body">
<pre style="margin:0;font-size:12px;line-height:1.55;white-space:pre-wrap">{
"table": "shop_order",
"dimension": {
"field": "create_time",
"timeUnit": "day"
},
"metrics": [{
"field": "amount",
"aggregate": "sum",
"alias": "salesAmount"
}],
"filters": [{
"field": "status",
"operator": "eq",
"value": "PAID"
}],
"dateRange": {
"field": "create_time",
"preset": "last_30_days"
},
"sort": { "by": "dimension", "order": "asc" },
"limit": 100
}</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">{
"dimensions": [
{ "key": "2026-06-01", "label": "06-01" }
],
"series": [{
"key": "salesAmount",
"name": "销售额",
"values": [12800.50]
}],
"summary": {
"value": 86420,
"count": 328
}
}</pre>
<p style="margin:12px 0 0;color:#667085;font-size:12px">指标卡读取 <code>summary</code>,折线/柱状图读取 <code>dimensions + series</code>,饼图将第一组 series 映射为分类占比。</p>
</div>
</div>
</div>
<div class="section" style="margin-top:20px">
<h3>字段类型约束</h3>
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:9px">
<div style="padding:12px;border:1px solid #dfe7f1;border-radius:7px;background:#fbfdff">
<strong>COUNT</strong><p style="margin:5px 0 0;font-size:12px;color:#667085">任意字段或整表计数</p>
</div>
<div style="padding:12px;border:1px solid #dfe7f1;border-radius:7px;background:#fbfdff">
<strong>SUM / AVG</strong><p style="margin:5px 0 0;font-size:12px;color:#667085">仅数值字段</p>
</div>
<div style="padding:12px;border:1px solid #dfe7f1;border-radius:7px;background:#fbfdff">
<strong>维度</strong><p style="margin:5px 0 0;font-size:12px;color:#667085">文本、枚举、日期时间</p>
</div>
<div style="padding:12px;border:1px solid #dfe7f1;border-radius:7px;background:#fbfdff">
<strong>时间粒度</strong><p style="margin:5px 0 0;font-size:12px;color:#667085">日、周、月;仅时间字段</p>
</div>
</div>
</div>
<div class="mockup" style="margin-top:18px">
<div class="mockup-header">生成与运行链路</div>
<div class="mockup-body" style="padding:18px">
<div style="display:grid;grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr;align-items:center;gap:7px;text-align:center">
<div style="padding:13px;border-radius:7px;background:#f4f8fd;border:1px solid #dce7f4"><strong>保存页面</strong><p style="font-size:11px;color:#667085">校验表、字段、聚合和筛选</p></div>
<span style="color:#7890ad"></span>
<div style="padding:13px;border-radius:7px;background:#f7fbf7;border:1px solid #dce9dc"><strong>生成代码</strong><p style="font-size:11px;color:#667085">每个块生成只读聚合 API</p></div>
<span style="color:#7890ad"></span>
<div style="padding:13px;border-radius:7px;background:#fffaf3;border:1px solid #efe2cb"><strong>运行查询</strong><p style="font-size:11px;color:#667085">Mapper 使用白名单字段和固定 SQL 片段</p></div>
<span style="color:#7890ad"></span>
<div style="padding:13px;border-radius:7px;background:#faf8ff;border:1px solid #e5def2"><strong>图表渲染</strong><p style="font-size:11px;color:#667085">ECharts 组件消费统一响应</p></div>
</div>
</div>
</div>
<div class="split" style="margin-top:18px">
<div class="section">
<h3>权限与安全</h3>
<ul>
<li>块默认继承所在后台菜单的权限标识,并生成对应 <code>@PreAuthorize</code></li>
<li>可选开启 RuoYi 数据权限,由生成的 Service 方法进入数据权限切面。</li>
<li>表名、字段名、聚合函数、运算符全部来自白名单,值使用参数绑定。</li>
<li>限制最大分组数 500、默认 100查询超时由数据库和应用统一配置控制。</li>
</ul>
</div>
<div class="section">
<h3>错误与降级</h3>
<ul>
<li>设计时:字段删除或类型变化,页面标记“需要修复”,禁止生成。</li>
<li>预览时:当前块显示具体配置错误,其他块继续工作。</li>
<li>运行时:空数据展示空态;接口失败展示重试按钮,不弹全局错误。</li>
<li>旧定义版本继续可读;定义升级通过 <code>version</code> 和迁移函数归一化。</li>
</ul>
</div>
</div>
<div class="section" style="margin-top:18px">
<h3>首批四个块的差异</h3>
<table style="width:100%;border-collapse:collapse;font-size:12px">
<thead><tr style="background:#f5f7fa"><th style="padding:9px;border:1px solid #e1e6ed;text-align:left"></th><th style="padding:9px;border:1px solid #e1e6ed;text-align:left">维度</th><th style="padding:9px;border:1px solid #e1e6ed;text-align:left">指标</th><th style="padding:9px;border:1px solid #e1e6ed;text-align:left">特有配置</th></tr></thead>
<tbody>
<tr><td style="padding:9px;border:1px solid #e1e6ed">指标卡</td><td style="padding:9px;border:1px solid #e1e6ed">不需要</td><td style="padding:9px;border:1px solid #e1e6ed">1 个</td><td style="padding:9px;border:1px solid #e1e6ed">前后缀、精度、对比文案</td></tr>
<tr><td style="padding:9px;border:1px solid #e1e6ed">折线图</td><td style="padding:9px;border:1px solid #e1e6ed">必填</td><td style="padding:9px;border:1px solid #e1e6ed">13 个</td><td style="padding:9px;border:1px solid #e1e6ed">平滑、面积、图例</td></tr>
<tr><td style="padding:9px;border:1px solid #e1e6ed">柱状图</td><td style="padding:9px;border:1px solid #e1e6ed">必填</td><td style="padding:9px;border:1px solid #e1e6ed">13 个</td><td style="padding:9px;border:1px solid #e1e6ed">横向、堆叠、Top N</td></tr>
<tr><td style="padding:9px;border:1px solid #e1e6ed">饼图</td><td style="padding:9px;border:1px solid #e1e6ed">必填</td><td style="padding:9px;border:1px solid #e1e6ed">1 个</td><td style="padding:9px;border:1px solid #e1e6ed">环形、标签、Top N + 其他</td></tr>
</tbody>
</table>
</div>
<div style="margin-top:16px;padding:13px;border-radius:8px;background:#eef8f1;border:1px solid #d7eadc">
<strong>测试重点:</strong>DSL 校验、类型约束、SQL 白名单生成、权限注解、空数据、单块失败隔离、旧页面兼容,以及四种图表的模板快照。
</div>