101 lines
5.7 KiB
TypeScript
101 lines
5.7 KiB
TypeScript
import { TitleIconBg } from "@/components/bs-comp/cardComponent";
|
|
import { SettingIcon } from "@/components/bs-icons/setting";
|
|
import { ToolIcon } from "@/components/bs-icons/tool";
|
|
import {
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/bs-ui/accordion";
|
|
import { Badge } from "@/components/bs-ui/badge";
|
|
import { Button } from "@/components/bs-ui/button";
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/bs-ui/tooltip";
|
|
import { useTranslation } from "react-i18next";
|
|
import gongjuIcon3 from "../../../assets/npc/gongjuIcon3.png"
|
|
import gongjuBianji from "../../../assets/npc/gongjuBianji.png"
|
|
|
|
export default function ToolItem({
|
|
type,
|
|
select,
|
|
data,
|
|
onEdit = (id) => { },
|
|
onSelect,
|
|
}) {
|
|
const { t } = useTranslation();
|
|
|
|
return <AccordionItem key={data.id} value={data.id} className="data-[state=open]:border-[1px] data-[state=open]:border-[#FFD025]/40 data-[state=open]:rounded-md">
|
|
<AccordionTrigger>
|
|
<div className="group w-full flex gap-2 text-start relative pr-4">
|
|
<TitleIconBg className="w-8 h-8 min-w-8" id={data.id} >
|
|
<img src={gongjuIcon3} alt="" />
|
|
</TitleIconBg>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="w-full text-sm font-medium leading-none flex items-center gap-2 text-[#FFFFFF]">{data.name}
|
|
{
|
|
type === 'edit' && <div
|
|
className="flex items-center justify-center w-[26px] h-[26px] bg-[#2A2A2A] group-hover:opacity-100 opacity-0 cursor-pointer"
|
|
style={{borderRadius:"50px"}}
|
|
onClick={(e) => onEdit(data.id)}
|
|
>
|
|
{/* <SettingIcon /> */}
|
|
<img src={gongjuBianji} className="w-[14px]" alt="" />
|
|
</div>
|
|
}
|
|
</div>
|
|
<p className="text-sm mt-2 text-[#666666]">{data.description}</p>
|
|
</div>
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="">
|
|
<div className="px-6 mb-4">
|
|
{data.children.map(api => (
|
|
<div key={api.name} className="relative p-4 rounded-sm border-t">
|
|
<h1 className="text-sm font-medium leading-none text-[#FFFFFF]">{api.name}</h1>
|
|
<p className="text-sm mt-2 text-[#666666]">{api.desc}</p>
|
|
{
|
|
api.api_params.length > 0 && <p className="text-sm text-muted-foreground mt-2 flex gap-2">
|
|
<TooltipProvider>
|
|
<Tooltip delayDuration={100}>
|
|
<TooltipTrigger asChild>
|
|
<span className="cursor-pointer text-[#FFD025]">{t("build.params")}</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="right" className="bg-gray-50 border shadow-md p-4 text-gray-950 max-w-[520px]">
|
|
<p className="flex gap-2 items-center"><Badge>{JSON.parse(api.extra)?.method || 'http'}</Badge><span className="text-xl">{api.name}</span></p>
|
|
<p className="text-sm mt-2 text-gray-500">{api.desc}</p>
|
|
{
|
|
api.api_params.map(param => (
|
|
<div key={param.name}>
|
|
<p className="flex gap-2 items-center mt-4 mb-2">
|
|
<span className="text-base">{param.name}</span>
|
|
<span>{param.schema.type}</span>
|
|
{param.required && <span className="text-red-500">必填</span>}
|
|
</p>
|
|
<p className="text-gray-500">{param.description}</p>
|
|
</div>
|
|
))
|
|
}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
:
|
|
{
|
|
api.api_params.map(param => (
|
|
<div>
|
|
<span className=" rounded-xl bg-[#2E2406] px-2 py-1 text-xs font-medium text-[#FFFFFF]">{param.name}</span>
|
|
{/* <span>{param.schema.type}</span> */}
|
|
</div>
|
|
))
|
|
}
|
|
</p>
|
|
}
|
|
{
|
|
select && (select.some(_ => _.id === api.id) ?
|
|
<Button size="sm" className="absolute right-4 bottom-2 h-6 bg-[#FFD025]" disabled>{t("build.added")}</Button>
|
|
: <Button size="sm" className="absolute right-4 bottom-2 h-6 bg-[#FFD025]" onClick={() => onSelect(api)}>{t("build.add")}</Button>)
|
|
}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem >
|
|
}
|