全棧架構藍圖

全棧架構藍圖 —— 作者：王教成#

Kotlin 跨平台全棧架構藍圖：縱向 10 模組 × 橫向 12 層的 SpringBoot+MySQL + 多平台實踐#

1. 伺服器端 Database#

L0 業務生態層：確定資料庫在業務生態中的核心功能（如電商平台的訂單數據中樞）
L1 系統層：設計 MySQL 高可用架構（主從集群+讀寫分離+自動故障轉移）
L2 子系統層：按業務域劃分物理資料庫（用戶庫/訂單庫/庫存庫）並定義數據同步機制
L3 安全架構層：實施傳輸層加密（TLS1.3）和列級數據加密（AES-256）
L4 模組層：定義核心模組結構（用戶管理模組表集合及關係）
L5 包結構層：組織版本化遷移腳本目錄（/database/migrations/V1.0__core_schema.sql）
L6 類與介面層：設計表結構（字段類型/主外鍵/索引策略）
L7 方法層：編寫存儲過程實現業務邏輯（如計算用戶消費等級）
L8 代碼塊層：構建事務控制塊（START TRANSACTION; UPDATE; INSERT; COMMIT;）
L9 語句層：執行 DDL 定義語句（CREATE TABLE users(id BIGINT AUTO_INCREMENT PRIMARY KEY)）
L10 表達式層：優化查詢表達式（WHERE status = 'ACTIVE' AND last_login > NOW() - INTERVAL 30 DAY）
L11 原子操作層：設置約束條件（UNIQUE(email), NOT NULL(username)）

2. 伺服器端 Entity#

L0 業務生態層：無
L1 系統層：配置 Hibernate 二級快取及批量處理參數（hibernate.cache.use_second_level_cache=true）
L2 子系統層：按業務域分包（com.ecommerce.user.entity 包含User/Profile實體）
L3 安全架構層：實施字段級加密（@Convert(converter = PasswordEncryptor.class)）
L4 模組層：構建 domain 模組包含實體掃描路徑（@EntityScan(basePackages = "com.ecommerce")）
L5 包結構層：組織實體分層包（.entity/.embeddable/.enums）
L6 類與介面層：定義 JPA 實體類（@Entity @Table(name="users") class User）
L7 方法層：實現審計回調方法（@LastModifiedDate private LocalDateTime updatedAt）
L8 代碼塊層：構建字段校驗塊（if (email.isEmpty()) throw new InvalidEntityException()）
L9 語句層：聲明映射關係（@OneToMany(mappedBy = "user", cascade = CascadeType.ALL)）
L10 表達式層：配置懶加載策略（@ManyToOne(fetch = FetchType.LAZY)）
L11 原子操作層：生成equals()/hashCode()方法

3. 伺服器端 Repository#

L0 業務生態層：無
L1 系統層：配置 Spring Data JPA 查詢策略（方法名解析/分頁配置）
L2 子系統層：按聚合根分包（com.ecommerce.order.repository 包含Order/LineItem）
L3 安全架構層：實現行級安全過濾（@PostFilter("hasPermission(filterObject, 'READ')")）
L4 模組層：創建 repository 模組包含 JPA 倉庫掃描（@EnableJpaRepositories）
L5 包結構層：組織倉庫分層（.repository/.custom/.projection）
L6 類與介面層：聲明倉庫介面（interface OrderRepository extends JpaRepository<Order, Long>）
L7 方法層：定義動態查詢方法（Page<Order> findByUserId(Long userId, Pageable pageable)）
L8 代碼塊層：構建@Query註解塊（@Query("SELECT o FROM Order o WHERE o.status = :status")）
L9 語句層：聲明派生查詢（List<Order> findByCreatedAtBetween(LocalDate start, LocalDate end)）
L10 表達式層：使用 SpEL 安全表達式（@Query("SELECT u FROM #{#entityName} u WHERE u.active = true")）
L11 原子操作層：執行flush操作（saveAndFlush(entity)）

4. 伺服器端 Service#

