fix: 修正steps组件taro版div标签替换成view标签& price多端结构统一#3401
fix: 修正steps组件taro版div标签替换成view标签& price多端结构统一#3401irisSong wants to merge 53 commits intojdf2e:feat_v3.xfrom
Conversation
* fix: 暂时屏蔽掉css transition * fix: cpp 下class类问题
* chore(release): v3.0.18 * fix(swiper): duration属性透传 (jdf2e#3337) * feat: 修复属性透传 * feat: 直接删除duration * fix(range): taro环境异步渲染useReady不会触发 (jdf2e#3297) * fix(range): taro环境异步渲染useReady不会触发 * refactor: 将组件中使用的useReady替换为useLayoutEffect * chore: 升级版本号 * feat(popup): 增加上下滑动修改高度 * fix(input): 兼容h5和小程序获取原生input标签 (jdf2e#3341) * feat: inputRef获取真实input-dom * feat: 兼容小程序和h5获取input标签 * feat: 取消?问好，出错直接抛出 * feat(Popup): 新增弹层可上下滑动 (jdf2e#3340) * feat: 支持popup 高度可以伸缩 * feat: 适配小程序 * feat: 修改文档 * fix: 默认值不需要,走样式 * feat: 增加使用的限制条件 * docs: 增加文档 * fix: 适配鸿蒙,初始值重置修改 * test: 添加单测 * fix: 增加h5 的初始值 * fix: 增加高度下限约束 * test: fix 单测 * feat(popup): 添加自定义顶部 * fix(input): taro 下只读可以点击 --------- Co-authored-by: Alex.hxy <1872591453@qq.com> Co-authored-by: YONGQI <holyfata@qq.com> Co-authored-by: RyanCW <75795462+Ryan-CW-Code@users.noreply.github.com>
* feat: 鸿蒙适配td * chore: 强制指向某些版本 * fix: swipe 在鸿蒙下不好使的问题 * fix(toast): 无法在鸿蒙下换行的问题 * fix: 调整滑动时动效时间 * fix: 去掉注释 * chore: 升级nutui版本 * chore: 升级版本号 * fix: lint
* fix: fix showCount props is invalid in alipay (jdf2e#3366) * feat: 添加部分组件无障碍功能支持 - button - Checkbox - Countdown - Empty - Image - InputNumber - Price - Progress - NavBar - NoticeBar - Radio - Switch - Tabbar - Tabs - Toast * Revert "feat: 添加部分组件无障碍功能支持" This reverts commit 2e7cbd2. * feat: 添加组件无障碍功能支持 - button - Checkbox - Popup - Dialog - Overlay - Radio - Switch - Toast * fix: update * fix: update * fix: update * fix: update Overlay --------- Co-authored-by: ryanwang <email@binlin.wang>
Walkthrough本次变更包含大量 Taro 平台适配与可访问性扩展、Popup/Dialog 新增徽章与 top 插槽、若干生命周期钩子从 useLayoutEffect 替换为 useReady、事件总线切换为 Taro eventCenter，以及大范围在 SCSS 中加入基于 dynamic/harmony 的条件注释与若干主题变量与 locale 字段的新增与版本更新。 Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 分钟
Possibly related PRs
Suggested reviewers
诗句
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
bot
added
action:review
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3401 +/- ##
==========================================
Coverage 88.15% 88.15%
==========================================
Files 291 291
Lines 19212 19212
Branches 2988 2988
==========================================
Hits 16937 16937
Misses 2269 2269
Partials 6 6 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/packages/price/price.taro.tsx (1)
169-183: 动态环境与 Harmony 同步使用 Text 包裹逻辑合理，整体实现 LGTM这行条件从单纯
harmony()扩展为harmony() || process.env.TARO_ENV === 'dynamic'，让 dynamic 环境也走 Text 包裹分支，与 Harmony 保持一致，符合“结构保持一致”的目标，目前看不会引入明显副作用。可以考虑的小优化（可选）：
- 为了统一平台判断逻辑，后续可以在
@/utils/taro/platform里抽一个类似isHarmonyLike()/isHarmonyOrDynamic()的工具方法，在各组件里只调用这个工具，避免到处手写'dynamic'字面量，减轻后续再扩展环境时的维护成本。请你再确认一处：当前 Taro 配置里 dynamic 环境的标识是否就是严格等于字符串
'dynamic'，以及是否还有其他组件也需要同步从harmony()扩展为 “Harmony + dynamic” 的判断，避免不同组件在相同平台下行为不一致。Based on learnings, ...
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/packages/price/price.taro.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2024-11-06T02:16:07.069Z
Learnt from: oasis-cloud
Repo: jdf2e/nutui-react PR: 2540
File: src/packages/trendarrow/trendarrow.taro.tsx:29-30
Timestamp: 2024-11-06T02:16:07.069Z
Learning: 在`TrendArrow`组件（`src/packages/trendarrow/trendarrow.taro.tsx`）中，CSS变量在鸿蒙系统（Harmony OS）中可能未被完全支持，导致兼容性问题。因此，使用硬编码的十六进制颜色值可以确保在鸿蒙系统上的正确显示。
Applied to files:
src/packages/price/price.taro.tsx
🧬 Code graph analysis (1)
src/packages/price/price.taro.tsx (1)
src/utils/taro/platform.ts (1)
harmony(3-7)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build
- GitHub Check: test
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/packages/steps/steps.taro.tsx (2)
31-31: 移除未使用的restProps变量。由于第 53 行不再展开
restProps，这个变量现在是未使用的代码。应用此 diff 来移除未使用的变量：
const { direction, value, layout, status, type, className, children, onStepClick, - ...restProps } = propSteps
19-19: 更新类型定义以匹配实际使用的组件。组件现在使用 Taro 的
View组件而不是 HTMLdiv，但类型定义仍然引用React.HTMLAttributes<HTMLDivElement>。这可能导致类型不匹配。考虑更新类型定义：
export const Steps: FunctionComponent< - Partial<TaroStepsProps> & React.HTMLAttributes<HTMLDivElement> + Partial<TaroStepsProps> > = (props) => {src/packages/step/step.taro.tsx (1)
21-21: 更新类型定义以匹配实际使用的组件。与
Steps组件类似，这里的类型定义仍然引用React.HTMLAttributes<HTMLDivElement>，但实际使用的是 Taro 的View组件。考虑更新类型定义：
export const Step: FunctionComponent< - Partial<TaroStepProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> + Partial<TaroStepProps> > = (props) => {
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/packages/step/step.taro.tsx(2 hunks)src/packages/steps/steps.taro.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build
- GitHub Check: test
🔇 Additional comments (1)
src/packages/step/step.taro.tsx (1)
89-94: LGTM！将
div替换为 Taro 的View组件是正确的做法，所有替换都保持了一致性。View组件正确支持onClick事件处理。Also applies to: 99-109
| @@ -1,5 +1,6 @@ | |||
| import React, { FunctionComponent } from 'react' | |||
| import classNames from 'classnames' | |||
| import { View } from '@tarojs/components' | |||
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# 2. Search for Steps component usage patterns
echo "=== Searching for Steps component usage ==="
rg -n -A 3 -B 1 --type=tsx --type=ts '<Steps' -g '!**/steps.taro.tsx' -g '!**/step.taro.tsx' | head -50Repository: jdf2e/nutui-react
Length of output: 149
🏁 Script executed:
#!/bin/bash
# 3. Check if there are any restProps being passed to Steps
echo "=== Searching for restProps or spread operators with Steps ==="
rg -n 'restProps|\.\.\..*Props' src/packages/steps/ --type=tsx --type=tsRepository: jdf2e/nutui-react
Length of output: 168
🏁 Script executed:
#!/bin/bash
# Read the steps.taro.tsx file
echo "=== Content of steps.taro.tsx ==="
cat -n src/packages/steps/steps.taro.tsxRepository: jdf2e/nutui-react
Length of output: 2370
🏁 Script executed:
#!/bin/bash
# Search for Steps component usage across the codebase
echo "=== Steps component usage ==="
rg '<Steps' -A 3 -B 1 | grep -v 'steps.taro.tsx' | head -100Repository: jdf2e/nutui-react
Length of output: 6329
🏁 Script executed:
#!/bin/bash
# Check for restProps usage in steps related files
echo "=== restProps in steps directory ==="
rg 'restProps' src/packages/steps/Repository: jdf2e/nutui-react
Length of output: 270
🏁 Script executed:
#!/bin/bash
# Compare with h5 version to see how it handles restProps
echo "=== Content of steps.tsx (h5 version) ==="
cat -n src/packages/steps/steps.tsx | head -70Repository: jdf2e/nutui-react
Length of output: 2339
Taro 版本中 restProps 被移除，需确认是否故意。
将 div 替换为 Taro 的 View 组件是正确做法，但第 53 行移除了 {...restProps} 展开。与 H5 版本（steps.tsx）对比，H5 版本在第 52 行保留了 {...restProps}。
两个版本的类型签名都声明接受 React.HTMLAttributes<HTMLDivElement>，但 Taro 版本运行时会忽略这些属性。由于 Taro 的 View 组件是跨平台抽象，可能不支持 HTML 属性，这种差异可能是必要的。建议：
- 确认是否需要为 Taro 版本更新类型签名，使其不声称支持 HTMLAttributes
- 或在 View 上适配 restProps（如果 Taro 支持）
🤖 Prompt for AI Agents
In src/packages/steps/steps.taro.tsx around line 3 and specifically at line 53,
the Taro variant replaced a div with Taro's View but removed the {...restProps}
spread while the H5 version keeps it; either update the component's props typing
to stop claiming React.HTMLAttributes<HTMLDivElement> (use a Taro-appropriate
props type) or, if Taro's View supports the passed attributes, re-apply
{...restProps} to View and adjust the prop types to reflect the accepted
attributes; confirm platform compatibility and implement one of these two fixes
so the type signature matches runtime behavior.
irisSong
changed the title
There was a problem hiding this comment.
Actionable comments posted: 19
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (5)
src/hooks/taro/use-custom-event.ts (1)
17-22:off()调用缺少回调引用，可能导致所有监听器被意外移除当前 cleanup 函数只传递
path给customEvents.off(path)，这会移除该 path 上的所有监听器，而非仅移除当前cb。在使用全局
eventCenter后，如果同一页面内多个组件监听相同 path：
- 组件 A 和组件 B 都监听
path- 组件 A 卸载时调用
off(path)- 组件 B 的监听器也会被移除，导致功能异常
🔎 建议修复：将回调引用传递给 off()
export function useCustomEvent(selector: string, cb: any) { const path = useCustomEventsPath(selector) + const cbRef = useRef(cb) + cbRef.current = cb + useEffect(() => { - customEvents.on(path, cb) + const handler = (...args: any[]) => cbRef.current(...args) + customEvents.on(path, handler) return () => { - customEvents.off(path) + customEvents.off(path, handler) } }, []) const trigger = <T = any>(args: T) => { customEvents.trigger(path, args) } const off = () => { - customEvents.off(path) + customEvents.off(path, cbRef.current) } return [trigger, off] }src/packages/input/input.taro.tsx (1)
219-234: 清除按钮显示逻辑缺少 disabled 检查清除按钮的显示条件（第 222 行）检查了
!readOnly，但未检查!disabled。这会导致：
- 当
disabled={true}且readOnly={false}时，清除按钮会显示，但点击时不会执行任何操作（第 230 行的if (!disabled)会阻止）- 这会造成用户体验不一致
建议在显示条件中同时检查
!disabled和!readOnly。🔎 修复建议
<View style={{ display: - clearable && !readOnly && active && value.length > 0 + clearable && !readOnly && !disabled && active && value.length > 0 ? 'flex' : 'none', alignItems: 'center', cursor: 'pointer', }}src/packages/button/button.taro.tsx (2)
33-46: 修正事件类型签名并移除未使用的nativeType属性。存在以下问题：
事件类型不匹配：
onClick的类型签名是MouseEvent<HTMLButtonElement>，但实际渲染的是View组件，不是 button 元素。这会导致类型不一致。未使用的属性：
nativeType属性在接口中声明，但在第 160 行已被注释，实际上不再使用。保留这个属性会误导组件使用者。🔎 建议的修改方案
- nativeType: 'submit' | 'reset' // | 'button' - onClick: (e: MouseEvent<HTMLButtonElement>) => void + onClick: (e: MouseEvent<HTMLDivElement>) => void或者，如果保留
nativeType是为了后续支持，请添加注释说明其用途。
156-182: 严重的可访问性和功能性问题：不应将语义化按钮替换为 View。将
TaroButton替换为View会导致以下严重问题：
可访问性严重降级（WCAG 违规）：
- 屏幕阅读器无法识别为按钮
- 失去键盘导航支持（Enter/Space 键激活）
- 失去原生焦点管理
- 缺少
role="button"等必要的 ARIA 属性功能性损失：
- 无法支持表单提交（formType 在第 160 行被注释）
- 失去小程序平台的原生按钮特性（如微信小程序的
open-type、getUserInfo等能力）- 失去平台自动提供的按钮样式和交互反馈
类型安全问题：
- 第 163 行的
as any强制类型转换掩盖了类型不匹配问题建议方案：
- 推荐方案：保留
TaroButton，解决具体的兼容性问题而不是完全替换- 备选方案：如果必须使用
View，至少需要：
- 添加
role="button"- 添加
tabIndex={0}支持键盘导航- 添加
onKeyDown处理 Enter/Space 键- 考虑添加
aria-disabled等 ARIA 属性🔎 如果必须使用 View，请至少添加基础可访问性支持
<View {...rest} ref={ref} + role="button" + tabIndex={disabled ? -1 : 0} + aria-disabled={disabled || loading} // formType={formType || nativeType} className={buttonClassNames} style={{ ...getStyle, ...style }} onClick={(e) => handleClick(e as any)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault() + handleClick(e as any) + } + }} >注意：即使添加了这些属性，仍然无法完全恢复原生按钮的所有功能和平台特性。
src/packages/popup/popup.tsx (1)
180-200: 关闭按钮tabIndex={-1}影响键盘可访问性，应改为支持 Tab 聚焦和键盘事件当前关闭图标外层 div 已声明
role="button"并配置 aria-label，但tabIndex={-1}导致该"按钮"无法通过 Tab 键聚焦。同时缺少 Enter/Space 键的处理逻辑，违反了 WCAG 无障碍标准中关于按钮键盘可访问性的要求。建议改为
tabIndex={0}并补充键盘事件处理：<div className={closeClasses} onClick={handleCloseIconClick} role="button" aria-label={closeAriaLabel || locale.close} - tabIndex={-1} + tabIndex={0} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault() + handleCloseIconClick(e as any) + } + }} >
♻️ Duplicate comments (2)
src/packages/cellgroup/cellgroup.scss (1)
17-19: 验证 dynamic 模式下的布局表现与标题元素相同，描述元素在 dynamic 模式下也会移除
display: inherit属性。请一并验证描述元素的布局表现是否正常。src/packages/swipe/swipe.taro.tsx (1)
84-98: 此函数的接口设计问题已在上一条评审中指出
🧹 Nitpick comments (19)
src/packages/cascader/cascader.scss (1)
14-17: 注释格式不一致，建议统一风格第14行的条件编译指令
/* #ifndef dynamic*/缺少闭合标记前的空格，而第17行的/* #endif */则有空格。建议统一格式以保持代码风格一致。🔎 建议的格式修正：
- /* #ifndef dynamic*/ + /* #ifndef dynamic */ flex: initial; min-width: auto; /* #endif */src/packages/input/input.taro.tsx (1)
175-175: 统一环境检查模式第 175 行使用
getEnv() === ENV_TYPE.WEB，而第 95、154、170 行使用Taro.getEnv() === 'WEB'（字符串字面量）。建议在整个文件中统一使用一种模式以提高可维护性。🔎 可选方案：统一使用本地 ENV_TYPE 常量
const getNativeInput = () => { - if (Taro.getEnv() === 'WEB') { + if (getEnv() === ENV_TYPE.WEB) { const taroInputCoreEl = inputRef.current as HTMLElement const inputEl = taroInputCoreEl.querySelector('input') return inputEl同样的修改可应用于第 154 行和第 170 行。
src/packages/button/button.taro.tsx (1)
80-84: 移除未使用的nativeType解构。
nativeType在第 81 行被解构，但在渲染逻辑中从未使用（第 160 行已注释）。建议将其移除，或者如果计划后续使用，应在代码中体现其用途。🔎 建议的修改
style, - // formType, - nativeType, + // formType, onClick, ...restsrc/packages/range/range.scss (1)
185-303: 条件编译中的定位属性重置遵循项目统一模式，旨在确保平台兼容性整个项目中的 50+ SCSS 文件都使用
#ifndef dynamic条件编译守卫相反的定位属性（如left/right、top/bottom），这是为了在非动态模式下防止属性级联问题。根据已知信息，这一模式主要用于鸿蒙(Harmony OS)等平台的兼容性支持。当前 range.scss 的实现是一致的且符合项目约定。如果考虑简化这些
initial重置，建议：
- 在 Taro 动态模式和非动态模式下均进行完整的视觉回归测试
- 在鸿蒙平台上验证定位效果无误
- 理解这些重置对应的具体兼容性需求，然后再决定是否可以安全移除
此模式的存在是经过深思熟虑的平台适配方案，直接移除可能会导致某些平台上的布局问题。
src/packages/swipe/swipe.taro.tsx (2)
106-113: 考虑优化 getWidth 的调用频率每次触摸开始时都调用
getWidth()会触发异步的 DOM 查询，这可能在低性能设备上造成性能问题。如果操作区域的宽度在组件生命周期内不会改变，可以考虑仅在初始化时或必要时（如窗口大小变化）重新测量。如果确实需要在每次交互前刷新宽度（例如，动态内容可能改变宽度），建议添加节流或防抖机制。
174-189: 考虑优化 useCallback 的依赖项当前
close函数依赖整个props对象，这可能导致不必要的重新创建。可以考虑只依赖实际使用的属性props.onClose和props.name。🔎 可选的优化建议
const close = useCallback( (position?: PositionX) => { if (opened.current) { opened.current = false props.onClose?.({ name: props.name as number | string, position: position || 'left', }) } setState((prevState) => ({ ...prevState, offset: 0, })) }, - [props] + [props.onClose, props.name] )src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md (1)
99-102: 文档更新已添加新增的
top属性说明准确地反映了 API 变更。可选的风格改进建议
静态分析工具检测到连续三个句子都以 "Added" 开头。可以考虑重新措辞以提高可读性，例如：
- Added the resizable property for scrolling up and down when the bottom popup is active. - Added the minHeight property for setting the minimum height, which can be used with resizable. -- Added a new attribute top to display user-defined content above the title. +- A new attribute top allows displaying user-defined content above the title. - Added the onTouchStart, onTouchMove, and onTouchEnd methods.Based on static analysis hints.
src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md (1)
99-102: Taro 迁移文档更新准确新增的
top属性说明与 React 版本的迁移文档保持一致。可选的风格改进建议
与 React 迁移文档类似，可以考虑调整句式以避免连续使用 "Added" 开头：
- Added the resizable property for scrolling up and down when the bottom popup is active. - Added the minHeight property for setting the minimum height, which can be used with resizable. -- Added a new attribute top to display user-defined content above the title. +- A new attribute top allows displaying user-defined content above the title. - Added the onTouchStart, onTouchMove, and onTouchEnd methods.Based on static analysis hints.
src/packages/popup/doc.en-US.md (1)
94-94: 建议补充更详细的属性说明。新增的
top属性文档描述过于简略（"The top of popup"）。建议补充更详细的说明，例如：
- 该属性的具体用途和效果
- 何时应该使用该属性
- 是否有使用示例
这将帮助开发者更好地理解和使用这个新功能。
src/packages/dialog/content.tsx (1)
58-66: 无障碍属性添加正确。为 dialog 容器添加
role、aria-label和tabIndex={-1}是正确的做法。tabIndex={-1}允许通过 JavaScript 聚焦但不会出现在 Tab 键序列中，这对于模态对话框是合适的行为。🔎 可选建议：考虑添加 aria-modal 属性
对于模态对话框，可以考虑添加
aria-modal="true"来更好地告知辅助技术这是一个模态组件：role={ariaRole} aria-label={ariaLabel} tabIndex={-1} + aria-modal={ariaRole === 'dialog' || ariaRole === 'alertdialog'}src/packages/toast/toast.taro.tsx (1)
185-190: 平台条件渲染逻辑合理。根据
td()判断是否为 dynamic 环境来选择Text或View组件渲染内容，这是 Taro 多端适配的常见模式。建议添加简短注释说明此处差异化处理的原因，便于后续维护。src/packages/radio/radio.tsx (1)
134-144: 无障碍属性添加正确，但缺少键盘交互支持。ARIA 属性设置正确：
role="radio"、aria-checked、aria-disabled和tabIndex逻辑都符合规范。然而，作为可聚焦的交互元素，建议添加onKeyDown处理器以支持键盘操作（Space/Enter 键触发选中）。🔎 建议添加键盘事件处理
+ const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => { + if (e.key === ' ' || e.key === 'Enter') { + e.preventDefault() + handleClick(e as any) + } + } + return ( <div className={cls} style={style} onClick={handleClick} + onKeyDown={handleKeyDown} {...rest} role="radio" tabIndex={disabled ? -1 : 0} aria-checked={checkedStatement} aria-disabled={disabled} aria-label={ariaLabel} >src/packages/switch/switch.tsx (1)
86-96: Switch 无障碍属性实现正确，同样建议添加键盘支持。
role="switch"及相关 ARIA 属性设置符合 WAI-ARIA 规范。与 Radio 组件类似，建议添加onKeyDown处理器支持 Space/Enter 键切换状态，以完善键盘无障碍体验。🔎 建议添加键盘事件处理
+ const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => { + if (e.key === ' ' || e.key === 'Enter') { + e.preventDefault() + onClick() + } + } + return ( <div className={classes()} onClick={onClick} + onKeyDown={handleKeyDown} style={style} {...rest} role="switch" tabIndex={disabled ? -1 : 0} aria-checked={value} aria-disabled={disabled} aria-label={ariaLabel} >src/packages/dialog/dialog.scss (1)
146-166: Badge 容器样式实现合理，但存在重复代码。
&-ok-container和&-cancel-container的结构几乎相同，仅在 badge 定位和颜色变量上有差异。建议考虑使用 SCSS mixin 或占位符选择器来减少重复。🔎 可选：使用 mixin 减少重复
@mixin badge-container { position: relative; display: flex; align-items: center; width: 100%; justify-content: space-around; } @mixin footer-badge($right, $bg, $color) { position: absolute; right: $right; top: $dialog-footer-badge-top; display: flex; align-items: center; height: $dialog-footer-badge-height; padding: $dialog-footer-badge-padding; background: $bg; border-radius: $dialog-footer-badge-border-radius; font-size: $dialog-footer-badge-fontsize; color: $color; } &-ok-container { @include badge-container; .nut-dialog-footer-ok-badge { @include footer-badge(0, $dialog-footer-badge-bg-ok, $dialog-footer-badge-color-ok); } } &-cancel-container { @include badge-container; .nut-dialog-footer-cancel-badge { @include footer-badge($dialog-footer-cancel-margin-right, $dialog-footer-badge-bg-cancel, $dialog-footer-badge-color-cancel); } }Also applies to: 182-202
src/packages/dialog/dialog.tsx (1)
148-186: Button 组件代码重复。
renderConfirm中 badge 存在与否的两个分支包含几乎相同的 Button 代码。建议提取 Button 渲染为独立变量或函数以减少重复。🔎 建议重构
const renderConfirm = () => { + const confirmButton = ( + <Button + type="primary" + size="large" + className={classNames(`${classPrefix}-footer-ok ${btnClass}`, { + disabled: disableConfirmButton, + })} + disabled={disableConfirmButton} + onClick={(e) => handleOk(e)} + loading={loading} + > + {confirmText || locale.confirm} + </Button> + ) + return ( !hideConfirmButton && ( <> {badge ? ( <div className={`${classPrefix}-footer-ok-container`}> - <Button - type="primary" - size="large" - className={classNames( - `${classPrefix}-footer-ok ${btnClass}`, - { - disabled: disableConfirmButton, - } - )} - disabled={disableConfirmButton} - onClick={(e) => handleOk(e)} - loading={loading} - > - {confirmText || locale.confirm} - </Button> - {badge ? ( - <div className={`${classPrefix}-footer-ok-badge`}> - {badge} - </div> - ) : null} + {confirmButton} + <div className={`${classPrefix}-footer-ok-badge`}> + {badge} + </div> </div> ) : ( - <Button - type="primary" - size="large" - className={classNames(`${classPrefix}-footer-ok ${btnClass}`, { - disabled: disableConfirmButton, - })} - disabled={disableConfirmButton} - onClick={(e) => handleOk(e)} - loading={loading} - > - {confirmText || locale.confirm} - </Button> + confirmButton )} </> ) ) }src/packages/dialog/dialog.taro.tsx (1)
275-281: 注释掉的 CSSTransition 代码应清理。CSSTransition 相关代码已被注释掉但仍保留在文件中。如果确定不再需要过渡动画，建议完全移除注释代码以保持代码整洁；如果后续可能恢复，建议通过 Git 历史追溯而非保留注释。
Also applies to: 297-298
src/packages/noticebar/noticebar.taro.tsx (1)
464-499: 提取渲染函数提升了代码可读性。
renderLeftIcon、renderRight、renderRightIcon的提取使 JSX 结构更清晰。使用useCallback包装并声明正确的依赖项，避免了不必要的重新渲染。有一个小建议：Fragment 包装器
<>...</>在这些辅助函数中是多余的，可以直接返回条件表达式结果。🔎 可选：简化 Fragment 包装
const renderLeftIcon = useCallback(() => { - return ( - <> - {leftIcon ? ( - <View className="nut-noticebar-box-left-icon">{leftIcon}</View> - ) : null} - </> - ) + return leftIcon ? ( + <View className="nut-noticebar-box-left-icon">{leftIcon}</View> + ) : null }, [leftIcon])src/packages/popup/popup.taro.tsx (1)
11-11: 建议清理已完全注释掉的 CSSTransition 实现
CSSTransition的 import 以及旧版renderPop已经全部注释，长期保留会增加阅读噪音。建议后续改为直接依赖 git 历史回溯，删除这段注释代码以简化 Taro 版本实现。Also applies to: 364-379
src/styles/variables.scss (1)
598-598: Input 行高改为依赖$font-size-xl，请关注现有表单布局是否受影响
$input-lineheight从$font-size-l调整为$font-size-xl，将使默认输入行高略增大，有利于视觉上的通透感，但也可能改变现有表单在垂直方向的对齐与高度。建议在主要表单页面（含多行/前后缀等场景）实际跑一遍样式，确认没有出现行高过大或对齐偏移的问题。
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (107)
package.json(3 hunks)src/hooks/taro/use-custom-event.ts(1 hunks)src/locales/base.ts(2 hunks)src/locales/en-US.ts(2 hunks)src/locales/id-ID.ts(2 hunks)src/locales/tr-TR.ts(2 hunks)src/locales/zh-CN.ts(2 hunks)src/locales/zh-TW.ts(2 hunks)src/locales/zh-UG.ts(2 hunks)src/packages/actionsheet/actionsheet.scss(1 hunks)src/packages/animatingnumbers/countup.scss(1 hunks)src/packages/avatarcropper/avatarcropper.scss(1 hunks)src/packages/avatarcropper/avatarcropper.taro.tsx(3 hunks)src/packages/badge/badge.scss(2 hunks)src/packages/button/button.scss(1 hunks)src/packages/button/button.taro.tsx(5 hunks)src/packages/cascader/cascader.scss(1 hunks)src/packages/cellgroup/cellgroup.scss(2 hunks)src/packages/checkbox/checkbox.scss(1 hunks)src/packages/checkbox/checkbox.taro.tsx(1 hunks)src/packages/checkbox/checkbox.tsx(1 hunks)src/packages/checkboxgroup/checkboxgroup.scss(1 hunks)src/packages/configprovider/types.ts(2 hunks)src/packages/dialog/content.tsx(2 hunks)src/packages/dialog/demos/taro/demo1.tsx(1 hunks)src/packages/dialog/demos/taro/demo6.tsx(1 hunks)src/packages/dialog/dialog.scss(4 hunks)src/packages/dialog/dialog.taro.tsx(7 hunks)src/packages/dialog/dialog.tsx(7 hunks)src/packages/divider/divider.scss(1 hunks)src/packages/drag/drag.scss(1 hunks)src/packages/elevator/elevator.scss(2 hunks)src/packages/ellipsis/ellipsis.scss(1 hunks)src/packages/formitem/formitem.scss(1 hunks)src/packages/indicator/indicator.scss(1 hunks)src/packages/input/input.scss(0 hunks)src/packages/input/input.taro.tsx(2 hunks)src/packages/inputnumber/inputnumber.scss(1 hunks)src/packages/loading/loading.scss(1 hunks)src/packages/lottie/lottiemp.taro.tsx(3 hunks)src/packages/menuitem/menuitem.scss(2 hunks)src/packages/navbar/navbar.scss(1 hunks)src/packages/noticebar/demos/taro/demo10.tsx(3 hunks)src/packages/noticebar/noticebar.scss(1 hunks)src/packages/noticebar/noticebar.taro.tsx(12 hunks)src/packages/notify/notify.scss(1 hunks)src/packages/numberkeyboard/numberkeyboard.scss(1 hunks)src/packages/overlay/overlay.taro.tsx(2 hunks)src/packages/overlay/overlay.tsx(3 hunks)src/packages/popover/popover.scss(1 hunks)src/packages/popup/demos/h5/demo1.tsx(2 hunks)src/packages/popup/demos/taro/demo1.tsx(2 hunks)src/packages/popup/doc.en-US.md(1 hunks)src/packages/popup/doc.md(1 hunks)src/packages/popup/doc.taro.md(1 hunks)src/packages/popup/popup.scss(1 hunks)src/packages/popup/popup.taro.tsx(10 hunks)src/packages/popup/popup.tsx(7 hunks)src/packages/radio/demos/h5/demo1.tsx(1 hunks)src/packages/radio/demos/taro/demo1.tsx(1 hunks)src/packages/radio/radio.scss(1 hunks)src/packages/radio/radio.taro.tsx(2 hunks)src/packages/radio/radio.tsx(2 hunks)src/packages/range/range.scss(3 hunks)src/packages/range/range.taro.tsx(2 hunks)src/packages/rate/rate.scss(1 hunks)src/packages/rate/rate.taro.tsx(3 hunks)src/packages/resultpage/resultpage.scss(1 hunks)src/packages/searchbar/searchbar.scss(1 hunks)src/packages/segmented/segmented.scss(1 hunks)src/packages/sidebaritem/sidebaritem.scss(1 hunks)src/packages/signature/demo.scss(1 hunks)src/packages/skeleton/skeleton.scss(1 hunks)src/packages/space/space.scss(1 hunks)src/packages/steps/steps.scss(3 hunks)src/packages/steps/steps.taro.tsx(4 hunks)src/packages/steps/steps.tsx(1 hunks)src/packages/swipe/swipe.taro.tsx(6 hunks)src/packages/switch/demo.taro.tsx(5 hunks)src/packages/switch/demo.tsx(5 hunks)src/packages/switch/demos/h5/demo9.tsx(1 hunks)src/packages/switch/demos/taro/demo9.tsx(1 hunks)src/packages/switch/switch.scss(2 hunks)src/packages/switch/switch.taro.tsx(2 hunks)src/packages/switch/switch.tsx(2 hunks)src/packages/table/table.scss(5 hunks)src/packages/tabpane/tabpane.scss(1 hunks)src/packages/tabs/tabs.scss(1 hunks)src/packages/tabs/tabs.taro.tsx(2 hunks)src/packages/tag/tag.scss(1 hunks)src/packages/textarea/textarea.taro.tsx(2 hunks)src/packages/timeselect/timeselect.scss(1 hunks)src/packages/toast/Notification.tsx(1 hunks)src/packages/toast/toast.scss(2 hunks)src/packages/toast/toast.taro.tsx(2 hunks)src/packages/tour/tour.scss(1 hunks)src/packages/uploader/uploader.scss(1 hunks)src/packages/virtuallist/virtuallist.scss(1 hunks)src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md(1 hunks)src/sites/sites-react/doc/docs/react/migrate-from-v2.md(1 hunks)src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md(1 hunks)src/sites/sites-react/doc/docs/taro/migrate-from-v2.md(1 hunks)src/styles/theme-default.scss(2 hunks)src/styles/variables-jmapp.scss(4 hunks)src/styles/variables-jrkf.scss(4 hunks)src/styles/variables.scss(9 hunks)src/types/spec/dialog/base.ts(2 hunks)
⛔ Files not processed due to max files limit (8)
- src/types/spec/dialog/h5.ts
- src/types/spec/dialog/taro.ts
- src/types/spec/overlay/base.ts
- src/types/spec/popup/base.ts
- src/types/spec/radio/base.ts
- src/types/spec/switch/base.ts
- src/types/spec/textarea/base.ts
- src/utils/taro/get-rect-by-id.ts
💤 Files with no reviewable changes (1)
- src/packages/input/input.scss
✅ Files skipped from review due to trivial changes (2)
- src/packages/steps/steps.tsx
- src/packages/popover/popover.scss
🚧 Files skipped from review as they are similar to previous changes (1)
- src/packages/steps/steps.taro.tsx
🧰 Additional context used
🧠 Learnings (5)
📓 Common learnings
Learnt from: oasis-cloud
Repo: jdf2e/nutui-react PR: 2540
File: src/packages/trendarrow/trendarrow.taro.tsx:29-30
Timestamp: 2024-11-06T02:16:07.069Z
Learning: 在`TrendArrow`组件（`src/packages/trendarrow/trendarrow.taro.tsx`）中，CSS变量在鸿蒙系统（Harmony OS）中可能未被完全支持，导致兼容性问题。因此，使用硬编码的十六进制颜色值可以确保在鸿蒙系统上的正确显示。
📚 Learning: 2024-11-06T02:16:07.069Z
Learnt from: oasis-cloud
Repo: jdf2e/nutui-react PR: 2540
File: src/packages/trendarrow/trendarrow.taro.tsx:29-30
Timestamp: 2024-11-06T02:16:07.069Z
Learning: 在`TrendArrow`组件（`src/packages/trendarrow/trendarrow.taro.tsx`）中，CSS变量在鸿蒙系统（Harmony OS）中可能未被完全支持，导致兼容性问题。因此，使用硬编码的十六进制颜色值可以确保在鸿蒙系统上的正确显示。
Applied to files:
src/packages/tabs/tabs.taro.tsxsrc/styles/theme-default.scss
📚 Learning: 2025-05-02T01:45:09.576Z
Learnt from: irisSong
Repo: jdf2e/nutui-react PR: 3209
File: src/packages/searchbar/searchbar.taro.tsx:111-124
Timestamp: 2025-05-02T01:45:09.576Z
Learning: 在 React/Taro 组件中使用 setTimeout 或 setInterval 时，应当在组件卸载时通过 useEffect 的清理函数清除定时器，以防止内存泄漏。可以使用 useState 存储定时器 ID，并在 useEffect 的返回函数中清除。
Applied to files:
src/packages/range/range.taro.tsxsrc/packages/avatarcropper/avatarcropper.taro.tsxsrc/packages/lottie/lottiemp.taro.tsxsrc/packages/noticebar/noticebar.taro.tsxsrc/packages/overlay/overlay.taro.tsxsrc/packages/popup/popup.taro.tsxsrc/packages/swipe/swipe.taro.tsxsrc/hooks/taro/use-custom-event.tssrc/packages/rate/rate.taro.tsx
📚 Learning: 2024-11-06T05:56:06.800Z
Learnt from: oasis-cloud
Repo: jdf2e/nutui-react PR: 2700
File: src/packages/animatingnumbers/animatingnumbers.harmony.css:25-32
Timestamp: 2024-11-06T05:56:06.800Z
Learning: 在优化 NutUI React 动画性能时，添加 `will-change` 属性可能会对布局产生影响，需要谨慎使用。
Applied to files:
src/packages/lottie/lottiemp.taro.tsxsrc/packages/swipe/swipe.taro.tsx
📚 Learning: 2024-07-05T02:58:57.992Z
Learnt from: Alex-huxiyang
Repo: jdf2e/nutui-react PR: 2416
File: src/packages/uploader/uploader.taro.tsx:230-230
Timestamp: 2024-07-05T02:58:57.992Z
Learning: When changes are made to the `fileList` state in the `src/packages/uploader/uploader.taro.tsx` file, ensure to generate unit tests to cover these changes.
Applied to files:
src/packages/checkbox/checkbox.taro.tsx
🧬 Code graph analysis (14)
src/packages/switch/demos/h5/demo9.tsx (2)
src/packages/switch/switch.taro.tsx (1)
Switch(19-136)src/packages/switch/switch.tsx (1)
Switch(18-136)
src/packages/toast/toast.taro.tsx (1)
src/utils/taro/platform.ts (1)
td(16-18)
src/packages/radio/demos/h5/demo1.tsx (2)
src/packages/radio/radio.taro.tsx (1)
Radio(24-154)src/packages/radio/radio.tsx (1)
Radio(19-148)
src/packages/tabs/tabs.taro.tsx (1)
src/utils/taro/platform.ts (1)
td(16-18)
src/packages/range/range.taro.tsx (1)
src/utils/taro/get-rect.ts (1)
getRectInMultiPlatform(29-55)
src/packages/radio/demos/taro/demo1.tsx (2)
src/packages/radio/radio.taro.tsx (1)
Radio(24-154)src/packages/radio/radio.tsx (1)
Radio(19-148)
src/packages/switch/demos/taro/demo9.tsx (2)
src/packages/switch/switch.taro.tsx (1)
Switch(19-136)src/packages/switch/switch.tsx (1)
Switch(18-136)
src/packages/noticebar/noticebar.taro.tsx (2)
src/hooks/use-uuid.ts (1)
useUuid(17-20)src/utils/taro/get-rect.ts (1)
getRectInMultiPlatform(29-55)
src/packages/popup/popup.taro.tsx (3)
src/packages/configprovider/configprovider.taro.tsx (1)
useConfig(41-43)src/utils/taro/get-rect.ts (1)
getRectInMultiPlatformWithoutCache(58-76)src/utils/taro/px-transform.ts (1)
pxTransform(5-9)
src/packages/swipe/swipe.taro.tsx (3)
src/utils/taro/get-rect.ts (1)
getRectInMultiPlatform(29-55)src/hooks/use-memo.ts (1)
useMemo(8-24)src/types/base/atoms.ts (1)
PositionX(42-42)
src/packages/overlay/overlay.tsx (1)
src/packages/overlay/overlay.taro.tsx (1)
defaultOverlayProps(8-18)
src/packages/dialog/dialog.taro.tsx (3)
src/packages/button/button.taro.tsx (1)
Button(64-184)src/packages/dialog/content.tsx (1)
Content(15-79)src/packages/dialog/content.taro.tsx (1)
Content(16-75)
src/packages/button/button.taro.tsx (2)
src/packages/button/button.tsx (1)
ButtonProps(18-32)src/utils/typings.ts (1)
BasicComponent(3-8)
src/packages/dialog/dialog.tsx (3)
src/utils/merge-props.ts (1)
mergeProps(4-16)src/packages/button/button.taro.tsx (1)
Button(64-184)src/packages/button/button.tsx (1)
Button(52-144)
🪛 LanguageTool
src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md
[style] ~101-~101: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...ht, which can be used with resizable. - Added a new attribute top to display user-def...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md
[style] ~101-~101: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...ht, which can be used with resizable. - Added a new attribute top to display user-def...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: test
- GitHub Check: build
🔇 Additional comments (114)
src/hooks/taro/use-custom-event.ts (1)
6-7: 从本地 Events 实例切换到全局 eventCenter 的影响将
customEvents从new Events()改为 Taro 的全局eventCenter单例后，所有使用此 hook 的组件将共享同一个事件中心。这可能带来以下风险：
- 事件命名冲突：不同模块若使用相同的 selector，可能互相干扰
- 事件清理问题：见下方
off()相关的评论如果确实需要全局事件通信，此更改是合理的；如果各组件应保持事件隔离，建议保留本地实例。
src/packages/textarea/textarea.taro.tsx (1)
37-37: 实现正确，支持为组件添加可选的外部标识符。
viewId属性的添加使得可以为 TextArea 组件的根容器指定id属性，这对于可访问性（如关联 label 标签）、自动化测试或外部引用场景非常有用。实现简洁且不会破坏现有功能。Also applies to: 101-101
src/packages/space/space.scss (1)
85-87: 确认条件编译语法正确，但需澄清属性的实际应用场景。
justify-content: stretch是一个成熟的 CSS 功能，自 2015 年 9 月以来已在各浏览器中可用，不存在浏览器兼容性问题。需要注意的是：
- 在 flexbox 中，stretch 值行为与 flex-start 或 start 相同，因为拉伸由 flex-grow 属性控制
- 在网格布局中，此属性分布网格列之间的可用空间，仅自动大小的网格轨道可被拉伸
请确认此规则应用的容器类型（flexbox 还是 grid），以及在 dynamic 模式下的预期行为。
src/packages/uploader/uploader.scss (1)
183-185: 变更看起来合理，是动态构建平台适配的一部分。新增的条件编译指令在 dynamic 构建模式下排除了
position: initial;规则。这是合理的平台兼容性处理，与 PR 中其他组件的类似模式保持一致。src/packages/configprovider/types.ts (2)
59-59: 新增的字体相关 CSS 变量命名正确。这两个新增的 CSS 变量（
nutuiFontSizeIcon和nutuiFontWeightMedium）遵循了现有的命名规范，并且在类型定义中的位置也符合逻辑分组。Also applies to: 66-66
464-464: Dialog 相关变量新增正确。新增的
nutuiDialogTitleMarginBottom和nutuiDialogFooterButtonBorder变量命名规范，与现有的 Dialog 相关变量保持一致。Also applies to: 469-469
src/packages/numberkeyboard/numberkeyboard.scss (1)
14-16: 在 dynamic 平台上验证头部布局表现。条件编译指令
/* #ifndef dynamic*/会在 dynamic 平台构建时排除box-sizing: content-box;声明。由于.nut-numberkeyboard-header是 flex 容器且在第 17 行定义了 padding，移除 box-sizing 属性会改变盒模型的计算方式，可能影响头部元素的尺寸和布局表现。需要在 dynamic 平台上验证数字键盘头部的视觉效果和布局是否正常，确保此项改动不会导致布局错位或尺寸异常。
src/packages/tabs/tabs.scss (2)
123-125: 与第 113-115 行保持一致，但需验证动态模式的预期效果。此处应用了与
.nut-tabs-titles-item-line相同的条件编译模式，确保了两个选择器的一致性。但同样需要验证在 dynamic 模式下，笑脸图标指示器的overflow: hidden（第 88 行）是否会导致显示问题。
113-115: 条件编译模式已验证为项目既定的平台兼容性方案，无需修改。在项目中，
#ifndef dynamic是广泛使用的条件编译模式（覆盖 50+ 个组件），用于处理动态平台（Harmony OS）的 CSS 兼容性。tabs.scss 中的overflow: unset守卫遵循此既定模式：
- 在非动态模式下应用
overflow: unset以防止指示器被裁剪- 在动态模式下保留基础样式
overflow: hidden以适配平台差异此外，PR 范围确实包含 steps 和 tabs 两个组件的更新，均采用相同的条件编译策略。无需进一步调整。
src/packages/cascader/cascader.scss (1)
14-17: 这是针对 dynamic 平台的有意的样式适配模式这个
/* #ifndef dynamic*/条件编译指令是代码库中的系统性设计模式。相同的模式在 15+ 个 SCSS 组件文件（badge、tabs、switch、loading、notify 等）中一致出现，用于在 dynamic 平台构建中选择性地排除特定的布局属性。在 dynamic 平台下，
flex: initial和min-width: auto会被排除，仅保留第 18 行的width: auto。这会改变标签项的布局行为——移除显式的 flex 重置和最小宽度约束。由于这是整个代码库中的系统性设计，可以确认这是有意的平台适配，而非一致性问题。建议：在 dynamic 平台的集成测试或视觉回归测试中验证标签页的最终渲染效果是否符合预期。
src/packages/signature/demo.scss (1)
16-21: 此更改是建立的平台适配模式，无需进一步验证。该文件中的条件编译守卫（
#ifdef dynamic/#ifndef dynamic）是整个代码库中的系统性模式，涉及 27 个以上的组件。在动态平台（鸿蒙系统）上使用display: flex（块级容器），在标准 Web 上使用display: inline-flex（行内级容器），这是有意的平台适配策略。相同的模式已在 tag、switch、steps 等多个组件中验证使用，表明该方案已经过充分测试。src/packages/checkboxgroup/checkboxgroup.scss (1)
33-38: 确保多端布局一致性验证。使用条件编译针对
dynamic平台切换display属性是合理的多端适配方案。display:inline-flex 使容器为行内级，而display: flex使其为块级，两者在盒模型行为上存在差异，可能影响宽度计算和基线对齐。请确保该变更在非 dynamic 平台（保持
inline-flex）和 dynamic 平台（新增flex）上均无布局错位或视觉回归。src/packages/tag/tag.scss (1)
65-70: 验证 display 属性在 dynamic 平台上的布局变更。在
dynamic平台上将&-custom-icon的display从inline-flex改为flex会导致显著的布局变化：inline-flex使元素保持内联级，仅占用内容宽度；而flex使元素变为块级，占用容器全宽。请确认该变更已在 Taro dynamic 平台（如鸿蒙系统）上完整测试，且布局变化符合预期，不会影响图标与相邻元素的对齐。
src/packages/cellgroup/cellgroup.scss (1)
5-7: 这个改动是多端适配结构统一的一部分，按既有模式实现
#ifndef dynamic条件编译模式在该项目中已被广泛且一致地应用于 50+ 个组件，作为多平台兼容性策略的核心部分。cellgroup 的&-title和&-description移除display: inherit在 dynamic 模式下的做法遵循同一模式，这与 PR 目标"price多端结构统一"保持一致。建议通过 Taro 平台的构建和渲染测试来验证各平台的最终表现。src/packages/input/input.taro.tsx (1)
18-29: 本地 ENV_TYPE 常量定义与 Taro 库相符本地
ENV_TYPE常量中定义的所有值（WEAPP、SWAN、ALIPAY、TT、QQ、JD、WEB、RN、QUICKAPP、HARMONY）均与 Taro 官方文档中的getEnv()返回值一致。不需要修改。src/packages/button/button.taro.tsx (1)
149-151: 评估移除 WEB 环境表单支持的影响。注释掉的代码原本为 WEB 环境设置
formType，这对于表单提交功能很重要。虽然这是 Taro 版本，但 Taro 也可以编译到 Web 平台。请确认：
- 在 Web 平台编译时，按钮是否仍需支持表单提交？
- 如果需要，应如何实现？
src/packages/range/range.scss (1)
185-189: 确认#ifndef dynamic条件编译的用途和必要性该模式在 7 处位置保持一致：
top: initial; right: initial;等属性被包裹在/* #ifndef dynamic*/守卫中，紧接着被同一规则中的最终值覆盖（如top: 100%）。根据验证，CSSinitial关键字在现代浏览器中已广泛支持（自 2015 年起），不存在兼容性问题。该模式似乎是有意设计的条件编译策略：在非动态模式下包含重置声明，在动态模式下排除。请说明这些
initial重置的具体用途——是否为了避免层叠问题，还是作为动态模式的优化措施。如无必要，可直接使用最终值来简化代码。src/packages/formitem/formitem.scss (1)
175-178: RTL 布局中左对齐表单标签的必填标识位置需要验证。注释掉的
.required定位规则仅影响特定场景（RTL 方向 + form-layout-left 布局），该规则原本用于在此场景下正确翻转必填标识的位置。注释后，RTL + form-layout-left 组合下的必填标识可能会显示在错误的位置（继承 LTR 的left: -10px而非 RTL 应有的right定位）。此外，该文件变更与 PR 标题描述的"修正 Steps 组件"和"Price 多端结构统一"无关，建议确认此改动是否属于本 PR 范围。
需要确认：
- 此修改是否为有意调整，还是遗漏或临时状态？
- 在 RTL 场景下使用 form-layout-left 时，必填标识是否仍能正确显示？
- 若此规则确实不需要，请完全删除而非保留注释。
src/packages/divider/divider.scss (1)
48-53: 这个变更是为了适配鸿蒙平台而进行的有意设计，不需要进行修改。条件编译指令
/* #ifdef dynamic */和/* #ifndef dynamic */用于在不同平台之间切换样式。根据提交历史和代码分析：
- dynamic 模式（鸿蒙平台）：使用
display: flex以适应鸿蒙的布局引擎要求- 非 dynamic 模式（Web/H5）：使用
display: inline-flex以保持内联流这种差异化处理是为了在各平台上正确渲染垂直分割线（通常用于内联场景如"文本 | 链接 | 链接"）。测试用例和演示代码均验证了这一设计的有效性。鸿蒙平台的布局系统可以正确处理
flex容器中的对齐需求。Likely an incorrect or invalid review comment.
src/packages/swipe/swipe.taro.tsx (8)
7-7: 导入声明正确新增的
useMemo、useReady和nextTick导入符合代码中的使用场景。Also applies to: 14-14
99-104: wrapperStyle 的记忆化实现正确使用
useMemo缓存样式对象，避免不必要的重新渲染，依赖项设置合理。
130-134: 函数式 setState 更新正确使用函数式更新确保基于最新状态进行修改，这是正确的做法。
138-147: onTouchEnd 实现正确
168-171: open 函数中的状态更新正确
233-252: useEffect 依赖项更新正确，但需注意 Taro 环境限制第 252 行将
close添加到依赖数组是正确的做法。然而，第 234 行的注释"并没有生效"表明在 Taro 小程序环境中，document事件监听器可能无法正常工作。这是 Taro 跨端开发的已知限制。建议验证此功能在目标平台（微信小程序、支付宝小程序等）上的实际行为，如果确实不生效，可以考虑移除此代码或添加平台检测。
116-116: 在卫语句后添加 return 语句第 116 行的卫语句检查
props.disabled后应该立即返回，避免执行后续逻辑。虽然当前代码可能仍然正常工作，但缺少显式的return会降低代码可读性。🔎 应用此修复
const onTouchMove = (event: BaseEventOrig<HTMLDivElement>) => { - if (props.disabled) return + if (props.disabled) { + return + } touch.move(event)Likely an incorrect or invalid review comment.
228-231: 公共 API 无变更 - close 方法签名保持一致
close方法的公共 API 签名没有改变。根据类型定义 (src/types/spec/swipe/base.ts)，SwipeRef接口定义的close方法始终为close: () => void，不接受任何参数。虽然内部close函数实现接受可选的position参数以供内部调用（如在手势计算中），但公共 ref API 通过useImperativeHandle导出时故意不暴露此参数，始终包装为close: () => close()。所有现有代码和示例均调用close()不带参数，不存在兼容性问题。src/packages/navbar/navbar.scss (1)
31-34: 代码变更正确，无需修改此变更使用 Taro 的标准条件编译指令
/* #ifndef dynamic */为 dynamic 平台排除直接的 CSSenv()函数调用。但需注意的是，当safeAreaInsetTop属性为true时，navbar 组件会始终渲染 SafeArea 组件来提供安全区域适配（通过 CSS 变量方式实现），因此 dynamic 平台不会出现内容与状态栏重叠的问题。这是符合平台差异处理的合理设计。Likely an incorrect or invalid review comment.
src/packages/tabpane/tabpane.scss (1)
9-11: 条件编译指令应用正确在动态构建模式下移除
overflow: auto属性，这与 PR 中其他文件的模式保持一致，用于 Taro 多端适配。src/packages/rate/rate.scss (1)
100-105: 多端布局适配合理根据不同的构建模式使用不同的 display 值，这有助于在不同平台上保持一致的布局表现。
src/packages/overlay/overlay.tsx (2)
13-13: 良好的可访问性改进引入
useConfig获取多语言支持，为遮罩层添加无障碍标签，这是一个积极的改进。
84-86: 修复 ARIA 属性命名错误React 中的 ARIA 属性必须使用短横线命名法（kebab-case），而不是驼峰命名法。当前代码使用
ariaLabel不会正确设置 HTML 的aria-label属性，导致无障碍功能失效。🔎 应用此修复
{...(closeOnOverlayClick - ? { ariaLabel: ariaLabel || locale.mask } + ? { 'aria-label': ariaLabel || locale.mask } : {})}⛔ Skipped due to learnings
Learnt from: oasis-cloud Repo: jdf2e/nutui-react PR: 2700 File: src/packages/animatingnumbers/animatingnumbers.harmony.css:25-32 Timestamp: 2024-11-06T05:56:06.800Z Learning: 在优化 NutUI React 动画性能时，添加 `will-change` 属性可能会对布局产生影响，需要谨慎使用。Learnt from: oasis-cloud Repo: jdf2e/nutui-react PR: 2540 File: src/packages/trendarrow/trendarrow.taro.tsx:29-30 Timestamp: 2024-11-06T02:16:07.069Z Learning: 在`TrendArrow`组件（`src/packages/trendarrow/trendarrow.taro.tsx`）中，CSS变量在鸿蒙系统（Harmony OS）中可能未被完全支持，导致兼容性问题。因此，使用硬编码的十六进制颜色值可以确保在鸿蒙系统上的正确显示。src/packages/button/button.scss (1)
58-60: 动态构建下的指针事件处理正确在动态构建模式下为
::before伪元素添加pointer-events: none，可以防止伪元素捕获点击事件，这对于 Taro 环境下的触摸交互非常重要。src/packages/indicator/indicator.scss (1)
113-115: 盒模型条件处理符合预期在非动态构建下应用
box-sizing: content-box，确保在不同平台上的布局一致性。src/locales/base.ts (1)
11-11: 多语言接口扩展合理新增
close和mask字段扩展了多语言支持，为组件提供更好的无障碍体验。接口结构清晰正确。Also applies to: 144-144
src/locales/en-US.ts (1)
13-13: 英文翻译准确且结构正确为新增的
close和mask字段提供了正确的英文翻译，与base.ts接口定义保持一致。Also applies to: 143-143
src/packages/ellipsis/ellipsis.scss (1)
21-23: 宽度属性的条件控制合理在非动态构建模式下应用
width: fit-content，与 PR 中其他组件的处理方式保持一致，有助于多端适配。src/packages/sidebaritem/sidebaritem.scss (1)
10-12: 条件编译语法正确，符合多端适配需求。为
overflow: auto添加#ifndef dynamic保护是合理的，这确保该样式仅在非动态模式下应用，符合 Taro 多端适配的常见模式。src/packages/tour/tour.scss (1)
23-25: 条件编译应用正确。为
box-sizing: content-box添加条件编译保护符合 Taro 多端适配策略，确保盒模型行为在不同构建模式下的正确性。src/packages/loading/loading.scss (1)
2-7: 条件编译实现正确，布局逻辑清晰。根据
dynamic标志切换display: flex和display: inline-flex的实现符合 Taro 多端适配的最佳实践，能够在不同构建模式下提供合适的布局行为。src/packages/timeselect/timeselect.scss (1)
19-21: 条件编译语法正确。为
overflow: auto添加#ifndef dynamic保护与整个 PR 的多端适配策略保持一致，确保滚动行为在不同平台上的正确性。src/packages/segmented/segmented.scss (1)
2-7: 布局条件编译实现正确。根据
dynamic标志在flex和inline-flex之间切换的实现符合多端适配需求，与 PR 中其他组件（如 loading、drag 等）的模式保持一致。src/packages/drag/drag.scss (1)
10-17: 条件编译实现正确，布局属性配置合理。
display属性的条件切换实现正确。注意width: fit-content和height: fit-content仅在非动态模式下应用，这是有意为之的设计，符合不同渲染模式的需求。src/packages/inputnumber/inputnumber.scss (2)
2-7: 条件编译实现正确。根据
dynamic标志切换display属性的实现符合 Taro 多端适配模式，与 PR 中其他组件保持一致。
8-11: 宽度计算重新格式化，逻辑保持不变。
width计算表达式被拆分为多行，但计算逻辑和结果保持不变，这是可接受的代码格式优化。src/packages/avatarcropper/avatarcropper.taro.tsx (1)
140-152: 确认 useReady 的执行时机从
useLayoutEffect迁移到useReady后，初始化逻辑在每次组件 ready 时都会执行。由于该组件在 Popup 中渲染（Line 655-682），请确认：
- canvas 是否会被重复初始化
- 是否需要添加条件判断（如检查
canvasAll.cropperCanvas是否已存在）来避免重复执行基于 learnings：在 Taro 组件中，生命周期钩子的使用需要注意时机和清理。
src/packages/animatingnumbers/countup.scss (1)
3-8: 代码变更符合预期动态编译守卫的使用与项目中其他 SCSS 文件的模式一致（如 skeleton、badge 等）。
flexvsinline-flex的切换是为了适配不同的渲染模式。src/packages/skeleton/skeleton.scss (1)
7-12: LGTM!动态编译守卫的使用与项目模式一致，
display属性的条件化符合跨端适配需求。src/locales/zh-TW.ts (1)
144-144: 检查 mask 键的位置
mask键位于根级别（Line 144），但根据 AI summary，在base.ts中mask应该在watermark对象内。请确认该键的正确位置是否应该在watermark对象内（Line 141-143）。src/packages/range/range.taro.tsx (1)
289-299: LGTM! 正确的 Taro 生命周期用法从
useLayoutEffect迁移到useReady+nextTick是合理的：
useReady确保在 Taro 页面 ready 时执行nextTick确保 DOM 已渲染完成再进行测量- 这与
getRectInMultiPlatform的异步特性配合良好该模式与项目中其他组件的迁移一致（如 avatarcropper.taro.tsx）。
基于 learnings：在 Taro 组件中使用生命周期钩子时需要注意时机，useReady 是页面级生命周期的正确选择。
src/locales/tr-TR.ts (1)
152-152:mask键位置正确根据验证，
mask键在tr-TR.ts第 152 行的根级别位置是正确的。base.ts的类型定义（第 144 行）将mask声明为根级别键，与watermark对象相分离。所有其他 locale 文件（zh-CN.ts、en-US.ts、id-ID.ts 等）也都一致地将mask放在根级别，而非在watermark对象内。此更改无需调整。Likely an incorrect or invalid review comment.
src/packages/actionsheet/actionsheet.scss (1)
65-68: 这是 Taro 动态编译模式下的设计决策，不是潜在问题
safe-area-inset-bottom在 dynamic 模式下被移除是一个系统性的设计决策。整个代码库中多个组件（如 actionsheet、navbar）都遵循这一模式，这表明是有意为之。Taro 框架的 "dynamic" 模式（通常对应 Android 动态框架编译）可能有不同的安全区域处理机制。此外，项目提供了独立的 SafeArea 组件，它在所有编译模式下都无条件地应用env(safe-area-inset-*)。如果对此模式的合理性有疑虑，建议查阅 Taro 框架文档。src/packages/virtuallist/virtuallist.scss (1)
38-40: 移除无效的预处理器注释
/* #ifndef dynamic*/注释不被任何构建工具处理，因此对代码行为没有影响。.nut-virtualList-box的overflow: auto属性在所有编译场景下都会被保留。此外，组件类型定义中不存在dynamic属性。建议移除这些无效的注释，避免代码混淆。Likely an incorrect or invalid review comment.
src/packages/avatarcropper/avatarcropper.scss (1)
62-64: 条件编译保护符合预期通过
#ifndef dynamic条件编译指令保护bottom: inherit属性，这与 PR 中其他组件的动态构建适配模式保持一致。src/packages/notify/notify.scss (1)
78-83: 动态模式下的布局切换实现正确根据
dynamic标志正确切换图标容器的display属性（flexvsinline-flex），与 PR 中其他组件的适配策略一致。src/locales/zh-CN.ts (1)
13-13: 新增本地化字段正确添加了
close和mask两个新的本地化字段，翻译准确，与 BaseLang 接口扩展保持一致。Also applies to: 144-144
src/locales/id-ID.ts (1)
13-13: 印尼语本地化添加完整新增的
close和mask字段翻译为印尼语，与其他语言包的更新保持一致。Also applies to: 144-144
src/packages/rate/rate.taro.tsx (1)
10-10: 生命周期适配符合 Taro 平台规范将初始化逻辑从
useLayoutEffect迁移到 Taro 的useReady钩子是正确的做法。updateRects函数不再使用useCallback缓存，但由于该函数仅在特定位置调用且未作为依赖项使用，这个改动不会引入问题。Also applies to: 134-147
src/packages/elevator/elevator.scss (1)
19-21: 动态构建条件编译配置正确在
list-inner和bars-inner-item中添加的条件编译指令符合动态构建需求，与 PR 整体适配策略一致。Also applies to: 101-106
src/packages/searchbar/searchbar.scss (1)
124-129: 搜索栏布局条件切换实现正确左右容器的
display属性根据dynamic标志正确切换，保持了布局的一致性。src/locales/zh-UG.ts (1)
13-13: 维吾尔语翻译正确
close字段的翻译准确。src/types/spec/dialog/base.ts (1)
37-38: 很好的可访问性增强新增的
confirmBadge、cancelBadge和ariaLabel属性扩展了 Dialog 组件的功能和可访问性支持，实现设计良好。Also applies to: 47-47
src/packages/resultpage/resultpage.scss (1)
9-14: 验证 dynamic 模式下的布局影响新增的条件编译块在 dynamic 模式下将
display从inline-flex改为flex，这可能影响图标元素的布局行为。建议在 dynamic 模式和非 dynamic 模式下都测试该组件，确保布局表现符合预期。src/packages/badge/badge.scss (1)
3-10: 验证 Badge 组件在不同模式下的渲染条件编译块在 dynamic 模式下统一使用
display: flex，在非 dynamic 模式下使用display: inline-flex。这与项目中其他组件的模式保持一致。建议测试徽章在两种模式下的显示效果，特别是在作为内联元素使用时。Also applies to: 46-51
src/packages/lottie/lottiemp.taro.tsx (1)
1-2: Taro 生命周期迁移实现正确从
useLayoutEffect迁移到useReady符合 Taro 最佳实践，新增的setSpeed辅助函数很好地封装了速度和方向的设置逻辑。初始化流程清晰：创建动画 → 添加监听器 → 设置速度。建议在真实设备上测试 Lottie 动画的初始化时机是否正确，特别是在微信小程序和京东小程序环境中。
基于学习经验：在 React/Taro 组件中使用定时器时应当清理，但这里的
useUnload已经正确处理了清理逻辑。Also applies to: 23-28, 31-75
src/packages/steps/steps.scss (3)
89-91: 注意 width: fit-content 在 dynamic 模式下被移除在 dynamic 模式下，
.nut-step-special .nut-step-title的width: fit-content属性被移除。请确认这不会导致标题元素宽度计算异常，特别是在特殊步骤场景下。
119-124: 步骤连接线的 display 属性调整步骤连接线在 dynamic 模式下使用
display: flex，非 dynamic 模式下使用display: inline-flex。这与项目整体的条件编译模式保持一致。
242-244: 验证纵向步骤标题的滚动行为在 dynamic 模式下移除了
overflow: auto，可能影响长标题的显示。建议测试在纵向步骤中使用长标题时的表现。src/styles/theme-default.scss (2)
276-277: 新增字重 Token 完善了字重体系新增的
--nutui-font-weight-medium: 500填补了 400 和 600 之间的字重选项，为组件提供了更灵活的字重选择。
262-263: 字体大小 Token 变更需确认组件影响
--nutui-font-size-l和新增--nutui-font-size-icon这些 Token 变更需要进行全面的组件回归测试。建议检查所有使用这些 Token 的组件，验证布局、文本截断、可读性等是否受到影响。特别关注依赖font-size-l的旧版本组件的向后兼容性。src/packages/popup/doc.md (1)
94-94: 文档更新正确新增的
top属性文档格式正确，描述清晰。与其他属性的文档风格保持一致。src/packages/toast/Notification.tsx (1)
137-137: 无障碍性增强为 Toast 内容容器添加
role="alert"属性是一个很好的无障碍功能改进，能够确保屏幕阅读器及时向用户通知 Toast 消息。这符合 WCAG 无障碍标准。src/sites/sites-react/doc/docs/taro/migrate-from-v2.md (1)
99-102: 中文迁移文档更新准确新增的
top属性说明清晰，准确描述了其用途。文档格式与其他条目保持一致。src/sites/sites-react/doc/docs/react/migrate-from-v2.md (1)
99-102: React 迁移文档更新完整新增的
top属性说明准确地记录了 API 变更，与 Taro 版本的迁移文档保持一致。src/packages/switch/demo.taro.tsx (1)
14-14: ARIA 支持示例添加正确新增的 Demo9 导入、翻译键和渲染逻辑与现有 Demo1-8 的模式保持一致，支持 ARIA 无障碍功能的展示。Demo9 文件已存在且配置完整。
src/packages/popup/demos/taro/demo1.tsx (1)
31-31: 很好的可访问性改进！为弹框的关闭按钮添加了
closeAriaLabel属性，这将改善屏幕阅读器用户的体验。Also applies to: 54-54
src/packages/popup/demos/h5/demo1.tsx (1)
31-31: 很好的可访问性改进！为弹框添加了
closeAriaLabel属性，提升了组件的可访问性。与 taro 版本的改动保持一致。Also applies to: 54-54
src/packages/switch/demos/h5/demo9.tsx (1)
1-11: LGTM！新增的 Demo9 示例清晰地展示了 Switch 组件的
ariaLabel属性用法，有助于推广可访问性功能的使用。src/packages/checkbox/checkbox.taro.tsx (2)
201-201: 增强状态样式能力。添加了
active状态的 CSS 类名，配合 SCSS 中的条件编译指令，可以更灵活地控制选中状态下的样式表现。
207-209: 优秀的可访问性增强！添加的 ARIA 属性大大提升了组件的可访问性：
ariaRole="checkbox"正确声明了组件角色tabIndex根据禁用状态动态设置，确保键盘导航的正确性ariaChecked正确处理了三种状态：选中、未选中和不确定（mixed）这些改进将显著改善屏幕阅读器用户的体验。
src/packages/radio/radio.scss (1)
52-57: 条件编译指令的一致性应用。与
checkbox.scss中的改动保持一致，使用了相同的条件编译模式来控制display属性。这种一致性很好，但同样需要验证构建系统对这些指令的支持。请参考
checkbox.scss文件的评审意见，确认项目构建配置正确支持这些条件编译指令。src/packages/checkbox/checkbox.scss (1)
68-73: 确认条件编译指令的 Taro 处理流程。代码中使用的
/* #ifdef dynamic*/和/* #ifndef dynamic*/指令遵循 Taro 框架的条件编译规范。Taro 支持指定平台保留的/* #ifdef %PLATFORM% */和指定平台排除的/* #ifndef %PLATFORM% */语法。这些指令不是标准 SCSS 特性，而是 Taro 预处理器在编译时处理的平台条件指令。请确认：
- 项目的 Taro 构建配置已正确启用这些指令的处理
- "dynamic" 标志符是否在项目的 Taro 配置中定义
- 最终的 CSS 输出是否正确移除了未命中条件的代码块
src/packages/toast/toast.scss (2)
105-114: harmony 兼容性处理正确针对
&-title的 harmony dynamic 条件块正确地将line-height覆盖为normal，以确保在鸿蒙系统上的正确显示。根据已有的学习经验，这种处理方式符合鸿蒙系统的兼容性要求。
95-103: 确认height: auto的放置位置第 102 行的
height: auto位于 harmony dynamic 条件块之外，这意味着它会无条件应用于所有平台。建议确认这是否为预期行为。对比&-title块的结构（条件属性完全包含在#ifdef块内），此处的放置方式存在差异——如果height: auto仅应在 harmony 动态模式下生效，应将其移至条件块内部。src/packages/switch/switch.scss (2)
65-72: 同样需要验证 label 的 display 变更
&-label也有相同的display属性变更（inline-flex→flexin dynamic mode）。这个变更会影响标签的布局行为，建议一并验证其影响。
1-9: display 属性变更已通过 flex: 0 0 auto 约束进行了安全处理
.nut-switch的display属性在dynamic模式（Harmony 平台）和非 dynamic 模式（H5）之间进行了条件编译切换。通过第 20 行的flex: 0 0 auto约束，确保了元素的大小不会被压缩，从而消除了flex和inline-flex之间的布局差异。现有所有使用场景中，Switch 组件均被封装在 Cell 或 Space 等容器内，不存在直接暴露的内联使用，该变更不会破坏现有布局。src/packages/noticebar/demos/taro/demo10.tsx (2)
5-10: 测试数据的文本扩展合理向列表项添加 "-公告栏公告栏公告栏公告栏" 后缀是为了测试文本溢出和省略号功能，这与新增的
scrollable={false}和文本截断样式配合使用。实现符合演示目的。
16-37: 文本截断样式实现正确添加的样式属性正确实现了文本截断效果：
overflow: hidden- 隐藏溢出内容whiteSpace: nowrap- 防止文本换行textOverflow: ellipsis- 显示省略号配合
scrollable={false}属性，可以正确展示单行文本截断效果。src/packages/switch/demo.tsx (3)
11-11: 新增 Demo9 导入正确成功导入了新的 ARIA 支持演示组件。
14-47: 多语言翻译完整为
supportARIA正确添加了三种语言的翻译：
- zh-CN: 支持ARIA
- zh-TW: 支持ARIA
- en-US: Support ARIA
翻译覆盖全面，符合国际化要求。
68-69: Demo9 渲染集成正确新的 ARIA 演示组件已正确集成到演示页面中，使用了对应的翻译标题。
src/packages/checkbox/checkbox.tsx (1)
199-218: 优秀的无障碍增强实现为 Checkbox 组件添加了完整的 ARIA 属性支持：
- role="checkbox" - 明确声明元素角色
- tabIndex - 正确处理焦点管理（禁用时 -1，启用时 0）
- aria-checked - 正确处理三态：选中(true)、未选中(false)、不确定('mixed')
- active 状态类 - 为选中状态提供视觉反馈
这些改进显著提升了组件的可访问性，符合 WCAG 标准。实现逻辑正确，考虑周全。
src/packages/radio/demos/taro/demo1.tsx (1)
4-24: ariaLabel 添加得当为三个 Radio 组件添加了描述性的
ariaLabel属性：
- "选项1" - 基础选项
- "选项1-左对齐" - 描述了布局特性
- "选项1-禁用" - 描述了禁用状态
标签描述清晰，有助于屏幕阅读器用户理解各选项的状态和特性，提升了无障碍体验。
src/packages/switch/demos/taro/demo9.tsx (1)
1-11: 新增 ARIA 演示组件实现良好新的 Demo9 组件清晰地展示了 Switch 组件的 ARIA 支持：
- 使用了描述性的
ariaLabel="开关按钮"- 代码简洁明了，聚焦于无障碍特性的展示
- 遵循了现有演示组件的模式
这是一个很好的无障碍功能演示示例。
src/packages/radio/demos/h5/demo1.tsx (1)
4-24: H5 与 Taro 版本保持一致H5 演示组件添加的
ariaLabel属性与 Taro 版本完全一致：
- "选项1"
- "选项1-左对齐"
- "选项1-禁用"
这种跨平台一致性确保了在不同环境下都能提供相同的无障碍体验，值得肯定。
src/packages/radio/radio.taro.tsx (1)
140-152: 无障碍属性增强良好！为 Radio 组件添加 ARIA 属性是正确的做法。
ariaRole="radio"、ariaChecked、ariaDisabled的语义使用正确，能够帮助屏幕阅读器用户理解组件状态。关于
@ts-ignore注释：这表明@tarojs/components的类型定义可能不完整。建议后续关注 Taro 官方是否更新了相关类型定义，以便移除此忽略注释。src/packages/noticebar/noticebar.scss (1)
38-48: 条件编译模式正确应用于平台兼容性。使用
/* #ifndef dynamic */条件注释包裹flex: initial和display: initial属性，符合项目中针对 dynamic/harmony 平台的兼容性处理模式。基于已知的鸿蒙系统 CSS 兼容性问题，这种处理方式是合理的。src/packages/menuitem/menuitem.scss (1)
31-41: 条件编译处理 display 属性符合规范。根据 dynamic 标志选择
display: flex或display: inline-flex，与项目中其他组件的处理方式保持一致。src/packages/switch/switch.taro.tsx (1)
85-96: Switch 组件无障碍增强实现正确。
ariaRole="switch"使用了正确的语义角色ariaChecked={value}正确反映开关状态tabIndex={disabled ? -1 : 0}的逻辑正确：启用时可聚焦（0），禁用时排除焦点序列（-1）- 与
radio.taro.tsx保持一致的实现模式
@ts-ignore注释的使用与 Radio 组件一致，建议在 Taro 类型定义更新后统一移除。src/packages/toast/toast.taro.tsx (1)
181-181: 提升无障碍访问性。添加
ariaRole="alert"是正确的做法，确保 Toast 通知能被屏幕阅读器正确播报。src/packages/dialog/dialog.tsx (1)
222-228: 关闭按钮无障碍属性改进良好。添加
role="button"、tabIndex={0}和aria-label={locale.close}使关闭图标对屏幕阅读器和键盘用户更友好。src/packages/dialog/dialog.taro.tsx (1)
252-259: 关闭按钮无障碍属性添加正确。Taro 版本使用
ariaRole、ariaLabel属性（符合 Taro 组件命名规范）为关闭按钮提供无障碍支持。@ts-ignore注释表明tabIndex可能存在类型定义问题，建议后续更新 Taro 类型定义后移除该忽略。src/packages/noticebar/noticebar.taro.tsx (4)
73-76: 使用 useUuid 生成唯一 ID 是正确的做法。通过
useUuid为 wrap 和 content 元素生成唯一 ID，解决了多实例场景下的元素选择器冲突问题，这与getRectInMultiPlatform的 harmonyId 参数配合良好。
155-183: initScrollWrap 重构改进了可靠性。使用
nextTick替代setTimeout更符合 Taro 的生命周期机制。Line 168 添加的空值检查if (!warpRes || !contentRes) return有效防止了后续代码因无效 rect 数据导致的潜在错误。
219-227: handleClickIcon 使用 useCallback 包装正确。依赖数组
[close, onClose, closeable]包含了所有使用到的外部变量，memoization 实现正确。
139-142: 定时器清理逻辑正确。基于 learnings，组件卸载时通过
clearInterval(timer)清理定时器是防止内存泄漏的正确做法。src/styles/variables-jmapp.scss (1)
106-107: Dialog 相关新 token 与其它主题保持一致，LGTM新增
$font-weight-medium以及一组 dialog 标题/按钮边框/badge 变量，命名、默认值和其它主题文件对齐，方便统一皮肤定制，未发现风险。Also applies to: 1487-1573
src/packages/popup/popup.taro.tsx (2)
74-96: 新增 top 槽与高度计算逻辑整体合理，但请确认是否需要支持运行时变更通过
getRectInMultiPlatformWithoutCache+pxTransform计算弹层高度，并把top槽用bottom: topBottom悬浮在弹层上方，这条链路和组件内其它测量逻辑一致，正常打开/关闭场景下没有明显边界问题。需要注意的是：当前
useEffect只依赖innerVisible，如果在弹层已打开后才动态传入或切换top内容，bottom不会重新计算，这种用法如存在，建议酌情把top或其它触发条件加入依赖，或提供手动刷新入口。Also applies to: 105-130, 159-174, 219-230, 341-363
23-24: Taro 端关闭按钮无障碍增强合理，建议在各端实际验证 ARIA 属性Taro 版通过
useConfig引入locale.close，并为关闭按钮容器增加ariaRole="button"与ariaLabel={closeAriaLabel || locale.close}，整体是不错的无障碍增强。建议在各 Taro 端实际跑一遍 Popup 示例，确认：
- 生成的小程序/端侧节点上确实出现预期的 ARIA 属性；
- 未配置
closeAriaLabel时，各语言 locale 的close文案是否正确。Also applies to: 95-96, 112-113, 198-213
src/packages/popup/popup.tsx (1)
94-107: Web 端 top 槽与位置计算实现清晰，但异步高度变化时不会自动更新Web 版通过
topNodeRef+useEffect在每次innerVisible变化时，将 top 区域的bottom设为弹层当前clientHeight，并在renderPop中先渲染renderTop()再渲染标题与内容，整体逻辑简单直接。同样需要留意：如果弹层内容在打开后异步撑高（如列表加载），目前不会重新调整
topNodeRef.style.bottom。如果有这类场景，后续可以考虑把更多依赖（如数据长度）加入 effect，或暴露一个手动刷新方法。Also applies to: 151-156, 202-209, 298-324
src/styles/variables-jrkf.scss (1)
129-130: JRKF 主题的字体字重与 dialog badge token 扩展合理JRKF 主题下补齐了
$font-weight-medium以及 dialog 标题间距、footer 按钮边框和 badge 相关变量，默认值与其它主题/全局变量文件保持一致，增加了主题可定制粒度，目前看没有兼容性风险。Also applies to: 1617-1685
src/styles/variables.scss (3)
155-158: 基础字体与字重 token 扩展合理，方便统一控制字号与中粗字重新增
$font-size-icon与$font-weight-medium，并微调$font-size-l默认值，有利于统一图标字号和中号字重配置；整体与后面各组件的使用方式（如 checkbox/radio 图标）保持一致，未发现问题。Also applies to: 162-166
1082-1085: Popup/Dialog 标题与 footer/badge token 扩展统一，需走查一遍视觉效果Popup 与 Dialog 新增/更新了以下主题变量：
- 提升
$popup-title-font-size、$dialog-header-font-size至$font-size-xl；- 增加
$dialog-title-margin-bottom、$dialog-footer-button-border；- 新增一整套
$dialog-footer-badge-*变量（高度、字号、内边距、位置与主/次按钮颜色等）。命名与其它主题文件保持一致，方便统一皮肤定制。由于标题字号和间距整体变大，对话框在小屏和内容较多时可能更“占空间”，建议在常用 Dialog 场景（含长文案、双按钮等）实际查看，确认没有溢出、断行异常或布局挤压。
Also applies to: 1397-1470
1508-1511: Checkbox/Radio 图标统一采用$font-size-icon，请验证与文案字号的协调性
$checkbox-icon-font-size与$radio-icon-font-size均改为$font-size-icon（16px 默认），相较之前会略大一些，有利于触达感和可读性。建议在勾选框/单选组密集场景（如表单列表、多选面板）简单过一遍，确认图标与文字之间的大小和间距协调。
Also applies to: 1549-1552
| "@babel/runtime": "^7.23.9", | ||
| "@nutui/icons-react": "^3.0.2-beta.5", | ||
| "@nutui/icons-react-taro": "^3.0.2-beta.3", | ||
| "@nutui/icons-react-taro": "3.0.2-cpp.3.beta.3", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's find and read the package.json file
cd . && pwd
git ls-files package.jsonRepository: jdf2e/nutui-react
Length of output: 92
🏁 Script executed:
# Count lines and read the relevant sections
wc -l package.jsonRepository: jdf2e/nutui-react
Length of output: 77
🏁 Script executed:
# Read lines around 112 and 245 in package.json
sed -n '105,120p' package.json
sed -n '240,250p' package.jsonRepository: jdf2e/nutui-react
Length of output: 809
🏁 Script executed:
# Also search for the resolutions section
grep -n "resolutions" package.jsonRepository: jdf2e/nutui-react
Length of output: 83
🏁 Script executed:
# Read the resolutions section and nearby lines
sed -n '235,246p' package.jsonRepository: jdf2e/nutui-react
Length of output: 363
🏁 Script executed:
# Search for all occurrences of @nutui/icons-react-taro with line numbers
rg -n "@nutui/icons-react-taro" package.jsonRepository: jdf2e/nutui-react
Length of output: 167
解决依赖版本不一致问题
@nutui/icons-react-taro 在 dependencies 中指定为精确版本 3.0.2-cpp.3.beta.3（第 112 行），但在 resolutions 中使用 ^3.0.2-cpp.1（第 245 行）。这两个版本范围不匹配，resolutions 中的范围可能导致安装不同的版本，破坏依赖一致性。请统一这两处的版本指定。
| watermark: { | ||
| errorCanvasTips: 'Canvas نى قوللىمايدۇ', | ||
| }, | ||
| mask: 'mask', |
There was a problem hiding this comment.
本地化字段未翻译
mask 字段使用了英文 'mask' 而非维吾尔语翻译，与文件中其他字段的完整翻译不一致。建议补充维吾尔语翻译以保持本地化的完整性。
🤖 Prompt for AI Agents
In src/locales/zh-UG.ts around line 142, the localization key mask is left as
the English string 'mask' instead of a Uyghur translation; replace the value
with the proper Uyghur translation (e.g., "نىقاب") so the entry is translated
consistently with the rest of the file.
| // ButtonProps as MiniProgramButtonProps, | ||
| View, | ||
| Button as TaroButton, | ||
| // Button as TaroButton, | ||
| } from '@tarojs/components' | ||
| import { Loading } from '@nutui/icons-react-taro' | ||
| import { getEnv } from '@tarojs/taro' | ||
| import { BasicComponent, ComponentDefaults } from '@/utils/typings' | ||
| import { harmony } from '@/utils/taro/platform' | ||
|
|
||
| type OmitMiniProgramButtonProps = Omit< | ||
| MiniProgramButtonProps, | ||
| 'size' | 'type' | 'onClick' | 'style' | ||
| > | ||
| // type OmitMiniProgramButtonProps = Omit< | ||
| // MiniProgramButtonProps, | ||
| // 'size' | 'type' | 'onClick' | 'style' | ||
| // > |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cd /tmp && find . -name "button.taro.tsx" -o -name "button*" -type f 2>/dev/null | head -20Repository: jdf2e/nutui-react
Length of output: 391
🏁 Script executed:
find /repo -name "button.taro.tsx" -type f 2>/dev/nullRepository: jdf2e/nutui-react
Length of output: 43
🏁 Script executed:
# First, find the file
find . -path "*/packages/button/button.taro.tsx" -o -path "*/button.taro.tsx" 2>/dev/null | head -5Repository: jdf2e/nutui-react
Length of output: 98
🏁 Script executed:
# Find button component files
rg -l "button.taro" . 2>/dev/null | head -10Repository: jdf2e/nutui-react
Length of output: 325
🏁 Script executed:
# List files in src/packages/button directory
ls -la src/packages/button/ 2>/dev/null || find . -type d -name button 2>/dev/null | grep -E "packages|components" | head -5Repository: jdf2e/nutui-react
Length of output: 984
🏁 Script executed:
# Find the button.taro.tsx file
find . -name "button.taro.tsx" 2>/dev/nullRepository: jdf2e/nutui-react
Length of output: 98
🏁 Script executed:
cat src/packages/button/button.taro.tsx 2>/dev/null | head -50Repository: jdf2e/nutui-react
Length of output: 1433
删除已注释的代码，并验证 View 作为按钮容器是否完整支持 Taro 表单功能。
ButtonProps 接口中声明了 nativeType: 'submit' | 'reset'，但使用 View 代替 TaroButton 会导致以下问题需要明确解决：
-
表单提交能力：Taro 中，当表单内 Button 组件的 formType 设置为 submit 时，点击按钮会提交表单内的值。View 组件无法原生支持此功能，nativeType 属性的实现需要通过 JavaScript 事件处理手动完成。
-
小程序特性丧失：使用 View 替代 TaroButton 会失去 WeChat 小程序的 openType、getUserInfo 等扩展功能。
-
类型不匹配：onClick 回调使用
MouseEvent<HTMLButtonElement>类型，这是浏览器类型而非 Taro 兼容类型，需要确认在小程序环境下的行为。
NutUI React 采用平台特定文件命名形式（原文件名 + 端类型）来处理不同平台差异，因此此设计可能是有意的。但需验证：
- nativeType 属性的实际实现是否完整
- 是否存在对应的 button.h5.tsx 实现
- View 的无障碍属性是否已补全（role、aria-* 属性）
🤖 Prompt for AI Agents
In src/packages/button/button.taro.tsx around lines 5 to 16, remove the stale
commented imports and then ensure the replacement View-based button fully covers
Taro/native features: implement nativeType handling by wiring form
submission/reset behavior when nativeType is 'submit'|'reset' (simulate Taro
Button formType via programmatic form submit/reset or emit the proper Taro
events), document or gate unsupported mini-program-only props (openType,
getUserInfo) or reintroduce Taro Button for those cases, change the onClick
typing from DOM MouseEvent<HTMLButtonElement> to the appropriate Taro event
type, and add accessibility attributes to the View (role="button", tabIndex,
aria-* and keyboard handlers). Also verify there is a platform-specific
button.h5.tsx implementation or add one if needed so behavior differs per
platform.
| | 'nutuiDialogFooterBadgeHeight' | ||
| | 'nutuiDialogFooterBadgeFontsize' | ||
| | 'nutuiDialogFooterBadgePadding' | ||
| | 'nutuiDialogFooterBadgeTop' | ||
| | 'nutuiDialogFooterBadgeBorderRadius' | ||
| | 'nutuiDialogFooterBadgeBgOk' | ||
| | 'nutuiDialogFooterBadgeColorOk' | ||
| | 'nutuiDialogFooterBadgeBgCancel' | ||
| | 'nutuiDialogFooterBadgeColorCancel' |
There was a problem hiding this comment.
修正命名不一致问题。
Line 475 的 nutuiDialogFooterBadgeFontsize 使用了小写的 's'（"Fontsize"），但整个文件中的其他字体大小相关变量都使用大写的 'S'（"FontSize"），例如：
- Line 98:
nutuiButtonDefaultFontSize - Line 106:
nutuiButtonLargeFontSize - Line 137:
nutuiCellTitleFontSize
为保持命名规范的一致性，建议修正此变量名。
🔎 应用此修复以保持命名一致性：
| 'nutuiDialogFooterBadgeHeight'
- | 'nutuiDialogFooterBadgeFontsize'
+ | 'nutuiDialogFooterBadgeFontSize'
| 'nutuiDialogFooterBadgePadding'📝 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.
| | 'nutuiDialogFooterBadgeHeight' | |
| | 'nutuiDialogFooterBadgeFontsize' | |
| | 'nutuiDialogFooterBadgePadding' | |
| | 'nutuiDialogFooterBadgeTop' | |
| | 'nutuiDialogFooterBadgeBorderRadius' | |
| | 'nutuiDialogFooterBadgeBgOk' | |
| | 'nutuiDialogFooterBadgeColorOk' | |
| | 'nutuiDialogFooterBadgeBgCancel' | |
| | 'nutuiDialogFooterBadgeColorCancel' | |
| | 'nutuiDialogFooterBadgeHeight' | |
| | 'nutuiDialogFooterBadgeFontSize' | |
| | 'nutuiDialogFooterBadgePadding' | |
| | 'nutuiDialogFooterBadgeTop' | |
| | 'nutuiDialogFooterBadgeBorderRadius' | |
| | 'nutuiDialogFooterBadgeBgOk' | |
| | 'nutuiDialogFooterBadgeColorOk' | |
| | 'nutuiDialogFooterBadgeBgCancel' | |
| | 'nutuiDialogFooterBadgeColorCancel' |
🤖 Prompt for AI Agents
In src/packages/configprovider/types.ts around lines 474 to 482, the union
member named "nutuiDialogFooterBadgeFontsize" uses a lowercase 's' inconsistent
with the project convention; rename it to "nutuiDialogFooterBadgeFontSize" and
update any references/uses (types, keys, tests, and consumers) accordingly to
preserve consistency and prevent type mismatches.
| confirmBadge: 'ges', | ||
| cancelBadge: 'ddddd', |
There was a problem hiding this comment.
Demo 示例值建议使用有意义的文案。
当前 confirmBadge: 'ges' 和 cancelBadge: 'ddddd' 看起来是临时测试值。作为组件文档的一部分，建议使用更具语义的示例值，如 '推荐'、'新功能' 等，以便开发者理解 badge 的实际用途。
🔎 建议修改
- confirmBadge: 'ges',
- cancelBadge: 'ddddd',
+ confirmBadge: '推荐',
+ cancelBadge: '稍后',📝 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.
| confirmBadge: 'ges', | |
| cancelBadge: 'ddddd', | |
| confirmBadge: '推荐', | |
| cancelBadge: '稍后', |
🤖 Prompt for AI Agents
In src/packages/dialog/demos/taro/demo1.tsx around lines 14 to 15, the demo uses
placeholder badge texts confirmBadge: 'ges' and cancelBadge: 'ddddd'; replace
these with meaningful, semantic example strings (e.g., '推荐', '新功能', '热卖', or
'限时') that reflect realistic badge usage so the demo communicates the component
intent clearly; update both confirmBadge and cancelBadge to appropriate Chinese
labels consistent with the demo context.
| | minHeight | 设置最小高度 | `string` | `26%` | | ||
| | left | 标题左侧部分 | `ReactNode` | `-` | | ||
| | title | 标题中间部分 | `ReactNode` | `-` | | ||
| | top | 頂部佔位 | `ReactNode` | `-` | |
There was a problem hiding this comment.
检查文档中的繁简体一致性
新增的 top 属性描述使用了繁体中文"頂部佔位"，但文件其余部分使用简体中文。请确认这是否是预期行为。
建议修复
如果应该使用简体中文，请应用以下修改：
-| top | 頂部佔位 | `ReactNode` | `-` |
+| top | 顶部占位 | `ReactNode` | `-` |📝 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.
| | top | 頂部佔位 | `ReactNode` | `-` | | |
| | top | 顶部占位 | `ReactNode` | `-` | |
🤖 Prompt for AI Agents
In src/packages/popup/doc.taro.md around line 104, the newly added `top` prop
description uses Traditional Chinese "頂部佔位" while the rest of the document is in
Simplified Chinese; change that phrase to the Simplified Chinese equivalent
"顶部占位" to keep language consistent across the file.
| &-top { | ||
| position: absolute; | ||
| } |
There was a problem hiding this comment.
样式规则可能不完整。
新增的 .nut-popup-bottom-top 选择器仅设置了 position: absolute，但缺少具体的定位属性（如 top、left、right、bottom）和 z-index 等。这可能导致该元素无法正确定位。
🔎 建议补充完整的定位属性
&-top {
position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
}或者，如果这是有意为之（例如由 JS 动态控制定位），请考虑添加注释说明。
📝 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.
| &-top { | |
| position: absolute; | |
| } | |
| &-top { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| } |
🤖 Prompt for AI Agents
In src/packages/popup/popup.scss around lines 102 to 104, the
.nut-popup-bottom-top rule only sets position: absolute and lacks concrete
positioning properties (top/right/bottom/left) and z-index, which can cause
incorrect placement; update the rule to include the appropriate
top/left/right/bottom values and a z-index to ensure correct stacking and
positioning (or, if positioning is intended to be controlled entirely by JS, add
a clear comment above the rule explaining that and referencing the JS code that
sets the offsets).
| const getWidth = async () => { | ||
| if (leftWrapper.current) { | ||
| const leftRect = await getRectInMultiPlatform(leftWrapper.current, leftId) | ||
| leftRect && setActionWidth((v: any) => ({ ...v, left: leftRect.width })) | ||
| } | ||
| if (rightWrapper.current) { | ||
| const rightRect = await getRectInMultiPlatform( | ||
| rightWrapper.current, | ||
| rightId | ||
| ) | ||
| rightRect && | ||
| setActionWidth((v: any) => ({ ...v, right: rightRect.width })) | ||
| } | ||
| } | ||
|
|
||
| // 获取元素的时候要在页面 onReady 后，需要参考小程序的事件周期 | ||
| useReady(() => { | ||
| nextTick(() => getWidth()) | ||
| }) |
There was a problem hiding this comment.
修复 setActionWidth 调用中的严重逻辑错误
在第 52 行和第 59-60 行，setActionWidth 被调用时传入的回调函数期望接收参数 v（例如 (v: any) => ({ ...v, left: leftRect.width })），但 setActionWidth 的实现（第 84-98 行）调用 fn() 时没有传递任何参数。这会导致 v 为 undefined，展开运算符 ...v 将会失败。
🔎 应用此修复
const getWidth = async () => {
if (leftWrapper.current) {
const leftRect = await getRectInMultiPlatform(leftWrapper.current, leftId)
- leftRect && setActionWidth((v: any) => ({ ...v, left: leftRect.width }))
+ leftRect && setActionWidth({ left: leftRect.width })
}
if (rightWrapper.current) {
const rightRect = await getRectInMultiPlatform(
rightWrapper.current,
rightId
)
- rightRect &&
- setActionWidth((v: any) => ({ ...v, right: rightRect.width }))
+ rightRect && setActionWidth({ right: rightRect.width })
}
}同时更新 setActionWidth 的实现：
- const setActionWidth = (fn: any) => {
- const res = fn()
+ const setActionWidth = (updates: { left?: number; right?: number }) => {
- if (res.left !== undefined) {
+ if (updates.left !== undefined) {
updateState({
...actionWidth.current,
- left: res.left,
+ left: updates.left,
})
}
- if (res.right !== undefined) {
+ if (updates.right !== undefined) {
updateState({
...actionWidth.current,
- right: res.right,
+ right: updates.right,
})
}
}Committable suggestion skipped: line range outside the PR's diff.
| /* #ifndef dynamic*/ | ||
| display: table; | ||
| width: max-content; | ||
| /* #endif */ |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's find and read the table.scss file
find . -name "table.scss" -type f | head -5Repository: jdf2e/nutui-react
Length of output: 92
🏁 Script executed:
# Read the table.scss file to examine the mentioned lines
cat -n ./src/packages/table/table.scss | head -150Repository: jdf2e/nutui-react
Length of output: 4068
🏁 Script executed:
# Search for table-related test files to understand intended behavior
find . -path "*/node_modules" -prune -o -name "*table*test*" -o -name "*table*.test.*" | grep -E "(test|spec)" | head -10Repository: jdf2e/nutui-react
Length of output: 43
🏁 Script executed:
# Search for references to "dynamic" mode in table-related files
rg "dynamic" ./src/packages/table/ -iRepository: jdf2e/nutui-react
Length of output: 422
修复 Line 138 的表格语义错误
Line 138 中 &-body 使用了 display: table-header-group，但这对应的是 <thead> 元素。表格主体应使用 display: table-row-group 来对应 <tbody> 元素。建议将 Line 138 的 table-header-group 更正为 table-row-group。
🤖 Prompt for AI Agents
In src/packages/table/table.scss around line 138 (review refers to &-body), the
selector for the table body is using display: table-header-group which
corresponds to a <thead>; change it to display: table-row-group to correctly
represent a <tbody> element and restore proper table semantics and layout.
|
|
||
| // 适配 安卓 处理，临时方案，hack | ||
| if (td()) { | ||
| return { | ||
| transform: | ||
| direction === 'horizontal' | ||
| ? `translate3d(${rtl ? '' : '-'}${index * 50}%, 0, 0)` | ||
| : `translate3d( 0, -${index * 50}%, 0)`, | ||
| transitionDuration: `${duration}ms`, | ||
| } | ||
| } |
There was a problem hiding this comment.
请验证 50% 变换值是否正确，并补充说明
Android 特定分支使用 50% 而非标准的 100% 进行变换。Android 在计算百分比变换时，对参考框的推断与 iOS/H5 不同，导致百分比值的解释不同。这可能导致标签页内容定位不正确或出现重叠。
需要确认：
50%是否是正确的补偿值来抵消 Android 的百分比计算差异？- 是否有相关的测试用例验证此值在 Android 设备上的正确性？
建议：
- 在注释中详细说明为什么 Android 需要使用
50%而不是100%，引用相关的 Android 渲染差异 - 添加 TODO 注释跟踪此临时方案的后续处理或移除计划，包括指向相关 issue 的链接
- 考虑提取公共的 transform 逻辑以减少代码重复
4 participants
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.