Update package.json

fix(update): update GitHub URLs in UpdateConfig and bump version to 1.3.5

.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

@@ -0,0 +1,19 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(find:*)",
+      "Bash(rm:*)",
+      "Bash(yarn install)",
+      "Bash(yarn lint)",
+      "Bash(yarn prebuild-tv:*)",
+      "Bash(mkdir:*)",
+      "Bash(yarn lint:*)",
+      "Bash(yarn add:*)",
+      "Bash(git reset:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(yarn test-ci:*)"
+    ],
+    "deny": []
+  }
+}

.eslintrc.js

@@ -0,0 +1,4 @@
+// https://docs.expo.dev/guides/using-eslint/
+module.exports = {
+  extends: 'expo',
+};

.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

@@ -23,4 +23,6 @@ expo-env.d.ts
 web/** 
 .bmad-core
 .kilocodemodes
-.roomodes
+.roomodes
+yarn-errors.log
+coverage/

CLAUDE.md

@@ -0,0 +1,150 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## 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). 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
+
+#### 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
+
+### Multi-Platform Responsive Design
+
+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 Architecture (Zustand)
+
+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
+
+### 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-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
+
+### Component Development Patterns
+
+- **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
+
+## Common Development Tasks
+
+### 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
+
+### 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
+
+### 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 (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

@@ -1,13 +1,12 @@
 # OrionTV 📺
 
-一个基于 React Native TVOS 和 Expo 构建的跨平台电视应用，旨在提供流畅的视频观看体验。项目包含一个用于数据服务的 Express 后端。
+一个基于 React Native TVOS 和 Expo 构建的播放器，旨在提供流畅的视频观看体验。
 
 ## ✨ 功能特性
 
-- **跨平台支持**: 同时支持 Apple TV 和 Android TV。
+- **框架跨平台支持**: 同时支持构建 Apple TV 和 Android TV。
 - **现代化前端**: 使用 Expo、React Native TVOS 和 TypeScript 构建，性能卓越。
 - **Expo Router**: 基于文件系统的路由，使导航逻辑清晰简单。
-- **后端服务**: 配套 Express 后端，用于处理数据获取、搜索和详情展示。
 - **TV 优化的 UI**: 专为电视遥控器交互设计的用户界面。
 
 ## 🛠️ 技术栈
@@ -18,10 +17,6 @@
   - [Expo Router](https://docs.expo.dev/router/introduction/)
   - [Expo AV](https://docs.expo.dev/versions/latest/sdk/av/)
   - TypeScript
-- **后端**:
-  - [Node.js](https://nodejs.org/)
-  - [Express](https://expressjs.com/)
-  - [TypeScript](https://www.typescriptlang.org/)
 
 ## 📂 项目结构
 
@@ -31,7 +26,6 @@
 .
 ├── app/              # Expo Router 路由和页面
 ├── assets/           # 静态资源 (字体, 图片, TV 图标)
-├── backend/          # 后端 Express 应用
 ├── components/       # React 组件
 ├── constants/        # 应用常量 (颜色, 样式)
 ├── hooks/            # 自定义 Hooks
@@ -52,32 +46,13 @@
 - [Xcode](https://developer.apple.com/xcode/) (用于 Apple TV 开发)
 - [Android Studio](https://developer.android.com/studio) (用于 Android TV 开发)
 
-### 1. 后端服务
-
-首先，启动后端服务：
-
-```sh
-# 进入后端目录
-cd backend
-
-# 安装依赖
-yarn
-
-# 启动开发服务器
-yarn dev
-```
-
-后端服务将运行在 `http://localhost:3001`。
-
-### 2. 前端应用
+### 项目启动
 
 接下来，在项目根目录运行前端应用：
 
 ```sh
-# (如果还在 backend 目录) 返回根目录
-cd ..
 
-# 安装前端依赖
+# 安装依赖
 yarn
 
 # [首次运行或依赖更新后] 生成原生项目文件
@@ -91,27 +66,10 @@ yarn ios-tv
 yarn android-tv
 ```
 
-## 部署
+## 使用
 
-### 后端部署
+- 1.2.x 以上版本需配合 [MoonTV](https://github.com/senshinya/MoonTV) 使用。
 
-#### [Vercel](https://vercel.com/) 部署
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fzimplexing%2FOrionTV&root-directory=backend)
-
-#### Docker 部署
-
-1. `docker pull zimpel1/tv-host`
-
-2. `docker run -d -p 3001:3001 zimpel1/tv-host`
-
-#### 使用 demo 地址
-
-在设置中可以使用 demo 地址：https://orion-tv.edu.deal 不保证稳定和可用性。
-
-## 其他
- - 最低版本是android 7，可用，但是不推荐
- - 如果使用https的后端接口无法访问，在确认服务没有问题的情况下，请检查https的TLS协议，Android 10 之后版本才支持 TLS1.3
 
 ## 📜 主要脚本
 
@@ -120,14 +78,7 @@ yarn android-tv
 - `yarn ios-tv`: 在 Apple TV 上构建并运行应用。
 - `yarn android-tv`: 在 Android TV 上构建并运行应用。
 - `yarn prebuild-tv`: 为 TV 构建生成原生项目文件。
-- `yarn lint`: 检查代码风格。
-
-## 📸 应用截图
-
-![首页界面](screenshot/image.png)
-![详情页面](screenshot/image1.png)
-![搜索界面](screenshot/image3.png)
-![视频播放](screenshot/image2.png)
+- `yarn lint`: 检查代码风格
 
 ## 📝 License
 
@@ -139,9 +90,17 @@ OrionTV 仅作为视频搜索工具，不存储、上传或分发任何视频内
 
 本项目开发者不对使用本项目产生的任何后果负责。使用本项目时，您必须遵守当地的法律法规。
 
+## 🌟 Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=zimplexing/OrionTV&type=Date)](https://www.star-history.com/#zimplexing/OrionTV&Date)
+
 ## 🙏 致谢
 
 本项目受到以下开源项目的启发：
 
 - [MoonTV](https://github.com/senshinya/MoonTV) - 一个基于 Next.js 的视频聚合应用
 - [LibreTV](https://github.com/LibreSpark/LibreTV) - 一个开源的视频流媒体应用
+
+感谢以下项目提供 API Key 的赞助
+
+- [gpt-load](https://github.com/tbphp/gpt-load) - 一个高性能的 OpenAI 格式 API 多密钥轮询代理服务器，支持负载均衡，使用 Go 语言开发

app.json

@@ -23,7 +23,9 @@
             "newArchEnabled": false
           },
           "android": {
-            "newArchEnabled": false
+            "newArchEnabled": false,
+            "enableProguardInReleaseBuilds": true,
+            "enableShrinkResourcesInReleaseBuilds": true
           }
         }
       ],
@@ -34,19 +36,52 @@
     },
     "name": "OrionTV",
     "slug": "OrionTV",
+    "orientation": "default",
     "icon": "./assets/images/icon.png",
+    "userInterfaceStyle": "dark",
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "android": {
       "package": "com.oriontv",
       "usesCleartextTraffic": true,
+      "hardwareAcceleration": true,
       "networkSecurityConfig": "@xml/network_security_config",
       "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": "VIEW",
+          "data": [
+            {
+              "scheme": "oriontv"
+            }
+          ],
+          "category": [
+            "BROWSABLE",
+            "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,10 +3,18 @@ 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";
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
@@ -16,11 +24,25 @@ export default function RootLayout() {
   const [loaded, error] = useFonts({
     SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
   });
-  const initializeSettings = useSettingsStore((state) => state.loadSettings);
+  const { loadSettings, remoteInputEnabled, apiBaseUrl } = useSettingsStore();
+  const { startServer, stopServer } = useRemoteControlStore();
+  const { checkLoginStatus } = useAuthStore();
+  const { checkForUpdate, lastCheckTime } = useUpdateStore();
+  const responsiveConfig = useResponsiveLayout();
 
   useEffect(() => {
-    initializeSettings();
-  }, [initializeSettings]);
+    const initializeApp = async () => {
+      await loadSettings();
+    };
+    initializeApp();
+    initUpdateStore(); // 初始化更新存储
+  }, [loadSettings]);
+
+  useEffect(() => {
+    if (apiBaseUrl) {
+      checkLoginStatus(apiBaseUrl);
+    }
+  }, [apiBaseUrl, checkLoginStatus]);
 
   useEffect(() => {
     if (loaded || error) {
@@ -31,20 +53,55 @@ export default function RootLayout() {
     }
   }, [loaded, error]);
 
+  // 检查更新
+  useEffect(() => {
+    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, 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="+not-found" />
-      </Stack>
-      <Toast />
-    </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,314 +1,449 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect } from "react";
 import { View, Text, StyleSheet, Image, ScrollView, ActivityIndicator } from "react-native";
 import { useLocalSearchParams, useRouter } from "expo-router";
 import { ThemedView } from "@/components/ThemedView";
 import { ThemedText } from "@/components/ThemedText";
-import { api, SearchResult } from "@/services/api";
-import { getResolutionFromM3U8 } from "@/services/m3u8";
 import { StyledButton } from "@/components/StyledButton";
+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 { source, q } = useLocalSearchParams();
+  const { q, source, id } = useLocalSearchParams<{ q: string; source?: string; id?: string }>();
   const router = useRouter();
-  const [searchResults, setSearchResults] = useState<(SearchResult & { resolution?: string | null })[]>([]);
-  const [detail, setDetail] = useState<(SearchResult & { resolution?: string | null }) | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [allSourcesLoaded, setAllSourcesLoaded] = useState(false);
-  const controllerRef = useRef<AbortController | null>(null);
+
+  // 响应式布局配置
+  const responsiveConfig = useResponsiveLayout();
+  const commonStyles = getCommonResponsiveStyles(responsiveConfig);
+  const { deviceType, spacing } = responsiveConfig;
+
+  const {
+    detail,
+    searchResults,
+    loading,
+    error,
+    allSourcesLoaded,
+    init,
+    setDetail,
+    abort,
+    isFavorited,
+    toggleFavorite,
+  } = useDetailStore();
 
   useEffect(() => {
-    if (controllerRef.current) {
-      controllerRef.current.abort();
+    if (q) {
+      init(q, source, id);
     }
-    controllerRef.current = new AbortController();
-    const signal = controllerRef.current.signal;
-
-    if (typeof q === "string") {
-      const fetchDetailData = async () => {
-        setLoading(true);
-        setSearchResults([]);
-        setDetail(null);
-        setError(null);
-        setAllSourcesLoaded(false);
-
-        try {
-          const resources = await api.getResources(signal);
-          if (!resources || resources.length === 0) {
-            setError("没有可用的播放源");
-            setLoading(false);
-            return;
-          }
-
-          let foundFirstResult = false;
-          // Prioritize source from params if available
-          if (typeof source === "string") {
-            const index = resources.findIndex((r) => r.key === source);
-            if (index > 0) {
-              resources.unshift(resources.splice(index, 1)[0]);
-            }
-          }
-
-          for (const resource of resources) {
-            try {
-              const { results } = await api.searchVideo(q, resource.key, signal);
-              if (results && results.length > 0) {
-                const searchResult = results[0];
-
-                let resolution;
-                try {
-                  if (searchResult.episodes && searchResult.episodes.length > 0) {
-                    resolution = await getResolutionFromM3U8(searchResult.episodes[0], signal);
-                  }
-                } catch (e) {
-                  if ((e as Error).name !== "AbortError") {
-                    console.error(`Failed to get resolution for ${resource.name}`, e);
-                  }
-                }
-
-                const resultWithResolution = { ...searchResult, resolution };
-
-                setSearchResults((prev) => [...prev, resultWithResolution]);
-
-                if (!foundFirstResult) {
-                  setDetail(resultWithResolution);
-                  foundFirstResult = true;
-                  setLoading(false);
-                }
-              }
-            } catch (e) {
-              if ((e as Error).name !== "AbortError") {
-                console.error(`Error searching in resource ${resource.name}:`, e);
-              }
-            }
-          }
-
-          if (!foundFirstResult) {
-            setError("未找到播放源");
-            setLoading(false);
-          }
-        } catch (e) {
-          if ((e as Error).name !== "AbortError") {
-            setError(e instanceof Error ? e.message : "获取资源列表失败");
-            setLoading(false);
-          }
-        } finally {
-          setAllSourcesLoaded(true);
-        }
-      };
-      fetchDetailData();
-    }
-
     return () => {
-      controllerRef.current?.abort();
+      abort();
     };
-  }, [q, source]);
+  }, [abort, init, q, source, id]);
 
-  const handlePlay = (episodeName: string, episodeIndex: number) => {
+  const handlePlay = (episodeIndex: number) => {
     if (!detail) return;
-    controllerRef.current?.abort(); // Cancel any ongoing fetches
+    abort(); // Cancel any ongoing fetches
     router.push({
       pathname: "/play",
       params: {
+        // Pass necessary identifiers, the rest will be in the store
+        q: detail.title,
         source: detail.source,
         id: detail.id.toString(),
-        episodeUrl: episodeName, // The "episode" is actually the URL
         episodeIndex: episodeIndex.toString(),
-        title: detail.title,
-        poster: detail.poster,
       },
     });
   };
 
   if (loading) {
-    return (
-      <ThemedView style={styles.centered}>
-        <ActivityIndicator size="large" />
-      </ThemedView>
-    );
+    return <VideoLoadingAnimation showProgressBar={false} />;
   }
 
   if (error) {
-    return (
-      <ThemedView style={styles.centered}>
-        <ThemedText type="subtitle">{error}</ThemedText>
+    const content = (
+      <ThemedView style={[commonStyles.safeContainer, commonStyles.center]}>
+        <ThemedText type="subtitle" style={commonStyles.textMedium}>
+          {error}
+        </ThemedText>
       </ThemedView>
     );
+
+    if (deviceType === 'tv') {
+      return content;
+    }
+
+    return (
+      <ResponsiveNavigation>
+        <ResponsiveHeader title="详情" showBackButton />
+        {content}
+      </ResponsiveNavigation>
+    );
   }
 
   if (!detail) {
-    return (
-      <ThemedView style={styles.centered}>
+    const content = (
+      <ThemedView style={[commonStyles.safeContainer, commonStyles.center]}>
         <ThemedText type="subtitle">未找到详情信息</ThemedText>
       </ThemedView>
     );
+
+    if (deviceType === 'tv') {
+      return content;
+    }
+
+    return (
+      <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}>
-            <ThemedText style={styles.title} numberOfLines={1}>
-              {detail.title}
-            </ThemedText>
-            <View style={styles.metaContainer}>
-              <ThemedText style={styles.metaText}>{detail.year}</ThemedText>
-              <ThemedText style={styles.metaText}>{detail.type_name}</ThemedText>
-            </View>
-            <ScrollView style={styles.descriptionScrollView}>
-              <ThemedText style={styles.description}>{detail.desc}</ThemedText>
-            </ScrollView>
-          </View>
-        </View>
+  // 动态样式
+  const dynamicStyles = createResponsiveStyles(deviceType, spacing);
 
-        <View style={styles.bottomContainer}>
-          <View style={styles.sourcesContainer}>
-            <View style={styles.sourcesTitleContainer}>
-              <ThemedText style={styles.sourcesTitle}>选择播放源 共 {searchResults.length} 个</ThemedText>
+  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 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}>
-              {searchResults.map((item, index) => (
-                <StyledButton
-                  key={index}
-                  onPress={() => setDetail(item)}
-                  hasTVPreferredFocus={index === 0}
-                  isSelected={detail?.source === item.source}
-                  style={styles.sourceButton}
-                >
-                  <ThemedText style={styles.sourceButtonText}>{item.source_name}</ThemedText>
-                  {item.episodes.length > 1 && (
-                    <View style={styles.badge}>
-                      <Text style={styles.badgeText}>
-                        {item.episodes.length > 99 ? "99+" : `${item.episodes.length}`} 集
-                      </Text>
-                    </View>
-                  )}
-                  {item.resolution && (
-                    <View style={[styles.badge, { backgroundColor: "#28a745" }]}>
-                      <Text style={styles.badgeText}>{item.resolution}</Text>
-                    </View>
-                  )}
-                </StyledButton>
-              ))}
+            <View style={dynamicStyles.sourceList}>
+              {searchResults.map((item, index) => {
+                const isSelected = detail?.source === item.source;
+                return (
+                  <StyledButton
+                    key={index}
+                    onPress={() => setDetail(item)}
+                    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={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}
-                  onPress={() => handlePlay(episode, index)}
+                  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,
-  },
-  poster: {
-    width: 200,
-    height: 300,
-    borderRadius: 8,
-  },
-  infoContainer: {
-    flex: 1,
-    marginLeft: 20,
-    justifyContent: "flex-start",
-  },
-  title: {
-    fontSize: 28,
-    fontWeight: "bold",
-    marginBottom: 10,
-    paddingTop: 20,
-  },
-  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,
-  },
-  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: "red",
-    borderRadius: 10,
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    marginLeft: 8,
-  },
-  badgeText: {
-    color: "white",
-    fontSize: 12,
-    fontWeight: "bold",
-  },
-  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

@@ -0,0 +1,107 @@
+import React, { useEffect } from "react";
+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";
+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]);
+
+  const renderItem = ({ item }: { item: Favorite & { key: string }; index: number }) => {
+    const [source, id] = item.key.split("+");
+    return (
+      <VideoCard
+        id={id}
+        source={source}
+        title={item.title}
+        sourceName={item.source_name}
+        poster={item.cover}
+        year={item.year}
+        api={api}
+        episodeIndex={1}
+        progress={0}
+      />
+    );
+  };
+
+  // 动态样式
+  const dynamicStyles = createResponsiveStyles(deviceType, spacing);
+
+  const renderFavoritesContent = () => (
+    <>
+      {deviceType === 'tv' && (
+        <View style={dynamicStyles.headerContainer}>
+          <ThemedText style={dynamicStyles.headerTitle}>我的收藏</ThemedText>
+        </View>
+      )}
+      <CustomScrollView
+        data={favorites}
+        renderItem={renderItem}
+        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 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,24 +1,34 @@
-import React, { useEffect, useCallback, useRef } from "react";
-import { View, StyleSheet, ActivityIndicator, FlatList, Pressable, Dimensions } from "react-native";
+import React, { useEffect, useCallback, useRef, useState } from "react";
+import { View, StyleSheet, ActivityIndicator, FlatList, Pressable, Animated, StatusBar } 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 } from "lucide-react-native";
-import { SettingsModal } from "@/components/SettingsModal";
+import { Search, Settings, LogOut, Heart } from "lucide-react-native";
 import { StyledButton } from "@/components/StyledButton";
 import useHomeStore, { RowItem, Category } from "@/stores/homeStore";
-import { useSettingsStore } from "@/stores/settingsStore";
+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";
 
-const NUM_COLUMNS = 5;
-const { width } = Dimensions.get("window");
-const ITEM_WIDTH = width / NUM_COLUMNS - 24;
+const LOAD_MORE_THRESHOLD = 200;
 
 export default function HomeScreen() {
   const router = useRouter();
   const colorScheme = "dark";
-  const flatListRef = useRef<FlatList>(null);
+  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,
@@ -31,9 +41,10 @@ export default function HomeScreen() {
     loadMoreData,
     selectCategory,
     refreshPlayRecords,
+    clearError,
   } = useHomeStore();
-
-  const showSettingsModal = useSettingsStore((state) => state.showModal);
+  const { isLoggedIn, logout } = useAuthStore();
+  const apiConfigStatus = useApiConfig();
 
   useFocusEffect(
     useCallback(() => {
@@ -41,15 +52,70 @@ export default function HomeScreen() {
     }, [refreshPlayRecords])
   );
 
+  // 统一的数据获取逻辑
   useEffect(() => {
-    fetchInitialData();
-    flatListRef.current?.scrollToOffset({ animated: false, offset: 0 });
-  }, [selectedCategory, fetchInitialData]);
+    if (!selectedCategory) return;
+
+    // 如果是容器分类且没有选择标签，设置默认标签
+    if (selectedCategory.tags && !selectedCategory.tag) {
+      const defaultTag = selectedCategory.tags[0];
+      setSelectedTag(defaultTag);
+      selectCategory({ ...selectedCategory, tag: defaultTag });
+      return;
+    }
+
+    // 只有在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 (!loading && contentData.length > 0) {
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    } else if (loading) {
+      fadeAnim.setValue(0);
+    }
+  }, [loading, contentData.length, fadeAnim]);
 
   const handleCategorySelect = (category: Category) => {
+    setSelectedTag(null);
     selectCategory(category);
   };
 
+  const handleTagSelect = (tag: string) => {
+    setSelectedTag(tag);
+    if (selectedCategory) {
+      const categoryWithTag = { ...selectedCategory, tag: tag };
+      selectCategory(categoryWithTag);
+    }
+  };
+
   const renderCategory = ({ item }: { item: Category }) => {
     const isSelected = selectedCategory?.title === item.title;
     return (
@@ -57,30 +123,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 }: { item: RowItem }) => (
-    <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 = () => {
@@ -88,129 +152,196 @@ export default function HomeScreen() {
     return <ActivityIndicator style={{ marginVertical: 20 }} size="large" />;
   };
 
-  return (
-    <ThemedView style={styles.container}>
-      {/* 顶部导航 */}
-      <View style={styles.headerContainer}>
-        <ThemedText style={styles.headerTitle}>首页</ThemedText>
-        <View style={styles.rightHeaderButtons}>
+  // 检查是否需要显示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={dynamicStyles.headerTitle}>首页</ThemedText>
+          <Pressable style={{ marginLeft: 20 }} onPress={() => router.push("/live")}>
+            {({ focused }) => (
+              <ThemedText style={[dynamicStyles.headerTitle, { color: focused ? "white" : "grey" }]}>直播</ThemedText>
+            )}
+          </Pressable>
+        </View>
+        <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={showSettingsModal} variant="ghost">
+          <StyledButton style={dynamicStyles.iconButton} onPress={() => router.push("/settings")} variant="ghost">
             <Settings color={colorScheme === "dark" ? "white" : "black"} size={24} />
           </StyledButton>
+          {isLoggedIn && (
+            <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>
 
+      {/* 子分类标签 */}
+      {selectedCategory && selectedCategory.tags && (
+        <View style={dynamicStyles.categoryContainer}>
+          <FlatList
+            data={selectedCategory.tags}
+            renderItem={({ item, index }) => {
+              const isSelected = selectedTag === item;
+              return (
+                <StyledButton
+                  hasTVPreferredFocus={index === 0}
+                  text={item}
+                  onPress={() => handleTagSelect(item)}
+                  isSelected={isSelected}
+                  style={dynamicStyles.categoryButton}
+                  textStyle={dynamicStyles.categoryText}
+                  variant="ghost"
+                />
+              );
+            }}
+            keyExtractor={(item) => item}
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            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>
       ) : (
-        <FlatList
-          ref={flatListRef}
-          data={contentData}
-          renderItem={renderContentItem}
-          keyExtractor={(item, index) => `${item.source}-${item.id}-${index}`}
-          numColumns={NUM_COLUMNS}
-          contentContainerStyle={styles.listContent}
-          onEndReached={loadMoreData}
-          onEndReachedThreshold={0.5}
-          ListFooterComponent={renderFooter}
-          ListEmptyComponent={
-            <View style={styles.centerContainer}>
-              <ThemedText>该分类下暂无内容</ThemedText>
-            </View>
-          }
-        />
+        <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>
       )}
-      <SettingsModal />
     </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: {
-    padding: 10,
-    borderRadius: 30,
-    marginLeft: 10,
-  },
-  // 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,
-    width: ITEM_WIDTH,
-    alignItems: "center",
-  },
-});
+  // 根据设备类型决定是否包装在响应式导航中
+  if (deviceType === "tv") {
+    return content;
+  }
+
+  return <ResponsiveNavigation>{content}</ResponsiveNavigation>;
+}

app/live.tsx

