diff --git a/package.json b/package.json index dbcec35..60300e7 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "preview": "vite preview" }, "dependencies": { + "@dnd-kit/core": "^6.0.7", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@mui/icons-material": "^5.11.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8f718fc..502e6ca 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2,6 +2,7 @@ lockfileVersion: 5.4 specifiers: '@babel/core': '>=7.0.0 <8.0.0' + '@dnd-kit/core': ^6.0.7 '@emotion/react': ^11.10.5 '@emotion/styled': ^11.10.5 '@faker-js/faker': ^7.6.0 @@ -33,6 +34,7 @@ specifiers: vite-plugin-compression: ^0.5.1 dependencies: + '@dnd-kit/core': 6.0.7_biqbaboplfbrettd7655fr4n2y '@emotion/react': 11.10.5_3grbeiqrb6djg67fiejiqngkdi '@emotion/styled': 11.10.5_pwtpayi7py7ecifctvjbac33ee '@mui/icons-material': 5.11.0_oiuuhmk4wjjpe4qb2sby7usney @@ -270,6 +272,37 @@ packages: '@babel/helper-validator-identifier': 7.19.1 to-fast-properties: 2.0.0 + /@dnd-kit/accessibility/3.0.1_react@18.2.0: + resolution: {integrity: sha512-HXRrwS9YUYQO9lFRc/49uO/VICbM+O+ZRpFDe9Pd1rwVv2PCNkRiTZRdxrDgng/UkvdC3Re9r2vwPpXXrWeFzg==} + peerDependencies: + react: '>=16.8.0' + dependencies: + react: 18.2.0 + tslib: 2.4.1 + dev: false + + /@dnd-kit/core/6.0.7_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-qcLBTVTjmLuLqC0RHQ+dFKN5neWmAI56H9xZ+he9WEJEkAvR76YAcz7DSWDJfjErepfG2H3Fkb9lYiX7cPR62g==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + dependencies: + '@dnd-kit/accessibility': 3.0.1_react@18.2.0 + '@dnd-kit/utilities': 3.2.1_react@18.2.0 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + tslib: 2.4.1 + dev: false + + /@dnd-kit/utilities/3.2.1_react@18.2.0: + resolution: {integrity: sha512-OOXqISfvBw/1REtkSK2N3Fi2EQiLMlWUlqnOK/UpOISqBZPWpE6TqL+jcPtMOkE8TqYGiURvRdPSI9hltNUjEA==} + peerDependencies: + react: '>=16.8.0' + dependencies: + react: 18.2.0 + tslib: 2.4.1 + dev: false + /@emotion/babel-plugin/11.10.5_@babel+core@7.20.7: resolution: {integrity: sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==} peerDependencies: diff --git a/src/routers/layout/layout.module.less b/src/routers/layout/layout.module.less index 2beb927..2cdf1ce 100644 --- a/src/routers/layout/layout.module.less +++ b/src/routers/layout/layout.module.less @@ -80,19 +80,66 @@ display: none; } -.navstack { - // width: 500px; - overflow-x: scroll; - scrollbar-width: none; - -ms-overflow-style: none; +.nav { + position: relative; + overflow: hidden; + margin: 10px; + + .navstack { + overflow-x: auto; + scrollbar-width: none; + -ms-overflow-style: none; + @itemWidth: 80px; + @itemMarginHalfWidth: 8px; + @itemMarginHalfHeight: 4px; + // grid布局 + grid-template-columns: repeat(auto-fill, @itemWidth+2*@itemMarginHalfWidth); + transition: display 2s; + + &>* { + margin: @itemMarginHalfHeight @itemMarginHalfWidth; + } + + &[data-showed=true] { + &>span:nth-last-child(2) { + display: none; + } + + &>div:last-child { + position: relative; + } + } - .navlink { - text-decoration: none; + &-filter-tag { + width: @itemWidth; + flex: 0 0 @itemWidth; + } + + .navlink { + text-decoration: none; - &-active>div { - // background-color: ; + &-active>div { + // background-color: ; + } } } + + &-right-show-btn { + justify-content: center; + margin: 0 !important; + position: absolute; + right: 0; + bottom: 0; + height: 40px; + display: flex; + justify-items: center; + align-items: center; + overflow: hidden; + background-color: #fff; + box-shadow: rgb(255 255 255) -11px 0px 12px 0px; + z-index: 1; + cursor: pointer; + } } //todo 写好header \ No newline at end of file diff --git a/src/routers/layout/nav.tsx b/src/routers/layout/nav.tsx index 79d8b03..1ace33e 100644 --- a/src/routers/layout/nav.tsx +++ b/src/routers/layout/nav.tsx @@ -1,4 +1,7 @@ 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 { Outlet, NavLink, @@ -10,7 +13,7 @@ import { } from "react-router-dom"; import { nanoid } from "nanoid"; import styles from "./layout.module.less"; -import { FC, useState } from "react"; +import { FC, forwardRef, useState, useEffect, useMemo } from "react"; const router_lists = [ { @@ -80,9 +83,12 @@ const nav_lists = [ export default function Header_Nav() { //todo 这里存放到context中间去 - return ( - <> - + const { ref, inView } = useInView({ initialInView: true }); + const [showed, setShow] = useState(false); + console.log({ inView }); + const ComRes = useMemo( + () => ( + <> {router_lists.map((router) => ( - + ))} {nav_lists.map((nav) => ( ))} + + ), + [] + ); + return ( +
+ + {ComRes} + +
setShow((showed) => !showed)} + style={{ + display: inView ? "none" : "flex", + }} + > + +
- +
); } const ClickChip: FC<{ label: string }> = (props) => { const [clicked, setClick] = useState(false); return ( + //@ts-ignore setClick((clicked) => !clicked)} /> ); }; +//todo：修复展示更多栏的bug +//todo：改造nav栏，通过拖拽修改排序 diff --git a/src/routers/video/index.tsx b/src/routers/video/index.tsx index de59aa0..62b2716 100644 --- a/src/routers/video/index.tsx +++ b/src/routers/video/index.tsx @@ -1,9 +1,4 @@ import VideoMasonry from "./masonry"; export default function VideoPage() { - return ( - <> -

videopage

- - - ); + return <>{/* */}; } diff --git a/src/routers/video/video.module.less b/src/routers/video/video.module.less index 5e9d584..d686409 100644 --- a/src/routers/video/video.module.less +++ b/src/routers/video/video.module.less @@ -126,7 +126,7 @@ text-overflow: ellipsis; word-break: break-all; - &:not(:last-of-type):after { + &:not(:first-of-type)::before { content: '·'; margin: 0 4px; }