💄 style(category): 优化分类页面布局和滚动效果

- 修改CategorySidebar高度为100%并添加注释说明ScrollView滚动机制
- 调整category-page容器高度计算方式，使用calc(100vh - 280rpx)
- 为右侧内容区添加overflow-y: auto和iOS滚动优化

⚡️ perf(layout): 添加动态高度计算机制

- 在TabBarLayout中添加useEffect钩子动态设置tabbar高度CSS变量
- 在CategoryPage中添加动态计算导航栏和tabbar高度的逻辑
- 为CSS变量设置添加错误处理和默认值回退机制
- 使用document.documentElement设置CSS变量以实现全局样式控制

mini/src/components/category/CategorySidebar/CategorySidebar.css

@@ -1,7 +1,8 @@
 /* CategorySidebar 组件样式 */
 .category-sidebar {
   width: 176rpx;
-  height: 100vh;
+  height: 100%;
+  /* ScrollView组件自带滚动，这里不需要额外设置 */
 }
 
 .category-sidebar__content {

mini/src/layouts/tab-bar-layout.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React, { ReactNode, useEffect } from 'react'
 import { View } from '@tarojs/components'
 import { TabBar, TabBarItem } from '@/components/ui/tab-bar'
 import Taro from '@tarojs/taro'
@@ -40,6 +40,31 @@ export const TabBarLayout: React.FC<TabBarLayoutProps> = ({ children, activeKey
   const { cart } = useCart()
   const cartItemCount = cart.items.reduce((sum, item) => sum + item.quantity, 0)
 
+  // 动态设置tabbar高度
+  useEffect(() => {
+    const setTabBarHeight = () => {
+      try {
+        // 计算tabbar高度（通常为100rpx）
+        const tabbarHeightRpx = 100; // 标准tabbar高度
+
+        // 设置CSS变量
+        const rootElement = document.documentElement;
+        if (rootElement) {
+          rootElement.style.setProperty('--tabbar-height', `${tabbarHeightRpx}rpx`);
+        }
+      } catch (error) {
+        console.error('设置tabbar高度失败:', error);
+        // 使用默认值作为fallback
+        const rootElement = document.documentElement;
+        if (rootElement) {
+          rootElement.style.setProperty('--tabbar-height', '100rpx');
+        }
+      }
+    };
+
+    setTabBarHeight();
+  }, []);
+
   const handleTabChange = (key: string) => {
     // 使用 Taro 的导航 API 进行页面跳转
     switch (key) {

mini/src/pages/category/index.css

@@ -1,19 +1,27 @@
 /* 商品分类页面样式 */
+
+
 .category-page {
-  height: 100vh;
   background-color: #f5f5f5;
+  box-sizing: border-box;
+  position: relative;
+  height: calc(100vh - 280rpx);
+  overflow: hidden;
 }
 
 .category-container {
   display: flex;
-  height: 100%;
+  height:  calc(100vh - 280rpx);
+  min-height: 0;
+  overflow: hidden;
 }
 
 /* 左侧边栏容器 */
 .category-sidebar-container {
   width: 176rpx;
-  height: 100%;
+  height: calc(100vh - 280rpx);
   background-color: #f5f5f5;
+  overflow: hidden; 
 }
 
 /* 右侧内容区 */
@@ -22,6 +30,10 @@
   background-color: white;
   position: relative;
   padding: 20rpx;
+  overflow-y: auto;
+  min-height: 0;
+  box-sizing: border-box; /* 确保padding包含在高度内 */
+  -webkit-overflow-scrolling: touch; /* iOS滚动优化 */
 }
 
 /* 二级分类标签栏 */

mini/src/pages/category/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { View } from '@tarojs/components';
 import { useQuery } from '@tanstack/react-query';
 import { goodsCategoryClient, advertisementClient } from '@/api';
@@ -26,6 +26,40 @@ const CategoryPage: React.FC = () => {
   const [toastVisible, setToastVisible] = useState<boolean>(false);
   const [toastMessage, setToastMessage] = useState<string>('');
 
+  // 动态设置导航栏和tabbar高度
+  useEffect(() => {
+    const setDynamicHeights = () => {
+      try {
+        // 获取窗口信息
+        const windowInfo = Taro.getWindowInfo();
+
+        // 计算导航栏高度（状态栏高度 + 导航栏高度）
+        // 状态栏高度已经是rpx单位，导航栏高度通常为88rpx
+        const navbarHeightRpx = windowInfo.statusBarHeight + 88;
+
+        // 计算tabbar高度（通常为100rpx）
+        const tabbarHeightRpx = 100; // 标准tabbar高度
+
+        // 设置CSS变量
+        const rootElement = document.documentElement;
+        if (rootElement) {
+          rootElement.style.setProperty('--navbar-height', `${navbarHeightRpx}rpx`);
+          rootElement.style.setProperty('--tabbar-height', `${tabbarHeightRpx}rpx`);
+        }
+      } catch (error) {
+        console.error('设置动态高度失败:', error);
+        // 使用默认值作为fallback
+        const rootElement = document.documentElement;
+        if (rootElement) {
+          rootElement.style.setProperty('--navbar-height', '96rpx');
+          rootElement.style.setProperty('--tabbar-height', '100rpx');
+        }
+      }
+    };
+
+    setDynamicHeights();
+  }, []);
+
   // 获取分类数据
   const { data: categoryData, isLoading, error } = useQuery({
     queryKey: ['goods-categories'],