refactor: 全面重构前端样式,消除内联 style 和硬编码色值,统一 TDesign 规范
- 重写 styles.css:CSS 变量化可用率色阶、状态色类、工具类、安全选择器 - 组件改造:StatusDot/StatusBar/TargetDetailDrawer/GroupHeader 等改用 CSS 类和 Typography - color-threshold 移除 getLatencyColor 死代码,保留 getAvailabilityProgressColor 返回 CSS 变量 - target-table-columns 状态列和延迟列切换为 CSS 类 - 新增 css-utility-classes spec,更新 4 个 main specs(probe/card/table/drawer) - README 和 config.yaml 写入前端样式开发规范
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { Alert, Loading } from "tdesign-react";
|
||||
import { Alert, Loading, Typography } from "tdesign-react";
|
||||
import { useSummary, useTargets, useTargetDetail } from "./hooks/useTargetDetail";
|
||||
import { SummaryCards } from "./components/SummaryCards";
|
||||
import { TargetBoard } from "./components/TargetBoard";
|
||||
@@ -26,8 +26,8 @@ export function App() {
|
||||
return (
|
||||
<main className="dashboard">
|
||||
<header className="dashboard-header">
|
||||
<h1>DiAL</h1>
|
||||
<p className="dashboard-subtitle">统一拨测平台</p>
|
||||
<Typography.Title level="h1">DiAL</Typography.Title>
|
||||
<Typography.Text theme="secondary">统一拨测平台</Typography.Text>
|
||||
</header>
|
||||
|
||||
{error && <Alert theme="error" message={`请求失败: ${error.message}`} closeBtn />}
|
||||
|
||||
Reference in New Issue
Block a user