L0 業務生態層：無
L1 系統層：集成分佈式事務（Seata AT模式+回滾日誌）
L2 子系統層：按業務能力劃分服務邊界（PaymentService/InventoryService）
L3 安全架構層：實施方法級權限控制（@PreAuthorize("hasRole('ADMIN') or #userId == principal.id")）
L4 模組層：創建 service 模組配置事務管理器（@EnableTransactionManagement）
L5 包結構層：組織服務分層（.api/.impl/.event）
L6 類與介面層：實現服務類（@Service @Transactional(propagation=REQUIRED) class OrderServiceImpl）
L7 方法層：編寫核心業務邏輯（Order createOrder(Cart cart) 扣減庫存生成訂單發消息）
L8 代碼塊層：構建事務控制塊（@Transactional(timeout=30, rollbackFor=BusinessException.class)）
L9 語句層：觸發領域事件（applicationEventPublisher.publishEvent(new OrderCreatedEvent(this))）
L10 表達式層：使用 EL 表達業務規則（if (user.getLevel() >= VIP_LEVEL) applyDiscount(15%)）
L11 原子操作層：執行空安全調用（user?.address ?: throw AddressRequiredException()）

5. 伺服器端 Controller#

L0 業務生態層：無
L1 系統層：制定 OpenAPI 3.0 規範並配置 Swagger（@OpenAPIDefinition）
L2 子系統層：設置 API 網關路由規則（/order-service 路由到訂單集群）
L3 安全架構層：實施 JWT 認證（@AuthenticationPrincipal JwtUserDetails）
L4 模組層：創建 web 模組配置消息轉換器（HttpMessageConverters）
L5 包結構層：組織控制器分包（.controller.user/.controller.order）
L6 類與介面層：定義 RestController（@RestController @RequestMapping("/api/orders")）
L7 方法層：聲明端點方法（@PostMapping @ResponseStatus(CREATED) fun createOrder()）
L8 代碼塊層：構建參數校驗塊（@Valid @RequestBody OrderCreateDTO dto, BindingResult result）
L9 語句層：返回標準化響應（ResponseEntity.status(CREATED).body(OrderResponse.from(order))）
L10 表達式層：使用 MapStruct 轉換表達式（OrderMapper.INSTANCE.toDTO(domainEntity)）
L11 原子操作層：設置響應頭（headers.setLocation(ServletUriComponentsBuilder.fromCurrentRequest())）

6. 客戶端數據源 (多平台)#

L0 業務生態層：無
L1 系統層：配置 Ktor Client 多平台網絡棧（HttpClient + 30s超時 + GraphQL支持）
L2 子系統層：無
L3 安全架構層：實施統一認證機制（JWT自動刷新 + 平台特定安全存儲）
L4 模組層：構建network模組封裝跨平台網絡請求
L5 包結構層：組織數據源分層（.graphql/.api/.interceptor）
L6 類與介面層：定義通用數據源介面（interface ApiService { suspend fun query<T>(query: String): T }）
L7 方法層：聲明響應式數據流（fun getProducts(): Flow<ProductDTO>）
L8 代碼塊層：構建指數退避重試邏輯（retryWhen { e, attempt -> if (e is TimeoutCancellationException && attempt < 3) }）
L9 語句層：執行跨平台網絡調用（withContext(Dispatchers.Default) { apiService.fetchData() }）
L10 表達式層：使用 kotlinx.serialization 解析（Json.decodeFromString<T>(response)）
L11 原子操作層：添加平台識別頭（headers.append("Platform", Platform.platformName)）

7. 客戶端存儲層 (多平台)#

