前端儀表板¶
以 Vue 3 和 Tailwind CSS 建構的專業深色主題交易儀表板。前端是一個單頁應用程式 (SPA)，作為手動交易、帳戶管理、webhook 設定和策略建構的主要介面。設計上可從 375px 手機螢幕擴展至 8K 顯示器，採用流式響應設計——沒有硬性斷點跳變，一切透過 clamp() 平滑縮放。
預設安全
券商憑證在傳輸前於瀏覽器中使用 Web Crypto API 加密。前端產生隨機 AES-256-GCM 金鑰，加密憑證資料，然後使用伺服器的 RSA-4096 公鑰（從 KMS 取得）包裹 AES 金鑰。憑證永遠不以明文傳輸 — 即使透過 TLS 也不行。此雙重加密層防禦 TLS 攔截代理和 CDN 配置錯誤。
技術堆疊¶
| 層級 | 技術 | 版本 | 用途 |
|---|---|---|---|
| 框架 | Vue 3（Composition API，<script setup>） |
3.4 | 響應式 UI 元件 |
| 建置工具 | Vite | 5.0 | 快速開發伺服器、最佳化的正式建置 |
| CSS 框架 | Tailwind CSS | 3.4 | 工具優先的樣式、自訂設計權杖 |
| 圖示 | Font Awesome | 6.5 | UI 圖示 |
| 圖表 | TradingView Widget API | — | 交易檢視中的即時市場圖表 |
| 流程圖 | @vue-flow/core | — | 視覺化策略建構器畫布 |
| 字型 | Inter（無襯線）、JetBrains Mono（等寬） | — | 排版系統 |
| 狀態管理 | Provide/Inject（無 Vuex/Pinia） | — | 輕量級全域狀態 |
| 路由 | 基於分頁（v-if / v-show，無 Vue Router） |
— | 無需 URL 路由的簡單導覽 |
flowchart TB
subgraph Build["建置管線"]
VITE["Vite 開發伺服器<br/>HMR + 代理至 FastAPI"]
BUILD["vite build<br/>→ dist/（靜態資源）"]
end
subgraph App["Vue 3 SPA"]
ROOT["App.vue<br/>根元件 + 分頁導覽"]
VIEWS["10 個分頁<br/>交易、帳戶、訂單⋯"]
COMP["元件庫<br/>strategy-builder/, common/, layout/"]
API_MOD["API 模組<br/>fetch + CSRF + 加密"]
end
subgraph Backend["FastAPI 後端"]
STATIC["靜態檔案掛載<br/>於 / 提供 dist/"]
REST["REST API<br/>/api/*, /auth/*, /trading/*"]
end
VITE -->|"開發"| REST
BUILD --> STATIC
ROOT --> VIEWS
VIEWS --> COMP
VIEWS --> API_MOD
API_MOD -->|"fetch() + HttpOnly cookies"| REST
儀表板檢視¶
應用程式使用在 App.vue 中管理的分頁式導覽。每個分頁渲染一個專用的檢視元件：
使用者面向檢視¶
| 檢視 | 元件 | 描述 |
|---|---|---|
| 交易 | TradingTab.vue |
手動下單，包含標的選擇、TradingView 圖表小工具和快速下單工具列 |
| 帳戶 | AccountsTab.vue |
倉位管理——即時損益顯示、附帶未實現盈虧的倉位卡片 |
| 訂單 | OrdersTab.vue |
訂單歷史與狀態追蹤——可依日期、標的、狀態過濾 |
| 標的 | SymbolsTab.vue |
標的瀏覽器，附帶搜尋、類別過濾和即時可用性狀態 |
| 策略建構器 | StrategyBuilderTab.vue |
視覺化策略編輯器——策略建構器的全頁畫布 |
| Webhook | WebhookTab.vue |
TradingView webhook 設定——權杖管理、允許的標的、IP 白名單、測試按鈕 |
| 稽核 | AuditTab.vue |
安全稽核日誌檢視器——登入歷史、API 金鑰使用情況、憑證變更 |
| 帳號 | AccountTab.vue |
使用者個人資料與訂閱管理——方案詳情、使用量統計、帳單 |
| 白名單 | WhitelistTab.vue |
IP 白名單設定——管理 webhook 和 API 存取的允許 IP |
管理員檢視¶
| 檢視 | 元件 | 描述 |
|---|---|---|
| 管理面板 | AdminTab.vue |
管理儀表板——平台管理的入口點 |
| 券商列表 | AdminBrokerList |
券商設定管理——檢視/編輯券商設定 |
| 使用者列表 | AdminUserList |
使用者管理——搜尋、過濾、檢視所有已註冊使用者 |
| 使用者對話框 | AdminUserModal |
使用者詳情編輯器——修改使用者設定、訂閱、憑證 |
| 平台統計 | AdminStats |
平台統計儀表板——活躍使用者、訂單量、Worker 狀態 |
| 聯絡清單 | AdminContactList |
聯絡/支援工單管理 |
| 確認對話框 | AdminConfirmDialog |
用於破壞性管理操作的可重用確認對話框 |
元件架構¶
flowchart LR
App["App.vue"] --> Views["10 個分頁"]
App --> Layout["版面元件"]
Views --> Common["共用 UI"]
Views --> Modals["對話框"]
Views --> SB["策略建構器<br/>11 個元件"]
全域狀態透過 Vue 3 的 provide/inject 管理——根元件 App.vue 向所有子檢視提供 user、api、showToast 和 logout。
元件群組¶
| 群組 | 目錄 | 元件數 | 用途 |
|---|---|---|---|
| 策略建構器 | components/strategy-builder/ |
11 | 視覺化流程編輯器、條件建構器、PineScript 預覽 |
| 共用 | components/common/ |
共享 | 按鈕、輸入、卡片、載入動畫、空狀態 |
| 佈局 | components/layout/ |
Header、導覽 | 頁面外框、響應式標題列、分頁列 / 底部導覽 |
| 對話框 | components/modals/ |
多個 | 確認對話框、詳情檢視、表單對話框 |
狀態管理¶
不使用 Vuex 或 Pinia——全域狀態透過 Vue 的 provide/inject 管理：
// App.vue — provides global state to all descendants
provide('user', user);
provide('showToast', showToast);
provide('api', api);
provide('logout', logout);
// Any child component — injects what it needs
const user = inject('user');
const api = inject('api');
API 通訊¶
所有 API 呼叫都透過集中式的 api() 函式，處理驗證、CSRF 保護和錯誤路由：
export async function api(endpoint, options = {}) {
const csrfToken = sessionStorage.getItem('csrf_token');
const res = await fetch(endpoint, {
...options,
credentials: 'include', // Send HttpOnly JWT cookie
headers: {
...options.headers,
'X-CSRF-Token': csrfToken, // Auto-inject CSRF
},
});
if (res.status === 401) { logout(); } // Session expired
if (res.status === 403) { /* forbidden */ }
if (res.status === 451) { /* ToS required */ }
return res;
}
憑證加密
當使用者提交券商憑證（API 金鑰、密鑰、CA 憑證）時，前端會在發送前使用 Web Crypto API 加密。它產生隨機的 AES-256-GCM 金鑰加密資料，再以伺服器的 RSA-4096 公鑰包裹 AES 金鑰。伺服器透過 KMS 解密。憑證從不以明文傳輸——即使在 TLS 之上也是如此。
公開頁面¶
在 SPA 之外提供的靜態 HTML 頁面，用於行銷和未驗證存取：
| 頁面 | 檔案 | 用途 |
|---|---|---|
| 登陸頁 | landing.html |
產品概覽、功能亮點、定價 |
| 常見問題 | faq.html |
常見問題集 |
| 安全性 | security.html |
安全實務、加密細節、合規性 |
| 策略建構器 | strategy-builder.html |
視覺化策略建構器功能的行銷頁面 |
| 密碼重設 | （路由） | 帶有電子郵件驗證的重設流程 |
設計系統¶
深色主題¶
深色主題為預設——這是交易平台的業界標準，可在長時間盯盤時減少眼睛疲勞，並為價格走勢視覺化提供最佳對比度。
| 權杖 | 用途 | 值 |
|---|---|---|
dark-950 |
頁面背景 | 最深 |
dark-900 |
區塊背景 | — |
dark-800 |
卡片背景 | — |
dark-700 |
邊框、分隔線 | — |
dark-300 |
內文文字 | — |
dark-100 |
標題、強調 | 最淺 |
accent（藍色） |
主要操作、連結 | #3b82f6 |
green |
獲利、買入、成功 | — |
red |
虧損、賣出、錯誤 | — |
yellow |
警告狀態 | — |
cyan |
資訊性 | — |
排版¶
| 字型 | 用途 |
|---|---|
| Inter | 標題、內文、UI 標籤 |
| JetBrains Mono | 程式碼、數字、價格、PineScript 預覽 |
使用 clamp() 的流式尺寸——文字隨視窗寬度平滑縮放：
| 權杖 | 最小 | 首選 | 最大 |
|---|---|---|---|
fluid-xs |
10px | 0.7vw | 12px |
fluid-sm |
11px | 0.8vw | 13px |
fluid-base |
13px | 0.9vw | 15px |
fluid-lg |
15px | 1.1vw | 18px |
fluid-xl |
18px | 1.3vw | 22px |
響應式斷點¶
Tailwind 設定定義了從小型手機到 8K 顯示器的斷點：
screens: {
xs: '375px', // Small phones
sm: '640px', // Large phones / small tablets
md: '768px', // Tablets (mobile <-> desktop switch)
lg: '1024px', // Small laptops
xl: '1280px', // Desktops
'2xl': '1536px', // Large desktops
'3xl': '1920px', // Full HD
'4xl': '2560px', // QHD
'5xl': '3840px', // 4K UHD
'6xl': '5120px', // 5K
'7xl': '7680px', // 8K
}
桌面 vs. 行動版佈局¶
| 元素 | 桌面（>=768px） | 行動版（<768px） |
|---|---|---|
| 導覽 | 頂部分頁列 | 底部導覽列 |
| 交易工具列 | 全寬、單列 | 雙列精簡格線 |
| 對話框 | 置中浮層 | 底部工作表（拖曳關閉） |
| 表格 | 完整欄位附帶排序 | 卡片檢視（堆疊欄位） |
| 帳戶卡片 | 格線佈局 | 水平捲動 |
| 觸控目標 | 標準 | 最小 44px（Apple HIG） |
flowchart TB
subgraph Desktop["桌面版佈局（>=768px）"]
D_HEAD["標題列（固定）"]
D_TABS["分頁列（頂部，黏性）"]
D_CONTENT["當前分頁內容<br/>（可捲動）"]
D_TOOLBAR["交易工具列<br/>（固定，可收合）"]
D_HEAD --- D_TABS --- D_CONTENT --- D_TOOLBAR
end
subgraph Mobile["行動版佈局（<768px）"]
M_HEAD["標題列（精簡）"]
M_CONTENT["當前分頁內容<br/>（可捲動）"]
M_TOOLBAR["交易工具列<br/>（雙列精簡）"]
M_NAV["底部導覽列<br/>（固定，5 個分頁）"]
M_HEAD --- M_CONTENT --- M_TOOLBAR --- M_NAV
end
線上展示¶
如需探索儀表板，請造訪 https://www.4pass.io 並登入。儀表板包含上述所有檢視——交易、帳戶、訂單、標的、策略建構器、webhook、稽核日誌和管理面板。
無障礙設計¶
| 功能 | 實作方式 |
|---|---|
| 焦點外框 | 搭配強調色環的 :focus-visible |
| 螢幕閱讀器 | 用於標籤的 .sr-only 工具類別 |
| 高對比度 | prefers-contrast: high 媒體查詢支援 |
| 減少動態效果 | prefers-reduced-motion: reduce 停用所有動畫 |
| 鍵盤導覽 | Tab 順序遵循視覺順序 |
| 色彩對比 | 深色背景上的文字符合 WCAG AA |
| 觸控目標 | 所有互動元素 >= 44px |
| 安全區域內縮 | 針對有瀏海裝置的 env(safe-area-inset-*) |
檔案對應表¶
| 概念 | 檔案 |
|---|---|
| 根元件 + 分頁路由 | frontend/src/App.vue |
| 分頁檢視（10 個檔案） | frontend/src/views/*.vue |
| 策略建構器元件（11 個） | frontend/src/components/strategy-builder/ |
| PineScript 程式碼產生 | frontend/src/utils/pinescript-generator.js |
| API 工具 + CSRF + 加密 | frontend/src/api/index.js |
| Tailwind 設定（設計系統） | frontend/tailwind.config.js |
| 全域樣式 + 流式權杖 | frontend/src/assets/styles.css |
| Vite 設定（代理、多入口） | frontend/vite.config.js |
| 工具函式 | frontend/src/utils/index.js |
| 公開頁面（登陸頁、常見問題等） | frontend/public/*.html |