feat: 优化下载页UI交互、支持暗黑主题，移除首页 header 底边框

- 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 底部分割线
2026-07-08 07:28:37 +08:00 · 2026-03-25 12:51:14 +08:00
parent e1fa8cc347
commit c7fbc1f441
4 changed files with 119 additions and 72 deletions
--- 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 },
--- 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,
--- 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" },