feat(product): 添加商品管理分页功能并支持完整链接查询

- 添加分页组件支持，包括页码、页面大小切换功能
- 实现从完整URL中自动提取链接码的功能
- 更新查询表单提示文本为"请输入链接码或完整链接"
- 添加分页数据响应处理，显示总记录数和当前页码信息
- 增加分页相关的CSS样式适配移动端显示
- 重置查询时同步重置分页参数到默认值

src/views/ProductManage.vue

@@ -32,7 +32,7 @@
           <el-form-item label="链接码">
             <el-input
               v-model="queryForm.linkCode"
-              placeholder="请输入链接码"
+              placeholder="请输入链接码或完整链接"
               clearable
               style="width: 200px"
               @keyup.enter="handleQuery"
@@ -190,6 +190,19 @@
           </template>
         </el-table-column>
       </el-table>
+      
+      <!-- 分页组件 -->
+      <div class="pagination-container" v-if="pagination.total > 0">
+        <el-pagination
+          v-model:current-page="pagination.pageNum"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handlePageChange"
+        />
+      </div>
     </el-card>
 
   </div>
@@ -212,7 +225,16 @@ const queryForm = ref({
   name: '',
   linkCode: '',
   status: '',
-  salesRegion: ''
+  salesRegion: '',
+  pageNum: 1,
+  pageSize: 10
+})
+
+// 分页信息
+const pagination = ref({
+  pageNum: 1,
+  pageSize: 10,
+  total: 0
 })
 
 // 跳转到新增商品页面
@@ -268,6 +290,55 @@ const getSalesRegions = (row) => {
   return regions
 }
 
+// 从完整URL中提取链接码
+const extractLinkCodeFromUrl = (input) => {
+  if (!input || !input.trim()) {
+    return input
+  }
+  
+  const trimmed = input.trim()
+  
+  // 如果包含 "/product/"，说明是完整URL，提取链接码
+  const productIndex = trimmed.indexOf('/product/')
+  if (productIndex >= 0) {
+    let linkCode = trimmed.substring(productIndex + '/product/'.length)
+    // 移除可能的查询参数和锚点
+    const queryIndex = linkCode.indexOf('?')
+    if (queryIndex >= 0) {
+      linkCode = linkCode.substring(0, queryIndex)
+    }
+    const hashIndex = linkCode.indexOf('#')
+    if (hashIndex >= 0) {
+      linkCode = linkCode.substring(0, hashIndex)
+    }
+    // 移除尾部斜杠
+    linkCode = linkCode.replace(/\/$/, '')
+    return linkCode.trim()
+  }
+  
+  // 如果不包含 "/product/"，可能是直接输入的链接码，直接返回
+  // 但也可能是其他格式的URL，尝试提取最后一段作为链接码
+  if (trimmed.includes('/')) {
+    const parts = trimmed.split('/')
+    if (parts.length > 0) {
+      let lastPart = parts[parts.length - 1]
+      // 移除查询参数和锚点
+      const queryIndex = lastPart.indexOf('?')
+      if (queryIndex >= 0) {
+        lastPart = lastPart.substring(0, queryIndex)
+      }
+      const hashIndex = lastPart.indexOf('#')
+      if (hashIndex >= 0) {
+        lastPart = lastPart.substring(0, hashIndex)
+      }
+      return lastPart.trim()
+    }
+  }
+  
+  // 直接返回（可能是纯链接码）
+  return trimmed
+}
+
 // 加载商品列表（无查询条件）
 const loadProductList = async () => {
   loading.value = true
@@ -299,7 +370,9 @@ const handleQuery = async () => {
       query.name = queryForm.value.name.trim()
     }
     if (queryForm.value.linkCode && queryForm.value.linkCode.trim()) {
-      query.linkCode = queryForm.value.linkCode.trim()
+      // 自动从完整URL中提取链接码
+      const extractedLinkCode = extractLinkCodeFromUrl(queryForm.value.linkCode.trim())
+      query.linkCode = extractedLinkCode
     }
     if (queryForm.value.status) {
       query.status = queryForm.value.status
@@ -308,17 +381,29 @@ const handleQuery = async () => {
       query.salesRegion = queryForm.value.salesRegion
     }
     
+    // 添加分页参数
+    query.pageNum = pagination.value.pageNum
+    query.pageSize = pagination.value.pageSize
+    
     const response = await queryProducts(query)
     if (response.code === '0000' && response.data) {
-      productList.value = response.data
+      const pageResult = response.data
+      productList.value = pageResult.records || []
+      
+      // 更新分页信息
+      pagination.value.total = pageResult.total || 0
+      pagination.value.pageNum = pageResult.current || 1
+      pagination.value.pageSize = pageResult.size || 10
+      
       if (productList.value.length === 0) {
         ElMessage.info('未找到符合条件的商品')
       } else {
-        ElMessage.success(`查询到 ${productList.value.length} 条商品`)
+        ElMessage.success(`查询到 ${pagination.value.total} 条商品，当前第 ${pagination.value.pageNum} 页`)
       }
     } else {
       ElMessage.error(response.message || '查询商品列表失败')
       productList.value = []
+      pagination.value.total = 0
     }
   } catch (error) {
     console.error('查询商品列表失败:', error)
@@ -335,11 +420,31 @@ const handleReset = () => {
     name: '',
     linkCode: '',
     status: '',
-    salesRegion: ''
+    salesRegion: '',
+    pageNum: 1,
+    pageSize: 10
+  }
+  pagination.value = {
+    pageNum: 1,
+    pageSize: 10,
+    total: 0
   }
   loadProductList()
 }
 
+// 分页大小改变
+const handleSizeChange = (size) => {
+  pagination.value.pageSize = size
+  pagination.value.pageNum = 1 // 重置到第一页
+  handleQuery()
+}
+
+// 页码改变
+const handlePageChange = (page) => {
+  pagination.value.pageNum = page
+  handleQuery()
+}
+
 // 编辑商品
 const editProduct = (id) => {
   // TODO: 实现编辑功能，跳转到编辑页面
@@ -502,6 +607,24 @@ onMounted(() => {
   font-size: 12px;
 }
 
+/* 分页容器 */
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+  padding: 20px 0;
+}
+
+@media (max-width: 768px) {
+  .pagination-container {
+    justify-content: center;
+  }
+  
+  .pagination-container :deep(.el-pagination) {
+    flex-wrap: wrap;
+  }
+}
+
 /* 查询表单 */
 .search-card {
   margin-bottom: 20px;