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/hedaer/index.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import eventBus from '../../bus';
 import "./index.css";
 import {
     makeStyles,
@@ -80,69 +81,69 @@ const ThemeData = [
     {
         "name": "青色",
         "icon": 青色图标,
-        "config":青色
+        "config": 青色
     },
     {
         "name": "蓝色",
         "icon": 蓝色图标,
-        "config":蓝色
+        "config": 蓝色
     },
     {
         "name": "橙色",
         "icon": 橙色图标,
-        "config":橙色
+        "config": 橙色
     },
     {
         "name": "红色",
         "icon": 红色图标,
-        "config":红色
+        "config": 红色
     },
     {
         "name": "紫色",
         "icon": 紫色图标,
-        "config":紫色
+        "config": 紫色
     },
     {
         "name": "绿色",
         "icon": 绿色图标,
-        "config":绿色
+        "config": 绿色
     },
     {
         "name": "灰色",
         "icon": 灰色图标,
-        "config":灰色
+        "config": 灰色
     },
     {
         "name": "长春花色",
         "icon": 长春花色图标,
-        "config":长春花色
+        "config": 长春花色
     },
     {
         "name": "黑色",
         "icon": 黑色图标,
-        "config":黑色
+        "config": 黑色
     },
     {
         "name": "天蓝色",
         "icon": 天蓝色图标,
-        "config":天蓝色
+        "config": 天蓝色
     },
     {
         "name": "钴蓝色",
         "icon": 钴蓝色图标,
-        "config":钴蓝色
+        "config": 钴蓝色
     },
     {
         "name": "深黄色",
         "icon": 深黄色图标,
-        "config":深黄色
+        "config": 深黄色
     },
     {
         "name": "深蓝色",
         "icon": 深蓝色图标,
-        "config":深蓝色
+        "config": 深蓝色
     }
-    
+
 ]
 const useExampleStyles = makeStyles({
     popoverSurface: {
@@ -187,12 +188,12 @@ const appDatas = [
     { title: "更多", img: gd },
 ]
 
-const App = (data)=>{
+const App = (data) => {
     return (
         <div className="zl-365-article">
             <button
                 title={data.title}
-                aria-label={data.title+" 将在新选项卡中打开"}
+                aria-label={data.title + " 将在新选项卡中打开"}
             >
                 <div style={{ width: "100%" }}>
                     <img
@@ -215,19 +216,19 @@ const App = (data)=>{
 
 
 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"}
+    { 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">
+        <div className="intentTileWrapper">
             <button
                 className="intentTile-button"
-                aria-label={data.title+" 将在新选项卡中打开"}
+                aria-label={data.title + " 将在新选项卡中打开"}
             >
                 <div className="intentTile-icon-content">
                     <div className="intentTile-icon1">
@@ -257,7 +258,7 @@ const Doc = (data) => {
                                 </div>
                             )
                     }
-                    
+
                 </div>
                 <div className="intentTile-text">
                     <span>{data.title}</span>
@@ -320,13 +321,13 @@ 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 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 style={{ width: "480px", height: "145px", flex: "0 0 100%", display: "flex", flexWrap: "wrap" }}>
                         {docList.map((data) => <Doc key={data.title} {...data} />)}
                     </div>
                 </div>
@@ -347,6 +348,7 @@ const IconHtml = () => {
 
 
 const ChangeTheme = (name) => {
+    eventBus.emit('themechange', ThemeData.find(m => m.name === name).config);
 }
 
 
@@ -379,29 +381,36 @@ const Header = () => {
                         </MenuList>
                     </MenuPopover>
                 </Menu>
-                <Menu >
-                    <MenuTrigger disableButtonEnhancement>
+                <Popover >
+                    <PopoverTrigger disableButtonEnhancement>
                         <Settings20Regular style={{ cursor: "pointer", margin: "0 8px" }} />
-                    </MenuTrigger>
-                    <MenuPopover>
-                        <MenuList>
-                            {
-                                Array.from(ThemeData, (item) => {
-                                    return (<MenuItem onClick={() => {
-                                        ChangeTheme(item.name)
-                                    }}>
-                                        <div class="theme-modal-item">
-                                            <div class="theme-modal-item-sp">
-                                                <img src={item.icon} alt="" srcset="" />
-                                            </div>
-                                            <div class="theme-modal-item-text">{item.name}</div>
+                    </PopoverTrigger>
+                    <PopoverSurface>
+                        <div style={{ width: "480px", height: "409px" }}>
+                            <div style={{ flex: "0 0 100%", height: "264px", display: "flex", flexWrap: "wrap", marginTop: "8px" }}>
+                                {
+                                    Array.from(ThemeData, (item) => {
+                                        return (<div class="zl-365-article" onClick={() => {
+                                            ChangeTheme(item.name)
+                                        }}>
+                                            <button title={item.name}>
+                                                <div style={{ width: "100%" }}>
+                                                    <img src={item.icon} alt={item.name} style={{ width: "80px", height: "80px", "display": "inline-block" }} />
+                                                </div>
+                                                <div style={{ width: "100%" }}>
+                                                    <span>
+                                                        {item.name}
+                                                    </span>
+                                                </div>
+                                            </button>
                                         </div>
-                                    </MenuItem>)
-                                })
-                            }
-                        </MenuList>
-                    </MenuPopover>
-                </Menu>
+                                        )
+                                    })
+                                }
+                            </div>
+                        </div>
+                    </PopoverSurface>
+                </Popover>
                 <Menu >
                     <MenuTrigger disableButtonEnhancement>
                         <WindowAdPerson20Filled style={{ cursor: "pointer", margin: "0 30px 0 8px" }} />

src/pages/home/index.tsx

@@ -24,7 +24,7 @@ function MyNavlink() {
           <Tree></Tree>
         </div>
         <div className="layout-col-8 list-height">
-          <List></List>
+          <List edit="true"></List>
         </div>
       </div>
       <div className="layout-row">