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

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