系統架構

系統架構總覽

graph LR
  subgraph Client["Client Layer"]
    Web["Astro SSR<br/>(Cloudflare Pages)"]
    Admin["Admin CMS<br/>(React islands)"]
  end
  subgraph API["API Layer (future)"]
    Elysia["Elysia on Bun<br/>REST + WebSocket"]
  end
  subgraph Data["Data Layer"]
    PG[("PostgreSQL")]
    Redis[("Redis")]
    GCS[("GCS / R2")]
  end
  subgraph External["3rd Party"]
    PAYUNi["PAYUNi<br/>統一金流"]
    Maps["Google Maps"]
    AI["Claude API"]
  end
  Web --> Elysia
  Admin --> Elysia
  Elysia --> PG
  Elysia --> Redis
  Elysia --> GCS
  Elysia --> PAYUNi
  Elysia --> Maps
  Elysia --> AI

訂單流程

stateDiagram-v2
  [*] --> JobPosted: 雇主發布案件
  JobPosted --> Matching: AI 媒合推薦
  Matching --> Applied: 飛手應徵
  Applied --> Accepted: 雇主接受
  Accepted --> Paid: PAYUNi 託管付款
  Paid --> InProgress: 執行中
  InProgress --> Delivered: 交付成果
  Delivered --> Confirmed: 雇主確認
  Confirmed --> Released: 撥款給飛手
  Released --> Reviewed: 雙向評價
  Reviewed --> [*]
  InProgress --> Disputed: 爭議
  Disputed --> Resolved: 平台介入
  Resolved --> Released

頁面結構

graph TD
  Home["/ Home"] --> PilotList["/pilots 飛手列表"]
  Home --> JobList["/jobs 案件列表"]
  Home --> About["/about 關於平台"]
  Home --> Arch["/architecture 架構說明"]
  PilotList --> PilotDetail["/pilots/:id 飛手詳情"]
  JobList --> JobDetail["/jobs/:id 案件詳情"]
  Home --> Auth["/login 登入"]
  Auth --> Dashboard["/dashboard 控制台"]
  Dashboard --> DashPilot["飛手控制台"]
  Dashboard --> DashEmployer["雇主控制台"]
  Dashboard --> DashOrders["訂單管理"]
  Dashboard --> DashPayment["金流紀錄"]

技術棧

Layer	Technology	Purpose
Runtime	Bun	High-performance JavaScript runtime
Framework	Astro 6 (SSG)	Static site generation with islands architecture
UI Islands	React 19	Interactive components (filters, forms, charts)
Styling	Tailwind CSS 3	Utility-first CSS with dark mode
Diagrams	Mermaid.js	Architecture & flow visualization
Deployment	Cloudflare Pages	Edge-deployed static hosting
API (future)	Elysia on Bun	REST + WebSocket backend
Database	PostgreSQL + Redis	Primary storage + caching
Payment	PAYUNi 統一金流	Escrow payment gateway (Taiwan)

各層說明

Client Layer

Astro SSG generates static HTML at build time, deployed to Cloudflare Pages for global edge delivery. React islands handle interactive components like search filters, payment forms, and dashboard charts.

API Layer (Future)

Elysia framework running on Bun provides REST endpoints and WebSocket connections for real-time features. Handles authentication, job matching, order management, and payment processing.

Data Layer

PostgreSQL for relational data (users, jobs, orders), Redis for caching and session management, GCS/R2 for file storage (portfolio images, certificates).

3rd Party Integration

PAYUNi for escrow payments, Google Maps for location services and job mapping, Claude API for AI-powered pilot-job matching and recommendations.

FlyMatch Demo