💄 style(custom): 修改首页样式以及右侧拉栏样式

还需要添加次高级搜索、加载逻辑、tag栏自定义切换
EOEFANS · Feb 25, 2023 · c9f2f31 · c9f2f31
1 parent 67a915f
commit c9f2f31
Show file tree

Hide file tree

Showing 9 changed files with 142 additions and 46 deletions.
diff --git a/config/vite.dev.config.ts.timestamp-1677330152133.mjs b/config/vite.dev.config.ts.timestamp-1677330152133.mjs
@@ -0,0 +1,48 @@
+// config/vite.dev.config.ts
+import { defineConfig } from "file:///E:/code/project/bitbucket/eoefans-web/node_modules/.pnpm/vite@4.1.4_ve7l6t5koctut52smtaue47xhi/node_modules/vite/dist/node/index.js";
+import path from "path";
+import react from "file:///E:/code/project/bitbucket/eoefans-web/node_modules/.pnpm/@vitejs+plugin-react-swc@3.2.0_vite@4.1.4/node_modules/@vitejs/plugin-react-swc/index.mjs";
+import { createHtmlPlugin } from "file:///E:/code/project/bitbucket/eoefans-web/node_modules/.pnpm/vite-plugin-html@3.2.0_vite@4.1.4/node_modules/vite-plugin-html/dist/index.mjs";
+var __vite_injected_original_dirname = "E:\\code\\project\\bitbucket\\eoefans-web\\config";
+var addProjectPath = (originPath) => `../${originPath}`;
+var vite_dev_config_default = defineConfig({
+  define: {
+    __APP_VERSION__: "0.01",
+    isdev: true,
+    isrelease: false
+  },
+  resolve: {
+    alias: {
+      "@utils": path.resolve(__vite_injected_original_dirname, addProjectPath("src/utils")),
+      "@components": path.resolve(__vite_injected_original_dirname, addProjectPath("src/components")),
+      "@store": path.resolve(__vite_injected_original_dirname, addProjectPath("src/store")),
+      "@routers": path.resolve(__vite_injected_original_dirname, addProjectPath("src/routers")),
+      "@assets": path.resolve(__vite_injected_original_dirname, addProjectPath("src/assets"))
+    }
+  },
+  plugins: [
+    react(),
+    createHtmlPlugin({
+      entry: "src/main.tsx",
+      template: "index.html",
+      inject: {
+        data: {
+          injectScript: ``
+        }
+      }
+    })
+  ],
+  server: {
+    proxy: {
+      "/v1": {
+        target: "https://api.eoe.best/eoefans-api",
+        changeOrigin: true
+      }
+    }
+  }
+});
+export {
+  addProjectPath,
+  vite_dev_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiY29uZmlnL3ZpdGUuZGV2LmNvbmZpZy50cyJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiY29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2Rpcm5hbWUgPSBcIkU6XFxcXGNvZGVcXFxccHJvamVjdFxcXFxiaXRidWNrZXRcXFxcZW9lZmFucy13ZWJcXFxcY29uZmlnXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCJFOlxcXFxjb2RlXFxcXHByb2plY3RcXFxcYml0YnVja2V0XFxcXGVvZWZhbnMtd2ViXFxcXGNvbmZpZ1xcXFx2aXRlLmRldi5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL0U6L2NvZGUvcHJvamVjdC9iaXRidWNrZXQvZW9lZmFucy13ZWIvY29uZmlnL3ZpdGUuZGV2LmNvbmZpZy50c1wiO2ltcG9ydCB7IGRlZmluZUNvbmZpZyB9IGZyb20gXCJ2aXRlXCI7XHJcbmltcG9ydCBwYXRoIGZyb20gXCJwYXRoXCI7XHJcbmltcG9ydCByZWFjdCBmcm9tIFwiQHZpdGVqcy9wbHVnaW4tcmVhY3Qtc3djXCI7XHJcbi8vcmVkaWN0UGF0aFxyXG5leHBvcnQgY29uc3QgYWRkUHJvamVjdFBhdGggPSAob3JpZ2luUGF0aDogc3RyaW5nKSA9PiBgLi4vJHtvcmlnaW5QYXRofWA7XHJcbmltcG9ydCB7IGNyZWF0ZUh0bWxQbHVnaW4gfSBmcm9tIFwidml0ZS1wbHVnaW4taHRtbFwiO1xyXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoe1xyXG4gIGRlZmluZToge1xyXG4gICAgX19BUFBfVkVSU0lPTl9fOiBcIjAuMDFcIixcclxuICAgIGlzZGV2OiB0cnVlLFxyXG4gICAgaXNyZWxlYXNlOiBmYWxzZSxcclxuICB9LFxyXG4gIHJlc29sdmU6IHtcclxuICAgIGFsaWFzOiB7XHJcbiAgICAgIFwiQHV0aWxzXCI6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUsIGFkZFByb2plY3RQYXRoKFwic3JjL3V0aWxzXCIpKSxcclxuICAgICAgXCJAY29tcG9uZW50c1wiOiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCBhZGRQcm9qZWN0UGF0aChcInNyYy9jb21wb25lbnRzXCIpKSxcclxuICAgICAgXCJAc3RvcmVcIjogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSwgYWRkUHJvamVjdFBhdGgoXCJzcmMvc3RvcmVcIikpLFxyXG4gICAgICBcIkByb3V0ZXJzXCI6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUsIGFkZFByb2plY3RQYXRoKFwic3JjL3JvdXRlcnNcIikpLFxyXG4gICAgICBcIkBhc3NldHNcIjogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSwgYWRkUHJvamVjdFBhdGgoXCJzcmMvYXNzZXRzXCIpKSxcclxuICAgIH0sXHJcbiAgfSxcclxuICBwbHVnaW5zOiBbXHJcbiAgICByZWFjdCgpLFxyXG4gICAgY3JlYXRlSHRtbFBsdWdpbih7XHJcbiAgICAgIGVudHJ5OiBcInNyYy9tYWluLnRzeFwiLFxyXG4gICAgICB0ZW1wbGF0ZTogXCJpbmRleC5odG1sXCIsXHJcbiAgICAgIGluamVjdDoge1xyXG4gICAgICAgIGRhdGE6IHtcclxuICAgICAgICAgIGluamVjdFNjcmlwdDogYGAsXHJcbiAgICAgICAgfSxcclxuICAgICAgfSxcclxuICAgIH0pLFxyXG4gIF0sXHJcbiAgc2VydmVyOiB7XHJcbiAgICBwcm94eToge1xyXG4gICAgICBcIi92MVwiOiB7XHJcbiAgICAgICAgdGFyZ2V0OiBcImh0dHBzOi8vYXBpLmVvZS5iZXN0L2VvZWZhbnMtYXBpXCIsXHJcbiAgICAgICAgY2hhbmdlT3JpZ2luOiB0cnVlLFxyXG4gICAgICB9LFxyXG4gICAgfSxcclxuICB9LFxyXG59KTtcclxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUEwVSxTQUFTLG9CQUFvQjtBQUN2VyxPQUFPLFVBQVU7QUFDakIsT0FBTyxXQUFXO0FBR2xCLFNBQVMsd0JBQXdCO0FBTGpDLElBQU0sbUNBQW1DO0FBSWxDLElBQU0saUJBQWlCLENBQUMsZUFBdUIsTUFBTTtBQUU1RCxJQUFPLDBCQUFRLGFBQWE7QUFBQSxFQUMxQixRQUFRO0FBQUEsSUFDTixpQkFBaUI7QUFBQSxJQUNqQixPQUFPO0FBQUEsSUFDUCxXQUFXO0FBQUEsRUFDYjtBQUFBLEVBQ0EsU0FBUztBQUFBLElBQ1AsT0FBTztBQUFBLE1BQ0wsVUFBVSxLQUFLLFFBQVEsa0NBQVcsZUFBZSxXQUFXLENBQUM7QUFBQSxNQUM3RCxlQUFlLEtBQUssUUFBUSxrQ0FBVyxlQUFlLGdCQUFnQixDQUFDO0FBQUEsTUFDdkUsVUFBVSxLQUFLLFFBQVEsa0NBQVcsZUFBZSxXQUFXLENBQUM7QUFBQSxNQUM3RCxZQUFZLEtBQUssUUFBUSxrQ0FBVyxlQUFlLGFBQWEsQ0FBQztBQUFBLE1BQ2pFLFdBQVcsS0FBSyxRQUFRLGtDQUFXLGVBQWUsWUFBWSxDQUFDO0FBQUEsSUFDakU7QUFBQSxFQUNGO0FBQUEsRUFDQSxTQUFTO0FBQUEsSUFDUCxNQUFNO0FBQUEsSUFDTixpQkFBaUI7QUFBQSxNQUNmLE9BQU87QUFBQSxNQUNQLFVBQVU7QUFBQSxNQUNWLFFBQVE7QUFBQSxRQUNOLE1BQU07QUFBQSxVQUNKLGNBQWM7QUFBQSxRQUNoQjtBQUFBLE1BQ0Y7QUFBQSxJQUNGLENBQUM7QUFBQSxFQUNIO0FBQUEsRUFDQSxRQUFRO0FBQUEsSUFDTixPQUFPO0FBQUEsTUFDTCxPQUFPO0FBQUEsUUFDTCxRQUFRO0FBQUEsUUFDUixjQUFjO0FBQUEsTUFDaEI7QUFBQSxJQUNGO0FBQUEsRUFDRjtBQUNGLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==
diff --git a/src/components/proview/themePreview.tsx b/src/components/proview/themePreview.tsx
@@ -1,6 +1,11 @@
 //@ts-nocheck
 import React from "react";
-import { ThemeProvider, createTheme } from "@mui/material/styles";
+import ProximaSoft from "@assets/font/ProximaSoft-Regular.woff2";
+import {
+  ThemeProvider,
+  createTheme,
+  StyledEngineProvider,
+} from "@mui/material/styles";
 import { ReactChildrenType } from "./type";
 declare module "@mui/material/styles" {
   interface Palette {
@@ -36,6 +41,25 @@ declare module "@mui/material/Button" {
   }
 }
 const theme = createTheme({
+  typography: {
+    fontFamily: "Proxima Soft, Segoe UI Tahoma, Geneva, Verdana, sans-serif",
+  },
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: `
+        @font-face {
+          font-family: 'Proxima Soft';
+          font-style: normal;
+          font-display: swap;
+          font-weight: 400;
+          src: local('Proxima Soft Regular'), local('Proxima-Soft-Regular'),
+        url('@assets/font/ProximaSoft-Regular.woff2') format('woff2'),
+        url('@assets/font/ProximaSoft-Regular.woff') format('woff'),
+        url('@assets/font/ProximaSoft-Regular.ttf') format('truetype');
+        }
+      `,
+    },
+  },
   palette: {
     luzao: { main: "#3dff9e", contrastText: "#fff" },
     luzaoRed: { main: "#A0191D", contrastText: "#fff" },
@@ -48,7 +72,11 @@ const theme = createTheme({
 });
 
 const MUIThemePreview = ({ children }: ReactChildrenType) => {
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+  return (
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </StyledEngineProvider>
+  );
 };
 
 export default MUIThemePreview;
diff --git a/src/index.less b/src/index.less
@@ -24,7 +24,9 @@
     font-style: normal;
 }
 
+
+
 body,
 html {
-    font-family: 'Proxima Soft';
+    font-family: 'Proxima Soft', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
diff --git a/src/main.tsx b/src/main.tsx
@@ -13,8 +13,9 @@ import { Provider } from "react-redux";
 import store from "@store/index";
 //ployfill
 import "intersection-observer";
-import "./normalize.css";
 import "loading-attribute-polyfill";
+//css
+import "./normalize.css";
 import "./index.less";
 // sentry
 import * as Sentry from "@sentry/react";

diff --git a/src/routers/layout/index.tsx b/src/routers/layout/index.tsx
@@ -36,7 +36,11 @@ export default function Layout() {
 
 const NavContent = () => {
   const isSearchPage = useMatch(`/search`) !== null;
-  return <div className='max-md:hidden'>{!isSearchPage && <MidContent />}</div>;
+  return (
+    <Flipped flipId={"list"}>
+      <div className='max-md:hidden'>{!isSearchPage && <MidContent />}</div>
+    </Flipped>
+  );
 };
 
 const OldNav = () => (

diff --git a/src/routers/layout/midcontent/index.tsx b/src/routers/layout/midcontent/index.tsx
@@ -4,15 +4,15 @@ import { RouterList } from "../routernav";
 import { TabProps } from "../routernav/index";
 import HeadNav from "../nav";
 import styles from "./midcontent.module.less";
+import { Flipped } from "react-flip-toolkit";
 export default function MidContent() {
   return (
     <>
       <div
-        className={`${styles["midcontent"]} flex justify-between mt-4 mb-4 gap-2`}
+        className={`${styles["midcontent"]} flex justify-between my-4 gap-2 items-start`}
       >
         <LeftLinks />
-        <div className='flex-shrink flex-grow flex justify-center gap-2 flex-wrap'>
-          {/* todo修改这个玩意 */}
+        <div className='flex-shrink py-1 overflow-x-hidden px-8 max-lg:px-4'>
           <HeadNav />
         </div>
         <RightLinks />
@@ -22,19 +22,20 @@ export default function MidContent() {
 }
 
 const LeftLinks = () => (
-  <div className='flex items-center gap-2 basis-36 flex-shrink-0'>
-    {RouterList.map((item, key) => (
-      <Link
-        to={item.to}
-        key={key}
-        className='pl-4 pr-4 pt-2 pb-2 text-center bg-white text-gray-800 transition-all hover:bg-blue-100'
-      >
-        {item.label}
-      </Link>
-    ))}
-  </div>
+  <Flipped inverseFlipId={`list`}>
+    <div className='flex items-center gap-2 basis-36 flex-shrink-0 h-14'>
+      {RouterList.map((item, key) => (
+        <Link
+          to={item.to}
+          key={key}
+          className='px-4 py-2 text-center rounded-sm bg-white text-gray-800 transition-all duration-300 hover:bg-gray-200'
+        >
+          {item.label}
+        </Link>
+      ))}
+    </div>
+  </Flipped>
 );
-`露早虞莫莞儿柚恩米诺`;
 const GroupLists: TabProps[] = [
   {
     label: "露早",
@@ -63,19 +64,21 @@ const GroupLists: TabProps[] = [
 ];
 
 const RightLinks = () => (
-  <div className='grid grid-cols-3 gap-2 text-gray-600 basis-40 flex-shrink-0'>
-    {GroupLists.map((item, key) => (
-      <Mlink
-        href={`https://space.bilibili.com/${item.to}`}
-        target='_blank'
-        key={key}
-        underline='none'
-        color='inherit'
-        className='text-sm font-normal pl-2 pr-2 pt-1 pb-1 transition-colors hover:text-blue-400'
-        title={item.label}
-      >
-        {item.label}
-      </Mlink>
-    ))}
-  </div>
+  <Flipped inverseFlipId={`list`}>
+    <div className='grid grid-cols-3 gap-2 text-gray-600 basis-40 flex-shrink-0'>
+      {GroupLists.map((item, key) => (
+        <Mlink
+          href={`https://space.bilibili.com/${item.to}`}
+          target='_blank'
+          key={key}
+          underline='none'
+          color='inherit'
+          className='text-sm font-normal pl-2 pr-2 pt-1 pb-1 transition-colors hover:text-blue-400'
+          title={item.label}
+        >
+          {item.label}
+        </Mlink>
+      ))}
+    </div>
+  </Flipped>
 );
diff --git 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";
@@ -55,7 +55,12 @@ function useSelectList() {
   return { navLists, setLists, storageSelect };
 }
 
-export default function Header_Nav() {
+type HeaderNavType = {
+  shouldShow?: boolean;
+};
+
+export default function Header_Nav(props: HeaderNavType) {
+  const { shouldShow = false } = props;
   const { navLists, setLists, storageSelect } = useSelectList();
   //tag区是否展开
   const showed = useAppSelector(selectNavMoreShowed);
@@ -114,10 +119,10 @@ export default function Header_Nav() {
           <Stack
             direction='row'
             alignItems='center'
-            className={`${styles["navstack"]}`}
+            className={`${styles["navstack"]} gap-4`}
             style={{
               // flexWrap: showed ? "wrap" : "nowrap",
-              flexWrap: "wrap",
+              flexWrap: shouldShow ? "wrap" : showed ? "wrap" : "nowrap",
             }}
             data-showed={showed}
           >
@@ -216,6 +221,14 @@ const NavTagChipItem: FC<VideoNavQueryItemType | PhotoNavQueryItemType> = memo(
     };
     //@ts-ignore
     const color = nameToColor[props.query] || "info";
+    return (
+      <Chip
+        label={props.query}
+        className={`rounded px-3 py-1 text-gray-700 text-sm font-normal bg-gray-100 duration-300 hover:bg-gray-200 ${
+          loading ? "cursor-wait" : "cursor-pointer"
+        } ${clicked ? "text-blue-400" : ""}`}
+      />
+    );
     return (
       <Button
         variant={clicked ? "contained" : "outlined"}

diff --git 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/routernav/index.tsx b/src/routers/layout/routernav/index.tsx
@@ -62,7 +62,7 @@ const DrawerNavItem: FC<Pick<DraerNavContentType, "title">> = ({ title }) => {
     <>
       {shouldShow && (
         <DrawerNavContent title={title}>
-          <Header_Nav />
+          <Header_Nav shouldShow={true} />
         </DrawerNavContent>
       )}
     </>
@@ -78,8 +78,8 @@ const DrawerHrefLink: FC<TabProps & Pick<DrawerHrefItemType, "onClose">> = (
     <Link
       onClick={onClose}
       to={to}
-      className={`pl-4 pr-4 pt-2 pb-2 text-center bg-white border-2 rounded-md text-gray-800 ${
-        isMatch && `text-sky-400`
+      className={`px-4 py-2 text-center bg-gray-100 rounded-md text-gray-800 ${
+        isMatch && `text-blue-400`
       }`}
     >
       {label}
@@ -89,7 +89,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'>
+    <div className='grid grid-cols-3 gap-2 max-sm:gap-10 max-[400px]:gap-2'>
       {data.map((item, key) => (
         <DrawerHrefLink {...item} onClose={onClose} key={key} />
       ))}