refactor: simplify dashboard ops signals

2026-06-29 16:15:19 +08:00
parent 535fa988ef
commit d452a7a4d9
7 changed files with 19 additions and 284 deletions
@@ -23,7 +23,8 @@ import './i18n';

 const { Sider, Content } = Layout;
 const { useToken } = theme;
-const DEFAULT_CHAT_FONT_FAMILY = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+const DEFAULT_FONT_FAMILY = '"Google Sans", "Product Sans", "SF Pro Display", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif';
+const DEFAULT_CHAT_FONT_FAMILY = DEFAULT_FONT_FAMILY;

 /** Show the main window (it starts hidden to avoid white flash). */
 async function showWindow() {
@@ -241,13 +242,9 @@ function AppRoot() {
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--font-weight', String(fontWeight));
-    if (fontFamily) {
-      root.style.setProperty('--font-family', fontFamily);
-      document.body.style.fontFamily = fontFamily;
-    } else {
-      root.style.removeProperty('--font-family');
-      document.body.style.removeProperty('font-family');
-    }
+    const resolvedFontFamily = fontFamily || DEFAULT_FONT_FAMILY;
+    root.style.setProperty('--font-family', resolvedFontFamily);
+    document.body.style.fontFamily = resolvedFontFamily;
    if (codeFontFamily) {
      root.style.setProperty('--code-font-family', codeFontFamily);
    } else {
@@ -259,7 +256,7 @@ function AppRoot() {
    root.style.setProperty('--chat-font-weight', String(chatFontWeight ?? 400));
  }, [fontWeight, fontFamily, codeFontFamily, chatFontSize, chatLineHeight, chatFontFamily, chatFontWeight]);

-  const themeConfig = useShadcnTheme(isDark, primaryColor, fontSize, borderRadius, fontFamily || undefined, codeFontFamily || undefined);
+  const themeConfig = useShadcnTheme(isDark, primaryColor, fontSize, borderRadius, fontFamily || DEFAULT_FONT_FAMILY, codeFontFamily || undefined);

  return (
    <ConfigProvider
@@ -36,7 +36,7 @@ export const CodeBlockPreviewModal: React.FC<Props> = ({ payload, open, onClose
        color: ${fg};
      }
      body {
-        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', ui-sans-serif, sans-serif;
+        font-family: var(--font-family, 'Google Sans', 'Product Sans', 'SF Pro Display', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', 'Segoe UI', Roboto, sans-serif);
      }
    </style>
  </head>
@@ -12,6 +12,8 @@
  --color-primary: #1677ff;
  --color-fill-alter: rgba(0, 0, 0, 0.02);
  --font-size-base: 14px;
+  --font-family: 'Google Sans', 'Product Sans', 'SF Pro Display', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', 'Segoe UI', Roboto, sans-serif;
+  --chat-font-family: var(--font-family);
 }

 html,
@@ -24,6 +26,7 @@ body,

 body {
  margin: 0;
+  font-family: var(--font-family);
  font-weight: var(--font-weight, 400);
  user-select: none;
  -webkit-user-select: none;
@@ -2,7 +2,7 @@

 /* ===== Design Tokens ===== */
 :root {
-  --font-sans: 'Geist', 'SF Pro Display', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', 'Segoe UI', Roboto, sans-serif;
+  --font-sans: 'Google Sans', 'Product Sans', 'SF Pro Display', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, 'Liberation Mono', Menlo, monospace;
  --color-bg: #f3f6f2;
  --color-bg-card: #ffffff;
@@ -3248,20 +3248,6 @@ body {
    gap: 10px;
  }

-  .dashboard-hero-status {
-    align-items: flex-start;
-    flex: 1 1 auto;
-    width: 100%;
-    border-radius: 14px;
-  }
-
-  .dashboard-hero-status span:last-child {
-    white-space: normal;
-  }
-
-  .dashboard-hero-signals {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
 }

@media (max-width: 1024px) {
@@ -3310,28 +3296,6 @@ body {
    gap: 10px;
  }

-  .dashboard-hero-status {
-    align-items: flex-start;
-    flex: 1 1 auto;
-    width: 100%;
-    border-radius: 14px;
-  }
-
-  .dashboard-hero-status span:last-child {
-    white-space: normal;
-  }
-
-  .dashboard-hero-signals {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .dashboard-hero-signal {
-    grid-template-columns: 1fr;
-    align-items: start;
-    border-radius: 14px;
-  }
-
  .dashboard-pulse-grid {
    grid-template-columns: 1fr;
  }
@@ -4967,119 +4931,6 @@ textarea {
  flex: 0 0 auto;
 }

-.dashboard-hero-status {
-  display: inline-flex;
-  align-items: center;
-  flex: 0 1 min(640px, 64%);
-  min-width: 0;
-  max-width: 100%;
-  gap: 7px;
-  padding: 6px 11px;
-  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--console-line));
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--color-bg-card) 76%, transparent);
-  color: var(--color-text-secondary);
-  font-size: 12px;
-  line-height: 1.45;
-  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent);
-}
-
-.dashboard-hero-status[data-tone="success"] {
-  border-color: color-mix(in srgb, var(--color-success) 28%, var(--console-line));
-}
-
-.dashboard-hero-status[data-tone="warning"] {
-  border-color: color-mix(in srgb, var(--color-warning) 36%, var(--console-line));
-}
-
-.dashboard-hero-status[data-tone="danger"] {
-  border-color: color-mix(in srgb, var(--color-danger) 38%, var(--console-line));
-}
-
-.dashboard-hero-status-dot {
-  flex: 0 0 auto;
-  width: 7px;
-  height: 7px;
-  border-radius: 999px;
-  background: var(--color-primary);
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent);
-}
-
-.dashboard-hero-status[data-tone="success"] .dashboard-hero-status-dot {
-  background: var(--color-success);
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-success) 12%, transparent);
-}
-
-.dashboard-hero-status[data-tone="warning"] .dashboard-hero-status-dot {
-  background: var(--color-warning);
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-warning) 14%, transparent);
-}
-
-.dashboard-hero-status[data-tone="danger"] .dashboard-hero-status-dot {
-  background: var(--color-danger);
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-danger) 14%, transparent);
-}
-
-.dashboard-hero-status strong {
-  flex: 0 0 auto;
-  color: var(--color-text-primary);
-  font-weight: 780;
-}
-
-.dashboard-hero-status span:last-child {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dashboard-hero-signals {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(118px, max-content));
-  gap: 8px;
-  align-items: center;
-}
-
-.dashboard-hero-signal {
-  display: inline-grid;
-  grid-template-columns: auto auto;
-  align-items: baseline;
-  justify-content: start;
-  gap: 7px;
-  min-height: 34px;
-  min-width: 0;
-  max-width: 100%;
-  padding: 7px 10px;
-  border: 1px solid var(--console-line);
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--color-bg-card) 66%, transparent);
-  color: var(--color-text-secondary);
-  font-size: 11px;
-  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 42%, transparent);
-}
-
-.dashboard-hero-signal[data-tone="success"] {
-  border-color: color-mix(in srgb, var(--color-success) 24%, var(--console-line));
-}
-
-.dashboard-hero-signal[data-tone="warning"] {
-  border-color: color-mix(in srgb, var(--color-warning) 32%, var(--console-line));
-}
-
-.dashboard-hero-signal[data-tone="danger"] {
-  border-color: color-mix(in srgb, var(--color-danger) 34%, var(--console-line));
-}
-
-.dashboard-hero-signal strong {
-  overflow: hidden;
-  color: var(--color-text-primary);
-  font-size: 12px;
-  font-weight: 780;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
 .console-hero-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(96px, 1fr));
