mirror of
https://github.com/Syngnat/GoNavi.git
synced 2026-07-21 12:51:47 +08:00
🐛 fix(sidebar): 放宽左侧树拖拽宽度上限
- 统一侧栏宽度常量,最大宽度放宽到 960px - 拖拽时按窗口宽度预留主工作区空间 - 同步 v2 与 legacy 侧栏 CSS 最大宽度 - 持久化侧栏宽度时允许保存更宽配置并补充测试
This commit is contained in:
23
frontend/src/utils/sidebarLayout.test.ts
Normal file
23
frontend/src/utils/sidebarLayout.test.ts
Normal 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);
|
||||
});
|
||||
});
|
||||
27
frontend/src/utils/sidebarLayout.ts
Normal file
27
frontend/src/utils/sidebarLayout.ts
Normal 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)),
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user