feat: Implement initial weather dashboard with interactive map, city details, and API integration.

2026-03-09 10:36:03 +08:00
parent d162b91ed9
commit 283a935f24
35 changed files with 5962 additions and 2098 deletions
@@ -0,0 +1,172 @@
+"use client";
+
+import clsx from "clsx";
+import { useDashboardStore } from "@/hooks/useDashboardStore";
+import { getCityScenery } from "@/lib/dashboard-scenery";
+import {
+  getCityProfileStats,
+  getClimateDrivers,
+  getRiskBadgeLabel,
+  getSettlementRiskNarrative,
+} from "@/lib/dashboard-utils";
+import { ForecastTable } from "@/components/dashboard/PanelSections";
+
+export function DetailPanel() {
+  const store = useDashboardStore();
+  const detail = store.selectedDetail;
+  const isOverlayOpen =
+    Boolean(store.futureModalDate) ||
+    store.historyState.isOpen ||
+    store.isGuideOpen;
+  const isVisible =
+    store.isPanelOpen &&
+    Boolean(store.selectedCity) &&
+    Boolean(detail) &&
+    !store.loadingState.cityDetail &&
+    !isOverlayOpen;
+  const profileStats = detail ? getCityProfileStats(detail) : [];
+  const riskLines = detail ? getSettlementRiskNarrative(detail) : [];
+  const climateDrivers = detail ? getClimateDrivers(detail) : [];
+  const scenery = getCityScenery(detail?.name);
+
+  return (
+    <aside
+      className={clsx("detail-panel", isVisible && "visible")}
+      aria-hidden={!isVisible}
+    >
+      <div className="panel-header">
+        <button
+          type="button"
+          className="panel-close"
+          aria-label="关闭城市详情面板"
+          onClick={store.closePanel}
+        >
+          ×
+        </button>
+        <div className="panel-title-area">
+          <h2>{detail?.display_name?.toUpperCase() || "—"}</h2>
+          <div className="panel-meta">
+            <span className={clsx("risk-badge", detail?.risk?.level || "low")}>
+              {getRiskBadgeLabel(detail?.risk?.level)}
+            </span>
+            <span className="local-time">
+              {detail
+                ? `${detail.local_date} ${detail.local_time}`
+                : "等待选择城市"}
+            </span>
+            <button
+              type="button"
+              className="history-btn"
+              title="查看今日日内分析"
+              onClick={store.openTodayModal}
+              disabled={!detail}
+            >
+              今日日内分析
+            </button>
+            <button
+              type="button"
+              className="history-btn"
+              title="查看历史对账"
+              onClick={() => void store.openHistory()}
+              disabled={!detail}
+            >
+              历史对账
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="panel-body">
+        {!detail ? (
+          <section>
+            <div style={{ color: "var(--text-muted)", fontSize: "13px" }}>
+              {store.loadingState.cityDetail
+                ? "正在加载城市详情..."
+                : "从左侧城市列表选择一个城市查看详情。"}
+            </div>
+          </section>
+        ) : (
+          <>
+            <section className="detail-scenery-card">
+              {scenery ? (
+                <>
+                  <img
+                    className="detail-scenery-image"
+                    src={scenery.imageUrl}
+                    alt={`${detail.display_name} 风景照`}
+                  />
+                  <div className="detail-scenery-overlay">
+                    <div className="detail-scenery-copy">
+                      <span className="detail-scenery-kicker">
+                        {detail.display_name}
+                      </span>
+                    </div>
+                    <a
+                      className="detail-scenery-credit"
+                      href={scenery.creditUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {scenery.creditLabel}
+                    </a>
+                  </div>
+                </>
+              ) : (
+                <div className="detail-scenery-fallback">
+                  <span className="detail-scenery-kicker">
+                    {detail.display_name}
+                  </span>
+                  <strong className="detail-scenery-title">
+                    城市风景与微气候
+                  </strong>
+                  <span className="detail-scenery-subtitle">
+                    当前没有匹配到风景图，仍可从下方档案与风险说明查看城市特征。
+                  </span>
+                </div>
+              )}
+            </section>
+
+            <section className="detail-section">
+              <h3>城市档案</h3>
+              <div className="detail-grid">
+                {profileStats.map((item) => (
+                  <div key={item.label} className="detail-card">
+                    <span className="detail-label">{item.label}</span>
+                    <span className="detail-value">{item.value}</span>
+                  </div>
+                ))}
+              </div>
+            </section>
+
+            <section className="detail-section">
+              <h3>结算与偏差风险</h3>
+              <div className="risk-info">
+                {riskLines.map((line) => (
+                  <div key={line} className="risk-row">
+                    <span style={{ color: "var(--accent-cyan)", opacity: 0.6 }}>
+                      •
+                    </span>
+                    <span>{line}</span>
+                  </div>
+                ))}
+              </div>
+            </section>
+
+            <section className="detail-section">
+              <h3>当地气候主要受什么影响</h3>
+              <div className="insight-list">
+                {climateDrivers.map((driver) => (
+                  <div key={driver.label} className="insight-item">
+                    <div className="insight-title">{driver.label}</div>
+                    <div className="insight-text">{driver.text}</div>
+                  </div>
+                ))}
+              </div>
+            </section>
+            <ForecastTable />
+          </>
+        )}
+      </div>
+    </aside>
+  );
+}