From 7a5d52effebff2861483c7b29037e1f4b97a88a2 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 24 Oct 2022 11:18:16 +0800
Subject: [PATCH] feat: add a refresh button to the data list
 (halo-dev/console#656)
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:

为部分功能数据列表添加刷新按钮。

#### Screenshots:

<img width="1664" alt="image" src="https://user-images.githubusercontent.com/21301288/197397277-353befe4-8c43-4326-9ad5-64d2888dc4a3.png">

#### Special notes for your reviewer:

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

测试方式：

1. 需要 `pnpm build:packages`
2. 测试点击刷新按钮是否可以正常请求接口。

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

```release-note
为部分功能数据列表添加刷新按钮。
```
---
 packages/components/src/icons/icons.ts             |  2 ++
 .../contents/attachments/AttachmentList.vue        | 14 +++++++++++++-
 src/modules/contents/comments/CommentList.vue      | 12 ++++++++++++
 src/modules/contents/pages/SinglePageList.vue      | 12 ++++++++++++
 src/modules/contents/posts/PostList.vue            | 12 ++++++++++++
 src/modules/system/plugins/PluginList.vue          | 12 ++++++++++++
 6 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/icons/icons.ts b/packages/components/src/icons/icons.ts
index 438d71003..7ceecb076 100644
--- a/packages/components/src/icons/icons.ts
+++ b/packages/components/src/icons/icons.ts
@@ -50,6 +50,7 @@ import IconUserLine from "~icons/ri/user-line";
 import IconMotionLine from "~icons/ri/emotion-line";
 import IconReplyLine from "~icons/ri/reply-line";
 import IconExternalLinkLine from "~icons/ri/external-link-line";
+import IconRefreshLine from "~icons/ri/refresh-line";
 
 export {
   IconDashboard,
@@ -104,4 +105,5 @@ export {
   IconMotionLine,
   IconReplyLine,
   IconExternalLinkLine,
+  IconRefreshLine,
 };
diff --git a/src/modules/contents/attachments/AttachmentList.vue b/src/modules/contents/attachments/AttachmentList.vue
index b4d72db1c..eb01285f0 100644
--- a/src/modules/contents/attachments/AttachmentList.vue
+++ b/src/modules/contents/attachments/AttachmentList.vue
@@ -8,6 +8,7 @@ import {
   IconGrid,
   IconList,
   IconUpload,
+  IconRefreshLine,
   VButton,
   VCard,
   VPageHeader,
@@ -478,7 +479,18 @@ onMounted(() => {
                         class="cursor-pointer rounded p-1 hover:bg-gray-200"
                         @click="viewType = item.name"
                       >
-                        <component :is="item.icon" />
+                        <component :is="item.icon" class="h-4 w-4" />
+                      </div>
+                    </div>
+                    <div class="flex flex-row gap-2">
+                      <div
+                        class="group cursor-pointer rounded p-1 hover:bg-gray-200"
+                        @click="handleFetchAttachments"
+                      >
+                        <IconRefreshLine
+                          :class="{ 'animate-spin text-gray-900': loading }"
+                          class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                        />
                       </div>
                     </div>
                   </VSpace>
diff --git a/src/modules/contents/comments/CommentList.vue b/src/modules/contents/comments/CommentList.vue
index 2912ce42f..4875a766f 100644
--- a/src/modules/contents/comments/CommentList.vue
+++ b/src/modules/contents/comments/CommentList.vue
@@ -8,6 +8,7 @@ import {
   VPagination,
   VSpace,
   IconCloseCircle,
+  IconRefreshLine,
   VEmpty,
   Dialog,
 } from "@halo-dev/components";
@@ -387,6 +388,17 @@ function handleSelectUser(user: User | undefined) {
                     </div>
                   </template>
                 </FloatingDropdown>
+                <div class="flex flex-row gap-2">
+                  <div
+                    class="group cursor-pointer rounded p-1 hover:bg-gray-200"
+                    @click="handleFetchComments"
+                  >
+                    <IconRefreshLine
+                      :class="{ 'animate-spin text-gray-900': loading }"
+                      class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                    />
+                  </div>
+                </div>
               </VSpace>
             </div>
           </div>
diff --git a/src/modules/contents/pages/SinglePageList.vue b/src/modules/contents/pages/SinglePageList.vue
index 9745cf8eb..a70aa246b 100644
--- a/src/modules/contents/pages/SinglePageList.vue
+++ b/src/modules/contents/pages/SinglePageList.vue
@@ -8,6 +8,7 @@ import {
   IconTeam,
   IconCloseCircle,
   IconAddCircle,
+  IconRefreshLine,
   VButton,
   VCard,
   VPagination,
@@ -500,6 +501,17 @@ function handleSortItemChange(sortItem?: SortItem) {
                   </div>
                 </template>
               </FloatingDropdown>
+              <div class="flex flex-row gap-2">
+                <div
+                  class="group cursor-pointer rounded p-1 hover:bg-gray-200"
+                  @click="handleFetchSinglePages"
+                >
+                  <IconRefreshLine
+                    :class="{ 'animate-spin text-gray-900': loading }"
+                    class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                  />
+                </div>
+              </div>
             </VSpace>
           </div>
         </div>
diff --git a/src/modules/contents/posts/PostList.vue b/src/modules/contents/posts/PostList.vue
index 47c3cebc8..fa0e463d9 100644
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@@ -9,6 +9,7 @@ import {
   IconEyeOff,
   IconTeam,
   IconCloseCircle,
+  IconRefreshLine,
   Dialog,
   VButton,
   VCard,
@@ -763,6 +764,17 @@ function handleContributorChange(user?: User) {
                     </div>
                   </template>
                 </FloatingDropdown>
+                <div class="flex flex-row gap-2">
+                  <div
+                    class="group cursor-pointer rounded p-1 hover:bg-gray-200"
+                    @click="handleFetchPosts"
+                  >
+                    <IconRefreshLine
+                      :class="{ 'animate-spin text-gray-900': loading }"
+                      class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                    />
+                  </div>
+                </div>
               </VSpace>
             </div>
           </div>
diff --git a/src/modules/system/plugins/PluginList.vue b/src/modules/system/plugins/PluginList.vue
index 6382e7734..98b4c865f 100644
--- a/src/modules/system/plugins/PluginList.vue
+++ b/src/modules/system/plugins/PluginList.vue
@@ -4,6 +4,7 @@ import {
   IconArrowDown,
   IconCloseCircle,
   IconPlug,
+  IconRefreshLine,
   VButton,
   VCard,
   VEmpty,
@@ -242,6 +243,17 @@ function handleSortItemChange(sortItem?: SortItem) {
                     </div>
                   </template>
                 </FloatingDropdown>
+                <div class="flex flex-row gap-2">
+                  <div
+                    class="group cursor-pointer rounded p-1 hover:bg-gray-200"
+                    @click="handleFetchPlugins"
+                  >
+                    <IconRefreshLine
+                      :class="{ 'animate-spin text-gray-900': loading }"
+                      class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                    />
+                  </div>
+                </div>
               </VSpace>
             </div>
           </div>