feat(index): 实现热销商品Tabs粘性布局功能

- 引入Sticky组件实现Tabs吸顶效果
- 添加粘性状态变化回调通知父组件- 动态计算系统状态栏高度作为吸顶阈值-优化Tabs样式在粘性状态下的视觉表现
- 调整商品列表间距以适配新布局- 完善首页Header组件与Tabs粘性状态联动逻辑
- 移除useDidHide中的主题设置调用
- 初始化时设置应用主题配置

src/pages/index/index.tsx

@@ -15,6 +15,8 @@ import './index.scss'
 function Home() {
   // 吸顶状态
   const [stickyStatus, setStickyStatus] = useState<boolean>(false)
+  // Tabs粘性状态
+  const [tabsStickyStatus, setTabsStickyStatus] = useState<boolean>(false)
 
   useShareAppMessage(() => {
     // 获取当前用户ID，用于生成邀请链接
@@ -85,6 +87,11 @@ function Home() {
     }
   }
 
+  // 处理Tabs粘性状态变化
+  const handleTabsStickyChange = (isSticky: boolean) => {
+    setTabsStickyStatus(isSticky)
+  }
+
   const reload = () => {
 
   };
@@ -150,13 +157,19 @@ function Home() {
 
   return (
     <>
-      <Sticky threshold={0} onChange={() => onSticky(arguments)}>
-        <Header stickyStatus={stickyStatus}/>
-      </Sticky>
+      {/* Header区域 - 根据Tabs粘性状态决定是否固定 */}
+      {tabsStickyStatus ? (
+        <Sticky threshold={0}>
+          <Header stickyStatus={tabsStickyStatus}/>
+        </Sticky>
+      ) : (
+        <Header stickyStatus={tabsStickyStatus}/>
+      )}
+      
       <div className={'flex flex-col mt-12'}>
         <Menu/>
         <Banner/>
-        <BestSellers/>
+        <BestSellers onStickyChange={handleTabsStickyChange}/>
         {/*<GoodsList/>*/}
       </div>
     </>