shen/fast3dtextonline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善seo

Browse Source
This commit is contained in:
ymk
2025-07-31 20:13:02 +08:00
parent 0bb1a98696
commit 4485c88a11
10 changed files with 161 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/[locale]/do-not-write-on-this-page/page.tsx
View File

@@ -3,8 +3,9 @@ import { getTranslations, setRequestLocale } from "next-intl/server";
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import { useTranslations } from "next-intl";
import DoNotWriteOnThisPage from "@/components/screen/DoNotWriteOnThisPage";
import { Metadata } from "next";
import Editor from "@/components/Editor";
import { FontNames, FontWeights } from "@/components/common/TextSetting";
export default function Page({
params,
@@ -18,6 +19,13 @@ export default function Page({
const t = useTranslations("DoNotWriteOnThisPage");
const indexT = useTranslations("Index");
const text = {
text: "Do Not Write On This Page",
color: "#8e86fe",
font: FontNames[0],
weight: FontWeights[0],
}
return (
<div className="flex flex-col min-h-screen overflow-hidden">
{/* Header */}
@@ -41,7 +49,7 @@ export default function Page({
<h2 className="text-3xl font-bold text-center mb-12">
{t("toolTitle")}
</h2>
<DoNotWriteOnThisPage></DoNotWriteOnThisPage>
<Editor textProp={text} backgroundProp={undefined}></Editor>
</section>
{/* Features Section */}

88
src/app/[locale]/page.tsx
View File

@@ -28,7 +28,7 @@ export default function HomePage({
{/* Hero Section */}
<Section className="w-full bg-gradient-to-r from-blue-500 to-purple-600">
<Flex justify={"center"} align={"center"} direction={"column"}>
<Heading as="h1" size={"7"} >
<Heading as="h1" size={"9"} >
{t("heroTitle")}
</Heading>
<Box p={"4"} >
@@ -45,92 +45,92 @@ export default function HomePage({
{/* 工具栏 */}
<Section p="4" className="md:w-2/3 w-full">
<Flex justify={"between"} align={"center"} direction={"column"} gap={"2"}>
<Heading as="h2" size={"6"}>
<Flex justify={"between"} align={"center"} direction={"column"} gap={"6"} p={"6"} id="designTool">
<Heading as="h2" size={"8"}>
{t("toolTitle")}
</Heading>
<Editor></Editor>
<Editor textProp={undefined} backgroundProp={undefined} ></Editor>
</Flex>
</Section>
{/* Features Section */}
<Section className="w-full py-16 bg-gradient-to-br from-orange-50 to-amber-50">
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<h2 className="text-3xl font-bold text-center mb-12">
<Section className="w-full py-16 bg-accent-3">
<Flex direction={"column"} justify={"center"} align={"center"} gap={"6"} p={"6"}>
<Heading as="h2" size={"8"} className="text-3xl font-bold text-center">
{t("featuresTitle")}
</h2>
</Heading>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="bg-white p-6 rounded-lg shadow-sm border-l-4 border-orange-500">
<h3 className="text-xl font-bold mb-3">{t("feature1Title")}</h3>
<p className="text-gray-600">{t("feature1Desc")}</p>
<div className=" p-6 rounded-lg shadow-sm border-l-4 border-orange-500">
<Heading as="h3" className="text-xl font-bold mb-3">{t("feature1Title")}</Heading>
<p >{t("feature1Desc")}</p>
</div>
<div className="bg-white p-6 rounded-lg shadow-sm border-l-4 border-amber-500">
<h3 className="text-xl font-bold mb-3">{t("feature2Title")}</h3>
<p className="text-gray-600">{t("feature2Desc")}</p>
<div className="p-6 rounded-lg shadow-sm border-l-4 border-amber-500">
<Heading as="h3" className="text-xl font-bold mb-3">{t("feature2Title")}</Heading>
<p >{t("feature2Desc")}</p>
</div>
<div className="bg-white p-6 rounded-lg shadow-sm border-l-4 border-yellow-500">
<h3 className="text-xl font-bold mb-3">{t("feature3Title")}</h3>
<p className="text-gray-600">{t("feature3Desc")}</p>
<div className=" p-6 rounded-lg shadow-sm border-l-4 border-yellow-500">
<Heading as="h3" className="text-xl font-bold mb-3">{t("feature3Title")}</Heading>
<p >{t("feature3Desc")}</p>
</div>
</div>
</div>
</Flex>
</Section>
{/* Testimonials Section */}
<Section className="w-full py-16 bg-gradient-to-br from-blue-50 to-purple-50">
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 space-y-8">
<h2 className="text-3xl font-bold text-center mb-12">
<Section className="w-full py-16 bg-gray-2">
<Flex direction={"column"} justify={"center"} align={"center"} gap={"6"} p={"6"}>
<Heading as="h2" size={"8"} className="text-3xl font-bold text-center mb-12">
{t("testimonialsTitle")}
</h2>
</Heading>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="bg-white p-6 rounded-lg shadow-sm border-l-4 border-blue-500">
<p className="text-gray-600 mb-4">"{t("testimonial1Text")}"</p>
<div className=" p-6 rounded-lg shadow-sm border-l-4 border-blue-500">
<p className=" mb-4">"{t("testimonial1Text")}"</p>
<p className="font-semibold">- {t("testimonial1Author")}</p>
</div>
<div className="bg-white p-6 rounded-lg shadow-sm border-l-4 border-purple-500">
<p className="text-gray-600 mb-4">"{t("testimonial2Text")}"</p>
<div className=" p-6 rounded-lg shadow-sm border-l-4 border-purple-500">
<p className=" mb-4">"{t("testimonial2Text")}"</p>
<p className="font-semibold">- {t("testimonial2Author")}</p>
</div>
</div>
</div>
</Flex>
</Section>
{/* CTA Section */}
<section className="w-full py-16 bg-blue-600 text-white">
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
<h2 className="text-3xl font-bold mb-6">{t("ctaTitle")}</h2>
<Section className="w-full py-16 bg-blue-9 ">
<Flex direction={"column"} justify={"center"} align={"center"} gap={"6"} p={"6"}>
<Heading as="h2" size={"8"} className="text-3xl font-bold mb-6">{t("ctaTitle")}</Heading>
<p className="text-xl mb-8 max-w-3xl mx-auto">{t("ctaSubtitle")}</p>
<a
className="bg-white text-blue-600 px-8 py-3 rounded-full font-bold text-lg hover:bg-gray-100 transition-colors"
className=" px-8 py-3 rounded-full font-bold text-lg bg-blue-300 hover:bg-blue-500 transition-colors dark:bg-gray-800 dark:hover:bg-gray-600"
href="#designTool"
>
{t("ctaButton")}
</a>
</div>
</section>
</Flex>
</Section>
{/* FAQ Section */}
<section className="w-full py-16 bg-white">
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<h2 className="text-3xl font-bold text-center mb-12">
<section className="w-full py-16 bg-panel">
<Flex direction={"column"} justify={"center"} align={"center"} gap={"6"} p={"6"}>
<Heading as="h2" size={"8"} className="text-3xl font-bold text-center mb-12">
{t("faqTitle")}
</h2>
</Heading>
<div className="max-w-3xl mx-auto space-y-4">
<div className="border-b pb-4">
<h3 className="text-xl font-bold mb-2">{t("faqQuestion1")}</h3>
<p className="text-gray-600">{t("faqAnswer1")}</p>
<Heading as="h3" className="text-xl font-bold mb-2">{t("faqQuestion1")}</Heading>
<p >{t("faqAnswer1")}</p>
</div>
<div className="border-b pb-4">
<h3 className="text-xl font-bold mb-2">{t("faqQuestion2")}</h3>
<p className="text-gray-600">{t("faqAnswer2")}</p>
<Heading as="h3" className="text-xl font-bold mb-2">{t("faqQuestion2")}</Heading>
<p>{t("faqAnswer2")}</p>
</div>
<div className="border-b pb-4">
<h3 className="text-xl font-bold mb-2">{t("faqQuestion3")}</h3>
<p className="text-gray-600">{t("faqAnswer3")}</p>
<Heading as="h3" className="text-xl font-bold mb-2">{t("faqQuestion3")}</Heading>
<p >{t("faqAnswer3")}</p>
</div>
</div>
</div>
</Flex>
</section>
</Flex>

4
src/app/globals.css
View File

@@ -86,7 +86,7 @@
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary: oklch(100% 0.00011 271.152);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
@@ -95,7 +95,7 @@
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--border: oklch(71.931% 0.03935 17.993 / 0.3);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376);

7
src/components/Editor.tsx
View File

@@ -12,17 +12,16 @@ import { useTranslations } from "next-intl";
* 全特性工具栏
* @returns
*/
export default function Page() {
export default function Page({ textProp, backgroundProp }: { textProp: TextProp | undefined, backgroundProp: BackgroundProp | undefined }) {
const t = useTranslations("TextEditor");
const [background, setBackground] = useState<BackgroundProp>({
const [background, setBackground] = useState<BackgroundProp>(backgroundProp || {
type: "color",
color: "#c4b1b1",
image: null,
});
const [text, setText] = useState<TextProp>({
const [text, setText] = useState<TextProp>(textProp || {
text: t("defaultText"),
color: "#8e86fe",
font: FontNames[0],

12
src/components/Footer.tsx
View File

@@ -8,18 +8,6 @@ export default function Footer() {
<footer className="w-full border-t backdrop-blur-sm bg-background/95 ">
<Flex justify={"between"} align={"center"} direction={"column"} gap={"2"} p="2">
<Flex justify={"center"} gap={"4"}>
<Link
href="/black-screen"
className="text-sm text-muted-foreground hover:text-primary"
>
Black Screen
</Link>
<Link
href="/white-screen"
className="text-sm text-muted-foreground hover:text-primary"
>
White Screen
</Link>
<Link
href="/do-not-write-on-this-page"
className="text-sm text-muted-foreground hover:text-primary"

10
src/components/Header.tsx
View File

@@ -15,16 +15,6 @@ export default function Header() {
</Box >
<Flex gap={"4"} justify={"between"} align={"center"}>
<Link
href="/black-screen"
>
Black Screen
</Link>
<Link
href="/white-screen"
>
White Screen
</Link>
<Link
href="/do-not-write-on-this-page"
>

9
src/components/common/PreviewToolbar.tsx
View File

@@ -4,7 +4,7 @@ import { useTranslations } from "next-intl";
import { Eye, Download } from "lucide-react";
import { BackgroundProp } from "./BackgroundSelector";
import { TextProp } from "./TextSetting";
import { Box, Flex } from "@radix-ui/themes";
import { Text, Flex } from "@radix-ui/themes";
import { getPicture, resize, init as threeInit, updateBackground, updateTextProps } from "./ThreeTools";
const Sizes = [
@@ -13,7 +13,6 @@ const Sizes = [
"800x600",
]
function gcd(a: number, b: number): number {
return b === 0 ? a : gcd(b, a % b);
}
@@ -128,6 +127,12 @@ export default function PreviewToolbar({
return (
<Flex direction={"column"} justify={"center"} align={"center"} p="2" className="rounded-lg border w-full" gap={"2"}>
<Flex gap={"4"} >
{t("tipsTitle")}:
<Text>{t("mouseLeft")}</Text>
<Text>{t("mouseMiddle")}</Text>
<Text>{t("mouseRight")}</Text>
</Flex>
<canvas ref={container} className="w-full border border-gray-300" style={{
aspectRatio: AspectRatio[aspectRadio],
// backgroundColor: background.type === "color" ? background.color : "none",

12
src/components/common/TextSetting.tsx
View File

@@ -1,6 +1,5 @@
import { Flex, Heading } from "@radix-ui/themes";
import { useTranslations } from "next-intl";
import { useEffect } from "react";
export interface TextProp {
text: string;
@@ -10,13 +9,18 @@ export interface TextProp {
}
export function getFontPath(fontName: string, fontWeight: String) {
return `/fonts/${fontName}_${fontWeight}.typeface.json`;
if (fontName != "noto_sans_zh") {
return `/fonts/${fontName}_${fontWeight}.typeface.json`;
} else {
fontWeight = fontWeight.charAt(0).toUpperCase() + fontWeight.slice(1);
return `https://fast3dtest.mysoul.fun/Noto_Sans_SC_${fontWeight}.json`;
}
}
export const FontWeights = ["regular", "bold"];
export const FontNames = ["gentilis", "helvetiker", "optimer"];
export const FontNames = ["gentilis", "helvetiker", "optimer", "noto_sans_zh"];
export default function TextEditor({
export default function TextSetting({
text,
setText,
}: {