feat: 更新 setConfig Spin 组件配置内容 #714
Conversation
Walkthrough此次更改主要集中在Shineout组件库的全局配置文档和相关代码中，增加了新的配置选项并澄清了现有选项。新增的 Changes
Possibly related PRs
Poem
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: 0
🧹 Outside diff range and nitpick comments (6)
packages/base/src/spin/base.tsx (2)
10-12: props 解构的改进很好，但可以考虑使用默认值将
size重命名为sizeProps是个好主意，它有助于区分传入的 prop 和最终使用的size值。添加config和styles变量也是必要的。建议：考虑为
jssStyle添加默认值，以避免可能的空值引用：const { count = 0, render, size: sizeProps, className, jssStyle = {} } = props; const styles = jssStyle.spin?.();这样可以确保即使没有传入
jssStyle，代码也能正常运行。
14-19: getSpinSize 函数的实现很好，但可以更简洁
getSpinSize函数的添加是个很好的改进，它安全地从配置中获取size值。类型检查也很到位，可以防止潜在的运行时错误。建议：考虑使用可选链操作符来简化函数：
const getSpinSize = () => config.spin?.size;这样可以使代码更简洁，同时保持相同的功能和安全性。
docs/markdown/shineout/config.md (1)
74-75: 配置更新看起来不错，建议稍作改进新增的
mode和size属性增强了 Spin 组件的可配置性，这很好。示例也清晰地展示了如何使用这些新属性。不过，我建议在类型定义中为
mode和size添加简短的注释，以提高文档的可读性。建议如下修改：
类型： `spin: string | { name: string; color?: string; tip?: React.ReactNode; - mode?: 'vertical' | 'horizontal'; - size?: number; + mode?: 'vertical' | 'horizontal'; // Spin 的布局模式 + size?: number; // Spin 的尺寸 }`Also applies to: 89-96
packages/base/src/config/index.ts (1)
12-13: 新增的Spin配置选项增强了组件的灵活性这些新增的可选属性
mode和size为Spin组件提供了更多的配置选项，使其更加灵活和可定制。这些改动与PR的目标相符，并且不会破坏现有的功能。建议：
- 请确保更新相关的文档，以反映这些新的配置选项。
- 考虑为
size属性添加一个注释，说明其单位（例如像素）。packages/base/src/spin/spin.tsx (2)
52-57: 新增的getSpinMode函数看起来不错，但可以进行小幅改进。这个新函数很好地遵循了组件中其他 getter 函数的模式。它正确地处理了配置可能不存在或不是对象的情况。
为了保持一致性，建议将返回语句简化为：
return mode;而不是：
const { mode } = spin; return mode;这样可以与其他 getter 函数（如
getSpinName、getSpinTip）的风格保持一致。
65-65:mode赋值的更改很好，但可以考虑提高可读性。这个更改很好地实现了
mode的动态配置。它优先使用 prop 值，然后是配置值，最后默认为 'vertical'。这种方法与其他属性（如name、tip和color）的处理方式一致。为了提高可读性，可以考虑使用一个辅助函数来处理这种回退逻辑。例如：
const getValueWithFallback = (propValue: any, configValue: any, defaultValue: any) => propValue ?? configValue ?? defaultValue; // 然后在组件中使用： const mode = getValueWithFallback(modeProps, getSpinMode(), 'vertical');这样可以使代码更加清晰，并且可以在其他属性中重用这个逻辑。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
- docs/markdown/shineout/config.md (2 hunks)
- docs/theme/layout/desktop/menu/index.tsx (2 hunks)
- packages/base/src/config/index.ts (1 hunks)
- packages/base/src/spin/base.tsx (2 hunks)
- packages/base/src/spin/spin.tsx (2 hunks)
🧰 Additional context used
🔇 Additional comments (7)
packages/base/src/spin/base.tsx (2)
4-4: 导入 useConfig 钩子函数是个好主意引入
useConfig钩子函数可以让组件访问全局配置，这有助于提高组件的灵活性和可配置性。这是一个很好的改进。
21-21: size 计算逻辑优秀新的
size计算逻辑非常棒。它正确地优先使用 prop 值，然后是配置值，最后才使用默认值。使用空值合并运算符（??）是一个很好的选择，它可以正确处理0作为有效的size值。这种方法提供了很好的灵活性，允许在不同级别（组件 prop、全局配置、默认值）设置
size。packages/base/src/config/index.ts (2)
12-13: 总结：Spin组件配置的增强这次更改通过在
SpinConfig类型中添加mode和size选项，成功地增强了Spin组件的可配置性。这些改动：
- 与PR的目标完全一致。
- 实现简洁，类型安全。
- 不会破坏现有功能，因为新属性是可选的。
建议在合并此PR之前：
- 更新相关文档和示例。
- 确保Spin组件的实现能够正确处理这些新选项。
- 更新单元测试以覆盖新的配置场景。
总的来说，这是一个很好的改进，能够为用户提供更灵活的Spin组件配置选项。
12-13: 验证新配置选项在相关组件中的使用新增的
mode和size选项增强了Spin组件的配置能力。为确保这些更改的有效性和一致性，建议：
- 检查Spin组件的实现，确保它能正确处理这些新的配置选项。
- 更新Spin组件的单元测试，覆盖这些新的配置场景。
- 在组件文档中添加这些新选项的使用示例。
以下是验证脚本，用于检查Spin组件是否正确使用了新的配置选项：
packages/base/src/spin/spin.tsx (1)
17-17: 更改看起来不错！将
mode属性重命名为modeProps是一个好的做法。这样可以与其他属性（如nameProps、tipProps）保持一致，并为后续的mode处理提供更大的灵活性。docs/theme/layout/desktop/menu/index.tsx (2)
89-95: 配置更新看起来不错，建议进一步完善这些更改很好地增强了 Spin 组件的可配置性，与 PR 的目标相符。
建议采取以下步骤：
- 请与设计团队确认这些默认值是否符合预期设计。
- 考虑为每个属性添加注释，解释其用途和可能的值范围，以提高代码的可维护性。
例如：
spin: { name: 'ring', // Spin 的样式名称，可选值：'ring', 'plane', 等 color: '#000', // Spin 的颜色 tip: 'loading...', // 加载提示文字 size: 32, // Spin 的大小（像素） mode: 'horizontal', // 布局模式，可选值：'horizontal', 'vertical' },这将有助于其他开发者更好地理解和使用这些配置选项。
152-152: 代码风格小改进将 color 属性的引号从双引号改为单引号是个好的改动，有助于保持代码风格的一致性。
Types of changes
Changelog
Other information
Summary by CodeRabbit
新特性
spin配置选项，支持更详细的自定义，包括mode和size属性。Spin组件的配置方式改为使用对象，允许更灵活的配置。文档
setConfig方法的使用。样式
MenuComponent中调整了color属性的引号格式，以统一代码风格。