From 857d43c6c253d0a9589fbfac31ae6c6038b22196 Mon Sep 17 00:00:00 2001
From: claude_dev <claude-dev@sanguo.local>
Date: Sun, 2 Aug 2026 19:10:55 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20CTA=E7=BB=93=E6=9E=9C=E9=A1=B5?=
 =?UTF-8?q?=E8=A1=A5=E5=87=80=E5=80=BC=E6=9B=B2=E7=BA=BF=E5=9B=BE(?=
 =?UTF-8?q?=E9=9B=B6=E6=88=90=E4=BA=A4=E4=B9=9F=E5=87=BA=E5=9B=BE)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Result.vue 拉了 equity-curve 数据却未画净值曲线;且 benchmark-curve/risk-series 依赖 *_metrics.json,CTA 引擎当前未生成该文件,致收益概述图全空。新增 EquityCurve.vue 走 equity-curve 接口(独立于 metrics.json,数据源 BacktestResult.equity_curve),零成交时画 N 天平线(初始资金不变),满足'有结果就有图'。vue-tsc RC=0。
---
 .../src/components/backtest/EquityCurve.vue   | 59 +++++++++++++++++++
 frontend/src/views/backtest/Result.vue        | 10 ++++
 2 files changed, 69 insertions(+)
 create mode 100644 frontend/src/components/backtest/EquityCurve.vue

diff --git a/frontend/src/components/backtest/EquityCurve.vue b/frontend/src/components/backtest/EquityCurve.vue
new file mode 100644
index 0000000..d34afa3
--- /dev/null
+++ b/frontend/src/components/backtest/EquityCurve.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import type { EChartsCoreOption } from 'echarts'
+import { useChart } from '@/composables/useChart'
+import { darkTitle, darkTooltip, darkGrid, darkAxis } from '@/utils/echartsDark'
+
+// 净值曲线(独立组件)。数据源 equity-curve 接口 = BacktestResult.equity_curve,
+// 不依赖 *_metrics.json(CTA 引擎当前未生成该文件,致 BenchmarkCurve 等图全空)。
+// 零成交时净值是 N 天平线(初始资金不变),也要画出而非空白。
+const props = defineProps<{ dates: string[]; equity: number[] }>()
+const el = ref<HTMLDivElement>()
+const { setOption } = useChart(el)
+
+const isEmpty = computed(() => !props.dates.length || !props.equity.length)
+
+function render(): void {
+  if (isEmpty.value) return
+  const option: EChartsCoreOption = {
+    title: darkTitle('净值曲线'),
+    tooltip: darkTooltip(),
+    grid: darkGrid(),
+    xAxis: { type: 'category', data: props.dates, ...darkAxis() },
+    yAxis: { type: 'value', scale: true, name: '净值(元)', ...darkAxis() },
+    series: [
+      {
+        type: 'line',
+        name: '净值',
+        smooth: true,
+        showSymbol: false,
+        lineStyle: { color: '#c23531', width: 1.6 },
+        areaStyle: { color: '#c23531', opacity: 0.12 },
+        data: props.equity,
+      },
+    ],
+  }
+  setOption(option)
+}
+
+onMounted(render)
+watch(() => [props.dates, props.equity], render, { deep: true })
+</script>
+
+<template>
+  <div v-if="isEmpty" class="chart-empty">暂无净值数据</div>
+  <div v-else ref="el" class="chart-box" />
+</template>
+
+<style scoped>
+.chart-box { width: 100%; height: 320px; }
+.chart-empty {
+  width: 100%;
+  height: 320px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #8b949e;
+  font-size: 13px;
+}
+</style>
diff --git a/frontend/src/views/backtest/Result.vue b/frontend/src/views/backtest/Result.vue
index 1b5c970..6eee97b 100644
--- a/frontend/src/views/backtest/Result.vue
+++ b/frontend/src/views/backtest/Result.vue
@@ -14,6 +14,7 @@ import AlphaChart from '@/components/backtest/AlphaChart.vue'
 import BetaChart from '@/components/backtest/BetaChart.vue'
 import DrawdownChart from '@/components/backtest/DrawdownChart.vue'
 import VolatilityChart from '@/components/backtest/VolatilityChart.vue'
+import EquityCurve from '@/components/backtest/EquityCurve.vue'
 
 const route = useRoute()
 const taskId = String(route.params.id)
@@ -109,6 +110,12 @@ function filterDataByTimeRange<T extends { dates: string[] }>(data: T): T {
 const filteredBenchmarkCurve = computed(() => filterDataByTimeRange(benchmarkCurve.value))
 const filteredRiskSeries = computed(() => filterDataByTimeRange(riskSeries.value))
 
+// 净值曲线(走 equity-curve 接口,独立于 benchmark-curve)。benchmark-curve/risk-series
+// 依赖 *_metrics.json,CTA 引擎当前未生成该文件 → 收益概述图全空;equity-curve 直接
+// 来自 BacktestResult.equity_curve(零成交也有 N 天平线),单独画保证"有结果就有图"。
+const equityDates = computed(() => equity.value.map((e) => fmtDate(e.date)))
+const equityValues = computed(() => equity.value.map((e) => e.balance))
+
 onMounted(async () => {
   // 请求隔离：任一接口失败（如 benchmark-curve/risk-series 数据缺失）不得阻塞
   // 其余请求。statistics/equity/trades 有数据时必须正常渲染。用 Promise.allSettled
@@ -228,6 +235,9 @@ function fmtDate(d: string): string {
       <!-- Tab 1: 收益概述 -->
       <el-tab-pane label="收益概述">
         <div class="charts-container">
+          <el-card>
+            <EquityCurve :dates="equityDates" :equity="equityValues" />
+          </el-card>
           <el-card>
             <BenchmarkCurve
               :dates="filteredBenchmarkCurve.dates"