Details

c0c660e1 · qiuxu · 4f43f923 · c0c660e1 · c0c660e1 · c0c660e1
Commit c0c660e1 authored Nov 09, 2020 by qiuxu
26 changed files
--- a/.idea/antd-demo-ts.iml
+++ b/.idea/antd-demo-ts.iml
@@ -8,5 +8,9 @@
    </content>
    <orderEntry type="inheritedJdk" />
    <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="1.international-home.6395933647838c973480598b9d75d2e94c363819" level="application" />
+    <orderEntry type="library" name="pc" level="application" />
+    <orderEntry type="library" name="international-home.6395933647838c973480598b9d75d2e94c363819" level="application" />
+    <orderEntry type="library" name="footer" level="application" />
  </component>
 </module>
\ No newline at end of file
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -6,8 +6,9 @@
      <option name="myIgnoreVendorSpecificProperties" value="false" />
      <option name="myCustomPropertiesList">
        <value>
-          <list size="1">
+          <list size="2">
            <item index="0" class="java.lang.String" itemvalue="lineheight" />
+            <item index="1" class="java.lang.String" itemvalue="transition" />
          </list>
        </value>
      </option>

--- a/.idea/jsLibraryMappings.xml
+++ b/.idea/jsLibraryMappings.xml
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <file url="PROJECT" libraries="{1.international-home.6395933647838c973480598b9d75d2e94c363819, footer, international-home.6395933647838c973480598b9d75d2e94c363819, pc}" />
+  </component>
+</project>
\ No newline at end of file
--- a/aaa.html
+++ b/aaa.html
--- a/aaa.js
+++ b/aaa.js
--- a/aaa.json
+++ b/aaa.json
+[
+  {
+    "images": [
+      {
+        "src": "https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png"
+      }
+    ],
+    "initial": {
+      "scale": 1,
+      "blur": 4
+    },
+    "offset": {
+      "blur": 4
+    },
+    "offsetCurve": {
+      "blur": [
+        0,
+        0,
+        1,
+        1
+      ]
+    }
+  },
+  {
+    "images": [
+      {
+        "src": "https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png",
+        "duration": 5000
+      },
+      {
+        "src": "https://i0.hdslb.com/bfs/vc/ddad7c909e4c2cf933473e971373d825e6f06519.png",
+        "duration": 60
+      },
+      {
+        "src": "https://i0.hdslb.com/bfs/vc/173eafe211b4671e5aff059a1834f3e4579c7a5d.png",
+        "duration": 200
+      },
+      {
+        "src": "https://i0.hdslb.com/bfs/vc/f1892bc119b722c3cda5b26269c292a90a9f5f06.png",
+        "duration": 60
+      }
+    ],
+    "initial": {
+      "scale": 0.6,
+      "blur": 0
+    },
+    "offset": {
+      "translate": [
+        15,
+        0
+      ],
+      "blur": 10
+    },
+    "offsetCurve": {
+      "blur": [
+        0.3,
+        0.7,
+        0.5,
+        0.5
+      ]
+    }
+  },
+  {
+    "images": [
+      {
+        "src": "https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png"
+      }
+    ],
+    "initial": {
+      "scale": 1,
+      "translate": [
+        -50,
+        0
+      ],
+      "blur": 1
+    },
+    "offset": {
+      "translate": [
+        30,
+        0
+      ],
+      "blur": -5
+    },
+    "offsetCurve": {
+      "blur": [
+        0.25,
+        1,
+        1,
+        0
+      ]
+    }
+  },
+  {
+    "images": [
+      {
+        "src": "https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png"
+      }
+    ],
+    "initial": {
+      "scale": 0.6,
+      "translate": [
+        0,
+        7
+      ],
+      "blur": 4
+    },
+    "offset": {
+      "translate": [
+        60,
+        0
+      ],
+      "blur": -10
+    },
+    "offsetCurve": {
+      "blur": [
+        0.4,
+        1,
+        1,
+        0
+      ]
+    }
+  },
+  {
+    "images": [
+      {
+        "src": "https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png"
+      }
+    ],
+    "initial": {
+      "scale": 0.6,
+      "translate": [
+        0,
+        -3
+      ],
+      "blur": 5
+    },
+    "offset": {
+      "translate": [
+        130,
+        0
+      ],
+      "blur": -10
+    },
+    "offsetCurve": {
+      "blur": [
+        0.5,
+        1,
+        1,
+        0
+      ]
+    }
+  },
+  {
+    "images": [
+      {
+        "src": "https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png"
+      }
+    ],
+    "initial": {
+      "scale": 0.65,
+      "blur": 6
+    },
+    "offset": {
+      "translate": [
+        150,
+        0
+      ],
+      "blur": -6
+    },
+    "offsetCurve": {}
+  }
+]
\ No newline at end of file
--- a/package-lock.json
+++ b/package-lock.json
@@ -1309,6 +1309,8 @@
    },
    "@craco/craco": {
      "version": "5.7.0",
+      "resolved": "https://registry.npm.taobao.org/@craco/craco/download/@craco/craco-5.7.0.tgz",
+      "integrity": "sha1-rWokDg+FrJSPKTVYHaEtQiPWY2Y=",
      "requires": {
        "cross-spawn": "^7.0.0",
        "lodash": "^4.17.15",
@@ -1989,6 +1991,8 @@
    },
    "@testing-library/jest-dom": {
      "version": "5.11.5",
+      "resolved": "https://registry.npm.taobao.org/@testing-library/jest-dom/download/@testing-library/jest-dom-5.11.5.tgz?cache=0&sync_timestamp=1603458867233&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40testing-library%2Fjest-dom%2Fdownload%2F%40testing-library%2Fjest-dom-5.11.5.tgz",
+      "integrity": "sha1-RAEPN/Sx4V+dQzljtRXbCwUYL8g=",
      "requires": {
        "@babel/runtime": "^7.9.2",
        "@types/testing-library__jest-dom": "^5.9.1",
@@ -2013,6 +2017,8 @@
    },
    "@testing-library/react": {
      "version": "11.1.1",
+      "resolved": "https://registry.npm.taobao.org/@testing-library/react/download/@testing-library/react-11.1.1.tgz",
+      "integrity": "sha1-Im2Nx0kbcC/KrC19iNQokuZViTo=",
      "requires": {
        "@babel/runtime": "^7.12.1",
        "@testing-library/dom": "^7.26.4"
@@ -2020,6 +2026,8 @@
    },
    "@testing-library/user-event": {
      "version": "12.2.0",
+      "resolved": "https://registry.npm.taobao.org/@testing-library/user-event/download/@testing-library/user-event-12.2.0.tgz",
+      "integrity": "sha1-+7BxD5PWiii5QH4jgOsVI1TJRKc=",
      "requires": {
        "@babel/runtime": "^7.10.2"
      },
@@ -2194,6 +2202,8 @@
    },
    "@types/react-dom": {
      "version": "16.9.9",
+      "resolved": "https://registry.npm.taobao.org/@types/react-dom/download/@types/react-dom-16.9.9.tgz",
+      "integrity": "sha1-0tCm9yCgIGNpzL7/91K6N7lYMTY=",
      "requires": {
        "@types/react": "*"
      },
@@ -2749,6 +2759,8 @@
    },
    "antd": {
      "version": "4.8.0",
+      "resolved": "https://registry.npm.taobao.org/antd/download/antd-4.8.0.tgz?cache=0&sync_timestamp=1604313489813&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fantd%2Fdownload%2Fantd-4.8.0.tgz",
+      "integrity": "sha1-GY3BkCjnrm4E0HFPZGHYbEgS/4w=",
      "requires": {
        "@ant-design/colors": "^4.0.5",
        "@ant-design/css-animation": "^1.7.2",
@@ -4028,6 +4040,16 @@
      "resolved": "https://registry.npm.taobao.org/cli-width/download/cli-width-3.0.0.tgz",
      "integrity": "sha1-ovSEN6LKqaIkNueUvwceyeYc7fY="
    },
+    "clipboard": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npm.taobao.org/clipboard/download/clipboard-2.0.6.tgz",
+      "integrity": "sha1-UpISlu7A/fd+rRdJQhshyWhkc3Y=",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
    "cliui": {
      "version": "6.0.0",
      "resolved": "https://registry.npm.taobao.org/cliui/download/cliui-6.0.0.tgz?cache=0&sync_timestamp=1602861359936&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcliui%2Fdownload%2Fcliui-6.0.0.tgz",
@@ -4433,6 +4455,8 @@
    },
    "craco-less": {
      "version": "1.17.0",
+      "resolved": "https://registry.npm.taobao.org/craco-less/download/craco-less-1.17.0.tgz",
+      "integrity": "sha1-PZLlmWbh/ezvTRc7I4mYWnXLa7k=",
      "requires": {
        "less": "^3.11.1",
        "less-loader": "^6.1.0"
@@ -5020,6 +5044,11 @@
      "resolved": "https://registry.npm.taobao.org/delayed-stream/download/delayed-stream-1.0.0.tgz",
      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
    },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npm.taobao.org/delegate/download/delegate-3.2.0.tgz",
+      "integrity": "sha1-tmtxwxWFIuirV0T3INjKDCr1kWY="
+    },
    "depd": {
      "version": "1.1.2",
      "resolved": "https://registry.npm.taobao.org/depd/download/depd-1.1.2.tgz",
@@ -6868,6 +6897,14 @@
        "slash": "^3.0.0"
      }
    },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npm.taobao.org/good-listener/download/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
    "graceful-fs": {
      "version": "4.2.4",
      "resolved": "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.2.4.tgz",
@@ -9232,6 +9269,11 @@
        "object-visit": "^1.0.0"
      }
    },
+    "marked": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npm.taobao.org/marked/download/marked-1.2.3.tgz",
+      "integrity": "sha1-WIF7o0inyTmMuU1A0S4NCN+Dr1c="
+    },
    "md5.js": {
      "version": "1.3.5",
      "resolved": "https://registry.npm.taobao.org/md5.js/download/md5.js-1.3.5.tgz",
@@ -12149,6 +12191,8 @@
    },
    "react": {
      "version": "17.0.1",
+      "resolved": "https://registry.npm.taobao.org/react/download/react-17.0.1.tgz?cache=0&sync_timestamp=1603367627799&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact%2Fdownload%2Freact-17.0.1.tgz",
+      "integrity": "sha1-bgYAQWvVdXTj+G2S7bo9kAhyYSc=",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1"
@@ -12251,6 +12295,8 @@
    },
    "react-dom": {
      "version": "17.0.1",
+      "resolved": "https://registry.npm.taobao.org/react-dom/download/react-dom-17.0.1.tgz?cache=0&sync_timestamp=1603367630204&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-dom%2Fdownload%2Freact-dom-17.0.1.tgz",
+      "integrity": "sha1-HeJWBHTsnw4zQoVmLt5S28VCb8Y=",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1",
@@ -12279,6 +12325,8 @@
    },
    "react-scripts": {
      "version": "4.0.0",
+      "resolved": "https://registry.npm.taobao.org/react-scripts/download/react-scripts-4.0.0.tgz?cache=0&sync_timestamp=1603464317651&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-scripts%2Fdownload%2Freact-scripts-4.0.0.tgz",
+      "integrity": "sha1-NvPYT//3CKwGGP1h5x6q6hHCZBc=",
      "requires": {
        "@babel/core": "7.12.3",
        "@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
@@ -13185,6 +13233,11 @@
        "compute-scroll-into-view": "^1.0.16"
      }
    },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npm.taobao.org/select/download/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+    },
    "select-hose": {
      "version": "2.0.0",
      "resolved": "https://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz",
@@ -14554,6 +14607,11 @@
      "resolved": "https://registry.npm.taobao.org/timsort/download/timsort-0.3.0.tgz",
      "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
    },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npm.taobao.org/tiny-emitter/download/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha1-HRpW7fxRxD6GPLtTgqcjMONVVCM="
