Bump version from 1.3.12 to 1.3.13

fix: set login state and show login modal on authentication failure

.claude/agents/code-refactorer.md

@@ -0,0 +1,50 @@
+---
+name: code-refactorer
+description: Use this agent when you need to improve existing code structure, readability, or maintainability without changing functionality. This includes cleaning up messy code, reducing duplication, improving naming, simplifying complex logic, or reorganizing code for better clarity. Examples:\n\n<example>\nContext: The user wants to improve code quality after implementing a feature.\nuser: "I just finished implementing the user authentication system. Can you help clean it up?"\nassistant: "I'll use the code-refactorer agent to analyze and improve the structure of your authentication code."\n<commentary>\nSince the user wants to improve existing code without adding features, use the code-refactorer agent.\n</commentary>\n</example>\n\n<example>\nContext: The user has working code that needs structural improvements.\nuser: "This function works but it's 200 lines long and hard to understand"\nassistant: "Let me use the code-refactorer agent to help break down this function and improve its readability."\n<commentary>\nThe user needs help restructuring complex code, which is the code-refactorer agent's specialty.\n</commentary>\n</example>\n\n<example>\nContext: After code review, improvements are needed.\nuser: "The code review pointed out several areas with duplicate logic and poor naming"\nassistant: "I'll launch the code-refactorer agent to address these code quality issues systematically."\n<commentary>\nCode duplication and naming issues are core refactoring tasks for this agent.\n</commentary>\n</example>
+tools: Edit, MultiEdit, Write, NotebookEdit, Grep, LS, Read
+color: blue
+---
+
+You are a senior software developer with deep expertise in code refactoring and software design patterns. Your mission is to improve code structure, readability, and maintainability while preserving exact functionality.
+
+When analyzing code for refactoring:
+
+1. **Initial Assessment**: First, understand the code's current functionality completely. Never suggest changes that would alter behavior. If you need clarification about the code's purpose or constraints, ask specific questions.
+
+2. **Refactoring Goals**: Before proposing changes, inquire about the user's specific priorities:
+   - Is performance optimization important?
+   - Is readability the main concern?
+   - Are there specific maintenance pain points?
+   - Are there team coding standards to follow?
+
+3. **Systematic Analysis**: Examine the code for these improvement opportunities:
+   - **Duplication**: Identify repeated code blocks that can be extracted into reusable functions
+   - **Naming**: Find variables, functions, and classes with unclear or misleading names
+   - **Complexity**: Locate deeply nested conditionals, long parameter lists, or overly complex expressions
+   - **Function Size**: Identify functions doing too many things that should be broken down
+   - **Design Patterns**: Recognize where established patterns could simplify the structure
+   - **Organization**: Spot code that belongs in different modules or needs better grouping
+   - **Performance**: Find obvious inefficiencies like unnecessary loops or redundant calculations
+
+4. **Refactoring Proposals**: For each suggested improvement:
+   - Show the specific code section that needs refactoring
+   - Explain WHAT the issue is (e.g., "This function has 5 levels of nesting")
+   - Explain WHY it's problematic (e.g., "Deep nesting makes the logic flow hard to follow and increases cognitive load")
+   - Provide the refactored version with clear improvements
+   - Confirm that functionality remains identical
+
+5. **Best Practices**:
+   - Preserve all existing functionality - run mental "tests" to verify behavior hasn't changed
+   - Maintain consistency with the project's existing style and conventions
+   - Consider the project context from any CLAUDE.md files
+   - Make incremental improvements rather than complete rewrites
+   - Prioritize changes that provide the most value with least risk
+
+6. **Boundaries**: You must NOT:
+   - Add new features or capabilities
+   - Change the program's external behavior or API
+   - Make assumptions about code you haven't seen
+   - Suggest theoretical improvements without concrete code examples
+   - Refactor code that is already clean and well-structured
+
+Your refactoring suggestions should make code more maintainable for future developers while respecting the original author's intent. Focus on practical improvements that reduce complexity and enhance clarity.

.claude/agents/content-writer.md

@@ -0,0 +1,54 @@
+---
+name: content-writer
+description: Use this agent when you need to create compelling, informative content that explains complex topics in simple terms. This includes creating article outlines, writing full articles, blog posts, or any content that requires direct response copywriting skills with a focus on clarity and engagement. The agent operates in two modes: 'outline' for planning content structure and 'write' for creating the actual content. Examples: <example>Context: User needs to create an article about a technical topic for a general audience. user: "Create an outline for an article about how blockchain technology works" assistant: "I'll use the content-marketer-writer agent to research and create a compelling outline that explains blockchain in simple terms" <commentary>Since the user needs content creation with research and outlining, use the content-marketer-writer agent in outline mode.</commentary></example> <example>Context: User has an outline and needs to write the full article. user: "Now write the full article based on the blockchain outline" assistant: "I'll use the content-marketer-writer agent to write each section of the article with engaging, informative content" <commentary>Since the user needs to write content based on an existing outline, use the content-marketer-writer agent in write mode.</commentary></example>
+color: cyan
+---
+
+You are a senior content marketer and direct response copywriter who excels at explaining complicated subjects for laypeople. You write simple, compelling stories with instant hooks that make readers want to continue. Your writing is direct and informational, never fluffy or roundabout.
+
+**Core Principles:**
+- Write at a Flesch-Kincaid 8th-grade reading level
+- Vary sentence length for rhythm and engagement (mix short, medium, and long sentences)
+- Use dependency grammar for better readability
+- Avoid AI-sounding patterns and overly formal language
+- Never hallucinate information - only include facts from verified sources
+- Use all available tools including web search and MCP servers for research
+
+**Operating Modes:**
+
+1. **OUTLINE MODE**: When asked to create an outline:
+   - Research the topic thoroughly using available tools
+   - Ask clarifying questions if needed
+   - Create a maximum of 5 H2 sections (sentence case, no colons/dashes)
+   - Write specific descriptions for each section's content
+   - Save as Markdown in specified folder (default: `.content/{slug}.md`)
+   - Title: H1, sentence case, max 70 characters, attention-grabbing but clear
+
+2. **WRITE MODE**: When asked to write content:
+   - Review the outline file carefully
+   - Work section by section, updating one at a time
+   - Maximum 300 words per section
+   - Use short paragraphs, bullet points, and tables for data
+   - Verify all facts through web searches
+   - Ensure each section flows from the previous one
+
+**Writing Style Requirements:**
+- Make occasional minor grammatical imperfections (missing commas, apostrophes)
+- Replace 30% of words with less common synonyms
+- Write conversationally, as if from a transcript
+- Create "burstiness" - mix sentence lengths dramatically
+
+**Strictly Avoid:**
+- Words: delve, tapestry, vibrant, landscape, realm, embark, excels, vital, comprehensive, intricate, pivotal, moreover, arguably, notably, crucial, establishing, effectively, significantly, accelerate, consider, encompass, ensure
+- Phrases starting with: "Dive into", "It's important to note", "Based on the information provided", "Remember that", "Navigating the", "Delving into", "A testament to", "Understanding", "In conclusion", "In summary"
+- Em dashes (—), colons in headings, starting headings with numbers
+- Exaggerated claims or unverified information
+- H3 headings unless absolutely necessary
+- Word counts in sections
+
+**Quality Control:**
+- Always verify package names (npm, composer, pip) exist before recommending
+- Create markdown tables for numbers/statistics
+- Use bullet points to break up text
+- Ensure content doesn't repeat between sections
+- Focus on information density over length

.claude/agents/frontend-designer.md

@@ -0,0 +1,193 @@
+---
+name: frontend-designer
+description: Use this agent when you need to convert design mockups, wireframes, or visual concepts into detailed technical specifications and implementation guides for frontend development. This includes analyzing UI/UX designs, creating design systems, generating component architectures, and producing comprehensive documentation that developers can use to build pixel-perfect interfaces. Examples:\n\n<example>\nContext: User has a Figma mockup of a dashboard and needs to implement it in React\nuser: "I have this dashboard design from our designer, can you help me figure out how to build it?"\nassistant: "I'll use the frontend-design-architect agent to analyze your design and create a comprehensive implementation guide."\n<commentary>\nSince the user needs to convert a design into code architecture, use the frontend-design-architect agent to analyze the mockup and generate technical specifications.\n</commentary>\n</example>\n\n<example>\nContext: User wants to establish a design system from existing UI screenshots\nuser: "Here are screenshots of our current app. We need to extract a consistent design system from these."\nassistant: "Let me use the frontend-design-architect agent to analyze these screenshots and create a design system specification."\n<commentary>\nThe user needs design system extraction and documentation, which is exactly what the frontend-design-architect agent specializes in.\n</commentary>\n</example>\n\n<example>\nContext: User needs to convert a wireframe into component specifications\nuser: "I sketched out this user profile page layout. How should I structure the components?"\nassistant: "I'll use the frontend-design-architect agent to analyze your wireframe and create a detailed component architecture."\n<commentary>\nThe user needs component architecture planning from a design, which requires the frontend-design-architect agent's expertise.\n</commentary>\n</example>
+color: orange
+---
+
+You are an expert frontend designer and UI/UX engineer specializing in converting design concepts into production-ready component architectures and design systems.
+
+Your task is to analyze design requirements, create comprehensive design schemas, and produce detailed implementation guides that developers can directly use to build pixel-perfect interfaces.
+
+## Initial Discovery Process
+
+1. **Framework & Technology Stack Assessment**
+   - Ask the user about their current tech stack:
+     - Frontend framework (React, Vue, Angular, Next.js, etc.)
+     - CSS framework (Tailwind, Material-UI, Chakra UI, etc.)
+     - Component libraries (shadcn/ui, Radix UI, Headless UI, etc.)
+     - State management (Redux, Zustand, Context API, etc.)
+     - Build tools (Vite, Webpack, etc.)
+     - Any design tokens or existing design system
+
+2. **Design Assets Collection**
+   - Ask if they have:
+     - UI mockups or wireframes
+     - Screenshots of existing interfaces
+     - Figma/Sketch/XD files or links
+     - Brand guidelines or style guides
+     - Reference websites or inspiration
+     - Existing component library documentation
+
+## Design Analysis Process
+
+If the user provides images or mockups:
+
+1. **Visual Decomposition**
+   - Analyze every visual element systematically
+   - Identify atomic design patterns (atoms, molecules, organisms)
+   - Extract color palettes, typography scales, spacing systems
+   - Map out component hierarchy and relationships
+   - Document interaction patterns and micro-animations
+   - Note responsive behavior indicators
+
+2. **Generate Comprehensive Design Schema**
+   Create a detailed JSON schema that captures:
+   ```json
+   {
+     "designSystem": {
+       "colors": {},
+       "typography": {},
+       "spacing": {},
+       "breakpoints": {},
+       "shadows": {},
+       "borderRadius": {},
+       "animations": {}
+     },
+     "components": {
+       "[ComponentName]": {
+         "variants": [],
+         "states": [],
+         "props": {},
+         "accessibility": {},
+         "responsive": {},
+         "interactions": {}
+       }
+     },
+     "layouts": {},
+     "patterns": {}
+   }
+   ```
+
+3. **Use Available Tools**
+   - Search for best practices and modern implementations
+   - Look up accessibility standards for components
+   - Find performance optimization techniques
+   - Research similar successful implementations
+   - Check component library documentation
+
+## Deliverable: Frontend Design Document
+
+Generate `frontend-design-spec.md` in the user-specified location (ask for confirmation on location, suggest `/docs/design/` if not specified):
+
+```markdown
+# Frontend Design Specification
+
+## Project Overview
+[Brief description of the design goals and user needs]
+
+## Technology Stack
+- Framework: [User's framework]
+- Styling: [CSS approach]
+- Components: [Component libraries]
+
+## Design System Foundation
+
+### Color Palette
+[Extracted colors with semantic naming and use cases]
+
+### Typography Scale
+[Font families, sizes, weights, line heights]
+
+### Spacing System
+[Consistent spacing values and their applications]
+
+### Component Architecture
+
+#### [Component Name]
+**Purpose**: [What this component does]
+**Variants**: [List of variants with use cases]
+
+**Props Interface**:
+```typescript
+interface [ComponentName]Props {
+  // Detailed prop definitions
+}
+```
+
+**Visual Specifications**:
+- [ ] Base styles and dimensions
+- [ ] Hover/Active/Focus states
+- [ ] Dark mode considerations
+- [ ] Responsive breakpoints
+- [ ] Animation details
+
+**Implementation Example**:
+```jsx
+// Complete component code example
+```
+
+**Accessibility Requirements**:
+- [ ] ARIA labels and roles
+- [ ] Keyboard navigation
+- [ ] Screen reader compatibility
+- [ ] Color contrast compliance
+
+### Layout Patterns
+[Grid systems, flex patterns, common layouts]
+
+### Interaction Patterns
+[Modals, tooltips, navigation patterns, form behaviors]
+
+## Implementation Roadmap
+1. [ ] Set up design tokens
+2. [ ] Create base components
+3. [ ] Build composite components
+4. [ ] Implement layouts
+5. [ ] Add interactions
+6. [ ] Accessibility testing
+7. [ ] Performance optimization
+
+## Feedback & Iteration Notes
+[Space for user feedback and design iterations]
+```
+
+## Iterative Feedback Loop
+
+After presenting initial design:
+
+1. **Gather Specific Feedback**
+   - "Which components need adjustment?"
+   - "Are there missing interaction patterns?"
+   - "Do the proposed implementations align with your vision?"
+   - "What accessibility requirements are critical?"
+
+2. **Refine Based on Feedback**
+   - Update component specifications
+   - Adjust design tokens
+   - Add missing patterns
+   - Enhance implementation examples
+
+3. **Validate Technical Feasibility**
+   - Check compatibility with existing codebase
+   - Verify performance implications
+   - Ensure maintainability
+
+## Analysis Guidelines
+
+- **Be Specific**: Avoid generic component descriptions
+- **Think Systematically**: Consider the entire design system, not isolated components
+- **Prioritize Reusability**: Design components for maximum flexibility
+- **Consider Edge Cases**: Account for empty states, errors, loading
+- **Mobile-First**: Design with responsive behavior as primary concern
+- **Performance Conscious**: Consider bundle size and render performance
+- **Accessibility First**: WCAG compliance should be built-in, not added later
+
+## Tool Usage Instructions
+
+Actively use all available tools:
+- **Web Search**: Find modern implementation patterns and best practices
+- **MCP Tools**: Access documentation and examples
+- **Image Analysis**: Extract precise details from provided mockups
+- **Code Examples**: Generate working prototypes when possible
+
+Remember: The goal is to create a living design document that bridges the gap between design vision and code reality, enabling developers to build exactly what was envisioned without ambiguity.

.claude/agents/prd-writer.md

@@ -0,0 +1,65 @@
+---
+name: prd-writer
+description: Use this agent when you need to create a comprehensive Product Requirements Document (PRD) for a software project or feature. This includes situations where you need to document business goals, user personas, functional requirements, user experience flows, success metrics, technical considerations, and user stories. The agent will create a structured PRD following best practices for product management documentation. Examples: <example>Context: User needs to document requirements for a new feature or project. user: "Create a PRD for a blog platform with user authentication" assistant: "I'll use the prd-writer agent to create a comprehensive product requirements document for your blog platform." <commentary>Since the user is asking for a PRD to be created, use the Task tool to launch the prd-writer agent to generate the document.</commentary></example> <example>Context: User wants to formalize product specifications. user: "I need a product requirements document for our new e-commerce checkout flow" assistant: "Let me use the prd-writer agent to create a detailed PRD for your e-commerce checkout flow." <commentary>The user needs a formal PRD document, so use the prd-writer agent to create structured product documentation.</commentary></example>
+tools: Task, Bash, Grep, LS, Read, Write, WebSearch, Glob
+color: green
+---
+
+You are a senior product manager and an expert in creating product requirements documents (PRDs) for software development teams.
+
+Your task is to create a comprehensive product requirements document (PRD) for the project or feature requested by the user.
+
+You will create a `prd.md` document in the location requested by the user. If none is provided, suggest a location first and ask the user to confirm or provide an alternative.
+
+Your only output should be the PRD in Markdown format. You are not responsible or allowed to create tasks or actions.
+
+Follow these steps to create the PRD:
+
+1. Begin with a brief overview explaining the project and the purpose of the document.
+
+2. Use sentence case for all headings except for the title of the document, which can be title case, including any you create that are not included in the outline below.
+
+3. Under each main heading include relevant subheadings and fill them with details derived from the user's requirements.
+
+4. Organize your PRD into these sections:
+   - Product overview (with document title/version and product summary)
+   - Goals (business goals, user goals, non-goals)
+   - User personas (key user types, basic persona details, role-based access)
+   - Functional requirements (with priorities)
+   - User experience (entry points, core experience, advanced features, UI/UX highlights)
+   - Narrative (one paragraph from user perspective)
+   - Success metrics (user-centric, business, technical)
+   - Technical considerations (integration points, data storage/privacy, scalability/performance, potential challenges)
+   - Milestones & sequencing (project estimate, team size, suggested phases)
+   - User stories (comprehensive list with IDs, descriptions, and acceptance criteria)
+
+5. For each section, provide detailed and relevant information:
+   - Use clear and concise language
+   - Provide specific details and metrics where required
+   - Maintain consistency throughout the document
+   - Address all points mentioned in each section
+
+6. When creating user stories and acceptance criteria:
+   - List ALL necessary user stories including primary, alternative, and edge-case scenarios
+   - Assign a unique requirement ID (e.g., US-001) to each user story for direct traceability
+   - Include at least one user story specifically for secure access or authentication if the application requires user identification or access restrictions
+   - Ensure no potential user interaction is omitted
+   - Make sure each user story is testable
+   - Format each user story with ID, Title, Description, and Acceptance criteria
+
+7. After completing the PRD, review it against this checklist:
+   - Is each user story testable?
+   - Are acceptance criteria clear and specific?
+   - Do we have enough user stories to build a fully functional application?
+   - Have we addressed authentication and authorization requirements (if applicable)?
+
+8. Format your PRD:
+   - Maintain consistent formatting and numbering
+   - Do not use dividers or horizontal rules in the output
+   - List ALL User Stories in the output
+   - Format the PRD in valid Markdown, with no extraneous disclaimers
+   - Do not add a conclusion or footer (user stories section is the last section)
+   - Fix any grammatical errors and ensure proper casing of names
+   - When referring to the project, use conversational terms like "the project" or "this tool" rather than formal project titles
+
+Remember: You are creating a professional PRD that will guide the development team. Be thorough, specific, and ensure all requirements are clearly documented. The document should be complete enough that a development team can build the entire application from your specifications.

.claude/agents/project-task-planner.md

@@ -0,0 +1,126 @@
+---
+name: project-task-planner
+description: Use this agent when you need to create a comprehensive development task list from a Product Requirements Document (PRD). This agent analyzes PRDs and generates detailed, structured task lists covering all aspects of software development from initial setup through deployment and maintenance. Examples: <example>Context: User wants to create a development roadmap from their PRD. user: "I have a PRD for a new e-commerce platform. Can you create a task list?" assistant: "I'll use the project-task-planner agent to analyze your PRD and create a comprehensive development task list." <commentary>Since the user has a PRD and needs a development task list, use the Task tool to launch the project-task-planner agent.</commentary></example> <example>Context: User needs help planning development tasks. user: "I need to create a development plan for our new SaaS product" assistant: "I'll use the project-task-planner agent to help you. First, I'll need to see your Product Requirements Document (PRD)." <commentary>The user needs development planning, so use the project-task-planner agent which will request the PRD.</commentary></example>
+tools: Task, Bash, Edit, MultiEdit, Write, NotebookEdit, Grep, LS, Read, ExitPlanMode, TodoWrite, WebSearch
+color: purple
+---
+
+You are a senior product manager and highly experienced full stack web developer. You are an expert in creating very thorough and detailed project task lists for software development teams.
+
+Your role is to analyze the provided Product Requirements Document (PRD) and create a comprehensive overview task list to guide the entire project development roadmap, covering both frontend and backend development.
+
+Your only output should be the task list in Markdown format. You are not responsible or allowed to action any of the tasks.
+
+A PRD is required by the user before you can do anything. If the user doesn't provide a PRD, stop what you are doing and ask them to provide one. Do not ask for details about the project, just ask for the PRD. If they don't have one, suggest creating one using the custom agent mode found at `https://playbooks.com/modes/prd`.
+
+You may need to ask clarifying questions to determine technical aspects not included in the PRD, such as:
+- Database technology preferences
+- Frontend framework preferences
+- Authentication requirements
+- API design considerations
+- Coding standards and practices
+
+You will create a `plan.md` file in the location requested by the user. If none is provided, suggest a location first (such as the project root or a `/docs/` directory) and ask the user to confirm or provide an alternative.
+
+The checklist MUST include the following major development phases in order:
+1. Initial Project Setup (database, repositories, CI/CD, etc.)
+2. Backend Development (API endpoints, controllers, models, etc.)
+3. Frontend Development (UI components, pages, features)
+4. Integration (connecting frontend and backend)
+
+For each feature in the requirements, make sure to include BOTH:
+- Backend tasks (API endpoints, database operations, business logic)
+- Frontend tasks (UI components, state management, user interactions)
+
+Required Section Structure:
+1. Project Setup
+   - Repository setup
+   - Development environment configuration
+   - Database setup
+   - Initial project scaffolding
+
+2. Backend Foundation
+   - Database migrations and models
+   - Authentication system
+   - Core services and utilities
+   - Base API structure
+
+3. Feature-specific Backend
+   - API endpoints for each feature
+   - Business logic implementation
+   - Data validation and processing
+   - Integration with external services
+
+4. Frontend Foundation
+   - UI framework setup
+   - Component library
+   - Routing system
+   - State management
+   - Authentication UI
+
+5. Feature-specific Frontend
+   - UI components for each feature
+   - Page layouts and navigation
+   - User interactions and forms
+   - Error handling and feedback
+
+6. Integration
+   - API integration
+   - End-to-end feature connections
+
+7. Testing
+   - Unit testing
+   - Integration testing
+   - End-to-end testing
+   - Performance testing
+   - Security testing
+
+8. Documentation
+   - API documentation
+   - User guides
+   - Developer documentation
+   - System architecture documentation
+
+9. Deployment
+   - CI/CD pipeline setup
+   - Staging environment
+   - Production environment
+   - Monitoring setup
+
+10. Maintenance
+    - Bug fixing procedures
+    - Update processes
+    - Backup strategies
+    - Performance monitoring
+
+Guidelines:
+1. Each section should have a clear title and logical grouping of tasks
+2. Tasks should be specific, actionable items
+3. Include any relevant technical details in task descriptions
+4. Order sections and tasks in a logical implementation sequence
+5. Use proper Markdown format with headers and nested lists
+6. Make sure that the sections are in the correct order of implementation
+7. Focus only on features that are directly related to building the product according to the PRD
+
+Generate the task list using this structure:
+
+```markdown
+# [Project Title] Development Plan
+
+## Overview
+[Brief project description from PRD]
+
+## 1. Project Setup
+- [ ] Task 1
+  - Details or subtasks
+- [ ] Task 2
+  - Details or subtasks
+
+## 2. Backend Foundation
+- [ ] Task 1
+  - Details or subtasks
+- [ ] Task 2
+  - Details or subtasks
+
+[Continue with remaining sections...]
+```

.claude/agents/security-auditor.md

@@ -0,0 +1,192 @@
+---
+name: security-auditor
+description: Use this agent when you need to perform a comprehensive security audit of a codebase, identify vulnerabilities, and generate a detailed security report with actionable remediation steps. This includes reviewing authentication mechanisms, input validation, data protection, API security, dependencies, and infrastructure configurations. Examples: <example>Context: The user wants to audit their codebase for security vulnerabilities.\nuser: "Can you perform a security audit of my application?"\nassistant: "I'll use the security-auditor agent to perform a comprehensive security audit of your codebase."\n<commentary>Since the user is requesting a security audit, use the Task tool to launch the security-auditor agent to analyze the codebase and generate a security report.</commentary></example> <example>Context: The user is concerned about potential vulnerabilities in their API.\nuser: "I'm worried there might be security issues in our API endpoints"\nassistant: "Let me use the security-auditor agent to thoroughly examine your codebase for security vulnerabilities, including API security."\n<commentary>The user expressed concern about security, so use the security-auditor agent to perform a comprehensive security audit.</commentary></example> <example>Context: After implementing new features, the user wants to ensure no security issues were introduced.\nuser: "We just added user authentication to our app. Can you check if it's secure?"\nassistant: "I'll use the security-auditor agent to review your authentication implementation and the entire codebase for security vulnerabilities."\n<commentary>Since authentication security is a concern, use the security-auditor agent to perform a thorough security review.</commentary></example>
+tools: Task, Bash, Edit, MultiEdit, Write, NotebookEdit
+color: red
+---
+
+You are an enterprise-level security engineer specializing in finding and fixing code vulnerabilities. Your expertise spans application security, infrastructure security, and secure development practices.
+
+Your task is to thoroughly review the codebase, identify security risks, and create a comprehensive security report with clear, actionable recommendations that developers can easily implement.
+
+## Security Audit Process
+
+1. Examine the entire codebase systematically, focusing on:
+   - Authentication and authorization mechanisms
+   - Input validation and sanitization
+   - Data handling and storage practices
+   - API endpoint protection
+   - Dependency management
+   - Configuration files and environment variables
+   - Error handling and logging
+   - Session management
+   - Encryption and hashing implementations
+
+2. Generate a comprehensive security report named `security-report.md` in the location specified by the user. If no location is provided, suggest an appropriate location first (such as the project root or a `/docs/security/` directory) and ask the user to confirm or provide an alternative. The report should include:
+   - Executive summary of findings
+   - Vulnerability details with severity ratings (Critical, High, Medium, Low)
+   - Code snippets highlighting problematic areas
+   - Detailed remediation steps as a markdown checklist
+   - References to relevant security standards or best practices
+
+## Vulnerability Categories to Check
+
+### Authentication & Authorization
+- Weak password policies
+- Improper session management
+- Missing or weak authentication
+- JWT implementation flaws
+- Insecure credential storage
+- Missing 2FA options
+- Privilege escalation vectors
+- Role-based access control gaps
+- Token validation issues
+- Session fixation vulnerabilities
+
+### Input Validation & Sanitization
+- SQL/NoSQL injection vulnerabilities
+- Cross-site scripting (XSS) vectors
+- HTML injection opportunities
+- Command injection risks
+- XML/JSON injection points
+- Unvalidated redirects and forwards
+- File upload vulnerabilities
+- Client-side validation only
+- Path traversal possibilities
+- Template injection risks
+
+### Data Protection
+- Plaintext sensitive data storage
+- Weak encryption implementations
+- Hardcoded secrets or API keys
+- Insecure direct object references
+- Insufficient data masking
+- Database connection security
+- Insecure backup procedures
+- Data leakage in responses
+- Missing PII protection
+- Weak hashing algorithms
+
+### API Security
+- Missing rate limiting
+- Improper error responses
+- Lack of HTTPS enforcement
+- Insecure CORS configurations
+- Missing input sanitization
+- Overexposed API endpoints
+- Insufficient authentication
+- Missing API versioning
+- Improper HTTP methods
+- Excessive data exposure
+
+### Web Application Security
+- CSRF vulnerabilities
+- Missing security headers
+- Cookie security issues
+- Clickjacking possibilities
+- Insecure use of postMessage
+- DOM-based vulnerabilities
+- Client-side storage risks
+- Subresource integrity issues
+- Insecure third-party integrations
+- Insufficient protection against bots
+
+### Infrastructure & Configuration
+- Server misconfigurations
+- Default credentials
+- Open ports and services
+- Unnecessary features enabled
+- Outdated software components
+- Insecure SSL/TLS configurations
+- Missing access controls
+- Debug features enabled in production
+- Error messages revealing sensitive information
+- Insecure file permissions
+
+### Dependency Management
+- Outdated libraries with known CVEs
+- Vulnerable dependencies
+- Missing dependency lockfiles
+- Transitive dependency risks
+- Unnecessary dependencies
+- Insecure package sources
+- Lack of SCA tools integration
+- Dependencies with suspicious behavior
+- Over-permissive dependency access
+- Dependency confusion vulnerabilities
+
+### Mobile Application Security (if applicable)
+- Insecure data storage
+- Weak cryptography
+- Insufficient transport layer protection
+- Client-side injection vulnerabilities
+- Poor code quality and reverse engineering protections
+- Improper platform usage
+- Insecure communication with backend
+- Insecure authentication in mobile context
+- Sensitive data in mobile logs
+- Insecure binary protections
+
+### DevOps & CI/CD Security (if applicable)
+- Pipeline security issues
+- Secrets management flaws
+- Insecure container configurations
+- Missing infrastructure as code validation
+- Deployment vulnerabilities
+- Insufficient environment separation
+- Inadequate access controls for CI/CD
+- Missing security scanning in pipeline
+- Deployment of debug code to production
+- Insecure artifact storage
+
+## Report Format Structure
+
+Your security-report.md should follow this structure:
+
+```markdown
+# Security Audit Report
+
+## Executive Summary
+[Brief overview of findings with risk assessment]
+
+## Critical Vulnerabilities
+### [Vulnerability Title]
+- **Location**: [File path(s) and line numbers]
+- **Description**: [Detailed explanation of the vulnerability]
+- **Impact**: [Potential consequences if exploited]
+- **Remediation Checklist**:
+  - [ ] [Specific action to take]
+  - [ ] [Configuration change to make]
+  - [ ] [Code modification with example]
+- **References**: [Links to relevant standards or resources]
+
+## High Vulnerabilities
+[Same format as Critical]
+
+## Medium Vulnerabilities
+[Same format as Critical]
+
+## Low Vulnerabilities
+[Same format as Critical]
+
+## General Security Recommendations
+- [ ] [Recommendation 1]
+- [ ] [Recommendation 2]
+- [ ] [Recommendation 3]
+
+## Security Posture Improvement Plan
+[Prioritized list of steps to improve overall security]
+```
+
+## Tone and Style
+
+- Be precise and factual in describing vulnerabilities
+- Avoid alarmist language but communicate severity clearly
+- Provide concrete, actionable remediation steps
+- Include code examples for fixes whenever possible
+- Prioritize issues based on risk (likelihood × impact)
+- Consider the technology stack when providing recommendations
+- Make recommendations specific to the codebase, not generic
+- Use standard terminology aligned with OWASP, CWE, and similar frameworks
+
+Remember that your goal is to help developers understand and address security issues, not to merely identify problems. Always provide practical, implementable solutions.

.claude/agents/vibe-coding-coach.md

@@ -0,0 +1,72 @@
+---
+name: vibe-coding-coach
+description: Use this agent when users want to build applications through conversation, focusing on the vision and feel of their app rather than technical implementation details. This agent excels at translating user ideas, visual references, and 'vibes' into working applications while handling all technical complexities behind the scenes. <example>Context: User wants to build an app but isn't technical and prefers to describe what they want rather than code it themselves.\nuser: "I want to build a photo sharing app that feels like Instagram but for pet owners"\nassistant: "I'll use the vibe-coding-coach agent to help guide you through building this app by understanding your vision and handling the technical implementation."\n<commentary>Since the user is describing an app idea in terms of feeling and comparison rather than technical specs, use the vibe-coding-coach agent to translate their vision into a working application.</commentary></example> <example>Context: User has sketches or screenshots of what they want to build.\nuser: "Here's a screenshot of an app I like. Can we build something similar but for tracking workouts?"\nassistant: "Let me engage the vibe-coding-coach agent to help understand your vision and build a workout tracking app with that aesthetic."\n<commentary>The user is providing visual references and wants to build something similar, which is perfect for the vibe-coding-coach agent's approach.</commentary></example>
+color: pink
+---
+
+You are an experienced software developer and coach specializing in 'vibe coding' - a collaborative approach where you translate user visions into working applications while handling all technical complexities behind the scenes.
+
+## Core Approach
+
+You help users build complete applications through conversation, focusing on understanding their vision, aesthetic preferences, and desired user experience rather than technical specifications. You adapt your language to match the user's expertise level while implementing professional-grade code behind the scenes.
+
+## Understanding User Vision
+
+When starting a project, you will:
+- Request visual references like screenshots, sketches, or links to similar apps
+- Ask about the feeling or mood they want their app to convey
+- Understand their target audience and primary use cases
+- Explore features they've seen elsewhere that inspire them
+- Discuss color preferences, style direction, and overall aesthetic
+- Break complex ideas into smaller, achievable milestones
+
+## Communication Style
+
+You will:
+- Use accessible language that matches the user's technical understanding
+- Explain concepts through visual examples and analogies when needed
+- Confirm understanding frequently with mockups or descriptions
+- Make the development process feel collaborative and exciting
+- Celebrate progress at each milestone to maintain momentum
+- Focus conversations on outcomes and experiences rather than implementation details
+
+## Technical Implementation
+
+While keeping technical details invisible to the user, you will:
+- Build modular, maintainable code with clean separation of concerns
+- Implement comprehensive security measures including input validation, sanitization, and proper authentication
+- Use environment variables for sensitive information
+- Create RESTful APIs with proper authentication, authorization, and rate limiting
+- Implement parameterized queries and encrypt sensitive data
+- Add proper error handling with user-friendly messages
+- Ensure accessibility and responsive design
+- Optimize performance with code splitting and caching strategies
+
+## Security-First Development
+
+You will proactively protect against:
+- SQL/NoSQL injection through parameterized queries
+- XSS attacks through proper output encoding
+- CSRF vulnerabilities with token validation
+- Authentication and session management flaws
+- Sensitive data exposure through encryption and access controls
+- API vulnerabilities through proper endpoint protection and input validation
+
+## Development Process
+
+You will:
+1. Start with understanding the user's vision through visual references and descriptions
+2. Create a basic working prototype they can see and react to
+3. Iterate based on their feedback, always relating changes to their stated 'vibe'
+4. Suggest enhancements that align with their aesthetic and functional goals
+5. Provide simple, visual deployment instructions when ready
+
+## Key Principles
+
+- Judge success by how well the application matches the user's vision, not code elegance
+- Keep technical complexity hidden while implementing best practices
+- Make every interaction feel like progress toward their dream app
+- Transform abstract ideas and feelings into concrete, working features
+- Ensure the final product is not just functional but captures the intended 'vibe'
+
+Remember: Users care about how their application looks, feels, and works for their intended audience. Your role is to be their technical partner who makes their vision real while they focus on the creative and strategic aspects.

.claude/settings.local.json

@@ -7,7 +7,12 @@
       "Bash(yarn lint)",
       "Bash(yarn prebuild-tv:*)",
       "Bash(mkdir:*)",
-      "Bash(yarn lint:*)"
+      "Bash(yarn lint:*)",
+      "Bash(yarn add:*)",
+      "Bash(git reset:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(yarn test-ci:*)"
     ],
     "deny": []
   }

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,15 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**Version**
+- OrionTV:
+- LunaTV or MoonTV:

.github/workflows/build-apk.yml

@@ -1,4 +1,4 @@
-name: Build Android TV APK
+name: Build Android APK
 
 on:
   workflow_dispatch:
@@ -34,10 +34,10 @@ jobs:
           java-version: "17"
 
       - name: Prebuild TV App
-        run: yarn prebuild-tv
+        run: yarn prebuild
 
       - name: Build TV APK
-        run: yarn build-local
+        run: yarn build
 
       - name: Rename APK file
         run: |

.gitignore

@@ -24,4 +24,5 @@ web/**
 .bmad-core
 .kilocodemodes
 .roomodes
-yarn-errors.log
+yarn-errors.log
+coverage/

CLAUDE.md

@@ -4,104 +4,147 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Project Overview
 
-OrionTV is a React Native TVOS application for streaming video content, built with Expo and designed specifically for TV platforms (Apple TV and Android TV). The project includes both a frontend React Native app and a backend Express service.
+OrionTV is a React Native TVOS application for streaming video content, built with Expo and designed specifically for TV platforms (Apple TV and Android TV). This is a frontend-only application that connects to external APIs and includes a built-in remote control server for external device control.
 
 ## Key Commands
 
 ### Development Commands
-- `yarn start-tv` - Start Metro bundler in TV mode
-- `yarn ios-tv` - Build and run on Apple TV
-- `yarn android-tv` - Build and run on Android TV  
-- `yarn prebuild-tv` - Generate native project files for TV (run this after dependency changes)
-- `yarn lint` - Run linting checks
-- `yarn test` - Run Jest tests with watch mode
-- `yarn build-local` - Build Android APK locally
 
-### Backend Commands (from `/backend` directory)
-- `yarn dev` - Start backend development server with hot reload
-- `yarn build` - Build TypeScript backend
-- `yarn start` - Start production backend server
+#### TV Development (Apple TV & Android TV)
+- `yarn start` - Start Metro bundler in TV mode (EXPO_TV=1)
+- `yarn android` - Build and run on Android TV
+- `yarn ios` - Build and run on Apple TV
+- `yarn prebuild` - Generate native project files for TV (run after dependency changes)
+- `yarn build` - Build Android APK for TV release
+
+#### Testing Commands
+- `yarn test` - Run Jest tests with watch mode
+- `yarn test-ci` - Run Jest tests for CI with coverage
+- `yarn test utils` - Run tests for specific directory/file pattern
+- `yarn lint` - Run ESLint checks
+- `yarn typecheck` - Run TypeScript type checking
+
+#### Build and Deployment
+- `yarn copy-config` - Copy TV-specific Android configurations
+- `yarn build-debug` - Build Android APK for debugging
+- `yarn clean` - Clean cache and build artifacts
+- `yarn clean-modules` - Reinstall all node modules
 
 ## Architecture Overview
 
-### Frontend Structure
-- **Expo Router**: File-based routing with screens in `/app` directory
-- **State Management**: Zustand stores for global state (`/stores`)
-- **TV-Specific Components**: Components optimized for TV remote control interaction
-- **Services**: API layer, storage management, and remote control service
+### Multi-Platform Responsive Design
 
-### Key Technologies
-- React Native TVOS (0.74.x) - TV-optimized React Native
-- Expo SDK 51 - Development platform and tooling
-- TypeScript - Type safety throughout
-- Zustand - Lightweight state management
-- Expo AV - Video playback functionality
+OrionTV implements a sophisticated responsive architecture supporting multiple device types:
+- **Device Detection**: Width-based breakpoints (mobile <768px, tablet 768-1023px, TV ≥1024px)
+- **Component Variants**: Platform-specific files with `.tv.tsx`, `.mobile.tsx`, `.tablet.tsx` extensions
+- **Responsive Utilities**: `DeviceUtils` and `ResponsiveStyles` for adaptive layouts and scaling
+- **Adaptive Navigation**: Different interaction patterns per device type (touch vs remote control)
 
-### State Management (Zustand Stores)
-- `homeStore.ts` - Home screen content, categories, and play records
-- `playerStore.ts` - Video player state and controls
-- `settingsStore.ts` - App settings and configuration
-- `remoteControlStore.ts` - Remote control server functionality
+### State Management Architecture (Zustand)
 
-### TV-Specific Features
-- Remote control navigation (`useTVRemoteHandler` hook)
-- TV-optimized UI components with focus management
-- Remote control server for external control via HTTP bridge
-- Gesture handling for TV remote interactions
+Domain-specific stores with consistent patterns:
+- **homeStore.ts** - Home screen content, categories, Douban API data, and play records
+- **playerStore.ts** - Video player state, controls, and episode management  
+- **settingsStore.ts** - App settings, API configuration, and user preferences
+- **remoteControlStore.ts** - Remote control server functionality and HTTP bridge
+- **authStore.ts** - User authentication state
+- **updateStore.ts** - Automatic update checking and version management
+- **favoritesStore.ts** - User favorites management
 
-### Backend Architecture
-- Express.js server providing API endpoints
-- Routes for search, video details, and Douban integration
-- Image proxy service for handling external images
-- CORS enabled for cross-origin requests
+### Service Layer Pattern
+
+Clean separation of concerns across service modules:
+- **api.ts** - External API integration with error handling and caching
+- **storage.ts** - AsyncStorage wrapper with typed interfaces
+- **remoteControlService.ts** - TCP-based HTTP server for external device control
+- **updateService.ts** - Automatic version checking and APK download management
+- **tcpHttpServer.ts** - Low-level TCP server implementation
+
+### TV Remote Control System
+
+Sophisticated TV interaction handling:
+- **useTVRemoteHandler** - Centralized hook for TV remote event processing
+- **Hardware Events** - HWEvent handling for TV-specific controls (play/pause, seek, menu)
+- **Focus Management** - TV-specific focus states and navigation flows
+- **Gesture Support** - Long press, directional seeking, auto-hide controls
+
+## Key Technologies
+
+- **React Native TVOS (0.74.x)** - TV-optimized React Native with TV-specific event handling
+- **Expo SDK 51** - Development platform providing native capabilities and build tooling
+- **TypeScript** - Complete type safety with `@/*` path mapping configuration
+- **Zustand** - Lightweight state management for global application state
+- **Expo Router** - File-based routing system with typed routes
+- **Expo AV** - Video playback with TV-optimized controls
 
 ## Development Workflow
 
-### TV Development Notes
-- Always use TV-specific commands (`*-tv` variants)
-- Run `yarn prebuild-tv` after adding new dependencies
-- Test on both Apple TV and Android TV simulators
+### TV-First Development Pattern
+
+This project uses a TV-first approach with responsive adaptations:
+- **Primary Target**: Apple TV and Android TV with remote control interaction
+- **Secondary Targets**: Mobile and tablet with touch-optimized responsive design
+- **Build Environment**: `EXPO_TV=1` environment variable enables TV-specific features
+- **Component Strategy**: Shared components with platform-specific variants using file extensions
+
+### Testing Strategy
+
+- **Unit Tests**: Comprehensive test coverage for utilities (`utils/__tests__/`)
+- **Jest Configuration**: Expo preset with Babel transpilation
+- **Test Patterns**: Mock-based testing for React Native modules and external dependencies
+- **Coverage Reporting**: CI-compatible coverage reports with detailed metrics
+
+### Important Development Notes
+
+- Run `yarn prebuild` after adding new dependencies for native builds
+- Use `yarn copy-config` to apply TV-specific Android configurations
 - TV components require focus management and remote control support
+- Test on both TV devices (Apple TV/Android TV) and responsive mobile/tablet layouts
+- All API calls are centralized in `/services` directory with error handling
+- Storage operations use AsyncStorage wrapper in `storage.ts` with typed interfaces
 
-### State Management Patterns
-- Use Zustand stores for global state
-- Stores follow a consistent pattern with actions and state
-- API calls are centralized in the `/services` directory
-- Storage operations use AsyncStorage wrapper in `storage.ts`
+### Component Development Patterns
 
-### Component Structure
-- TV-specific components have `.tv.tsx` extensions
-- Common components in `/components` directory
-- Custom hooks in `/hooks` directory for reusable logic
-- TV remote handling is centralized in `useTVRemoteHandler`
+- **Platform Variants**: Use `.tv.tsx`, `.mobile.tsx`, `.tablet.tsx` for platform-specific implementations
+- **Responsive Utilities**: Leverage `DeviceUtils.getDeviceType()` for responsive logic
+- **TV Remote Handling**: Use `useTVRemoteHandler` hook for TV-specific interactions
+- **Focus Management**: TV components must handle focus states for remote navigation
+- **Shared Logic**: Place common logic in `/hooks` directory for reusability
 
-## Testing
+## Common Development Tasks
 
-- Uses Jest with `jest-expo` preset
-- Run tests with `yarn test`
-- Component tests in `__tests__` directories
-- Snapshot testing for UI components
+### Adding New Components
+1. Create base component in `/components` directory
+2. Add platform-specific variants (`.tv.tsx`) if needed
+3. Import and use responsive utilities from `@/utils/DeviceUtils`
+4. Test across device types for proper responsive behavior
 
-## Common Issues
+### Working with State
+1. Identify appropriate Zustand store in `/stores` directory
+2. Follow existing patterns for actions and state structure
+3. Use TypeScript interfaces for type safety
+4. Consider cross-store dependencies and data flow
 
-### TV Platform Specifics
-- TV apps require special focus management
-- Remote control events need careful handling
-- TV-specific assets and icons required
-- Platform-specific build configurations
-
-### Development Environment
-- Ensure Xcode is installed for Apple TV development
-- Android Studio required for Android TV development
-- Metro bundler must run in TV mode (`EXPO_TV=1`)
-- Backend server must be running on port 3001 for full functionality
+### API Integration
+1. Add new endpoints to `/services/api.ts`
+2. Implement proper error handling and loading states
+3. Use caching strategies for frequently accessed data
+4. Update relevant Zustand stores with API responses
 
 ## File Structure Notes
 
 - `/app` - Expo Router screens and navigation
-- `/components` - Reusable UI components
-- `/stores` - Zustand state management
-- `/services` - API, storage, and external service integrations
-- `/hooks` - Custom React hooks
-- `/backend` - Express.js backend service
-- `/constants` - App constants and theme definitions
+- `/components` - Reusable UI components (including `.tv.tsx` variants)
+- `/stores` - Zustand state management stores
+- `/services` - API, storage, remote control, and update services
+- `/hooks` - Custom React hooks including `useTVRemoteHandler`
+- `/constants` - App constants, theme definitions, and update configuration
+- `/assets` - Static assets including TV-specific icons and banners
+
+# important-instruction-reminders
+
+Do what has been asked; nothing more, nothing less.
+NEVER create files unless they're absolutely necessary for achieving your goal.
+ALWAYS prefer editing an existing file to creating a new one.
+NEVER proactively create documentation files (\*.md) or README files. Only create documentation files if explicitly requested by the User.
+ALWAYS When plan mode switches to edit, the contents of plan and todo need to be output as a document.

README.md

@@ -66,14 +66,10 @@ yarn ios-tv
 yarn android-tv
 ```
 
-## 部署
+## 使用
 
 - 1.2.x 以上版本需配合 [MoonTV](https://github.com/senshinya/MoonTV) 使用。
 
-## 其他
-
-- 最低版本是 android 6.0，可用，但是不推荐
-- 如果使用 https 的后端接口无法访问，在确认服务没有问题的情况下，请检查 https 的 TLS 协议，Android 10 之后版本才支持 TLS1.3
 
 ## 📜 主要脚本
 

app.json

@@ -23,7 +23,9 @@
             "newArchEnabled": false
           },
           "android": {
-            "newArchEnabled": false
+            "newArchEnabled": false,
+            "enableProguardInReleaseBuilds": true,
+            "enableShrinkResourcesInReleaseBuilds": true
           }
         }
       ],
@@ -34,7 +36,12 @@
     },
     "name": "OrionTV",
     "slug": "OrionTV",
+    "orientation": "default",
     "icon": "./assets/images/icon.png",
+    "userInterfaceStyle": "dark",
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "android": {
       "package": "com.oriontv",
       "usesCleartextTraffic": true,
@@ -43,11 +50,38 @@
       "icon": "./assets/images/icon.png",
       "permissions": [
         "android.permission.INTERNET",
-        "android.permission.ACCESS_NETWORK_STATE"
+        "android.permission.ACCESS_NETWORK_STATE",
+        "android.permission.WAKE_LOCK"
+      ],
+      "screenOrientation": "unspecified",
+      "intentFilters": [
+        {
+          "action": "android.intent.action.VIEW",
+          "data": [
+            {
+              "scheme": "oriontv"
+            }
+          ],
+          "category": [
+            "android.intent.category.BROWSABLE",
+            "android.intent.category.DEFAULT"
+          ]
+        }
       ]
     },
     "ios": {
-      "bundleIdentifier": "com.oriontv"
+      "bundleIdentifier": "com.oriontv",
+      "supportsTablet": true,
+      "requireFullScreen": false,
+      "supportedInterfaceOrientations": [
+        "UIInterfaceOrientationPortrait",
+        "UIInterfaceOrientationLandscapeLeft",
+        "UIInterfaceOrientationLandscapeRight",
+        "UIInterfaceOrientationPortraitUpsideDown"
+      ],
+      "config": {
+        "usesNonExemptEncryption": false
+      }
     },
     "scheme": "oriontv",
     "extra": {

app/_layout.tsx

@@ -3,13 +3,21 @@ import { useFonts } from "expo-font";
 import { Stack } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import { useEffect } from "react";
-import { Platform } from "react-native";
+import { Platform, View, StyleSheet } from "react-native";
 import Toast from "react-native-toast-message";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
 import { useSettingsStore } from "@/stores/settingsStore";
 import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import LoginModal from "@/components/LoginModal";
 import useAuthStore from "@/stores/authStore";
+import { useUpdateStore, initUpdateStore } from "@/stores/updateStore";
+import { UpdateModal } from "@/components/UpdateModal";
+import { UPDATE_CONFIG } from "@/constants/UpdateConfig";
+import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
+import Logger from '@/utils/Logger';
+
+const logger = Logger.withTag('RootLayout');
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
@@ -22,9 +30,15 @@ export default function RootLayout() {
   const { loadSettings, remoteInputEnabled, apiBaseUrl } = useSettingsStore();
   const { startServer, stopServer } = useRemoteControlStore();
   const { checkLoginStatus } = useAuthStore();
+  const { checkForUpdate, lastCheckTime } = useUpdateStore();
+  const responsiveConfig = useResponsiveLayout();
 
   useEffect(() => {
-    loadSettings();
+    const initializeApp = async () => {
+      await loadSettings();
+    };
+    initializeApp();
+    initUpdateStore(); // 初始化更新存储
   }, [loadSettings]);
 
   useEffect(() => {
@@ -37,37 +51,60 @@ export default function RootLayout() {
     if (loaded || error) {
       SplashScreen.hideAsync();
       if (error) {
-        console.warn(`Error in loading fonts: ${error}`);
+        logger.warn(`Error in loading fonts: ${error}`);
       }
     }
   }, [loaded, error]);
 
+  // 检查更新
   useEffect(() => {
-    if (remoteInputEnabled) {
+    if (loaded && UPDATE_CONFIG.AUTO_CHECK && Platform.OS === 'android') {
+      // 检查是否需要自动检查更新
+      const shouldCheck = Date.now() - lastCheckTime > UPDATE_CONFIG.CHECK_INTERVAL;
+      if (shouldCheck) {
+        checkForUpdate(true); // 静默检查
+      }
+    }
+  }, [loaded, lastCheckTime, checkForUpdate]);
+
+  useEffect(() => {
+    // 只有在非手机端才启动远程控制服务器
+    if (remoteInputEnabled && responsiveConfig.deviceType !== "mobile") {
       startServer();
     } else {
       stopServer();
     }
-  }, [remoteInputEnabled, startServer, stopServer]);
+  }, [remoteInputEnabled, startServer, stopServer, responsiveConfig.deviceType]);
 
   if (!loaded && !error) {
     return null;
   }
 
   return (
-    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name="index" options={{ headerShown: false }} />
-        <Stack.Screen name="detail" options={{ headerShown: false }} />
-        {Platform.OS !== "web" && <Stack.Screen name="play" options={{ headerShown: false }} />}
-        <Stack.Screen name="search" options={{ headerShown: false }} />
-        <Stack.Screen name="live" options={{ headerShown: false }} />
-        <Stack.Screen name="settings" options={{ headerShown: false }} />
-        <Stack.Screen name="favorites" options={{ headerShown: false }} />
-        <Stack.Screen name="+not-found" />
-      </Stack>
-      <Toast />
-      <LoginModal />
-    </ThemeProvider>
+    <SafeAreaProvider>
+      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
+        <View style={styles.container}>
+          <Stack>
+            <Stack.Screen name="index" options={{ headerShown: false }} />
+            <Stack.Screen name="detail" options={{ headerShown: false }} />
+            {Platform.OS !== "web" && <Stack.Screen name="play" options={{ headerShown: false }} />}
+            <Stack.Screen name="search" options={{ headerShown: false }} />
+            <Stack.Screen name="live" options={{ headerShown: false }} />
+            <Stack.Screen name="settings" options={{ headerShown: false }} />
+            <Stack.Screen name="favorites" options={{ headerShown: false }} />
+            <Stack.Screen name="+not-found" />
+          </Stack>
+        </View>
+        <Toast />
+        <LoginModal />
+        <UpdateModal />
+      </ThemeProvider>
+    </SafeAreaProvider>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

app/detail.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { View, Text, StyleSheet, Image, ScrollView, ActivityIndicator, Pressable } from "react-native";
+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";
@@ -7,11 +7,20 @@ import { StyledButton } from "@/components/StyledButton";
 import VideoLoadingAnimation from "@/components/VideoLoadingAnimation";
 import useDetailStore from "@/stores/detailStore";
 import { FontAwesome } from "@expo/vector-icons";
+import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
+import { getCommonResponsiveStyles } from "@/utils/ResponsiveStyles";
+import ResponsiveNavigation from "@/components/navigation/ResponsiveNavigation";
+import ResponsiveHeader from "@/components/navigation/ResponsiveHeader";
 
 export default function DetailScreen() {
   const { q, source, id } = useLocalSearchParams<{ q: string; source?: string; id?: string }>();
   const router = useRouter();
 
+  // 响应式布局配置
+  const responsiveConfig = useResponsiveLayout();
+  const commonStyles = getCommonResponsiveStyles(responsiveConfig);
+  const { deviceType, spacing } = responsiveConfig;
+
   const {
     detail,
     searchResults,
@@ -54,80 +63,108 @@ export default function DetailScreen() {
   }
 
   if (error) {
-    return (
-      <ThemedView style={styles.centered}>
-        <ThemedText type="subtitle" style={styles.text}>
+    const content = (
+      <ThemedView style={[commonStyles.safeContainer, commonStyles.center]}>
+        <ThemedText type="subtitle" style={commonStyles.textMedium}>
           {error}
         </ThemedText>
       </ThemedView>
     );
-  }
 
-  if (!detail) {
+    if (deviceType === 'tv') {
+      return content;
+    }
+
     return (
-      <ThemedView style={styles.centered}>
-        <ThemedText type="subtitle">未找到详情信息</ThemedText>
-      </ThemedView>
+      <ResponsiveNavigation>
+        <ResponsiveHeader title="详情" showBackButton />
+        {content}
+      </ResponsiveNavigation>
     );
   }
 
-  return (
-    <ThemedView style={styles.container}>
-      <ScrollView>
-        <View style={styles.topContainer}>
-          <Image source={{ uri: detail.poster }} style={styles.poster} />
-          <View style={styles.infoContainer}>
-            <View style={styles.titleContainer}>
-              <ThemedText style={styles.title} numberOfLines={1} ellipsizeMode="tail">
-                {detail.title}
-              </ThemedText>
-              <StyledButton onPress={toggleFavorite} variant="ghost" style={styles.favoriteButton}>
-                <FontAwesome
-                  name={isFavorited ? "heart" : "heart-o"}
-                  size={24}
-                  color={isFavorited ? "#feff5f" : "#ccc"}
-                />
-              </StyledButton>
-            </View>
-            <View style={styles.metaContainer}>
-              <ThemedText style={styles.metaText}>{detail.year}</ThemedText>
-              <ThemedText style={styles.metaText}>{detail.type_name}</ThemedText>
-            </View>
+  if (!detail) {
+    const content = (
+      <ThemedView style={[commonStyles.safeContainer, commonStyles.center]}>
+        <ThemedText type="subtitle">未找到详情信息</ThemedText>
+      </ThemedView>
+    );
 
-            <ScrollView style={styles.descriptionScrollView}>
-              <ThemedText style={styles.description}>{detail.desc}</ThemedText>
-            </ScrollView>
+    if (deviceType === 'tv') {
+      return content;
+    }
+
+    return (
+      <ResponsiveNavigation>
+        <ResponsiveHeader title="详情" showBackButton />
+        {content}
+      </ResponsiveNavigation>
+    );
+  }
+
+  // 动态样式
+  const dynamicStyles = createResponsiveStyles(deviceType, spacing);
+
+  const renderDetailContent = () => {
+    if (deviceType === 'mobile') {
+      // 移动端垂直布局
+      return (
+        <ScrollView style={dynamicStyles.scrollContainer}>
+          {/* 海报和基本信息 */}
+          <View style={dynamicStyles.mobileTopContainer}>
+            <Image source={{ uri: detail.poster }} style={dynamicStyles.mobilePoster} />
+            <View style={dynamicStyles.mobileInfoContainer}>
+              <View style={dynamicStyles.titleContainer}>
+                <ThemedText style={dynamicStyles.title} numberOfLines={2}>
+                  {detail.title}
+                </ThemedText>
+                <StyledButton onPress={toggleFavorite} variant="ghost" style={dynamicStyles.favoriteButton}>
+                  <FontAwesome
+                    name={isFavorited ? "heart" : "heart-o"}
+                    size={20}
+                    color={isFavorited ? "#feff5f" : "#ccc"}
+                  />
+                </StyledButton>
+              </View>
+              <View style={dynamicStyles.metaContainer}>
+                <ThemedText style={dynamicStyles.metaText}>{detail.year}</ThemedText>
+                <ThemedText style={dynamicStyles.metaText}>{detail.type_name}</ThemedText>
+              </View>
+            </View>
           </View>
-        </View>
 
-        <View style={styles.bottomContainer}>
-          <View style={styles.sourcesContainer}>
-            <View style={styles.sourcesTitleContainer}>
-              <ThemedText style={styles.sourcesTitle}>选择播放源 共 {searchResults.length} 个</ThemedText>
+          {/* 描述 */}
+          <View style={dynamicStyles.descriptionContainer}>
+            <ThemedText style={dynamicStyles.description}>{detail.desc}</ThemedText>
+          </View>
+
+          {/* 播放源 */}
+          <View style={dynamicStyles.sourcesContainer}>
+            <View style={dynamicStyles.sourcesTitleContainer}>
+              <ThemedText style={dynamicStyles.sourcesTitle}>播放源 ({searchResults.length})</ThemedText>
               {!allSourcesLoaded && <ActivityIndicator style={{ marginLeft: 10 }} />}
             </View>
-            <View style={styles.sourceList}>
+            <View style={dynamicStyles.sourceList}>
               {searchResults.map((item, index) => {
                 const isSelected = detail?.source === item.source;
                 return (
                   <StyledButton
                     key={index}
                     onPress={() => setDetail(item)}
-                    hasTVPreferredFocus={index === 0}
                     isSelected={isSelected}
-                    style={styles.sourceButton}
+                    style={dynamicStyles.sourceButton}
                   >
-                    <ThemedText style={styles.sourceButtonText}>{item.source_name}</ThemedText>
+                    <ThemedText style={dynamicStyles.sourceButtonText}>{item.source_name}</ThemedText>
                     {item.episodes.length > 1 && (
-                      <View style={[styles.badge, isSelected && styles.selectedBadge]}>
-                        <Text style={styles.badgeText}>
+                      <View style={[dynamicStyles.badge, isSelected && dynamicStyles.selectedBadge]}>
+                        <Text style={dynamicStyles.badgeText}>
                           {item.episodes.length > 99 ? "99+" : `${item.episodes.length}`} 集
                         </Text>
                       </View>
                     )}
                     {item.resolution && (
-                      <View style={[styles.badge, { backgroundColor: "#666" }, isSelected && styles.selectedBadge]}>
-                        <Text style={styles.badgeText}>{item.resolution}</Text>
+                      <View style={[dynamicStyles.badge, { backgroundColor: "#666" }, isSelected && dynamicStyles.selectedBadge]}>
+                        <Text style={dynamicStyles.badgeText}>{item.resolution}</Text>
                       </View>
                     )}
                   </StyledButton>
@@ -135,144 +172,278 @@ export default function DetailScreen() {
               })}
             </View>
           </View>
-          <View style={styles.episodesContainer}>
-            <ThemedText style={styles.episodesTitle}>播放列表</ThemedText>
-            <ScrollView contentContainerStyle={styles.episodeList}>
+
+          {/* 剧集列表 */}
+          <View style={dynamicStyles.episodesContainer}>
+            <ThemedText style={dynamicStyles.episodesTitle}>播放列表</ThemedText>
+            <View style={dynamicStyles.episodeList}>
               {detail.episodes.map((episode, index) => (
                 <StyledButton
                   key={index}
-                  style={styles.episodeButton}
+                  style={dynamicStyles.episodeButton}
                   onPress={() => handlePlay(index)}
                   text={`第 ${index + 1} 集`}
-                  textStyle={styles.episodeButtonText}
+                  textStyle={dynamicStyles.episodeButtonText}
                 />
               ))}
-            </ScrollView>
+            </View>
           </View>
-        </View>
-      </ScrollView>
+        </ScrollView>
+      );
+    } else {
+      // 平板和TV端水平布局
+      return (
+        <ScrollView style={dynamicStyles.scrollContainer}>
+          <View style={dynamicStyles.topContainer}>
+            <Image source={{ uri: detail.poster }} style={dynamicStyles.poster} />
+            <View style={dynamicStyles.infoContainer}>
+              <View style={dynamicStyles.titleContainer}>
+                <ThemedText style={dynamicStyles.title} numberOfLines={1} ellipsizeMode="tail">
+                  {detail.title}
+                </ThemedText>
+                <StyledButton onPress={toggleFavorite} variant="ghost" style={dynamicStyles.favoriteButton}>
+                  <FontAwesome
+                    name={isFavorited ? "heart" : "heart-o"}
+                    size={24}
+                    color={isFavorited ? "#feff5f" : "#ccc"}
+                  />
+                </StyledButton>
+              </View>
+              <View style={dynamicStyles.metaContainer}>
+                <ThemedText style={dynamicStyles.metaText}>{detail.year}</ThemedText>
+                <ThemedText style={dynamicStyles.metaText}>{detail.type_name}</ThemedText>
+              </View>
+
+              <ScrollView style={dynamicStyles.descriptionScrollView}>
+                <ThemedText style={dynamicStyles.description}>{detail.desc}</ThemedText>
+              </ScrollView>
+            </View>
+          </View>
+
+          <View style={dynamicStyles.bottomContainer}>
+            <View style={dynamicStyles.sourcesContainer}>
+              <View style={dynamicStyles.sourcesTitleContainer}>
+                <ThemedText style={dynamicStyles.sourcesTitle}>选择播放源 共 {searchResults.length} 个</ThemedText>
+                {!allSourcesLoaded && <ActivityIndicator style={{ marginLeft: 10 }} />}
+              </View>
+              <View style={dynamicStyles.sourceList}>
+                {searchResults.map((item, index) => {
+                  const isSelected = detail?.source === item.source;
+                  return (
+                    <StyledButton
+                      key={index}
+                      onPress={() => setDetail(item)}
+                      hasTVPreferredFocus={index === 0}
+                      isSelected={isSelected}
+                      style={dynamicStyles.sourceButton}
+                    >
+                      <ThemedText style={dynamicStyles.sourceButtonText}>{item.source_name}</ThemedText>
+                      {item.episodes.length > 1 && (
+                        <View style={[dynamicStyles.badge, isSelected && dynamicStyles.selectedBadge]}>
+                          <Text style={dynamicStyles.badgeText}>
+                            {item.episodes.length > 99 ? "99+" : `${item.episodes.length}`} 集
+                          </Text>
+                        </View>
+                      )}
+                      {item.resolution && (
+                        <View style={[dynamicStyles.badge, { backgroundColor: "#666" }, isSelected && dynamicStyles.selectedBadge]}>
+                          <Text style={dynamicStyles.badgeText}>{item.resolution}</Text>
+                        </View>
+                      )}
+                    </StyledButton>
+                  );
+                })}
+              </View>
+            </View>
+            <View style={dynamicStyles.episodesContainer}>
+              <ThemedText style={dynamicStyles.episodesTitle}>播放列表</ThemedText>
+              <ScrollView contentContainerStyle={dynamicStyles.episodeList}>
+                {detail.episodes.map((episode, index) => (
+                  <StyledButton
+                    key={index}
+                    style={dynamicStyles.episodeButton}
+                    onPress={() => handlePlay(index)}
+                    text={`第 ${index + 1} 集`}
+                    textStyle={dynamicStyles.episodeButtonText}
+                  />
+                ))}
+              </ScrollView>
+            </View>
+          </View>
+        </ScrollView>
+      );
+    }
+  };
+
+  const content = (
+    <ThemedView style={[commonStyles.container, { paddingTop: deviceType === 'tv' ? 40 : 0 }]}>
+      {renderDetailContent()}
     </ThemedView>
   );
+
+  // 根据设备类型决定是否包装在响应式导航中
+  if (deviceType === 'tv') {
+    return content;
+  }
+
+  return (
+    <ResponsiveNavigation>
+      <ResponsiveHeader title={detail?.title || "详情"} showBackButton />
+      {content}
+    </ResponsiveNavigation>
+  );
 }
 
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-  centered: { flex: 1, justifyContent: "center", alignItems: "center" },
-  topContainer: {
-    flexDirection: "row",
-    padding: 20,
-  },
-  text: {
-    padding: 20,
-    textAlign: "center",
-  },
-  poster: {
-    width: 200,
-    height: 300,
-    borderRadius: 8,
-  },
-  infoContainer: {
-    flex: 1,
-    marginLeft: 20,
-    justifyContent: "flex-start",
-  },
-  titleContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  title: {
-    paddingTop: 16,
-    fontSize: 28,
-    fontWeight: "bold",
-    flexShrink: 1,
-  },
-  metaContainer: {
-    flexDirection: "row",
-    marginBottom: 10,
-  },
-  metaText: {
-    color: "#aaa",
-    marginRight: 10,
-    fontSize: 14,
-  },
-  descriptionScrollView: {
-    height: 150, // Constrain height to make it scrollable
-  },
-  description: {
-    fontSize: 14,
-    color: "#ccc",
-    lineHeight: 22,
-  },
-  favoriteButton: {
-    padding: 10,
-    marginLeft: 10,
-    backgroundColor: "transparent",
-  },
-  favoriteButtonText: {
-    marginLeft: 8,
-    fontSize: 16,
-  },
-  bottomContainer: {
-    paddingHorizontal: 20,
-  },
-  sourcesContainer: {
-    marginTop: 20,
-  },
-  sourcesTitleContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginBottom: 10,
-  },
-  sourcesTitle: {
-    fontSize: 20,
-    fontWeight: "bold",
-  },
-  sourceList: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-  },
-  sourceButton: {
-    margin: 8,
-  },
-  sourceButtonText: {
-    color: "white",
-    fontSize: 16,
-  },
-  badge: {
-    backgroundColor: "#666",
-    borderRadius: 10,
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    marginLeft: 8,
-  },
-  badgeText: {
-    color: "#fff",
-    fontSize: 12,
-    fontWeight: "bold",
-    paddingBottom: 2.5,
-  },
-  selectedBadge: {
-    backgroundColor: "#4c4c4c",
-  },
-  selectedbadgeText: {
-    color: "#333",
-  },
-  episodesContainer: {
-    marginTop: 20,
-  },
-  episodesTitle: {
-    fontSize: 20,
-    fontWeight: "bold",
-    marginBottom: 10,
-  },
-  episodeList: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-  },
-  episodeButton: {
-    margin: 5,
-  },
-  episodeButtonText: {
-    color: "white",
-  },
-});
+const createResponsiveStyles = (deviceType: string, spacing: number) => {
+  const isTV = deviceType === 'tv';
+  const isTablet = deviceType === 'tablet';
+  const isMobile = deviceType === 'mobile';
+
+  return StyleSheet.create({
+    scrollContainer: {
+      flex: 1,
+    },
+    
+    // 移动端专用样式
+    mobileTopContainer: {
+      paddingHorizontal: spacing,
+      paddingTop: spacing,
+      paddingBottom: spacing / 2,
+    },
+    mobilePoster: {
+      width: '100%',
+      height: 280,
+      borderRadius: 8,
+      alignSelf: 'center',
+      marginBottom: spacing,
+    },
+    mobileInfoContainer: {
+      flex: 1,
+    },
+    descriptionContainer: {
+      paddingHorizontal: spacing,
+      paddingBottom: spacing,
+    },
+
+    // 平板和TV端样式
+    topContainer: {
+      flexDirection: "row",
+      padding: spacing,
+    },
+    poster: {
+      width: isTV ? 200 : 160,
+      height: isTV ? 300 : 240,
+      borderRadius: 8,
+    },
+    infoContainer: {
+      flex: 1,
+      marginLeft: spacing,
+      justifyContent: "flex-start",
+    },
+    descriptionScrollView: {
+      height: 150,
+    },
+
+    // 通用样式
+    titleContainer: {
+      flexDirection: "row",
+      alignItems: "center",
+      marginBottom: spacing / 2,
+    },
+    title: {
+      paddingTop: 16,
+      fontSize: isMobile ? 20 : isTablet ? 24 : 28,
+      fontWeight: "bold",
+      flexShrink: 1,
+      color: 'white',
+    },
+    favoriteButton: {
+      padding: 10,
+      marginLeft: 10,
+      backgroundColor: "transparent",
+    },
+    metaContainer: {
+      flexDirection: "row",
+      marginBottom: spacing / 2,
+    },
+    metaText: {
+      color: "#aaa",
+      marginRight: spacing / 2,
+      fontSize: isMobile ? 12 : 14,
+    },
+    description: {
+      fontSize: isMobile ? 13 : 14,
+      color: "#ccc",
+      lineHeight: isMobile ? 18 : 22,
+    },
+
+    // 播放源和剧集样式
+    bottomContainer: {
+      paddingHorizontal: spacing,
+    },
+    sourcesContainer: {
+      marginTop: spacing,
+    },
+    sourcesTitleContainer: {
+      flexDirection: "row",
+      alignItems: "center",
+      marginBottom: spacing / 2,
+    },
+    sourcesTitle: {
+      fontSize: isMobile ? 16 : isTablet ? 18 : 20,
+      fontWeight: "bold",
+      color: 'white',
+    },
+    sourceList: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+    },
+    sourceButton: {
+      margin: isMobile ? 4 : 8,
+      minHeight: isMobile ? 36 : 44,
+    },
+    sourceButtonText: {
+      color: "white",
+      fontSize: isMobile ? 14 : 16,
+    },
+    badge: {
+      backgroundColor: "#666",
+      borderRadius: 10,
+      paddingHorizontal: 6,
+      paddingVertical: 2,
+      marginLeft: 8,
+    },
+    badgeText: {
+      color: "#fff",
+      fontSize: isMobile ? 10 : 12,
+      fontWeight: "bold",
+      paddingBottom: 2.5,
+    },
+    selectedBadge: {
+      backgroundColor: "#4c4c4c",
+    },
+
+    episodesContainer: {
+      marginTop: spacing,
+      paddingBottom: spacing * 2,
+    },
+    episodesTitle: {
+      fontSize: isMobile ? 16 : isTablet ? 18 : 20,
+      fontWeight: "bold",
+      marginBottom: spacing / 2,
+      color: 'white',
+    },
+    episodeList: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+    },
+    episodeButton: {
+      margin: isMobile ? 3 : 5,
+      minHeight: isMobile ? 32 : 36,
+    },
+    episodeButtonText: {
+      color: "white",
+      fontSize: isMobile ? 12 : 14,
+    },
+  });
+};

app/favorites.tsx

@@ -1,16 +1,25 @@
 import React, { useEffect } from "react";
-import { View, StyleSheet, ActivityIndicator } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { ThemedView } from "@/components/ThemedView";
 import { ThemedText } from "@/components/ThemedText";
 import useFavoritesStore from "@/stores/favoritesStore";
 import { Favorite } from "@/services/storage";
-import VideoCard from "@/components/VideoCard.tv";
+import VideoCard from "@/components/VideoCard";
 import { api } from "@/services/api";
 import CustomScrollView from "@/components/CustomScrollView";
+import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
+import { getCommonResponsiveStyles } from "@/utils/ResponsiveStyles";
+import ResponsiveNavigation from "@/components/navigation/ResponsiveNavigation";
+import ResponsiveHeader from "@/components/navigation/ResponsiveHeader";
 
 export default function FavoritesScreen() {
   const { favorites, loading, error, fetchFavorites } = useFavoritesStore();
 
+  // 响应式布局配置
+  const responsiveConfig = useResponsiveLayout();
+  const commonStyles = getCommonResponsiveStyles(responsiveConfig);
+  const { deviceType, spacing } = responsiveConfig;
+
   useEffect(() => {
     fetchFavorites();
   }, [fetchFavorites]);
@@ -32,46 +41,67 @@ export default function FavoritesScreen() {
     );
   };
 
-  return (
-    <ThemedView style={styles.container}>
-      <View style={styles.headerContainer}>
-        <ThemedText style={styles.headerTitle}>我的收藏</ThemedText>
-      </View>
+  // 动态样式
+  const dynamicStyles = createResponsiveStyles(deviceType, spacing);
+
+  const renderFavoritesContent = () => (
+    <>
+      {deviceType === 'tv' && (
+        <View style={dynamicStyles.headerContainer}>
+          <ThemedText style={dynamicStyles.headerTitle}>我的收藏</ThemedText>
+        </View>
+      )}
       <CustomScrollView
         data={favorites}
         renderItem={renderItem}
-        numColumns={5}
         loading={loading}
         error={error}
         emptyMessage="暂无收藏"
       />
+    </>
+  );
+
+  const content = (
+    <ThemedView style={[commonStyles.container, dynamicStyles.container]}>
+      {renderFavoritesContent()}
     </ThemedView>
   );
+
+  // 根据设备类型决定是否包装在响应式导航中
+  if (deviceType === 'tv') {
+    return content;
+  }
+
+  return (
+    <ResponsiveNavigation>
+      <ResponsiveHeader title="我的收藏" showBackButton />
+      {content}
+    </ResponsiveNavigation>
+  );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingTop: 40,
-  },
-  headerContainer: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingHorizontal: 24,
-    marginBottom: 10,
-  },
-  headerTitle: {
-    fontSize: 32,
-    fontWeight: "bold",
-    paddingTop: 16,
-  },
-  centered: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  list: {
-    padding: 10,
-  },
-});
+const createResponsiveStyles = (deviceType: string, spacing: number) => {
+  const isMobile = deviceType === 'mobile';
+  const isTablet = deviceType === 'tablet';
+  const isTV = deviceType === 'tv';
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      paddingTop: isTV ? spacing * 2 : 0,
+    },
+    headerContainer: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingHorizontal: spacing * 1.5,
+      marginBottom: spacing / 2,
+    },
+    headerTitle: {
+      fontSize: isMobile ? 24 : isTablet ? 28 : 32,
+      fontWeight: "bold",
+      paddingTop: spacing,
+      color: 'white',
+    },
+  });
+};

app/index.tsx

@@ -1,26 +1,35 @@
 import React, { useEffect, useCallback, useRef, useState } from "react";
-import { View, StyleSheet, ActivityIndicator, FlatList, Pressable, Dimensions } from "react-native";
+import { View, StyleSheet, ActivityIndicator, FlatList, Pressable, Animated, StatusBar, Platform, BackHandler, ToastAndroid } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ThemedView } from "@/components/ThemedView";
 import { ThemedText } from "@/components/ThemedText";
 import { api } from "@/services/api";
-import VideoCard from "@/components/VideoCard.tv";
+import VideoCard from "@/components/VideoCard";
 import { useFocusEffect, useRouter } from "expo-router";
 import { Search, Settings, LogOut, Heart } from "lucide-react-native";
 import { StyledButton } from "@/components/StyledButton";
 import useHomeStore, { RowItem, Category } from "@/stores/homeStore";
 import useAuthStore from "@/stores/authStore";
 import CustomScrollView from "@/components/CustomScrollView";
+import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
+import { getCommonResponsiveStyles } from "@/utils/ResponsiveStyles";
+import ResponsiveNavigation from "@/components/navigation/ResponsiveNavigation";
+import { useApiConfig, getApiConfigErrorMessage } from "@/hooks/useApiConfig";
+import { Colors } from "@/constants/Colors";
 
-const NUM_COLUMNS = 5;
-const { width } = Dimensions.get("window");
-
-// Threshold for triggering load more data (in pixels)
 const LOAD_MORE_THRESHOLD = 200;
 
 export default function HomeScreen() {
   const router = useRouter();
   const colorScheme = "dark";
   const [selectedTag, setSelectedTag] = useState<string | null>(null);
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const insets = useSafeAreaInsets();
+
+  // 响应式布局配置
+  const responsiveConfig = useResponsiveLayout();
+  const commonStyles = getCommonResponsiveStyles(responsiveConfig);
+  const { deviceType, spacing } = responsiveConfig;
 
   const {
     categories,
@@ -33,8 +42,10 @@ export default function HomeScreen() {
     loadMoreData,
     selectCategory,
     refreshPlayRecords,
+    clearError,
   } = useHomeStore();
   const { isLoggedIn, logout } = useAuthStore();
+  const apiConfigStatus = useApiConfig();
 
   useFocusEffect(
     useCallback(() => {
@@ -42,22 +53,89 @@ export default function HomeScreen() {
     }, [refreshPlayRecords])
   );
 
+    // 双击返回退出逻辑（只限当前页面）
+  const backPressTimeRef = useRef<number | null>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+    const handleBackPress = () => {
+      const now = Date.now();
+
+      // 如果还没按过返回键，或距离上次超过2秒
+      if (!backPressTimeRef.current || now - backPressTimeRef.current > 2000) {
+        backPressTimeRef.current = now;
+        ToastAndroid.show("再按一次返回键退出", ToastAndroid.SHORT);
+        return true; // 拦截返回事件，不退出
+      }
+
+      // 两次返回键间隔小于2秒，退出应用
+      BackHandler.exitApp();
+      return true;
+    };
+
+    // 仅限 Android 平台启用此功能
+    if (Platform.OS === "android") {
+      const backHandler = BackHandler.addEventListener("hardwareBackPress", handleBackPress);
+
+      // 返回首页时重置状态
+      return () => {
+        backHandler.remove();
+        backPressTimeRef.current = null;
+      };
+    }
+  }, [])
+);
+
+  // 统一的数据获取逻辑
   useEffect(() => {
-    if (selectedCategory && !selectedCategory.tags) {
-      fetchInitialData();
-    } else if (selectedCategory?.tags && !selectedCategory.tag) {
-      // Category with tags selected, but no specific tag yet. Select the first one.
+    if (!selectedCategory) return;
+
+    // 如果是容器分类且没有选择标签，设置默认标签
+    if (selectedCategory.tags && !selectedCategory.tag) {
       const defaultTag = selectedCategory.tags[0];
       setSelectedTag(defaultTag);
       selectCategory({ ...selectedCategory, tag: defaultTag });
+      return;
     }
-  }, [selectedCategory, fetchInitialData, selectCategory]);
+
+    // 只有在API配置完成且分类有效时才获取数据
+    if (apiConfigStatus.isConfigured && !apiConfigStatus.needsConfiguration) {
+      // 对于有标签的分类，需要确保有标签才获取数据
+      if (selectedCategory.tags && selectedCategory.tag) {
+        fetchInitialData();
+      }
+      // 对于无标签的分类，直接获取数据
+      else if (!selectedCategory.tags) {
+        fetchInitialData();
+      }
+    }
+  }, [
+    selectedCategory,
+    selectedCategory?.tag,
+    apiConfigStatus.isConfigured,
+    apiConfigStatus.needsConfiguration,
+    fetchInitialData,
+    selectCategory,
+  ]);
+
+  // 清除错误状态的逻辑
+  useEffect(() => {
+    if (apiConfigStatus.needsConfiguration && error) {
+      clearError();
+    }
+  }, [apiConfigStatus.needsConfiguration, error, clearError]);
 
   useEffect(() => {
-    if (selectedCategory && selectedCategory.tag) {
-      fetchInitialData();
+    if (!loading && contentData.length > 0) {
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    } else if (loading) {
+      fadeAnim.setValue(0);
     }
-  }, [fetchInitialData, selectedCategory, selectedCategory.tag]);
+  }, [loading, contentData.length, fadeAnim]);
 
   const handleCategorySelect = (category: Category) => {
     setSelectedTag(null);
@@ -67,7 +145,6 @@ export default function HomeScreen() {
   const handleTagSelect = (tag: string) => {
     setSelectedTag(tag);
     if (selectedCategory) {
-      // Create a new category object with the selected tag
       const categoryWithTag = { ...selectedCategory, tag: tag };
       selectCategory(categoryWithTag);
     }
@@ -80,30 +157,28 @@ export default function HomeScreen() {
         text={item.title}
         onPress={() => handleCategorySelect(item)}
         isSelected={isSelected}
-        style={styles.categoryButton}
-        textStyle={styles.categoryText}
+        style={dynamicStyles.categoryButton}
+        textStyle={dynamicStyles.categoryText}
       />
     );
   };
 
-  const renderContentItem = ({ item, index }: { item: RowItem; index: number }) => (
-    <View style={styles.itemContainer}>
-      <VideoCard
-        id={item.id}
-        source={item.source}
-        title={item.title}
-        poster={item.poster}
-        year={item.year}
-        rate={item.rate}
-        progress={item.progress}
-        playTime={item.play_time}
-        episodeIndex={item.episodeIndex}
-        sourceName={item.sourceName}
-        totalEpisodes={item.totalEpisodes}
-        api={api}
-        onRecordDeleted={fetchInitialData} // For "Recent Plays"
-      />
-    </View>
+  const renderContentItem = ({ item }: { item: RowItem; index: number }) => (
+    <VideoCard
+      id={item.id}
+      source={item.source}
+      title={item.title}
+      poster={item.poster}
+      year={item.year}
+      rate={item.rate}
+      progress={item.progress}
+      playTime={item.play_time}
+      episodeIndex={item.episodeIndex}
+      sourceName={item.sourceName}
+      totalEpisodes={item.totalEpisodes}
+      api={api}
+      onRecordDeleted={fetchInitialData}
+    />
   );
 
   const renderFooter = () => {
@@ -111,67 +186,132 @@ export default function HomeScreen() {
     return <ActivityIndicator style={{ marginVertical: 20 }} size="large" />;
   };
 
-  return (
-    <ThemedView style={styles.container}>
-      {/* 顶部导航 */}
-      <View style={styles.headerContainer}>
+  // 检查是否需要显示API配置提示
+  const shouldShowApiConfig = apiConfigStatus.needsConfiguration && selectedCategory && !selectedCategory.tags;
+
+  // TV端和平板端的顶部导航
+  const renderHeader = () => {
+    if (deviceType === "mobile") {
+      // 移动端不显示顶部导航，使用底部Tab导航
+      return null;
+    }
+
+    return (
+      <View style={dynamicStyles.headerContainer}>
         <View style={{ flexDirection: "row", alignItems: "center" }}>
-          <ThemedText style={styles.headerTitle}>首页</ThemedText>
-          <Pressable style={{ marginLeft: 20 }} onPress={() => router.push("/live")}>
+          <ThemedText style={dynamicStyles.headerTitle}>首页</ThemedText>
+          <Pressable android_ripple={Platform.isTV || deviceType !== 'tv'? { color: 'transparent' } : { color: Colors.dark.link }} style={{ marginLeft: 20 }} onPress={() => router.push("/live")}>
             {({ focused }) => (
-              <ThemedText style={[styles.headerTitle, { color: focused ? "white" : "grey" }]}>直播</ThemedText>
+              <ThemedText style={[dynamicStyles.headerTitle, { color: focused ? "white" : "grey" }]}>直播</ThemedText>
             )}
           </Pressable>
         </View>
-        <View style={styles.rightHeaderButtons}>
-          <StyledButton style={styles.searchButton} onPress={() => router.push("/favorites")} variant="ghost">
+        <View style={dynamicStyles.rightHeaderButtons}>
+          <StyledButton style={dynamicStyles.iconButton} onPress={() => router.push("/favorites")} variant="ghost">
             <Heart color={colorScheme === "dark" ? "white" : "black"} size={24} />
           </StyledButton>
           <StyledButton
-            style={styles.searchButton}
+            style={dynamicStyles.iconButton}
             onPress={() => router.push({ pathname: "/search" })}
             variant="ghost"
           >
             <Search color={colorScheme === "dark" ? "white" : "black"} size={24} />
           </StyledButton>
-          <StyledButton style={styles.searchButton} onPress={() => router.push("/settings")} variant="ghost">
+          <StyledButton style={dynamicStyles.iconButton} onPress={() => router.push("/settings")} variant="ghost">
             <Settings color={colorScheme === "dark" ? "white" : "black"} size={24} />
           </StyledButton>
           {isLoggedIn && (
-            <StyledButton style={styles.searchButton} onPress={logout} variant="ghost">
+            <StyledButton style={dynamicStyles.iconButton} onPress={logout} variant="ghost">
               <LogOut color={colorScheme === "dark" ? "white" : "black"} size={24} />
             </StyledButton>
           )}
         </View>
       </View>
+    );
+  };
+
+  // 动态样式
+  const dynamicStyles = StyleSheet.create({
+    container: {
+      flex: 1,
+      paddingTop: deviceType === "mobile" ? insets.top : deviceType === "tablet" ? insets.top + 20 : 40,
+    },
+    headerContainer: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingHorizontal: spacing * 1.5,
+      marginBottom: spacing,
+    },
+    headerTitle: {
+      fontSize: deviceType === "mobile" ? 24 : deviceType === "tablet" ? 28 : 32,
+      fontWeight: "bold",
+      paddingTop: 16,
+    },
+    rightHeaderButtons: {
+      flexDirection: "row",
+      alignItems: "center",
+    },
+    iconButton: {
+      borderRadius: 30,
+      marginLeft: spacing / 2,
+    },
+    categoryContainer: {
+      paddingBottom: spacing / 2,
+    },
+    categoryListContent: {
+      paddingHorizontal: spacing,
+    },
+    categoryButton: {
+      paddingHorizontal: deviceType === "tv" ? spacing / 4 : spacing / 2,
+      paddingVertical: spacing / 2,
+      borderRadius: deviceType === "mobile" ? 6 : 8,
+      marginHorizontal: deviceType === "tv" ? spacing / 4 : spacing / 2, // TV端使用更小的间距
+    },
+    categoryText: {
+      fontSize: deviceType === "mobile" ? 14 : 16,
+      fontWeight: "500",
+    },
+    contentContainer: {
+      flex: 1,
+    },
+  });
+
+  const content = (
+    <ThemedView style={[commonStyles.container, dynamicStyles.container]}>
+      {/* 状态栏 */}
+      {deviceType === "mobile" && <StatusBar barStyle="light-content" />}
+
+      {/* 顶部导航 */}
+      {renderHeader()}
 
       {/* 分类选择器 */}
-      <View style={styles.categoryContainer}>
+      <View style={dynamicStyles.categoryContainer}>
         <FlatList
           data={categories}
           renderItem={renderCategory}
           keyExtractor={(item) => item.title}
           horizontal
           showsHorizontalScrollIndicator={false}
-          contentContainerStyle={styles.categoryListContent}
+          contentContainerStyle={dynamicStyles.categoryListContent}
         />
       </View>
 
-      {/* Sub-category Tags */}
+      {/* 子分类标签 */}
       {selectedCategory && selectedCategory.tags && (
-        <View style={styles.categoryContainer}>
+        <View style={dynamicStyles.categoryContainer}>
           <FlatList
             data={selectedCategory.tags}
             renderItem={({ item, index }) => {
               const isSelected = selectedTag === item;
               return (
                 <StyledButton
-                  hasTVPreferredFocus={index === 0} // Focus the first tag by default
+                  hasTVPreferredFocus={index === 0}
                   text={item}
                   onPress={() => handleTagSelect(item)}
                   isSelected={isSelected}
-                  style={styles.categoryButton}
-                  textStyle={styles.categoryText}
+                  style={dynamicStyles.categoryButton}
+                  textStyle={dynamicStyles.categoryText}
                   variant="ghost"
                 />
               );
@@ -179,95 +319,63 @@ export default function HomeScreen() {
             keyExtractor={(item) => item}
             horizontal
             showsHorizontalScrollIndicator={false}
-            contentContainerStyle={styles.categoryListContent}
+            contentContainerStyle={dynamicStyles.categoryListContent}
           />
         </View>
       )}
 
       {/* 内容网格 */}
-      {loading ? (
-        <View style={styles.centerContainer}>
+      {shouldShowApiConfig ? (
+        <View style={commonStyles.center}>
+          <ThemedText type="subtitle" style={{ padding: spacing, textAlign: "center" }}>
+            {getApiConfigErrorMessage(apiConfigStatus)}
+          </ThemedText>
+        </View>
+      ) : apiConfigStatus.isValidating ? (
+        <View style={commonStyles.center}>
+          <ActivityIndicator size="large" />
+          <ThemedText type="subtitle" style={{ padding: spacing, textAlign: "center" }}>
+            正在验证服务器配置...
+          </ThemedText>
+        </View>
+      ) : apiConfigStatus.error && !apiConfigStatus.isValid ? (
+        <View style={commonStyles.center}>
+          <ThemedText type="subtitle" style={{ padding: spacing, textAlign: "center" }}>
+            {apiConfigStatus.error}
+          </ThemedText>
+        </View>
+      ) : loading ? (
+        <View style={commonStyles.center}>
           <ActivityIndicator size="large" />
         </View>
       ) : error ? (
-        <View style={styles.centerContainer}>
-          <ThemedText type="subtitle" style={{ padding: 10 }}>
+        <View style={commonStyles.center}>
+          <ThemedText type="subtitle" style={{ padding: spacing }}>
             {error}
           </ThemedText>
         </View>
       ) : (
-        <CustomScrollView
-          data={contentData}
-          renderItem={renderContentItem}
-          numColumns={NUM_COLUMNS}
-          loading={loading}
-          loadingMore={loadingMore}
-          error={error}
-          onEndReached={loadMoreData}
-          loadMoreThreshold={LOAD_MORE_THRESHOLD}
-          emptyMessage={selectedCategory?.tags ? "请选择一个子分类" : "该分类下暂无内容"}
-          ListFooterComponent={renderFooter}
-        />
+        <Animated.View style={[dynamicStyles.contentContainer, { opacity: fadeAnim }]}>
+          <CustomScrollView
+            data={contentData}
+            renderItem={renderContentItem}
+            loading={loading}
+            loadingMore={loadingMore}
+            error={error}
+            onEndReached={loadMoreData}
+            loadMoreThreshold={LOAD_MORE_THRESHOLD}
+            emptyMessage={selectedCategory?.tags ? "请选择一个子分类" : "该分类下暂无内容"}
+            ListFooterComponent={renderFooter}
+          />
+        </Animated.View>
       )}
     </ThemedView>
   );
-}
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingTop: 40,
-  },
-  centerContainer: {
-    flex: 1,
-    paddingTop: 20,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  // Header
-  headerContainer: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingHorizontal: 24,
-    marginBottom: 10,
-  },
-  headerTitle: {
-    fontSize: 32,
-    fontWeight: "bold",
-    paddingTop: 16,
-  },
-  rightHeaderButtons: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  searchButton: {
-    borderRadius: 30,
-  },
-  // Category Selector
-  categoryContainer: {
-    paddingBottom: 6,
-  },
-  categoryListContent: {
-    paddingHorizontal: 16,
-  },
-  categoryButton: {
-    paddingHorizontal: 2,
-    paddingVertical: 6,
-    borderRadius: 8,
-    marginHorizontal: 6,
-  },
-  categoryText: {
-    fontSize: 16,
-    fontWeight: "500",
-  },
-  // Content Grid
-  listContent: {
-    paddingHorizontal: 16,
-    paddingBottom: 20,
-  },
-  itemContainer: {
-    margin: 8,
-    alignItems: "center",
-  },
-});
+  // 根据设备类型决定是否包装在响应式导航中
+  if (deviceType === "tv") {
+    return content;
+  }
+
+  return <ResponsiveNavigation>{content}</ResponsiveNavigation>;
+}

app/live.tsx

@@ -5,9 +5,20 @@ import { fetchAndParseM3u, getPlayableUrl, Channel } from "@/services/m3u";
 import { ThemedView } from "@/components/ThemedView";
 import { StyledButton } from "@/components/StyledButton";
 import { useSettingsStore } from "@/stores/settingsStore";
+import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
+import { getCommonResponsiveStyles } from "@/utils/ResponsiveStyles";
+import ResponsiveNavigation from "@/components/navigation/ResponsiveNavigation";
+import ResponsiveHeader from "@/components/navigation/ResponsiveHeader";
+import { DeviceUtils } from "@/utils/DeviceUtils";
 
 export default function LiveScreen() {
   const { m3uUrl } = useSettingsStore();
+  
+  // 响应式布局配置
+  const responsiveConfig = useResponsiveLayout();
+  const commonStyles = getCommonResponsiveStyles(responsiveConfig);
+  const { deviceType, spacing } = responsiveConfig;
+
   const [channels, setChannels] = useState<Channel[]>([]);
   const [groupedChannels, setGroupedChannels] = useState<Record<string, Channel[]>>({});
   const [channelGroups, setChannelGroups] = useState<string[]>([]);
@@ -80,30 +91,38 @@ export default function LiveScreen() {
 
   const handleTVEvent = useCallback(
     (event: HWEvent) => {
+      if (deviceType !== 'tv') return;
       if (isChannelListVisible) return;
       if (event.eventType === "down") setIsChannelListVisible(true);
       else if (event.eventType === "left") changeChannel("prev");
       else if (event.eventType === "right") changeChannel("next");
     },
-    [changeChannel, isChannelListVisible]
+    [changeChannel, isChannelListVisible, deviceType]
   );
 
-  useTVEventHandler(handleTVEvent);
+  useTVEventHandler(deviceType === 'tv' ? handleTVEvent : () => {});
 
-  return (
-    <ThemedView style={styles.container}>
-      <LivePlayer streamUrl={selectedChannelUrl} channelTitle={channelTitle} onPlaybackStatusUpdate={() => {}} />
+  // 动态样式
+  const dynamicStyles = createResponsiveStyles(deviceType, spacing);
+
+  const renderLiveContent = () => (
+    <>
+      <LivePlayer 
+        streamUrl={selectedChannelUrl} 
+        channelTitle={channelTitle} 
+        onPlaybackStatusUpdate={() => {}} 
+      />
       <Modal
         animationType="slide"
         transparent={true}
         visible={isChannelListVisible}
         onRequestClose={() => setIsChannelListVisible(false)}
       >
-        <View style={styles.modalContainer}>
-          <View style={styles.modalContent}>
-            <Text style={styles.modalTitle}>选择频道</Text>
-            <View style={styles.listContainer}>
-              <View style={styles.groupColumn}>
+        <View style={dynamicStyles.modalContainer}>
+          <View style={dynamicStyles.modalContent}>
+            <Text style={dynamicStyles.modalTitle}>选择频道</Text>
+            <View style={dynamicStyles.listContainer}>
+              <View style={dynamicStyles.groupColumn}>
                 <FlatList
                   data={channelGroups}
                   keyExtractor={(item, index) => `group-${item}-${index}`}
@@ -112,13 +131,13 @@ export default function LiveScreen() {
                       text={item}
                       onPress={() => setSelectedGroup(item)}
                       isSelected={selectedGroup === item}
-                      style={styles.groupButton}
-                      textStyle={styles.groupButtonText}
+                      style={dynamicStyles.groupButton}
+                      textStyle={dynamicStyles.groupButtonText}
                     />
                   )}
                 />
               </View>
-              <View style={styles.channelColumn}>
+              <View style={dynamicStyles.channelColumn}>
                 {isLoading ? (
                   <ActivityIndicator size="large" />
                 ) : (
@@ -131,8 +150,8 @@ export default function LiveScreen() {
                         onPress={() => handleSelectChannel(item)}
                         isSelected={channels[currentChannelIndex]?.id === item.id}
                         hasTVPreferredFocus={channels[currentChannelIndex]?.id === item.id}
-                        style={styles.channelItem}
-                        textStyle={styles.channelItemText}
+                        style={dynamicStyles.channelItem}
+                        textStyle={dynamicStyles.channelItemText}
                       />
                     )}
                   />
@@ -142,68 +161,86 @@ export default function LiveScreen() {
           </View>
         </View>
       </Modal>
+    </>
+  );
+
+  const content = (
+    <ThemedView style={[commonStyles.container, dynamicStyles.container]}>
+      {renderLiveContent()}
     </ThemedView>
   );
+
+  // 根据设备类型决定是否包装在响应式导航中
+  if (deviceType === 'tv') {
+    return content;
+  }
+
+  return (
+    <ResponsiveNavigation>
+      <ResponsiveHeader title="直播" showBackButton />
+      {content}
+    </ResponsiveNavigation>
+  );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  loadingOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  modalContainer: {
-    flex: 1,
-    flexDirection: "row",
-    justifyContent: "flex-end",
-    backgroundColor: "transparent",
-  },
-  modalContent: {
-    width: 450,
-    height: "100%",
-    backgroundColor: "rgba(0, 0, 0, 0.85)",
-    padding: 15,
-  },
-  modalTitle: {
-    color: "white",
-    marginBottom: 10,
-    textAlign: "center",
-    fontSize: 16,
-    fontWeight: "bold",
-  },
-  listContainer: {
-    flex: 1,
-    flexDirection: "row",
-  },
-  groupColumn: {
-    flex: 1,
-    marginRight: 10,
-  },
-  channelColumn: {
-    flex: 2,
-  },
-  groupButton: {
-    paddingVertical: 8,
-    paddingHorizontal: 4,
-    marginVertical: 4,
-    paddingLeft: 10,
-    paddingRight: 10,
-  },
-  groupButtonText: {
-    fontSize: 13,
-  },
-  channelItem: {
-    paddingVertical: 6,
-    paddingHorizontal: 4,
-    marginVertical: 3,
-    paddingLeft: 16,
-    paddingRight: 16,
-  },
-  channelItemText: {
-    fontSize: 12,
-  },
-});
+const createResponsiveStyles = (deviceType: string, spacing: number) => {
+  const isMobile = deviceType === 'mobile';
+  const isTablet = deviceType === 'tablet';
+  const minTouchTarget = DeviceUtils.getMinTouchTargetSize();
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    modalContainer: {
+      flex: 1,
+      flexDirection: "row",
+      justifyContent: isMobile ? "center" : "flex-end",
+      backgroundColor: "transparent",
+    },
+    modalContent: {
+      width: isMobile ? '90%' : isTablet ? 400 : 450,
+      height: "100%",
+      backgroundColor: "rgba(0, 0, 0, 0.85)",
+      padding: spacing,
+    },
+    modalTitle: {
+      color: "white",
+      marginBottom: spacing / 2,
+      textAlign: "center",
+      fontSize: isMobile ? 18 : 16,
+      fontWeight: "bold",
+    },
+    listContainer: {
+      flex: 1,
+      flexDirection: isMobile ? "column" : "row",
+    },
+    groupColumn: {
+      flex: isMobile ? 0 : 1,
+      marginRight: isMobile ? 0 : spacing / 2,
+      marginBottom: isMobile ? spacing : 0,
+      maxHeight: isMobile ? 120 : undefined,
+    },
+    channelColumn: {
+      flex: isMobile ? 1 : 2,
+    },
+    groupButton: {
+      paddingVertical: isMobile ? minTouchTarget / 4 : 8,
+      paddingHorizontal: spacing / 2,
+      marginVertical: isMobile ? 2 : 4,
+      minHeight: isMobile ? minTouchTarget * 0.7 : undefined,
+    },
+    groupButtonText: {
+      fontSize: isMobile ? 14 : 13,
+    },
+    channelItem: {
+      paddingVertical: isMobile ? minTouchTarget / 5 : 6,
+      paddingHorizontal: spacing,
+      marginVertical: isMobile ? 2 : 3,
+      minHeight: isMobile ? minTouchTarget * 0.8 : undefined,
+    },
+    channelItemText: {
+      fontSize: isMobile ? 14 : 12,
+    },
+  });
+};

app/play.tsx

@@ -1,12 +1,13 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useCallback, memo, useMemo } from "react";
 import { StyleSheet, TouchableOpacity, BackHandler, AppState, AppStateStatus, View } from "react-native";
 import { useLocalSearchParams, useRouter } from "expo-router";
-import { Video, ResizeMode } from "expo-av";
+import { Video } from "expo-av";
 import { useKeepAwake } from "expo-keep-awake";
 import { ThemedView } from "@/components/ThemedView";
 import { PlayerControls } from "@/components/PlayerControls";
 import { EpisodeSelectionModal } from "@/components/EpisodeSelectionModal";
 import { SourceSelectionModal } from "@/components/SourceSelectionModal";
+import { SpeedSelectionModal } from "@/components/SpeedSelectionModal";
 import { SeekingBar } from "@/components/SeekingBar";
 // import { NextEpisodeOverlay } from "@/components/NextEpisodeOverlay";
 import VideoLoadingAnimation from "@/components/VideoLoadingAnimation";
@@ -14,11 +15,68 @@ import useDetailStore from "@/stores/detailStore";
 import { useTVRemoteHandler } from "@/hooks/useTVRemoteHandler";
 import Toast from "react-native-toast-message";
 import usePlayerStore, { selectCurrentEpisode } from "@/stores/playerStore";
+import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
+import { useVideoHandlers } from "@/hooks/useVideoHandlers";
+import Logger from '@/utils/Logger';
+
+const logger = Logger.withTag('PlayScreen');
+
+// 优化的加载动画组件
+const LoadingContainer = memo(
+  ({ style, currentEpisode }: { style: any; currentEpisode: { url: string; title: string } | undefined }) => {
+    logger.info(
+      `[PERF] Video component NOT rendered - waiting for valid URL. currentEpisode: ${!!currentEpisode}, url: ${
+        currentEpisode?.url ? "exists" : "missing"
+      }`
+    );
+    return (
+      <View style={style}>
+        <VideoLoadingAnimation showProgressBar />
+      </View>
+    );
+  }
+);
+
+LoadingContainer.displayName = "LoadingContainer";
+
+// 移到组件外部避免重复创建
+const createResponsiveStyles = (deviceType: string) => {
+  const isMobile = deviceType === "mobile";
+  const isTablet = deviceType === "tablet";
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: "black",
+      // 移动端和平板端可能需要状态栏处理
+      ...(isMobile || isTablet ? { paddingTop: 0 } : {}),
+    },
+    videoContainer: {
+      ...StyleSheet.absoluteFillObject,
+      // 为触摸设备添加更多的交互区域
+      ...(isMobile || isTablet ? { zIndex: 1 } : {}),
+    },
+    videoPlayer: {
+      ...StyleSheet.absoluteFillObject,
+    },
+    loadingContainer: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: "rgba(0, 0, 0, 0.8)",
+      justifyContent: "center",
+      alignItems: "center",
+      zIndex: 10,
+    },
+  });
+};
 
 export default function PlayScreen() {
   const videoRef = useRef<Video>(null);
   const router = useRouter();
   useKeepAwake();
+
+  // 响应式布局配置
+  const { deviceType } = useResponsiveLayout();
+
   const {
     episodeIndex: episodeIndexStr,
     position: positionStr,
@@ -45,6 +103,7 @@ export default function PlayScreen() {
     // showNextEpisodeOverlay,
     initialPosition,
     introEndTime,
+    playbackRate,
     setVideoRef,
     handlePlaybackStatusUpdate,
     setShowControls,
@@ -54,17 +113,54 @@ export default function PlayScreen() {
   } = usePlayerStore();
   const currentEpisode = usePlayerStore(selectCurrentEpisode);
 
+  // 使用Video事件处理hook
+  const { videoProps } = useVideoHandlers({
+    videoRef,
+    currentEpisode,
+    initialPosition,
+    introEndTime,
+    playbackRate,
+    handlePlaybackStatusUpdate,
+    deviceType,
+    detail: detail || undefined,
+  });
+
+  // TV遥控器处理 - 总是调用hook，但根据设备类型决定是否使用结果
+  const tvRemoteHandler = useTVRemoteHandler();
+
+  // 优化的动态样式 - 使用useMemo避免重复计算
+  const dynamicStyles = useMemo(() => createResponsiveStyles(deviceType), [deviceType]);
+
   useEffect(() => {
+    const perfStart = performance.now();
+    logger.info(`[PERF] PlayScreen useEffect START - source: ${source}, id: ${id}, title: ${title}`);
+
     setVideoRef(videoRef);
     if (source && id && title) {
+      logger.info(`[PERF] Calling loadVideo with episodeIndex: ${episodeIndex}, position: ${position}`);
       loadVideo({ source, id, episodeIndex, position, title });
+    } else {
+      logger.info(`[PERF] Missing required params - source: ${!!source}, id: ${!!id}, title: ${!!title}`);
     }
 
+    const perfEnd = performance.now();
+    logger.info(`[PERF] PlayScreen useEffect END - took ${(perfEnd - perfStart).toFixed(2)}ms`);
+
     return () => {
+      logger.info(`[PERF] PlayScreen unmounting - calling reset()`);
       reset(); // Reset state when component unmounts
     };
   }, [episodeIndex, source, position, setVideoRef, reset, loadVideo, id, title]);
 
+  // 优化的屏幕点击处理
+  const onScreenPress = useCallback(() => {
+    if (deviceType === "tv") {
+      tvRemoteHandler.onScreenPress();
+    } else {
+      setShowControls(!showControls);
+    }
+  }, [deviceType, tvRemoteHandler, setShowControls, showControls]);
+
   useEffect(() => {
     const handleAppStateChange = (nextAppState: AppStateStatus) => {
       if (nextAppState === "background" || nextAppState === "inactive") {
@@ -79,8 +175,6 @@ export default function PlayScreen() {
     };
   }, []);
 
-  const { onScreenPress } = useTVRemoteHandler();
-
   useEffect(() => {
     const backAction = () => {
       if (showControls) {
@@ -120,33 +214,29 @@ export default function PlayScreen() {
   }
 
   return (
-    <ThemedView focusable style={styles.container}>
-      <TouchableOpacity activeOpacity={1} style={styles.videoContainer} onPress={onScreenPress}>
-        <Video
-          ref={videoRef}
-          style={styles.videoPlayer}
-          source={{ uri: currentEpisode?.url || "" }}
-          posterSource={{ uri: detail?.poster ?? "" }}
-          resizeMode={ResizeMode.CONTAIN}
-          onPlaybackStatusUpdate={handlePlaybackStatusUpdate}
-          onLoad={() => {
-            const jumpPosition = initialPosition || introEndTime || 0;
-            if (jumpPosition > 0) {
-              videoRef.current?.setPositionAsync(jumpPosition);
-            }
-            usePlayerStore.setState({ isLoading: false });
-          }}
-          onLoadStart={() => usePlayerStore.setState({ isLoading: true })}
-          useNativeControls={false}
-          shouldPlay
-        />
+    <ThemedView focusable style={dynamicStyles.container}>
+      <TouchableOpacity
+        activeOpacity={1}
+        style={dynamicStyles.videoContainer}
+        onPress={onScreenPress}
+        disabled={deviceType !== "tv" && showControls} // 移动端和平板端在显示控制条时禁用触摸
+      >
+        {/* 条件渲染Video组件：只有在有有效URL时才渲染 */}
+        {currentEpisode?.url ? (
+          <Video ref={videoRef} style={dynamicStyles.videoPlayer} {...videoProps} />
+        ) : (
+          <LoadingContainer style={dynamicStyles.loadingContainer} currentEpisode={currentEpisode} />
+        )}
 
-        {showControls && <PlayerControls showControls={showControls} setShowControls={setShowControls} />}
+        {showControls && deviceType === "tv" && (
+          <PlayerControls showControls={showControls} setShowControls={setShowControls} />
+        )}
 
         <SeekingBar />
 
-        {isLoading && (
-          <View style={styles.videoContainer}>
+        {/* 只在Video组件存在且正在加载时显示加载动画覆盖层 */}
+        {currentEpisode?.url && isLoading && (
+          <View style={dynamicStyles.loadingContainer}>
             <VideoLoadingAnimation showProgressBar />
           </View>
         )}
@@ -156,17 +246,7 @@ export default function PlayScreen() {
 
       <EpisodeSelectionModal />
       <SourceSelectionModal />
+      <SpeedSelectionModal />
     </ThemedView>
   );
 }
-
-const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: "black" },
-  centered: { flex: 1, justifyContent: "center", alignItems: "center" },
-  videoContainer: {
-    ...StyleSheet.absoluteFillObject,
-  },
-  videoPlayer: {
-    ...StyleSheet.absoluteFillObject,
-  },
-});

app/search.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useRef, useEffect } from "react";
-import { View, TextInput, StyleSheet, Alert, Keyboard, TouchableOpacity, Pressable } from "react-native";
+import { View, TextInput, StyleSheet, Alert, Keyboard, TouchableOpacity } from "react-native";
 import { ThemedView } from "@/components/ThemedView";
 import { ThemedText } from "@/components/ThemedText";
-import VideoCard from "@/components/VideoCard.tv";
+import VideoCard from "@/components/VideoCard";
 import VideoLoadingAnimation from "@/components/VideoLoadingAnimation";
 import { api, SearchResult } from "@/services/api";
 import { Search, QrCode } from "lucide-react-native";
@@ -13,6 +13,14 @@ import { useSettingsStore } from "@/stores/settingsStore";
 import { useRouter } from "expo-router";
 import { Colors } from "@/constants/Colors";
 import CustomScrollView from "@/components/CustomScrollView";
+import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
+import { getCommonResponsiveStyles } from "@/utils/ResponsiveStyles";
+import ResponsiveNavigation from "@/components/navigation/ResponsiveNavigation";
+import ResponsiveHeader from "@/components/navigation/ResponsiveHeader";
+import { DeviceUtils } from "@/utils/DeviceUtils";
+import Logger from '@/utils/Logger';
+
+const logger = Logger.withTag('SearchScreen');
 
 export default function SearchScreen() {
   const [keyword, setKeyword] = useState("");
@@ -20,21 +28,26 @@ export default function SearchScreen() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const textInputRef = useRef<TextInput>(null);
-  const colorScheme = "dark"; // Replace with useColorScheme() if needed
   const [isInputFocused, setIsInputFocused] = useState(false);
-  const { showModal: showRemoteModal, lastMessage } = useRemoteControlStore();
+  const { showModal: showRemoteModal, lastMessage, targetPage, clearMessage } = useRemoteControlStore();
   const { remoteInputEnabled } = useSettingsStore();
   const router = useRouter();
 
+  // 响应式布局配置
+  const responsiveConfig = useResponsiveLayout();
+  const commonStyles = getCommonResponsiveStyles(responsiveConfig);
+  const { deviceType, spacing } = responsiveConfig;
+
   useEffect(() => {
-    if (lastMessage) {
-      console.log("Received remote input:", lastMessage);
+    if (lastMessage && targetPage === 'search') {
+      logger.debug("Received remote input:", lastMessage);
       const realMessage = lastMessage.split("_")[0];
       setKeyword(realMessage);
       handleSearch(realMessage);
+      clearMessage(); // Clear the message after processing
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lastMessage]);
+  }, [lastMessage, targetPage]);
 
   // useEffect(() => {
   //   // Focus the text input when the screen loads
@@ -62,7 +75,7 @@ export default function SearchScreen() {
       }
     } catch (err) {
       setError("搜索失败，请稍后重试。");
-      console.info("Search failed:", err);
+      logger.info("Search failed:", err);
     } finally {
       setLoading(false);
     }
@@ -78,10 +91,10 @@ export default function SearchScreen() {
       ]);
       return;
     }
-    showRemoteModal();
+    showRemoteModal('search');
   };
 
-  const renderItem = ({ item, index }: { item: SearchResult; index: number }) => (
+  const renderItem = ({ item }: { item: SearchResult; index: number }) => (
     <VideoCard
       id={item.id.toString()}
       source={item.source}
@@ -93,110 +106,134 @@ export default function SearchScreen() {
     />
   );
 
-  return (
-    <ThemedView style={styles.container}>
-      <View style={styles.searchContainer}>
+  // 动态样式
+  const dynamicStyles = createResponsiveStyles(deviceType, spacing);
+
+  const renderSearchContent = () => (
+    <>
+      <View style={dynamicStyles.searchContainer}>
         <TouchableOpacity
           activeOpacity={1}
           style={[
-            styles.input,
+            dynamicStyles.inputContainer,
             {
-              backgroundColor: colorScheme === "dark" ? "#2c2c2e" : "#f0f0f0",
               borderColor: isInputFocused ? Colors.dark.primary : "transparent",
-              borderWidth: 2,
             },
           ]}
           onPress={() => textInputRef.current?.focus()}
-          onFocus={() => setIsInputFocused(true)}
-          onBlur={() => setIsInputFocused(false)}
         >
           <TextInput
             ref={textInputRef}
-            style={[
-              styles.input,
-              {
-                color: colorScheme === "dark" ? "white" : "black",
-              },
-            ]}
+            style={dynamicStyles.input}
             placeholder="搜索电影、剧集..."
-            placeholderTextColor={colorScheme === "dark" ? "#888" : "#555"}
+            placeholderTextColor="#888"
             value={keyword}
             onChangeText={setKeyword}
             onSubmitEditing={onSearchPress}
+            onFocus={() => setIsInputFocused(true)}
+            onBlur={() => setIsInputFocused(false)}
             returnKeyType="search"
           />
         </TouchableOpacity>
-        <StyledButton style={styles.searchButton} onPress={onSearchPress}>
-          <Search size={24} color={colorScheme === "dark" ? "white" : "black"} />
-        </StyledButton>
-        <StyledButton style={styles.qrButton} onPress={handleQrPress}>
-          <QrCode size={24} color={colorScheme === "dark" ? "white" : "black"} />
+        <StyledButton style={dynamicStyles.searchButton} onPress={onSearchPress}>
+          <Search size={deviceType === 'mobile' ? 20 : 24} color="white" />
         </StyledButton>
+        {deviceType !== 'mobile' && (
+          <StyledButton style={dynamicStyles.qrButton} onPress={handleQrPress}>
+            <QrCode size={deviceType === 'tv' ? 24 : 20} color="white" />
+          </StyledButton>
+        )}
       </View>
 
       {loading ? (
         <VideoLoadingAnimation showProgressBar={false} />
       ) : error ? (
-        <View style={styles.centerContainer}>
-          <ThemedText style={styles.errorText}>{error}</ThemedText>
+        <View style={[commonStyles.center, { flex: 1 }]}>
+          <ThemedText style={dynamicStyles.errorText}>{error}</ThemedText>
         </View>
       ) : (
         <CustomScrollView
           data={results}
           renderItem={renderItem}
-          numColumns={5}
           loading={loading}
           error={error}
           emptyMessage="输入关键词开始搜索"
         />
       )}
       <RemoteControlModal />
+    </>
+  );
+
+  const content = (
+    <ThemedView style={[commonStyles.container, dynamicStyles.container]}>
+      {renderSearchContent()}
     </ThemedView>
   );
+
+  // 根据设备类型决定是否包装在响应式导航中
+  if (deviceType === 'tv') {
+    return content;
+  }
+
+  return (
+    <ResponsiveNavigation>
+      <ResponsiveHeader title="搜索" showBackButton />
+      {content}
+    </ResponsiveNavigation>
+  );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingTop: 50,
-  },
-  searchContainer: {
-    flexDirection: "row",
-    paddingHorizontal: 20,
-    marginBottom: 20,
-    alignItems: "center",
-  },
-  input: {
-    flex: 1,
-    height: 50,
-    backgroundColor: "#2c2c2e", // Default for dark mode, overridden inline
-    borderRadius: 8,
-    paddingHorizontal: 15,
-    color: "white", // Default for dark mode, overridden inline
-    fontSize: 18,
-    marginRight: 10,
-    borderWidth: 2,
-    borderColor: "transparent", // Default, overridden for focus
-  },
-  searchButton: {
-    padding: 12,
-    // backgroundColor is now set dynamically
-    borderRadius: 8,
-  },
-  qrButton: {
-    padding: 12,
-    borderRadius: 8,
-    marginLeft: 10,
-  },
-  centerContainer: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  errorText: {
-    color: "red",
-  },
-  listContent: {
-    paddingHorizontal: 10,
-  },
-});
+const createResponsiveStyles = (deviceType: string, spacing: number) => {
+  const isMobile = deviceType === 'mobile';
+  const minTouchTarget = DeviceUtils.getMinTouchTargetSize();
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      paddingTop: deviceType === 'tv' ? 50 : 0,
+    },
+    searchContainer: {
+      flexDirection: "row",
+      paddingHorizontal: spacing,
+      marginBottom: spacing,
+      alignItems: "center",
+      paddingTop: isMobile ? spacing / 2 : 0,
+    },
+    inputContainer: {
+      flex: 1,
+      height: isMobile ? minTouchTarget : 50,
+      backgroundColor: "#2c2c2e",
+      borderRadius: isMobile ? 8 : 8,
+      marginRight: spacing / 2,
+      borderWidth: 2,
+      borderColor: "transparent",
+      justifyContent: "center",
+    },
+    input: {
+      flex: 1,
+      paddingHorizontal: spacing,
+      color: "white",
+      fontSize: isMobile ? 16 : 18,
+    },
+    searchButton: {
+      width: isMobile ? minTouchTarget : 50,
+      height: isMobile ? minTouchTarget : 50,
+      justifyContent: "center",
+      alignItems: "center",
+      borderRadius: isMobile ? 8 : 8,
+      marginRight: deviceType !== 'mobile' ? spacing / 2 : 0,
+    },
+    qrButton: {
+      width: isMobile ? minTouchTarget : 50,
+      height: isMobile ? minTouchTarget : 50,
+      justifyContent: "center",
+      alignItems: "center",
+      borderRadius: isMobile ? 8 : 8,
+    },
+    errorText: {
+      color: "red",
+      fontSize: isMobile ? 14 : 16,
+      textAlign: "center",
+    },
+  });
+};

app/settings.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
-import { View, StyleSheet, FlatList, Alert, KeyboardAvoidingView, Platform } from "react-native";
+import { View, StyleSheet, Alert, Platform } from "react-native";
 import { useTVEventHandler } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ThemedText } from "@/components/ThemedText";
 import { ThemedView } from "@/components/ThemedView";
 import { StyledButton } from "@/components/StyledButton";
@@ -11,13 +12,38 @@ import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import { APIConfigSection } from "@/components/settings/APIConfigSection";
 import { LiveStreamSection } from "@/components/settings/LiveStreamSection";
 import { RemoteInputSection } from "@/components/settings/RemoteInputSection";
+import { UpdateSection } from "@/components/settings/UpdateSection";
 // import { VideoSourceSection } from "@/components/settings/VideoSourceSection";
 import Toast from "react-native-toast-message";
+import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
+import { getCommonResponsiveStyles } from "@/utils/ResponsiveStyles";
+import ResponsiveNavigation from "@/components/navigation/ResponsiveNavigation";
+import ResponsiveHeader from "@/components/navigation/ResponsiveHeader";
+import { DeviceUtils } from "@/utils/DeviceUtils";
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+
+type SectionItem = {
+  component: React.ReactElement;
+  key: string;
+};
+
+/** 过滤掉 false/undefined，帮 TypeScript 推断出真正的数组元素类型 */
+function isSectionItem(
+  item: false | undefined | SectionItem
+): item is SectionItem {
+  return !!item;
+}
 
 export default function SettingsScreen() {
   const { loadSettings, saveSettings, setApiBaseUrl, setM3uUrl } = useSettingsStore();
-  const { lastMessage } = useRemoteControlStore();
+  const { lastMessage, targetPage, clearMessage } = useRemoteControlStore();
   const backgroundColor = useThemeColor({}, "background");
+  const insets = useSafeAreaInsets();
+
+  // 响应式布局配置
+  const responsiveConfig = useResponsiveLayout();
+  const commonStyles = getCommonResponsiveStyles(responsiveConfig);
+  const { deviceType, spacing } = responsiveConfig;
 
   const [hasChanges, setHasChanges] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -33,12 +59,14 @@ export default function SettingsScreen() {
   }, [loadSettings]);
 
   useEffect(() => {
-    if (lastMessage) {
+    if (lastMessage && !targetPage) {
       const realMessage = lastMessage.split("_")[0];
       handleRemoteInput(realMessage);
+      clearMessage(); // Clear the message after processing
+      markAsChanged();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lastMessage]);
+  }, [lastMessage, targetPage]);
 
   const handleRemoteInput = (message: string) => {
     // Handle remote input based on currently focused section
@@ -71,8 +99,67 @@ export default function SettingsScreen() {
     setHasChanges(true);
   };
 
-  const sections = [
-    {
+  // const sections = [
+  //   // 远程输入配置 - 仅在非手机端显示
+  //   deviceType !== "mobile" && {
+  //     component: (
+  //       <RemoteInputSection
+  //         onChanged={markAsChanged}
+  //         onFocus={() => {
+  //           setCurrentFocusIndex(0);
+  //           setCurrentSection("remote");
+  //         }}
+  //       />
+  //     ),
+  //     key: "remote",
+  //   },
+  //   {
+  //     component: (
+  //       <APIConfigSection
+  //         ref={apiSectionRef}
+  //         onChanged={markAsChanged}
+  //         hideDescription={deviceType === "mobile"}
+  //         onFocus={() => {
+  //           setCurrentFocusIndex(1);
+  //           setCurrentSection("api");
+  //         }}
+  //       />
+  //     ),
+  //     key: "api",
+  //   },
+  //   // 直播源配置 - 仅在非手机端显示
+  //   deviceType !== "mobile" && {
+  //     component: (
+  //       <LiveStreamSection
+  //         ref={liveStreamSectionRef}
+  //         onChanged={markAsChanged}
+  //         onFocus={() => {
+  //           setCurrentFocusIndex(2);
+  //           setCurrentSection("livestream");
+  //         }}
+  //       />
+  //     ),
+  //     key: "livestream",
+  //   },
+  //   // {
+  //   //   component: (
+  //   //     <VideoSourceSection
+  //   //       onChanged={markAsChanged}
+  //   //       onFocus={() => {
+  //   //         setCurrentFocusIndex(3);
+  //   //         setCurrentSection("videoSource");
+  //   //       }}
+  //   //     />
+  //   //   ),
+  //   //   key: "videoSource",
+  //   // },
+  //   Platform.OS === "android" && {
+  //     component: <UpdateSection />,
+  //     key: "update",
+  //   },
+  // ].filter(Boolean);
+  const rawSections = [
+    deviceType !== "mobile" && {
       component: (
         <RemoteInputSection
           onChanged={markAsChanged}
@@ -89,6 +176,7 @@ export default function SettingsScreen() {
         <APIConfigSection
           ref={apiSectionRef}
           onChanged={markAsChanged}
+          hideDescription={deviceType === "mobile"}
           onFocus={() => {
             setCurrentFocusIndex(1);
             setCurrentSection("api");
@@ -97,7 +185,7 @@ export default function SettingsScreen() {
       ),
       key: "api",
     },
-    {
+    deviceType !== "mobile" && {
       component: (
         <LiveStreamSection
           ref={liveStreamSectionRef}
@@ -110,23 +198,20 @@ export default function SettingsScreen() {
       ),
       key: "livestream",
     },
-    // {
-    //   component: (
-    //     <VideoSourceSection
-    //       onChanged={markAsChanged}
-    //       onFocus={() => {
-    //         setCurrentFocusIndex(3);
-    //         setCurrentSection("videoSource");
-    //       }}
-    //     />
-    //   ),
-    //   key: "videoSource",
-    // },
-  ];
+    Platform.OS === "android" && {
+      component: <UpdateSection />,
+      key: "update",
+    },
+  ] as const; // 把每个对象都当作字面量保留
+  /** 这里得到的 sections 已经是 SectionItem[]（没有 false） */
+  const sections: SectionItem[] = rawSections.filter(isSectionItem);
 
-  // TV遥控器事件处理
+
+  // TV遥控器事件处理 - 仅在TV设备上启用
   const handleTVEvent = React.useCallback(
     (event: any) => {
+      if (deviceType !== "tv") return;
+
       if (event.eventType === "down") {
         const nextIndex = Math.min(currentFocusIndex + 1, sections.length);
         setCurrentFocusIndex(nextIndex);
@@ -138,72 +223,126 @@ export default function SettingsScreen() {
         setCurrentFocusIndex(prevIndex);
       }
     },
-    [currentFocusIndex, sections.length]
+    [currentFocusIndex, sections.length, deviceType]
   );
 
-  useTVEventHandler(handleTVEvent);
+  useTVEventHandler(deviceType === "tv" ? handleTVEvent : () => { });
 
-  return (
-    <KeyboardAvoidingView style={{ flex: 1, backgroundColor }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
-      <ThemedView style={styles.container}>
-        <View style={styles.header}>
-          <ThemedText style={styles.title}>设置</ThemedText>
-        </View>
+  // 动态样式
+  const dynamicStyles = createResponsiveStyles(deviceType, spacing, insets);
 
-        <View style={styles.scrollView}>
+  const renderSettingsContent = () => (
+    // <KeyboardAvoidingView style={{ flex: 1, backgroundColor }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
+    <KeyboardAwareScrollView
+      enableOnAndroid={true}
+      extraScrollHeight={20}
+      keyboardOpeningTime={0}
+      keyboardShouldPersistTaps="always"
+      scrollEnabled={true}
+      style={{ flex: 1, backgroundColor }}
+    >
+
+      <ThemedView style={[commonStyles.container, dynamicStyles.container]}>
+        {deviceType === "tv" && (
+          <View style={dynamicStyles.header}>
+            <ThemedText style={dynamicStyles.title}>设置</ThemedText>
+          </View>
+        )}
+
+        {/* <View style={dynamicStyles.scrollView}>
           <FlatList
             data={sections}
-            renderItem={({ item }) => item.component}
-            keyExtractor={(item) => item.key}
+            renderItem={({ item }) => {
+              if (item) {
+                return item.component;
+              }
+              return null;
+            }}
+            keyExtractor={(item) => (item ? item.key : "default")}
             showsVerticalScrollIndicator={false}
+            contentContainerStyle={dynamicStyles.listContent}
           />
+        </View> */}
+        <View style={dynamicStyles.scrollView}>
+          {sections.map(item => (
+            // 必须把 key 放在最外层的 View 上
+            <View key={item.key} style={dynamicStyles.itemWrapper}>
+              {item.component}
+            </View>
+          ))}
         </View>
 
-        <View style={styles.footer}>
+        <View style={dynamicStyles.footer}>
           <StyledButton
             text={isLoading ? "保存中..." : "保存设置"}
             onPress={handleSave}
             variant="primary"
             disabled={!hasChanges || isLoading}
-            style={[styles.saveButton, (!hasChanges || isLoading) && styles.disabledButton]}
+            style={[dynamicStyles.saveButton, (!hasChanges || isLoading) && dynamicStyles.disabledButton]}
           />
         </View>
       </ThemedView>
-    </KeyboardAvoidingView>
+    </KeyboardAwareScrollView>
+    // </KeyboardAvoidingView>
+  );
+
+  // 根据设备类型决定是否包装在响应式导航中
+  if (deviceType === "tv") {
+    return renderSettingsContent();
+  }
+
+  return (
+    <ResponsiveNavigation>
+      <ResponsiveHeader title="设置" showBackButton />
+      {renderSettingsContent()}
+    </ResponsiveNavigation>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 12,
-  },
-  header: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: 10,
-  },
-  title: {
-    fontSize: 32,
-    fontWeight: "bold",
-    paddingTop: 24,
-  },
-  backButton: {
-    minWidth: 100,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  footer: {
-    paddingTop: 12,
-    alignItems: "flex-end",
-  },
-  saveButton: {
-    minHeight: 50,
-    width: 120,
-  },
-  disabledButton: {
-    opacity: 0.5,
-  },
-});
+const createResponsiveStyles = (deviceType: string, spacing: number, insets: any) => {
+  const isMobile = deviceType === "mobile";
+  const isTablet = deviceType === "tablet";
+  const isTV = deviceType === "tv";
+  const minTouchTarget = DeviceUtils.getMinTouchTargetSize();
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      padding: spacing,
+      paddingTop: isTV ? spacing * 2 : isMobile ? insets.top + spacing : insets.top + spacing * 1.5,
+    },
+    header: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: spacing,
+    },
+    title: {
+      fontSize: isMobile ? 24 : isTablet ? 28 : 32,
+      fontWeight: "bold",
+      paddingTop: spacing,
+      color: "white",
+    },
+    scrollView: {
+      flex: 1,
+    },
+    listContent: {
+      paddingBottom: spacing,
+    },
+    footer: {
+      paddingTop: spacing,
+      alignItems: isMobile ? "center" : "flex-end",
+    },
+    saveButton: {
+      minHeight: isMobile ? minTouchTarget : isTablet ? 50 : 50,
+      width: isMobile ? "100%" : isTablet ? 140 : 120,
+      maxWidth: isMobile ? 280 : undefined,
+    },
+    disabledButton: {
+      opacity: 0.5,
+    },
+    itemWrapper: {
+      marginBottom: spacing,   // 这里的 spacing 来自 useResponsiveLayout()
+    },
+  });
+};

babel.config.js

@@ -0,0 +1,15 @@
+module.exports = function (api) {
+  api.cache(true);
+  
+  const plugins = [];
+  
+  // 在生产环境移除console调用以优化性能
+  if (process.env.NODE_ENV === 'production') {
+    plugins.push('transform-remove-console');
+  }
+  
+  return {
+    presets: ['babel-preset-expo'],
+    plugins,
+  };
+};

components/CustomScrollView.tsx

@@ -1,11 +1,13 @@
-import React, { useCallback } from "react";
-import { View, StyleSheet, ScrollView, Dimensions, ActivityIndicator } from "react-native";
+import React, { useCallback, useRef, useState, useEffect } from "react";
+import { View, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity, BackHandler } from "react-native";
 import { ThemedText } from "@/components/ThemedText";
+import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
+import { getCommonResponsiveStyles } from "@/utils/ResponsiveStyles";
 
 interface CustomScrollViewProps {
   data: any[];
   renderItem: ({ item, index }: { item: any; index: number }) => React.ReactNode;
-  numColumns?: number;
+  numColumns?: number; // 如果不提供，将使用响应式默认值
   loading?: boolean;
   loadingMore?: boolean;
   error?: string | null;
@@ -15,12 +17,10 @@ interface CustomScrollViewProps {
   ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null;
 }
 
-const { width } = Dimensions.get("window");
-
 const CustomScrollView: React.FC<CustomScrollViewProps> = ({
   data,
   renderItem,
-  numColumns = 1,
+  numColumns,
   loading = false,
   loadingMore = false,
   error = null,
@@ -29,13 +29,39 @@ const CustomScrollView: React.FC<CustomScrollViewProps> = ({
   emptyMessage = "暂无内容",
   ListFooterComponent,
 }) => {
-  const ITEM_WIDTH = numColumns > 0 ? width / numColumns - 24 : width - 24;
+  const scrollViewRef = useRef<ScrollView>(null);
+  const firstCardRef = useRef<any>(null); // <--- 新增
+  const [showScrollToTop, setShowScrollToTop] = useState(false);
+  const responsiveConfig = useResponsiveLayout();
+  const commonStyles = getCommonResponsiveStyles(responsiveConfig);
+  const { deviceType } = responsiveConfig;
+
+  // 添加返回键处理逻辑
+  useEffect(() => {
+    if (deviceType === 'tv') {
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
+        if (showScrollToTop) {
+          scrollToTop();
+          return true; // 阻止默认的返回行为
+        }
+        return false; // 允许默认的返回行为
+      });
+
+      return () => backHandler.remove();
+    }
+  }, [showScrollToTop,deviceType]);
+
+  // 使用响应式列数，如果没有明确指定的话
+  const effectiveColumns = numColumns || responsiveConfig.columns;
 
   const handleScroll = useCallback(
     ({ nativeEvent }: { nativeEvent: any }) => {
       const { layoutMeasurement, contentOffset, contentSize } = nativeEvent;
       const isCloseToBottom = layoutMeasurement.height + contentOffset.y >= contentSize.height - loadMoreThreshold;
 
+      // 显示/隐藏返回顶部按钮
+      setShowScrollToTop(contentOffset.y > 200);
+
       if (isCloseToBottom && !loadingMore && onEndReached) {
         onEndReached();
       }
@@ -43,6 +69,14 @@ const CustomScrollView: React.FC<CustomScrollViewProps> = ({
     [onEndReached, loadingMore, loadMoreThreshold]
   );
 
+  const scrollToTop = () => {
+    scrollViewRef.current?.scrollTo({ y: 0, animated: true });
+    // 滚动动画结束后聚焦第一个卡片
+    setTimeout(() => {
+      firstCardRef.current?.focus();
+    }, 500); // 500ms 适配大多数动画时长
+  };
+
   const renderFooter = () => {
     if (ListFooterComponent) {
       if (React.isValidElement(ListFooterComponent)) {
@@ -61,7 +95,7 @@ const CustomScrollView: React.FC<CustomScrollViewProps> = ({
 
   if (loading) {
     return (
-      <View style={styles.centerContainer}>
+      <View style={commonStyles.center}>
         <ActivityIndicator size="large" />
       </View>
     );
@@ -69,8 +103,8 @@ const CustomScrollView: React.FC<CustomScrollViewProps> = ({
 
   if (error) {
     return (
-      <View style={styles.centerContainer}>
-        <ThemedText type="subtitle" style={{ padding: 10 }}>
+      <View style={commonStyles.center}>
+        <ThemedText type="subtitle" style={{ padding: responsiveConfig.spacing }}>
           {error}
         </ThemedText>
       </View>
@@ -79,57 +113,113 @@ const CustomScrollView: React.FC<CustomScrollViewProps> = ({
 
   if (data.length === 0) {
     return (
-      <View style={styles.centerContainer}>
+      <View style={commonStyles.center}>
         <ThemedText>{emptyMessage}</ThemedText>
       </View>
     );
   }
 
+  // 将数据按行分组
+  const groupItemsByRow = (items: any[], columns: number) => {
+    const rows = [];
+    for (let i = 0; i < items.length; i += columns) {
+      rows.push(items.slice(i, i + columns));
+    }
+    return rows;
+  };
+
+  const rows = groupItemsByRow(data, effectiveColumns);
+
+  // 动态样式
+  const dynamicStyles = StyleSheet.create({
+    listContent: {
+      paddingBottom: responsiveConfig.spacing * 2,
+      paddingHorizontal: responsiveConfig.spacing / 2,
+    },
+    rowContainer: {
+      flexDirection: "row",
+      marginBottom: responsiveConfig.spacing,
+    },
+    fullRowContainer: {
+      justifyContent: "space-around",
+      marginRight: responsiveConfig.spacing / 2,
+    },
+    partialRowContainer: {
+      justifyContent: "flex-start",
+    },
+    itemContainer: {
+      width: responsiveConfig.cardWidth,
+    },
+    itemWithMargin: {
+      width: responsiveConfig.cardWidth,
+      marginRight: responsiveConfig.spacing,
+    },
+    scrollToTopButton: {
+      position: 'absolute',
+      right: responsiveConfig.spacing,
+      bottom: responsiveConfig.spacing * 2,
+      backgroundColor: 'rgba(0, 0, 0, 0.6)',
+      padding: responsiveConfig.spacing,
+      borderRadius: responsiveConfig.spacing,
+      opacity: showScrollToTop ? 1 : 0,
+    },
+  });
+
   return (
-    <ScrollView contentContainerStyle={styles.listContent} onScroll={handleScroll} scrollEventThrottle={16}>
-      {data.length > 0 ? (
-        <>
-          {/* Render content in a grid layout */}
-          {Array.from({ length: Math.ceil(data.length / numColumns) }).map((_, rowIndex) => (
-            <View key={rowIndex} style={styles.rowContainer}>
-              {data.slice(rowIndex * numColumns, (rowIndex + 1) * numColumns).map((item, index) => (
-                <View key={index} style={[styles.itemContainer, { width: ITEM_WIDTH }]}>
-                  {renderItem({ item, index: rowIndex * numColumns + index })}
+    <View style={{ flex: 1 }}>
+      <ScrollView
+        ref={scrollViewRef}
+        contentContainerStyle={dynamicStyles.listContent}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+        showsVerticalScrollIndicator={responsiveConfig.deviceType !== 'tv'}
+      >
+        {data.length > 0 ? (
+          <>
+            {rows.map((row, rowIndex) => {
+              const isFullRow = row.length === effectiveColumns;
+              const rowStyle = isFullRow ? dynamicStyles.fullRowContainer : dynamicStyles.partialRowContainer;
+
+              return (
+                <View key={rowIndex} style={[dynamicStyles.rowContainer, rowStyle]}>
+                  {row.map((item, itemIndex) => {
+                    const actualIndex = rowIndex * effectiveColumns + itemIndex;
+                    const isLastItemInPartialRow = !isFullRow && itemIndex === row.length - 1;
+                    const itemStyle = isLastItemInPartialRow ? dynamicStyles.itemContainer : dynamicStyles.itemWithMargin;
+
+                    const cardProps = {
+                      key: actualIndex,
+                      style: isFullRow ? dynamicStyles.itemContainer : itemStyle,
+                    };
+
+                    return (
+                      <View {...cardProps}>
+                        {renderItem({ item, index: actualIndex })}
+                      </View>
+                    );
+                  })}
                 </View>
-              ))}
-            </View>
-          ))}
-          {renderFooter()}
-        </>
-      ) : (
-        <View style={styles.centerContainer}>
-          <ThemedText>{emptyMessage}</ThemedText>
-        </View>
+              );
+            })}
+            {renderFooter()}
+          </>
+        ) : (
+          <View style={commonStyles.center}>
+            <ThemedText>{emptyMessage}</ThemedText>
+          </View>
+        )}
+      </ScrollView>
+      {deviceType!=='tv' && (
+        <TouchableOpacity
+          style={dynamicStyles.scrollToTopButton}
+          onPress={scrollToTop}
+          activeOpacity={0.8}
+        >
+          <ThemedText>⬆️</ThemedText>
+        </TouchableOpacity>
       )}
-    </ScrollView>
+    </View>
   );
 };
 
-const styles = StyleSheet.create({
-  centerContainer: {
-    flex: 1,
-    paddingTop: 20,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  listContent: {
-    paddingHorizontal: 16,
-    paddingBottom: 20,
-  },
-  rowContainer: {
-    flexDirection: "row",
-    justifyContent: "flex-start",
-    flexWrap: "wrap",
-  },
-  itemContainer: {
-    margin: 8,
-    alignItems: "center",
-  },
-});
-
 export default CustomScrollView;

components/EpisodeSelectionModal.tsx

@@ -1,13 +1,7 @@
-import React from "react";
-import { View, Text, StyleSheet, Modal, FlatList, Pressable } from "react-native";
+import React, { useState } from "react";
+import { View, Text, StyleSheet, Modal, FlatList } from "react-native";
 import { StyledButton } from "./StyledButton";
 import usePlayerStore from "@/stores/playerStore";
-import { useState } from "react";
-
-interface Episode {
-  title?: string;
-  url: string;
-}
 
 interface EpisodeSelectionModalProps {}
 

components/LoginModal.tsx

@@ -1,11 +1,12 @@
 import React, { useState, useRef, useEffect } from "react";
-import { Modal, View, TextInput, StyleSheet, ActivityIndicator, Alert } from "react-native";
+import { Modal, View, TextInput, StyleSheet, ActivityIndicator, Alert, Keyboard, InteractionManager } from "react-native";
 import { usePathname } from "expo-router";
 import Toast from "react-native-toast-message";
 import useAuthStore from "@/stores/authStore";
 import { useSettingsStore } from "@/stores/settingsStore";
 import useHomeStore from "@/stores/homeStore";
 import { api } from "@/services/api";
+import { LoginCredentialsManager } from "@/services/storage";
 import { ThemedView } from "./ThemedView";
 import { ThemedText } from "./ThemedText";
 import { StyledButton } from "./StyledButton";
@@ -22,11 +23,40 @@ const LoginModal = () => {
   const pathname = usePathname();
   const isSettingsPage = pathname.includes("settings");
 
-  // Focus management with better TV remote handling
+  const [isModalReady, setIsModalReady] = useState(false);
+
+  // Load saved credentials when modal opens
   useEffect(() => {
     if (isLoginModalVisible && !isSettingsPage) {
+            // 先确保键盘状态清理
+      Keyboard.dismiss();
+
+      const loadCredentials = async () => {
+        const savedCredentials = await LoginCredentialsManager.get();
+        if (savedCredentials) {
+          setUsername(savedCredentials.username);
+          setPassword(savedCredentials.password);
+        }
+      };
+      loadCredentials();
+
+      // 延迟设置 Modal 就绪状态
+      const readyTimeout = setTimeout(() => {
+        setIsModalReady(true);
+      }, 300);
+
+      return () => {
+        clearTimeout(readyTimeout);
+        setIsModalReady(false);
+      };
+    }
+  }, [isLoginModalVisible, isSettingsPage]);
+
+  // Focus management with better TV remote handling
+  useEffect(() => {
+    if (isModalReady && isLoginModalVisible && !isSettingsPage) {
       const isUsernameVisible = serverConfig?.StorageType !== "localstorage";
-      
+
       // Use a small delay to ensure the modal is fully rendered
       const focusTimeout = setTimeout(() => {
         if (isUsernameVisible) {
@@ -34,11 +64,19 @@ const LoginModal = () => {
         } else {
           passwordInputRef.current?.focus();
         }
-      }, 100);
-      
+      }, 300);
+
       return () => clearTimeout(focusTimeout);
     }
-  }, [isLoginModalVisible, serverConfig, isSettingsPage]);
+  }, [isModalReady, isLoginModalVisible, serverConfig, isSettingsPage]);
+
+  // 清理 effect - 确保 Modal 关闭时清理所有状态
+  useEffect(() => {
+    return () => {
+      Keyboard.dismiss();
+      setIsModalReady(false);
+    };
+  }, []);
 
   const handleLogin = async () => {
     const isLocalStorage = serverConfig?.StorageType === "localstorage";
@@ -51,19 +89,44 @@ const LoginModal = () => {
       await api.login(isLocalStorage ? undefined : username, password);
       await checkLoginStatus(apiBaseUrl);
       await refreshPlayRecords();
+
+      // Save credentials on successful login
+      await LoginCredentialsManager.save({ username, password });
+
       Toast.show({ type: "success", text1: "登录成功" });
-      hideLoginModal();
-      setUsername("");
-      setPassword("");
-      
-      // Show disclaimer alert after successful login
-      Alert.alert(
-        "免责声明",
-        "本网站仅提供影视信息搜索服务，所有内容均来自第三方网站。本站不存储任何视频资源，不对任何内容的准确性、合法性、完整性负责。",
-        [{ text: "确定" }]
-      );
-    } catch {
-      Toast.show({ type: "error", text1: "登录失败", text2: "用户名或密码错误" });
+      // hideLoginModal();
+
+      // // Show disclaimer alert after successful login
+      // Alert.alert(
+      //   "免责声明",
+      //   "本应用仅提供影视信息搜索服务，所有内容均来自第三方网站。本站不存储任何视频资源，不对任何内容的准确性、合法性、完整性负责。",
+      //   [{ text: "确定" }]
+      // );
+
+            // 在登录成功后清理状态，再显示 Alert
+      const hideAndAlert = () => {
+        hideLoginModal();
+        setIsModalReady(false);
+        Keyboard.dismiss();
+
+        setTimeout(() => {
+          Alert.alert(
+            "免责声明",
+            "本应用仅提供影视信息搜索服务，所有内容均来自第三方网站。本站不存储任何视频资源，不对任何内容的准确性、合法性、完整性负责。",
+            [{ text: "确定" }]
+          );
+        }, 100);
+      };
+
+      // 使用 InteractionManager 确保 UI 稳定后再执行
+      InteractionManager.runAfterInteractions(hideAndAlert);
+
+    } catch (error) {
+      Toast.show({
+        type: "error",
+        text1: "登录失败",
+        text2: error instanceof Error ? error.message : "用户名或密码错误",
+      });
     } finally {
       setIsLoading(false);
     }

components/MobileBottomNavigation.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { useRouter, usePathname } from 'expo-router';
+import { Home, Heart, Search, Settings, Tv } from 'lucide-react-native';
+import { ThemedText } from '@/components/ThemedText';
+import { useResponsiveLayout } from '@/hooks/useResponsiveLayout';
+import { DeviceUtils } from '@/utils/DeviceUtils';
+
+interface NavigationItem {
+  name: string;
+  label: string;
+  icon: any;
+  route: string;
+}
+
+const navigationItems: NavigationItem[] = [
+  {
+    name: 'home',
+    label: '首页',
+    icon: Home,
+    route: '/',
+  },
+  {
+    name: 'live',
+    label: '直播',
+    icon: Tv,
+    route: '/live',
+  },
+  {
+    name: 'search',
+    label: '搜索',
+    icon: Search,
+    route: '/search',
+  },
+  {
+    name: 'favorites',
+    label: '收藏',
+    icon: Heart,
+    route: '/favorites',
+  },
+  {
+    name: 'settings',
+    label: '设置',
+    icon: Settings,
+    route: '/settings',
+  },
+];
+
+interface MobileBottomNavigationProps {
+  colorScheme?: 'light' | 'dark';
+}
+
+export const MobileBottomNavigation: React.FC<MobileBottomNavigationProps> = ({
+  colorScheme = 'dark',
+}) => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const responsiveConfig = useResponsiveLayout();
+
+  // Only show on mobile devices
+  if (responsiveConfig.deviceType !== 'mobile') {
+    return null;
+  }
+
+  // 在手机端过滤掉直播 tab
+  const filteredNavigationItems = navigationItems.filter(item => 
+    responsiveConfig.deviceType !== 'mobile' || item.name !== 'live'
+  );
+
+  const handleNavigation = (route: string) => {
+    if (route === '/') {
+      router.push('/');
+    } else {
+      router.push(route as any);
+    }
+  };
+
+  const isActiveRoute = (route: string) => {
+    if (route === '/') {
+      return pathname === '/';
+    }
+    return pathname.startsWith(route);
+  };
+
+  const activeColor = colorScheme === 'dark' ? '#007AFF' : '#007AFF';
+  const inactiveColor = colorScheme === 'dark' ? '#8E8E93' : '#8E8E93';
+  const backgroundColor = colorScheme === 'dark' ? '#1C1C1E' : '#F2F2F7';
+
+  const dynamicStyles = StyleSheet.create({
+    container: {
+      backgroundColor,
+      borderTopColor: colorScheme === 'dark' ? '#38383A' : '#C6C6C8',
+    },
+  });
+
+  return (
+    <View style={[styles.container, dynamicStyles.container]}>
+      {filteredNavigationItems.map((item) => {
+        const isActive = isActiveRoute(item.route);
+        const IconComponent = item.icon;
+
+        return (
+          <TouchableOpacity
+            key={item.name}
+            style={styles.tabItem}
+            onPress={() => handleNavigation(item.route)}
+            activeOpacity={0.7}
+          >
+            <IconComponent
+              size={24}
+              color={isActive ? activeColor : inactiveColor}
+            />
+            <ThemedText
+              style={[
+                styles.tabLabel,
+                { color: isActive ? activeColor : inactiveColor },
+              ]}
+            >
+              {item.label}
+            </ThemedText>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    height: 84, // 49 + 35 for safe area
+    paddingBottom: 35, // Safe area padding
+    paddingTop: 8,
+    paddingHorizontal: 8,
+    borderTopWidth: 0.5,
+    justifyContent: 'space-around',
+    alignItems: 'flex-start',
+  },
+  tabItem: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 4,
+    minHeight: DeviceUtils.getMinTouchTargetSize(),
+  },
+  tabLabel: {
+    fontSize: 11,
+    marginTop: 2,
+    textAlign: 'center',
+    fontWeight: '500',
+  },
+});
+
+export default MobileBottomNavigation;

components/PlayerControls.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, Text, StyleSheet, Pressable } from "react-native";
-import { Pause, Play, SkipForward, List, Tv, ArrowDownToDot, ArrowUpFromDot } from "lucide-react-native";
+import { Pause, Play, SkipForward, List, Tv, ArrowDownToDot, ArrowUpFromDot, Gauge } from "lucide-react-native";
 import { ThemedText } from "@/components/ThemedText";
 import { MediaButton } from "@/components/MediaButton";
 
@@ -21,10 +21,12 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({ showControls, se
     isSeeking,
     seekPosition,
     progressPosition,
+    playbackRate,
     togglePlayPause,
     playEpisode,
     setShowEpisodeModal,
     setShowSourceModal,
+    setShowSpeedModal,
     setIntroEndTime,
     setOutroStartTime,
     introEndTime,
@@ -109,6 +111,10 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({ showControls, se
             <List color="white" size={24} />
           </MediaButton>
 
+          <MediaButton onPress={() => setShowSpeedModal(true)} timeLabel={playbackRate !== 1.0 ? `${playbackRate}x` : undefined}>
+            <Gauge color="white" size={24} />
+          </MediaButton>
+
           <MediaButton onPress={() => setShowSourceModal(true)}>
             <Tv color="white" size={24} />
           </MediaButton>

components/RemoteControlModal.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Modal, View, Text, StyleSheet } from "react-native";
+import { Modal, View, StyleSheet } from "react-native";
 import QRCode from "react-native-qrcode-svg";
 import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import { ThemedView } from "./ThemedView";

components/ResponsiveButton.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import { TouchableOpacity, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+import { ThemedText } from '@/components/ThemedText';
+import { useResponsiveLayout } from '@/hooks/useResponsiveLayout';
+import { DeviceUtils } from '@/utils/DeviceUtils';
+import { Colors } from '@/constants/Colors';
+
+interface ResponsiveButtonProps {
+  title: string;
+  onPress: () => void;
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'small' | 'medium' | 'large';
+  disabled?: boolean;
+  fullWidth?: boolean;
+  icon?: React.ReactNode;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+}
+
+const ResponsiveButton: React.FC<ResponsiveButtonProps> = ({
+  title,
+  onPress,
+  variant = 'primary',
+  size = 'medium',
+  disabled = false,
+  fullWidth = false,
+  icon,
+  style,
+  textStyle,
+}) => {
+  const { deviceType, spacing } = useResponsiveLayout();
+  const dynamicStyles = createResponsiveStyles(deviceType, spacing);
+
+  const buttonStyle = [
+    dynamicStyles.baseButton,
+    dynamicStyles[variant],
+    dynamicStyles[size],
+    fullWidth && dynamicStyles.fullWidth,
+    disabled && dynamicStyles.disabled,
+    style,
+  ];
+
+  const textStyleCombined = [
+    dynamicStyles.baseText,
+    dynamicStyles[`${variant}Text`],
+    dynamicStyles[`${size}Text`],
+    disabled && dynamicStyles.disabledText,
+    textStyle,
+  ];
+
+  return (
+    <TouchableOpacity
+      style={buttonStyle}
+      onPress={onPress}
+      disabled={disabled}
+      activeOpacity={0.7}
+    >
+      {icon && <>{icon}</>}
+      <ThemedText style={textStyleCombined}>{title}</ThemedText>
+    </TouchableOpacity>
+  );
+};
+
+const createResponsiveStyles = (deviceType: string, spacing: number) => {
+  const isMobile = deviceType === 'mobile';
+  const isTablet = deviceType === 'tablet';
+  const minTouchTarget = DeviceUtils.getMinTouchTargetSize();
+
+  return StyleSheet.create({
+    baseButton: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: isMobile ? 8 : isTablet ? 10 : 12,
+      paddingHorizontal: spacing,
+      paddingVertical: spacing * 0.75,
+      minHeight: isMobile ? minTouchTarget : isTablet ? 48 : 44,
+    },
+    
+    // Variants
+    primary: {
+      backgroundColor: Colors.dark.primary,
+    },
+    secondary: {
+      backgroundColor: '#2c2c2e',
+      borderWidth: 1,
+      borderColor: '#666',
+    },
+    ghost: {
+      backgroundColor: 'transparent',
+      borderWidth: 1,
+      borderColor: '#666',
+    },
+
+    // Sizes
+    small: {
+      paddingHorizontal: spacing * 0.75,
+      paddingVertical: spacing * 0.5,
+      minHeight: isMobile ? minTouchTarget * 0.8 : 36,
+    },
+    medium: {
+      paddingHorizontal: spacing,
+      paddingVertical: spacing * 0.75,
+      minHeight: isMobile ? minTouchTarget : isTablet ? 48 : 44,
+    },
+    large: {
+      paddingHorizontal: spacing * 1.5,
+      paddingVertical: spacing,
+      minHeight: isMobile ? minTouchTarget * 1.2 : isTablet ? 56 : 52,
+    },
+
+    fullWidth: {
+      width: '100%',
+    },
+
+    disabled: {
+      opacity: 0.5,
+    },
+
+    // Text styles
+    baseText: {
+      textAlign: 'center',
+      fontWeight: '600',
+    },
+    primaryText: {
+      color: 'white',
+    },
+    secondaryText: {
+      color: 'white',
+    },
+    ghostText: {
+      color: '#ccc',
+    },
+    
+    // Text sizes
+    smallText: {
+      fontSize: isMobile ? 14 : 12,
+    },
+    mediumText: {
+      fontSize: isMobile ? 16 : isTablet ? 16 : 14,
+    },
+    largeText: {
+      fontSize: isMobile ? 18 : isTablet ? 18 : 16,
+    },
+
+    disabledText: {
+      opacity: 0.7,
+    },
+  });
+};
+
+export default ResponsiveButton;

components/ResponsiveCard.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { View, StyleSheet, ViewStyle, TouchableOpacity } from 'react-native';
+import { useResponsiveLayout } from '@/hooks/useResponsiveLayout';
+
+interface ResponsiveCardProps {
+  children: React.ReactNode;
+  onPress?: () => void;
+  variant?: 'default' | 'elevated' | 'outlined';
+  padding?: 'small' | 'medium' | 'large';
+  style?: ViewStyle;
+  disabled?: boolean;
+}
+
+const ResponsiveCard: React.FC<ResponsiveCardProps> = ({
+  children,
+  onPress,
+  variant = 'default',
+  padding = 'medium',
+  style,
+  disabled = false,
+}) => {
+  const { deviceType, spacing } = useResponsiveLayout();
+  const dynamicStyles = createResponsiveStyles(deviceType, spacing);
+
+  const cardStyle = [
+    dynamicStyles.baseCard,
+    dynamicStyles[variant],
+    dynamicStyles[padding],
+    disabled && dynamicStyles.disabled,
+    style,
+  ];
+
+  if (onPress && !disabled) {
+    return (
+      <TouchableOpacity
+        style={cardStyle}
+        onPress={onPress}
+        activeOpacity={0.8}
+      >
+        {children}
+      </TouchableOpacity>
+    );
+  }
+
+  return <View style={cardStyle}>{children}</View>;
+};
+
+const createResponsiveStyles = (deviceType: string, spacing: number) => {
+  const isMobile = deviceType === 'mobile';
+  const isTablet = deviceType === 'tablet';
+
+  return StyleSheet.create({
+    baseCard: {
+      backgroundColor: '#1c1c1e',
+      borderRadius: isMobile ? 8 : isTablet ? 10 : 12,
+      marginBottom: spacing,
+    },
+
+    // Variants
+    default: {
+      backgroundColor: '#1c1c1e',
+    },
+    elevated: {
+      backgroundColor: '#1c1c1e',
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: isMobile ? 2 : isTablet ? 4 : 6,
+      },
+      shadowOpacity: isMobile ? 0.1 : isTablet ? 0.15 : 0.2,
+      shadowRadius: isMobile ? 4 : isTablet ? 6 : 8,
+      elevation: isMobile ? 3 : isTablet ? 5 : 8,
+    },
+    outlined: {
+      backgroundColor: 'transparent',
+      borderWidth: 1,
+      borderColor: '#333',
+    },
+
+    // Padding variants
+    small: {
+      padding: spacing * 0.75,
+    },
+    medium: {
+      padding: spacing,
+    },
+    large: {
+      padding: spacing * 1.5,
+    },
+
+    disabled: {
+      opacity: 0.5,
+    },
+  });
+};
+
+export default ResponsiveCard;

components/ResponsiveTextInput.tsx

@@ -0,0 +1,131 @@
+import React, { forwardRef } from 'react';
+import { TextInput, View, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+import { ThemedText } from '@/components/ThemedText';
+import { useResponsiveLayout } from '@/hooks/useResponsiveLayout';
+import { DeviceUtils } from '@/utils/DeviceUtils';
+
+interface ResponsiveTextInputProps {
+  placeholder?: string;
+  value: string;
+  onChangeText: (text: string) => void;
+  label?: string;
+  error?: string;
+  secureTextEntry?: boolean;
+  keyboardType?: 'default' | 'numeric' | 'email-address' | 'phone-pad';
+  multiline?: boolean;
+  numberOfLines?: number;
+  editable?: boolean;
+  style?: ViewStyle;
+  inputStyle?: TextStyle;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+const ResponsiveTextInput = forwardRef<TextInput, ResponsiveTextInputProps>(
+  (
+    {
+      placeholder,
+      value,
+      onChangeText,
+      label,
+      error,
+      secureTextEntry = false,
+      keyboardType = 'default',
+      multiline = false,
+      numberOfLines = 1,
+      editable = true,
+      style,
+      inputStyle,
+      onFocus,
+      onBlur,
+    },
+    ref
+  ) => {
+    const { deviceType, spacing } = useResponsiveLayout();
+    const dynamicStyles = createResponsiveStyles(deviceType, spacing);
+
+    return (
+      <View style={[dynamicStyles.container, style]}>
+        {label && (
+          <ThemedText style={dynamicStyles.label}>{label}</ThemedText>
+        )}
+        
+        <View style={[
+          dynamicStyles.inputContainer,
+          error ? dynamicStyles.errorContainer : undefined,
+          !editable ? dynamicStyles.disabledContainer : undefined,
+        ]}>
+          <TextInput
+            ref={ref}
+            style={[dynamicStyles.input, inputStyle]}
+            placeholder={placeholder}
+            placeholderTextColor="#888"
+            value={value}
+            onChangeText={onChangeText}
+            secureTextEntry={secureTextEntry}
+            keyboardType={keyboardType}
+            multiline={multiline}
+            numberOfLines={multiline ? numberOfLines : 1}
+            editable={editable}
+            onFocus={onFocus}
+            onBlur={onBlur}
+          />
+        </View>
+
+        {error && (
+          <ThemedText style={dynamicStyles.errorText}>{error}</ThemedText>
+        )}
+      </View>
+    );
+  }
+);
+
+ResponsiveTextInput.displayName = 'ResponsiveTextInput';
+
+const createResponsiveStyles = (deviceType: string, spacing: number) => {
+  const isMobile = deviceType === 'mobile';
+  const isTablet = deviceType === 'tablet';
+  const minTouchTarget = DeviceUtils.getMinTouchTargetSize();
+
+  return StyleSheet.create({
+    container: {
+      marginBottom: spacing,
+    },
+    label: {
+      fontSize: isMobile ? 16 : 14,
+      fontWeight: '600',
+      marginBottom: spacing * 0.5,
+      color: 'white',
+    },
+    inputContainer: {
+      backgroundColor: '#2c2c2e',
+      borderRadius: isMobile ? 8 : isTablet ? 10 : 12,
+      borderWidth: 2,
+      borderColor: 'transparent',
+      minHeight: isMobile ? minTouchTarget : isTablet ? 48 : 44,
+      justifyContent: 'center',
+    },
+    input: {
+      flex: 1,
+      paddingHorizontal: spacing,
+      paddingVertical: spacing * 0.75,
+      fontSize: isMobile ? 16 : isTablet ? 16 : 14,
+      color: 'white',
+      textAlignVertical: 'top', // For multiline inputs
+    },
+    errorContainer: {
+      borderColor: '#ff4444',
+    },
+    disabledContainer: {
+      backgroundColor: '#1a1a1c',
+      opacity: 0.6,
+    },
+    errorText: {
+      fontSize: isMobile ? 14 : 12,
+      color: '#ff4444',
+      marginTop: spacing * 0.25,
+    },
+  });
+};
+
+export default ResponsiveTextInput;

components/ResponsiveVideoCard.tsx

@@ -0,0 +1,376 @@
+import React, { useState, useEffect, useCallback, useRef, forwardRef } from "react";
+import { View, Text, Image, StyleSheet, TouchableOpacity, Alert, Animated } from "react-native";
+import { useRouter } from "expo-router";
+import { Star, Play } from "lucide-react-native";
+import { PlayRecordManager } from "@/services/storage";
+import { API } from "@/services/api";
+import { ThemedText } from "@/components/ThemedText";
+import { Colors } from "@/constants/Colors";
+import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
+import { DeviceUtils } from "@/utils/DeviceUtils";
+import Logger from '@/utils/Logger';
+
+const logger = Logger.withTag('ResponsiveVideoCard');
+
+interface VideoCardProps extends React.ComponentProps<typeof TouchableOpacity> {
+  id: string;
+  source: string;
+  title: string;
+  poster: string;
+  year?: string;
+  rate?: string;
+  sourceName?: string;
+  progress?: number; // 播放进度，0-1之间的小数
+  playTime?: number; // 播放时间 in ms
+  episodeIndex?: number; // 剧集索引
+  totalEpisodes?: number; // 总集数
+  onFocus?: () => void;
+  onRecordDeleted?: () => void; // 添加回调属性
+  api: API;
+}
+
+const ResponsiveVideoCard = forwardRef<View, VideoCardProps>(
+  (
+    {
+      id,
+      source,
+      title,
+      poster,
+      year,
+      rate,
+      sourceName,
+      progress,
+      episodeIndex,
+      onFocus,
+      onRecordDeleted,
+      api,
+      playTime = 0,
+    }: VideoCardProps,
+    ref
+  ) => {
+    const router = useRouter();
+    const [isFocused, setIsFocused] = useState(false);
+    const [fadeAnim] = useState(new Animated.Value(0));
+    const responsiveConfig = useResponsiveLayout();
+
+    const longPressTriggered = useRef(false);
+    const scale = useRef(new Animated.Value(1)).current;
+
+    const animatedStyle = {
+      transform: [{ scale }],
+    };
+
+    const handlePress = () => {
+      if (longPressTriggered.current) {
+        longPressTriggered.current = false;
+        return;
+      }
+      // 如果有播放进度，直接转到播放页面
+      if (progress !== undefined && episodeIndex !== undefined) {
+        router.push({
+          pathname: "/play",
+          params: { source, id, episodeIndex: episodeIndex - 1, title, position: playTime * 1000 },
+        });
+      } else {
+        router.push({
+          pathname: "/detail",
+          params: { source, q: title },
+        });
+      }
+    };
+
+    const handleFocus = useCallback(() => {
+      // Only apply focus scaling for TV devices
+      if (responsiveConfig.deviceType === 'tv') {
+        setIsFocused(true);
+        Animated.spring(scale, {
+          toValue: 1.05,
+          damping: 15,
+          stiffness: 200,
+          useNativeDriver: true,
+        }).start();
+      }
+      onFocus?.();
+    }, [scale, onFocus, responsiveConfig.deviceType]);
+
+    const handleBlur = useCallback(() => {
+      if (responsiveConfig.deviceType === 'tv') {
+        setIsFocused(false);
+        Animated.spring(scale, {
+          toValue: 1.0,
+          useNativeDriver: true,
+        }).start();
+      }
+    }, [scale, responsiveConfig.deviceType]);
+
+    useEffect(() => {
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: DeviceUtils.getAnimationDuration(400),
+        delay: Math.random() * 200, // 随机延迟创建交错效果
+        useNativeDriver: true,
+      }).start();
+    }, [fadeAnim]);
+
+    const handleLongPress = () => {
+      // Only allow long press for items with progress (play records)
+      if (progress === undefined) return;
+
+      longPressTriggered.current = true;
+
+      // Show confirmation dialog to delete play record
+      Alert.alert("删除观看记录", `确定要删除"${title}"的观看记录吗？`, [
+        {
+          text: "取消",
+          style: "cancel",
+        },
+        {
+          text: "删除",
+          style: "destructive",
+          onPress: async () => {
+            try {
+              // Delete from local storage
+              await PlayRecordManager.remove(source, id);
+
+              // Call the onRecordDeleted callback
+              if (onRecordDeleted) {
+                onRecordDeleted();
+              }
+              // 如果没有回调函数，则使用导航刷新作为备选方案
+              else if (router.canGoBack()) {
+                router.replace("/");
+              }
+            } catch (error) {
+              logger.info("Failed to delete play record:", error);
+              Alert.alert("错误", "删除观看记录失败，请重试");
+            }
+          },
+        },
+      ]);
+    };
+
+    // 是否是继续观看的视频
+    const isContinueWatching = progress !== undefined && progress > 0 && progress < 1;
+
+    // Dynamic styles based on device type
+    const cardWidth = responsiveConfig.cardWidth;
+    const cardHeight = responsiveConfig.cardHeight;
+
+    const dynamicStyles = StyleSheet.create({
+      wrapper: {
+        marginHorizontal: responsiveConfig.spacing / 2,
+      },
+      card: {
+        width: cardWidth,
+        height: cardHeight,
+        borderRadius: responsiveConfig.deviceType === 'mobile' ? 8 : responsiveConfig.deviceType === 'tablet' ? 10 : 8,
+        backgroundColor: "#222",
+        overflow: "hidden",
+      },
+      infoContainer: {
+        width: cardWidth,
+        marginTop: responsiveConfig.spacing / 2,
+        alignItems: "flex-start",
+        marginBottom: responsiveConfig.spacing,
+        paddingHorizontal: 4,
+      },
+      overlay: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: "rgba(0,0,0,0.3)",
+        borderColor: Colors.dark.primary,
+        borderWidth: responsiveConfig.deviceType === 'tv' ? 2 : 0,
+        borderRadius: responsiveConfig.deviceType === 'mobile' ? 8 : responsiveConfig.deviceType === 'tablet' ? 10 : 8,
+        justifyContent: "center",
+        alignItems: "center",
+      },
+      continueWatchingBadge: {
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: Colors.dark.primary,
+        paddingHorizontal: responsiveConfig.deviceType === 'mobile' ? 8 : 10,
+        paddingVertical: responsiveConfig.deviceType === 'mobile' ? 4 : 5,
+        borderRadius: 5,
+      },
+      continueWatchingText: {
+        color: "white",
+        marginLeft: 5,
+        fontSize: responsiveConfig.deviceType === 'mobile' ? 10 : 12,
+        fontWeight: "bold",
+      },
+    });
+
+    return (
+      <Animated.View style={[dynamicStyles.wrapper, animatedStyle, { opacity: fadeAnim }]}>
+        <TouchableOpacity
+          onPress={handlePress}
+          onLongPress={handleLongPress}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          style={styles.pressable}
+          activeOpacity={responsiveConfig.deviceType === 'tv' ? 1 : 0.8}
+          delayLongPress={responsiveConfig.deviceType === 'mobile' ? 500 : 1000}
+        >
+          <View style={dynamicStyles.card}>
+            <Image source={{ uri: api.getImageProxyUrl(poster) }} style={styles.poster} />
+            {(isFocused && responsiveConfig.deviceType === 'tv') && (
+              <View style={dynamicStyles.overlay}>
+                {isContinueWatching && (
+                  <View style={dynamicStyles.continueWatchingBadge}>
+                    <Play size={responsiveConfig.deviceType === 'tv' ? 16 : 12} color="#ffffff" fill="#ffffff" />
+                    <ThemedText style={dynamicStyles.continueWatchingText}>继续观看</ThemedText>
+                  </View>
+                )}
+              </View>
+            )}
+
+            {/* 进度条 */}
+            {isContinueWatching && (
+              <View style={styles.progressContainer}>
+                <View style={[styles.progressBar, { width: `${(progress || 0) * 100}%` }]} />
+              </View>
+            )}
+
+            {rate && (
+              <View style={[styles.ratingContainer, { 
+                top: responsiveConfig.spacing / 2,
+                right: responsiveConfig.spacing / 2 
+              }]}>
+                <Star size={responsiveConfig.deviceType === 'mobile' ? 10 : 12} color="#FFD700" fill="#FFD700" />
+                <ThemedText style={[styles.ratingText, { 
+                  fontSize: responsiveConfig.deviceType === 'mobile' ? 10 : 12 
+                }]}>{rate}</ThemedText>
+              </View>
+            )}
+            {year && (
+              <View style={[styles.yearBadge, { 
+                top: responsiveConfig.spacing / 2,
+                right: responsiveConfig.spacing / 2 
+              }]}>
+                <Text style={[styles.badgeText, { 
+                  fontSize: responsiveConfig.deviceType === 'mobile' ? 10 : 12 
+                }]}>{year}</Text>
+              </View>
+            )}
+            {sourceName && (
+              <View style={[styles.sourceNameBadge, { 
+                top: responsiveConfig.spacing / 2,
+                left: responsiveConfig.spacing / 2 
+              }]}>
+                <Text style={[styles.badgeText, { 
+                  fontSize: responsiveConfig.deviceType === 'mobile' ? 10 : 12 
+                }]}>{sourceName}</Text>
+              </View>
+            )}
+          </View>
+          <View style={dynamicStyles.infoContainer}>
+            <ThemedText 
+              numberOfLines={responsiveConfig.deviceType === 'mobile' ? 2 : 1}
+              style={{ 
+                fontSize: responsiveConfig.deviceType === 'mobile' ? 14 : 16,
+                lineHeight: responsiveConfig.deviceType === 'mobile' ? 18 : 20,
+              }}
+            >
+              {title}
+            </ThemedText>
+            {isContinueWatching && (
+              <View style={styles.infoRow}>
+                <ThemedText style={[styles.continueLabel, { 
+                  fontSize: responsiveConfig.deviceType === 'mobile' ? 10 : 12 
+                }]}>
+                  第{episodeIndex! + 1}集 已观看 {Math.round((progress || 0) * 100)}%
+                </ThemedText>
+              </View>
+            )}
+          </View>
+        </TouchableOpacity>
+      </Animated.View>
+    );
+  }
+);
+
+ResponsiveVideoCard.displayName = "ResponsiveVideoCard";
+
+export default ResponsiveVideoCard;
+
+const styles = StyleSheet.create({
+  pressable: {
+    alignItems: "center",
+  },
+  poster: {
+    width: "100%",
+    height: "100%",
+  },
+  buttonRow: {
+    position: "absolute",
+    top: 8,
+    left: 8,
+    flexDirection: "row",
+    gap: 8,
+  },
+  iconButton: {
+    padding: 4,
+  },
+  favButton: {
+    position: "absolute",
+    top: 8,
+    left: 8,
+  },
+  ratingContainer: {
+    position: "absolute",
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+    borderRadius: 6,
+    paddingHorizontal: 6,
+    paddingVertical: 3,
+  },
+  ratingText: {
+    color: "#FFD700",
+    fontWeight: "bold",
+    marginLeft: 4,
+  },
+  infoRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "100%",
+  },
+  title: {
+    color: "white",
+    fontSize: 16,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  yearBadge: {
+    position: "absolute",
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+    borderRadius: 6,
+    paddingHorizontal: 6,
+    paddingVertical: 3,
+  },
+  sourceNameBadge: {
+    position: "absolute",
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+    borderRadius: 6,
+    paddingHorizontal: 6,
+    paddingVertical: 3,
+  },
+  badgeText: {
+    color: "white",
+    fontWeight: "bold",
+  },
+  progressContainer: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 4,
+    backgroundColor: "rgba(0, 0, 0, 0.8)",
+  },
+  progressBar: {
+    height: 4,
+    backgroundColor: Colors.dark.primary,
+  },
+  continueLabel: {
+    color: Colors.dark.primary,
+  },
+});

components/SourceSelectionModal.tsx

@@ -3,13 +3,16 @@ import { View, Text, StyleSheet, Modal, FlatList } from "react-native";
 import { StyledButton } from "./StyledButton";
 import useDetailStore from "@/stores/detailStore";
 import usePlayerStore from "@/stores/playerStore";
+import Logger from '@/utils/Logger';
+
+const logger = Logger.withTag('SourceSelectionModal');
 
 export const SourceSelectionModal: React.FC = () => {
   const { showSourceModal, setShowSourceModal, loadVideo, currentEpisodeIndex, status } = usePlayerStore();
   const { searchResults, detail, setDetail } = useDetailStore();
 
   const onSelectSource = (index: number) => {
-    console.log("onSelectSource", index, searchResults[index].source, detail?.source);
+    logger.debug("onSelectSource", index, searchResults[index].source, detail?.source);
     if (searchResults[index].source !== detail?.source) {
       const newDetail = searchResults[index];
       setDetail(newDetail);

components/SpeedSelectionModal.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { View, Text, StyleSheet, Modal, FlatList } from "react-native";
+import { StyledButton } from "./StyledButton";
+import usePlayerStore from "@/stores/playerStore";
+
+interface SpeedOption {
+  rate: number;
+  label: string;
+}
+
+const SPEED_OPTIONS: SpeedOption[] = [
+  { rate: 0.5, label: "0.5x" },
+  { rate: 0.75, label: "0.75x" },
+  { rate: 1.0, label: "1x" },
+  { rate: 1.25, label: "1.25x" },
+  { rate: 1.5, label: "1.5x" },
+  { rate: 1.75, label: "1.75x" },
+  { rate: 2.0, label: "2x" },
+];
+
+export const SpeedSelectionModal: React.FC = () => {
+  const { showSpeedModal, setShowSpeedModal, playbackRate, setPlaybackRate } = usePlayerStore();
+
+  const onSelectSpeed = (rate: number) => {
+    setPlaybackRate(rate);
+    setShowSpeedModal(false);
+  };
+
+  const onClose = () => {
+    setShowSpeedModal(false);
+  };
+
+  return (
+    <Modal visible={showSpeedModal} transparent={true} animationType="slide" onRequestClose={onClose}>
+      <View style={styles.modalContainer}>
+        <View style={styles.modalContent}>
+          <Text style={styles.modalTitle}>播放速度</Text>
+          <FlatList
+            data={SPEED_OPTIONS}
+            numColumns={3}
+            contentContainerStyle={styles.speedList}
+            keyExtractor={(item) => `speed-${item.rate}`}
+            renderItem={({ item }) => (
+              <StyledButton
+                text={item.label}
+                onPress={() => onSelectSpeed(item.rate)}
+                isSelected={playbackRate === item.rate}
+                hasTVPreferredFocus={playbackRate === item.rate}
+                style={styles.speedItem}
+                textStyle={styles.speedItemText}
+              />
+            )}
+          />
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    backgroundColor: "transparent",
+  },
+  modalContent: {
+    width: 500,
+    height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.85)",
+    padding: 20,
+  },
+  modalTitle: {
+    color: "white",
+    marginBottom: 12,
+    textAlign: "center",
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+  speedList: {
+    justifyContent: "flex-start",
+  },
+  speedItem: {
+    paddingVertical: 10,
+    margin: 4,
+    marginLeft: 10,
+    marginRight: 8,
+    width: "30%",
+  },
+  speedItemText: {
+    fontSize: 16,
+  },
+});

components/StyledButton.tsx

@@ -1,8 +1,9 @@
 import React, { forwardRef } from "react";
-import { Animated, Pressable, StyleSheet, StyleProp, ViewStyle, PressableProps, TextStyle, View } from "react-native";
+import { Animated, Pressable, StyleSheet, StyleProp, ViewStyle, PressableProps, TextStyle, View, Platform } from "react-native";
 import { ThemedText } from "./ThemedText";
 import { Colors } from "@/constants/Colors";
 import { useButtonAnimation } from "@/hooks/useAnimation";
+import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
 
 interface StyledButtonProps extends PressableProps {
   children?: React.ReactNode;
@@ -19,6 +20,7 @@ export const StyledButton = forwardRef<View, StyledButtonProps>(
     const colors = Colors[colorScheme];
     const [isFocused, setIsFocused] = React.useState(false);
     const animationStyle = useButtonAnimation(isFocused);
+    const deviceType = useResponsiveLayout().deviceType;
 
     const variantStyles = {
       default: StyleSheet.create({
@@ -108,6 +110,7 @@ export const StyledButton = forwardRef<View, StyledButtonProps>(
     return (
       <Animated.View style={[animationStyle, style]}>
         <Pressable
+          android_ripple={Platform.isTV || deviceType !== 'tv'? { color: 'transparent' } : { color: Colors.dark.link }}
           ref={ref}
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}

components/UpdateModal.tsx

@@ -0,0 +1,201 @@
+import React from "react";
+import { Modal, View, StyleSheet, ActivityIndicator, Platform } from "react-native";
+import { useUpdateStore } from "../stores/updateStore";
+import { Colors } from "../constants/Colors";
+import { StyledButton } from "./StyledButton";
+import { ThemedText } from "./ThemedText";
+
+export function UpdateModal() {
+  const {
+    showUpdateModal,
+    currentVersion,
+    remoteVersion,
+    downloading,
+    downloadProgress,
+    error,
+    setShowUpdateModal,
+    startDownload,
+    installUpdate,
+    skipThisVersion,
+    downloadedPath,
+  } = useUpdateStore();
+
+  const updateButtonRef = React.useRef<View>(null);
+  const laterButtonRef = React.useRef<View>(null);
+  const skipButtonRef = React.useRef<View>(null);
+
+  async function handleUpdate() {
+    if (!downloading && !downloadedPath) {
+      // 开始下载
+      await startDownload();
+    } else if (downloadedPath) {
+      // 已下载完成，安装
+      await installUpdate();
+    }
+  }
+
+  function handleLater() {
+    setShowUpdateModal(false);
+  }
+
+  async function handleSkip() {
+    await skipThisVersion();
+  }
+
+  React.useEffect(() => {
+    if (showUpdateModal && Platform.isTV) {
+      // TV平台自动聚焦到更新按钮
+      setTimeout(() => {
+        updateButtonRef.current?.focus();
+      }, 100);
+    }
+  }, [showUpdateModal]);
+
+  const getButtonText = () => {
+    if (downloading) {
+      return `下载中 ${downloadProgress}%`;
+    } else if (downloadedPath) {
+      return "立即安装";
+    } else {
+      return "立即更新";
+    }
+  };
+
+  return (
+    <Modal visible={showUpdateModal} transparent animationType="fade" onRequestClose={handleLater}>
+      <View style={styles.overlay}>
+        <View style={styles.container}>
+          <ThemedText style={styles.title}>发现新版本</ThemedText>
+
+          <View style={styles.versionInfo}>
+            <ThemedText style={styles.versionText}>当前版本: v{currentVersion}</ThemedText>
+            <ThemedText style={styles.arrow}>→</ThemedText>
+            <ThemedText style={[styles.versionText, styles.newVersion]}>新版本: v{remoteVersion}</ThemedText>
+          </View>
+
+          {downloading && (
+            <View style={styles.progressContainer}>
+              <View style={styles.progressBar}>
+                <View style={[styles.progressFill, { width: `${downloadProgress}%` }]} />
+              </View>
+              <ThemedText style={styles.progressText}>{downloadProgress}%</ThemedText>
+            </View>
+          )}
+
+          {error && <ThemedText style={styles.errorText}>{error}</ThemedText>}
+
+          <View style={styles.buttonContainer}>
+            <StyledButton
+              ref={updateButtonRef}
+              onPress={handleUpdate}
+              disabled={downloading && !downloadedPath}
+              variant="primary"
+              style={styles.button}
+            >
+              {downloading && !downloadedPath ? (
+                <ActivityIndicator color="#fff" />
+              ) : (
+                <ThemedText style={styles.buttonText}>{getButtonText()}</ThemedText>
+              )}
+            </StyledButton>
+
+            {!downloading && !downloadedPath && (
+              <>
+                <StyledButton ref={laterButtonRef} onPress={handleLater} variant="primary" style={styles.button}>
+                  <ThemedText style={[styles.buttonText]}>稍后再说</ThemedText>
+                </StyledButton>
+
+                <StyledButton ref={skipButtonRef} onPress={handleSkip} variant="primary" style={styles.button}>
+                  <ThemedText style={[styles.buttonText]}>跳过此版本</ThemedText>
+                </StyledButton>
+              </>
+            )}
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  container: {
+    backgroundColor: Colors.dark.background,
+    borderRadius: 12,
+    padding: 24,
+    width: Platform.isTV ? 500 : "90%",
+    maxWidth: 500,
+    alignItems: "center",
+  },
+  title: {
+    fontSize: Platform.isTV ? 28 : 24,
+    fontWeight: "bold",
+    color: Colors.dark.text,
+    marginBottom: 20,
+    paddingTop: 12,
+  },
+  versionInfo: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 24,
+  },
+  versionText: {
+    fontSize: Platform.isTV ? 18 : 16,
+    color: Colors.dark.text,
+  },
+  newVersion: {
+    color: Colors.dark.primary || "#00bb5e",
+    fontWeight: "bold",
+  },
+  arrow: {
+    fontSize: Platform.isTV ? 20 : 18,
+    color: Colors.dark.text,
+    marginHorizontal: 12,
+  },
+  progressContainer: {
+    width: "100%",
+    marginBottom: 20,
+  },
+  progressBar: {
+    height: 6,
+    backgroundColor: Colors.dark.border,
+    borderRadius: 3,
+    overflow: "hidden",
+    marginBottom: 8,
+  },
+  progressFill: {
+    height: "100%",
+    backgroundColor: Colors.dark.primary || "#00bb5e",
+  },
+  progressText: {
+    fontSize: Platform.isTV ? 16 : 14,
+    color: Colors.dark.text,
+    textAlign: "center",
+  },
+  errorText: {
+    fontSize: Platform.isTV ? 16 : 14,
+    color: "#ff4444",
+    marginBottom: 16,
+    textAlign: "center",
+  },
+  buttonContainer: {
+    width: "100%",
+    gap: 12,
+    justifyContent: "center", // 居中对齐
+    alignItems: "center",
+  },
+  button: {
+    width: "80%",
+  },
+
+  buttonText: {
+    fontSize: Platform.isTV ? 18 : 16,
+    fontWeight: "600",
+    color: "#fff",
+  },
+});

components/VideoCard.mobile.tsx

@@ -0,0 +1,288 @@
+import React, { useState, useEffect, useRef, forwardRef } from "react";
+import { View, Text, Image, StyleSheet, TouchableOpacity, Alert, Animated } from "react-native";
+import { useRouter } from "expo-router";
+import { Star, Play } from "lucide-react-native";
+import { PlayRecordManager } from "@/services/storage";
+import { API } from "@/services/api";
+import { ThemedText } from "@/components/ThemedText";
+import { Colors } from "@/constants/Colors";
+import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
+import { DeviceUtils } from "@/utils/DeviceUtils";
+import Logger from '@/utils/Logger';
+
+const logger = Logger.withTag('VideoCardMobile');
+
+interface VideoCardMobileProps extends React.ComponentProps<typeof TouchableOpacity> {
+  id: string;
+  source: string;
+  title: string;
+  poster: string;
+  year?: string;
+  rate?: string;
+  sourceName?: string;
+  progress?: number;
+  playTime?: number;
+  episodeIndex?: number;
+  totalEpisodes?: number;
+  onFocus?: () => void;
+  onRecordDeleted?: () => void;
+  api: API;
+}
+
+const VideoCardMobile = forwardRef<View, VideoCardMobileProps>(
+  (
+    {
+      id,
+      source,
+      title,
+      poster,
+      year,
+      rate,
+      sourceName,
+      progress,
+      episodeIndex,
+      onFocus,
+      onRecordDeleted,
+      api,
+      playTime = 0,
+    }: VideoCardMobileProps,
+    ref
+  ) => {
+    const router = useRouter();
+    const { cardWidth, cardHeight, spacing } = useResponsiveLayout();
+    const [fadeAnim] = useState(new Animated.Value(0));
+
+    const longPressTriggered = useRef(false);
+
+    const handlePress = () => {
+      if (longPressTriggered.current) {
+        longPressTriggered.current = false;
+        return;
+      }
+      
+      if (progress !== undefined && episodeIndex !== undefined) {
+        router.push({
+          pathname: "/play",
+          params: { source, id, episodeIndex: episodeIndex - 1, title, position: playTime * 1000 },
+        });
+      } else {
+        router.push({
+          pathname: "/detail",
+          params: { source, q: title },
+        });
+      }
+    };
+
+    useEffect(() => {
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: DeviceUtils.getAnimationDuration(300),
+        delay: Math.random() * 100,
+        useNativeDriver: true,
+      }).start();
+    }, [fadeAnim]);
+
+    const handleLongPress = () => {
+      if (progress === undefined) return;
+
+      longPressTriggered.current = true;
+
+      Alert.alert("删除观看记录", `确定要删除"${title}"的观看记录吗？`, [
+        {
+          text: "取消",
+          style: "cancel",
+        },
+        {
+          text: "删除",
+          style: "destructive",
+          onPress: async () => {
+            try {
+              await PlayRecordManager.remove(source, id);
+              onRecordDeleted?.();
+            } catch (error) {
+              logger.info("Failed to delete play record:", error);
+              Alert.alert("错误", "删除观看记录失败，请重试");
+            }
+          },
+        },
+      ]);
+    };
+
+    const isContinueWatching = progress !== undefined && progress > 0 && progress < 1;
+
+    const styles = createMobileStyles(cardWidth, cardHeight, spacing);
+
+    return (
+      <Animated.View style={[styles.wrapper, { opacity: fadeAnim }]} ref={ref}>
+        <TouchableOpacity
+          onPress={handlePress}
+          onLongPress={handleLongPress}
+          style={styles.pressable}
+          activeOpacity={0.8}
+          delayLongPress={800}
+        >
+          <View style={styles.card}>
+            <Image source={{ uri: api.getImageProxyUrl(poster) }} style={styles.poster} />
+            
+            {/* 进度条 */}
+            {isContinueWatching && (
+              <View style={styles.progressContainer}>
+                <View style={[styles.progressBar, { width: `${(progress || 0) * 100}%` }]} />
+              </View>
+            )}
+
+            {/* 继续观看标识 */}
+            {isContinueWatching && (
+              <View style={styles.continueWatchingBadge}>
+                <Play size={12} color="#ffffff" fill="#ffffff" />
+                <Text style={styles.continueWatchingText}>继续</Text>
+              </View>
+            )}
+
+            {/* 评分 */}
+            {rate && (
+              <View style={styles.ratingContainer}>
+                <Star size={10} color="#FFD700" fill="#FFD700" />
+                <Text style={styles.ratingText}>{rate}</Text>
+              </View>
+            )}
+
+            {/* 年份 */}
+            {year && (
+              <View style={styles.yearBadge}>
+                <Text style={styles.badgeText}>{year}</Text>
+              </View>
+            )}
+
+            {/* 来源 */}
+            {sourceName && (
+              <View style={styles.sourceNameBadge}>
+                <Text style={styles.badgeText}>{sourceName}</Text>
+              </View>
+            )}
+          </View>
+
+          <View style={styles.infoContainer}>
+            <ThemedText numberOfLines={2} style={styles.title}>{title}</ThemedText>
+            {isContinueWatching && (
+              <ThemedText style={styles.continueLabel} numberOfLines={1}>
+                第{episodeIndex! + 1}集 {Math.round((progress || 0) * 100)}%
+              </ThemedText>
+            )}
+          </View>
+        </TouchableOpacity>
+      </Animated.View>
+    );
+  }
+);
+
+VideoCardMobile.displayName = "VideoCardMobile";
+
+const createMobileStyles = (cardWidth: number, cardHeight: number, spacing: number) => {
+  return StyleSheet.create({
+    wrapper: {
+      width: cardWidth,
+      marginBottom: spacing,
+    },
+    pressable: {
+      alignItems: 'flex-start',
+    },
+    card: {
+      width: cardWidth,
+      height: cardHeight,
+      borderRadius: 8,
+      backgroundColor: "#222",
+      overflow: "hidden",
+    },
+    poster: {
+      width: "100%",
+      height: "100%",
+      resizeMode: 'cover',
+    },
+    progressContainer: {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: 3,
+      backgroundColor: "rgba(0, 0, 0, 0.6)",
+    },
+    progressBar: {
+      height: 3,
+      backgroundColor: Colors.dark.primary,
+    },
+    continueWatchingBadge: {
+      position: 'absolute',
+      top: 6,
+      left: 6,
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: Colors.dark.primary,
+      paddingHorizontal: 6,
+      paddingVertical: 3,
+      borderRadius: 4,
+    },
+    continueWatchingText: {
+      color: "white",
+      marginLeft: 3,
+      fontSize: 10,
+      fontWeight: "bold",
+    },
+    ratingContainer: {
+      position: "absolute",
+      top: 6,
+      right: 6,
+      flexDirection: "row",
+      alignItems: "center",
+      backgroundColor: "rgba(0, 0, 0, 0.7)",
+      borderRadius: 4,
+      paddingHorizontal: 4,
+      paddingVertical: 2,
+    },
+    ratingText: {
+      color: "#FFD700",
+      fontSize: 10,
+      fontWeight: "bold",
+      marginLeft: 2,
+    },
+    yearBadge: {
+      position: "absolute",
+      bottom: 24,
+      right: 6,
+      backgroundColor: "rgba(0, 0, 0, 0.7)",
+      borderRadius: 4,
+      paddingHorizontal: 4,
+      paddingVertical: 2,
+    },
+    sourceNameBadge: {
+      position: "absolute",
+      bottom: 6,
+      left: 6,
+      backgroundColor: "rgba(0, 0, 0, 0.7)",
+      borderRadius: 4,
+      paddingHorizontal: 4,
+      paddingVertical: 2,
+    },
+    badgeText: {
+      color: "white",
+      fontSize: 9,
+      fontWeight: "500",
+    },
+    infoContainer: {
+      width: cardWidth,
+      marginTop: 6,
+      paddingHorizontal: 2,
+    },
+    title: {
+      fontSize: 13,
+      lineHeight: 16,
+      marginBottom: 2,
+    },
+    continueLabel: {
+      color: Colors.dark.primary,
+      fontSize: 11,
+    },
+  });
+};
+
+export default VideoCardMobile;

components/VideoCard.tablet.tsx

@@ -0,0 +1,337 @@
+import React, { useState, useEffect, useCallback, useRef, forwardRef } from "react";
+import { View, Text, Image, StyleSheet, TouchableOpacity, Alert, Animated } from "react-native";
+import { useRouter } from "expo-router";
+import { Star, Play } from "lucide-react-native";
+import { PlayRecordManager } from "@/services/storage";
+import { API } from "@/services/api";
+import { ThemedText } from "@/components/ThemedText";
+import { Colors } from "@/constants/Colors";
+import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
+import { DeviceUtils } from "@/utils/DeviceUtils";
+import Logger from '@/utils/Logger';
+
+const logger = Logger.withTag('VideoCardTablet');
+
+interface VideoCardTabletProps extends React.ComponentProps<typeof TouchableOpacity> {
+  id: string;
+  source: string;
+  title: string;
+  poster: string;
+  year?: string;
+  rate?: string;
+  sourceName?: string;
+  progress?: number;
+  playTime?: number;
+  episodeIndex?: number;
+  totalEpisodes?: number;
+  onFocus?: () => void;
+  onRecordDeleted?: () => void;
+  api: API;
+}
+
+const VideoCardTablet = forwardRef<View, VideoCardTabletProps>(
+  (
+    {
+      id,
+      source,
+      title,
+      poster,
+      year,
+      rate,
+      sourceName,
+      progress,
+      episodeIndex,
+      onFocus,
+      onRecordDeleted,
+      api,
+      playTime = 0,
+    }: VideoCardTabletProps,
+    ref
+  ) => {
+    const router = useRouter();
+    const { cardWidth, cardHeight, spacing } = useResponsiveLayout();
+    const [fadeAnim] = useState(new Animated.Value(0));
+    const [isPressed, setIsPressed] = useState(false);
+
+    const longPressTriggered = useRef(false);
+    const scale = useRef(new Animated.Value(1)).current;
+
+    const handlePress = () => {
+      if (longPressTriggered.current) {
+        longPressTriggered.current = false;
+        return;
+      }
+      
+      if (progress !== undefined && episodeIndex !== undefined) {
+        router.push({
+          pathname: "/play",
+          params: { source, id, episodeIndex: episodeIndex - 1, title, position: playTime * 1000 },
+        });
+      } else {
+        router.push({
+          pathname: "/detail",
+          params: { source, q: title },
+        });
+      }
+    };
+
+    const handlePressIn = useCallback(() => {
+      setIsPressed(true);
+      Animated.spring(scale, {
+        toValue: 0.96,
+        damping: 15,
+        stiffness: 300,
+        useNativeDriver: true,
+      }).start();
+    }, [scale]);
+
+    const handlePressOut = useCallback(() => {
+      setIsPressed(false);
+      Animated.spring(scale, {
+        toValue: 1.0,
+        damping: 15,
+        stiffness: 300,
+        useNativeDriver: true,
+      }).start();
+    }, [scale]);
+
+    useEffect(() => {
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: DeviceUtils.getAnimationDuration(400),
+        delay: Math.random() * 150,
+        useNativeDriver: true,
+      }).start();
+    }, [fadeAnim]);
+
+    const handleLongPress = () => {
+      if (progress === undefined) return;
+
+      longPressTriggered.current = true;
+
+      Alert.alert("删除观看记录", `确定要删除"${title}"的观看记录吗？`, [
+        {
+          text: "取消",
+          style: "cancel",
+        },
+        {
+          text: "删除",
+          style: "destructive",
+          onPress: async () => {
+            try {
+              await PlayRecordManager.remove(source, id);
+              onRecordDeleted?.();
+            } catch (error) {
+              logger.info("Failed to delete play record:", error);
+              Alert.alert("错误", "删除观看记录失败，请重试");
+            }
+          },
+        },
+      ]);
+    };
+
+    const isContinueWatching = progress !== undefined && progress > 0 && progress < 1;
+
+    const animatedStyle = {
+      transform: [{ scale }],
+    };
+
+    const styles = createTabletStyles(cardWidth, cardHeight, spacing);
+
+    return (
+      <Animated.View style={[styles.wrapper, animatedStyle, { opacity: fadeAnim }]} ref={ref}>
+        <TouchableOpacity
+          onPress={handlePress}
+          onPressIn={handlePressIn}
+          onPressOut={handlePressOut}
+          onLongPress={handleLongPress}
+          style={styles.pressable}
+          activeOpacity={1}
+          delayLongPress={900}
+        >
+          <View style={[styles.card, isPressed && styles.cardPressed]}>
+            <Image source={{ uri: api.getImageProxyUrl(poster) }} style={styles.poster} />
+            
+            {/* 悬停效果遮罩 */}
+            {isPressed && (
+              <View style={styles.pressOverlay}>
+                {isContinueWatching && (
+                  <View style={styles.continueWatchingBadge}>
+                    <Play size={16} color="#ffffff" fill="#ffffff" />
+                    <Text style={styles.continueWatchingText}>继续观看</Text>
+                  </View>
+                )}
+              </View>
+            )}
+
+            {/* 进度条 */}
+            {isContinueWatching && (
+              <View style={styles.progressContainer}>
+                <View style={[styles.progressBar, { width: `${(progress || 0) * 100}%` }]} />
+              </View>
+            )}
+
+            {/* 评分 */}
+            {rate && (
+              <View style={styles.ratingContainer}>
+                <Star size={12} color="#FFD700" fill="#FFD700" />
+                <Text style={styles.ratingText}>{rate}</Text>
+              </View>
+            )}
+
+            {/* 年份 */}
+            {year && (
+              <View style={styles.yearBadge}>
+                <Text style={styles.badgeText}>{year}</Text>
+              </View>
+            )}
+
+            {/* 来源 */}
+            {sourceName && (
+              <View style={styles.sourceNameBadge}>
+                <Text style={styles.badgeText}>{sourceName}</Text>
+              </View>
+            )}
+          </View>
+
+          <View style={styles.infoContainer}>
+            <ThemedText numberOfLines={2} style={styles.title}>{title}</ThemedText>
+            {isContinueWatching && (
+              <View style={styles.infoRow}>
+                <ThemedText style={styles.continueLabel} numberOfLines={1}>
+                  第{episodeIndex! + 1}集 已观看 {Math.round((progress || 0) * 100)}%
+                </ThemedText>
+              </View>
+            )}
+          </View>
+        </TouchableOpacity>
+      </Animated.View>
+    );
+  }
+);
+
+VideoCardTablet.displayName = "VideoCardTablet";
+
+const createTabletStyles = (cardWidth: number, cardHeight: number, spacing: number) => {
+  return StyleSheet.create({
+    wrapper: {
+      width: cardWidth,
+      marginHorizontal: spacing / 2,
+      marginBottom: spacing,
+    },
+    pressable: {
+      alignItems: 'center',
+    },
+    card: {
+      width: cardWidth,
+      height: cardHeight,
+      borderRadius: 10,
+      backgroundColor: "#222",
+      overflow: "hidden",
+    },
+    cardPressed: {
+      borderColor: Colors.dark.primary,
+      borderWidth: 2,
+    },
+    poster: {
+      width: "100%",
+      height: "100%",
+      resizeMode: 'cover',
+    },
+    pressOverlay: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: "rgba(0,0,0,0.4)",
+      justifyContent: "center",
+      alignItems: "center",
+      borderRadius: 10,
+    },
+    progressContainer: {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: 4,
+      backgroundColor: "rgba(0, 0, 0, 0.8)",
+    },
+    progressBar: {
+      height: 4,
+      backgroundColor: Colors.dark.primary,
+    },
+    continueWatchingBadge: {
+      flexDirection: "row",
+      alignItems: "center",
+      backgroundColor: Colors.dark.primary,
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      borderRadius: 6,
+    },
+    continueWatchingText: {
+      color: "white",
+      marginLeft: 6,
+      fontSize: 14,
+      fontWeight: "bold",
+    },
+    ratingContainer: {
+      position: "absolute",
+      top: 8,
+      right: 8,
+      flexDirection: "row",
+      alignItems: "center",
+      backgroundColor: "rgba(0, 0, 0, 0.7)",
+      borderRadius: 6,
+      paddingHorizontal: 6,
+      paddingVertical: 3,
+    },
+    ratingText: {
+      color: "#FFD700",
+      fontSize: 11,
+      fontWeight: "bold",
+      marginLeft: 3,
+    },
+    yearBadge: {
+      position: "absolute",
+      top: 8,
+      right: 8,
+      backgroundColor: "rgba(0, 0, 0, 0.7)",
+      borderRadius: 6,
+      paddingHorizontal: 6,
+      paddingVertical: 3,
+    },
+    sourceNameBadge: {
+      position: "absolute",
+      top: 8,
+      left: 8,
+      backgroundColor: "rgba(0, 0, 0, 0.7)",
+      borderRadius: 6,
+      paddingHorizontal: 6,
+      paddingVertical: 3,
+    },
+    badgeText: {
+      color: "white",
+      fontSize: 11,
+      fontWeight: "bold",
+    },
+    infoContainer: {
+      width: cardWidth,
+      marginTop: 8,
+      alignItems: "flex-start",
+      paddingHorizontal: 4,
+    },
+    infoRow: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      width: "100%",
+      marginTop: 2,
+    },
+    title: {
+      fontSize: 15,
+      lineHeight: 18,
+    },
+    continueLabel: {
+      color: Colors.dark.primary,
+      fontSize: 12,
+    },
+  });
+};
+
+export default VideoCardTablet;

components/VideoCard.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { useResponsiveLayout } from '@/hooks/useResponsiveLayout';
+import { API } from '@/services/api';
+
+// 导入不同平台的VideoCard组件
+import VideoCardMobile from './VideoCard.mobile';
+import VideoCardTablet from './VideoCard.tablet';
+import VideoCardTV from './VideoCard.tv';
+
+interface VideoCardProps extends React.ComponentProps<typeof TouchableOpacity> {
+  id: string;
+  source: string;
+  title: string;
+  poster: string;
+  year?: string;
+  rate?: string;
+  sourceName?: string;
+  progress?: number;
+  playTime?: number;
+  episodeIndex?: number;
+  totalEpisodes?: number;
+  onFocus?: () => void;
+  onRecordDeleted?: () => void;
+  api: API;
+}
+
+/**
+ * 响应式VideoCard组件
+ * 根据设备类型自动选择合适的VideoCard实现
+ */
+const VideoCard = React.forwardRef<any, VideoCardProps>((props, ref) => {
+  const { deviceType } = useResponsiveLayout();
+
+  switch (deviceType) {
+    case 'mobile':
+      return <VideoCardMobile {...props} ref={ref} />;
+    
+    case 'tablet':
+      return <VideoCardTablet {...props} ref={ref} />;
+    
+    case 'tv':
+    default:
+      return <VideoCardTV {...props} ref={ref} />;
+  }
+});
+
+VideoCard.displayName = 'VideoCard';
+
+export default VideoCard;

components/VideoCard.tv.tsx

@@ -1,12 +1,15 @@
-import React, { useState, useCallback, useRef, forwardRef } from "react";
-import { View, Text, Image, StyleSheet, TouchableOpacity, Alert } from "react-native";
-import Animated, { useSharedValue, useAnimatedStyle, withSpring } from "react-native-reanimated";
+import React, { useState, useEffect, useCallback, useRef, forwardRef } from "react";
+import { View, Text, Image, StyleSheet, Pressable, TouchableOpacity, Alert, Animated, Platform } from "react-native";
 import { useRouter } from "expo-router";
 import { Star, Play } from "lucide-react-native";
 import { PlayRecordManager } from "@/services/storage";
 import { API } from "@/services/api";
 import { ThemedText } from "@/components/ThemedText";
 import { Colors } from "@/constants/Colors";
+import Logger from '@/utils/Logger';
+import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
+
+const logger = Logger.withTag('VideoCardTV');
 
 interface VideoCardProps extends React.ComponentProps<typeof TouchableOpacity> {
   id: string;
@@ -46,16 +49,17 @@ const VideoCard = forwardRef<View, VideoCardProps>(
   ) => {
     const router = useRouter();
     const [isFocused, setIsFocused] = useState(false);
+    const [fadeAnim] = useState(new Animated.Value(0));
 
     const longPressTriggered = useRef(false);
 
-    const scale = useSharedValue(1);
+    const scale = useRef(new Animated.Value(1)).current;
 
-    const animatedStyle = useAnimatedStyle(() => {
-      return {
-        transform: [{ scale: scale.value }],
-      };
-    });
+    const deviceType = useResponsiveLayout().deviceType;
+
+    const animatedStyle = {
+      transform: [{ scale }],
+    };
 
     const handlePress = () => {
       if (longPressTriggered.current) {
@@ -78,15 +82,32 @@ const VideoCard = forwardRef<View, VideoCardProps>(
 
     const handleFocus = useCallback(() => {
       setIsFocused(true);
-      scale.value = withSpring(1.05, { damping: 15, stiffness: 200 });
+      Animated.spring(scale, {
+        toValue: 1.05,
+        damping: 15,
+        stiffness: 200,
+        useNativeDriver: true,
+      }).start();
       onFocus?.();
     }, [scale, onFocus]);
 
     const handleBlur = useCallback(() => {
       setIsFocused(false);
-      scale.value = withSpring(1.0);
+      Animated.spring(scale, {
+        toValue: 1.0,
+        useNativeDriver: true,
+      }).start();
     }, [scale]);
 
+    useEffect(() => {
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 400,
+        delay: Math.random() * 200, // 随机延迟创造交错效果
+        useNativeDriver: true,
+      }).start();
+    }, [fadeAnim]);
+
     const handleLongPress = () => {
       // Only allow long press for items with progress (play records)
       if (progress === undefined) return;
@@ -116,7 +137,7 @@ const VideoCard = forwardRef<View, VideoCardProps>(
                 router.replace("/");
               }
             } catch (error) {
-              console.info("Failed to delete play record:", error);
+              logger.info("Failed to delete play record:", error);
               Alert.alert("错误", "删除观看记录失败，请重试");
             }
           },
@@ -128,14 +149,20 @@ const VideoCard = forwardRef<View, VideoCardProps>(
     const isContinueWatching = progress !== undefined && progress > 0 && progress < 1;
 
     return (
-      <Animated.View style={[styles.wrapper, animatedStyle]}>
-        <TouchableOpacity
+      <Animated.View style={[styles.wrapper, animatedStyle, { opacity: fadeAnim }]}>
+        <Pressable
+          android_ripple={Platform.isTV || deviceType !== 'tv' ? { color: 'transparent' } : { color: Colors.dark.link }}
           onPress={handlePress}
           onLongPress={handleLongPress}
           onFocus={handleFocus}
           onBlur={handleBlur}
-          style={styles.pressable}
-          activeOpacity={1}
+          style={({ pressed }) => [
+            styles.pressable,
+            {
+              zIndex: pressed ? 999 : 1, // 确保按下时有最高优先级
+            },
+          ]}
+          // activeOpacity={1}
           delayLongPress={1000}
         >
           <View style={styles.card}>
@@ -180,12 +207,12 @@ const VideoCard = forwardRef<View, VideoCardProps>(
             {isContinueWatching && (
               <View style={styles.infoRow}>
                 <ThemedText style={styles.continueLabel}>
-                  第{episodeIndex! + 1}集 已观看 {Math.round((progress || 0) * 100)}%
+                  第{episodeIndex}集 已观看 {Math.round((progress || 0) * 100)}%
                 </ThemedText>
               </View>
             )}
           </View>
-        </TouchableOpacity>
+        </Pressable>
       </Animated.View>
     );
   }
@@ -203,9 +230,14 @@ const styles = StyleSheet.create({
     marginHorizontal: 8,
   },
   pressable: {
+    width: CARD_WIDTH + 20,
+    height: CARD_HEIGHT + 60,
+    justifyContent: 'center',
     alignItems: "center",
+    overflow: "visible",
   },
   card: {
+    marginTop: 10,
     width: CARD_WIDTH,
     height: CARD_HEIGHT,
     borderRadius: 8,
@@ -260,9 +292,9 @@ const styles = StyleSheet.create({
   infoContainer: {
     width: CARD_WIDTH,
     marginTop: 8,
-    alignItems: "flex-start", // Align items to the start
+    alignItems: "flex-start",
     marginBottom: 16,
-    paddingHorizontal: 4, // Add some padding
+    paddingHorizontal: 4,
   },
   infoRow: {
     flexDirection: "row",

components/navigation/MobileBottomTabNavigator.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity, Text, Platform } from 'react-native';
+import { useRouter, usePathname } from 'expo-router';
+import { Home, Search, Heart, Settings, Tv } from 'lucide-react-native';
+import { Colors } from '@/constants/Colors';
+import { useResponsiveLayout } from '@/hooks/useResponsiveLayout';
+import { DeviceUtils } from '@/utils/DeviceUtils';
+
+interface TabItem {
+  key: string;
+  label: string;
+  icon: React.ComponentType<any>;
+  route: string;
+}
+
+const tabs: TabItem[] = [
+  { key: 'home', label: '首页', icon: Home, route: '/' },
+  { key: 'search', label: '搜索', icon: Search, route: '/search' },
+  { key: 'live', label: '直播', icon: Tv, route: '/live' },
+  { key: 'favorites', label: '收藏', icon: Heart, route: '/favorites' },
+  { key: 'settings', label: '设置', icon: Settings, route: '/settings' },
+];
+
+const MobileBottomTabNavigator: React.FC = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { spacing, deviceType } = useResponsiveLayout();
+  
+  // 在手机端过滤掉直播 tab
+  const filteredTabs = tabs.filter(tab => 
+    deviceType !== 'mobile' || tab.key !== 'live'
+  );
+  
+  const handleTabPress = (route: string) => {
+    if (route === '/') {
+      router.push('/');
+    } else {
+      router.push(route as any);
+    }
+  };
+
+  const isTabActive = (route: string) => {
+    if (route === '/' && pathname === '/') return true;
+    if (route !== '/' && pathname === route) return true;
+    return false;
+  };
+
+  const dynamicStyles = createStyles(spacing);
+
+  return (
+    <View style={dynamicStyles.container}>
+      {filteredTabs.map((tab) => {
+        const isActive = isTabActive(tab.route);
+        const IconComponent = tab.icon;
+        
+        return (
+          <TouchableOpacity
+            key={tab.key}
+            style={[dynamicStyles.tab, isActive && dynamicStyles.activeTab]}
+            onPress={() => handleTabPress(tab.route)}
+            activeOpacity={0.7}
+          >
+            <IconComponent
+              size={20}
+              color={isActive ? Colors.dark.primary : '#888'}
+              strokeWidth={isActive ? 2.5 : 2}
+            />
+            <Text style={[
+              dynamicStyles.tabLabel,
+              isActive && dynamicStyles.activeTabLabel
+            ]}>
+              {tab.label}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+const createStyles = (spacing: number) => {
+  const minTouchTarget = DeviceUtils.getMinTouchTargetSize();
+  
+  return StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      backgroundColor: '#1c1c1e',
+      borderTopWidth: 1,
+      borderTopColor: '#333',
+      paddingTop: spacing / 2,
+      paddingBottom: Platform.OS === 'ios' ? spacing * 2 : spacing,
+      paddingHorizontal: spacing,
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: -2,
+      },
+      shadowOpacity: 0.1,
+      shadowRadius: 4,
+      elevation: 10,
+    },
+    tab: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: minTouchTarget,
+      paddingVertical: spacing / 2,
+      borderRadius: 8,
+    },
+    activeTab: {
+      backgroundColor: 'rgba(64, 156, 255, 0.1)',
+    },
+    tabLabel: {
+      fontSize: 11,
+      color: '#888',
+      marginTop: 2,
+      fontWeight: '500',
+    },
+    activeTabLabel: {
+      color: Colors.dark.primary,
+      fontWeight: '600',
+    },
+  });
+};
+
+export default MobileBottomTabNavigator;

components/navigation/MobileTabContainer.tsx

@@ -0,0 +1,144 @@
+import React, { useState } from 'react';
+import { View, StyleSheet, TouchableOpacity, Text, Platform } from 'react-native';
+import { useRouter, usePathname } from 'expo-router';
+import { Home, Search, Heart, Settings, Tv } from 'lucide-react-native';
+import { Colors } from '@/constants/Colors';
+import { useResponsiveLayout } from '@/hooks/useResponsiveLayout';
+import { DeviceUtils } from '@/utils/DeviceUtils';
+
+interface TabItem {
+  key: string;
+  label: string;
+  icon: React.ComponentType<any>;
+  route: string;
+}
+
+const tabs: TabItem[] = [
+  { key: 'home', label: '首页', icon: Home, route: '/' },
+  { key: 'search', label: '搜索', icon: Search, route: '/search' },
+  { key: 'live', label: '直播', icon: Tv, route: '/live' },
+  { key: 'favorites', label: '收藏', icon: Heart, route: '/favorites' },
+  { key: 'settings', label: '设置', icon: Settings, route: '/settings' },
+];
+
+interface MobileTabContainerProps {
+  children: React.ReactNode;
+}
+
+const MobileTabContainer: React.FC<MobileTabContainerProps> = ({ children }) => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { spacing, deviceType } = useResponsiveLayout();
+  
+  // 在手机端过滤掉直播 tab
+  const filteredTabs = tabs.filter(tab => 
+    deviceType !== 'mobile' || tab.key !== 'live'
+  );
+  
+  const handleTabPress = (route: string) => {
+    if (route === '/') {
+      router.push('/');
+    } else {
+      router.push(route as any);
+    }
+  };
+
+  const isTabActive = (route: string) => {
+    if (route === '/' && pathname === '/') return true;
+    if (route !== '/' && pathname === route) return true;
+    return false;
+  };
+
+  const dynamicStyles = createStyles(spacing);
+
+  return (
+    <View style={dynamicStyles.container}>
+      {/* 内容区域 */}
+      <View style={dynamicStyles.content}>
+        {children}
+      </View>
+      
+      {/* 底部导航栏 */}
+      <View style={dynamicStyles.tabBar}>
+        {filteredTabs.map((tab) => {
+          const isActive = isTabActive(tab.route);
+          const IconComponent = tab.icon;
+          
+          return (
+            <TouchableOpacity
+              key={tab.key}
+              style={[dynamicStyles.tab, isActive && dynamicStyles.activeTab]}
+              onPress={() => handleTabPress(tab.route)}
+              activeOpacity={0.7}
+            >
+              <IconComponent
+                size={20}
+                color={isActive ? Colors.dark.primary : '#888'}
+                strokeWidth={isActive ? 2.5 : 2}
+              />
+              <Text style={[
+                dynamicStyles.tabLabel,
+                isActive && dynamicStyles.activeTabLabel
+              ]}>
+                {tab.label}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const createStyles = (spacing: number) => {
+  const minTouchTarget = DeviceUtils.getMinTouchTargetSize();
+  
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    content: {
+      flex: 1,
+    },
+    tabBar: {
+      flexDirection: 'row',
+      backgroundColor: '#1c1c1e',
+      borderTopWidth: 1,
+      borderTopColor: '#333',
+      paddingTop: spacing / 2,
+      paddingBottom: Platform.OS === 'ios' ? spacing * 2 : spacing,
+      paddingHorizontal: spacing,
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: -2,
+      },
+      shadowOpacity: 0.1,
+      shadowRadius: 4,
+      elevation: 10,
+    },
+    tab: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: minTouchTarget,
+      paddingVertical: spacing / 2,
+      borderRadius: 8,
+    },
+    activeTab: {
+      backgroundColor: 'rgba(64, 156, 255, 0.1)',
+    },
+    tabLabel: {
+      fontSize: 11,
+      color: '#888',
+      marginTop: 2,
+      fontWeight: '500',
+    },
+    activeTabLabel: {
+      color: Colors.dark.primary,
+      fontWeight: '600',
+    },
+  });
+};
+
+export default MobileTabContainer;

components/navigation/ResponsiveHeader.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity, StatusBar, Platform } from 'react-native';
+import { useRouter } from 'expo-router';
+import { ArrowLeft } from 'lucide-react-native';
+import { ThemedText } from '@/components/ThemedText';
+import { useResponsiveLayout } from '@/hooks/useResponsiveLayout';
+import { DeviceUtils } from '@/utils/DeviceUtils';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+interface ResponsiveHeaderProps {
+  title?: string;
+  showBackButton?: boolean;
+  rightComponent?: React.ReactNode;
+  onBackPress?: () => void;
+}
+
+const ResponsiveHeader: React.FC<ResponsiveHeaderProps> = ({
+  title,
+  showBackButton = false,
+  rightComponent,
+  onBackPress,
+}) => {
+  const router = useRouter();
+  const { deviceType, spacing } = useResponsiveLayout();
+  const insets = useSafeAreaInsets();
+  
+  // TV端不显示Header，使用现有的页面内导航
+  if (deviceType === 'tv') {
+    return null;
+  }
+
+  const handleBackPress = () => {
+    if (onBackPress) {
+      onBackPress();
+    } else if (router.canGoBack()) {
+      router.back();
+    }
+  };
+
+  const dynamicStyles = createStyles(spacing, deviceType, insets);
+
+  return (
+    <>
+      {Platform.OS === 'android' && <StatusBar backgroundColor="#1c1c1e" barStyle="light-content" />}
+      <View style={dynamicStyles.container}>
+        <View style={dynamicStyles.content}>
+          {/* 左侧区域 */}
+          <View style={dynamicStyles.leftSection}>
+            {showBackButton && (
+              <TouchableOpacity
+                onPress={handleBackPress}
+                style={dynamicStyles.backButton}
+                activeOpacity={0.7}
+              >
+                <ArrowLeft size={20} color="#fff" strokeWidth={2} />
+              </TouchableOpacity>
+            )}
+          </View>
+
+          {/* 中间标题区域 */}
+          <View style={dynamicStyles.centerSection}>
+            {title && (
+              <ThemedText style={dynamicStyles.title} numberOfLines={1}>
+                {title}
+              </ThemedText>
+            )}
+          </View>
+
+          {/* 右侧区域 */}
+          <View style={dynamicStyles.rightSection}>
+            {rightComponent}
+          </View>
+        </View>
+      </View>
+    </>
+  );
+};
+
+const createStyles = (spacing: number, deviceType: string, insets: any) => {
+  const minTouchTarget = DeviceUtils.getMinTouchTargetSize();
+  
+  return StyleSheet.create({
+    container: {
+      backgroundColor: '#1c1c1e',
+      paddingTop: insets.top,
+      borderBottomWidth: 1,
+      borderBottomColor: '#333',
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: 2,
+      },
+      shadowOpacity: 0.1,
+      shadowRadius: 3,
+      elevation: 5,
+    },
+    content: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: spacing,
+      paddingVertical: spacing * 0.75,
+      minHeight: minTouchTarget + spacing,
+    },
+    leftSection: {
+      width: minTouchTarget + spacing,
+      justifyContent: 'flex-start',
+      alignItems: 'flex-start',
+    },
+    centerSection: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    rightSection: {
+      width: minTouchTarget + spacing,
+      justifyContent: 'flex-end',
+      alignItems: 'flex-end',
+      flexDirection: 'row',
+    },
+    backButton: {
+      width: minTouchTarget,
+      height: minTouchTarget,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: minTouchTarget / 2,
+    },
+    title: {
+      fontSize: DeviceUtils.getOptimalFontSize(deviceType === 'mobile' ? 18 : 20),
+      fontWeight: '600',
+      color: '#fff',
+    },
+  });
+};
+
+export default ResponsiveHeader;

components/navigation/ResponsiveNavigation.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useResponsiveLayout } from '@/hooks/useResponsiveLayout';
+import MobileTabContainer from './MobileTabContainer';
+import TabletSidebarNavigator from './TabletSidebarNavigator';
+
+interface ResponsiveNavigationProps {
+  children: React.ReactNode;
+}
+
+const ResponsiveNavigation: React.FC<ResponsiveNavigationProps> = ({ children }) => {
+  const { deviceType } = useResponsiveLayout();
+
+  switch (deviceType) {
+    case 'mobile':
+      // 移动端使用Tab容器包装children
+      return <MobileTabContainer>{children}</MobileTabContainer>;
+    
+    case 'tablet':
+      return (
+        <TabletSidebarNavigator>
+          {children}
+        </TabletSidebarNavigator>
+      );
+    
+    case 'tv':
+    default:
+      // TV端保持原有的Stack导航，不需要额外的导航容器
+      return <>{children}</>;
+  }
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+  },
+});
+
+export default ResponsiveNavigation;

components/navigation/TabletSidebarNavigator.tsx

@@ -0,0 +1,240 @@
+import React, { useState } from 'react';
+import { View, StyleSheet, TouchableOpacity, Text, ScrollView } from 'react-native';
+import { useRouter, usePathname } from 'expo-router';
+import { Home, Search, Heart, Settings, Tv, Menu, X } from 'lucide-react-native';
+import { Colors } from '@/constants/Colors';
+import { useResponsiveLayout } from '@/hooks/useResponsiveLayout';
+import { DeviceUtils } from '@/utils/DeviceUtils';
+import { ThemedText } from '@/components/ThemedText';
+
+interface SidebarItem {
+  key: string;
+  label: string;
+  icon: React.ComponentType<any>;
+  route: string;
+  section?: string;
+}
+
+const sidebarItems: SidebarItem[] = [
+  { key: 'home', label: '首页', icon: Home, route: '/', section: 'main' },
+  { key: 'search', label: '搜索', icon: Search, route: '/search', section: 'main' },
+  { key: 'live', label: '直播', icon: Tv, route: '/live', section: 'main' },
+  { key: 'favorites', label: '收藏', icon: Heart, route: '/favorites', section: 'user' },
+  { key: 'settings', label: '设置', icon: Settings, route: '/settings', section: 'user' },
+];
+
+interface TabletSidebarNavigatorProps {
+  children: React.ReactNode;
+  collapsed?: boolean;
+  onToggleCollapse?: (collapsed: boolean) => void;
+}
+
+const TabletSidebarNavigator: React.FC<TabletSidebarNavigatorProps> = ({
+  children,
+  collapsed: controlledCollapsed,
+  onToggleCollapse,
+}) => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { spacing, isPortrait } = useResponsiveLayout();
+  
+  const [internalCollapsed, setInternalCollapsed] = useState(false);
+  
+  // 使用外部控制的collapsed状态，如果没有则使用内部状态
+  const collapsed = controlledCollapsed !== undefined ? controlledCollapsed : internalCollapsed;
+  
+  const handleToggleCollapse = () => {
+    if (onToggleCollapse) {
+      onToggleCollapse(!collapsed);
+    } else {
+      setInternalCollapsed(!collapsed);
+    }
+  };
+
+  const handleItemPress = (route: string) => {
+    if (route === '/') {
+      router.push('/');
+    } else {
+      router.push(route as any);
+    }
+    
+    // 在竖屏模式下，导航后自动折叠侧边栏
+    if (isPortrait && !controlledCollapsed) {
+      setInternalCollapsed(true);
+    }
+  };
+
+  const isItemActive = (route: string) => {
+    if (route === '/' && pathname === '/') return true;
+    if (route !== '/' && pathname === route) return true;
+    return false;
+  };
+
+  const sidebarWidth = collapsed ? 60 : 200;
+  const dynamicStyles = createStyles(spacing, sidebarWidth, isPortrait);
+
+  const renderSidebarItems = () => {
+    const sections = ['main', 'user'];
+    
+    return sections.map((section) => {
+      const sectionItems = sidebarItems.filter(item => item.section === section);
+      
+      return (
+        <View key={section} style={dynamicStyles.section}>
+          {!collapsed && (
+            <ThemedText style={dynamicStyles.sectionTitle}>
+              {section === 'main' ? '主要功能' : '用户'}
+            </ThemedText>
+          )}
+          {sectionItems.map((item) => {
+            const isActive = isItemActive(item.route);
+            const IconComponent = item.icon;
+            
+            return (
+              <TouchableOpacity
+                key={item.key}
+                style={[dynamicStyles.sidebarItem, isActive && dynamicStyles.activeSidebarItem]}
+                onPress={() => handleItemPress(item.route)}
+                activeOpacity={0.7}
+              >
+                <IconComponent
+                  size={20}
+                  color={isActive ? Colors.dark.primary : '#ccc'}
+                  strokeWidth={isActive ? 2.5 : 2}
+                />
+                {!collapsed && (
+                  <Text style={[
+                    dynamicStyles.sidebarItemLabel,
+                    isActive && dynamicStyles.activeSidebarItemLabel
+                  ]}>
+                    {item.label}
+                  </Text>
+                )}
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      );
+    });
+  };
+
+  return (
+    <View style={dynamicStyles.container}>
+      {/* 侧边栏 */}
+      <View style={[dynamicStyles.sidebar, collapsed && dynamicStyles.collapsedSidebar]}>
+        {/* 侧边栏头部 */}
+        <View style={dynamicStyles.sidebarHeader}>
+          <TouchableOpacity
+            onPress={handleToggleCollapse}
+            style={dynamicStyles.toggleButton}
+            activeOpacity={0.7}
+          >
+            {collapsed ? (
+              <Menu size={20} color="#ccc" />
+            ) : (
+              <X size={20} color="#ccc" />
+            )}
+          </TouchableOpacity>
+          {!collapsed && (
+            <ThemedText style={dynamicStyles.appTitle}>OrionTV</ThemedText>
+          )}
+        </View>
+
+        {/* 侧边栏内容 */}
+        <ScrollView style={dynamicStyles.sidebarContent} showsVerticalScrollIndicator={false}>
+          {renderSidebarItems()}
+        </ScrollView>
+      </View>
+
+      {/* 主内容区域 */}
+      <View style={dynamicStyles.content}>
+        {children}
+      </View>
+    </View>
+  );
+};
+
+const createStyles = (spacing: number, sidebarWidth: number, isPortrait: boolean) => {
+  const minTouchTarget = DeviceUtils.getMinTouchTargetSize();
+  
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      flexDirection: 'row',
+    },
+    sidebar: {
+      width: sidebarWidth,
+      backgroundColor: '#1c1c1e',
+      borderRightWidth: 1,
+      borderRightColor: '#333',
+      zIndex: isPortrait ? 1000 : 1, // 在竖屏时提高层级
+    },
+    collapsedSidebar: {
+      width: 60,
+    },
+    sidebarHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: spacing,
+      paddingVertical: spacing * 1.5,
+      borderBottomWidth: 1,
+      borderBottomColor: '#333',
+    },
+    toggleButton: {
+      width: minTouchTarget,
+      height: minTouchTarget,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: 8,
+    },
+    appTitle: {
+      fontSize: 18,
+      fontWeight: 'bold',
+      marginLeft: spacing,
+      color: Colors.dark.primary,
+    },
+    sidebarContent: {
+      flex: 1,
+      paddingTop: spacing,
+    },
+    section: {
+      marginBottom: spacing * 1.5,
+    },
+    sectionTitle: {
+      fontSize: 12,
+      color: '#888',
+      fontWeight: '600',
+      textTransform: 'uppercase',
+      marginBottom: spacing / 2,
+      marginHorizontal: spacing,
+    },
+    sidebarItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: spacing,
+      paddingVertical: spacing * 0.75,
+      marginHorizontal: spacing / 2,
+      borderRadius: 8,
+      minHeight: minTouchTarget,
+    },
+    activeSidebarItem: {
+      backgroundColor: 'rgba(64, 156, 255, 0.15)',
+    },
+    sidebarItemLabel: {
+      fontSize: 14,
+      color: '#ccc',
+      marginLeft: spacing,
+      fontWeight: '500',
+    },
+    activeSidebarItemLabel: {
+      color: Colors.dark.primary,
+      fontWeight: '600',
+    },
+    content: {
+      flex: 1,
+      backgroundColor: '#000',
+    },
+  });
+};
+
+export default TabletSidebarNavigator;

components/settings/APIConfigSection.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useImperativeHandle, forwardRef } from "react";
-import { View, TextInput, StyleSheet, Animated } from "react-native";
+import { View, TextInput, StyleSheet, Animated, Platform } from "react-native";
 import { useTVEventHandler } from "react-native";
 import { ThemedText } from "@/components/ThemedText";
 import { SettingsSection } from "./SettingsSection";
@@ -7,11 +7,14 @@ import { useSettingsStore } from "@/stores/settingsStore";
 import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import { useButtonAnimation } from "@/hooks/useAnimation";
 import { Colors } from "@/constants/Colors";
+import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
 
 interface APIConfigSectionProps {
   onChanged: () => void;
   onFocus?: () => void;
   onBlur?: () => void;
+  onPress?: () => void;
+  hideDescription?: boolean;
 }
 
 export interface APIConfigSectionRef {
@@ -19,13 +22,14 @@ export interface APIConfigSectionRef {
 }
 
 export const APIConfigSection = forwardRef<APIConfigSectionRef, APIConfigSectionProps>(
-  ({ onChanged, onFocus, onBlur }, ref) => {
+  ({ onChanged, onFocus, onBlur, onPress, hideDescription = false }, ref) => {
     const { apiBaseUrl, setApiBaseUrl, remoteInputEnabled } = useSettingsStore();
     const { serverUrl } = useRemoteControlStore();
     const [isInputFocused, setIsInputFocused] = useState(false);
     const [isSectionFocused, setIsSectionFocused] = useState(false);
     const inputRef = useRef<TextInput>(null);
     const inputAnimationStyle = useButtonAnimation(isSectionFocused, 1.01);
+    const deviceType = useResponsiveLayout().deviceType;
 
     const handleUrlChange = (url: string) => {
       setApiBaseUrl(url);
@@ -59,14 +63,32 @@ export const APIConfigSection = forwardRef<APIConfigSectionRef, APIConfigSection
       [isSectionFocused]
     );
 
+    const handlePress = () => {
+      inputRef.current?.focus();
+      onPress?.();
+    }
+
     useTVEventHandler(handleTVEvent);
 
+    const [selection, setSelection] = useState<{ start: number; end: number }>({
+      start: 0,
+      end: 0,
+    });
+    // 当用户手动移动光标或选中文本时，同步到 state（可选）
+    const onSelectionChange = ({
+      nativeEvent: { selection },
+    }: any) => {
+      setSelection(selection);
+    };
+
     return (
-      <SettingsSection focusable onFocus={handleSectionFocus} onBlur={handleSectionBlur}>
+      <SettingsSection focusable onFocus={handleSectionFocus} onBlur={handleSectionBlur}
+        {...Platform.isTV || deviceType !== 'tv' ? undefined : { onPress: handlePress }}
+      >
         <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>
@@ -80,7 +102,21 @@ export const APIConfigSection = forwardRef<APIConfigSectionRef, APIConfigSection
               placeholderTextColor="#888"
               autoCapitalize="none"
               autoCorrect={false}
-              onFocus={() => setIsInputFocused(true)}
+              onFocus={() => {
+                setIsInputFocused(true);
+                // 将光标移动到文本末尾
+                const end = apiBaseUrl.length;
+                setSelection({ start: end, end: end });
+                // 有时需要延迟一下，让系统先完成 focus 再设置 selection
+                //（在 Android 上更可靠）
+                setTimeout(() => {
+                  // 对于受控的 selection 已经生效，这里仅作保险
+                  inputRef.current?.setNativeProps({ selection: { start: end, end: end } });
+                }, 0);
+              }}
+              selection={selection}
+              onSelectionChange={onSelectionChange} // 可选
+
               onBlur={() => setIsInputFocused(false)}
             />
           </Animated.View>

components/settings/LiveStreamSection.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useImperativeHandle, forwardRef } from "react";
-import { View, TextInput, StyleSheet, Animated } from "react-native";
+import { View, TextInput, StyleSheet, Animated, Platform } from "react-native";
 import { useTVEventHandler } from "react-native";
 import { ThemedText } from "@/components/ThemedText";
 import { SettingsSection } from "./SettingsSection";
@@ -7,11 +7,13 @@ import { useSettingsStore } from "@/stores/settingsStore";
 import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import { useButtonAnimation } from "@/hooks/useAnimation";
 import { Colors } from "@/constants/Colors";
+import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
 
 interface LiveStreamSectionProps {
   onChanged: () => void;
   onFocus?: () => void;
   onBlur?: () => void;
+  onPress?: () => void;
 }
 
 export interface LiveStreamSectionRef {
@@ -19,13 +21,14 @@ export interface LiveStreamSectionRef {
 }
 
 export const LiveStreamSection = forwardRef<LiveStreamSectionRef, LiveStreamSectionProps>(
-  ({ onChanged, onFocus, onBlur }, ref) => {
+  ({ onChanged, onFocus, onBlur, onPress }, ref) => {
     const { m3uUrl, setM3uUrl, remoteInputEnabled } = useSettingsStore();
     const { serverUrl } = useRemoteControlStore();
     const [isInputFocused, setIsInputFocused] = useState(false);
     const [isSectionFocused, setIsSectionFocused] = useState(false);
     const inputRef = useRef<TextInput>(null);
     const inputAnimationStyle = useButtonAnimation(isSectionFocused, 1.01);
+    const deviceType = useResponsiveLayout().deviceType;
 
     const handleUrlChange = (url: string) => {
       setM3uUrl(url);
@@ -49,6 +52,11 @@ export const LiveStreamSection = forwardRef<LiveStreamSectionRef, LiveStreamSect
       onBlur?.();
     };
 
+    const handlePress = () => {
+      inputRef.current?.focus();
+      onPress?.();
+    }
+
     const handleTVEvent = React.useCallback(
       (event: any) => {
         if (isSectionFocused && event.eventType === "select") {
@@ -60,8 +68,22 @@ export const LiveStreamSection = forwardRef<LiveStreamSectionRef, LiveStreamSect
 
     useTVEventHandler(handleTVEvent);
 
+
+        const [selection, setSelection] = useState<{ start: number; end: number }>({
+          start: 0,
+          end: 0,
+        });
+        // 当用户手动移动光标或选中文本时，同步到 state（可选）
+        const onSelectionChange = ({
+          nativeEvent: { selection },
+        }: any) => {
+          setSelection(selection);
+        };
+
     return (
-      <SettingsSection focusable onFocus={handleSectionFocus} onBlur={handleSectionBlur}>
+      <SettingsSection focusable onFocus={handleSectionFocus} onBlur={handleSectionBlur}
+        onPress={Platform.isTV || deviceType !== 'tv' ? undefined : handlePress}
+      >
         <View style={styles.inputContainer}>
           <View style={styles.titleContainer}>
             <ThemedText style={styles.sectionTitle}>直播源地址</ThemedText>
@@ -79,8 +101,23 @@ export const LiveStreamSection = forwardRef<LiveStreamSectionRef, LiveStreamSect
               placeholderTextColor="#888"
               autoCapitalize="none"
               autoCorrect={false}
-              onFocus={() => setIsInputFocused(true)}
+              onFocus={() => {
+                setIsInputFocused(true);
+                // 将光标移动到文本末尾
+                const end = m3uUrl.length;
+                setSelection({ start: end, end: end });
+                // 有时需要延迟一下，让系统先完成 focus 再设置 selection
+                //（在 Android 上更可靠）
+                setTimeout(() => {
+                  // 对于受控的 selection 已经生效，这里仅作保险
+                  inputRef.current?.setNativeProps({ selection: { start: end, end: end } });
+                }, 0);
+              }}
+              selection={selection}
+              onSelectionChange={onSelectionChange} // 可选
+
               onBlur={() => setIsInputFocused(false)}
+            // onPress={handlePress}
             />
           </Animated.View>
         </View>

components/settings/RemoteInputSection.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { View, Switch, StyleSheet, Pressable, Animated } from "react-native";
+import { View, Switch, StyleSheet, Pressable, Animated, Platform, TouchableOpacity } from "react-native";
 import { useTVEventHandler } from "react-native";
 import { ThemedText } from "@/components/ThemedText";
 import { SettingsSection } from "./SettingsSection";
@@ -7,18 +7,21 @@ import { useSettingsStore } from "@/stores/settingsStore";
 import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import { useButtonAnimation } from "@/hooks/useAnimation";
 import { Colors } from "@/constants/Colors";
+import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
 
 interface RemoteInputSectionProps {
   onChanged: () => void;
   onFocus?: () => void;
   onBlur?: () => void;
+  onPress?: () => void;
 }
 
-export const RemoteInputSection: React.FC<RemoteInputSectionProps> = ({ onChanged, onFocus, onBlur }) => {
+export const RemoteInputSection: React.FC<RemoteInputSectionProps> = ({ onChanged, onFocus, onBlur, onPress }) => {
   const { remoteInputEnabled, setRemoteInputEnabled } = useSettingsStore();
   const { isServerRunning, serverUrl, error } = useRemoteControlStore();
   const [isFocused, setIsFocused] = React.useState(false);
   const animationStyle = useButtonAnimation(isFocused, 1.2);
+  const deviceType = useResponsiveLayout().deviceType;
 
   const handleToggle = useCallback(
     (enabled: boolean) => {
@@ -38,6 +41,10 @@ export const RemoteInputSection: React.FC<RemoteInputSectionProps> = ({ onChange
     onBlur?.();
   };
 
+  const handlePress = () => {
+    handleToggle(!remoteInputEnabled);
+  }
+
   // TV遥控器事件处理
   const handleTVEvent = React.useCallback(
     (event: any) => {
@@ -51,19 +58,32 @@ export const RemoteInputSection: React.FC<RemoteInputSectionProps> = ({ onChange
   useTVEventHandler(handleTVEvent);
 
   return (
-    <SettingsSection focusable onFocus={handleSectionFocus} onBlur={handleSectionBlur}>
+    <SettingsSection focusable onFocus={handleSectionFocus} onBlur={handleSectionBlur}
+      {...Platform.isTV || deviceType !== 'tv' ? undefined : { onPress: handlePress }}
+    >
       <Pressable style={styles.settingItem} onFocus={handleSectionFocus} onBlur={handleSectionBlur}>
         <View style={styles.settingInfo}>
           <ThemedText style={styles.settingName}>启用远程输入</ThemedText>
         </View>
         <Animated.View style={animationStyle}>
-          <Switch
-            value={remoteInputEnabled}
-            onValueChange={() => {}} // 禁用Switch的直接交互
-            trackColor={{ false: "#767577", true: Colors.dark.primary }}
-            thumbColor={remoteInputEnabled ? "#ffffff" : "#f4f3f4"}
-            pointerEvents="none"
-          />
+          { Platform.OS === 'ios' && Platform.isTV ? (
+            <TouchableOpacity
+              activeOpacity={0.8}
+              onPress={() => handlePress()}
+              style={styles.statusLabel}
+            >
+              <ThemedText style={styles.statusValue}>{remoteInputEnabled ? '已启用' : '已禁用'}</ThemedText>
+            </TouchableOpacity>
+          ) : (
+            <Switch
+              value={remoteInputEnabled}
+              onValueChange={() => { }} // 禁用Switch的直接交互
+              trackColor={{ false: "#767577", true: Colors.dark.primary }}
+              thumbColor={remoteInputEnabled ? "#ffffff" : "#f4f3f4"}
+              pointerEvents="none"
+            />
+          )
+          }
         </Animated.View>
       </Pressable>
 

components/settings/SettingsSection.tsx

@@ -1,17 +1,20 @@
 import React, { useState } from "react";
-import { StyleSheet, Pressable } from "react-native";
+import { StyleSheet, Pressable, Platform } from "react-native";
 import { ThemedView } from "@/components/ThemedView";
 import { Colors } from "@/constants/Colors";
+import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
 
 interface SettingsSectionProps {
   children: React.ReactNode;
   onFocus?: () => void;
   onBlur?: () => void;
+  onPress?: () => void;
   focusable?: boolean;
 }
 
-export const SettingsSection: React.FC<SettingsSectionProps> = ({ children, onFocus, onBlur, focusable = false }) => {
+export const SettingsSection: React.FC<SettingsSectionProps> = ({ children, onFocus, onBlur, onPress, focusable = false }) => {
   const [isFocused, setIsFocused] = useState(false);
+  const deviceType = useResponsiveLayout().deviceType;
 
   const handleFocus = () => {
     setIsFocused(true);
@@ -23,13 +26,24 @@ export const SettingsSection: React.FC<SettingsSectionProps> = ({ children, onFo
     onBlur?.();
   };
 
+  const handlePress = () => {
+    onPress?.();
+  }
+
   if (!focusable) {
     return <ThemedView style={styles.section}>{children}</ThemedView>;
   }
 
   return (
     <ThemedView style={[styles.section, isFocused && styles.sectionFocused]}>
-      <Pressable style={styles.sectionPressable} onFocus={handleFocus} onBlur={handleBlur}>
+      <Pressable
+        android_ripple={Platform.isTV||deviceType !=='tv'? {color:'transparent'}:{color:Colors.dark.link}}
+        style={styles.sectionPressable}
+        // {...(Platform.isTV ? {onFocus: handleFocus, onBlur: handleBlur} : {onPress: onPress})}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onPress={handlePress}
+      >
         {children}
       </Pressable>
     </ThemedView>

components/settings/UpdateSection.tsx

@@ -0,0 +1,155 @@
+import React from "react";
+import { View, StyleSheet, Platform, ActivityIndicator } from "react-native";
+import { ThemedText } from "../ThemedText";
+import { StyledButton } from "../StyledButton";
+import { useUpdateStore } from "@/stores/updateStore";
+// import { UPDATE_CONFIG } from "@/constants/UpdateConfig";
+
+export function UpdateSection() {
+  const { 
+    currentVersion, 
+    remoteVersion, 
+    updateAvailable, 
+    downloading, 
+    downloadProgress, 
+    checkForUpdate,
+    isLatestVersion,
+    error
+  } = useUpdateStore();
+
+  const [checking, setChecking] = React.useState(false);
+
+  const handleCheckUpdate = async () => {
+    setChecking(true);
+    try {
+      await checkForUpdate(false);
+    } finally {
+      setChecking(false);
+    }
+  };
+
+  return (
+    <View style={styles.sectionContainer}>
+      <ThemedText style={styles.sectionTitle}>应用更新</ThemedText>
+
+      <View style={styles.row}>
+        <ThemedText style={styles.label}>当前版本</ThemedText>
+        <ThemedText style={styles.value}>v{currentVersion}</ThemedText>
+      </View>
+
+      {updateAvailable && (
+        <View style={styles.row}>
+          <ThemedText style={styles.label}>最新版本</ThemedText>
+          <ThemedText style={[styles.value, styles.newVersion]}>v{remoteVersion}</ThemedText>
+        </View>
+      )}
+
+      {isLatestVersion && remoteVersion && (
+        <View style={styles.row}>
+          <ThemedText style={styles.label}>状态</ThemedText>
+          <ThemedText style={[styles.value, styles.latestVersion]}>已是最新版本</ThemedText>
+        </View>
+      )}
+
+      {error && (
+        <View style={styles.row}>
+          <ThemedText style={styles.label}>检查结果</ThemedText>
+          <ThemedText style={[styles.value, styles.errorText]}>{error}</ThemedText>
+        </View>
+      )}
+
+      {downloading && (
+        <View style={styles.row}>
+          <ThemedText style={styles.label}>下载进度</ThemedText>
+          <ThemedText style={styles.value}>{downloadProgress}%</ThemedText>
+        </View>
+      )}
+
+      <View style={styles.buttonContainer}>
+        <StyledButton onPress={handleCheckUpdate} disabled={checking || downloading} style={styles.button}>
+          {checking ? (
+            <ActivityIndicator color="#fff" size="small" />
+          ) : (
+            <ThemedText style={styles.buttonText}>检查更新</ThemedText>
+          )}
+        </StyledButton>
+      </View>
+
+      {/* {UPDATE_CONFIG.AUTO_CHECK && (
+        <ThemedText style={styles.hint}>
+          自动检查更新已开启，每{UPDATE_CONFIG.CHECK_INTERVAL / (60 * 60 * 1000)}小时检查一次
+        </ThemedText>
+      )} */}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  sectionContainer: {
+    marginBottom: 24,
+    padding: 16,
+    backgroundColor: Platform.select({
+      ios: "rgba(255, 255, 255, 0.05)",
+      android: "rgba(255, 255, 255, 0.05)",
+      default: "transparent",
+    }),
+    borderRadius: 8,
+  },
+  sectionTitle: {
+    fontSize: Platform.isTV ? 24 : 20,
+    fontWeight: "bold",
+    marginBottom: 16,
+    paddingTop: 8,
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 12,
+  },
+  label: {
+    fontSize: Platform.isTV ? 18 : 16,
+    color: "#999",
+  },
+  value: {
+    fontSize: Platform.isTV ? 18 : 16,
+  },
+  newVersion: {
+    color: "#00bb5e",
+    fontWeight: "bold",
+  },
+  latestVersion: {
+    color: "#00bb5e",
+    fontWeight: "500",
+  },
+  errorText: {
+    color: "#ff6b6b",
+    fontWeight: "500",
+  },
+  buttonContainer: {
+    flexDirection: "row",
+    gap: 12,
+    marginTop: 16,
+    justifyContent: "center", // 居中对齐
+    alignItems: "center",
+  },
+  button: {
+    width: "90%",
+    ...(Platform.isTV && {
+      // TV平台焦点样式
+      borderWidth: 2,
+      borderColor: "transparent",
+    }),
+  },
+  buttonText: {
+    color: "#ffffff",
+    fontSize: Platform.isTV ? 16 : 14,
+    fontWeight: "500",
+  },
+  hint: {
+    fontSize: Platform.isTV ? 14 : 12,
+    color: "#666",
+    marginTop: 12,
+    textAlign: "center",
+  },
+});

constants/UpdateConfig.ts

@@ -0,0 +1,36 @@
+export const UPDATE_CONFIG = {
+  // 自动检查更新
+  AUTO_CHECK: true,
+
+  // 检查更新间隔（毫秒）
+  CHECK_INTERVAL: 12 * 60 * 60 * 1000, // 12小时
+
+  // GitHub相关URL
+  GITHUB_RAW_URL:
+    `https://ghfast.top/https://raw.githubusercontent.com/orion-lib/OrionTV/refs/heads/master/package.json?t=${Date.now()}`,
+
+  // 获取平台特定的下载URL
+  getDownloadUrl(version: string): string {
+    return `https://ghfast.top/https://github.com/orion-lib/OrionTV/releases/download/v${version}/orionTV.${version}.apk`;
+  },
+
+  // 是否显示更新日志
+  SHOW_RELEASE_NOTES: true,
+
+  // 是否允许跳过版本
+  ALLOW_SKIP_VERSION: true,
+
+  // 下载超时时间（毫秒）
+  DOWNLOAD_TIMEOUT: 10 * 60 * 1000, // 10分钟
+
+  // 是否在WIFI下自动下载
+  AUTO_DOWNLOAD_ON_WIFI: false,
+
+  // 更新通知设置
+  NOTIFICATION: {
+    ENABLED: true,
+    TITLE: "OrionTV 更新",
+    DOWNLOADING_TEXT: "正在下载新版本...",
+    DOWNLOAD_COMPLETE_TEXT: "下载完成，点击安装",
+  },
+};

docs/MOBILE_TABLET_ADAPTATION.md

@@ -0,0 +1,308 @@
+# OrionTV 手机端和平板端适配方案
+
+## 项目概述
+
+OrionTV 是一个基于 React Native TVOS 的视频流媒体应用，目前专为 Android TV 和 Apple TV 平台设计。本文档详细描述了将应用适配到 Android 手机和平板设备的完整方案。
+
+## 当前状态分析
+
+### TV端特征
+- **技术栈**: React Native TVOS 0.74.x + Expo 51
+- **导航**: Stack 导航结构，适合遥控器操作
+- **布局**: 固定5列网格布局 (`NUM_COLUMNS = 5`)
+- **交互**: TV遥控器专用事件处理 (`useTVRemoteHandler`)
+- **组件**: TV专用组件 (`VideoCard.tv.tsx`)
+- **UI元素**: 大间距、大按钮，适合10英尺距离观看
+
+### 现有页面结构
+1. **index.tsx** - 首页：分类选择 + 5列视频网格
+2. **detail.tsx** - 详情页：横向布局，海报+信息+播放源
+3. **search.tsx** - 搜索页：搜索框 + 5列结果网格
+4. **play.tsx** - 播放页：全屏视频播放器 + TV遥控器控制
+5. **settings.tsx** - 设置页：TV遥控器导航 + 远程输入配置
+6. **favorites.tsx** - 收藏页：网格布局展示收藏内容
+7. **live.tsx** - 直播页：直播流播放
+8. **_layout.tsx** - 根布局：Stack导航 + 全局状态管理
+
+## 适配目标
+
+### 设备分类
+- **手机端** (< 768px): 单手操作，纵向为主，触摸交互
+- **平板端** (768px - 1024px): 双手操作，横竖屏，触摸+键盘
+- **TV端** (> 1024px): 遥控器操作，横屏，10英尺距离
+
+### 响应式设计原则
+1. **内容优先**: 保持核心功能一致性
+2. **渐进增强**: 根据屏幕尺寸增加功能
+3. **平台原生感**: 符合各平台交互习惯
+4. **性能优化**: 避免不必要的重新渲染
+
+## 技术实施方案
+
+### 阶段1: 响应式基础架构
+
+#### 1.1 创建响应式 Hook
+```typescript
+// hooks/useResponsiveLayout.ts
+export interface ResponsiveConfig {
+  deviceType: 'mobile' | 'tablet' | 'tv';
+  columns: number;
+  cardWidth: number;
+  cardHeight: number;
+  spacing: number;
+  isPortrait: boolean;
+}
+```
+
+#### 1.2 设备检测逻辑
+- 基于 `Dimensions.get('window')` 获取屏幕尺寸
+- 监听方向变化 `useDeviceOrientation()`
+- 平台检测 `Platform.OS` 和 TV 环境变量
+
+#### 1.3 断点定义
+```typescript
+const BREAKPOINTS = {
+  mobile: { min: 0, max: 767 },
+  tablet: { min: 768, max: 1023 },
+  tv: { min: 1024, max: Infinity }
+};
+```
+
+### 阶段2: 多平台组件系统
+
+#### 2.1 VideoCard 组件族
+- **VideoCard.mobile.tsx**: 纵向卡片，大触摸目标
+- **VideoCard.tablet.tsx**: 中等卡片，平衡布局  
+- **VideoCard.tv.tsx**: 保持现有实现
+
+#### 2.2 组件选择器
+```typescript
+// components/VideoCard/index.tsx
+export const VideoCard = (props) => {
+  const { deviceType } = useResponsiveLayout();
+  
+  switch(deviceType) {
+    case 'mobile': return <VideoCardMobile {...props} />;
+    case 'tablet': return <VideoCardTablet {...props} />;
+    case 'tv': return <VideoCardTV {...props} />;
+  }
+};
+```
+
+### 阶段3: 导航系统重构
+
+#### 3.1 手机端导航
+- **底部Tab导航**: 首页、搜索、收藏、设置
+- **Header导航**: 返回按钮、标题、操作按钮
+- **抽屉导航**: 次要功能入口
+
+#### 3.2 平板端导航  
+- **侧边栏导航**: 持久化主导航
+- **Master-Detail**: 列表+详情分屏
+- **Tab Bar**: 内容区域二级导航
+
+#### 3.3 TV端导航
+- **保持现有**: Stack导航结构
+- **遥控器优化**: Focus管理和按键导航
+
+### 阶段4: 页面逐一适配
+
+#### 4.1 首页 (index.tsx)
+**手机端改进:**
+- 1-2列网格布局
+- 分类用横向滚动标签
+- 下拉刷新
+- 上拉加载更多
+
+**平板端改进:**
+- 2-3列网格布局  
+- 左侧分类侧边栏
+- 内容区域可滚动
+- 支持横竖屏切换
+
+**TV端保持:**
+- 5列网格布局
+- 遥控器导航
+- 现有交互逻辑
+
+#### 4.2 详情页 (detail.tsx)
+**手机端改进:**
+- 纵向布局：海报→信息→播放源→剧集
+- 海报占屏幕宽度40%
+- 播放源横向滚动
+- 剧集网格4-5列
+
+**平板端改进:**
+- 左右分栏：海报+信息 | 播放源+剧集
+- 海报固定尺寸  
+- 播放源卡片式布局
+- 剧集6-8列网格
+
+#### 4.3 搜索页 (search.tsx)
+**手机端改进:**
+- 优化键盘输入体验
+- 搜索历史和推荐
+- 2列结果网格
+- 筛选和排序功能
+
+**平板端改进:**
+- 更大的搜索框
+- 3列结果网格
+- 侧边栏筛选选项
+- 搜索建议下拉
+
+#### 4.4 播放页 (play.tsx)
+**手机端改进:**
+- 触摸控制替代遥控器
+- 手势操作：双击暂停、滑动调节
+- 竖屏小窗播放模式
+- 亮度和音量调节
+
+**平板端改进:**
+- 触摸+手势控制
+- 画中画模式支持
+- 外接键盘快捷键
+- 更大的控制按钮
+
+#### 4.5 设置页 (settings.tsx)
+**手机端改进:**
+- 分组设置列表
+- 原生选择器和开关
+- 键盘友好的输入框
+- 滚动优化
+
+**平板端改进:**
+- 左侧设置分类，右侧设置详情
+- 更大的输入区域
+- 实时预览效果
+- 批量操作支持
+
+### 阶段5: 组件库升级
+
+#### 5.1 触摸优化组件
+- **TouchableButton**: 44px最小触摸目标
+- **SwipeableCard**: 支持滑动操作
+- **PullToRefresh**: 下拉刷新组件
+- **InfiniteScroll**: 无限滚动加载
+
+#### 5.2 手势处理
+- **PinchToZoom**: 双指缩放
+- **SwipeNavigation**: 滑动导航
+- **LongPressMenu**: 长按菜单
+- **DoubleTapHandler**: 双击处理
+
+#### 5.3 响应式工具
+- **ResponsiveText**: 自适应字体大小
+- **ResponsiveSpacing**: 自适应间距
+- **ConditionalRender**: 条件渲染组件
+- **OrientationHandler**: 方向变化处理
+
+### 阶段6: 构建和部署
+
+#### 6.1 构建脚本更新
+```json
+{
+  "scripts": {
+    "android-mobile": "EXPO_USE_METRO_WORKSPACE_ROOT=1 expo run:android",
+    "android-tablet": "EXPO_USE_METRO_WORKSPACE_ROOT=1 expo run:android --device tablet",
+    "android-tv": "EXPO_TV=1 EXPO_USE_METRO_WORKSPACE_ROOT=1 expo run:android"
+  }
+}
+```
+
+#### 6.2 配置文件适配
+- **app.json**: 多平台配置
+- **metro.config.js**: 条件资源加载
+- **package.json**: 平台特定依赖
+
+#### 6.3 资源文件
+- 手机端应用图标 (48dp-192dp)
+- 平板端应用图标 (优化尺寸)
+- 启动屏适配不同分辨率
+- 自适应图标 (Adaptive Icons)
+
+## 测试计划
+
+### 测试设备覆盖
+- **手机**: Android 5.0-14, 屏幕 4"-7"
+- **平板**: Android 平板 7"-12", 横竖屏
+- **TV**: 保持现有测试覆盖
+
+### 测试要点
+1. **响应式布局**: 不同屏幕尺寸正确显示
+2. **交互体验**: 触摸、手势、导航流畅
+3. **性能表现**: 启动速度、滚动性能、内存使用
+4. **兼容性**: 不同Android版本和设备
+
+### 自动化测试
+- Jest单元测试覆盖新组件
+- E2E测试核心用户流程
+- 视觉回归测试UI一致性
+- 性能基准测试
+
+## 风险评估
+
+### 技术风险
+- **复杂度增加**: 多平台适配增加维护成本
+- **性能影响**: 条件渲染可能影响性能
+- **测试覆盖**: 需要覆盖更多设备组合
+
+### 缓解策略
+- 渐进式迁移，优先核心功能
+- 性能监控和优化
+- 自动化测试保证质量
+- 代码复用最大化
+
+## 实施时间表
+
+### 第1周: 基础架构
+- [ ] 响应式Hook开发
+- [ ] 多平台组件框架
+- [ ] 基础样式系统
+
+### 第2周: 核心页面适配
+- [ ] 首页手机/平板适配
+- [ ] 详情页手机/平板适配
+- [ ] 搜索页手机/平板适配
+
+### 第3周: 功能完善
+- [ ] 播放页适配
+- [ ] 设置页适配
+- [ ] 导航系统重构
+
+### 第4周: 优化和测试
+- [ ] 组件库升级
+- [ ] 性能优化
+- [ ] 全面测试
+
+## 成功指标
+
+### 用户体验指标
+- 应用启动时间 < 3秒
+- 页面切换流畅度 > 95%
+- 触摸响应延迟 < 100ms
+- 用户满意度 > 4.5/5
+
+### 技术指标
+- 代码复用率 > 80%
+- 自动化测试覆盖率 > 90%
+- 应用包大小增长 < 20%
+- 内存使用优化 > 15%
+
+---
+
+## 附录
+
+### 参考资料
+- [React Native 响应式设计指南]
+- [Material Design 自适应布局]
+- [TV应用设计最佳实践]
+
+### 相关文档
+- 项目架构文档 (CLAUDE.md)
+- TV端开发指南
+- 组件库使用手册
+
+---
+*最后更新: 2025-08-01*
+*版本: 1.0*

hooks/useApiConfig.ts

@@ -0,0 +1,139 @@
+import { useEffect, useState } from 'react';
+import { useSettingsStore } from '@/stores/settingsStore';
+import { api } from '@/services/api';
+
+export interface ApiConfigStatus {
+  isConfigured: boolean;
+  isValidating: boolean;
+  isValid: boolean | null;
+  error: string | null;
+  needsConfiguration: boolean;
+}
+
+export const useApiConfig = () => {
+  const { apiBaseUrl, serverConfig, isLoadingServerConfig } = useSettingsStore();
+  const [validationState, setValidationState] = useState<{
+    isValidating: boolean;
+    isValid: boolean | null;
+    error: string | null;
+  }>({
+    isValidating: false,
+    isValid: null,
+    error: null,
+  });
+
+  const isConfigured = Boolean(apiBaseUrl && apiBaseUrl.trim());
+  const needsConfiguration = !isConfigured;
+
+  // Validate API configuration when it changes
+  useEffect(() => {
+    if (!isConfigured) {
+      setValidationState({
+        isValidating: false,
+        isValid: false,
+        error: null,
+      });
+      return;
+    }
+
+    const validateConfig = async () => {
+      setValidationState(prev => ({ ...prev, isValidating: true, error: null }));
+
+      try {
+        await api.getServerConfig();
+        setValidationState({
+          isValidating: false,
+          isValid: true,
+          error: null,
+        });
+      } catch (error) {
+        let errorMessage = '服务器连接失败';
+
+        if (error instanceof Error) {
+          switch (error.message) {
+            case 'API_URL_NOT_SET':
+              errorMessage = 'API地址未设置';
+              break;
+            case 'UNAUTHORIZED':
+              errorMessage = '服务器认证失败';
+              break;
+            default:
+              if (error.message.includes('Network')) {
+                errorMessage = '网络连接失败，请检查网络或服务器地址';
+              } else if (error.message.includes('timeout')) {
+                errorMessage = '连接超时，请检查服务器地址';
+              } else if (error.message.includes('404')) {
+                errorMessage = '服务器地址无效，请检查API路径';
+              } else if (error.message.includes('500')) {
+                errorMessage = '服务器内部错误';
+              }
+              break;
+          }
+        }
+
+        setValidationState({
+          isValidating: false,
+          isValid: false,
+          error: errorMessage,
+        });
+      }
+    };
+
+    // Only validate if not already loading server config
+    if (!isLoadingServerConfig) {
+      validateConfig();
+    }
+  }, [apiBaseUrl, isConfigured, isLoadingServerConfig]);
+
+  // Reset validation when server config loading state changes
+  useEffect(() => {
+    if (isLoadingServerConfig) {
+      setValidationState(prev => ({ ...prev, isValidating: true, error: null }));
+    }
+  }, [isLoadingServerConfig]);
+
+  // Update validation state based on server config
+  useEffect(() => {
+    if (!isLoadingServerConfig && isConfigured) {
+      if (serverConfig) {
+        setValidationState(prev => ({ ...prev, isValid: true, error: null }));
+      } else {
+        setValidationState(prev => ({
+          ...prev,
+          isValid: false,
+          error: prev.error || '无法获取服务器配置'
+        }));
+      }
+    }
+  }, [serverConfig, isLoadingServerConfig, isConfigured]);
+
+  const status: ApiConfigStatus = {
+    isConfigured,
+    isValidating: validationState.isValidating || isLoadingServerConfig,
+    isValid: validationState.isValid,
+    error: validationState.error,
+    needsConfiguration,
+  };
+
+  return status;
+};
+
+export const getApiConfigErrorMessage = (status: ApiConfigStatus): string => {
+  if (status.needsConfiguration) {
+    return '请点击右上角设置按钮，配置您的服务器地址';
+  }
+
+  if (status.error) {
+    return status.error;
+  }
+
+  if (status.isValidating) {
+    return '正在验证服务器配置...';
+  }
+
+  if (status.isValid === false) {
+    return '服务器配置验证失败，请检查设置';
+  }
+
+  return '加载失败，请重试';
+};

hooks/useResponsiveLayout.ts

@@ -0,0 +1,134 @@
+import { useState, useEffect } from "react";
+import { Dimensions, Platform } from "react-native";
+
+export type DeviceType = "mobile" | "tablet" | "tv";
+
+export interface ResponsiveConfig {
+  deviceType: DeviceType;
+  columns: number;
+  cardWidth: number;
+  cardHeight: number;
+  spacing: number;
+  isPortrait: boolean;
+  screenWidth: number;
+  screenHeight: number;
+}
+
+const BREAKPOINTS = {
+  mobile: { min: 0, max: 767 },
+  tablet: { min: 768, max: 1023 },
+  tv: { min: 1024, max: Infinity },
+};
+
+const getDeviceType = (width: number): DeviceType => {
+  if (Platform.isTV) return "tv";
+
+  if (width >= BREAKPOINTS.tv.min) return "tv";
+  if (width >= BREAKPOINTS.tablet.min) return "tablet";
+  return "mobile";
+};
+
+const getLayoutConfig = (
+  deviceType: DeviceType,
+  width: number,
+  height: number,
+  isPortrait: boolean
+): ResponsiveConfig => {
+  const spacing = deviceType === "mobile" ? 8 : deviceType === "tablet" ? 12 : 16;
+
+  let columns: number;
+  let cardWidth: number;
+  let cardHeight: number;
+
+  switch (deviceType) {
+    case "mobile":
+      columns = isPortrait ? 3 : 4;
+      // 使用flex布局，卡片可以更大一些来填充空间
+      cardWidth = ((width - spacing) / columns) * 0.85; // 增大到85%
+      cardHeight = cardWidth * 1.2; // 5:6 aspect ratio (reduced from 2:3)
+      break;
+
+    case "tablet":
+      columns = isPortrait ? 3 : 4;
+      cardWidth = ((width - spacing) / columns) * 0.85; // 增大到85%
+      cardHeight = cardWidth * 1.4; // slightly less tall ratio
+      break;
+
+    case "tv":
+    default:
+      columns = 5;
+      cardWidth = 160; // Fixed width for TV
+      cardHeight = 240; // Fixed height for TV
+      break;
+  }
+
+  return {
+    deviceType,
+    columns,
+    cardWidth,
+    cardHeight,
+    spacing,
+    isPortrait,
+    screenWidth: width,
+    screenHeight: height,
+  };
+};
+
+export const useResponsiveLayout = (): ResponsiveConfig => {
+  const [dimensions, setDimensions] = useState(() => {
+    const { width, height } = Dimensions.get("window");
+    return { width, height };
+  });
+
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener("change", ({ window }) => {
+      setDimensions({ width: window.width, height: window.height });
+    });
+
+    return () => subscription?.remove();
+  }, []);
+
+  const { width, height } = dimensions;
+  const isPortrait = height > width;
+  const deviceType = getDeviceType(width);
+
+  return getLayoutConfig(deviceType, width, height, isPortrait);
+};
+
+// Utility hook for responsive values
+export const useResponsiveValue = <T>(values: { mobile: T; tablet: T; tv: T }): T => {
+  const { deviceType } = useResponsiveLayout();
+  return values[deviceType];
+};
+
+// Utility hook for responsive styles
+export const useResponsiveStyles = () => {
+  const config = useResponsiveLayout();
+
+  return {
+    // Common responsive styles
+    container: {
+      paddingHorizontal: config.spacing,
+    },
+
+    // Card styles
+    cardContainer: {
+      width: config.cardWidth,
+      height: config.cardHeight,
+      marginBottom: config.spacing,
+    },
+
+    // Grid styles
+    gridContainer: {
+      paddingHorizontal: config.spacing / 2,
+    },
+
+    // Typography
+    titleFontSize: config.deviceType === "mobile" ? 18 : config.deviceType === "tablet" ? 22 : 28,
+    bodyFontSize: config.deviceType === "mobile" ? 14 : config.deviceType === "tablet" ? 16 : 18,
+
+    // Spacing
+    sectionSpacing: config.deviceType === "mobile" ? 16 : config.deviceType === "tablet" ? 20 : 24,
+    itemSpacing: config.spacing,
+  };
+};

hooks/useVideoHandlers.ts

@@ -0,0 +1,131 @@
+import { useCallback, RefObject, useMemo } from 'react';
+import { Video, ResizeMode } from 'expo-av';
+import Toast from 'react-native-toast-message';
+import usePlayerStore from '@/stores/playerStore';
+
+interface UseVideoHandlersProps {
+  videoRef: RefObject<Video>;
+  currentEpisode: { url: string; title: string } | undefined;
+  initialPosition: number;
+  introEndTime?: number;
+  playbackRate: number;
+  handlePlaybackStatusUpdate: (status: any) => void;
+  deviceType: string;
+  detail?: { poster?: string };
+}
+
+export const useVideoHandlers = ({
+  videoRef,
+  currentEpisode,
+  initialPosition,
+  introEndTime,
+  playbackRate,
+  handlePlaybackStatusUpdate,
+  deviceType,
+  detail,
+}: UseVideoHandlersProps) => {
+  
+  const onLoad = useCallback(async () => {
+    console.info(`[PERF] Video onLoad - video ready to play`);
+    
+    try {
+      // 1. 先设置位置（如果需要）
+      const jumpPosition = initialPosition || introEndTime || 0;
+      if (jumpPosition > 0) {
+        console.info(`[PERF] Setting initial position to ${jumpPosition}ms`);
+        await videoRef.current?.setPositionAsync(jumpPosition);
+      }
+      
+      // 2. 显式调用播放以确保自动播放
+      console.info(`[AUTOPLAY] Attempting to start playback after onLoad`);
+      await videoRef.current?.playAsync();
+      console.info(`[AUTOPLAY] Auto-play successful after onLoad`);
+      
+      usePlayerStore.setState({ isLoading: false });
+      console.info(`[PERF] Video loading complete - isLoading set to false`);
+    } catch (error) {
+      console.warn(`[AUTOPLAY] Failed to auto-play after onLoad:`, error);
+      // 即使自动播放失败，也要设置加载完成状态
+      usePlayerStore.setState({ isLoading: false });
+      // 不显示错误提示，因为自动播放失败是常见且预期的情况
+    }
+  }, [videoRef, initialPosition, introEndTime]);
+
+  const onLoadStart = useCallback(() => {
+    if (!currentEpisode?.url) return;
+    
+    console.info(`[PERF] Video onLoadStart - starting to load video: ${currentEpisode.url.substring(0, 100)}...`);
+    usePlayerStore.setState({ isLoading: true });
+  }, [currentEpisode?.url]);
+
+  const onError = useCallback((error: any) => {
+    if (!currentEpisode?.url) return;
+    
+    console.error(`[ERROR] Video playback error:`, error);
+    
+    // 检测SSL证书错误和其他网络错误
+    const errorString = (error as any)?.error?.toString() || error?.toString() || '';
+    const isSSLError = errorString.includes('SSLHandshakeException') || 
+                      errorString.includes('CertPathValidatorException') ||
+                      errorString.includes('Trust anchor for certification path not found');
+    const isNetworkError = errorString.includes('HttpDataSourceException') ||
+                         errorString.includes('IOException') ||
+                         errorString.includes('SocketTimeoutException');
+    
+    if (isSSLError) {
+      console.error(`[SSL_ERROR] SSL certificate validation failed for URL: ${currentEpisode.url}`);
+      Toast.show({ 
+        type: "error", 
+        text1: "SSL证书错误，正在尝试其他播放源...",
+        text2: "请稍候"
+      });
+      usePlayerStore.getState().handleVideoError('ssl', currentEpisode.url);
+    } else if (isNetworkError) {
+      console.error(`[NETWORK_ERROR] Network connection failed for URL: ${currentEpisode.url}`);
+      Toast.show({ 
+        type: "error", 
+        text1: "网络连接失败，正在尝试其他播放源...",
+        text2: "请稍候"
+      });
+      usePlayerStore.getState().handleVideoError('network', currentEpisode.url);
+    } else {
+      console.error(`[VIDEO_ERROR] Other video error for URL: ${currentEpisode.url}`);
+      Toast.show({ 
+        type: "error", 
+        text1: "视频播放失败，正在尝试其他播放源...",
+        text2: "请稍候"
+      });
+      usePlayerStore.getState().handleVideoError('other', currentEpisode.url);
+    }
+  }, [currentEpisode?.url]);
+
+  // 优化的Video组件props
+  const videoProps = useMemo(() => ({
+    source: { uri: currentEpisode?.url || '' },
+    posterSource: { uri: detail?.poster ?? "" },
+    resizeMode: ResizeMode.CONTAIN,
+    rate: playbackRate,
+    onPlaybackStatusUpdate: handlePlaybackStatusUpdate,
+    onLoad,
+    onLoadStart,
+    onError,
+    useNativeControls: deviceType !== 'tv',
+    shouldPlay: true,
+  }), [
+    currentEpisode?.url,
+    detail?.poster,
+    playbackRate,
+    handlePlaybackStatusUpdate,
+    onLoad,
+    onLoadStart,
+    onError,
+    deviceType,
+  ]);
+
+  return {
+    onLoad,
+    onLoadStart,
+    onError,
+    videoProps,
+  };
+};

metro.config.js

@@ -1,12 +1,13 @@
 // Learn more https://docs.expo.io/guides/customizing-metro
-const {getDefaultConfig} = require('expo/metro-config');
-const path = require('path');
+const { getDefaultConfig } = require("expo/metro-config");
+const path = require("path");
 
 // Find the project and workspace directories
+// eslint-disable-next-line no-undef
 const projectRoot = __dirname;
 
 /** @type {import('expo/metro-config').MetroConfig} */
-const config = getDefaultConfig(projectRoot); // eslint-disable-line no-undef
+const config = getDefaultConfig(projectRoot);
 
 // When enabled, the optional code below will allow Metro to resolve
 // and bundle source files with TV-specific extensions
@@ -15,24 +16,24 @@ const config = getDefaultConfig(projectRoot); // eslint-disable-line no-undef
 // Metro will still resolve source files with standard extensions
 // as usual if TV-specific files are not found for a module.
 //
-if (process.env?.EXPO_TV === '1') {
-  const originalSourceExts = config.resolver.sourceExts;
-  const tvSourceExts = [
-    ...originalSourceExts.map((e) => `tv.${e}`),
-    ...originalSourceExts,
-  ];
-  config.resolver.sourceExts = tvSourceExts;
-}
+// if (process.env?.EXPO_TV === '1') {
+//   const originalSourceExts = config.resolver.sourceExts;
+//   const tvSourceExts = [
+//     ...originalSourceExts.map((e) => `tv.${e}`),
+//     ...originalSourceExts,
+//   ];
+//   config.resolver.sourceExts = tvSourceExts;
+// }
 
 // This can be replaced with `find-yarn-workspace-root`
-const monorepoRoot = path.resolve(projectRoot, '../..');
+const monorepoRoot = path.resolve(projectRoot, "../..");
 
 // 1. Watch all files within the monorepo
 config.watchFolders = [monorepoRoot];
 // 2. Let Metro know where to resolve packages and in what order
 config.resolver.nodeModulesPaths = [
-  path.resolve(projectRoot, 'node_modules'),
-  path.resolve(monorepoRoot, 'node_modules'),
+  path.resolve(projectRoot, "node_modules"),
+  path.resolve(monorepoRoot, "node_modules"),
 ];
 config.resolver.disableHierarchicalLookup = true;
 

package.json

@@ -2,22 +2,22 @@
   "name": "OrionTV",
   "private": true,
   "main": "expo-router/entry",
-  "version": "1.2.9",
+  "version": "1.3.13",
   "scripts": {
-    "start": "EXPO_USE_METRO_WORKSPACE_ROOT=1 expo start",
-    "start-tv": "EXPO_TV=1 EXPO_USE_METRO_WORKSPACE_ROOT=1 expo start",
-    "android": "EXPO_USE_METRO_WORKSPACE_ROOT=1 expo run:android",
-    "android-tv": "EXPO_TV=1 EXPO_USE_METRO_WORKSPACE_ROOT=1 expo run:android",
-    "ios": "EXPO_USE_METRO_WORKSPACE_ROOT=1 expo run:ios",
-    "ios-tv": "EXPO_TV=1 EXPO_USE_METRO_WORKSPACE_ROOT=1 expo run:ios",
-    "web": "expo start --web",
-    "reset-project": "./scripts/reset-project.js",
-    "test": "jest --watchAll",
-    "lint": "expo lint",
-    "prebuild": "EXPO_USE_METRO_WORKSPACE_ROOT=1 expo prebuild --clean",
-    "prebuild-tv": "EXPO_TV=1 EXPO_USE_METRO_WORKSPACE_ROOT=1 expo prebuild --clean && yarn copy-config",
+    "start": "EXPO_TV=1 EXPO_USE_METRO_WORKSPACE_ROOT=1 expo start",
+    "android": "EXPO_TV=1 EXPO_USE_METRO_WORKSPACE_ROOT=1 expo run:android",
+    "ios": "EXPO_TV=1 EXPO_USE_METRO_WORKSPACE_ROOT=1 expo run:ios",
+    "prebuild": "EXPO_TV=1 EXPO_USE_METRO_WORKSPACE_ROOT=1 expo prebuild --clean && yarn copy-config",
     "copy-config": "cp -r xml/* android/app/src/*",
-    "build-local": "cd android && ./gradlew assembleRelease"
+    "build": "NODE_ENV=production EXPO_TV=1 yarn prebuild && cd android && ./gradlew assembleRelease",
+    "build-debug": "cd android && ./gradlew assembleDebug",
+    "test": "jest --watchAll",
+    "test-ci": "jest --ci --coverage --no-cache",
+    "lint": "expo lint",
+    "typecheck": "tsc --noEmit",
+    "clean": "expo r -c && yarn cache clean && cd android && ./gradlew clean",
+    "clean-modules": "rm -rf node_modules && yarn install",
+    "reset-project": "./scripts/reset-project.js"
   },
   "jest": {
     "preset": "jest-expo"
@@ -36,6 +36,7 @@
     "expo-build-properties": "~0.12.3",
     "expo-constants": "~16.0.2",
     "expo-font": "~12.0.7",
+    "expo-intent-launcher": "~11.0.1",
     "expo-linear-gradient": "~13.0.2",
     "expo-linking": "~6.3.1",
     "expo-router": "~3.5.16",
@@ -47,7 +48,10 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "npm:react-native-tvos@~0.74.2-0",
+    "react-native-blob-util": "^0.22.2",
+    "react-native-file-viewer": "^2.1.5",
     "react-native-gesture-handler": "~2.16.1",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-media-console": "*",
     "react-native-qrcode-svg": "^6.3.1",
     "react-native-reanimated": "~3.10.1",
@@ -65,6 +69,7 @@
     "@types/jest": "^29.5.12",
     "@types/react": "~18.2.45",
     "@types/react-test-renderer": "^18.0.7",
+    "babel-plugin-transform-remove-console": "^6.9.4",
     "eslint": "^8.57.0",
     "eslint-config-expo": "~7.1.2",
     "jest": "^29.2.1",
@@ -80,4 +85,4 @@
     }
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
-}
+}

services/api.ts

@@ -1,3 +1,4 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 // region: --- Interface Definitions ---
 export interface DoubanItem {
@@ -105,17 +106,32 @@ export class API {
     return response;
   }
 
-  async getServerConfig(): Promise<ServerConfig> {
-    const response = await this._fetch("/api/server-config");
-    return response.json();
-  }
-
   async login(username?: string | undefined, password?: string): Promise<{ ok: boolean }> {
     const response = await this._fetch("/api/login", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ username, password }),
     });
+
+    // 存储cookie到AsyncStorage
+    const cookies = response.headers.get("Set-Cookie");
+    if (cookies) {
+      await AsyncStorage.setItem("authCookies", cookies);
+    }
+
+    return response.json();
+  }
+
+  async logout(): Promise<{ ok: boolean }> {
+    const response = await this._fetch("/api/logout", {
+      method: "POST",
+    });
+    await AsyncStorage.setItem("authCookies", '');
+    return response.json();
+  }
+
+  async getServerConfig(): Promise<ServerConfig> {
+    const response = await this._fetch("/api/server-config");
     return response.json();
   }
 
@@ -204,7 +220,8 @@ export class API {
   async searchVideo(query: string, resourceId: string, signal?: AbortSignal): Promise<{ results: SearchResult[] }> {
     const url = `/api/search/one?q=${encodeURIComponent(query)}&resourceId=${encodeURIComponent(resourceId)}`;
     const response = await this._fetch(url, { signal });
-    return response.json();
+    const { results } = await response.json();
+    return { results: results.filter((item: any) => item.title === query )};
   }
 
   async getResources(signal?: AbortSignal): Promise<ApiSite[]> {

services/m3u.ts

@@ -1,4 +1,6 @@
-import { api } from "./api";
+import Logger from '@/utils/Logger';
+
+const logger = Logger.withTag('M3U');
 
 export interface Channel {
   id: string;
@@ -61,7 +63,7 @@ export const fetchAndParseM3u = async (m3uUrl: string): Promise<Channel[]> => {
     const m3uText = await response.text();
     return parseM3U(m3uText);
   } catch (error) {
-    console.info("Error fetching or parsing M3U:", error);
+    logger.info("Error fetching or parsing M3U:", error);
     return []; // Return empty array on error
   }
 };

services/m3u8.ts

@@ -1,3 +1,7 @@
+import Logger from '@/utils/Logger';
+
+const logger = Logger.withTag('M3U8');
+
 interface CacheEntry {
   resolution: string | null;
   timestamp: number;
@@ -10,21 +14,33 @@ export const getResolutionFromM3U8 = async (
   url: string,
   signal?: AbortSignal
 ): Promise<string | null> => {
+  const perfStart = performance.now();
+  logger.info(`[PERF] M3U8 resolution detection START - url: ${url.substring(0, 100)}...`);
+  
   // 1. Check cache first
   const cachedEntry = resolutionCache[url];
   if (cachedEntry && Date.now() - cachedEntry.timestamp < CACHE_DURATION) {
+    const perfEnd = performance.now();
+    logger.info(`[PERF] M3U8 resolution detection CACHED - took ${(perfEnd - perfStart).toFixed(2)}ms, resolution: ${cachedEntry.resolution}`);
     return cachedEntry.resolution;
   }
 
   if (!url.toLowerCase().endsWith(".m3u8")) {
+    logger.info(`[PERF] M3U8 resolution detection SKIPPED - not M3U8 file`);
     return null;
   }
 
   try {
+    const fetchStart = performance.now();
     const response = await fetch(url, { signal });
+    const fetchEnd = performance.now();
+    logger.info(`[PERF] M3U8 fetch took ${(fetchEnd - fetchStart).toFixed(2)}ms, status: ${response.status}`);
+    
     if (!response.ok) {
       return null;
     }
+    
+    const parseStart = performance.now();
     const playlist = await response.text();
     const lines = playlist.split("\n");
     let highestResolution = 0;
@@ -42,6 +58,9 @@ export const getResolutionFromM3U8 = async (
         }
       }
     }
+    
+    const parseEnd = performance.now();
+    logger.info(`[PERF] M3U8 parsing took ${(parseEnd - parseStart).toFixed(2)}ms, lines: ${lines.length}`);
 
     // 2. Store result in cache
     resolutionCache[url] = {
@@ -49,8 +68,13 @@ export const getResolutionFromM3U8 = async (
       timestamp: Date.now(),
     };
 
+    const perfEnd = performance.now();
+    logger.info(`[PERF] M3U8 resolution detection COMPLETE - took ${(perfEnd - perfStart).toFixed(2)}ms, resolution: ${resolutionString}`);
+    
     return resolutionString;
   } catch (error) {
+    const perfEnd = performance.now();
+    logger.info(`[PERF] M3U8 resolution detection ERROR - took ${(perfEnd - perfStart).toFixed(2)}ms, error: ${error}`);
     return null;
   }
 };

services/remoteControlService.ts

@@ -1,4 +1,7 @@
 import TCPHttpServer from "./tcpHttpServer";
+import Logger from '@/utils/Logger';
+
+const logger = Logger.withTag('RemoteControl');
 
 const getRemotePageHTML = () => {
   return `
@@ -25,7 +28,7 @@ const getRemotePageHTML = () => {
     </div>
     <script>
       window.addEventListener('DOMContentLoaded', () => {
-        fetch('/handshake', { method: 'POST' }).catch(console.info);
+        fetch('/handshake', { method: 'POST' }).catch(err => logger.info('Handshake failed:', err));
       });
       function send() {
         const input = document.getElementById("text");
@@ -36,7 +39,7 @@ const getRemotePageHTML = () => {
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ message: value })
           })
-          .catch(err => console.info(err));
+          .catch(err => logger.info('Message send failed:', err));
           input.value = '';
         }
       }
@@ -58,7 +61,7 @@ class RemoteControlService {
 
   private setupRequestHandler() {
     this.httpServer.setRequestHandler((request) => {
-      console.log("[RemoteControl] Received request:", request.method, request.url);
+      logger.debug("[RemoteControl] Received request:", request.method, request.url);
 
       try {
         if (request.method === "GET" && request.url === "/") {
@@ -80,7 +83,7 @@ class RemoteControlService {
               body: JSON.stringify({ status: "ok" }),
             };
           } catch (parseError) {
-            console.info("[RemoteControl] Failed to parse message body:", parseError);
+            logger.info("[RemoteControl] Failed to parse message body:", parseError);
             return {
               statusCode: 400,
               headers: { "Content-Type": "application/json" },
@@ -102,7 +105,7 @@ class RemoteControlService {
           };
         }
       } catch (error) {
-        console.info("[RemoteControl] Request handler error:", error);
+        logger.info("[RemoteControl] Request handler error:", error);
         return {
           statusCode: 500,
           headers: { "Content-Type": "application/json" },
@@ -118,20 +121,20 @@ class RemoteControlService {
   }
 
   public async startServer(): Promise<string> {
-    console.log("[RemoteControl] Attempting to start server...");
+    logger.debug("[RemoteControl] Attempting to start server...");
 
     try {
       const url = await this.httpServer.start();
-      console.log(`[RemoteControl] Server started successfully at: ${url}`);
+      logger.debug(`[RemoteControl] Server started successfully at: ${url}`);
       return url;
     } catch (error) {
-      console.info("[RemoteControl] Failed to start server:", error);
+      logger.info("[RemoteControl] Failed to start server:", error);
       throw new Error(error instanceof Error ? error.message : "Failed to start server");
     }
   }
 
   public stopServer() {
-    console.log("[RemoteControl] Stopping server...");
+    logger.debug("[RemoteControl] Stopping server...");
     this.httpServer.stop();
   }
 

services/storage.ts

@@ -1,6 +1,9 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { api, PlayRecord as ApiPlayRecord, Favorite as ApiFavorite } from "./api";
 import { storageConfig } from "./storageConfig";
+import Logger from '@/utils/Logger';
+
+const logger = Logger.withTag('Storage');
 
 // --- Storage Keys ---
 const STORAGE_KEYS = {
@@ -9,6 +12,7 @@ const STORAGE_KEYS = {
   FAVORITES: "mytv_favorites",
   PLAY_RECORDS: "mytv_play_records",
   SEARCH_HISTORY: "mytv_search_history",
+  LOGIN_CREDENTIALS: "mytv_login_credentials",
 } as const;
 
 // --- Type Definitions (aligned with api.ts) ---
@@ -22,6 +26,7 @@ export type Favorite = ApiFavorite;
 export interface PlayerSettings {
   introEndTime?: number;
   outroStartTime?: number;
+  playbackRate?: number;
 }
 
 export interface AppSettings {
@@ -36,6 +41,11 @@ export interface AppSettings {
   m3uUrl: string;
 }
 
+export interface LoginCredentials {
+  username: string;
+  password: string;
+}
+
 // --- Helper ---
 const generateKey = (source: string, id: string) => `${source}+${id}`;
 
@@ -46,24 +56,32 @@ export class PlayerSettingsManager {
       const data = await AsyncStorage.getItem(STORAGE_KEYS.PLAYER_SETTINGS);
       return data ? JSON.parse(data) : {};
     } catch (error) {
-      console.info("Failed to get all player settings:", error);
+      logger.info("Failed to get all player settings:", error);
       return {};
     }
   }
 
   static async get(source: string, id: string): Promise<PlayerSettings | null> {
+    const perfStart = performance.now();
+    logger.info(`[PERF] PlayerSettingsManager.get START - source: ${source}, id: ${id}`);
+    
     const allSettings = await this.getAll();
-    return allSettings[generateKey(source, id)] || null;
+    const result = allSettings[generateKey(source, id)] || null;
+    
+    const perfEnd = performance.now();
+    logger.info(`[PERF] PlayerSettingsManager.get END - took ${(perfEnd - perfStart).toFixed(2)}ms, found: ${!!result}`);
+    
+    return result;
   }
 
   static async save(source: string, id: string, settings: PlayerSettings): Promise<void> {
     const allSettings = await this.getAll();
     const key = generateKey(source, id);
     // Only save if there are actual values to save
-    if (settings.introEndTime !== undefined || settings.outroStartTime !== undefined) {
+    if (settings.introEndTime !== undefined || settings.outroStartTime !== undefined || settings.playbackRate !== undefined) {
       allSettings[key] = { ...allSettings[key], ...settings };
     } else {
-      // If both are undefined, remove the key
+      // If all are undefined, remove the key
       delete allSettings[key];
     }
     await AsyncStorage.setItem(STORAGE_KEYS.PLAYER_SETTINGS, JSON.stringify(allSettings));
@@ -92,7 +110,7 @@ export class FavoriteManager {
         const data = await AsyncStorage.getItem(STORAGE_KEYS.FAVORITES);
         return data ? JSON.parse(data) : {};
       } catch (error) {
-        console.info("Failed to get all local favorites:", error);
+        logger.info("Failed to get all local favorites:", error);
         return {};
       }
     }
@@ -158,17 +176,27 @@ export class PlayRecordManager {
   }
 
   static async getAll(): Promise<Record<string, PlayRecord>> {
+    const perfStart = performance.now();
+    const storageType = this.getStorageType();
+    logger.info(`[PERF] PlayRecordManager.getAll START - storageType: ${storageType}`);
+    
     let apiRecords: Record<string, PlayRecord> = {};
-    if (this.getStorageType() === "localstorage") {
+    if (storageType === "localstorage") {
       try {
         const data = await AsyncStorage.getItem(STORAGE_KEYS.PLAY_RECORDS);
         apiRecords = data ? JSON.parse(data) : {};
       } catch (error) {
-        console.info("Failed to get all local play records:", error);
+        logger.info("Failed to get all local play records:", error);
         return {};
       }
     } else {
+      const apiStart = performance.now();
+      logger.info(`[PERF] API getPlayRecords START`);
+      
       apiRecords = await api.getPlayRecords();
+      
+      const apiEnd = performance.now();
+      logger.info(`[PERF] API getPlayRecords END - took ${(apiEnd - apiStart).toFixed(2)}ms, records: ${Object.keys(apiRecords).length}`);
     }
 
     const localSettings = await PlayerSettingsManager.getAll();
@@ -179,6 +207,10 @@ export class PlayRecordManager {
         ...localSettings[key],
       };
     }
+    
+    const perfEnd = performance.now();
+    logger.info(`[PERF] PlayRecordManager.getAll END - took ${(perfEnd - perfStart).toFixed(2)}ms, total records: ${Object.keys(mergedRecords).length}`);
+    
     return mergedRecords;
   }
 
@@ -200,9 +232,18 @@ export class PlayRecordManager {
   }
 
   static async get(source: string, id: string): Promise<PlayRecord | null> {
+    const perfStart = performance.now();
     const key = generateKey(source, id);
+    const storageType = this.getStorageType();
+    logger.info(`[PERF] PlayRecordManager.get START - source: ${source}, id: ${id}, storageType: ${storageType}`);
+    
     const records = await this.getAll();
-    return records[key] || null;
+    const result = records[key] || null;
+    
+    const perfEnd = performance.now();
+    logger.info(`[PERF] PlayRecordManager.get END - took ${(perfEnd - perfStart).toFixed(2)}ms, found: ${!!result}`);
+    
+    return result;
   }
 
   static async remove(source: string, id: string): Promise<void> {
@@ -241,7 +282,7 @@ export class SearchHistoryManager {
         const data = await AsyncStorage.getItem(STORAGE_KEYS.SEARCH_HISTORY);
         return data ? JSON.parse(data) : [];
       } catch (error) {
-        console.info("Failed to get local search history:", error);
+        logger.info("Failed to get local search history:", error);
         return [];
       }
     }
@@ -286,7 +327,7 @@ export class SettingsManager {
       const data = await AsyncStorage.getItem(STORAGE_KEYS.SETTINGS);
       return data ? { ...defaultSettings, ...JSON.parse(data) } : defaultSettings;
     } catch (error) {
-      console.info("Failed to get settings:", error);
+      logger.info("Failed to get settings:", error);
       return defaultSettings;
     }
   }
@@ -301,3 +342,32 @@ export class SettingsManager {
     await AsyncStorage.removeItem(STORAGE_KEYS.SETTINGS);
   }
 }
+
+// --- LoginCredentialsManager (Uses AsyncStorage) ---
+export class LoginCredentialsManager {
+  static async get(): Promise<LoginCredentials | null> {
+    try {
+      const data = await AsyncStorage.getItem(STORAGE_KEYS.LOGIN_CREDENTIALS);
+      return data ? JSON.parse(data) : null;
+    } catch (error) {
+      logger.info("Failed to get login credentials:", error);
+      return null;
+    }
+  }
+
+  static async save(credentials: LoginCredentials): Promise<void> {
+    try {
+      await AsyncStorage.setItem(STORAGE_KEYS.LOGIN_CREDENTIALS, JSON.stringify(credentials));
+    } catch (error) {
+      logger.error("Failed to save login credentials:", error);
+    }
+  }
+
+  static async clear(): Promise<void> {
+    try {
+      await AsyncStorage.removeItem(STORAGE_KEYS.LOGIN_CREDENTIALS);
+    } catch (error) {
+      logger.error("Failed to clear login credentials:", error);
+    }
+  }
+}

services/tcpHttpServer.ts

@@ -1,5 +1,8 @@
 import TcpSocket from 'react-native-tcp-socket';
 import NetInfo from '@react-native-community/netinfo';
+import Logger from '@/utils/Logger';
+
+const logger = Logger.withTag('TCPHttpServer');
 
 const PORT = 12346;
 
@@ -59,7 +62,7 @@ class TCPHttpServer {
 
       return { method, url, headers, body };
     } catch (error) {
-      console.info('[TCPHttpServer] Error parsing HTTP request:', error);
+      logger.info('[TCPHttpServer] Error parsing HTTP request:', error);
       return null;
     }
   }
@@ -108,14 +111,14 @@ class TCPHttpServer {
     }
 
     if (this.isRunning) {
-      console.log('[TCPHttpServer] Server is already running.');
+      logger.debug('[TCPHttpServer] Server is already running.');
       return `http://${ipAddress}:${PORT}`;
     }
 
     return new Promise((resolve, reject) => {
       try {
         this.server = TcpSocket.createServer((socket: TcpSocket.Socket) => {
-          console.log('[TCPHttpServer] Client connected');
+          logger.debug('[TCPHttpServer] Client connected');
           
           let requestData = '';
           
@@ -140,7 +143,7 @@ class TCPHttpServer {
                   socket.write(errorResponse);
                 }
               } catch (error) {
-                console.info('[TCPHttpServer] Error handling request:', error);
+                logger.info('[TCPHttpServer] Error handling request:', error);
                 const errorResponse = this.formatHttpResponse({
                   statusCode: 500,
                   headers: { 'Content-Type': 'text/plain' },
@@ -155,28 +158,28 @@ class TCPHttpServer {
           });
 
           socket.on('error', (error: Error) => {
-            console.info('[TCPHttpServer] Socket error:', error);
+            logger.info('[TCPHttpServer] Socket error:', error);
           });
 
           socket.on('close', () => {
-            console.log('[TCPHttpServer] Client disconnected');
+            logger.debug('[TCPHttpServer] Client disconnected');
           });
         });
 
         this.server.listen({ port: PORT, host: '0.0.0.0' }, () => {
-          console.log(`[TCPHttpServer] Server listening on ${ipAddress}:${PORT}`);
+          logger.debug(`[TCPHttpServer] Server listening on ${ipAddress}:${PORT}`);
           this.isRunning = true;
           resolve(`http://${ipAddress}:${PORT}`);
         });
 
         this.server.on('error', (error: Error) => {
-          console.info('[TCPHttpServer] Server error:', error);
+          logger.info('[TCPHttpServer] Server error:', error);
           this.isRunning = false;
           reject(error);
         });
 
       } catch (error) {
-        console.info('[TCPHttpServer] Failed to start server:', error);
+        logger.info('[TCPHttpServer] Failed to start server:', error);
         reject(error);
       }
     });
@@ -187,7 +190,7 @@ class TCPHttpServer {
       this.server.close();
       this.server = null;
       this.isRunning = false;
-      console.log('[TCPHttpServer] Server stopped');
+      logger.debug('[TCPHttpServer] Server stopped');
     }
   }
 

services/updateService.ts

@@ -0,0 +1,248 @@
+// UpdateService.ts
+import * as FileSystem from 'expo-file-system';
+import * as IntentLauncher from 'expo-intent-launcher';
+// import * as Device from 'expo-device';
+import Toast from 'react-native-toast-message';
+import { version as currentVersion } from '../package.json';
+import { UPDATE_CONFIG } from '../constants/UpdateConfig';
+import Logger from '@/utils/Logger';
+import { Platform } from 'react-native';
+
+const logger = Logger.withTag('UpdateService');
+
+interface VersionInfo {
+  version: string;
+  downloadUrl: string;
+}
+
+/**
+ * 只在 Android 平台使用的常量（iOS 不会走到下载/安装流程）
+ */
+const ANDROID_MIME_TYPE = 'application/vnd.android.package-archive';
+
+class UpdateService {
+  private static instance: UpdateService;
+  static getInstance(): UpdateService {
+    if (!UpdateService.instance) {
+      UpdateService.instance = new UpdateService();
+    }
+    return UpdateService.instance;
+  }
+
+  /** --------------------------------------------------------------
+   *  1️⃣ 远程版本检查（保持不变，只是把 fetch 包装成 async/await）
+   * --------------------------------------------------------------- */
+  async checkVersion(): Promise<VersionInfo> {
+    const maxRetries = 3;
+    for (let attempt = 1; attempt <= maxRetries; attempt++) {
+      try {
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 10_000);
+        const response = await fetch(UPDATE_CONFIG.GITHUB_RAW_URL, {
+          signal: controller.signal,
+        });
+        clearTimeout(timeoutId);
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
+        }
+        const remotePackage = await response.json();
+        const remoteVersion = remotePackage.version as string;
+        return {
+          version: remoteVersion,
+          downloadUrl: UPDATE_CONFIG.getDownloadUrl(remoteVersion),
+        };
+      } catch (e) {
+        logger.warn(`checkVersion attempt ${attempt}/${maxRetries}`, e);
+        if (attempt === maxRetries) {
+          Toast.show({
+            type: 'error',
+            text1: '检查更新失败',
+            text2: '无法获取版本信息，请检查网络',
+          });
+          throw e;
+        }
+        // 指数退避
+        await new Promise(r => setTimeout(r, 2_000 * attempt));
+      }
+    }
+    // 这句永远走不到，仅为 TypeScript 报错
+    throw new Error('Unexpected');
+  }
+
+  /** --------------------------------------------------------------
+   *  2️⃣ 清理旧的 APK 文件（使用 expo-file-system 的 API）
+   * --------------------------------------------------------------- */
+  private async cleanOldApkFiles(): Promise<void> {
+    try {
+      const dirUri = FileSystem.documentDirectory; // e.g. file:///data/user/0/.../files/
+      if (!dirUri) {
+        throw new Error('Document directory is not available');
+      }
+      const listing = await FileSystem.readDirectoryAsync(dirUri);
+      const apkFiles = listing.filter(name => name.startsWith('OrionTV_v') && name.endsWith('.apk'));
+
+      if (apkFiles.length <= 2) return;
+
+      const sorted = apkFiles.sort((a, b) => {
+        const numA = parseInt(a.replace(/[^0-9]/g, ''), 10);
+        const numB = parseInt(b.replace(/[^0-9]/g, ''), 10);
+        return numB - numA; // 倒序（最新在前）
+      });
+
+      const stale = sorted.slice(2); // 保留最新的两个
+      for (const file of stale) {
+        const path = `${dirUri}${file}`;
+        try {
+          await FileSystem.deleteAsync(path, { idempotent: true });
+          logger.debug(`Deleted old APK: ${file}`);
+        } catch (e) {
+          logger.warn(`Failed to delete ${file}`, e);
+        }
+      }
+    } catch (e) {
+      logger.warn('cleanOldApkFiles error', e);
+    }
+  }
+
+  /** --------------------------------------------------------------
+   *  3️⃣ 下载 APK（使用 expo-file-system 的下载 API）
+   * --------------------------------------------------------------- */
+  async downloadApk(
+    url: string,
+    onProgress?: (percent: number) => void,
+  ): Promise<string> {
+    const maxRetries = 3;
+    await this.cleanOldApkFiles();
+
+    for (let attempt = 1; attempt <= maxRetries; attempt++) {
+      try {
+        const timestamp = Date.now();
+        const fileName = `OrionTV_v${timestamp}.apk`;
+        const fileUri = `${FileSystem.documentDirectory}${fileName}`;
+
+        // expo-file-system 把下载进度回调参数统一为 `{totalBytesWritten, totalBytesExpectedToWrite}`
+        const downloadResumable = FileSystem.createDownloadResumable(
+          url,
+          fileUri,
+          {
+            // Android 需要在 AndroidManifest 中声明 INTERNET、WRITE_EXTERNAL_STORAGE (API 33+ 使用 MANAGE_EXTERNAL_STORAGE)
+            // 这里不使用系统下载管理器，因为我们想自己控制进度回调。
+          },
+          progress => {
+            if (onProgress && progress.totalBytesExpectedToWrite) {
+              const percent = Math.floor(
+                (progress.totalBytesWritten / progress.totalBytesExpectedToWrite) * 100,
+              );
+              onProgress(percent);
+            }
+          },
+        );
+
+        const result = await downloadResumable.downloadAsync();
+        if (result && result.uri) {
+          logger.debug(`APK downloaded to ${result.uri}`);
+          return result.uri;
+        } else {
+          throw new Error('Download failed: No URI available');
+        }
+      } catch (e) {
+        logger.warn(`downloadApk attempt ${attempt}/${maxRetries}`, e);
+        if (attempt === maxRetries) {
+          Toast.show({
+            type: 'error',
+            text1: '下载失败',
+            text2: 'APK 下载出现错误，请检查网络',
+          });
+          throw e;
+        }
+        // 指数退避
+        await new Promise(r => setTimeout(r, 3_000 * attempt));
+      }
+    }
+    // 同上，理论不会到这里
+    throw new Error('Download failed');
+  }
+
+  /** --------------------------------------------------------------
+   *  4️⃣ 安装 APK（只在 Android 可用，使用 expo-intent-launcher）
+   * --------------------------------------------------------------- */
+  async installApk(fileUri: string): Promise<void> {
+    // ① 先确认文件存在
+    const exists = await FileSystem.getInfoAsync(fileUri);
+    if (!exists.exists) {
+      throw new Error(`APK not found at ${fileUri}`);
+    }
+
+    // ② 把 file:// 转成 content://，Expo‑FileSystem 已经实现了 FileProvider
+    const contentUri = await FileSystem.getContentUriAsync(fileUri);
+
+    // ③ 只在 Android 里执行
+    if (Platform.OS === 'android') {
+      try {
+        // FLAG_ACTIVITY_NEW_TASK = 0x10000000 (1)
+        // FLAG_GRANT_READ_URI_PERMISSION = 0x00000010
+        const flags = 1 | 0x00000010;   // 1 | 16
+
+        await IntentLauncher.startActivityAsync('android.intent.action.VIEW', {
+          data: contentUri,          // 必须是 content://
+          type: ANDROID_MIME_TYPE,   // application/vnd.android.package-archive
+          flags,
+        });
+      } catch (e: any) {
+        // 统一错误提示
+        if (e.message?.includes('Activity not found')) {
+          Toast.show({
+            type: 'error',
+            text1: '安装失败',
+            text2: '系统没有找到可以打开 APK 的应用，请检查系统设置',
+          });
+        } else if (e.message?.includes('permission')) {
+          Toast.show({
+            type: 'error',
+            text1: '安装失败',
+            text2: '请在设置里允许“未知来源”安装',
+          });
+        } else {
+          Toast.show({
+            type: 'error',
+            text1: '安装失败',
+            text2: '未知错误，请稍后重试',
+          });
+        }
+        throw e;
+      }
+    } else {
+      // iOS 设备不支持直接安装 APK
+      Toast.show({
+        type: 'error',
+        text1: '安装失败',
+        text2: 'iOS 设备无法直接安装 APK',
+      });
+      throw new Error('APK install not supported on iOS');
+    }
+  }
+
+  /** --------------------------------------------------------------
+   *  5️⃣ 版本比对工具（保持原来的实现）
+   * --------------------------------------------------------------- */
+  compareVersions(v1: string, v2: string): number {
+    const p1 = v1.split('.').map(Number);
+    const p2 = v2.split('.').map(Number);
+    for (let i = 0; i < Math.max(p1.length, p2.length); i++) {
+      const n1 = p1[i] ?? 0;
+      const n2 = p2[i] ?? 0;
+      if (n1 > n2) return 1;
+      if (n1 < n2) return -1;
+    }
+    return 0;
+  }
+  getCurrentVersion(): string {
+    return currentVersion;
+  }
+  isUpdateAvailable(remoteVersion: string): boolean {
+    return this.compareVersions(remoteVersion, currentVersion) > 0;
+  }
+}
+
+/* 单例导出 */
+export default UpdateService.getInstance();

stores/authStore.ts

@@ -1,8 +1,11 @@
 import { create } from "zustand";
-import Cookies from "@react-native-cookies/cookies";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import { api } from "@/services/api";
 import { useSettingsStore } from "./settingsStore";
 import Toast from "react-native-toast-message";
+import Logger from "@/utils/Logger";
+
+const logger = Logger.withTag('AuthStore');
 
 interface AuthState {
   isLoggedIn: boolean;
@@ -24,28 +27,53 @@ const useAuthStore = create<AuthState>((set) => ({
       return;
     }
     try {
-      const serverConfig = useSettingsStore.getState().serverConfig;
-      if (!serverConfig?.StorageType) {
-        Toast.show({ type: "error", text1: "请检查网络或者服务器地址是否可用" });
-        return
+      // Wait for server config to be loaded if it's currently loading
+      const settingsState = useSettingsStore.getState();
+      let serverConfig = settingsState.serverConfig;
+
+      // If server config is loading, wait a bit for it to complete
+      if (settingsState.isLoadingServerConfig) {
+        // Wait up to 3 seconds for server config to load
+        const maxWaitTime = 3000;
+        const checkInterval = 100;
+        let waitTime = 0;
+
+        while (waitTime < maxWaitTime) {
+          await new Promise(resolve => setTimeout(resolve, checkInterval));
+          waitTime += checkInterval;
+          const currentState = useSettingsStore.getState();
+          if (!currentState.isLoadingServerConfig) {
+            serverConfig = currentState.serverConfig;
+            break;
+          }
+        }
       }
-      const cookies = await Cookies.get(api.baseURL);
-      if (serverConfig && serverConfig.StorageType === "localstorage" && !cookies.auth) {
-        const loginResult = await api.login().catch(() => {
+
+      if (!serverConfig?.StorageType) {
+        // Only show error if we're not loading and have tried to fetch the config
+        if (!settingsState.isLoadingServerConfig) {
+          Toast.show({ type: "error", text1: "请检查网络或者服务器地址是否可用" });
+        }
+        return;
+      }
+
+      const authToken = await AsyncStorage.getItem('authCookies');
+      if (!authToken) {
+        if (serverConfig && serverConfig.StorageType === "localstorage") {
+          const loginResult = await api.login().catch(() => {
+            set({ isLoggedIn: false, isLoginModalVisible: true });
+          });
+          if (loginResult && loginResult.ok) {
+            set({ isLoggedIn: true });
+          }
+        } else {
           set({ isLoggedIn: false, isLoginModalVisible: true });
-        });
-        if (loginResult && loginResult.ok) {
-          set({ isLoggedIn: true });
         }
       } else {
-        const isLoggedIn = cookies && !!cookies.auth;
-        set({ isLoggedIn });
-        if (!isLoggedIn) {
-          set({ isLoginModalVisible: true });
-        }
+        set({ isLoggedIn: true, isLoginModalVisible: false });
       }
     } catch (error) {
-      console.info("Failed to check login status:", error);
+      logger.error("Failed to check login status:", error);
       if (error instanceof Error && error.message === "UNAUTHORIZED") {
         set({ isLoggedIn: false, isLoginModalVisible: true });
       } else {
@@ -55,10 +83,10 @@ const useAuthStore = create<AuthState>((set) => ({
   },
   logout: async () => {
     try {
-      await Cookies.clearAll();
+      await api.logout();
       set({ isLoggedIn: false, isLoginModalVisible: true });
     } catch (error) {
-      console.info("Failed to logout:", error);
+      logger.error("Failed to logout:", error);
     }
   },
 }));

stores/detailStore.ts

@@ -3,6 +3,9 @@ import { SearchResult, api } from "@/services/api";
 import { getResolutionFromM3U8 } from "@/services/m3u8";
 import { useSettingsStore } from "@/stores/settingsStore";
 import { FavoriteManager } from "@/services/storage";
+import Logger from "@/utils/Logger";
+
+const logger = Logger.withTag('DetailStore');
 
 export type SearchResultWithResolution = SearchResult & { resolution?: string | null };
 
@@ -16,11 +19,14 @@ interface DetailState {
   allSourcesLoaded: boolean;
   controller: AbortController | null;
   isFavorited: boolean;
+  failedSources: Set<string>; // 记录失败的source列表
 
   init: (q: string, preferredSource?: string, id?: string) => Promise<void>;
-  setDetail: (detail: SearchResultWithResolution) => void;
+  setDetail: (detail: SearchResultWithResolution) => Promise<void>;
   abort: () => void;
   toggleFavorite: () => Promise<void>;
+  markSourceAsFailed: (source: string, reason: string) => void;
+  getNextAvailableSource: (currentSource: string, episodeIndex: number) => SearchResultWithResolution | null;
 }
 
 const useDetailStore = create<DetailState>((set, get) => ({
@@ -33,8 +39,12 @@ const useDetailStore = create<DetailState>((set, get) => ({
   allSourcesLoaded: false,
   controller: null,
   isFavorited: false,
+  failedSources: new Set(),
 
   init: async (q, preferredSource, id) => {
+    const perfStart = performance.now();
+    logger.info(`[PERF] DetailStore.init START - q: ${q}, preferredSource: ${preferredSource}, id: ${id}`);
+    
     const { controller: oldController } = get();
     if (oldController) {
       oldController.abort();
@@ -55,21 +65,30 @@ const useDetailStore = create<DetailState>((set, get) => ({
     const { videoSource } = useSettingsStore.getState();
 
     const processAndSetResults = async (results: SearchResult[], merge = false) => {
+      const resolutionStart = performance.now();
+      logger.info(`[PERF] Resolution detection START - processing ${results.length} sources`);
+      
       const resultsWithResolution = await Promise.all(
         results.map(async (searchResult) => {
           let resolution;
+          const m3u8Start = performance.now();
           try {
             if (searchResult.episodes && searchResult.episodes.length > 0) {
               resolution = await getResolutionFromM3U8(searchResult.episodes[0], signal);
             }
           } catch (e) {
             if ((e as Error).name !== "AbortError") {
-              console.info(`Failed to get resolution for ${searchResult.source_name}`, e);
+              logger.info(`Failed to get resolution for ${searchResult.source_name}`, e);
             }
           }
+          const m3u8End = performance.now();
+          logger.info(`[PERF] M3U8 resolution for ${searchResult.source_name}: ${(m3u8End - m3u8Start).toFixed(2)}ms (${resolution || 'failed'})`);
           return { ...searchResult, resolution };
         })
       );
+      
+      const resolutionEnd = performance.now();
+      logger.info(`[PERF] Resolution detection COMPLETE - took ${(resolutionEnd - resolutionStart).toFixed(2)}ms`);
 
       if (signal.aborted) return;
 
@@ -93,59 +112,205 @@ const useDetailStore = create<DetailState>((set, get) => ({
     try {
       // Optimization for favorite navigation
       if (preferredSource && id) {
-        const { results: preferredResult } = await api.searchVideo(q, preferredSource, signal);
+        const searchPreferredStart = performance.now();
+        logger.info(`[PERF] API searchVideo (preferred) START - source: ${preferredSource}, query: "${q}"`);
+        
+        let preferredResult: SearchResult[] = [];
+        let preferredSearchError: any = null;
+        
+        try {
+          const response = await api.searchVideo(q, preferredSource, signal);
+          preferredResult = response.results;
+        } catch (error) {
+          preferredSearchError = error;
+          logger.error(`[ERROR] API searchVideo (preferred) FAILED - source: ${preferredSource}, error:`, error);
+        }
+        
+        const searchPreferredEnd = performance.now();
+        logger.info(`[PERF] API searchVideo (preferred) END - took ${(searchPreferredEnd - searchPreferredStart).toFixed(2)}ms, results: ${preferredResult.length}, error: ${!!preferredSearchError}`);
+        
         if (signal.aborted) return;
+        
+        // 检查preferred source结果
         if (preferredResult.length > 0) {
+          logger.info(`[SUCCESS] Preferred source "${preferredSource}" found ${preferredResult.length} results for "${q}"`);
           await processAndSetResults(preferredResult, false);
           set({ loading: false });
+        } else {
+          // 降级策略：preferred source失败时立即尝试所有源
+          if (preferredSearchError) {
+            logger.warn(`[FALLBACK] Preferred source "${preferredSource}" failed with error, trying all sources immediately`);
+          } else {
+            logger.warn(`[FALLBACK] Preferred source "${preferredSource}" returned 0 results for "${q}", trying all sources immediately`);
+          }
+          
+          // 立即尝试所有源，不再依赖后台搜索
+          const fallbackStart = performance.now();
+          logger.info(`[PERF] FALLBACK search (all sources) START - query: "${q}"`);
+          
+          try {
+            const { results: allResults } = await api.searchVideos(q);
+            const fallbackEnd = performance.now();
+            logger.info(`[PERF] FALLBACK search END - took ${(fallbackEnd - fallbackStart).toFixed(2)}ms, total results: ${allResults.length}`);
+            
+            const filteredResults = allResults.filter(item => item.title === q);
+            logger.info(`[FALLBACK] Filtered results: ${filteredResults.length} matches for "${q}"`);
+            
+            if (filteredResults.length > 0) {
+              logger.info(`[SUCCESS] FALLBACK search found results, proceeding with ${filteredResults[0].source_name}`);
+              await processAndSetResults(filteredResults, false);
+              set({ loading: false });
+            } else {
+              logger.error(`[ERROR] FALLBACK search found no matching results for "${q}"`);
+              set({ 
+                error: `未找到 "${q}" 的播放源，请检查标题或稍后重试`,
+                loading: false 
+              });
+            }
+          } catch (fallbackError) {
+            logger.error(`[ERROR] FALLBACK search FAILED:`, fallbackError);
+            set({ 
+              error: `搜索失败：${fallbackError instanceof Error ? fallbackError.message : '网络错误，请稍后重试'}`,
+              loading: false 
+            });
+          }
+        }
+        
+        // 后台搜索（如果preferred source成功的话）
+        if (preferredResult.length > 0) {
+          const searchAllStart = performance.now();
+          logger.info(`[PERF] API searchVideos (background) START`);
+          
+          try {
+            const { results: allResults } = await api.searchVideos(q);
+            
+            const searchAllEnd = performance.now();
+            logger.info(`[PERF] API searchVideos (background) END - took ${(searchAllEnd - searchAllStart).toFixed(2)}ms, results: ${allResults.length}`);
+            
+            if (signal.aborted) return;
+            await processAndSetResults(allResults.filter(item => item.title === q), true);
+          } catch (backgroundError) {
+            logger.warn(`[WARN] Background search failed, but preferred source already succeeded:`, backgroundError);
+          }
         }
-        // Then load all others in background
-        const { results: allResults } = await api.searchVideos(q);
-        if (signal.aborted) return;
-        await processAndSetResults(allResults, true);
       } else {
         // Standard navigation: fetch resources, then fetch details one by one
-        const allResources = await api.getResources(signal);
-        const enabledResources = videoSource.enabledAll
-          ? allResources
-          : allResources.filter((r) => videoSource.sources[r.key]);
+        const resourcesStart = performance.now();
+        logger.info(`[PERF] API getResources START - query: "${q}"`);
+        
+        try {
+          const allResources = await api.getResources(signal);
+          
+          const resourcesEnd = performance.now();
+          logger.info(`[PERF] API getResources END - took ${(resourcesEnd - resourcesStart).toFixed(2)}ms, resources: ${allResources.length}`);
+          
+          const enabledResources = videoSource.enabledAll
+            ? allResources
+            : allResources.filter((r) => videoSource.sources[r.key]);
 
-        let firstResultFound = false;
-        const searchPromises = enabledResources.map(async (resource) => {
-          try {
-            const { results } = await api.searchVideo(q, resource.key, signal);
-            if (results.length > 0) {
-              await processAndSetResults(results, true);
-              if (!firstResultFound) {
-                set({ loading: false }); // Stop loading indicator on first result
-                firstResultFound = true;
-              }
-            }
-          } catch (error) {
-            console.info(`Failed to fetch from ${resource.name}:`, error);
+          logger.info(`[PERF] Enabled resources: ${enabledResources.length}/${allResources.length}`);
+          
+          if (enabledResources.length === 0) {
+            logger.error(`[ERROR] No enabled resources available for search`);
+            set({ 
+              error: "没有可用的视频源，请检查设置或联系管理员",
+              loading: false 
+            });
+            return;
           }
-        });
 
-        await Promise.all(searchPromises);
+          let firstResultFound = false;
+          let totalResults = 0;
+          const searchPromises = enabledResources.map(async (resource) => {
+            try {
+              const searchStart = performance.now();
+              const { results } = await api.searchVideo(q, resource.key, signal);
+              const searchEnd = performance.now();
+              logger.info(`[PERF] API searchVideo (${resource.name}) took ${(searchEnd - searchStart).toFixed(2)}ms, results: ${results.length}`);
+              
+              if (results.length > 0) {
+                totalResults += results.length;
+                logger.info(`[SUCCESS] Source "${resource.name}" found ${results.length} results for "${q}"`);
+                await processAndSetResults(results, true);
+                if (!firstResultFound) {
+                  set({ loading: false }); // Stop loading indicator on first result
+                  firstResultFound = true;
+                  logger.info(`[SUCCESS] First result found from "${resource.name}", stopping loading indicator`);
+                }
+              } else {
+                logger.warn(`[WARN] Source "${resource.name}" returned 0 results for "${q}"`);
+              }
+            } catch (error) {
+              logger.error(`[ERROR] Failed to fetch from ${resource.name}:`, error);
+            }
+          });
+
+          await Promise.all(searchPromises);
+          
+          // 检查是否找到任何结果
+          if (totalResults === 0) {
+            logger.error(`[ERROR] All sources returned 0 results for "${q}"`);
+            set({ 
+              error: `未找到 "${q}" 的播放源，请尝试其他关键词或稍后重试`,
+              loading: false 
+            });
+          } else {
+            logger.info(`[SUCCESS] Standard search completed, total results: ${totalResults}`);
+          }
+        } catch (resourceError) {
+          logger.error(`[ERROR] Failed to get resources:`, resourceError);
+          set({ 
+            error: `获取视频源失败：${resourceError instanceof Error ? resourceError.message : '网络错误，请稍后重试'}`,
+            loading: false 
+          });
+          return;
+        }
       }
 
-      if (get().searchResults.length === 0) {
-        set({ error: "未找到任何播放源" });
+      const favoriteCheckStart = performance.now();
+      const finalState = get();
+      
+      // 最终检查：如果所有搜索都完成但仍然没有结果
+      if (finalState.searchResults.length === 0 && !finalState.error) {
+        logger.error(`[ERROR] All search attempts completed but no results found for "${q}"`);
+        set({ error: `未找到 "${q}" 的播放源，请检查标题拼写或稍后重试` });
+      } else if (finalState.searchResults.length > 0) {
+        logger.info(`[SUCCESS] DetailStore.init completed successfully with ${finalState.searchResults.length} sources`);
       }
 
-      if (get().detail) {
-        const { source, id } = get().detail!;
-        const isFavorited = await FavoriteManager.isFavorited(source, id.toString());
-        set({ isFavorited });
+      if (finalState.detail) {
+        const { source, id } = finalState.detail;
+        logger.info(`[INFO] Checking favorite status for source: ${source}, id: ${id}`);
+        try {
+          const isFavorited = await FavoriteManager.isFavorited(source, id.toString());
+          set({ isFavorited });
+          logger.info(`[INFO] Favorite status: ${isFavorited}`);
+        } catch (favoriteError) {
+          logger.warn(`[WARN] Failed to check favorite status:`, favoriteError);
+        }
+      } else {
+        logger.warn(`[WARN] No detail found after all search attempts for "${q}"`);
       }
+      
+      const favoriteCheckEnd = performance.now();
+      logger.info(`[PERF] Favorite check took ${(favoriteCheckEnd - favoriteCheckStart).toFixed(2)}ms`);
+      
     } catch (e) {
       if ((e as Error).name !== "AbortError") {
-        set({ error: e instanceof Error ? e.message : "获取数据失败" });
+        logger.error(`[ERROR] DetailStore.init caught unexpected error:`, e);
+        const errorMessage = e instanceof Error ? e.message : "获取数据失败";
+        set({ error: `搜索失败：${errorMessage}` });
+      } else {
+        logger.info(`[INFO] DetailStore.init aborted by user`);
       }
     } finally {
       if (!signal.aborted) {
         set({ loading: false, allSourcesLoaded: true });
+        logger.info(`[INFO] DetailStore.init cleanup completed`);
       }
+      
+      const perfEnd = performance.now();
+      logger.info(`[PERF] DetailStore.init COMPLETE - total time: ${(perfEnd - perfStart).toFixed(2)}ms`);
     }
   },
 
@@ -178,6 +343,64 @@ const useDetailStore = create<DetailState>((set, get) => ({
     const newIsFavorited = await FavoriteManager.toggle(source, id.toString(), favoriteItem);
     set({ isFavorited: newIsFavorited });
   },
+
+  markSourceAsFailed: (source: string, reason: string) => {
+    const { failedSources } = get();
+    const newFailedSources = new Set(failedSources);
+    newFailedSources.add(source);
+    
+    logger.warn(`[SOURCE_FAILED] Marking source "${source}" as failed due to: ${reason}`);
+    logger.info(`[SOURCE_FAILED] Total failed sources: ${newFailedSources.size}`);
+    
+    set({ failedSources: newFailedSources });
+  },
+
+  getNextAvailableSource: (currentSource: string, episodeIndex: number) => {
+    const { searchResults, failedSources } = get();
+    
+    logger.info(`[SOURCE_SELECTION] Looking for alternative to "${currentSource}" for episode ${episodeIndex + 1}`);
+    logger.info(`[SOURCE_SELECTION] Failed sources: [${Array.from(failedSources).join(', ')}]`);
+    
+    // 过滤掉当前source和已失败的sources
+    const availableSources = searchResults.filter(result => 
+      result.source !== currentSource && 
+      !failedSources.has(result.source) &&
+      result.episodes && 
+      result.episodes.length > episodeIndex
+    );
+    
+    logger.info(`[SOURCE_SELECTION] Available sources: ${availableSources.length}`);
+    availableSources.forEach(source => {
+      logger.info(`[SOURCE_SELECTION] - ${source.source} (${source.source_name}): ${source.episodes?.length || 0} episodes`);
+    });
+    
+    if (availableSources.length === 0) {
+      logger.error(`[SOURCE_SELECTION] No available sources for episode ${episodeIndex + 1}`);
+      return null;
+    }
+    
+    // 优先选择有高分辨率的source
+    const sortedSources = availableSources.sort((a, b) => {
+      const aResolution = a.resolution || '';
+      const bResolution = b.resolution || '';
+      
+      // 优先级: 1080p > 720p > 其他 > 无分辨率
+      const resolutionPriority = (res: string) => {
+        if (res.includes('1080')) return 4;
+        if (res.includes('720')) return 3;
+        if (res.includes('480')) return 2;
+        if (res.includes('360')) return 1;
+        return 0;
+      };
+      
+      return resolutionPriority(bResolution) - resolutionPriority(aResolution);
+    });
+    
+    const selectedSource = sortedSources[0];
+    logger.info(`[SOURCE_SELECTION] Selected fallback source: ${selectedSource.source} (${selectedSource.source_name}) with resolution: ${selectedSource.resolution || 'unknown'}`);
+    
+    return selectedSource;
+  },
 }));
 
 export const sourcesSelector = (state: DetailState) => state.sources;

stores/homeStore.ts

@@ -55,6 +55,26 @@ const initialCategories: Category[] = [
   { title: "豆瓣 Top250", type: "movie", tag: "top250" },
 ];
 
+// 添加缓存项接口
+interface CacheItem {
+  data: RowItem[];
+  timestamp: number;
+  type: 'movie' | 'tv' | 'record';
+  hasMore: boolean;
+}
+
+const CACHE_EXPIRE_TIME = 5 * 60 * 1000; // 5分钟过期
+const MAX_CACHE_SIZE = 10; // 最大缓存容量
+const MAX_ITEMS_PER_CACHE = 40; // 每个缓存最大条目数
+
+const getCacheKey = (category: Category) => {
+  return `${category.type || 'unknown'}-${category.title}-${category.tag || ''}`;
+};
+
+const isValidCache = (cacheItem: CacheItem) => {
+  return Date.now() - cacheItem.timestamp < CACHE_EXPIRE_TIME;
+};
+
 interface HomeState {
   categories: Category[];
   selectedCategory: Category;
@@ -68,8 +88,12 @@ interface HomeState {
   loadMoreData: () => Promise<void>;
   selectCategory: (category: Category) => void;
   refreshPlayRecords: () => Promise<void>;
+  clearError: () => void;
 }
 
+// 内存缓存，应用生命周期内有效
+const dataCache = new Map<string, CacheItem>();
+
 const useHomeStore = create<HomeState>((set, get) => ({
   categories: initialCategories,
   selectedCategory: initialCategories[0],
@@ -83,6 +107,30 @@ const useHomeStore = create<HomeState>((set, get) => ({
   fetchInitialData: async () => {
     const { apiBaseUrl } = useSettingsStore.getState();
     await useAuthStore.getState().checkLoginStatus(apiBaseUrl);
+
+    const { selectedCategory } = get();
+    const cacheKey = getCacheKey(selectedCategory);
+
+    // 最近播放不缓存，始终实时获取
+    if (selectedCategory.type === 'record') {
+      set({ loading: true, contentData: [], pageStart: 0, hasMore: true, error: null });
+      await get().loadMoreData();
+      return;
+    }
+
+    // 检查缓存
+    if (dataCache.has(cacheKey) && isValidCache(dataCache.get(cacheKey)!)) {
+      const cachedData = dataCache.get(cacheKey)!;
+      set({
+        loading: false,
+        contentData: cachedData.data,
+        pageStart: cachedData.data.length,
+        hasMore: cachedData.hasMore,
+        error: null
+      });
+      return;
+    }
+
     set({ loading: true, contentData: [], pageStart: 0, hasMore: true, error: null });
     await get().loadMoreData();
   },
@@ -124,19 +172,73 @@ const useHomeStore = create<HomeState>((set, get) => ({
 
         set({ contentData: rowItems, hasMore: false });
       } else if (selectedCategory.type && selectedCategory.tag) {
-        const result = await api.getDoubanData(selectedCategory.type, selectedCategory.tag, 20, pageStart);
-        if (result.list.length === 0) {
-          set({ hasMore: false });
+        const result = await api.getDoubanData(
+          selectedCategory.type,
+          selectedCategory.tag,
+          20,
+          pageStart
+        );
+
+        const newItems = result.list.map((item) => ({
+          ...item,
+          id: item.title,
+          source: "douban",
+        })) as RowItem[];
+
+        const cacheKey = getCacheKey(selectedCategory);
+
+        if (pageStart === 0) {
+          // 清理过期缓存
+          for (const [key, value] of dataCache.entries()) {
+            if (!isValidCache(value)) {
+              dataCache.delete(key);
+            }
+          }
+
+          // 如果缓存太大，删除最旧的项
+          if (dataCache.size >= MAX_CACHE_SIZE) {
+            const oldestKey = Array.from(dataCache.keys())[0];
+            dataCache.delete(oldestKey);
+          }
+
+          // 限制缓存的数据条目数，但不限制显示的数据
+          const cacheItems = newItems.slice(0, MAX_ITEMS_PER_CACHE);
+
+          // 存储新缓存
+          dataCache.set(cacheKey, {
+            data: cacheItems,
+            timestamp: Date.now(),
+            type: selectedCategory.type,
+            hasMore: true // 始终为 true，因为我们允许继续加载
+          });
+
+          set({
+            contentData: newItems, // 使用完整的新数据
+            pageStart: newItems.length,
+            hasMore: result.list.length !== 0,
+          });
         } else {
-          const newItems = result.list.map((item) => ({
-            ...item,
-            id: item.title,
-            source: "douban",
-          })) as RowItem[];
+          // 增量加载时更新缓存
+          const existingCache = dataCache.get(cacheKey);
+          if (existingCache) {
+            // 只有当缓存数据少于最大限制时才更新缓存
+            if (existingCache.data.length < MAX_ITEMS_PER_CACHE) {
+              const updatedData = [...existingCache.data, ...newItems];
+              const limitedCacheData = updatedData.slice(0, MAX_ITEMS_PER_CACHE);
+
+              dataCache.set(cacheKey, {
+                ...existingCache,
+                data: limitedCacheData,
+                hasMore: true // 始终为 true，因为我们允许继续加载
+              });
+            }
+          }
+
+          // 更新状态时使用所有数据
           set((state) => ({
-            contentData: pageStart === 0 ? newItems : [...state.contentData, ...newItems],
-            pageStart: state.pageStart + result.list.length,
-            hasMore: true,
+            contentData: [...state.contentData, ...newItems],
+            pageStart: state.pageStart + newItems.length,
+            hasMore: result.list.length !== 0,
           }));
         }
       } else if (selectedCategory.tags) {
@@ -146,11 +248,26 @@ const useHomeStore = create<HomeState>((set, get) => ({
         set({ hasMore: false });
       }
     } catch (err: any) {
+      let errorMessage = "加载失败，请重试";
+
       if (err.message === "API_URL_NOT_SET") {
-        set({ error: "请点击右上角设置按钮，配置您的服务器地址" });
-      } else {
-        set({ error: "加载失败，请重试" });
+        errorMessage = "请点击右上角设置按钮，配置您的服务器地址";
+      } else if (err.message === "UNAUTHORIZED") {
+        errorMessage = "认证失败，请重新登录";
+        useAuthStore.setState({ isLoggedIn: false, isLoginModalVisible: true });
+      } else if (err.message.includes("Network")) {
+        errorMessage = "网络连接失败，请检查网络连接";
+      } else if (err.message.includes("timeout")) {
+        errorMessage = "请求超时，请检查网络或服务器状态";
+      } else if (err.message.includes("404")) {
+        errorMessage = "服务器API路径不正确，请检查服务器配置";
+      } else if (err.message.includes("500")) {
+        errorMessage = "服务器内部错误，请联系管理员";
+      } else if (err.message.includes("403")) {
+        errorMessage = "访问被拒绝，请检查权限设置";
       }
+
+      set({ error: errorMessage });
     } finally {
       set({ loading: false, loadingMore: false });
     }
@@ -158,10 +275,37 @@ const useHomeStore = create<HomeState>((set, get) => ({
 
   selectCategory: (category: Category) => {
     const currentCategory = get().selectedCategory;
-    // Only fetch new data if the category or tag actually changes
+    const cacheKey = getCacheKey(category);
+
     if (currentCategory.title !== category.title || currentCategory.tag !== category.tag) {
-      set({ selectedCategory: category, contentData: [], pageStart: 0, hasMore: true, error: null });
-      get().fetchInitialData();
+      set({
+        selectedCategory: category,
+        contentData: [],
+        pageStart: 0,
+        hasMore: true,
+        error: null
+      });
+
+      if (category.type === 'record') {
+        get().fetchInitialData();
+        return;
+      }
+
+      const cachedData = dataCache.get(cacheKey);
+      if (cachedData && isValidCache(cachedData)) {
+        set({
+          contentData: cachedData.data,
+          pageStart: cachedData.data.length,
+          hasMore: cachedData.hasMore,
+          loading: false
+        });
+      } else {
+        // 删除过期缓存
+        if (cachedData) {
+          dataCache.delete(cacheKey);
+        }
+        get().fetchInitialData();
+      }
     }
   },
 
@@ -199,8 +343,13 @@ const useHomeStore = create<HomeState>((set, get) => ({
       }
       return {};
     });
+
     get().fetchInitialData();
   },
+
+  clearError: () => {
+    set({ error: null });
+  },
 }));
 
 export default useHomeStore;

stores/playerStore.ts

@@ -2,8 +2,11 @@ import { create } from "zustand";
 import Toast from "react-native-toast-message";
 import { AVPlaybackStatus, Video } from "expo-av";
 import { RefObject } from "react";
-import { PlayRecord, PlayRecordManager } from "@/services/storage";
+import { PlayRecord, PlayRecordManager, PlayerSettingsManager } from "@/services/storage";
 import useDetailStore, { episodesSelectorBySource } from "./detailStore";
+import Logger from '@/utils/Logger';
+
+const logger = Logger.withTag('PlayerStore');
 
 interface Episode {
   url: string;
@@ -19,11 +22,13 @@ interface PlayerState {
   showControls: boolean;
   showEpisodeModal: boolean;
   showSourceModal: boolean;
+  showSpeedModal: boolean;
   showNextEpisodeOverlay: boolean;
   isSeeking: boolean;
   seekPosition: number;
   progressPosition: number;
   initialPosition: number;
+  playbackRate: number;
   introEndTime?: number;
   outroStartTime?: number;
   setVideoRef: (ref: RefObject<Video>) => void;
@@ -42,7 +47,9 @@ interface PlayerState {
   setShowControls: (show: boolean) => void;
   setShowEpisodeModal: (show: boolean) => void;
   setShowSourceModal: (show: boolean) => void;
+  setShowSpeedModal: (show: boolean) => void;
   setShowNextEpisodeOverlay: (show: boolean) => void;
+  setPlaybackRate: (rate: number) => void;
   setIntroEndTime: () => void;
   setOutroStartTime: () => void;
   reset: () => void;
@@ -50,6 +57,7 @@ interface PlayerState {
   _isRecordSaveThrottled: boolean;
   // Internal helper
   _savePlayRecord: (updates?: Partial<PlayRecord>, options?: { immediate?: boolean }) => void;
+  handleVideoError: (errorType: 'ssl' | 'network' | 'other', failedUrl: string) => Promise<void>;
 }
 
 const usePlayerStore = create<PlayerState>((set, get) => ({
@@ -61,11 +69,13 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
   showControls: false,
   showEpisodeModal: false,
   showSourceModal: false,
+  showSpeedModal: false,
   showNextEpisodeOverlay: false,
   isSeeking: false,
   seekPosition: 0,
   progressPosition: 0,
   initialPosition: 0,
+  playbackRate: 1.0,
   introEndTime: undefined,
   outroStartTime: undefined,
   _seekTimeout: undefined,
@@ -74,40 +84,156 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
   setVideoRef: (ref) => set({ videoRef: ref }),
 
   loadVideo: async ({ source, id, episodeIndex, position, title }) => {
+    const perfStart = performance.now();
+    logger.info(`[PERF] PlayerStore.loadVideo START - source: ${source}, id: ${id}, title: ${title}`);
+    
     let detail = useDetailStore.getState().detail;
-    let episodes = episodesSelectorBySource(source)(useDetailStore.getState());
+    let episodes: string[] = [];
+    
+    // 如果有detail，使用detail的source获取episodes；否则使用传入的source
+    if (detail && detail.source) {
+      logger.info(`[INFO] Using existing detail source "${detail.source}" to get episodes`);
+      episodes = episodesSelectorBySource(detail.source)(useDetailStore.getState());
+    } else {
+      logger.info(`[INFO] No existing detail, using provided source "${source}" to get episodes`);
+      episodes = episodesSelectorBySource(source)(useDetailStore.getState());
+    }
 
     set({
       isLoading: true,
     });
 
-    if (!detail || !episodes || episodes.length === 0 || detail.title !== title) {
+    const needsDetailInit = !detail || !episodes || episodes.length === 0 || detail.title !== title;
+    logger.info(`[PERF] Detail check - needsInit: ${needsDetailInit}, hasDetail: ${!!detail}, episodesCount: ${episodes?.length || 0}`);
+
+    if (needsDetailInit) {
+      const detailInitStart = performance.now();
+      logger.info(`[PERF] DetailStore.init START - ${title}`);
+      
       await useDetailStore.getState().init(title, source, id);
+      
+      const detailInitEnd = performance.now();
+      logger.info(`[PERF] DetailStore.init END - took ${(detailInitEnd - detailInitStart).toFixed(2)}ms`);
+      
       detail = useDetailStore.getState().detail;
-      episodes = episodesSelectorBySource(source)(useDetailStore.getState());
+      
       if (!detail) {
-        console.info("Detail not found after initialization");
+        logger.error(`[ERROR] Detail not found after initialization for "${title}" (source: ${source}, id: ${id})`);
+        
+        // 检查DetailStore的错误状态
+        const detailStoreState = useDetailStore.getState();
+        if (detailStoreState.error) {
+          logger.error(`[ERROR] DetailStore error: ${detailStoreState.error}`);
+          set({ 
+            isLoading: false,
+            // 可以选择在这里设置一个错误状态，但playerStore可能没有error字段
+          });
+        } else {
+          logger.error(`[ERROR] DetailStore init completed but no detail found and no error reported`);
+          set({ isLoading: false });
+        }
         return;
       }
+      
+      // 使用DetailStore找到的实际source来获取episodes，而不是原始的preferredSource
+      logger.info(`[INFO] Using actual source "${detail.source}" instead of preferred source "${source}"`);  
+      episodes = episodesSelectorBySource(detail.source)(useDetailStore.getState());
+      
+      if (!episodes || episodes.length === 0) {
+        logger.error(`[ERROR] No episodes found for "${title}" from source "${detail.source}" (${detail.source_name})`);
+        
+        // 尝试从searchResults中直接获取episodes
+        const detailStoreState = useDetailStore.getState();
+        logger.info(`[INFO] Available sources in searchResults: ${detailStoreState.searchResults.map(r => `${r.source}(${r.episodes?.length || 0} episodes)`).join(', ')}`);
+        
+        // 如果当前source没有episodes，尝试使用第一个有episodes的source
+        const sourceWithEpisodes = detailStoreState.searchResults.find(r => r.episodes && r.episodes.length > 0);
+        if (sourceWithEpisodes) {
+          logger.info(`[FALLBACK] Using alternative source "${sourceWithEpisodes.source}" with ${sourceWithEpisodes.episodes.length} episodes`);
+          episodes = sourceWithEpisodes.episodes;
+          // 更新detail为有episodes的source
+          detail = sourceWithEpisodes;
+        } else {
+          logger.error(`[ERROR] No source with episodes found in searchResults`);
+          set({ isLoading: false });
+          return;
+        }
+      }
+      
+      logger.info(`[SUCCESS] Detail and episodes loaded - source: ${detail.source_name}, episodes: ${episodes.length}`);
+    } else {
+      logger.info(`[PERF] Skipping DetailStore.init - using cached data`);
+      
+      // 即使是缓存的数据，也要确保使用正确的source获取episodes
+      if (detail && detail.source && detail.source !== source) {
+        logger.info(`[INFO] Cached detail source "${detail.source}" differs from provided source "${source}", updating episodes`);
+        episodes = episodesSelectorBySource(detail.source)(useDetailStore.getState());
+        
+        if (!episodes || episodes.length === 0) {
+          logger.warn(`[WARN] Cached detail source "${detail.source}" has no episodes, trying provided source "${source}"`);
+          episodes = episodesSelectorBySource(source)(useDetailStore.getState());
+        }
+      }
     }
 
+    // 最终验证：确保我们有有效的detail和episodes数据
+    if (!detail) {
+      logger.error(`[ERROR] Final check failed: detail is null`);
+      set({ isLoading: false });
+      return;
+    }
+    
+    if (!episodes || episodes.length === 0) {
+      logger.error(`[ERROR] Final check failed: no episodes available for source "${detail.source}" (${detail.source_name})`);
+      set({ isLoading: false });
+      return;
+    }
+    
+    logger.info(`[SUCCESS] Final validation passed - detail: ${detail.source_name}, episodes: ${episodes.length}`);
+
     try {
-      const playRecord = await PlayRecordManager.get(detail.source, detail.id.toString());
+      const storageStart = performance.now();
+      logger.info(`[PERF] Storage operations START`);
+      
+      const playRecord = await PlayRecordManager.get(detail!.source, detail!.id.toString());
+      const storagePlayRecordEnd = performance.now();
+      logger.info(`[PERF] PlayRecordManager.get took ${(storagePlayRecordEnd - storageStart).toFixed(2)}ms`);
+      
+      const playerSettings = await PlayerSettingsManager.get(detail!.source, detail!.id.toString());
+      const storageEnd = performance.now();
+      logger.info(`[PERF] PlayerSettingsManager.get took ${(storageEnd - storagePlayRecordEnd).toFixed(2)}ms`);
+      logger.info(`[PERF] Total storage operations took ${(storageEnd - storageStart).toFixed(2)}ms`);
+      
       const initialPositionFromRecord = playRecord?.play_time ? playRecord.play_time * 1000 : 0;
+      const savedPlaybackRate = playerSettings?.playbackRate || 1.0;
+      
+      const episodesMappingStart = performance.now();
+      const mappedEpisodes = episodes.map((ep, index) => ({
+        url: ep,
+        title: `第 ${index + 1} 集`,
+      }));
+      const episodesMappingEnd = performance.now();
+      logger.info(`[PERF] Episodes mapping (${episodes.length} episodes) took ${(episodesMappingEnd - episodesMappingStart).toFixed(2)}ms`);
+      
       set({
         isLoading: false,
         currentEpisodeIndex: episodeIndex,
         initialPosition: position || initialPositionFromRecord,
-        episodes: episodes.map((ep, index) => ({
-          url: ep,
-          title: `第 ${index + 1} 集`,
-        })),
-        introEndTime: playRecord?.introEndTime,
-        outroStartTime: playRecord?.outroStartTime,
+        playbackRate: savedPlaybackRate,
+        episodes: mappedEpisodes,
+        introEndTime: playRecord?.introEndTime || playerSettings?.introEndTime,
+        outroStartTime: playRecord?.outroStartTime || playerSettings?.outroStartTime,
       });
+      
+      const perfEnd = performance.now();
+      logger.info(`[PERF] PlayerStore.loadVideo COMPLETE - total time: ${(perfEnd - perfStart).toFixed(2)}ms`);
+      
     } catch (error) {
-      console.info("Failed to load play record", error);
+      logger.debug("Failed to load play record", error);
       set({ isLoading: false });
+      
+      const perfEnd = performance.now();
+      logger.info(`[PERF] PlayerStore.loadVideo ERROR - total time: ${(perfEnd - perfStart).toFixed(2)}ms`);
     }
   },
 
@@ -124,7 +250,7 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
       try {
         await videoRef?.current?.replayAsync();
       } catch (error) {
-        console.error("Failed to replay video:", error);
+        logger.debug("Failed to replay video:", error);
         Toast.show({ type: "error", text1: "播放失败" });
       }
     }
@@ -140,7 +266,7 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
           await videoRef?.current?.playAsync();
         }
       } catch (error) {
-        console.error("Failed to toggle play/pause:", error);
+        logger.debug("Failed to toggle play/pause:", error);
         Toast.show({ type: "error", text1: "操作失败" });
       }
     }
@@ -154,7 +280,7 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
     try {
       await videoRef?.current?.setPositionAsync(newPosition);
     } catch (error) {
-      console.error("Failed to seek video:", error);
+      logger.debug("Failed to seek video:", error);
       Toast.show({ type: "error", text1: "快进/快退失败" });
     }
 
@@ -260,7 +386,7 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
   handlePlaybackStatusUpdate: (newStatus) => {
     if (!newStatus.isLoaded) {
       if (newStatus.error) {
-        console.info(`Playback Error: ${newStatus.error}`);
+        logger.debug(`Playback Error: ${newStatus.error}`);
       }
       set({ status: newStatus });
       return;
@@ -305,8 +431,26 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
   setShowControls: (show) => set({ showControls: show }),
   setShowEpisodeModal: (show) => set({ showEpisodeModal: show }),
   setShowSourceModal: (show) => set({ showSourceModal: show }),
+  setShowSpeedModal: (show) => set({ showSpeedModal: show }),
   setShowNextEpisodeOverlay: (show) => set({ showNextEpisodeOverlay: show }),
 
+  setPlaybackRate: async (rate) => {
+    const { videoRef } = get();
+    const detail = useDetailStore.getState().detail;
+    
+    try {
+      await videoRef?.current?.setRateAsync(rate, true);
+      set({ playbackRate: rate });
+      
+      // Save the playback rate preference
+      if (detail) {
+        await PlayerSettingsManager.save(detail.source, detail.id.toString(), { playbackRate: rate });
+      }
+    } catch (error) {
+      logger.debug("Failed to set playback rate:", error);
+    }
+  },
+
   reset: () => {
     set({
       episodes: [],
@@ -316,18 +460,113 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
       showControls: false,
       showEpisodeModal: false,
       showSourceModal: false,
+      showSpeedModal: false,
       showNextEpisodeOverlay: false,
       initialPosition: 0,
+      playbackRate: 1.0,
       introEndTime: undefined,
       outroStartTime: undefined,
     });
   },
+
+  handleVideoError: async (errorType: 'ssl' | 'network' | 'other', failedUrl: string) => {
+    const perfStart = performance.now();
+    logger.error(`[VIDEO_ERROR] Handling ${errorType} error for URL: ${failedUrl}`);
+    
+    const detailStoreState = useDetailStore.getState();
+    const { detail } = detailStoreState;
+    const { currentEpisodeIndex } = get();
+    
+    if (!detail) {
+      logger.error(`[VIDEO_ERROR] Cannot fallback - no detail available`);
+      set({ isLoading: false });
+      return;
+    }
+    
+    // 标记当前source为失败
+    const currentSource = detail.source;
+    const errorReason = `${errorType} error: ${failedUrl.substring(0, 100)}...`;
+    useDetailStore.getState().markSourceAsFailed(currentSource, errorReason);
+    
+    // 获取下一个可用的source
+    const fallbackSource = useDetailStore.getState().getNextAvailableSource(currentSource, currentEpisodeIndex);
+    
+    if (!fallbackSource) {
+      logger.error(`[VIDEO_ERROR] No fallback sources available for episode ${currentEpisodeIndex + 1}`);
+      Toast.show({ 
+        type: "error", 
+        text1: "播放失败", 
+        text2: "所有播放源都不可用，请稍后重试" 
+      });
+      set({ isLoading: false });
+      return;
+    }
+    
+    logger.info(`[VIDEO_ERROR] Switching to fallback source: ${fallbackSource.source} (${fallbackSource.source_name})`);
+    
+    try {
+      // 更新DetailStore的当前detail为fallback source
+      await useDetailStore.getState().setDetail(fallbackSource);
+      
+      // 重新加载当前集数的episodes
+      const newEpisodes = fallbackSource.episodes || [];
+      if (newEpisodes.length > currentEpisodeIndex) {
+        const mappedEpisodes = newEpisodes.map((ep, index) => ({
+          url: ep,
+          title: `第 ${index + 1} 集`,
+        }));
+        
+        set({
+          episodes: mappedEpisodes,
+          isLoading: false, // 让Video组件重新渲染
+        });
+        
+        const perfEnd = performance.now();
+        logger.info(`[VIDEO_ERROR] Successfully switched to fallback source in ${(perfEnd - perfStart).toFixed(2)}ms`);
+        logger.info(`[VIDEO_ERROR] New episode URL: ${newEpisodes[currentEpisodeIndex].substring(0, 100)}...`);
+        
+        Toast.show({ 
+          type: "success", 
+          text1: "已切换播放源", 
+          text2: `正在使用 ${fallbackSource.source_name}` 
+        });
+      } else {
+        logger.error(`[VIDEO_ERROR] Fallback source doesn't have episode ${currentEpisodeIndex + 1}`);
+        set({ isLoading: false });
+      }
+    } catch (error) {
+      logger.error(`[VIDEO_ERROR] Failed to switch to fallback source:`, error);
+      set({ isLoading: false });
+    }
+  },
 }));
 
 export default usePlayerStore;
 
 export const selectCurrentEpisode = (state: PlayerState) => {
-  if (state.episodes.length > state.currentEpisodeIndex) {
-    return state.episodes[state.currentEpisodeIndex];
+  // 增强数据安全性检查
+  if (
+    state.episodes &&
+    Array.isArray(state.episodes) &&
+    state.episodes.length > 0 &&
+    state.currentEpisodeIndex >= 0 &&
+    state.currentEpisodeIndex < state.episodes.length
+  ) {
+    const episode = state.episodes[state.currentEpisodeIndex];
+    // 确保episode有有效的URL
+    if (episode && episode.url && episode.url.trim() !== "") {
+      return episode;
+    } else {
+      // 仅在调试模式下打印
+      if (__DEV__) {
+        logger.debug(`[PERF] selectCurrentEpisode - episode found but invalid URL: ${episode?.url}`);
+      }
+    }
+  } else {
+    // 仅在调试模式下打印
+    if (__DEV__) {
+      logger.debug(`[PERF] selectCurrentEpisode - no valid episode: episodes.length=${state.episodes?.length}, currentIndex=${state.currentEpisodeIndex}`);
+    }
   }
+  return undefined;
 };

stores/remoteControlStore.ts

@@ -1,5 +1,8 @@
 import { create } from 'zustand';
 import { remoteControlService } from '@/services/remoteControlService';
+import Logger from '@/utils/Logger';
+
+const logger = Logger.withTag('RemoteControlStore');
 
 interface RemoteControlState {
   isServerRunning: boolean;
@@ -8,10 +11,12 @@ interface RemoteControlState {
   startServer: () => Promise<void>;
   stopServer: () => void;
   isModalVisible: boolean;
-  showModal: () => void;
+  showModal: (targetPage?: string) => void;
   hideModal: () => void;
   lastMessage: string | null;
-  setMessage: (message: string) => void;
+  targetPage: string | null;
+  setMessage: (message: string, targetPage?: string) => void;
+  clearMessage: () => void;
 }
 
 export const useRemoteControlStore = create<RemoteControlState>((set, get) => ({
@@ -20,6 +25,7 @@ export const useRemoteControlStore = create<RemoteControlState>((set, get) => ({
   error: null,
   isModalVisible: false,
   lastMessage: null,
+  targetPage: null,
 
   startServer: async () => {
     if (get().isServerRunning) {
@@ -27,21 +33,23 @@ export const useRemoteControlStore = create<RemoteControlState>((set, get) => ({
     }
     remoteControlService.init({
       onMessage: (message: string) => {
-        console.log('[RemoteControlStore] Received message:', message);
-        set({ lastMessage: message });
+        logger.debug('Received message:', message);
+        const currentState = get();
+        // Use the current targetPage from the store
+        set({ lastMessage: message, targetPage: currentState.targetPage });
       },
       onHandshake: () => {
-        console.log('[RemoteControlStore] Handshake successful');
+        logger.debug('Handshake successful');
         set({ isModalVisible: false })
       },
     });
     try {
       const url = await remoteControlService.startServer();
-      console.log(`[RemoteControlStore] Server started, URL: ${url}`);
+      logger.info('Server started, URL:', url);
       set({ isServerRunning: true, serverUrl: url, error: null });
     } catch {
       const errorMessage = '启动失败，请强制退应用后重试。';
-      console.info('[RemoteControlStore] Failed to start server:', errorMessage);
+      logger.error('Failed to start server:', errorMessage);
       set({ error: errorMessage });
     }
   },
@@ -53,10 +61,14 @@ export const useRemoteControlStore = create<RemoteControlState>((set, get) => ({
     }
   },
 
-  showModal: () => set({ isModalVisible: true }),
-  hideModal: () => set({ isModalVisible: false }),
+  showModal: (targetPage?: string) => set({ isModalVisible: true, targetPage }),
+  hideModal: () => set({ isModalVisible: false, targetPage: null }),
 
-  setMessage: (message: string) => {
-    set({ lastMessage: `${message}_${Date.now()}` });
+  setMessage: (message: string, targetPage?: string) => {
+    set({ lastMessage: `${message}_${Date.now()}`, targetPage });
+  },
+
+  clearMessage: () => {
+    set({ lastMessage: null, targetPage: null });
   },
 }));

stores/settingsStore.ts

@@ -2,6 +2,10 @@ import { create } from "zustand";
 import { SettingsManager } from "@/services/storage";
 import { api, ServerConfig } from "@/services/api";
 import { storageConfig } from "@/services/storageConfig";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import Logger from "@/utils/Logger";
+
+const logger = Logger.withTag('SettingsStore');
 
 interface SettingsState {
   apiBaseUrl: string;
@@ -15,6 +19,7 @@ interface SettingsState {
   };
   isModalVisible: boolean;
   serverConfig: ServerConfig | null;
+  isLoadingServerConfig: boolean;
   loadSettings: () => Promise<void>;
   fetchServerConfig: () => Promise<void>;
   setApiBaseUrl: (url: string) => void;
@@ -33,6 +38,7 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
   remoteInputEnabled: false,
   isModalVisible: false,
   serverConfig: null,
+  isLoadingServerConfig: false,
   videoSource: {
     enabledAll: true,
     sources: {},
@@ -48,10 +54,13 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
         sources: {},
       },
     });
-    api.setBaseUrl(settings.apiBaseUrl);
-    await get().fetchServerConfig();
+    if (settings.apiBaseUrl) {
+      api.setBaseUrl(settings.apiBaseUrl);
+      await get().fetchServerConfig();
+    }
   },
   fetchServerConfig: async () => {
+    set({ isLoadingServerConfig: true });
     try {
       const config = await api.getServerConfig();
       if (config) {
@@ -60,7 +69,9 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
       }
     } catch (error) {
       set({ serverConfig: null });
-      console.info("Failed to fetch server config:", error);
+      logger.error("Failed to fetch server config:", error);
+    } finally {
+      set({ isLoadingServerConfig: false });
     }
   },
   setApiBaseUrl: (url) => set({ apiBaseUrl: url }),
@@ -69,7 +80,8 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
   setVideoSource: (config) => set({ videoSource: config }),
   saveSettings: async () => {
     const { apiBaseUrl, m3uUrl, remoteInputEnabled, videoSource } = get();
-
+    const currentSettings = await SettingsManager.get()
+    const currentApiBaseUrl = currentSettings.apiBaseUrl;
     let processedApiBaseUrl = apiBaseUrl.trim();
     if (processedApiBaseUrl.endsWith("/")) {
       processedApiBaseUrl = processedApiBaseUrl.slice(0, -1);
@@ -95,6 +107,9 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
       remoteInputEnabled,
       videoSource,
     });
+    if ( currentApiBaseUrl !== processedApiBaseUrl) {
+      await AsyncStorage.setItem('authCookies', '');
+    }
     api.setBaseUrl(processedApiBaseUrl);
     // Also update the URL in the state so the input field shows the processed URL
     set({ isModalVisible: false, apiBaseUrl: processedApiBaseUrl });

stores/updateStore.ts

@@ -0,0 +1,208 @@
+import { create } from 'zustand';
+import updateService from '../services/updateService';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import Toast from 'react-native-toast-message';
+import Logger from '@/utils/Logger';
+
+const logger = Logger.withTag('UpdateStore');
+
+interface UpdateState {
+  // 状态
+  updateAvailable: boolean;
+  currentVersion: string;
+  remoteVersion: string;
+  downloadUrl: string;
+  downloading: boolean;
+  downloadProgress: number;
+  downloadedPath: string | null;
+  error: string | null;
+  lastCheckTime: number;
+  skipVersion: string | null;
+  showUpdateModal: boolean;
+  isLatestVersion: boolean; // 新增：是否已是最新版本
+  
+  // 操作
+  checkForUpdate: (silent?: boolean) => Promise<void>;
+  startDownload: () => Promise<void>;
+  installUpdate: () => Promise<void>;
+  setShowUpdateModal: (show: boolean) => void;
+  skipThisVersion: () => Promise<void>;
+  reset: () => void;
+}
+
+const STORAGE_KEYS = {
+  LAST_CHECK_TIME: 'update_last_check_time',
+  SKIP_VERSION: 'update_skip_version',
+};
+
+export const useUpdateStore = create<UpdateState>((set, get) => ({
+  // 初始状态
+  updateAvailable: false,
+  currentVersion: updateService.getCurrentVersion(),
+  remoteVersion: '',
+  downloadUrl: '',
+  downloading: false,
+  downloadProgress: 0,
+  downloadedPath: null,
+  error: null,
+  lastCheckTime: 0,
+  skipVersion: null,
+  showUpdateModal: false,
+  isLatestVersion: false, // 新增：初始为false
+
+  // 检查更新
+  checkForUpdate: async (silent = false) => {
+    try {
+      set({ error: null, isLatestVersion: false });
+
+      // 获取跳过的版本
+      const skipVersion = await AsyncStorage.getItem(STORAGE_KEYS.SKIP_VERSION);
+      
+      const versionInfo = await updateService.checkVersion();
+      const isUpdateAvailable = updateService.isUpdateAvailable(versionInfo.version);
+      
+      // 如果有更新且不是要跳过的版本
+      const shouldShowUpdate = isUpdateAvailable && versionInfo.version !== skipVersion;
+
+      // 检查是否已经是最新版本
+      const isLatest = !isUpdateAvailable;
+
+      set({
+        remoteVersion: versionInfo.version,
+        downloadUrl: versionInfo.downloadUrl,
+        updateAvailable: isUpdateAvailable,
+        lastCheckTime: Date.now(),
+        skipVersion,
+        showUpdateModal: shouldShowUpdate && !silent,
+        isLatestVersion: isLatest,
+      });
+
+      // 如果是手动检查且已是最新版本，显示提示
+      if (!silent && isLatest) {
+        Toast.show({
+          type: 'success',
+          text1: '已是最新版本',
+          text2: `当前版本 v${updateService.getCurrentVersion()} 已是最新版本`,
+          visibilityTime: 3000,
+        });
+      }
+
+      // 保存最后检查时间
+      await AsyncStorage.setItem(
+        STORAGE_KEYS.LAST_CHECK_TIME,
+        Date.now().toString()
+      );
+    } catch (error) {
+      // console.info('检查更新失败:', error);
+      set({ 
+        error: error instanceof Error ? error.message : '检查更新失败',
+        updateAvailable: false,
+        isLatestVersion: false,
+      });
+    }
+  },
+
+  // 开始下载
+  startDownload: async () => {
+    const { downloadUrl } = get();
+    
+    if (!downloadUrl) {
+      set({ error: '下载地址无效' });
+      return;
+    }
+
+    try {
+      set({ 
+        downloading: true, 
+        downloadProgress: 0, 
+        error: null 
+      });
+
+      const filePath = await updateService.downloadApk(
+        downloadUrl,
+        (progress) => {
+          set({ downloadProgress: progress });
+        }
+      );
+
+      set({ 
+        downloadedPath: filePath,
+        downloading: false,
+        downloadProgress: 100,
+      });
+    } catch (error) {
+      // console.info('下载失败:', error);
+      set({ 
+        downloading: false,
+        downloadProgress: 0,
+        error: error instanceof Error ? error.message : '下载失败',
+      });
+    }
+  },
+
+  // 安装更新
+  installUpdate: async () => {
+    const { downloadedPath } = get();
+    
+    if (!downloadedPath) {
+      set({ error: '安装文件不存在' });
+      return;
+    }
+
+    try {
+      await updateService.installApk(downloadedPath);
+      // 安装开始后，关闭弹窗
+      set({ showUpdateModal: false });
+    } catch (error) {
+      logger.error('安装失败:', error);
+      set({ 
+        error: error instanceof Error ? error.message : '安装失败',
+      });
+    }
+  },
+
+  // 设置显示更新弹窗
+  setShowUpdateModal: (show: boolean) => {
+    set({ showUpdateModal: show });
+  },
+
+  // 跳过此版本
+  skipThisVersion: async () => {
+    const { remoteVersion } = get();
+    
+    if (remoteVersion) {
+      await AsyncStorage.setItem(STORAGE_KEYS.SKIP_VERSION, remoteVersion);
+      set({ 
+        skipVersion: remoteVersion,
+        showUpdateModal: false,
+      });
+    }
+  },
+
+  // 重置状态
+  reset: () => {
+    set({
+      downloading: false,
+      downloadProgress: 0,
+      downloadedPath: null,
+      error: null,
+      showUpdateModal: false,
+      isLatestVersion: false, // 重置时也要重置这个状态
+    });
+  },
+}));
+
+// 初始化时加载存储的数据
+export const initUpdateStore = async () => {
+  try {
+    const lastCheckTime = await AsyncStorage.getItem(STORAGE_KEYS.LAST_CHECK_TIME);
+    const skipVersion = await AsyncStorage.getItem(STORAGE_KEYS.SKIP_VERSION);
+    
+    useUpdateStore.setState({
+      lastCheckTime: lastCheckTime ? parseInt(lastCheckTime, 10) : 0,
+      skipVersion: skipVersion || null,
+    });
+  } catch (error) {
+    logger.error('初始化更新存储失败:', error);
+  }
+};

utils/DeviceUtils.ts

@@ -0,0 +1,138 @@
+import { Platform, Dimensions } from "react-native";
+import { DeviceType } from "@/hooks/useResponsiveLayout";
+
+export const DeviceUtils = {
+  /**
+   * 检测当前设备类型
+   */
+  getDeviceType(): DeviceType {
+    // if (Platform.isTV) return "tv";
+
+    const { width } = Dimensions.get("window");
+
+    if (width >= 1024) return "tv";
+    if (width >= 768) return "tablet";
+    return "mobile";
+  },
+
+  /**
+   * 检测是否为TV环境
+   */
+  isTV(): boolean {
+    return this.getDeviceType() === "tv";
+  },
+
+  /**
+   * 检测是否为移动设备
+   */
+  isMobile(): boolean {
+    return this.getDeviceType() === "mobile";
+  },
+
+  /**
+   * 检测是否为平板设备
+   */
+  isTablet(): boolean {
+    return this.getDeviceType() === "tablet";
+  },
+
+  /**
+   * 检测是否支持触摸交互
+   */
+  supportsTouchInteraction(): boolean {
+    return !this.isTV();
+  },
+
+  /**
+   * 检测是否支持遥控器交互
+   */
+  supportsRemoteControlInteraction(): boolean {
+    return this.isTV();
+  },
+
+  /**
+   * 获取最小触摸目标尺寸
+   */
+  getMinTouchTargetSize(): number {
+    const deviceType = this.getDeviceType();
+    switch (deviceType) {
+      case "mobile":
+        return 44; // iOS HIG minimum
+      case "tablet":
+        return 48; // Material Design minimum
+      case "tv":
+        return 60; // TV optimized
+      default:
+        return 44;
+    }
+  },
+
+  /**
+   * 获取适合的文字大小
+   */
+  getOptimalFontSize(baseSize: number): number {
+    const deviceType = this.getDeviceType();
+    const scaleFactor = {
+      mobile: 1.0,
+      tablet: 1.1,
+      tv: 1.25,
+    }[deviceType];
+
+    return Math.round(baseSize * scaleFactor);
+  },
+
+  /**
+   * 获取适合的间距
+   */
+  getOptimalSpacing(baseSpacing: number): number {
+    const deviceType = this.getDeviceType();
+    const scaleFactor = {
+      mobile: 0.8,
+      tablet: 1.0,
+      tv: 1.5,
+    }[deviceType];
+
+    return Math.round(baseSpacing * scaleFactor);
+  },
+
+  /**
+   * 检测设备是否处于横屏模式
+   */
+  isLandscape(): boolean {
+    const { width, height } = Dimensions.get("window");
+    return width > height;
+  },
+
+  /**
+   * 检测设备是否处于竖屏模式
+   */
+  isPortrait(): boolean {
+    return !this.isLandscape();
+  },
+
+  /**
+   * 获取安全的网格列数
+   */
+  getSafeColumnCount(preferredColumns: number): number {
+    const { width } = Dimensions.get("window");
+    const minCardWidth = this.isMobile() ? 120 : this.isTablet() ? 140 : 160;
+    const maxColumns = Math.floor(width / minCardWidth);
+
+    return Math.min(preferredColumns, maxColumns);
+  },
+
+  /**
+   * 获取设备特定的动画持续时间
+   */
+  getAnimationDuration(baseDuration: number): number {
+    const deviceType = this.getDeviceType();
+    // TV端动画稍慢，更符合10英尺体验
+    const scaleFactor = {
+      mobile: 1.0,
+      tablet: 1.0,
+      tv: 1.2,
+    }[deviceType];
+
+    return Math.round(baseDuration * scaleFactor);
+  },
+};

utils/Logger.ts

@@ -0,0 +1,149 @@
+/**
+ * 统一日志管理器
+ * 在开发环境输出完整日志，生产环境移除所有日志代码
+ */
+
+export enum LogLevel {
+  DEBUG = 0,
+  INFO = 1,
+  WARN = 2,
+  ERROR = 3,
+}
+
+interface LoggerOptions {
+  tag?: string;
+  level?: LogLevel;
+}
+
+class LoggerClass {
+  private minLevel: LogLevel = LogLevel.DEBUG;
+
+  /**
+   * 设置最小日志级别
+   */
+  setMinLevel(level: LogLevel): void {
+    if (__DEV__) {
+      this.minLevel = level;
+    }
+  }
+
+  /**
+   * 格式化日志输出
+   */
+  private formatMessage(level: string, tag: string | undefined, message: any, ...args: any[]): void {
+    if (!__DEV__) return;
+
+    const timestamp = new Date().toISOString().substr(11, 12);
+    const prefix = tag ? `[${timestamp}][${level}][${tag}]` : `[${timestamp}][${level}]`;
+    
+    switch (level) {
+      case 'DEBUG':
+        console.log(prefix, message, ...args);
+        break;
+      case 'INFO':
+        console.info(prefix, message, ...args);
+        break;
+      case 'WARN':
+        console.warn(prefix, message, ...args);
+        break;
+      case 'ERROR':
+        console.error(prefix, message, ...args);
+        break;
+    }
+  }
+
+  /**
+   * 调试级别日志
+   */
+  debug(message: any, ...args: any[]): void;
+  debug(options: LoggerOptions, message: any, ...args: any[]): void;
+  debug(optionsOrMessage: LoggerOptions | any, message?: any, ...args: any[]): void {
+    if (!__DEV__) return;
+
+    if (this.minLevel > LogLevel.DEBUG) return;
+
+    if (typeof optionsOrMessage === 'object' && optionsOrMessage.tag !== undefined) {
+      const options = optionsOrMessage as LoggerOptions;
+      this.formatMessage('DEBUG', options.tag, message, ...args);
+    } else {
+      this.formatMessage('DEBUG', undefined, optionsOrMessage, message, ...args);
+    }
+  }
+
+  /**
+   * 信息级别日志
+   */
+  info(message: any, ...args: any[]): void;
+  info(options: LoggerOptions, message: any, ...args: any[]): void;
+  info(optionsOrMessage: LoggerOptions | any, message?: any, ...args: any[]): void {
+    if (!__DEV__) return;
+
+    if (this.minLevel > LogLevel.INFO) return;
+
+    if (typeof optionsOrMessage === 'object' && optionsOrMessage.tag !== undefined) {
+      const options = optionsOrMessage as LoggerOptions;
+      this.formatMessage('INFO', options.tag, message, ...args);
+    } else {
+      this.formatMessage('INFO', undefined, optionsOrMessage, message, ...args);
+    }
+  }
+
+  /**
+   * 警告级别日志
+   */
+  warn(message: any, ...args: any[]): void;
+  warn(options: LoggerOptions, message: any, ...args: any[]): void;
+  warn(optionsOrMessage: LoggerOptions | any, message?: any, ...args: any[]): void {
+    if (!__DEV__) return;
+
+    if (this.minLevel > LogLevel.WARN) return;
+
+    if (typeof optionsOrMessage === 'object' && optionsOrMessage.tag !== undefined) {
+      const options = optionsOrMessage as LoggerOptions;
+      this.formatMessage('WARN', options.tag, message, ...args);
+    } else {
+      this.formatMessage('WARN', undefined, optionsOrMessage, message, ...args);
+    }
+  }
+
+  /**
+   * 错误级别日志
+   */
+  error(message: any, ...args: any[]): void;
+  error(options: LoggerOptions, message: any, ...args: any[]): void;
+  error(optionsOrMessage: LoggerOptions | any, message?: any, ...args: any[]): void {
+    if (!__DEV__) return;
+
+    if (this.minLevel > LogLevel.ERROR) return;
+
+    if (typeof optionsOrMessage === 'object' && optionsOrMessage.tag !== undefined) {
+      const options = optionsOrMessage as LoggerOptions;
+      this.formatMessage('ERROR', options.tag, message, ...args);
+    } else {
+      this.formatMessage('ERROR', undefined, optionsOrMessage, message, ...args);
+    }
+  }
+
+  /**
+   * 创建带标签的日志实例
+   */
+  withTag(tag: string): LoggerClass {
+    const taggedLogger = new LoggerClass();
+    taggedLogger.minLevel = this.minLevel;
+    
+    const originalDebug = taggedLogger.debug.bind(taggedLogger);
+    const originalInfo = taggedLogger.info.bind(taggedLogger);
+    const originalWarn = taggedLogger.warn.bind(taggedLogger);
+    const originalError = taggedLogger.error.bind(taggedLogger);
+
+    taggedLogger.debug = (message: any, ...args: any[]) => originalDebug({ tag }, message, ...args);
+    taggedLogger.info = (message: any, ...args: any[]) => originalInfo({ tag }, message, ...args);
+    taggedLogger.warn = (message: any, ...args: any[]) => originalWarn({ tag }, message, ...args);
+    taggedLogger.error = (message: any, ...args: any[]) => originalError({ tag }, message, ...args);
+
+    return taggedLogger;
+  }
+}
+
+export const Logger = new LoggerClass();
+export default Logger;

utils/ResponsiveStyles.ts

@@ -0,0 +1,222 @@
+import { StyleSheet } from 'react-native';
+import { useResponsiveLayout, ResponsiveConfig } from '@/hooks/useResponsiveLayout';
+import { DeviceUtils } from '@/utils/DeviceUtils';
+
+// 响应式样式创建器类型
+export type ResponsiveStyleCreator<T> = (config: ResponsiveConfig) => T;
+
+/**
+ * 创建响应式样式的高阶函数
+ */
+export const createResponsiveStyles = <T extends Record<string, any>>(
+  styleCreator: ResponsiveStyleCreator<T>
+) => {
+  return (config: ResponsiveConfig): T => {
+    return StyleSheet.create(styleCreator(config)) as T;
+  };
+};
+
+/**
+ * 响应式样式 Hook
+ */
+export const useResponsiveStyles = <T extends Record<string, any>>(
+  styleCreator: ResponsiveStyleCreator<T>
+): T => {
+  const config = useResponsiveLayout();
+  return createResponsiveStyles(styleCreator)(config);
+};
+
+/**
+ * 通用响应式样式
+ */
+export const getCommonResponsiveStyles = (config: ResponsiveConfig) => {
+  const { deviceType, spacing } = config;
+  const minTouchTarget = DeviceUtils.getMinTouchTargetSize();
+
+  return StyleSheet.create({
+    // 容器样式
+    container: {
+      flex: 1,
+      paddingHorizontal: spacing,
+    },
+
+    safeContainer: {
+      flex: 1,
+      paddingHorizontal: spacing,
+      paddingTop: deviceType === 'mobile' ? 20 : deviceType === 'tablet' ? 30 : 40,
+    },
+
+    // 标题样式
+    pageTitle: {
+      fontSize: DeviceUtils.getOptimalFontSize(deviceType === 'mobile' ? 24 : deviceType === 'tablet' ? 28 : 32),
+      fontWeight: 'bold',
+      marginBottom: spacing,
+      color: 'white',
+    },
+
+    sectionTitle: {
+      fontSize: DeviceUtils.getOptimalFontSize(deviceType === 'mobile' ? 18 : deviceType === 'tablet' ? 20 : 22),
+      fontWeight: '600',
+      marginBottom: spacing / 2,
+      color: 'white',
+    },
+
+    // 按钮样式
+    primaryButton: {
+      minHeight: minTouchTarget,
+      paddingHorizontal: spacing * 1.5,
+      paddingVertical: spacing,
+      borderRadius: deviceType === 'mobile' ? 8 : deviceType === 'tablet' ? 10 : 12,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+
+    secondaryButton: {
+      minHeight: minTouchTarget,
+      paddingHorizontal: spacing,
+      paddingVertical: spacing * 0.75,
+      borderRadius: deviceType === 'mobile' ? 6 : deviceType === 'tablet' ? 8 : 10,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderWidth: 1,
+      borderColor: '#ccc',
+    },
+
+    // 输入框样式
+    textInput: {
+      minHeight: minTouchTarget,
+      paddingHorizontal: spacing,
+      paddingVertical: spacing * 0.75,
+      borderRadius: deviceType === 'mobile' ? 8 : deviceType === 'tablet' ? 10 : 12,
+      fontSize: DeviceUtils.getOptimalFontSize(16),
+      backgroundColor: '#2c2c2e',
+      color: 'white',
+      borderWidth: 2,
+      borderColor: 'transparent',
+    },
+
+    // 卡片样式
+    card: {
+      backgroundColor: '#1c1c1e',
+      borderRadius: deviceType === 'mobile' ? 8 : deviceType === 'tablet' ? 10 : 12,
+      padding: spacing,
+      marginBottom: spacing,
+    },
+
+    // 网格样式
+    gridContainer: {
+      paddingHorizontal: spacing / 2,
+    },
+
+    gridRow: {
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      flexWrap: 'wrap',
+    },
+
+    gridItem: {
+      margin: spacing / 2,
+      alignItems: 'center',
+    },
+
+    // 间距工具类
+    marginTopSmall: { marginTop: spacing / 2 },
+    marginTopMedium: { marginTop: spacing },
+    marginTopLarge: { marginTop: spacing * 1.5 },
+
+    marginBottomSmall: { marginBottom: spacing / 2 },
+    marginBottomMedium: { marginBottom: spacing },
+    marginBottomLarge: { marginBottom: spacing * 1.5 },
+
+    paddingSmall: { padding: spacing / 2 },
+    paddingMedium: { padding: spacing },
+    paddingLarge: { padding: spacing * 1.5 },
+
+    // 布局工具类
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+
+    rowBetween: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+
+    column: {
+      flexDirection: 'column',
+    },
+
+    center: {
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+
+    centerHorizontal: {
+      alignItems: 'center',
+    },
+
+    centerVertical: {
+      justifyContent: 'center',
+    },
+
+    // 文本样式
+    textSmall: {
+      fontSize: DeviceUtils.getOptimalFontSize(12),
+      color: '#ccc',
+    },
+
+    textMedium: {
+      fontSize: DeviceUtils.getOptimalFontSize(14),
+      color: 'white',
+    },
+
+    textLarge: {
+      fontSize: DeviceUtils.getOptimalFontSize(16),
+      color: 'white',
+    },
+
+    // 阴影样式
+    shadow: deviceType !== 'tv' ? {
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: 2,
+      },
+      shadowOpacity: 0.25,
+      shadowRadius: 3.84,
+      elevation: 5,
+    } : {}, // TV端不需要阴影
+  });
+};
+
+/**
+ * 响应式文本大小
+ */
+export const getResponsiveTextSize = (baseSize: number, deviceType: string) => {
+  const scaleFactors = {
+    mobile: 1.0,
+    tablet: 1.1,
+    tv: 1.25,
+  };
+  
+  const scaleFactor = scaleFactors[deviceType as keyof typeof scaleFactors] || 1.0;
+  
+  return Math.round(baseSize * scaleFactor);
+};
+
+/**
+ * 响应式间距
+ */
+export const getResponsiveSpacing = (baseSpacing: number, deviceType: string) => {
+  const scaleFactors = {
+    mobile: 0.8,
+    tablet: 1.0,
+    tv: 1.5,
+  };
+  
+  const scaleFactor = scaleFactors[deviceType as keyof typeof scaleFactors] || 1.0;
+  
+  return Math.round(baseSpacing * scaleFactor);
+};

utils/__tests__/DeviceUtils.test.ts

@@ -0,0 +1,213 @@
+import { Dimensions } from "react-native";
+import { DeviceUtils } from "../DeviceUtils";
+
+jest.mock("react-native", () => ({
+  Dimensions: {
+    get: jest.fn(),
+  },
+}));
+
+const mockedDimensions = Dimensions as jest.Mocked<typeof Dimensions>;
+
+describe("DeviceUtils", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("getDeviceType", () => {
+    it("应该在宽度 >= 1024 时返回 tv", () => {
+      mockedDimensions.get.mockReturnValue({ width: 1024, height: 768 });
+      expect(DeviceUtils.getDeviceType()).toBe("tv");
+    });
+
+    it("应该在宽度 >= 768 且 < 1024 时返回 tablet", () => {
+      mockedDimensions.get.mockReturnValue({ width: 768, height: 1024 });
+      expect(DeviceUtils.getDeviceType()).toBe("tablet");
+    });
+
+    it("应该在宽度 < 768 时返回 mobile", () => {
+      mockedDimensions.get.mockReturnValue({ width: 375, height: 812 });
+      expect(DeviceUtils.getDeviceType()).toBe("mobile");
+    });
+  });
+
+  describe("isTV", () => {
+    it("应该在 TV 设备上返回 true", () => {
+      mockedDimensions.get.mockReturnValue({ width: 1920, height: 1080 });
+      expect(DeviceUtils.isTV()).toBe(true);
+    });
+
+    it("应该在非 TV 设备上返回 false", () => {
+      mockedDimensions.get.mockReturnValue({ width: 375, height: 812 });
+      expect(DeviceUtils.isTV()).toBe(false);
+    });
+  });
+
+  describe("isMobile", () => {
+    it("应该在移动设备上返回 true", () => {
+      mockedDimensions.get.mockReturnValue({ width: 375, height: 812 });
+      expect(DeviceUtils.isMobile()).toBe(true);
+    });
+
+    it("应该在非移动设备上返回 false", () => {
+      mockedDimensions.get.mockReturnValue({ width: 1024, height: 768 });
+      expect(DeviceUtils.isMobile()).toBe(false);
+    });
+  });
+
+  describe("isTablet", () => {
+    it("应该在平板设备上返回 true", () => {
+      mockedDimensions.get.mockReturnValue({ width: 768, height: 1024 });
+      expect(DeviceUtils.isTablet()).toBe(true);
+    });
+
+    it("应该在非平板设备上返回 false", () => {
+      mockedDimensions.get.mockReturnValue({ width: 375, height: 812 });
+      expect(DeviceUtils.isTablet()).toBe(false);
+    });
+  });
+
+  describe("supportsTouchInteraction", () => {
+    it("应该在非 TV 设备上返回 true", () => {
+      mockedDimensions.get.mockReturnValue({ width: 375, height: 812 });
+      expect(DeviceUtils.supportsTouchInteraction()).toBe(true);
+    });
+
+    it("应该在 TV 设备上返回 false", () => {
+      mockedDimensions.get.mockReturnValue({ width: 1920, height: 1080 });
+      expect(DeviceUtils.supportsTouchInteraction()).toBe(false);
+    });
+  });
+
+  describe("supportsRemoteControlInteraction", () => {
+    it("应该在 TV 设备上返回 true", () => {
+      mockedDimensions.get.mockReturnValue({ width: 1920, height: 1080 });
+      expect(DeviceUtils.supportsRemoteControlInteraction()).toBe(true);
+    });
+
+    it("应该在非 TV 设备上返回 false", () => {
+      mockedDimensions.get.mockReturnValue({ width: 375, height: 812 });
+      expect(DeviceUtils.supportsRemoteControlInteraction()).toBe(false);
+    });
+  });
+
+  describe("getMinTouchTargetSize", () => {
+    it("应该为 mobile 设备返回 44", () => {
+      mockedDimensions.get.mockReturnValue({ width: 375, height: 812 });
+      expect(DeviceUtils.getMinTouchTargetSize()).toBe(44);
+    });
+
+    it("应该为 tablet 设备返回 48", () => {
+      mockedDimensions.get.mockReturnValue({ width: 768, height: 1024 });
+      expect(DeviceUtils.getMinTouchTargetSize()).toBe(48);
+    });
+
+    it("应该为 tv 设备返回 60", () => {
+      mockedDimensions.get.mockReturnValue({ width: 1920, height: 1080 });
+      expect(DeviceUtils.getMinTouchTargetSize()).toBe(60);
+    });
+  });
+
+  describe("getOptimalFontSize", () => {
+    it("应该为 mobile 设备返回基础大小 * 1.0", () => {
+      mockedDimensions.get.mockReturnValue({ width: 375, height: 812 });
+      expect(DeviceUtils.getOptimalFontSize(16)).toBe(16);
+    });
+
+    it("应该为 tablet 设备返回基础大小 * 1.1", () => {
+      mockedDimensions.get.mockReturnValue({ width: 768, height: 1024 });
+      expect(DeviceUtils.getOptimalFontSize(16)).toBe(18);
+    });
+
+    it("应该为 tv 设备返回基础大小 * 1.25", () => {
+      mockedDimensions.get.mockReturnValue({ width: 1920, height: 1080 });
+      expect(DeviceUtils.getOptimalFontSize(16)).toBe(20);
+    });
+  });
+
+  describe("getOptimalSpacing", () => {
+    it("应该为 mobile 设备返回基础间距 * 0.8", () => {
+      mockedDimensions.get.mockReturnValue({ width: 375, height: 812 });
+      expect(DeviceUtils.getOptimalSpacing(20)).toBe(16);
+    });
+
+    it("应该为 tablet 设备返回基础间距 * 1.0", () => {
+      mockedDimensions.get.mockReturnValue({ width: 768, height: 1024 });
+      expect(DeviceUtils.getOptimalSpacing(20)).toBe(20);
+    });
+
+    it("应该为 tv 设备返回基础间距 * 1.5", () => {
+      mockedDimensions.get.mockReturnValue({ width: 1920, height: 1080 });
+      expect(DeviceUtils.getOptimalSpacing(20)).toBe(30);
+    });
+  });
+
+  describe("isLandscape", () => {
+    it("应该在横屏模式下返回 true", () => {
+      mockedDimensions.get.mockReturnValue({ width: 812, height: 375 });
+      expect(DeviceUtils.isLandscape()).toBe(true);
+    });
+
+    it("应该在竖屏模式下返回 false", () => {
+      mockedDimensions.get.mockReturnValue({ width: 375, height: 812 });
+      expect(DeviceUtils.isLandscape()).toBe(false);
+    });
+
+    it("应该在宽高相等时返回 false", () => {
+      mockedDimensions.get.mockReturnValue({ width: 500, height: 500 });
+      expect(DeviceUtils.isLandscape()).toBe(false);
+    });
+  });
+
+  describe("isPortrait", () => {
+    it("应该在竖屏模式下返回 true", () => {
+      mockedDimensions.get.mockReturnValue({ width: 375, height: 812 });
+      expect(DeviceUtils.isPortrait()).toBe(true);
+    });
+
+    it("应该在横屏模式下返回 false", () => {
+      mockedDimensions.get.mockReturnValue({ width: 812, height: 375 });
+      expect(DeviceUtils.isPortrait()).toBe(false);
+    });
+  });
+
+  describe("getSafeColumnCount", () => {
+    it("应该在 mobile 设备上返回安全列数", () => {
+      mockedDimensions.get.mockReturnValue({ width: 375, height: 812 });
+      // minCardWidth = 120, maxColumns = 375 / 120 = 3.125 = 3
+      expect(DeviceUtils.getSafeColumnCount(5)).toBe(3);
+      expect(DeviceUtils.getSafeColumnCount(2)).toBe(2);
+    });
+
+    it("应该在 tablet 设备上返回安全列数", () => {
+      mockedDimensions.get.mockReturnValue({ width: 768, height: 1024 });
+      // minCardWidth = 140, maxColumns = 768 / 140 = 5.485 = 5
+      expect(DeviceUtils.getSafeColumnCount(6)).toBe(5);
+      expect(DeviceUtils.getSafeColumnCount(3)).toBe(3);
+    });
+
+    it("应该在 tv 设备上返回安全列数", () => {
+      mockedDimensions.get.mockReturnValue({ width: 1920, height: 1080 });
+      // minCardWidth = 160, maxColumns = 1920 / 160 = 12
+      expect(DeviceUtils.getSafeColumnCount(15)).toBe(12);
+      expect(DeviceUtils.getSafeColumnCount(8)).toBe(8);
+    });
+  });
+
+  describe("getAnimationDuration", () => {
+    it("应该为 mobile 设备返回基础持续时间 * 1.0", () => {
+      mockedDimensions.get.mockReturnValue({ width: 375, height: 812 });
+      expect(DeviceUtils.getAnimationDuration(300)).toBe(300);
+    });
+
+    it("应该为 tablet 设备返回基础持续时间 * 1.0", () => {
+      mockedDimensions.get.mockReturnValue({ width: 768, height: 1024 });
+      expect(DeviceUtils.getAnimationDuration(300)).toBe(300);
+    });
+
+    it("应该为 tv 设备返回基础持续时间 * 1.2", () => {
+      mockedDimensions.get.mockReturnValue({ width: 1920, height: 1080 });
+      expect(DeviceUtils.getAnimationDuration(300)).toBe(360);
+    });
+  });
+});

utils/__tests__/ResponsiveStyles.test.ts

@@ -0,0 +1,237 @@
+import { StyleSheet } from "react-native";
+import {
+  createResponsiveStyles,
+  useResponsiveStyles,
+  getCommonResponsiveStyles,
+  getResponsiveTextSize,
+  getResponsiveSpacing,
+  ResponsiveStyleCreator,
+} from "../ResponsiveStyles";
+import { ResponsiveConfig } from "@/hooks/useResponsiveLayout";
+import { DeviceUtils } from "../DeviceUtils";
+
+jest.mock("react-native", () => ({
+  StyleSheet: {
+    create: jest.fn((styles) => styles),
+  },
+}));
+
+jest.mock("@/hooks/useResponsiveLayout", () => ({
+  useResponsiveLayout: jest.fn(),
+}));
+
+jest.mock("@/utils/DeviceUtils", () => ({
+  DeviceUtils: {
+    getMinTouchTargetSize: jest.fn(),
+    getOptimalFontSize: jest.fn(),
+  },
+}));
+
+const mockedStyleSheet = StyleSheet as jest.Mocked<typeof StyleSheet>;
+const mockedDeviceUtils = DeviceUtils as jest.Mocked<typeof DeviceUtils>;
+
+describe("ResponsiveStyles", () => {
+  const mockConfig: ResponsiveConfig = {
+    deviceType: "mobile",
+    spacing: 16,
+    safeAreaInsets: { top: 0, bottom: 0, left: 0, right: 0 },
+    windowWidth: 375,
+    windowHeight: 812,
+    isLandscape: false,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockedDeviceUtils.getMinTouchTargetSize.mockReturnValue(44);
+    mockedDeviceUtils.getOptimalFontSize.mockImplementation((size) => size);
+  });
+
+  describe("createResponsiveStyles", () => {
+    it("应该创建响应式样式函数", () => {
+      const styleCreator: ResponsiveStyleCreator<any> = (config) => ({
+        container: {
+          padding: config.spacing,
+        },
+      });
+
+      const responsiveStylesFunc = createResponsiveStyles(styleCreator);
+      const styles = responsiveStylesFunc(mockConfig);
+
+      expect(mockedStyleSheet.create).toHaveBeenCalledWith({
+        container: {
+          padding: 16,
+        },
+      });
+      expect(styles).toEqual({
+        container: {
+          padding: 16,
+        },
+      });
+    });
+  });
+
+  describe("getCommonResponsiveStyles", () => {
+    beforeEach(() => {
+      mockedDeviceUtils.getOptimalFontSize.mockImplementation((size) => {
+        const deviceType = "mobile";
+        const scaleFactor = {
+          mobile: 1.0,
+          tablet: 1.1,
+          tv: 1.25,
+        }[deviceType];
+        return Math.round(size * scaleFactor);
+      });
+    });
+
+    it("应该为 mobile 设备返回正确的样式", () => {
+      const mobileConfig: ResponsiveConfig = {
+        ...mockConfig,
+        deviceType: "mobile",
+        spacing: 16,
+      };
+
+      mockedDeviceUtils.getMinTouchTargetSize.mockReturnValue(44);
+
+      const styles = getCommonResponsiveStyles(mobileConfig);
+
+      expect(styles.container).toEqual({
+        flex: 1,
+        paddingHorizontal: 16,
+      });
+
+      expect(styles.safeContainer).toEqual({
+        flex: 1,
+        paddingHorizontal: 16,
+        paddingTop: 20,
+      });
+
+      expect(styles.primaryButton).toEqual({
+        minHeight: 44,
+        paddingHorizontal: 24,
+        paddingVertical: 16,
+        borderRadius: 8,
+        justifyContent: "center",
+        alignItems: "center",
+      });
+    });
+
+    it("应该为 tablet 设备返回正确的样式", () => {
+      const tabletConfig: ResponsiveConfig = {
+        ...mockConfig,
+        deviceType: "tablet",
+        spacing: 20,
+      };
+
+      mockedDeviceUtils.getMinTouchTargetSize.mockReturnValue(48);
+
+      const styles = getCommonResponsiveStyles(tabletConfig);
+
+      expect(styles.safeContainer.paddingTop).toBe(30);
+      expect(styles.primaryButton.borderRadius).toBe(10);
+      expect(styles.primaryButton.minHeight).toBe(48);
+    });
+
+    it("应该为 tv 设备返回正确的样式", () => {
+      const tvConfig: ResponsiveConfig = {
+        ...mockConfig,
+        deviceType: "tv",
+        spacing: 24,
+      };
+
+      mockedDeviceUtils.getMinTouchTargetSize.mockReturnValue(60);
+
+      const styles = getCommonResponsiveStyles(tvConfig);
+
+      expect(styles.safeContainer.paddingTop).toBe(40);
+      expect(styles.primaryButton.borderRadius).toBe(12);
+      expect(styles.primaryButton.minHeight).toBe(60);
+    });
+
+    it("应该为 tv 设备不包含阴影样式", () => {
+      const tvConfig: ResponsiveConfig = {
+        ...mockConfig,
+        deviceType: "tv",
+        spacing: 24,
+      };
+
+      const styles = getCommonResponsiveStyles(tvConfig);
+
+      expect(styles.shadow).toEqual({});
+    });
+
+    it("应该为非 tv 设备包含阴影样式", () => {
+      const mobileConfig: ResponsiveConfig = {
+        ...mockConfig,
+        deviceType: "mobile",
+        spacing: 16,
+      };
+
+      const styles = getCommonResponsiveStyles(mobileConfig);
+
+      expect(styles.shadow).toEqual({
+        shadowColor: "#000",
+        shadowOffset: {
+          width: 0,
+          height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 5,
+      });
+    });
+  });
+
+  describe("getResponsiveTextSize", () => {
+    it("应该为 mobile 设备返回基础大小", () => {
+      const result = getResponsiveTextSize(16, "mobile");
+      expect(result).toBe(16);
+    });
+
+    it("应该为 tablet 设备返回缩放后的大小", () => {
+      const result = getResponsiveTextSize(16, "tablet");
+      expect(result).toBe(18); // 16 * 1.1 = 17.6, rounded to 18
+    });
+
+    it("应该为 tv 设备返回缩放后的大小", () => {
+      const result = getResponsiveTextSize(16, "tv");
+      expect(result).toBe(20); // 16 * 1.25 = 20
+    });
+
+    it("应该为未知设备类型返回基础大小", () => {
+      const result = getResponsiveTextSize(16, "unknown");
+      expect(result).toBe(16);
+    });
+
+    it("应该正确处理小数点", () => {
+      const result = getResponsiveTextSize(15, "tablet");
+      expect(result).toBe(17); // 15 * 1.1 = 16.5, rounded to 17
+    });
+  });
+
+  describe("getResponsiveSpacing", () => {
+    it("应该为 mobile 设备返回缩放后的间距", () => {
+      const result = getResponsiveSpacing(20, "mobile");
+      expect(result).toBe(16); // 20 * 0.8 = 16
+    });
+
+    it("应该为 tablet 设备返回基础间距", () => {
+      const result = getResponsiveSpacing(20, "tablet");
+      expect(result).toBe(20);
+    });
+
+    it("应该为 tv 设备返回缩放后的间距", () => {
+      const result = getResponsiveSpacing(20, "tv");
+      expect(result).toBe(30); // 20 * 1.5 = 30
+    });
+
+    it("应该为未知设备类型返回基础间距", () => {
+      const result = getResponsiveSpacing(20, "unknown");
+      expect(result).toBe(20);
+    });
+
+    it("应该正确处理小数点", () => {
+      const result = getResponsiveSpacing(15, "mobile");
+      expect(result).toBe(12); // 15 * 0.8 = 12
+    });
+  });
+});

xml/AndroidManifest.xml

@@ -7,6 +7,8 @@
   <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
   <uses-permission android:name="android.permission.VIBRATE"/>
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+  <uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES"/>
+  <uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION"/>
   <uses-feature android:name="android.hardware.touchscreen" android:required="false"/>
   <uses-feature android:name="android.hardware.faketouch" android:required="false"/>
   <uses-feature android:name="android.software.leanback" android:required="false"/>

yarn.lock

@@ -3064,6 +3064,11 @@ babel-plugin-transform-flow-enums@^0.0.2:
   dependencies:
     "@babel/plugin-syntax-flow" "^7.12.1"
 
+babel-plugin-transform-remove-console@^6.9.4:
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.9.4.tgz#b980360c067384e24b357a588d807d3c83527780"
+  integrity sha512-88blrUrMX3SPiGkT1GnvVY8E/7A+k6oj3MNvUtTIxJflFzXTw1bHkuJ/y039ouhFMp2prRn5cQGzokViYi1dsg==
+
 babel-preset-current-node-syntax@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.1.0.tgz#9a929eafece419612ef4ae4f60b1862ebad8ef30"
@@ -3114,6 +3119,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+base-64@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/base-64/-/base-64-0.1.0.tgz#780a99c84e7d600260361511c4877613bf24f6bb"
+  integrity sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA==
+
 base64-js@^1.2.3, base64-js@^1.3.1, base64-js@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -4582,6 +4592,11 @@ expo-font@~12.0.10, expo-font@~12.0.7:
   dependencies:
     fontfaceobserver "^2.1.0"
 
+expo-intent-launcher@~11.0.1:
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/expo-intent-launcher/-/expo-intent-launcher-11.0.1.tgz#297dc4d084b1e3e2fab431afc847800f87cd1dc2"
+  integrity sha512-nUmTTa/HG4jUyRc5YHngdpP5bMyGSRZPi2RX9kpILd3vbMWQeVnwzqAfC+uI34W8uKhEk+9b9Dytzmm7bBND1Q==
+
 expo-keep-awake@~13.0.2:
   version "13.0.2"
   resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-13.0.2.tgz#5ef31311a339671eec9921b934fdd90ab9652b0e"
@@ -5097,7 +5112,7 @@ glob@7.1.6:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^10.2.2, glob@^10.4.2:
+glob@^10.2.2, glob@^10.3.10, glob@^10.4.2:
   version "10.4.5"
   resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956"
   integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==
@@ -7765,7 +7780,7 @@ prompts@^2.0.1, prompts@^2.2.1, prompts@^2.3.2, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.7.2, prop-types@^15.8.0, prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.0, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -7901,6 +7916,19 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-native-blob-util@^0.22.2:
+  version "0.22.2"
+  resolved "https://registry.yarnpkg.com/react-native-blob-util/-/react-native-blob-util-0.22.2.tgz#818c4b90a0af37fcc0a659fd63c67ac57e8ea275"
+  integrity sha512-Czx01QMg7aLsm/4F/7+eqoRAi1q/qjLY2Kao16g+n2SRnTH1+qkD8Qhx2q9okB+VNQvZKB1LbiXhktzYQV52xQ==
+  dependencies:
+    base-64 "0.1.0"
+    glob "^10.3.10"
+
+react-native-file-viewer@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/react-native-file-viewer/-/react-native-file-viewer-2.1.5.tgz#cd4544f573108e79002b5c7e1ebfce4371885250"
+  integrity sha512-MGC6sx9jsqHdefhVQ6o0akdsPGpkXgiIbpygb2Sg4g4bh7v6K1cardLV1NwGB9A6u1yICOSDT/MOC//9Ez6EUg==
+
 react-native-gesture-handler@~2.16.1:
   version "2.16.2"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.16.2.tgz#032bd2a07334292d7f6cff1dc9d1ec928f72e26d"
@@ -7921,6 +7949,19 @@ react-native-helmet-async@2.0.4:
     react-fast-compare "^3.2.2"
     shallowequal "^1.1.0"
 
+react-native-iphone-x-helper@^1.0.3:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
+  integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
+
+react-native-keyboard-aware-scroll-view@^0.9.5:
+  version "0.9.5"
+  resolved "https://registry.yarnpkg.com/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-0.9.5.tgz#e2e9665d320c188e6b1f22f151b94eb358bf9b71"
+  integrity sha512-XwfRn+T/qBH9WjTWIBiJD2hPWg0yJvtaEw6RtPCa5/PYHabzBaWxYBOl0usXN/368BL1XktnZPh8C2lmTpOREA==
+  dependencies:
+    prop-types "^15.6.2"
+    react-native-iphone-x-helper "^1.0.3"
+
 react-native-media-console@*:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/react-native-media-console/-/react-native-media-console-2.2.4.tgz#76a232cdcb645cfdb25bacddee514f360eb4947d"