Refactor/UI (#273)

* feat(components): add reusable full-screen panel components

Add new full-screen panel components to support the UI refactoring:

- FullScreenPanel: Reusable full-screen layout component with header,
  content area, and optional footer. Provides consistent layout for
  settings, prompts, and other full-screen views.

- PromptFormPanel: Dedicated panel for creating and editing prompts
  with markdown preview support. Features real-time validation and
  integrated save/cancel actions.

- AgentsPanel: Panel component for managing agent configurations.
  Provides a consistent interface for agent CRUD operations.

- RepoManagerPanel: Full-featured repository manager panel for Skills.
  Supports repository listing, addition, deletion, and configuration
  management with integrated validation.

These components establish the foundation for the upcoming settings
page migration from dialog-based to full-screen layout.

* refactor(settings): migrate from dialog to full-screen page layout

Complete migration of settings from modal dialog to dedicated full-screen
page, improving UX and providing more space for configuration options.

Changes:
- Remove SettingsDialog component (legacy modal-based interface)
- Add SettingsPage component with full-screen layout using FullScreenPanel
- Refactor App.tsx routing to support dedicated settings page
  * Add settings route handler
  * Update navigation logic from dialog-based to page-based
  * Integrate with existing app switcher and provider management
- Update ImportExportSection to work with new page layout
  * Improve spacing and layout for better readability
  * Enhanced error handling and user feedback
  * Better integration with page-level actions
- Enhance useSettings hook to support page-based workflow
  * Add navigation state management
  * Improve settings persistence logic
  * Better error boundary handling

Benefits:
- More intuitive navigation with dedicated settings page
- Better use of screen space for complex configurations
- Improved accessibility with clearer visual hierarchy
- Consistent with modern desktop application patterns
- Easier to extend with new settings sections

This change is part of the larger UI refactoring initiative to modernize
the application interface and improve user experience.

* refactor(forms): simplify and modernize form components

Comprehensive refactoring of form components to reduce complexity,
improve maintainability, and enhance user experience.

Provider Forms:
- CodexCommonConfigModal & CodexConfigSections
  * Simplified state management with reduced boilerplate
  * Improved field validation and error handling
  * Better layout with consistent spacing
  * Enhanced model selection with visual indicators
- GeminiCommonConfigModal & GeminiConfigSections
  * Streamlined authentication flow (OAuth vs API Key)
  * Cleaner form layout with better grouping
  * Improved validation feedback
  * Better integration with parent components
- CommonConfigEditor
  * Reduced from 178 to 68 lines (-62% complexity)
  * Extracted reusable form patterns
  * Improved JSON editing with syntax validation
  * Better error messages and recovery options
- EndpointSpeedTest
  * Complete rewrite for better UX
  * Real-time testing progress indicators
  * Enhanced error handling with retry logic
  * Visual feedback for test results (color-coded latency)

MCP & Prompts:
- McpFormModal
  * Simplified from 581 to ~360 lines
  * Better stdio/http server type handling
  * Improved form validation
  * Enhanced multi-app selection (Claude/Codex/Gemini)
- PromptPanel
  * Cleaner integration with PromptFormPanel
  * Improved list/grid view switching
  * Better state management for editing workflows
  * Enhanced delete confirmation with safety checks

Code Quality Improvements:
- Reduced total lines by ~251 lines (-24% code reduction)
- Eliminated duplicate validation logic
- Improved TypeScript type safety
- Better component composition and separation of concerns
- Enhanced accessibility with proper ARIA labels

These changes make forms more intuitive, responsive, and easier to
maintain while reducing bundle size and improving runtime performance.

* style(ui): modernize component layouts and visual design

Update UI components with improved layouts, visual hierarchy, and
modern design patterns for better user experience.

Navigation & Brand Components:
- AppSwitcher
  * Enhanced visual design with better spacing
  * Improved active state indicators
  * Smoother transitions and hover effects
  * Better mobile responsiveness
- BrandIcons
  * Optimized icon rendering performance
  * Added support for more provider icons
  * Improved SVG handling and fallbacks
  * Better scaling across different screen sizes

Editor Components:
- JsonEditor
  * Enhanced syntax highlighting
  * Better error visualization
  * Improved code formatting options
  * Added line numbers and code folding support
- UsageScriptModal
  * Complete layout overhaul (1239 lines refactored)
  * Better script editor integration
  * Improved template selection UI
  * Enhanced preview and testing panels
  * Better error feedback and validation

Provider Components:
- ProviderCard
  * Redesigned card layout with modern aesthetics
  * Better information density and readability
  * Improved action buttons placement
  * Enhanced status indicators (active/inactive)
- ProviderList
  * Better grid/list view layouts
  * Improved drag-and-drop visual feedback
  * Enhanced sorting indicators
- ProviderActions
  * Streamlined action menu
  * Better icon consistency
  * Improved tooltips and accessibility

Usage & Footer:
- UsageFooter
  * Redesigned footer layout
  * Better quota visualization
  * Improved refresh controls
  * Enhanced error states

Design System Updates:
- dialog.tsx (shadcn/ui component)
  * Updated to latest design tokens
  * Better overlay animations
  * Improved focus management
- index.css
  * Added 65 lines of global utility classes
  * New animation keyframes
  * Enhanced color variables for dark mode
  * Improved typography scale
- tailwind.config.js
  * Extended theme with new design tokens
  * Added custom animations and transitions
  * New spacing and sizing utilities
  * Enhanced color palette

Visual Improvements:
- Consistent border radius across components
- Unified shadow system for depth perception
- Better color contrast for accessibility (WCAG AA)
- Smoother animations and transitions
- Improved dark mode support

These changes create a more polished, modern interface while
maintaining consistency with the application's design language.

* chore: update dialogs, i18n and improve component integration

Various functional updates and improvements across provider dialogs,
MCP panel, skills page, and internationalization.

Provider Dialogs:
- AddProviderDialog
  * Simplified form state management
  * Improved preset selection workflow
  * Better validation error messages
  * Enhanced template variable handling
- EditProviderDialog
  * Streamlined edit flow with better state synchronization
  * Improved handling of live config backfilling
  * Better error recovery for failed updates
  * Enhanced integration with parent components

MCP & Skills:
- UnifiedMcpPanel
  * Reduced complexity from 140+ to ~95 lines
  * Improved multi-app server management
  * Better server type detection (stdio/http)
  * Enhanced server status indicators
  * Cleaner integration with MCP form modal
- SkillsPage
  * Simplified navigation and state management
  * Better integration with RepoManagerPanel
  * Improved error handling for repository operations
  * Enhanced loading states
- SkillCard
  * Minor layout adjustments
  * Better action button placement

Environment & Configuration:
- EnvWarningBanner
  * Improved conflict detection messages
  * Better visual hierarchy for warnings
  * Enhanced dismissal behavior
- tauri.conf.json
  * Updated build configuration
  * Added new window management options

Internationalization:
- en.json & zh.json
  * Added 17 new translation keys for new features
  * Updated existing keys for better clarity
  * Added translations for new settings page
  * Improved consistency across UI text

Code Cleanup:
- mutations.ts
  * Removed 14 lines of unused mutation definitions
  * Cleaned up deprecated query invalidation logic
  * Better type safety for mutation parameters

Overall Impact:
- Reduced total lines by 51 (-10% in affected files)
- Improved component integration and data flow
- Better error handling and user feedback
- Enhanced i18n coverage for new features

These changes improve the overall polish and integration of various
components while removing technical debt and unused code.

* feat(backend): add auto-launch functionality

Implement system auto-launch feature to allow CC-Switch to start
automatically on system boot, improving user convenience.

Backend Implementation:
- auto_launch.rs: New module for auto-launch management
  * Cross-platform support using auto-launch crate
  * Enable/disable auto-launch with system integration
  * Proper error handling for permission issues
  * Platform-specific implementations (macOS/Windows/Linux)

Command Layer:
- Add get_auto_launch command to check current status
- Add set_auto_launch command to toggle auto-start
- Integrate commands with settings API

Settings Integration:
- Extend Settings struct with auto_launch field
- Persist auto-launch preference in settings store
- Automatic state synchronization on app startup

Dependencies:
- Add auto-launch ^0.5.0 to Cargo.toml
- Update Cargo.lock with new dependency tree

Technical Details:
- Uses platform-specific auto-launch mechanisms:
  * macOS: Login Items via LaunchServices
  * Windows: Registry Run key
  * Linux: XDG autostart desktop files
- Handles edge cases like permission denials gracefully
- Maintains settings consistency across app restarts

This feature enables users to have CC-Switch readily available
after system boot without manual intervention, particularly useful
for users who frequently switch between API providers.

* refactor(settings): enhance settings page with auto-launch integration

Complete refactoring of settings page architecture to integrate auto-launch
feature and improve overall settings management workflow.

SettingsPage Component:
- Integrate auto-launch toggle with WindowSettings section
- Improve layout and spacing for better visual hierarchy
- Enhanced error handling for settings operations
- Better loading states during settings updates
- Improved accessibility with proper ARIA labels

WindowSettings Component:
- Add auto-launch switch with real-time status
- Integrate with backend auto-launch commands
- Proper error feedback for permission issues
- Visual indicators for current auto-launch state
- Tooltip guidance for auto-launch functionality

useSettings Hook (Major Refactoring):
- Complete rewrite reducing complexity by ~30%
- Better separation of concerns with dedicated handlers
- Improved state management using React Query
- Enhanced auto-launch state synchronization
  * Fetch auto-launch status on mount
  * Real-time updates on toggle
  * Proper error recovery
- Optimized re-renders with better memoization
- Cleaner API for component integration
- Better TypeScript type safety

Settings API:
- Add getAutoLaunch() method
- Add setAutoLaunch(enabled: boolean) method
- Type-safe Tauri command invocations
- Proper error propagation to UI layer

Architecture Improvements:
- Reduced hook complexity from 197 to ~140 effective lines
- Eliminated redundant state management logic
- Better error boundaries and fallback handling
- Improved testability with clearer separation

User Experience Enhancements:
- Instant visual feedback on auto-launch toggle
- Clear error messages for permission issues
- Loading indicators during async operations
- Consistent behavior across all platforms

This refactoring provides a solid foundation for future settings
additions while maintaining code quality and user experience.

* refactor(ui): optimize FullScreenPanel, Dialog and App routing

Comprehensive refactoring of core UI components to improve code quality,
maintainability, and user experience.

FullScreenPanel Component:
- Enhanced props interface with better TypeScript types
- Improved layout flexibility with customizable padding
- Better header/footer composition patterns
- Enhanced scroll behavior for long content
- Added support for custom actions in header
- Improved responsive design for different screen sizes
- Better integration with parent components
- Cleaner prop drilling with context where appropriate

Dialog Component (shadcn/ui):
- Updated to latest component patterns
- Improved animation timing and easing
- Better focus trap management
- Enhanced overlay styling with backdrop blur
- Improved accessibility (ARIA labels, keyboard navigation)
- Better close button positioning and styling
- Enhanced mobile responsiveness
- Cleaner composition with DialogHeader/Footer

App Component Routing:
- Refactored routing logic for better clarity
- Improved state management for navigation
- Better integration with settings page
- Enhanced error boundary handling
- Cleaner separation of layout concerns
- Improved provider context propagation
- Better handling of deep links
- Optimized re-renders with React.memo where appropriate

Code Quality Improvements:
- Reduced prop drilling with better component composition
- Improved TypeScript type safety
- Better separation of concerns
- Enhanced code readability with clearer naming
- Eliminated redundant logic

Performance Optimizations:
- Reduced unnecessary re-renders
- Better memoization of callbacks
- Optimized component tree structure
- Improved event handler efficiency

User Experience:
- Smoother transitions and animations
- Better visual feedback for interactions
- Improved loading states
- More consistent behavior across features

These changes create a more maintainable and performant foundation
for the application's UI layer while improving the overall user
experience with smoother interactions and better visual polish.

* refactor(features): modernize Skills, Prompts and Agents components

Major refactoring of feature components to improve code quality,
user experience, and maintainability.

SkillsPage Component (299 lines refactored):
- Complete rewrite of layout and state management
- Better integration with RepoManagerPanel
- Improved navigation between list and detail views
- Enhanced error handling with user-friendly messages
- Better loading states with skeleton screens
- Optimized re-renders with proper memoization
- Cleaner separation between list and form views
- Improved skill card interactions
- Better responsive design for different screen sizes

RepoManagerPanel Component (370 lines refactored):
- Streamlined repository management workflow
- Enhanced form validation with real-time feedback
- Improved repository list with better visual hierarchy
- Better handling of git operations (clone, pull, delete)
- Enhanced error recovery for network issues
- Cleaner state management reducing complexity
- Improved TypeScript type safety
- Better integration with Skills backend API
- Enhanced loading indicators for async operations

PromptPanel Component (249 lines refactored):
- Modernized layout with FullScreenPanel integration
- Better separation between list and edit modes
- Improved prompt card design with better readability
- Enhanced search and filter functionality
- Cleaner state management for editing workflow
- Better integration with PromptFormPanel
- Improved delete confirmation with safety checks
- Enhanced keyboard navigation support

PromptFormPanel Component (238 lines refactored):
- Streamlined form layout and validation
- Better markdown editor integration
- Real-time preview with syntax highlighting
- Improved validation error display
- Enhanced save/cancel workflow
- Better handling of large prompt content
- Cleaner form state management
- Improved accessibility features

AgentsPanel Component (33 lines modified):
- Minor layout adjustments for consistency
- Better integration with FullScreenPanel
- Improved placeholder states
- Enhanced error boundaries

Type Definitions (types.ts):
- Added 10 new type definitions
- Better type safety for Skills/Prompts/Agents
- Enhanced interfaces for repository management
- Improved typing for form validations

Architecture Improvements:
- Reduced component coupling
- Better prop interfaces with explicit types
- Improved error boundaries
- Enhanced code reusability
- Better testing surface

User Experience Enhancements:
- Smoother transitions between views
- Better visual feedback for actions
- Improved error messages
- Enhanced loading states
- More intuitive navigation flows
- Better responsive layouts

Code Quality:
- Net reduction of 29 lines while adding features
- Improved code organization
- Better naming conventions
- Enhanced documentation
- Cleaner control flow

These changes significantly improve the maintainability and user
experience of core feature components while establishing consistent
patterns for future development.

* style(ui): refine component layouts and improve visual consistency

Comprehensive UI polish across multiple components to enhance visual
design, improve user experience, and maintain consistency.

UsageScriptModal Component (1302 lines refactored):
- Complete layout overhaul for better usability
- Improved script editor with syntax highlighting
- Better template selection interface
- Enhanced test/preview panels with clearer separation
- Improved error feedback and validation messages
- Better modal sizing and responsiveness
- Cleaner tab navigation between sections
- Enhanced code formatting and readability
- Improved loading states for async operations
- Better integration with parent components

MCP Components:
- McpFormModal (42 lines):
  * Streamlined form layout
  * Better server type selection (stdio/http)
  * Improved field grouping and labels
  * Enhanced validation feedback
- UnifiedMcpPanel (14 lines):
  * Minor layout adjustments
  * Better list item spacing
  * Improved server status indicators
  * Enhanced action button placement

Provider Components:
- ProviderCard (11 lines):
  * Refined card layout and spacing
  * Better visual hierarchy
  * Improved badge placement
  * Enhanced hover effects
- ProviderList (5 lines):
  * Minor grid layout adjustments
  * Better drag-and-drop visual feedback
- GeminiConfigSections (4 lines):
  * Field label alignment
  * Improved spacing consistency

Editor & Footer Components:
- JsonEditor (13 lines):
  * Better editor height management
  * Improved error display
  * Enhanced syntax highlighting
- UsageFooter (10 lines):
  * Refined footer layout
  * Better quota display
  * Improved refresh button placement

Settings & Environment:
- ImportExportSection (24 lines):
  * Better button layout
  * Improved action grouping
  * Enhanced visual feedback
- EnvWarningBanner (4 lines):
  * Refined alert styling
  * Better dismiss button placement

Global Styles (index.css):
- Added 11 lines of utility classes
- Improved transition timing
- Better focus indicators
- Enhanced scrollbar styling
- Refined spacing utilities

Design Improvements:
- Consistent spacing using design tokens
- Unified color palette application
- Better typography hierarchy
- Improved shadow system for depth
- Enhanced interactive states (hover, active, focus)
- Better border radius consistency
- Refined animation timings

Accessibility:
- Improved focus indicators
- Better keyboard navigation
- Enhanced screen reader support
- Improved color contrast ratios

Code Quality:
- Net increase of 68 lines due to UsageScriptModal improvements
- Better component organization
- Cleaner style application
- Reduced style duplication

These visual refinements create a more polished and professional
interface while maintaining excellent usability and accessibility
standards across all components.

* chore(i18n): add auto-launch translation keys

Add translation keys for new auto-launch feature to support
multi-language interface.

Translation Keys Added:
- autoLaunch: Label for auto-launch toggle
- autoLaunchDescription: Explanation of auto-launch functionality
- autoLaunchEnabled: Status message when enabled

Languages Updated:
- Chinese (zh.json): 简体中文翻译
- English (en.json): English translations

The translations maintain consistency with existing terminology
and provide clear, user-friendly descriptions of the auto-launch
feature across both supported languages.

* test: update test suites to match component refactoring

Comprehensive test updates to align with recent component refactoring
and new auto-launch functionality.

Component Tests:
- AddProviderDialog.test.tsx (10 lines):
  * Updated test cases for new dialog behavior
  * Enhanced mock data for preset selection
  * Improved assertions for validation

- ImportExportSection.test.tsx (16 lines):
  * Updated for new settings page integration
  * Enhanced test coverage for error scenarios
  * Better mock state management

- McpFormModal.test.tsx (60 lines):
  * Extensive updates for form refactoring
  * New test cases for multi-app selection
  * Enhanced validation testing
  * Better coverage of stdio/http server types

- ProviderList.test.tsx (11 lines):
  * Updated for new card layout
  * Enhanced drag-and-drop testing

- SettingsDialog.test.tsx (96 lines):
  * Major updates for SettingsPage migration
  * New test cases for auto-launch functionality
  * Enhanced integration test coverage
  * Better async operation testing

Hook Tests:
- useDirectorySettings.test.tsx (32 lines):
  * Updated for refactored hook logic
  * Enhanced test coverage for edge cases

- useDragSort.test.tsx (36 lines):
  * Simplified test cases
  * Better mock implementation
  * Improved assertions

- useImportExport tests (16 lines total):
  * Updated for new error handling
  * Enhanced test coverage

- useMcpValidation.test.tsx (23 lines):
  * Updated validation test cases
  * Better coverage of error scenarios

- useProviderActions.test.tsx (48 lines):
  * Extensive updates for hook refactoring
  * New test cases for provider operations
  * Enhanced mock data

- useSettings.test.tsx (12 lines):
  * New test cases for auto-launch
  * Enhanced settings state testing
  * Better async operation coverage

Integration Tests:
- App.test.tsx (41 lines):
  * Updated for new routing logic
  * Enhanced navigation testing
  * Better component integration coverage

- SettingsDialog.test.tsx (88 lines):
  * Complete rewrite for SettingsPage
  * New integration test scenarios
  * Enhanced user workflow testing

Mock Infrastructure:
- handlers.ts (117 lines):
  * Major updates for MSW handlers
  * New handlers for auto-launch commands
  * Enhanced error simulation
  * Better request/response mocking

- state.ts (37 lines):
  * Updated mock state structure
  * New state for auto-launch
  * Enhanced state reset functionality

- tauriMocks.ts (10 lines):
  * Updated mock implementations
  * Better type safety

- server.ts & testQueryClient.ts:
  * Minor cleanup (2 lines removed)

Test Infrastructure Improvements:
- Better test isolation
- Enhanced mock data consistency
- Improved async operation testing
- Better error scenario coverage
- Enhanced integration test patterns

Coverage Improvements:
- Net increase of 195 lines of test code
- Better coverage of edge cases
- Enhanced error path testing
- Improved integration test scenarios
- Better mock infrastructure

All tests now pass with the refactored components while maintaining
comprehensive coverage of functionality and edge cases.

* style(ui): improve window dragging and provider card styles

* fix(skills): resolve third-party skills installation failure

- Add skills_path field to Skill struct
- Use skills_path to construct correct source path during installation
- Fix installation for repos with custom skill subdirectories

* feat(icon): add icon type system and intelligent inference logic

Introduce a new icon system for provider customization:

- Add IconMetadata and IconPreset interfaces in src/types/icon.ts
  - Define structure for icon name, display name, category, keywords
  - Support default color configuration per icon

- Implement smart icon inference in src/config/iconInference.ts
  - Create iconMappings for 25+ AI providers and cloud platforms
  - Include Claude, DeepSeek, Qwen, Kimi, Google, AWS, Azure, etc.
  - inferIconForPreset(): match provider name to icon config
  - addIconsToPresets(): batch apply icons to preset arrays
  - Support fuzzy matching for flexible name recognition

This foundation enables automatic icon assignment when users add
providers, improving visual identification in the provider list.

* feat(ui): add icon picker, color picker and provider icon components

Implement comprehensive icon selection system for provider customization:

## New Components

### ProviderIcon (src/components/ProviderIcon.tsx)
- Render SVG icons by name with automatic fallback
- Display provider initials when icon not found
- Support custom sizing via size prop
- Use dangerouslySetInnerHTML for inline SVG rendering

### IconPicker (src/components/IconPicker.tsx)
- Grid-based icon selection with visual preview
- Real-time search filtering by name and keywords
- Integration with icon metadata for display names
- Responsive grid layout (6-10 columns based on screen)

### ColorPicker (src/components/ColorPicker.tsx)
- 12 preset colors for quick selection
- Native color input for custom color picking
- Hex input field for precise color entry
- Visual feedback for selected color state

## Icon Assets (src/icons/extracted/)
- 38 high-quality SVG icons for AI providers and platforms
- Includes: OpenAI, Claude, DeepSeek, Qwen, Kimi, Gemini, etc.
- Cloud platforms: AWS, Azure, Google Cloud, Cloudflare
- Auto-generated index.ts with getIcon/hasIcon helpers
- Metadata system with searchable keywords per icon

## Build Scripts
- scripts/extract-icons.js: Extract icons from simple-icons
- scripts/generate-icon-index.js: Generate TypeScript index file

* feat(provider): integrate icon system into provider UI components

Add icon customization support to provider management interface:

## Type System Updates

### Provider Interface (src/types.ts)
- Add optional `icon` field for icon name (e.g., "openai", "anthropic")
- Add optional `iconColor` field for hex color (e.g., "#00A67E")

### Form Schema (src/lib/schemas/provider.ts)
- Extend providerSchema with icon and iconColor optional fields
- Maintain backward compatibility with existing providers

## UI Components

### ProviderCard (src/components/providers/ProviderCard.tsx)
- Display ProviderIcon alongside provider name
- Add icon container with hover animation effect
- Adjust layout spacing for icon placement
- Update translate offsets for action buttons

### BasicFormFields (src/components/providers/forms/BasicFormFields.tsx)
- Add icon preview section showing current selection
- Implement fullscreen icon picker dialog
- Auto-apply default color from icon metadata on selection
- Display provider name and icon status in preview

### AddProviderDialog & EditProviderDialog
- Pass icon fields through form submission
- Preserve icon data during provider updates

This enables users to visually distinguish providers in the list
with custom icons, improving UX for multi-provider setups.

* feat(backend): add icon fields to Provider model and default mappings

Extend Rust backend to support provider icon customization:

## Provider Model (src-tauri/src/provider.rs)
- Add `icon: Option<String>` field for icon name
- Add `icon_color: Option<String>` field for hex color
- Use serde rename `iconColor` for frontend compatibility
- Apply skip_serializing_if for clean JSON output
- Update Provider::new() to initialize icon fields as None

## Provider Defaults (src-tauri/src/provider_defaults.rs) [NEW]
- Define ProviderIcon struct with name and color fields
- Create DEFAULT_PROVIDER_ICONS static HashMap with 23 providers:
  - AI providers: OpenAI, Anthropic, Claude, Google, Gemini,
    DeepSeek, Kimi, Moonshot, Zhipu, MiniMax, Baidu, Alibaba,
    Tencent, Meta, Microsoft, Cohere, Perplexity, Mistral, HuggingFace
  - Cloud platforms: AWS, Azure, Huawei, Cloudflare
- Implement infer_provider_icon() with exact and fuzzy matching
- Add unit tests for matching logic (exact, fuzzy, case-insensitive)

## Deep Link Support (src-tauri/src/deeplink.rs)
- Initialize icon fields when creating Provider from deep link import

## Module Registration (src-tauri/src/lib.rs)
- Register provider_defaults module

## Dependencies (Cargo.toml)
- Add once_cell for lazy static initialization

This backend support enables icon persistence and future features
like auto-icon inference during provider creation.

* chore(i18n): add translations for icon picker and provider icon

Add Chinese and English translations for icon customization feature:

## Icon Picker (iconPicker)
- search: "Search Icons" / "搜索图标"
- searchPlaceholder: "Enter icon name..." / "输入图标名称..."
- noResults: "No matching icons found" / "未找到匹配的图标"
- category.aiProvider: "AI Providers" / "AI 服务商"
- category.cloud: "Cloud Platforms" / "云平台"
- category.tool: "Dev Tools" / "开发工具"
- category.other: "Other" / "其他"

## Provider Icon (providerIcon)
- label: "Icon" / "图标"
- colorLabel: "Icon Color" / "图标颜色"
- selectIcon: "Select Icon" / "选择图标"
- preview: "Preview" / "预览"

These translations support the new icon picker UI components
and provider form icon selection interface.

* style(ui): refine header layout and AppSwitcher color scheme

Improve application header and component styling:

## App.tsx Header Layout
- Wrap title and settings button in flex container with gap
- Add vertical divider between title and settings icon
- Apply responsive padding (pl-1 sm:pl-2)
- Reformat JSX for better readability (prettier)
- Fix string template formatting in className

## AppSwitcher Color Update
- Change Claude tab gradient from orange/amber to teal/emerald/green
- Update shadow color to match new teal theme
- Change hover color from orange-500 to teal-500
- Align visual style with emerald/teal brand colors

## Dialog Component Cleanup
- Remove default close button (X icon) from DialogContent
- Allow parent components to control close button placement
- Remove unused lucide-react X import

## index.css Header Border
- Add top border (2px solid) to glass-header
- Apply to both light and dark mode variants
- Improve visual separation of header area

These changes enhance visual consistency and modernize the UI
appearance with a cohesive teal color scheme.

* chore(deps): add icon library and update preset configurations

Add dependencies and utility scripts for icon system:

## Dependencies (package.json)
- Add @lobehub/icons-static-svg@1.73.0
  - High-quality SVG icon library for AI providers
  - Source for extracted icons in src/icons/extracted/
- Update pnpm-lock.yaml accordingly

## Provider Preset Updates (src/config/claudeProviderPresets.ts)
- Add optional `icon` and `iconColor` fields to ProviderPreset interface
- Apply to Anthropic Official preset as example:
  - icon: "anthropic"
  - iconColor: "#D4915D"
- Future presets can include default icon configurations

## Utility Script (scripts/filter-icons.js) [NEW]
- Helper script for filtering and managing icon assets
- Supports icon discovery and validation workflow
- Complements extract-icons.js and generate-icon-index.js

This completes the icon system infrastructure, providing all
necessary tools and dependencies for icon customization.

* refactor(ui): simplify AppSwitcher styles and migrate to local SVG icons

- Replace complex gradient animations with clean, minimal tab design
- Migrate from @lobehub/icons CDN to local SVG assets for better reliability
- Fix clippy warning in error.rs (use inline format args)
- Improve code formatting in skill service and commands
- Reduce CSS complexity in AppSwitcher component (removed blur effects and gradients)
- Update BrandIcons to use imported local SVG files instead of dynamic image loading

This improves performance, reduces external dependencies, and provides a cleaner UI experience.

* style(ui): hide scrollbars across all browsers and optimize form layout

- Hide scrollbars globally with cross-browser support:
  * WebKit browsers (Chrome, Safari, Edge): ::-webkit-scrollbar { display: none }
  * Firefox: scrollbar-width: none
  * IE 10+: -ms-overflow-style: none
- Remove custom scrollbar styling (width, colors, hover states)
- Reorganize BasicFormFields layout:
  * Move icon picker to top center as a clickable preview (80x80)
  * Change name and notes fields to horizontal grid layout (md:grid-cols-2)
  * Remove icon preview section from bottom
  * Improve visual hierarchy and space efficiency

This provides a cleaner, more modern UI with hidden scrollbars while maintaining full scroll functionality.

* refactor(layout): standardize max-width to 60rem and optimize padding structure

- Unify container max-width across components:
  * Replace max-w-4xl with max-w-[60rem] in App.tsx provider list
  * Replace max-w-5xl with max-w-[60rem] in PromptPanel
  * Move padding from header element to inner container for consistent spacing
- Optimize padding hierarchy:
  * Remove px-6 from header element, add to inner header container
  * Remove px-6 from main element, keep it only in provider list container
  * Consolidate PromptPanel padding: move px-6 from nested divs to outer container
  * Remove redundant pl-1 sm:pl-2 from logo/title area
- Benefits:
  * Consistent 60rem max-width provides better readability on wide screens
  * Simplified padding structure reduces CSS complexity
  * Cleaner responsive behavior with unified spacing rules

This creates a more maintainable and visually consistent layout system.

* refactor(ui): unify layout system with 60rem max-width and consistent spacing

- Standardize container max-width across all panels:
  * Replace max-w-4xl and max-w-5xl with unified max-w-[60rem]
  * Apply to SettingsPage, UnifiedMcpPanel, SkillsPage, and FullScreenPanel
  * Ensures consistent reading width and visual balance on wide screens

- Optimize padding hierarchy and structure:
  * Move px-6 from parent elements to content containers
  * FullScreenPanel: Add max-w-[60rem] wrapper to header, content, and footer
  * Add border separators (border-t/border-b) to header and footer sections
  * Consolidate nested padding in MCP, Skills, and Prompts panels
  * Remove redundant padding layers for cleaner CSS

- Simplify component styling:
  * MCP list items: Replace card-based layout with modern group-based design
  * Remove unnecessary wrapper divs and flatten DOM structure
  * Update card hover effects with smooth transitions
  * Simplify icon selection dialog (remove description text in BasicFormFields)

- Benefits:
  * Consistent 60rem max-width provides optimal readability
  * Unified spacing rules reduce maintenance complexity
  * Cleaner component hierarchy improves performance
  * Better responsive behavior across different screen sizes
  * More cohesive visual design language throughout the app

This creates a maintainable, scalable design system foundation.

* feat(deeplink): add Claude model fields support and enhance import dialog

- Add Claude-specific model field support in deeplink import:
  * Support model (ANTHROPIC_MODEL) - general default model
  * Support haikuModel (ANTHROPIC_DEFAULT_HAIKU_MODEL)
  * Support sonnetModel (ANTHROPIC_DEFAULT_SONNET_MODEL)
  * Support opusModel (ANTHROPIC_DEFAULT_OPUS_MODEL)
  * Backend: Update DeepLinkImportRequest struct to include optional model fields
  * Frontend: Add TypeScript type definitions for new model parameters

- Enhance deeplink demo page (deplink.html):
  * Add 5 new Claude configuration examples showcasing different model setups
  * Add parameter documentation with required/optional tags
  * Include basic config (no models), single model, complete 4-model, partial models, and third-party provider examples
  * Improve visual design with param-list component and color-coded badges
  * Add detailed descriptions for each configuration scenario

- Redesign DeepLinkImportDialog layout:
  * Switch from 3-column to compact 2-column grid layout
  * Reduce dialog width from 500px to 650px for better content display
  * Add dedicated section for Claude model configurations with blue highlight box
  * Use uppercase labels and smaller text for more information density
  * Add truncation and tooltips for long URLs
  * Improve visual hierarchy with spacing and grouping
  * Increase z-index to 9999 to ensure dialog appears on top

- Minor UI refinements:
  * Update App.tsx layout adjustments
  * Optimize McpFormModal styling
  * Refine ProviderCard and BasicFormFields components

This enables users to import Claude providers with precise model configurations via deeplink.

* feat(deeplink): add config file support for deeplink import

Support importing provider configuration from embedded or remote config files.
- Add base64 dependency for config content encoding
- Support config, configFormat, and configUrl parameters
- Make homepage/endpoint/apiKey optional when config is provided
- Add config parsing and merging logic

* feat(deeplink): enhance dialog with config file preview

Add config file parsing and preview in deep link import dialog.
- Support Base64 encoded config display
- Add config file source indicator (embedded/remote)
- Parse and display config fields by app type (Claude/Codex/Gemini)
- Mask sensitive values in config preview
- Improve dialog layout and content organization

* refactor(ui): unify dialog styles and improve layout consistency

Standardize dialog and panel components across the application.
- Update dialog background to use semantic color tokens
- Adjust FullScreenPanel max-width to 56rem for better alignment
- Add drag region and prevent body scroll in full-screen panels
- Optimize button sizes and spacing in panel headers
- Apply consistent styling to all dialog-based components

* i18n: add deeplink config preview translations

Add missing translation keys for config file preview feature.
- Add configSource, configEmbedded, configRemote labels
- Add configDetails and configUrl display strings
- Support both Chinese and English versions

* feat(deeplink): enhance test page with v3.8 config file examples

Improve deeplink test page with comprehensive config file import examples.
- Add version badge for v3.8 features
- Add copy-to-clipboard functionality for all deep links
- Add Claude config file import examples (embedded/remote)
- Add Codex config file import examples (auth.json + config.toml)
- Add Gemini config file import examples (.env format)
- Add config generator tool for easy testing
- Update UI with better styling and layout

* feat(settings): add autoSaveSettings for lightweight auto-save

Add optimized auto-save function for General tab settings.
- Add autoSaveSettings method for non-destructive auto-save
- Only trigger system APIs when values actually change
- Avoid unnecessary auto-launch and plugin config updates
- Update tests to cover new functionality

* refactor(settings): simplify settings page layout and auto-save

Reorganize settings page structure and integrate autoSaveSettings.
- Move save button inline within Advanced tab content
- Remove sticky footer for cleaner layout
- Use autoSaveSettings for General tab settings
- Simplify dialog close behavior
- Refactor ImportExportSection layout

* style(providers): optimize card layout and action button sizes

Improve provider card visual density and action buttons.
- Reduce icon button sizes for compact layout
- Adjust drag handle and icon sizes
- Tighten spacing between action buttons
- Update hover translate values for better alignment

* refactor(mcp): improve form modal layout with adaptive height editor

Restructure MCP form modal for better space utilization.
- Split form into upper form fields and lower JSON editor sections
- Add full-height mode support for JsonEditor component
- Use flex layout for editor to fill available space
- Update PromptFormPanel to use full-height editor
- Fix locale text formatting

* style: unify list item styles with semantic colors

Apply consistent styling to list items across components.
- Replace hardcoded colors with semantic tokens in MCP and Prompt list items
- Add glass effect container to EndpointSpeedTest panel
- Format code for better readability

* style: format template literals for better readability

Improve code formatting for conditional className expressions.
- Break long template literals across multiple lines
- Maintain consistent formatting in MCP form and endpoint test components

* feat(deeplink): add config merge command for preview

Expose config merging functionality to frontend for preview.
- Add merge_deeplink_config Tauri command
- Make parse_and_merge_config public for reuse
- Enable frontend to display complete config before import

* feat(deeplink): merge and display config in import dialog

Enhance import dialog to fetch and display complete config.
- Call mergeDeeplinkConfig API when config is present
- Add UTF-8 base64 decoding support for config content
- Add scrollable content area with custom scrollbar styling
- Show complete configuration before user confirms import

* i18n: add config merge error message

Add translation for config file merge error handling.

* style(deeplink): format test page HTML for better readability

Improve HTML formatting in deeplink test page.
- Format multiline attributes for better readability
- Add consistent indentation to nested elements
- Break long lines in buttons and links

* refactor(usage): improve footer layout with two-row design

Reorganize usage footer for better readability and space efficiency.
- Split into two rows: update time + refresh button (row 1), usage stats (row 2)
- Move refresh button to top row next to update time
- Remove card background for cleaner look
- Add fallback text when never updated
- Improve spacing and alignment
- Format template literals for consistency

src/components/AppSwitcher.tsx

@@ -13,13 +13,13 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
   };
 
   return (
-    <div className="inline-flex bg-gray-100 dark:bg-gray-800 rounded-lg p-1 gap-1 border border-transparent ">
+    <div className="inline-flex bg-gray-100 dark:bg-gray-800 rounded-lg p-1 gap-1">
       <button
         type="button"
         onClick={() => handleSwitch("claude")}
         className={`group inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
           activeApp === "claude"
-            ? "bg-white text-gray-900 shadow-sm dark:bg-gray-900 dark:text-gray-100 dark:shadow-none"
+            ? "bg-white text-gray-900 shadow-sm dark:bg-gray-900 dark:text-gray-100"
             : "text-gray-500 hover:text-gray-900 hover:bg-white/50 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800/60"
         }`}
       >
@@ -27,8 +27,8 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
           size={16}
           className={
             activeApp === "claude"
-              ? "text-[#D97757] dark:text-[#D97757] transition-colors duration-200"
-              : "text-gray-500 dark:text-gray-400 group-hover:text-[#D97757] dark:group-hover:text-[#D97757] transition-colors duration-200"
+              ? "text-foreground"
+              : "text-gray-500 dark:text-gray-400 group-hover:text-foreground transition-colors"
           }
         />
         <span>Claude</span>
@@ -39,11 +39,18 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
         onClick={() => handleSwitch("codex")}
         className={`inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
           activeApp === "codex"
-            ? "bg-white text-gray-900 shadow-sm dark:bg-gray-900 dark:text-gray-100 dark:shadow-none"
+            ? "bg-white text-gray-900 shadow-sm dark:bg-gray-900 dark:text-gray-100"
             : "text-gray-500 hover:text-gray-900 hover:bg-white/50 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800/60"
         }`}
       >
-        <CodexIcon size={16} />
+        <CodexIcon
+          size={16}
+          className={
+            activeApp === "codex"
+              ? "text-foreground"
+              : "text-gray-500 dark:text-gray-400 group-hover:text-foreground transition-colors"
+          }
+        />
         <span>Codex</span>
       </button>
 
@@ -52,7 +59,7 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
         onClick={() => handleSwitch("gemini")}
         className={`inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
           activeApp === "gemini"
-            ? "bg-white text-gray-900 shadow-sm dark:bg-gray-900 dark:text-gray-100 dark:shadow-none"
+            ? "bg-white text-gray-900 shadow-sm dark:bg-gray-900 dark:text-gray-100"
             : "text-gray-500 hover:text-gray-900 hover:bg-white/50 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800/60"
         }`}
       >
@@ -60,8 +67,8 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
           size={16}
           className={
             activeApp === "gemini"
-              ? "text-[#4285F4] dark:text-[#4285F4] transition-colors duration-200"
-              : "text-gray-500 dark:text-gray-400 group-hover:text-[#4285F4] dark:group-hover:text-[#4285F4] transition-colors duration-200"
+              ? "text-foreground"
+              : "text-gray-500 dark:text-gray-400 group-hover:text-foreground transition-colors"
           }
         />
         <span>Gemini</span>

src/components/ColorPicker.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface ColorPickerProps {
+  value?: string;
+  onValueChange: (color: string) => void;
+  label?: string;
+  presets?: string[];
+}
+
+const DEFAULT_PRESETS = [
+  "#00A67E",
+  "#D4915D",
+  "#4285F4",
+  "#FF6A00",
+  "#00A4FF",
+  "#FF9900",
+  "#0078D4",
+  "#FF0000",
+  "#1E88E5",
+  "#6366F1",
+  "#0F62FE",
+  "#2932E1",
+];
+
+export const ColorPicker: React.FC<ColorPickerProps> = ({
+  value = "#4285F4",
+  onValueChange,
+  label = "图标颜色",
+  presets = DEFAULT_PRESETS,
+}) => {
+  return (
+    <div className="space-y-3">
+      <Label>{label}</Label>
+
+      {/* 颜色预设 */}
+      <div className="grid grid-cols-6 gap-2">
+        {presets.map((color) => (
+          <button
+            key={color}
+            type="button"
+            onClick={() => onValueChange(color)}
+            className={cn(
+              "w-full aspect-square rounded-lg border-2 transition-all",
+              "hover:scale-110 hover:shadow-lg",
+              value === color
+                ? "border-primary ring-2 ring-primary/20"
+                : "border-border",
+            )}
+            style={{ backgroundColor: color }}
+            title={color}
+          />
+        ))}
+      </div>
+
+      {/* 自定义颜色输入 */}
+      <div className="flex items-center gap-2">
+        <Input
+          type="color"
+          value={value}
+          onChange={(e) => onValueChange(e.target.value)}
+          className="w-16 h-10 p-1 cursor-pointer"
+        />
+        <Input
+          type="text"
+          value={value}
+          onChange={(e) => onValueChange(e.target.value)}
+          placeholder="#4285F4"
+          className="flex-1 font-mono"
+        />
+      </div>
+    </div>
+  );
+};

src/components/DeepLinkImportDialog.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { listen } from "@tauri-apps/api/event";
 import { DeepLinkImportRequest, deeplinkApi } from "@/lib/api/deeplink";
 import {
@@ -30,9 +30,30 @@ export function DeepLinkImportDialog() {
     // Listen for deep link import events
     const unlistenImport = listen<DeepLinkImportRequest>(
       "deeplink-import",
-      (event) => {
+      async (event) => {
         console.log("Deep link import event received:", event.payload);
-        setRequest(event.payload);
+
+        // If config is present, merge it to get the complete configuration
+        if (event.payload.config || event.payload.configUrl) {
+          try {
+            const mergedRequest = await deeplinkApi.mergeDeeplinkConfig(
+              event.payload,
+            );
+            console.log("Config merged successfully:", mergedRequest);
+            setRequest(mergedRequest);
+          } catch (error) {
+            console.error("Failed to merge config:", error);
+            toast.error(t("deeplink.configMergeError"), {
+              description:
+                error instanceof Error ? error.message : String(error),
+            });
+            // Fall back to original request
+            setRequest(event.payload);
+          }
+        } else {
+          setRequest(event.payload);
+        }
+
         setIsOpen(true);
       },
     );
@@ -71,7 +92,6 @@ export function DeepLinkImportDialog() {
       });
 
       setIsOpen(false);
-      setRequest(null);
     } catch (error) {
       console.error("Failed to import provider from deep link:", error);
       toast.error(t("deeplink.importError"), {
@@ -84,120 +104,326 @@ export function DeepLinkImportDialog() {
 
   const handleCancel = () => {
     setIsOpen(false);
-    setRequest(null);
   };
 
-  if (!request) return null;
-
   // Mask API key for display (show first 4 chars + ***)
   const maskedApiKey =
-    request.apiKey.length > 4
+    request?.apiKey && request.apiKey.length > 4
       ? `${request.apiKey.substring(0, 4)}${"*".repeat(20)}`
       : "****";
 
+  // Check if config file is present
+  const hasConfigFile = !!(request?.config || request?.configUrl);
+  const configSource = request?.config
+    ? "base64"
+    : request?.configUrl
+      ? "url"
+      : null;
+
+  // Parse config file content for display
+  interface ParsedConfig {
+    type: "claude" | "codex" | "gemini";
+    env?: Record<string, string>;
+    auth?: Record<string, string>;
+    tomlConfig?: string;
+    raw: Record<string, unknown>;
+  }
+
+  // Helper to decode base64 with UTF-8 support
+  const b64ToUtf8 = (str: string): string => {
+    try {
+      const binString = atob(str);
+      const bytes = Uint8Array.from(binString, (m) => m.codePointAt(0) || 0);
+      return new TextDecoder().decode(bytes);
+    } catch (e) {
+      console.error("Failed to decode base64:", e);
+      return atob(str);
+    }
+  };
+
+  const parsedConfig = useMemo((): ParsedConfig | null => {
+    if (!request?.config) return null;
+    try {
+      const decoded = b64ToUtf8(request.config);
+      const parsed = JSON.parse(decoded) as Record<string, unknown>;
+
+      if (request.app === "claude") {
+        // Claude 格式: { env: { ANTHROPIC_AUTH_TOKEN: ..., ... } }
+        return {
+          type: "claude",
+          env: (parsed.env as Record<string, string>) || {},
+          raw: parsed,
+        };
+      } else if (request.app === "codex") {
+        // Codex 格式: { auth: { OPENAI_API_KEY: ... }, config: "TOML string" }
+        return {
+          type: "codex",
+          auth: (parsed.auth as Record<string, string>) || {},
+          tomlConfig: (parsed.config as string) || "",
+          raw: parsed,
+        };
+      } else if (request.app === "gemini") {
+        // Gemini 格式: 扁平结构 { GEMINI_API_KEY: ..., GEMINI_BASE_URL: ... }
+        return {
+          type: "gemini",
+          env: parsed as Record<string, string>,
+          raw: parsed,
+        };
+      }
+      return null;
+    } catch (e) {
+      console.error("Failed to parse config:", e);
+      return null;
+    }
+  }, [request?.config, request?.app]);
+
+  // Helper to mask sensitive values
+  const maskValue = (key: string, value: string): string => {
+    const sensitiveKeys = ["TOKEN", "KEY", "SECRET", "PASSWORD"];
+    const isSensitive = sensitiveKeys.some((k) =>
+      key.toUpperCase().includes(k),
+    );
+    if (isSensitive && value.length > 8) {
+      return `${value.substring(0, 8)}${"*".repeat(12)}`;
+    }
+    return value;
+  };
+
   return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogContent className="sm:max-w-[500px]">
-        {/* 标题显式左对齐，避免默认居中样式影响 */}
-        <DialogHeader className="text-left sm:text-left">
-          <DialogTitle>{t("deeplink.confirmImport")}</DialogTitle>
-          <DialogDescription>
-            {t("deeplink.confirmImportDescription")}
-          </DialogDescription>
-        </DialogHeader>
+    <Dialog open={isOpen && !!request} onOpenChange={setIsOpen}>
+      <DialogContent className="sm:max-w-[500px]" zIndex="top">
+        {request && (
+          <>
+            {/* 标题显式左对齐，避免默认居中样式影响 */}
+            <DialogHeader className="text-left sm:text-left">
+              <DialogTitle>{t("deeplink.confirmImport")}</DialogTitle>
+              <DialogDescription>
+                {t("deeplink.confirmImportDescription")}
+              </DialogDescription>
+            </DialogHeader>
 
-        {/* 主体内容整体右移，略大于标题内边距，让内容看起来不贴边 */}
-        <div className="space-y-4 px-8 py-4">
-          {/* App Type */}
-          <div className="grid grid-cols-3 items-center gap-4">
-            <div className="font-medium text-sm text-muted-foreground">
-              {t("deeplink.app")}
-            </div>
-            <div className="col-span-2 text-sm font-medium capitalize">
-              {request.app}
-            </div>
-          </div>
-
-          {/* Provider Name */}
-          <div className="grid grid-cols-3 items-center gap-4">
-            <div className="font-medium text-sm text-muted-foreground">
-              {t("deeplink.providerName")}
-            </div>
-            <div className="col-span-2 text-sm font-medium">{request.name}</div>
-          </div>
-
-          {/* Homepage */}
-          <div className="grid grid-cols-3 items-center gap-4">
-            <div className="font-medium text-sm text-muted-foreground">
-              {t("deeplink.homepage")}
-            </div>
-            <div className="col-span-2 text-sm break-all text-blue-600 dark:text-blue-400">
-              {request.homepage}
-            </div>
-          </div>
-
-          {/* API Endpoint */}
-          <div className="grid grid-cols-3 items-center gap-4">
-            <div className="font-medium text-sm text-muted-foreground">
-              {t("deeplink.endpoint")}
-            </div>
-            <div className="col-span-2 text-sm break-all">
-              {request.endpoint}
-            </div>
-          </div>
-
-          {/* API Key (masked) */}
-          <div className="grid grid-cols-3 items-center gap-4">
-            <div className="font-medium text-sm text-muted-foreground">
-              {t("deeplink.apiKey")}
-            </div>
-            <div className="col-span-2 text-sm font-mono text-muted-foreground">
-              {maskedApiKey}
-            </div>
-          </div>
-
-          {/* Model (if present) */}
-          {request.model && (
-            <div className="grid grid-cols-3 items-center gap-4">
-              <div className="font-medium text-sm text-muted-foreground">
-                {t("deeplink.model")}
+            {/* 主体内容整体右移，略大于标题内边距，让内容看起来不贴边 */}
+            <div className="space-y-4 px-8 py-4 max-h-[60vh] overflow-y-auto [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:block [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-200 dark:[&::-webkit-scrollbar-thumb]:bg-gray-700">
+              {/* App Type */}
+              <div className="grid grid-cols-3 items-center gap-4">
+                <div className="font-medium text-sm text-muted-foreground">
+                  {t("deeplink.app")}
+                </div>
+                <div className="col-span-2 text-sm font-medium capitalize">
+                  {request.app}
+                </div>
               </div>
-              <div className="col-span-2 text-sm font-mono">
-                {request.model}
+
+              {/* Provider Name */}
+              <div className="grid grid-cols-3 items-center gap-4">
+                <div className="font-medium text-sm text-muted-foreground">
+                  {t("deeplink.providerName")}
+                </div>
+                <div className="col-span-2 text-sm font-medium">
+                  {request.name}
+                </div>
+              </div>
+
+              {/* Homepage */}
+              <div className="grid grid-cols-3 items-center gap-4">
+                <div className="font-medium text-sm text-muted-foreground">
+                  {t("deeplink.homepage")}
+                </div>
+                <div className="col-span-2 text-sm break-all text-blue-600 dark:text-blue-400">
+                  {request.homepage}
+                </div>
+              </div>
+
+              {/* API Endpoint */}
+              <div className="grid grid-cols-3 items-center gap-4">
+                <div className="font-medium text-sm text-muted-foreground">
+                  {t("deeplink.endpoint")}
+                </div>
+                <div className="col-span-2 text-sm break-all">
+                  {request.endpoint}
+                </div>
+              </div>
+
+              {/* API Key (masked) */}
+              <div className="grid grid-cols-3 items-center gap-4">
+                <div className="font-medium text-sm text-muted-foreground">
+                  {t("deeplink.apiKey")}
+                </div>
+                <div className="col-span-2 text-sm font-mono text-muted-foreground">
+                  {maskedApiKey}
+                </div>
+              </div>
+
+              {/* Model (if present) */}
+              {request.model && (
+                <div className="grid grid-cols-3 items-center gap-4">
+                  <div className="font-medium text-sm text-muted-foreground">
+                    {t("deeplink.model")}
+                  </div>
+                  <div className="col-span-2 text-sm font-mono">
+                    {request.model}
+                  </div>
+                </div>
+              )}
+
+              {/* Notes (if present) */}
+              {request.notes && (
+                <div className="grid grid-cols-3 items-start gap-4">
+                  <div className="font-medium text-sm text-muted-foreground">
+                    {t("deeplink.notes")}
+                  </div>
+                  <div className="col-span-2 text-sm text-muted-foreground">
+                    {request.notes}
+                  </div>
+                </div>
+              )}
+
+              {/* Config File Details (v3.8+) */}
+              {hasConfigFile && (
+                <div className="space-y-3 pt-2 border-t border-border-default">
+                  <div className="grid grid-cols-3 items-center gap-4">
+                    <div className="font-medium text-sm text-muted-foreground">
+                      {t("deeplink.configSource")}
+                    </div>
+                    <div className="col-span-2 text-sm">
+                      <span className="inline-flex items-center px-2 py-0.5 rounded-md bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs font-medium">
+                        {configSource === "base64"
+                          ? t("deeplink.configEmbedded")
+                          : t("deeplink.configRemote")}
+                      </span>
+                      {request.configFormat && (
+                        <span className="ml-2 text-xs text-muted-foreground uppercase">
+                          {request.configFormat}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Parsed Config Details */}
+                  {parsedConfig && (
+                    <div className="rounded-lg bg-muted/50 p-3 space-y-2">
+                      <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                        {t("deeplink.configDetails")}
+                      </div>
+
+                      {/* Claude config */}
+                      {parsedConfig.type === "claude" && parsedConfig.env && (
+                        <div className="space-y-1.5">
+                          {Object.entries(parsedConfig.env).map(
+                            ([key, value]) => (
+                              <div
+                                key={key}
+                                className="grid grid-cols-2 gap-2 text-xs"
+                              >
+                                <span className="font-mono text-muted-foreground truncate">
+                                  {key}
+                                </span>
+                                <span className="font-mono truncate">
+                                  {maskValue(key, String(value))}
+                                </span>
+                              </div>
+                            ),
+                          )}
+                        </div>
+                      )}
+
+                      {/* Codex config */}
+                      {parsedConfig.type === "codex" && (
+                        <div className="space-y-2">
+                          {parsedConfig.auth &&
+                            Object.keys(parsedConfig.auth).length > 0 && (
+                              <div className="space-y-1.5">
+                                <div className="text-xs text-muted-foreground">
+                                  Auth:
+                                </div>
+                                {Object.entries(parsedConfig.auth).map(
+                                  ([key, value]) => (
+                                    <div
+                                      key={key}
+                                      className="grid grid-cols-2 gap-2 text-xs pl-2"
+                                    >
+                                      <span className="font-mono text-muted-foreground truncate">
+                                        {key}
+                                      </span>
+                                      <span className="font-mono truncate">
+                                        {maskValue(key, String(value))}
+                                      </span>
+                                    </div>
+                                  ),
+                                )}
+                              </div>
+                            )}
+                          {parsedConfig.tomlConfig && (
+                            <div className="space-y-1">
+                              <div className="text-xs text-muted-foreground">
+                                TOML Config:
+                              </div>
+                              <pre className="text-xs font-mono bg-background p-2 rounded overflow-x-auto max-h-24 whitespace-pre-wrap">
+                                {parsedConfig.tomlConfig.substring(0, 300)}
+                                {parsedConfig.tomlConfig.length > 300 && "..."}
+                              </pre>
+                            </div>
+                          )}
+                        </div>
+                      )}
+
+                      {/* Gemini config */}
+                      {parsedConfig.type === "gemini" && parsedConfig.env && (
+                        <div className="space-y-1.5">
+                          {Object.entries(parsedConfig.env).map(
+                            ([key, value]) => (
+                              <div
+                                key={key}
+                                className="grid grid-cols-2 gap-2 text-xs"
+                              >
+                                <span className="font-mono text-muted-foreground truncate">
+                                  {key}
+                                </span>
+                                <span className="font-mono truncate">
+                                  {maskValue(key, String(value))}
+                                </span>
+                              </div>
+                            ),
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {/* Config URL (if remote) */}
+                  {request.configUrl && (
+                    <div className="grid grid-cols-3 items-center gap-4">
+                      <div className="font-medium text-sm text-muted-foreground">
+                        {t("deeplink.configUrl")}
+                      </div>
+                      <div className="col-span-2 text-sm font-mono text-muted-foreground break-all">
+                        {request.configUrl}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {/* Warning */}
+              <div className="rounded-lg bg-yellow-50 dark:bg-yellow-900/20 p-3 text-sm text-yellow-800 dark:text-yellow-200">
+                {t("deeplink.warning")}
               </div>
             </div>
-          )}
 
-          {/* Notes (if present) */}
-          {request.notes && (
-            <div className="grid grid-cols-3 items-start gap-4">
-              <div className="font-medium text-sm text-muted-foreground">
-                {t("deeplink.notes")}
-              </div>
-              <div className="col-span-2 text-sm text-muted-foreground">
-                {request.notes}
-              </div>
-            </div>
-          )}
-
-          {/* Warning */}
-          <div className="rounded-lg bg-yellow-50 dark:bg-yellow-900/20 p-3 text-sm text-yellow-800 dark:text-yellow-200">
-            {t("deeplink.warning")}
-          </div>
-        </div>
-
-        <DialogFooter>
-          <Button
-            variant="outline"
-            onClick={handleCancel}
-            disabled={isImporting}
-          >
-            {t("common.cancel")}
-          </Button>
-          <Button onClick={handleImport} disabled={isImporting}>
-            {isImporting ? t("deeplink.importing") : t("deeplink.import")}
-          </Button>
-        </DialogFooter>
+            <DialogFooter>
+              <Button
+                variant="outline"
+                onClick={handleCancel}
+                disabled={isImporting}
+              >
+                {t("common.cancel")}
+              </Button>
+              <Button onClick={handleImport} disabled={isImporting}>
+                {isImporting ? t("deeplink.importing") : t("deeplink.import")}
+              </Button>
+            </DialogFooter>
+          </>
+        )}
       </DialogContent>
     </Dialog>
   );

src/components/IconPicker.tsx

@@ -0,0 +1,85 @@
+import React, { useState, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { ProviderIcon } from "./ProviderIcon";
+import { iconList } from "@/icons/extracted";
+import { searchIcons, getIconMetadata } from "@/icons/extracted/metadata";
+import { cn } from "@/lib/utils";
+
+interface IconPickerProps {
+  value?: string; // 当前选中的图标
+  onValueChange: (icon: string) => void; // 选择回调
+  color?: string; // 预览颜色
+}
+
+export const IconPicker: React.FC<IconPickerProps> = ({
+  value,
+  onValueChange,
+}) => {
+  const { t } = useTranslation();
+  const [searchQuery, setSearchQuery] = useState("");
+
+  // 过滤图标列表
+  const filteredIcons = useMemo(() => {
+    if (!searchQuery) return iconList;
+    return searchIcons(searchQuery);
+  }, [searchQuery]);
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <Label htmlFor="icon-search">
+          {t("iconPicker.search", { defaultValue: "搜索图标" })}
+        </Label>
+        <Input
+          id="icon-search"
+          type="text"
+          placeholder={t("iconPicker.searchPlaceholder", {
+            defaultValue: "输入图标名称...",
+          })}
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="mt-2"
+        />
+      </div>
+
+      <div className="max-h-[65vh] overflow-y-auto pr-1">
+        <div className="grid grid-cols-6 sm:grid-cols-8 lg:grid-cols-10 gap-2">
+          {filteredIcons.map((iconName) => {
+            const meta = getIconMetadata(iconName);
+            const isSelected = value === iconName;
+
+            return (
+              <button
+                key={iconName}
+                type="button"
+                onClick={() => onValueChange(iconName)}
+                className={cn(
+                  "flex flex-col items-center gap-1 p-3 rounded-lg",
+                  "border-2 transition-all duration-200",
+                  "hover:bg-accent hover:border-primary/50",
+                  isSelected
+                    ? "border-primary bg-primary/10"
+                    : "border-transparent",
+                )}
+                title={meta?.displayName || iconName}
+              >
+                <ProviderIcon icon={iconName} name={iconName} size={32} />
+                <span className="text-xs text-muted-foreground truncate w-full text-center">
+                  {meta?.displayName || iconName}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {filteredIcons.length === 0 && (
+        <div className="text-center py-8 text-muted-foreground">
+          {t("iconPicker.noResults", { defaultValue: "未找到匹配的图标" })}
+        </div>
+      )}
+    </div>
+  );
+};

src/components/JsonEditor.tsx

@@ -12,6 +12,7 @@ import { toast } from "sonner";
 import { formatJSON } from "@/utils/formatters";
 
 interface JsonEditorProps {
+  id?: string;
   value: string;
   onChange: (value: string) => void;
   placeholder?: string;
@@ -19,7 +20,8 @@ interface JsonEditorProps {
   rows?: number;
   showValidation?: boolean;
   language?: "json" | "javascript";
-  height?: string;
+  height?: string | number;
+  showMinimap?: boolean; // 添加此属性以防未来使用
 }
 
 const JsonEditor: React.FC<JsonEditorProps> = ({
@@ -84,19 +86,47 @@ const JsonEditor: React.FC<JsonEditorProps> = ({
 
     // 使用 baseTheme 定义基础样式，优先级低于 oneDark，但可以正确响应主题
     const baseTheme = EditorView.baseTheme({
-      "&light .cm-editor, &dark .cm-editor": {
+      ".cm-editor": {
         border: "1px solid hsl(var(--border))",
         borderRadius: "0.5rem",
+        background: "transparent",
       },
-      "&light .cm-editor.cm-focused, &dark .cm-editor.cm-focused": {
+      ".cm-editor.cm-focused": {
         outline: "none",
         borderColor: "hsl(var(--primary))",
       },
+      ".cm-scroller": {
+        background: "transparent",
+      },
+      ".cm-gutters": {
+        background: "transparent",
+        borderRight: "1px solid hsl(var(--border))",
+        color: "hsl(var(--muted-foreground))",
+      },
+      ".cm-selectionBackground, .cm-content ::selection": {
+        background: "hsl(var(--primary) / 0.18)",
+      },
+      ".cm-selectionMatch": {
+        background: "hsl(var(--primary) / 0.12)",
+      },
+      ".cm-activeLine": {
+        background: "hsl(var(--primary) / 0.08)",
+      },
+      ".cm-activeLineGutter": {
+        background: "hsl(var(--primary) / 0.08)",
+      },
     });
 
     // 使用 theme 定义尺寸和字体样式
+    const heightValue = height
+      ? typeof height === "number"
+        ? `${height}px`
+        : height
+      : undefined;
     const sizingTheme = EditorView.theme({
-      "&": height ? { height } : { minHeight: `${minHeightPx}px` },
+      "&": heightValue
+        ? { height: heightValue }
+        : { minHeight: `${minHeightPx}px` },
       ".cm-scroller": { overflow: "auto" },
       ".cm-content": {
         fontFamily:
@@ -129,11 +159,32 @@ const JsonEditor: React.FC<JsonEditorProps> = ({
           ".cm-editor": {
             border: "1px solid hsl(var(--border))",
             borderRadius: "0.5rem",
+            background: "transparent",
           },
           ".cm-editor.cm-focused": {
             outline: "none",
             borderColor: "hsl(var(--primary))",
           },
+          ".cm-scroller": {
+            background: "transparent",
+          },
+          ".cm-gutters": {
+            background: "transparent",
+            borderRight: "1px solid hsl(var(--border))",
+            color: "hsl(var(--muted-foreground))",
+          },
+          ".cm-selectionBackground, .cm-content ::selection": {
+            background: "hsl(var(--primary) / 0.18)",
+          },
+          ".cm-selectionMatch": {
+            background: "hsl(var(--primary) / 0.12)",
+          },
+          ".cm-activeLine": {
+            background: "hsl(var(--primary) / 0.08)",
+          },
+          ".cm-activeLineGutter": {
+            background: "hsl(var(--primary) / 0.08)",
+          },
         }),
       );
     }
@@ -196,14 +247,23 @@ const JsonEditor: React.FC<JsonEditorProps> = ({
     }
   };
 
+  const isFullHeight = height === "100%";
+
   return (
-    <div style={{ width: "100%" }}>
-      <div ref={editorRef} style={{ width: "100%" }} />
+    <div
+      style={{ width: "100%", height: isFullHeight ? "100%" : "auto" }}
+      className={isFullHeight ? "flex flex-col" : ""}
+    >
+      <div
+        ref={editorRef}
+        style={{ width: "100%", height: isFullHeight ? undefined : "auto" }}
+        className={isFullHeight ? "flex-1 min-h-0" : ""}
+      />
       {language === "json" && (
         <button
           type="button"
           onClick={handleFormat}
-          className="mt-2 inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+          className={`${isFullHeight ? "mt-2 flex-shrink-0" : "mt-2"} inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors`}
         >
           <Wand2 className="w-3.5 h-3.5" />
           {t("common.format", { defaultValue: "格式化" })}

src/components/ProviderIcon.tsx

@@ -0,0 +1,81 @@
+import React, { useMemo } from "react";
+import { getIcon, hasIcon } from "@/icons/extracted";
+import { cn } from "@/lib/utils";
+
+interface ProviderIconProps {
+  icon?: string; // 图标名称
+  name: string; // 供应商名称（用于 fallback）
+  color?: string; // 自定义颜色 (Deprecated, kept for compatibility but ignored for SVG)
+  size?: number | string; // 尺寸
+  className?: string;
+  showFallback?: boolean; // 是否显示 fallback
+}
+
+export const ProviderIcon: React.FC<ProviderIconProps> = ({
+  icon,
+  name,
+  size = 32,
+  className,
+  showFallback = true,
+}) => {
+  // 获取图标 SVG
+  const iconSvg = useMemo(() => {
+    if (icon && hasIcon(icon)) {
+      return getIcon(icon);
+    }
+    return "";
+  }, [icon]);
+
+  // 计算尺寸样式
+  const sizeStyle = useMemo(() => {
+    const sizeValue = typeof size === "number" ? `${size}px` : size;
+    return {
+      width: sizeValue,
+      height: sizeValue,
+    };
+  }, [size]);
+
+  // 如果有图标，显示图标
+  if (iconSvg) {
+    return (
+      <span
+        className={cn(
+          "inline-flex items-center justify-center flex-shrink-0",
+          className,
+        )}
+        style={sizeStyle}
+        dangerouslySetInnerHTML={{ __html: iconSvg }}
+      />
+    );
+  }
+
+  // Fallback：显示首字母
+  if (showFallback) {
+    const initials = name
+      .split(" ")
+      .map((word) => word[0])
+      .join("")
+      .toUpperCase()
+      .slice(0, 2);
+    return (
+      <span
+        className={cn(
+          "inline-flex items-center justify-center flex-shrink-0 rounded-lg",
+          "bg-muted text-muted-foreground font-semibold",
+          className,
+        )}
+        style={sizeStyle}
+      >
+        <span
+          style={{
+            fontSize: `${typeof size === "number" ? size * 0.4 : 14}px`,
+          }}
+        >
+          {initials}
+        </span>
+      </span>
+    );
+  }
+
+  return null;
+};

src/components/UsageFooter.tsx

@@ -60,7 +60,7 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
   if (!usage.success) {
     if (inline) {
       return (
-        <div className="flex items-center gap-2 text-xs">
+        <div className="inline-flex items-center gap-2 text-xs rounded-lg border border-border-default bg-card px-3 py-2 shadow-sm">
           <div className="flex items-center gap-1.5 text-red-500 dark:text-red-400">
             <AlertCircle size={12} />
             <span>{t("usage.queryFailed")}</span>
@@ -68,7 +68,7 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
           <button
             onClick={() => refetch()}
             disabled={loading}
-            className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors disabled:opacity-50 flex-shrink-0"
+            className="p-1 rounded hover:bg-muted transition-colors disabled:opacity-50 flex-shrink-0"
             title={t("usage.refreshUsage")}
           >
             <RefreshCw size={12} className={loading ? "animate-spin" : ""} />
@@ -78,7 +78,7 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
     }
 
     return (
-      <div className="mt-3 pt-3 border-t border-border-default ">
+      <div className="mt-3 rounded-xl border border-border-default bg-card px-4 py-3 shadow-sm">
         <div className="flex items-center justify-between gap-2 text-xs">
           <div className="flex items-center gap-2 text-red-500 dark:text-red-400">
             <AlertCircle size={14} />
@@ -110,29 +110,32 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
     const isExpired = firstUsage.isValid === false;
 
     return (
-      <div className="flex flex-col gap-1 text-xs flex-shrink-0">
-        {/* 第一行：刷新时间 + 刷新按钮 */}
+      <div className="flex flex-col items-end gap-1 text-xs whitespace-nowrap flex-shrink-0">
+        {/* 第一行：更新时间和刷新按钮 */}
         <div className="flex items-center gap-2 justify-end">
           {/* 上次查询时间 */}
-          {lastQueriedAt && (
-            <span className="text-[10px] text-gray-400 dark:text-gray-500 flex items-center gap-1">
-              <Clock size={10} />
-              {formatRelativeTime(lastQueriedAt, now, t)}
-            </span>
-          )}
+          <span className="text-[10px] text-gray-400 dark:text-gray-500 flex items-center gap-1">
+            <Clock size={10} />
+            {lastQueriedAt
+              ? formatRelativeTime(lastQueriedAt, now, t)
+              : t("usage.never", { defaultValue: "从未更新" })}
+          </span>
 
           {/* 刷新按钮 */}
           <button
-            onClick={() => refetch()}
+            onClick={(e) => {
+              e.stopPropagation();
+              refetch();
+            }}
             disabled={loading}
-            className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors disabled:opacity-50 flex-shrink-0"
+            className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors disabled:opacity-50 flex-shrink-0 text-gray-400 dark:text-gray-500"
             title={t("usage.refreshUsage")}
           >
             <RefreshCw size={12} className={loading ? "animate-spin" : ""} />
           </button>
         </div>
 
-        {/* 第二行：已用 + 剩余 + 单位 */}
+        {/* 第二行：用量和剩余 */}
         <div className="flex items-center gap-2">
           {/* 已用 */}
           {firstUsage.used !== undefined && (
@@ -153,14 +156,13 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
                 {t("usage.remaining")}
               </span>
               <span
-                className={`font-semibold tabular-nums ${
-                  isExpired
+                className={`font-semibold tabular-nums ${isExpired
                     ? "text-red-500 dark:text-red-400"
                     : firstUsage.remaining <
-                        (firstUsage.total || firstUsage.remaining) * 0.1
+                      (firstUsage.total || firstUsage.remaining) * 0.1
                       ? "text-orange-500 dark:text-orange-400"
                       : "text-green-600 dark:text-green-400"
-                }`}
+                  }`}
               >
                 {firstUsage.remaining.toFixed(2)}
               </span>
@@ -179,7 +181,7 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
   }
 
   return (
-    <div className="mt-3 pt-3 border-t border-border-default ">
+    <div className="mt-3 rounded-xl border border-border-default bg-card px-4 py-3 shadow-sm">
       {/* 标题行：包含刷新按钮和自动查询时间 */}
       <div className="flex items-center justify-between mb-2">
         <span className="text-xs text-gray-500 dark:text-gray-400 font-medium">
@@ -196,7 +198,7 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
           <button
             onClick={() => refetch()}
             disabled={loading}
-            className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors disabled:opacity-50"
+            className="p-1 rounded hover:bg-muted transition-colors disabled:opacity-50"
             title={t("usage.refreshUsage")}
           >
             <RefreshCw size={12} className={loading ? "animate-spin" : ""} />
@@ -308,13 +310,12 @@ const UsagePlanItem: React.FC<{ data: UsageData }> = ({ data }) => {
               {t("usage.remaining")}
             </span>
             <span
-              className={`font-semibold tabular-nums ${
-                isExpired
-                  ? "text-red-500 dark:text-red-400"
-                  : remaining < (total || remaining) * 0.1
-                    ? "text-orange-500 dark:text-orange-400"
-                    : "text-green-600 dark:text-green-400"
-              }`}
+              className={`font-semibold tabular-nums ${isExpired
+                ? "text-red-500 dark:text-red-400"
+                : remaining < (total || remaining) * 0.1
+                  ? "text-orange-500 dark:text-orange-400"
+                  : "text-green-600 dark:text-green-400"
+                }`}
             >
               {remaining.toFixed(2)}
             </span>

src/components/UsageScriptModal.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Play, Wand2, Eye, EyeOff } from "lucide-react";
+import { Play, Wand2, Eye, EyeOff, Save } from "lucide-react";
 import { toast } from "sonner";
 import { useTranslation } from "react-i18next";
 import { Provider, UsageScript } from "@/types";
@@ -8,17 +8,12 @@ import JsonEditor from "./JsonEditor";
 import * as prettier from "prettier/standalone";
 import * as parserBabel from "prettier/parser-babel";
 import * as pluginEstree from "prettier/plugins/estree";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
+import { FullScreenPanel } from "@/components/common/FullScreenPanel";
+import { cn } from "@/lib/utils";
 
 interface UsageScriptModalProps {
   provider: Provider;
@@ -131,88 +126,53 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
 
   const [testing, setTesting] = useState(false);
 
-  // 🔧 输入时的格式化（宽松）- 只清理格式，不约束范围
-  const sanitizeNumberInput = (value: string): string => {
-    // 移除所有非数字字符
-    let cleaned = value.replace(/[^\d]/g, "");
-
-    // 移除前导零（除非输入的就是 "0"）
-    if (cleaned.length > 1 && cleaned.startsWith("0")) {
-      cleaned = cleaned.replace(/^0+/, "");
-    }
-
-    return cleaned;
-  };
-
   // 🔧 失焦时的验证（严格）- 仅确保有效整数
   const validateTimeout = (value: string): number => {
-    // 转换为数字
     const num = Number(value);
-
-    // 检查是否为有效数字
     if (isNaN(num) || value.trim() === "") {
-      return 10; // 默认值
+      return 10;
     }
-
-    // 检查是否为整数
     if (!Number.isInteger(num)) {
       toast.warning(
         t("usageScript.timeoutMustBeInteger") || "超时时间必须为整数",
       );
     }
-
-    // 检查负数
     if (num < 0) {
       toast.error(
         t("usageScript.timeoutCannotBeNegative") || "超时时间不能为负数",
       );
       return 10;
     }
-
     return Math.floor(num);
   };
 
   // 🔧 失焦时的验证（严格）- 自动查询间隔
   const validateAndClampInterval = (value: string): number => {
-    // 转换为数字
     const num = Number(value);
-
-    // 检查是否为有效数字
     if (isNaN(num) || value.trim() === "") {
-      return 0; // 禁用自动查询
+      return 0;
     }
-
-    // 检查是否为整数
     if (!Number.isInteger(num)) {
       toast.warning(
         t("usageScript.intervalMustBeInteger") || "自动查询间隔必须为整数",
       );
     }
-
-    // 检查负数
     if (num < 0) {
       toast.error(
         t("usageScript.intervalCannotBeNegative") || "自动查询间隔不能为负数",
       );
       return 0;
     }
-
-    // 约束到 [0, 1440] 范围（最大24小时）
     const clamped = Math.max(0, Math.min(1440, Math.floor(num)));
-
-    // 如果值被调整，显示提示
     if (clamped !== num && num > 0) {
       toast.info(
         t("usageScript.intervalAdjusted", { value: clamped }) ||
           `自动查询间隔已调整为 ${clamped} 分钟`,
       );
     }
-
     return clamped;
   };
 
-  // 跟踪当前选择的模板类型（用于控制高级配置的显示）
-  // 初始化：如果已有 accessToken 或 userId，说明是 NewAPI 模板
   const [selectedTemplate, setSelectedTemplate] = useState<string | null>(
     () => {
       const existingScript = provider.meta?.usage_script;
@@ -223,23 +183,18 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
     },
   );
 
-  // 控制 API Key 的显示/隐藏
   const [showApiKey, setShowApiKey] = useState(false);
   const [showAccessToken, setShowAccessToken] = useState(false);
 
   const handleSave = () => {
-    // 验证脚本格式
     if (script.enabled && !script.code.trim()) {
       toast.error(t("usageScript.scriptEmpty"));
       return;
     }
-
-    // 基本的 JS 语法检查（检查是否包含 return 语句）
     if (script.enabled && !script.code.includes("return")) {
       toast.error(t("usageScript.mustHaveReturn"), { duration: 5000 });
       return;
     }
-
     onSave(script);
     onClose();
   };
@@ -247,7 +202,6 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
   const handleTest = async () => {
     setTesting(true);
     try {
-      // 使用当前编辑器中的脚本内容进行测试
       const result = await usageApi.testScript(
         provider.id,
         appId,
@@ -259,7 +213,6 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
         script.userId,
       );
       if (result.success && result.data && result.data.length > 0) {
-        // 显示所有套餐数据
         const summary = result.data
           .map((plan) => {
             const planInfo = plan.planName ? `[${plan.planName}]` : "";
@@ -314,9 +267,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
   const handleUsePreset = (presetName: string) => {
     const preset = PRESET_TEMPLATES[presetName];
     if (preset) {
-      // 根据模板类型清空不同的字段
       if (presetName === TEMPLATE_KEYS.CUSTOM) {
-        // 自定义：清空所有凭证字段
         setScript({
           ...script,
           code: preset,
@@ -326,7 +277,6 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
           userId: undefined,
         });
       } else if (presetName === TEMPLATE_KEYS.GENERAL) {
-        // 通用：保留 apiKey 和 baseUrl，清空 NewAPI 字段
         setScript({
           ...script,
           code: preset,
@@ -334,84 +284,131 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
           userId: undefined,
         });
       } else if (presetName === TEMPLATE_KEYS.NEW_API) {
-        // NewAPI：清空 apiKey（NewAPI 不使用通用的 apiKey）
         setScript({
           ...script,
           code: preset,
           apiKey: undefined,
         });
       }
-      setSelectedTemplate(presetName); // 记录选择的模板
+      setSelectedTemplate(presetName);
     }
   };
 
-  // 判断是否应该显示凭证配置区域
   const shouldShowCredentialsConfig =
     selectedTemplate === TEMPLATE_KEYS.GENERAL ||
     selectedTemplate === TEMPLATE_KEYS.NEW_API;
 
+  const footer = (
+    <>
+      <div className="flex gap-2">
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={handleTest}
+          disabled={!script.enabled || testing}
+        >
+          <Play size={14} className="mr-1" />
+          {testing ? t("usageScript.testing") : t("usageScript.testScript")}
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleFormat}
+          disabled={!script.enabled}
+          title={t("usageScript.format")}
+        >
+          <Wand2 size={14} className="mr-1" />
+          {t("usageScript.format")}
+        </Button>
+      </div>
+
+      <div className="flex gap-2">
+        <Button
+          variant="outline"
+          onClick={onClose}
+          className="border-border/20 hover:bg-accent hover:text-accent-foreground"
+        >
+          {t("common.cancel")}
+        </Button>
+        <Button
+          onClick={handleSave}
+          className="bg-primary text-primary-foreground hover:bg-primary/90"
+        >
+          <Save size={16} className="mr-2" />
+          {t("usageScript.saveConfig")}
+        </Button>
+      </div>
+    </>
+  );
+
   return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className="max-w-3xl max-h-[90vh] flex flex-col">
-        <DialogHeader>
-          <DialogTitle>
-            {t("usageScript.title")} - {provider.name}
-          </DialogTitle>
-        </DialogHeader>
+    <FullScreenPanel
+      isOpen={isOpen}
+      title={`${t("usageScript.title")} - ${provider.name}`}
+      onClose={onClose}
+      footer={footer}
+    >
+      <div className="glass rounded-xl border border-white/10 px-6 py-4 flex items-center justify-between gap-4">
+        <div className="space-y-1">
+          <p className="text-sm font-medium leading-none text-foreground">
+            {t("usageScript.enableUsageQuery")}
+          </p>
+          <p className="text-xs text-muted-foreground">
+            {t("usageScript.autoQueryIntervalHint")}
+          </p>
+        </div>
+        <Switch
+          checked={script.enabled}
+          onCheckedChange={(checked) =>
+            setScript({ ...script, enabled: checked })
+          }
+          aria-label={t("usageScript.enableUsageQuery")}
+        />
+      </div>
 
-        {/* Content - Scrollable */}
-        <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
-          {/* 启用开关 */}
-          <div className="flex items-center justify-between gap-4 rounded-lg border border-border-default p-4">
-            <div className="space-y-1">
-              <p className="text-sm font-medium leading-none">
-                {t("usageScript.enableUsageQuery")}
-              </p>
+      {script.enabled && (
+        <div className="space-y-6">
+          {/* 预设模板选择 */}
+          <div className="space-y-4 glass rounded-xl border border-white/10 p-6">
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <Label className="text-base font-medium">
+                {t("usageScript.presetTemplate")}
+              </Label>
+              <span className="text-xs text-muted-foreground">
+                {t("usageScript.variablesHint")}
+              </span>
+            </div>
+            <div className="flex gap-2 flex-wrap">
+              {Object.keys(PRESET_TEMPLATES).map((name) => {
+                const isSelected = selectedTemplate === name;
+                return (
+                  <Button
+                    key={name}
+                    type="button"
+                    variant={isSelected ? "default" : "outline"}
+                    size="sm"
+                    className={cn(
+                      "rounded-lg border",
+                      isSelected
+                        ? "shadow-sm"
+                        : "bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+                    )}
+                    onClick={() => handleUsePreset(name)}
+                  >
+                    {t(TEMPLATE_NAME_KEYS[name])}
+                  </Button>
+                );
+              })}
             </div>
-            <Switch
-              checked={script.enabled}
-              onCheckedChange={(checked) =>
-                setScript({ ...script, enabled: checked })
-              }
-              aria-label={t("usageScript.enableUsageQuery")}
-            />
-          </div>
 
-          {script.enabled && (
-            <>
-              {/* 预设模板选择 */}
-              <div>
-                <Label className="mb-2">
-                  {t("usageScript.presetTemplate")}
-                </Label>
-                <div className="flex gap-2">
-                  {Object.keys(PRESET_TEMPLATES).map((name) => {
-                    const isSelected = selectedTemplate === name;
-                    return (
-                      <button
-                        key={name}
-                        onClick={() => handleUsePreset(name)}
-                        className={`px-3 py-1.5 text-xs rounded transition-colors ${
-                          isSelected
-                            ? "bg-blue-500 text-white dark:bg-blue-600"
-                            : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
-                        }`}
-                      >
-                        {t(TEMPLATE_NAME_KEYS[name])}
-                      </button>
-                    );
-                  })}
-                </div>
-              </div>
+            {/* 凭证配置 */}
+            {shouldShowCredentialsConfig && (
+              <div className="space-y-4">
+                <h4 className="text-sm font-medium text-foreground">
+                  {t("usageScript.credentialsConfig")}
+                </h4>
 
-              {/* 凭证配置区域：通用和 NewAPI 模板显示 */}
-              {shouldShowCredentialsConfig && (
-                <div className="space-y-4 p-4 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
-                  <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100">
-                    {t("usageScript.credentialsConfig")}
-                  </h4>
-
-                  {/* 通用模板：显示 apiKey + baseUrl */}
+                <div className="grid gap-4 md:grid-cols-2">
                   {selectedTemplate === TEMPLATE_KEYS.GENERAL && (
                     <>
                       <div className="space-y-2">
@@ -426,12 +423,13 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
                             }
                             placeholder="sk-xxxxx"
                             autoComplete="off"
+                            className="border-white/10"
                           />
                           {script.apiKey && (
                             <button
                               type="button"
                               onClick={() => setShowApiKey(!showApiKey)}
-                              className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
+                              className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors"
                               aria-label={
                                 showApiKey
                                   ? t("apiKeyInput.hide")
@@ -459,12 +457,12 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
                           }
                           placeholder="https://api.example.com"
                           autoComplete="off"
+                          className="border-white/10"
                         />
                       </div>
                     </>
                   )}
 
-                  {/* NewAPI 模板：显示 baseUrl + accessToken + userId */}
                   {selectedTemplate === TEMPLATE_KEYS.NEW_API && (
                     <>
                       <div className="space-y-2">
@@ -478,6 +476,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
                           }
                           placeholder="https://api.newapi.com"
                           autoComplete="off"
+                          className="border-white/10"
                         />
                       </div>
 
@@ -500,6 +499,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
                               "usageScript.accessTokenPlaceholder",
                             )}
                             autoComplete="off"
+                            className="border-white/10"
                           />
                           {script.accessToken && (
                             <button
@@ -507,7 +507,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
                               onClick={() =>
                                 setShowAccessToken(!showAccessToken)
                               }
-                              className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
+                              className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors"
                               aria-label={
                                 showAccessToken
                                   ? t("apiKeyInput.hide")
@@ -537,32 +537,70 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
                           }
                           placeholder={t("usageScript.userIdPlaceholder")}
                           autoComplete="off"
+                          className="border-white/10"
                         />
                       </div>
                     </>
                   )}
                 </div>
-              )}
+              </div>
+            )}
+          </div>
 
-              {/* 脚本编辑器 */}
-              <div>
-                <Label className="mb-2">{t("usageScript.queryScript")}</Label>
-                <JsonEditor
-                  value={script.code}
-                  onChange={(code) => setScript({ ...script, code })}
-                  height="300px"
-                  language="javascript"
+          {/* 脚本配置 */}
+          <div className="space-y-4 glass rounded-xl border border-white/10 p-6">
+            <div className="flex items-center justify-between">
+              <h4 className="text-base font-medium text-foreground">
+                {t("usageScript.scriptConfig")}
+              </h4>
+              <p className="text-xs text-muted-foreground">
+                {t("usageScript.variablesHint")}
+              </p>
+            </div>
+
+            <div className="grid gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="usage-request-url">
+                  {t("usageScript.requestUrl")}
+                </Label>
+                <Input
+                  id="usage-request-url"
+                  type="text"
+                  value={script.request?.url || ""}
+                  onChange={(e) => {
+                    setScript({
+                      ...script,
+                      request: { ...script.request, url: e.target.value },
+                    });
+                  }}
+                  placeholder={t("usageScript.requestUrlPlaceholder")}
+                  className="border-white/10"
                 />
-                <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
-                  {t("usageScript.variablesHint", {
-                    apiKey: "{{apiKey}}",
-                    baseUrl: "{{baseUrl}}",
-                  })}
-                </p>
               </div>
 
-              {/* 配置选项 */}
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="usage-method">
+                    {t("usageScript.method")}
+                  </Label>
+                  <Input
+                    id="usage-method"
+                    type="text"
+                    value={script.request?.method || "GET"}
+                    onChange={(e) => {
+                      setScript({
+                        ...script,
+                        request: {
+                          ...script.request,
+                          method: e.target.value.toUpperCase(),
+                        },
+                      });
+                    }}
+                    placeholder="GET / POST"
+                    className="border-white/10"
+                  />
+                </div>
+
                 <div className="space-y-2">
                   <Label htmlFor="usage-timeout">
                     {t("usageScript.timeoutSeconds")}
@@ -570,83 +608,150 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
                   <Input
                     id="usage-timeout"
                     type="number"
-                    value={script.timeout ?? ""}
-                    onChange={(e) => {
-                      // 输入时：只清理格式，允许临时为空，避免强制回填默认值
-                      const cleaned = sanitizeNumberInput(e.target.value);
-                      setScript((prev) => ({
-                        ...prev,
-                        timeout:
-                          cleaned === "" ? undefined : parseInt(cleaned, 10),
-                      }));
-                    }}
-                    onBlur={(e) => {
-                      // 失焦时：严格验证并约束范围
-                      const validated = validateTimeout(e.target.value);
-                      setScript({ ...script, timeout: validated });
-                    }}
-                  />
-                  <p className="text-xs text-muted-foreground">
-                    {t("usageScript.timeoutHint") || "范围: 2-30 秒"}
-                  </p>
-                </div>
-
-                {/* 🆕 自动查询间隔 */}
-                <div className="space-y-2">
-                  <Label htmlFor="usage-auto-interval">
-                    {t("usageScript.autoQueryInterval")}
-                  </Label>
-                  <Input
-                    id="usage-auto-interval"
-                    type="number"
                     min={0}
-                    max={1440}
-                    step={1}
-                    value={script.autoQueryInterval ?? ""}
-                    onChange={(e) => {
-                      // 输入时：只清理格式，允许临时为空
-                      const cleaned = sanitizeNumberInput(e.target.value);
-                      setScript((prev) => ({
-                        ...prev,
-                        autoQueryInterval:
-                          cleaned === "" ? undefined : parseInt(cleaned, 10),
-                      }));
-                    }}
-                    onBlur={(e) => {
-                      // 失焦时：严格验证并约束范围
-                      const validated = validateAndClampInterval(
-                        e.target.value,
-                      );
-                      setScript({ ...script, autoQueryInterval: validated });
-                    }}
+                    value={script.timeout ?? 10}
+                    onChange={(e) =>
+                      setScript({
+                        ...script,
+                        timeout: validateTimeout(e.target.value),
+                      })
+                    }
+                    onBlur={(e) =>
+                      setScript({
+                        ...script,
+                        timeout: validateTimeout(e.target.value),
+                      })
+                    }
+                    className="border-white/10"
                   />
-                  <p className="text-xs text-muted-foreground">
-                    {t("usageScript.autoQueryIntervalHint")}
-                  </p>
                 </div>
               </div>
 
-              {/* 脚本说明 */}
-              <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm text-gray-700 dark:text-gray-300">
-                <h4 className="font-medium mb-2">
-                  {t("usageScript.scriptHelp")}
-                </h4>
-                <div className="space-y-3 text-xs">
-                  <div>
-                    <strong>{t("usageScript.configFormat")}</strong>
-                    <pre className="mt-1 p-2 bg-white/50 dark:bg-black/20 rounded text-[10px] overflow-x-auto">
-                      {`({
+              <div className="space-y-2">
+                <Label htmlFor="usage-headers">
+                  {t("usageScript.headers")}
+                </Label>
+                <JsonEditor
+                  id="usage-headers"
+                  value={
+                    script.request?.headers
+                      ? JSON.stringify(script.request.headers, null, 2)
+                      : "{}"
+                  }
+                  onChange={(value) => {
+                    try {
+                      const parsed = JSON.parse(value || "{}");
+                      setScript({
+                        ...script,
+                        request: { ...script.request, headers: parsed },
+                      });
+                    } catch (error) {
+                      console.error("Invalid headers JSON", error);
+                    }
+                  }}
+                  height={180}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="usage-body">{t("usageScript.body")}</Label>
+                <JsonEditor
+                  id="usage-body"
+                  value={
+                    script.request?.body
+                      ? JSON.stringify(script.request.body, null, 2)
+                      : "{}"
+                  }
+                  onChange={(value) => {
+                    try {
+                      const parsed =
+                        value?.trim() === "" ? undefined : JSON.parse(value);
+                      setScript({
+                        ...script,
+                        request: { ...script.request, body: parsed },
+                      });
+                    } catch (error) {
+                      toast.error(
+                        t("usageScript.invalidJson") || "Body 必须是合法 JSON",
+                      );
+                    }
+                  }}
+                  height={220}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="usage-interval">
+                  {t("usageScript.autoIntervalMinutes")}
+                </Label>
+                <Input
+                  id="usage-interval"
+                  type="number"
+                  min={0}
+                  max={1440}
+                  value={script.autoIntervalMinutes ?? 0}
+                  onChange={(e) =>
+                    setScript({
+                      ...script,
+                      autoIntervalMinutes: validateAndClampInterval(
+                        e.target.value,
+                      ),
+                    })
+                  }
+                  onBlur={(e) =>
+                    setScript({
+                      ...script,
+                      autoIntervalMinutes: validateAndClampInterval(
+                        e.target.value,
+                      ),
+                    })
+                  }
+                  className="border-white/10"
+                />
+                <p className="text-xs text-muted-foreground">
+                  {t("usageScript.autoQueryIntervalHint")}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* 提取器代码 */}
+          <div className="space-y-4 glass rounded-xl border border-white/10 p-6">
+            <div className="flex items-center justify-between">
+              <Label className="text-base font-medium">
+                {t("usageScript.extractorCode")}
+              </Label>
+              <div className="text-xs text-muted-foreground">
+                {t("usageScript.extractorHint")}
+              </div>
+            </div>
+            <JsonEditor
+              id="usage-code"
+              value={script.code || ""}
+              onChange={(value) => setScript({ ...script, code: value })}
+              height={480}
+              language="javascript"
+              showMinimap={false}
+            />
+          </div>
+
+          {/* 帮助信息 */}
+          <div className="glass rounded-xl border border-white/10 p-6 text-sm text-foreground/90">
+            <h4 className="font-medium mb-2">{t("usageScript.scriptHelp")}</h4>
+            <div className="space-y-3 text-xs">
+              <div>
+                <strong>{t("usageScript.configFormat")}</strong>
+                <pre className="mt-1 p-2 bg-black/20 text-foreground rounded border border-white/10 text-[10px] overflow-x-auto">
+                  {`({
   request: {
     url: "{{baseUrl}}/api/usage",
     method: "POST",
     headers: {
       "Authorization": "Bearer {{apiKey}}",
       "User-Agent": "cc-switch/1.0"
-    },
-    body: JSON.stringify({ key: "value" })  // ${t("usageScript.commentOptional")}
+    }
   },
   extractor: function(response) {
-    // ${t("usageScript.commentResponseIsJson")}
     return {
       isValid: !response.error,
       remaining: response.balance,
@@ -654,79 +759,41 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
     };
   }
 })`}
-                    </pre>
-                  </div>
-
-                  <div>
-                    <strong>{t("usageScript.extractorFormat")}</strong>
-                    <ul className="mt-1 space-y-0.5 ml-2">
-                      <li>{t("usageScript.fieldIsValid")}</li>
-                      <li>{t("usageScript.fieldInvalidMessage")}</li>
-                      <li>{t("usageScript.fieldRemaining")}</li>
-                      <li>{t("usageScript.fieldUnit")}</li>
-                      <li>{t("usageScript.fieldPlanName")}</li>
-                      <li>{t("usageScript.fieldTotal")}</li>
-                      <li>{t("usageScript.fieldUsed")}</li>
-                      <li>{t("usageScript.fieldExtra")}</li>
-                    </ul>
-                  </div>
-
-                  <div className="text-gray-600 dark:text-gray-400">
-                    <strong>{t("usageScript.tips")}</strong>
-                    <ul className="mt-1 space-y-0.5 ml-2">
-                      <li>
-                        {t("usageScript.tip1", {
-                          apiKey: "{{apiKey}}",
-                          baseUrl: "{{baseUrl}}",
-                        })}
-                      </li>
-                      <li>{t("usageScript.tip2")}</li>
-                      <li>{t("usageScript.tip3")}</li>
-                    </ul>
-                  </div>
-                </div>
+                </pre>
               </div>
-            </>
-          )}
+
+              <div>
+                <strong>{t("usageScript.extractorFormat")}</strong>
+                <ul className="mt-1 space-y-0.5 ml-2">
+                  <li>{t("usageScript.fieldIsValid")}</li>
+                  <li>{t("usageScript.fieldInvalidMessage")}</li>
+                  <li>{t("usageScript.fieldRemaining")}</li>
+                  <li>{t("usageScript.fieldUnit")}</li>
+                  <li>{t("usageScript.fieldPlanName")}</li>
+                  <li>{t("usageScript.fieldTotal")}</li>
+                  <li>{t("usageScript.fieldUsed")}</li>
+                  <li>{t("usageScript.fieldExtra")}</li>
+                </ul>
+              </div>
+
+              <div className="text-muted-foreground">
+                <strong>{t("usageScript.tips")}</strong>
+                <ul className="mt-1 space-y-0.5 ml-2">
+                  <li>
+                    {t("usageScript.tip1", {
+                      apiKey: "{{apiKey}}",
+                      baseUrl: "{{baseUrl}}",
+                    })}
+                  </li>
+                  <li>{t("usageScript.tip2")}</li>
+                  <li>{t("usageScript.tip3")}</li>
+                </ul>
+              </div>
+            </div>
+          </div>
         </div>
-
-        {/* Footer */}
-        <DialogFooter className="flex-col sm:flex-row sm:justify-between gap-3 pt-4">
-          {/* Left side - Test and Format buttons */}
-          <div className="flex gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleTest}
-              disabled={!script.enabled || testing}
-            >
-              <Play size={14} />
-              {testing ? t("usageScript.testing") : t("usageScript.testScript")}
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleFormat}
-              disabled={!script.enabled}
-              title={t("usageScript.format")}
-            >
-              <Wand2 size={14} />
-              {t("usageScript.format")}
-            </Button>
-          </div>
-
-          {/* Right side - Cancel and Save buttons */}
-          <div className="flex gap-2">
-            <Button variant="ghost" size="sm" onClick={onClose}>
-              {t("common.cancel")}
-            </Button>
-            <Button variant="default" size="sm" onClick={handleSave}>
-              {t("usageScript.saveConfig")}
-            </Button>
-          </div>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+      )}
+    </FullScreenPanel>
   );
 };
 

src/components/agents/AgentsPanel.tsx

@@ -0,0 +1,22 @@
+import { Bot } from "lucide-react";
+
+interface AgentsPanelProps {
+  onOpenChange: (open: boolean) => void;
+}
+
+export function AgentsPanel({}: AgentsPanelProps) {
+  return (
+    <div className="mx-auto max-w-5xl flex flex-col h-[calc(100vh-8rem)]">
+      <div className="flex-1 glass-card rounded-xl p-8 flex flex-col items-center justify-center text-center space-y-4">
+        <div className="w-20 h-20 rounded-full bg-white/5 flex items-center justify-center mb-4 animate-pulse-slow">
+          <Bot className="w-10 h-10 text-muted-foreground" />
+        </div>
+        <h3 className="text-xl font-semibold">Coming Soon</h3>
+        <p className="text-muted-foreground max-w-md">
+          The Agents management feature is currently under development. Stay
+          tuned for powerful autonomous capabilities.
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/common/FullScreenPanel.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import { ArrowLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface FullScreenPanelProps {
+  isOpen: boolean;
+  title: string;
+  onClose: () => void;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+}
+
+/**
+ * Reusable full-screen panel component
+ * Handles portal rendering, header with back button, and footer
+ * Uses solid theme colors without transparency
+ */
+export const FullScreenPanel: React.FC<FullScreenPanelProps> = ({
+  isOpen,
+  title,
+  onClose,
+  children,
+  footer,
+}) => {
+  React.useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[60] flex flex-col"
+      style={{ backgroundColor: "hsl(var(--background))" }}
+    >
+      {/* Header */}
+      <div
+        className="flex-shrink-0 py-3 border-b border-border-default"
+        style={{ backgroundColor: "hsl(var(--background))" }}
+      >
+        <div className="h-4 w-full" data-tauri-drag-region />
+        <div className="mx-auto max-w-[56rem] px-6 flex items-center gap-4">
+          <Button type="button" variant="outline" size="icon" onClick={onClose}>
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <h2 className="text-lg font-semibold text-foreground">{title}</h2>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto scroll-overlay">
+        <div className="mx-auto max-w-[56rem] px-6 py-6 space-y-6 w-full">
+          {children}
+        </div>
+      </div>
+
+      {/* Footer */}
+      {footer && (
+        <div
+          className="flex-shrink-0 py-4 border-t border-border-default"
+          style={{ backgroundColor: "hsl(var(--background))" }}
+        >
+          <div className="mx-auto max-w-[56rem] px-6 flex items-center justify-end gap-3">
+            {footer}
+          </div>
+        </div>
+      )}
+    </div>,
+    document.body,
+  );
+};

src/components/env/EnvWarningBanner.tsx

@@ -110,7 +110,7 @@ export function EnvWarningBanner({
 
   return (
     <>
-      <div className="bg-yellow-50 dark:bg-yellow-950/20 border-b border-yellow-200 dark:border-yellow-900/50">
+      <div className="fixed top-0 left-0 right-0 z-[100] bg-yellow-50 dark:bg-yellow-950 border-b border-yellow-200 dark:border-yellow-900 shadow-lg animate-slide-down">
         <div className="container mx-auto px-4 py-3">
           <div className="flex items-start gap-3">
             <AlertTriangle className="h-5 w-5 text-yellow-600 dark:text-yellow-500 flex-shrink-0 mt-0.5" />
@@ -241,7 +241,7 @@ export function EnvWarningBanner({
       </div>
 
       <Dialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
-        <DialogContent className="max-w-md">
+        <DialogContent className="max-w-md" zIndex="top">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
               <AlertTriangle className="h-5 w-5 text-destructive" />

src/components/mcp/McpFormModal.tsx

@@ -1,25 +1,11 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import {
-  Save,
-  Plus,
-  AlertCircle,
-  ChevronDown,
-  ChevronUp,
-  Wand2,
-} from "lucide-react";
+import { Save, Plus, AlertCircle, ChevronDown, ChevronUp } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
+import JsonEditor from "@/components/JsonEditor";
 import type { AppId } from "@/lib/api/types";
 import { McpServer, McpServerSpec } from "@/types";
 import { mcpPresets, getMcpPresetWithDescription } from "@/config/mcpPresets";
@@ -34,25 +20,21 @@ import {
   mcpServerToToml,
 } from "@/utils/tomlUtils";
 import { normalizeTomlText } from "@/utils/textNormalization";
-import { formatJSON, parseSmartMcpJson } from "@/utils/formatters";
+import { parseSmartMcpJson } from "@/utils/formatters";
 import { useMcpValidation } from "./useMcpValidation";
 import { useUpsertMcpServer } from "@/hooks/useMcp";
+import { FullScreenPanel } from "@/components/common/FullScreenPanel";
 
 interface McpFormModalProps {
   editingId?: string;
   initialData?: McpServer;
-  onSave: () => Promise<void>; // v3.7.0: 简化为仅用于关闭表单的回调
+  onSave: () => Promise<void>;
   onClose: () => void;
   existingIds?: string[];
-  defaultFormat?: "json" | "toml"; // 默认配置格式（可选，默认为 JSON）
-  defaultEnabledApps?: AppId[]; // 默认启用到哪些应用（可选，默认为全部应用）
+  defaultFormat?: "json" | "toml";
+  defaultEnabledApps?: AppId[];
 }
 
-/**
- * MCP 表单模态框组件（v3.7.0 完整重构版）
- * - 支持 JSON 和 TOML 两种格式
- * - 统一管理，通过复选框选择启用到哪些应用
- */
 const McpFormModal: React.FC<McpFormModalProps> = ({
   editingId,
   initialData,
@@ -79,7 +61,6 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
   const [formDocs, setFormDocs] = useState(initialData?.docs || "");
   const [formTags, setFormTags] = useState(initialData?.tags?.join(", ") || "");
 
-  // 启用状态：编辑模式使用现有值，新增模式使用默认值
   const [enabledApps, setEnabledApps] = useState<{
     claude: boolean;
     codex: boolean;
@@ -88,7 +69,6 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
     if (initialData?.apps) {
       return { ...initialData.apps };
     }
-    // 新增模式：根据 defaultEnabledApps 设置初始值
     return {
       claude: defaultEnabledApps.includes("claude"),
       codex: defaultEnabledApps.includes("codex"),
@@ -96,10 +76,8 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
     };
   });
 
-  // 编辑模式下禁止修改 ID
   const isEditing = !!editingId;
 
-  // 判断是否在编辑模式下有附加信息
   const hasAdditionalInfo = !!(
     initialData?.description ||
     initialData?.tags?.length ||
@@ -107,21 +85,17 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
     initialData?.docs
   );
 
-  // 附加信息展开状态（编辑模式下有值时默认展开）
   const [showMetadata, setShowMetadata] = useState(
     isEditing ? hasAdditionalInfo : false,
   );
 
-  // 配置格式：优先使用 defaultFormat，编辑模式下可从现有数据推断
   const useTomlFormat = useMemo(() => {
     if (initialData?.server) {
-      // 编辑模式：尝试从现有数据推断格式（这里简化处理，默认 JSON）
       return defaultFormat === "toml";
     }
     return defaultFormat === "toml";
   }, [defaultFormat, initialData]);
 
-  // 根据格式决定初始配置
   const [formConfig, setFormConfig] = useState(() => {
     const spec = initialData?.server;
     if (!spec) return "";
@@ -135,8 +109,23 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
   const [saving, setSaving] = useState(false);
   const [isWizardOpen, setIsWizardOpen] = useState(false);
   const [idError, setIdError] = useState("");
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    setIsDarkMode(document.documentElement.classList.contains("dark"));
+
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(document.documentElement.classList.contains("dark"));
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
 
-  // 判断是否使用 TOML 格式（向后兼容，后续可扩展为格式切换按钮）
   const useToml = useTomlFormat;
 
   const wizardInitialSpec = useMemo(() => {
@@ -164,7 +153,6 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
     }
   }, [formConfig, initialData, useToml]);
 
-  // 预设选择状态（仅新增模式显示；-1 表示自定义）
   const [selectedPreset, setSelectedPreset] = useState<number | null>(
     isEditing ? null : -1,
   );
@@ -186,7 +174,6 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
     return `${candidate}-${i}`;
   };
 
-  // 应用预设（写入表单但不落库）
   const applyPreset = (index: number) => {
     if (index < 0 || index >= mcpPresets.length) return;
     const preset = mcpPresets[index];
@@ -200,7 +187,6 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
     setFormDocs(presetWithDesc.docs || "");
     setFormTags(presetWithDesc.tags?.join(", ") || "");
 
-    // 根据格式转换配置
     if (useToml) {
       const toml = mcpServerToToml(presetWithDesc.server);
       setFormConfig(toml);
@@ -213,10 +199,8 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
     setSelectedPreset(index);
   };
 
-  // 切回自定义
   const applyCustom = () => {
     setSelectedPreset(-1);
-    // 恢复到空白模板
     setFormId("");
     setFormName("");
     setFormDescription("");
@@ -228,19 +212,16 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
   };
 
   const handleConfigChange = (value: string) => {
-    // 若为 TOML 模式，先做引号归一化，避免中文输入法导致的格式错误
     const nextValue = useToml ? normalizeTomlText(value) : value;
     setFormConfig(nextValue);
 
     if (useToml) {
-      // TOML validation (use hook's complete validation)
       const err = validateTomlConfig(nextValue);
       if (err) {
         setConfigError(err);
         return;
       }
 
-      // Try to extract ID (if user hasn't filled it yet)
       if (nextValue.trim() && !formId.trim()) {
         const extractedId = extractIdFromToml(nextValue);
         if (extractedId) {
@@ -248,11 +229,8 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
         }
       }
     } else {
-      // JSON validation with smart parsing
       try {
         const result = parseSmartMcpJson(value);
-
-        // 验证解析后的配置对象
         const configJson = JSON.stringify(result.config);
         const validationErr = validateJsonConfig(configJson);
 
@@ -261,20 +239,15 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
           return;
         }
 
-        // 自动填充提取的 id（仅当表单 id 为空且不在编辑模式时）
         if (result.id && !formId.trim() && !isEditing) {
           const uniqueId = ensureUniqueId(result.id);
           setFormId(uniqueId);
 
-          // 如果 name 也为空，同时填充 name
           if (!formName.trim()) {
             setFormName(result.id);
           }
         }
 
-        // 不在输入时自动格式化，保持用户输入的原样
-        // 格式清理将在提交时进行
-
         setConfigError("");
       } catch (err: any) {
         const errorMessage = err?.message || String(err);
@@ -283,30 +256,11 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
     }
   };
 
-  const handleFormatJson = () => {
-    if (!formConfig.trim()) return;
-
-    try {
-      const formatted = formatJSON(formConfig);
-      setFormConfig(formatted);
-      toast.success(t("common.formatSuccess"));
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : String(error);
-      toast.error(
-        t("common.formatError", {
-          error: errorMessage,
-        }),
-      );
-    }
-  };
-
   const handleWizardApply = (title: string, json: string) => {
     setFormId(title);
     if (!formName.trim()) {
       setFormName(title);
     }
-    // Wizard returns JSON, convert based on format if needed
     if (useToml) {
       try {
         const server = JSON.parse(json) as McpServerSpec;
@@ -329,17 +283,14 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
       return;
     }
 
-    // 新增模式：阻止提交重名 ID
     if (!isEditing && existingIds.includes(trimmedId)) {
       setIdError(t("mcp.error.idExists"));
       return;
     }
 
-    // Validate configuration format
     let serverSpec: McpServerSpec;
 
     if (useToml) {
-      // TOML mode
       const tomlError = validateTomlConfig(formConfig);
       setConfigError(tomlError);
       if (tomlError) {
@@ -348,7 +299,6 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
       }
 
       if (!formConfig.trim()) {
-        // Empty configuration
         serverSpec = {
           type: "stdio",
           command: "",
@@ -365,9 +315,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
         }
       }
     } else {
-      // JSON mode
       if (!formConfig.trim()) {
-        // Empty configuration
         serverSpec = {
           type: "stdio",
           command: "",
@@ -375,7 +323,6 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
         };
       } else {
         try {
-          // 使用智能解析器，支持带外层键的格式
           const result = parseSmartMcpJson(formConfig);
           serverSpec = result.config as McpServerSpec;
         } catch (e: any) {
@@ -387,7 +334,6 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
       }
     }
 
-    // 前置必填校验
     if (serverSpec?.type === "stdio" && !serverSpec?.command?.trim()) {
       toast.error(t("mcp.error.commandRequired"), { duration: 3000 });
       return;
@@ -402,7 +348,6 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
 
     setSaving(true);
     try {
-      // 先处理 name 字段（必填）
       const nameTrimmed = (formName || trimmedId).trim();
       const finalName = nameTrimmed || trimmedId;
 
@@ -411,7 +356,6 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
         id: trimmedId,
         name: finalName,
         server: serverSpec,
-        // 使用表单中的启用状态（v3.7.0 完整重构）
         apps: enabledApps,
       };
 
@@ -446,10 +390,9 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
         delete entry.tags;
       }
 
-      // 保存到统一配置
       await upsertMutation.mutateAsync(entry);
       toast.success(t("common.success"));
-      await onSave(); // 通知父组件关闭表单
+      await onSave();
     } catch (error: any) {
       const detail = extractErrorMessage(error);
       const mapped = translateMcpBackendError(detail, t);
@@ -466,18 +409,33 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
 
   return (
     <>
-      <Dialog open={true} onOpenChange={(open) => !open && onClose()}>
-        <DialogContent className="max-w-3xl max-h-[90vh] flex flex-col">
-          <DialogHeader>
-            <DialogTitle>{getFormTitle()}</DialogTitle>
-          </DialogHeader>
-
-          {/* Content - Scrollable */}
-          <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
+      <FullScreenPanel
+        isOpen={true}
+        title={getFormTitle()}
+        onClose={onClose}
+        footer={
+          <Button
+            type="button"
+            onClick={handleSubmit}
+            disabled={saving || (!isEditing && !!idError)}
+            className="bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {isEditing ? <Save size={16} /> : <Plus size={16} />}
+            {saving
+              ? t("common.saving")
+              : isEditing
+                ? t("common.save")
+                : t("common.add")}
+          </Button>
+        }
+      >
+        <div className="flex flex-col h-full gap-6">
+          {/* 上半部分：表单字段 */}
+          <div className="glass rounded-xl p-6 border border-white/10 space-y-6 flex-shrink-0">
             {/* 预设选择（仅新增时展示） */}
             {!isEditing && (
               <div>
-                <label className="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">
+                <label className="block text-sm font-medium text-foreground mb-3">
                   {t("mcp.presets.title")}
                 </label>
                 <div className="flex flex-wrap gap-2">
@@ -487,7 +445,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
                     className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                       selectedPreset === -1
                         ? "bg-emerald-500 text-white dark:bg-emerald-600"
-                        : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
+                        : "bg-accent text-muted-foreground hover:bg-accent/80"
                     }`}
                   >
                     {t("presetSelector.custom")}
@@ -502,7 +460,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
                         className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                           selectedPreset === idx
                             ? "bg-emerald-500 text-white dark:bg-emerald-600"
-                            : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
+                            : "bg-accent text-muted-foreground hover:bg-accent/80"
                         }`}
                         title={t(descriptionKey)}
                       >
@@ -513,10 +471,11 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
                 </div>
               </div>
             )}
+
             {/* ID (标题) */}
             <div>
               <div className="flex items-center justify-between mb-2">
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                <label className="block text-sm font-medium text-foreground">
                   {t("mcp.form.title")} <span className="text-red-500">*</span>
                 </label>
                 {!isEditing && idError && (
@@ -536,7 +495,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
 
             {/* Name */}
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              <label className="block text-sm font-medium text-foreground mb-2">
                 {t("mcp.form.name")}
               </label>
               <Input
@@ -547,9 +506,9 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
               />
             </div>
 
-            {/* 启用到哪些应用（v3.7.0 新增） */}
+            {/* 启用到哪些应用 */}
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+              <label className="block text-sm font-medium text-foreground mb-3">
                 {t("mcp.form.enabledApps")}
               </label>
               <div className="flex flex-wrap gap-4">
@@ -563,7 +522,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
                   />
                   <label
                     htmlFor="enable-claude"
-                    className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer select-none"
+                    className="text-sm text-foreground cursor-pointer select-none"
                   >
                     {t("mcp.unifiedPanel.apps.claude")}
                   </label>
@@ -579,7 +538,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
                   />
                   <label
                     htmlFor="enable-codex"
-                    className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer select-none"
+                    className="text-sm text-foreground cursor-pointer select-none"
                   >
                     {t("mcp.unifiedPanel.apps.codex")}
                   </label>
@@ -595,7 +554,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
                   />
                   <label
                     htmlFor="enable-gemini"
-                    className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer select-none"
+                    className="text-sm text-foreground cursor-pointer select-none"
                   >
                     {t("mcp.unifiedPanel.apps.gemini")}
                   </label>
@@ -608,7 +567,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
               <button
                 type="button"
                 onClick={() => setShowMetadata(!showMetadata)}
-                className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
+                className="flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
               >
                 {showMetadata ? (
                   <ChevronUp size={16} />
@@ -622,9 +581,8 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
             {/* 附加信息区域（可折叠） */}
             {showMetadata && (
               <>
-                {/* Description (描述) */}
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  <label className="block text-sm font-medium text-foreground mb-2">
                     {t("mcp.form.description")}
                   </label>
                   <Input
@@ -635,9 +593,8 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
                   />
                 </div>
 
-                {/* Tags */}
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  <label className="block text-sm font-medium text-foreground mb-2">
                     {t("mcp.form.tags")}
                   </label>
                   <Input
@@ -648,9 +605,8 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
                   />
                 </div>
 
-                {/* Homepage */}
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  <label className="block text-sm font-medium text-foreground mb-2">
                     {t("mcp.form.homepage")}
                   </label>
                   <Input
@@ -661,9 +617,8 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
                   />
                 </div>
 
-                {/* Docs */}
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  <label className="block text-sm font-medium text-foreground mb-2">
                     {t("mcp.form.docs")}
                   </label>
                   <Input
@@ -675,79 +630,51 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
                 </div>
               </>
             )}
+          </div>
 
-            {/* 配置输入框（根据格式显示 JSON 或 TOML） */}
-            <div>
-              <div className="flex items-center justify-between mb-2">
-                <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                  {useToml
-                    ? t("mcp.form.tomlConfig")
-                    : t("mcp.form.jsonConfig")}
-                </label>
-                {(isEditing || selectedPreset === -1) && (
-                  <button
-                    type="button"
-                    onClick={() => setIsWizardOpen(true)}
-                    className="text-sm text-blue-500 dark:text-blue-400 hover:text-blue-600 dark:hover:text-blue-300 transition-colors"
-                  >
-                    {t("mcp.form.useWizard")}
-                  </button>
-                )}
-              </div>
-              <Textarea
-                className="h-48 resize-none font-mono text-xs"
-                placeholder={
-                  useToml
-                    ? t("mcp.form.tomlPlaceholder")
-                    : t("mcp.form.jsonPlaceholder")
-                }
-                value={formConfig}
-                onChange={(e) => handleConfigChange(e.target.value)}
-              />
-              {/* 格式化按钮（仅 JSON 模式） */}
-              {!useToml && (
-                <div className="flex items-center justify-between mt-2">
-                  <button
-                    type="button"
-                    onClick={handleFormatJson}
-                    className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
-                  >
-                    <Wand2 className="w-3.5 h-3.5" />
-                    {t("common.format")}
-                  </button>
-                </div>
+          {/* 下半部分：JSON 配置编辑器 - 自适应剩余高度 */}
+          <div className="glass rounded-xl p-6 border border-white/10 flex flex-col flex-1 min-h-0">
+            <div className="flex items-center justify-between mb-4 flex-shrink-0">
+              <label className="text-sm font-medium text-foreground">
+                {useToml ? t("mcp.form.tomlConfig") : t("mcp.form.jsonConfig")}
+              </label>
+              {(isEditing || selectedPreset === -1) && (
+                <button
+                  type="button"
+                  onClick={() => setIsWizardOpen(true)}
+                  className="text-sm text-blue-500 dark:text-blue-400 hover:text-blue-600 dark:hover:text-blue-300 transition-colors"
+                >
+                  {t("mcp.form.useWizard")}
+                </button>
               )}
+            </div>
+            <div className="flex-1 min-h-0 flex flex-col">
+              <div className="flex-1 min-h-0">
+                <JsonEditor
+                  value={formConfig}
+                  onChange={handleConfigChange}
+                  placeholder={
+                    useToml
+                      ? t("mcp.form.tomlPlaceholder")
+                      : t("mcp.form.jsonPlaceholder")
+                  }
+                  darkMode={isDarkMode}
+                  rows={12}
+                  showValidation={!useToml}
+                  language={useToml ? "javascript" : "json"}
+                  height="100%"
+                />
+              </div>
               {configError && (
-                <div className="flex items-center gap-2 mt-2 text-red-500 dark:text-red-400 text-sm">
+                <div className="flex items-center gap-2 mt-2 text-red-500 dark:text-red-400 text-sm flex-shrink-0">
                   <AlertCircle size={16} />
                   <span>{configError}</span>
                 </div>
               )}
             </div>
           </div>
-
-          {/* Footer */}
-          <DialogFooter className="flex justify-end gap-3 pt-4">
-            {/* 操作按钮 */}
-            <Button type="button" variant="ghost" onClick={onClose}>
-              {t("common.cancel")}
-            </Button>
-            <Button
-              type="button"
-              onClick={handleSubmit}
-              disabled={saving || (!isEditing && !!idError)}
-              variant="mcp"
-            >
-              {isEditing ? <Save size={16} /> : <Plus size={16} />}
-              {saving
-                ? t("common.saving")
-                : isEditing
-                  ? t("common.save")
-                  : t("common.add")}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+        </div>
+      </FullScreenPanel>
 
       {/* Wizard Modal */}
       <McpWizardModal

src/components/mcp/UnifiedMcpPanel.tsx

@@ -1,14 +1,7 @@
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Plus, Server, Check } from "lucide-react";
+import { Server } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
 import { Switch } from "@/components/ui/switch";
 import { useAllMcpServers, useToggleMcpApp } from "@/hooks/useMcp";
 import type { McpServer } from "@/types";
@@ -22,7 +15,6 @@ import { mcpPresets } from "@/config/mcpPresets";
 import { toast } from "sonner";
 
 interface UnifiedMcpPanelProps {
-  open: boolean;
   onOpenChange: (open: boolean) => void;
 }
 
@@ -30,10 +22,14 @@ interface UnifiedMcpPanelProps {
  * 统一 MCP 管理面板
  * v3.7.0 新架构：所有 MCP 服务器统一管理，每个服务器通过复选框控制应用到哪些客户端
  */
-const UnifiedMcpPanel: React.FC<UnifiedMcpPanelProps> = ({
-  open,
-  onOpenChange,
-}) => {
+export interface UnifiedMcpPanelHandle {
+  openAdd: () => void;
+}
+
+const UnifiedMcpPanel = React.forwardRef<
+  UnifiedMcpPanelHandle,
+  UnifiedMcpPanelProps
+>(({ onOpenChange: _onOpenChange }, ref) => {
   const { t } = useTranslation();
   const [isFormOpen, setIsFormOpen] = useState(false);
   const [editingId, setEditingId] = useState<string | null>(null);
@@ -90,6 +86,10 @@ const UnifiedMcpPanel: React.FC<UnifiedMcpPanelProps> = ({
     setIsFormOpen(true);
   };
 
+  React.useImperativeHandle(ref, () => ({
+    openAdd: handleAdd,
+  }));
+
   const handleDelete = (id: string) => {
     setConfirmDialog({
       isOpen: true,
@@ -115,78 +115,50 @@ const UnifiedMcpPanel: React.FC<UnifiedMcpPanelProps> = ({
   };
 
   return (
-    <>
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="max-w-3xl max-h-[85vh] min-h-[600px] flex flex-col">
-          <DialogHeader>
-            <div className="flex items-center justify-between pr-8">
-              <DialogTitle>{t("mcp.unifiedPanel.title")}</DialogTitle>
-              <Button type="button" variant="mcp" onClick={handleAdd}>
-                <Plus size={16} />
-                {t("mcp.unifiedPanel.addServer")}
-              </Button>
-            </div>
-          </DialogHeader>
+    <div className="mx-auto max-w-[56rem] px-6 flex flex-col h-[calc(100vh-8rem)] overflow-hidden">
+      {/* Info Section */}
+      <div className="flex-shrink-0 py-4 glass rounded-xl border border-white/10 mb-4 px-6">
+        <div className="text-sm text-muted-foreground">
+          {t("mcp.serverCount", { count: serverEntries.length })} ·{" "}
+          {t("mcp.unifiedPanel.apps.claude")}: {enabledCounts.claude} ·{" "}
+          {t("mcp.unifiedPanel.apps.codex")}: {enabledCounts.codex} ·{" "}
+          {t("mcp.unifiedPanel.apps.gemini")}: {enabledCounts.gemini}
+        </div>
+      </div>
 
-          {/* Info Section */}
-          <div className="flex-shrink-0 px-6 py-4">
-            <div className="text-sm text-gray-500 dark:text-gray-400">
-              {t("mcp.serverCount", { count: serverEntries.length })} ·{" "}
-              {t("mcp.unifiedPanel.apps.claude")}: {enabledCounts.claude} ·{" "}
-              {t("mcp.unifiedPanel.apps.codex")}: {enabledCounts.codex} ·{" "}
-              {t("mcp.unifiedPanel.apps.gemini")}: {enabledCounts.gemini}
-            </div>
+      {/* Content - Scrollable */}
+      <div className="flex-1 overflow-y-auto overflow-x-hidden pb-24">
+        {isLoading ? (
+          <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+            {t("mcp.loading")}
           </div>
-
-          {/* Content - Scrollable */}
-          <div className="flex-1 overflow-y-auto px-6 pb-4">
-            {isLoading ? (
-              <div className="text-center py-12 text-gray-500 dark:text-gray-400">
-                {t("mcp.loading")}
-              </div>
-            ) : serverEntries.length === 0 ? (
-              <div className="text-center py-12">
-                <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
-                  <Server
-                    size={24}
-                    className="text-gray-400 dark:text-gray-500"
-                  />
-                </div>
-                <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
-                  {t("mcp.unifiedPanel.noServers")}
-                </h3>
-                <p className="text-gray-500 dark:text-gray-400 text-sm">
-                  {t("mcp.emptyDescription")}
-                </p>
-              </div>
-            ) : (
-              <div className="space-y-3">
-                {serverEntries.map(([id, server]) => (
-                  <UnifiedMcpListItem
-                    key={id}
-                    id={id}
-                    server={server}
-                    onToggleApp={handleToggleApp}
-                    onEdit={handleEdit}
-                    onDelete={handleDelete}
-                  />
-                ))}
-              </div>
-            )}
+        ) : serverEntries.length === 0 ? (
+          <div className="text-center py-12">
+            <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
+              <Server size={24} className="text-gray-400 dark:text-gray-500" />
+            </div>
+            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
+              {t("mcp.unifiedPanel.noServers")}
+            </h3>
+            <p className="text-gray-500 dark:text-gray-400 text-sm">
+              {t("mcp.emptyDescription")}
+            </p>
           </div>
-
-          <DialogFooter>
-            <Button
-              type="button"
-              variant="mcp"
-              onClick={() => onOpenChange(false)}
-            >
-              <Check size={16} />
-              {t("common.done")}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+        ) : (
+          <div className="space-y-3">
+            {serverEntries.map(([id, server]) => (
+              <UnifiedMcpListItem
+                key={id}
+                id={id}
+                server={server}
+                onToggleApp={handleToggleApp}
+                onEdit={handleEdit}
+                onDelete={handleDelete}
+              />
+            ))}
+          </div>
+        )}
+      </div>
 
       {/* Form Modal */}
       {isFormOpen && (
@@ -215,9 +187,11 @@ const UnifiedMcpPanel: React.FC<UnifiedMcpPanelProps> = ({
           onCancel={() => setConfirmDialog(null)}
         />
       )}
-    </>
+    </div>
   );
-};
+});
+
+UnifiedMcpPanel.displayName = "UnifiedMcpPanel";
 
 /**
  * 统一 MCP 列表项组件
@@ -259,112 +233,110 @@ const UnifiedMcpListItem: React.FC<UnifiedMcpListItemProps> = ({
   };
 
   return (
-    <div className="min-h-16 rounded-lg border border-border-default bg-card p-4 transition-[border-color,box-shadow] duration-200 hover:border-border-hover hover:shadow-sm">
-      <div className="flex items-center gap-4">
-        {/* 左侧：服务器信息 */}
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 mb-1">
-            <h3 className="font-medium text-gray-900 dark:text-gray-100">
-              {name}
-            </h3>
-            {docsUrl && (
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                onClick={openDocs}
-                title={t("mcp.presets.docs")}
-              >
-                {t("mcp.presets.docs")}
-              </Button>
-            )}
-          </div>
-          {description && (
-            <p className="text-sm text-gray-500 dark:text-gray-400 line-clamp-2">
-              {description}
-            </p>
-          )}
-          {!description && tags && tags.length > 0 && (
-            <p className="text-xs text-gray-400 dark:text-gray-500 truncate">
-              {tags.join(", ")}
-            </p>
+    <div className="group relative flex items-center gap-4 p-4 rounded-xl border border-border-default bg-muted/50 hover:bg-muted hover:border-border-default/80 hover:shadow-sm transition-all duration-300">
+      {/* 左侧：服务器信息 */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 mb-1">
+          <h3 className="font-medium text-gray-900 dark:text-gray-100">
+            {name}
+          </h3>
+          {docsUrl && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={openDocs}
+              title={t("mcp.presets.docs")}
+            >
+              {t("mcp.presets.docs")}
+            </Button>
           )}
         </div>
+        {description && (
+          <p className="text-sm text-gray-500 dark:text-gray-400 line-clamp-2">
+            {description}
+          </p>
+        )}
+        {!description && tags && tags.length > 0 && (
+          <p className="text-xs text-gray-400 dark:text-gray-500 truncate">
+            {tags.join(", ")}
+          </p>
+        )}
+      </div>
 
-        {/* 中间：应用开关 */}
-        <div className="flex flex-col gap-2 flex-shrink-0 min-w-[120px]">
-          <div className="flex items-center justify-between gap-3">
-            <label
-              htmlFor={`${id}-claude`}
-              className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer"
-            >
-              {t("mcp.unifiedPanel.apps.claude")}
-            </label>
-            <Switch
-              id={`${id}-claude`}
-              checked={server.apps.claude}
-              onCheckedChange={(checked: boolean) =>
-                onToggleApp(id, "claude", checked)
-              }
-            />
-          </div>
-
-          <div className="flex items-center justify-between gap-3">
-            <label
-              htmlFor={`${id}-codex`}
-              className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer"
-            >
-              {t("mcp.unifiedPanel.apps.codex")}
-            </label>
-            <Switch
-              id={`${id}-codex`}
-              checked={server.apps.codex}
-              onCheckedChange={(checked: boolean) =>
-                onToggleApp(id, "codex", checked)
-              }
-            />
-          </div>
-
-          <div className="flex items-center justify-between gap-3">
-            <label
-              htmlFor={`${id}-gemini`}
-              className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer"
-            >
-              {t("mcp.unifiedPanel.apps.gemini")}
-            </label>
-            <Switch
-              id={`${id}-gemini`}
-              checked={server.apps.gemini}
-              onCheckedChange={(checked: boolean) =>
-                onToggleApp(id, "gemini", checked)
-              }
-            />
-          </div>
+      {/* 中间：应用开关 */}
+      <div className="flex flex-col gap-2 flex-shrink-0 min-w-[120px]">
+        <div className="flex items-center justify-between gap-3">
+          <label
+            htmlFor={`${id}-claude`}
+            className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer"
+          >
+            {t("mcp.unifiedPanel.apps.claude")}
+          </label>
+          <Switch
+            id={`${id}-claude`}
+            checked={server.apps.claude}
+            onCheckedChange={(checked: boolean) =>
+              onToggleApp(id, "claude", checked)
+            }
+          />
         </div>
 
-        {/* 右侧：操作按钮 */}
-        <div className="flex items-center gap-2 flex-shrink-0">
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            onClick={() => onEdit(id)}
-            title={t("common.edit")}
+        <div className="flex items-center justify-between gap-3">
+          <label
+            htmlFor={`${id}-codex`}
+            className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer"
           >
-            <Edit3 size={16} />
-          </Button>
-
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            onClick={() => onDelete(id)}
-            className="hover:text-red-500 hover:bg-red-100 dark:hover:text-red-400 dark:hover:bg-red-500/10"
-            title={t("common.delete")}
-          >
-            <Trash2 size={16} />
-          </Button>
+            {t("mcp.unifiedPanel.apps.codex")}
+          </label>
+          <Switch
+            id={`${id}-codex`}
+            checked={server.apps.codex}
+            onCheckedChange={(checked: boolean) =>
+              onToggleApp(id, "codex", checked)
+            }
+          />
         </div>
+
+        <div className="flex items-center justify-between gap-3">
+          <label
+            htmlFor={`${id}-gemini`}
+            className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer"
+          >
+            {t("mcp.unifiedPanel.apps.gemini")}
+          </label>
+          <Switch
+            id={`${id}-gemini`}
+            checked={server.apps.gemini}
+            onCheckedChange={(checked: boolean) =>
+              onToggleApp(id, "gemini", checked)
+            }
+          />
+        </div>
+      </div>
+
+      {/* 右侧：操作按钮 */}
+      <div className="flex items-center gap-2 flex-shrink-0">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onClick={() => onEdit(id)}
+          title={t("common.edit")}
+        >
+          <Edit3 size={16} />
+        </Button>
+
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onClick={() => onDelete(id)}
+          className="hover:text-red-500 hover:bg-red-100 dark:hover:text-red-400 dark:hover:bg-red-500/10"
+          title={t("common.delete")}
+        >
+          <Trash2 size={16} />
+        </Button>
       </div>
     </div>
   );

src/components/prompts/PromptFormPanel.tsx

@@ -0,0 +1,153 @@
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import MarkdownEditor from "@/components/MarkdownEditor";
+import { FullScreenPanel } from "@/components/common/FullScreenPanel";
+import type { Prompt, AppId } from "@/lib/api";
+
+interface PromptFormPanelProps {
+  appId: AppId;
+  editingId?: string;
+  initialData?: Prompt;
+  onSave: (id: string, prompt: Prompt) => Promise<void>;
+  onClose: () => void;
+}
+
+const PromptFormPanel: React.FC<PromptFormPanelProps> = ({
+  appId,
+  editingId,
+  initialData,
+  onSave,
+  onClose,
+}) => {
+  const { t } = useTranslation();
+  const appName = t(`apps.${appId}`);
+  const filenameMap: Record<AppId, string> = {
+    claude: "CLAUDE.md",
+    codex: "AGENTS.md",
+    gemini: "GEMINI.md",
+  };
+  const filename = filenameMap[appId];
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [content, setContent] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    setIsDarkMode(document.documentElement.classList.contains("dark"));
+
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(document.documentElement.classList.contains("dark"));
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (initialData) {
+      setName(initialData.name);
+      setDescription(initialData.description || "");
+      setContent(initialData.content);
+    }
+  }, [initialData]);
+
+  const handleSave = async () => {
+    if (!name.trim() || !content.trim()) {
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const id = editingId || `prompt-${Date.now()}`;
+      const timestamp = Math.floor(Date.now() / 1000);
+      const prompt: Prompt = {
+        id,
+        name: name.trim(),
+        description: description.trim() || undefined,
+        content: content.trim(),
+        enabled: initialData?.enabled || false,
+        createdAt: initialData?.createdAt || timestamp,
+        updatedAt: timestamp,
+      };
+      await onSave(id, prompt);
+      onClose();
+    } catch (error) {
+      // Error handled by hook
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const title = editingId
+    ? t("prompts.editTitle", { appName })
+    : t("prompts.addTitle", { appName });
+
+  return (
+    <FullScreenPanel
+      isOpen={true}
+      title={title}
+      onClose={onClose}
+      footer={
+        <Button
+          type="button"
+          onClick={handleSave}
+          disabled={!name.trim() || !content.trim() || saving}
+          className="bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {saving ? t("common.saving") : t("common.save")}
+        </Button>
+      }
+    >
+      <div className="glass rounded-xl p-6 border border-white/10 space-y-6">
+        <div>
+          <Label htmlFor="name" className="text-foreground">
+            {t("prompts.name")}
+          </Label>
+          <Input
+            id="name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder={t("prompts.namePlaceholder")}
+            className="mt-2"
+          />
+        </div>
+
+        <div>
+          <Label htmlFor="description" className="text-foreground">
+            {t("prompts.description")}
+          </Label>
+          <Input
+            id="description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder={t("prompts.descriptionPlaceholder")}
+            className="mt-2"
+          />
+        </div>
+
+        <div>
+          <Label htmlFor="content" className="block mb-2 text-foreground">
+            {t("prompts.content")}
+          </Label>
+          <MarkdownEditor
+            value={content}
+            onChange={setContent}
+            placeholder={t("prompts.contentPlaceholder", { filename })}
+            darkMode={isDarkMode}
+            minHeight="167px"
+          />
+        </div>
+      </div>
+    </FullScreenPanel>
+  );
+};
+
+export default PromptFormPanel;

src/components/prompts/PromptListItem.tsx

@@ -25,7 +25,7 @@ const PromptListItem: React.FC<PromptListItemProps> = ({
   const enabled = prompt.enabled === true;
 
   return (
-    <div className="h-16 rounded-lg border border-border-default bg-card p-4 transition-[border-color,box-shadow] duration-200 hover:border-border-hover hover:shadow-sm">
+    <div className="group relative h-16 rounded-xl border border-border-default bg-muted/50 p-4 transition-all duration-300 hover:bg-muted hover:border-border-default/80 hover:shadow-sm">
       <div className="flex items-center gap-4 h-full">
         {/* Toggle 开关 */}
         <div className="flex-shrink-0">

src/components/prompts/PromptPanel.tsx

@@ -1,18 +1,10 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Plus, FileText, Check } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { FileText } from "lucide-react";
 import { type AppId } from "@/lib/api";
 import { usePromptActions } from "@/hooks/usePromptActions";
 import PromptListItem from "./PromptListItem";
-import PromptFormModal from "./PromptFormModal";
+import PromptFormPanel from "./PromptFormPanel";
 import { ConfirmDialog } from "../ConfirmDialog";
 
 interface PromptPanelProps {
@@ -21,157 +13,143 @@ interface PromptPanelProps {
   appId: AppId;
 }
 
-const PromptPanel: React.FC<PromptPanelProps> = ({
-  open,
-  onOpenChange,
-  appId,
-}) => {
-  const { t } = useTranslation();
-  const [isFormOpen, setIsFormOpen] = useState(false);
-  const [editingId, setEditingId] = useState<string | null>(null);
-  const [confirmDialog, setConfirmDialog] = useState<{
-    isOpen: boolean;
-    titleKey: string;
-    messageKey: string;
-    messageParams?: Record<string, unknown>;
-    onConfirm: () => void;
-  } | null>(null);
+export interface PromptPanelHandle {
+  openAdd: () => void;
+}
 
-  const { prompts, loading, reload, savePrompt, deletePrompt, toggleEnabled } =
-    usePromptActions(appId);
+const PromptPanel = React.forwardRef<PromptPanelHandle, PromptPanelProps>(
+  ({ open, appId }, ref) => {
+    const { t } = useTranslation();
+    const [isFormOpen, setIsFormOpen] = useState(false);
+    const [editingId, setEditingId] = useState<string | null>(null);
+    const [confirmDialog, setConfirmDialog] = useState<{
+      isOpen: boolean;
+      titleKey: string;
+      messageKey: string;
+      messageParams?: Record<string, unknown>;
+      onConfirm: () => void;
+    } | null>(null);
 
-  useEffect(() => {
-    if (open) reload();
-  }, [open, reload]);
+    const {
+      prompts,
+      loading,
+      reload,
+      savePrompt,
+      deletePrompt,
+      toggleEnabled,
+    } = usePromptActions(appId);
 
-  const handleAdd = () => {
-    setEditingId(null);
-    setIsFormOpen(true);
-  };
+    useEffect(() => {
+      if (open) reload();
+    }, [open, reload]);
 
-  const handleEdit = (id: string) => {
-    setEditingId(id);
-    setIsFormOpen(true);
-  };
+    const handleAdd = () => {
+      setEditingId(null);
+      setIsFormOpen(true);
+    };
 
-  const handleDelete = (id: string) => {
-    const prompt = prompts[id];
-    setConfirmDialog({
-      isOpen: true,
-      titleKey: "prompts.confirm.deleteTitle",
-      messageKey: "prompts.confirm.deleteMessage",
-      messageParams: { name: prompt?.name },
-      onConfirm: async () => {
-        try {
-          await deletePrompt(id);
-          setConfirmDialog(null);
-        } catch (e) {
-          // Error handled by hook
-        }
-      },
-    });
-  };
+    React.useImperativeHandle(ref, () => ({
+      openAdd: handleAdd,
+    }));
 
-  const promptEntries = useMemo(() => Object.entries(prompts), [prompts]);
+    const handleEdit = (id: string) => {
+      setEditingId(id);
+      setIsFormOpen(true);
+    };
 
-  const enabledPrompt = promptEntries.find(([_, p]) => p.enabled);
+    const handleDelete = (id: string) => {
+      const prompt = prompts[id];
+      setConfirmDialog({
+        isOpen: true,
+        titleKey: "prompts.confirm.deleteTitle",
+        messageKey: "prompts.confirm.deleteMessage",
+        messageParams: { name: prompt?.name },
+        onConfirm: async () => {
+          try {
+            await deletePrompt(id);
+            setConfirmDialog(null);
+          } catch (e) {
+            // Error handled by hook
+          }
+        },
+      });
+    };
 
-  const appName = t(`apps.${appId}`);
-  const panelTitle = t("prompts.title", { appName });
+    const promptEntries = useMemo(() => Object.entries(prompts), [prompts]);
 
-  return (
-    <>
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="max-w-3xl max-h-[85vh] min-h-[600px] flex flex-col">
-          <DialogHeader>
-            <div className="flex items-center justify-between pr-8">
-              <DialogTitle>{panelTitle}</DialogTitle>
-              <Button type="button" variant="mcp" onClick={handleAdd}>
-                <Plus size={16} />
-                {t("prompts.add")}
-              </Button>
-            </div>
-          </DialogHeader>
+    const enabledPrompt = promptEntries.find(([_, p]) => p.enabled);
 
-          <div className="flex-shrink-0 px-6 py-4">
-            <div className="text-sm text-gray-500 dark:text-gray-400">
-              {t("prompts.count", { count: promptEntries.length })} ·{" "}
-              {enabledPrompt
-                ? t("prompts.enabledName", { name: enabledPrompt[1].name })
-                : t("prompts.noneEnabled")}
-            </div>
+    return (
+      <div className="mx-auto max-w-[56rem] flex flex-col h-[calc(100vh-8rem)] px-6">
+        <div className="flex-shrink-0 py-4 glass rounded-xl border border-white/10 mb-4 px-6">
+          <div className="text-sm text-muted-foreground">
+            {t("prompts.count", { count: promptEntries.length })} ·{" "}
+            {enabledPrompt
+              ? t("prompts.enabledName", { name: enabledPrompt[1].name })
+              : t("prompts.noneEnabled")}
           </div>
+        </div>
 
-          <div className="flex-1 overflow-y-auto px-6 pb-4">
-            {loading ? (
-              <div className="text-center py-12 text-gray-500 dark:text-gray-400">
-                {t("prompts.loading")}
+        <div className="flex-1 overflow-y-auto pb-16">
+          {loading ? (
+            <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+              {t("prompts.loading")}
+            </div>
+          ) : promptEntries.length === 0 ? (
+            <div className="text-center py-12">
+              <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
+                <FileText
+                  size={24}
+                  className="text-gray-400 dark:text-gray-500"
+                />
               </div>
-            ) : promptEntries.length === 0 ? (
-              <div className="text-center py-12">
-                <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
-                  <FileText
-                    size={24}
-                    className="text-gray-400 dark:text-gray-500"
-                  />
-                </div>
-                <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
-                  {t("prompts.empty")}
-                </h3>
-                <p className="text-gray-500 dark:text-gray-400 text-sm">
-                  {t("prompts.emptyDescription")}
-                </p>
-              </div>
-            ) : (
-              <div className="space-y-3">
-                {promptEntries.map(([id, prompt]) => (
-                  <PromptListItem
-                    key={id}
-                    id={id}
-                    prompt={prompt}
-                    onToggle={toggleEnabled}
-                    onEdit={handleEdit}
-                    onDelete={handleDelete}
-                  />
-                ))}
-              </div>
-            )}
-          </div>
+              <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
+                {t("prompts.empty")}
+              </h3>
+              <p className="text-gray-500 dark:text-gray-400 text-sm">
+                {t("prompts.emptyDescription")}
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {promptEntries.map(([id, prompt]) => (
+                <PromptListItem
+                  key={id}
+                  id={id}
+                  prompt={prompt}
+                  onToggle={toggleEnabled}
+                  onEdit={handleEdit}
+                  onDelete={handleDelete}
+                />
+              ))}
+            </div>
+          )}
+        </div>
 
-          <DialogFooter>
-            <Button
-              type="button"
-              variant="mcp"
-              onClick={() => onOpenChange(false)}
-            >
-              <Check size={16} />
-              {t("common.done")}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+        {isFormOpen && (
+          <PromptFormPanel
+            appId={appId}
+            editingId={editingId || undefined}
+            initialData={editingId ? prompts[editingId] : undefined}
+            onSave={savePrompt}
+            onClose={() => setIsFormOpen(false)}
+          />
+        )}
 
-      {isFormOpen && (
-        <PromptFormModal
-          appId={appId}
-          editingId={editingId || undefined}
-          initialData={editingId ? prompts[editingId] : undefined}
-          onSave={savePrompt}
-          onClose={() => setIsFormOpen(false)}
-        />
-      )}
+        {confirmDialog && (
+          <ConfirmDialog
+            isOpen={confirmDialog.isOpen}
+            title={t(confirmDialog.titleKey)}
+            message={t(confirmDialog.messageKey, confirmDialog.messageParams)}
+            onConfirm={confirmDialog.onConfirm}
+            onCancel={() => setConfirmDialog(null)}
+          />
+        )}
+      </div>
+    );
+  },
+);
 
-      {confirmDialog && (
-        <ConfirmDialog
-          isOpen={confirmDialog.isOpen}
-          title={t(confirmDialog.titleKey)}
-          message={t(confirmDialog.messageKey, confirmDialog.messageParams)}
-          onConfirm={confirmDialog.onConfirm}
-          onCancel={() => setConfirmDialog(null)}
-        />
-      )}
-    </>
-  );
-};
+PromptPanel.displayName = "PromptPanel";
 
 export default PromptPanel;

src/components/providers/AddProviderDialog.tsx

@@ -1,15 +1,8 @@
 import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { Plus } from "lucide-react";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
+import { FullScreenPanel } from "@/components/common/FullScreenPanel";
 import type { Provider, CustomEndpoint } from "@/types";
 import type { AppId } from "@/lib/api";
 import {
@@ -48,6 +41,8 @@ export function AddProviderDialog({
         notes: values.notes?.trim() || undefined,
         websiteUrl: values.websiteUrl?.trim() || undefined,
         settingsConfig: parsedConfig,
+        icon: values.icon?.trim() || undefined,
+        iconColor: values.iconColor?.trim() || undefined,
         ...(values.presetCategory ? { category: values.presetCategory } : {}),
         ...(values.meta ? { meta: values.meta } : {}),
       };
@@ -58,8 +53,6 @@ export function AddProviderDialog({
 
       if (!hasCustomEndpoints) {
         // 收集端点候选（仅在缺少自定义端点时兜底）
-        // 1. 从预设配置中获取 endpointCandidates
-        // 2. 从当前配置中提取 baseUrl (ANTHROPIC_BASE_URL 或 Codex base_url)
         const urlSet = new Set<string>();
 
         const addUrl = (rawUrl?: string) => {
@@ -170,34 +163,40 @@ export function AddProviderDialog({
         ? t("provider.addCodexProvider")
         : t("provider.addGeminiProvider");
 
+  const footer = (
+    <>
+      <Button
+        variant="outline"
+        onClick={() => onOpenChange(false)}
+        className="border-border/20 hover:bg-accent hover:text-accent-foreground"
+      >
+        {t("common.cancel")}
+      </Button>
+      <Button
+        type="submit"
+        form="provider-form"
+        className="bg-primary text-primary-foreground hover:bg-primary/90"
+      >
+        <Plus className="h-4 w-4 mr-2" />
+        {t("common.add")}
+      </Button>
+    </>
+  );
+
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-3xl max-h-[85vh] min-h-[600px] flex flex-col">
-        <DialogHeader>
-          <DialogTitle>{submitLabel}</DialogTitle>
-          <DialogDescription>{t("provider.addProviderHint")}</DialogDescription>
-        </DialogHeader>
-
-        <div className="flex-1 overflow-y-auto px-6 py-4">
-          <ProviderForm
-            appId={appId}
-            submitLabel={t("common.add")}
-            onSubmit={handleSubmit}
-            onCancel={() => onOpenChange(false)}
-            showButtons={false}
-          />
-        </div>
-
-        <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            {t("common.cancel")}
-          </Button>
-          <Button type="submit" form="provider-form">
-            <Plus className="h-4 w-4" />
-            {t("common.add")}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <FullScreenPanel
+      isOpen={open}
+      title={submitLabel}
+      onClose={() => onOpenChange(false)}
+      footer={footer}
+    >
+      <ProviderForm
+        appId={appId}
+        submitLabel={t("common.add")}
+        onSubmit={handleSubmit}
+        onCancel={() => onOpenChange(false)}
+        showButtons={false}
+      />
+    </FullScreenPanel>
   );
 }

src/components/providers/EditProviderDialog.tsx

@@ -1,15 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Save } from "lucide-react";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
+import { FullScreenPanel } from "@/components/common/FullScreenPanel";
 import type { Provider } from "@/types";
 import {
   ProviderForm,
@@ -34,7 +27,7 @@ export function EditProviderDialog({
 }: EditProviderDialogProps) {
   const { t } = useTranslation();
 
-  // 默认使用传入的 provider.settingsConfig，若当前编辑对象是“当前生效供应商”，则尝试读取实时配置替换初始值
+  // 默认使用传入的 provider.settingsConfig，若当前编辑对象是"当前生效供应商"，则尝试读取实时配置替换初始值
   const [liveSettings, setLiveSettings] = useState<Record<
     string,
     unknown
@@ -96,6 +89,8 @@ export function EditProviderDialog({
         notes: values.notes?.trim() || undefined,
         websiteUrl: values.websiteUrl?.trim() || undefined,
         settingsConfig: parsedConfig,
+        icon: values.icon?.trim() || undefined,
+        iconColor: values.iconColor?.trim() || undefined,
         ...(values.presetCategory ? { category: values.presetCategory } : {}),
         // 保留或更新 meta 字段
         ...(values.meta ? { meta: values.meta } : {}),
@@ -112,45 +107,40 @@ export function EditProviderDialog({
   }
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-3xl max-h-[85vh] min-h-[600px] flex flex-col">
-        <DialogHeader>
-          <DialogTitle>{t("provider.editProvider")}</DialogTitle>
-          <DialogDescription>
-            {t("provider.editProviderHint")}
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="flex-1 overflow-y-auto px-6 py-4">
-          <ProviderForm
-            appId={appId}
-            providerId={provider.id}
-            submitLabel={t("common.save")}
-            onSubmit={handleSubmit}
-            onCancel={() => onOpenChange(false)}
-            initialData={{
-              name: provider.name,
-              notes: provider.notes,
-              websiteUrl: provider.websiteUrl,
-              // 若读取到实时配置则优先使用
-              settingsConfig: initialSettingsConfig,
-              category: provider.category,
-              meta: provider.meta,
-            }}
-            showButtons={false}
-          />
-        </div>
-
-        <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            {t("common.cancel")}
-          </Button>
-          <Button type="submit" form="provider-form">
-            <Save className="h-4 w-4" />
-            {t("common.save")}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <FullScreenPanel
+      isOpen={open}
+      title={t("provider.editProvider")}
+      onClose={() => onOpenChange(false)}
+      footer={
+        <Button
+          type="submit"
+          form="provider-form"
+          className="bg-primary text-primary-foreground hover:bg-primary/90"
+        >
+          <Save className="h-4 w-4 mr-2" />
+          {t("common.save")}
+        </Button>
+      }
+    >
+      <ProviderForm
+        appId={appId}
+        providerId={provider.id}
+        submitLabel={t("common.save")}
+        onSubmit={handleSubmit}
+        onCancel={() => onOpenChange(false)}
+        initialData={{
+          name: provider.name,
+          notes: provider.notes,
+          websiteUrl: provider.websiteUrl,
+          // 若读取到实时配置则优先使用
+          settingsConfig: initialSettingsConfig,
+          category: provider.category,
+          meta: provider.meta,
+          icon: provider.icon,
+          iconColor: provider.iconColor,
+        }}
+        showButtons={false}
+      />
+    </FullScreenPanel>
   );
 }

src/components/providers/ProviderActions.tsx

@@ -1,4 +1,4 @@
-import { BarChart3, Check, Edit, Play, Trash2 } from "lucide-react";
+import { BarChart3, Check, Copy, Edit, Play, Trash2 } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -7,6 +7,7 @@ interface ProviderActionsProps {
   isCurrent: boolean;
   onSwitch: () => void;
   onEdit: () => void;
+  onDuplicate: () => void;
   onConfigureUsage: () => void;
   onDelete: () => void;
 }
@@ -15,20 +16,22 @@ export function ProviderActions({
   isCurrent,
   onSwitch,
   onEdit,
+  onDuplicate,
   onConfigureUsage,
   onDelete,
 }: ProviderActionsProps) {
   const { t } = useTranslation();
+  const iconButtonClass = "h-8 w-8 p-1";
 
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex items-center gap-1.5">
       <Button
         size="sm"
         variant={isCurrent ? "secondary" : "default"}
         onClick={onSwitch}
         disabled={isCurrent}
         className={cn(
-          "w-20",
+          "w-[4.5rem] px-2.5",
           isCurrent &&
             "bg-gray-200 text-muted-foreground hover:bg-gray-200 hover:text-muted-foreground dark:bg-gray-700 dark:hover:bg-gray-700",
         )}
@@ -52,15 +55,27 @@ export function ProviderActions({
           variant="ghost"
           onClick={onEdit}
           title={t("common.edit")}
+          className={iconButtonClass}
         >
           <Edit className="h-4 w-4" />
         </Button>
 
+        <Button
+          size="icon"
+          variant="ghost"
+          onClick={onDuplicate}
+          title={t("provider.duplicate")}
+          className={iconButtonClass}
+        >
+          <Copy className="h-4 w-4" />
+        </Button>
+
         <Button
           size="icon"
           variant="ghost"
           onClick={onConfigureUsage}
           title={t("provider.configureUsage")}
+          className={iconButtonClass}
         >
           <BarChart3 className="h-4 w-4" />
         </Button>
@@ -71,6 +86,7 @@ export function ProviderActions({
           onClick={isCurrent ? undefined : onDelete}
           title={t("common.delete")}
           className={cn(
+            iconButtonClass,
             !isCurrent && "hover:text-red-500 dark:hover:text-red-400",
             isCurrent && "opacity-40 cursor-not-allowed text-muted-foreground",
           )}

src/components/providers/ProviderCard.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { MoveVertical, Copy } from "lucide-react";
+import { GripVertical } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import type {
   DraggableAttributes,
@@ -8,8 +8,8 @@ import type {
 import type { Provider } from "@/types";
 import type { AppId } from "@/lib/api";
 import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
 import { ProviderActions } from "@/components/providers/ProviderActions";
+import { ProviderIcon } from "@/components/ProviderIcon";
 import UsageFooter from "@/components/UsageFooter";
 
 interface DragHandleProps {
@@ -22,7 +22,6 @@ interface ProviderCardProps {
   provider: Provider;
   isCurrent: boolean;
   appId: AppId;
-  isEditMode?: boolean;
   onSwitch: (provider: Provider) => void;
   onEdit: (provider: Provider) => void;
   onDelete: (provider: Provider) => void;
@@ -71,7 +70,6 @@ export function ProviderCard({
   provider,
   isCurrent,
   appId,
-  isEditMode = false,
   onSwitch,
   onEdit,
   onDelete,
@@ -116,53 +114,40 @@ export function ProviderCard({
   return (
     <div
       className={cn(
-        "rounded-lg bg-card p-4 shadow-sm",
-        "transition-[border-color,background-color,box-shadow,ring] duration-200",
+        "glass-card relative overflow-hidden rounded-xl p-4 transition-all duration-300",
+        "group hover:bg-black/[0.02] dark:hover:bg-white/[0.02] hover:border-primary/50",
         isCurrent
-          ? "border border-border-default bg-primary/5 ring-2 ring-blue-500/30 dark:ring-blue-400/30"
-          : "border border-border-default hover:border-border-hover",
+          ? "border-primary/50 bg-primary/5 shadow-[0_0_20px_rgba(59,130,246,0.15)]"
+          : "hover:scale-[1.01]",
         dragHandleProps?.isDragging &&
-          "cursor-grabbing border-active border-border-dragging shadow-lg",
+          "cursor-grabbing border-primary shadow-lg scale-105 z-10",
       )}
     >
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+      <div className="absolute inset-0 bg-gradient-to-r from-primary/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
+      <div className="relative flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex flex-1 items-center gap-2">
-          <div
+          <button
+            type="button"
             className={cn(
-              "flex items-center gap-1 overflow-hidden",
-              "transition-[max-width,opacity] duration-200 ease-in-out",
-              isEditMode ? "max-w-20 opacity-100" : "max-w-0 opacity-0",
+              "-ml-1.5 flex-shrink-0 cursor-grab active:cursor-grabbing p-1.5",
+              "text-muted-foreground/50 hover:text-muted-foreground transition-colors",
+              dragHandleProps?.isDragging && "cursor-grabbing",
             )}
-            aria-hidden={!isEditMode}
+            aria-label={t("provider.dragHandle")}
+            {...(dragHandleProps?.attributes ?? {})}
+            {...(dragHandleProps?.listeners ?? {})}
           >
-            <Button
-              type="button"
-              size="icon"
-              variant="ghost"
-              className={cn(
-                "flex-shrink-0 cursor-grab active:cursor-grabbing",
-                dragHandleProps?.isDragging && "cursor-grabbing",
-              )}
-              aria-label={t("provider.dragHandle")}
-              disabled={!isEditMode}
-              {...(dragHandleProps?.attributes ?? {})}
-              {...(dragHandleProps?.listeners ?? {})}
-            >
-              <MoveVertical className="h-4 w-4" />
-            </Button>
+            <GripVertical className="h-4 w-4" />
+          </button>
 
-            <Button
-              type="button"
-              size="icon"
-              variant="ghost"
-              className="flex-shrink-0"
-              onClick={() => onDuplicate(provider)}
-              disabled={!isEditMode}
-              aria-label={t("provider.duplicate")}
-              title={t("provider.duplicate")}
-            >
-              <Copy className="h-4 w-4" />
-            </Button>
+          {/* 供应商图标 */}
+          <div className="h-9 w-9 rounded-lg bg-white/5 flex items-center justify-center border border-gray-200 dark:border-white/10 group-hover:scale-105 transition-transform duration-300">
+            <ProviderIcon
+              icon={provider.icon}
+              name={provider.name}
+              color={provider.iconColor}
+              size={26}
+            />
           </div>
 
           <div className="space-y-1">
@@ -210,23 +195,28 @@ export function ProviderCard({
           </div>
         </div>
 
-        <div className="flex items-center gap-3">
-          <UsageFooter
-            provider={provider}
-            providerId={provider.id}
-            appId={appId}
-            usageEnabled={usageEnabled}
-            isCurrent={isCurrent}
-            inline={true}
-          />
+        <div className="relative flex items-center ml-auto">
+          <div className="ml-auto transition-transform duration-200 group-hover:-translate-x-[12.25rem] group-focus-within:-translate-x-[12.25rem] sm:group-hover:-translate-x-[14.25rem] sm:group-focus-within:-translate-x-[14.25rem]">
+            <UsageFooter
+              provider={provider}
+              providerId={provider.id}
+              appId={appId}
+              usageEnabled={usageEnabled}
+              isCurrent={isCurrent}
+              inline={true}
+            />
+          </div>
 
-          <ProviderActions
-            isCurrent={isCurrent}
-            onSwitch={() => onSwitch(provider)}
-            onEdit={() => onEdit(provider)}
-            onConfigureUsage={() => onConfigureUsage(provider)}
-            onDelete={() => onDelete(provider)}
-          />
+          <div className="absolute right-0 top-1/2 -translate-y-1/2 flex items-center gap-1.5 opacity-0 pointer-events-none group-hover:opacity-100 group-focus-within:opacity-100 group-hover:pointer-events-auto group-focus-within:pointer-events-auto transition-all duration-200 translate-x-2 group-hover:translate-x-0 group-focus-within:translate-x-0">
+            <ProviderActions
+              isCurrent={isCurrent}
+              onSwitch={() => onSwitch(provider)}
+              onEdit={() => onEdit(provider)}
+              onDuplicate={() => onDuplicate(provider)}
+              onConfigureUsage={() => onConfigureUsage(provider)}
+              onDelete={() => onDelete(provider)}
+            />
+          </div>
         </div>
       </div>
     </div>

src/components/providers/ProviderList.tsx

@@ -16,7 +16,6 @@ interface ProviderListProps {
   providers: Record<string, Provider>;
   currentProviderId: string;
   appId: AppId;
-  isEditMode?: boolean;
   onSwitch: (provider: Provider) => void;
   onEdit: (provider: Provider) => void;
   onDelete: (provider: Provider) => void;
@@ -31,7 +30,6 @@ export function ProviderList({
   providers,
   currentProviderId,
   appId,
-  isEditMode = false,
   onSwitch,
   onEdit,
   onDelete,
@@ -73,14 +71,16 @@ export function ProviderList({
         items={sortedProviders.map((provider) => provider.id)}
         strategy={verticalListSortingStrategy}
       >
-        <div className="space-y-3">
+        <div
+          className="space-y-3 animate-slide-up"
+          style={{ animationDelay: "0.1s" }}
+        >
           {sortedProviders.map((provider) => (
             <SortableProviderCard
               key={provider.id}
               provider={provider}
               isCurrent={provider.id === currentProviderId}
               appId={appId}
-              isEditMode={isEditMode}
               onSwitch={onSwitch}
               onEdit={onEdit}
               onDelete={onDelete}
@@ -99,7 +99,6 @@ interface SortableProviderCardProps {
   provider: Provider;
   isCurrent: boolean;
   appId: AppId;
-  isEditMode: boolean;
   onSwitch: (provider: Provider) => void;
   onEdit: (provider: Provider) => void;
   onDelete: (provider: Provider) => void;
@@ -112,7 +111,6 @@ function SortableProviderCard({
   provider,
   isCurrent,
   appId,
-  isEditMode,
   onSwitch,
   onEdit,
   onDelete,
@@ -140,7 +138,6 @@ function SortableProviderCard({
         provider={provider}
         isCurrent={isCurrent}
         appId={appId}
-        isEditMode={isEditMode}
         onSwitch={onSwitch}
         onEdit={onEdit}
         onDelete={onDelete}

src/components/providers/forms/BasicFormFields.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from "react-i18next";
+import { useState } from "react";
 import {
   FormControl,
   FormField,
@@ -7,6 +8,17 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogTrigger,
+  DialogClose,
+} from "@/components/ui/dialog";
+import { ProviderIcon } from "@/components/ProviderIcon";
+import { IconPicker } from "@/components/IconPicker";
+import { getIconMetadata } from "@/icons/extracted/metadata";
 import type { UseFormReturn } from "react-hook-form";
 import type { ProviderFormData } from "@/lib/schemas/provider";
 
@@ -16,22 +28,115 @@ interface BasicFormFieldsProps {
 
 export function BasicFormFields({ form }: BasicFormFieldsProps) {
   const { t } = useTranslation();
+  const [iconDialogOpen, setIconDialogOpen] = useState(false);
+
+  const currentIcon = form.watch("icon");
+  const currentIconColor = form.watch("iconColor");
+  const providerName = form.watch("name") || "Provider";
+  const effectiveIconColor =
+    currentIconColor ||
+    (currentIcon ? getIconMetadata(currentIcon)?.defaultColor : undefined);
+
+  const handleIconSelect = (icon: string) => {
+    const meta = getIconMetadata(icon);
+    form.setValue("icon", icon);
+    form.setValue("iconColor", meta?.defaultColor ?? "");
+  };
 
   return (
     <>
-      <FormField
-        control={form.control}
-        name="name"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>{t("provider.name")}</FormLabel>
-            <FormControl>
-              <Input {...field} placeholder={t("provider.namePlaceholder")} />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
+      {/* 图标选择区域 - 顶部居中，可选 */}
+      <div className="flex justify-center mb-6">
+        <Dialog open={iconDialogOpen} onOpenChange={setIconDialogOpen}>
+          <DialogTrigger asChild>
+            <button
+              type="button"
+              className="w-20 h-20 p-3 rounded-xl border-2 border-gray-300 dark:border-gray-600 hover:border-primary dark:hover:border-primary transition-colors cursor-pointer bg-gray-50 dark:bg-gray-800/50 flex items-center justify-center"
+              title={currentIcon ? "点击更换图标" : "点击选择图标"}
+            >
+              <ProviderIcon
+                icon={currentIcon}
+                name={providerName}
+                color={effectiveIconColor}
+                size={48}
+              />
+            </button>
+          </DialogTrigger>
+          <DialogContent
+            variant="fullscreen"
+            zIndex="top"
+            overlayClassName="bg-[hsl(var(--background))] backdrop-blur-0"
+            className="p-0 sm:rounded-none"
+          >
+            <div className="flex h-full flex-col">
+              <div className="flex-shrink-0 py-4 border-b border-border-default bg-muted/40">
+                <div className="mx-auto max-w-[56rem] px-6 flex items-center gap-4">
+                  <DialogClose asChild>
+                    <Button type="button" variant="outline" size="icon">
+                      <ArrowLeft className="h-4 w-4" />
+                    </Button>
+                  </DialogClose>
+                  <p className="text-lg font-semibold leading-tight">
+                    {t("providerIcon.selectIcon", {
+                      defaultValue: "选择图标",
+                    })}
+                  </p>
+                </div>
+              </div>
+              <div className="flex-1 overflow-y-auto">
+                <div className="space-y-6 mx-auto max-w-[56rem] px-6 py-6 w-full">
+                  <IconPicker
+                    value={currentIcon}
+                    onValueChange={handleIconSelect}
+                    color={effectiveIconColor}
+                  />
+                  <div className="flex justify-end gap-2">
+                    <DialogClose asChild>
+                      <Button type="button" variant="outline">
+                        {t("common.done", { defaultValue: "完成" })}
+                      </Button>
+                    </DialogClose>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      {/* 基础信息 - 网格布局 */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t("provider.name")}</FormLabel>
+              <FormControl>
+                <Input {...field} placeholder={t("provider.namePlaceholder")} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="notes"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t("provider.notes")}</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  placeholder={t("provider.notesPlaceholder")}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
 
       <FormField
         control={form.control}
@@ -46,20 +151,6 @@ export function BasicFormFields({ form }: BasicFormFieldsProps) {
           </FormItem>
         )}
       />
-
-      <FormField
-        control={form.control}
-        name="notes"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>{t("provider.notes")}</FormLabel>
-            <FormControl>
-              <Input {...field} placeholder={t("provider.notesPlaceholder")} />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
     </>
   );
 }

src/components/providers/forms/CodexCommonConfigModal.tsx

@@ -1,14 +1,9 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Save } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog";
+import { FullScreenPanel } from "@/components/common/FullScreenPanel";
 import { Button } from "@/components/ui/button";
+import JsonEditor from "@/components/JsonEditor";
 
 interface CodexCommonConfigModalProps {
   isOpen: boolean;
@@ -30,47 +25,30 @@ export const CodexCommonConfigModal: React.FC<CodexCommonConfigModalProps> = ({
   error,
 }) => {
   const { t } = useTranslation();
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    setIsDarkMode(document.documentElement.classList.contains("dark"));
+
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(document.documentElement.classList.contains("dark"));
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
 
   return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent
-        zIndex="nested"
-        className="max-w-2xl max-h-[90vh] flex flex-col p-0"
-      >
-        <DialogHeader className="px-6 pt-6 pb-0">
-          <DialogTitle>{t("codexConfig.editCommonConfigTitle")}</DialogTitle>
-        </DialogHeader>
-
-        <div className="flex-1 overflow-auto px-6 py-4 space-y-4">
-          <p className="text-sm text-gray-500 dark:text-gray-400">
-            {t("codexConfig.commonConfigHint")}
-          </p>
-
-          <textarea
-            value={value}
-            onChange={(e) => onChange(e.target.value)}
-            placeholder={`# Common Codex config
-
-# Add your common TOML configuration here`}
-            rows={12}
-            className="w-full px-3 py-2 border border-border-default  dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 focus:border-border-active  transition-colors resize-y"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="none"
-            spellCheck={false}
-            lang="en"
-            inputMode="text"
-            data-gramm="false"
-            data-gramm_editor="false"
-            data-enable-grammarly="false"
-          />
-
-          {error && (
-            <p className="text-sm text-red-500 dark:text-red-400">{error}</p>
-          )}
-        </div>
-
-        <DialogFooter>
+    <FullScreenPanel
+      isOpen={isOpen}
+      title={t("codexConfig.editCommonConfigTitle")}
+      onClose={onClose}
+      footer={
+        <>
           <Button type="button" variant="outline" onClick={onClose}>
             {t("common.cancel")}
           </Button>
@@ -78,8 +56,30 @@ export const CodexCommonConfigModal: React.FC<CodexCommonConfigModalProps> = ({
             <Save className="w-4 h-4" />
             {t("common.save")}
           </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </>
+      }
+    >
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground">
+          {t("codexConfig.commonConfigHint")}
+        </p>
+
+        <JsonEditor
+          value={value}
+          onChange={onChange}
+          placeholder={`# Common Codex config
+
+# Add your common TOML configuration here`}
+          darkMode={isDarkMode}
+          rows={16}
+          showValidation={false}
+          language="javascript"
+        />
+
+        {error && (
+          <p className="text-sm text-red-500 dark:text-red-400">{error}</p>
+        )}
+      </div>
+    </FullScreenPanel>
   );
 };

src/components/providers/forms/CodexConfigSections.tsx

@@ -1,8 +1,6 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Wand2 } from "lucide-react";
-import { toast } from "sonner";
-import { formatJSON } from "@/utils/formatters";
+import JsonEditor from "@/components/JsonEditor";
 
 interface CodexAuthSectionProps {
   value: string;
@@ -21,23 +19,27 @@ export const CodexAuthSection: React.FC<CodexAuthSectionProps> = ({
   error,
 }) => {
   const { t } = useTranslation();
+  const [isDarkMode, setIsDarkMode] = useState(false);
 
-  const handleFormat = () => {
-    if (!value.trim()) return;
+  useEffect(() => {
+    setIsDarkMode(document.documentElement.classList.contains("dark"));
 
-    try {
-      const formatted = formatJSON(value);
-      onChange(formatted);
-      toast.success(t("common.formatSuccess", { defaultValue: "格式化成功" }));
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : String(error);
-      toast.error(
-        t("common.formatError", {
-          defaultValue: "格式化失败：{{error}}",
-          error: errorMessage,
-        }),
-      );
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(document.documentElement.classList.contains("dark"));
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  const handleChange = (newValue: string) => {
+    onChange(newValue);
+    if (onBlur) {
+      onBlur();
     }
   };
 
@@ -50,39 +52,19 @@ export const CodexAuthSection: React.FC<CodexAuthSectionProps> = ({
         {t("codexConfig.authJson")}
       </label>
 
-      <textarea
-        id="codexAuth"
+      <JsonEditor
         value={value}
-        onChange={(e) => onChange(e.target.value)}
-        onBlur={onBlur}
+        onChange={handleChange}
         placeholder={t("codexConfig.authJsonPlaceholder")}
+        darkMode={isDarkMode}
         rows={6}
-        className="w-full px-3 py-2 border border-border-default  dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20  transition-colors resize-y min-h-[8rem]"
-        autoComplete="off"
-        autoCorrect="off"
-        autoCapitalize="none"
-        spellCheck={false}
-        lang="en"
-        inputMode="text"
-        data-gramm="false"
-        data-gramm_editor="false"
-        data-enable-grammarly="false"
+        showValidation={true}
+        language="json"
       />
 
-      <div className="flex items-center justify-between">
-        <button
-          type="button"
-          onClick={handleFormat}
-          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
-        >
-          <Wand2 className="w-3.5 h-3.5" />
-          {t("common.format", { defaultValue: "格式化" })}
-        </button>
-
-        {error && (
-          <p className="text-xs text-red-500 dark:text-red-400">{error}</p>
-        )}
-      </div>
+      {error && (
+        <p className="text-xs text-red-500 dark:text-red-400">{error}</p>
+      )}
 
       {!error && (
         <p className="text-xs text-gray-500 dark:text-gray-400">
@@ -116,6 +98,22 @@ export const CodexConfigSection: React.FC<CodexConfigSectionProps> = ({
   configError,
 }) => {
   const { t } = useTranslation();
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    setIsDarkMode(document.documentElement.classList.contains("dark"));
+
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(document.documentElement.classList.contains("dark"));
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
 
   return (
     <div className="space-y-2">
@@ -154,22 +152,14 @@ export const CodexConfigSection: React.FC<CodexConfigSectionProps> = ({
         </p>
       )}
 
-      <textarea
-        id="codexConfig"
+      <JsonEditor
         value={value}
-        onChange={(e) => onChange(e.target.value)}
+        onChange={onChange}
         placeholder=""
+        darkMode={isDarkMode}
         rows={8}
-        className="w-full px-3 py-2 border border-border-default  dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20  transition-colors resize-y min-h-[10rem]"
-        autoComplete="off"
-        autoCorrect="off"
-        autoCapitalize="none"
-        spellCheck={false}
-        lang="en"
-        inputMode="text"
-        data-gramm="false"
-        data-gramm_editor="false"
-        data-enable-grammarly="false"
+        showValidation={false}
+        language="javascript"
       />
 
       {configError && (

src/components/providers/forms/CommonConfigEditor.tsx

@@ -1,16 +1,10 @@
 import { useTranslation } from "react-i18next";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog";
+import { useEffect, useState } from "react";
+import { FullScreenPanel } from "@/components/common/FullScreenPanel";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
-import { Save, Wand2 } from "lucide-react";
-import { toast } from "sonner";
-import { formatJSON } from "@/utils/formatters";
+import { Save } from "lucide-react";
+import JsonEditor from "@/components/JsonEditor";
 
 interface CommonConfigEditorProps {
   value: string;
@@ -38,44 +32,22 @@ export function CommonConfigEditor({
   onModalClose,
 }: CommonConfigEditorProps) {
   const { t } = useTranslation();
+  const [isDarkMode, setIsDarkMode] = useState(false);
 
-  const handleFormatMain = () => {
-    if (!value.trim()) return;
+  useEffect(() => {
+    setIsDarkMode(document.documentElement.classList.contains("dark"));
 
-    try {
-      const formatted = formatJSON(value);
-      onChange(formatted);
-      toast.success(t("common.formatSuccess", { defaultValue: "格式化成功" }));
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : String(error);
-      toast.error(
-        t("common.formatError", {
-          defaultValue: "格式化失败：{{error}}",
-          error: errorMessage,
-        }),
-      );
-    }
-  };
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(document.documentElement.classList.contains("dark"));
+    });
 
-  const handleFormatModal = () => {
-    if (!commonConfigSnippet.trim()) return;
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
 
-    try {
-      const formatted = formatJSON(commonConfigSnippet);
-      onCommonConfigSnippetChange(formatted);
-      toast.success(t("common.formatSuccess", { defaultValue: "格式化成功" }));
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : String(error);
-      toast.error(
-        t("common.formatError", {
-          defaultValue: "格式化失败：{{error}}",
-          error: errorMessage,
-        }),
-      );
-    }
-  };
+    return () => observer.disconnect();
+  }, []);
 
   return (
     <>
@@ -115,90 +87,30 @@ export function CommonConfigEditor({
             {commonConfigError}
           </p>
         )}
-        <textarea
-          id="settingsConfig"
+        <JsonEditor
           value={value}
-          onChange={(e) => onChange(e.target.value)}
+          onChange={onChange}
           placeholder={`{
   "env": {
     "ANTHROPIC_BASE_URL": "https://your-api-endpoint.com",
     "ANTHROPIC_AUTH_TOKEN": "your-api-key-here"
   }
 }`}
+          darkMode={isDarkMode}
           rows={14}
-          className="w-full px-3 py-2 border border-border-default dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 transition-colors resize-y min-h-[16rem]"
-          autoComplete="off"
-          autoCorrect="off"
-          autoCapitalize="none"
-          spellCheck={false}
-          lang="en"
-          inputMode="text"
-          data-gramm="false"
-          data-gramm_editor="false"
-          data-enable-grammarly="false"
+          showValidation={true}
+          language="json"
         />
-        <div className="flex items-center justify-between">
-          <button
-            type="button"
-            onClick={handleFormatMain}
-            className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
-          >
-            <Wand2 className="w-3.5 h-3.5" />
-            {t("common.format", { defaultValue: "格式化" })}
-          </button>
-        </div>
       </div>
 
-      <Dialog
-        open={isModalOpen}
-        onOpenChange={(open) => !open && onModalClose()}
-      >
-        <DialogContent className="sm:max-w-[600px] max-h-[90vh] flex flex-col p-0">
-          <DialogHeader className="px-6 pt-6 pb-0">
-            <DialogTitle>
-              {t("claudeConfig.editCommonConfigTitle", {
-                defaultValue: "编辑通用配置片段",
-              })}
-            </DialogTitle>
-          </DialogHeader>
-          <div className="flex-1 overflow-auto px-6 py-4 space-y-4">
-            <p className="text-sm text-muted-foreground">
-              {t("claudeConfig.commonConfigHint", {
-                defaultValue: "通用配置片段将合并到所有启用它的供应商配置中",
-              })}
-            </p>
-            <textarea
-              value={commonConfigSnippet}
-              onChange={(e) => onCommonConfigSnippetChange(e.target.value)}
-              rows={12}
-              className="w-full px-3 py-2 border border-border-default dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 transition-colors resize-y min-h-[14rem]"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="none"
-              spellCheck={false}
-              lang="en"
-              inputMode="text"
-              data-gramm="false"
-              data-gramm_editor="false"
-              data-enable-grammarly="false"
-            />
-            <div className="flex items-center justify-between">
-              <button
-                type="button"
-                onClick={handleFormatModal}
-                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
-              >
-                <Wand2 className="w-3.5 h-3.5" />
-                {t("common.format", { defaultValue: "格式化" })}
-              </button>
-              {commonConfigError && (
-                <p className="text-sm text-red-500 dark:text-red-400">
-                  {commonConfigError}
-                </p>
-              )}
-            </div>
-          </div>
-          <DialogFooter>
+      <FullScreenPanel
+        isOpen={isModalOpen}
+        title={t("claudeConfig.editCommonConfigTitle", {
+          defaultValue: "编辑通用配置片段",
+        })}
+        onClose={onModalClose}
+        footer={
+          <>
             <Button type="button" variant="outline" onClick={onModalClose}>
               {t("common.cancel")}
             </Button>
@@ -206,9 +118,35 @@ export function CommonConfigEditor({
               <Save className="w-4 h-4" />
               {t("common.save")}
             </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+          </>
+        }
+      >
+        <div className="space-y-4">
+          <p className="text-sm text-muted-foreground">
+            {t("claudeConfig.commonConfigHint", {
+              defaultValue: "通用配置片段将合并到所有启用它的供应商配置中",
+            })}
+          </p>
+          <JsonEditor
+            value={commonConfigSnippet}
+            onChange={onCommonConfigSnippetChange}
+            placeholder={`{
+  "env": {
+    "ANTHROPIC_BASE_URL": "https://your-api-endpoint.com"
+  }
+}`}
+            darkMode={isDarkMode}
+            rows={16}
+            showValidation={true}
+            language="json"
+          />
+          {commonConfigError && (
+            <p className="text-sm text-red-500 dark:text-red-400">
+              {commonConfigError}
+            </p>
+          )}
+        </div>
+      </FullScreenPanel>
     </>
   );
 }

src/components/providers/forms/EndpointSpeedTest.tsx

@@ -5,13 +5,7 @@ import type { AppId } from "@/lib/api";
 import { vscodeApi } from "@/lib/api/vscode";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog";
+import { FullScreenPanel } from "@/components/common/FullScreenPanel";
 import type { CustomEndpoint, EndpointCandidate } from "@/types";
 
 // 端点测速超时配置（秒）
@@ -431,211 +425,218 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
     onClose();
   }, [isEditMode, providerId, entries, initialCustomUrls, appId, onClose, t]);
 
-  return (
-    <Dialog open={visible} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent
-        zIndex="nested"
-        className="max-w-2xl max-h-[80vh] flex flex-col p-0"
+  if (!visible) return null;
+
+  const footer = (
+    <div className="flex items-center gap-2">
+      <Button
+        type="button"
+        variant="outline"
+        onClick={(event) => {
+          event.preventDefault();
+          onClose();
+        }}
+        disabled={isSaving}
       >
-        <DialogHeader className="px-6 pt-6 pb-0">
-          <DialogTitle>{t("endpointTest.title")}</DialogTitle>
-        </DialogHeader>
+        {t("common.cancel")}
+      </Button>
+      <Button
+        type="button"
+        onClick={handleSave}
+        disabled={isSaving}
+        className="gap-2"
+      >
+        {isSaving ? (
+          <>
+            <Loader2 className="w-4 h-4 animate-spin" />
+            {t("common.saving")}
+          </>
+        ) : (
+          <>
+            <Save className="w-4 h-4" />
+            {t("common.save")}
+          </>
+        )}
+      </Button>
+    </div>
+  );
 
-        {/* Content */}
-        <div className="flex-1 overflow-auto px-6 py-4 space-y-4">
-          {/* 测速控制栏 */}
-          <div className="flex items-center justify-between">
-            <div className="text-sm text-gray-600 dark:text-gray-400">
-              {entries.length} {t("endpointTest.endpoints")}
-            </div>
-            <div className="flex items-center gap-3">
-              <label className="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400">
-                <input
-                  type="checkbox"
-                  checked={autoSelect}
-                  onChange={(event) => setAutoSelect(event.target.checked)}
-                  className="h-3.5 w-3.5 rounded border-border-default "
-                />
-                {t("endpointTest.autoSelect")}
-              </label>
-              <Button
-                type="button"
-                onClick={runSpeedTest}
-                disabled={isTesting || !hasEndpoints}
-                size="sm"
-                className="h-7 w-20 gap-1.5 text-xs"
-              >
-                {isTesting ? (
-                  <>
-                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                    {t("endpointTest.testing")}
-                  </>
-                ) : (
-                  <>
-                    <Zap className="h-3.5 w-3.5" />
-                    {t("endpointTest.testSpeed")}
-                  </>
-                )}
-              </Button>
-            </div>
+  return (
+    <FullScreenPanel
+      isOpen={visible}
+      title={t("endpointTest.title")}
+      onClose={onClose}
+      footer={footer}
+    >
+      <div className="glass rounded-xl p-6 border border-white/10 flex flex-col gap-6">
+        {/* 测速控制栏 */}
+        <div className="flex items-center justify-between">
+          <div className="text-sm text-muted-foreground">
+            {entries.length} {t("endpointTest.endpoints")}
           </div>
-
-          {/* 添加输入 */}
-          <div className="space-y-1.5">
-            <div className="flex gap-2">
-              <Input
-                type="url"
-                value={customUrl}
-                placeholder={t("endpointTest.addEndpointPlaceholder")}
-                onChange={(event) => setCustomUrl(event.target.value)}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter") {
-                    event.preventDefault();
-                    handleAddEndpoint();
-                  }
-                }}
-                className="flex-1"
+          <div className="flex items-center gap-3">
+            <label className="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400">
+              <input
+                type="checkbox"
+                checked={autoSelect}
+                onChange={(event) => setAutoSelect(event.target.checked)}
+                className="h-3.5 w-3.5 rounded border-border-default bg-background text-primary focus:ring-2 focus:ring-primary/20"
               />
-              <Button
-                type="button"
-                onClick={handleAddEndpoint}
-                variant="outline"
-                size="icon"
-              >
-                <Plus className="h-4 w-4" />
-              </Button>
-            </div>
-            {addError && (
-              <div className="flex items-center gap-1.5 text-xs text-red-600 dark:text-red-400">
-                <AlertCircle className="h-3 w-3" />
-                {addError}
-              </div>
-            )}
+              {t("endpointTest.autoSelect")}
+            </label>
+            <Button
+              type="button"
+              onClick={runSpeedTest}
+              disabled={isTesting || !hasEndpoints}
+              size="sm"
+              className="h-7 w-24 gap-1.5 text-xs bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-60"
+            >
+              {isTesting ? (
+                <>
+                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                  {t("endpointTest.testing")}
+                </>
+              ) : (
+                <>
+                  <Zap className="h-3.5 w-3.5" />
+                  {t("endpointTest.testSpeed")}
+                </>
+              )}
+            </Button>
           </div>
+        </div>
 
-          {/* 端点列表 */}
-          {hasEndpoints ? (
-            <div className="space-y-2">
-              {sortedEntries.map((entry) => {
-                const isSelected = normalizedSelected === entry.url;
-                const latency = entry.latency;
-
-                return (
-                  <div
-                    key={entry.id}
-                    onClick={() => handleSelect(entry.url)}
-                    className={`group flex cursor-pointer items-center justify-between px-3 py-2.5 rounded-lg border transition ${
-                      isSelected
-                        ? "border-blue-500 bg-blue-50 dark:border-blue-500 dark:bg-blue-900/20"
-                        : "border-border-default bg-white hover:border-border-default hover:bg-gray-50  dark:bg-gray-900 dark:hover:border-gray-600 dark:hover:bg-gray-800"
-                    }`}
-                  >
-                    <div className="flex min-w-0 flex-1 items-center gap-3">
-                      {/* 选择指示器 */}
-                      <div
-                        className={`h-1.5 w-1.5 flex-shrink-0 rounded-full transition ${
-                          isSelected
-                            ? "bg-blue-500 dark:bg-blue-400"
-                            : "bg-gray-300 dark:bg-gray-700"
-                        }`}
-                      />
-
-                      {/* 内容 */}
-                      <div className="min-w-0 flex-1">
-                        <div className="truncate text-sm text-gray-900 dark:text-gray-100">
-                          {entry.url}
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* 右侧信息 */}
-                    <div className="flex items-center gap-2">
-                      {latency !== null ? (
-                        <div className="text-right">
-                          <div
-                            className={`font-mono text-sm font-medium ${
-                              latency < 300
-                                ? "text-green-600 dark:text-green-400"
-                                : latency < 500
-                                  ? "text-yellow-600 dark:text-yellow-400"
-                                  : latency < 800
-                                    ? "text-orange-600 dark:text-orange-400"
-                                    : "text-red-600 dark:text-red-400"
-                            }`}
-                          >
-                            {latency}ms
-                          </div>
-                        </div>
-                      ) : isTesting ? (
-                        <Loader2 className="h-4 w-4 animate-spin text-gray-400" />
-                      ) : entry.error ? (
-                        <div className="text-xs text-gray-400">
-                          {t("endpointTest.failed")}
-                        </div>
-                      ) : (
-                        <div className="text-xs text-gray-400">—</div>
-                      )}
-
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleRemoveEndpoint(entry);
-                        }}
-                        className="opacity-0 transition hover:text-red-600 group-hover:opacity-100 dark:hover:text-red-400"
-                      >
-                        <X className="h-4 w-4" />
-                      </button>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          ) : (
-            <div className="rounded-md border border-dashed border-border-default bg-gray-50 py-8 text-center text-xs text-gray-500  dark:bg-gray-900 dark:text-gray-400">
-              {t("endpointTest.noEndpoints")}
-            </div>
-          )}
-
-          {/* 错误提示 */}
-          {lastError && (
+        {/* 添加输入 */}
+        <div className="space-y-1.5">
+          <div className="flex gap-2">
+            <Input
+              type="url"
+              value={customUrl}
+              placeholder={t("endpointTest.addEndpointPlaceholder")}
+              onChange={(event) => setCustomUrl(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  handleAddEndpoint();
+                }
+              }}
+              className="flex-1"
+            />
+            <Button
+              type="button"
+              onClick={handleAddEndpoint}
+              variant="outline"
+              size="icon"
+            >
+              <Plus className="h-4 w-4" />
+            </Button>
+          </div>
+          {addError && (
             <div className="flex items-center gap-1.5 text-xs text-red-600 dark:text-red-400">
               <AlertCircle className="h-3 w-3" />
-              {lastError}
+              {addError}
             </div>
           )}
         </div>
 
-        <DialogFooter className="gap-2">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={onClose}
-            disabled={isSaving}
-          >
-            {t("common.cancel")}
-          </Button>
-          <Button
-            type="button"
-            onClick={handleSave}
-            disabled={isSaving}
-            className="gap-2"
-          >
-            {isSaving ? (
-              <>
-                <Loader2 className="w-4 h-4 animate-spin" />
-                {t("common.saving")}
-              </>
-            ) : (
-              <>
-                <Save className="w-4 h-4" />
-                {t("common.save")}
-              </>
-            )}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        {/* 端点列表 */}
+        {hasEndpoints ? (
+          <div className="space-y-2">
+            {sortedEntries.map((entry) => {
+              const isSelected = normalizedSelected === entry.url;
+              const latency = entry.latency;
+
+              return (
+                <div
+                  key={entry.id}
+                  onClick={() => handleSelect(entry.url)}
+                  className={`group flex cursor-pointer items-center justify-between px-3 py-2.5 rounded-lg border transition ${
+                    isSelected
+                      ? "border-primary/70 bg-primary/5 shadow-sm"
+                      : "border-border-default bg-background hover:bg-muted"
+                  }`}
+                >
+                  <div className="flex min-w-0 flex-1 items-center gap-3">
+                    {/* 选择指示器 */}
+                    <div
+                      className={`h-1.5 w-1.5 flex-shrink-0 rounded-full transition ${
+                        isSelected
+                          ? "bg-blue-500 dark:bg-blue-400"
+                          : "bg-gray-300 dark:bg-gray-700"
+                      }`}
+                    />
+
+                    {/* 内容 */}
+                    <div className="min-w-0 flex-1">
+                      <div className="truncate text-sm text-gray-900 dark:text-gray-100">
+                        {entry.url}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 右侧信息 */}
+                  <div className="flex items-center gap-2">
+                    {latency !== null ? (
+                      <div className="text-right">
+                        <div
+                          className={`font-mono text-sm font-medium ${
+                            latency < 300
+                              ? "text-emerald-600 dark:text-emerald-400"
+                              : latency < 500
+                                ? "text-yellow-600 dark:text-yellow-400"
+                                : latency < 800
+                                  ? "text-orange-600 dark:text-orange-400"
+                                  : "text-red-600 dark:text-red-400"
+                          }`}
+                        >
+                          {latency}ms
+                        </div>
+                        <div className="text-[10px] text-gray-500 dark:text-gray-400">
+                          {entry.status
+                            ? t("endpointTest.status", { code: entry.status })
+                            : t("endpointTest.notTested")}
+                        </div>
+                      </div>
+                    ) : isTesting ? (
+                      <Loader2 className="h-4 w-4 animate-spin text-gray-400" />
+                    ) : entry.error ? (
+                      <div className="text-xs text-gray-400">
+                        {t("endpointTest.failed")}
+                      </div>
+                    ) : (
+                      <div className="text-xs text-gray-400">—</div>
+                    )}
+
+                    <button
+                      type="button"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        handleRemoveEndpoint(entry);
+                      }}
+                      className="opacity-0 transition hover:text-red-600 group-hover:opacity-100 dark:hover:text-red-400"
+                    >
+                      <X className="h-4 w-4" />
+                    </button>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="rounded-md border border-dashed border-border-default bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
+            {t("endpointTest.empty")}
+          </div>
+        )}
+
+        {/* 错误提示 */}
+        {lastError && (
+          <div className="flex items-center gap-1.5 text-xs text-red-600 dark:text-red-400">
+            <AlertCircle className="h-3 w-3" />
+            {lastError}
+          </div>
+        )}
+      </div>
+    </FullScreenPanel>
   );
 };
 

src/components/providers/forms/GeminiCommonConfigModal.tsx

@@ -1,16 +1,9 @@
-import React from "react";
-import { Save, Wand2 } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { Save } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog";
+import { FullScreenPanel } from "@/components/common/FullScreenPanel";
 import { Button } from "@/components/ui/button";
-import { formatJSON } from "@/utils/formatters";
+import JsonEditor from "@/components/JsonEditor";
 
 interface GeminiCommonConfigModalProps {
   isOpen: boolean;
@@ -28,86 +21,32 @@ export const GeminiCommonConfigModal: React.FC<
   GeminiCommonConfigModalProps
 > = ({ isOpen, onClose, value, onChange, error }) => {
   const { t } = useTranslation();
+  const [isDarkMode, setIsDarkMode] = useState(false);
 
-  const handleFormat = () => {
-    if (!value.trim()) return;
+  useEffect(() => {
+    setIsDarkMode(document.documentElement.classList.contains("dark"));
 
-    try {
-      const formatted = formatJSON(value);
-      onChange(formatted);
-      toast.success(t("common.formatSuccess", { defaultValue: "格式化成功" }));
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : String(error);
-      toast.error(
-        t("common.formatError", {
-          defaultValue: "格式化失败：{{error}}",
-          error: errorMessage,
-        }),
-      );
-    }
-  };
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(document.documentElement.classList.contains("dark"));
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
 
   return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent
-        zIndex="nested"
-        className="max-w-2xl max-h-[90vh] flex flex-col p-0"
-      >
-        <DialogHeader className="px-6 pt-6 pb-0">
-          <DialogTitle>
-            {t("geminiConfig.editCommonConfigTitle", {
-              defaultValue: "编辑 Gemini 通用配置片段",
-            })}
-          </DialogTitle>
-        </DialogHeader>
-
-        <div className="flex-1 overflow-auto px-6 py-4 space-y-4">
-          <p className="text-sm text-gray-500 dark:text-gray-400">
-            {t("geminiConfig.commonConfigHint", {
-              defaultValue:
-                "通用配置片段将合并到所有启用它的 Gemini 供应商配置中",
-            })}
-          </p>
-
-          <textarea
-            value={value}
-            onChange={(e) => onChange(e.target.value)}
-            placeholder={`{
-  "timeout": 30000,
-  "maxRetries": 3,
-  "customField": "value"
-}`}
-            rows={12}
-            className="w-full px-3 py-2 border border-border-default dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 focus:border-border-active transition-colors resize-y"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="none"
-            spellCheck={false}
-            lang="en"
-            inputMode="text"
-            data-gramm="false"
-            data-gramm_editor="false"
-            data-enable-grammarly="false"
-          />
-
-          <div className="flex items-center justify-between">
-            <button
-              type="button"
-              onClick={handleFormat}
-              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
-            >
-              <Wand2 className="w-3.5 h-3.5" />
-              {t("common.format", { defaultValue: "格式化" })}
-            </button>
-
-            {error && (
-              <p className="text-sm text-red-500 dark:text-red-400">{error}</p>
-            )}
-          </div>
-        </div>
-
-        <DialogFooter>
+    <FullScreenPanel
+      isOpen={isOpen}
+      title={t("geminiConfig.editCommonConfigTitle", {
+        defaultValue: "编辑 Gemini 通用配置片段",
+      })}
+      onClose={onClose}
+      footer={
+        <>
           <Button type="button" variant="outline" onClick={onClose}>
             {t("common.cancel")}
           </Button>
@@ -115,8 +54,35 @@ export const GeminiCommonConfigModal: React.FC<
             <Save className="w-4 h-4" />
             {t("common.save")}
           </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </>
+      }
+    >
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground">
+          {t("geminiConfig.commonConfigHint", {
+            defaultValue:
+              "通用配置片段将合并到所有启用它的 Gemini 供应商配置中",
+          })}
+        </p>
+
+        <JsonEditor
+          value={value}
+          onChange={onChange}
+          placeholder={`{
+  "timeout": 30000,
+  "maxRetries": 3,
+  "customField": "value"
+}`}
+          darkMode={isDarkMode}
+          rows={16}
+          showValidation={true}
+          language="json"
+        />
+
+        {error && (
+          <p className="text-sm text-red-500 dark:text-red-400">{error}</p>
+        )}
+      </div>
+    </FullScreenPanel>
   );
 };

src/components/providers/forms/GeminiConfigSections.tsx

@@ -1,8 +1,6 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Wand2 } from "lucide-react";
-import { toast } from "sonner";
-import { formatJSON } from "@/utils/formatters";
+import JsonEditor from "@/components/JsonEditor";
 
 interface GeminiEnvSectionProps {
   value: string;
@@ -21,27 +19,27 @@ export const GeminiEnvSection: React.FC<GeminiEnvSectionProps> = ({
   error,
 }) => {
   const { t } = useTranslation();
+  const [isDarkMode, setIsDarkMode] = useState(false);
 
-  const handleFormat = () => {
-    if (!value.trim()) return;
+  useEffect(() => {
+    setIsDarkMode(document.documentElement.classList.contains("dark"));
 
-    try {
-      // 重新格式化 .env 内容
-      const formatted = value
-        .split("\n")
-        .filter((line) => line.trim())
-        .join("\n");
-      onChange(formatted);
-      toast.success(t("common.formatSuccess", { defaultValue: "格式化成功" }));
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : String(error);
-      toast.error(
-        t("common.formatError", {
-          defaultValue: "格式化失败：{{error}}",
-          error: errorMessage,
-        }),
-      );
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(document.documentElement.classList.contains("dark"));
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  const handleChange = (newValue: string) => {
+    onChange(newValue);
+    if (onBlur) {
+      onBlur();
     }
   };
 
@@ -54,41 +52,21 @@ export const GeminiEnvSection: React.FC<GeminiEnvSectionProps> = ({
         {t("geminiConfig.envFile", { defaultValue: "环境变量 (.env)" })}
       </label>
 
-      <textarea
-        id="geminiEnv"
+      <JsonEditor
         value={value}
-        onChange={(e) => onChange(e.target.value)}
-        onBlur={onBlur}
+        onChange={handleChange}
         placeholder={`GOOGLE_GEMINI_BASE_URL=https://your-api-endpoint.com/
 GEMINI_API_KEY=sk-your-api-key-here
 GEMINI_MODEL=gemini-3-pro-preview`}
+        darkMode={isDarkMode}
         rows={6}
-        className="w-full px-3 py-2 border border-border-default dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 transition-colors resize-y min-h-[8rem]"
-        autoComplete="off"
-        autoCorrect="off"
-        autoCapitalize="none"
-        spellCheck={false}
-        lang="en"
-        inputMode="text"
-        data-gramm="false"
-        data-gramm_editor="false"
-        data-enable-grammarly="false"
+        showValidation={false}
+        language="javascript"
       />
 
-      <div className="flex items-center justify-between">
-        <button
-          type="button"
-          onClick={handleFormat}
-          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
-        >
-          <Wand2 className="w-3.5 h-3.5" />
-          {t("common.format", { defaultValue: "格式化" })}
-        </button>
-
-        {error && (
-          <p className="text-xs text-red-500 dark:text-red-400">{error}</p>
-        )}
-      </div>
+      {error && (
+        <p className="text-xs text-red-500 dark:text-red-400">{error}</p>
+      )}
 
       {!error && (
         <p className="text-xs text-gray-500 dark:text-gray-400">
@@ -124,25 +102,22 @@ export const GeminiConfigSection: React.FC<GeminiConfigSectionProps> = ({
   configError,
 }) => {
   const { t } = useTranslation();
+  const [isDarkMode, setIsDarkMode] = useState(false);
 
-  const handleFormat = () => {
-    if (!value.trim()) return;
+  useEffect(() => {
+    setIsDarkMode(document.documentElement.classList.contains("dark"));
 
-    try {
-      const formatted = formatJSON(value);
-      onChange(formatted);
-      toast.success(t("common.formatSuccess", { defaultValue: "格式化成功" }));
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : String(error);
-      toast.error(
-        t("common.formatError", {
-          defaultValue: "格式化失败：{{error}}",
-          error: errorMessage,
-        }),
-      );
-    }
-  };
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(document.documentElement.classList.contains("dark"));
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
 
   return (
     <div className="space-y-2">
@@ -187,43 +162,22 @@ export const GeminiConfigSection: React.FC<GeminiConfigSectionProps> = ({
         </p>
       )}
 
-      <textarea
-        id="geminiConfig"
+      <JsonEditor
         value={value}
-        onChange={(e) => onChange(e.target.value)}
+        onChange={onChange}
         placeholder={`{
   "timeout": 30000,
   "maxRetries": 3
 }`}
+        darkMode={isDarkMode}
         rows={8}
-        className="w-full px-3 py-2 border border-border-default dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 transition-colors resize-y min-h-[10rem]"
-        autoComplete="off"
-        autoCorrect="off"
-        autoCapitalize="none"
-        spellCheck={false}
-        lang="en"
-        inputMode="text"
-        data-gramm="false"
-        data-gramm_editor="false"
-        data-enable-grammarly="false"
+        showValidation={true}
+        language="json"
       />
 
-      <div className="flex items-center justify-between">
-        <button
-          type="button"
-          onClick={handleFormat}
-          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
-        >
-          <Wand2 className="w-3.5 h-3.5" />
-          {t("common.format", { defaultValue: "格式化" })}
-        </button>
-
-        {configError && (
-          <p className="text-xs text-red-500 dark:text-red-400">
-            {configError}
-          </p>
-        )}
-      </div>
+      {configError && (
+        <p className="text-xs text-red-500 dark:text-red-400">{configError}</p>
+      )}
 
       {!configError && (
         <p className="text-xs text-gray-500 dark:text-gray-400">

src/components/providers/forms/ProviderForm.tsx

@@ -78,6 +78,8 @@ interface ProviderFormProps {
     settingsConfig?: Record<string, unknown>;
     category?: ProviderCategory;
     meta?: ProviderMeta;
+    icon?: string;
+    iconColor?: string;
   };
   showButtons?: boolean;
 }
@@ -147,6 +149,8 @@ export function ProviderForm({
           : appId === "gemini"
             ? GEMINI_DEFAULT_CONFIG
             : CLAUDE_DEFAULT_CONFIG,
+      icon: initialData?.icon ?? "",
+      iconColor: initialData?.iconColor ?? "",
     }),
     [initialData, appId],
   );
@@ -651,7 +655,7 @@ export function ProviderForm({
       <form
         id="provider-form"
         onSubmit={form.handleSubmit(handleSubmit)}
-        className="space-y-6"
+        className="space-y-6 glass rounded-xl p-6 border border-white/10"
       >
         {/* 预设供应商选择（仅新增模式显示） */}
         {!initialData && (

src/components/providers/forms/ProviderPresetSelector.tsx

@@ -99,7 +99,7 @@ export function ProviderPresetSelector({
       return `${baseClass} bg-blue-500 text-white dark:bg-blue-600`;
     }
 
-    return `${baseClass} bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700`;
+    return `${baseClass} bg-accent text-muted-foreground hover:bg-accent/80`;
   };
 
   // 获取预设按钮的内联样式（用于自定义背景色）
@@ -128,7 +128,7 @@ export function ProviderPresetSelector({
           className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
             selectedPresetId === "custom"
               ? "bg-blue-500 text-white dark:bg-blue-600"
-              : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
+              : "bg-accent text-muted-foreground hover:bg-accent/80"
           }`}
         >
           {t("providerPreset.custom")}

src/components/settings/ImportExportSection.tsx

@@ -44,66 +44,73 @@ export function ImportExportSection({
 
   return (
     <section className="space-y-4">
-      <header className="space-y-1">
-        <h3 className="text-sm font-medium">{t("settings.importExport")}</h3>
-        <p className="text-xs text-muted-foreground">
+      <header className="space-y-2">
+        <h3 className="text-base font-semibold text-foreground">
+          {t("settings.importExport")}
+        </h3>
+        <p className="text-sm text-muted-foreground">
           {t("settings.importExportHint")}
         </p>
       </header>
 
-      <div className="space-y-3 rounded-lg border border-border-default p-4">
-        <Button
-          type="button"
-          className="w-full"
-          variant="secondary"
-          onClick={onExport}
-        >
-          <Save className="mr-2 h-4 w-4" />
-          {t("settings.exportConfig")}
-        </Button>
-
-        <div className="space-y-2">
-          <div className="flex flex-wrap items-center gap-2">
+      <div className="space-y-4 rounded-xl glass-card p-6 border border-white/10">
+        {/* Import and Export Buttons Side by Side */}
+        <div className="grid grid-cols-2 gap-4 items-stretch">
+          {/* Import Button */}
+          <div className="relative">
             <Button
               type="button"
-              variant="outline"
-              className="flex-1 min-w-[180px]"
-              onClick={onSelectFile}
+              className={`w-full h-auto py-3 px-4 bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white ${selectedFile && !isImporting ? "flex-col items-start" : "items-center"}`}
+              onClick={!selectedFile ? onSelectFile : onImport}
+              disabled={isImporting}
             >
-              <FolderOpen className="mr-2 h-4 w-4" />
-              {t("settings.selectConfigFile")}
-            </Button>
-            <Button
-              type="button"
-              disabled={!selectedFile || isImporting}
-              onClick={onImport}
-            >
-              {isImporting ? (
-                <span className="inline-flex items-center gap-2">
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                  {t("settings.importing")}
+              <div className="flex items-center gap-2 w-full justify-center">
+                {isImporting ? (
+                  <Loader2 className="h-4 w-4 animate-spin flex-shrink-0" />
+                ) : selectedFile ? (
+                  <CheckCircle2 className="h-4 w-4 flex-shrink-0" />
+                ) : (
+                  <FolderOpen className="h-4 w-4 flex-shrink-0" />
+                )}
+                <span className="font-medium">
+                  {isImporting
+                    ? t("settings.importing")
+                    : selectedFile
+                      ? t("settings.import")
+                      : t("settings.selectConfigFile")}
                 </span>
-              ) : (
-                t("settings.import")
+              </div>
+              {selectedFile && !isImporting && (
+                <div className="mt-2 w-full text-left">
+                  <p className="text-xs font-mono text-white/80 truncate">
+                    📄 {selectedFileName}
+                  </p>
+                </div>
               )}
             </Button>
-            {selectedFile ? (
-              <Button type="button" variant="ghost" onClick={onClear}>
-                <XCircle className="mr-2 h-4 w-4" />
-                {t("common.clear")}
-              </Button>
-            ) : null}
+            {selectedFile && (
+              <button
+                type="button"
+                onClick={onClear}
+                className="absolute -top-2 -right-2 h-6 w-6 rounded-full bg-red-500 hover:bg-red-600 text-white flex items-center justify-center shadow-lg transition-colors z-10"
+                aria-label="Clear selection"
+              >
+                <XCircle className="h-4 w-4" />
+              </button>
+            )}
           </div>
 
-          {selectedFile ? (
-            <p className="truncate rounded-md bg-muted/40 px-3 py-2 text-xs font-mono text-muted-foreground">
-              {selectedFileName}
-            </p>
-          ) : (
-            <p className="text-xs text-muted-foreground">
-              {t("settings.noFileSelected")}
-            </p>
-          )}
+          {/* Export Button */}
+          <div>
+            <Button
+              type="button"
+              className="w-full h-full py-3 px-4 bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white items-center"
+              onClick={onExport}
+            >
+              <Save className="mr-2 h-4 w-4" />
+              {t("settings.exportConfig")}
+            </Button>
+          </div>
         </div>
 
         <ImportStatusMessage
@@ -134,15 +141,19 @@ function ImportStatusMessage({
   }
 
   const baseClass =
-    "flex items-start gap-2 rounded-md border px-3 py-2 text-xs leading-relaxed";
+    "flex items-start gap-3 rounded-xl border p-4 text-sm leading-relaxed backdrop-blur-sm";
 
   if (status === "importing") {
     return (
-      <div className={`${baseClass} border-border-default bg-muted/40`}>
-        <Loader2 className="mt-0.5 h-4 w-4 animate-spin text-muted-foreground" />
+      <div
+        className={`${baseClass} border-blue-500/30 bg-blue-500/10 text-blue-600 dark:text-blue-400`}
+      >
+        <Loader2 className="mt-0.5 h-5 w-5 flex-shrink-0 animate-spin" />
         <div>
-          <p className="font-medium">{t("settings.importing")}</p>
-          <p className="text-muted-foreground">{t("common.loading")}</p>
+          <p className="font-semibold">{t("settings.importing")}</p>
+          <p className="text-blue-600/80 dark:text-blue-400/80">
+            {t("common.loading")}
+          </p>
         </div>
       </div>
     );
@@ -151,17 +162,19 @@ function ImportStatusMessage({
   if (status === "success") {
     return (
       <div
-        className={`${baseClass} border-green-200 bg-green-100/70 text-green-700`}
+        className={`${baseClass} border-green-500/30 bg-green-500/10 text-green-700 dark:text-green-400`}
       >
-        <CheckCircle2 className="mt-0.5 h-4 w-4" />
-        <div className="space-y-1">
-          <p className="font-medium">{t("settings.importSuccess")}</p>
+        <CheckCircle2 className="mt-0.5 h-5 w-5 flex-shrink-0" />
+        <div className="space-y-1.5">
+          <p className="font-semibold">{t("settings.importSuccess")}</p>
           {backupId ? (
-            <p className="text-xs">
+            <p className="text-xs text-green-600/80 dark:text-green-400/80">
               {t("settings.backupId")}: {backupId}
             </p>
           ) : null}
-          <p>{t("settings.autoReload")}</p>
+          <p className="text-green-600/80 dark:text-green-400/80">
+            {t("settings.autoReload")}
+          </p>
         </div>
       </div>
     );
@@ -170,12 +183,14 @@ function ImportStatusMessage({
   if (status === "partial-success") {
     return (
       <div
-        className={`${baseClass} border-yellow-200 bg-yellow-100/70 text-yellow-700`}
+        className={`${baseClass} border-yellow-500/30 bg-yellow-500/10 text-yellow-700 dark:text-yellow-400`}
       >
-        <AlertCircle className="mt-0.5 h-4 w-4" />
-        <div className="space-y-1">
-          <p className="font-medium">{t("settings.importPartialSuccess")}</p>
-          <p>{t("settings.importPartialHint")}</p>
+        <AlertCircle className="mt-0.5 h-5 w-5 flex-shrink-0" />
+        <div className="space-y-1.5">
+          <p className="font-semibold">{t("settings.importPartialSuccess")}</p>
+          <p className="text-yellow-600/80 dark:text-yellow-400/80">
+            {t("settings.importPartialHint")}
+          </p>
         </div>
       </div>
     );
@@ -184,11 +199,13 @@ function ImportStatusMessage({
   const message = errorMessage || t("settings.importFailed");
 
   return (
-    <div className={`${baseClass} border-red-200 bg-red-100/70 text-red-600`}>
-      <AlertCircle className="mt-0.5 h-4 w-4" />
-      <div className="space-y-1">
-        <p className="font-medium">{t("settings.importFailed")}</p>
-        <p>{message}</p>
+    <div
+      className={`${baseClass} border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400`}
+    >
+      <AlertCircle className="mt-0.5 h-5 w-5 flex-shrink-0" />
+      <div className="space-y-1.5">
+        <p className="font-semibold">{t("settings.importFailed")}</p>
+        <p className="text-red-600/80 dark:text-red-400/80">{message}</p>
       </div>
     </div>
   );

src/components/settings/SettingsDialog.tsx

@@ -1,295 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Loader2, Save } from "lucide-react";
-import { toast } from "sonner";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Button } from "@/components/ui/button";
-import { settingsApi } from "@/lib/api";
-import { LanguageSettings } from "@/components/settings/LanguageSettings";
-import { ThemeSettings } from "@/components/settings/ThemeSettings";
-import { WindowSettings } from "@/components/settings/WindowSettings";
-import { DirectorySettings } from "@/components/settings/DirectorySettings";
-import { ImportExportSection } from "@/components/settings/ImportExportSection";
-import { AboutSection } from "@/components/settings/AboutSection";
-import { useSettings } from "@/hooks/useSettings";
-import { useImportExport } from "@/hooks/useImportExport";
-import { useTranslation } from "react-i18next";
-
-interface SettingsDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onImportSuccess?: () => void | Promise<void>;
-}
-
-export function SettingsDialog({
-  open,
-  onOpenChange,
-  onImportSuccess,
-}: SettingsDialogProps) {
-  const { t } = useTranslation();
-  const {
-    settings,
-    isLoading,
-    isSaving,
-    isPortable,
-    appConfigDir,
-    resolvedDirs,
-    updateSettings,
-    updateDirectory,
-    updateAppConfigDir,
-    browseDirectory,
-    browseAppConfigDir,
-    resetDirectory,
-    resetAppConfigDir,
-    saveSettings,
-    resetSettings,
-    requiresRestart,
-    acknowledgeRestart,
-  } = useSettings();
-
-  const {
-    selectedFile,
-    status: importStatus,
-    errorMessage,
-    backupId,
-    isImporting,
-    selectImportFile,
-    importConfig,
-    exportConfig,
-    clearSelection,
-    resetStatus,
-  } = useImportExport({ onImportSuccess });
-
-  const [activeTab, setActiveTab] = useState<string>("general");
-  const [showRestartPrompt, setShowRestartPrompt] = useState(false);
-
-  useEffect(() => {
-    if (open) {
-      setActiveTab("general");
-      resetStatus();
-    }
-  }, [open, resetStatus]);
-
-  useEffect(() => {
-    if (requiresRestart) {
-      setShowRestartPrompt(true);
-    }
-  }, [requiresRestart]);
-
-  const closeDialog = useCallback(() => {
-    // 取消/直接关闭：恢复到初始设置（包括语言回滚）
-    resetSettings();
-    acknowledgeRestart();
-    clearSelection();
-    resetStatus();
-    onOpenChange(false);
-  }, [
-    acknowledgeRestart,
-    clearSelection,
-    onOpenChange,
-    resetSettings,
-    resetStatus,
-  ]);
-
-  const closeAfterSave = useCallback(() => {
-    // 保存成功后关闭：不再重置语言，避免需要“保存两次”才生效
-    acknowledgeRestart();
-    clearSelection();
-    resetStatus();
-    onOpenChange(false);
-  }, [acknowledgeRestart, clearSelection, onOpenChange, resetStatus]);
-
-  const handleDialogChange = useCallback(
-    (nextOpen: boolean) => {
-      if (!nextOpen) {
-        closeDialog();
-      } else {
-        onOpenChange(true);
-      }
-    },
-    [closeDialog, onOpenChange],
-  );
-
-  const handleCancel = useCallback(() => {
-    closeDialog();
-  }, [closeDialog]);
-
-  const handleSave = useCallback(async () => {
-    try {
-      const result = await saveSettings();
-      if (!result) return;
-      if (result.requiresRestart) {
-        setShowRestartPrompt(true);
-        return;
-      }
-      closeAfterSave();
-    } catch (error) {
-      console.error("[SettingsDialog] Failed to save settings", error);
-    }
-  }, [closeDialog, saveSettings]);
-
-  const handleRestartLater = useCallback(() => {
-    setShowRestartPrompt(false);
-    closeAfterSave();
-  }, [closeAfterSave]);
-
-  const handleRestartNow = useCallback(async () => {
-    setShowRestartPrompt(false);
-    if (import.meta.env.DEV) {
-      toast.success(t("settings.devModeRestartHint"));
-      closeAfterSave();
-      return;
-    }
-
-    try {
-      await settingsApi.restart();
-    } catch (error) {
-      console.error("[SettingsDialog] Failed to restart app", error);
-      toast.error(t("settings.restartFailed"));
-    } finally {
-      closeAfterSave();
-    }
-  }, [closeAfterSave, t]);
-
-  const isBusy = useMemo(() => isLoading && !settings, [isLoading, settings]);
-
-  return (
-    <Dialog open={open} onOpenChange={handleDialogChange}>
-      <DialogContent className="max-w-3xl max-h-[90vh] flex flex-col">
-        <DialogHeader>
-          <DialogTitle>{t("settings.title")}</DialogTitle>
-        </DialogHeader>
-
-        {isBusy ? (
-          <div className="flex min-h-[320px] items-center justify-center">
-            <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-          </div>
-        ) : (
-          <div className="flex-1 overflow-y-auto px-6 py-4">
-            <Tabs
-              value={activeTab}
-              onValueChange={setActiveTab}
-              className="flex flex-col h-full"
-            >
-              <TabsList className="grid w-full grid-cols-3">
-                <TabsTrigger value="general">
-                  {t("settings.tabGeneral")}
-                </TabsTrigger>
-                <TabsTrigger value="advanced">
-                  {t("settings.tabAdvanced")}
-                </TabsTrigger>
-                <TabsTrigger value="about">{t("common.about")}</TabsTrigger>
-              </TabsList>
-
-              <TabsContent
-                value="general"
-                className="space-y-6 mt-6 min-h-[400px]"
-              >
-                {settings ? (
-                  <>
-                    <LanguageSettings
-                      value={settings.language}
-                      onChange={(lang) => updateSettings({ language: lang })}
-                    />
-                    <ThemeSettings />
-                    <WindowSettings
-                      settings={settings}
-                      onChange={updateSettings}
-                    />
-                  </>
-                ) : null}
-              </TabsContent>
-
-              <TabsContent
-                value="advanced"
-                className="space-y-6 mt-6 min-h-[400px]"
-              >
-                {settings ? (
-                  <>
-                    <DirectorySettings
-                      appConfigDir={appConfigDir}
-                      resolvedDirs={resolvedDirs}
-                      onAppConfigChange={updateAppConfigDir}
-                      onBrowseAppConfig={browseAppConfigDir}
-                      onResetAppConfig={resetAppConfigDir}
-                      claudeDir={settings.claudeConfigDir}
-                      codexDir={settings.codexConfigDir}
-                      geminiDir={settings.geminiConfigDir}
-                      onDirectoryChange={updateDirectory}
-                      onBrowseDirectory={browseDirectory}
-                      onResetDirectory={resetDirectory}
-                    />
-                    <ImportExportSection
-                      status={importStatus}
-                      selectedFile={selectedFile}
-                      errorMessage={errorMessage}
-                      backupId={backupId}
-                      isImporting={isImporting}
-                      onSelectFile={selectImportFile}
-                      onImport={importConfig}
-                      onExport={exportConfig}
-                      onClear={clearSelection}
-                    />
-                  </>
-                ) : null}
-              </TabsContent>
-
-              <TabsContent value="about" className="mt-6 min-h-[400px]">
-                <AboutSection isPortable={isPortable} />
-              </TabsContent>
-            </Tabs>
-          </div>
-        )}
-
-        <DialogFooter>
-          <Button variant="outline" onClick={handleCancel}>
-            {t("common.cancel")}
-          </Button>
-          <Button onClick={handleSave} disabled={isSaving || isBusy}>
-            {isSaving ? (
-              <span className="inline-flex items-center gap-2">
-                <Loader2 className="h-4 w-4 animate-spin" />
-                {t("settings.saving")}
-              </span>
-            ) : (
-              <>
-                <Save className="mr-2 h-4 w-4" />
-                {t("common.save")}
-              </>
-            )}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-
-      <Dialog
-        open={showRestartPrompt}
-        onOpenChange={(open) => !open && handleRestartLater()}
-      >
-        <DialogContent zIndex="alert" className="max-w-md">
-          <DialogHeader>
-            <DialogTitle>{t("settings.restartRequired")}</DialogTitle>
-          </DialogHeader>
-          <div className="px-6">
-            <p className="text-sm text-muted-foreground">
-              {t("settings.restartRequiredMessage")}
-            </p>
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={handleRestartLater}>
-              {t("settings.restartLater")}
-            </Button>
-            <Button onClick={handleRestartNow}>
-              {t("settings.restartNow")}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </Dialog>
-  );
-}

src/components/settings/SettingsPage.tsx

@@ -0,0 +1,284 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Loader2, Save } from "lucide-react";
+import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { settingsApi } from "@/lib/api";
+import { LanguageSettings } from "@/components/settings/LanguageSettings";
+import { ThemeSettings } from "@/components/settings/ThemeSettings";
+import { WindowSettings } from "@/components/settings/WindowSettings";
+import { DirectorySettings } from "@/components/settings/DirectorySettings";
+import { ImportExportSection } from "@/components/settings/ImportExportSection";
+import { AboutSection } from "@/components/settings/AboutSection";
+import { useSettings } from "@/hooks/useSettings";
+import { useImportExport } from "@/hooks/useImportExport";
+import { useTranslation } from "react-i18next";
+import type { SettingsFormState } from "@/hooks/useSettings";
+
+interface SettingsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onImportSuccess?: () => void | Promise<void>;
+}
+
+export function SettingsPage({
+  open,
+  onOpenChange,
+  onImportSuccess,
+}: SettingsDialogProps) {
+  const { t } = useTranslation();
+  const {
+    settings,
+    isLoading,
+    isSaving,
+    isPortable,
+    appConfigDir,
+    resolvedDirs,
+    updateSettings,
+    updateDirectory,
+    updateAppConfigDir,
+    browseDirectory,
+    browseAppConfigDir,
+    resetDirectory,
+    resetAppConfigDir,
+    saveSettings,
+    autoSaveSettings,
+    requiresRestart,
+    acknowledgeRestart,
+  } = useSettings();
+
+  const {
+    selectedFile,
+    status: importStatus,
+    errorMessage,
+    backupId,
+    isImporting,
+    selectImportFile,
+    importConfig,
+    exportConfig,
+    clearSelection,
+    resetStatus,
+  } = useImportExport({ onImportSuccess });
+
+  const [activeTab, setActiveTab] = useState<string>("general");
+  const [showRestartPrompt, setShowRestartPrompt] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      setActiveTab("general");
+      resetStatus();
+    }
+  }, [open, resetStatus]);
+
+  useEffect(() => {
+    if (requiresRestart) {
+      setShowRestartPrompt(true);
+    }
+  }, [requiresRestart]);
+
+  const closeAfterSave = useCallback(() => {
+    // 保存成功后关闭：不再重置语言，避免需要“保存两次”才生效
+    acknowledgeRestart();
+    clearSelection();
+    resetStatus();
+    onOpenChange(false);
+  }, [acknowledgeRestart, clearSelection, onOpenChange, resetStatus]);
+
+  const handleSave = useCallback(async () => {
+    try {
+      const result = await saveSettings(undefined, { silent: false });
+      if (!result) return;
+      if (result.requiresRestart) {
+        setShowRestartPrompt(true);
+        return;
+      }
+      closeAfterSave();
+    } catch (error) {
+      console.error("[SettingsPage] Failed to save settings", error);
+    }
+  }, [closeAfterSave, saveSettings]);
+
+  const handleRestartLater = useCallback(() => {
+    setShowRestartPrompt(false);
+    closeAfterSave();
+  }, [closeAfterSave]);
+
+  const handleRestartNow = useCallback(async () => {
+    setShowRestartPrompt(false);
+    if (import.meta.env.DEV) {
+      toast.success(t("settings.devModeRestartHint"));
+      closeAfterSave();
+      return;
+    }
+
+    try {
+      await settingsApi.restart();
+    } catch (error) {
+      console.error("[SettingsPage] Failed to restart app", error);
+      toast.error(t("settings.restartFailed"));
+    } finally {
+      closeAfterSave();
+    }
+  }, [closeAfterSave, t]);
+
+  // 通用设置即时保存（无需手动点击）
+  // 使用 autoSaveSettings 避免误触发系统 API（开机自启、Claude 插件等）
+  const handleAutoSave = useCallback(
+    async (updates: Partial<SettingsFormState>) => {
+      if (!settings) return;
+      updateSettings(updates);
+      try {
+        await autoSaveSettings(updates);
+      } catch (error) {
+        console.error("[SettingsPage] Failed to autosave settings", error);
+        toast.error(
+          t("settings.saveFailedGeneric", {
+            defaultValue: "保存失败，请重试",
+          }),
+        );
+      }
+    },
+    [autoSaveSettings, settings, t, updateSettings],
+  );
+
+  const isBusy = useMemo(() => isLoading && !settings, [isLoading, settings]);
+
+  return (
+    <div className="mx-auto max-w-[56rem] flex flex-col h-[calc(100vh-8rem)] px-6">
+      {isBusy ? (
+        <div className="flex flex-1 items-center justify-center">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      ) : (
+        <Tabs
+          value={activeTab}
+          onValueChange={setActiveTab}
+          className="flex flex-col h-full"
+        >
+          <TabsList className="grid w-full grid-cols-3 mb-6 glass rounded-xl">
+            <TabsTrigger value="general">
+              {t("settings.tabGeneral")}
+            </TabsTrigger>
+            <TabsTrigger value="advanced">
+              {t("settings.tabAdvanced")}
+            </TabsTrigger>
+            <TabsTrigger value="about">{t("common.about")}</TabsTrigger>
+          </TabsList>
+
+          <div className="flex-1 overflow-y-auto pr-2">
+            <TabsContent value="general" className="space-y-6 mt-0">
+              {settings ? (
+                <>
+                  <LanguageSettings
+                    value={settings.language}
+                    onChange={(lang) => handleAutoSave({ language: lang })}
+                  />
+                  <ThemeSettings />
+                  <WindowSettings
+                    settings={settings}
+                    onChange={handleAutoSave}
+                  />
+                </>
+              ) : null}
+            </TabsContent>
+
+            <TabsContent value="advanced" className="space-y-6 mt-0 pb-6">
+              {settings ? (
+                <>
+                  <DirectorySettings
+                    appConfigDir={appConfigDir}
+                    resolvedDirs={resolvedDirs}
+                    onAppConfigChange={updateAppConfigDir}
+                    onBrowseAppConfig={browseAppConfigDir}
+                    onResetAppConfig={resetAppConfigDir}
+                    claudeDir={settings.claudeConfigDir}
+                    codexDir={settings.codexConfigDir}
+                    geminiDir={settings.geminiConfigDir}
+                    onDirectoryChange={updateDirectory}
+                    onBrowseDirectory={browseDirectory}
+                    onResetDirectory={resetDirectory}
+                  />
+                  <ImportExportSection
+                    status={importStatus}
+                    selectedFile={selectedFile}
+                    errorMessage={errorMessage}
+                    backupId={backupId}
+                    isImporting={isImporting}
+                    onSelectFile={selectImportFile}
+                    onImport={importConfig}
+                    onExport={exportConfig}
+                    onClear={clearSelection}
+                  />
+                  <div className="pt-6 border-t border-gray-200 dark:border-white/10">
+                    <Button
+                      onClick={handleSave}
+                      className="w-full"
+                      disabled={isSaving}
+                    >
+                      {isSaving ? (
+                        <span className="inline-flex items-center gap-2">
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                          {t("settings.saving")}
+                        </span>
+                      ) : (
+                        <>
+                          <Save className="mr-2 h-4 w-4" />
+                          {t("common.save")}
+                        </>
+                      )}
+                    </Button>
+                  </div>
+                </>
+              ) : null}
+            </TabsContent>
+
+            <TabsContent value="about" className="mt-0">
+              <AboutSection isPortable={isPortable} />
+            </TabsContent>
+          </div>
+        </Tabs>
+      )}
+
+      <Dialog
+        open={showRestartPrompt}
+        onOpenChange={(open) => !open && handleRestartLater()}
+      >
+        <DialogContent
+          zIndex="alert"
+          className="max-w-md glass border-white/10"
+        >
+          <DialogHeader>
+            <DialogTitle>{t("settings.restartRequired")}</DialogTitle>
+          </DialogHeader>
+          <div className="px-6">
+            <p className="text-sm text-muted-foreground">
+              {t("settings.restartRequiredMessage")}
+            </p>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="ghost"
+              onClick={handleRestartLater}
+              className="hover:bg-white/5"
+            >
+              {t("settings.restartLater")}
+            </Button>
+            <Button
+              onClick={handleRestartNow}
+              className="bg-primary hover:bg-primary/90"
+            >
+              {t("settings.restartNow")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

src/components/settings/WindowSettings.tsx

@@ -19,6 +19,13 @@ export function WindowSettings({ settings, onChange }: WindowSettingsProps) {
         </p>
       </header>
 
+      <ToggleRow
+        title={t("settings.launchOnStartup")}
+        description={t("settings.launchOnStartupDescription")}
+        checked={!!settings.launchOnStartup}
+        onCheckedChange={(value) => onChange({ launchOnStartup: value })}
+      />
+
       <ToggleRow
         title={t("settings.minimizeToTray")}
         description={t("settings.minimizeToTrayDescription")}

src/components/skills/RepoManagerPanel.tsx

@@ -0,0 +1,219 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Trash2, ExternalLink, Plus } from "lucide-react";
+import { settingsApi } from "@/lib/api";
+import { FullScreenPanel } from "@/components/common/FullScreenPanel";
+import type { Skill, SkillRepo } from "@/lib/api/skills";
+
+interface RepoManagerPanelProps {
+  repos: SkillRepo[];
+  skills: Skill[];
+  onAdd: (repo: SkillRepo) => Promise<void>;
+  onRemove: (owner: string, name: string) => Promise<void>;
+  onClose: () => void;
+}
+
+export function RepoManagerPanel({
+  repos,
+  skills,
+  onAdd,
+  onRemove,
+  onClose,
+}: RepoManagerPanelProps) {
+  const { t } = useTranslation();
+  const [repoUrl, setRepoUrl] = useState("");
+  const [branch, setBranch] = useState("");
+  const [skillsPath, setSkillsPath] = useState("");
+  const [error, setError] = useState("");
+
+  const getSkillCount = (repo: SkillRepo) =>
+    skills.filter(
+      (skill) =>
+        skill.repoOwner === repo.owner &&
+        skill.repoName === repo.name &&
+        (skill.repoBranch || "main") === (repo.branch || "main"),
+    ).length;
+
+  const parseRepoUrl = (
+    url: string,
+  ): { owner: string; name: string } | null => {
+    let cleaned = url.trim();
+    cleaned = cleaned.replace(/^https?:\/\/github\.com\//, "");
+    cleaned = cleaned.replace(/\.git$/, "");
+
+    const parts = cleaned.split("/");
+    if (parts.length === 2 && parts[0] && parts[1]) {
+      return { owner: parts[0], name: parts[1] };
+    }
+
+    return null;
+  };
+
+  const handleAdd = async () => {
+    setError("");
+
+    const parsed = parseRepoUrl(repoUrl);
+    if (!parsed) {
+      setError(t("skills.repo.invalidUrl"));
+      return;
+    }
+
+    try {
+      await onAdd({
+        owner: parsed.owner,
+        name: parsed.name,
+        branch: branch || "main",
+        enabled: true,
+        skillsPath: skillsPath.trim() || undefined,
+      });
+
+      setRepoUrl("");
+      setBranch("");
+      setSkillsPath("");
+    } catch (e) {
+      setError(e instanceof Error ? e.message : t("skills.repo.addFailed"));
+    }
+  };
+
+  const handleOpenRepo = async (owner: string, name: string) => {
+    try {
+      await settingsApi.openExternal(`https://github.com/${owner}/${name}`);
+    } catch (error) {
+      console.error("Failed to open URL:", error);
+    }
+  };
+
+  return (
+    <FullScreenPanel
+      isOpen={true}
+      title={t("skills.repo.title")}
+      onClose={onClose}
+    >
+      {/* 添加仓库表单 */}
+      <div className="space-y-4 glass rounded-xl p-6 border border-white/10">
+        <h3 className="text-base font-semibold text-foreground">
+          添加技能仓库
+        </h3>
+        <div className="space-y-4">
+          <div>
+            <Label htmlFor="repo-url" className="text-foreground">
+              {t("skills.repo.url")}
+            </Label>
+            <Input
+              id="repo-url"
+              placeholder={t("skills.repo.urlPlaceholder")}
+              value={repoUrl}
+              onChange={(e) => setRepoUrl(e.target.value)}
+              className="mt-2"
+            />
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="branch" className="text-foreground">
+                {t("skills.repo.branch")}
+              </Label>
+              <Input
+                id="branch"
+                placeholder={t("skills.repo.branchPlaceholder")}
+                value={branch}
+                onChange={(e) => setBranch(e.target.value)}
+                className="mt-2"
+              />
+            </div>
+            <div>
+              <Label htmlFor="skills-path" className="text-foreground">
+                {t("skills.repo.path")}
+              </Label>
+              <Input
+                id="skills-path"
+                placeholder={t("skills.repo.pathPlaceholder")}
+                value={skillsPath}
+                onChange={(e) => setSkillsPath(e.target.value)}
+                className="mt-2"
+              />
+            </div>
+          </div>
+          {error && (
+            <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+          )}
+          <Button
+            onClick={handleAdd}
+            className="bg-primary text-primary-foreground hover:bg-primary/90"
+            type="button"
+          >
+            <Plus className="h-4 w-4 mr-2" />
+            {t("skills.repo.add")}
+          </Button>
+        </div>
+      </div>
+
+      {/* 仓库列表 */}
+      <div className="space-y-4">
+        <h3 className="text-base font-semibold text-foreground">
+          {t("skills.repo.list")}
+        </h3>
+        {repos.length === 0 ? (
+          <div className="text-center py-12 glass rounded-xl border border-white/10">
+            <p className="text-sm text-muted-foreground">
+              {t("skills.repo.empty")}
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {repos.map((repo) => (
+              <div
+                key={`${repo.owner}/${repo.name}`}
+                className="flex items-center justify-between rounded-xl border border-white/10 bg-gray-900/40 px-4 py-3"
+              >
+                <div>
+                  <div className="text-sm font-medium text-foreground">
+                    {repo.owner}/{repo.name}
+                  </div>
+                  <div className="mt-1 text-xs text-muted-foreground">
+                    {t("skills.repo.branch")}: {repo.branch || "main"}
+                    {repo.skillsPath && (
+                      <>
+                        <span className="mx-2">•</span>
+                        {t("skills.repo.path")}: {repo.skillsPath}
+                      </>
+                    )}
+                    <span className="ml-3 inline-flex items-center rounded-full border border-border-default px-2 py-0.5 text-[11px]">
+                      {t("skills.repo.skillCount", {
+                        count: getSkillCount(repo),
+                      })}
+                    </span>
+                  </div>
+                </div>
+                <div className="flex gap-2">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    type="button"
+                    onClick={() => handleOpenRepo(repo.owner, repo.name)}
+                    title={t("common.view", { defaultValue: "查看" })}
+                    className="hover:bg-black/5 dark:hover:bg-white/5"
+                  >
+                    <ExternalLink className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    type="button"
+                    onClick={() => onRemove(repo.owner, repo.name)}
+                    title={t("common.delete")}
+                    className="hover:text-red-500 hover:bg-red-100 dark:hover:text-red-400 dark:hover:bg-red-500/10"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </FullScreenPanel>
+  );
+}

src/components/skills/SkillCard.tsx

@@ -57,7 +57,8 @@ export function SkillCard({ skill, onInstall, onUninstall }: SkillCardProps) {
     skill.directory.trim().toLowerCase() !== skill.name.trim().toLowerCase();
 
   return (
-    <Card className="flex flex-col h-full border-border-default bg-card transition-[border-color,box-shadow] duration-200 hover:border-border-hover hover:shadow-md">
+    <Card className="glass flex flex-col h-full border border-white/10 bg-gray-900/40 transition-all duration-300 hover:bg-gray-900/60 hover:border-white/20 hover:shadow-lg group relative overflow-hidden">
+      <div className="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
       <CardHeader className="pb-3">
         <div className="flex items-start justify-between gap-2">
           <div className="flex-1 min-w-0">
@@ -95,7 +96,7 @@ export function SkillCard({ skill, onInstall, onUninstall }: SkillCardProps) {
           {skill.description || t("skills.noDescription")}
         </p>
       </CardContent>
-      <CardFooter className="flex gap-2 pt-3 border-t border-border-default">
+      <CardFooter className="flex gap-2 pt-3 border-t border-white/5 relative z-10">
         {skill.readmeUrl && (
           <Button
             variant="ghost"

src/components/skills/SkillsPage.tsx

@@ -1,10 +1,10 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, forwardRef, useImperativeHandle } from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
-import { RefreshCw, Settings } from "lucide-react";
+import { RefreshCw } from "lucide-react";
 import { toast } from "sonner";
 import { SkillCard } from "./SkillCard";
-import { RepoManager } from "./RepoManager";
+import { RepoManagerPanel } from "./RepoManagerPanel";
 import { skillsApi, type Skill, type SkillRepo } from "@/lib/api/skills";
 import { formatSkillError } from "@/lib/errors/skillErrorParser";
 
@@ -12,94 +12,104 @@ interface SkillsPageProps {
   onClose?: () => void;
 }
 
-export function SkillsPage({ onClose: _onClose }: SkillsPageProps = {}) {
-  const { t } = useTranslation();
-  const [skills, setSkills] = useState<Skill[]>([]);
-  const [repos, setRepos] = useState<SkillRepo[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [repoManagerOpen, setRepoManagerOpen] = useState(false);
+export interface SkillsPageHandle {
+  refresh: () => void;
+  openRepoManager: () => void;
+}
 
-  const loadSkills = async (afterLoad?: (data: Skill[]) => void) => {
-    try {
-      setLoading(true);
-      const data = await skillsApi.getAll();
-      setSkills(data);
-      if (afterLoad) {
-        afterLoad(data);
+export const SkillsPage = forwardRef<SkillsPageHandle, SkillsPageProps>(
+  ({ onClose: _onClose }, ref) => {
+    const { t } = useTranslation();
+    const [skills, setSkills] = useState<Skill[]>([]);
+    const [repos, setRepos] = useState<SkillRepo[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [repoManagerOpen, setRepoManagerOpen] = useState(false);
+
+    const loadSkills = async (afterLoad?: (data: Skill[]) => void) => {
+      try {
+        setLoading(true);
+        const data = await skillsApi.getAll();
+        setSkills(data);
+        if (afterLoad) {
+          afterLoad(data);
+        }
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : String(error);
+
+        // 传入 "skills.loadFailed" 作为标题
+        const { title, description } = formatSkillError(
+          errorMessage,
+          t,
+          "skills.loadFailed",
+        );
+
+        toast.error(title, {
+          description,
+          duration: 8000,
+        });
+
+        console.error("Load skills failed:", error);
+      } finally {
+        setLoading(false);
       }
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : String(error);
+    };
 
-      // 传入 "skills.loadFailed" 作为标题
-      const { title, description } = formatSkillError(
-        errorMessage,
-        t,
-        "skills.loadFailed",
-      );
+    const loadRepos = async () => {
+      try {
+        const data = await skillsApi.getRepos();
+        setRepos(data);
+      } catch (error) {
+        console.error("Failed to load repos:", error);
+      }
+    };
 
-      toast.error(title, {
-        description,
-        duration: 8000,
-      });
+    useEffect(() => {
+      Promise.all([loadSkills(), loadRepos()]);
+    }, []);
 
-      console.error("Load skills failed:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
+    useImperativeHandle(ref, () => ({
+      refresh: () => loadSkills(),
+      openRepoManager: () => setRepoManagerOpen(true),
+    }));
 
-  const loadRepos = async () => {
-    try {
-      const data = await skillsApi.getRepos();
-      setRepos(data);
-    } catch (error) {
-      console.error("Failed to load repos:", error);
-    }
-  };
+    const handleInstall = async (directory: string) => {
+      try {
+        await skillsApi.install(directory);
+        toast.success(t("skills.installSuccess", { name: directory }));
+        await loadSkills();
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : String(error);
 
-  useEffect(() => {
-    Promise.all([loadSkills(), loadRepos()]);
-  }, []);
+        // 使用错误解析器格式化错误，传入 "skills.installFailed"
+        const { title, description } = formatSkillError(
+          errorMessage,
+          t,
+          "skills.installFailed",
+        );
 
-  const handleInstall = async (directory: string) => {
-    try {
-      await skillsApi.install(directory);
-      toast.success(t("skills.installSuccess", { name: directory }));
-      await loadSkills();
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : String(error);
+        toast.error(title, {
+          description,
+          duration: 10000, // 延长显示时间让用户看清
+        });
 
-      // 使用错误解析器格式化错误，传入 "skills.installFailed"
-      const { title, description } = formatSkillError(
-        errorMessage,
-        t,
-        "skills.installFailed",
-      );
+        console.error("Install skill failed:", {
+          directory,
+          error,
+          message: errorMessage,
+        });
+      }
+    };
 
-      toast.error(title, {
-        description,
-        duration: 10000, // 延长显示时间让用户看清
-      });
-
-      // 打印到控制台方便调试
-      console.error("Install skill failed:", {
-        directory,
-        error,
-        message: errorMessage,
-      });
-    }
-  };
-
-  const handleUninstall = async (directory: string) => {
-    try {
-      await skillsApi.uninstall(directory);
-      toast.success(t("skills.uninstallSuccess", { name: directory }));
-      await loadSkills();
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : String(error);
+    const handleUninstall = async (directory: string) => {
+      try {
+        await skillsApi.uninstall(directory);
+        toast.success(t("skills.uninstallSuccess", { name: directory }));
+        await loadSkills();
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : String(error);
 
       // 使用错误解析器格式化错误，传入 "skills.uninstallFailed"
       const { title, description } = formatSkillError(
@@ -108,132 +118,105 @@ export function SkillsPage({ onClose: _onClose }: SkillsPageProps = {}) {
         "skills.uninstallFailed",
       );
 
-      toast.error(title, {
-        description,
-        duration: 10000,
-      });
+        toast.error(title, {
+          description,
+          duration: 10000,
+        });
 
-      console.error("Uninstall skill failed:", {
-        directory,
-        error,
-        message: errorMessage,
-      });
-    }
-  };
+        console.error("Uninstall skill failed:", {
+          directory,
+          error,
+          message: errorMessage,
+        });
+      }
+    };
 
-  const handleAddRepo = async (repo: SkillRepo) => {
-    await skillsApi.addRepo(repo);
+    const handleAddRepo = async (repo: SkillRepo) => {
+      await skillsApi.addRepo(repo);
 
-    let repoSkillCount = 0;
-    await Promise.all([
-      loadRepos(),
-      loadSkills((data) => {
-        repoSkillCount = data.filter(
-          (skill) =>
-            skill.repoOwner === repo.owner &&
-            skill.repoName === repo.name &&
-            (skill.repoBranch || "main") === (repo.branch || "main"),
-        ).length;
-      }),
-    ]);
+      let repoSkillCount = 0;
+      await Promise.all([
+        loadRepos(),
+        loadSkills((data) => {
+          repoSkillCount = data.filter(
+            (skill) =>
+              skill.repoOwner === repo.owner &&
+              skill.repoName === repo.name &&
+              (skill.repoBranch || "main") === (repo.branch || "main"),
+          ).length;
+        }),
+      ]);
 
-    toast.success(
-      t("skills.repo.addSuccess", {
-        owner: repo.owner,
-        name: repo.name,
-        count: repoSkillCount,
-      }),
-    );
-  };
+      toast.success(
+        t("skills.repo.addSuccess", {
+          owner: repo.owner,
+          name: repo.name,
+          count: repoSkillCount,
+        }),
+      );
+    };
 
-  const handleRemoveRepo = async (owner: string, name: string) => {
-    await skillsApi.removeRepo(owner, name);
-    toast.success(t("skills.repo.removeSuccess", { owner, name }));
-    await Promise.all([loadRepos(), loadSkills()]);
-  };
+    const handleRemoveRepo = async (owner: string, name: string) => {
+      await skillsApi.removeRepo(owner, name);
+      toast.success(t("skills.repo.removeSuccess", { owner, name }));
+      await Promise.all([loadRepos(), loadSkills()]);
+    };
 
-  return (
-    <div className="flex flex-col h-full min-h-0 bg-background">
-      {/* 顶部操作栏（固定区域） */}
-      <div className="flex-shrink-0 border-b border-border-default bg-muted/20 px-6 py-4">
-        <div className="flex items-center justify-between pr-8">
-          <h1 className="text-lg font-semibold leading-tight tracking-tight text-gray-900 dark:text-gray-100">
-            {t("skills.title")}
-          </h1>
-          <div className="flex gap-2">
-            <Button
-              variant="mcp"
-              size="sm"
-              onClick={() => loadSkills()}
-              disabled={loading}
-            >
-              <RefreshCw
-                className={`h-4 w-4 mr-2 ${loading ? "animate-spin" : ""}`}
-              />
-              {loading ? t("skills.refreshing") : t("skills.refresh")}
-            </Button>
-            <Button
-              variant="mcp"
-              size="sm"
-              onClick={() => setRepoManagerOpen(true)}
-            >
-              <Settings className="h-4 w-4 mr-2" />
-              {t("skills.repoManager")}
-            </Button>
+    return (
+      <div className="flex flex-col h-full min-h-0 bg-background/50">
+        {/* 顶部操作栏（固定区域）已移除，由 App.tsx 接管 */}
+
+        {/* 技能网格（可滚动详情区域） */}
+        <div className="flex-1 min-h-0 overflow-y-auto animate-fade-in">
+          <div className="mx-auto max-w-[56rem] px-6 py-4">
+            {loading ? (
+              <div className="flex items-center justify-center h-64">
+                <RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
+              </div>
+            ) : skills.length === 0 ? (
+              <div className="flex flex-col items-center justify-center h-64 text-center">
+                <p className="text-lg font-medium text-gray-900 dark:text-gray-100">
+                  {t("skills.empty")}
+                </p>
+                <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+                  {t("skills.emptyDescription")}
+                </p>
+                <Button
+                  variant="link"
+                  onClick={() => setRepoManagerOpen(true)}
+                  className="mt-3 text-sm font-normal"
+                >
+                  {t("skills.addRepo")}
+                </Button>
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {skills.map((skill) => (
+                  <SkillCard
+                    key={skill.key}
+                    skill={skill}
+                    onInstall={handleInstall}
+                    onUninstall={handleUninstall}
+                  />
+                ))}
+              </div>
+            )}
           </div>
         </div>
 
-        {/* 描述 */}
-        <p className="mt-1.5 text-sm text-gray-500 dark:text-gray-400">
-          {t("skills.description")}
-        </p>
-      </div>
-
-      {/* 技能网格（可滚动详情区域） */}
-      <div className="flex-1 min-h-0 overflow-y-auto px-6 py-6 bg-muted/10">
-        {loading ? (
-          <div className="flex items-center justify-center h-64">
-            <RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
-          </div>
-        ) : skills.length === 0 ? (
-          <div className="flex flex-col items-center justify-center h-64 text-center">
-            <p className="text-lg font-medium text-gray-900 dark:text-gray-100">
-              {t("skills.empty")}
-            </p>
-            <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
-              {t("skills.emptyDescription")}
-            </p>
-            <Button
-              variant="link"
-              onClick={() => setRepoManagerOpen(true)}
-              className="mt-3 text-sm font-normal"
-            >
-              {t("skills.addRepo")}
-            </Button>
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {skills.map((skill) => (
-              <SkillCard
-                key={skill.key}
-                skill={skill}
-                onInstall={handleInstall}
-                onUninstall={handleUninstall}
-              />
-            ))}
-          </div>
+        {/* 仓库管理面板 */}
+        {repoManagerOpen && (
+          <RepoManagerPanel
+            repos={repos}
+            skills={skills}
+            onAdd={handleAddRepo}
+            onRemove={handleRemoveRepo}
+            onClose={() => setRepoManagerOpen(false)}
+          />
         )}
       </div>
+    );
+  },
+);
 
-      {/* 仓库管理对话框 */}
-      <RepoManager
-        open={repoManagerOpen}
-        onOpenChange={setRepoManagerOpen}
-        repos={repos}
-        skills={skills}
-        onAdd={handleAddRepo}
-        onRemove={handleRemoveRepo}
-      />
-    </div>
-  );
-}
+SkillsPage.displayName = "SkillsPage";

src/components/ui/dialog.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 const Dialog = DialogPrimitive.Root;
@@ -14,13 +13,14 @@ const DialogClose = DialogPrimitive.Close;
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
-    zIndex?: "base" | "nested" | "alert";
+    zIndex?: "base" | "nested" | "alert" | "top";
   }
 >(({ className, zIndex = "base", ...props }, ref) => {
   const zIndexMap = {
     base: "z-40",
     nested: "z-50",
     alert: "z-[60]",
+    top: "z-[110]",
   };
 
   return (
@@ -40,40 +40,54 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
-    zIndex?: "base" | "nested" | "alert";
+    zIndex?: "base" | "nested" | "alert" | "top";
+    variant?: "default" | "fullscreen";
+    overlayClassName?: string;
   }
->(({ className, children, zIndex = "base", ...props }, ref) => {
-  const zIndexMap = {
-    base: "z-40",
-    nested: "z-50",
-    alert: "z-[60]",
-  };
+>(
+  (
+    {
+      className,
+      children,
+      zIndex = "base",
+      variant = "default",
+      overlayClassName,
+      ...props
+    },
+    ref,
+  ) => {
+    const zIndexMap = {
+      base: "z-40",
+      nested: "z-50",
+      alert: "z-[60]",
+      top: "z-[110]",
+    };
 
-  return (
-    <DialogPortal>
-      <DialogOverlay zIndex={zIndex} />
-      <DialogPrimitive.Content
-        ref={ref}
-        className={cn(
-          "fixed left-1/2 top-1/2 flex flex-col w-full max-w-lg max-h-[90vh] translate-x-[-50%] translate-y-[-50%] border border-border-default bg-white dark:bg-gray-900 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-          zIndexMap[zIndex],
-          className,
-        )}
-        onInteractOutside={(e) => {
-          // 防止点击遮罩层关闭对话框
-          e.preventDefault();
-        }}
-        {...props}
-      >
-        {children}
-        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
-          <X className="h-4 w-4" />
-          <span className="sr-only">关闭</span>
-        </DialogPrimitive.Close>
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  );
-});
+    const variantClass = {
+      default:
+        "fixed left-1/2 top-1/2 flex flex-col w-full max-w-lg max-h-[90vh] translate-x-[-50%] translate-y-[-50%] border border-border-default bg-background text-foreground shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+      fullscreen:
+        "fixed inset-0 flex flex-col w-screen h-screen translate-x-0 translate-y-0 bg-background text-foreground p-0 sm:rounded-none shadow-none",
+    }[variant];
+
+    return (
+      <DialogPortal>
+        <DialogOverlay zIndex={zIndex} className={overlayClassName} />
+        <DialogPrimitive.Content
+          ref={ref}
+          className={cn(variantClass, zIndexMap[zIndex], className)}
+          onInteractOutside={(e) => {
+            // 防止点击遮罩层关闭对话框
+            e.preventDefault();
+          }}
+          {...props}
+        >
+          {children}
+        </DialogPrimitive.Content>
+      </DialogPortal>
+    );
+  },
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({