# OneByOne 知识图谱

## 1. 模块依赖关系图

```mermaid
graph TB
    subgraph Page["📄 页面层"]
        INDEX[index.html<br/>主通话页面]
        CONN[connect/connect.html<br/>连接页面]
        END[endcall/endcall.html<br/>结束页面]
    end

    subgraph Core["⚙️ 核心模块"]
        MAIN[main.js<br/>应用入口]
        STORE[store.js<br/>状态管理]
        RENDER[renderer.js<br/>UI渲染器]
        CHAT[chatmessage.js<br/>消息模块]
    end

    subgraph Base["📦 数据与工具"]
        MODELS[models.js<br/>数据模型]
        UTILS[utils.js<br/>工具函数]
    end

    subgraph External["🔗 外部依赖"]
        SIGNALING[signaling.js<br/>信令管理]
        RENDERSTR[renderstreaming.js<br/>WebRTC管理]
        CONFIG[config.js<br/>配置管理]
    end

    INDEX --> MAIN
    CONN --> CONN_JS[connect.js]
    END --> END_JS[endcall.js]

    MAIN --> STORE
    MAIN --> RENDER
    MAIN --> UTILS
    MAIN --> CHAT

    STORE --> MODELS
    STORE --> SIGNALING
    STORE --> RENDERSTR
    STORE --> CONFIG
    STORE --> UTILS
    STORE --> CHAT

    RENDER --> UTILS
    RENDER --> MODELS
    RENDER --> CHAT

    CHAT --> UTILS
    CHAT --> STORE
    CHAT --> MODELS

    CONN_JS --> STORE

    style STORE fill:#f9f,stroke:#333,stroke-width:2px
    style RENDER fill:#bbf,stroke:#333,stroke-width:2px
    style CHAT fill:#bfb,stroke:#333,stroke-width:2px
```

## 2. 数据模型关系图

```mermaid
graph TB
    subgraph Models["数据模型结构"]
        SESSION[CallSession<br/>通话会话]
        LOCAL[LocalUser<br/>本地用户]
        REMOTE[RemoteUser<br/>远端用户]
        MEDIA[MediaState<br/>媒体状态]
        MSG[ChatMessage<br/>聊天消息]
    end

    SESSION --> LOCAL
    SESSION --> REMOTE
    LOCAL --> MEDIA
    REMOTE --> MEDIA

    style SESSION fill:#f96,stroke:#333,stroke-width:2px
    style MEDIA fill:#9f6,stroke:#333,stroke-width:2px
```

### 模型属性说明

| 模型 | 属性 |
|-----|------|
| **CallSession** | id, type, status, startTime, duration, isEncrypted |
| **LocalUser** | id, name, avatar, isHost, mediaState |
| **RemoteUser** | id, name, avatar, status, networkQuality, mediaState |
| **MediaState** | audio, video, screenShare, recording, isSpeaking |
| **ChatMessage** | id, senderId, senderName, content, type, timestamp, isSelf |

## 3. 状态更新时序图

```mermaid
sequenceDiagram
    autonumber
    participant USER as 👤 用户
    participant DOM as 🖱️ DOM事件
    participant MAIN as ⚙️ main.js
    participant STORE as 📦 store.js
    participant RENDER as 🎨 renderer.js
    participant UI as 🖥️ UI界面

    USER->>DOM: 点击麦克风按钮
    DOM->>MAIN: toggleMute()
    MAIN->>STORE: updateLocalMedia('audio', false)
    STORE->>STORE: 更新 mediaState.audio
    STORE->>STORE: notify({type: 'LOCAL_MEDIA_CHANGE'})
    STORE->>RENDER: 回调 render(state, changes)
    RENDER->>RENDER: renderControlButtons(mediaState)
    RENDER->>RENDER: renderLocalUserStatus(localUser)
    RENDER->>UI: 更新DOM
    UI->>USER: 显示更新后的界面
```

## 4. WebRTC 连接建立时序图

