From 4c633febdc8ee352c12cd13b946df2d97b940b1f Mon Sep 17 00:00:00 2001 From: zimplexing Date: Fri, 18 Jul 2025 22:21:33 +0800 Subject: [PATCH] feat: update color scheme and styles across components for improved UI consistency --- app/detail.tsx | 61 +++++++++++++--------- app/search.tsx | 3 +- components/PlayerControls.tsx | 2 +- components/SeekingBar.tsx | 2 +- components/SourceSelectionModal.tsx | 4 +- components/StyledButton.tsx | 12 ++--- components/VideoCard.tv.tsx | 4 ++ components/VideoLoadingAnimation.tsx | 6 +-- components/settings/APIConfigSection.tsx | 5 +- components/settings/LiveStreamSection.tsx | 5 +- components/settings/RemoteInputSection.tsx | 5 +- components/settings/SettingsSection.tsx | 24 +++------ constants/Colors.ts | 1 + 13 files changed, 71 insertions(+), 63 deletions(-) diff --git a/app/detail.tsx b/app/detail.tsx index 7a67ee1..f794440 100644 --- a/app/detail.tsx +++ b/app/detail.tsx @@ -85,7 +85,7 @@ export default function DetailScreen() { @@ -107,29 +107,32 @@ export default function DetailScreen() { {!allSourcesLoaded && } - {searchResults.map((item, index) => ( - setDetail(item)} - hasTVPreferredFocus={index === 0} - isSelected={detail?.source === item.source} - style={styles.sourceButton} - > - {item.source_name} - {item.episodes.length > 1 && ( - - - {item.episodes.length > 99 ? "99+" : `${item.episodes.length}`} 集 - - - )} - {item.resolution && ( - - {item.resolution} - - )} - - ))} + {searchResults.map((item, index) => { + const isSelected = detail?.source === item.source; + return ( + setDetail(item)} + hasTVPreferredFocus={index === 0} + isSelected={isSelected} + style={styles.sourceButton} + > + {item.source_name} + {item.episodes.length > 1 && ( + + + {item.episodes.length > 99 ? "99+" : `${item.episodes.length}`} 集 + + + )} + {item.resolution && ( + + {item.resolution} + + )} + + ); + })} @@ -236,17 +239,23 @@ const styles = StyleSheet.create({ fontSize: 16, }, badge: { - backgroundColor: "red", + backgroundColor: "#666", borderRadius: 10, paddingHorizontal: 6, paddingVertical: 2, marginLeft: 8, }, badgeText: { - color: "white", + color: "#fff", fontSize: 12, fontWeight: "bold", }, + selectedBadge: { + backgroundColor: "#4c4c4c", + }, + selectedbadgeText: { + color: "#333", + }, episodesContainer: { marginTop: 20, }, diff --git a/app/search.tsx b/app/search.tsx index 8c9c54c..01b3edd 100644 --- a/app/search.tsx +++ b/app/search.tsx @@ -11,6 +11,7 @@ import { useRemoteControlStore } from "@/stores/remoteControlStore"; import { RemoteControlModal } from "@/components/RemoteControlModal"; import { useSettingsStore } from "@/stores/settingsStore"; import { useRouter } from "expo-router"; +import { Colors } from "@/constants/Colors"; export default function SearchScreen() { const [keyword, setKeyword] = useState(""); @@ -101,7 +102,7 @@ export default function SearchScreen() { { backgroundColor: colorScheme === "dark" ? "#2c2c2e" : "#f0f0f0", color: colorScheme === "dark" ? "white" : "black", - borderColor: isInputFocused ? "#007bff" : "transparent", + borderColor: isInputFocused ? Colors.dark.primary : "transparent", }, ]} placeholder="搜索电影、剧集..." diff --git a/components/PlayerControls.tsx b/components/PlayerControls.tsx index 8493256..fcb3c4c 100644 --- a/components/PlayerControls.tsx +++ b/components/PlayerControls.tsx @@ -168,7 +168,7 @@ const styles = StyleSheet.create({ position: "absolute", left: 0, height: 8, - backgroundColor: "#ff0000", + backgroundColor: "#fff", borderRadius: 4, }, progressBarTouchable: { diff --git a/components/SeekingBar.tsx b/components/SeekingBar.tsx index ed24d18..9a7d28f 100644 --- a/components/SeekingBar.tsx +++ b/components/SeekingBar.tsx @@ -80,7 +80,7 @@ const styles = StyleSheet.create({ }, seekingBarFilled: { height: "100%", - backgroundColor: "#ff0000", + backgroundColor: "#fff", borderRadius: 2.5, }, }); diff --git a/components/SourceSelectionModal.tsx b/components/SourceSelectionModal.tsx index 6686ff9..af43570 100644 --- a/components/SourceSelectionModal.tsx +++ b/components/SourceSelectionModal.tsx @@ -72,7 +72,9 @@ const styles = StyleSheet.create({ sourceItem: { paddingVertical: 2, margin: 4, - width: "31%", + marginLeft: 10, + marginRight: 8, + width: "30%", }, sourceItemText: { fontSize: 14, diff --git a/components/StyledButton.tsx b/components/StyledButton.tsx index 19af513..7d5a21d 100644 --- a/components/StyledButton.tsx +++ b/components/StyledButton.tsx @@ -29,11 +29,10 @@ export const StyledButton = forwardRef( color: colors.text, }, selectedButton: { - backgroundColor: colors.tint, + backgroundColor: colors.primary, }, focusedButton: { - backgroundColor: colors.link, - borderColor: colors.background, + borderColor: colors.primary, }, selectedText: { color: Colors.dark.text, @@ -47,11 +46,11 @@ export const StyledButton = forwardRef( color: colors.text, }, focusedButton: { - backgroundColor: colors.link, + backgroundColor: colors.primary, borderColor: colors.background, }, selectedButton: { - backgroundColor: "rgba(0, 122, 255, 0.3)", + backgroundColor: colors.primary, }, selectedText: { color: colors.link, @@ -65,7 +64,8 @@ export const StyledButton = forwardRef( color: colors.text, }, focusedButton: { - backgroundColor: "rgba(119, 119, 119, 0.9)", + backgroundColor: "rgba(119, 119, 119, 0.2)", + borderColor: colors.primary, }, selectedButton: {}, selectedText: {}, diff --git a/components/VideoCard.tv.tsx b/components/VideoCard.tv.tsx index 68fdf9e..15811c6 100644 --- a/components/VideoCard.tv.tsx +++ b/components/VideoCard.tv.tsx @@ -6,6 +6,7 @@ import { Heart, Star, Play, Trash2 } from "lucide-react-native"; import { FavoriteManager, PlayRecordManager } from "@/services/storage"; import { API, api } from "@/services/api"; import { ThemedText } from "@/components/ThemedText"; +import { Colors } from "@/constants/Colors"; interface VideoCardProps { id: string; @@ -209,6 +210,9 @@ const styles = StyleSheet.create({ overlay: { ...StyleSheet.absoluteFillObject, backgroundColor: "rgba(0,0,0,0.3)", + borderColor: Colors.dark.border, + borderWidth: 2, + borderRadius: 8, justifyContent: "center", alignItems: "center", }, diff --git a/components/VideoLoadingAnimation.tsx b/components/VideoLoadingAnimation.tsx index 5eb9ff1..3e608e3 100644 --- a/components/VideoLoadingAnimation.tsx +++ b/components/VideoLoadingAnimation.tsx @@ -199,17 +199,17 @@ const VideoLoadingAnimation: React.FC = ({ showProgr - + {/* - + */} {showProgressBar && ( void; @@ -126,8 +127,8 @@ const styles = StyleSheet.create({ borderColor: "transparent", }, inputFocused: { - borderColor: "#007AFF", - shadowColor: "#007AFF", + borderColor: Colors.dark.primary, + shadowColor: Colors.dark.primary, shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.8, shadowRadius: 10, diff --git a/components/settings/LiveStreamSection.tsx b/components/settings/LiveStreamSection.tsx index 3a5517d..d09e680 100644 --- a/components/settings/LiveStreamSection.tsx +++ b/components/settings/LiveStreamSection.tsx @@ -6,6 +6,7 @@ import { SettingsSection } from "./SettingsSection"; import { useSettingsStore } from "@/stores/settingsStore"; import { useRemoteControlStore } from "@/stores/remoteControlStore"; import { useButtonAnimation } from "@/hooks/useAnimation"; +import { Colors } from "@/constants/Colors"; interface LiveStreamSectionProps { onChanged: () => void; @@ -120,8 +121,8 @@ const styles = StyleSheet.create({ borderColor: "transparent", }, inputFocused: { - borderColor: "#007AFF", - shadowColor: "#007AFF", + borderColor: Colors.dark.primary, + shadowColor: Colors.dark.primary, shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.8, shadowRadius: 10, diff --git a/components/settings/RemoteInputSection.tsx b/components/settings/RemoteInputSection.tsx index 82e33fc..7a7323a 100644 --- a/components/settings/RemoteInputSection.tsx +++ b/components/settings/RemoteInputSection.tsx @@ -6,6 +6,7 @@ import { SettingsSection } from "./SettingsSection"; import { useSettingsStore } from "@/stores/settingsStore"; import { useRemoteControlStore } from "@/stores/remoteControlStore"; import { useButtonAnimation } from "@/hooks/useAnimation"; +import { Colors } from "@/constants/Colors"; interface RemoteInputSectionProps { onChanged: () => void; @@ -59,7 +60,7 @@ export const RemoteInputSection: React.FC = ({ onChange {}} // 禁用Switch的直接交互 - trackColor={{ false: "#767577", true: "#007AFF" }} + trackColor={{ false: "#767577", true: Colors.dark.primary }} thumbColor={remoteInputEnabled ? "#ffffff" : "#f4f3f4"} pointerEvents="none" /> @@ -70,7 +71,7 @@ export const RemoteInputSection: React.FC = ({ onChange 服务状态： - + {isServerRunning ? "运行中" : "已停止"} diff --git a/components/settings/SettingsSection.tsx b/components/settings/SettingsSection.tsx index 1e38403..2334581 100644 --- a/components/settings/SettingsSection.tsx +++ b/components/settings/SettingsSection.tsx @@ -1,6 +1,7 @@ import React, { useState } from "react"; import { StyleSheet, Pressable } from "react-native"; import { ThemedView } from "@/components/ThemedView"; +import { Colors } from "@/constants/Colors"; interface SettingsSectionProps { children: React.ReactNode; @@ -9,12 +10,7 @@ interface SettingsSectionProps { focusable?: boolean; } -export const SettingsSection: React.FC = ({ - children, - onFocus, - onBlur, - focusable = false -}) => { +export const SettingsSection: React.FC = ({ children, onFocus, onBlur, focusable = false }) => { const [isFocused, setIsFocused] = useState(false); const handleFocus = () => { @@ -28,20 +24,12 @@ export const SettingsSection: React.FC = ({ }; if (!focusable) { - return ( - - {children} - - ); + return {children}; } return ( - + {children} @@ -57,10 +45,10 @@ const styles = StyleSheet.create({ borderColor: "#333", }, sectionFocused: { - borderColor: "#007AFF", + borderColor: Colors.dark.primary, backgroundColor: "#007AFF10", }, sectionPressable: { width: "100%", }, -}); \ No newline at end of file +}); diff --git a/constants/Colors.ts b/constants/Colors.ts index 3484718..f58f056 100644 --- a/constants/Colors.ts +++ b/constants/Colors.ts @@ -26,5 +26,6 @@ export const Colors = { tabIconSelected: tintColorDark, link: "#0a7ea4", border: "#333", + primary: "#00bb5e", }, };