🐛 fix(sidebar): 放宽左侧树拖拽宽度上限

- 统一侧栏宽度常量,最大宽度放宽到 960px
- 拖拽时按窗口宽度预留主工作区空间
- 同步 v2 与 legacy 侧栏 CSS 最大宽度
- 持久化侧栏宽度时允许保存更宽配置并补充测试
This commit is contained in:
Syngnat
2026-07-02 15:20:59 +08:00
parent 9b5e785d67
commit 0707d60f0b
8 changed files with 96 additions and 15 deletions

View File

@@ -0,0 +1,23 @@
import { describe, expect, it } from 'vitest';
import {
DEFAULT_SIDEBAR_WIDTH,
SIDEBAR_RESIZE_MAX_WIDTH,
SIDEBAR_RESIZE_MIN_WIDTH,
resolveSidebarResizeMaxWidth,
sanitizeSidebarWidth,
} from './sidebarLayout';
describe('sidebar layout bounds', () => {
it('allows wider persisted sidebar widths while keeping invalid values safe', () => {
expect(sanitizeSidebarWidth(880)).toBe(880);
expect(sanitizeSidebarWidth(1200)).toBe(SIDEBAR_RESIZE_MAX_WIDTH);
expect(sanitizeSidebarWidth(120)).toBe(SIDEBAR_RESIZE_MIN_WIDTH);
expect(sanitizeSidebarWidth('bad')).toBe(DEFAULT_SIDEBAR_WIDTH);
});
it('keeps enough workbench space when resolving drag width on smaller windows', () => {
expect(resolveSidebarResizeMaxWidth(1600)).toBe(SIDEBAR_RESIZE_MAX_WIDTH);
expect(resolveSidebarResizeMaxWidth(1180)).toBe(820);
expect(resolveSidebarResizeMaxWidth(480)).toBe(SIDEBAR_RESIZE_MIN_WIDTH);
});
});

View File

@@ -0,0 +1,27 @@
export const DEFAULT_SIDEBAR_WIDTH = 330;
export const SIDEBAR_RESIZE_MIN_WIDTH = 200;
export const SIDEBAR_SIDER_MIN_WIDTH = 232;
export const SIDEBAR_RESIZE_MAX_WIDTH = 960;
export const SIDEBAR_MIN_WORKBENCH_WIDTH = 360;
export const resolveSidebarResizeMaxWidth = (
viewportWidth: unknown,
minWidth = SIDEBAR_RESIZE_MIN_WIDTH,
): number => {
const parsedViewportWidth = Number(viewportWidth);
if (!Number.isFinite(parsedViewportWidth) || parsedViewportWidth <= 0) {
return SIDEBAR_RESIZE_MAX_WIDTH;
}
const viewportLimitedWidth = Math.trunc(parsedViewportWidth) - SIDEBAR_MIN_WORKBENCH_WIDTH;
return Math.max(minWidth, Math.min(SIDEBAR_RESIZE_MAX_WIDTH, viewportLimitedWidth));
};
export const sanitizeSidebarWidth = (value: unknown): number => {
const parsed = Number(value);
if (!Number.isFinite(parsed)) return DEFAULT_SIDEBAR_WIDTH;
return Math.max(
SIDEBAR_RESIZE_MIN_WIDTH,
Math.min(SIDEBAR_RESIZE_MAX_WIDTH, Math.trunc(parsed)),
);
};