@@ -0,0 +1,246 @@
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { View, FlatList, StyleSheet, ActivityIndicator, Modal, useTVEventHandler, HWEvent, Text } from "react-native";
+import LivePlayer from "@/components/LivePlayer";
+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[]>([]);
+  const [selectedGroup, setSelectedGroup] = useState<string>("");
+
+  const [currentChannelIndex, setCurrentChannelIndex] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isChannelListVisible, setIsChannelListVisible] = useState(false);
+  const [channelTitle, setChannelTitle] = useState<string | null>(null);
+  const titleTimer = useRef<NodeJS.Timeout | null>(null);
+
+  const selectedChannelUrl = channels.length > 0 ? getPlayableUrl(channels[currentChannelIndex].url) : null;
+
+  useEffect(() => {
+    const loadChannels = async () => {
+      if (!m3uUrl) return;
+      setIsLoading(true);
+      const parsedChannels = await fetchAndParseM3u(m3uUrl);
+      setChannels(parsedChannels);
+
+      const groups: Record<string, Channel[]> = parsedChannels.reduce((acc, channel) => {
+        const groupName = channel.group || "Other";
+        if (!acc[groupName]) {
+          acc[groupName] = [];
+        }
+        acc[groupName].push(channel);
+        return acc;
+      }, {} as Record<string, Channel[]>);
+
+      const groupNames = Object.keys(groups);
+      setGroupedChannels(groups);
+      setChannelGroups(groupNames);
+      setSelectedGroup(groupNames[0] || "");
+
+      if (parsedChannels.length > 0) {
+        showChannelTitle(parsedChannels[0].name);
+      }
+      setIsLoading(false);
+    };
+    loadChannels();
+  }, [m3uUrl]);
+
+  const showChannelTitle = (title: string) => {
+    setChannelTitle(title);
+    if (titleTimer.current) clearTimeout(titleTimer.current);
+    titleTimer.current = setTimeout(() => setChannelTitle(null), 3000);
+  };
+
+  const handleSelectChannel = (channel: Channel) => {
+    const globalIndex = channels.findIndex((c) => c.id === channel.id);
+    if (globalIndex !== -1) {
+      setCurrentChannelIndex(globalIndex);
+      showChannelTitle(channel.name);
+      setIsChannelListVisible(false);
+    }
+  };
+
+  const changeChannel = useCallback(
+    (direction: "next" | "prev") => {
+      if (channels.length === 0) return;
+      let newIndex =
+        direction === "next"
+          ? (currentChannelIndex + 1) % channels.length
+          : (currentChannelIndex - 1 + channels.length) % channels.length;
+      setCurrentChannelIndex(newIndex);
+      showChannelTitle(channels[newIndex].name);
+    },
+    [channels, currentChannelIndex]
+  );
+
+  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, deviceType]
+  );
+
+  useTVEventHandler(deviceType === 'tv' ? handleTVEvent : () => {});
+
+  // 动态样式
+  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={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}`}
+                  renderItem={({ item }) => (
+                    <StyledButton
+                      text={item}
+                      onPress={() => setSelectedGroup(item)}
+                      isSelected={selectedGroup === item}
+                      style={dynamicStyles.groupButton}
+                      textStyle={dynamicStyles.groupButtonText}
+                    />
+                  )}
+                />
+              </View>
+              <View style={dynamicStyles.channelColumn}>
+                {isLoading ? (
+                  <ActivityIndicator size="large" />
+                ) : (
+                  <FlatList
+                    data={groupedChannels[selectedGroup] || []}
+                    keyExtractor={(item, index) => `${item.id}-${item.group}-${index}`}
+                    renderItem={({ item }) => (
+                      <StyledButton
+                        text={item.name || "Unknown Channel"}
+                        onPress={() => handleSelectChannel(item)}
+                        isSelected={channels[currentChannelIndex]?.id === item.id}
+                        hasTVPreferredFocus={channels[currentChannelIndex]?.id === item.id}
+                        style={dynamicStyles.channelItem}
+                        textStyle={dynamicStyles.channelItemText}
+                      />
+                    )}
+                  />
+                )}
+              </View>
+            </View>
+          </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 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,5 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import { View, StyleSheet, TouchableOpacity, ActivityIndicator, BackHandler } from "react-native";
+import { StyleSheet, TouchableOpacity, BackHandler, AppState, AppStateStatus, View } from "react-native";
 import { useLocalSearchParams, useRouter } from "expo-router";
 import { Video, ResizeMode } from "expo-av";
 import { useKeepAwake } from "expo-keep-awake";
@@ -7,58 +7,92 @@ 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 { LoadingOverlay } from "@/components/LoadingOverlay";
-import usePlayerStore from "@/stores/playerStore";
+// import { NextEpisodeOverlay } from "@/components/NextEpisodeOverlay";
+import VideoLoadingAnimation from "@/components/VideoLoadingAnimation";
+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";
 
 export default function PlayScreen() {
   const videoRef = useRef<Video>(null);
   const router = useRouter();
   useKeepAwake();
-  const { source, id, episodeIndex, position } = useLocalSearchParams<{
-    source: string;
-    id: string;
-    episodeIndex: string;
-    position: string;
-  }>();
+
+  // 响应式布局配置
+  const { deviceType } = useResponsiveLayout();
 
   const {
-    detail,
-    episodes,
-    currentEpisodeIndex,
+    episodeIndex: episodeIndexStr,
+    position: positionStr,
+    source: sourceStr,
+    id: videoId,
+    title: videoTitle,
+  } = useLocalSearchParams<{
+    episodeIndex: string;
+    position?: string;
+    source?: string;
+    id?: string;
+    title?: string;
+  }>();
+  const episodeIndex = parseInt(episodeIndexStr || "0", 10);
+  const position = positionStr ? parseInt(positionStr, 10) : undefined;
+
+  const { detail } = useDetailStore();
+  const source = sourceStr || detail?.source;
+  const id = videoId || detail?.id.toString();
+  const title = videoTitle || detail?.title;
+  const {
     isLoading,
     showControls,
-    showEpisodeModal,
-    showSourceModal,
-    showNextEpisodeOverlay,
+    // showNextEpisodeOverlay,
     initialPosition,
     introEndTime,
+    playbackRate,
     setVideoRef,
-    loadVideo,
-    playEpisode,
-    togglePlayPause,
-    seek,
     handlePlaybackStatusUpdate,
     setShowControls,
-    setShowEpisodeModal,
-    setShowSourceModal,
-    setShowNextEpisodeOverlay,
+    // setShowNextEpisodeOverlay,
     reset,
+    loadVideo,
   } = usePlayerStore();
+  const currentEpisode = usePlayerStore(selectCurrentEpisode);
 
   useEffect(() => {
     setVideoRef(videoRef);
-    if (source && id) {
-      loadVideo(source, id, parseInt(episodeIndex || "0", 10), parseInt(position || "0", 10));
+    if (source && id && title) {
+      loadVideo({ source, id, episodeIndex, position, title });
     }
+
     return () => {
       reset(); // Reset state when component unmounts
     };
-  }, [source, id, episodeIndex, position, setVideoRef, loadVideo, reset]);
+  }, [episodeIndex, source, position, setVideoRef, reset, loadVideo, id, title]);
 
-  const { onScreenPress } = useTVRemoteHandler();
+  useEffect(() => {
+    const handleAppStateChange = (nextAppState: AppStateStatus) => {
+      if (nextAppState === "background" || nextAppState === "inactive") {
+        videoRef.current?.pauseAsync();
+      }
+    };
+
+    const subscription = AppState.addEventListener("change", handleAppStateChange);
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  // TV遥控器处理 - 总是调用hook，但根据设备类型决定是否使用结果
+  const tvRemoteHandler = useTVRemoteHandler();
+  
+  // 根据设备类型使用不同的交互处理
+  const onScreenPress = deviceType === 'tv' 
+    ? tvRemoteHandler.onScreenPress 
+    : () => setShowControls(!showControls);
 
   useEffect(() => {
     const backAction = () => {
@@ -73,69 +107,107 @@ export default function PlayScreen() {
     const backHandler = BackHandler.addEventListener("hardwareBackPress", backAction);
 
     return () => backHandler.remove();
-  }, [
-    showControls,
-    showEpisodeModal,
-    showSourceModal,
-    setShowControls,
-    setShowEpisodeModal,
-    setShowSourceModal,
-    router,
-  ]);
+  }, [showControls, setShowControls, router]);
 
-  if (!detail && isLoading) {
-    return (
-      <ThemedView style={[styles.container, styles.centered]}>
-        <ActivityIndicator size="large" color="#fff" />
-      </ThemedView>
-    );
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout | null = null;
+
+    if (isLoading) {
+      timeoutId = setTimeout(() => {
+        if (usePlayerStore.getState().isLoading) {
+          usePlayerStore.setState({ isLoading: false });
+          Toast.show({ type: "error", text1: "播放超时，请重试" });
+        }
+      }, 60000); // 1 minute
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [isLoading]);
+
+  if (!detail) {
+    return <VideoLoadingAnimation showProgressBar />;
   }
 
-  const currentEpisode = episodes[currentEpisodeIndex];
+  // 动态样式
+  const dynamicStyles = createResponsiveStyles(deviceType);
 
   return (
-    <ThemedView focusable style={styles.container}>
-      <TouchableOpacity activeOpacity={1} style={styles.videoContainer} onPress={onScreenPress}>
+    <ThemedView focusable style={dynamicStyles.container}>
+      <TouchableOpacity 
+        activeOpacity={1} 
+        style={dynamicStyles.videoContainer} 
+        onPress={onScreenPress}
+        disabled={deviceType !== 'tv' && showControls} // 移动端和平板端在显示控制条时禁用触摸
+      >
         <Video
           ref={videoRef}
-          style={styles.videoPlayer}
-          source={{ uri: currentEpisode?.url }}
+          style={dynamicStyles.videoPlayer}
+          source={{ uri: currentEpisode?.url || "" }}
+          posterSource={{ uri: detail?.poster ?? "" }}
           resizeMode={ResizeMode.CONTAIN}
+          rate={playbackRate}
           onPlaybackStatusUpdate={handlePlaybackStatusUpdate}
           onLoad={() => {
-            const jumpPosition = introEndTime || initialPosition;
+            const jumpPosition = initialPosition || introEndTime || 0;
             if (jumpPosition > 0) {
               videoRef.current?.setPositionAsync(jumpPosition);
             }
             usePlayerStore.setState({ isLoading: false });
           }}
           onLoadStart={() => usePlayerStore.setState({ isLoading: true })}
-          useNativeControls={false}
+          useNativeControls={deviceType !== 'tv'}
           shouldPlay
         />
 
-        {showControls && <PlayerControls showControls={showControls} setShowControls={setShowControls} />}
+        {showControls && deviceType === 'tv' && <PlayerControls showControls={showControls} setShowControls={setShowControls} />}
 
         <SeekingBar />
 
-        <LoadingOverlay visible={isLoading} />
+        {isLoading && (
+          <View style={dynamicStyles.loadingContainer}>
+            <VideoLoadingAnimation showProgressBar />
+          </View>
+        )}
 
-        <NextEpisodeOverlay visible={showNextEpisodeOverlay} onCancel={() => setShowNextEpisodeOverlay(false)} />
+        {/* <NextEpisodeOverlay visible={showNextEpisodeOverlay} onCancel={() => setShowNextEpisodeOverlay(false)} /> */}
       </TouchableOpacity>
 
       <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,
-  },
-});
+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,
+    },
+  });
+};

app/search.tsx

@@ -1,11 +1,23 @@
 import React, { useState, useRef, useEffect } from "react";
-import { View, TextInput, StyleSheet, FlatList, ActivityIndicator, Text, Keyboard } 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 } from "lucide-react-native";
+import { Search, QrCode } from "lucide-react-native";
 import { StyledButton } from "@/components/StyledButton";
+import { useRemoteControlStore } from "@/stores/remoteControlStore";
+import { RemoteControlModal } from "@/components/RemoteControlModal";
+import { useSettingsStore } from "@/stores/settingsStore";
+import { useRouter } from "expo-router";
+import { Colors } from "@/constants/Colors";
+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";
 
 export default function SearchScreen() {
   const [keyword, setKeyword] = useState("");
@@ -13,19 +25,38 @@ 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, targetPage, clearMessage } = useRemoteControlStore();
+  const { remoteInputEnabled } = useSettingsStore();
+  const router = useRouter();
+
+  // 响应式布局配置
+  const responsiveConfig = useResponsiveLayout();
+  const commonStyles = getCommonResponsiveStyles(responsiveConfig);
+  const { deviceType, spacing } = responsiveConfig;
 
   useEffect(() => {
-    // Focus the text input when the screen loads
-    const timer = setTimeout(() => {
-      textInputRef.current?.focus();
-    }, 200);
-    return () => clearTimeout(timer);
-  }, []);
+    if (lastMessage && targetPage === 'search') {
+      console.log("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, targetPage]);
 
-  const handleSearch = async () => {
-    if (!keyword.trim()) {
+  // useEffect(() => {
+  //   // Focus the text input when the screen loads
+  //   const timer = setTimeout(() => {
+  //     textInputRef.current?.focus();
+  //   }, 200);
+  //   return () => clearTimeout(timer);
+  // }, []);
+
+  const handleSearch = async (searchText?: string) => {
+    const term = typeof searchText === "string" ? searchText : keyword;
+    if (!term.trim()) {
       Keyboard.dismiss();
       return;
     }
@@ -33,7 +64,7 @@ export default function SearchScreen() {
     setLoading(true);
     setError(null);
     try {
-      const response = await api.searchVideos(keyword);
+      const response = await api.searchVideos(term);
       if (response.results.length > 0) {
         setResults(response.results);
       } else {
@@ -41,13 +72,26 @@ export default function SearchScreen() {
       }
     } catch (err) {
       setError("搜索失败，请稍后重试。");
-      console.error("Search failed:", err);
+      console.info("Search failed:", err);
     } finally {
       setLoading(false);
     }
   };
 
-  const renderItem = ({ item }: { item: SearchResult }) => (
+  const onSearchPress = () => handleSearch();
+
+  const handleQrPress = () => {
+    if (!remoteInputEnabled) {
+      Alert.alert("远程输入未启用", "请先在设置页面中启用远程输入功能", [
+        { text: "取消", style: "cancel" },
+        { text: "去设置", onPress: () => router.push("/settings") },
+      ]);
+      return;
+    }
+    showRemoteModal('search');
+  };
+
+  const renderItem = ({ item }: { item: SearchResult; index: number }) => (
     <VideoCard
       id={item.id.toString()}
       source={item.source}
@@ -59,96 +103,134 @@ export default function SearchScreen() {
     />
   );
 
-  return (
-    <ThemedView style={styles.container}>
-      <View style={styles.searchContainer}>
-        <TextInput
-          ref={textInputRef}
+  // 动态样式
+  const dynamicStyles = createResponsiveStyles(deviceType, spacing);
+
+  const renderSearchContent = () => (
+    <>
+      <View style={dynamicStyles.searchContainer}>
+        <TouchableOpacity
+          activeOpacity={1}
           style={[
-            styles.input,
+            dynamicStyles.inputContainer,
             {
-              backgroundColor: colorScheme === "dark" ? "#2c2c2e" : "#f0f0f0",
-              color: colorScheme === "dark" ? "white" : "black",
-              borderColor: isInputFocused ? "#007bff" : "transparent",
+              borderColor: isInputFocused ? Colors.dark.primary : "transparent",
             },
           ]}
-          placeholder="搜索电影、剧集..."
-          placeholderTextColor={colorScheme === "dark" ? "#888" : "#555"}
-          value={keyword}
-          onChangeText={setKeyword}
-          onFocus={() => setIsInputFocused(true)}
-          onBlur={() => setIsInputFocused(false)}
-          onSubmitEditing={handleSearch} // Allow searching with remote 'enter' button
-          returnKeyType="search"
-        />
-        <StyledButton style={styles.searchButton} onPress={handleSearch}>
-          <Search size={24} color={colorScheme === "dark" ? "white" : "black"} />
+          onPress={() => textInputRef.current?.focus()}
+        >
+          <TextInput
+            ref={textInputRef}
+            style={dynamicStyles.input}
+            placeholder="搜索电影、剧集..."
+            placeholderTextColor="#888"
+            value={keyword}
+            onChangeText={setKeyword}
+            onSubmitEditing={onSearchPress}
+            onFocus={() => setIsInputFocused(true)}
+            onBlur={() => setIsInputFocused(false)}
+            returnKeyType="search"
+          />
+        </TouchableOpacity>
+        <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 ? (
-        <View style={styles.centerContainer}>
-          <ActivityIndicator size="large" />
-        </View>
+        <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>
       ) : (
-        <FlatList
+        <CustomScrollView
           data={results}
           renderItem={renderItem}
-          keyExtractor={(item, index) => `${item.id}-${item.source}-${index}`}
-          numColumns={5} // Adjust based on your card size and desired layout
-          contentContainerStyle={styles.listContent}
-          ListEmptyComponent={
-            <View style={styles.centerContainer}>
-              <ThemedText>输入关键词开始搜索</ThemedText>
-            </View>
-          }
+          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,
-  },
-  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

@@ -0,0 +1,265 @@
+import React, { useState, useEffect, useRef } from "react";
+import { View, StyleSheet, FlatList, Alert, KeyboardAvoidingView, 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";
+import { useThemeColor } from "@/hooks/useThemeColor";
+import { useSettingsStore } from "@/stores/settingsStore";
+// import useAuthStore from "@/stores/authStore";
+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";
+
+export default function SettingsScreen() {
+  const { loadSettings, saveSettings, setApiBaseUrl, setM3uUrl } = useSettingsStore();
+  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);
+  const [currentFocusIndex, setCurrentFocusIndex] = useState(0);
+  const [currentSection, setCurrentSection] = useState<string | null>(null);
+
+  const saveButtonRef = useRef<any>(null);
+  const apiSectionRef = useRef<any>(null);
+  const liveStreamSectionRef = useRef<any>(null);
+
+  useEffect(() => {
+    loadSettings();
+  }, [loadSettings]);
+
+  useEffect(() => {
+    if (lastMessage && !targetPage) {
+      const realMessage = lastMessage.split("_")[0];
+      handleRemoteInput(realMessage);
+      clearMessage(); // Clear the message after processing
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lastMessage, targetPage]);
+
+  const handleRemoteInput = (message: string) => {
+    // Handle remote input based on currently focused section
+    if (currentSection === "api" && apiSectionRef.current) {
+      // API Config Section
+      setApiBaseUrl(message);
+    } else if (currentSection === "livestream" && liveStreamSectionRef.current) {
+      // Live Stream Section
+      setM3uUrl(message);
+    }
+  };
+
+  const handleSave = async () => {
+    setIsLoading(true);
+    try {
+      await saveSettings();
+      setHasChanges(false);
+      Toast.show({
+        type: "success",
+        text1: "保存成功",
+      });
+    } catch {
+      Alert.alert("错误", "保存设置失败");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const markAsChanged = () => {
+    setHasChanges(true);
+  };
+
+  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);
+
+  // 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);
+        if (nextIndex === sections.length) {
+          saveButtonRef.current?.focus();
+        }
+      } else if (event.eventType === "up") {
+        const prevIndex = Math.max(currentFocusIndex - 1, 0);
+        setCurrentFocusIndex(prevIndex);
+      }
+    },
+    [currentFocusIndex, sections.length, deviceType]
+  );
+
+  useTVEventHandler(deviceType === "tv" ? handleTVEvent : () => {});
+
+  // 动态样式
+  const dynamicStyles = createResponsiveStyles(deviceType, spacing, insets);
+
+  const renderSettingsContent = () => (
+    <KeyboardAvoidingView style={{ flex: 1, backgroundColor }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
+      <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 }) => {
+              if (item) {
+                return item.component;
+              }
+              return null;
+            }}
+            keyExtractor={(item) => (item ? item.key : "default")}
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={dynamicStyles.listContent}
+          />
+        </View>
+
+        <View style={dynamicStyles.footer}>
+          <StyledButton
+            text={isLoading ? "保存中..." : "保存设置"}
+            onPress={handleSave}
+            variant="primary"
+            disabled={!hasChanges || isLoading}
+            style={[dynamicStyles.saveButton, (!hasChanges || isLoading) && dynamicStyles.disabledButton]}
+          />
+        </View>
+      </ThemedView>
+    </KeyboardAvoidingView>
+  );
+
+  // 根据设备类型决定是否包装在响应式导航中
+  if (deviceType === "tv") {
+    return renderSettingsContent();
+  }
+
+  return (
+    <ResponsiveNavigation>
+      <ResponsiveHeader title="设置" showBackButton />
+      {renderSettingsContent()}
+    </ResponsiveNavigation>
+  );
+}
+
+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,
+    },
+  });
+};

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [],
+  };
+};

backend/.env

@@ -1,5 +0,0 @@
-# The port the backend server will run on
-PORT=3001
-
-# Optional: The password for the login endpoint. If not provided, login is disabled.
-PASSWORD=

backend/.env.example

@@ -1,5 +0,0 @@
-# The port the backend server will run on
-PORT=3001
-
-# Optional: The password for the login endpoint. If not provided, login is disabled.
-PASSWORD=

backend/Dockerfile

@@ -1,38 +0,0 @@
-# --- Build Stage ---
-FROM node:18-alpine AS builder
-
-WORKDIR /app
-
-# Copy package.json and yarn.lock first to leverage Docker cache
-COPY package.json yarn.lock ./
-RUN yarn install --frozen-lockfile
-
-# Copy the rest of the source code
-COPY . .
-
-# Compile TypeScript to JavaScript
-RUN yarn build
-
-# Prune development dependencies
-RUN yarn install --production --ignore-scripts --prefer-offline
-
-
-# --- Production Stage ---
-FROM node:18-alpine
-
-WORKDIR /app
-
-# Copy production dependencies and compiled code from the builder stage
-COPY --from=builder /app/node_modules ./node_modules
-COPY --from=builder /app/dist ./dist
-
-# Copy config.json from the project root relative to the Docker build context
-# IMPORTANT: When building, run `docker build -f backend/Dockerfile .` from the project root.
-COPY src/config/config.json dist/config/
-
-# Expose the port the app runs on
-EXPOSE 3001
-
-# The command to run the application
-# You can override the port using -e PORT=... in `docker run`
-CMD [ "node", "dist/index.docker.js" ]

backend/package.json

@@ -1,26 +0,0 @@
-{
-  "name": "OrionTV-proxy",
-  "version": "1.0.1",
-  "description": "Backend service for MyTV application",
-  "main": "dist/index.js",
-  "scripts": {
-    "start": "node dist/index.js",
-    "build": "tsc",
-    "dev": "ts-node-dev --respawn --transpile-only src/index.docker.ts"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "cors": "^2.8.5",
-    "express": "^4.19.2",
-    "dotenv": "^16.4.5"
-  },
-  "devDependencies": {
-    "@types/cors": "^2.8.17",
-    "@types/express": "^4.17.21",
-    "@types/node": "^20.14.2",
-    "ts-node-dev": "^2.0.0",
-    "typescript": "^5.4.5"
-  }
-}

backend/src/config/config.json

@@ -1,85 +0,0 @@
-{
-  "cache_time": 7200,
-  "api_site": {
-    "dyttzy": {
-      "api": "http://caiji.dyttzyapi.com/api.php/provide/vod",
-      "name": "电影天堂资源",
-      "detail": "http://caiji.dyttzyapi.com"
-    },
-    "ruyi": {
-      "api": "https://cj.rycjapi.com/api.php/provide/vod",
-      "name": "如意资源"
-    },
-    "mozhua": {
-      "api": "https://mozhuazy.com/api.php/provide/vod",
-      "name": "魔爪资源"
-    },
-    "heimuer": {
-      "api": "https://json.heimuer.xyz/api.php/provide/vod",
-      "name": "黑木耳",
-      "detail": "https://heimuer.tv"
-    },
-    "bfzy": {
-      "api": "https://bfzyapi.com/api.php/provide/vod",
-      "name": "暴风资源"
-    },
-    "tyyszy": {
-      "api": "https://tyyszy.com/api.php/provide/vod",
-      "name": "天涯资源"
-    },
-    "ffzy": {
-      "api": "http://ffzy5.tv/api.php/provide/vod",
-      "name": "非凡影视",
-      "detail": "http://ffzy5.tv"
-    },
-    "zy360": {
-      "api": "https://360zy.com/api.php/provide/vod",
-      "name": "360资源"
-    },
-    "iqiyi": {
-      "api": "https://www.iqiyizyapi.com/api.php/provide/vod",
-      "name": "iqiyi资源"
-    },
-    "wolong": {
-      "api": "https://wolongzyw.com/api.php/provide/vod",
-      "name": "卧龙资源"
-    },
-    "hwba": {
-      "api": "https://cjhwba.com/api.php/provide/vod",
-      "name": "华为吧资源"
-    },
-    "jisu": {
-      "api": "https://jszyapi.com/api.php/provide/vod",
-      "name": "极速资源",
-      "detail": "https://jszyapi.com"
-    },
-    "dbzy": {
-      "api": "https://dbzy.tv/api.php/provide/vod",
-      "name": "豆瓣资源"
-    },
-    "mdzy": {
-      "api": "https://www.mdzyapi.com/api.php/provide/vod",
-      "name": "魔都资源"
-    },
-    "zuid": {
-      "api": "https://api.zuidapi.com/api.php/provide/vod",
-      "name": "最大资源"
-    },
-    "yinghua": {
-      "api": "https://m3u8.apiyhzy.com/api.php/provide/vod",
-      "name": "樱花资源"
-    },
-    "wujin": {
-      "api": "https://api.wujinapi.me/api.php/provide/vod",
-      "name": "无尽资源"
-    },
-    "wwzy": {
-      "api": "https://wwzy.tv/api.php/provide/vod",
-      "name": "旺旺短剧"
-    },
-    "ikun": {
-      "api": "https://ikunzyapi.com/api.php/provide/vod",
-      "name": "iKun资源"
-    }
-  }
-}

backend/src/config/index.ts

@@ -1,80 +0,0 @@
-import fs from "fs";
-import path from "path";
-
-export interface ApiSite {
-  key: string;
-  api: string;
-  name: string;
-  detail?: string;
-}
-
-export interface StorageConfig {
-  type: "localstorage" | "database";
-  database?: {
-    host?: string;
-    port?: number;
-    username?: string;
-    password?: string;
-    database?: string;
-  };
-}
-
-export interface Config {
-  cache_time?: number;
-  api_site: {
-    [key: string]: ApiSite;
-  };
-  storage?: StorageConfig;
-}
-
-export const API_CONFIG = {
-  search: {
-    path: "?ac=videolist&wd=",
-    pagePath: "?ac=videolist&wd={query}&pg={page}",
-    headers: {
-      "User-Agent":
-        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36",
-      Accept: "application/json",
-    },
-  },
-  detail: {
-    path: "?ac=videolist&ids=",
-    headers: {
-      "User-Agent":
-        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36",
-      Accept: "application/json",
-    },
-  },
-};
-
-// Adjust path to read from project root, not from `backend/`
-const configPath = path.join(__dirname, "config.json");
-let cachedConfig: Config;
-
-try {
-  cachedConfig = JSON.parse(fs.readFileSync(configPath, "utf-8")) as Config;
-} catch (error) {
-  console.error(`Error reading or parsing config.json at ${configPath}`, error);
-  // Provide a default fallback config to prevent crashes
-  cachedConfig = {
-    api_site: {},
-    cache_time: 300,
-  };
-}
-
-export function getConfig(): Config {
-  return cachedConfig;
-}
-
-export function getCacheTime(): number {
-  const config = getConfig();
-  return config.cache_time || 300; // 默认5分钟缓存
-}
-
-export function getApiSites(): ApiSite[] {
-  const config = getConfig();
-  return Object.entries(config.api_site).map(([key, site]) => ({
-    ...site,
-    key,
-  }));
-}

backend/src/index.docker.ts

@@ -1,28 +0,0 @@
-import express, { Express, Request, Response } from "express";
-import cors from "cors";
-import dotenv from "dotenv";
-
-dotenv.config();
-
-const app: Express = express();
-const port = process.env.PORT || 3001;
-
-// Middlewares
-app.use(cors());
-app.use(express.json());
-
-// Health check route
-app.get("/", (req: Request, res: Response) => {
-  res.send("MyTV Backend Service is running!");
-});
-
-import apiRouter from "./routes";
-
-// API routes
-app.use("/api", apiRouter);
-
-app.listen(port, () => {
-  console.log(`Server is running on port ${port}`);
-});
-
-export default app;

backend/src/index.ts

@@ -1,24 +0,0 @@
-import express, { Express, Request, Response } from "express";
-import cors from "cors";
-import dotenv from "dotenv";
-
-dotenv.config();
-
-const app: Express = express();
-const port = process.env.PORT || 3001;
-
-// Middlewares
-app.use(cors());
-app.use(express.json());
-
-// Health check route
-app.get("/", (req: Request, res: Response) => {
-  res.send("MyTV Backend Service is running!");
-});
-
-import apiRouter from "./routes";
-
-// API routes
-app.use("/api", apiRouter);
-
-export default app;

backend/src/routes/detail.ts

@@ -1,186 +0,0 @@
-import { Router, Request, Response } from "express";
-import { API_CONFIG, ApiSite, getApiSites, getCacheTime } from "../config";
-import { VideoDetail } from "../types";
-import { cleanHtmlTags } from "../utils";
-
-const router = Router();
-
-// Match m3u8 links
-const M3U8_PATTERN = /(https?:\/\/[^"'\s]+?\.m3u8)/g;
-
-async function handleSpecialSourceDetail(
-  id: string,
-  apiSite: ApiSite
-): Promise<VideoDetail> {
-  const detailUrl = `${apiSite.detail}/index.php/vod/detail/id/${id}.html`;
-  const controller = new AbortController();
-  const timeoutId = setTimeout(() => controller.abort(), 10000);
-
-  const response = await fetch(detailUrl, {
-    headers: API_CONFIG.detail.headers,
-    signal: controller.signal,
-  });
-  clearTimeout(timeoutId);
-
-  if (!response.ok) {
-    throw new Error(`详情页请求失败: ${response.status}`);
-  }
-
-  const html = await response.text();
-  let matches: string[] = [];
-
-  if (apiSite.key === "ffzy") {
-    const ffzyPattern =
-      /\$(https?:\/\/[^"'\s]+?\/\d{8}\/\d+_[a-f0-9]+\/index\.m3u8)/g;
-    matches = html.match(ffzyPattern) || [];
-  }
-
-  if (matches.length === 0) {
-    const generalPattern = /\$(https?:\/\/[^"'\s]+?\.m3u8)/g;
-    matches = html.match(generalPattern) || [];
-  }
-
-  matches = Array.from(new Set(matches)).map((link: string) => {
-    link = link.substring(1);
-    const parenIndex = link.indexOf("(");
-    return parenIndex > 0 ? link.substring(0, parenIndex) : link;
-  });
-
-  const titleMatch = html.match(/<h1[^>]*>([^<]+)<\/h1>/);
-  const titleText = titleMatch ? titleMatch[1].trim() : "";
-  const descMatch = html.match(
-    /<div[^>]*class=["']sketch["'][^>]*>([\s\S]*?)<\/div>/
-  );
-  const descText = descMatch ? cleanHtmlTags(descMatch[1]) : "";
-  const coverMatch = html.match(/(https?:\/\/[^"'\s]+?\.jpg)/g);
-  const coverUrl = coverMatch ? coverMatch[0].trim() : "";
-
-  return {
-    code: 200,
-    episodes: matches,
-    detailUrl,
-    videoInfo: {
-      title: titleText,
-      cover: coverUrl,
-      desc: descText,
-      source_name: apiSite.name,
-      source: apiSite.key,
-      id,
-    },
-  };
-}
-
-async function getDetailFromApi(
-  apiSite: ApiSite,
-  id: string
-): Promise<VideoDetail> {
-  const detailUrl = `${apiSite.api}${API_CONFIG.detail.path}${id}`;
-  const controller = new AbortController();
-  const timeoutId = setTimeout(() => controller.abort(), 10000);
-
-  const response = await fetch(detailUrl, {
-    headers: API_CONFIG.detail.headers,
-    signal: controller.signal,
-  });
-  clearTimeout(timeoutId);
-
-  if (!response.ok) {
-    throw new Error(`详情请求失败: ${response.status}`);
-  }
-
-  const data = await response.json();
-  if (
-    !data ||
-    !data.list ||
-    !Array.isArray(data.list) ||
-    data.list.length === 0
-  ) {
-    throw new Error("获取到的详情内容无效");
-  }
-
-  const videoDetail = data.list[0];
-  let episodes: string[] = [];
-
-  if (videoDetail.vod_play_url) {
-    const playSources = videoDetail.vod_play_url.split("$$$");
-    if (playSources.length > 0) {
-      const mainSource = playSources[0];
-      const episodeList = mainSource.split("#");
-      episodes = episodeList
-        .map((ep: string) => {
-          const parts = ep.split("$");
-          return parts.length > 1 ? parts[1] : "";
-        })
-        .filter(
-          (url: string) =>
-            url && (url.startsWith("http://") || url.startsWith("https://"))
-        );
-    }
-  }
-
-  if (episodes.length === 0 && videoDetail.vod_content) {
-    const matches = videoDetail.vod_content.match(M3U8_PATTERN) || [];
-    episodes = matches.map((link: string) => link.replace(/^\$/, ""));
-  }
-
-  return {
-    code: 200,
-    episodes,
-    detailUrl,
-    videoInfo: {
-      title: videoDetail.vod_name,
-      cover: videoDetail.vod_pic,
-      desc: cleanHtmlTags(videoDetail.vod_content),
-      type: videoDetail.type_name,
-      year: videoDetail.vod_year?.match(/\d{4}/)?.[0] || "",
-      area: videoDetail.vod_area,
-      director: videoDetail.vod_director,
-      actor: videoDetail.vod_actor,
-      remarks: videoDetail.vod_remarks,
-      source_name: apiSite.name,
-      source: apiSite.key,
-      id,
-    },
-  };
-}
-
-async function getVideoDetail(
-  id: string,
-  sourceCode: string
-): Promise<VideoDetail> {
-  if (!id) {
-    throw new Error("缺少视频ID参数");
-  }
-  if (!/^[\w-]+$/.test(id)) {
-    throw new Error("无效的视频ID格式");
-  }
-  const apiSites = getApiSites();
-  const apiSite = apiSites.find((site) => site.key === sourceCode);
-  if (!apiSite) {
-    throw new Error("无效的API来源");
-  }
-  if (apiSite.detail) {
-    return handleSpecialSourceDetail(id, apiSite);
-  }
-  return getDetailFromApi(apiSite, id);
-}
-
-router.get("/", async (req: Request, res: Response) => {
-  const id = req.query.id as string;
-  const sourceCode = req.query.source as string;
-
-  if (!id || !sourceCode) {
-    return res.status(400).json({ error: "缺少必要参数" });
-  }
-
-  try {
-    const result = await getVideoDetail(id, sourceCode);
-    const cacheTime = getCacheTime();
-    res.setHeader("Cache-Control", `public, max-age=${cacheTime}`);
-    res.json(result);
-  } catch (error) {
-    res.status(500).json({ error: (error as Error).message });
-  }
-});
-
-export default router;

backend/src/routes/douban.ts

@@ -1,161 +0,0 @@
-import { Router, Request, Response } from "express";
-import { getCacheTime } from "../config";
-
-const router = Router();
-
-// --- Interfaces ---
-interface DoubanItem {
-  title: string;
-  poster: string;
-  rate: string;
-}
-
-interface DoubanResponse {
-  code: number;
-  message: string;
-  list: DoubanItem[];
-}
-
-interface DoubanApiResponse {
-  subjects: Array<{
-    title: string;
-    cover: string;
-    rate: string;
-  }>;
-}
-
-// --- Helper Functions ---
-
-async function fetchDoubanData(url: string): Promise<DoubanApiResponse> {
-  const controller = new AbortController();
-  const timeoutId = setTimeout(() => controller.abort(), 10000);
-
-  const fetchOptions = {
-    signal: controller.signal,
-    headers: {
-      "User-Agent":
-        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36",
-      Referer: "https://movie.douban.com/",
-      Accept: "application/json, text/plain, */*",
-    },
-  };
-
-  try {
-    const response = await fetch(url, fetchOptions);
-    clearTimeout(timeoutId);
-    if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`);
-    }
-    return await response.json();
-  } catch (error) {
-    clearTimeout(timeoutId);
-    throw error;
-  }
-}
-
-async function handleTop250(pageStart: number, res: Response) {
-  const target = `https://movie.douban.com/top250?start=${pageStart}&filter=`;
-  const controller = new AbortController();
-  const timeoutId = setTimeout(() => controller.abort(), 10000);
-
-  const fetchOptions = {
-    signal: controller.signal,
-    headers: {
-      "User-Agent":
-        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36",
-      Referer: "https://movie.douban.com/",
-      Accept:
-        "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
-    },
-  };
-
-  try {
-    const fetchResponse = await fetch(target, fetchOptions);
-    clearTimeout(timeoutId);
-
-    if (!fetchResponse.ok) {
-      throw new Error(`HTTP error! Status: ${fetchResponse.status}`);
-    }
-
-    const html = await fetchResponse.text();
-    const moviePattern =
-      /<div class="item">[\s\S]*?<img[^>]+alt="([^"]+)"[^>]*src="([^"]+)"[\s\S]*?<span class="rating_num"[^>]*>([^<]+)<\/span>[\s\S]*?<\/div>/g;
-    const movies: DoubanItem[] = [];
-    let match;
-
-    while ((match = moviePattern.exec(html)) !== null) {
-      const title = match[1];
-      const cover = match[2];
-      const rate = match[3] || "";
-      const processedCover = cover.replace(/^http:/, "https:");
-      movies.push({ title, poster: processedCover, rate });
-    }
-
-    const apiResponse: DoubanResponse = {
-      code: 200,
-      message: "获取成功",
-      list: movies,
-    };
-    const cacheTime = getCacheTime();
-    res.setHeader("Cache-Control", `public, max-age=${cacheTime}`);
-    res.json(apiResponse);
-  } catch (error) {
-    clearTimeout(timeoutId);
-    res.status(500).json({
-      error: "获取豆瓣 Top250 数据失败",
-      details: (error as Error).message,
-    });
-  }
-}
-
-// --- Main Route Handler ---
-
-router.get("/", async (req: Request, res: Response) => {
-  const { type, tag } = req.query;
-  const pageSize = parseInt((req.query.pageSize as string) || "16");
-  const pageStart = parseInt((req.query.pageStart as string) || "0");
-
-  if (!type || !tag) {
-    return res.status(400).json({ error: "缺少必要参数: type 或 tag" });
-  }
-  if (typeof type !== "string" || !["tv", "movie"].includes(type)) {
-    return res.status(400).json({ error: "type 参数必须是 tv 或 movie" });
-  }
-  if (pageSize < 1 || pageSize > 100) {
-    return res.status(400).json({ error: "pageSize 必须在 1-100 之间" });
-  }
-  if (pageStart < 0) {
-    return res.status(400).json({ error: "pageStart 不能小于 0" });
-  }
-
-  if (tag === "top250") {
-    return handleTop250(pageStart, res);
-  }
-
-  const target = `https://movie.douban.com/j/search_subjects?type=${type}&tag=${tag}&sort=recommend&page_limit=${pageSize}&page_start=${pageStart}`;
-
-  try {
-    const doubanData = await fetchDoubanData(target);
-    const list: DoubanItem[] = doubanData.subjects.map((item) => ({
-      title: item.title,
-      poster: item.cover,
-      rate: item.rate,
-    }));
-
-    const response: DoubanResponse = {
-      code: 200,
-      message: "获取成功",
-      list: list,
-    };
-    const cacheTime = getCacheTime();
-    res.setHeader("Cache-Control", `public, max-age=${cacheTime}`);
-    res.json(response);
-  } catch (error) {
-    res.status(500).json({
-      error: "获取豆瓣数据失败",
-      details: (error as Error).message,
-    });
-  }
-});
-
-export default router;

