opensource/iot-dc3
3
0
Fork 0
mirror of https://gitee.com/pnoker/iot-dc3.git synced 2026-09-01 15:33:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: migrate images from dc3/images to docs/public/images

Browse Source 
- Rename iot-dc3-architecture-{lang}.svg → architecture-{lang}.svg
- Move all architecture SVGs and screenshots to docs/public/images/
- Update 16 references across all 4 README language variants
- Remove now-empty dc3/images/ directory
This commit is contained in:
pnoker
2026-06-28 18:07:09 +08:00
parent 49f018cb1b
commit c808d45492
11 changed files with 1385 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.ja.md
+4 -4
View File
@@ -51,19 +51,19 @@
</tr>
<tr>
<td align="center">
<img src="dc3/images/screenshot-overview.png" alt="プラットフォームダッシュボード" width="100%">
<img src="docs/public/images/screenshot-overview.png" alt="プラットフォームダッシュボード" width="100%">
<br>
<strong>ホーム / ダッシュボード</strong><br>
<em>システム概要 · デバイスオンライン統計 · データトレンドチャート</em>
</td>
<td align="center">
<img src="dc3/images/screenshot-device.png" alt="デバイス管理ページ" width="100%">
<img src="docs/public/images/screenshot-device.png" alt="デバイス管理ページ" width="100%">
<br>
<strong>デバイス管理</strong><br>
<em>デバイス一覧 · オンライン状態 · 検索とフィルタ</em>
</td>
<td align="center">
<img src="dc3/images/screenshot-ai.png" alt="AI チャットページ" width="100%">
<img src="docs/public/images/screenshot-ai.png" alt="AI チャットページ" width="100%">
<br>
<strong>AI チャット</strong><br>
<em>自然言語によるデバイス操作 · データクエリ · インテリジェント分析</em>
@@ -217,7 +217,7 @@ cp .env.example .env # テンプレートをコピー
## 🏗️ アーキテクチャ概要
![IoT DC3 Architecture](dc3/images/iot-dc3-architecture-ja.svg)
![IoT DC3 Architecture](docs/public/images/architecture-ja.svg)
| 層 | 役割 |
|---------------|----------------------------------------------------|
README.md
+4 -4
View File
@@ -51,19 +51,19 @@
</tr>
<tr>
<td align="center">
<img src="dc3/images/screenshot-overview.png" alt="Platform dashboard" width="100%">
<img src="docs/public/images/screenshot-overview.png" alt="Platform dashboard" width="100%">
<br>
<strong>Home / Dashboard</strong><br>
<em>System overview · Online device metrics · Data trend charts</em>
</td>
<td align="center">
<img src="dc3/images/screenshot-device.png" alt="Device management page" width="100%">
<img src="docs/public/images/screenshot-device.png" alt="Device management page" width="100%">
<br>
<strong>Device Management</strong><br>
<em>Device list · Online status · Search and filtering</em>
</td>
<td align="center">
<img src="dc3/images/screenshot-ai.png" alt="AI chat page" width="100%">
<img src="docs/public/images/screenshot-ai.png" alt="AI chat page" width="100%">
<br>
<strong>AI Chat</strong><br>
<em>Natural-language device operations · Data queries · Intelligent analysis</em>
@@ -220,7 +220,7 @@ the [environment documentation](https://pnoker.github.io/iot-dc3/quickstart/envi
## 🏗️ Architecture Overview
![IoT DC3 Architecture](dc3/images/iot-dc3-architecture-en.svg)
![IoT DC3 Architecture](docs/public/images/architecture-en.svg)
| Layer | Responsibilities |
|-----------------------|----------------------------------------------------------------------------------------------------------------------------------|
README.vi.md
+4 -4
View File
@@ -51,19 +51,19 @@
</tr>
<tr>
<td align="center">
<img src="dc3/images/screenshot-overview.png" alt="Dashboard nền tảng" width="100%">
<img src="docs/public/images/screenshot-overview.png" alt="Dashboard nền tảng" width="100%">
<br>
<strong>Trang chủ / Dashboard</strong><br>
<em>Tổng quan hệ thống · Thống kê thiết bị online · Biểu đồ xu hướng dữ liệu</em>
</td>
<td align="center">
<img src="dc3/images/screenshot-device.png" alt="Trang quản lý thiết bị" width="100%">
<img src="docs/public/images/screenshot-device.png" alt="Trang quản lý thiết bị" width="100%">
<br>
<strong>Quản lý thiết bị</strong><br>
<em>Danh sách thiết bị · Trạng thái online · Tìm kiếm và lọc</em>
</td>
<td align="center">
<img src="dc3/images/screenshot-ai.png" alt="Trang trò chuyện AI" width="100%">
<img src="docs/public/images/screenshot-ai.png" alt="Trang trò chuyện AI" width="100%">
<br>
<strong>Trò chuyện AI</strong><br>
<em>Điều khiển thiết bị bằng ngôn ngữ tự nhiên · Truy vấn dữ liệu · Phân tích thông minh</em>
@@ -220,7 +220,7 @@ Xem [tài liệu biến môi trường](https://pnoker.github.io/iot-dc3/quickst
## 🏗️ Tổng quan kiến trúc
![IoT DC3 Architecture](dc3/images/iot-dc3-architecture-vi.svg)
![IoT DC3 Architecture](docs/public/images/architecture-vi.svg)
| Tầng | Trách nhiệm |
|-------------------|--------------------------------------------------------------------------------------------------------------------------|
README.zh.md
+4 -4
View File
@@ -51,19 +51,19 @@
</tr>
<tr>
<td align="center">
<img src="dc3/images/screenshot-overview.png" alt="平台首页仪表盘" width="100%">
<img src="docs/public/images/screenshot-overview.png" alt="平台首页仪表盘" width="100%">
<br>
<strong>平台首页 / 仪表盘</strong><br>
<em>系统概览 · 设备在线统计 · 数据趋势图表</em>
</td>
<td align="center">
<img src="dc3/images/screenshot-device.png" alt="设备管理页面" width="100%">
<img src="docs/public/images/screenshot-device.png" alt="设备管理页面" width="100%">
<br>
<strong>设备管理页面</strong><br>
<em>设备列表 · 在线状态指示 · 搜索筛选</em>
</td>
<td align="center">
<img src="dc3/images/screenshot-ai.png" alt="AI 智能对话页面" width="100%">
<img src="docs/public/images/screenshot-ai.png" alt="AI 智能对话页面" width="100%">
<br>
<strong>AI 智能对话页面</strong><br>
<em>自然语言操控设备 · 数据查询 · 智能分析</em>
@@ -214,7 +214,7 @@ cp .env.example .env # 复制模板文件
## 🏗️ 架构概览
![IoT DC3 架构](dc3/images/iot-dc3-architecture-zh.svg)
![IoT DC3 架构](docs/public/images/architecture-zh.svg)
| 层级 | 职责 |
|---------|----------------------------------|
docs/public/images/architecture-en.svg
+348
View File
@@ -0,0 +1,348 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
- Copyright 2016-present the IoT DC3 original author or authors.
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 695">
<defs>
<marker id="arrow-down" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#3b82f6"/>
</marker>
<marker id="arrow-up" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#3b82f6"/>
</marker>
<marker id="arrow-data" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#60a5fa"/>
</marker>
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
</pattern>
<linearGradient id="banner-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#2563eb"/>
<stop offset="100%" stop-color="#3b82f6"/>
</linearGradient>
</defs>
<!-- Background -->
<rect width="100%" height="100%" fill="#020617"/>
<rect width="100%" height="100%" fill="url(#grid)"/>
<g transform="translate(0, -57)">
<!-- ============================================================
TOP BANNERS
============================================================ -->
<!-- Gateway -->
<rect x="260" y="85" width="420" height="34" rx="8" fill="url(#banner-grad)"/>
<g transform="translate(282, 93)" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round">
<circle cx="7" cy="4" r="2.5"/>
<circle cx="7" cy="14" r="2.5"/>
<circle cx="16" cy="9" r="2.5"/>
<line x1="7" y1="6.5" x2="7" y2="11.5"/>
<line x1="9" y1="7.5" x2="14" y2="9"/>
<line x1="9" y1="10.5" x2="14" y2="9"/>
</g>
<text x="470" y="107" fill="white" font-size="13" font-weight="700" text-anchor="middle">Gateway</text>
<line x1="470" y1="119" x2="470" y2="133" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrow-down)"/>
<!-- Cloud Server -->
<rect x="720" y="85" width="420" height="34" rx="8" fill="url(#banner-grad)"/>
<g transform="translate(744, 93)" fill="white" stroke="white" stroke-width="1" stroke-linejoin="round">
<path d="M4 12 C2 12 2 9 3.5 8.5 C3.5 6.5 6.5 5.5 8 7 C9 4.5 13 4.5 15 7 C17 6.5 18 8.5 16.5 10.5 C17.5 11 17 12 15 12 Z"/>
</g>
<text x="930" y="107" fill="white" font-size="13" font-weight="700" text-anchor="middle">Cloud Server</text>
<line x1="930" y1="119" x2="930" y2="133" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrow-down)"/>
<!-- ============================================================
LEFT SIDEBAR — Security & Load
============================================================ -->
<rect x="28" y="85" width="195" height="560" rx="10" fill="rgba(251, 113, 133, 0.04)" stroke="#fb7185"
stroke-width="1" stroke-dasharray="6,3"/>
<rect x="43" y="110" width="165" height="52" rx="6" fill="rgba(251, 113, 133, 0.08)"
stroke="rgba(251, 113, 133, 0.3)" stroke-width="0.5"/>
<text x="125" y="141" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Load Balancing</text>
<rect x="43" y="212" width="165" height="52" rx="6" fill="rgba(251, 113, 133, 0.08)"
stroke="rgba(251, 113, 133, 0.3)" stroke-width="0.5"/>
<text x="125" y="243" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Security Services
Suite
</text>
<rect x="43" y="314" width="165" height="52" rx="6" fill="rgba(251, 113, 133, 0.08)"
stroke="rgba(251, 113, 133, 0.3)" stroke-width="0.5"/>
<text x="125" y="345" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Token</text>
<rect x="43" y="416" width="165" height="52" rx="6" fill="rgba(251, 113, 133, 0.08)"
stroke="rgba(251, 113, 133, 0.3)" stroke-width="0.5"/>
<text x="125" y="447" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Encryption</text>
<text x="125" y="636" fill="#fb7185" font-size="12" font-weight="700" text-anchor="middle">Security &amp; Load
</text>
<!-- ============================================================
RIGHT SIDEBAR — Platform & System
============================================================ -->
<rect x="1177" y="85" width="195" height="560" rx="10" fill="rgba(251, 191, 36, 0.04)" stroke="#fbbf24"
stroke-width="1" stroke-dasharray="6,3"/>
<rect x="1192" y="110" width="165" height="48" rx="6" fill="rgba(251, 191, 36, 0.08)"
stroke="rgba(251, 191, 36, 0.3)" stroke-width="0.5"/>
<text x="1274" y="139" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Management
Platform
</text>
<rect x="1192" y="198" width="165" height="48" rx="6" fill="rgba(251, 191, 36, 0.08)"
stroke="rgba(251, 191, 36, 0.3)" stroke-width="0.5"/>
<text x="1274" y="227" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Container</text>
<rect x="1192" y="286" width="165" height="48" rx="6" fill="rgba(251, 191, 36, 0.08)"
stroke="rgba(251, 191, 36, 0.3)" stroke-width="0.5"/>
<text x="1274" y="315" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Fast Deployment
</text>
<rect x="1192" y="374" width="165" height="48" rx="6" fill="rgba(251, 191, 36, 0.08)"
stroke="rgba(251, 191, 36, 0.3)" stroke-width="0.5"/>
<text x="1274" y="403" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">System Services
</text>
<rect x="1192" y="462" width="165" height="52" rx="6" fill="rgba(251, 191, 36, 0.08)"
stroke="rgba(251, 191, 36, 0.3)" stroke-width="0.5"/>
<text x="1274" y="478" fill="#e2e8f0" font-size="9" font-weight="600" text-anchor="middle">Device</text>
<text x="1274" y="492" fill="#e2e8f0" font-size="9" font-weight="600" text-anchor="middle">System</text>
<text x="1274" y="506" fill="#e2e8f0" font-size="9" font-weight="600" text-anchor="middle">Monitoring
Management
</text>
<text x="1274" y="636" fill="#fbbf24" font-size="12" font-weight="700" text-anchor="middle">Platform &amp;
System
</text>
<!-- ============================================================
CENTER — Layered Architecture (titles below each box)
============================================================ -->
<!-- 1. Application Layer -->
<rect x="260" y="140" width="880" height="72" rx="6" fill="rgba(34, 211, 238, 0.06)" stroke="#22d3ee"
stroke-width="0.8" stroke-dasharray="4,4"/>
<rect x="266" y="154" width="205" height="40" rx="5" fill="rgba(34, 211, 238, 0.08)" stroke="#22d3ee"
stroke-width="0.5"/>
<text x="368" y="179" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Client Registration
&amp; Management
</text>
<rect x="487" y="154" width="205" height="40" rx="5" fill="rgba(34, 211, 238, 0.08)" stroke="#22d3ee"
stroke-width="0.5"/>
<text x="589" y="179" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Data Open API</text>
<rect x="708" y="154" width="205" height="40" rx="5" fill="rgba(34, 211, 238, 0.08)" stroke="#22d3ee"
stroke-width="0.5"/>
<text x="810" y="179" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Data Distribution
</text>
<rect x="929" y="154" width="205" height="40" rx="5" fill="rgba(34, 211, 238, 0.08)" stroke="#22d3ee"
stroke-width="0.5"/>
<text x="1031" y="179" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Extension Module
</text>
<text x="700" y="230" fill="#22d3ee" font-size="13" font-weight="700" text-anchor="middle">Application Layer
</text>
<!-- 2. Management Layer -->
<rect x="260" y="260" width="880" height="72" rx="6" fill="rgba(56, 189, 248, 0.06)" stroke="#38bdf8"
stroke-width="0.8" stroke-dasharray="4,4"/>
<rect x="268" y="274" width="160" height="40" rx="5" fill="rgba(56, 189, 248, 0.08)" stroke="#38bdf8"
stroke-width="0.5"/>
<text x="348" y="299" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Task Scheduling
</text>
<rect x="444" y="274" width="160" height="40" rx="5" fill="rgba(56, 189, 248, 0.08)" stroke="#38bdf8"
stroke-width="0.5"/>
<text x="524" y="299" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Alerting</text>
<rect x="620" y="274" width="160" height="40" rx="5" fill="rgba(56, 189, 248, 0.08)" stroke="#38bdf8"
stroke-width="0.5"/>
<text x="700" y="299" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Notification</text>
<rect x="796" y="274" width="160" height="40" rx="5" fill="rgba(56, 189, 248, 0.08)" stroke="#38bdf8"
stroke-width="0.5"/>
<text x="876" y="299" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Logging</text>
<rect x="972" y="274" width="162" height="40" rx="5" fill="rgba(56, 189, 248, 0.08)" stroke="#38bdf8"
stroke-width="0.5"/>
<text x="1053" y="299" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Message</text>
<text x="700" y="350" fill="#38bdf8" font-size="13" font-weight="700" text-anchor="middle">Management Layer
</text>
<!-- 3. Data Layer -->
<rect x="260" y="380" width="880" height="72" rx="6" fill="rgba(129, 140, 248, 0.06)" stroke="#818cf8"
stroke-width="0.8" stroke-dasharray="4,4"/>
<rect x="268" y="394" width="160" height="40" rx="5" fill="rgba(129, 140, 248, 0.08)" stroke="#818cf8"
stroke-width="0.5"/>
<text x="348" y="419" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Data Storage</text>
<rect x="444" y="394" width="160" height="40" rx="5" fill="rgba(129, 140, 248, 0.08)" stroke="#818cf8"
stroke-width="0.5"/>
<text x="524" y="419" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Interactive
Operations
</text>
<rect x="620" y="394" width="160" height="40" rx="5" fill="rgba(129, 140, 248, 0.08)" stroke="#818cf8"
stroke-width="0.5"/>
<text x="700" y="419" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Device Operation
Library
</text>
<rect x="796" y="394" width="160" height="40" rx="5" fill="rgba(129, 140, 248, 0.08)" stroke="#818cf8"
stroke-width="0.5"/>
<text x="876" y="419" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Data Management
</text>
<rect x="972" y="394" width="162" height="40" rx="5" fill="rgba(129, 140, 248, 0.08)" stroke="#818cf8"
stroke-width="0.5"/>
<text x="1053" y="419" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Data Collection
</text>
<text x="700" y="470" fill="#818cf8" font-size="13" font-weight="700" text-anchor="middle">Data Layer</text>
<!-- 4. Driver Layer -->
<rect x="260" y="500" width="880" height="72" rx="6" fill="rgba(52, 211, 153, 0.06)" stroke="#34d399"
stroke-width="0.8" stroke-dasharray="4,4"/>
<rect x="273" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="339" y="539" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">TCP</text>
<rect x="419" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="485" y="539" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">OPC</text>
<rect x="565" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="631" y="539" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">MODBUS</text>
<rect x="711" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="777" y="539" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">MQTT</text>
<rect x="857" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="923" y="539" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">PLC</text>
<rect x="1003" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="1069" y="539" fill="#e2e8f0" font-size="9" font-weight="600" text-anchor="middle">Driver Expand...
</text>
<text x="700" y="590" fill="#34d399" font-size="13" font-weight="700" text-anchor="middle">Driver Layer</text>
<!-- ============================================================
DATA LAYER → DRIVER LAYER CONNECTIONS
============================================================ -->
<line x1="524" y1="434" x2="524" y2="484" stroke="#60a5fa" stroke-width="1.5"/>
<line x1="876" y1="434" x2="876" y2="484" stroke="#60a5fa" stroke-width="1.5"/>
<line x1="339" y1="484" x2="1069" y2="484" stroke="#60a5fa" stroke-width="1"/>
<line x1="339" y1="484" x2="339" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<line x1="485" y1="484" x2="485" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<line x1="631" y1="484" x2="631" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<line x1="777" y1="484" x2="777" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<line x1="923" y1="484" x2="923" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<line x1="1069" y1="484" x2="1069" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<!-- ============================================================
BOTTOM BANNERS
============================================================ -->
<rect x="260" y="611" width="420" height="34" rx="8" fill="url(#banner-grad)"/>
<g transform="translate(282, 619)" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round">
<rect x="2" y="2" width="15" height="14" rx="2"/>
<rect x="6" y="6" width="7" height="6"/>
<line x1="2" y1="6" x2="0" y2="6"/>
<line x1="2" y1="12" x2="0" y2="12"/>
<line x1="17" y1="6" x2="19" y2="6"/>
<line x1="17" y1="12" x2="19" y2="12"/>
<line x1="6" y1="2" x2="6" y2="0"/>
<line x1="13" y1="2" x2="13" y2="0"/>
<line x1="6" y1="16" x2="6" y2="18"/>
<line x1="13" y1="16" x2="13" y2="18"/>
</g>
<text x="470" y="633" fill="white" font-size="12" font-weight="700" text-anchor="middle">Real &amp; Virtual
Devices
</text>
<line x1="470" y1="611" x2="470" y2="598" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrow-up)"/>
<rect x="720" y="611" width="420" height="34" rx="8" fill="url(#banner-grad)"/>
<g transform="translate(742, 619)" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round">
<circle cx="10" cy="9" r="5.5"/>
<circle cx="10" cy="9" r="1.8" fill="white"/>
<line x1="10" y1="1" x2="10" y2="3"/>
<line x1="10" y1="15" x2="10" y2="17"/>
<line x1="2" y1="9" x2="4" y2="9"/>
<line x1="16" y1="9" x2="18" y2="9"/>
<line x1="4.5" y1="3.5" x2="6" y2="5"/>
<line x1="14" y1="13" x2="15.5" y2="14.5"/>
<line x1="15.5" y1="3.5" x2="14" y2="5"/>
<line x1="6" y1="13" x2="4.5" y2="14.5"/>
</g>
<text x="930" y="633" fill="white" font-size="12" font-weight="700" text-anchor="middle">SDK Fast Development
</text>
<line x1="930" y1="611" x2="930" y2="598" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrow-up)"/>
<!-- ============================================================
LEGEND
============================================================ -->
<text x="60" y="700" fill="white" font-size="11" font-weight="700">Legend</text>
<rect x="60" y="712" width="18" height="10" rx="2" fill="url(#banner-grad)"/>
<text x="84" y="721" fill="#94a3b8" font-size="9">Entry / Exit Point</text>
<rect x="210" y="712" width="18" height="10" rx="2" fill="rgba(34, 211, 238, 0.2)" stroke="#22d3ee"
stroke-width="0.5"/>
<text x="234" y="721" fill="#94a3b8" font-size="9">Service / Component</text>
<line x1="390" y1="717" x2="408" y2="717" stroke="#60a5fa" stroke-width="1.5" marker-end="url(#arrow-data)"/>
<text x="414" y="721" fill="#94a3b8" font-size="9">Data / Dependency Flow</text>
<line x1="570" y1="717" x2="588" y2="717" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrow-down)"/>
<text x="594" y="721" fill="#94a3b8" font-size="9">External Access</text>
<rect x="750" y="712" width="18" height="10" rx="2" fill="rgba(251, 113, 133, 0.08)" stroke="#fb7185"
stroke-width="1" stroke-dasharray="4,3"/>
<text x="774" y="721" fill="#94a3b8" font-size="9">Service Group</text>
<rect x="910" y="714" width="8" height="8" rx="2" fill="#22d3ee"/>
<text x="924" y="722" fill="#94a3b8" font-size="9">App</text>
<rect x="956" y="714" width="8" height="8" rx="2" fill="#38bdf8"/>
<text x="970" y="722" fill="#94a3b8" font-size="9">Mgmt</text>
<rect x="1012" y="714" width="8" height="8" rx="2" fill="#818cf8"/>
<text x="1026" y="722" fill="#94a3b8" font-size="9">Data</text>
<rect x="1068" y="714" width="8" height="8" rx="2" fill="#34d399"/>
<text x="1082" y="722" fill="#94a3b8" font-size="9">Driver</text>
<rect x="1132" y="714" width="8" height="8" rx="2" fill="#fb7185"/>
<text x="1146" y="722" fill="#94a3b8" font-size="9">Security</text>
<rect x="1208" y="714" width="8" height="8" rx="2" fill="#fbbf24"/>
<text x="1222" y="722" fill="#94a3b8" font-size="9">Platform</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