+    },
    "tinycolor2": {
      "version": "1.4.2",
      "resolved": "https://registry.npm.taobao.org/tinycolor2/download/tinycolor2-1.4.2.tgz?cache=0&sync_timestamp=1601056395015&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftinycolor2%2Fdownload%2Ftinycolor2-1.4.2.tgz",
@@ -14736,7 +14794,9 @@
      }
    },
    "typescript": {
-      "version": "4.0.5"
+      "version": "4.0.5",
+      "resolved": "https://registry.npm.taobao.org/typescript/download/typescript-4.0.5.tgz",
+      "integrity": "sha1-rp3d/RBp8ctb6z7zshcN18EzI4k="
    },
    "unicode-canonical-property-names-ecmascript": {
      "version": "1.0.4",
@@ -15228,7 +15288,9 @@
      }
    },
    "web-vitals": {
-      "version": "0.2.4"
+      "version": "0.2.4",
+      "resolved": "https://registry.npm.taobao.org/web-vitals/download/web-vitals-0.2.4.tgz?cache=0&sync_timestamp=1595904283068&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fweb-vitals%2Fdownload%2Fweb-vitals-0.2.4.tgz",
+      "integrity": "sha1-7D30PINKIH/Xze/XMrKYeJbghRE="
    },
    "webidl-conversions": {
      "version": "6.1.0",

--- a/package.json
+++ b/package.json
@@ -13,7 +13,9 @@
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "antd": "^4.8.0",
+    "clipboard": "^2.0.6",
    "craco-less": "^1.17.0",
+    "marked": "^1.2.3",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",

--- a/src/App.less
+++ b/src/App.less
 @import '~antd/dist/antd.less';
+@import './style/animate.less';
 .app {
  background-color: #fff;
  text-align: center;
  .header {
-    background-color: #fff;
+    position: sticky;
+    top: 0;
+    left: 0;
+    height: 175px;
+    width: 100%;
+    z-index: 2;
+    .search {
+      display: block;
+      opacity: 1;
+      z-index: 3;
+    }
  }
  .main {
@@ -16,17 +28,3 @@
    background-color: #fff;
  }
 }
-.logo {
-  height: 50px;
-  pointer-events: none;
-}
-@keyframes app-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
--- a/src/App.tsx
+++ b/src/App.tsx
-import React from 'react';
+import React, {ReactInstance, ReactNode} from 'react';
+import ReactDOM from 'react-dom';
 import './App.less';
-import Index from "./Pages/Index/Index";
+import {BackTop} from "antd";
-import {Layout, Divider, BackTop} from "antd";
 import AppHeader from "./Element/AppHeader/AppHeader";
 import AppFooter from "./Element/AppFooter/AppFooter";
-import AppSearch from "./Component/AppSearch/AppSearch";
 import SearchList from "./Element/SearchLIst/SearchList";
+import AppSearch from "./Component/AppSearch/AppSearch";
+import {VerticalAlignTopOutlined} from "@ant-design/icons";
+import Details from "./Pages/Details/Details";
+import Index from "./Pages/Index/Index";
+class App extends React.Component {
-const {Header, Footer, Content} = Layout;
+    public componentDidMount(): void {
+        this.setHeaderEffect();
+    }
-function App() {
-    return (
+    private setHeaderEffect(){
-        <div>
+        const searchDiv = ReactDOM.findDOMNode(this.refs.searchDiv) as HTMLDivElement;
-            <Layout className='app'>
+        document.addEventListener('scroll', (e) => {
-                <Header className='header'>
+            let scrolled = document.documentElement.scrollTop / (searchDiv.clientHeight + 30);
-                    <AppHeader/>
+            searchDiv.style.opacity = (1 - scrolled) + '';
-                </Header>
+            searchDiv.style.zIndex = (scrolled >= 1) ? '-1' : '2';  // 不用display，否则会导致页面高度改变
+        });
+    }
-                <AppSearch/>
+    public render(): ReactNode {
-                <Content className='main'>
+        return (
-                    {/*<Index/>*/}
+            <div>
-                    <SearchList/>
+                <div className='app'>
-                </Content>
+                    <div className='header' ref='searchDiv'>
+                        <AppHeader/>
-                <Footer className='footer'>
+                        <div className='search'>
-                    <AppFooter/>
+                            <AppSearch/>
-                </Footer>
+                        </div>
-            </Layout>
+                    </div>
-            <BackTop>
-                <div style={{
+                    <div className='main'>
-                    height: 40,
+                        <Index/>
-                    width: 40,
+                        {/*<SearchList/>*/}
-                    lineHeight: '40px',
+                        {/*<Details/>*/}
-                    borderRadius: 4,
+                    </div>
-                    backgroundColor: '#101010',
-                    color: '#fff',
+                    <div className='footer'>
-                    textAlign: 'center',
+                        <AppFooter/>
-                    fontSize: 14,
+                    </div>
-                }}>UP
                </div>
-            </BackTop>
-        </div>
+                <BackTop
-    );
+                    visibilityHeight={100}
+                >
+                    <VerticalAlignTopOutlined
+                        style={{
+                            height: 50,
+                            width: 50,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            borderRadius: 4,
+                            backgroundColor: '#101010',
+                            color: '#fff',
+                            fontSize: 30,
+                        }}/>
+                </BackTop>
+            </div>
+        );
+    }
 }
 export default App;
--- a/src/Component/AppSearch/AppSearch.less
+++ b/src/Component/AppSearch/AppSearch.less
@@ -8,23 +8,33 @@
  border-top-style: solid;
  border-top-width: 1px;
  border-color: rgba(0, 0, 0, .1);
-  padding: 10px 0;
+  padding: 1em 3em;
+  background-color: #fff;
+  //position: sticky;
+  //top: 78px;
+  //left: 0;
+  //height: auto;
+  //width: 100%;
+  box-shadow: 0 4px 13px -3px rgba(0, 0, 0, 0.10196);
+  border-bottom: 0 solid #d2d2d2;
  .app-search-cont {
    display: flex;
    margin-left: auto;
    margin-right: auto;
-    padding-left: 2rem;
-    padding-right: 2rem;
+    align-items: center;
    .app-search-logo {
-      width: 80px;
+      height: 52px;
      margin-right: 0.5rem;
      &:hover {
-        animation: index-logo-spin 1s;
+        animation: spin 1s;
      }
    }
    .app-search-div {
@@ -52,10 +62,10 @@
        padding: 5px 35px;
        text-align: center;
        align-items: center;
+        transition-duration: .3s;
        &:hover {
          background-color: #767676;
-          color: white;
        }
      }
    }
@@ -63,6 +73,11 @@
    .app-search-input-icon {
      width: 50px;
      color: #767676;
+      transition-duration: .3s;
+      &:hover {
+        color: black;
+      }
    }
  }
 }
