mirror of
https://gitee.com/WuKongDev/WuKongIM.git
synced 2025-12-06 14:59:08 +08:00
185 lines
9.3 KiB
XML
185 lines
9.3 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="900" height="700" viewBox="0 0 900 700" style="background-color: #f8f9fa;">
|
|
<defs>
|
|
<marker id="arrowhead-beautified" markerWidth="5" markerHeight="3.5" refX="0" refY="1.75" orient="auto">
|
|
<polygon points="0 0, 5 1.75, 0 3.5" fill="#adb5bd" />
|
|
</marker>
|
|
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
|
<feOffset dx="2" dy="2" result="offsetblur"/>
|
|
<feComponentTransfer>
|
|
<feFuncA type="linear" slope="0.5"/>
|
|
</feComponentTransfer>
|
|
<feMerge>
|
|
<feMergeNode/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
<linearGradient id="client-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#e7f5ff;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#d0ebff;stop-opacity:1" />
|
|
</linearGradient>
|
|
<linearGradient id="gateway-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#fff9db;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#fff3bf;stop-opacity:1" />
|
|
</linearGradient>
|
|
<linearGradient id="core-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#f1f3f5;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#e9ecef;stop-opacity:1" />
|
|
</linearGradient>
|
|
<linearGradient id="cluster-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#e6fcf5;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#d3f9e8;stop-opacity:1" />
|
|
</linearGradient>
|
|
<linearGradient id="storage-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#e3fafc;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#c5f6fa;stop-opacity:1" />
|
|
</linearGradient>
|
|
<style>
|
|
.layer-box { fill: #ffffff; stroke: #dee2e6; stroke-width: 1; rx: 8; ry: 8; filter: url(#shadow); }
|
|
.component-box { stroke: #adb5bd; stroke-width: 1; rx: 6; ry: 6; }
|
|
.client-box { fill: url(#client-gradient); stroke: #a5d8ff; }
|
|
.gateway-box { fill: url(#gateway-gradient); stroke: #ffe066; }
|
|
.core-box { fill: url(#core-gradient); stroke: #ced4da; }
|
|
.cluster-box { fill: url(#cluster-gradient); stroke: #8ce9bf; }
|
|
.storage-box { fill: url(#storage-gradient); stroke: #66d9e8; }
|
|
.text-label { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 11px; text-anchor: middle; fill: #495057; }
|
|
.text-title { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; text-anchor: middle; fill: #212529; }
|
|
.text-layer-title { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; text-anchor: middle; fill: #343a40; }
|
|
.arrow { stroke: #adb5bd; stroke-width: 1.2; marker-end: url(#arrowhead-beautified); fill: none; }
|
|
.dashed-arrow { stroke: #adb5bd; stroke-width: 1.0; stroke-dasharray: 4 2; marker-end: url(#arrowhead-beautified); fill: none; }
|
|
</style>
|
|
</defs>
|
|
|
|
<!-- Layers -->
|
|
<rect x="10" y="10" width="880" height="100" class="layer-box"/>
|
|
<text x="450" y="35" class="text-layer-title">客户端层 (Clients)</text>
|
|
|
|
<rect x="10" y="120" width="880" height="100" class="layer-box"/>
|
|
<text x="450" y="145" class="text-layer-title">网关层 (Gateway)</text>
|
|
|
|
<rect x="10" y="230" width="880" height="180" class="layer-box"/>
|
|
<text x="450" y="255" class="text-layer-title">核心服务层 (Core Server)</text>
|
|
|
|
<rect x="10" y="420" width="880" height="150" class="layer-box"/>
|
|
<text x="450" y="445" class="text-layer-title">集群管理层 (Cluster Management)</text>
|
|
|
|
<rect x="10" y="580" width="880" height="100" class="layer-box"/>
|
|
<text x="450" y="605" class="text-layer-title">存储层 (Storage)</text>
|
|
|
|
<!-- Components -->
|
|
<!-- Clients -->
|
|
<rect x="60" y="50" width="110" height="50" class="component-box client-box"/>
|
|
<text x="115" y="70" class="text-title">Mobile SDK</text>
|
|
<text x="115" y="85" class="text-label">(Android/iOS)</text>
|
|
|
|
<rect x="220" y="50" width="110" height="50" class="component-box client-box"/>
|
|
<text x="275" y="70" class="text-title">Web SDK</text>
|
|
<text x="275" y="85" class="text-label">(JS/Uniapp)</text>
|
|
|
|
<rect x="380" y="50" width="110" height="50" class="component-box client-box"/>
|
|
<text x="435" y="70" class="text-title">Other SDKs</text>
|
|
<text x="435" y="85" class="text-label">(Flutter/etc)</text>
|
|
|
|
<rect x="540" y="50" width="110" height="50" class="component-box client-box"/>
|
|
<text x="595" y="70" class="text-title">后台管理</text>
|
|
<text x="595" y="85" class="text-label">(Web UI)</text>
|
|
|
|
<rect x="700" y="50" width="140" height="50" class="component-box client-box"/>
|
|
<text x="770" y="70" class="text-title">第三方系统集成</text>
|
|
<text x="770" y="85" class="text-label">(Webhook, Plugin)</text>
|
|
|
|
|
|
<!-- Gateway -->
|
|
<rect x="300" y="160" width="300" height="50" class="component-box gateway-box"/>
|
|
<text x="450" y="180" class="text-title">连接处理 (wknet)</text>
|
|
<text x="450" y="195" class="text-label">(TCP / WebSocket / WSS)</text>
|
|
|
|
<!-- Core Server -->
|
|
<rect x="300" y="280" width="300" height="110" class="component-box core-box"/>
|
|
<text x="450" y="295" class="text-title">核心逻辑 (internal/server)</text>
|
|
<text x="450" y="315" class="text-label">认证/授权</text>
|
|
<text x="450" y="330" class="text-label">消息路由</text>
|
|
<text x="450" y="345" class="text-label">用户/频道管理</text>
|
|
<text x="450" y="360" class="text-label">连接管理</text>
|
|
<text x="450" y="375" class="text-label">指令处理</text>
|
|
|
|
<rect x="680" y="280" width="140" height="60" class="component-box core-box"/>
|
|
<text x="750" y="300" class="text-title">API 服务</text>
|
|
<text x="750" y="315" class="text-label">(internal/api)</text>
|
|
<text x="750" y="330" class="text-label">(HTTP)</text>
|
|
|
|
<rect x="680" y="350" width="140" height="60" class="component-box core-box"/>
|
|
<text x="750" y="370" class="text-title">外部集成</text>
|
|
<text x="750" y="385" class="text-label">(Webhook)</text>
|
|
<text x="750" y="400" class="text-label">插件系统 (Plugin)</text>
|
|
|
|
<rect x="80" y="315" width="140" height="40" class="component-box core-box"/>
|
|
<text x="150" y="335" class="text-title">事件总线</text>
|
|
<text x="150" y="350" class="text-label">(EventBus)</text>
|
|
|
|
|
|
<!-- Cluster -->
|
|
<rect x="50" y="470" width="220" height="80" class="component-box cluster-box"/>
|
|
<text x="160" y="485" class="text-title">节点管理 (Node)</text>
|
|
<text x="160" y="505" class="text-label">集群配置 (Raft)</text>
|
|
<text x="160" y="520" class="text-label">节点发现/状态</text>
|
|
<text x="160" y="535" class="text-label">事件同步</text>
|
|
|
|
<rect x="340" y="470" width="220" height="80" class="component-box cluster-box"/>
|
|
<text x="450" y="485" class="text-title">槽管理 (Slot)</text>
|
|
<text x="450" y="505" class="text-label">元数据 (Raft)</text>
|
|
<text x="450" y="520" class="text-label">(频道配置, 用户数据)</text>
|
|
<text x="450" y="535" class="text-label">Slot 分配/迁移</text>
|
|
|
|
<rect x="630" y="470" width="220" height="80" class="component-box cluster-box"/>
|
|
<text x="740" y="485" class="text-title">频道管理 (Channel)</text>
|
|
<text x="740" y="505" class="text-label">消息数据 (Raft)</text>
|
|
<text x="740" y="520" class="text-label">消息存储/同步</text>
|
|
<text x="740" y="535" class="text-label">频道元数据</text>
|
|
|
|
<!-- Storage -->
|
|
<rect x="300" y="620" width="300" height="60" class="component-box storage-box"/>
|
|
<text x="450" y="640" class="text-title">分布式存储 (wkdb)</text>
|
|
<text x="450" y="655" class="text-label">基于 PebbleDB</text>
|
|
<text x="450" y="670" class="text-label">(消息, 用户, Raft日志)</text>
|
|
|
|
<!-- Arrows -->
|
|
<!-- Client -> Gateway -->
|
|
<line x1="115" y1="100" x2="380" y2="160" class="arrow"/>
|
|
<line x1="275" y1="100" x2="415" y2="160" class="arrow"/>
|
|
<line x1="435" y1="100" x2="450" y2="160" class="arrow"/>
|
|
|
|
<!-- Mgmt UI -> API Server -->
|
|
|
|
<!-- Third Party -> External Integrations -->
|
|
|
|
|
|
<!-- API Server -> Core Server -->
|
|
<line x1="680" y1="310" x2="600" y2="310" class="arrow"/>
|
|
|
|
<!-- Gateway -> Core Server -->
|
|
<line x1="450" y1="210" x2="450" y2="280" class="arrow"/>
|
|
|
|
<!-- Core Server -> EventBus -->
|
|
<line x1="300" y1="335" x2="220" y2="335" class="arrow"/>
|
|
|
|
<!-- Core Server -> External Integrations -->
|
|
<line x1="600" y1="380" x2="680" y2="380" class="arrow"/>
|
|
|
|
|
|
<!-- Core Server -> Cluster Layer -->
|
|
<line x1="300" y1="390" x2="160" y2="470" class="arrow"/> <!-- Core -> Node Mgmt -->
|
|
<line x1="450" y1="390" x2="450" y2="470" class="arrow"/> <!-- Core -> Slot Mgmt -->
|
|
<line x1="600" y1="390" x2="740" y2="470" class="arrow"/> <!-- Core -> Channel Mgmt -->
|
|
|
|
<!-- Cluster Layer interactions -->
|
|
<line x1="270" y1="510" x2="340" y2="510" class="dashed-arrow"/> <!-- Node -> Slot -->
|
|
<line x1="560" y1="510" x2="630" y2="510" class="dashed-arrow"/> <!-- Slot -> Channel -->
|
|
|
|
<!-- Cluster Layer -> Storage -->
|
|
<line x1="160" y1="550" x2="300" y2="620" class="arrow"/> <!-- Node -> Storage -->
|
|
<line x1="450" y1="550" x2="450" y2="620" class="arrow"/> <!-- Slot -> Storage -->
|
|
<line x1="740" y1="550" x2="600" y2="620" class="arrow"/> <!-- Channel -> Storage -->
|
|
|
|
|
|
</svg> |
