wangpeng/yidaima
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: expand EasyCode software factory workflows

Browse Source
This commit is contained in:
王鹏
2026-07-15 12:48:50 +08:00
parent fcfa4374d7
commit 79dea897bc
1108 changed files with 163774 additions and 21593 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
RuoYi-Vue/.superpowers/brainstorm/807-1781880145/content/backend-chart-block-architecture.html Normal file
View File

@@ -0,0 +1,98 @@
<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>

124
RuoYi-Vue/.superpowers/brainstorm/807-1781880145/content/backend-chart-block-contract.html Normal file
View File

@@ -0,0 +1,124 @@
<h2>配置协议与运行边界</h2>
<p class="subtitle">一期采用字段级 DSL，生成固定代码，不提供 SQL 编辑器、跨表关联、公式脚本或任意 ECharts 配置。</p>
<div class="split">
<div class="mockup">
<div class="mockup-header">单表聚合 DSL：single-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">1–3 个</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">1–3 个</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>

132
RuoYi-Vue/.superpowers/brainstorm/807-1781880145/content/backend-chart-block-designer.html Normal file
View File

@@ -0,0 +1,132 @@
<h2>后台图表业务块：设计器交互</h2>
<p class="subtitle">沿用现有三栏页面设计器：左侧素材、中间画布、右侧属性。图表不开放原始 ECharts JSON，一期用结构化配置。</p>
<div class="mockup">
<div class="mockup-header">后台页面设计 / 运营概览</div>
<div class="mockup-body" style="padding:0">
<div style="display:grid;grid-template-columns:185px minmax(360px,1fr) 255px;min-height:540px">
<aside style="border-right:1px solid #e2e8f0;background:#fbfcfe;padding:12px">
<div style="display:flex;gap:5px;margin-bottom:12px;font-size:11px">
<span style="padding:6px 8px;border-radius:5px;background:#eaf3ff;color:#1769aa">业务块</span>
<span style="padding:6px 8px;border-radius:5px;background:white;border:1px solid #e4e9f0">字段</span>
<span style="padding:6px 8px;border-radius:5px;background:white;border:1px solid #e4e9f0">按钮</span>
</div>
<div class="label">数据展示</div>
<div style="display:grid;gap:7px;margin-top:8px">
<div style="padding:10px;border:1px solid #d9e5f4;border-radius:7px;background:white">
<strong style="font-size:12px">指标卡</strong>
<p style="margin:4px 0 0;font-size:10px;color:#7b8797">一个核心数值与辅助说明</p>
</div>
<div style="padding:10px;border:1px solid #b9d2f3;border-radius:7px;background:#f4f9ff">
<strong style="font-size:12px;color:#1769aa">折线图</strong>
<p style="margin:4px 0 0;font-size:10px;color:#68819d">时间或分类趋势</p>
</div>
<div style="padding:10px;border:1px solid #d9e5f4;border-radius:7px;background:white">
<strong style="font-size:12px">柱状图</strong>
<p style="margin:4px 0 0;font-size:10px;color:#7b8797">分类数值对比</p>
</div>
<div style="padding:10px;border:1px solid #d9e5f4;border-radius:7px;background:white">
<strong style="font-size:12px">饼图</strong>
<p style="margin:4px 0 0;font-size:10px;color:#7b8797">分类占比</p>
</div>
</div>
<div style="margin-top:16px;padding:9px;border-radius:6px;background:#fff8e8;border:1px solid #f2dfae;font-size:10px;color:#765d24">
仅后台可见，不进入前台业务块池。
</div>
</aside>
<main style="padding:14px;background:#f4f7fb">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">
<div>
<strong style="font-size:13px">运营概览</strong>
<span style="margin-left:7px;font-size:10px;color:#78869a">业务块页面</span>
</div>
<span style="font-size:10px;color:#4f6f98">桌面预览</span>
</div>
<div style="display:grid;grid-template-columns:repeat(12,1fr);gap:9px;padding:12px;border:1px dashed #b7c6da;border-radius:8px;background:white">
<div style="grid-column:span 4;padding:12px;border:1px solid #e2e8f0;border-radius:7px">
<small style="color:#728096">今日订单</small>
<div style="font-size:22px;font-weight:700;margin-top:5px;color:#1f2a3d">328</div>
<small style="color:#2f8f51">较昨日 +12.6%</small>
</div>
<div style="grid-column:span 4;padding:12px;border:1px solid #e2e8f0;border-radius:7px">
<small style="color:#728096">销售额</small>
<div style="font-size:22px;font-weight:700;margin-top:5px;color:#1f2a3d">¥ 86,420</div>
<small style="color:#2f8f51">较昨日 +8.2%</small>
</div>
<div style="grid-column:span 4;padding:12px;border:1px solid #e2e8f0;border-radius:7px">
<small style="color:#728096">待发货</small>
<div style="font-size:22px;font-weight:700;margin-top:5px;color:#1f2a3d">57</div>
<small style="color:#c37b22">需要处理</small>
</div>
<div style="grid-column:span 8;padding:12px;border:2px solid #409eff;border-radius:7px;box-shadow:0 0 0 2px rgba(64,158,255,.08)">
<div style="display:flex;justify-content:space-between">
<strong style="font-size:12px">近 30 天销售趋势</strong>
<small style="color:#728096">按天</small>
</div>
<div style="height:125px;margin-top:10px;border-left:1px solid #dfe6ef;border-bottom:1px solid #dfe6ef;position:relative;background:repeating-linear-gradient(to bottom,transparent 0,transparent 30px,#edf1f6 31px)">
<div style="position:absolute;left:3%;right:3%;top:55%;height:3px;background:#7aa9e8;transform:rotate(-5deg);border-radius:3px"></div>
<div style="position:absolute;left:3%;right:3%;top:39%;height:3px;background:#3f88df;transform:rotate(4deg);border-radius:3px"></div>
</div>
</div>
<div style="grid-column:span 4;padding:12px;border:1px solid #e2e8f0;border-radius:7px">
<strong style="font-size:12px">订单状态占比</strong>
<div style="width:108px;height:108px;margin:16px auto 8px;border-radius:50%;background:conic-gradient(#4d8fdf 0 58%,#74bd8b 58% 83%,#e4ad5d 83% 100%);position:relative">
<div style="position:absolute;inset:29px;border-radius:50%;background:white"></div>
</div>
</div>
<button style="grid-column:span 12;border:1px dashed #b7c6da;border-radius:6px;background:#f9fbfd;color:#64809f;padding:9px;font-size:11px">+ 拖入后台业务块</button>
</div>
</main>
<aside style="border-left:1px solid #e2e8f0;background:white;padding:12px">
<div style="display:flex;gap:5px;margin-bottom:13px;font-size:11px">
<span style="padding:6px 8px;border-radius:5px;background:#eaf3ff;color:#1769aa">数据</span>
<span style="padding:6px 8px;border-radius:5px;background:#f7f8fa">展示</span>
<span style="padding:6px 8px;border-radius:5px;background:#f7f8fa">权限</span>
</div>
<div style="display:grid;gap:9px;font-size:11px">
<label><span style="display:block;margin-bottom:4px;color:#667085">标题</span><div style="padding:8px;border:1px solid #d9e1eb;border-radius:5px">近 30 天销售趋势</div></label>
<label><span style="display:block;margin-bottom:4px;color:#667085">数据表 *</span><div style="padding:8px;border:1px solid #d9e1eb;border-radius:5px">订单表 shop_order</div></label>
<label><span style="display:block;margin-bottom:4px;color:#667085">维度字段 *</span><div style="padding:8px;border:1px solid #d9e1eb;border-radius:5px">创建时间 create_time</div></label>
<label><span style="display:block;margin-bottom:4px;color:#667085">时间粒度</span><div style="padding:8px;border:1px solid #d9e1eb;border-radius:5px">按天</div></label>
<label><span style="display:block;margin-bottom:4px;color:#667085">指标字段 *</span><div style="padding:8px;border:1px solid #d9e1eb;border-radius:5px">订单金额 amount</div></label>
<label><span style="display:block;margin-bottom:4px;color:#667085">聚合方式 *</span><div style="padding:8px;border:1px solid #d9e1eb;border-radius:5px">求和 SUM</div></label>
<div>
<span style="display:block;margin-bottom:4px;color:#667085">筛选条件</span>
<div style="padding:8px;border:1px solid #d9e1eb;border-radius:5px">订单状态 = 已支付</div>
<button style="margin-top:5px;width:100%;padding:6px;border:1px dashed #b7c6da;border-radius:5px;background:white;color:#64809f">+ 添加条件</button>
</div>
<label><span style="display:block;margin-bottom:4px;color:#667085">数据范围</span><div style="padding:8px;border:1px solid #d9e1eb;border-radius:5px">最近 30 天</div></label>
</div>
<div style="margin-top:12px;padding:8px;border-radius:6px;background:#eef8f1;color:#39734a;font-size:10px">
配置有效 · 预览数据 30 个分组
</div>
</aside>
</div>
</div>
</div>
<div class="split" style="margin-top:18px">
<div class="section">
<h3>配置分层</h3>
<ol>
<li><strong>数据：</strong>表、维度、指标、聚合、筛选、时间范围。</li>
<li><strong>展示：</strong>标题、图例、颜色主题、数值格式、空数据文案。</li>
<li><strong>权限：</strong>菜单权限标识、数据权限开关；默认继承所在后台页面。</li>
</ol>
</div>
<div class="section">
<h3>交互规则</h3>
<ul>
<li>拖入后自动选中，右侧给出最少必填项。</li>
<li>配置变化后做 400ms 防抖预览，不必先保存。</li>
<li>预览失败只影响当前块，画布显示错误卡，不拖垮整页。</li>
<li>保存前统一校验；缺失字段、字段类型不匹配时定位到具体配置项。</li>
</ul>
</div>
</div>
<div style="margin-top:15px;padding:13px;border-radius:8px;background:#fff8e8;border:1px solid #f1dfae">
<strong>一期布局建议：</strong>继续使用现有上下业务块区和单列业务块页面，不引入自由栅格编辑器；块宽度增加“整行 / 半行 / 三分之一”三个档位，由模板转成 12 栅格。
</div>

