提交：显示提示

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>
+        );
     }
 }