Initial commit

src/web/app.tsx

@@ -0,0 +1,67 @@
+import { useQuery } from "@tanstack/react-query";
+import { Layout, Menu, RadioGroup, Space } from "tdesign-react";
+
+import type { HealthResponse } from "../shared/api";
+
+import { type ThemePreference, useThemePreference } from "./hooks/use-theme-preference";
+
+const { Content, Header } = Layout;
+const THEME_OPTIONS = [
+  { label: "系统", value: "system" },
+  { label: "明亮", value: "light" },
+  { label: "黑暗", value: "dark" },
+] as const;
+
+export function App() {
+  const { preference: themePreference, setPreference: setThemePreference } = useThemePreference();
+  const { data: health } = useQuery({
+    queryFn: fetchHealth,
+    queryKey: ["health"],
+    refetchInterval: 30000,
+    staleTime: 5000,
+  });
+
+  const handleThemeChange = (value: ThemePreference) => {
+    setThemePreference(value);
+  };
+
+  return (
+    <Layout className="dashboard">
+      <Header>
+        <Menu.HeadMenu
+          logo={
+            <span className="dashboard-brand">
+              <span className="dashboard-logo">{"{{app-name}}"}</span>
+            </span>
+          }
+          operations={
+            <div className="dashboard-header-controls">
+              <RadioGroup
+                onChange={handleThemeChange}
+                options={THEME_OPTIONS.map((option) => ({ label: option.label, value: option.value }))}
+                theme="button"
+                value={themePreference}
+                variant="default-filled"
+              />
+            </div>
+          }
+        />
+      </Header>
+      <Content>
+        <div className="dashboard-content">
+          <Space direction="vertical" size="large" style={{ width: "100%" }}>
+            <h2>欢迎使用 {"{{app-name}}"}</h2>
+            <p>在此构建你的应用。以下是 /health API 的返回数据（前后端联调示例）：</p>
+            {health && <pre className="health-response">{JSON.stringify(health, null, 2)}</pre>}
+          </Space>
+        </div>
+      </Content>
+    </Layout>
+  );
+}
+
+async function fetchHealth(): Promise<HealthResponse> {
+  const response = await fetch("/health");
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+  return response.json() as Promise<HealthResponse>;
+}