翻译

src/component/card/index.tsx

@@ -19,6 +19,7 @@ import {
   CardPreview,
   CardProps,
 } from "@fluentui/react-components";
+import { useTranslation } from 'react-i18next'
 
 const resolveAsset = (asset: string) => {
   const ASSET_URL =
@@ -52,7 +53,7 @@ const useStyles = makeStyles({
 
 const CardExample = (props: any) => {
   const styles = useStyles();
-
+  const { t } = useTranslation();
   return (
     <Card className={styles.card} {...props}>
       <CardPreview>
@@ -87,7 +88,7 @@ const CardExample = (props: any) => {
       />
 
       <p className={styles.text}>
-        平时积极乐观、热爱工作、喜欢看书、回家后喜欢运动
+        {t("card.desc")}
       </p>
     </Card>
   );
@@ -103,7 +104,7 @@ export const FocusMode = () => {
       </section>
 
       <section>
-        <CardExample focusMode="no-tab" name="杨东明"/>
+        <CardExample focusMode="no-tab" name="杨东明" />
       </section>
 
       <section>

src/component/content/content_header/index.jsx

@@ -1,33 +1,33 @@
 import React, { Component } from "react";
+import { useTranslation } from 'react-i18next'
 
-export default class ContentHeader extends Component{
-    render(){
-        return (
-            <div class="zl-365-content-header">
-                <div class="zl-365-content-header-left">
-                    <div class="content-header-img">
-                        <img src="../../../img/getsitelogo.png" class="content-header-img-size" />
-                    </div>
-                    <div class="content-header-img-name">
-                        <div class="content-header-img-name-text">whc</div>
-                    </div>
+export default () => {
+    const {t} = useTranslation();
+    return (
+        <div class="zl-365-content-header">
+            <div class="zl-365-content-header-left">
+                <div class="content-header-img">
+                    <img src="../../../img/getsitelogo.png" class="content-header-img-size" />
                 </div>
-                <div class="zl-365-content-header-right">
-                    <div class="zl-365-content-header-btngroup">
-                        <button class="btngroup-btn">
-                            <div class="tools-text">公用组</div>
-                        </button>
-                        <button class="btngroup-btn">
-                            <div class="tools-detail-svg"><svg t="1730793263148" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="55622" width="16" height="16"><path d="M283.057 873.587l208.477-109.543a44 44 0 0 1 40.932 0l208.477 109.543-39.81-231.98a44 44 0 0 1 12.663-38.957L882.41 438.382l-233.04-33.844a44 44 0 0 1-33.128-24.062L512 169.376l-104.24 211.1a44 44 0 0 1-33.13 24.062l-233.04 33.844L310.205 602.65a44 44 0 0 1 12.662 38.958l-39.81 231.98zM512 852.7L245.08 992.95c-32.28 16.962-70-10.451-63.832-46.392l50.972-297.025L16.296 439.174c-26.127-25.453-11.717-69.817 24.38-75.06l298.42-43.338L472.547 50.519c16.143-32.692 62.761-32.692 78.904 0l133.453 270.257 298.419 43.339c36.097 5.242 50.507 49.606 24.38 75.06L791.78 649.532l50.972 297.025c6.168 35.94-31.551 63.354-63.832 46.392L512 852.7z" fill="currentColor" p-id="55623"></path></svg></div>
-                            <div class="tools-text">未关注</div>
-                        </button>
-                        <button class="btngroup-btn">
-                            <div class="tools-detail-svg"><svg t="1730793342861" class="icon" viewBox="0 0 1126 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="57681" width="16" height="16"><path d="M574.63652881 526.37537848c246.1439488 0 398.54273081 173.27762546 398.54273081 296.28671091 0 49.55580757-33.5403099 73.57905465-104.05881174 75.50762211l-9.39128603 0.12577679H290.04700063C213.11391476 898.29548829 176.59690286 874.39801798 176.59690286 822.66208939c0-123.00908658 152.39878201-296.2867109 398.03962595-296.28671091z m0 68.46415758c-208.7884288 0-324.83790051 146.48730283-324.83790051 224.88777614 0 8.59470393 3.73135929 12.40991517 12.49376597 13.24842327l4.06676252 0.16770047H883.45893052c11.69718272 0 16.5605285-3.60558365 16.5605285-13.41612374 0-78.40047445-116.55257657-224.88777728-325.34100538-224.88777614zM575.72658819 59.78774413c116.76220302 0 210.88469789 93.07435918 210.88469788 211.47165356 0 119.36157696-94.62559858 217.29928192-210.88469788 217.29928191s-210.88469789-97.43460011-211.42972757-216.33499818C364.29686062 154.32949191 459.46749002 59.78774413 575.72658819 59.78774413z m-0.25155242 68.4641576c-79.99363869 0-146.06804878 63.13963293-145.48109312 145.64879472 0 83.51537152 66.66136576 149.71555726 145.48109312 149.71555728 79.40668302 0 145.48109312-67.20639545 145.48109425-150.76369181 0-82.46723698-65.52938041-144.64258617-145.48109425-144.64258617z" p-id="57682" fill="currentColor"></path></svg></div>
-                            <div class="tools-text">1名成员</div>
-                        </button>
-                    </div>
+                <div class="content-header-img-name">
+                    <div class="content-header-img-name-text">{t("people.whc")}</div>
                 </div>
             </div>
-        )
-    }
+            <div class="zl-365-content-header-right">
+                <div class="zl-365-content-header-btngroup">
+                    <button class="btngroup-btn">
+                        <div class="tools-text">{t("header.publicGroup")}</div>
+                    </button>
+                    <button class="btngroup-btn">
+                        <div class="tools-detail-svg"><svg t="1730793263148" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="55622" width="16" height="16"><path d="M283.057 873.587l208.477-109.543a44 44 0 0 1 40.932 0l208.477 109.543-39.81-231.98a44 44 0 0 1 12.663-38.957L882.41 438.382l-233.04-33.844a44 44 0 0 1-33.128-24.062L512 169.376l-104.24 211.1a44 44 0 0 1-33.13 24.062l-233.04 33.844L310.205 602.65a44 44 0 0 1 12.662 38.958l-39.81 231.98zM512 852.7L245.08 992.95c-32.28 16.962-70-10.451-63.832-46.392l50.972-297.025L16.296 439.174c-26.127-25.453-11.717-69.817 24.38-75.06l298.42-43.338L472.547 50.519c16.143-32.692 62.761-32.692 78.904 0l133.453 270.257 298.419 43.339c36.097 5.242 50.507 49.606 24.38 75.06L791.78 649.532l50.972 297.025c6.168 35.94-31.551 63.354-63.832 46.392L512 852.7z" fill="currentColor" p-id="55623"></path></svg></div>
+                        <div class="tools-text">{t("header.notFollowed")}</div>
+                    </button>
+                    <button class="btngroup-btn">
+                        <div class="tools-detail-svg"><svg t="1730793342861" class="icon" viewBox="0 0 1126 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="57681" width="16" height="16"><path d="M574.63652881 526.37537848c246.1439488 0 398.54273081 173.27762546 398.54273081 296.28671091 0 49.55580757-33.5403099 73.57905465-104.05881174 75.50762211l-9.39128603 0.12577679H290.04700063C213.11391476 898.29548829 176.59690286 874.39801798 176.59690286 822.66208939c0-123.00908658 152.39878201-296.2867109 398.03962595-296.28671091z m0 68.46415758c-208.7884288 0-324.83790051 146.48730283-324.83790051 224.88777614 0 8.59470393 3.73135929 12.40991517 12.49376597 13.24842327l4.06676252 0.16770047H883.45893052c11.69718272 0 16.5605285-3.60558365 16.5605285-13.41612374 0-78.40047445-116.55257657-224.88777728-325.34100538-224.88777614zM575.72658819 59.78774413c116.76220302 0 210.88469789 93.07435918 210.88469788 211.47165356 0 119.36157696-94.62559858 217.29928192-210.88469788 217.29928191s-210.88469789-97.43460011-211.42972757-216.33499818C364.29686062 154.32949191 459.46749002 59.78774413 575.72658819 59.78774413z m-0.25155242 68.4641576c-79.99363869 0-146.06804878 63.13963293-145.48109312 145.64879472 0 83.51537152 66.66136576 149.71555726 145.48109312 149.71555728 79.40668302 0 145.48109312-67.20639545 145.48109425-150.76369181 0-82.46723698-65.52938041-144.64258617-145.48109425-144.64258617z" p-id="57682" fill="currentColor"></path></svg></div>
+                        <div class="tools-text">{t("header.member")}</div>
+                    </button>
+                </div>
+            </div>
+        </div>
+    )
 }

src/component/form/index.tsx

@@ -23,6 +23,8 @@ import {
 import type { ButtonProps } from "@fluentui/react-components";
 import { DatePicker } from "@fluentui/react-datepicker-compat";
 import "./index.css"
+import { useTranslation } from 'react-i18next'
+
 const useStyles = makeStyles({
   root: {
     display: "flex",
@@ -48,6 +50,7 @@ const MicButton: React.FC<ButtonProps> = (props) => {
 
 export const ContentBeforeAfter = () => {
   const styles = useStyles();
+  const { t } = useTranslation();
 
   const beforeId = useId("content-before");
   const afterId = useId("content-after");
@@ -58,12 +61,12 @@ export const ContentBeforeAfter = () => {
   return (
     <div className={styles.root}>
       <div>
-        <Label htmlFor={beforeId}>姓名</Label>
+        <Label htmlFor={beforeId}>{t("form.name")}</Label>
         <Input contentBefore={<PersonRegular />} id={beforeId} />
       </div>
 
       <div>
-        <Label htmlFor={afterId}>地址</Label>
+        <Label htmlFor={afterId}>{t("form.addr")}</Label>
         <Input
           contentAfter={<MicButton aria-label="Enter by voice" />}
           id={afterId}
@@ -71,7 +74,7 @@ export const ContentBeforeAfter = () => {
       </div>
 
       <div>
-        <Label htmlFor={beforeAndAfterId}>费用</Label>
+        <Label htmlFor={beforeAndAfterId}>{t("form.fee")}</Label>
         <Input
           contentBefore={
             <Text size={400} id={beforeLabelId}>
@@ -88,46 +91,46 @@ export const ContentBeforeAfter = () => {
         />
       </div>
       <div className="radio-form">
-        <Field label="性别">
+        <Field label={t("form.sex")}>
           <RadioGroup>
-            <Radio value="apple" label="男" />
-            <Radio value="pear" label="女" />
-            <Radio value="banana" label="未知" />
+            <Radio value="apple" label={t("form.male")} />
+            <Radio value="pear" label={t("form.female")} />
+            <Radio value="banana" label={t("form.unknown")} />
           </RadioGroup>
         </Field>
       </div>
       <div className="checkbox-form">
-        <Label htmlFor={beforeAndAfterId}>爱好</Label>
+        <Label htmlFor={beforeAndAfterId}>{t("form.hobby")}</Label>
         <Field>
-            <Checkbox label="写代码" />
-            <Checkbox label="看书" />
-            <Checkbox label="健身" />
+          <Checkbox label={t("form.writeCode")} />
+          <Checkbox label={t("form.readBook")} />
+          <Checkbox label={t("form.bodybuilding")} />
         </Field>
       </div>
       <div>
-        <label>颜色</label>
+        <label>{t("form.colour")}</label>
         <Select>
-          <option>Red</option>
-          <option>Green</option>
-          <option>Blue</option>
+          <option>{t("form.red")}</option>
+          <option>{t("form.green")}</option>
+          <option>{t("form.blue")}</option>
         </Select>
       </div>
       <div>
-        <Field label="出生日期">
-          <DatePicker placeholder="请选择日期..." />
+        <Field label={t("form.dateOfBirth")}>
+          <DatePicker placeholder={t("form.pleaseSelectADate")} />
         </Field>
       </div>
       <div>
-        <Field label="备注">
+        <Field label={t("form.remarks")}>
           <Textarea />
         </Field>
       </div>
       <div className="form-btngroup">
         <Button appearance="primary" icon={<CalendarMonthRegular />}>
-          确定
+          {t("form.sure")}
         </Button>
         <Button appearance="outline" icon={<CalendarMonthFilled />}>
-          取消
+          {t("form.cancel")}
         </Button>
       </div>
     </div>

src/component/hedaer/index.jsx

@@ -360,9 +360,9 @@ const Header = () => {
             <div class="zl-365-header-function">
                 <IconHtml></IconHtml>
             </div>
-            <div class="zl-365-header-name">ZlSoftSharePoint</div>
+            <div class="zl-365-header-name">{t("header.title")}</div>
             <div class="zl-365-header-search">
-                <Input placeholder="在此网站中搜索" contentBefore={<SearchRegular />} />
+                <Input placeholder={t("header.inputPlaceholder")} contentBefore={<SearchRegular />} />
             </div>
             <div class="zl-365-header-tools">
                 <Menu>

src/locales/langs/en-US.json

@@ -9,5 +9,51 @@
         "recycleBin": "RecycleBin",
         "edit": "Edit",
         "testList": "TestList"
+    },
+    "header": {
+        "publicGroup": "PublicGroup",
+        "notFollowed": "NotFollowed",
+        "member": "1 member",
+        "title": "ZlSoftSharePoint",
+        "inputPlaceholder": "Search this site"
+    },
+    "home": {
+        "cardComponents": "Card",
+        "treeComponent": "Tree",
+        "listComponent": "List",
+        "formComponents": "Form"
+    },
+    "people": {
+        "whc": "王华川",
+        "wrq": "吴瑞强",
+        "ydm": "杨东明",
+        "tyl": "唐渝林",
+        "cdan": "陈丹",
+        "cqs": "蔡青松"
+    },
+    "card": {
+        "desc": "I am usually positive and optimistic, love work, like reading, and like to exercise after returning home."
+    },
+    "form": {
+        "name": "Name",
+        "addr": "Address",
+        "fee": "Cost",
+        "sex": "Gender",
+        "male": "Male",
+        "female": "Female",
+        "unknown": "Unknown",
+        "hobby": "Hobby",
+        "writeCode": "WriteCode",
+        "readBook": "ReadBook",
+        "bodybuilding": "Bodybuild",
+        "colour": "Color",
+        "red": "Red",
+        "green": "Green",
+        "blue": "Blue",
+        "dateOfBirth": "BirthDate",
+        "pleaseSelectADate": "PleaseSelectDate...",
+        "remarks": "Remark",
+        "sure": "Sure",
+        "cancel": "Cancel"
     }
 }

src/locales/langs/zh-CN.json

@@ -9,5 +9,51 @@
     "recycleBin": "回收站",
     "edit": "编辑",
     "testList": "测试列表"
+  },
+  "header": {
+    "publicGroup": "公用组",
+    "notFollowed": "未关注",
+    "member": "1名成员",
+    "title": "ZlSoftSharePoint",
+    "inputPlaceholder": "在此网站中搜索"
+  },
+  "home": {
+    "cardComponents": "卡片组件",
+    "treeComponent": "树形组件",
+    "listComponent": "列表组件",
+    "formComponents": "表单组件"
+  },
+  "people": {
+    "whc": "王华川",
+    "wrq": "吴瑞强",
+    "ydm": "杨东明",
+    "tyl": "唐渝林",
+    "cdan": "陈丹",
+    "cqs": "蔡青松"
+  },
+  "card": {
+    "desc": "平时积极乐观、热爱工作、喜欢看书、回家后喜欢运动"
+  },
+  "form": {
+    "name": "姓名",
+    "addr": "地址",
+    "fee": "费用",
+    "sex": "性别",
+    "male": "男",
+    "female": "女",
+    "unknown": "未知",
+    "hobby": "爱好",
+    "writeCode": "写代码",
+    "readBook": "看书",
+    "bodybuilding": "健身",
+    "colour": "颜色",
+    "red": "红色",
+    "green": "绿色",
+    "blue": "蓝色",
+    "dateOfBirth": "出生日期",
+    "pleaseSelectADate": "请选择日期...",
+    "remarks": "备注",
+    "sure": "确定",
+    "cancel": "取消"
   }
 }

src/pages/home/index.tsx

@@ -12,14 +12,14 @@ function MyNavlink() {
   return (
     <div className="layout-main">
       <div className="layout-row">
-        <label className="layout-col-12 layout-title">卡片组件</label>
+        <label className="layout-col-12 layout-title">{t("home.cardComponents")}</label>
         <div className="layout-col-12 card-height">
           <Card></Card>
         </div>
       </div>
       <div className="layout-row">
-        <label className="layout-col-4 layout-title">树形组件</label>
-        <label className="layout-col-8 layout-title">列表组件</label>
+        <label className="layout-col-4 layout-title">{t("home.treeComponent")}</label>
+        <label className="layout-col-8 layout-title">{t("home.listComponent")}</label>
         <div className="layout-col-4 tree-height">
           <Tree></Tree>
         </div>
@@ -28,7 +28,7 @@ function MyNavlink() {
         </div>
       </div>
       <div className="layout-row">
-      <label className="layout-col-12 layout-title">表单组件</label>
+      <label className="layout-col-12 layout-title">{t("home.formComponents")}</label>
         <div className="layout-col-12 form-height">
           <Form />
         </div>