diff --git a/openless-all/app/src/pages/settings/CheckUpdateButton.tsx b/openless-all/app/src/pages/settings/CheckUpdateButton.tsx index 116b46a1..7c1a188e 100644 --- a/openless-all/app/src/pages/settings/CheckUpdateButton.tsx +++ b/openless-all/app/src/pages/settings/CheckUpdateButton.tsx @@ -43,13 +43,17 @@ export function CheckUpdateButton({ channel }: { channel: UpdateChannel }) { ? t('settings.about.upToDate') : undefined } - style={{ ...btnGhostStyle, color, opacity: checking || busy ? 0.7 : 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6, minWidth: 84 }} + // 固定宽度 + 内容居中:图标(check ↔ refresh)与 label("检查更新" ↔ "检查中…") + // 切换时按钮尺寸不再跳动;图标固定容器保证旋转时绕中心转、不位移。 + style={{ ...btnGhostStyle, color, opacity: checking || busy ? 0.7 : 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6, minWidth: 160 }} > - + + + {label} {isDialogStatus(status) && ( diff --git a/openless-all/app/src/styles/global.css b/openless-all/app/src/styles/global.css index fcce2c97..f3753c35 100644 --- a/openless-all/app/src/styles/global.css +++ b/openless-all/app/src/styles/global.css @@ -117,9 +117,10 @@ a { color: inherit; text-decoration: none; } to { opacity: 1; transform: translateY(0); } } -/* 通用旋转 —— 「检查更新」按钮检查中的转圈动画等。 */ +/* 通用旋转 —— 「检查更新」按钮检查中的转圈动画等。 + refresh 图标是逆时针(ccw)箭头,旋转方向与其一致,避免视觉上"反着转"。 */ @keyframes ol-spin { - to { transform: rotate(360deg); } + to { transform: rotate(-360deg); } } @keyframes ol-modal-drawer-in {