backend/src/routes/image-proxy.ts

@@ -1,43 +0,0 @@
-import { Router, Request, Response } from "express";
-import { Readable } from "node:stream";
-
-const router = Router();
-
-router.get("/", async (req: Request, res: Response) => {
-  const imageUrl = req.query.url as string;
-
-  if (!imageUrl) {
-    return res.status(400).send("Missing image URL");
-  }
-
-  try {
-    const imageResponse = await fetch(imageUrl, {
-      headers: {
-        Referer: "https://movie.douban.com/",
-        "User-Agent":
-          "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36",
-      },
-    });
-
-    if (!imageResponse.ok) {
-      return res.status(imageResponse.status).send(imageResponse.statusText);
-    }
-
-    const contentType = imageResponse.headers.get("content-type");
-    if (contentType) {
-      res.setHeader("Content-Type", contentType);
-    }
-
-    if (imageResponse.body) {
-      const nodeStream = Readable.fromWeb(imageResponse.body as any);
-      nodeStream.pipe(res);
-    } else {
-      res.status(500).send("Image response has no body");
-    }
-  } catch (error) {
-    console.error("Image proxy error:", error);
-    res.status(500).send("Error fetching image");
-  }
-});
-
-export default router;

backend/src/routes/index.ts

@@ -1,14 +0,0 @@
-import { Router } from "express";
-import searchRouter from "./search";
-import detailRouter from "./detail";
-import doubanRouter from "./douban";
-import imageProxyRouter from "./image-proxy";
-
-const router = Router();
-
-router.use("/search", searchRouter);
-router.use("/detail", detailRouter);
-router.use("/douban", doubanRouter);
-router.use("/image-proxy", imageProxyRouter);
-
-export default router;

backend/src/routes/search.ts

@@ -1,270 +0,0 @@
-import { Router, Request, Response } from "express";
-import { API_CONFIG, ApiSite, getApiSites, getCacheTime } from "../config";
-import { cleanHtmlTags } from "../utils";
-
-const router = Router();
-
-// 根据环境变量决定最大搜索页数，默认 5
-const MAX_SEARCH_PAGES: number = Number(process.env.SEARCH_MAX_PAGE) || 5;
-
-export interface SearchResult {
-  id: string;
-  title: string;
-  poster: string;
-  episodes: string[];
-  source: string;
-  source_name: string;
-  class?: string;
-  year: string;
-  desc?: string;
-  type_name?: string;
-}
-
-interface ApiSearchItem {
-  vod_id: string;
-  vod_name: string;
-  vod_pic: string;
-  vod_remarks?: string;
-  vod_play_url?: string;
-  vod_class?: string;
-  vod_year?: string;
-  vod_content?: string;
-  type_name?: string;
-}
-
-async function searchFromApi(
-  apiSite: ApiSite,
-  query: string
-): Promise<SearchResult[]> {
-  try {
-    const apiBaseUrl = apiSite.api;
-    const apiUrl =
-      apiBaseUrl + API_CONFIG.search.path + encodeURIComponent(query);
-    const apiName = apiSite.name;
-
-    // 添加超时处理
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), 8000);
-
-    const response = await fetch(apiUrl, {
-      headers: API_CONFIG.search.headers,
-      signal: controller.signal,
-    });
-
-    clearTimeout(timeoutId);
-
-    if (!response.ok) {
-      return [];
-    }
-
-    const data = await response.json();
-
-    console.log(
-      "apiUrl",
-      apiSite.name,
-      "response status",
-      response.ok,
-      "response data",
-      data.list.length
-    );
-
-    if (
-      !data ||
-      !data.list ||
-      !Array.isArray(data.list) ||
-      data.list.length === 0
-    ) {
-      return [];
-    }
-    // 处理第一页结果
-    const results = data.list.map((item: ApiSearchItem) => {
-      let episodes: string[] = [];
-
-      // 使用正则表达式从 vod_play_url 提取 m3u8 链接
-      if (item.vod_play_url) {
-        const m3u8Regex = /\$(https?:\/\/[^"'\s]+?\.m3u8)/g;
-        // 先用 $$$ 分割
-        const vod_play_url_array = item.vod_play_url.split("$$$");
-        // 对每个分片做匹配，取匹配到最多的作为结果
-        vod_play_url_array.forEach((url: string) => {
-          const matches = url.match(m3u8Regex) || [];
-          if (matches.length > episodes.length) {
-            episodes = matches;
-          }
-        });
-      }
-
-      episodes = Array.from(new Set(episodes)).map((link: string) => {
-        link = link.substring(1); // 去掉开头的 $
-        const parenIndex = link.indexOf("(");
-        return parenIndex > 0 ? link.substring(0, parenIndex) : link;
-      });
-
-      return {
-        id: item.vod_id,
-        title: item.vod_name,
-        poster: item.vod_pic,
-        episodes,
-        source: apiSite.key,
-        source_name: apiName,
-        class: item.vod_class,
-        year: item.vod_year ? item.vod_year.match(/\d{4}/)?.[0] || "" : "",
-        desc: cleanHtmlTags(item.vod_content || ""),
-        type_name: item.type_name,
-      };
-    });
-
-    // 获取总页数
-    const pageCount = data.pagecount || 1;
-    // 确定需要获取的额外页数
-    const pagesToFetch = Math.min(pageCount - 1, MAX_SEARCH_PAGES - 1);
-
-    // 如果有额外页数，获取更多页的结果
-    if (pagesToFetch > 0) {
-      const additionalPagePromises = [];
-
-      for (let page = 2; page <= pagesToFetch + 1; page++) {
-        const pageUrl =
-          apiBaseUrl +
-          API_CONFIG.search.pagePath
-            .replace("{query}", encodeURIComponent(query))
-            .replace("{page}", page.toString());
-
-        const pagePromise = (async () => {
-          try {
-            const pageController = new AbortController();
-            const pageTimeoutId = setTimeout(
-              () => pageController.abort(),
-              8000
-            );
-
-            const pageResponse = await fetch(pageUrl, {
-              headers: API_CONFIG.search.headers,
-              signal: pageController.signal,
-            });
-
-            clearTimeout(pageTimeoutId);
-
-            if (!pageResponse.ok) return [];
-
-            const pageData = await pageResponse.json();
-
-            if (!pageData || !pageData.list || !Array.isArray(pageData.list))
-              return [];
-
-            return pageData.list.map((item: ApiSearchItem) => {
-              let episodes: string[] = [];
-
-              if (item.vod_play_url) {
-                const m3u8Regex = /\$(https?:\/\/[^"'\s]+?\.m3u8)/g;
-                episodes = item.vod_play_url.match(m3u8Regex) || [];
-              }
-
-              episodes = Array.from(new Set(episodes)).map((link: string) => {
-                link = link.substring(1); // 去掉开头的 $
-                const parenIndex = link.indexOf("(");
-                return parenIndex > 0 ? link.substring(0, parenIndex) : link;
-              });
-
-              return {
-                id: item.vod_id,
-                title: item.vod_name,
-                poster: item.vod_pic,
-                episodes,
-                source: apiSite.key,
-                source_name: apiName,
-                class: item.vod_class,
-                year: item.vod_year
-                  ? item.vod_year.match(/\d{4}/)?.[0] || ""
-                  : "",
-                desc: cleanHtmlTags(item.vod_content || ""),
-                type_name: item.type_name,
-              };
-            });
-          } catch (error) {
-            return [];
-          }
-        })();
-
-        additionalPagePromises.push(pagePromise);
-      }
-
-      const additionalResults = await Promise.all(additionalPagePromises);
-
-      additionalResults.forEach((pageResults) => {
-        if (pageResults.length > 0) {
-          results.push(...pageResults);
-        }
-      });
-    }
-
-    return results;
-  } catch (error) {
-    return [];
-  }
-}
-
-router.get("/", async (req: Request, res: Response) => {
-  const query = req.query.q as string;
-
-  if (!query) {
-    const cacheTime = getCacheTime();
-    res.setHeader("Cache-Control", `public, max-age=${cacheTime}`);
-    return res.json({ results: [] });
-  }
-
-  const apiSites = getApiSites();
-  const searchPromises = apiSites.map((site) => searchFromApi(site, query));
-
-  try {
-    const results = await Promise.all(searchPromises);
-    const flattenedResults = results.flat();
-    const cacheTime = getCacheTime();
-
-    res.setHeader("Cache-Control", `public, max-age=${cacheTime}`);
-    res.json({ results: flattenedResults });
-  } catch (error) {
-    res.status(500).json({ error: "搜索失败" });
-  }
-});
-
-// 按资源 url 单个获取数据
-router.get("/one", async (req: Request, res: Response) => {
-  const { resourceId, q } = req.query;
-
-  if (!resourceId || !q) {
-    return res.status(400).json({ error: "resourceId and q are required" });
-  }
-
-  const apiSites = getApiSites();
-  const apiSite = apiSites.find((site) => site.key === (resourceId as string));
-
-  if (!apiSite) {
-    return res.status(404).json({ error: "Resource not found" });
-  }
-
-  try {
-    const results = await searchFromApi(apiSite, q as string);
-    const result = results.filter((r) => r.title === (q as string));
-
-    if (results) {
-      const cacheTime = getCacheTime();
-      res.setHeader("Cache-Control", `public, max-age=${cacheTime}`);
-      res.json({results: result});
-    } else {
-      res.status(404).json({ error: "Resource not found with the given query" });
-    }
-  } catch (error) {
-    res.status(500).json({ error: "Failed to fetch resource details" });
-  }
-});
-
-// 获取所有可用的资源列表
-router.get("/resources", async (req: Request, res: Response) => {
-  const apiSites = getApiSites();
-  const cacheTime = getCacheTime();
-  res.setHeader("Cache-Control", `public, max-age=${cacheTime}`);
-  res.json(apiSites);
-});
-
-export default router;

backend/src/types/index.ts

@@ -1,33 +0,0 @@
-// Data structure for play records
-export interface PlayRecord {
-  title: string;
-  source_name: string;
-  cover: string;
-  index: number; // Episode number
-  total_episodes: number; // Total number of episodes
-  play_time: number; // Play progress in seconds
-  total_time: number; // Total duration in seconds
-  save_time: number; // Timestamp of when the record was saved
-  user_id: number; // User ID, always 0 in this version
-}
-
-// You can add other shared types here
-export interface VideoDetail {
-  code: number;
-  episodes: string[];
-  detailUrl: string;
-  videoInfo: {
-    title: string;
-    cover: string;
-    desc: string;
-    source_name: string;
-    source: string;
-    id: string;
-    type?: string;
-    year?: string;
-    area?: string;
-    director?: string;
-    actor?: string;
-    remarks?: string;
-  };
-}

backend/src/utils/index.ts

@@ -1,10 +0,0 @@
-export function cleanHtmlTags(text: string): string {
-  if (!text) return "";
-  return text
-    .replace(/<[^>]+>/g, "\n") // 将 HTML 标签替换为换行
-    .replace(/\n+/g, "\n") // 将多个连续换行合并为一个
-    .replace(/[ \t]+/g, " ") // 将多个连续空格和制表符合并为一个空格，但保留换行符
-    .replace(/^\n+|\n+$/g, "") // 去掉首尾换行
-    .replace(/&nbsp;/g, " ") // 将 &nbsp; 替换为空格
-    .trim(); // 去掉首尾空格
-}

backend/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "CommonJS",
-    "rootDir": "./src",
-    "outDir": "./dist",
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "skipLibCheck": true
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "**/*.spec.ts"]
-}

backend/vercel.json

@@ -1,18 +0,0 @@
-{
-  "version": 2,
-  "builds": [
-    {
-      "src": "src/index.ts",
-      "use": "@vercel/node",
-      "config": {
-        "includeFiles": ["./config.json"]
-      }
-    }
-  ],
-  "routes": [
-    {
-      "src": "/(.*)",
-      "dest": "src/index.ts"
-    }
-  ]
-}

components/CustomScrollView.tsx

@@ -0,0 +1,169 @@
+import React, { useCallback } from "react";
+import { View, StyleSheet, ScrollView, ActivityIndicator } 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; // 如果不提供，将使用响应式默认值
+  loading?: boolean;
+  loadingMore?: boolean;
+  error?: string | null;
+  onEndReached?: () => void;
+  loadMoreThreshold?: number;
+  emptyMessage?: string;
+  ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null;
+}
+
+const CustomScrollView: React.FC<CustomScrollViewProps> = ({
+  data,
+  renderItem,
+  numColumns, // 现在可选，如果不提供将使用响应式默认值
+  loading = false,
+  loadingMore = false,
+  error = null,
+  onEndReached,
+  loadMoreThreshold = 200,
+  emptyMessage = "暂无内容",
+  ListFooterComponent,
+}) => {
+  const responsiveConfig = useResponsiveLayout();
+  const commonStyles = getCommonResponsiveStyles(responsiveConfig);
+  
+  // 使用响应式列数，如果没有明确指定的话
+  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;
+
+      if (isCloseToBottom && !loadingMore && onEndReached) {
+        onEndReached();
+      }
+    },
+    [onEndReached, loadingMore, loadMoreThreshold]
+  );
+
+  const renderFooter = () => {
+    if (ListFooterComponent) {
+      if (React.isValidElement(ListFooterComponent)) {
+        return ListFooterComponent;
+      } else if (typeof ListFooterComponent === "function") {
+        const Component = ListFooterComponent as React.ComponentType<any>;
+        return <Component />;
+      }
+      return null;
+    }
+    if (loadingMore) {
+      return <ActivityIndicator style={{ marginVertical: 20 }} size="large" />;
+    }
+    return null;
+  };
+
+  if (loading) {
+    return (
+      <View style={commonStyles.center}>
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={commonStyles.center}>
+        <ThemedText type="subtitle" style={{ padding: responsiveConfig.spacing }}>
+          {error}
+        </ThemedText>
+      </View>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <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-between",
+    },
+    partialRowContainer: {
+      justifyContent: "flex-start",
+    },
+    itemContainer: {
+      width: responsiveConfig.cardWidth,
+    },
+    itemWithMargin: {
+      width: responsiveConfig.cardWidth,
+      marginRight: responsiveConfig.spacing,
+    },
+  });
+
+  return (
+    <ScrollView 
+      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;
+                  
+                  return (
+                    <View key={actualIndex} style={isFullRow ? dynamicStyles.itemContainer : itemStyle}>
+                      {renderItem({ item, index: actualIndex })}
+                    </View>
+                  );
+                })}
+              </View>
+            );
+          })}
+          {renderFooter()}
+        </>
+      ) : (
+        <View style={commonStyles.center}>
+          <ThemedText>{emptyMessage}</ThemedText>
+        </View>
+      )}
+    </ScrollView>
+  );
+
+};
+
+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/LivePlayer.tsx

