refine: enhance settings dialog UI with improved visual feedback

Improve the visual hierarchy and interaction feedback in the settings dialog:

1. Tab navigation enhancement:
   - Active tabs now use blue background (blue-500/600) with white text
   - Add shadow effect to active tabs for better depth perception
   - Inactive tabs show hover effects (opacity + background)
   - Consistent with app's primary blue theme color

2. Switch component visual improvement:
   - Checked state: blue background (blue-500/600) for clear indication
   - Unchecked state: gray background (gray-300/700) for neutral appearance
   - White thumb color for better contrast on both states
   - Enhanced focus ring (ring-2 + offset-2) for accessibility

3. Layout spacing refinement:
   - Change content area padding from pb-4 to py-4 for symmetrical spacing
   - Ensure consistent 4-unit spacing between all dialog sections

4. Clarify plugin integration description:
   - Update description to accurately reflect that provider switching
     in this app will sync with VS Code Claude Code extension
   - Previous wording was ambiguous about the synchronization behavior

Files changed:
- src/components/ui/tabs.tsx: Enhanced tab visual states
- src/components/ui/switch.tsx: Improved switch contrast
- src/components/settings/SettingsDialog.tsx: Fixed spacing
- src/i18n/locales/{zh,en}.json: Updated plugin description
This commit is contained in:
Jason
2025-10-17 23:40:07 +08:00
parent 8e82ded158
commit e6b66f425a
5 changed files with 6 additions and 6 deletions

View File

@@ -106,7 +106,7 @@
"minimizeToTray": "Minimize to tray on close",
"minimizeToTrayDescription": "When checked, clicking the close button will hide to system tray, otherwise the app will exit directly.",
"enableClaudePluginIntegration": "Apply to Claude Code extension",
"enableClaudePluginIntegrationDescription": "When enabled, you can use third-party providers in the VS Code Claude Code extension",
"enableClaudePluginIntegrationDescription": "When enabled, the VS Code Claude Code extension provider will switch with this app",
"configFileLocation": "Configuration File Location",
"openFolder": "Open Folder",
"configDirectoryOverride": "Configuration Directory Override (Advanced)",

View File

@@ -106,7 +106,7 @@
"minimizeToTray": "关闭时最小化到托盘",
"minimizeToTrayDescription": "勾选后点击关闭按钮会隐藏到系统托盘,取消则直接退出应用。",
"enableClaudePluginIntegration": "应用到 Claude Code 插件",
"enableClaudePluginIntegrationDescription": "开启后可以在 Vscode Claude Code 插件里使用第三方供应商",
"enableClaudePluginIntegrationDescription": "开启后 Vscode Claude Code 插件的供应商将随本软件切换",
"configFileLocation": "配置文件位置",
"openFolder": "打开文件夹",
"configDirectoryOverride": "配置目录覆盖(高级)",