blank/docs/architecture/source-tree.md

源码结构

项目根目录

stt-demo/
├── .bmad-core/          # BMAD 配置和工具
├── .claude/             # Claude Code 配置
├── .git/                # Git 版本控制
├── docs/                # 项目文档
├── node_modules/        # 依赖包
├── public/              # 静态资源
├── src/                 # 源代码
└── 配置文件...

源代码目录结构

src/ - 主要源代码

src/
├── components/          # 可复用 UI 组件
│   ├── avatar/         # 用户头像组件
│   │   └── index.tsx
│   ├── caption/        # 字幕相关组件
│   │   ├── caption-item/
│   │   └── index.tsx
│   ├── center-area/    # 主视频区域
│   │   └── index.tsx
│   ├── dialog/         # 对话框组件
│   │   ├── language-setting/
│   │   ├── language-show/
│   │   └── language-storage/
│   ├── extend-message/ # 扩展消息
│   │   └── index.tsx
│   ├── footer/         # 底部控制栏
│   │   ├── caption-popover/
│   │   └── index.tsx
│   ├── header/         # 顶部导航
│   │   └── index.tsx
│   ├── icons/          # 图标组件
│   ├── menu/           # 侧边菜单
│   ├── stream-player/  # 视频流播放器
│   └── user-list/      # 用户列表
├── pages/              # 页面组件
│   ├── 404/           # 404 页面
│   ├── home/          # 主页面
│   │   ├── index.module.scss
│   │   └── index.tsx
│   └── login/         # 登录页面
│       ├── index.module.scss
│       └── index.tsx
├── manager/            # 业务逻辑管理器
│   ├── events.ts      # 事件系统
│   ├── index.ts       # 管理器导出
│   ├── parser/        # 数据解析器
│   │   └── index.ts
│   ├── rtc/           # RTC 管理器
│   │   ├── index.ts
│   │   ├── rtc.ts
│   │   └── types.ts
│   ├── rtm/           # RTM 管理器
│   │   ├── index.ts
│   │   ├── rtm.ts
│   │   └── types.ts
│   ├── stt/           # STT 管理器
│   │   ├── index.ts
│   │   ├── stt.ts
│   │   └── types.ts
│   └── types.ts       # 管理器类型定义
├── store/             # 状态管理
│   ├── index.ts       # Store 配置
│   └── reducers/      # Reducers
│       └── global.ts  # 全局状态
├── common/            # 通用工具
│   ├── constant.ts    # 常量定义
│   ├── final.ts       # 最终配置
│   ├── hooks.ts       # 自定义 Hooks
│   ├── index.ts       # 通用工具导出
│   ├── mock.ts        # 模拟数据
│   ├── request.ts     # API 请求
│   ├── storage.ts     # 本地存储
│   └── utils.ts       # 工具函数
├── i18n/              # 国际化
│   └── index.js       # i18n 配置
├── router/            # 路由配置
│   └── index.tsx      # 路由定义
├── types/             # 类型定义
│   └── index.ts       # 全局类型
├── protobuf/          # Protobuf 定义
│   ├── SttMessage.js  # 编译后的 Protobuf
│   └── SttMessage.proto
├── styles/            # 样式文件
│   ├── global.css     # 全局样式
│   └── reset.css      # 重置样式
├── App.tsx            # 根组件
├── main.tsx           # 应用入口
└── vite-env.d.ts      # Vite 环境类型

关键文件说明

应用入口文件

• src/main.tsx: React 应用启动，配置 Provider
• src/App.tsx: 根组件，包含错误处理和屏幕适配

核心管理器

• src/manager/rtc/rtc.ts: RTC 音视频通信管理
• src/manager/rtm/rtm.ts: RTM 实时消息管理
• src/manager/stt/stt.ts: STT 语音转文字管理
• src/manager/events.ts: 自定义事件系统

状态管理

• src/store/index.ts: Redux store 配置
• src/store/reducers/global.ts: 全局状态 reducer

页面组件

• src/pages/login/index.tsx: 登录页面
• src/pages/home/index.tsx: 主页面（音视频通话）

通用工具

• src/common/hooks.ts: 自定义 React Hooks
• src/common/request.ts: API 请求封装
• src/common/utils.ts: 工具函数
• src/common/storage.ts: 本地存储管理

模块依赖关系

核心依赖流

App.tsx → Router → Pages → Components
                    ↓
                Manager Layer (RTC/RTM/STT)
                    ↓
                Store (Redux)
                    ↓
                Common Utilities

管理器间依赖

RtcManager ──────┐
                 ├──→ Event System
RtmManager ──────┤
                 └──→ Store
SttManager ──────┘

文件命名规范

组件文件

• 主文件: index.tsx
• 样式文件: index.module.scss
• 类型文件: types.ts (如存在)

工具文件

• 工具函数: utils.ts
• 常量定义: constant.ts
• API 接口: request.ts

导出规范

• 默认导出: 主要用于组件
• 命名导出: 用于工具函数、类型等
• Barrel 导出: 使用 index.ts 统一导出

新增文件指南

添加新组件

1. 在 components/ 下创建新目录
2. 创建 index.tsx 和 index.module.scss
3. 如需类型，创建 types.ts
4. 更新相关 barrel 导出文件

添加新页面

1. 在 pages/ 下创建新目录
2. 遵循组件文件规范
3. 在 src/router/index.tsx 中添加路由

添加新管理器

1. 在 manager/ 下创建新目录
2. 实现核心业务逻辑
3. 定义相关类型
4. 更新 manager/index.ts 导出