feat(mobile): optimize mobile experience by hiding non-essential features

- Hide live streaming tab in mobile navigation components
- Hide remote input and live stream configurations in settings
- Hide API configuration description text on mobile
- Disable HTTP server startup on mobile devices to save resources

This streamlines the mobile interface while preserving full functionality on tablet and TV platforms.
This commit is contained in:
zimplexing
2025-08-13 19:30:29 +08:00
parent cdf0d72bdc
commit 6a31e8ac85
6 changed files with 31 additions and 11 deletions

View File

@@ -62,6 +62,11 @@ export const MobileBottomNavigation: React.FC<MobileBottomNavigationProps> = ({
return null;
}
// 在手机端过滤掉直播 tab
const filteredNavigationItems = navigationItems.filter(item =>
responsiveConfig.deviceType !== 'mobile' || item.name !== 'live'
);
const handleNavigation = (route: string) => {
if (route === '/') {
router.push('/');
@@ -90,7 +95,7 @@ export const MobileBottomNavigation: React.FC<MobileBottomNavigationProps> = ({
return (
<View style={[styles.container, dynamicStyles.container]}>
{navigationItems.map((item) => {
{filteredNavigationItems.map((item) => {
const isActive = isActiveRoute(item.route);
const IconComponent = item.icon;

View File

@@ -24,7 +24,12 @@ const tabs: TabItem[] = [
const MobileBottomTabNavigator: React.FC = () => {
const router = useRouter();
const pathname = usePathname();
const { spacing } = useResponsiveLayout();
const { spacing, deviceType } = useResponsiveLayout();
// 在手机端过滤掉直播 tab
const filteredTabs = tabs.filter(tab =>
deviceType !== 'mobile' || tab.key !== 'live'
);
const handleTabPress = (route: string) => {
if (route === '/') {
@@ -44,7 +49,7 @@ const MobileBottomTabNavigator: React.FC = () => {
return (
<View style={dynamicStyles.container}>
{tabs.map((tab) => {
{filteredTabs.map((tab) => {
const isActive = isTabActive(tab.route);
const IconComponent = tab.icon;

View File

@@ -28,7 +28,12 @@ interface MobileTabContainerProps {
const MobileTabContainer: React.FC<MobileTabContainerProps> = ({ children }) => {
const router = useRouter();
const pathname = usePathname();
const { spacing } = useResponsiveLayout();
const { spacing, deviceType } = useResponsiveLayout();
// 在手机端过滤掉直播 tab
const filteredTabs = tabs.filter(tab =>
deviceType !== 'mobile' || tab.key !== 'live'
);
const handleTabPress = (route: string) => {
if (route === '/') {
@@ -55,7 +60,7 @@ const MobileTabContainer: React.FC<MobileTabContainerProps> = ({ children }) =>
{/* 底部导航栏 */}
<View style={dynamicStyles.tabBar}>
{tabs.map((tab) => {
{filteredTabs.map((tab) => {
const isActive = isTabActive(tab.route);
const IconComponent = tab.icon;

View File

@@ -12,6 +12,7 @@ interface APIConfigSectionProps {
onChanged: () => void;
onFocus?: () => void;
onBlur?: () => void;
hideDescription?: boolean;
}
export interface APIConfigSectionRef {
@@ -19,7 +20,7 @@ export interface APIConfigSectionRef {
}
export const APIConfigSection = forwardRef<APIConfigSectionRef, APIConfigSectionProps>(
({ onChanged, onFocus, onBlur }, ref) => {
({ onChanged, onFocus, onBlur, hideDescription = false }, ref) => {
const { apiBaseUrl, setApiBaseUrl, remoteInputEnabled } = useSettingsStore();
const { serverUrl } = useRemoteControlStore();
const [isInputFocused, setIsInputFocused] = useState(false);
@@ -66,7 +67,7 @@ export const APIConfigSection = forwardRef<APIConfigSectionRef, APIConfigSection
<View style={styles.inputContainer}>
<View style={styles.titleContainer}>
<ThemedText style={styles.sectionTitle}>API </ThemedText>
{remoteInputEnabled && serverUrl && (
{!hideDescription && remoteInputEnabled && serverUrl && (
<ThemedText style={styles.subtitle}>访 {serverUrl}</ThemedText>
)}
</View>