feat: add all source files - services, store, hooks, components, screens

2026-07-07 23:18:38 +08:00 · 2026-03-05 18:02:54 +08:00
parent bbe0df6ed2
commit a0e53bd073
15 changed files with 755 additions and 0 deletions
--- a/components/LoginModal.tsx
+++ b/components/LoginModal.tsx
@@ -0,0 +1,79 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Modal, View, Text, StyleSheet, TouchableOpacity, Image, ActivityIndicator } from 'react-native';
+import { generateQRCode, pollQRCode } from '../services/bilibili';
+import { useAuthStore } from '../store/authStore';
+
+interface Props {
+  visible: boolean;
+  onClose: () => void;
+}
+
+export function LoginModal({ visible, onClose }: Props) {
+  const [qrUrl, setQrUrl] = useState<string | null>(null);
+  const [qrKey, setQrKey] = useState<string | null>(null);
+  const [status, setStatus] = useState<'loading' | 'waiting' | 'scanned' | 'done' | 'error'>('loading');
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const login = useAuthStore(s => s.login);
+
+  useEffect(() => {
+    if (!visible) return;
+    setStatus('loading');
+    setQrUrl(null);
+    setQrKey(null);
+    generateQRCode().then(data => {
+      setQrUrl(`https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(data.url)}&size=200x200`);
+      setQrKey(data.qrcode_key);
+      setStatus('waiting');
+    }).catch(() => setStatus('error'));
+
+    return () => { if (pollRef.current) clearInterval(pollRef.current); };
+  }, [visible]);
+
+  useEffect(() => {
+    if (!qrKey || status !== 'waiting') return;
+    pollRef.current = setInterval(async () => {
+      const result = await pollQRCode(qrKey);
+      if (result.code === 86038) { setStatus('error'); clearInterval(pollRef.current!); }
+      if (result.code === 86090) setStatus('scanned');
+      if (result.code === 0 && result.cookie) {
+        clearInterval(pollRef.current!);
+        await login(result.cookie, '', '');
+        setStatus('done');
+        onClose();
+      }
+    }, 2000);
+    return () => { if (pollRef.current) clearInterval(pollRef.current); };
+  }, [qrKey, status]);
+
+  return (
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <View style={styles.overlay}>
+        <View style={styles.sheet}>
+          <Text style={styles.title}>扫码登录</Text>
+          {status === 'loading' && <ActivityIndicator size="large" color="#00AEEC" style={styles.loader} />}
+          {(status === 'waiting' || status === 'scanned') && qrUrl && (
+            <>
+              <Image source={{ uri: qrUrl }} style={styles.qr} />
+              <Text style={styles.hint}>{status === 'scanned' ? '扫描成功，请在手机确认' : '使用 B站 APP 扫一扫'}</Text>
+            </>
+          )}
+          {status === 'error' && <Text style={styles.hint}>二维码已过期，请关闭重试</Text>}
+          <TouchableOpacity style={styles.closeBtn} onPress={onClose}>
+            <Text style={styles.closeTxt}>关闭</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'flex-end' },
+  sheet: { backgroundColor: '#fff', borderTopLeftRadius: 16, borderTopRightRadius: 16, padding: 24, alignItems: 'center' },
+  title: { fontSize: 18, fontWeight: '600', marginBottom: 20 },
+  loader: { marginVertical: 40 },
+  qr: { width: 200, height: 200, marginBottom: 12 },
+  hint: { fontSize: 13, color: '#666', marginBottom: 20 },
+  closeBtn: { padding: 12 },
+  closeTxt: { fontSize: 14, color: '#00AEEC' },
+});