From 5d624cbc569ea72adb7d1011bdce82af90f45939 Mon Sep 17 00:00:00 2001 From: 1w1w11w1 <1252530896@qq.com> Date: Fri, 13 Nov 2026 17:32:22 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix(settings):=20=E5=AF=B9=E9=BD=90?= =?UTF-8?q?=E5=85=B3=E4=BA=8E=E9=A1=B5=E4=B8=8E=E5=85=B6=E4=BB=96=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=E9=A1=B5=E5=AE=BD=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- changelog.d/settings-tab-width.fix.md | 2 + frontend/e2e/settings.pw.ts | 37 +++++++++++++++++++ .../components/SettingsSectionLayout.vue | 15 +------- 3 files changed, 41 insertions(+), 13 deletions(-) create mode 100644 changelog.d/settings-tab-width.fix.md diff --git a/changelog.d/settings-tab-width.fix.md b/changelog.d/settings-tab-width.fix.md new file mode 100644 index 0000000000..65845d2099 --- /dev/null +++ b/changelog.d/settings-tab-width.fix.md @@ -0,0 +1,2 @@ +project: settings +修复切换设置页“关于”标签时页面宽度不一致、标题横向移动的问题 diff --git a/frontend/e2e/settings.pw.ts b/frontend/e2e/settings.pw.ts index d84f100887..f61e9f5edb 100644 --- a/frontend/e2e/settings.pw.ts +++ b/frontend/e2e/settings.pw.ts @@ -697,6 +697,43 @@ test.describe('@settings user preferences', () => { await expect(navigation).toHaveCount(0) await expect(page.locator('.settings-navigation-toggle')).toHaveCount(0) await app.evidence('settings-layout-about') + + const horizontalBounds = () => + page.locator('.settings-shell-header, .settings-tabs > .ant-tabs-nav').evaluateAll(elements => + elements.map(element => { + const { x, width } = element.getBoundingClientRect() + return { x, width } + }) + ) + await page.getByRole('tab', { name: 'Interface', exact: true }).click() + const theme = page.locator('.theme-mode-control') + const originalTheme = await theme.locator('.ant-segmented-item-selected').innerText() + try { + for (const mode of ['Light', 'Dark']) { + await page.getByRole('tab', { name: 'Interface', exact: true }).click() + await chooseSegment(theme, mode) + await expect(page.locator('html')).not.toHaveClass(/theme-transition/) + for (const width of [1920, 1040]) { + await page.setViewportSize({ width, height: 900 }) + await page.getByRole('tab', { name: 'Interface', exact: true }).click() + const referenceBounds = await horizontalBounds() + await app.evidence(`settings-width-${mode}-${width}-interface`) + for (const tab of ['Features', 'Notifications', 'Advanced', 'About']) { + await page.getByRole('tab', { name: tab, exact: true }).click() + if (tab === 'About') await app.evidence(`settings-width-${mode}-${width}-about`) + await expect + .poll(horizontalBounds, `${mode} ${width}px: ${tab} keeps the title and tabs aligned`) + .toEqual(referenceBounds) + expect( + await pane.evaluate(element => element.scrollWidth - element.clientWidth) + ).toBeLessThanOrEqual(1) + } + } + } + } finally { + await page.getByRole('tab', { name: 'Interface', exact: true }).click() + await chooseSegment(theme, originalTheme) + } }) test('keeps the section navigation under user control instead of window width', async ({ diff --git a/frontend/src/views/setting/components/SettingsSectionLayout.vue b/frontend/src/views/setting/components/SettingsSectionLayout.vue index 226c4a60fd..b507f0294a 100644 --- a/frontend/src/views/setting/components/SettingsSectionLayout.vue +++ b/frontend/src/views/setting/components/SettingsSectionLayout.vue @@ -92,8 +92,6 @@ async function toggleNavigation() { :class="{ 'settings-shell--navigation-available': navigationAvailable, 'settings-shell--with-nav': hasNavigation, - 'settings-shell--dual': effectiveDual, - 'settings-shell--about': activeKey === 'others', }" >
@@ -168,7 +166,7 @@ async function toggleNavigation() {