feat(knowledge-base): 添加产品列表点击跳转逻辑

- 为每个产品添加唯一 id 字段
- 使用 useListItemClick Composable 处理点击事件
- 配置 ListType.PRODUCT 自动跳转产品详情页
- 添加点击缩放反馈效果
- 完善代码注释（JSDoc）

点击产品卡片后跳转到 /pages/product-detail/index?id={productId}

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

@@ -25,7 +25,8 @@
       <div class="flex flex-wrap justify-between">
       <div class="flex flex-wrap justify-between">
         <!-- Card Item -->
         <!-- Card Item -->
         <div v-for="(item, index) in filteredProducts" :key="index"
         <div v-for="(item, index) in filteredProducts" :key="index"
-          class="w-[48%] bg-white rounded-[24rpx] overflow-hidden mb-[24rpx] shadow-sm flex flex-col">
+          class="w-[48%] bg-white rounded-[24rpx] overflow-hidden mb-[24rpx] shadow-sm flex flex-col active:scale-[0.98] transition-transform duration-200"
+          @tap="handleProductClick(item)">
           <!-- Image Container -->
           <!-- Image Container -->
           <div class="relative w-full h-[200rpx]">
           <div class="relative w-full h-[200rpx]">
             <img :src="item.image" class="w-full h-full object-cover bg-gray-100" referrerpolicy="no-referrer" />
             <img :src="item.image" class="w-full h-full object-cover bg-gray-100" referrerpolicy="no-referrer" />
@@ -61,34 +62,54 @@
 import { ref, computed } from 'vue'
 import { ref, computed } from 'vue'
 import NavHeader from '@/components/NavHeader.vue'
 import NavHeader from '@/components/NavHeader.vue'
 import TabBar from '@/components/TabBar.vue'
 import TabBar from '@/components/TabBar.vue'
+import { useListItemClick, ListType } from '@/composables/useListItemClick'
 
 
 const activeTab = ref(0)
 const activeTab = ref(0)
 const tabs = ['全部产品', '人寿保险', '医疗保险', '意外保险']
 const tabs = ['全部产品', '人寿保险', '医疗保险', '意外保险']
 
 
 /**
 /**
- * Mock Data Generation
- * @returns {Array} List of products
+ * 生成产品数据
+ *
+ * @description 生成模拟产品列表数据，每个产品包含唯一 id
+ * @returns {Array} 产品列表
  */
  */
 const generateProducts = () => {
 const generateProducts = () => {
   return [
   return [
-    { title: '终身寿险尊享版', tag: '热卖', desc: '5年超值', image: `https://picsum.photos/seed/1/200/200` },
-    { title: '百万医疗保险计划', desc: '收益率3.5%', image: `https://picsum.photos/seed/2/200/200` },
-    { title: '意外伤害保障计划', desc: '保证收益万能', image: `https://picsum.photos/seed/3/200/200` },
-    { title: '分红型年金保险', tag: '热卖', desc: '保证收益万能', image: `https://picsum.photos/seed/4/200/200` },
-    { title: '重大疾病保险', desc: '收益率4.2%', image: `https://picsum.photos/seed/5/200/200` },
-    { title: '少儿教育金保险', tag: '热卖', desc: '教育专属', image: `https://picsum.photos/seed/6/200/200` },
-    { title: '高端医疗服务', desc: '尊享服务', image: `https://picsum.photos/seed/7/200/200` },
-    { title: '家庭财产保险', desc: '全家无忧', image: `https://picsum.photos/seed/8/200/200` },
+    { id: 1, title: '终身寿险尊享版', tag: '热卖', desc: '5年超值', image: `https://picsum.photos/seed/1/200/200` },
+    { id: 2, title: '百万医疗保险计划', desc: '收益率3.5%', image: `https://picsum.photos/seed/2/200/200` },
+    { id: 3, title: '意外伤害保障计划', desc: '保证收益万能', image: `https://picsum.photos/seed/3/200/200` },
+    { id: 4, title: '分红型年金保险', tag: '热卖', desc: '保证收益万能', image: `https://picsum.photos/seed/4/200/200` },
+    { id: 5, title: '重大疾病保险', desc: '收益率4.2%', image: `https://picsum.photos/seed/5/200/200` },
+    { id: 6, title: '少儿教育金保险', tag: '热卖', desc: '教育专属', image: `https://picsum.photos/seed/6/200/200` },
+    { id: 7, title: '高端医疗服务', desc: '尊享服务', image: `https://picsum.photos/seed/7/200/200` },
+    { id: 8, title: '家庭财产保险', desc: '全家无忧', image: `https://picsum.photos/seed/8/200/200` },
   ]
   ]
 }
 }
 
 
 const products = ref(generateProducts())
 const products = ref(generateProducts())
 
 
+/**
+ * 根据当前标签筛选产品
+ *
+ * @description 根据选中的标签页筛选显示对应产品
+ */
 const filteredProducts = computed(() => {
 const filteredProducts = computed(() => {
   if (activeTab.value === 0) return products.value
   if (activeTab.value === 0) return products.value
   // Mock filtering
   // Mock filtering
   return products.value.filter((_, i) => (i + activeTab.value) % 2 === 0)
   return products.value.filter((_, i) => (i + activeTab.value) % 2 === 0)
 })
 })
+
+/**
+ * 使用产品列表点击处理器
+ *
+ * @description 配置为产品类型列表，点击时跳转到产品详情页
+ */
+const { handleClick: handleProductClick } = useListItemClick({
+  listType: ListType.PRODUCT,
+  onAfterClick: (item) => {
+    console.log('用户查看了产品:', item.title)
+  }
+})
 </script>
 </script>
 
 
 <style>
 <style>