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

@@ -1,6 +1,6 @@
import type { ReactNode } from "react";
import { Col, Descriptions, Divider, Row, Skeleton, Space, Statistic, Typography } from "tdesign-react";
import { Col, Descriptions, Divider, Row, Skeleton, Space, Statistic } from "tdesign-react";
import type { TargetMetricsResponse, TargetStatus } from "../../shared/api";
@@ -97,11 +97,8 @@ export function OverviewTab({ metricsData, metricsLoading, target }: OverviewTab
function OverviewStatItem({ color, suffix, title, value }: OverviewStatItemProps) {
return (
<div className="overview-stat-card">
<div className="overview-stat-item">
<Typography.Text theme="secondary">{title}</Typography.Text>
<Statistic className="overview-stat-value" color={color} suffix={suffix} value={value} />
</div>
<div className="overview-stat-card summary-stat-col">
<Statistic color={color} suffix={suffix} title={title} value={value} />
</div>
);
}