From c7fbc1f44131c31ab0a163c08e7082a0b397d4d0 Mon Sep 17 00:00:00 2001
From: Developer <dev@bilibili-app.local>
Date: Wed, 25 Mar 2026 12:51:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E4=B8=8B=E8=BD=BD?=
 =?UTF-8?q?=E9=A1=B5UI=E4=BA=A4=E4=BA=92=E3=80=81=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=9A=97=E9=BB=91=E4=B8=BB=E9=A2=98=EF=BC=8C=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5=20header=20=E5=BA=95=E8=BE=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- downloads.tsx: 删除前弹 Alert 确认框（区分"取消下载"和"删除文件"）
- downloads.tsx: 下载出错时显示"重新下载"按钮，跳转视频详情页
- downloads.tsx: 下载中取消按钮改为 close-circle-outline 图标
- downloads.tsx: 已完成条目整行可点击播放，移除单独"播放"按钮
- downloads.tsx: 播放器横竖屏均显示顶部控制栏，点击切换显隐
- downloads.tsx: 移除进度条旁 ActivityIndicator，保留百分比文字
- downloads.tsx: 全部颜色跟随暗黑主题（bg/card/text/textSub/border）
- index.tsx: 移除悬浮 header 底部分割线
---
 app/downloads.tsx          | 165 +++++++++++++++++++++++--------------
 app/index.tsx              |   3 -
 app/video/[bvid].tsx       |  18 ++--
 components/DanmakuList.tsx |   5 +-
 4 files changed, 119 insertions(+), 72 deletions(-)

diff --git a/app/downloads.tsx b/app/downloads.tsx
index 0f19eaf..51dccf2 100644
--- a/app/downloads.tsx
+++ b/app/downloads.tsx
@@ -6,10 +6,10 @@ import {
   StyleSheet,
   TouchableOpacity,
   Image,
-  ActivityIndicator,
   Modal,
   StatusBar,
   useWindowDimensions,
+  Alert,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter } from 'expo-router';
@@ -19,6 +19,8 @@ let ScreenOrientation: typeof import('expo-screen-orientation') | null = null;
 try { ScreenOrientation = require('expo-screen-orientation'); } catch {}
 import { useDownloadStore, DownloadTask } from '../store/downloadStore';
 import { LanShareModal } from '../components/LanShareModal';
