跳轉到

視覺化策略建構器

使用者無需撰寫程式碼，即可透過視覺化方式建立交易策略。策略建構器是以 Vue Flow 驅動的拖放式畫布，交易者可在此定義指標、使用運算式樹 (Expression Tree) 組合訊號條件，並串接進出場邏輯——全部透過圖形化介面完成。在背後，建構器會產生 PineScript v6 原始碼，由伺服器端編譯為向量化 Python 並交由回測引擎執行。最終實現從構想到回測在 60 秒內完成的零程式碼路徑。

產品成果

同一套四訊號模型（long_entry、long_exit、short_entry、short_exit）同時驅動回測和實盤執行。透過視覺化建構、在回測引擎中測試、部署到實盤交易的策略，在每個階段都使用相同的邏輯 — 消除了困擾許多平台的「回測能用、上線就壞」的落差。

運作方式

flowchart TB A["拖放指標"] --> B["定義變數"] B --> C["建立條件"] C --> D["對應 4 個訊號"] D --> E["產生 PineScript v6"] E --> F["編譯為 Python"] F --> G["執行回測"] G --> H["顯示結果"]
  1. 拖曳指標至畫布——建構器提供全部 37 種支援的技術指標，依類別分組（趨勢、動量、波動率、成交量）。
  2. 定義變數——透過輸入面板配置指標參數，如週期長度、閾值和價格來源。
  3. 建立條件——使用 AND/OR 群組組合布林運算式。每個條件比較兩個運算元（指標 vs. 數值、指標 vs. 指標）。
  4. 對應至訊號——將條件指定至四個訊號插槽：long_entry、long_exit、short_entry、short_exit。
  5. 產生 PineScript——前端輸出有效的 PineScript v6 原始碼，包含 strategy() 宣告、input.*() 呼叫、指標運算，以及帶有 strategy.entry()/strategy.close() 的 if 區塊。
  6. 編譯並回測——伺服器端的 PineScript 編譯器將原始碼轉換為向量化 Python，回測引擎則依歷史資料執行策略。

四訊號模型 (4-Signal Model)

無論策略是透過視覺化建構、以 PineScript 撰寫，或以原始 Python 編碼，都必須產生恰好 4 個布林訊號。這是策略邏輯與執行引擎及回測器之間的通用介面。

訊號 含義 PineScript 對應
long_entry 開多倉 strategy.entry("Long", strategy.long)
long_exit 平多倉 strategy.close("Long")
short_entry 開空倉 strategy.entry("Short", strategy.short)
short_exit 平空倉 strategy.close("Short")
flowchart LR subgraph source["策略來源"] VB["視覺化建構器"] PS["PineScript"] PY["原生 Python"] end SIGNALS["4 個布林訊號<br/>long_entry, long_exit<br/>short_entry, short_exit"] subgraph consumers["消費端"] BT["回測引擎"] EX["即時執行"] end VB --> SIGNALS PS --> SIGNALS PY --> SIGNALS SIGNALS --> BT SIGNALS --> EX

為什麼是 4 個訊號？

四訊號模型將策略邏輯與執行機制解耦。回測器不需要理解 MACD 交叉或 RSI 閾值——它只看到布林陣列。這也使即時交易中的自動反轉邏輯成為可能：一個 long_entry 訊號會在開多倉之前，自動平掉任何現有的空倉。

元件

策略建構器由 11 個使用 Composition API 搭配 <script setup> 的 Vue 3 元件組成：

元件 檔案 用途
StrategyBuilderPage StrategyBuilderPage.vue 主編輯器——承載視覺化流程畫布、側邊面板和 PineScript 預覽。協調所有子元件的狀態。
SignalConditionBuilder SignalConditionBuilder.vue 為四個訊號插槽各自建立訊號條件。每個訊號擁有自己的 AND/OR 條件運算式樹。
ExpressionBuilder ExpressionBuilder.vue 運算式樹編輯器，附帶函式選擇器。使用者可組合如 RSI(14) < 30 AND SMA(20) > SMA(50) 的條件。
ExprNode ExprNode.vue 渲染運算式樹中的單一節點——處理 AND/OR 群組的遞迴巢狀。
VariablesPanel VariablesPanel.vue 管理指標與變數定義。使用者新增指標（SMA、MACD、BB）並指派至命名變數。
StrategyInputsPanel StrategyInputsPanel.vue 管理可配置的輸入參數——週期長度、閾值、乘數。這些會成為產生的 PineScript 中的 input.int() / input.float()。
PineScriptPreview PineScriptPreview.vue 即時唯讀預覽產生的 PineScript v6 程式碼。隨使用者修改視覺化建構器即時更新。
OperandSelector OperandSelector.vue 技術指標與價格來源的下拉選擇器。依類別分組指標（趨勢、動量、波動率、成交量）。
ValueDisplay ValueDisplay.vue 在條件列中渲染運算元數值——以適當格式顯示指標名稱、數值常數或變數參照。
ConditionRow ConditionRow.vue 單一條件：左運算元 運算子 右運算元（如 RSI(14) > 70）。支援比較運算子：>、<、>=、<=、==、!=、crossover、crossunder。
ConditionGroup ConditionGroup.vue 以 AND/OR 邏輯群組多個 ConditionRow。支援巢狀以建立複雜的布林運算式。

