feat: 流水线编辑器 Task 任务库增加搜索(按任务名/描述/参数过滤)
This commit is contained in:
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>
|
||||||
|
|||||||
Reference in new issue
Block a user