feat: streamline account overview list workflow

app/(tabs)/accounts.tsx

@@ -1,232 +1,5 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { KeyRound, Search, ShieldCheck, ShieldOff } from 'lucide-react-native';
-import { router } from 'expo-router';
-import { useCallback, useMemo, useState } from 'react';
-import { FlatList, Pressable, RefreshControl, Text, TextInput, View } from 'react-native';
+import { AccountsListScreen } from '@/src/screens/accounts-list-screen';
 
-import { ListCard } from '@/src/components/list-card';
-import { ScreenShell } from '@/src/components/screen-shell';
-import { useDebouncedValue } from '@/src/hooks/use-debounced-value';
-import { getAccount, getAccountTodayStats, getDashboardTrend, listAccounts, setAccountSchedulable, testAccount } from '@/src/services/admin';
-import type { AdminAccount } from '@/src/types/admin';
-
-function getDateRange() {
-  const end = new Date();
-  const start = new Date();
-  start.setDate(end.getDate() - 6);
-
-  const toDate = (value: Date) => value.toISOString().slice(0, 10);
-
-  return {
-    start_date: toDate(start),
-    end_date: toDate(end),
-  };
-}
-
-function formatTime(value?: string | null) {
-  if (!value) return '--';
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return '--';
-  return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
-}
-
-function getAccountError(account: AdminAccount) {
-  return Boolean(account.status === 'error' || account.error_message);
-}
-
-export default function AccountsScreen() {
-  const [searchText, setSearchText] = useState('');
-  const [filter, setFilter] = useState<'all' | 'schedulable' | 'paused' | 'error'>('all');
-  const keyword = useDebouncedValue(searchText.trim(), 300);
-  const queryClient = useQueryClient();
-  const range = getDateRange();
-
-  const accountsQuery = useQuery({
-    queryKey: ['accounts', keyword],
-    queryFn: () => listAccounts(keyword),
-  });
-
-  const toggleMutation = useMutation({
-    mutationFn: ({ accountId, schedulable }: { accountId: number; schedulable: boolean }) =>
-      setAccountSchedulable(accountId, schedulable),
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['accounts'] }),
-  });
-
-  const items = accountsQuery.data?.items ?? [];
-  const filteredItems = useMemo(() => {
-    return items.filter((account) => {
-      if (filter === 'schedulable') return account.schedulable !== false && !getAccountError(account);
-      if (filter === 'paused') return account.schedulable === false && !getAccountError(account);
-      if (filter === 'error') return getAccountError(account);
-      return true;
-    });
-  }, [filter, items]);
-  const errorMessage = accountsQuery.error instanceof Error ? accountsQuery.error.message : '';
-
-  const summary = useMemo(() => {
-    const total = items.length;
-    const errors = items.filter(getAccountError).length;
-    const paused = items.filter((item) => item.schedulable === false && !getAccountError(item)).length;
-    const active = items.filter((item) => item.schedulable !== false && !getAccountError(item)).length;
-    return { total, active, paused, errors };
-  }, [items]);
-
-  const listHeader = useMemo(
-    () => (
-      <View className="pb-4">
-        <View className="rounded-[24px] bg-[#fbf8f2] p-3">
-          <View className="flex-row items-center rounded-[18px] bg-[#f1ece2] px-4 py-3">
-            <Search color="#7d7468" size={18} />
-            <TextInput
-              defaultValue=""
-              onChangeText={setSearchText}
-              placeholder="搜索账号名称 / 平台"
-              placeholderTextColor="#9b9081"
-              className="ml-3 flex-1 text-base text-[#16181a]"
-            />
-          </View>
-
-          <View className="mt-3 flex-row gap-2">
-            {([
-              ['all', `全部 ${summary.total}`],
-              ['schedulable', `可调度 ${summary.active}`],
-              ['paused', `暂停 ${summary.paused}`],
-              ['error', `异常 ${summary.errors}`],
-            ] as const).map(([key, label]) => {
-              const active = filter === key;
-              return (
-                <Pressable
-                  key={key}
-                  onPress={() => setFilter(key)}
-                  className={active ? 'rounded-full bg-[#1d5f55] px-3 py-2' : 'rounded-full bg-[#e7dfcf] px-3 py-2'}
-                >
-                  <Text className={active ? 'text-xs font-semibold text-white' : 'text-xs font-semibold text-[#4e463e]'}>{label}</Text>
-                </Pressable>
-              );
-            })}
-          </View>
-        </View>
-      </View>
-    ),
-    [filter, summary.active, summary.errors, summary.paused, summary.total]
-  );
-
-  const renderItem = useCallback(
-    ({ item: account }: { item: (typeof filteredItems)[number] }) => {
-      const isError = getAccountError(account);
-      const statusText = isError ? '异常' : account.schedulable ? '可调度' : '暂停调度';
-      const groupsText = account.groups?.map((group) => group.name).filter(Boolean).slice(0, 3).join(' · ');
-
-      return (
-        <Pressable
-          onPress={() => {
-            void queryClient.prefetchQuery({ queryKey: ['account', account.id], queryFn: () => getAccount(account.id) });
-            void queryClient.prefetchQuery({ queryKey: ['account-today-stats', account.id], queryFn: () => getAccountTodayStats(account.id) });
-            void queryClient.prefetchQuery({
-              queryKey: ['account-trend', account.id, range.start_date, range.end_date],
-              queryFn: () => getDashboardTrend({ ...range, granularity: 'day', account_id: account.id }),
-            });
-            router.push(`/accounts/${account.id}`);
-          }}
-        >
-          <ListCard
-            title={account.name}
-            meta={`${account.platform} · ${account.type} · 优先级 ${account.priority ?? 0}`}
-            badge={account.status || 'unknown'}
-            icon={KeyRound}
-          >
-            <View className="gap-3">
-              <View className="flex-row items-center justify-between">
-                <View className="flex-row items-center gap-2">
-                  {account.schedulable && !isError ? <ShieldCheck color="#7d7468" size={14} /> : <ShieldOff color="#7d7468" size={14} />}
-                  <Text className="text-sm text-[#7d7468]">{statusText}</Text>
-                </View>
-                <Text className="text-xs text-[#7d7468]">最近使用 {formatTime(account.last_used_at || account.updated_at)}</Text>
-              </View>
-
-              <View className="flex-row gap-2">
-                <View className="flex-1 rounded-[14px] bg-[#f1ece2] px-3 py-3">
-                  <Text className="text-[11px] text-[#7d7468]">并发</Text>
-                  <Text className="mt-1 text-sm font-bold text-[#16181a]">{account.current_concurrency ?? 0} / {account.concurrency ?? 0}</Text>
-                </View>
-                <View className="flex-1 rounded-[14px] bg-[#f1ece2] px-3 py-3">
-                  <Text className="text-[11px] text-[#7d7468]">倍率</Text>
-                  <Text className="mt-1 text-sm font-bold text-[#16181a]">{(account.rate_multiplier ?? 1).toFixed(2)}x</Text>
-                </View>
-              </View>
-
-              {groupsText ? <Text className="text-xs text-[#7d7468]">分组 {groupsText}</Text> : null}
-              {account.error_message ? <Text className="text-xs text-[#a4512b]">异常信息：{account.error_message}</Text> : null}
-
-              <View className="flex-row gap-2">
-                <Pressable
-                  className="rounded-full bg-[#1b1d1f] px-4 py-2"
-                  onPress={(event) => {
-                    event.stopPropagation();
-                    testAccount(account.id).catch(() => undefined);
-                  }}
-                >
-                  <Text className="text-xs font-semibold uppercase tracking-[1.2px] text-[#f6f1e8]">测试</Text>
-                </Pressable>
-                <Pressable
-                  className="rounded-full bg-[#e7dfcf] px-4 py-2"
-                  onPress={(event) => {
-                    event.stopPropagation();
-                    toggleMutation.mutate({
-                      accountId: account.id,
-                      schedulable: !account.schedulable,
-                    });
-                  }}
-                >
-                  <Text className="text-xs font-semibold uppercase tracking-[1.2px] text-[#4e463e]">{account.schedulable ? '暂停' : '恢复'}</Text>
-                </Pressable>
-              </View>
-            </View>
-          </ListCard>
-        </Pressable>
-      );
-    },
-    [filteredItems, queryClient, range.end_date, range.start_date, toggleMutation]
-  );
-
-  const emptyState = useMemo(
-    () => <ListCard title="暂无账号" meta={errorMessage || '连上后这里会展示账号列表。'} icon={KeyRound} />,
-    [errorMessage]
-  );
-
-  return (
-    <ScreenShell
-      title="账号管理"
-      subtitle="看单账号状态、并发、最近使用和异常信息。"
-      titleAside={(
-        <View className="flex-row items-center gap-2">
-          <Text className="text-[11px] text-[#a2988a]">更接近网页后台的账号视图。</Text>
-          <Pressable
-            onPress={() => router.push('/accounts/create')}
-            className="h-8 w-8 items-center justify-center rounded-[10px] bg-[#1d5f55]"
-          >
-            <Text className="text-xl leading-5 text-white">+</Text>
-          </Pressable>
-        </View>
-      )}
-      variant="minimal"
-      scroll={false}
-    >
-      <FlatList
-        data={filteredItems}
-        renderItem={renderItem}
-        keyExtractor={(item) => `${item.id}`}
-        showsVerticalScrollIndicator={false}
-        refreshControl={<RefreshControl refreshing={accountsQuery.isRefetching} onRefresh={() => void accountsQuery.refetch()} tintColor="#1d5f55" />}
-        ListHeaderComponent={listHeader}
-        ListEmptyComponent={emptyState}
-        ItemSeparatorComponent={() => <View className="h-4" />}
-        keyboardShouldPersistTaps="handled"
-        removeClippedSubviews
-        initialNumToRender={8}
-        maxToRenderPerBatch={8}
-        windowSize={5}
-      />
-    </ScreenShell>
-  );
+export default function AccountsRouteScreen() {
+  return <AccountsListScreen safeAreaEdges={['top', 'bottom']} />;
 }

