pref: internationalize the avatar processing toolbar (#4313)

#### What type of PR is this?

/kind improvement

#### What this PR does / why we need it:

对头像处理组件的 toolbar 进行国际化处理。

#### Which issue(s) this PR fixes:

Fixes #4296 

#### Special notes for your reviewer:

#### Does this PR introduce a user-facing change?
```release-note
None
```

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:

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:

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:

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<HTMLElement>();
@@ -210,7 +220,7 @@ defineExpose({
           <li
             v-for="toolbar in toolbarItems"
             :key="toolbar.name"
-            :title="toolbar.name"
+            :title="toolbar.title"
           >
             <button
               type="button"