xuans/Smail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化非移动端菜单文字布局

Browse Source 
为设置菜单增加非压缩的水平布局、文字容器弹性和溢出裁切，避免设置页缩窄后菜单文字变形，同时补充布局测试。
This commit is contained in:
smail 2026-10-15 18:48:58 +08:00
parent 2083f22ce8
commit f87aaba649
2 changed files with 8 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/views/components/HomeHeader/HomeHeader.css
View File

@ -154,6 +154,8 @@
height: auto; height: auto;
min-height: 52px; min-height: 52px;
min-width: 0; min-width: 0;
width: 100%;
box-sizing: border-box;
justify-content: flex-start; justify-content: flex-start;
margin: 2px 0; margin: 2px 0;
padding: 8px !important; padding: 8px !important;
@ -187,6 +189,8 @@
align-items: center; align-items: center;
gap: 8px; gap: 8px;
min-width: 0; min-width: 0;
width: 100%;
flex-wrap: nowrap;
} }
.settings-category-icon { .settings-category-icon {
@ -196,8 +200,10 @@
.settings-category-copy { .settings-category-copy {
display: grid; display: grid;
flex: 1 1 auto;
gap: 2px; gap: 2px;
min-width: 0; min-width: 0;
overflow: hidden;
} }
.settings-category-label { .settings-category-label {

2
test/frontend/settings-menu.test.mjs
View File

@ -141,6 +141,8 @@ test('配置管理只在真实移动端将内部导航移到内容顶部', () =>
const containerRule = config.slice(containerStart, desktopStart) const containerRule = config.slice(containerStart, desktopStart)
assert.match(header, /:size="isMobile \? '100%' : '50%'"/) assert.match(header, /:size="isMobile \? '100%' : '50%'"/)
assert.match(read('HomeHeader/HomeHeader.css'), /\.settings-drawer\.el-drawer[\s\S]*right: 0[\s\S]*inset-block: 0[\s\S]*border-radius: 0;/) assert.match(read('HomeHeader/HomeHeader.css'), /\.settings-drawer\.el-drawer[\s\S]*right: 0[\s\S]*inset-block: 0[\s\S]*border-radius: 0;/)
assert.match(read('HomeHeader/HomeHeader.css'), /\.settings-category[\s\S]*flex-wrap: nowrap;/)
assert.match(read('HomeHeader/HomeHeader.css'), /\.settings-category-copy[\s\S]*flex: 1 1 auto;[\s\S]*overflow: hidden;/)
assert.match(read('HomeHeader/HomeHeader.css'), /@media \(max-width: 768px\)[\s\S]*\.settings-drawer\.el-drawer[\s\S]*right: 0;/) assert.match(read('HomeHeader/HomeHeader.css'), /@media \(max-width: 768px\)[\s\S]*\.settings-drawer\.el-drawer[\s\S]*right: 0;/)
assert.match(config, /grid-template-areas: "main submenu"/) assert.match(config, /grid-template-areas: "main submenu"/)
assert.match(config, /@media \(min-width: 769px\)[\s\S]*grid-template-columns: minmax\(0, 1fr\)/) assert.match(config, /@media \(min-width: 769px\)[\s\S]*grid-template-columns: minmax\(0, 1fr\)/)