增加了在header的可用空间

src/store/index.tsx

@@ -3,13 +3,15 @@ import user from './module/user';
 import auth from './module/auth';
 import pageKeepAlive from './module/pageKeepAlive';
 import config from "./module/config"
+import temp from './module/temp';
 // define the store
 
 const store = {
   user,
   auth,
   pageKeepAlive,
-  config
+  config,
+  temp
 }
 
 export default store
\ No newline at end of file

src/store/module/temp.ts

+// 临时状态 达到在远距离组件传值的效果
+import create from 'zustand'
+let temp: any = (set: Function, get: Function) => ({
+    headerDom:null,
+    setHeaderDom: (Dom:any) => set(() => ({ headerDom: Dom})),
+ });
+export default create(temp);
\ No newline at end of file

src/views/layout/header.tsx

-import { Avatar, Box, HStack, MenuButton, Text, Menu, MenuList, MenuItem, Button, Tooltip } from "@chakra-ui/react"
+import { Avatar, Box, HStack, MenuButton, Text, Menu, MenuList, MenuItem, Button, Tooltip, useToast } from "@chakra-ui/react"
 import { useState } from "react"
 import { FaAngleDown } from "react-icons/fa"
 import { useLocation, useNavigate } from "react-router-dom"
 import store from '../../store'
+function HeaderDom() {
+    return store.temp().headerDom;
+}
 export default function Header(props: any) {
     let pageName = useState("吸鼠霸王");
     const location = useLocation();
@@ -17,10 +20,11 @@ export default function Header(props: any) {
     return (
         <Box>
             <Box flexShrink={0} h={"80px"} display="flex" pl={8} pr={16} alignItems="center" justifyContent="space-between">
-                <HStack onClick={setShowSilder}>
+                <HStack display="flex">
                     <Tooltip label='切换侧边栏状态'>
-                        <Text as={"b"} fontSize={32}>吸鼠霸王</Text>
+                        <Text onClick={setShowSilder} cursor={"pointer"} as={"b"} flexShrink={0} mr={8} fontSize={32}>吸鼠霸王</Text>
                     </Tooltip>
+                    <HeaderDom />
                 </HStack>
                 <HStack>
                     <Box mr={12}>
@@ -45,16 +49,16 @@ export default function Header(props: any) {
                                     ))
                                 }
                                 <Box>
-                                            <Text fontSize={12} color={"gray.400"} px={2}>其他</Text>
-                                            {
-                                                getURoute.order_list.map((citem: any, cindex: any) => (
-                                                    <MenuItem key={cindex} w={240} display="flex" justifyContent={"space-between"} onClick={() => iNav(citem.path)} >
-                                                        <Text as="b" >{citem.name}</Text>
-                                                        {/* <Text color={"gray.300"}>{item.path}</Text> */}
-                                                    </MenuItem>
-                                                ))
-                                            }
-                                        </Box>
+                                    <Text fontSize={12} color={"gray.400"} px={2}>其他</Text>
+                                    {
+                                        getURoute.order_list.map((citem: any, cindex: any) => (
+                                            <MenuItem key={cindex} w={240} display="flex" justifyContent={"space-between"} onClick={() => iNav(citem.path)} >
+                                                <Text as="b" >{citem.name}</Text>
+                                                {/* <Text color={"gray.300"}>{item.path}</Text> */}
+                                            </MenuItem>
+                                        ))
+                                    }
+                                </Box>
                             </MenuList>
                         </Menu>
                     </Box>

src/views/settingMenu/index.tsx

@@ -11,9 +11,17 @@ import {
 function SettingMenu() {
   const getARoute = store.auth(((state: { isAllRoute: Object }) => state.isAllRoute));
   const [menu, setMenu] = useState(getARoute);
+  const iAddDom = store.temp(((state: { setHeaderDom: Function }) => state.setHeaderDom))
+  const [name, setName] = useState("heihei");
+  const addDom = () => {
+    iAddDom(<Button w="100%" mb={"2px"} colorScheme='facebook' onClick={()=>{ setName("嘿嘿嘿")}}>
+    添加dom
+  </Button>)
+  }
   return (
     <Box>
       <Box w={"200px"} maxH={"100%"}>
+        {name}
         <Accordion defaultIndex={[0]} allowMultiple>
           <AccordionItem>
             <AccordionButton >
@@ -48,6 +56,9 @@ function SettingMenu() {
             </AccordionPanel>
           </AccordionItem>
         </Accordion>
+        <Button w="100%" mb={"2px"} colorScheme='facebook' onClick={addDom}>
+          添加dom
+        </Button>
       </Box>
     </Box>
   )