From 4e0508cdaad1347d22dc8102448b951681ee386a Mon Sep 17 00:00:00 2001
From: npmrun <1549469775@qq.com>
Date: Tue, 19 Nov 2024 23:15:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BC=80=E5=8F=91=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/base/withPage.tsx | 2 +-
src/effect/index.tsx | 2 +-
src/layout/base.tsx | 46 ++++++++++++++++++++++++++++-------------
src/router/AppRouter.tsx | 2 +-
src/router/Loading.tsx | 6 ++----
src/router/index.ts | 4 ++--
src/ui/Hero/index.tsx | 52 +++++++++++++++++++++++++++++++++++++++++++++++
src/ui/Markdown/index.tsx | 22 ++++++++++++++++++++
src/ui/Notice/index.tsx | 11 ++++++++++
src/views/Child.tsx | 3 +--
src/views/Home/index.tsx | 41 +++++++++----------------------------
vite.config.ts | 1 +
12 files changed, 136 insertions(+), 56 deletions(-)
create mode 100644 src/ui/Hero/index.tsx
create mode 100644 src/ui/Markdown/index.tsx
create mode 100644 src/ui/Notice/index.tsx
diff --git a/src/base/withPage.tsx b/src/base/withPage.tsx
index a97f6c0..5e9f76d 100644
--- a/src/base/withPage.tsx
+++ b/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 {
diff --git a/src/effect/index.tsx b/src/effect/index.tsx
index 3974e40..59c85af 100644
--- a/src/effect/index.tsx
+++ b/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 (
diff --git a/src/layout/base.tsx b/src/layout/base.tsx
index 0a9b4c3..664d88b 100644
--- a/src/layout/base.tsx
+++ b/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 (
- 东风天堂
+ 天涯行宫
-
+
setIsOpen(isOpen)}
content={
}
fill={true}
placement="bottom"
>
-
+
+
+
+
-
+ {/* */}
{/* */}
{props.children}
-
)
diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx
index 091a4ba..1593197 100644
--- a/src/router/AppRouter.tsx
+++ b/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"
diff --git a/src/router/Loading.tsx b/src/router/Loading.tsx
index 2e495fd..e8bf24f 100644
--- a/src/router/Loading.tsx
+++ b/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(() => {
diff --git a/src/router/index.ts b/src/router/index.ts
index d92cc67..742b334 100644
--- a/src/router/index.ts
+++ b/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
diff --git a/src/ui/Hero/index.tsx b/src/ui/Hero/index.tsx
new file mode 100644
index 0000000..a76c103
--- /dev/null
+++ b/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 (
+
+
+ 
+
+
+ 珠光照月，斑驳裂影。桃艳压山，风月无边。
+
+ )
+}
diff --git a/src/ui/Markdown/index.tsx b/src/ui/Markdown/index.tsx
new file mode 100644
index 0000000..680a159
--- /dev/null
+++ b/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 {children}
+}
diff --git a/src/ui/Notice/index.tsx b/src/ui/Notice/index.tsx
new file mode 100644
index 0000000..c12cd1c
--- /dev/null
+++ b/src/ui/Notice/index.tsx
@@ -0,0 +1,11 @@
+// import { Tag } from "@blueprintjs/core";
+
+export function Notice() {
+ return (
+ <>
+ {/*
+ 公告: 吾生也有涯，而知也无涯。以有涯随无涯，殆已！
+ */}
+
+ )
+}
diff --git a/src/views/Child.tsx b/src/views/Child.tsx
index 2d724d4..12144fa 100644
--- a/src/views/Child.tsx
+++ b/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 <>
diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx
index 61c01d3..0255c81 100644
--- a/src/views/Home/index.tsx
+++ b/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 (
-
-
- HOME
-
-
{MdText}
-
-
- vaas
-
- {children}
-
-