From c4290071b0d9df0d12c88790c1347ef5f7ac13af Mon Sep 17 00:00:00 2001
From: sim <sim@local>
Date: Mon, 3 Aug 2026 10:37:00 +0800
Subject: [PATCH] =?UTF-8?q?fix(update-button):=20=E6=A3=80=E6=9F=A5?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=8C=89=E9=92=AE=E6=97=8B=E8=BD=AC=E6=96=B9?=
 =?UTF-8?q?=E5=90=91=E4=B8=8E=E5=B0=BA=E5=AF=B8=E7=A8=B3=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ol-spin 改为逆时针，与 refresh（ccw）图标方向一致
- 按钮固定宽度 + 内容居中；图标固定 14x14 容器，check/refresh 切换与旋转时不再跳动
---
 .../app/src/pages/settings/CheckUpdateButton.tsx | 16 ++++++++++------
 openless-all/app/src/styles/global.css           |  5 +++--
 2 files changed, 13 insertions(+), 8 deletions(-)

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 }}
       >
-        <Icon
-          name={iconName}
-          size={12}
-          style={checking ? { animation: 'ol-spin 0.8s linear infinite' } : undefined}
-        />
+        <span style={{ display: 'inline-flex', width: 14, height: 14, alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+          <Icon
+            name={iconName}
+            size={12}
+            style={checking ? { animation: 'ol-spin 0.8s linear infinite' } : undefined}
+          />
+        </span>
         <span style={{ whiteSpace: 'nowrap' }}>{label}</span>
       </button>
       {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 {