Merge branch 'master' of http://787255.xyz:4003/ydm/zl365

src/component/bar/index.jsx

@@ -1,55 +1,136 @@
 import React, { Component } from "react";
 import './index.css';
+import { Tooltip } from "@fluentui/react-components";
 
 export default class Bar extends Component{
     render(){
         return (
-            <div class="zl-365-bar">
-                <div class="bar-ul">
-                    <div class="bar-li">
-                        <span class="bar-li-svg">
-                            <svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-                                <path d="M7.31299 1.26164C7.69849 0.897163 8.30151 0.897163 8.68701 1.26164L13.5305 5.84098C13.8302 6.12431 14 6.51853 14 6.93094V12.5002C14 13.3286 13.3284 14.0002 12.5 14.0002H10.5C9.67157 14.0002 9 13.3286 9 12.5002V10.0002C9 9.72407 8.77614 9.50021 8.5 9.50021H7.5C7.22386 9.50021 7 9.72407 7 10.0002V12.5002C7 13.3286 6.32843 14.0002 5.5 14.0002H3.5C2.67157 14.0002 2 13.3286 2 12.5002V6.93094C2 6.51853 2.1698 6.12431 2.46948 5.84098L7.31299 1.26164ZM8 1.98828L3.15649 6.56762C3.0566 6.66207 3 6.79347 3 6.93094V12.5002C3 12.7763 3.22386 13.0002 3.5 13.0002H5.5C5.77614 13.0002 6 12.7763 6 12.5002V10.0002C6 9.17179 6.67157 8.50022 7.5 8.50022H8.5C9.32843 8.50022 10 9.17179 10 10.0002V12.5002C10 12.7763 10.2239 13.0002 10.5 13.0002H12.5C12.7761 13.0002 13 12.7763 13 12.5002V6.93094C13 6.79347 12.9434 6.66207 12.8435 6.56762L8 1.98828Z" fill="currentColor"></path>
-                            </svg>
-                        </span>
-                    </div>
-                    <div class="bar-li">
-                        <span class="bar-li-svg">
-                            <svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-                                <path d="M8,2a6,6,0,1,0,6,6A6,6,0,0,0,8,2Zm2,1.4a5.08,5.08,0,0,1,.76.42l.15.1a4.7,4.7,0,0,1,.65.53l0,0a4.69,4.69,0,0,1,.56.69.83.83,0,0,1,.08.12,4.31,4.31,0,0,1,.26.47H10.77A7.56,7.56,0,0,0,9.9,3.38ZM10,8a9.85,9.85,0,0,1-.08,1.25H6.08a9.81,9.81,0,0,1,0-2.5H9.92A9.85,9.85,0,0,1,10,8ZM8,3c.59,0,1.37,1,1.76,2.75H6.24C6.63,4,7.41,3,8,3ZM3.75,5.39,4,5a4.7,4.7,0,0,1,.45-.55l0,0a4.7,4.7,0,0,1,.65-.53l.15-.1A5.08,5.08,0,0,1,6,3.4l0,0a7.56,7.56,0,0,0-.87,2.37H3.56C3.62,5.63,3.68,5.51,3.75,5.39ZM3.11,9a4.78,4.78,0,0,1,0-2,2,2,0,0,1,.07-.23H5.07C5,7.15,5,7.57,5,8s0,.85.07,1.25H3.18A2,2,0,0,1,3.11,9ZM6,12.6a5.08,5.08,0,0,1-.76-.42l-.15-.1a4.7,4.7,0,0,1-.65-.53l0,0A4.7,4.7,0,0,1,4,11l-.26-.37c-.07-.12-.13-.24-.19-.36H5.23a7.56,7.56,0,0,0,.86,2.37ZM8,13c-.59,0-1.37-1-1.76-2.75H9.76C9.37,12,8.59,13,8,13Zm4.25-2.39L12,11a4.7,4.7,0,0,1-.45.55l0,0a4.7,4.7,0,0,1-.65.53l-.15.1a4.32,4.32,0,0,1-.76.42l-.06,0a7.56,7.56,0,0,0,.87-2.37h1.67C12.38,10.37,12.32,10.49,12.25,10.61Zm.57-1.36H10.93c0-.4.07-.82.07-1.25s0-.85-.07-1.25h1.89a2,2,0,0,1,.07.23,4.78,4.78,0,0,1,0,2A2,2,0,0,1,12.82,9.25Z" fill="currentColor"></path>
-                            </svg>
-                        </span>
-                    </div>
-                    <div class="bar-li">
-                        <span class="bar-li-svg">
-                            <svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-                                <path d="M3.5 5C3.22386 5 3 5.22386 3 5.5C3 5.77614 3.22386 6 3.5 6H10.5C10.7761 6 11 5.77614 11 5.5C11 5.22386 10.7761 5 10.5 5H3.5ZM3.5 7C3.22386 7 3 7.22386 3 7.5V9.5C3 9.77614 3.22386 10 3.5 10H5.5C5.77614 10 6 9.77614 6 9.5V7.5C6 7.22386 5.77614 7 5.5 7H3.5ZM4 9V8H5V9H4ZM7.5 7C7.22386 7 7 7.22386 7 7.5C7 7.77614 7.22386 8 7.5 8H10.5C10.7761 8 11 7.77614 11 7.5C11 7.22386 10.7761 7 10.5 7H7.5ZM7.5 9C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10H10.5C10.7761 10 11 9.77614 11 9.5C11 9.22386 10.7761 9 10.5 9H7.5ZM1 4C1 2.89543 1.89543 2 3 2H11C12.1046 2 13 2.89543 13 4C14.1046 4 15 4.89543 15 6V10.5C15 11.8807 13.8807 13 12.5 13H3.5C2.11929 13 1 11.8807 1 10.5V4ZM12.5 10.5C12.2239 10.5 12 10.2761 12 10V4C12 3.44772 11.5523 3 11 3H3C2.44772 3 2 3.44772 2 4V10.5C2 11.3284 2.67157 12 3.5 12H12.5C13.3284 12 14 11.3284 14 10.5V6C14 5.44772 13.5523 5 13 5V10C13 10.2761 12.7761 10.5 12.5 10.5Z" fill="currentColor"></path>
-                            </svg>
-                        </span>
-                    </div>
-                    <div class="bar-li">
-                        <span class="bar-li-svg">
-                            <svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-                                <path d="M5 1C3.89543 1 3 1.89543 3 3V13C3 14.1046 3.89543 15 5 15H11C12.1046 15 13 14.1046 13 13V5.41421C13 5.01639 12.842 4.63486 12.5607 4.35355L9.64645 1.43934C9.36514 1.15804 8.98361 1 8.58579 1H5ZM4 3C4 2.44772 4.44772 2 5 2H8V4.5C8 5.32843 8.67157 6 9.5 6H12V13C12 13.5523 11.5523 14 11 14H5C4.44772 14 4 13.5523 4 13V3ZM11.7929 5H9.5C9.22386 5 9 4.77614 9 4.5V2.20711L11.7929 5Z" fill="currentColor"></path>
-                            </svg>
-                        </span>
-                    </div>
-                    <div class="bar-li">
-                        <span class="bar-li-svg">
-                            <svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-                                <path d="M13.5858 12H5V14H11.5858L13.5858 12ZM5 15H4H3C1.89543 15 1 14.1046 1 13V12V11V9V8V6V5V4L4 1H13C14.1046 1 15 1.89543 15 3V5V6V8V9V11V12L12 15H5ZM14 11V9H5V11H14ZM14 8V6H5V8H14ZM14 5V3C14 2.44772 13.5523 2 13 2H4.41421L2 4.41421V5H4H5H14ZM2 6V8H4V6H2ZM2 9V11H4V9H2ZM2 12V13C2 13.5523 2.44772 14 3 14H4V12H2Z" fill="currentColor"></path>
-                            </svg>
-                        </span>
-                    </div>
-                    <div class="bar-li">
-                        <span class="bar-li-svg">
-                            <svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-                                <path d="M8 5C8.27614 5 8.5 5.22386 8.5 5.5V7.5H10.5C10.7761 7.5 11 7.72386 11 8C11 8.27614 10.7761 8.5 10.5 8.5H8.5V10.5C8.5 10.7761 8.27614 11 8 11C7.72386 11 7.5 10.7761 7.5 10.5V8.5H5.5C5.22386 8.5 5 8.27614 5 8C5 7.72386 5.22386 7.5 5.5 7.5H7.5V5.5C7.5 5.22386 7.72386 5 8 5ZM2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8ZM8 3C5.23858 3 3 5.23858 3 8C3 10.7614 5.23858 13 8 13C10.7614 13 13 10.7614 13 8C13 5.23858 10.7614 3 8 3Z" fill="currentColor"></path>
-                            </svg>
-                        </span>
-                    </div>
+          <div class="zl-365-bar">
+            <div class="bar-ul">
+              <Tooltip
+                content="SharePoint 起始页面"
+                relationship="label"
+                positioning="after"
+              >
+                <div class="bar-li">
+                  <span class="bar-li-svg">
+                    <svg
+                      height="20"
+                      width="20"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 16 16"
+                    >
+                      <path
+                        d="M7.31299 1.26164C7.69849 0.897163 8.30151 0.897163 8.68701 1.26164L13.5305 5.84098C13.8302 6.12431 14 6.51853 14 6.93094V12.5002C14 13.3286 13.3284 14.0002 12.5 14.0002H10.5C9.67157 14.0002 9 13.3286 9 12.5002V10.0002C9 9.72407 8.77614 9.50021 8.5 9.50021H7.5C7.22386 9.50021 7 9.72407 7 10.0002V12.5002C7 13.3286 6.32843 14.0002 5.5 14.0002H3.5C2.67157 14.0002 2 13.3286 2 12.5002V6.93094C2 6.51853 2.1698 6.12431 2.46948 5.84098L7.31299 1.26164ZM8 1.98828L3.15649 6.56762C3.0566 6.66207 3 6.79347 3 6.93094V12.5002C3 12.7763 3.22386 13.0002 3.5 13.0002H5.5C5.77614 13.0002 6 12.7763 6 12.5002V10.0002C6 9.17179 6.67157 8.50022 7.5 8.50022H8.5C9.32843 8.50022 10 9.17179 10 10.0002V12.5002C10 12.7763 10.2239 13.0002 10.5 13.0002H12.5C12.7761 13.0002 13 12.7763 13 12.5002V6.93094C13 6.79347 12.9434 6.66207 12.8435 6.56762L8 1.98828Z"
+                        fill="currentColor"
+                      ></path>
+                    </svg>
+                  </span>
                 </div>
+              </Tooltip>
+              <Tooltip
+                content="我的网站"
+                relationship="label"
+                positioning="after"
+              >
+                <div class="bar-li">
+                  <span class="bar-li-svg">
+                    <svg
+                      height="20"
+                      width="20"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 16 16"
+                    >
+                      <path
+                        d="M8,2a6,6,0,1,0,6,6A6,6,0,0,0,8,2Zm2,1.4a5.08,5.08,0,0,1,.76.42l.15.1a4.7,4.7,0,0,1,.65.53l0,0a4.69,4.69,0,0,1,.56.69.83.83,0,0,1,.08.12,4.31,4.31,0,0,1,.26.47H10.77A7.56,7.56,0,0,0,9.9,3.38ZM10,8a9.85,9.85,0,0,1-.08,1.25H6.08a9.81,9.81,0,0,1,0-2.5H9.92A9.85,9.85,0,0,1,10,8ZM8,3c.59,0,1.37,1,1.76,2.75H6.24C6.63,4,7.41,3,8,3ZM3.75,5.39,4,5a4.7,4.7,0,0,1,.45-.55l0,0a4.7,4.7,0,0,1,.65-.53l.15-.1A5.08,5.08,0,0,1,6,3.4l0,0a7.56,7.56,0,0,0-.87,2.37H3.56C3.62,5.63,3.68,5.51,3.75,5.39ZM3.11,9a4.78,4.78,0,0,1,0-2,2,2,0,0,1,.07-.23H5.07C5,7.15,5,7.57,5,8s0,.85.07,1.25H3.18A2,2,0,0,1,3.11,9ZM6,12.6a5.08,5.08,0,0,1-.76-.42l-.15-.1a4.7,4.7,0,0,1-.65-.53l0,0A4.7,4.7,0,0,1,4,11l-.26-.37c-.07-.12-.13-.24-.19-.36H5.23a7.56,7.56,0,0,0,.86,2.37ZM8,13c-.59,0-1.37-1-1.76-2.75H9.76C9.37,12,8.59,13,8,13Zm4.25-2.39L12,11a4.7,4.7,0,0,1-.45.55l0,0a4.7,4.7,0,0,1-.65.53l-.15.1a4.32,4.32,0,0,1-.76.42l-.06,0a7.56,7.56,0,0,0,.87-2.37h1.67C12.38,10.37,12.32,10.49,12.25,10.61Zm.57-1.36H10.93c0-.4.07-.82.07-1.25s0-.85-.07-1.25h1.89a2,2,0,0,1,.07.23,4.78,4.78,0,0,1,0,2A2,2,0,0,1,12.82,9.25Z"
+                        fill="currentColor"
+                      ></path>
+                    </svg>
+                  </span>
+                </div>
+              </Tooltip>
+              <Tooltip
+                content="我的新闻"
+                relationship="label"
+                positioning="after"
+              >
+                <div class="bar-li">
+                  <span class="bar-li-svg">
+                    <svg
+                      height="20"
+                      width="20"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 16 16"
+                    >
+                      <path
+                        d="M3.5 5C3.22386 5 3 5.22386 3 5.5C3 5.77614 3.22386 6 3.5 6H10.5C10.7761 6 11 5.77614 11 5.5C11 5.22386 10.7761 5 10.5 5H3.5ZM3.5 7C3.22386 7 3 7.22386 3 7.5V9.5C3 9.77614 3.22386 10 3.5 10H5.5C5.77614 10 6 9.77614 6 9.5V7.5C6 7.22386 5.77614 7 5.5 7H3.5ZM4 9V8H5V9H4ZM7.5 7C7.22386 7 7 7.22386 7 7.5C7 7.77614 7.22386 8 7.5 8H10.5C10.7761 8 11 7.77614 11 7.5C11 7.22386 10.7761 7 10.5 7H7.5ZM7.5 9C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10H10.5C10.7761 10 11 9.77614 11 9.5C11 9.22386 10.7761 9 10.5 9H7.5ZM1 4C1 2.89543 1.89543 2 3 2H11C12.1046 2 13 2.89543 13 4C14.1046 4 15 4.89543 15 6V10.5C15 11.8807 13.8807 13 12.5 13H3.5C2.11929 13 1 11.8807 1 10.5V4ZM12.5 10.5C12.2239 10.5 12 10.2761 12 10V4C12 3.44772 11.5523 3 11 3H3C2.44772 3 2 3.44772 2 4V10.5C2 11.3284 2.67157 12 3.5 12H12.5C13.3284 12 14 11.3284 14 10.5V6C14 5.44772 13.5523 5 13 5V10C13 10.2761 12.7761 10.5 12.5 10.5Z"
+                        fill="currentColor"
+                      ></path>
+                    </svg>
+                  </span>
+                </div>
+              </Tooltip>
+              <Tooltip
+                content="我的文件"
+                relationship="label"
+                positioning="after"
+              >
+                <div class="bar-li">
+                  <span class="bar-li-svg">
+                    <svg
+                      height="20"
+                      width="20"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 16 16"
+                    >
+                      <path
+                        d="M5 1C3.89543 1 3 1.89543 3 3V13C3 14.1046 3.89543 15 5 15H11C12.1046 15 13 14.1046 13 13V5.41421C13 5.01639 12.842 4.63486 12.5607 4.35355L9.64645 1.43934C9.36514 1.15804 8.98361 1 8.58579 1H5ZM4 3C4 2.44772 4.44772 2 5 2H8V4.5C8 5.32843 8.67157 6 9.5 6H12V13C12 13.5523 11.5523 14 11 14H5C4.44772 14 4 13.5523 4 13V3ZM11.7929 5H9.5C9.22386 5 9 4.77614 9 4.5V2.20711L11.7929 5Z"
+                        fill="currentColor"
+                      ></path>
+                    </svg>
+                  </span>
+                </div>
+              </Tooltip>
+              <Tooltip
+                content="我的列表"
+                relationship="label"
+                positioning="after"
+              >
+                <div class="bar-li">
+                  <span class="bar-li-svg">
+                    <svg
+                      height="20"
+                      width="20"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 16 16"
+                    >
+                      <path
+                        d="M13.5858 12H5V14H11.5858L13.5858 12ZM5 15H4H3C1.89543 15 1 14.1046 1 13V12V11V9V8V6V5V4L4 1H13C14.1046 1 15 1.89543 15 3V5V6V8V9V11V12L12 15H5ZM14 11V9H5V11H14ZM14 8V6H5V8H14ZM14 5V3C14 2.44772 13.5523 2 13 2H4.41421L2 4.41421V5H4H5H14ZM2 6V8H4V6H2ZM2 9V11H4V9H2ZM2 12V13C2 13.5523 2.44772 14 3 14H4V12H2Z"
+                        fill="currentColor"
+                      ></path>
+                    </svg>
+                  </span>
+                </div>
+              </Tooltip>
+              <Tooltip content="创建" relationship="label" positioning="after">
+                <div class="bar-li">
+                  <span class="bar-li-svg">
+                    <svg
+                      height="20"
+                      width="20"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 16 16"
+                    >
+                      <path
+                        d="M8 5C8.27614 5 8.5 5.22386 8.5 5.5V7.5H10.5C10.7761 7.5 11 7.72386 11 8C11 8.27614 10.7761 8.5 10.5 8.5H8.5V10.5C8.5 10.7761 8.27614 11 8 11C7.72386 11 7.5 10.7761 7.5 10.5V8.5H5.5C5.22386 8.5 5 8.27614 5 8C5 7.72386 5.22386 7.5 5.5 7.5H7.5V5.5C7.5 5.22386 7.72386 5 8 5ZM2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8ZM8 3C5.23858 3 3 5.23858 3 8C3 10.7614 5.23858 13 8 13C10.7614 13 13 10.7614 13 8C13 5.23858 10.7614 3 8 3Z"
+                        fill="currentColor"
+                      ></path>
+                    </svg>
+                  </span>
+                </div>
+              </Tooltip>
             </div>
-        )
+          </div>
+        );
     }
 }

