feat(switch): 适配 v16 - #3483
Merged
Merged
feat(switch): 适配 v16#3483
Conversation
github-actions
Bot
added
the
action:review
|
Caution Review failedPull request was closed or merged during review No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
Walkthrough此 PR 统一更新 Switch 组件的设计 token 与样式系统：重定义 SCSS 变量默认值，将样式计算从 SASS 变量迁移为 CSS 自定义属性，更新主题色语义，并在类型定义与多语言文档中同步变更。 ChangesSwitch 组件 Token 与样式重构
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## feat_v4.x #3483 +/- ##
=============================================
+ Coverage 88.33% 88.42% +0.09%
=============================================
Files 295 295
Lines 19747 19727 -20
Branches 3117 3116 -1
=============================================
+ Hits 17443 17444 +1
+ Misses 2298 2277 -21
Partials 6 6 ☔ View full report in Codecov by Harness. 🚀 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: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/packages/switch/switch.scss`:
- Around line 72-76: The .nut-icon rule currently uses the background token
$switch-active-disabled-background-color which is semantically wrong for icon
color; update the .nut-icon selector to use a proper text/icon color token (e.g.
$switch-label-text-color or $color-primary, or introduce a new
$switch-icon-color token) so the icon contrasts with the switch background;
locate the .nut-icon block in switch.scss and replace the color token
accordingly to match the label icon usage on Line 91.
In `@src/styles/theme-dark.scss`:
- Line 136: The dark theme defines --nutui-color-primary-text using
var(--nutui-white-13) but --nutui-white-13 is missing (commented out), causing
text color to be empty or inherit wrong value; in the .nut-theme-dark scope
restore or add the missing variable by uncommenting/defining --nutui-white-13
(e.g., set --nutui-white-13 to an appropriate rgba value) so that
--nutui-color-primary-text resolves correctly for components like Switch and
Button.
In `@src/styles/variables.scss`:
- Line 1060: 检查并修正 $switch-inside-border-radius 的取值：当前在
src/styles/variables.scss 用的是 $radius-circle（定义为 scale-px(50px) —— 固定
50px），这会在内部按钮非正方形（例如 32×20）时导致不正确的胶囊形。确认设计意图后要么将 $switch-inside-border-radius
恢复为 $radius-full（50% 相对值，能适配任意宽高），要么修改 $radius-circle 为相对值（如 50% 或新增
$radius-circle-percent）并替换使用处；定位符号参考
$switch-inside-border-radius、$radius-full、$radius-circle、scale-px(50px)。
In `@src/utils/scale-f.ts`:
- Around line 2-4: The SKILL.md doc still says getScaleF prefers
jmfe.callNative; update the documentation for the nutui-proportional-scaling
skill to reflect the new contract: state that getScaleF computes the responsive
scale by viewport rules (writing --nut-scale-f / --nut-scale-font /
--nut-scale-icon) and no longer prioritizes jmfe.callNative, remove or rewrite
any examples/snippets and phrasing that imply jmfe priority, and ensure
references to getScaleF and calcByProfile (and the CSS variables) are aligned
with the new behavior; also search the same document for other occurrences of
the old jmfe-preference wording and replace them accordingly.
- Around line 110-113: Confirm whether jmfe telemetry should be removed; search
the repo for any remaining bridge-related symbols (callNative,
DongScreenAdapterPlugin, getScaleByNative) and for global declarations (declare
global / interface Window including jmfe), then if you intend to fully drop jmfe
remove the optional dependency `@jmfe/npm-usage-stats-tool` from scripts/build.mjs
and scripts/build-taro.mjs and any related imports/usages; also ensure getScaleF
(and getScaleByViewport) has no fallback to native bridge and delete any dead
bridge adapter code to avoid lingering references.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 67930ac3-77a7-4db3-a9bc-dbac1867e3bc
📒 Files selected for processing (9)
src/packages/switch/doc.en-US.mdsrc/packages/switch/doc.mdsrc/packages/switch/doc.taro.mdsrc/packages/switch/doc.zh-TW.mdsrc/packages/switch/switch.scsssrc/styles/theme-dark.scsssrc/styles/theme-default.scsssrc/styles/variables.scsssrc/utils/scale-f.ts
Comment on lines
+72
to
+76
| .nut-icon { | ||
| width: calc(var(--nut-switch-height) * 0.5); | ||
| height: calc(var(--nut-switch-height) * 0.5); | ||
| color: $switch-active-disabled-background-color; | ||
| } |
There was a problem hiding this comment.
检查 icon 颜色语义：不应使用背景色 token 作为 icon 颜色。
Lines 72-76 将 .nut-icon 的颜色设置为 $switch-active-disabled-background-color，这在语义上不正确：
$switch-active-disabled-background-color是一个背景颜色 token，用于禁用状态的背景- 作为 icon 颜色使用时，应该选择与按钮背景形成对比的文本/icon 颜色 token
相比之下，Line 91 的标签内 icon 正确使用了 $switch-label-text-color。
建议修改：
- 如果 icon 在打开状态的按钮内，应使用与
$color-primary-text（按钮背景）对比的颜色，可能是$color-primary或新增的 icon 专用 token
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/packages/switch/switch.scss` around lines 72 - 76, The .nut-icon rule
currently uses the background token $switch-active-disabled-background-color
which is semantically wrong for icon color; update the .nut-icon selector to use
a proper text/icon color token (e.g. $switch-label-text-color or $color-primary,
or introduce a new $switch-icon-color token) so the icon contrasts with the
switch background; locate the .nut-icon block in switch.scss and replace the
color token accordingly to match the label icon usage on Line 91.
| $switch-inside-box-shadow: var( | ||
| --nutui-switch-inside-box-shadow, | ||
| 0px scale-px(2px) scale-px(6px) 0px rgba(0, 0, 0, 0.1) | ||
| $radius-circle |
There was a problem hiding this comment.
验证 $radius-circle 的使用是否符合预期。
Line 1060 将 $switch-inside-border-radius 从 $radius-full (50%) 改为 $radius-circle。但 $radius-circle 定义为 scale-px(50px)（一个具体的像素值），而非 50% 的相对值。当内部按钮尺寸不是完全正方形时（当前 32px×20px），这会导致视觉效果不同。
- 如果 inside-width/height 的比例不是 1:1，使用 50px 的固定圆角可能无法形成正确的胶囊形。
- 建议确认这是有意的设计变更，还是应该保持使用
$radius-full(50%) 以适配任何大小的内部按钮。
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/styles/variables.scss` at line 1060, 检查并修正 $switch-inside-border-radius
的取值：当前在 src/styles/variables.scss 用的是 $radius-circle（定义为 scale-px(50px) —— 固定
50px），这会在内部按钮非正方形（例如 32×20）时导致不正确的胶囊形。确认设计意图后要么将 $switch-inside-border-radius
恢复为 $radius-full（50% 相对值，能适配任意宽高），要么修改 $radius-circle 为相对值（如 50% 或新增
$radius-circle-percent）并替换使用处；定位符号参考
$switch-inside-border-radius、$radius-full、$radius-circle、scale-px(50px)。
Comment on lines
+2
to
4
| * 响应式缩放系数（--nut-scale-f）：按视口宽度计算， | ||
| * 写入根节点 CSS 变量（--nut-scale-f / --nut-scale-font / --nut-scale-icon）， | ||
| * 供布局/字号/icon 等按比例换算（见 calcByProfile）。H5 与 Taro WebView 共用此实现。 |
There was a problem hiding this comment.
请同步更新缩放契约文档，避免“jmfe 优先”旧描述继续误导。
Line 2-4 与 Line 110-112 已明确改为“按视口规则计算”，但 .cursor/skills/nutui-proportional-scaling/SKILL.md 仍描述 getScaleF 优先 jmfe.callNative(...)。建议同 PR 一并更新该说明，避免后续维护与自动化产出继续按旧契约实现。
Also applies to: 110-112
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/utils/scale-f.ts` around lines 2 - 4, The SKILL.md doc still says
getScaleF prefers jmfe.callNative; update the documentation for the
nutui-proportional-scaling skill to reflect the new contract: state that
getScaleF computes the responsive scale by viewport rules (writing --nut-scale-f
/ --nut-scale-font / --nut-scale-icon) and no longer prioritizes
jmfe.callNative, remove or rewrite any examples/snippets and phrasing that imply
jmfe priority, and ensure references to getScaleF and calcByProfile (and the CSS
variables) are aligned with the new behavior; also search the same document for
other occurrences of the old jmfe-preference wording and replace them
accordingly.
Comment on lines
+110
to
113
| /** 统一获取缩放：按视口规则计算 */ | ||
| function getScaleF() { | ||
| return getScaleByViewport() | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# 1) 检索桥接相关调用/标识
rg -n -C2 --type=ts --type=tsx '\bjmfe\b|callNative\s*\(|DongScreenAdapterPlugin|getScaleByNative'
# 2) 检索是否仍存在 Window 全局 jmfe 声明
rg -n -C2 --type=ts --type=tsx 'declare\s+global|interface\s+Window|jmfe'Repository: jdf2e/nutui-react
Length of output: 117
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect target file section
echo "---- scale-f.ts (lines around 90-140) ----"
if [ -f src/utils/scale-f.ts ]; then
nl -ba src/utils/scale-f.ts | sed -n '90,140p'
else
echo "Missing src/utils/scale-f.ts"
fi
echo "---- repo search: jmfe/callNative/DongScreenAdapterPlugin/getScaleByNative ----"
rg -n -C2 -g'*.ts' -g'*.tsx' '\bjmfe\b|callNative\s*\(|DongScreenAdapterPlugin|getScaleByNative' . || true
echo "---- repo search: global Window jmfe declarations ----"
rg -n -C2 -g'*.ts' -g'*.tsx' 'declare\s+global|interface\s+Window|jmfe' . || trueRepository: jdf2e/nutui-react
Length of output: 165
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect target file section
echo "---- scale-f.ts (lines around 90-140) ----"
if [ -f src/utils/scale-f.ts ]; then
nl -ba src/utils/scale-f.ts | sed -n '90,140p'
else
echo "Missing src/utils/scale-f.ts"
fi
echo "---- repo search: jmfe/callNative/DongScreenAdapterPlugin/getScaleByNative ----"
rg -n -C2 -g'*.ts' -g'*.tsx' '\bjmfe\b|callNative\s*\(|DongScreenAdapterPlugin|getScaleByNative' . || true
echo "---- repo search: global Window jmfe declarations ----"
rg -n -C2 -g'*.ts' -g'*.tsx' 'declare\s+global|interface\s+Window|jmfe' . || trueRepository: jdf2e/nutui-react
Length of output: 165
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "---- scale-f.ts (lines 90-140) ----"
if [ -f src/utils/scale-f.ts ]; then
cat -n src/utils/scale-f.ts | sed -n '90,140p'
else
echo "Missing src/utils/scale-f.ts"
fi
echo "---- repo search: jmfe/callNative/DongScreenAdapterPlugin/getScaleByNative ----"
rg -n -C2 '\bjmfe\b|callNative\s*\(|DongScreenAdapterPlugin|getScaleByNative' . || true
echo "---- repo search: global Window jmfe declarations ----"
rg -n -C2 'declare\s+global|interface\s+Window|jmfe' . || trueRepository: jdf2e/nutui-react
Length of output: 3501
src/utils/scale-f.ts：getScaleF 去桥接后，jmfe 残留调用/全局声明检查
代码库内未发现 callNative、DongScreenAdapterPlugin、getScaleByNative 等旧桥接相关调用，也未检出 declare global / interface Window 里包含 jmfe 的全局声明；仓内仅在 scripts/build.mjs / scripts/build-taro.mjs 的 optionalDependencies 中存在 @jmfe/npm-usage-stats-tool。若目标是彻底移除 jmfe 相关依赖，请再确认该可选统计工具是否需要保留。
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/utils/scale-f.ts` around lines 110 - 113, Confirm whether jmfe telemetry
should be removed; search the repo for any remaining bridge-related symbols
(callNative, DongScreenAdapterPlugin, getScaleByNative) and for global
declarations (declare global / interface Window including jmfe), then if you
intend to fully drop jmfe remove the optional dependency
`@jmfe/npm-usage-stats-tool` from scripts/build.mjs and scripts/build-taro.mjs and
any related imports/usages; also ensure getScaleF (and getScaleByViewport) has
no fallback to native bridge and delete any dead bridge adapter code to avoid
lingering references.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit