feat(product): 新增商品创建页面

- 添加商品创建表单，支持商品基本信息录入
- 实现多图片上传功能，支持主图和SKU图片上传
- 添加SKU配置模块，支持多个SKU的添加和管理
- 实现销售地区选择功能，支持多地区价格设置
- 添加物流信息配置，包括重量和尺寸设置
- 实现批量编辑功能，支持批量设置价格和库存
- 添加表单验证和提交逻辑，确保数据完整性
- 集成API接口，实现商品创建功能
- 添加页面路由配置，支持从商品管理页面跳转

PRODUCT_DETAIL.md

@@ -0,0 +1,130 @@
+# 商品详情页说明
+
+## 页面功能
+
+### 1. 商品展示区域
+- **左侧大图**：支持点击放大预览
+- **缩略图列表**：点击切换主图
+- **图片预览**：Element Plus图片预览功能
+
+### 2. 商品信息区域
+- **商品标题**：大字体，醒目展示
+- **商品副标题**：补充说明信息
+- **价格展示**：
+  - 现价（大字体，红色高亮）
+  - 原价（删除线，灰色）
+  - 节省金额提示
+
+### 3. 规格选择
+- **多规格支持**：颜色、尺寸等
+- **可视化选择**：标签式选择，选中高亮
+- **必选验证**：支付前验证所有规格已选择
+
+### 4. 数量选择
+- **数量输入框**：支持增减
+- **库存显示**：实时显示库存信息
+- **库存限制**：超过库存时禁用
+
+### 5. 服务保障
+- **7天无理由退货**
+- **正品保证**
+- **极速发货**
+
+### 6. 操作按钮
+- **立即购买**：橙色渐变按钮
+- **立即支付**：红色渐变按钮（主要支付按钮）
+- **悬停效果**：按钮有阴影和上浮动画
+
+### 7. 商品详情标签页
+- **商品详情**：HTML格式的商品描述
+- **规格参数**：表格形式展示参数
+- **用户评价**：评价列表展示
+
+## 样式特点
+
+### 参考主流电商设计
+1. **价格突出**：大字体、红色、渐变背景
+2. **图片展示**：大图+缩略图，支持预览
+3. **按钮设计**：渐变背景、阴影效果、悬停动画
+4. **卡片布局**：圆角、阴影、层次分明
+5. **响应式设计**：移动端自适应
+
+### 颜色方案
+- **主色调**：红色系（#f56c6c, #ff4757）
+- **辅助色**：橙色系（#ff9500, #ff6b00）
+- **背景色**：浅灰色（#f5f7fa）
+- **文字色**：深灰色（#333, #666）
+
+## 支付流程
+
+1. 用户选择商品规格和数量
+2. 点击"立即支付"按钮
+3. 系统自动生成订单号
+4. 调用后端API创建支付订单
+5. 跳转到收银台页面完成支付
+
+## 数据格式
+
+### 商品数据结构
+```javascript
+{
+  id: '1',
+  name: '商品名称',
+  subtitle: '商品副标题',
+  price: 20.00,
+  originalPrice: 25.00,
+  currency: 'USD',
+  stock: 100,
+  images: ['图片URL数组'],
+  specs: [
+    {
+      name: '规格名称',
+      options: [
+        { label: '选项标签', value: '选项值' }
+      ]
+    }
+  ],
+  description: 'HTML格式的商品描述',
+  params: [
+    { name: '参数名', value: '参数值' }
+  ],
+  reviews: [
+    {
+      user: '用户名',
+      rating: 5,
+      date: '日期',
+      content: '评价内容'
+    }
+  ]
+}
+```
+
+## 路由配置
+
+- **路径**：`/` 或 `/product/:id`
+- **组件**：`ProductDetail.vue`
+- **参数**：`id` - 商品ID（可选）
+
+## 使用示例
+
+### 访问商品详情页
+```
+http://localhost:3000/
+http://localhost:3000/product/1
+```
+
+### 从其他页面跳转
+```javascript
+router.push('/product/1')
+router.push({ path: '/product', params: { id: '1' } })
+```
+
+## 扩展建议
+
+1. **商品列表页**：创建商品列表，点击跳转到详情页
+2. **购物车功能**：添加购物车按钮和功能
+3. **商品推荐**：在详情页下方展示相关商品
+4. **图片轮播**：主图支持自动轮播
+5. **视频展示**：支持商品视频播放
+6. **分享功能**：添加商品分享功能
+