feat(v14): indicator adaptation #2746
Conversation
Walkthrough此次更改主要集中在 Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## V3.0 #2746 +/- ##
=======================================
Coverage 83.99% 83.99%
=======================================
Files 221 221
Lines 17878 17878
Branches 2676 2676
=======================================
Hits 15016 15016
Misses 2857 2857
Partials 5 5 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (22)
src/packages/indicator/demos/h5/demo1.tsx (1)
Line range hint
4-13: 建议扩展示例以展示更多功能当前示例过于简单，建议：
- 展示新增的 color 和 type 属性的使用
- 添加常见的使用场景示例
- 展示不同状态的切换效果
建议按如下方式扩展示例：
const Demo1 = () => { return ( <> <Cell> <Indicator total={3} current={0} /> </Cell> + <Cell> + <Indicator total={3} current={1} color="#f30" /> + </Cell> + <Cell> + <Indicator total={5} current={2} type="dot" /> + </Cell> </> ) }src/packages/indicator/demos/taro/demo1.tsx (1)
6-10: 建议增加更多示例以展示新特性当前示例过于简单，建议添加以下内容：
- 展示新增的
color属性（primary/white）的使用- 展示新增的
type属性（anchor/slide）的使用- 添加不同
current值的示例以展示指示器的状态变化建议参考以下代码改进示例：
const Demo1 = () => { return ( <> <Cell> - <Indicator total={3} current={0} /> + <Indicator total={3} current={0} type="anchor" color="primary" /> + </Cell> + <Cell> + <Indicator total={3} current={1} type="slide" color="white" /> + </Cell> + <Cell> + <Indicator total={3} current={2} type="anchor" color="primary" /> </Cell> </> ) }src/packages/indicator/demo.tsx (2)
44-49: 建议优化示例代码的展示顺序新增的白色主题和类型示例被插入在基础用法之后，建议考虑将相关的示例代码放在一起，以提供更连贯的文档体验。例如：
- 基础用法
- 类型示例
- 主题相关（白色主题）
- 自定义相关
- 布局相关（竖向展示）
需要补充测试用例以确保组件质量
Demo5 和 Demo6 的实现已经完成并且在文档中有相应说明，但缺少测试用例覆盖。建议：
- 需要为 Demo5（白色指示器）添加测试用例，验证 color="white" 属性的正确性
- 需要为 Demo6（滑动类型）添加测试用例，验证 type="slide" 属性的正确性
- 建议参考其他组件的测试方案，在
src/packages/indicator/__tests__目录下添加相应的测试文件🔗 Analysis chain
Line range hint
1-61: 验证新增示例的完整性需要确认 Demo5 和 Demo6 的实现是否包含了必要的测试用例和文档说明。
Let me verify if there are any existing test files for the Indicator component to understand the testing approach.
Let me check the content of the documentation to see if it covers the new demos.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 检查新增示例组件的实现和文档 for demo in demo5 demo6; do echo "Checking implementation of $demo:" cat "src/packages/indicator/demos/h5/${demo}.tsx" 2>/dev/null || echo "Missing implementation file" echo "Checking test coverage:" find "src/packages/indicator/__tests__" -type f -name "${demo}.spec.*" 2>/dev/null || echo "Missing test file" doneLength of output: 1122
Script:
#!/bin/bash # Check existing test files for Indicator component echo "Checking existing test files:" find src/packages/indicator/__tests__ -type f -name "*.spec.*" 2>/dev/null || echo "No test files found" # Check if there's documentation for the component echo -e "\nChecking documentation:" find src/packages/indicator -type f -name "*.md" 2>/dev/null || echo "No documentation found"Length of output: 433
Script:
#!/bin/bash # Check documentation content echo "Checking Chinese documentation content:" cat src/packages/indicator/doc.md echo -e "\nChecking if demos are referenced in documentation:" grep -A 5 "demo5\|demo6" src/packages/indicator/doc.md || echo "New demos not found in documentation"Length of output: 1771
src/packages/indicator/doc.md (2)
21-36: 新增的示例部分需要补充说明文字新增的"白色"和"类型"示例部分缺少对功能和使用场景的具体说明，建议为每个示例添加简要描述，帮助用户理解这些新特性的应用场景。
建议在示例代码前添加说明文字，例如：
### 白色 + 在深色背景下，可以使用白色主题的指示器来获得更好的视觉效果。 :::demo ... ### 类型 + 指示器支持两种交互类型：锚点（anchor）和滑动（slide），可根据具体场景选择合适的交互方式。 :::demo
67-71: 属性表格的描述需要更详细Props 表格中的新属性
color和type的说明过于简单，建议补充更多使用细节和注意事项。建议修改为：
| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | current | 当前页，从0开始计数 | `number` | `0` | | total | 总页数，至少为2 | `number` | `2` | | direction | 方向，默认为水平方向，可选垂直方向 | `horizontal` \| `vertical` | `horizontal` | -| color | 颜色 | `primary` \| `white` | `primary` | +| color | 指示器主题颜色，primary 用于浅色背景，white 用于深色背景 | `primary` \| `white` | `primary` | -| type | 交互类型 | `anchor` \| `slide` | `anchor` | +| type | 交互类型，anchor 为点击切换，slide 为滑动切换 | `anchor` \| `slide` | `anchor` |src/packages/indicator/doc.zh-TW.md (2)
21-36: 保持文档语言一致性文档是繁体中文（zh-TW）版本，但新增的标题"白色"和"类型"使用了简体中文。建议修改为繁体中文：
- "白色" -> "白色"（已是繁体）
- "类型" -> "類型"
83-86: 建议补充设计变量说明CSS 变量使用了设计系统的标准变量（如
$radius-xxs、$spacing-xxxs），建议添加这些设计变量的具体数值说明，以便开发者更好地理解实际效果。-| \--nutui-indicator-border-radius | 指示器焦點時的border值 | `$radius-xxs` | +| \--nutui-indicator-border-radius | 指示器焦點時的border值 | `$radius-xxs` (2px) | -| \--nutui-indicator-dot-margin | 指示器橫向時的margin值 | `$spacing-xxxs` | +| \--nutui-indicator-dot-margin | 指示器橫向時的margin值 | `$spacing-xxxs` (2px) |src/packages/indicator/doc.taro.md (2)
21-36: 建议为新增的章节添加说明文字新增的"白色"和"类型"章节缺少对功能的具体描述，建议添加说明文字以帮助用户理解这些特性的使用场景和目的。
建议在示例代码之前添加说明文字，例如：
### 白色 + 在深色背景下，可以使用白色变体来提高可见度。 :::demo ... ### 类型 + 支持锚点（anchor）和滑动（slide）两种交互方式，以适应不同的使用场景。 :::demo ...
67-71: 建议完善 type 属性的说明属性表格的更新整体清晰，但
type属性的说明过于简单，建议补充各个选项的具体用途说明。建议修改如下：
-| type | 交互类型 | `anchor` \| `slide` | `anchor` | +| type | 交互类型，anchor 为锚点式，slide 为滑动式 | `anchor` \| `slide` | `anchor` |src/packages/indicator/demo.taro.tsx (1)
48-53: 建议优化示例代码的组织结构虽然新增的示例代码结构清晰，但建议考虑以下优化建议：
- 考虑将相关的示例（如 white 和 type）放在更合适的位置，可能的话将类似的功能组合在一起
- 为新增的示例添加适当的说明注释，帮助其他开发者更好地理解用例
建议调整示例顺序如下：
<View className="h2">{translated.basic}</View> <Demo1 /> + {/* 类型相关示例 */} + <View className="h2">{translated.type}</View> + <Demo6 /> + + {/* 样式相关示例 */} + <View className="h2">{translated.white}</View> + <Demo5 /> - <View className="h2">{translated.white}</View> - <Demo5 /> - - <View className="h2">{translated.type}</View> - <Demo6 />src/packages/indicator/doc.en-US.md (2)
21-36: 建议为新增的演示部分添加说明文本"White" 和 "Type" 这两个新增的演示部分缺少对功能的具体描述说明。建议添加简要说明文本，帮助用户更好地理解这些新特性的用途。
### White + 白色主题样式，适用于深色背景。 :::demo <CodeBlock src='h5/demo5.tsx'></CodeBlock> ::: ### Type + 支持锚点（anchor）和滑动（slide）两种交互方式。 :::demo <CodeBlock src='h5/demo6.tsx'></CodeBlock> :::
70-71: 建议完善属性说明color 和 type 属性的说明过于简单，建议补充更详细的使用场景和示例。
-| color | color | `primary` \| `white` | `primary` | -| type | interactivity Type | `anchor` \| `slide` | `anchor` | +| color | 指示器颜色主题，primary 用于浅色背景，white 用于深色背景 | `primary` \| `white` | `primary` | +| type | 交互类型，anchor 为锚点式，slide 为滑动式 | `anchor` \| `slide` | `anchor` |src/packages/indicator/demos/taro/demo4.tsx (1)
63-82: 建议统一样式单位使用为了保持代码一致性，建议统一使用相同的 margin 单位。目前代码中混合使用了数字 50 和字符串 '50px'。
建议修改如下：
<Indicator total={6} current={2} direction="vertical" color="white" style={{ - marginLeft: '50px', + marginLeft: 50, }} /> <Indicator total={6} current={2} direction="vertical" color="white" type="slide" style={{ - marginLeft: '50px', + marginLeft: 50, }} />src/packages/indicator/indicator.scss (5)
Line range hint
9-33: 优化选择器结构和样式复用通过合并
.nut-indicator-dot和.nut-indicator-line的共同样式提高了代码复用性，这是个很好的改进。不过建议考虑以下优化：
- 使用 CSS 自定义属性（CSS Variables）来管理不同状态下的样式值
- 考虑将重复的边距逻辑抽取为 mixin
&-dot, &-line { + --indicator-opacity: 0.4; + --indicator-bg: #{$color-border-disabled}; display: inline-block; vertical-align: middle; width: $indicator-dot-size; height: $indicator-dot-size; border-radius: 50%; - background-color: $color-border-disabled; + background-color: var(--indicator-bg); margin: 0 $indicator-dot-margin; - opacity: 0.4; + opacity: var(--indicator-opacity);
36-47: 建议增加过渡动画的配置选项新增的线性指示器过渡动画是个很好的改进。建议考虑：
- 将过渡时间抽取为变量，方便统一配置
- 考虑添加
will-change属性优化性能&-line { &-active { - transition: transform 0.3s ease-in-out; + will-change: transform; + transition: transform var(--nut-indicator-transition-duration, 0.3s) ease-in-out; background: $indicator-color; } }
50-64: 优化轨道组件的实现轨道组件的实现使用伪元素是个不错的选择，但建议考虑以下几点：
- 使用 CSS 自定义属性管理背景色和透明度
- 考虑添加
pointer-events: none避免干扰交互.nut-indicator-track { &:after { + pointer-events: none; display: block; content: ' '; position: absolute; width: 100%; height: 100%; box-sizing: border-box; border-radius: $indicator-border-radius; - background-color: $color-border-disabled; - opacity: 0.4; + background-color: var(--nut-indicator-track-bg, $color-border-disabled); + opacity: var(--nut-indicator-track-opacity, 0.4); } }
66-92: 建议优化白色主题的样式结构白色主题的实现逻辑清晰，但可以考虑以下优化：
- 使用 CSS 自定义属性统一管理颜色和透明度
- 考虑使用 mixin 减少样式重复
.nut-indicator-white { + --indicator-white-bg: rgba(255, 255, 255, 0.4); + --indicator-white-border: rgba(0, 0, 0, 0.06); .nut-indicator { &-dot, &-line { position: relative; box-sizing: content-box; - background: rgba(255, 255, 255, 0.4); - border: 1px solid rgba(0, 0, 0, 0.06); + background: var(--indicator-white-bg); + border: 1px solid var(--indicator-white-border); opacity: 1; } } }
Line range hint
94-126: 建议完善垂直布局的响应式支持垂直布局的实现基本合理，但建议考虑以下改进：
- 考虑添加响应式断点支持
- 使用 CSS Grid 提供更灵活的布局选项
建议考虑使用 CSS Grid 实现更灵活的布局：
.nut-indicator-vertical { display: grid; grid-auto-flow: row; gap: $indicator-dot-margin; justify-items: center; @media (max-width: $nut-breakpoint-sm) { // 移动端适配 } }src/packages/indicator/indicator.taro.tsx (3)
44-45: 优化：类名命名更具语义化建议将类名修改为更加语义化的形式，例如使用
${classPrefix}--color-${color}和${classPrefix}--type-${type}，以提高代码的可读性和可维护性。
75-76: 提醒：current值的有效性检查在计算
transform时，使用了current * 100%。为了防止超出有效范围，建议对current进行校验，确保其值在0到total - 1之间。
30-38: 优化：解构赋值的属性顺序为提高代码的可读性，建议按照一定的规则排列解构赋值的属性，例如先必需属性后可选属性，或按字母顺序排列。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (19)
src/config.json(1 hunks)src/packages/indicator/demo.taro.tsx(2 hunks)src/packages/indicator/demo.tsx(2 hunks)src/packages/indicator/demos/h5/demo1.tsx(1 hunks)src/packages/indicator/demos/h5/demo4.tsx(2 hunks)src/packages/indicator/demos/h5/demo5.tsx(1 hunks)src/packages/indicator/demos/h5/demo6.tsx(1 hunks)src/packages/indicator/demos/taro/demo1.tsx(1 hunks)src/packages/indicator/demos/taro/demo4.tsx(1 hunks)src/packages/indicator/demos/taro/demo5.tsx(1 hunks)src/packages/indicator/demos/taro/demo6.tsx(1 hunks)src/packages/indicator/doc.en-US.md(3 hunks)src/packages/indicator/doc.md(3 hunks)src/packages/indicator/doc.taro.md(3 hunks)src/packages/indicator/doc.zh-TW.md(3 hunks)src/packages/indicator/indicator.scss(3 hunks)src/packages/indicator/indicator.taro.tsx(1 hunks)src/packages/indicator/indicator.tsx(1 hunks)src/styles/variables.scss(1 hunks)
✅ Files skipped from review due to trivial changes (4)
- src/packages/indicator/demos/h5/demo5.tsx
- src/packages/indicator/demos/h5/demo6.tsx
- src/packages/indicator/demos/taro/demo5.tsx
- src/packages/indicator/demos/taro/demo6.tsx
🔇 Additional comments (24)
src/packages/indicator/demos/h5/demo1.tsx (1)
1-2: 导入语句排序合理！
按字母顺序排列组件导入，提高了代码的可读性。
src/packages/indicator/demos/taro/demo1.tsx (2)
2-2: 导入语句的顺序调整符合规范
导入语句按字母顺序排列，这样的改动提高了代码的可读性。
Line range hint 1-13: 验证组件是否符合 v14 适配要求
需要确认当前的实现是否完全符合 v14 版本的适配要求。
✅ Verification successful
Let me gather more information about the Indicator component implementation and its version compatibility.
Indicator 组件实现符合当前版本要求
基于以下分析：
- 组件实现完整，包含了所有必要的属性（total、current、direction、color、type）
- 组件使用了最新的函数式组件写法，采用 TypeScript 类型定义
- 组件样式文件正确配置
- 示例代码中的用法与当前实现保持一致
- 迁移工具（nutui-codemod）中没有针对 Indicator 组件的特殊迁移规则，说明该组件没有破坏性更新
当前的实现和使用方式完全符合最新版本的要求，无需额外适配。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查配置文件中的版本信息
rg -l "Indicator.*v14" src/config.json
# 检查相关的类型定义
rg -A 5 "interface IndicatorProps" src/packages/indicator/
Length of output: 846
Script:
#!/bin/bash
# 检查 Indicator 组件的实现细节
ast-grep --pattern 'const Indicator = ($$$) => {
$$$
}'
# 检查 package.json 中的版本信息
rg -l "version.*14" package.json
# 检查是否有版本相关的更新文档
fd CHANGELOG.md
Length of output: 125
Script:
#!/bin/bash
# 检查 CHANGELOG.md 中关于 Indicator 组件的更新记录
rg -A 5 "Indicator" CHANGELOG.md
# 检查 Indicator 组件的具体实现
cat src/packages/indicator/indicator.taro.tsx
# 检查是否存在迁移指南或版本升级文档
fd -t f -e md . | xargs rg -l "迁移|升级|v14"
Length of output: 2579
Script:
#!/bin/bash
# 检查迁移指南中关于 Indicator 组件的说明
cat packages/nutui-codemod/README.md
# 检查组件的测试用例
rg -A 5 "describe.*Indicator" src/packages/indicator/
# 检查组件的样式文件
fd -t f -e scss -e less -e css . | xargs rg -l "indicator"
Length of output: 3143
src/packages/indicator/demo.tsx (2)
7-8: 导入语句结构合理
新增的 Demo5 和 Demo6 组件导入遵循了项目现有的导入规范。
14-15: 翻译键值完整且统一
新增的 'white' 和 'type' 翻译项在所有支持的语言（zh-CN、zh-TW、en-US）中都已正确添加。
Also applies to: 22-23, 30-31
src/packages/indicator/demos/h5/demo4.tsx (1)
35-54: 新增的 Indicator 组件实现正确，建议验证文档完整性
新增的两个 Indicator 组件展示了 color 和 type 属性的用法，实现合理。为确保开发体验，建议验证以下内容：
- 新增的
color和type属性是否已在组件文档中详细说明 - 是否提供了这些新属性的使用示例和最佳实践
✅ Verification successful
新增的 Indicator 属性已有完整文档支持，实现规范
经验证，color 和 type 属性已在文档中有详细说明：
color属性支持primary和white两种值，默认为primarytype属性支持anchor和slide两种交互方式，默认为anchor
新增的示例代码实现规范，与文档描述一致。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查文档中是否包含新属性的说明
rg -A 5 "color.*type" "src/packages/indicator/doc*.md"
Length of output: 127
Script:
#!/bin/bash
# 查找所有可能的文档文件
fd "doc.*\.md" src/packages/indicator/
# 查找所有包含 color 或 type 的文档内容
rg -i "color|type" src/packages/indicator/
Length of output: 7791
src/packages/indicator/doc.md (1)
83-86: CSS 变量的单位使用需要统一
CSS 变量的默认值中，尺寸单位使用了 px，建议与项目的其他组件保持一致的单位使用规范。
src/packages/indicator/doc.zh-TW.md (1)
67-71: 属性表更新完善
属性表的更新准确反映了组件的新特性，描述清晰，默认值正确。新增的 color 和 type 属性丰富了组件的功能性。
src/packages/indicator/doc.taro.md (1)
83-86: CSS 变量更新合理
CSS 变量的默认值更新采用了设计系统的标准化变量（如 $radius-xxs、$spacing-xxxs），这种改进有助于保持组件样式的一致性和可维护性。
src/packages/indicator/demo.taro.tsx (2)
10-11: 导入语句结构清晰且符合规范！
新增的 Demo5 和 Demo6 组件导入与现有代码保持一致的结构和风格。
17-18: 翻译内容完整且多语言支持完善！
新增的 'white' 和 'type' 翻译键已在所有支持的语言（中文简体、中文繁体和英文）中正确配置。
Also applies to: 25-26, 33-34
src/packages/indicator/doc.en-US.md (1)
83-86: CSS 变量更新合理
默认值的调整符合设计规范，使用了系统预设的变量（如 $radius-xxs、$spacing-xxxs），有助于保持视觉一致性。
src/packages/indicator/demos/taro/demo4.tsx (1)
63-82: 新增的 Indicator 属性展示完善
很好地展示了 v14 版本中 Indicator 组件的新特性（color 和 type 属性）。示例代码清晰地演示了不同配置的使用方法。
src/packages/indicator/indicator.scss (1)
4-4: 建议验证布局方向的兼容性
固定使用 row 作为默认方向可能会影响现有的使用场景。建议确认这个改动是否会影响到依赖垂直布局的现有实现。
✅ Verification successful
布局方向修改是安全的
经过验证，组件已经完整支持垂直布局：
- 通过
direction属性控制布局方向 - CSS 中包含
.nut-indicator-vertical相关样式 - 组件内部的变换逻辑也考虑了垂直方向的情况
设置 flex-direction: row 作为默认方向是合理的，不会影响现有的垂直布局实现。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 搜索可能受影响的组件使用示例
rg -l "nut-indicator" "src/sites" "src/packages"
Length of output: 366
Script:
#!/bin/bash
# 检查 indicator 组件的使用方式和布局相关代码
rg -A 5 "nut-indicator" src/packages/swiper/swiper.harmony.css src/packages/indicator/indicator.tsx src/packages/indicator/__test__/indicator.spec.tsx
# 检查 indicator 组件的垂直布局相关代码
rg "vertical" src/packages/indicator/indicator.tsx src/packages/indicator/indicator.scss
Length of output: 5855
src/config.json (1)
1023-1023: 确认 Indicator 组件的 v14 适配标记
添加 "v14": true 标记表明 Indicator 组件已适配 v14 版本，这与 PR 的目标相符。
运行以下脚本以验证其他组件的 v14 适配情况：
✅ Verification successful
Indicator 组件的 v14 适配标记验证完成
根据验证结果：
- 在总计 102 个组件中，目前仅 Indicator 组件标记了 v14 适配
- 组件配置完整且合理，包含了必要的版本信息和功能描述
- 这是首个进行 v14 适配的组件，符合渐进式升级的策略
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查其他组件的 v14 标记情况
# 搜索所有带有 v14 标记的组件配置
jq -r '.nav[].packages[] | select(."v14" == true) | .name' src/config.json
Length of output: 86
Script:
#!/bin/bash
# 检查所有组件的总数，以了解 v14 适配的进度
jq -r '.nav[].packages[] | .name' src/config.json | wc -l
# 检查是否有其他版本标记（如 v13）的组件
jq -r '.nav[].packages[] | select(has("v13")) | .name' src/config.json
# 检查 Indicator 组件的完整配置，以确保 v14 标记的上下文
jq -r '.nav[].packages[] | select(.name == "Indicator")' src/config.json
Length of output: 418
src/styles/variables.scss (2)
1802-1806: 指示器圆点尺寸调整更加精致
圆点尺寸的调整使指示器更加紧凑，常规状态从4px减小到3px，激活状态从8px减小到6px，这样的比例更加协调。
1807-1813: 新增边框圆角和间距变量，提升样式系统一致性
通过引入$indicator-border-radius和$indicator-dot-margin变量，分别复用了设计系统中的$radius-xxs和$spacing-xxxs令牌值，确保了指示器样式与整体设计系统的一致性。
src/packages/indicator/indicator.tsx (5)
4-5: 添加了新的类型定义，明确了 type 和 color 属性的可选值
11-12: 在 IndicatorProps 接口中新增了 color 和 type 属性
19-20: 为 color 和 type 属性设置了默认值
28-37: 在组件中解构了新的属性 color 和 type
43-44: 根据 color 和 type 属性动态添加类名
src/packages/indicator/indicator.taro.tsx (2)
27-27: 建议：校验 ViewProps 与组件属性的兼容性
在组件类型定义中，使用了 Partial<IndicatorProps> & ViewProps。请确保 ViewProps 中的属性不会与您的组件属性产生冲突，以避免潜在的问题。
12-13: 确认：新增的 color 和 type 属性
新增的 color 和 type 属性已正确添加到 IndicatorProps 接口中，并在组件中得到正确使用。
| item === 0 ? ( | ||
| children || ( | ||
| <div | ||
| key={item} | ||
| style={{ | ||
| transform: `${direction === 'vertical' ? 'translateY' : 'translateX'}(${current * 100}%)`, | ||
| }} | ||
| className={`${classPrefix}-line ${classPrefix}-line-active`} |
There was a problem hiding this comment.
renderLineElement 函数中的条件判断可能存在问题
在 renderLineElement 中，条件判断为 item === 0，这意味着仅对第一个元素应用活动状态和样式。这与 renderDotElement 中根据 current 判断当前项的逻辑不一致。
建议将条件修改为 item === current，以确保活动状态应用于当前项。
请应用以下代码修正：
- item === 0 ? (
+ item === current ? (📝 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.
| item === 0 ? ( | |
| children || ( | |
| <div | |
| key={item} | |
| style={{ | |
| transform: `${direction === 'vertical' ? 'translateY' : 'translateX'}(${current * 100}%)`, | |
| }} | |
| className={`${classPrefix}-line ${classPrefix}-line-active`} | |
| item === current ? ( | |
| children || ( | |
| <div | |
| key={item} | |
| style={{ | |
| transform: `${direction === 'vertical' ? 'translateY' : 'translateX'}(${current * 100}%)`, | |
| }} | |
| className={`${classPrefix}-line ${classPrefix}-line-active`} |
| const childs: ReactNode[] = [] | ||
| for (let item = 0; item < total; item++) { | ||
| childs.push( | ||
| item === 0 ? ( | ||
| children || ( | ||
| <View | ||
| key={item} | ||
| style={{ | ||
| transform: `translateX(${current * 100}%)`, | ||
| }} | ||
| className={`${classPrefix}-line ${classPrefix}-line-active`} | ||
| /> | ||
| ) | ||
| ) : ( | ||
| <View | ||
| key={item} | ||
| className={`${classPrefix}-dot ${classPrefixV}-dot`} | ||
| /> | ||
| <View key={item} className={`${classPrefix}-line`} /> | ||
| ) | ||
| ) | ||
| } | ||
| return childs | ||
| } | ||
| const renderByType = (type: IndicatorType) => { |
There was a problem hiding this comment.
问题：renderLineElement 函数中的逻辑可能导致显示异常
在 renderLineElement 函数中，只有当 item === 0 时，才渲染带有活动状态的线条，并通过 transform 属性移动。这样可能会导致仅渲染一个活动的线条，无法正确反映当前的 current 状态。建议修改判断条件，确保活动线条的渲染与 current 对应。
应用以下修改以修正逻辑：
- item === 0 ? (
+ item === current ? (📝 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.
| const childs: ReactNode[] = [] | |
| for (let item = 0; item < total; item++) { | |
| childs.push( | |
| item === 0 ? ( | |
| children || ( | |
| <View | |
| key={item} | |
| style={{ | |
| transform: `translateX(${current * 100}%)`, | |
| }} | |
| className={`${classPrefix}-line ${classPrefix}-line-active`} | |
| /> | |
| ) | |
| ) : ( | |
| <View | |
| key={item} | |
| className={`${classPrefix}-dot ${classPrefixV}-dot`} | |
| /> | |
| <View key={item} className={`${classPrefix}-line`} /> | |
| ) | |
| ) | |
| } | |
| return childs | |
| } | |
| const renderByType = (type: IndicatorType) => { | |
| const childs: ReactNode[] = [] | |
| for (let item = 0; item < total; item++) { | |
| childs.push( | |
| item === current ? ( | |
| children || ( | |
| <View | |
| key={item} | |
| style={{ | |
| transform: `translateX(${current * 100}%)`, | |
| }} | |
| className={`${classPrefix}-line ${classPrefix}-line-active`} | |
| /> | |
| ) | |
| ) : ( | |
| <View key={item} className={`${classPrefix}-line`} /> | |
| ) | |
| ) | |
| } | |
| return childs | |
| } | |
| const renderByType = (type: IndicatorType) => { |
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新特性
Indicator、Pagination、Price、Progress、Swiper和Video，并统一版本为3.0.0。Demo5和Demo6演示组件，增强了示例功能。color和type属性，提供更多自定义选项。文档
Indicator组件的文档，新增了示例和属性说明，改善了可读性和使用指导。