# ๐Ÿ—๏ธ System Design โ€” ็™พไธ‡็บงๅนถๅ‘ไผไธšๆ•ฐๅญ—ๅŒ–ๅนณๅฐ > ๅกซๅ†™ๆœฌๆ–‡ๆกฃ๏ผŒไธบ AI Agent ๆไพ›็ณป็ปŸๆžถๆž„ไธŠไธ‹ๆ–‡ใ€‚ --- ## 1. ๆŠ€ๆœฏๆ ˆ | ๅฑ‚็บง | ๆŠ€ๆœฏ | ็‰ˆๆœฌ | |------|------|------| | ๅ‰็ซฏๆก†ๆžถ | Vue 3 + Vite | 3.5+ / 7.x | | UI ๅบ“ (็ฎก็†็ซฏ) | Element Plus + Tailwind CSS | 2.x / 4.x | | UI ๅบ“ (็”จๆˆท็ซฏ) | Headless UI + Tailwind CSS | 1.x / 4.x | | ็Šถๆ€็ฎก็† | Pinia | 3.x | | ่ทฏ็”ฑ | Vue Router | 4.x | | HTTP ๅฎขๆˆท็ซฏ | Axios | 1.x | | ๅŽ็ซฏๆก†ๆžถ | Hyperf | 3.1 | | ๅ็จ‹ๅผ•ๆ“Ž | Swoole | 5.0+ | | ็ผ–็จ‹่ฏญ่จ€ | PHP | 8.1+ | | ๆ•ฐๆฎๅบ“ | MySQL | 8.1 | | ็ผ“ๅญ˜ | Redis | 7.x | | ๅๅ‘ไปฃ็† | Nginx | 1.25+ | | ๅฎนๅ™จๅŒ– | Docker + Docker Compose | - | ## 2. ๆžถๆž„ๆ€ป่งˆ ``` โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ ็”จๆˆทๅฑ‚ โ”‚ โ”‚ PC ๆต่งˆๅ™จ โ”‚ ็งปๅŠจ็ซฏ (ๅ“ๅบ”ๅผ) โ”‚ ๅนณๆฟ โ”‚ ็ฎก็†ๅŽๅฐ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ–ผ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ CDN + WAF (ๅฏ้€‰) โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ–ผ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ Nginx ้›†็พค (่ดŸ่ฝฝๅ‡่กก + SSL + ้™ๆ€่ต„ๆบ) โ”‚ โ”‚ - upstream hyperf_cluster โ”‚ โ”‚ - WebSocket proxy โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ–ผ โ–ผ โ–ผ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ Hyperf-1 โ”‚ โ”‚ Hyperf-2 โ”‚ โ”‚ Hyperf-N โ”‚ (ๆฐดๅนณๆ‰ฉๅฑ•) โ”‚ HTTP:9501โ”‚ โ”‚ HTTP:9501โ”‚ โ”‚ HTTP:9501โ”‚ โ”‚ WS:9502 โ”‚ โ”‚ WS:9502 โ”‚ โ”‚ WS:9502 โ”‚ โ””โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ Redis โ”‚ โ”‚ MySQL โ”‚ โ”‚ Sentinel/ โ”‚ โ”‚ Master โ”‚ โ”‚ Cluster โ”‚ โ”‚ โ”œโ”€Slave 1 โ”‚ โ”‚ โ”‚ โ”‚ โ””โ”€Slave 2 โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ ``` ## 3. ๅˆ†ๅฑ‚ๆžถๆž„ ``` ่ฏทๆฑ‚ โ†’ Nginx โ†’ Hyperf HTTP Server โ†’ ไธญ้—ดไปถ้“พ โ†’ Controller โ”‚ โ–ผ Service ๅฑ‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ–ผ โ–ผ โ–ผ Repository Redis Cache Event Bus โ”‚ โ”‚ โ–ผ โ–ผ MySQL Async Queue ``` ## 4. ๆ ธๅฟƒๆจกๅ— | ๆจกๅ— | ่ฏดๆ˜Ž | ๅ…ณ้”ฎๆŽฅๅฃ | |------|------|---------| | ็”จๆˆท่ฎค่ฏ | JWT + RBAC ๆƒ้™ | `/admin/auth/login`, `/admin/auth/refresh` | | ๆƒ้™็ฎก็† | ็”จๆˆท/่ง’่‰ฒ/่œๅ•/ๆ•ฐๆฎๆƒ้™ | `/admin/users`, `/admin/roles`, `/admin/menus` | | ็”Ÿไบง็ฎก็† | ่ฎขๅ•/ๅญ่ฎขๅ•/ๅ‘่ดง/ๆ”ถๆฌพ | `/admin/production-orders`, `/admin/sub-orders` | | ๅทฅไฝœๆต | ๅฎกๆ‰นๆต็จ‹ๅฎšไน‰ไธŽๆ‰ง่กŒ | `/admin/workflows`, `/admin/tasks` | | ้€š็Ÿฅไธญๅฟƒ | WebSocket + ็ซ™ๅ†…ๆถˆๆฏ + ็Ÿญไฟก | `/admin/notifications`, `ws://9502` | | ๅฎขๆˆท็ฎก็† | ๅฎขๆˆท/ๅนณๅฐ/ๅบ—้“บ | `/admin/customers`, `/admin/platforms` | ## 5. ๅนถๅ‘่ฎพ่ฎก่ฆ็‚น | ่ฎพ่ฎก่ฆ็‚น | ๅฎž็Žฐๆ–นๅผ | |---------|---------| | ๆ— ็Šถๆ€ๆœๅŠก | Session/Token ๅญ˜ Redis๏ผŒๆ–‡ไปถๅญ˜ๅฏน่ฑกๅญ˜ๅ‚จ | | ๆ•ฐๆฎๅบ“้ซ˜ๅฏ็”จ | MySQL ไธปไปŽ + ่ฏปๅ†™ๅˆ†็ฆป + ่ฟžๆŽฅๆฑ  | | ็ผ“ๅญ˜็ญ–็•ฅ | Cache-Aside + ็ฉฟ้€/ๅ‡ป็ฉฟ/้›ชๅดฉ้˜ฒๆŠค | | ๅผ‚ๆญฅๅ‰Šๅณฐ | Hyperf AsyncQueue (Redis ้ฉฑๅŠจ) | | ๅˆ†ๅธƒๅผ้” | Redis SET NX + Lua ่„šๆœฌ | | ้™ๆต | ไปค็‰Œๆกถ (API) + ๆป‘ๅŠจ็ช—ๅฃ (็”จๆˆท) | | ๅฎžๆ—ถ้€šไฟก | Swoole WebSocket + Redis Pub/Sub | | ๆฐดๅนณๆ‰ฉๅฑ• | Docker Compose โ†’ K8s HPA | ## 6. ้ƒจ็ฝฒๆ‹“ๆ‰‘ ### ๅผ€ๅ‘็Žฏๅขƒ - ๅ•ๆœบ Docker Compose (Nginx + Hyperf + MySQL + Redis) ### ็”Ÿไบง็Žฏๅขƒ - Nginx ้›†็พค (2+ ่Š‚็‚น) - Hyperf ๅบ”็”จ (4+ ๅฎžไพ‹) - MySQL ไธปไปŽ (1 ๅ†™ + 2 ่ฏป) - Redis Sentinel (3 ่Š‚็‚น) ## 7. ๅ†ณ็ญ–่ฎฐๅฝ• | ๅ†ณ็ญ– | ้€‰ๆ‹ฉ | ๅŽŸๅ›  | |------|------|------| | ๅŽ็ซฏๆก†ๆžถ | Hyperf + Swoole | ๅ็จ‹้ซ˜ๆ€ง่ƒฝ๏ผŒ่ฟžๆŽฅๆฑ ๏ผŒไธŽๆ—ง้กน็›ฎๆŠ€ๆœฏๆ ˆไธ€่‡ด | | ๆ•ฐๆฎๅบ“ | MySQL 8.1 | ๆˆ็†Ÿ็จณๅฎš๏ผŒJSON ๆ”ฏๆŒ๏ผŒไธŽๆ—ง้กน็›ฎไธ€่‡ด | | ็ผ“ๅญ˜ | Redis 7 | ๆ•ฐๆฎ็ป“ๆž„ไธฐๅฏŒ๏ผŒ่ฟžๆŽฅๆฑ ๏ผŒ้˜Ÿๅˆ—ๆ”ฏๆŒ | | ๅ‰็ซฏๆก†ๆžถ | Vue 3 + Vite | ็”Ÿๆ€ๆˆ็†Ÿ๏ผŒไธŽๆ—ง้กน็›ฎไธ€่‡ด๏ผŒComposition API | | UI ๅบ“ | ็ฎก็†็ซฏ Element Plus + Tailwind / ็”จๆˆท็ซฏ Headless UI + Tailwind | ็ฎก็†็ซฏไผไธš็บง็ป„ไปถ + ็”จๆˆท็ซฏ่ฝป้‡ไบคไบ’ | | ้ƒจ็ฝฒ | Docker Compose โ†’ K8s | ๆธ่ฟ›ๅผๆ‰ฉๅฑ• | --- *ๆœ€ๅŽๆ›ดๆ–ฐ: YYYY-MM-DD*