docs(CLAUDE): 更新项目目录结构文档

核心目录概览:
- 添加 types/、devtools/、bytedesk-integration/ 等新目录
- 完善 store/、services/、utils/ 子目录结构
- 详细展示 assets/、theme/、mocks/ 子目录

Views 目录:
- 完整列出 18 个页面模块
- 详细展示 AgentChat、Company、Community 等复杂模块结构

Components 目录:
- 更新为实际的按功能分类结构
- 列出 50+ 个组件目录

其他更新:
- 更新 Contexts 列表(添加 GlobalSidebarContext)
- 更新 Redux Slices 列表(添加 planningSlice、deviceSlice)
- 更新 Services 列表(20+ 服务文件)

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-23 14:51:15 +08:00
parent b2ade04b00
commit 939b4e736c

285
CLAUDE.md
View File

@@ -154,24 +154,54 @@ src/
├── providers/ # Provider 组合层
├── routes/ # 路由配置与管理
│ ├── constants/ # 路由常量(保护模式等)
│ └── utils/ # 路由工具函数
├── layouts/ # 页面布局模板
├── views/ # 页面级组件
├── components/ # 可复用 UI 组件
│ ├── components/ # 布局专用组件
│ └── config/ # 布局配置
├── views/ # 页面级组件(详见下方)
├── components/ # 可复用 UI 组件(详见下方)
├── contexts/ # React Context 状态管理
├── store/ # Redux 全局状态管理
│ ├── api/ # RTK Query API 定义
│ ├── middleware/ # Redux 中间件
│ └── slices/ # Redux Slices
├── hooks/ # 自定义 React Hooks
├── types/ # TypeScript 类型定义
├── services/ # API 服务层
│ └── socket/ # WebSocket 服务
├── utils/ # 工具函数库
│ ├── performance/ # 性能监控工具
│ └── stock/ # 股票相关工具
├── constants/ # 全局常量定义
├── theme/ # UI 主题配置
├── theme/ # Chakra UI 主题配置
│ ├── additions/ # 主题扩展
│ ├── components/ # 组件级主题
│ └── foundations/ # 基础样式(颜色、字体等)
├── assets/ # 静态资源
│ ├── css/ # CSS 样式
│ ├── fonts/ # 字体文件
│ ├── img/ # 图片资源
│ ├── less/ # Less 样式
│ ├── scss/ # SCSS 样式
│ ├── sounds/ # 音频文件
│ ├── sprites/ # 精灵图
│ ├── svg/ # SVG 图标
│ └── svgs/ # SVG 组件
├── styles/ # 全局样式
├── mocks/ # 开发环境 Mock 数据
│ ├── data/ # Mock 数据文件
│ └── handlers/ # MSW 请求处理器
├── lib/ # 第三方库配置
├── data/ # 静态数据文件
├── devtools/ # 开发调试工具
├── bytedesk-integration/ # 客服系统集成
│ ├── components/ # 客服组件
│ └── config/ # 客服配置
└── variables/ # 可配置变量
```
@@ -253,26 +283,99 @@ ReduxProvider // 1. Redux 状态管理(最外层)
**组织结构**:
```
views/
├── AgentChat/ # AI 智能会话页面
│ ├── index.js # 页面入口
│ ├── components/ # 页面专属组件
│ │ ├── ChatArea/ # 聊天区域
│ │ ├── LeftSidebar/ # 左侧边栏
│ │ ├── RightSidebar/ # 右侧边栏
│ │ └── MeetingRoom/ # 会议室组件
│ ├── constants/ # 页面常量
│ ├── hooks/ # 页面专属 Hooks
│ └── utils/ # 页面专属工具函数
├── Center/ # 投资规划中心页面
│ ├── components/ # 日历、事件面板等
│ ├── hooks/ # 页面 Hooks
│ └── utils/ # 工具函数
├── Community/ # 社区页面(大型功能模块)
│ ├── index.js # 页面入口
│ ├── components/ # 页面专属组件
│ │ ├── EventList/
│ │ ├── EventCard/
│ │ ── StockDetailPanel/
│ ├── hooks/ # 页面专属 Hooks
│ │ └── useCommunityData.js
│ └── utils/ # 页面专属工具函数
│ │ ├── DynamicNews/ # 动态新闻模块
│ │ ├── EventCard/ # 事件卡片(含 atoms 子目录)
│ │ ── EventDetailModal/ # 事件详情弹窗
│ ├── HotEvents/ # 热点事件
│ │ └── SearchFilters/ # 搜索筛选器
│ └── hooks/ # 页面专属 Hooks
├── Company/ # 公司详情页面(复杂模块)
│ ├── components/ # 页面专属组件
│ │ ├── CompanyHeader/ # 公司头部信息
│ │ ├── CompanyOverview/ # 公司概览(含多个 Tab
│ │ │ ├── BasicInfoTab/ # 基础信息 Tab
│ │ │ ├── DeepAnalysisTab/ # 深度分析 Tab
│ │ │ └── hooks/ # Tab 专属 Hooks
│ │ ├── CompanyTabs/ # Tab 导航
│ │ ├── DynamicTracking/ # 动态跟踪
│ │ ├── FinancialPanorama/ # 财务全景
│ │ ├── ForecastReport/ # 预测报告
│ │ ├── MarketDataView/ # 市场数据视图
│ │ │ ├── components/ # 子组件
│ │ │ │ ├── panels/ # 面板组件
│ │ │ │ ├── shared/ # 共享组件
│ │ │ │ └── StockSummaryCard/
│ │ │ ├── hooks/ # 数据 Hooks
│ │ │ ├── services/ # API 服务
│ │ │ └── utils/ # 工具函数
│ │ └── StockQuoteCard/ # 股票报价卡片
│ ├── constants/ # 公司页面常量
│ ├── hooks/ # 公司页面 Hooks
│ └── theme/ # 公司页面主题
├── Concept/ # 概念板块页面
│ ├── components/
│ └── hooks/
├── EventDetail/ # 事件详情页面
│ ├── components/
│ └── hooks/
├── Home/ # 首页
│ └── components/
├── LimitAnalyse/ # 涨停分析页面
│ ├── components/
│ └── hooks/
├── Profile/ # 用户中心页面
│ └── components/
│ ├── ForumCenter/ # 论坛中心
│ ├── MarketDashboard/ # 市场仪表板
│ └── WatchSidebar/ # 自选股侧边栏
├── StockOverview/ # 股票概览页面
│ ├── components/
│ │ ├── FlexScreen/ # 弹性屏幕
│ │ └── HotspotOverview/ # 热点概览
│ ├── hooks/
│ └── theme/
├── TradingSimulation/ # 交易模拟页面
│ ├── index.js
│ ├── components/
│ └── ...
│ └── hooks/
├── Dashboard/ # 仪表板页面
── index.js
├── Authentication/ # 认证相关页面
── Lock/
│ ├── Reset/
│ └── Verification/
── Portfolio/ # 投资组合页面(简单页面)
└── index.js
── DataBrowser/ # 数据浏览器页面
├── Landing/ # 落地页
├── Pages/ # 其他页面
├── Pricing/ # 定价页面
├── Settings/ # 设置页面
└── ValueForum/ # 价值论坛页面
```
**命名约定**:
@@ -290,27 +393,94 @@ views/
**用途**: 存放跨页面复用的通用 UI 组件(按钮、卡片、表格、模态框等)。
**组织结构**推荐采用原子设计模式:
**组织结构**按功能分类:
```
components/
├── Atoms/ # 原子组件1-50 行)
├── Button/
│ ├── Badge/
│ └── Icon/
├── Auth/ # 认证相关组件
├── Button/ # 按钮组件
├── Card/ # 卡片组件
├── Calendars/ # 日历组件
├── Molecules/ # 分子组件50-150 行)
── Card/
├── StatCard/
│ └── SearchBar/
├── Charts/ # 图表组件
── Stock/ # 股票图表
└── hooks/ # 图表专用 Hooks
├── StockChart/ # K 线图组件(独立)
│ ├── config/ # 图表配置
│ ├── hooks/ # 图表 Hooks
│ ├── indicators/ # 技术指标
│ ├── types/ # 类型定义
│ └── utils/ # 工具函数
├── Organisms/ # 有机体组件150-500 行)
│ ├── Navbar/
│ ├── Sidebar/
│ ├── DataTable/
│ └── FilterPanel/
├── ChatBot/ # 聊天机器人组件
├── Citation/ # 引用组件
├── ConceptStocksModal/ # 概念股票弹窗
├── ConnectionStatusBar/ # 连接状态栏
├── Editor/ # 富文本编辑器
├── ErrorPage/ # 错误页面组件
── Templates/ # 模板组件(可选)
└── PageTemplate/
── EventCommentSection/ # 事件评论区
├── EventDetailPanel/ # 事件详情面板
│ └── RelatedConceptsSection/ # 相关概念区域
├── FavoriteButton/ # 收藏按钮
├── Footer/ # 页脚组件
├── FUI/ # 金融 UI 组件库
├── GlassCard/ # 玻璃态卡片
├── GlobalSidebar/ # 全局侧边栏
├── Header/ # 页头组件
├── Heading/ # 标题组件
├── Icons/ # 图标组件
├── Image/ # 图片组件
├── ImageLightbox/ # 图片灯箱
├── ImagePreviewModal/ # 图片预览弹窗
├── InvestmentCalendar/ # 投资日历
├── Layout/ # 布局辅助组件
├── Loading/ # 加载状态组件
├── Logo/ # Logo 组件
├── Menu/ # 菜单组件
├── MiniProgramLauncher/ # 小程序启动器
│ └── hooks/
├── Navbars/ # 导航栏组件
│ ├── components/ # 子组件
│ │ ├── FeatureMenus/ # 功能菜单
│ │ ├── MobileDrawer/ # 移动端抽屉
│ │ ├── NavbarActions/ # 导航栏操作
│ │ ├── Navigation/ # 导航组件
│ │ ├── ProfileCompletenessAlert/ # 资料完善提醒
│ │ └── UserMenu/ # 用户菜单
│ ├── SearchBar/ # 搜索栏
│ └── Settings/ # 设置面板
├── NotificationContainer/ # 通知容器
├── PinInput/ # PIN 输入组件
├── ReferencePopover/ # 引用弹出框
├── RelationDescWithReferences/ # 带引用的关系描述
├── RiskDisclaimer/ # 风险提示
├── RTLProvider/ # RTL 支持
├── Scrollbar/ # 自定义滚动条
├── ScrollToTop/ # 返回顶部
├── Section/ # 区块组件
├── Separator/ # 分隔线
├── StockRelation/ # 股票关系图
├── Subscription/ # 订阅组件
├── SubTabContainer/ # 子 Tab 容器
├── TabContainer/ # Tab 容器
├── Tables/ # 表格组件
├── TabPanelContainer/ # Tab 面板容器
├── Tagline/ # 标语组件
├── TradeDatePicker/ # 交易日期选择器
├── VisxPieChart/ # Visx 饼图
├── Arrows/ # 箭头组件
├── Configurator/ # 配置器组件
├── contexts/ # 组件专用 Context
├── FixedPlugin/ # 固定插件
└── Generating/ # 生成中状态
```
**何时添加新组件**:
@@ -337,8 +507,9 @@ components/
**核心 Contexts**:
- `AuthContext.js` - 认证状态(用户信息、登录状态、登录/登出方法)
- `NotificationContext.js` - 通知系统(显示 Toast/Alert
- `SidebarContext.js` - 侧边栏状态(展开/收起)
- `NotificationContext.js` - 通知系统(Socket.IO 实时通知、Toast/Alert
- `GlobalSidebarContext.js` - 全局侧边栏状态(展开/收起、面板切换
- `SidebarContext.js` - 页面侧边栏状态(展开/收起)
**何时使用 Context**:
- 跨层级传递数据(避免 props drilling
@@ -378,13 +549,16 @@ export const useAuth = () => useContext(AuthContext); // 自定义 Hook
```
store/
├── index.js # Store 配置combineReducers
├── hooks.ts # 类型化 HooksuseAppSelector, useAppDispatch
└── slices/ # Redux Slices
├── authModalSlice.js # 认证模态框状态
├── posthogSlice.js # PostHog 分析配置
├── stockSlice.js # 股票数据
├── communityDataSlice.js # 社区数据(事件列表、筛选)
├── deviceSlice.js # 设备检测
├── industrySlice.js # 行业/概念数据
├── subscriptionSlice.js # 用户订阅状态
── communityDataSlice.js # 社区数据
├── planningSlice.ts # 投资规划中心
── posthogSlice.js # PostHog 分析配置
├── stockSlice.js # 股票数据(自选股)
└── subscriptionSlice.js # 用户订阅状态
```
**何时使用 Redux**:
@@ -443,11 +617,25 @@ hooks/
```
services/
├── authService.js # 认证相关 API登录、注册、登出
├── stockService.js # 股票数据 API
├── portfolioService.js # 投资组合 API
├── communityService.js # 社区内容 API
├── tradingService.js # 交易模拟 API
── userService.js # 用户信息 API
├── stockService.js # 股票数据 API(模糊搜索、股票信息)
├── eventService.js # 事件/资讯 API
├── financialService.js # 财务数据 API财报、指标
├── marketService.js # 市场数据 API行情、交易数据
── industryService.js # 行业/概念 API
├── categoryService.ts # 分类数据 API
├── elasticsearchService.js # ES 搜索服务
├── llmService.js # LLM 大模型服务
├── mcpService.js # MCP 协议服务
├── socketService.js # WebSocket 服务
├── browserNotificationService.js # 浏览器通知服务
├── notificationHistoryService.js # 通知历史服务
├── notificationMetricsService.js # 通知统计服务
├── creditSystemService.js # 积分系统服务
├── predictionMarketService.js # 预测市场服务
├── miniprogramService.js # 小程序服务
├── conceptStaticService.js # 概念静态数据
├── ztStaticService.js # 涨停静态数据
└── socket/ # WebSocket 模块
```
**服务函数命名约定**:
@@ -1384,16 +1572,19 @@ src/views/Community/components/
### Redux 状态管理
**现有 slices**`src/store/slices/`
- `authModalSlice` - 认证模态框状态
- `posthogSlice` - PostHog 分析
- `stockSlice` - 股票数据
- `communityDataSlice` - 社区内容(事件列表、筛选等)
- `deviceSlice` - 设备信息(移动端/桌面端检测)
- `industrySlice` - 行业/概念数据
- `subscriptionSlice` - 用户订阅
- `communityDataSlice` - 社区内容
- `planningSlice.ts` - 投资规划中心(计划、复盘、日历事件)
- `posthogSlice` - PostHog 分析配置
- `stockSlice` - 股票数据(自选股、全量股票列表)
- `subscriptionSlice` - 用户订阅状态
**添加新 slice**
1. 创建 `src/store/slices/yourSlice.js`
1. 创建 `src/store/slices/yourSlice.js`(推荐使用 TypeScript: `.ts`
2.`src/store/index.js` 中导入并添加
3. 通过 `useSelector` 访问,通过 `useDispatch` 派发
4. 使用 `useAppSelector``useAppDispatch`(类型化版本,推荐)
---