124
RuoYi-Vue/.superpowers/brainstorm/807-1781880145/content/backend-chart-block-options.html Normal file
View File

@@ -0,0 +1,124 @@
<h2>后台业务块 + 图表业务块：三种落地路线</h2>
<p class="subtitle">结合当前项目的 <code>business-blocks-v1</code>、块注册表、表字段映射和代码生成链路。点击你更倾向的方案。</p>
<div class="cards">
<div class="card" data-choice="a" onclick="toggleSelect(this)">
<div class="card-image" style="padding:16px;background:#f7faff">
<div style="display:flex;gap:8px;margin-bottom:10px">
<span style="padding:4px 8px;border-radius:6px;background:#e8f2ff;color:#1769aa;font-size:12px">推荐</span>
<span style="padding:4px 8px;border-radius:6px;background:#eef7ef;color:#287a3f;font-size:12px">渐进扩展</span>
</div>
<div style="display:grid;grid-template-columns:130px 1fr 155px;gap:10px;min-height:225px">
<div style="border:1px solid #dfe7f3;border-radius:8px;background:white;padding:10px">
<strong style="font-size:12px">后台素材</strong>
<div style="margin-top:9px;padding:8px;border-radius:6px;background:#f4f7fb;font-size:11px">指标卡</div>
<div style="margin-top:6px;padding:8px;border-radius:6px;background:#f4f7fb;font-size:11px">趋势折线图</div>
<div style="margin-top:6px;padding:8px;border-radius:6px;background:#f4f7fb;font-size:11px">分类柱状图</div>
<div style="margin-top:6px;padding:8px;border-radius:6px;background:#f4f7fb;font-size:11px">占比饼图</div>
</div>
<div style="border:1px dashed #b8c7dc;border-radius:8px;background:white;padding:12px">
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:7px">
<div style="height:46px;border-radius:6px;background:#eaf2ff"></div>
<div style="height:46px;border-radius:6px;background:#edf8f1"></div>
<div style="height:46px;border-radius:6px;background:#fff4e8"></div>
</div>
<div style="height:92px;margin-top:9px;border-radius:6px;background:linear-gradient(180deg,#f0f6ff,#fff);border:1px solid #e3ebf6;position:relative">
<div style="position:absolute;left:12px;right:12px;bottom:18px;height:2px;background:#b8d1f5;transform:rotate(-4deg)"></div>
<div style="position:absolute;left:12px;right:12px;bottom:35px;height:2px;background:#6fa4e8;transform:rotate(5deg)"></div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px">
<div style="height:48px;border-radius:6px;background:#f7f9fc;border:1px solid #e6ebf2"></div>
<div style="height:48px;border-radius:6px;background:#f7f9fc;border:1px solid #e6ebf2"></div>
</div>
</div>
<div style="border:1px solid #dfe7f3;border-radius:8px;background:white;padding:10px;font-size:11px">
<strong style="font-size:12px">数据与样式</strong>
<p style="margin:9px 0 4px;color:#667085">数据表</p>
<div style="padding:7px;border:1px solid #dfe7f3;border-radius:5px">订单表</div>
<p style="margin:9px 0 4px;color:#667085">维度 / 指标</p>
<div style="padding:7px;border:1px solid #dfe7f3;border-radius:5px">下单日期 / 金额求和</div>
<p style="margin:9px 0 4px;color:#667085">筛选</p>
<div style="padding:7px;border:1px solid #dfe7f3;border-radius:5px">状态 = 已支付</div>
</div>
</div>
</div>
<div class="card-body">
<h3>A. 统一业务块协议，增加适用端与图表类型</h3>
<p>沿用现有注册表和生成机制，给块定义增加 <code>surfaces</code>、<code>kind</code>、数据查询与图表配置。前后台共用基础设施，具体模板按端区分。</p>
<div class="pros-cons">
<div class="pros"><h4>优势</h4><ul><li>改造面最小</li><li>复用保存、校验、生成链路</li><li>后续可逐块扩展</li></ul></div>
<div class="cons"><h4>代价</h4><ul><li>需要升级现有块协议</li><li>查询模型要控制边界</li></ul></div>
</div>
</div>
</div>
<div class="card" data-choice="b" onclick="toggleSelect(this)">
<div class="card-image" style="padding:16px;background:#fbfaf7">
<div style="display:grid;grid-template-columns:1fr 44px 1fr;align-items:center;gap:8px;min-height:225px">
<div style="border:1px solid #e6dfd1;border-radius:8px;background:white;padding:12px">
<strong>前台业务块库</strong>
<div style="margin-top:12px;display:grid;gap:7px">
<div style="padding:9px;border-radius:6px;background:#f8f4ec">轮播 / 公告</div>
<div style="padding:9px;border-radius:6px;background:#f8f4ec">购物车 / 订单</div>
<div style="padding:9px;border-radius:6px;background:#f8f4ec">主子表</div>
</div>
</div>
<div style="text-align:center;color:#a39274;font-size:22px">↔</div>
<div style="border:1px solid #e6dfd1;border-radius:8px;background:white;padding:12px">
<strong>后台业务块库</strong>
<div style="margin-top:12px;display:grid;gap:7px">
<div style="padding:9px;border-radius:6px;background:#f8f4ec">统计看板</div>
<div style="padding:9px;border-radius:6px;background:#f8f4ec">审核工作台</div>
<div style="padding:9px;border-radius:6px;background:#f8f4ec">运营快捷入口</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<h3>B. 前后台业务块分库</h3>
<p>新增独立的 <code>admin-business-blocks</code> 注册目录、接口和生成服务。后台图表走自己的协议，前台现有块不动。</p>
<div class="pros-cons">
<div class="pros"><h4>优势</h4><ul><li>边界清楚</li><li>对现有前台块影响小</li><li>后台可快速特化</li></ul></div>
<div class="cons"><h4>代价</h4><ul><li>重复注册、校验、生成代码</li><li>长期容易两套协议漂移</li></ul></div>
</div>
</div>
</div>
<div class="card" data-choice="c" onclick="toggleSelect(this)">
<div class="card-image" style="padding:16px;background:#faf8ff">
<div style="display:grid;grid-template-columns:115px 1fr;gap:10px;min-height:225px">
<div style="border:1px solid #e3dbf4;border-radius:8px;background:white;padding:10px;font-size:11px">
<strong>通用组件</strong>
<div style="margin-top:9px;padding:7px;background:#f5f1fc;border-radius:5px">容器</div>
<div style="margin-top:6px;padding:7px;background:#f5f1fc;border-radius:5px">图表</div>
<div style="margin-top:6px;padding:7px;background:#f5f1fc;border-radius:5px">表格</div>
<div style="margin-top:6px;padding:7px;background:#f5f1fc;border-radius:5px">筛选器</div>
<div style="margin-top:6px;padding:7px;background:#f5f1fc;border-radius:5px">按钮</div>
</div>
<div style="border:1px dashed #baa7df;border-radius:8px;background:white;padding:10px;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:55px 90px 55px;gap:6px">
<div style="grid-column:span 3;background:#eee7fa;border-radius:5px"></div>
<div style="grid-column:span 3;background:#eee7fa;border-radius:5px"></div>
<div style="grid-column:span 3;background:#eee7fa;border-radius:5px"></div>
<div style="grid-column:span 3;background:#eee7fa;border-radius:5px"></div>
<div style="grid-column:span 8;background:#f7f4fc;border:1px solid #e8e0f5;border-radius:5px"></div>
<div style="grid-column:span 4;background:#f7f4fc;border:1px solid #e8e0f5;border-radius:5px"></div>
<div style="grid-column:span 5;background:#f7f4fc;border:1px solid #e8e0f5;border-radius:5px"></div>
<div style="grid-column:span 7;background:#f7f4fc;border:1px solid #e8e0f5;border-radius:5px"></div>
</div>
</div>
</div>
<div class="card-body">
<h3>C. 直接升级为通用数据看板设计器</h3>
<p>提供自由栅格、任意 ECharts 配置、多个数据集、筛选器联动和组件事件，业务块只是组件模板。</p>
<div class="pros-cons">
<div class="pros"><h4>优势</h4><ul><li>能力最强</li><li>能覆盖复杂大屏与 BI</li><li>布局自由</li></ul></div>
<div class="cons"><h4>代价</h4><ul><li>范围陡增</li><li>查询安全与联动复杂</li><li>偏离当前确定性代码生成路线</li></ul></div>
</div>
</div>
</div>
</div>
<div class="section" style="margin-top:22px;padding:14px;border-radius:8px;background:#eef6ff;border:1px solid #d8e9ff">
<strong>我的判断：选 A。</strong>
<span style="color:#526174"> 当前代码其实已经走到门口：后台模式已有 <code>business_block</code> 页面类型，但页面入口故意不给后台传块定义。补齐“适用端 + 图表数据协议 + 后台模板”即可自然接上。</span>
</div>

6
RuoYi-Vue/.superpowers/brainstorm/807-1781880145/content/waiting-data-scope.html Normal file
View File

@@ -0,0 +1,6 @@
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
<div style="text-align:center">
<h2>方案 A 已锁定</h2>
<p class="subtitle">正在终端中确认图表取数边界，随后会回来展示完整架构与配置界面。</p>
</div>
</div>