@@ -0,0 +1,149 @@
+import React, { useRef, useState, useEffect } from "react";
+import { View, StyleSheet, Text, ActivityIndicator } from "react-native";
+import { Video, ResizeMode, AVPlaybackStatus } from "expo-av";
+import { useKeepAwake } from "expo-keep-awake";
+
+interface LivePlayerProps {
+  streamUrl: string | null;
+  channelTitle?: string | null;
+  onPlaybackStatusUpdate: (status: AVPlaybackStatus) => void;
+}
+
+const PLAYBACK_TIMEOUT = 15000; // 15 seconds
+
+export default function LivePlayer({ streamUrl, channelTitle, onPlaybackStatusUpdate }: LivePlayerProps) {
+  const video = useRef<Video>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isTimeout, setIsTimeout] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  useKeepAwake();
+
+  useEffect(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    if (streamUrl) {
+      setIsLoading(true);
+      setIsTimeout(false);
+      timeoutRef.current = setTimeout(() => {
+        setIsTimeout(true);
+        setIsLoading(false);
+      }, PLAYBACK_TIMEOUT);
+    } else {
+      setIsLoading(false);
+      setIsTimeout(false);
+    }
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [streamUrl]);
+
+  const handlePlaybackStatusUpdate = (status: AVPlaybackStatus) => {
+    if (status.isLoaded) {
+      if (status.isPlaying) {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        setIsLoading(false);
+        setIsTimeout(false);
+      } else if (status.isBuffering) {
+        setIsLoading(true);
+      }
+    } else {
+      if (status.error) {
+        setIsLoading(false);
+        setIsTimeout(true);
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+      }
+    }
+    onPlaybackStatusUpdate(status);
+  };
+
+  if (!streamUrl) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.messageText}>按向下键选择频道</Text>
+      </View>
+    );
+  }
+
+  if (isTimeout) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.messageText}>加载失败，请重试</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Video
+        ref={video}
+        style={styles.video}
+        source={{
+          uri: streamUrl,
+        }}
+        resizeMode={ResizeMode.CONTAIN}
+        shouldPlay
+        onPlaybackStatusUpdate={handlePlaybackStatusUpdate}
+        onError={(e) => {
+          setIsTimeout(true);
+          setIsLoading(false);
+        }}
+      />
+      {isLoading && (
+        <View style={styles.loadingOverlay}>
+          <ActivityIndicator size="large" color="#fff" />
+          <Text style={styles.messageText}>加载中...</Text>
+        </View>
+      )}
+      {channelTitle && !isLoading && !isTimeout && (
+        <View style={styles.overlay}>
+          <Text style={styles.title}>{channelTitle}</Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#000",
+  },
+  video: {
+    flex: 1,
+    alignSelf: "stretch",
+  },
+  overlay: {
+    position: "absolute",
+    top: 20,
+    left: 20,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    padding: 10,
+    borderRadius: 5,
+  },
+  title: {
+    color: "#fff",
+    fontSize: 18,
+  },
+  messageText: {
+    color: "#fff",
+    fontSize: 16,
+    marginTop: 10,
+  },
+  loadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+  },
+});

components/LoginModal.tsx

@@ -0,0 +1,191 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Modal, View, TextInput, StyleSheet, ActivityIndicator, Alert } 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";
+
+const LoginModal = () => {
+  const { isLoginModalVisible, hideLoginModal, checkLoginStatus } = useAuthStore();
+  const { serverConfig, apiBaseUrl } = useSettingsStore();
+  const { refreshPlayRecords } = useHomeStore();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const usernameInputRef = useRef<TextInput>(null);
+  const passwordInputRef = useRef<TextInput>(null);
+  const pathname = usePathname();
+  const isSettingsPage = pathname.includes("settings");
+
+  // Load saved credentials when modal opens
+  useEffect(() => {
+    if (isLoginModalVisible && !isSettingsPage) {
+      const loadCredentials = async () => {
+        const savedCredentials = await LoginCredentialsManager.get();
+        if (savedCredentials) {
+          setUsername(savedCredentials.username);
+          setPassword(savedCredentials.password);
+        }
+      };
+      loadCredentials();
+    }
+  }, [isLoginModalVisible, isSettingsPage]);
+
+  // Focus management with better TV remote handling
+  useEffect(() => {
+    if (isLoginModalVisible && !isSettingsPage) {
+      const isUsernameVisible = serverConfig?.StorageType !== "localstorage";
+
+      // Use a small delay to ensure the modal is fully rendered
+      const focusTimeout = setTimeout(() => {
+        if (isUsernameVisible) {
+          usernameInputRef.current?.focus();
+        } else {
+          passwordInputRef.current?.focus();
+        }
+      }, 100);
+
+      return () => clearTimeout(focusTimeout);
+    }
+  }, [isLoginModalVisible, serverConfig, isSettingsPage]);
+
+  const handleLogin = async () => {
+    const isLocalStorage = serverConfig?.StorageType === "localstorage";
+    if (!password || (!isLocalStorage && !username)) {
+      Toast.show({ type: "error", text1: "请输入用户名和密码" });
+      return;
+    }
+    setIsLoading(true);
+    try {
+      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();
+
+      // Show disclaimer alert after successful login
+      Alert.alert(
+        "免责声明",
+        "本应用仅提供影视信息搜索服务，所有内容均来自第三方网站。本站不存储任何视频资源，不对任何内容的准确性、合法性、完整性负责。",
+        [{ text: "确定" }]
+      );
+    } catch (error) {
+      Toast.show({
+        type: "error",
+        text1: "登录失败",
+        text2: error instanceof Error ? error.message : "用户名或密码错误",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Handle navigation between inputs using returnKeyType
+  const handleUsernameSubmit = () => {
+    passwordInputRef.current?.focus();
+  };
+
+  return (
+    <Modal
+      transparent={true}
+      visible={isLoginModalVisible && !isSettingsPage}
+      animationType="fade"
+      onRequestClose={hideLoginModal}
+    >
+      <View style={styles.overlay}>
+        <ThemedView style={styles.container}>
+          <ThemedText style={styles.title}>需要登录</ThemedText>
+          <ThemedText style={styles.subtitle}>服务器需要验证您的身份</ThemedText>
+          {serverConfig?.StorageType !== "localstorage" && (
+            <TextInput
+              ref={usernameInputRef}
+              style={styles.input}
+              placeholder="请输入用户名"
+              placeholderTextColor="#888"
+              value={username}
+              onChangeText={setUsername}
+              returnKeyType="next"
+              onSubmitEditing={handleUsernameSubmit}
+              blurOnSubmit={false}
+            />
+          )}
+          <TextInput
+            ref={passwordInputRef}
+            style={styles.input}
+            placeholder="请输入密码"
+            placeholderTextColor="#888"
+            secureTextEntry
+            value={password}
+            onChangeText={setPassword}
+            returnKeyType="go"
+            onSubmitEditing={handleLogin}
+          />
+          <StyledButton
+            text={isLoading ? "" : "登录"}
+            onPress={handleLogin}
+            disabled={isLoading}
+            style={styles.button}
+            hasTVPreferredFocus={!serverConfig || serverConfig.StorageType === "localstorage"}
+          >
+            {isLoading && <ActivityIndicator color="#fff" />}
+          </StyledButton>
+        </ThemedView>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.6)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  container: {
+    width: "80%",
+    maxWidth: 400,
+    padding: 24,
+    borderRadius: 12,
+    alignItems: "center",
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: "bold",
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: "#ccc",
+    marginBottom: 20,
+    textAlign: "center",
+  },
+  input: {
+    width: "100%",
+    height: 50,
+    backgroundColor: "#333",
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    color: "#fff",
+    fontSize: 16,
+    marginBottom: 20,
+    borderWidth: 1,
+    borderColor: "#555",
+  },
+  button: {
+    width: "100%",
+    height: 50,
+  },
+});
+
+export default LoginModal;

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,22 +1,12 @@
-import React, { useCallback, useState } from "react";
-import { View, Text, StyleSheet, TouchableOpacity, Pressable } from "react-native";
-import { useRouter } from "expo-router";
-import { AVPlaybackStatus } from "expo-av";
-import {
-  Pause,
-  Play,
-  SkipForward,
-  List,
-  ChevronsRight,
-  ChevronsLeft,
-  Tv,
-  ArrowDownToDot,
-  ArrowUpFromDot,
-} from "lucide-react-native";
+import React from "react";
+import { View, Text, StyleSheet, Pressable } from "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";
 
 import usePlayerStore from "@/stores/playerStore";
+import useDetailStore from "@/stores/detailStore";
+import { useSources } from "@/stores/sourceStore";
 
 interface PlayerControlsProps {
   showControls: boolean;
@@ -24,32 +14,34 @@ interface PlayerControlsProps {
 }
 
 export const PlayerControls: React.FC<PlayerControlsProps> = ({ showControls, setShowControls }) => {
-  const router = useRouter();
   const {
-    detail,
     currentEpisodeIndex,
-    currentSourceIndex,
+    episodes,
     status,
     isSeeking,
     seekPosition,
     progressPosition,
-    seek,
+    playbackRate,
     togglePlayPause,
     playEpisode,
     setShowEpisodeModal,
     setShowSourceModal,
+    setShowSpeedModal,
     setIntroEndTime,
     setOutroStartTime,
     introEndTime,
     outroStartTime,
   } = usePlayerStore();
 
-  const videoTitle = detail?.videoInfo?.title || "";
-  const currentEpisode = detail?.episodes[currentEpisodeIndex];
+  const { detail } = useDetailStore();
+  const resources = useSources();
+
+  const videoTitle = detail?.title || "";
+  const currentEpisode = episodes[currentEpisodeIndex];
   const currentEpisodeTitle = currentEpisode?.title;
-  const currentSource = detail?.sources[currentSourceIndex];
+  const currentSource = resources.find((r) => r.source === detail?.source);
   const currentSourceName = currentSource?.source_name;
-  const hasNextEpisode = currentEpisodeIndex < (detail?.episodes.length || 0) - 1;
+  const hasNextEpisode = currentEpisodeIndex < (episodes.length || 0) - 1;
 
   const formatTime = (milliseconds: number) => {
     if (!milliseconds) return "00:00";
@@ -119,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>
@@ -178,7 +174,7 @@ const styles = StyleSheet.create({
     position: "absolute",
     left: 0,
     height: 8,
-    backgroundColor: "#ff0000",
+    backgroundColor: "#fff",
     borderRadius: 4,
   },
   progressBarTouchable: {

components/RemoteControlModal.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { Modal, View, StyleSheet } from "react-native";
+import QRCode from "react-native-qrcode-svg";
+import { useRemoteControlStore } from "@/stores/remoteControlStore";
+import { ThemedView } from "./ThemedView";
+import { ThemedText } from "./ThemedText";
+import { StyledButton } from "./StyledButton";
+
+export const RemoteControlModal: React.FC = () => {
+  const { isModalVisible, hideModal, serverUrl, error } = useRemoteControlStore();
+
+  return (
+    <Modal animationType="fade" transparent={true} visible={isModalVisible} onRequestClose={hideModal}>
+      <View style={styles.modalContainer}>
+        <ThemedView style={styles.modalContent}>
+          <ThemedText style={styles.title}>手机扫码</ThemedText>
+          <View style={styles.qrContainer}>
+            {serverUrl ? (
+              <>
+                <QRCode value={serverUrl} size={200} backgroundColor="white" color="black" />
+              </>
+            ) : (
+              <ThemedText style={styles.statusText}>{error ? `错误: ${error}` : "正在生成二维码..."}</ThemedText>
+            )}
+          </View>
+          <ThemedText style={styles.instructions}>
+            使用手机扫描上方二维码，即可在浏览器中向 TV 发送消息。或者访问{serverUrl}
+          </ThemedText>
+          <StyledButton text="关闭" onPress={hideModal} style={styles.button} variant="primary" />
+        </ThemedView>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+  },
+  modalContent: {
+    width: "85%",
+    maxWidth: 400,
+    padding: 24,
+    borderRadius: 12,
+    alignItems: "center",
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "bold",
+    marginBottom: 10,
+    paddingTop: 10,
+  },
+  qrContainer: {
+    width: 220,
+    height: 220,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#f0f0f0",
+    borderRadius: 8,
+    marginBottom: 20,
+  },
+  statusText: {
+    textAlign: "center",
+    fontSize: 16,
+  },
+  serverUrlText: {
+    marginTop: 10,
+    fontSize: 12,
+  },
+  instructions: {
+    textAlign: "center",
+    marginBottom: 24,
+    fontSize: 16,
+    color: "#ccc",
+  },
+  button: {
+    width: "100%",
+  },
+});

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,373 @@
+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";
+
+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) {
+              console.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/SeekingBar.tsx

@@ -80,7 +80,7 @@ const styles = StyleSheet.create({
   },
   seekingBarFilled: {
     height: "100%",
-    backgroundColor: "#ff0000",
+    backgroundColor: "#fff",
     borderRadius: 2.5,
   },
 });

components/SettingsModal.tsx

@@ -1,118 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import { Modal, View, Text, TextInput, StyleSheet } from "react-native";
-import { ThemedText } from "./ThemedText";
-import { ThemedView } from "./ThemedView";
-import { useSettingsStore } from "@/stores/settingsStore";
-import { StyledButton } from "./StyledButton";
-
-export const SettingsModal: React.FC = () => {
-  const { isModalVisible, hideModal, apiBaseUrl, setApiBaseUrl, saveSettings, loadSettings } = useSettingsStore();
-
-  const [isInputFocused, setIsInputFocused] = useState(false);
-  const colorScheme = "dark"; // Replace with useColorScheme() if needed
-  const inputRef = useRef<TextInput>(null);
-
-  useEffect(() => {
-    if (isModalVisible) {
-      loadSettings();
-      const timer = setTimeout(() => {
-        inputRef.current?.focus();
-      }, 200);
-      return () => clearTimeout(timer);
-    }
-  }, [isModalVisible, loadSettings]);
-
-  const handleSave = () => {
-    saveSettings();
-  };
-
-  const styles = StyleSheet.create({
-    modalContainer: {
-      flex: 1,
-      justifyContent: "center",
-      alignItems: "center",
-      backgroundColor: "rgba(0, 0, 0, 0.6)",
-    },
-    modalContent: {
-      width: "80%",
-      maxWidth: 500,
-      padding: 24,
-      borderRadius: 12,
-      elevation: 10,
-    },
-    title: {
-      fontSize: 24,
-      fontWeight: "bold",
-      marginBottom: 20,
-      textAlign: "center",
-    },
-    input: {
-      height: 50,
-      borderWidth: 2,
-      borderRadius: 8,
-      paddingHorizontal: 15,
-      fontSize: 16,
-      marginBottom: 24,
-      backgroundColor: colorScheme === "dark" ? "#3a3a3c" : "#f0f0f0",
-      color: colorScheme === "dark" ? "white" : "black",
-      borderColor: "transparent",
-    },
-    inputFocused: {
-      borderColor: "#007AFF",
-      shadowColor: "#007AFF",
-      shadowOffset: { width: 0, height: 0 },
-      shadowOpacity: 0.8,
-      shadowRadius: 10,
-      elevation: 5,
-    },
-    buttonContainer: {
-      flexDirection: "row",
-      justifyContent: "space-around",
-    },
-    button: {
-      flex: 1,
-      marginHorizontal: 8,
-    },
-    buttonText: {
-      fontSize: 18,
-    },
-  });
-
-  return (
-    <Modal animationType="fade" transparent={true} visible={isModalVisible} onRequestClose={hideModal}>
-      <View style={styles.modalContainer}>
-        <ThemedView style={styles.modalContent}>
-          <ThemedText style={styles.title}>设置</ThemedText>
-          <TextInput
-            ref={inputRef}
-            style={[styles.input, isInputFocused && styles.inputFocused]}
-            value={apiBaseUrl}
-            onChangeText={setApiBaseUrl}
-            placeholder="输入 API 地址"
-            placeholderTextColor={colorScheme === "dark" ? "#888" : "#555"}
-            autoCapitalize="none"
-            autoCorrect={false}
-            onFocus={() => setIsInputFocused(true)}
-            onBlur={() => setIsInputFocused(false)}
-          />
-          <View style={styles.buttonContainer}>
-            <StyledButton
-              text="取消"
-              onPress={hideModal}
-              style={styles.button}
-              textStyle={styles.buttonText}
-              variant="default"
-            />
-            <StyledButton
-              text="保存"
-              onPress={handleSave}
-              style={styles.button}
-              textStyle={styles.buttonText}
-              variant="primary"
-            />
-          </View>
-        </ThemedView>
-      </View>
-    </Modal>
-  );
-};

components/SourceSelectionModal.tsx

@@ -1,14 +1,28 @@
 import React from "react";
 import { View, Text, StyleSheet, Modal, FlatList } from "react-native";
 import { StyledButton } from "./StyledButton";
+import useDetailStore from "@/stores/detailStore";
 import usePlayerStore from "@/stores/playerStore";
 
 export const SourceSelectionModal: React.FC = () => {
-  const { showSourceModal, sources, currentSourceIndex, switchSource, setShowSourceModal } = usePlayerStore();
+  const { showSourceModal, setShowSourceModal, loadVideo, currentEpisodeIndex, status } = usePlayerStore();
+  const { searchResults, detail, setDetail } = useDetailStore();
 
   const onSelectSource = (index: number) => {
-    if (index !== currentSourceIndex) {
-      switchSource(index);
+    console.log("onSelectSource", index, searchResults[index].source, detail?.source);
+    if (searchResults[index].source !== detail?.source) {
+      const newDetail = searchResults[index];
+      setDetail(newDetail);
+      
+      // Reload the video with the new source, preserving current position
+      const currentPosition = status?.isLoaded ? status.positionMillis : undefined;
+      loadVideo({
+        source: newDetail.source,
+        id: newDetail.id.toString(),
+        episodeIndex: currentEpisodeIndex,
+        title: newDetail.title,
+        position: currentPosition
+      });
     }
     setShowSourceModal(false);
   };
@@ -23,16 +37,16 @@ export const SourceSelectionModal: React.FC = () => {
         <View style={styles.modalContent}>
           <Text style={styles.modalTitle}>选择播放源</Text>
           <FlatList
-            data={sources}
+            data={searchResults}
             numColumns={3}
             contentContainerStyle={styles.sourceList}
-            keyExtractor={(item, index) => `source-${item.source}-${item.id}-${index}`}
+            keyExtractor={(item, index) => `source-${item.source}-${index}`}
             renderItem={({ item, index }) => (
               <StyledButton
                 text={item.source_name}
                 onPress={() => onSelectSource(index)}
-                isSelected={currentSourceIndex === index}
-                hasTVPreferredFocus={currentSourceIndex === index}
+                isSelected={detail?.source === item.source}
+                hasTVPreferredFocus={detail?.source === item.source}
                 style={styles.sourceItem}
                 textStyle={styles.sourceItemText}
               />
@@ -70,7 +84,9 @@ const styles = StyleSheet.create({
   sourceItem: {
     paddingVertical: 2,
     margin: 4,
-    width: "31%",
+    marginLeft: 10,
+    marginRight: 8,
+    width: "30%",
   },
   sourceItemText: {
     fontSize: 14,

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,8 @@
-import React from "react";
-import { Animated, Pressable, StyleSheet, StyleProp, ViewStyle, PressableProps, TextStyle } from "react-native";
+import React, { forwardRef } from "react";
+import { Animated, Pressable, StyleSheet, StyleProp, ViewStyle, PressableProps, TextStyle, View } from "react-native";
 import { ThemedText } from "./ThemedText";
 import { Colors } from "@/constants/Colors";
-import { useButtonAnimation } from "@/hooks/useButtonAnimation";
+import { useButtonAnimation } from "@/hooks/useAnimation";
 
 interface StyledButtonProps extends PressableProps {
   children?: React.ReactNode;
@@ -13,133 +13,130 @@ interface StyledButtonProps extends PressableProps {
   textStyle?: StyleProp<TextStyle>;
 }
 
-export const StyledButton: React.FC<StyledButtonProps> = ({
-  children,
-  text,
-  variant = "default",
-  isSelected = false,
-  style,
-  textStyle,
-  ...rest
-}) => {
-  const colorScheme = "dark";
-  const colors = Colors[colorScheme];
-  const [isFocused, setIsFocused] = React.useState(false);
-  const animationStyle = useButtonAnimation(isFocused);
+export const StyledButton = forwardRef<View, StyledButtonProps>(
+  ({ children, text, variant = "default", isSelected = false, style, textStyle, ...rest }, ref) => {
+    const colorScheme = "dark";
+    const colors = Colors[colorScheme];
+    const [isFocused, setIsFocused] = React.useState(false);
+    const animationStyle = useButtonAnimation(isFocused);
 
-  const variantStyles = {
-    default: StyleSheet.create({
+    const variantStyles = {
+      default: StyleSheet.create({
+        button: {
+          backgroundColor: colors.border,
+        },
+        text: {
+          color: colors.text,
+        },
+        selectedButton: {
+          backgroundColor: colors.primary,
+        },
+        focusedButton: {
+          borderColor: colors.primary,
+        },
+        selectedText: {
+          color: Colors.dark.text,
+        },
+      }),
+      primary: StyleSheet.create({
+        button: {
+          backgroundColor: "transparent",
+        },
+        text: {
+          color: colors.text,
+        },
+        focusedButton: {
+          backgroundColor: colors.primary,
+          borderColor: colors.background,
+        },
+        selectedButton: {
+          backgroundColor: colors.primary,
+        },
+        selectedText: {
+          color: colors.link,
+        },
+      }),
+      ghost: StyleSheet.create({
+        button: {
+          backgroundColor: "transparent",
+        },
+        text: {
+          color: colors.text,
+        },
+        focusedButton: {
+          backgroundColor: "rgba(119, 119, 119, 0.2)",
+          borderColor: colors.primary,
+        },
+        selectedButton: {},
+        selectedText: {},
+      }),
+    };
+
+    const styles = StyleSheet.create({
       button: {
-        backgroundColor: colors.border,
+        paddingHorizontal: 16,
+        paddingVertical: 10,
+        borderRadius: 8,
+        borderWidth: 2,
+        borderColor: "transparent",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
       },
-      text: {
-        color: colors.text,
+      focusedButton: {
+        backgroundColor: colors.link,
+        borderColor: colors.background,
+        elevation: 5,
+        shadowColor: colors.link,
+        shadowOffset: { width: 0, height: 0 },
+        shadowOpacity: 1,
+        shadowRadius: 15,
       },
       selectedButton: {
         backgroundColor: colors.tint,
       },
-      focusedButton: {
-        backgroundColor: colors.link,
-        borderColor: colors.background,
+      text: {
+        fontSize: 16,
+        fontWeight: "500",
+        color: colors.text,
       },
       selectedText: {
         color: Colors.dark.text,
       },
-    }),
-    primary: StyleSheet.create({
-      button: {
-        backgroundColor: "transparent",
-      },
-      text: {
-        color: colors.text,
-      },
-      focusedButton: {
-        backgroundColor: colors.link,
-        borderColor: colors.background,
-      },
-      selectedButton: {
-        backgroundColor: "rgba(0, 122, 255, 0.3)",
-      },
-      selectedText: {
-        color: colors.link,
-      },
-    }),
-    ghost: StyleSheet.create({
-      button: {
-        backgroundColor: "transparent",
-      },
-      text: {
-        color: colors.text,
-      },
-      focusedButton: {
-        backgroundColor: "rgba(119, 119, 119, 0.9)",
-      },
-      selectedButton: {},
-      selectedText: {},
-    }),
-  };
+    });
 
-  const styles = StyleSheet.create({
-    button: {
-      paddingHorizontal: 16,
-      paddingVertical: 10,
-      borderRadius: 8,
-      borderWidth: 2,
-      borderColor: "transparent",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    focusedButton: {
-      backgroundColor: colors.link,
-      borderColor: colors.background,
-      elevation: 5,
-      shadowColor: colors.link,
-      shadowOffset: { width: 0, height: 0 },
-      shadowOpacity: 1,
-      shadowRadius: 15,
-    },
-    selectedButton: {
-      backgroundColor: colors.tint,
-    },
-    text: {
-      fontSize: 16,
-      fontWeight: "500",
-      color: colors.text,
-    },
-    selectedText: {
-      color: Colors.dark.text,
-    },
-  });
+    return (
+      <Animated.View style={[animationStyle, style]}>
+        <Pressable
+          ref={ref}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          style={({ focused }) => [
+            styles.button,
+            variantStyles[variant].button,
+            isSelected && (variantStyles[variant].selectedButton ?? styles.selectedButton),
+            focused && (variantStyles[variant].focusedButton ?? styles.focusedButton),
+          ]}
+          {...rest}
+        >
+          {text ? (
+            <ThemedText
+              style={[
+                styles.text,
+                variantStyles[variant].text,
+                isSelected && (variantStyles[variant].selectedText ?? styles.selectedText),
+                textStyle,
+              ]}
+            >
+              {text}
+            </ThemedText>
+          ) : (
+            children
+          )}
+        </Pressable>
+      </Animated.View>
+    );
+  }
+);
 
-  return (
-    <Animated.View style={[animationStyle, style]}>
-      <Pressable
-        onFocus={() => setIsFocused(true)}
-        onBlur={() => setIsFocused(false)}
-        style={({ focused }) => [
-          styles.button,
-          variantStyles[variant].button,
-          isSelected && (variantStyles[variant].selectedButton ?? styles.selectedButton),
-          focused && (variantStyles[variant].focusedButton ?? styles.focusedButton),
-        ]}
-        {...rest}
-      >
-        {text ? (
-          <ThemedText
-            style={[
-              styles.text,
-              variantStyles[variant].text,
-              isSelected && (variantStyles[variant].selectedText ?? styles.selectedText),
-              textStyle,
-            ]}
-          >
-            {text}
-          </ThemedText>
-        ) : (
-          children
-        )}
-      </Pressable>
-    </Animated.View>
-  );
-};
+StyledButton.displayName = "StyledButton";

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,285 @@
+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";
+
+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) {
+              console.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,334 @@
+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";
+
+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) {
+              console.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,13 +1,13 @@
-import React, { useState, useEffect, useCallback, useRef } from "react";
-import { View, Text, Image, StyleSheet, Pressable, 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, TouchableOpacity, Alert, Animated } from "react-native";
 import { useRouter } from "expo-router";
-import { Heart, Star, Play, Trash2 } from "lucide-react-native";
-import { FavoriteManager, PlayRecordManager } from "@/services/storage";
-import { API, api } from "@/services/api";
+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";
 
-interface VideoCardProps {
+interface VideoCardProps extends React.ComponentProps<typeof TouchableOpacity> {
   id: string;
   source: string;
   title: string;
@@ -24,167 +24,191 @@ interface VideoCardProps {
   api: API;
 }
 
-export default function VideoCard({
-  id,
-  source,
-  title,
-  poster,
-  year,
-  rate,
-  sourceName,
-  progress,
-  episodeIndex,
-  totalEpisodes,
-  onFocus,
-  onRecordDeleted,
-  api,
-  playTime,
-}: VideoCardProps) {
-  const router = useRouter();
-  const [isFocused, setIsFocused] = useState(false);
+const VideoCard = 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 longPressTriggered = useRef(false);
+    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 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, position: playTime },
-      });
-    } else {
-      router.push({
-        pathname: "/detail",
-        params: { source, q: title },
-      });
-    }
-  };
+    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(() => {
-    setIsFocused(true);
-    scale.value = withSpring(1.05, { damping: 15, stiffness: 200 });
-    onFocus?.();
-  }, [scale, onFocus]);
+    const handleFocus = useCallback(() => {
+      setIsFocused(true);
+      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);
-  }, [scale]);
+    const handleBlur = useCallback(() => {
+      setIsFocused(false);
+      Animated.spring(scale, {
+        toValue: 1.0,
+        useNativeDriver: true,
+      }).start();
+    }, [scale]);
 
-  const handleLongPress = () => {
-    // Only allow long press for items with progress (play records)
-    if (progress === undefined) return;
+    useEffect(() => {
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 400,
+        delay: Math.random() * 200, // 随机延迟创造交错效果
+        useNativeDriver: true,
+      }).start();
+    }, [fadeAnim]);
 
-    longPressTriggered.current = true;
+    const handleLongPress = () => {
+      // Only allow long press for items with progress (play records)
+      if (progress === undefined) return;
 
-    // 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);
+      longPressTriggered.current = true;
 
-            // Call the onRecordDeleted callback
-            if (onRecordDeleted) {
-              onRecordDeleted();
-            }
-            // 如果没有回调函数，则使用导航刷新作为备选方案
-            else if (router.canGoBack()) {
-              router.replace("/");
-            }
-          } catch (error) {
-            console.error("Failed to delete play record:", error);
-            Alert.alert("错误", "删除观看记录失败，请重试");
-          }
+      // 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);
 
-  // 是否是继续观看的视频
-  const isContinueWatching = progress !== undefined && progress > 0 && progress < 1;
+              // Call the onRecordDeleted callback
+              if (onRecordDeleted) {
+                onRecordDeleted();
+              }
+              // 如果没有回调函数，则使用导航刷新作为备选方案
+              else if (router.canGoBack()) {
+                router.replace("/");
+              }
+            } catch (error) {
+              console.info("Failed to delete play record:", error);
+              Alert.alert("错误", "删除观看记录失败，请重试");
+            }
+          },
+        },
+      ]);
+    };
 
-  return (
-    <Animated.View style={[styles.wrapper, animatedStyle]}>
-      <TouchableOpacity
-        onPress={handlePress}
-        onLongPress={handleLongPress}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        style={styles.pressable}
-        activeOpacity={1}
-        delayLongPress={1000}
-      >
-        <View style={styles.card}>
-          <Image source={{ uri: api.getImageProxyUrl(poster) }} style={styles.poster} />
-          {isFocused && (
-            <View style={styles.overlay}>
-              {isContinueWatching && (
-                <View style={styles.continueWatchingBadge}>
-                  <Play size={16} color="#ffffff" fill="#ffffff" />
-                  <ThemedText style={styles.continueWatchingText}>继续观看</ThemedText>
-                </View>
-              )}
-            </View>
-          )}
+    // 是否是继续观看的视频
+    const isContinueWatching = progress !== undefined && progress > 0 && progress < 1;
 
-          {/* 进度条 */}
-          {isContinueWatching && (
-            <View style={styles.progressContainer}>
-              <View style={[styles.progressBar, { width: `${(progress || 0) * 100}%` }]} />
-            </View>
-          )}
+    return (
+      <Animated.View style={[styles.wrapper, animatedStyle, { opacity: fadeAnim }]}>
+        <TouchableOpacity
+          onPress={handlePress}
+          onLongPress={handleLongPress}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          style={styles.pressable}
+          activeOpacity={1}
+          delayLongPress={1000}
+        >
+          <View style={styles.card}>
+            <Image source={{ uri: api.getImageProxyUrl(poster) }} style={styles.poster} />
+            {isFocused && (
+              <View style={styles.overlay}>
+                {isContinueWatching && (
+                  <View style={styles.continueWatchingBadge}>
+                    <Play size={16} color="#ffffff" fill="#ffffff" />
+                    <ThemedText style={styles.continueWatchingText}>继续观看</ThemedText>
+                  </View>
+                )}
+              </View>
+            )}
 
-          {rate && (
-            <View style={styles.ratingContainer}>
-              <Star size={12} color="#FFD700" fill="#FFD700" />
-              <ThemedText style={styles.ratingText}>{rate}</ThemedText>
-            </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={1}>{title}</ThemedText>
-          {isContinueWatching && (
-            <View style={styles.infoRow}>
-              <ThemedText style={styles.continueLabel}>
-                第{episodeIndex! + 1}集 已观看 {Math.round((progress || 0) * 100)}%
-              </ThemedText>
-            </View>
-          )}
-        </View>
-      </TouchableOpacity>
-    </Animated.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" />
+                <ThemedText style={styles.ratingText}>{rate}</ThemedText>
+              </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={1}>{title}</ThemedText>
+            {isContinueWatching && (
+              <View style={styles.infoRow}>
+                <ThemedText style={styles.continueLabel}>
+                  第{episodeIndex}集 已观看 {Math.round((progress || 0) * 100)}%
+                </ThemedText>
+              </View>
+            )}
+          </View>
+        </TouchableOpacity>
+      </Animated.View>
+    );
+  }
+);
+
+VideoCard.displayName = "VideoCard";
+
+export default VideoCard;
 
 const CARD_WIDTH = 160;
 const CARD_HEIGHT = 240;
@@ -210,6 +234,9 @@ const styles = StyleSheet.create({
   overlay: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: "rgba(0,0,0,0.3)",
+    borderColor: Colors.dark.primary,
+    borderWidth: 2,
+    borderRadius: 8,
     justifyContent: "center",
     alignItems: "center",
   },
@@ -248,9 +275,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",
@@ -291,17 +318,17 @@ const styles = StyleSheet.create({
     bottom: 0,
     left: 0,
     right: 0,
-    height: 3,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    height: 4,
+    backgroundColor: "rgba(0, 0, 0, 0.8)",
   },
   progressBar: {
-    height: 3,
-    backgroundColor: "#ff0000",
+    height: 4,
+    backgroundColor: Colors.dark.primary,
   },
   continueWatchingBadge: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: "rgba(255, 0, 0, 0.8)",
+    backgroundColor: Colors.dark.primary,
     paddingHorizontal: 10,
     paddingVertical: 5,
     borderRadius: 5,
@@ -313,7 +340,7 @@ const styles = StyleSheet.create({
     fontWeight: "bold",
   },
   continueLabel: {
-    color: "#ff5252",
+    color: Colors.dark.primary,
     fontSize: 12,
   },
 });

components/VideoLoadingAnimation.tsx

@@ -0,0 +1,334 @@
+import React, { useEffect, useRef } from "react";
+import { View, StyleSheet, Animated, Easing } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+
+interface VideoLoadingAnimationProps {
+  showProgressBar?: boolean;
+}
+
+const VideoLoadingAnimation: React.FC<VideoLoadingAnimationProps> = ({ showProgressBar = true }) => {
+  const floatAnim = useRef(new Animated.Value(0)).current;
+  const pulseAnim = useRef(new Animated.Value(0)).current;
+  const bounceAnims = [
+    useRef(new Animated.Value(0)).current,
+    useRef(new Animated.Value(0)).current,
+    useRef(new Animated.Value(0)).current,
+  ];
+  const progressAnim = useRef(new Animated.Value(0)).current;
+  const gradientAnim = useRef(new Animated.Value(0)).current;
+  const textFadeAnim = useRef(new Animated.Value(0)).current;
+  const shapeAnims = [
+    useRef(new Animated.Value(0)).current,
+    useRef(new Animated.Value(0)).current,
+    useRef(new Animated.Value(0)).current,
+    useRef(new Animated.Value(0)).current,
+  ];
+
+  useEffect(() => {
+    const floatAnimation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(floatAnim, {
+          toValue: -20,
+          duration: 1500,
+          useNativeDriver: true,
+          easing: Easing.inOut(Easing.ease),
+        }),
+        Animated.timing(floatAnim, {
+          toValue: 0,
+          duration: 1500,
+          useNativeDriver: true,
+          easing: Easing.inOut(Easing.ease),
+        }),
+      ])
+    );
+
+    const pulseAnimation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulseAnim, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: true,
+          easing: Easing.inOut(Easing.ease),
+        }),
+        Animated.timing(pulseAnim, {
+          toValue: 0,
+          duration: 1000,
+          useNativeDriver: true,
+          easing: Easing.inOut(Easing.ease),
+        }),
+      ])
+    );
+
+    const bounceAnimations = bounceAnims.map((anim, i) =>
+      Animated.loop(
+        Animated.sequence([
+          Animated.delay(i * 160),
+          Animated.timing(anim, {
+            toValue: 1,
+            duration: 700,
+            useNativeDriver: true,
+            easing: Easing.inOut(Easing.ease),
+          }),
+          Animated.timing(anim, {
+            toValue: 0,
+            duration: 700,
+            useNativeDriver: true,
+            easing: Easing.inOut(Easing.ease),
+          }),
+        ])
+      )
+    );
+
+    const progressAnimation = Animated.loop(
+      Animated.timing(progressAnim, {
+        toValue: 1,
+        duration: 4000,
+        useNativeDriver: false, // width animation not supported by native driver
+        easing: Easing.inOut(Easing.ease),
+      })
+    );
+
+    const gradientAnimation = Animated.loop(
+      Animated.timing(gradientAnim, {
+        toValue: 1,
+        duration: 2000,
+        useNativeDriver: false, // gradient animation not supported by native driver
+        easing: Easing.inOut(Easing.ease),
+      })
+    );
+
+    const textFadeAnimation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(textFadeAnim, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: true,
+          easing: Easing.inOut(Easing.ease),
+        }),
+        Animated.timing(textFadeAnim, {
+          toValue: 0,
+          duration: 1000,
+          useNativeDriver: true,
+          easing: Easing.inOut(Easing.ease),
+        }),
+      ])
+    );
+
+    const shapeAnimations = shapeAnims.map((anim, i) =>
+      Animated.loop(
+        Animated.sequence([
+          Animated.delay(i * 2000),
+          Animated.timing(anim, {
+            toValue: 1,
+            duration: 8000,
+            useNativeDriver: true,
+            easing: Easing.inOut(Easing.ease),
+          }),
+        ])
+      )
+    );
+
+    Animated.parallel([
+      floatAnimation,
+      pulseAnimation,
+      ...bounceAnimations,
+      progressAnimation,
+      gradientAnimation,
+      textFadeAnimation,
+      ...shapeAnimations,
+    ]).start();
+  }, []);
+
+  const animatedStyles = {
+    float: {
+      transform: [{ translateY: floatAnim }],
+    },
+    pulse: {
+      opacity: pulseAnim.interpolate({ inputRange: [0, 1], outputRange: [1, 0.7] }),
+      transform: [
+        { translateX: -12.5 },
+        { translateY: -15 },
+        {
+          scale: pulseAnim.interpolate({ inputRange: [0, 1], outputRange: [1, 1.1] }),
+        },
+      ],
+    },
+    bounce: bounceAnims.map((anim) => ({
+      transform: [{ scale: anim.interpolate({ inputRange: [0, 1], outputRange: [0.8, 1.2] }) }],
+      opacity: anim.interpolate({ inputRange: [0, 1], outputRange: [0.5, 1] }),
+    })),
+    progress: {
+      width: progressAnim.interpolate({
+        inputRange: [0, 0.7, 1],
+        outputRange: ["0%", "100%", "100%"],
+      }),
+    },
+    textFade: {
+      opacity: textFadeAnim.interpolate({ inputRange: [0, 1], outputRange: [0.6, 1] }),
+    },
+    shapes: shapeAnims.map((anim, i) => ({
+      transform: [
+        {
+          translateY: anim.interpolate({
+            inputRange: [0, 0.33, 0.66, 1],
+            outputRange: [0, -30, 10, 0],
+          }),
+        },
+        {
+          rotate: anim.interpolate({
+            inputRange: [0, 1],
+            outputRange: ["0deg", "360deg"],
+          }),
+        },
+      ],
+    })),
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.bgShapes}>
+        <Animated.View style={[styles.shape, styles.shape1, animatedStyles.shapes[0]]} />
+        <Animated.View style={[styles.shape, styles.shape2, animatedStyles.shapes[1]]} />
+        <Animated.View style={[styles.shape, styles.shape3, animatedStyles.shapes[2]]} />
+        <Animated.View style={[styles.shape, styles.shape4, animatedStyles.shapes[3]]} />
+      </View>
+      <View style={styles.loadingContainer}>
+        <Animated.View style={[styles.videoIcon, animatedStyles.float]}>
+          <View style={styles.videoFrame}>
+            <Animated.View style={[styles.playButton, animatedStyles.pulse]} />
+          </View>
+        </Animated.View>
+
+        {/* <View style={styles.loadingDots}>
+          <Animated.View style={[styles.dot, animatedStyles.bounce[0]]} />
+          <Animated.View style={[styles.dot, animatedStyles.bounce[1]]} />
+          <Animated.View style={[styles.dot, animatedStyles.bounce[2]]} />
+        </View> */}
+
+        {showProgressBar && (
+          <View style={styles.progressBar}>
+            <Animated.View style={[styles.progressFill, animatedStyles.progress]}>
+              <LinearGradient
+                colors={["#00bb5e", "#feff5f"]}
+                style={StyleSheet.absoluteFill}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 0 }}
+              />
+            </Animated.View>
+          </View>
+        )}
+
+        <Animated.Text style={[styles.loadingText, animatedStyles.textFade]}>正在加载视频</Animated.Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+  },
+  loadingContainer: {
+    alignItems: "center",
+    zIndex: 10,
+  },
+  videoIcon: {
+    width: 100,
+    height: 100,
+    marginBottom: 30,
+  },
+  videoFrame: {
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    borderWidth: 3,
+    borderColor: "rgba(255, 255, 255, 0.2)",
+    borderRadius: 12,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  playButton: {
+    width: 0,
+    height: 0,
+    borderStyle: "solid",
+    borderLeftWidth: 25,
+    borderLeftColor: "rgba(255, 255, 255, 0.9)",
+    borderTopWidth: 15,
+    borderTopColor: "transparent",
+    borderBottomWidth: 15,
+    borderBottomColor: "transparent",
+  },
+  loadingDots: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 8,
+    marginBottom: 20,
+  },
+  dot: {
+    width: 12,
+    height: 12,
+    backgroundColor: "rgba(255, 255, 255, 0.9)",
+    borderRadius: 6,
+  },
+  progressBar: {
+    width: 300,
+    height: 6,
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    borderRadius: 3,
+    marginVertical: 20,
+    overflow: "hidden",
+  },
+  progressFill: {
+    height: "100%",
+    borderRadius: 3,
+  },
+  loadingText: {
+    color: "rgba(255, 255, 255, 0.9)",
+    fontSize: 18,
+    fontWeight: "300",
+    letterSpacing: 2,
+    marginTop: 10,
+  },
+  bgShapes: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: 1,
+  },
+  shape: {
+    position: "absolute",
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    borderRadius: 50,
+  },
+  shape1: {
+    width: 80,
+    height: 80,
+    top: "20%",
+    left: "10%",
+  },
+  shape2: {
+    width: 60,
+    height: 60,
+    top: "60%",
+    right: "15%",
+  },
+  shape3: {
+    width: 100,
+    height: 100,
+    bottom: "20%",
+    left: "20%",
+  },
+  shape4: {
+    width: 40,
+    height: 40,
+    top: "30%",
+    right: "30%",
+  },
+});
+
+export default VideoLoadingAnimation;

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

