刷新按钮改用 span 结构 + flex 布局，彻底修复高度抖动\n\n问题：\n- width:120px + 字符 ↻ 在某些字体下被当成大尺寸字符渲染\n- 文字强制换行成两行，按钮高度暴涨到 150px+ 变成竖长方形\n\n修复：\n- 改用 ⟳ (U+27F3) 字符，更稳定\n- HTML 结构：<span class="btn-icon">⟳</span><span class="btn-text">刷新</span>\n- CSS 改用 display:inline-flex + align-items:center + justify-content:center\n- 固定 height:36px + padding:0 16px\n- JS 通过 .btn-text 选择器单独更新文字，保留图标 span

.workbuddy/memory/2026-07-17.md

@@ -136,3 +136,10 @@
 
 ### 测试验证
 - /api/sync 返回 ok:true，406本书同步成功
+
+## 13:25 Flask 静态文件缓存导致 CSS 不生效
+
+- 现象：磁盘上 CSS 已更新（width:120px），但服务器仍返回旧版本
+- 原因：Flask 开发服务器缓存静态文件，修改后需重启服务才能生效
+- 解决：pkill + 重启 app.py
+- 提示用户浏览器也要 Cmd+Shift+R 强制刷新清除缓存

static/css/style.css

@@ -767,7 +767,8 @@ body {
 }
 
 .shelf-refresh-btn {
-    padding: 7px 16px;
+    padding: 0 16px;
+    height: 36px;
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     font-size: 13px;
@@ -775,10 +776,19 @@ body {
     background: var(--bg-card);
     cursor: pointer;
     transition: color 0.2s, border-color 0.2s, opacity 0.2s;
-    white-space: nowrap;
-    width: 120px;
-    text-align: center;
     box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    flex-shrink: 0;
+    white-space: nowrap;
+}
+
+.shelf-refresh-btn .btn-icon {
+    display: inline-block;
+    font-size: 14px;
+    line-height: 1;
 }
 
 .shelf-refresh-btn:hover:not(:disabled) {

static/js/app.js

@@ -322,9 +322,10 @@ function filterByCategory(fullCategory) {
 
 async function refreshShelf() {
     const btn = document.getElementById("shelfRefreshBtn");
+    const textEl = btn.querySelector(".btn-text");
     btn.disabled = true;
     btn.classList.add("loading");
-    btn.textContent = "↻ 同步中...";
+    textEl.textContent = "同步中...";
 
     try {
         // Step 1: 从微信读书 API 同步数据到 MySQL
@@ -335,7 +336,7 @@ async function refreshShelf() {
         }
 
         // Step 2: 重新加载分类和书架
-        btn.textContent = "↻ 加载中...";
+        textEl.textContent = "加载中...";
         await loadShelfCategories();
         await loadShelf(1);
     } catch (e) {
@@ -344,7 +345,7 @@ async function refreshShelf() {
     } finally {
         btn.disabled = false;
         btn.classList.remove("loading");
-        btn.textContent = "↻ 刷新";
+        textEl.textContent = "刷新";
     }
 }
 

templates/index.html

@@ -125,7 +125,10 @@
                         <label class="filter-checkbox">
                             <input type="checkbox" id="finishedOnly"> 仅看已读完
                         </label>
-                        <button class="shelf-refresh-btn" id="shelfRefreshBtn" onclick="refreshShelf()" title="重新加载书架数据">↻ 刷新</button>
+                        <button class="shelf-refresh-btn" id="shelfRefreshBtn" onclick="refreshShelf()" title="重新加载书架数据">
+                            <span class="btn-icon">⟳</span>
+                            <span class="btn-text">刷新</span>
+                        </button>
                     </div>
                     <div class="shelf-info" id="shelfInfo"></div>
                 </div>