From 25459b98039c0ed1133637b88406c68101b2eda1 Mon Sep 17 00:00:00 2001
From: daiwanxing <david377099119@gmail.com>
Date: Sat, 13 Jul 2024 14:33:48 +0800
Subject: [PATCH 1/3] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=20popover=20?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA/=E9=9A=90=E8=97=8F=E8=BF=87=E6=B8=A1?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/__VUE/popover/index.scss     | 26 +++----
 src/packages/__VUE/popover/index.taro.vue | 94 +++++++++--------------
 2 files changed, 48 insertions(+), 72 deletions(-)

diff --git a/src/packages/__VUE/popover/index.scss b/src/packages/__VUE/popover/index.scss
index 233d6059ec..f43b8e2968 100644
--- a/src/packages/__VUE/popover/index.scss
+++ b/src/packages/__VUE/popover/index.scss
@@ -103,11 +103,21 @@
 
     &-group {
       display: block;
-      // position: relative;
       height: 100%;
       width: 100%;
     }
 
+    &-enter-from,
+    &-leave-to {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+
+    &-enter-active,
+    &-leave-active {
+      transition-timing-function: ease;
+    }
+
     .nut-popover-menu-item {
       display: flex;
       align-items: center;
@@ -226,20 +236,6 @@
   }
 }
 
