增加中英文

src/component/content/content_side/index.jsx

@@ -1,61 +1,65 @@
 import React, { Component } from "react";
 import MyNavlink from '../../myNavLink';
 
-export default class ContentSide extends Component{
-    render(){
-        return (
+import { useTranslation } from "react-i18next";
+
+const ContentSide = () => {
+    const { t } = useTranslation();
+    return (
         <div class="zl-365-content-side">
-        <div class="zl-365-content-side-ul">
-            <div class="zl-365-content-side-li">
-                <MyNavlink to="/home" >主页</MyNavlink>
-            </div>
-            <div class="zl-365-content-side-li">
-                <a class="content-side-li-nav" href="#" title="对话" target="_self">
-                    <span class="content-side-li-nav-text">对话</span>
-                </a>
-            </div>
-            <div class="zl-365-content-side-li">
-                <a class="content-side-li-nav" href="/Microsoft365/document" title="文档" target="_self">
-                    <span class="content-side-li-nav-text">文档</span>
-                </a>
-            </div>
-            <div class="zl-365-content-side-li">
-                <a class="content-side-li-nav" href="#" title="笔记本" target="_self">
-                    <span class="content-side-li-nav-text">笔记本</span>
-                </a>
-            </div>
-            <div class="zl-365-content-side-li">
-                {/* <a class="content-side-li-nav" href="/Microsoft365/listnew" title="测试人员列表" target="_self">
+            <div class="zl-365-content-side-ul">
+                <div class="zl-365-content-side-li">
+                    <MyNavlink to="/home" >{t("menu.home")}</MyNavlink>
+                </div>
+                <div class="zl-365-content-side-li">
+                    <a class="content-side-li-nav" href="#" title="对话" target="_self">
+                        <span class="content-side-li-nav-text">{t("menu.dialogue")}</span>
+                    </a>
+                </div>
+                <div class="zl-365-content-side-li">
+                    <a class="content-side-li-nav" href="/Microsoft365/document" title={t("menu.document")} target="_self">
+                        <span class="content-side-li-nav-text">{t("menu.document")}</span>
+                    </a>
+                </div>
+                <div class="zl-365-content-side-li">
+                    <a class="content-side-li-nav" href="#" title={t("menu.book")} target="_self">
+                        <span class="content-side-li-nav-text">{t("menu.book")}</span>
+                    </a>
+                </div>
+                <div class="zl-365-content-side-li">
+                    {/* <a class="content-side-li-nav" href="/Microsoft365/listnew" title="测试人员列表" target="_self">
                     <span class="content-side-li-nav-text">测试人员列表</span>
                   
                 </a> */}
-                <MyNavlink to="/listnew" >测试人员列表</MyNavlink>
-            </div>
-            <div class="zl-365-content-side-li">
-                <a class="content-side-li-nav" href="#" title="页面" target="_self">
-                    <span class="content-side-li-nav-text">页面</span>
-                </a>
+                    <MyNavlink to="/listnew" >{t("menu.testList")}</MyNavlink>
+                </div>
+                <div class="zl-365-content-side-li">
+                    <a class="content-side-li-nav" href="#" title={t("menu.page")} target="_self">
+                        <span class="content-side-li-nav-text">{t("menu.page")}</span>
+                    </a>
+                </div>
+                <div class="zl-365-content-side-li">
+                    <a class="content-side-li-nav" href="#" title={t("menu.websiteContent")} target="_self">
+                        <span class="content-side-li-nav-text">{t("menu.websiteContent")}</span>
+                    </a>
+                </div>
+                <div class="zl-365-content-side-li">
+                    <a class="content-side-li-nav" href="#" title={t("menu.recycleBin")} target="_self">
+                        <span class="content-side-li-nav-text">{t("menu.recycleBin")}</span>
+                    </a>
+                </div>
+                <div class="zl-365-content-side-li">
+                    <a class="content-side-li-nav" href="#" title={t("menu.edit")} target="_self">
+                        <span class="content-side-li-nav-text color-theme">{t("menu.edit")}</span>
+                    </a>
+                </div>
             </div>
-            <div class="zl-365-content-side-li">
-                <a class="content-side-li-nav" href="#" title="网站内容" target="_self">
-                    <span class="content-side-li-nav-text">网站内容</span>
-                </a>
-            </div>
-            <div class="zl-365-content-side-li">
-                <a class="content-side-li-nav" href="#" title="回收站" target="_self">
-                    <span class="content-side-li-nav-text">回收站</span>
-                </a>
-            </div>
-            <div class="zl-365-content-side-li">
-                <a class="content-side-li-nav" href="#" title="编辑" target="_self">
-                    <span class="content-side-li-nav-text color-theme">编辑</span>
-                </a>
+            <div class="zl-365-content-side-teamify">
+
             </div>
         </div>
-        <div class="zl-365-content-side-teamify">
-           
-        </div>
-    </div>
-        )
-    }
-}
+    )
+
+}
+
+export default ContentSide