@@ -0,0 +1,138 @@
+import React, { useState, useRef, useImperativeHandle, forwardRef } from "react";
+import { View, TextInput, StyleSheet, Animated } from "react-native";
+import { useTVEventHandler } from "react-native";
+import { ThemedText } from "@/components/ThemedText";
+import { SettingsSection } from "./SettingsSection";
+import { useSettingsStore } from "@/stores/settingsStore";
+import { useRemoteControlStore } from "@/stores/remoteControlStore";
+import { useButtonAnimation } from "@/hooks/useAnimation";
+import { Colors } from "@/constants/Colors";
+
+interface APIConfigSectionProps {
+  onChanged: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  hideDescription?: boolean;
+}
+
+export interface APIConfigSectionRef {
+  setInputValue: (value: string) => void;
+}
+
+export const APIConfigSection = forwardRef<APIConfigSectionRef, APIConfigSectionProps>(
+  ({ onChanged, onFocus, onBlur, 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 handleUrlChange = (url: string) => {
+      setApiBaseUrl(url);
+      onChanged();
+    };
+
+    useImperativeHandle(ref, () => ({
+      setInputValue: (value: string) => {
+        setApiBaseUrl(value);
+        onChanged();
+      },
+    }));
+
+    const handleSectionFocus = () => {
+      setIsSectionFocused(true);
+      onFocus?.();
+    };
+
+    const handleSectionBlur = () => {
+      setIsSectionFocused(false);
+      onBlur?.();
+    };
+
+    // TV遥控器事件处理
+    const handleTVEvent = React.useCallback(
+      (event: any) => {
+        if (isSectionFocused && event.eventType === "select") {
+          inputRef.current?.focus();
+        }
+      },
+      [isSectionFocused]
+    );
+
+    useTVEventHandler(handleTVEvent);
+
+    return (
+      <SettingsSection focusable onFocus={handleSectionFocus} onBlur={handleSectionBlur}>
+        <View style={styles.inputContainer}>
+          <View style={styles.titleContainer}>
+            <ThemedText style={styles.sectionTitle}>API 地址</ThemedText>
+            {!hideDescription && remoteInputEnabled && serverUrl && (
+              <ThemedText style={styles.subtitle}>用手机访问 {serverUrl}，可远程输入</ThemedText>
+            )}
+          </View>
+          <Animated.View style={inputAnimationStyle}>
+            <TextInput
+              ref={inputRef}
+              style={[styles.input, isInputFocused && styles.inputFocused]}
+              value={apiBaseUrl}
+              onChangeText={handleUrlChange}
+              placeholder="输入服务器地址"
+              placeholderTextColor="#888"
+              autoCapitalize="none"
+              autoCorrect={false}
+              onFocus={() => setIsInputFocused(true)}
+              onBlur={() => setIsInputFocused(false)}
+            />
+          </Animated.View>
+        </View>
+      </SettingsSection>
+    );
+  }
+);
+
+APIConfigSection.displayName = "APIConfigSection";
+
+const styles = StyleSheet.create({
+  titleContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 8,
+  },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: "bold",
+    marginRight: 12,
+  },
+  subtitle: {
+    fontSize: 12,
+    color: "#888",
+    fontStyle: "italic",
+  },
+  inputContainer: {
+    marginBottom: 12,
+  },
+  label: {
+    fontSize: 16,
+    marginBottom: 8,
+    color: "#ccc",
+  },
+  input: {
+    height: 50,
+    borderWidth: 2,
+    borderRadius: 8,
+    paddingHorizontal: 15,
+    fontSize: 16,
+    backgroundColor: "#3a3a3c",
+    color: "white",
+    borderColor: "transparent",
+  },
+  inputFocused: {
+    borderColor: Colors.dark.primary,
+    shadowColor: Colors.dark.primary,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.8,
+    shadowRadius: 10,
+    elevation: 5,
+  },
+});

components/settings/LiveStreamSection.tsx

@@ -0,0 +1,131 @@
+import React, { useState, useRef, useImperativeHandle, forwardRef } from "react";
+import { View, TextInput, StyleSheet, Animated } from "react-native";
+import { useTVEventHandler } from "react-native";
+import { ThemedText } from "@/components/ThemedText";
+import { SettingsSection } from "./SettingsSection";
+import { useSettingsStore } from "@/stores/settingsStore";
+import { useRemoteControlStore } from "@/stores/remoteControlStore";
+import { useButtonAnimation } from "@/hooks/useAnimation";
+import { Colors } from "@/constants/Colors";
+
+interface LiveStreamSectionProps {
+  onChanged: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+export interface LiveStreamSectionRef {
+  setInputValue: (value: string) => void;
+}
+
+export const LiveStreamSection = forwardRef<LiveStreamSectionRef, LiveStreamSectionProps>(
+  ({ onChanged, onFocus, onBlur }, 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 handleUrlChange = (url: string) => {
+      setM3uUrl(url);
+      onChanged();
+    };
+
+    useImperativeHandle(ref, () => ({
+      setInputValue: (value: string) => {
+        setM3uUrl(value);
+        onChanged();
+      },
+    }));
+
+    const handleSectionFocus = () => {
+      setIsSectionFocused(true);
+      onFocus?.();
+    };
+
+    const handleSectionBlur = () => {
+      setIsSectionFocused(false);
+      onBlur?.();
+    };
+
+    const handleTVEvent = React.useCallback(
+      (event: any) => {
+        if (isSectionFocused && event.eventType === "select") {
+          inputRef.current?.focus();
+        }
+      },
+      [isSectionFocused]
+    );
+
+    useTVEventHandler(handleTVEvent);
+
+    return (
+      <SettingsSection focusable onFocus={handleSectionFocus} onBlur={handleSectionBlur}>
+        <View style={styles.inputContainer}>
+          <View style={styles.titleContainer}>
+            <ThemedText style={styles.sectionTitle}>直播源地址</ThemedText>
+            {remoteInputEnabled && serverUrl && (
+              <ThemedText style={styles.subtitle}>用手机访问 {serverUrl}，可远程输入</ThemedText>
+            )}
+          </View>
+          <Animated.View style={inputAnimationStyle}>
+            <TextInput
+              ref={inputRef}
+              style={[styles.input, isInputFocused && styles.inputFocused]}
+              value={m3uUrl}
+              onChangeText={handleUrlChange}
+              placeholder="输入 M3U 直播源地址"
+              placeholderTextColor="#888"
+              autoCapitalize="none"
+              autoCorrect={false}
+              onFocus={() => setIsInputFocused(true)}
+              onBlur={() => setIsInputFocused(false)}
+            />
+          </Animated.View>
+        </View>
+      </SettingsSection>
+    );
+  }
+);
+
+LiveStreamSection.displayName = "LiveStreamSection";
+
+const styles = StyleSheet.create({
+  titleContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 8,
+  },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: "bold",
+    marginRight: 12,
+  },
+  subtitle: {
+    fontSize: 12,
+    color: "#888",
+    fontStyle: "italic",
+  },
+  inputContainer: {
+    marginBottom: 12,
+  },
+  input: {
+    height: 50,
+    borderWidth: 2,
+    borderRadius: 8,
+    paddingHorizontal: 15,
+    fontSize: 16,
+    backgroundColor: "#3a3a3c",
+    color: "white",
+    borderColor: "transparent",
+  },
+  inputFocused: {
+    borderColor: Colors.dark.primary,
+    shadowColor: Colors.dark.primary,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.8,
+    shadowRadius: 10,
+    elevation: 5,
+  },
+});

components/settings/RemoteInputSection.tsx

@@ -0,0 +1,144 @@
+import React, { useCallback } from "react";
+import { View, Switch, StyleSheet, Pressable, Animated } from "react-native";
+import { useTVEventHandler } from "react-native";
+import { ThemedText } from "@/components/ThemedText";
+import { SettingsSection } from "./SettingsSection";
+import { useSettingsStore } from "@/stores/settingsStore";
+import { useRemoteControlStore } from "@/stores/remoteControlStore";
+import { useButtonAnimation } from "@/hooks/useAnimation";
+import { Colors } from "@/constants/Colors";
+
+interface RemoteInputSectionProps {
+  onChanged: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+export const RemoteInputSection: React.FC<RemoteInputSectionProps> = ({ onChanged, onFocus, onBlur }) => {
+  const { remoteInputEnabled, setRemoteInputEnabled } = useSettingsStore();
+  const { isServerRunning, serverUrl, error } = useRemoteControlStore();
+  const [isFocused, setIsFocused] = React.useState(false);
+  const animationStyle = useButtonAnimation(isFocused, 1.2);
+
+  const handleToggle = useCallback(
+    (enabled: boolean) => {
+      setRemoteInputEnabled(enabled);
+      onChanged();
+    },
+    [setRemoteInputEnabled, onChanged]
+  );
+
+  const handleSectionFocus = () => {
+    setIsFocused(true);
+    onFocus?.();
+  };
+
+  const handleSectionBlur = () => {
+    setIsFocused(false);
+    onBlur?.();
+  };
+
+  // TV遥控器事件处理
+  const handleTVEvent = React.useCallback(
+    (event: any) => {
+      if (isFocused && event.eventType === "select") {
+        handleToggle(!remoteInputEnabled);
+      }
+    },
+    [isFocused, remoteInputEnabled, handleToggle]
+  );
+
+  useTVEventHandler(handleTVEvent);
+
+  return (
+    <SettingsSection focusable onFocus={handleSectionFocus} onBlur={handleSectionBlur}>
+      <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"
+          />
+        </Animated.View>
+      </Pressable>
+
+      {remoteInputEnabled && (
+        <View style={styles.statusContainer}>
+          <View style={styles.statusItem}>
+            <ThemedText style={styles.statusLabel}>服务状态：</ThemedText>
+            <ThemedText style={[styles.statusValue, { color: isServerRunning ? Colors.dark.primary : "#FF6B6B" }]}>
+              {isServerRunning ? "运行中" : "已停止"}
+            </ThemedText>
+          </View>
+
+          {serverUrl && (
+            <View style={styles.statusItem}>
+              <ThemedText style={styles.statusLabel}>访问地址：</ThemedText>
+              <ThemedText style={styles.statusValue}>{serverUrl}</ThemedText>
+            </View>
+          )}
+
+          {error && (
+            <View style={styles.statusItem}>
+              <ThemedText style={styles.statusLabel}>错误：</ThemedText>
+              <ThemedText style={[styles.statusValue, { color: "#FF6B6B" }]}>{error}</ThemedText>
+            </View>
+          )}
+        </View>
+      )}
+    </SettingsSection>
+  );
+};
+
+const styles = StyleSheet.create({
+  settingItem: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingVertical: 12,
+  },
+  settingInfo: {
+    flex: 1,
+  },
+  settingName: {
+    fontSize: 16,
+    fontWeight: "bold",
+    marginBottom: 4,
+  },
+  settingDescription: {
+    fontSize: 14,
+    color: "#888",
+  },
+  statusContainer: {
+    marginTop: 16,
+    padding: 16,
+    backgroundColor: "#2a2a2c",
+    borderRadius: 8,
+  },
+  statusItem: {
+    flexDirection: "row",
+    marginBottom: 8,
+  },
+  statusLabel: {
+    fontSize: 14,
+    color: "#ccc",
+    minWidth: 80,
+  },
+  statusValue: {
+    fontSize: 14,
+    flex: 1,
+  },
+  actionButtons: {
+    flexDirection: "row",
+    gap: 12,
+    marginTop: 12,
+  },
+  actionButton: {
+    flex: 1,
+  },
+});

