建構邊緣預覽環境所需的控制平面

%%{init: {
  "theme": "base",
  "themeVariables": {
    "background": "#0b1220",
    "primaryColor": "#152238",
    "primaryTextColor": "#dbe7ff",
    "primaryBorderColor": "#4da3ff",
    "lineColor": "#78c4ff",
    "secondaryColor": "#101a2c",
    "tertiaryColor": "#0f1726",
    "clusterBkg": "#0f1b30",
    "clusterBorder": "#3f7dd8",
    "fontFamily": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
    "edgeLabelBackground": "#0d1627"
  }
}}%%
flowchart LR
    subgraph Dev["fa:fa-laptop 開發者邊緣"]
        Browser["fa:fa-globe 瀏覽器"]
        Hosts["fa:fa-network-wired Hosts / DNS 覆寫"]
    end

    subgraph CI["fa:fa-github GitHub Actions"]
        Build["fa:fa-box 建置並推送映像"]
        Deploy["fa:fa-rocket 部署觸發（workflow）"]
    end

    subgraph Registry["fa:fa-database 映像庫流程"]
        GHCR["fa:fa-boxes-stacked ghcr.io（主要來源）"]
        EdgeReg["fa:fa-warehouse 邊緣映像庫 / 快取"]
    end

    subgraph Platform["fa:fa-server 執行平台"]
        Gateway["fa:fa-route Web 入口（Traefik/Nginx）"]
        TLS["fa:fa-lock TLS 憑證管理"]
        API["fa:fa-key 部署 API（Bearer）"]
        State["fa:fa-map 期望狀態儲存"]
        Runtime["fa:fa-plug 編排器（Docker/K8s）"]

        subgraph Fixed["fa:fa-thumbtack 固定環境"]
            DevEnv["fa:fa-code dev 環境"]
            StagingEnv["fa:fa-vial staging 環境"]
            ProdEnv["fa:fa-shield prod 環境"]
        end

        subgraph Dynamic["fa:fa-code-branch 預覽環境"]
            PR1908["fa:fa-code-branch pr-1908 環境"]
            PR1234["fa:fa-code-branch pr-1234 環境"]
            PRWild["fa:fa-cubes pr-* 萬用匹配"]
        end
    end

    Browser --> Hosts
    Hosts -->|"解析預覽 hosts"| Gateway

    Build -->|"推送映像"| GHCR
    Build -->|"預先暫存 / 快取"| EdgeReg
    GHCR -. "上游來源" .-> EdgeReg

    Deploy -->|"POST 部署請求"| API

    API -->|"保存期望狀態"| State
    API -->|"調和服務狀態"| Runtime

    Runtime --> DevEnv
    Runtime --> StagingEnv
    Runtime --> ProdEnv
    Runtime --> PR1908
    Runtime --> PR1234
    Runtime --> PRWild

    EdgeReg --> DevEnv
    EdgeReg --> StagingEnv
    EdgeReg --> ProdEnv
    EdgeReg --> PR1908
    EdgeReg --> PR1234
    EdgeReg --> PRWild

    TLS -->|"終止 TLS"| Gateway
    Gateway --> DevEnv
    Gateway --> StagingEnv
    Gateway --> ProdEnv
    Gateway --> PR1908
    Gateway --> PR1234
    Gateway --> PRWild

    classDef ext fill:#0f1d33,stroke:#7cc7ff,color:#e5f1ff,stroke-width:1.2px;
    classDef control fill:#162742,stroke:#67b7ff,color:#eaf4ff,stroke-width:1.2px;
    classDef state fill:#1b2941,stroke:#7fd7c4,color:#ebfffa,stroke-width:1.2px;
    classDef gate fill:#14263f,stroke:#8ec5ff,color:#eff7ff,stroke-width:1.4px;
    classDef terminal fill:#1b3b32,stroke:#79e3ba,color:#f0fff9,stroke-width:1.4px;

    class Browser,Hosts,GHCR ext;
    class Build,Deploy,API,Runtime control;
    class EdgeReg,State,TLS state;
    class Gateway gate;
    class DevEnv,StagingEnv,ProdEnv,PR1908,PR1234,PRWild terminal;