diff --git a/index.html b/index.html index c5bd3ab..72379f1 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,10 @@ - + - Vite App + 保罗 API Next +
diff --git a/package.json b/package.json index 5007fa4..bdb8eee 100644 --- a/package.json +++ b/package.json @@ -12,11 +12,13 @@ "@midwayjs/hooks-kit": "^3.0.0", "@midwayjs/koa": "^3.3.0", "@midwayjs/rpc": "^3.0.0", + "@prisma/client": "^3.12.0", "ahooks": "^3.3.0", "isomorphic-unfetch": "^3.1.0", "lodash": "^4.17.21", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-router-dom": "^6.3.0", "redis": "^4.0.6" }, "devDependencies": { @@ -25,6 +27,10 @@ "@types/react": "^17.0.44", "@types/react-dom": "^17.0.15", "@vitejs/plugin-react": "^1.3.0", + "prisma": "^3.12.0", "typescript": "^4.6.3" + }, + "prisma": { + "seed": "ts-node prisma/seed.ts" } } diff --git a/src/components/Layout/Aside.tsx b/src/components/Layout/Aside.tsx new file mode 100644 index 0000000..b635b72 --- /dev/null +++ b/src/components/Layout/Aside.tsx @@ -0,0 +1,51 @@ +// React +import React, { useState } from "react"; + + +// UI +import { Link } from "react-router-dom"; + +import Avatar from "../../images/avatar.jpg"; + + +// Components +function Aside() { + + const [sideOpen, setSideOpen] = useState(false); + + const toggleClick = () => { + setSideOpen(!sideOpen); + } + + return ( + + ) +} + +export default Aside; diff --git a/src/images/avatar.jpg b/src/images/avatar.jpg new file mode 100644 index 0000000..927fd0a Binary files /dev/null and b/src/images/avatar.jpg differ diff --git a/src/images/help/wallpaper-pr-example.jpg b/src/images/help/wallpaper-pr-example.jpg new file mode 100644 index 0000000..eb4b3e1 Binary files /dev/null and b/src/images/help/wallpaper-pr-example.jpg differ diff --git a/src/images/help/wallpaper-pr-require.jpg b/src/images/help/wallpaper-pr-require.jpg new file mode 100644 index 0000000..43914e2 Binary files /dev/null and b/src/images/help/wallpaper-pr-require.jpg differ diff --git a/src/images/icon.png b/src/images/icon.png new file mode 100755 index 0000000..578bdcf Binary files /dev/null and b/src/images/icon.png differ diff --git a/src/index.css b/src/index.css index 6b7bef1..8b4ee68 100644 --- a/src/index.css +++ b/src/index.css @@ -1,39 +1,320 @@ -body { +@charset "UTF-8"; + +/* ---- + +# Paul API +# By: Dreamer-Paul +# Last Update: 2021.12.16 + +保罗的首页、作品和 API 页通用模板 + +本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com + +---- */ + +/* 0 - 全局 +-------------------------------- */ +:root{ + --primary: #009688; + --secondly: #2ecc71; +} + +body{ + margin-left: 10em; + padding: 1em 1.5em; +} + +h1, h2, h3{ font-weight: lighter } + +button{ + padding: 0; + font: inherit; + outline: none; + cursor: pointer; +} + +.radius-full{ border-radius: 100% } + +/* 1 - 页眉 +-------------------------------- */ +.sidebar{ + top: 0; + left: 0; + bottom: 0; + z-index: 2; + color: #fff; + width: 10em; + position: fixed; + background-color: #3498db; + background-color: var(--primary); + transition: transform .3s; +} + +.sidebar .header{ + padding: 1em; + background: rgba(255, 255, 255, .2); +} + +.sidebar h1{ + font-size: 1.3em; + text-align: center; +} +.sidebar i{ + width: 1em; + margin-right: .75em; +} +.sidebar hr{ margin: 0; - font-family: 'Avenir', Helvetica, Arial, -apple-system, BlinkMacSystemFont, - 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', - 'Droid Sans', 'Helvetica Neue', sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + border-color: rgba(0, 0, 0, .15); } -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} - -.app { - min-height: 100vh; - margin: 6rem 0; -} - -.logo { - width: 300px; -} - -.app { +.sidebar .wrapper{ + height: 100%; display: flex; + overflow-y: auto; flex-direction: column; - align-items: center; +} +.sidebar .wrapper::-webkit-scrollbar{ width: 0 } + +.sidebar nav a{ + padding: 1em; + display: block; + color: rgba(255, 255, 255, .9); +} +.sidebar nav i{ + opacity: .8; + transition: transform .3s; } -.lambda { - display: inline-block; - box-sizing: border-box; - padding: 4px 8px; - background-color: #e3e3e3; - border-radius: 4px; - margin-right: 8px; - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; +.sidebar nav a:hover{ background: rgba(0, 0, 0, .2) } +.sidebar nav a:hover i{ transform: scale(1.2); } + +.sidebar a.active, .sidebar .has-child > a{ + position: relative; + background: rgba(0, 0, 0, .1); } +.sidebar a.active:before ,.sidebar .has-child > a:before{ + right: 0; + content: ''; + position: absolute; + border: .75em solid transparent; + border-right-color: #fff; +} + +.sidebar .sub-menu a{ padding: .75em 1em } + +@media screen and (max-width: 600px){ + body{ margin-left: 0 } + + .sidebar{ + transform: translateX(-10em); + } + .sidebar.active{ + transform: translateX(0); + box-shadow: .25em 0 .5em rgba(0, 0, 0, .2); + } + + aside .toggle{ + top: 0; + left: 10em; + z-index: 3; + color: #fff; + width: 2.5em; + height: 2.5em; + cursor: pointer; + position: absolute; + text-align: center; + background-color: var(--primary); + box-shadow: .25em 0 .5em rgba(0, 0, 0, .2); + } + aside .toggle:before{ + content: "\f0c9"; + line-height: 2.5em; + font-family: "FontAwesome"; + } + + .sidebar.active .toggle{ + background-color: #2ecc71; + background-color: var(--secondly); + } +} + +.sidebar .menu{ + flex: 1 1 auto; +} + +.sidebar .user-area{ + cursor: pointer; + user-select: none; + padding: .75em 1em; + transition: background .3s; + border-top: 1px solid rgba(0, 0, 0, .15); +} +.sidebar .user-area:hover{ background: rgba(0, 0, 0, .2) } +.sidebar .user-area img{ + width: 2em; + border-radius: 66%; + border: 2px solid #fff; +} +.sidebar .user-area .username{ + margin-left: .5em; + vertical-align: middle; +} + +/* 2 - 正文 +-------------------------------- */ +main, footer{ + margin: auto; + max-width: 45em; +} + +main .header{ + padding: 1em; + text-align: center; + margin-bottom: 3em; + border-bottom: 1px solid #eee; +} +main .header h1{ font-size: 2em } +main .header h2{ color: #666; font-size: 1.25em } + +main .post{ + margin-bottom: 3em; +} + +main .post a{ + text-decoration: 1px dashed underline; + text-underline-offset: 0.1em; +} + +main .post h3{ + margin-top: 3em; + position: relative; +} +main .post > h3:after{ + content: ""; + width: 1.5em; + height: 2px; + display: block; + margin-top: .25em; + background-color: #2ecc71; + background-color: var(--secondly); +} +main .post h3:first-child{ margin-top: 0 } + +main .post img{ border-radius: .5em } + +main .box{ + height: 100%; + color: #fff; + display: block; + padding: 2em 1em; + text-align: center; + transition: background .3s; + animation: fade-in-top .3s backwards; +} +main .box.first{ + background: #2ecc71; + animation-delay: .2s; +} +main .box.first:hover{ background: #27ae60 } + +main .box.second{ + background: #3498db; + animation-delay: .4s; +} +main .box.second:hover{ background: #2980b9 } + +main .box.third{ + background: #f1c40f; + animation-delay: .6s; +} +main .box.third:hover{ background: #f39c12 } + +main .box.fourth{ + background: #e74c3c; + animation-delay: .8s; +} +main .box.fourth:hover{ background: #c0392b } + +main .box.fifth{ + background: #9b59b6; + animation-delay: 1s; +} +main .box.fifth:hover{ background: #8e44ad } + +main .box.sixth{ + background: #1abc9c; + animation-delay: 1.2s; +} +main .box.sixth:hover{ background: #16a085 } + +main .box.seventh{ + background: #e67e22; + animation-delay: 1.4s; +} +main .box.seventh:hover{ background: #d35400 } + +main .box.eighth{ + background: #95a5a6; + animation-delay: 1.6s; +} +main .box.eighth:hover{ background: #7f8c8d } + +main .box i{ margin-right: .5em } +main .box h3:before{ content: normal } + +main kplayer{ margin-bottom: 1em; } + +main .comments{ + margin-bottom: 3em; +} + +/* 3 - 页尾 +------------------------------ */ +footer{ + color: #666; + padding: 1em 0; + text-align: center; + border-top: 1px solid #eee; +} + +.server-flag{ + top: 0; + right: 0; + z-index: 6; + color: #fff; + cursor: help; + position: fixed; + background: orangered; + padding: 2em 5em .5em 5em; + transform-origin: top right; + transform: rotate(45deg) translateX(50%); +} + +/* 4 - 附加 +------------------------------ */ +.gt-meta{ + margin-top: 0; + padding-top: 0; +} + +.gt-copyright{ display: none } + +.token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata{ color: slategray } +.token.punctuation{ color: #f8f8f2 } +.token.namespace { opacity: .7 } +.token.property, .token.tag, .token.function-name, .token.constant, .token.symbol, .token.deleted{ color: #f92672 } +.token.boolean, .token.number { color: #ae81ff } +.token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted{ color: #a6e22e } + +.token.operator, .token.entity, .token.url, .token.variable{ color: #f8f8f2 } +.token.atrule, .token.attr-value, .token.class-name{ color: #e6db74 } +.token.keyword { color: #66d9ef } +.token.regex, .token.important{ color: #fd971f } + +.language-css .token.string, .style .token.string { color: #28b9be } + +.token.important, .token.bold { font-weight: bold } +.token.italic { font-style: italic } +.token.entity { cursor: help } +.token.important { font-weight: normal } diff --git a/src/index.tsx b/src/index.tsx index 69aaa73..63cb2e7 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,60 +1,28 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { useRequest } from 'ahooks'; -import { getDate } from './api/date'; -import fetchGithubStars from './api/star'; -import { getBookByParams, getBookByQuery } from './api/book'; -import './index.css'; +import React from "react"; +import ReactDOM from "react-dom"; + +import "./kico.css"; +import "./index.css"; + +import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; + +import Aside from "./components/Layout/Aside"; +import Home from "./pages/index"; +import Wallpaper from "./pages/wallpaper"; +import Bing from "./pages/bing"; function App() { - const { data: date } = useRequest(() => getDate()); - const { data: repo, loading } = useRequest(() => - fetchGithubStars('midwayjs/midway') - ); - const { data: book } = useRequest(() => - getBookByParams({ params: { id: '1' } }) - ); - const { data: book2 } = useRequest(() => - getBookByQuery({ query: { id: '2' } }) - ); - return ( -
- -

Hello Midway Hooks

-

- Edit src/api/*.ts and watch it change. -
- You can also open Devtools to see the request details. -

-
-

- λ GET - getDate() - Server Date: {date} -

-

- λ POST - fetchStars('midwayjs/midway') - Github Stars: {loading ? 'Fetching...' : repo.stars} -

-

- λ GET - - {`getBookByParams({ params: { id: '1' } })`} - - Book title: {book?.title} -

-

- λ GET - - {`getBookByQuery({ query: { id: '2' } })`} - - Book title: {book2?.title} -

-
-
+ +