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

src/App.tsx

@@ -1,14 +1,27 @@
-import React, { Component, createContext, useContext, useState } from "react";
+import React, { Component, createContext, useContext, useEffect, useState } from "react";
 import "./App.css";
 // import List from "./component/List";
 import Header from './component/hedaer';
 import Bar from './component/bar';
 import Content from './component/content';
 import { FluentProvider, webLightTheme } from "@fluentui/react-components";
+import eventBus from './bus';
 
 const App = () => {
+  const [themeInfo , setInfo] = useState(webLightTheme)
+  useEffect(()=>{
+    const handleCustomEvent = (data:any) => {
+      setInfo(data);
+    };
+
+    eventBus.on('themechange', handleCustomEvent);
+
+    return () => {
+      eventBus.off('themechange', handleCustomEvent);
+    };
+  })
   return (
-      <FluentProvider theme={webLightTheme}>
+      <FluentProvider theme={themeInfo}>
         <div className="zl-365-container">
           <Header></Header>
           <Bar></Bar>

src/bus/index.js

@@ -0,0 +1,27 @@
+class EventBus {
+    constructor() {
+        this.handlers = {};
+    }
+
+    on(eventType, handler) {
+        if (!this.handlers[eventType]) {
+            this.handlers[eventType] = [];
+        }
+        this.handlers[eventType].push(handler);
+    }
+
+    off(eventType, handler) {
+        if (this.handlers[eventType]) {
+            this.handlers[eventType] = this.handlers[eventType].filter(h => h !== handler);
+        }
+    }
+
+    emit(eventType, data) {
+        const handlers = this.handlers[eventType];
+        if (handlers) {
+            handlers.forEach(handler => handler(data));
+        }
+    }
+}
+
+export default new EventBus();

src/component/form/index.tsx

@@ -113,8 +113,8 @@ export const ContentBeforeAfter = () => {
         </Select>
       </div>
       <div>
-        <Field label="Select a date">
-          <DatePicker placeholder="Select a date..." />
+        <Field label="出生日期">
+          <DatePicker placeholder="请选择日期..." />
         </Field>
       </div>
       <div>

src/component/hedaer/index.jsx

@@ -171,6 +171,102 @@ const useGridExampleStyles = makeStyles({
     }
 });
 
+const appDatas = [
+    { title: "Microsoft 365", img: m365 },
+    { title: "OutLook", img: outlook },
+    { title: "OneDrice", img: oneDrice },
+    { title: "Word", img: word },
+    { title: "Excel", img: excel },
+    { title: "PowerPoint", img: ppt },
+    { title: "OneNote", img: oneNote },
+    { title: "SharePoint", img: sps },
+    { title: "Teams", img: teams },
+    { title: "Visio", img: vi },
+    { title: "Engaga", img: engaga },
+    { title: "PA", img: pa },
+    { title: "更多", img: gd },
+]
+
+const App = (data)=>{
+    return (
+        <div className="zl-365-article">
+            <button
+                title={data.title}
+                aria-label={data.title+" 将在新选项卡中打开"}
+            >
+                <div style={{ width: "100%" }}>
+                    <img
+                        src={data.img}
+                        style={{
+                            width: "32px",
+                            height: "40px",
+                            display: "inline-block",
+                        }}
+                        alt={data.title}
+                    />
+                </div>
+                <div style={{ width: "100%" }}>
+                    <span>{data.title}</span>
+                </div>
+            </button>
+        </div>
+    )
+}
+
+
+const docList = [
+    { title: "文档", img1: wd1,img2:wd2,width: "32px", height: "48px" },
+    { title:"工作簿",img1:gzp1,img2:gzp2,width: "55.8px", height: "44px"},
+    { title:"演示文稿",img1:yswd1,img2:yswd2,width: "66.6px", height: "44px"},
+    { title:"调查",img1:dc1,img2:dc2,width: "39px", height: "44px"},
+    { title:"创建更多",img1:cjgd,img2:null,width: "32px", height: "32px"}
+]
+
+const Doc = (data) => {
+    return (
+         <div className="intentTileWrapper">
+            <button
+                className="intentTile-button"
+                aria-label={data.title+" 将在新选项卡中打开"}
+            >
+                <div className="intentTile-icon-content">
+                    <div className="intentTile-icon1">
+                        <img
+                            src={data.img1}
+                            style={{
+                                width: "32px",
+                                height: "44px",
+                                display: "inline-block",
+                            }}
+                            alt={data.title}
+                        />
+                    </div>
+                    {
+                        data.img2 == null
+                            ? null
+                            :
+                            (
+                                <div className="intentTile-icon2">
+                                    <img
+                                        src={data.img2}
+                                        style={{
+                                            display: "inline-block",
+                                        }}
+                                        alt={data.title}
+                                    />
+                                </div>
+                            )
+                    }
+                    
+                </div>
+                <div className="intentTile-text">
+                    <span>{data.title}</span>
+                </div>
+            </button>
+        </div>
+    )
+}
+
 
 const PositionedComponent = (props) => {
     const { positioning, targetContent = "Click me", targetClassName } = props;
@@ -224,423 +320,14 @@ const PositionedComponent = (props) => {
                     </div>
                 </div>
                 <div style={{ width: "480px", height: "409px" }}>
-                    <div
-                        style={{
-                            flex: "0 0 100%",
-                            height: "264px",
-                            display: "flex",
-                            flexWrap: "wrap",
-                            marginTop: "8px",
-                        }}
-                    >
-                        <div className="zl-365-article">
-                            <button
-                                title="Microsoft 365"
-                                aria-label="Microsoft 365 将在新选项卡中打开"
-                            >
-                                <div style={{ width: "100%" }}>
-                                    <img
-                                        src={m365}
-                                        style={{
-                                            width: "32px",
-                                            height: "40px",
-                                            display: "inline-block",
-                                        }}
-                                        alt="Microsoft 365"
-                                    />
-                                </div>
-                                <div style={{ width: "100%" }}>
-                                    <span>Microsoft 365</span>
-                                </div>
-                            </button>
-                        </div>
-                        <div className="zl-365-article">
-                            <button title="OutLook" aria-label="OutLook 将在新选项卡中打开">
-                                <div style={{ width: "100%" }}>
-                                    <img
-                                        src={outlook}
-                                        style={{
-                                            width: "32px",
-                                            height: "40px",
-                                            display: "inline-block",
-                                        }}
-                                        alt="Outlook"
-                                    />
-                                </div>
-                                <div style={{ width: "100%" }}>
-                                    <span>Outlook</span>
-                                </div>
-                            </button>
-                        </div>
-                        <div className="zl-365-article">
-                            <button title="OneDrice" aria-label="OneDrice 将在新选项卡中打开">
-                                <div style={{ width: "100%" }}>
-                                    <img
-                                        src={oneDrice}
-                                        style={{
-                                            width: "32px",
-                                            height: "40px",
-                                            display: "inline-block",
-                                        }}
-                                        alt="OneDrice"
-                                    />
-                                </div>
-                                <div style={{ width: "100%" }}>
-                                    <span>OneDrice</span>
-                                </div>
-                            </button>
-                        </div>
-                        <div className="zl-365-article">
-                            <button title="Word" aria-label="Word 将在新选项卡中打开">
-                                <div style={{ width: "100%" }}>
-                                    <img
-                                        src={word}
-                                        style={{
-                                            width: "32px",
-                                            height: "40px",
-                                            display: "inline-block",
-                                        }}
-                                        alt="Word"
-                                    />
-                                </div>
-                                <div style={{ width: "100%" }}>
-                                    <span>Word</span>
-                                </div>
-                            </button>
-                        </div>
-                        <div className="zl-365-article">
-                            <button title="Excel" aria-label="Excel 将在新选项卡中打开">
-                                <div style={{ width: "100%" }}>
-                                    <img
-                                        src={excel}
-                                        style={{
-                                            width: "32px",
-                                            height: "40px",
-                                            display: "inline-block",
-                                        }}
-                                        alt="Excel"
-                                    />
-                                </div>
-                                <div style={{ width: "100%" }}>
-                                    <span>Excel</span>
-                                </div>
-                            </button>
-                        </div>
-                        <div className="zl-365-article">
-                            <button
-                                title="PowerPoint"
-                                aria-label="PowerPoint 将在新选项卡中打开"
-                            >
-                                <div style={{ width: "100%" }}>
-                                    <img
-                                        src={ppt}
-                                        style={{
-                                            width: "32px",
-                                            height: "40px",
-                                            display: "inline-block",
-                                        }}
-                                        alt="PowerPoint"
-                                    />
-                                </div>
-                                <div style={{ width: "100%" }}>
-                                    <span>PowerPoint</span>
-                                </div>
-                            </button>
-                        </div>
-                        <div className="zl-365-article">
-                            <button title="OneNote" aria-label="OneNote 将在新选项卡中打开">
-                                <div style={{ width: "100%" }}>
-                                    <img
-                                        src={oneNote}
-                                        style={{
-                                            width: "32px",
-                                            height: "40px",
-                                            display: "inline-block",
-                                        }}
-                                        alt="OneNote"
-                                    />
-                                </div>
-                                <div style={{ width: "100%" }}>
-                                    <span>OneNote</span>
-                                </div>
-                            </button>
-                        </div>
-                        <div className="zl-365-article">
-                            <button
-                                title="SharePoint"
-                                aria-label="SharePoint 将在新选项卡中打开"
-                            >
-                                <div style={{ width: "100%" }}>
-                                    <img
-                                        src={sps}
-                                        style={{
-                                            width: "32px",
-                                            height: "40px",
-                                            display: "inline-block",
-                                        }}
-                                        alt="SharePoint"
-                                    />
-                                </div>
-                                <div style={{ width: "100%" }}>
-                                    <span>SharePoint</span>
-                                </div>
-                            </button>
-                        </div>
-                        <div className="zl-365-article">
-                            <button title="SharePoint" aria-label="Teams 将在新选项卡中打开">
-                                <div style={{ width: "100%" }}>
-                                    <img
-                                        src={teams}
-                                        style={{
-                                            width: "32px",
-                                            height: "40px",
-                                            display: "inline-block",
-                                        }}
-                                        alt="Teams"
-                                    />
-                                </div>
-                                <div style={{ width: "100%" }}>
-                                    <span>Teams</span>
-                                </div>
-                            </button>
-                        </div>
-                        <div className="zl-365-article">
-                            <button title="Viva" aria-label="Viva 将在新选项卡中打开">
-                                <div style={{ width: "100%" }}>
-                                    <img
-                                        src={vi}
-                                        style={{
-                                            width: "32px",
-                                            height: "40px",
-                                            display: "inline-block",
-                                        }}
-                                        alt="Viva"
-                                    />
-                                </div>
-                                <div style={{ width: "100%" }}>
-                                    <span>Viva</span>
-                                </div>
-                            </button>
-                        </div>
-                        <div className="zl-365-article">
-                            <button title="Engaga" aria-label="Engaga 将在新选项卡中打开">
-                                <div style={{ width: "100%" }}>
-                                    <img
-                                        src={engaga}
-                                        style={{
-                                            width: "32px",
-                                            height: "40px",
-                                            display: "inline-block",
-                                        }}
-                                        alt="Engaga"
-                                    />
-                                </div>
-                                <div style={{ width: "100%" }}>
-                                    <span>Viva</span>
-                                </div>
-                            </button>
-                        </div>
-                        <div className="zl-365-article">
-                            <button
-                                title="PowerAutomate"
-                                aria-label="PowerAutomate 将在新选项卡中打开"
-                            >
-                                <div style={{ width: "100%" }}>
-                                    <img
-                                        src={pa}
-                                        style={{
-                                            width: "32px",
-                                            height: "40px",
-                                            display: "inline-block",
-                                        }}
-                                        alt="PowerAutomate"
-                                    />
-                                </div>
-                                <div style={{ width: "100%", display: "grid" }}>
-                                    <span>Power</span>
-                                    <span>Automate</span>
-                                </div>
-                            </button>
-                        </div>
-                        <div className="zl-365-article">
-                            <button title="更多应用" aria-label="更多应用 将在新选项卡中打开">
-                                <div style={{ width: "100%" }}>
-                                    <img
-                                        src={gd}
-                                        style={{
-                                            width: "32px",
-                                            height: "40px",
-                                            display: "inline-block",
-                                        }}
-                                        alt="更多应用"
-                                    />
-                                </div>
-                                <div style={{ width: "100%" }}>
-                                    <span>更多应用</span>
-                                </div>
-                            </button>
-                        </div>
+                    <div style={{flex: "0 0 100%",height: "264px",display: "flex",flexWrap: "wrap",marginTop: "8px"}}>
+                        {appDatas.map((data) => <App key={data.title} {...data} />)}
                     </div>
                     <div className="custom-div">
                         <hr className="custom-hr" />
                     </div>
-                    <div style={{
-                        width: "480px", height: "145px",
-                        flex: "0 0 100%",
-                        display: "flex",
-                        flexWrap: "wrap"
-                    }}>
-                        <div className="intentTileWrapper">
-                            <button
-                                className="intentTile-button"
-                                aria-label="文档 将在新选项卡中打开"
-                            >
-                                <div className="intentTile-icon-content">
-                                    <div className="intentTile-icon1">
-                                        <img
-                                            src={wd1}
-                                            style={{
-                                                width: "32px",
-                                                height: "44px",
-                                                display: "inline-block",
-                                            }}
-                                            alt="文档"
-                                        />
-                                    </div>
-                                    <div className="intentTile-icon2">
-                                        <img
-                                            src={wd2}
-                                            style={{
-                                                display: "inline-block",
-                                            }}
-                                            alt="文档"
-                                        />
-                                    </div>
-                                </div>
-                                <div className="intentTile-text">
-                                    <span>文档</span>
-                                </div>
-                            </button>
-                        </div>
-                        <div className="intentTileWrapper">
-                            <button
-                                className="intentTile-button"
-                                aria-label="工作簿 将在新选项卡中打开"
-                            >
-                                <div className="intentTile-icon-content">
-                                    <div className="intentTile-icon1">
-                                        <img
-                                            src={gzp1}
-                                            style={{
-                                                width: "55.8px",
-                                                height: "44px",
-                                                display: "inline-block",
-                                            }}
-                                            alt="工作簿"
-                                        />
-                                    </div>
-                                    <div className="intentTile-icon2">
-                                        <img
-                                            src={gzp2}
-                                            style={{
-                                                display: "inline-block",
-                                            }}
-                                            alt="工作簿"
-                                        />
-                                    </div>
-                                </div>
-                                <div className="intentTile-text">
-                                    <span>工作簿</span>
-                                </div>
-                            </button>
-                        </div>
-                        <div className="intentTileWrapper">
-                            <button
-                                className="intentTile-button"
-                                aria-label="演示文稿 将在新选项卡中打开"
-                            >
-                                <div className="intentTile-icon-content">
-                                    <div className="intentTile-icon1">
-                                        <img
-                                            src={yswd1}
-                                            style={{
-                                                width: "66.6px",
-                                                height: "44px",
-                                                display: "inline-block",
-                                            }}
-                                            alt="演示文稿"
-                                        />
-                                    </div>
-                                    <div className="intentTile-icon2">
-                                        <img
-                                            src={yswd2}
-                                            style={{
-                                                display: "inline-block",
-                                            }}
-                                            alt="演示文稿"
-                                        />
-                                    </div>
-                                </div>
-                                <div className="intentTile-text">
-                                    <span>演示文稿</span>
-                                </div>
-                            </button>
-                        </div>
-                        <div className="intentTileWrapper">
-                            <button
-                                className="intentTile-button"
-                                aria-label="调查 将在新选项卡中打开"
-                            >
-                                <div className="intentTile-icon-content">
-                                    <div className="intentTile-icon1">
-                                        <img
-                                            src={dc1}
-                                            style={{
-                                                width: "39px",
-                                                height: "44px",
-                                                display: "inline-block",
-                                            }}
-                                            alt="调查"
-                                        />
-                                    </div>
-                                    <div className="intentTile-icon2">
-                                        <img
-                                            src={dc2}
-                                            style={{
-                                                display: "inline-block",
-                                            }}
-                                            alt="调查"
-                                        />
-                                    </div>
-                                </div>
-                                <div className="intentTile-text">
-                                    <span>调查</span>
-                                </div>
-                            </button>
-                        </div>
-                        <div className="intentTileWrapper">
-                            <button
-                                className="intentTile-button"
-                                aria-label="创建更多 将在新选项卡中打开"
-                            >
-                                <div className="intentTile-icon-content">
-                                    <div className="intentTile-icon1" style={{ width: "88px", height: "76px", display: "contents" }}>
-                                        <img
-                                            src={cjgd}
-                                            style={{
-                                                width: "32px",
-                                                height: "32px",
-                                                display: "inline-block",
-                                            }}
-                                            alt="创建更多"
-                                        />
-                                    </div>
-                                </div>
-                                <div className="intentTile-text">
-                                    <span>创建更多</span>
-                                </div>
-                            </button>
-                        </div>
+                    <div style={{width: "480px", height: "145px",flex: "0 0 100%",display: "flex",flexWrap: "wrap"}}>
+                        {docList.map((data) => <Doc key={data.title} {...data} />)}
                     </div>
                 </div>
             </PopoverSurface>

src/pages/home/index.css

@@ -18,4 +18,25 @@ label.layout-title {
     font-size: 18px;
     font-weight: 600;
     padding: 8px;
+    position: relative;
+    background-color: var(--colorBrandBackground2Hover);
+}
+label.layout-col-4.layout-title {
+    flex: 0 0 calc(33.33333% - 8px);
+    max-width: calc(33.33333% - 8px);
+    margin-right: 8px;
+}
+.layout-col-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+
+label.layout-title:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-color: var(--colorBrandBackground);
+    width: 4px;
+    height: 100%;
 }