feat: Drawer 响应式默认宽度与拖拽调整,统计卡片上下布局优化
Drawer 宽度从固定百分比改为按视口响应式默认值(6段断点),宽屏占比更小、窄屏占比更大。 启用 TDesign sizeDraggable 原生拖拽调整能力,配置 min/max 视口安全边界,不持久化拖拽宽度。 概览统计卡片改为 TDesign Statistic 上下布局(与 SummaryCards 一致),提升窄屏视觉体验。 Drawer header 间距调大,MutationObserver polyfill 补全。
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import type { TabValue } from "tdesign-react";
|
||||
|
||||
import { useCallback, useState } from "react";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import { DateRangePicker, Drawer, RadioGroup, Space, Tabs, Tag, Typography } from "tdesign-react";
|
||||
|
||||
import type { HistoryResponse, TargetMetricsResponse, TargetStatus } from "../../shared/api";
|
||||
@@ -72,13 +72,23 @@ export function TargetDetailDrawer({
|
||||
|
||||
const isUp = target?.latestCheck?.matched;
|
||||
|
||||
const dragLimits = useMemo(() => {
|
||||
const viewportWidth = window.innerWidth;
|
||||
const safeGap = 24;
|
||||
return {
|
||||
max: Math.min(1200, Math.max(360, viewportWidth - safeGap)),
|
||||
min: 360,
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
attach="body"
|
||||
className="target-detail-drawer"
|
||||
footer={false}
|
||||
header={
|
||||
target ? (
|
||||
<Space align="center" size={8}>
|
||||
<Space align="center" size={12}>
|
||||
<StatusDot up={!!isUp} />
|
||||
<Typography.Text strong>{target.name}</Typography.Text>
|
||||
<Tag size="small" theme="primary" variant="light-outline">
|
||||
@@ -92,7 +102,8 @@ export function TargetDetailDrawer({
|
||||
preventScrollThrough
|
||||
showInAttachedElement={false}
|
||||
showOverlay
|
||||
size="55%"
|
||||
size="var(--target-detail-drawer-width)"
|
||||
sizeDraggable={dragLimits}
|
||||
visible={!!target}
|
||||
>
|
||||
<Space className="full-width" direction="vertical" size={16}>
|
||||
|
||||
Reference in New Issue
Block a user