L0 業務生態層：無
L1 系統層：設計統一快取策略（內存快取 + SqlDelight持久化 + 自動同步）
L2 子系統層：無
L3 安全架構層：實施本地數據加密（平台特定安全存儲）
L4 模組層：創建storage模組實現數據協調
L5 包結構層：組織存儲實現（.cache/.database/.preference）
L6 類與介面層：實現智能快取倉庫（class SmartCacheRepository<T>(...)）
L7 方法層：編寫混合數據獲取（先讀本地快取，無則網絡請求並更新快取）
L8 代碼塊層：構建快取過期控制（if (lastUpdated.isBefore(now - 5.minutes)) refreshRemote()）
L9 語句層：執行跨平台數據庫查詢（db.userQueries.getById(id).executeAsOneOrNull()）
L10 表達式層：使用擴展函數轉換（networkDTO.toDomainEntity()）
L11 原子操作層：發射數據到 StateFlow（_dataState.emit(Result.success(data))）

8. 客戶端業務邏輯 (多平台)#

L0 業務生態層：無
L1 系統層：制定跨平台用例規範（純Kotlin實現 + 單一職責原則）
L2 子系統層：無
L3 安全架構層：實施統一權限檢查（if (!sessionManager.hasPermission(required)) throw PermissionDenied()）
L4 模組層：定義domain模組包含業務規則
L5 包結構層：組織用例包（.usecase.user/.usecase.order）
L6 類與介面層：創建平台無關用例類（class CheckoutUseCase @Inject constructor(val repo: CartRepo)）
L7 方法層：實現核心業務邏輯（suspend operator fun invoke()：驗證庫存→計算總額→提交訂單）
L8 代碼塊層：構建錯誤轉換塊（catch { e -> when(e) { is NetworkException -> ... } }）
L9 語句層：調用倉庫方法（val cart = cartRepo.getCart().first()）
L10 表達式層：使用 require 校驗參數（require(cart.items.isNotEmpty())）
L11 原子操作層：構建領域對象（Order.createFromCart(cart, userId)）

9. 客戶端狀態管理 (多平台)#

L0 業務生態層：無
L1 系統層：配置統一狀態管理（StateFlow + MVI模式）
L2 子系統層：無
L3 安全架構層：實現會話過期處理（catch (e: UnauthorizedException) { _state.value = SessionExpired }）
L4 模組層：創建presentation模組定義狀態容器
L5 包結構層：組織 ViewModel 分包（.viewmodel.user/.viewmodel.product）
L6 類與介面層：定義通用狀態容器（class UserViewModel : KoinComponent { ... }）
L7 方法層：編寫狀態更新方法（fun loadData() { viewModelScope.launch { ... } }）
L8 代碼塊層：構建狀態轉換塊（private fun mapToUiState(data: T): UiState）
L9 語句層：更新 UI 狀態（_state.update { it.copy(data = data, loading = false) }）
L10 表達式層：使用密封類狀態轉換（when(result) { is Success -> UiState.Data(...) }）
L11 原子操作層：調用 UseCase 方法（val result = getUserUseCase(userId)）

10. 客戶端 UI 層 (平台特定實現)#

L0 業務生態層：設計統一用戶旅程路徑（註冊→登錄→主頁→詳情→支付）
L1 系統層：採用平台 UI 框架（Android: Jetpack Compose/iOS: SwiftUI/Web: Compose for Web）
L2 子系統層：無
L3 安全架構層：實現界面防劫持（Android: onPause模糊/iOS: willResignActive模糊/Web: blur事件處理）
L4 模組層：構建ui主模組含主題配置
L5 包結構層：組織 UI 組件包（.screen.login/.screen.cart/.component）
L6 類與介面層：定義平台 UI 組件（Android: @Composable fun/iOS: struct View: View/Web: fun Render()）
L7 方法層：編寫事件處理函數（val onLogin = { viewModel.login(credentials) }）
L8 代碼塊層：構建狀態響應渲染塊（when(state) { Loading -> 顯示加載指示器 }）
L9 語句層：組合 UI 元素（Android: Column { }/iOS: VStack { }/Web: Div { }）
L10 表達式層：使用動畫表達式（Android: AnimatedVisibility/iOS: withAnimation/Web: animate {}）
L11 原子操作層：設置文本屬性（Android: Text(...)/iOS: Text(...)/Web: Span { Text(...) }）

