# Frontend Architecture Spec

## 目標

定義 `mkt.ose.tw/frontend` 的主線架構，讓實驗管理與 Visual Editor 可長期維護。

## 技術基底

- Vue 3
- Element Plus
- Vuex
- Vite

## 分層原則

### app / shell

- 路由骨架、layout、全域導航

### module

- 依業務模組切分：dashboard、experiment、variant、release、editor

### service / api client

- 集中 API 呼叫邏輯
- 不在頁面內直接寫散落請求

### state

- 僅放跨頁狀態與 session
- 頁面暫存留在模組內

## 主線與 legacy 邊界

- `experiment / variant / release / editor` 為主線
- `ose-card / conutdown-timer` 為 legacy 過渡模組
- 新功能不再掛到 legacy 路徑

## API 邊界

- Frontend 主入口為 FastAPI
- Directus 保留在登入與既有相容路線
- 不再新增頁面直接耦合 Directus raw response

## 近期重點

- Editor 穩定化（選取、編輯、結構、history）
- 管理流補齊（create/edit/build/publish/rollback）
- 逐步收斂語言與操作流程（流程化、簡單化、中文化）