🧐 test(custom): eu都在溜什么测试版

目前已知道的缺点有：页面太卡

config/vite.dev.config.ts

@@ -37,6 +37,10 @@ export default defineConfig({
         target: "https://api.vtb.link/eoefans-api",
         changeOrigin: true,
       },
+      "/eoefans-video-rank/v1": {
+        target: "https://api.eoefans.com",
+        changeOrigin: true,
+      },
     },
   },
 });

package.json

@@ -47,7 +47,8 @@
     "react-photo-view": "^1.2.3",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.9.0",
-    "react-use": "^17.4.0"
+    "react-use": "^17.4.0",
+    "recoil": "^0.7.7"
   },
   "devDependencies": {
     "@babel/core": "^7.21.3",

src/main.tsx

@@ -5,6 +5,7 @@ import VideoPage from "./routers/video";
 import Layout from "./routers/layout";
 import PhotoPage from "./routers/photo";
 import ErrorPage from "./routers/error";
+import OnlinePage from "./routers/online";
 //preview
 import ScreenProview from "@components/proview/screenSize";
 import MUIThemePreview from "@components/proview/themePreview";
@@ -21,6 +22,7 @@ import "./index.less";
 import * as Sentry from "@sentry/react";
 import { BrowserTracing } from "@sentry/tracing";
 import SearchPage, { loader as SearchLoader } from "@routers/search";
+import { RecoilRoot } from "recoil";
 if (!isdev && isrelease) {
   Sentry.init({
     dsn: "https://086f27258cce4d28aacc8c2719a683fb@sentry.vtb.link/3",
@@ -82,6 +84,11 @@ const router = createBrowserRouter([
             element: <SearchPage />,
             loader: SearchLoader,
           },
+          {
+            //eu都在溜什么的页面
+            path: "online",
+            element: <OnlinePage />,
+          },
         ],
       },
     ],
@@ -93,7 +100,9 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
     <MUIThemePreview>
       <SearchFocuspreview>
         <Provider store={store}>
-          <RouterProvider router={router} />
+          <RecoilRoot>
+            <RouterProvider router={router} />
+          </RecoilRoot>
         </Provider>
       </SearchFocuspreview>
     </MUIThemePreview>

src/routers/layout/index.tsx

@@ -23,9 +23,6 @@ export default function Layout() {
           },
         }}
       >
-        <div className='max-sm:hidden h-12 flex justify-center items-center relative z-20 bg-white'>
-          <ImportTantInfo />
-        </div>
         <Header />
         <FixedNav />
         <Flipped flipId={"container"} spring={"veryGentle"}>
@@ -53,17 +50,3 @@ const FixedNav = () => {
     </>
   );
 };
-
-export const ImportTantInfo = () => (
-  <>
-    <Link
-      href='https://b23.tv/oi3Rv0B'
-      target={`_blank`}
-      color={"inherit"}
-      underline='none'
-    >
-      征集小队长生贺视频
-      <ArrowOutwardIcon fontSize='small' />
-    </Link>
-  </>
-);

src/routers/layout/logo/index.tsx

