feat(indicator): 增加 UI 变体的类型#3114
Merged
xiaoyatong merged 2 commits intojdf2e:feat_v3.xfrom Mar 28, 2025
Merged
Conversation
Walkthrough此次 PR 对配置和组件使用方式做出修改。在配置文件中，将 PullToRefresh 组件的 Changes
Sequence Diagram(s)sequenceDiagram
participant App as 应用
participant Config as 配置 (src/config.json)
participant PTR as PullToRefresh组件
App->>Config: 加载配置
Config-->>App: 返回 {"dd": true}
App->>PTR: 初始化 PullToRefresh（dd 启用）
sequenceDiagram
participant I as Indicator组件
participant L as maybeFixedWidth函数
I->>L: 传入 type 属性
alt type 为 'dualScreen' 或 'slide'
L-->>I: 返回 fixed-width 样式
else
L-->>I: 返回默认样式
end
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
🪧 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
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3114 +/- ##
==========================================
Coverage 86.95% 86.95%
==========================================
Files 280 280
Lines 18456 18456
Branches 2786 2786
==========================================
Hits 16049 16049
Misses 2402 2402
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
xiaoyatong
requested changes
Mar 25, 2025
Collaborator
xiaoyatong
left a comment
xiaoyatong
left a comment
There was a problem hiding this comment.
1、建议叫 dualScreen
2、建议demo展示一致性，如 在 类型组，添加该demo
Collaborator
|
3、需要加一下文档 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/packages/indicator/demos/h5/demo6.tsx (1)
5-18: 需要添加dualScreen类型的具体渲染逻辑根据相关代码片段，目前
renderByType函数只针对slide类型有特殊处理，而dualScreen类型将使用默认的点元素渲染逻辑。虽然maybeFixedWidth函数已更新以支持dualScreen类型的固定宽度，但可能需要实现专门的渲染逻辑。建议检查
dualScreen类型是否需要特殊的渲染逻辑：const renderByType = (type: IndicatorType) => { switch (type) { case 'slide': return renderLineElement() + case 'dualScreen': + return renderDualScreenElement() // 实现适合双屏显示的渲染逻辑 default: return renderDotElement() } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
src/packages/indicator/demos/h5/demo1.tsx(0 hunks)src/packages/indicator/demos/h5/demo6.tsx(1 hunks)src/packages/indicator/demos/taro/demo1.tsx(0 hunks)src/packages/indicator/demos/taro/demo6.tsx(1 hunks)src/packages/indicator/doc.en-US.md(1 hunks)src/packages/indicator/doc.md(1 hunks)src/packages/indicator/doc.taro.md(1 hunks)src/packages/indicator/doc.zh-TW.md(1 hunks)src/packages/indicator/indicator.taro.tsx(1 hunks)src/packages/indicator/indicator.tsx(1 hunks)src/types/spec/indicator/base.ts(1 hunks)
💤 Files with no reviewable changes (2)
- src/packages/indicator/demos/h5/demo1.tsx
- src/packages/indicator/demos/taro/demo1.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- src/packages/indicator/indicator.tsx
- src/packages/indicator/indicator.taro.tsx
- src/types/spec/indicator/base.ts
🧰 Additional context used
🧬 Code Definitions (2)
src/packages/indicator/demos/h5/demo6.tsx (2)
src/packages/indicator/indicator.taro.tsx (1)
Indicator(17-97)src/packages/indicator/indicator.tsx (1)
Indicator(15-92)
src/packages/indicator/demos/taro/demo6.tsx (2)
src/packages/indicator/indicator.taro.tsx (1)
Indicator(17-97)src/packages/indicator/indicator.tsx (1)
Indicator(15-92)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (6)
src/packages/indicator/doc.taro.md (1)
71-71: 已更新文档以包含新的 UI 变体类型在属性文档中正确添加了
dualScreen类型，使文档与代码实现保持一致。src/packages/indicator/doc.zh-TW.md (1)
71-71: 已更新繁體中文文档以包含新的 UI 變體類型在屬性文檔中正確添加了
dualScreen類型，使文檔與代碼實現保持一致。src/packages/indicator/doc.md (1)
71-71: 已更新简体中文文档以包含新的 UI 变体类型在属性文档中正确添加了
dualScreen类型，使文档与代码实现保持一致。src/packages/indicator/doc.en-US.md (1)
71-71: 已更新英文文档以包含新的 UI 变体类型在属性文档中正确添加了
dualScreen类型，使文档与代码实现保持一致。src/packages/indicator/demos/h5/demo6.tsx (1)
11-15: 新类型dualScreen的示例实现代码中添加了两个
dualScreen类型的示例，分别展示了不同状态（current=0 和 current=1）和不同颜色设置。这有助于用户理解新类型的视觉效果和用法。然而，根据 PR 评论，应该添加关于这个新类型的具体文档说明。
建议添加一段关于
dualScreen类型的详细描述，解释其用途和与其他类型的区别。例如，可以在各语言版本的文档中的 "类型" 部分添加说明。src/packages/indicator/demos/taro/demo6.tsx (1)
11-12: 新增的 dualScreen 类型示例展示良好这里演示了新增的
dualScreenUI 变体类型的基本用法，当前选中为第一个点（current={0}）。从代码可以看出，这个类型需要设置总数为2，符合"双屏幕"的设计理念。
Comment on lines
+13
to
+14
| <Cell style={{ background: '#C2C4CC' }}> | ||
| <Indicator total={2} type="dualScreen" current={1} color="default" /> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
白色变体示例实现恰当
这个例子很好地展示了 dualScreen 类型在深色背景下的使用方式，并通过 color="default" 设置为白色变体，当前选中为第二个点（current={1}）。这种搭配能让用户明确了解不同背景下的适用情况。
不过，建议考虑在文档中添加关于这个新类型的详细说明，包括其适用场景和设计理念。
🌐 Web query:
NutUI React 组件库中的 Indicator 组件有哪些类型和用法说明？
💡 Result:
NutUI React组件库的Indicator组件主要用于分页指示、步骤引导等场景，提供以下核心功能和用法：
组件类型
1. 分页指示器
- 用于轮播图、图片预览等场景的分页标识
- 支持圆形/方形/数字等多种样式[3][13]
2. 步骤指示器
- 用于流程引导、多步骤表单场景
- 支持水平/垂直布局[1][18]
基本用法
import { Indicator } from '@nutui/nutui-react-taro';
// 分页指示
<Indicator total={3} current={2} />
// 步骤指示
<Indicator type="step" current={1}>
<div>第一步</div>
<div>第二步</div>
<div>第三步</div>
</Indicator>关键配置项
| 属性 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| size | number | 指示点尺寸 | 6 |
| activeColor | string | 激活状态颜色 | #FA2C19 |
| inactiveColor | string | 未激活状态颜色 | #EBEBEB |
| align | 'left'|'center'|'right' | 对齐方式 | center |
进阶功能
- 自定义样式
通过CSS变量修改基础样式：
:root {
--nutui-indicator-color: #1989fa;
--nutui-indicator-dot-size: 8px;
}- 动态交互
支持onChange事件监听步骤切换：
<Indicator
current={activeStep}
onChange={(step) => setActiveStep(step)}
/>- 组合使用
与Popup、Swiper等组件配合使用时，可通过zIndex参数控制层级关系[3][19]，最新版本已优化动态层级计算逻辑，减少手动设置需求[13][18]。
该组件在v2.7.x版本中持续优化样式表现和兼容性[3][13]，建议通过npm install @nutui/nutui-react-taro@latest获取最新稳定版本。
Citations:
- 1: https://nutui.jd.com/h5/react/1x/demo.html
- 2: NutUI-React 支持 Taro 跨端应用 #241
- 3: https://github.com/jdf2e/nutui-react/blob/next/CHANGELOG.md
- 4: https://blog.csdn.net/weixin_32808905/article/details/112579772
- 5: https://github.com/jdf2e/nutui-react
- 6: https://blog.csdn.net/m0_63064850/article/details/139478666
- 7: https://www.ruidoc.cn/crosspt/taro/nutui/
- 8: https://www.cnblogs.com/GoTing/p/16992495.html
- 9: https://docs.taro.zone/docs/nutui
- 10: Taro 4.0.5 使用nutui开发H5项目使用UI组件后提示 Warning: Unsupported style property -webkitMask. Did you mean WebkitMask? #2610
- 11: https://nutui-uniapp.pages.dev/components/basic/popup
- 12: https://blog.csdn.net/m0_74433188/article/details/129760013
- 13: https://github.com/jdf2e/nutui-react/releases
- 14: https://blog.csdn.net/Weiqian_/article/details/131042258
- 15: https://blog.csdn.net/u014496893/article/details/111605058
- 16: https://jelly.jd.com/article/63a3c493abf18f00579e005b
- 17: https://classic.yarnpkg.com/en/package/gui-one-nutui-react-taro
- 18: https://classic.yarnpkg.com/en/package/@nutui/nutui-react
- 19: https://nutui-uniapp.pages.dev/components/basic/overlay
- 20: https://docs.taro.zone/docs/vant
请更新文档说明以涵盖 dualScreen 类型
示例代码在深色背景下成功展示了白色变体的实现，代码实现正确。但建议在文档中补充对 dualScreen 类型的详细说明，包括其适用场景和设计理念，以便用户更全面地了解该新类型的使用场景。
- 文件：src/packages/indicator/demos/taro/demo6.tsx （第 13-14 行）
- 示例代码：
<Cell style={{ background: '#C2C4CC' }}> <Indicator total={2} type="dualScreen" current={1} color="default" />
Collaborator
Author
fixed |
Collaborator
Author
fixed |
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Summary by CodeRabbit