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

优化非移动端设置页百分之五十布局

Browse Source 
设置页在非移动端固定占视口宽度百分之五十，贴合右侧和上下边缘并移除圆角；移动端继续保持全屏布局，同时更新布局测试。
This commit is contained in:
smail 2026-10-15 18:26:20 +08:00
parent 5acabcd877
commit 2083f22ce8
3 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -75,11 +75,11 @@
/* 抽屉由 Teleport 挂载，使用专属类限定，不能依赖祖先的作用域属性。 */
:global(.settings-drawer.el-drawer) {
right: 16px;
inset-block: 12px;
height: auto;
max-height: calc(100dvh - 24px);
border-radius: 18px;
right: 0;
inset-block: 0;
height: 100dvh;
max-height: none;
border-radius: 0;
overflow: hidden;
}

2
frontend/src/views/components/HomeHeader/HomeHeader.vue
View File

@ -20,7 +20,7 @@
<!-- 设置抽屉保留右侧导航，一级分类不影响内部标签页。 -->
<el-drawer
v-model="globalStatus.settingsDrawerVisible"
:size="isMobile ? '100%' : 'min(1180px, calc(100vw - 32px))'"
:size="isMobile ? '100%' : '50%'"
:title="lang.settings"
class="settings-drawer"
:with-header="true"

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

@ -139,8 +139,8 @@ test('配置管理只在真实移动端将内部导航移到内容顶部', () =>
const containerStart = config.indexOf('@container settings-content (max-width: 560px)')
const desktopStart = config.indexOf('@media (min-width: 769px)', containerStart)
const containerRule = config.slice(containerStart, desktopStart)
assert.match(header, /min\(1180px, calc\(100vw - 32px\)\)/)
assert.match(read('HomeHeader/HomeHeader.css'), /\.settings-drawer\.el-drawer[\s\S]*right: 16px[\s\S]*border-radius: 18px;/)
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'), /@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, /@media \(min-width: 769px\)[\s\S]*grid-template-columns: minmax\(0, 1fr\)/)