(true);
useMemo(async () => {
await getImageSize(url);
@@ -26,7 +26,7 @@ export default function PhotoCard(props: CardType) {
handlerChangeOpen = () => set((open) => !open);
const modalPorps = { open, images, onClose: handlerChangeOpen, dynamic_id },
url = `${images[0].src}@${250}w.webp`;
- const isLoading = useLoading(url);
+ const isLoading = useImgUrlLoading(url);
return (
({
- padding: "16px 8px 6px",
+ padding: "16px 12px 10px",
borderBottomLeftRadius: "8px",
borderBottomRightRadius: "8px",
- [theme.breakpoints.down("sm")]: {
- padding: "8px 6px 4px",
- },
}));
const SizeSpan = styled("span")(({ theme }) => ({
fontSize: "13px",
diff --git a/src/routers/video/video.module.less b/src/routers/video/video.module.less
index afd3a99..997d778 100644
--- a/src/routers/video/video.module.less
+++ b/src/routers/video/video.module.less
@@ -23,7 +23,7 @@
}
img+div {
- padding: 8px;
+
span {
font-size: 14px !important;
diff --git a/src/store/euWhatLook/index.tsx b/src/store/euWhatLook/index.tsx
new file mode 100644
index 0000000..22d7890
--- /dev/null
+++ b/src/store/euWhatLook/index.tsx
@@ -0,0 +1,85 @@
+/**
+ * 这个状态管理将采用recoil
+ * ps：因为recoil太tm好用了！
+ * pps：但是我不想改原来的状态管理
+ */
+import {
+ atom,
+ selector,
+ selectorFamily,
+ useRecoilState,
+ useRecoilValue,
+ useSetRecoilState,
+} from "recoil";
+import {
+ IFetchEUWhatLookIngParmas,
+ REuWhatLookIngItem,
+ RFetchEUWhatLookIngRes,
+} from "@utils/fetch/eu6type";
+import { fetchEUWhatLookIng } from "@utils/fetch";
+import { useEffect, useState, useCallback } from "react";
+import message from "@components/message";
+const EuFetchParmasState = atom({
+ key: "euFetchParmasKey",
+ default: "online",
+});
+//获取eu接口的当前参数
+export const useGetEuFetchParmas = () => useRecoilValue(EuFetchParmasState);
+//修改eu接口的参数
+export const useSetEuFetchParamas = () => useSetRecoilState(EuFetchParmasState);
+//轮询的atom
+const EuIntervalAtom = atom({
+ key: "EuIntervalAtomKey",
+ default: 0,
+});
+//接口加载情况
+const EuFetchLoading = atom({
+ key: "EuFetchLoadingKey",
+ default: false,
+});
+const EuFetchResSelector = selector({
+ key: "EuFetchParmasSelectorKey",
+ get: async ({ get }) => {
+ const _ = get(EuIntervalAtom);
+ const params = get(EuFetchParmasState);
+ const res = await fetchEUWhatLookIng(params);
+ return res;
+ },
+});
+/**
+ * @description 顶层hooks，自动实现了获取参数、网络请求以及轮询，返回是否正在加载以及数据
+ */
+export const useGetEuData = (IntervalTime = 10000) => {
+ const [data, setData] = useState([]);
+ const params = useRecoilValue(EuFetchParmasState);
+ const [isLoading, handleChangeLoading] = useRecoilState(EuFetchLoading);
+ const fetcherCallback = useCallback(async () => {
+ const res = await fetchEUWhatLookIng(params);
+ if (res.code === -1) {
+ message.info("服务器返回出错，请等待服务器修复");
+ return;
+ }
+ if (res.data.ctime === -1) {
+ message.info("请求时间过长，请检查当前网络情况");
+ return;
+ }
+ const resData = res.data.list;
+ setData(() => resData);
+ if (params === "online") {
+ message.info("已按照观看人数排序");
+ } else {
+ message.info("已按照投稿时间排序");
+ }
+ }, [params, setData]);
+ useEffect(handleChangeLoading.bind(null, true), [params]);
+ useEffect(() => {
+ fetcherCallback().then(() => handleChangeLoading(() => false));
+ }, [params]);
+ // useEffect(() => {
+ // let SetId = setInterval(() => {
+ // fetcherCallback();
+ // }, IntervalTime);
+ // return () => clearInterval(SetId);
+ // }, [params]);
+ return { isLoading, data };
+};
diff --git a/src/utils/fetch/eu6type.ts b/src/utils/fetch/eu6type.ts
new file mode 100644
index 0000000..05e36a2
--- /dev/null
+++ b/src/utils/fetch/eu6type.ts
@@ -0,0 +1,31 @@
+import { RFetchVideoResResult } from "./fetchtype";
+
+type ErrorFetchRes = {
+ message: "not found";
+ code: -1;
+};
+type CustomFetchRes = {
+ code: 0;
+ data: {
+ list: T;
+ ctime: number;
+ };
+};
+/**
+ * 类型太多了，我直接省略一大堆
+ */
+export type REuWhatLookIngItem = Pick<
+ RFetchVideoResResult,
+ "bvid" | "pic" | "title" | "duration"
+> & {
+ owner: Record<"name" | "face", string> & Record<"mid", number>;
+ stat: Record<
+ "view" | "danmaku" | "favorite" | "coin" | "share" | "like",
+ number
+ >;
+ total_number_text: string;
+};
+export type RFetchEUWhatLookIngRes =
+ | CustomFetchRes
+ | ErrorFetchRes;
+export type IFetchEUWhatLookIngParmas = "online" | "pubdate";
diff --git a/src/utils/fetch/fetchtype.ts b/src/utils/fetch/fetchtype.ts
index 238986a..52f66ca 100644
--- a/src/utils/fetch/fetchtype.ts
+++ b/src/utils/fetch/fetchtype.ts
@@ -47,7 +47,7 @@ export interface IFetchVideoParams {
| "other";
}
-interface RFetchVideoResResult {
+export interface RFetchVideoResResult {
/**
* @description 视频的bv号
* @example "BV1dY41127BZ"
diff --git a/src/utils/fetch/index.ts b/src/utils/fetch/index.ts
index 38a872d..10cb404 100644
--- a/src/utils/fetch/index.ts
+++ b/src/utils/fetch/index.ts
@@ -9,9 +9,12 @@ import {
RFetchVideoRes,
IFetchPhotoParams,
} from "./fetchtype";
-import { Host_Url } from "./tool";
+import { EUWhatLookIng_Url, Host_Url } from "./tool";
import { Omit } from "../index";
-
+import { IFetchEUWhatLookIngParmas, RFetchEUWhatLookIngRes } from "./eu6type";
+/**
+ * @description 大部分请求都用这个，除非是eu都在溜什么
+ */
export const BackEndAxios = axios.create({
baseURL: Host_Url,
timeout: 9000,
@@ -25,6 +28,19 @@ export const BackEndAxios = axios.create({
},
],
});
+const EUWhatLookAxios = axios.create({
+ baseURL: EUWhatLookIng_Url,
+ timeout: 10000,
+ transformResponse: [
+ (data) => {
+ try {
+ return JSONBigInt.parse(data);
+ } catch (err) {
+ return data;
+ }
+ },
+ ],
+});
/**
* 后端接口配置
*/
@@ -134,3 +150,42 @@ export async function fetchPhotos(
};
}
}
+
+let EUSource: AbortController | null = null;
+/**
+ * eu都在溜什么的接口
+ */
+export async function fetchEUWhatLookIng(
+ params: IFetchEUWhatLookIngParmas
+): Promise {
+ if (EUSource) {
+ EUSource.abort();
+ }
+ EUSource = new AbortController();
+ try {
+ const res = await EUWhatLookAxios.get(`/rank`, {
+ signal: EUSource.signal,
+ params: {
+ by: params,
+ },
+ });
+ EUSource.abort();
+ return res.data;
+ } catch (err) {
+ if (axios.isAxiosError(err)) {
+ if (err.code === "ERR_CANCELED") {
+ return {
+ code: 0,
+ data: {
+ list: [],
+ ctime: -1,
+ },
+ };
+ }
+ }
+ return {
+ code: -1,
+ message: "not found",
+ };
+ }
+}
diff --git a/src/utils/fetch/tool.ts b/src/utils/fetch/tool.ts
index 708c192..91c2a30 100644
--- a/src/utils/fetch/tool.ts
+++ b/src/utils/fetch/tool.ts
@@ -1,2 +1,7 @@
export const Host_Url = isdev ? "/v1" : `https://api.vtb.link/eoefans-api/v1`;
`https://api.eoe.best/eoefans-api/v1`;
+
+//eu都在溜什么的url
+export const EUWhatLookIng_Url = isdev
+ ? "/eoefans-video-rank/v1"
+ : `https://api.eoefans.com/eoefans-video-rank/v1`;