@@ -51,7 +51,7 @@ const LGRouterListAndQA = () => {
           aria-haspopup='true'
           aria-expanded={open ? "true" : undefined}
           onClick={handleClick}
-          className='hover:bg-gray-200'
+          className='hover:bg-gray-200 text-gray-800 text-base'
         >
           导航
         </Button>
@@ -62,15 +62,15 @@ const LGRouterListAndQA = () => {
           onClose={handleClose}
           elevation={2}
         >
-          {RouterList.slice(0, 2).map((item) => (
+          {RouterList.slice(0, 3).map((item) => (
             <MenuItem
               onClick={handleClose}
               key={item.label}
-              sx={{ ":hover": { backgroundColor: "white" } }}
+              sx={{ ":hover": { backgroundColor: "rgb(229 231 235)" } }}
             >
               <Button
                 startIcon={item.startICon}
-                className='bg-white text-gray-800 transition-all duration-300 hover:bg-gray-200 rounded-sm'
+                className=' bg-transparent text-gray-800 transition-all duration-300 rounded-sm'
               >
                 <Link to={item.to} className=''>
                   {item.label}

src/routers/layout/rightMore/euLink.tsx

@@ -0,0 +1,73 @@
+import { useScreenSize } from "@components/proview/screenSize";
+import { Button } from "@mui/material";
+import { useGetEuFetchParmas, useSetEuFetchParamas } from "@store/euWhatLook";
+import { IFetchEUWhatLookIngParmas } from "@utils/fetch/eu6type";
+import React from "react";
+import { Link, useMatch } from "react-router-dom";
+import { RouterList } from "../routernav/index";
+export default function Index() {
+  const isOnline = useMatch("/online");
+  return (
+    <div>
+      {isOnline && <OrderSort />}
+      {!isOnline && <EULink />}
+    </div>
+  );
+}
+
+const EULink = () => {
+  const items = RouterList.filter((item) => item.to === "/online");
+  const { lg } = useScreenSize();
+  return (
+    <div>
+      {!lg &&
+        items.map((item) => (
+          <Link to={item.to} key={item.label}>
+            <Button
+              startIcon={item.startICon}
+              title={`前往${item.label}页`}
+              className={` text-gray-800 transition-all duration-300 hover:bg-gray-200 rounded-sm bg-white}`}
+            >
+              {item.label}
+            </Button>
+          </Link>
+        ))}
+    </div>
+  );
+};
+type OrderItem = {
+  label: string;
+  param: IFetchEUWhatLookIngParmas;
+};
+const OrderItemLists: OrderItem[] = [
+  {
+    label: "在线人数",
+    param: "online",
+  },
+  {
+    label: "投稿时间",
+    param: "pubdate",
+  },
+];
+const OrderSort = () => {
+  const curParmas = useGetEuFetchParmas();
+  const filterItem = OrderItemLists.filter((item) => item.param !== curParmas);
+  const curItem = OrderItemLists.filter((item) => item.param === curParmas);
+  const updateParamer = useSetEuFetchParamas(),
+    handleUpdateParmas = () => updateParamer(filterItem[0].param);
+  return (
+    <div>
+      {curItem.map((item) => (
+        <button
+          className='px-4 py-2 rounded-sm hover:bg-gray-200 transition-all duration-200'
+          type='button'
+          key={item.label}
+          onClick={handleUpdateParmas}
+          title={`当前排序规则`}
+        >
+          {item.label}
+        </button>
+      ))}
+    </div>
+  );
+};

src/routers/layout/rightMore/index.tsx

@@ -3,15 +3,16 @@ 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";
+import { AboutUSButton } from "../logo";
+import EuLink from "./euLink";
 export default function PCRightMore() {
   const { open, anchorEl, handleClick, handleClose } =
     usePopoverConfig<HTMLButtonElement>();
   return (
     <div className='flex justify-end items-center gap-2 max-md:gap-0 whitespace-nowrap'>
-      <AboutUSButton />
       <div className='pr-2 flex justify-end items-center'>
+        <EuLink />
         <Button
           startIcon={<MoreVertIcon fontSize='small' />}
           onClick={handleClick}
@@ -54,6 +55,9 @@ export default function PCRightMore() {
                 ))}
               </div>
             </PopoverItem>
+            <PopoverItem title='更多信息'>
+              <AboutUSButton />
+            </PopoverItem>
             <PopoverItem title='用户信息'>
               <span className='text-center block text-gray-500 text-sm'>
                 敬请期待

src/routers/layout/routernav/index.tsx

@@ -1,21 +1,27 @@
 import { Drawer } from "@mui/material";
-import PhotoIcon from "@mui/icons-material/Photo";
-import VideoLibraryIcon from "@mui/icons-material/VideoLibrary";
+import InsertPhotoOutlinedIcon from "@mui/icons-material/InsertPhotoOutlined";
+import VideoLibraryOutlinedIcon from "@mui/icons-material/VideoLibraryOutlined";
 import { useState, FC, ReactElement } from "react";
 import { Link, useMatch } from "react-router-dom";
 import CloseIcon from "@mui/icons-material/Close";
+import NewReleasesOutlinedIcon from "@mui/icons-material/NewReleasesOutlined";
 import Header_Nav from "../nav";
-import { ImportTantInfo } from "..";
+
 export const RouterList: (TabProps & { startICon: ReactElement })[] = [
   {
     label: "视频",
     to: "/video",
-    startICon: <VideoLibraryIcon fontSize='inherit' color='inherit' />,
+    startICon: <VideoLibraryOutlinedIcon fontSize='inherit' color='inherit' />,
   },
   {
     label: "图片",
     to: "/photo",
-    startICon: <PhotoIcon fontSize='inherit' color='inherit' />,
+    startICon: <InsertPhotoOutlinedIcon fontSize='inherit' color='inherit' />,
+  },
+  {
+    label: "Eu都在溜什么",
+    to: "/online",
+    startICon: <NewReleasesOutlinedIcon fontSize='inherit' color='inherit' />,
   },
 ];
 
@@ -46,11 +52,6 @@ export default function RouterNav() {
               onClick={handlerChangeShow}
             />
           </div>
-          <DrawerNavContent title={"视频征集"}>
-            <div className='flex justify-center items-center'>
-              <ImportTantInfo />
-            </div>
-          </DrawerNavContent>
           <DrawerHrefItem
             title='页面'
             data={RouterList}
@@ -102,8 +103,8 @@ const DrawerHrefLink: FC<TabProps & Pick<DrawerHrefItemType, "onClose">> = (
     <Link
       onClick={onClose}
       to={to}
-      className={`px-4 py-2 text-center bg-gray-100 rounded-md text-gray-800 ${
-        isMatch && `text-blue-400`
+      className={`px-4 py-2 text-center bg-gray-100 rounded-md whitespace-nowrap ${
+        isMatch ? `text-blue-400` : "text-gray-800"
       }`}
     >
       {label}
@@ -113,7 +114,7 @@ const DrawerHrefLink: FC<TabProps & Pick<DrawerHrefItemType, "onClose">> = (
 
 const DrawerHrefItem: FC<DrawerHrefItemType> = ({ title, data, onClose }) => (
   <DrawerNavContent title={title}>
-    <div className='grid grid-cols-3 gap-2 max-sm:gap-10 max-[400px]:gap-2'>
+    <div className='grid grid-cols-3 gap-10 max-[500px]:gap-2 max-[500px]:grid-cols-2'>
       {data.map((item, key) => (
         <DrawerHrefLink {...item} onClose={onClose} key={key} />
       ))}

src/routers/layout/search/pc/pc.module.less

@@ -77,5 +77,5 @@
 }
 
 .suggestMaxHeight {
-    max-height: calc(100vh - 200px);
+    max-height: calc(100vh - 160px);
 }