@@ -8225,7 +8076,7 @@ textarea {
 }

 .login-brand-name {
-  font-family: 'Avenir Next', 'Segoe UI Variable Display', 'PingFang SC', 'Noto Sans SC', sans-serif;
+  font-family: var(--font-sans);
  font-size: clamp(38px, 3.6vw, 54px);
  font-weight: 800;
  line-height: 1;
@@ -8301,7 +8152,7 @@ textarea {
 }

 .login-capability-title {
-  font-family: 'Avenir Next', 'Segoe UI Variable Display', 'PingFang SC', 'Noto Sans SC', sans-serif;
+  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
@@ -8402,7 +8253,7 @@ textarea {

 .login-auth-title {
  margin: 0 0 10px;
-  font-family: 'Avenir Next', 'Segoe UI Variable Display', 'PingFang SC', 'Noto Sans SC', sans-serif;
+  font-family: var(--font-sans);
  font-size: 38px;
  font-weight: 800;
  line-height: 1.08;
@@ -5,8 +5,6 @@ import { useToast } from "../components/Toast.js";
 import { useIsMobile } from "../components/useIsMobile.js";
 import { useOptionalI18n } from "../i18n.js";
 import { formatCompactTokenMetric } from "../numberFormat.js";
-import { buildRouteHealthScore, type RouteHealthScore } from "./token-routes/routeHealth.js";
-import type { RouteSummaryRow } from "./token-routes/types.js";

 const ModelAnalysisPanel = lazy(
  () => import("../components/ModelAnalysisPanel.js"),
@@ -119,10 +117,6 @@ type SiteAvailabilitySummary = {
  buckets: SiteAvailabilityBucket[];
 };

-type DashboardRouteHealthItem = {
-  health: RouteHealthScore;
-};
-
 function formatAvailabilityPercent(value: number | null | undefined): string {
  if (
    typeof value !== "number" ||
@@ -259,7 +253,6 @@ export default function Dashboard({
  const [siteTrend, setSiteTrend] = useState<any[]>([]);
  const [siteLoading, setSiteLoading] = useState(true);
  const [sites, setSites] = useState<any[]>([]);
-  const [routeRows, setRouteRows] = useState<RouteSummaryRow[]>([]);
  const [chartsReady, setChartsReady] = useState(false);
  const [siteSpeedStates, setSiteSpeedStates] = useState<
    Record<string, SiteSpeedState>
@@ -359,15 +352,6 @@ export default function Dashboard({
    [trendDays],
  );

-  const loadRouteHealth = useCallback(async () => {
-    try {
-      const routes = await api.getRoutesSummary();
-      setRouteRows(Array.isArray(routes) ? routes : []);
-    } catch (err) {
-      console.error("Failed to load route health:", err);
-    }
-  }, []);
-
  useEffect(() => {
    load();
  }, [load]);
@@ -380,10 +364,6 @@ export default function Dashboard({
    loadSiteStats();
  }, [loadSiteStats]);

-  useEffect(() => {
-    void loadRouteHealth();
-  }, [loadRouteHealth]);
-
  useEffect(() => scheduleDashboardIdleWork(() => setChartsReady(true)), []);

  useEffect(() => {
@@ -594,16 +574,6 @@ export default function Dashboard({
  const siteAvailability = showInactiveSites
    ? [...activeSites, ...inactiveSites]
    : activeSites;
-  const proxyFailed24h = Math.max(0, proxy24hTotal - proxy24hSuccess);
-  const proxySuccessRate =
-    proxy24hTotal > 0 ? (proxy24hSuccess / proxy24hTotal) * 100 : 100;
-  const activeAccountRate =
-    totalAccounts > 0 ? (activeAccounts / totalAccounts) * 100 : 0;
-  const siteRiskCount = activeSites.filter((site) => {
-    const availability = site.availabilityPercent ?? 100;
-    const latency = site.averageLatencyMs ?? 0;
-    return availability < 99 || latency > 1800 || site.failedCount > 0;
-  }).length;
  const riskySites = activeSites
    .filter((site) => {
      const availability = site.availabilityPercent ?? 100;
@@ -622,76 +592,6 @@ export default function Dashboard({
      return bScore - aScore;
    })
    .slice(0, 3);
-  const routeHealthItems: DashboardRouteHealthItem[] = routeRows
-    .map((route) => ({
-      health: buildRouteHealthScore(route),
-    }))
-    .sort((a, b) => {
-      const toneRank = { danger: 0, warning: 1, good: 2, muted: 3 };
-      const rankDelta = toneRank[a.health.tone] - toneRank[b.health.tone];
-      if (rankDelta !== 0) return rankDelta;
-      return a.health.score - b.health.score;
-    });
-  const routeHealthCounts = routeHealthItems.reduce(
-    (counts, item) => {
-      counts[item.health.tone] += 1;
-      return counts;
-    },
-    { good: 0, warning: 0, danger: 0, muted: 0 },
-  );
-  const routeRiskItems = routeHealthItems.filter(
-    (item) => item.health.tone === "danger" || item.health.tone === "warning",
-  );
-  const routeRiskCount = routeRiskItems.length;
-  const hasDangerRoute = routeHealthCounts.danger > 0;
-  const overallHealthTone =
-    proxyFailed24h > 0 || hasDangerRoute
-      ? "danger"
-      : proxySuccessRate < 99 || siteRiskCount > 0 || routeRiskCount > 0
-        ? "warning"
-        : "success";
-  const overallHealthLabel =
-    overallHealthTone === "success"
-      ? t("健康")
-      : overallHealthTone === "warning"
-        ? t("需关注")
-        : t("异常");
-  const avgActiveSiteLatency = activeSites.length > 0
-    ? Math.round(
-      activeSites.reduce(
-        (total, site) => total + safeNumber(site.averageLatencyMs),
-        0,
-      ) / activeSites.length,
-    )
-    : 0;
-  const healthSummary =
-    overallHealthTone === "success"
-      ? t("平台运行平稳，可以继续观察吞吐和成本变化。")
-      : overallHealthTone === "warning"
-        ? t("部分指标需要留意，建议优先查看风险站点、路由和运维监控。")
-        : t("平台存在明显异常，建议立即进入运维监控检查路由、站点和请求异常。");
-  const dashboardHeroSignals = [
-    {
-      label: t("24h 失败"),
-      value: Math.round(proxyFailed24h).toLocaleString(),
-      tone: proxyFailed24h > 0 ? "warning" : "success",
-    },
-    {
-      label: t("平均延迟"),
-      value: avgActiveSiteLatency > 0 ? `${avgActiveSiteLatency}ms` : t("暂无"),
-      tone: avgActiveSiteLatency > 1800 ? "warning" : "success",
-    },
-    {
-      label: t("账户启用"),
-      value: `${activeAccountRate.toFixed(0)}%`,
-      tone: activeAccountRate >= 80 ? "success" : "warning",
-    },
-    {
-      label: "Tokens/min",
-      value: formatCompactTokenMetric(tokensPerMinute),
-      tone: requestsPerMinute > 0 ? "primary" : "muted",
-    },
-  ];
  const getLatencyColor = (ms: number) =>
    ms <= 500
      ? "var(--color-success)"
@@ -746,24 +646,11 @@ export default function Dashboard({
        <div className="console-hero-copy">
          <div className="dashboard-hero-topline">
            <span className="console-kicker">BossAI Console</span>
-            <div className="dashboard-hero-status" data-tone={overallHealthTone}>
-              <span className="dashboard-hero-status-dot" aria-hidden="true" />
-              <strong>{overallHealthLabel}</strong>
-              <span>{healthSummary}</span>
-            </div>
          </div>
          <div className="dashboard-hero-maincopy">
            <h1>{greetingText}</h1>
            <p>{t("统一观察模型路由、站点健康、账户余额、请求吞吐和计费成本。这里是整个平台的运营控制台。")}</p>
          </div>
-          <div className="dashboard-hero-signals" aria-label={t("关键运行信号")}>
-            {dashboardHeroSignals.map((signal) => (
-              <div key={signal.label} className="dashboard-hero-signal" data-tone={signal.tone}>
-                <span>{signal.label}</span>
-                <strong>{signal.value}</strong>
-              </div>
-            ))}
-          </div>
        </div>
        <div className="console-hero-rail" aria-label={t("实时运营摘要")}>
          <div>
@@ -785,7 +672,6 @@ export default function Dashboard({
              void load(true);
              void loadInsights(true);
              void loadSiteStats(true);
-              void loadRouteHealth();
            }}
            disabled={refreshing}
            className="topbar-icon-btn"
@@ -13,16 +13,13 @@ describe('Dashboard mobile layout', () => {
    expect(source).toContain('gridTemplateColumns: isMobile ? "1fr" : "1fr 300px"');
    expect(source).toContain('className="dashboard-hero-topline"');
    expect(source).toContain('className="dashboard-hero-maincopy"');
-    expect(source).toMatch(/className="dashboard-hero-topline"[\s\S]*?className="dashboard-hero-status"[\s\S]*?className="dashboard-hero-maincopy"/);
+    expect(source).not.toContain('className="dashboard-hero-status"');
+    expect(source).not.toContain('className="dashboard-hero-signals"');
    expect(css).toContain('.dashboard-hero-topline {');
    expect(css).toContain('.dashboard-hero-maincopy {');
    expect(css).toMatch(/@media \(max-width: 1200px\) \{[\s\S]*?\.dashboard-hero\.console-hero \{[\s\S]*?grid-template-columns: 1fr;/);
    expect(css).toMatch(/@media \(max-width: 1200px\) \{[\s\S]*?\.dashboard-hero \.console-hero-rail \{[\s\S]*?width: 100%;[\s\S]*?grid-template-columns: repeat\(3, minmax\(0, 1fr\)\);/);
    expect(css).toMatch(/@media \(max-width: 1100px\) \{[\s\S]*?\.dashboard-hero-topline \{[\s\S]*?flex-direction: column;/);
-    expect(css).toMatch(/@media \(max-width: 1100px\) \{[\s\S]*?\.dashboard-hero-status \{[\s\S]*?width: 100%;/);
-    expect(css).toMatch(/@media \(max-width: 1100px\) \{[\s\S]*?\.dashboard-hero-signals \{[\s\S]*?grid-template-columns: repeat\(2, minmax\(0, 1fr\)\);/);
    expect(css).toMatch(/@media \(max-width: 860px\) \{[\s\S]*?\.dashboard-hero-topline \{[\s\S]*?flex-direction: column;/);
-    expect(css).toMatch(/@media \(max-width: 860px\) \{[\s\S]*?\.dashboard-hero-status \{[\s\S]*?width: 100%;/);
-    expect(css).toMatch(/@media \(max-width: 860px\) \{[\s\S]*?\.dashboard-hero-signals \{[\s\S]*?grid-template-columns: repeat\(2, minmax\(0, 1fr\)\);/);
  });
 });
@@ -269,9 +269,10 @@ describe('Dashboard and ops log placement', () => {
      await flushMicrotasks();

      const dashboardText = collectText(root.root);
-      expect(dashboardText).toContain('健康');
-      expect(dashboardText).toContain('平台运行平稳，可以继续观察吞吐和成本变化。');
+      expect(dashboardText).not.toContain('平台运行平稳，可以继续观察吞吐和成本变化。');
      expect(dashboardText).not.toContain('平台存在明显异常');
+      expect(root.root.findAllByProps({ className: 'dashboard-hero-status' })).toHaveLength(0);
+      expect(root.root.findAllByProps({ className: 'dashboard-hero-signals' })).toHaveLength(0);
    } finally {
      root?.unmount();
    }