1
0

feat: Drawer 响应式默认宽度与拖拽调整,统计卡片上下布局优化

Drawer 宽度从固定百分比改为按视口响应式默认值(6段断点),宽屏占比更小、窄屏占比更大。

启用 TDesign sizeDraggable 原生拖拽调整能力,配置 min/max 视口安全边界,不持久化拖拽宽度。

概览统计卡片改为 TDesign Statistic 上下布局(与 SummaryCards 一致),提升窄屏视觉体验。

Drawer header 间距调大,MutationObserver polyfill 补全。
This commit is contained in:
2026-05-15 23:10:08 +08:00
parent c46ab14cce
commit 88f4119a4e
14 changed files with 331 additions and 49 deletions

View File

@@ -85,4 +85,39 @@ describe("TargetDetailDrawer", () => {
// Just verify rendering doesn't throw
expect(asFragment()).not.toBeNull();
});
test("Drawer 使用响应式默认宽度 CSS 变量", () => {
render(<TargetDetailDrawer {...defaultProps} />);
const wrapper = document.querySelector<HTMLElement>(".t-drawer__content-wrapper")!;
expect(wrapper).not.toBeNull();
expect(wrapper.style.width).toBe("var(--target-detail-drawer-width)");
});
test("Drawer 包含业务 className", () => {
render(<TargetDetailDrawer {...defaultProps} />);
const drawer = document.querySelector(".target-detail-drawer");
expect(drawer).not.toBeNull();
});
test("Drawer 启用 sizeDraggable 拖拽", () => {
render(<TargetDetailDrawer {...defaultProps} />);
const wrapper = document.querySelector<HTMLElement>(".t-drawer__content-wrapper")!;
expect(wrapper).not.toBeNull();
const dragLine = wrapper.querySelector('[style*="col-resize"]');
expect(dragLine).not.toBeNull();
});
test("Drawer 拖拽宽度不写入 localStorage", () => {
const keysBefore = window.localStorage.length;
render(<TargetDetailDrawer {...defaultProps} />);
expect(window.localStorage.length).toBe(keysBefore);
});
test("Drawer sizeDraggable 配置最小拖拽边界", () => {
render(<TargetDetailDrawer {...defaultProps} />);
const wrapper = document.querySelector<HTMLElement>(".t-drawer__content-wrapper")!;
expect(wrapper).not.toBeNull();
const dragLine = wrapper.querySelector('[style*="col-resize"]');
expect(dragLine).not.toBeNull();
});
});