feat: add a refresh button to the data list (#656)

#### 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

@@ -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,
 };

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>

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>

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>

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>

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>