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.

src/components/JsonEditor.tsx

@@ -84,14 +84,35 @@ const JsonEditor: React.FC<JsonEditorProps> = ({
 
     // 使用 baseTheme 定义基础样式，优先级低于 oneDark，但可以正确响应主题
     const baseTheme = EditorView.baseTheme({
-      "&light .cm-editor, &dark .cm-editor": {
+      ".cm-editor": {
         border: "1px solid hsl(var(--border))",
         borderRadius: "0.5rem",
+        background: "transparent",
       },
-      "&light .cm-editor.cm-focused, &dark .cm-editor.cm-focused": {
+      ".cm-editor.cm-focused": {
         outline: "none",
         borderColor: "hsl(var(--primary))",
       },
+      ".cm-scroller": {
+        background: "transparent",
+      },
+      ".cm-gutters": {
+        background: "transparent",
+        borderRight: "1px solid hsl(var(--border))",
+        color: "hsl(var(--muted-foreground))",
+      },
+      ".cm-selectionBackground, .cm-content ::selection": {
+        background: "hsl(var(--primary) / 0.18)",
+      },
+      ".cm-selectionMatch": {
+        background: "hsl(var(--primary) / 0.12)",
+      },
+      ".cm-activeLine": {
+        background: "hsl(var(--primary) / 0.08)",
+      },
+      ".cm-activeLineGutter": {
+        background: "hsl(var(--primary) / 0.08)",
+      },
     });
 
     // 使用 theme 定义尺寸和字体样式
@@ -129,11 +150,32 @@ const JsonEditor: React.FC<JsonEditorProps> = ({
           ".cm-editor": {
             border: "1px solid hsl(var(--border))",
             borderRadius: "0.5rem",
+            background: "transparent",
           },
           ".cm-editor.cm-focused": {
             outline: "none",
             borderColor: "hsl(var(--primary))",
           },
+          ".cm-scroller": {
+            background: "transparent",
+          },
+          ".cm-gutters": {
+            background: "transparent",
+            borderRight: "1px solid hsl(var(--border))",
+            color: "hsl(var(--muted-foreground))",
+          },
+          ".cm-selectionBackground, .cm-content ::selection": {
+            background: "hsl(var(--primary) / 0.18)",
+          },
+          ".cm-selectionMatch": {
+            background: "hsl(var(--primary) / 0.12)",
+          },
+          ".cm-activeLine": {
+            background: "hsl(var(--primary) / 0.08)",
+          },
+          ".cm-activeLineGutter": {
+            background: "hsl(var(--primary) / 0.08)",
+          },
         }),
       );
     }