docs/public/images/architecture-ja.svg
+339
View File
@@ -0,0 +1,339 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
- Copyright 2016-present the IoT DC3 original author or authors.
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 695">
<defs>
<marker id="arrow-down" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#3b82f6"/>
</marker>
<marker id="arrow-up" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#3b82f6"/>
</marker>
<marker id="arrow-data" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#60a5fa"/>
</marker>
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
</pattern>
<linearGradient id="banner-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#2563eb"/>
<stop offset="100%" stop-color="#3b82f6"/>
</linearGradient>
</defs>
<!-- Background -->
<rect width="100%" height="100%" fill="#020617"/>
<rect width="100%" height="100%" fill="url(#grid)"/>
<g transform="translate(0, -57)">
<!-- ============================================================
TOP BANNERS
============================================================ -->
<!-- Gateway -->
<rect x="260" y="85" width="420" height="34" rx="8" fill="url(#banner-grad)"/>
<g transform="translate(282, 93)" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round">
<circle cx="7" cy="4" r="2.5"/>
<circle cx="7" cy="14" r="2.5"/>
<circle cx="16" cy="9" r="2.5"/>
<line x1="7" y1="6.5" x2="7" y2="11.5"/>
<line x1="9" y1="7.5" x2="14" y2="9"/>
<line x1="9" y1="10.5" x2="14" y2="9"/>
</g>
<text x="470" y="107" fill="white" font-size="13" font-weight="700" text-anchor="middle">ゲートウェイ</text>
<line x1="470" y1="119" x2="470" y2="133" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrow-down)"/>
<!-- Cloud Server -->
<rect x="720" y="85" width="420" height="34" rx="8" fill="url(#banner-grad)"/>
<g transform="translate(744, 93)" fill="white" stroke="white" stroke-width="1" stroke-linejoin="round">
<path d="M4 12 C2 12 2 9 3.5 8.5 C3.5 6.5 6.5 5.5 8 7 C9 4.5 13 4.5 15 7 C17 6.5 18 8.5 16.5 10.5 C17.5 11 17 12 15 12 Z"/>
</g>
<text x="930" y="107" fill="white" font-size="13" font-weight="700" text-anchor="middle">クラウドサーバー</text>
<line x1="930" y1="119" x2="930" y2="133" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrow-down)"/>
<!-- ============================================================
LEFT SIDEBAR — Security & Load
============================================================ -->
<rect x="28" y="85" width="195" height="560" rx="10" fill="rgba(251, 113, 133, 0.04)" stroke="#fb7185"
stroke-width="1" stroke-dasharray="6,3"/>
<rect x="43" y="110" width="165" height="52" rx="6" fill="rgba(251, 113, 133, 0.08)"
stroke="rgba(251, 113, 133, 0.3)" stroke-width="0.5"/>
<text x="125" y="141" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">負荷分散</text>
<rect x="43" y="212" width="165" height="52" rx="6" fill="rgba(251, 113, 133, 0.08)"
stroke="rgba(251, 113, 133, 0.3)" stroke-width="0.5"/>
<text x="125" y="243" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">セキュリティサービススイート
</text>
<rect x="43" y="314" width="165" height="52" rx="6" fill="rgba(251, 113, 133, 0.08)"
stroke="rgba(251, 113, 133, 0.3)" stroke-width="0.5"/>
<text x="125" y="345" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">トークン</text>
<rect x="43" y="416" width="165" height="52" rx="6" fill="rgba(251, 113, 133, 0.08)"
stroke="rgba(251, 113, 133, 0.3)" stroke-width="0.5"/>
<text x="125" y="447" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">暗号化</text>
<text x="125" y="636" fill="#fb7185" font-size="12" font-weight="700" text-anchor="middle">セキュリティと負荷
</text>
<!-- ============================================================
RIGHT SIDEBAR — Platform & System
============================================================ -->
<rect x="1177" y="85" width="195" height="560" rx="10" fill="rgba(251, 191, 36, 0.04)" stroke="#fbbf24"
stroke-width="1" stroke-dasharray="6,3"/>
<rect x="1192" y="110" width="165" height="48" rx="6" fill="rgba(251, 191, 36, 0.08)"
stroke="rgba(251, 191, 36, 0.3)" stroke-width="0.5"/>
<text x="1274" y="139" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">管理プラットフォーム
</text>
<rect x="1192" y="198" width="165" height="48" rx="6" fill="rgba(251, 191, 36, 0.08)"
stroke="rgba(251, 191, 36, 0.3)" stroke-width="0.5"/>
<text x="1274" y="227" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">コンテナ</text>
<rect x="1192" y="286" width="165" height="48" rx="6" fill="rgba(251, 191, 36, 0.08)"
stroke="rgba(251, 191, 36, 0.3)" stroke-width="0.5"/>
<text x="1274" y="315" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">高速デプロイ
</text>
<rect x="1192" y="374" width="165" height="48" rx="6" fill="rgba(251, 191, 36, 0.08)"
stroke="rgba(251, 191, 36, 0.3)" stroke-width="0.5"/>
<text x="1274" y="403" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">システムサービス
</text>
<rect x="1192" y="462" width="165" height="52" rx="6" fill="rgba(251, 191, 36, 0.08)"
stroke="rgba(251, 191, 36, 0.3)" stroke-width="0.5"/>
<text x="1274" y="478" fill="#e2e8f0" font-size="9" font-weight="600" text-anchor="middle">デバイス</text>
<text x="1274" y="492" fill="#e2e8f0" font-size="9" font-weight="600" text-anchor="middle">システム</text>
<text x="1274" y="506" fill="#e2e8f0" font-size="9" font-weight="600" text-anchor="middle">監視管理
</text>
<text x="1274" y="636" fill="#fbbf24" font-size="12" font-weight="700" text-anchor="middle">プラットフォームとシステム
</text>
<!-- ============================================================
CENTER — Layered Architecture (titles below each box)
============================================================ -->
<!-- 1. アプリケーション層 -->
<rect x="260" y="140" width="880" height="72" rx="6" fill="rgba(34, 211, 238, 0.06)" stroke="#22d3ee"
stroke-width="0.8" stroke-dasharray="4,4"/>
<rect x="266" y="154" width="205" height="40" rx="5" fill="rgba(34, 211, 238, 0.08)" stroke="#22d3ee"
stroke-width="0.5"/>
<text x="368" y="179" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">クライアント登録と管理
</text>
<rect x="487" y="154" width="205" height="40" rx="5" fill="rgba(34, 211, 238, 0.08)" stroke="#22d3ee"
stroke-width="0.5"/>
<text x="589" y="179" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">データ公開API</text>
<rect x="708" y="154" width="205" height="40" rx="5" fill="rgba(34, 211, 238, 0.08)" stroke="#22d3ee"
stroke-width="0.5"/>
<text x="810" y="179" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">データ配信
</text>
<rect x="929" y="154" width="205" height="40" rx="5" fill="rgba(34, 211, 238, 0.08)" stroke="#22d3ee"
stroke-width="0.5"/>
<text x="1031" y="179" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">拡張モジュール
</text>
<text x="700" y="230" fill="#22d3ee" font-size="13" font-weight="700" text-anchor="middle">アプリケーション層
</text>
<!-- 2. 管理層 -->
<rect x="260" y="260" width="880" height="72" rx="6" fill="rgba(56, 189, 248, 0.06)" stroke="#38bdf8"
stroke-width="0.8" stroke-dasharray="4,4"/>
<rect x="268" y="274" width="160" height="40" rx="5" fill="rgba(56, 189, 248, 0.08)" stroke="#38bdf8"
stroke-width="0.5"/>
<text x="348" y="299" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">タスクスケジューリング
</text>
<rect x="444" y="274" width="160" height="40" rx="5" fill="rgba(56, 189, 248, 0.08)" stroke="#38bdf8"
stroke-width="0.5"/>
<text x="524" y="299" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">アラート</text>
<rect x="620" y="274" width="160" height="40" rx="5" fill="rgba(56, 189, 248, 0.08)" stroke="#38bdf8"
stroke-width="0.5"/>
<text x="700" y="299" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">通知</text>
<rect x="796" y="274" width="160" height="40" rx="5" fill="rgba(56, 189, 248, 0.08)" stroke="#38bdf8"
stroke-width="0.5"/>
<text x="876" y="299" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">ログ</text>
<rect x="972" y="274" width="162" height="40" rx="5" fill="rgba(56, 189, 248, 0.08)" stroke="#38bdf8"
stroke-width="0.5"/>
<text x="1053" y="299" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">メッセージ</text>
<text x="700" y="350" fill="#38bdf8" font-size="13" font-weight="700" text-anchor="middle">管理層
</text>
<!-- 3. データ層 -->
<rect x="260" y="380" width="880" height="72" rx="6" fill="rgba(129, 140, 248, 0.06)" stroke="#818cf8"
stroke-width="0.8" stroke-dasharray="4,4"/>
<rect x="268" y="394" width="160" height="40" rx="5" fill="rgba(129, 140, 248, 0.08)" stroke="#818cf8"
stroke-width="0.5"/>
<text x="348" y="419" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">データストレージ
</text>
<rect x="444" y="394" width="160" height="40" rx="5" fill="rgba(129, 140, 248, 0.08)" stroke="#818cf8"
stroke-width="0.5"/>
<text x="524" y="419" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">対話操作
</text>
<rect x="620" y="394" width="160" height="40" rx="5" fill="rgba(129, 140, 248, 0.08)" stroke="#818cf8"
stroke-width="0.5"/>
<text x="700" y="419" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">デバイス操作ライブラリ
</text>
<rect x="796" y="394" width="160" height="40" rx="5" fill="rgba(129, 140, 248, 0.08)" stroke="#818cf8"
stroke-width="0.5"/>
<text x="876" y="419" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">データ管理</text>
<rect x="972" y="394" width="162" height="40" rx="5" fill="rgba(129, 140, 248, 0.08)" stroke="#818cf8"
stroke-width="0.5"/>
<text x="1053" y="419" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">データ収集</text>
<text x="700" y="470" fill="#818cf8" font-size="13" font-weight="700" text-anchor="middle">データ層</text>
<!-- 4. ドライバー層 -->
<rect x="260" y="500" width="880" height="72" rx="6" fill="rgba(52, 211, 153, 0.06)" stroke="#34d399"
stroke-width="0.8" stroke-dasharray="4,4"/>
<rect x="273" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="339" y="539" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">TCP</text>
<rect x="419" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="485" y="539" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">OPC</text>
<rect x="565" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="631" y="539" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">MODBUS</text>
<rect x="711" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="777" y="539" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">MQTT</text>
<rect x="857" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="923" y="539" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">PLC</text>
<rect x="1003" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="1069" y="539" fill="#e2e8f0" font-size="9" font-weight="600" text-anchor="middle">ドライバー拡張...
</text>
<text x="700" y="590" fill="#34d399" font-size="13" font-weight="700" text-anchor="middle">ドライバー層</text>
<!-- ============================================================
DATA LAYER → DRIVER LAYER CONNECTIONS
============================================================ -->
<line x1="524" y1="434" x2="524" y2="484" stroke="#60a5fa" stroke-width="1.5"/>
<line x1="876" y1="434" x2="876" y2="484" stroke="#60a5fa" stroke-width="1.5"/>
<line x1="339" y1="484" x2="1069" y2="484" stroke="#60a5fa" stroke-width="1"/>
<line x1="339" y1="484" x2="339" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<line x1="485" y1="484" x2="485" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<line x1="631" y1="484" x2="631" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<line x1="777" y1="484" x2="777" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<line x1="923" y1="484" x2="923" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<line x1="1069" y1="484" x2="1069" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<!-- ============================================================
BOTTOM BANNERS
============================================================ -->
<rect x="260" y="611" width="420" height="34" rx="8" fill="url(#banner-grad)"/>
<g transform="translate(282, 619)" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round">
<rect x="2" y="2" width="15" height="14" rx="2"/>
<rect x="6" y="6" width="7" height="6"/>
<line x1="2" y1="6" x2="0" y2="6"/>
<line x1="2" y1="12" x2="0" y2="12"/>
<line x1="17" y1="6" x2="19" y2="6"/>
<line x1="17" y1="12" x2="19" y2="12"/>
<line x1="6" y1="2" x2="6" y2="0"/>
<line x1="13" y1="2" x2="13" y2="0"/>
<line x1="6" y1="16" x2="6" y2="18"/>
<line x1="13" y1="16" x2="13" y2="18"/>
</g>
<text x="470" y="633" fill="white" font-size="12" font-weight="700" text-anchor="middle">実デバイスと仮想デバイス
</text>
<line x1="470" y1="611" x2="470" y2="598" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrow-up)"/>
<rect x="720" y="611" width="420" height="34" rx="8" fill="url(#banner-grad)"/>
<g transform="translate(742, 619)" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round">
<circle cx="10" cy="9" r="5.5"/>
<circle cx="10" cy="9" r="1.8" fill="white"/>
<line x1="10" y1="1" x2="10" y2="3"/>
<line x1="10" y1="15" x2="10" y2="17"/>
<line x1="2" y1="9" x2="4" y2="9"/>
<line x1="16" y1="9" x2="18" y2="9"/>
<line x1="4.5" y1="3.5" x2="6" y2="5"/>
<line x1="14" y1="13" x2="15.5" y2="14.5"/>
<line x1="15.5" y1="3.5" x2="14" y2="5"/>
<line x1="6" y1="13" x2="4.5" y2="14.5"/>
</g>
<text x="930" y="633" fill="white" font-size="12" font-weight="700" text-anchor="middle">SDK高速開発
</text>
<line x1="930" y1="611" x2="930" y2="598" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrow-up)"/>
<!-- ============================================================
LEGEND
============================================================ -->
<text x="60" y="700" fill="white" font-size="11" font-weight="700">凡例</text>
<rect x="60" y="712" width="18" height="10" rx="2" fill="url(#banner-grad)"/>
<text x="84" y="721" fill="#94a3b8" font-size="9">入口 / 出口</text>
<rect x="210" y="712" width="18" height="10" rx="2" fill="rgba(34, 211, 238, 0.2)" stroke="#22d3ee"
stroke-width="0.5"/>
<text x="234" y="721" fill="#94a3b8" font-size="9">サービス / コンポーネント</text>
<line x1="390" y1="717" x2="408" y2="717" stroke="#60a5fa" stroke-width="1.5" marker-end="url(#arrow-data)"/>
<text x="414" y="721" fill="#94a3b8" font-size="9">データ / 依存フロー</text>
<line x1="570" y1="717" x2="588" y2="717" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrow-down)"/>
<text x="594" y="721" fill="#94a3b8" font-size="9">外部アクセス</text>
<rect x="750" y="712" width="18" height="10" rx="2" fill="rgba(251, 113, 133, 0.08)" stroke="#fb7185"
stroke-width="1" stroke-dasharray="4,3"/>
<text x="774" y="721" fill="#94a3b8" font-size="9">サービスグループ</text>
<rect x="910" y="714" width="8" height="8" rx="2" fill="#22d3ee"/>
<text x="924" y="722" fill="#94a3b8" font-size="9">アプリ</text>
<rect x="956" y="714" width="8" height="8" rx="2" fill="#38bdf8"/>
<text x="970" y="722" fill="#94a3b8" font-size="9">管理</text>
<rect x="1012" y="714" width="8" height="8" rx="2" fill="#818cf8"/>
<text x="1026" y="722" fill="#94a3b8" font-size="9">データ</text>
<rect x="1068" y="714" width="8" height="8" rx="2" fill="#34d399"/>
<text x="1082" y="722" fill="#94a3b8" font-size="9">ドライバー</text>
<rect x="1132" y="714" width="8" height="8" rx="2" fill="#fb7185"/>
<text x="1146" y="722" fill="#94a3b8" font-size="9">セキュリティ</text>
<rect x="1208" y="714" width="8" height="8" rx="2" fill="#fbbf24"/>
<text x="1222" y="722" fill="#94a3b8" font-size="9">プラットフォーム</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

