feat: refine admin UI and add EAS release workflow

app/(tabs)/accounts.tsx

@@ -1,17 +1,32 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { KeyRound, Search, ShieldCheck, ShieldOff } from 'lucide-react-native';
 import { router } from 'expo-router';
-import { useMemo, useState } from 'react';
-import { Pressable, Text, TextInput, View } from 'react-native';
+import { useCallback, useMemo, useState } from 'react';
+import { FlatList, Pressable, Text, TextInput, View } from 'react-native';
 
 import { ListCard } from '@/src/components/list-card';
 import { ScreenShell } from '@/src/components/screen-shell';
-import { listAccounts, setAccountSchedulable, testAccount } from '@/src/services/admin';
+import { useDebouncedValue } from '@/src/hooks/use-debounced-value';
+import { getAccount, getAccountTodayStats, getDashboardTrend, listAccounts, 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 AccountsScreen() {
-  const [search, setSearch] = useState('');
-  const keyword = useMemo(() => search.trim(), [search]);
+  const [searchText, setSearchText] = useState('');
+  const keyword = useDebouncedValue(searchText.trim(), 300);
   const queryClient = useQueryClient();
+  const range = getDateRange();
 
   const accountsQuery = useQuery({
     queryKey: ['accounts', keyword],
@@ -26,64 +41,103 @@ export default function AccountsScreen() {
 
   const items = accountsQuery.data?.items ?? [];
   const errorMessage = accountsQuery.error instanceof Error ? accountsQuery.error.message : '';
+  const listHeader = useMemo(
+    () => (
+      <View className="pb-4">
+        <View className="flex-row items-center rounded-[24px] bg-[#fbf8f2] px-4 py-3">
+          <Search color="#7d7468" size={18} />
+          <TextInput
+            defaultValue=""
+            onChangeText={setSearchText}
+            placeholder="搜索 key 名称"
+            placeholderTextColor="#9b9081"
+            className="ml-3 flex-1 text-base text-[#16181a]"
+          />
+        </View>
+      </View>
+    ),
+    []
+  );
+  const renderItem = useCallback(
+    ({ item: account }: { item: (typeof items)[number] }) => (
+      <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="flex-row items-center justify-between">
+            <View className="flex-row items-center gap-2">
+              {account.schedulable ? <ShieldCheck color="#7d7468" size={14} /> : <ShieldOff color="#7d7468" size={14} />}
+              <Text className="text-sm text-[#7d7468]">{account.schedulable ? '可调度' : '暂停调度'}</Text>
+            </View>
+            <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]">切换</Text>
+              </Pressable>
+            </View>
+          </View>
+        </ListCard>
+      </Pressable>
+    ),
+    [queryClient, range.end_date, range.start_date, toggleMutation]
+  );
+  const emptyState = useMemo(
+    () => <ListCard title="暂无 Key" meta={errorMessage || '连上后这里会展示 key 列表。'} icon={KeyRound} />,
+    [errorMessage]
+  );
 
   return (
-    <ScreenShell title="API 密钥" subtitle="管理您的 API 密钥和访问令牌">
-      <View className="flex-row items-center rounded-[24px] bg-[#fbf8f2] px-4 py-3">
-        <Search color="#7d7468" size={18} />
-        <TextInput
-          value={search}
-          onChangeText={setSearch}
-          placeholder="搜索 key 名称"
-          placeholderTextColor="#9b9081"
-          className="ml-3 flex-1 text-base text-[#16181a]"
-        />
-      </View>
-
-      {items.length === 0 ? (
-        <ListCard title="暂无 Key" meta={errorMessage || '连上后这里会展示 key 列表。'} icon={KeyRound} />
-      ) : (
-        items.map((account) => (
-          <Pressable key={account.id} onPress={() => 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="flex-row items-center justify-between">
-                <View className="flex-row items-center gap-2">
-                  {account.schedulable ? <ShieldCheck color="#7d7468" size={14} /> : <ShieldOff color="#7d7468" size={14} />}
-                  <Text className="text-sm text-[#7d7468]">{account.schedulable ? '可调度' : '暂停调度'}</Text>
-                </View>
-                <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]">切换</Text>
-                  </Pressable>
-                </View>
-              </View>
-            </ListCard>
-          </Pressable>
-        ))
-      )}
+    <ScreenShell
+      title="API 密钥"
+      subtitle=""
+      titleAside={<Text className="text-[11px] text-[#a2988a]">查看密钥状态与调度能力。</Text>}
+      variant="minimal"
+      scroll={false}
+    >
+      <FlatList
+        data={items}
+        renderItem={renderItem}
+        keyExtractor={(item) => `${item.id}`}
+        showsVerticalScrollIndicator={false}
+        ListHeaderComponent={listHeader}
+        ListEmptyComponent={emptyState}
+        ItemSeparatorComponent={() => <View className="h-4" />}
+        keyboardShouldPersistTaps="handled"
+        removeClippedSubviews
+        initialNumToRender={8}
+        maxToRenderPerBatch={8}
+        windowSize={5}
+      />
     </ScreenShell>
   );
 }