提交 c3232b03 编写于 作者: L lm83680

移除sass ,增加开发文档

上级 66c09d3b
...@@ -16,3 +16,4 @@ ...@@ -16,3 +16,4 @@
- add react-spring #动画库 link:https://www.react-spring.dev - add react-spring #动画库 link:https://www.react-spring.dev
- add use-gesture #手势交互 link:https://use-gesture.netlify.app/docs/ - add use-gesture #手势交互 link:https://use-gesture.netlify.app/docs/
- add react-quill #富文本编辑器 - add react-quill #富文本编辑器
- add qrcode.react #二维码生成
\ No newline at end of file
### 开发文档
\ No newline at end of file
...@@ -22,7 +22,6 @@ ...@@ -22,7 +22,6 @@
"react-quill": "^2.0.0", "react-quill": "^2.0.0",
"react-router-dom": "^6.4.3", "react-router-dom": "^6.4.3",
"react-spring": "^9.6.1", "react-spring": "^9.6.1",
"sass": "^1.58.0",
"zustand": "^4.3.2" "zustand": "^4.3.2"
}, },
"devDependencies": { "devDependencies": {
......
...@@ -2,6 +2,6 @@ ...@@ -2,6 +2,6 @@
import create from 'zustand' import create from 'zustand'
let temp: any = (set: Function, get: Function) => ({ let temp: any = (set: Function, get: Function) => ({
headerDom:null, headerDom:null,
setHeaderDom: (Dom:any) => set(() => ({ headerDom: Dom})), setHeaderDom: (Dom:any) => set(() => ({ headerDom: Dom || null})),
}); });
export default create(temp); export default create(temp);
\ No newline at end of file
.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;
}
.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
import { Box, Center, Image, Text, FormControl, Divider, FormLabel, Input, Card, CardBody, Button, CardFooter, InputGroup, InputLeftElement, AvatarGroup, Avatar, useToast } from "@chakra-ui/react" 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 { useState } from "react"
import { FaJenkins, FaGrunt } from "react-icons/fa" import { FaJenkins, FaGrunt } from "react-icons/fa"
import { isEmpty } from "../../utils/iFunction";
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import "./index.sass" import "./index.css"
import store from "../../store"; import store from "../../store";
import {QRCodeSVG} from 'qrcode.react'; import {QRCodeSVG} from 'qrcode.react';
function Login() { function Login() {
......
import { Box, Text, Button } from "@chakra-ui/react" import { Box, Text, Button,FormControl,FormLabel, Switch } from "@chakra-ui/react"
import { useState } from "react"; import { useEffect, useState } from "react";
import store from "../../store"; import store from "../../store";
import {
Accordion,
AccordionItem,
AccordionButton,
AccordionPanel,
AccordionIcon,
} from '@chakra-ui/react'
function SettingMenu() { function SettingMenu() {
const getARoute = store.auth(((state: { isAllRoute: Object }) => state.isAllRoute)); const getARoute = store.auth(((state: { isAllRoute: Object }) => state.isAllRoute));
const [menu, setMenu] = useState(getARoute); const [menu, setMenu] = useState(getARoute);
const iAddDom = store.temp(((state: { setHeaderDom: Function }) => state.setHeaderDom)) const iAddDom = store.temp(((state: { setHeaderDom: Function }) => state.setHeaderDom))
const [name, setName] = useState("heihei"); const [showPrv, setShowPrv] = useState(false);
const addDom = () => { iAddDom(
iAddDom(<Button w="100%" mb={"2px"} colorScheme='facebook' onClick={()=>{ setName("嘿嘿嘿")}}> <FormControl display='flex' alignItems='center'>
添加dom <FormLabel htmlFor='email-alerts' mb='0'>
</Button>) 开启预览?
</FormLabel>
<Switch id='prv-alerts' onChange={()=>setShowPrv(!showPrv)} />
</FormControl>
)
useEffect(() => {
return () => {
iAddDom();
} }
}, []);
return ( return (
<Box> <Box>
<Box w={"200px"} maxH={"100%"}> <Box display={"flex"} justifyContent={"center"} transition={"width 400ms"} height="calc(100vh - 80px)" overflowX={"hidden"} w={showPrv ? "200px" : "0"} flexShrink={0} >
{name} <Box w={"200px"}>
<Accordion defaultIndex={[0]} allowMultiple>
<AccordionItem>
<AccordionButton >
<Box as="span" flex='1' textAlign='left'>
预览
</Box>
<AccordionIcon />
</AccordionButton>
<AccordionPanel pb={4}>
{ {
menu.menu_list.map((item: any, index: any) => ( menu.menu_list.map((item: any, index: any) => (
<Box key={index}> <Box key={index}>
...@@ -53,12 +45,7 @@ function SettingMenu() { ...@@ -53,12 +45,7 @@ function SettingMenu() {
</Button> </Button>
)) ))
} }
</AccordionPanel> </Box>
</AccordionItem>
</Accordion>
<Button w="100%" mb={"2px"} colorScheme='facebook' onClick={addDom}>
添加dom
</Button>
</Box> </Box>
</Box> </Box>
) )
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册