chore: merge master-bug → master (v1.0.8 暗黑模式 + 节流模式 + 本地二维码)

Author: Developer

.gitignore

@@ -49,4 +49,5 @@ docs/
 feature.md
 livePlan.md
 Promotion.md
+wordsFilter.md
 .env.local

CHANGELOG.md

@@ -5,6 +5,19 @@
 
 ---
 
+## [1.0.8] - 2026-03-24
+
+### 新增
+- **暗黑模式**：全局主题系统（`utils/theme.ts`），支持亮色 / 暗色一键切换，覆盖所有页面和组件
+- **节流模式**：设置页新增流量节省开关，开启后使用低画质封面、首页视频不自动播放、视频默认 360p 画质
+- **本地二维码生成**：登录二维码改用 `react-native-qrcode-svg` 本地渲染，移除对 `api.qrserver.com` 的外部依赖，提升可靠性
+
+### 修复
+- **SeasonSection 背景色**：合集组件背景色与父容器不一致，现跟随主题色 (`theme.card`) 正确显示
+- **推荐列表 Loading 状态**：空列表加载中未显示 spinner（`ListEmptyComponent` 条件逻辑反转）
+- **合集滚动定位偏移**：`getItemLayout` offset 计算未计入卡片间距（`gap: 10`），导致 `scrollToIndex` 定位不准
+- **推荐视频卡片双边框**：相邻推荐视频卡片之间出现双分割线
+
 ## [1.0.0] — 2026-03-20
 
 ### 首个正式版本

app/_layout.tsx

@@ -6,6 +6,7 @@ import { useEffect } from 'react';
 import { useAuthStore } from '../store/authStore';
 import { useDownloadStore } from '../store/downloadStore';
 import { useSettingsStore } from '../store/settingsStore';
+import { useTheme } from '../utils/theme';
 import { MiniPlayer } from '../components/MiniPlayer';
 import * as Sentry from '@sentry/react-native';
 import { ErrorBoundary } from '@sentry/react-native';
