移除sass ，增加开发文档

README.md

@@ -15,4 +15,5 @@
 - add chakra-ui #link:https://chakra-ui.com/docs
 - add react-spring #动画库 link:https://www.react-spring.dev
 - add use-gesture #手势交互 link:https://use-gesture.netlify.app/docs/
-- add react-quill #富文本编辑器
\ No newline at end of file
+- add react-quill #富文本编辑器
+- add qrcode.react #二维码生成
\ No newline at end of file

dev.md

+### 开发文档
\ No newline at end of file

package.json

@@ -22,7 +22,6 @@
     "react-quill": "^2.0.0",
     "react-router-dom": "^6.4.3",
     "react-spring": "^9.6.1",
-    "sass": "^1.58.0",
     "zustand": "^4.3.2"
   },
   "devDependencies": {

src/store/module/temp.ts

@@ -2,6 +2,6 @@
 import create from 'zustand'
 let temp: any = (set: Function, get: Function) => ({
     headerDom:null,
-    setHeaderDom: (Dom:any) => set(() => ({ headerDom: Dom})),
+    setHeaderDom: (Dom:any) => set(() => ({ headerDom: Dom || null})),
  });
 export default create(temp);
\ No newline at end of file

src/views/login/index.css

+.main-bg{
+    position: absolute;
+    height: calc(100% - 17vh);
+    width: 100%;
+    top: 17vh;
+    left: 0;
+    overflow: hidden;
+    pointer-events: none;
+    background: url("https://app-cdn.clickup.com/login__bg.8e44616319b55ac1.svg") center 10px no-repeat;
+    background-size: cover;
+}
+    
+.main-bg::before{
+    content: "";
+    display: block;
+    position: absolute;
+    width: 200%;
+    height: 300%;
+    top: -100%;
+    left: -50%;
+    background: url("https://app-cdn.clickup.com/login__bg-dots.4777a8eaedc1248b.svg");
+    transform: rotate(-28deg);
+}
+    
+
+.main-bg::after{
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: url("https://app-cdn.clickup.com/login__bg-top.f55110285bf7cd54.svg") center top no-repeat;
+    background-size: 100% 50vh;
+}
+    

src/views/login/index.sass

-.main-bg
-    position: absolute
-    height: calc(100% - 17vh)
-    width: 100%
-    top: 17vh
-    left: 0
-    overflow: hidden
-    pointer-events: none
-    background: url("https://app-cdn.clickup.com/login__bg.8e44616319b55ac1.svg") center 10px no-repeat
-    background-size: cover
-.main-bg::before
-    content: ""
-    display: block
-    position: absolute
-    width: 200%
-    height: 300%
-    top: -100%
-    left: -50%
-    background: url("https://app-cdn.clickup.com/login__bg-dots.4777a8eaedc1248b.svg")
-    transform: rotate(-28deg)
-
-.main-bg::after
-    content: ""
-    display: block
-    position: absolute
-    width: 100%
-    height: 100%
-    top: 0
-    left: 0
-    background: url("https://app-cdn.clickup.com/login__bg-top.f55110285bf7cd54.svg") center top no-repeat
-    background-size: 100% 50vh

src/views/login/index.tsx

 import { Box, Center, Image, Text, FormControl, Divider, FormLabel, Input, Card, CardBody, Button, CardFooter, InputGroup, InputLeftElement, AvatarGroup, Avatar, useToast } from "@chakra-ui/react"
 import { useState } from "react"
 import { FaJenkins, FaGrunt } from "react-icons/fa"
-import { isEmpty } from "../../utils/iFunction";
 import { useNavigate } from 'react-router-dom'
-import "./index.sass"
+import "./index.css"
 import store from "../../store";
 import {QRCodeSVG} from 'qrcode.react';
 function Login() {

src/views/settingMenu/index.tsx

-import { Box, Text, Button } from "@chakra-ui/react"
-import { useState } from "react";
+import { Box, Text, Button,FormControl,FormLabel, Switch } from "@chakra-ui/react"
+import { useEffect, useState } from "react";
 import store from "../../store";
-import {
-  Accordion,
-  AccordionItem,
-  AccordionButton,
-  AccordionPanel,
-  AccordionIcon,
-} from '@chakra-ui/react'
 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>)
-  }
+  const [showPrv, setShowPrv] = useState(false);
+  iAddDom(
+    <FormControl display='flex' alignItems='center'>
+      <FormLabel htmlFor='email-alerts' mb='0'>
+        开启预览？
+      </FormLabel>
+      <Switch id='prv-alerts' onChange={()=>setShowPrv(!showPrv)} />
+    </FormControl>
+  )
+  useEffect(() => {
+    return () => {
+      iAddDom();
+    }
+  }, []);
   return (
     <Box>
-      <Box w={"200px"} maxH={"100%"}>
-        {name}
-        <Accordion defaultIndex={[0]} allowMultiple>
-          <AccordionItem>
-            <AccordionButton >
-              <Box as="span" flex='1' textAlign='left'>
-                预览
-              </Box>
-              <AccordionIcon />
-            </AccordionButton>
-            <AccordionPanel pb={4}>
-              {
+      <Box display={"flex"} justifyContent={"center"} transition={"width 400ms"} height="calc(100vh - 80px)" overflowX={"hidden"} w={showPrv ? "200px" : "0"} flexShrink={0} >
+      <Box w={"200px"}>
+            {
                 menu.menu_list.map((item: any, index: any) => (
-                  <Box key={index}>
-                    {item.path_list.length > 0 && <Text fontSize={12} color={"gray.400"} px={4} w={"200px"}>{item.menu_name}</Text>}
-                    {
-                      item.path_list.map((citem: any, cindex: any) => (
-                        <Button key={cindex} w="100%" mb={"2px"} colorScheme='facebook' variant='ghost'>
-                          {citem.name}
-                        </Button>
-                      ))
-                    }
-                  </Box>
+                    <Box key={index}>
+                        {item.path_list.length > 0 && <Text fontSize={12} color={"gray.400"} px={4} w={"200px"}>{item.menu_name}</Text>}
+                        {
+                            item.path_list.map((citem: any, cindex: any) => (
+                                <Button  key={cindex} w="100%" mb={"2px"} colorScheme='facebook' variant='ghost'>
+                                    {citem.name}
+                                </Button>
+                            ))
+                        }
+                    </Box>
                 ))
-              }
-              {menu.order_list.length > 0 && <Text fontSize={12} color={"gray.400"} px={4} w={"200px"}>其他</Text>}
-              {
+            }
+            {menu.order_list.length > 0 && <Text fontSize={12} color={"gray.400"} px={4} w={"200px"}>其他</Text>}
+            {
                 menu.order_list.map((citem: any, cindex: any) => (
-                  <Button key={cindex} w="100%" mb={"2px"} colorScheme='facebook' variant='ghost'>
-                    {citem.name}
-                  </Button>
+                    <Button key={cindex} w="100%" mb={"2px"} colorScheme='facebook' variant='ghost'>
+                        {citem.name}
+                    </Button>
                 ))
-              }
-            </AccordionPanel>
-          </AccordionItem>
-        </Accordion>
-        <Button w="100%" mb={"2px"} colorScheme='facebook' onClick={addDom}>
-          添加dom
-        </Button>
-      </Box>
+            }
+        </Box>
+       </Box>
     </Box>
   )
 }