fix(Guide): fixed component positioning errors in multiple scenarios (#3499)

Author: anlyyao

src/guide/guide.ts

@@ -90,13 +90,16 @@ export default class Guide extends SuperComponent {
         const highlightPadding = rpx2px(step.highlightPadding ?? this.data.highlightPadding);
         const referenceTop = rect.top - highlightPadding;
         const referenceRight = systemInfo.windowWidth - rect.right - highlightPadding;
-        const referenceBottom = systemInfo.windowHeight - rect.bottom - highlightPadding;
         const referenceLeft = rect.left - highlightPadding;
+        const referenceWidth = rect.width + 2 * highlightPadding;
+        const referenceHeight = rect.height + 2 * highlightPadding;
+
         const style = {
           top: `${referenceTop}px`,
           right: `${referenceRight}px`,
-          bottom: `${referenceBottom}px`,
           left: `${referenceLeft}px`,
+          width: `${referenceWidth}px`,
+          height: `${referenceHeight}px`,
         };
         this.setData({
           _steps: this.data.steps,
@@ -213,12 +216,11 @@ export default class Guide extends SuperComponent {
       const space = rpx2px(32);
       const offsetLeft = (offset) => unitConvert(isNumber(offset?.[0]) ? `${offset?.[0]}rpx` : offset?.[0] || 0);
       const offsetTop = (offset) => unitConvert(isNumber(offset?.[1]) ? `${offset?.[1]}rpx` : offset?.[1] || 0);
-      const bottom = (place) => parseFloat(place.bottom);
       const left = (place) => parseFloat(place.left);
       const right = (place) => parseFloat(place.right);
       const top = (place) => parseFloat(place.top);
-      const height = (place) => systemInfo.windowHeight - bottom(place) - top(place);
-      const width = (place) => systemInfo.windowWidth - left(place) - right(place);
+      const height = (place) => parseFloat(place.height);
+      const width = (place) => parseFloat(place.width);
       return {
         center: (rect, place, offset) => ({
           top: `${Math.max(height(place) + top(place) + space + offsetTop(offset), 1)}px`,
@@ -245,7 +247,7 @@ export default class Guide extends SuperComponent {
           right: `${Math.max(width(place) + right(place) + space - offsetLeft(offset), 1)}px`,
         }),
         'left-bottom': (rect, place, offset) => ({
-          bottom: `${Math.max(bottom(place) - offsetTop(offset), 1)}px`,
+          top: `${Math.max(top(place) + height(place) - rect.height - offsetTop(offset), 1)}px`,
           right: `${Math.max(width(place) + right(place) + space - offsetLeft(offset), 1)}px`,
         }),
         right: (rect, place, offset) => ({
@@ -257,19 +259,19 @@ export default class Guide extends SuperComponent {
           left: `${Math.max(left(place) + width(place) + space + offsetLeft(offset), 1)}px`,
         }),
         'right-bottom': (rect, place, offset) => ({
-          bottom: `${Math.max(bottom(place) - offsetTop(offset), 1)}px`,
+          top: `${Math.max(top(place) + height(place) - rect.height - offsetTop(offset), 1)}px`,
           left: `${Math.max(left(place) + width(place) + space + offsetLeft(offset), 1)}px`,
         }),
         top: (rect, place, offset) => ({
-          bottom: `${Math.max(height(place) + bottom(place) + space - offsetTop(offset), 1)}px`,
+          top: `${Math.max(top(place) - rect.height - space + offsetTop(offset), 1)}px`,
           left: `${Math.max(width(place) / 2 + left(place) - rect.width / 2 + offsetLeft(offset), 1)}px`,
         }),
         'top-left': (rect, place, offset) => ({
-          bottom: `${Math.max(height(place) + bottom(place) + space - offsetTop(offset), 1)}px`,
+          top: `${Math.max(top(place) - rect.height - space + offsetTop(offset), 1)}px`,
           left: `${Math.max(left(place) + offsetLeft(offset), 1)}px`,
         }),
         'top-right': (rect, place, offset) => ({
-          bottom: `${Math.max(height(place) + bottom(place) + space - offsetTop(offset), 1)}px`,
+          top: `${Math.max(top(place) - rect.height - space + offsetTop(offset), 1)}px`,
           right: `${Math.max(right(place) - offsetLeft(offset), 1)}px`,
         }),
       };