feat: 完善方可分析 tab

Mereithhh · Jul 31, 2022 · 984359c · 984359c
1 parent 449bec0
commit 984359c
Show file tree

Hide file tree

Showing 6 changed files with 178 additions and 19 deletions.
diff --git a/packages/admin/src/components/ArticleList/index.css b/packages/admin/src/components/ArticleList/index.css
@@ -0,0 +1,36 @@
+.article-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 4px;
+  padding-bottom: 4px;
+  border-bottom: 1px dashed rgb(229 231 235);
+  cursor: pointer;
+}
+.article-list-item:hover {
+  border-color: rgb(156 163 175);
+}
+.uaa {
+  position: relative;
+  color: #333;
+  font-size: 14;
+  text-decoration: none;
+}
+.uaa:hover {
+  color: #333;
+}
+.uaa:before {
+  position: absolute;
+  bottom: -2px;
+  left: 50%;
+  width: 0;
+  height: 2px;
+  background: rgb(156 163 175);
+  transition: all 0.3s;
+  content: '';
+}
+.uaa:hover:before {
+  right: 0;
+  left: 0;
+  width: 100%;
+}
diff --git a/packages/admin/src/components/ArticleList/index.tsx b/packages/admin/src/components/ArticleList/index.tsx
@@ -0,0 +1,27 @@
+import { getRecentTimeDes } from '@/services/van-blog/tool';
+import './index.css';
+export default function (props: {
+  articles: any[];
+  showViewerNum: boolean;
+  showRecentViewTime: boolean;
+}) {
+  return (
+    <div>
+      {props.articles.map((article) => {
+        return (
+          <a
+            className="article-list-item  uaa"
+            key={article.id}
+            href={`/post/${article.id}`}
+            target={'_blank'}
+            rel="noreferrer"
+          >
+            <div className="">{article.title}</div>
+            {props.showViewerNum && <div>{`${article.viewer || 0}人次`}</div>}
+            {props.showRecentViewTime && <div>{getRecentTimeDes(article.lastVisitedTime)}</div>}
+          </a>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/packages/admin/src/components/Footer/index.css b/packages/admin/src/components/Footer/index.css
@@ -5,15 +5,24 @@
   padding-bottom: 24px;
   user-select: none;
 }
+.ua.blue {
+  color: #1772b4;
+}
 .ua {
   position: relative;
   color: #333;
   font-size: 14;
   text-decoration: none;
 }
+.ua.blue:hover {
+  color: #1772b4;
+}
 .ua:hover {
   color: #333;
 }
+.blue.ua::before {
+  background: #1772b4;
+}
 .ua:before {
   position: absolute;
   bottom: -2px;

diff --git a/packages/admin/src/components/PowerIcon/index.jsx b/packages/admin/src/components/PowerIcon/index.jsx
@@ -0,0 +1,9 @@
+import { PoweroffOutlined } from '@ant-design/icons';
+export default function (props) {
+  const { on } = props.on || { on: false };
+  return (
+    <>
+      <PoweroffOutlined color={on ? 'green' : 'gray'} />
+    </>
+  );
+}
diff --git a/packages/admin/src/pages/Welcome/tabs/viewer.jsx b/packages/admin/src/pages/Welcome/tabs/viewer.jsx
@@ -3,6 +3,11 @@ import { Spin } from 'antd';
 import { Area } from '@ant-design/plots';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { getWelcomeData } from '@/services/van-blog/api';
+import PowerIcon from '@/components/PowerIcon';
+import moment from 'moment';
+import ArticleList from '@/components/ArticleList';
+import { getRecentTimeDes } from '@/services/van-blog/tool';
+import { Link, history } from 'umi';
 const { Statistic } = StatisticCard;
 
 const Viewer = () => {
@@ -36,49 +41,107 @@ const Viewer = () => {
     xField: 'date',
     autoFix: false,
   };
+  const recentHref = useMemo(() => {
+    if (!data) {
+      return undefined;
+    }
+    if (!data?.siteLastVisitedPathname) {
+      return undefined;
+    }
+    return data?.siteLastVisitedPathname;
+  }, [data]);
+  const recentVisitTime = useMemo(() => {
+    if (!data) {
+      return '-';
+    }
+    if (!data.siteLastVisitedTime) {
+      return '-';
+    }
+    return getRecentTimeDes(data?.siteLastVisitedTime);
+  }, [data]);
 
   return (
     <Spin spinning={loading}>
       <StatisticCard.Group>
         <StatisticCard
           statistic={{
-            title: '总文章数',
-            value: data?.total?.articleNum || 0,
+            title: (
+              <a
+                href="https://tongji.baidu.com/main/homepage/"
+                className="ua blue"
+                target="_blank"
+                rel="noreferrer"
+              >
+                百度统计
+              </a>
+            ),
+            formatter: () => {
+              if (data?.enableBaidu) {
+                return <span>已开启</span>;
+              } else {
+                return <Link to="/site?tab=siteInfo">未配置</Link>;
+              }
+            },
+            status: data?.enableBaidu ? 'success' : 'error',
           }}
         />
         <StatisticCard
           statistic={{
-            title: '总字数',
-            value: data?.total?.wordCount || 0,
+            title: (
+              <a
+                href="https://analytics.google.com/analytics/web/"
+                className="ua blue"
+                target="_blank"
+                rel="noreferrer"
+              >
+                谷歌分析
+              </a>
+            ),
+            formatter: () => {
+              if (data?.enableGA) {
+                return <span>已开启</span>;
+              } else {
+                return <Link to="/site?tab=siteInfo">未配置</Link>;
+              }
+            },
+            status: data?.enableGA ? 'success' : 'error',
           }}
         />
         <StatisticCard
           statistic={{
-            title: '总访客数',
-            value: data?.viewer?.now?.visited || 0,
-            description: (
-              <Statistic title="今日新增" value={data?.viewer?.add?.visited || 0} trend="up" />
-            ),
+            title: '最近访问',
+            value: recentVisitTime,
           }}
         />
         <StatisticCard
           statistic={{
-            title: '总访问量',
-            value: data?.viewer?.now?.viewer || 0,
-            description: (
-              <Statistic title="今日新增" value={data?.viewer?.add?.viewer || 0} trend="up" />
-            ),
+            title: '最近访问路径',
+            formatter: (val) => {
+              return (
+                <a className="ua blue" target="_blank" rel="noreferrer" href={recentHref}>
+                  {data?.siteLastVisitedPathname || '-'}
+                </a>
+              );
+            },
           }}
         />
       </StatisticCard.Group>
       <StatisticCard.Group>
         <StatisticCard
-          title="访客数趋势图"
-          chart={<Area height={200} yField="访客数" {...lineConfig} />}
+          title="最近访问 TOP"
+          chart={
+            <div style={{ marginTop: -14 }}>
+              <ArticleList showRecentViewTime articles={data?.recentVisitArticles || []} />
+            </div>
+          }
         />
         <StatisticCard
-          title="访问量趋势图"
-          chart={<Area height={200} yField="访问量" {...lineConfig} />}
+          title="文章访问量 TOP"
+          chart={
+            <div style={{ marginTop: -14 }}>
+              <ArticleList showViewerNum articles={data?.topViewer || []} />
+            </div>
+          }
         />
       </StatisticCard.Group>
     </Spin>

diff --git a/packages/admin/src/services/van-blog/tool.js b/packages/admin/src/services/van-blog/tool.js
@@ -14,7 +14,22 @@ export const formatTimes = (...args) => {
   for (const each of args) {
     try {
       return moment(each).format(formatStr);
-    } catch {}
+    } catch { }
   }
   return '-';
 };
+export const getRecentTimeDes = (timestr) => {
+  if (!timestr || timestr == "") {
+    return '-'
+  }
+  const c = moment().diff(moment(timestr), 'seconds');
+  if (c <= 60) {
+    return c + '秒前';
+  } else if (c <= 60 * 60) {
+    return Math.floor(c / 60) + '分钟前';
+  } else if (c <= 60 * 60 * 60) {
+    return Math.floor(c / 60 / 60) + '小时前';
+  } else if (c <= 60 * 60 * 60 * 24) {
+    return Math.floor(c / 60 / 60 / 24) + '天前';
+  }
+}