修改layout

EOEFANS · Jan 13, 2023 · 0d99e23 · 0d99e23
1 parent 1eaab84
commit 0d99e23
Show file tree

Hide file tree

Showing 13 changed files with 70 additions and 72 deletions.
diff --git a/src/index.less b/src/index.less
@@ -7,7 +7,7 @@
 .feedContainer {
     margin: 0 auto;
     padding: 0 8px;
-    max-width: 1200px;
+    max-width: 1440px;
 }
 
 @font-face {

diff --git a/src/main.tsx b/src/main.tsx
@@ -31,7 +31,7 @@ const router = createBrowserRouter([
           {
             //默认页面
             index: true,
-            element: <PhotoPage />,
+            element: <VideoPage />,
           },
           {
             // video瀑布流展示页面

diff --git a/src/routers/layout/header.tsx b/src/routers/layout/header.tsx
@@ -1,6 +1,5 @@
 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";
@@ -11,15 +10,8 @@ export default function Header() {
   return (
     <header className={styles["header"]}>
       <LOGO />
-      <nav className={styles["nav"]}>
-        <RouterNav />
-        <div className={styles["nav-right"]}>
-          <Search />
-          <RightSide />
-        </div>
-      </nav>
-
-      <Header_Nav />
+      <Search />
+      <RightSide />
     </header>
   );
 }

diff --git a/src/routers/layout/index.tsx b/src/routers/layout/index.tsx
@@ -1,10 +1,14 @@
 import { Flipped } from "react-flip-toolkit";
 import { Outlet } from "react-router-dom";
 import Header from "./header";
+import Header_Nav from "./nav";
 export default function Layout() {
   return (
     <>
       <Header />
+      <nav className='feedContainer'>
+        <Header_Nav />
+      </nav>
       <Flipped flipId={"list"} spring={"veryGentle"}>
         <main>
           <section

diff --git a/src/routers/layout/layout.module.less b/src/routers/layout/layout.module.less
@@ -81,15 +81,6 @@
     margin: 0 auto;
     display: flex;
     align-items: center;
+    justify-content: space-between;
 
-    .nav {
-        flex: 1;
-        display: flex;
-        justify-content: space-between;
-
-        &-right {
-            display: flex;
-            align-items: center;
-        }
-    }
 }
diff --git a/src/routers/layout/nav/index.tsx b/src/routers/layout/nav/index.tsx
@@ -20,11 +20,10 @@ import { Flipped } from "react-flip-toolkit";
 import { NavQueryItemType, useNavList } from "./tools";
 import { setLocalstorage } from "../tools";
 import { useTagsSelected } from "@components/proview/tagSelect";
-import { useNavShowed } from "../../../components/proview/navShow";
+import { useNavShowed } from "@components/proview/navShow";
 export default function Header_Nav() {
   const [navLists, setLists] = useNavList();
   //tag区是否展开
-  // const [showed, setShow] = useState(false);
   const { showed } = useNavShowed();
   //拖拽事件绑定
   const sensors = useSensors(
@@ -98,7 +97,7 @@ export default function Header_Nav() {
 const NavInViewItem = () => {
   //最后一个span是否可见
   const { ref, inView } = useInView({ initialInView: true });
-  const { handlerChangeShow } = useNavShowed();
+  const { handlerChangeShow, showed } = useNavShowed();
   return (
     <>
       <span
@@ -116,7 +115,11 @@ const NavInViewItem = () => {
             display: inView ? "none" : "flex",
           }}
         >
-          <SegmentIcon fontSize='medium' />
+          {showed ? (
+            <CloseFullscreenIcon fontSize='medium' />
+          ) : (
+            <SegmentIcon fontSize='medium' />
+          )}
         </div>
       </Flipped>
     </>
@@ -164,4 +167,3 @@ const NavTagChipItem: FC<NavQueryItemType> = memo((props) => {
 });
 //todo：修复展示更多栏的bug
 //todo：拆分组件
-//todo：点击事件后修改icon
diff --git a/src/routers/layout/nav/tools.ts b/src/routers/layout/nav/tools.ts
@@ -1,7 +1,6 @@
 import { nanoid } from "nanoid";
 import { useMemo, useState } from "react";
 import { getLocalStorage } from "../tools";
-//todo 将数据加密
 export function useNavList(): [
   NavQueryItemType[],
   React.Dispatch<React.SetStateAction<NavQueryItemType[]>>

diff --git a/src/routers/layout/rightSide/index.tsx b/src/routers/layout/rightSide/index.tsx
@@ -1,13 +1,5 @@
 import { Avatar } from "@mui/material";
 
 export default function RightSide() {
-  return (
-    <Avatar
-      sx={{
-        marginLeft: "auto",
-      }}
-    >
-      Data
-    </Avatar>
-  );
+  return <Avatar>App</Avatar>;
 }
diff --git a/src/routers/video/item/icon.tsx b/src/routers/video/item/icon.tsx
@@ -27,3 +27,36 @@ export const BiliIcon: FC<{
     ></path>
   </svg>
 );
+
+export const UPIcon: FC<{
+  height: number | string;
+  width?: number | string;
+  color?: string;
+  title: string;
+}> = ({ height, width = height, color = "#fff", title }) => (
+  <svg width={width} height={height} viewBox='0 0 32 16'>
+    <g>
+      <title>{title}</title>
+      <g>
+        <defs transform='translate(-0.125002 0) translate(-0.125002 -3.50005) translate(-0.250003 -0.875012) translate(3.62505 0.375005) translate(-16.5001 0) translate(0 -13.0001) translate(46 34.5) scale(0.718746 0.677774) translate(-46 -34.5) translate(1.65244 6.37735) scale(0.62608 0.39753) translate(-1.65244 -6.37735) translate(5.70947 19.6703) scale(1.02315 1) translate(-5.70947 -19.6703) translate(65.882 19.6703) scale(1.04525 1.09279) translate(-65.882 -19.6703) translate(3.59401 17.685) scale(1.01299 1.10378) translate(-3.59401 -17.685)'>
+          <clipPath id='svg_9'>
+            <rect height='49' width='63' y='-18' x='-7' />
+          </clipPath>
+        </defs>
+        <g transform='translate(-6 1)' clipPath='url(#svg_9)'>
+          <path
+            stroke='#D9D9D9'
+            fillRule='evenodd'
+            fill='none'
+            strokeMiterlimit='8'
+            strokeWidth='1.33333'
+            d='m7.30751,0.74584c0,-0.562 0.68339,-1.01758 1.52641,-1.01758l26.19677,0c0.84302,0 1.52644,0.45559 1.52644,1.01758l0,12.58943c0,0.56201 -0.68342,1.01761 -1.52644,1.01761l-26.19677,0c-0.84303,0 -1.52641,-0.45561 -1.52641,-1.01761l0,-12.58943z'
+          />
+        </g>
+      </g>
+      <text stroke='#D9D9D9' fontSize='12' y='12' x='8' strokeWidth='0.5'>
+        UP
+      </text>
+    </g>
+  </svg>
+);
diff --git a/src/routers/video/item/index.tsx b/src/routers/video/item/index.tsx
@@ -57,4 +57,5 @@ export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({
     </section>
   );
 };
-//todo 修改卡片样式
+//todo 传统的两行有兼容问题，修改
+//todo 使用redux替换preview
diff --git a/src/routers/video/item/item.module.less b/src/routers/video/item/item.module.less
@@ -3,10 +3,6 @@
     display: flex;
     flex-flow: column nowrap;
 
-    // &>:first-child {
-    //     flex: 1;
-    // }
-
     .video-data {
         transition: opacity .3s linear;
 
@@ -83,6 +79,10 @@
                 margin-left: 5px;
             }
 
+            &>svg {
+                flex-shrink: 0;
+            }
+
             &-desc {
                 flex: 1;
                 font-size: 13px;
@@ -119,9 +119,7 @@
                     }
 
                     &>span {
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        word-break: break-all;
+
 
                         &:not(:first-of-type)::before {
                             content: '·';

diff --git a/src/routers/video/item/videodata.tsx b/src/routers/video/item/videodata.tsx
@@ -1,5 +1,5 @@
 import { useScreenSize } from "@components/proview/screenSize";
-import SlowMotionVideoSharpIcon from "@mui/icons-material/SlowMotionVideoSharp";
+import SlideshowIcon from "@mui/icons-material/Slideshow";
 import SubjectSharpIcon from "@mui/icons-material/SubjectSharp";
 import getFixedNumber from "@utils/number";
 import { getVideoTime } from "@utils/time";
@@ -15,12 +15,20 @@ export const VideoData: FC<
     <div className={styles["video-data"]}>
       <div className={styles["video-data-left"]}>
         <span title='播放量'>
-          <SlowMotionVideoSharpIcon fontSize='small' />
+          <SlideshowIcon
+            sx={{
+              fontSize: "18px",
+            }}
+          />
           {getFixedNumber(view)}
         </span>
         {sm && (
           <span title='弹幕数'>
-            <SubjectSharpIcon fontSize='small' />
+            <SubjectSharpIcon
+              sx={{
+                fontSize: "18px",
+              }}
+            />
             {getFixedNumber(danmaku)}
           </span>
         )}

diff --git a/src/routers/video/item/videoinfo.tsx b/src/routers/video/item/videoinfo.tsx
@@ -1,12 +1,9 @@
 import { Avatar, Link, styled } from "@mui/material";
-import ThumbUpSharpIcon from "@mui/icons-material/ThumbUpSharp";
-import FavoriteSharpIcon from "@mui/icons-material/FavoriteSharp";
 import { useScreenMatchSize } from "@utils/hooks/match";
-import getFixedNumber from "@utils/number";
 import getrealtiveTime from "@utils/time";
 import { FC } from "react";
 import { VideoRouterImageCardType } from "../videotype";
-import { BiliIcon, CoinIcon } from "./icon";
+import { UPIcon } from "./icon";
 import styles from "./item.module.less";
 export const VideoInfo: FC<
   Pick<VideoRouterImageCardType, "title" | "name" | "pubdate" | "bvid" | "face">
@@ -24,31 +21,12 @@ export const VideoInfo: FC<
         <DataP title={title}>{title}</DataP>
       </Link>
       <div className={styles["video-up"]}>
-        {matchsmSize ? (
-          <Avatar alt={name} src={`${face}@96w_96h_1s.webp`} />
-        ) : (
-          <BiliIcon height={18} color='grey' />
-        )}
+        <UPIcon height={16} width={32} title={`芝士${name.slice(0, 2)}`} />
         <div className={styles["video-up-desc"]}>
           <Link underline='none' color='inherit'>
             <span title={name}>{name}</span>
             {matchsmSize && <span>{getrealtiveTime(pubdate * 1000)}</span>}
           </Link>
-          {/* {matchsmSize && (
-            <div className={styles["video-up-desc-data"]}>
-              <span title='点赞数'>
-                <ThumbUpSharpIcon fontSize='small' htmlColor='#707070' />{" "}
-                {getFixedNumber(like)}
-              </span>
-              <span title='硬币数'>
-                <CoinIcon height={"1.25rem"} /> {getFixedNumber(coin)}
-              </span>
-              <span title='收藏数'>
-                <FavoriteSharpIcon fontSize='small' htmlColor='#707070' />{" "}
-                {getFixedNumber(favorite)}
-              </span>
-            </div>
-          )} */}
         </div>
       </div>
     </div>