components/settings/SettingsSection.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+import { StyleSheet, Pressable } from "react-native";
+import { ThemedView } from "@/components/ThemedView";
+import { Colors } from "@/constants/Colors";
+
+interface SettingsSectionProps {
+  children: React.ReactNode;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  focusable?: boolean;
+}
+
+export const SettingsSection: React.FC<SettingsSectionProps> = ({ children, onFocus, onBlur, focusable = false }) => {
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleFocus = () => {
+    setIsFocused(true);
+    onFocus?.();
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    onBlur?.();
+  };
+
+  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}>
+        {children}
+      </Pressable>
+    </ThemedView>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    padding: 20,
+    marginBottom: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "#333",
+  },
+  sectionFocused: {
+    borderColor: Colors.dark.primary,
+    backgroundColor: "#007AFF10",
+  },
+  sectionPressable: {
+    width: "100%",
+  },
+});

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

components/settings/VideoSourceSection.tsx

@@ -0,0 +1,150 @@
+import React, { useState, useCallback } from "react";
+import { StyleSheet, Switch, FlatList, Pressable, Animated } from "react-native";
+import { useTVEventHandler } from "react-native";
+import { ThemedText } from "@/components/ThemedText";
+import { SettingsSection } from "./SettingsSection";
+import { useSettingsStore } from "@/stores/settingsStore";
+import useSourceStore, { useSources } from "@/stores/sourceStore";
+
+interface VideoSourceSectionProps {
+  onChanged: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+export const VideoSourceSection: React.FC<VideoSourceSectionProps> = ({ onChanged, onFocus, onBlur }) => {
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+  const [isSectionFocused, setIsSectionFocused] = useState(false);
+  const { videoSource } = useSettingsStore();
+  const resources = useSources();
+  const { toggleResourceEnabled } = useSourceStore();
+
+  const handleToggle = useCallback(
+    (resourceKey: string) => {
+      toggleResourceEnabled(resourceKey);
+      onChanged();
+    },
+    [onChanged, toggleResourceEnabled]
+  );
+
+  const handleSectionFocus = () => {
+    setIsSectionFocused(true);
+    onFocus?.();
+  };
+
+  const handleSectionBlur = () => {
+    setIsSectionFocused(false);
+    setFocusedIndex(null);
+    onBlur?.();
+  };
+
+  // TV遥控器事件处理
+  const handleTVEvent = useCallback(
+    (event: any) => {
+      if (event.eventType === "select") {
+        if (focusedIndex !== null) {
+          const resource = resources[focusedIndex];
+          if (resource) {
+            handleToggle(resource.source);
+          }
+        } else if (isSectionFocused) {
+          setFocusedIndex(0);
+        }
+      }
+    },
+    [isSectionFocused, focusedIndex, resources, handleToggle]
+  );
+
+  useTVEventHandler(handleTVEvent);
+
+  const renderResourceItem = ({ item, index }: { item: { source: string; source_name: string }; index: number }) => {
+    const isEnabled = videoSource.enabledAll || videoSource.sources[item.source];
+    const isFocused = focusedIndex === index;
+
+    return (
+      <Animated.View style={[styles.resourceItem]}>
+        <Pressable
+          hasTVPreferredFocus={isFocused}
+          style={[styles.resourcePressable, isFocused && styles.resourceFocused]}
+          onFocus={() => setFocusedIndex(index)}
+          onBlur={() => setFocusedIndex(null)}
+        >
+          <ThemedText style={styles.resourceName}>{item.source_name}</ThemedText>
+          <Switch
+            value={isEnabled}
+            onValueChange={() => {}} // 禁用Switch的直接交互
+            trackColor={{ false: "#767577", true: "#007AFF" }}
+            thumbColor={isEnabled ? "#ffffff" : "#f4f3f4"}
+            pointerEvents="none"
+          />
+        </Pressable>
+      </Animated.View>
+    );
+  };
+
+  return (
+    <SettingsSection focusable onFocus={handleSectionFocus} onBlur={handleSectionBlur}>
+      <ThemedText style={styles.sectionTitle}>播放源配置</ThemedText>
+
+      {resources.length > 0 && (
+        <FlatList
+          data={resources}
+          renderItem={renderResourceItem}
+          keyExtractor={(item) => item.source}
+          numColumns={3}
+          columnWrapperStyle={styles.row}
+          contentContainerStyle={styles.flatListContainer}
+          scrollEnabled={false}
+        />
+      )}
+    </SettingsSection>
+  );
+};
+
+const styles = StyleSheet.create({
+  sectionTitle: {
+    fontSize: 20,
+    fontWeight: "bold",
+    marginBottom: 16,
+  },
+  flatListContainer: {
+    gap: 12,
+  },
+  row: {
+    justifyContent: "flex-start",
+  },
+  resourceItem: {
+    width: "32%",
+    marginHorizontal: 6,
+    marginVertical: 6,
+    borderRadius: 8,
+    overflow: "hidden",
+    justifyContent: "flex-start",
+  },
+  resourcePressable: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    backgroundColor: "#2a2a2a",
+    borderRadius: 8,
+    minHeight: 56,
+  },
+  resourceFocused: {
+    backgroundColor: "#3a3a3c",
+    borderWidth: 2,
+    borderColor: "#007AFF",
+    shadowColor: "#007AFF",
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.8,
+    shadowRadius: 10,
+    elevation: 5,
+  },
+  resourceName: {
+    fontSize: 14,
+    fontWeight: "600",
+    flex: 1,
+    marginRight: 8,
+  },
+});

constants/Colors.ts

@@ -26,5 +26,6 @@ export const Colors = {
     tabIconSelected: tintColorDark,
     link: "#0a7ea4",
     border: "#333",
+    primary: "#00bb5e",
   },
 };

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",
+
+  // 获取平台特定的下载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*

docs/components/StyledButton.md

@@ -1,77 +0,0 @@
-# StyledButton 组件设计文档
-
-## 1. 目的
-
-为了统一整个应用中的按钮样式和行为，减少代码重复，并提高开发效率和一致性，我们设计了一个通用的 `StyledButton` 组件。
-
-该组件将取代以下位置的自定义 `Pressable` 和 `TouchableOpacity` 实现：
-
-- `app/index.tsx` (分类按钮, 头部图标按钮)
-- `components/DetailButton.tsx`
-- `components/EpisodeSelectionModal.tsx` (剧集分组按钮, 剧集项按钮, 关闭按钮)
-- `components/SettingsModal.tsx` (取消和保存按钮)
-- `app/search.tsx` (清除按钮)
-- `components/MediaButton.tsx` (媒体控制按钮)
-- `components/NextEpisodeOverlay.tsx` (取消按钮)
-
-## 2. API 设计
-
-`StyledButton` 组件将基于 React Native 的 `Pressable` 构建，并提供以下 props：
-
-```typescript
-import { PressableProps, StyleProp, ViewStyle, TextStyle } from "react-native";
-
-interface StyledButtonProps extends PressableProps {
-  // 按钮的主要内容，可以是文本或图标等 React 节点
-  children?: React.ReactNode;
-
-  // 如果按钮只包含文本，可以使用此 prop 快速设置
-  text?: string;
-
-  // 按钮的视觉变体，用于应用不同的预设样式
-  // 'default': 默认灰色背景
-  // 'primary': 主题色背景，用于关键操作
-  // 'ghost': 透明背景，通常用于图标按钮
-  variant?: "default" | "primary" | "ghost";
-
-  // 按钮是否处于选中状态
-  isSelected?: boolean;
-
-  // 覆盖容器的样式
-  style?: StyleProp<ViewStyle>;
-
-  // 覆盖文本的样式 (当使用 `text` prop 时生效)
-  textStyle?: StyleProp<TextStyle>;
-}
-```
-
-## 3. 样式和行为
-
-### 状态样式:
-
-- **默认状态 (`default`)**:
-  - 背景色: `#333`
-  - 边框: `transparent`
-- **聚焦状态 (`focused`)**:
-  - 背景色: `#0056b3` (深蓝色)
-  - 边框: `#fff`
-  - 阴影/光晕效果
-  - 轻微放大 (`transform: scale(1.1)`)
-- **选中状态 (`isSelected`)**:
-  - 背景色: `#007AFF` (亮蓝色)
-- **主操作 (`primary`)**:
-  - 默认背景色: `#007AFF`
-- **透明背景 (`ghost`)**:
-  - 默认背景色: `transparent`
-
-### 结构:
-
-组件内部将使用 `Pressable` 作为根元素，并根据 `focused` 和 `isSelected` props 动态计算样式。如果 `children` 和 `text` prop 都提供了，`children` 将优先被渲染。
-
-## 4. 实现计划
-
-1.  **创建 `components/StyledButton.tsx` 文件**。
-2.  **实现上述 API 和样式逻辑**。
-3.  **逐个重构目标文件**，将原有的 `Pressable`/`TouchableOpacity` 替换为新的 `StyledButton` 组件。
-4.  **删除旧的、不再需要的样式**。
-5.  **测试所有被修改的界面**，确保按钮的功能和视觉效果符合预期。

hooks/useAnimation.ts

@@ -1,16 +1,16 @@
 import { useRef, useEffect } from 'react';
 import { Animated } from 'react-native';
 
-export const useButtonAnimation = (isFocused: boolean) => {
+export const useButtonAnimation = (isFocused: boolean, size: number = 1.1) => {
   const scaleValue = useRef(new Animated.Value(1)).current;
 
   useEffect(() => {
     Animated.spring(scaleValue, {
-      toValue: isFocused ? 1.1 : 1,
+      toValue: isFocused ? size : 1,
       friction: 5,
       useNativeDriver: true,
     }).start();
-  }, [ isFocused, scaleValue]);
+  }, [ isFocused, scaleValue, size]);
 
   return {
     transform: [{ scale: scaleValue }],

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/usePlaybackManager.ts

@@ -1,229 +0,0 @@
-import { useState, useRef, useEffect } from "react";
-import { useLocalSearchParams } from "expo-router";
-import { Video, AVPlaybackStatus } from "expo-av";
-import { api, VideoDetail } from "@/services/api";
-import { PlayRecordManager } from "@/services/storage";
-import { getResolutionFromM3U8 } from "@/services/m3u8";
-
-interface Episode {
-  title?: string;
-  url: string;
-}
-
-interface Source {
-  name?: string;
-  url: string;
-}
-
-export const usePlaybackManager = (videoRef: React.RefObject<Video>) => {
-  const params = useLocalSearchParams();
-  const [detail, setDetail] = useState<VideoDetail | null>(null);
-  const [currentEpisodeIndex, setCurrentEpisodeIndex] = useState(
-    params.episodeIndex ? parseInt(params.episodeIndex as string) : 0
-  );
-  const [episodes, setEpisodes] = useState<Episode[]>([]);
-  const [sources, setSources] = useState<Source[]>([]);
-  const [currentSourceIndex, setCurrentSourceIndex] = useState(0);
-  const [resolution, setResolution] = useState<string | null>(null);
-  const [status, setStatus] = useState<AVPlaybackStatus | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [initialSeekApplied, setInitialSeekApplied] = useState(false);
-  const [showNextEpisodeOverlay, setShowNextEpisodeOverlay] = useState(false);
-  const autoPlayTimer = useRef<NodeJS.Timeout | null>(null);
-  const saveRecordTimer = useRef<NodeJS.Timeout | null>(null);
-
-  useEffect(() => {
-    fetchVideoDetail();
-
-    saveRecordTimer.current = setInterval(() => {
-      saveCurrentPlayRecord();
-    }, 30000);
-
-    return () => {
-      saveCurrentPlayRecord();
-      if (saveRecordTimer.current) {
-        clearInterval(saveRecordTimer.current);
-      }
-      if (autoPlayTimer.current) {
-        clearTimeout(autoPlayTimer.current);
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    if (status?.isLoaded && "isPlaying" in status && !status.isPlaying) {
-      saveCurrentPlayRecord();
-    }
-  }, [status]);
-
-  useEffect(() => {
-    if (!detail || !videoRef.current || initialSeekApplied) return;
-    loadPlayRecord();
-  }, [detail, currentEpisodeIndex, videoRef.current]);
-
-  const fetchVideoDetail = async () => {
-    try {
-      setIsLoading(true);
-      const source = (params.source as string) || "1";
-      const id = (params.id as string) || "1";
-
-      const data = await api.getVideoDetail(source, id);
-      setDetail(data);
-
-      const processedEpisodes = data.episodes.map((url, index) => ({
-        title: `第${index + 1}集`,
-        url,
-      }));
-      setEpisodes(processedEpisodes);
-
-      if (data.episodes.length > 0) {
-        const demoSources = [
-          { name: "默认线路", url: data.episodes[0] },
-          { name: "备用线路", url: data.episodes[0] },
-        ];
-        setSources(demoSources);
-      }
-    } catch (error) {
-      console.error("Error fetching video detail:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const loadPlayRecord = async () => {
-    if (typeof params.source !== "string" || typeof params.id !== "string")
-      return;
-
-    try {
-      const record = await PlayRecordManager.get(params.source, params.id);
-      if (record && videoRef.current && record.index === currentEpisodeIndex) {
-        setTimeout(async () => {
-          if (videoRef.current) {
-            await videoRef.current.setPositionAsync(record.play_time * 1000);
-            setInitialSeekApplied(true);
-          }
-        }, 2000);
-      }
-    } catch (error) {
-      console.error("Error loading play record:", error);
-    }
-  };
-
-  const saveCurrentPlayRecord = async () => {
-    if (!status?.isLoaded || !detail?.videoInfo) return;
-    const { source, id } = params;
-    if (typeof source !== "string" || typeof id !== "string") return;
-
-    try {
-      await PlayRecordManager.save(source, id, {
-        title: detail.videoInfo.title,
-        source_name: detail.videoInfo.source_name,
-        cover: detail.videoInfo.cover || "",
-        index: currentEpisodeIndex,
-        total_episodes: episodes.length,
-        play_time: Math.floor(status.positionMillis / 1000),
-        total_time: Math.floor((status.durationMillis || 0) / 1000),
-      });
-    } catch (error) {
-      console.error("Failed to save play record:", error);
-    }
-  };
-
-  const playEpisode = async (episodeIndex: number) => {
-    if (autoPlayTimer.current) {
-      clearTimeout(autoPlayTimer.current);
-      autoPlayTimer.current = null;
-    }
-
-    setShowNextEpisodeOverlay(false);
-    setCurrentEpisodeIndex(episodeIndex);
-    setIsLoading(true);
-    setInitialSeekApplied(false);
-    setResolution(null); // Reset resolution
-
-    if (videoRef.current && episodes[episodeIndex]) {
-      const episodeUrl = episodes[episodeIndex].url;
-      getResolutionFromM3U8(episodeUrl).then(setResolution);
-
-      await videoRef.current.unloadAsync();
-      setTimeout(async () => {
-        try {
-          await videoRef.current?.loadAsync(
-            { uri: episodeUrl },
-            { shouldPlay: true }
-          );
-        } catch (error) {
-          console.error("Error loading video:", error);
-        } finally {
-          setIsLoading(false);
-        }
-      }, 200);
-    }
-  };
-
-  const playNextEpisode = () => {
-    if (currentEpisodeIndex < episodes.length - 1) {
-      playEpisode(currentEpisodeIndex + 1);
-    }
-  };
-
-  const togglePlayPause = async () => {
-    if (!videoRef.current) return;
-    if (status?.isLoaded && status.isPlaying) {
-      await videoRef.current.pauseAsync();
-    } else {
-      await videoRef.current.playAsync();
-    }
-  };
-
-  const seek = async (forward: boolean) => {
-    if (!videoRef.current || !status?.isLoaded) return;
-    const wasPlaying = status.isPlaying;
-    const seekTime = forward ? 10000 : -10000;
-    const position = status.positionMillis + seekTime;
-    await videoRef.current.setPositionAsync(Math.max(0, position));
-    if (wasPlaying) {
-      await videoRef.current.playAsync();
-    }
-  };
-
-  const handlePlaybackStatusUpdate = (newStatus: AVPlaybackStatus) => {
-    setStatus(newStatus);
-    if (newStatus.isLoaded) {
-      if (
-        newStatus.durationMillis &&
-        newStatus.positionMillis &&
-        newStatus.durationMillis - newStatus.positionMillis < 2000 &&
-        currentEpisodeIndex < episodes.length - 1 &&
-        !showNextEpisodeOverlay
-      ) {
-        setShowNextEpisodeOverlay(true);
-        if (autoPlayTimer.current) clearTimeout(autoPlayTimer.current);
-        autoPlayTimer.current = setTimeout(() => {
-          playNextEpisode();
-        }, 2000);
-      }
-    }
-  };
-
-  return {
-    detail,
-    episodes,
-    sources,
-    currentEpisodeIndex,
-    currentSourceIndex,
-    status,
-    isLoading,
-    showNextEpisodeOverlay,
-    resolution,
-    setCurrentSourceIndex,
-    setStatus,
-    setShowNextEpisodeOverlay,
-    setIsLoading,
-    playEpisode,
-    playNextEpisode,
-    togglePlayPause,
-    seek,
-    handlePlaybackStatusUpdate,
-  };
-};

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,
+  };
+};

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.1.0",
+  "version": "1.3.6",
   "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": "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"
@@ -28,12 +28,15 @@
   "dependencies": {
     "@expo/vector-icons": "^14.0.0",
     "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-native-community/netinfo": "^11.3.2",
+    "@react-native-cookies/cookies": "^6.2.1",
     "@react-navigation/native": "^6.0.2",
     "expo": "~51.0.13",
     "expo-av": "~14.0.7",
     "expo-build-properties": "~0.12.3",
     "expo-constants": "~16.0.2",
     "expo-font": "~12.0.7",
+    "expo-linear-gradient": "~13.0.2",
     "expo-linking": "~6.3.1",
     "expo-router": "~3.5.16",
     "expo-splash-screen": "~0.27.5",
@@ -44,12 +47,16 @@
     "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-media-console": "*",
+    "react-native-qrcode-svg": "^6.3.1",
     "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
     "react-native-svg": "^15.12.0",
+    "react-native-tcp-socket": "^6.0.6",
     "react-native-toast-message": "^2.3.3",
     "react-native-web": "~0.19.10",
     "zustand": "^5.0.6"
@@ -60,6 +67,8 @@
     "@types/jest": "^29.5.12",
     "@types/react": "~18.2.45",
     "@types/react-test-renderer": "^18.0.7",
+    "eslint": "^8.57.0",
+    "eslint-config-expo": "~7.1.2",
     "jest": "^29.2.1",
     "jest-expo": "~51.0.1",
     "react-test-renderer": "18.2.0",

services/api.ts

@@ -1,5 +1,5 @@
-import { SettingsManager } from "./storage";
 
+// region: --- Interface Definitions ---
 export interface DoubanItem {
   title: string;
   poster: string;
@@ -13,23 +13,18 @@ export interface DoubanResponse {
 }
 
 export interface VideoDetail {
-  code: number;
-  episodes: string[];
-  detailUrl: string;
-  videoInfo: {
-    title: string;
-    cover?: string;
-    desc?: string;
-    type?: string;
-    year?: string;
-    area?: string;
-    director?: string;
-    actor?: string;
-    remarks?: string;
-    source_name: string;
-    source: string;
-    id: string;
-  };
+  id: string;
+  title: string;
+  poster: string;
+  source: string;
+  source_name: string;
+  desc?: string;
+  type?: string;
+  year?: string;
+  area?: string;
+  director?: string;
+  actor?: string;
+  remarks?: string;
 }
 
 export interface SearchResult {
@@ -45,17 +40,26 @@ export interface SearchResult {
   type_name?: string;
 }
 
-// Data structure for play records
+export interface Favorite {
+  cover: string;
+  title: string;
+  source_name: string;
+  total_episodes: number;
+  search_title: string;
+  year: string;
+  save_time?: number;
+}
+
 export interface PlayRecord {
   title: string;
   source_name: string;
   cover: string;
-  index: number; // Episode number
-  total_episodes: number; // Total number of episodes
-  play_time: number; // Play progress in seconds
-  total_time: number; // Total duration in seconds
-  save_time: number; // Timestamp of when the record was saved
-  user_id: number; // User ID, always 0 in this version
+  index: number;
+  total_episodes: number;
+  play_time: number;
+  total_time: number;
+  save_time: number;
+  year: string;
 }
 
 export interface ApiSite {
@@ -65,6 +69,11 @@ export interface ApiSite {
   detail?: string;
 }
 
+export interface ServerConfig {
+  SiteName: string;
+  StorageType: "localstorage" | "redis" | string;
+}
+
 export class API {
   public baseURL: string = "";
 
@@ -78,91 +87,172 @@ export class API {
     this.baseURL = url;
   }
 
-  /**
-   * 生成图片代理 URL
-   */
-  getImageProxyUrl(imageUrl: string): string {
-    return `${this.baseURL}/api/image-proxy?url=${encodeURIComponent(
-      imageUrl
-    )}`;
+  private async _fetch(url: string, options: RequestInit = {}): Promise<Response> {
+    if (!this.baseURL) {
+      throw new Error("API_URL_NOT_SET");
+    }
+
+    const response = await fetch(`${this.baseURL}${url}`, options);
+
+    if (response.status === 401) {
+      throw new Error("UNAUTHORIZED");
+    }
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    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 }),
+    });
+    return response.json();
+  }
+
+  async getFavorites(key?: string): Promise<Record<string, Favorite> | Favorite | null> {
+    const url = key ? `/api/favorites?key=${encodeURIComponent(key)}` : "/api/favorites";
+    const response = await this._fetch(url);
+    return response.json();
+  }
+
+  async addFavorite(key: string, favorite: Omit<Favorite, "save_time">): Promise<{ success: boolean }> {
+    const response = await this._fetch("/api/favorites", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ key, favorite }),
+    });
+    return response.json();
+  }
+
+  async deleteFavorite(key?: string): Promise<{ success: boolean }> {
+    const url = key ? `/api/favorites?key=${encodeURIComponent(key)}` : "/api/favorites";
+    const response = await this._fetch(url, { method: "DELETE" });
+    return response.json();
+  }
+
+  async getPlayRecords(): Promise<Record<string, PlayRecord>> {
+    const response = await this._fetch("/api/playrecords");
+    return response.json();
+  }
+
+  async savePlayRecord(key: string, record: Omit<PlayRecord, "save_time">): Promise<{ success: boolean }> {
+    const response = await this._fetch("/api/playrecords", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ key, record }),
+    });
+    return response.json();
+  }
+
+  async deletePlayRecord(key?: string): Promise<{ success: boolean }> {
+    const url = key ? `/api/playrecords?key=${encodeURIComponent(key)}` : "/api/playrecords";
+    const response = await this._fetch(url, { method: "DELETE" });
+    return response.json();
+  }
+
+  async getSearchHistory(): Promise<string[]> {
+    const response = await this._fetch("/api/searchhistory");
+    return response.json();
+  }
+
+  async addSearchHistory(keyword: string): Promise<string[]> {
+    const response = await this._fetch("/api/searchhistory", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ keyword }),
+    });
+    return response.json();
+  }
+
+  async deleteSearchHistory(keyword?: string): Promise<{ success: boolean }> {
+    const url = keyword ? `/api/searchhistory?keyword=${keyword}` : "/api/searchhistory";
+    const response = await this._fetch(url, { method: "DELETE" });
+    return response.json();
+  }
+
+  getImageProxyUrl(imageUrl: string): string {
+    return `${this.baseURL}/api/image-proxy?url=${encodeURIComponent(imageUrl)}`;
   }
 
-  /**
-   * 获取豆瓣数据
-   */
   async getDoubanData(
     type: "movie" | "tv",
     tag: string,
     pageSize: number = 16,
     pageStart: number = 0
   ): Promise<DoubanResponse> {
-    if (!this.baseURL) {
-      throw new Error("API_URL_NOT_SET");
-    }
-    const url = `${
-      this.baseURL
-    }/api/douban?type=${type}&tag=${encodeURIComponent(
-      tag
-    )}&pageSize=${pageSize}&pageStart=${pageStart}`;
-
-    const response = await fetch(url);
-    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+    const url = `/api/douban?type=${type}&tag=${encodeURIComponent(tag)}&pageSize=${pageSize}&pageStart=${pageStart}`;
+    const response = await this._fetch(url);
     return response.json();
   }
 
-  /**
-   * 搜索视频
-   */
   async searchVideos(query: string): Promise<{ results: SearchResult[] }> {
-    if (!this.baseURL) {
-      throw new Error("API_URL_NOT_SET");
-    }
-    const url = `${this.baseURL}/api/search?q=${encodeURIComponent(query)}`;
-    const response = await fetch(url);
-    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+    const url = `/api/search?q=${encodeURIComponent(query)}`;
+    const response = await this._fetch(url);
     return response.json();
   }
 
   async searchVideo(query: string, resourceId: string, signal?: AbortSignal): Promise<{ results: SearchResult[] }> {
-    if (!this.baseURL) {
-      throw new Error("API_URL_NOT_SET");
-    }
-    const url = `${this.baseURL}/api/search/one?q=${encodeURIComponent(query)}&resourceId=${encodeURIComponent(resourceId)}`;
-    const response = await fetch(url, { signal });
-    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+    const url = `/api/search/one?q=${encodeURIComponent(query)}&resourceId=${encodeURIComponent(resourceId)}`;
+    const response = await this._fetch(url, { signal });
     return response.json();
   }
 
   async getResources(signal?: AbortSignal): Promise<ApiSite[]> {
-   if (!this.baseURL) {
-      throw new Error("API_URL_NOT_SET");
+    const url = `/api/admin/config`;
+    const response = await this._fetch(url, { signal });
+    const config = await response.json();
+    
+    // 添加安全检查
+    if (!config || !config.Config.SourceConfig) {
+      console.warn('API response missing SourceConfig:', config);
+      return [];
     }
-    const url = `${this.baseURL}/api/search/resources`;
-    const response = await fetch(url, { signal });
-    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-    return response.json();
+    
+    // 确保 SourceConfig 是数组
+    if (!Array.isArray(config.Config.SourceConfig)) {
+      console.warn('SourceConfig is not an array:', config.Config.SourceConfig);
+      return [];
+    }
+    
+    // 过滤并验证每个站点配置，同时进行去重
+    const seenKeys = new Set<string>();
+    const uniqueSites: ApiSite[] = [];
+    
+    config.Config.SourceConfig
+      .filter((site: any) => site && !site.disabled)
+      .forEach((site: any) => {
+        const key = site.key || '';
+        // 基于 key 字段去重
+        if (key && !seenKeys.has(key)) {
+          seenKeys.add(key);
+          uniqueSites.push({
+            key: key,
+            api: site.api || '',
+            name: site.name || '',
+            detail: site.detail
+          });
+        }
+      });
+    
+    return uniqueSites;
   }
 
-
-  /**
-   * 获取视频详情
-   */
   async getVideoDetail(source: string, id: string): Promise<VideoDetail> {
-    if (!this.baseURL) {
-      throw new Error("API_URL_NOT_SET");
-    }
-    const url = `${this.baseURL}/api/detail?source=${source}&id=${id}`;
-    const response = await fetch(url);
-    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+    const url = `/api/detail?source=${source}&id=${id}`;
+    const response = await this._fetch(url);
     return response.json();
   }
 }
 
 // 默认实例
 export let api = new API();
