zk/bishengWeb
Public Access
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

高级编排分组

Browse Source
This commit is contained in:
zhangkai
2024-06-24 15:28:24 +08:00
parent 1c07d4b9df
commit 68c9acc85b
18 changed files with 1353 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/pages/DiffFlowPage/components/Component.tsx Normal file
View File

@@ -0,0 +1,122 @@
import { DelIcon } from "@/components/bs-icons/del";
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/bs-ui/select";
import { useMemo } from "react";
import ComponentParameter from "./ComponentParameter";
import del from "../../../assets/npc/del.png";
export default function Component({ compId, options, disables, version, className, onChangeVersion, onClose }) {
// 保留当前compId和上游组件
const nodes = useMemo(() => {
if (!version?.data) return [];
const showNodes = {}
const edges = version.data.edges
const deep = (_compId) => {
edges.forEach(edge => {
if (edge.target === _compId) {
showNodes[edge.source] = true
showNodes[edge.target] = true
deep(edge.source)
}
})
}
deep(compId)
return version.data.nodes.filter(node => showNodes[node.id])
}, [version, compId])
// empty
if (!version) return <div className="bg-[#000000] rounded-md p-2 shadow-sm">
<div className="group flex justify-center items-center pb-2 border-b relative">
<Select onValueChange={onChangeVersion}>
<SelectTrigger className="w-[120px] h-6">
<SelectValue placeholder="选择版本" />
</SelectTrigger>
<SelectContent>
{
options.map(vs => (
<SelectItem key={vs.id} value={vs.id} textValue={'vs.name'} disabled={disables.includes(vs.id)}>
<div className="flex justify-between w-64">
<span className="w-36 overflow-hidden text-ellipsis whitespace-nowrap">{vs.name}</span>
<span className="text-xs text-muted-foreground">{vs.update_time.replace('T', ' ').substring(0, 16)}</span>
</div>
</SelectItem>
))
}
</SelectContent>
</Select>
{/* <DelIcon
className="absolute right-0 -top-1 cursor-pointer text-muted-foreground hidden group-hover:block"
onClick={onClose}
/> */}
<img src={del} alt="" className="absolute w-[14px] right-[2px] top-[2px] cursor-pointer text-muted-foreground hidden group-hover:block" onClick={onClose}/>
</div>
<div className="min-h-[100px]"></div>
</div>
// 版本信息
return <div className={'bg-[#000000] rounded-md p-2 shadow-sm ' + className}>
<div className="group flex justify-between items-center pb-2 border-b">
<Select value={version.id} onValueChange={onChangeVersion}>
<SelectTrigger className="w-[120px] h-6">
<SelectValue placeholder="选择版本" />
</SelectTrigger>
<SelectContent>
{
options.map(vs => (
<SelectItem key={vs.id} value={vs.id} textValue={'vs.name'} disabled={disables.includes(vs.id)}>
<div className="flex justify-between w-64">
<span className="w-36 overflow-hidden text-ellipsis whitespace-nowrap text-left">{vs.name}</span>
<span className="text-xs text-muted-foreground">{vs.update_time.replace('T', ' ').substring(0, 16)}</span>
</div>
</SelectItem>
))
}
</SelectContent>
</Select>
<span className="text-sm text-[#999999] relative pr-8">
{version.update_time.replace('T', ' ')}
{/* <DelIcon
className="absolute right-0 -top-1 cursor-pointer text-muted-foreground hidden group-hover:block"
onClick={onClose}
/> */}
<img src={del} alt="" className="absolute w-[14px] right-[2px] top-[2px] cursor-pointer text-muted-foreground hidden group-hover:block" onClick={onClose}/>
</span>
</div>
<div className="max-h-52 overflow-y-auto pb-10">
<div className="flex gap-1 px-2 py-1 text-sm text-muted-foreground">
<span className="min-w-12 w-28 text-[#999999]">组件</span>
<span className="min-w-12 w-28 text-[#999999]">参数名</span>
<span className="flex-1 text-[#999999]">参数值</span>
</div>
{
nodes.map(node => (
<div className="flex odd:bg-[#2B2B2B] bg-[#1A1A1A] gap-1 mt-1 px-2 py-1 text-sm rounded-sm">
<span className="min-w-12 w-28 break-all self-center text-[#FFFFFF]">{node.data.type}</span>
<div className="flex-1 min-w-0 pointer-events-none opacity-60">
{
<ComponentParameter
disabled
flow={version}
node={node}
template={node.data.node.template}
>
{
(key, name, formItem) => (
<div key={key} className="flex mb-1">
<span className="min-w-12 w-28 break-all text-[#999999]">{name}</span>
<div className="flex-1 min-w-0 text-[#999999]">{formItem}</div>
</div>
)
}
</ComponentParameter>
}
</div>
</div>
))
}
</div>
</div>
};