增加图片页，v0.02

EOEFANS · Jan 28, 2023 · 51dea04 · 51dea04
1 parent 4c25854
commit 51dea04
Show file tree

Hide file tree

Showing 17 changed files with 448 additions and 145 deletions.
diff --git a/src/components/image/index.tsx b/src/components/image/index.tsx
@@ -54,7 +54,7 @@ export default memo(function Image({
   return (
     <InView>
       {({ inView, ref, entry }) => (
-        <div ref={ref} className={styles.imgWrapper}>
+        <BorderDiv ref={ref} className={styles.imgWrapper}>
           <img
             width={real_width}
             height={real_height}
@@ -67,7 +67,7 @@ export default memo(function Image({
           />
           <>{observer && inView && once_callback(inView)}</>
           {children}
-        </div>
+        </BorderDiv>
       )}
     </InView>
   );
@@ -88,15 +88,7 @@ export function ImageBasic({
     <InView>
       {({ inView, ref, entry }) => (
         <BorderDiv ref={ref} className={styles.imgWrapper}>
-          <img
-            src={url}
-            style={{
-              opacity: 1.0,
-            }}
-            alt=''
-            loading='lazy'
-            {...resProps}
-          />
+          <img src={url} alt='' loading='lazy' {...resProps} />
           <>{observer && inView && once_callback(inView)}</>
           {children}
         </BorderDiv>

diff --git a/src/components/proview/themePreview.tsx b/src/components/proview/themePreview.tsx
@@ -36,9 +36,6 @@ declare module "@mui/material/Button" {
   }
 }
 const theme = createTheme({
-  typography: {
-    fontFamily: "Proxima Soft",
-  },
   palette: {
     luzao: { main: "#3dff9e", contrastText: "#fff" },
     luzaoRed: { main: "#A0191D", contrastText: "#fff" },

diff --git a/src/routers/error.tsx b/src/routers/error.tsx
@@ -1,3 +1,4 @@
+import message from "@components/message";
 import { Button } from "@mui/material";
 import { Link } from "react-router-dom";
 
@@ -24,11 +25,15 @@ export default function ErrorPage() {
         <Link to={"/"}>
           <Button>首页</Button>
         </Link>
-        和
-        <Link to={"/"}>
+        、
+        <Link to={"/video"}>
           <Button>视频页</Button>
         </Link>
-        两个页面(虽然两个是同一个页面)。
+        和
+        <Link to={"/photo"}>
+          <Button>图片页</Button>
+        </Link>
+        。
       </p>
       <p>
         请尝试点击链接
@@ -49,4 +54,5 @@ export default function ErrorPage() {
 const deleteAllDataStorage = () => {
   localStorage.clear();
   sessionStorage.clear();
+  message.info("重置网站数据成功!");
 };
diff --git a/src/routers/layout/logo.tsx b/src/routers/layout/logo.tsx
@@ -1,4 +1,4 @@
-import { Button, Modal, styled } from "@mui/material";
+import { Button, Link, Modal, styled } from "@mui/material";
 import { FC, useState } from "react";
 import styles from "./layout.module.less";
 
@@ -56,6 +56,37 @@ const Explain: FC<{ open: boolean; handlerClick: () => void }> = (props) => (
               </span>
             </p>
           </li>
+          <li>
+            <p>
+              <strong>Q: </strong>
+              <span>如何进行用户反馈？</span>
+            </p>
+            <p>
+              <strong>A: </strong>
+              <span>
+                请前往
+                <Link
+                  href={`http://eoe.best/appfeedback`}
+                  target='_blank'
+                  underline='none'
+                >
+                  eoefans反馈
+                </Link>
+              </span>
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Q: </strong>
+              <span>图片页图片太小了？</span>
+            </p>
+            <p>
+              <strong>A: </strong>
+              <span>
+                图片页可点击图片进入放大镜模式，支持手势返回和空白处返回；可使用双指放大对图片大小进行调整。
+              </span>
+            </p>
+          </li>
         </ul>
         <Button
           sx={{

diff --git a/src/routers/layout/nav/tools.ts → src/routers/layout/nav/VideoTools.ts b/src/routers/layout/nav/tools.ts → src/routers/layout/nav/VideoTools.ts
@@ -3,35 +3,35 @@ import { useMemo, useState } from "react";
 import { Storage } from "../tools";
 import { getVersion } from "@utils/index";
 
-interface DnavStorage {
+export interface VideoNavStorage {
   version: string;
-  res: NavQueryItemType[];
+  res: VideoNavQueryItemType[];
 }
 
-export const NavStorage = new Storage<DnavStorage>("navTagLists");
+export const VideoNavStorage = new Storage<VideoNavStorage>("navTagLists");
 
-export function useNavList(): [
-  NavQueryItemType[],
-  React.Dispatch<React.SetStateAction<NavQueryItemType[]>>
+export function useVideoNavList(): [
+  VideoNavQueryItemType[],
+  React.Dispatch<React.SetStateAction<VideoNavQueryItemType[]>>
 ] {
   const nav_ok_lists = useMemo(() => {
-    const local_lists = NavStorage.getLocalStorage({
+    const local_lists = VideoNavStorage.getLocalStorage({
       version: getVersion(),
       res: [],
-    } as DnavStorage);
+    } as VideoNavStorage);
     if (!local_lists.version) {
-      return query_nav_list;
+      return video_query_nav_list;
     }
     //todo 修改逻辑
     if (parseFloat(local_lists.version) < parseFloat(getVersion())) {
-      return query_nav_list;
+      return video_query_nav_list;
     }
     if (PassNavList(local_lists.res)) {
       return local_lists.res;
     }
-    return query_nav_list;
+    return video_query_nav_list;
   }, []);
-  const [navLists, setLists] = useState<NavQueryItemType[]>(nav_ok_lists);
+  const [navLists, setLists] = useState<VideoNavQueryItemType[]>(nav_ok_lists);
   return [navLists, setLists];
 }
 // 判断类型
@@ -49,7 +49,7 @@ function checkPropertyType<T extends { [k: string]: any }>(
   return input.hasOwnProperty(property) && typeof input[property] === type;
 }
 //检测从localstorage提取的querylist是否满足条件
-function PassNavList(lists: NavQueryItemType[]) {
+function PassNavList(lists: VideoNavQueryItemType[]) {
   if (
     lists.length > 0 &&
     lists.every((item) => {
@@ -102,16 +102,16 @@ export type NavRouterItemType = {
   name: string;
   cancelable: boolean;
 };
-export type NavQueryItemType = {
+export type VideoNavQueryItemType = {
   id: string;
   type: "query";
   query: string;
   queryType: "q" | "tname" | "copyright" | "order";
   queryString: string;
   cancelable: boolean;
 };
-export type NavListItemType = NavQueryItemType | NavRouterItemType;
-const nav_tag_list_no_id: Omit<NavQueryItemType, "id" | "cancelable">[] = [
+export type NavListItemType = VideoNavQueryItemType | NavRouterItemType;
+const nav_tag_list_no_id: Omit<VideoNavQueryItemType, "id" | "cancelable">[] = [
     {
       type: "query",
       query: "露早",
@@ -197,8 +197,8 @@ const nav_tag_list_no_id: Omit<NavQueryItemType, "id" | "cancelable">[] = [
       queryString: "view",
     },
   ],
-  query_nav_list = nav_tag_list_no_id.map((item) => ({
+  video_query_nav_list = nav_tag_list_no_id.map((item) => ({
     ...item,
     id: nanoid(3),
     cancelable: false,
-  })) as NavQueryItemType[];
+  })) as VideoNavQueryItemType[];