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

<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>