From e7f53fad055d2ff046f9fe6ed9c2868f2f630f0c Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Sun, 27 Aug 2023 22:50:13 -0500
Subject: [PATCH] feat: display total items text for plugins list (#4500)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area console
/kind improvement
/milestone 2.9.x

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

在 https://github.com/halo-dev/halo/pull/4473 中移除了插件管理的分页功能，但可能会造成列表底部看起来不协调，所以恢复总条数的文字显示。

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

Fixes #4498

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

```release-note
None
```
---
 console/src/modules/system/plugins/PluginList.vue | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/console/src/modules/system/plugins/PluginList.vue b/console/src/modules/system/plugins/PluginList.vue
index 9c0f98835..adef80182 100644
--- a/console/src/modules/system/plugins/PluginList.vue
+++ b/console/src/modules/system/plugins/PluginList.vue
@@ -52,6 +52,8 @@ function handleClearFilters() {
   selectedEnabledValue.value = undefined;
 }
 
+const total = ref(0);
+
 const { data, isLoading, isFetching, refetch } = useQuery<Plugin[]>({
   queryKey: ["plugins", keyword, selectedEnabledValue, selectedSortValue],
   queryFn: async () => {
@@ -62,6 +64,9 @@ const { data, isLoading, isFetching, refetch } = useQuery<Plugin[]>({
       enabled: selectedEnabledValue.value,
       sort: [selectedSortValue.value].filter(Boolean) as string[],
     });
+
+    total.value = data.total;
+
     return data.items;
   },
   keepPreviousData: true,
@@ -304,6 +309,14 @@ onMounted(() => {
           </li>
         </ul>
       </Transition>
+
+      <template #footer>
+        <div class="flex h-8 items-center">
+          <span class="text-sm text-gray-500">
+            {{ $t("core.components.pagination.total_label", { total: total }) }}
+          </span>
+        </div>
+      </template>
     </VCard>
   </div>
 </template>