fix ant-design/ant-design-pro#4430, better ts code

kerrzhao · Jun 24, 2019 · 579690a · 579690a
1 parent 1122f6f
commit 579690a
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 70 deletions.
diff --git a/DashboardWorkplace/package.json b/DashboardWorkplace/package.json
@@ -19,10 +19,10 @@
     "prop-types": "^15.5.10",
     "react": "^16.6.3",
     "redux": "^4.0.1",
+    "umi": "^2.6.9",
     "umi-request": "^1.0.0"
   },
   "devDependencies": {
-    "umi": "^2.6.9",
     "umi-plugin-block-dev": "^1.0.0"
   },
   "license": "MIT",

diff --git a/DashboardWorkplace/src/index.tsx b/DashboardWorkplace/src/index.tsx
@@ -1,5 +1,5 @@
-import { Avatar, Card, Col, List, Row } from 'antd';
-import React, { PureComponent } from 'react';
+import { Avatar, Card, Col, List, Skeleton, Row, Statistic } from 'antd';
+import React, { Component } from 'react';
 
 import { Dispatch } from 'redux';
 import Link from 'umi/link';
@@ -50,6 +50,44 @@ interface BLOCK_NAME_CAMEL_CASEProps {
   activitiesLoading: boolean;
 }
 
+const PageHeaderContent: React.FC<{ currentUser: CurrentUser }> = ({ currentUser }) => {
+  const loading = currentUser && Object.keys(currentUser).length;
+  if (!loading) {
+    return <Skeleton avatar paragraph={{ rows: 1 }} active />;
+  }
+  return (
+    <div className={styles.pageHeaderContent}>
+      <div className={styles.avatar}>
+        <Avatar size="large" src={currentUser.avatar} />
+      </div>
+      <div className={styles.content}>
+        <div className={styles.contentTitle}>
+          早安，
+          {currentUser.name}
+          ，祝你开心每一天！
+        </div>
+        <div>
+          {currentUser.title} |{currentUser.group}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ExtraContent: React.FC<{}> = () => (
+  <div className={styles.extraContent}>
+    <div className={styles.statItem}>
+      <Statistic title="项目数" value={56} />
+    </div>
+    <div className={styles.statItem}>
+      <Statistic title="团队内排名" value={8} suffix="/ 24" />
+    </div>
+    <div className={styles.statItem}>
+      <Statistic title="项目访问" value={2223} />
+    </div>
+  </div>
+);
+
 @connect(
   ({
     BLOCK_NAME_CAMEL_CASE: { currentUser, projectNotice, activities, radarData },
@@ -67,7 +105,7 @@ interface BLOCK_NAME_CAMEL_CASEProps {
     activitiesLoading: loading.effects['BLOCK_NAME_CAMEL_CASE/fetchActivitiesList'],
   }),
 )
-class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<BLOCK_NAME_CAMEL_CASEProps> {
+class PAGE_NAME_UPPER_CAMEL_CASE extends Component<BLOCK_NAME_CAMEL_CASEProps> {
   componentDidMount() {
     const { dispatch } = this.props;
     dispatch({
@@ -124,46 +162,11 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<BLOCK_NAME_CAMEL_CASEProp
       radarData,
     } = this.props;
 
-    const pageHeaderContent =
-      currentUser && Object.keys(currentUser).length ? (
-        <div className={styles.pageHeaderContent}>
-          <div className={styles.avatar}>
-            <Avatar size="large" src={currentUser.avatar} />
-          </div>
-          <div className={styles.content}>
-            <div className={styles.contentTitle}>
-              早安，
-              {currentUser.name}
-              ，祝你开心每一天！
-            </div>
-            <div>
-              {currentUser.title} |{currentUser.group}
-            </div>
-          </div>
-        </div>
-      ) : null;
-
-    const extraContent = (
-      <div className={styles.extraContent}>
-        <div className={styles.statItem}>
-          <p>项目数</p>
-          <p>56</p>
-        </div>
-        <div className={styles.statItem}>
-          <p>团队内排名</p>
-          <p>
-            8<span> / 24</span>
-          </p>
-        </div>
-        <div className={styles.statItem}>
-          <p>项目访问</p>
-          <p>2,223</p>
-        </div>
-      </div>
-    );
-
     return (
-      <PageHeaderWrapper content={pageHeaderContent} extraContent={extraContent}>
+      <PageHeaderWrapper
+        content={<PageHeaderContent currentUser={currentUser} />}
+        extraContent={<ExtraContent />}
+      >
         <Row gutter={24}>
           <Col xl={16} lg={24} md={24} sm={24} xs={24}>
             <Card

diff --git a/DashboardWorkplace/src/style.less b/DashboardWorkplace/src/style.less
@@ -38,7 +38,6 @@
   display: flex;
   .avatar {
     flex: 0 1 72px;
-    margin-bottom: 8px;
     & > span {
       display: block;
       width: 72px;

diff --git a/UserLogin/package.json b/UserLogin/package.json
@@ -20,11 +20,11 @@
     "react": "^16.6.3",
     "redux": "^4.0.1",
     "umi-plugin-react": "^1.8.4",
+    "umi": "^2.6.9",
     "umi-request": "^1.0.0"
   },
   "devDependencies": {
     "@types/qs": "^6.5.3",
-    "umi": "^2.6.9",
     "umi-plugin-block-dev": "^1.0.0"
   },
   "license": "MIT",

diff --git a/_scripts/screenshot.js b/_scripts/screenshot.js
@@ -1,4 +1,3 @@
-
 const { spawn } = require('child_process');
 const puppeteer = require('puppeteer');
 const { join, dirname } = require('path');
@@ -42,19 +41,23 @@ const startServer = async path => {
   });
 };
 
-const autoScroll = page => page.evaluate(() => new Promise((resolve, reject) => {
-      let totalHeight = 0;
-      const distance = 100;
-      var timer = setInterval(() => {
-        const { scrollHeight } = document.body;
-        window.scrollBy(0, distance);
-        totalHeight += distance;
-        if (totalHeight >= scrollHeight) {
-          clearInterval(timer);
-          resolve();
-        }
-      }, 100);
-    }));
+const autoScroll = page =>
+  page.evaluate(
+    () =>
+      new Promise((resolve, reject) => {
+        let totalHeight = 0;
+        const distance = 100;
+        var timer = setInterval(() => {
+          const { scrollHeight } = document.body;
+          window.scrollBy(0, distance);
+          totalHeight += distance;
+          if (totalHeight >= scrollHeight) {
+            clearInterval(timer);
+            resolve();
+          }
+        }, 100);
+      }),
+  );
 
 const getImage = async (page, path) => {
   kill(env.PORT || 8000);
@@ -102,7 +105,11 @@ const getAllFile = async () => {
       return false;
     }
     if (stat.isDirectory()) {
-      return true;
+      const havePackage = fs.existsSync(join(itemPath, 'package.json'));
+
+      if (havePackage) {
+        return true;
+      }
     }
     return false;
   });
@@ -114,7 +121,7 @@ getAllFile().then(async dirList => {
   const loopGetImage = async index => {
     try {
       console.log(`install ${dirList[index]} dependencies`);
-      await execa('yarn', ['install', `--registry=${registry}`], {
+      await execa('yarn', ['install', `--registry=${registry}`, '--force'], {
         cwd: join(__dirname, `../${dirList[index]}`),
       });
       await getImage(page, dirList[index]);

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "scripts": {
-    "dev": "cross-env PAGES_PATH='FormBasicForm/src' umi dev",
+    "dev": "cross-env PAGES_PATH='DashboardWorkplace/src' umi dev",
     "start": "umi dev",
     "lint-staged": "lint-staged",
     "lint": "npm run lint:js && npm run lint:style",
@@ -38,26 +38,26 @@
   "devDependencies": {
     "@types/classnames": "^2.2.7",
     "@types/numeral": "^0.0.25",
+    "@umijs/fabric": "^1.0.5",
     "check-prettier": "^1.0.3",
     "cross-port-killer": "^1.1.1",
+    "eslint": "^5.16.0",
     "execa": "^1.0.0",
     "getnpmregistry": "^1.0.1",
     "glob": "^7.1.3",
     "husky": "^2.2.0",
+    "import-sort-cli": "^6.0.0",
+    "import-sort-parser-babylon": "^6.0.0",
+    "import-sort-parser-typescript": "^6.0.0",
+    "import-sort-style-module": "^6.0.0",
     "lint-staged": "^8.1.0",
     "prettier": "1.15.2",
     "stylelint": "^10.0.1",
-    "eslint": "^5.16.0",
     "typescript": "^3.5.1",
     "umi": "^2.6.17",
     "umi-plugin-block-dev": "^2.1.11",
     "umi-plugin-react": "^1.8.4",
-    "umi-request": "^1.0.0",
-    "@umijs/fabric": "^1.0.5",
-    "import-sort-cli": "^6.0.0",
-    "import-sort-parser-babylon": "^6.0.0",
-    "import-sort-parser-typescript": "^6.0.0",
-    "import-sort-style-module": "^6.0.0"
+    "umi-request": "^1.0.0"
   },
   "peerDependencies": {
     "antd": "^3.17.0"
@@ -67,4 +67,4 @@
     "**/*.less",
     "**/*.md"
   ]
-}
+}