diff --git a/src/_test/electron/library-notes.integration.js b/src/_test/electron/library-notes.integration.js index edc0378..885a23f 100644 --- a/src/_test/electron/library-notes.integration.js +++ b/src/_test/electron/library-notes.integration.js @@ -593,6 +593,35 @@ app.whenReady().then(async () => { }); })()`) ); + const longShelfName = 'TheArtOfComputerProgramming超长分类名称'; + library.updateShelf(researchShelf.id, { name: longShelfName }); + await pollJs( + '超长分类名称刷新', + `Array.from(document.querySelectorAll('#libraryShelfList .library-filter')) + .some((button) => button.firstElementChild.textContent === ${JSON.stringify(longShelfName)})` + ); + check( + '超长分类只省略名称并完整保留数量与操作区', + await js(`(() => { + const button = Array.from(document.querySelectorAll('#libraryShelfList .library-filter')) + .find((candidate) => candidate.firstElementChild.textContent === ${JSON.stringify(longShelfName)}); + const name = button.firstElementChild; + const count = button.querySelector('.library-filter-count'); + const actions = button.closest('.library-shelf-row').querySelector('.library-shelf-actions'); + return getComputedStyle(button).display === 'flex' + && getComputedStyle(name).textOverflow === 'ellipsis' + && name.scrollWidth > name.clientWidth + && count.textContent === '(1)' + && count.getBoundingClientRect().width > 0 + && count.getBoundingClientRect().right <= actions.getBoundingClientRect().left + 1; + })()`) + ); + library.updateShelf(researchShelf.id, { name: researchShelf.name }); + await pollJs( + '恢复研究书架名称', + `Array.from(document.querySelectorAll('#libraryShelfList .library-filter')) + .some((button) => button.firstElementChild.textContent === ${JSON.stringify(researchShelf.name)})` + ); check( '标签侧栏显示真实聚合计数', await js(`(() => { diff --git a/src/_test/ui.test.js b/src/_test/ui.test.js index 752f039..f2f4a54 100644 --- a/src/_test/ui.test.js +++ b/src/_test/ui.test.js @@ -620,7 +620,15 @@ test('侧栏行内操作不占据布局,选中高亮与静态筛选项等宽', assert.doesNotMatch(css, /\.library-shelf-actions\s*\{\s*display:\s*flex;\s*flex:\s*none/); assert.match(css, /\.library-shelf-row \.library-filter,\s*\n\.library-tag-row \.library-filter\s*\{[^}]*padding-right:\s*48px/); // 分类数量紧跟名称显示为「分类(数量)」,不再像标签数量那样浮到右侧 - assert.match(css, /#libraryTab \.library-filter\[data-shelf\] \.library-filter-count,\s*\n\.library-shelf-row \.library-filter-count\s*\{\s*float:\s*none/); + assert.match(css, /\.library-shelf-row \.library-filter\s*\{[^}]*display:\s*flex/); + const shelfName = css.match( + /\.library-shelf-row \.library-filter > span:first-child\s*\{([^}]*)\}/ + ); + assert.ok(shelfName, '缺少长分类名称的独立省略样式'); + assert.match(shelfName[1], /min-width:\s*0/); + assert.match(shelfName[1], /overflow:\s*hidden/); + assert.match(shelfName[1], /text-overflow:\s*ellipsis/); + assert.match(css, /#libraryTab \.library-filter\[data-shelf\] \.library-filter-count,\s*\n\.library-shelf-row \.library-filter-count\s*\{[^}]*flex:\s*none;[^}]*float:\s*none/); const actionButtons = css.match( /\.library-shelf-actions \.notes-icon-btn,\s*\n\.library-tag-actions \.notes-icon-btn\s*\{([^}]*)\}/ ); diff --git a/src/ui/style.css b/src/ui/style.css index 0cac1ca..5ffada2 100644 --- a/src/ui/style.css +++ b/src/ui/style.css @@ -714,6 +714,16 @@ body { .library-tag-row { position: relative; display: flex; align-items: center; } .library-shelf-row .library-filter, .library-tag-row .library-filter { flex: 1; padding-right: 48px; } +.library-shelf-row .library-filter { + display: flex; + align-items: center; +} +.library-shelf-row .library-filter > span:first-child { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} .library-shelf-actions, .library-tag-actions { position: absolute; @@ -741,7 +751,10 @@ body { } .library-filter-count { float: right; color: var(--text-dim); } #libraryTab .library-filter[data-shelf] .library-filter-count, -.library-shelf-row .library-filter-count { float: none; } +.library-shelf-row .library-filter-count { + flex: none; + float: none; +} .library-content { min-width: 0; } .library-search { display: flex;