(
+ size_list.reduce((pre, size: Breakpoint) => {
+ //@ts-ignore
+ pre[size] = false;
+ return pre;
+ }, {} as ScreenContextType)
+);
+type ScreenContextType = {
+ lg: boolean;
+ md: boolean;
+ sm: boolean;
+ xs: boolean;
+};
+type ProviewProps = {
+ children: ReactElement;
+};
+
+const ScreenProview = ({ children }: ProviewProps) => {
+ const ScreenSize: ScreenContextType = size_list.reduce((preObj, size) => {
+ //@ts-ignore
+ preObj[size] = useScreenMatchSize(size);
+ return preObj;
+ }, {} as ScreenContextType);
+ return (
+
+ {children}
+
+ );
+};
+export const useScreenSize = () => {
+ return useContext(ScreenContext);
+};
+
+export default ScreenProview;
diff --git a/src/main.tsx b/src/main.tsx
index 72d3cbf..c135d60 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -5,10 +5,15 @@ import VideoPage from "./routers/video";
import "./index.less";
import "intersection-observer";
import "./normalize.css";
-const ReadPage = lazy(() => import("./routers/read")),
- Layout = lazy(() => import("./routers/layout")),
- PhotoPage = lazy(() => import("./routers/photo")),
- ErrorPage = lazy(() => import("./routers/error"));
+import ReadPage from "./routers/read";
+import Layout from "./routers/layout";
+import PhotoPage from "./routers/photo";
+import ErrorPage from "./routers/error";
+import ScreenProview from "@components/proview/screenSize";
+// const ReadPage = lazy(() => import("./routers/read")),
+// Layout = lazy(() => import("./routers/layout")),
+// PhotoPage = lazy(() => import("./routers/photo")),
+// ErrorPage = lazy(() => import("./routers/error"));
const router = createBrowserRouter([
{
path: "/",
@@ -50,9 +55,11 @@ const router = createBrowserRouter([
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
//
-
+ //
+
-
+
+ //
//
);
diff --git a/src/routers/layout/layout.module.less b/src/routers/layout/layout.module.less
index 9b18792..620130b 100644
--- a/src/routers/layout/layout.module.less
+++ b/src/routers/layout/layout.module.less
@@ -96,8 +96,7 @@
@itemMarginHalfWidth: 8px;
@itemMarginHalfHeight: 4px;
// grid布局
- grid-template-columns: repeat(auto-fill, @itemWidth+2*@itemMarginHalfWidth);
- transition: display 2s;
+ grid-template-columns: repeat(auto-fit, minmax(@itemWidth+2*@itemMarginHalfWidth, 1fr));
&>* {
margin: @itemMarginHalfHeight @itemMarginHalfWidth;
diff --git a/src/routers/video/masonry.tsx b/src/routers/video/masonry.tsx
index 91841f8..f95a9af 100644
--- a/src/routers/video/masonry.tsx
+++ b/src/routers/video/masonry.tsx
@@ -8,6 +8,7 @@ import ImageShouldResizeProview from "@components/proview/imageSize";
import { VideoRouterImageCard } from "./masonryItem";
import { Skeleton } from "@mui/material";
import { nanoid } from "nanoid";
+import { useScreenSize } from "../../components/proview/screenSize";
/**
* @description 该组件负责渲染视频图片的瀑布流
*/
@@ -24,16 +25,17 @@ export default function VideoMasonry(props: any) {
page,
...resProps,
}),
- data = res.data.result,
- url_pic = data.map(
- (item) => `${item.pic}@672w_378h_1c_!web-search-common-cover`
- ),
- url_face = data.map((item) => item.face);
- const imageSizelists = await concurrencyRequest(
- [...url_pic, ...url_face],
- getImageSize,
- 10
- );
+ data = res.data.result;
+ // ,
+ // url_pic = data.map(
+ // (item) => `${item.pic}@672w_378h_1c_!web-search-common-cover`
+ // ),
+ // url_face = data.map((item) => item.face);
+ // const imageSizelists = await concurrencyRequest(
+ // [...url_pic, ...url_face],
+ // getImageSize,
+ // 10
+ // );
setLists((lists) => [
...lists,
...data.map((item, index) => {
@@ -62,7 +64,7 @@ export default function VideoMasonry(props: any) {
id: nanoid(4),
observer: true,
callback: (inView: boolean) => {
- fetchHandler(page + 1, ...resProps);
+ // fetchHandler(page + 1, ...resProps);
},
};
}
@@ -77,7 +79,12 @@ export default function VideoMasonry(props: any) {
= ({
data,
@@ -67,6 +67,7 @@ const VideoData: FC<
Pick
> = (props) => {
const { view, danmaku, duration } = props;
+ const { sm } = useScreenSize();
return (
@@ -74,10 +75,12 @@ const VideoData: FC<
{getFixedNumber(view)}
-
-
- {getFixedNumber(danmaku)}
-
+ {sm && (
+
+
+ {getFixedNumber(danmaku)}
+
+ )}
{getVideoTime(duration)}
@@ -97,8 +100,7 @@ const VideoInfo: FC<
>
> = (props) => {
const { title, name, bvid, updated_at, coin, like, favorite, face } = props;
- const theme = useTheme();
- const matchesPhone = useMediaQuery(theme.breakpoints.up("sm"));
+ const matchsmSize = useScreenMatchSize("sm");
return (
@@ -112,13 +114,13 @@ const VideoInfo: FC<
- {matchesPhone &&
}
+ {matchsmSize &&
}
{name}
- {matchesPhone &&
{getrealtiveTime(updated_at * 1000)}}
+ {matchsmSize &&
{getrealtiveTime(updated_at * 1000)}}
- {matchesPhone && (
+ {matchsmSize && (
{" "}
diff --git a/src/utils/fetch/index.ts b/src/utils/fetch/index.ts
index 5a62104..c754362 100644
--- a/src/utils/fetch/index.ts
+++ b/src/utils/fetch/index.ts
@@ -11,11 +11,11 @@ import { IFetchVideoParams, RFetchVideoRes } from "./fetchtype";
export function fetchVideos(
params: IFetchVideoParams
): Promise {
- // return new Promise((resolve) => {
- // setTimeout(() => {
- // resolve(videoJson);
- // }, 1000);
- // });
+ return new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videoJson);
+ }, 1000);
+ });
return fetch(
`/v1/video-interface/advanced-search?order=${params.order}&page=${
params.page
diff --git a/src/utils/hooks/match.ts b/src/utils/hooks/match.ts
new file mode 100644
index 0000000..569c53b
--- /dev/null
+++ b/src/utils/hooks/match.ts
@@ -0,0 +1,18 @@
+import { Breakpoint, useMediaQuery, useTheme } from "@mui/material";
+
+/**
+ * @description 获知当前屏幕处于哪种大小
+ */
+export const useScreenMatchSize = (size: Breakpoint) => {
+ const theme = useTheme();
+ const matchSize = useMediaQuery(theme.breakpoints.up(size));
+ return matchSize;
+};
+//个人主页头像大小
+`@240w_240h_1c_1s.webp`;
+//移动平台首页图片大小
+`@480w_270h_1c`;
+//电脑平台首页图片大小
+`@672w_378h_1c_!web-search-common-cover`;
+//首页up头像大小
+`@96w_96h_1s.webp`;
diff --git a/vite.config.ts b/vite.config.ts
index a804d36..40ef216 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,21 +12,34 @@ export default defineConfig({
"@utils": path.resolve(__dirname, "src/utils"),
"@components": path.resolve(__dirname, "src/components"),
"@store": path.resolve(__dirname, "src/store"),
+ "@routers": path.resolve(__dirname, "src/routers"),
},
},
plugins: [react(), visualizer(), viteCompression()],
build: {
target: "es2015",
minify: "esbuild",
- // rollupOptions: {
- // output: {
- // manualChunks(id) {
- // if (id.includes("node_modules")) {
- // return "vendor";
- // }
- // },
- // },
- // },
+ rollupOptions: {
+ output: {
+ manualChunks: {
+ react: ["react", "react-dom"],
+ "react-router": ["react-router-dom"],
+ lib: [
+ "@mui/icons-material",
+ "@mui/lab",
+ "@mui/material",
+ "@emotion/react",
+ "@emotion/styled",
+ ],
+ "dnd-tool": [
+ "@dnd-kit/core",
+ "@dnd-kit/modifiers",
+ "@dnd-kit/sortable",
+ "@dnd-kit/utilities",
+ ],
+ },
+ },
+ },
},
server: {
proxy: {