在editor中增加faq区域

dictionary/en.json

@@ -83,7 +83,10 @@
     "how2UploadFont": "How to Upload Font?",
     "fontWeight": "Font Weight",
     "uploadFontButton": "Upload Font | Files with the same name will replace the fonts uploaded previously",
-    "uploadedFonts": "Uploaded Fonts"
+    "uploadedFonts": "Uploaded Fonts",
+    "faqTitle": "FAQ",
+    "faqQuestion1": "Why do text characters sometimes appear as question marks in the preview?",
+    "faqAnswer1": "Because the selected font doesn't support the language of the text. Try changing the font or uploading a custom font that supports the language."
   },
   "Footer": {
     "copyright": "© {year} Screen Designer. All rights reserved."

dictionary/zh.json

@@ -83,7 +83,10 @@
     "how2UploadFont": "如何上传字体？",
     "fontWeight": "字体粗细",
     "uploadFontButton": "上传字体 | 相同名字的文件会替换前面上传的字体",
-    "uploadedFonts": "已上传字体"
+    "uploadedFonts": "已上传字体",
+    "faqTitle": "常见问题",
+    "faqQuestion1": "为什么预览框内的文字内容会显示问号？",
+    "faqAnswer1": "因为该内容的语言没有被选中字体支持，建议更换字体或者上传自定义字体"
   },
   "Footer": {
     "copyright": "© {year} 3D文字设计工具 版权所有"

src/app/[locale]/editor/page.tsx

@@ -5,8 +5,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 { Box, Container, Flex, Heading, Text, Card } from "@radix-ui/themes";
+import { HelpCircle } from "lucide-react";
 import { Metadata } from "next";
+import { useTranslations } from "next-intl";
 import { getTranslations } from "next-intl/server";
 const host = process.env.NEXT_PUBLIC_HOST;
 export default function Page() {
@@ -15,14 +17,31 @@ export default function Page() {
 }
 
 export function OnlyPage({ textProp, backgroundProp }: { textProp: TextProp | undefined, backgroundProp: BackgroundProp | undefined }) {
+  const t = useTranslations('TextEditor');
+
   return <Flex direction={"column"} gap={"4"}>
     <Header />
-    <Box p="4">
+    <Heading as="h1" weight="bold" className="text-center">{t('title')}</Heading>
+    <Container p="4">
       <FullEditor
         textProp={textProp}
         backgroundProp={backgroundProp}
       />
-    </Box>
+    </Container>
+    <Container p="4">
+      <Heading as="h2" weight="bold" className="text-center" mb="4">{t('faqTitle')}</Heading>
+      <Flex direction="column" gap="3">
+        <Card variant="surface">
+          <Flex gap="3" align="center">
+            <HelpCircle className="text-gray-11" size={16} />
+            <Text size="3" weight="bold">{t('faqQuestion1')}</Text>
+          </Flex>
+          <Box pt="3" pl="6">
+            <Text size="2" color="gray">{t('faqAnswer1')}</Text>
+          </Box>
+        </Card>
+      </Flex>
+    </Container>
     <Footer />
   </Flex>;
 }

src/components/Header.tsx

@@ -12,7 +12,7 @@ export default function Header() {
     <header className="w-full py-2 border-b-1 ">
       <Flex justify="center" gap="9" align="center">
         <Box className="w-1/4 text-center" >
-          <a href="/" >
+          <a href={`/${locale}`} >
             <Text size="6" color="iris"><Strong>{t("appName")}</Strong></Text>
           </a>
         </Box >

src/components/SimpleEditor.tsx

@@ -6,7 +6,7 @@ import BackgroundSelector, {
 import PreviewToolbar from "./common/PreviewToolbar";
 import SimpleTextSetting from "./common/SimpleTextSetting";
 import { useEffect, useState } from "react";
-import { useTranslations } from "next-intl";
+import { useLocale, useTranslations } from "next-intl";
 import { TextProp } from "./common/TextSetting";
 import { useRouter } from "@/i18n/navigation";
 
@@ -60,6 +60,7 @@ export default function SimpleEditor({ textProp, backgroundProp }: { textProp: T
     sessionStorage.setItem("text", JSON.stringify(text));
 
   }, [text]);
+  const locale = useLocale();
 
   return (
     <Flex gap={"2"}>
@@ -69,7 +70,7 @@ export default function SimpleEditor({ textProp, backgroundProp }: { textProp: T
           setBackground={setBackground}
         />
         <SimpleTextSetting text={text} setText={setText} />
-        <Box className="text-center"> <Link className="cursor-pointer" underline="always" onClick={() => { router.push("/editor") }}>{tIndex("toolMore")} ?</Link> </Box>
+        <Box className="text-center"> <Link href={`/${locale}/editor`} >{tIndex("toolMore")} ?</Link> </Box>
       </Flex>
 
       <Flex className="w-2/3" direction={"column"} justify={"between"}>