Kotlin 全棧架構藍圖：縱向 10 模組 × 橫向 12 層的 SpringBoot+MySQL+Android 實踐#

1. 伺服器端 Database#

2. 伺服器端 Entity#

3. 伺服器端 Repository#

4. 伺服器端 Service#

5. 伺服器端 Controller#

6. 客戶端數據源（Android）#

L0 業務生態層：無
L1 系統層：配置 Retrofit（GsonConverterFactory + 30s超時 + 快取控制）
L2 子系統層：無
L3 安全架構層：實施證書綁定（CertificatePinner.Builder()）
L4 模組層：構建data-source模組封裝網絡請求
L5 包結構層：組織數據源分層（.api/.retrofit/.local）
L6 類與介面層：定義 Retrofit 介面（@GET("users/{id}") suspend fun getUser(@Path("id") id: Long): UserDTO）
L7 方法層：聲明流式數據獲取（fun getProducts(): Flow<ProductDTO>）
L8 代碼塊層：構建重試邏輯塊（retryWhen { e, attempt -> if (e is SocketTimeoutException && attempt < 3) }）
L9 語句層：執行網絡調用（withContext(Dispatchers.IO) { apiService.fetchData() }）
L10 表達式層：使用 kotlinx.serialization 解析（Json.decodeFromString<UserDTO>(response)）
L11 原子操作層：添加認證頭（request.addHeader("Authorization", "Bearer ${tokenStorage.accessToken}")）

7. 客戶端 Repository（Android）#

L0 業務生態層：無
L1 系統層：設計智能快取策略（內存快取+Room持久化+自動刷新）
L2 子系統層：無
L3 安全架構層：實施本地數據加密（SQLCipher集成）
L4 模組層：創建 repository 模組實現數據協調
L5 包結構層：組織倉庫實現（.repo_impl.user/.repo_impl.product）
L6 類與介面層：實現倉庫類（class UserDataRepository @Inject constructor(...)）
L7 方法層：編寫混合數據獲取（先讀快取無則網絡請求更新快取）
L8 代碼塊層：構建快取過期控制（if (lastUpdated.isBefore(now - 5.minutes)) refreshRemote()）
L9 語句層：執行 Room 查詢（roomDb.userDao().getById(id).flowOn(Dispatchers.IO)）
L10 表達式層：使用擴展函數轉換（networkDTO.toDomainEntity()）
L11 原子操作層：發射數據到 StateFlow（_userState.emit(Result.success(user))）

8. 客戶端 UseCase（Android）#

L0 業務生態層：無
L1 系統層：制定用例規範（純Kotlin實現+單一職責原則）
L2 子系統層：無
L3 安全架構層：實施權限檢查（if (!sessionManager.isAdmin()) throw PermissionDeniedException()）
L4 模組層：定義 domain 模組包含業務規則
L5 包結構層：組織用例包（.usecase.user/.usecase.product）
L6 類與介面層：創建用例結構體（struct PurchaseUseCase { let repository: OrderRepository }）
L7 方法層：實現核心邏輯（func execute(cart: Cart) async throws：庫存驗證→總價計算→下單）
L8 代碼塊層：構建錯誤轉換（catch { throw DomainErrorMapper.transform($0) }）
L9 語句層：調用倉庫方法（let stock = try await stockRepo.checkAvailability(productId)）
L10 表達式層：使用 require 校驗參數（require(cart.items.count > 0)）
L11 原子操作層：構建領域模型（Order.create(from: cart, user: user)）

9. 客戶端 ViewModel（Android）#

