You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { useStore } from '@xyflow/react';
|
|
import styles from '@/components/FlowEditor/node/style/baseOther.module.less';
|
|
import DynamicIcon from '@/components/DynamicIcon';
|
|
import NodeContentImage from '@/pages/flowEditor/components/nodeContentImage';
|
|
import NodeStatusIndicator, { NodeStatus } from '@/components/FlowEditor/NodeStatusIndicator';
|
|
import { useStore as useFlowStore } from '@xyflow/react';
|
|
|
|
const setIcon = () => {
|
|
return <DynamicIcon type="IconImage" style={{ fontSize: '16px', marginRight: '5px' }} />;
|
|
};
|
|
|
|
const ImageNode = ({ data, id }: { data: any; id: string }) => {
|
|
const title = data.title || '图片展示';
|
|
|
|
// 获取节点选中状态 - 适配React Flow v12 API
|
|
const isSelected = useStore((state) =>
|
|
state.nodeLookup.get(id)?.selected || false
|
|
);
|
|
|
|
// 获取节点运行状态
|
|
const nodeStatus: NodeStatus = useFlowStore((state) =>
|
|
(state.nodeLookup.get(id)?.data?.status as NodeStatus) || 'waiting'
|
|
);
|
|
|
|
// 获取运行状态可见性
|
|
const isStatusVisible = useFlowStore((state) =>
|
|
!!state.nodeLookup.get(id)?.data?.isStatusVisible
|
|
);
|
|
|
|
return (
|
|
<div className={`${styles['node-container']} ${isSelected ? styles.selected : ''}`}>
|
|
<div className={styles['node-header']} style={{ backgroundColor: '#1890ff' }}>
|
|
{setIcon()}
|
|
{title}
|
|
<NodeStatusIndicator status={nodeStatus} isVisible={isStatusVisible} />
|
|
</div>
|
|
<NodeContentImage data={data} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ImageNode; |