/* ============================================================ 汇能科技仓库 ERP v3 — 通用 React 组件 Modal / StockBadge / EmptyState / Toast / Shell(含移动端导航+用户信息) / ScannerModal(摄像头条码扫描) / RoleBadge / StatusBadge / PageLoader ============================================================ */ const { useState, useEffect, useRef, useMemo, useCallback } = React; /* ----- 图标（内联 SVG）----- */ const Icon = { Dashboard: () => (), Box: () => (), Warehouse: () => (), Down: () => (), Up: () => (), Stock: () => (), Report: () => (), Plus: () => (), Edit: () => (), Trash: () => (), Close: () => (), Check: () => (), Search: () => (), Download: () => (), Warn: () => (), Camera: () => (), Settings: () => (), Logout: () => (), Users: () => (), Clipboard: () => (), Truck: () => (), }; /* ----- 模态框 ----- */ function Modal({ title, onClose, children, footer, size, className }) { useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose && onClose(); }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [onClose]); return (

{ if (e.target === e.currentTarget) onClose && onClose(); }}>

{title}

{children}

{footer &&

{footer}

}

); } /* ----- 库存徽章 ----- */ function StockBadge({ value, threshold = 10 }) { let cls = 'stock-ok'; let label = '正常'; if (value <= 0) { cls = 'stock-zero'; label = '缺货'; } else if (value < threshold) { cls = 'stock-low'; label = '低库存'; } else if (value > threshold * 5) { cls = 'stock-high'; label = '充足'; } return {fmtNum(value)}; } /* ----- 角色 / 单据状态徽标 ----- */ function RoleBadge({ role }) { return {role === 'admin' ? '管理员' : '仓管员'}; } function StatusBadge({ status }) { return {status === 'pending' ? '待审核' : '已确认'}; } function SourceBadge({ source }) { if (source !== 'scan') return null; return 📷 扫码录入; } /* ----- 空状态 ----- */ function EmptyState({ icon = '📦', title = '暂无数据', hint = '' }) { return (

{icon}

{title}

{hint &&

{hint}

}

); } /* ----- 整页加载态 ----- */ function PageLoader({ text = '加载中…' }) { return

{text}

; } /* ----- Toast 提示 ----- */ function Toast({ message, type = 'info', onClose }) { useEffect(() => { const t = setTimeout(() => onClose && onClose(), 2600); return () => clearTimeout(t); }, [onClose]); return (

{type === 'success' && } {message}

); } /* ----- 侧边栏 + 顶栏壳（含移动端底部导航 + 用户信息/退出登录）----- */ function Shell({ active, title, subtitle, actions, children, onScanClick }) { const user = window.Api ? window.Api.getUser() : null; const isAdmin = user && user.role === 'admin'; const [showUserSheet, setShowUserSheet] = useState(false); const navGroups = [ { group: '总览', items: [{ key: 'dashboard', name: '仪表盘', href: 'index.html', icon: }] }, { group: '基础数据', items: [ { key: 'products', name: '货品档案', href: 'products.html', icon: }, { key: 'warehouses', name: '仓库管理', href: 'warehouses.html', icon: }, { key: 'suppliers', name: '供应商管理', href: 'suppliers.html', icon: }, ]}, { group: '业务单据', items: [ { key: 'inbound', name: '入库管理', href: 'inbound.html', icon: }, { key: 'outbound', name: '出库管理', href: 'outbound.html', icon: }, { key: 'stocktake', name: '库存盘点', href: 'stocktake.html', icon: }, ]}, { group: '查询与报表', items: [ { key: 'inventory', name: '实时库存', href: 'inventory.html', icon: }, { key: 'reports', name: '收发存报表', href: 'reports.html', icon: }, ]}, { group: '系统', items: [ { key: 'dictionary', name: '数据字典', href: 'dictionary.html', icon: }, { key: 'settings', name: '系统设置', href: 'settings.html', icon: }, ]}, ]; const mobileTabs = [ { key: 'dashboard', name: '首页', href: 'index.html', icon: }, { key: 'inbound', name: '入库', href: 'inbound.html', icon: }, { key: 'scan', name: '扫码', isScan: true, icon: }, { key: 'outbound', name: '出库', href: 'outbound.html', icon: }, { key: 'inventory', name: '库存', href: 'inventory.html', icon: }, ]; return (

{/* 移动端顶部条：侧边栏在窄屏被隐藏，用户信息/退出登录/系统设置从这里进 */}

HN汇能科技 ERP

{user && }

{title}

{subtitle &&

{subtitle}

}

{actions &&

{actions}

}

{children}

{showUserSheet && user && (

{ if (e.target === e.currentTarget) setShowUserSheet(false); }}>

{user.name} {user.role === 'admin' ? '管理员' : '仓管员'}

货品档案仓库管理供应商管理收发存报表库存盘点数据字典系统设置

window.Api.logout()}>退出登录

)}

); } /* ----- 摄像头条码扫描 Hook（供 ScannerModal 及扫码清单弹窗共用）----- 用法：const { error, torchOn, toggleTorch } = useBarcodeScanner(videoRef, onDetect); onDetect 会在识别到新条码时被调用（同一条码 1.2s 内去重，避免连续触发） */ function useBarcodeScanner(videoRef, onDetect) { const readerRef = useRef(null); const lastCodeRef = useRef({ code: '', time: 0 }); const [error, setError] = useState(''); const [torchOn, setTorchOn] = useState(false); const onDetectRef = useRef(onDetect); onDetectRef.current = onDetect; useEffect(() => { if (!window.ZXingBrowser && !window.ZXing) { setError('条码识别库未加载，请检查 vendor/zxing.min.js 是否正确引入'); return; } const ZX = window.ZXingBrowser || window.ZXing; const hints = new Map(); const reader = new ZX.BrowserMultiFormatReader(hints, { delayBetweenScanAttempts: 150 }); readerRef.current = reader; let stopped = false; reader.decodeFromConstraints( { video: { facingMode: { ideal: 'environment' }, width: { ideal: 1280 }, height: { ideal: 720 } } }, videoRef.current, (result) => { if (stopped || !result) return; const code = result.getText(); const now = Date.now(); if (code === lastCodeRef.current.code && now - lastCodeRef.current.time < 1200) return; lastCodeRef.current = { code, time: now }; if (navigator.vibrate) navigator.vibrate(60); onDetectRef.current && onDetectRef.current(code); } ).then((controls) => { readerRef.current._controls = controls; }).catch((err) => { setError('无法打开摄像头：' + (err && err.message ? err.message : String(err)) + '（请检查浏览器摄像头权限，且必须是 HTTPS 或 localhost）'); }); return () => { stopped = true; try { readerRef.current && readerRef.current._controls && readerRef.current._controls.stop(); } catch (e) {} try { const s = videoRef.current && videoRef.current.srcObject; if (s) s.getTracks().forEach(t => t.stop()); } catch (e) {} }; }, []); const toggleTorch = async () => { try { const s = videoRef.current.srcObject; const track = s && s.getVideoTracks()[0]; if (!track) return; const capabilities = track.getCapabilities ? track.getCapabilities() : {}; if (!capabilities.torch) { setError('该设备/浏览器不支持手电筒'); return; } await track.applyConstraints({ advanced: [{ torch: !torchOn }] }); setTorchOn(!torchOn); } catch (e) { setError('切换手电筒失败：' + e.message); } }; return { error, torchOn, toggleTorch }; } /* ----- OCR 文字识别（本地免费引擎 Tesseract.js，识别包装上印刷的品牌/型号文字）----- 用法：const text = await runOcr(canvasOrImageElement, onProgress); 仅在实际调用时才会加载 OCR 引擎和语言包（约 5-8MB，只加载一次，浏览器会缓存），不会拖慢平时的页面加载速度。 */ async function runOcr(imageSource, onProgress) { if (!window.Tesseract) throw new Error('OCR 引擎未加载，请检查 vendor/tesseract/tesseract.min.js 是否正确引入'); const worker = await window.Tesseract.createWorker('chi_sim+eng', 1, { workerPath: 'vendor/tesseract/worker.min.js', corePath: 'vendor/tesseract/tesseract-core-lstm.wasm.js', langPath: 'vendor/tesseract/lang', logger: (m) => { if (onProgress && m.status === 'recognizing text') onProgress(Math.round((m.progress || 0) * 100)); }, }); try { const { data } = await worker.recognize(imageSource); return (data.text || '').trim(); } finally { await worker.terminate(); } } /* ----- 独立的"拍照识别文字"弹窗：自带摄像头，用于货品档案等没有现成摄像头画面的场景 ----- 用法：{...}} /> */ function OcrCaptureModal({ onClose, onResult, title = '拍照识别文字' }) { const videoRef = useRef(null); const canvasRef = useRef(null); const [error, setError] = useState(''); const [phase, setPhase] = useState('camera'); // camera | captured | recognizing | done const [progress, setProgress] = useState(0); const [text, setText] = useState(''); useEffect(() => { let stream; navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: 'environment' }, width: { ideal: 1280 }, height: { ideal: 720 } } }) .then((s) => { stream = s; if (videoRef.current) videoRef.current.srcObject = s; }) .catch((err) => setError('无法打开摄像头：' + (err && err.message ? err.message : String(err)) + '（请检查摄像头权限，且必须是 HTTPS 或 localhost）')); return () => { if (stream) stream.getTracks().forEach(t => t.stop()); }; }, []); const capture = () => { const video = videoRef.current, canvas = canvasRef.current; canvas.width = video.videoWidth; canvas.height = video.videoHeight; canvas.getContext('2d').drawImage(video, 0, 0); setPhase('captured'); }; const recognize = async () => { setPhase('recognizing'); setProgress(0); setError(''); try { const result = await runOcr(canvasRef.current, setProgress); setText(result); setPhase('done'); } catch (e) { setError(e.message); setPhase('captured'); } }; const use = () => { onResult(text); onClose(); }; return (