feat: 流水线编辑器 Task 任务库增加搜索(按任务名/描述/参数过滤)

This commit is contained in:
Logan.Li committed 2026-10-27 08:43:27 +08:00
1 parent 26341c3e8a
commit 88d8fc282e
1 file changed
+20 -3
@@ -67,6 +67,7 @@ function FlowEditorInner({ pipelineId, saveSignal = 0, runSignal = 0 }: FlowEdit
const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]); const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
const [catalogOpen, setCatalogOpen] = useState(true); const [catalogOpen, setCatalogOpen] = useState(true);
const [selectedCategory, setSelectedCategory] = useState('all'); const [selectedCategory, setSelectedCategory] = useState('all');
const [taskSearch, setTaskSearch] = useState('');
const [selectedNode, setSelectedNode] = useState<Node<TektonNodeData> | null>(null); const [selectedNode, setSelectedNode] = useState<Node<TektonNodeData> | null>(null);
const [isRunning, setIsRunning] = useState(false); const [isRunning, setIsRunning] = useState(false);
const [logOpen, setLogOpen] = useState(false); const [logOpen, setLogOpen] = useState(false);
@@ -255,9 +256,16 @@ function FlowEditorInner({ pipelineId, saveSignal = 0, runSignal = 0 }: FlowEdit
setNodes((nds) => [...nds, newNode]); setNodes((nds) => [...nds, newNode]);
}, [nodes.length, setNodes]); }, [nodes.length, setNodes]);
const filteredTasks = selectedCategory === 'all' const filteredTasks = catalogTasks.filter((t) => {
? catalogTasks if (selectedCategory !== 'all' && t.category !== selectedCategory) return false;
: catalogTasks.filter((t) => t.category === selectedCategory); if (!taskSearch.trim()) return true;
const q = taskSearch.trim().toLowerCase();
return (
t.name.toLowerCase().includes(q) ||
t.description.toLowerCase().includes(q) ||
t.params.some((p) => p.name.toLowerCase().includes(q))
);
});
return ( return (
<div className="flex h-full" style={{ background: 'var(--canvas-bg)' }}> <div className="flex h-full" style={{ background: 'var(--canvas-bg)' }}>
@@ -269,6 +277,15 @@ function FlowEditorInner({ pipelineId, saveSignal = 0, runSignal = 0 }: FlowEdit
<span className="text-[12px] font-semibold" style={{ color: 'var(--text-primary)' }}>Task 任务库</span> <span className="text-[12px] font-semibold" style={{ color: 'var(--text-primary)' }}>Task 任务库</span>
<span className="text-[10px] px-1.5 py-[1px] rounded font-medium" style={{ background: 'var(--panel-bg-secondary)', color: 'var(--text-tertiary)' }}>Tekton</span> <span className="text-[10px] px-1.5 py-[1px] rounded font-medium" style={{ background: 'var(--panel-bg-secondary)', color: 'var(--text-tertiary)' }}>Tekton</span>
</div> </div>
<div className="px-2 pt-2">
<input
value={taskSearch}
onChange={(e) => setTaskSearch(e.target.value)}
placeholder="搜索任务/参数…"
className="w-full px-2 py-[5px] text-[11px] rounded-md border outline-none"
style={{ background: 'var(--panel-bg-secondary)', borderColor: 'var(--border-color-light)', color: 'var(--text-primary)' }}
/>
</div>
<div className="p-2 border-b" style={{ borderColor: 'var(--border-color)' }}> <div className="p-2 border-b" style={{ borderColor: 'var(--border-color)' }}>
<div className="flex items-center gap-1 flex-wrap"> <div className="flex items-center gap-1 flex-wrap">
<button onClick={() => setSelectedCategory('all')} className="text-[10px] px-2 py-[3px] rounded font-medium transition-colors" style={{ background: selectedCategory === 'all' ? 'var(--accent-blue)' : 'var(--panel-bg-secondary)', color: selectedCategory === 'all' ? '#fff' : 'var(--text-tertiary)' }}>全部</button> <button onClick={() => setSelectedCategory('all')} className="text-[10px] px-2 py-[3px] rounded font-medium transition-colors" style={{ background: selectedCategory === 'all' ? 'var(--accent-blue)' : 'var(--panel-bg-secondary)', color: selectedCategory === 'all' ? '#fff' : 'var(--text-tertiary)' }}>全部</button>