feat: RootPortal popup

src/app.less

@@ -15,6 +15,33 @@
   --color-bg-primary: #F6F6F6;
   --color-bg-gray: #F6F6F6;
 }
+
+/* 确保变量定义在全局作用域 */
+page {
+  font-family: PingFang SC;
+  // 主题色
+  --color-primary: #317CFA;
+  --color-primary-rgb: 49, 124, 250;
+  --color-primary-light: rgba(49, 124, 250, 0.1);
+  --color-primary-dark: #1E6FF8;
+  --color-text-primary: #262626;
+  --color-bg-primary: #F6F6F6;
+  --color-bg-gray: #F6F6F6;
+}
+
+/* 为 RootPortal 容器单独定义变量 */
+.taro-portal-container {
+  --color-primary: #317CFA;
+  --color-primary-rgb: 49, 124, 250;
+  --color-primary-light: rgba(49, 124, 250, 0.1);
+  --color-primary-dark: #1E6FF8;
+  --color-text-primary: #262626;
+  --color-bg-primary: #F6F6F6;
+  --color-bg-gray: #F6F6F6;
+}
+.taro-portal-container-ztop{
+  z-index: 10000;
+}
 /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
 @font-face {
   font-family: 'font_family';  /* Project id 4668063 */

src/components/GlobalModal/index.tsx

@@ -1,6 +1,7 @@
 // components/GlobalModal.tsx
 import { useModalStore } from '@/store/modalStore';
 import WemetaModal from '@/components/WemetaModal'
+import { RootPortal } from '@tarojs/components';
 export function GlobalModal() {
   const { isVisible, config, onConfirm, onCancel } = useModalStore();
 
@@ -10,8 +11,10 @@ export function GlobalModal() {
   }
 
   return (
-    <WemetaModal show={isVisible} onConfirm={()=> onConfirm() } onCancel={()=> onCancel()} >
+    <RootPortal className={`taro-portal-container taro-portal-container-ztop`}>
+      <WemetaModal show={isVisible} onConfirm={()=> onConfirm() } onCancel={()=> onCancel()} >
         <>{config.content}</>
       </WemetaModal>
+      </RootPortal>
   );
 }

src/components/popup/popup-modal/index.tsx

@@ -11,7 +11,7 @@ export default ({title = '', show, setShow, children}:Props)=> {
   
   return <>
     {show && <View
-      className={style.popup}
+      className={`taro-portal-container ${style.popup}`}
     >
       <View className={`${style.container}`}>
         <View className={style.content}>

src/components/popup/popup-sheets/index.module.less

@@ -40,10 +40,10 @@
   font-weight: 500;
 }
 .bottomBorder{
-  border-bottom: 1px solid var(--color-bg-gray);
+  border-bottom: 1px solid #F6F6F6;
 }
 .bottomContainer{
-  border-top: 8px solid var(--color-bg-gray);
+  border-top: 8px solid #F6F6F6;
   padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
 	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
 }

src/components/popup/popup-sheets/index.tsx

@@ -1,4 +1,4 @@
-import { View } from "@tarojs/components";
+import { View, RootPortal } from "@tarojs/components";
 import style from "./index.module.less";
 import { useEffect, useState } from "react";
 import Taro from "@tarojs/taro";
@@ -28,6 +28,8 @@ export default ({ content, show, setShow }: Props) => {
         setSlideUp(show);
       }, 100);
       Taro.hideTabBar();
+    }else{
+      Taro.showTabBar();
     }
     
   }, [show]);
@@ -45,7 +47,10 @@ export default ({ content, show, setShow }: Props) => {
   return (
     <>
       {show && (
-        <View className={style.popup}>
+       <RootPortal>
+        <View
+          className={`taro-portal-container ${style.popup}`}
+          >
           <View className={`${style.container} ${slideUp ? style.show : ""}`}>
             <View className={style.content}>
               {content.map((data, index) => {
@@ -68,6 +73,7 @@ export default ({ content, show, setShow }: Props) => {
             </View>
           </View>
         </View>
+        </RootPortal>
       )}
     </>
   );

src/components/popup/popup/index.tsx

@@ -1,4 +1,4 @@
-import { View, Image } from "@tarojs/components"
+import { View, Image, RootPortal } from "@tarojs/components"
 import style from './index.module.less'
 import closeIcon from '@/images/icon-close-8.png';
 import { useEffect, useState } from "react";
@@ -31,8 +31,8 @@ export default ({title = '', showCloseButton = true, show, setShow, children}:Pr
   }, [show])
   
   return <>
-    {show && <View
-      className={style.popup}
+    {show && <RootPortal><View
+      className={`taro-portal-container ${style.popup}`}
     >
       <View className={`${style.container} ${slideUp ? style.show : ''}`}>
         <View className={style.titleBar}>
@@ -45,6 +45,6 @@ export default ({title = '', showCloseButton = true, show, setShow, children}:Pr
           {children}
         </View>
       </View>
-   </View>}
+   </View></RootPortal>}
   </>
 }

src/store/modalStore.ts

@@ -1,5 +1,4 @@
 // stores/modalStore.ts
-import { ReactElement } from 'react';
 import { create } from 'zustand';