create-next-imagicma 0.0.1

package/template/app/_components/DevPreviewShield.tsx

@@ -0,0 +1,638 @@
+"use client";
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+type OverlayKind = "none" | "building" | "error";
+type ErrorSource = "compile" | "server" | "runtime" | "unknown";
+
+type ErrorInfo = {
+  source: ErrorSource;
+  message: string;
+};
+
+const SHOW_DELAY_MS = 120;
+const MIN_VISIBLE_MS = 260;
+const TOAST_VISIBLE_MS = 800;
+const MAX_ERROR_LINES = 3;
+
+function stripAnsi(input: string) {
+  return input.replace(/\u001b\[[0-9;]*m/g, "");
+}
+
+function toErrorMessage(value: unknown): string {
+  if (typeof value === "string") return value;
+  if (value instanceof Error) return value.message || "发生未知错误";
+  if (value && typeof value === "object" && "message" in value) {
+    const message = (value as { message?: unknown }).message;
+    if (typeof message === "string" && message.trim()) return message;
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return "发生未知错误";
+  }
+}
+
+function formatErrorSnippet(message: string) {
+  const cleaned = stripAnsi(message).trim();
+  const lines = cleaned.split(/\r?\n/).filter(Boolean);
+  return lines.slice(0, MAX_ERROR_LINES).join("\n");
+}
+
+function getHmrWebSocketUrl() {
+  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  const host = window.location.host;
+  return `${protocol}//${host}/_next/webpack-hmr`;
+}
+
+function UILoader() {
+  return (
+    <div className="relative w-24 h-20 bg-white/90 dark:bg-zinc-800 rounded-lg shadow-xl border border-zinc-200 dark:border-zinc-700 overflow-hidden flex flex-col p-2 gap-2">
+      {/* Header simulate */}
+      <div className="flex gap-1 mb-1">
+        <div className="w-2 h-2 rounded-full bg-red-400" />
+        <div className="w-2 h-2 rounded-full bg-yellow-400" />
+        <div className="w-2 h-2 rounded-full bg-green-400" />
+      </div>
+      {/* Content lines simulate */}
+      <div className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded animate-[pulse_1s_ease-in-out_infinite]" />
+      <div className="w-3/4 h-2 bg-indigo-100 dark:bg-indigo-900/50 rounded animate-[pulse_1.5s_ease-in-out_infinite]" />
+      <div className="w-1/2 h-2 bg-zinc-200 dark:bg-zinc-700 rounded animate-[pulse_2s_ease-in-out_infinite]" />
+      {/* Shimmer effect overlay */}
+      <div className="absolute inset-0 -translate-x-full animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-white/40 to-transparent" />
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `@keyframes shimmer { 100% { transform: translateX(100%); } }`,
+        }}
+      />
+    </div>
+  );
+}
+
+function RefreshCwIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden
+    >
+      <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+      <path d="M3 3v5h5" />
+    </svg>
+  );
+}
+
+const HMR_EXIT_DURATION_MS = 400;
+
+function HMRStatusOverlay({
+  isVisible,
+  message = "正在更新预览…",
+}: {
+  isVisible: boolean;
+  message?: string;
+}) {
+  const exitUntilRef = useRef<number | null>(null);
+  const prevVisibleRef = useRef(false);
+  const [, setTick] = useState(0);
+
+  if (isVisible) {
+    prevVisibleRef.current = true;
+    exitUntilRef.current = null;
+  } else {
+    if (prevVisibleRef.current && exitUntilRef.current === null) {
+      // eslint-disable-next-line react-hooks/purity -- intentional ref mutation for exit timing
+      exitUntilRef.current = Date.now() + HMR_EXIT_DURATION_MS;
+    }
+
+    prevVisibleRef.current = false;
+  }
+
+  useEffect(() => {
+    if (isVisible || exitUntilRef.current === null) return;
+    const timer = setTimeout(
+      () => setTick((n) => n + 1),
+      HMR_EXIT_DURATION_MS
+    );
+    return () => clearTimeout(timer);
+  }, [isVisible]);
+  // eslint-disable-next-line react-hooks/purity -- intentional ref mutation for exit timing
+  const shouldRender =isVisible || (exitUntilRef.current !== null && Date.now() < exitUntilRef.current);  
+  if (!shouldRender) {
+    exitUntilRef.current = null;
+    return null;
+  }
+
+
+  return (
+    <div
+      className={`fixed inset-0 z-[9999] flex flex-col items-center justify-center transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] ${
+        isVisible
+          ? "opacity-100 backdrop-blur-xl bg-white/60 dark:bg-black/60"
+          : "opacity-0 backdrop-blur-none pointer-events-none"
+      }`}
+    >
+      <div
+        className={`transform transition-all duration-500 ${
+          isVisible ? "scale-100 translate-y-0" : "scale-95 translate-y-4"
+        }`}
+      >
+        <div className="flex flex-col items-center">
+          <div className="mb-6 p-6 bg-white dark:bg-zinc-900 rounded-2xl shadow-2xl ring-1 ring-black/5 dark:ring-white/10 relative overflow-hidden">
+            <div className="absolute inset-0 bg-gradient-to-tr from-indigo-500/10 via-purple-500/10 to-pink-500/10 opacity-50" />
+            <div className="relative z-10">
+              <UILoader />
+            </div>
+          </div>
+          <div className="flex items-center gap-2 px-4 py-2 bg-white/80 dark:bg-zinc-800/80 rounded-full border border-zinc-200 dark:border-zinc-700 shadow-sm backdrop-blur-md">
+            <RefreshCwIcon className="text-indigo-500 animate-spin shrink-0" />
+            <span className="text-sm font-medium text-zinc-600 dark:text-zinc-300 font-mono tracking-tight">
+              {message}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+class DevRuntimeErrorBoundary extends React.PureComponent<
+  {
+    children: React.ReactNode;
+    resetKey: number;
+    onRuntimeError: (error: unknown) => void;
+  },
+  { hasError: boolean }
+> {
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: unknown) {
+    this.props.onRuntimeError(error);
+  }
+
+  componentDidUpdate(prevProps: Readonly<{ resetKey: number }>) {
+    if (prevProps.resetKey !== this.props.resetKey && this.state.hasError) {
+      this.setState({ hasError: false });
+    }
+  }
+
+  state = { hasError: false };
+
+  render() {
+    if (this.state.hasError) return null;
+    return this.props.children;
+  }
+}
+
+export function DevPreviewShield({ children }: { children: React.ReactNode }) {
+  const [overlay, setOverlay] = useState<OverlayKind>("none");
+  const [errorInfo, setErrorInfo] = useState<ErrorInfo | null>(null);
+  const [debugMode, setDebugMode] = useState(false);
+  const [toastVisible, setToastVisible] = useState(false);
+  const [resetKey, setResetKey] = useState(0);
+
+  const overlayRef = useRef<OverlayKind>("none");
+  const debugModeRef = useRef(false);
+  const visibleSinceRef = useRef<number | null>(null);
+
+  const showTimerRef = useRef<number | null>(null);
+  const hideTimerRef = useRef<number | null>(null);
+  const toastTimerRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    overlayRef.current = overlay;
+  }, [overlay]);
+
+  useEffect(() => {
+    debugModeRef.current = debugMode;
+  }, [debugMode]);
+
+  const setPreviewShieldAttr = useCallback((on: boolean) => {
+    if (on) {
+      document.documentElement.dataset.previewShield = "on";
+      return;
+    }
+    delete document.documentElement.dataset.previewShield;
+  }, []);
+
+  const shouldRenderOverlay = overlay !== "none" && !debugMode;
+
+  useEffect(() => {
+    setPreviewShieldAttr(shouldRenderOverlay);
+    return () => setPreviewShieldAttr(false);
+  }, [setPreviewShieldAttr, shouldRenderOverlay]);
+
+  useEffect(() => {
+    if (!shouldRenderOverlay) return;
+    if (overlayRef.current === "none") return;
+    if (visibleSinceRef.current == null) visibleSinceRef.current = Date.now();
+  }, [shouldRenderOverlay]);
+
+  const clearTimer = useCallback((ref: React.MutableRefObject<number | null>) => {
+    if (ref.current == null) return;
+    window.clearTimeout(ref.current);
+    ref.current = null;
+  }, []);
+
+  const showToast = useCallback(() => {
+    clearTimer(toastTimerRef);
+    setToastVisible(true);
+    toastTimerRef.current = window.setTimeout(() => {
+      toastTimerRef.current = null;
+      setToastVisible(false);
+    }, TOAST_VISIBLE_MS);
+  }, [clearTimer]);
+
+  const showBuildingOverlay = useCallback(() => {
+    setErrorInfo(null);
+    setOverlay("building");
+    visibleSinceRef.current = Date.now();
+  }, []);
+
+  const enterBuilding = useCallback(() => {
+    clearTimer(hideTimerRef);
+    clearTimer(toastTimerRef);
+
+    if (overlayRef.current !== "none") {
+      showBuildingOverlay();
+      return;
+    }
+
+    if (showTimerRef.current != null) return;
+    showTimerRef.current = window.setTimeout(() => {
+      showTimerRef.current = null;
+      showBuildingOverlay();
+    }, SHOW_DELAY_MS);
+  }, [clearTimer, showBuildingOverlay]);
+
+  const enterError = useCallback(
+    (message: string, source: ErrorSource) => {
+      clearTimer(showTimerRef);
+      clearTimer(hideTimerRef);
+
+      setOverlay("error");
+      setErrorInfo({ source, message: formatErrorSnippet(message) });
+      if (visibleSinceRef.current == null) visibleSinceRef.current = Date.now();
+    },
+    [clearTimer]
+  );
+
+  const hideOverlayWithMinVisible = useCallback(() => {
+    clearTimer(showTimerRef);
+
+    const since = visibleSinceRef.current;
+    const elapsed = since == null ? MIN_VISIBLE_MS : Date.now() - since;
+    const remaining = Math.max(0, MIN_VISIBLE_MS - elapsed);
+
+    const doHide = () => {
+      hideTimerRef.current = null;
+      setOverlay("none");
+      setErrorInfo(null);
+      visibleSinceRef.current = null;
+    };
+
+    if (remaining === 0) {
+      doHide();
+      return;
+    }
+    clearTimer(hideTimerRef);
+    hideTimerRef.current = window.setTimeout(doHide, remaining);
+  }, [clearTimer]);
+
+  const handleBuildOk = useCallback(() => {
+    const hadPendingShow = showTimerRef.current != null;
+
+    clearTimer(showTimerRef);
+    clearTimer(hideTimerRef);
+
+    setDebugMode(false);
+    setResetKey((k) => k + 1);
+
+    if (hadPendingShow && !debugModeRef.current) {
+      showToast();
+    }
+
+    if (overlayRef.current === "none") {
+      setErrorInfo(null);
+      return;
+    }
+
+    hideOverlayWithMinVisible();
+  }, [clearTimer, hideOverlayWithMinVisible, showToast]);
+
+  const handleBuildMessage = useCallback(
+    (msg: unknown) => {
+      if (!msg || typeof msg !== "object") return;
+      const type = (msg as { type?: unknown }).type;
+      if (type === "building") {
+        enterBuilding();
+        return;
+      }
+
+      if (type === "built" || type === "sync") {
+        const errors = (msg as { errors?: unknown }).errors;
+        if (Array.isArray(errors) && errors.length > 0) {
+          const first = errors[0];
+          enterError(
+            typeof first === "string" ? first : toErrorMessage(first),
+            "compile"
+          );
+          return;
+        }
+        handleBuildOk();
+        return;
+      }
+
+      if (type === "serverError") {
+        const errorJSON = (msg as { errorJSON?: unknown }).errorJSON;
+        if (typeof errorJSON === "string" && errorJSON) {
+          try {
+            const parsed = JSON.parse(errorJSON) as { message?: unknown };
+            enterError(toErrorMessage(parsed), "server");
+            return;
+          } catch {
+            enterError(errorJSON, "server");
+            return;
+          }
+        }
+        enterError("服务器发生错误。", "server");
+      }
+    },
+    [enterBuilding, enterError, handleBuildOk]
+  );
+
+  const onRuntimeError = useCallback(
+    (error: unknown) => {
+      enterError(toErrorMessage(error), "runtime");
+    },
+    [enterError]
+  );
+
+  const shortcutLabel = useMemo(() => {
+    const isMac =
+      typeof navigator !== "undefined" &&
+      /Mac|iPhone|iPad|iPod/i.test(navigator.platform);
+    return isMac ? "⌘⇧D" : "Ctrl⇧D";
+  }, []);
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      const key = e.key.toLowerCase();
+      if (!e.shiftKey || key !== "d") return;
+      if (!(e.ctrlKey || e.metaKey)) return;
+      e.preventDefault();
+      setDebugMode((v) => !v);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, []);
+
+  useEffect(() => {
+    const onError = (e: ErrorEvent) => {
+      if (e.error) {
+        enterError(toErrorMessage(e.error), "runtime");
+      } else if (e.message) {
+        enterError(e.message, "runtime");
+      } else {
+        enterError("发生运行时错误。", "runtime");
+      }
+    };
+    const onRejection = (e: PromiseRejectionEvent) => {
+      enterError(toErrorMessage(e.reason), "runtime");
+    };
+    window.addEventListener("error", onError);
+    window.addEventListener("unhandledrejection", onRejection);
+    return () => {
+      window.removeEventListener("error", onError);
+      window.removeEventListener("unhandledrejection", onRejection);
+    };
+  }, [enterError]);
+
+  useEffect(() => {
+    let alive = true;
+    let ws: WebSocket | null = null;
+    let retryCount = 0;
+    let retryTimer: number | null = null;
+
+    const connect = () => {
+      if (!alive) return;
+      if (retryTimer != null) {
+        window.clearTimeout(retryTimer);
+        retryTimer = null;
+      }
+
+      const url = getHmrWebSocketUrl();
+      try {
+        ws = new WebSocket(url);
+        ws.binaryType = "arraybuffer";
+      } catch {
+        return;
+      }
+
+      ws.onmessage = (event) => {
+        if (!alive) return;
+
+        if (event.data instanceof ArrayBuffer) {
+          try {
+            const t = new DataView(event.data).getUint8(0);
+            if (t === 1) {
+              enterError("检测到编译错误。", "compile");
+            } else {
+              enterError("检测到错误。", "unknown");
+            }
+          } catch {
+            enterError("检测到错误。", "unknown");
+          }
+          return;
+        }
+
+        if (typeof event.data !== "string") return;
+        try {
+          const msg = JSON.parse(event.data) as unknown;
+          handleBuildMessage(msg);
+        } catch {
+          // ignore non-JSON messages
+        }
+      };
+
+      ws.onopen = () => {
+        retryCount = 0;
+      };
+
+      ws.onclose = () => {
+        if (!alive) return;
+        retryCount += 1;
+        const backoffMs = Math.min(5000, 250 * retryCount);
+        retryTimer = window.setTimeout(connect, backoffMs);
+      };
+
+      ws.onerror = () => {
+        // let onclose handle reconnection
+      };
+    };
+
+    connect();
+
+    return () => {
+      alive = false;
+      if (retryTimer != null) window.clearTimeout(retryTimer);
+      if (ws) ws.close();
+      clearTimer(showTimerRef);
+      clearTimer(hideTimerRef);
+      clearTimer(toastTimerRef);
+      setPreviewShieldAttr(false);
+    };
+  }, [
+    clearTimer,
+    enterError,
+    handleBuildMessage,
+    setPreviewShieldAttr,
+    enterBuilding,
+  ]);
+
+  const title = overlay === "building" ? "正在更新预览…" : "预览暂时不可用";
+  const description =
+    overlay === "building"
+      ? "请稍候，改动即将生效。"
+      : "检测到错误，修复后将自动恢复。";
+
+  return (
+    <>
+      <DevRuntimeErrorBoundary resetKey={resetKey} onRuntimeError={onRuntimeError}>
+        {children}
+      </DevRuntimeErrorBoundary>
+
+      {!debugMode && toastVisible ? (
+        <div className="fixed left-1/2 top-6 z-[2147483646] -translate-x-1/2">
+          <div className="flex items-center gap-2 rounded-full border border-black/10 bg-white/80 px-4 py-2 text-xs font-medium text-black/70 shadow-lg backdrop-blur-md dark:border-white/10 dark:bg-zinc-950/60 dark:text-white/80">
+            <svg
+              viewBox="0 0 20 20"
+              className="h-4 w-4 text-emerald-600 dark:text-emerald-400"
+              fill="none"
+              aria-hidden="true"
+            >
+              <path
+                d="M16.25 5.75 8.25 13.75 3.75 9.25"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+            <span>已更新</span>
+          </div>
+        </div>
+      ) : null}
+
+      <HMRStatusOverlay
+        isVisible={overlay === "building"}
+        message="正在更新预览…"
+      />
+
+      {shouldRenderOverlay && overlay === "error" ? (
+        <div
+          className="fixed inset-0 z-[2147483646] flex items-center justify-center bg-white/70 px-6 py-16 backdrop-blur-md dark:bg-black/40"
+          role="alertdialog"
+          aria-modal="true"
+        >
+          <div className="w-full max-w-2xl">
+            <div className="mx-auto w-full max-w-xl rounded-3xl border border-black/10 bg-white/80 shadow-[0_24px_80px_-40px_rgba(0,0,0,0.45)] backdrop-blur-xl dark:border-white/10 dark:bg-zinc-950/60">
+              <div className="flex items-center justify-between px-5 py-4">
+                <div className="flex items-center gap-1.5">
+                  <span className="h-2.5 w-2.5 rounded-full bg-red-400/90" />
+                  <span className="h-2.5 w-2.5 rounded-full bg-amber-400/90" />
+                  <span className="h-2.5 w-2.5 rounded-full bg-emerald-400/90" />
+                </div>
+                <div className="flex items-center gap-2 rounded-full border border-black/10 bg-black/[0.03] px-3 py-1 text-xs font-medium text-black/60 shadow-sm dark:border-white/10 dark:bg-white/5 dark:text-white/70">
+                  <span className="h-1.5 w-1.5 rounded-full bg-rose-400" />
+                  <span>Error</span>
+                </div>
+                <div className="w-10" />
+              </div>
+
+              <div className="px-6 pb-8 pt-2">
+                <div className="rounded-2xl border border-black/5 bg-white/60 p-6 shadow-sm dark:border-white/10 dark:bg-white/5">
+                  <div className="flex items-center justify-between">
+                    <div className="h-3 w-28 rounded-full bg-black/10 dark:bg-white/10" />
+                    <div className="h-3 w-10 rounded-full bg-black/10 dark:bg-white/10" />
+                  </div>
+                  {errorInfo?.message ? (
+                    <div className="mt-6">
+                      <div className="mb-3 text-xs font-medium text-black/60 dark:text-white/70">
+                        {errorInfo.source === "compile"
+                          ? "编译错误"
+                          : errorInfo.source === "server"
+                            ? "服务端错误"
+                            : errorInfo.source === "runtime"
+                              ? "运行时错误"
+                              : "错误"}
+                      </div>
+                      <pre className="w-full max-h-44 overflow-auto rounded-2xl border border-black/5 bg-white/70 p-4 text-left text-sm leading-6 text-black/80 shadow-inner dark:border-white/10 dark:bg-zinc-950/40 dark:text-white/85">
+                        <code>{errorInfo.message}</code>
+                      </pre>
+                    </div>
+                  ) : null}
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-10 text-center">
+              <h2 className="text-2xl font-semibold tracking-tight text-black/90 dark:text-white">
+                {title}
+              </h2>
+              <p className="mt-3 text-sm leading-6 text-black/60 dark:text-white/70">
+                {description}
+              </p>
+
+              <div className="mt-8 flex w-full flex-col items-center gap-3 sm:flex-row sm:justify-center">
+                <button
+                  type="button"
+                  className="inline-flex h-11 w-full items-center justify-center rounded-full bg-black px-5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-black/90 sm:w-auto dark:bg-white dark:text-black dark:hover:bg-white/90"
+                  onClick={() => window.location.reload()}
+                >
+                  刷新预览
+                </button>
+                <button
+                  type="button"
+                  className="inline-flex h-11 w-full items-center justify-center rounded-full border border-black/10 bg-white/70 px-5 text-sm font-medium text-black/80 shadow-sm transition-colors hover:bg-white sm:w-auto dark:border-white/10 dark:bg-zinc-950/40 dark:text-white/80 dark:hover:bg-zinc-950/60"
+                  onClick={() => setDebugMode(true)}
+                >
+                  查看错误详情
+                </button>
+              </div>
+
+              <p className="mt-6 text-xs text-black/45 dark:text-white/55">
+                快捷键切换遮罩 / Next 面板：{shortcutLabel}
+              </p>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      {debugMode && overlay !== "none" ? (
+        <div className="fixed bottom-4 right-4 z-[2147483647]">
+          <button
+            type="button"
+            className="inline-flex items-center gap-2 rounded-full border border-black/10 bg-white/80 px-4 py-2 text-xs font-medium text-black/70 shadow-lg backdrop-blur-md transition-colors hover:bg-white dark:border-white/10 dark:bg-zinc-950/60 dark:text-white/80 dark:hover:bg-zinc-950/70"
+            onClick={() => setDebugMode(false)}
+            title={`返回预览遮罩（${shortcutLabel}）`}
+          >
+            返回预览遮罩
+            <span className="rounded-full border border-black/10 bg-black/[0.03] px-2 py-0.5 text-[10px] text-black/55 dark:border-white/10 dark:bg-white/5 dark:text-white/70">
+              {shortcutLabel}
+            </span>
+          </button>
+        </div>
+      ) : null}
+    </>
+  );
+}

package/template/app/api/greeting/route.ts

@@ -0,0 +1,27 @@
+import { NextResponse } from "next/server";
+import { api } from "@shared/routes";
+import { storage } from "@/server/storage";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  try {
+    const message = await storage.getMessage();
+    const body = { message };
+
+    // Keep server/client contract in sync.
+    api.greeting.get.responses[200].parse(body);
+
+    return NextResponse.json(body);
+  } catch (error) {
+    console.error("GET /api/greeting failed:", error);
+
+    const message =
+      error instanceof Error
+        ? error.message
+        : "Internal Server Error";
+
+    return NextResponse.json({ message }, { status: 500 });
+  }
+}