From 82704b61bcd42c0c974a97d76020538a9c7f5578 Mon Sep 17 00:00:00 2001
From: dzq <dzq@ys.com>
Date: Sat, 1 Nov 2025 16:41:52 +0800
Subject: [PATCH] =?UTF-8?q?refactor(product-container):=20=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E5=95=86=E5=93=81=E5=AE=B9=E5=99=A8=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=B9=B6=E6=B7=BB=E5=8A=A0=E6=96=87=E6=A1=A3=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构商品过滤逻辑，将过滤函数改为计算属性
为所有方法添加详细的JSDoc注释
修复商品列表项的key使用cellId替代id
---
 .../index/components/product-container.vue    | 51 ++++++++++++++-----
 1 file changed, 38 insertions(+), 13 deletions(-)

diff --git a/src/pages/index/components/product-container.vue b/src/pages/index/components/product-container.vue
index 69c5708..1a8f04d 100644
--- a/src/pages/index/components/product-container.vue
+++ b/src/pages/index/components/product-container.vue
@@ -40,43 +40,68 @@ const showCartPopup = ref<boolean>(false)
 
 const searchQuery = ref<string>('')
 
-// 点击分类导航
+/**
+ * 处理分类导航点击事件
+ * @param index - 被点击的分类索引
+ */
 function handleCategoryClick(index: number) {
   activeCategory.value = index
 }
 
-// 打开商品详情弹窗
+/**
+ * 打开商品详情弹窗
+ * @param productId - 要显示详情的商品ID
+ */
 function showProductDetail(productId: number) {
   currentProductId.value = productId
   showDetailPopup.value = true
 }
 
+/**
+ * 处理添加商品到购物车
+ * @param product - 要添加到购物车的商品对象
+ */
 function handleAddToCart(product: any) {
   cartStore.addToCart(product)
 }
 
+/**
+ * 处理从购物车移除商品
+ * @param cellId - 要移除的商品格子ID
+ */
 function handleRemoveFromCart(cellId: number) {
   cartStore.removeFromCart(cellId)
 }
 
+/**
+ * 获取购物车中指定商品的数量
+ * @param cellId - 商品的格子ID
+ * @returns 购物车中该商品的数量，如果没有则返回0
+ */
 function getCartItemCount(cellId: number) {
   const item = cartItems.value.find(item => item.product.cellId === cellId)
   return item ? item.quantity : 0
 }
 
-function filterProductsByName(products: any[], query: string) {
-  if (!query) return products
-  return products.filter(p =>
-    p.name.toLowerCase().includes(query.toLowerCase())
-  )
-}
-
+/**
+ * 计算当前显示的商品列表
+ * 根据选中的分类和搜索查询条件过滤商品
+ */
 const currentProducts = computed(() => {
-  const filteredByCategory = categories.value.filter(c => c.label === labels.value[activeCategory.value]?.id)
-  return filterProductsByName(filteredByCategory, searchQuery.value)
+  // 先按分类过滤
+  const filteredByCategory = categories.value.filter(c => c.label === labels.value[activeCategory.value]?.id);
+  
+  // 再按搜索查询过滤
+  if (!searchQuery.value) return filteredByCategory;
+  return filteredByCategory.filter(p =>
+    p.name.toLowerCase().includes(searchQuery.value.trim().toLowerCase())
+  );
 })
 
-// 结算方法
+/**
+ * 处理结算操作
+ * 触发checkout事件，通知父组件进行结算
+ */
 function handleCheckout() {
   emit('checkout')
 }
@@ -109,7 +134,7 @@ function handleCheckout() {
       </view>
 
       <view class="category-section">
-        <view v-for="product in currentProducts" :key="product.id" class="product-item">
+        <view v-for="product in currentProducts" :key="product.cellId" class="product-item">
           <view class="product-content">
             <view class="product-image-wrapper" @click.stop="showProductDetail(product.id)">
               <wd-img