feat: 开发中

src/base/withPage.tsx

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from "react"
-import { LeftIn, OpacityIn } from "@/effect"
+import { OpacityIn } from "@/effect"
 import styled from "styled-components"
 
 interface PageProps {

src/effect/index.tsx

@@ -1,5 +1,5 @@
 import { motion } from "framer-motion"
-import styled from "styled-components"
+
 
 export function OpacityIn({ children, className }: any) {
     return (

src/layout/base.tsx

@@ -3,6 +3,8 @@ import { ReactNode, useState } from "react"
 import { NavLink, useHistory } from "react-router-dom"
 import styled from "styled-components"
 import { GlobalStyles } from "./GlobalStyles"
+import { Notice } from "@/ui/Notice"
+import { Markdown } from "@/ui/Markdown"
 
 interface PageProps {
     children: ReactNode
@@ -27,15 +29,25 @@ function BaseLayout(props: PageProps) {
 
     const router = useHistory()
 
+    const about = `
+> 人生如逆水行舟，不进则退。
+
+    我来自一南方小镇，不善言辞，今作此小站，聊慰平生。
+
+    如有意愿，欢迎联系。
+
+[Github](https://github.com/npmrun)
+    `
+
     return (
         <PageWrapper>
             <GlobalStyles />
             <Navbar>
                 <Navbar.Group align={Alignment.LEFT}>
-                    <Navbar.Heading>东风天堂</Navbar.Heading>
+                    <Navbar.Heading>天涯行宫</Navbar.Heading>
                     <Navbar.Divider />
                     <NavLink to={"/home"} strict exact activeClassName="actived">
-                        <Button className="bp5-minimal" icon="home" text="Home" />
+                        <Button className="bp5-minimal" icon="home" text="首页" />
                     </NavLink>
                     <Popover
                         isOpen={isOpen}
@@ -43,25 +55,29 @@ function BaseLayout(props: PageProps) {
                         onInteraction={isOpen => setIsOpen(isOpen)}
                         content={
                             <Menu>
-                                <MenuItem icon="graph" text="/project" onClick={() => router.push("/project")} />
-                                <MenuItem icon="map" text="/project/child" onClick={() => router.push("/project/child")} />
-                                <MenuItem icon="th" text="Table" shouldDismissPopover={false} />
-                                <MenuItem icon="zoom-to-fit" text="Browser" disabled={true} />
+                                <MenuItem icon="flow-review-branch" text="天涯笔记" disabled onClick={() => router.push("/project")} />
+                                <MenuItem icon="third-party" text="全聚德" disabled onClick={() => router.push("/project/child")} />
                                 <MenuDivider />
-                                <MenuItem icon="cog" text="Settings...">
-                                    <MenuItem icon="add" text="Add new application" disabled={true} />
-                                    <MenuItem icon="remove" text="Remove application" />
+                                <MenuItem icon="document" text="文档">
+                                    <MenuItem icon="build" text="CSS选择器示例" />
+                                </MenuItem>
+                                <MenuDivider />
+                                <MenuItem icon="cog" text="其他">
+                                    <MenuItem icon="build" text="CSS选择器示例" />
                                 </MenuItem>
                             </Menu>
                         }
                         fill={true}
                         placement="bottom"
                     >
-                        <Button className="bp5-minimal" icon="document" text="Files" rightIcon={isOpen ? "caret-down" : "caret-right"} />
+                        <Button className="bp5-minimal" icon="code" text="开源应用" rightIcon={isOpen ? "caret-down" : "caret-right"} />
                     </Popover>
                 </Navbar.Group>
+                <Navbar.Group align={Alignment.LEFT} style={{ marginLeft: "10px", maxWidth: "400px" }}>
+                    <Notice />
+                </Navbar.Group>
                 <Navbar.Group align={Alignment.RIGHT}>
-                    <Button className="bp5-minimal" icon="settings" />
+                    {/* <Button className="bp5-minimal" icon="settings" /> */}
                     <Navbar.Divider />
                     {/* <NavLink to={"/about"}> */}
                     <Button onClick={() => setIsOpenAbout(true)} className="bp5-minimal" icon="person" text="关于" />
@@ -69,9 +85,11 @@ function BaseLayout(props: PageProps) {
                 </Navbar.Group>
             </Navbar>
             <ContentWrapper>{props.children}</ContentWrapper>
-            <Dialog isOpen={isOpenAbout} title="通知" icon="info-sign" onClose={() => setIsOpenAbout(false)}>
-                <DialogBody>{/* body contents here */}</DialogBody>
-                <DialogFooter actions={<Button intent="primary" text="关闭" onClick={() => setIsOpenAbout(false)} />} />
+            <Dialog isOpen={isOpenAbout} title="关于我" icon="info-sign" onClose={() => setIsOpenAbout(false)}>
+                <DialogBody>
+                    <Markdown>{about}</Markdown>
+                </DialogBody>
+                <DialogFooter actions={<Button intent="primary" text="合起" onClick={() => setIsOpenAbout(false)} />} />
             </Dialog>
         </PageWrapper>
     )

src/router/AppRouter.tsx

@@ -1,5 +1,5 @@
 import { HashRouter as Router, Switch, Redirect, Route } from "react-router-dom"
-import React, { Fragment, ReactNode } from "react"
+import React, { Fragment } from "react"
 import AuthRoute from "./AuthRoute"
 import routes from "./route"
 import Loading from "./Loading"

src/router/Loading.tsx

@@ -1,8 +1,6 @@
-import { createRef, ReactNode, useEffect, useState } from "react"
+import { ReactNode, useEffect, useState } from "react"
 import styled from "styled-components"
 
-interface IProps {}
-
 const LoadingComp = styled.div`
     position: absolute;
     top: 0;
@@ -37,7 +35,7 @@ const LoadingComp = styled.div`
     }
 `
 
-export default function Loading(props: IProps): ReactNode {
+export default function Loading(): ReactNode {
     const [show, setShow] = useState(false)
     useEffect(() => {
         const timeId = setTimeout(() => {

src/router/index.ts

@@ -30,7 +30,7 @@ export default function useRoute() {
     const { pathname } = useLocation()
     let oroute = JSON.parse(JSON.stringify(routes))
     let index = foundRoute(routes, pathname)
-    let isLayout = true
+    // let isLayout = true
     let curA = null
     let curB = null
     if (index && index.length) {
@@ -45,7 +45,7 @@ export default function useRoute() {
             cur.children = []
         }
         if (cur.layout != undefined) {
-            isLayout = !!cur.layout
+            // isLayout = !!cur.layout
         }
         curA = cur
         curB = res

src/ui/Hero/index.tsx

@@ -0,0 +1,52 @@
+import { OpacityIn } from "@/effect"
+import styled from "styled-components"
+
+const FigureElement = styled.figure`
+    margin: 0;
+    position: relative;
+    height: 350px;
+    .img-wrapper {
+        height: 100%;
+        width: 100%;
+        filter: brightness(0.75);
+        img {
+            height: 100%;
+            width: 100%;
+            object-fit: cover;
+            object-position: top -100px right 0;
+            display: block;
+        }
+    }
+    .mask {
+        background: url(data:image/webp;base64,UklGRkYAAABXRUJQVlA4WAoAAAAQAAAAAQAAAQAAQUxQSAUAAAAA/wAAAABWUDggGgAAADABAJ0BKgIAAgAAwBIlpAADcAD+/u6qAAAA);
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+    }
+    figcaption {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        color: white;
+        padding: 15px 20px;
+        font-size: 2em;
+        text-align: justify;
+    }
+`
+
+export function Hero() {
+    return (
+        <FigureElement>
+            <OpacityIn className="img-wrapper">
+                <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>
+        </FigureElement>
+    )
+}

src/ui/Markdown/index.tsx

@@ -0,0 +1,22 @@
+import ReactMarkdown from "react-markdown"
+import styled from "styled-components"
+
+const MarkdownElement = styled(ReactMarkdown)`
+    blockquote {
+        margin: 0;
+        background-color: gainsboro;
+        padding: 10px 10px 10px 10px;
+        p:last-child {
+            margin-bottom: 0;
+            font-size: 1.1em;
+        }
+    }
+`
+
+interface IProps {
+    children: string
+}
+
+export function Markdown({ children }: IProps) {
+    return <MarkdownElement>{children}</MarkdownElement>
+}

src/ui/Notice/index.tsx

@@ -0,0 +1,11 @@
+// import { Tag } from "@blueprintjs/core";
+
+export function Notice() {
+    return (
+        <>
+            {/* <Tag large round icon="notifications" intent="warning" interactive>
+                公告: 吾生也有涯，而知也无涯。以有涯随无涯，殆已！
+            </Tag> */}
+        </>
+    )
+}

src/views/Child.tsx

@@ -1,5 +1,4 @@
-import { Button, Dialog, DialogBody, DialogFooter } from "@blueprintjs/core";
-import { useCallback, useState } from "react";
+import { Button } from "@blueprintjs/core";
 
 function Child() {
     return <>

src/views/Home/index.tsx

@@ -1,37 +1,16 @@
 import withPage from "@/base/withPage"
-import { useHistory } from "react-router-dom"
-import styled from "styled-components"
-import ReactMarkdown from "react-markdown"
-import MdText from "./index.md?raw"
+import { Hero } from "@/ui/Hero"
+import { ReactNode } from "react"
 
-const Title = styled.h1`
-    font-size: 1.5em;
-    text-align: center;
-    color: #bf4f74;
-`
+interface IProps {
+    children: ReactNode
+}
 
-const Wrapper = styled.section`
-    padding: 4em;
-    background: papayawhip;
-`
-
-export default withPage(function Project({ children }) {
-    const router = useHistory()
-    function toChild() {
-        router.push("/project/child")
-    }
+export default withPage(function Project({}: IProps) {
     return (
-        <div className="container">
-            <Wrapper>
-                <Title>HOME</Title>
-            </Wrapper>
-            <ReactMarkdown>{MdText}</ReactMarkdown>
-            <div>
-                <div onClick={toChild} style={{ height: "200px" }}>
-                    vaas
-                </div>
-                {children}
-            </div>
-        </div>
+        <>
+            <Hero></Hero>
+            <div className="container"></div>
+        </>
     )
 })

vite.config.ts

@@ -4,6 +4,7 @@ import react from "@vitejs/plugin-react-swc"
 
 // https://vite.dev/config/
 export default defineConfig({
+    base: "./",
     resolve: {
         alias: {
             "@": join(__dirname, "src"),