From ac591c54c45303be34bccad789c8b4309d01f056 Mon Sep 17 00:00:00 2001
From: hzm <934585316@qq.com>
Date: Mon, 16 Mar 2026 21:44:49 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E4=B8=9A=E7=BB=A9=E8=B5=B0?=
 =?UTF-8?q?=E5=8A=BF=E5=AF=B9=E6=AF=94=E7=BA=BF=E6=95=B0=E6=8D=AE=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F=E5=8C=96=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/FundTrendChart.jsx       | 76 +++++++++++++++++--------
 app/components/MobileFundCardDrawer.jsx |  2 +-
 2 files changed, 53 insertions(+), 25 deletions(-)

diff --git a/app/components/FundTrendChart.jsx b/app/components/FundTrendChart.jsx
index ade4f09..119fcec 100644
--- a/app/components/FundTrendChart.jsx
+++ b/app/components/FundTrendChart.jsx
@@ -166,14 +166,28 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
       const key = `${series.name || 'series'}_${idx}`;
       const isHidden = hiddenGrandSeries.has(key);
       const pointsByDate = new Map(series.points.map(p => [p.date, p.value]));
-      const seriesData = labels.map(date => {
+
+      // 方案 2：将对比线同样归一到当前区间首日，展示为“相对本区间首日的累计收益率（百分点变化）”
+      let baseValue = null;
+      for (const date of labels) {
         const v = pointsByDate.get(date);
-        if (isHidden) return null;
-        return typeof v === 'number' ? v : null;
+        if (typeof v === 'number' && Number.isFinite(v)) {
+          baseValue = v;
+          break;
+        }
+      }
+
+      const seriesData = labels.map(date => {
+        if (isHidden || baseValue == null) return null;
+        const v = pointsByDate.get(date);
+        if (typeof v !== 'number' || !Number.isFinite(v)) return null;
+        // Data_grandTotal 中的 value 已是百分比，这里按区间首日做“差值”，保持同一坐标含义（相对区间首日的收益率变化）
+        return v - baseValue;
       });
+
       return {
         type: 'line',
-        label: series.name || '累计收益',
+        label: series.name || '累计收益率',
         data: seriesData,
         borderColor: color,
         backgroundColor: color,
@@ -191,7 +205,7 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
       datasets: [
         {
           type: 'line',
-          label: '净值涨跌幅',
+          label: '本基金',
           data: percentageData,
           borderColor: lineColor,
           backgroundColor: (context) => {
@@ -576,7 +590,7 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
                 backgroundColor: lineColor
               }}
             />
-            <span className="muted">净值涨跌幅</span>
+            <span className="muted">本基金</span>
           </div>
           {currentIndex != null && percentageData[currentIndex] !== undefined && (
             <span
@@ -607,11 +621,24 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
             let valueText = '--';
             if (!isHidden && currentIndex != null && data[currentIndex]) {
               const targetDate = data[currentIndex].date;
-              const point = Array.isArray(series.points)
-                ? series.points.find(p => p.date === targetDate)
-                : null;
-              if (point && typeof point.value === 'number') {
-                valueText = `${point.value.toFixed(2)}%`;
+
+              // 与折线一致：对比线显示“相对当前区间首日”的累计收益率变化
+              const pointsArray = Array.isArray(series.points) ? series.points : [];
+              const pointsByDate = new Map(pointsArray.map(p => [p.date, p.value]));
+
+              let baseValue = null;
+              for (const d of data) {
+                const v = pointsByDate.get(d.date);
+                if (typeof v === 'number' && Number.isFinite(v)) {
+                  baseValue = v;
+                  break;
+                }
+              }
+
+              const rawPoint = pointsByDate.get(targetDate);
+              if (baseValue != null && typeof rawPoint === 'number' && Number.isFinite(rawPoint)) {
+                const normalized = rawPoint - baseValue;
+                valueText = `${normalized.toFixed(2)}%`;
               }
             }
             return (
@@ -644,9 +671,10 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
                     className="muted"
                     style={{ opacity: isHidden ? 0.5 : 1 }}
                   >
-                    {series.name || '累计收益'}
+                    {series.name}
                   </span>
                   <button
+                    className="muted"
                     type="button"
                     style={{
                       border: 'none',
@@ -683,18 +711,18 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
                     </svg>
                   </button>
                 </div>
-                {!isHidden && valueText !== '--' && (
-                  <span
-                    className="muted"
-                    style={{
-                      fontSize: 10,
-                      fontVariantNumeric: 'tabular-nums',
-                      paddingLeft: 14,
-                    }}
-                  >
-                    {valueText}
-                  </span>
-                )}
+                <span
+                  className="muted"
+                  style={{
+                    fontSize: 10,
+                    fontVariantNumeric: 'tabular-nums',
+                    paddingLeft: 14,
+                    minHeight: 14,
+                    visibility: isHidden || valueText === '--' ? 'hidden' : 'visible',
+                  }}
+                >
+                  {valueText}
+                </span>
               </div>
             );
           })}
diff --git a/app/components/MobileFundCardDrawer.jsx b/app/components/MobileFundCardDrawer.jsx
index f3f6435..9eddab4 100644
--- a/app/components/MobileFundCardDrawer.jsx
+++ b/app/components/MobileFundCardDrawer.jsx
@@ -47,7 +47,7 @@ export default function MobileFundCardDrawer({
         {children}
       </DrawerTrigger>
       <DrawerContent
-        className="h-[77vh] max-h-[88vh] mt-0 flex flex-col"
+        className="h-[85vh] max-h-[90vh] mt-0 flex flex-col"
         onPointerDownOutside={(e) => {
           if (blockDrawerClose) return;
           if (e?.target?.closest?.('[data-slot="dialog-content"], [role="dialog"]')) {