fix(tabs): 修复设置缩放后下划线显示不正常问题(#2937) (#2938)

* fix(tabs): 修复设置缩放后下划线显示不正常问题(#2937)

* chore(tabs): 生成变更记录文件

* chore(tabs): 修改变更记录文件

* feat: 重构getTabPos函数

---------

Co-authored-by: xiamiao <xiamiao@xiaomi.com>

.changeset/twenty-bears-draw.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+fix(tabs): 修复设置缩放后下划线显示不正常问题

.changeset/wicked-camels-add.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/tabs": patch
+---
+
+fix: 修复设置缩放后下划线显示不正常问题

packages/ui/tabs/src/TabInk.tsx

@@ -17,35 +17,39 @@ export const TabInk: React.FC<TabInkProps> = ({
     if (!activeItemElement) return
 
     const computedStyle = getComputedStyle(activeItemElement)
-    const itemRect = activeItemElement.getBoundingClientRect()
+    // issue: https://github.com/XiaoMi/hiui/issues/2937
+    // 当设置transform缩放后，getBoundingClientRect 获取的值不准确，所以这里使用offset
+    // const itemRect = activeItemElement.getBoundingClientRect()
     const offset = getTabOffset(activeTabId)
 
     let _style: React.CSSProperties
 
     if (!showHorizontal) {
       const paddingTop = parseFloat(computedStyle.getPropertyValue('padding-top'))
       const paddingBottom = parseFloat(computedStyle.getPropertyValue('padding-bottom'))
+      const height = activeItemElement.offsetHeight
 
       _style = {
         // 2px 保证尽量和文字顶部对齐，减少文本行高的影响
         top: offset + paddingTop + 2 + 'px',
-        height: `${itemRect.height - paddingTop - paddingBottom - 4}px`,
+        height: `${height - paddingTop - paddingBottom - 4}px`,
         left: '',
         width: '',
       }
     } else {
       const paddingLeft = parseFloat(computedStyle.getPropertyValue('padding-left'))
       const paddingRight = parseFloat(computedStyle.getPropertyValue('padding-right'))
+      const width = activeItemElement.offsetWidth
 
       _style = {
         left: offset + paddingLeft + 'px',
-        width: `${itemRect.width - paddingRight - paddingLeft}px`,
+        width: `${width - paddingRight - paddingLeft}px`,
         top: '',
         height: '',
       }
     }
     Object.assign(inkRef.current.style, _style)
-  }, [activeItemElement, activeTabId, getTabOffset, showHorizontal])
+  }, [activeItemElement, getTabOffset, activeTabId, showHorizontal])
 
   useEffect(() => {
     setTabLnkPositionStyle()

packages/ui/tabs/src/TabList.tsx

@@ -116,8 +116,12 @@ export const TabList = forwardRef<HTMLDivElement | null, TabListProps>(
         // 获取目标元素的位置
         const targetElement = itemsRef.current[tabId]
         if (targetElement) {
-          const rect = targetElement!.getBoundingClientRect()
-          target = showHorizontal ? rect.left : rect.top
+          // issue: https://github.com/XiaoMi/hiui/issues/2937
+          // 当设置transform缩放后，getBoundingClientRect 获取的值不准确，所以这里使用offsetLeft和offsetTop
+          // const rect = targetElement!.getBoundingClientRect()
+          const rectLeft = targetElement!.offsetLeft
+          const rectTop = targetElement!.offsetTop
+          target = showHorizontal ? rectLeft : rectTop
         }
         return target
       },