Merge pull request #1 from Qquanwei/improve-ui

Improve UI

package.json

@@ -248,6 +248,7 @@
     "yarn-deduplicate": "^3.1.0"
   },
   "dependencies": {
+    "@koa/cors": "^3.1.0",
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
     "classnames": "^2.3.1",

src/App.global.css

@@ -7,7 +7,6 @@ body {
   color: #000;
   height: 100vh;
   font-family: sans-serif;
-  overflow-y: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -18,6 +17,7 @@ body {
 #root {
   width: 100%;
   height: 100%;
+  overflow: auto;
 }
 
 button {

src/localserver.js

@@ -3,6 +3,7 @@ import Koa from 'koa';
 import { app } from 'electron';
 import Router from 'koa-router';
 import fsPromisese from 'fs.promises';
+import cors from '@koa/cors';
 import fs from 'fs';
 import path from 'path';
 import { v4 as uuidv4 } from 'uuid';
@@ -269,6 +270,7 @@ export default async function hostServer() {
     .get('/comic/:id', getComic)
     .get('/comic', getComicList)
 
+  app.use(cors());
   app.use(bodyParser());
   app.use(router.routes());
   app.use(router.allowedMethods());

src/main.dev.ts

@@ -115,7 +115,7 @@ const createWindow = async () => {
   // 初始化本地Server
   const server = await hostServer();
   // 初始化IPC
-  initIpc(app, mainWindow, server);
+  initIpc(app, mainWindow);
 };
 
 /**

src/package.json

@@ -1,7 +1,7 @@
 {
   "name": "electron-react-boilerplate",
   "productName": "electron-webtoon",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "Electron application boilerplate based on React, React Router, Webpack, React Hot Loader for rapid application development",
   "main": "./main.prod.js",
   "author": {

src/page/comic/index.css

@@ -1,11 +1,12 @@
 .container {
   padding-top: 50px;
+  box-sizing: border-box;
   width: 100%;
   height: 100%;
 }
 
 .navbar {
-  position: absolute;
+  position: fixed;
   top: 20px;
   left: 20px;
 }
@@ -19,26 +20,27 @@
   top: 0;
   left: 320px;
   width: calc(100% - 320px);
-  overflow: auto;
   box-sizing: border-box;
   padding: 50px 0;
-  height: 100%;
   font-size: 0;
   background: #fff;
+  user-select: none;
 }
 
 .imglist img {
   display: block;
   max-width: 100%;
   margin: 0 auto;
+  pointer-events: none;
 }
 
 .chapter {
-  position: absolute;
+  position: fixed;
+  box-sizing: border-box;
   left: 0;
   top: 50px;
   width: 300px;
-  height: 100%;
+  height: calc(100% - 100px);
   overflow: auto;
 }
 

src/page/comic/index.jsx

@@ -57,7 +57,6 @@ function sortImgList(imgList) {
 
 
 function ImgList({ imgList }) {
-  const containerRef = useRef(null);
   function renderList(list) {
     return list.map((item, index) => {
       if (item.name) {
@@ -73,10 +72,27 @@ function ImgList({ imgList }) {
     });
   }
 
+  const autoScrollRef = useRef(false);
+
+  const onMouseUp = useCallback(() => {
+    autoScrollRef.current = false;
+  }, []);
+
+  const onMouseDown = useCallback(() => {
+    function scroll() {
+      document.scrollingElement.scrollTop += 5;
+      if (autoScrollRef.current) {
+        requestAnimationFrame(scroll);
+      }
+    }
+    autoScrollRef.current = true;
+    requestAnimationFrame(scroll);
+  }, []);
+
   useEffect(() => {
-    containerRef.current.scrollTop = 0;
+    document.scrollingElement.scrollTop = 0;
   }, [imgList]);
-  return <div ref={containerRef} className={styles.imglist}>{renderList(imgList)}</div>;
+  return <div className={styles.imglist} onMouseUp={onMouseUp} onMouseDown={onMouseDown}>{renderList(imgList)}</div>;
 }
 
 import List from '@material-ui/core/List';
@@ -158,7 +174,12 @@ function ComicPage({ history }) {
     const defaultChapter = imgList.filter(item => {
       return item.name === requestcomic.tag;
     });
-    setChapter(defaultChapter[0] || imgList[0]);
+
+    if (imgList[0].name) {
+      setChapter(defaultChapter[0] || imgList[0]);
+    } else {
+      setChapter({ list: imgList});
+    }
   }, [id]);
 
   return (

src/page/index/index.css

@@ -1,6 +1,5 @@
 .gridlist {
-  height: 100%;
-  width: 800px;
+  width: 100%;
 }
 
 .flexcenter {
@@ -10,6 +9,7 @@
 }
 
 .full {
+  box-sizing: border-box;
   height: 100%;
   height: 100%;
 }
@@ -20,6 +20,13 @@
 }
 
 .card {
+  height: 200px;
+}
+
+.card a {
+  display: block;
+  width: 100%;
+  height: 100%;
 }
 
 .addcard {
@@ -60,5 +67,28 @@
 }
 
 .container {
-  padding-top: 50px;
+  padding: 0;
+}
+
+.starbar {
+}
+
+.starlist {
+  box-sizing: border-box;
+  margin: 30px 0 20px;
+  height: 200px;
+  padding: 0 30px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+}
+
+.starlist::after {
+  clear: both;
+}
+
+.starbar .card {
+  display: inline-block;
+  width: 200px;
+  height: 200px;
 }

src/page/index/index.jsx

@@ -30,6 +30,31 @@ import plusSVG from './plus.svg';
 import styles from './index.css';
 import * as api from '../../api';
 
+// 展示收藏
+function StarBar({ list }) {
+  return (
+    <div className={styles.starbar}>
+      <h1>收藏列表</h1>
+      <div className={styles.starlist}>
+      {
+        list.map((comic, index) => {
+          return (
+            <div key={index} className={styles.card}
+                data-id={comic.id}
+            >
+                <Link to={`/comic/${comic.id}`} >
+                  <img alt="" src={comic.cover} width="100%" />
+                </Link>
+                <div>{ comic.name } </div>
+              </div>
+          )
+        })
+      }
+      </div>
+    </div>
+  );
+}
+
 function IndexPage() {
   const [comicList, setComicList] = useState([]);
   const [showMenu, setShowMenu] = useState(null);
@@ -75,9 +100,11 @@ function IndexPage() {
     setComicList(list);
   }, []);
 
+  // <StarBar list={comicList} />
   return (
     <div>
       <AppBar position="static">
+
         <Toolbar>
           <Typography variant="h6" noWrap>
             ElectronWebtoon
@@ -98,6 +125,8 @@ function IndexPage() {
           <div  />
         </Toolbar>
       </AppBar>
+
+      <h1>漫画库</h1>
       <Container className={styles.container}>
         <Menu
           id="simple-menu"
@@ -110,7 +139,7 @@ function IndexPage() {
         </Menu>
 
 
-        <GridList cellHeight={160} cols={3} className={styles.gridlist}>
+        <GridList cellHeight={160} spacing={2} cols={3} className={styles.gridlist}>
           <GridListTile cols={1} className={classNames(styles.card)}>
             <div
               className={classNames(

yarn.lock

@@ -1392,6 +1392,13 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
+"@koa/cors@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@koa/cors/-/cors-3.1.0.tgz#618bb073438cfdbd3ebd0e648a76e33b84f3a3b2"
+  integrity sha512-7ulRC1da/rBa6kj6P4g2aJfnET3z8Uf3SWu60cjbtxTA5g8lxRdX/Bd2P92EagGwwAhANeNw8T8if99rJliR6Q==
+  dependencies:
+    vary "^1.1.2"
+
 "@malept/cross-spawn-promise@^1.1.0", "@malept/cross-spawn-promise@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@malept/cross-spawn-promise/-/cross-spawn-promise-1.1.1.tgz#504af200af6b98e198bce768bc1730c6936ae01d"