src/component/hedaer/index.jsx

@@ -1,28 +1,56 @@
 import React, { Component } from "react";
 import './index.css';
+import { LocalLanguage20Regular } from '@fluentui/react-icons'
+import {
+    Button,
+    Menu,
+    MenuTrigger,
+    MenuList,
+    MenuItem,
+    MenuPopover,
+} from "@fluentui/react-components";
+import { useTranslation } from 'react-i18next'
 
-export default class Header extends Component{
-    render(){
-        return (
-            <div class="zl-365-header">
-                <div class="zl-365-header-function">
-                    <div class="function-dropdown">
+
+const Header = () => {
+    const { t, i18n } = useTranslation();
+    return (
+        <div class="zl-365-header">
+            <div class="zl-365-header-function">
+                <div class="function-dropdown">
                     <svg t="1730778589476" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11096" width="16" height="16"><path d="M113.787259 227.553185a113.787259 113.787259 0 1 0 0-227.531853 113.787259 113.787259 0 0 0 0 227.531853zM511.978668 227.553185A113.787259 113.787259 0 1 0 511.978668 0.021332a113.787259 113.787259 0 0 0 0 227.531853zM910.170076 227.553185a113.787259 113.787259 0 1 0 0-227.531853 113.787259 113.787259 0 0 0 0 227.531853zM113.787259 625.787259a113.787259 113.787259 0 1 0 0-227.574518 113.787259 113.787259 0 0 0 0 227.574518z" fill="currentColor" p-id="11097"></path><path d="M511.978668 625.787259a113.787259 113.787259 0 1 0 0-227.574518 113.787259 113.787259 0 0 0 0 227.574518z" fill="currentColor" p-id="11098"></path><path d="M910.170076 625.787259a113.787259 113.787259 0 1 0 0-227.574518 113.787259 113.787259 0 0 0 0 227.574518zM113.787259 1023.978668a113.787259 113.787259 0 1 0 0-227.531853 113.787259 113.787259 0 0 0 0 227.531853zM511.978668 1023.978668a113.787259 113.787259 0 1 0 0-227.531853A113.787259 113.787259 0 0 0 511.978668 1023.978668zM910.170076 1023.978668a113.787259 113.787259 0 1 0 0-227.531853 113.787259 113.787259 0 0 0 0 227.531853z" fill="currentColor" p-id="11099"></path></svg>
-                    </div>
-                </div>
-                <div class="zl-365-header-name">ZlSoftSharePoint</div>
-                <div class="zl-365-header-search">
-                    <span class="header-search-svg"><svg t="1730778975282" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22289" width="16" height="16"><path d="M314.445 652.986l-190.73 190.73c-15.62 15.62-15.62 40.947 0 56.568 15.622 15.621 40.948 15.621 56.57 0l190.729-190.73C433.062 759.268 511.809 789 597.5 789 797.703 789 960 626.703 960 426.5S797.703 64 597.5 64 235 226.297 235 426.5c0 85.691 29.733 164.438 79.445 226.486zM597.5 709C441.48 709 315 582.52 315 426.5 315 270.48 441.48 144 597.5 144 753.52 144 880 270.48 880 426.5 880 582.52 753.52 709 597.5 709z" fill="currentColor" p-id="22290"></path></svg></span>
-                    <input type="text" class="header-search-input" placeholder="在此网站中搜索" />
                 </div>
-                <div class="zl-365-header-tools">
-                    <div class="header-tools-set">
-                        <svg t="1730786970755" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27709" width="16" height="16"><path d="M833.75 911.25l136.25-170L900 630l11.25-51.25 110-67.5-48.75-213.75-128.75-15-32.5-41.25L825 111.25 627.5 15l-91.25 91.25-52.5 0-91.25-92.5L195 107.5l15 128.75-32.5 41.25L48.75 291.25 1.25 505l110 70L122.5 625l-68.75 108.75 136.25 172.5 122.5-42.5 47.5 23.75 42.5 122.5L622.5 1012.5l42.5-122.5 47.5-22.5L833.75 911.25zM566.25 933.75l-107.5-1.25-35-101.25-106.25-51.25-100 35L150 730l56.25-90L180 525l-90-57.5L112.5 363.75l106.25-11.25 72.5-91.25-12.5-106.25 96.25-46.25 75 76.25 117.5 1.25 75-75 96.25 47.5-11.25 106.25 73.75 92.5 106.25 12.5 23.75 105-90 56.25-26.25 115 57.5 90-66.25 83.75-100-36.25-106.25 50L566.25 933.75zM662.5 391.25c-67.5-85-191.25-100-275-32.5-83.75 67.5-97.5 190-30 275s191.25 100 275 32.5C717.5 600 730 476.25 662.5 391.25zM415 588.75c-42.5-53.75-33.75-131.25 18.75-172.5 52.5-41.25 130-32.5 172.5 20 42.5 53.75 33.75 131.25-18.75 172.5C533.75 651.25 456.25 642.5 415 588.75z" fill="currentColor" p-id="27710"></path></svg>
+            </div>
+            <div class="zl-365-header-name">ZlSoftSharePoint</div>
+            <div class="zl-365-header-search">
+                <span class="header-search-svg"><svg t="1730778975282" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22289" width="16" height="16"><path d="M314.445 652.986l-190.73 190.73c-15.62 15.62-15.62 40.947 0 56.568 15.622 15.621 40.948 15.621 56.57 0l190.729-190.73C433.062 759.268 511.809 789 597.5 789 797.703 789 960 626.703 960 426.5S797.703 64 597.5 64 235 226.297 235 426.5c0 85.691 29.733 164.438 79.445 226.486zM597.5 709C441.48 709 315 582.52 315 426.5 315 270.48 441.48 144 597.5 144 753.52 144 880 270.48 880 426.5 880 582.52 753.52 709 597.5 709z" fill="currentColor" p-id="22290"></path></svg></span>
+                <input type="text" class="header-search-input" placeholder="在此网站中搜索" />
+            </div>
+            <div class="zl-365-header-tools">
+                <Menu>
+                    <MenuTrigger disableButtonEnhancement>
+                        <LocalLanguage20Regular style={{ cursor: "pointer" }} />
+                    </MenuTrigger>
+                    <MenuPopover>
+                        <MenuList>
+                            <MenuItem onClick={() => {
+                                i18n.changeLanguage("zh-CN")
+                            }}
+                            >简体中文</MenuItem>
+                            <MenuItem onClick={() => {
+                                i18n.changeLanguage("en-US")
+                            }}>English</MenuItem>
+                        </MenuList>
+                    </MenuPopover>
+                </Menu>
+                <div class="header-tools-set">
+                    <svg t="1730786970755" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27709" width="16" height="16"><path d="M833.75 911.25l136.25-170L900 630l11.25-51.25 110-67.5-48.75-213.75-128.75-15-32.5-41.25L825 111.25 627.5 15l-91.25 91.25-52.5 0-91.25-92.5L195 107.5l15 128.75-32.5 41.25L48.75 291.25 1.25 505l110 70L122.5 625l-68.75 108.75 136.25 172.5 122.5-42.5 47.5 23.75 42.5 122.5L622.5 1012.5l42.5-122.5 47.5-22.5L833.75 911.25zM566.25 933.75l-107.5-1.25-35-101.25-106.25-51.25-100 35L150 730l56.25-90L180 525l-90-57.5L112.5 363.75l106.25-11.25 72.5-91.25-12.5-106.25 96.25-46.25 75 76.25 117.5 1.25 75-75 96.25 47.5-11.25 106.25 73.75 92.5 106.25 12.5 23.75 105-90 56.25-26.25 115 57.5 90-66.25 83.75-100-36.25-106.25 50L566.25 933.75zM662.5 391.25c-67.5-85-191.25-100-275-32.5-83.75 67.5-97.5 190-30 275s191.25 100 275 32.5C717.5 600 730 476.25 662.5 391.25zM415 588.75c-42.5-53.75-33.75-131.25 18.75-172.5 52.5-41.25 130-32.5 172.5 20 42.5 53.75 33.75 131.25-18.75 172.5C533.75 651.25 456.25 642.5 415 588.75z" fill="currentColor" p-id="27710"></path></svg>
 
-                    </div>
-                    <div class="header-tools-user"><svg t="1730787072114" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29667" width="16" height="16"><path d="M508.672 128.64c123.904 0 224.768 100.864 224.768 224.768s-100.864 224.768-224.768 224.768-224.768-100.864-224.768-224.768c0-124.032 100.864-224.768 224.768-224.768m0-79.36c-167.936 0-304.128 136.192-304.128 304.128s136.192 304.128 304.128 304.128S812.8 521.344 812.8 353.408 676.608 49.28 508.672 49.28" fill="currentColor" p-id="29668"></path><path d="M92.288 974.72c-2.304 0-4.608-0.256-6.912-0.64-21.504-3.84-35.968-24.32-32.128-45.952 40.064-227.328 264.576-350.08 455.552-350.08 21.888 0 39.68 17.792 39.68 39.68s-17.792 39.68-39.68 39.68c-126.464 0-340.864 77.184-377.344 284.544-3.584 19.2-20.224 32.768-39.168 32.768" fill="currentColor" p-id="29669"></path><path d="M931.712 974.72c-18.944 0-35.584-13.568-39.04-32.768-36.608-207.232-250.88-284.544-377.344-284.544-21.888 0-39.68-17.792-39.68-39.68s17.792-39.68 39.68-39.68c190.848 0 415.36 122.752 455.552 350.08 3.84 21.632-10.624 42.112-32.128 45.952-2.432 0.384-4.736 0.64-7.04 0.64" fill="currentColor" p-id="29670"></path></svg></div>
                 </div>
+                <div class="header-tools-user"><svg t="1730787072114" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29667" width="16" height="16"><path d="M508.672 128.64c123.904 0 224.768 100.864 224.768 224.768s-100.864 224.768-224.768 224.768-224.768-100.864-224.768-224.768c0-124.032 100.864-224.768 224.768-224.768m0-79.36c-167.936 0-304.128 136.192-304.128 304.128s136.192 304.128 304.128 304.128S812.8 521.344 812.8 353.408 676.608 49.28 508.672 49.28" fill="currentColor" p-id="29668"></path><path d="M92.288 974.72c-2.304 0-4.608-0.256-6.912-0.64-21.504-3.84-35.968-24.32-32.128-45.952 40.064-227.328 264.576-350.08 455.552-350.08 21.888 0 39.68 17.792 39.68 39.68s-17.792 39.68-39.68 39.68c-126.464 0-340.864 77.184-377.344 284.544-3.584 19.2-20.224 32.768-39.168 32.768" fill="currentColor" p-id="29669"></path><path d="M931.712 974.72c-18.944 0-35.584-13.568-39.04-32.768-36.608-207.232-250.88-284.544-377.344-284.544-21.888 0-39.68-17.792-39.68-39.68s17.792-39.68 39.68-39.68c190.848 0 415.36 122.752 455.552 350.08 3.84 21.632-10.624 42.112-32.128 45.952-2.432 0.384-4.736 0.64-7.04 0.64" fill="currentColor" p-id="29670"></path></svg></div>
             </div>
-        )
-    }
-}
+        </div>
+    )
+}
+
+export default Header

