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.

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 }],
-  },
 });