feat(ui): path-based app-router routes with 404 and project auth preview

Resolve routes from pathname (and legacy hash), add a notFound route with a dedicated 404 page, and show a blurred workspace preview for unauthenticated project visits. Wire up Next.js app-router entry files and listen for popstate so history navigation updates the route. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-08 12:07:13 +08:00
parent 92343ef1f6
commit 4e98a81aae
9 changed files with 592 additions and 15 deletions
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";

 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
@@ -0,0 +1,7 @@
+"use client";
+
+import { ClientRoot } from "@/app/root";
+
+export default function CatchAllPage() {
+  return <ClientRoot />;
+}
@@ -0,0 +1,7 @@
+"use client";
+
+import { ClientRoot } from "@/app/root";
+
+export default function ProjectPage() {
+  return <ClientRoot />;
+}
@@ -0,0 +1,7 @@
+"use client";
+
+import { ClientRoot } from "@/app/root";
+
+export default function ProjectPage() {
+  return <ClientRoot />;
+}
@@ -0,0 +1,7 @@
+"use client";
+
+import { ClientRoot } from "@/app/root";
+
+export default function ProjectsPage() {
+  return <ClientRoot />;
+}
@@ -1,25 +1,44 @@
 export type AppRoute =
  | { name: "home" }
  | { name: "projects" }
