fix: 标注成功后自动生成标签,无需点击确认按钮
This commit is contained in:
parent
83737c7b9c
commit
ff5e78c5a9
@ -160,15 +160,12 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
|
||||
// 当前节点是否处于拾取模式
|
||||
const isThisNodePicking = isPickerMode && pickerTargetNodeId === node.id;
|
||||
|
||||
// 已标注的物品列表(本地状态)
|
||||
const [pickedMarkers, setPickedMarkers] = useState<PickedMarker[]>([]);
|
||||
// 当前正在识别的点击位置
|
||||
const [currentClick, setCurrentClick] = useState<{ x: number; y: number } | null>(null);
|
||||
|
||||
// 退出拾取模式时清空标记
|
||||
// 退出拾取模式时清空状态
|
||||
useEffect(() => {
|
||||
if (!isThisNodePicking) {
|
||||
setPickedMarkers([]);
|
||||
setCurrentClick(null);
|
||||
}
|
||||
}, [isThisNodePicking]);
|
||||
@ -222,15 +219,10 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
|
||||
|
||||
addPendingPickedObject(picked);
|
||||
|
||||
setPickedMarkers(prev => [...prev, {
|
||||
clickX,
|
||||
clickY,
|
||||
objectName: result.object.name,
|
||||
index: prev.length + 1,
|
||||
}]);
|
||||
|
||||
toast.success(`已添加: ${result.object.name}`);
|
||||
// 标注成功后自动关闭拾取模式,直接生成标签
|
||||
setPickerMode(false);
|
||||
setCurrentClick(null);
|
||||
toast.success(`已添加: ${result.object.name}`);
|
||||
} else {
|
||||
toast.error(result.error || '未能识别物品');
|
||||
setCurrentClick(null);
|
||||
@ -242,15 +234,7 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
|
||||
} finally {
|
||||
setPickerLoading(false);
|
||||
}
|
||||
}, [isThisNodePicking, isPickerLoading, data.src, node.id, setPickerLoading, addPendingPickedObject]);
|
||||
|
||||
// 🆕 完成标注
|
||||
const handleFinishPicking = useCallback(() => {
|
||||
setPickerMode(false);
|
||||
if (pickedMarkers.length > 0) {
|
||||
toast.success(`已完成 ${pickedMarkers.length} 个物品标注`);
|
||||
}
|
||||
}, [setPickerMode, pickedMarkers.length]);
|
||||
}, [isThisNodePicking, isPickerLoading, data.src, node.id, setPickerLoading, addPendingPickedObject, setPickerMode]);
|
||||
|
||||
// 🆕 取消标注
|
||||
const handleCancelPicking = useCallback(() => {
|
||||
@ -637,31 +621,6 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 🆕 拾取模式:显示已标注的物品标记 */}
|
||||
{isThisNodePicking && pickedMarkers.map((marker) => (
|
||||
<div
|
||||
key={`marker-${marker.index}`}
|
||||
className="absolute pointer-events-none"
|
||||
style={{
|
||||
left: `${marker.clickX * 100}%`,
|
||||
top: `${marker.clickY * 100}%`,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
{/* 序号标记 */}
|
||||
<div className="relative flex items-center justify-center">
|
||||
<div className="absolute w-8 h-8 rounded-full bg-blue-500/30 animate-ping" />
|
||||
<div className="w-6 h-6 rounded-full bg-blue-500 text-white text-xs font-bold flex items-center justify-center shadow-lg border-2 border-white">
|
||||
{marker.index}
|
||||
</div>
|
||||
</div>
|
||||
{/* 物品名称 */}
|
||||
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-1 bg-blue-500 text-white text-xs px-2 py-0.5 rounded shadow-lg whitespace-nowrap">
|
||||
{marker.objectName}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* 🆕 拾取模式:当前点击位置(正在识别) */}
|
||||
{isThisNodePicking && currentClick && (
|
||||
<div
|
||||
@ -681,29 +640,12 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
|
||||
<div className="absolute bottom-2 left-1/2 -translate-x-1/2 flex items-center gap-2 bg-white rounded-full px-3 py-1.5 shadow-lg">
|
||||
<Crosshair className="h-4 w-4 text-orange-500" />
|
||||
<span className="text-xs font-medium">
|
||||
{isPickerLoading
|
||||
? '正在识别...'
|
||||
: pickedMarkers.length > 0
|
||||
? `已标注 ${pickedMarkers.length} 个`
|
||||
: '点击标注物品'}
|
||||
{isPickerLoading ? '正在识别...' : '点击标注物品'}
|
||||
</span>
|
||||
{pickedMarkers.length > 0 && (
|
||||
<Button
|
||||
size="sm"
|
||||
className="h-6 rounded-full bg-black hover:bg-black/90 text-white px-3 text-xs"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleFinishPicking();
|
||||
}}
|
||||
>
|
||||
<Check className="h-3 w-3 mr-1" />
|
||||
完成
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 rounded-full"
|
||||
className="h-6 w-6 rounded-full hover:bg-gray-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleCancelPicking();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user