```mermaid
sequenceDiagram
    autonumber
    participant USER as 👤 用户
    participant MAIN as ⚙️ main.js
    participant STORE as 📦 store.js
    participant SIGNAL as 📡 signaling.js
    participant RTC as 🔗 renderstreaming.js
    participant PEER as 👤 远端对等端

    USER->>MAIN: 访问页面
    MAIN->>STORE: joinCall(connectionId)
    STORE->>STORE: init()
    STORE->>STORE: getLocalStream()<br/>获取本地摄像头
    MAIN->>STORE: setUp(connectionId)
    STORE->>SIGNAL: 创建信令实例
    STORE->>RTC: new RenderStreaming<br/>(signaling, config)
    RTC->>SIGNAL: start()
    RTC->>SIGNAL: createConnection(connectionId)

    loop WebSocket信令交换
        PEER->>SIGNAL: 交换SDP/ICE
        SIGNAL->>RTC: 信令数据
    end

    RTC->>STORE: onConnect 回调
    STORE->>STORE: 状态更新为 ongoing
    PEER->>RTC: 接收媒体流
    RTC->>STORE: onTrackEvent 回调
    STORE->>STORE: notify(REMOTE_STREAM_OBTAINED)
    STORE->>RENDER: 触发渲染更新
    RENDER->>UI: 显示远端视频
```

## 5. 消息发送流程

```mermaid
sequenceDiagram
    autonumber
    participant USER as 👤 用户
    participant DOM as 🖱️ DOM
    participant CHAT as 💬 chatmessage.js
    participant STORE as 📦 store.js
    participant RTC as 🔗 renderstreaming.js
    participant PEER as 👤 远端用户

    USER->>DOM: 输入消息并回车
    DOM->>CHAT: handleChatSubmit(event)
    CHAT->>CHAT: sendMessage()
    CHAT->>CHAT: addMessage(message)<br/>添加到本地列表
    CHAT->>STORE: getRenderStreaming()
    STORE-->>CHAT: 返回实例
    CHAT->>RTC: sendMessage()<br/>发送chat-message
    RTC->>PEER: 通过WebRTC数据通道发送

    PEER->>RTC: 收到消息
    RTC->>STORE: onMessage 回调
    STORE->>CHAT: handleChatMessage(data)
    CHAT->>CHAT: addMessage()<br/>添加到消息列表
    CHAT->>RENDER: 更新聊天UI
```

## 6. 页面流转状态图

```mermaid
stateDiagram-v2
    [*] --> 连接页面: 首次访问/无connectionId

    连接页面: connect.html
    连接页面: - 输入连接ID
    连接页面: - 创建新通话
    连接页面: - 用户设置

    通话页面: index.html
    通话页面: - 视频通话
    通话页面: - 聊天功能
    通话页面: - 媒体控制

    结束页面: endcall.html
    结束页面: - 显示断开原因
    结束页面: - 重新连接选项

    连接页面 --> 通话页面: 加入/创建通话
    通话页面 --> 结束页面: 通话结束/断开
    通话页面 --> 连接页面: 无有效connectionId
    结束页面 --> 通话页面: 重新连接
    结束页面 --> 连接页面: 返回
```

## 7. 通话状态机

```mermaid
stateDiagram-v2
    [*] --> idle: 初始化

    idle: 空闲状态
    idle --> connecting: joinCall()<br/>加入通话
    idle --> connecting: createCall()<br/>创建通话

    connecting: 连接中
    connecting --> ongoing: onConnect<br/>连接成功
    connecting --> failed: 连接失败

    ongoing: 通话中
    ongoing --> ended: hangUp()<br/>挂断
    ongoing --> ended: endCall()<br/>结束通话

    failed: 连接失败
    failed --> connecting: 重试连接
    failed --> ended: 放弃连接

    ended: 已结束
    ended --> [*]: 清理资源
```

## 8. 组件层次结构

