+
-
+
onTargetClick(row as TargetStatus)}
+ rowClassName={({ row }) => {
+ const target = row as TargetStatus;
+ return target.latestCheck?.matched === false ? "row-down" : "";
+ }}
+ style={{ cursor: "pointer" }}
+ />
);
}
diff --git a/src/web/components/TimeRangePicker.tsx b/src/web/components/TimeRangePicker.tsx
deleted file mode 100644
index 59602b2..0000000
--- a/src/web/components/TimeRangePicker.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { useState } from "react";
-import { subtractHours } from "../utils/time";
-
-interface TimeRangePickerProps {
- from: string;
- to: string;
- onChange: (from: string, to: string) => void;
-}
-
-const SHORTCUTS = [
- { label: "1h", hours: 1 },
- { label: "6h", hours: 6 },
- { label: "24h", hours: 24 },
- { label: "7d", hours: 168 },
-];
-
-function toLocalDatetimeInput(date: Date): string {
- const pad = (n: number) => String(n).padStart(2, "0");
- return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
-}
-
-export function TimeRangePicker({ from, to, onChange }: TimeRangePickerProps) {
- const [activeShortcut, setActiveShortcut] = useState
("24h");
-
- const handleShortcut = (label: string, hours: number) => {
- const now = new Date();
- const newFrom = subtractHours(now, hours);
- onChange(newFrom.toISOString(), now.toISOString());
- setActiveShortcut(label);
- };
-
- const handleFromChange = (value: string) => {
- onChange(new Date(value).toISOString(), to);
- setActiveShortcut(null);
- };
-
- const handleToChange = (value: string) => {
- onChange(from, new Date(value).toISOString());
- setActiveShortcut(null);
- };
-
- const fromDate = new Date(from);
- const toDate = new Date(to);
-
- return (
-
- );
-}
diff --git a/src/web/components/TrendChart.tsx b/src/web/components/TrendChart.tsx
index 0964907..a526114 100644
--- a/src/web/components/TrendChart.tsx
+++ b/src/web/components/TrendChart.tsx
@@ -24,12 +24,12 @@ export function TrendChart({ data, loading }: TrendChartProps) {
-
-
+
+
[] = [
+ {
+ colKey: "latestCheck.matched",
+ title: "状态",
+ width: 80,
+ fixed: "left",
+ align: "center",
+ filter: statusFilter,
+ cell: ({ row }: PrimaryTableCellParams) => ,
+ },
+ {
+ colKey: "name",
+ title: "名称",
+ ellipsis: true,
+ sorter: nameSorter,
+ sortType: "all",
+ },
+ {
+ colKey: "type",
+ title: "类型",
+ width: 80,
+ filter: typeFilter,
+ cell: ({ row }: PrimaryTableCellParams) => (
+
+ {getTargetTypeDisplay(row.type)}
+
+ ),
+ },
+ {
+ colKey: "stats.availability",
+ title: "可用率",
+ width: 160,
+ sorter: availabilitySorter,
+ sortType: "all",
+ cell: ({ row }: PrimaryTableCellParams) => {
+ const availability = row.stats?.availability;
+ if (availability === undefined || availability === null) return "-";
+ const color = getAvailabilityProgressColor(availability);
+ return (
+
+ );
+ },
+ },
+ {
+ colKey: "recentSamples",
+ title: "最近状态",
+ width: 220,
+ cell: ({ row }: PrimaryTableCellParams) => ,
+ },
+ {
+ colKey: "latestCheck.durationMs",
+ title: "延迟",
+ width: 80,
+ align: "right",
+ sorter: latencySorter,
+ sortType: "all",
+ cell: ({ row }: PrimaryTableCellParams) => {
+ const ms = row.latestCheck?.durationMs;
+ if (ms === null || ms === undefined) return -;
+ const color = getLatencyColor(ms);
+ return {Math.round(ms)}ms;
+ },
+ },
+ {
+ colKey: "interval",
+ title: "间隔",
+ width: 72,
+ align: "center",
+ },
+];
+
+export { statusSorter, availabilitySorter, latencySorter, nameSorter } from "./target-table-sorters";
+export { statusFilter, typeFilter } from "./target-table-filters";
diff --git a/src/web/constants/target-table-filters.ts b/src/web/constants/target-table-filters.ts
new file mode 100644
index 0000000..3997fa6
--- /dev/null
+++ b/src/web/constants/target-table-filters.ts
@@ -0,0 +1,19 @@
+import type { PrimaryTableCol } from "tdesign-react";
+
+export const statusFilter: PrimaryTableCol["filter"] = {
+ type: "single",
+ list: [
+ { label: "全部", value: "" },
+ { label: "UP", value: "up" },
+ { label: "DOWN", value: "down" },
+ ],
+};
+
+export const typeFilter: PrimaryTableCol["filter"] = {
+ type: "single",
+ list: [
+ { label: "全部", value: "" },
+ { label: "HTTP", value: "http" },
+ { label: "CMD", value: "command" },
+ ],
+};
diff --git a/src/web/constants/target-table-sorters.ts b/src/web/constants/target-table-sorters.ts
new file mode 100644
index 0000000..4438acb
--- /dev/null
+++ b/src/web/constants/target-table-sorters.ts
@@ -0,0 +1,27 @@
+import type { TargetStatus } from "../../shared/api";
+
+const STATUS_ORDER: Record = {
+ down: 0,
+ up: 1,
+};
+
+function getStatusRank(target: TargetStatus): number {
+ if (!target.latestCheck) return 2;
+ return target.latestCheck.matched ? STATUS_ORDER["up"]! : STATUS_ORDER["down"]!;
+}
+
+export function statusSorter(a: TargetStatus, b: TargetStatus): number {
+ return getStatusRank(a) - getStatusRank(b);
+}
+
+export function availabilitySorter(a: TargetStatus, b: TargetStatus): number {
+ return (a.stats?.availability ?? 0) - (b.stats?.availability ?? 0);
+}
+
+export function latencySorter(a: TargetStatus, b: TargetStatus): number {
+ return (a.latestCheck?.durationMs ?? Infinity) - (b.latestCheck?.durationMs ?? Infinity);
+}
+
+export function nameSorter(a: TargetStatus, b: TargetStatus): number {
+ return a.name.localeCompare(b.name, "zh-CN");
+}
diff --git a/src/web/hooks/useHistory.ts b/src/web/hooks/useHistory.ts
deleted file mode 100644
index 8fe9f70..0000000
--- a/src/web/hooks/useHistory.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useCallback, useRef, useState } from "react";
-import type { HistoryResponse } from "../../shared/api";
-
-export function useHistory(targetId: number | null) {
- const [data, setData] = useState({ items: [], total: 0, page: 1, pageSize: 20 });
- const [error, setError] = useState(null);
- const [loading, setLoading] = useState(false);
- const abortRef = useRef(null);
-
- const fetchHistory = useCallback(
- async (from: string, to: string, page = 1, pageSize = 20) => {
- if (targetId === null) return;
-
- abortRef.current?.abort();
- const controller = new AbortController();
- abortRef.current = controller;
-
- setLoading(true);
- setError(null);
-
- try {
- const response = await fetch(
- `/api/targets/${targetId}/history?from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}&page=${page}&pageSize=${pageSize}`,
- { signal: controller.signal },
- );
-
- if (!response.ok) throw new Error(`HTTP ${response.status}`);
-
- const result = (await response.json()) as HistoryResponse;
- setData(result);
- } catch (err) {
- if (err instanceof DOMException && err.name === "AbortError") return;
- setError(err instanceof Error ? err.message : "请求失败");
- } finally {
- setLoading(false);
- }
- },
- [targetId],
- );
-
- return { data, error, loading, fetchHistory };
-}
diff --git a/src/web/hooks/useSummary.ts b/src/web/hooks/useSummary.ts
deleted file mode 100644
index 679eadd..0000000
--- a/src/web/hooks/useSummary.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import type { SummaryResponse } from "../../shared/api";
-
-export function useSummary(intervalMs = 8000) {
- const [data, setData] = useState(null);
- const [error, setError] = useState(null);
- const [loading, setLoading] = useState(true);
- const abortRef = useRef(null);
-
- const fetchSummary = useCallback(async () => {
- try {
- abortRef.current?.abort();
- const controller = new AbortController();
- abortRef.current = controller;
-
- const response = await fetch("/api/summary", { signal: controller.signal });
-
- if (!response.ok) throw new Error(`HTTP ${response.status}`);
-
- const result = (await response.json()) as SummaryResponse;
- setData(result);
- setError(null);
- } catch (err) {
- if (err instanceof DOMException && err.name === "AbortError") return;
- setError(err instanceof Error ? err.message : "请求失败");
- } finally {
- setLoading(false);
- }
- }, []);
-
- useEffect(() => {
- // eslint-disable-next-line react-hooks/set-state-in-effect
- fetchSummary();
- const timer = setInterval(fetchSummary, intervalMs);
- return () => {
- clearInterval(timer);
- abortRef.current?.abort();
- };
- }, [fetchSummary, intervalMs]);
-
- return { data, error, loading, refresh: fetchSummary };
-}
diff --git a/src/web/hooks/useTargetDetail.ts b/src/web/hooks/useTargetDetail.ts
index 4b78b01..28d18b2 100644
--- a/src/web/hooks/useTargetDetail.ts
+++ b/src/web/hooks/useTargetDetail.ts
@@ -1,71 +1,110 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import type { TargetStatus } from "../../shared/api";
-import { useTrend } from "./useTrend";
-import { useHistory } from "./useHistory";
+import { useCallback, useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import type { HistoryResponse, SummaryResponse, TargetStatus, TrendPoint } from "../../shared/api";
import { subtractHours } from "../utils/time";
+const queryKeys = {
+ summary: () => ["summary"] as const,
+ targets: () => ["targets"] as const,
+ trend: (targetId: number, from: string, to: string) => ["trend", targetId, from, to] as const,
+ history: (targetId: number, from: string, to: string, page: number) => ["history", targetId, from, to, page] as const,
+};
+
+async function fetchJson(url: string): Promise {
+ const response = await fetch(url);
+ if (!response.ok) throw new Error(`HTTP ${response.status}`);
+ return response.json() as Promise;
+}
+
+export function useSummary() {
+ return useQuery({
+ queryKey: queryKeys.summary(),
+ queryFn: () => fetchJson("/api/summary"),
+ refetchInterval: 8000,
+ refetchIntervalInBackground: false,
+ });
+}
+
+export function useTargets() {
+ return useQuery({
+ queryKey: queryKeys.targets(),
+ queryFn: () => fetchJson("/api/targets"),
+ refetchInterval: 8000,
+ refetchIntervalInBackground: false,
+ });
+}
+
export function useTargetDetail() {
- const [selectedTarget, setSelectedTarget] = useState(null);
- const [timeFrom, setTimeFrom] = useState("");
- const [timeTo, setTimeTo] = useState("");
+ const queryClient = useQueryClient();
+ const [selectedTargetId, setSelectedTargetId] = useState(null);
+ const [timeFrom, setTimeFrom] = useState("");
+ const [timeTo, setTimeTo] = useState("");
+ const [historyPage, setHistoryPage] = useState(1);
- const { data: trendData, loading: trendLoading, fetchTrend } = useTrend(selectedTarget?.id ?? null);
- const { data: historyData, loading: historyLoading, fetchHistory } = useHistory(selectedTarget?.id ?? null);
- const initialFetchRef = useRef(false);
+ const { data: targetsData } = useTargets();
- const openModal = useCallback((target: TargetStatus) => {
- setSelectedTarget(target);
+ const selectedTarget =
+ selectedTargetId !== null ? (targetsData?.find((t) => t.id === selectedTargetId) ?? null) : null;
+
+ const trend = useQuery({
+ queryKey:
+ selectedTargetId !== null && timeFrom && timeTo
+ ? queryKeys.trend(selectedTargetId, timeFrom, timeTo)
+ : ["trend", "disabled"],
+ queryFn: () =>
+ fetchJson(
+ `/api/targets/${selectedTargetId}/trend?from=${encodeURIComponent(timeFrom)}&to=${encodeURIComponent(timeTo)}`,
+ ),
+ enabled: selectedTargetId !== null && !!timeFrom && !!timeTo,
+ });
+
+ const history = useQuery({
+ queryKey:
+ selectedTargetId !== null && timeFrom && timeTo
+ ? queryKeys.history(selectedTargetId, timeFrom, timeTo, historyPage)
+ : ["history", "disabled"],
+ queryFn: () =>
+ fetchJson(
+ `/api/targets/${selectedTargetId}/history?from=${encodeURIComponent(timeFrom)}&to=${encodeURIComponent(timeTo)}&page=${historyPage}&pageSize=20`,
+ ),
+ enabled: selectedTargetId !== null && !!timeFrom && !!timeTo,
+ });
+
+ const openDrawer = useCallback((target: TargetStatus) => {
+ setSelectedTargetId(target.id);
const now = new Date();
const from = subtractHours(now, 24);
setTimeFrom(from.toISOString());
setTimeTo(now.toISOString());
- initialFetchRef.current = false;
+ setHistoryPage(1);
}, []);
- const closeModal = useCallback(() => {
- setSelectedTarget(null);
- initialFetchRef.current = false;
+ const closeDrawer = useCallback(() => {
+ setSelectedTargetId(null);
+ queryClient.removeQueries({ queryKey: ["trend"] });
+ queryClient.removeQueries({ queryKey: ["history"] });
+ }, [queryClient]);
+
+ const handleTimeChange = useCallback((from: string, to: string) => {
+ setTimeFrom(from);
+ setTimeTo(to);
+ setHistoryPage(1);
}, []);
- useEffect(() => {
- if (selectedTarget && timeFrom && timeTo && !initialFetchRef.current) {
- initialFetchRef.current = true;
- fetchTrend(timeFrom, timeTo);
- fetchHistory(timeFrom, timeTo);
- }
- }, [selectedTarget, timeFrom, timeTo, fetchTrend, fetchHistory]);
-
- const handleTimeChange = useCallback(
- (from: string, to: string) => {
- setTimeFrom(from);
- setTimeTo(to);
- if (selectedTarget) {
- fetchTrend(from, to);
- fetchHistory(from, to);
- }
- },
- [fetchTrend, fetchHistory, selectedTarget],
- );
-
- const handlePageChange = useCallback(
- (page: number) => {
- if (timeFrom && timeTo) {
- fetchHistory(timeFrom, timeTo, page);
- }
- },
- [timeFrom, timeTo, fetchHistory],
- );
+ const handlePageChange = useCallback((page: number) => {
+ setHistoryPage(page);
+ }, []);
return {
selectedTarget,
- trendData,
- trendLoading,
- historyData,
- historyLoading,
+ trendData: trend.data ?? [],
+ trendLoading: trend.isLoading,
+ historyData: history.data ?? { items: [], total: 0, page: 1, pageSize: 20 },
+ historyLoading: history.isLoading,
timeFrom,
timeTo,
- openModal,
- closeModal,
+ openDrawer,
+ closeDrawer,
handleTimeChange,
handlePageChange,
};
diff --git a/src/web/hooks/useTargets.ts b/src/web/hooks/useTargets.ts
deleted file mode 100644
index 08b4f49..0000000
--- a/src/web/hooks/useTargets.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import type { TargetStatus } from "../../shared/api";
-
-export function useTargets(intervalMs = 8000) {
- const [data, setData] = useState([]);
- const [error, setError] = useState(null);
- const [loading, setLoading] = useState(true);
- const abortRef = useRef(null);
-
- const fetchTargets = useCallback(async () => {
- try {
- abortRef.current?.abort();
- const controller = new AbortController();
- abortRef.current = controller;
-
- const response = await fetch("/api/targets", { signal: controller.signal });
-
- if (!response.ok) throw new Error(`HTTP ${response.status}`);
-
- const result = (await response.json()) as TargetStatus[];
- setData(result);
- setError(null);
- } catch (err) {
- if (err instanceof DOMException && err.name === "AbortError") return;
- setError(err instanceof Error ? err.message : "请求失败");
- } finally {
- setLoading(false);
- }
- }, []);
-
- useEffect(() => {
- // eslint-disable-next-line react-hooks/set-state-in-effect
- fetchTargets();
- const timer = setInterval(fetchTargets, intervalMs);
- return () => {
- clearInterval(timer);
- abortRef.current?.abort();
- };
- }, [fetchTargets, intervalMs]);
-
- return { data, error, loading, refresh: fetchTargets };
-}
diff --git a/src/web/hooks/useTrend.ts b/src/web/hooks/useTrend.ts
deleted file mode 100644
index 2db73c1..0000000
--- a/src/web/hooks/useTrend.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useCallback, useRef, useState } from "react";
-import type { TrendPoint } from "../../shared/api";
-
-export function useTrend(targetId: number | null) {
- const [data, setData] = useState([]);
- const [error, setError] = useState(null);
- const [loading, setLoading] = useState(false);
- const abortRef = useRef(null);
-
- const fetchTrend = useCallback(
- async (from: string, to: string) => {
- if (targetId === null) return;
-
- abortRef.current?.abort();
- const controller = new AbortController();
- abortRef.current = controller;
-
- setLoading(true);
- setError(null);
-
- try {
- const response = await fetch(
- `/api/targets/${targetId}/trend?from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}`,
- { signal: controller.signal },
- );
-
- if (!response.ok) throw new Error(`HTTP ${response.status}`);
-
- const result = (await response.json()) as TrendPoint[];
- setData(result);
- } catch (err) {
- if (err instanceof DOMException && err.name === "AbortError") return;
- setError(err instanceof Error ? err.message : "请求失败");
- } finally {
- setLoading(false);
- }
- },
- [targetId],
- );
-
- return { data, error, loading, fetchTrend };
-}
diff --git a/src/web/main.tsx b/src/web/main.tsx
index 38cb9cd..1e512aa 100644
--- a/src/web/main.tsx
+++ b/src/web/main.tsx
@@ -1,8 +1,22 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { App } from "./app";
+import "tdesign-react/dist/reset.css";
+import "tdesign-react/dist/tdesign.min.css";
import "./styles.css";
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: 1,
+ refetchOnWindowFocus: true,
+ staleTime: 5000,
+ },
+ },
+});
+
const rootElement = document.getElementById("root");
if (!rootElement) {
@@ -11,6 +25,9 @@ if (!rootElement) {
createRoot(rootElement).render(
-
+
+
+
+
,
);
diff --git a/src/web/styles.css b/src/web/styles.css
index 3d50610..04bff57 100644
--- a/src/web/styles.css
+++ b/src/web/styles.css
@@ -1,27 +1,3 @@
-:root {
- color: #102033;
- background: #edf3f8;
- font-family:
- Inter,
- ui-sans-serif,
- system-ui,
- -apple-system,
- BlinkMacSystemFont,
- "Segoe UI",
- sans-serif;
- --dashboard-card-width: 280px;
-}
-
-* {
- box-sizing: border-box;
-}
-
-body {
- min-width: 320px;
- min-height: 100vh;
- margin: 0;
-}
-
.dashboard {
padding: 32px 24px;
width: 100%;
@@ -39,184 +15,10 @@ body {
.dashboard-subtitle {
margin: 0;
- color: #61728a;
+ color: var(--td-text-color-secondary);
font-size: 0.9rem;
}
-.error-banner {
- padding: 12px 16px;
- margin-bottom: 16px;
- border: 1px solid rgba(229, 72, 77, 0.25);
- border-radius: 12px;
- color: #9f2228;
- background: rgba(255, 240, 240, 0.8);
- font-size: 0.85rem;
-}
-
-.summary-cards {
- display: flex;
- flex-wrap: wrap;
- gap: 16px;
- margin-bottom: 32px;
-}
-
-.summary-card {
- width: var(--dashboard-card-width);
- flex-shrink: 0;
- padding: 20px;
- border: 1px solid rgba(49, 83, 126, 0.12);
- border-radius: 16px;
- background: rgba(255, 255, 255, 0.85);
- box-shadow: 0 4px 16px rgba(34, 57, 91, 0.08);
- transition:
- transform 0.3s ease,
- box-shadow 0.3s ease;
-}
-
-.summary-card:hover {
- box-shadow: 0 8px 32px rgba(34, 57, 91, 0.12);
- transform: translateY(-4px);
-}
-
-.card-value {
- font-size: 1.75rem;
- font-weight: 700;
- letter-spacing: -0.02em;
-}
-
-.card-label {
- margin-top: 4px;
- color: #61728a;
- font-size: 0.8rem;
-}
-
-.card-up .card-value {
- color: #1fbf75;
-}
-
-.card-down .card-value {
- color: #e5484d;
-}
-
-.target-board {
- display: flex;
- flex-direction: column;
- gap: 32px;
-}
-
-.target-group {
- display: flex;
- flex-direction: column;
- gap: 12px;
-}
-
-.group-header {
- display: flex;
- align-items: baseline;
- gap: 8px;
-}
-
-.group-title {
- margin: 0;
- font-size: 1.1rem;
- font-weight: 600;
-}
-
-.group-stats {
- display: flex;
- align-items: center;
- gap: 6px;
-}
-
-.stat-badge {
- padding: 2px 8px;
- border-radius: 6px;
- font-size: 0.75rem;
- font-weight: 600;
- min-width: 24px;
- text-align: center;
-}
-
-.stat-badge-total {
- background: rgba(53, 109, 210, 0.1);
- color: #356dd2;
-}
-
-.stat-badge-up {
- background: rgba(31, 191, 117, 0.1);
- color: #1fbf75;
-}
-
-.stat-badge-down {
- background: rgba(229, 72, 77, 0.1);
- color: #e5484d;
-}
-
-.card-grid {
- display: flex;
- flex-wrap: wrap;
- gap: 16px;
-}
-
-.target-card {
- width: var(--dashboard-card-width);
- flex-shrink: 0;
- padding: 16px;
- border: 1px solid rgba(49, 83, 126, 0.12);
- border-radius: 12px;
- background: rgba(255, 255, 255, 0.85);
- box-shadow: 0 2px 8px rgba(34, 57, 91, 0.06);
- cursor: pointer;
- transition:
- box-shadow 0.3s ease,
- transform 0.3s ease;
- display: flex;
- flex-direction: column;
- gap: 12px;
-}
-
-.target-card:hover {
- box-shadow: 0 6px 24px rgba(34, 57, 91, 0.14);
- transform: translateY(-2px);
-}
-
-.card-header {
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-.card-name {
- font-weight: 600;
- font-size: 0.9rem;
- flex: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.card-type-badge {
- padding: 2px 8px;
- border-radius: 6px;
- background: rgba(53, 109, 210, 0.1);
- color: #356dd2;
- font-size: 0.72rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.04em;
-}
-
-.card-status-bar {
- display: flex;
- width: 100%;
-}
-
-.card-sparkline {
- display: flex;
- width: 100%;
- height: 40px;
-}
-
.status-dot {
display: inline-block;
width: 12px;
@@ -225,16 +27,6 @@ body {
flex-shrink: 0;
}
-.status-up {
- background: #1fbf75;
- box-shadow: 0 0 0 6px rgba(31, 191, 117, 0.14);
-}
-
-.status-down {
- background: #e5484d;
- box-shadow: 0 0 0 6px rgba(229, 72, 77, 0.14);
-}
-
.status-bar {
display: flex;
gap: 2px;
@@ -243,173 +35,16 @@ body {
}
.status-bar-block {
- width: 6px;
+ flex: 1;
+ min-width: 0;
height: 16px;
border-radius: 2px;
}
-.status-bar-up {
- background: #1fbf75;
-}
-
-.status-bar-down {
- background: #e5484d;
-}
-
-.status-bar-empty {
- background: #e2e8f0;
-}
-
-.sparkline-empty {
- color: #94a3b8;
- font-size: 0.85rem;
-}
-
-.modal-backdrop {
- position: fixed;
- inset: 0;
- background: rgba(16, 32, 51, 0.5);
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 1000;
-}
-
-.modal-content {
- width: 80vw;
- max-height: 85vh;
- background: #fff;
- border-radius: 16px;
- box-shadow: 0 16px 48px rgba(16, 32, 51, 0.2);
- overflow-y: auto;
- display: flex;
- flex-direction: column;
-}
-
-.modal-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 16px 24px;
- border-bottom: 1px solid rgba(49, 83, 126, 0.1);
-}
-
-.modal-title-row {
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-.modal-title {
- margin: 0;
- font-size: 1.15rem;
- font-weight: 600;
-}
-
-.modal-close-btn {
- border: none;
- background: none;
- font-size: 1.5rem;
- color: #61728a;
- cursor: pointer;
- padding: 4px 8px;
- line-height: 1;
-}
-
-.modal-close-btn:hover {
- color: #102033;
-}
-
-.time-range-picker {
- padding: 12px 24px;
- border-bottom: 1px solid rgba(49, 83, 126, 0.1);
- display: flex;
- align-items: center;
- gap: 16px;
-}
-
-.time-shortcuts {
- display: flex;
- gap: 6px;
-}
-
-.time-shortcut-btn {
- padding: 4px 12px;
- border: 1px solid rgba(49, 83, 126, 0.2);
- border-radius: 6px;
- background: transparent;
- color: #42546c;
- font-size: 0.82rem;
- cursor: pointer;
- transition: all 0.15s;
-}
-
-.time-shortcut-btn:hover {
- background: rgba(53, 109, 210, 0.08);
-}
-
-.time-shortcut-btn.active {
- background: #356dd2;
- color: #fff;
- border-color: #356dd2;
-}
-
-.time-inputs {
- display: flex;
- align-items: center;
- gap: 6px;
-}
-
-.time-input {
- padding: 4px 8px;
- border: 1px solid rgba(49, 83, 126, 0.2);
- border-radius: 6px;
- font-size: 0.82rem;
- color: #102033;
-}
-
-.time-separator {
- color: #61728a;
-}
-
-.modal-body {
- display: flex;
- flex-direction: column;
- padding: 20px 24px;
- gap: 24px;
- flex: 1;
-}
-
-.modal-charts {
- display: flex;
- gap: 24px;
- align-items: flex-start;
-}
-
-.modal-chart-section {
- flex: 1;
-}
-
-.modal-chart-section h4 {
- margin: 0 0 12px;
- font-size: 0.9rem;
- color: #42546c;
-}
-
-.modal-history-section {
- display: flex;
- flex-direction: column;
- min-height: 0;
-}
-
-.modal-history-section h4 {
- margin: 0 0 12px;
- font-size: 0.9rem;
- color: #42546c;
-}
-
.status-donut {
position: relative;
+ display: flex;
+ justify-content: center;
}
.donut-center-label {
@@ -419,7 +54,6 @@ body {
transform: translate(-50%, -60%);
font-size: 1.25rem;
font-weight: 700;
- color: #102033;
}
.trend-chart {
@@ -427,181 +61,13 @@ body {
}
.trend-loading,
-.trend-empty,
-.history-loading,
-.history-empty {
+.trend-empty {
padding: 24px;
text-align: center;
- color: #94a3b8;
+ color: var(--td-text-color-placeholder);
font-size: 0.85rem;
}
-.history-table {
- width: 100%;
- border-collapse: collapse;
- border: 1px solid #d1d9e6;
- border-radius: 8px;
- overflow: hidden;
- font-size: 0.85rem;
-}
-
-.history-table thead {
- background: #f0f4fa;
-}
-
-.history-table th {
- padding: 10px 12px;
- text-align: left;
- font-size: 0.78rem;
- font-weight: 600;
- color: #61728a;
- text-transform: uppercase;
- letter-spacing: 0.04em;
- border-bottom: 1px solid #d1d9e6;
-}
-
-.history-table td {
- padding: 10px 12px;
- border-bottom: 1px solid #e8edf4;
-}
-
-.history-table tbody tr:last-child td {
- border-bottom: none;
-}
-
-.history-table tbody tr:hover {
- background: rgba(236, 243, 252, 0.6);
-}
-
-.ht-col-status {
- width: 60px;
-}
-
-.ht-col-time {
- width: 170px;
-}
-
-.ht-col-detail {
- width: 100px;
-}
-
-.ht-col-latency {
- width: 80px;
- text-align: right;
-}
-
-.ht-col-error {
- width: auto;
-}
-
-.ht-status {
- font-weight: 700;
- font-size: 0.78rem;
-}
-
-.ht-time {
- color: #61728a;
-}
-
-.ht-detail {
- font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
- color: #42546c;
- font-size: 0.82rem;
-}
-
-.ht-latency {
- font-variant-numeric: tabular-nums;
- color: #356dd2;
- text-align: right;
-}
-
-.ht-error {
- color: #e5484d;
- font-size: 0.82rem;
-}
-
-.history-item {
- display: flex;
- gap: 12px;
- align-items: center;
- padding: 8px 12px;
- border-radius: 8px;
- background: rgba(255, 255, 255, 0.6);
- font-size: 0.85rem;
-}
-
-.history-status {
- font-weight: 700;
- font-size: 0.78rem;
-}
-
-.text-up {
- color: #1fbf75;
-}
-
-.text-down {
- color: #e5484d;
-}
-
-.history-time {
- color: #61728a;
-}
-
-.history-code {
- font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
- color: #42546c;
-}
-
-.history-latency {
- font-variant-numeric: tabular-nums;
- color: #356dd2;
-}
-
-.history-error {
- color: #e5484d;
- font-size: 0.8rem;
-}
-
-.pagination {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 4px;
- padding: 12px 0;
-}
-
-.pagination-btn {
- border: 1px solid rgba(49, 83, 126, 0.2);
- border-radius: 6px;
- background: transparent;
- color: #42546c;
- padding: 4px 10px;
- font-size: 0.82rem;
- cursor: pointer;
-}
-
-.pagination-btn:hover:not(:disabled) {
- background: rgba(53, 109, 210, 0.08);
-}
-
-.pagination-btn:disabled {
- opacity: 0.4;
- cursor: default;
-}
-
-.pagination-btn.active {
- background: #356dd2;
- color: #fff;
- border-color: #356dd2;
-}
-
-.pagination-items {
- display: flex;
- align-items: center;
- gap: 4px;
-}
-
-.pagination-ellipsis {
- color: #94a3b8;
- padding: 0 4px;
+.row-down {
+ background: color-mix(in srgb, var(--td-error-color) 6%, transparent) !important;
}
diff --git a/tests/web/constants/color-threshold.test.ts b/tests/web/constants/color-threshold.test.ts
new file mode 100644
index 0000000..e67de68
--- /dev/null
+++ b/tests/web/constants/color-threshold.test.ts
@@ -0,0 +1,95 @@
+import { describe, test, expect } from "bun:test";
+import { getAvailabilityProgressColor, getLatencyColor } from "../../../src/web/constants/color-threshold";
+
+describe("color-threshold", () => {
+ describe("getAvailabilityProgressColor", () => {
+ test("0-10% 返回第一档颜色", () => {
+ expect(getAvailabilityProgressColor(0)).toBe("#d54941");
+ expect(getAvailabilityProgressColor(5)).toBe("#d54941");
+ expect(getAvailabilityProgressColor(9.99)).toBe("#d54941");
+ });
+
+ test("10-20% 返回第二档颜色", () => {
+ expect(getAvailabilityProgressColor(10)).toBe("#d96241");
+ expect(getAvailabilityProgressColor(15)).toBe("#d96241");
+ expect(getAvailabilityProgressColor(19.99)).toBe("#d96241");
+ });
+
+ test("20-30% 返回第三档颜色", () => {
+ expect(getAvailabilityProgressColor(20)).toBe("#e37318");
+ expect(getAvailabilityProgressColor(25)).toBe("#e37318");
+ });
+
+ test("30-40% 返回第四档颜色", () => {
+ expect(getAvailabilityProgressColor(30)).toBe("#e89318");
+ expect(getAvailabilityProgressColor(35)).toBe("#e89318");
+ });
+
+ test("40-50% 返回第五档颜色", () => {
+ expect(getAvailabilityProgressColor(40)).toBe("#d9a818");
+ expect(getAvailabilityProgressColor(45)).toBe("#d9a818");
+ });
+
+ test("50-60% 返回第六档颜色", () => {
+ expect(getAvailabilityProgressColor(50)).toBe("#b8b020");
+ expect(getAvailabilityProgressColor(55)).toBe("#b8b020");
+ });
+
+ test("60-70% 返回第七档颜色", () => {
+ expect(getAvailabilityProgressColor(60)).toBe("#8dba30");
+ expect(getAvailabilityProgressColor(65)).toBe("#8dba30");
+ });
+
+ test("70-80% 返回第八档颜色", () => {
+ expect(getAvailabilityProgressColor(70)).toBe("#6dba3f");
+ expect(getAvailabilityProgressColor(75)).toBe("#6dba3f");
+ });
+
+ test("80-90% 返回第九档颜色", () => {
+ expect(getAvailabilityProgressColor(80)).toBe("#4dba50");
+ expect(getAvailabilityProgressColor(85)).toBe("#4dba50");
+ });
+
+ test("90-100% 返回第十档颜色", () => {
+ expect(getAvailabilityProgressColor(90)).toBe("#3dba60");
+ expect(getAvailabilityProgressColor(95)).toBe("#3dba60");
+ expect(getAvailabilityProgressColor(99.9)).toBe("#3dba60");
+ expect(getAvailabilityProgressColor(100)).toBe("#3dba60");
+ });
+
+ test("边界值", () => {
+ expect(getAvailabilityProgressColor(9.999)).toBe("#d54941");
+ expect(getAvailabilityProgressColor(10)).toBe("#d96241");
+ expect(getAvailabilityProgressColor(19.999)).toBe("#d96241");
+ expect(getAvailabilityProgressColor(20)).toBe("#e37318");
+ expect(getAvailabilityProgressColor(89.999)).toBe("#4dba50");
+ expect(getAvailabilityProgressColor(90)).toBe("#3dba60");
+ });
+ });
+
+ describe("getLatencyColor", () => {
+ test("<=100ms 返回 success 色", () => {
+ expect(getLatencyColor(0)).toBe("var(--td-success-color)");
+ expect(getLatencyColor(50)).toBe("var(--td-success-color)");
+ expect(getLatencyColor(100)).toBe("var(--td-success-color)");
+ });
+
+ test("100-500ms 返回 warning 色", () => {
+ expect(getLatencyColor(101)).toBe("var(--td-warning-color)");
+ expect(getLatencyColor(250)).toBe("var(--td-warning-color)");
+ expect(getLatencyColor(500)).toBe("var(--td-warning-color)");
+ });
+
+ test(">500ms 返回 error 色", () => {
+ expect(getLatencyColor(501)).toBe("var(--td-error-color)");
+ expect(getLatencyColor(1000)).toBe("var(--td-error-color)");
+ });
+
+ test("边界值", () => {
+ expect(getLatencyColor(100)).toBe("var(--td-success-color)");
+ expect(getLatencyColor(100.01)).toBe("var(--td-warning-color)");
+ expect(getLatencyColor(500)).toBe("var(--td-warning-color)");
+ expect(getLatencyColor(500.01)).toBe("var(--td-error-color)");
+ });
+ });
+});
diff --git a/tests/web/constants/target-table-filters.test.ts b/tests/web/constants/target-table-filters.test.ts
new file mode 100644
index 0000000..fa2b5e2
--- /dev/null
+++ b/tests/web/constants/target-table-filters.test.ts
@@ -0,0 +1,28 @@
+import { describe, test, expect } from "bun:test";
+import { statusFilter, typeFilter } from "../../../src/web/constants/target-table-filters";
+
+describe("target-table-filters", () => {
+ describe("statusFilter", () => {
+ test("包含全部选项", () => {
+ expect(statusFilter).toBeDefined();
+ expect(statusFilter!.type).toBe("single");
+ const list = statusFilter!.list!;
+ expect(list).toHaveLength(3);
+ expect(list[0]!.label).toBe("全部");
+ expect(list[1]!.label).toBe("UP");
+ expect(list[2]!.label).toBe("DOWN");
+ });
+ });
+
+ describe("typeFilter", () => {
+ test("包含全部选项", () => {
+ expect(typeFilter).toBeDefined();
+ expect(typeFilter!.type).toBe("single");
+ const list = typeFilter!.list!;
+ expect(list).toHaveLength(3);
+ expect(list[0]!.label).toBe("全部");
+ expect(list[1]!.label).toBe("HTTP");
+ expect(list[2]!.label).toBe("CMD");
+ });
+ });
+});
diff --git a/tests/web/constants/target-table-sorters.test.ts b/tests/web/constants/target-table-sorters.test.ts
new file mode 100644
index 0000000..3452aea
--- /dev/null
+++ b/tests/web/constants/target-table-sorters.test.ts
@@ -0,0 +1,111 @@
+import { describe, test, expect } from "bun:test";
+import {
+ statusSorter,
+ availabilitySorter,
+ latencySorter,
+ nameSorter,
+} from "../../../src/web/constants/target-table-sorters";
+import type { TargetStatus } from "../../../src/shared/api";
+
+function makeTarget(overrides: Partial = {}): TargetStatus {
+ return {
+ id: 1,
+ name: "test",
+ type: "http",
+ target: "https://example.com",
+ group: "default",
+ interval: "5s",
+ latestCheck: null,
+ stats: { totalChecks: 0, availability: 100 },
+ recentSamples: [],
+ ...overrides,
+ };
+}
+
+describe("statusSorter", () => {
+ test("DOWN 排在 UP 前面", () => {
+ const up = makeTarget({
+ latestCheck: { timestamp: "", matched: true, durationMs: 10, statusDetail: null, failure: null },
+ });
+ const down = makeTarget({
+ latestCheck: { timestamp: "", matched: false, durationMs: 10, statusDetail: null, failure: null },
+ });
+ expect(statusSorter(down, up)).toBeLessThan(0);
+ expect(statusSorter(up, down)).toBeGreaterThan(0);
+ });
+
+ test("相同状态返回 0", () => {
+ const a = makeTarget({
+ latestCheck: { timestamp: "", matched: true, durationMs: 10, statusDetail: null, failure: null },
+ });
+ const b = makeTarget({
+ latestCheck: { timestamp: "", matched: true, durationMs: 20, statusDetail: null, failure: null },
+ });
+ expect(statusSorter(a, b)).toBe(0);
+ });
+
+ test("无 latestCheck 的目标排在最后", () => {
+ const noCheck = makeTarget();
+ const up = makeTarget({
+ latestCheck: { timestamp: "", matched: true, durationMs: 10, statusDetail: null, failure: null },
+ });
+ expect(statusSorter(noCheck, up)).toBeGreaterThan(0);
+ });
+});
+
+describe("availabilitySorter", () => {
+ test("低可用率排前面", () => {
+ const low = makeTarget({ stats: { totalChecks: 100, availability: 95 } });
+ const high = makeTarget({ stats: { totalChecks: 100, availability: 99.9 } });
+ expect(availabilitySorter(low, high)).toBeLessThan(0);
+ });
+
+ test("相同可用率返回 0", () => {
+ const a = makeTarget({ stats: { totalChecks: 100, availability: 99.9 } });
+ const b = makeTarget({ stats: { totalChecks: 50, availability: 99.9 } });
+ expect(availabilitySorter(a, b)).toBe(0);
+ });
+
+ test("无 stats 按 0 处理", () => {
+ const noStats = makeTarget({ stats: undefined as unknown as TargetStatus["stats"] });
+ const high = makeTarget({ stats: { totalChecks: 100, availability: 99.9 } });
+ expect(availabilitySorter(noStats, high)).toBeLessThan(0);
+ });
+});
+
+describe("latencySorter", () => {
+ test("低延迟排前面", () => {
+ const fast = makeTarget({
+ latestCheck: { timestamp: "", matched: true, durationMs: 50, statusDetail: null, failure: null },
+ });
+ const slow = makeTarget({
+ latestCheck: { timestamp: "", matched: true, durationMs: 200, statusDetail: null, failure: null },
+ });
+ expect(latencySorter(fast, slow)).toBeLessThan(0);
+ });
+
+ test("无延迟排最后", () => {
+ const noLatency = makeTarget({
+ latestCheck: { timestamp: "", matched: true, durationMs: null, statusDetail: null, failure: null },
+ });
+ const hasLatency = makeTarget({
+ latestCheck: { timestamp: "", matched: true, durationMs: 100, statusDetail: null, failure: null },
+ });
+ expect(latencySorter(noLatency, hasLatency)).toBeGreaterThan(0);
+ });
+});
+
+describe("nameSorter", () => {
+ test("按名称字母排序", () => {
+ const a = makeTarget({ name: "Alpha" });
+ const b = makeTarget({ name: "Beta" });
+ expect(nameSorter(a, b)).toBeLessThan(0);
+ });
+
+ test("中文名称排序", () => {
+ const a = makeTarget({ name: "百度" });
+ const b = makeTarget({ name: "谷歌" });
+ const result = nameSorter(a, b);
+ expect(typeof result).toBe("number");
+ });
+});