+import { proxyImageUrl } from '../utils/imageUrl';
+import { useTheme } from '../utils/theme';
 
 function formatFileSize(bytes?: number): string {
   if (!bytes || bytes <= 0) return '';
@@ -26,8 +28,6 @@ function formatFileSize(bytes?: number): string {
   if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   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();
@@ -36,12 +36,14 @@ export default function DownloadsScreen() {
   const [playingUri, setPlayingUri] = useState<string | null>(null);
   const [playingTitle, setPlayingTitle] = useState('');
   const [shareTask, setShareTask] = useState<(DownloadTask & { key: string }) | null>(null);
+  const [showControls, setShowControls] = useState(true);
   const { width, height } = useWindowDimensions();
   const isLandscape = width > height;
 
   async function openPlayer(uri: string, title: string) {
     setPlayingTitle(title);
     setPlayingUri(uri);
+    setShowControls(true);
     await ScreenOrientation?.unlockAsync();
   }
 
@@ -50,6 +52,18 @@ export default function DownloadsScreen() {
     await ScreenOrientation?.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
   }
 
+  function confirmDelete(key: string, status: DownloadTask['status']) {
+    const isDownloading = status === 'downloading';
+    Alert.alert(
+      isDownloading ? '取消下载' : '删除下载',
+      isDownloading ? '确定取消该下载任务？' : '确定删除该文件？删除后不可恢复。',
+      [
+        { text: '取消', style: 'cancel' },
+        { text: isDownloading ? '取消下载' : '删除', style: 'destructive', onPress: () => removeTask(key) },
+      ],
+    );
+  }
+
   useEffect(() => {
     loadFromStorage();
   }, []);
@@ -74,29 +88,33 @@ export default function DownloadsScreen() {
 
       {sections.length === 0 ? (
         <View style={styles.empty}>
-          <Ionicons name="cloud-download-outline" size={56} color="#ccc" />
-          <Text style={styles.emptyTxt}>暂无下载记录</Text>
+          <Ionicons name="cloud-download-outline" size={56} color={theme.textSub} />
+          <Text style={[styles.emptyTxt, { color: theme.textSub }]}>暂无下载记录</Text>
         </View>
       ) : (
         <SectionList
           sections={sections}
           keyExtractor={(item) => item.key}
           renderSectionHeader={({ section }) => (
-            <View style={styles.sectionHeader}>
-              <Text style={styles.sectionTitle}>{section.title}</Text>
+            <View style={[styles.sectionHeader, { backgroundColor: theme.bg }]}>
+              <Text style={[styles.sectionTitle, { color: theme.textSub }]}>{section.title}</Text>
             </View>
           )}
           renderItem={({ item }) => (
             <DownloadRow
               task={item}
+              theme={theme}
               onPlay={() => {
                 if (item.localUri) openPlayer(item.localUri, item.title);
               }}
-              onDelete={() => removeTask(item.key)}
+              onDelete={() => confirmDelete(item.key, item.status)}
               onShare={() => setShareTask(item)}
+              onRetry={() => router.push(`/video/${item.bvid}` as any)}
             />
           )}
-          ItemSeparatorComponent={() => <View style={styles.separator} />}
+          ItemSeparatorComponent={() => (
+            <View style={[styles.separator, { backgroundColor: theme.border, marginLeft: 108 }]} />
+          )}
           contentContainerStyle={{ paddingBottom: 32 }}
         />
       )}
@@ -115,27 +133,29 @@ export default function DownloadsScreen() {
         onRequestClose={closePlayer}
       >
         <StatusBar hidden />
-        <View style={styles.playerBg}>
+        <TouchableOpacity
+          activeOpacity={1}
+          style={styles.playerBg}
+          onPress={() => setShowControls(v => !v)}
+        >
           {playingUri && (
             <Video
               source={{ uri: playingUri }}
-              style={isLandscape
-                ? { width, height }
-                : { width, height: width * 0.5625 }}
+              style={isLandscape ? { width, height } : { width, height: width * 0.5625 }}
               resizeMode="contain"
-              controls
+              controls={false}
               paused={false}
             />
           )}
-          {!isLandscape && (
-            <View style={styles.playerBar}>
-              <TouchableOpacity onPress={closePlayer} style={styles.closeBtn}>
+          {showControls && (
+            <View style={[styles.playerBar, isLandscape && { top: 16 }]}>
+              <TouchableOpacity onPress={closePlayer} style={styles.closeBtn} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
                 <Ionicons name="chevron-back" size={24} color="#fff" />
               </TouchableOpacity>
               <Text style={styles.playerTitle} numberOfLines={1}>{playingTitle}</Text>
             </View>
           )}
-        </View>
+        </TouchableOpacity>
       </Modal>
     </SafeAreaView>
   );
@@ -143,98 +163,114 @@ export default function DownloadsScreen() {
 
 function DownloadRow({
   task,
+  theme,
   onPlay,
   onDelete,
   onShare,
+  onRetry,
 }: {
   task: DownloadTask & { key: string };
+  theme: ReturnType<typeof useTheme>;
   onPlay: () => void;
   onDelete: () => void;
   onShare: () => void;
+  onRetry: () => void;
 }) {
-  return (
-    <View style={styles.row}>
-      <Image
-        source={{ uri: proxyImageUrl(task.cover) }}
-        style={styles.cover}
-      />
+  const isDone = task.status === 'done';
+  const isError = task.status === 'error';
+  const isDownloading = task.status === 'downloading';
+
+  const rowContent = (
+    <View style={[styles.row, { backgroundColor: theme.card }]}>
+      <Image source={{ uri: proxyImageUrl(task.cover) }} style={styles.cover} />
       <View style={styles.info}>
-        <Text style={styles.title} numberOfLines={2}>{task.title}</Text>
-        <Text style={styles.qdesc}>
+        <Text style={[styles.title, { color: theme.text }]} numberOfLines={2}>{task.title}</Text>
+        <Text style={[styles.qdesc, { color: theme.textSub }]}>
           {task.qdesc}{task.fileSize ? `  ·  ${formatFileSize(task.fileSize)}` : ''}
         </Text>
-        {task.status === 'downloading' && (
+        {isDownloading && (
           <View style={styles.progressWrap}>
             <View style={styles.progressTrack}>
               <View style={[styles.progressFill, { width: `${Math.round(task.progress * 100)}%` as any }]} />
             </View>
-            <ActivityIndicator size="small" color="#00AEEC" style={{ marginLeft: 6 }} />
             <Text style={styles.progressTxt}>{Math.round(task.progress * 100)}%</Text>
           </View>
         )}
-        {task.status === 'error' && (
-          <Text style={styles.errorTxt} numberOfLines={1}>{task.error ?? '下载失败'}</Text>
+        {isError && (
+          <View style={styles.errorRow}>
+            <Text style={styles.errorTxt} numberOfLines={1}>{task.error ?? '下载失败'}</Text>
+            <TouchableOpacity onPress={onRetry} style={styles.retryBtn}>
+              <Text style={styles.retryTxt}>重新下载</Text>
+            </TouchableOpacity>
+          </View>
         )}
       </View>
       <View style={styles.actions}>
-        {task.status === 'done' && (
-          <>
-            <TouchableOpacity style={styles.playBtn} onPress={onPlay}>
-              <Ionicons name="play-circle" size={20} color="#00AEEC" />
-              <Text style={styles.playTxt}>播放</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.shareBtn} onPress={onShare}>
-              <Ionicons name="share-social-outline" size={20} color="#00AEEC" />
-            </TouchableOpacity>
-          </>
+        {isDone && (
+          <TouchableOpacity style={styles.actionBtn} onPress={onShare}>
+            <Ionicons name="share-social-outline" size={20} color="#00AEEC" />
+          </TouchableOpacity>
         )}
-        <TouchableOpacity style={styles.deleteBtn} onPress={onDelete}>
-          <Ionicons name="trash-outline" size={18} color="#bbb" />
+        <TouchableOpacity
+          style={styles.actionBtn}
+          onPress={isDownloading ? onDelete : onDelete}
+        >
+          <Ionicons
+            name={isDownloading ? 'close-circle-outline' : 'trash-outline'}
+            size={20}
+            color={isDownloading ? '#bbb' : '#bbb'}
+          />
         </TouchableOpacity>
       </View>
     </View>
   );
+
+  if (isDone) {
+    return (
+      <TouchableOpacity activeOpacity={0.85} onPress={onPlay}>
+        {rowContent}
+      </TouchableOpacity>
+    );
+  }
+
+  return rowContent;
 }
 
 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: 16,
     fontWeight: '700',
-    color: '#212121',
     marginLeft: 4,
   },
   empty: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 12 },
-  emptyTxt: { fontSize: 14, color: '#bbb' },
+  emptyTxt: { fontSize: 14 },
   sectionHeader: {
-    backgroundColor: '#f4f4f4',
     paddingHorizontal: 16,
     paddingVertical: 8,
   },
-  sectionTitle: { fontSize: 13, fontWeight: '600', color: '#555' },
+  sectionTitle: { fontSize: 13, fontWeight: '600' },
   row: {
     flexDirection: 'row',
     alignItems: 'center',
     paddingHorizontal: 16,
     paddingVertical: 12,
-    backgroundColor: '#fff',
     gap: 12,
   },
-  cover: { width: 80, height: 54, borderRadius: 6, backgroundColor: '#eee' },
+  cover: { width: 80, height: 54, borderRadius: 6, backgroundColor: '#eee', flexShrink: 0 },
   info: { flex: 1 },
-  title: { fontSize: 13, color: '#212121', lineHeight: 18, marginBottom: 4 },
-  qdesc: { fontSize: 12, color: '#999', marginBottom: 4 },
-  progressWrap: { flexDirection: 'row', alignItems: 'center', marginTop: 2 },
+  title: { fontSize: 13, lineHeight: 18, marginBottom: 4 },
+  qdesc: { fontSize: 12, marginBottom: 4 },
+  progressWrap: { flexDirection: 'row', alignItems: 'center', marginTop: 2, gap: 6 },
   progressTrack: {
     flex: 1,
     height: 3,
@@ -243,14 +279,19 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
   },
   progressFill: { height: 3, backgroundColor: '#00AEEC', borderRadius: 2 },
-  progressTxt: { fontSize: 11, color: '#999', marginLeft: 4 },
-  errorTxt: { fontSize: 12, color: '#f44', marginTop: 2 },
-  actions: { alignItems: 'center', gap: 8 },
-  playBtn: { flexDirection: 'row', alignItems: 'center', gap: 3 },
-  playTxt: { fontSize: 13, color: '#00AEEC' },
-  shareBtn: { padding: 4 },
-  deleteBtn: { padding: 4 },
-  separator: { height: StyleSheet.hairlineWidth, backgroundColor: '#f0f0f0', marginLeft: 108 },
+  progressTxt: { fontSize: 11, color: '#999', minWidth: 30 },
+  errorRow: { flexDirection: 'row', alignItems: 'center', gap: 8, marginTop: 2 },
+  errorTxt: { fontSize: 12, color: '#f44', flex: 1 },
+  retryBtn: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 10,
+    backgroundColor: '#e8f7fd',
+  },
+  retryTxt: { fontSize: 12, color: '#00AEEC', fontWeight: '600' },
+  actions: { alignItems: 'center', gap: 12 },
+  actionBtn: { padding: 4 },
+  separator: { height: StyleSheet.hairlineWidth },
   // player modal
   playerBg: { flex: 1, backgroundColor: '#000', justifyContent: 'center' },
   playerBar: {
@@ -261,6 +302,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     paddingHorizontal: 8,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    paddingVertical: 8,
   },
   closeBtn: { padding: 6 },
   playerTitle: { flex: 1, color: '#fff', fontSize: 14, fontWeight: '600', marginLeft: 4 },
diff --git a/app/index.tsx b/app/index.tsx
index 0350335..1b34de5 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -422,7 +422,6 @@ export default function HomeScreen() {
             styles.header,
             {
               opacity: currentHeaderOpacity,
-              borderBottomColor: theme.border,
             },
           ]}
         >
@@ -507,8 +506,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
     paddingHorizontal: 16,
     gap: 10,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#eee",
   },
   logo: {
     fontSize: 20,
diff --git a/app/video/[bvid].tsx b/app/video/[bvid].tsx
index 7e5ecdf..aaa6ecb 100644
--- a/app/video/[bvid].tsx
+++ b/app/video/[bvid].tsx
@@ -49,7 +49,10 @@ export default function VideoDetailScreen() {
   const [danmakus, setDanmakus] = useState<DanmakuItem[]>([]);
   const [currentTime, setCurrentTime] = useState(0);
   const [showDownload, setShowDownload] = useState(false);
-  const [uploaderStat, setUploaderStat] = useState<{ follower: number; archiveCount: number } | null>(null);
+  const [uploaderStat, setUploaderStat] = useState<{
+    follower: number;
+    archiveCount: number;
+  } | null>(null);
   const {
     videos: relatedVideos,
     loading: relatedLoading,
@@ -71,7 +74,9 @@ export default function VideoDetailScreen() {
 
   useEffect(() => {
     if (!video?.owner?.mid) return;
-    getUploaderStat(video.owner.mid).then(setUploaderStat).catch(() => {});
+    getUploaderStat(video.owner.mid)
+      .then(setUploaderStat)
+      .catch(() => {});
   }, [video?.owner?.mid]);
 
   return (
@@ -197,7 +202,8 @@ export default function VideoDetailScreen() {
                       </Text>
                       {uploaderStat && (
                         <Text style={styles.upStat}>
-                          {formatCount(uploaderStat.follower)}粉丝 · {formatCount(uploaderStat.archiveCount)}视频
+                          {formatCount(uploaderStat.follower)}粉丝 ·{" "}
+                          {formatCount(uploaderStat.archiveCount)}视频
                         </Text>
                       )}
                     </View>
@@ -465,7 +471,7 @@ function SeasonSection({
             <TouchableOpacity
               style={[
                 styles.epCard,
-                { backgroundColor: theme.card },
+                { backgroundColor: theme.card, borderColor: theme.border },
                 isCurrent && styles.epCardActive,
               ]}
               onPress={() => !isCurrent && onEpisodePress(ep.bvid)}
@@ -564,10 +570,10 @@ const styles = StyleSheet.create({
     width: 120,
     borderRadius: 6,
     overflow: "hidden",
-    borderWidth: 1.5,
+    borderWidth: 1,
     borderColor: "transparent",
   },
-  epCardActive: { borderColor: "#00AEEC" },
+  epCardActive: { borderColor: "#00AEEC", borderWidth: 1.5 },
   epThumb: { width: 120, height: 68 },
   epNum: { fontSize: 11, color: "#999", paddingHorizontal: 6, paddingTop: 4 },
   epNumActive: { color: "#00AEEC", fontWeight: "600" },
diff --git a/components/DanmakuList.tsx b/components/DanmakuList.tsx
index e7677a7..58fd626 100644
--- a/components/DanmakuList.tsx
+++ b/components/DanmakuList.tsx
@@ -222,7 +222,6 @@ export default function DanmakuList({
             { opacity: item._fadeAnim, borderBottomColor: theme.border },
           ]}
         >
-          {timeStr ? <Text style={liveStyles.time}>{timeStr}</Text> : null}
           <View style={liveStyles.msgBody}>
             {guard && (
               <View
@@ -257,6 +256,7 @@ export default function DanmakuList({
               {item.text}
             </Text>
           </View>
+          {timeStr ? <Text style={liveStyles.time}>{timeStr}</Text> : null}
         </Animated.View>
       );
     },
@@ -275,7 +275,7 @@ export default function DanmakuList({
           ]}
         >
           <Text
-            style={[styles.bubbleText, { color: dotColor }]}
+            style={[styles.bubbleText, { color: theme.text }]}
             numberOfLines={3}
           >
             {item.text}
@@ -450,6 +450,7 @@ const liveStyles = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "flex-start",
+    justifyContent:"space-between",
     paddingVertical: 5,
   },
   time: {