diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md index ee09081..5f4b227 100644 --- a/docs/ARCHITECTURE.md +++ b/docs/ARCHITECTURE.md @@ -34,26 +34,26 @@ graph TD TURN[TURN/STUN Server] end - ClientA -- 1.Create/Join Room (HTTP/Socket) --> Nginx + ClientA -- 1. Create/Join Room (HTTP/Socket) --> Nginx Nginx --> Backend Backend -- Read/Write Room Status --> Redis - ClientB -- 2.Join Same Room (HTTP/Socket) --> Nginx + ClientB -- 2. Join Same Room (HTTP/Socket) --> Nginx - Backend -- 3.Broadcast user join event --> ClientA - Backend -- 3.Broadcast user join event --> ClientB + Backend -- 3. Broadcast user join event --> ClientA + Backend -- 3. Broadcast user join event --> ClientB - ClientA -- 4.Send Signal (Offer/ICE) --> Backend - Backend -- 5.Forward Signal --> ClientB - ClientB -- 6.Send Signal (Answer/ICE) --> Backend - Backend -- 7.Forward Signal --> ClientA + ClientA -- 4. Send Signal (Offer/ICE) --> Backend + Backend -- 5. Forward Signal --> ClientB + ClientB -- 6. Send Signal (Answer/ICE) --> Backend + Backend -- 7. Forward Signal --> ClientA - ClientA <-.-> |8.STUN Check| TURN - ClientB <-.-> |8.STUN Check| TURN + ClientA <-.-> |8. STUN Check| TURN + ClientB <-.-> |8. STUN Check| TURN - ClientA <-..- |9.P2P Direct Data Transfer| ClientB - ClientA <-.-> |9.TURN Relayed Data Transfer| TURN - ClientB <-.-> |9.TURN Relayed Data Transfer| TURN + ClientA <-..- |9. P2P Direct Data Transfer| ClientB + ClientA <-.-> |9. TURN Relayed Data Transfer| TURN + ClientB <-.-> |9. TURN Relayed Data Transfer| TURN ``` **Flow Description:** diff --git a/docs/ARCHITECTURE.zh-CN.md b/docs/ARCHITECTURE.zh-CN.md index ab77ab9..7d0b835 100644 --- a/docs/ARCHITECTURE.zh-CN.md +++ b/docs/ARCHITECTURE.zh-CN.md @@ -34,26 +34,26 @@ graph TD TURN[TURN/STUN 服务器] end - ClientA -- 1.创建/加入房间 (HTTP/Socket) --> Nginx + ClientA -- 1. 创建/加入房间 (HTTP/Socket) --> Nginx Nginx --> Backend Backend -- 读/写房间状态 --> Redis - ClientB -- 2.加入同一房间 (HTTP/Socket) --> Nginx + ClientB -- 2. 加入同一房间 (HTTP/Socket) --> Nginx - Backend -- 3.广播用户加入事件 --> ClientA - Backend -- 3.广播用户加入事件 --> ClientB + Backend -- 3. 广播用户加入事件 --> ClientA + Backend -- 3. 广播用户加入事件 --> ClientB - ClientA -- 4.发送信令 (Offer/ICE) --> Backend - Backend -- 5.转发信令 --> ClientB - ClientB -- 6.发送信令 (Answer/ICE) --> Backend - Backend -- 7.转发信令 --> ClientA + ClientA -- 4. 发送信令 (Offer/ICE) --> Backend + Backend -- 5. 转发信令 --> ClientB + ClientB -- 6. 发送信令 (Answer/ICE) --> Backend + Backend -- 7. 转发信令 --> ClientA - ClientA <-.-> |8.STUN检查| TURN - ClientB <-.-> |8.STUN检查| TURN + ClientA <-.-> |8. STUN检查| TURN + ClientB <-.-> |8. STUN检查| TURN - ClientA <-..- |9.P2P直连数据传输| ClientB - ClientA <-.-> |9.TURN中继数据传输| TURN - ClientB <-.-> |9.TURN中pey数据传输| TURN + ClientA <-..- |9. P2P直连数据传输| ClientB + ClientA <-.-> |9. TURN中继数据传输| TURN + ClientB <-.-> |9. TURN中pey数据传输| TURN ``` **流程说明:** diff --git a/docs/FRONTEND_ARCHITECTURE.md b/docs/FRONTEND_ARCHITECTURE.md index 7d6f3a5..c0ebb0e 100644 --- a/docs/FRONTEND_ARCHITECTURE.md +++ b/docs/FRONTEND_ARCHITECTURE.md @@ -1,4 +1,4 @@ - # PrivyDrop Frontend Architecture Documentation +# PrivyDrop Frontend Architecture Documentation ## 1. Architecture Overview @@ -29,23 +29,19 @@ In a recent refactor, we established a design philosophy centered on "**Separati The frontend architecture can be broadly divided into four layers: -``` -+---------------------------------------------------+ -| ① Application & Routing Layer (App Router) | app/ -| (Pages, Layouts, Routing, i18n Middleware) | -+---------------------------------------------------+ -| ② UI & Component Layer | components/ -| (Coordinator Components, UI Panels, Common | -| Components, Base UI Elements) | -+---------------------------------------------------+ -| ③ Business Logic & State Layer (Hooks) | hooks/ -| (WebRTC Connection, Room Management, File | -| Transfer, Clipboard Operations, etc.) | -+---------------------------------------------------+ -| ④ Core Libraries & Utilities Layer | lib/ -| (Low-level WebRTC Wrappers, File Handling, | -| Utility Functions, API Client) | -+---------------------------------------------------+ +```mermaid +graph TD + A["① Application & Routing Layer (app/)

