mirror of
https://github.com/KingHWJ/WeReadBoard.git
synced 2026-11-03 18:24:58 +08:00
刷新按钮改用 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
This commit is contained in:
1 parent
baeda63646
commit
c3f5c0ff03
4 files changed
+29
-8
No files matched your search
+14
-4
@@ -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) {
|
||||
|
||||
+4
-3
@@ -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 = "刷新";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user