lanyuanxiaoyao/DiAL
1
0
Fork 0
Code Activity

feat: Dashboard 主题模式切换 — 系统跟随/明亮/黑暗，localStorage 持久化，TDesign theme-mode 驱动

Browse Source 
新增 useThemePreference hook 和纯工具函数，支持系统/明亮/黑暗三态主题选择、
matchMedia 系统主题跟随、localStorage 持久化和启动期主题预应用，通过 <html
theme-mode> 驱动 TDesign 主题变量切换。

Header 右侧控件重新组织为 .dashboard-header-controls 单行桌面布局，主题
RadioGroup 位于刷新频率 RadioGroup 前。

附带：build.ts import specifier 改为跨平台 sep 转换；config-loader 测试适配
Windows PATH 和 YAML 路径转义；test-utils 类型窄化修复。
This commit is contained in:
兰缘小妖
2026-05-15 22:18:29 +08:00
parent 8793fbd786
commit c46ab14cce
14 changed files with 419 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
DEVELOPMENT.md
View File

@@ -71,9 +71,10 @@ src/
target-table-filters.ts 表格筛选器
target-table-sorters.ts 表格排序器
color-threshold.ts 可用率颜色阈值函数
hooks/ TanStack Query 数据层
hooks/ React hooks（数据查询、Drawer 状态、浏览器 UI 偏好）
use-queries.ts 全局面板查询 hook（dashboard/meta/metrics）
use-target-detail.ts 目标详情 Drawer 状态与条件查询 hook
use-theme-preference.ts 主题模式偏好、本地存储和 TDesign theme-mode 应用 hook
utils/ 前端工具函数
time.ts 时间处理（subtractHours、相对时间、动态时长单位）
scripts/ 构建、schema 生成和清理脚本
@@ -554,6 +555,7 @@ main.tsx
└── ErrorBoundary（React 错误边界）
└── QueryClientProvider（TanStack Query 全局挂载）
├── App（根组件，Layout + HeadMenu 骨架）
│ ├── useThemePreference() ─── Header 主题模式 RadioGroup（系统/明亮/黑暗，本地存储记忆 + theme-mode 应用）
│ ├── useDashboard(refreshInterval) ─── GET /api/dashboard?window=24h&recentLimit=30（动态刷新间隔，RadioGroup 频率选择 + 倒计时/手动刷新按钮）
│ ├── SummaryCards（单 Card 内嵌居中 Statistic，无 shadow）
│ └── TargetBoard（目标列表，Space 24px 间距）
@@ -569,7 +571,7 @@ main.tsx
└── ReactQueryDevtools（开发工具，仅开发环境）
```
**数据层架构**：
**Hook 架构**：
```
hooks/use-queries.ts（全局面板级查询）
@@ -583,6 +585,12 @@ hooks/use-target-detail.ts（Drawer 状态与详情级条件查询）
├── activeTab 受控 Tabs 状态（每次 openDrawer 重置为 overview）
├── useTargetMetrics(/api/targets/:id/metrics)（条件查询：enabled 仅当 Drawer 打开且时间范围有效）
└── useQuery(/api/targets/:id/history)（条件查询：enabled 仅当 Drawer 打开 + 时间范围有效 + activeTab=history）
hooks/use-theme-preference.ts（浏览器 UI 偏好）
├── ThemePreference: system / light / dark（RadioGroup 受控值）
├── EffectiveTheme: light / dark（写入 document.documentElement theme-mode）
├── localStorage key: dial.theme.preference（同一浏览器记忆）
└── matchMedia("(prefers-color-scheme: dark)")（系统模式下跟随系统明暗变化）
```
### 2.3 TanStack Query 数据层
@@ -683,7 +691,7 @@ export function TargetGroup({ name, targets, onTargetClick }: TargetGroupProps)
| 组件 | 文件 | 用途 |
| -------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------ |
| `App` | `app.tsx` | 根组件，Layout + HeadMenu 骨架、刷新倒计时、Skeleton 加载 |
| `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 间距） |
@@ -728,7 +736,7 @@ export function TargetGroup({ name, targets, onTargetClick }: TargetGroupProps)
**styles.css 组织**：
- 自定义 CSS 变量（如可用率渐变色 `--avail-0` ~ `--avail-9`）定义在 `:root` 中
- 布局类（`.dashboard`、`.dashboard-header`）定义全局页面结构
- 布局类（`.dashboard`、`.dashboard-header-controls`）定义全局页面结构和 Header 右侧单行操作区
- 组件修饰类（`.status-dot--up`、`.latency-ok`）为自定义视觉组件提供样式变体
- TDesign 表格行高亮（`.row-down`）通过 `rowClassName` prop 应用