外部服務 (External Services)
資料庫層 (Database Layer)
模型層 (Model Layer)
服務層 (Service Layer)
控制器層 (Controller Layer)
API 層 (API Layer)
前端層 (Frontend Layer)
資料表
核心模型
電商模型
認證控制器
管理控制器
前台控制器
Laravel 路由
中間件
Vue.js 應用
前端功能模組
Vite 建構工具
Mock Service Worker
API 模擬
SQLite 資料庫
users
products
product_images
orders
order_items
cart_items
payments
payment_notifications
permissions
roles
Order
訂單模型
OrderItem
訂單項目模型
CartItem
購物車項目模型
Payment
付款模型
PaymentNotification
付款通知模型
User
用戶模型
Product
商品模型
ProductImage
商品圖片模型
LoginService
登入邏輯
RegisterService
註冊邏輯
ProductService
商品業務邏輯
ReportService
報表業務邏輯
Ec\ProductController
商品展示
Admin\ProductController
商品管理
Admin\ReportController
報表管理
AuthController
登入/註冊/登出
Laravel Sanctum
認證中間件
權限中間件
permission:*
API 路由
routes/api.php
認證路由
routes/api/auth.php
管理路由
routes/api/admin.php
購物車路由
routes/api/cart.php
認證頁面
login.vue, register.vue
管理頁面
admin-page.vue
電商頁面
ecommerce/*
儀表板
dashboards/*
用戶頁面
user/*
Vue 3 + Vuetify
頁面組件
UI 組件
Pinia 狀態管理
Vue Router