```mermaid
graph TD
    subgraph index["index.html 组件结构"]
        HEADER["🧭 Header 顶部栏"]
        MAIN["📺 Main 主内容区"]
        FOOTER["🎛️ Footer 底部控制栏"]
    end

    subgraph header["Header 内容"]
        TITLE["标题: 与xxx的通话"]
        NETWORK["网络质量指示"]
        DURATION["通话时长"]
        ENCRYPT["端到端加密标识"]
    end

    subgraph main["Main 内容"]
        VIDEO_AREA["VideoArea 视频区"]
        SIDEBAR["Sidebar 侧边栏"]
    end

    subgraph video["VideoArea"]
        REMOTE["RemoteVideo 远端视频"]
        LOCAL["LocalVideo 本地视频画中画"]
    end

    subgraph sidebar["Sidebar"]
        USER_LIST["UserList 用户列表"]
        CHAT_MSG["ChatMessages 聊天消息"]
        CHAT_INPUT["ChatInput 消息输入"]
    end

    subgraph footer["Footer 控制栏"]
        CTRL_MIC["🎤 麦克风"]
        CTRL_VIDEO["📹 视频"]
        CTRL_RECORD["🔴 录制"]
        CTRL_END["📞 结束通话"]
        CTRL_CHAT["💬 聊天"]
    end

    HEADER --> TITLE
    HEADER --> NETWORK
    HEADER --> DURATION
    HEADER --> ENCRYPT

    MAIN --> VIDEO_AREA
    MAIN --> SIDEBAR

    VIDEO_AREA --> REMOTE
    VIDEO_AREA --> LOCAL

    SIDEBAR --> USER_LIST
    SIDEBAR --> CHAT_MSG
    SIDEBAR --> CHAT_INPUT

    FOOTER --> CTRL_MIC
    FOOTER --> CTRL_VIDEO
    FOOTER --> CTRL_RECORD
    FOOTER --> CTRL_END
    FOOTER --> CTRL_CHAT

    style CTRL_END fill:#f66,stroke:#333,stroke-width:2px
    style ENCRYPT fill:#9f6,stroke:#333,stroke-width:2px
```

## 9. 文件引用汇总

```mermaid
graph LR
    subgraph Import["导入关系"]
        direction TB
        M[main.js]
        S[store.js]
        R[renderer.js]
        C[chatmessage.js]
        CONN[connect.js]

        M --> S
        M --> R
        M --> C
        S --> C
        R --> C
        CONN --> S
    end

    subgraph Export["导出内容"]
        direction TB
        ST[store.js<br/>export default store]
        RE[renderer.js<br/>export default UIRenderer]
        UT[utils.js<br/>export { formatTime, showNotification, ... }]
        MO[models.js<br/>export { mockCallSession, mockMessages }]
        CH[chatmessage.js<br/>export { sendMessage, toggleSidebar, ... }]
    end
```

## 10. API 接口调用图

```mermaid
graph LR
    subgraph Client["客户端"]
        CONN_JS[connect.js]
    end

    subgraph Server["服务器"]
        API_CALL[/api/call/:callId]
        API_JOIN[/api/call/:callId/join]
        API_LEAVE[/api/call/:callId/leave]
        API_MEDIA[/api/call/:callId/media]
        API_MSG[/api/call/:callId/messages]
        API_SEND[/api/call/:callId/message]
        API_CONN[/signaling/connection-ids]
        API_UPLOAD[/api/upload/avatar]
    end

    CONN_JS -.-> API_CONN
    CONN_JS -.-> API_UPLOAD

    style API_CALL fill:#bbf,stroke:#333
    style API_JOIN fill:#bbf,stroke:#333
    style API_LEAVE fill:#bbf,stroke:#333
    style API_MEDIA fill:#bbf,stroke:#333
    style API_MSG fill:#bbf,stroke:#333
    style API_SEND fill:#bbf,stroke:#333
    style API_CONN fill:#fbf,stroke:#333
    style API_UPLOAD fill:#fbf,stroke:#333
```

---

*文档生成时间: 2026-04-11*
*适用于 OneByOne 视频通话应用*