docs/public/images/architecture-vi.svg
+344
View File
@@ -0,0 +1,344 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
- Copyright 2016-present the IoT DC3 original author or authors.
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 695">
<defs>
<marker id="arrow-down" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#3b82f6"/>
</marker>
<marker id="arrow-up" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#3b82f6"/>
</marker>
<marker id="arrow-data" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#60a5fa"/>
</marker>
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
</pattern>
<linearGradient id="banner-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#2563eb"/>
<stop offset="100%" stop-color="#3b82f6"/>
</linearGradient>
</defs>
<!-- Background -->
<rect width="100%" height="100%" fill="#020617"/>
<rect width="100%" height="100%" fill="url(#grid)"/>
<g transform="translate(0, -57)">
<!-- ============================================================
TOP BANNERS
============================================================ -->
<!-- Gateway -->
<rect x="260" y="85" width="420" height="34" rx="8" fill="url(#banner-grad)"/>
<g transform="translate(282, 93)" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round">
<circle cx="7" cy="4" r="2.5"/>
<circle cx="7" cy="14" r="2.5"/>
<circle cx="16" cy="9" r="2.5"/>
<line x1="7" y1="6.5" x2="7" y2="11.5"/>
<line x1="9" y1="7.5" x2="14" y2="9"/>
<line x1="9" y1="10.5" x2="14" y2="9"/>
</g>
<text x="470" y="107" fill="white" font-size="13" font-weight="700" text-anchor="middle">Gateway</text>
<line x1="470" y1="119" x2="470" y2="133" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrow-down)"/>
<!-- Cloud Server -->
<rect x="720" y="85" width="420" height="34" rx="8" fill="url(#banner-grad)"/>
<g transform="translate(744, 93)" fill="white" stroke="white" stroke-width="1" stroke-linejoin="round">
<path d="M4 12 C2 12 2 9 3.5 8.5 C3.5 6.5 6.5 5.5 8 7 C9 4.5 13 4.5 15 7 C17 6.5 18 8.5 16.5 10.5 C17.5 11 17 12 15 12 Z"/>
</g>
<text x="930" y="107" fill="white" font-size="13" font-weight="700" text-anchor="middle">Cloud Server</text>
<line x1="930" y1="119" x2="930" y2="133" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrow-down)"/>
<!-- ============================================================
LEFT SIDEBAR — Security & Load
============================================================ -->
<rect x="28" y="85" width="195" height="560" rx="10" fill="rgba(251, 113, 133, 0.04)" stroke="#fb7185"
stroke-width="1" stroke-dasharray="6,3"/>
<rect x="43" y="110" width="165" height="52" rx="6" fill="rgba(251, 113, 133, 0.08)"
stroke="rgba(251, 113, 133, 0.3)" stroke-width="0.5"/>
<text x="125" y="141" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Cân Bằng Tải</text>
<rect x="43" y="212" width="165" height="52" rx="6" fill="rgba(251, 113, 133, 0.08)"
stroke="rgba(251, 113, 133, 0.3)" stroke-width="0.5"/>
<text x="125" y="243" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Bộ Dịch Vụ Bảo Mật
</text>
<rect x="43" y="314" width="165" height="52" rx="6" fill="rgba(251, 113, 133, 0.08)"
stroke="rgba(251, 113, 133, 0.3)" stroke-width="0.5"/>
<text x="125" y="345" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Token</text>
<rect x="43" y="416" width="165" height="52" rx="6" fill="rgba(251, 113, 133, 0.08)"
stroke="rgba(251, 113, 133, 0.3)" stroke-width="0.5"/>
<text x="125" y="447" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Mã Hóa</text>
<text x="125" y="636" fill="#fb7185" font-size="12" font-weight="700" text-anchor="middle">Bảo Mật &amp; Tải
</text>
<!-- ============================================================
RIGHT SIDEBAR — Platform & System
============================================================ -->
<rect x="1177" y="85" width="195" height="560" rx="10" fill="rgba(251, 191, 36, 0.04)" stroke="#fbbf24"
stroke-width="1" stroke-dasharray="6,3"/>
<rect x="1192" y="110" width="165" height="48" rx="6" fill="rgba(251, 191, 36, 0.08)"
stroke="rgba(251, 191, 36, 0.3)" stroke-width="0.5"/>
<text x="1274" y="139" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Nền Tảng Quản Lý
</text>
<rect x="1192" y="198" width="165" height="48" rx="6" fill="rgba(251, 191, 36, 0.08)"
stroke="rgba(251, 191, 36, 0.3)" stroke-width="0.5"/>
<text x="1274" y="227" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Container</text>
<rect x="1192" y="286" width="165" height="48" rx="6" fill="rgba(251, 191, 36, 0.08)"
stroke="rgba(251, 191, 36, 0.3)" stroke-width="0.5"/>
<text x="1274" y="315" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Triển Khai Nhanh
</text>
<rect x="1192" y="374" width="165" height="48" rx="6" fill="rgba(251, 191, 36, 0.08)"
stroke="rgba(251, 191, 36, 0.3)" stroke-width="0.5"/>
<text x="1274" y="403" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Dịch Vụ Hệ Thống
</text>
<rect x="1192" y="462" width="165" height="52" rx="6" fill="rgba(251, 191, 36, 0.08)"
stroke="rgba(251, 191, 36, 0.3)" stroke-width="0.5"/>
<text x="1274" y="478" fill="#e2e8f0" font-size="9" font-weight="600" text-anchor="middle">Thiết Bị</text>
<text x="1274" y="492" fill="#e2e8f0" font-size="9" font-weight="600" text-anchor="middle">Hệ Thống</text>
<text x="1274" y="506" fill="#e2e8f0" font-size="9" font-weight="600" text-anchor="middle">Giám Sát
</text>
<text x="1274" y="636" fill="#fbbf24" font-size="12" font-weight="700" text-anchor="middle">Nền Tảng &amp; Hệ
Thống
</text>
<!-- ============================================================
CENTER — Layered Architecture (titles below each box)
============================================================ -->
<!-- 1. Tầng Ứng Dụng -->
<rect x="260" y="140" width="880" height="72" rx="6" fill="rgba(34, 211, 238, 0.06)" stroke="#22d3ee"
stroke-width="0.8" stroke-dasharray="4,4"/>
<rect x="266" y="154" width="205" height="40" rx="5" fill="rgba(34, 211, 238, 0.08)" stroke="#22d3ee"
stroke-width="0.5"/>
<text x="368" y="179" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Đăng Ký &amp; Quản Lý
Client
</text>
<rect x="487" y="154" width="205" height="40" rx="5" fill="rgba(34, 211, 238, 0.08)" stroke="#22d3ee"
stroke-width="0.5"/>
<text x="589" y="179" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">API Mở Dữ Liệu</text>
<rect x="708" y="154" width="205" height="40" rx="5" fill="rgba(34, 211, 238, 0.08)" stroke="#22d3ee"
stroke-width="0.5"/>
<text x="810" y="179" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Phân Phối Dữ Liệu
</text>
<rect x="929" y="154" width="205" height="40" rx="5" fill="rgba(34, 211, 238, 0.08)" stroke="#22d3ee"
stroke-width="0.5"/>
<text x="1031" y="179" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Module Mở Rộng
</text>
<text x="700" y="230" fill="#22d3ee" font-size="13" font-weight="700" text-anchor="middle">Tầng Ứng Dụng
</text>
<!-- 2. Tầng Quản Lý -->
<rect x="260" y="260" width="880" height="72" rx="6" fill="rgba(56, 189, 248, 0.06)" stroke="#38bdf8"
stroke-width="0.8" stroke-dasharray="4,4"/>
<rect x="268" y="274" width="160" height="40" rx="5" fill="rgba(56, 189, 248, 0.08)" stroke="#38bdf8"
stroke-width="0.5"/>
<text x="348" y="299" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Lập Lịch Tác Vụ
</text>
<rect x="444" y="274" width="160" height="40" rx="5" fill="rgba(56, 189, 248, 0.08)" stroke="#38bdf8"
stroke-width="0.5"/>
<text x="524" y="299" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Cảnh Báo</text>
<rect x="620" y="274" width="160" height="40" rx="5" fill="rgba(56, 189, 248, 0.08)" stroke="#38bdf8"
stroke-width="0.5"/>
<text x="700" y="299" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Thông Báo</text>
<rect x="796" y="274" width="160" height="40" rx="5" fill="rgba(56, 189, 248, 0.08)" stroke="#38bdf8"
stroke-width="0.5"/>
<text x="876" y="299" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Ghi Log</text>
<rect x="972" y="274" width="162" height="40" rx="5" fill="rgba(56, 189, 248, 0.08)" stroke="#38bdf8"
stroke-width="0.5"/>
<text x="1053" y="299" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Tin Nhắn</text>
<text x="700" y="350" fill="#38bdf8" font-size="13" font-weight="700" text-anchor="middle">Tầng Quản Lý
</text>
<!-- 3. Tầng Dữ Liệu -->
<rect x="260" y="380" width="880" height="72" rx="6" fill="rgba(129, 140, 248, 0.06)" stroke="#818cf8"
stroke-width="0.8" stroke-dasharray="4,4"/>
<rect x="268" y="394" width="160" height="40" rx="5" fill="rgba(129, 140, 248, 0.08)" stroke="#818cf8"
stroke-width="0.5"/>
<text x="348" y="419" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Lưu Trữ Dữ Liệu
</text>
<rect x="444" y="394" width="160" height="40" rx="5" fill="rgba(129, 140, 248, 0.08)" stroke="#818cf8"
stroke-width="0.5"/>
<text x="524" y="419" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Thao Tác Tương Tác
</text>
<rect x="620" y="394" width="160" height="40" rx="5" fill="rgba(129, 140, 248, 0.08)" stroke="#818cf8"
stroke-width="0.5"/>
<text x="700" y="419" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Thư Viện Thao Tác
Thiết Bị
</text>
<rect x="796" y="394" width="160" height="40" rx="5" fill="rgba(129, 140, 248, 0.08)" stroke="#818cf8"
stroke-width="0.5"/>
<text x="876" y="419" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Quản Lý Dữ Liệu
</text>
<rect x="972" y="394" width="162" height="40" rx="5" fill="rgba(129, 140, 248, 0.08)" stroke="#818cf8"
stroke-width="0.5"/>
<text x="1053" y="419" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Thu Thập Dữ Liệu
</text>
<text x="700" y="470" fill="#818cf8" font-size="13" font-weight="700" text-anchor="middle">Tầng Dữ Liệu</text>
<!-- 4. Tầng Driver -->
<rect x="260" y="500" width="880" height="72" rx="6" fill="rgba(52, 211, 153, 0.06)" stroke="#34d399"
stroke-width="0.8" stroke-dasharray="4,4"/>
<rect x="273" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="339" y="539" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">TCP</text>
<rect x="419" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="485" y="539" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">OPC</text>
<rect x="565" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="631" y="539" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">MODBUS</text>
<rect x="711" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="777" y="539" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">MQTT</text>
<rect x="857" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="923" y="539" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">PLC</text>
<rect x="1003" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="1069" y="539" fill="#e2e8f0" font-size="9" font-weight="600" text-anchor="middle">Mở Rộng Driver...
</text>
<text x="700" y="590" fill="#34d399" font-size="13" font-weight="700" text-anchor="middle">Tầng Driver</text>
<!-- ============================================================
DATA LAYER → DRIVER LAYER CONNECTIONS
============================================================ -->
<line x1="524" y1="434" x2="524" y2="484" stroke="#60a5fa" stroke-width="1.5"/>
<line x1="876" y1="434" x2="876" y2="484" stroke="#60a5fa" stroke-width="1.5"/>
<line x1="339" y1="484" x2="1069" y2="484" stroke="#60a5fa" stroke-width="1"/>
<line x1="339" y1="484" x2="339" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<line x1="485" y1="484" x2="485" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<line x1="631" y1="484" x2="631" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<line x1="777" y1="484" x2="777" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<line x1="923" y1="484" x2="923" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<line x1="1069" y1="484" x2="1069" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<!-- ============================================================
BOTTOM BANNERS
============================================================ -->
<rect x="260" y="611" width="420" height="34" rx="8" fill="url(#banner-grad)"/>
<g transform="translate(282, 619)" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round">
<rect x="2" y="2" width="15" height="14" rx="2"/>
<rect x="6" y="6" width="7" height="6"/>
<line x1="2" y1="6" x2="0" y2="6"/>
<line x1="2" y1="12" x2="0" y2="12"/>
<line x1="17" y1="6" x2="19" y2="6"/>
<line x1="17" y1="12" x2="19" y2="12"/>
<line x1="6" y1="2" x2="6" y2="0"/>
<line x1="13" y1="2" x2="13" y2="0"/>
<line x1="6" y1="16" x2="6" y2="18"/>
<line x1="13" y1="16" x2="13" y2="18"/>
</g>
<text x="470" y="633" fill="white" font-size="12" font-weight="700" text-anchor="middle">Thiết Bị Thực &amp; Ảo
</text>
<line x1="470" y1="611" x2="470" y2="598" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrow-up)"/>
<rect x="720" y="611" width="420" height="34" rx="8" fill="url(#banner-grad)"/>
<g transform="translate(742, 619)" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round">
<circle cx="10" cy="9" r="5.5"/>
<circle cx="10" cy="9" r="1.8" fill="white"/>
<line x1="10" y1="1" x2="10" y2="3"/>
<line x1="10" y1="15" x2="10" y2="17"/>
<line x1="2" y1="9" x2="4" y2="9"/>
<line x1="16" y1="9" x2="18" y2="9"/>
<line x1="4.5" y1="3.5" x2="6" y2="5"/>
<line x1="14" y1="13" x2="15.5" y2="14.5"/>
<line x1="15.5" y1="3.5" x2="14" y2="5"/>
<line x1="6" y1="13" x2="4.5" y2="14.5"/>
</g>
<text x="930" y="633" fill="white" font-size="12" font-weight="700" text-anchor="middle">SDK Phát Triển Nhanh
</text>
<line x1="930" y1="611" x2="930" y2="598" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrow-up)"/>
<!-- ============================================================
LEGEND
============================================================ -->
<text x="60" y="700" fill="white" font-size="11" font-weight="700">Chú Thích</text>
<rect x="60" y="712" width="18" height="10" rx="2" fill="url(#banner-grad)"/>
<text x="84" y="721" fill="#94a3b8" font-size="9">Điểm Vào/Ra</text>
<rect x="210" y="712" width="18" height="10" rx="2" fill="rgba(34, 211, 238, 0.2)" stroke="#22d3ee"
stroke-width="0.5"/>
<text x="234" y="721" fill="#94a3b8" font-size="9">Dịch Vụ / Thành Phần</text>
<line x1="390" y1="717" x2="408" y2="717" stroke="#60a5fa" stroke-width="1.5" marker-end="url(#arrow-data)"/>
<text x="414" y="721" fill="#94a3b8" font-size="9">Luồng Dữ Liệu / Phụ Thuộc</text>
<line x1="570" y1="717" x2="588" y2="717" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrow-down)"/>
<text x="594" y="721" fill="#94a3b8" font-size="9">Truy Cập Ngoài</text>
<rect x="750" y="712" width="18" height="10" rx="2" fill="rgba(251, 113, 133, 0.08)" stroke="#fb7185"
stroke-width="1" stroke-dasharray="4,3"/>
<text x="774" y="721" fill="#94a3b8" font-size="9">Nhóm Dịch Vụ</text>
<rect x="910" y="714" width="8" height="8" rx="2" fill="#22d3ee"/>
<text x="924" y="722" fill="#94a3b8" font-size="9">Ứng Dụng</text>
<rect x="956" y="714" width="8" height="8" rx="2" fill="#38bdf8"/>
<text x="970" y="722" fill="#94a3b8" font-size="9">Q.Lý</text>
<rect x="1012" y="714" width="8" height="8" rx="2" fill="#818cf8"/>
<text x="1026" y="722" fill="#94a3b8" font-size="9">D.Liệu</text>
<rect x="1068" y="714" width="8" height="8" rx="2" fill="#34d399"/>
<text x="1082" y="722" fill="#94a3b8" font-size="9">Driver</text>
<rect x="1132" y="714" width="8" height="8" rx="2" fill="#fb7185"/>
<text x="1146" y="722" fill="#94a3b8" font-size="9">B.Mật</text>
<rect x="1208" y="714" width="8" height="8" rx="2" fill="#fbbf24"/>
<text x="1222" y="722" fill="#94a3b8" font-size="9">N.Tảng</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

