2
0
Pārlūkot izejas kodu

📝 docs(sdk): add STT SDK development documentation

- add SDK development section to README.md with features and status
- create API specification document for STT SDK interfaces
- add architecture design document for SDK structure
- create package structure document for monorepo organization
- add epic planning document for SDK development roadmap
yourname 3 mēneši atpakaļ
vecāks
revīzija
defd42adc3

+ 39 - 25
README.md

@@ -1,55 +1,37 @@
 # Agora RTT Web Demo
 
-
-
 ## Prepare
 
-* node version 18+ , 20+
-
-
+- node version 18+ , 20+
 
 ## Config
 
 See [Get Started with Agora](https://docs.agora.io/en/video-calling/reference/manage-agora-account?platform=web#get-started-with-agora) to learn how to get an App ID and App Certificate. (Certificate must be turned on)
 
-
-
 Activate RTM permissions in the console
 
 <img src=https://fullapp.oss-cn-beijing.aliyuncs.com/pic/rtm/39351715138175_.pic.jpg width=80% />
 
-
-
-
-
 Contact technical support to activate RTT permissions
 
-- You can get help from intelligent customer service or contact sales staff [Agora support](https://agora-ticket.agora.io/) 
-- Send an email to  [support@agora.io](mailto:support@agora.io)  for consultation
-
-
+- You can get help from intelligent customer service or contact sales staff [Agora support](https://agora-ticket.agora.io/)
+- Send an email to [support@agora.io](mailto:support@agora.io) for consultation
 
-Find `.env`  file  and fill in the following parameters correctly
+Find `.env` file and fill in the following parameters correctly
 
 ```bash
 VITE_AGORA_APP_ID=<YOUR_APP_ID>
 VITE_AGORA_APP_CERTIFICATE=<YOUR_APP_CERTIFICATE>
 ```
 
-
-
 ## Install
 
 In the project root path run the following command to install dependencies.
 
 ```bash
-npm install 
+npm install
 ```
 
-
-
-
-
 ## Dev
 
 Use the following command to run the sample project.
@@ -58,8 +40,6 @@ Use the following command to run the sample project.
 npm run dev
 ```
 
-
-
 ## Build
 
 Use the following command to build the sample project.
@@ -67,3 +47,37 @@ Use the following command to build the sample project.
 ```bash
 npm run build
 ```
+
+## SDK Development
+
+This project includes plans for developing a reusable STT (Speech-to-Text) SDK based on the existing functionality.
+
+### SDK Epic and Documentation
+
+- **Epic Document**: [docs/prd/epic-1-stt-sdk.md](docs/prd/epic-1-stt-sdk.md) - Complete development epic for the STT SDK
+- **API Specification**: [docs/prd/epic-1-stt-sdk-api-spec.md](docs/prd/epic-1-stt-sdk-api-spec.md) - Detailed API interface specifications
+- **Architecture Design**: [docs/prd/epic-1-stt-sdk-architecture.md](docs/prd/epic-1-stt-sdk-architecture.md) - SDK architecture design
+- **Package Structure**: [docs/prd/epic-1-stt-sdk-package-structure.md](docs/prd/epic-1-stt-sdk-package-structure.md) - Monorepo package structure
+
+### SDK Features
+
+The planned SDK will provide:
+
+- Reusable STT and RTM manager functionality
+- Universal TypeScript interfaces (framework-agnostic)
+- Multi-language transcription and translation support
+- Complete TypeScript type definitions
+- Framework adapters (React, Vue, Angular) as optional packages
+- Comprehensive documentation and examples
+
+### Development Status
+
+- [x] Epic planning and scope definition
+- [x] API specification completed
+- [x] Architecture design completed
+- [x] Package structure designed
+- [ ] Implementation (planned)
+- [ ] Testing and validation
+- [ ] Documentation and examples
+
+For detailed development plans, please refer to the epic documentation.

+ 379 - 0
docs/prd/epic-1-stt-sdk-api-spec.md

@@ -0,0 +1,379 @@
+# STT SDK API 规范
+
+## 概述
+
+本文档定义了语音转文字数据流SDK的API接口规范,基于现有stt-demo应用的功能进行封装。
+
+## 核心接口
+
+### SDK 初始化接口
+
+```typescript
+interface SttSdkConfig {
+  appId: string
+  appCertificate?: string
+  rtmConfig?: RTMConfig
+  sttServiceUrl?: string
+}
+
+interface SttSdk {
+  // 初始化SDK
+  initialize(config: SttSdkConfig): Promise<void>
+
+  // 销毁SDK资源
+  destroy(): Promise<void>
+
+  // 获取管理器实例
+  getSttManager(): SttManager
+  getRtmManager(): RtmManager
+
+  // 创建客户端实例(通用接口)
+  createSttClient(options: SttClientOptions): SttClient
+  createRtmClient(options: RtmClientOptions): RtmClient
+}
+```
+
+### STT管理器接口(基于现有SttManager封装)
+
+```typescript
+interface SttManager {
+  // 初始化STT管理器
+  init(options: { userId: string | number; channel: string; userName: string }): Promise<void>
+
+  // 开始转录
+  startTranscription(options: { languages: ILanguageItem[]; autoStart?: boolean }): Promise<void>
+
+  // 停止转录
+  stopTranscription(): Promise<void>
+
+  // 查询转录状态
+  queryTranscription(): Promise<any>
+
+  // 更新转录配置
+  updateTranscription(options: { data: any; updateMaskList: string[] }): Promise<void>
+
+  // 延长转录时长
+  extendDuration(options: { startTime?: number; duration?: number }): Promise<void>
+
+  // 销毁管理器
+  destroy(): Promise<void>
+
+  // 事件监听
+  on(event: "transcriptionStart", callback: () => void): void
+  on(event: "transcriptionStop", callback: () => void): void
+  on(event: "transcriptionResult", callback: (result: TranscriptionResult) => void): void
+  on(event: "error", callback: (error: Error) => void): void
+}
+```
+
+### RTM管理器接口(基于现有RtmManager封装)
+
+```typescript
+interface RtmManager {
+  // 加入频道
+  join(options: { userId: string; channel: string; userName: string }): Promise<void>
+
+  // 离开频道
+  leave(): Promise<void>
+
+  // 更新STT数据
+  updateSttData(data: ISttData): Promise<void>
+
+  // 更新语言配置
+  updateLanguages(languages: ILanguageItem[]): Promise<void>
+
+  // 获取锁
+  acquireLock(): Promise<void>
+
+  // 释放锁
+  releaseLock(): Promise<void>
+
+  // 事件监听
+  on(event: "userListChanged", callback: (users: ISimpleUserInfo[]) => void): void
+  on(event: "languagesChanged", callback: (languages: ILanguageSelect) => void): void
+  on(event: "sttDataChanged", callback: (data: ISttData) => void): void
+  on(event: "messageReceived", callback: (message: any) => void): void
+}
+```
+
+### 通用客户端接口
+
+```typescript
+// STT 客户端接口
+interface SttClient {
+  // 状态
+  readonly isInitialized: boolean
+  readonly isTranscribing: boolean
+  readonly transcriptionResults: TranscriptionResult[]
+  readonly currentLanguage: ILanguageItem | null
+  readonly error: Error | null
+
+  // 初始化
+  initialize(options: SttInitOptions): Promise<void>
+
+  // 转录控制
+  startTranscription(options: StartOptions): Promise<void>
+  stopTranscription(): Promise<void>
+  updateLanguages(languages: ILanguageItem[]): Promise<void>
+
+  // 事件监听
+  on(event: "initialized", callback: () => void): void
+  on(event: "transcriptionStart", callback: () => void): void
+  on(event: "transcriptionStop", callback: () => void): void
+  on(event: "transcriptionResult", callback: (result: TranscriptionResult) => void): void
+  on(event: "error", callback: (error: Error) => void): void
+
+  // 清理
+  destroy(): Promise<void>
+}
+
+// RTM 客户端接口
+interface RtmClient {
+  // 状态
+  readonly isConnected: boolean
+  readonly users: ISimpleUserInfo[]
+  readonly channelLanguages: ILanguageSelect | null
+  readonly sttStatus: ISttData | null
+
+  // 连接管理
+  joinChannel(options: JoinOptions): Promise<void>
+  leaveChannel(): Promise<void>
+
+  // 消息处理
+  sendMessage(message: any): Promise<void>
+
+  // 事件监听
+  on(event: "connected", callback: () => void): void
+  on(event: "disconnected", callback: () => void): void
+  on(event: "userListChanged", callback: (users: ISimpleUserInfo[]) => void): void
+  on(event: "languagesChanged", callback: (languages: ILanguageSelect) => void): void
+  on(event: "sttDataChanged", callback: (data: ISttData) => void): void
+  on(event: "messageReceived", callback: (message: any) => void): void
+
+  // 清理
+  destroy(): Promise<void>
+}
+
+// 客户端配置
+interface SttClientOptions {
+  userId: string | number
+  channel: string
+  userName: string
+  languages?: ILanguageItem[]
+}
+
+interface RtmClientOptions {
+  userId: string
+  channel: string
+  userName: string
+}
+```
+
+## 配置接口
+
+### 语言配置
+
+```typescript
+interface ILanguageItem {
+  source?: string // 转录语言代码
+  target?: string[] // 翻译目标语言代码数组
+}
+
+interface ILanguageSelect {
+  transcribe1: string
+  translate1List: string[]
+  transcribe2: string
+  translate2List: string[]
+}
+```
+
+### STT数据接口
+
+```typescript
+interface ISttData {
+  status?: "start" | "end"
+  taskId?: string
+  token?: string
+  startTime?: number
+  duration?: number
+}
+```
+
+### 转录结果接口
+
+```typescript
+interface TranscriptionResult {
+  text: string
+  language: string
+  confidence: number
+  timestamp: number
+  userId: string
+  translations?: {
+    [language: string]: string
+  }
+}
+```
+
+## 使用示例
+
+### 基础使用(通用TypeScript)
+
+```typescript
+import { createSttSdk } from "@agora/stt-sdk"
+
+// 初始化SDK
+const sdk = createSttSdk()
+await sdk.initialize({
+  appId: "your-app-id",
+  appCertificate: "your-certificate",
+})
+
+// 创建STT客户端
+const sttClient = sdk.createSttClient({
+  userId: "user-123",
+  channel: "test-channel",
+  userName: "Test User",
+  languages: [{ source: "zh-CN", target: ["en-US", "ja-JP"] }],
+})
+
+// 监听事件
+sttClient.on("transcriptionResult", (result) => {
+  console.log("转录结果:", result.text)
+  console.log("语言:", result.language)
+  console.log("时间:", new Date(result.timestamp).toLocaleTimeString())
+})
+
+sttClient.on("error", (error) => {
+  console.error("STT错误:", error)
+})
+
+// 初始化客户端
+await sttClient.initialize()
+
+// 开始转录
+await sttClient.startTranscription()
+
+// 停止转录
+await sttClient.stopTranscription()
+
+// 清理资源
+await sttClient.destroy()
+await sdk.destroy()
+```
+
+### 高级配置和多框架示例
+
+```typescript
+// 自定义配置
+const sdk = createSttSdk();
+await sdk.initialize({
+  appId: 'your-app-id',
+  rtmConfig: {
+    enableLogUpload: true,
+    logFilter: 'debug'
+  },
+  sttServiceUrl: 'https://custom-stt-service.com'
+});
+
+// 直接使用管理器(高级用法)
+const sttManager = sdk.getSttManager();
+const rtmManager = sdk.getRtmManager();
+
+// 监听事件
+sttManager.on('transcriptionResult', (result) => {
+  console.log('转录结果:', result);
+});
+
+rtmManager.on('userListChanged', (users) => {
+  console.log('用户列表更新:', users);
+});
+
+// React 适配器示例(可选包)
+import { useSttClient } from '@agora/stt-sdk/react';
+
+function TranscriptionComponent() {
+  const sttClient = useSttClient({
+    userId: 'user-123',
+    channel: 'test-channel',
+    userName: 'Test User'
+  });
+
+  const handleStart = async () => {
+    await sttClient.startTranscription({
+      languages: [{ source: 'zh-CN', target: ['en-US'] }]
+    });
+  };
+
+  return (
+    <div>
+      <button onClick={handleStart} disabled={sttClient.isTranscribing}>
+        {sttClient.isTranscribing ? '转录中...' : '开始转录'}
+      </button>
+      <div>
+        {sttClient.transcriptionResults.map((result, index) => (
+          <div key={index}>
+            <p>{result.text}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// Vue 适配器示例(可选包)
+import { useSttClient } from '@agora/stt-sdk/vue';
+
+export default {
+  setup() {
+    const sttClient = useSttClient({
+      userId: 'user-123',
+      channel: 'test-channel',
+      userName: 'Test User'
+    });
+
+    const handleStart = async () => {
+      await sttClient.startTranscription();
+    };
+
+    return {
+      sttClient,
+      handleStart
+    };
+  }
+};
+```
+
+## 错误处理
+
+```typescript
+// 错误类型定义
+enum SttErrorCode {
+  INITIALIZATION_FAILED = "INITIALIZATION_FAILED",
+  NETWORK_ERROR = "NETWORK_ERROR",
+  PERMISSION_DENIED = "PERMISSION_DENIED",
+  INVALID_CONFIG = "INVALID_CONFIG",
+  TRANSCRIPTION_FAILED = "TRANSCRIPTION_FAILED",
+}
+
+interface SttError extends Error {
+  code: SttErrorCode
+  details?: any
+}
+
+// 错误处理示例
+try {
+  await sdk.initialize(config)
+} catch (error) {
+  if (error.code === SttErrorCode.INITIALIZATION_FAILED) {
+    console.error("SDK初始化失败:", error.details)
+  }
+}
+```
+
+## 性能优化建议
+
+1. **连接复用**: SDK内部复用RTM连接,避免重复建立连接
+2. **事件去重**: 对高频事件进行适当的去重处理
+3. **内存管理**: 及时清理不再使用的转录结果
+4. **错误重试**: 对网络错误实现自动重试机制
+5. **懒加载**: 按需加载SDK模块,减少初始包大小

+ 313 - 0
docs/prd/epic-1-stt-sdk-architecture.md

@@ -0,0 +1,313 @@
+# STT SDK 通用架构设计
+
+## 概述
+
+本文档描述了语音转文字数据流SDK的通用TypeScript架构设计,确保SDK可以在任何TypeScript项目中使用,不依赖特定框架。
+
+## 架构设计原则
+
+### 1. 框架无关性
+
+- SDK核心不依赖任何前端框架(React、Vue、Angular等)
+- 提供通用的类式API接口
+- 框架适配器作为可选包提供
+
+### 2. 模块化设计
+
+- 核心SDK包:`@agora/stt-sdk`
+- React适配器:`@agora/stt-sdk/react`
+- Vue适配器:`@agora/stt-sdk/vue`
+- Angular适配器:`@agora/stt-sdk/angular`
+
+### 3. 类型安全
+
+- 完整的TypeScript类型定义
+- 编译时类型检查
+- 智能代码提示
+
+## 核心架构
+
+### SDK 层次结构
+
+```
+┌─────────────────────────────────────────┐
+│           应用层 (Application)           │
+├─────────────────────────────────────────┤
+│         框架适配器 (可选)                │
+│  ┌─────────┐ ┌─────────┐ ┌─────────┐    │
+│  │ React   │ │  Vue    │ │ Angular │    │
+│  │ Adapter │ │ Adapter │ │ Adapter │    │
+│  └─────────┘ └─────────┘ └─────────┘    │
+├─────────────────────────────────────────┤
+│           核心SDK层                      │
+│  ┌─────────┐ ┌─────────┐                │
+│  │ SttClient│ │ RtmClient│               │
+│  └─────────┘ └─────────┘                │
+├─────────────────────────────────────────┤
+│           管理器层                       │
+│  ┌─────────┐ ┌─────────┐                │
+│  │SttManager│ │RtmManager│               │
+│  └─────────┘ └─────────┘                │
+├─────────────────────────────────────────┤
+│           服务层                         │
+│  ┌─────────┐ ┌─────────┐                │
+│  │ STT API │ │ RTM API │                │
+│  └─────────┘ └─────────┘                │
+└─────────────────────────────────────────┘
+```
+
+### 核心组件设计
+
+#### 1. SttSdk (主入口)
+
+```typescript
+class SttSdk {
+  // 单例模式,全局配置管理
+  private static instance: SttSdk
+  private config: SttSdkConfig
+
+  // 管理器实例池
+  private sttManagers: Map<string, SttManager>
+  private rtmManagers: Map<string, RtmManager>
+
+  // 客户端实例池
+  private sttClients: Map<string, SttClient>
+  private rtmClients: Map<string, RtmClient>
+
+  // 公共方法
+  initialize(config: SttSdkConfig): Promise<void>
+  createSttClient(options: SttClientOptions): SttClient
+  createRtmClient(options: RtmClientOptions): RtmClient
+  destroy(): Promise<void>
+}
+```
+
+#### 2. SttClient (通用客户端)
+
+```typescript
+class SttClient {
+  // 状态管理
+  private state: SttClientState
+
+  // 事件系统
+  private eventEmitter: EventEmitter
+
+  // 依赖注入
+  private sttManager: SttManager
+  private rtmManager: RtmManager
+
+  // 公共API
+  initialize(options: SttInitOptions): Promise<void>
+  startTranscription(options: StartOptions): Promise<void>
+  stopTranscription(): Promise<void>
+
+  // 事件监听
+  on(event: string, callback: Function): void
+  off(event: string, callback: Function): void
+}
+```
+
+#### 3. 事件系统设计
+
+```typescript
+interface SttClientEvents {
+  initialized: () => void
+  transcriptionStart: () => void
+  transcriptionStop: () => void
+  transcriptionResult: (result: TranscriptionResult) => void
+  error: (error: SttError) => void
+}
+
+interface RtmClientEvents {
+  connected: () => void
+  disconnected: () => void
+  userListChanged: (users: ISimpleUserInfo[]) => void
+  messageReceived: (message: any) => void
+}
+```
+
+## 包结构设计
+
+### 1. 核心包 (@agora/stt-sdk)
+
+```
+stt-sdk/
+├── src/
+│   ├── core/
+│   │   ├── SttSdk.ts          # 主SDK类
+│   │   ├── SttClient.ts       # STT客户端
+│   │   ├── RtmClient.ts       # RTM客户端
+│   │   └── EventEmitter.ts    # 事件系统
+│   ├── managers/
+│   │   ├── SttManager.ts      # STT管理器封装
+│   │   └── RtmManager.ts      # RTM管理器封装
+│   ├── types/
+│   │   ├── index.ts           # 类型定义
+│   │   ├── events.ts          # 事件类型
+│   │   └── errors.ts          # 错误类型
+│   └── utils/
+│       ├── config.ts          # 配置工具
+│       └── validation.ts      # 验证工具
+├── dist/                      # 构建输出
+├── package.json
+└── README.md
+```
+
+### 2. React适配器包 (@agora/stt-sdk/react)
+
+```
+stt-sdk-react/
+├── src/
+│   ├── hooks/
+│   │   ├── useSttClient.ts    # React Hook
+│   │   └── useRtmClient.ts    # React Hook
+│   ├── components/
+│   │   ├── SttProvider.tsx    # Context Provider
+│   │   └── Transcription.tsx  # 示例组件
+│   └── types/
+│       └── index.ts           # React特定类型
+├── dist/
+├── package.json
+└── README.md
+```
+
+### 3. Vue适配器包 (@agora/stt-sdk/vue)
+
+```
+stt-sdk-vue/
+├── src/
+│   ├── composables/
+│   │   ├── useSttClient.ts    # Vue Composable
+│   │   └── useRtmClient.ts    # Vue Composable
+│   ├── components/
+│   │   ├── SttProvider.vue    # Provide/Inject
+│   │   └── Transcription.vue  # 示例组件
+│   └── types/
+│       └── index.ts           # Vue特定类型
+├── dist/
+├── package.json
+└── README.md
+```
+
+## 集成模式
+
+### 1. 纯TypeScript项目
+
+```typescript
+import { createSttSdk } from "@agora/stt-sdk"
+
+const sdk = createSttSdk()
+await sdk.initialize(config)
+
+const sttClient = sdk.createSttClient(options)
+sttClient.on("transcriptionResult", handleResult)
+await sttClient.initialize()
+```
+
+### 2. Node.js后端项目
+
+```typescript
+import { createSttSdk } from "@agora/stt-sdk"
+
+// 可用于服务端的语音处理
+const sdk = createSttSdk()
+await sdk.initialize(config)
+
+// 处理音频文件转录
+const result = await processAudioFile(audioBuffer)
+```
+
+### 3. 浏览器扩展
+
+```typescript
+// 在Chrome扩展中使用
+const sdk = createSttSdk()
+await sdk.initialize(config)
+
+// 捕获标签页音频进行转录
+chrome.tabs.captureVisibleTab((audio) => {
+  // 处理音频转录
+})
+```
+
+## 性能优化策略
+
+### 1. 懒加载
+
+- 按需加载SDK模块
+- 动态导入大型依赖
+- 减少初始包大小
+
+### 2. 连接复用
+
+- RTM连接池管理
+- 避免重复建立连接
+- 智能连接保持
+
+### 3. 事件优化
+
+- 事件去重机制
+- 批量事件处理
+- 内存泄漏防护
+
+### 4. 资源管理
+
+- 自动垃圾回收
+- 连接超时处理
+- 错误恢复机制
+
+## 兼容性考虑
+
+### 1. 浏览器支持
+
+- 现代浏览器(Chrome 80+, Firefox 75+, Safari 13+)
+- ES2018+ 特性支持
+- Module 和 CommonJS 双模式
+
+### 2. TypeScript版本
+
+- TypeScript 4.0+
+- 严格的类型检查
+- 完整的类型定义
+
+### 3. 构建工具
+
+- Webpack 4+
+- Vite 2+
+- Rollup 2+
+- 支持Tree Shaking
+
+## 扩展性设计
+
+### 1. 插件系统
+
+```typescript
+interface SttPlugin {
+  name: string
+  install(sdk: SttSdk): void
+}
+
+// 自定义插件示例
+class AnalyticsPlugin implements SttPlugin {
+  install(sdk: SttSdk) {
+    sdk.on("transcriptionResult", this.trackAnalytics)
+  }
+
+  private trackAnalytics(result: TranscriptionResult) {
+    // 发送分析数据
+  }
+}
+```
+
+### 2. 自定义适配器
+
+```typescript
+// 为其他框架创建适配器
+class CustomFrameworkAdapter {
+  static createSttClient(sdk: SttSdk, options: any) {
+    // 返回框架特定的客户端实例
+  }
+}
+```
+
+这个架构设计确保了SDK的通用性、可扩展性和高性能,同时保持了与现有代码的兼容性。

+ 281 - 0
docs/prd/epic-1-stt-sdk-package-structure.md

@@ -0,0 +1,281 @@
+# STT SDK 包结构设计
+
+## 概述
+
+本文档详细描述了在项目根目录创建 `packages/` 目录来管理STT SDK的monorepo结构设计。
+
+## 整体目录结构
+
+```
+stt-demo/
+├── packages/                    # SDK包目录
+│   ├── stt-sdk-core/           # 核心SDK包
+│   ├── stt-sdk-react/          # React适配器
+│   ├── stt-sdk-vue/            # Vue适配器
+│   └── stt-sdk-angular/        # Angular适配器
+├── src/                        # 主应用代码(保持不变)
+├── docs/                       # 文档目录
+├── public/                     # 静态资源
+└── package.json               # 根package.json
+```
+
+## 包详细结构
+
+### 1. stt-sdk-core (核心包)
+
+```
+packages/stt-sdk-core/
+├── src/
+│   ├── core/
+│   │   ├── SttSdk.ts              # 主SDK类
+│   │   ├── SttClient.ts           # STT客户端
+│   │   ├── RtmClient.ts           # RTM客户端
+│   │   └── EventEmitter.ts        # 事件系统
+│   ├── managers/
+│   │   ├── SttManagerAdapter.ts   # STT管理器适配器
+│   │   ├── RtmManagerAdapter.ts   # RTM管理器适配器
+│   │   └── index.ts
+│   ├── types/
+│   │   ├── index.ts               # 主类型定义
+│   │   ├── events.ts              # 事件类型
+│   │   ├── config.ts              # 配置类型
+│   │   └── errors.ts              # 错误类型
+│   ├── utils/
+│   │   ├── config.ts              # 配置工具
+│   │   ├── validation.ts          # 验证工具
+│   │   └── logger.ts              # 日志工具
+│   └── index.ts                   # 包入口
+├── tests/
+│   ├── unit/
+│   ├── integration/
+│   └── fixtures/
+├── dist/                         # 构建输出
+│   ├── index.js                  # CommonJS
+│   ├── index.mjs                 # ES Module
+│   └── types/                    # 类型声明
+├── package.json
+├── tsconfig.json
+├── vite.config.ts               # 构建配置
+└── README.md
+```
+
+### 2. stt-sdk-react (React适配器)
+
+```
+packages/stt-sdk-react/
+├── src/
+│   ├── hooks/
+│   │   ├── useSttClient.ts       # React Hook for STT
+│   │   ├── useRtmClient.ts       # React Hook for RTM
+│   │   └── index.ts
+│   ├── components/
+│   │   ├── SttProvider.tsx       # Context Provider
+│   │   ├── Transcription.tsx     # 转录组件
+│   │   └── index.ts
+│   ├── context/
+│   │   ├── SttContext.tsx        # React Context
+│   │   └── index.ts
+│   ├── types/
+│   │   ├── react.ts              # React特定类型
+│   │   └── index.ts
+│   └── index.ts
+├── examples/
+│   ├── basic-usage/
+│   └── advanced-usage/
+├── package.json
+├── tsconfig.json
+└── README.md
+```
+
+### 3. stt-sdk-vue (Vue适配器)
+
+```
+packages/stt-sdk-vue/
+├── src/
+│   ├── composables/
+│   │   ├── useSttClient.ts       # Vue Composable for STT
+│   │   ├── useRtmClient.ts       # Vue Composable for RTM
+│   │   └── index.ts
+│   ├── components/
+│   │   ├── SttProvider.vue       # Provide/Inject
+│   │   ├── Transcription.vue     # 转录组件
+│   │   └── index.ts
+│   ├── types/
+│   │   ├── vue.ts                # Vue特定类型
+│   │   └── index.ts
+│   └── index.ts
+├── examples/
+│   └── basic-usage/
+├── package.json
+├── tsconfig.json
+└── README.md
+```
+
+## 包配置设计
+
+### 根package.json配置
+
+```json
+{
+  "name": "stt-demo",
+  "private": true,
+  "workspaces": ["packages/*"],
+  "scripts": {
+    "build:sdk": "npm run build -w packages/stt-sdk-core",
+    "build:react": "npm run build -w packages/stt-sdk-react",
+    "build:all": "npm run build:sdk && npm run build:react",
+    "test:sdk": "npm run test -w packages/stt-sdk-core",
+    "lint:sdk": "npm run lint -w packages/stt-sdk-core"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0"
+  }
+}
+```
+
+### stt-sdk-core/package.json
+
+```json
+{
+  "name": "@stt-demo/sdk-core",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest",
+    "lint": "eslint src --ext .ts,.tsx"
+  },
+  "dependencies": {
+    "agora-rtm": "^1.5.0"
+  },
+  "peerDependencies": {
+    "typescript": "^5.0.0"
+  }
+}
+```
+
+### stt-sdk-react/package.json
+
+```json
+{
+  "name": "@stt-demo/sdk-react",
+  "version": "1.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "peerDependencies": {
+    "@stt-demo/sdk-core": "^1.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@stt-demo/sdk-core": "*",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0"
+  }
+}
+```
+
+## 构建配置
+
+### stt-sdk-core/vite.config.ts
+
+```typescript
+import { defineConfig } from "vite"
+import { resolve } from "path"
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/index.ts"),
+      name: "SttSdkCore",
+      fileName: (format) => `index.${format === "es" ? "mjs" : "js"}`,
+    },
+    rollupOptions: {
+      external: ["agora-rtm"],
+      output: {
+        globals: {
+          "agora-rtm": "AgoraRTM",
+        },
+      },
+    },
+  },
+  test: {
+    environment: "jsdom",
+  },
+})
+```
+
+## 开发工作流
+
+### 1. 本地开发
+
+```bash
+# 安装所有包依赖
+npm install
+
+# 开发模式构建SDK
+npm run dev -w packages/stt-sdk-core
+
+# 运行SDK测试
+npm run test -w packages/stt-sdk-core
+```
+
+### 2. 构建发布
+
+```bash
+# 构建所有包
+npm run build:all
+
+# 只构建核心包
+npm run build:sdk
+
+# 发布到npm(需要配置)
+npm publish -w packages/stt-sdk-core
+```
+
+### 3. 主应用集成
+
+```typescript
+// 在stt-demo主应用中引用本地包
+import { createSttSdk } from "../../packages/stt-sdk-core"
+
+// 或者发布后从npm安装
+import { createSttSdk } from "@stt-demo/sdk-core"
+```
+
+## 优势
+
+### 1. 代码隔离
+
+- SDK代码与主应用代码完全分离
+- 便于独立维护和版本管理
+
+### 2. 开发效率
+
+- 热重载支持,修改SDK代码立即生效
+- 统一的构建和测试流程
+
+### 3. 发布灵活
+
+- 可以独立发布核心包或适配器包
+- 支持语义化版本管理
+
+### 4. 团队协作
+
+- 不同团队可以并行开发不同包
+- 清晰的依赖关系和接口定义
+
+这个包结构设计确保了SDK的可维护性、可扩展性和易用性,同时与现有项目完美集成。

+ 198 - 0
docs/prd/epic-1-stt-sdk.md

@@ -0,0 +1,198 @@
+# 语音转文字数据流SDK开发 - Brownfield Enhancement Epic
+
+## Epic Goal
+
+将现有的stt-demo应用中的语音转文字数据流功能封装成通用的TypeScript SDK,让任何使用TypeScript的项目都能方便调用,提供简洁的API接口、完整的类型定义和文档支持。
+
+## Epic Description
+
+### 现有系统上下文
+
+**当前相关功能:**
+
+- 完整的语音转文字数据流:音频流 → STT 服务 → 文字结果 → RTM 通道 → 界面显示
+- 多语言实时转录和翻译功能
+- 基于管理器模式的架构:SttManager、RtmManager、RtcManager
+- 事件驱动的组件通信机制
+
+**技术栈:**
+
+- React 18 + TypeScript
+- Redux Toolkit 状态管理
+- Agora RTC/RTM SDK
+- Vite 构建工具
+- Ant Design UI组件
+
+**集成点:**
+
+- 现有管理器类(SttManager、RtmManager)
+- 事件系统(AGEventEmitter)
+- API调用层(STT服务接口)
+- 状态管理(Redux store)
+
+### 增强详情
+
+**新增/变更内容:**
+
+- 在项目根目录创建 `packages/` 目录,采用monorepo模式管理SDK
+- 创建独立的通用TypeScript SDK包,封装现有的STT和RTM管理器功能
+- 提供简洁的类式API接口,不依赖特定框架
+- 支持多语言实时转录和翻译配置
+- 包含完整的TypeScript类型定义
+- 提供详细的集成文档和示例(React、Vue、Angular等)
+
+**集成方式:**
+
+- 基于现有管理器类进行封装,保持向后兼容
+- 提供类式API接口,便于在任何TypeScript项目中使用
+- 支持配置驱动,允许自定义STT和RTM参数
+- 保持现有的事件驱动架构模式
+- 提供框架适配器(React、Vue等)作为可选包
+
+**包结构设计:**
+
+```
+packages/
+├── stt-sdk-core/           # 核心SDK包
+│   ├── src/
+│   │   ├── core/           # 核心类(SttSdk, SttClient, RtmClient)
+│   │   ├── managers/       # 管理器封装
+│   │   ├── types/          # 类型定义
+│   │   └── utils/          # 工具函数
+│   ├── package.json
+│   └── tsconfig.json
+├── stt-sdk-react/          # React适配器(可选)
+│   ├── src/
+│   │   ├── hooks/          # React Hooks
+│   │   ├── components/     # React组件
+│   │   └── types/
+│   ├── package.json
+│   └── tsconfig.json
+├── stt-sdk-vue/            # Vue适配器(可选)
+│   ├── src/
+│   │   ├── composables/    # Vue Composables
+│   │   ├── components/     # Vue组件
+│   │   └── types/
+│   ├── package.json
+│   └── tsconfig.json
+└── stt-sdk-angular/        # Angular适配器(可选)
+    ├── src/
+    ├── package.json
+    └── tsconfig.json
+```
+
+**构建配置:**
+
+- 每个包独立配置构建工具(Vite/Rollup)
+- 支持ES Module和CommonJS双模式输出
+- 独立的类型声明文件生成
+- 统一的lint和test配置
+
+**成功标准:**
+
+- SDK能够独立打包和发布
+- 现有stt-demo应用能够无缝切换到使用SDK
+- 任何TypeScript项目能够通过npm安装并使用SDK
+- API接口简洁易用,类型定义完整
+- 文档清晰,包含多种框架的集成示例(React、Vue、Angular等)
+
+## Stories
+
+1. **Story 1: SDK核心架构和基础封装**
+   - 创建 `packages/` 目录结构和monorepo配置
+   - 初始化 `stt-sdk-core` 包的基础配置
+   - 封装现有的SttManager和RtmManager类
+   - 实现基础的事件系统和错误处理
+   - 提供基础的TypeScript类型定义
+
+2. **Story 2: 通用API接口和包管理**
+   - 实现类式API接口(SttClient、RtmClient等)
+   - 配置各个包的构建工具和依赖管理
+   - 实现多语言转录和翻译的配置接口
+   - 设置包间的依赖关系和版本管理
+   - 配置统一的lint和test脚本
+
+3. **Story 3: 框架适配器和发布准备**
+   - 创建框架适配器包(React、Vue等)
+   - 编写完整的API文档和集成指南
+   - 实现单元测试和集成测试
+   - 配置打包和发布流程
+   - 验证现有应用的无缝迁移
+
+## 兼容性要求
+
+- [x] 现有API保持向后兼容
+- [x] 现有管理器类的接口保持不变
+- [x] 事件系统接口保持兼容
+- [x] 性能影响最小化
+- [x] 现有功能测试通过
+
+## 风险缓解
+
+**主要风险:** SDK封装可能破坏现有的功能集成
+
+**缓解措施:**
+
+- 保持现有管理器类的接口不变
+- 逐步迁移,先封装后替换
+- 充分的集成测试覆盖
+- 详细的回滚计划
+
+**回滚计划:**
+
+- 如果SDK出现问题,可以快速回退到直接使用现有管理器类
+- 保持现有代码的完整性,SDK作为可选层
+
+## 完成定义
+
+- [ ] 所有故事完成,验收标准满足
+- [ ] 现有功能通过测试验证
+- [ ] SDK集成点正常工作
+- [ ] 文档完整且准确
+- [ ] 现有功能无回归
+- [ ] 打包和发布流程就绪
+
+## 验证清单
+
+**范围验证:**
+
+- [x] Epic可在1-3个故事内完成
+- [x] 不需要架构文档变更
+- [x] 增强遵循现有模式
+- [x] 集成复杂度可控
+
+**风险评估:**
+
+- [x] 对现有系统风险低
+- [x] 回滚计划可行
+- [x] 测试方法覆盖现有功能
+- [x] 团队对集成点有足够了解
+
+**完整性检查:**
+
+- [x] Epic目标清晰可实现
+- [x] 故事范围适当
+- [x] 成功标准可衡量
+- [x] 依赖关系已识别
+
+## 转交给故事经理
+
+**故事经理交接:**
+
+"请为此brownfield epic开发详细的用户故事。关键考虑因素:
+
+- 这是对运行React 18 + TypeScript + Agora SDK的现有系统的增强
+- 集成点:现有管理器类(SttManager、RtmManager)、事件系统、API调用层
+- 要遵循的现有模式:管理器模式、事件驱动架构
+- 关键兼容性要求:保持现有API不变,性能影响最小化,提供通用TypeScript接口
+
+每个故事必须包含验证现有功能保持完整的验证步骤。
+
+Epic应在保持系统完整性的同时,实现将语音转文字功能封装为可重用SDK的目标。"
+
+---
+
+**创建日期:** 2025-09-25
+**创建者:** Claude Code
+**Epic状态:** Draft
+**优先级:** High