feat: Drawer 响应式默认宽度与拖拽调整,统计卡片上下布局优化
Drawer 宽度从固定百分比改为按视口响应式默认值(6段断点),宽屏占比更小、窄屏占比更大。 启用 TDesign sizeDraggable 原生拖拽调整能力,配置 min/max 视口安全边界,不持久化拖拽宽度。 概览统计卡片改为 TDesign Statistic 上下布局(与 SummaryCards 一致),提升窄屏视觉体验。 Drawer header 间距调大,MutationObserver polyfill 补全。
This commit is contained in:
@@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user