-
-// 初始化 API
-export const initializeApi = async () => {
-  const settings = await SettingsManager.get();
-  api.setBaseUrl(settings.apiBaseUrl);
-};

services/m3u.ts

@@ -0,0 +1,82 @@
+export interface Channel {
+  id: string;
+  name: string;
+  url: string;
+  logo: string;
+  group: string;
+}
+
+export const parseM3U = (m3uText: string): Channel[] => {
+  const parsedChannels: Channel[] = [];
+  const lines = m3uText.split('\n');
+  let currentChannelInfo: Partial<Channel> | null = null;
+
+  for (const line of lines) {
+    const trimmedLine = line.trim();
+    if (trimmedLine.startsWith('#EXTINF:')) {
+      currentChannelInfo = {}; // Start a new channel
+      const commaIndex = trimmedLine.lastIndexOf(',');
+      if (commaIndex !== -1) {
+        currentChannelInfo.name = trimmedLine.substring(commaIndex + 1).trim();
+        const attributesPart = trimmedLine.substring(8, commaIndex);
+        const logoMatch = attributesPart.match(/tvg-logo="([^"]*)"/i);
+        if (logoMatch && logoMatch[1]) {
+          currentChannelInfo.logo = logoMatch[1];
+        }
+        const groupMatch = attributesPart.match(/group-title="([^"]*)"/i);
+        if (groupMatch && groupMatch[1]) {
+          currentChannelInfo.group = groupMatch[1];
+        }
+      } else {
+        currentChannelInfo.name = trimmedLine.substring(8).trim();
+      }
+    } else if (currentChannelInfo && trimmedLine && !trimmedLine.startsWith('#') && trimmedLine.includes('://')) {
+      currentChannelInfo.url = trimmedLine;
+      currentChannelInfo.id = currentChannelInfo.url; // Use URL as ID
+      
+      // Ensure all required fields are present, providing defaults if necessary
+      const finalChannel: Channel = {
+        id: currentChannelInfo.id,
+        url: currentChannelInfo.url,
+        name: currentChannelInfo.name || 'Unknown',
+        logo: currentChannelInfo.logo || '',
+        group: currentChannelInfo.group || 'Default',
+      };
+      
+      parsedChannels.push(finalChannel);
+      currentChannelInfo = null; // Reset for the next channel
+    }
+  }
+  return parsedChannels;
+};
+
+export const fetchAndParseM3u = async (m3uUrl: string): Promise<Channel[]> => {
+  try {
+    const response = await fetch(m3uUrl);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch M3U: ${response.statusText}`);
+    }
+    const m3uText = await response.text();
+    return parseM3U(m3uText);
+  } catch (error) {
+    console.info("Error fetching or parsing M3U:", error);
+    return []; // Return empty array on error
+  }
+};
+
+export const getPlayableUrl = (originalUrl: string | null): string | null => {
+  if (!originalUrl) {
+    return null;
+  }
+  // In React Native, we use the proxy for all http streams to avoid potential issues.
+  // if (originalUrl.toLowerCase().startsWith('http://')) {
+  //   // Use the baseURL from the existing api instance.
+  //   if (!api.baseURL) {
+  //       console.warn("API base URL is not set. Cannot create proxy URL.")
+  //       return originalUrl; // Fallback to original URL
+  //   }
+  //   return `${api.baseURL}/proxy?url=${encodeURIComponent(originalUrl)}`;
+  // }
+  // HTTPS streams can be played directly.
+  return originalUrl;
+};

services/m3u8.ts

@@ -50,7 +50,7 @@ export const getResolutionFromM3U8 = async (
     };
 
     return resolutionString;
-  } catch (error) {
+  } catch {
     return null;
   }
 };

services/remoteControlService.ts

@@ -0,0 +1,143 @@
+import TCPHttpServer from "./tcpHttpServer";
+
+const getRemotePageHTML = () => {
+  return `
+  <!DOCTYPE html>
+  <html>
+  <head>
+    <title>OrionTV Remote</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <style>
+      body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #121212; color: white; }
+      h3 { color: #eee; }
+      #container { display: flex; flex-direction: column; align-items: center; width: 90%; max-width: 400px; }
+      #text { width: 100%; padding: 15px; font-size: 16px; border-radius: 8px; border: 1px solid #333; background-color: #2a2a2a; color: white; margin-bottom: 20px; box-sizing: border-box; }
+      button { width: 100%; padding: 15px; font-size: 18px; font-weight: bold; border: none; border-radius: 8px; background-color: #007AFF; color: white; cursor: pointer; }
+      button:active { background-color: #0056b3; }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <h3>向电视发送文本</h3>
+      <input id="text" placeholder="请输入..." />
+      <button onclick="send()">发送</button>
+    </div>
+    <script>
+      window.addEventListener('DOMContentLoaded', () => {
+        fetch('/handshake', { method: 'POST' }).catch(console.info);
+      });
+      function send() {
+        const input = document.getElementById("text");
+        const value = input.value;
+        if (value) {
+          fetch("/message", {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ message: value })
+          })
+          .catch(err => console.info(err));
+          input.value = '';
+        }
+      }
+    </script>
+  </body>
+  </html>
+  `;
+};
+
+class RemoteControlService {
+  private httpServer: TCPHttpServer;
+  private onMessage: (message: string) => void = () => {};
+  private onHandshake: () => void = () => {};
+
+  constructor() {
+    this.httpServer = new TCPHttpServer();
+    this.setupRequestHandler();
+  }
+
+  private setupRequestHandler() {
+    this.httpServer.setRequestHandler((request) => {
+      console.log("[RemoteControl] Received request:", request.method, request.url);
+
+      try {
+        if (request.method === "GET" && request.url === "/") {
+          return {
+            statusCode: 200,
+            headers: { "Content-Type": "text/html; charset=utf-8" },
+            body: getRemotePageHTML(),
+          };
+        } else if (request.method === "POST" && request.url === "/message") {
+          try {
+            const parsedBody = JSON.parse(request.body || "{}");
+            const message = parsedBody.message;
+            if (message) {
+              this.onMessage(message);
+            }
+            return {
+              statusCode: 200,
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ status: "ok" }),
+            };
+          } catch (parseError) {
+            console.info("[RemoteControl] Failed to parse message body:", parseError);
+            return {
+              statusCode: 400,
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ error: "Invalid JSON" }),
+            };
+          }
+        } else if (request.method === "POST" && request.url === "/handshake") {
+          this.onHandshake();
+          return {
+            statusCode: 200,
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ status: "ok" }),
+          };
+        } else {
+          return {
+            statusCode: 404,
+            headers: { "Content-Type": "text/plain" },
+            body: "Not Found",
+          };
+        }
+      } catch (error) {
+        console.info("[RemoteControl] Request handler error:", error);
+        return {
+          statusCode: 500,
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ error: "Internal Server Error" }),
+        };
+      }
+    });
+  }
+
+  public init(actions: { onMessage: (message: string) => void; onHandshake: () => void }) {
+    this.onMessage = actions.onMessage;
+    this.onHandshake = actions.onHandshake;
+  }
+
+  public async startServer(): Promise<string> {
+    console.log("[RemoteControl] Attempting to start server...");
+
+    try {
+      const url = await this.httpServer.start();
+      console.log(`[RemoteControl] Server started successfully at: ${url}`);
+      return url;
+    } catch (error) {
+      console.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...");
+    this.httpServer.stop();
+  }
+
+  public isRunning(): boolean {
+    return this.httpServer.getIsRunning();
+  }
+}
+
+export const remoteControlService = new RemoteControlService();

services/storage.ts

@@ -1,85 +1,144 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { PlayRecord as ApiPlayRecord } from "./api"; // Use a consistent type
+import { api, PlayRecord as ApiPlayRecord, Favorite as ApiFavorite } from "./api";
+import { storageConfig } from "./storageConfig";
 
 // --- Storage Keys ---
 const STORAGE_KEYS = {
+  SETTINGS: "mytv_settings",
+  PLAYER_SETTINGS: "mytv_player_settings",
   FAVORITES: "mytv_favorites",
   PLAY_RECORDS: "mytv_play_records",
   SEARCH_HISTORY: "mytv_search_history",
-  SETTINGS: "mytv_settings",
+  LOGIN_CREDENTIALS: "mytv_login_credentials",
 } as const;
 
 // --- Type Definitions (aligned with api.ts) ---
-export interface PlayRecord extends ApiPlayRecord {
+// Re-exporting for consistency, though they are now primarily API types
+export type PlayRecord = ApiPlayRecord & {
   introEndTime?: number;
   outroStartTime?: number;
-}
+};
+export type Favorite = ApiFavorite;
 
-export interface FavoriteItem {
-  id: string;
-  source: string;
-  title: string;
-  poster: string;
-  source_name: string;
-  save_time: number;
+export interface PlayerSettings {
+  introEndTime?: number;
+  outroStartTime?: number;
+  playbackRate?: number;
 }
 
 export interface AppSettings {
-  theme: "light" | "dark" | "auto";
-  autoPlay: boolean;
-  playbackSpeed: number;
   apiBaseUrl: string;
+  remoteInputEnabled: boolean;
+  videoSource: {
+    enabledAll: boolean;
+    sources: {
+      [key: string]: boolean;
+    };
+  };
+  m3uUrl: string;
+}
+
+export interface LoginCredentials {
+  username: string;
+  password: string;
 }
 
 // --- Helper ---
 const generateKey = (source: string, id: string) => `${source}+${id}`;
 
-// --- FavoriteManager ---
-export class FavoriteManager {
-  static async getAll(): Promise<Record<string, FavoriteItem>> {
+// --- PlayerSettingsManager (Uses AsyncStorage) ---
+export class PlayerSettingsManager {
+  static async getAll(): Promise<Record<string, PlayerSettings>> {
     try {
-      const data = await AsyncStorage.getItem(STORAGE_KEYS.FAVORITES);
+      const data = await AsyncStorage.getItem(STORAGE_KEYS.PLAYER_SETTINGS);
       return data ? JSON.parse(data) : {};
     } catch (error) {
-      console.error("Failed to get favorites:", error);
+      console.info("Failed to get all player settings:", error);
       return {};
     }
   }
 
-  static async save(
-    source: string,
-    id: string,
-    item: Omit<FavoriteItem, "id" | "source" | "save_time">
-  ): Promise<void> {
-    const favorites = await this.getAll();
+  static async get(source: string, id: string): Promise<PlayerSettings | null> {
+    const allSettings = await this.getAll();
+    return allSettings[generateKey(source, id)] || null;
+  }
+
+  static async save(source: string, id: string, settings: PlayerSettings): Promise<void> {
+    const allSettings = await this.getAll();
     const key = generateKey(source, id);
-    favorites[key] = { ...item, id, source, save_time: Date.now() };
-    await AsyncStorage.setItem(
-      STORAGE_KEYS.FAVORITES,
-      JSON.stringify(favorites)
-    );
+    // Only save if there are actual values to save
+    if (settings.introEndTime !== undefined || settings.outroStartTime !== undefined || settings.playbackRate !== undefined) {
+      allSettings[key] = { ...allSettings[key], ...settings };
+    } else {
+      // If all are undefined, remove the key
+      delete allSettings[key];
+    }
+    await AsyncStorage.setItem(STORAGE_KEYS.PLAYER_SETTINGS, JSON.stringify(allSettings));
   }
 
   static async remove(source: string, id: string): Promise<void> {
-    const favorites = await this.getAll();
+    const allSettings = await this.getAll();
+    delete allSettings[generateKey(source, id)];
+    await AsyncStorage.setItem(STORAGE_KEYS.PLAYER_SETTINGS, JSON.stringify(allSettings));
+  }
+
+  static async clearAll(): Promise<void> {
+    await AsyncStorage.removeItem(STORAGE_KEYS.PLAYER_SETTINGS);
+  }
+}
+
+// --- FavoriteManager (Dynamic: API or LocalStorage) ---
+export class FavoriteManager {
+  private static getStorageType() {
+    return storageConfig.getStorageType();
+  }
+
+  static async getAll(): Promise<Record<string, Favorite>> {
+    if (this.getStorageType() === "localstorage") {
+      try {
+        const data = await AsyncStorage.getItem(STORAGE_KEYS.FAVORITES);
+        return data ? JSON.parse(data) : {};
+      } catch (error) {
+        console.info("Failed to get all local favorites:", error);
+        return {};
+      }
+    }
+    return (await api.getFavorites()) as Record<string, Favorite>;
+  }
+
+  static async save(source: string, id: string, item: Favorite): Promise<void> {
     const key = generateKey(source, id);
-    delete favorites[key];
-    await AsyncStorage.setItem(
-      STORAGE_KEYS.FAVORITES,
-      JSON.stringify(favorites)
-    );
+    if (this.getStorageType() === "localstorage") {
+      const allFavorites = await this.getAll();
+      allFavorites[key] = { ...item, save_time: Date.now() };
+      await AsyncStorage.setItem(STORAGE_KEYS.FAVORITES, JSON.stringify(allFavorites));
+      return;
+    }
+    await api.addFavorite(key, item);
+  }
+
+  static async remove(source: string, id: string): Promise<void> {
+    const key = generateKey(source, id);
+    if (this.getStorageType() === "localstorage") {
+      const allFavorites = await this.getAll();
+      delete allFavorites[key];
+      await AsyncStorage.setItem(STORAGE_KEYS.FAVORITES, JSON.stringify(allFavorites));
+      return;
+    }
+    await api.deleteFavorite(key);
   }
 
   static async isFavorited(source: string, id: string): Promise<boolean> {
-    const favorites = await this.getAll();
-    return generateKey(source, id) in favorites;
+    const key = generateKey(source, id);
+    if (this.getStorageType() === "localstorage") {
+      const allFavorites = await this.getAll();
+      return !!allFavorites[key];
+    }
+    const favorite = await api.getFavorites(key);
+    return favorite !== null;
   }
 
-  static async toggle(
-    source: string,
-    id: string,
-    item: Omit<FavoriteItem, "id" | "source" | "save_time">
-  ): Promise<boolean> {
+  static async toggle(source: string, id: string, item: Favorite): Promise<boolean> {
     const isFav = await this.isFavorited(source, id);
     if (isFav) {
       await this.remove(source, id);
@@ -91,105 +150,150 @@ export class FavoriteManager {
   }
 
   static async clearAll(): Promise<void> {
-    await AsyncStorage.removeItem(STORAGE_KEYS.FAVORITES);
+    if (this.getStorageType() === "localstorage") {
+      await AsyncStorage.removeItem(STORAGE_KEYS.FAVORITES);
+      return;
+    }
+    await api.deleteFavorite();
   }
 }
 
-// --- PlayRecordManager ---
+// --- PlayRecordManager (Dynamic: API or LocalStorage) ---
 export class PlayRecordManager {
-  static async getAll(): Promise<Record<string, PlayRecord>> {
-    try {
-      const data = await AsyncStorage.getItem(STORAGE_KEYS.PLAY_RECORDS);
-      return data ? JSON.parse(data) : {};
-    } catch (error) {
-      console.error("Failed to get play records:", error);
-      return {};
-    }
+  private static getStorageType() {
+    return storageConfig.getStorageType();
   }
 
-  static async save(
-    source: string,
-    id: string,
-    record: Omit<PlayRecord, "user_id" | "save_time">
-  ): Promise<void> {
-    const records = await this.getAll();
+  static async getAll(): Promise<Record<string, PlayRecord>> {
+    let apiRecords: Record<string, PlayRecord> = {};
+    if (this.getStorageType() === "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);
+        return {};
+      }
+    } else {
+      apiRecords = await api.getPlayRecords();
+    }
+
+    const localSettings = await PlayerSettingsManager.getAll();
+    const mergedRecords: Record<string, PlayRecord> = {};
+    for (const key in apiRecords) {
+      mergedRecords[key] = {
+        ...apiRecords[key],
+        ...localSettings[key],
+      };
+    }
+    return mergedRecords;
+  }
+
+  static async save(source: string, id: string, record: Omit<PlayRecord, "save_time">): Promise<void> {
     const key = generateKey(source, id);
-    records[key] = { ...record, user_id: 0, save_time: Date.now() };
-    await AsyncStorage.setItem(
-      STORAGE_KEYS.PLAY_RECORDS,
-      JSON.stringify(records)
-    );
+    const { introEndTime, outroStartTime, ...apiRecord } = record;
+
+    // Player settings are always saved locally
+    await PlayerSettingsManager.save(source, id, { introEndTime, outroStartTime });
+
+    if (this.getStorageType() === "localstorage") {
+      const allRecords = await this.getAll();
+      const fullRecord = { ...apiRecord, save_time: Date.now() };
+      allRecords[key] = { ...allRecords[key], ...fullRecord };
+      await AsyncStorage.setItem(STORAGE_KEYS.PLAY_RECORDS, JSON.stringify(allRecords));
+    } else {
+      await api.savePlayRecord(key, apiRecord);
+    }
   }
 
   static async get(source: string, id: string): Promise<PlayRecord | null> {
+    const key = generateKey(source, id);
     const records = await this.getAll();
-    return records[generateKey(source, id)] || null;
+    return records[key] || null;
   }
 
   static async remove(source: string, id: string): Promise<void> {
-    const records = await this.getAll();
-    delete records[generateKey(source, id)];
-    await AsyncStorage.setItem(
-      STORAGE_KEYS.PLAY_RECORDS,
-      JSON.stringify(records)
-    );
+    const key = generateKey(source, id);
+    await PlayerSettingsManager.remove(source, id); // Always remove local settings
+
+    if (this.getStorageType() === "localstorage") {
+      const allRecords = await this.getAll();
+      delete allRecords[key];
+      await AsyncStorage.setItem(STORAGE_KEYS.PLAY_RECORDS, JSON.stringify(allRecords));
+    } else {
+      await api.deletePlayRecord(key);
+    }
   }
 
   static async clearAll(): Promise<void> {
-    await AsyncStorage.removeItem(STORAGE_KEYS.PLAY_RECORDS);
+    await PlayerSettingsManager.clearAll(); // Always clear local settings
+
+    if (this.getStorageType() === "localstorage") {
+      await AsyncStorage.removeItem(STORAGE_KEYS.PLAY_RECORDS);
+    } else {
+      await api.deletePlayRecord();
+    }
   }
 }
 
-// --- SearchHistoryManager ---
-const SEARCH_HISTORY_LIMIT = 20;
-
+// --- SearchHistoryManager (Dynamic: API or LocalStorage) ---
 export class SearchHistoryManager {
+  private static getStorageType() {
+    return storageConfig.getStorageType();
+  }
+
   static async get(): Promise<string[]> {
-    try {
-      const data = await AsyncStorage.getItem(STORAGE_KEYS.SEARCH_HISTORY);
-      return data ? JSON.parse(data) : [];
-    } catch (error) {
-      console.error("Failed to get search history:", error);
-      return [];
+    if (this.getStorageType() === "localstorage") {
+      try {
+        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);
+        return [];
+      }
     }
+    return api.getSearchHistory();
   }
 
   static async add(keyword: string): Promise<void> {
     const trimmed = keyword.trim();
     if (!trimmed) return;
 
-    const history = await this.get();
-    const newHistory = [trimmed, ...history.filter((k) => k !== trimmed)];
-    if (newHistory.length > SEARCH_HISTORY_LIMIT) {
-      newHistory.length = SEARCH_HISTORY_LIMIT;
+    if (this.getStorageType() === "localstorage") {
+      let history = await this.get();
+      history = [trimmed, ...history.filter((k) => k !== trimmed)].slice(0, 20); // Keep latest 20
+      await AsyncStorage.setItem(STORAGE_KEYS.SEARCH_HISTORY, JSON.stringify(history));
+      return;
     }
-    await AsyncStorage.setItem(
-      STORAGE_KEYS.SEARCH_HISTORY,
-      JSON.stringify(newHistory)
-    );
+    await api.addSearchHistory(trimmed);
   }
 
   static async clear(): Promise<void> {
-    await AsyncStorage.removeItem(STORAGE_KEYS.SEARCH_HISTORY);
+    if (this.getStorageType() === "localstorage") {
+      await AsyncStorage.removeItem(STORAGE_KEYS.SEARCH_HISTORY);
+      return;
+    }
+    await api.deleteSearchHistory();
   }
 }
 
-// --- SettingsManager ---
+// --- SettingsManager (Uses AsyncStorage) ---
 export class SettingsManager {
   static async get(): Promise<AppSettings> {
     const defaultSettings: AppSettings = {
-      theme: "auto",
-      autoPlay: true,
-      playbackSpeed: 1.0,
       apiBaseUrl: "",
+      remoteInputEnabled: true,
+      videoSource: {
+        enabledAll: true,
+        sources: {},
+      },
+      m3uUrl: "",
     };
     try {
       const data = await AsyncStorage.getItem(STORAGE_KEYS.SETTINGS);
-      return data
-        ? { ...defaultSettings, ...JSON.parse(data) }
-        : defaultSettings;
+      return data ? { ...defaultSettings, ...JSON.parse(data) } : defaultSettings;
     } catch (error) {
-      console.error("Failed to get settings:", error);
+      console.info("Failed to get settings:", error);
       return defaultSettings;
     }
   }
@@ -197,13 +301,39 @@ export class SettingsManager {
   static async save(settings: Partial<AppSettings>): Promise<void> {
     const currentSettings = await this.get();
     const updatedSettings = { ...currentSettings, ...settings };
-    await AsyncStorage.setItem(
-      STORAGE_KEYS.SETTINGS,
-      JSON.stringify(updatedSettings)
-    );
+    await AsyncStorage.setItem(STORAGE_KEYS.SETTINGS, JSON.stringify(updatedSettings));
   }
 
   static async reset(): Promise<void> {
     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) {
+      console.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) {
+      console.error("Failed to save login credentials:", error);
+    }
+  }
+
+  static async clear(): Promise<void> {
+    try {
+      await AsyncStorage.removeItem(STORAGE_KEYS.LOGIN_CREDENTIALS);
+    } catch (error) {
+      console.error("Failed to clear login credentials:", error);
+    }
+  }
+}

services/storageConfig.ts

@@ -0,0 +1,20 @@
+// Define a simple storage configuration service
+export interface StorageConfig {
+  storageType: string | undefined;
+  getStorageType: () => string | undefined;
+  setStorageType: (type: string | undefined) => void;
+}
+
+// Create a singleton instance
+export const storageConfig: StorageConfig = {
+  // Default to undefined (will fallback to local storage)
+  storageType: undefined,
+
+  getStorageType() {
+    return this.storageType;
+  },
+
+  setStorageType(type: string | undefined) {
+    this.storageType = type;
+  },
+};

services/tcpHttpServer.ts

@@ -0,0 +1,199 @@
+import TcpSocket from 'react-native-tcp-socket';
+import NetInfo from '@react-native-community/netinfo';
+
+const PORT = 12346;
+
+interface HttpRequest {
+  method: string;
+  url: string;
+  headers: { [key: string]: string };
+  body: string;
+}
+
+interface HttpResponse {
+  statusCode: number;
+  headers: { [key: string]: string };
+  body: string;
+}
+
+type RequestHandler = (request: HttpRequest) => HttpResponse | Promise<HttpResponse>;
+
+class TCPHttpServer {
+  private server: TcpSocket.Server | null = null;
+  private isRunning = false;
+  private requestHandler: RequestHandler | null = null;
+
+  constructor() {
+    this.server = null;
+  }
+
+  private parseHttpRequest(data: string): HttpRequest | null {
+    try {
+      const lines = data.split('\r\n');
+      const requestLine = lines[0].split(' ');
+      
+      if (requestLine.length < 3) {
+        return null;
+      }
+
+      const method = requestLine[0];
+      const url = requestLine[1];
+      const headers: { [key: string]: string } = {};
+      
+      let bodyStartIndex = -1;
+      for (let i = 1; i < lines.length; i++) {
+        const line = lines[i];
+        if (line === '') {
+          bodyStartIndex = i + 1;
+          break;
+        }
+        const colonIndex = line.indexOf(':');
+        if (colonIndex > 0) {
+          const key = line.substring(0, colonIndex).trim().toLowerCase();
+          const value = line.substring(colonIndex + 1).trim();
+          headers[key] = value;
+        }
+      }
+
+      const body = bodyStartIndex > 0 ? lines.slice(bodyStartIndex).join('\r\n') : '';
+
+      return { method, url, headers, body };
+    } catch (error) {
+      console.info('[TCPHttpServer] Error parsing HTTP request:', error);
+      return null;
+    }
+  }
+
+  private formatHttpResponse(response: HttpResponse): string {
+    const statusTexts: { [key: number]: string } = {
+      200: 'OK',
+      400: 'Bad Request',
+      404: 'Not Found',
+      500: 'Internal Server Error'
+    };
+
+    const statusText = statusTexts[response.statusCode] || 'Unknown';
+    const headers = {
+      'Content-Length': new TextEncoder().encode(response.body).length.toString(),
+      'Connection': 'close',
+      ...response.headers
+    };
+
+    let httpResponse = `HTTP/1.1 ${response.statusCode} ${statusText}\r\n`;
+    
+    for (const [key, value] of Object.entries(headers)) {
+      httpResponse += `${key}: ${value}\r\n`;
+    }
+    
+    httpResponse += '\r\n';
+    httpResponse += response.body;
+
+    return httpResponse;
+  }
+
+  public setRequestHandler(handler: RequestHandler) {
+    this.requestHandler = handler;
+  }
+
+  public async start(): Promise<string> {
+    const netState = await NetInfo.fetch();
+    let ipAddress: string | null = null;
+    
+    if (netState.type === 'wifi' || netState.type === 'ethernet') {
+      ipAddress = (netState.details as any)?.ipAddress ?? null;
+    }
+
+    if (!ipAddress) {
+      throw new Error('无法获取IP地址，请确认设备已连接到WiFi或以太网。');
+    }
+
+    if (this.isRunning) {
+      console.log('[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');
+          
+          let requestData = '';
+          
+          socket.on('data', async (data: string | Buffer) => {
+            requestData += data.toString();
+            
+            // Check if we have a complete HTTP request
+            if (requestData.includes('\r\n\r\n')) {
+              try {
+                const request = this.parseHttpRequest(requestData);
+                if (request && this.requestHandler) {
+                  const response = await this.requestHandler(request);
+                  const httpResponse = this.formatHttpResponse(response);
+                  socket.write(httpResponse);
+                } else {
+                  // Send 400 Bad Request for malformed requests
+                  const errorResponse = this.formatHttpResponse({
+                    statusCode: 400,
+                    headers: { 'Content-Type': 'text/plain' },
+                    body: 'Bad Request'
+                  });
+                  socket.write(errorResponse);
+                }
+              } catch (error) {
+                console.info('[TCPHttpServer] Error handling request:', error);
+                const errorResponse = this.formatHttpResponse({
+                  statusCode: 500,
+                  headers: { 'Content-Type': 'text/plain' },
+                  body: 'Internal Server Error'
+                });
+                socket.write(errorResponse);
+              }
+              
+              socket.end();
+              requestData = '';
+            }
+          });
+
+          socket.on('error', (error: Error) => {
+            console.info('[TCPHttpServer] Socket error:', error);
+          });
+
+          socket.on('close', () => {
+            console.log('[TCPHttpServer] Client disconnected');
+          });
+        });
+
+        this.server.listen({ port: PORT, host: '0.0.0.0' }, () => {
+          console.log(`[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);
+          this.isRunning = false;
+          reject(error);
+        });
+
+      } catch (error) {
+        console.info('[TCPHttpServer] Failed to start server:', error);
+        reject(error);
+      }
+    });
+  }
+
+  public stop() {
+    if (this.server && this.isRunning) {
+      this.server.close();
+      this.server = null;
+      this.isRunning = false;
+      console.log('[TCPHttpServer] Server stopped');
+    }
+  }
+
+  public getIsRunning(): boolean {
+    return this.isRunning;
+  }
+}
+
+export default TCPHttpServer;

