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
2026-07-28 16:56:16 +08:00 · 2025-11-22 19:18:35 +08:00
parent 824bf796a8
commit d38fcd63ea
137 changed files with 7383 additions and 2975 deletions
@@ -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>
-        )}
-      />
    </>
  );
 }
@@ -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>
  );
 };
@@ -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 && (
@@ -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>
    </>
  );
 }
@@ -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>
  );
 };

@@ -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>
  );
 };
@@ -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">
@@ -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 && (
@@ -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")}