From 826973f42a96dd852bcde6ba0c2eb27186006d0f Mon Sep 17 00:00:00 2001
From: Agent <agent@openclaw.ai>
Date: Wed, 1 Apr 2026 15:01:29 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=95=86=E5=93=81=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=88=86=E7=B1=BB=E4=BE=A7=E6=A0=8F=EF=BC=8C?=
 =?UTF-8?q?=E5=95=86=E5=93=81=E5=8D=A1=E7=89=87=E6=98=BE=E7=A4=BA=E5=88=86?=
 =?UTF-8?q?=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/product/manage.vue | 198 +++++++++++++++++++++++++++--------
 1 file changed, 156 insertions(+), 42 deletions(-)

diff --git a/src/pages/product/manage.vue b/src/pages/product/manage.vue
index 6e3b9ed..55f51f0 100644
--- a/src/pages/product/manage.vue
+++ b/src/pages/product/manage.vue
@@ -1,51 +1,70 @@
 <template>
   <view class="page">
     <!-- 搜索栏 -->
-    <view class="search-bar">
-      <input 
-        class="search-input" 
-        v-model="keyword" 
-        placeholder="搜索商品名称" 
-        @confirm="search"
-      />
-      <button class="search-btn" @click="search">搜索</button>
-      <button class="add-btn" @click="addProduct">+</button>
+    <view class="search-section">
+      <view class="search-bar">
+        <input 
+          class="search-input" 
+          v-model="keyword" 
+          placeholder="搜索商品名称" 
+          @confirm="search"
+        />
+        <button class="add-btn" @click="addProduct">+</button>
+      </view>
     </view>
 
-    <!-- 商品列表 -->
-    <view class="product-list">
-      <view 
-        v-for="item in products" 
-        :key="item.productId" 
-        class="product-item"
-      >
-        <view class="product-info" @click="editProduct(item)">
-          <text class="product-name">{{ item.name }}</text>
-          <text class="product-spec">{{ item.spec || '-' }}</text>
-          <view class="product-price">
-            <text class="price">¥{{ item.price }}</text>
-            <text class="unit">/{{ item.unit }}</text>
+    <!-- 分类侧栏 + 商品列表 -->
+    <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>
+
+      <!-- 右侧商品列表 -->
+      <scroll-view scroll-y class="product-scroll">
+        <view class="product-list">
+          <view 
+            v-for="item in productList" 
+            :key="item.productId" 
+            class="product-item"
+          >
+            <view class="product-info" @click="editProduct(item)">
+              <view class="product-header">
+                <text class="product-name">{{ item.name }}</text>
+                <text class="product-category" v-if="item.categoryName">{{ item.categoryName }}</text>
+              </view>
+              <text class="product-spec">{{ item.spec || '-' }}</text>
+              <view class="product-price">
+                <text class="price">¥{{ item.price }}</text>
+                <text class="unit">/{{ item.unit }}</text>
+              </view>
+              <view class="product-status">
+                <text :class="['status', item.status === 1 ? 'on' : 'off']">
+                  {{ item.status === 1 ? '上架' : '下架' }}
+                </text>
+              </view>
+            </view>
+            <view class="product-actions">
+              <view class="action-btn" @click="toggleStatus(item)">
+                {{ item.status === 1 ? '下架' : '上架' }}
+              </view>
+              <view class="action-btn delete" @click="deleteProduct(item)">
+                删除
+              </view>
+            </view>
           </view>
-          <view class="product-status">
-            <text :class="['status', item.status === 1 ? 'on' : 'off']">
-              {{ item.status === 1 ? '上架' : '下架' }}
-            </text>
+          
+          <!-- 空状态 -->
+          <view v-if="productList.length === 0" class="empty">
+            <text>暂无商品</text>
           </view>
         </view>
-        <view class="product-actions">
-          <view class="action-btn" @click="toggleStatus(item)">
-            {{ item.status === 1 ? '下架' : '上架' }}
-          </view>
-          <view class="action-btn delete" @click="deleteProduct(item)">
-            删除
-          </view>
-        </view>
-      </view>
-      
-      <!-- 空状态 -->
-      <view v-if="products.length === 0" class="empty">
-        <text>暂无商品</text>
-      </view>
+      </scroll-view>
     </view>
 
     <!-- 商品表单弹窗 -->
@@ -119,7 +138,8 @@ export default {
   data() {
     return {
       keyword: '',
-      products: [],
+      categoryId: '',
+      productList: [],
       categories: [],
       showModal: false,
       isEdit: false,
@@ -176,14 +196,19 @@ export default {
       try {
         const res = await productApi.getProducts({
           keyword: this.keyword,
+          categoryId: this.categoryId,
           page: 1,
           pageSize: 100
         })
-        this.products = res.records || []
+        this.productList = res.records || []
       } catch (e) {
         console.error(e)
       }
     },
+    selectCategory(id) {
+      this.categoryId = id
+      this.loadProducts()
+    },
     search() {
       this.loadProducts()
     },
@@ -292,6 +317,81 @@ export default {
 
 <style>
 .page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+/* 搜索区域 */
+.search-section {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20rpx;
+}
+
+.search-bar {
+  display: flex;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 50rpx;
+  padding: 0 20rpx;
+  height: 70rpx;
+}
+
+.search-input {
+  flex: 1;
+  font-size: 28rpx;
+  color: #333;
+}
+
+.add-btn {
+  width: 60rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+  background: #3cc51f;
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  font-size: 36rpx;
+  margin-left: 16rpx;
+}
+
+/* 内容区域：侧栏+列表 */
+.content-wrapper {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* 分类侧栏 */
+.category-sidebar {
+  width: 160rpx;
+  background: #fff;
+  flex-shrink: 0;
+  border-right: 1rpx solid #eee;
+}
+
+.category-item {
+  padding: 28rpx 16rpx;
+  font-size: 26rpx;
+  color: #666;
+  text-align: center;
+  border-left: 6rpx solid transparent;
+}
+
+.category-item.active {
+  background: #f8f9fa;
+  color: #667eea;
+  font-weight: bold;
+  border-left-color: #667eea;
+}
+
+/* 商品列表 */
+.product-scroll {
+  flex: 1;
+  background: #f8f9fa;
+}
+
+.product-list {
   padding: 20rpx;
 }
 
@@ -355,6 +455,20 @@ export default {
   display: block;
 }
 
+.product-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.product-category {
+  font-size: 22rpx;
+  color: #667eea;
+  background: #f0f0ff;
+  padding: 4rpx 12rpx;
+  border-radius: 4rpx;
+}
+
 .product-spec {
   font-size: 24rpx;
   color: #999;