From f4ab50b73e12077846ca15ba57cdd10aeaec7495 Mon Sep 17 00:00:00 2001
From: stary <834207172@qq.COM>
Date: Sat, 11 Apr 2026 16:16:11 +0800
Subject: [PATCH] md

---
 .../client/public/onebyone/knowledge-graph.md | 376 ++++++++++++++++++
 1 file changed, 376 insertions(+)
 create mode 100644 WebApp/client/public/onebyone/knowledge-graph.md

diff --git a/WebApp/client/public/onebyone/knowledge-graph.md b/WebApp/client/public/onebyone/knowledge-graph.md
new file mode 100644
index 0000000..119abd5
--- /dev/null
+++ b/WebApp/client/public/onebyone/knowledge-graph.md
@@ -0,0 +1,376 @@
+# 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/>数据模型]
+        API[api.js<br/>API客户端]
+        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 --> API
+    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]
+        AP[api.js<br/>export default apiClient]
+        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["客户端"]
+        API_CLIENT[api.js<br/>ApiClient类]
+        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
+
+    API_CLIENT -.-> API_CALL
+    API_CLIENT -.-> API_JOIN
+    API_CLIENT -.-> API_LEAVE
+    API_CLIENT -.-> API_MEDIA
+    API_CLIENT -.-> API_MSG
+    API_CLIENT -.-> API_SEND
+
+    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 视频通话应用*