feat: Spin 组件支持全局扩展配置
#713
Conversation
Walkthrough此次更改涉及对Shineout组件全局配置文档的更新，新增了配置选项并详细描述了现有选项。 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Config
participant SpinComponent
User->>Config: 设置Spin配置
Config->>SpinComponent: 提供配置选项
SpinComponent->>SpinComponent: 处理配置并渲染
SpinComponent->>User: 显示Spin组件
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🧰 Additional context used🔇 Additional comments (1)
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: 6
🧹 Outside diff range and nitpick comments (8)
packages/shineout-style/src/spin/plane.ts (1)
Line range hint
1-9: 建议检查是否有其他需要替换的硬编码颜色值。您已经成功地将背景颜色替换为了主题 token。建议检查文件中是否还有其他硬编码的颜色值或样式属性，它们可能也适合使用主题 token 来替换，以保持一致性和灵活性。
packages/theme/src/spin/type.ts (1)
23-28: 新属性spinColor添加正确，建议考虑命名一致性。新添加的
spinColor属性定义正确，包括适当的类型注释和描述。这个添加符合PR的目标，增强了Spin组件的全局配置能力。然而，为了保持接口内部的命名一致性，您可以考虑将属性名更改为
spinAnimationColor。这样可以更明确地表示它是动画的颜色，并与其他属性（如spinBackgroundColor）的命名风格保持一致。如果您同意这个建议，可以应用以下更改：
/** * @type {string} * @token Brand-6 * @description 加载动画颜色 */ - spinColor: string; + spinAnimationColor: string;packages/shineout-style/src/spin/cube-grid.ts (1)
Line range hint
3-23: 建议添加注释以提高可读性代码的结构和逻辑看起来不错，特别是使用百分比来定义尺寸和使用
delayRange常量来计算动画延迟。然而，为了提高可读性和可维护性，建议添加一些注释来解释动画的逻辑和计算方法。例如，可以解释：
delayRange常量的作用和选择 0.4 秒的原因- 网格布局的结构（3x3）
- 动画延迟的计算逻辑
这将有助于其他开发者更容易理解和维护这段代码。
docs/markdown/shineout/config.md (2)
70-74: 配置类型扩展良好，建议稍作改进这个更改很好地扩展了
spin配置的灵活性，允许用户更详细地自定义 Spin 组件。这与 PR 的目标一致，增强了全局配置的功能。建议：
- 为每个属性添加简短说明，以增强文档的可读性。
- 考虑为
color属性指定可接受的值类型（如 CSS 颜色字符串）。您可以考虑按以下方式稍微调整文档：
类型： `spin: string | { - name: string; - color?: string; - tip?: React.ReactNode; + name: string; // Spin 类型名称 + color?: string; // Spin 颜色（CSS 颜色值） + tip?: React.ReactNode; // 加载提示文本 }`
86-95: 示例清晰有效，建议小幅优化新增的代码示例很好地展示了如何使用扩展后的 spin 配置。它清晰地演示了如何设置 spin 类型、颜色和加载提示，这对用户理解新功能很有帮助。
建议：
- 考虑在示例前添加一个简短的说明文字，解释这个示例的用途。
- 可以考虑使用更具描述性的变量名来增强示例的可读性。
您可以考虑按以下方式稍微调整示例：
+// 使用对象形式设置全局 Spin 的默认配置 setConfig({ spin: { - name: 'wave', - color: '#000000', - tip: 'loading...' + name: 'wave', // Spin 类型 + color: '#3366FF', // Spin 颜色 + tip: '加载中...' // 加载提示文本 } })packages/base/src/config/index.ts (3)
6-12: 新的 SpinConfig 类型定义看起来不错，但可以考虑添加注释这个新的类型定义为 Spin 组件提供了灵活的配置选项，既保持了向后兼容性，又允许更详细的配置。这是一个很好的改进。
建议为
SpinConfig类型和它的属性添加 JSDoc 注释，以提高代码的可读性和可维护性。例如：/** * 配置 Spin 组件的选项 * @typedef {string | object} SpinConfig */ export type SpinConfig = | string | { /** Spin 的名称 */ name: string; /** Spin 的颜色（可选） */ color?: string; /** Spin 的提示文本（可选） */ tip?: React.ReactNode; };
19-19: ConfigOption 接口更新正确，建议添加注释
ConfigOption接口中spin属性的类型更新很好地利用了新的SpinConfig类型，这将允许在全局级别对 Spin 组件进行更灵活的配置。为了提高代码的可读性，建议为
spin属性添加注释，解释其用途和可能的值。例如：export interface ConfigOption { // ... 其他属性 ... /** * Spin 组件的全局配置 * 可以是预定义的字符串值，或者一个包含详细配置的对象 */ spin?: SpinConfig; // ... 其他属性 ... }
Line range hint
6-30: 总体评价：Spin 组件配置的改进很出色这些更改很好地增强了 Spin 组件的配置能力：
- 新的
SpinConfig类型提供了更灵活的配置选项。ConfigOption接口的更新正确地集成了新的类型。- 默认配置保持了向后兼容性。
这些改动将使得 Spin 组件的全局配置更加灵活和强大，同时不会破坏现有的使用方式。
建议考虑以下几点来进一步完善这个功能：
- 更新相关的文档，详细说明新的配置选项及其用法。
- 确保在组件中正确处理新的配置选项，特别是
color和tip属性。- 考虑添加单元测试，以确保新的配置选项能够正确工作。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (19)
- docs/markdown/shineout/config.md (2 hunks)
- packages/base/src/config/index.ts (1 hunks)
- packages/base/src/spin/spin.tsx (3 hunks)
- packages/shineout-style/src/spin/chasing-dots.ts (2 hunks)
- packages/shineout-style/src/spin/chasing-ring.ts (2 hunks)
- packages/shineout-style/src/spin/cube-grid.ts (2 hunks)
- packages/shineout-style/src/spin/default.ts (2 hunks)
- packages/shineout-style/src/spin/double-bounce.ts (2 hunks)
- packages/shineout-style/src/spin/fading-circle.ts (2 hunks)
- packages/shineout-style/src/spin/four-dots.ts (2 hunks)
- packages/shineout-style/src/spin/plane.ts (1 hunks)
- packages/shineout-style/src/spin/pulse.ts (1 hunks)
- packages/shineout-style/src/spin/ring.ts (1 hunks)
- packages/shineout-style/src/spin/scale-circle.ts (2 hunks)
- packages/shineout-style/src/spin/tree-bounce.ts (2 hunks)
- packages/shineout-style/src/spin/wave.ts (2 hunks)
- packages/theme/src/spin/spin.ts (1 hunks)
- packages/theme/src/spin/token.ts (1 hunks)
- packages/theme/src/spin/type.ts (1 hunks)
🧰 Additional context used
🔇 Additional comments (25)
packages/shineout-style/src/spin/plane.ts (1)
1-1: 更改看起来不错，提高了主题的灵活性。这些更改通过使用
Token.spinColor代替硬编码的颜色值，增强了Spin组件的可配置性。这种方法允许更容易地实现全局主题更改和自定义。Also applies to: 7-7
packages/shineout-style/src/spin/pulse.ts (2)
1-1: 更改看起来不错，提高了主题的灵活性。这些更改通过引入
Token并使用Token.spinColor来设置背景颜色，增强了组件的可配置性。这种方法允许更灵活的主题定制，并确保了整个应用程序中颜色使用的一致性。Also applies to: 8-8
1-1: 验证这个更改对其他使用 Spin 组件的地方的影响。虽然这个更改看起来是一个改进，但我们应该确保它不会对其他依赖于 Spin 组件样式的地方产生意外影响。
请运行以下脚本来检查可能受影响的其他文件：
Also applies to: 8-8
packages/shineout-style/src/spin/double-bounce.ts (2)
1-1: 引入主题 Token 增强了样式的灵活性通过引入
@sheinx/theme中的Token，我们可以实现动态主题配置，这是一个很好的做法。它有助于保持整个应用程序的样式一致性，并且使得未来的主题更改变得更加容易。
16-16: 使用 Token.spinColor 替代硬编码颜色值将背景颜色从硬编码的 '#197AFA' 更改为
Token.spinColor是一个很好的改进。这种方法提高了样式的可维护性和一致性。然而，请确保以下几点：
Token.spinColor在主题配置中已正确定义。- 新的颜色值与设计规范一致。
- 这个改变不会对现有的使用场景产生负面影响。
请运行以下脚本来验证
Token.spinColor的定义：packages/shineout-style/src/spin/tree-bounce.ts (1)
1-1: 主题配置的良好实践！引入
Token并使用Token.spinColor替换硬编码的颜色值是一个很好的改进。这种方法增强了组件的灵活性，使其能够更好地适应全局主题配置。这个变更与PR的目标一致，即为
Spin组件启用全局扩展配置。Also applies to: 15-15
packages/shineout-style/src/spin/chasing-dots.ts (2)
1-1: 更改增强了组件的可配置性和主题支持这些更改通过引入动态主题支持，提高了
Spin组件的可配置性。使用Token.spinColor替代硬编码的颜色值是一个很好的做法。Also applies to: 19-19
1-1: 验证 Token 的使用和主题集成这些更改引入了对
@sheinx/theme的依赖。我们需要确保这个依赖在整个项目中得到正确处理，并且Token.spinColor在所有可能的主题配置中都有正确的值。请运行以下脚本来验证
Token的使用和主题集成：Also applies to: 19-19
packages/shineout-style/src/spin/wave.ts (3)
1-1: 引入主题 Token 以支持动态样式通过引入
Token，我们可以使用主题中定义的样式变量，这有助于保持整个应用程序的样式一致性和可定制性。这是一个很好的改进。
23-23: 使用动态颜色值替换硬编码颜色将背景色从硬编码的 '#197AFA' 更改为
Token.spinColor是一个很好的改进。这样做：
- 增加了 Spin 组件的可定制性
- 使得全局主题更改变得容易
- 符合 PR 的目标，即支持全局扩展配置
这个改变与项目的整体方向一致，提高了组件的灵活性。
Line range hint
1-23: 总体评价：改进了 Spin 组件的可定制性和主题支持这些更改很好地实现了 PR 的目标，通过以下方式增强了 Spin 组件的全局扩展配置：
- 引入了主题 Token，使样式更加动态和可配置。
- 将硬编码的颜色值替换为主题变量，增加了灵活性。
这些变更提高了组件的可维护性和可定制性，同时保持了代码的简洁性。它们为未来的主题扩展和全局配置奠定了基础，符合项目的整体方向。
packages/shineout-style/src/spin/chasing-ring.ts (1)
1-1: 很好的改进，增加了主题定制能力！引入
Token并使用Token.spinColor来设置borderTopColor是一个很好的改进。这个变更有以下几个优点：
- 增加了组件的主题定制能力，使其更加灵活。
- 提高了代码的可维护性，便于统一管理和修改颜色。
- 符合使用主题令牌而非硬编码值的最佳实践。
这个改动与 PR 的目标（支持 Spin 组件的全局扩展配置）完全一致。
Also applies to: 17-17
packages/shineout-style/src/spin/four-dots.ts (2)
1-1: 导入主题 Token 以支持动态样式引入
Token从 '@sheinx/theme' 包是一个很好的做法。这允许在样式中使用主题令牌，有助于保持整个应用程序的主题一致性。
21-21: 使用动态颜色值提高灵活性将硬编码的颜色值 '#197AFA' 替换为
Token.spinColor是一个很好的改进。这使得组件更加灵活，并且与全局扩展配置的目标相符。建议：
- 确保
Token.spinColor在主题配置中正确定义。- 考虑添加注释，说明这个颜色值的用途，以便其他开发者更容易理解。
运行以下脚本来验证
Token.spinColor的定义：packages/shineout-style/src/spin/scale-circle.ts (1)
1-1: 更改看起来不错，提高了组件的可配置性。这个更改通过使用
Token.spinColor替换硬编码的颜色值，增强了Spin组件的灵活性和可配置性。这与 PR 的目标一致，支持全局扩展配置。请运行以下脚本来验证
Token.spinColor是否在导入的模块中正确定义：Also applies to: 37-37
packages/shineout-style/src/spin/fading-circle.ts (2)
1-1: 新增主题 Token 导入，提高可配置性引入
Token从 '@sheinx/theme' 包中导入，为组件样式提供了更灵活的主题配置能力。这符合全局扩展配置的需求。
37-37: 使用动态主题颜色替换硬编码值将
fill属性的值从硬编码的 '#197AFA' 更改为Token.spinColor，这样可以根据全局主题配置动态调整 Spin 组件的颜色。这个改动增强了组件的可定制性，与 PR 的目标一致。运行以下脚本来验证
Token.spinColor的使用情况：✅ Verification successful
验证通过：
Token.spinColor仅在 Spin 相关的样式文件中使用。🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 描述：验证 Token.spinColor 的使用情况 # 测试：搜索 Token.spinColor 的使用。预期：应该只在 Spin 相关的样式文件中使用。 rg --type typescript "Token\.spinColor"Length of output: 76
Script:
#!/bin/bash # 描述：验证 Token.spinColor 的使用情况 # 测试：搜索 Token.spinColor 的使用。预期：应该只在 Spin 相关的样式文件中使用。 rg --type ts "Token\.spinColor"Length of output: 1036
packages/shineout-style/src/spin/cube-grid.ts (2)
1-1: 主题令牌导入是一个很好的改进引入
Token从 '@sheinx/theme' 包是一个很好的做法。这样可以使样式更加灵活和可配置，有助于保持整个应用程序的样式一致性。
12-12: 使用主题令牌改进了可配置性将背景色从硬编码值更改为
Token.spinColor是一个很好的改进。这增加了组件的灵活性，允许通过主题轻松自定义。然而，建议验证
Token.spinColor在主题中是否正确定义，以避免潜在的运行时错误。请运行以下脚本来验证
Token.spinColor的定义：packages/shineout-style/src/spin/default.ts (1)
1-1: 引入主题 Token 以增强样式的一致性和可配置性通过引入
Token，我们可以更好地管理和统一组件的样式。这种方法有助于保持整个应用程序的视觉一致性，并使得主题定制变得更加容易。packages/theme/src/spin/token.ts (1)
29-29: 新增的颜色配置看起来不错！新增的
color: 'Brand-6'配置项很好地扩展了 Spin 组件的全局配置能力，符合 PR 的目标。这个改动简洁明了，并且与现有结构保持一致。为了确保这个改动在组件实现中得到正确反映，建议运行以下脚本：
这将帮助我们确认新的颜色配置在 Spin 组件的实现中得到了正确使用。
docs/markdown/shineout/config.md (1)
96-96: 格式调整恰当添加的空行有助于改善文档的整体结构和可读性，是个很好的格式调整。
packages/base/src/config/index.ts (1)
Line range hint
30-30: 默认 spin 配置值设置正确将
config对象中spin属性的默认值设置为'ring'是正确的。这与新的SpinConfig类型兼容，并保持了与现有用法的向后兼容性。packages/base/src/spin/spin.tsx (2)
71-71: 确认展开的props是否包含color属性在第71行，
<Comp>组件接收了展开的props，同时又显式传递了color={color}。如果props中已经包含color属性，显式传递的color将覆盖props中的值。请确认这种覆盖行为是否符合预期，避免潜在的属性冲突。
84-84: 检查tip条件判断的逻辑变化第84行将条件判断修改为
if (tip)，这可能会导致当tip的值为假值（如null、undefined、false、空字符串''）时，不会渲染提示内容。请确认这种逻辑变化是否符合预期需求，避免遗漏应显示的提示信息。
| @@ -1,9 +1,11 @@ | |||
| import Token from '@sheinx/theme'; | |||
There was a problem hiding this comment.
💡 Codebase verification
发现部分样式文件仍包含硬编码颜色值。
- 以下文件中存在硬编码颜色值，请使用
Token进行替换：- packages/shineout-style/src/upload/upload.ts
- packages/shineout-style/src/image/image.ts
- packages/shineout-style/src/tabs/tabs.ts
- packages/shineout-style/src/steps/steps.ts
- packages/shineout-style/src/normalize.ts
- packages/shineout-style/src/list/list.ts
- packages/shineout-style/src/menu/menu.ts
- packages/shineout-style/src/carousel/carousel.ts
- packages/shineout-style/src/card-group/card-group.ts
- packages/shineout-style/src/badge/badge.ts
🔗 Analysis chain
更改看起来不错，提高了主题的灵活性。
这些更改通过使用 Token.spinColor 代替硬编码的颜色值，增强了 Spin 组件的可配置性。这种方法允许更容易地进行全局主题管理，符合 PR 的目标。
为确保一致性，请运行以下脚本来检查其他样式文件是否也需要类似的更改：
Also applies to: 8-8
为了确保验证脚本正确运行，请使用以下修正后的脚本重新检查：
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查其他样式文件中是否存在硬编码的颜色值
# 测试：搜索包含硬编码颜色值的文件
echo "包含硬编码颜色值的文件："
rg --type typescript -g 'packages/shineout-style/src/**/*.ts' -e '#[0-9A-Fa-f]{3,6}' -l
# 测试：检查其他文件是否已经使用了 Token
echo "已经使用 Token 的文件："
rg --type typescript -g 'packages/shineout-style/src/**/*.ts' -e 'Token\.' -l
Length of output: 448
Script:
#!/bin/bash
# 描述：检查其他样式文件中是否存在硬编码的颜色值
# 测试：搜索包含硬编码颜色值的文件
echo "包含硬编码颜色值的文件："
rg --glob 'packages/shineout-style/src/**/*.ts' -e '#[0-9A-Fa-f]{3,6}' -l
# 测试：检查其他文件是否已经使用了 Token
echo "已经使用 Token 的文件："
rg --glob 'packages/shineout-style/src/**/*.ts' -e 'Token\.' -l
Length of output: 1971
| @@ -7,6 +7,7 @@ const spinTokens: SpinTokens = { | |||
| spinTipFontColor: 'Brand-6', | |||
| spinVerticalMargin: 'Spacing-4', | |||
| spinHorizontalMargin: 'Spacing-4', | |||
| spinColor: 'Brand-6', | |||
There was a problem hiding this comment.
💡 Codebase verification
发现问题：spinColor 未在自动生成脚本中更新。
新增的 spinColor 属性未在生成脚本中进行更新。这可能导致 spin.ts 文件在未来自动生成时，spinColor 属性被覆盖或丢失。
请确保生成脚本中包含 spinColor，以保持一致性和自动化。
🔗 Analysis chain
新增的 spinColor 属性看起来不错，但需要验证自动生成过程。
新增的 spinColor 属性与 PR 的目标一致，为 Spin 组件提供了更多的全局配置选项。值 'Brand-6' 与文件中的其他颜色令牌保持一致。
然而，由于此文件是自动生成的，我们需要确保这些更改也反映在生成脚本中。
请运行以下脚本来验证更改是否正确反映在生成过程中：
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证 spin.ts 文件的自动生成过程
# 测试：查找生成 spin.ts 的脚本
echo "查找生成 spin.ts 的脚本："
fd -t f -e js -e ts --search-path scripts 'generate.*tokens'
# 测试：检查脚本中是否包含 spinColor
echo "检查脚本中是否包含 spinColor："
fd -t f -e js -e ts --search-path scripts 'generate.*tokens' -x rg -i 'spinColor'
# 测试：重新生成 spin.ts 并比较更改
echo "重新生成 spin.ts 并比较更改："
fd -t f -e js -e ts --search-path scripts 'generate.*tokens' -x node {} \; && git diff packages/theme/src/spin/spin.ts
Length of output: 412
| @@ -1,3 +1,5 @@ | |||
| import Token from '@sheinx/theme'; | |||
There was a problem hiding this comment.
💡 Codebase verification
发现未替换的硬编码颜色 #197AFA
在以下文件中仍然使用了硬编码的颜色值 #197AFA：
- packages/theme/src/token/type.ts
- packages/theme/src/token/token.ts
- packages/ssr-test/pages/examples/table/22-drag.tsx
- packages/ssr-test/pages/examples/form/011-fieldset-loop.tsx
- packages/ssr-test/pages/examples/card-group/02-width.tsx
- packages/ssr-test/pages/examples/card-group/04-checkbox.tsx
- packages/ssr-test/pages/examples/card-group/05-disabled.tsx
- packages/ssr-test/pages/examples/card-group/01-base.tsx
- packages/ssr-test/pages/examples/card-group/03-lazyout.tsx
- packages/shineout/src/table/example/22-02-drag-handle.tsx
- packages/shineout/src/table/example/22-01-drag.tsx
- packages/shineout/src/select/example/16-custom-render.tsx
- packages/shineout/src/link/example/05-icon.tsx
- packages/shineout/src/form/example/011-fieldset-loop.tsx
- packages/shineout/src/card-group/example/03-lazyout.tsx
- packages/shineout/src/card-group/example/04-checkbox.tsx
- packages/shineout/src/card-group/example/05-disabled.tsx
- packages/shineout/src/card-group/example/01-base.tsx
- packages/shineout/src/card-group/example/02-width.tsx
- docs/theme/components/title/logo.tsx
- docs/theme/layout/desktop/style.ts
- docs/theme/layout/desktop/nav/index.tsx
建议将这些硬编码的颜色值替换为 Token.spinColor 以保持代码一致性。
🔗 Analysis chain
验证 Token.spinColor 的使用情况
为确保变更的一致性和完整性，我们应该检查 Token.spinColor 在其他文件中的使用情况。
Also applies to: 15-15
为了确保验证脚本能够正确执行，请使用以下修正后的脚本重新验证：
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证 Token.spinColor 的使用情况
# 测试：搜索 Token.spinColor 的使用。预期：在其他相关文件中也有使用。
rg --type typescript "Token\.spinColor"
# 测试：检查是否有其他地方仍在使用旧的硬编码颜色值。预期：不应该有其他地方使用 #197AFA。
rg --type typescript "#197AFA"
Length of output: 144
Script:
#!/bin/bash
# 描述：验证 Token.spinColor 的使用情况
# 测试：搜索 Token.spinColor 的使用。预期：在其他相关文件中也有使用。
rg --type ts "Token\.spinColor"
# 测试：检查是否有其他地方仍在使用旧的硬编码颜色值。预期：不应该有其他地方使用 #197AFA。
rg --type ts "#197AFA"
Length of output: 3187
| @@ -27,7 +29,7 @@ const Default = (count = 12) => { | |||
| '& div': { | |||
| height: '55%', | |||
| margin: '0 auto', | |||
| background: '#197AFA', | |||
| background: Token.spinColor, | |||
There was a problem hiding this comment.
💡 Codebase verification
存在未替换的硬编码颜色值
在以下文件中仍然存在硬编码的 #197AFA 颜色值：
packages/theme/src/token/token.tspackages/theme/src/token/type.tspackages/theme/src/token/figma.jsdocs/theme/layout/desktop/style.ts
建议将这些硬编码颜色值替换为 Token.spinColor 或适当的主题 Token，以确保样式的一致性和提高代码的可维护性。
🔗 Analysis chain
使用主题 Token 替换硬编码的颜色值
将硬编码的颜色值 #197AFA 替换为 Token.spinColor 是一个很好的改进。这样做可以：
- 提高样式的一致性：确保 Spin 组件的颜色与整体主题保持一致。
- 增强可维护性：集中管理颜色值，便于后续的主题调整。
- 支持动态主题：允许在运行时更改主题，而无需修改组件代码。
为了确保这个改动的一致性，我们可以检查其他使用 Spin 组件的地方是否也进行了类似的更新：
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查其他文件中是否还存在硬编码的 Spin 颜色值
# 测试：搜索包含 '#197AFA' 的文件，特别是与 Spin 相关的文件
rg --type typescript --type javascript --type css "#197AFA"
# 测试：搜索其他可能使用 Token.spinColor 的地方
rg --type typescript --type javascript "Token\.spinColor"
Length of output: 191
Script:
#!/bin/bash
# 描述：检查其他文件中是否还存在硬编码的 Spin 颜色值
# 测试：搜索包含 '#197AFA' 的文件，特别是与 Spin 相关的文件
rg "#197AFA" --glob "*.ts" --glob "*.js" --glob "*.css"
# 测试：搜索其他可能使用 Token.spinColor 的地方
rg "Token\.spinColor" --glob "*.ts" --glob "*.js"
Length of output: 1549
| const getSpinName = () => { | ||
| const { spin } = config; | ||
| if (!spin) return; | ||
|
|
||
| if (typeof spin === 'string') { | ||
| return spin; | ||
| } | ||
|
|
||
| if (typeof spin === 'object') { | ||
| const { name } = spin; | ||
| return name; | ||
| } | ||
|
|
||
| return; | ||
| }; | ||
|
|
||
| const getSpinTip = () => { | ||
| const { spin } = config; | ||
| if (!spin || typeof spin !== 'object') return; | ||
| const { tip } = spin; | ||
| return tip; | ||
| }; | ||
|
|
||
| const getSpinColor = () => { | ||
| const { spin } = config; | ||
| if (!spin || typeof spin !== 'object') return; | ||
| const { color } = spin; | ||
| return color; | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议：提取公共逻辑，减少重复代码
getSpinName、getSpinTip 和 getSpinColor 三个函数的实现非常相似，可以考虑提取公共逻辑，创建一个通用函数来获取 spin 对象的属性。这将有助于减少代码重复，提升代码的可维护性。
可以修改为：
const getSpinProp = (propName: string) => {
const { spin } = config;
if (!spin) return;
if (typeof spin === 'string' && propName === 'name') {
return spin;
}
if (typeof spin === 'object') {
return spin[propName];
}
return;
};然后在代码中使用：
const name = nameProps ?? getSpinProp('name') ?? 'default';
const tip = tipProps ?? getSpinProp('tip');
const color = colorProps ?? getSpinProp('color');
packages/base/src/spin/spin.tsx
Outdated
|
|
||
| const color = colorProps ?? getSpinColor(); | ||
|
|
||
| console.log('color', color); |
There was a problem hiding this comment.
移除调试用的 console.log
第58行的 console.log('color', color); 似乎是用于调试的代码，建议在提交前移除，以避免在生产环境中输出多余的日志信息。
应用以下更改移除调试代码：
- console.log('color', color);📝 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.
| console.log('color', color); |
Types of changes
Changelog
Spin组件支持全局扩展配置，强化 setConfig 关于 Spin 组件的配置内容Other information
Summary by CodeRabbit
新功能
spin配置选项和示例，增强了组件的灵活性和可定制性。spinTokens对象中新增了spinColor属性，扩展了主题配置。文档
3.4.3-beta.11的变更日志，记录了spin配置选项的优化。