# 源码结构

## 项目根目录

```
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` 导出