root/moteva
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): extract NotFoundPage into its own i18n-aware module

Browse Source 
Move the inline 404 component and its styles out of App.tsx into a
dedicated NotFoundPage module, and localize its copy via i18n keys.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
liangxu
2026-07-08 12:16:30 +08:00
parent c73e51e400
commit e9cfadfb90
4 changed files with 209 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/ui/App.tsx
+2 -122
View File
@@ -2,10 +2,11 @@
import { Loader2 } from "lucide-react";
import { useEffect, useState } from "react";
import { openHome, readRoute, type AppRoute } from "@/application/route";
import { 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 { NotFoundPage } from "@/ui/pages/NotFoundPage";
import { ProjectsRoutePage } from "@/ui/pages/ProjectsRoutePage";
import { useAuth } from "@/ui/auth/AuthProvider";
@@ -45,127 +46,6 @@ export function App() {
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">
frontend/src/ui/pages/NotFoundPage/index.css
+83
View File
@@ -0,0 +1,83 @@
.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);
}
@media (max-width: 760px) {
.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;
}
}
frontend/src/ui/pages/NotFoundPage/index.tsx
+123
View File
@@ -0,0 +1,123 @@
"use client";
import { openHome } from "@/application/route";
import { useI18n } from "@/i18n/i18n";
export function NotFoundPage() {
const { t } = useI18n();
return (
<main className="not-found-shell">
<section className="not-found-content">
<NotFoundMark label={t("notFoundIllustration")} />
<h1>{t("notFoundTitle")}</h1>
<p>{t("notFoundDescription")}</p>
<button type="button" onClick={openHome}>
{t("backHome")}
</button>
</section>
</main>
);
}
function NotFoundMark({ label }: { label: string }) {
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={label}>
<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>
);
}
frontend/src/ui/styles.css
+1 -81
View File
@@ -1,6 +1,7 @@
@import "./components/ProjectThumb/index.css";
@import "./components/ProjectCard/index.css";
@import "./pages/ProjectsPage/index.css";
@import "./pages/NotFoundPage/index.css";
@import "./components/DeleteProjectDialog/index.css";
@import "./components/AccountManagementDialog/index.css";
@import "./components/WorkspaceTitle/index.css";
@@ -889,64 +890,6 @@ 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;
@@ -1215,29 +1158,6 @@ button:disabled {
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 {