lanyuanxiaoyao/DiAL
1
0
Fork 0
Code Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

28
DEVELOPMENT.md
View File

@@ -563,7 +563,7 @@ main.tsx
│ ├── useMeta() ───── GET /api/meta（应用生命周期内缓存）
│ └── TargetGroup[]（Card 包裹 PrimaryTable，headerBordered）
│ └── PrimaryTable ← createTargetTableColumns(checkerTypes)
│ └── TargetDetailDrawer（目标详情抽屉，width=52%，TDesign 生命周期控制）
│ └── TargetDetailDrawer（目标详情抽屉，响应式默认宽度、支持鼠标拖拽调整，TDesign 生命周期控制）
│ └── useTargetDetail() ── 按需发起 metrics 查询，history 延迟到记录 Tab 激活后请求
│ ├── activeTab 受控 Tabs 状态，每次打开重置为 overview
│ ├── OverviewTab → Descriptions（直接展示）+ 4×2 统计卡片 + TrendChart
@@ -689,19 +689,19 @@ export function TargetGroup({ name, targets, onTargetClick }: TargetGroupProps)
#### 现有组件清单
| 组件 | 文件 | 用途 |
| -------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------ |
| `App` | `app.tsx` | 根组件，Layout + HeadMenu 骨架、主题模式选择、刷新倒计时、Skeleton 加载 |
| `ErrorBoundary` | `components/ErrorBoundary.tsx` | React 错误边界，捕获渲染异常并展示降级 UI |
| `SummaryCards` | `components/SummaryCards.tsx` | 总览统计卡片（单 Card 内嵌居中 Statistic，无 shadow） |
| `TargetBoard` | `components/TargetBoard.tsx` | 按分组渲染目标表格列表（Space 24px 间距） |
| `TargetGroup` | `components/TargetGroup.tsx` | 单个分组 Card（title+actions+headerBordered）+ PrimaryTable |
| `TargetDetailDrawer` | `components/TargetDetailDrawer.tsx` | 目标详情抽屉（width=52%、TDesign 生命周期控制、preventScrollThrough、受控 Tabs、记录 TabPanel 懒渲染） |
| `OverviewTab` | `components/OverviewTab.tsx` | 目标详情概览（Descriptions 直接展示 + 4×2 统计卡片 + 趋势） |
| `HistoryTab` | `components/HistoryTab.tsx` | 目标历史记录表格和分页 |
| `TrendChart` | `components/TrendChart.tsx` | Recharts 趋势折线图（耗时+延迟范围） |
| `StatusDot` | `components/StatusDot.tsx` | 圆形状态指示点（绿/红） |
| `StatusBar` | `components/StatusBar.tsx` | 最近采样状态条（多色块 + Tooltip 提示时间和状态） |
| 组件 | 文件 | 用途 |
| -------------------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `App` | `app.tsx` | 根组件，Layout + HeadMenu 骨架、主题模式选择、刷新倒计时、Skeleton 加载 |
| `ErrorBoundary` | `components/ErrorBoundary.tsx` | React 错误边界，捕获渲染异常并展示降级 UI |
| `SummaryCards` | `components/SummaryCards.tsx` | 总览统计卡片（单 Card 内嵌居中 Statistic，无 shadow） |
| `TargetBoard` | `components/TargetBoard.tsx` | 按分组渲染目标表格列表（Space 24px 间距） |
| `TargetGroup` | `components/TargetGroup.tsx` | 单个分组 Card（title+actions+headerBordered）+ PrimaryTable |
| `TargetDetailDrawer` | `components/TargetDetailDrawer.tsx` | 目标详情抽屉（响应式默认宽度、支持鼠标拖拽调整、TDesign 生命周期控制、preventScrollThrough、受控 Tabs、记录 TabPanel 懒渲染） |
| `OverviewTab` | `components/OverviewTab.tsx` | 目标详情概览（Descriptions 直接展示 + 4×2 统计卡片 + 趋势） |
| `HistoryTab` | `components/HistoryTab.tsx` | 目标历史记录表格和分页 |
| `TrendChart` | `components/TrendChart.tsx` | Recharts 趋势折线图（耗时+延迟范围） |
| `StatusDot` | `components/StatusDot.tsx` | 圆形状态指示点（绿/红） |
| `StatusBar` | `components/StatusBar.tsx` | 最近采样状态条（多色块 + Tooltip 提示时间和状态） |
### 2.5 新增功能开发步骤