报表列控功能设计评审会议纪要
会议时间：2026-06-01
会议地点：营销活动中心
参会人员：产品、前端开发团队成员
会议背景
为提升报表系统的用户体验，满足用户个性化查看数据的需求，本次评审针对纯前端报表列控功能进行设计讨论。
功能概述
上线纯前端的报表列控功能，支持表头拖动排序和列控配置面板，并实现与前端缓存的联动，让用户可以自定义报表展示方式。
功能设计
1. 表头拖动排序
功能描述：
- 用户可通过拖拽方式自由调整报表列的显示顺序
- 拖拽过程提供视觉反馈（如占位符、半透明效果）
- 松开鼠标后实时更新列顺序
交互细节：
- 鼠标悬停表头时显示拖拽图标
- 拖拽时表头跟随鼠标移动
- 放置时平滑动画过渡
- 支持跨页签/跨分组拖拽（如需求允许）
技术要点：
- 使用 HTML5 Drag and Drop API 或第三方库（如 react-dnd）
- 记录列顺序到本地状态
- 触发报表重新渲染
2. 列控配置面板
功能描述：
- 提供独立的配置面板，管理列的显示/隐藏
- 支持按分组管理列（如基础信息、业务数据、统计指标等）
- 面板可收起/展开，不占用主界面空间
面板设计：
┌─────────────────────────┐
│ 列配置 ▼ │
├─────────────────────────┤
│ 搜索列... │
├─────────────────────────┤
│ ▼ 基础信息 │
│ ☑ 奖品名称 │
│ ☑ 奖品编码 │
│ ☐ 创建时间 │
├─────────────────────────┤
│ ▶ 业务数据 │
│ ▶ 统计指标 │
└─────────────────────────┘交互细节：
- 复选框控制列显示/隐藏
- 分组可展开/收起
- 支持搜索快速定位列
- 提供"全选"/"全不选"快捷操作
- 显示当前可见列数量
3. 前端缓存联动
功能描述：
- 用户的列控配置（顺序、显示状态）自动保存到前端缓存
- 页面刷新后保留用户设置
- 支持恢复默认配置
技术实现：
- 使用 localStorage 或 sessionStorage 存储配置
- 配置数据结构设计：json
{ "reportId": "prize_report", "columnOrder": ["name", "code", "status", "createTime"], "visibleColumns": ["name", "code", "status"], "timestamp": 1717200000000 } - 页面加载时读取缓存并应用配置
- 配置变更时自动更新缓存
待办事项
| 序号 | 任务内容 | 负责人 | 截止时间 |
|---|---|---|---|
| 1 | 产品侧完善需求文档，明确前端列表页拖拽列的顺序与配置面板分组之间的关联实现逻辑 | 张广第 | - |
| 2 | 完成报表列控功能开发，于周三下午提测 | 张广第 | 本周三下午 |
技术实现建议
组件选型
- 拖拽排序：react-beautiful-dnd 或 @dnd-kit/sortable
- 配置面板：Ant Design 的 Collapse + Checkbox 组件
- 状态管理：React Context 或 Zustand
性能优化
- 大数据量时使用虚拟滚动
- 拖拽时禁用不必要的数据更新
- 缓存读写防抖处理
兼容性
- 支持主流浏览器（Chrome、Firefox、Safari、Edge）
- 移动端适配（如适用）
风险评估
| 风险点 | 影响 | 应对措施 |
|---|---|---|
| 需求文档不明确导致返工 | 高 | 周三前提测前完成需求确认 |
| 复杂报表性能问题 | 中 | 进行大数据量场景测试 |
| 浏览器兼容性问题 | 低 | 开发过程中进行多浏览器测试 |
记录人：AI助手
记录时间：2026-06-01