src/component/hedaer/index.jsx

@@ -5,7 +5,6 @@ import {
   mergeClasses,
   Button,
   Popover,
-  Input,
   PopoverSurface,
   PopoverTrigger,
 } from "@fluentui/react-components";
@@ -35,76 +34,85 @@ import dc1 from "../../img/调查1.svg";
 import dc2 from "../../img/调查2.svg";
 import cjgd from "../../img/创建更多.svg";
 
+import { LocalLanguage20Regular } from '@fluentui/react-icons'
+import {
+    Menu,
+    MenuTrigger,
+    MenuList,
+    MenuItem,
+    MenuPopover,
+} from "@fluentui/react-components";
+import { useTranslation } from 'react-i18next'
 
 const useExampleStyles = makeStyles({
-  popoverSurface: {
-    width: "512px",
-    height: "489px",
-    display: "flex",
-    flexDirection: "column",
-  },
+    popoverSurface: {
+        width: "512px",
+        height: "489px",
+        display: "flex",
+        flexDirection: "column",
+    },
 
-  target: {
-    height: "48px",
-    width: "48px",
-    display: "flex",
-    justifyContent: "",
-  },
+    target: {
+        height: "48px",
+        width: "48px",
+        display: "flex",
+        justifyContent: "",
+    },
 });
 
 const useGridExampleStyles = makeStyles({
-  belowStart: {
-    flexDirection: "row-reverse",
-    gridRowStart: "5",
-    gridColumnStart: "2",
-    "& div:nth-child(2)": {
-      transform: "rotate(180deg)",
-    },
-  }
+    belowStart: {
+        flexDirection: "row-reverse",
+        gridRowStart: "5",
+        gridColumnStart: "2",
+        "& div:nth-child(2)": {
+            transform: "rotate(180deg)",
+        },
+    }
 });
 
 
 const PositionedComponent = (props) => {
-  const { positioning, targetContent = "Click me", targetClassName } = props;
-  const styles = useExampleStyles();
-  return (
-    <Popover positioning={positioning}>
-      <PopoverTrigger disableButtonEnhancement>
-        <Button
-          appearance="primary"
-          className={mergeClasses(styles.target, targetClassName)}
-          style={{ minWidth: "48px", height: "48px" }}
-        >
-          <div class="function-dropdown" title="应用启动器">
-            <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>
-        </Button>
-      </PopoverTrigger>
+    const { positioning, targetContent = "Click me", targetClassName } = props;
+    const styles = useExampleStyles();
+    return (
+        <Popover positioning={positioning}>
+            <PopoverTrigger disableButtonEnhancement>
+                <Button
+                    appearance="primary"
+                    className={mergeClasses(styles.target, targetClassName)}
+                    style={{ minWidth: "48px", height: "48px" }}
+                >
+                    <div class="function-dropdown" title="应用启动器">
+                        <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>
+                </Button>
+            </PopoverTrigger>
 
       <PopoverSurface className={styles.popoverSurface}>
         <div
@@ -113,8 +121,8 @@ const PositionedComponent = (props) => {
         >
           <div class="zl-365-logo-search">
           <span class="header-loge-input">
-                <Input  placeholder="在此网站中搜索" contentBefore={<SearchRegular />}/>
-      
+            <span class="header-logo-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-logo-input" placeholder="查找Microsoft 365应用" />
             </span>
           </div>
         </div>
@@ -540,19 +548,19 @@ const PositionedComponent = (props) => {
     </Popover>
   );
 };
-const IconHtml = ()=>{
+const IconHtml = () => {
     const styles = useGridExampleStyles();
     return (
-      <PositionedComponent
-        positioning=""
-        targetClassName={styles.belowStart}
-        targetContent=""
-      />
+        <PositionedComponent
+            positioning=""
+            targetClassName={styles.belowStart}
+            targetContent=""
+        />
     );
 }
 
-export default class Header extends Component {
-  render() {
+const Header = () => {
+    const { t, i18n } = useTranslation();
     return (
       <div class="zl-365-header">
         <div class="zl-365-header-function">
@@ -560,7 +568,29 @@ export default class Header extends Component {
         </div>
         <div class="zl-365-header-name">ZlSoftSharePoint</div>
         <div class="zl-365-header-search">
-          <Input  placeholder="在此网站中搜索" contentBefore={<SearchRegular />}/>
+          <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="在SharePoint中搜索"
+          />
         </div>
         <div class="zl-365-header-tools">
           <div class="header-tools-set">
@@ -612,5 +642,6 @@ export default class Header extends Component {
         </div>
       </div>
     );
-  }
 }
+
+export default Header

src/component/tree/index.tsx

@@ -0,0 +1,99 @@
+import * as React from "react";
+import {
+  FlatTree,
+  TreeItem,
+  // flattenTree_unstable,
+  // TreeItemProps,
+  TreeItemPersonaLayout,
+  TreeItemLayout,
+  useHeadlessFlatTree_unstable,
+  HeadlessFlatTreeItemProps,
+} from "@fluentui/react-components";
+import {
+  Button,
+  Menu,
+  MenuItem,
+  MenuList,
+  MenuPopover,
+  MenuTrigger,
+  useRestoreFocusTarget,
+} from "@fluentui/react-components";
+import { Edit20Regular, MoreHorizontal20Regular, CardUiFilled } from "@fluentui/react-icons";
+
+type FlatItem = HeadlessFlatTreeItemProps & { content: string };
+
+const flatTreeItems: FlatItem[] = [
+  { value: "1", content: "中联新技术工作室" },
+  { value: "1-1", parentValue: "1", content: "陈丹" },
+  { value: "1-2", parentValue: "1", content: "蔡青松" },
+  { value: "1-3", parentValue: "1", content: "唐渝林" },
+  { value: "1-4", parentValue: "1", content: "吴瑞强" },
+  { value: "1-5", parentValue: "1", content: "王华川" },
+  { value: "1-6", parentValue: "1", content: "涂建华" },
+  { value: "1-7", parentValue: "1", content: "杨东明" },
+  { value: "2", content: "中联敏捷" },
+  { value: "2-1", parentValue: "2", content: "范俊" },
+  { value: "2-2", parentValue: "2", content: "杨斌" },
+  { value: "2-2", parentValue: "2", content: "陈亮" },
+];
+
+const ActionsExample = () => (
+  <>
+    <Button aria-label="Edit" appearance="subtle" icon={<Edit20Regular />} />
+    <Menu>
+      <MenuTrigger disableButtonEnhancement>
+        <Button
+          aria-label="More options"
+          appearance="subtle"
+          icon={<MoreHorizontal20Regular />}
+        />
+      </MenuTrigger>
+
+      <MenuPopover>
+        <MenuList>
+          <MenuItem>新增</MenuItem>
+          <MenuItem>修改</MenuItem>
+          <MenuItem>删除</MenuItem>
+        </MenuList>
+      </MenuPopover>
+    </Menu>
+  </>
+);
+
+const UseHeadlessFlatTree = () => {
+  const flatTree = useHeadlessFlatTree_unstable(flatTreeItems);
+  const focusTargetAttribute = useRestoreFocusTarget();
+
+  return (
+    <FlatTree {...flatTree.getTreeProps()} aria-label="Flat Tree">
+      {Array.from(flatTree.items(), (flatTreeItem) => {
+        const { content, ...treeItemProps } = flatTreeItem.getTreeItemProps();
+        return (
+          <Menu key={flatTreeItem.value} positioning="below-end" openOnContext>
+            <MenuTrigger disableButtonEnhancement>
+              <TreeItem
+                aria-description="has actions"
+                {...focusTargetAttribute}
+                {...treeItemProps}
+              >
+                <TreeItemPersonaLayout
+                  actions={<ActionsExample />}>
+                  {content}
+                </TreeItemPersonaLayout>
+              </TreeItem>
+            </MenuTrigger>
+            <MenuPopover>
+              <MenuList>
+                <MenuItem>新增</MenuItem>
+                <MenuItem>修改</MenuItem>
+                <MenuItem>删除</MenuItem>
+              </MenuList>
+            </MenuPopover>
+          </Menu>
+        );
+      })}
+    </FlatTree>
+  );
+};
+
+export default UseHeadlessFlatTree

src/pages/treepage/index.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import {
+  Tree,
+  TreeItem,
+  TreeItemLayout,
+  TreeItemPersonaLayout,
+} from "@fluentui/react-components";
+import { Avatar } from "@fluentui/react-components";
+
+const TreePage = () => {
+  return (
+    <>
+      <Tree aria-label="Default Layout">
+        <TreeItem itemType="branch">
+          <TreeItemLayout>Tree using TreeItemLayout</TreeItemLayout>
+          <Tree>
+            <TreeItem itemType="leaf">
+              <TreeItemLayout>level 2, item 1</TreeItemLayout>
+            </TreeItem>
+            <TreeItem itemType="leaf">
+              <TreeItemLayout>level 2, item 2</TreeItemLayout>
+            </TreeItem>
+            <TreeItem itemType="leaf">
+              <TreeItemLayout>level 2, item 3</TreeItemLayout>
+            </TreeItem>
+          </Tree>
+        </TreeItem>
+      </Tree>
+
+      <Tree aria-label="Persona Layout">
+        <TreeItem itemType="branch">
+          <TreeItemPersonaLayout media={<Avatar image={{ alt: "avatar" }} />}>
+            Tree using TreeItemPersonaLayout
+          </TreeItemPersonaLayout>
+          <Tree>
+            <TreeItem itemType="leaf">
+              <TreeItemPersonaLayout
+                media={<Avatar image={{ alt: "avatar" }} />}
+                description="with description"
+              >
+                level 2, item 1
+              </TreeItemPersonaLayout>
+            </TreeItem>
+            <TreeItem itemType="leaf">
+              <TreeItemPersonaLayout
+                media={<Avatar image={{ alt: "avatar" }} shape="square" />}
+                description="square shape media"
+              >
+                level 2, item 2
+              </TreeItemPersonaLayout>
+            </TreeItem>
+            <TreeItem itemType="leaf">
+              <TreeItemPersonaLayout description="without media">
+                level 2, item 3
+              </TreeItemPersonaLayout>
+            </TreeItem>
+          </Tree>
+        </TreeItem>
+      </Tree>
+    </>
+  );
+};
+
+export default TreePage;

src/router/index.js

@@ -3,6 +3,7 @@ import { App } from "../App";
 import Document from '../pages/document';
 import Home from '../pages/home';
 import ListNew from '../pages/listnew';
+import TreePage from "../component/tree";
 
 const router = createBrowserRouter([
     {
@@ -20,6 +21,10 @@ const router = createBrowserRouter([
             {
                 path: '/listnew',
                 element: <ListNew/>
+            },
+            {
+                path: '/tree',
+                element: <TreePage />
             }
         ]
     }