aheh/PrivyDrop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix graph format bug

Browse Source
This commit is contained in:
david_bai
2025-06-21 14:48:40 +08:00
parent a0034d46ff
commit 77d6f5ae7f
4 changed files with 53 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/ARCHITECTURE.md
+13 -13
View File
@@ -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.&nbsp;STUN Check| TURN
ClientB <-.-> |8.&nbsp;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.&nbsp;P2P Direct Data Transfer| ClientB
ClientA <-.-> |9.&nbsp;TURN Relayed Data Transfer| TURN
ClientB <-.-> |9.&nbsp;TURN Relayed Data Transfer| TURN
```
**Flow Description:**
docs/ARCHITECTURE.zh-CN.md
+13 -13
View File
@@ -34,26 +34,26 @@ graph TD
TURN[TURN/STUN 服务器]
end
ClientA -- 1.创建/加入房间 (HTTP/Socket) --> Nginx
ClientA -- 1.&nbsp;创建/加入房间 (HTTP/Socket) --> Nginx
Nginx --> Backend
Backend -- 读/写房间状态 --> Redis
ClientB -- 2.加入同一房间 (HTTP/Socket) --> Nginx
ClientB -- 2.&nbsp;加入同一房间 (HTTP/Socket) --> Nginx
Backend -- 3.广播用户加入事件 --> ClientA
Backend -- 3.广播用户加入事件 --> ClientB
Backend -- 3.&nbsp;广播用户加入事件 --> ClientA
Backend -- 3.&nbsp;广播用户加入事件 --> ClientB
ClientA -- 4.发送信令 (Offer/ICE) --> Backend
Backend -- 5.转发信令 --> ClientB
ClientB -- 6.发送信令 (Answer/ICE) --> Backend
Backend -- 7.转发信令 --> ClientA
ClientA -- 4.&nbsp;发送信令 (Offer/ICE) --> Backend
Backend -- 5.&nbsp;转发信令 --> ClientB
ClientB -- 6.&nbsp;发送信令 (Answer/ICE) --> Backend
Backend -- 7.&nbsp;转发信令 --> ClientA
ClientA <-.-> |8.STUN检查| TURN
ClientB <-.-> |8.STUN检查| TURN
ClientA <-.-> |8.&nbsp;STUN检查| TURN
ClientB <-.-> |8.&nbsp;STUN检查| TURN
ClientA <-..- |9.P2P直连数据传输| ClientB
ClientA <-.-> |9.TURN中继数据传输| TURN
ClientB <-.-> |9.TURN中pey数据传输| TURN
ClientA <-..- |9.&nbsp;P2P直连数据传输| ClientB
ClientA <-.-> |9.&nbsp;TURN中继数据传输| TURN
ClientB <-.-> |9.&nbsp;TURN中pey数据传输| TURN
```
**流程说明:**
docs/FRONTEND_ARCHITECTURE.md
+14 -18
View File
@@ -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["<b>① Application & Routing Layer (app/)</b><br/><br/>Pages, Layouts, Routing, i18n Middleware, Data Fetching"]
B["<b>② UI & Component Layer (components/)</b><br/><br/>Coordinator Components, UI Panels, Common Components, Base UI Elements"]
C["<b>③ Business Logic & State Layer (hooks/)</b><br/><br/>WebRTC Connection, Room Management, File Transfer, Clipboard Operations"]
D["<b>④ Core Libraries & Utilities Layer (lib/)</b><br/><br/>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.
docs/FRONTEND_ARCHITECTURE.zh-CN.md
+13 -14
View File
@@ -29,20 +29,19 @@ Privydrop 是一个基于 WebRTC 的 P2P 文件/文本分享工具，旨在提
应用的前端架构可大致分为四个层次：
```
+---------------------------------------------------+
| ① 应用与路由层 (App Router) | app/
| (页面、布局、路由、国际化中间件、数据获取) |
+---------------------------------------------------+
| ② UI 与组件层 | components/
| (协调器组件、UI 面板、通用组件、基础 UI 元素) |
+---------------------------------------------------+
| ③ 业务逻辑与状态层 (Hooks) | hooks/
| (WebRTC 连接、房间管理、文件传输、剪贴板操作等) |
+---------------------------------------------------+
| ④ 核心库与工具层 | lib/
| (底层 WebRTC 封装、文件处理、工具函数、API 客户端) |
+---------------------------------------------------+
```mermaid
graph TD
A["<b>① 应用与路由层 (app/)</b><br/><br/>页面、布局、路由、国际化中间件、数据获取"]
B["<b>② UI与组件层 (components/)</b><br/><br/>协调器组件、UI 面板、通用组件、基础 UI 元素"]
C["<b>③ 业务逻辑与状态层 (hooks/)</b><br/><br/>WebRTC 连接、房间管理、文件传输、剪贴板操作等"]
D["<b>④ 核心库与工具层 (lib/)</b><br/><br/>底层 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 管理，负责页面渲染、路由控制、国际化和初始数据获取。