+ {children}
+
,
+ document.body
+ ));
+ return <>{visible && modal};
+};
+
+type ModalType = {
+ isNoScroll: boolean;
+ children: ReactElement;
+ visible: boolean;
+ closeModal: (event: any) => void;
+};
+export default memo(function Modal(props: ModalType) {
+ const { isNoScroll = false, children, ...resProps } = props;
+ useEffect(() => {
+ if (isNoScroll) {
+ disableScroll();
+ return enableScroll;
+ }
+ }, [isNoScroll]);
+ //@ts-ignore
+ return <__Click_Modal__ {...resProps}>{children};
+});
+
+type useModalConfigOutputType = {
+ visible: boolean;
+ isNoScroll: boolean;
+ closeModal: () => void;
+};
+
+export const useModalConfig = (
+ _isvisible: boolean,
+ _isNoScroll: boolean
+): useModalConfigOutputType => {
+ const [isvisible, setVisible] = useState(_isvisible || false);
+ const [isNoScroll, setScroll] = useState(_isNoScroll || false);
+ const clickFunc = () => {
+ setScroll(!isNoScroll);
+ setVisible(!isvisible);
+ };
+ return { visible: isvisible, isNoScroll, closeModal: clickFunc };
+};
diff --git a/src/components/modal/modal.module.less b/src/components/modal/modal.module.less
new file mode 100644
index 0000000..5801b68
--- /dev/null
+++ b/src/components/modal/modal.module.less
@@ -0,0 +1,11 @@
+/* modal.less */
+.modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 1;
+ min-height: 100vh;
+ background-color: rgba(0, 0, 0, 0.7);
+}
\ No newline at end of file
diff --git a/src/components/modal/scrollFn.ts b/src/components/modal/scrollFn.ts
new file mode 100644
index 0000000..5524a8b
--- /dev/null
+++ b/src/components/modal/scrollFn.ts
@@ -0,0 +1,22 @@
+//@ts-nocheck
+//阻止默认行为
+export function preventDefault(e) {
+ // console.log({ e });
+ e.preventDefault();
+}
+
+export function enableScroll() {
+ const wheelEvent =
+ "onwheel" in document.createElement("div") ? "wheel" : "mousewheel";
+ window.removeEventListener("DOMMouseScroll", preventDefault, false);
+ window.removeEventListener(wheelEvent, preventDefault, { passive: false });
+ window.removeEventListener("touchmove", preventDefault, { passive: false });
+}
+
+export function disableScroll() {
+ const wheelEvent =
+ "onwheel" in document.createElement("div") ? "wheel" : "mousewheel";
+ window.addEventListener("DOMMouseScroll", preventDefault, false); // older FF
+ window.addEventListener(wheelEvent, preventDefault, { passive: false }); // modern desktop
+ window.addEventListener("touchmove", preventDefault, { passive: false }); // mobile
+}
diff --git a/src/components/proview/imageSize.tsx b/src/components/proview/imageSize.tsx
deleted file mode 100644
index 70c6ed2..0000000
--- a/src/components/proview/imageSize.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useContext, useState, createContext, useEffect } from "react";
-import { thorttleFn } from "@utils/index";
-import { ReactChildrenType } from "./type";
-export const image_order_width = 200;
-
-const ImageContext = createContext<{ isShouldchangeSize: boolean }>({
- isShouldchangeSize: false,
-});
-
-const ImageShouldResizeProview = ({ children }: ReactChildrenType) => {
- const [isShouldchangeSize, setIs] = useState- 🙇♂️🙇♂️🙇♂️二创图片页还在制作中,敬请期待! -
- ); -} diff --git a/src/routers/photo/index.tsx b/src/routers/photo/index.tsx new file mode 100644 index 0000000..8c32250 --- /dev/null +++ b/src/routers/photo/index.tsx @@ -0,0 +1,9 @@ +import Masonry from "./masonry"; + +export default function PhotoPage() { + return ( + <> +
+ ![]()
+
+
+
+ {images.map((item, index) => (
+
+
+ ))}
+
+
+
+ ![]()
+
+
-
-
- {lists.map((item) => (
-
-
+
+ {lists.map((item) => (
+
);
}
diff --git a/src/routers/video/tools.ts b/src/routers/video/tools.ts
index f69a641..2f3f79e 100644
--- a/src/routers/video/tools.ts
+++ b/src/routers/video/tools.ts
@@ -3,7 +3,7 @@ import { fetchVideos } from "@utils/fetch/index";
import message from "@components/message";
import { Pick } from "@utils/index";
-export const fetchVideohnadler = async (
+export const fetchVideohandler = async (
page: number = 1,
props: VideoRouterMasonryType
) => {
diff --git a/src/routers/video/videotype.ts b/src/routers/video/videotype.ts
index ce56040..cb4f14f 100644
--- a/src/routers/video/videotype.ts
+++ b/src/routers/video/videotype.ts
@@ -3,7 +3,7 @@
*/
import { ImageProps } from "@components/image/imagetype";
import { RFetchVideoRes } from "@utils/fetch/fetchtype";
-import { IFetchVideoParams } from "../../utils/fetch/fetchtype";
+import { IFetchVideoParams } from "@utils/fetch/fetchtype";
/**
* @description video路由瀑布流卡片参数
diff --git a/src/store/loading/index.ts b/src/store/loading/index.ts
index b220a74..f3c2856 100644
--- a/src/store/loading/index.ts
+++ b/src/store/loading/index.ts
@@ -7,6 +7,10 @@ interface LoadingState {
* @description 视频接口是否正在获取
*/
videoIsLoading: boolean;
+ /**
+ * @description 图片接口是否正在获取
+ */
+ photoIsloading: boolean;
}
interface IchangeLoadingItem {
stateName: keyof LoadingState;
@@ -15,13 +19,14 @@ interface IchangeLoadingItem {
const initialState: LoadingState = {
videoIsLoading: true,
+ photoIsloading: true,
};
export const LoadingSlice = createSlice({
name: "loading",
initialState,
reducers: {
/**
- *
+ * @description 修改加载状态，注意因为spa的限制所有每个页面只有一种加载情况
*/
changeLoading: (state, action: PayloadAction
+
+
+ +
-
+
-
+
+ Q: + 为什么界面这么丑？ +
++ A: + web端没有UI捏🙇♂️🙇♂️🙇♂️果咩。 +
+
+ -
+
+ Q: + 如何查找我想看的视频类型？ +
++ A: + + 😩目前只能通过点击下方tag栏进行查询，其中各分区、原创和转载、 + 最新发布和最多播放互斥外其他tag皆满足异或查询。 +
+
+ 🤔tag排序不是固定的，可以使用鼠标或者触摸按住tag半秒后进行移动。 +
+ 🤗可以自定义任何你想要的tag栏顺序，下一次访问也有效。 + +
+ -
+
+ Q: + 露早tag为什么不是应援色？ +
++ A: + + 露早GOGO的应援色为 + + #3dff9e + + ,tag字面显示不明显，所以更换为黑露早形态的 + #A0191D + +
+
+
-
-
- EOEfans-web端
-
-
-
+ EOEfans-web端
+
+
+
);
}
@@ -92,13 +104,12 @@ const H1 = styled("h1")(({ theme }) => ({
},
}));
-//todo 修改logo
-
const Yituo: FC<{
height: number | string;
width: number | string;
}> = ({ height, width }) => (
- EOEfans-web端
-
-
-
-
-
- -
-
- Q:
- 为什么界面这么丑？
-
-
- A:
- web端没有UI捏🙇♂️🙇♂️🙇♂️果咩。
-
-
- -
-
- Q:
- 如何查找我想看的视频类型？
-
-
- A:
-
- 😩目前只能通过点击下方tag栏进行查询，其中各分区、原创和转载、
- 最新发布和最多播放互斥外其他tag皆满足异或查询。
-
- 🤔tag排序不是固定的，可以使用鼠标或者触摸按住tag半秒后进行移动。
-
- 🤗可以自定义任何你想要的tag栏顺序，下一次访问也有效。
-
-
-
- -
-
- Q:
- 露早tag为什么不是应援色？
-
-
- A:
-
- 露早GOGO的应援色为
-
- #3dff9e
-
- ,tag字面显示不明显，所以更换为黑露早形态的
- #A0191D
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
- Q: - 为什么界面这么丑？ -
-- A: - web端没有UI捏🙇♂️🙇♂️🙇♂️果咩。 -
-
- -
-
- Q: - 如何查找我想看的视频类型？ -
-- A: - - 😩目前只能通过点击下方tag栏进行查询，其中各分区、原创和转载、 - 最新发布和最多播放互斥外其他tag皆满足异或查询。 -
-
- 🤔tag排序不是固定的，可以使用鼠标或者触摸按住tag半秒后进行移动。 -
- 🤗可以自定义任何你想要的tag栏顺序，下一次访问也有效。 - -
- -
-
- Q: - 露早tag为什么不是应援色？ -
-- A: - - 露早GOGO的应援色为 - - #3dff9e - - ,tag字面显示不明显，所以更换为黑露早形态的 - #A0191D - -
-
-