updated README

README.md

@@ -2,10 +2,39 @@
 
 文章自动发布管理工具
 
+## 预览截图
+
+#### 平台管理
+
+![](https://raw.githubusercontent.com/tikazyq/my-static-files/master/artipub/screenshots/artipub-platform.png)
+
+#### 文章管理
+
+![](https://raw.githubusercontent.com/tikazyq/my-static-files/master/artipub/screenshots/artipub-article.png)
+
+#### 文章编辑
+
+![](https://raw.githubusercontent.com/tikazyq/my-static-files/master/artipub/screenshots/artipub-article-edit.png)
+
+#### 文章发布
+
+![](https://raw.githubusercontent.com/tikazyq/my-static-files/master/artipub/screenshots/artipub-article-publish.png)
+
+#### Chrome插件
+
+![](https://raw.githubusercontent.com/tikazyq/my-static-files/master/artipub/screenshots/artipub-extension.png)
+
 ## 安装要求
 
-- MongoDB 3.6+
-- NodeJS 8.12+
+#### Docker安装
+
+- Docker: 18.03
+- Docker Compose: 1.24.1
+
+#### NPM或源码安装
+
+- MongoDB: 3.6+
+- NodeJS: 8.12+
 
 ## 安装方式
 
@@ -17,15 +46,36 @@ ArtiPub提供3种安装方式如下。
 
 ### 通过Docker安装
 
-通过Docker，可以免去安装MongoDB的步骤，也是我们最推荐的安装方式。
+通过Docker，可以免去安装MongoDB的步骤，也是我们最推荐的安装方式。使用Docker安装ArtiPub前，请确保您安装了Docker以及Docker Compose。
+
+在您的项目目录下创建`docker-compose.yaml`文件，输入如下内容。
+
+```yaml
+version: '3.3'
+services:
+  app:
+    image: "tikazyq/artipub:latest"
+    environment:
+      MONGO_HOST: "mongo"
+    ports:
+      - "8000:8000" # frontend
+      - "3000:3000" # backend
+    depends_on:
+      - mongo
+  mongo:
+    image: mongo:latest
+    restart: always
+    ports:
+      - "27017:27017"
+```
 
-**安装Docker Compose**
+然后在命令行中输入如下命令。
 
 ```bash
 docker-compose up
 ```
 
-就这一行命令，然后在浏览器中输入`http://localhost:8000`可以看到界面。
+然后在浏览器中输入`http://localhost:8000`可以看到界面。
 
 ### 通过npm包安装
 
@@ -49,7 +99,13 @@ npm install -g artipub --registry=https://registry.npm.taobao.org
 artipub start
 ```
 
-然后在浏览器中输入`http://localhost:8000`可以看到界面。
+该命令默认会使用`localhost:27017/artipub`为MongoDB数据库链接。输入如下命令可以看更多配置，例如配置数据库等。
+
+```bash
+artipub -h
+```
+
+成功运行后，在浏览器中输入`http://localhost:8000`可以看到界面。
 
 ### 通过源码安装
 
@@ -78,6 +134,10 @@ npm run start:frontend
 npm run start:backend
 ```
 
+**配置数据库**
+
+数据库的配置在`./config.js`中，可以按情况配置。
+
 ## 为什么创建这个工具
 
 程序员和技术人员常常会写技术文章和博客，用作技术分享、产品分享或提供咨询等等。技术博主通常需要在多个媒体渠道发布文章，例如掘金、SegmentFault、CSDN、知乎、简书、微信公众号等等，以求最大的关注度。但是，发布文章到这么多平台费时费神，需要不断地复制粘贴；同时，作者想查看阅读数时还需要来回切换各个网站来进行统计。这非常不方便。

exec.js

@@ -43,7 +43,16 @@ class Runner {
     taskCronJob.start()
 
     // 获取环境变量
-    const updateStatsCron = await models.Environment.findOne({ _id: constants.environment.UPDATE_STATS_CRON })
+    let errNum = 0
+    let updateStatsCron
+    while (errNum < 10) {
+      updateStatsCron = await models.Environment.findOne({ _id: constants.environment.UPDATE_STATS_CRON })
+      if (!updateStatsCron) {
+        await setTimeout(() => {}, 5000);
+      } else {
+        break;
+      }
+    }
 
     // 数据统计执行器
     const statsLock = new AsyncLock()

src/pages/ArticleEdit/ArticleEdit.tsx

@@ -29,7 +29,7 @@ const ArticleEdit: React.FC<ArticleEditProps> = props => {
 
   const isEdit = (): Boolean => {
     return (
-      !!location.pathname.match(/edit/) ||
+      !!location.hash.match(/edit/) ||
       (!!article.currentArticle && !!article.currentArticle._id)
     );
   };
@@ -38,7 +38,7 @@ const ArticleEdit: React.FC<ArticleEditProps> = props => {
     if (dispatch) {
       if (isEdit()) {
         // 如果为编辑文章
-        const arr = location.pathname.split('/');
+        const arr = location.hash.split('/');
         dispatch({
           type: 'article/fetchArticle',
           payload: {
@@ -49,6 +49,8 @@ const ArticleEdit: React.FC<ArticleEditProps> = props => {
         // 如果为新增文章
       }
     }
+
+    TDAPP.onEvent('文章编辑-访问页面');
   }, []);
 
   // 更新标题
@@ -166,7 +168,6 @@ const ArticleEdit: React.FC<ArticleEditProps> = props => {
     TDAPP.onEvent('文章编辑-返回');
   };
 
-  TDAPP.onEvent('文章编辑-访问页面');
 
   return (
     <BlankLayout>

src/pages/ArticleList/ArticleList.tsx

@@ -544,6 +544,8 @@ const ArticleList: React.FC<ArticleListProps> = props => {
         type: 'platform/fetchPlatformList',
       });
     }
+
+    TDAPP.onEvent('文章管理-访问页面');
   }, []);
 
   // 平台配置
@@ -686,8 +688,6 @@ const ArticleList: React.FC<ArticleListProps> = props => {
     );
   }
 
-  TDAPP.onEvent('文章管理-访问页面');
-
   return (
     <PageHeaderWrapper>
       <Modal

src/pages/PlatformList/PlatformList.tsx

@@ -437,9 +437,9 @@ const PlatformList: React.FC<PlatformListProps> = props => {
         type: 'platform/fetchPlatformList',
       });
     }
-  }, []);
 
-  TDAPP.onEvent('平台管理-访问页面');
+    TDAPP.onEvent('平台管理-访问页面');
+  }, []);
 
   return (
     <PageHeaderWrapper>