Skip to content

feat: Ellipsis校验越界不走缓存配置 #3329

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 15, 2025
Merged

feat: Ellipsis校验越界不走缓存配置 #3329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7d3567a
feat: 不走缓存配置
holyfata Aug 14, 2025
707a44b
feat: 修复CIlint错误
holyfata Aug 14, 2025
56b2ae0
feat: 修复lint问题
holyfata Aug 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions src/packages/ellipsis/ellipsis.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@ import React, { FunctionComponent, useState, useRef, useEffect } from 'react'
import { nextTick, createSelectorQuery } from '@tarojs/taro'
import classNames from 'classnames'
import { View } from '@tarojs/components'
import { getRectInMultiPlatform } from '@/utils/taro/get-rect'
import {
getRectInMultiPlatform,
getRectInMultiPlatformWithoutCache,
} from '@/utils/taro/get-rect'
import { ComponentDefaults } from '@/utils/typings'
import { useRtl } from '../configprovider/index.taro'
import { TaroEllipsisProps } from '@/types'
Expand Down Expand Up @@ -195,7 +198,7 @@ export const Ellipsis: FunctionComponent<

// 验证省略号
const verifyEllipsis = async () => {
const refe = await getRectInMultiPlatform(rootContain.current)
const refe = await getRectInMultiPlatformWithoutCache(rootContain.current)
Copy link

@coderabbitai coderabbitai bot Aug 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

校验越界改为实时获取矩形方向正确，但建议显式传入节点 id 提升跨端稳定性

getRectInMultiPlatformWithoutCache 在非浏览器分支通过 createSelectorQuery().select(#${harmonyId || element.uid}) 查询；当前未传入 harmonyId，依赖 element.uid 存在且正确，跨端（如小程序/Harmony）不一定可靠。组件里已设置了明确的 id，可直接传入，避免选择器失败。

-    const refe = await getRectInMultiPlatformWithoutCache(rootContain.current)
+    const refe = await getRectInMultiPlatformWithoutCache(
+      rootContain.current,
+      `rootContain${refRandomId.current}`
+    )
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const refe = await getRectInMultiPlatformWithoutCache(rootContain.current)
const refe = await getRectInMultiPlatformWithoutCache(
rootContain.current,
`rootContain${refRandomId.current}`
)
🤖 Prompt for AI Agents 
In src/packages/ellipsis/ellipsis.taro.tsx around line 201 the call
getRectInMultiPlatformWithoutCache(rootContain.current) relies on element.uid in
non-browser branches which is fragile across platforms; update the call to
explicitly pass the component's declared node id (the id prop you set on the
DOM/node — e.g., harmonyId or the component's id variable) so the selector uses
that id instead of uid, and adjust the call/signature typing if needed to supply
the id in the expected form (with or without '#' per helper expectations).

if (refe && refe.height && refe.height > maxHeight.current) {
if (direction === 'end') {
ellipsis.current.leading = ellipsis.current?.leading?.slice(
Expand Down
21 changes: 21 additions & 0 deletions src/utils/taro/get-rect.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,24 @@ export const getRectInMultiPlatform = async (
}
return Promise.resolve(makeRect(0, 0))
}

// 获取元素位置，不走缓存
export const getRectInMultiPlatformWithoutCache = async (
element: any,
harmonyId = ''
): Promise<Rect> => {
if (element) {
if (inBrowser) {
return Promise.resolve(getRect(element))
}
return new Promise((resolve, reject) => {
createSelectorQuery()
.select(`#${harmonyId || element.uid}`)
.boundingClientRect()
.exec(([rects]) => {
resolve(rects)
})
})
}
return Promise.resolve(makeRect(0, 0))
}
Comment on lines +58 to +76
Copy link

@coderabbitai coderabbitai bot Aug 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

⚠️ Potential issue

无缓存版本需兜底返回 Rect，且去掉未使用的 reject 参数

  • 当 select 未命中节点时，rects 可能为 undefined，当前直接 resolve(rects) 存在类型与运行时风险（下游读取 width/height 会报错）。建议兜底为 makeRect(0, 0)，以确保 Promise 始终返回 Rect。
  • new Promise((resolve, reject) => { ... }) 中 reject 未使用，易触发 lint 未使用变量告警，可移除。
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve) => {
       createSelectorQuery()
         .select(`#${harmonyId || element.uid}`)
         .boundingClientRect()
         .exec(([rects]) => {
-          resolve(rects)
+          resolve(rects || makeRect(0, 0))
         })
     })
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export const getRectInMultiPlatformWithoutCache = async (
element: any,
harmonyId = ''
): Promise<Rect> => {
if (element) {
if (inBrowser) {
return Promise.resolve(getRect(element))
}
return new Promise((resolve, reject) => {
createSelectorQuery()
.select(`#${harmonyId || element.uid}`)
.boundingClientRect()
.exec(([rects]) => {
resolve(rects)
})
})
}
return Promise.resolve(makeRect(0, 0))
}
export const getRectInMultiPlatformWithoutCache = async (
element: any,
harmonyId = ''
): Promise<Rect> => {
if (element) {
if (inBrowser) {
return Promise.resolve(getRect(element))
}
return new Promise((resolve) => {
createSelectorQuery()
.select(`#${harmonyId || element.uid}`)
.boundingClientRect()
.exec(([rects]) => {
resolve(rects || makeRect(0, 0))
})
})
}
return Promise.resolve(makeRect(0, 0))
}
🤖 Prompt for AI Agents 
In src/utils/taro/get-rect.ts around lines 58 to 76, the Promise resolves
undefined when the selector misses a node and also declares an unused reject
parameter; change the exec callback to resolve a safe Rect fallback (e.g.
makeRect(0, 0)) when rects is falsy so the Promise always returns a Rect, and
remove the unused reject parameter from the new Promise signature to avoid lint
warnings.

Loading