diff --git a/CLAUDE.md b/CLAUDE.md index 96df352b..b1460323 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -41,12 +41,21 @@ ### 技术栈 **前端** -- React 18.3.1 + Chakra UI 2.8.2 + Ant Design -- Redux Toolkit 用于状态管理 -- React Router v6 配合 React.lazy() 实现代码分割 -- CRACO 构建系统,具有激进的 webpack 优化 -- 图表库: ApexCharts、ECharts、Recharts、D3 -- 其他: Three.js、FullCalendar、Leaflet 地图 +- **核心框架**: React 18.3.1 +- **UI 组件库**: Chakra UI 2.8.2(主要) + Ant Design 5.27.4(表格/表单) +- **状态管理**: Redux Toolkit 2.9.2 +- **路由**: React Router v6.30.1 配合 React.lazy() 实现代码分割 +- **构建系统**: CRACO 7.1.0 + 激进的 webpack 5 优化 +- **图表库**: ECharts 5.6.0、ApexCharts 3.27.3、Recharts 3.1.2、D3 7.9.0、Visx 3.12.0 +- **动画**: Framer Motion 4.1.17 +- **日历**: FullCalendar 5.9.0、React Big Calendar 0.33.2 +- **图标**: Lucide React 0.540.0(推荐)、React Icons 4.12.0、@ant-design/icons 6.0.0 +- **网络请求**: Axios 1.10.0 +- **实时通信**: Socket.IO Client 4.7.4 +- **数据分析**: PostHog 1.281.0 +- **开发工具**: MSW (Mock Service Worker) 用于 API mocking +- **虚拟化**: @tanstack/react-virtual 3.13.12(性能优化) +- **其他**: Draft.js(富文本编辑)、React Markdown、React Quill **后端** - Flask + SQLAlchemy ORM diff --git a/docs/Community.md b/docs/Community.md index 84026a63..641c4800 100644 --- a/docs/Community.md +++ b/docs/Community.md @@ -1054,6 +1054,53 @@ feat: 删除不需要的组件 --- +### 2025-01-XX: 纵向分栏模式滚动行为优化 + +**变更类型**: 用户体验优化 + +**优化内容**: 改进纵向分栏模式(VerticalModeLayout)的滚动交互体验,解决右侧详情面板滚动触发页面滚动以及固定模式切换逻辑的问题。 + +**改进点**: + +1. **右侧详情面板滚动隔离** - `EventDetailScrollPanel.js` + - 添加 `overscrollBehavior: 'contain'` 属性,防止滚动传播到页面 + - 添加 `data-detail-panel-container` 标识,与左侧列表区分 + +2. **左侧事件列表明确标识** - `VerticalModeLayout.js` + - 将 `data-scroll-container` 改为 `data-event-list-container` + - 明确标识左侧事件列表容器,便于固定模式逻辑识别 + +3. **固定模式进入/退出机制优化** - `DynamicNewsCard.js` + - **进入参数**: `TRIGGER_OFFSET = 150px`(原 100px)- 更平滑的视觉过渡 + - **退出参数**: + - `EXIT_OFFSET = 200px` - 退出比进入更容易(非对称设计) + - `EXIT_THRESHOLD = 30px` - 接近顶部 30px 内即可退出(原需精确 0px) + - **退出逻辑**: 双重检测机制 + - 条件 1: CardHeader 位置超过退出点 → 退出固定模式 + - 条件 2: 左侧事件列表滚动到顶部附近 → 退出固定模式 + - 任一条件满足即退出,提升用户体验 + - **性能优化**: 在 `handleWheel` 中添加 `requestAnimationFrame`,提高滚动性能 + +**用户体验提升**: +- ✅ 右侧详情面板滚动不再触发整个页面滚动 +- ✅ 右侧详情面板滚动不再影响固定模式切换 +- ✅ 只有左侧事件列表滚动才会触发固定模式退出 +- ✅ 固定模式进入/退出更流畅(150px/200px 非对称设计) +- ✅ 退出固定模式更容易(接近顶部即可,无需精确到 0px) + +**技术细节**: +- 使用 CSS `overscrollBehavior` 隔离滚动链 +- 使用 `data-*` 属性区分不同滚动容器类型 +- 非对称触发距离设计(进入 150px,退出 200px) +- 双重检测退出条件(位置检测 OR 滚动检测) + +**影响范围**: +- `src/views/Community/components/DynamicNewsCard/EventDetailScrollPanel.js` +- `src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js` +- `src/views/Community/components/DynamicNewsCard.js` + +--- + ## 🔗 相关文档 - [项目总览 - CLAUDE.md](../CLAUDE.md)