+ {/* Hero Section - 企业介绍 */}
+
+
+
+ {/* 配件分类展示 */}
+
+
+
+ )
+}
+```
+
+**页面功能特点：**
+1. **企业品牌展示**：渐变背景的Hero区域，突出品牌形象
+2. **配件分类展示**：按照CPU、内存、硬盘、主板、显卡、机箱分类展示
+3. **响应式设计**：适配桌面、平板、手机等多种设备
+4. **快速导航**：每个分类都有"查看更多"链接，方便用户深入浏览
+
+
+
+
+
+ + 欢迎来到PC DIY商城 +
++ 专业的电脑配件在线选购平台，让您轻松打造梦想主机 +
+
+
+ 热门配件
+ {componentTypes.map((type) => ( +
+
+ ))}
+
+
+ {type.name}
+ + 查看更多 → + +
+ {type.components.map((component) => (
+
+
+ {/* 搜索和筛选区域 */}
+
+ )
+}
+```
+
+**配件卡片组件实现：**
+```typescript
+// components/ComponentCard.tsx - 配件展示卡片
+export function ComponentCard({ component }: { component: Component }) {
+ return (
+
+
+
+ {/* 配件展示网格 */}
+
+ {/* 关键词搜索 */}
+
+
+
+
+ {/* 配件类型筛选 */}
+
+
+ {/* 价格区间筛选 */}
+ setFilters({...filters, minPrice: e.target.value})}
+ className="w-full px-3 py-2 border border-gray-300 rounded-md"
+ />
+ setFilters({...filters, maxPrice: e.target.value})}
+ className="w-full px-3 py-2 border border-gray-300 rounded-md"
+ />
+
+ {components.map((component) => (
+
+
+ {/* 分页控件 */}
+
+
+
+ )
+}
+```
+
+**搜索功能特点：**
+1. **多维度筛选**：支持类型、品牌、价格区间、关键词搜索
+2. **实时搜索**：用户输入时实时更新结果
+3. **分页展示**：大数据量的分页处理
+4. **响应式布局**：自适应网格布局系统
+
+
+
+
+ {component.imageUrl ? (
+ 
+ ) : (
+
+
+
+
+ )}
+
+
+
+
+ + {component.name} +
++ {component.brand} | {component.model} +
+
+
+ ¥{component.price.toFixed(2)}
+
+ 0 ? 'text-green-600' : 'text-red-600'}`}>
+ {component.stock > 0 ? `库存${component.stock}` : '缺货'}
+
+
+
+
+
+
+ )
+}
+```
+
+
+
+购物车
+ + {cartItems.length === 0 ? ( +
+
+ ) : (
+ 购物车是空的
+
+ {/* 购物车商品列表 */}
+
+ )}
+
+ {cartItems.map(item => (
+
+
+ {/* 订单摘要 */}
+
+
+ 订单摘要
+
+
+
+
+ 商品总价:
+ ¥{getTotalPrice().toFixed(2)}
+
+
+ 总计:
+ ¥{getTotalPrice().toFixed(2)}
+
+
+
+ )
+}
+```
+
+**装机配置特点：**
+1. **分类选择**：每种配件类型只能选择一个
+2. **实时预览**：显示已选配件和总价
+3. **进度跟踪**：可视化配置完成度
+4. **批量操作**：一键添加所有配件到购物车
+
+
+
+
+
+
+
+
+ PC装机配置
+选择每种配件，组装您的专属电脑
+ + {/* 配置进度 */} +
+
+
+ 配置进度
+ {getCompletionRate()}%
+
+
+
+
+
+ {/* 配件选择区域 */}
+
+
+
+
+ {/* 配置摘要 */}
+
+ {componentTypes.map((type) => {
+ const selectedComponent = buildConfig[type.name]
+ return (
+ selectComponent(type.name, component)}
+ onRemove={() => removeComponent(type.name)}
+ />
+ )
+ })}
+
+
+
+ 配置摘要
+
+ {componentTypes.map((type) => {
+ const component = buildConfig[type.name]
+ return (
+
+
+
+ {type.name}:
+
+ {component ? `¥${component.price}` : '未选择'}
+
+
+ )
+ })}
+
+
+
+
+ 总价:
+ ¥{getTotalPrice().toFixed(2)}
+
+
+
+
+
+
+ )
+}
+```
+
+
+
+
+ {/* 对话历史侧边栏 */}
+
+
+
+
+ setShowModal(false)}
+ onSubmit={handleSubmit}
+ />
+
+ {/* 批量导入预览 */}
+
+ )
+}
+
+export default withAdminAuth(AdminComponentsPage)
+```
+
+
+
+
+
+
+ {/* 配件列表 */}
+ 配件管理
+
+ {/* 导入按钮 */}
+
+
+
+
+
+
+
+ {/* 配件编辑模态框 */}
+ | + 配件信息 + | ++ 价格/库存 + | ++ 类型 + | ++ 操作 + | +
|---|
+
+ )
+}
+```
+
+
+
+统计分析
+ +
+ {/* 总体数据卡片 */}
+
+
+ {/* 图表区域 */}
+
+ {/* 用户消费排行榜 */}
+
+
+
+
+ {/* 配件销量排行榜 */}
+ 用户消费排行榜（前10名）
+
+
+