first

Qquanwei · Jun 9, 2021 · 00b95de · 00b95de
1 parent 0d70948
commit 00b95de
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -3,9 +3,9 @@
 
 ## 软件截图
 
-![](./screenshots/home.png | width=200)
+![](/screenshots/home.png | width=200)
 
-![](./screenhosts/one.png | width=200)
+![](/screenhosts/one.png | width=200)
 
 ## Install
 

diff --git a/src/api/index.js b/src/api/index.js
@@ -43,3 +43,13 @@ export function removeComic(id) {
     method: 'DELETE',
   });
 }
+
+export function saveComicTag(id, tag) {
+  return fetch(`/bookmark`, {
+    method: 'POST',
+    body: JSON.stringify({
+      tag,
+      id,
+    }),
+  });
+}
diff --git a/src/localserver.js b/src/localserver.js
@@ -9,14 +9,27 @@ import { v4 as uuidv4 } from 'uuid';
 import bodyParser from 'koa-bodyparser';
 import mime from 'mime-types';
 import config from './config.json';
+import { saveLocation } from './api';
 
 const basePath = app.getPath('userData');
 const configPath = basePath;
 
 const configFilename = '.electron-webtton-comic.json';
 const configFileFullPath = path.resolve(configPath, configFilename);
 
-// config.library [Array<string>] 存放已经添加的漫画书
+// config.library [Array<{id}>] 存放已经添加的漫画书
+
+async function getConfig() {
+  return JSON.parse(await fsPromisese.readFile(configFileFullPath));
+}
+
+async function saveConfig(config) {
+  console.log('write config:', configFileFullPath);
+  await fsPromisese.writeFile(
+    configFileFullPath,
+    JSON.stringify(config)
+  );
+}
 
 async function getComicList(ctx, next) {
   if (fs.existsSync(configFileFullPath)) {
@@ -59,9 +72,7 @@ async function getComic(ctx, next) {
     ctx.body = 'config not found';
   } else {
     const { id } = ctx.params;
-    const configJSON = JSON.parse(
-      await fsPromisese.readFile(configFileFullPath)
-    );
+    const configJSON = await getConfig();
     const comics = configJSON.library.filter((comic) => {
       return comic.id === id;
     });
@@ -79,36 +90,27 @@ async function getComic(ctx, next) {
 async function addComicToLibrary(ctx, next) {
   // 如果配置文件不存在，则创建一个新的
   if (!fs.existsSync(configFileFullPath)) {
-    await fsPromisese.writeFile(
-      configFileFullPath,
-      JSON.stringify({
-        library: [],
-      })
-    );
+    await saveConfig({
+      library: [],
+    });
   }
 
   try {
-    const config = JSON.parse(await fsPromisese.readFile(configFileFullPath));
+    const config = await getConfig();
     const oldLibrary = config?.library || [];
     const newComicItem = await buildNewCommic(ctx.request.body.path);
     const newLibrary = oldLibrary.concat(newComicItem);
-    await fsPromisese.writeFile(
-      configFileFullPath,
-      JSON.stringify({
+    await saveConfig({
         ...config,
         library: newLibrary,
-      })
-    );
-    console.log('写入配置 ', configFileFullPath);
+    });
     ctx.status = 200;
     ctx.body = {
       success: true,
     };
   } catch (e) {
     console.error(e);
   }
-
-  await next();
 }
 
 async function removeComic(ctx, next) {
@@ -136,16 +138,14 @@ async function removeComic(ctx, next) {
         library: newLibrary,
       })
     );
-    console.log('写入配置 ', configFileFullPath);
+    console.log('write config ', configFileFullPath);
     ctx.status = 200;
     ctx.body = {
       success: true,
     };
   } catch (e) {
     console.error(e);
   }
-
-  await next();
 }
 
 const supportExts = [
@@ -207,7 +207,7 @@ async function getComicImgList(ctx, next) {
     ctx.body = 'config not found';
   } else {
     const { id } = ctx.params;
-    const config = JSON.parse(await fsPromisese.readFile(configFileFullPath));
+    const config = await getConfig();
     const comics = config.library.filter((comic) => {
       return comic.id === id;
     });
@@ -222,7 +222,6 @@ async function getComicImgList(ctx, next) {
       ctx.status = 200;
     }
   }
-  await next();
 }
 
 async function responseImg(ctx, next) {
@@ -231,23 +230,49 @@ async function responseImg(ctx, next) {
   const ext = path.extname(filename);
   ctx.response.set('Content-Type', mime.lookup(ext));
   ctx.body = fs.createReadStream(p);
-  await next();
+}
+
+async function saveComicTag(ctx, next) {
+  try {
+    const { tag, id } = ctx.request.body;
+    const config = await getConfig();
+    const comics = config.library.filter(item => {
+      return item.id === id;
+    });
+
+    if (comics.length === 0) {
+      ctx.body = 'comic not found';
+      ctx.status = 404;
+    } else {
+      comics[0].tag = tag;
+      await saveConfig(config);
+      ctx.status = 200;
+      ctx.body = {
+        success: true
+      };
+    }
+} catch(e) {
+  console.error(e);
+}
 }
 
 export default async function hostServer() {
   const app = new Koa();
   const router = new Router();
+  console.log('i think you are not eval')
   router
+    .post('/bookmark', saveComicTag)
+    .post('/comic', addComicToLibrary)
     .delete('/comic/:id', removeComic)
     .get('/imgproxy/:filename', responseImg)
     .get('/comic/:id/imglist', getComicImgList)
     .get('/comic/:id', getComic)
     .get('/comic', getComicList)
-    .post('/comic', addComicToLibrary);
+
   app.use(bodyParser());
   app.use(router.routes());
   app.use(router.allowedMethods());
   const server = app.listen(config.localserverport);
-  console.log('启动本地服务成功');
+  console.log('start localserver success');
   return server;
 }
diff --git a/src/page/comic/index.css b/src/page/comic/index.css
@@ -43,7 +43,11 @@
 }
 
 .chaptername span {
-  font-size: 13px;
+  font-size: 12px;
   white-space: nowrap;
   cursor: pointer;
 }
+
+.chaptername.current span {
+  color: dodgerblue;
+}
diff --git a/src/page/comic/index.jsx b/src/page/comic/index.jsx
@@ -86,10 +86,11 @@ import ListItemText from '@material-ui/core/ListItemText';
 import Divider from '@material-ui/core/Divider';
 import ImportContactsIcon from '@material-ui/icons/ImportContacts';
 
-function ChapterList({ imgList, value, onChange }) {
-  const onClick = useCallback((chapter) => {
+function ChapterList({ comicId, imgList, value, onChange }) {
+  const onClick = useCallback(async (chapter) => {
     if (onChange) {
       onChange(chapter);
+      api.saveComicTag(comicId, chapter.name);
     }
   }, [onChange]);
 
@@ -108,8 +109,8 @@ function ChapterList({ imgList, value, onChange }) {
             <ListItemIcon>
               <ImportContactsIcon />
             </ListItemIcon>
-            <ListItemText className={styles.chaptername}>
-              <div onClick={() => onClick(item)}>{ item.name }</div>
+            <ListItemText className={classNames(styles.chaptername, { [styles.current]: value === item})}>
+              <div onClick={() => onClick(item)} title={item.name}>{ item.name }</div>
             </ListItemText>
             <Divider />
             {
@@ -150,20 +151,20 @@ function ComicPage({ history }) {
 
   useEffect(async () => {
     // 获取到树状列表之后，前端排序
-    const imgList = await api.fetchImgList(id);
-    setImgList(sortImgList(imgList));
-    setChapter(imgList[0]);
-  }, [id]);
-
-  useEffect(async () => {
     const requestcomic = await api.fetchComic(id);
+    const imgList = await api.fetchImgList(id);
     setComic(requestcomic);
+    setImgList(sortImgList(imgList));
+    const defaultChapter = imgList.filter(item => {
+      return item.name === requestcomic.tag;
+    });
+    setChapter(defaultChapter[0] || imgList[0]);
   }, [id]);
 
   return (
     <Container className={styles.container}>
       <Header comic={comic} />
-      <ChapterList imgList={imgList} value={chapter} onChange={setChapter} />
+      <ChapterList comicId={id} imgList={imgList} value={chapter} onChange={setChapter} />
       <ImgList imgList={chapter?.list || []} />
     </Container>
   );

diff --git a/src/page/index/index.jsx b/src/page/index/index.jsx
@@ -133,7 +133,7 @@ function IndexPage() {
                 <Link to={`/comic/${comic.id}`} >
                   <img alt="" src={comic.cover} width="100%" />
                 </Link>
-                <GridListTileBar title={comic.path} />
+                <GridListTileBar title={comic.name} />
               </GridListTile>
             );
           })}