Skip to content
OriginalPhase Ops Handbook

系統分層總覽｜System Landscape Map

這份總覽用來回答一個問題：OriginalPhase Web App 專案裡，哪些東西屬於技術層級，哪些東西是橫跨所有層的能力。

System Map

產品技術生態圖｜System Map

01

使用者層

Client / User

  • Web User
  • Admin / Consultant
  • AI Agent Operator
02

前端層

Frontend Layer

  • Nuxt
  • Astro
  • Tailwind CSS
  • UI / UX
  • i18n
03

應用後端

Application Backend

  • FastAPI
  • API Router
  • Service Layer
  • Webhook Handler
04

背景任務

Async Worker Layer

  • ARQ Worker
  • Redis
  • Scheduled Jobs
  • Queue
05

資料與權限

Data / Auth Layer

  • Supabase Auth
  • PostgreSQL
  • RLS
  • Storage
06

AI 工作流

AI Workflow Layer

  • Prompt Design
  • Agent Workflow
  • RAG
  • OpenRouter
  • Gemini / OpenAI
07

外部服務

External Providers

  • Cloudflare Pages / DNS
  • Render
  • Oen / PAYUNi
  • Google Search Console
  • CodeRabbit

如何閱讀這張圖

圖中的主要層級是由上到下或由外到內的系統位置：

  • 使用者層：實際操作網站、後台或 Agent 的角色。
  • 前端層：使用者直接看到的 Web UI、互動與 metadata。
  • 應用後端：API、service layer、Webhook handler 與商業邏輯。
  • 背景任務：非同步工作、排程、queue 與 retry。
  • 資料與權限：Auth、PostgreSQL、RLS、Storage 與資料邊界。
  • AI 工作流：Prompt、Agent workflow、RAG、模型供應商與自動化協作。
  • 外部服務：部署、DNS、金流、搜尋工具與 code review 平台。

橫向能力不是單一模組

SEO、Security、Debug、Observability、Project Management、Documentation 都不是單一前端或後端任務。它們會穿過多個層級：

  • SEO 同時牽涉 frontend metadata、Cloudflare redirect、sitemap、GSC 與 404 status。
  • Security 同時牽涉 Auth、RLS、env vars、Webhook signature、log redaction 與部署平台權限。
  • Debug 同時牽涉 browser、API response、worker log、database state、DNS 與第三方服務。

因此 SOP 不應只問「這是前端還是後端」。更好的問題是：

這個問題穿過哪些層？哪些橫向能力會受影響？要在哪些層驗證？

對應文件