Pages, Layouts, Routing, i18n Middleware, Data Fetching"] + B["② UI & Component Layer (components/)

Coordinator Components, UI Panels, Common Components, Base UI Elements"] + C["③ Business Logic & State Layer (hooks/)

WebRTC Connection, Room Management, File Transfer, Clipboard Operations"] + D["④ Core Libraries & Utilities Layer (lib/)

Low-level WebRTC Wrappers, File Handling, Utility Functions, API Client"] + + style A fill:#f9f9f9,stroke:#333,stroke-width:1px + style B fill:#f9f9f9,stroke:#333,stroke-width:1px + style C fill:#f9f9f9,stroke:#333,stroke-width:1px + style D fill:#f9f9f9,stroke:#333,stroke-width:1px + + A --> B --> C --> D ``` - **① Application & Routing Layer**: Managed by the Next.js App Router, responsible for page rendering, route control, internationalization, and initial data fetching. diff --git a/docs/FRONTEND_ARCHITECTURE.zh-CN.md b/docs/FRONTEND_ARCHITECTURE.zh-CN.md index b33605a..a79790d 100644 --- a/docs/FRONTEND_ARCHITECTURE.zh-CN.md +++ b/docs/FRONTEND_ARCHITECTURE.zh-CN.md @@ -29,20 +29,19 @@ Privydrop 是一个基于 WebRTC 的 P2P 文件/文本分享工具，旨在提 应用的前端架构可大致分为四个层次： -``` -+---------------------------------------------------+ -| ① 应用与路由层 (App Router) | app/ -| (页面、布局、路由、国际化中间件、数据获取) | -+---------------------------------------------------+ -| ② UI 与组件层 | components/ -| (协调器组件、UI 面板、通用组件、基础 UI 元素) | -+---------------------------------------------------+ -| ③ 业务逻辑与状态层 (Hooks) | hooks/ -| (WebRTC 连接、房间管理、文件传输、剪贴板操作等) | -+---------------------------------------------------+ -| ④ 核心库与工具层 | lib/ -| (底层 WebRTC 封装、文件处理、工具函数、API 客户端) | -+---------------------------------------------------+ +```mermaid +graph TD + A["① 应用与路由层 (app/)

页面、布局、路由、国际化中间件、数据获取"] + B["② UI与组件层 (components/)

协调器组件、UI 面板、通用组件、基础 UI 元素"] + C["③ 业务逻辑与状态层 (hooks/)

WebRTC 连接、房间管理、文件传输、剪贴板操作等"] + D["④ 核心库与工具层 (lib/)

底层 WebRTC 封装、文件处理、工具函数、API 客户端"] + + style A fill:#f9f9f9,stroke:#333,stroke-width:1px + style B fill:#f9f9f9,stroke:#333,stroke-width:1px + style C fill:#f9f9f9,stroke:#333,stroke-width:1px + style D fill:#f9f9f9,stroke:#333,stroke-width:1px + + A --> B --> C --> D ``` - **① 应用与路由层**: 由 Next.js App Router 管理，负责页面渲染、路由控制、国际化和初始数据获取。