Freya 项目中 Loader 组件尺寸定制化增强方案

在 UI 组件库 Freya 的开发过程中，Loader 组件作为常见的加载指示器，其尺寸定制化能力是一个值得关注的优化点。本文将深入探讨如何为 Loader 组件实现灵活的尺寸定制功能。

背景与现状分析

当前 Freya 项目中的 Loader 组件存在一个明显的局限性——其尺寸被硬编码为固定的 48x48 像素。这种设计虽然简单直接，但在实际应用场景中却显得不够灵活。现代前端应用往往需要根据不同的使用场景和布局需求调整加载指示器的大小。

技术方案设计

核心思路

通过引入新的 prop 属性来允许开发者自定义 Loader 的尺寸，同时保持向后兼容性。具体实现方案包括：

1. 新增一个 String 类型的 size 属性
2. 默认值设置为 "48" 以保持现有行为不变
3. 在组件内部将字符串值转换为实际渲染尺寸

为什么选择 String 类型

选择 String 类型而非 f32 浮点数主要基于以下考虑：

1. 更符合前端开发习惯（类似 CSS 中的尺寸单位）
2. 便于支持多种单位（如 "48px"、"2rem"、"50%"等）
3. 简化类型转换逻辑
4. 提高 API 的灵活性和可扩展性

实现细节

在具体实现上，我们需要：

1. 修改组件属性定义，添加 size 参数
2. 更新组件样式逻辑，支持动态尺寸
3. 确保 SVG 或其他视觉元素能够正确缩放
4. 添加类型检查和默认值处理
5. 编写相应的文档和示例

兼容性考虑

为了确保平滑升级：

1. 保持默认行为与现有版本一致
2. 对非法输入进行合理处理（如回退到默认值）
3. 在文档中明确说明变更点

最佳实践建议

在实际项目中使用时，建议：

1. 优先使用相对单位（如 rem）以确保可访问性
2. 在不同设备上测试不同尺寸的表现
3. 考虑与整体设计系统的尺寸比例协调
4. 对于关键路径的加载指示器，保持足够大的尺寸以确保可见性

总结

通过为 Freya 的 Loader 组件添加尺寸定制功能，可以显著提升组件的灵活性和适用性。这种改进不仅满足了开发者的个性化需求，也使组件能够更好地适应各种复杂的应用场景。String 类型的尺寸参数设计既保持了简单性，又为未来的扩展留下了空间，是一个平衡而实用的解决方案。