src/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
-import { App } from "./App";
+import App from "./App";
 import './locales'
 import reportWebVitals from "./reportWebVitals";
 import { FluentProvider, webLightTheme } from "@fluentui/react-components";

src/locales/langs/en-US.json

@@ -1,10 +1,13 @@
 {
     "menu": {
-        "home": "home"
-    },
-    "login": {
-        "username": "username",
-        "password": "password",
-        "title": "login"
+        "home": "Home",
+        "dialogue": "Dialogue",
+        "document": "Document",
+        "book": "Book",
+        "page": "Page",
+        "websiteContent": "WebsiteContent",
+        "recycleBin": "RecycleBin",
+        "edit": "Edit",
+        "testList": "TestList"
     }
 }

src/locales/langs/zh-CN.json

@@ -1,10 +1,13 @@
-{
-    "menu": {
-        "home": "主页"
-    },
-    "login": {
-        "username": "用户名",
-        "password": "密码",
-        "title": "登录"
-    }
-}
+{
+  "menu": {
+    "home": "主页",
+    "dialogue": "对话",
+    "document": "文档",
+    "book": "笔记本",
+    "page": "页面",
+    "websiteContent": "网站内容",
+    "recycleBin": "回收站",
+    "edit": "编辑",
+    "testList": "测试列表"
+  }
+}