feat: 搭建前后端可执行程序示例

src/web/app.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useState } from "react";
+import type { DemoResponse } from "../shared/api";
+
+type DemoState =
+  | { status: "loading" }
+  | { status: "success"; data: DemoResponse }
+  | { status: "error"; message: string };
+
+export function App() {
+  const [demoState, setDemoState] = useState<DemoState>({ status: "loading" });
+
+  useEffect(() => {
+    const abortController = new AbortController();
+
+    async function loadDemo() {
+      try {
+        const response = await fetch("/api/demo", { signal: abortController.signal });
+
+        if (!response.ok) {
+          throw new Error(`请求失败: ${response.status}`);
+        }
+
+        const data = (await response.json()) as DemoResponse;
+        setDemoState({ status: "success", data });
+      } catch (error) {
+        if (abortController.signal.aborted) return;
+
+        setDemoState({
+          status: "error",
+          message: error instanceof Error ? error.message : "未知错误",
+        });
+      }
+    }
+
+    void loadDemo();
+
+    return () => abortController.abort();
+  }, []);
+
+  return (
+    <main className="shell">
+      <section className="hero" aria-labelledby="page-title">
+        <p className="eyebrow">Vite + React + Bun</p>
+        <h1 id="page-title">Gateway Checker Demo</h1>
+        <p className="summary">这个页面用于验证前端开发、Bun 后端 API 和单可执行文件打包链路已经跑通。</p>
+      </section>
+
+      <section className="card" aria-live="polite">
+        <div className="card-header">
+          <span className="status-dot" data-state={demoState.status} />
+          <h2>后端连接状态</h2>
+        </div>
+
+        {demoState.status === "loading" ? <p>正在请求 /api/demo...</p> : null}
+
+        {demoState.status === "error" ? (
+          <div className="error">
+            <strong>请求失败</strong>
+            <p>{demoState.message}</p>
+          </div>
+        ) : null}
+
+        {demoState.status === "success" ? (
+          <div className="result">
+            <p className="message">{demoState.data.message}</p>
+            <dl>
+              <div>
+                <dt>运行模式</dt>
+                <dd>{demoState.data.runtime.mode}</dd>
+              </div>
+              <div>
+                <dt>Bun 版本</dt>
+                <dd>{demoState.data.runtime.bunVersion}</dd>
+              </div>
+              <div>
+                <dt>平台</dt>
+                <dd>
+                  {demoState.data.runtime.platform}/{demoState.data.runtime.arch}
+                </dd>
+              </div>
+              <div>
+                <dt>响应时间</dt>
+                <dd>{demoState.data.runtime.timestamp}</dd>
+              </div>
+            </dl>
+          </div>
+        ) : null}
+      </section>
+    </main>
+  );
+}