优化商品列表页：分类筛选移至左侧垂直显示

src/pages/product/list.vue

@@ -3,7 +3,7 @@
     <!-- 搜索栏 -->
     <view class="search-section">
       <view class="search-bar">
-        <text class="search-icon">🔍</text>
+        <Icon name="search" :size="32" color="#999" />
         <input 
           class="search-input" 
           v-model="keyword" 
@@ -14,28 +14,31 @@
       </view>
     </view>
 
-    <!-- 分类筛选 -->
-    <scroll-view class="category-scroll" scroll-x>
-      <view 
-        class="category-item" 
-        :class="{ active: !categoryId }" 
-        @click="selectCategory('')"
-      >
-        全部
-      </view>
-      <view 
-        v-for="cat in categories" 
-        :key="cat.categoryId"
-        class="category-item"
-        :class="{ active: categoryId === cat.categoryId }"
-        @click="selectCategory(cat.categoryId)"
-      >
-        {{ cat.name }}
-      </view>
-    </scroll-view>
+    <!-- 分类筛选 + 商品列表 -->
+    <view class="content-wrapper">
+      <!-- 左侧分类 -->
+      <scroll-view scroll-y class="category-sidebar">
+        <view 
+          class="category-item" 
+          :class="{ active: !categoryId }" 
+          @click="selectCategory('')"
+        >
+          全部
+        </view>
+        <view 
+          v-for="cat in categories" 
+          :key="cat.categoryId"
+          class="category-item"
+          :class="{ active: categoryId === cat.categoryId }"
+          @click="selectCategory(cat.categoryId)"
+        >
+          {{ cat.name }}
+        </view>
+      </scroll-view>
 
-    <!-- 商品列表 -->
-    <view class="product-list">
+      <!-- 右侧商品列表 -->
+      <scroll-view scroll-y class="product-scroll">
+        <view class="product-list">
       <view 
         v-for="item in products" 
         :key="item.productId" 
@@ -192,28 +195,48 @@ export default {
   color: #999;
 }
 
-/* 分类筛选 */
-.category-scroll {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 20rpx 30rpx 40rpx;
-  white-space: nowrap;
+/* 左侧分类 + 右侧商品布局 */
+.content-wrapper {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* 左侧分类侧边栏 */
+.category-sidebar {
+  width: 180rpx;
+  background: #fff;
+  flex-shrink: 0;
 }
 
 .category-item {
-  display: inline-block;
-  padding: 14rpx 32rpx;
-  margin-right: 16rpx;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 30rpx;
+  padding: 28rpx 20rpx;
   font-size: 26rpx;
-  color: rgba(255, 255, 255, 0.8);
+  color: #666;
+  text-align: center;
+  border-left: 6rpx solid transparent;
   transition: all 0.3s;
 }
 
 .category-item.active {
-  background: #fff;
+  background: #f8f9fa;
   color: #667eea;
   font-weight: bold;
+  border-left-color: #667eea;
+}
+
+/* 右侧商品列表 */
+.product-scroll {
+  flex: 1;
+  height: calc(100vh - 180rpx);
+  background: #f8f9fa;
+}
+
+/* 右侧商品列表 */
+.product-scroll {
+  flex: 1;
+  height: calc(100vh - 180rpx);
+  background: #f8f9fa;
 }
 
 /* 商品列表 */