用量分析总结

功能模块

• 数字卡片
• 图表模块
• 人员列表
• 项目用量
• 功能用量

通用模块

• 导出模块
• 表格弹窗
• 自定义日期过滤
• 简易图表
• 无限加载列表
• Row-Col、flex布局
• 部门树结构

难点项目

1. 布局问题 设计要求：

• 第一行： 分4块内容， 均等分割，间隙均等

• 第二行： 分2块内容， 左侧和上方3块内容对齐， 右侧与上方最后一块内容对齐

• 在浏览器在不同尺寸窗口的时候，表现要响应式化，要大则大，要小则小

解决方法： 在用antd的栅格布局

演示代码 (opens new window)

2. 自定义表格弹窗 设计要求：

• 分为普通单元格和可点击单元格
• 普通单元格正常显示
• 可点击单元格，鼠标移动上去变手型、单元格尾部有三角箭头
• 点击显示弹窗，弹窗非遮罩类， 紧随点击区域
• 点击页面其他区域，关闭弹窗

注意: 监听事件的区别， react18版本之前和之后不一样

• react18之前 监听在document上
• react18 监听在root上

演示代码 (opens new window)