From f8ce079a4bce69cb3650253ee0b2dcf136197d80 Mon Sep 17 00:00:00 2001
From: Agent <agent@openclaw.ai>
Date: Thu, 26 Mar 2026 14:18:50 +0000
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=95=86=E5=93=81=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E9=A1=B5=EF=BC=9A=E5=88=86=E7=B1=BB=E7=AD=9B=E9=80=89?=
 =?UTF-8?q?=E7=A7=BB=E8=87=B3=E5=B7=A6=E4=BE=A7=E5=9E=82=E7=9B=B4=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/product/list.vue | 91 ++++++++++++++++++++++++--------------
 1 file changed, 57 insertions(+), 34 deletions(-)

diff --git a/src/pages/product/list.vue b/src/pages/product/list.vue
index e7b2baa..764089a 100644
--- a/src/pages/product/list.vue
+++ b/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;
 }
 
 /* 商品列表 */