v1

app/admin/components/page.tsx

@@ -0,0 +1,727 @@
+'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)