728 lines
25 KiB
TypeScript
728 lines
25 KiB
TypeScript
'use client'
|
||
|
||
import { useState, useEffect } from 'react'
|
||
import { withAdminAuth } from '@/components/admin/AdminAuth'
|
||
import { Plus, Edit, Trash2, Search, Upload, Download, FileText } from 'lucide-react'
|
||
|
||
interface Component {
|
||
id: string
|
||
name: string
|
||
brand: string
|
||
model: string
|
||
price: number
|
||
description?: string
|
||
imageUrl?: string
|
||
stock: number
|
||
specifications?: string
|
||
componentType: {
|
||
id: string
|
||
name: string
|
||
}
|
||
}
|
||
|
||
interface ComponentType {
|
||
id: string
|
||
name: string
|
||
}
|
||
|
||
function AdminComponentsPage() {
|
||
const [components, setComponents] = useState<Component[]>([])
|
||
const [componentTypes, setComponentTypes] = useState<ComponentType[]>([])
|
||
const [isLoading, setIsLoading] = useState(true)
|
||
const [showModal, setShowModal] = useState(false)
|
||
const [showBatchModal, setShowBatchModal] = useState(false)
|
||
const [editingComponent, setEditingComponent] = useState<Component | null>(null)
|
||
const [searchTerm, setSearchTerm] = useState('')
|
||
const [batchFile, setBatchFile] = useState<File | null>(null)
|
||
const [batchData, setBatchData] = useState<any[]>([])
|
||
const [batchImportLoading, setBatchImportLoading] = useState(false)
|
||
const [validationErrors, setValidationErrors] = useState<string[]>([])
|
||
const [validData, setValidData] = useState<any[]>([])
|
||
const [invalidData, setInvalidData] = useState<any[]>([])
|
||
const [formData, setFormData] = useState({
|
||
name: '',
|
||
brand: '',
|
||
model: '',
|
||
price: '',
|
||
description: '',
|
||
imageUrl: '',
|
||
stock: '',
|
||
componentTypeId: '',
|
||
specifications: ''
|
||
})
|
||
|
||
useEffect(() => {
|
||
loadData()
|
||
}, [])
|
||
|
||
const loadData = async () => {
|
||
try {
|
||
const [componentsRes, typesRes] = await Promise.all([
|
||
fetch('/api/components?limit=100'),
|
||
fetch('/api/component-types')
|
||
])
|
||
|
||
if (componentsRes.ok) {
|
||
const data = await componentsRes.json()
|
||
setComponents(data.components)
|
||
}
|
||
|
||
if (typesRes.ok) {
|
||
const types = await typesRes.json()
|
||
setComponentTypes(types)
|
||
}
|
||
} catch (error) {
|
||
console.error('加载数据失败:', error)
|
||
} finally {
|
||
setIsLoading(false)
|
||
}
|
||
}
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
|
||
try {
|
||
const url = editingComponent
|
||
? `/api/components/${editingComponent.id}`
|
||
: '/api/components'
|
||
|
||
const method = editingComponent ? 'PUT' : 'POST'
|
||
|
||
const response = await fetch(url, {
|
||
method,
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify(formData),
|
||
})
|
||
|
||
if (response.ok) {
|
||
await loadData()
|
||
setShowModal(false)
|
||
resetForm()
|
||
} else {
|
||
const data = await response.json()
|
||
alert(data.message || '操作失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('提交失败:', error)
|
||
alert('操作失败')
|
||
}
|
||
}
|
||
|
||
const handleDelete = async (id: string) => {
|
||
if (!confirm('确定要删除这个配件吗？')) return
|
||
|
||
try {
|
||
const response = await fetch(`/api/components/${id}`, {
|
||
method: 'DELETE',
|
||
})
|
||
|
||
if (response.ok) {
|
||
await loadData()
|
||
} else {
|
||
alert('删除失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('删除失败:', error)
|
||
alert('删除失败')
|
||
}
|
||
}
|
||
|
||
const handleEdit = (component: Component) => {
|
||
setEditingComponent(component)
|
||
setFormData({
|
||
name: component.name,
|
||
brand: component.brand,
|
||
model: component.model,
|
||
price: component.price.toString(),
|
||
description: component.description || '',
|
||
imageUrl: component.imageUrl || '',
|
||
stock: component.stock.toString(),
|
||
componentTypeId: component.componentType.id,
|
||
specifications: component.specifications || ''
|
||
})
|
||
setShowModal(true)
|
||
}
|
||
|
||
const resetForm = () => {
|
||
setFormData({
|
||
name: '',
|
||
brand: '',
|
||
model: '',
|
||
price: '',
|
||
description: '',
|
||
imageUrl: '',
|
||
stock: '',
|
||
componentTypeId: '',
|
||
specifications: ''
|
||
})
|
||
setEditingComponent(null)
|
||
}
|
||
|
||
// 批量导入相关函数
|
||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = e.target.files?.[0]
|
||
if (file) {
|
||
setBatchFile(file)
|
||
parseFile(file)
|
||
}
|
||
}
|
||
const parseFile = async (file: File) => {
|
||
const text = await file.text()
|
||
|
||
try {
|
||
let data: any[] = []
|
||
|
||
if (file.name.endsWith('.json')) {
|
||
const parsed = JSON.parse(text)
|
||
data = Array.isArray(parsed) ? parsed : [parsed]
|
||
} else if (file.name.endsWith('.csv')) {
|
||
const lines = text.split('\n')
|
||
if (lines.length < 2) {
|
||
alert('CSV文件格式错误')
|
||
return
|
||
}
|
||
|
||
const headers = lines[0].split(',').map(h => h.trim())
|
||
data = lines.slice(1)
|
||
.filter(line => line.trim())
|
||
.map(line => {
|
||
const values = line.split(',').map(v => v.trim().replace(/^"|"$/g, ''))
|
||
const obj: any = {}
|
||
headers.forEach((header, index) => {
|
||
obj[header] = values[index] || ''
|
||
})
|
||
return obj
|
||
})
|
||
}
|
||
|
||
setBatchData(data)
|
||
validateBatchData(data)
|
||
} catch (error) {
|
||
alert('文件解析失败，请检查文件格式')
|
||
console.error('File parse error:', error)
|
||
}
|
||
}
|
||
|
||
const validateBatchData = (data: any[]) => {
|
||
const errors: string[] = []
|
||
const valid: any[] = []
|
||
const invalid: any[] = []
|
||
|
||
data.forEach((item, index) => {
|
||
const itemErrors: string[] = []
|
||
|
||
// 验证必需字段
|
||
if (!item.name || typeof item.name !== 'string' || item.name.trim() === '') {
|
||
itemErrors.push('缺少商品名称')
|
||
}
|
||
if (!item.brand || typeof item.brand !== 'string' || item.brand.trim() === '') {
|
||
itemErrors.push('缺少品牌')
|
||
}
|
||
if (!item.model || typeof item.model !== 'string' || item.model.trim() === '') {
|
||
itemErrors.push('缺少型号')
|
||
}
|
||
|
||
// 验证价格
|
||
const price = typeof item.price === 'string' ? parseFloat(item.price) : item.price
|
||
if (isNaN(price) || price < 0) {
|
||
itemErrors.push('价格必须是有效的正数')
|
||
}
|
||
|
||
// 验证库存
|
||
const stock = typeof item.stock === 'string' ? parseInt(item.stock) : item.stock
|
||
if (isNaN(stock) || stock < 0) {
|
||
itemErrors.push('库存必须是有效的非负整数')
|
||
}
|
||
|
||
// 验证配件类型
|
||
const hasTypeId = item.componentTypeId && item.componentTypeId.trim() !== ''
|
||
const hasTypeName = (item.typeName || item.type) && (item.typeName || item.type).trim() !== ''
|
||
if (!hasTypeId && !hasTypeName) {
|
||
itemErrors.push('缺少配件类型信息 (componentTypeId, typeName 或 type)')
|
||
}
|
||
|
||
if (itemErrors.length > 0) {
|
||
invalid.push({ ...item, _errors: itemErrors, _index: index + 1 })
|
||
errors.push(`第${index + 1}行: ${itemErrors.join(', ')}`)
|
||
} else {
|
||
valid.push(item)
|
||
}
|
||
})
|
||
|
||
setValidationErrors(errors)
|
||
setValidData(valid)
|
||
setInvalidData(invalid)
|
||
}
|
||
|
||
const handleBatchImport = async () => {
|
||
if (validData.length === 0) {
|
||
alert('没有有效的数据可导入')
|
||
return
|
||
}
|
||
|
||
if (invalidData.length > 0) {
|
||
const proceed = confirm(`发现${invalidData.length}行无效数据，是否只导入${validData.length}行有效数据？`)
|
||
if (!proceed) return
|
||
}
|
||
|
||
setBatchImportLoading(true)
|
||
|
||
try {
|
||
const response = await fetch('/api/components/batch', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
components: validData
|
||
}),
|
||
})
|
||
|
||
const result = await response.json()
|
||
|
||
if (response.ok && result.success) {
|
||
const { summary, results } = result
|
||
|
||
// 显示详细的导入结果
|
||
const failedItems = results.filter((r: any) => !r.success)
|
||
let message = `导入完成！\n成功: ${summary.successful}\n失败: ${summary.failed}`
|
||
|
||
if (summary.newTypesCreated > 0) {
|
||
message += `\n新创建配件类型: ${summary.newTypesCreated}`
|
||
}
|
||
|
||
if (failedItems.length > 0 && failedItems.length <= 5) {
|
||
message += '\n\n失败项目:'
|
||
failedItems.forEach((item: any, index: number) => {
|
||
message += `\n${index + 1}. ${item.item.name || '未知'}: ${item.error}`
|
||
})
|
||
} else if (failedItems.length > 5) {
|
||
message += `\n\n失败项目过多，请检查数据格式或查看控制台详情`
|
||
console.log('批量导入失败项目:', failedItems)
|
||
}
|
||
|
||
alert(message)
|
||
|
||
if (summary.successful > 0) {
|
||
await loadData()
|
||
setShowBatchModal(false)
|
||
setBatchFile(null)
|
||
setBatchData([])
|
||
setValidData([])
|
||
setInvalidData([])
|
||
setValidationErrors([])
|
||
}
|
||
} else {
|
||
alert(`批量导入失败: ${result.message || '未知错误'}`)
|
||
console.error('Batch import error:', result)
|
||
}
|
||
|
||
} catch (error) {
|
||
alert('批量导入失败：网络或服务器错误')
|
||
console.error('Batch import error:', error)
|
||
} finally {
|
||
setBatchImportLoading(false)
|
||
}
|
||
}
|
||
|
||
const downloadTemplate = (format: 'csv' | 'json') => {
|
||
const sampleData = [
|
||
{
|
||
name: 'Intel Core i5-13400F',
|
||
brand: 'Intel',
|
||
model: 'i5-13400F',
|
||
price: 1299,
|
||
description: '10核16线程，基础频率2.5GHz，最大睿频4.6GHz',
|
||
imageUrl: '',
|
||
stock: 50,
|
||
typeName: 'CPU',
|
||
specifications: '{"cores":10,"threads":16,"baseClock":"2.5GHz","boostClock":"4.6GHz","socket":"LGA1700"}'
|
||
}
|
||
]
|
||
|
||
if (format === 'csv') {
|
||
const headers = ['name', 'brand', 'model', 'price', 'description', 'imageUrl', 'stock', 'typeName', 'specifications']
|
||
const csvContent = [
|
||
headers.join(','),
|
||
...sampleData.map(item => headers.map(header => `"${item[header as keyof typeof item] || ''}"`).join(','))
|
||
].join('\n')
|
||
|
||
const blob = new Blob([csvContent], { type: 'text/csv' })
|
||
const url = URL.createObjectURL(blob)
|
||
const a = document.createElement('a')
|
||
a.href = url
|
||
a.download = 'components_template.csv'
|
||
a.click()
|
||
URL.revokeObjectURL(url)
|
||
} else {
|
||
const jsonContent = JSON.stringify(sampleData, null, 2)
|
||
const blob = new Blob([jsonContent], { type: 'application/json' })
|
||
const url = URL.createObjectURL(blob)
|
||
const a = document.createElement('a')
|
||
a.href = url
|
||
a.download = 'components_template.json'
|
||
a.click()
|
||
URL.revokeObjectURL(url)
|
||
}
|
||
}
|
||
const filteredComponents = components.filter(component =>
|
||
component.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
component.brand.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
component.model.toLowerCase().includes(searchTerm.toLowerCase())
|
||
)
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<div className="flex justify-center items-center py-12">
|
||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> <div className="flex justify-between items-center mb-6">
|
||
<h1 className="text-3xl font-bold text-gray-900">配件管理</h1>
|
||
<div className="flex gap-3">
|
||
<button
|
||
onClick={() => setShowBatchModal(true)}
|
||
className="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 flex items-center gap-2"
|
||
>
|
||
<Upload className="h-5 w-5" />
|
||
批量导入
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
resetForm()
|
||
setShowModal(true)
|
||
}}
|
||
className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 flex items-center gap-2"
|
||
>
|
||
<Plus className="h-5 w-5" />
|
||
添加配件
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Search */}
|
||
<div className="mb-6">
|
||
<div className="relative">
|
||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
|
||
<input
|
||
type="text"
|
||
placeholder="搜索配件..."
|
||
value={searchTerm}
|
||
onChange={(e) => setSearchTerm(e.target.value)}
|
||
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Components Table */}
|
||
<div className="bg-white shadow-md rounded-lg overflow-hidden">
|
||
<table className="min-w-full divide-y divide-gray-200">
|
||
<thead className="bg-gray-50">
|
||
<tr>
|
||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
配件信息
|
||
</th>
|
||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
类型
|
||
</th>
|
||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
价格
|
||
</th>
|
||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
库存
|
||
</th>
|
||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
操作
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="bg-white divide-y divide-gray-200">
|
||
{filteredComponents.map((component) => (
|
||
<tr key={component.id}>
|
||
<td className="px-6 py-4 whitespace-nowrap">
|
||
<div className="flex items-center">
|
||
<div className="h-10 w-10 flex-shrink-0">
|
||
{component.imageUrl ? (
|
||
<img loading='lazy'
|
||
className="h-10 w-10 rounded-full object-cover"
|
||
src={component.imageUrl}
|
||
alt={component.name}
|
||
/>
|
||
) : (
|
||
<div className="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
|
||
📦
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="ml-4">
|
||
<div className="text-sm font-medium text-gray-900">
|
||
{component.name}
|
||
</div>
|
||
<div className="text-sm text-gray-500">
|
||
{component.brand} {component.model}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||
{component.componentType.name}
|
||
</td>
|
||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||
¥{component.price.toLocaleString()}
|
||
</td>
|
||
<td className="px-6 py-4 whitespace-nowrap">
|
||
<span className={`inline-flex px-2 py-1 text-xs rounded-full ${
|
||
component.stock > 0
|
||
? 'bg-green-100 text-green-800'
|
||
: 'bg-red-100 text-red-800'
|
||
}`}>
|
||
{component.stock}
|
||
</span>
|
||
</td>
|
||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
||
<button
|
||
onClick={() => handleEdit(component)}
|
||
className="text-blue-600 hover:text-blue-900 mr-4"
|
||
>
|
||
<Edit className="h-4 w-4" />
|
||
</button>
|
||
<button
|
||
onClick={() => handleDelete(component.id)}
|
||
className="text-red-600 hover:text-red-900"
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{/* Modal */}
|
||
{showModal && (
|
||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50">
|
||
<div className="bg-white rounded-lg p-6 w-full max-w-md max-h-[90vh] overflow-y-auto">
|
||
<h2 className="text-xl font-bold mb-4">
|
||
{editingComponent ? '编辑配件' : '添加配件'}
|
||
</h2>
|
||
|
||
<form onSubmit={handleSubmit} className="space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">配件类型</label>
|
||
<select
|
||
value={formData.componentTypeId}
|
||
onChange={(e) => setFormData({ ...formData, componentTypeId: e.target.value })}
|
||
required
|
||
className="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2"
|
||
>
|
||
<option value="">选择类型</option>
|
||
{componentTypes.map((type) => (
|
||
<option key={type.id} value={type.id}>
|
||
{type.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">配件名称</label>
|
||
<input
|
||
type="text"
|
||
value={formData.name}
|
||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||
required
|
||
className="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">品牌</label>
|
||
<input
|
||
type="text"
|
||
value={formData.brand}
|
||
onChange={(e) => setFormData({ ...formData, brand: e.target.value })}
|
||
required
|
||
className="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">型号</label>
|
||
<input
|
||
type="text"
|
||
value={formData.model}
|
||
onChange={(e) => setFormData({ ...formData, model: e.target.value })}
|
||
required
|
||
className="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">价格</label>
|
||
<input
|
||
type="number"
|
||
step="0.01"
|
||
value={formData.price}
|
||
onChange={(e) => setFormData({ ...formData, price: e.target.value })}
|
||
required
|
||
className="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">库存</label>
|
||
<input
|
||
type="number"
|
||
value={formData.stock}
|
||
onChange={(e) => setFormData({ ...formData, stock: e.target.value })}
|
||
required
|
||
className="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">描述</label>
|
||
<textarea
|
||
value={formData.description}
|
||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||
rows={3}
|
||
className="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">图片URL</label>
|
||
<input
|
||
type="url"
|
||
value={formData.imageUrl}
|
||
onChange={(e) => setFormData({ ...formData, imageUrl: e.target.value })}
|
||
className="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex justify-end space-x-4 pt-4">
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowModal(false)}
|
||
className="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50"
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
|
||
>
|
||
{editingComponent ? '更新' : '创建'}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Batch Import Modal */}
|
||
{showBatchModal && (
|
||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50">
|
||
<div className="bg-white rounded-lg p-6 w-full max-w-md max-h-[90vh] overflow-y-auto">
|
||
<h2 className="text-xl font-bold mb-4">批量导入配件</h2>
|
||
|
||
<div className="mb-4">
|
||
<label className="block text-sm font-medium text-gray-700">选择文件</label>
|
||
<input
|
||
type="file"
|
||
onChange={handleFileChange}
|
||
accept=".json,.csv"
|
||
className="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2"
|
||
/>
|
||
</div>
|
||
|
||
{batchFile && (
|
||
<div className="mb-4">
|
||
<p className="text-sm text-gray-500">
|
||
已选择文件: <span className="font-medium">{batchFile.name}</span>
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className="mb-4">
|
||
<button
|
||
onClick={() => downloadTemplate('csv')}
|
||
className="mr-2 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 flex items-center gap-2"
|
||
>
|
||
<Download className="h-5 w-5" />
|
||
下载CSV模板
|
||
</button>
|
||
<button
|
||
onClick={() => downloadTemplate('json')}
|
||
className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 flex items-center gap-2"
|
||
>
|
||
<Download className="h-5 w-5" />
|
||
下载JSON模板
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex justify-end space-x-4">
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowBatchModal(false)}
|
||
className="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50"
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
onClick={handleBatchImport}
|
||
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center gap-2"
|
||
disabled={batchImportLoading}
|
||
>
|
||
{batchImportLoading ? (
|
||
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
|
||
) : (
|
||
<Upload className="h-5 w-5" />
|
||
)}
|
||
批量导入
|
||
</button>
|
||
</div>
|
||
|
||
{batchData.length > 0 && (
|
||
<div className="mt-4">
|
||
<h3 className="text-lg font-semibold mb-2">预览数据</h3>
|
||
<div className="bg-gray-100 p-4 rounded-md max-h-[300px] overflow-auto">
|
||
<table className="min-w-full divide-y divide-gray-200">
|
||
<thead className="bg-gray-50">
|
||
<tr>
|
||
{Object.keys(batchData[0]).map((key) => (
|
||
<th key={key} className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
{key}
|
||
</th>
|
||
))}
|
||
</tr>
|
||
</thead> <tbody className="bg-white divide-y divide-gray-200">
|
||
{batchData.map((item, index) => (
|
||
<tr key={index}>
|
||
{Object.values(item).map((value, i) => (
|
||
<td key={i} className="px-4 py-2 whitespace-nowrap text-sm text-gray-900">
|
||
{String(value || '')}
|
||
</td>
|
||
))}
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default withAdminAuth(AdminComponentsPage)
|