作者：王教成
Mermaid Loading...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mermaid架構圖</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f7fa;
margin: 0;
padding: 20px;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 20px;
overflow: hidden;
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 25px;
border-bottom: 2px solid #3498db;
padding-bottom: 15px;
}
#mermaid-diagram {
width: 100%;
min-height: 800px;
overflow: auto;
border: 1px solid #e1e4e8;
border-radius: 4px;
background: white;
padding: 15px;
}
.instructions {
background-color: #e3f2fd;
padding: 15px;
border-radius: 4px;
margin: 20px 0;
font-size: 14px;
}
.legend {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 15px 0;
padding: 10px;
background-color: #f8f9fa;
border-radius: 4px;
}
.legend-item {
display: flex;
align-items: center;
margin-right: 15px;
}
.legend-color {
width: 20px;
height: 20px;
border-radius: 3px;
margin-right: 8px;
border: 1px solid #ddd;
}
.note {
font-size: 13px;
color: #666;
font-style: italic;
margin-top: 20px;
}
@media (max-width: 768px) {
.container {
padding: 10px;
}
#mermaid-diagram {
min-height: 600px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>系統架構分層圖</h1>
<div class="instructions">
<p>此圖表展示了伺服器端和客戶端的架構分層，包含以下組件：</p>
<ul>
<li><strong>伺服器端</strong>: Database, Entity, Repository, Service, Controller</li>
<li><strong>客戶端</strong>: DataSource, ClientRepository, UseCase, ViewModel, UI</li>
</ul>
</div>
<div class="legend">
<div class="legend-item">
<div class="legend-color" style="background-color: #FFEC8B;"></div>
<span>Database</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #87CEEB;"></div>
<span>Entity</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #FFB5C5;"></div>
<span>Repository</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #E6E6FA;"></div>
<span>Service</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #C1FFC1;"></div>
<span>Controller</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #B0E0E6;"></div>
<span>DataSource</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #FFDAB9;"></div>
<span>ClientRepository</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #8470FF;"></div>
<span>UseCase</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #FFA07A;"></div>
<span>ViewModel</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #87CEFA;"></div>
<span>UI</span>
</div>
</div>
<div class="mermaid" id="mermaid-diagram">
graph TD
%% ====== 伺服器 ======
subgraph server["伺服器Server"]
subgraph Database["Database"]
DB_L0["Database_業務生態層:業務生態層"]
DB_L1["Database_系統層:MySQL高可用架構"]
DB_L2["Database_子系統層:物理庫劃分"]
DB_L3["Database_安全架構層:TLS+AES加密"]
DB_L4["Database_模組層:模組表結構"]
DB_L5["Database_包結構層:遷移腳本目錄"]
DB_L6["Database_類與介面層:表結構設計"]
DB_L7["Database_方法層:存儲過程"]
DB_L8["Database_程式碼塊層:事務控制塊"]
DB_L9["Database_語句層:DDL語句"]
DB_L10["Database_表達式層:查詢優化"]
DB_L11["Database_原子操作層:原子約束"]
DB_L0 --> DB_L1 --> DB_L2 --> DB_L3 --> DB_L4 --> DB_L5 --> DB_L6 --> DB_L7 --> DB_L8 --> DB_L9 --> DB_L10 --> DB_L11
end
subgraph Entity["Entity"]
ET_L0["Entity_業務生態層:無"]
ET_L1["Entity_系統層:Hibernate快取"]
ET_L2["Entity_子系統層:業務域分包"]
ET_L3["Entity_安全架構層:欄位加密"]
ET_L4["Entity_模組層:實體掃描路徑"]
ET_L5["Entity_包結構層:分層包結構"]
ET_L6["Entity_類與介面層:JPA實體類"]
ET_L7["Entity_方法層:審計回調"]
ET_L8["Entity_程式碼塊層:欄位驗證"]
ET_L9["Entity_語句層:映射關係"]
ET_L10["Entity_表達式層:懶加載策略"]
ET_L11["Entity_原子操作層:equals/hashCode"]
ET_L0 --> ET_L1 --> ET_L2 --> ET_L3 --> ET_L4 --> ET_L5 --> ET_L6 --> ET_L7 --> ET_L8 --> ET_L9 --> ET_L10 --> ET_L11
end
subgraph Repository["Repository"]
RP_L0["Repository_業務生態層:無"]
RP_L1["Repository_系統層:查詢策略"]
RP_L2["Repository_子系統層:聚合根分包"]
RP_L3["Repository_安全架構層:行級安全"]
RP_L4["Repository_模組層:JPA倉庫掃描"]
RP_L5["Repository_包結構層:倉庫分層"]
RP_L6["Repository_類與介面層:倉庫介面"]
RP_L7["Repository_方法層:動態查詢"]
RP_L8["Repository_程式碼塊層:@Query註解塊"]
RP_L9["Repository_語句層:派生查詢"]
RP_L10["Repository_表達式層:SpEL表達式"]
RP_L11["Repository_原子操作層:flush操作"]
RP_L0 --> RP_L1 --> RP_L2 --> RP_L3 --> RP_L4 --> RP_L5 --> RP_L6 --> RP_L7 --> RP_L8 --> RP_L9 --> RP_L10 --> RP_L11
end
subgraph Service["Service"]
SV_L0["Service_業務生態層:無"]
SV_L1["Service_系統層:Seata事務"]
SV_L2["Service_子系統層:服務邊界"]
SV_L3["Service_安全架構層:方法級權限"]
SV_L4["Service_模組層:事務管理"]
SV_L5["Service_包結構層:服務分層"]
SV_L6["Service_類與介面層:服務實現類"]
SV_L7["Service_方法層:業務邏輯"]
SV_L8["Service_程式碼塊層:事務控制塊"]
SV_L9["Service_語句層:領域事件"]
SV_L10["Service_表達式層:EL規則"]
SV_L11["Service_原子操作層:空安全調用"]
SV_L0 --> SV_L1 --> SV_L2 --> SV_L3 --> SV_L4 --> SV_L5 --> SV_L6 --> SV_L7 --> SV_L8 --> SV_L9 --> SV_L10 --> SV_L11
end
subgraph Controller["Controller"]
CT_L0["Controller_業務生態層:無"]
CT_L1["Controller_系統層:OpenAPI規範"]
CT_L2["Controller_子系統層:網關路由"]
CT_L3["Controller_安全架構層:JWT認證"]
CT_L4["Controller_模組層:消息轉換器"]
CT_L5["Controller_包結構層:控制器分包"]
CT_L6["Controller_類與介面層:RestController"]
CT_L7["Controller_方法層:端點方法"]
CT_L8["Controller_程式碼塊層:參數驗證"]
CT_L9["Controller_語句層:標準化響應"]
CT_L10["Controller_表達式層:MapStruct轉換"]
CT_L11["Controller_原子操作層:響應頭設置"]
CT_L0 --> CT_L1 --> CT_L2 --> CT_L3 --> CT_L4 --> CT_L5 --> CT_L6 --> CT_L7 --> CT_L8 --> CT_L9 --> CT_L10 --> CT_L11
end
end
%% ====== 客戶端 ======
subgraph client["客戶端Client"]
subgraph DataSource["DataSource"]
DS_L0["DataSource_業務生態層:無"]
DS_L1["DataSource_系統層:Retrofit配置"]
DS_L2["DataSource_子系統層:無"]
DS_L3["DataSource_安全架構層:證書綁定"]
DS_L4["DataSource_模組層:網路模組"]
DS_L5["DataSource_包結構層:資料源分層"]
DS_L6["DataSource_類與介面層:Retrofit介面"]
DS_L7["DataSource_方法層:流式資料"]
DS_L8["DataSource_程式碼塊層:重試邏輯"]
DS_L9["DataSource_語句層:網路調用"]
DS_L10["DataSource_表達式層:JSON解析"]
DS_L11["DataSource_原子操作層:認證頭"]
DS_L0 --> DS_L1 --> DS_L2 --> DS_L3 --> DS_L4 --> DS_L5 --> DS_L6 --> DS_L7 --> DS_L8 --> DS_L9 --> DS_L10 --> DS_L11
end
subgraph ClientRepository["ClientRepository"]
CR_L0["ClientRepository_業務生態層:無"]
CR_L1["ClientRepository_系統層:快取策略"]
CR_L2["ClientRepository_子系統層:無"]
CR_L3["ClientRepository_安全架構層:SQLCipher加密"]
CR_L4["ClientRepository_模組層:資料協調"]
CR_L5["ClientRepository_包結構層:倉庫實現"]
CR_L6["ClientRepository_類與介面層:倉庫類"]
CR_L7["ClientRepository_方法層:混合資料獲取"]
CR_L8["ClientRepository_程式碼塊層:快取過期"]
CR_L9["ClientRepository_語句層:Room查詢"]
CR_L10["ClientRepository_表達式層:資料轉換"]
CR_L11["ClientRepository_原子操作層:StateFlow發射"]
CR_L0 --> CR_L1 --> CR_L2 --> CR_L3 --> CR_L4 --> CR_L5 --> CR_L6 --> CR_L7 --> CR_L8 --> CR_L9 --> CR_L10 --> CR_L11
end
subgraph UseCase["UseCase"]
UC_L0["UseCase_業務生態層:無"]
UC_L1["UseCase_系統層:用例規範"]
UC_L2["UseCase_子系統層:無"]
UC_L3["UseCase_安全架構層:權限檢查"]
UC_L4["UseCase_模組層:業務規則"]
UC_L5["UseCase_包結構層:用例包"]
UC_L6["UseCase_類與介面層:用例類"]
UC_L7["UseCase_方法層:核心邏輯"]
UC_L8["UseCase_程式碼塊層:錯誤轉換"]
UC_L9["UseCase_語句層:倉庫調用"]
UC_L10["UseCase_表達式層:參數驗證"]
UC_L11["UseCase_原子操作層:構建領域對象"]
UC_L0 --> UC_L1 --> UC_L2 --> UC_L3 --> UC_L4 --> UC_L5 --> UC_L6 --> UC_L7 --> UC_L8 --> UC_L9 --> UC_L10 --> UC_L11
end
subgraph ViewModel["ViewModel"]
VM_L0["ViewModel_業務生態層:無"]
VM_L1["ViewModel_系統層:Hilt注入"]
VM_L2["ViewModel_子系統層:無"]
VM_L3["ViewModel_安全架構層:會話處理"]
VM_L4["ViewModel_模組層:狀態容器"]
VM_L5["ViewModel_包結構層:ViewModel分包"]
VM_L6["ViewModel_類與介面層:ViewModel類"]
VM_L7["ViewModel_方法層:狀態更新"]
VM_L8["ViewModel_程式碼塊層:狀態轉換"]
VM_L9["ViewModel_語句層:UI狀態更新"]
VM_L10["ViewModel_表達式層:密封類轉換"]
VM_L11["ViewModel_原子操作層:UseCase調用"]
VM_L0 --> VM_L1 --> VM_L2 --> VM_L3 --> VM_L4 --> VM_L5 --> VM_L6 --> VM_L7 --> VM_L8 --> VM_L9 --> VM_L10 --> VM_L11
end
subgraph UI["UI"]
UI_L0["UI_業務生態層:用戶旅程"]
UI_L1["UI_系統層:Compose框架"]
UI_L2["UI_子系統層:無"]
UI_L3["UI_安全架構層:防劫持"]
UI_L4["UI_模組層:主題模組"]
UI_L5["UI_包結構層:組件包"]
UI_L6["UI_類與介面層:組合函數"]
UI_L7["UI_方法層:事件處理"]
UI_L8["UI_程式碼塊層:條件渲染"]
UI_L9["UI_語句層:UI組合"]
UI_L10["UI_表達式層:動畫"]
UI_L11["UI_原子操作層:文本屬性"]
UI_L0 --> UI_L1 --> UI_L2 --> UI_L3 --> UI_L4 --> UI_L5 --> UI_L6 --> UI_L7 --> UI_L8 --> UI_L9 --> UI_L10 --> UI_L11
end
end
%% ====== 關鍵依賴 ======
%% 伺服器內部依賴
DB_L11 --> RP_L6
ET_L11 --> RP_L6
RP_L11 --> SV_L7
SV_L11 --> CT_L7
%% 客戶端內部依賴
DS_L11 --> CR_L7
CR_L11 --> UC_L9
UC_L11 --> VM_L11
VM_L11 --> UI_L7
%% 跨端通信
DS_L6 --> CT_L7
%% 安全體系
DB_L3 --> ET_L3
CT_L3 --> DS_L3
SV_L3 --> RP_L3
VM_L3 --> UI_L3
%% 原子操作
DB_L11 --> RP_L11
ET_L11 --> RP_L9
SV_L11 --> CT_L11
CR_L11 --> UC_L11
%% ====== 樣式設計 ======
%% 定義
classDef server fill:#FFD6E7,stroke:#FF2D95
classDef client fill:#D6F0FF,stroke:#00A1FF
classDef Database fill:#FFEC8B,stroke:#FF8C00
classDef Entity fill:#87CEEB,stroke:#1E90FF
classDef Repository fill:#FFB5C5,stroke:#FF1493
classDef Service fill:#E6E6FA,stroke:#9370DB
classDef Controller fill:#C1FFC1,stroke:#32CD32
classDef DataSource fill:#B0E0E6,stroke:#1E90FF
classDef ClientRepository fill:#FFDAB9,stroke:#FF6347
classDef UseCase fill:#8470FF,stroke:#0000FF
classDef ViewModel fill:#FFA07A,stroke:#CD853F
classDef UI fill:#87CEFA,stroke:#4169E1
%% 應用
class server server
class client client
class Database Database
class Entity Entity
class Repository Repository
class Service Service
class Controller Controller
class DataSource DataSource
class ClientRepository ClientRepository
class UseCase UseCase
class ViewModel ViewModel
class UI UI
</div>
<div class="note">
注意: 此圖表使用Mermaid.js渲染。如果圖表未正確顯示，請確保已加載Mermaid庫。
</div>
</div>
<script>
// 初始化Mermaid圖表
mermaid.initialize({
startOnLoad: true,
theme: 'default',
securityLevel: 'loose',
flowchart: {
useMaxWidth: false,
htmlLabels: true,
curve: 'basis'
},
themeCSS: `
.node rect {
stroke-width: 1.5px;
stroke-opacity: 0.8;
rx: 5px;
ry: 5px;
}
.edgePath path {
stroke: #555;
stroke-width: 1.5px;
}
`
});
</script>
</body>
</html>