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:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user