feat: checkbox adaptation #2730
Conversation
Walkthrough此次提交主要涉及多个组件的版本更新，所有相关组件的版本号均从 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CheckboxGroup
participant Checkbox
User->>CheckboxGroup: 选择复选框
CheckboxGroup->>Checkbox: 更新状态
Checkbox->>CheckboxGroup: 返回新状态
CheckboxGroup->>User: 显示更新后的状态
Possibly related PRs
Suggested labels
Suggested reviewers
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 @@
## V3.0 #2730 +/- ##
==========================================
- Coverage 83.98% 83.98% -0.01%
==========================================
Files 221 220 -1
Lines 17879 17876 -3
Branches 2676 2676
==========================================
- Hits 15016 15013 -3
Misses 2858 2858
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: 0
🧹 Outside diff range and nitpick comments (6)
src/packages/checkbox/index.ts (1)
6-11: 建议添加类型定义的文档注释为了提高代码的可维护性和可读性，建议为
CompoundedComponent类型添加JSDoc文档注释，说明其用途和属性。建议添加如下注释：
+/** + * 复合复选框组件类型 + * @property Group - 复选框组组件 + */ type CompoundedComponent = React.FC< Partial<CheckboxProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> > & { Group: typeof CheckboxGroup }src/packages/checkbox/index.taro.ts (1)
6-11: 建议添加类型定义的文档注释类型定义的结构合理，但建议添加 JSDoc 注释来说明这个复合组件类型的用途和属性。
建议添加如下注释：
+/** + * Checkbox组件的复合类型定义 + * @property Group - CheckboxGroup组件类型 + */ type CompoundedComponent = React.FC< Partial<CheckboxProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> > & { Group: typeof CheckboxGroup }src/packages/checkbox/demos/taro/demo9.tsx (1)
36-36: 使用 View 替换 span 提升了移动端兼容性将
span替换为View是一个很好的改进，因为：
View是 Taro 推荐的基础布局组件- 这种改变确保了在各种小程序平台上有更好的兼容性
- 与其他 demo 文件保持了一致的组件使用方式
src/packages/checkbox/checkbox.tsx (2)
Line range hint
89-97: 建议增强上下文处理的健壮性当前的上下文处理逻辑可以进行以下优化：
- 添加对
ctx.value的空值检查- 考虑添加错误边界处理
建议添加如下防御性代码：
if (ctx) { if (ctx.labelPosition !== undefined) { labelPosition = ctx.labelPosition } innerDisabled = ctx.disabled !== undefined ? ctx.disabled : innerDisabled - innerChecked = ctx.value.includes(value) + innerChecked = Array.isArray(ctx.value) ? ctx.value.includes(value) : false setChecked = (checked: boolean) => { if (ctx.disabled) return + if (!Array.isArray(ctx.value)) return if (checked) ctx.check(value) if (!checked) ctx.uncheck(value) } }
Line range hint
99-127: 建议重构图标渲染逻辑以提高可维护性当前的图标渲染逻辑包含多层嵌套条件，建议重构以提高代码的可读性和可维护性。
建议采用以下方式重构：
const renderIcon = () => { + const iconMap = { + disabled: { + indeterminate: <CheckDisabled className={color()} />, + checked: <Checked className={color()} />, + default: <CheckDisabled className={color()} /> + }, + normal: { + unchecked: React.isValidElement(icon) ? icon : <CheckNormal className={color()} />, + indeterminate: React.isValidElement(indeterminateIcon) ? indeterminateIcon : <CheckDisabled className={color()} />, + checked: React.isValidElement(activeIcon) ? activeIcon : <Checked className={color()} /> + } + } + + if (innerDisabled) { + const state = innerIndeterminate ? 'indeterminate' : (innerChecked ? 'checked' : 'default') + return iconMap.disabled[state] + } + + if (!innerChecked) return iconMap.normal.unchecked + return innerIndeterminate ? iconMap.normal.indeterminate : iconMap.normal.checked - if (innerDisabled) { - if (innerIndeterminate) { - return <CheckDisabled className={color()} /> - } - if (innerChecked) { - return <Checked className={color()} /> - } - return <CheckDisabled className={color()} /> - } - // ... 原有代码 ... }这样的重构可以：
- 减少嵌套的条件判断
- 提高代码的可读性
- 使逻辑更容易测试和维护
src/packages/checkbox/checkbox.taro.tsx (1)
148-154: 渲染实现符合 Taro 规范！将
span替换为 Taro 的View组件是正确的改动，这样可以确保在不同平台上都能正确渲染。不过建议考虑以下优化：- <View - className={classNames(`${classPrefix}-label `, { - [`${classPrefix}-label-disabled`]: innerDisabled, - })} - > + <View className={`${classPrefix}-label${innerDisabled ? ` ${classPrefix}-label-disabled` : ''}`}>这样可以避免每次渲染时重新创建对象，提高性能。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (11)
src/config.json(2 hunks)src/packages/checkbox/checkbox.taro.tsx(3 hunks)src/packages/checkbox/checkbox.tsx(2 hunks)src/packages/checkbox/demos/taro/demo1.tsx(3 hunks)src/packages/checkbox/demos/taro/demo2.tsx(2 hunks)src/packages/checkbox/demos/taro/demo3.tsx(2 hunks)src/packages/checkbox/demos/taro/demo8.tsx(0 hunks)src/packages/checkbox/demos/taro/demo9.tsx(2 hunks)src/packages/checkbox/index.taro.ts(1 hunks)src/packages/checkbox/index.ts(1 hunks)src/packages/checkboxgroup/checkboxgroup.scss(2 hunks)
💤 Files with no reviewable changes (1)
- src/packages/checkbox/demos/taro/demo8.tsx
✅ Files skipped from review due to trivial changes (1)
- src/packages/checkbox/demos/taro/demo1.tsx
🔇 Additional comments (16)
src/packages/checkbox/index.ts (2)
1-4: 导入和类型导出结构清晰！
导入语句和类型导出的组织结构合理，符合TypeScript最佳实践。
12-15: 组件组合实现正确，建议验证使用情况
组件的组合实现遵循了复合组件模式，结构合理。但由于更改了默认导出从Checkbox到InnerCheckbox，建议验证现有代码中的使用情况。
运行以下脚本来验证组件的使用情况：
✅ Verification successful
Let me verify the actual usage of the component by checking the import statements in the demo files.
Let me check if there are any usages outside the demo and documentation files.
Let me try a different approach to search for usages.
代码更改安全，无需额外修改
经过验证，将Checkbox重命名为InnerCheckbox作为默认导出是安全的，原因如下：
- 这个更改仅在组件内部实现，不会影响外部使用
- 所有示例和文档中都是通过
@nutui/nutui-react包路径导入，而不是直接引用内部文件 - 组件的类型定义和API保持不变
CheckboxGroup的关联也正确保留
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查代码库中Checkbox组件的导入和使用情况
# 预期结果：找到所有需要更新的使用点
# 搜索直接导入Checkbox的地方
rg "import.*Checkbox.*from.*['\"]@nutui/nutui-react['\"]" -l
# 搜索使用CheckboxGroup的地方
rg "import.*CheckboxGroup.*from.*['\"]@nutui/nutui-react['\"]" -l
# 搜索示例代码中的使用
rg -t md "import.*Checkbox.*from.*['\"]@nutui/nutui-react['\"]" -l
Length of output: 1030
Script:
#!/bin/bash
# 检查demo文件中的具体导入语句
rg "import.*Checkbox.*from.*['\"]@nutui/nutui-react['\"]" src/packages/checkbox/demos/h5/ -A 2
# 检查文档中的导入语句
rg "import.*Checkbox.*from.*['\"]@nutui/nutui-react['\"]" src/packages/checkbox/doc.md -A 2
Length of output: 3364
Script:
#!/bin/bash
# 排除demos和doc目录，检查其他地方的使用情况
rg "import.*Checkbox.*from.*['\"]@nutui/nutui-react['\"]" --type ts --type tsx --glob '!*/demos/*' --glob '!*/doc*' -l
# 检查是否有直接使用CheckboxGroup的情况
rg "CheckboxGroup" --type ts --type tsx --glob '!*/demos/*' --glob '!*/doc*' -l
Length of output: 260
Script:
#!/bin/bash
# 使用更通用的搜索方式查找代码库中的使用情况
rg "Checkbox" --glob '!*/demos/*' --glob '!*/doc*' -l
# 查看index.ts的完整内容以了解导出情况
cat src/packages/checkbox/index.ts
Length of output: 2854
src/packages/checkbox/index.taro.ts (2)
1-2: 导入语句结构清晰！
导入语句的组织方式合理，分别从本地文件和相关组件中导入所需的类型和组件。
12-15: 复合组件模式的实现看起来不错，建议验证使用方式
组件组合的实现符合TypeScript的最佳实践，但建议确认以下几点：
- 确保其他使用此组件的地方已经适配了新的复合组件模式
- 验证文档是否已更新以反映这种使用方式
运行以下脚本来验证组件的使用情况：
✅ Verification successful
基于搜索结果的分析，我可以生成最终响应了。从代码中可以看到：
- 复合组件模式在整个代码库中得到了广泛且一致的使用，包括文档、示例和测试
- 所有使用示例都正确使用了
Checkbox.Group语法 - 文档（doc.md、doc.en-US.md等）中也正确记录了复合组件的用法
- 组件的使用方式在H5和Taro版本中保持一致
复合组件模式实现正确且使用方式统一
代码库中的使用方式与当前实现完全匹配，无需额外适配。文档和示例也都已更新，反映了正确的使用方式。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查Checkbox组件的使用方式，确保与新的复合组件模式兼容
# 搜索Checkbox的使用示例
echo "检查Checkbox的使用示例："
rg -t tsx -t ts "import.*Checkbox.*from.*['\"]@nutui/nutui-react['\"]" -A 3
# 搜索CheckboxGroup的使用示例
echo "检查CheckboxGroup的使用示例："
rg -t tsx -t ts "Checkbox\.Group" -A 3
Length of output: 452
Script:
#!/bin/bash
# 搜索Checkbox的使用示例，不限制文件类型
echo "检查Checkbox的使用示例："
rg "import.*Checkbox.*from" -A 3
# 搜索CheckboxGroup的使用示例
echo "检查CheckboxGroup的使用示例："
rg "Checkbox\.Group" -A 3
# 搜索demo或示例文件中的使用方式
echo "检查示例文件："
fd -e md -e tsx -e ts "demo|example" --exec rg -l "Checkbox"
Length of output: 33923
src/packages/checkbox/demos/taro/demo3.tsx (2)
3-3: 导入语句符合 Taro 开发规范！
从 @tarojs/components 导入 View 组件是符合 Taro 跨端开发的最佳实践。
34-36: View 组件替换提升了跨端兼容性！
使用 Taro 的 View 组件替代 HTML span 标签是正确的改动，这样可以确保在不同端上有一致的表现。
让我们验证其他文件是否也进行了类似的替换：
✅ Verification successful
Let me analyze the usage context to determine if these spans need to be replaced with View components or if they serve a different purpose.
需要保持 H5 和 Taro 版本的组件结构差异！
经过分析发现：
- H5 版本（checkbox.tsx）使用
span作为标签文本容器是合理的 - Taro 版本（checkbox.taro.tsx）使用
View组件是正确的 - 这种区别是有意为之的，用于适配不同平台的特性
因此当前的改动是正确的，不需要统一替换所有的 span 标签。H5 demo 中使用 span，Taro demo 中使用 View 符合各自平台的最佳实践。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查是否还有其他 checkbox 相关文件使用了 span 标签
# 预期：不应该找到 span 标签的使用
# 在 checkbox 相关文件中搜索 span 标签
rg -i '<span' src/packages/checkbox/
Length of output: 372
Script:
#!/bin/bash
# 检查 checkbox 组件中 span 标签的具体使用场景和上下文
rg -i '<span' src/packages/checkbox/ -B 2 -A 2
# 检查是否有使用 View 组件的情况
rg -i '<View' src/packages/checkbox/
# 检查 checkbox.tsx 的完整实现以了解组件结构
cat src/packages/checkbox/checkbox.tsx
Length of output: 10367
src/packages/checkbox/demos/taro/demo9.tsx (1)
2-3: 导入语句的改进符合 Taro 最佳实践
导入顺序的调整和添加 View 组件的导入符合 Taro 应用程序的标准实践。这种改变有助于保持代码的一致性和可维护性。
src/packages/checkboxgroup/checkboxgroup.scss (2)
9-10: 垂直布局实现正确且符合最佳实践！
使用 flex 布局和 column 方向是实现垂直堆叠的标准做法，代码简洁明了。
28-30: 水平布局实现合理，具有良好的响应式特性！
使用 flex 布局配合 wrap 属性可以确保在空间不足时自动换行，这种实现方式既保证了布局的灵活性，又维护了良好的视觉效果。
src/packages/checkbox/demos/taro/demo2.tsx (2)
2-2: 导入语句的优化调整
导入顺序的调整以及新增 View 组件的导入符合 Taro 移动端开发的最佳实践。
Also applies to: 4-4
40-42: 建议验证 View 组件的样式兼容性
将 span 替换为 View 是符合 Taro 移动端开发规范的改动。但建议确认在不同端的样式表现是否一致。
✅ Verification successful
Let me generate additional scripts to check the View component's styling and usage across different platforms:
Let me generate one final verification script to check the checkbox component's specific implementation:
View 组件在 Taro 跨端场景下样式兼容性验证完成
基于验证结果，View 组件作为 Taro 基础组件，在 checkbox 场景下使用是安全的：
- View 组件已在多个端的 checkbox 相关实现中广泛使用
- checkbox 样式文件中未发现与 View 相关的特殊样式处理
- View 作为布局容器组件，样式表现是跨端一致的
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否存在相关的样式定义
rg -g '*.scss' -g '*.css' -g '*.less' "nut-checkbox"
Length of output: 5862
Script:
#!/bin/bash
# 检查 View 组件在不同端的使用情况
rg -g '*.tsx' -g '*.jsx' "import.*View.*from.*@tarojs"
# 检查 checkbox demo 中的 View 相关样式
rg -g '*.scss' -g '*.css' -g '*.less' "View" src/packages/checkbox/
Length of output: 26180
Script:
#!/bin/bash
# 检查 checkbox 组件在 Taro 端的具体实现
ast-grep --pattern 'export default function Checkbox' src/packages/checkbox/
# 检查 checkbox 相关的样式定义
cat src/packages/checkbox/checkbox.scss
Length of output: 3715
src/packages/checkbox/checkbox.tsx (2)
8-8: 图标导入顺序调整已确认！
图标导入顺序的调整不会影响组件功能，变更是安全的。
47-47: 请验证类型签名变更的影响范围
类型签名中移除了 Group 属性，这个改动需要确保：
- 所有使用
Checkbox.Group的地方都已经更新 - 新的复合组件结构是否已正确导出和文档化
✅ Verification successful
类型签名变更已正确处理，无需担心
根据代码分析，Checkbox.Group 仍然正确导出和使用：
index.ts中通过 CompoundedComponent 类型正确定义了 Group 组件- 示例代码中
Checkbox.Group的使用方式保持不变 - 文档中完整说明了 Group 组件的 Props 和用法
这个改动是在组件内部实现层面的重构，对外部使用方式没有破坏性影响。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 搜索可能受影响的代码位置
echo "检查 Checkbox.Group 的使用："
rg "Checkbox\.Group" -l
echo "\n检查文档中的使用示例："
rg "Checkbox\.Group" "docs/"
Length of output: 1504
Script:
#!/bin/bash
# 检查 Checkbox.Group 的具体使用方式和新的导出结构
echo "检查 index 文件中的导出："
cat src/packages/checkbox/index.ts
echo -e "\n检查一个示例用法："
cat src/packages/checkbox/demos/h5/demo2.tsx
echo -e "\n检查文档中的说明："
cat src/packages/checkbox/doc.md
Length of output: 6625
src/packages/checkbox/checkbox.taro.tsx (1)
1-2: 类型声明优化得当！
将 FunctionComponent 改为 FC 是个很好的改进，这样可以使代码更简洁，同时保持了类型安全。导入语句的重新排序也使代码结构更清晰。
Also applies to: 39-42
src/config.json (2)
Line range hint 462-480: 协调版本更新模式
观察到多个相关组件同时升级到 3.0.0 版本：
- 数据录入类：Checkbox、CheckboxGroup、Input、InputNumber、Range、SearchBar、Switch、TextArea
- 展示类：CountDown、TrendArrow
建议：
- 确保所有升级到 3.0.0 的组件都经过充分测试
- 在更新日志中清晰记录每个组件的重大更改
- 考虑为用户提供从 2.0.0 迁移到 3.0.0 的指南
#!/bin/bash
# 检查是否存在迁移指南
echo "检查迁移指南..."
fd -e md -e mdx . -x grep -l "migration|upgrade|迁移|升级" {}Also applies to: 507-520, 529-538, 571-580, 595-604, 617-626, 706-715, 785-794
Line range hint 462-469: 版本更新和元数据验证
Checkbox 和 CheckboxGroup 组件的版本号更新看起来是合理的。但是建议：
- 确保这两个组件的文档和演示代码已经更新，以反映任何破坏性更改
- 验证组件描述是否需要更新以反映新版本的功能
Also applies to: 473-480
✅ Verification successful
版本更新已得到充分支持
根据检查结果，Checkbox 和 CheckboxGroup 组件的版本更新是合理的：
- 存在完整的文档支持：
- 组件文档（
src/packages/checkbox/doc.md等多语言版本） - 迁移指南（
migrate-from-v2.md）
- 组件文档（
- 包含充分的演示代码：
- H5 和 Taro 版本的多个演示用例
- 完整的测试文件 (
__test__/checkbox.spec.tsx)
- 在 CHANGELOG.md 中有相关更新记录
组件描述保持不变是合适的，因为它仍然准确描述了组件的基本功能。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否存在相应的更新文档和演示代码
echo "正在检查文档和演示更新..."
rg -l "Checkbox|CheckboxGroup" docs/
fd -e md -e mdx . -x grep -l "Checkbox|CheckboxGroup" {}
Length of output: 251
Script:
#!/bin/bash
# 搜索与 Checkbox 相关的文档和代码
echo "检查文档和代码..."
# 搜索文档目录
rg -l "Checkbox|CheckboxGroup" .
# 检查是否有相关的更新记录
rg -l "feat.*checkbox|fix.*checkbox" .
# 检查组件描述的变化
git diff HEAD~1 src/config.json | grep -A 5 -B 5 "version.*3.0.0"
Length of output: 2867
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
src/packages/checkbox/demos/taro/demo13.tsx (1)
46-57: 建议优化重复的样式代码当前每个 Checkbox 都单独设置了相同的 marginBottom 样式，建议将这个共同样式提取到 Checkbox.Group 中统一处理。
建议如下重构：
<Checkbox.Group ref={checkboxgroup2Ref} direction="horizontal" defaultValue={checkboxgroup2} - style={{ width: '50%' }} + style={{ width: '50%', '& .nutui-checkbox': { marginBottom: 10 } }} onChange={(value) => { // ... 保持原有逻辑不变 }} > - <Checkbox value="1" style={{ marginBottom: 10 }}> + <Checkbox value="1"> 选项 </Checkbox> - <Checkbox value="2" style={{ marginBottom: 10 }}> + <Checkbox value="2"> 选项 </Checkbox> - <Checkbox value="3" style={{ marginBottom: 10 }}> + <Checkbox value="3"> 选项 </Checkbox> - <Checkbox value="4" style={{ marginBottom: 10 }}> + <Checkbox value="4"> 选项 </Checkbox> </Checkbox.Group>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
src/config.json(2 hunks)src/packages/checkbox/demos/taro/demo1.tsx(4 hunks)src/packages/checkbox/demos/taro/demo13.tsx(2 hunks)src/packages/checkboxgroup/checkboxgroup.scss(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/config.json
- src/packages/checkbox/demos/taro/demo1.tsx
- src/packages/checkboxgroup/checkboxgroup.scss
🔇 Additional comments (1)
src/packages/checkbox/demos/taro/demo13.tsx (1)
33-33: 布局样式设置合理！
Checkbox.Group 的宽度设置为 50% 与上方全选复选框容器宽度一致，保持了良好的布局对齐。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
src/packages/checkbox/demos/h5/demo3.tsx (1)
33-36: 代码结构优化得当！移除了不必要的
<span>包装元素，使代码结构更加清晰简洁。这种改进有助于：
- 减少 DOM 层级
- 提高渲染性能
- 便于样式维护
建议考虑使用 map 函数来渲染复选框列表，可以使代码更加简洁：
- <Checkbox value="1" label={optionsDemo1[0].label} /> - <Checkbox value="2" label={optionsDemo1[1].label} /> - <Checkbox value="3" label={optionsDemo1[2].label} /> + {optionsDemo1.map((option) => ( + <Checkbox key={option.value} value={option.value} label={option.label} disabled={option.disabled} /> + ))}src/packages/checkbox/demos/h5/demo2.tsx (1)
Line range hint
1-73: 组件实现完善，建议补充文档说明代码实现规范，展示了多种复选框使用场景，包括：
- 单独的受控复选框
- 分组的受控复选框
- 自定义图标的按钮形态复选框
建议：
- 为不同使用场景添加注释说明
- 考虑添加 demo 标题，帮助用户理解每个示例的用途
建议添加如下注释：
const Demo2 = () => { const [controlled, setControlled] = useState(false) const [controlledGroup, setControlledGroup] = useState(['2']) + // 复选框选项配置 const [optionsDemo1] = useState([ { label: '选项 1', value: '1', },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
src/packages/checkbox/demos/h5/demo2.tsx(1 hunks)src/packages/checkbox/demos/h5/demo3.tsx(1 hunks)src/packages/checkbox/demos/taro/demo2.tsx(2 hunks)src/packages/checkbox/demos/taro/demo3.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/packages/checkbox/demos/taro/demo2.tsx
- src/packages/checkbox/demos/taro/demo3.tsx
🔇 Additional comments (2)
src/packages/checkbox/demos/h5/demo3.tsx (1)
Line range hint 1-40: 请验证示例的完整性
作为演示组件，建议：
- 添加对 onChange 事件的处理演示
- 考虑添加注释说明每个功能点
- 确保示例涵盖了 Checkbox 组件的主要使用场景
src/packages/checkbox/demos/h5/demo2.tsx (1)
40-43: 代码结构简化得当
移除了不必要的 span 包装元素，使代码结构更加清晰简洁。这种改动有助于减少 DOM 层级，提高渲染效率。
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
样式
文档