81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
import { KeyRound } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { toast } from "sonner";
|
|
import { Button } from "~/components/ui/button.tsx";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "~/components/ui/dialog.tsx";
|
|
import { Input } from "~/components/ui/input.tsx";
|
|
import { clearAuth, getToken, setToken } from "~/lib/api.ts";
|
|
|
|
/** 设置本机使用的 API Key(存 localStorage,首版单管理员) */
|
|
export function ApiKeyDialog() {
|
|
const [open, setOpen] = useState(false);
|
|
const [value, setValue] = useState("");
|
|
const hasKey = typeof window !== "undefined" && !!getToken();
|
|
|
|
return (
|
|
<Dialog
|
|
open={open}
|
|
onOpenChange={(o) => {
|
|
setOpen(o);
|
|
if (o) setValue("");
|
|
}}
|
|
>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
size="icon-sm"
|
|
aria-label="设置 API Key"
|
|
title={hasKey ? "已设置 API Key" : "设置 API Key"}
|
|
>
|
|
<KeyRound className="h-4 w-4" />
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>API Key</DialogTitle>
|
|
<DialogDescription>控制台用它访问服务端接口，只保存在本浏览器。</DialogDescription>
|
|
</DialogHeader>
|
|
<Input
|
|
type="password"
|
|
autoComplete="off"
|
|
placeholder={hasKey ? "输入新值替换" : "粘贴 API Key"}
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
/>
|
|
<DialogFooter>
|
|
{hasKey ? (
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => {
|
|
clearAuth();
|
|
setOpen(false);
|
|
toast.success("已清除 API Key");
|
|
}}
|
|
>
|
|
清除
|
|
</Button>
|
|
) : null}
|
|
<Button
|
|
disabled={!value.trim()}
|
|
onClick={() => {
|
|
setToken(value.trim());
|
|
setOpen(false);
|
|
toast.success("已保存 API Key");
|
|
}}
|
|
>
|
|
保存
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|