68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Eye, EyeOff } from "lucide-react";
|
|
|
|
interface ApiKeyInputProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
placeholder?: string;
|
|
disabled?: boolean;
|
|
required?: boolean;
|
|
label?: string;
|
|
id?: string;
|
|
}
|
|
|
|
const ApiKeyInput: React.FC<ApiKeyInputProps> = ({
|
|
value,
|
|
onChange,
|
|
placeholder = "请输入API Key",
|
|
disabled = false,
|
|
required = false,
|
|
label = "API Key",
|
|
id = "apiKey",
|
|
}) => {
|
|
const [showKey, setShowKey] = useState(false);
|
|
|
|
const toggleShowKey = () => {
|
|
setShowKey(!showKey);
|
|
};
|
|
|
|
const inputClass = `w-full px-3 py-2 pr-10 border rounded-lg text-sm transition-colors ${
|
|
disabled
|
|
? "bg-gray-100 border-gray-200 text-gray-400 cursor-not-allowed"
|
|
: "border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
|
|
}`;
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<label htmlFor={id} className="block text-sm font-medium text-gray-900">
|
|
{label} {required && "*"}
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
type={showKey ? "text" : "password"}
|
|
id={id}
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
placeholder={placeholder}
|
|
disabled={disabled}
|
|
required={required}
|
|
autoComplete="off"
|
|
className={inputClass}
|
|
/>
|
|
{!disabled && value && (
|
|
<button
|
|
type="button"
|
|
onClick={toggleShowKey}
|
|
className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-900 transition-colors"
|
|
aria-label={showKey ? "隐藏API Key" : "显示API Key"}
|
|
>
|
|
{showKey ? <EyeOff size={16} /> : <Eye size={16} />}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ApiKeyInput;
|