-.nut-popover-enter-from,
-.nut-popover-leave-active {
-  transform: scale(0.8);
-  opacity: 0;
-}
-
-.nut-popover-enter-active {
-  transition-timing-function: ease-out;
-}
-
-.nut-popover-leave-active {
-  transition-timing-function: ease-in;
-}
-
 .nut-popover-content-bg {
   position: fixed;
   height: 100%;
diff --git a/src/packages/__VUE/popover/index.taro.vue b/src/packages/__VUE/popover/index.taro.vue
index 73b0f149de..d26cd98ee2 100644
--- a/src/packages/__VUE/popover/index.taro.vue
+++ b/src/packages/__VUE/popover/index.taro.vue
@@ -6,8 +6,7 @@
     class="nut-popover-wrapper"
     @click="openPopover"
   >
-    <slot name="reference"></slot
-    >
+    <slot name="reference"></slot>
   </view>
   <view :class="['nut-popover', `nut-popover--${theme}`, `${customClass}`]" :style="getRootPosition">
     <nut-popup
@@ -15,7 +14,7 @@
       :pop-class="`nut-popover-content nut-popover-content--${location}`"
       :style="{ background: bgColor }"
       position=""
-      transition="nut-popover"
+      transition="nut-popover-content"
       :overlay="overlay"
       :duration="duration"
       :overlay-style="overlayStyle"
@@ -41,9 +40,9 @@
   </view>
 </template>
 <script lang="ts">
-import { onMounted, computed, watch, ref, PropType, CSSProperties } from 'vue'
+import { onMounted, computed, watch, ref, PropType, CSSProperties, nextTick } from 'vue'
 import { createComponent, renderIcon } from '@/packages/utils/create'
-import { useTaroRect, useTaroRectById } from '@/packages/utils/useTaroRect'
+import { rectTaro, useTaroRect, useTaroRectById } from '@/packages/utils/useTaroRect'
 import { PopoverList, PopoverTheme, PopoverLocation, PopoverRootPosition } from './type'
 import NutPopup from '../popup/index.taro.vue'
 import Taro from '@tarojs/taro'
@@ -131,9 +130,7 @@ export default create({
     })
 
     const upperCaseFirst = (str: string) => {
-      str = str.toLowerCase()
-      str = str.replace(/\b\w+\b/g, word => word.substring(0, 1).toUpperCase() + word.substring(1))
-      return str
+      return str.toLowerCase().replace(/\b\w+\b/g, word => word.substring(0, 1).toUpperCase() + word.substring(1))
     }
 
     const getRootPosition = computed(() => {
@@ -194,73 +191,56 @@ export default create({
     })
 
     const getPopoverContentW = async () => {
-      useTaroRect(popoverContentRef).then(
-        (rect: { width: number, height: number }) => {
-          elRect.value = {
-            height: rect.height,
-            width: rect.width
-          }
-        },
-        () => {}
-      )
+      try {
+        const rect = await useTaroRect(popoverContentRef)
+        elRect.value = {
+          height: rect.height,
+          width: rect.width
+        }
+      } catch (error) {
+        console.warn('[NutUI] Failed to get rect:', error)
+      }
     }
 
     // 获取宽度
-    const getContentWidth = () => {
+    const getContentWidth = async () => {
+      getPopoverContentW()
       Taro.createSelectorQuery()
         .selectViewport()
-        .scrollOffset((res) => {
-          const distance = res.scrollTop
-
+        .scrollOffset(async (result) => {
+          const distance = result.scrollTop
           if (props.targetId) {
-            useTaroRectById(props.targetId).then(
-              (rect: any) => {
-                rootPosition.value = {
-                  width: rect?.width,
-                  height: rect?.height,
-                  left: rect?.left,
-                  top: rect?.top + distance,
-                  right: rect?.right
-                }
-              },
-              () => {}
-            )
+            const rect = (await useTaroRectById(props.targetId)) as rectTaro
+            rootPosition.value = {
+              width: rect?.width,
+              height: rect?.height,
+              left: rect?.left,
+              top: rect?.top + distance,
+              right: rect?.right
+            }
           } else {
-            useTaroRect(popoverRef).then(
-              (rect: any) => {
-                rootPosition.value = {
-                  width: rect?.width,
-                  height: rect?.height,
-                  left: rect?.left,
-                  top: rect?.top + distance,
-                  right: rect?.right
-                }
-              },
-              () => {}
-            )
+            const rect = await useTaroRect(popoverRef)
+            rootPosition.value = {
+              width: rect?.width,
+              height: rect?.height,
+              left: rect?.left,
+              top: rect?.top + distance,
+              right: rect?.right
+            }
           }
         })
         .exec()
-      setTimeout(() => {
-        getPopoverContentW()
-      }, 300)
     }
 
     onMounted(() => {
-      setTimeout(() => {
-        getContentWidth()
-      }, 300)
+      getContentWidth()
     })
 
     watch(
       () => props.visible,
-      (value) => {
+      async (value) => {
         showPopup.value = value
-        if (value) {
-          Taro.nextTick(() => {
-            getContentWidth()
-          })
-        }
+        if (value) nextTick(() => getContentWidth())
       }
     )
 

From 59d9fef1f0097363033492cf1bfbb61753bc65e3 Mon Sep 17 00:00:00 2001
From: daiwanxing <david377099119@gmail.com>
Date: Sat, 13 Jul 2024 14:52:41 +0800
Subject: [PATCH 2/3] =?UTF-8?q?chore:=20=E7=A7=BB=E9=99=A4=E4=B8=8D?=
 =?UTF-8?q?=E5=BF=85=E8=A6=81=E7=9A=84=E5=BC=82=E6=AD=A5=E5=87=BD=E6=95=B0?=
 =?UTF-8?q?=E5=A3=B0=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/__VUE/popover/index.taro.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/packages/__VUE/popover/index.taro.vue b/src/packages/__VUE/popover/index.taro.vue
index d26cd98ee2..dc9aa68e5e 100644
--- a/src/packages/__VUE/popover/index.taro.vue
+++ b/src/packages/__VUE/popover/index.taro.vue
@@ -238,7 +238,7 @@ export default create({
 
     watch(
       () => props.visible,
-      async (value) => {
+      (value) => {
         showPopup.value = value
         if (value) nextTick(() => getContentWidth())
       }

From d975eb9f075fbd55ae3e395302b1a7ba0b4324bd Mon Sep 17 00:00:00 2001
From: daiwanxing <david377099119@gmail.com>
Date: Wed, 17 Jul 2024 21:29:31 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E5=9C=BA=E6=99=AF=20popover=20=E5=AE=9E=E9=99=85=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93=E7=9A=84=E4=BD=8D=E7=BD=AE=E8=AE=A1=E7=AE=97=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/__VUE/popover/index.scss     |  2 +-
 src/packages/__VUE/popover/index.taro.vue | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/packages/__VUE/popover/index.scss b/src/packages/__VUE/popover/index.scss
index f43b8e2968..d97f8fcfe8 100644
--- a/src/packages/__VUE/popover/index.scss
+++ b/src/packages/__VUE/popover/index.scss
@@ -109,7 +109,7 @@
 
     &-enter-from,
     &-leave-to {
-      transform: scale(0.8);
+      transform: scale(var(--transform-scale));
       opacity: 0;
     }
 
diff --git a/src/packages/__VUE/popover/index.taro.vue b/src/packages/__VUE/popover/index.taro.vue
index dc9aa68e5e..87e4d2b7ae 100644
--- a/src/packages/__VUE/popover/index.taro.vue
+++ b/src/packages/__VUE/popover/index.taro.vue
@@ -12,7 +12,7 @@
     <nut-popup
       v-model:visible="showPopup"
       :pop-class="`nut-popover-content nut-popover-content--${location}`"
-      :style="{ background: bgColor }"
+      :style="{ background: bgColor, '--transform-scale': DEFAULT_SCALE_TRANSITION }"
       position=""
       transition="nut-popover-content"
       :overlay="overlay"
@@ -78,6 +78,8 @@ export default create({
 
     const rootPosition = ref<PopoverRootPosition>()
 
+    const DEFAULT_SCALE_TRANSITION = 0.8
+
     const elRect = ref({
       width: 0,
       height: 0
@@ -194,8 +196,8 @@ export default create({
       try {
         const rect = await useTaroRect(popoverContentRef)
         elRect.value = {
-          height: rect.height,
-          width: rect.width
+          height: rect.height / DEFAULT_SCALE_TRANSITION,
+          width: rect.width / DEFAULT_SCALE_TRANSITION
         }
       } catch (error) {
         console.warn('[NutUI] Failed to get rect:', error)
@@ -286,7 +288,8 @@ export default create({
       popoverArrowStyle,
       renderIcon,
       refRandomId,
-      clickAway
+      clickAway,
+      DEFAULT_SCALE_TRANSITION
     }
   }
 })