first commit

frontend/src/components/ApiKeyForm.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import { Plus, Loader2 } from 'lucide-react';
+import { apiKeyService } from '../services/api';
+import { cn } from '../utils/cn';
+
+interface ApiKeyFormProps {
+  onSuccess: () => void;
+}
+
+export function ApiKeyForm({ onSuccess }: ApiKeyFormProps) {
+  const [formData, setFormData] = useState({
+    name: '',
+    key: '',
+    description: '',
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      await apiKeyService.createApiKey(formData);
+      setFormData({ name: '', key: '', description: '' });
+      onSuccess();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '未知错误');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium mb-2">
+          API Key 名称 *
+        </label>
+        <input
+          type="text"
+          required
+          value={formData.name}
+          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          placeholder="例如: 生产环境 API"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium mb-2">
+          API Key *
+        </label>
+        <input
+          type="password"
+          required
+          value={formData.key}
+          onChange={(e) => setFormData({ ...formData, key: e.target.value })}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm"
+          placeholder="sk-... 或sf-xxxxx"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium mb-2">
+          描述 (可选)
+        </label>
+        <textarea
+          value={formData.description}
+          onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          rows={2}
+          placeholder="用于管理此API Key的描述信息"
+        />
+      </div>
+
+      {error && (
+        <div className="px-3 py-2 bg-red-100 border border-red-300 rounded-md text-red-700 text-sm">
+          {error}
+        </div>
+      )}
+
+      <button
+        type="submit"
+        disabled={isSubmitting}
+        className={cn(
+          "w-full flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+        )}
+      >
+        {isSubmitting ? (
+          <>
+            <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+            添加中...
+          </>
+        ) : (
+          <>
+            <Plus className="w-4 h-4 mr-2" />
+            添加 API Key
+          </>
+        )}
+      </button>
+    </form>
+  );
+}