From 23aab6c8e572b127ab42357ea65940df063005a1 Mon Sep 17 00:00:00 2001 From: master1lan <278457198@qq.com> Date: Fri, 6 Jan 2023 21:58:35 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=A7=8B=E5=86=99header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/masonry/test.tsx | 78 ------ src/main.tsx | 2 +- src/normalize.css | 379 ++++++++++++++++++++++++++ src/routers/layout.tsx | 60 ---- src/routers/layout/header.tsx | 51 ++++ src/routers/layout/hooks.ts | 12 + src/routers/layout/index.tsx | 24 ++ src/routers/layout/layout.module.less | 98 +++++++ src/routers/layout/nav.tsx | 114 ++++++++ src/routers/photo.tsx | 5 +- src/routers/video/index.tsx | 2 +- src/routers/video/masonry.tsx | 2 + src/routers/video/masonryItem.tsx | 6 +- src/routers/video/video.module.less | 13 - src/utils/fetch/fetchtype.ts | 2 +- src/utils/fetch/index.ts | 7 + vite.config.ts | 8 + 17 files changed, 701 insertions(+), 162 deletions(-) delete mode 100644 src/components/masonry/test.tsx create mode 100644 src/normalize.css delete mode 100644 src/routers/layout.tsx create mode 100644 src/routers/layout/header.tsx create mode 100644 src/routers/layout/hooks.ts create mode 100644 src/routers/layout/index.tsx create mode 100644 src/routers/layout/layout.module.less create mode 100644 src/routers/layout/nav.tsx diff --git a/src/components/masonry/test.tsx b/src/components/masonry/test.tsx deleted file mode 100644 index f2420d0..0000000 --- a/src/components/masonry/test.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { useState, useCallback, useEffect, FC } from "react"; -//@ts-ignore -import Masonry from "@mui/lab/Masonry"; -import { SingleRun, concurrencyRequest } from "@utils/index"; -import { fetchVideos } from "@utils/fetch"; -import { nanoid } from "nanoid"; -import Image from "@components/image"; -export default function ImageMasonry() { - const [lists, setLists] = useState< - { - image: string; - name: string; - id: string; - }[] - >([]); - const fetchMoreItems = async ( - startIndex: number, - stopIndex: number, - currentItems: any[] - ) => { - const res = await fetchVideos({ - order: "view", - page: 1, - }), - data = res.data.result, - urls = data.map((item) => item.face); - await concurrencyRequest(urls, 6, "success", "error"); - setLists((lists) => { - return [ - ...lists, - ...data.map((item) => ({ - image: item.face, - name: item.name, - id: nanoid(10), - })), - ]; - }); - }; - const fetchMoreItemsHandler = useCallback(SingleRun(fetchMoreItems), [ - setLists, - ]); - useEffect(() => { - fetchMoreItemsHandler(0, 20, []); - console.log("effect"); - }, [fetchMoreItemsHandler]); - return ( - <> -
- - {lists.map((item) => ( - - ))} - -
- - ); -} - -type CardType = { - data: { - id: string; - image: string; - name: string; - }; -}; - -const FakerCard: FC = ({ data: { id, image, name } }) => { - return ( -
- -
-

- {name} -

-
-
- ); -}; diff --git a/src/main.tsx b/src/main.tsx index ad5de75..2c5c399 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -8,7 +8,7 @@ import Layout from "./routers/layout"; import PhotoPage from "./routers/photo"; import ErrorPage from "./routers/error"; import "intersection-observer"; - +import "./normalize.css"; const router = createBrowserRouter([ { path: "/", diff --git a/src/normalize.css b/src/normalize.css new file mode 100644 index 0000000..780ad9c --- /dev/null +++ b/src/normalize.css @@ -0,0 +1,379 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; + /* 1 */ + margin: 0; + /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { + /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { + /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; + /* 1 */ + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + padding: 0; + /* 3 */ + white-space: normal; + /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} \ No newline at end of file diff --git a/src/routers/layout.tsx b/src/routers/layout.tsx deleted file mode 100644 index 66b0202..0000000 --- a/src/routers/layout.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { - Outlet, - NavLink, - useLoaderData, - Form, - redirect, - useNavigation, - useSubmit, -} from "react-router-dom"; -import message from "@components/message"; -export default function Layout() { - const nav_lists = [ - { - id: 1, - pathname: "photo", - }, - { - id: 2, - pathname: "read", - }, - { - id: 3, - pathname: "video", - }, - ]; - return ( - <> -
-

header

-
- -
-
-
- -
- -
-
- - - ); -} diff --git a/src/routers/layout/header.tsx b/src/routers/layout/header.tsx new file mode 100644 index 0000000..53bf554 --- /dev/null +++ b/src/routers/layout/header.tsx @@ -0,0 +1,51 @@ +import SearchSharpIcon from "@mui/icons-material/SearchSharp"; +import { + Outlet, + NavLink, + useLoaderData, + Form, + redirect, + useLocation, + useSubmit, +} from "react-router-dom"; +import Header_Nav from "./nav"; +import styles from "./layout.module.less"; +import { useFocus } from "./hooks"; +export default function Header() { + return ( +
+ + +
+ ); +} + +function Search() { + const { focused, bind } = useFocus(); + return ( + <> +
+
+
+ +
+
+ +
+
+
+ + ); +} diff --git a/src/routers/layout/hooks.ts b/src/routers/layout/hooks.ts new file mode 100644 index 0000000..1ef3550 --- /dev/null +++ b/src/routers/layout/hooks.ts @@ -0,0 +1,12 @@ +import { useState } from "react"; + +export const useFocus = () => { + const [focused, set] = useState(false); + return { + focused, + bind: { + onFocus: () => set(true), + onBlur: () => set(false), + }, + }; +}; diff --git a/src/routers/layout/index.tsx b/src/routers/layout/index.tsx new file mode 100644 index 0000000..fa5e647 --- /dev/null +++ b/src/routers/layout/index.tsx @@ -0,0 +1,24 @@ +import { + Outlet, + NavLink, + useLoaderData, + Form, + redirect, + useNavigation, + useSubmit, +} from "react-router-dom"; +import Header from "./header"; +export default function Layout() { + return ( + <> +
+
+
+ +
+
+ + ); +} diff --git a/src/routers/layout/layout.module.less b/src/routers/layout/layout.module.less new file mode 100644 index 0000000..2beb927 --- /dev/null +++ b/src/routers/layout/layout.module.less @@ -0,0 +1,98 @@ +.search-box { + position: relative; + margin: 0 8px; + min-width: 180px; + max-width: 500px; + + .search-form { + border-radius: 8px; + display: flex; + align-items: center; + height: 40px; + opacity: .9; + transition: background-color .3s; + background-color: #f1f2f3; + border: 1px solid #E3E5E7; + + &:hover { + background-color: #fff; + } + + .search-content { + flex: 1; + display: flex; + align-items: center; + position: relative; + padding: 0 8px; + margin-right: 8px; + height: 32px; + border: 2px solid transparent; + border-radius: 6px; + + .search-input { + flex: 1; + overflow: hidden; + padding-right: 8px; + border: none; + background-color: transparent; + box-shadow: none; + font-size: 14px; + line-height: 20px; + color: #61666D; + + &:focus-visible { + outline: none; + } + } + } + + .search-btn { + display: flex; + margin: 0; + padding: 0; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border: none; + border-radius: 6px; + cursor: pointer; + transition: background-color .3s; + + &:hover { + background-color: #E3E5E7; + } + } + } + + .form-active { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + background-color: #fff; + + .search-content { + background-color: #f1f2f3; + } + } +} + +::-webkit-scrollbar { + display: none; +} + +.navstack { + // width: 500px; + overflow-x: scroll; + scrollbar-width: none; + -ms-overflow-style: none; + + .navlink { + text-decoration: none; + + &-active>div { + // background-color: ; + } + } +} + +//todo 写好header \ No newline at end of file diff --git a/src/routers/layout/nav.tsx b/src/routers/layout/nav.tsx new file mode 100644 index 0000000..79d8b03 --- /dev/null +++ b/src/routers/layout/nav.tsx @@ -0,0 +1,114 @@ +import { Chip, Stack } from "@mui/material"; +import { + Outlet, + NavLink, + useLoaderData, + Form, + redirect, + useLocation, + useSubmit, +} from "react-router-dom"; +import { nanoid } from "nanoid"; +import styles from "./layout.module.less"; +import { FC, useState } from "react"; + +const router_lists = [ + { + id: nanoid(2), + type: "router", + pathname: "photo", + name: "图片", + }, + { + id: nanoid(2), + type: "router", + pathname: "video", + name: "视频", + }, +]; + +const nav_lists = [ + { + type: "query", + query: "所有二创", + }, + { + type: "query", + query: "露早", + }, + { + type: "query", + query: "柚恩", + }, + { + type: "query", + query: "莞儿", + }, + { + type: "query", + query: "米诺", + }, + { + type: "query", + query: "虞莫", + }, + { + type: "query", + query: "动画分区", + }, + { + type: "query", + query: "音乐分区", + }, + { + type: "query", + query: "舞蹈分区", + }, + { + type: "query", + query: "游戏分区", + }, + { + type: "query", + query: "鬼畜分区", + }, + { + type: "query", + query: "其他分区", + }, +].map((item) => ({ ...item, id: nanoid(3) })); + +export default function Header_Nav() { + //todo 这里存放到context中间去 + return ( + <> + + {router_lists.map((router) => ( + + `${styles["navlink"]} ${isActive ? styles["navlink-active"] : ""}` + } + > + + + ))} + {nav_lists.map((nav) => ( + + ))} + + + ); +} + +const ClickChip: FC<{ label: string }> = (props) => { + const [clicked, setClick] = useState(false); + return ( + setClick((clicked) => !clicked)} + /> + ); +}; diff --git a/src/routers/photo.tsx b/src/routers/photo.tsx index 386539a..953b182 100644 --- a/src/routers/photo.tsx +++ b/src/routers/photo.tsx @@ -1,13 +1,10 @@ import getrealtiveTime from "@utils/time"; -import Masonry from "@components/masonry"; -import Image from "@components/image"; -import ImageMasonry from "@components/masonry/test"; const url = `https://images.pexels.com/photos/5702958/pexels-photo-5702958.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1`; export default function PhotoPage() { const time = getrealtiveTime(1672570122); return ( <> - + {/* */} {/* */} {/*

videopage

- + {/* */} ); } diff --git a/src/routers/video/masonry.tsx b/src/routers/video/masonry.tsx index 1588678..6db1f2a 100644 --- a/src/routers/video/masonry.tsx +++ b/src/routers/video/masonry.tsx @@ -78,3 +78,5 @@ export default function VideoMasonry(props: any) { ); } + +//todo：改成feed流 diff --git a/src/routers/video/masonryItem.tsx b/src/routers/video/masonryItem.tsx index 355ee0b..695ea9e 100644 --- a/src/routers/video/masonryItem.tsx +++ b/src/routers/video/masonryItem.tsx @@ -4,7 +4,7 @@ import SlowMotionVideoSharpIcon from "@mui/icons-material/SlowMotionVideoSharp"; import SubjectSharpIcon from "@mui/icons-material/SubjectSharp"; import ThumbUpSharpIcon from "@mui/icons-material/ThumbUpSharp"; import FavoriteSharpIcon from "@mui/icons-material/FavoriteSharp"; -import Link from "@mui/material/Link"; +import { Link, Avatar } from "@mui/material"; import { VideoRouterImageCardType } from "./videotype"; import getrealtiveTime, { getVideoTime } from "@utils/time"; import styles from "./video.module.less"; @@ -108,9 +108,7 @@ const VideoInfo: FC<

-
- -
+
{name} diff --git a/src/routers/video/video.module.less b/src/routers/video/video.module.less index 47c3858..fe04f80 100644 --- a/src/routers/video/video.module.less +++ b/src/routers/video/video.module.less @@ -67,19 +67,6 @@ margin-left: 5px; } - &-face { - width: 40px; - height: 40px; - - img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 50%; - overflow: hidden; - } - } - &-desc { font-size: 13px; display: flex; diff --git a/src/utils/fetch/fetchtype.ts b/src/utils/fetch/fetchtype.ts index c28e5c6..6028ead 100644 --- a/src/utils/fetch/fetchtype.ts +++ b/src/utils/fetch/fetchtype.ts @@ -14,7 +14,7 @@ export interface IFetchVideoParams { */ page: number; /** - * @description q高级搜索语句，详细看API文档 @access {https://portal.eoe.api.vtb.link/api-details_get-video} + * @description q高级搜索语句，详细看API文档 @access {https://portal.api.eoe.best/api-details_get-video} * @example tag.乃琳+手绘.OR~name.贾布加布~pubdate.1619416601+1649416601.BETWEEN */ q?: string; diff --git a/src/utils/fetch/index.ts b/src/utils/fetch/index.ts index 665de25..299f09c 100644 --- a/src/utils/fetch/index.ts +++ b/src/utils/fetch/index.ts @@ -15,4 +15,11 @@ export function fetchVideos( params: IFetchVideoParams ): Promise { return Promise.resolve(videoJson); + // return fetch("/v1/video-interface/advanced-search?order=pubdate&page=1", { + // method: "GET", + // headers: { + // "ocp-Apim-Subscription-Key": "3cc4284fbb864965a7a9ad0f28af8496", + // origin: "https://portal.api.eoe.best", + // }, + // }).then((response) => response.json() as Promise); } diff --git a/vite.config.ts b/vite.config.ts index bf4b611..392e271 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -28,4 +28,12 @@ export default defineConfig({ }, }, }, + server: { + proxy: { + "/v1": { + target: "https://api.eoe.best/eoefans-api", + changeOrigin: true, + }, + }, + }, });