fix(dashboard): fix Total Domains filtering and theme switching, add form attributes

src/App.tsx

@@ -85,7 +85,11 @@ const MainApp: React.FC = () => {
 		(window.ForceTheme as string) !== "" ? window.ForceTheme : undefined;
 
 	useEffect(() => {
-		if (forceTheme === "dark" || forceTheme === "light") {
+		const savedTheme = localStorage.getItem("vite-ui-theme");
+		if (
+			(!savedTheme || savedTheme === "system") &&
+			(forceTheme === "dark" || forceTheme === "light")
+		) {
 			setTheme(forceTheme);
 		}
 	}, [forceTheme, setTheme]);

src/components/DashCommand.tsx

@@ -91,6 +91,8 @@ export function DashCommand() {
 	return (
 		<CommandDialog open={isOpen} onOpenChange={closeCommand}>
 			<CommandInput
+				id="dash-command-search"
+				name="dashCommandSearch"
 				placeholder={t("TypeCommand")}
 				value={search}
 				onValueChange={setSearch}

src/components/ThemeProvider.tsx

@@ -1,5 +1,12 @@
 import { DateTime } from "luxon";
-import { createContext, type ReactNode, useEffect, useState } from "react";
+import {
+	createContext,
+	type ReactNode,
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+} from "react";
 
 export type Theme = "dark" | "light" | "system" | "scheduled";
 
@@ -94,13 +101,21 @@ export function ThemeProvider({
 		};
 	}, [theme, hour, isSystemDark]);
 
-	const value = {
-		theme,
-		setTheme: (theme: Theme) => {
-			localStorage.setItem(storageKey, theme);
-			setTheme(theme);
+	const handleSetTheme = useCallback(
+		(nextTheme: Theme) => {
+			localStorage.setItem(storageKey, nextTheme);
+			setTheme(nextTheme);
 		},
-	};
+		[storageKey],
+	);
+
+	const value = useMemo(
+		() => ({
+			theme,
+			setTheme: handleSetTheme,
+		}),
+		[theme, handleSetTheme],
+	);
 
 	return (
 		<ThemeProviderContext.Provider value={value}>

src/components/ui/command.tsx

@@ -46,6 +46,8 @@ const CommandInput = React.forwardRef<
 		<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
 		<CommandPrimitive.Input
 			ref={ref}
+			id={props.id ?? "command-palette-search"}
+			name={props.name ?? "commandPaletteSearch"}
 			className={cn(
 				"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 				className,

src/lib/custom-config.ts

@@ -13,7 +13,6 @@ export function initCustomConfig() {
 			: "https://loohui.com/wp-content/uploads/images/background_day.jpg";
 
 		window.CustomMobileBackgroundImage = window.CustomBackgroundImage;
-		window.ForceTheme = isNight ? "dark" : "light";
 
 		/* LOGO / 副标题 / 链接 */
 		window.CustomLogo = "https://loohui.com/wp-content/uploads/images/pet.png";

src/pages/Server.tsx

@@ -136,12 +136,13 @@ export default function Servers({
 		queryFn: getDomains,
 	});
 
-	// 当用户点击 "在线" 或 "离线" 或 "总服务器数" 时，status 会改变，我们就自动切回服务器视图
+	const prevStatusRef = useRef(status);
 	useEffect(() => {
-		// 只有在 status 改变时才触发，避免无限循环
-		const currentStatus = status || "all";
-		if (currentStatus !== "all" || activeView === "domains") {
-			setActiveView("servers");
+		if (prevStatusRef.current !== status) {
+			prevStatusRef.current = status;
+			if (activeView === "domains") {
+				setActiveView("servers");
+			}
 		}
 	}, [status, activeView]);
 
@@ -586,6 +587,8 @@ export default function Servers({
 								</span>
 								<select
 									aria-label="Sort metric"
+									id="server-sort-metric"
+									name="serverSortMetric"
 									value={sortType}
 									onChange={(e) => {
 										const val = e.target.value as typeof sortType;

src/test/app.test.tsx

@@ -89,6 +89,9 @@ describe("App", () => {
 		appMocks.backgroundImage = undefined;
 		appMocks.fetchSetting.mockResolvedValue(settingResponse());
 		appMocks.injectContext.mockResolvedValue(undefined);
+		appMocks.setTheme.mockClear();
+		window.ForceTheme = "";
+		localStorage.clear();
 	});
 
 	it("renders the main shell after settings load and applies global theme/background settings", async () => {
@@ -187,4 +190,16 @@ describe("App", () => {
 
 		expect(await screen.findByText("server-detail-page")).toBeInTheDocument();
 	});
+
+	it("does not overwrite user-selected theme with ForceTheme if user previously saved a theme", async () => {
+		localStorage.setItem("vite-ui-theme", "light");
+		Object.assign(window, {
+			ForceTheme: "dark",
+		});
+
+		renderApp();
+
+		expect(await screen.findByText("server-page")).toBeInTheDocument();
+		expect(appMocks.setTheme).not.toHaveBeenCalledWith("dark");
+	});
 });

src/test/pages/Server.test.tsx

@@ -52,12 +52,32 @@ vi.mock("@/components/ServerOverview", () => ({
 		offline,
 		online,
 		total,
+		onViewChange,
 	}: {
 		offline: number;
 		online: number;
 		total: number;
+		totalDomains?: number;
+		onViewChange?: (view: "servers" | "domains") => void;
 	}) => (
-		<div data-testid="server-overview">{`${total}:${online}:${offline}`}</div>
+		<div data-testid="server-overview">
+			<span>{`${total}:${online}:${offline}`}</span>
+			{onViewChange && (
+				<button
+					type="button"
+					data-testid="switch-to-domains"
+					onClick={() => onViewChange("domains")}
+				>
+					domains-view
+				</button>
+			)}
+		</div>
+	),
+}));
+
+vi.mock("@/components/DomainStatus", () => ({
+	DomainStatus: () => (
+		<div data-testid="domain-status">domain-status-content</div>
 	),
 }));
 
@@ -542,4 +562,35 @@ describe("Servers page", () => {
 		expect(screen.getByText("alpha")).toBeInTheDocument();
 		expect(screen.queryByText("beta")).not.toBeInTheDocument();
 	});
+
+	it("switches to domains view when Total Domains is selected and does not immediately revert", async () => {
+		const online = createServer({ id: 1, name: "alpha" });
+		const user = userEvent.setup();
+
+		renderServerPage({
+			connected: true,
+			lastData: websocketPayload([online]),
+		});
+
+		expect(screen.getByTestId("server-card")).toBeInTheDocument();
+
+		await user.click(screen.getByTestId("switch-to-domains"));
+
+		// Server controls/cards should now be hidden
+		expect(screen.queryByTestId("server-card")).not.toBeInTheDocument();
+		expect(screen.getByTestId("domain-status")).toBeInTheDocument();
+	});
+
+	it("renders sort metric select with id and name attributes", async () => {
+		const online = createServer({ id: 1, name: "alpha" });
+
+		renderServerPage({
+			connected: true,
+			lastData: websocketPayload([online]),
+		});
+
+		const selectElement = screen.getByRole("combobox", { name: "Sort metric" });
+		expect(selectElement).toHaveAttribute("id", "server-sort-metric");
+		expect(selectElement).toHaveAttribute("name", "serverSortMetric");
+	});
 });