💄 style(custom): 修改pc端顶部样式

ISSUES CLOSED: #29
EOEFANS · Mar 2, 2023 · 6af984c · 6af984c
1 parent e844579
commit 6af984c
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 55 deletions.
diff --git a/src/routers/index.tsx b/src/routers/index.tsx
@@ -1,3 +1,7 @@
+/**
+ * 此页面作废
+ */
+
 export default function Index() {
   return <h1>这里是首页</h1>;
 }
diff --git a/src/routers/layout/header.tsx b/src/routers/layout/header.tsx
@@ -25,7 +25,7 @@ const ReactiveHeader = memo(() => {
   return (
     <header className='z-10 sticky top-0 bg-white'>
       {/* 手机端 */}
-      <div className='hidden max-sm:flex px-6 pb-3 pt-4'>
+      <div className='hidden max-sm:flex transition-all duration-300 px-6 pb-3 pt-4 max-[400px]:px-2'>
         <Search />
       </div>
       {/* pc端和平板端header部 */}

diff --git a/src/routers/layout/index.tsx b/src/routers/layout/index.tsx
@@ -27,7 +27,7 @@ export default function Layout() {
           <ImportTantInfo />
         </div>
         <Header />
-        <div className='px-2 flex justify-center'>
+        <div className='p-2 flex justify-center'>
           <Header_Nav />
         </div>
         <Flipped flipId={"container"} spring={"veryGentle"}>

diff --git a/src/routers/layout/logo/index.tsx b/src/routers/layout/logo/index.tsx
@@ -1,4 +1,5 @@
 import { Button, Badge, Menu, MenuItem } from "@mui/material";
+import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import { useState, useMemo, FC } from "react";
 import { Explain, Yituo } from "./modal";
 import styles from "./logo.module.less";
@@ -50,6 +51,7 @@ const LGRouterListAndQA = () => {
           aria-haspopup='true'
           aria-expanded={open ? "true" : undefined}
           onClick={handleClick}
+          className='hover:bg-gray-200'
         >
           导航
         </Button>
@@ -60,29 +62,28 @@ const LGRouterListAndQA = () => {
           onClose={handleClose}
           elevation={2}
         >
-          <MenuItem sx={{ ":hover": { backgroundColor: "white" } }}>
-            <QAButton />
-          </MenuItem>
           {RouterList.slice(0, 2).map((item) => (
             <MenuItem
               onClick={handleClose}
               key={item.label}
               sx={{ ":hover": { backgroundColor: "white" } }}
             >
-              <Link
-                to={item.to}
-                className='px-4 py-2 text-center rounded-sm bg-white text-gray-800 transition-all duration-300 hover:bg-gray-200 '
+              <Button
+                startIcon={item.startICon}
+                className='bg-white text-gray-800 transition-all duration-300 hover:bg-gray-200 rounded-sm'
               >
-                {item.label + "站"}
-              </Link>
+                <Link to={item.to} className=''>
+                  {item.label}
+                </Link>
+              </Button>
             </MenuItem>
           ))}
         </Menu>
       </div>
     </>
   );
 };
-const QAButton = () => {
+export const AboutUSButton = () => {
   const [open, set] = useState(false);
   const [shouldShowNews, handlerReadedNews] = useCheckQANews();
   const handlerClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -92,8 +93,13 @@ const QAButton = () => {
   };
   return (
     <>
-      <Button onClick={handlerClick} className='px-4 py-2 max-[1200px]:w-full'>
-        QA
+      <Button
+        onClick={handlerClick}
+        className='px-4 py-2 text-gray-800 hover:bg-gray-200'
+        startIcon={<HelpOutlineIcon fontSize='small' />}
+        title='关于本站内容解疑'
+      >
+        关于本站
         <Show_news visible={!shouldShowNews} />
         <Explain open={open} handlerClick={handlerClick as () => void} />
       </Button>
@@ -103,18 +109,20 @@ const QAButton = () => {
 
 const RouterListAndQA = () => {
   return (
-    <>
-      <QAButton />
+    <div className='pl-2'>
       {RouterList.slice(0, 2).map((item) => (
-        <Link
+        <Button
           key={item.label}
-          to={item.to}
-          className='px-4 py-2 text-center rounded-sm bg-white text-gray-800 transition-all duration-300 hover:bg-gray-200 '
+          startIcon={item.startICon}
+          title={`前往${item.label}页`}
+          className='bg-white text-gray-800 transition-all duration-300 hover:bg-gray-200 rounded-sm'
         >
-          {item.label + "站"}
-        </Link>
+          <Link to={item.to} className=''>
+            {item.label}
+          </Link>
+        </Button>
       ))}
-    </>
+    </div>
   );
 };
 

diff --git a/src/routers/layout/nav/index.tsx b/src/routers/layout/nav/index.tsx
@@ -119,7 +119,7 @@ export default function Header_Nav(props: HeaderNavType) {
           <Stack
             direction='row'
             alignItems='center'
-            className={`${styles["navstack"]} gap-4`}
+            className={`${styles["navstack"]} gap-2`}
             style={{
               // flexWrap: showed ? "wrap" : "nowrap",
               flexWrap: shouldShow ? "wrap" : showed ? "wrap" : "nowrap",
@@ -219,44 +219,46 @@ const NavTagChipItem: FC<VideoNavQueryItemType | PhotoNavQueryItemType> = 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 (
       <Chip
         onClick={handerclick}
         label={props.query}
-        className={`rounded px-3 py-1 text-sm font-normal bg-gray-100 duration-300 hover:bg-gray-200 ${
+        className={`rounded px-3 py-1 border border-solid text-sm font-normal bg-gray-100 duration-300 hover:bg-gray-200 ${
           loading ? "cursor-wait pointer-events-none" : "cursor-pointer"
-        } ${clicked ? "text-blue-400" : "text-gray-700"}`}
-      />
-    );
-    return (
-      <Button
-        variant={clicked ? "contained" : "outlined"}
-        color={color}
-        onClick={handerclick}
-        loading={loading}
-        sx={{
-          wordBreak: "keep-all",
-          fontWeight: "600",
-          fontSize: {
-            xs: "12px",
-            sm: "14px",
-          },
-          padding: "1px 10px",
-          verticalAlign: "center",
+        }`}
+        style={{
+          color: styleColor,
+          borderColor: clicked ? "currentcolor" : "transparent",
         }}
-      >
-        {props.query}
-      </Button>
+      />
     );
   }
 );
 
+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/rightMore/index.tsx b/src/routers/layout/rightMore/index.tsx
@@ -3,6 +3,7 @@ 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";
 export default function PCRightMore() {
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
     null
@@ -18,12 +19,14 @@ export default function PCRightMore() {
 
   const open = Boolean(anchorEl);
   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'>
         <Button
           startIcon={<MoreVertIcon fontSize='small' />}
           onClick={handleClick}
           className='text-gray-800 hover:bg-gray-200'
+          title='点击查看更多'
         >
           更多
         </Button>
@@ -69,7 +72,7 @@ export default function PCRightMore() {
           </div>
         </Popover>
       </div>
-    </>
+    </div>
   );
 }
 const GroupLists: TabProps[] = [

diff --git a/src/routers/layout/routernav/index.tsx b/src/routers/layout/routernav/index.tsx
@@ -1,17 +1,21 @@
 import { Drawer } from "@mui/material";
-import { useState, FC } from "react";
+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[] = [
+export const RouterList: (TabProps & { startICon: ReactElement })[] = [
   {
     label: "视频",
     to: "/video",
+    startICon: <VideoLibraryIcon fontSize='inherit' />,
   },
   {
     label: "图片",
     to: "/photo",
+    startICon: <PhotoIcon fontSize='inherit' />,
   },
 ];