services/updateService.ts

@@ -0,0 +1,221 @@
+import ReactNativeBlobUtil from "react-native-blob-util";
+import FileViewer from "react-native-file-viewer";
+import Toast from "react-native-toast-message";
+import { version as currentVersion } from "../package.json";
+import { UPDATE_CONFIG } from "../constants/UpdateConfig";
+
+interface VersionInfo {
+  version: string;
+  downloadUrl: string;
+}
+
+class UpdateService {
+  private static instance: UpdateService;
+
+  static getInstance(): UpdateService {
+    if (!UpdateService.instance) {
+      UpdateService.instance = new UpdateService();
+    }
+    return UpdateService.instance;
+  }
+
+  async checkVersion(): Promise<VersionInfo> {
+    let retries = 0;
+    const maxRetries = 3;
+    
+    while (retries < maxRetries) {
+      try {
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 10000); // 10秒超时
+        
+        const response = await fetch(UPDATE_CONFIG.GITHUB_RAW_URL, {
+          signal: controller.signal,
+        });
+        
+        clearTimeout(timeoutId);
+
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: Failed to fetch version info`);
+        }
+
+        const remotePackage = await response.json();
+        const remoteVersion = remotePackage.version;
+
+        return {
+          version: remoteVersion,
+          downloadUrl: UPDATE_CONFIG.getDownloadUrl(remoteVersion),
+        };
+      } catch (error) {
+        retries++;
+        console.info(`Error checking version (attempt ${retries}/${maxRetries}):`, error);
+        
+        if (retries === maxRetries) {
+          Toast.show({ type: "error", text1: "检查更新失败", text2: "无法获取版本信息，请检查网络连接" });
+          throw error;
+        }
+        
+        // 等待一段时间后重试
+        await new Promise(resolve => setTimeout(resolve, 2000 * retries));
+      }
+    }
+    
+    throw new Error("Maximum retry attempts exceeded");
+  }
+
+  // 清理旧的APK文件
+  private async cleanOldApkFiles(): Promise<void> {
+    try {
+      const { dirs } = ReactNativeBlobUtil.fs;
+      // 使用DocumentDir而不是DownloadDir
+      const files = await ReactNativeBlobUtil.fs.ls(dirs.DocumentDir);
+      
+      // 查找所有OrionTV APK文件
+      const apkFiles = files.filter(file => file.startsWith('OrionTV_v') && file.endsWith('.apk'));
+      
+      // 保留最新的2个文件，删除其他的
+      if (apkFiles.length > 2) {
+        const sortedFiles = apkFiles.sort((a, b) => {
+          // 从文件名中提取时间戳进行排序
+          const timeA = a.match(/OrionTV_v(\d+)\.apk/)?.[1] || '0';
+          const timeB = b.match(/OrionTV_v(\d+)\.apk/)?.[1] || '0';
+          return parseInt(timeB) - parseInt(timeA);
+        });
+        
+        // 删除旧文件
+        const filesToDelete = sortedFiles.slice(2);
+        for (const file of filesToDelete) {
+          try {
+            await ReactNativeBlobUtil.fs.unlink(`${dirs.DocumentDir}/${file}`);
+            console.log(`Cleaned old APK file: ${file}`);
+          } catch (deleteError) {
+            console.warn(`Failed to delete old APK file ${file}:`, deleteError);
+          }
+        }
+      }
+    } catch (error) {
+      console.warn('Failed to clean old APK files:', error);
+    }
+  }
+
+  async downloadApk(url: string, onProgress?: (progress: number) => void): Promise<string> {
+    let retries = 0;
+    const maxRetries = 3;
+    
+    // 清理旧文件
+    await this.cleanOldApkFiles();
+    
+    while (retries < maxRetries) {
+      try {
+        const { dirs } = ReactNativeBlobUtil.fs;
+        const timestamp = new Date().getTime();
+        const fileName = `OrionTV_v${timestamp}.apk`;
+        // 使用应用的外部文件目录，而不是系统下载目录
+        const filePath = `${dirs.DocumentDir}/${fileName}`;
+
+        const task = ReactNativeBlobUtil.config({
+          fileCache: true,
+          path: filePath,
+          timeout: UPDATE_CONFIG.DOWNLOAD_TIMEOUT,
+          // 移除 addAndroidDownloads 配置，避免使用系统下载管理器
+          // addAndroidDownloads: {
+          //   useDownloadManager: true,
+          //   notification: true,
+          //   title: UPDATE_CONFIG.NOTIFICATION.TITLE,
+          //   description: UPDATE_CONFIG.NOTIFICATION.DOWNLOADING_TEXT,
+          //   mime: "application/vnd.android.package-archive",
+          //   mediaScannable: true,
+          // },
+        }).fetch("GET", url);
+
+        // 监听下载进度
+        if (onProgress) {
+          task.progress((received: string, total: string) => {
+            const receivedNum = parseInt(received, 10);
+            const totalNum = parseInt(total, 10);
+            const progress = Math.floor((receivedNum / totalNum) * 100);
+            onProgress(progress);
+          });
+        }
+
+        const res = await task;
+        console.log(`APK downloaded successfully: ${filePath}`);
+        return res.path();
+      } catch (error) {
+        retries++;
+        console.info(`Error downloading APK (attempt ${retries}/${maxRetries}):`, error);
+        
+        if (retries === maxRetries) {
+          Toast.show({ type: "error", text1: "下载失败", text2: "APK下载失败，请检查网络连接" });
+          throw new Error(`Download failed after ${maxRetries} attempts: ${error}`);
+        }
+        
+        // 等待一段时间后重试
+        await new Promise(resolve => setTimeout(resolve, 3000 * retries));
+      }
+    }
+    
+    throw new Error("Maximum retry attempts exceeded for download");
+  }
+
+  async installApk(filePath: string): Promise<void> {
+    try {
+      // 首先检查文件是否存在
+      const exists = await ReactNativeBlobUtil.fs.exists(filePath);
+      if (!exists) {
+        throw new Error(`APK file not found: ${filePath}`);
+      }
+
+      // 使用FileViewer打开APK文件进行安装
+      // 这会触发Android的包安装器
+      await FileViewer.open(filePath, {
+        showOpenWithDialog: true, // 显示选择应用对话框
+        showAppsSuggestions: true, // 显示应用建议
+        displayName: "OrionTV Update",
+      });
+    } catch (error) {
+      console.info("Error installing APK:", error);
+      
+      // 提供更详细的错误信息
+      if (error instanceof Error) {
+        if (error.message.includes('No app found')) {
+          Toast.show({ type: "error", text1: "安装失败", text2: "未找到可安装APK的应用，请确保允许安装未知来源的应用" });
+          throw new Error('未找到可安装APK的应用，请确保允许安装未知来源的应用');
+        } else if (error.message.includes('permission')) {
+          Toast.show({ type: "error", text1: "安装失败", text2: "没有安装权限，请在设置中允许此应用安装未知来源的应用" });
+          throw new Error('没有安装权限，请在设置中允许此应用安装未知来源的应用');
+        } else {
+          Toast.show({ type: "error", text1: "安装失败", text2: "APK安装过程中出现错误" });
+        }
+      } else {
+        Toast.show({ type: "error", text1: "安装失败", text2: "APK安装过程中出现未知错误" });
+      }
+      
+      throw error;
+    }
+  }
+
+  compareVersions(v1: string, v2: string): number {
+    const parts1 = v1.split(".").map(Number);
+    const parts2 = v2.split(".").map(Number);
+
+    for (let i = 0; i < Math.max(parts1.length, parts2.length); i++) {
+      const part1 = parts1[i] || 0;
+      const part2 = parts2[i] || 0;
+
+      if (part1 > part2) return 1;
+      if (part1 < part2) 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

@@ -0,0 +1,90 @@
+import { create } from "zustand";
+import Cookies from "@react-native-cookies/cookies";
+import { api } from "@/services/api";
+import { useSettingsStore } from "./settingsStore";
+import Toast from "react-native-toast-message";
+
+interface AuthState {
+  isLoggedIn: boolean;
+  isLoginModalVisible: boolean;
+  showLoginModal: () => void;
+  hideLoginModal: () => void;
+  checkLoginStatus: (apiBaseUrl?: string) => Promise<void>;
+  logout: () => Promise<void>;
+}
+
+const useAuthStore = create<AuthState>((set) => ({
+  isLoggedIn: false,
+  isLoginModalVisible: false,
+  showLoginModal: () => set({ isLoginModalVisible: true }),
+  hideLoginModal: () => set({ isLoginModalVisible: false }),
+  checkLoginStatus: async (apiBaseUrl?: string) => {
+    if (!apiBaseUrl) {
+      set({ isLoggedIn: false, isLoginModalVisible: false });
+      return;
+    }
+    try {
+      // 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;
+          }
+        }
+      }
+      
+      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 cookies = await Cookies.get(api.baseURL);
+      if (serverConfig && serverConfig.StorageType === "localstorage" && !cookies.auth) {
+        const loginResult = await api.login().catch(() => {
+          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 });
+        }
+      }
+    } catch (error) {
+      console.info("Failed to check login status:", error);
+      if (error instanceof Error && error.message === "UNAUTHORIZED") {
+        set({ isLoggedIn: false, isLoginModalVisible: true });
+      } else {
+        set({ isLoggedIn: false });
+      }
+    }
+  },
+  logout: async () => {
+    try {
+      await Cookies.clearAll();
+      set({ isLoggedIn: false, isLoginModalVisible: true });
+    } catch (error) {
+      console.info("Failed to logout:", error);
+    }
+  },
+}));
+
+export default useAuthStore;

stores/detailStore.ts

@@ -0,0 +1,186 @@
+import { create } from "zustand";
+import { SearchResult, api } from "@/services/api";
+import { getResolutionFromM3U8 } from "@/services/m3u8";
+import { useSettingsStore } from "@/stores/settingsStore";
+import { FavoriteManager } from "@/services/storage";
+
+export type SearchResultWithResolution = SearchResult & { resolution?: string | null };
+
+interface DetailState {
+  q: string | null;
+  searchResults: SearchResultWithResolution[];
+  sources: { source: string; source_name: string; resolution: string | null | undefined }[];
+  detail: SearchResultWithResolution | null;
+  loading: boolean;
+  error: string | null;
+  allSourcesLoaded: boolean;
+  controller: AbortController | null;
+  isFavorited: boolean;
+
+  init: (q: string, preferredSource?: string, id?: string) => Promise<void>;
+  setDetail: (detail: SearchResultWithResolution) => void;
+  abort: () => void;
+  toggleFavorite: () => Promise<void>;
+}
+
+const useDetailStore = create<DetailState>((set, get) => ({
+  q: null,
+  searchResults: [],
+  sources: [],
+  detail: null,
+  loading: true,
+  error: null,
+  allSourcesLoaded: false,
+  controller: null,
+  isFavorited: false,
+
+  init: async (q, preferredSource, id) => {
+    const { controller: oldController } = get();
+    if (oldController) {
+      oldController.abort();
+    }
+    const newController = new AbortController();
+    const signal = newController.signal;
+
+    set({
+      q,
+      loading: true,
+      searchResults: [],
+      detail: null,
+      error: null,
+      allSourcesLoaded: false,
+      controller: newController,
+    });
+
+    const { videoSource } = useSettingsStore.getState();
+
+    const processAndSetResults = async (results: SearchResult[], merge = false) => {
+      const resultsWithResolution = await Promise.all(
+        results.map(async (searchResult) => {
+          let resolution;
+          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);
+            }
+          }
+          return { ...searchResult, resolution };
+        })
+      );
+
+      if (signal.aborted) return;
+
+      set((state) => {
+        const existingSources = new Set(state.searchResults.map((r) => r.source));
+        const newResults = resultsWithResolution.filter((r) => !existingSources.has(r.source));
+        const finalResults = merge ? [...state.searchResults, ...newResults] : resultsWithResolution;
+
+        return {
+          searchResults: finalResults,
+          sources: finalResults.map((r) => ({
+            source: r.source,
+            source_name: r.source_name,
+            resolution: r.resolution,
+          })),
+          detail: state.detail ?? finalResults[0] ?? null,
+        };
+      });
+    };
+
+    try {
+      // Optimization for favorite navigation
+      if (preferredSource && id) {
+        const { results: preferredResult } = await api.searchVideo(q, preferredSource, signal);
+        if (signal.aborted) return;
+        if (preferredResult.length > 0) {
+          await processAndSetResults(preferredResult, false);
+          set({ loading: false });
+        }
+        // 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]);
+
+        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);
+          }
+        });
+
+        await Promise.all(searchPromises);
+      }
+
+      if (get().searchResults.length === 0) {
+        set({ error: "未找到任何播放源" });
+      }
+
+      if (get().detail) {
+        const { source, id } = get().detail!;
+        const isFavorited = await FavoriteManager.isFavorited(source, id.toString());
+        set({ isFavorited });
+      }
+    } catch (e) {
+      if ((e as Error).name !== "AbortError") {
+        set({ error: e instanceof Error ? e.message : "获取数据失败" });
+      }
+    } finally {
+      if (!signal.aborted) {
+        set({ loading: false, allSourcesLoaded: true });
+      }
+    }
+  },
+
+  setDetail: async (detail) => {
+    set({ detail });
+    const { source, id } = detail;
+    const isFavorited = await FavoriteManager.isFavorited(source, id.toString());
+    set({ isFavorited });
+  },
+
+  abort: () => {
+    get().controller?.abort();
+  },
+
+  toggleFavorite: async () => {
+    const { detail } = get();
+    if (!detail) return;
+
+    const { source, id, title, poster, source_name, episodes, year } = detail;
+    const favoriteItem = {
+      cover: poster,
+      title,
+      poster,
+      source_name,
+      total_episodes: episodes.length,
+      search_title: get().q!,
+      year: year || "",
+    };
+
+    const newIsFavorited = await FavoriteManager.toggle(source, id.toString(), favoriteItem);
+    set({ isFavorited: newIsFavorited });
+  },
+}));
+
+export const sourcesSelector = (state: DetailState) => state.sources;
+export default useDetailStore;
+export const episodesSelectorBySource = (source: string) => (state: DetailState) =>
+  state.searchResults.find((r) => r.source === source)?.episodes || [];

stores/favoritesStore.ts

@@ -0,0 +1,32 @@
+import { create } from "zustand";
+import { Favorite, FavoriteManager } from "@/services/storage";
+
+interface FavoritesState {
+  favorites: (Favorite & { key: string })[];
+  loading: boolean;
+  error: string | null;
+  fetchFavorites: () => Promise<void>;
+}
+
+const useFavoritesStore = create<FavoritesState>((set) => ({
+  favorites: [],
+  loading: false,
+  error: null,
+  fetchFavorites: async () => {
+    set({ loading: true, error: null });
+    try {
+      const favoritesData = await FavoriteManager.getAll();
+      const favoritesArray = Object.entries(favoritesData).map(([key, value]) => ({
+        ...value,
+        key,
+      }));
+      //   favoritesArray.sort((a, b) => (b.save_time || 0) - (a.save_time || 0));
+      set({ favorites: favoritesArray, loading: false });
+    } catch (e) {
+      const error = e instanceof Error ? e.message : "获取收藏列表失败";
+      set({ error, loading: false });
+    }
+  },
+}));
+
+export default useFavoritesStore;

stores/homeStore.ts

@@ -1,6 +1,8 @@
-import { create } from 'zustand';
-import { api, SearchResult, PlayRecord } from '@/services/api';
-import { PlayRecordManager } from '@/services/storage';
+import { create } from "zustand";
+import { api, SearchResult, PlayRecord } from "@/services/api";
+import { PlayRecordManager } from "@/services/storage";
+import useAuthStore from "./authStore";
+import { useSettingsStore } from "./settingsStore";
 
 export type RowItem = (SearchResult | PlayRecord) & {
   id: string;
@@ -19,21 +21,38 @@ export type RowItem = (SearchResult | PlayRecord) & {
 
 export interface Category {
   title: string;
-  type?: 'movie' | 'tv' | 'record';
+  type?: "movie" | "tv" | "record";
   tag?: string;
+  tags?: string[];
 }
 
 const initialCategories: Category[] = [
-  { title: '最近播放', type: 'record' },
-  { title: '热门剧集', type: 'tv', tag: '热门' },
-  { title: '综艺', type: 'tv', tag: '综艺' },
-  { title: '热门电影', type: 'movie', tag: '热门' },
-  { title: '豆瓣 Top250', type: 'movie', tag: 'top250' },
-  { title: '儿童', type: 'movie', tag: '少儿' },
-  { title: '美剧', type: 'tv', tag: '美剧' },
-  { title: '韩剧', type: 'tv', tag: '韩剧' },
-  { title: '日剧', type: 'tv', tag: '日剧' },
-  { title: '日漫', type: 'tv', tag: '日本动画' },
+  { title: "最近播放", type: "record" },
+  { title: "热门剧集", type: "tv", tag: "热门" },
+  { title: "电视剧", type: "tv", tags: ["国产剧", "美剧", "英剧", "韩剧", "日剧", "港剧", "日本动画", "动画"] },
+  {
+    title: "电影",
+    type: "movie",
+    tags: [
+      "热门",
+      "最新",
+      "经典",
+      "豆瓣高分",
+      "冷门佳片",
+      "华语",
+      "欧美",
+      "韩国",
+      "日本",
+      "动作",
+      "喜剧",
+      "爱情",
+      "科幻",
+      "悬疑",
+      "恐怖",
+    ],
+  },
+  { title: "综艺", type: "tv", tag: "综艺" },
+  { title: "豆瓣 Top250", type: "movie", tag: "top250" },
 ];
 
 interface HomeState {
@@ -49,8 +68,12 @@ interface HomeState {
   loadMoreData: () => Promise<void>;
   selectCategory: (category: Category) => void;
   refreshPlayRecords: () => Promise<void>;
+  clearError: () => void;
 }
 
+// 内存缓存，应用生命周期内有效
+const dataCache = new Map<string, RowItem[]>();
+
 const useHomeStore = create<HomeState>((set, get) => ({
   categories: initialCategories,
   selectedCategory: initialCategories[0],
@@ -62,6 +85,31 @@ const useHomeStore = create<HomeState>((set, get) => ({
   error: null,
 
   fetchInitialData: async () => {
+    const { apiBaseUrl } = useSettingsStore.getState();
+    await useAuthStore.getState().checkLoginStatus(apiBaseUrl);
+    
+    const { selectedCategory } = get();
+    const cacheKey = `${selectedCategory.title}-${selectedCategory.tag || ''}`;
+    
+    // 最近播放不缓存，始终实时获取
+    if (selectedCategory.type === 'record') {
+      set({ loading: true, contentData: [], pageStart: 0, hasMore: true, error: null });
+      await get().loadMoreData();
+      return;
+    }
+    
+    // 检查缓存
+    if (dataCache.has(cacheKey)) {
+      set({ 
+        loading: false, 
+        contentData: dataCache.get(cacheKey)!, 
+        pageStart: dataCache.get(cacheKey)!.length, 
+        hasMore: false, 
+        error: null 
+      });
+      return;
+    }
+    
     set({ loading: true, contentData: [], pageStart: 0, hasMore: true, error: null });
     await get().loadMoreData();
   },
@@ -75,73 +123,163 @@ const useHomeStore = create<HomeState>((set, get) => ({
     }
 
     try {
-      if (selectedCategory.type === 'record') {
+      if (selectedCategory.type === "record") {
+        const { isLoggedIn } = useAuthStore.getState();
+        if (!isLoggedIn) {
+          set({ contentData: [], hasMore: false });
+          return;
+        }
         const records = await PlayRecordManager.getAll();
         const rowItems = Object.entries(records)
           .map(([key, record]) => {
-            const [source, id] = key.split('+');
-            return { ...record, id, source, progress: record.play_time / record.total_time, poster: record.cover, sourceName: record.source_name, episodeIndex: record.index, totalEpisodes: record.total_episodes, lastPlayed: record.save_time, play_time: record.play_time };
+            const [source, id] = key.split("+");
+            return {
+              ...record,
+              id,
+              source,
+              progress: record.play_time / record.total_time,
+              poster: record.cover,
+              sourceName: record.source_name,
+              episodeIndex: record.index,
+              totalEpisodes: record.total_episodes,
+              lastPlayed: record.save_time,
+              play_time: record.play_time,
+            };
           })
-          .filter(record => record.progress !== undefined && record.progress > 0 && record.progress < 1)
+          // .filter((record) => record.progress !== undefined && record.progress > 0 && record.progress < 1)
           .sort((a, b) => (b.lastPlayed || 0) - (a.lastPlayed || 0));
-        
+
         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 });
         } else {
-          const newItems = result.list.map(item => ({
+          const newItems = result.list.map((item) => ({
             ...item,
             id: item.title,
-            source: 'douban',
+            source: "douban",
           })) as RowItem[];
-          set(state => ({
-            contentData: pageStart === 0 ? newItems : [...state.contentData, ...newItems],
-            pageStart: state.pageStart + result.list.length,
-            hasMore: true,
-          }));
+          
+          const cacheKey = `${selectedCategory.title}-${selectedCategory.tag || ''}`;
+          
+          if (pageStart === 0) {
+            // 缓存新数据
+            dataCache.set(cacheKey, newItems);
+            set({
+              contentData: newItems,
+              pageStart: result.list.length,
+              hasMore: true,
+            });
+          } else {
+            // 增量加载时不缓存，直接追加
+            set((state) => ({
+              contentData: [...state.contentData, ...newItems],
+              pageStart: state.pageStart + result.list.length,
+              hasMore: true,
+            }));
+          }
         }
+      } else if (selectedCategory.tags) {
+        // It's a container category, do not load content, but clear current content
+        set({ contentData: [], hasMore: false });
       } else {
         set({ hasMore: false });
       }
     } catch (err: any) {
-      if (err.message === 'API_URL_NOT_SET') {
-        set({ error: '请点击右上角设置按钮，配置您的 API 地址' });
-      } else {
-        set({ error: '加载失败，请重试' });
+      let errorMessage = "加载失败，请重试";
+      
+      if (err.message === "API_URL_NOT_SET") {
+        errorMessage = "请点击右上角设置按钮，配置您的服务器地址";
+      } else if (err.message === "UNAUTHORIZED") {
+        errorMessage = "认证失败，请重新登录";
+      } 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 });
     }
   },
 
   selectCategory: (category: Category) => {
-    set({ selectedCategory: category });
-    get().fetchInitialData();
+    const currentCategory = get().selectedCategory;
+    const cacheKey = `${category.title}-${category.tag || ''}`;
+    
+    // 只有当分类或标签真正变化时才处理
+    if (currentCategory.title !== category.title || currentCategory.tag !== category.tag) {
+      set({ selectedCategory: category, contentData: [], pageStart: 0, hasMore: true, error: null });
+      
+      // 最近播放始终实时获取
+      if (category.type === 'record') {
+        get().fetchInitialData();
+        return;
+      }
+      
+      // 检查缓存，有则直接使用，无则请求
+      if (dataCache.has(cacheKey)) {
+        set({ 
+          contentData: dataCache.get(cacheKey)!, 
+          pageStart: dataCache.get(cacheKey)!.length, 
+          hasMore: false, 
+          loading: false 
+        });
+      } else {
+        get().fetchInitialData();
+      }
+    }
   },
 
   refreshPlayRecords: async () => {
+    const { apiBaseUrl } = useSettingsStore.getState();
+    await useAuthStore.getState().checkLoginStatus(apiBaseUrl);
+    const { isLoggedIn } = useAuthStore.getState();
+    if (!isLoggedIn) {
+      set((state) => {
+        const recordCategoryExists = state.categories.some((c) => c.type === "record");
+        if (recordCategoryExists) {
+          const newCategories = state.categories.filter((c) => c.type !== "record");
+          if (state.selectedCategory.type === "record") {
+            get().selectCategory(newCategories[0] || null);
+          }
+          return { categories: newCategories };
+        }
+        return {};
+      });
+      return;
+    }
     const records = await PlayRecordManager.getAll();
     const hasRecords = Object.keys(records).length > 0;
-    set(state => {
-      const recordCategoryExists = state.categories.some(c => c.type === 'record');
+    set((state) => {
+      const recordCategoryExists = state.categories.some((c) => c.type === "record");
       if (hasRecords && !recordCategoryExists) {
         return { categories: [initialCategories[0], ...state.categories] };
       }
       if (!hasRecords && recordCategoryExists) {
-        const newCategories = state.categories.filter(c => c.type !== 'record');
-        if (state.selectedCategory.type === 'record') {
-            get().selectCategory(newCategories[0] || null);
+        const newCategories = state.categories.filter((c) => c.type !== "record");
+        if (state.selectedCategory.type === "record") {
+          get().selectCategory(newCategories[0] || null);
         }
         return { categories: newCategories };
       }
       return {};
     });
-    if (get().selectedCategory.type === 'record') {
-      get().fetchInitialData();
-    }
+    
+    get().fetchInitialData();
+  },
+  
+  clearError: () => {
+    set({ error: null });
   },
 }));
 
-export default useHomeStore;
+export default useHomeStore;