app/(tabs)/monitor.tsx

@@ -325,26 +325,39 @@ export default function MonitorScreen() {
                 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>
+            <Section
+              title="账号概览"
+              subtitle="总数、健康、异常和限流状态一览"
+              right={(
+                <Pressable
+                  style={{ alignSelf: 'flex-start', backgroundColor: colors.border, borderRadius: 12, paddingHorizontal: 12, paddingVertical: 8 }}
+                  onPress={() => router.push('/accounts/overview')}
+                >
+                  <Text style={{ color: '#4e463e', fontSize: 12, fontWeight: '700' }}>账号清单</Text>
+                </Pressable>
+              )}
+            >
+              <Pressable onPress={() => router.push('/accounts/overview')}>
+                <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 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(currentPageLimitedAccounts)}</Text>
+                  </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(currentPageLimitedAccounts)}</Text>
-                </View>
-              </View>
-              <Text style={{ marginTop: 10, fontSize: 12, color: colors.subtext }}>总数 / 健康 / 异常优先使用后端聚合字段；限流与繁忙基于当前页账号列表。</Text>
+                <Text style={{ marginTop: 10, fontSize: 12, color: colors.subtext }}>总数 / 健康 / 异常优先使用后端聚合字段；限流与繁忙基于当前页账号列表。点击进入账号清单。</Text>
+              </Pressable>
             </Section>
 
             {throughputPoints.length > 1 ? (

app/_layout.tsx

@@ -89,7 +89,19 @@ export default function RootLayout() {
                 headerShadowVisible: false,
               }}
             />
-            <Stack.Screen name="accounts/[id]" options={{ presentation: 'card' }} />
+            <Stack.Screen
+              name="accounts/overview"
+              options={{
+                animation: 'slide_from_right',
+                presentation: 'card',
+                headerShown: true,
+                title: '账号清单',
+                headerBackTitle: '返回',
+                headerTintColor: '#16181a',
+                headerStyle: { backgroundColor: '#f4efe4' },
+                headerShadowVisible: false,
+              }}
+            />
           </Stack>
         )}
       </QueryClientProvider>

