diff --git a/console/src/locales/en.yaml b/console/src/locales/en.yaml index a09e0320a..696741a47 100644 --- a/console/src/locales/en.yaml +++ b/console/src/locales/en.yaml @@ -883,6 +883,13 @@ core: title: Crop Avatar remove: title: Are you sure you want to delete the avatar? + tooltips: + upload: Upload + zoom_in: Zoom In + zoom_out: Zoom Out + flip_horizontal: Flip Horizontal + flip_vertical: Flip Vertical + reset: Reset role: title: Roles common: diff --git a/console/src/locales/zh-CN.yaml b/console/src/locales/zh-CN.yaml index 88cbfcf9b..f5daa99d8 100644 --- a/console/src/locales/zh-CN.yaml +++ b/console/src/locales/zh-CN.yaml @@ -883,6 +883,13 @@ core: title: 裁剪头像 remove: title: 确定要删除头像吗? + tooltips: + upload: 上传 + zoom_in: 放大 + zoom_out: 缩小 + flip_horizontal: 水平翻转 + flip_vertical: 垂直翻转 + reset: 重置 role: title: 角色 common: diff --git a/console/src/locales/zh-TW.yaml b/console/src/locales/zh-TW.yaml index 0c4413676..195ac5cb9 100644 --- a/console/src/locales/zh-TW.yaml +++ b/console/src/locales/zh-TW.yaml @@ -883,6 +883,13 @@ core: title: 裁剪頭像 remove: title: 確定要刪除頭像嗎? + tooltips: + upload: 上傳 + zoom_in: 放大 + zoom_out: 縮小 + flip_horizontal: 水平翻轉 + flip_vertical: 垂直翻轉 + reset: 重置 role: title: 角色 common: diff --git a/console/src/modules/system/users/components/UserAvatarCropper.vue b/console/src/modules/system/users/components/UserAvatarCropper.vue index 3d473a8d6..75f7b938a 100644 --- a/console/src/modules/system/users/components/UserAvatarCropper.vue +++ b/console/src/modules/system/users/components/UserAvatarCropper.vue @@ -15,6 +15,9 @@ import { onMounted } from "vue"; import { computed } from "vue"; import type { Component } from "vue"; import { markRaw } from "vue"; +import { useI18n } from "vue-i18n"; + +const { t } = useI18n(); export type ToolbarName = | "upload" @@ -26,6 +29,7 @@ export type ToolbarName = export interface ToolbarItem { name: ToolbarName; + title?: string; icon: Component; onClick: () => void; } @@ -60,6 +64,7 @@ const defaultToolbars: ToolbarItem[] = [ onClick: () => { emit("changeFile"); }, + title: t("core.user.detail.avatar.tooltips.upload"), }, { name: "zoomIn", @@ -67,6 +72,7 @@ const defaultToolbars: ToolbarItem[] = [ onClick: () => { cropper.value?.zoom(0.1); }, + title: t("core.user.detail.avatar.tooltips.zoom_in"), }, { name: "zoomOut", @@ -74,6 +80,7 @@ const defaultToolbars: ToolbarItem[] = [ onClick: () => { cropper.value?.zoom(-0.1); }, + title: t("core.user.detail.avatar.tooltips.zoom_out"), }, { name: "flipHorizontal", @@ -81,6 +88,7 @@ const defaultToolbars: ToolbarItem[] = [ onClick: () => { cropper.value?.scaleX(-cropper.value?.getData().scaleX || -1); }, + title: t("core.user.detail.avatar.tooltips.flip_horizontal"), }, { name: "flipVertical", @@ -88,6 +96,7 @@ const defaultToolbars: ToolbarItem[] = [ onClick: () => { cropper.value?.scaleY(-cropper.value?.getData().scaleY || -1); }, + title: t("core.user.detail.avatar.tooltips.flip_vertical"), }, { name: "reset", @@ -95,6 +104,7 @@ const defaultToolbars: ToolbarItem[] = [ onClick: () => { cropper.value?.reset(); }, + title: t("core.user.detail.avatar.tooltips.reset"), }, ]; const previewElement = ref(); @@ -210,7 +220,7 @@ defineExpose({