feat:二维码优化和保存

components/LoginModal.tsx

@@ -7,7 +7,12 @@ import {
   TouchableOpacity,
   Image,
   ActivityIndicator,
+  Animated,
+  Alert,
 } from "react-native";
+import * as FileSystem from "expo-file-system/legacy";
+import * as MediaLibrary from "expo-media-library";
+import { Ionicons } from "@expo/vector-icons";
 import { generateQRCode, pollQRCode, getUserInfo } from "../services/bilibili";
 import { useAuthStore } from "../store/authStore";
 
@@ -19,6 +24,8 @@ interface Props {
 export function LoginModal({ visible, onClose }: Props) {
   const [qrUrl, setQrUrl] = useState<string | null>(null);
   const [qrKey, setQrKey] = useState<string | null>(null);
+  const [qrImageLoaded, setQrImageLoaded] = useState(false);
+  const [saving, setSaving] = useState(false);
   const [status, setStatus] = useState<
     "loading" | "waiting" | "scanned" | "done" | "error"
   >("loading");
@@ -26,15 +33,31 @@ export function LoginModal({ visible, onClose }: Props) {
   const login = useAuthStore((s) => s.login);
   const setProfile = useAuthStore((s) => s.setProfile);
 
+  // sheet 滑入动画
+  const slideY = useRef(new Animated.Value(300)).current;
+
+  useEffect(() => {
+    if (visible) {
+      Animated.spring(slideY, {
+        toValue: 0,
+        useNativeDriver: true,
+        bounciness: 4,
+      }).start();
+    } else {
+      slideY.setValue(300);
+    }
+  }, [visible]);
+
   useEffect(() => {
     if (!visible) return;
     setStatus("loading");
     setQrUrl(null);
     setQrKey(null);
+    setQrImageLoaded(false);
     generateQRCode()
       .then((data) => {
         setQrUrl(
-          `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(data.url)}&size=200x200`,
+          `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(data.url)}&size=400x400`,
         );
         setQrKey(data.qrcode_key);
         setStatus("waiting");
@@ -60,7 +83,6 @@ export function LoginModal({ visible, onClose }: Props) {
         try {
           await login(result.cookie, "", "");
           setStatus("done");
-          // 登录后异步拉取用户头像和昵称
           const info = await getUserInfo();
           setProfile(info.face, info.uname, String(info.mid));
         } catch {
@@ -74,6 +96,26 @@ export function LoginModal({ visible, onClose }: Props) {
     };
   }, [qrKey, status]);
 
+  async function handleSaveQR() {
+    if (!qrUrl) return;
+    setSaving(true);
+    try {
+      const { status: perm } = await MediaLibrary.requestPermissionsAsync();
+      if (perm !== "granted") {
+        Alert.alert("提示", "需要相册权限才能保存图片");
+        return;
+      }
+      const dest = `${FileSystem.cacheDirectory}bilibili_qr.png`;
+      const { uri } = await FileSystem.downloadAsync(qrUrl, dest);
+      await MediaLibrary.saveToLibraryAsync(uri);
+      Alert.alert("已保存", "二维码已存入相册");
+    } catch {
+      Alert.alert("失败", "保存失败，请重试");
+    } finally {
+      setSaving(false);
+    }
+  }
+
   return (
     <Modal
       visible={visible}
@@ -81,7 +123,13 @@ export function LoginModal({ visible, onClose }: Props) {
       animationType="none"
       onRequestClose={onClose}
     >
-      <View style={styles.overlay}>
+      {/* 遮罩固定不动 */}
+      <View style={styles.overlay} pointerEvents="box-none" />
+
+      {/* sheet 独立滑入 */}
+      <Animated.View
+        style={[styles.sheetWrapper, { transform: [{ translateY: slideY }] }]}
+      >
         <View style={styles.sheet}>
           <Text style={styles.title}>扫码登录</Text>
           {status === "loading" && (
@@ -93,7 +141,31 @@ export function LoginModal({ visible, onClose }: Props) {
           )}
           {(status === "waiting" || status === "scanned") && qrUrl && (
             <>
-              <Image source={{ uri: qrUrl }} style={styles.qr} />
+              <View style={styles.qrWrapper}>
+                <Image
+                  source={{ uri: qrUrl }}
+                  style={styles.qr}
+                  onLoad={() => setQrImageLoaded(true)}
+                />
+                {!qrImageLoaded && (
+                  <View style={styles.qrLoader}>
+                    <ActivityIndicator size="large" color="#00AEEC" />
+                  </View>
+                )}
+                {qrImageLoaded && (
+                  <TouchableOpacity
+                    style={styles.saveBtn}
+                    onPress={handleSaveQR}
+                    disabled={saving}
+                  >
+                    {saving ? (
+                      <ActivityIndicator size="small" color="#fff" />
+                    ) : (
+                      <Ionicons name="download-outline" size={16} color="#fff" />
+                    )}
+                  </TouchableOpacity>
+                )}
+              </View>
               <Text style={styles.hint}>
                 {status === "scanned"
                   ? "扫描成功，请在手机确认"
@@ -108,16 +180,21 @@ export function LoginModal({ visible, onClose }: Props) {
             <Text style={styles.closeTxt}>关闭</Text>
           </TouchableOpacity>
         </View>
-      </View>
+      </Animated.View>
     </Modal>
   );
 }
 
 const styles = StyleSheet.create({
   overlay: {
-    flex: 1,
+    ...StyleSheet.absoluteFillObject,
     backgroundColor: "rgba(0,0,0,0.5)",
-    justifyContent: "flex-end",
+  },
+  sheetWrapper: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
   },
   sheet: {
     backgroundColor: "#fff",
@@ -128,7 +205,25 @@ const styles = StyleSheet.create({
   },
   title: { fontSize: 18, fontWeight: "600", marginBottom: 20 },
   loader: { marginVertical: 40 },
-  qr: { width: 200, height: 200, marginBottom: 12 },
+  qrWrapper: { width: 200, height: 200, marginBottom: 12 },
+  qr: { width: 200, height: 200 },
+  qrLoader: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#f4f4f4",
+  },
+  saveBtn: {
+    position: "absolute",
+    bottom: 6,
+    right: 6,
+    backgroundColor: "rgba(0,0,0,0.45)",
+    borderRadius: 14,
+    width: 28,
+    height: 28,
+    alignItems: "center",
+    justifyContent: "center",
+  },
   hint: { fontSize: 13, color: "#666", marginBottom: 20 },
   closeBtn: { padding: 12 },
   closeTxt: { fontSize: 14, color: "#00AEEC" },

components/NativeVideoPlayer.tsx

@@ -413,7 +413,7 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
                 onQualityChange(80);
                 return;
               }
-              console.warn('Video playback error:', e);
+              console.warn("Video playback error:", e);
             }}
           />
         ) : (
@@ -436,13 +436,12 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
 
         {showControls && (
           <>
-          {/*  小窗口 */}
+            {/*  小窗口 */}
             <LinearGradient
               colors={["rgba(0,0,0,0.55)", "transparent"]}
               style={styles.topBar}
               pointerEvents="box-none"
-            >
+            ></LinearGradient>
-            </LinearGradient>
 
             <TouchableOpacity
               style={styles.centerBtn}
@@ -580,7 +579,8 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
                       q.qn === currentQn && styles.qualityItemActive,
                     ]}
                   >
-                    {q.desc}{q.qn === 126 ? ' DV' : ''}
+                    {q.desc}
+                    {q.qn === 126 ? " DV" : ""}
                   </Text>
                   {q.qn === currentQn && (
                     <Ionicons name="checkmark" size={16} color="#00AEEC" />
@@ -684,7 +684,12 @@ const styles = StyleSheet.create({
     marginTop: 4,
   },
   ctrlBtn: { paddingHorizontal: 8, paddingVertical: 4 },
-  timeText: { color: "#fff", fontSize: 11, marginHorizontal: 2 },
+  timeText: {
+    color: "#fff",
+    fontSize: 11,
+    marginHorizontal: 2,
+    fontWeight: "600",
+  },
   qualityText: { color: "#fff", fontSize: 11, fontWeight: "600" },
   modalOverlay: {
     flex: 1,

package-lock.json

@@ -16,11 +16,11 @@
         "expo-dev-client": "~55.0.11",
         "expo-file-system": "~55.0.10",
         "expo-linear-gradient": "~55.0.8",
+        "expo-media-library": "~55.0.10",
         "expo-router": "~55.0.4",
         "expo-screen-orientation": "~55.0.8",
         "expo-status-bar": "~55.0.4",
         "expo-system-ui": "~55.0.9",
-        "fast-xml-parser": "^5.5.1",
         "pako": "^2.1.0",
         "react": "19.2.0",
         "react-dom": "19.2.0",
@@ -31,7 +31,6 @@
         "react-native-video": "^6.19.0",
         "react-native-web": "^0.21.0",
         "react-native-webview": "13.16.0",
-        "xml2js": "^0.6.2",
         "zustand": "^5.0.11"
       },
       "devDependencies": {
@@ -4525,6 +4524,16 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-media-library": {
+      "version": "55.0.10",
+      "resolved": "https://registry.npmjs.org/expo-media-library/-/expo-media-library-55.0.10.tgz",
+      "integrity": "sha512-xXmz8Do9BJSt1LrkC6r8l2HAXNdaAr2TdzCuiVo9u47Vuo54twlOgzLpdx4rIzODy/cclqbYb2tae4nCKHJLbw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/expo-modules-autolinking": {
       "version": "55.0.8",
       "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-55.0.8.tgz",
@@ -5219,41 +5228,6 @@
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
       "license": "MIT"
     },
-    "node_modules/fast-xml-builder": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/fast-xml-builder/-/fast-xml-builder-1.1.0.tgz",
-      "integrity": "sha512-7mtITW/we2/wTUZqMyBOR2F8xP4CRxMiSEcQxPIqdRWdO2L/HZSOlzoNyghmyDwNB8BDxePooV1ZTJpkOUhdRg==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/NaturalIntelligence"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "path-expression-matcher": "^1.1.2"
-      }
-    },
-    "node_modules/fast-xml-parser": {
-      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.5.1.tgz",
-      "integrity": "sha512-JTpMz8P5mDoNYzXTmTT/xzWjFiCWi0U+UQTJtrFH9muXsr2RqtXZPbnCW5h2mKsOd4u3XcPWCvDSrnaBPlUcMQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/NaturalIntelligence"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "fast-xml-builder": "^1.1.0",
-        "path-expression-matcher": "^1.1.2",
-        "strnum": "^2.1.2"
-      },
-      "bin": {
-        "fxparser": "src/cli/cli.js"
-      }
-    },
     "node_modules/fb-dotslash": {
       "version": "0.5.8",
       "resolved": "https://registry.npmjs.org/fb-dotslash/-/fb-dotslash-0.5.8.tgz",
@@ -7410,21 +7384,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/path-expression-matcher": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/path-expression-matcher/-/path-expression-matcher-1.1.2.tgz",
-      "integrity": "sha512-LXWqJmcpp2BKOEmgt4CyuESFmBfPuhJlAHKJsFzuJU6CxErWk75BrO+Ni77M9OxHN6dCYKM4vj+21Z6cOL96YQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/NaturalIntelligence"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -8764,18 +8723,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/strnum": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/strnum/-/strnum-2.2.0.tgz",
-      "integrity": "sha512-Y7Bj8XyJxnPAORMZj/xltsfo55uOiyHcU2tnAVzHUnSJR/KsEX+9RoDeXEnsXtl/CX4fAcrt64gZ13aGaWPeBg==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/NaturalIntelligence"
-        }
-      ],
-      "license": "MIT"
-    },
     "node_modules/structured-headers": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/structured-headers/-/structured-headers-0.4.1.tgz",
@@ -9389,28 +9336,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/xml2js": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.6.2.tgz",
-      "integrity": "sha512-T4rieHaC1EXcES0Kxxj4JWgaUQHDk+qwHcYOCFHfiwKz7tOVPLq7Hjq9dM1WCMhylqMEfP7hMcOIChvotiZegA==",
-      "license": "MIT",
-      "dependencies": {
-        "sax": ">=0.6.0",
-        "xmlbuilder": "~11.0.0"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/xml2js/node_modules/xmlbuilder": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
-      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
     "node_modules/xmlbuilder": {
       "version": "15.1.1",
       "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-15.1.1.tgz",

package.json

@@ -18,6 +18,7 @@
     "expo-dev-client": "~55.0.11",
     "expo-file-system": "~55.0.10",
     "expo-linear-gradient": "~55.0.8",
+    "expo-media-library": "~55.0.10",
     "expo-router": "~55.0.4",
     "expo-screen-orientation": "~55.0.8",
     "expo-status-bar": "~55.0.4",

utils/format.ts

@@ -1,6 +1,7 @@
 export function formatCount(n: number): string {
   if (n >= 100_000_000) return (n / 100_000_000).toFixed(1) + '亿';
   if (n >= 10_000) return (n / 10_000).toFixed(1) + '万';
+  
   return String(n);
 }