L0 業務生態層：無
L1 系統層：配置 Hilt 依賴注入 ViewModel（@HiltViewModel）
L2 子系統層：無
L3 安全架構層：實現會話過期處理（catch (e: UnauthorizedException) { _state.value = SessionExpired }）
L4 模組層：創建 presentation 模組定義狀態容器
L5 包結構層：組織 ViewModel 分包（.viewmodel.home/.viewmodel.cart）
L6 類與介面層：繼承 ViewModel（class UserViewModel @Inject constructor(val useCase: GetUserUseCase): ViewModel()）
L7 方法層：編寫狀態更新方法（fun loadProfile() { viewModelScope.launch { ... } }）
L8 代碼塊層：構建狀態轉換塊（private fun mapToUiState(user: User): UiState）
L9 語句層：更新 UI 狀態（_profileState.update { it.copy(data = user, loading = false) }）
L10 表達式層：使用密封類轉換（when(result) { is Result.Success -> UiState.Data(...) }）
L11 原子操作層：調用 UseCase 方法（val result = getUserUseCase(userId)）

10. 客戶端 UI 層（Android）#

L0 業務生態層：設計用戶旅程路徑（註冊登錄主頁詳情支付）
L1 系統層：採用 Jetpack Compose 框架配置主題系統（MaterialTheme）
L2 子系統層：無
L3 安全架構層：實現界面防劫持（onPause時應用模糊效果）
L4 模組層：構建 app 主模組含主題配置
L5 包結構層：組織 UI 組件包（.screen.login/.screen.cart/.component.button）
L6 類與介面層：定義可組合函數（@Composable fun HomeScreen(viewModel: HomeViewModel)）
L7 方法層：編寫事件處理函數（val onLogin = { viewModel.login(email, password) }）
L8 代碼塊層：構建條件渲染塊（when(val state = viewModel.state) { is Loading -> CircularProgress() }）
L9 語句層：組合 UI 元素（Column(modifier = Modifier.fillMaxSize()) { Header() }）
L10 表達式層：使用動畫表達式（AnimatedVisibility (visible) { fadeIn() }）
L11 原子操作層：設置文本屬性（Text(text = stringResource(id = R.string.welcome))）

Kotlin+Swift 全棧架構藍圖：縱向 10 模組 × 橫向 12 層的 SpringBoot+MySQL+iOS 實踐#

1. 伺服器端 Database#

2. 伺服器端 Entity#

3. 伺服器端 Repository#

4. 伺服器端 Service#

5. 伺服器端 Controller#

6. 客戶端數據源（iOS）#

L0 業務生態層：無
L1 系統層：配置 URLSession 網絡棧（URLSessionConfiguration.ephemeral+30s超時+URLCache）
L2 子系統層：無
L3 安全架構層：實施 SSL 證書綁定（SecTrust證書鏈校驗）
L4 模組層：構建NetworkService模組封裝網絡層
L5 包結構層：組織數據源分層（Networking/API/Networking/Models/Networking/Interceptors）
L6 類與介面層：定義 API 協議（protocol UserAPIService { func fetchUser(id: Int) async throws -> UserDTO }）
L7 方法層：聲明 Combine 數據流（func productStream() -> AnyPublisher<[ProductDTO], Error>）
L8 代碼塊層：構建重試邏輯（.retry(3) { $0 is URLError }）
L9 語句層：發起網絡請求（let (data, _) = try await URLSession.shared.data(for: request)）
L10 表達式層：使用 Codable 解析（JSONDecoder().decode(UserDTO.self, from: data)）
L11 原子操作層：添加認證頭（request.setValue("Bearer \(token)", forHTTPHeaderField: "Authorization")）

7. 客戶端 Repository（iOS）#

L0 業務生態層：無
L1 系統層：設計混合快取策略（NSCache+CoreData+自動同步）
L2 子系統層：無
L3 安全架構層：實施數據加密（NSFileProtectionComplete文件保護）
L4 模組層：創建Persistence數據協調模組
L5 包結構層：組織倉庫實現（Repositories/UserRepository/Repositories/ProductRepository）
L6 類與介面層：實現倉庫類（struct CoreDataUserRepository: UserRepositoryProtocol）
L7 方法層：編寫快取優先策略（檢查 CoreData→網絡請求→更新快取）
L8 代碼塊層：構建快取刷新控制（if cacheEntry.lastUpdated.timeIntervalSinceNow < -300 { fetchRemote() }）
L9 語句層：執行 CoreData 查詢（try container.viewContext.fetch(NSFetchRequest<UserEntity>(entityName: "User"))）
L10 表達式層：使用映射擴展轉換模型（extension UserDTO { func toManagedObject() }）
L11 原子操作層：保存 CoreData 上下文（container.viewContext.save()）