app/accounts/[id].tsx

@@ -1,131 +0,0 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { ChevronLeft, ShieldCheck, TestTubeDiagonal } from 'lucide-react-native';
-import { router, useLocalSearchParams } from 'expo-router';
-import { Pressable, Text, View } from 'react-native';
-
-import { DetailRow } from '@/src/components/detail-row';
-import { LineTrendChart } from '@/src/components/line-trend-chart';
-import { ListCard } from '@/src/components/list-card';
-import { formatDisplayTime, formatTokenValue } from '@/src/lib/formatters';
-import { ScreenShell } from '@/src/components/screen-shell';
-import { getAccount, getAccountTodayStats, getDashboardTrend, refreshAccount, setAccountSchedulable, testAccount } from '@/src/services/admin';
-
-function getDateRange() {
-  const end = new Date();
-  const start = new Date();
-  start.setDate(end.getDate() - 6);
-
-  const toDate = (value: Date) => value.toISOString().slice(0, 10);
-
-  return {
-    start_date: toDate(start),
-    end_date: toDate(end),
-  };
-}
-
-export default function AccountDetailScreen() {
-  const { id } = useLocalSearchParams<{ id: string }>();
-  const accountId = Number(id);
-  const queryClient = useQueryClient();
-  const range = getDateRange();
-
-  const accountQuery = useQuery({
-    queryKey: ['account', accountId],
-    queryFn: () => getAccount(accountId),
-    enabled: Number.isFinite(accountId),
-  });
-
-  const todayStatsQuery = useQuery({
-    queryKey: ['account-today-stats', accountId],
-    queryFn: () => getAccountTodayStats(accountId),
-    enabled: Number.isFinite(accountId),
-  });
-
-  const trendQuery = useQuery({
-    queryKey: ['account-trend', accountId, range.start_date, range.end_date],
-    queryFn: () => getDashboardTrend({ ...range, granularity: 'day', account_id: accountId }),
-    enabled: Number.isFinite(accountId),
-  });
-
-  const refreshMutation = useMutation({
-    mutationFn: () => refreshAccount(accountId),
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['account', accountId] }),
-  });
-
-  const schedulableMutation = useMutation({
-    mutationFn: (schedulable: boolean) => setAccountSchedulable(accountId, schedulable),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['account', accountId] });
-      queryClient.invalidateQueries({ queryKey: ['accounts'] });
-    },
-  });
-
-  const account = accountQuery.data;
-  const todayStats = todayStatsQuery.data;
-  const trendPoints = (trendQuery.data?.trend ?? []).map((item) => ({
-    label: item.date.slice(5),
-    value: item.total_tokens,
-  }));
-  const isRefreshing = accountQuery.isRefetching || todayStatsQuery.isRefetching || trendQuery.isRefetching;
-
-  function handleRefresh() {
-    void Promise.all([accountQuery.refetch(), todayStatsQuery.refetch(), trendQuery.refetch()]);
-  }
-
-  return (
-    <ScreenShell
-      title={account?.name || '账号详情'}
-      subtitle="聚焦账号 token 用量、状态和几个最常用操作。"
-      refreshing={isRefreshing}
-      onRefresh={handleRefresh}
-      right={
-        <Pressable className="h-11 w-11 items-center justify-center rounded-full bg-[#2d3134]" onPress={() => router.back()}>
-          <ChevronLeft color="#f6f1e8" size={18} />
-        </Pressable>
-      }
-    >
-      <ListCard title="基本信息" meta={`${account?.platform || '--'} · ${account?.type || '--'}`} badge={account?.status || 'loading'}>
-        <DetailRow label="可调度" value={account?.schedulable ? '是' : '否'} />
-        <DetailRow label="优先级" value={`${account?.priority ?? 0}`} />
-        <DetailRow label="并发" value={`${account?.concurrency ?? 0}`} />
-        <DetailRow label="当前并发" value={`${account?.current_concurrency ?? 0}`} />
-        <DetailRow label="最后使用" value={formatDisplayTime(account?.last_used_at)} />
-      </ListCard>
-
-      <ListCard title="今日统计" meta="真实数据来自 /accounts/:id/today-stats" icon={ShieldCheck}>
-        <DetailRow label="Token" value={formatTokenValue(todayStats?.tokens ?? 0)} />
-        <DetailRow label="请求数" value={`${todayStats?.requests ?? 0}`} />
-        <DetailRow label="成本" value={`$${Number(todayStats?.cost ?? 0).toFixed(4)}`} />
-      </ListCard>
-
-      {trendPoints.length > 1 ? (
-        <LineTrendChart
-          title="近 7 天 Token"
-          subtitle="按账号过滤后的真实 token 趋势"
-          points={trendPoints}
-          color="#c96d43"
-          formatValue={formatTokenValue}
-        />
-      ) : null}
-
-      <ListCard title="快捷动作" meta="直接对单账号做测试、刷新和调度控制。" icon={TestTubeDiagonal}>
-        <View className="flex-row gap-3">
-          <Pressable className="flex-1 rounded-[18px] bg-[#1b1d1f] px-4 py-4" onPress={() => testAccount(accountId).catch(() => undefined)}>
-            <Text className="text-center text-sm font-semibold text-[#f6f1e8]">测试账号</Text>
-          </Pressable>
-          <Pressable className="flex-1 rounded-[18px] bg-[#e7dfcf] px-4 py-4" onPress={() => refreshMutation.mutate()}>
-            <Text className="text-center text-sm font-semibold text-[#4e463e]">{refreshMutation.isPending ? '刷新中...' : '刷新凭据'}</Text>
-          </Pressable>
-        </View>
-        <Pressable
-          className="mt-3 rounded-[18px] bg-[#1d5f55] px-4 py-4"
-          onPress={() => schedulableMutation.mutate(!account?.schedulable)}
-        >
-          <Text className="text-center text-sm font-semibold text-white">
-            {schedulableMutation.isPending ? '提交中...' : account?.schedulable ? '暂停调度' : '恢复调度'}
-          </Text>
-        </Pressable>
-      </ListCard>
-    </ScreenShell>
-  );
-}