-  | { name: "project"; id: string };
+  | { name: "project"; id: string }
+  | { name: "notFound" };

 export function readRoute(): AppRoute {
  if (typeof window === "undefined") {
    return { name: "home" };
  }
  const hash = window.location.hash.replace(/^#/, "");
-  if (hash === "/projects") {
+  if (hash) {
+    return routeFromPath(hash) ?? { name: "notFound" };
+  }
+
+  return routeFromPath(window.location.pathname) ?? { name: "notFound" };
+}
+
+function routeFromPath(path: string): AppRoute | null {
+  const [pathOnly] = path.split(/[?#]/);
+  const normalized = pathOnly.replace(/\/+$/, "") || "/";
+  if (normalized === "/projects") {
    return { name: "projects" };
  }
-  const match = hash.match(/^\/project\/([^/]+)$/);
+  const match = normalized.match(/^\/projects?\/([^/]+)$/);
  if (match) {
    return { name: "project", id: decodeURIComponent(match[1]) };
  }
-  return { name: "home" };
+  if (normalized === "/") {
+    return { name: "home" };
+  }
+  return null;
 }

 export function openHome() {
  if (typeof window === "undefined") return;
+  if (window.location.pathname !== "/") {
+    window.history.pushState(null, "", "/");
+    window.dispatchEvent(new PopStateEvent("popstate"));
+    return;
+  }
  window.location.hash = "/";
 }

@@ -168,19 +168,17 @@ export const designGateway = {

  agentSocket(projectId: string, payload: AgentChatPayload, handlers: ProjectEventHandlers) {
    let closed = false;
-    let closeEvents: (() => void) | null = payload.threadId ? designGateway.projectEvents(projectId, handlers, { threadId: payload.threadId }) : null;
+    let closeEvents: (() => void) | null = null;

    void designGateway
      .agentChat(projectId, payload)
      .then((response) => {
        if (closed) return;
        handlers.onProject?.(response.project);
-        if (!closeEvents) {
-          closeEvents = designGateway.projectEvents(response.project.id, handlers, {
-            threadId: response.threadId || payload.threadId,
-            eventsUrl: response.eventsUrl
-          });
-        }
+        closeEvents = designGateway.projectEvents(response.project.id, handlers, {
+          threadId: response.threadId || payload.threadId,
+          eventsUrl: response.eventsUrl
+        });
      })
      .catch((error: Error) => {
        if (!closed) {
@@ -2,7 +2,8 @@

 import { Loader2 } from "lucide-react";
 import { useEffect, useState } from "react";
-import { readRoute, type AppRoute } from "@/application/route";
+import { openHome, readRoute, type AppRoute } from "@/application/route";
+import { BrandMark } from "@/ui/components/BrandMark";
 import { CanvasWorkspace } from "@/ui/pages/CanvasWorkspace";
 import { HomePage } from "@/ui/pages/HomePage";
 import { ProjectsRoutePage } from "@/ui/pages/ProjectsRoutePage";
@@ -16,7 +17,11 @@ export function App() {
    setRoute(readRoute());
    const handleRoute = () => setRoute(readRoute());
    window.addEventListener("hashchange", handleRoute);
-    return () => window.removeEventListener("hashchange", handleRoute);
+    window.addEventListener("popstate", handleRoute);
+    return () => {
+      window.removeEventListener("hashchange", handleRoute);
+      window.removeEventListener("popstate", handleRoute);
+    };
  }, []);

  useEffect(() => {
@@ -33,8 +38,184 @@ export function App() {
    );
  }

-  if (route.name === "project" && !isAuthenticated) return <HomePage />;
+  if (route.name === "project" && !isAuthenticated) return <ProjectAuthPreview />;
  if (route.name === "project") return <CanvasWorkspace projectId={route.id} />;
  if (route.name === "projects") return <ProjectsRoutePage />;
+  if (route.name === "notFound") return <NotFoundPage />;
  return <HomePage />;
 }
+
+function NotFoundPage() {
+  const handleHome = () => {
+    openHome();
+  };
+
+  return (
+    <main className="not-found-shell">
+      <section className="not-found-content">
+        <NotFoundMark />
+        <h1>404：页面未找到！</h1>
+        <p>我们到处都找过了，但找不到您要找的页面。</p>
+        <button type="button" onClick={handleHome}>
+          返回首页
+        </button>
+      </section>
+    </main>
+  );
+}
+
+function NotFoundMark() {
+  return (
+    <svg className="not-found-mark" xmlns="http://www.w3.org/2000/svg" width="279" height="128" fill="none" viewBox="0 0 279 128" aria-label="404">
+      <g clipPath="url(#missing_svg_a)">
+        <g filter="url(#missing_svg_b)">
+          <path stroke="#FFAE62" strokeLinecap="round" strokeOpacity="0.5" strokeWidth="20.671" d="M53 12v90" />
+        </g>
+        <g filter="url(#missing_svg_c)">
+          <path stroke="#FFAE62" strokeLinecap="round" strokeOpacity="0.5" strokeWidth="20.671" d="M53.5 11.5 14.843 60.29c-5.193 6.555-.525 16.21 7.838 16.21H74" />
+        </g>
+        <g filter="url(#missing_svg_d)">
+          <path stroke="#FFAE62" strokeLinecap="round" strokeOpacity="0.5" strokeWidth="20.671" d="M231 12v90" />
+        </g>
+        <g filter="url(#missing_svg_e)">
+          <path stroke="#FFAE62" strokeLinecap="round" strokeOpacity="0.5" strokeWidth="20.671" d="m231.5 11.5-38.657 48.79c-5.193 6.555-.525 16.21 7.838 16.21H252" />
+        </g>
+        <g filter="url(#missing_svg_f)">
+          <circle cx="231.089" cy="101.089" r="6.291" stroke="#fff" strokeWidth="3.595" />
+        </g>
+        <circle cx="231.089" cy="101.089" r="7.19" stroke="#fff" strokeWidth="1.798" />
+        <g filter="url(#missing_svg_g)">
+          <path fill="#2F3640" d="m231.748 101.191 16.029 1.702c.874.093 1.188 1.204.492 1.741l-5.784 4.455a.97.97 0 0 0-.344.511l-1.954 7.034c-.235.847-1.383.974-1.798.199l-7.604-14.214a.974.974 0 0 1 .963-1.428" />
+          <path stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="0.723" d="m231.748 101.191 16.029 1.702c.874.093 1.188 1.204.492 1.741l-5.784 4.455a.97.97 0 0 0-.344.511l-1.954 7.034c-.235.847-1.383.974-1.798.199l-7.604-14.214a.974.974 0 0 1 .963-1.428" />
+        </g>
+        <g filter="url(#missing_svg_h)">
+          <ellipse cx="131.5" cy="57" stroke="#FFAE62" strokeLinecap="round" strokeOpacity="0.5" strokeWidth="20.671" rx="29.5" ry="40" />
+        </g>
+      </g>
+      <defs>
+        <filter id="missing_svg_b" width="20.672" height="110.672" x="42.664" y="1.664" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="4.494" />
+          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
+          <feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.458824 0 0 0 0 0.309804 0 0 0 0.2 0" />
+          <feBlend in2="shape" result="innerShadow" />
+        </filter>
+        <filter id="missing_svg_c" width="82.027" height="85.672" x="2.309" y="1.164" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="4.494" />
+          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
+          <feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.458824 0 0 0 0 0.309804 0 0 0 0.2 0" />
+          <feBlend in2="shape" result="innerShadow" />
+        </filter>
+        <filter id="missing_svg_d" width="20.672" height="110.672" x="220.664" y="1.664" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="4.494" />
+          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
+          <feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.458824 0 0 0 0 0.309804 0 0 0 0.2 0" />
+          <feBlend in2="shape" result="innerShadow" />
+        </filter>
+        <filter id="missing_svg_e" width="82.027" height="85.672" x="180.309" y="1.164" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="4.494" />
+          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
+          <feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.458824 0 0 0 0 0.309804 0 0 0 0.2 0" />
+          <feBlend in2="shape" result="innerShadow" />
+        </filter>
+        <filter id="missing_svg_f" width="26.601" height="26.603" x="217.787" y="87.787" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feGaussianBlur result="foregroundBlur" stdDeviation="2.606" />
+        </filter>
+        <filter id="missing_svg_g" width="30.279" height="28.458" x="224.519" y="100.822" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="5.786" />
+          <feGaussianBlur stdDeviation="2.893" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+          <feBlend in2="BackgroundImageFix" result="dropShadow" />
+          <feBlend in="SourceGraphic" in2="dropShadow" result="shape" />
+        </filter>
+        <filter id="missing_svg_h" width="79.672" height="100.672" x="91.664" y="6.664" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="4.494" />
+          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
+          <feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.458824 0 0 0 0 0.309804 0 0 0 0.2 0" />
+          <feBlend in2="shape" result="innerShadow" />
+        </filter>
+        <clipPath id="missing_svg_a">
+          <path fill="#fff" d="M0 0h279v128H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+function ProjectAuthPreview() {
+  return (
+    <div className="project-auth-shell" aria-hidden="true">
+      <div className="project-auth-blur">
+        <header className="project-auth-topbar">
+          <div className="project-auth-title">
+            <BrandMark className="project-auth-mark" />
+            <span />
+          </div>
+          <div className="project-auth-top-actions">
+            <i />
+            <i />
+            <b />
+          </div>
+        </header>
+        <main className="project-auth-main">
+          <section className="project-auth-stage">
+            <div className="project-auth-grid" />
+            <div className="project-auth-frame primary" />
+            <div className="project-auth-frame secondary" />
+            <div className="project-auth-frame tertiary" />
+            <div className="project-auth-toolbar">
+              <i />
+              <i />
+              <i />
+              <i />
+            </div>
+          </section>
+          <aside className="project-auth-panel">
+            <div className="project-auth-panel-head">
+              <span />
+              <i />
+              <i />
+            </div>
+            <div className="project-auth-thread">
+              <b />
+              <span />
+              <span />
+              <span />
+            </div>
+            <div className="project-auth-composer">
+              <span />
+              <div>
+                <i />
+                <i />
+              </div>
+            </div>
+          </aside>
+        </main>
+      </div>
+    </div>
+  );
+}
@@ -889,6 +889,357 @@ button:disabled {
  font-weight: 800;
 }

+.not-found-shell {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  color: #101827;
+  background: #fff;
+}
+
+.not-found-content {
+  width: min(520px, 100%);
+  display: grid;
+  justify-items: center;
+  text-align: center;
+}
+
+.not-found-mark {
+  width: min(280px, 72vw);
+  height: auto;
+  margin-bottom: 57px;
+}
+
+.not-found-content h1 {
+  margin: 0;
+  color: #111827;
+  font-size: 32px;
+  line-height: 1.25;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.not-found-content p {
+  margin: 16px 0 32px;
+  color: #6b7280;
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 500;
+}
+
+.not-found-content button {
+  min-width: 128px;
+  height: 42px;
+  padding: 0 26px;
+  border-radius: 12px;
+  color: #fff;
+  background: #030303;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  transition: transform 0.16s ease, background 0.16s ease;
+}
+
+.not-found-content button:hover {
+  background: #171717;
+  transform: translateY(-1px);
+}
+
+.project-auth-shell {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: #f7f7f4;
+}
+
+.project-auth-blur {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  filter: blur(18px);
+  opacity: 0.66;
+  transform: scale(1.04);
+  transform-origin: center;
+  pointer-events: none;
+  user-select: none;
+}
+
+.project-auth-topbar {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 14px;
+  border-bottom: 1px solid #eceef1;
+  background: rgba(255, 255, 255, 0.86);
+}
+
+.project-auth-title,
+.project-auth-top-actions,
+.project-auth-panel-head,
+.project-auth-toolbar,
+.project-auth-composer div {
+  display: flex;
+  align-items: center;
+}
+
+.project-auth-title {
+  gap: 10px;
+}
+
+.project-auth-mark {
+  width: 18px;
+  height: 26px;
+  color: #151515;
+}
+
+.project-auth-title span,
+.project-auth-thread b,
+.project-auth-thread span,
+.project-auth-composer span {
+  display: block;
+  border-radius: 999px;
+  background: #e1e3e6;
+}
+
+.project-auth-title span {
+  width: 168px;
+  height: 14px;
+}
+
+.project-auth-top-actions {
+  gap: 8px;
+}
+
+.project-auth-top-actions i,
+.project-auth-panel-head i,
+.project-auth-toolbar i,
+.project-auth-composer i {
+  display: block;
+  border-radius: 999px;
+  background: #e3e5e8;
+}
+
+.project-auth-top-actions i {
+  width: 28px;
+  height: 28px;
+}
+
+.project-auth-top-actions b {
+  width: 24px;
+  height: 24px;
+  display: block;
+  border-radius: 999px;
+  background: #151515;
+}
+
+.project-auth-main {
+  height: calc(100vh - 48px);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 400px;
+}
+
+.project-auth-stage {
+  position: relative;
+  min-width: 0;
+  overflow: hidden;
+  background: #f7f7f4;
+}
+
+.project-auth-grid {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(38, 45, 57, 0.055) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(38, 45, 57, 0.055) 1px, transparent 1px);
+  background-size: 38px 38px;
+}
+
+.project-auth-frame {
+  position: absolute;
+  border: 1px solid rgba(189, 193, 201, 0.9);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 18px 58px rgba(17, 24, 39, 0.08);
+}
+
+.project-auth-frame.primary {
+  left: 18%;
+  top: 20%;
+  width: 260px;
+  height: 180px;
+}
+
+.project-auth-frame.secondary {
+  left: 48%;
+  top: 34%;
+  width: 220px;
+  height: 150px;
+}
+
+.project-auth-frame.tertiary {
+  left: 31%;
+  top: 58%;
+  width: 180px;
+  height: 118px;
+}
+
+.project-auth-toolbar {
+  position: absolute;
+  left: 50%;
+  bottom: 28px;
+  gap: 10px;
+  padding: 9px 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.9);
+  transform: translateX(-50%);
+  box-shadow: 0 18px 48px rgba(17, 24, 39, 0.1);
+}
+
+.project-auth-toolbar i {
+  width: 26px;
+  height: 26px;
+}
+
+.project-auth-panel {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid #eceef1;
+  background: rgba(255, 255, 255, 0.88);
+}
+
+.project-auth-panel-head {
+  height: 56px;
+  gap: 10px;
+  padding: 0 18px;
+}
+
+.project-auth-panel-head span {
+  width: 184px;
+  height: 16px;
+  display: block;
+  margin-right: auto;
+  border-radius: 999px;
+  background: #dfe2e6;
+}
+
+.project-auth-panel-head i {
+  width: 24px;
+  height: 24px;
+}
+
+.project-auth-thread {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 28px 22px;
+}
+
+.project-auth-thread b {
+  width: 62%;
+  height: 18px;
+}
+
+.project-auth-thread span {
+  height: 12px;
+}
+
+.project-auth-thread span:nth-child(2) {
+  width: 86%;
+}
+
+.project-auth-thread span:nth-child(3) {
+  width: 72%;
+}
+
+.project-auth-thread span:nth-child(4) {
+  width: 48%;
+}
+
+.project-auth-composer {
+  margin: auto 18px 20px;
+  padding: 18px;
+  border: 1px solid #e3e5e9;
+  border-radius: 18px;
+  background: #fff;
+  box-shadow: 0 20px 60px rgba(17, 24, 39, 0.08);
+}
+
+.project-auth-composer span {
+  width: 72%;
+  height: 14px;
+  margin-bottom: 42px;
+}
+
+.project-auth-composer div {
+  justify-content: space-between;
+}
+
+.project-auth-composer i {
+  width: 28px;
+  height: 28px;
+}
+
+@media (max-width: 760px) {
+  .project-auth-main {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .project-auth-panel {
+    display: none;
+  }
+
+  .project-auth-title span {
+    width: 112px;
+  }
+
+  .project-auth-frame.primary {
+    left: 14%;
+    top: 23%;
+    width: 190px;
+    height: 138px;
+  }
+
+  .project-auth-frame.secondary {
+    left: 42%;
+    top: 48%;
+    width: 150px;
+    height: 108px;
+  }
+
+  .project-auth-frame.tertiary {
+    display: none;
+  }
+
+  .not-found-shell {
+    padding: 44px 22px;
+  }
+
+  .not-found-mark {
+    margin-bottom: 44px;
+  }
+
+  .not-found-content h1 {
+    font-size: 28px;
+  }
+
+  .not-found-content p {
+    margin: 14px 0 28px;
+    font-size: 14px;
+  }
+
+  .not-found-content button {
+    min-width: 120px;
+    height: 40px;
+    border-radius: 12px;
+    font-size: 15px;
+  }
+}
+
 .workspace-shell {
  width: 100vw;
  height: 100vh;