---
name: report_page_generator
description: 云平台标准报表页面生成规范，采用“左侧选择树 + 右侧数据表格”布局，集成动态宽度调整与 Excel 导出功能。
---

# 云平台报表页面生成规范 (Report Page Generator)

本技能定义了云平台内部管理系统中标准报表页面的 UI 骨架和基础交互逻辑。

## 1. 核心布局架构 (Layout)
- **Flex 容器**：外层 `div` 使用 `display: 'flex'`。
- **左侧组件**：固定使用 `LeftSelectTree` 作为组织/服务区筛选器。
- **右侧动态宽度**：必须监听 `collapsible` 状态进行宽度计算。
  ```javascript
  width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)'
  ```

## 2. 标准组件库引入
```javascript
import { connect } from "umi";
import React, { useRef, useState } from "react";
import { Button, message } from "antd";
import ProTable from "@ant-design/pro-table";
import LeftSelectTree from "@/pages/reports/settlementAccount/component/leftSelectTree";
import PageTitleBox from "@/components/PageTitleBox";
import { exportXlsxFromProColumnsExcelJS } from "@/utils/exportExcelFun";
```

## 3. 必要状态与引用 (Hooks & Refs)
- `actionRef`: 控制表格动作（刷新、重置等）。
- `formRef`: 控制查询表单。
- `selectedId`: 存储选中的树节点 ID。
- `collapsible`: 控制左侧边栏伸缩。
- `reqDetailList`: 存储接口返回的原始数据（用于导出）。

## 4. 关键逻辑逻辑片段
- **请求拦截**：在 `ProTable` 的 `request` 属性中，若未选中树节点则停止请求。
- **导出操作**：
  ```javascript
  <Button
      type="primary"
      onClick={() => {
          if (reqDetailList && reqDetailList.length > 0) {
              exportXlsxFromProColumnsExcelJS(exportColumns, reqDetailList, `文件名`, { topTitle: `报表标题` });
          } else {
              message.error('暂无数据可导出！');
          }
      }}
  >
      导出excel
  </Button>
  ```

## 5. 开发建议
- 当用户要求生成报表页时，直接基于 `test.tsx` 的结构填充 `columns` 和 API 调用。
- 保证页面整体高度自适应，表格 `scroll` 属性通常设置为 `y: "calc(100vh - 410px)"`。