app/accounts/overview.tsx

@@ -0,0 +1,5 @@
+import { AccountsListScreen } from '@/src/screens/accounts-list-screen';
+
+export default function AccountOverviewListScreen() {
+  return <AccountsListScreen safeAreaEdges={['bottom']} />;
+}

src/components/list-card.tsx

@@ -6,11 +6,33 @@ type ListCardProps = {
   title: string;
   meta?: string;
   badge?: string;
+  badgeTone?: 'default' | 'success' | 'muted' | 'danger';
   children?: ReactNode;
   icon?: LucideIcon;
 };
 
-export function ListCard({ title, meta, badge, children, icon: Icon }: ListCardProps) {
+const badgeClassMap: Record<NonNullable<ListCardProps['badgeTone']>, { wrap: string; text: string }> = {
+  default: {
+    wrap: 'rounded-full bg-[#e7dfcf] px-2.5 py-1',
+    text: 'text-[10px] font-semibold uppercase tracking-[1px] text-[#5d564d]',
+  },
+  success: {
+    wrap: 'rounded-full bg-[#e6f4ee] px-2.5 py-1',
+    text: 'text-[10px] font-semibold uppercase tracking-[1px] text-[#1d5f55]',
+  },
+  muted: {
+    wrap: 'rounded-full bg-[#ece7dc] px-2.5 py-1',
+    text: 'text-[10px] font-semibold uppercase tracking-[1px] text-[#7d7468]',
+  },
+  danger: {
+    wrap: 'rounded-full bg-[#f7e1d6] px-2.5 py-1',
+    text: 'text-[10px] font-semibold uppercase tracking-[1px] text-[#a4512b]',
+  },
+};
+
+export function ListCard({ title, meta, badge, badgeTone = 'default', children, icon: Icon }: ListCardProps) {
+  const badgeClass = badgeClassMap[badgeTone];
+
   return (
     <View className="rounded-[16px] border border-[#efe7d9] bg-[#fbf8f2] p-3.5">
       <View className="flex-row items-start justify-between gap-3">
@@ -22,8 +44,8 @@ export function ListCard({ title, meta, badge, children, icon: Icon }: ListCardP
           {meta ? <Text numberOfLines={1} className="mt-1 text-xs text-[#7d7468]">{meta}</Text> : null}
         </View>
         {badge ? (
-          <View className="rounded-full bg-[#e7dfcf] px-2.5 py-1">
-            <Text className="text-[10px] font-semibold uppercase tracking-[1px] text-[#5d564d]">{badge}</Text>
+          <View className={badgeClass.wrap}>
+            <Text className={badgeClass.text}>{badge}</Text>
           </View>
         ) : null}
       </View>

src/components/screen-shell.tsx

@@ -1,5 +1,6 @@
 import type { PropsWithChildren, ReactNode } from 'react';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import type { Edge } from 'react-native-safe-area-context';
 import { RefreshControl, ScrollView, Text, View } from 'react-native';
 
 type ScreenShellProps = PropsWithChildren<{
@@ -14,6 +15,7 @@ type ScreenShellProps = PropsWithChildren<{
   contentGapClassName?: string;
   refreshing?: boolean;
   onRefresh?: () => void | Promise<void>;
+  safeAreaEdges?: Edge[];
 }>;
 
 function ScreenHeader({
@@ -32,7 +34,7 @@ function ScreenHeader({
             {titleAside}
           </View>
           {subtitle ? (
-            <Text numberOfLines={1} className="mt-1 text-[11px] leading-4 text-[#a2988a]">
+            <Text numberOfLines={1} className="mt-1 text-[11px] leading-4 text-[#7d7468]">
               {subtitle}
             </Text>
           ) : null}
@@ -70,10 +72,11 @@ export function ScreenShell({
   contentGapClassName = 'mt-4 gap-4',
   refreshing = false,
   onRefresh,
+  safeAreaEdges = ['top', 'bottom'],
 }: ScreenShellProps) {
   if (!scroll) {
     return (
-      <SafeAreaView className="flex-1 bg-[#f4efe4]">
+      <SafeAreaView edges={safeAreaEdges} style={{ flex: 1, backgroundColor: '#f4efe4' }}>
         <View className={`flex-1 ${horizontalInsetClassName} ${bottomInsetClassName}`}>
           <ScreenHeader title={title} subtitle={subtitle} titleAside={titleAside} right={right} variant={variant} />
           <View className={`flex-1 ${contentGapClassName}`}>{children}</View>
@@ -83,7 +86,7 @@ export function ScreenShell({
   }
 
   return (
-    <SafeAreaView className="flex-1 bg-[#f4efe4]">
+    <SafeAreaView edges={safeAreaEdges} style={{ flex: 1, backgroundColor: '#f4efe4' }}>
       <ScrollView
         className="flex-1"
         showsVerticalScrollIndicator={false}

src/screens/accounts-list-screen.tsx

@@ -0,0 +1,335 @@
+import { useMutation, useQueries, useQuery, useQueryClient } from '@tanstack/react-query';
+import { KeyRound, Search, ShieldCheck, ShieldOff } from 'lucide-react-native';
+import { useCallback, useMemo, useState } from 'react';
+import { FlatList, Pressable, RefreshControl, Text, TextInput, View } from 'react-native';
+import type { Edge } from 'react-native-safe-area-context';
+
+import { ListCard } from '@/src/components/list-card';
+import { ScreenShell } from '@/src/components/screen-shell';
+import { useDebouncedValue } from '@/src/hooks/use-debounced-value';
+import { formatTokenValue } from '@/src/lib/formatters';
+import { getAccountTodayStats, listAccounts, setAccountSchedulable, testAccount } from '@/src/services/admin';
+import type { AdminAccount } from '@/src/types/admin';
+
+type AccountStatusFilter = 'all' | 'active' | 'paused' | 'error';
+type UsageSort = 'usage-desc' | 'usage-asc';
+type AccountVisualStatus = {
+  filterKey: AccountStatusFilter;
+  label: '正常' | '暂停' | '异常';
+  badgeTone: 'success' | 'muted' | 'danger';
+};
+
+type AccountTodaySummary = {
+  requests: number;
+  tokens: number;
+  cost: number;
+};
+
+function formatTime(value?: string | null) {
+  if (!value) return '--';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '--';
+  return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+}
+
+function getAccountError(account: AdminAccount) {
+  return Boolean(account.status === 'error' || account.error_message);
+}
+
+function getAccountVisualStatus(account: AdminAccount): AccountVisualStatus {
+  const normalizedStatus = `${account.status ?? ''}`.toLowerCase();
+  const isPausedStatus = ['inactive', 'disabled', 'paused', 'stop', 'stopped'].includes(normalizedStatus);
+
+  if (getAccountError(account)) {
+    return { filterKey: 'error', label: '异常', badgeTone: 'danger' };
+  }
+  if (isPausedStatus || account.schedulable === false) {
+    return { filterKey: 'paused', label: '暂停', badgeTone: 'muted' };
+  }
+  return { filterKey: 'active', label: '正常', badgeTone: 'success' };
+}
+
+type AccountsListScreenProps = {
+  safeAreaEdges?: Edge[];
+};
+
+export function AccountsListScreen({ safeAreaEdges }: AccountsListScreenProps) {
+  const [searchText, setSearchText] = useState('');
+  const [filter, setFilter] = useState<AccountStatusFilter>('all');
+  const [usageSort, setUsageSort] = useState<UsageSort>('usage-desc');
+  const [testingAccountId, setTestingAccountId] = useState<number | null>(null);
+  const [testFeedbackByAccountId, setTestFeedbackByAccountId] = useState<Record<number, string>>({});
+  const [togglingAccountId, setTogglingAccountId] = useState<number | null>(null);
+  const keyword = useDebouncedValue(searchText.trim(), 300);
+  const queryClient = useQueryClient();
+
+  const accountsQuery = useQuery({
+    queryKey: ['accounts', keyword],
+    queryFn: () => listAccounts(keyword),
+  });
+
+  const toggleMutation = useMutation({
+    mutationFn: ({ accountId, schedulable }: { accountId: number; schedulable: boolean }) =>
+      setAccountSchedulable(accountId, schedulable),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['accounts'] }),
+  });
+
+  const testMutation = useMutation({
+    mutationFn: (accountId: number) => testAccount(accountId),
+  });
+
+  const items = accountsQuery.data?.items ?? [];
+  const accountCostQueries = useQueries({
+    queries: items.map((account) => ({
+      queryKey: ['account-today-stats', account.id],
+      queryFn: () => getAccountTodayStats(account.id),
+      staleTime: 60_000,
+    })),
+  });
+
+  const todayByAccountId = useMemo(() => {
+    const next = new Map<number, AccountTodaySummary>();
+    items.forEach((account, index) => {
+      const result = accountCostQueries[index]?.data;
+      const fromStatsCost = typeof result?.cost === 'number' && Number.isFinite(result.cost) ? result.cost : undefined;
+      const fromExtra = typeof account.extra?.today_cost === 'number' ? account.extra.today_cost : undefined;
+      const cost = fromStatsCost ?? fromExtra ?? 0;
+      const requests = typeof result?.requests === 'number' && Number.isFinite(result.requests) ? result.requests : 0;
+      const tokens = typeof result?.tokens === 'number' && Number.isFinite(result.tokens) ? result.tokens : 0;
+      next.set(account.id, { requests, tokens, cost });
+    });
+    return next;
+  }, [accountCostQueries, items]);
+
+  const filteredItems = useMemo(() => {
+    const statusMatched = items.filter((account) => {
+      const visualStatus = getAccountVisualStatus(account);
+      if (filter === 'all') return true;
+      if (filter === 'active') return visualStatus.filterKey === 'active';
+      if (filter === 'paused') return visualStatus.filterKey === 'paused';
+      if (filter === 'error') return visualStatus.filterKey === 'error';
+      return true;
+    });
+
+    const sorted = [...statusMatched].sort((left, right) => {
+      const requestsLeft = todayByAccountId.get(left.id)?.requests ?? 0;
+      const requestsRight = todayByAccountId.get(right.id)?.requests ?? 0;
+      if (requestsLeft === requestsRight) {
+        const tokensLeft = todayByAccountId.get(left.id)?.tokens ?? 0;
+        const tokensRight = todayByAccountId.get(right.id)?.tokens ?? 0;
+        return tokensLeft - tokensRight;
+      }
+      if (usageSort === 'usage-asc') return requestsLeft - requestsRight;
+      return requestsRight - requestsLeft;
+    });
+
+    return sorted;
+  }, [filter, items, todayByAccountId, usageSort]);
+  const errorMessage = accountsQuery.error instanceof Error ? accountsQuery.error.message : '';
+
+  const summary = useMemo(() => {
+    const total = items.length;
+    const errors = items.filter((item) => getAccountVisualStatus(item).filterKey === 'error').length;
+    const paused = items.filter((item) => getAccountVisualStatus(item).filterKey === 'paused').length;
+    const active = items.filter((item) => getAccountVisualStatus(item).filterKey === 'active').length;
+    return { total, active, paused, errors };
+  }, [items]);
+
+  const listHeader = useMemo(
+    () => (
+      <View className="pb-2">
+        <View className="rounded-[24px] bg-[#fbf8f2] p-2.5">
+          <View className="flex-row items-center rounded-[18px] bg-[#f1ece2] px-4 py-3">
+            <Search color="#7d7468" size={18} />
+            <TextInput
+              defaultValue=""
+              onChangeText={setSearchText}
+              placeholder="搜索账号名称 / 平台"
+              placeholderTextColor="#9b9081"
+              className="ml-3 flex-1 text-base text-[#16181a]"
+            />
+          </View>
+
+          <View className="mt-3 flex-row gap-2">
+            {([
+              ['all', `全部 ${summary.total}`],
+              ['active', `正常 ${summary.active}`],
+              ['paused', `暂停 ${summary.paused}`],
+              ['error', `异常 ${summary.errors}`],
+            ] as const).map(([key, label]) => {
+              const active = filter === key;
+              return (
+                <Pressable
+                  key={key}
+                  onPress={() => setFilter(key)}
+                  className={active ? 'rounded-full bg-[#1d5f55] px-3 py-2' : 'rounded-full bg-[#e7dfcf] px-3 py-2'}
+                >
+                  <Text className={active ? 'text-xs font-semibold text-white' : 'text-xs font-semibold text-[#4e463e]'}>{label}</Text>
+                </Pressable>
+              );
+            })}
+          </View>
+
+          <View className="mt-3 flex-row gap-2">
+            {([
+              ['usage-desc', '请求高→低'],
+              ['usage-asc', '请求低→高'],
+            ] as const).map(([key, label]) => {
+              const active = usageSort === key;
+              return (
+                <Pressable
+                  key={key}
+                  onPress={() => setUsageSort(key)}
+                  className={active ? 'rounded-full bg-[#4e463e] px-3 py-3' : 'rounded-full bg-[#e7dfcf] px-3 py-3'}
+                >
+                  <Text className={active ? 'text-xs font-semibold text-white' : 'text-xs font-semibold text-[#4e463e]'}>{label}</Text>
+                </Pressable>
+              );
+            })}
+          </View>
+        </View>
+      </View>
+    ),
+    [filter, summary.active, summary.errors, summary.paused, summary.total, usageSort]
+  );
+
+  const renderItem = useCallback(
+    ({ item: account }: { item: (typeof filteredItems)[number] }) => {
+      const isError = getAccountError(account);
+      const visualStatus = getAccountVisualStatus(account);
+      const statusText = visualStatus.label;
+      const groupsText = account.groups?.map((group) => group.name).filter(Boolean).slice(0, 3).join(' · ');
+      const todayStats = todayByAccountId.get(account.id) ?? { requests: 0, tokens: 0, cost: 0 };
+      const nextSchedulable = visualStatus.filterKey === 'paused';
+      const toggleLabel = nextSchedulable ? '恢复' : '暂停';
+      const testFeedback = testFeedbackByAccountId[account.id];
+      const isTogglingCurrent = togglingAccountId === account.id && toggleMutation.isPending;
+      const isTestingCurrent = testingAccountId === account.id && testMutation.isPending;
+
+      return (
+        <View>
+          <ListCard
+            title={account.name}
+            meta={`${account.platform} · ${account.type}`}
+            badge={statusText}
+            badgeTone={visualStatus.badgeTone}
+            icon={KeyRound}
+          >
+            <View className="gap-3">
+              <View className="flex-row items-center justify-between">
+                <View className="flex-row items-center gap-2">
+                  {account.schedulable && !isError ? <ShieldCheck color="#7d7468" size={14} /> : <ShieldOff color="#7d7468" size={14} />}
+                  <Text className="text-sm text-[#7d7468]">状态：{statusText}</Text>
+                </View>
+                <Text className="text-xs text-[#7d7468]">最近使用 {formatTime(account.last_used_at || account.updated_at)}</Text>
+              </View>
+
+              <View className="flex-row gap-2">
+                <View className="flex-1 rounded-[14px] bg-[#f1ece2] px-3 py-3">
+                  <Text className="text-[11px] text-[#7d7468]">请求次数</Text>
+                  <Text className="mt-1 text-sm font-bold text-[#16181a]">{todayStats.requests}</Text>
+                </View>
+                <View className="flex-1 rounded-[14px] bg-[#f1ece2] px-3 py-3">
+                  <Text className="text-[11px] text-[#7d7468]">消费金额</Text>
+                  <Text className="mt-1 text-sm font-bold text-[#16181a]">${todayStats.cost.toFixed(2)}</Text>
+                </View>
+                <View className="flex-1 rounded-[14px] bg-[#f1ece2] px-3 py-3">
+                  <Text className="text-[11px] text-[#7d7468]">token消耗</Text>
+                  <Text className="mt-1 text-sm font-bold text-[#16181a]">{formatTokenValue(todayStats.tokens)}</Text>
+                </View>
+              </View>
+
+              <Text className="text-xs text-[#7d7468]">优先级 {account.priority ?? 0} · 倍率 {(account.rate_multiplier ?? 1).toFixed(2)}x</Text>
+
+              {groupsText ? <Text className="text-xs text-[#7d7468]">分组 {groupsText}</Text> : null}
+              {account.error_message ? <Text className="text-xs text-[#a4512b]">异常信息：{account.error_message}</Text> : null}
+
+              <View className="flex-row gap-2">
+                <Pressable
+                  className="rounded-full bg-[#1b1d1f] px-4 py-2"
+                  disabled={isTestingCurrent}
+                  onPress={(event) => {
+                    event.stopPropagation();
+                    setTestingAccountId(account.id);
+                    testMutation.mutate(account.id, {
+                      onSuccess: () => {
+                        setTestFeedbackByAccountId((current) => ({ ...current, [account.id]: '测试成功' }));
+                      },
+                      onError: (error) => {
+                        const message = error instanceof Error && error.message ? error.message : '测试失败';
+                        setTestFeedbackByAccountId((current) => ({ ...current, [account.id]: message }));
+                      },
+                      onSettled: () => {
+                        setTestingAccountId((current) => (current === account.id ? null : current));
+                      },
+                    });
+                  }}
+                >
+                  <Text className="text-xs font-semibold uppercase tracking-[1.2px] text-[#f6f1e8]">{isTestingCurrent ? '测试中...' : '测试'}</Text>
+                </Pressable>
+                <Pressable
+                  className="rounded-full bg-[#e7dfcf] px-4 py-2"
+                  disabled={isTogglingCurrent}
+                  onPress={(event) => {
+                    event.stopPropagation();
+                    setTogglingAccountId(account.id);
+                    toggleMutation.mutate({
+                      accountId: account.id,
+                      schedulable: nextSchedulable,
+                    }, {
+                      onSettled: () => {
+                        setTogglingAccountId((current) => (current === account.id ? null : current));
+                      },
+                    });
+                  }}
+                >
+                  <Text className="text-xs font-semibold uppercase tracking-[1.2px] text-[#4e463e]">{isTogglingCurrent ? '处理中...' : toggleLabel}</Text>
+                </Pressable>
+              </View>
+
+              {testFeedback ? <Text className="text-xs text-[#1d5f55]">测试结果：{testFeedback}</Text> : null}
+            </View>
+          </ListCard>
+        </View>
+      );
+    },
+    [testFeedbackByAccountId, testMutation, testingAccountId, todayByAccountId, toggleMutation, togglingAccountId]
+  );
+
+  const emptyState = useMemo(
+    () => <ListCard title="暂无账号" meta={errorMessage || '连上后这里会展示账号列表。'} icon={KeyRound} />,
+    [errorMessage]
+  );
+
+  return (
+    <ScreenShell
+      title="账号清单"
+      subtitle="查看名称、平台&类型、请求次数、消费金额、token消耗，并支持筛选与排序。"
+      titleAside={(
+        <Text className="text-[11px] text-[#7d7468]">更接近网页后台的账号视图。</Text>
+      )}
+      variant="minimal"
+      scroll={false}
+      safeAreaEdges={safeAreaEdges}
+      bottomInsetClassName="pb-6"
+      contentGapClassName="mt-2 gap-2"
+    >
+      <FlatList
+        style={{ flex: 1 }}
+        contentContainerStyle={{ paddingBottom: 12, flexGrow: 1 }}
+        data={filteredItems}
+        renderItem={renderItem}
+        keyExtractor={(item) => `${item.id}`}
+        showsVerticalScrollIndicator={false}
+        refreshControl={<RefreshControl refreshing={accountsQuery.isRefetching} onRefresh={() => void accountsQuery.refetch()} tintColor="#1d5f55" />}
+        ListHeaderComponent={listHeader}
+        ListEmptyComponent={emptyState}
+        ItemSeparatorComponent={() => <View className="h-4" />}
+        keyboardShouldPersistTaps="handled"
+        initialNumToRender={8}
+        maxToRenderPerBatch={8}
+        windowSize={5}
+      />
+    </ScreenShell>
+  );
+}