feat(switch): v14&代码重构 #2779
feat(switch): v14&代码重构 #2779
Conversation
Walkthrough本次变更主要集中在 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Switch
participant Toast
User->>Switch: Toggle
Switch->>Toast: Show state
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Warning Rate limit exceeded@irisSong has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 11 minutes and 13 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #2779 +/- ##
==========================================
Coverage 83.99% 83.99%
==========================================
Files 220 220
Lines 17885 17880 -5
Branches 2679 2679
==========================================
- Hits 15023 15019 -4
+ Misses 2857 2856 -1
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚨 Try these New Features:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (24)
src/packages/switch/demos/h5/demo3.tsx (1)
7-10: 建议增加无障碍支持！组件结构合理，使用 Space 组件来管理布局是个很好的做法。不过建议为禁用状态的开关添加 aria-label 属性，以提升无障碍性。
建议按如下方式修改：
<Space> - <Switch defaultChecked disabled /> - <Switch disabled /> + <Switch defaultChecked disabled aria-label="已选中禁用状态开关" /> + <Switch disabled aria-label="未选中禁用状态开关" /> </Space>src/packages/switch/demos/taro/demo3.tsx (1)
7-10: 布局优化建议：考虑添加间距属性使用
Space组件包装开关组件是一个很好的做法，但建议明确设置间距以确保更好的视觉效果。建议如下修改：
- <Space> + <Space gap={8}> <Switch defaultChecked disabled /> <Switch disabled /> </Space>src/packages/switch/demos/h5/demo6.tsx (1)
5-7: 建议改进事件处理器的类型安全性
event参数使用any类型不够严谨，建议使用更具体的类型。- 建议添加错误处理机制。
建议按如下方式修改：
- const onChange = (value: boolean, event: any) => { + const onChange = (value: boolean, event: React.MouseEvent<HTMLButtonElement>) => { + try { Toast.show(`触发了onChange事件，开关状态：${value}`) + } catch (error) { + console.error('Toast显示失败:', error) + } }src/packages/switch/demos/h5/demo4.tsx (2)
8-11: 建议优化文案长度一致性开关文案长度不一致（"开启"/"关闭" vs "开"/"关"）可能会影响视觉体验。建议统一使用相同长度的文案以保持界面的整齐性。
建议修改如下：
- <Switch defaultChecked activeText="开" inactiveText="关" /> + <Switch defaultChecked activeText="开启" inactiveText="关闭" />
10-11: 建议添加禁用状态的视觉提示对于禁用状态的开关，建议添加 tooltip 或其他视觉提示，以帮助用户理解为什么开关被禁用。
建议添加如下属性：
- <Switch defaultChecked activeText="开启" inactiveText="关闭" disabled /> + <Switch defaultChecked activeText="开启" inactiveText="关闭" disabled title="此功能已禁用" />src/packages/switch/demos/taro/demo4.tsx (2)
8-11: 建议优化开关文案的一致性目前的开关文案存在长短不一的情况（"开启"/"关闭" vs "开"/"关"）。建议：
- 保持文案长度的一致性，统一使用相同长度的文案
- 考虑增加更多实际场景的示例文案，如"启用"/"禁用"、"显示"/"隐藏"等
- <Switch defaultChecked activeText="开" inactiveText="关" /> + <Switch defaultChecked activeText="开启" inactiveText="关闭" />
10-11: 建议添加禁用状态的说明注释为了更好地展示组件的不同状态，建议在禁用状态的 Switch 组件上方添加注释，说明这是禁用状态的展示。
+ {/* 禁用状态 - 默认开启 */} <Switch defaultChecked activeText="开启" inactiveText="关闭" disabled /> + {/* 禁用状态 - 默认关闭 */} <Switch activeText="开启" inactiveText="关闭" disabled />src/packages/switch/demos/taro/demo6.tsx (2)
6-11: 建议优化 Toast 提示信息的格式当前实现功能正确，但可以改进提示信息的可读性。
建议按如下方式修改：
- Taro.showToast({ title: `触发了onChange事件，开关状态：${value}` }) + Taro.showToast({ title: `开关状态已${value ? '开启' : '关闭'}` })
14-17: 建议简化事件处理器的写法当前的事件处理实现可以更简洁。
建议按如下方式简化：
- onChange={(value, event) => onChange(value, event)} + onChange={onChange}这种写法更简洁，因为参数会自动传递给 onChange 函数。
src/packages/switch/demos/h5/demo5.tsx (1)
8-21: 建议增加无障碍支持和代码注释代码结构清晰，使用Space组件实现了良好的布局。但建议做如下改进：
- 为Switch组件添加aria-label，提升无障碍访问性
- 添加注释说明不同Switch的状态和用途
建议按如下方式优化代码：
<Space> <Switch defaultChecked activeText={<Check />} inactiveText={<Close />} + aria-label="基础开关" /> <Switch defaultChecked activeText={<Check />} inactiveText={<Close />} disabled + aria-label="禁用状态开关-开" /> - <Switch activeText={<Check />} inactiveText={<Close />} disabled /> + {/* 禁用状态下的关闭开关 */} + <Switch + activeText={<Check />} + inactiveText={<Close />} + disabled + aria-label="禁用状态开关-关" + /> </Space>src/packages/switch/demos/taro/demo5.tsx (1)
8-21: 建议为图标添加无障碍支持代码实现清晰地展示了开关组件的不同状态，使用
Space组件布局合理。不过，建议为图标添加辅助功能支持。建议按如下方式修改：
<Switch defaultChecked - activeText={<Check />} - inactiveText={<Close />} + activeText={<Check aria-label="已开启" />} + inactiveText={<Close aria-label="已关闭" />} />这样可以提高组件的可访问性，使得使用屏幕阅读器的用户也能理解图标的含义。
src/packages/switch/switch.harmony.css (2)
17-29: 建议优化过渡动画效果按钮定位和尺寸计算的改动很好，但建议考虑优化过渡动画：
- transition: left 0.3s linear; + transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1);这样可以让切换感觉更流畅自然。
72-79: 建议使用设计系统颜色变量禁用状态的样式实现合理，但建议使用设计系统的颜色变量来保持一致性：
.nut-switch-label-close-disabled { - color: #c2c4cc; + color: var(--nut-disabled-color); } .nut-switch-disabled { - background-color: #ffadbe; + background-color: var(--nut-disabled-bg); }src/packages/switch/doc.md (2)
37-67: 文档结构调整合理，建议补充示例说明新增的功能区块组织清晰，但建议在每个示例代码块之前添加简要说明文字，帮助用户更好地理解各个功能的使用场景。
建议在示例代码之前添加说明，例如：
### 支持文字 +开关组件支持添加文字说明，通过 `activeText` 和 `inactiveText` 属性设置开关两端的文字。 :::demo
91-104: CSS 变量文档完善，建议补充使用示例新增的 CSS 变量文档完整，涵盖了组件样式的各个方面。但建议添加一个完整的自定义主题示例，展示如何组合使用这些变量。
建议在文档末尾添加示例：
+## 自定义主题示例 + +```tsx +// 使用 CSS 变量自定义开关样式 +<ConfigProvider + theme={{ + nutuiSwitchWidth: '50px', + nutuiSwitchHeight: '30px', + nutuiSwitchOpenBackgroundColor: '#1890ff', + nutuiSwitchLabelFontSize: '12px', + }} +> + <Switch /> +</ConfigProvider> +```src/packages/switch/doc.zh-TW.md (1)
78-80: 请修正文字错误onChange 事件描述中有一个错字：
-| onChange | 切換開關時觸髮 | `onChange:(value: boolean, event: Event)` | `-` | +| onChange | 切換開關時觸發 | `onChange:(value: boolean, event: Event)` | `-` |src/packages/switch/doc.taro.md (1)
91-104: 建议补充变量使用示例新增的主题定制变量覆盖了组件的主要样式属性，建议在文档中添加一个具体的自定义主题示例，以帮助用户更好地理解如何使用这些变量。
+### 自定义主题示例 + +```tsx +// ConfigProvider 用法示例 +<ConfigProvider + theme={{ + nutuiSwitchWidth: '50px', + nutuiSwitchHeight: '30px', + nutuiSwitchOpenBackgroundColor: '#1890ff' + }} +> + <Switch /> +</ConfigProvider> +```src/packages/switch/switch.scss (4)
2-6: 布局结构优化得当！将固定宽度改为最小宽度的修改很合理，这样能更好地适应不同的文本长度。相对定位的添加为内部元素的绝对定位提供了正确的参考系。
建议添加以下注释，以便其他开发者更好地理解布局意图：
.nut-switch { + // 相对定位作为子元素绝对定位的参考系 position: relative; display: flex; flex-direction: row; align-items: center; + // 确保开关有最小宽度，但可以根据标签文本扩展 min-width: $switch-width;
17-29: 按钮定位机制改进！使用绝对定位配合 transform 进行垂直居中的方案是标准实践。尺寸计算考虑了边框宽度，这种精确性值得肯定。
建议优化过渡动画性能：
- transition: left 0.3s linear; + transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); + will-change: left;这样可以：
- 使用更自然的缓动函数
- 通过 will-change 提示浏览器提前做优化
55-84: 标签样式结构完善！标签的对齐方式和间距处理合理，同时很好地支持了 RTL 布局。图标颜色继承的处理方式也很专业。
建议增加以下无障碍支持：
.nut-switch-label { display: inline-flex; align-items: center; height: 100%; white-space: nowrap; color: $switch-label-text-color; font-size: $switch-label-font-size; + user-select: none; // 防止文本被意外选中 + cursor: pointer; // 提示可点击 + @media (forced-colors: active) { + forced-color-adjust: none; // 适配高对比度模式 + }
86-90: 禁用状态样式合理！禁用状态的背景色处理得当，同时考虑了开启和关闭两种状态。
建议添加状态切换的过渡效果：
&-disabled { background-color: $switch-open-disabled-background-color; + transition: background-color 0.3s; &-close { background-color: $switch-close-disabled-background-color; + transition: background-color 0.3s; } }src/packages/switch/switch.tsx (1)
87-99: 建议优化条件渲染逻辑以提高可读性当前实现虽然功能完整，但可以通过以下方式优化代码：
- 将复杂的类名条件逻辑抽取为独立函数
- 使用对象映射替代多个条件判断
建议重构为：
+ const getLabelClasses = (value: boolean, rtl: boolean, disabled: boolean) => { + return classNames(`${classPrefix}-label`, { + [`${classPrefix}-label-open`]: value, + [`${classPrefix}-label-close`]: !value, + [`${classPrefix}-label-open-rtl`]: rtl && value, + [`${classPrefix}-label-close-rtl`]: rtl && !value, + [`${classPrefix}-label-close-disabled`]: disabled && !value, + }) + } {activeText && ( <div - className={classNames(`${classPrefix}-label`, { - [`${classPrefix}-label-open`]: value, - [`${classPrefix}-label-close`]: !value, - [`${classPrefix}-label-open-rtl`]: rtl && value, - [`${classPrefix}-label-close-rtl`]: rtl && !value, - [`${classPrefix}-label-close-disabled`]: disabled && !value, - })} + className={getLabelClasses(value, rtl, disabled)} > {value ? activeText : inactiveText} </div> )}src/packages/switch/switch.taro.tsx (1)
94-106: 建议优化标签渲染逻辑当前实现考虑了多个状态（激活/未激活、RTL、禁用），逻辑完整但可以进一步优化：
- 建议将类名逻辑抽取为独立函数，提高可维护性
- 可以使用自定义 Hook 来管理复杂的状态组合
建议重构为：
+ const getLabelClassNames = (value: boolean, rtl: boolean, disabled: boolean) => { + return classNames(`${classPrefix}-label`, { + [`${classPrefix}-label-open`]: value, + [`${classPrefix}-label-close`]: !value, + [`${classPrefix}-label-open-rtl`]: rtl && value, + [`${classPrefix}-label-close-rtl`]: rtl && !value, + [`${classPrefix}-label-close-disabled`]: disabled && !value, + }) + } {activeText && ( <View - className={classNames(`${classPrefix}-label`, { - [`${classPrefix}-label-open`]: value, - [`${classPrefix}-label-close`]: !value, - [`${classPrefix}-label-open-rtl`]: rtl && value, - [`${classPrefix}-label-close-rtl`]: rtl && !value, - [`${classPrefix}-label-close-disabled`]: disabled && !value, - })} + className={getLabelClassNames(value, rtl, disabled)} > {value ? activeText : inactiveText} </View> )}src/styles/variables.scss (1)
873-884: 开关组件尺寸和形状变量优化尺寸和形状相关变量设置合理：
- 统一使用CSS变量
- 保持了圆角的一致性
- 边框宽度适中
建议考虑添加响应式断点支持。
$switch-width: var(--nutui-switch-width, 46px) !default; +$switch-width-sm: var(--nutui-switch-width-sm, 36px) !default; +$switch-width-lg: var(--nutui-switch-width-lg, 56px) !default;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (21)
src/packages/switch/demo.taro.tsx(5 hunks)src/packages/switch/demo.tsx(5 hunks)src/packages/switch/demos/h5/demo3.tsx(1 hunks)src/packages/switch/demos/h5/demo4.tsx(1 hunks)src/packages/switch/demos/h5/demo5.tsx(1 hunks)src/packages/switch/demos/h5/demo6.tsx(1 hunks)src/packages/switch/demos/h5/demo7.tsx(1 hunks)src/packages/switch/demos/taro/demo3.tsx(1 hunks)src/packages/switch/demos/taro/demo4.tsx(1 hunks)src/packages/switch/demos/taro/demo5.tsx(1 hunks)src/packages/switch/demos/taro/demo6.tsx(1 hunks)src/packages/switch/demos/taro/demo7.tsx(1 hunks)src/packages/switch/doc.en-US.md(3 hunks)src/packages/switch/doc.md(3 hunks)src/packages/switch/doc.taro.md(3 hunks)src/packages/switch/doc.zh-TW.md(1 hunks)src/packages/switch/switch.harmony.css(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/styles/variables.scss(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- src/packages/switch/demos/h5/demo7.tsx
- src/packages/switch/demos/taro/demo7.tsx
🧰 Additional context used
🪛 Markdownlint
src/packages/switch/doc.zh-TW.md
86-86: null
Link fragments should be valid
(MD051, link-fragments)
🔇 Additional comments (28)
src/packages/switch/demos/h5/demo3.tsx (1)
2-2: 导入语句结构清晰且合理！
导入语句组织得当，将相关组件（Cell、Switch、Space）统一从同一包中导入。
src/packages/switch/demos/taro/demo3.tsx (2)
2-2: 导入语句结构清晰且合理
从@nutui/nutui-react-taro导入的组件按字母顺序排列，结构清晰。
8-9: 开关状态展示完整
通过展示默认选中和未选中的禁用状态，很好地覆盖了禁用开关的不同场景。
src/packages/switch/demos/h5/demo6.tsx (2)
1-2: 导入语句结构清晰且合理！
所有导入的组件都在代码中得到了适当的使用。
10-13: 建议简化事件处理器的传递方式
- 事件处理器的传递可以更简洁。
- 使用
defaultChecked时，建议考虑是否需要受控组件模式。
建议简化代码：
<Switch
defaultChecked
- onChange={(value, event) => onChange(value, event)}
+ onChange={onChange}
/>src/packages/switch/demos/h5/demo4.tsx (1)
7-12: 布局结构优化，展示更完整的开关状态
使用 Space 组件包装多个 Switch 实例的方式改进了布局结构，同时通过不同状态的展示（默认开启、禁用等）使得示例更加完整。
src/packages/switch/demos/taro/demo4.tsx (1)
7-12: 布局结构优化，展示更加清晰
使用 Space 组件来布局多个 Switch 示例是个不错的改进，让示例代码更加整洁和易读。同时展示了不同状态（启用/禁用）和不同文本长度的场景，这对于用户理解组件的使用很有帮助。
src/packages/switch/demos/taro/demo6.tsx (1)
3-3: 导入语句正确添加！
Taro 的导入用于实现 toast 提示功能，实现方式恰当。
src/packages/switch/demos/h5/demo5.tsx (1)
2-3: 导入语句结构清晰且合理！
导入了必要的组件和图标，符合组件的实现需求。
src/packages/switch/demos/taro/demo5.tsx (1)
2-3: 导入声明看起来不错！
导入语句组织得当，使用具体的图标导入有助于树摇（tree-shaking）优化。
src/packages/switch/demo.tsx (3)
9-9: 导入语句格式正确！
新增的 Demo7 导入遵循了现有的导入模式，保持了代码的一致性。
19-19: 翻译内容完整且一致！
为所有支持的语言（中文简体、中文繁体和英文）都添加了相应的 'supportIcon' 翻译，保持了良好的本地化支持。
Also applies to: 28-28, 37-37
50-57: 请确认组件展示顺序的调整是否符合预期
组件展示顺序发生了变化：
- 将
supportText移到了较前的位置 - 新增了
supportIcon的展示 customColor被移到了最后位置
建议确认这个顺序调整是否符合产品设计规范。
✅ Verification successful
Let me check the demo.taro.tsx file to compare the component ordering with demo.tsx.
组件展示顺序已验证无误
经过验证，组件展示顺序在 demo.tsx 和 demo.taro.tsx 中完全一致，且遵循了合理的功能展示逻辑：
- 基础功能（Demo1-3）
- 文本和图标支持（Demo4-5）
- 事件处理（Demo6）
- 自定义样式（Demo7）
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他相关文件中的展示顺序是否一致
rg -l "Demo[1-7]" src/packages/switch/
Length of output: 663
Script:
#!/bin/bash
# Check the component ordering in both demo files
echo "=== demo.tsx ==="
rg "Demo[1-7]" src/packages/switch/demo.tsx -A 1
echo -e "\n=== demo.taro.tsx ==="
rg "Demo[1-7]" src/packages/switch/demo.taro.tsx -A 1
Length of output: 1641
src/packages/switch/switch.harmony.css (2)
2-10: 布局和尺寸调整优化
开关组件的基础样式调整合理，通过设置相对定位和最小宽度提高了组件的灵活性。新的圆角设计（border-radius: 50px）让组件看起来更现代化。
35-35: RTL支持实现完善
RTL（从右到左）布局支持实现得当，计算方式统一且合理。
Also applies to: 41-41
src/packages/switch/demo.taro.tsx (3)
4-4: 导入语句修改正确！
导入路径的修正和新增的 Demo7 导入符合项目规范。
Also applies to: 12-12
22-22: 翻译内容完整且准确！
为所有语言（中文简体、中文繁体、英文）都添加了对应的 Icon 支持的翻译文本，保持了良好的多语言支持。
Also applies to: 31-31, 40-40
54-61: 建议验证新增 Demo7 的实现
组件结构调整合理，但需要确认 Demo7 的具体实现是否符合预期。
运行以下脚本检查 Demo7 的实现：
✅ Verification successful
Demo7 实现已完整验证
Demo7 展示了自定义颜色的 Switch 组件实现，通过 CSS 变量设置了开启状态的背景色为蓝色，关闭状态的背景色为浅灰色。实现完整且符合预期。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查 Demo7 的实现
ast-grep --pattern 'export default function Demo7() {
$$$
}'
# 检查是否正确使用了 Switch 组件
rg -A 5 "import.*Switch.*from.*@nutui/nutui-react-taro" "./src/packages/switch/demos/taro/demo7.tsx"
Length of output: 279
Script:
#!/bin/bash
# 检查 Demo7 的完整实现
rg -A 15 "const Demo7 = \(\) => {" "./src/packages/switch/demos/taro/demo7.tsx"
# 检查 Demo7 的导入和使用
fd "demo7" --exec cat {}
Length of output: 72172
Script:
#!/bin/bash
# 检查 Demo7 的完整实现
rg -A 10 "const Demo7 = \(\) => {" "./src/packages/switch/demos/taro/demo7.tsx"
# 检查 Switch 组件的自定义颜色相关属性
rg -A 5 "style={{.*nutui-switch.*}}" "./src/packages/switch/demos/taro/demo7.tsx"
Length of output: 387
Script:
#!/bin/bash
# 检查 Demo7 的完整实现
rg -A 10 "Demo7 = " "./src/packages/switch/demos/taro/demo7.tsx"
# 检查 Switch 组件的自定义颜色相关属性
cat "./src/packages/switch/demos/taro/demo7.tsx"
Length of output: 732
src/packages/switch/doc.zh-TW.md (2)
37-68: 文档结构调整合理！
各个功能区块的组织结构清晰，从基础用法到进阶特性的展示顺序符合用户学习曲线。
95-104: 建议验证 CSS 变量的默认值
新增了多个 CSS 变量并更新了一些默认值，请确保这些值与组件实现保持一致。特别是以下变更：
- 开关宽度从 40px 改为 46px
- 开关高度从 24px 改为 28px
- 边框圆角改用 $radius-circle 变量
✅ Verification successful
CSS 变量值已验证一致
根据代码验证结果，Switch 组件的实现中使用了 $switch-width、$switch-height 和 $switch-border-radius 变量，这些变量在 variables.scss 中通过 CSS 变量正确定义：
$switch-width: var(--nutui-switch-width, 46px)$switch-height: var(--nutui-switch-height, 28px)$switch-border-radius: var(--nutui-switch-border-radius, $radius-circle)
文档中描述的默认值与实际实现完全匹配。虽然在 variables-jmapp.scss 和 variables-jrkf.scss 中有不同的默认值（40px/24px），但这些是特定主题的变体，不影响主要实现。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查样式文件中的默认值是否匹配
rg --type scss "nutui-switch-(width|height|border-radius)" src/
Length of output: 94
Script:
#!/bin/bash
# Search for switch-related CSS variables in all files
rg "nutui-switch-(width|height|border-radius)" src/
# Also search for SCSS/CSS files specifically related to switch component
fd -e scss -e css . src/ --exec grep -l "switch"
Length of output: 2214
Script:
#!/bin/bash
# Check the actual implementation in switch.scss
cat src/packages/switch/switch.scss
Length of output: 2420
src/packages/switch/doc.taro.md (2)
37-68: 文档结构清晰，示例完整
新增的文档部分结构合理，包含了文字支持、图标支持和自定义颜色的示例，能够帮助用户更好地理解组件的使用方法。
78-79: 请确认类型更新与组件实现一致
activeText 和 inactiveText 的类型从 string 更新为 ReactNode，这提供了更灵活的内容展示方式。
✅ Verification successful
类型定义已正确更新且实现一致
组件代码中 activeText 和 inactiveText 的类型定义已确认为 React.ReactNode，与文档更新保持一致。实现代码也正确支持了这一类型变更。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 验证组件实现中的类型定义
ast-grep --pattern 'interface $_ {
$$$
activeText?: ReactNode
inactiveText?: ReactNode
$$$
}'
Length of output: 103
Script:
#!/bin/bash
# 搜索 Switch 组件的类型定义文件
fd -e ts -e tsx switch
# 搜索包含 activeText 或 inactiveText 的代码
rg -l "activeText|inactiveText"
# 尝试查找 Switch 组件的属性定义
ast-grep --pattern 'interface SwitchProps {
$$$
}'
Length of output: 1395
Script:
#!/bin/bash
# 检查 Switch 组件的具体实现
rg -A 5 "interface SwitchProps" src/packages/switch/switch.tsx
rg -A 5 "interface SwitchProps" src/packages/switch/switch.taro.tsx
# 查看属性的具体使用
rg "activeText|inactiveText" src/packages/switch/switch.tsx
rg "activeText|inactiveText" src/packages/switch/switch.taro.tsx
Length of output: 1103
src/packages/switch/switch.tsx (1)
11-12: 类型扩展增强了组件的灵活性！
将 activeText 和 inactiveText 的类型从 string 更改为 React.ReactNode 是一个很好的改进，这样可以：
- 支持更丰富的内容展示，如图标或自定义组件
- 保持了与现有字符串类型的向后兼容性
src/packages/switch/switch.taro.tsx (1)
13-14: 属性类型更改需要注意兼容性
将 activeText 和 inactiveText 的类型从 string 更改为 React.ReactNode 提供了更大的灵活性，现在可以支持图标和自定义组件。但这是一个破坏性更改，建议：
- 在更新日志中明确记录此变更
- 确保现有的字符串类型仍然可以正常工作
- 更新组件文档，提供新用法示例
src/packages/switch/doc.en-US.md (3)
37-68: 文档结构调整合理！
新增的章节结构清晰，包含了文本支持、图标支持、事件处理和自定义颜色等重要功能，每个部分都配有相应的示例代码，便于用户理解和使用。
90-104: 建议验证新增 CSS 变量的实现情况
新增了多个 CSS 变量用于主题定制，包括开关的背景色、尺寸、圆角、阴影等样式属性。建议：
- 确认所有新增的 CSS 变量都在组件样式文件中得到正确实现
- 验证默认值的合理性
✅ Verification successful
CSS 变量已正确实现，无需修改
根据搜索结果，所有在文档中列出的 CSS 变量都已在样式文件中得到正确实现：
- 在
src/styles/variables.scss中定义了所有基础变量 - 在主题文件
variables-jmapp.scss和variables-jrkf.scss中也有对应的变量覆盖 - 变量的默认值与文档描述一致
- 变量命名规范统一，实现完整
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查样式文件中是否实现了所有新增的 CSS 变量
rg "nutui-switch-(border-width|inside-border-radius|inside-box-shadow|label-text-color|label-font-size|close-disabled-label-text-color)" --type scss
Length of output: 179
Script:
#!/bin/bash
# 查找所有可能的样式文件
fd "\.(scss|css|less)$"
# 然后搜索所有 CSS 变量的实现
rg --type-add 'styles:*.{scss,css,less}' --type styles "nutui-switch-(border-width|inside-border-radius|inside-box-shadow|label-text-color|label-font-size|close-disabled-label-text-color)"
# 同时搜索其他相关的 switch CSS 变量实现
rg --type-add 'styles:*.{scss,css,less}' --type styles "nutui-switch-.*color|nutui-switch-.*width|nutui-switch-.*height|nutui-switch-.*radius"
Length of output: 14543
78-79: 请确认类型变更的影响范围！
activeText 和 inactiveText 的类型从 string 变更为 ReactNode，这是一个破坏性变更。虽然提供了更灵活的渲染能力，但需要确保：
- 现有代码是否会受到影响
- 是否需要在更新日志中标注这个变更
src/styles/variables.scss (1)
857-868: 开关组件背景色变量定义合理
新增的开关组件背景色变量定义清晰，包括:
- 关闭状态背景色
- 禁用状态背景色
这些变量都遵循了设计系统的色彩规范。
| | activeText | 打开时文字描述 | `ReactNode` | `-` | | ||
| | inactiveText | 关闭时文字描述 | `ReactNode` | `-` | |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Props 类型更新需要补充示例说明
activeText 和 inactiveText 的类型从 string 更新为 ReactNode，这提供了更灵活的自定义能力。建议在文档中补充使用 ReactNode 的具体示例。
建议在属性说明中添加示例：
-| activeText | 打开时文字描述 | `ReactNode` | `-` |
+| activeText | 打开时文字描述，支持传入 ReactNode 自定义内容 | `ReactNode` | `-` |
-| inactiveText | 关闭时文字描述 | `ReactNode` | `-` |
+| inactiveText | 关闭时文字描述，支持传入 ReactNode 自定义内容 | `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.
| | activeText | 打开时文字描述 | `ReactNode` | `-` | | |
| | inactiveText | 关闭时文字描述 | `ReactNode` | `-` | | |
| | activeText | 打开时文字描述，支持传入 ReactNode 自定义内容 | `ReactNode` | `-` | | |
| | inactiveText | 关闭时文字描述，支持传入 ReactNode 自定义内容 | `ReactNode` | `-` | |
src/styles/variables.scss
Outdated
| /* #ifdef harmony */ | ||
| $switch-inside-box-shadow: var( | ||
| --nutui-switch-inside-box-shadow, | ||
| 0px 2px 6px 0px rgba(0, 0, 0, 0.1) | ||
| ) !default; | ||
| /* #endif */ | ||
| /* #ifndef harmony */ | ||
| $switch-inside-box-shadow: var( | ||
| --nutui-switch-inside-box-shadow, | ||
| 0px 2px 1px 0px rgba(0, 0, 0, 0.06), | ||
| 0px 2px 6px 0px rgba(0, 0, 0, 0.1), | ||
| 0px 0px 0px 1px rgba(0, 0, 0, 0.02) | ||
| ) !default; | ||
| /* #endif */ | ||
| $switch-inside-box-shadow: var( | ||
| --nutui-switch-inside-box-shadow, | ||
| 0px 2px 6px 0px rgba(0, 0, 0, 0.1) | ||
| ) !default; |
There was a problem hiding this comment.
平台特定阴影样式需要优化
当前的阴影样式实现存在以下问题：
- 重复定义了相同的阴影值
- 条件编译指令可能导致维护困难
建议重构为统一的变量定义。
-/* #ifdef harmony */
-$switch-inside-box-shadow: var(
- --nutui-switch-inside-box-shadow,
- 0px 2px 6px 0px rgba(0, 0, 0, 0.1)
-) !default;
-/* #endif */
-/* #ifndef harmony */
-$switch-inside-box-shadow: var(
- --nutui-switch-inside-box-shadow,
- 0px 2px 1px 0px rgba(0, 0, 0, 0.06),
- 0px 2px 6px 0px rgba(0, 0, 0, 0.1),
- 0px 0px 0px 1px rgba(0, 0, 0, 0.02)
-) !default;
-/* #endif */
-$switch-inside-box-shadow: var(
- --nutui-switch-inside-box-shadow,
- 0px 2px 6px 0px rgba(0, 0, 0, 0.1)
-) !default;
+$switch-inside-box-shadow-base: var(
+ --nutui-switch-inside-box-shadow-base,
+ 0px 2px 6px 0px rgba(0, 0, 0, 0.1)
+) !default;
+$switch-inside-box-shadow-harmony: var(
+ --nutui-switch-inside-box-shadow-harmony,
+ $switch-inside-box-shadow-base
+) !default;
+$switch-inside-box-shadow: var(
+ --nutui-switch-inside-box-shadow,
+ $switch-inside-box-shadow-base
+) !default;📝 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.
| /* #ifdef harmony */ | |
| $switch-inside-box-shadow: var( | |
| --nutui-switch-inside-box-shadow, | |
| 0px 2px 6px 0px rgba(0, 0, 0, 0.1) | |
| ) !default; | |
| /* #endif */ | |
| /* #ifndef harmony */ | |
| $switch-inside-box-shadow: var( | |
| --nutui-switch-inside-box-shadow, | |
| 0px 2px 1px 0px rgba(0, 0, 0, 0.06), | |
| 0px 2px 6px 0px rgba(0, 0, 0, 0.1), | |
| 0px 0px 0px 1px rgba(0, 0, 0, 0.02) | |
| ) !default; | |
| /* #endif */ | |
| $switch-inside-box-shadow: var( | |
| --nutui-switch-inside-box-shadow, | |
| 0px 2px 6px 0px rgba(0, 0, 0, 0.1) | |
| ) !default; | |
| $switch-inside-box-shadow-base: var( | |
| --nutui-switch-inside-box-shadow-base, | |
| 0px 2px 6px 0px rgba(0, 0, 0, 0.1) | |
| ) !default; | |
| $switch-inside-box-shadow-harmony: var( | |
| --nutui-switch-inside-box-shadow-harmony, | |
| $switch-inside-box-shadow-base | |
| ) !default; | |
| $switch-inside-box-shadow: var( | |
| --nutui-switch-inside-box-shadow, | |
| $switch-inside-box-shadow-base | |
| ) !default; |
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (22)
src/packages/switch/demos/h5/demo3.tsx (1)
7-10: 布局结构优化得很好！使用 Space 组件包装 Switch 组件是一个很好的改进：
- 提供了更好的间距控制
- 使组件之间的布局更加统一
- 展示了禁用状态下的两种不同开关状态，更完整地展示了组件的功能
建议考虑添加注释说明两个 Switch 组件的不同状态，以便其他开发者更好地理解示例的目的：
<Space> + {/* 禁用状态下的选中开关 */} <Switch defaultChecked disabled /> + {/* 禁用状态下的未选中开关 */} <Switch disabled /> </Space>src/packages/switch/demos/taro/demo3.tsx (1)
7-10: 建议添加无障碍支持虽然布局结构很好，但建议为禁用状态的开关添加说明文本，以提高可访问性。
建议按照以下方式修改：
<Space> - <Switch defaultChecked disabled /> - <Switch disabled /> + <Switch defaultChecked disabled aria-label="已选中已禁用开关" /> + <Switch disabled aria-label="未选中已禁用开关" /> </Space>src/packages/switch/demos/h5/demo6.tsx (1)
10-13: 建议优化事件处理函数的传递方式当前的事件处理函数传递方式可以简化。
建议修改为：
- <Switch - defaultChecked - onChange={(value, event) => onChange(value, event)} - /> + <Switch + defaultChecked + onChange={onChange} + />这样的写法更加简洁，因为参数会自动传递，功能保持不变。
src/packages/switch/demos/h5/demo4.tsx (2)
2-2: 代码结构优化，展示更加完整代码改动合理地展示了 Switch 组件的多种使用场景：
- 使用 Space 组件优化了布局结构
- 展示了长短不同的文本标签
- 包含了禁用状态的展示
- 默认选中状态的展示
建议：考虑添加以下场景的展示：
- 自定义文本样式
- 不同尺寸的展示
import React from 'react' -import { Cell, Switch, Space } from '@nutui/nutui-react' +import { Cell, Switch, Space, ConfigProvider } from '@nutui/nutui-react' const Demo4 = () => { return ( <Cell> <Space> <Switch defaultChecked activeText="开启" inactiveText="关闭" /> <Switch defaultChecked activeText="开" inactiveText="关" /> <Switch defaultChecked activeText="开启" inactiveText="关闭" disabled /> <Switch activeText="开启" inactiveText="关闭" disabled /> + <ConfigProvider + theme={{ + nutuiSwitchTextColor: '#2b2b2b', + nutuiSwitchTextFontSize: '12px', + }} + > + <Switch defaultChecked activeText="自定义" inactiveText="样式" /> + </ConfigProvider> </Space> </Cell> ) }Also applies to: 7-12
8-11: 建议增强无障碍访问支持虽然当前实现已经包含了文本标签，但建议：
- 添加 aria-label 属性以增强屏幕阅读器支持
- 确保开关状态变化时的焦点管理
- <Switch defaultChecked activeText="开启" inactiveText="关闭" /> + <Switch + defaultChecked + activeText="开启" + inactiveText="关闭" + aria-label="基础开关" + />src/packages/switch/demos/taro/demo4.tsx (1)
7-12: 代码结构优化，展示更完整的组件用例组件结构调整合理，使用
Space组件进行布局增强了可读性。通过展示不同状态（默认开启、禁用）和不同文本长度的开关组件，更全面地展示了 Switch 组件的功能。不过建议考虑以下几点改进：
- 为不同的 Switch 组件添加适当的
data-testid属性，方便进行自动化测试- 考虑添加示例注释，说明每个 Switch 展示的具体特性
建议按照以下方式优化代码：
<Space> + {/* 默认文本长度的开关 */} - <Switch defaultChecked activeText="开启" inactiveText="关闭" /> + <Switch defaultChecked activeText="开启" inactiveText="关闭" data-testid="switch-default" /> + {/* 短文本开关 */} - <Switch defaultChecked activeText="开" inactiveText="关" /> + <Switch defaultChecked activeText="开" inactiveText="关" data-testid="switch-short" /> + {/* 禁用状态-开启 */} - <Switch defaultChecked activeText="开启" inactiveText="关闭" disabled /> + <Switch defaultChecked activeText="开启" inactiveText="关闭" disabled data-testid="switch-disabled-checked" /> + {/* 禁用状态-关闭 */} - <Switch activeText="开启" inactiveText="关闭" disabled /> + <Switch activeText="开启" inactiveText="关闭" disabled data-testid="switch-disabled" /> </Space>src/packages/switch/demos/taro/demo6.tsx (2)
6-11: 建议对提示文本进行国际化处理onChange 处理函数的实现逻辑正确，类型定义完善。不过，建议将提示文本 "触发了onChange事件，开关状态：" 进行国际化处理，以支持多语言。
示例改进：
+ import { useTranslation } from 'react-i18next' const Demo6 = () => { + const { t } = useTranslation() const onChange = ( value: boolean, event: React.MouseEvent<Element, MouseEvent> ) => { - Taro.showToast({ title: `触发了onChange事件，开关状态：${value}` }) + Taro.showToast({ title: t('switch.onChange.status', { value }) }) } // ... }
14-17: 可以简化 onChange 的处理方式当前的 onChange 处理方式可以更简洁。由于 event 参数在 toast 中未被使用，可以直接传递 onChange 函数。
建议修改为：
<Switch defaultChecked - onChange={(value, event) => onChange(value, event)} + onChange={onChange} />src/packages/switch/demos/h5/demo5.tsx (1)
8-21: 建议增加无障碍支持和文档说明代码结构清晰，展示了开关组件的多种状态。不过建议做以下改进：
- 为图标添加
aria-label属性以支持屏幕阅读器- 在组件中添加注释，说明每个开关的用途和状态
建议按照以下方式修改代码：
<Space> <Switch defaultChecked - activeText={<Check />} - inactiveText={<Close />} + activeText={<Check aria-label="已开启" />} + inactiveText={<Close aria-label="已关闭" />} /> <Switch defaultChecked - activeText={<Check />} - inactiveText={<Close />} + activeText={<Check aria-label="已开启" />} + inactiveText={<Close aria-label="已关闭" />} disabled /> - <Switch activeText={<Check />} inactiveText={<Close />} disabled /> + <Switch + activeText={<Check aria-label="已开启" />} + inactiveText={<Close aria-label="已关闭" />} + disabled + /> </Space>另外，建议在组件上方添加以下注释：
// Demo5：展示带有图标的开关组件 // 1. 基础图标开关 // 2. 禁用状态的选中开关 // 3. 禁用状态的未选中开关src/packages/switch/demos/taro/demo5.tsx (1)
8-21: 示例结构优化，展示更加完整代码改进要点：
- 使用 Space 组件优化了布局结构
- 通过图标替代文本，提升了视觉体验
- 完整展示了开关组件的多种状态（默认、禁用）
建议考虑添加以下改进：
<Space> <Switch defaultChecked activeText={<Check />} inactiveText={<Close />} + onChange={(value) => console.log('switch status:', value)} /> // ... 其他 Switch 组件 </Space>这样可以展示事件处理的用法，使示例更加完整。
src/packages/switch/demo.tsx (1)
50-57: 建议优化演示组件的排序逻辑当前的演示组件排序似乎经过了调整，建议根据功能的相关性重新组织顺序，将相似功能的演示放在一起，以提供更好的文档体验。例如：
- 基础功能（非受控、受控）
- 交互状态（禁用）
- 界面定制（文字、图标、颜色）
建议按照以下顺序重新组织：
<h2>{translated.basic}</h2> <Demo1 /> <h2>{translated.asyncControl}</h2> <Demo2 /> <h2>{translated.disabled}</h2> <Demo3 /> - <h2>{translated.supportText}</h2> - <Demo4 /> - <h2>{translated.supportIcon}</h2> - <Demo5 /> - <h2>{translated.eventTip}</h2> - <Demo6 /> - <h2>{translated.customColor}</h2> - <Demo7 /> + <h2>{translated.supportText}</h2> + <Demo4 /> + <h2>{translated.supportIcon}</h2> + <Demo5 /> + <h2>{translated.customColor}</h2> + <Demo7 /> + <h2>{translated.eventTip}</h2> + <Demo6 />src/packages/switch/switch.harmony.css (3)
2-10: 建议添加鼠标指针样式以提升用户体验组件缺少了
cursor: pointer属性，这可能会影响用户交互体验。建议添加此属性以明确表示该元素是可点击的。.nut-switch { position: relative; display: flex; flex-direction: row; align-items: center; + cursor: pointer; min-width: 46px; height: 28px; line-height: 28px; background-color: #ff0f23; border-radius: 50px; }
53-70: 标签样式布局合理，间距计算准确使用 flex 布局和精确的 margin 计算确保了标签在各种状态下的对齐和间距都很合理。建议考虑添加文字过长时的处理方案。
.nut-switch-label { display: inline-flex; align-items: center; height: 100%; white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; color: #ffffff; font-size: 12px; }
72-79: 禁用状态样式设计合理禁用状态的颜色选择恰当，能够清晰地传达组件状态。建议考虑添加透明度变化使视觉效果更柔和。
.nut-switch-disabled { - background-color: #ffadbe; + background-color: rgba(255, 173, 190, 0.8); } .nut-switch-disabled-close { - background-color: #f5f6fa; + background-color: rgba(245, 246, 250, 0.8); }src/packages/switch/doc.md (1)
91-104: 建议完善 CSS 变量的说明文档新增的 CSS 变量命名规范统一，但建议对以下几个变量添加更详细的说明：
--nutui-switch-inside-box-shadow: 可说明阴影效果的具体应用场景--nutui-switch-border-width: 可补充说明边框的视觉效果src/packages/switch/doc.taro.md (1)
78-79: 建议补充 ReactNode 类型的使用说明
activeText和inactiveText的类型从string更新为ReactNode，这提供了更灵活的内容支持。建议添加示例说明如何使用 ReactNode 类型传入自定义内容。建议添加如下示例：
| activeText | 打开时文字描述 | `ReactNode` | `-` | + > 支持传入文本、图标或自定义组件，例如：`<Icon name="success" />`src/packages/switch/switch.tsx (1)
87-99: 建议增加无障碍访问支持为了提高组件的可访问性，建议添加适当的 ARIA 属性。
<div className={classNames(`${classPrefix}-label`, { [`${classPrefix}-label-open`]: value, [`${classPrefix}-label-close`]: !value, [`${classPrefix}-label-open-rtl`]: rtl && value, [`${classPrefix}-label-close-rtl`]: rtl && !value, [`${classPrefix}-label-close-disabled`]: disabled && !value, })} + role="status" + aria-label={value ? activeText?.toString() : inactiveText?.toString()} > {value ? activeText : inactiveText} </div>src/packages/switch/switch.taro.tsx (1)
94-106: 建议提取类名逻辑以提高可维护性当前的类名逻辑较为复杂，建议将其提取到一个独立的函数中以提高代码的可读性和可维护性。
建议按照以下方式重构：
+ const getLabelClassName = (value: boolean, rtl: boolean, disabled: boolean) => { + return classNames(`${classPrefix}-label`, { + [`${classPrefix}-label-open`]: value, + [`${classPrefix}-label-close`]: !value, + [`${classPrefix}-label-open-rtl`]: rtl && value, + [`${classPrefix}-label-close-rtl`]: rtl && !value, + [`${classPrefix}-label-close-disabled`]: disabled && !value, + }) + } {activeText && ( <View - className={classNames(`${classPrefix}-label`, { - [`${classPrefix}-label-open`]: value, - [`${classPrefix}-label-close`]: !value, - [`${classPrefix}-label-open-rtl`]: rtl && value, - [`${classPrefix}-label-close-rtl`]: rtl && !value, - [`${classPrefix}-label-close-disabled`]: disabled && !value, - })} + className={getLabelClassName(value, rtl, disabled)} > {value ? activeText : inactiveText} </View> )}src/packages/switch/doc.en-US.md (3)
61-67: 建议补充自定义颜色部分的说明文档"Custom color" 部分缺少具体的使用说明和示例说明。建议添加一段描述文本，说明该功能的使用场景和配置方法。
建议在示例代码之前添加说明文本：
### Custom color + The Switch component supports custom colors for both active and inactive states. + You can modify these through CSS variables or inline styles. :::demo
78-79: Props 类型更新合理，建议补充使用示例将
activeText和inactiveText的类型从string更改为ReactNode是一个很好的改进，这样可以支持更丰富的内容展示。建议在文档中添加一个使用 ReactNode 的具体示例，比如：
| activeText | Text description when opening | `ReactNode` | `-` | + Example: `activeText={<span style={{ color: 'red' }}>ON</span>}`
90-104: CSS 变量文档完善，建议补充使用说明CSS 变量的文档非常详细，涵盖了组件的所有可定制样式。为了更好地指导开发者使用，建议添加以下内容：
- 建议对关键样式变量添加示意图，直观展示它们的作用位置
- 建议将相关的变量进行分组，比如尺寸类、颜色类等
- 建议添加常见自定义场景的示例代码
+ ## 样式变量分组 + + ### 尺寸相关 + - --nutui-switch-width + - --nutui-switch-height + - --nutui-switch-line-height + + ### 颜色相关 + - --nutui-switch-open-background-color + - --nutui-switch-close-background-color + + ### 示例：自定义开关大小 + ```css + :root { + --nutui-switch-width: 60px; + --nutui-switch-height: 36px; + } + ```src/packages/switch/switch.scss (1)
28-28: 建议使用transform替代left进行动画过渡将过渡效果从
transform更改为left可能会降低动画性能。使用transform属性进行位移动画，通常能更好地利用浏览器的硬件加速，提供更流畅的动画效果。建议在过渡中继续使用transform属性。Also applies to: 31-31, 37-37
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (21)
src/packages/switch/demo.taro.tsx(5 hunks)src/packages/switch/demo.tsx(5 hunks)src/packages/switch/demos/h5/demo3.tsx(1 hunks)src/packages/switch/demos/h5/demo4.tsx(1 hunks)src/packages/switch/demos/h5/demo5.tsx(1 hunks)src/packages/switch/demos/h5/demo6.tsx(1 hunks)src/packages/switch/demos/h5/demo7.tsx(1 hunks)src/packages/switch/demos/taro/demo3.tsx(1 hunks)src/packages/switch/demos/taro/demo4.tsx(1 hunks)src/packages/switch/demos/taro/demo5.tsx(1 hunks)src/packages/switch/demos/taro/demo6.tsx(1 hunks)src/packages/switch/demos/taro/demo7.tsx(1 hunks)src/packages/switch/doc.en-US.md(3 hunks)src/packages/switch/doc.md(3 hunks)src/packages/switch/doc.taro.md(3 hunks)src/packages/switch/doc.zh-TW.md(1 hunks)src/packages/switch/switch.harmony.css(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/styles/variables.scss(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- src/packages/switch/demos/h5/demo7.tsx
- src/packages/switch/demos/taro/demo7.tsx
🧰 Additional context used
🪛 Markdownlint
src/packages/switch/doc.zh-TW.md
86-86: null
Link fragments should be valid
(MD051, link-fragments)
🔇 Additional comments (30)
src/packages/switch/demos/h5/demo3.tsx (1)
2-2: 导入语句更改看起来不错！
新增的 Space 组件导入符合代码规范。
src/packages/switch/demos/taro/demo3.tsx (1)
2-2: 导入语句更改看起来不错！
Space 组件的添加符合组件布局的最佳实践。
src/packages/switch/demos/h5/demo6.tsx (2)
5-7: 事件处理函数实现得当
事件处理函数的实现简洁明了，类型定义完善，并通过 Toast 提供了良好的用户反馈。
2-2: 验证 Toast 组件的使用场景
在演示代码中使用 Toast 提示是否符合设计规范？建议确认这种交互方式是否适合在演示代码中使用。
✅ Verification successful
Toast 组件在演示代码中的使用是合适的
根据代码库分析，Toast 提示在演示代码中的使用是符合设计规范的：
- 多个组件（Switch、ShortPassword、InputNumber、Cell等）的演示代码都使用了 Toast 来展示事件触发的反馈
- Toast 的使用场景主要是展示用户交互的即时反馈，这有助于开发者理解组件的事件机制
- 在 Switch 组件的 demo6 中，Toast 用于展示 onChange 事件的触发状态，这种使用方式与其他组件的演示保持一致
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他演示代码中是否使用了类似的 Toast 提示
# 搜索其他演示文件中的 Toast 使用情况
rg -l "Toast.show" "src/packages/*/demos"
Length of output: 102
Script:
#!/bin/bash
# 检查演示代码中的 Toast 使用情况
rg -l "Toast" src/packages/switch/demos/
# 检查 demo6.tsx 中的具体 Toast 使用场景
rg "Toast" src/packages/switch/demos/h5/demo6.tsx -A 5
Length of output: 497
Script:
#!/bin/bash
# 检查 demo2.tsx 中的 Toast 使用场景以进行对比
rg "Toast" src/packages/switch/demos/h5/demo2.tsx -A 5
# 检查其他组件的演示代码中是否普遍使用 Toast 来展示事件触发
rg "Toast.show.*事件" src/packages/*/demos/
Length of output: 3079
src/packages/switch/demos/taro/demo4.tsx (1)
4-14: 验证事件处理器移除的一致性
需要确认所有相关的演示组件都已经统一移除了 onChange 处理器。
运行以下脚本验证更改的一致性：
src/packages/switch/demos/taro/demo6.tsx (1)
3-3: 导入语句正确！
Taro 的导入位置合适，用于实现 toast 提示功能。
src/packages/switch/demos/h5/demo5.tsx (2)
2-3: 导入声明看起来很清晰！
导入语句组织得当，按照功能模块进行了合理分组。
8-8: 验证 Space 组件的间距配置
Space 组件默认间距可能需要根据设计规范进行调整。
src/packages/switch/demos/taro/demo5.tsx (1)
2-3: 导入声明结构清晰完整
新增的组件导入声明组织合理，分别从核心库和图标库中引入所需组件。
src/packages/switch/demo.tsx (3)
9-9: 导入语句位置合理
新增的 Demo7 导入语句与其他 demo 组件的导入保持一致的风格和顺序。
19-19: 翻译内容完整且准确
新增的 supportIcon 翻译项在所有语言版本中都已正确添加，保持了良好的国际化支持。
Also applies to: 28-28, 37-37
57-57: 验证新增的 Demo7 组件实现
请确认 Demo7 组件是否包含了必要的测试用例，以及是否符合组件库的开发规范。
✅ Verification successful
Let me verify if there are existing test cases for the Switch component to ensure proper coverage.
Demo7 组件实现已经过验证，符合组件库规范
Demo7 组件展示了 Switch 组件的样式自定义功能，且已有相应的测试覆盖：
- 组件使用了正确的 CSS 变量来自定义开关颜色
- 在
switch.spec.tsx中已包含了对样式自定义功能的测试用例 - 实现遵循了组件库文档中定义的主题定制方案
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查 Demo7 组件的实现和测试文件
echo "检查 Demo7 组件实现："
cat src/packages/switch/demos/h5/demo7.tsx
echo "\n检查 Demo7 相关的测试文件："
find src/packages/switch -type f -name "*.test.*" -exec grep -l "Demo7" {} \;
Length of output: 572
Script:
#!/bin/bash
# Check Switch component test coverage
echo "Switch component test files:"
find src/packages/switch -type f -name "*.test.*"
echo -e "\nSwitch test content:"
cat src/packages/switch/__tests__/*.test.* 2>/dev/null
Length of output: 222
Script:
#!/bin/bash
# 检查 Switch 组件的测试文件（尝试不同的目录位置）
echo "在 src/packages/switch 目录下搜索测试文件："
find src/packages/switch -type f -exec grep -l "test\|describe\|it(" {} \;
echo -e "\n检查组件样式自定义相关的测试："
rg "style" src/packages/switch -A 5 -B 5
Length of output: 7436
src/packages/switch/switch.harmony.css (2)
17-29: 按钮样式实现规范，符合设计规范
使用绝对定位和 transform 来实现垂直居中是一个很好的实践。阴影效果的设置也恰到好处，提供了良好的视觉反馈。
32-41: RTL支持实现完善，布局计算准确
开关按钮在不同状态下的定位计算统一且准确，同时很好地支持了 RTL 布局。这对于国际化支持非常重要。
src/packages/switch/demo.taro.tsx (3)
4-4: 导入路径修正和新组件导入看起来没有问题！
导入路径的修正和新增的 Demo7 组件导入符合规范。
Also applies to: 12-12
22-22: 翻译内容完整且一致！
新增的 'supportIcon' 翻译项在所有语言版本中都已正确添加，保持了良好的多语言支持。
Also applies to: 31-31, 40-40
54-61: 建议确认演示顺序是否符合设计规范
组件展示顺序已调整，新增了自定义颜色的演示。请确认：
- 当前的展示顺序是否符合产品设计规范
- Demo7 组件是否已完成相关测试
✅ Verification successful
演示顺序符合设计规范，且已完成相关测试
- 当前演示顺序遵循了从基础到进阶的逻辑：基础用法、受控模式、禁用状态、文字配置、图标配置、事件处理、自定义样式
- Demo7（自定义颜色）已包含在测试文件中，通过了对自定义样式属性
--nutui-switch-open-background-color的测试用例验证
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他 Switch 相关文件中的演示顺序
rg -l "Demo[1-7]" --type tsx
Length of output: 58
Script:
#!/bin/bash
# Search for demo components in all files
rg -l "Demo[1-7]"
# Get content of the demo file to understand the demo structure
cat src/packages/switch/demo.taro.tsx
# Check test files for Demo7
rg "Demo7" --type-list
rg "Demo7"
Length of output: 69892
Script:
#!/bin/bash
# 检查 Switch 组件的演示文件结构
fd "demo[1-7]\.tsx" src/packages/switch/demos
# 检查 Demo7 的实现
cat src/packages/switch/demos/taro/demo7.tsx
# 检查 Switch 组件的测试文件
fd "\.spec\.tsx$" src/packages/switch/
Length of output: 1104
Script:
#!/bin/bash
# 检查测试文件内容，查看是否包含对自定义颜色的测试
cat src/packages/switch/__test__/switch.spec.tsx
# 检查其他演示文件的内容，了解完整的演示逻辑顺序
cat src/packages/switch/demos/taro/demo1.tsx
cat src/packages/switch/demos/taro/demo2.tsx
cat src/packages/switch/demos/taro/demo3.tsx
cat src/packages/switch/demos/taro/demo4.tsx
cat src/packages/switch/demos/taro/demo5.tsx
cat src/packages/switch/demos/taro/demo6.tsx
Length of output: 4417
src/packages/switch/doc.md (2)
78-79: 属性类型更新符合预期
将 activeText 和 inactiveText 的类型从 string 更改为 ReactNode 提供了更灵活的内容支持，这是一个很好的改进。
37-68: 请验证示例代码文件的完整性
新增的示例部分结构清晰，但需要确保所有引用的示例代码文件都已正确创建。
✅ Verification successful
示例代码文件验证完成，文档引用正确
所有引用的示例代码文件（demo4.tsx 到 demo7.tsx）都已在正确的目录 src/packages/switch/demos/h5 中找到，文档中的引用路径完全匹配实际文件结构。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 验证所有示例代码文件是否存在
for demo in {4..7}; do
fd "demo${demo}.tsx" src/packages/switch/demos/h5
done
Length of output: 415
src/packages/switch/doc.zh-TW.md (2)
37-68: 请确认文档结构与其他语言版本保持一致
新增的章节结构调整合理，建议验证以下几点：
- 确保"支持 Icon"和"自定義顏色"章节在其他语言文档中也有相应内容
- 验证章节顺序在所有语言版本中保持一致
✅ Verification successful
文档结构已验证完全一致
经过验证，所有语言版本（英文、简体中文、繁体中文和Taro版本）的文档结构完全一致，包括：
- "支持 Icon" 章节
- "自定义颜色/自定義顏色/Custom color" 章节
- 章节顺序保持一致
所有语言版本都遵循相同的文档结构和展示顺序，无需进行调整。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if the same sections exist in other language versions
rg -A 1 "支持 Icon|自定義顏色" "src/packages/switch/doc.*.md"
Length of output: 125
Script:
#!/bin/bash
# List all documentation files for switch component
fd "doc\." "src/packages/switch/"
# After finding the files, let's check their content
echo "=== Checking content of documentation files ==="
for doc in $(fd "doc\." "src/packages/switch/"); do
echo "=== Content of $doc ==="
cat "$doc"
done
Length of output: 10323
91-104: 建议验证新增 CSS 变量的实现
新增和更新的 CSS 变量需要确认以下几点：
- 确认组件样式文件中已正确实现这些变量
- 验证新的尺寸（46px/28px）是否与设计规范一致
✅ Verification successful
CSS 变量已正确实现，无需进一步修改
根据代码验证结果：
- 所有文档中列出的 CSS 变量都已在
src/styles/variables.scss中正确定义 - Switch 组件样式文件
switch.scss正确使用了这些变量 - 新的尺寸（46px/28px）已在变量文件中设置为默认值
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if CSS variables are implemented in style files
rg "nutui-switch-(width|height|border-radius|box-shadow)" "src/packages/switch/styles/"
Length of output: 155
Script:
#!/bin/bash
# Search for switch-related CSS files and variables in the entire repository
fd -e css -e scss -e less switch
# After finding the files, let's check their content for CSS variables
rg --type css "nutui-switch-"
Length of output: 3779
Script:
#!/bin/bash
# Let's check the actual implementation in switch.scss
cat src/packages/switch/switch.scss
Length of output: 2420
src/packages/switch/doc.taro.md (2)
37-68: 文档结构调整合理！
各个功能板块的组织结构清晰，示例代码的展示顺序符合由简到繁的学习曲线。
91-104: 请确认新增尺寸变量的兼容性
新增了多个样式变量，特别是尺寸相关的变量（宽度、高度等）发生了调整。请验证：
- 这些尺寸变更是否与设计规范一致
- 是否会影响现有项目的布局
运行以下脚本检查其他相关文件中的尺寸定义是否一致：
✅ Verification successful
Let me run one more verification to check the design system tokens and previous values:
Let me try one final verification to check the design tokens:
Switch 组件尺寸变量定义验证完成
根据代码检查结果，新增的尺寸变量在整个组件中使用一致：
- 宽度(46px)、高度(28px)和行高(28px)的值在所有文档中保持一致
- switch.scss 中的样式计算都基于这些变量进行，包括内部按钮、边距等的计算
- 这些尺寸设置同时考虑了 RTL 布局的支持
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他文件中的尺寸定义
rg -A 1 "switch-(width|height)" src/packages/switch/
Length of output: 2501
Script:
#!/bin/bash
# Check previous values and design tokens
rg -B 2 -A 2 "\$switch-(width|height)" src/packages/switch/
Length of output: 60
Script:
#!/bin/bash
# Check design tokens and theme variables
rg -l "switch" src/packages/styles/
rg "\$radius-(circle|full)" src/packages/styles/
Length of output: 207
src/packages/switch/switch.tsx (2)
11-12: 类型更改提升了组件的灵活性！
将 activeText 和 inactiveText 的类型从 string 更改为 React.ReactNode 是一个很好的改进，这样可以支持更丰富的内容展示，比如图标或自定义组件。
87-99: 标签渲染逻辑优化得当！
新的标签渲染逻辑结构清晰，同时很好地处理了 RTL 和禁用状态的样式。
src/packages/switch/switch.taro.tsx (1)
13-14: 类型更新增强了组件的灵活性！
将 activeText 和 inactiveText 的类型从 string 更改为 React.ReactNode 是一个很好的改进，这样可以支持更丰富的内容展示，比如图标或自定义组件。
src/styles/variables.scss (4)
857-868: 背景颜色变量定义合理！
关闭状态和禁用状态的背景色变量定义符合设计规范，使用了系统预设的颜色变量，保证了视觉的一致性。
873-875: 尺寸变量设置合适！
宽度、高度和行高的变量定义合理，并且通过 CSS 自定义属性提供了灵活的定制能力。
876-880: 边框属性定义规范！
边框圆角复用了系统的 $radius-circle 变量，保证了组件样式的一致性。边框宽度通过 CSS 变量提供了自定义能力。
903-910: 文本样式变量定义完善！
标签文本的颜色、字号以及禁用状态的文本颜色定义合理，与设计系统的排版规范保持一致。
| | onChange | 切換開關時觸發 | `onChange:(value: boolean, event: Event)` | `-` | | ||
| | activeText | 打開時文字描述 | `ReactNode` | `-` | | ||
| | inactiveText | 關閉時文字描述 | `ReactNode` | `-` | | ||
| | onChange | 切換開關時觸髮 | `onChange:(value: boolean, event: Event)` | `-` | | ||
|
|
||
| ## 主題定製 | ||
|
|
||
| ### 樣式變量 | ||
|
|
||
| 組件提供了下列 CSS 變量，可用於自定義樣式，使用方法請參考 [ConfigProvider 組件](#/zh-CN/component/configprovider)。 |
There was a problem hiding this comment.
修复 ConfigProvider 组件链接
链接片段格式需要更新：
-[ConfigProvider 組件](#/zh-CN/component/configprovider)
+[ConfigProvider 組件](/zh-CN/component/configprovider)📝 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.
| 組件提供了下列 CSS 變量，可用於自定義樣式，使用方法請參考 [ConfigProvider 組件](#/zh-CN/component/configprovider)。 | |
| 組件提供了下列 CSS 變量，可用於自定義樣式，使用方法請參考 [ConfigProvider 組件](/zh-CN/component/configprovider)。 |
🧰 Tools
🪛 Markdownlint
86-86: null
Link fragments should be valid
(MD051, link-fragments)
| | activeText | 打開時文字描述 | `ReactNode` | `-` | | ||
| | inactiveText | 關閉時文字描述 | `ReactNode` | `-` | | ||
| | onChange | 切換開關時觸髮 | `onChange:(value: boolean, event: Event)` | `-` | |
There was a problem hiding this comment.
修复 onChange 属性描述中的错别字
在属性描述中发现一处错别字：
-| onChange | 切換開關時觸髮 | `onChange:(value: boolean, event: Event)` | `-` |
+| onChange | 切換開關時觸發 | `onChange:(value: boolean, event: Event)` | `-` |📝 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.
| | activeText | 打開時文字描述 | `ReactNode` | `-` | | |
| | inactiveText | 關閉時文字描述 | `ReactNode` | `-` | | |
| | onChange | 切換開關時觸髮 | `onChange:(value: boolean, event: Event)` | `-` | | |
| | activeText | 打開時文字描述 | `ReactNode` | `-` | | |
| | inactiveText | 關閉時文字描述 | `ReactNode` | `-` | | |
| | onChange | 切換開關時觸發 | `onChange:(value: boolean, event: Event)` | `-` | |
| @@ -1,9 +1,9 @@ | |||
| .nut-switch { | |||
| cursor: pointer; | |||
| position: relative; | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
请考虑在 .nut-switch 上添加 cursor: pointer;
移除了 cursor: pointer; 可能会导致用户无法直观地知道开关是可点击的，影响用户体验。建议在 .nut-switch 上保留或添加 cursor: pointer; 属性。
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Outside diff range and nitpick comments (24)
src/packages/switch/demos/h5/demo3.tsx (1)
8-9: 建议添加注释说明不同状态的用途为了提高代码的可维护性，建议为这两个不同状态的开关添加注释，说明它们各自的用途。
<Space> + {/* 禁用状态下的选中开关 */} <Switch defaultChecked disabled /> + {/* 禁用状态下的未选中开关 */} <Switch disabled /> </Space>src/packages/switch/demos/taro/demo3.tsx (1)
7-10: 建议添加注释说明不同状态的展示目的代码结构良好，使用Space组件改善了布局。为了提高代码的可维护性和教学价值，建议添加简短注释说明这两个Switch分别展示了什么状态。
建议添加如下注释：
<Space> + {/* 禁用状态 - 默认选中 */} <Switch defaultChecked disabled /> + {/* 禁用状态 - 默认未选中 */} <Switch disabled /> </Space>src/packages/switch/demos/h5/demo6.tsx (2)
5-7: 建议改进事件处理函数的类型定义当前实现有以下可以改进的地方：
event参数使用了any类型，建议使用更具体的类型- 考虑将提示消息文本抽取为可配置的文案，便于国际化
建议按如下方式修改：
- const onChange = (value: boolean, event: any) => { + const onChange = (value: boolean, event: React.MouseEvent<Element, MouseEvent>) => { Toast.show(`触发了onChange事件，开关状态：${value}`) }
10-13: 建议简化事件处理器的传递方式当前的事件处理器传递方式可以更简洁。由于
onChange函数的参数签名与 Switch 组件的onChange属性完全匹配，可以直接传递函数引用。建议如下修改：
<Switch defaultChecked - onChange={(value, event) => onChange(value, event)} + onChange={onChange} />src/packages/switch/demos/h5/demo4.tsx (1)
8-11: 建议优化文本标签的使用虽然当前的实现展示了不同长度的文本标签（"开启/关闭" 和 "开/关"），但建议考虑以下几点：
- 确保文本标签的长度保持一致性
- 考虑添加带有图标的示例
建议的修改：
- <Switch defaultChecked activeText="开启" inactiveText="关闭" /> - <Switch defaultChecked activeText="开" inactiveText="关" /> + <Switch defaultChecked activeText="开启" inactiveText="关闭" /> + <Switch defaultChecked activeText="开启" inactiveText="关闭" activeIcon="success" inactiveIcon="close" />src/packages/switch/demos/taro/demo4.tsx (1)
7-12: 组件结构优化得当！代码结构清晰，具有以下优点：
- 使用 Space 组件实现了良好的布局间距
- 展示了开关组件的多种状态（默认、简洁文本、禁用等）
- 中文文案表述统一，符合用户习惯
建议考虑添加以下改进：
<Space> - <Switch defaultChecked activeText="开启" inactiveText="关闭" /> - <Switch defaultChecked activeText="开" inactiveText="关" /> - <Switch defaultChecked activeText="开启" inactiveText="关闭" disabled /> - <Switch activeText="开启" inactiveText="关闭" disabled /> + <Switch defaultChecked activeText="开启" inactiveText="关闭" aria-label="基础开关" /> + <Switch defaultChecked activeText="开" inactiveText="关" aria-label="简洁开关" /> + <Switch defaultChecked activeText="开启" inactiveText="关闭" disabled aria-label="禁用开启状态" /> + <Switch activeText="开启" inactiveText="关闭" disabled aria-label="禁用关闭状态" /> </Space>添加 aria-label 属性可以提升组件的可访问性，帮助使用屏幕阅读器的用户更好地理解每个开关的用途。
src/packages/switch/demos/taro/demo6.tsx (2)
6-11: 建议使用 useCallback 优化性能当前 onChange 函数实现清晰，类型定义准确。建议使用 useCallback 进行性能优化，特别是在父组件重渲染时。
建议按如下方式修改：
+ import React, { useCallback } from 'react' const Demo6 = () => { - const onChange = ( + const onChange = useCallback(( value: boolean, event: React.MouseEvent<Element, MouseEvent> - ) => { + ) => { Taro.showToast({ title: `触发了onChange事件，开关状态：${value}` }) - } + }, [])
14-17: 建议简化 onChange 处理函数当前的 onChange 处理方式可以更简洁。由于事件对象在这里并未被实际使用，可以省略传递。
建议按如下方式简化：
<Switch defaultChecked - onChange={(value, event) => onChange(value, event)} + onChange={onChange} />src/packages/switch/demos/h5/demo5.tsx (1)
8-21: 代码结构优化得很好！使用
Space组件来布局多个Switch的方式非常合理，展示了不同状态下的开关组件：
- 带图标的基础开关
- 带图标的禁用选中状态
- 带图标的禁用未选中状态
建议考虑添加以下改进：
- 为了提高可维护性，建议将图标组件抽取为常量
- 考虑添加适当的间距属性到
Space组件建议按照以下方式重构：
import React from 'react' import { Cell, Space, Switch } from '@nutui/nutui-react' import { Check, Close } from '@nutui/icons-react' +const ActiveIcon = <Check /> +const InactiveIcon = <Close /> + const Demo5 = () => { return ( <Cell> - <Space> + <Space gap={20}> <Switch defaultChecked - activeText={<Check />} - inactiveText={<Close />} + activeText={ActiveIcon} + inactiveText={InactiveIcon} /> <Switch defaultChecked - activeText={<Check />} - inactiveText={<Close />} + activeText={ActiveIcon} + inactiveText={InactiveIcon} disabled /> - <Switch activeText={<Check />} inactiveText={<Close />} disabled /> + <Switch activeText={ActiveIcon} inactiveText={InactiveIcon} disabled /> </Space> </Cell> ) }src/packages/switch/demos/taro/demo5.tsx (1)
9-20: 建议添加注释说明不同状态为了提高代码的可维护性，建议为每个 Switch 添加注释，说明其展示的具体状态和用途。例如：
<Space> + {/* 基础状态：带图标 */} <Switch defaultChecked activeText={<Check />} inactiveText={<Close />} /> + {/* 禁用状态：选中 */} <Switch defaultChecked activeText={<Check />} inactiveText={<Close />} disabled /> + {/* 禁用状态：未选中 */} <Switch activeText={<Check />} inactiveText={<Close />} disabled /> </Space>src/packages/switch/switch.harmony.css (4)
2-15: 建议重新考虑背景色的使用方式建议将背景色
#ff0f23改为使用设计系统中定义的变量，以保持颜色的一致性和可维护性。这样在后续主题定制时会更加方便。- background-color: #ff0f23; + background-color: var(--nut-switch-active-background);
32-42: 建议使用 CSS 变量优化位置计算当前的位置计算逻辑可以通过引入 CSS 变量来简化，提高代码的可维护性。
+ :root { + --nut-switch-button-size: 28px; + --nut-switch-padding: 2px; + } .nut-switch-button-open { - left: calc(100% - 28px + 2px); + left: calc(100% - var(--nut-switch-button-size) + var(--nut-switch-padding)); }
53-71: 建议增强文本处理能力当前的文本样式处理已经很好，建议增加文本溢出处理以提升组件的健壮性。
.nut-switch-label { display: inline-flex; align-items: center; height: 100%; white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + max-width: 100%; color: #ffffff; font-size: 12px; }
72-79: 建议使用语义化的颜色变量禁用状态的颜色应该使用语义化的 CSS 变量，这样可以更好地适应不同的主题设置。
.nut-switch-disabled { - background-color: #ffadbe; + background-color: var(--nut-switch-disabled-background); } .nut-switch-disabled-close { - background-color: #f5f6fa; + background-color: var(--nut-switch-disabled-close-background); }src/packages/switch/demo.taro.tsx (1)
54-61: 组件结构调整建议建议使用 Space 组件来优化布局结构，可以减少重复的 View 包装器使用。
参考以下代码改进建议：
- <View className="h2">{translated.supportText}</View> - <Demo4 /> - <View className="h2">{translated.supportIcon}</View> - <Demo5 /> - <View className="h2">{translated.eventTip}</View> - <Demo6 /> - <View className="h2">{translated.customColor}</View> - <Demo7 /> + <Space direction="vertical" size={16}> + <View> + <View className="h2">{translated.supportText}</View> + <Demo4 /> + </View> + <View> + <View className="h2">{translated.supportIcon}</View> + <Demo5 /> + </View> + <View> + <View className="h2">{translated.eventTip}</View> + <Demo6 /> + </View> + <View> + <View className="h2">{translated.customColor}</View> + <Demo7 /> + </View> + </Space>src/packages/switch/doc.md (2)
61-67: 建议添加示例说明文字建议在示例代码块之前添加简要说明，描述此演示的具体功能和使用场景，以帮助用户更好地理解自定义颜色的实现方式。
### 自定义颜色 +通过 CSS 变量可以自定义开关组件的颜色样式。 :::demo
91-104: 建议完善 CSS 变量说明新增的 CSS 变量增强了组件的可定制性，建议对以下变量添加更详细的说明：
--nutui-switch-border-width：建议说明此边框是否影响组件尺寸--nutui-switch-inside-box-shadow：建议提供阴影效果的视觉说明--nutui-switch-label-font-size：建议说明与组件尺寸的关系| \--nutui-switch-border-width | 开关边框宽度 | `2px` | +| \--nutui-switch-border-width | 开关边框宽度，不会影响组件整体尺寸 | `2px` | | \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` | +| \--nutui-switch-inside-box-shadow | 开关内部按钮阴影，提供立体感和层次感 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` | | \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-s` | +| \--nutui-switch-label-font-size | 开关内部文字大小，建议不超过开关高度的 60% | `$font-size-s` |src/packages/switch/doc.zh-TW.md (1)
88-104: 主题定制变量文档完善新增的 CSS 变量提供了更全面的样式定制能力，建议补充以下内容：
- 为新增的变量添加示例值
- 考虑添加变量使用的示例代码
src/packages/switch/doc.taro.md (2)
61-67: 建议添加自定义颜色部分的说明文字为了提高文档的可读性和完整性，建议在示例代码之前添加简要说明，描述自定义颜色的使用场景和配置方法。
### 自定义颜色 + +通过 CSS 变量可以自定义开关组件的颜色样式，包括背景色、文字颜色等。 :::demo
91-104: 建议对 CSS 变量进行分组整理当前的 CSS 变量列表很完整，但建议按照功能类别进行分组，以提高文档的可读性。
建议按以下方式组织：
| 名称 | 说明 | 默认值 | | --- | --- | --- | +# 颜色相关 | \--nutui-switch-open-background-color | 开关打开状态背景颜色 | `$color-primary` | | \--nutui-switch-close-background-color | 开关关闭状态背景颜色 | `$color-text-disabled` | | \--nutui-switch-open-disabled-background-color | 开关打开状态禁用的背景颜色 | `$color-primary-disabled-special` | | \--nutui-switch-close-disabled-background-color | 开关关闭状态禁用的背景颜色 | `$color-background` | | \--nutui-switch-close-line-bg-color | 开关关闭状态内部按钮线条颜色 | `#ffffff` | +# 尺寸相关 | \--nutui-switch-width | 开关宽度 | `46px` | | \--nutui-switch-height | 开关高度 | `28px` | | \--nutui-switch-line-height | 开关行高 | `28px` | +# 圆角和边框 | \--nutui-switch-border-radius | 开关圆角大小 | `$radius-circle` | | \--nutui-switch-border-width | 开关边框宽度 | `2px` | | \--nutui-switch-inside-border-radius | 开关内部按钮圆角大小 | `$radius-full` | | \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` | +# 文字样式 | \--nutui-switch-label-text-color | 开关内部文字颜色 | `$color-primary-text` | | \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-s` | | \--nutui-switch-close-disabled-label-text-color | 开关关闭禁用内部文字颜色 | `$color-text-disabled` |src/packages/switch/switch.tsx (1)
87-99: 标签渲染逻辑优化合理新的实现方式有以下优点：
- 条件渲染逻辑清晰
- RTL布局支持完善
- 禁用状态样式处理恰当
建议考虑以下优化：
- 将类名构建逻辑抽取为独立函数，提高可维护性
- 考虑使用 CSS-in-JS 或 CSS Modules 来避免类名冲突
+ const getLabelClasses = (value: boolean, rtl: boolean, disabled: boolean) => { + return classNames(`${classPrefix}-label`, { + [`${classPrefix}-label-open`]: value, + [`${classPrefix}-label-close`]: !value, + [`${classPrefix}-label-open-rtl`]: rtl && value, + [`${classPrefix}-label-close-rtl`]: rtl && !value, + [`${classPrefix}-label-close-disabled`]: disabled && !value, + }) + } {activeText && ( <div - className={classNames(`${classPrefix}-label`, { - [`${classPrefix}-label-open`]: value, - [`${classPrefix}-label-close`]: !value, - [`${classPrefix}-label-open-rtl`]: rtl && value, - [`${classPrefix}-label-close-rtl`]: rtl && !value, - [`${classPrefix}-label-close-disabled`]: disabled && !value, - })} + className={getLabelClasses(value, rtl, disabled)} > {value ? activeText : inactiveText} </div> )}src/packages/switch/switch.taro.tsx (1)
94-106: 标签渲染逻辑优化合理代码重构后的标签渲染逻辑更加清晰：
- 使用
classNames统一管理类名- 新增
${classPrefix}-label-close-disabled类优化了禁用状态的样式处理- 完善了 RTL 支持
建议：
考虑在组件文档中添加以下内容：
- RTL 支持的使用说明
- 禁用状态下的样式效果展示
activeText和inactiveText支持 ReactNode 的使用示例+ ## RTL 支持 + + Switch 组件支持 RTL（从右到左）布局，可通过 ConfigProvider 组件进行配置： + + ```jsx + <ConfigProvider direction="rtl"> + <Switch activeText="开" inactiveText="关" /> + </ConfigProvider> + ```src/packages/switch/doc.en-US.md (2)
37-68: 文档结构调整建议文档结构已经重新组织，新增了图标支持和自定义颜色的部分。建议在这些新增的示例部分添加更详细的使用说明，以帮助开发者更好地理解这些新功能。
建议在示例代码之前添加简要说明：
### Support Icon + Switch 组件支持在内部显示自定义图标，可以通过 activeText 和 inactiveText 属性传入 ReactNode 来实现。 :::demo
90-104: CSS 变量文档完善建议新增了多个 CSS 变量的说明，这对于组件的样式定制很有帮助。建议补充一些实际应用场景的说明。
建议为关键的 CSS 变量添加使用场景说明，例如：
| \--nutui-switch-border-width | Switch border width | `2px` | + 使用场景：自定义开关边框粗细，可用于实现不同风格的开关样式 | \--nutui-switch-inside-box-shadow | Switch Internal Button Shadow | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` | + 使用场景：调整开关按钮的立体感，可配合其他阴影属性实现更丰富的视觉效果
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (21)
src/packages/switch/demo.taro.tsx(5 hunks)src/packages/switch/demo.tsx(5 hunks)src/packages/switch/demos/h5/demo3.tsx(1 hunks)src/packages/switch/demos/h5/demo4.tsx(1 hunks)src/packages/switch/demos/h5/demo5.tsx(1 hunks)src/packages/switch/demos/h5/demo6.tsx(1 hunks)src/packages/switch/demos/h5/demo7.tsx(1 hunks)src/packages/switch/demos/taro/demo3.tsx(1 hunks)src/packages/switch/demos/taro/demo4.tsx(1 hunks)src/packages/switch/demos/taro/demo5.tsx(1 hunks)src/packages/switch/demos/taro/demo6.tsx(1 hunks)src/packages/switch/demos/taro/demo7.tsx(1 hunks)src/packages/switch/doc.en-US.md(3 hunks)src/packages/switch/doc.md(3 hunks)src/packages/switch/doc.taro.md(3 hunks)src/packages/switch/doc.zh-TW.md(1 hunks)src/packages/switch/switch.harmony.css(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/styles/variables.scss(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- src/packages/switch/demos/h5/demo7.tsx
- src/packages/switch/demos/taro/demo7.tsx
🧰 Additional context used
🪛 Markdownlint
src/packages/switch/doc.zh-TW.md
86-86: null
Link fragments should be valid
(MD051, link-fragments)
🔇 Additional comments (24)
src/packages/switch/demos/h5/demo3.tsx (2)
1-2: 导入语句结构清晰且合理！
导入语句组织得当，将相关组件都从 @nutui/nutui-react 包中导入。
7-10: 使用 Space 组件改善了布局结构！
使用 Space 组件包装开关组件是一个很好的改进，提供了更好的间距控制和视觉组织。
src/packages/switch/demos/taro/demo3.tsx (1)
2-2: 导入声明看起来没有问题！
Space组件的导入正确地与其他NutUI组件放在一起。
src/packages/switch/demos/h5/demo6.tsx (1)
1-2: 导入声明看起来没有问题！
导入语句组织得当，将相关组件都从 @nutui/nutui-react 包中导入。
src/packages/switch/demos/h5/demo4.tsx (1)
7-12: 代码结构优化和展示效果提升
使用 Space 组件组织多个 Switch 实例的布局是个很好的改进，让示例代码更加清晰和易读。展示了不同状态（默认开启、禁用）和不同文本标签的组合，能够全面地展示组件的功能。
src/packages/switch/demos/taro/demo4.tsx (1)
1-2: 导入声明看起来很清晰！
导入必要的组件，并且使用 Space 组件来改善布局是个不错的选择。
src/packages/switch/demos/taro/demo6.tsx (1)
3-3: 导入语句正确添加！
导入 Taro 的位置合理，且确实需要用于实现 toast 提示功能。
src/packages/switch/demos/h5/demo5.tsx (1)
2-3: 导入声明看起来不错！
新增的组件导入清晰明确，并且都在代码中得到了适当的使用。
src/packages/switch/demos/taro/demo5.tsx (2)
2-3: 导入语句组织合理！
导入语句按照包进行了合理分组，并且只引入了必要的组件和图标。
8-21: 组件实现结构清晰！
使用 Space 组件来组织多个 Switch 的布局是个很好的选择，展示了不同状态下的 Switch 组件表现。
src/packages/switch/demo.tsx (3)
9-9: 导入语句结构正确！
新增的 Demo7 组件导入遵循了现有的导入模式，保持了代码的一致性。
19-19: 翻译内容完整且一致！
新增的 'supportIcon' 翻译已正确添加到所有支持的语言中（zh-CN、zh-TW、en-US），并保持了语义一致性。
Also applies to: 28-28, 37-37
50-57: 请确认演示组件的展示顺序
组件展示顺序已调整，新增了 Demo7 组件。建议确认：
- 当前的展示顺序是否符合产品设计规范
- Demo7 的功能是否与
customColor标题相匹配
✅ Verification successful
Let me gather more information about Demo7 and its relationship with customColor.
Let me gather more information about the Switch component's Demo7 implementation and its relationship with customColor.
展示顺序和功能匹配验证完成
经验证：
- Demo7 组件通过 CSS 变量实现了开关组件的自定义颜色功能，与标题
customColor相匹配 - 组件展示顺序符合文档结构，从基础功能到进阶特性逐步展开
- H5 和 Taro 版本的实现保持一致，确保了跨平台的统一体验
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他相关文件中的展示顺序是否一致
echo "检查 Taro 版本中的展示顺序："
rg -A 10 "const SwitchDemo" src/packages/switch/demo.taro.tsx
echo "检查文档中的展示顺序："
rg -A 10 "## Switch" src/packages/switch/doc.md
Length of output: 896
Script:
#!/bin/bash
# 检查 Demo7 组件的实现
echo "检查 Demo7 组件的实现："
ast-grep --pattern 'const Demo7 = () => {
$$$
}'
# 检查其他演示组件的顺序
echo "检查演示组件的引用顺序："
rg "import Demo" src/packages/switch/demo.tsx
# 检查组件的实际渲染顺序
echo "检查组件的实际渲染顺序："
rg "<Demo[1-7]" src/packages/switch/demo.tsx
Length of output: 100937
Script:
#!/bin/bash
# 检查 Demo7 组件的实现和自定义颜色相关代码
echo "检查 Switch Demo7 组件的实现："
ast-grep --pattern 'const Demo7 = () => {
$$$
}' src/packages/switch/demos/taro/demo7.tsx src/packages/switch/demos/h5/demo7.tsx
# 检查 Switch 组件的文档
echo "检查 Switch 组件的文档中关于自定义颜色的说明："
rg -A 3 "customColor|自定义颜色" src/packages/switch/doc.md src/packages/switch/doc.*.md
Length of output: 2314
src/packages/switch/switch.harmony.css (1)
17-30: 按钮样式实现得当
使用绝对定位配合 transform 实现垂直居中，以及使用 calc() 计算尺寸的方案都很合理。阴影效果的添加也提升了组件的视觉层次感。
src/packages/switch/demo.taro.tsx (3)
4-4: 导入语句的更改看起来合理
- 修正了 useTranslate 的导入路径
- 新增了 Demo7 组件的导入
这些更改与PR的目标相符。
Also applies to: 12-12
22-22: 翻译对象已正确更新
新增了 'supportIcon' 的多语言翻译支持，保持了中文简体、繁体和英文的一致性。
Also applies to: 31-31, 40-40
61-61: 验证新增的 Demo7 组件
请确保新增的 Demo7 组件已经过充分测试，并验证其功能完整性。
✅ Verification successful
Demo7 组件已完成验证
Demo7 组件是一个自定义样式的 Switch 组件示例，通过 CSS 变量修改了开关的背景颜色。组件实现完整，包含了必要的功能和样式定制。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查 Demo7 组件的实现
ast-grep --pattern 'export default function Demo7() {
$$$
}'
Length of output: 64
Script:
#!/bin/bash
# Search for Demo7 component implementation with a more flexible pattern
ast-grep --pattern 'function Demo7() {
$$$
}'
# Also try to find Demo7 as a const/var declaration
ast-grep --pattern 'const Demo7 = () => {
$$$
}'
# Search for any file containing Demo7
rg "Demo7" -A 5
Length of output: 101719
Script:
#!/bin/bash
# Search for Demo7 in switch package
rg "Demo7" src/packages/switch/ -A 5
# Search for files in switch package
fd . src/packages/switch/
Length of output: 3129
Script:
#!/bin/bash
# Get content of Demo7 implementation
cat src/packages/switch/demos/taro/demo7.tsx
cat src/packages/switch/demos/h5/demo7.tsx
Length of output: 814
src/packages/switch/doc.md (1)
78-79: 类型更新符合 React 最佳实践
将 activeText 和 inactiveText 的类型从 string 更新为 ReactNode 是个很好的改进，这样可以支持更丰富的内容展示，比如图标或自定义组件。
src/packages/switch/doc.zh-TW.md (2)
37-68: 文档结构调整合理！
新增的功能区块划分清晰，示例代码组织得当。
73-80: 请确认类型变更的影响范围
activeText 和 inactiveText 的类型从 string 更改为 ReactNode，这提供了更灵活的内容展示方式。
✅ Verification successful
类型变更已得到正确实现和使用
代码库验证显示：
- Switch 组件已正确将
activeText和inactiveText定义为React.ReactNode类型 - 示例代码中同时包含了字符串用法（如 "开启"/"关闭"）和组件用法（如
<Check />和<Close />），充分利用了新类型的灵活性
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否所有相关的示例代码都已更新以支持 ReactNode
rg -t tsx "activeText|inactiveText" src/packages/switch/demos/
Length of output: 92
Script:
#!/bin/bash
# Search for activeText and inactiveText usage in all files under switch demos
rg "activeText|inactiveText" src/packages/switch/demos/
# Check the implementation file to verify type definitions
rg "activeText|inactiveText" src/packages/switch/switch.tsx
Length of output: 2048
src/packages/switch/doc.taro.md (1)
78-79: Props 类型更新符合组件实际使用场景
将 activeText 和 inactiveText 的类型从 string 更新为 ReactNode 是一个很好的改进，这样可以支持更丰富的内容展示，比如图标或自定义组件。
src/packages/switch/switch.taro.tsx (1)
13-14: 类型更新提升了组件的灵活性
将 activeText 和 inactiveText 的类型从 string 更改为 React.ReactNode 是一个很好的改进，这样可以支持更丰富的内容渲染。
运行以下脚本以验证现有使用是否会受到影响：
✅ Verification successful
Let me analyze the search results:
- The codebase already has examples using both string values and React components:
- String usage:
activeText="开启" inactiveText="关闭" - Component usage:
activeText={<Check />} inactiveText={<Close />}
- String usage:
- Both H5 and Taro demos show identical patterns
- The type change from
stringtoReact.ReactNodeis already being utilized in the demos
I can now generate the final response:
类型更新符合现有使用场景且增强了组件灵活性
从示例代码可以看出，Switch 组件的 activeText 和 inactiveText 属性已经在实际场景中同时支持字符串和 React 组件的用法。此次类型更新使得接口定义与实际使用保持一致，是一个合理的改进。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查项目中是否有传递字符串以外类型的使用案例
# 搜索 Switch 组件的使用情况
rg -A 2 '<(NutSwitch|Switch)\s+.*?(activeText|inactiveText)='
Length of output: 1598
src/styles/variables.scss (2)
857-871: 开关组件背景色变量定义合理！
使用语义化的颜色变量定义开关组件的关闭状态背景色，包括正常状态和禁用状态，符合设计系统规范。
873-880: 开关组件尺寸变量设置合适！
宽度、高度、行高等尺寸变量定义完整，边框圆角使用 $radius-circle 变量保持一致性，边框宽度设置合理。
| | onChange | 切換開關時觸發 | `onChange:(value: boolean, event: Event)` | `-` | | ||
| | activeText | 打開時文字描述 | `ReactNode` | `-` | | ||
| | inactiveText | 關閉時文字描述 | `ReactNode` | `-` | | ||
| | onChange | 切換開關時觸髮 | `onChange:(value: boolean, event: Event)` | `-` | | ||
|
|
||
| ## 主題定製 | ||
|
|
||
| ### 樣式變量 | ||
|
|
||
| 組件提供了下列 CSS 變量，可用於自定義樣式，使用方法請參考 [ConfigProvider 組件](#/zh-CN/component/configprovider)。 |
There was a problem hiding this comment.
修复文档中的失效链接
ConfigProvider 组件的链接 #/zh-CN/component/configprovider 无效，需要更新为正确的路径。
🧰 Tools
🪛 Markdownlint
86-86: null
Link fragments should be valid
(MD051, link-fragments)
| activeText: React.ReactNode | ||
| inactiveText: React.ReactNode |
There was a problem hiding this comment.
💡 Codebase verification
需要在 CHANGELOG 中记录类型变更
从代码和文档的检查结果来看：
- 文档已经正确更新了
activeText和inactiveText的类型为ReactNode - 迁移指南中仅提到了属性重命名，但未提及类型变更
- CHANGELOG 中未记录这个破坏性的类型变更
建议：
- 在 CHANGELOG 中添加此次类型变更的说明
- 在迁移指南中补充类型变更的相关信息，帮助用户进行升级
🔗 Analysis chain
类型更改需要注意版本兼容性
将 activeText 和 inactiveText 的类型从 string 更改为 React.ReactNode 是一个突破性的改动。这个改动提供了更大的灵活性，允许渲染更复杂的内容，但需要确保：
- 在更新日志中明确记录这个改动
- 为用户提供迁移指南
- 确保文档同步更新
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查文档是否已更新
rg -l "activeText.*string|inactiveText.*string" "doc*.md"
Length of output: 107
Script:
#!/bin/bash
# Search for documentation files in the repository
fd -e md
# Then search for any mentions of activeText or inactiveText in these files
rg -i "activeText|inactiveText" -A 2 -B 2
Length of output: 33794
Script:
#!/bin/bash
# 检查 CHANGELOG 中是否记录了这个改动
rg -i "activeText|inactiveText.*ReactNode" CHANGELOG.md
# 检查是否有迁移指南
rg -i "activeText|inactiveText" migrate-from-*.md
Length of output: 241
| | activeText | Text description when opening | `ReactNode` | `-` | | ||
| | inactiveText | Text description when closed | `ReactNode` | `-` | |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Props 类型更新需要补充说明
activeText 和 inactiveText 的类型从 string 更新为 ReactNode，这是一个重要的变更。建议添加使用示例说明。
建议在类型说明后添加示例：
| activeText | Text description when opening | `ReactNode` | `-` |
+ 示例：`activeText="开启"` 或 `activeText={<Icon name="success" />}`
| inactiveText | Text description when closed | `ReactNode` | `-` |
+ 示例：`inactiveText="关闭"` 或 `inactiveText={<Icon name="close" />}`📝 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.
| | activeText | Text description when opening | `ReactNode` | `-` | | |
| | inactiveText | Text description when closed | `ReactNode` | `-` | | |
| | activeText | Text description when opening | `ReactNode` | `-` | | |
| 示例：`activeText="开启"` 或 `activeText={<Icon name="success" />}` | |
| | inactiveText | Text description when closed | `ReactNode` | `-` | | |
| 示例：`inactiveText="关闭"` 或 `inactiveText={<Icon name="close" />}` |
| | \--nutui-switch-open-background-color | Switch on status background color | `$color-primary` | | ||
| | \--nutui-switch-close-background-color | Switch off status background color | `$color-text-disabled` | | ||
| | \--nutui-switch-open-disabled-background-color | Switch toggle on the background color disabled | `$color-primary-disabled-special` | | ||
| | \--nutui-switch-close-disabled-background-color | Turn off the background color disabled | `$color-background` | | ||
| | \--nutui-switch-close-line-bg-color | Switch Off Internal Button Line Color | `#ffffff` | | ||
| | \--nutui-switch-width | Switch Width | `46px` | | ||
| | \--nutui-switch-height | Switch height | `28px` | | ||
| | \--nutui-switch-line-height | Switch line height | `28px` | | ||
| | \--nutui-switch-border-radius | Switch rounded corner size | `$radius-circle` | | ||
| | \--nutui-switch-border-width | Switch border width | `2px` | | ||
| | \--nutui-switch-inside-border-radius | Switch internal button rounded corner size | `$radius-full` | | ||
| | \--nutui-switch-inside-box-shadow | Switch Internal Button Shadow | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` | | ||
| | \--nutui-switch-label-text-color | Switch internal text color | `$color-primary-text` | | ||
| | \--nutui-switch-label-font-size | Switch internal text size | `$font-size-s` | | ||
| | \--nutui-switch-close-disabled-label-text-color | Turn off and disable internal text color | `$color-text-disabled` | |
There was a problem hiding this comment.
💡 Codebase verification
文档中的 CSS 变量与实际实现存在不一致
经过验证，发现以下问题：
- 文档中的 CSS 变量命名使用了
--nutui-switch-前缀，但在switch.scss中使用的是$switch-前缀 - 部分变量名称不一致，例如：
- 文档：
--nutui-switch-close-line-bg-color - 实现：
$switch-close-line-background-color
- 文档：
- 组件接口定义中的
activeText和inactiveText属性类型为必选，而文档中未标注必选性
建议：
- 统一 CSS 变量的命名规范，使用
--nutui-switch-前缀 - 修正变量名称的不一致问题
- 在文档中明确标注属性的必选/可选性
🔗 Analysis chain
验证文档与实现的一致性
需要确保文档中新增的 CSS 变量和属性在组件实现中都已正确支持。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查组件实现中是否包含所有记录的 CSS 变量
rg --type=tsx "nutui-switch-(border-width|inside-border-radius|inside-box-shadow|label-text-color|label-font-size|close-disabled-label-text-color)" src/packages/switch/
# 检查 Props 接口定义
ast-grep --pattern 'interface SwitchProps {
$$$
activeText?: ReactNode
inactiveText?: ReactNode
$$$
}'
Length of output: 311
Script:
#!/bin/bash
# 检查组件实现中是否包含所有记录的 CSS 变量
rg "nutui-switch-(border-width|inside-border-radius|inside-box-shadow|label-text-color|label-font-size|close-disabled-label-text-color)" src/packages/switch/
# 检查样式文件中的变量定义
cat src/packages/switch/switch.scss
# 检查组件接口定义
cat src/packages/switch/switch.tsx
Length of output: 7901
| border-radius: $switch-inside-border-radius; | ||
| background: $color-primary-text; | ||
| transition: transform 0.3s; | ||
| box-shadow: $switch-button-box-shadow; | ||
| transition: left 0.3s linear; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议将过渡效果应用于transform属性
当前对left属性应用过渡可能导致性能问题。建议使用transform属性进行过渡，以提升页面渲染性能和动画流畅度。
修改如下：
- transition: left 0.3s linear;
+ transition: transform 0.3s linear;📝 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.
| transition: left 0.3s linear; | |
| transition: transform 0.3s linear; |
| left: calc(100% - $switch-height + $switch-border-width); | ||
| &-rtl { | ||
| transform: var(--nutui-switch-inside-open-transform, translateX(-18px)); | ||
| left: $switch-border-width; | ||
| } | ||
| } | ||
| &-close { | ||
| transform: $switch-inside-close-transform; | ||
| left: $switch-border-width; | ||
| &-rtl { | ||
| transform: var(--nutui-switch-inside-close-transform, translateX(-2px)); | ||
| left: calc(100% - $switch-height + $switch-border-width); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
使用transform替代left属性进行位置移动
直接操作left属性可能触发浏览器重排，影响性能。建议使用transform: translateX()来实现按钮的水平移动，提升性能和动画效果。
可以将代码修改如下：
/* 在 &-button 中添加初始状态 */
+ transform: translateX(0);
/* 在 &-button &-open 中 */
- left: calc(100% - $switch-height + $switch-border-width);
+ transform: translateX(calc(100% - $switch-height));
/* 在 &-button &-close 中 */
- left: $switch-border-width;
+ transform: translateX(0);请根据实际需要调整 translateX 的值，确保按钮在打开和关闭状态下的位置正确。
Committable suggestion skipped: line range outside the PR's diff.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
src/config.json (1)
Line range hint
1-1439: 建议：为v14组件添加迁移指南目前配置文件中有两个组件（Switch和Pagination）被标记为v14版本。建议添加相关的迁移指南，帮助用户从旧版本升级到v14版本。
是否需要我协助创建v14版本的迁移指南文档？
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
src/config.json(1 hunks)
🔇 Additional comments (1)
src/config.json (1)
676-676: Switch组件已标记为v14版本
该更改表明Switch组件已更新到v14版本。请确保相关的文档和演示代码也已相应更新。
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (3)
src/styles/variables.scss (3)
868-871: 禁用状态背景色需要优化对比度当前禁用状态使用
$color-background作为背景色，可能导致在某些主题下对比度不足。建议使用更明显的禁用状态颜色。$switch-close-disabled-background-color: var( --nutui-switch-close-disabled-background-color, - $color-background + rgba($color-text-disabled, 0.1) ) !default;
876-878: 开关组件尺寸变量命名需要优化建议添加 size 相关的变量，以支持不同尺寸的开关：
+$switch-size-small-width: var(--nutui-switch-size-small-width, 38px) !default; +$switch-size-small-height: var(--nutui-switch-size-small-height, 24px) !default; $switch-width: var(--nutui-switch-width, 46px) !default; $switch-height: var(--nutui-switch-height, 28px) !default; $switch-line-height: var(--nutui-switch-line-height, 28px) !default; +$switch-size-large-width: var(--nutui-switch-size-large-width, 54px) !default; +$switch-size-large-height: var(--nutui-switch-size-large-height, 32px) !default;
902-912: 标签文本样式变量需要补充建议添加更多标签样式相关的变量，以提供更灵活的自定义选项：
$switch-label-text-color: var( --nutui-switch-label-text-color, $color-primary-text ) !default; $switch-label-font-size: var( --nutui-switch-label-font-size, $font-size-s ) !default; $switch-close-disabled-label-text-color: var( --nutui-switch-close-disabled-label-text-color, $color-text-disabled ) !default; +$switch-label-margin: var( + --nutui-switch-label-margin, + 0 4px +) !default; +$switch-label-font-weight: var( + --nutui-switch-label-font-weight, + $font-weight +) !default;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
src/config.json(1 hunks)src/styles/variables.scss(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/config.json
| /* #ifdef harmony */ | ||
| $switch-inside-box-shadow: var( | ||
| --nutui-switch-inside-box-shadow, | ||
| 0px 2px 6px 0px rgba(0, 0, 0, 0.1) | ||
| ) !default; | ||
| /* #endif */ | ||
| /* #ifndef harmony */ | ||
| $switch-inside-box-shadow: var( | ||
| --nutui-switch-inside-box-shadow, | ||
| 0px 2px 1px 0px rgba(0, 0, 0, 0.06), | ||
| 0px 2px 6px 0px rgba(0, 0, 0, 0.1), | ||
| 0px 0px 0px 1px rgba(0, 0, 0, 0.02) | ||
| ) !default; | ||
| /* #endif */ |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议优化条件编译的阴影样式定义
当前代码存在重复的阴影定义，建议合并这些定义：
-/* #ifdef harmony */
-$switch-inside-box-shadow: var(
- --nutui-switch-inside-box-shadow,
- 0px 2px 6px 0px rgba(0, 0, 0, 0.1)
-) !default;
-/* #endif */
-/* #ifndef harmony */
-$switch-inside-box-shadow: var(
- --nutui-switch-inside-box-shadow,
- 0px 2px 1px 0px rgba(0, 0, 0, 0.06),
- 0px 2px 6px 0px rgba(0, 0, 0, 0.1),
- 0px 0px 0px 1px rgba(0, 0, 0, 0.02)
-) !default;
-/* #endif */
+$switch-inside-box-shadow-base: var(
+ --nutui-switch-inside-box-shadow-base,
+ 0px 2px 6px 0px rgba(0, 0, 0, 0.1)
+) !default;
+
+$switch-inside-box-shadow: var(
+ --nutui-switch-inside-box-shadow,
+ if($platform == 'harmony',
+ $switch-inside-box-shadow-base,
+ 0px 2px 1px 0px rgba(0, 0, 0, 0.06),
+ 0px 2px 6px 0px rgba(0, 0, 0, 0.1),
+ 0px 0px 0px 1px rgba(0, 0, 0, 0.02)
+ )
+) !default;📝 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.
| /* #ifdef harmony */ | |
| $switch-inside-box-shadow: var( | |
| --nutui-switch-inside-box-shadow, | |
| 0px 2px 6px 0px rgba(0, 0, 0, 0.1) | |
| ) !default; | |
| /* #endif */ | |
| /* #ifndef harmony */ | |
| $switch-inside-box-shadow: var( | |
| --nutui-switch-inside-box-shadow, | |
| 0px 2px 1px 0px rgba(0, 0, 0, 0.06), | |
| 0px 2px 6px 0px rgba(0, 0, 0, 0.1), | |
| 0px 0px 0px 1px rgba(0, 0, 0, 0.02) | |
| ) !default; | |
| /* #endif */ | |
| $switch-inside-box-shadow-base: var( | |
| --nutui-switch-inside-box-shadow-base, | |
| 0px 2px 6px 0px rgba(0, 0, 0, 0.1) | |
| ) !default; | |
| $switch-inside-box-shadow: var( | |
| --nutui-switch-inside-box-shadow, | |
| if($platform == 'harmony', | |
| $switch-inside-box-shadow-base, | |
| 0px 2px 1px 0px rgba(0, 0, 0, 0.06), | |
| 0px 2px 6px 0px rgba(0, 0, 0, 0.1), | |
| 0px 0px 0px 1px rgba(0, 0, 0, 0.02) | |
| ) | |
| ) !default; |
| $switch-close-background-color: var( | ||
| --nutui-switch-close-background-color, | ||
| $color-text-disabled |
There was a problem hiding this comment.
🛠️ Refactor suggestion
关闭状态背景色变量需要统一命名规范
建议将变量命名与其他状态保持一致，使用更具描述性的命名：
-$switch-close-background-color: var(
- --nutui-switch-close-background-color,
- $color-text-disabled
-) !default;
+$switch-inactive-background-color: var(
+ --nutui-switch-inactive-background-color,
+ $color-text-disabled
+) !default;📝 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.
| $switch-close-background-color: var( | |
| --nutui-switch-close-background-color, | |
| $color-text-disabled | |
| $switch-inactive-background-color: var( | |
| --nutui-switch-inactive-background-color, | |
| $color-text-disabled | |
| ) !default; |
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
Demo7组件，展示开关的不同状态。Space组件，以优化布局。文档
Switch组件的文档，增加对新属性和 CSS 变量的说明。样式