產生的 PineScript 範例

建構器會產生完全有效的 PineScript v6 原始碼。以下是一個 MACD 交叉策略搭配 RSI 過濾器的範例——這類策略正是使用者透過拖曳 MACD 指標、RSI 指標並配置交叉條件所建立的：

//@version=6
strategy("MACD + RSI Filter", overlay=true)

// Input parameters (from StrategyInputsPanel)
fast_length = input.int(12, "Fast Length")
slow_length = input.int(26, "Slow Length")
signal_length = input.int(9, "Signal Length")
rsi_length = input.int(14, "RSI Length")
rsi_upper = input.int(70, "RSI Overbought")
rsi_lower = input.int(30, "RSI Oversold")

// Indicator calculations (from VariablesPanel)
[macdLine, signalLine, _] = ta.macd(close, fast_length, slow_length, signal_length)
rsi_val = ta.rsi(close, rsi_length)

// Signal conditions (from SignalConditionBuilder)
longCondition = ta.crossover(macdLine, signalLine) and rsi_val < rsi_upper
shortCondition = ta.crossunder(macdLine, signalLine) and rsi_val > rsi_lower

// Entry signals — 4-signal model
if longCondition
    strategy.entry("Long", strategy.long)
if shortCondition
    strategy.entry("Short", strategy.short)

編譯器看到的內容

編譯器將此對應為 4 個訊號：long_entry = crossover(macd, signal) & (rsi < 70)、short_entry = crossunder(macd, signal) & (rsi > 30)。由於沒有明確的 strategy.close() 呼叫，long_exit 和 short_exit 為空——倉位由相反方向的進場反轉（由自動反轉邏輯處理）。

與後端整合

sequenceDiagram participant User as 使用者（瀏覽器） participant Builder as 策略建構器 participant API as FastAPI participant DB as PostgreSQL participant Compiler as PineScript 編譯器 participant Backtester as 回測引擎 participant Frontend as 結果 UI User->>Builder: 拖曳指標、建立條件 Builder->>Builder: 即時產生 PineScript v6 User->>Builder: 點擊「執行回測」 Builder->>API: POST /api/strategies<br/>{pine_source, symbol, timeframe} API->>DB: 儲存策略（pine_source, params） API->>Compiler: transform_pinescript(source) Compiler->>Compiler: 詞法分析 → 語法分析 → 程式碼產生 Compiler-->>API: TransformedStrategy（compute 函式 + 中繼資料） API->>Backtester: run(strategy, symbol, timeframe) Backtester->>Backtester: 載入資料 → 放大鏡 → vectorbt Backtester-->>API: BacktestResult（統計 + 權益 + 交易） API-->>Frontend: JSON 回應 Frontend->>User: 權益曲線、統計卡片、交易表格

資料流程摘要

步驟 動作 資料
1 使用者建立策略 視覺化流程圖
2 前端產生 PineScript .pine 原始碼字串
3 POST /api/strategies {pine_source, symbol, timeframe, period}
4 儲存至 PostgreSQL 包含版本化原始碼的策略記錄
5 編譯器轉換 PineScript → AST → Python _compute() 函式
6 回測器執行 _compute(df, params) → 4 個布林 Series → vbt.Portfolio.from_signals()
7 回傳結果 包含約 30 個指標、權益曲線、交易清單的 BacktestResult
8 前端渲染 統計卡片、面積圖、交易表格

即時預覽

PineScriptPreview 元件會隨使用者修改視覺化建構器即時更新。這提供了立即的回饋——使用者可在提交前驗證產生的程式碼。預覽為唯讀，並透過具有 PineScript 感知格式的 <pre> 區塊使用語法高亮。