655 lines
22 KiB
React
655 lines
22 KiB
React
|
// AI OCR 识别页面 - 支持拍照识别和手工录入
|
|||
|
|
import React, { useState, useEffect, useRef } from 'react'
|
|||
|
|
|
|||
|
|
// 字段转换函数：camelCase → 字段编码
|
|||
|
|
const convertField = (obj) => {
|
|||
|
|
const map = {
|
|||
|
|
// f99 系统字段
|
|||
|
|
id: 'f99_90_id',
|
|||
|
|
userId: 'f99_91_user_id',
|
|||
|
|
// f01 基本信息
|
|||
|
|
name: 'f01_01_name',
|
|||
|
|
code: 'f01_02_code',
|
|||
|
|
category: 'f01_03_category',
|
|||
|
|
status: 'f01_04_status',
|
|||
|
|
remark: 'f01_05_remark',
|
|||
|
|
// f02 详细字段
|
|||
|
|
prefixSerial: 'f02_10_prefix_serial',
|
|||
|
|
version: 'f02_11_version',
|
|||
|
|
packaging: 'f02_12_packaging',
|
|||
|
|
rarity: 'f02_13_rarity',
|
|||
|
|
// f03 评级信息
|
|||
|
|
isGraded: 'f03_20_is_graded',
|
|||
|
|
gradingCompany: 'f03_21_grading_company',
|
|||
|
|
gradingScore: 'f03_22_grading_score',
|
|||
|
|
threeStar: 'f03_23_three_star',
|
|||
|
|
// f04 特殊信息
|
|||
|
|
specialMark: 'f04_30_special_mark',
|
|||
|
|
serialFeature: 'f04_31_serial_feature',
|
|||
|
|
issuer: 'f04_32_issuer',
|
|||
|
|
issueYear: 'f04_33_issue_year',
|
|||
|
|
material: 'f04_34_material',
|
|||
|
|
denomination: 'f04_35_denomination',
|
|||
|
|
issueQuantity: 'f04_36_issue_quantity',
|
|||
|
|
// f05 价格信息
|
|||
|
|
costPrice: 'f05_40_cost_price',
|
|||
|
|
targetPrice: 'f05_41_target_price',
|
|||
|
|
goalPrice: 'f05_42_goal_price',
|
|||
|
|
repairFee: 'f05_43_repair_fee',
|
|||
|
|
gradingFee: 'f05_44_grading_fee',
|
|||
|
|
// f06 其他信息
|
|||
|
|
purpose: 'f06_50_purpose'
|
|||
|
|
}
|
|||
|
|
const result = {}
|
|||
|
|
const numberFields = ['costPrice', 'targetPrice', 'goalPrice', 'repairFee', 'gradingFee']
|
|||
|
|
for (const key in obj) {
|
|||
|
|
let value = obj[key]
|
|||
|
|
if (value === '' || value === null) {
|
|||
|
|
value = null
|
|||
|
|
} else if (numberFields.includes(key)) {
|
|||
|
|
value = parseFloat(value)
|
|||
|
|
if (isNaN(value)) value = null
|
|||
|
|
}
|
|||
|
|
result[map[key] || key] = value
|
|||
|
|
}
|
|||
|
|
return result
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 通用 Input 组件
|
|||
|
|
const Input = ({ form, handleChange, label, field, type = 'text', options = null, disabled = false }) => {
|
|||
|
|
const inputRef = useRef(null)
|
|||
|
|
const handleFocus = () => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
inputRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
|||
|
|
}, 100)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const onChange = (e) => {
|
|||
|
|
const value = e.target.value
|
|||
|
|
if (type === 'number' && value !== '') {
|
|||
|
|
const num = parseFloat(value)
|
|||
|
|
handleChange(field, isNaN(num) ? '' : num)
|
|||
|
|
} else {
|
|||
|
|
handleChange(field, value)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div style={{ marginBottom: '12px' }} ref={inputRef}>
|
|||
|
|
<div style={{ fontSize: '13px', color: '#94a3b8', marginBottom: '6px' }}>{label}</div>
|
|||
|
|
{options ? (
|
|||
|
|
<select
|
|||
|
|
value={form[field] || ''}
|
|||
|
|
onChange={onChange}
|
|||
|
|
onFocus={handleFocus}
|
|||
|
|
disabled={disabled}
|
|||
|
|
style={{
|
|||
|
|
background: disabled ? 'rgba(255,255,255,0.02)' : 'rgba(255,255,255,0.05)',
|
|||
|
|
border: '1px solid rgba(255,255,255,0.1)',
|
|||
|
|
color: disabled ? '#64748b' : '#fff',
|
|||
|
|
padding: '10px',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
width: '100%'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<option value="">请选择</option>
|
|||
|
|
{options.map(o => <option key={o.value} value={o.value} style={{color:'#000'}}>{o.label}</option>)}
|
|||
|
|
</select>
|
|||
|
|
) : (
|
|||
|
|
<input
|
|||
|
|
type={type}
|
|||
|
|
value={form[field] ?? ''}
|
|||
|
|
onChange={onChange}
|
|||
|
|
onFocus={handleFocus}
|
|||
|
|
disabled={disabled}
|
|||
|
|
style={{
|
|||
|
|
background: disabled ? 'rgba(255,255,255,0.02)' : 'rgba(255,255,255,0.05)',
|
|||
|
|
border: '1px solid rgba(255,255,255,0.1)',
|
|||
|
|
color: disabled ? '#64748b' : '#fff',
|
|||
|
|
padding: '10px',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
width: '100%'
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 默认表单数据
|
|||
|
|
const getDefaultForm = () => ({
|
|||
|
|
name: '龙钞',
|
|||
|
|
code: '',
|
|||
|
|
category: '自持',
|
|||
|
|
rarity: '通货',
|
|||
|
|
prefixSerial: '',
|
|||
|
|
version: '2024 龙',
|
|||
|
|
denomination: '',
|
|||
|
|
status: 'in_collection',
|
|||
|
|
packaging: '单张',
|
|||
|
|
material: '',
|
|||
|
|
issueQuantity: '',
|
|||
|
|
purpose: '收藏',
|
|||
|
|
isGraded: false,
|
|||
|
|
gradingCompany: '',
|
|||
|
|
gradingScore: '',
|
|||
|
|
threeStar: false,
|
|||
|
|
specialMark: '',
|
|||
|
|
serialFeature: '',
|
|||
|
|
issuer: '中国人民银行',
|
|||
|
|
issueYear: '',
|
|||
|
|
costPrice: '',
|
|||
|
|
targetPrice: '',
|
|||
|
|
goalPrice: '',
|
|||
|
|
repairFee: '',
|
|||
|
|
gradingFee: '',
|
|||
|
|
remark: ''
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
export default function OCR() {
|
|||
|
|
const [activeTab, setActiveTab] = useState('ai') // ai, manual, batch
|
|||
|
|
const [mode, setMode] = useState('camera') // camera, form
|
|||
|
|
const [form, setForm] = useState(getDefaultForm())
|
|||
|
|
const [saving, setSaving] = useState(false)
|
|||
|
|
const [error, setError] = useState('')
|
|||
|
|
const [recognizing, setRecognizing] = useState(false)
|
|||
|
|
const [selectedImage, setSelectedImage] = useState(null)
|
|||
|
|
const [imagePreview, setImagePreview] = useState(null)
|
|||
|
|
const fileInputRef = useRef(null)
|
|||
|
|
const videoRef = useRef(null)
|
|||
|
|
const canvasRef = useRef(null)
|
|||
|
|
|
|||
|
|
// 选项定义
|
|||
|
|
const statusOptions = [
|
|||
|
|
{ value: 'in_collection', label: '收藏中' },
|
|||
|
|
{ value: 'selling', label: '出售中' },
|
|||
|
|
{ value: 'sold', label: '已售' },
|
|||
|
|
{ value: 'grading', label: '送评中' },
|
|||
|
|
{ value: 'repairing', label: '修复中' },
|
|||
|
|
{ value: 'transit', label: '在途中' },
|
|||
|
|
{ value: 'other', label: '其他' }
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const categoryOptions = [
|
|||
|
|
{ value: '自持', label: '自持' },
|
|||
|
|
{ value: '寄存', label: '寄存' },
|
|||
|
|
{ value: '寄售', label: '寄售' },
|
|||
|
|
{ value: '共有', label: '共有' },
|
|||
|
|
{ value: '寻号', label: '寻号' },
|
|||
|
|
{ value: '其他', label: '其他' }
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const rarityOptions = [
|
|||
|
|
{ value: '通货', label: '通货' },
|
|||
|
|
{ value: '特色', label: '特色' },
|
|||
|
|
{ value: '少见', label: '少见' },
|
|||
|
|
{ value: '稀有', label: '稀有' },
|
|||
|
|
{ value: '珍品', label: '珍品' },
|
|||
|
|
{ value: '孤品', label: '孤品' }
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const packagingOptions = [
|
|||
|
|
{ value: '标十', label: '标十' },
|
|||
|
|
{ value: '标百', label: '标百' },
|
|||
|
|
{ value: '单张', label: '单张' },
|
|||
|
|
{ value: '裸钞', label: '裸钞' }
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const handleChange = (key, value) => {
|
|||
|
|
setForm({ ...form, [key]: value })
|
|||
|
|
if (key === 'targetPrice' && value) {
|
|||
|
|
setForm(prev => ({ ...prev, status: 'sold' }))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 选择图片
|
|||
|
|
const handleSelectImage = (e) => {
|
|||
|
|
const file = e.target.files[0]
|
|||
|
|
if (!file) return
|
|||
|
|
|
|||
|
|
setSelectedImage(file)
|
|||
|
|
const reader = new FileReader()
|
|||
|
|
reader.onload = (e) => {
|
|||
|
|
setImagePreview(e.target.result)
|
|||
|
|
}
|
|||
|
|
reader.readAsDataURL(file)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 调用 OCR 识别
|
|||
|
|
const handleRecognize = async () => {
|
|||
|
|
if (!selectedImage) {
|
|||
|
|
setError('请先选择图片')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setRecognizing(true)
|
|||
|
|
setError('')
|
|||
|
|
|
|||
|
|
const token = localStorage.getItem('token')
|
|||
|
|
const formData = new FormData()
|
|||
|
|
formData.append('image', selectedImage)
|
|||
|
|
|
|||
|
|
// 使用 XMLHttpRequest 替代 fetch，兼容性更好
|
|||
|
|
const data = await new Promise((resolve, reject) => {
|
|||
|
|
const xhr = new XMLHttpRequest()
|
|||
|
|
xhr.open('POST', '/api/ocr/recognize')
|
|||
|
|
xhr.setRequestHeader('Authorization', 'Bearer ' + token)
|
|||
|
|
|
|||
|
|
xhr.onload = function() {
|
|||
|
|
if (xhr.status >= 200 && xhr.status < 300) {
|
|||
|
|
try {
|
|||
|
|
const data = JSON.parse(xhr.responseText)
|
|||
|
|
resolve(data)
|
|||
|
|
} catch (e) {
|
|||
|
|
reject(new Error('JSON解析失败: ' + xhr.responseText.substring(0, 100)))
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
try {
|
|||
|
|
const data = JSON.parse(xhr.responseText)
|
|||
|
|
reject(new Error(data.error?.message || data.detail || '识别失败'))
|
|||
|
|
} catch (e) {
|
|||
|
|
reject(new Error('请求失败: ' + xhr.status))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
xhr.onerror = function() {
|
|||
|
|
reject(new Error('网络错误'))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
xhr.send(formData)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 自动填充识别结果
|
|||
|
|
if (data.fields) {
|
|||
|
|
const recognizedForm = { ...getDefaultForm() }
|
|||
|
|
|
|||
|
|
// 映射识别字段到表单字段
|
|||
|
|
if (data.fields.name) recognizedForm.name = data.fields.name
|
|||
|
|
if (data.fields.code) recognizedForm.code = data.fields.code
|
|||
|
|
if (data.fields.version) recognizedForm.version = data.fields.version
|
|||
|
|
if (data.fields.prefix_serial) recognizedForm.prefixSerial = data.fields.prefix_serial
|
|||
|
|
if (data.fields.denomination) recognizedForm.denomination = data.fields.denomination
|
|||
|
|
if (data.fields.material) recognizedForm.material = data.fields.material
|
|||
|
|
if (data.fields.issue_year) recognizedForm.issueYear = data.fields.issue_year
|
|||
|
|
if (data.fields.issuer) recognizedForm.issuer = data.fields.issuer
|
|||
|
|
if (data.fields.cost_price) recognizedForm.costPrice = data.fields.cost_price
|
|||
|
|
if (data.fields.remark) recognizedForm.remark = data.fields.remark
|
|||
|
|
|
|||
|
|
setForm(recognizedForm)
|
|||
|
|
setMode('form')
|
|||
|
|
alert('识别成功！请检查并完善信息')
|
|||
|
|
} else {
|
|||
|
|
setError('识别结果为空')
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('OCR 识别失败:', e)
|
|||
|
|
setError('识别失败：' + e.message)
|
|||
|
|
} finally {
|
|||
|
|
setRecognizing(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存藏品
|
|||
|
|
const handleSave = async () => {
|
|||
|
|
if (!form.name || !form.version) {
|
|||
|
|
setError('名称和版别为必填项')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setSaving(true)
|
|||
|
|
setError('')
|
|||
|
|
|
|||
|
|
const token = localStorage.getItem('token')
|
|||
|
|
const formData = convertField(form)
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const res = await fetch('/api/collections', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
'Authorization': 'Bearer ' + token
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify(formData)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (!res.ok) {
|
|||
|
|
const data = await res.json()
|
|||
|
|
throw new Error(data.error?.message || data.detail || '保存失败')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
alert('保存成功！')
|
|||
|
|
window.location.hash = '#/list'
|
|||
|
|
window.refreshList?.()
|
|||
|
|
window.refreshHome?.()
|
|||
|
|
} catch (e) {
|
|||
|
|
alert('保存失败：' + e.message)
|
|||
|
|
} finally {
|
|||
|
|
setSaving(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 拍照模式界面
|
|||
|
|
if (mode === 'camera') {
|
|||
|
|
return (
|
|||
|
|
<div style={{ background: '#0f172a', minHeight: '100vh', paddingBottom: '80px' }}>
|
|||
|
|
{/* 顶部标签切换 */}
|
|||
|
|
<div style={{ padding: '12px 16px', background: 'rgba(255,255,255,0.02)', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
|
|||
|
|
<div style={{ display: 'flex', gap: '8px' }}>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setActiveTab('ai')}
|
|||
|
|
style={{
|
|||
|
|
flex: 1,
|
|||
|
|
padding: '10px',
|
|||
|
|
background: activeTab === 'ai' ? '#fbbf24' : 'rgba(255,255,255,0.05)',
|
|||
|
|
color: activeTab === 'ai' ? '#1e293b' : '#fff',
|
|||
|
|
border: 'none',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
fontSize: '14px',
|
|||
|
|
fontWeight: '600',
|
|||
|
|
cursor: 'pointer'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
🤖 AI 识别
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
setActiveTab('manual');
|
|||
|
|
setMode('form');
|
|||
|
|
}}
|
|||
|
|
style={{
|
|||
|
|
flex: 1,
|
|||
|
|
padding: '10px',
|
|||
|
|
background: activeTab === 'manual' ? '#fbbf24' : 'rgba(255,255,255,0.05)',
|
|||
|
|
color: activeTab === 'manual' ? '#1e293b' : '#fff',
|
|||
|
|
border: 'none',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
fontSize: '14px',
|
|||
|
|
fontWeight: '600',
|
|||
|
|
cursor: 'pointer'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
✍️ 手工录入
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setActiveTab('batch')}
|
|||
|
|
disabled
|
|||
|
|
style={{
|
|||
|
|
flex: 1,
|
|||
|
|
padding: '10px',
|
|||
|
|
background: 'rgba(255,255,255,0.02)',
|
|||
|
|
color: '#64748b',
|
|||
|
|
border: '1px solid rgba(255,255,255,0.05)',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
fontSize: '14px',
|
|||
|
|
fontWeight: '600',
|
|||
|
|
cursor: 'not-allowed'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
📦 批量录入
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 内容区域 */}
|
|||
|
|
{activeTab === 'ai' && (
|
|||
|
|
|
|||
|
|
<div style={{ padding: '16px' }}>
|
|||
|
|
{/* 图片选择区域 */}
|
|||
|
|
<div style={{
|
|||
|
|
background: 'rgba(255,255,255,0.03)',
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
padding: '24px',
|
|||
|
|
textAlign: 'center',
|
|||
|
|
marginBottom: '12px'
|
|||
|
|
}}>
|
|||
|
|
<input
|
|||
|
|
ref={fileInputRef}
|
|||
|
|
type="file"
|
|||
|
|
accept="image/*"
|
|||
|
|
capture="environment"
|
|||
|
|
onChange={handleSelectImage}
|
|||
|
|
style={{ display: 'none' }}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{imagePreview ? (
|
|||
|
|
<div>
|
|||
|
|
<img
|
|||
|
|
src={imagePreview}
|
|||
|
|
alt="已选择图片"
|
|||
|
|
style={{ maxWidth: '100%', borderRadius: '8px', marginBottom: '16px' }}
|
|||
|
|
/>
|
|||
|
|
<div style={{ display: 'flex', gap: '12px', justifyContent: 'center' }}>
|
|||
|
|
<button
|
|||
|
|
onClick={() => { setSelectedImage(null); setImagePreview(null); }}
|
|||
|
|
style={{
|
|||
|
|
padding: '12px 24px',
|
|||
|
|
background: 'rgba(239, 68, 68, 0.2)',
|
|||
|
|
color: '#ef4444',
|
|||
|
|
border: '1px solid #ef4444',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
fontSize: '14px',
|
|||
|
|
cursor: 'pointer'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
🗑️ 重新选择
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={handleRecognize}
|
|||
|
|
disabled={recognizing}
|
|||
|
|
style={{
|
|||
|
|
padding: '12px 24px',
|
|||
|
|
background: recognizing ? '#64748b' : '#fbbf24',
|
|||
|
|
color: recognizing ? '#94a3b8' : '#1e293b',
|
|||
|
|
border: 'none',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
fontSize: '14px',
|
|||
|
|
fontWeight: '600',
|
|||
|
|
cursor: recognizing ? 'not-allowed' : 'pointer'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{recognizing ? '🔍 识别中...' : '🤖 开始识别'}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div>
|
|||
|
|
<div
|
|||
|
|
onClick={() => {
|
|||
|
|
fileInputRef.current.setAttribute('capture', '');
|
|||
|
|
fileInputRef.current.setAttribute('accept', 'image/*');
|
|||
|
|
fileInputRef.current.click();
|
|||
|
|
}}
|
|||
|
|
style={{
|
|||
|
|
padding: '24px',
|
|||
|
|
background: 'rgba(59, 130, 246, 0.1)',
|
|||
|
|
border: '2px dashed rgba(59, 130, 246, 0.5)',
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
cursor: 'pointer',
|
|||
|
|
marginBottom: '16px',
|
|||
|
|
textAlign: 'center'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div style={{ fontSize: '40px', marginBottom: '12px' }}>📷</div>
|
|||
|
|
<div style={{ color: '#60a5fa', fontSize: '15px', fontWeight: 'bold', marginBottom: '4px' }}>
|
|||
|
|
拍照识别
|
|||
|
|
</div>
|
|||
|
|
<div style={{ color: '#94a3b8', fontSize: '13px' }}>
|
|||
|
|
使用相机拍照并识别
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div
|
|||
|
|
onClick={() => {
|
|||
|
|
fileInputRef.current.removeAttribute('capture');
|
|||
|
|
fileInputRef.current.setAttribute('accept', 'image/*');
|
|||
|
|
fileInputRef.current.click();
|
|||
|
|
}}
|
|||
|
|
style={{
|
|||
|
|
padding: '24px',
|
|||
|
|
background: 'rgba(34, 197, 94, 0.1)',
|
|||
|
|
border: '2px dashed rgba(34, 197, 94, 0.5)',
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
cursor: 'pointer',
|
|||
|
|
textAlign: 'center'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div style={{ fontSize: '40px', marginBottom: '12px' }}>🖼️</div>
|
|||
|
|
<div style={{ color: '#22c55e', fontSize: '15px', fontWeight: 'bold', marginBottom: '4px' }}>
|
|||
|
|
从相册选择
|
|||
|
|
</div>
|
|||
|
|
<div style={{ color: '#94a3b8', fontSize: '13px' }}>
|
|||
|
|
从相册选择已有图片
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 错误提示 */}
|
|||
|
|
{error && (
|
|||
|
|
<div style={{
|
|||
|
|
background: 'rgba(239, 68, 68, 0.2)',
|
|||
|
|
border: '1px solid #ef4444',
|
|||
|
|
color: '#ef4444',
|
|||
|
|
padding: '12px',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
marginBottom: '12px'
|
|||
|
|
}}>
|
|||
|
|
⚠️ {error}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 提示信息 */}
|
|||
|
|
<div style={{
|
|||
|
|
background: 'rgba(59, 130, 246, 0.1)',
|
|||
|
|
border: '1px solid rgba(59, 130, 246, 0.3)',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
padding: '16px',
|
|||
|
|
marginTop: '12px'
|
|||
|
|
}}>
|
|||
|
|
<div style={{ color: '#60a5fa', fontSize: '14px', fontWeight: 'bold', marginBottom: '8px' }}>💡 识别说明</div>
|
|||
|
|
<ul style={{ color: '#94a3b8', fontSize: '13px', paddingLeft: '20px', margin: 0 }}>
|
|||
|
|
<li>支持拍照或从相册选择图片</li>
|
|||
|
|
<li>自动识别名称、版别、冠字序号等字段</li>
|
|||
|
|
<li>识别结果可手动修改完善</li>
|
|||
|
|
<li>建议拍摄清晰、光线充足的正面照片</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 表单模式界面
|
|||
|
|
return (
|
|||
|
|
<div style={{ background: '#0f172a', minHeight: '100vh', paddingBottom: '80px' }}>
|
|||
|
|
{/* 顶部 */}
|
|||
|
|
<div style={{ padding: '16px', background: 'rgba(255,255,255,0.02)', borderBottom: '1px solid rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', gap: '12px' }}>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setMode('camera')}
|
|||
|
|
style={{
|
|||
|
|
background: 'rgba(255,255,255,0.1)',
|
|||
|
|
color: '#fff',
|
|||
|
|
border: 'none',
|
|||
|
|
borderRadius: '6px',
|
|||
|
|
width: '36px',
|
|||
|
|
height: '36px',
|
|||
|
|
fontSize: '20px',
|
|||
|
|
cursor: 'pointer'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
←
|
|||
|
|
</button>
|
|||
|
|
<div>
|
|||
|
|
<div style={{ color: '#fff', fontSize: '18px', fontWeight: 'bold' }}>确认信息</div>
|
|||
|
|
<div style={{ color: '#94a3b8', fontSize: '13px' }}>请检查并完善识别结果</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{error && (
|
|||
|
|
<div style={{
|
|||
|
|
margin: '16px',
|
|||
|
|
background: 'rgba(239, 68, 68, 0.2)',
|
|||
|
|
border: '1px solid #ef4444',
|
|||
|
|
color: '#ef4444',
|
|||
|
|
padding: '12px',
|
|||
|
|
borderRadius: '8px'
|
|||
|
|
}}>
|
|||
|
|
⚠️ {error}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div style={{ padding: '16px' }}>
|
|||
|
|
{/* 基本信息 */}
|
|||
|
|
<div style={{ background: 'rgba(255,255,255,0.03)', borderRadius: '12px', padding: '16px', marginBottom: '12px' }}>
|
|||
|
|
<div style={{ color: '#fbbf24', fontSize: '14px', fontWeight: 'bold', marginBottom: '12px' }}>基本信息</div>
|
|||
|
|
<Input form={form} handleChange={handleChange} label="名称 *" field="name" />
|
|||
|
|
<Input form={form} handleChange={handleChange} label="版别 *" field="version" />
|
|||
|
|
<Input form={form} handleChange={handleChange} label="冠字序号" field="prefixSerial" />
|
|||
|
|
<Input form={form} handleChange={handleChange} label="面值" field="denomination" />
|
|||
|
|
<Input form={form} handleChange={handleChange} label="材质" field="material" />
|
|||
|
|
<Input form={form} handleChange={handleChange} label="发行方" field="issuer" />
|
|||
|
|
<Input form={form} handleChange={handleChange} label="发行年份" field="issueYear" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 价格信息 */}
|
|||
|
|
<div style={{ background: 'rgba(255,255,255,0.03)', borderRadius: '12px', padding: '16px', marginBottom: '12px' }}>
|
|||
|
|
<div style={{ color: '#fbbf24', fontSize: '14px', fontWeight: 'bold', marginBottom: '12px' }}>价格信息</div>
|
|||
|
|
<Input form={form} handleChange={handleChange} label="成本价" field="costPrice" type="number" />
|
|||
|
|
<Input form={form} handleChange={handleChange} label="目标价" field="targetPrice" type="number" />
|
|||
|
|
<Input form={form} handleChange={handleChange} label="出售价" field="goalPrice" type="number" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 备注 */}
|
|||
|
|
<div style={{ background: 'rgba(255,255,255,0.03)', borderRadius: '12px', padding: '16px', marginBottom: '12px' }}>
|
|||
|
|
<div style={{ fontSize: '13px', color: '#94a3b8', marginBottom: '6px' }}>备注</div>
|
|||
|
|
<textarea
|
|||
|
|
value={form.remark || ''}
|
|||
|
|
onChange={(e) => handleChange('remark', e.target.value)}
|
|||
|
|
rows={3}
|
|||
|
|
style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', color: '#fff', padding: '10px', borderRadius: '8px', width: '100%', resize: 'none' }}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 保存按钮 */}
|
|||
|
|
<button
|
|||
|
|
onClick={saving ? null : handleSave}
|
|||
|
|
disabled={saving}
|
|||
|
|
style={{
|
|||
|
|
width: '100%',
|
|||
|
|
padding: '14px',
|
|||
|
|
background: saving ? '#64748b' : '#fbbf24',
|
|||
|
|
color: saving ? '#94a3b8' : '#1e293b',
|
|||
|
|
border: 'none',
|
|||
|
|
borderRadius: '10px',
|
|||
|
|
fontSize: '16px',
|
|||
|
|
fontWeight: '600',
|
|||
|
|
cursor: saving ? 'not-allowed' : 'pointer',
|
|||
|
|
marginBottom: '12px'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{saving ? '保存中...' : '✅ 保存藏品'}
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
onClick={() => setMode('camera')}
|
|||
|
|
style={{
|
|||
|
|
width: '100%',
|
|||
|
|
padding: '14px',
|
|||
|
|
background: 'rgba(255,255,255,0.05)',
|
|||
|
|
color: '#94a3b8',
|
|||
|
|
border: '1px solid rgba(255,255,255,0.1)',
|
|||
|
|
borderRadius: '10px',
|
|||
|
|
fontSize: '14px',
|
|||
|
|
cursor: 'pointer'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
🔄 重新识别
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|