Improve dashboard maintainability before the next release

The dashboard had several oversized orchestration, component, and CSS files that made product-copy changes and mobile/performance work risky. This refactor preserves behavior while splitting scan terminal CSS, opportunity helpers, future forecast panels, history/detail charts, and probability/model sections into smaller ownership boundaries. Constraint: No user-visible version bump because this batch is architecture and performance cleanup, not a release announcement. Rejected: Rewrite dashboard state management in the same batch | too broad for a safe upload after CSS and component splitting. Confidence: high Scope-risk: moderate Reversibility: clean Directive: Keep new component/CSS boundaries instead of moving product copy back into the large dashboard files. Tested: npm run build; npm run test:business; git diff --check Not-tested: Browser visual smoke test after push
2026-04-28 20:19:17 +08:00
parent 20516000a2
commit 2b1d7c0b65
56 changed files with 15303 additions and 15063 deletions
@@ -0,0 +1,63 @@
+import clsx from "clsx";
+
+export type FutureSyncStatusItem = {
+  key: string;
+  state: "ready" | "syncing";
+  label: string;
+  note: string;
+};
+
+export function FutureRefreshLock({ locale }: { locale: string }) {
+  return (
+    <div
+      className="future-v2-refresh-lock"
+      role="status"
+      aria-live="assertive"
+    >
+      <span className="future-v2-refresh-spinner" aria-hidden="true" />
+      <div>
+        <strong>
+          {locale === "en-US"
+            ? "Refreshing latest intraday data"
+            : "正在刷新最新日内数据"}
+        </strong>
+        <p>
+          {locale === "en-US"
+            ? "Old cached readings are temporarily locked to prevent misjudgement. The analysis will unlock after the latest anchor observation, model layer, and probability layer are ready."
+            : "旧缓存读数已临时锁定，避免误判。最新锚点观测、模型层和概率层就绪后会自动解锁。"}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export function FutureSyncStatusStrip({
+  items,
+  compact = false,
+}: {
+  items: readonly FutureSyncStatusItem[];
+  compact?: boolean;
+}) {
+  return (
+    <section
+      className={clsx("future-v2-sync-strip", compact && "future-v2-sync-strip-compact")}
+      aria-live="polite"
+    >
+      {items.map((item) => (
+        <div
+          key={item.key}
+          className={clsx(
+            "future-v2-sync-chip",
+            item.state === "syncing" && "syncing",
+          )}
+        >
+          <span className="future-v2-sync-dot" aria-hidden="true" />
+          <div className="future-v2-sync-copy">
+            <strong>{item.label}</strong>
+            <span>{item.note}</span>
+          </div>
+        </div>
+      ))}
+    </section>
+  );
+}