-
Notifications
You must be signed in to change notification settings - Fork 7
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Spin
组件支持全局扩展配置
#713
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,9 @@ | ||
## 3.4.3-beta.11 | ||
2024-10-12 | ||
|
||
### 💎 Enhancement | ||
- 优化 `setConfig` 中 `spin` 的配置项,支持全局配置更多内容 | ||
|
||
## 3.4.0 | ||
2024-09-19 | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,5 @@ | ||
import Token from '@sheinx/theme'; | ||
|
||
const Default = (count = 12) => { | ||
const animationDelay: any = {}; | ||
|
||
|
@@ -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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 💡 Codebase verification 存在未替换的硬编码颜色值 在以下文件中仍然存在硬编码的
建议将这些硬编码颜色值替换为 🔗 Analysis chain使用主题 Token 替换硬编码的颜色值 将硬编码的颜色值
为了确保这个改动的一致性,我们可以检查其他使用 Spin 组件的地方是否也进行了类似的更新: 🏁 Scripts executedThe 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 |
||
borderRadius: 5, | ||
animation: '$keyframesFade 1s infinite ease-in-out both', | ||
}, | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,8 @@ | ||
import Token from '@sheinx/theme'; | ||
|
||
export default { | ||
// margin: 'auto', | ||
boxSizing: 'border-box', | ||
animation: '$plane 1s linear infinite', | ||
background: '#197AFA', | ||
background: Token.spinColor, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,9 @@ | ||
import Token from '@sheinx/theme'; | ||
|
||
export default { | ||
// margin: 'auto', | ||
boxSizing: 'border-box', | ||
borderRadius: '100%', | ||
animation: '$pulse 1s linear infinite', | ||
background: '#197AFA', | ||
background: Token.spinColor, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,11 @@ | ||
import Token from '@sheinx/theme'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 💡 Codebase verification 发现部分样式文件仍包含硬编码颜色值。
🔗 Analysis chain更改看起来不错,提高了主题的灵活性。 这些更改通过使用 为确保一致性,请运行以下脚本来检查其他样式文件是否也需要类似的更改: Also applies to: 8-8 为了确保验证脚本正确运行,请使用以下修正后的脚本重新检查: 🏁 Scripts executedThe 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 |
||
|
||
export default { | ||
// margin: 'auto', | ||
boxSizing: 'border-box', | ||
position: 'relative', | ||
borderStyle: 'solid', | ||
borderColor: '#197AFA', | ||
borderColor: Token.spinColor, | ||
borderRadius: '50%', | ||
animation: '$ring 1s linear infinite', | ||
borderTopColor: 'transparent', | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,5 @@ | ||
import Token from '@sheinx/theme'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 💡 Codebase verification 发现未替换的硬编码颜色 在以下文件中仍然使用了硬编码的颜色值
建议将这些硬编码的颜色值替换为 🔗 Analysis chain验证 Token.spinColor 的使用情况 为确保变更的一致性和完整性,我们应该检查 Also applies to: 15-15 为了确保验证脚本能够正确执行,请使用以下修正后的脚本重新验证: 🏁 Scripts executedThe 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 |
||
|
||
export default { | ||
// margin: 'auto', | ||
textAlign: 'center', | ||
|
@@ -10,7 +12,7 @@ export default { | |
animation: '$three-bounce 1.4s ease-in-out 0s infinite both', | ||
|
||
'& svg': { | ||
fill: '#197AFA', | ||
fill: Token.spinColor, | ||
}, | ||
|
||
'&:nth-child(1)': { | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 💡 Codebase verification 发现问题: 新增的 请确保生成脚本中包含 🔗 Analysis chain新增的 新增的 然而,由于此文件是自动生成的,我们需要确保这些更改也反映在生成脚本中。 请运行以下脚本来验证更改是否正确反映在生成过程中: 🏁 Scripts executedThe 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 |
||
spinBackgroundColor: 'Neutral-fill-1', | ||
}; | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
建议:提取公共逻辑,减少重复代码
getSpinName
、getSpinTip
和getSpinColor
三个函数的实现非常相似,可以考虑提取公共逻辑,创建一个通用函数来获取spin
对象的属性。这将有助于减少代码重复,提升代码的可维护性。可以修改为:
然后在代码中使用: