feat: fix CommonPopup nesting use and fix some style problem

src/components/UploadCover/index.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 import { Image, View, Text } from '@tarojs/components'
 import img from '../../config/images'
-import UploadSourcePopup from './upload-source-popup'
+import UploadSourcePopup, { sourceMap } from './upload-source-popup'
 import UploadFromWx from './upload-from-wx'
 import { CommonPopup } from '../'
 
@@ -58,6 +58,9 @@ export default function UploadCover(props: UploadCoverProps) {
   } = props
 
   const [visible, setVisible] = useState(false)
+  const uploadSourcePopupRef = useRef<{
+    show: (sourceType: sourceType, maxCount: number) => void
+  }>(null)
 
   const onAdd = useCallback((images: CoverImageValue[]) => {
     // FIXME: prev is not latest value
@@ -86,6 +89,7 @@ export default function UploadCover(props: UploadCoverProps) {
         round
         position="bottom"
         hideFooter
+        zIndex={1000}
       >
         <View className="upload-source-popup-container" style={{ height: source.length * 56 + 52 + 'px' }}>
           {
@@ -96,7 +100,9 @@ export default function UploadCover(props: UploadCoverProps) {
                     item === 'album' ? (
                       <UploadFromWx onAdd={onWxAdd} maxCount={maxCount - value.length} />
                     ) : (
-                      <UploadSourcePopup sourceType={item} onAdd={onAdd} maxCount={maxCount - value.length} />
+                      <View className="upload-source-popup-item-text" onClick={() => uploadSourcePopupRef.current?.show(item, maxCount - value.length)}>
+                        <Text>{sourceMap.get(item)}</Text>
+                      </View>
                     )
                   }
                 </View>
@@ -105,6 +111,7 @@ export default function UploadCover(props: UploadCoverProps) {
           }
         </View>
       </CommonPopup>
+      <UploadSourcePopup ref={uploadSourcePopupRef} onAdd={onAdd} />
       <div className={`upload-cover-root ${value.length === 0 && align === 'center' ? 'upload-cover-act-center' : ''}`}>
         {value.length < maxCount && (
           <div className="upload-cover-act" onClick={() => setVisible(true)}>