8. 客戶端 UseCase（iOS）#

L0 業務生態層：無
L1 系統層：制定用例規範（純Swift實現+單一職責）
L2 子系統層：無
L3 安全架構層：實施權限檢查（guard context.authService.isAdmin else { throw AuthError.unauthorized }）
L4 模組層：定義DomainLogic業務規則模組
L5 包結構層：組織用例包（UseCases/CheckoutUseCase/UseCases/UserManagement）
L6 類與介面層：創建用例結構體（struct PurchaseUseCase { let repository: OrderRepository }）
L7 方法層：實現核心邏輯（func execute(cart: Cart) async throws：庫存驗證→總價計算→下單）
L8 代碼塊層：構建錯誤轉換（catch { throw DomainErrorMapper.transform($0) }）
L9 語句層：調用倉庫方法（let stock = try await stockRepo.checkAvailability(productId)）
L10 表達式層：使用 guard 參數校驗（guard cart.items.count > 0 else { throw CartError.empty }）
L11 原子操作層：構建領域模型（Order.create(from: cart, user: user)）

9. 客戶端 ViewModel（iOS）#

L0 業務生態層：無
L1 系統層：配置依賴注入（Swinject容器註冊）
L2 子系統層：無
L3 安全架構層：實現會話過期處理（.onReceive(authService.$sessionState) { if $0 == .expired { handleLogout() } }）
L4 模組層：創建PresentationLogic響應式模組
L5 包結構層：組織 ViewModel（ViewModels/ProfileViewModel/ViewModels/CartViewModel）
L6 類與介面層：定義 ObservableObject（class UserProfileViewModel: ObservableObject { @Published private(set) var state = ViewState.idle }）
L7 方法層：編寫異步加載方法（@MainActor func loadProfile() async { ... }）
L8 代碼塊層：構建狀態轉換器（private func mapResult(_ result: Result<User, Error>)）
L9 語句層：更新 UI 狀態（state = .loaded(user)）
L10 表達式層：使用枚舉關聯值（enum ViewState { case idle, loading, loaded(User), failed(Error) }）
L11 原子操作層：調用 UseCase（self.user = try await useCase.fetchUser(id)）

10. 客戶端 UI 層（iOS）#

L0 業務生態層：設計用戶旅程路徑（註冊登錄主頁詳情支付）
L1 系統層：採用 SwiftUI 框架配置主題（ViewModifier+Environment）
L2 子系統層：無
L3 安全架構層：實現界面防劫持（.onReceive(UIApplication.willResignActiveNotification) { blurScreen() }）
L4 模組層：構建UserInterface視圖組件庫
L5 包結構層：組織視圖分層（Modules/Login/Views/Modules/Checkout/Components）
L6 類與介面層：定義 View 結構體（struct ProductDetailView:View { @StateObject var viewModel: DetailViewModel }）
L7 方法層：編寫事件處理（private func handlePurchase() { Task { await viewModel.purchase() } }）
L8 代碼塊層：構建狀態響應塊（switch viewModel.state { case .loading: ProgressView() }）
L9 語句層：組合視圖元素（VStack { HeaderView(); ProductGallery() }）
L10 表達式層：使用隱式動畫（.animation(.spring, value: viewModel.state)）
L11 原子操作層：設置文本顯示（Text(user.name).font(.system(size: 16, weight: .semibold))）

Kotlin+TypeScript 全棧架構藍圖：縱向 11 層級 × 橫向 10 模組的 SpringBoot+MySQL+Web 實踐#

1. 伺服器端 Database#

2. 伺服器端 Entity#

3. 伺服器端 Repository#

4. 伺服器端 Service#

