feat: refine expo admin mobile flows

app/login.tsx

@@ -1,39 +1,62 @@
-import { router } from 'expo-router';
+import { Redirect, router } from 'expo-router';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Globe, KeyRound } from 'lucide-react-native';
 import { Controller, useForm } from 'react-hook-form';
-import { Pressable, Text, TextInput, View } from 'react-native';
+import { Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import { useState } from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { z } from 'zod';
 
-import { ListCard } from '@/src/components/list-card';
-import { ScreenShell } from '@/src/components/screen-shell';
-import { useScreenInteractive } from '@/src/hooks/use-screen-interactive';
-import { isLocalProxyBaseUrl } from '@/src/lib/admin-fetch';
+import { getAdminSettings, getDashboardStats } from '@/src/services/admin';
 import { queryClient } from '@/src/lib/query-client';
-import { adminConfigState, removeAdminAccount, saveAdminConfig, setAdminAccountEnabled, switchAdminAccount, type AdminAccountProfile } from '@/src/store/admin-config';
+import { adminConfigState, saveAdminConfig } from '@/src/store/admin-config';
 
 const { useSnapshot } = require('valtio/react');
 
 const schema = z
   .object({
-    baseUrl: z.string().min(1, '请输入 Host'),
+    baseUrl: z.string().min(1, '请输入服务器地址'),
     adminApiKey: z.string(),
   })
-  .superRefine((values, ctx) => {
-    if (!isLocalProxyBaseUrl(values.baseUrl.trim()) && !values.adminApiKey.trim()) {
-      ctx.addIssue({
-        code: 'custom',
-        path: ['adminApiKey'],
-        message: '请输入 Admin Token',
-      });
-    }
+  .refine((values) => values.adminApiKey.trim().length > 0, {
+    path: ['adminApiKey'],
+    message: '请输入 Admin Key',
   });
 
 type FormValues = z.infer<typeof schema>;
+type ConnectionState = 'idle' | 'checking' | 'error';
+
+const colors = {
+  page: '#f4efe4',
+  card: '#fbf8f2',
+  mutedCard: '#f1ece2',
+  primary: '#1d5f55',
+  text: '#16181a',
+  subtext: '#6f665c',
+  border: '#e7dfcf',
+  dangerBg: '#fbf1eb',
+  danger: '#c25d35',
+};
+
+function getConnectionErrorMessage(error: unknown) {
+  if (error instanceof Error && error.message) {
+    switch (error.message) {
+      case 'BASE_URL_REQUIRED':
+        return '请先填写服务器地址。';
+      case 'ADMIN_API_KEY_REQUIRED':
+        return '请先填写 Admin Key。';
+      case 'INVALID_SERVER_RESPONSE':
+        return '当前地址返回的数据不正确，请确认它是可用的管理接口。';
+      default:
+        return error.message;
+    }
+  }
+
+  return '连接失败，请检查服务器地址、Admin Key 和网络连通性。';
+}
 
 export default function LoginScreen() {
-  useScreenInteractive('login_interactive');
   const config = useSnapshot(adminConfigState);
+  const hasAccount = Boolean(config.baseUrl.trim());
   const { control, handleSubmit, formState } = useForm<FormValues>({
     resolver: zodResolver(schema),
     defaultValues: {
@@ -41,115 +64,111 @@ export default function LoginScreen() {
       adminApiKey: config.adminApiKey,
     },
   });
+  const [connectionState, setConnectionState] = useState<ConnectionState>('idle');
+  const [connectionMessage, setConnectionMessage] = useState('');
+
+  if (hasAccount) {
+    return <Redirect href="/monitor" />;
+  }
 
   return (
-    <ScreenShell
-      title="登录"
-      subtitle=""
-      titleAside={<Text className="text-[11px] text-[#a2988a]">添加、切换或恢复 Sub2API 账号。</Text>}
-      variant="minimal"
-    >
-      {config.accounts.length > 0 ? (
-        <ListCard title="已保存账号" meta="可直接切换到其他 Sub2API 账号">
-          <View className="gap-3">
-            {config.accounts.map((account: AdminAccountProfile) => {
-              const active = account.id === config.activeAccountId;
-              const enabled = account.enabled !== false;
-
-              return (
-                <View key={account.id} className="rounded-[18px] bg-[#f1ece2] px-4 py-3">
-                  <Text className="text-sm font-semibold text-[#16181a]">{account.label}</Text>
-                  <Text className="mt-1 text-xs text-[#7d7468]">{account.baseUrl}</Text>
-                  <View className="mt-3 flex-row gap-3">
-                    <Pressable
-                      className={active ? 'flex-1 rounded-[16px] bg-[#d7eee4] px-3 py-2.5' : !enabled ? 'flex-1 rounded-[16px] bg-[#d8d1c4] px-3 py-2.5' : 'flex-1 rounded-[16px] bg-[#1d5f55] px-3 py-2.5'}
-                      onPress={async () => {
-                        await switchAdminAccount(account.id);
-                        queryClient.clear();
-                        router.replace('/monitor');
-                      }}
-                      disabled={!enabled}
-                    >
-                      <Text className={active ? 'text-center text-xs font-semibold text-[#1d5f55]' : !enabled ? 'text-center text-xs font-semibold text-[#7d7468]' : 'text-center text-xs font-semibold text-white'}>
-                        {active ? '使用中' : '切换账号'}
-                      </Text>
-                    </Pressable>
-                    <Pressable
-                      className="rounded-[16px] bg-[#e7dfcf] px-4 py-2.5"
-                      onPress={async () => {
-                        await setAdminAccountEnabled(account.id, account.enabled === false);
-                      }}
-                    >
-                      <Text className="text-center text-xs font-semibold text-[#4e463e]">{enabled ? '禁用' : '启用'}</Text>
-                    </Pressable>
-                    <Pressable
-                      className="rounded-[16px] bg-[#e7dfcf] px-4 py-2.5"
-                      onPress={async () => {
-                        await removeAdminAccount(account.id);
-                      }}
-                    >
-                      <Text className="text-center text-xs font-semibold text-[#7a3d31]">删除</Text>
-                    </Pressable>
-                  </View>
-                </View>
-              );
-            })}
+    <SafeAreaView style={{ flex: 1, backgroundColor: colors.page }}>
+      <ScrollView contentContainerStyle={{ flexGrow: 1, paddingHorizontal: 20, paddingVertical: 24 }} keyboardShouldPersistTaps="handled">
+        <View style={{ flex: 1, justifyContent: 'center', gap: 20 }}>
+          <View style={{ gap: 8 }}>
+            <Text style={{ fontSize: 34, fontWeight: '800', color: colors.text }}>管理员入口</Text>
+            <Text style={{ fontSize: 14, lineHeight: 22, color: colors.subtext }}>
+              首次进入请填写服务器地址和 Admin Key。连接成功后即可进入应用，并在“服务器”页管理多个服务器。
+            </Text>
           </View>
-        </ListCard>
-      ) : null}
 
-      <ListCard title="Host" meta="当前站点或管理代理地址" icon={Globe}>
-        <Controller
-          control={control}
-          name="baseUrl"
-          render={({ field: { onChange, value } }) => (
-            <TextInput
-              value={value}
-              onChangeText={onChange}
-              placeholder="http://localhost:8787"
-              placeholderTextColor="#9b9081"
-              autoCapitalize="none"
-              className="rounded-[18px] bg-[#f1ece2] px-4 py-4 text-base text-[#16181a]"
-            />
-          )}
-        />
-      </ListCard>
+          <View style={{ backgroundColor: colors.card, borderRadius: 22, padding: 18, gap: 16 }}>
+            <View>
+              <Text style={{ marginBottom: 8, fontSize: 12, color: colors.subtext }}>服务器地址</Text>
+              <Controller
+                control={control}
+                name="baseUrl"
+                render={({ field: { onChange, value } }) => (
+                  <TextInput
+                    value={value}
+                    onChangeText={(text) => {
+                      if (connectionState !== 'idle') {
+                        setConnectionState('idle');
+                        setConnectionMessage('');
+                      }
+                      onChange(text);
+                    }}
+                    placeholder="例如：https://api.example.com"
+                    placeholderTextColor="#9b9081"
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    style={{ backgroundColor: colors.mutedCard, borderRadius: 16, paddingHorizontal: 16, paddingVertical: 14, fontSize: 16, color: colors.text }}
+                  />
+                )}
+              />
+            </View>
 
-      <ListCard title="Admin Token" meta="直连上游时必填；使用本地代理可留空" icon={KeyRound}>
-        <Controller
-          control={control}
-          name="adminApiKey"
-          render={({ field: { onChange, value } }) => (
-            <TextInput
-              value={value}
-              onChangeText={onChange}
-              placeholder="admin-xxxxxxxx"
-              placeholderTextColor="#9b9081"
-              autoCapitalize="none"
-              className="rounded-[18px] bg-[#f1ece2] px-4 py-4 text-base text-[#16181a]"
-            />
-          )}
-        />
-      </ListCard>
+            <View>
+              <Text style={{ marginBottom: 8, fontSize: 12, color: colors.subtext }}>Admin Key</Text>
+              <Controller
+                control={control}
+                name="adminApiKey"
+                render={({ field: { onChange, value } }) => (
+                  <TextInput
+                    value={value}
+                    onChangeText={(text) => {
+                      if (connectionState !== 'idle') {
+                        setConnectionState('idle');
+                        setConnectionMessage('');
+                      }
+                      onChange(text);
+                    }}
+                    placeholder="admin-xxxxxxxx"
+                    placeholderTextColor="#9b9081"
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    style={{ backgroundColor: colors.mutedCard, borderRadius: 16, paddingHorizontal: 16, paddingVertical: 14, fontSize: 16, color: colors.text }}
+                  />
+                )}
+              />
+            </View>
 
-      {(formState.errors.baseUrl || formState.errors.adminApiKey) ? (
-        <View className="rounded-[20px] bg-[#fbf1eb] px-4 py-3">
-          <Text className="text-sm text-[#c25d35]">{formState.errors.baseUrl?.message || formState.errors.adminApiKey?.message}</Text>
+            {formState.errors.baseUrl || formState.errors.adminApiKey ? (
+              <View style={{ borderRadius: 14, backgroundColor: colors.dangerBg, paddingHorizontal: 14, paddingVertical: 12 }}>
+                <Text style={{ color: colors.danger, fontSize: 14 }}>{formState.errors.baseUrl?.message || formState.errors.adminApiKey?.message}</Text>
+              </View>
+            ) : null}
+
+            {connectionMessage ? (
+              <View style={{ borderRadius: 14, backgroundColor: colors.dangerBg, paddingHorizontal: 14, paddingVertical: 12 }}>
+                <Text style={{ color: colors.danger, fontSize: 14 }}>{connectionMessage}</Text>
+              </View>
+            ) : null}
+
+            <Pressable
+              style={{ backgroundColor: connectionState === 'checking' ? '#7ca89f' : colors.primary, borderRadius: 18, paddingVertical: 15, alignItems: 'center' }}
+              disabled={connectionState === 'checking'}
+              onPress={handleSubmit(async (values) => {
+                setConnectionState('checking');
+                setConnectionMessage('正在验证服务器连接...');
+
+                try {
+                  await saveAdminConfig(values);
+                  queryClient.clear();
+                  await queryClient.fetchQuery({ queryKey: ['admin-settings'], queryFn: getAdminSettings });
+                  await queryClient.prefetchQuery({ queryKey: ['monitor-stats'], queryFn: getDashboardStats });
+                  router.replace('/monitor');
+                } catch (error) {
+                  setConnectionState('error');
+                  setConnectionMessage(getConnectionErrorMessage(error));
+                }
+              })}
+            >
+              <Text style={{ color: '#fff', fontSize: 15, fontWeight: '700' }}>{connectionState === 'checking' ? '连接中...' : '进入应用'}</Text>
+            </Pressable>
+          </View>
         </View>
-      ) : null}
-
-      <Pressable
-        className="rounded-[20px] bg-[#1d5f55] px-4 py-4"
-        onPress={handleSubmit(async (values) => {
-          await saveAdminConfig(values);
-          queryClient.clear();
-          router.replace('/monitor');
-        })}
-      >
-        <Text className="text-center text-sm font-semibold tracking-[1.2px] text-white">
-          {config.saving ? '登录中...' : '进入管理台'}
-        </Text>
-      </Pressable>
-    </ScreenShell>
+      </ScrollView>
+    </SafeAreaView>
   );
 }