feat(lottie): new component #2867
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
概述遍历这个拉取请求引入了一个新的 Lottie 动画组件和相关的配置、文档和示例。主要变更包括在 变更
序列图sequenceDiagram
participant User
participant LottieComponent
participant AnimationData
participant Canvas/WebView
User->>LottieComponent: 设置动画源和参数
LottieComponent->>AnimationData: 加载动画数据
AnimationData-->>LottieComponent: 返回动画数据
LottieComponent->>Canvas/WebView: 渲染动画
User->>LottieComponent: 控制动画（播放/暂停/停止）
可能相关的 PR
诗歌
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 19
🔭 Outside diff range comments (1)
src/packages/loading/demos/taro/demo8.tsx (1)
Line range hint
14-19: 建议优化加载状态管理和超时处理当前的超时处理和加载状态管理可以进行以下改进：
- 超时时间建议抽取为配置项
- 建议添加加载失败的处理机制
- 建议使用 React 的 useCallback 优化性能
建议改进示例：
const LOADING_TIMEOUT = 2000; const Demo8 = () => { const [visible, setVisible] = useState(false); const [error, setError] = useState(null); const showOverlay = useCallback(() => { setVisible(true); setError(null); const timer = setTimeout(() => { setVisible(false); }, LOADING_TIMEOUT); return () => clearTimeout(timer); }, []); // ... 其余代码 }
🧹 Nitpick comments (26)
src/packages/loading/loading.tsx (1)
47-47: 确保在useImperativeHandle中正确地暴露 ref在使用
useImperativeHandle时，应当返回需要暴露的实例对象。因为loadingLottieRef是一个 ref 对象，应该返回其current属性。修改代码如下：
- React.useImperativeHandle(ref, () => loadingLottieRef) + React.useImperativeHandle(ref, () => loadingLottieRef.current)src/packages/lottie/mp.tsx (1)
70-71: 在组件卸载时，检查animation.current是否存在在调用
removeEventListener和destroy方法前，建议确认animation.current是否存在，以避免可能的运行时错误。可以修改代码如下：
+ if (animation.current) { onComplete && animation.current.removeEventListener('complete', onComplete) animation.current.destroy() + }src/packages/loading/loading.taro.tsx (2)
48-48: 确保在useImperativeHandle中正确地暴露 ref在使用
useImperativeHandle时，应当返回需要暴露的实例对象。因为loadingLottieRef是一个 ref 对象，应该返回其current属性。修改代码如下：
- React.useImperativeHandle(ref, () => loadingLottieRef) + React.useImperativeHandle(ref, () => loadingLottieRef.current)
52-52: 请移除调试代码在提交代码前，建议删除
console.log等调试语句，以保持代码整洁。src/packages/lottie/types.ts (1)
4-11: 建议优化接口定义以提高灵活性和类型安全性以下几点建议：
- 建议将非必需属性标记为可选
source类型可以更具体，建议使用LottieJSON或类似的具体类型initialSegment应该是可选的，因为不是所有动画都需要分段播放建议按照以下方式修改：
export interface LottieProps extends Omit<LottieOptions, 'animationData'> { style: React.CSSProperties - source: NonNullable<unknown> + source: object - loop: boolean | number + loop?: boolean | number - autoPlay: boolean + autoPlay?: boolean - initialSegment: [number, number] + initialSegment?: [number, number] - speed: number + speed?: number }src/packages/lottie/demos/h5/demo3.tsx (1)
8-10: 建议增强演示组件的功能性和响应式布局当前演示比较简单，建议：
- 添加控制动画的交互功能
- 使用响应式布局而不是固定尺寸
- 展示更多 Lottie 组件的特性
建议修改如下：
- <Cell style={{ background: '#FF0F23' }}> - <Lottie source={whitePull} style={{ width: 132, height: 26 }} /> + <Cell style={{ background: '#FF0F23', padding: '16px' }}> + <Lottie + source={whitePull} + style={{ width: '100%', maxWidth: '132px', height: 'auto' }} + autoPlay={true} + loop={true} + speed={1} + /> </Cell>src/packages/lottie/demos/taro/demo3.tsx (1)
1-14: 建议重构以减少代码重复并提升可维护性目前 Taro 版本与 H5 版本的代码几乎完全重复，建议：
- 抽取共享的配置和样式
- 创建统一的演示组件基类
- 仅在平台特定文件中处理差异
建议创建一个共享的配置文件：
// src/packages/lottie/demos/shared/config.ts export const demoConfig = { style: { width: '100%', maxWidth: '132px', height: 'auto', }, lottieProps: { autoPlay: true, loop: true, speed: 1, }, }然后在两个平台的演示组件中复用：
import React from 'react' import { Cell, Lottie } from '@nutui/nutui-react-taro' import whitePull from '../../animation/dark/pulltorefresh-white.json' +import { demoConfig } from '../shared/config' const Demo3 = () => { return ( <> <Cell style={{ background: '#FF0F23' }}> - <Lottie source={whitePull} style={{ width: 132, height: 26 }} /> + <Lottie + source={whitePull} + style={demoConfig.style} + {...demoConfig.lottieProps} + /> </Cell> </> ) }src/packages/loading/demos/taro/demo1.tsx (1)
12-12: 建议使用国际化文本加载提示文本应该使用国际化配置，而不是硬编码。
建议使用项目的国际化方案处理文本内容。
Also applies to: 15-15
src/packages/loading/types.ts (1)
7-8: 使用 const assertion 优化类型定义可以使用 const assertion 来获得更严格的类型检查。
建议修改为：
- export type LoadingType = 'spinner' | 'circular' | 'lottie' - export type LoadingDirection = 'horizontal' | 'vertical' + export const LoadingType = ['spinner', 'circular', 'lottie'] as const + export type LoadingType = typeof LoadingType[number] + export const LoadingDirection = ['horizontal', 'vertical'] as const + export type LoadingDirection = typeof LoadingDirection[number]src/packages/lottie/web.tsx (1)
13-19: 建议添加属性验证为了提高组件的可靠性，建议添加必要的属性验证。
建议添加以下验证：
+ if (!source) { + console.warn('NutLottie: source is required') + return null + } return ( <LottieReact {...rest} lottieRef={loadingLottieRef} animationData={source} style={style} /> )src/packages/loading/demos/h5/demo1.tsx (2)
3-3: 建议优化导入路径使用相对路径导入 JSON 文件可能会导致维护性问题。建议将动画资源统一管理。
建议创建统一的动画资源管理模块，例如：
- import data from '@/packages/loading/lottie/animation/dark/loading.json' + import { loadingAnimation } from '@/packages/lottie/animations'
13-25: 建议改进代码结构和国际化支持
- 加载文案建议移至国际化配置
- Lottie 相关属性可以抽取为常量配置
建议重构为：
+ const LOADING_TEXT = { + zh: '正在奋力加载中，感谢您的等待', + en: 'Loading, please wait...' + } + + const LOTTIE_CONFIG = { + disabled: { + autoplay: false, + loop: false + } + } <Loading direction="vertical" type="lottie" jsonData={data} - lottieProps={{ autoplay: false, loop: false }} + lottieProps={LOTTIE_CONFIG.disabled} > - 正在奋力加载中，感谢您的等待 + {LOADING_TEXT[locale]} </Loading>src/packages/lottie/demo.tsx (1)
21-28: 建议更新标题引用并添加描述文本为了提高用户体验，建议使用不同的标题并为每个演示添加描述性文本。
建议按照以下方式修改：
<div className="demo"> <h2>{translated.title1}</h2> + <p>{translated.desc1}</p> <Demo1 /> - <h2>{translated.title1}</h2> + <h2>{translated.title2}</h2> + <p>{translated.desc2}</p> <Demo2 /> - <h2>{translated.title1}</h2> + <h2>{translated.title3}</h2> + <p>{translated.desc3}</p> <Demo3 /> </div>src/packages/lottie/demos/h5/demo2.tsx (1)
1-22: 建议提取共享代码到公共组件H5版本和Taro版本的代码几乎完全相同，建议提取共享逻辑到一个公共组件中。
建议创建一个新的共享组件文件，例如
demo2.shared.tsx，将通用逻辑和配置提取到该文件中，然后在H5和Taro版本中复用。这样可以：
- 减少代码重复
- 简化维护工作
- 确保两个版本的一致性
src/packages/lottie/demos/h5/demo1.tsx (1)
10-12: 建议优化样式配置和动画尺寸处理建议进行以下优化：
- 建议将背景色抽取为主题常量，便于统一管理和暗色主题适配
- 动画尺寸建议使用相对单位（如 rem）或主题变量，提高适配性
- 考虑添加响应式布局支持
示例改进：
- <Cell style={{ background: 'rgba(0, 0, 0, 0.4)' }}> - <Lottie source={lightLoading} style={{ width: 56, height: 56 }} /> - </Cell> + <Cell style={{ background: 'var(--nutui-loading-background)' }}> + <Lottie + source={lightLoading} + style={{ + width: 'var(--nutui-loading-size, 3.5rem)', + height: 'var(--nutui-loading-size, 3.5rem)' + }} + /> + </Cell>Also applies to: 13-15, 16-18
src/packages/lottie/demos/taro/demo1.tsx (1)
1-22: 建议重构以减少代码重复当前的 H5 和 Taro 演示代码存在大量重复。建议：
- 创建一个共享的基础组件
- 使用平台特定的包装器组件
建议重构示例：
// shared/demo1.base.tsx export const Demo1Base = ({ LottieComponent, CellComponent }) => { return ( <> <CellComponent style={{ background: 'var(--nutui-loading-background)' }}> <LottieComponent source={lightLoading} style={{ width: 56, height: 56 }} /> </CellComponent> // ... 其他 Cell 组件 </> ) } // demos/h5/demo1.tsx import { Cell, Lottie } from '@nutui/nutui-react' export default () => <Demo1Base LottieComponent={Lottie} CellComponent={Cell} /> // demos/taro/demo1.tsx import { Cell, Lottie } from '@nutui/nutui-react-taro' export default () => <Demo1Base LottieComponent={Lottie} CellComponent={Cell} />src/packages/loading/demos/taro/demo8.tsx (1)
30-32: 建议国际化处理文本内容当前的文本内容是硬编码的中文，建议使用国际化方案处理。
建议改进示例：
- <Loading direction="vertical">加载中</Loading> + <Loading direction="vertical">{t('loading.text')}</Loading>src/packages/loading/loading.scss (1)
24-29: 建议使用 CSS 变量来定义尺寸为了提高组件的可维护性和灵活性，建议将固定的尺寸值改为 CSS 变量。
建议按照以下方式修改：
.nut-loading-lottie-box { - width: 56px; - height: 56px; + width: $loading-lottie-size; + height: $loading-lottie-size; border-radius: $radius-base; background: $loading-lottie-background; }请在变量文件中添加：
$loading-lottie-size: 56px;src/packages/lottie/doc.en-US.md (1)
21-27: 需要修正拼写错误"Drak" 应该修正为 "Dark"。
建议修改：
- ### Drak + ### Darkpackage.json (1)
117-119: 建议固定 Lottie 依赖的版本号使用
^版本范围可能导致不同环境下安装不同的版本，建议固定具体版本号以确保一致性。建议修改为：
- "lottie-react": "^2.4.0", - "lottie-miniprogram": "^1.0.12", - "lottie-react-native": "^7.1.0" + "lottie-react": "2.4.0", + "lottie-miniprogram": "1.0.12", + "lottie-react-native": "7.1.0"src/packages/lottie/animation/light/global.json (1)
1-1: 建议优化动画资源大小当前动画尺寸为 168x168 像素，对于加载指示器来说可能偏大。建议考虑以下优化方案：
- 减小画布尺寸至 120x120 或更小
- 简化路径数据，减少关键帧数量
- 移除未使用的标记数组
src/packages/lottie/animation/dark/global.json (2)
1-1: 优化建议：考虑性能和可访问性
性能方面：
- 动画使用了高斯模糊效果，这可能在低端设备上造成性能问题
- 复杂的矢量路径可能导致渲染延迟
可访问性方面：
- 建议添加
prefers-reduced-motion支持- 考虑为动画添加合适的ARIA属性
Line range hint
1-24: 建议：优化动画帧率和时长当前配置：
- 帧率：24fps
- 动画时长：48帧（2秒）
建议考虑以下优化：
- 可以降低到 20fps 来减少性能开销，对视觉效果影响不大
- 考虑缩短动画时长到 30-36 帧（1.25-1.5秒），以提供更快的视觉反馈
src/packages/lottie/animation/light/pulltorefresh.json (1)
1-1: 检查：动画性能优化建议进行以下优化：
- 移除未使用的关键帧数据
- 简化补间动画的贝塞尔曲线控制点
- 合并可以合并的图层以减少渲染开销
- 使用整数坐标值以避免子像素渲染
src/packages/lottie/doc.zh-TW.md (1)
5-6: 标题层级需要调整建议将 "引入" 的标题层级改为二级标题，以保持文档结构的一致性。
-### 引入 +## 引入🧰 Tools
🪛 Markdownlint (0.37.0)
5-5: Expected: h2; Actual: h3
Heading levels should only increment by one level at a time(MD001, heading-increment)
src/packages/lottie/doc.md (1)
5-5: 需要修正标题层级标题层级应该按顺序递增。建议将"引入"部分改为二级标题。
-### 引入 +## 引入🧰 Tools
🪛 Markdownlint (0.37.0)
5-5: Expected: h2; Actual: h3
Heading levels should only increment by one level at a time(MD001, heading-increment)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (8)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlsrc/packages/lottie/animation/dark/global.gifis excluded by!**/*.gifsrc/packages/lottie/animation/dark/loading.gifis excluded by!**/*.gifsrc/packages/lottie/animation/dark/pulltorefresh-white.gifis excluded by!**/*.gifsrc/packages/lottie/animation/dark/pulltorefresh.gifis excluded by!**/*.gifsrc/packages/lottie/animation/light/global.gifis excluded by!**/*.gifsrc/packages/lottie/animation/light/loading.gifis excluded by!**/*.gifsrc/packages/lottie/animation/light/pulltorefresh.gifis excluded by!**/*.gif
📒 Files selected for processing (41)
package.json(1 hunks)src/config.json(2 hunks)src/packages/loading/demos/h5/demo1.tsx(1 hunks)src/packages/loading/demos/taro/demo1.tsx(1 hunks)src/packages/loading/demos/taro/demo8.tsx(2 hunks)src/packages/loading/doc.en-US.md(0 hunks)src/packages/loading/doc.md(0 hunks)src/packages/loading/doc.taro.md(0 hunks)src/packages/loading/doc.zh-TW.md(1 hunks)src/packages/loading/index.taro.ts(1 hunks)src/packages/loading/index.ts(1 hunks)src/packages/loading/loading.scss(1 hunks)src/packages/loading/loading.taro.tsx(2 hunks)src/packages/loading/loading.tsx(2 hunks)src/packages/loading/types.ts(1 hunks)src/packages/lottie/animation/dark/global.json(1 hunks)src/packages/lottie/animation/dark/loading.json(1 hunks)src/packages/lottie/animation/dark/pulltorefresh-white.json(1 hunks)src/packages/lottie/animation/dark/pulltorefresh.json(1 hunks)src/packages/lottie/animation/light/global.json(1 hunks)src/packages/lottie/animation/light/loading.json(1 hunks)src/packages/lottie/animation/light/pulltorefresh.json(1 hunks)src/packages/lottie/demo.taro.tsx(1 hunks)src/packages/lottie/demo.tsx(1 hunks)src/packages/lottie/demos/h5/demo1.tsx(1 hunks)src/packages/lottie/demos/h5/demo2.tsx(1 hunks)src/packages/lottie/demos/h5/demo3.tsx(1 hunks)src/packages/lottie/demos/taro/demo1.tsx(1 hunks)src/packages/lottie/demos/taro/demo2.tsx(1 hunks)src/packages/lottie/demos/taro/demo3.tsx(1 hunks)src/packages/lottie/doc.en-US.md(1 hunks)src/packages/lottie/doc.md(1 hunks)src/packages/lottie/doc.taro.md(1 hunks)src/packages/lottie/doc.zh-TW.md(1 hunks)src/packages/lottie/index.taro.ts(1 hunks)src/packages/lottie/index.ts(1 hunks)src/packages/lottie/mp.tsx(1 hunks)src/packages/lottie/types.ts(1 hunks)src/packages/lottie/web.tsx(1 hunks)src/styles/variables.scss(1 hunks)src/utils/platform-taro.ts(1 hunks)
💤 Files with no reviewable changes (3)
- src/packages/loading/doc.taro.md
- src/packages/loading/doc.md
- src/packages/loading/doc.en-US.md
✅ Files skipped from review due to trivial changes (5)
- src/packages/loading/doc.zh-TW.md
- src/packages/loading/index.taro.ts
- src/packages/loading/index.ts
- src/styles/variables.scss
- src/packages/lottie/animation/dark/loading.json
🧰 Additional context used
🪛 Markdownlint (0.37.0)
src/packages/lottie/doc.en-US.md
5-5: Expected: h2; Actual: h3
Heading levels should only increment by one level at a time
(MD001, heading-increment)
src/packages/lottie/doc.md
5-5: Expected: h2; Actual: h3
Heading levels should only increment by one level at a time
(MD001, heading-increment)
src/packages/lottie/doc.taro.md
5-5: Expected: h2; Actual: h3
Heading levels should only increment by one level at a time
(MD001, heading-increment)
49-49: (https://lottiereact.com/)[https://lottiereact.com/]
Reversed link syntax
(MD011, no-reversed-links)
49-49: null
Bare URL used
(MD034, no-bare-urls)
src/packages/lottie/doc.zh-TW.md
5-5: Expected: h2; Actual: h3
Heading levels should only increment by one level at a time
(MD001, heading-increment)
🔇 Additional comments (12)
src/packages/loading/loading.tsx (1)
44-45: 🛠️ Refactor suggestion
建议避免使用 // @ts-ignore，处理类型错误
尽量避免使用 // @ts-ignore，这可能会掩盖潜在的类型错误。建议修正类型定义，以消除 TypeScript 错误。
可以通过以下方式修改代码，避免类型忽略：
- // @ts-ignore
const loadingLottieRef: React.MutableRefObject<LottieRefCurrentProps | null> = useRef()
+ const loadingLottieRef = useRef<LottieRefCurrentProps | null>(null)Likely invalid or redundant comment.
src/packages/lottie/index.ts (1)
1-5: 模块导出正确，代码良好
模块的导入和导出方式清晰合理，符合最佳实践。
src/utils/platform-taro.ts (1)
20-22: 代码实现清晰简洁！
新增的 miniprogram 函数与现有的环境检测函数保持一致的实现模式，代码逻辑清晰。
src/packages/lottie/demos/taro/demo2.tsx (1)
1-22: 请参考H5版本的修改建议
该组件与H5版本存在相同的问题，请参考H5版本的代码审查建议进行相应修改。
src/packages/loading/loading.scss (1)
32-32: LGTM！
使用 $spacing-base 变量替换固定值是个很好的改进。
src/packages/lottie/animation/dark/pulltorefresh-white.json (1)
1-1: 检查：动画主题切换的兼容性
由于这是暗色模式下的动画，需要确保：
- 在主题切换时动画过渡平滑
- 颜色值与设计规范一致
- 动画状态在切换时正确保存和恢复
✅ Verification successful
主题切换动画配置正确
经验证:
- 存在对应的浅色主题动画文件
src/packages/lottie/animation/light/pulltorefresh.json - 暗色模式下使用了标准的白色填充色值 [1,1,1,1]
- 动画状态转换使用了平滑的缓动函数
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否存在对应的浅色主题动画文件
fd -t f "pulltorefresh" "src/packages/lottie/animation/light"
# 检查颜色值是否符合主题规范
rg -A 1 '"c":\s*{\s*"a":\s*[01],\s*"k":\s*\[' src/packages/lottie/animation/dark/
Length of output: 378
Script:
#!/bin/bash
# 检查是否存在对应的浅色主题动画文件
fd -t f "pulltorefresh" "src/packages/lottie/animation/light"
# 检查颜色值是否符合主题规范(修复正则表达式)
rg '"c":\s*\{.*"k":\s*\[\s*1,\s*1,\s*1' src/packages/lottie/animation/dark/pulltorefresh-white.json
Length of output: 23362
src/packages/lottie/animation/dark/pulltorefresh.json (1)
1-1: 代码结构规范，动画配置完整！
该下拉刷新动画文件遵循了 Lottie 标准格式，包含了完整的动画属性配置和关键帧数据。
src/config.json (2)
811-811: Loading 组件版本标记更新正确
为 Loading 组件添加 v14 标记，表明组件支持 v14 版本。
1045-1055: Lottie 组件配置完整且规范
新增的 Lottie 组件配置包含了所有必要的字段，并且与其他组件保持一致的格式。
src/packages/lottie/doc.md (1)
17-17: 验证示例代码文件是否存在
需要确保所有引用的示例代码文件都已创建。
Also applies to: 25-25, 33-33
✅ Verification successful
示例代码文件已全部存在
所有在文档中引用的示例代码文件（h5/demo1.tsx、h5/demo2.tsx、h5/demo3.tsx）都已在 src/packages/lottie/demos/ 目录下正确创建。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if demo files exist
for demo in h5/demo{1,2,3}.tsx; do
if ! fd -t f "$demo" src/packages/lottie/demos/; then
echo "Missing demo file: $demo"
fi
done
Length of output: 248
Script:
#!/bin/bash
# Try searching for demo files in different locations
echo "Searching for demo files:"
fd -t f "demo.*\.tsx" src/packages/lottie
# Check the content of doc.md to see all referenced demo files
echo -e "\nChecking doc.md content:"
cat src/packages/lottie/doc.md
# List all files in lottie package to understand structure
echo -e "\nListing files in lottie package:"
fd . src/packages/lottie
Length of output: 3546
src/packages/lottie/doc.taro.md (2)
8-9: 导入路径正确
Taro 版本的包引入路径正确设置为 @nutui/nutui-react-taro。
17-17: 示例代码路径正确
Taro 版本的示例代码路径已正确调整为 taro/demo*.tsx。
Also applies to: 25-25, 33-33
|
|
||
| export interface LoadingProps extends BasicComponent { | ||
| type: LoadingType | ||
| jsonData: any |
There was a problem hiding this comment.
🛠️ Refactor suggestion
明确 jsonData 的类型定义
jsonData 使用 any 类型过于宽松，建议定义更具体的类型。
建议定义具体的接口来描述 jsonData 的结构：
- jsonData: any
+ interface LottieJsonData {
+ v: string
+ fr: number
+ ip: number
+ op: number
+ assets: Array<any>
+ layers: Array<any>
+ }
+ jsonData: LottieJsonData📝 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.
Suggested change
| jsonData: any | |
| interface LottieJsonData { | |
| v: string | |
| fr: number | |
| ip: number | |
| op: number | |
| assets: Array<any> | |
| layers: Array<any> | |
| } | |
| jsonData: LottieJsonData |
| import { LottieProps } from './types' | ||
|
|
||
| export const Lottie = React.forwardRef( | ||
| (props: Partial<LottieProps>, ref: any) => { |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议改进类型定义
ref 参数使用 any 类型不够严谨，建议使用更具体的类型定义。
建议修改为：
- (props: Partial<LottieProps>, ref: any)
+ (props: Partial<LottieProps>, ref: React.ForwardedRef<LottieRefCurrentProps>)Committable suggestion skipped: line range outside the PR's diff.
Comment on lines
+8
to
+18
| const [translated] = useTranslate({ | ||
| 'zh-CN': { | ||
| title1: '基础用法', | ||
| }, | ||
| 'zh-TW': { | ||
| title1: '基礎用法', | ||
| }, | ||
| 'en-US': { | ||
| title1: 'Basic Usage', | ||
| }, | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议为每个演示部分添加独特的标题
当前的翻译配置对所有演示部分使用相同的标题。建议为每个演示添加独特的标题以更好地区分它们的用途。
建议按照以下方式修改：
const [translated] = useTranslate({
'zh-CN': {
title1: '基础用法',
+ title2: '深色主题',
+ title3: '自定义动画',
},
'zh-TW': {
title1: '基礎用法',
+ title2: '深色主題',
+ title3: '自定義動畫',
},
'en-US': {
title1: 'Basic Usage',
+ title2: 'Dark Theme',
+ title3: 'Custom Animation',
},
})📝 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.
Suggested change
| const [translated] = useTranslate({ | |
| 'zh-CN': { | |
| title1: '基础用法', | |
| }, | |
| 'zh-TW': { | |
| title1: '基礎用法', | |
| }, | |
| 'en-US': { | |
| title1: 'Basic Usage', | |
| }, | |
| }) | |
| const [translated] = useTranslate({ | |
| 'zh-CN': { | |
| title1: '基础用法', | |
| title2: '深色主题', | |
| title3: '自定义动画', | |
| }, | |
| 'zh-TW': { | |
| title1: '基礎用法', | |
| title2: '深色主題', | |
| title3: '自定義動畫', | |
| }, | |
| 'en-US': { | |
| title1: 'Basic Usage', | |
| title2: 'Dark Theme', | |
| title3: 'Custom Animation', | |
| }, | |
| }) |
Comment on lines
+10
to
+12
| <Cell style={{ background: 'rgba(20, 20, 20, 0.4)' }}> | ||
| <Lottie source={darkLoading} style={{ width: 56, height: 56 }} /> | ||
| </Cell> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议使用主题变量替代硬编码的背景色值
为了保持主题的一致性和可维护性，建议使用主题变量来定义背景色。
建议修改如下：
-<Cell style={{ background: 'rgba(20, 20, 20, 0.4)' }}>
+<Cell style={{ background: 'var(--nutui-loading-lottie-background)' }}>Committable suggestion skipped: line range outside the PR's diff.
| @@ -0,0 +1,62 @@ | |||
| # Lottie | |||
|
|
|||
| A loading icon, Used to show the loading state | |||
There was a problem hiding this comment.
组件描述需要更新
当前描述将 Lottie 组件描述为加载图标，这与组件的实际功能不符。
建议修改为：
- A loading icon, Used to show the loading state
+ A component for rendering After Effects animations, powered by Lottie📝 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.
Suggested change
| A loading icon, Used to show the loading state | |
| A component for rendering After Effects animations, powered by Lottie |
Comment on lines
+41
to
+47
| | Property | Description | type | default | | ||
| | --- | --- | --- | --- | | ||
| | source | JSON object containing exported animation data | `Object` | `circular` | | ||
| | loop | The arrangement of loading icons and text | `boolean \| number` | `horizontal` | | ||
| | autoPlay | The animation will play immediately after loading | `boolean` | `-` | | ||
| | initialSegment | The first value is the initial frame and the second value is the final frame. If this value is set, the animation will start at this time position | `[number, number]` | `-` | | ||
| | speed | playback speed | `number` | `1` | |
There was a problem hiding this comment.
Props 表格需要更正
Props 表格中存在一些问题需要修正：
loop属性的默认值似乎不正确（显示为 "horizontal"）- 部分属性缺少默认值说明
建议修改如下：
| Property | Description | type | default |
| --- | --- | --- | --- |
| source | JSON object containing exported animation data | `Object` | `circular` |
- | loop | The arrangement of loading icons and text | `boolean \| number` | `horizontal` |
+ | loop | Whether to loop the animation | `boolean \| number` | `true` |
| autoPlay | The animation will play immediately after loading | `boolean` | `true` |
| initialSegment | The first value is the initial frame and the second value is the final frame. If this value is set, the animation will start at this time position | `[number, number]` | `-` |
| speed | playback speed | `number` | `1` |📝 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.
Suggested change
| | Property | Description | type | default | | |
| | --- | --- | --- | --- | | |
| | source | JSON object containing exported animation data | `Object` | `circular` | | |
| | loop | The arrangement of loading icons and text | `boolean \| number` | `horizontal` | | |
| | autoPlay | The animation will play immediately after loading | `boolean` | `-` | | |
| | initialSegment | The first value is the initial frame and the second value is the final frame. If this value is set, the animation will start at this time position | `[number, number]` | `-` | | |
| | speed | playback speed | `number` | `1` | | |
| | Property | Description | type | default | | |
| | --- | --- | --- | --- | | |
| | source | JSON object containing exported animation data | `Object` | `circular` | | |
| | loop | Whether to loop the animation | `boolean \| number` | `true` | | |
| | autoPlay | The animation will play immediately after loading | `boolean` | `true` | | |
| | initialSegment | The first value is the initial frame and the second value is the final frame. If this value is set, the animation will start at this time position | `[number, number]` | `-` | | |
| | speed | playback speed | `number` | `1` | |
| @@ -0,0 +1 @@ | |||
| {"v":"5.8.1","fr":24,"ip":0,"op":48,"w":168,"h":168,"nm":"局部加载,默认,暗黑=OFF 3倍","ddd":0,"assets":[{"id":"comp_0","nm":"局部加载,默认,暗黑=OFF","fr":24,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"合成","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[28,27.92,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.25,0.25,0.25],"y":[1,1,1]},"o":{"x":[0.33,0.33,0.33],"y":[0,0,0]},"t":0,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.67,0.67,0.67],"y":[1,1,1]},"o":{"x":[0.33,0.33,0.33],"y":[0,0,0]},"t":4,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.3,0.3,0.25],"y":[1,1,1]},"o":{"x":[0.7,0.7,0.75],"y":[0,0,0]},"t":8,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.25,0.25,0.25],"y":[1,1,1]},"o":{"x":[0.33,0.33,0.33],"y":[0,0,0]},"t":12,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.67,0.67,0.67],"y":[1,1,1]},"o":{"x":[0.33,0.33,0.33],"y":[0,0,0]},"t":16,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.3,0.3,0.25],"y":[1,1,1]},"o":{"x":[0.7,0.7,0.75],"y":[0,0,0]},"t":20,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.25,0.25,0.25],"y":[1,1,1]},"o":{"x":[0.33,0.33,0.33],"y":[0,0,0]},"t":24,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.67,0.67,0.67],"y":[1,1,1]},"o":{"x":[0.33,0.33,0.33],"y":[0,0,0]},"t":28,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.3,0.3,0.25],"y":[1,1,1]},"o":{"x":[0.7,0.7,0.75],"y":[0,0,0]},"t":32,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.25,0.25,0.25],"y":[1,1,1]},"o":{"x":[0.33,0.33,0.33],"y":[0,0,0]},"t":36,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.67,0.67,0.67],"y":[1,1,1]},"o":{"x":[0.33,0.33,0.33],"y":[0,0,0]},"t":40,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.3,0.3,0.25],"y":[1,1,1]},"o":{"x":[0.7,0.7,0.75],"y":[0,0,0]},"t":44,"s":[100,100,100],"e":[100,100,100]},{"t":48}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.75,"y":1},"o":{"x":0.25,"y":0},"t":0,"s":[{"i":[[-0.715,0],[0,0],[0,0],[0.477,-1.305],[0,0],[0,0],[1.614,-1.115],[0,0],[0,0],[0,0],[-0.442,1.788],[0,0],[0,0],[-0.248,1.238],[0,0],[0,0],[0,0],[0,0],[-0.521,0.427]],"o":[[0,0],[0,0],[1.389,0],[0,0],[0,0],[1.962,0],[0,0],[0,0],[0,0],[-1.515,1.047],[0,0],[0,0],[-1.262,0],[0,0],[0,0],[0,0],[0,0],[0.141,-0.701],[0.521,-0.427]],"v":[[-4.965,-11.68],[0.862,-11.68],[7.895,-11.68],[9.774,-8.994],[7.114,-1.712],[8.571,-1.712],[9.708,1.934],[4.567,5.485],[2.048,7.226],[-3.877,11.319],[-6.955,9.193],[-6.226,6.24],[-8.574,6.24],[-10.535,3.847],[-9.553,-1.056],[-9.175,-2.939],[-8.54,-6.104],[-7.906,-9.27],[-6.866,-11.001]],"c":true}],"e":[{"i":[[-0.715,0],[0,0],[0,0],[0.477,-1.305],[0,0],[0,0],[1.614,-1.115],[0,0],[0,0],[0,0],[-0.442,1.788],[0,0],[0,0],[-0.248,1.238],[0,0],[0,0],[0,0],[0,0],[-0.521,0.427]],"o":[[0,0],[0,0],[1.389,0],[0,0],[0,0],[1.962,0],[0,0],[0,0],[0,0],[-1.515,1.047],[0,0],[0,0],[-1.262,0],[0,0],[0,0],[0,0],[0,0],[0.141,-0.701],[0.521,-0.427]],"v":[[-4.965,-11.68],[0.862,-11.68],[7.895,-11.68],[9.774,-8.994],[7.114,-1.712],[8.571,-1.712],[9.708,1.934],[4.567,5.485],[2.048,7.226],[-3.877,11.319],[-6.955,9.193],[-6.226,6.24],[-8.574,6.24],[-10.535,3.847],[-9.553,-1.056],[-9.175,-2.939],[-8.54,-6.104],[-7.906,-9.27],[-6.866,-11.001]],"c":true}]},{"i":{"x":0.75,"y":1},"o":{"x":0.25,"y":0},"t":4,"s":[{"i":[[-0.715,0],[0,0],[0,0],[0.477,-1.305],[0,0],[0,0],[1.614,-1.115],[0,0],[0,0],[0,0],[-0.442,1.788],[0,0],[0,0],[-0.248,1.238],[0,0],[0,0],[0,0],[0,0],[-0.521,0.427]],"o":[[0,0],[0,0],[1.389,0],[0,0],[0,0],[1.962,0],[0,0],[0,0],[0,0],[-1.515,1.047],[0,0],[0,0],[-1.262,0],[0,0],[0,0],[0,0],[0,0],[0.141,-0.701],[0.521,-0.427]],"v":[[-4.965,-11.68],[0.862,-11.68],[7.895,-11.68],[9.774,-8.994],[7.114,-1.712],[8.571,-1.712],[9.708,1.934],[4.567,5.485],[2.048,7.226],[-3.877,11.319],[-6.955,9.193],[-6.226,6.24],[-8.574,6.24],[-10.535,3.847],[-9.553,-1.056],[-9.175,-2.939],[-8.54,-6.104],[-7.906,-9.27],[-6.866,-11.001]],"c":true}],"e":[{"i":[[-0.707,-0.023],[-0.488,-0.462],[0,0],[0.231,-0.312],[0,0],[0.264,0.25],[0,0],[0,0],[0,0],[1.089,0],[0,0],[0,1.031],[0,0],[0,0],[0,0],[0.264,0.25],[0,0],[-0.264,0.25],[0,0]],"o":[[0.646,0.021],[0,0],[0.264,0.25],[0,0],[-0.264,0.25],[0,0],[0,0],[0,0],[0,1.031],[0,0],[-1.089,0],[0,0],[0,0],[0,0],[-0.264,0.25],[0,0],[-0.264,-0.25],[0,0],[0.535,-0.506]],"v":[[0.084,-11.109],[1.856,-10.384],[11.791,-0.95],[11.824,-0.013],[11.329,0.456],[10.405,0.456],[10.372,0.425],[10.383,2.945],[10.405,8.016],[8.424,9.89],[-8.343,9.89],[-10.323,8.016],[-10.345,3.037],[-10.356,0.393],[-10.389,0.393],[-11.313,0.393],[-11.808,-0.075],[-11.808,-0.95],[-1.874,-10.384]],"c":true}]},{"i":{"x":0.75,"y":1},"o":{"x":0.25,"y":0},"t":12,"s":[{"i":[[-0.707,-0.023],[-0.488,-0.462],[0,0],[0.231,-0.312],[0,0],[0.264,0.25],[0,0],[0,0],[0,0],[1.089,0],[0,0],[0,1.031],[0,0],[0,0],[0,0],[0.264,0.25],[0,0],[-0.264,0.25],[0,0]],"o":[[0.646,0.021],[0,0],[0.264,0.25],[0,0],[-0.264,0.25],[0,0],[0,0],[0,0],[0,1.031],[0,0],[-1.089,0],[0,0],[0,0],[0,0],[-0.264,0.25],[0,0],[-0.264,-0.25],[0,0],[0.535,-0.506]],"v":[[0.084,-11.109],[1.856,-10.384],[11.791,-0.95],[11.824,-0.013],[11.329,0.456],[10.405,0.456],[10.372,0.425],[10.383,2.945],[10.405,8.016],[8.424,9.89],[-8.343,9.89],[-10.323,8.016],[-10.345,3.037],[-10.356,0.393],[-10.389,0.393],[-11.313,0.393],[-11.808,-0.075],[-11.808,-0.95],[-1.874,-10.384]],"c":true}],"e":[{"i":[[-0.707,-0.023],[-0.488,-0.462],[0,0],[0.231,-0.312],[0,0],[0.264,0.25],[0,0],[0,0],[0,0],[1.089,0],[0,0],[0,1.031],[0,0],[0,0],[0,0],[0.264,0.25],[0,0],[-0.264,0.25],[0,0]],"o":[[0.646,0.021],[0,0],[0.264,0.25],[0,0],[-0.264,0.25],[0,0],[0,0],[0,0],[0,1.031],[0,0],[-1.089,0],[0,0],[0,0],[0,0],[-0.264,0.25],[0,0],[-0.264,-0.25],[0,0],[0.535,-0.506]],"v":[[0.084,-11.109],[1.856,-10.384],[11.791,-0.95],[11.824,-0.013],[11.329,0.456],[10.405,0.456],[10.372,0.425],[10.383,2.945],[10.405,8.016],[8.424,9.89],[-8.343,9.89],[-10.323,8.016],[-10.345,3.037],[-10.356,0.393],[-10.389,0.393],[-11.313,0.393],[-11.808,-0.075],[-11.808,-0.95],[-1.874,-10.384]],"c":true}]},{"i":{"x":0.75,"y":1},"o":{"x":0.25,"y":0},"t":16,"s":[{"i":[[-0.707,-0.023],[-0.488,-0.462],[0,0],[0.231,-0.312],[0,0],[0.264,0.25],[0,0],[0,0],[0,0],[1.089,0],[0,0],[0,1.031],[0,0],[0,0],[0,0],[0.264,0.25],[0,0],[-0.264,0.25],[0,0]],"o":[[0.646,0.021],[0,0],[0.264,0.25],[0,0],[-0.264,0.25],[0,0],[0,0],[0,0],[0,1.031],[0,0],[-1.089,0],[0,0],[0,0],[0,0],[-0.264,0.25],[0,0],[-0.264,-0.25],[0,0],[0.535,-0.506]],"v":[[0.084,-11.109],[1.856,-10.384],[11.791,-0.95],[11.824,-0.013],[11.329,0.456],[10.405,0.456],[10.372,0.425],[10.383,2.945],[10.405,8.016],[8.424,9.89],[-8.343,9.89],[-10.323,8.016],[-10.345,3.037],[-10.356,0.393],[-10.389,0.393],[-11.313,0.393],[-11.808,-0.075],[-11.808,-0.95],[-1.874,-10.384]],"c":true}],"e":[{"i":[[-0.256,0.486],[-1.248,-0.063],[-0.604,-1.155],[-1.056,0.335],[0.852,-2.578],[-0.988,-0.502],[2.453,-1.239],[-0.341,-1.038],[2.624,0.837],[0.511,-0.971],[1.197,0.007],[0.632,1.208],[1.056,-0.335],[-0.852,2.612],[0.988,0.502],[-2.453,1.239],[0.341,1.038],[-2.624,-0.837],[-0.486,0.197]],"o":[[0.664,-1.261],[1.148,0.058],[0.509,0.972],[2.625,-0.832],[-0.343,1.037],[2.464,1.252],[-0.99,0.5],[0.847,2.58],[-1.056,-0.337],[-0.636,1.208],[-1.202,-0.007],[-0.509,-0.972],[-2.625,0.832],[0.339,-1.039],[-2.464,-1.252],[0.99,-0.5],[-0.847,-2.58],[0.528,0.168],[0.486,-0.197]],"v":[[-2.999,-10.982],[0.189,-12.773],[3.067,-10.948],[5.793,-9.843],[10.052,-5.625],[11.177,-2.946],[11.143,3.013],[10.018,5.692],[5.725,9.877],[2.999,10.982],[-0.031,12.777],[-3.067,10.948],[-5.793,9.843],[-10.052,5.625],[-11.177,2.946],[-11.143,-3.013],[-10.018,-5.692],[-5.725,-9.877],[-4.158,-9.939]],"c":true}]},{"i":{"x":0.75,"y":1},"o":{"x":0.25,"y":0},"t":24,"s":[{"i":[[-0.256,0.486],[-1.248,-0.063],[-0.604,-1.155],[-1.056,0.335],[0.852,-2.578],[-0.988,-0.502],[2.453,-1.239],[-0.341,-1.038],[2.624,0.837],[0.511,-0.971],[1.197,0.007],[0.632,1.208],[1.056,-0.335],[-0.852,2.612],[0.988,0.502],[-2.453,1.239],[0.341,1.038],[-2.624,-0.837],[-0.486,0.197]],"o":[[0.664,-1.261],[1.148,0.058],[0.509,0.972],[2.625,-0.832],[-0.343,1.037],[2.464,1.252],[-0.99,0.5],[0.847,2.58],[-1.056,-0.337],[-0.636,1.208],[-1.202,-0.007],[-0.509,-0.972],[-2.625,0.832],[0.339,-1.039],[-2.464,-1.252],[0.99,-0.5],[-0.847,-2.58],[0.528,0.168],[0.486,-0.197]],"v":[[-2.999,-10.982],[0.189,-12.773],[3.067,-10.948],[5.793,-9.843],[10.052,-5.625],[11.177,-2.946],[11.143,3.013],[10.018,5.692],[5.725,9.877],[2.999,10.982],[-0.031,12.777],[-3.067,10.948],[-5.793,9.843],[-10.052,5.625],[-11.177,2.946],[-11.143,-3.013],[-10.018,-5.692],[-5.725,-9.877],[-4.158,-9.939]],"c":true}],"e":[{"i":[[-0.256,0.486],[-1.248,-0.063],[-0.604,-1.155],[-1.056,0.335],[0.852,-2.578],[-0.988,-0.502],[2.453,-1.239],[-0.341,-1.038],[2.624,0.837],[0.511,-0.971],[1.197,0.007],[0.632,1.208],[1.056,-0.335],[-0.852,2.612],[0.988,0.502],[-2.453,1.239],[0.341,1.038],[-2.624,-0.837],[-0.486,0.197]],"o":[[0.664,-1.261],[1.148,0.058],[0.509,0.972],[2.625,-0.832],[-0.343,1.037],[2.464,1.252],[-0.99,0.5],[0.847,2.58],[-1.056,-0.337],[-0.636,1.208],[-1.202,-0.007],[-0.509,-0.972],[-2.625,0.832],[0.339,-1.039],[-2.464,-1.252],[0.99,-0.5],[-0.847,-2.58],[0.528,0.168],[0.486,-0.197]],"v":[[-2.999,-10.982],[0.189,-12.773],[3.067,-10.948],[5.793,-9.843],[10.052,-5.625],[11.177,-2.946],[11.143,3.013],[10.018,5.692],[5.725,9.877],[2.999,10.982],[-0.031,12.777],[-3.067,10.948],[-5.793,9.843],[-10.052,5.625],[-11.177,2.946],[-11.143,-3.013],[-10.018,-5.692],[-5.725,-9.877],[-4.158,-9.939]],"c":true}]},{"i":{"x":0.75,"y":1},"o":{"x":0.25,"y":0},"t":28,"s":[{"i":[[-0.256,0.486],[-1.248,-0.063],[-0.604,-1.155],[-1.056,0.335],[0.852,-2.578],[-0.988,-0.502],[2.453,-1.239],[-0.341,-1.038],[2.624,0.837],[0.511,-0.971],[1.197,0.007],[0.632,1.208],[1.056,-0.335],[-0.852,2.612],[0.988,0.502],[-2.453,1.239],[0.341,1.038],[-2.624,-0.837],[-0.486,0.197]],"o":[[0.664,-1.261],[1.148,0.058],[0.509,0.972],[2.625,-0.832],[-0.343,1.037],[2.464,1.252],[-0.99,0.5],[0.847,2.58],[-1.056,-0.337],[-0.636,1.208],[-1.202,-0.007],[-0.509,-0.972],[-2.625,0.832],[0.339,-1.039],[-2.464,-1.252],[0.99,-0.5],[-0.847,-2.58],[0.528,0.168],[0.486,-0.197]],"v":[[-2.999,-10.982],[0.189,-12.773],[3.067,-10.948],[5.793,-9.843],[10.052,-5.625],[11.177,-2.946],[11.143,3.013],[10.018,5.692],[5.725,9.877],[2.999,10.982],[-0.031,12.777],[-3.067,10.948],[-5.793,9.843],[-10.052,5.625],[-11.177,2.946],[-11.143,-3.013],[-10.018,-5.692],[-5.725,-9.877],[-4.158,-9.939]],"c":true}],"e":[{"i":[[0,0],[-4.856,0],[-1.703,-1.048],[-0.336,0.242],[-1.072,-2.358],[-0.568,-0.524],[2.186,-0.988],[0.925,0.907],[1.198,-1.194],[0.377,-0.287],[2.837,0],[1.886,1.48],[0.32,0.326],[0.55,1.596],[1.913,0.867],[-0.568,0.524],[-1.24,2.701],[-0.694,-0.484],[-0.313,-0.282]],"o":[[1.703,-1.068],[4.898,0],[0,0],[0.694,-0.484],[1.24,2.721],[0.589,0.544],[-1.934,0.867],[-0.562,1.631],[-0.332,0.331],[-1.873,1.427],[-2.907,0],[-0.363,-0.285],[-1.156,-1.179],[-0.988,0.967],[-2.207,-0.988],[0.589,-0.524],[1.072,-2.378],[0.158,0.121],[0.313,0.282]],"v":[[-9.091,-6.662],[-0.051,-9],[9.031,-6.662],[10.502,-7.912],[13.823,-6.279],[17.544,-0.736],[16.325,2.409],[10.859,1.502],[8.199,5.793],[7.135,6.72],[0.012,9],[-7.234,6.631],[-8.258,5.714],[-10.836,1.502],[-16.301,2.409],[-17.562,-0.736],[-13.842,-6.259],[-10.499,-7.912],[-9.677,-7.196]],"c":true}]},{"i":{"x":0.75,"y":1},"o":{"x":0.25,"y":0},"t":36,"s":[{"i":[[0,0],[-4.856,0],[-1.703,-1.048],[-0.336,0.242],[-1.072,-2.358],[-0.568,-0.524],[2.186,-0.988],[0.925,0.907],[1.198,-1.194],[0.377,-0.287],[2.837,0],[1.886,1.48],[0.32,0.326],[0.55,1.596],[1.913,0.867],[-0.568,0.524],[-1.24,2.701],[-0.694,-0.484],[-0.313,-0.282]],"o":[[1.703,-1.068],[4.898,0],[0,0],[0.694,-0.484],[1.24,2.721],[0.589,0.544],[-1.934,0.867],[-0.562,1.631],[-0.332,0.331],[-1.873,1.427],[-2.907,0],[-0.363,-0.285],[-1.156,-1.179],[-0.988,0.967],[-2.207,-0.988],[0.589,-0.524],[1.072,-2.378],[0.158,0.121],[0.313,0.282]],"v":[[-9.091,-6.662],[-0.051,-9],[9.031,-6.662],[10.502,-7.912],[13.823,-6.279],[17.544,-0.736],[16.325,2.409],[10.859,1.502],[8.199,5.793],[7.135,6.72],[0.012,9],[-7.234,6.631],[-8.258,5.714],[-10.836,1.502],[-16.301,2.409],[-17.562,-0.736],[-13.842,-6.259],[-10.499,-7.912],[-9.677,-7.196]],"c":true}],"e":[{"i":[[0,0],[-4.856,0],[-1.703,-1.048],[-0.336,0.242],[-1.072,-2.358],[-0.568,-0.524],[2.186,-0.988],[0.925,0.907],[1.198,-1.194],[0.377,-0.287],[2.837,0],[1.886,1.48],[0.32,0.326],[0.55,1.596],[1.913,0.867],[-0.568,0.524],[-1.24,2.701],[-0.694,-0.484],[-0.313,-0.282]],"o":[[1.703,-1.068],[4.898,0],[0,0],[0.694,-0.484],[1.24,2.721],[0.589,0.544],[-1.934,0.867],[-0.562,1.631],[-0.332,0.331],[-1.873,1.427],[-2.907,0],[-0.363,-0.285],[-1.156,-1.179],[-0.988,0.967],[-2.207,-0.988],[0.589,-0.524],[1.072,-2.378],[0.158,0.121],[0.313,0.282]],"v":[[-9.091,-6.662],[-0.051,-9],[9.031,-6.662],[10.502,-7.912],[13.823,-6.279],[17.544,-0.736],[16.325,2.409],[10.859,1.502],[8.199,5.793],[7.135,6.72],[0.012,9],[-7.234,6.631],[-8.258,5.714],[-10.836,1.502],[-16.301,2.409],[-17.562,-0.736],[-13.842,-6.259],[-10.499,-7.912],[-9.677,-7.196]],"c":true}]},{"i":{"x":0.75,"y":1},"o":{"x":0.25,"y":0},"t":40,"s":[{"i":[[0,0],[-4.856,0],[-1.703,-1.048],[-0.336,0.242],[-1.072,-2.358],[-0.568,-0.524],[2.186,-0.988],[0.925,0.907],[1.198,-1.194],[0.377,-0.287],[2.837,0],[1.886,1.48],[0.32,0.326],[0.55,1.596],[1.913,0.867],[-0.568,0.524],[-1.24,2.701],[-0.694,-0.484],[-0.313,-0.282]],"o":[[1.703,-1.068],[4.898,0],[0,0],[0.694,-0.484],[1.24,2.721],[0.589,0.544],[-1.934,0.867],[-0.562,1.631],[-0.332,0.331],[-1.873,1.427],[-2.907,0],[-0.363,-0.285],[-1.156,-1.179],[-0.988,0.967],[-2.207,-0.988],[0.589,-0.524],[1.072,-2.378],[0.158,0.121],[0.313,0.282]],"v":[[-9.091,-6.662],[-0.051,-9],[9.031,-6.662],[10.502,-7.912],[13.823,-6.279],[17.544,-0.736],[16.325,2.409],[10.859,1.502],[8.199,5.793],[7.135,6.72],[0.012,9],[-7.234,6.631],[-8.258,5.714],[-10.836,1.502],[-16.301,2.409],[-17.562,-0.736],[-13.842,-6.259],[-10.499,-7.912],[-9.677,-7.196]],"c":true}],"e":[{"i":[[-0.715,0],[0,0],[0,0],[0.477,-1.305],[0,0],[0,0],[1.614,-1.115],[0,0],[0,0],[0,0],[-0.442,1.788],[0,0],[0,0],[0,0],[-0.248,1.238],[0,0],[0,0],[0,0],[-0.521,0.427]],"o":[[0,0],[0,0],[1.389,0],[0,0],[0,0],[1.962,0],[0,0],[0,0],[0,0],[-1.515,1.047],[0,0],[0,0],[0,0],[-1.262,0],[0,0],[0,0],[0,0],[0.141,-0.701],[0.521,-0.427]],"v":[[-4.965,-11.68],[0.862,-11.68],[7.895,-11.68],[9.774,-8.994],[7.114,-1.712],[8.571,-1.712],[9.708,1.934],[4.567,5.485],[2.048,7.226],[-3.877,11.319],[-6.955,9.193],[-6.27,6.42],[-6.226,6.24],[-8.574,6.24],[-10.535,3.847],[-9.553,-1.056],[-9.175,-2.939],[-7.906,-9.27],[-6.866,-11.001]],"c":true}]},{"t":48}],"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.894117647059,0.894117647059,0.894117647059,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"组 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":309,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"局部加载,默认,暗黑=OFF","td":1,"refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[84,84,0],"ix":2,"l":2},"a":{"a":0,"k":[28,28,0],"ix":1,"l":2},"s":{"a":0,"k":[300,300,100],"ix":6,"l":2}},"ao":0,"w":56,"h":56,"ip":0,"op":309,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"局部加载,默认,暗黑=OFF","tt":1,"refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[84,84,0],"ix":2,"l":2},"a":{"a":0,"k":[28,28,0],"ix":1,"l":2},"s":{"a":0,"k":[300,300,100],"ix":6,"l":2}},"ao":0,"ef":[{"ty":29,"nm":"高斯模糊","np":5,"mn":"ADBE Gaussian Blur 2","ix":1,"en":1,"ef":[{"ty":0,"nm":"模糊度","mn":"ADBE Gaussian Blur 2-0001","ix":1,"v":{"a":0,"k":20,"ix":1}},{"ty":7,"nm":"模糊方向","mn":"ADBE Gaussian Blur 2-0002","ix":2,"v":{"a":0,"k":1,"ix":2}},{"ty":7,"nm":"重复边缘像素","mn":"ADBE Gaussian Blur 2-0003","ix":3,"v":{"a":0,"k":0,"ix":3}}]}],"w":56,"h":56,"ip":0,"op":309,"st":0,"bm":0}],"markers":[]} | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议提高动画的可见度和性能
- 当前填充颜色值
[0.894,0.894,0.894]在浅色背景上可能不够明显，建议调整为更深的颜色 - 高斯模糊效果会增加渲染负担，建议简化或移除
- 可以复用 global.json 的优化建议，减小画布尺寸和简化路径数据
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (6)
src/packages/lottie/mp.tsx (1)
26-29: 优化速度设置逻辑建议添加速度范围验证和性能优化：
const setSpeed = () => { + if (!animation.current) return + const validSpeed = Math.max(-3, Math.min(3, speed)) // 限制速度范围 - animation.current.setSpeed(Math.abs(speed)) - animation.current.setDirection(speed > 0 ? 1 : -1) + animation.current.setSpeed(Math.abs(validSpeed)) + animation.current.setDirection(validSpeed > 0 ? 1 : -1) }src/packages/loading/loading.taro.tsx (5)
8-12: 建议优化导入路径的组织方式建议将导入语句按以下方式组织：
- 将相对路径
../lottie/index.taro改为使用别名路径@/packages/lottie- 将类型导入和组件导入分开组织
-import Lottie from '../lottie/index.taro' +import Lottie from '@/packages/lottie'
Line range hint
15-30: 建议将代码注释改为英文为了保持代码库的一致性和国际化，建议将中文注释转换为英文：
-// 对比一下,个人感觉还是Loading1比较好看一些,所以用它作为了默认的loading图标 +// Loading1 looks better, so it's used as the default loading icon -// 方便以后扩展设置为键值对形式 +// Key-value pair format for future extensibility
48-48: 建议使用类型安全的 props 合并当前的 props 合并可能会导致类型丢失。建议使用类型安全的方式合并 props：
- const mergedLottieProps = mergeProps(defaultLottieProps, lottieProps) + const mergedLottieProps = mergeProps<typeof defaultLottieProps>(defaultLottieProps, lottieProps || {})
66-69: 建议优化条件类名逻辑当前的类名判断逻辑可以更简洁。建议使用三元运算符：
- const iconboxClassName = () => { - if (rest.type === 'lottie') return `${classPrefix}-lottie-box` - return `${classPrefix}-icon-box` - } + const iconboxClassName = () => + `${classPrefix}-${rest.type === 'lottie' ? 'lottie' : 'icon'}-box`
31-86: 建议添加错误处理和加载状态验证组件缺少必要的错误处理机制，建议：
- 添加对 jsonData 加载失败的处理
- 验证 Lottie 动画是否正确加载
- 提供加载失败的回调函数
建议添加以下功能：
interface LoadingProps { onLottieError?: (error: Error) => void; onLottieLoad?: () => void; fallbackIcon?: React.ReactNode; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (9)
package.json(2 hunks)packages/nutui-taro-demo/package.json(0 hunks)src/packages/loading/demos/h5/demo1.tsx(1 hunks)src/packages/loading/demos/taro/demo1.tsx(1 hunks)src/packages/loading/loading.taro.tsx(2 hunks)src/packages/loading/loading.tsx(2 hunks)src/packages/loading/types.ts(1 hunks)src/packages/lottie/mp.tsx(1 hunks)src/packages/lottie/types.ts(1 hunks)
💤 Files with no reviewable changes (1)
- packages/nutui-taro-demo/package.json
🚧 Files skipped from review as they are similar to previous changes (4)
- src/packages/lottie/types.ts
- src/packages/loading/types.ts
- src/packages/loading/demos/h5/demo1.tsx
- package.json
🔇 Additional comments (4)
src/packages/loading/demos/taro/demo1.tsx (2)
8-13: 重复的加载状态展示
两个基础加载状态（circular和spinner）的展示方式相似，建议合并展示。
- <Cell>
- <Loading type="circular" />
- </Cell>
- <Cell>
- <Loading type="spinner" />
- </Cell>
+ {['circular', 'spinner'].map((type) => (
+ <Cell key={type}>
+ <Loading type={type} />
+ </Cell>
+ ))}14-21: 验证 Lottie 动画配置
两个 Lottie 动画示例中：
- 第一个示例使用了默认的自动播放配置
- 第二个示例禁用了自动播放和循环，但没有提供触发播放的交互方式
建议：
- 添加控制按钮来演示手动播放功能
- 为了更好的演示效果，建议在组件中添加播放/暂停的切换功能
Also applies to: 22-35
src/packages/loading/loading.taro.tsx (2)
45-47: 建议修复类型定义而不是使用 @ts-ignore
建议修改代码如下：
- // @ts-ignore
- const loadingLottieRef: React.MutableRefObject<LottieProps | null> = useRef()
+ const loadingLottieRef = useRef<LottieProps | null>(null)55-61: 🛠️ Refactor suggestion
建议优化 Lottie 组件的类型处理
当前的实现在 ref 和 props 的类型处理上存在问题。建议：
- 明确定义 Lottie 组件的 props 类型
- 移除 @ts-ignore 注解
- 确保 ref 的类型与 Lottie 组件匹配
<Lottie
{...mergedLottieProps}
- // @ts-ignore
- ref={loadingLottieRef}
+ ref={loadingLottieRef as React.Ref<LottieProps>}
source={rest.jsonData}
/>Likely invalid or redundant comment.
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (5)
src/packages/configprovider/types.ts (1)
11-11: 命名约定需要保持一致变量名
nutuiColorPrimarySpecialdisabled的命名方式与其他颜色变量不一致。建议修改为nutuiColorPrimarySpecialDisabled以保持命名规范。- | 'nutuiColorPrimarySpecialdisabled' + | 'nutuiColorPrimarySpecialDisabled'src/packages/lottie/web.taro.tsx (2)
5-20: 建议优化组件实现
ref类型应该使用ForwardedRef<LottieRefCurrentProps>而不是any- 建议为必需的属性添加默认值
- 可以使用解构赋值来简化代码
建议按照以下方式优化：
-export const Lottie = React.forwardRef( - (props: Partial<LottieProps>, ref: any) => { +export const Lottie = React.forwardRef<LottieRefCurrentProps, Partial<LottieProps>>( + ({ style, source, autoPlay = true, ...rest }, ref) => { const loadingLottieRef = useRef<LottieRefCurrentProps>(null) - const { style, source, autoPlay, ...rest } = props useImperativeHandle(ref, () => { return loadingLottieRef.current }) return ( <LottieReact {...rest} lottieRef={loadingLottieRef} animationData={source} style={style} + autoplay={autoPlay} /> ) } )
1-22: 建议添加错误处理和文档注释
- 建议添加对 source 属性的验证
- 建议添加 JSDoc 文档注释，说明组件的用途和属性
建议添加以下内容：
+/** + * Lottie 动画组件 + * @component NutLottie + * @param {Object} props - 组件属性 + * @param {Object} props.source - Lottie 动画数据 + * @param {boolean} [props.autoPlay=true] - 是否自动播放 + * @param {Object} [props.style] - 自定义样式 + */ export const Lottie = React.forwardRef<LottieRefCurrentProps, Partial<LottieProps>>( ({ style, source, autoPlay = true, ...rest }, ref) => { + if (!source) { + console.warn('NutLottie: source is required') + return null + } // ... rest of the implementation } )src/packages/lottie/mp.taro.tsx (2)
17-17: 变量 inited 未被使用，可以考虑删除变量
inited被赋值但未在代码中使用，建议删除以简化代码，提高可读性。可以删除以下代码：
- const inited = useRef(false) ... - inited.current = trueAlso applies to: 69-69
13-13: 完善 ref 的类型定义当前
ref的类型被定义为any，建议根据实际情况为其添加准确的类型定义，以增强 TypeScript 的类型检查能力和代码的可维护性。可以参考以下修改：
- export const Lottie = React.forwardRef((props: LottieProps, ref: any) => { + export const Lottie = React.forwardRef((props: LottieProps, ref: React.Ref<any>) => {或者更进一步，明确
ref的具体类型。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (7)
package.json(3 hunks)src/packages/configprovider/types.ts(3 hunks)src/packages/lottie/index.taro.ts(1 hunks)src/packages/lottie/mp.taro.tsx(1 hunks)src/packages/lottie/web.taro.tsx(1 hunks)vite.config.ts(1 hunks)vitest.setup.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- vitest.setup.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- src/packages/lottie/index.taro.ts
- package.json
🔇 Additional comments (5)
src/packages/configprovider/types.ts (2)
545-553: Popover 相关变量定义完整且合理
新增的 Popover 组件样式变量定义清晰，覆盖了必要的样式属性，包括字体、背景色、文本颜色、悬停状态等。
817-817: Lottie 动画背景变量集成正确
新增的 nutuiLoadingLottieBackground 变量与 PR 目标一致，用于支持 Lottie 动画组件的背景样式配置。
src/packages/lottie/web.taro.tsx (2)
22-22: 组件命名符合规范
组件的 displayName 设置正确，便于调试和开发。
1-22: 验证组件在 Taro 环境中的兼容性
由于文件名包含 .taro.tsx，需要确保组件在 Taro 环境中能正常运行。
✅ Verification successful
Let me gather more information about the Taro implementation and dependencies.
Taro 环境兼容性已得到验证
代码已经完全适配了 Taro 环境：
- 通过
index.taro.ts根据环境变量TARO_ENV自动选择合适的实现 - H5 环境使用
web.taro.tsx中基于lottie-react的实现 - 小程序环境使用
mp.taro.tsx中基于lottie-miniprogram的实现 - 项目已正确配置了所需依赖：
lottie-react、lottie-miniprogram和 Taro 相关包
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否有 Taro 相关的配置和依赖
rg -l "lottie-react" package.json
rg -l "@tarojs" package.json
rg -l "taro" tsconfig.json
# 检查是否有其他 Taro 组件的实现方式
fd -e tsx -e ts . | rg "\.taro\."
Length of output: 11401
Script:
#!/bin/bash
# Check package.json for dependencies and configurations
cat package.json | jq '.dependencies, .devDependencies'
# Check if there's a Taro specific implementation for lottie
cat src/packages/lottie/mp.taro.tsx
# Check if there are any Taro specific configurations
cat src/packages/lottie/index.taro.ts
Length of output: 6823
vite.config.ts (1)
91-91: 验证 vitest.setup.ts 文件的存在和正确配置
您在测试配置中添加了 setupFiles 选项，请确保 vitest.setup.ts 文件存在且配置正确，以避免测试运行时发生错误。
可以运行以下脚本来验证 vitest.setup.ts 文件是否存在：
✅ Verification successful
vitest.setup.ts 文件已正确配置
文件存在且配置正确，它导入了 vitest-canvas-mock 包用于测试环境中的 canvas 模拟。这个配置是有效的，不需要进行任何更改。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查 vitest.setup.ts 文件是否存在
# 测试：查找 vitest.setup.ts 文件
# 预期结果：找到 vitest.setup.ts 文件
if [ -f "./vitest.setup.ts" ]; then
echo "vitest.setup.ts 文件存在。"
else
echo "vitest.setup.ts 文件不存在，请确认文件路径。"
fi
Length of output: 83
Script:
#!/bin/bash
# 检查 vitest.setup.ts 文件的内容
cat ./vitest.setup.ts
Length of output: 51
Comment on lines
+1
to
+3
| import LottieReact, { LottieRefCurrentProps } from 'lottie-react' | ||
| import React, { useImperativeHandle, useRef } from 'react' | ||
| import { LottieProps } from './types' |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议改进类型导入和声明
建议对 ref 类型进行明确定义，避免使用 any 类型。另外，建议导出 LottieProps 类型以便使用方参考。
建议按照以下方式修改：
import LottieReact, { LottieRefCurrentProps } from 'lottie-react'
import React, { useImperativeHandle, useRef } from 'react'
-import { LottieProps } from './types'
+import type { LottieProps } from './types'
+export type { LottieProps }📝 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.
Suggested change
| import LottieReact, { LottieRefCurrentProps } from 'lottie-react' | |
| import React, { useImperativeHandle, useRef } from 'react' | |
| import { LottieProps } from './types' | |
| import LottieReact, { LottieRefCurrentProps } from 'lottie-react' | |
| import React, { useImperativeHandle, useRef } from 'react' | |
| import type { LottieProps } from './types' | |
| export type { LottieProps } |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #2867 +/- ##
=============================================
+ Coverage 85.88% 85.92% +0.04%
=============================================
Files 271 273 +2
Lines 18429 18487 +58
Branches 2726 2735 +9
=============================================
+ Hits 15827 15885 +58
Misses 2597 2597
Partials 5 5 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (1)
src/packages/loading/__test__/loading.spec.tsx(2 hunks)
🔇 Additional comments (1)
src/packages/loading/__test__/loading.spec.tsx (1)
7-7: 导入语句结构清晰！
使用别名路径(@/)导入动画数据是个好的实践，便于后期维护。
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/packages/lottie/doc.md (1)
5-5: 文档标题层级需要调整标题层级应该逐级递增，不应该从 h1 直接跳到 h3。
建议修改如下：
-### 引入 +## 引入🧰 Tools
🪛 Markdownlint (0.37.0)
5-5: Expected: h2; Actual: h3
Heading levels should only increment by one level at a time(MD001, heading-increment)
src/packages/lottie/mp.taro.tsx (2)
59-74: 建议优化动画实例的清理逻辑当组件卸载时，建议在销毁动画实例之前先暂停动画，以避免潜在的内存泄漏。
useUnload(() => { + animation.current?.pause?.() onComplete && animation.current && animation.current.removeEventListener('complete', onComplete) animation.current && animation.current.destroy() })
79-84: 建议使用可选链优化清理逻辑使用可选链可以使代码更简洁。
useUnload(() => { - onComplete && - animation.current && - animation.current.removeEventListener('complete', onComplete) - animation.current && animation.current.destroy() + onComplete && animation.current?.removeEventListener?.('complete', onComplete) + animation.current?.destroy?.() })🧰 Tools
🪛 Biome (1.9.4)
[error] 83-83: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
package.json(3 hunks)src/config.json(2 hunks)src/packages/configprovider/types.ts(1 hunks)src/packages/loading/loading.tsx(2 hunks)src/packages/lottie/doc.md(1 hunks)src/packages/lottie/doc.taro.md(1 hunks)src/packages/lottie/index.taro.ts(1 hunks)src/packages/lottie/mp.taro.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/packages/configprovider/types.ts
- src/packages/lottie/index.taro.ts
🧰 Additional context used
🪛 Markdownlint (0.37.0)
src/packages/lottie/doc.md
5-5: Expected: h2; Actual: h3
Heading levels should only increment by one level at a time
(MD001, heading-increment)
src/packages/lottie/doc.taro.md
5-5: Expected: h2; Actual: h3
Heading levels should only increment by one level at a time
(MD001, heading-increment)
🪛 Biome (1.9.4)
src/packages/lottie/mp.taro.tsx
[error] 83-83: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (9)
src/packages/lottie/doc.md (1)
43-44:
Props 表格中的默认值需要修正
source 和 loop 属性的默认值似乎不正确：
source的默认值不应该是circularloop的默认值不应该是horizontal
建议修改如下：
-| source | 包含导出动画数据的 JSON 对象 | `Object` | `circular` |
-| loop | 动画是否循环播放，设置为数字时代表循环次数 | `boolean \| number` | `horizontal` |
+| source | 包含导出动画数据的 JSON 对象 | `Object` | `-` |
+| loop | 动画是否循环播放，设置为数字时代表循环次数 | `boolean \| number` | `true` |Likely invalid or redundant comment.
src/packages/lottie/doc.taro.md (1)
70-70: 🛠️ Refactor suggestion
需要删除未完成的表格
文档末尾存在一个未完成的表格定义，应该删除。
-| 方法名 | 说明 | 参数 |Likely invalid or redundant comment.
src/packages/loading/loading.tsx (2)
52-63: 🛠️ Refactor suggestion
优化条件判断逻辑
jsonData 的检查应该在 type === 'lottie' 的条件内部进行，并且在数据缺失时应该提供一个后备方案。
建议重构如下：
const getLoadingIcon = () => {
- if (!rest.jsonData) {
- console.warn('Lottie animation requires jsonData prop')
- }
if (rest.type === 'lottie') {
+ if (!rest.jsonData) {
+ console.warn('Lottie animation requires jsonData prop')
+ return <LoadingIcon className={`${classPrefix}-icon`} />
+ }
return (
<Lottie
{...mergedLottieProps}Likely invalid or redundant comment.
43-46: 🛠️ Refactor suggestion
需要清理注释掉的代码和移除 @ts-ignore
代码中存在注释掉的代码和 @ts-ignore 标记，这不是一个好的实践。
建议直接使用正确的类型定义：
- const loadingLottieRef = useRef<LottieProps | null>(null)
- // @ts-ignore
- // const loadingLottieRef: React.MutableRefObject<LottieProps | null> =
- // useRef()
+ const loadingLottieRef = useRef<LottieProps>(null)Likely invalid or redundant comment.
src/packages/lottie/mp.taro.tsx (3)
1-12: 代码结构清晰，导入合理！
组件使用了 forwardRef 并正确导入了所需的 Taro API 和 lottie-miniprogram 库。
19-32: 属性解构合理，速度控制逻辑完善！
props 的默认值设置合理，setSpeed 函数已包含对 animation.current 的空值检查。
33-57: Canvas 设置和 ref 处理得当！
- useImperativeHandle 正确处理了空值情况
- Canvas 缩放正确考虑了设备像素比
package.json (1)
116-117: 请验证 lottie 依赖的兼容性
新增了两个 lottie 相关的依赖：
- lottie-miniprogram: ^1.0.12
- lottie-react: ^2.4.0
建议验证这些版本在目标平台上的兼容性。
✅ Verification successful
Let me gather more information about the dependencies and their usage.
Let me check one more aspect about the actual usage of these dependencies.
Lottie 依赖版本兼容性验证完成
根据验证结果，当前使用的 Lottie 依赖是安全且兼容的：
lottie-react@^2.4.0和lottie-miniprogram@^1.0.12均未发现安全漏洞- 代码中正确区分了 Web 和小程序环境的使用场景：
- Web 环境使用
lottie-react - 小程序环境使用
lottie-miniprogram
- Web 环境使用
- 项目配置中小程序基础库版本（libVersion: 2.26.0+）支持这些依赖的运行
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查 package-lock.json 中是否存在这些依赖的已知问题
if [ -f "package-lock.json" ]; then
echo "Checking lottie dependencies in package-lock.json..."
jq '.packages | .[] | select(.name | contains("lottie"))' package-lock.json
fi
# 检查是否有相关的 GitHub security advisories
gh api graphql -f query='
{
securityVulnerabilities(first: 5, ecosystem: NPM, package: "lottie-miniprogram") {
nodes {
advisory {
summary
severity
}
vulnerableVersionRange
}
}
}'
Length of output: 307
Script:
#!/bin/bash
# 检查 lottie 相关依赖的使用情况
echo "检查 lottie 相关组件的使用..."
rg -l "lottie" --type js --type jsx --type ts --type tsx
# 检查 lottie-react 的安全公告
gh api graphql -f query='
{
securityVulnerabilities(first: 5, ecosystem: NPM, package: "lottie-react") {
nodes {
advisory {
summary
severity
}
vulnerableVersionRange
}
}
}'
# 检查项目的目标平台配置
echo "检查项目配置..."
fd "tsconfig|babel\.config|webpack\.config" --type f --exec cat {}
Length of output: 6690
Script:
#!/bin/bash
# 检查 lottie 相关组件的具体使用方式
echo "检查 lottie 组件的使用场景..."
rg "from ['\"]lottie-" -B 1 -A 5
# 检查是否有小程序相关的配置文件
echo "检查小程序配置..."
fd "project\.config\.json|app\.config\.ts" --type f --exec cat {}
Length of output: 4351
src/config.json (1)
1055-1065: 组件配置完善！
Lottie 组件的配置已正确添加到展示组件分类中，包含了所有必要的字段。
| | 属性 | 说明 | 类型 | 默认值 | | ||
| | --- | --- | --- | --- | | ||
| | source | 包含导出动画数据的 JSON 对象 | `Object` | `circular` | | ||
| | loop | loading图标和文字的排列方式 | `boolean \| number` | `horizontal` | |
There was a problem hiding this comment.
需要修正 loop 属性的描述
loop 属性的描述文本似乎是从 Loading 组件复制来的，需要修正。
建议修改如下：
-| loop | loading图标和文字的排列方式 | `boolean \| number` | `horizontal` |
+| loop | 动画是否循环播放，设置为数字时代表循环次数 | `boolean \| number` | `true` |📝 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.
Suggested change
| | loop | loading图标和文字的排列方式 | `boolean \| number` | `horizontal` | | |
| | loop | 动画是否循环播放，设置为数字时代表循环次数 | `boolean \| number` | `true` | |
|
loading mp下： web H5 下： |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
文档
样式
修复