diff --git a/qy-lty-admin/components/ai-model/credential-slot-dialog.tsx b/qy-lty-admin/components/ai-model/credential-slot-dialog.tsx new file mode 100644 index 0000000..964b72f --- /dev/null +++ b/qy-lty-admin/components/ai-model/credential-slot-dialog.tsx @@ -0,0 +1,191 @@ +"use client" + +import { useEffect, useState } from "react" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" +import * as z from "zod" +import { toast } from "sonner" +import { Loader2 } from "lucide-react" + +import { Button } from "@/components/ui/button" +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog" +import { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form" +import { Input } from "@/components/ui/input" +import { + getCredentialSlot, + updateCredentialSlot, + type CredentialSlot, +} from "@/lib/api/credential-slot" +import { handleApiError } from "@/lib/api/error-handler" + +// ───── Zod schema ────────────────────────────────────────────────────── +// access_token 强制输入(CONTEXT D-提交逻辑 锁定): +// - 后端 PUT 是全字段覆写语义;前端无法识别脱敏掩码格式 +// - 「留空保留旧值」需后端配合识别掩码格式,已记入候选下一周期 milestone +// - 本 phase 退化为「每次保存都要重输 access_token」—— UX 略差但语义正确 +const formSchema = z.object({ + appId: z.string().min(1, { message: "App ID 不能为空" }), + accessToken: z.string().min(1, { message: "请输入 Access Token" }), +}) + +type FormValues = z.infer + +interface CredentialSlotDialogProps { + open: boolean + onOpenChange: (open: boolean) => void +} + +export function CredentialSlotDialog({ open, onOpenChange }: CredentialSlotDialogProps) { + const [slot, setSlot] = useState(null) + const [isLoading, setIsLoading] = useState(false) + const [isSubmitting, setIsSubmitting] = useState(false) + + const form = useForm({ + resolver: zodResolver(formSchema), + defaultValues: { appId: "", accessToken: "" }, + }) + + // open=true 时拉数据 + reset 表单(accessToken 永远默认空串,绝不回填脱敏掩码) + useEffect(() => { + if (!open) return + let cancelled = false + setIsLoading(true) + getCredentialSlot() + .then((data) => { + if (cancelled) return + setSlot(data) + form.reset({ appId: data.appId, accessToken: "" }) + }) + .catch((e) => { + if (cancelled) return + toast.error("加载失败", { description: handleApiError(e) }) + }) + .finally(() => { + if (!cancelled) setIsLoading(false) + }) + return () => { + cancelled = true + } + }, [open, form]) + + const handleOpenChange = (next: boolean) => { + onOpenChange(next) + // 关闭时清表单 + 清 slot,避免下次打开残留上次输入 + if (!next) { + form.reset({ appId: "", accessToken: "" }) + setSlot(null) + } + } + + const handleSubmit = async (values: FormValues) => { + setIsSubmitting(true) + try { + await updateCredentialSlot({ + appId: values.appId, + accessToken: values.accessToken, + }) + toast.success("凭据槽位已更新", { description: "配置已生效" }) + handleOpenChange(false) + } catch (e) { + // 失败时不关闭对话框、不清空表单值(CONTEXT D-错误处理 锁定) + toast.error("保存失败", { description: handleApiError(e) }) + } finally { + setIsSubmitting(false) + } + } + + return ( + + + + 通用凭据槽位 + + 管理 APP ID 与 Access Token;提交将全字段覆写后端记录。 + + + {isLoading ? ( +
+ +
+ ) : ( +
+ + ( + + APP ID + + + + + + )} + /> + ( + + Access Token + + + + + 每次保存都需要重新输入 Access Token(不会显示原值,避免回写脱敏掩码) + + + + )} + /> + {slot && ( +

+ 最后更新:{new Date(slot.updatedAt).toLocaleString("zh-CN")} +

+ )} + + + + + + + )} +
+
+ ) +}