\ No newline at end of file
--- a/src/Component/SearchListItem/SearchListItem.less
+++ b/src/Component/SearchListItem/SearchListItem.less
@@ -5,7 +5,7 @@
 */
 .search-item {
-  display: flex;
+  display: inline-flex;
  padding: 1rem .25rem .5rem;
  flex: 1 1 auto;
@@ -14,12 +14,14 @@
    .search-item-title {
      color: black;
-      display: inline-block;
      font-weight: 600;
      color: rgba(0, 0, 0, .9);
-      margin: 0;
-      text-decoration: none;
      font-size: 1.25rem;
+      transition-duration: .3s;
+      &:hover {
+        font-size: 1.5rem;
+      }
    }
    .search-item-description {
@@ -30,17 +32,24 @@
      margin-top: .25rem;
      text-decoration: none;
      font-size: 1rem;
+      text-align: justify;
+      transition-duration: .3s;
+      &:hover {
+        color: black;
+      }
    }
    .search-item-info {
+      display: flex;
      flex-direction: row;
+      align-items: center;
      line-height: 1.5;
      color: rgba(0, 0, 0, .8);
      margin-bottom: .25rem;
      margin-top: .25rem;
      font-size: .875rem;
-      display: flex;
-      align-items: center;
      .search-item-info-avatar {
        width: 22px;
@@ -57,7 +66,6 @@
      }
      .search-item-info-date {
-        --wombat-red-hover: #c40b0a;
        font-size: .875rem;
        color: rgba(0, 0, 0, .5);
      }

--- a/src/Component/SearchListItem/SearchListItem.tsx
+++ b/src/Component/SearchListItem/SearchListItem.tsx
@@ -26,16 +26,17 @@ export default class SearchListItem extends React.Component<any> {
    }
    public render(): ReactNode {
-        const {title, link, description, userNick} = this.props.data;
+        const {title, link, description, userNick, date} = this.props.data;
        return (
            <div className='search-item'>
                <div className='search-item-left'>
                    <a href={link}><h3 className='search-item-title'>{title}</h3></a>
                    <p className='search-item-description'>{description}</p>
                    <div className='search-item-info'>
-                        <img className='search-item-info-avatar' src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
+                        <img className='search-item-info-avatar'
+                             src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
                        <div className='search-item-info-user'>{userNick}</div>
-                        <div className='search-item-info-date'>{userNick}</div>
+                        <div className='search-item-info-date'>{date}</div>
                    </div>
                </div>
            </div>

--- a/src/Element/AppFooter/AppFooter.less
+++ b/src/Element/AppFooter/AppFooter.less
@@ -5,5 +5,9 @@
 */
 .app-footer {
+  border-top: solid rgba(0, 0, 0, 0.1) 1px;
+  flex: 0 0 auto;
+  background-color: transparent;
+  padding: 2rem;
 }
\ No newline at end of file
--- a/src/Element/AppHeader/AppHeader.less
+++ b/src/Element/AppHeader/AppHeader.less
@@ -7,13 +7,24 @@
 .app-header {
  display: flex;
  align-items: center;
+  padding: 1em 3em;
+  background-color: #fff;
+  //position: sticky;
+  //top: 0;
+  //left: 0;
+  //height: auto;
+  //width: 100%;
+  border-color: rgba(0,0,0,.2);
+  box-shadow: 0 4px 13px -3px rgba(0, 0, 0, 0.10196);
  .app-logo {
    height: 50px;
-    //pointer-events: none;
    &:hover {
-      animation: index-logo-spin 1s;
+      animation: spin 1s;
    }
  }

--- a/src/Element/SearchLIst/SearchList.less
+++ b/src/Element/SearchLIst/SearchList.less
@@ -5,30 +5,38 @@
 */
-.search-list{
+.search-list {
-  .search-list-pagination-top{
+  .search-list-cont{
+    padding-left: 26px;
+    padding-right: 26px;
+  }
+  .search-list-pagination-top {
    border-bottom-style: solid;
    border-bottom-width: 1px;
-    border-color: rgba(0,0,0,.1);
+    border-color: rgba(0, 0, 0, .1);
    background-color: #f9f9f9;
-    .search-list-pagination{
+    .search-list-pagination-cont {
      display: flex;
-      flex-direction: column;
+      flex-wrap: wrap;
      justify-content: space-between;
+      align-items: center;
      font-weight: 400;
-      max-width: 96rem;
+      padding: 1.3rem 80px;
-      margin: 0 auto;
-      padding: 0 2rem;
-      .search-list-num{
+      .search-list-num {
-        box-sizing: border-box;
-        float: left;
        font-weight: 600;
        color: #000;
-        padding-top: .5rem;
        font-size: 1.25rem;
-        margin-left: 0;
+        display: flex;
+        align-items: center;
+        margin: 0;
+        padding: 0;
+      }
+      .search-list-pagination {
+        font-weight: 400;
      }
    }

--- a/src/Element/SearchLIst/SearchList.tsx
+++ b/src/Element/SearchLIst/SearchList.tsx
@@ -15,7 +15,7 @@ export default class SearchList extends React.Component<any> {
    public state: any = {
        showData: [],
-        totalLength: 0,
+        total: 0,
        pageIndex: 1,
        pageSize: 10,
        current: 1,
@@ -28,18 +28,25 @@ export default class SearchList extends React.Component<any> {
    }
    public componentDidMount(): void {
-        for (let i = 0; i < 50; i++) {
+        for (let i = 0; i < 500; i++) {
            this.totalData.push({
                title: `Ant Design Title ${i}`,
-                userNick: `${i} 1111`,
+                userNick: `userNick${i}`,
-                date: `${i} 1111`,
+                date: 'publish 2020年10月31日',
                link: 'https://www.baidu.com/',
-                description: "Ant Design, a design language for background applications, is refined by Ant UED Team",
+                description: `Ant Design, a design language for background applications, is refined by Ant UED Team
+                Ant Design, a design language for background applications, is refined by Ant UED Team
+                Ant Design, a design language for background applications, is refined by Ant UED Team
+                Ant Design, a design language for background applications, is refined by Ant UED Team
+                Ant Design, a design language for background applications, is refined by Ant UED Team
+                Ant Design, a design language for background applications, is refined by Ant UED Team
+                Ant Design, a design language for background applications, is refined by Ant UED Team
+                `,
            });
        }
        this.setState({
-            totalLength: this.totalData.length,
+            total: this.totalData.length,
        });
        this.showPage(1);
    }
@@ -66,18 +73,19 @@ export default class SearchList extends React.Component<any> {
    }
    public render(): ReactNode {
-        const {showData, totalLength, pageSize, current} = this.state;
+        const {showData, total, pageSize, current} = this.state;
-        return (
+        const getPagination = () => {
-            <div className='search-list'>
+            return (
                <div className='search-list-pagination-top'>
-                    <div className='search-list-pagination'>
+                    <div className='search-list-pagination-cont'>
                        <div>
-                            <h2 className="search-list-num">143147 packages found</h2>
+                            <h2 className="search-list-num">{`${total} packages found`}</h2>
                        </div>
                        <Pagination
+                            className='search-list-pagination'
                            current={current}
-                            total={totalLength}
+                            total={total}
                            pageSize={pageSize}
                            hideOnSinglePage={false}
                            showSizeChanger
@@ -85,9 +93,14 @@ export default class SearchList extends React.Component<any> {
                            onShowSizeChange={this.onShowSizeChange}
                        />
                    </div>
                </div>
-                <Card>
+            );
+        }
+        return (
+            <div className='search-list'>
+                {getPagination()}
+                <Card className='search-list-cont'>
                    <List
                        itemLayout="horizontal"
                        dataSource={showData}
@@ -98,15 +111,7 @@ export default class SearchList extends React.Component<any> {
                        )}
                    />
                </Card>
+                {getPagination()}
-                <Pagination
-                    total={totalLength}
-                    pageSize={pageSize}
-                    hideOnSinglePage={false}
-                    showSizeChanger
-                    onChange={this.onPageChange}
-                    onShowSizeChange={this.onShowSizeChange}
-                />
            </div>
        );
    }

--- a/src/Pages/Details/Details.less
+++ b/src/Pages/Details/Details.less
+/*
+ * Details.less
+ * Created by 还有醋v on 2020/11/7.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+.details {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  .details-title {
+    position: sticky;
+    top: 0;
+    width: 100%;
+    font-family: 'Source Sans Pro', 'Lucida Grande', sans-serif;
+    text-align: left;
+    background-color: #fff;
+    box-shadow: 0 4px 13px -3px rgba(0, 0, 0, 0.10196);
+    padding: 1rem 2rem .3rem;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+    .details-title-div {
+      width: 66.666%;
+      flex: 1 1 auto;
+      & > h2 {
+        font-weight: 600;
+        margin: 1rem 0 0;
+        font-size: 1.5rem;
+        & > span {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          letter-spacing: -0.8px;
+        }
+      }
+      & > span {
+        font-family: "Fira Mono", "Andale Mono", "Consolas", monospace;
+      }
+    }
+    .details-install-div {
+      min-width: 300px;
+      flex: 1 1 auto;
+      & > h3 {
+        color: rgba(0, 0, 0, .5);
+        padding-top: .5rem;
+        margin-bottom: 0;
+        margin-top: .5rem;
+        font-size: 1rem;
+      }
+      .details-install-cmd {
+        overflow: hidden;
+        padding: 1rem;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: left;
+        color: rgba(0, 0, 0, .8);
+        margin-bottom: 1rem;
+        height: 46px;
+        border: 1px solid #cbcbcb;
+        border-radius: 5px;
+        cursor:pointer;
+        transition-duration: .5s;
+        & > code {
+          font-family: "Fira Mono", "Andale Mono", "Consolas", monospace;
+          line-height: 24px;
+          display: block;
+          flex: 1 1 auto;
+          min-width: 0;
+          min-height: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          padding-left: .5rem;
+        }
+        & > svg {
+          width: 12.59px;
+          fill: rgba(0, 0, 0, .5);
+        }
+        & > .svg-copy {
+          transition: .5s;
+          opacity: 0;
+        }
+        &:hover {
+          background-color: #DBFFDB;
+          & > .svg-copy {
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+  .md-cont {
+    @import "/src/style/markdown";
+    text-align: left;
+    font-family: "Microsoft YaHei", arial, sans-serif;
+    color: #444444;
+    line-height: 1;
+    width: 66.66666%;
+    padding: 1rem 1rem .3rem 2rem;
+    flex: 1 1 auto;
+  }
+  .right-cont {
+    padding: 4rem 2rem .3rem 1rem;
+    text-align: left;
+    flex: 1 1 auto;
+  }
+}
\ No newline at end of file
--- a/src/Pages/Details/Details.tsx
+++ b/src/Pages/Details/Details.tsx
+/*
+ * Details.tsx
+ * Created by 还有醋v on 2020/11/7.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+import React, {ReactNode} from 'react';
+import './Details.less';
+import ReactDOM from "react-dom";
+const ClipboardJS = require('clipboard');
+const marked = require('marked');
+const rendererMD = new marked.Renderer();
+marked.setOptions({
+    renderer: rendererMD,
+    gfm: true,
+    tables: true,
+    breaks: false,
+    pedantic: false,
+    sanitize: false,
+    smartLists: true,
+    smartypants: false
+});//基本设置
+export default class Details extends React.Component<any> {
+    public state: any = {}
+    constructor(props: any, context: any) {
+        super(props, context);
+    }
+    public componentDidMount(): void {
+        const clipboard = new ClipboardJS('.click-copy', {
+            text: () => {
+                return 'npm i react'
+            }
+        });
+        clipboard.on('success', (e: any) => {
+            console.log(e);
+        });
+        clipboard.on('error', (e: any) => {
+            console.log(e);
+        });
+        const div = ReactDOM.findDOMNode(this.refs.mdDiv) as HTMLDivElement;
+        div.innerHTML = marked('# Getting Started with Create React App\n' +
+            '\n' +
+            'This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n' +
+            '\n' +
+            '## Available Scripts\n' +
+            '\n' +
+            'In the project directory, you can run:\n' +
+            '\n' +
+            '### `yarn start`\n' +
+            '```javascript\n' +
+            '    var a = 1;\n' +
+            '```\n' +
+            'Runs the app in the development mode.\\\n' +
+            'Open [http://localhost:3000](http://localhost:3000) to view it in the browser.\n' +
+            '\n' +
+            'The page will reload if you make edits.\\\n' +
+            'You will also see any lint errors in the console.\n' +
+            '\n' +
+            '### `yarn test`\n' +
+            '\n' +
+            'Launches the test runner in the interactive watch mode.\\\n' +
+            'See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n' +
+            '\n' +
+            '### `yarn build`\n' +
+            '\n' +
+            'Builds the app for production to the `build` folder.\\\n' +
+            'It correctly bundles React in production mode and optimizes the build for the best performance.\n' +
+            '\n' +
+            'The build is minified and the filenames include the hashes.\\\n' +
+            'Your app is ready to be deployed!\n' +
+            '\n' +
+            'See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n' +
+            '\n' +
+            '### `yarn eject`\n' +
+            '\n' +
+            '**Note: this is a one-way operation. Once you `eject`, you can’t go back!**\n' +
+            '\n' +
+            'If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.\n' +
+            '\n' +
+            'Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.\n' +
+            '\n' +
+            'You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.\n' +
+            '\n' +
+            '## Learn More\n' +
+            '\n' +
+            'You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n' +
+            '\n' +
+            'To learn React, check out the [React documentation](https://reactjs.org/).\n');
+    }
+    public componentWillUnmount(): void {
+    }
+    public render(): ReactNode {
+        return (
+            <div className='details'>
+                <div className="details-title">
+                    <div className='details-title-div'>
+                        <h2><span>react</span></h2>
+                        <span className="details-version">17.0.1&nbsp;•&nbsp;</span>
+                        <span className="details-date">Published&nbsp;•&nbsp;
+                        <time>18 days ago</time>
+                    </span>
+                    </div>
+                    <div className='details-install-div'>
+                        <h3>Install</h3>
+                        <p className="details-install-cmd click-copy">
+                            <svg viewBox="0 0 12.32 9.33">
+                                <g>
+                                    <line x1="7.6" y1="8.9" x2="7.6" y2="6.9"/>
+                                    <rect width="1.9" height="1.9"/>
+                                    <rect x="1.9" y="1.9" width="1.9" height="1.9"/>
+                                    <rect x="3.7" y="3.7" width="1.9" height="1.9"/>
+                                    <rect x="1.9" y="5.6" width="1.9" height="1.9"/>
+                                    <rect y="7.5" width="1.9" height="1.9"/>
+                                </g>
+                            </svg>
+                            <code title="Copy Command to Clipboard">npm i react</code>
+                            <svg className='svg-copy'
+                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                                <path
+                                    d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"/>
+                            </svg>
+                        </p>
+                    </div>
+                </div>
+                <div className='md-cont' ref='mdDiv'/>
+                <div className='right-cont'>
+                    aaaaaaaaa
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file
--- a/src/Pages/Index/Index.less
+++ b/src/Pages/Index/Index.less
@@ -5,26 +5,40 @@
 */
 .index {
+  height: 300vh;
+  margin: 0;
+  background-color: #000;
  .index-bg {
-    height: 796px;
+    --percentage: 0;
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    //background-image: linear-gradient(75deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33.33%, rgba(255, 255, 255, 0) 66.67%, rgba(255, 255, 255, 0) 100%);
+    background-size: 300% 100%;
+    background-position-x: calc(100% - var(--percentage));
+    background-clip: text;
+    -webkit-background-clip: text;
+    //height: 796px;
    background-image: url("https://static.npmjs.com/attachments/ck3uwvv67mydydr74ea00ip4j-bg-stripes.png");
-    background-position: center center;
+    //background-position: center center;
-    background-repeat: no-repeat;
+    //background-repeat: no-repeat;
-    background-size: cover;
+    //background-size: cover;
+    display: flex;
+    align-items: center;
    .index-txt {
-      max-width: 48rem;
+      padding: 0 1rem;
-      padding-top: 4rem;
-      padding-bottom: 4rem;
-      padding-left: 1rem;
-      padding-right: 1rem;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      .index-txt-h1 {
-        color: #fff;
+        color: transparent;
        margin: .67em 0;
        box-sizing: border-box;
        line-height: 1.25;
@@ -34,102 +48,52 @@
      }
      .index-txt-cont {
+        color: transparent;
        font-family: 'Arimo', sans-serif;
-        color: #fff;
        text-align: center;
        box-sizing: border-box;
        line-height: 1.5;
-        max-width: 32rem;
+        font-size: 1rem;
+        max-width: 42rem;
        margin-left: auto;
        margin-right: auto;
      }
      .index-txt-cont-center {
+        color: transparent;
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
        margin-inline-start: 0;
        margin-inline-end: 0;
-        color: #fff;
+        font-size: 1.7rem;
-        font-size: 1.5rem;
        font-weight: 600;
      }
-      .index-btn-group {
+      .index-btn {
-        text-align: center;
-        box-sizing: border-box;
-        display: flex;
-        flex-wrap: wrap;
        margin-top: 4rem;
+        padding-bottom: 1rem;
+        text-align: center;
-        a {
+        & > a {
-          display: block;
+          color: transparent;
-          font-weight: 700;
+          font-size: 2rem;
-          color: #fff;
+          display: inline-block;
-          padding-top: 1rem;
+          font-weight: bolder;
-          padding-bottom: 1rem;
+          padding: 1rem 2rem;
-          padding-left: 2rem;
-          padding-right: 2rem;
          text-decoration: none;
          margin-left: auto;
          margin-right: auto;
-          max-width: 16rem;
-          border-bottom: solid 5px;
-          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
-        }
-        .a-left {
-          background: #c12127;
-          border-color: #fa8717;
-        }
-        .a-right {
-          background: #e81aa8;
-          border-color: #b30ad2;
        }
-        .index-btn {
+        & > a > div {
-          padding-bottom: 1rem;
+          line-height: 0;
-          width: 50%;
+          font-weight: bolder;
-          padding-right: 1rem;
        }
      }
    }
  }
-  .index-header {
-    display: flex;
-    justify-content: left;
-    align-items: center;
-    .index-logo {
-      height: 50px;
-      pointer-events: none;
-    }
-    @media (prefers-reduced-motion: no-preference) {
-      .index-logo {
-        animation: index-logo-spin infinite 20s linear;
-      }
-    }
-    @keyframes index-logo-spin {
-      from {
-        transform: rotate(0deg);
-      }
-      to {
-        transform: rotate(360deg);
-      }
-    }
-  }
-  .index-main {
-  }
-  .index-footer {
-  }
 }

--- a/src/Pages/Index/Index.tsx
+++ b/src/Pages/Index/Index.tsx
@@ -6,11 +6,10 @@
 import React, {ReactNode} from 'react';
+import ReactDOM from 'react-dom';
 import './Index.less';
-import {Button} from "antd";
 export default class Index extends React.Component<any> {
    public state: any = {}
@@ -20,7 +19,13 @@ export default class Index extends React.Component<any> {
    }
    public componentDidMount(): void {
+        const indexTxt = ReactDOM.findDOMNode(this.refs.indexTxt) as HTMLDivElement;
+        document.addEventListener('scroll', (e) => {
+            let scrolled = document.documentElement.scrollTop / (document.documentElement.scrollHeight - document.documentElement.clientHeight)
+            indexTxt.style.setProperty('--percentage', `${scrolled * 100}%`)
+        })
    }
    public componentWillUnmount(): void {
@@ -30,7 +35,7 @@ export default class Index extends React.Component<any> {
    public render(): ReactNode {
        return (
            <div className='index'>
-                <div className='index-bg'>
+                <div className='index-bg'  ref='indexTxt'>
                    <div className="index-txt">
                        <h1 className="index-txt-h1">
                            Build amazing things
@@ -52,20 +57,11 @@ export default class Index extends React.Component<any> {
                                JavaScript development experience, with features like private packages.
                            </div>
-                            <div className="index-btn-group">
+                            <div className="index-btn">
-                                <div className="index-btn">
+                                <a href="/start">
-                                    <a href="/signup"
+                                    Let's Get To Start
-                                       className="a-left">
+                                    <div>____________________</div>
-                                        Sign up for free
+                                </a>
-                                    </a>
-                                </div>
-                                <div className="index-btn">
-                                    <a href="/products/pro"
-                                       className="a-right">
-                                        Learn about Pro
-                                    </a>
-                                </div>
                            </div>
                        </div>
                    </div>

--- a/src/index.less
+++ b/src/index.less
-body {
+html,body {
  margin: 0;
+  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
 }
+//
-code {
+//code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+//  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+//  monospace;
-}
+//}
\ No newline at end of file
--- a/src/style/animate.less
+++ b/src/style/animate.less
+/*
+ * animate.less
+ * Created by 还有醋v on 2020/11/7.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+@keyframes bounce {
+  0%{
+    transform: translate3d(0,0,0);
+  }
+  from, 20%, 53%, 80%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    transform: translate3d(0,0,0);
+  }
+  40%, 43% {
+    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    transform: translate3d(0, -20px, 0);
+  }
+  70% {
+    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    transform: translate3d(0, -10px, 0);
+  }
+  90% {
+    transform: translate3d(0,-4px,0);
+  }
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
--- a/src/style/markdown.css
+++ b/src/style/markdown.css
+/*
+ * markdown.css
+ * Created by 还有醋v on 2020/11/7.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+@media screen and (min-width: 768px) {
+    body {
+        width: 748px;
+        margin: 10px auto;
+    }
+}
+h1, h2, h3, h4 {
+    color: #111111;
+    font-weight: 400;
+    margin-top: 1em;
+}
+h1, h2, h3, h4, h5 {
+    font-family: Georgia, Palatino, serif;
+}
+h1, h2, h3, h4, h5, p, dl {
+    margin-bottom: 16px;
+    padding: 0;
+}
+h1 {
+    font-size: 48px;
+    line-height: 54px;
+}
+h2 {
+    font-size: 36px;
+    line-height: 42px;
+}
+h1, h2 {
+    border-bottom: 1px solid #EFEAEA;
+    padding-bottom: 10px;
+}
+h3 {
+    font-size: 24px;
+    line-height: 30px;
+}
+h4 {
+    font-size: 21px;
+    line-height: 26px;
+}
+h5 {
+    font-size: 18px;
+    list-style: 23px;
+}
+a {
+    color: #0099ff;
+    margin: 0;
+    padding: 0;
+    vertical-align: baseline;
+}
+a:hover {
+    text-decoration: none;
+    color: #ff6600;
+}
+a:visited {
+    /*color: purple;*/
+}
+ul, ol {
+    padding: 0 0 0 24px;
+    margin: 0;
+}
+li {
+    line-height: 24px;
+}
+p, ul, ol {
+    font-size: 16px;
+    line-height: 24px;
+}
+ol ol, ul ol {
+    list-style-type: lower-roman;
+}
+/*pre {
+    padding: 0px 24px;
+    max-width: 800px;
+    white-space: pre-wrap;
+}
+code {
+    font-family: Consolas, Monaco, Andale Mono, monospace;
+    line-height: 1.5;
+    font-size: 13px;
+}*/
+code, pre {
+    border-radius: 3px;
+    background-color: #f7f7f7;
+    color: inherit;
+}
+code {
+    font-family: Consolas, Monaco, Andale Mono, monospace;
+    margin: 0 2px;
+    padding: 5px 10px;
+}
+pre {
+    line-height: 1.7em;
+    overflow: auto;
+    padding: 6px 10px;
+    border-left: 5px solid #6CE26C;
+}
+pre > code {
+    border: 0;
+    display: inline;
+    max-width: initial;
+    padding: 0;
+    margin: 0;
+    overflow: initial;
+    line-height: inherit;
+    font-size: .85em;
+    white-space: pre;
+    background: 0 0;
+}
+code {
+    color: #666555;
+}
+/** markdown preview plus 对于代码块的处理有些问题, 所以使用统一的颜色 */
+/*code .keyword {
+  color: #8959a8;
+}
+code .number {
+  color: #f5871f;
+}
+code .comment {
+  color: #998
+}*/
+aside {
+    display: block;
+    float: right;
+    width: 390px;
+}
+blockquote {
+    border-left: .5em solid #eee;
+    padding: 0 0 0 2em;
+    margin-left: 0;
+}
+blockquote cite {
+    font-size: 14px;
+    line-height: 20px;
+    color: #bfbfbf;
+}
+blockquote cite:before {
+    content: '\2014 \00A0';
+}
+blockquote p {
+    color: #666;
+}
+hr {
+    text-align: left;
+    color: #999;
+    height: 2px;
+    padding: 0;
+    margin: 16px 0;
+    background-color: #e7e7e7;
+    border: 0 none;
+}
+dl {
+    padding: 0;
+}
+dl dt {
+    padding: 10px 0;
+    margin-top: 16px;
+    font-size: 1em;
+    font-style: italic;
+    font-weight: bold;
+}
+dl dd {
+    padding: 0 16px;
+    margin-bottom: 16px;
+}
+dd {
+    margin-left: 0;
+}
+/* Code below this line is copyright Twitter Inc. */
+button,
+input,
+select,
+textarea {
+    font-size: 100%;
+    margin: 0;
+    vertical-align: baseline;
+    *vertical-align: middle;
+}
+button, input {
+    line-height: normal;
+    *overflow: visible;
+}
+button::-moz-focus-inner, input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+    cursor: pointer;
+    -webkit-appearance: button;
+}
+input[type=checkbox], input[type=radio] {
+    cursor: pointer;
+}
+/* override default chrome & firefox settings */
+input:not([type="image"]), textarea {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+input[type="search"] {
+    -webkit-appearance: textfield;
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+label,
+input,
+select,
+textarea {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    font-weight: normal;
+    line-height: normal;
+    margin-bottom: 18px;
+}
+input[type=checkbox], input[type=radio] {
+    cursor: pointer;
+    margin-bottom: 0;
+}
+input[type=text],
+input[type=password],
+textarea,
+select {
+    display: inline-block;
+    width: 210px;
+    padding: 4px;
+    font-size: 13px;
+    font-weight: normal;
+    line-height: 18px;
+    height: 18px;
+    color: #808080;
+    border: 1px solid #ccc;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+}
+select, input[type=file] {
+    height: 27px;
+    line-height: 27px;
+}
+textarea {
+    height: auto;
+}
+/* grey out placeholders */
+:-moz-placeholder {
+    color: #bfbfbf;
+}
+::-webkit-input-placeholder {
+    color: #bfbfbf;
+}
+input[type=text],
+input[type=password],
+select,
+textarea {
+    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+    transition: border linear 0.2s, box-shadow linear 0.2s;
+    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+input[type=text]:focus, input[type=password]:focus, textarea:focus {
+    outline: none;
+    border-color: rgba(82, 168, 236, 0.8);
+    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+}
+/* buttons */
+button {
+    display: inline-block;
+    padding: 4px 14px;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    line-height: 18px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    background-color: #0064cd;
+    background-repeat: repeat-x;
+    background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
+    background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
+    background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
+    background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
+    background-image: -o-linear-gradient(top, #049cdb, #0064cd);
+    background-image: linear-gradient(top, #049cdb, #0064cd);
+    color: #fff;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+    border: 1px solid #004b9a;
+    border-bottom-color: #003f81;
+    -webkit-transition: 0.1s linear all;
+    -moz-transition: 0.1s linear all;
+    transition: 0.1s linear all;
+    border-color: #0064cd #0064cd #003f81;
+    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+}
+button:hover {
+    color: #fff;
+    background-position: 0 -15px;
+    text-decoration: none;
+}
+button:active {
+    -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+button::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+table {
+    *border-collapse: collapse; /* IE7 and lower */
+    border-spacing: 0;
+    width: 100%;
+}
+table {
+    border: solid #ccc 1px;
+    -moz-border-radius: 6px;
+    -webkit-border-radius: 6px;
+    border-radius: 6px;
+    /*-webkit-box-shadow: 0 1px 1px #ccc;
+    -moz-box-shadow: 0 1px 1px #ccc;
+    box-shadow: 0 1px 1px #ccc;   */
+}
+table tr:hover {
+    background: #fbf8e9;
+    -o-transition: all 0.1s ease-in-out;
+    -webkit-transition: all 0.1s ease-in-out;
+    -moz-transition: all 0.1s ease-in-out;
+    -ms-transition: all 0.1s ease-in-out;
+    transition: all 0.1s ease-in-out;
+}
+table td, .table th {
+    border-left: 1px solid #ccc;
+    border-top: 1px solid #ccc;
+    padding: 10px;
+    text-align: left;
+}
+table th {
+    background-color: #dce9f9;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
+    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
+    background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
+    background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
+    background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
+    background-image: linear-gradient(top, #ebf3fc, #dce9f9);
+    /*-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
+    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
+    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;*/
+    border-top: none;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+    padding: 5px;
+}
+table td:first-child, table th:first-child {
+    border-left: none;
+}
+table th:first-child {
+    -moz-border-radius: 6px 0 0 0;
+    -webkit-border-radius: 6px 0 0 0;
+    border-radius: 6px 0 0 0;
+}
+table th:last-child {
+    -moz-border-radius: 0 6px 0 0;
+    -webkit-border-radius: 0 6px 0 0;
+    border-radius: 0 6px 0 0;
+}
+table th:only-child {
+    -moz-border-radius: 6px 6px 0 0;
+    -webkit-border-radius: 6px 6px 0 0;
+    border-radius: 6px 6px 0 0;
+}
+table tr:last-child td:first-child {
+    -moz-border-radius: 0 0 0 6px;
+    -webkit-border-radius: 0 0 0 6px;
+    border-radius: 0 0 0 6px;
+}
+table tr:last-child td:last-child {
+    -moz-border-radius: 0 0 6px 0;
+    -webkit-border-radius: 0 0 6px 0;
+    border-radius: 0 0 6px 0;
+}
\ No newline at end of file
--- a/src/style/markdown.less
+++ b/src/style/markdown.less
+/*
+ * markdown.less
+ * Created by 还有醋v on 2020/11/7.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+@media screen and (min-width: 768px) {
+  body {
+    width: 748px;
+    margin: 10px auto;
+  }
+}
+h1, h2, h3, h4 {
+  color: #111111;
+  font-weight: 400;
+  margin-top: 1em;
+}
+h1, h2, h3, h4, h5 {
+  font-family: Georgia, Palatino, serif;
+}
+h1, h2, h3, h4, h5, p, dl {
+  margin-bottom: 16px;
+  padding: 0;
+}
+h1 {
+  font-size: 48px;
+  line-height: 54px;
+}
+h2 {
+  font-size: 36px;
+  line-height: 42px;
+}
+h1, h2 {
+  border-bottom: 1px solid #efeaea;
+  padding-bottom: 10px;
+}
+h3 {
+  font-size: 24px;
+  line-height: 30px;
+}
+h4 {
+  font-size: 21px;
+  line-height: 26px;
+}
+h5 {
+  font-size: 18px;
+  list-style: 23px;
+}
+a {
+  color: #0099ff;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+  &:hover {
+    text-decoration: none;
+    color: #ff6600;
+  }
+  &:visited {
+    color: purple;
+  }
+}
+ul, ol {
+  padding: 0 0 0 24px;
+  margin: 0;
+}
+li {
+  line-height: 24px;
+}
+p, ul, ol {
+  font-size: 16px;
+  line-height: 24px;
+}
+ol ol, ul ol {
+  list-style-type: lower-roman;
+}
+/**/
+pre {
+  //padding: 0px 24px;
+  //max-width: 800px;
+  //white-space: pre-wrap;
+  line-height: 1.7em;
+  overflow: auto;
+  padding: 6px 10px;
+  border-left: 5px solid #6ce26c;
+  & > code {
+    border: 0;
+    display: inline;
+    max-width: initial;
+    padding: 0;
+    margin: 0;
+    overflow: initial;
+    line-height: inherit;
+    font-size: .85em;
+    white-space: pre;
+    background: 0 0;
+  }
+}
+code {
+  //font-family: Consolas, Monaco, Andale Mono, monospace;
+  //line-height: 1.5;
+  //font-size: 13px;
+  font-family: Consolas, Monaco, Andale Mono, monospace;
+  margin: 0 2px;
+  color: #666555;
+  padding: 5px 10px;
+  // markdown preview plus 对于代码块的处理有些问题, 所以使用统一的颜色
+  //.keyword {
+  //  color: #8959a8;
+  //}
+  //
+  //.number {
+  //  color: #f5871f;
+  //}
+  //
+  //.comment {
+  //  color: #998;
+  //}
+}
+code, pre {
+  border-radius: 3px;
+  background-color: #f7f7f7;
+  color: inherit;
+}
+aside {
+  display: block;
+  float: right;
+  width: 390px;
+}
+blockquote {
+  border-left: .5em solid #eee;
+  padding: 0 0 0 2em;
+  margin-left: 0;
+  cite {
+    font-size: 14px;
+    line-height: 20px;
+    color: #bfbfbf;
+    &:before {
+      content: '\2014 \00A0';
+    }
+  }
+  p {
+    color: #666;
+  }
+}
+hr {
+  text-align: left;
+  color: #999;
+  height: 2px;
+  padding: 0;
+  margin: 16px 0;
+  background-color: #e7e7e7;
+  border: 0 none;
+}
+dl {
+  padding: 0;
+  dt {
+    padding: 10px 0;
+    margin-top: 16px;
+    font-size: 1em;
+    font-style: italic;
+    font-weight: bold;
+  }
+  dd {
+    padding: 0 16px;
+    margin-bottom: 16px;
+  }
+}
+dd {
+  margin-left: 0;
+}
+/* Code below this line is copyright Twitter Inc. */
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+  margin: 0;
+  vertical-align: baseline;
+  *vertical-align: middle;
+}
+button, input {
+  line-height: normal;
+  *overflow: visible;
+}
+button::-moz-focus-inner, input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  cursor: pointer;
+  -webkit-appearance: button;
+}
+input[type=checkbox], input[type=radio] {
+  cursor: pointer;
+  margin-bottom: 0;
+}
+/* override default chrome & firefox settings */
+input:not([type="image"]), textarea {
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+input[type="search"] {
+  -webkit-appearance: textfield;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+label,
+input,
+select,
+textarea {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  font-weight: normal;
+  line-height: normal;
+  margin-bottom: 18px;
+}
+input[type=text],
+input[type=password],
+textarea,
+select {
+  display: inline-block;
+  width: 210px;
+  padding: 4px;
+  font-size: 13px;
+  font-weight: normal;
+  line-height: 18px;
+  height: 18px;
+  color: #808080;
+  border: 1px solid #ccc;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+select, input[type=file] {
+  height: 27px;
+  line-height: 27px;
+}
+textarea {
+  height: auto;
+}
+/* grey out placeholders */
+:-moz-placeholder {
+  color: #bfbfbf;
+}
+::-webkit-input-placeholder {
+  color: #bfbfbf;
+}
+input[type=text],
+input[type=password],
+select,
+textarea {
+  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+  transition: border linear 0.2s, box-shadow linear 0.2s;
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+input[type=text]:focus, input[type=password]:focus, textarea:focus {
+  outline: none;
+  border-color: rgba(82, 168, 236, 0.8);
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+}
+/* buttons */
+button {
+  display: inline-block;
+  padding: 4px 14px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  line-height: 18px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  background-color: #0064cd;
+  background-repeat: repeat-x;
+  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
+  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
+  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
+  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
+  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
+  background-image: linear-gradient(top, #049cdb, #0064cd);
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  border: 1px solid #004b9a;
+  border-bottom-color: #003f81;
+  -webkit-transition: 0.1s linear all;
+  -moz-transition: 0.1s linear all;
+  transition: 0.1s linear all;
+  border-color: #0064cd #0064cd #003f81;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  &:hover {
+    color: #fff;
+    background-position: 0 -15px;
+    text-decoration: none;
+  }
+  &:active {
+    -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+}
+table {
+  *border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  border: solid #ccc 1px;
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  //-webkit-box-shadow: 0 1px 1px #ccc;
+  //-moz-box-shadow: 0 1px 1px #ccc;
+  //box-shadow: 0 1px 1px #ccc;
+  tr {
+    &:hover {
+      background: #fbf8e9;
+      -o-transition: all 0.1s ease-in-out;
+      -webkit-transition: all 0.1s ease-in-out;
+      -moz-transition: all 0.1s ease-in-out;
+      -ms-transition: all 0.1s ease-in-out;
+      transition: all 0.1s ease-in-out;
+    }
+    &:last-child {
+      td {
+        &:first-child {
+          -moz-border-radius: 0 0 0 6px;
+          -webkit-border-radius: 0 0 0 6px;
+          border-radius: 0 0 0 6px;
+        }
+        &:last-child {
+          -moz-border-radius: 0 0 6px 0;
+          -webkit-border-radius: 0 0 6px 0;
+          border-radius: 0 0 6px 0;
+        }
+      }
+    }
+  }
+  th {
+    background-color: #dce9f9;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
+    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
+    background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
+    background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
+    background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
+    background-image: linear-gradient(top, #ebf3fc, #dce9f9);
+    //-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
+    //-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
+    //box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
+    border-top: none;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+    padding: 5px;
+    &:first-child {
+      -moz-border-radius: 6px 0 0 0;
+      -webkit-border-radius: 6px 0 0 0;
+      border-radius: 6px 0 0 0;
+    }
+    &:last-child {
+      -moz-border-radius: 0 6px 0 0;
+      -webkit-border-radius: 0 6px 0 0;
+      border-radius: 0 6px 0 0;
+    }
+    &:only-child {
+      -moz-border-radius: 6px 6px 0 0;
+      -webkit-border-radius: 6px 6px 0 0;
+      border-radius: 6px 6px 0 0;
+    }
+  }
+}
+table td, .table th {
+  border-left: 1px solid #ccc;
+  border-top: 1px solid #ccc;
+  padding: 10px;
+  text-align: left;
+}
+table td:first-child, table th:first-child {
+  border-left: none;
+}
--- a/yarn.lock
+++ b/yarn.lock
@@ -3253,6 +3253,15 @@ cli-width@^3.0.0:
  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
  integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
+clipboard@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npm.taobao.org/clipboard/download/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376"
+  integrity sha1-UpISlu7A/fd+rRdJQhshyWhkc3Y=
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
 cliui@^5.0.0:
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
@@ -4062,6 +4071,11 @@ delayed-stream@~1.0.0:
  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
  integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.npm.taobao.org/delegate/download/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha1-tmtxwxWFIuirV0T3INjKDCr1kWY=
 depd@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
@@ -5405,6 +5419,13 @@ globby@^6.1.0:
    pify "^2.0.0"
    pinkie-promise "^2.0.0"
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.npm.taobao.org/good-listener/download/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
+  dependencies:
+    delegate "^3.1.2"
 graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
  version "4.2.4"
  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
@@ -7222,6 +7243,11 @@ map-visit@^1.0.0:
  dependencies:
    object-visit "^1.0.0"
+marked@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.npm.taobao.org/marked/download/marked-1.2.3.tgz#58817ba348a7c9398cb94d40d12e0d08df83af57"
+  integrity sha1-WIF7o0inyTmMuU1A0S4NCN+Dr1c=
 md5.js@^1.3.4:
  version "1.3.5"
  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -10295,6 +10321,11 @@ select-hose@^2.0.0:
  resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
  integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npm.taobao.org/select/download/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
 selfsigned@^1.10.7:
  version "1.10.8"
  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.8.tgz#0d17208b7d12c33f8eac85c41835f27fc3d81a30"
@@ -11157,6 +11188,11 @@ timsort@^0.3.0:
  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
  integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npm.taobao.org/tiny-emitter/download/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha1-HRpW7fxRxD6GPLtTgqcjMONVVCM=
 tinycolor2@^1.4.1:
  version "1.4.2"
  resolved "https://registry.npm.taobao.org/tinycolor2/download/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"