Merge pull request #1 from Reaper622/dev

Reaper622 · web-flow · commit 81991e8bcddd · 2019-09-26T21:08:45.000+08:00
添加icon与manifest文件，修复Header无法显示当前页的问题
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,8 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
+  <link rel="manifest" href="./manifest.json" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Reaper Lee</title>
 </head>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "The Blog",
+  "name": "Reaper Lee's Blog",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/Pages/Archives.js b/src/Pages/Archives.js
@@ -49,7 +49,7 @@ class Archives extends Component {
   render() {
     return (
       <Layout>
-        <TheHeader  current={'archives'}></TheHeader>
+        <TheHeader></TheHeader>
         <Content>
           <Row>
             <Col offset={4}  span={12}  style={{background: '#fff', minHeight: '600px' , padding: '20px 0'}}>
diff --git a/src/Pages/Friend.js b/src/Pages/Friend.js
@@ -41,7 +41,7 @@ class Friend extends Component {
   render() {
     return (
       <Layout>
-        <TheHeader  current={'friend'}></TheHeader>
+        <TheHeader></TheHeader>
         <Content>
           <Row>
             <Col offset={4}  span={12}  style={{background: '#fff', minHeight: '600px' , padding: '20px 50px'}}>
diff --git a/src/Pages/Index.js b/src/Pages/Index.js
@@ -3,10 +3,11 @@ import TheHeader from '@components/Header'
 import TheFooter from '@components/Footer'
 import Blog from '@components/Blog'
 import Axios from 'axios'
-import {Layout, Row, Col, Pagination, Spin} from 'antd'
+import {Layout, Row, Col, Pagination} from 'antd'
 import { connect } from 'react-redux'
 import {loadBlogsByPage} from '../redux/store'
 import config from '../../config.json'
+import { CSSTransition } from 'react-transition-group'
 
 const { Content } = Layout
 
@@ -18,7 +19,7 @@ class Index extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      loading: true
+      loaded: false
     }
   }
 
@@ -29,19 +30,18 @@ class Index extends Component {
   }
 
   getBlogs(page) {
-    this.setState({ loading: true})
     Axios.get(`${config.server_url}/blog/getblogs/${page}`)
-      .then(res => {
-        res.data.blogs.map(blog => {
-          blog.time = blog.time.split('T')[0]
-        })
-        this.setState({ loading: false})
-        this.props.loadBlogsByPage(res.data)
+    .then(res => {
+      res.data.blogs.map(blog => {
+        blog.time = blog.time.split('T')[0]
       })
+      this.setState({ loaded: true})
+      this.props.loadBlogsByPage(res.data)
+    })
   }
-
+  
   handlePageChange(page) {
-    
+    this.setState({ loaded: false})
     this.getBlogs(page - 1)
   }
 
@@ -51,11 +51,16 @@ class Index extends Component {
         <TheHeader></TheHeader>
         <Content>
           <Row>
-            <Col offset={4}  span={12} >
-              <Spin spinning={this.state.loading} style={{minHeight: '1000 px'}}>
-                { this.props.blogsToShow ? this.props.blogsToShow.map(blog => <Blog key={blog.id} {...blog} isPriview={true} />) : null}
-              </Spin>
+          <CSSTransition
+                in={this.state.loaded}
+                timeout={2000}
+                classNames='fade'
+                appear={true}
+                >
+            <Col offset={4}  span={12} style={{minHeight: '600px'}} >
+                { this.props.blogsToShow ? this.props.blogsToShow.map(blog => <Blog key={blog.id} {...blog} isPriview={true} />) : <div></div>}
             </Col>
+          </CSSTransition>
           </Row>
           <Row style={{margin: '20px 0 50px'}}>
             <Col offset={4} span={12} style={{padding: '20px 0', background: '#fff', display: 'flex', justifyContent: 'center'}}>
@@ -64,6 +69,34 @@ class Index extends Component {
           </Row>
         </Content>
         <TheFooter></TheFooter>
+        <style jsx>{`
+            /* enter 为入场前的瞬间， appear指页面第一次加载前的瞬间（auto） */
+            .fade-enter, .fade-appear {
+              opacity: 0;
+            }
+            /* enter-active 为入场到入场结束的过程 appear-active 为页面第一次自动执行 */
+            .fade-enter-active, .fade-appear-active {
+              opacity: 1;
+              transition: opacity 1s ease-in;
+            }
+            /* 入场动画执行完毕后, 保持状态 */
+            .fade-enter-done {
+              opacity: 1;
+            }
+            /*出厂前的瞬间 */
+            .fade-exit {
+              opacity: 1;
+            }
+            /*出场到出场结束的过程 */
+            .fade-exit-active {
+              opacity: 0;
+              transition: opacity 1s ease-in;
+            }
+            /*出场动画执行后保持状态 */
+            .fade-exit-done {
+              opacity: 0;
+            }
+          `}</style>
       </Layout>
     )
   }
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -20,8 +20,8 @@ const LinkMeMore = (
   </Menu>
 )
 
-function TheLayout({location, history, current}) {
-  const [tabKey, setTabKey] = useState(current || 'index')
+function TheLayout({location, history}) {
+  const [tabKey, setTabKey] = useState(location.pathname.split('/')[1] || 'index')
   const [isAvatarHover, setIsAvatarHover] = useState(false)
   const switchTab = useCallback((index) => {
     setTabKey(index)
