From 9c6bda84d322dca967376318fcfc342db727f4d4 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 30 Sep 2022 16:06:18 +0800
Subject: [PATCH] feat: support for displaying site content statistics
 (halo-dev/console#624)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind feature
/milestone 2.0

#### What this PR does / why we need it:

- 支持在文章和自定义页面的管理列表显示访问数和评论数。
- 仪表盘支持显示整站的访问数。

适配 https://github.com/halo-dev/halo/pull/2476

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/2430

#### Special notes for your reviewer:

/cc @halo-dev/sig-halo-console

测试方式：

1. Halo 需要 https://github.com/halo-dev/halo/pull/2476 PR 中的分支。
2. 需要执行 `pnpm install && pnpm build:packages`
3. 随机访问前台文章或者自定义页面，以及添加评论。
4. 查看后台是否正确统计文章浏览数和评论数。

TODO list:

- [ ] 更新 `@halo-dev/api-client`

#### Does this PR introduce a user-facing change?

```release-note
支持在文章和自定义页面的管理列表显示访问数和评论数
```
---
 package.json                                   |  2 +-
 pnpm-lock.yaml                                 |  8 ++++----
 src/modules/contents/pages/SinglePageList.vue  | 14 +++++++++++++-
 src/modules/contents/posts/PostList.vue        |  8 ++++++--
 .../widgets/RecentPublishedWidget.vue          |  8 ++++++--
 .../dashboard/widgets/ViewsStatsWidget.vue     | 18 +++++++++++++++++-
 src/utils/api-client.ts                        |  2 ++
 7 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 263abc237..e78ebb640 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "@formkit/themes": "1.0.0-beta.10",
     "@formkit/vue": "1.0.0-beta.10",
     "@halo-dev/admin-shared": "workspace:*",
-    "@halo-dev/api-client": "^0.0.34",
+    "@halo-dev/api-client": "^0.0.35",
     "@halo-dev/components": "workspace:*",
     "@halo-dev/richtext-editor": "^0.0.0-alpha.7",
     "@tiptap/extension-character-count": "2.0.0-beta.31",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f1aaf0996..bbb63b8b5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,7 +14,7 @@ importers:
       '@formkit/themes': 1.0.0-beta.10
       '@formkit/vue': 1.0.0-beta.10
       '@halo-dev/admin-shared': workspace:*
-      '@halo-dev/api-client': ^0.0.34
+      '@halo-dev/api-client': ^0.0.35
       '@halo-dev/components': workspace:*
       '@halo-dev/richtext-editor': ^0.0.0-alpha.7
       '@iconify-json/mdi': ^1.1.33
@@ -101,7 +101,7 @@ importers:
       '@formkit/themes': 1.0.0-beta.10_tailwindcss@3.1.8
       '@formkit/vue': 1.0.0-beta.10_k5hp3txgeyj6le63abiyc7wx3u
       '@halo-dev/admin-shared': link:packages/shared
-      '@halo-dev/api-client': 0.0.34
+      '@halo-dev/api-client': 0.0.35
       '@halo-dev/components': link:packages/components
       '@halo-dev/richtext-editor': 0.0.0-alpha.7_vue@3.2.40
       '@tiptap/extension-character-count': 2.0.0-beta.31
@@ -1886,8 +1886,8 @@ packages:
       - windicss
     dev: false
 
-  /@halo-dev/api-client/0.0.34:
-    resolution: {integrity: sha512-WOEbyRjPSASH1tyQjQQU/RjXKtRPSD+L6erAWLUfy7BIsyCAMSBdkF3auBWaevUt08uyCBeI3ln+sP+VPyFM0A==}
+  /@halo-dev/api-client/0.0.35:
+    resolution: {integrity: sha512-+WBXS2/tHmeugeiDNXmBrtV9NiU22lylzwcugH/eTXGy7MnpAG4j//o2OOYyhVcp9BUBoh7MHuu0UcyLHq1bgg==}
     dev: false
 
   /@halo-dev/richtext-editor/0.0.0-alpha.7_vue@3.2.40:
diff --git a/src/modules/contents/pages/SinglePageList.vue b/src/modules/contents/pages/SinglePageList.vue
index 1e2c34d68..2dea5e8a6 100644
--- a/src/modules/contents/pages/SinglePageList.vue
+++ b/src/modules/contents/pages/SinglePageList.vue
@@ -535,7 +535,6 @@ function handleSortItemChange(sortItem?: SortItem) {
           <template #start>
             <VEntityField
               :title="singlePage.page.spec.title"
-              :description="singlePage.page.status?.permalink"
               :route="{
                 name: 'SinglePageEditor',
                 query: { name: singlePage.page.metadata.name },
@@ -554,6 +553,19 @@ function handleSortItemChange(sortItem?: SortItem) {
                   <VStatusDot state="success" animate />
                 </RouterLink>
               </template>
+              <template #description>
+                <VSpace>
+                  <span class="text-xs text-gray-500">
+                    {{ singlePage.page.status?.permalink }}
+                  </span>
+                  <span class="text-xs text-gray-500">
+                    访问量 {{ singlePage.stats.visits || 0 }}
+                  </span>
+                  <span class="text-xs text-gray-500">
+                    评论 {{ singlePage.stats.comments || 0 }}
+                  </span>
+                </VSpace>
+              </template>
             </VEntityField>
           </template>
           <template #end>
diff --git a/src/modules/contents/posts/PostList.vue b/src/modules/contents/posts/PostList.vue
index db9ccc8a1..36139b941 100644
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@@ -837,8 +837,12 @@ function handleContributorChange(user?: User) {
                         {{ category.spec.displayName }}
                       </span>
                     </p>
-                    <span class="text-xs text-gray-500">访问量 0</span>
-                    <span class="text-xs text-gray-500"> 评论 0 </span>
+                    <span class="text-xs text-gray-500">
+                      访问量 {{ post.stats.visits || 0 }}
+                    </span>
+                    <span class="text-xs text-gray-500">
+                      评论 {{ post.stats.comments || 0 }}
+                    </span>
                   </VSpace>
                 </template>
               </VEntityField>
diff --git a/src/modules/dashboard/widgets/RecentPublishedWidget.vue b/src/modules/dashboard/widgets/RecentPublishedWidget.vue
index f8beb7e03..a9c793d8f 100644
--- a/src/modules/dashboard/widgets/RecentPublishedWidget.vue
+++ b/src/modules/dashboard/widgets/RecentPublishedWidget.vue
@@ -43,8 +43,12 @@ onMounted(handleFetchPosts);
               </p>
               <div class="mt-1 flex">
                 <VSpace>
-                  <span class="text-xs text-gray-500"> 阅读 0 </span>
-                  <span class="text-xs text-gray-500"> 评论 0 </span>
+                  <span class="text-xs text-gray-500">
+                    阅读 {{ post.stats.visits }}
+                  </span>
+                  <span class="text-xs text-gray-500">
+                    评论 {{ post.stats.comments }}
+                  </span>
                 </VSpace>
               </div>
             </div>
diff --git a/src/modules/dashboard/widgets/ViewsStatsWidget.vue b/src/modules/dashboard/widgets/ViewsStatsWidget.vue
index 23dc72148..fc6ce45bc 100644
--- a/src/modules/dashboard/widgets/ViewsStatsWidget.vue
+++ b/src/modules/dashboard/widgets/ViewsStatsWidget.vue
@@ -1,9 +1,25 @@
 <script lang="ts" name="ViewsStatsWidget" setup>
+import { apiClient } from "@/utils/api-client";
+import type { Stats } from "@halo-dev/api-client";
 import { VCard } from "@halo-dev/components";
+import { onMounted, ref } from "vue";
+
+const stats = ref<Stats>({
+  visits: 0,
+});
+
+const handleFetchStats = async () => {
+  const { data } = await apiClient.stats.getStats();
+  stats.value = data;
+};
+
+onMounted(handleFetchStats);
 </script>
 <template>
   <VCard class="h-full">
     <dt class="truncate text-sm font-medium text-gray-500">浏览量</dt>
-    <dd class="mt-1 text-3xl font-semibold text-gray-900">123,321</dd>
+    <dd class="mt-1 text-3xl font-semibold text-gray-900">
+      {{ stats.visits || 0 }}
+    </dd>
   </VCard>
 </template>
diff --git a/src/utils/api-client.ts b/src/utils/api-client.ts
index 2c7ec939b..5750a1d2b 100644
--- a/src/utils/api-client.ts
+++ b/src/utils/api-client.ts
@@ -7,6 +7,7 @@ import {
   ApiConsoleHaloRunV1alpha1UserApi,
   ApiConsoleHaloRunV1alpha1CommentApi,
   ApiConsoleHaloRunV1alpha1ReplyApi,
+  ApiConsoleHaloRunV1alpha1StatsApi,
   ContentHaloRunV1alpha1CategoryApi,
   ContentHaloRunV1alpha1CommentApi,
   ContentHaloRunV1alpha1PostApi,
@@ -126,6 +127,7 @@ function setupApiClient(axios: AxiosInstance) {
     content: new ApiConsoleHaloRunV1alpha1ContentApi(undefined, baseURL, axios),
     comment: new ApiConsoleHaloRunV1alpha1CommentApi(undefined, baseURL, axios),
     reply: new ApiConsoleHaloRunV1alpha1ReplyApi(undefined, baseURL, axios),
+    stats: new ApiConsoleHaloRunV1alpha1StatsApi(undefined, baseURL, axios),
   };
 }