From 939b4e736c608de586db822471ba6c58c1c006ca Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Tue, 23 Dec 2025 14:51:15 +0800 Subject: [PATCH] =?UTF-8?q?docs(CLAUDE):=20=E6=9B=B4=E6=96=B0=E9=A1=B9?= =?UTF-8?q?=E7=9B=AE=E7=9B=AE=E5=BD=95=E7=BB=93=E6=9E=84=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 核心目录概览: - 添加 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 --- CLAUDE.md | 285 +++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 238 insertions(+), 47 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 0d161d2f..9b5ce716 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -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 # 类型化 Hooks（useAppSelector, 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`（类型化版本，推荐） ---