@@ -21,6 +22,7 @@ function RootLayout() {
   const restore = useAuthStore(s => s.restore);
   const loadDownloads = useDownloadStore(s => s.loadFromStorage);
   const restoreSettings = useSettingsStore(s => s.restore);
+  const darkMode = useSettingsStore(s => s.darkMode);
 
   useEffect(() => {
     restore();
@@ -31,7 +33,7 @@ function RootLayout() {
 
   return (
     <SafeAreaProvider>
-      <StatusBar style="dark" />
+      <StatusBar style={darkMode ? 'light' : 'dark'} />
       <View style={{ flex: 1 }}>
         <ErrorBoundary fallback={<Text style={{ padding: 32, textAlign: 'center' }}>发生错误，请重启 App</Text>}>
           <Stack screenOptions={{ headerShown: false }}>

app/downloads.tsx

@@ -27,9 +27,11 @@ function formatFileSize(bytes?: number): string {
   return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
 }
 import { proxyImageUrl } from '../utils/imageUrl';
+import { useTheme } from '../utils/theme';
 
 export default function DownloadsScreen() {
   const router = useRouter();
+  const theme = useTheme();
   const { tasks, loadFromStorage, removeTask } = useDownloadStore();
   const [playingUri, setPlayingUri] = useState<string | null>(null);
   const [playingTitle, setPlayingTitle] = useState('');
@@ -61,12 +63,12 @@ export default function DownloadsScreen() {
   if (done.length > 0) sections.push({ title: '已下载', data: done });
 
   return (
-    <SafeAreaView style={styles.safe}>
-      <View style={styles.topBar}>
+    <SafeAreaView style={[styles.safe, { backgroundColor: theme.bg }]}>
+      <View style={[styles.topBar, { backgroundColor: theme.card, borderBottomColor: theme.border }]}>
         <TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
-          <Ionicons name="chevron-back" size={24} color="#212121" />
+          <Ionicons name="chevron-back" size={24} color={theme.text} />
         </TouchableOpacity>
-        <Text style={styles.topTitle}>我的下载</Text>
+        <Text style={[styles.topTitle, { color: theme.text }]}>我的下载</Text>
         <View style={{ width: 32 }} />
       </View>
 

app/index.tsx

@@ -40,6 +40,7 @@ import {
 } from "../utils/videoRows";
 import { BigVideoCard } from "../components/BigVideoCard";
 import { FollowedLiveStrip } from "../components/FollowedLiveStrip";
+import { useTheme } from "../utils/theme";
 import type { LiveRoom } from "../services/types";
 
 const HEADER_H = 44;
@@ -83,6 +84,7 @@ export default function HomeScreen() {
   const [activeTab, setActiveTab] = useState<TabKey>("hot");
   const [liveAreaId, setLiveAreaId] = useState(0);
 
+  const theme = useTheme();
   const [visibleBigKey, setVisibleBigKey] = useState<string | null>(null);
   const rows = useMemo(() => toListRows(pages, liveRooms), [pages, liveRooms]);
   const pagerRef = useRef<PagerView>(null);
@@ -286,7 +288,7 @@ export default function HomeScreen() {
     activeTab === "hot" ? headerOpacity : liveHeaderOpacity;
 
   return (
-    <SafeAreaView style={styles.safe} edges={["left", "right"]}>
+    <SafeAreaView style={[styles.safe, { backgroundColor: theme.bg }]} edges={["left", "right"]}>
       {/* 滑动切换容器 */}
       <PagerView
         ref={pagerRef}
@@ -410,6 +412,7 @@ export default function HomeScreen() {
           styles.navBar,
           {
             paddingTop: insets.top,
+            backgroundColor: theme.card,
             transform: [{ translateY: currentHeaderTranslate }],
           },
         ]}
@@ -419,6 +422,7 @@ export default function HomeScreen() {
             styles.header,
             {
               opacity: currentHeaderOpacity,
+              borderBottomColor: theme.border,
             },
           ]}
         >
@@ -439,19 +443,19 @@ export default function HomeScreen() {
             </TouchableOpacity>
           </View>
           <TouchableOpacity
-            style={styles.searchBar}
+            style={[styles.searchBar, { backgroundColor: theme.inputBg }]}
             onPress={() => router.push("/search" as any)}
             activeOpacity={0.7}
           >
-            <Ionicons name="search" size={14} color="#999" />
-            <Text style={styles.searchPlaceholder}>搜索视频、UP主...</Text>
+            <Ionicons name="search" size={14} color={theme.textSub} />
+            <Text style={[styles.searchPlaceholder, { color: theme.textSub }]}>搜索视频、UP主...</Text>
           </TouchableOpacity>
           <DownloadProgressBtn
             onPress={() => router.push("/downloads" as any)}
           />
         </Animated.View>
 
-        <View style={styles.tabRow}>
+        <View style={[styles.tabRow, { backgroundColor: theme.card }]}>
           {TABS.map((tab) => (
             <TouchableOpacity
               key={tab.key}
@@ -462,6 +466,7 @@ export default function HomeScreen() {
               <Text
                 style={[
                   styles.tabText,
+                  { color: theme.textSub },
                   activeTab === tab.key && styles.tabTextActive,
                 ]}
               >

app/live/[roomId].tsx

@@ -17,12 +17,14 @@ import { LivePlayer } from "../../components/LivePlayer";
 import DanmakuList from "../../components/DanmakuList";
 import { formatCount } from "../../utils/format";
 import { proxyImageUrl } from "../../utils/imageUrl";
+import { useTheme } from "../../utils/theme";
 
 type Tab = "intro" | "danmaku";
 
 export default function LiveDetailScreen() {
   const { roomId } = useLocalSearchParams<{ roomId: string }>();
   const router = useRouter();
+  const theme = useTheme();
   const id = parseInt(roomId ?? "0", 10);
   const { room, anchor, stream, loading, error, changeQuality } =
     useLiveDetail(id);
@@ -34,17 +36,17 @@ export default function LiveDetailScreen() {
   const qualities = stream?.qualities ?? [];
   const currentQn = stream?.qn ?? 0;
 
-  // Use actual roomid from room detail (not the short/alias ID from the URL)
   const actualRoomId = room?.roomid ?? id;
   const { danmakus, giftCounts } = useLiveDanmaku(isLive ? actualRoomId : 0);
+
   return (
-    <SafeAreaView style={styles.safe}>
+    <SafeAreaView style={[styles.safe, { backgroundColor: theme.card }]}>
       {/* TopBar */}
-      <View style={styles.topBar}>
+      <View style={[styles.topBar, { borderBottomColor: theme.border }]}>
         <TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
-          <Ionicons name="chevron-back" size={24} color="#212121" />
+          <Ionicons name="chevron-back" size={24} color={theme.text} />
         </TouchableOpacity>
-        <Text style={styles.topTitle} numberOfLines={1}>
+        <Text style={[styles.topTitle, { color: theme.text }]} numberOfLines={1}>
           {room?.title ?? "直播间"}
         </Text>
       </View>
@@ -60,12 +62,12 @@ export default function LiveDetailScreen() {
       />
 
       {/* TabBar */}
-      <View style={styles.tabBar}>
+      <View style={[styles.tabBar, { backgroundColor: theme.card, borderBottomColor: theme.border }]}>
         <TouchableOpacity
           style={styles.tabItem}
           onPress={() => setTab("intro")}
         >
-          <Text style={[styles.tabLabel, tab === "intro" && styles.tabActive]}>
+          <Text style={[styles.tabLabel, { color: theme.textSub }, tab === "intro" && styles.tabActive]}>
             简介
           </Text>
           {tab === "intro" && <View style={styles.tabUnderline} />}
@@ -75,15 +77,15 @@ export default function LiveDetailScreen() {
           onPress={() => setTab("danmaku")}
         >
           <Text
-            style={[styles.tabLabel, tab === "danmaku" && styles.tabActive]}
+            style={[styles.tabLabel, { color: theme.textSub }, tab === "danmaku" && styles.tabActive]}
           >
             弹幕{danmakus.length > 0 ? ` ${danmakus.length}` : ""}
           </Text>
           {tab === "danmaku" && <View style={styles.tabUnderline} />}
         </TouchableOpacity>
       </View>
 
-      {/* Content — 两个面板始终挂载，通过 display 切换，保留弹幕列表状态 */}
+      {/* Content */}
       {loading ? (
         <ActivityIndicator style={styles.loader} color="#00AEEC" />
       ) : error ? (
@@ -95,7 +97,7 @@ export default function LiveDetailScreen() {
             showsVerticalScrollIndicator={false}
           >
             <View style={styles.titleSection}>
-              <Text style={styles.title}>{room?.title}</Text>
+              <Text style={[styles.title, { color: theme.text }]}>{room?.title}</Text>
               <View style={styles.metaRow}>
                 {isLive ? (
                   <View style={styles.livePill}>
@@ -126,15 +128,15 @@ export default function LiveDetailScreen() {
               </View>
             </View>
 
-            <View style={styles.divider} />
+            <View style={[styles.divider, { backgroundColor: theme.border }]} />
 
             {anchor && (
               <View style={styles.anchorRow}>
                 <Image
                   source={{ uri: proxyImageUrl(anchor.face) }}
                   style={styles.avatar}
                 />
-                <Text style={styles.anchorName}>{anchor.uname}</Text>
+                <Text style={[styles.anchorName, { color: theme.text }]}>{anchor.uname}</Text>
                 <TouchableOpacity style={styles.followBtn}>
                   <Text style={styles.followTxt}>+ 关注</Text>
                 </TouchableOpacity>
@@ -143,7 +145,7 @@ export default function LiveDetailScreen() {
 
             {!!room?.description && (
               <View style={styles.descBox}>
-                <Text style={styles.descText}>{room.description}</Text>
+                <Text style={[styles.descText, { color: theme.text }]}>{room.description}</Text>
               </View>
             )}
           </ScrollView>
@@ -166,38 +168,34 @@ export default function LiveDetailScreen() {
 }
 
 const styles = StyleSheet.create({
-  safe: { flex: 1, backgroundColor: "#fff" },
+  safe: { flex: 1 },
   topBar: {
     flexDirection: "row",
     alignItems: "center",
     paddingHorizontal: 8,
     paddingVertical: 8,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#eee",
   },
   backBtn: { padding: 4 },
   topTitle: {
     flex: 1,
     fontSize: 15,
     fontWeight: "600",
     marginLeft: 4,
-    color: "#212121",
   },
   loader: { marginVertical: 30 },
   errorText: { textAlign: "center", color: "#f00", padding: 20 },
   tabBar: {
     flexDirection: "row",
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#eee",
-    backgroundColor: "#fff",
   },
   tabItem: {
     paddingHorizontal: 20,
     paddingVertical: 10,
     alignItems: "center",
     position: "relative",
   },
-  tabLabel: { fontSize: 14, color: "#999", fontWeight: "500" },
+  tabLabel: { fontSize: 14, fontWeight: "500" },
   tabActive: { color: "#00AEEC", fontWeight: "700" },
   tabUnderline: {
     position: "absolute",
@@ -212,7 +210,6 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 16,
     fontWeight: "600",
-    color: "#212121",
     lineHeight: 22,
     marginBottom: 8,
   },
@@ -248,7 +245,6 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: StyleSheet.hairlineWidth,
-    backgroundColor: "#f0f0f0",
     marginHorizontal: 14,
   },
   anchorRow: {
@@ -258,7 +254,7 @@ const styles = StyleSheet.create({
     paddingVertical: 12,
   },
   avatar: { width: 40, height: 40, borderRadius: 20, marginRight: 10 },
-  anchorName: { flex: 1, fontSize: 14, color: "#212121", fontWeight: "500" },
+  anchorName: { flex: 1, fontSize: 14, fontWeight: "500" },
   followBtn: {
     backgroundColor: "#00AEEC",
     paddingHorizontal: 14,
@@ -267,7 +263,7 @@ const styles = StyleSheet.create({
   },
   followTxt: { color: "#fff", fontSize: 12, fontWeight: "600" },
   descBox: { padding: 14, paddingTop: 4 },
-  descText: { fontSize: 14, color: "#555", lineHeight: 22 },
+  descText: { fontSize: 14, lineHeight: 22 },
   danmakuFull: { flex: 1 },
   hidden: { display: "none" },
 });

app/search.tsx

@@ -13,11 +13,13 @@ import { useRouter } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
 import { VideoCard } from '../components/VideoCard';
 import { useSearch } from '../hooks/useSearch';
+import { useTheme } from '../utils/theme';
 import type { VideoItem } from '../services/types';
 
 export default function SearchScreen() {
   const router = useRouter();
   const { keyword, setKeyword, results, loading, hasMore, search, loadMore } = useSearch();
+  const theme = useTheme();
   const inputRef = useRef<TextInput>(null);
 
   const handleSearch = useCallback(() => {
@@ -64,7 +66,7 @@ export default function SearchScreen() {
     return (
       <View style={styles.emptyBox}>
         <Ionicons name="search-outline" size={48} color="#ddd" />
-        <Text style={styles.emptyText}>
+        <Text style={[styles.emptyText, { color: theme.textSub }]}>
           {results.length === 0 && keyword.trim()
             ? '没有找到相关视频'
             : '输入关键词搜索'}
@@ -74,16 +76,16 @@ export default function SearchScreen() {
   };
 
   return (
-    <SafeAreaView style={styles.safe} edges={['top', 'left', 'right']}>
+    <SafeAreaView style={[styles.safe, { backgroundColor: theme.bg }]} edges={['top', 'left', 'right']}>
       {/* Search header */}
-      <View style={styles.header}>
+      <View style={[styles.header, { backgroundColor: theme.card, borderBottomColor: theme.border }]}>
         <TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
-          <Ionicons name="chevron-back" size={24} color="#212121" />
+          <Ionicons name="chevron-back" size={24} color={theme.text} />
         </TouchableOpacity>
-        <View style={styles.inputWrap}>
+        <View style={[styles.inputWrap, { backgroundColor: theme.inputBg }]}>
           <TextInput
             ref={inputRef}
-            style={styles.input}
+            style={[styles.input, { color: theme.text }]}
             placeholder="搜索视频、UP主..."
             placeholderTextColor="#999"
             value={keyword}