5. 伺服器端 Controller#

6. 客戶端數據源（Web）#

L0 業務生態層：無
L1 系統層：配置 Axios 實例（baseURL + interceptor + 30s超時）
L2 子系統層：無
L3 安全架構層：實施 CSRF 防護（anti-CSRF token）和 JWT 自動刷新
L4 模組層：構建api-service模組封裝網絡請求
L5 包結構層：組織數據源分層（/services/api/authService.ts，/services/api/productService.ts）
L6 類與介面層：定義 API 服務類（class AuthService { async login(credentials: LoginDTO): Promise<AuthResponse> }）
L7 方法層：聲明響應式數據流（const productObservable = new BehaviorSubject<Product[]>([])）
L8 代碼塊層：構建指數退避重試邏輯（retryWithBackoff(axiosCall, maxRetries = 3)）
L9 語句層：執行 API 請求（return axios.post<AuthResponse>('/auth/login', credentials)）
L10 表達式層：使用 zod 進行響應驗證（AuthResponseSchema.parse(response.data)）
L11 原子操作層：注入認證頭（config.headers.Authorization = 'Bearer ${token}'）

7. 客戶端狀態管理（Web）#

L0 業務生態層：無
L1 系統層：設計 Redux 狀態架構（redux-toolkit + redux-persist）
L2 子系統層：無
L3 安全架構層：實施敏感數據清除（localStorage.clear()）
L4 模組層：創建store模組管理應用狀態
L5 包結構層：組織狀態切片（/store/slices/authSlice.ts，/store/slices/cartSlice.ts）
L6 類與介面層：定義異步 Thunk（export const fetchUser = createAsyncThunk('user/fetch')）
L7 方法層：編寫狀態更新邏輯（reducers: { addToCart: (state, action) => { ... } }）
L8 代碼塊層：構建數據規範化塊（createEntityAdapter<Product>()）
L9 語句層：訂閱狀態變化（store.subscribe(() => { ... })）
L10 表達式層：使用 selector 高效數據選取（const user = useSelector(selectCurrentUser)）
L11 原子操作層：生成 Immer 草稿（produce(state, draft => { draft.cart.items.push(item) })）

8. 客戶端業務邏輯（Web）#

L0 業務生態層：無
L1 系統層：制定用例規範（純TypeScript實現+依賴注入）
L2 子系統層：無
L3 安全架構層：實施權限檢查（if (!hasPermission('admin')) return false;）
L4 模組層：定義features模組封裝業務邏輯
L5 包結構層：組織用例（/features/checkout/useCheckout.ts）
L6 類與介面層：創建業務鉤子（const useCheckout = (cart) => { ... }）
L7 方法層：實現核心邏輯（const placeOrder = async () => { 驗證庫存→計算總額→提交訂單 }）
L8 代碼塊層：構建異常處理塊（try { ... } catch (e) { toast.error(e.message) }）
L9 語句層：調用 API 服務（await OrderService.createOrder(orderData)）
L10 表達式層：使用可選鏈安全取值（const total = cart?.items.reduce(...)）
L11 原子操作層：構建領域對象（Order.create({ cartId, address })）

9. 客戶端 UI 組件（Web）#

L0 業務生態層：無
L1 系統層：採用 React 框架配置主題系統（Material-UI或Chakra UI）
L2 子系統層：無
L3 安全架構層：實施 XSS 防護（react-dangerously-set-html-content）
L4 模組層：構建components模組
L5 包結構層：組織組件結構（/components/checkout/CartSummary.tsx）
L6 類與介面層：定義功能組件（const UserProfile: React.FC<UserProps> = ({ user }) => ...）
L7 方法層：編寫交互邏輯（const handleSubmit = useCallback(() => { ... }, [])）
L8 代碼塊層：構建上下文提供器（<AuthProvider value={user}>{children}</AuthProvider>）
L9 語句層：觸發狀態更新（dispatch(addToCart(product))）
L10 表達式層：使用 styled-components 動態樣式（background: ${({ active }) => active ? 'blue' : 'gray'}）
L11 原子操作層：渲染文本（<Typography variant="h6">{user.name}</Typography>）

