feat: update

src/client/App.global.css

@@ -29,3 +29,8 @@ body {
   width: 100%;
   height: 100%;
 }
+
+img {
+  pointer-events: none;
+  user-select: none;
+}

src/client/App.tsx

@@ -1,17 +1,22 @@
-import { Suspense, useState, useCallback } from "react";
+import { Suspense, useState, useCallback, useEffect } from "react";
 import { webUtils } from "electron";
 import { HashRouter as Router, Switch, Route } from "react-router-dom";
 import Index from "./page/index";
 import Comic from "./page/comic";
 import Settings from "./page/settings";
+import * as selector from "./selector";
 import StartUpPage from "./startPage";
 import "./App.global.css";
 import { getIPC } from "./ipc";
 import { useMessage } from "@components/useMessage";
+import { Snackbar } from "@material-ui/core";
+import Alert from "@material-ui/lab/Alert";
+import { useRecoilRefresher_UNSTABLE } from "recoil";
 
 export default function App() {
   const [dragActive, setDragActive] = useState(false);
-  const { pushMessage } = useMessage();
+  const { pushMessage, messages } = useMessage();
+  const refreshComicList = useRecoilRefresher_UNSTABLE(selector.comicList);
 
   const onDragEnter = useCallback((e: React.DragEvent) => {
     e.preventDefault();
@@ -56,6 +61,24 @@ export default function App() {
       console.error("drop error:", err);
     }
   }, []);
+
+  useEffect(() => {
+    async function work() {
+      const ipc = await getIPC();
+      ipc.onMsg((msg) => {
+        pushMessage(msg, 3000);
+      });
+      ipc.onCompressFile((msg) => {
+        pushMessage(msg, 3000);
+      });
+      ipc.onCompressDone(() => {
+        pushMessage("处理完毕", 3000);
+        refreshComicList();
+      });
+    }
+    work();
+  }, []);
+
   // TODO: loading 时能自动从所有logo中选一张岂不是完美了。
   return (
     <div
@@ -94,6 +117,23 @@ export default function App() {
           将漫画文件夹或压缩包拖到这里以导入（松开即可导入）
         </div>
       )}
+
+      <Snackbar
+        open={messages.length > 0}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+      >
+        <div>
+          {messages
+            .filter((msg) => msg.id)
+            .map((item) => {
+              return (
+                <Alert severity="info" key={item.id} className="mt-2">
+                  {item.msg}
+                </Alert>
+              );
+            })}
+        </div>
+      </Snackbar>
     </div>
   );
 }

src/client/components/appbar.tsx

@@ -1,15 +1,12 @@
-import React, { useRef, useCallback, useEffect, useState } from "react";
+import React, { useRef, useCallback, useState } from "react";
 import Typography from "@material-ui/core/Typography";
 import SearchIcon from "@material-ui/icons/Search";
-import Alert from "@material-ui/lab/Alert";
-import { Snackbar } from "@material-ui/core";
 import { Link } from "react-router-dom";
 import { useRecoilRefresher_UNSTABLE } from "recoil";
 import * as selector from "../selector";
 import { getIPC } from "../ipc";
 import { UnaryFunction } from "../../shared/type";
 import Popup from "./Popup";
-import { useMessage } from "./useMessage";
 
 interface ElectronWebtoonAppBarProps {
   onSearch?: UnaryFunction<string | null>;
@@ -32,25 +29,6 @@ const ElectronWebtoonAppBar: React.FC<ElectronWebtoonAppBarProps> = ({
       onSearch(searchRef.current.value);
     }
   }, []);
-  const { messages, pushMessage } = useMessage();
-
-  useEffect(() => {
-    async function work() {
-      const ipc = await getIPC();
-      ipc.onMsg((msg) => {
-        pushMessage(msg, 3000);
-      });
-      ipc.onCompressFile((msg) => {
-        pushMessage(msg, 3000);
-      });
-      ipc.onCompressDone(() => {
-        pushMessage("处理完毕", 3000);
-        refreshComicList();
-      });
-    }
-    work();
-  }, [refreshComicList]);
-
   const onClickAddFile = useCallback(async () => {
     (await getIPC()).takeCompressAndAddToComic();
   }, []);
