Refactor components to use StyledButton for consistent button styling

- Replaced custom button implementations with StyledButton in various components including DetailScreen, HomeScreen, SearchScreen, and SettingsModal. - Updated button styles and behaviors to align with the new StyledButton component. - Removed the obsolete DetailButton component to streamline the codebase.
2026-02-04 03:36:29 +08:00 · 2025-07-08 17:24:55 +08:00
parent 9f721c22d5
commit 504f12067b
11 changed files with 395 additions and 366 deletions
--- a/app/detail.tsx
+++ b/app/detail.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { View, Text, StyleSheet, Image, ScrollView, ActivityIndicator } from 'react-native';
-import { useLocalSearchParams, useRouter } from 'expo-router';
-import { ThemedView } from '@/components/ThemedView';
-import { ThemedText } from '@/components/ThemedText';
-import { api, SearchResult } from '@/services/api';
-import { getResolutionFromM3U8 } from '@/services/m3u8';
-import { DetailButton } from '@/components/DetailButton';
+import React, { useEffect, useState, useRef } from "react";
+import { View, Text, StyleSheet, Image, ScrollView, ActivityIndicator } from "react-native";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { ThemedView } from "@/components/ThemedView";
+import { ThemedText } from "@/components/ThemedText";
+import { api, SearchResult } from "@/services/api";
+import { getResolutionFromM3U8 } from "@/services/m3u8";
+import { StyledButton } from "@/components/StyledButton";

 export default function DetailScreen() {
  const { source, q } = useLocalSearchParams();
@@ -24,7 +24,7 @@ export default function DetailScreen() {
    controllerRef.current = new AbortController();
    const signal = controllerRef.current.signal;

-    if (typeof q === 'string') {
+    if (typeof q === "string") {
      const fetchDetailData = async () => {
        setLoading(true);
        setSearchResults([]);
@@ -35,15 +35,15 @@ export default function DetailScreen() {
        try {
          const resources = await api.getResources(signal);
          if (!resources || resources.length === 0) {
-            setError('没有可用的播放源');
+            setError("没有可用的播放源");
            setLoading(false);
            return;
          }

          let foundFirstResult = false;
          // Prioritize source from params if available
-          if (typeof source === 'string') {
-            const index = resources.findIndex(r => r.key === source);
+          if (typeof source === "string") {
+            const index = resources.findIndex((r) => r.key === source);
            if (index > 0) {
              resources.unshift(resources.splice(index, 1)[0]);
            }
@@ -61,14 +61,14 @@ export default function DetailScreen() {
                    resolution = await getResolutionFromM3U8(searchResult.episodes[0], signal);
                  }
                } catch (e) {
-                  if ((e as Error).name !== 'AbortError') {
+                  if ((e as Error).name !== "AbortError") {
                    console.error(`Failed to get resolution for ${resource.name}`, e);
                  }
                }

                const resultWithResolution = { ...searchResult, resolution };

-                setSearchResults(prev => [...prev, resultWithResolution]);
+                setSearchResults((prev) => [...prev, resultWithResolution]);

                if (!foundFirstResult) {
                  setDetail(resultWithResolution);
@@ -77,19 +77,19 @@ export default function DetailScreen() {
                }
              }
            } catch (e) {
-              if ((e as Error).name !== 'AbortError') {
+              if ((e as Error).name !== "AbortError") {
                console.error(`Error searching in resource ${resource.name}:`, e);
              }
            }
          }

          if (!foundFirstResult) {
-            setError('未找到播放源');
+            setError("未找到播放源");
            setLoading(false);
          }
        } catch (e) {
-          if ((e as Error).name !== 'AbortError') {
-            setError(e instanceof Error ? e.message : '获取资源列表失败');
+          if ((e as Error).name !== "AbortError") {
+            setError(e instanceof Error ? e.message : "获取资源列表失败");
            setLoading(false);
          }
        } finally {
@@ -108,7 +108,7 @@ export default function DetailScreen() {
    if (!detail) return;
    controllerRef.current?.abort(); // Cancel any ongoing fetches
    router.push({
-      pathname: '/play',
+      pathname: "/play",
      params: {
        source: detail.source,
        id: detail.id.toString(),
@@ -171,26 +171,27 @@ export default function DetailScreen() {
            </View>
            <View style={styles.sourceList}>
              {searchResults.map((item, index) => (
-                <DetailButton
+                <StyledButton
                  key={index}
                  onPress={() => setDetail(item)}
                  hasTVPreferredFocus={index === 0}
-                  style={[styles.sourceButton, detail?.source === item.source && styles.sourceButtonSelected]}
+                  isSelected={detail?.source === item.source}
+                  style={styles.sourceButton}
                >
                  <ThemedText style={styles.sourceButtonText}>{item.source_name}</ThemedText>
                  {item.episodes.length > 1 && (
                    <View style={styles.badge}>
                      <Text style={styles.badgeText}>
-                        {item.episodes.length > 99 ? '99+' : `${item.episodes.length}`}
+                        {item.episodes.length > 99 ? "99+" : `${item.episodes.length}`}
                      </Text>
                    </View>
                  )}
                  {item.resolution && (
-                    <View style={[styles.badge, { backgroundColor: '#28a745' }]}>
+                    <View style={[styles.badge, { backgroundColor: "#28a745" }]}>
                      <Text style={styles.badgeText}>{item.resolution}</Text>
                    </View>
                  )}
-                </DetailButton>
+                </StyledButton>
              ))}
            </View>
          </View>
@@ -198,9 +199,13 @@ export default function DetailScreen() {
            <ThemedText style={styles.episodesTitle}>播放列表</ThemedText>
            <ScrollView contentContainerStyle={styles.episodeList}>
              {detail.episodes.map((episode, index) => (
-                <DetailButton key={index} style={styles.episodeButton} onPress={() => handlePlay(episode, index)}>
-                  <ThemedText style={styles.episodeButtonText}>{`第 ${index + 1} 集`}</ThemedText>
-                </DetailButton>
+                <StyledButton
+                  key={index}
+                  style={styles.episodeButton}
+                  onPress={() => handlePlay(episode, index)}
+                  text={`第 ${index + 1} 集`}
+                  textStyle={styles.episodeButtonText}
+                />
              ))}
            </ScrollView>
          </View>
@@ -212,9 +217,9 @@ export default function DetailScreen() {

 const styles = StyleSheet.create({
  container: { flex: 1 },
-  centered: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+  centered: { flex: 1, justifyContent: "center", alignItems: "center" },
  topContainer: {
-    flexDirection: 'row',
+    flexDirection: "row",
    padding: 20,
  },
  poster: {
@@ -225,20 +230,20 @@ const styles = StyleSheet.create({
  infoContainer: {
    flex: 1,
    marginLeft: 20,
-    justifyContent: 'flex-start',
+    justifyContent: "flex-start",
  },
  title: {
    fontSize: 28,
-    fontWeight: 'bold',
+    fontWeight: "bold",
    marginBottom: 10,
    paddingTop: 20,
  },
  metaContainer: {
-    flexDirection: 'row',
+    flexDirection: "row",
    marginBottom: 10,
  },
  metaText: {
-    color: '#aaa',
+    color: "#aaa",
    marginRight: 10,
    fontSize: 14,
  },
@@ -247,7 +252,7 @@ const styles = StyleSheet.create({
  },
  description: {
    fontSize: 14,
-    color: '#ccc',
+    color: "#ccc",
    lineHeight: 22,
  },
  bottomContainer: {
@@ -257,70 +262,53 @@ const styles = StyleSheet.create({
    marginTop: 20,
  },
  sourcesTitleContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
    marginBottom: 10,
  },
  sourcesTitle: {
    fontSize: 20,
-    fontWeight: 'bold',
+    fontWeight: "bold",
  },
  sourceList: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
+    flexDirection: "row",
+    flexWrap: "wrap",
  },
  sourceButton: {
-    backgroundColor: '#333',
-    paddingHorizontal: 15,
-    paddingVertical: 10,
-    borderRadius: 8,
    margin: 5,
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderWidth: 2,
-    borderColor: 'transparent',
-  },
-  sourceButtonSelected: {
-    backgroundColor: '#007bff',
  },
  sourceButtonText: {
-    color: 'white',
+    color: "white",
    fontSize: 16,
  },
  badge: {
-    backgroundColor: 'red',
+    backgroundColor: "red",
    borderRadius: 10,
    paddingHorizontal: 6,
    paddingVertical: 2,
    marginLeft: 8,
  },
  badgeText: {
-    color: 'white',
+    color: "white",
    fontSize: 12,
-    fontWeight: 'bold',
+    fontWeight: "bold",
  },
  episodesContainer: {
    marginTop: 20,
  },
  episodesTitle: {
    fontSize: 20,
-    fontWeight: 'bold',
+    fontWeight: "bold",
    marginBottom: 10,
  },
  episodeList: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
+    flexDirection: "row",
+    flexWrap: "wrap",
  },
  episodeButton: {
-    backgroundColor: '#333',
-    paddingHorizontal: 20,
-    paddingVertical: 10,
-    borderRadius: 8,
    margin: 5,
-    borderWidth: 2,
-    borderColor: 'transparent',
  },
  episodeButtonText: {
-    color: 'white',
+    color: "white",
  },
 });
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -8,6 +8,7 @@ import { useFocusEffect, useRouter } from "expo-router";
 import { useColorScheme } from "react-native";
 import { Search, Settings } from "lucide-react-native";
 import { SettingsModal } from "@/components/SettingsModal";
+import { StyledButton } from "@/components/StyledButton";
 import useHomeStore, { RowItem, Category } from "@/stores/homeStore";
 import { useSettingsStore } from "@/stores/settingsStore";

@@ -53,16 +54,14 @@ export default function HomeScreen() {
  const renderCategory = ({ item }: { item: Category }) => {
    const isSelected = selectedCategory?.title === item.title;
    return (
-      <Pressable
-        style={({ focused }) => [
-          styles.categoryButton,
-          isSelected && styles.categoryButtonSelected,
-          focused && styles.categoryButtonFocused,
-        ]}
+      <StyledButton
+        text={item.title}
        onPress={() => handleCategorySelect(item)}
-      >
-        <ThemedText style={[styles.categoryText, isSelected && styles.categoryTextSelected]}>{item.title}</ThemedText>
-      </Pressable>
+        isSelected={isSelected}
+        variant="primary"
+        style={styles.categoryButton}
+        textStyle={styles.categoryText}
+      />
    );
  };

@@ -97,18 +96,16 @@ export default function HomeScreen() {
      <View style={styles.headerContainer}>
        <ThemedText style={styles.headerTitle}>首页</ThemedText>
        <View style={styles.rightHeaderButtons}>
-          <Pressable
-            style={({ focused }) => [styles.searchButton, focused && styles.searchButtonFocused]}
+          <StyledButton
+            style={styles.searchButton}
            onPress={() => router.push({ pathname: "/search" })}
+            variant="ghost"
          >
            <Search color={colorScheme === "dark" ? "white" : "black"} size={24} />
-          </Pressable>
-          <Pressable
-            style={({ focused }) => [styles.searchButton, focused && styles.searchButtonFocused]}
-            onPress={showSettingsModal}
-          >
+          </StyledButton>
+          <StyledButton style={styles.searchButton} onPress={showSettingsModal} variant="ghost">
            <Settings color={colorScheme === "dark" ? "white" : "black"} size={24} />
-          </Pressable>
+          </StyledButton>
        </View>
      </View>

@@ -191,10 +188,6 @@ const styles = StyleSheet.create({
    borderRadius: 30,
    marginLeft: 10,
  },
-  searchButtonFocused: {
-    backgroundColor: "#007AFF",
-    transform: [{ scale: 1.1 }],
-  },
  // Category Selector
  categoryContainer: {
    paddingBottom: 10,
@@ -208,20 +201,10 @@ const styles = StyleSheet.create({
    borderRadius: 8,
    marginHorizontal: 5,
  },
-  categoryButtonSelected: {
-    backgroundColor: "#007AFF", // A bright blue for selected state
-  },
-  categoryButtonFocused: {
-    backgroundColor: "#0056b3", // A darker blue for focused state
-    elevation: 5,
-  },
  categoryText: {
    fontSize: 16,
    fontWeight: "500",
  },
-  categoryTextSelected: {
-    color: "#FFFFFF",
-  },
  // Content Grid
  listContent: {
    paddingHorizontal: 16,
--- a/app/search.tsx
+++ b/app/search.tsx
@@ -1,23 +1,14 @@
-import React, { useState, useRef, useEffect } from 'react';
-import {
-  View,
-  TextInput,
-  StyleSheet,
-  FlatList,
-  ActivityIndicator,
-  Pressable,
-  Text,
-  Keyboard,
-  useColorScheme,
-} from 'react-native';
-import { ThemedView } from '@/components/ThemedView';
-import { ThemedText } from '@/components/ThemedText';
-import VideoCard from '@/components/VideoCard.tv';
-import { api, SearchResult } from '@/services/api';
-import { Search } from 'lucide-react-native';
+import React, { useState, useRef, useEffect } from "react";
+import { View, TextInput, StyleSheet, FlatList, ActivityIndicator, Text, Keyboard, useColorScheme } from "react-native";
+import { ThemedView } from "@/components/ThemedView";
+import { ThemedText } from "@/components/ThemedText";
+import VideoCard from "@/components/VideoCard.tv";
+import { api, SearchResult } from "@/services/api";
+import { Search } from "lucide-react-native";
+import { StyledButton } from "@/components/StyledButton";

 export default function SearchScreen() {
-  const [keyword, setKeyword] = useState('');
+  const [keyword, setKeyword] = useState("");
  const [results, setResults] = useState<SearchResult[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
@@ -46,11 +37,11 @@ export default function SearchScreen() {
      if (response.results.length > 0) {
        setResults(response.results);
      } else {
-        setError('没有找到相关内容');
+        setError("没有找到相关内容");
      }
    } catch (err) {
-      setError('搜索失败，请稍后重试。');
-      console.error('Search failed:', err);
+      setError("搜索失败，请稍后重试。");
+      console.error("Search failed:", err);
    } finally {
      setLoading(false);
    }
@@ -76,13 +67,13 @@ export default function SearchScreen() {
          style={[
            styles.input,
            {
-              backgroundColor: colorScheme === 'dark' ? '#2c2c2e' : '#f0f0f0',
-              color: colorScheme === 'dark' ? 'white' : 'black',
-              borderColor: isInputFocused ? '#007bff' : 'transparent',
+              backgroundColor: colorScheme === "dark" ? "#2c2c2e" : "#f0f0f0",
+              color: colorScheme === "dark" ? "white" : "black",
+              borderColor: isInputFocused ? "#007bff" : "transparent",
            },
          ]}
          placeholder="搜索电影、剧集..."
-          placeholderTextColor={colorScheme === 'dark' ? '#888' : '#555'}
+          placeholderTextColor={colorScheme === "dark" ? "#888" : "#555"}
          value={keyword}
          onChangeText={setKeyword}
          onFocus={() => setIsInputFocused(true)}
@@ -90,18 +81,9 @@ export default function SearchScreen() {
          onSubmitEditing={handleSearch} // Allow searching with remote 'enter' button
          returnKeyType="search"
        />
-        <Pressable
-          style={({ focused }) => [
-            styles.searchButton,
-            {
-              backgroundColor: colorScheme === 'dark' ? '#3a3a3c' : '#e0e0e0',
-            },
-            focused && styles.focusedButton,
-          ]}
-          onPress={handleSearch}
-        >
-          <Search size={24} color={colorScheme === 'dark' ? 'white' : 'black'} />
-        </Pressable>
+        <StyledButton style={styles.searchButton} onPress={handleSearch}>
+          <Search size={24} color={colorScheme === "dark" ? "white" : "black"} />
+        </StyledButton>
      </View>

      {loading ? (
@@ -136,39 +118,35 @@ const styles = StyleSheet.create({
    paddingTop: 50,
  },
  searchContainer: {
-    flexDirection: 'row',
+    flexDirection: "row",
    paddingHorizontal: 20,
    marginBottom: 20,
-    alignItems: 'center',
+    alignItems: "center",
  },
  input: {
    flex: 1,
    height: 50,
-    backgroundColor: '#2c2c2e', // Default for dark mode, overridden inline
+    backgroundColor: "#2c2c2e", // Default for dark mode, overridden inline
    borderRadius: 8,
    paddingHorizontal: 15,
-    color: 'white', // Default for dark mode, overridden inline
+    color: "white", // Default for dark mode, overridden inline
    fontSize: 18,
    marginRight: 10,
    borderWidth: 2,
-    borderColor: 'transparent', // Default, overridden for focus
+    borderColor: "transparent", // Default, overridden for focus
  },
  searchButton: {
    padding: 12,
    // backgroundColor is now set dynamically
    borderRadius: 8,
  },
-  focusedButton: {
-    backgroundColor: '#007bff',
-    transform: [{ scale: 1.1 }],
-  },
  centerContainer: {
    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
  },
  errorText: {
-    color: 'red',
+    color: "red",
  },
  listContent: {
    paddingHorizontal: 10,
--- a/components/DetailButton.tsx
+++ b/components/DetailButton.tsx
@@ -1,55 +0,0 @@
-import React from "react";
-import {
-  Pressable,
-  StyleSheet,
-  StyleProp,
-  ViewStyle,
-  PressableProps,
-} from "react-native";
-
-interface DetailButtonProps extends PressableProps {
-  children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-}
-
-export const DetailButton: React.FC<DetailButtonProps> = ({
-  children,
-  style,
-  ...rest
-}) => {
-  return (
-    <Pressable
-      style={({ focused }) => [
-        styles.button,
-        style,
-        focused && styles.buttonFocused,
-      ]}
-      {...rest}
-    >
-      {children}
-    </Pressable>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    backgroundColor: "#333",
-    paddingHorizontal: 15,
-    paddingVertical: 10,
-    borderRadius: 8,
-    margin: 5,
-    borderWidth: 2,
-    borderColor: "transparent",
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  buttonFocused: {
-    backgroundColor: "#0056b3",
-    borderColor: "#fff",
-    elevation: 5,
-    shadowColor: "#fff",
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 1,
-    shadowRadius: 15,
-  },
-});
--- a/components/EpisodeSelectionModal.tsx
+++ b/components/EpisodeSelectionModal.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { View, Text, StyleSheet, Modal, FlatList, Pressable, TouchableOpacity } from 'react-native';
-
-import usePlayerStore from '@/stores/playerStore';
-import { useState } from 'react';
+import React from "react";
+import { View, Text, StyleSheet, Modal, FlatList, Pressable } from "react-native";
+import { StyledButton } from "./StyledButton";
+import usePlayerStore from "@/stores/playerStore";
+import { useState } from "react";

 interface Episode {
  title?: string;
@@ -35,21 +35,18 @@ export const EpisodeSelectionModal: React.FC<EpisodeSelectionModalProps> = () =>
          {episodes.length > episodeGroupSize && (
            <View style={styles.episodeGroupContainer}>
              {Array.from({ length: Math.ceil(episodes.length / episodeGroupSize) }, (_, groupIndex) => (
-                <TouchableOpacity
+                <StyledButton
                  key={groupIndex}
-                  style={[
-                    styles.episodeGroupButton,
-                    selectedEpisodeGroup === groupIndex && styles.episodeGroupButtonSelected,
-                  ]}
+                  text={`${groupIndex * episodeGroupSize + 1}-${Math.min(
+                    (groupIndex + 1) * episodeGroupSize,
+                    episodes.length
+                  )}`}
                  onPress={() => setSelectedEpisodeGroup(groupIndex)}
-                >
-                  <Text style={styles.episodeGroupButtonText}>
-                    {`${groupIndex * episodeGroupSize + 1}-${Math.min(
-                      (groupIndex + 1) * episodeGroupSize,
-                      episodes.length
-                    )}`}
-                  </Text>
-                </TouchableOpacity>
+                  isSelected={selectedEpisodeGroup === groupIndex}
+                  style={styles.episodeGroupButton}
+                  textStyle={styles.episodeGroupButtonText}
+                  variant="primary"
+                />
              ))}
            </View>
          )}
@@ -63,24 +60,19 @@ export const EpisodeSelectionModal: React.FC<EpisodeSelectionModalProps> = () =>
            renderItem={({ item, index }) => {
              const absoluteIndex = selectedEpisodeGroup * episodeGroupSize + index;
              return (
-                <Pressable
-                  style={({ focused }) => [
-                    styles.episodeItem,
-                    currentEpisodeIndex === absoluteIndex && styles.episodeItemSelected,
-                    focused && styles.focusedButton,
-                  ]}
+                <StyledButton
+                  text={item.title || `第 ${absoluteIndex + 1} 集`}
                  onPress={() => onSelectEpisode(absoluteIndex)}
+                  isSelected={currentEpisodeIndex === absoluteIndex}
                  hasTVPreferredFocus={currentEpisodeIndex === absoluteIndex}
-                >
-                  <Text style={styles.episodeItemText}>{item.title || `第 ${absoluteIndex + 1} 集`}</Text>
-                </Pressable>
+                  style={styles.episodeItem}
+                  textStyle={styles.episodeItemText}
+                />
              );
            }}
          />

-          <Pressable style={({ focused }) => [styles.closeButton, focused && styles.focusedButton]} onPress={onClose}>
-            <Text style={{ color: 'white' }}>关闭</Text>
-          </Pressable>
+          <StyledButton text="关闭" onPress={onClose} style={styles.closeButton} />
        </View>
      </View>
    </Modal>
@@ -90,69 +82,49 @@ export const EpisodeSelectionModal: React.FC<EpisodeSelectionModalProps> = () =>
 const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    backgroundColor: 'transparent',
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    backgroundColor: "transparent",
  },
  modalContent: {
    width: 400,
-    height: '100%',
-    backgroundColor: 'rgba(0, 0, 0, 0.85)',
+    height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.85)",
    padding: 20,
  },
  modalTitle: {
-    color: 'white',
+    color: "white",
    marginBottom: 20,
-    textAlign: 'center',
+    textAlign: "center",
    fontSize: 18,
-    fontWeight: 'bold',
+    fontWeight: "bold",
  },
  episodeItem: {
-    backgroundColor: '#333',
    paddingVertical: 12,
-    borderRadius: 8,
    margin: 4,
    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  episodeItemSelected: {
-    backgroundColor: '#007bff',
  },
  episodeItemText: {
-    color: 'white',
    fontSize: 14,
  },
  episodeGroupContainer: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
    marginBottom: 15,
    paddingHorizontal: 10,
  },
  episodeGroupButton: {
-    backgroundColor: '#444',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 15,
    margin: 5,
  },
-  episodeGroupButtonSelected: {
-    backgroundColor: '#007bff',
-  },
  episodeGroupButtonText: {
-    color: 'white',
    fontSize: 12,
  },
  closeButton: {
-    backgroundColor: '#333',
    padding: 15,
-    borderRadius: 8,
-    alignItems: 'center',
    marginTop: 20,
  },
-  focusedButton: {
-    backgroundColor: 'rgba(119, 119, 119, 0.9)',
-    transform: [{ scale: 1.1 }],
-  },
 });
--- a/components/MediaButton.tsx
+++ b/components/MediaButton.tsx
@@ -1,53 +1,16 @@
-import React from "react";
-import { Pressable, StyleSheet, StyleProp, ViewStyle } from "react-native";
+import React, { ComponentProps } from "react";
+import { StyledButton } from "./StyledButton";
+import { StyleSheet } from "react-native";

-interface MediaButtonProps {
-  onPress: () => void;
-  children: React.ReactNode;
-  isDisabled?: boolean;
-  hasTVPreferredFocus?: boolean;
-  style?: StyleProp<ViewStyle>;
-}
+type StyledButtonProps = ComponentProps<typeof StyledButton>;

-export const MediaButton: React.FC<MediaButtonProps> = ({
-  onPress,
-  children,
-  isDisabled = false,
-  hasTVPreferredFocus = false,
-  style,
-}) => {
-  return (
-    <Pressable
-      hasTVPreferredFocus={hasTVPreferredFocus}
-      onPress={onPress}
-      disabled={isDisabled}
-      style={({ focused }) => [
-        styles.mediaControlButton,
-        focused && styles.focusedButton,
-        isDisabled && styles.disabledButton,
-        style,
-      ]}
-    >
-      {children}
-    </Pressable>
-  );
-};
+export const MediaButton = (props: StyledButtonProps) => (
+  <StyledButton {...props} style={[styles.mediaControlButton, props.style]} variant="ghost" />
+);

 const styles = StyleSheet.create({
  mediaControlButton: {
-    backgroundColor: "rgba(51, 51, 51, 0.8)",
    padding: 12,
-    borderRadius: 8,
-    alignItems: "center",
-    justifyContent: "center",
    minWidth: 80,
-    margin: 5,
-  },
-  focusedButton: {
-    backgroundColor: "rgba(119, 119, 119, 0.9)",
-    transform: [{ scale: 1.1 }],
-  },
-  disabledButton: {
-    opacity: 0.5,
  },
 });
--- a/components/NextEpisodeOverlay.tsx
+++ b/components/NextEpisodeOverlay.tsx
@@ -1,16 +1,14 @@
 import React from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { ThemedText } from "@/components/ThemedText";
+import { StyledButton } from "./StyledButton";

 interface NextEpisodeOverlayProps {
  visible: boolean;
  onCancel: () => void;
 }

-export const NextEpisodeOverlay: React.FC<NextEpisodeOverlayProps> = ({
-  visible,
-  onCancel,
-}) => {
+export const NextEpisodeOverlay: React.FC<NextEpisodeOverlayProps> = ({ visible, onCancel }) => {
  if (!visible) {
    return null;
  }
@@ -18,12 +16,13 @@ export const NextEpisodeOverlay: React.FC<NextEpisodeOverlayProps> = ({
  return (
    <View style={styles.nextEpisodeOverlay}>
      <View style={styles.nextEpisodeContent}>
-        <ThemedText style={styles.nextEpisodeTitle}>
-          即将播放下一集...
-        </ThemedText>
-        <TouchableOpacity style={styles.nextEpisodeButton} onPress={onCancel}>
-          <ThemedText style={styles.nextEpisodeButtonText}>取消</ThemedText>
-        </TouchableOpacity>
+        <ThemedText style={styles.nextEpisodeTitle}>即将播放下一集...</ThemedText>
+        <StyledButton
+          text="取消"
+          onPress={onCancel}
+          style={styles.nextEpisodeButton}
+          textStyle={styles.nextEpisodeButtonText}
+        />
      </View>
    </View>
  );
@@ -48,10 +47,8 @@ const styles = StyleSheet.create({
    marginBottom: 10,
  },
  nextEpisodeButton: {
-    backgroundColor: "#333",
    padding: 8,
    paddingHorizontal: 15,
-    borderRadius: 5,
  },
  nextEpisodeButtonText: {
    fontSize: 14,
--- a/components/PlayerControls.tsx
+++ b/components/PlayerControls.tsx
@@ -88,7 +88,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({ showControls, se
            )}
          </MediaButton>

-          <MediaButton onPress={onPlayNextEpisode} isDisabled={!hasNextEpisode}>
+          <MediaButton onPress={onPlayNextEpisode} disabled={!hasNextEpisode}>
            <SkipForward color={hasNextEpisode ? "white" : "#666"} size={24} />
          </MediaButton>

--- a/components/SettingsModal.tsx
+++ b/components/SettingsModal.tsx
@@ -1,8 +1,9 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Modal, View, Text, TextInput, StyleSheet, Pressable, useColorScheme } from 'react-native';
-import { ThemedText } from './ThemedText';
-import { ThemedView } from './ThemedView';
-import { useSettingsStore } from '@/stores/settingsStore';
+import React, { useState, useEffect, useRef } from "react";
+import { Modal, View, Text, TextInput, StyleSheet, useColorScheme } from "react-native";
+import { ThemedText } from "./ThemedText";
+import { ThemedView } from "./ThemedView";
+import { useSettingsStore } from "@/stores/settingsStore";
+import { StyledButton } from "./StyledButton";

 export const SettingsModal: React.FC = () => {
  const { isModalVisible, hideModal, apiBaseUrl, setApiBaseUrl, saveSettings, loadSettings } = useSettingsStore();
@@ -28,12 +29,12 @@ export const SettingsModal: React.FC = () => {
  const styles = StyleSheet.create({
    modalContainer: {
      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: 'rgba(0, 0, 0, 0.6)',
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: "rgba(0, 0, 0, 0.6)",
    },
    modalContent: {
-      width: '80%',
+      width: "80%",
      maxWidth: 500,
      padding: 24,
      borderRadius: 12,
@@ -41,9 +42,9 @@ export const SettingsModal: React.FC = () => {
    },
    title: {
      fontSize: 24,
-      fontWeight: 'bold',
+      fontWeight: "bold",
      marginBottom: 20,
-      textAlign: 'center',
+      textAlign: "center",
    },
    input: {
      height: 50,
@@ -52,47 +53,28 @@ export const SettingsModal: React.FC = () => {
      paddingHorizontal: 15,
      fontSize: 16,
      marginBottom: 24,
-      backgroundColor: colorScheme === 'dark' ? '#3a3a3c' : '#f0f0f0',
-      color: colorScheme === 'dark' ? 'white' : 'black',
-      borderColor: 'transparent',
+      backgroundColor: colorScheme === "dark" ? "#3a3a3c" : "#f0f0f0",
+      color: colorScheme === "dark" ? "white" : "black",
+      borderColor: "transparent",
    },
    inputFocused: {
-      borderColor: '#007AFF',
-      shadowColor: '#007AFF',
+      borderColor: "#007AFF",
+      shadowColor: "#007AFF",
      shadowOffset: { width: 0, height: 0 },
      shadowOpacity: 0.8,
      shadowRadius: 10,
      elevation: 5,
    },
    buttonContainer: {
-      flexDirection: 'row',
-      justifyContent: 'space-around',
+      flexDirection: "row",
+      justifyContent: "space-around",
    },
    button: {
      flex: 1,
-      paddingVertical: 12,
-      borderRadius: 8,
-      alignItems: 'center',
      marginHorizontal: 8,
    },
-    buttonSave: {
-      backgroundColor: '#007AFF',
-    },
-    buttonCancel: {
-      backgroundColor: colorScheme === 'dark' ? '#444' : '#ccc',
-    },
    buttonText: {
-      color: 'white',
      fontSize: 18,
-      fontWeight: '500',
-    },
-    focusedButton: {
-      transform: [{ scale: 1.05 }],
-      shadowColor: '#000',
-      shadowOffset: { width: 0, height: 4 },
-      shadowOpacity: 0.3,
-      shadowRadius: 5,
-      elevation: 8,
    },
  });

@@ -107,25 +89,27 @@ export const SettingsModal: React.FC = () => {
            value={apiBaseUrl}
            onChangeText={setApiBaseUrl}
            placeholder="输入 API 地址"
-            placeholderTextColor={colorScheme === 'dark' ? '#888' : '#555'}
+            placeholderTextColor={colorScheme === "dark" ? "#888" : "#555"}
            autoCapitalize="none"
            autoCorrect={false}
            onFocus={() => setIsInputFocused(true)}
            onBlur={() => setIsInputFocused(false)}
          />
          <View style={styles.buttonContainer}>
-            <Pressable
-              style={({ focused }) => [styles.button, styles.buttonCancel, focused && styles.focusedButton]}
+            <StyledButton
+              text="取消"
              onPress={hideModal}
-            >
-              <Text style={styles.buttonText}>取消</Text>
-            </Pressable>
-            <Pressable
-              style={({ focused }) => [styles.button, styles.buttonSave, focused && styles.focusedButton]}
+              style={styles.button}
+              textStyle={styles.buttonText}
+              variant="default"
+            />
+            <StyledButton
+              text="保存"
              onPress={handleSave}
-            >
-              <Text style={styles.buttonText}>保存</Text>
-            </Pressable>
+              style={styles.button}
+              textStyle={styles.buttonText}
+              variant="primary"
+            />
          </View>
        </ThemedView>
      </View>
--- a/components/StyledButton.tsx
+++ b/components/StyledButton.tsx
@@ -0,0 +1,142 @@
+import React from "react";
+import { Pressable, StyleSheet, StyleProp, ViewStyle, PressableProps, TextStyle, useColorScheme } from "react-native";
+import { ThemedText } from "./ThemedText";
+import { Colors } from "@/constants/Colors";
+
+interface StyledButtonProps extends PressableProps {
+  children?: React.ReactNode;
+  text?: string;
+  variant?: "default" | "primary" | "ghost";
+  isSelected?: boolean;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+export const StyledButton: React.FC<StyledButtonProps> = ({
+  children,
+  text,
+  variant = "default",
+  isSelected = false,
+  style,
+  textStyle,
+  ...rest
+}) => {
+  const colorScheme = useColorScheme() ?? "light";
+  const colors = Colors[colorScheme];
+
+  const variantStyles = {
+    default: StyleSheet.create({
+      button: {
+        backgroundColor: colors.border,
+      },
+      text: {
+        color: colors.text,
+      },
+      selectedButton: {
+        backgroundColor: colors.tint,
+      },
+      focusedButton: {
+        backgroundColor: colors.link,
+        borderColor: colors.background,
+      },
+      selectedText: {
+        color: Colors.dark.text,
+      },
+    }),
+    primary: StyleSheet.create({
+      button: {
+        backgroundColor: "transparent",
+      },
+      text: {
+        color: colors.text,
+      },
+      focusedButton: {
+        backgroundColor: colors.link,
+        borderColor: colors.background,
+      },
+      selectedButton: {
+        backgroundColor: "rgba(0, 122, 255, 0.3)",
+        transform: [{ scale: 1.1 }],
+      },
+      selectedText: {
+        color: colors.link,
+      },
+    }),
+    ghost: StyleSheet.create({
+      button: {
+        backgroundColor: "transparent",
+      },
+      text: {
+        color: colors.text,
+      },
+      focusedButton: {
+        backgroundColor: "rgba(119, 119, 119, 0.9)",
+      },
+      selectedButton: {},
+      selectedText: {},
+    }),
+  };
+
+  const styles = StyleSheet.create({
+    button: {
+      paddingHorizontal: 15,
+      paddingVertical: 10,
+      borderRadius: 8,
+      margin: 5,
+      borderWidth: 2,
+      borderColor: "transparent",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    focusedButton: {
+      backgroundColor: colors.link,
+      borderColor: colors.background,
+      transform: [{ scale: 1.1 }],
+      elevation: 5,
+      shadowColor: colors.link,
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 1,
+      shadowRadius: 15,
+    },
+    selectedButton: {
+      backgroundColor: colors.tint,
+    },
+    text: {
+      fontSize: 16,
+      fontWeight: "500",
+      color: colors.text,
+    },
+    selectedText: {
+      color: Colors.dark.text,
+    },
+  });
+
+  return (
+    <Pressable
+      style={({ focused }) => [
+        styles.button,
+        variantStyles[variant].button,
+        isSelected && (variantStyles[variant].selectedButton ?? styles.selectedButton),
+        focused && (variantStyles[variant].focusedButton ?? styles.focusedButton),
+        style,
+      ]}
+      {...rest}
+    >
+      {text ? (
+        <ThemedText
+          style={[
+            styles.text,
+            variantStyles[variant].text,
+            isSelected && (variantStyles[variant].selectedText ?? styles.selectedText),
+            textStyle,
+          ]}
+        >
+          {text}
+        </ThemedText>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+};
--- a/docs/components/StyledButton.md
+++ b/docs/components/StyledButton.md
@@ -0,0 +1,77 @@
+# StyledButton 组件设计文档
+
+## 1. 目的
+
+为了统一整个应用中的按钮样式和行为，减少代码重复，并提高开发效率和一致性，我们设计了一个通用的 `StyledButton` 组件。
+
+该组件将取代以下位置的自定义 `Pressable` 和 `TouchableOpacity` 实现：
+
+- `app/index.tsx` (分类按钮, 头部图标按钮)
+- `components/DetailButton.tsx`
+- `components/EpisodeSelectionModal.tsx` (剧集分组按钮, 剧集项按钮, 关闭按钮)
+- `components/SettingsModal.tsx` (取消和保存按钮)
+- `app/search.tsx` (清除按钮)
+- `components/MediaButton.tsx` (媒体控制按钮)
+- `components/NextEpisodeOverlay.tsx` (取消按钮)
+
+## 2. API 设计
+
+`StyledButton` 组件将基于 React Native 的 `Pressable` 构建，并提供以下 props：
+
+```typescript
+import { PressableProps, StyleProp, ViewStyle, TextStyle } from "react-native";
+
+interface StyledButtonProps extends PressableProps {
+  // 按钮的主要内容，可以是文本或图标等 React 节点
+  children?: React.ReactNode;
+
+  // 如果按钮只包含文本，可以使用此 prop 快速设置
+  text?: string;
+
+  // 按钮的视觉变体，用于应用不同的预设样式
+  // 'default': 默认灰色背景
+  // 'primary': 主题色背景，用于关键操作
+  // 'ghost': 透明背景，通常用于图标按钮
+  variant?: "default" | "primary" | "ghost";
+
+  // 按钮是否处于选中状态
+  isSelected?: boolean;
+
+  // 覆盖容器的样式
+  style?: StyleProp<ViewStyle>;
+
+  // 覆盖文本的样式 (当使用 `text` prop 时生效)
+  textStyle?: StyleProp<TextStyle>;
+}
+```
+
+## 3. 样式和行为
+
+### 状态样式:
+
+- **默认状态 (`default`)**:
+  - 背景色: `#333`
+  - 边框: `transparent`
+- **聚焦状态 (`focused`)**:
+  - 背景色: `#0056b3` (深蓝色)
+  - 边框: `#fff`
+  - 阴影/光晕效果
+  - 轻微放大 (`transform: scale(1.1)`)
+- **选中状态 (`isSelected`)**:
+  - 背景色: `#007AFF` (亮蓝色)
+- **主操作 (`primary`)**:
+  - 默认背景色: `#007AFF`
+- **透明背景 (`ghost`)**:
+  - 默认背景色: `transparent`
+
+### 结构:
+
+组件内部将使用 `Pressable` 作为根元素，并根据 `focused` 和 `isSelected` props 动态计算样式。如果 `children` 和 `text` prop 都提供了，`children` 将优先被渲染。
+
+## 4. 实现计划
+
+1.  **创建 `components/StyledButton.tsx` 文件**。
+2.  **实现上述 API 和样式逻辑**。
+3.  **逐个重构目标文件**，将原有的 `Pressable`/`TouchableOpacity` 替换为新的 `StyledButton` 组件。
+4.  **删除旧的、不再需要的样式**。
+5.  **测试所有被修改的界面**，确保按钮的功能和视觉效果符合预期。