mirror of https://github.com/halo-dev/halo-admin
perf: add tooltip for some icon buttons (#745)
#### 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:   #### Does this PR introduce a user-facing change? ```release-note Console 端为部分图标按钮添加操作提示,提升可访问性。 ```pull/762/head^2
parent
8119e5a484
commit
faba6f40ea
|
@ -228,10 +228,12 @@ const getPolicyName = (name: string | undefined) => {
|
||||||
const viewTypes = [
|
const viewTypes = [
|
||||||
{
|
{
|
||||||
name: "list",
|
name: "list",
|
||||||
|
tooltip: "列表模式",
|
||||||
icon: IconList,
|
icon: IconList,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "grid",
|
name: "grid",
|
||||||
|
tooltip: "网格模式",
|
||||||
icon: IconGrid,
|
icon: IconGrid,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
@ -526,6 +528,7 @@ onMounted(() => {
|
||||||
<div
|
<div
|
||||||
v-for="(item, index) in viewTypes"
|
v-for="(item, index) in viewTypes"
|
||||||
:key="index"
|
:key="index"
|
||||||
|
v-tooltip="`${item.tooltip}`"
|
||||||
:class="{
|
:class="{
|
||||||
'bg-gray-200 font-bold text-black':
|
'bg-gray-200 font-bold text-black':
|
||||||
viewType === item.name,
|
viewType === item.name,
|
||||||
|
@ -542,6 +545,7 @@ onMounted(() => {
|
||||||
@click="handleFetchAttachments()"
|
@click="handleFetchAttachments()"
|
||||||
>
|
>
|
||||||
<IconRefreshLine
|
<IconRefreshLine
|
||||||
|
v-tooltip="`刷新`"
|
||||||
:class="{ 'animate-spin text-gray-900': loading }"
|
:class="{ 'animate-spin text-gray-900': loading }"
|
||||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -457,6 +457,7 @@ function handleClearFilters() {
|
||||||
@click="handleFetchComments()"
|
@click="handleFetchComments()"
|
||||||
>
|
>
|
||||||
<IconRefreshLine
|
<IconRefreshLine
|
||||||
|
v-tooltip="`刷新`"
|
||||||
:class="{ 'animate-spin text-gray-900': loading }"
|
:class="{ 'animate-spin text-gray-900': loading }"
|
||||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -427,10 +427,10 @@ function handleClearFilters() {
|
||||||
>
|
>
|
||||||
<template #actions>
|
<template #actions>
|
||||||
<span @click="handleSelectPrevious">
|
<span @click="handleSelectPrevious">
|
||||||
<IconArrowLeft />
|
<IconArrowLeft v-tooltip="`上一项`" />
|
||||||
</span>
|
</span>
|
||||||
<span @click="handleSelectNext">
|
<span @click="handleSelectNext">
|
||||||
<IconArrowRight />
|
<IconArrowRight v-tooltip="`下一项`" />
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</SinglePageSettingModal>
|
</SinglePageSettingModal>
|
||||||
|
@ -611,6 +611,7 @@ function handleClearFilters() {
|
||||||
@click="handleFetchSinglePages()"
|
@click="handleFetchSinglePages()"
|
||||||
>
|
>
|
||||||
<IconRefreshLine
|
<IconRefreshLine
|
||||||
|
v-tooltip="`刷新`"
|
||||||
:class="{ 'animate-spin text-gray-900': loading }"
|
:class="{ 'animate-spin text-gray-900': loading }"
|
||||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -455,10 +455,10 @@ const hasFilters = computed(() => {
|
||||||
>
|
>
|
||||||
<template #actions>
|
<template #actions>
|
||||||
<span @click="handleSelectPrevious">
|
<span @click="handleSelectPrevious">
|
||||||
<IconArrowLeft />
|
<IconArrowLeft v-tooltip="`上一项`" />
|
||||||
</span>
|
</span>
|
||||||
<span @click="handleSelectNext">
|
<span @click="handleSelectNext">
|
||||||
<IconArrowRight />
|
<IconArrowRight v-tooltip="`下一项`" />
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</PostSettingModal>
|
</PostSettingModal>
|
||||||
|
@ -705,6 +705,7 @@ const hasFilters = computed(() => {
|
||||||
@click="handleFetchPosts()"
|
@click="handleFetchPosts()"
|
||||||
>
|
>
|
||||||
<IconRefreshLine
|
<IconRefreshLine
|
||||||
|
v-tooltip="`刷新`"
|
||||||
:class="{ 'animate-spin text-gray-900': loading }"
|
:class="{ 'animate-spin text-gray-900': loading }"
|
||||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -305,6 +305,7 @@ function handleClearFilters() {
|
||||||
@click="handleFetchPlugins()"
|
@click="handleFetchPlugins()"
|
||||||
>
|
>
|
||||||
<IconRefreshLine
|
<IconRefreshLine
|
||||||
|
v-tooltip="`刷新`"
|
||||||
:class="{ 'animate-spin text-gray-900': loading }"
|
:class="{ 'animate-spin text-gray-900': loading }"
|
||||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -149,8 +149,8 @@ const handleRawModeChange = () => {
|
||||||
>
|
>
|
||||||
<template #actions>
|
<template #actions>
|
||||||
<span @click="handleRawModeChange">
|
<span @click="handleRawModeChange">
|
||||||
<IconCodeBoxLine v-if="!rawMode" />
|
<IconCodeBoxLine v-if="!rawMode" v-tooltip="`查看编码`" />
|
||||||
<IconEye v-else />
|
<IconEye v-else v-tooltip="`查看表单`" />
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue