Update src/App_New.tsx

src/App_New.tsx

@@ -74,9 +74,19 @@ export default function App() {
   const [confirming, setConfirming] = useState(false);
   const [finalSaved, setFinalSaved] = useState(false);
 
-  // 方案A：分时视图切换
+  // 分时视图开关 & 所选日期索引
   const [intradayMode, setIntradayMode] = useState(false);
-  const currentDayIdx = Math.min(windowLen - 1, dates.length - 1);
+  // intradayDayIdx 为“在 dates 数组里的下标”；默认跟随窗口最后一天
+  const [intradayDayIdx, setIntradayDayIdx] = useState<number | null>(null);
+
+  // 当窗口推进或数据变更时，若未选择指定日期，则默认使用窗口最后一天
+  useEffect(() => {
+    if (!dates.length) return;
+    const lastIdx = Math.min(windowLen - 1, dates.length - 1);
+    if (intradayDayIdx === null || intradayDayIdx > lastIdx) {
+      setIntradayDayIdx(lastIdx);
+    }
+  }, [dates, windowLen, intradayDayIdx]);
 
   useEffect(() => {
     if (Object.keys(rawData).length === 0) {
@@ -111,20 +121,25 @@ export default function App() {
     });
   }, [assets, dates, windowLen, rawData]);
 
-  // 分时数据：展示“当前窗口最后一天”的分钟级走势（当日内归一）
+  // 可见日期列表 & 当前分时查看日期
+  const visibleDates = useMemo(() => dates.slice(0, Math.max(0, windowLen)), [dates, windowLen]);
+  const activeIntradayIdx = intradayDayIdx ?? Math.min(windowLen - 1, dates.length - 1);
+  const activeIntradayDate = visibleDates[activeIntradayIdx] ?? "";
+
+  // 分时数据：展示“所选日期”的分钟级走势（当日内归一）
   const intradayData = useMemo(() => {
-    if (!dates.length || currentDayIdx < 0) return [] as any[];
+    if (!dates.length || activeIntradayIdx == null || activeIntradayIdx < 0) return [] as any[];
 
     // 当日各资产的分钟序列长度最大值
     const maxBars = assets.reduce((m, a) => {
-      const arr = rawData[a]?.[currentDayIdx]?.close ?? [];
+      const arr = rawData[a]?.[activeIntradayIdx]?.close ?? [];
       return Math.max(m, arr.length);
     }, 0);
 
     // 当日内归一：每个资产以当日首笔为1
     const dayFirstPrice: Record<string, number> = {};
     assets.forEach(a => {
-      const arr = rawData[a]?.[currentDayIdx]?.close ?? [];
+      const arr = rawData[a]?.[activeIntradayIdx]?.close ?? [];
       dayFirstPrice[a] = arr.length ? arr[0] : 1;
     });
 
@@ -132,7 +147,7 @@ export default function App() {
     for (let i = 0; i < maxBars; i++) {
       const row: Record<string, any> = { idx: i + 1 };
       assets.forEach(a => {
-        const arr = rawData[a]?.[currentDayIdx]?.close ?? [];
+        const arr = rawData[a]?.[activeIntradayIdx]?.close ?? [];
         const val = arr[i];
         if (typeof val === "number") {
           const base = dayFirstPrice[a] || 1;
@@ -144,7 +159,7 @@ export default function App() {
       rows.push(row);
     }
     return rows;
-  }, [assets, rawData, currentDayIdx, dates.length]);
+  }, [assets, rawData, dates.length, activeIntradayIdx]);
 
   function realizedNextDayReturn(asset: string) {
     const t = windowLen - 1;
@@ -165,6 +180,8 @@ export default function App() {
     setWindowLen(START_DAY);
     setSelections([]);
     setSelectedAsset(null);
+    setIntradayMode(false);
+    setIntradayDayIdx(null);
     setMessage(`Loaded example: ${keys.length} assets, ${first.length} days.`);
     try { localStorage.removeItem("asset_experiment_selections"); } catch {}
   }
@@ -176,6 +193,7 @@ export default function App() {
     setWindowLen(START_DAY);
     setMessage("Session reset.");
     setIntradayMode(false);
+    setIntradayDayIdx(null);
     try { localStorage.removeItem("asset_experiment_selections"); } catch {}
   }
 
@@ -233,6 +251,7 @@ export default function App() {
         setSelections([]);
         setSelectedAsset(null);
         setIntradayMode(false);
+        setIntradayDayIdx(null);
         setMessage(`Loaded file: ${keys.length} assets, ${firstArr.length} days.`);
         try { localStorage.removeItem("asset_experiment_selections"); } catch {}
       } catch (err: any) {
@@ -370,12 +389,47 @@ export default function App() {
     return <FinalSummary assets={assets} selections={selections} />;
   }
 
+  // 分时控制条（只在 intradayMode 下显示）
+  const IntradayControls = () => (
+    <div className="flex items-center gap-2">
+      <span className="text-xs px-2 py-1 rounded bg-indigo-50 text-indigo-700">
+        Intraday • {activeIntradayDate || "-"}
+      </span>
+      <button
+        onClick={() => setIntradayDayIdx(i => (i == null ? 0 : Math.max(0, i - 1)))}
+        className="text-xs px-2 py-1 rounded-xl border border-gray-200 hover:bg-gray-50"
+        disabled={activeIntradayIdx <= 0}
+        title="Prev day"
+      >
+        ‹
+      </button>
+      <select
+        className="text-xs px-2 py-1 rounded-xl border border-gray-200"
+        value={activeIntradayIdx}
+        onChange={(e) => setIntradayDayIdx(Number(e.target.value))}
+      >
+        {visibleDates.map((d, idx) => (
+          <option key={d} value={idx}>{d}</option>
+        ))}
+      </select>
+      <button
+        onClick={() => setIntradayDayIdx(i => (i == null ? 0 : Math.min(visibleDates.length - 1, i + 1)))}
+        className="text-xs px-2 py-1 rounded-xl border border-gray-200 hover:bg-gray-50"
+        disabled={activeIntradayIdx >= visibleDates.length - 1}
+        title="Next day"
+      >
+        ›
+      </button>
+    </div>
+  );
+
   return (
     <div className="p-6 bg-gray-50 min-h-screen flex flex-col gap-6">
       <div className="flex flex-wrap justify-between items-center gap-3">
         <div className="flex items-center gap-2">
           <h1 className="text-xl font-semibold">Asset Choice Simulation</h1>
           <span className="text-xs text-gray-500">Day {windowLen} / {MAX_DAYS}</span>
+          {intradayMode && <IntradayControls />}
         </div>
         <div className="flex items-center gap-2">
           <input type="file" accept="application/json" onChange={onFile} className="text-sm" />
@@ -384,9 +438,9 @@ export default function App() {
           <button
             onClick={() => setIntradayMode(m => !m)}
             className="text-sm px-3 py-1.5 rounded-xl bg-indigo-100 text-indigo-800 hover:bg-indigo-200"
-            title="Toggle intraday view for the last visible day"
+            title="Toggle intraday view"
           >
-            {intradayMode ? "View Daily" : "View Intraday (current day)"}
+            {intradayMode ? "View Daily" : "View Intraday"}
           </button>
           <button onClick={exportLog} className="text-sm px-3 py-1.5 rounded-xl bg-gray-900 text-white hover:bg-black">Export Log</button>
         </div>