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 {