From 99ec7af198a558b519fd9bdd32645191530608f1 Mon Sep 17 00:00:00 2001
From: ZXSheng <952396285@qq.com>
Date: Fri, 9 Dec 2022 15:16:15 +0800
Subject: [PATCH] perf: add tooltip for some icon buttons
 (halo-dev/console#745)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?
/kind improvement

#### What this PR does / why we need it:
部分 UI 元素使用了图标代替文字，但某些情况下可能会导致无法直观的判断具体用途，添加 tooltip 以提示使用者。
#### Which issue(s) this PR fixes:
Fixes https://github.com/halo-dev/halo/issues/2656

#### Screenshots:
![image](https://user-images.githubusercontent.com/28836989/205815182-4e599e7b-58b9-4b38-8a8f-11685c4f5f4d.png)
![image](https://user-images.githubusercontent.com/28836989/205815258-90bc111d-552c-456b-a9ce-d2a4e7a4f93d.png)

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

```release-note
Console 端为部分图标按钮添加操作提示，提升可访问性。
```
---
 src/modules/contents/attachments/AttachmentList.vue      | 4 ++++
 src/modules/contents/comments/CommentList.vue            | 1 +
 src/modules/contents/pages/SinglePageList.vue            | 5 +++--
 src/modules/contents/posts/PostList.vue                  | 5 +++--
 src/modules/system/plugins/PluginList.vue                | 1 +
 src/modules/system/users/components/UserEditingModal.vue | 4 ++--
 6 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/modules/contents/attachments/AttachmentList.vue b/src/modules/contents/attachments/AttachmentList.vue
index 126c52205..7f6d1b293 100644
--- a/src/modules/contents/attachments/AttachmentList.vue
+++ b/src/modules/contents/attachments/AttachmentList.vue
@@ -228,10 +228,12 @@ const getPolicyName = (name: string | undefined) => {
 const viewTypes = [
   {
     name: "list",
+    tooltip: "列表模式",
     icon: IconList,
   },
   {
     name: "grid",
+    tooltip: "网格模式",
     icon: IconGrid,
   },
 ];
@@ -526,6 +528,7 @@ onMounted(() => {
                       <div
                         v-for="(item, index) in viewTypes"
                         :key="index"
+                        v-tooltip="`${item.tooltip}`"
                         :class="{
                           'bg-gray-200 font-bold text-black':
                             viewType === item.name,
@@ -542,6 +545,7 @@ onMounted(() => {
                         @click="handleFetchAttachments()"
                       >
                         <IconRefreshLine
+                          v-tooltip="`刷新`"
                           :class="{ 'animate-spin text-gray-900': loading }"
                           class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
                         />
diff --git a/src/modules/contents/comments/CommentList.vue b/src/modules/contents/comments/CommentList.vue
index 42e2d9c46..f534e8775 100644
--- a/src/modules/contents/comments/CommentList.vue
+++ b/src/modules/contents/comments/CommentList.vue
@@ -457,6 +457,7 @@ function handleClearFilters() {
                     @click="handleFetchComments()"
                   >
                     <IconRefreshLine
+                      v-tooltip="`刷新`"
                       :class="{ 'animate-spin text-gray-900': loading }"
                       class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
                     />
diff --git a/src/modules/contents/pages/SinglePageList.vue b/src/modules/contents/pages/SinglePageList.vue
index 4c0cc15f9..58194dff8 100644
--- a/src/modules/contents/pages/SinglePageList.vue
+++ b/src/modules/contents/pages/SinglePageList.vue
@@ -427,10 +427,10 @@ function handleClearFilters() {
   >
     <template #actions>
       <span @click="handleSelectPrevious">
-        <IconArrowLeft />
+        <IconArrowLeft v-tooltip="`上一项`" />
       </span>
       <span @click="handleSelectNext">
-        <IconArrowRight />
+        <IconArrowRight v-tooltip="`下一项`" />
       </span>
     </template>
   </SinglePageSettingModal>
@@ -611,6 +611,7 @@ function handleClearFilters() {
                   @click="handleFetchSinglePages()"
                 >
                   <IconRefreshLine
+                    v-tooltip="`刷新`"
                     :class="{ 'animate-spin text-gray-900': loading }"
                     class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
                   />
diff --git a/src/modules/contents/posts/PostList.vue b/src/modules/contents/posts/PostList.vue
index 0498eb89f..7312166ab 100644
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@@ -455,10 +455,10 @@ const hasFilters = computed(() => {
   >
     <template #actions>
       <span @click="handleSelectPrevious">
-        <IconArrowLeft />
+        <IconArrowLeft v-tooltip="`上一项`" />
       </span>
       <span @click="handleSelectNext">
-        <IconArrowRight />
+        <IconArrowRight v-tooltip="`下一项`" />
       </span>
     </template>
   </PostSettingModal>
@@ -705,6 +705,7 @@ const hasFilters = computed(() => {
                     @click="handleFetchPosts()"
                   >
                     <IconRefreshLine
+                      v-tooltip="`刷新`"
                       :class="{ 'animate-spin text-gray-900': loading }"
                       class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
                     />
diff --git a/src/modules/system/plugins/PluginList.vue b/src/modules/system/plugins/PluginList.vue
index 26c14279c..79155f501 100644
--- a/src/modules/system/plugins/PluginList.vue
+++ b/src/modules/system/plugins/PluginList.vue
@@ -305,6 +305,7 @@ function handleClearFilters() {
                     @click="handleFetchPlugins()"
                   >
                     <IconRefreshLine
+                      v-tooltip="`刷新`"
                       :class="{ 'animate-spin text-gray-900': loading }"
                       class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
                     />
diff --git a/src/modules/system/users/components/UserEditingModal.vue b/src/modules/system/users/components/UserEditingModal.vue
index de0737b90..2710b1e22 100644
--- a/src/modules/system/users/components/UserEditingModal.vue
+++ b/src/modules/system/users/components/UserEditingModal.vue
@@ -149,8 +149,8 @@ const handleRawModeChange = () => {
   >
     <template #actions>
       <span @click="handleRawModeChange">
-        <IconCodeBoxLine v-if="!rawMode" />
-        <IconEye v-else />
+        <IconCodeBoxLine v-if="!rawMode" v-tooltip="`查看编码`" />
+        <IconEye v-else v-tooltip="`查看表单`" />
       </span>
     </template>