feat: refactor ProviderForm component with new subcomponents (#13)

* feat: refactor ProviderForm component with new subcomponents

- Introduced PresetSelector, ApiKeyInput, ClaudeConfigEditor, and CodexConfigEditor for improved modularity and readability.
- Simplified preset selection logic for both Claude and Codex configurations.
- Enhanced API Key input handling with dedicated components for better user experience.
- Removed redundant code and improved state management in the ProviderForm component.

* feat: add Kimi model selection to ProviderForm component

- Introduced KimiModelSelector for enhanced model configuration options.
- Implemented state management for Kimi model selection, including initialization and updates based on preset selection.
- Improved user experience by conditionally displaying the Kimi model selector based on the selected preset.
- Refactored related logic to ensure proper handling of Kimi-specific settings in the ProviderForm.

* feat: enhance API Key input and model selection in ProviderForm

- Added toggle functionality to show/hide API Key in ApiKeyInput component for improved user experience.
- Updated placeholder text in ProviderForm to provide clearer instructions based on the selected preset.
- Enhanced KimiModelSelector to display a more informative message when API Key is not provided.
- Refactored provider presets to remove hardcoded API Key values for better security practices.

* fix(kimi): optimize debounce implementation in model selector

- Fix initial state: use empty string instead of apiKey.trim()
- Refactor fetchModels to fetchModelsWithKey with explicit key parameter
- Ensure consistent behavior between auto-fetch and manual refresh
- Eliminate mental overhead from optional parameter fallback logic

* fix(api-key): remove custom masking logic, use native password input

- Remove getDisplayValue function with custom star masking
- Use native browser password input behavior for better UX consistency
- Simplify component logic while maintaining show/hide toggle functionality

* chore: format code with prettier

- Apply consistent code formatting across all TypeScript files
- Fix indentation and spacing according to project style guide

---------

Co-authored-by: Jason <farion1231@gmail.com>

src/components/ProviderForm/PresetSelector.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { Zap } from "lucide-react";
+
+interface Preset {
+  name: string;
+  isOfficial?: boolean;
+}
+
+interface PresetSelectorProps {
+  title?: string;
+  presets: Preset[];
+  selectedIndex: number | null;
+  onSelectPreset: (index: number) => void;
+  onCustomClick: () => void;
+  customLabel?: string;
+}
+
+const PresetSelector: React.FC<PresetSelectorProps> = ({
+  title = "选择配置类型",
+  presets,
+  selectedIndex,
+  onSelectPreset,
+  onCustomClick,
+  customLabel = "自定义",
+}) => {
+  const getButtonClass = (index: number, isOfficial?: boolean) => {
+    const isSelected = selectedIndex === index;
+    const baseClass =
+      "inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors";
+
+    if (isSelected) {
+      return isOfficial
+        ? `${baseClass} bg-[var(--color-warning)] text-white`
+        : `${baseClass} bg-[var(--color-primary)] text-white`;
+    }
+
+    return `${baseClass} bg-[var(--color-bg-tertiary)] text-[var(--color-text-secondary)] hover:bg-[var(--color-border)]`;
+  };
+
+  const getDescription = () => {
+    if (selectedIndex === -1) {
+      return "手动配置供应商，需要填写完整的配置信息";
+    }
+
+    if (selectedIndex !== null && selectedIndex >= 0) {
+      const preset = presets[selectedIndex];
+      return preset?.isOfficial
+        ? "Claude 官方登录，不需要填写 API Key"
+        : "使用预设配置，只需填写 API Key";
+    }
+
+    return null;
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-[var(--color-text-primary)] mb-3">
+          {title}
+        </label>
+        <div className="flex flex-wrap gap-2">
+          <button
+            type="button"
+            className={getButtonClass(-1)}
+            onClick={onCustomClick}
+          >
+            {customLabel}
+          </button>
+          {presets.map((preset, index) => (
+            <button
+              key={index}
+              type="button"
+              className={getButtonClass(index, preset.isOfficial)}
+              onClick={() => onSelectPreset(index)}
+            >
+              {preset.isOfficial && <Zap size={14} />}
+              {preset.name}
+            </button>
+          ))}
+        </div>
+      </div>
+      {getDescription() && (
+        <p className="text-sm text-[var(--color-text-secondary)]">
+          {getDescription()}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default PresetSelector;