feat(skeleton): v15 #3086
feat(skeleton): v15 #3086
Conversation
Walkthrough此次变更涉及对 Skeleton 组件及其相关模块的广泛更新。主要改动包括配置文件中版本号的调整、各类演示文件中翻译文本和 JSX 结构的优化、文档中属性说明及标题的修改、样式文件中变量的重构，以及组件实现与类型定义中属性的更新和简化，移除了一些旧属性并引入了新的定制化选项。 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant S as Switch控件
participant D as Demo5组件
participant SK as Skeleton组件
U->>S: 点击切换按钮
S->>D: 触发 changeStatus(value)
D->>D: 更新 checked 状态
D->>SK: 根据状态重新渲染 Skeleton
Possibly related PRs
Suggested reviewers
Poem
🪧 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 (
|
github-actions
bot
added
action:review
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
src/styles/variables-jmapp.scss (1)
2088-2100: 新引入的 Skeleton 行高变量设置良好
此次修改中将原来的$skeleton-line-height替换为三个更详细的变量：
$skeleton-line-small-height(16px)$skeleton-line-normal-height(24px)$skeleton-line-large-height(32px)这种细分使得不同尺寸的 Skeleton 组件可以采用更灵活和精细的行高设置，符合组件定制化的需求。请确保所有相关组件的实现以及文档说明均已跟进更新，以反映这一变更。
src/packages/skeleton/demo.tsx (1)
19-23: 繁体中文标题翻译更新繁体中文翻译也进行了相应更新，保持与简体中文翻译的一致性。注意第19行的翻译使用了简体中文字符而非繁体中文，可能需要检查并修正。
- '84aa6bce': '标题', + '84aa6bce': '標題',src/packages/skeleton/skeleton.tsx (1)
49-55: 动画持续时间处理可以优化
durationStyle函数实现了动画持续时间的自定义，但有不必要的类型检查。由于duration已有默认值 0.6，可以简化该函数。function durationStyle() { - if (typeof duration !== 'undefined') - return { - animation: `nut-skeleton ${duration}s linear 0s infinite`, - } - return {} + return { + animation: `nut-skeleton ${duration}s linear 0s infinite`, + } }src/packages/skeleton/skeleton.taro.tsx (1)
50-56: 动画持续时间处理函数可优化与 Web 版本相同，
durationStyle函数包含不必要的类型检查。由于duration已设置默认值 0.6，可简化此函数。function durationStyle() { - if (typeof duration !== 'undefined') - return { - animation: `nut-skeleton ${duration}s linear 0s infinite`, - } - return {} + return { + animation: `nut-skeleton ${duration}s linear 0s infinite`, + } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (24)
src/config.json(1 hunks)src/packages/skeleton/demo.taro.tsx(1 hunks)src/packages/skeleton/demo.tsx(1 hunks)src/packages/skeleton/demos/h5/demo1.tsx(1 hunks)src/packages/skeleton/demos/h5/demo2.tsx(1 hunks)src/packages/skeleton/demos/h5/demo3.tsx(1 hunks)src/packages/skeleton/demos/h5/demo4.tsx(1 hunks)src/packages/skeleton/demos/h5/demo5.tsx(3 hunks)src/packages/skeleton/demos/taro/demo1.tsx(1 hunks)src/packages/skeleton/demos/taro/demo2.tsx(1 hunks)src/packages/skeleton/demos/taro/demo3.tsx(1 hunks)src/packages/skeleton/demos/taro/demo4.tsx(1 hunks)src/packages/skeleton/demos/taro/demo5.tsx(1 hunks)src/packages/skeleton/doc.en-US.md(3 hunks)src/packages/skeleton/doc.md(1 hunks)src/packages/skeleton/doc.taro.md(3 hunks)src/packages/skeleton/doc.zh-TW.md(3 hunks)src/packages/skeleton/skeleton.scss(2 hunks)src/packages/skeleton/skeleton.taro.tsx(2 hunks)src/packages/skeleton/skeleton.tsx(2 hunks)src/styles/variables-jmapp.scss(1 hunks)src/styles/variables-jrkf.scss(1 hunks)src/styles/variables.scss(1 hunks)src/types/spec/skeleton/base.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (61)
src/packages/skeleton/doc.md (1)
37-37: 文档标题简化更加清晰将"标题段落圆角风格"简化为"标题段落"使标题更加简洁明了，与组件的实际功能更加匹配。这种改动有助于提升用户理解和文档的可读性。
src/packages/skeleton/demos/h5/demo2.tsx (1)
6-7: 组件属性更新符合新版规范Cell组件移除了样式属性，而Skeleton组件增加了size属性并设置了宽度样式，这符合组件v15版本的规范更新。size属性的引入使得组件配置更加灵活和标准化。
不过，我注意到文档中仍然保留了avatar、avatarShape等旧属性的说明，而演示代码中已经采用了新的属性体系。建议同步更新相关文档说明。
src/packages/skeleton/demos/taro/demo2.tsx (1)
6-7: Taro版本组件属性保持与H5版本一致Taro版本的组件属性更新与H5版本保持一致，移除了Cell的样式属性，为Skeleton添加了size属性并设置宽度样式，保证了跨平台的一致性体验。
src/packages/skeleton/demos/taro/demo1.tsx (1)
6-7: 基础用法示例更新符合新版标准基础用法示例中，Cell组件样式简化，Skeleton组件添加了size="large"属性并统一设置了宽度样式。这样的更新使得示例代码更加简洁清晰，同时展示了新版组件的标准用法。
src/packages/skeleton/demos/h5/demo1.tsx (1)
6-7: 更新后的Skeleton组件使用更加直观组件更新后移除了对Cell的内联样式，并在Skeleton组件上直接设置尺寸和宽度，这种变更使得组件结构更加清晰，同时新添加的
size="large"属性使组件尺寸更易于控制。src/packages/skeleton/demos/h5/demo3.tsx (2)
2-2: 正确引入了Space组件这里正确地从
@nutui/nutui-react中引入了Space组件，用于更灵活地排列骨架屏元素。
7-10: 骨架屏API改进，更加灵活可组合代码实现从单个复杂的Skeleton组件转变为使用Space布局的多个简单组件，这种变更遵循了组合优于配置的设计原则，使得骨架屏的布局更加灵活多变。两个骨架元素的尺寸设置合理，一个为默认形状，一个为圆形，展示了组件的多样性。
src/packages/skeleton/demos/taro/demo4.tsx (3)
2-2: 简化了导入，移除了配置提供者移除了ConfigProvider相关的导入，简化了代码结构，符合按需引入的原则。
6-8: 使用更加直接的骨架屏元素现在直接在Cell中使用了具有明确尺寸的Skeleton组件，代替了之前通过ConfigProvider进行主题配置的方式，使得组件使用更加直观。
8-19: 灵活的布局结构和样式设置使用flex布局的div容器嵌套多个不同属性的Skeleton组件，创建了更加丰富的骨架屏效果。这种结构使得开发者可以更精确地控制每个骨架元素的尺寸、位置和样式，从而构建更符合实际内容结构的加载状态。
三个不同尺寸和宽度的Skeleton组件组合得当，合理展示了不同类型内容的加载状态。
src/packages/skeleton/demos/h5/demo4.tsx (3)
2-2: 简化了导入，移除了配置提供者移除了ConfigProvider相关的导入，简化了代码结构，与taro版本保持一致，提高了代码的一致性。
6-8: 使用更加直接的骨架屏元素现在直接在Cell中使用了具有明确尺寸的Skeleton组件，使得组件使用更加直观。固定的宽高值(132px)适合作为头像或图片的占位符。
8-19: 结构合理的flex布局和多样化的骨架元素使用flex布局的div容器嵌套多个不同属性的Skeleton组件，这种结构使得骨架屏能够更好地模拟实际内容的布局。三个不同尺寸、宽度和行数的Skeleton组件很好地展示了组件的灵活性，可以满足各种内容结构的加载状态展示需求。
布局和样式设置与taro版本保持一致，确保了H5和小程序版本的体验一致性。
src/config.json (1)
1016-1016: 版本号从 2 更新到 1，确认这是预期的修改此更改将 Skeleton 组件的 v15 版本从 2 降低到 1。请确认这是故意的版本回退，还是因为组件重构而重置版本号。通常版本号是递增的，除非是组件重构或重新设计。
src/packages/skeleton/demos/taro/demo3.tsx (2)
2-2: 引入了新的组件以支持新的演示布局导入了 Space 组件，用于改进骨架屏的布局展示。这种方式更加符合组件化的设计理念。
7-10: 使用 Space 和新的骨架屏属性创建更好的头像演示这个改动很好地展示了 Skeleton 组件的新功能，尤其是：
- 使用
width和height属性来控制骨架屏的尺寸- 通过
shape="circle"创建圆形骨架，很适合用于头像占位符- 使用 Space 组件使两个骨架屏并排放置，视觉效果更佳
这种实现比原来的方式更加灵活，用户可以更精确地控制骨架屏的外观。
src/packages/skeleton/demo.taro.tsx (3)
15-18: 中文翻译更新为更准确的描述将标题从"基础用法"等笼统的描述更改为"标题"、"正文"等具体用途描述，这样用户能更清晰地理解每个演示的目的和适用场景。
22-25: 繁体中文翻译更新繁体中文的翻译也相应更新，保持了与简体中文相同的表达方式，提高了不同语言版本间的一致性。
29-33: 英文翻译更新为更精确的术语英文翻译从通用的"Basic usage"更改为更具体的"Title"、"Paragraph"等，使英文用户也能更直观地理解每个演示的用途。这种多语言统一的改进有助于提升国际用户的体验。
src/packages/skeleton/demos/h5/demo5.tsx (4)
1-1: 优化了组件导入顺序按字母顺序排列导入的组件，提高了代码的可读性。
21-34: 重构为更灵活的布局结构使用 flex 布局和独立的 Skeleton 组件重构了骨架屏和内容的布局方式。这种方式比之前的实现有以下优点：
- 通过
shape="circle"专门为头像创建圆形占位符- 使用 flex 布局使布局更加灵活
- 可以为不同部分的骨架屏设置不同的属性
这种组合使用骨架屏的方式更符合实际应用场景，提供了更好的视觉效果。
35-43: 为标题添加专门的骨架屏为标题文本添加了单独的骨架屏，并设置了更合适的宽度和间距：
- 使用
size="large"突出标题- 设置
width="30%"使标题骨架屏更符合实际标题长度- 添加
marginBottom提供更好的间距这种细致的布局设计更接近实际内容的视觉效果，提高了用户体验。
43-47: 为正文内容添加多行骨架屏为正文内容添加了适当的骨架屏属性：
- 使用
size="small"区分与标题的大小差异- 设置
rows={2}显示两行文本占位符这种精细化的设置使骨架屏更接近真实内容的结构，提高了加载过程中的用户体验。
src/styles/variables.scss (2)
2137-2148: 新增 Skeleton 行尺寸变量
此处新增了$skeleton-line-width以及三个新变量：$skeleton-line-small-height(16px)、$skeleton-line-normal-height(24px) 和$skeleton-line-large-height(32px)。这些改动使得 Skeleton 组件在不同尺寸下的行高度可以灵活定制，符合样式模块化和可维护性的最佳实践。
2150-2153: 更新 Skeleton 行边框半径变量
此处将$skeleton-line-border-radius的默认值修改为使用$radius-xs变量，而不再使用硬编码的数值（例如 0）。这种改法可以确保整体设计风格的一致性，并便于以后全局调整。src/styles/variables-jrkf.scss (1)
2118-2129: 变量重构增强了灵活性骨架屏组件的高度变量进行了重构，由单一的
$skeleton-line-height拆分为三个不同尺寸的变量：小、中、大。这种变化与组件的size属性相匹配，提供了更精细的高度控制，使组件更加灵活。-$skeleton-line-height: var(--nutui-skeleton-line-height, 15px) !default; +$skeleton-line-small-height: var(--nutui-skeleton-line-small-height, 16px) !default; +$skeleton-line-normal-height: var(--nutui-skeleton-line-normal-height, 24px) !default; +$skeleton-line-large-height: var(--nutui-skeleton-line-large-height, 32px) !default;src/packages/skeleton/demo.tsx (2)
12-15: 改进了演示文档的标题翻译更新了演示文档中的中文翻译标题，使其更加简洁明了。这些更改使标题更符合实际使用场景，有助于用户更好地理解组件功能。
26-30: 英文翻译更新，保持多语言一致性英文翻译已同步更新，确保各语言版本的演示文档保持一致的术语和结构。这有助于提供统一的用户体验，不论用户使用哪种语言。
src/packages/skeleton/demos/taro/demo5.tsx (2)
7-10: 函数参数类型定义明确为
changeStatus函数添加了明确的参数类型定义，提高了代码的类型安全性和可读性。
12-45: 重构了Skeleton组件的布局和结构示例代码进行了全面重构，具有以下改进：
- 使用了更合理的布局结构，引入了flex布局
- 将单一的Skeleton组件拆分为多个，分别控制头像和文本部分
- 应用了新增的属性，如
size、width、height和shape- 提供了更清晰的视觉层次结构，使示例更具代表性
这种结构重构使示例更好地展示了骨架屏组件的灵活性和新增特性。
src/packages/skeleton/doc.taro.md (6)
13-13: 标题更新为更直观的名称将"基础用法"更新为"标题"，使文档标题更直观地反映了该示例的实际内容。
21-21: 标题更改为更具描述性将"传入多行"更改为"正文"，更准确地描述了该示例的内容和用途。
29-29: 更新示例标题以更好地反映功能将"显示头像"更改为"模拟头像"，更清晰地表达了该示例的目的是模拟用户头像的加载骨架。
37-37: 简化标题名称将"标题段落圆角风格"简化为"标题段落"，减少冗余描述，使文档更加简洁。
61-66: 更新组件属性表，移除旧属性并增加新属性属性表进行了重大更新：
- 新增
size属性，支持预定义的高度选项- 新增
shape属性，用于设置形状- 新增
duration属性，控制动画时长- 新增
width和height属性，允许自定义尺寸这些变更增强了组件的灵活性，使用户能够更精确地控制骨架屏的外观和行为。移除了原有的头像相关属性，简化了API设计。
78-81: 更新CSS变量定义CSS变量定义已更新，以匹配组件代码中的变更：
- 新增三个不同尺寸的线条高度变量
- 更新了线条边框圆角的默认值
这些变更使主题定制更加灵活，支持新增的size属性。
src/packages/skeleton/skeleton.scss (6)
2-3: 设置行高和字体大小为0px，优化渲染效果设置为0px可以防止可能出现的空白间隙，使骨架屏组件显示更加紧凑和精确。
6-11: 改进结构布局和样式定义将display从flex改为inline-flex并调整其他属性，使组件能够更好地适应内联布局场景，同时保持良好的可定制性。
13-27: 增加了多种尺寸类的支持新增了normal、large、small等尺寸类，并为small添加了margin-top。这种分类方式使组件更加灵活，能够满足不同场景的需求。此外，small-0类消除了顶部间距，可用于特定布局场景。
37-42: 优化动画背景渐变效果使用线性渐变替代之前的背景色定义，提供了更平滑的视觉过渡效果。
46-52: 改进动画实现方式从使用background-position-x更改为transform: translateX()实现动画，这种方式性能更好，动画效果更流畅。
61-73: 更新RTL布局下的动画效果调整了RTL(从右到左)模式下的动画效果，保持与LTR模式一致的用户体验。同时保留了注释掉的旧代码作为参考，便于理解实现的变化。
src/types/spec/skeleton/base.ts (2)
2-2: 更新导入，增加类型支持引入SimpleValue、UIRound和UISize类型，为骨架屏组件提供更丰富的类型支持。
7-12: 重构组件属性，增强可定制性移除了之前与头像相关的属性，新增了size、width、height、shape和duration属性，使组件更加通用和灵活。这种改变使得骨架屏可以适应更多的UI场景。
其中：
- size属性限制为small、normal或large三种固定尺寸
- width和height为可选属性，允许更精确的尺寸控制
- shape属性支持UIRound或'circle'类型，提供更多形状选择
- duration属性允许自定义动画持续时间
src/packages/skeleton/doc.zh-TW.md (3)
13-44: 优化文档标题和示例结构将示例标题进行了优化调整，从"基礎用法"改为"标题"，"傳入多行"改为"正文"等，使文档结构更加清晰，示例分类更加合理。示例顺序遵循从简单到复杂的原则，有助于用户理解组件的使用方式。
57-66: 更新API文档，反映组件属性变化移除了与头像相关的属性，新增了size、shape、duration、width和height属性的说明，使文档与组件实际功能保持一致。属性说明清晰准确，为开发者提供了完整的使用指导。
78-81: 更新CSS变量文档将单一的线条高度变量拆分为small、normal和large三种尺寸的变量，与新增的size属性相对应，同时更新了边框圆角的默认值。这些变更使开发者能够更精细地控制骨架屏的样式。
src/packages/skeleton/doc.en-US.md (3)
13-46: 优化英文文档标题和示例结构将示例标题进行了优化调整，如"Basic usage"改为"Title"，"Incoming multiline"改为"Paragraph"等，使英文文档结构与中文文档保持一致，便于不同语言用户理解。
59-66: 更新英文API文档移除了与头像相关的属性，新增了size、shape、duration、width和height属性的英文说明，同时优化了visible属性的描述，明确指出true表示隐藏骨架屏，false表示显示骨架屏。这些变更使英文文档与组件实际功能保持同步。
76-81: 更新英文版CSS变量文档更新了CSS变量的英文说明，与中文文档保持一致，同时确保了术语翻译的准确性。这有助于非中文用户正确理解和使用组件的样式变量。
src/packages/skeleton/skeleton.tsx (5)
10-14: 属性定义变更是一个良好的改进移除了
title,avatar,avatarSize属性，引入了size,shape,duration,inline属性，使组件更加灵活且易于自定义。这种变更简化了 API 同时增强了组件的可配置性。
21-29: 解构属性的更新与默认属性保持一致新的属性解构正确地反映了默认属性的变更，移除了头像相关属性，添加了尺寸、形状和动画持续时间配置，保持了代码一致性。
39-41: 新增的辅助函数命名清晰
repeatCount函数用于创建指定长度的数组，命名直观且实现简洁，有助于骨架屏行数的渲染。
43-47: 形状样式处理函数设计合理
shapeStyle函数通过形状值返回相应的边框样式，实现清晰简洁。支持圆形、方形和默认圆角形状，增强了组件的灵活性。
63-79: 渲染逻辑简化且更加灵活渲染逻辑移除了头像相关组件，使用
repeatCount函数创建多个骨架行，应用基于尺寸的动态类名，并使用内联样式设置宽度、高度和形状。这种改进使组件更加简洁且易于定制。src/packages/skeleton/skeleton.taro.tsx (6)
3-3: 正确导入 Taro 组件从
@tarojs/components导入View组件，遵循 Taro 框架的最佳实践。
12-15: 默认属性更新与 Web 版本保持一致默认属性的更新与 Web 版本保持一致，移除了头像相关属性，新增了尺寸、形状和动画持续时间属性，确保了跨平台组件的一致性。
22-29: 解构属性更新与默认值对应解构的属性与默认属性保持一致，新增了
width、height、shape、size和duration，移除了不再使用的属性。
40-42: 辅助函数实现简洁明了
repeatCount函数创建指定长度的数组，命名直观且实现简洁，便于骨架屏行数的渲染。
44-48: 形状样式处理逻辑清晰
shapeStyle函数根据传入的形状属性返回相应的样式，支持圆形、方形和默认圆角，实现简洁且易于理解。
64-80: 渲染逻辑优化与 Web 版本保持一致渲染逻辑的优化与 Web 版本保持一致，使用
View组件替代div，同时采用相同的类名构建方式和样式应用逻辑。这种一致性有助于维护跨平台组件的行为一致。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
src/sites/sites-react/doc/docs/react/migrate-from-v2.md (1)
273-292: 更新 Skeleton 组件文档说明
此处文档准确列出了 Skeleton 组件 API 的更新：移除了avatar、avatarShape、avatarSize属性，新增了width、height、duration和size属性。建议在后续版本中补充每个新属性的具体用法和示例说明，以便开发者更快速地进行迁移。src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md (1)
271-293: Skeleton Component API Documentation Update
该部分文档已经准确描述了对 Skeleton 组件的调整：删除了avatar、avatarShape和avatarSize属性，并新增了width、height、duration和size属性。建议进一步添加使用示例和详细说明，帮助用户更好地理解这些新属性的具体功能。src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md (1)
271-293: Taro Skeleton Component Documentation Update
在该 Taro 平台的升级文档中，Skeleton 组件的属性调整与 React 版本保持一致，清晰地展示了旧属性的移除和新属性的引入。建议增加示例代码或用法说明，特别说明新属性在 Taro 端的具体应用场景，以便用户更好地进行迁移。src/sites/sites-react/doc/docs/taro/migrate-from-v2.md (1)
275-296: 更新 Taro 版 Skeleton 组件说明
该段落中详细列出了 Taro 版 Skeleton 组件的 API 调整，表述了移除avatar、avatarShape、avatarSize属性以及新增width、height、duration和size属性。文档结构清晰，但建议补充更详细的属性说明和使用示例，以提升文档可读性和实用性。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/packages/skeleton/doc.md(3 hunks)src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md(1 hunks)src/sites/sites-react/doc/docs/react/migrate-from-v2.md(1 hunks)src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md(1 hunks)src/sites/sites-react/doc/docs/taro/migrate-from-v2.md(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/packages/skeleton/doc.md
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3086 +/- ##
=============================================
+ Coverage 86.95% 87.09% +0.13%
=============================================
Files 280 280
Lines 18456 18535 +79
Branches 2785 2818 +33
=============================================
+ Hits 16049 16143 +94
+ Misses 2402 2387 -15
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/packages/skeleton/skeleton.tsx (1)
60-79: 渲染逻辑简化，提高了组件的灵活性渲染逻辑有显著简化：
- 移除了 Avatar 组件和相关条件渲染
- 直接根据 rows 属性映射生成骨架行
- 通过动态类名应用基于 size 属性的样式
- 使用内联样式应用 width、height 和 shape 属性
这些更改使组件更加专注于其核心功能，同时提供更丰富的自定义选项。根据静态分析，第60行（children 渲染条件）没有测试覆盖，建议添加相应测试。
关于内联样式的使用，建议考虑以下改进：
- style={{ width, height, ...shapeStyle() }} + style={{ + width: width, + height: height, + ...shapeStyle() + }}这样更明确地表示这些是组件的属性，提高代码的可读性，特别是当属性名与变量名相同时。
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 60-60: src/packages/skeleton/skeleton.tsx#L60
Added line #L60 was not covered by tests
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/packages/skeleton/__test__/skeleton.spec.tsx(1 hunks)src/packages/skeleton/skeleton.taro.tsx(2 hunks)src/packages/skeleton/skeleton.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/packages/skeleton/test/skeleton.spec.tsx
🧰 Additional context used
🪛 GitHub Check: codecov/patch
src/packages/skeleton/skeleton.tsx
[warning] 54-54: src/packages/skeleton/skeleton.tsx#L54
Added line #L54 was not covered by tests
[warning] 60-60: src/packages/skeleton/skeleton.tsx#L60
Added line #L60 was not covered by tests
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: test
- GitHub Check: build
🔇 Additional comments (12)
src/packages/skeleton/skeleton.taro.tsx (8)
1-3: 导入语句更新更加清晰导入语句的更新使代码结构更加清晰，特别是明确从
@tarojs/components中导入View组件，这是Taro应用程序中的标准做法。
10-15: 默认属性配置更加灵活新的默认属性配置增强了组件的灵活性和定制化能力：
- 默认启用动画效果 (
animated: true)- 新增了尺寸、形状和动画持续时间的默认值
- 添加了
inline属性以支持行内显示这些改动使组件更易于使用，同时保持了高度的可配置性。
22-30: 属性解构更新与新功能一致解构的属性列表现在包含了
width、height、shape、size和duration，与更新后的默认属性和新功能保持一致，使组件接口更加完整和统一。
40-42: 函数命名更加直观将函数从
repeatLines重命名为repeatCount，这个命名更准确地描述了其功能 - 创建特定长度的数组以便迭代，提高了代码的可读性。
44-48: 形状样式函数增强了定制能力新增的
shapeStyle函数根据shape属性返回不同的CSS样式：
- 'circle'返回50%的边框半径
- 'square'返回0边框半径
- 默认返回空对象
这种设计使组件的外观定制更加灵活。
50-56: 动画持续时间函数增强了动画控制新增的
durationStyle函数允许自定义动画持续时间，增强了组件的动画效果控制能力。代码检查也很严谨，确保了duration属性存在时才应用相应样式。
61-80: 渲染逻辑显著简化渲染逻辑的更新使代码更加简洁明了：
- 移除了Avatar组件相关代码
- 直接通过
repeatCount(rows)生成骨架行- 应用新的
shapeStyle和durationStyle函数- 基于
animated属性条件渲染动画div这些变更简化了组件实现，同时保持了功能的完整性和灵活性。
1-88: 整体代码质量提升整体来看，这次重构显著提升了组件的质量：
- 组件更加专注于核心功能
- 新增了多种自定义选项
- 移除了头像相关功能，简化了组件
- 代码可读性更强，函数命名和逻辑更清晰
建议考虑添加更多的单元测试来覆盖这些新增的属性和功能。
src/packages/skeleton/skeleton.tsx (4)
9-14: 属性更新提高了组件的可定制性组件默认属性进行了重大更新，增加了更多的自定义选项：
- 新增
size、shape、duration和inline属性，提供更灵活的骨架屏样式控制- 设置
animated默认为 true，符合骨架屏常见的动画效果预期- 移除了与头像相关的属性，简化了组件的职责
这些更改使组件更专注于其核心功能，同时提供了更丰富的自定义选项。
21-29: 解构属性与默认值匹配解构的属性已更新，包含新增的
width、height、shape、size和duration，与默认属性列表保持一致。这确保了组件内部逻辑能正确使用这些新属性。
39-41: 函数命名更加清晰将
repeatLines重命名为repeatCount提高了代码可读性，更准确地描述了函数的实际功能 - 创建指定数量的数组元素。这是一个很好的重构，使函数名称与其实际用途更加一致。
43-55:❓ Verification inconclusive
新增样式函数增强了可维护性
新增的
shapeStyle和durationStyle函数很好地封装了样式逻辑：
shapeStyle根据 shape 属性确定边框半径，支持 'circle'、'square' 和默认的 'round'durationStyle根据 duration 属性配置动画时间这种函数式的样式处理方法提高了代码的可读性和可维护性。
不过，注意到静态分析工具显示第54行没有测试覆盖，建议为这些新函数添加单元测试以确保其行为符合预期。
🏁 Script executed:
#!/bin/bash # 查找是否有针对新增样式函数的测试 rg -l "shapeStyle|durationStyle" --type=testLength of output: 75
请补充相应单元测试以覆盖 shapeStyle 和 durationStyle 函数的逻辑
新增的
shapeStyle与durationStyle函数清晰地封装了样式计算逻辑，从而提升了代码的可读性和可维护性。但目前静态分析工具没能检测到对这两个函数的测试覆盖（原有尝试查询测试文件时出现了错误提示），因此建议采取以下措施：
- 请在对应的测试文件中（例如
src/packages/skeleton/skeleton.test.tsx或项目中其他相关测试文件）添加针对这两个函数的单元测试，确保：
- 当
shape为'circle'时，shapeStyle()返回{ borderRadius: '50%' }；- 当
shape为'square'时，shapeStyle()返回{ borderRadius: '0' }；- 当
duration有值时，durationStyle()能生成正确的动画样式。请进一步手动验证测试覆盖情况，确保新增代码在未来修改时有充分的测试保护。
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 54-54: src/packages/skeleton/skeleton.tsx#L54
Added line #L54 was not covered by tests
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/packages/skeleton/skeleton.scss (1)
64-83: RTL 支持保持一致RTL（从右到左）支持的更新与主要动画变化保持一致，确保在不同文字方向的界面中都能正常工作。注释掉的旧代码应当考虑完全删除，以保持代码整洁。
建议完全删除已注释的旧背景位置代码（第74行和第79行），保持代码整洁：
@keyframes nut-skeleton-rtl { from { - //background-position: -200% 0; transform: translateX(100%); } to { - //background-position: 200% 0; transform: translateX(-100%); } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/packages/skeleton/skeleton.scss(2 hunks)src/packages/skeleton/skeleton.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (11)
src/packages/skeleton/skeleton.tsx (6)
7-14: 默认属性得到了合理更新默认属性的调整非常合理：
- 设置
animated为true提供了更好的默认用户体验- 新增的
size、shape、duration和inline属性增强了组件的可定制性- 默认值的选择符合常见使用场景，特别是
shape: 'round'符合当前UI设计趋势
19-34: 解构属性与默认属性保持一致解构的属性已更新，包括新添加的
width、height、shape、size和duration，这与更新后的默认属性保持一致，确保了组件的内部实现与API定义的同步。
39-41: 复用逻辑封装得当
repeatCount函数封装了数组生成逻辑，便于多行骨架屏的渲染，实现简洁明了。
43-47: 形状样式逻辑清晰
shapeStyle函数根据不同的shape属性值返回相应的边框半径样式，逻辑清晰。考虑到未来可能会添加更多的形状，这种实现方式易于扩展。
49-55: 动画持续时间处理合理
durationStyle函数很好地处理了动画持续时间的自定义逻辑，使用类型检查确保安全。
57-83: 渲染逻辑优化明显渲染逻辑的改进使组件更加灵活和可定制：
- 使用
repeatCount函数生成多行骨架屏，代码更清晰- 根据
size和索引动态生成类名，便于样式定制- 使用
shapeStyle函数应用形状样式- 通过
durationStyle函数设置动画持续时间这些改进使组件更易于使用，同时保持了良好的性能。
src/packages/skeleton/skeleton.scss (5)
2-3: 消除意外间距的样式优化设置
line-height和font-size为0px有效消除了内联元素可能产生的意外间距，这是一个很好的优化。
5-12: 内容样式结构改进将
display属性更改为inline-flex更符合组件的内联特性，结合position: relative为动画元素提供定位上下文。明确设置边框半径和溢出处理，确保骨架屏风格的一致性。
13-27: 尺寸变体实现清晰为不同尺寸的内容添加明确的类名和样式，使骨架屏在不同场景下的适配更加灵活。特别是
small尺寸添加了上边距，而small-0特例处理了第一个元素无需上边距的情况，细节考虑周到。
37-51: 动画效果现代化改进将动画背景更改为线性渐变并明确定义所有动画属性是一个显著的改进：
- 使用线性渐变创建更自然的光效
- 设置
animation-timing-function: linear使动画更平滑- 明确定义所有动画属性，提高代码可维护性
53-61: 使用 transform 优化动画性能将动画从使用
background-position改为使用transform: translateX()是一个重要的性能优化。Transform 属性通常会触发硬件加速，使动画更流畅，特别是在移动设备上效果更明显。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/packages/skeleton/skeleton.taro.tsx (1)
63-81: 渲染逻辑优化渲染逻辑经过重构后更加清晰，移除了 Avatar 相关组件，直接基于
repeatCount函数生成骨架行。代码结构更简洁，逻辑更清晰。不过，这里存在一个潜在的性能优化点：
- {repeatCount(rows).map((item, index) => { - const contentClass = `${classPrefix}-content ${classPrefix}-content-${size} ${classPrefix}-content-${size}-${index}` + {repeatCount(rows).map((_, index) => { + const contentClass = classNames( + `${classPrefix}-content`, + `${classPrefix}-content-${size}`, + `${classPrefix}-content-${size}-${index}` + )使用
classNames函数可以使类名组合更加清晰，同时也与组件的其他部分保持一致的风格。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/packages/skeleton/demos/taro/demo1.tsx(1 hunks)src/packages/skeleton/skeleton.taro.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/packages/skeleton/demos/taro/demo1.tsx
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: test
- GitHub Check: lint
🔇 Additional comments (5)
src/packages/skeleton/skeleton.taro.tsx (5)
40-42: 函数名称改进将
repeatLines重命名为repeatCount提高了代码可读性，函数名称更准确地反映了其功能。好的重构！
44-48: 良好的样式处理封装新增的
shapeStyle函数根据shape属性值返回相应的边框样式，代码逻辑清晰。
50-56: 动画持续时间的灵活配置新增的
durationStyle函数根据duration属性配置动画持续时间，增强了组件的可定制性。
10-15:❓ Verification inconclusive
注意默认属性的变更
此次更新中修改了默认属性值：
animated默认值现在为true，之前可能是false- 添加了新的属性：
size、shape、duration和inline这些变更可能会影响现有代码的行为。任何依赖原有默认值的实现都需要显式设置这些属性。
🏁 Script executed:
#!/bin/bash # 检查项目中是否有使用 Skeleton 组件但未明确设置 animated 属性的实例 rg -l "Skeleton(?!.*animated)" --type tsx --type jsx | grep -v "src/packages/skeleton"Length of output: 320
请手动验证 Skeleton 组件调用时对默认属性的依赖情况
- 已更新文件
src/packages/skeleton/skeleton.taro.tsx的默认属性，具体变化如下：
animated默认值现为true（之前可能为false）- 新增属性：
size、shape、duration和inline- 由于有可能存在依赖旧默认值的组件使用场景，建议确保所有引用处均明确设置了这些属性。
- 原验证命令因正则表达式使用了不支持的向前查找而报错，请使用启用 PCRE2 的方式重新检查：
rg --pcre2 -l "Skeleton(?!.*animated)" --type tsx --type jsx | grep -v "src/packages/skeleton"- 请手动确认代码库中各处对 Skeleton 的调用是否存在隐性依赖。
1-3:❓ Verification inconclusive
组件 API 变更
此次更新中移除了
title、avatar、avatarSize和avatarShape属性，新增了size、shape、duration和inline属性。这是一个重大变更，可能会影响现有的使用场景。请确保：
- 更新相关文档，明确标注已移除和新增的属性
- 如果可能，考虑提供兼容层或迁移指南
- 确保版本号的提升符合语义化版本规范（这应是一个主版本更新）
Also applies to: 20-35
🏁 Script executed:
#!/bin/bash # 检查项目中是否有使用被移除属性的实例 rg -l "Skeleton.*?(title|avatar|avatarSize|avatarShape)" --type tsx --type jsx | grep -v "src/packages/skeleton"Length of output: 140
请更新文档并验证 API 改动影响
此次更新已移除
title、avatar、avatarSize和avatarShape属性，新增size、shape、duration和inline属性，这是一个重大变更，可能对现有使用场景产生影响。请确保：
文档更新：清晰标明哪些属性已移除，哪些属性已新增；
兼容考虑：若有可能，提供兼容层或撰写迁移指南，帮助用户平滑升级；
版本管理：根据语义化版本规范，确保此次改动以主版本更新发布；
使用验证：请确认代码库中没有其他部分仍在使用已移除的属性。你可以参考下面更新后的搜索命令进行验证：
#!/bin/bash # 添加 tsx 类型，检查项目中是否有使用被移除属性的实例（排除 src/packages/skeleton 目录下的代码） rg --type-add 'tsx:*.tsx' -l "Skeleton.*?(title|avatar|avatarSize|avatarShape)" --type tsx --type jsx | grep -v "src/packages/skeleton"如果该脚本有输出结果，请及时调整相关代码。请手动验证这些改动对其他使用场景的影响，并确保发布前经过充分测试。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/packages/skeleton/demos/taro/demo5.tsx (1)
15-15: 注意：事件处理函数参数不一致。虽然
changeStatus函数签名已更新为只接收一个参数，但这里仍然以(value, event) => changeStatus(value)的形式调用。建议直接传递函数引用以简化代码。-onChange={(value, event) => changeStatus(value)} +onChange={changeStatus}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/packages/skeleton/demos/taro/demo5.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (6)
src/packages/skeleton/demos/taro/demo5.tsx (6)
7-7: 函数签名简化，移除了未使用的参数。将
changeStatus函数的签名从(value: boolean, event: React.MouseEvent<Element, MouseEvent>)简化为只接收value参数，这与函数实际使用方式更加一致。
12-18: 布局结构优化，提高了组件分离度。将开关组件放置在单独的 Cell 中，使界面结构更加清晰，改善了组件之间的视觉分隔。
20-28: 头像骨架屏实现优化。使用圆形形状的 Skeleton 包裹 Avatar 组件，并指定了明确的宽高和形状属性，使骨架屏与真实内容更加匹配。这种实现方式与新版 Skeleton 组件的 API 更加一致。
29-37: 标题骨架屏实现优化。为标题部分的 Skeleton 设置了合适的大小和宽度，并使用了 span 元素替代了 Text 组件作为内容容器，简化了实现。设置了 marginBottom 使布局更加合理。
38-42: 描述骨架屏实现优化。为描述文本部分使用了 size="small" 的 Skeleton，并指定了 rows={2} 以展示多行骨架效果，更好地匹配实际内容的展示形式。
12-47: 整体布局结构优化。整体 JSX 结构经过重组，采用了更加清晰的嵌套和更合理的 flex 布局方式。组件之间的间距和对齐方式得到优化，提升了视觉体验和代码可读性。
这种实现与新版 Skeleton 组件的 API 更加一致，移除了旧版中的 avatar、avatarSize 和 avatarShape 等属性，转而使用统一的 width、height、shape 等属性实现同样的效果。
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/packages/skeleton/skeleton.taro.tsx (1)
85-104: 更新了组件的渲染逻辑，提升了定制能力改进包括：
- 使用Taro的
View组件替代HTML的div- 基于
size和索引构建更精细的类名- 应用形状和动画持续时间样式
- 条件渲染动画元素
注意到一个未使用的属性：
注意到
defaultProps中定义了inline属性，但组件中并未使用。建议：
- 移除未使用的
inline属性- 或者实现该属性的相关功能（例如设置
display: inline-block的样式）- inline: false,或者在类名中添加对应的实现：
- const classes = classNames(classPrefix, className) + const classes = classNames(classPrefix, className, { + [`${classPrefix}-inline`]: inline + })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/packages/skeleton/skeleton.scss(2 hunks)src/packages/skeleton/skeleton.taro.tsx(2 hunks)src/packages/skeleton/skeleton.tsx(2 hunks)src/styles/variables.scss(1 hunks)src/types/spec/skeleton/base.ts(1 hunks)
🧰 Additional context used
🧬 Code Definitions (2)
src/packages/skeleton/skeleton.tsx (1)
src/packages/skeleton/skeleton.taro.tsx (1)
Skeleton(22-109)
src/packages/skeleton/skeleton.taro.tsx (1)
src/packages/skeleton/skeleton.tsx (1)
Skeleton(21-108)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (40)
src/styles/variables.scss (3)
2133-2134: 在 Skeleton 背景色中使用 $color-background-sunken
此更改让骨架背景更贴近整体界面风格，增强了视觉观感。
2137-2148: 新增三种行高变量（small、normal、large）
通过分别定义$skeleton-line-small-height、$skeleton-line-normal-height和$skeleton-line-large-height，可让不同大小的占位行在组件中更灵活地适配布局。
2151-2151: 将$skeleton-line-border-radius设置为$radius-xs
使用全局的$radius-xs有助于与其他组件统一圆角风格，提升一致性。src/packages/skeleton/skeleton.scss (13)
2-3: 设置 line-height 与 font-size 为 0
通过将这两个属性设为 0，可以去除内容占位时的额外空白，简化布局。
6-11: 改用 inline-flex 布局并应用基础样式
使用inline-flex可以使骨架组件在内联环境内更好地对齐，适合文字或行内元素场景。
13-14: 对 normal 尺寸的内容区域应用固定高度
设置height: $skeleton-line-normal-height为正常尺寸的行高。
17-18: 对 large 尺寸的内容区域应用固定高度
显式定义大尺寸骨架行高，方便在更大占位需求场景中使用。
21-23: small 尺寸内容区域并添加默认 8px 外边距
在小行高场景下提供合理的间距，避免元素间过度紧凑。
25-26: small-0 变体去除多余间距
此类允许在仅需小行高且无额外外边距的情形下使用。
37-42: 线性渐变背景增强骨架动画效果
使用浅色渐变使动画更自然，并可通过变量自定义主色以适配不同主题。
43-50: 动画属性统一配置
改为linear及一次循环等设置，可让骨架动画更平滑并减少对性能的影响。
54-55: 使用 transform: translateX(-100%) 起始动画
去除旧的背景位置属性后，动画更易于控制与维护。
59-59: 动画结束时从左侧移动到右侧
通过translateX(100%)实现从左到右的扫描效果。
70-70: RTL 模式动画配置为 2s 无限循环
此处与 LTR 模式时长 0.6s 存在差异，可能导致两种布局体验不一致。请确认这是否为预期行为。
73-75: 在 RTL 场景下从右向左移动
此处使用translateX(100%)起始，符合 RTL 动画需求。
79-80: RTL 动画结束位置回到左侧
以translateX(-100%)完成动画，使动画方向在 RTL 下保持一致性。src/types/spec/skeleton/base.ts (2)
2-2: 导入新类型 SimpleValue、UIRound、UISize
允许更灵活地配置宽高与形状，可增强组件扩展性。
7-12: 添加 size、width、height、shape、animated、duration 等属性
删除旧属性并新增更通用的大小与形状配置，提升可自定义程度；同时支持动画时长配置以便控制动画节奏。src/packages/skeleton/skeleton.tsx (15)
1-6: 引入 useEffect、useState 并在组件中启用状态管理
Skeleton 组件需要动画状态支持，故增加相关 React Hook。
14-14: 在默认属性中启用 animated: true
骨架动画默认开启，增强加载时的动态反馈。
16-16: 设置默认尺寸为 normal
为大多数场景提供一个合适的中等占位尺寸。
17-17: 默认形状 round
为骨架占位保留圆角，视觉上更柔和。
18-18: 添加默认动画时长 0.6s
确保骨架扫描动画节奏不至于过快或过慢。
19-19: inline 属性默认为 false
尚未看到对 inline 属性的处理逻辑，请确认是否需要在渲染时应用行内风格。
26-28: 在解构 props 时引入 width、height、shape、size、duration
移除旧的 avatar 相关属性，使用更通用的宽高、形状与大小参数，方便多种场景。Also applies to: 32-34
44-46: repeatCount 函数快速生成多行骨架
使用数组映射生成占位行，避免冗余循环写法。
48-52: shapeStyle 函数根据属性返回对应圆角
当形状为 circle 或 square 时，可直接设置边角样式，其余情况默认 round。
54-60: durationStyle 函数动态注入动画时长
基于传入的duration值生成样式，便于在不同加载时长下灵活切换动画速度。
62-63: useState 管理 animate 布尔值
此状态用于触发与重置动画效果，提高可控性。
64-69: playAnimation 函数先隐藏再延迟显示动画
通过先设置setAnimate(false)并稍作延迟，再切回 true，有助于触发 CSS 动画的重新执行。
71-79: 定时循环触发动画
useEffect 中每隔 3 秒调用 playAnimation，让骨架动画持续循环播放。
84-84: 条件判断 visible 后才渲染 children
若骨架不再可见，则正常展示真实内容，贴合加载逻辑。
87-103: 根据 repeatCount 渲染多行并给动画容器绑定样式
在每行骨架中conditionally渲染动画<div>并注入时长样式，兼顾结构与可扩展性。src/packages/skeleton/skeleton.taro.tsx (7)
1-8: 更新了组件的导入项，添加了动画相关的钩子函数导入了
useState和useEffect这两个React钩子函数来支持新增的动画功能，组件现在能够提供更加流畅和可定制化的加载动画效果。
15-20: 默认属性更新，提高了组件的默认体验
- 默认启用动画效果（
animated: true）- 增加了
size，shape，duration和inline等属性以提供更多自定义选项- 默认形状为圆角（
round），尺寸为中等（normal），动画持续时间为0.6秒这些默认值的设定使得组件开箱即用体验更好。
26-35: 扩展了组件的属性解构，支持更多样式自定义添加了
width、height、shape、size和duration等属性的解构，使组件能够接收并应用这些新增的自定义样式属性。
45-47: 保留了重复计数函数该函数用于生成指定数量的骨架行，实现保持不变，只是位置调整。
49-53: 添加了形状样式处理函数新增的
shapeStyle函数根据shape属性值动态设置边框圆角：
circle：设置为50%实现圆形效果square：设置为0实现方形效果- 默认（
round）：使用默认的圆角效果这样的实现使得组件的形状定制更加灵活。
55-61: 添加了动画持续时间样式处理函数新增的
durationStyle函数根据传入的duration属性设置动画持续时间，使动画效果可自定义。
63-70: 增加了动画状态管理逻辑添加了
animate状态和playAnimation函数来控制动画的播放：
- 通过先设置
false再设置true的方式，实现动画的重新触发- 使用小延迟（10ms）确保状态变化能够正确触发动画
这种实现方式可以有效地控制动画的播放时机。
| useEffect(() => { | ||
| if (!animated) return | ||
| playAnimation() | ||
| // 每隔 3 秒播放一次动画 | ||
| const intervalId = setInterval(playAnimation, 1000 + duration * 1000) // xs 动画 + 1s 间隔 | ||
|
|
||
| // 清理定时器 | ||
| return () => clearInterval(intervalId) | ||
| }, []) |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
使用Effect钩子实现动画定时播放
通过useEffect实现：
- 初始化时启动动画
- 设置定期播放间隔（动画时长+1秒）
- 组件卸载时清理定时器避免内存泄漏
但存在一个潜在问题：
🏁 Script executed:
#!/bin/bash
# 检查useEffect的依赖项问题
cat << EOF > check.js
const code = \`
useEffect(() => {
if (!animated) return
playAnimation()
const intervalId = setInterval(playAnimation, 1000 + duration * 1000)
return () => clearInterval(intervalId)
}, [])
\`;
console.log("问题：useEffect依赖数组为空，但函数内部使用了'animated'和'duration'属性。");
console.log("如果这些属性在组件生命周期内发生变化，useEffect不会重新执行。");
console.log("建议：将'animated'和'duration'添加到依赖数组中。");
console.log("\n修复示例：");
console.log(code.replace(", [])", ", [animated, duration])"));
EOF
node check.jsLength of output: 363
修改 useEffect 依赖数组
目前 useEffect 钩子内部使用了 animated 和 duration，但依赖数组为空，导致当这两个值在组件生命周期内发生变化时，定时播放动画的逻辑不会重新执行。为避免潜在的逻辑错误或内存泄漏风险，建议修改依赖数组，将 animated 和 duration 加入其中。具体修改建议如下：
- 将依赖数组从
[]修改为[animated, duration] - 这样可以保证在
animated或duration变化时，useEffect重新执行，从而正确处理动画逻辑
修复示例：
useEffect(() => {
if (!animated) return
playAnimation()
const intervalId = setInterval(playAnimation, 1000 + duration * 1000)
return () => clearInterval(intervalId)
}, [animated, duration])
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/styles/variables-jrkf.scss (1)
2119-2130: 更新 Skeleton 组件行高变量这里删除了旧的
$skeleton-line-height变量，并新增了三个更细粒度的变量：$skeleton-line-small-height、$skeleton-line-normal-height和$skeleton-line-large-height，默认值分别为 16px、24px 和 32px。这种改进使得组件的占位行高度控制更加灵活。请确认所有依赖该变量的组件、文档说明以及其他样式文件都已更新至新的变量名称和默认值。src/packages/skeleton/skeleton.scss (1)
21-23: .nut-skeleton-content-small 调整了 margin-top。在小尺寸骨架场景下略微增加上下分隔，视觉上更易区分多行骨架，但可关注不同行之间的间隙需求。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/packages/skeleton/__test__/skeleton.spec.tsx(1 hunks)src/packages/skeleton/skeleton.scss(2 hunks)src/packages/skeleton/skeleton.taro.tsx(2 hunks)src/packages/skeleton/skeleton.tsx(2 hunks)src/styles/variables-jmapp.scss(1 hunks)src/styles/variables-jrkf.scss(1 hunks)src/styles/variables.scss(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/packages/skeleton/test/skeleton.spec.tsx
- src/styles/variables-jmapp.scss
- src/styles/variables.scss
🧰 Additional context used
🧬 Code Definitions (2)
src/packages/skeleton/skeleton.taro.tsx (1)
src/packages/skeleton/skeleton.tsx (1)
Skeleton(21-108)
src/packages/skeleton/skeleton.tsx (1)
src/packages/skeleton/skeleton.taro.tsx (1)
Skeleton(22-109)
🪛 GitHub Check: codecov/patch
src/packages/skeleton/skeleton.tsx
[warning] 59-59: src/packages/skeleton/skeleton.tsx#L59
Added line #L59 was not covered by tests
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (30)
src/packages/skeleton/skeleton.tsx (10)
14-19: 新增默认属性的设定有助于减少组件使用时的样板代码。
animated现在默认为true，且新增了size、shape、duration、inline等属性，有利于使用者快速定制骨架屏效果，整体改动合理，值得肯定。
26-28: 解构出新的属性使代码更具可读性。在解构中添加
width、height、shape、size、duration等属性，能够清晰分离各参数功能，保持组件逻辑简洁明了。Also applies to: 32-34
44-44: repeatCount 方法命名明晰并便于复用。
repeatCount使用Array.from创建指定数量的行，逻辑简单易懂，适合在骨架屏中动态生成多行占位。
48-53: shapeStyle 提供了多种骨架形状选项。根据
shape判断使用不同的圆角，有效提升了布局灵活度，便于在各种 UI 场景中应用。
55-60: 动画时长设置的逻辑建议补充测试覆盖。静态分析工具提示第 59 行未被测试覆盖，可考虑在单测中校验
durationStyle是否正确应用到骨架动画，以保证动画时长逻辑的可靠性。🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 59-59: src/packages/skeleton/skeleton.tsx#L59
Added line #L59 was not covered by tests
62-62: 使用 useState(false) 初始化动画状态合乎直觉。在需触发动画时再设为
true，逻辑清晰，可读性好。
64-70: playAnimation 函数重置并延时触发动画，写法可读性佳。先将
animate设置为false再异步改为true，能够有效重播 CSS 动画。
72-80: 需在依赖数组中包含animated与duration。[相同建议与之前重复]当前
useEffect仅在初次渲染执行，但内部引用了animated、duration，若它们后续变动会导致动画逻辑无法更新。请考虑将这两个值加入依赖数组：-useEffect(() => { +useEffect(() => { }, []) +}, [animated, duration])
84-84: 针对visible为真时直接显示 children 的逻辑正确。能够保证在需要时直接展示真实内容，而非骨架屏。
88-103: 动态渲染骨架行的思路清晰。通过
repeatCount(rows)遍历并生成多段骨架，搭配动画逻辑可满足常见的骨架加载场景。src/packages/skeleton/skeleton.scss (10)
2-3: 设置行高与字体大小为 0 有助于消除骨架屏多余空白。此写法在处理内联元素时常见，可确保骨架显示紧凑。
6-11: 将 display 改为 inline-flex 提升布局灵活度。可在同一行并排多个骨架元素，且保留 flex 的部分特性，适合需要 inline 布局的场景。
13-14: .nut-skeleton-content-normal 样式明确。以固定高度来区分不同尺寸，命名和用途清晰无歧义。
17-18: .nut-skeleton-content-large 同理与 normal/ small 配合，便于统一管理多尺寸。可针对实际业务扩展更多尺寸等级，使用户选择更加灵活。
25-26: .nut-skeleton-content-small-0 清晰地表示无 margin-top。可见所有大小类别都可以对应带或不带间距的样式，满足多种排版需要。
37-42: 将动画背景重构为线性渐变更符合常见骨架动画模式。相比背景平移，线性渐变滑动的闪烁效果可更直观地模拟加载中状态，提升用户感知。
43-50: 显式定义四大动画属性便于后续维护。
animation-name、animation-duration、animation-timing-function、animation-iteration-count等细化声明，易于维护和理解。
55-60: 使用 transform: translateX() 实现骨架动画是通用且流畅的做法。相较改变
background-position，transform更高效且性能更优，绘制更平滑。
69-69: 为 RTL 模式启用nut-skeleton-rtl 2s linear 0s infinite动画。在阿拉伯语等 RTL 语言环境中，可保持骨架流动方向的一致性，逻辑完善。
73-80: 在 RTL 场景中同样基于 transform: translateX() 进行动画。方向反转配合
-100%与100%切换位置，保证与普通模式保持一致的性能与效果。src/packages/skeleton/skeleton.taro.tsx (10)
1-6: 引入必要依赖并保持写法与 Web 版统一，便于在 Taro 环境下复用组件逻辑。新增
useEffect、useState以及CSSProperties、FunctionComponent等导入。
8-8: 改用 Taro 提供的View组件代替原生标签合理。在小程序和 H5 端均可兼容渲染，适应 Taro 多端框架需求。
15-15: 默认将animated设置为 true 对骨架屏体验更友好。减少手动显式配置的麻烦，提升易用性。
27-28: 解构新属性与 Web 版一致，最大限度复用业务逻辑。同时分离
width、height、shape、size、duration，配置可读且易于修改。Also applies to: 29-29, 33-34
45-47: repeatCount、shapeStyle、durationStyle 保持与 Web 版本接口一致，方便跨端调试。代码结构相同，减少重复实现和维护成本，易于对比和排查问题。
Also applies to: 49-53
55-60: durationStyle 同样建议增加单测覆盖。与 Web 版相同，保证动画时长的正确性对交互体验非常重要。
63-69: Taro 端的 playAnimation 与 Web 逻辑一致，复用性强。先重置
animate为 false，再延时设 true 实现动画重播时机，结构清晰。
72-80: 与 Web 端同样的 useEffect 依赖警告：[与之前评论重复]同样存在对
animated、duration的引用但依赖数组为空的问题，请考虑加入依赖，以便在属性变动时重新执行动画逻辑。
85-85:visible为真则直接渲染 children，逻辑与 Web 版统一。Taro 端可复用此模式，方便在小程序端隐藏骨架时展示真实内容。
88-104: 生成多段骨架<View>的写法与动画衔接自洽。与 Web 版结构一致，可大幅降低跨端差异的复杂度，实现一处改动同步多端的维护模式。
fixed |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/packages/skeleton/demos/taro/demo5.tsx (1)
17-53: 整体架构改进建议当前实现虽然功能完整，但可以考虑将骨架屏部分提取为一个独立的组件，以便在其他页面重用此布局结构。这样可以减少代码重复，并使主组件更加简洁。
+ // 建议新建文件: src/packages/skeleton/demos/taro/components/UserCardSkeleton.tsx + import { Avatar, Skeleton } from '@nutui/nutui-react-taro' + import React from 'react' + import { View, Text } from '@tarojs/components' + import pxTransform from '@/utils/px-transform' + + interface UserCardSkeletonProps { + visible: boolean; + avatarSrc?: string; + title?: string; + content?: string; + } + + const UserCardSkeleton: React.FC<UserCardSkeletonProps> = ({ + visible, + avatarSrc = "https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png", + title = "NutUI-React", + content = "一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。" + }) => { + return ( + <View style={{ width: '100%' }}> + <View style={{ display: 'flex' }}> + <Skeleton + visible={visible} + width={pxTransform(50)} + height={pxTransform(50)} + shape="circle" + > + <Avatar + className="nut-skeleton-content-avatar" + size="50" + src={avatarSrc} + /> + </Skeleton> + <View style={{ flex: 1, marginLeft: pxTransform(8) }}> + <Skeleton + visible={visible} + size="large" + width="30%" + style={{ marginBottom: pxTransform(8) }} + > + <View style={{ lineHeight: 1, height: pxTransform(16) }}> + {title} + </View> + </Skeleton> + <Skeleton visible={visible} size="small" rows={2}> + <Text style={{ wordBreak: 'break-all' }}> + {content} + </Text> + </Skeleton> + </View> + </View> + </View> + ); + }; + + export default UserCardSkeleton; // 然后在 Demo5 中使用: - <View style={{ width: '100%' }}> - <View style={{ display: 'flex' }}> - <Skeleton - visible={checked} - width={pxTransform(50)} - height={pxTransform(50)} - shape="circle" - > - <Avatar - className="nut-skeleton-content-avatar" - size="50" - src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png" - /> - </Skeleton> - <View style={{ flex: 1, marginLeft: pxTransform(8) }}> - <Skeleton - visible={checked} - size="large" - width="30%" - style={{ marginBottom: pxTransform(8) }} - > - <View style={{ lineHeight: 1, height: pxTransform(16) }}> - NutUI-React - </View> - </Skeleton> - <Skeleton visible={checked} size="small" rows={2}> - <Text style={{ wordBreak: 'break-all' }}> - 一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。 - </Text> - </Skeleton> - </View> - </View> - </View> + <UserCardSkeleton visible={checked} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/packages/skeleton/demos/taro/demo3.tsx(1 hunks)src/packages/skeleton/demos/taro/demo4.tsx(1 hunks)src/packages/skeleton/demos/taro/demo5.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/packages/skeleton/demos/taro/demo4.tsx
🧰 Additional context used
🧬 Code Definitions (2)
src/packages/skeleton/demos/taro/demo3.tsx (2)
src/packages/skeleton/skeleton.tsx (1)
Skeleton(21-108)src/packages/skeleton/skeleton.taro.tsx (1)
Skeleton(22-109)
src/packages/skeleton/demos/taro/demo5.tsx (2)
src/packages/skeleton/skeleton.taro.tsx (1)
Skeleton(22-109)src/packages/avatar/avatar.taro.tsx (1)
Avatar(32-177)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (8)
src/packages/skeleton/demos/taro/demo3.tsx (2)
2-3: 导入了必要的组件和工具函数更新后的导入引入了
Space组件和pxTransform工具函数，以支持新的组件结构和像素转换。这些更改对于实现新的骨架屏布局是必要的。
8-15: 组件结构优化，符合新版 Skeleton API新的实现使用
Space组件作为容器，内部放置两个简化的Skeleton组件，清晰地展示了不同形状的骨架屏效果。这种实现方式与 Skeleton v15 版本的 API 更改保持一致，移除了之前的title、avatar等属性，转而使用更简洁的width、height和shape属性。
pxTransform函数的使用确保了在不同设备上有一致的显示效果。第二个 Skeleton 组件使用shape="circle"属性展示了圆形骨架效果，很好地演示了组件的形状定制能力。src/packages/skeleton/demos/taro/demo5.tsx (6)
4-4: 导入 pxTransform 工具函数增强了响应式设计支持添加了 pxTransform 工具函数的导入，此函数用于在不同环境下实现像素值的响应式转换，有助于确保组件在不同设备上具有一致的显示效果。
8-8: 函数参数类型明确化，提高代码健壮性为 changeStatus 函数的参数 value 添加了明确的 boolean 类型声明，符合 TypeScript 类型安全的最佳实践。
13-20: 优化了布局结构与交互控件将 Switch 组件放置在单独的 Cell 中，并添加了边距样式，提高了用户界面的清晰度和可用性。使用片段（Fragment）作为根元素，避免了不必要的 DOM 节点嵌套。
21-34: 骨架屏结构重构：Avatar 部分实现将之前单一的 Skeleton 组件拆分为多个专用组件，其中第一个用于头像显示。这种模块化设计更加灵活，通过明确设置 width、height 和 shape 属性，使骨架屏与实际 Avatar 组件更加匹配。
与旧版相比，现在的实现方式更加清晰地表达了组件的层次结构，有利于维护和扩展。
35-45: 骨架屏结构重构：标题部分实现为标题内容创建了专门的 Skeleton 组件，通过设置 size="large" 和 width="30%" 属性，以及添加下边距样式，使骨架屏更贴合实际内容的视觉效果。
这种实现更好地反映了 UI 的实际结构，并能根据内容的重要性提供视觉层次。
46-53: 骨架屏结构重构：正文部分实现使用 size="small" 和 rows={2} 属性为正文内容创建多行骨架效果，准确模拟实际内容的布局。通过将 Text 组件包裹在 Skeleton 中，实现了内容可见性的无缝切换。
使用 wordBreak: 'break-all' 样式确保长文本能够正确换行，提高了文本内容的可读性。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/packages/skeleton/doc.md (1)
37-38: 关于“标题段落”标题的简化
将“标题段落圆角风格”简化为“标题段落”，减少了冗余描述。如果设计上不再强调圆角效果，此修改是合理的；否则建议补充必要信息以免丢失重要视觉提示。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/packages/skeleton/doc.md(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (5)
src/packages/skeleton/doc.md (5)
13-14: 确认章节标题变更
将原先章节的“基础用法”修改为“标题”，使文档结构更加简洁明了。请确认此处修改与整个组件的文档风格保持一致。
21-22: 更新章节标题“正文”
将原有“传入多行”修改为“正文”，更好地传达示例内容。建议再确认一下文案是否能清晰表达意图。
29-30: 确认“模拟头像”标题修改
将“显示头像”改为“模拟头像”，这可以让文档描述更加贴近组件的实际场景。请核实修改后的表述与用户预期是否一致。
61-66: 更新 Props 表的属性定义
Props 表已调整：移除了 avatar 相关属性并新增了 size、shape、duration、rows、width 和 height 属性。文档中对各属性的类型与默认值说明较为清晰，但请确认这些修改在组件实现中也已同步，避免文档与代码不一致的情况。
78-81: 修改 CSS 样式变量
更新了 CSS 变量定义，包括小、中、大号线条高度以及边框圆角。请确保这些变量符合最新设计规范，并在样式预览时确认效果正确。
3 participants
Summary by CodeRabbit
新功能
文档
样式
测试