feat: 站点底部修改.增加渲染时间和站点运行

shi-lai-mu · Oct 7, 2019 · 595062a · 595062a
1 parent a92d19e
commit 595062a
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 37 deletions.
diff --git a/layouts/default/footer.tsx b/layouts/default/footer.tsx
@@ -1,26 +1,56 @@
-
+import React from 'react'
 import Link from 'next/link'
+import { unForm } from '../../utils/date'
+
+export default class LayoutsDefauleFooter extends React.Component {
+
+  state = {
+    loadTime: 0,
+    currentTime: Date.now(),
+  }
+
+  componentDidMount() {
+    // 站点加载完成事件添加
+    window.addEventListener('load', () => {
+      this.setState({
+        loadTime: Date.now() - performance.timing.fetchStart,
+      })
+    })
+    // 站点运行时间计算
+    setInterval(() => {
+      this.setState({
+        currentTime: unForm(1535150280000),
+      })
+    }, 1000)
+  }
 
-export default () => {
-  return (
-    <div className="default-layouts-footer">
-      <div className="copyright clearfix">
-        <div className="copyright-left">© CopyRight 2018-2019, <a href="//slmblog.com">SLMBLOG.COM</a>, Inc.All Rights Reserved.</div>
-        <div className="copyright-right">
-          <Link href={{ pathname: "/other/terms" }}>
-            <a data-tag="page-toggle">条款和免责</a>
-          </Link>
-          <Link href={{ pathname: "/other/about"}}>
-            <a data-tag="page-toggle">关于本站</a>
-          </Link>
+  render() {
+    const { loadTime, currentTime } = this.state
+
+    return (
+      <div className="default-layouts-footer">
+        <div className="web-info">
+          <div>© CopyRight 2018-2019, <a href="//slmblog.com">SLMBLOG.COM</a>, Inc.All Rights Reserved.</div>
+          <div className="copyright-right">
+            <Link href={{ pathname: "/other/terms" }}>
+              <a data-tag="page-toggle">条款和免责</a>
+            </Link>
+            <Link href={{ pathname: "/other/about"}}>
+              <a data-tag="page-toggle">关于本站</a>
+            </Link>
+          </div>
+          <div className="web-param">
+            <span>渲染{ loadTime }ms</span>
+            <span>站点已运行 { currentTime }</span>
+          </div>
+        </div>
+        <div className="beian">
+          <span className="beian-a">
+            <a target="_blank" className="beian-sn" href="//www.miitbeian.gov.cn">浙ICP备18049156号-2</a>
+            <a target="_blank" href="//www.beian.gov.cn">(浙公网安备 33038102331168号)</a>
+          </span>
         </div>
       </div>
-      <div className="beian clearfix">
-        <span className="beian-a">
-          <a target="_blank" className="beian-sn" href="//www.miitbeian.gov.cn">浙ICP备18049156号-2</a>
-          <a target="_blank" href="//www.beian.gov.cn">(浙公网安备 33038102331168号)</a>
-        </span>
-      </div>
-    </div>
-  )
+    )
+  }
  }
diff --git a/layouts/default/index.scss b/layouts/default/index.scss
@@ -121,26 +121,21 @@ h1 {
   color: #b6c3db;
   background-color: rgba(255, 255, 255, .8);
   user-select: none;
-  .copyright {
-    display: flex;
-    min-width: var(--min-width);
-    padding: 20px 10px 0;
+  text-align: center;
+  .web-info {
+    padding: 0 10px;
     margin: 15px 0;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: center;
-  }
-  .copyright-left {
-    width: 100%;
-    text-align: center;
-  }
-  .copyright-right {
-    display: flex;
-    margin-top: 5px;
-    a:not(:last-child) {
-      &::after {
-        content: "|";
-        margin: 0 7px;
+    > div {
+      margin-top: 5px;
+      a:not(:last-child),
+      span:not(:last-child) {
+        &::after {
+          content: "|";
+          margin: 0 7px;
+        }
       }
     }
   }

diff --git a/utils/date.ts b/utils/date.ts
@@ -0,0 +1,85 @@
+/**
+ *  格式化日期
+ *  @param {String} fmt 日期格式 如：yyyy-MM-dd HH:mm:ss
+ *  @param {Number} form 指定时间 不传参 默认目前时间
+ */
+export const dateForm = (fmt: string, form: any): string => {
+  // tslint:disable-next-line:radix
+  const date = form ? new Date( parseInt( form ) ) : new Date();
+  const o: any = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12,
+    'H+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds(),
+    'q+': Math.floor((date.getMonth() + 3) / 3),
+    'S': date.getMilliseconds(),
+  };
+  const week: any = {
+    0: '日',
+    1: '一',
+    2: '二',
+    3: '三',
+    4: '四',
+    5: '五',
+    6: '六',
+  };
+  const season: any = {
+    1: '春',
+    2: '夏',
+    3: '秋',
+    4: '冬',
+  };
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
+  }
+  if (/(E+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '星期' : '周') : '')
+    + week[date.getDay() + '']);
+  }
+  if (/(q+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, season[o['q+']] + ((RegExp.$1.length > 1) ? '季' : ''));
+  }
+  let k: string;
+  for (k in o) {
+    if (new RegExp('(' + k + ')').test(fmt)) {
+      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
+    }
+  }
+  return fmt;
+};
+
+
+/**
+ * 计算 距离结束 还有多长带单位
+ * @param {number} time 结束时间
+ * @param {number} startTime 开始时间
+ * @return {string} 带单位的时间
+ */
+export const unForm = (time: number, startTime?: any): string => {
+  time -= startTime || new Date()
+  time /= 1000
+  time < 0 && (time = -(time))
+  let r = `时间转换失败: ${time}`
+  if (time < 60) {
+    r = time + '秒'
+  } else if (time >= 60 && time < 3600) {
+    r = Math.floor(time / 60) + '分' + Math.floor(time % 60) + '秒'
+  } else if (time >= 3600 && time < 86400) {
+    r = Math.floor(time / 3600) + '小时' + Math.floor((time % 3600) / 60) + '分' + Math.floor(((time % 86400) % 3600) % 60) + '秒'
+  } else if (time >= 86400 && time < 2592000) {
+    r = Math.floor(time / 86400) + '天' + Math.floor((time % 86400) / 3600) + '小时' + Math.floor(((time % 86400) %
+      3600) / 60) + '分' + Math.floor((((time % 86400) % 3600) % 60) % 60) + '秒'
+  } else if (time >= 2592000 && time < 31104000) {
+    r = Math.floor(time / 2592000) + '个月' + Math.floor((time % 2592000) / 86400) + '天' + Math.floor(((time %
+      2592000) % 86400) / 3600) + '小时' + Math.floor((((time % 2592000) % 86400) % 3600) / 60) + '分' + Math.floor(
+        ((time % 86400) % 3600) % 60 % 60) + '秒'
+  } else if (time >= 31104000) {
+    r = Math.floor(time / 31104000) + '年' + Math.floor((time % 31104000) / 2592000) + '个月' + Math.floor(((time %
+      31104000) % 2592000) / 86400) + '天' + Math.floor((((time % 31104000) % 2592000) % 86400) / 3600) + '小时' +
+      Math.floor(((((time % 31104000) % 2592000) % 86400) % 3600) / 60) + '分' + Math.floor((((((time % 31104000) %
+        2592000) % 86400) % 3600) % 60) % 60) + '秒'
+  }
+  return r
+}