Merge pull request #820 from xiaomakuaiz/feat/mobile-profile-email

xiaomakuaiz · web-flow · commit 651f72b53951 · 2026-07-06T14:56:40.000+08:00
feat(mobile): add profile email binding
diff --git a/mobile/app/(tabs)/profile.tsx b/mobile/app/(tabs)/profile.tsx
@@ -1,9 +1,9 @@
 import * as Clipboard from 'expo-clipboard';
 import { useFocusEffect, useRouter } from 'expo-router';
 import React, { useCallback, useEffect, useState } from 'react';
-import { ActivityIndicator, Alert, Image, Linking, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { ActivityIndicator, Alert, AppState, Image, KeyboardAvoidingView, Linking, Modal, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { getCheckinStatus, getSubscription, getWallet, listInvitations, resolveAssetUrl, submitCheckin } from '@/api/client';
+import { getCheckinStatus, getSubscription, getWallet, listInvitations, resolveAssetUrl, sendBindEmailVerification, submitCheckin } from '@/api/client';
 import { checkAppUpdate, checkOta, currentOtaId, downloadAndApplyOta, installedAppVersion } from '@/updates/useOtaUpdate';
 import { obtainCaptchaToken } from '@/api/captcha';
 import type { InvitationItem, Subscription, Wallet } from '@/api/types';
@@ -103,7 +103,7 @@ function About({ t }: { t: Theme }) {
       { text: '取消', style: 'cancel' },
       { text: '立即更新', onPress: applyOtaNow },
     ]);
-  }, [otaBusy, appVersion, applyOtaNow]);
+  }, [otaBusy, applyOtaNow, verLine]);
   return (
     <Card style={{ padding: 16 }}>
       <Text style={{ fontSize: 12, fontWeight: '700', color: t.tx3, letterSpacing: 0.5, marginBottom: 13 }}>关于</Text>
@@ -145,6 +145,86 @@ function About({ t }: { t: Theme }) {
   );
 }
 
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+function BindEmailSheet({
+  visible,
+  email,
+  busy,
+  onChangeEmail,
+  onClose,
+  onSubmit,
+}: {
+  visible: boolean;
+  email: string;
+  busy: boolean;
+  onChangeEmail: (value: string) => void;
+  onClose: () => void;
+  onSubmit: () => void;
+}) {
+  const t = useTheme();
+  const insets = useSafeAreaInsets();
+  const [focused, setFocused] = useState(false);
+
+  useEffect(() => {
+    if (!visible) setFocused(false);
+  }, [visible]);
+
+  return (
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose} statusBarTranslucent>
+      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={{ flex: 1, justifyContent: 'flex-end' }}>
+        <Pressable style={StyleSheet.absoluteFill} onPress={onClose} />
+        <View style={{ backgroundColor: t.bg2, borderTopLeftRadius: 24, borderTopRightRadius: 24, borderTopWidth: StyleSheet.hairlineWidth, borderColor: t.line2, paddingHorizontal: spacing.pad, paddingBottom: insets.bottom + 16 }}>
+          <View style={{ width: 38, height: 4, borderRadius: 99, backgroundColor: t.line2, alignSelf: 'center', marginTop: 10, marginBottom: 14 }} />
+          <Text style={{ fontSize: 18, fontWeight: '800', color: t.tx }}>绑定邮箱</Text>
+          <Text style={{ fontSize: 13, color: t.tx2, fontWeight: '600', marginTop: 18, marginBottom: 8 }}>邮箱地址</Text>
+          <TextInput
+            value={email}
+            onChangeText={onChangeEmail}
+            placeholder="name@example.com"
+            placeholderTextColor={t.tx3}
+            keyboardType="email-address"
+            autoCapitalize="none"
+            autoCorrect={false}
+            editable={!busy}
+            returnKeyType="send"
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            onSubmitEditing={onSubmit}
+            style={{
+              backgroundColor: t.bg3,
+              borderWidth: 1,
+              borderColor: focused ? t.ac : t.line2,
+              borderRadius: 14,
+              paddingHorizontal: 14,
+              paddingVertical: Platform.OS === 'ios' ? 13 : 9,
+              color: t.tx,
+              fontSize: 15,
+            }}
+          />
+          <View style={{ flexDirection: 'row', gap: 10, marginTop: 18 }}>
+            <Pressable
+              onPress={onClose}
+              disabled={busy}
+              style={({ pressed }) => [{ flex: 1, height: 46, borderRadius: 15, alignItems: 'center', justifyContent: 'center', backgroundColor: t.bg3 }, pressed && { opacity: 0.65 }, busy && { opacity: 0.5 }]}
+            >
+              <Text style={{ color: t.tx2, fontSize: 14.5, fontWeight: '700' }}>取消</Text>
+            </Pressable>
+            <Pressable
+              onPress={onSubmit}
+              disabled={busy || !email.trim()}
+              style={({ pressed }) => [{ flex: 1.45, height: 46, borderRadius: 15, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 7, backgroundColor: t.ac }, pressed && { transform: [{ scale: 0.98 }] }, (busy || !email.trim()) && { opacity: 0.45 }]}
+            >
+              {busy ? <ActivityIndicator size="small" color={t.acInk} /> : <Icons.mail size={16} color={t.acInk} sw={2.1} />}
+              <Text style={{ color: t.acInk, fontSize: 14.5, fontWeight: '800' }}>发送验证邮件</Text>
+            </Pressable>
+          </View>
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}
+
 const INVITE_REWARD = 5000;
 
 type PlanKey = 'basic' | 'pro' | 'ultra';