docs/public/images/architecture-zh.svg
+338
View File
@@ -0,0 +1,338 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
- Copyright 2016-present the IoT DC3 original author or authors.
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 695">
<defs>
<marker id="arrow-down" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#3b82f6"/>
</marker>
<marker id="arrow-up" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#3b82f6"/>
</marker>
<marker id="arrow-data" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#60a5fa"/>
</marker>
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
</pattern>
<linearGradient id="banner-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#2563eb"/>
<stop offset="100%" stop-color="#3b82f6"/>
</linearGradient>
</defs>
<!-- Background -->
<rect width="100%" height="100%" fill="#020617"/>
<rect width="100%" height="100%" fill="url(#grid)"/>
<g transform="translate(0, -57)">
<!-- ============================================================
TOP BANNERS
============================================================ -->
<!-- Gateway -->
<rect x="260" y="85" width="420" height="34" rx="8" fill="url(#banner-grad)"/>
<g transform="translate(282, 93)" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round">
<circle cx="7" cy="4" r="2.5"/>
<circle cx="7" cy="14" r="2.5"/>
<circle cx="16" cy="9" r="2.5"/>
<line x1="7" y1="6.5" x2="7" y2="11.5"/>
<line x1="9" y1="7.5" x2="14" y2="9"/>
<line x1="9" y1="10.5" x2="14" y2="9"/>
</g>
<text x="470" y="107" fill="white" font-size="13" font-weight="700" text-anchor="middle">网关</text>
<line x1="470" y1="119" x2="470" y2="133" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrow-down)"/>
<!-- Cloud Server -->
<rect x="720" y="85" width="420" height="34" rx="8" fill="url(#banner-grad)"/>
<g transform="translate(744, 93)" fill="white" stroke="white" stroke-width="1" stroke-linejoin="round">
<path d="M4 12 C2 12 2 9 3.5 8.5 C3.5 6.5 6.5 5.5 8 7 C9 4.5 13 4.5 15 7 C17 6.5 18 8.5 16.5 10.5 C17.5 11 17 12 15 12 Z"/>
</g>
<text x="930" y="107" fill="white" font-size="13" font-weight="700" text-anchor="middle">云服务器</text>
<line x1="930" y1="119" x2="930" y2="133" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrow-down)"/>
<!-- ============================================================
LEFT SIDEBAR — Security & Load
============================================================ -->
<rect x="28" y="85" width="195" height="560" rx="10" fill="rgba(251, 113, 133, 0.04)" stroke="#fb7185"
stroke-width="1" stroke-dasharray="6,3"/>
<rect x="43" y="110" width="165" height="52" rx="6" fill="rgba(251, 113, 133, 0.08)"
stroke="rgba(251, 113, 133, 0.3)" stroke-width="0.5"/>
<text x="125" y="141" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">负载均衡</text>
<rect x="43" y="212" width="165" height="52" rx="6" fill="rgba(251, 113, 133, 0.08)"
stroke="rgba(251, 113, 133, 0.3)" stroke-width="0.5"/>
<text x="125" y="243" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">安全服务套件
</text>
<rect x="43" y="314" width="165" height="52" rx="6" fill="rgba(251, 113, 133, 0.08)"
stroke="rgba(251, 113, 133, 0.3)" stroke-width="0.5"/>
<text x="125" y="345" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">Token</text>
<rect x="43" y="416" width="165" height="52" rx="6" fill="rgba(251, 113, 133, 0.08)"
stroke="rgba(251, 113, 133, 0.3)" stroke-width="0.5"/>
<text x="125" y="447" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">加密</text>
<text x="125" y="636" fill="#fb7185" font-size="12" font-weight="700" text-anchor="middle">安全与负载
</text>
<!-- ============================================================
RIGHT SIDEBAR — Platform & System
============================================================ -->
<rect x="1177" y="85" width="195" height="560" rx="10" fill="rgba(251, 191, 36, 0.04)" stroke="#fbbf24"
stroke-width="1" stroke-dasharray="6,3"/>
<rect x="1192" y="110" width="165" height="48" rx="6" fill="rgba(251, 191, 36, 0.08)"
stroke="rgba(251, 191, 36, 0.3)" stroke-width="0.5"/>
<text x="1274" y="139" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">管理平台
</text>
<rect x="1192" y="198" width="165" height="48" rx="6" fill="rgba(251, 191, 36, 0.08)"
stroke="rgba(251, 191, 36, 0.3)" stroke-width="0.5"/>
<text x="1274" y="227" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">容器</text>
<rect x="1192" y="286" width="165" height="48" rx="6" fill="rgba(251, 191, 36, 0.08)"
stroke="rgba(251, 191, 36, 0.3)" stroke-width="0.5"/>
<text x="1274" y="315" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">快速部署
</text>
<rect x="1192" y="374" width="165" height="48" rx="6" fill="rgba(251, 191, 36, 0.08)"
stroke="rgba(251, 191, 36, 0.3)" stroke-width="0.5"/>
<text x="1274" y="403" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">系统服务
</text>
<rect x="1192" y="462" width="165" height="52" rx="6" fill="rgba(251, 191, 36, 0.08)"
stroke="rgba(251, 191, 36, 0.3)" stroke-width="0.5"/>
<text x="1274" y="478" fill="#e2e8f0" font-size="9" font-weight="600" text-anchor="middle">设备</text>
<text x="1274" y="492" fill="#e2e8f0" font-size="9" font-weight="600" text-anchor="middle">系统</text>
<text x="1274" y="506" fill="#e2e8f0" font-size="9" font-weight="600" text-anchor="middle">监控管理
</text>
<text x="1274" y="636" fill="#fbbf24" font-size="12" font-weight="700" text-anchor="middle">平台与系统
</text>
<!-- ============================================================
CENTER — Layered Architecture (titles below each box)
============================================================ -->
<!-- 1. 应用层 -->
<rect x="260" y="140" width="880" height="72" rx="6" fill="rgba(34, 211, 238, 0.06)" stroke="#22d3ee"
stroke-width="0.8" stroke-dasharray="4,4"/>
<rect x="266" y="154" width="205" height="40" rx="5" fill="rgba(34, 211, 238, 0.08)" stroke="#22d3ee"
stroke-width="0.5"/>
<text x="368" y="179" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">客户端注册与管理
</text>
<rect x="487" y="154" width="205" height="40" rx="5" fill="rgba(34, 211, 238, 0.08)" stroke="#22d3ee"
stroke-width="0.5"/>
<text x="589" y="179" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">数据开放API</text>
<rect x="708" y="154" width="205" height="40" rx="5" fill="rgba(34, 211, 238, 0.08)" stroke="#22d3ee"
stroke-width="0.5"/>
<text x="810" y="179" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">数据分发
</text>
<rect x="929" y="154" width="205" height="40" rx="5" fill="rgba(34, 211, 238, 0.08)" stroke="#22d3ee"
stroke-width="0.5"/>
<text x="1031" y="179" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">扩展模块
</text>
<text x="700" y="230" fill="#22d3ee" font-size="13" font-weight="700" text-anchor="middle">应用层
</text>
<!-- 2. 管理层 -->
<rect x="260" y="260" width="880" height="72" rx="6" fill="rgba(56, 189, 248, 0.06)" stroke="#38bdf8"
stroke-width="0.8" stroke-dasharray="4,4"/>
<rect x="268" y="274" width="160" height="40" rx="5" fill="rgba(56, 189, 248, 0.08)" stroke="#38bdf8"
stroke-width="0.5"/>
<text x="348" y="299" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">任务调度
</text>
<rect x="444" y="274" width="160" height="40" rx="5" fill="rgba(56, 189, 248, 0.08)" stroke="#38bdf8"
stroke-width="0.5"/>
<text x="524" y="299" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">告警</text>
<rect x="620" y="274" width="160" height="40" rx="5" fill="rgba(56, 189, 248, 0.08)" stroke="#38bdf8"
stroke-width="0.5"/>
<text x="700" y="299" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">通知</text>
<rect x="796" y="274" width="160" height="40" rx="5" fill="rgba(56, 189, 248, 0.08)" stroke="#38bdf8"
stroke-width="0.5"/>
<text x="876" y="299" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">日志</text>
<rect x="972" y="274" width="162" height="40" rx="5" fill="rgba(56, 189, 248, 0.08)" stroke="#38bdf8"
stroke-width="0.5"/>
<text x="1053" y="299" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">消息</text>
<text x="700" y="350" fill="#38bdf8" font-size="13" font-weight="700" text-anchor="middle">管理层
</text>
<!-- 3. 数据层 -->
<rect x="260" y="380" width="880" height="72" rx="6" fill="rgba(129, 140, 248, 0.06)" stroke="#818cf8"
stroke-width="0.8" stroke-dasharray="4,4"/>
<rect x="268" y="394" width="160" height="40" rx="5" fill="rgba(129, 140, 248, 0.08)" stroke="#818cf8"
stroke-width="0.5"/>
<text x="348" y="419" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">数据存储</text>
<rect x="444" y="394" width="160" height="40" rx="5" fill="rgba(129, 140, 248, 0.08)" stroke="#818cf8"
stroke-width="0.5"/>
<text x="524" y="419" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">交互操作
</text>
<rect x="620" y="394" width="160" height="40" rx="5" fill="rgba(129, 140, 248, 0.08)" stroke="#818cf8"
stroke-width="0.5"/>
<text x="700" y="419" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">设备操作库
</text>
<rect x="796" y="394" width="160" height="40" rx="5" fill="rgba(129, 140, 248, 0.08)" stroke="#818cf8"
stroke-width="0.5"/>
<text x="876" y="419" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">数据管理</text>
<rect x="972" y="394" width="162" height="40" rx="5" fill="rgba(129, 140, 248, 0.08)" stroke="#818cf8"
stroke-width="0.5"/>
<text x="1053" y="419" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">数据采集</text>
<text x="700" y="470" fill="#818cf8" font-size="13" font-weight="700" text-anchor="middle">数据层</text>
<!-- 4. 驱动层 -->
<rect x="260" y="500" width="880" height="72" rx="6" fill="rgba(52, 211, 153, 0.06)" stroke="#34d399"
stroke-width="0.8" stroke-dasharray="4,4"/>
<rect x="273" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="339" y="539" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">TCP</text>
<rect x="419" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="485" y="539" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">OPC</text>
<rect x="565" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="631" y="539" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">MODBUS</text>
<rect x="711" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="777" y="539" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">MQTT</text>
<rect x="857" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="923" y="539" fill="#e2e8f0" font-size="10" font-weight="600" text-anchor="middle">PLC</text>
<rect x="1003" y="514" width="132" height="40" rx="5" fill="rgba(52, 211, 153, 0.08)" stroke="#34d399"
stroke-width="0.5"/>
<text x="1069" y="539" fill="#e2e8f0" font-size="9" font-weight="600" text-anchor="middle">驱动扩展...
</text>
<text x="700" y="590" fill="#34d399" font-size="13" font-weight="700" text-anchor="middle">驱动层</text>
<!-- ============================================================
DATA LAYER → DRIVER LAYER CONNECTIONS
============================================================ -->
<line x1="524" y1="434" x2="524" y2="484" stroke="#60a5fa" stroke-width="1.5"/>
<line x1="876" y1="434" x2="876" y2="484" stroke="#60a5fa" stroke-width="1.5"/>
<line x1="339" y1="484" x2="1069" y2="484" stroke="#60a5fa" stroke-width="1"/>
<line x1="339" y1="484" x2="339" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<line x1="485" y1="484" x2="485" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<line x1="631" y1="484" x2="631" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<line x1="777" y1="484" x2="777" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<line x1="923" y1="484" x2="923" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<line x1="1069" y1="484" x2="1069" y2="512" stroke="#60a5fa" stroke-width="1" marker-end="url(#arrow-data)"/>
<!-- ============================================================
BOTTOM BANNERS
============================================================ -->
<rect x="260" y="611" width="420" height="34" rx="8" fill="url(#banner-grad)"/>
<g transform="translate(282, 619)" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round">
<rect x="2" y="2" width="15" height="14" rx="2"/>
<rect x="6" y="6" width="7" height="6"/>
<line x1="2" y1="6" x2="0" y2="6"/>
<line x1="2" y1="12" x2="0" y2="12"/>
<line x1="17" y1="6" x2="19" y2="6"/>
<line x1="17" y1="12" x2="19" y2="12"/>
<line x1="6" y1="2" x2="6" y2="0"/>
<line x1="13" y1="2" x2="13" y2="0"/>
<line x1="6" y1="16" x2="6" y2="18"/>
<line x1="13" y1="16" x2="13" y2="18"/>
</g>
<text x="470" y="633" fill="white" font-size="12" font-weight="700" text-anchor="middle">真实与虚拟设备
</text>
<line x1="470" y1="611" x2="470" y2="598" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrow-up)"/>
<rect x="720" y="611" width="420" height="34" rx="8" fill="url(#banner-grad)"/>
<g transform="translate(742, 619)" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round">
<circle cx="10" cy="9" r="5.5"/>
<circle cx="10" cy="9" r="1.8" fill="white"/>
<line x1="10" y1="1" x2="10" y2="3"/>
<line x1="10" y1="15" x2="10" y2="17"/>
<line x1="2" y1="9" x2="4" y2="9"/>
<line x1="16" y1="9" x2="18" y2="9"/>
<line x1="4.5" y1="3.5" x2="6" y2="5"/>
<line x1="14" y1="13" x2="15.5" y2="14.5"/>
<line x1="15.5" y1="3.5" x2="14" y2="5"/>
<line x1="6" y1="13" x2="4.5" y2="14.5"/>
</g>
<text x="930" y="633" fill="white" font-size="12" font-weight="700" text-anchor="middle">SDK快速开发
</text>
<line x1="930" y1="611" x2="930" y2="598" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrow-up)"/>
<!-- ============================================================
LEGEND
============================================================ -->
<text x="60" y="700" fill="white" font-size="11" font-weight="700">图例</text>
<rect x="60" y="712" width="18" height="10" rx="2" fill="url(#banner-grad)"/>
<text x="84" y="721" fill="#94a3b8" font-size="9">入口 / 出口</text>
<rect x="210" y="712" width="18" height="10" rx="2" fill="rgba(34, 211, 238, 0.2)" stroke="#22d3ee"
stroke-width="0.5"/>
<text x="234" y="721" fill="#94a3b8" font-size="9">服务 / 组件</text>
<line x1="390" y1="717" x2="408" y2="717" stroke="#60a5fa" stroke-width="1.5" marker-end="url(#arrow-data)"/>
<text x="414" y="721" fill="#94a3b8" font-size="9">数据 / 依赖流</text>
<line x1="570" y1="717" x2="588" y2="717" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrow-down)"/>
<text x="594" y="721" fill="#94a3b8" font-size="9">外部访问</text>
<rect x="750" y="712" width="18" height="10" rx="2" fill="rgba(251, 113, 133, 0.08)" stroke="#fb7185"
stroke-width="1" stroke-dasharray="4,3"/>
<text x="774" y="721" fill="#94a3b8" font-size="9">服务组</text>
<rect x="910" y="714" width="8" height="8" rx="2" fill="#22d3ee"/>
<text x="924" y="722" fill="#94a3b8" font-size="9">应用</text>
<rect x="956" y="714" width="8" height="8" rx="2" fill="#38bdf8"/>
<text x="970" y="722" fill="#94a3b8" font-size="9">管理</text>
<rect x="1012" y="714" width="8" height="8" rx="2" fill="#818cf8"/>
<text x="1026" y="722" fill="#94a3b8" font-size="9">数据</text>
<rect x="1068" y="714" width="8" height="8" rx="2" fill="#34d399"/>
<text x="1082" y="722" fill="#94a3b8" font-size="9">驱动</text>
<rect x="1132" y="714" width="8" height="8" rx="2" fill="#fb7185"/>
<text x="1146" y="722" fill="#94a3b8" font-size="9">安全</text>
<rect x="1208" y="714" width="8" height="8" rx="2" fill="#fbbf24"/>
<text x="1222" y="722" fill="#94a3b8" font-size="9">平台</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

docs/public/images/screenshot-ai.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 331 KiB

docs/public/images/screenshot-device.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 KiB

docs/public/images/screenshot-overview.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 278 KiB