feat: Implement CitySidebar component with risk-level grouping and internationalization utilities.

2026-03-12 02:11:48 +08:00
parent ba0916ea51
commit ad2b1aa4b6
3 changed files with 212 additions and 58 deletions
@@ -1,20 +1,73 @@
 "use client";

+import { useEffect, useMemo, useState } from "react";
 import clsx from "clsx";
 import { useDashboardStore } from "@/hooks/useDashboardStore";
 import { useI18n } from "@/hooks/useI18n";
+import { CityListItem } from "@/lib/dashboard-types";
+
+type RiskGroupKey = "high" | "medium" | "low" | "other";
+
+function toRiskGroup(level?: string): RiskGroupKey {
+  if (level === "high" || level === "medium" || level === "low") return level;
+  return "other";
+}

 export function CitySidebar() {
  const store = useDashboardStore();
  const { t } = useI18n();
-  const sortedCities = [...store.cities].sort((a, b) => {
-    const order = { high: 0, medium: 1, low: 2 };
-    return (
-      (order[a.risk_level as keyof typeof order] ?? 3) -
-      (order[b.risk_level as keyof typeof order] ?? 3)
-    );
+  const selectedCity = store.selectedCity;
+  const riskOrder = { high: 0, medium: 1, low: 2, other: 3 };
+  const [expandedGroups, setExpandedGroups] = useState<Record<RiskGroupKey, boolean>>({
+    high: true,
+    medium: true,
+    low: false,
+    other: false,
  });

+  const sortedCities = useMemo(() => [...store.cities].sort((a, b) => {
+    const aSelected = a.name === selectedCity;
+    const bSelected = b.name === selectedCity;
+    if (aSelected !== bSelected) return aSelected ? -1 : 1;
+    const aGroup = toRiskGroup(a.risk_level);
+    const bGroup = toRiskGroup(b.risk_level);
+    return (
+      (riskOrder[aGroup] ?? 3) -
+      (riskOrder[bGroup] ?? 3) ||
+      a.display_name.localeCompare(b.display_name)
+    );
+  }), [store.cities, selectedCity]);
+
+  const groupedCities = useMemo(() => {
+    const groups: Record<RiskGroupKey, CityListItem[]> = {
+      high: [],
+      medium: [],
+      low: [],
+      other: [],
+    };
+    sortedCities.forEach((city) => {
+      groups[toRiskGroup(city.risk_level)].push(city);
+    });
+    return groups;
+  }, [sortedCities]);
+
+  useEffect(() => {
+    if (!selectedCity) return;
+    const selected = store.cities.find((city) => city.name === selectedCity);
+    if (!selected) return;
+    const groupKey = toRiskGroup(selected.risk_level);
+    setExpandedGroups((current) =>
+      current[groupKey] ? current : { ...current, [groupKey]: true },
+    );
+  }, [selectedCity, store.cities]);
+
+  const groupMeta: Array<{ key: RiskGroupKey; label: string }> = [
+    { key: "high", label: t("sidebar.group.high") },
+    { key: "medium", label: t("sidebar.group.medium") },
+    { key: "low", label: t("sidebar.group.low") },
+    { key: "other", label: t("sidebar.group.other") },
+  ];
+
  return (
    <nav className="city-list">
      <div className="city-list-header">
@@ -23,45 +76,80 @@ export function CitySidebar() {
      </div>

      <div className="city-list-items">
-        {sortedCities.map((city) => {
-          const detail = store.cityDetailsByName[city.name];
-          const summary = store.citySummariesByName[city.name];
-          const snapshot = detail || summary;
-          const isActive = store.selectedCity === city.name;
+        {groupMeta.map((group) => {
+          const citiesInGroup = groupedCities[group.key];
+          if (!citiesInGroup.length) return null;
+          const expanded = expandedGroups[group.key];

          return (
-            <button
-              key={city.name}
-              type="button"
-              className={clsx("city-item", isActive && "active")}
-              onClick={() => void store.selectCity(city.name)}
+            <section
+              key={group.key}
+              className={clsx("city-group", !expanded && "collapsed")}
            >
-              <div className="city-item-main">
-                <span className={clsx("risk-dot", city.risk_level)} />
-                <span className="city-name-text">{city.display_name}</span>
-                <span
-                  className={clsx(
-                    "city-temp",
-                    snapshot?.current?.temp != null && "loaded",
-                  )}
-                >
-                  {snapshot?.current?.temp != null
-                    ? `${snapshot.current.temp}${snapshot.temp_symbol || "°C"}`
-                    : t("common.na")}
+              <button
+                type="button"
+                className="city-group-header"
+                aria-expanded={expanded}
+                onClick={() =>
+                  setExpandedGroups((current) => ({
+                    ...current,
+                    [group.key]: !current[group.key],
+                  }))
+                }
+              >
+                <span className="city-group-title">{group.label}</span>
+                <span className="city-group-meta">
+                  <span className="city-group-count">{citiesInGroup.length}</span>
+                  <span className={clsx("city-group-arrow", expanded && "expanded")}>
+                    ▾
+                  </span>
                </span>
-              </div>
+              </button>

-              <div className="city-item-info">
-                <span className="city-local-time">
-                  {snapshot?.local_time ? `🕒 ${snapshot.local_time}` : ""}
-                </span>
-                <span className="city-max-info">
-                  {detail?.current?.max_temp_time
-                    ? t("sidebar.peakAt", { time: detail.current.max_temp_time })
-                    : ""}
-                </span>
+              <div className="city-group-items">
+                {citiesInGroup.map((city) => {
+                  const detail = store.cityDetailsByName[city.name];
+                  const summary = store.citySummariesByName[city.name];
+                  const snapshot = detail || summary;
+                  const isActive = store.selectedCity === city.name;
+
+                  return (
+                    <button
+                      key={city.name}
+                      type="button"
+                      className={clsx("city-item", isActive && "active")}
+                      onClick={() => void store.selectCity(city.name)}
+                    >
+                      <div className="city-item-main">
+                        <span className={clsx("risk-dot", city.risk_level)} />
+                        <span className="city-name-text">{city.display_name}</span>
+                        <span
+                          className={clsx(
+                            "city-temp",
+                            snapshot?.current?.temp != null && "loaded",
+                          )}
+                        >
+                          {snapshot?.current?.temp != null
+                            ? `${snapshot.current.temp}${snapshot.temp_symbol || "°C"}`
+                            : t("common.na")}
+                        </span>
+                      </div>
+
+                      <div className="city-item-info">
+                        <span className="city-local-time">
+                          {snapshot?.local_time ? `🕒 ${snapshot.local_time}` : ""}
+                        </span>
+                        <span className="city-max-info">
+                          {detail?.current?.max_temp_time
+                            ? t("sidebar.peakAt", { time: detail.current.max_temp_time })
+                            : ""}
+                        </span>
+                      </div>
+                    </button>
+                  );
+                })}
              </div>
-            </button>
+            </section>
          );
        })}
      </div>
@@ -314,7 +314,7 @@
 .root :global(.city-list-items) {
  overflow-y: auto;
  flex: 1;
-  padding: 4px;
+  padding: 6px 6px 8px;
 }
 .root :global(.city-list-items::-webkit-scrollbar) {
  width: 4px;
@@ -327,12 +327,82 @@
  border-radius: 2px;
 }

+.root :global(.city-group) {
+  border: 1px solid rgba(99, 102, 241, 0.12);
+  border-radius: 10px;
+  background: rgba(15, 23, 42, 0.35);
+  margin-bottom: 8px;
+  overflow: hidden;
+}
+
+.root :global(.city-group:last-child) {
+  margin-bottom: 0;
+}
+
+.root :global(.city-group-header) {
+  width: 100%;
+  border: none;
+  background: rgba(99, 102, 241, 0.08);
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.root :global(.city-group-title) {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+}
+
+.root :global(.city-group-meta) {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.root :global(.city-group-count) {
+  min-width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  padding: 0 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(99, 102, 241, 0.26);
+  color: var(--text-primary);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.root :global(.city-group-arrow) {
+  font-size: 11px;
+  color: var(--text-muted);
+  transform: rotate(-90deg);
+  transition: transform 0.2s ease;
+}
+
+.root :global(.city-group-arrow.expanded) {
+  transform: rotate(0deg);
+}
+
+.root :global(.city-group-items) {
+  padding: 4px;
+}
+
+.root :global(.city-group.collapsed .city-group-items) {
+  display: none;
+}
+
 .root :global(.city-item) {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
-  padding: 10px 12px;
+  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition);
@@ -354,34 +424,22 @@
 .root :global(.city-item-main) {
  display: flex;
  align-items: center;
-  gap: 10px;
+  gap: 8px;
  width: 100%;
 }

 .root :global(.city-item .city-name-text) {
-  font-size: 15px;
+  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
 }

-.root :global(.city-item .city-temp) {
-  margin-left: auto;
-  font-size: 16px;
-  font-weight: 800;
-  color: var(--accent-cyan);
-  opacity: 0;
-  transition: var(--transition);
-}
-.root :global(.city-item .city-temp.loaded) {
-  opacity: 1;
-}
-
 .root :global(.city-item-info) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px; /* Align with name text, after the dot */
-  font-size: 11px;
+  font-size: 10px;
  color: var(--text-muted);
 }

@@ -411,8 +469,8 @@

 .root :global(.city-item .city-temp) {
  margin-left: auto;
-  font-size: 12px;
-  font-weight: 600;
+  font-size: 13px;
+  font-weight: 700;
  color: var(--accent-cyan);
  opacity: 0;
  transition: var(--transition);
@@ -18,6 +18,10 @@ const MESSAGES: Record<Locale, Record<string, string>> = {

    "sidebar.title": "监控城市",
    "sidebar.peakAt": "峰值 @ {time}",
+    "sidebar.group.high": "高风险",
+    "sidebar.group.medium": "中风险",
+    "sidebar.group.low": "低风险",
+    "sidebar.group.other": "其他",

    "dashboard.loading": "正在获取气象数据，请稍候...",

@@ -118,6 +122,10 @@ const MESSAGES: Record<Locale, Record<string, string>> = {

    "sidebar.title": "Monitored Cities",
    "sidebar.peakAt": "Peak @ {time}",
+    "sidebar.group.high": "High Risk",
+    "sidebar.group.medium": "Medium Risk",
+    "sidebar.group.low": "Low Risk",
+    "sidebar.group.other": "Others",

    "dashboard.loading": "Loading weather data, please wait...",