fix: 标注成功后自动生成标签,无需点击确认按钮

This commit is contained in:
Your Name 2026-02-02 13:24:05 +08:00
parent 83737c7b9c
commit ff5e78c5a9

View File

@ -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();