[锦木开发志 Day 1] | 报表全栈链路优化与 UI 架构重构

[锦木开发志 Day 1] | 报表全栈链路优化与 UI 架构重构

技术栈： React + Ant Design Pro + XLSX

今日语录： 逻辑如林，代码如光。

---

1. 今日战场 (The Field)

• 核心任务： 实现电度量报表的前端全栈模拟链路，包含多级表头 Excel 导出、合计行自动计算及 Layout 弹窗组件重构。
• 解决痛点： 解决静态数据向后端接口平滑迁移的架构设计问题；攻克 js-export-excel 不支持单元格合并的局限；消除 TypeScript 在异步数据流中的类型推断报错。

---

2. 硬核拆解 (Deep Dive)

🌳 后端：木之根基 (Service Layer)

• 逻辑构思：

  TypeScript

  // 模拟异步接口返回，利用 Promise 显式定义 Response 结构，为对接 SpringBoot 接口预留契约
  interface ReportResponse {
    data: ReportDataItem[];
    success: boolean;
    total: number;
  }
  
  export async function queryElectricityReport(params: { type: string }): Promise<ReportResponse> {
    const data = getStaticReportData(params.type);
    return new Promise((resolve) => {
      setTimeout(() => resolve({ data, success: true, total: data.length }), 300);
    });
  }
  

• 关键点： 严谨的类型定义。通过 Promise<ReportResponse> 强制约束数据契约，确保前端 UI 在数据加载、空值处理上具有极高的健壮性。

🔥 前端：火之表现 (ReactJS)

• 交互实现：

  JavaScript

  // 抽离通用 IframeModal，实现配置化弹窗管理
  const IframeModal = ({ title, open, onCancel, src }) => (
    <Modal title={title} open={open} onCancel={onCancel} width="90%" destroyOnClose>
      <iframe src={src} style={{ width: '100%', height: '100%', border: 'none' }} />
    </Modal>
  );
  

• 关键点： 高度抽象与解耦。将复杂的 Excel 导出逻辑移至 exportUtils，将重复的 Modal 逻辑归纳为单一组件，让 index.tsx 保持纯粹的声明式 UI 风格。

---

3. 避坑指南 (The Pitfalls)

避雷针： 警惕第三方库的“能力边界”与 TS 的“默认推断”。

1. 库选型坑：js-export-excel 虽轻量但不支持 merges，在处理地铁业务这种需要“牵引/动力”多级合并的报表时，应后果断切换至功能更强大的 xlsx 库。
2. 类型阴影：手动编写 new Promise 时，TS 默认推断为 unknown。若不显式泛型化，会导致下游组件出现 Property 'data' does not exist 的红线报错。

---

4. 今日烁光 (Shining Insight)

「开发者感悟」

代码的演进其实是一场“模块化”的修行。起初我们为了快，把逻辑堆砌在页面里；随后我们为了稳，把算法抽离到工具类中；最后我们为了美，把重复的灵魂安置在通用的组件里。今天重构的不仅仅是报表和弹窗，更是对“系统稳定性”的一种敬畏。修剪掉冗余的 State 和 Effect，让核心逻辑像树干一样清晰，光才能照进业务的每一个角落。