feat(product): 实现商品管理与详情展示功能

- 新增商品相关API接口封装，包括创建、查询、上传图片等功能
- 实现商品详情页面，支持多货币SKU选择与图片预览
- 实现商品管理页面，展示商品列表与链接复制功能
- 添加商品状态标签与销售地区展示
- 实现购买确认弹窗与订单跳转逻辑
- 添加响应式布局适配移动端展示
- 集成Element Plus组件库实现UI交互效果

src/api/product.js

@@ -0,0 +1,67 @@
+import request from './request'
+
+/**
+ * 创建商品
+ */
+export function createProduct(data) {
+  return request({
+    url: '/product',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 获取商品详情（通过商品ID或链接码）
+ */
+export function getProduct(id) {
+  return request({
+    url: `/product/${id}`,
+    method: 'get'
+  })
+}
+
+/**
+ * 根据链接码获取商品详情
+ */
+export function getProductByLinkCode(linkCode) {
+  return request({
+    url: `/product/link/${linkCode}`,
+    method: 'get'
+  })
+}
+
+/**
+ * 获取商品列表
+ */
+export function getProductList() {
+  return request({
+    url: '/product/list',
+    method: 'get'
+  })
+}
+
+/**
+ * 获取商品URL
+ */
+export function getProductUrl(id) {
+  return request({
+    url: `/product/${id}/url`,
+    method: 'get'
+  })
+}
+
+/**
+ * 上传商品图片
+ */
+export function uploadProductImage(file) {
+  const formData = new FormData()
+  formData.append('file', file)
+  
+  return request({
+    url: '/product/upload/image',
+    method: 'post',
+    data: formData
+    // 注意：不设置 Content-Type，让浏览器自动设置（包含 boundary）
+  })
+}

src/views/ProductManage.vue

@@ -0,0 +1,360 @@
+<template>
+  <div class="product-manage">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <span>商品管理</span>
+          <el-button type="primary" @click="goToCreate">
+            <el-icon><Plus /></el-icon>
+            新增商品
+          </el-button>
+        </div>
+      </template>
+
+      <!-- 商品列表 -->
+      <el-table :data="productList" v-loading="loading" style="width: 100%">
+        <!-- 商品封面图 -->
+        <el-table-column label="商品封面" width="120" align="center">
+          <template #default="{ row }">
+            <el-image
+              v-if="getFirstMainImage(row)"
+              :src="getFirstMainImage(row)"
+              style="width: 80px; height: 80px; border-radius: 4px"
+              fit="cover"
+              :preview-src-list="row.mainImages || [row.mainImage]"
+              :initial-index="0"
+            />
+            <span v-else class="no-image">无图片</span>
+          </template>
+        </el-table-column>
+        
+        <!-- 商品名称（名称下方附带商品Id） -->
+        <el-table-column label="商品名称" min-width="250">
+          <template #default="{ row }">
+            <div class="product-name-cell">
+              <div class="product-name">{{ row.name }}</div>
+              <div class="product-id">商品ID: {{ row.id }}</div>
+            </div>
+          </template>
+        </el-table-column>
+        
+        <!-- 商品链接 -->
+        <el-table-column label="商品链接" min-width="300">
+          <template #default="{ row }">
+            <div class="product-url-cell">
+              <el-input
+                v-model="row.productUrl"
+                readonly
+                size="small"
+                style="width: 100%"
+              >
+                <template #append>
+                  <el-button
+                    type="primary"
+                    size="small"
+                    @click="copyProductUrl(row.id, row.productUrl)"
+                  >
+                    复制
+                  </el-button>
+                </template>
+              </el-input>
+            </div>
+          </template>
+        </el-table-column>
+        
+        <!-- 商品价格 -->
+        <el-table-column label="商品价格" width="150" align="center">
+          <template #default="{ row }">
+            <div class="price-cell">
+              <span class="price-value">{{ formatPrice(row.price) }}</span>
+              <span class="price-currency">CNY</span>
+            </div>
+          </template>
+        </el-table-column>
+        
+        <!-- 商品状态 -->
+        <el-table-column label="商品状态" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.status === 'ACTIVE' ? 'success' : 'info'" size="small">
+              {{ row.status === 'ACTIVE' ? '上架' : '下架' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        
+        <!-- 发售地区 -->
+        <el-table-column label="发售地区" width="200">
+          <template #default="{ row }">
+            <div class="sales-regions-cell">
+              <el-tag
+                v-for="region in getSalesRegions(row)"
+                :key="region.code"
+                size="small"
+                style="margin-right: 5px; margin-bottom: 5px"
+              >
+                {{ region.name }}
+              </el-tag>
+              <span v-if="!getSalesRegions(row) || getSalesRegions(row).length === 0" class="no-region">
+                未设置
+              </span>
+            </div>
+          </template>
+        </el-table-column>
+        
+        <!-- 操作 -->
+        <el-table-column label="操作" width="200" fixed="right" align="center">
+          <template #default="{ row }">
+            <el-button type="primary" link size="small" @click="editProduct(row.id)">
+              修改
+            </el-button>
+            <el-button type="success" link size="small" @click="copyProductUrl(row.id, row.productUrl)">
+              复制
+            </el-button>
+            <el-button type="danger" link size="small" @click="deleteProduct(row.id)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import { getProductList, getProductUrl } from '../api/product'
+import { formatAmount } from '../utils/helpers'
+
+const router = useRouter()
+const loading = ref(false)
+const productList = ref([])
+
+// 跳转到新增商品页面
+const goToCreate = () => {
+  router.push('/manage/product/create')
+}
+
+// 格式化价格
+const formatPrice = (price) => {
+  return formatAmount(price)
+}
+
+// 货币到销售地区的映射
+const currencyToRegionMap = {
+  'MYR': { code: 'MY', name: '马来西亚' },
+  'PHP': { code: 'PH', name: '菲律宾' },
+  'THB': { code: 'TH', name: '泰国' },
+  'VND': { code: 'VN', name: '越南' },
+  'SGD': { code: 'SG', name: '新加坡' },
+  'CNY': { code: 'CN', name: '中国' },
+  'USD': { code: 'US', name: '美国' },
+  'EUR': { code: 'EU', name: '欧洲' },
+  'GBP': { code: 'GB', name: '英国' }
+}
+
+// 获取第一张主图
+const getFirstMainImage = (row) => {
+  if (row.mainImages && row.mainImages.length > 0) {
+    return row.mainImages[0]
+  }
+  return row.mainImage || null
+}
+
+// 获取销售地区（从SKU的currency中提取）
+const getSalesRegions = (row) => {
+  if (!row.skus || row.skus.length === 0) {
+    return []
+  }
+  
+  // 从SKU中提取所有不同的货币
+  const currencies = [...new Set(row.skus.map(sku => sku.currency).filter(Boolean))]
+  
+  // 映射到销售地区
+  const regions = currencies
+    .map(currency => currencyToRegionMap[currency])
+    .filter(Boolean)
+  
+  return regions
+}
+
+// 加载商品列表
+const loadProductList = async () => {
+  loading.value = true
+  try {
+    const response = await getProductList()
+    if (response.code === '0000' && response.data) {
+      // 为每个商品获取链接URL
+      const productsWithUrl = await Promise.all(
+        response.data.map(async (product) => {
+          try {
+            const urlResponse = await getProductUrl(product.id)
+            if (urlResponse.code === '0000' && urlResponse.data && urlResponse.data.url) {
+              product.productUrl = urlResponse.data.url
+            } else {
+              product.productUrl = ''
+            }
+          } catch (error) {
+            console.error(`获取商品${product.id}链接失败:`, error)
+            product.productUrl = ''
+          }
+          return product
+        })
+      )
+      productList.value = productsWithUrl
+    } else {
+      ElMessage.error(response.message || '获取商品列表失败')
+      productList.value = []
+    }
+  } catch (error) {
+    console.error('加载商品列表失败:', error)
+    ElMessage.error('加载商品列表失败')
+    productList.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+// 编辑商品
+const editProduct = (id) => {
+  // TODO: 实现编辑功能，跳转到编辑页面
+  ElMessage.info('编辑功能待实现')
+  // router.push(`/manage/product/edit/${id}`)
+}
+
+// 复制商品链接
+const copyProductUrl = async (id, url) => {
+  try {
+    let urlToCopy = url
+    // 如果没有URL，先获取
+    if (!urlToCopy) {
+      const response = await getProductUrl(id)
+      if (response.code === '0000' && response.data && response.data.url) {
+        urlToCopy = response.data.url
+        // 更新列表中的URL
+        const product = productList.value.find(p => p.id === id)
+        if (product) {
+          product.productUrl = urlToCopy
+        }
+      } else {
+        ElMessage.error('获取商品链接失败')
+        return
+      }
+    }
+    
+    // 复制到剪贴板
+    await navigator.clipboard.writeText(urlToCopy)
+    ElMessage.success('商品链接已复制到剪贴板')
+  } catch (error) {
+    console.error('复制商品链接失败:', error)
+    ElMessage.error('复制商品链接失败')
+  }
+}
+
+// 删除商品
+const deleteProduct = async (id) => {
+  try {
+    await ElMessageBox.confirm('确定要删除该商品吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+    
+    // TODO: 实现删除商品API
+    ElMessage.info('删除功能待实现')
+    // await request.delete(`/api/product/${id}`)
+    // ElMessage.success('商品删除成功')
+    // loadProductList()
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除商品失败:', error)
+      ElMessage.error('删除商品失败')
+    }
+  }
+}
+
+onMounted(() => {
+  console.log('ProductManage 组件已挂载')
+  loadProductList()
+})
+</script>
+
+<style scoped>
+.product-manage {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+/* 商品名称单元格 */
+.product-name-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.product-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+  line-height: 1.5;
+}
+
+.product-id {
+  font-size: 12px;
+  color: #909399;
+}
+
+/* 商品链接单元格 */
+.product-url-cell {
+  width: 100%;
+}
+
+/* 价格单元格 */
+.price-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+}
+
+.price-value {
+  font-size: 16px;
+  font-weight: 600;
+  color: #f56c6c;
+}
+
+.price-currency {
+  font-size: 12px;
+  color: #909399;
+}
+
+/* 销售地区单元格 */
+.sales-regions-cell {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.no-region {
+  color: #c0c4cc;
+  font-size: 12px;
+}
+
+/* 无图片 */
+.no-image {
+  color: #c0c4cc;
+  font-size: 12px;
+}
+</style>
+