feat: 优化

src/layout/base.tsx

@@ -28,8 +28,8 @@ const ContentWrapper = styled.div`
 function BaseLayout(props: PageProps) {
     const [isOpen, setIsOpen] = useState(false)
     const [isOpenAbout, setIsOpenAbout] = useState(false)
-    const [isOpenRegister, setIsOpenRegister] = useState(false)
+    const [isOpenAuth, setIsOpenAuth] = useState(false)
-    const [isOpenLogin, setIsOpenLogin] = useState(false)
+    const [isRegister, setIsRegister] = useState(false)
 
     const router = useHistory()
 
@@ -81,12 +81,11 @@ function BaseLayout(props: PageProps) {
                     <Notice />
                 </Navbar.Group>
                 <Navbar.Group align={Alignment.RIGHT}>
-                    <Button icon="person" className="bp5-minimal" text="登录" onClick={() => setIsOpenLogin(true)} />
+                    <Button icon="user" className="bp5-minimal" text="登录 / 注册" onClick={() => setIsOpenAuth(true)} />
-                    <Button icon="person" className="bp5-minimal" text="注册" onClick={() => setIsOpenRegister(true)} />
                     <Navbar.Divider />
-                    {/* <NavLink to={"/about"}> */}
+                    <NavLink to={"/about"}>
                     <Button onClick={() => setIsOpenAbout(true)} className="bp5-minimal" text="关于" />
-                    {/* </NavLink> */}
+                    </NavLink>
                 </Navbar.Group>
             </Navbar>
             <ContentWrapper>{props.children}</ContentWrapper>
@@ -97,27 +96,50 @@ function BaseLayout(props: PageProps) {
                 </DialogBody>
                 <DialogFooter actions={<Button intent="primary" text="合起" onClick={() => setIsOpenAbout(false)} />} />
             </Dialog>
-            <Dialog isOpen={isOpenRegister} title="注册" icon="info-sign" onClose={() => setIsOpenRegister(false)}>
+            <Dialog
-                <Register>
+                isOpen={isOpenAuth}
-                    {{
+                title={
-                        Wrapper: ({ children }: { children: ReactNode }) => <DialogBody>{children}</DialogBody>,
+                    <>
-                        Default: ({ children }: { children: ReactNode }) => (
+                        <a onClick={() => setIsRegister(false)}>登陆</a> / <a onClick={() => setIsRegister(true)}>注册</a>
-                            <DialogFooter
+                    </>
-                                actions={
+                }
-                                    <>
+                icon="info-sign"
-                                        {children}
+                onClose={() => setIsOpenAuth(false)}
-                                        <Button text="合起" onClick={() => setIsOpenRegister(false)} />
+            >
-                                    </>
+                {isRegister && (
-                                }
+                    <Register>
-                            />
+                        {{
-                        ),
+                            Wrapper: ({ children }: { children: ReactNode }) => <DialogBody>{children}</DialogBody>,
-                    }}
+                            Default: ({ children }: { children: ReactNode }) => (
-                </Register>
+                                <DialogFooter
-            </Dialog>
+                                    actions={
-            <Dialog isOpen={isOpenLogin} title="注册" icon="info-sign" onClose={() => setIsOpenLogin(false)}>
+                                        <>
-                <div style={{padding: "20px"}}>
+                                            {children}
-                    <Login></Login>
+                                            <Button text="合起" onClick={() => setIsOpenAuth(false)} />
-                </div>
+                                        </>
+                                    }
+                                />
+                            ),
+                        }}
+                    </Register>
+                )}
+                {!isRegister && (
+                    <Login>
+                        {{
+                            Wrapper: ({ children }: { children: ReactNode }) => <DialogBody>{children}</DialogBody>,
+                            Default: ({ children }: { children: ReactNode }) => (
+                                <DialogFooter
+                                    actions={
+                                        <>
+                                            {children}
+                                            <Button text="合起" onClick={() => setIsOpenAuth(false)} />
+                                        </>
+                                    }
+                                />
+                            ),
+                        }}
+                    </Login>
+                )}
             </Dialog>
         </PageWrapper>
     )

src/ui/Hero/index.tsx

@@ -40,10 +40,10 @@ export function Hero() {
     return (
         <FigureElement>
             <OpacityIn className="img-wrapper">
-                {/* <img
+                <img
                     src="https://api.r10086.com/%E5%9B%BE%E5%8C%85webp/%E5%8A%A8%E6%BC%AB%E7%BB%BC%E5%90%882/48cf0b92dd80ccdd4898e6b4734105fc.png!q90.webp"
                     alt="月宫"
-                /> */}
+                />
             </OpacityIn>
             <div className="mask"></div>
             <figcaption>珠光照月，斑驳裂影。桃艳压山，风月无边。</figcaption>

src/ui/Login/Login.tsx

@@ -1,26 +1,113 @@
-
+import { Button, FormGroup, InputGroup, Intent, Tooltip } from "@blueprintjs/core"
-import { SubmitHandler, useForm } from "react-hook-form";
+import { FC, ReactNode, useCallback, useState } from "react"
+import { SubmitHandler, useForm } from "react-hook-form"
 
 interface IProps {
-
+    onSuccess?: () => void
+    children?: {
+        Wrapper?: FC<{ children: ReactNode }>
+        Default?: FC<{ children: ReactNode }>
+    }
 }
 
 type Inputs = {
-    email: string,
+    email: string
-};
+    password: string
+}
 
+export function Login({ onSuccess, children }: IProps) {
+    const [showPassword, setShowPassword] = useState(false)
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+    } = useForm<Inputs>()
+    const onSubmit: SubmitHandler<Inputs> = data => {
+        console.log(data)
+        onSuccess && onSuccess()
+    }
 
-export function Login(props: IProps) {
+    const inputEmail = register("email", { required: true })
-    const { register, handleSubmit, watch, formState: { errors } } = useForm<Inputs>();
+    const inputPwd = register("password", {
-    const onSubmit: SubmitHandler<Inputs> = data => console.log(data);
+        required: {
+            value: true,
+            message: "请输入密码",
+        },
+        minLength: {
+            value: 6,
+            message: "不能少于6个字符",
+        },
+        maxLength: {
+            value: 18,
+            message: "不能多于18个字符",
+        },
+    })
 
-    console.log(watch("email"));
+    const WrapperComp = useCallback(
-    
+        ({ children: child }: { children: ReactNode }) => children?.Wrapper?.({ children: child }) ?? <>{child}</>,
-    return <>
+        [children?.Wrapper],
-        <form onSubmit={handleSubmit(onSubmit)}>
+    )
-            <input {...register("email", { required: true })} />
+    const DefaultComp = useCallback(
-            {errors.email && <span>This field is required</span>}
+        ({ children: child }: { children: ReactNode }) => children?.Default?.({ children: child }) ?? <>{child}</>,
-            <input type="submit" />
+        [children?.Default],
-        </form>
+    )
-    </>
+
-}
+    return (
+        <>
+            <form onSubmit={handleSubmit(onSubmit)}>
+                <WrapperComp>
+                    <FormGroup
+                        intent={errors.email ? Intent.DANGER : Intent.NONE}
+                        helperText={errors.email && "请输入一个可用的邮箱"}
+                        label="邮箱"
+                        labelInfo="(必须)"
+                        labelFor="text-input"
+                    >
+                        <InputGroup
+                            intent={errors.email ? Intent.DANGER : Intent.NONE}
+                            name={inputEmail.name}
+                            placeholder="请输入邮箱"
+                            id="text-input"
+                            onBlur={inputEmail.onBlur}
+                            onChange={inputEmail.onChange}
+                            inputRef={inputEmail.ref}
+                        />
+                    </FormGroup>
+                    <FormGroup
+                        intent={errors.password ? Intent.DANGER : Intent.NONE}
+                        helperText={errors.password && errors.password.message}
+                        label="密码"
+                        labelInfo="(必须)"
+                        labelFor="pwd-input"
+                    >
+                        <InputGroup
+                            id="pwd-input"
+                            type={showPassword ? "text" : "password"}
+                            intent={errors.password ? Intent.DANGER : Intent.NONE}
+                            name={inputPwd.name}
+                            onBlur={inputPwd.onBlur}
+                            onChange={inputPwd.onChange}
+                            inputRef={inputPwd.ref}
+                            placeholder="请输入密码"
+                            rightElement={
+                                <Tooltip content={`${showPassword ? "Hide" : "Show"} Password`}>
+                                    <Button
+                                        icon={showPassword ? "unlock" : "lock"}
+                                        intent={Intent.WARNING}
+                                        minimal={true}
+                                        onClick={() => setShowPassword(!showPassword)}
+                                    />
+                                </Tooltip>
+                            }
+                        />
+                    </FormGroup>
+                </WrapperComp>
+                <DefaultComp>
+                    <Button intent="primary" type="submit">
+                        登陆
+                    </Button>
+                </DefaultComp>
+            </form>
+        </>
+    )
+}

src/views/Home/index.tsx

@@ -9,8 +9,7 @@ interface IProps {
     children: ReactNode
 }
 
-export default withPage(function Project({ }: IProps) {
+export default withPage(function Project({}: IProps) {
-
     const onClick = useCallback(() => {
         toast.success("Wow so easy !")
         // Fly.invoke().request<{a: number}>({