cadeditfronttest/components/DataEditor.js

function DataEditor({ item, items, setItems }) {

    if (!item) {
        return React.createElement('div', { className: 'workspace-panel flex items-center justify-center h-full' },
            React.createElement('p', { className: 'text-gray-500' }, '未选择任何件号')
        );
    }
    
    const isRoot = item.id === '__ROOT__';
    
    if (isRoot) {
        return React.createElement('div', { className: 'workspace-panel p-4 h-full' },
            React.createElement('h2', { className: 'text-lg font-semibold mb-4' }, '编辑总装图'),
            React.createElement('div', { className: 'space-y-4' },
                React.createElement('div', {},
                    React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '总装图名称'),
                    React.createElement('input', {
                        type: 'text',
                        name: 'name',
                        value: item.name,
                        onChange: (e) => setItems(prev => ({
                            ...prev,
                            ['__ROOT__']: { ...prev['__ROOT__'], name: e.target.value }
                        })),
                        className: 'form-input'
                    })
                ),
                React.createElement('p', { className: 'text-xs text-gray-500 mt-1' }, '这是项目的根节点，只可修改名称。')
            )
        );
    }

    const handleInputChange = (e) => {
        const { name, value } = e.target;
        const isNumber = ['quantity', 'weight'].includes(name);
        
        // 添加输入验证
        if (isNumber && value !== '' && (isNaN(value) || Number(value) < 0)) {
            console.warn('请输入有效的正数');
            return;
        }
        
        setItems(prevItems => ({
            ...prevItems,
            [item.id]: {
                ...prevItems[item.id],
                [name]: isNumber ? (value === '' ? 0 : Number(value)) : value
            }
        }));
    };
    
    const hasChildren = Array.isArray(item.children) && item.children.length > 0;
    const isLeafPart = !isRoot && !hasChildren;
    const isAssemblyPart = !isRoot && hasChildren;

    return React.createElement('div', { className: 'workspace-panel p-4 h-full' },
        React.createElement('h2', { className: 'text-lg font-semibold mb-1' }, `编辑: ${item.id}`),
        React.createElement('p', { className: 'text-xs text-gray-500 mb-3' }, isLeafPart ? '类型：零件' : (isAssemblyPart ? '类型：装配件（含子件号）' : '')),
        React.createElement('div', { className: 'space-y-4' },
            React.createElement('div', {},
                React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '件号 (不可修改)'),
                React.createElement('input', { type: 'text', readOnly: true, value: item.id, className: 'form-input bg-gray-100' })
            ),
            React.createElement('div', {},
                React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '名称'),
                React.createElement('input', { type: 'text', name: 'name', value: item.name, onChange: handleInputChange, className: 'form-input' })
            ),
            React.createElement('div', {},
                React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '数量'),
                React.createElement('input', { type: 'number', name: 'quantity', value: item.quantity, onChange: handleInputChange, className: 'form-input' })
            ),
            React.createElement('div', {},
                React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '重量 (kg)'),
                React.createElement('input', { 
                    type: 'number', 
                    name: 'weight', 
                    value: item.weight, 
                    onChange: handleInputChange, 
                    className: 'form-input',
                    readOnly: hasChildren, // 装配件重量由子项计算
                    title: hasChildren ? '装配件重量由子项自动汇总' : ''
                }),
                hasChildren && React.createElement('p', { className: 'text-xs text-gray-500 mt-1' }, '装配件重量由子项自动汇总，此处不可编辑。')
            ),
            
            // 添加表格需要的额外字段
            React.createElement('div', { className: 'grid grid-cols-2 gap-3' },
                React.createElement('div', {},
                    React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '中文名称'),
                    React.createElement('input', { 
                        type: 'text', 
                        name: 'chinese_name', 
                        value: item.chinese_name || '', 
                        onChange: handleInputChange, 
                        className: 'form-input',
                        placeholder: '零件中文名称'
                    })
                ),
                React.createElement('div', {},
                    React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '英文名称'),
                    React.createElement('input', { 
                        type: 'text', 
                        name: 'english_name', 
                        value: item.english_name || '', 
                        onChange: handleInputChange, 
                        className: 'form-input',
                        placeholder: 'English Name'
                    })
                )
            ),
            
            React.createElement('div', {},
                React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '规格描述'),
                React.createElement('input', { 
                    type: 'text', 
                    name: 'specification', 
                    value: item.specification || '', 
                    onChange: handleInputChange, 
                    className: 'form-input',
                    placeholder: '零件规格和技术要求'
                })
            ),
            
            React.createElement('div', { className: 'grid grid-cols-2 gap-3' },
                React.createElement('div', {},
                    React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '材料'),
                    React.createElement('input', { 
                        type: 'text', 
                        name: 'material', 
                        value: item.material || '', 
                        onChange: handleInputChange, 
                        className: 'form-input',
                        placeholder: '如: Q235'
                    })
                ),
                React.createElement('div', {},
                    React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '比例'),
                    React.createElement('input', { 
                        type: 'text', 
                        name: 'scale', 
                        value: item.scale || '1:1', 
                        onChange: handleInputChange, 
                        className: 'form-input'
                    })
                )
            ),
            
            React.createElement('div', {},
                React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '备注'),
                React.createElement('textarea', { 
                    name: 'remark', 
                    value: item.remark || '', 
                    onChange: handleInputChange, 
                    className: 'form-input resize-none',
                    rows: 2,
                    placeholder: '其他说明信息'
                })
            )
        )
    );
}