feat: refine expo admin mobile flows

app/(tabs)/monitor.tsx

@@ -1,15 +1,13 @@
 import { useQuery } from '@tanstack/react-query';
-import { AlertTriangle, Coins, Gauge, RefreshCw, Rows3, Wrench, Zap } from 'lucide-react-native';
+import { router } from 'expo-router';
 import { useMemo, useState } from 'react';
-import { Platform, Pressable, Text, View, useWindowDimensions } from 'react-native';
+import { Pressable, RefreshControl, ScrollView, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { BarChartCard } from '@/src/components/bar-chart-card';
+import { formatTokenValue } from '@/src/lib/formatters';
 import { DonutChartCard } from '@/src/components/donut-chart-card';
 import { LineTrendChart } from '@/src/components/line-trend-chart';
-import { ListCard } from '@/src/components/list-card';
-import { ScreenShell } from '@/src/components/screen-shell';
-import { useScreenInteractive } from '@/src/hooks/use-screen-interactive';
-import { formatTokenValue } from '@/src/lib/formatters';
 import { getAdminSettings, getDashboardModels, getDashboardStats, getDashboardTrend, listAccounts } from '@/src/services/admin';
 import { adminConfigState } from '@/src/store/admin-config';
 
@@ -17,6 +15,32 @@ const { useSnapshot } = require('valtio/react');
 
 type RangeKey = '24h' | '7d' | '30d';
 
+const colors = {
+  page: '#f4efe4',
+  card: '#fbf8f2',
+  mutedCard: '#f1ece2',
+  primary: '#1d5f55',
+  text: '#16181a',
+  subtext: '#6f665c',
+  border: '#e7dfcf',
+  dangerBg: '#fbf1eb',
+  danger: '#c25d35',
+  successBg: '#e6f4ee',
+  success: '#1d5f55',
+};
+
+const RANGE_OPTIONS: Array<{ key: RangeKey; label: string }> = [
+  { key: '24h', label: '24H' },
+  { key: '7d', label: '7D' },
+  { key: '30d', label: '30D' },
+];
+
+const RANGE_TITLE_MAP: Record<RangeKey, string> = {
+  '24h': '24H',
+  '7d': '7D',
+  '30d': '30D',
+};
+
 function getDateRange(rangeKey: RangeKey) {
   const end = new Date();
   const start = new Date();
@@ -38,11 +62,27 @@ function getDateRange(rangeKey: RangeKey) {
   };
 }
 
-const RANGE_OPTIONS: Array<{ key: RangeKey; label: string }> = [
-  { key: '24h', label: '24H' },
-  { key: '7d', label: '7D' },
-  { key: '30d', label: '30D' },
-];
+function formatNumber(value?: number) {
+  if (typeof value !== 'number' || Number.isNaN(value)) return '--';
+  return new Intl.NumberFormat('en-US').format(value);
+}
+
+function formatMoney(value?: number) {
+  if (typeof value !== 'number' || Number.isNaN(value)) return '--';
+  return `$${value.toFixed(2)}`;
+}
+
+function formatCompactNumber(value?: number) {
+  if (typeof value !== 'number' || Number.isNaN(value)) return '--';
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
+  if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;
+  return String(value);
+}
+
+function formatTokenDisplay(value?: number) {
+  if (typeof value !== 'number' || Number.isNaN(value)) return '--';
+  return formatTokenValue(value);
+}
 
 function getPointLabel(value: string, rangeKey: RangeKey) {
   if (rangeKey === '24h') {
@@ -52,49 +92,97 @@ function getPointLabel(value: string, rangeKey: RangeKey) {
   return value.slice(5, 10);
 }
 
+function getErrorMessage(error: unknown) {
+  if (error instanceof Error && error.message) {
+    switch (error.message) {
+      case 'BASE_URL_REQUIRED':
+        return '请先去服务器页填写服务地址。';
+      case 'ADMIN_API_KEY_REQUIRED':
+        return '请先去服务器页填写 Admin Token。';
+      case 'INVALID_SERVER_RESPONSE':
+        return '当前服务返回的数据格式不正确，请确认它是可用的 Sub2API 管理接口。';
+      default:
+        return error.message;
+    }
+  }
+
+  return '当前无法加载概览数据，请检查服务地址、Token 和网络。';
+}
+
+function Section({ title, subtitle, children, right }: { title: string; subtitle?: string; children: React.ReactNode; right?: React.ReactNode }) {
+  return (
+    <View style={{ backgroundColor: colors.card, borderRadius: 18, padding: 16 }}>
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between', gap: 12 }}>
+        <View style={{ flex: 1 }}>
+          <Text style={{ fontSize: 18, fontWeight: '700', color: colors.text }}>{title}</Text>
+          {subtitle ? <Text style={{ marginTop: 6, fontSize: 12, color: colors.subtext }}>{subtitle}</Text> : null}
+        </View>
+        {right}
+      </View>
+      <View style={{ marginTop: 14 }}>{children}</View>
+    </View>
+  );
+}
+
+function StatCard({ title, value, detail }: { title: string; value: string; detail?: string }) {
+  return (
+    <View style={{ flex: 1, backgroundColor: colors.card, borderRadius: 16, padding: 14 }}>
+      <Text style={{ fontSize: 12, color: '#8a8072' }}>{title}</Text>
+      <Text style={{ marginTop: 8, fontSize: 24, fontWeight: '700', color: colors.text }}>{value}</Text>
+      {detail ? <Text style={{ marginTop: 6, fontSize: 12, color: colors.subtext }}>{detail}</Text> : null}
+    </View>
+  );
+}
+
 export default function MonitorScreen() {
-  useScreenInteractive('monitor_interactive');
   const config = useSnapshot(adminConfigState);
-  const { width } = useWindowDimensions();
-  const contentWidth = Math.max(width - 24, 280);
+  const hasAccount = Boolean(config.baseUrl.trim());
   const [rangeKey, setRangeKey] = useState<RangeKey>('7d');
   const range = useMemo(() => getDateRange(rangeKey), [rangeKey]);
-  const hasAccount = Boolean(config.baseUrl.trim());
-
-  const statsQuery = useQuery({
-    queryKey: ['monitor-stats'],
-    queryFn: getDashboardStats,
-    enabled: hasAccount,
-  });
 
+  const statsQuery = useQuery({ queryKey: ['monitor-stats'], queryFn: getDashboardStats, enabled: hasAccount });
+  const settingsQuery = useQuery({ queryKey: ['admin-settings'], queryFn: getAdminSettings, enabled: hasAccount });
+  const accountsQuery = useQuery({ queryKey: ['monitor-accounts'], queryFn: () => listAccounts(''), enabled: hasAccount });
   const trendQuery = useQuery({
     queryKey: ['monitor-trend', rangeKey, range.start_date, range.end_date, range.granularity],
     queryFn: () => getDashboardTrend(range),
     enabled: hasAccount,
   });
-
   const modelsQuery = useQuery({
     queryKey: ['monitor-models', rangeKey, range.start_date, range.end_date],
     queryFn: () => getDashboardModels(range),
     enabled: hasAccount,
   });
 
-  const settingsQuery = useQuery({
-    queryKey: ['admin-settings'],
-    queryFn: getAdminSettings,
-    enabled: hasAccount,
-  });
-
-  const accountsQuery = useQuery({
-    queryKey: ['monitor-accounts'],
-    queryFn: () => listAccounts(''),
-    enabled: hasAccount,
-  });
+  function refetchAll() {
+    statsQuery.refetch();
+    settingsQuery.refetch();
+    accountsQuery.refetch();
+    trendQuery.refetch();
+    modelsQuery.refetch();
+  }
 
   const stats = statsQuery.data;
-  const trend = trendQuery.data?.trend ?? [];
-  const accounts = accountsQuery.data?.items ?? [];
   const siteName = settingsQuery.data?.site_name?.trim() || '管理控制台';
+  const accounts = accountsQuery.data?.items ?? [];
+  const trend = trendQuery.data?.trend ?? [];
+  const topModels = (modelsQuery.data?.models ?? []).slice(0, 5);
+  const errorMessage = getErrorMessage(statsQuery.error ?? settingsQuery.error ?? accountsQuery.error ?? trendQuery.error ?? modelsQuery.error);
+  const currentPageErrorAccounts = accounts.filter((item) => item.status === 'error' || item.error_message).length;
+  const currentPagePausedAccounts = accounts.filter((item) => item.schedulable === false && item.status !== 'error' && !item.error_message).length;
+  const currentPageBusyAccounts = accounts.filter((item) => (item.current_concurrency ?? 0) > 0 && item.status !== 'error' && !item.error_message).length;
+  const totalAccounts = stats?.total_accounts ?? accountsQuery.data?.total ?? accounts.length;
+  const aggregatedErrorAccounts = stats?.error_accounts ?? 0;
+  const errorAccounts = Math.max(aggregatedErrorAccounts, currentPageErrorAccounts);
+  const healthyAccounts = stats?.normal_accounts ?? Math.max(totalAccounts - errorAccounts, 0);
+  const latestTrendPoints = trend.slice(-6).reverse();
+  const selectedTokenTotal = trend.reduce((sum, item) => sum + item.total_tokens, 0);
+  const selectedCostTotal = trend.reduce((sum, item) => sum + item.cost, 0);
+  const selectedOutputTotal = trend.reduce((sum, item) => sum + item.output_tokens, 0);
+  const rangeTitle = RANGE_TITLE_MAP[rangeKey];
+  const isLoading = statsQuery.isLoading || settingsQuery.isLoading || accountsQuery.isLoading;
+  const hasError = Boolean(statsQuery.error || settingsQuery.error || accountsQuery.error || trendQuery.error || modelsQuery.error);
+
   const throughputPoints = useMemo(
     () => trend.map((item) => ({ label: getPointLabel(item.date, rangeKey), value: item.total_tokens })),
     [rangeKey, trend]
@@ -107,281 +195,196 @@ export default function MonitorScreen() {
     () => trend.map((item) => ({ label: getPointLabel(item.date, rangeKey), value: item.cost })),
     [rangeKey, trend]
   );
-  const topModels = useMemo(() => (modelsQuery.data?.models ?? []).slice(0, 5), [modelsQuery.data?.models]);
-  const incidentAccounts = useMemo(
-    () => accounts.filter((item) => item.status === 'error' || item.error_message).slice(0, 5),
-    [accounts]
-  );
   const totalInputTokens = useMemo(() => trend.reduce((sum, item) => sum + item.input_tokens, 0), [trend]);
   const totalOutputTokens = useMemo(() => trend.reduce((sum, item) => sum + item.output_tokens, 0), [trend]);
   const totalCacheReadTokens = useMemo(() => trend.reduce((sum, item) => sum + item.cache_read_tokens, 0), [trend]);
-  const busyAccounts = useMemo(
-    () => accounts.filter((item) => (item.current_concurrency ?? 0) > 0 && item.status !== 'error' && !item.error_message).length,
-    [accounts]
-  );
-  const pausedAccounts = useMemo(
-    () => accounts.filter((item) => item.schedulable === false && item.status !== 'error' && !item.error_message).length,
-    [accounts]
-  );
-  const errorAccounts = useMemo(
-    () => accounts.filter((item) => item.status === 'error' || item.error_message).length,
-    [accounts]
-  );
-  const healthyAccounts = Math.max(accounts.length - busyAccounts - pausedAccounts - errorAccounts, 0);
-  const summaryCards = [
-    {
-      label: 'Token',
-      value: stats ? formatTokenValue(stats.today_tokens ?? 0) : '--',
-      icon: Zap,
-      tone: 'dark' as const,
-    },
-    {
-      label: '成本',
-      value: stats ? `$${Number(stats.today_cost ?? 0).toFixed(2)}` : '--',
-      icon: Coins,
-    },
-    {
-      label: '输出',
-      value: stats ? formatTokenValue(stats.today_output_tokens ?? 0) : '--',
-      icon: Rows3,
-    },
-    {
-      label: '账号',
-      value: String(accounts.length || stats?.total_accounts || 0),
-      detail: `${errorAccounts} 异常 / ${pausedAccounts} 暂停`,
-      icon: Rows3,
-    },
-    {
-      label: 'TPM',
-      value: String(stats?.tpm ?? '--'),
-      icon: Gauge,
-    },
-    {
-      label: '健康',
-      value: String(healthyAccounts),
-      detail: `${busyAccounts} 繁忙`,
-      icon: AlertTriangle,
-    },
-  ];
-  const summaryRows = [0, 3].map((index) => summaryCards.slice(index, index + 3));
-  const useMasonry = Platform.OS === 'web' || width >= 640;
-  const summaryCardWidth = Math.floor((contentWidth - 16) / 3);
-
-  const cards = [
-    {
-      key: 'throughput',
-      node: throughputPoints.length > 1 ? (
-        <LineTrendChart
-          title="Token 吞吐"
-          subtitle="整体负载曲线"
-          points={throughputPoints}
-          color="#a34d2d"
-          formatValue={formatTokenValue}
-          compact={useMasonry}
-        />
-      ) : null,
-    },
-    {
-      key: 'requests',
-      node: requestPoints.length > 1 ? (
-        <LineTrendChart
-          title="请求趋势"
-          subtitle="调用波峰变化"
-          points={requestPoints}
-          color="#1d5f55"
-          compact={useMasonry}
-        />
-      ) : null,
-    },
-    {
-      key: 'cost',
-      node: costPoints.length > 1 ? (
-        <LineTrendChart
-          title="成本趋势"
-          subtitle="花费变化"
-          points={costPoints}
-          color="#7651c8"
-          formatValue={(value) => `$${value.toFixed(2)}`}
-          compact={useMasonry}
-        />
-      ) : null,
-    },
-    {
-      key: 'token-structure',
-      node: (
-        <BarChartCard
-          title="Token 结构"
-          subtitle="输入、输出、缓存读占比"
-          items={[
-            {
-              label: '输入 Token',
-              value: totalInputTokens,
-              color: '#1d5f55',
-              hint: '输入 Token 指请求进入模型前消耗的 token，通常由提示词、上下文和历史消息组成。',
-            },
-            {
-              label: '输出 Token',
-              value: totalOutputTokens,
-              color: '#d38b36',
-              hint: '输出 Token 指模型返回内容消耗的 token，越长通常代表生成内容越多、成本越高。',
-            },
-            {
-              label: '缓存读取 Token',
-              value: totalCacheReadTokens,
-              color: '#7d7468',
-              hint: '缓存读取 Token 表示命中缓存后复用的 token，数值越高通常意味着缓存策略更有效。',
-            },
-          ]}
-          formatValue={formatTokenValue}
-        />
-      ),
-    },
-    {
-      key: 'health',
-      node: (
-        <DonutChartCard
-          title="账号健康"
-          subtitle="健康、繁忙、暂停、异常"
-          centerLabel="总账号"
-          centerValue={String(accounts.length || stats?.total_accounts || 0)}
-          segments={[
-            { label: '健康', value: healthyAccounts, color: '#1d5f55' },
-            { label: '繁忙', value: busyAccounts, color: '#d38b36' },
-            { label: '暂停', value: pausedAccounts, color: '#7d7468' },
-            { label: '异常', value: errorAccounts, color: '#a34d2d' },
-          ]}
-        />
-      ),
-    },
-    {
-      key: 'models',
-      node: (
-        <BarChartCard
-          title="热点模型"
-          subtitle="模型负载分布"
-          items={topModels.map((item) => ({
-            label: item.model,
-            value: item.total_tokens,
-            color: '#a34d2d',
-            meta: `请求 ${item.requests} · 成本 $${Number(item.cost).toFixed(2)}`,
-          }))}
-          formatValue={formatTokenValue}
-        />
-      ),
-    },
-    {
-      key: 'incidents',
-      node: (
-        <ListCard title="排障列表" meta="优先关注状态异常或带错误信息的上游账号" icon={Wrench}>
-          <View className="gap-3">
-            {incidentAccounts.map((item) => (
-              <View key={item.id} className="rounded-[18px] bg-[#f1ece2] px-4 py-3">
-                <Text className="text-sm font-semibold text-[#16181a]">{item.name}</Text>
-                <Text className="mt-1 text-xs text-[#7d7468]">{item.platform} · {item.status || 'unknown'} · {item.schedulable ? '可调度' : '暂停调度'}</Text>
-                <Text className="mt-2 text-xs text-[#a34d2d]">{item.error_message || '状态异常，建议从运维视角继续排查这个上游账号'}</Text>
-              </View>
-            ))}
-            {incidentAccounts.length === 0 ? <Text className="text-sm text-[#7d7468]">当前没有检测到异常账号。</Text> : null}
-          </View>
-        </ListCard>
-      ),
-    },
-  ].filter((item) => item.node);
-
-  const leftColumn = cards.filter((_, index) => index % 2 === 0);
-  const rightColumn = cards.filter((_, index) => index % 2 === 1);
+  const isRefreshing = statsQuery.isRefetching || settingsQuery.isRefetching || accountsQuery.isRefetching || trendQuery.isRefetching || modelsQuery.isRefetching;
 
   return (
-    <ScreenShell
-      title="概览"
-      subtitle=""
-      titleAside={<Text className="text-[11px] text-[#a2988a]">{siteName} 的关键运行指标。</Text>}
-      variant="minimal"
-      horizontalInsetClassName="px-3"
-      contentGapClassName="mt-3 gap-2"
-      right={
-        <View className="flex-row items-center gap-2">
-          <View className="flex-row items-center rounded-full bg-[#ece3d6] p-1">
-            {RANGE_OPTIONS.map((item) => {
-              const active = item.key === rangeKey;
-
-              return (
-                <Pressable
-                  key={item.key}
-                  className={active ? 'rounded-full bg-[#1d5f55] px-3 py-1.5' : 'rounded-full bg-transparent px-3 py-1.5'}
-                  onPress={() => setRangeKey(item.key)}
-                >
-                  <Text className={active ? 'text-[10px] font-semibold uppercase leading-4 tracking-[1px] text-white' : 'text-[10px] font-semibold uppercase leading-4 tracking-[1px] text-[#7d7468]'}>
-                    {item.label}
-                  </Text>
-                </Pressable>
-              );
-            })}
+    <SafeAreaView style={{ flex: 1, backgroundColor: colors.page }}>
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={{ paddingHorizontal: 16, paddingTop: 16, paddingBottom: 110 }}
+        showsVerticalScrollIndicator={false}
+        refreshControl={<RefreshControl refreshing={isRefreshing} onRefresh={() => void refetchAll()} tintColor="#1d5f55" />}
+      >
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12, marginBottom: 16 }}>
+          <View style={{ flex: 1 }}>
+            <Text style={{ fontSize: 28, fontWeight: '700', color: colors.text }}>概览</Text>
+            <Text style={{ marginTop: 6, fontSize: 13, color: '#8a8072' }}>{siteName} 的当前运行状态。</Text>
+          </View>
+          <View style={{ alignItems: 'flex-end' }}>
+            <View style={{ flexDirection: 'row', gap: 8 }}>
+              {RANGE_OPTIONS.map((option) => {
+                const active = option.key === rangeKey;
+                return (
+                  <Pressable
+                    key={option.key}
+                    style={{ backgroundColor: active ? colors.primary : colors.border, borderRadius: 999, paddingHorizontal: 12, paddingVertical: 8 }}
+                    onPress={() => setRangeKey(option.key)}
+                  >
+                    <Text style={{ color: active ? '#fff' : '#4e463e', fontSize: 12, fontWeight: '700' }}>{option.label}</Text>
+                  </Pressable>
+                );
+              })}
+            </View>
+            <Text style={{ marginTop: 8, fontSize: 12, color: colors.subtext }}>{range.start_date} 到 {range.end_date}</Text>
           </View>
-          <Pressable
-            className="h-10 w-10 items-center justify-center rounded-full bg-[#2d3134]"
-            onPress={() => {
-              statsQuery.refetch();
-              trendQuery.refetch();
-              modelsQuery.refetch();
-              accountsQuery.refetch();
-              settingsQuery.refetch();
-            }}
-          >
-            <RefreshCw color="#f6f1e8" size={16} />
-          </Pressable>
         </View>
-      }
-    >
-      <View className="gap-2">
-        {summaryRows.map((row, rowIndex) => (
-          <View key={`summary-row-${rowIndex}`} className="flex-row gap-2">
-            {row.map((item) => {
-              const Icon = item.icon;
 
-              return (
-                <View
-                  key={item.label}
-                  className={item.tone === 'dark' ? 'rounded-[18px] bg-[#1d5f55] px-2.5 py-2.5' : 'rounded-[18px] bg-[#fbf8f2] px-2.5 py-2.5'}
-                  style={{ width: summaryCardWidth }}
-                >
-                  <View className="flex-row items-center justify-between gap-2">
-                    <Text className={item.tone === 'dark' ? 'text-[10px] uppercase tracking-[1.1px] text-[#d8efe7]' : 'text-[10px] uppercase tracking-[1.1px] text-[#8a8072]'}>
-                      {item.label}
-                    </Text>
-                    <Icon color={item.tone === 'dark' ? '#d8efe7' : '#7d7468'} size={13} />
-                  </View>
-                  <Text className={item.tone === 'dark' ? 'mt-2 text-[17px] font-bold text-white' : 'mt-2 text-[17px] font-bold text-[#16181a]'}>
-                    {item.value}
-                  </Text>
-                  {'detail' in item && item.detail ? (
-                    <Text numberOfLines={1} className={item.tone === 'dark' ? 'mt-1 text-[10px] text-[#d8efe7]' : 'mt-1 text-[10px] text-[#8a8072]'}>
-                      {item.detail}
-                    </Text>
-                  ) : null}
+        {!hasAccount ? (
+          <Section title="未连接服务器" subtitle="需要先配置连接">
+            <Text style={{ fontSize: 14, lineHeight: 22, color: colors.subtext }}>请先前往“服务器”页填写服务地址和 Admin Token，再返回查看概览数据。</Text>
+            <Pressable style={{ marginTop: 14, alignSelf: 'flex-start', backgroundColor: colors.primary, borderRadius: 14, paddingHorizontal: 16, paddingVertical: 12 }} onPress={() => router.push('/settings')}>
+              <Text style={{ color: '#fff', fontSize: 13, fontWeight: '700' }}>去配置服务器</Text>
+            </Pressable>
+          </Section>
+        ) : isLoading ? (
+          <Section title="正在加载概览" subtitle="请稍候">
+            <Text style={{ fontSize: 14, lineHeight: 22, color: colors.subtext }}>已连接服务器，正在拉取概览、模型和账号状态数据。</Text>
+          </Section>
+        ) : hasError ? (
+          <Section title="加载失败" subtitle="请检查连接配置">
+            <View style={{ borderRadius: 14, backgroundColor: colors.dangerBg, paddingHorizontal: 14, paddingVertical: 12 }}>
+              <Text style={{ color: colors.danger, fontSize: 14, lineHeight: 20 }}>{errorMessage}</Text>
+            </View>
+            <View style={{ flexDirection: 'row', gap: 12, marginTop: 14 }}>
+              <Pressable style={{ flex: 1, backgroundColor: colors.primary, borderRadius: 14, paddingVertical: 12, alignItems: 'center' }} onPress={refetchAll}>
+                <Text style={{ color: '#fff', fontSize: 13, fontWeight: '700' }}>重试</Text>
+              </Pressable>
+              <Pressable style={{ flex: 1, backgroundColor: colors.border, borderRadius: 14, paddingVertical: 12, alignItems: 'center' }} onPress={() => router.push('/settings')}>
+                <Text style={{ color: '#4e463e', fontSize: 13, fontWeight: '700' }}>检查服务器</Text>
+              </Pressable>
+            </View>
+          </Section>
+        ) : (
+          <View style={{ gap: 12 }}>
+            <View style={{ flexDirection: 'row', gap: 12 }}>
+              <StatCard
+                title={`${rangeTitle} Token`}
+                value={formatTokenDisplay(rangeKey === '24h' ? selectedTokenTotal || stats?.today_tokens : selectedTokenTotal)}
+                detail={`输出 ${formatTokenDisplay(rangeKey === '24h' ? selectedOutputTotal || stats?.today_output_tokens : selectedOutputTotal)}`}
+              />
+              <StatCard
+                title={`${rangeTitle} 成本`}
+                value={formatMoney(rangeKey === '24h' ? selectedCostTotal || stats?.today_cost : selectedCostTotal)}
+                detail={`TPM ${formatNumber(stats?.tpm)}`}
+              />
+            </View>
+            <Section title="账号概览" subtitle="总数、健康、异常和暂停状态一览">
+              <View style={{ flexDirection: 'row', gap: 8 }}>
+                <View style={{ flex: 1, backgroundColor: colors.mutedCard, borderRadius: 14, padding: 12 }}>
+                  <Text style={{ fontSize: 11, color: '#8a8072' }}>总数</Text>
+                  <Text style={{ marginTop: 6, fontSize: 18, fontWeight: '700', color: colors.text }}>{formatNumber(totalAccounts)}</Text>
                 </View>
-              );
-            })}
-          </View>
-        ))}
-      </View>
+                <View style={{ flex: 1, backgroundColor: colors.mutedCard, borderRadius: 14, padding: 12 }}>
+                  <Text style={{ fontSize: 11, color: '#8a8072' }}>健康</Text>
+                  <Text style={{ marginTop: 6, fontSize: 18, fontWeight: '700', color: colors.text }}>{formatNumber(healthyAccounts)}</Text>
+                </View>
+                <View style={{ flex: 1, backgroundColor: colors.dangerBg, borderRadius: 14, padding: 12 }}>
+                  <Text style={{ fontSize: 11, color: colors.danger }}>异常</Text>
+                  <Text style={{ marginTop: 6, fontSize: 18, fontWeight: '700', color: colors.danger }}>{formatNumber(errorAccounts)}</Text>
+                </View>
+                <View style={{ flex: 1, backgroundColor: colors.mutedCard, borderRadius: 14, padding: 12 }}>
+                  <Text style={{ fontSize: 11, color: '#8a8072' }}>暂停</Text>
+                  <Text style={{ marginTop: 6, fontSize: 18, fontWeight: '700', color: colors.text }}>{formatNumber(currentPagePausedAccounts)}</Text>
+                </View>
+              </View>
+              <Text style={{ marginTop: 10, fontSize: 12, color: colors.subtext }}>总数 / 健康 / 异常优先使用后端聚合字段；暂停与繁忙基于当前页账号列表。</Text>
+            </Section>
+
+            {throughputPoints.length > 1 ? (
+              <LineTrendChart title="Token 吞吐" subtitle="当前时间范围内的 Token 变化趋势" points={throughputPoints} color="#a34d2d" formatValue={formatTokenDisplay} />
+            ) : null}
+
+            {requestPoints.length > 1 ? (
+              <LineTrendChart title="请求趋势" subtitle="当前时间范围内的请求变化趋势" points={requestPoints} color="#1d5f55" formatValue={formatCompactNumber} />
+            ) : null}
+
+            {costPoints.length > 1 ? (
+              <LineTrendChart title="成本趋势" subtitle="当前时间范围内的成本变化趋势" points={costPoints} color="#7651c8" formatValue={formatMoney} />
+            ) : null}
+
+            <BarChartCard
+              title="Token 结构"
+              subtitle="输入、输出、缓存读取占比"
+              items={[
+                { label: '输入 Token', value: totalInputTokens, color: '#1d5f55', hint: '请求进入模型前消耗的 token。' },
+                { label: '输出 Token', value: totalOutputTokens, color: '#d38b36', hint: '模型返回内容消耗的 token。' },
+                { label: '缓存读取 Token', value: totalCacheReadTokens, color: '#7d7468', hint: '命中缓存后复用的 token。' },
+              ]}
+              formatValue={formatTokenDisplay}
+            />
+
+            <DonutChartCard
+              title="账号健康"
+              subtitle="健康、繁忙、暂停、异常分布"
+              centerLabel="总账号"
+              centerValue={formatNumber(totalAccounts)}
+              segments={[
+                { label: '健康', value: healthyAccounts, color: '#1d5f55' },
+                { label: '繁忙', value: currentPageBusyAccounts, color: '#d38b36' },
+                { label: '暂停', value: currentPagePausedAccounts, color: '#7d7468' },
+                { label: '异常', value: errorAccounts, color: '#a34d2d' },
+              ]}
+            />
+
+            <BarChartCard
+              title="热点模型"
+              subtitle="当前时间范围内最活跃的模型"
+              items={topModels.map((model) => ({
+                label: model.model,
+                value: model.total_tokens,
+                color: '#a34d2d',
+                meta: `请求 ${formatNumber(model.requests)} · 成本 ${formatMoney(model.cost)}`,
+              }))}
+              formatValue={formatCompactNumber}
+            />
+
+            <Section title="趋势摘要" subtitle="图表 + 最近几个统计点的请求、Token 和成本变化">
+              {latestTrendPoints.length === 0 ? (
+                <Text style={{ fontSize: 14, color: colors.subtext }}>当前时间范围没有趋势数据。</Text>
+              ) : (
+                <View style={{ gap: 12 }}>
+                  {throughputPoints.length > 1 ? (
+                    <LineTrendChart
+                      title="摘要 Token 趋势"
+                      subtitle="最近统计点的 Token 变化"
+                      points={throughputPoints.slice(-6)}
+                      color="#a34d2d"
+                      formatValue={formatTokenDisplay}
+                      compact
+                    />
+                  ) : null}
+
+                  <View style={{ gap: 10 }}>
+                    {latestTrendPoints.map((point) => (
+                      <View key={point.date} style={{ backgroundColor: colors.mutedCard, borderRadius: 14, padding: 12 }}>
+                        <Text style={{ fontSize: 13, fontWeight: '700', color: colors.text }}>{point.date}</Text>
+                        <View style={{ flexDirection: 'row', gap: 12, marginTop: 8 }}>
+                          <View style={{ flex: 1 }}>
+                            <Text style={{ fontSize: 11, color: '#8a8072' }}>请求</Text>
+                            <Text style={{ marginTop: 4, fontSize: 15, fontWeight: '700', color: colors.text }}>{formatCompactNumber(point.requests)}</Text>
+                          </View>
+                          <View style={{ flex: 1 }}>
+                            <Text style={{ fontSize: 11, color: '#8a8072' }}>Token</Text>
+                            <Text style={{ marginTop: 4, fontSize: 15, fontWeight: '700', color: colors.text }}>{formatTokenDisplay(point.total_tokens)}</Text>
+                          </View>
+                          <View style={{ flex: 1 }}>
+                            <Text style={{ fontSize: 11, color: '#8a8072' }}>成本</Text>
+                            <Text style={{ marginTop: 4, fontSize: 15, fontWeight: '700', color: colors.text }}>{formatMoney(point.cost)}</Text>
+                          </View>
+                        </View>
+                      </View>
+                    ))}
+                  </View>
+                </View>
+              )}
+            </Section>
 
-      {useMasonry ? (
-        <View className="flex-row items-start gap-3">
-          <View className="flex-1 gap-3">
-            {leftColumn.map((item) => (
-              <View key={item.key}>{item.node}</View>
-            ))}
           </View>
-          <View className="flex-1 gap-3">
-            {rightColumn.map((item) => (
-              <View key={item.key}>{item.node}</View>
-            ))}
-          </View>
-        </View>
-      ) : (
-        cards.map((item) => <View key={item.key}>{item.node}</View>)
-      )}
-    </ScreenShell>
+        )}
+      </ScrollView>
+    </SafeAreaView>
   );
 }