From 4c5270cf7ae35905480db6143d27864496bc52f0 Mon Sep 17 00:00:00 2001
From: claude_dev <claude-dev@sanguo.local>
Date: Sun, 2 Aug 2026 20:01:55 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20EquityCurve=20=E5=8E=BB=20v-if?=
 =?UTF-8?q?=20+=20watch=20flush:post(=E6=B2=BB=E5=87=80=E5=80=BC=E5=9B=BE?=
 =?UTF-8?q?=E6=B0=B8=E4=B8=8Dinit)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

EquityCurve 用 v-if/v-else(空数据占位/否则chart-box),但数据异步到达时 v-else 切换 + watch 默认 pre flush → el.value 尚未绑定 → echarts.init 跳过 → 净值图 hasEchartsInstance=false 永不画。改为总渲染 chart-box(同 BenchmarkCurve 模式) + watch flush:post 保证 DOM patch 后 render。vue-tsc RC=0。
---
 .../src/components/backtest/EquityCurve.vue   | 24 +++++++------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/backtest/EquityCurve.vue b/frontend/src/components/backtest/EquityCurve.vue
index d34afa3..93acd08 100644
--- a/frontend/src/components/backtest/EquityCurve.vue
+++ b/frontend/src/components/backtest/EquityCurve.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import type { EChartsCoreOption } from 'echarts'
 import { useChart } from '@/composables/useChart'
 import { darkTitle, darkTooltip, darkGrid, darkAxis } from '@/utils/echartsDark'
@@ -7,14 +7,16 @@ import { darkTitle, darkTooltip, darkGrid, darkAxis } from '@/utils/echartsDark'
 // 净值曲线(独立组件)。数据源 equity-curve 接口 = BacktestResult.equity_curve,
 // 不依赖 *_metrics.json(CTA 引擎当前未生成该文件,致 BenchmarkCurve 等图全空)。
 // 零成交时净值是 N 天平线(初始资金不变),也要画出而非空白。
+//
+// 模板总渲染 chart-box(无 v-if): 否则数据异步到达时 v-else 切换 + watch 默认 pre
+// flush 时机下 el.value 尚未绑定 → ensureChart 跳过 → echarts 永不 init → 净值图空白。
+// watch 加 flush:'post' 进一步保证 DOM patch 后再 render。
 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
+  if (!props.dates.length || !props.equity.length) return
   const option: EChartsCoreOption = {
     title: darkTitle('净值曲线'),
     tooltip: darkTooltip(),
@@ -37,23 +39,13 @@ function render(): void {
 }
 
 onMounted(render)
-watch(() => [props.dates, props.equity], render, { deep: true })
+watch(() => [props.dates, props.equity], render, { deep: true, flush: 'post' })
 </script>
 
 <template>
-  <div v-if="isEmpty" class="chart-empty">暂无净值数据</div>
-  <div v-else ref="el" class="chart-box" />
+  <div 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>