newCloud/.agent/skills/report_page_generator/SKILL.md

name, description

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

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

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

1. 核心布局架构 (Layout)

• Flex 容器：外层 div 使用 display: 'flex'。
• 左侧组件：固定使用 LeftSelectTree 作为组织/服务区筛选器。
• 右侧动态宽度：必须监听 collapsible 状态进行宽度计算。

  width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)'
  

2. 标准组件库引入

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 属性中，若未选中树节点则停止请求。
• 导出操作：

  <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)"。