@@ -77,21 +55,6 @@ const ElectronWebtoonAppBar: React.FC<ElectronWebtoonAppBarProps> = ({
         </Link>
       </Typography>
 
-      <Snackbar
-        open={messages.length > 0}
-        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-      >
-        <div>
-          {messages.map((item) => {
-            return (
-              <Alert severity="info" key={item.id} className="mt-2">
-                {item.msg}
-              </Alert>
-            );
-          })}
-        </div>
-      </Snackbar>
-
       {hasSearch && (
         <form
           onSubmit={onSubmitSearch}

src/client/components/useMessage.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import { atom, useRecoilState } from "recoil";
 export interface IMsg {
   msg: string;
@@ -12,18 +12,20 @@ const messageAtom = atom<IMsg[]>({
 
 export function useMessage() {
   const [messages, setMessages] = useRecoilState(messageAtom);
+  const setMessagesRef = useRef(setMessages);
+  setMessagesRef.current = setMessages;
   const pushMessage = useCallback((msg, ms) => {
     const id = Math.random().toString(16).slice(2);
     const msgItem = {
       msg,
       id,
     };
     setTimeout(() => {
-      setMessages((msgs) => {
+      setMessagesRef.current((msgs) => {
         return msgs.filter((item) => item.id !== id);
       });
     }, ms);
-    setMessages((msgs) => {
+    setMessagesRef.current((msgs) => {
       return msgs.concat(msgItem);
     });
   }, []);

src/server/comicsservice.ts

@@ -84,10 +84,20 @@ async function buildComicImgList(
         deep - 1,
         makeUrl,
       );
-      result.push({
-        name: fileOrDirName,
-        list,
-      });
+
+      if (list.length) {
+        const isPureImgList = list.every((item) => {
+          return typeof item === "string";
+        });
+        if (isPureImgList) {
+          result.push({
+            name: fileOrDirName,
+            list,
+          });
+        } else {
+          result.push(...list);
+        }
+      }
     } else {
       singlePics.push(makeUrl(path.resolve(pathname, fileOrDirName)));
     }
@@ -110,7 +120,7 @@ async function buildComicImgList(
 
 async function getCoverUrl(comicPath: string, makeUrl: IMakeUrl) {
   try {
-    const list = flatten(await buildComicImgList(comicPath, 2, makeUrl));
+    const list = flatten(await buildComicImgList(comicPath, 3, makeUrl));
     return list[0] || list[1];
   } catch (e) {
     return null;
@@ -228,21 +238,24 @@ export default class ComicService {
       return filename;
     });
     return await new Promise((resolve, reject) => {
-      imageSize(coverUrl, (err: any, dimen: { width: any; height: any }) => {
-        if (err) {
-          console.log(coverUrl);
-          reject(err);
-          return;
-        }
-        resolve({
-          path: pathstr,
-          width: dimen.width,
-          height: dimen.height,
-          coverFileName: coverUrl,
-          name: ps[ps.length - 1],
-          id: uuidv4(),
-        });
-      });
+      imageSize(
+        coverUrl || "",
+        (err: any, dimen: { width: any; height: any }) => {
+          if (err) {
+            console.log(coverUrl);
+            reject(err);
+            return;
+          }
+          resolve({
+            path: pathstr,
+            width: dimen.width,
+            height: dimen.height,
+            coverFileName: coverUrl || undefined,
+            name: ps[ps.length - 1],
+            id: uuidv4(),
+          });
+        },
+      );
     });
   }
 
@@ -321,7 +334,6 @@ export default class ComicService {
    * Compress files will be decompressed to the configured cache and added.
    */
   async handleDroppedFiles(paths: string[]) {
-    console.log(paths);
     if (!paths || !paths.length) return;
     const cachePath = this.store.get("decompressPath");