+
+ )}
+
+ );
+};
+
+export const ImportTantInfo = () => (
+ <>
+
+ 征集小队长生贺视频
+
+
+ );
+}
+
+const LGRouterListAndQA = () => {
+ const [anchorEl, setAnchorEl] = React.useState
+ {lg &&
+
+
+
+
+
+ );
+};
+export const AboutUSButton = () => {
const [open, set] = useState(false);
const [shouldShowNews, handlerReadedNews] = useCheckQANews();
- const handlerClick = () => {
+ const handlerClick = (event: React.MouseEvent
-
- EOEfans-web端
-
-
- void} />
+
+ );
+};
+
+const useRouterMatchWithDefaultRouter = (urls: string[]) => {
+ const lists = urls.map((item) => useMatch(item));
+ return lists.some((item) => item !== null);
+};
+const RouterListAndQA = () => {
+ const isVideoPage = useRouterMatchWithDefaultRouter(["/", "/video"]),
+ isPhotoPage = useRouterMatchWithDefaultRouter(["/photo"]),
+ isActive = (label: string) => {
+ if (
+ (label === "视频" && isVideoPage) ||
+ (label === "图片" && isPhotoPage)
+ ) {
+ return true;
+ }
+ return false;
+ };
+ return (
+ void }> = (
@@ -25,142 +26,122 @@ export const Explain: FC<{ open: boolean; handlerClick: () => void }> = (
);
-export const H1 = styled("h1")(({ theme }) => ({
- fontSize: "24px",
- [theme.breakpoints.down("sm")]: {
- fontSize: "15px",
+const QALists: { question: ReactElement; answer: ReactElement }[] = [
+ {
+ question: <>露早tag为什么不是应援色？,
+ answer: (
+ <>
+ 露早GOGO的应援色为
+
+ #3dff9e
+
+ ,tag字面显示不明显，所以更换为黑露早形态的
+ #A0191D
+
+ ),
+ },
+ {
+ question: <>如何进行用户反馈？,
+ answer: (
+ <>
+ 请前往
+
+ eoefans反馈
+
+
+ ),
+ },
+ {
+ question: <>图片页图片太小了？,
+ answer: (
+ <>
+ 图片页可点击图片进入放大镜模式，支持手势返回和空白处返回；可使用双指放大对图片大小进行调整。
+
+ ),
},
-}));
+ {
+ question: <>搜索没有想要的结果？,
+ answer: (
+ <>
+ 目前搜索仅支持全字匹配，请确保输入信息完整。另搜索结果已将某些视频过滤。
+
+ ),
+ },
+];
export const QA = () => (
[] = [
+ {
+ type: "query",
+ query: "最新发布",
+ queryType: "order",
+ queryString: "pubdate",
+ },
+ {
+ type: "query",
+ query: "最多播放",
+ queryType: "order",
+ queryString: "view",
+ },
{
type: "query",
query: "露早",
@@ -184,18 +196,6 @@ const nav_tag_list_no_id: Omit[] = [
queryType: "copyright",
queryString: "2",
},
- {
- type: "query",
- query: "最新发布",
- queryType: "order",
- queryString: "pubdate",
- },
- {
- type: "query",
- query: "最多播放",
- queryType: "order",
- queryString: "view",
- },
],
video_query_nav_list = nav_tag_list_no_id.map((item) => ({
...item,
diff --git a/src/routers/layout/nav/index.tsx b/src/routers/layout/nav/index.tsx
index 1375210..d9f6f5f 100644
--- a/src/routers/layout/nav/index.tsx
+++ b/src/routers/layout/nav/index.tsx
@@ -1,4 +1,4 @@
-import { Stack } from "@mui/material";
+import { Chip, Stack } from "@mui/material";
import Button from "@mui/lab/LoadingButton";
import { useInView } from "react-intersection-observer";
import SegmentIcon from "@mui/icons-material/Segment";
@@ -45,7 +45,7 @@ import {
selectVideoActiveTags,
} from "@store/tags/index";
-function useSelectList() {
+export function useTagSelectList() {
const { pathname } = useLocation(),
flag = pathname === "/photo",
storageSelect = flag ? PhotoNavStorage : VideoNavStorage;
@@ -55,8 +55,13 @@ function useSelectList() {
return { navLists, setLists, storageSelect };
}
-export default function Header_Nav() {
- const { navLists, setLists, storageSelect } = useSelectList();
+type HeaderNavType = {
+ shouldShow?: boolean;
+};
+
+export default function Header_Nav(props: HeaderNavType) {
+ const { shouldShow = false } = props;
+ const { navLists, setLists, storageSelect } = useTagSelectList();
//tag区是否展开
const showed = useAppSelector(selectNavMoreShowed);
//拖拽事件绑定
@@ -114,9 +119,10 @@ export default function Header_Nav() {
@@ -174,7 +180,7 @@ const NavItem: FC = memo(
transition,
};
return (
-
+
= memo(
dispatch(addTagFunc(props));
}
};
- //@ts-ignore
- const color = nameToColor[props.query] || "info";
+
+ const styleColor = handleSetSpecialProps(
+ props.query,
+ "rgb(55 65 81)",
+ "rgb(96 165 250)",
+ clicked
+ );
return (
-
+ />
);
}
);
+/**
+ *
+${
+ loading ? "cursor-wait pointer-events-none" : "cursor-pointer"
+ }
+ */
+
+const handleSetSpecialProps = (
+ query: string,
+ defaultColor: string,
+ activeColor: string,
+ clicked: boolean
+) => {
+ //@ts-ignore
+ const color = nameToColor[query] || defaultColor,
+ renderColor = (activecolor: string) => (clicked ? activecolor : color),
+ styleColor = color === defaultColor ? renderColor(activeColor) : color;
+ return styleColor;
+};
+
const nameToColor = {
- 露早: "luzaoRed",
- 柚恩: "youen",
- 莞儿: "waner",
- 米诺: "minuo",
- 虞莫: "yumo",
+ 露早: "#A0191D",
+ 柚恩: "#EB6346",
+ 莞儿: "#1eafe4",
+ 米诺: "#f068B0",
+ 虞莫: "#b77fdd",
};
diff --git a/src/routers/layout/nav/nav.module.less b/src/routers/layout/nav/nav.module.less
index 9e58db2..91e2065 100644
--- a/src/routers/layout/nav/nav.module.less
+++ b/src/routers/layout/nav/nav.module.less
@@ -18,9 +18,6 @@
@itemMarginHalfWidth: 8px;
@itemMarginHalfHeight: 4px;
- &>* {
- margin: @itemMarginHalfHeight @itemMarginHalfWidth;
- }
&[data-showed=true] {
&>span:nth-last-child(2) {
diff --git a/src/routers/layout/rightMore/index.tsx b/src/routers/layout/rightMore/index.tsx
new file mode 100644
index 0000000..9d8991c
--- /dev/null
+++ b/src/routers/layout/rightMore/index.tsx
@@ -0,0 +1,109 @@
+import React, { FC, ReactElement } from "react";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import LaunchIcon from "@mui/icons-material/Launch";
+import { Button, Link, Popover } from "@mui/material";
+import { TabProps } from "../routernav";
+import { AboutUSButton } from "../logo";
+import { usePopoverConfig } from "@utils/hooks/popover";
+export default function PCRightMore() {
+ const { open, anchorEl, handleClick, handleClose } =
+ usePopoverConfig();
+ return (
+ = (props) => (
+ App ;
-}
diff --git a/src/routers/layout/routernav/index.tsx b/src/routers/layout/routernav/index.tsx
index 88172e4..f4e672c 100644
--- a/src/routers/layout/routernav/index.tsx
+++ b/src/routers/layout/routernav/index.tsx
@@ -1,61 +1,146 @@
-import { Tab, Tabs } from "@mui/material";
-import { useState, useEffect, useCallback, memo } from "react";
-import { Link, useLocation } from "react-router-dom";
-import { useScreenSize } from "@components/proview/screenSize";
-import MenuRouter from "./menu";
-
-export const RouterList: TabProps[] = [
+import { Drawer } from "@mui/material";
+import PhotoIcon from "@mui/icons-material/Photo";
+import VideoLibraryIcon from "@mui/icons-material/VideoLibrary";
+import { useState, FC, ReactElement } from "react";
+import { Link, useMatch } from "react-router-dom";
+import CloseIcon from "@mui/icons-material/Close";
+import Header_Nav from "../nav";
+import { ImportTantInfo } from "..";
+export const RouterList: (TabProps & { startICon: ReactElement })[] = [
{
label: "视频",
to: "/video",
+ startICon:
- {RouterList.map((item, index) => (
-
- )}
+
+
);
}
+
+type DraerNavContentType = {
+ title: string;
+ children: React.ReactNode;
+};
+type DrawerHrefItemType = {
+ onClose: () => void;
+ data: {
+ label: string;
+ to: string;
+ }[];
+} & Pick;
+
+const DrawerNavItem: FC> = ({ title }) => {
+ const shouldShow = ["/", "/video", "/photo"].includes(
+ window.location.pathname
+ );
+ return (
+ <>
+ {shouldShow && (
+
+
+ )}
+
+ );
+};
+
+const DrawerHrefLink: FC> = (
+ props
+) => {
+ const { to, onClose, label } = props;
+ const isMatch = useMatch(props.to);
+ return (
+
+ {label}
+
+ );
+};
+
+const DrawerHrefItem: FC = ({ title, data, onClose }) => (
+
+
+);
+
+const DrawerNavContent: FC = (props) => (
+
- {(popupState) => (
- <>
-
-
-
- )}
-
- );
-}
-function RouterItem(props: TabProps & { onClick: () => void }) {
- return (
-
- );
-}
diff --git a/src/routers/layout/search/index.tsx b/src/routers/layout/search/index.tsx
index 9cd32ff..f94e7cb 100644
--- a/src/routers/layout/search/index.tsx
+++ b/src/routers/layout/search/index.tsx
@@ -1,36 +1,16 @@
-import SearchSharpIcon from "@mui/icons-material/SearchSharp";
-import { Form } from "react-router-dom";
-import styles from "./search.module.less";
-import { useSearchFocus } from "@components/proview/searchFocus";
-import { Flipped } from "react-flip-toolkit";
+import { Form, useLocation, useNavigate } from "react-router-dom";
+import PCSearch from "./pc";
+import PhoneSearch from "./phone";
+// todo 增加高级搜索以及手机端的搜索
export default function Search() {
- const { focused, bind } = useSearchFocus();
return (
<>
-
-
+ ({
+ anchorEl: null,
+});
+export const useGetInputWrapper = () => useContext(InputWrapperContext);
diff --git a/src/routers/layout/search/pc/data.ts b/src/routers/layout/search/pc/data.ts
new file mode 100644
index 0000000..1a9839c
--- /dev/null
+++ b/src/routers/layout/search/pc/data.ts
@@ -0,0 +1,28 @@
+import { phoneMoreNameAndFaceUrls } from "../phone/url";
+
+export type renderSuggestItemLists = { label: string; value: string }[];
+
+//tag列
+export const pcSuggestTagLists: renderSuggestItemLists = [
+ "莞儿睡不醒",
+ "露早GOGO",
+ "米诺高分少女",
+ "虞莫MOMO",
+ "柚恩不加糖",
+ "EOE组合",
+ "早莞在一起",
+ "莞柚引力",
+ "一莞米",
+ "虞舟唱莞",
+ "早柚",
+ "西米露",
+ "早有虞谋",
+ "米哈柚",
+ "虞香柚丝",
+ "米虞说的道理",
+ "虞米之乡",
+].map((item) => ({ label: item, value: item }));
+
+//up列
+export const pcSuggestNameLists: renderSuggestItemLists =
+ phoneMoreNameAndFaceUrls;
diff --git a/src/routers/layout/search/pc/hooks.tsx b/src/routers/layout/search/pc/hooks.tsx
new file mode 100644
index 0000000..e11d88d
--- /dev/null
+++ b/src/routers/layout/search/pc/hooks.tsx
@@ -0,0 +1,28 @@
+import {
+ changeSearchMode,
+ SelectModeType,
+ selectSearchMode,
+} from "@store/device";
+import { useAppDispatch, useAppSelector } from "@store/hooks";
+import { useRef, useImperativeHandle } from "react";
+
+export const useSearchMode = () => {
+ const searchMode = useAppSelector(selectSearchMode);
+ const dispatch = useAppDispatch(),
+ handlerChangeSearchMode = (name: SelectModeType) =>
+ dispatch(changeSearchMode(name));
+ return { searchMode, handlerChangeSearchMode };
+};
+export const useBackRef = (ref: React.Ref) => {
+ const inputRef = useRef(null),
+ handerfocus = () => inputRef.current?.focus();
+ //@ts-ignore
+ useImperativeHandle(ref, () => {
+ return {
+ getValue() {
+ return inputRef.current?.value;
+ },
+ };
+ });
+ return { inputRef, handerfocus };
+};
diff --git a/src/routers/layout/search/pc/index.tsx b/src/routers/layout/search/pc/index.tsx
new file mode 100644
index 0000000..09f4637
--- /dev/null
+++ b/src/routers/layout/search/pc/index.tsx
@@ -0,0 +1,30 @@
+import { useSearchFocus } from "@components/proview/searchFocus";
+import { useEffect } from "react";
+import SelectModeCom from "./selectModeNav";
+import Search from "./search";
+
+export default function PCSearch() {
+ const { focused, bind } = useSearchFocus(),
+ { onBlur } = bind;
+ useEffect(() => {
+ if (focused) {
+ window.addEventListener("scroll", onBlur, { once: true });
+ }
+ }, [focused]);
+ return (
+ (null);
+ const { focused, bind } = useSearchFocus();
+ const { onFocus } = bind;
+ const { searchMode } = useSearchMode();
+ return (
+ <>
+ {/* 包裹层 */}
+ (null);
+ const { bind } = useSearchFocus(),
+ { onBlur } = bind;
+ const [tag] = useURLParams(["tag"]);
+ const { open, handleClick } = usePopoverConfig("target");
+ const navigate = useNavigate(),
+ handlerNavigate = (value: string) => {
+ navigate(`/search?tag=${value}`);
+ onBlur();
+ },
+ handlerSubmit = () => {
+ const value = inputRef.current!.value;
+ handlerNavigate(value);
+ },
+ handerHistorySubmit = (value: string) => {
+ handlerNavigate(value);
+ addPCTagHistory(value);
+ };
+ return (
+ <>
+ {
+ if (event.key === "Enter") {
+ handlerSubmit();
+ }
+ }}
+ />
+ (null),
+ tagRef = useRef(null);
+ const navigate = useNavigate(),
+ handlerNavigate = (tag: string, name: string) => {
+ navigate(`/search?tag=${tag}&name=${name}`);
+ onBlur();
+ }, //@ts-ignore
+ getTagValue = () => tagRef.current!.getValue(),
+ //@ts-ignore
+ getNameValue = () => nameRef.current!.getValue(),
+ handlerSubmit = () => {
+ navigate(`/search?tag=${getTagValue()}&name=${getNameValue()}`);
+ onBlur();
+ },
+ handlerTagHistorySubmit = (tag: string) => {
+ handlerNavigate(tag, getNameValue());
+ addPCTagHistory(tag);
+ },
+ handlerNameHistorySubmit = (name: string) => {
+ handlerNavigate(getTagValue(), name);
+ addPCNameHistory(name);
+ };
+ const tagSuggestOption = usePopoverConfig("target"),
+ nameSuggestOption = usePopoverConfig("target"),
+ tagItemCallback = (event: React.MouseEvent) => {
+ nameSuggestOption.handleClose();
+ tagSuggestOption.handleClick(event);
+ },
+ nameItemCallback = (event: React.MouseEvent) => {
+ tagSuggestOption.handleClose();
+ nameSuggestOption.handleClick(event);
+ };
+ return (
+ ) => void;
+};
+
+const AdvanceSearchItem = forwardRef(
+ (props, ref) => {
+ const { inputRef, handerfocus } = useBackRef(ref);
+ const { focused } = useSearchFocus();
+ return (
+ <>
+ ("pcTagHistorys");
+export const addPCTagHistory = (value: string) => {
+ const oldHistory = PCTagStorage.getLocalStorage([]);
+ PCTagStorage.setLocalstorage([value, ...oldHistory.slice(0, 4)]);
+};
+const usePCTagHistory = () => {
+ const local_history: renderSuggestItemLists = PCTagStorage.getLocalStorage(
+ []
+ ).map((item) => ({ label: item, value: item }));
+ return local_history;
+};
+
+const useSuggestOption = (open: boolean) => {
+ const [fixedOpen, setOpen] = useState(false);
+ const { focused } = useSearchFocus();
+ const handlerChangeOpen = useMemo(() => {
+ let flag = false;
+ return () => {
+ if (!flag) {
+ flag = true;
+ return setTimeout(() => {
+ setOpen(true);
+ }, 300);
+ } else {
+ setOpen(true);
+ }
+ };
+ }, [focused]);
+ useEffect(() => {
+ //@ts-ignore
+ let setId;
+ if (focused && open) {
+ setId = handlerChangeOpen();
+ } else {
+ clearTimeout(setId);
+ setOpen(false);
+ }
+ return () => {
+ //@ts-ignore
+ clearTimeout(setId);
+ };
+ }, [focused, open]);
+ return [fixedOpen];
+};
+
+export const PCTagSuggest: FC = ({
+ open,
+ ClickCallback,
+}) => {
+ const [tag] = useURLParams(["tag"]);
+ const history_tag = usePCTagHistory();
+ const [fixedOpen] = useSuggestOption(open);
+ return (
+
+
+
+
+ );
+};
+
+const PCNameStorage = new Storage("pcNameHistorys");
+export const addPCNameHistory = (value: string) => {
+ const oldHistory = PCNameStorage.getLocalStorage([]);
+ PCNameStorage.setLocalstorage([value, ...oldHistory.slice(0, 4)]);
+};
+const usePCNameHistory = () => {
+ const local_history: renderSuggestItemLists = PCNameStorage.getLocalStorage(
+ []
+ ).map((item) => ({ label: item, value: item }));
+ return local_history;
+};
+export const PCNameSuggest: FC = ({
+ open,
+ ClickCallback,
+}) => {
+ const [name] = useURLParams(["name"]);
+ const history_name = usePCNameHistory();
+ const [fixedOpen] = useSuggestOption(open);
+ return (
+
+
+
+
+ );
+};
+
+type SuggestPopperProps = {
+ open: boolean;
+ children?: ReactElement | ReactElement[];
+};
+const SuggestPopper: FC = (props) => {
+ const { anchorEl } = useGetInputWrapper();
+ return (
+
+
+ );
+};
+
+type SuggestItemProps = {
+ title: string | ReactElement;
+ dataList: renderSuggestItemLists;
+ feedbackMsg?: string;
+ activeValue: string;
+ clickCallBack: (value: string) => void;
+};
+const SuggestItem: FC = ({
+ title,
+ dataList,
+ clickCallBack,
+ activeValue,
+ feedbackMsg,
+}) => {
+ const isActive = (value: string) => value === activeValue;
+ return (
+
+
+ {title}
+
+
+ );
+};
diff --git a/src/routers/layout/search/pc/selectModeNav.tsx b/src/routers/layout/search/pc/selectModeNav.tsx
new file mode 100644
index 0000000..db00d77
--- /dev/null
+++ b/src/routers/layout/search/pc/selectModeNav.tsx
@@ -0,0 +1,41 @@
+import { selectModeList } from "@store/device";
+import { FC } from "react";
+import styles from "../search.module.less";
+import { useSearchMode } from "./hooks";
+/**
+ * 搜索模式选择
+ */
+export default function SelectModeCom() {
+ const { searchMode, handlerChangeSearchMode } = useSearchMode();
+ return (
+ = ({ selected, label, onChange }) => {
+ return (
+ (false);
+ const SearchProps = {
+ open,
+ onClose: () => {
+ setTimeout(() => {
+ setModal(false);
+ }, 150);
+ },
+ };
+ return (
+ & {
+ onClick: (value: string) => void;
+ activeValue: string;
+ }
+> = ({ UrlLists, onClick, activeValue }) => {
+ const isActive = (label: string) => label === activeValue;
+ return (
+
+ {/* 注意modal会把滚动条隐藏 */}
+
+
+ );
+}
+type ModeComProps = {
+ onClose: () => void;
+};
+const TagContentCom: FC = ({ onClose }) => {
+ const inputRef = useRef(null);
+ const [tag] = useURLParams(["tag"]);
+ const navigate = useNavigate();
+ const handlerSubmit = () => {
+ const value = inputRef.current!.value;
+ navigate(`/search?tag=${value}`);
+ onClose();
+ };
+ const { searchMode } = useSearchMode();
+ return (
+ = ({ onClose }) => {
+ const [tag, name] = useURLParams(["tag", "name"]);
+ const { searchMode } = useSearchMode();
+ const [activeLine, changeActiveLine] = useState("搜索tag"),
+ handerChangeActiveLine = (name: typeof searchMode) =>
+ changeActiveLine(name);
+ const tagInputRef = useRef(null),
+ nameInputRef = useRef(null);
+ const navigate = useNavigate();
+ const handlerSubmit = () => {
+ const tag = tagInputRef.current!.value,
+ name = nameInputRef.current!.value;
+ console.log({ tag, name });
+ navigate(`/search?tag=${tag}&name=${name}`);
+ onClose();
+ };
+ return (
+
+
+ );
+};
+const CloseSVG: FC<{ onClose: () => void }> = ({ onClose }) => (
+ = Promise;
+export type UnPromisify = T extends PromiseType ? U : never;
+type LoaderReturnType = UnPromisify>;
+export async function loader({ request }: LoaderType) {
+ let url = new URL(request.url),
+ tag = url.searchParams.get("tag"),
+ name = url.searchParams.get("name");
+ let order = url.searchParams.get("order") as videoOrderType;
+ if (!OrderArr.includes(order)) {
+ order = "score";
+ }
+ !tag && (tag = "");
+ !name && (name = "");
+ return [tag, name, order] as const;
+}
+
+export default function SearchPage() {
+ const loaderData = useLoaderData() as LoaderReturnType,
+ [tagParam, nameParam, order] = loaderData;
+ {
+ }
+ const [lists, setLists] = useState([]);
+ const { handerChangeLoading } = useChangeLoading("searchIsloading");
+ useEffect(() => {
+ setLists([]);
+ handerChangeLoading(true);
+ function handlerSetList(
+ datas: UnPromisify>["data"],
+ nextPage: number
+ ) {
+ setLists((lists) => [
+ ...lists,
+ ...datas.map((item, index) => {
+ const itemRes = PickVideoRouterImageCardType(item);
+ if (index === datas.length - 5) {
+ return {
+ ...itemRes,
+ id: nanoid(4),
+ observer: true,
+ callback: (inView: boolean) => fetchHandler(nextPage),
+ };
+ }
+ return { ...itemRes, id: nanoid(4) };
+ }),
+ ]);
+ handerChangeLoading(false);
+ }
+ const fetchHandler = async (page: number = 1) => {
+ const { data, canceledByAxios } = await fetchVideohandler(page, {
+ order,
+ q: `tag.${tagParam}~name.${nameParam}`,
+ });
+ if (!canceledByAxios) {
+ handlerSetList(data, page + 1);
+ }
+ };
+ fetchHandler(1);
+ }, loaderData);
+ const { loading, isEmpty } = useSearchShowState(lists),
+ propsObj = { loading, isEmpty, data: lists };
+ return (
+ ([]);
- const isLoading = useAppSelector(selectVideoLoadingState),
- dispatch = useAppDispatch(),
- handerChangeLoading = (state: boolean) =>
- dispatch(changeLoading({ stateName: "videoIsLoading", Tostate: state }));
+ const [lists, setLists] = useState([]);
+ const { handerChangeLoading } = useChangeVideoLoading();
useEffect(() => {
+ setLists([]);
+ handerChangeLoading(true);
// 在内部定义fetchHandler，保证拿到的是同步的
const fetchHandler = async (page: number = 1) => {
- const data = await fetchVideohandler(page, props);
+ const { data, canceledByAxios } = await fetchVideohandler(page, props);
setLists((lists) => [
...lists,
...data.map((item, index) => {
const itemRes = PickVideoRouterImageCardType(item);
- if (index === data.length - 3) {
+ if (index === data.length - 5) {
return {
...itemRes,
id: nanoid(4),
@@ -40,38 +38,133 @@ export default function VideoMasonry(props: VideoRouterMasonryType) {
return { ...itemRes, id: nanoid(4) };
}),
]);
+ if (!canceledByAxios) {
+ handerChangeLoading(false);
+ }
};
- setLists([]);
- handerChangeLoading(true);
- fetchHandler(1).then(() => handerChangeLoading(false));
+ fetchHandler(1);
}, [props]);
return (
+
+ ))}
+
+);
+
+const VideoContent: FC<{ data: VideoListType }> = memo((props) => {
+ const { loading, rightLen, isEmpty, shouldNoShowHeroLine } =
+ useVideoShowState(props.data);
+ const { sm } = useScreenSize();
+ const data = props.data;
+ const heroItem = data.slice(0, 1),
+ rightItem = data.slice(1, rightLen),
+ resItems = shouldNoShowHeroLine ? data : data.slice(rightLen);
+ return (
+ <>
- {lists.map((item) => (
-
+ {loading ? (
+
+ {!sm && (
+
+
+ {loading ? (
+
+
+ )}
-
+
- EOEfans-web端
-
-
-
+ {RouterList.slice(0, 2).map((item) => (
+
+
+
+ ))}
);
-}
+};
const Show_news: FC<{ visible: boolean }> = ({ visible }) => (
-
-
-
-
- Q: - 为什么界面这么丑？ -
-- A: - web端没有UI捏🙇♂️🙇♂️🙇♂️果咩。 -
-
- -
-
- Q: - 如何查找我想看的视频类型？ -
-- A: - - 😩目前只能通过点击下方tag栏进行查询，其中各分区、原创和转载、 - 最新发布和最多播放互斥外其他tag皆满足异或查询。 -
-
- 🤔tag排序不是固定的，可以使用鼠标或者触摸按住tag半秒后进行移动。 -
- 🤗可以自定义任何你想要的tag栏顺序，下一次访问也有效。 - -
- -
-
- Q: - 露早tag为什么不是应援色？ -
-- A: - - 露早GOGO的应援色为 - - #3dff9e - - ,tag字面显示不明显，所以更换为黑露早形态的 - #A0191D - -
-
- -
-
- Q: - 如何进行用户反馈？ -
-- A: - - 请前往 - - eoefans反馈 - - -
-
- -
-
- Q: - 图片页图片太小了？ -
-- A: - - 图片页可点击图片进入放大镜模式，支持手势返回和空白处返回；可使用双指放大对图片大小进行调整。 - -
-
+ {QALists.map((item, index) => (
+ -
+
+ Q: + {item.question} +
++ A: + {item.answer} +
+
+ ))}
+
+ );
+}
+const GroupLists: TabProps[] = [
+ {
+ label: "露早",
+ to: "1669777785",
+ },
+ {
+ label: "虞莫",
+ to: "1811071010",
+ },
+ {
+ label: "莞儿",
+ to: "1875044092",
+ },
+ {
+ label: "柚恩",
+ to: "1795147802",
+ },
+ {
+ label: "米诺",
+ to: "1778026586",
+ },
+ {
+ label: "官号",
+ to: "2018113152",
+ },
+ {
+ label: "录播组",
+ to: "3461563583302074",
+ },
+];
+type PopoverItemProps = {
+ title: string | ReactElement;
+ children: ReactElement;
+};
+const PopoverItem: FC
+ }
+ onClick={handleClick}
+ className='text-gray-800 hover:bg-gray-200'
+ title='点击查看更多'
+ >
+ 更多
+
+
+
+
+
+ 快捷跳转}
+ >
+
+
+
+ 敬请期待
+
+
+
+
+ {GroupLists.map((item, key) => (
+
+ {item.label}
+
+
+
+);
diff --git a/src/routers/layout/rightSide/index.tsx b/src/routers/layout/rightSide/index.tsx
deleted file mode 100644
index aeec436..0000000
--- a/src/routers/layout/rightSide/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Avatar } from "@mui/material";
-
-export default function RightSide() {
- return + {props.title} +
+ {props.children} +
+
+
+
+
+
+
+
+
+
+
+
+ 敬请期待
+
+ {data.map((item, key) => (
+
+
+
+);
+
export type TabProps = {
label: string;
to: string;
};
-export function TabLink(props: TabProps) {
- const { pathname } = useLocation();
- return (
- + {props.title} +
+ {props.children} +
-
-
-
+
+
+
);
}
diff --git a/src/routers/layout/search/pc/context.tsx b/src/routers/layout/search/pc/context.tsx
new file mode 100644
index 0000000..e467a6b
--- /dev/null
+++ b/src/routers/layout/search/pc/context.tsx
@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+type InputWrapperContextType = {
+ anchorEl: HTMLElement | null;
+};
+export const InputWrapperContext = createContext
+
+ );
+}
diff --git a/src/routers/layout/search/pc/modal.tsx b/src/routers/layout/search/pc/modal.tsx
new file mode 100644
index 0000000..b3ad8b7
--- /dev/null
+++ b/src/routers/layout/search/pc/modal.tsx
@@ -0,0 +1 @@
+export default function PCSearchAdvanceLikeModal() {}
diff --git a/src/routers/layout/search/pc/pc.module.less b/src/routers/layout/search/pc/pc.module.less
new file mode 100644
index 0000000..d828f32
--- /dev/null
+++ b/src/routers/layout/search/pc/pc.module.less
@@ -0,0 +1,81 @@
+.advanceSearch {
+ display: flex;
+ flex-grow: 1;
+
+ &.focus {
+ .itemPadding {
+ padding: 12px 32px;
+ }
+
+ span+input {
+ width: 100%;
+ }
+
+ .SearchItem:hover {
+ background-color: rgb(229, 231, 235);
+ }
+ }
+
+ &.blur {
+ transition: all 300ms ease;
+
+ .item {
+ align-items: center;
+ justify-content: center;
+
+ span {
+ transition: all 300ms ease;
+ font-size: 12px;
+ font-weight: 600;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 75px;
+ white-space: nowrap;
+ }
+
+ span+input {
+ height: 0%;
+ width: 0%;
+ }
+ }
+ }
+
+ .itemPadding {
+ transition: all 300ms ease;
+ }
+
+ .item {
+ display: flex;
+ flex-direction: column;
+
+ span {
+ padding-bottom: 2px;
+ font-size: 14px;
+ font-weight: 600;
+ }
+
+ span+input {
+ transition: all 300ms ease;
+ background-color: transparent;
+
+ &:focus-within {
+ outline: none;
+ }
+ }
+ }
+
+ .SearchItem {
+ flex-grow: 1;
+ display: flex;
+ border-radius: 40px;
+ // transition: all 300ms ease;
+ }
+}
+
+.commonRounded {
+ border-radius: 40px;
+}
+
+.suggestMaxHeight {
+ max-height: calc(100vh - 200px);
+}
\ No newline at end of file
diff --git a/src/routers/layout/search/pc/search.tsx b/src/routers/layout/search/pc/search.tsx
new file mode 100644
index 0000000..5abb2a1
--- /dev/null
+++ b/src/routers/layout/search/pc/search.tsx
@@ -0,0 +1,315 @@
+import { useSearchFocus } from "@components/proview/searchFocus";
+import HighlightOffIcon from "@mui/icons-material/HighlightOff";
+import { useURLParams } from "@utils/hooks/url";
+import SearchIcon from "@mui/icons-material/Search";
+import styles from "../search.module.less";
+import pcStyles from "./pc.module.less";
+import { useBackRef, useSearchMode } from "./hooks";
+import { useNavigate } from "react-router-dom";
+import React, { FC, forwardRef, ReactElement, useRef } from "react";
+export default function Search() {
+ const contentRef = useRef
+ {/* 搜索栏内容层 */}
+
+
+ );
+}
+
+const CloseSvg: FC<{ onClick: () => void; style?: React.CSSProperties }> = (
+ props
+) => (
+
+
+ {searchMode === "搜索tag" &&
+
+
+
+
+);
+
+//通用按钮
+const SearchButton: FC<{ onSubmit?: () => void }> = ({ onSubmit }) => {
+ const { focused } = useSearchFocus();
+ return (
+ <>
+
+
+ );
+};
+
+import { usePopoverConfig } from "@utils/hooks/popover";
+import {
+ addPCNameHistory,
+ addPCTagHistory,
+ PCNameSuggest,
+ PCTagSuggest,
+} from "./searchSuggest";
+import { InputWrapperContext } from "./context";
+
+//普通搜索
+const NormalSearch = () => {
+ const inputRef = useRef
+
+
+ {/* 等待接口更新 */}
+ {/*
+
+
+ );
+});
+
+type AdvanceItemProps = {
+ title: string;
+ inputDefaultValue: string;
+ onSubmit: () => void;
+ children?: ReactElement | ReactElement[];
+ clickCallback?: (event: React.MouseEvent {
+ handerfocus();
+ if (props.clickCallback) {
+ props.clickCallback(event);
+ }
+ }}
+ >
+ {props.title}
+ {
+ if (event.key === "Enter") {
+ props.onSubmit();
+ }
+ }}
+ />
+ {focused && (
+ {
+ inputRef.current!.value = "";
+ }}
+ style={{
+ top: "50%",
+ right: "16px",
+ transform: "translateY(-12px)",
+ }}
+ />
+ )}
+
+ {props.children}
+
+
+
+ );
+ }
+);
+const AdvanceSearchLastItem = forwardRef<
+ HTMLInputElement,
+ AdvanceItemProps & { onSubmit: () => void }
+>((props, ref) => {
+ const { inputRef, handerfocus } = useBackRef(ref);
+ const { focused } = useSearchFocus();
+ return (
+ <>
+ {
+ handerfocus();
+ if (props.clickCallback) {
+ props.clickCallback(event);
+ }
+ }}
+ >
+
+
+ );
+});
diff --git a/src/routers/layout/search/pc/searchSuggest.tsx b/src/routers/layout/search/pc/searchSuggest.tsx
new file mode 100644
index 0000000..ceb36b2
--- /dev/null
+++ b/src/routers/layout/search/pc/searchSuggest.tsx
@@ -0,0 +1,212 @@
+import { useSearchFocus } from "@components/proview/searchFocus";
+import HistoryToggleOffIcon from "@mui/icons-material/HistoryToggleOff";
+import TagIcon from "@mui/icons-material/Tag";
+import AccessibilityNewIcon from "@mui/icons-material/AccessibilityNew";
+import { Popper } from "@mui/material";
+import { Storage } from "@routers/layout/tools";
+import { useURLParams } from "@utils/hooks/url";
+import { FC, ReactElement, useEffect, useMemo, useState } from "react";
+import { useGetInputWrapper } from "./context";
+import styles from "./pc.module.less";
+import {
+ renderSuggestItemLists,
+ pcSuggestTagLists,
+ pcSuggestNameLists,
+} from "./data";
+type PCTagSuggestProps = {
+ ClickCallback: (value: string) => void;
+} & SuggestPopperProps;
+
+const PCTagStorage = new Storage
+ {props.title}
+ {
+ if (event.key === "Enter") {
+ props.onSubmit();
+ }
+ }}
+ />
+ {focused && (
+ {
+ inputRef.current!.value = "";
+ }}
+ style={{
+ top: "50%",
+ right: "16px",
+ transform: "translateY(-12px)",
+ }}
+ />
+ )}
+ {props.children}
+
+
+ {props.children}
+
+
+ {dataList.map(({ label, value }, key) => (
+
+ ))}
+ {!dataList.length && (
+
+ + {feedbackMsg} +
+ )} +
+ {selectModeList.map((item, key) => (
+
+ );
+}
+
+type SelectButtonType = {
+ selected: boolean;
+ label: string;
+ onChange: () => void;
+};
+
+const SelectButton: FC
+
+
+ );
+};
diff --git a/src/routers/layout/search/phone/index.tsx b/src/routers/layout/search/phone/index.tsx
new file mode 100644
index 0000000..250a2dd
--- /dev/null
+++ b/src/routers/layout/search/phone/index.tsx
@@ -0,0 +1,36 @@
+import RouterNav from "@routers/layout/routernav";
+import SearchIcon from "@mui/icons-material/Search";
+import PhotoModalSearch from "./modal";
+import { useState } from "react";
+export default function PhoneSearch() {
+ // 这个只作为因子引出真实的界面，不应该承担任何搜索功能
+ const [open, setModal] = useState
+ {/* 点击这里向下拉取搜索栏 */}
+
+ );
+}
diff --git a/src/routers/layout/search/phone/item.tsx b/src/routers/layout/search/phone/item.tsx
new file mode 100644
index 0000000..e39cbd1
--- /dev/null
+++ b/src/routers/layout/search/phone/item.tsx
@@ -0,0 +1,132 @@
+import SearchIcon from "@mui/icons-material/Search";
+import { FC, forwardRef, useState } from "react";
+import { NameAndFaceUrlsType } from "./url";
+type PhoneSearchItemProps = {
+ open: boolean;
+ onOpen?: () => void;
+ openTitle: string;
+ inputDefaultValue: string;
+ onCompleteSearch: (() => void) | false;
+ nextCallback: () => void;
+ closeTitle: string;
+ UrlLists: NameAndFaceUrlsType;
+};
+
+export const PhoneSearchItem = forwardRef<
+ HTMLInputElement,
+ PhoneSearchItemProps
+>((props, ref) => {
+ const {
+ closeTitle,
+ inputDefaultValue,
+ onCompleteSearch,
+ nextCallback,
+ UrlLists,
+ open,
+ onOpen,
+ openTitle,
+ } = props;
+ const [inputvalue, setValue] = useState(inputDefaultValue);
+ const handerEnter = (callback?: Function) => {
+ callback && callback();
+ setTimeout(() => {
+ Promise.resolve().then(() => {
+ if (onCompleteSearch) {
+ onCompleteSearch();
+ } else {
+ nextCallback();
+ }
+ });
+ }, 0);
+ };
+ const handlerImgClick = (label: string) =>
+ handerEnter(() => setValue(() => label));
+ return (
+
+
+
+ 想看什么
+ 点击这里·马上看到
+
+
+
+ );
+});
+
+const ImgGally: FC<
+ Pick
+
+
+
+ {openTitle}
+
+
+
+ {UrlLists.map((item, index) => (
+
+ );
+};
+
+const CloseItem: FC<{ title: string; value: string; onClick?: () => void }> = ({
+ title,
+ value,
+ onClick,
+}) => {
+ return (
+
+ 
+
+ {item.label}
+
+
+ ))}
+
+
+ );
+};
diff --git a/src/routers/layout/search/phone/modal.tsx b/src/routers/layout/search/phone/modal.tsx
new file mode 100644
index 0000000..839c5b1
--- /dev/null
+++ b/src/routers/layout/search/phone/modal.tsx
@@ -0,0 +1,150 @@
+import { Modal, Tab, Tabs } from "@mui/material";
+import { FC, useRef, useState } from "react";
+import { useSearchMode } from "../pc/hooks";
+import { PhoneSearchItem } from "./item";
+import { idolNameAndFaceUrls, phoneMoreNameAndFaceUrls } from "./url";
+import { useURLParams } from "@utils/hooks/url";
+import { useNavigate } from "react-router-dom";
+type PhotoModalSearchProps = {
+ open: boolean;
+ onClose: () => void;
+};
+export default function PhotoModalSearch(props: PhotoModalSearchProps) {
+ const { open, onClose } = props;
+ const { searchMode } = useSearchMode();
+ return (
+ <>
+ {title}
+{value}
+
+ {/* header */}
+
+
+
+ {/* content */}
+
+ {searchMode === "搜索tag" &&
+
+ {}}
+ closeTitle='标签'
+ UrlLists={idolNameAndFaceUrls}
+ />
+
+ );
+};
+const MoreContentCom: FC
+ {}}
+ closeTitle='用户'
+ UrlLists={phoneMoreNameAndFaceUrls}
+ />
+
+ );
+};
+// 选择栏
+const SearchHeader = () => {
+ const { searchMode, handlerChangeSearchMode } = useSearchMode();
+ return (
+
+
+
+);
diff --git a/src/routers/layout/search/phone/url.ts b/src/routers/layout/search/phone/url.ts
new file mode 100644
index 0000000..a8fdf56
--- /dev/null
+++ b/src/routers/layout/search/phone/url.ts
@@ -0,0 +1,27 @@
+export const yumoFaceURL = `https://i2.hdslb.com/bfs/face/139f2dbd62f9f9343c1ace6c1b49c38a630bf0c7.jpg@240w_240h_1c_1s.webp`;
+export const youenFaceURL = `https://i2.hdslb.com/bfs/face/388bb9976a9957aa9370e153e43b60111ef7ae1f.jpg@240w_240h_1c_1s.webp`;
+export const luzaoFaceURL = `https://i0.hdslb.com/bfs/face/5d699ce6f66ce4770092ba19fcf7caec82e8f736.jpg@240w_240h_1c_1s.webp`;
+export const wanerFaceURL = `https://i1.hdslb.com/bfs/face/4d36b041654ef91a0b2f7f34ca9ade33cdbf837e.jpg@240w_240h_1c_1s.webp`;
+export const minuoFaceURl = `https://i2.hdslb.com/bfs/face/3da6145e81745cabd1f79b9c61772f884e783b7e.jpg@240w_240h_1c_1s.webp`;
+
+export type NameAndFaceUrlsType = {
+ label: string;
+ url: string;
+ value: string;
+}[];
+
+export const idolNameAndFaceUrls: NameAndFaceUrlsType = [
+ { label: "露早", url: luzaoFaceURL, value: "露早GOGO" },
+ { label: "虞莫", url: yumoFaceURL, value: "虞莫MOMO" },
+ { label: "莞儿", url: wanerFaceURL, value: "莞儿睡不醒" },
+ { label: "柚恩", url: youenFaceURL, value: "柚恩不加糖" },
+ { label: "米诺", url: minuoFaceURl, value: "米诺高分少女" },
+];
+
+export const lubozuFaceUrl = `https://i0.hdslb.com/bfs/face/4fb5beac7b6eff7981897176430df514b7201556.jpg@240w_240h_1c_1s.webp`;
+const eoeGroupFaceUrl = `https://i0.hdslb.com/bfs/face/f0ac506bbfa4e4ce09729d424d28d2383e721ade.jpg@240w_240h_1c_1s.webp`;
+export const phoneMoreNameAndFaceUrls: NameAndFaceUrlsType = [
+ { label: "录播组", url: lubozuFaceUrl, value: "哎呀米诺录播组" },
+ ...idolNameAndFaceUrls,
+ { label: "EOE组合", url: eoeGroupFaceUrl, value: "EOE组合" },
+];
diff --git a/src/routers/layout/search/search.module.less b/src/routers/layout/search/search.module.less
index 98dd97f..a92fb52 100644
--- a/src/routers/layout/search/search.module.less
+++ b/src/routers/layout/search/search.module.less
@@ -1,80 +1,58 @@
.search-box {
- position: relative;
- z-index: 10;
- margin: 0 8px;
- min-width: 180px;
- max-width: 500px;
- width: 100%;
+ box-shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 4px 12px rgb(0 0 0 / 5%);
+ border-radius: 40px;
+ border: 1px solid #DDD;
+ display: flex;
+ background-color: white;
+ max-width: 100%;
+ box-sizing: border-box;
+ justify-content: space-between;
+ align-items: stretch;
+ margin: auto;
+ width: 288px;
+
+ &.focus {
+ width: 850px;
+ height: 65px;
+ }
+
- .search-form {
- border-radius: 8px;
+ .search-button {
+ border-radius: 40px;
+ cursor: pointer;
+ color: white;
+ position: relative;
+ // margin: auto;
+ margin-top: auto;
+ margin-bottom: auto;
display: flex;
+ justify-content: center;
align-items: center;
- height: 40px;
- opacity: .9;
- transition: background-color .3s;
- background-color: #f1f2f3;
- border: 1px solid #E3E5E7;
-
- &:hover {
- background-color: #fff;
- }
-
- .search-content {
- flex: 1;
- display: flex;
- align-items: center;
- position: relative;
- padding: 0 8px;
- margin-right: 8px;
- height: 32px;
- border: 2px solid transparent;
- border-radius: 6px;
-
- .search-input {
- flex: 1;
- overflow: hidden;
- padding-right: 8px;
- border: none;
- background-color: transparent;
- box-shadow: none;
- font-size: 14px;
- line-height: 20px;
- color: #61666D;
- &:focus-visible {
- outline: none;
- }
- }
- }
-
- .search-btn {
- display: flex;
- margin: 0;
- padding: 0;
- align-items: center;
- justify-content: center;
- width: 32px;
- height: 32px;
- border: none;
- border-radius: 6px;
- cursor: pointer;
- transition: background-color .3s;
-
- &:hover {
- background-color: #E3E5E7;
- }
- }
+ }
+}
+
+.pc-search {
+ transition-duration: 300ms;
+ display: flex;
+ flex-direction: column;
+
+ &::after {
+ content: '';
+ width: 100%;
+ max-width: 64px;
+ margin: 0 auto;
+ height: 2px;
+ background-color: currentColor;
+ transform: scaleX(0);
+ transition: transform 200ms ease;
}
- .form-active {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- background-color: #fff;
-
+ &:hover::after {
+ transform: scaleX(1);
+ }
- .search-content {
- background-color: #f1f2f3;
- }
+ &.active::after {
+ transform: scaleX(1);
}
}
\ No newline at end of file
diff --git a/src/routers/photo/item/index.tsx b/src/routers/photo/item/index.tsx
index b507919..fd93a24 100644
--- a/src/routers/photo/item/index.tsx
+++ b/src/routers/photo/item/index.tsx
@@ -22,6 +22,7 @@ export default function PhotoCard(props: CardType) {
url={`${images[0].src}@${250}w.webp`}
{...Omit(images[0], "src")}
{...resPorps}
+ title={"图片栏"}
className={style["show-img"]}
onClick={handlerChangeOpen}
/>
diff --git a/src/routers/search/hooks.tsx b/src/routers/search/hooks.tsx
new file mode 100644
index 0000000..99297d1
--- /dev/null
+++ b/src/routers/search/hooks.tsx
@@ -0,0 +1,11 @@
+import { useScreenSize } from "@components/proview/screenSize";
+import { VideoListType } from "@routers/video/masonry";
+import { useAppSelector } from "@store/hooks";
+import { selectSearchingState } from "@store/loading";
+export const useSearchLoading = () => useAppSelector(selectSearchingState);
+
+export const useSearchShowState = (data: VideoListType) => {
+ const loading = useSearchLoading(),
+ isEmpty = data.length < 1;
+ return { loading, isEmpty };
+};
diff --git a/src/routers/search/index.tsx b/src/routers/search/index.tsx
new file mode 100644
index 0000000..7fd2c8c
--- /dev/null
+++ b/src/routers/search/index.tsx
@@ -0,0 +1,86 @@
+import { NormalVideoRes } from "@routers/video/masonry";
+import {
+ fetchVideohandler,
+ PickVideoRouterImageCardType,
+} from "@routers/video/tools";
+import { useChangeLoading } from "@store/loading";
+import { nanoid } from "nanoid";
+import { useEffect, useState } from "react";
+import { useLoaderData } from "react-router-dom";
+import { useSearchShowState } from "./hooks";
+import { VideoListType } from "../video/masonry";
+import SelectNav from "./select";
+import { videoOrderType } from "@utils/fetch/fetchtype";
+import { OrderArr } from "./tool";
+type LoaderType = {
+ request: {
+ url: string;
+ };
+};
+export type PromiseType
+
+ );
+}
diff --git a/src/routers/search/select.tsx b/src/routers/search/select.tsx
new file mode 100644
index 0000000..e4383a0
--- /dev/null
+++ b/src/routers/search/select.tsx
@@ -0,0 +1,72 @@
+import { videoOrderType } from "@utils/fetch/fetchtype";
+import { nanoid } from "nanoid";
+import { FC } from "react";
+import { useNavigate } from "react-router-dom";
+import { OrderArr, returnReplacedParmasURl } from "./tool";
+import { useURLParams } from "@utils/hooks/url";
+
+export default function SelectNav() {
+ const navigate = useNavigate(),
+ handlerCilck = (queryString: videoOrderType) => {
+ const replacedUrl = returnReplacedParmasURl([
+ { parmas: "order", replace: queryString },
+ ]),
+ newQuerySrting = new URL(replacedUrl).search;
+ navigate(`/search${newQuerySrting}`);
+ };
+ return (
+
+ {Search_Nav.map((item) => (
+
+ );
+}
+
+const SearchNavItem: FC<{
+ onClick: () => void;
+ label: string;
+ queryString: videoOrderType;
+}> = ({ label, onClick, queryString }) => {
+ const [order] = useURLParams(["order"]),
+ isCurOrder = OrderArr.includes(order as videoOrderType)
+ ? order === queryString
+ : queryString === "score";
+ return (
+
+ {label}
+
+ );
+};
+
+type searchNavType = {
+ id: string;
+ label: "综合排序" | "最多播放" | "最新发表";
+ queryString: videoOrderType;
+};
+const Search_Nav: searchNavType[] = [
+ {
+ id: nanoid(4),
+ label: "综合排序",
+ queryString: "score",
+ },
+ {
+ id: nanoid(4),
+ label: "最多播放",
+ queryString: "view",
+ },
+ {
+ id: nanoid(4),
+ label: "最新发表",
+ queryString: "pubdate",
+ },
+];
diff --git a/src/routers/search/tool.ts b/src/routers/search/tool.ts
new file mode 100644
index 0000000..e54ef24
--- /dev/null
+++ b/src/routers/search/tool.ts
@@ -0,0 +1,31 @@
+import { videoOrderType } from "@utils/fetch/fetchtype";
+
+function ParseQueryString(queryString: string) {
+ const regExp = /([^&=]+)=([\w\W]*?)(&|$)/g;
+ let result = null,
+ ret: { [key: string]: string } = {};
+ while ((result = regExp.exec(queryString)) != null) {
+ ret[result[1]] = result[2];
+ }
+ return ret;
+}
+export const parseURL = (url = window.location.href) => {
+ const objUrl = new URL(url),
+ params = objUrl.search.slice(1);
+ return ParseQueryString(params);
+};
+
+export const returnReplacedParmasURl = (
+ input: { parmas: string; replace: string }[]
+) => {
+ const originUrl = window.location.href,
+ paramsObj = parseURL(originUrl);
+ input.forEach(({ parmas, replace }) => (paramsObj[parmas] = replace));
+ return originUrl.replace(
+ window.location.search,
+ `?${Object.entries(paramsObj)
+ .map(([key, value]) => `${key}=${value}`)
+ .join("&")}`
+ );
+};
+export const OrderArr: videoOrderType[] = ["pubdate", "score", "view"];
diff --git a/src/routers/video/hooks.tsx b/src/routers/video/hooks.tsx
new file mode 100644
index 0000000..56dd2a1
--- /dev/null
+++ b/src/routers/video/hooks.tsx
@@ -0,0 +1,22 @@
+import { useScreenSize } from "@components/proview/screenSize";
+import { useAppSelector } from "@store/hooks";
+import {
+ selectVideoLoadingState,
+ useChangeLoading,
+} from "@store/loading/index";
+import { VideoListType } from "./masonry";
+export const useVideoLoading = () => useAppSelector(selectVideoLoadingState);
+
+export const useChangeVideoLoading = () => {
+ const { handerChangeLoading } = useChangeLoading("videoIsLoading");
+ return { handerChangeLoading };
+};
+
+export const useVideoShowState = (data: VideoListType) => {
+ const { lg, md, sm } = useScreenSize(),
+ rightLen = (lg ? (md ? (sm ? 0 : 2) : 4) : 6) + 1;
+ const loading = useVideoLoading(),
+ isEmpty = data.length < 1,
+ shouldNoShowHeroLine = data.length < rightLen + 1 + 10;
+ return { loading, rightLen, isEmpty, shouldNoShowHeroLine };
+};
diff --git a/src/routers/video/item/index.tsx b/src/routers/video/item/index.tsx
index 773f4e7..20f9d52 100644
--- a/src/routers/video/item/index.tsx
+++ b/src/routers/video/item/index.tsx
@@ -24,6 +24,7 @@ export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({
+
+ );
+}
+
+const LoadingItems: FC<{ length?: number }> = ({ length = 20 }) => (
+ <>
+ {Array.from({ length }, (value, key) => (
+ 暂无数据
+);
+
const MemoItems: FC
-
-
+
+
+);
diff --git a/src/routers/video/tools.ts b/src/routers/video/tools.ts
index ee6cd2d..8322c5e 100644
--- a/src/routers/video/tools.ts
+++ b/src/routers/video/tools.ts
@@ -2,9 +2,18 @@ import { VideoRouterMasonryType, VideoRouterImageCardType } from "./videotype";
import { fetchVideos } from "@utils/fetch/index";
import message from "@components/message";
import { Pick } from "@utils/index";
+import { RFetchVideoRes } from "@utils/fetch/fetchtype";
-export const fetchVideohandler = async (
- page: number = 1,
+type fetchVideohandlerType = (
+ page: number,
+ props: VideoRouterMasonryType
+) => Promise<{
+ data: RFetchVideoRes["data"]["result"];
+ canceledByAxios: boolean;
+}>;
+
+export const fetchVideohandler: fetchVideohandlerType = async (
+ page = 1,
props: VideoRouterMasonryType
) => {
const res = await fetchVideos({
@@ -16,11 +25,14 @@ export const fetchVideohandler = async (
if (res.code !== 0) {
res.code === 400 && message.info("参数错误,请尝试其他tag");
res.code === 500 && message.info(res.message);
- return [];
+ if (res.code === 403) {
+ return { data: [], canceledByAxios: true };
+ }
+ return { data: [], canceledByAxios: false };
} else if (res.data.result.length < 1) {
message.info("没有更多数据了,请尝试其他tag");
}
- return res.data.result;
+ return { data: res.data.result, canceledByAxios: false };
};
export function PickVideoRouterImageCardType<
diff --git a/src/routers/video/video.module.less b/src/routers/video/video.module.less
index 670ea5d..bfce141 100644
--- a/src/routers/video/video.module.less
+++ b/src/routers/video/video.module.less
@@ -13,13 +13,39 @@
}
}
-.container:empty {
- display: flex;
- justify-content: center;
+.hero-content {
+ &>section:only-child {
+ &>a:first-child {
+ flex-grow: 1;
+
+ img {
+ height: 100%;
+ }
+
+ img+div {
+ padding: 8px;
+
+ span {
+ font-size: 14px !important;
+ }
+ }
+ }
+
+ &>div:last-child {
+ justify-content: flex-start;
+
+ }
- &::before {
- margin-top: 50px;
- content: "暂无数据";
- color: #c1c1c1;
}
-}
\ No newline at end of file
+}
+
+// .container:empty {
+// display: flex;
+// justify-content: center;
+
+// &::before {
+// margin-top: 50px;
+// content: "暂无数据";
+// color: #c1c1c1;
+// }
+// }
\ No newline at end of file
diff --git a/src/store/device/index.ts b/src/store/device/index.ts
index 8a2f145..3bff900 100644
--- a/src/store/device/index.ts
+++ b/src/store/device/index.ts
@@ -1,15 +1,23 @@
-import { createSlice } from "@reduxjs/toolkit";
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import type { RootState } from "..";
+export type SelectModeType = typeof selectModeList[number];
+export const selectModeList = ["搜索tag", "搜索更多"] as const;
+
interface DeviceState {
/**
* @description nav栏是否展开
*/
navMoreShowed: boolean;
+ /**
+ *
+ */
+ selectSearchMode: SelectModeType;
}
const initialState: DeviceState = {
navMoreShowed: false,
+ selectSearchMode: "搜索tag",
};
export const DeviceSlice = createSlice({
name: "device",
@@ -21,14 +29,22 @@ export const DeviceSlice = createSlice({
changeNavMoreShowed: (state) => {
state.navMoreShowed = !state.navMoreShowed;
},
+ /**
+ * @description 修改搜索模式
+ */
+ changeSearchMode: (state, action: PayloadAction