diff --git a/dictionary/en.json b/dictionary/en.json index f0edc02..b8f1d96 100644 --- a/dictionary/en.json +++ b/dictionary/en.json @@ -1,6 +1,9 @@ { - "Index": { + "Header": { "appName": "Fast3DText", + "editorName": "Editor" + }, + "HomePage": { "heroTitle": "Create Stunning 3D Text Designs", "heroSubtitle": "Generate and customize beautiful 3D text effects for your projects", "toolTitle": "3D Text Generator Tool", diff --git a/dictionary/zh.json b/dictionary/zh.json index 0205284..4c16a37 100644 --- a/dictionary/zh.json +++ b/dictionary/zh.json @@ -1,6 +1,9 @@ { - "Index": { + "Header": { "appName": "Fast3DText", + "editorName": "编辑器" + }, + "HomePage": { "heroTitle": "创建惊艳的3D文字设计", "heroSubtitle": "为您的项目生成并定制精美的3D文字效果", "toolTitle": "3D文字生成工具", diff --git a/src/app/[locale]/do-not-write-on-this-page/page.tsx b/src/app/[locale]/do-not-write-on-this-page/page.tsx index defb847..c32b734 100644 --- a/src/app/[locale]/do-not-write-on-this-page/page.tsx +++ b/src/app/[locale]/do-not-write-on-this-page/page.tsx @@ -7,17 +7,10 @@ import { Metadata } from "next"; import Editor from "@/components/SimpleEditor"; import { FontNames, FontWeights, TextProp } from "@/components/common/TextSetting"; -export default function Page({ - params, -}: { - params: Promise<{ locale: string }>; -}) { - const { locale } = use(params); - // Enable static rendering - setRequestLocale(locale); +export default function Page() { const t = useTranslations("DoNotWriteOnThisPage"); - const indexT = useTranslations("Index"); + const indexT = useTranslations("HomePage"); const text = TextProp.default("Do Not Write On This Page"); diff --git a/src/app/[locale]/editor/page.tsx b/src/app/[locale]/editor/page.tsx index 98eb453..20ebddd 100644 --- a/src/app/[locale]/editor/page.tsx +++ b/src/app/[locale]/editor/page.tsx @@ -3,9 +3,10 @@ import Footer from "@/components/Footer"; import FullEditor from "@/components/FullEditor"; import Header from "@/components/Header"; import { Locales } from "@/i18n/config"; -import { Box, Flex } from "@radix-ui/themes"; +import { Flex } from "@radix-ui/themes"; import { Metadata } from "next"; -import { getTranslations } from "next-intl/server"; +import { getTranslations, setRequestLocale } from "next-intl/server"; +import { use } from "react"; const host = process.env.NEXT_PUBLIC_HOST; export default function Page() { diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx index f57807b..89959c5 100644 --- a/src/app/[locale]/page.tsx +++ b/src/app/[locale]/page.tsx @@ -8,16 +8,9 @@ import { Locales } from "@/i18n/config"; import { Metadata } from "next"; import { Box, Flex, Heading, Section, Text } from "@radix-ui/themes"; const host = process.env.NEXT_PUBLIC_HOST; -export default function HomePage({ - params, -}: { - params: Promise<{ locale: string }>; -}) { - const { locale } = use(params); - // Enable static rendering - setRequestLocale(locale); +export default function HomePage() { - const t = useTranslations("Index"); + const t = useTranslations("HomePage"); return (
diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 08cf6b9..4a29ab4 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,10 +1,16 @@ +'use client' import { useTranslations } from "next-intl"; import LanguageSwitcher from "./LanguageSwitcher"; import { ModeToggle } from "./ModeToggle"; import { Box, Flex, Link, Strong, Text } from "@radix-ui/themes"; +import { useRouter } from "@/i18n/navigation"; export default function Header() { - const t = useTranslations("Index"); + + const t = useTranslations("Header"); + + const router = useRouter(); + return (
@@ -16,9 +22,9 @@ export default function Header() { { router.push("/editor") }} > - Editor + {t("editorName")} diff --git a/src/components/LanguageSwitcher.tsx b/src/components/LanguageSwitcher.tsx index 4e5cc49..d9364a6 100644 --- a/src/components/LanguageSwitcher.tsx +++ b/src/components/LanguageSwitcher.tsx @@ -1,44 +1,12 @@ -"use client"; - -import { useEffect, useState } from "react"; - +'use client'; import { usePathname, useRouter } from "@/i18n/navigation"; -import { Locales } from "@/i18n/config"; import { Button, DropdownMenu } from "@radix-ui/themes"; +import { useLocale } from "next-intl"; const LanguageSwitcher = () => { - const router = useRouter(); const pathname = usePathname(); - const [currentLanguage, setCurrentLanguage] = useState("en"); + const locale = useLocale(); - useEffect(() => { - const savedLanguage = - document.cookie - .split("; ") - .find((row) => row.startsWith("NEXT_LOCALE=")) - ?.split("=")[1] || "en"; - setCurrentLanguage(savedLanguage); - - const urlLanguage = pathname.split("/")[1]; - if (Locales.includes(urlLanguage)) { - setCurrentLanguage(urlLanguage); - } - }, [pathname]); - - const changeLanguage = (newLanguage: string) => { - setCurrentLanguage(newLanguage); - document.cookie = `NEXT_LOCALE=${newLanguage}; path=/;`; - - const segments = pathname.split("/"); - if (Locales.includes(segments[1])) { - segments[1] = newLanguage; - } else { - segments.splice(1, 0, newLanguage); - } - - router.push(segments.join("/")); - router.refresh(); - }; const languageLabels = { en: "English", @@ -48,21 +16,26 @@ const LanguageSwitcher = () => { // jp: "日本語", }; + const router = useRouter(); const labels = []; for (let l in languageLabels) { const key = l as keyof typeof languageLabels; labels.push( - changeLanguage(l)}> + { + if (l !== locale) { + router.push(pathname, { locale: l }); + } + }}> {languageLabels[key]} ); } return ( - + diff --git a/src/components/SimpleEditor.tsx b/src/components/SimpleEditor.tsx index 99af5f9..b7c143e 100644 --- a/src/components/SimpleEditor.tsx +++ b/src/components/SimpleEditor.tsx @@ -5,9 +5,10 @@ import BackgroundSelector, { } from "./common/BackgroundSelector"; import PreviewToolbar from "./common/PreviewToolbar"; import SimpleTextSetting from "./common/SimpleTextSetting"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { useTranslations } from "next-intl"; import { TextProp } from "./common/TextSetting"; +import { useRouter } from "@/i18n/navigation"; /** * 简易工具 @@ -16,7 +17,9 @@ import { TextProp } from "./common/TextSetting"; export default function Page({ textProp, backgroundProp }: { textProp: TextProp | undefined, backgroundProp: BackgroundProp | undefined }) { const t = useTranslations("TextEditor"); - const tIndex = useTranslations("Index"); + const tIndex = useTranslations("HomePage"); + + const router = useRouter(); const [background, setBackground] = useState(backgroundProp || { type: "color", @@ -26,6 +29,34 @@ export default function Page({ textProp, backgroundProp }: { textProp: TextProp const [text, setText] = useState(textProp || TextProp.default(t("defaultText"))); + useEffect(() => { + let bg = sessionStorage.getItem("background"); + + if (bg) { + console.log("初始化设置 bg", bg); + + setBackground(JSON.parse(bg)); + } + + let txt = sessionStorage.getItem("text"); + + if (txt) { + console.log("初始化设置 txt", txt); + + setText(JSON.parse(txt)); + } + + }, []); + + useEffect(() => { + sessionStorage.setItem("background", JSON.stringify(background)); + }, [background]); + + useEffect(() => { + sessionStorage.setItem("text", JSON.stringify(text)); + + }, [text]); + return ( @@ -39,7 +70,7 @@ export default function Page({ textProp, backgroundProp }: { textProp: TextProp - {tIndex("toolMore")}? + { router.push("/editor") }}>{tIndex("toolMore")}? ); diff --git a/src/components/common/PreviewToolbar.tsx b/src/components/common/PreviewToolbar.tsx index e96999e..cd94c6a 100644 --- a/src/components/common/PreviewToolbar.tsx +++ b/src/components/common/PreviewToolbar.tsx @@ -47,8 +47,8 @@ export default function PreviewToolbar({ } else { const box = container.current; const split = Sizes[aspectRadio].split("x").map(Number); - threeInit(box, split[0], split[1]); - console.log("three init"); + const initSuccess = threeInit(box, split[0], split[1]); + console.log("three init ", initSuccess); } } @@ -59,13 +59,26 @@ export default function PreviewToolbar({ useEffect(updateSize, [aspectRadio]); useEffect(() => { - updateBackground(background); - console.log("background init"); + + const timeoutId = setTimeout(() => { + updateBackground(background); + + console.log("background change", background); + }, 200); + + return () => clearTimeout(timeoutId); + }, [background]); useEffect(() => { - updateTextProps(text); - console.log("text init"); + + const timeoutId = setTimeout(() => { + updateTextProps(text); + + console.log("text change", text); + }, 1000); + + return () => clearTimeout(timeoutId); }, [text]); const handleDownload = () => { diff --git a/src/components/common/ThreeTools.ts b/src/components/common/ThreeTools.ts index 037c710..54f79b2 100644 --- a/src/components/common/ThreeTools.ts +++ b/src/components/common/ThreeTools.ts @@ -13,11 +13,20 @@ let camera: THREE.PerspectiveCamera, controls: OrbitControls, container: HTMLCanvasElement; +console.log("three tool loaded"); + +let inited = false; + export function init( _container: HTMLCanvasElement, width: number, height: number ) { + // if (inited) { + // renderer.dispose(); + // } + + inited = true; container = _container; scene = new THREE.Scene(); @@ -156,6 +165,7 @@ export async function updateTextProps(textProps: TextProp) { (textMesh.material as THREE.MeshLambertMaterial).color.set(textProps.color); } + scene.add(textMesh); lastTextProps = textProps; } diff --git a/src/i18n/routing.ts b/src/i18n/routing.ts index 5176d11..5ec72fa 100644 --- a/src/i18n/routing.ts +++ b/src/i18n/routing.ts @@ -7,7 +7,7 @@ export const routing = defineRouting({ // Used when no locale matches defaultLocale: "en", - localeDetection: true, + localeDetection: false, //to remove the locale prefix from the url - localePrefix: "never", + localePrefix: "as-needed", });