docs: 更新 Community 文档

- 补充精简/详细模式切换功能文档
- 添加无头部模式(showHeader)使用说明
- 更新 CollapsibleSection 和 DynamicNewsDetailPanel 的 API 参考
- 添加相关组件的使用示例

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-11-07 19:47:14 +08:00
parent 52c3e25218
commit 7b49062986

View File

@@ -1101,6 +1101,70 @@ feat: 删除不需要的组件
--- ---
### 2025-01-XX: CollapsibleSection 支持精简/详细模式切换
**变更类型**: 功能增强
**优化内容**: 为事件详情面板的 CollapsibleSection 组件添加精简/详细双模式切换功能,提升用户浏览体验。
**新增功能**:
1. **CollapsibleHeader.js** - 支持模式切换按钮
- 新增 `showModeToggle` prop是否显示模式切换按钮
- 新增 `currentMode` prop当前模式'detailed' | 'simple'
- 新增 `onModeToggle` prop模式切换回调
- 按钮样式:
- 详细模式展开:`详细模式 ▲`
- 详细模式收起:`详细模式 ▼`
- 精简模式:`精简模式`
- 向后兼容:不提供 `showModeToggle` 时,保持原有的 IconButton 样式
2. **CollapsibleSection.js** - 支持精简/详细模式
- 新增 `simpleContent` prop精简模式的内容
- 新增 `showModeToggle` prop是否显示模式切换按钮
- 新增 `defaultMode` prop默认模式默认 'detailed'
- 模式切换逻辑:
- 详细模式 → 精简模式:显示 simpleContent
- 精简模式 → 详细模式:自动展开 children
- 权限控制:锁定状态下点击模式切换,触发付费弹窗
3. **SimpleStocksList.js** - 新增精简股票列表组件
- 横向展示股票名称和涨跌幅
- 自动根据涨跌幅显示颜色(红涨绿跌)
- 支持加载中状态
- 响应式设计,自动折行
4. **DynamicNewsDetailPanel.js** - 相关股票模块启用双模式
- 添加 `showModeToggle={true}`
- 添加 `simpleContent`:使用 SimpleStocksList 显示精简股票列表
- `children`:保持原有的 RelatedStocksSection完整信息
- 默认详细模式展开PRO 会员)
**用户体验提升**:
- ✅ 支持精简/详细两种浏览模式,满足不同场景需求
- ✅ 精简模式:快速浏览股票名称和涨跌幅
- ✅ 详细模式:查看完整股票信息(价格、按钮等)
- ✅ 一键切换,无需重新加载数据
- ✅ PRO 会员默认展开详细模式,优化会员体验
**技术细节**:
- 使用 React useState 管理模式状态
- 模式切换不触发数据重新加载
- 向后兼容:不使用 `showModeToggle` 的 CollapsibleSection 保持原有行为
- 权限控制:锁定状态下切换模式触发付费引导
**影响范围**:
- `src/views/Community/components/DynamicNewsDetail/CollapsibleHeader.js`
- `src/views/Community/components/DynamicNewsDetail/CollapsibleSection.js`
- `src/views/Community/components/DynamicNewsDetail/SimpleStocksList.js`(新增)
- `src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js`
**扩展性**:
- 其他模块(历史事件对比、传导链分析)可以复用此功能
- 只需提供对应的 `simpleContent` 即可启用双模式
---
## 🔗 相关文档 ## 🔗 相关文档
- [项目总览 - CLAUDE.md](../CLAUDE.md) - [项目总览 - CLAUDE.md](../CLAUDE.md)