@@ -226,7 +306,7 @@ export default function ProfileScreen() {
   const t = useTheme();
   const router = useRouter();
   const insets = useSafeAreaInsets();
-  const { user, baseUrl, logout, deleteAccount, appleSession } = useAuth();
+  const { user, baseUrl, logout, deleteAccount, appleSession, refreshUser } = useAuth();
   const [busy, setBusy] = useState(false);
   const [wallet, setWallet] = useState<Wallet | null>(null);
   const [subscription, setSubscription] = useState<Subscription | null>(null);
@@ -238,11 +318,14 @@ export default function ProfileScreen() {
   const [avatarBroken, setAvatarBroken] = useState(false);
   const [checkedIn, setCheckedIn] = useState<boolean | null>(null);
   const [checkingIn, setCheckingIn] = useState(false);
+  const [bindEmailOpen, setBindEmailOpen] = useState(false);
+  const [bindEmail, setBindEmail] = useState('');
+  const [bindingEmail, setBindingEmail] = useState(false);
 
   useFocusEffect(
     useCallback(() => {
       let active = true;
-      Promise.allSettled([getWallet(), getSubscription(), listInvitations(), getCheckinStatus()]).then(([w, s, inv, c]) => {
+      Promise.allSettled([refreshUser(), getWallet(), getSubscription(), listInvitations(), getCheckinStatus()]).then(([, w, s, inv, c]) => {
         if (!active) return;
         if (w.status === 'fulfilled') setWallet(w.value);
         if (s.status === 'fulfilled') setSubscription(s.value);
@@ -251,7 +334,7 @@ export default function ProfileScreen() {
         setLoadingWallet(false);
       });
       return () => { active = false; };
-    }, []),
+    }, [refreshUser]),
   );
 
   const showToast = useCallback((msg: string) => {
@@ -264,6 +347,33 @@ export default function ProfileScreen() {
     showToast(msg);
   }, [showToast]);
 
+  const closeBindEmail = useCallback(() => {
+    if (bindingEmail) return;
+    setBindEmailOpen(false);
+    setBindEmail('');
+  }, [bindingEmail]);
+
+  const handleBindEmail = useCallback(async () => {
+    if (bindingEmail) return;
+    const nextEmail = bindEmail.trim();
+    if (!EMAIL_RE.test(nextEmail)) {
+      Alert.alert('邮箱格式不正确', '请输入有效的邮箱地址。');
+      return;
+    }
+
+    setBindingEmail(true);
+    try {
+      await sendBindEmailVerification(nextEmail);
+      setBindEmailOpen(false);
+      setBindEmail('');
+      Alert.alert('验证邮件已发送', `请前往 ${nextEmail} 查收验证邮件，完成验证后邮箱会显示在本页。`);
+    } catch (e) {
+      Alert.alert('绑定邮箱失败', e instanceof Error && e.message ? e.message : '请稍后重试');
+    } finally {
+      setBindingEmail(false);
+    }
+  }, [bindEmail, bindingEmail]);
+
   const doCheckin = useCallback(async () => {
     if (checkingIn || checkedIn) return;
     setCheckingIn(true);
@@ -320,6 +430,13 @@ export default function ProfileScreen() {
   const email = user?.email || '';
   const avatarUrl = resolveAssetUrl(user?.avatar_url || user?.avatar);
   useEffect(() => { setAvatarBroken(false); }, [avatarUrl]);
+  useEffect(() => {
+    if (email) return;
+    const sub = AppState.addEventListener('change', (state) => {
+      if (state === 'active') refreshUser().catch(() => undefined);
+    });
+    return () => sub.remove();
+  }, [email, refreshUser]);
   const credits = Math.floor((wallet?.balance ?? 0) / 1000).toLocaleString('zh-CN');
   const inviteLink = user?.id ? `${baseUrl}/?ic=${user.id}` : '';
   const planKey = normalizePlan(subscription?.plan);
@@ -341,20 +458,30 @@ export default function ProfileScreen() {
         <View style={{ paddingHorizontal: spacing.pad, paddingTop: 12, gap: spacing.gap }}>
           {/* identity */}
           <Card style={{ padding: 16, flexDirection: 'row', alignItems: 'center', gap: 14 }}>
-            <View style={[{ width: 60, height: 60, borderRadius: 99, alignItems: 'center', justifyContent: 'center', overflow: 'hidden', backgroundColor: avatarUrl && !avatarBroken ? t.ac : t.dark ? t.bg3 : '#fff' }, t.shCard]}>
+            <View style={[{ width: 60, height: 60, borderRadius: 18, alignItems: 'center', justifyContent: 'center', overflow: 'hidden', backgroundColor: avatarUrl && !avatarBroken ? t.ac : t.dark ? t.bg3 : '#fff' }, t.shCard]}>
               {avatarUrl && !avatarBroken
-                ? <Image source={{ uri: avatarUrl }} onError={() => setAvatarBroken(true)} style={{ width: 60, height: 60, borderRadius: 99 }} />
+                ? <Image source={{ uri: avatarUrl }} onError={() => setAvatarBroken(true)} style={{ width: 60, height: 60, borderRadius: 18 }} />
                 : <MonkeyLogo size={52} />}
             </View>
             <View style={{ flex: 1, minWidth: 0 }}>
-              <Text numberOfLines={1} style={{ fontSize: 18, fontWeight: '700', color: t.tx }}>{name}</Text>
-              {email ? <Text numberOfLines={1} style={{ marginTop: 3, fontSize: 13, color: t.tx2 }}>{email}</Text> : null}
-              {user?.id ? (
-                <Pressable onPress={() => copy(user.id!, '用户 ID 已复制')} style={({ pressed }) => [{ flexDirection: 'row', alignItems: 'center', gap: 5, marginTop: 8, alignSelf: 'flex-start', paddingHorizontal: 9, paddingVertical: 4, borderRadius: 99, backgroundColor: t.bg3 }, pressed && { opacity: 0.6 }]}>
-                  <Text style={{ fontSize: 11, color: t.tx3, fontFamily: 'monospace' }}>ID {user.id.slice(0, 8)}</Text>
-                  <Icons.copy size={11} color={t.tx3} sw={1.8} />
-                </Pressable>
-              ) : null}
+              <Text numberOfLines={1} style={{ fontSize: 18, fontWeight: '800', color: t.tx }}>{name}</Text>
+              <View style={{ marginTop: 7, gap: 5 }}>
+                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 7, minWidth: 0 }}>
+                  <Icons.mail size={13} color={t.tx3} sw={1.8} />
+                  <Text numberOfLines={1} style={{ flex: 1, minWidth: 0, fontSize: 12.5, color: t.tx3, fontWeight: '500' }}>{email || '未绑定邮箱'}</Text>
+                  {!email ? (
+                    <Pressable onPress={() => setBindEmailOpen(true)} hitSlop={8} style={({ pressed }) => [{ paddingHorizontal: 4, paddingVertical: 2 }, pressed && { opacity: 0.55 }]}>
+                      <Text style={{ color: t.acTx, fontSize: 12.5, fontWeight: '700' }}>绑定</Text>
+                    </Pressable>
+                  ) : null}
+                </View>
+                {user?.id ? (
+                  <Pressable onPress={() => copy(user.id!, '用户 ID 已复制')} style={({ pressed }) => [{ flexDirection: 'row', alignItems: 'center', gap: 7, alignSelf: 'flex-start' }, pressed && { opacity: 0.55 }]}>
+                    <Icons.copy size={13} color={t.tx3} sw={1.8} />
+                    <Text style={{ fontSize: 12.5, color: t.tx3, fontFamily: 'monospace' }}>{user.id.slice(0, 8)}</Text>
+                  </Pressable>
+                ) : null}
+              </View>
             </View>
           </Card>
 
@@ -430,6 +557,7 @@ export default function ProfileScreen() {
       </ScrollView>
 
       <GlassTop title="我的" collapsed={collapsed} />
+      <BindEmailSheet visible={bindEmailOpen} email={bindEmail} busy={bindingEmail} onChangeEmail={setBindEmail} onClose={closeBindEmail} onSubmit={handleBindEmail} />
       {toast ? <Toast text={toast} bottom={insets.bottom + 116} /> : null}
     </View>
   );
diff --git a/mobile/src/api/client.ts b/mobile/src/api/client.ts
@@ -222,6 +222,14 @@ export async function getUserStatus(): Promise<UserStatus> {
   return resp.data?.user ?? {};
 }
 
+/** 发送邮箱绑定验证邮件。验证链接被点击后，后端才会把邮箱写入用户信息。 */
+export function sendBindEmailVerification(email: string) {
+  return request('/api/v1/users/email/bind-request', {
+    method: 'PUT',
+    body: { email },
+  });
+}
+
 export async function getWallet(): Promise<Wallet | null> {
   const resp = await request<Wallet>('/api/v1/users/wallet');
   return resp.data ?? null;
diff --git a/mobile/src/auth/AuthContext.tsx b/mobile/src/auth/AuthContext.tsx
@@ -37,6 +37,7 @@ interface AuthState {
   basicAuth: string; // 测试环境的 HTTP Basic Auth（"user:pass"），可选
   savedEmail: string;
   savedPassword: string; // 上次登录成功的密码，用于自动填充
+  refreshUser: () => Promise<UserStatus>;
   login: (email: string, password: string) => Promise<void>;
   loginWithApple: (params: { identity_token: string; authorization_code?: string; full_name?: string }) => Promise<void>;
   completeOAuthLogin: () => Promise<void>; // 百智云 OAuth 在 WebView 完成后，用会话 Cookie 确认登录
@@ -144,6 +145,15 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     [baseUrl],
   );
 
+  const refreshUser = useCallback(async () => {
+    const u = await getUserStatus();
+    if (u && (u.id || u.email || u.username)) {
+      setUser(u);
+      setAuthenticated(true);
+    }
+    return u;
+  }, []);
+
   // 注销账号：后端删除成功后，账号已不存在——清掉保存的自动填充凭据，
   // 其余登录态清理复用 doLogout（保持与退出登录完全一致的清场顺序）。
   const deleteAccount = useCallback(async () => {
@@ -222,6 +232,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
       basicAuth,
       savedEmail,
       savedPassword,
+      refreshUser,
       login,
       loginWithApple,
       completeOAuthLogin,
@@ -230,7 +241,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
       updateBaseUrl,
       updateBasicAuth,
     }),
-    [ready, authenticated, appleSession, user, baseUrl, basicAuth, savedEmail, savedPassword, login, loginWithApple, completeOAuthLogin, doLogout, deleteAccount, updateBaseUrl, updateBasicAuth],
+    [ready, authenticated, appleSession, user, baseUrl, basicAuth, savedEmail, savedPassword, refreshUser, login, loginWithApple, completeOAuthLogin, doLogout, deleteAccount, updateBaseUrl, updateBasicAuth],
   );
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
diff --git a/mobile/src/components/Icons.tsx b/mobile/src/components/Icons.tsx
@@ -49,6 +49,7 @@ export const Icons: Record<string, IconFn> = {
   stop: (p) => <Ic {...p}><Rect x={7} y={7} width={10} height={10} rx={2.2} fill={p.color} stroke="none" /></Ic>,
   diamond: (p) => <Ic {...p}><Path d="M5 9.5l3-4.5h8l3 4.5-7 9z M5 9.5h14" /></Ic>,
   logout: (p) => <Ic {...p}><Path d="M14 7V5.5A1.5 1.5 0 0 0 12.5 4H6a1.5 1.5 0 0 0-1.5 1.5v13A1.5 1.5 0 0 0 6 20h6.5a1.5 1.5 0 0 0 1.5-1.5V17" /><Path d="M10 12h10m0 0l-3-3m3 3l-3 3" /></Ic>,
+  mail: (p) => <Ic {...p}><Rect x={3.5} y={5.5} width={17} height={13} rx={2.4} /><Path d="M5 8l7 5.2L19 8" /></Ic>,
   at: (p) => <Ic {...p}><Circle cx={12} cy={12} r={3.8} /><Path d="M15.8 12v1.5a2.5 2.5 0 0 0 5 0V12a8.5 8.5 0 1 0-3.3 6.7" /></Ic>,
   slash: (p) => <Ic {...p}><Path d="M15 4L9 20" /></Ic>,
   attach: (p) => <Ic {...p}><Path d="M19 11.5l-7.1 7.1a4 4 0 0 1-5.7-5.7l7.7-7.7a2.6 2.6 0 0 1 3.7 3.7l-7.6 7.6a1.2 1.2 0 0 1-1.7-1.7l6.9-6.9" /></Ic>,
