+ {/* 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名）
+
+
+ 配件销量排行榜（前10名）
+
- {/* 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名）
-
-
-