10. 客戶端頁面路由（Web）#

L0 業務生態層：設計用戶旅程路徑（/login→/dashboard→/products→/checkout）
L1 系統層：配置 React Router（BrowserRouter + React Suspense）
L2 子系統層：無
L3 安全架構層：實現路由守衛（<RequireAuth><ProtectedPage/></RequireAuth>）
L4 模組層：創建pages模組
L5 包結構層：組織頁面結構（/pages/LoginPage.tsx，/pages/CheckoutPage.tsx）
L6 類與介面層：定義延遲加載組件（const HomePage = lazy(() => import('./HomePage'))）
L7 方法層：處理路由事件（useBeforeUnload(showExitPrompt)）
L8 代碼塊層：構建佈局體系（<MainLayout><Outlet/></MainLayout>）
L9 語句層：聲明路由配置（<Route path="/products" element={<ProductListingPage/>}>）
L10 表達式層：使用路由鉤子（const params = useParams()）
L11 原子操作層：導航跳轉（const navigate = useNavigate(); navigate('/thank-you')）

全棧架構藍圖 —— 作者：王教成#

Kotlin 跨平台全棧架構藍圖：縱向 10 模組 × 橫向 12 層的 SpringBoot+MySQL + 多平台實踐#

1. 伺服器端 Database#

2. 伺服器端 Entity#

3. 伺服器端 Repository#

4. 伺服器端 Service#

5. 伺服器端 Controller#

6. 客戶端 數據源 (多平台)#

7. 客戶端 存儲層 (多平台)#

8. 客戶端 業務邏輯 (多平台)#

9. 客戶端 狀態管理 (多平台)#

10. 客戶端 UI 層 (平台特定實現)#

Kotlin 全棧架構藍圖：縱向 10 模組 × 橫向 12 層的 SpringBoot+MySQL+Android 實踐#

1. 伺服器端 Database#

2. 伺服器端 Entity#

3. 伺服器端 Repository#

4. 伺服器端 Service#

5. 伺服器端 Controller#

6. 客戶端 數據源（Android）#

7. 客戶端 Repository（Android）#

8. 客戶端 UseCase（Android）#

9. 客戶端 ViewModel（Android）#

10. 客戶端 UI 層（Android）#

Kotlin+Swift 全棧架構藍圖：縱向 10 模組 × 橫向 12 層的 SpringBoot+MySQL+iOS 實踐#

1. 伺服器端 Database#

2. 伺服器端 Entity#

3. 伺服器端 Repository#

4. 伺服器端 Service#

5. 伺服器端 Controller#

6. 客戶端 數據源（iOS）#

7. 客戶端 Repository（iOS）#

8. 客戶端 UseCase（iOS）#

9. 客戶端 ViewModel（iOS）#

10. 客戶端 UI 層（iOS）#

Kotlin+TypeScript 全棧架構藍圖：縱向 11 層級 × 橫向 10 模組的 SpringBoot+MySQL+Web 實踐#

1. 伺服器端 Database#

2. 伺服器端 Entity#

3. 伺服器端 Repository#

4. 伺服器端 Service#

5. 伺服器端 Controller#

6. 客戶端 數據源（Web）#

7. 客戶端 狀態管理（Web）#

8. 客戶端 業務邏輯（Web）#

9. 客戶端 UI 組件（Web）#

10. 客戶端 頁面路由（Web）#

6. 客戶端數據源 (多平台)#

7. 客戶端存儲層 (多平台)#

8. 客戶端業務邏輯 (多平台)#

9. 客戶端狀態管理 (多平台)#

6. 客戶端數據源（Android）#

6. 客戶端數據源（iOS）#

6. 客戶端數據源（Web）#

7. 客戶端狀態管理（Web）#

8. 客戶端業務邏輯（Web）#

10. 客戶端頁面路由（Web）#