diff --git a/src/assets/font/ProximaSoft-Regular.ttf b/src/assets/font/ProximaSoft-Regular.ttf new file mode 100644 index 0000000..ce3af8e Binary files /dev/null and b/src/assets/font/ProximaSoft-Regular.ttf differ diff --git a/src/assets/font/ProximaSoft-Regular.woff b/src/assets/font/ProximaSoft-Regular.woff new file mode 100644 index 0000000..6d4f822 Binary files /dev/null and b/src/assets/font/ProximaSoft-Regular.woff differ diff --git a/src/assets/font/ProximaSoft-Regular.woff2 b/src/assets/font/ProximaSoft-Regular.woff2 new file mode 100644 index 0000000..e5986d3 Binary files /dev/null and b/src/assets/font/ProximaSoft-Regular.woff2 differ diff --git a/src/components/proview/themePreview.tsx b/src/components/proview/themePreview.tsx new file mode 100644 index 0000000..5040725 --- /dev/null +++ b/src/components/proview/themePreview.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import { ThemeProvider, createTheme } from "@mui/material/styles"; +import { ReactChildrenType } from "./type"; +const theme = createTheme({ + typography: { + fontFamily: "Proxima Soft", + }, +}); + +const MUIThemePreview = ({ children }: ReactChildrenType) => { + return {children}; +}; + +export default MUIThemePreview; diff --git a/src/index.less b/src/index.less index 87660c6..0e46a55 100644 --- a/src/index.less +++ b/src/index.less @@ -8,4 +8,19 @@ margin: 0 auto; padding: 0 8px; max-width: 1200px; +} + +@font-face { + font-family: 'Proxima Soft'; + src: local('Proxima Soft Regular'), local('Proxima-Soft-Regular'), + url('@assets/font/ProximaSoft-Regular.woff2') format('woff2'), + url('@assets/font/ProximaSoft-Regular.woff') format('woff'), + url('@assets/font/ProximaSoft-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} + +body, +html { + font-family: 'Proxima Soft'; } \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index 5fe23f3..39646bf 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -14,6 +14,7 @@ import "./normalize.css"; import "loading-attribute-polyfill"; import "whatwg-fetch"; import NavShowProview from "@components/proview/navShow"; +import MUIThemePreview from "@components/proview/themePreview"; const router = createBrowserRouter([ { path: "/", @@ -30,7 +31,7 @@ const router = createBrowserRouter([ { //默认页面 index: true, - element: , + element: , }, { // video瀑布流展示页面 @@ -52,7 +53,9 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( - + + + diff --git a/src/routers/layout/header.tsx b/src/routers/layout/header.tsx index fcd263d..b15a294 100644 --- a/src/routers/layout/header.tsx +++ b/src/routers/layout/header.tsx @@ -1,17 +1,29 @@ import SearchSharpIcon from "@mui/icons-material/SearchSharp"; import { Form } from "react-router-dom"; +import { Unstable_Grid2 as Grid } from "@mui/material"; import Header_Nav from "./nav"; import styles from "./layout.module.less"; import { useFocus } from "./hooks"; +import RouterNav from "./routernav"; +import LOGO from "./logo"; +import RightSide from "./rightSide"; export default function Header() { return (
- + +
); } +//todo 换掉header //todo 添加搜索 function Search() { const { focused, bind } = useFocus(); diff --git a/src/routers/layout/layout.module.less b/src/routers/layout/layout.module.less index 9dad787..43a98fc 100644 --- a/src/routers/layout/layout.module.less +++ b/src/routers/layout/layout.module.less @@ -74,4 +74,22 @@ background-color: #f1f2f3; } } +} + +.header { + max-width: 1440px; + margin: 0 auto; + display: flex; + align-items: center; + + .nav { + flex: 1; + display: flex; + justify-content: space-between; + + &-right { + display: flex; + align-items: center; + } + } } \ No newline at end of file diff --git a/src/routers/layout/logo.tsx b/src/routers/layout/logo.tsx new file mode 100644 index 0000000..b73acac --- /dev/null +++ b/src/routers/layout/logo.tsx @@ -0,0 +1,16 @@ +import { Link } from "@mui/material"; + +export default function LOGO() { + return ( +
+ + EOEfans + +
+ ); +} diff --git a/src/routers/layout/nav/index.tsx b/src/routers/layout/nav/index.tsx index dfa2291..dd5d518 100644 --- a/src/routers/layout/nav/index.tsx +++ b/src/routers/layout/nav/index.tsx @@ -2,7 +2,6 @@ import { Chip, Stack } from "@mui/material"; import { useInView } from "react-intersection-observer"; import SegmentIcon from "@mui/icons-material/Segment"; import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen"; -import { NavLink } from "react-router-dom"; import { DndContext, closestCenter, @@ -18,12 +17,7 @@ import { restrictToParentElement } from "@dnd-kit/modifiers"; import styles from "./nav.module.less"; import { FC, useState, useMemo, memo } from "react"; import { Flipped } from "react-flip-toolkit"; -import { - NavListItemType, - NavRouterItemType, - NavQueryItemType, - useNavList, -} from "./tools"; +import { NavQueryItemType, useNavList } from "./tools"; import { setLocalstorage } from "../tools"; import { useTagsSelected } from "@components/proview/tagSelect"; import { useNavShowed } from "../../../components/proview/navShow"; @@ -129,7 +123,7 @@ const NavInViewItem = () => { ); }; -const NavItem: FC = memo((props) => { +const NavItem: FC = memo((props) => { const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: props.id }); const style = { @@ -139,31 +133,12 @@ const NavItem: FC = memo((props) => { return (
- {props.type === "router" ? ( - - ) : ( - - )} +
); }); -const NavRouterChipItem: FC = memo((props) => ( - - `${styles["navlink"]} ${isActive ? styles["navlink-active"] : ""}` - } - > - - -)); - const NavTagChipItem: FC = memo((props) => { const [clicked, setClick] = useState(false), { handerAddTag, handerDeleteTag } = useTagsSelected(); diff --git a/src/routers/layout/nav/tools.ts b/src/routers/layout/nav/tools.ts index 956d2ba..bf967a3 100644 --- a/src/routers/layout/nav/tools.ts +++ b/src/routers/layout/nav/tools.ts @@ -3,17 +3,20 @@ import { useMemo, useState } from "react"; import { getLocalStorage } from "../tools"; //todo 将数据加密 export function useNavList(): [ - NavListItemType[], - React.Dispatch> + NavQueryItemType[], + React.Dispatch> ] { const nav_ok_lists = useMemo(() => { - const local_lists = getLocalStorage("navTagLists", [] as NavListItemType[]); + const local_lists = getLocalStorage( + "navTagLists", + [] as NavQueryItemType[] + ); if (PassNavList(local_lists)) { return local_lists; } - return nav_tag_list; + return query_nav_list; }, []); - const [navLists, setLists] = useState(nav_ok_lists); + const [navLists, setLists] = useState(nav_ok_lists); return [navLists, setLists]; } // 判断类型 @@ -30,8 +33,8 @@ function checkPropertyType( ) { return input.hasOwnProperty(property) && typeof input[property] === type; } -//检测从localstorage提取的list是否满足条件 -function PassNavList(lists: NavListItemType[]) { +//检测从localstorage提取的querylist是否满足条件 +function PassNavList(lists: NavQueryItemType[]) { if ( lists.length > 0 && lists.every((item) => { @@ -93,92 +96,98 @@ export type NavQueryItemType = { cancelable: boolean; }; export type NavListItemType = NavQueryItemType | NavRouterItemType; - const nav_tag_list = [ - { - type: "router", - pathname: "photo", - name: "图片", - }, - { - type: "router", - pathname: "video", - name: "视频", - }, - { - type: "query", - query: "所有二创", - queryType: "q", - queryString: "", - }, - { - type: "query", - query: "露早", - queryType: "q", - queryString: "露早", - }, - { - type: "query", - query: "柚恩", - queryType: "q", - queryString: "柚恩", - }, - { - type: "query", - query: "莞儿", - queryType: "q", - queryString: "莞儿", - }, - { - type: "query", - query: "米诺", - queryType: "q", - queryString: "米诺", - }, - { - type: "query", - query: "虞莫", - queryType: "q", - queryString: "虞莫", - }, - { - type: "query", - query: "动画分区", - queryType: "tname", - queryString: "animation", - }, - { - type: "query", - query: "音乐分区", - queryType: "tname", - queryString: "music", - }, - { - type: "query", - query: "舞蹈分区", - queryType: "tname", - queryString: "dance", - }, - { - type: "query", - query: "游戏分区", - queryType: "tname", - queryString: "delicacy", - }, - { - type: "query", - query: "鬼畜分区", - queryType: "tname", - queryString: "guichu", - }, - { - type: "query", - query: "其他分区", - queryType: "tname", - queryString: "other", - }, -].map((item) => ({ - ...item, - id: nanoid(3), - cancelable: false, -})) as NavListItemType[]; + { + type: "router", + pathname: "photo", + name: "图片", + }, + { + type: "router", + pathname: "video", + name: "视频", + }, + { + type: "query", + query: "所有二创", + queryType: "q", + queryString: "", + }, + { + type: "query", + query: "露早", + queryType: "q", + queryString: "露早", + }, + { + type: "query", + query: "柚恩", + queryType: "q", + queryString: "柚恩", + }, + { + type: "query", + query: "莞儿", + queryType: "q", + queryString: "莞儿", + }, + { + type: "query", + query: "米诺", + queryType: "q", + queryString: "米诺", + }, + { + type: "query", + query: "虞莫", + queryType: "q", + queryString: "虞莫", + }, + { + type: "query", + query: "动画分区", + queryType: "tname", + queryString: "animation", + }, + { + type: "query", + query: "音乐分区", + queryType: "tname", + queryString: "music", + }, + { + type: "query", + query: "舞蹈分区", + queryType: "tname", + queryString: "dance", + }, + { + type: "query", + query: "游戏分区", + queryType: "tname", + queryString: "delicacy", + }, + { + type: "query", + query: "鬼畜分区", + queryType: "tname", + queryString: "guichu", + }, + { + type: "query", + query: "其他分区", + queryType: "tname", + queryString: "other", + }, + ].map((item) => ({ + ...item, + id: nanoid(3), + cancelable: false, + })) as NavListItemType[], + query_nav_list = nav_tag_list.filter( + (item) => item.type === "query" + ) as NavQueryItemType[]; + +export const router_nav_list = nav_tag_list.filter( + (item) => item.type === "router" +) as NavRouterItemType[]; diff --git a/src/routers/layout/rightSide/index.tsx b/src/routers/layout/rightSide/index.tsx new file mode 100644 index 0000000..cd4f28a --- /dev/null +++ b/src/routers/layout/rightSide/index.tsx @@ -0,0 +1,13 @@ +import { Avatar } from "@mui/material"; + +export default function RightSide() { + return ( + + Data + + ); +} diff --git a/src/routers/layout/routernav/index.tsx b/src/routers/layout/routernav/index.tsx new file mode 100644 index 0000000..0aa1f0d --- /dev/null +++ b/src/routers/layout/routernav/index.tsx @@ -0,0 +1,29 @@ +import { Button, ButtonGroup, Stack } from "@mui/material"; +import { useMemo } from "react"; +import { NavLink } from "react-router-dom"; +import { useRouterList } from "./tools"; + +export default function RouterNav() { + const routerlists = useRouterList(), + routerRes = useMemo( + () => + routerlists.map((item) => ( + + + + )), + [routerlists] + ); + return ( + + + {routerRes} + + + ); +} diff --git a/src/routers/layout/routernav/tools.ts b/src/routers/layout/routernav/tools.ts new file mode 100644 index 0000000..401cab2 --- /dev/null +++ b/src/routers/layout/routernav/tools.ts @@ -0,0 +1,6 @@ +import { NavRouterItemType, router_nav_list } from "../nav/tools"; +import { useState } from "react"; +export function useRouterList(): NavRouterItemType[] { + const [list, _] = useState(router_nav_list); + return list; +} diff --git a/src/routers/video/item/index.tsx b/src/routers/video/item/index.tsx index 230e5ea..2d8bd37 100644 --- a/src/routers/video/item/index.tsx +++ b/src/routers/video/item/index.tsx @@ -33,7 +33,7 @@ export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({ "coin", "share", "like", - "updated_at", + "pubdate", "danmaku", "duration" )} @@ -46,7 +46,7 @@ export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({ data, "title", "name", - "updated_at", + "pubdate", "bvid", "coin", "favorite", @@ -57,3 +57,4 @@ export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({ ); }; +//todo 修改卡片样式 diff --git a/src/routers/video/item/videoinfo.tsx b/src/routers/video/item/videoinfo.tsx index 49535ef..9e2296a 100644 --- a/src/routers/video/item/videoinfo.tsx +++ b/src/routers/video/item/videoinfo.tsx @@ -9,19 +9,9 @@ import { VideoRouterImageCardType } from "../videotype"; import { BiliIcon, CoinIcon } from "./icon"; import styles from "./item.module.less"; export const VideoInfo: FC< - Pick< - VideoRouterImageCardType, - | "title" - | "name" - | "updated_at" - | "bvid" - | "coin" - | "favorite" - | "like" - | "face" - > + Pick > = (props) => { - const { title, name, bvid, updated_at, coin, like, favorite, face } = props; + const { title, name, bvid, pubdate, face } = props; const matchsmSize = useScreenMatchSize("sm"); return (
@@ -42,9 +32,9 @@ export const VideoInfo: FC<
{name} - {matchsmSize && {getrealtiveTime(updated_at * 1000)}} + {matchsmSize && {getrealtiveTime(pubdate * 1000)}} - {matchsmSize && ( + {/* {matchsmSize && (
{" "} @@ -58,7 +48,7 @@ export const VideoInfo: FC< {getFixedNumber(favorite)}
- )} + )} */}
diff --git a/src/routers/video/masonry.tsx b/src/routers/video/masonry.tsx index 7e1fc19..ba00764 100644 --- a/src/routers/video/masonry.tsx +++ b/src/routers/video/masonry.tsx @@ -41,7 +41,7 @@ export default function VideoMasonry(props: { q?: string }) { "coin", "share", "like", - "updated_at", + "pubdate", "danmaku", "duration", "favorite", diff --git a/src/routers/video/videotype.ts b/src/routers/video/videotype.ts index bf86b73..3ef6d90 100644 --- a/src/routers/video/videotype.ts +++ b/src/routers/video/videotype.ts @@ -20,7 +20,7 @@ export type VideoRouterImageCardType = Pick< | "coin" | "share" | "like" - | "updated_at" + | "pubdate" | "danmaku" | "duration" | "favorite" diff --git a/tsconfig.json b/tsconfig.json index 7e4915c..b40f0d1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -20,7 +20,8 @@ "@utils/*": ["src/utils/*"], "@components/*": ["src/components/*"], "@store/*": ["src/store/*"], - "@routers/*": ["src/routers/*"] + "@routers/*": ["src/routers/*"], + "@assets/*": ["src/assets/*"] } }, "include": ["src"] diff --git a/vite.config.ts b/vite.config.ts index b9a1044..0681cf1 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -15,6 +15,7 @@ export default defineConfig({ "@components": path.resolve(__dirname, "src/components"), "@store": path.resolve(__dirname, "src/store"), "@routers": path.resolve(__dirname, "src/routers"), + "@assets": path.resolve(__dirname, "src/assets"), }, }, plugins: [