From a20859f6220ad1e29f71e7101cbe81ca00f85601 Mon Sep 17 00:00:00 2001
From: Shiina Kin <shiina@sakurasou.io>
Date: Sat, 7 Dec 2024 00:43:22 +0800
Subject: [PATCH] refactor: refactor user image view with custom component

---
 .../form/userField/image/ImageEditForm.vue    |  74 ++
 ui/src/locales/zh_cn.yaml                     | 156 +++-
 ui/src/views/userField/image/MyImageView.vue  | 804 +++++++++---------
 3 files changed, 584 insertions(+), 450 deletions(-)
 create mode 100644 ui/src/components/form/userField/image/ImageEditForm.vue

diff --git a/ui/src/components/form/userField/image/ImageEditForm.vue b/ui/src/components/form/userField/image/ImageEditForm.vue
new file mode 100644
index 00000000..7ea6602b
--- /dev/null
+++ b/ui/src/components/form/userField/image/ImageEditForm.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { useForm } from "vee-validate";
+import { useI18n } from "vue-i18n";
+import * as yup from "yup";
+import VeeIftaInputText from "@/components/vee-input/VeeIftaInputText.vue";
+import Button from "primevue/button";
+
+const { t } = useI18n();
+
+const imageRenameFormSchema = yup.object({
+  displayName: yup
+    .string()
+    .trim()
+    .test("at-least-one-field", t("myImageView.edit.dialog.form.verify.atLeastOneField"), function () {
+      return !!(this.parent.displayName || this.parent.description);
+    }),
+  description: yup
+    .string()
+    .trim()
+    .test("at-least-one-field", t("myImageView.edit.dialog.form.verify.atLeastOneField"), function () {
+      return !!(this.parent.displayName || this.parent.description);
+    })
+});
+
+const { handleSubmit } = useForm({
+  validationSchema: imageRenameFormSchema
+});
+
+const { imagePageVO } = defineProps(["imagePageVO"]);
+
+const emits = defineEmits(["submit", "cancel"]);
+
+const onSubmit = handleSubmit((values, ctx) => {
+  emits("submit", values, ctx);
+});
+
+const onCancel = () => {
+  emits("cancel");
+};
+</script>
+
+<template>
+  <form @submit="onSubmit" class="flex flex-col gap-4 m-4 w-96">
+    <div class="flex flex-col gap-2.5 w-full">
+      <div class="flex flex-col gap-1">
+        <VeeIftaInputText
+          id="editImageDisplayName"
+          name="displayName"
+          :placeholder="imagePageVO.displayName"
+          :label="t('myImageView.edit.dialog.form.displayName')"
+        />
+      </div>
+      <div class="flex flex-col gap-1">
+        <VeeIftaInputText
+          id="editImageDescription"
+          name="description"
+          :placeholder="imagePageVO.description"
+          :label="t('myImageView.edit.dialog.form.description')"
+        />
+      </div>
+    </div>
+    <div class="flex justify-end gap-2">
+      <Button
+        type="button"
+        :label="t('myImageView.edit.dialog.form.cancelButton')"
+        severity="secondary"
+        @click="onCancel"
+      />
+      <Button type="submit" :label="t('myImageView.edit.dialog.form.submitButton')" />
+    </div>
+  </form>
+</template>
+
+<style scoped></style>
diff --git a/ui/src/locales/zh_cn.yaml b/ui/src/locales/zh_cn.yaml
index f711d357..be781ce0 100644
--- a/ui/src/locales/zh_cn.yaml
+++ b/ui/src/locales/zh_cn.yaml
@@ -76,53 +76,115 @@ imageUploadView:
     title: "上传列表"
     uploadAllButton: "上传全部"
 myImageView:
-  myImageFilterUploadTimeASC: "上传时间升序"
-  myImageFilterUploadTimeDESC: "上传时间降序"
-  myImageFilterFileSizeASC: "文件大小升序"
-  myImageFilterFileSizeDESC: "文件大小降序"
-  myImageFilterPublicVisible: "公开"
-  myImageFilterPrivateVisible: "私密"
-  myImageFilterAllVisible: "全部"
-  myImageFilterAlbumButton: "相册"
-  myImageFilterAlbumTitle: "相册列表"
-  myImageDialogImageCopySuccessMessage: "复制成功"
-  myImageDialogImageCopyPrivateWarningMessage: "复制失败，图片为私密图片"
-  myImageDialogImageDetailTitle: "图片详情"
-  myImageDialogImageDetailImageName: "图片名称"
-  myImageDialogImageDetailImageRawName: "图片原始名称"
-  myImageDialogImageDetailImageType: "图片类型"
-  myImageDialogImageDetailImageAlbumName: "所属相册"
-  myImageDialogImageDetailImageOwnerName: "所属用户"
-  myImageDialogImageDetailImageSize: "图片尺寸"
-  myImageDialogImageDetailImageFileSize: "图片大小"
-  myImageDialogImageDetailImageUploadTime: "上传时间"
-  myImageDialogImageDetailImageIsPublic: "是否公开"
-  myImageDialogImageDetailImageDesc: "图片描述"
-  myImageDialogImageRenameCancelButton: "取消"
-  myImageDialogImageRenameSubmitButton: "保存"
-  myImageDialogImageRenameTitle: "修改图片名称"
-  myImageDialogImageRenameOldImageName: "旧图片名"
-  myImageDialogImageRenameNewImageName: "新图片名"
-  myImageDialogImageRenameSuccessMessage: "重命名成功"
-  myImageDialogImageRenameFailedTitle: "重命名失败"
-  myImageDialogImageDeleteConfirmTitle: "确认删除"
-  myImageDialogImageDeleteConfirmWarningMainContent: "你确定要删除图片吗？"
-  myImageDialogImageDeleteConfirmWarningSubContent: "真的会删除，而且无法找回"
-  myImageDialogImageDeleteConfirmCancelButton: "取消"
-  myImageDialogImageDeleteConfirmSubmitButton: "确认删除"
-  myImageDialogImageDeleteConfirmSuccessTitle: "删除成功"
-  myImageDialogImageDeleteConfirmFailedTitle: "删除失败"
-  myImageDialogImageChangeVisibleSuccessMessage: "修改访问权限成功"
-  myImageDialogImageChangeVisibleFailedTitle: "修改访问权限失败"
-  myImageDialogImageChangeAlbumTableAlbumId: "相册ID"
-  myImageDialogImageChangeAlbumTableAlbumName: "相册名"
-  myImageDialogImageChangeAlbumTableImageCount: "图片数量"
-  myImageDialogImageChangeAlbumTableIsUncategorized: "是否为未分类相册"
-  myImageDialogImageChangeAlbumCancelButton: "取消"
-  myImageDialogImageChangeAlbumSubmitButton: "移动"
-  myImageDialogImageChangeAlbumWarningMessage: "请选择相册"
-  myImageDialogImageChangeAlbumSuccessMessage: "修改相册成功"
-  myImageDialogImageChangeAlbumFailedTitle: "修改相册失败"
+  filter:
+    image:
+      uploadTimeASC: "上传时间升序"
+      uploadTimeDESC: "上传时间降序"
+      fileSizeASC: "文件大小升序"
+      fileSizeDESC: "文件大小降序"
+    visible:
+      public: "公开"
+      private: "私密"
+      all: "全部"
+    album:
+      button: "相册"
+      drawer:
+        title: "相册列表"
+  contextMenu:
+    single:
+      copyImage: "复制图片"
+      copyLink: "复制链接"
+      moveToAlbum: "移动到相册"
+      settingAsPrivate: "设为私密"
+      settingAsPublic: "设为公开"
+      detail: "详情信息"
+      edit: "修改"
+      delete: "删除"
+    multi:
+      moveToAlbum: "移动到相册"
+      settingAsPrivate: "设为私密"
+      settingAsPublic: "设为公开"
+      delete: "删除"
+  detail:
+    dialog:
+      title: "图片详情"
+      name: "图片名称"
+      rawName: "图片原始名称"
+      type: "图片类型"
+      albumName: "所属相册"
+      ownerName: "所属用户"
+      strategyName: "所属存储策略"
+      strategyType: "存储策略类型"
+      size: "图片尺寸"
+      fileSize: "图片大小"
+      fileSizeUnit: "MB"
+      uploadTime: "上传时间"
+      isPrivate:
+        title: "是否公开"
+        true: "私密"
+        false: "公开"
+      description: "图片描述"
+    toast:
+      failedTitle: "获取图片信息失败"
+  edit:
+    dialog:
+      title: "修改图片"
+      form:
+        displayName: "图片名"
+        description: "图片描述"
+        cancelButton: "取消"
+        submitButton: "保存"
+        verify:
+          atLeastOneField: "请至少修改一个字段"
+    toast:
+      successTitle: "重命名成功"
+      failedTitle: "重命名失败"
+  copyImage:
+    toast:
+      successTitle: "复制成功"
+      failedTitle: "复制失败"
+  copyLink:
+    toast:
+      successTitle: "复制成功"
+      failedTitle: "复制失败, 私密图片无法复制外链"
+  changeVisible:
+    toast:
+      successTitle: "修改访问权限成功"
+      failedTitle: "修改访问权限失败"
+  changeAlbum:
+    dialog:
+      title: "移动到相册"
+      form:
+        table:
+          albumId: "相册ID"
+          albumName: "相册名"
+          imageCount: "图片数量"
+          isUncategorized:
+            title: "是否为未分类"
+            true: "是"
+            false: "否"
+          isDefault:
+            title: "是否默认"
+            true: "是"
+            false: "否"
+        cancelButton: "取消"
+        submitButton: "移动"
+        verify:
+          album:
+            required: "请选择相册"
+    toast:
+      successTitle: "修改相册成功"
+      failedTitle: "修改相册失败"
+  delete:
+    dialog:
+      title: "确认删除"
+      mainContent: "你确定要删除图片吗？"
+      subContent: "真的会删除，而且无法找回"
+      cancelButton: "取消"
+      submitButton: "确认删除"
+    toast:
+      successTitle: "删除成功"
+      failedTitle: "删除失败"
 myAlbumView:
   toolbar:
     createButton: "创建相册"
diff --git a/ui/src/views/userField/image/MyImageView.vue b/ui/src/views/userField/image/MyImageView.vue
index 832e2684..8de00414 100644
--- a/ui/src/views/userField/image/MyImageView.vue
+++ b/ui/src/views/userField/image/MyImageView.vue
@@ -2,23 +2,27 @@
 import { computed, ref, watchEffect } from "vue";
 import { useI18n } from "vue-i18n";
 import {
+  Configuration,
+  ImageApi,
   AlbumApi,
   type AlbumApiApiAlbumPageGetRequest,
   type AlbumPageVO,
-  Configuration,
-  ImageApi,
   type ImageApiApiImagePageGetRequest,
+  type ImageApiApiImageImageIdPatchRequest,
   type ImagePageVO,
   type ImageVO
 } from "api-client";
 import { useUserFieldStore } from "@/stores/counter";
+import { useToast } from "primevue/usetoast";
 import { Icon } from "@iconify/vue";
+import { api as viewerApi } from "v-viewer";
 import ImageCard from "@/components/ImageCard.vue";
 import ContextMenu from "@/components/ContextMenu.vue";
 import BottomPaginator from "@/components/BottomPaginator.vue";
-import { api as viewerApi } from "v-viewer";
+import LoadingDialog from "@/components/LoadingDialog.vue";
+import ConfirmDialog from "@/components/ConfirmDialog.vue";
+import ImageEditForm from "@/components/form/userField/image/ImageEditForm.vue";
 import Button from "primevue/button";
-import FloatLabel from "primevue/floatlabel";
 import InputText from "primevue/inputtext";
 import InputGroup from "primevue/inputgroup";
 import InputGroupAddon from "primevue/inputgroupaddon";
@@ -29,7 +33,6 @@ import DataTable from "primevue/datatable";
 import Column from "primevue/column";
 import Paginator from "primevue/paginator";
 import Dialog from "primevue/dialog";
-import { useToast } from "primevue/usetoast";
 import type { MenuItem } from "primevue/menuitem";
 import md5 from "crypto-js/md5";
 import { debounce } from "lodash-es";
@@ -42,8 +45,6 @@ import {
 } from "@/utils/URLFormatUtils";
 import type { ImageDisplay, ImageView } from "@/types/ImageType";
 import { convertImageToBlob } from "@/utils/ImageUtils";
-import LoadingDialog from "@/components/LoadingDialog.vue";
-import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import { formatUTCStringToLocale } from "@/utils/DateTimeUtils";
 
 const userFieldStore = useUserFieldStore();
@@ -84,13 +85,13 @@ const pageRequest = computed<ImageApiApiImagePageGetRequest>(() => {
   };
 });
 
-const debouncePageUserImage = debounce((request: ImageApiApiImagePageGetRequest) => {
+const debouncePageUserAlbum = debounce((request: ImageApiApiImagePageGetRequest) => {
   pageUserImage(request);
-}, 200);
+}, 300);
 
 watchEffect(() => {
   const pageReq = pageRequest.value;
-  debouncePageUserImage(pageReq);
+  debouncePageUserAlbum(pageReq);
 });
 
 const curPage = ref(1);
@@ -147,7 +148,7 @@ const multiImageContextMenuRef = ref();
 
 const singleImageContextMenuItems = ref<MenuItem[]>([
   {
-    label: "复制图片",
+    label: t("myImageView.contextMenu.single.copyImage"),
     icon: "mdi:content-copy",
     command: () => {
       fetchImageBlob(curRightClickImageId.value)
@@ -163,19 +164,23 @@ const singleImageContextMenuItems = ref<MenuItem[]>([
         .then(() => {
           toast.add({
             severity: "success",
-            summary: "Success",
-            detail: t("myImageView.myImageDialogImageCopySuccessMessage"),
+            summary: t("myImageView.copyImage.toast.successTitle"),
             life: 3000
           });
         })
         .catch((e) => {
           console.error(e);
-          toast.add({ severity: "error", summary: "Error", detail: e.message, life: 3000 });
+          toast.add({
+            severity: "error",
+            summary: t("myImageView.copyImage.toast.failedTitle"),
+            detail: e.message,
+            life: 3000
+          });
         });
     }
   },
   {
-    label: "复制链接",
+    label: t("myImageView.contextMenu.single.copyLink"),
     icon: "mdi:link",
     items: [
       {
@@ -186,8 +191,7 @@ const singleImageContextMenuItems = ref<MenuItem[]>([
           if (image.isPrivate) {
             toast.add({
               severity: "warn",
-              summary: "Warning",
-              detail: t("myImageView.myImageDialogImageCopyPrivateWarningMessage"),
+              summary: t("myImageView.copyLink.toast.failedTitle"),
               life: 3000
             });
             return;
@@ -195,8 +199,7 @@ const singleImageContextMenuItems = ref<MenuItem[]>([
           navigator.clipboard.writeText(transToDirect(image.displayName, image.externalUrl!));
           toast.add({
             severity: "success",
-            summary: "Success",
-            detail: t("myImageView.myImageDialogImageCopySuccessMessage"),
+            summary: t("myImageView.copyLink.toast.successTitle"),
             life: 3000
           });
         }
@@ -209,8 +212,7 @@ const singleImageContextMenuItems = ref<MenuItem[]>([
           if (image.isPrivate) {
             toast.add({
               severity: "warn",
-              summary: "Warning",
-              detail: t("myImageView.myImageDialogImageCopyPrivateWarningMessage"),
+              summary: t("myImageView.copyLink.toast.failedTitle"),
               life: 3000
             });
             return;
@@ -218,8 +220,7 @@ const singleImageContextMenuItems = ref<MenuItem[]>([
           navigator.clipboard.writeText(transToMarkdown(image.displayName, image.externalUrl!));
           toast.add({
             severity: "success",
-            summary: "Success",
-            detail: t("myImageView.myImageDialogImageCopySuccessMessage"),
+            summary: t("myImageView.copyLink.toast.successTitle"),
             life: 3000
           });
         }
@@ -232,8 +233,7 @@ const singleImageContextMenuItems = ref<MenuItem[]>([
           if (image.isPrivate) {
             toast.add({
               severity: "warn",
-              summary: "Warning",
-              detail: t("myImageView.myImageDialogImageCopyPrivateWarningMessage"),
+              summary: t("myImageView.copyLink.toast.failedTitle"),
               life: 3000
             });
             return;
@@ -241,8 +241,7 @@ const singleImageContextMenuItems = ref<MenuItem[]>([
           navigator.clipboard.writeText(transToMarkdownWithLink(image.displayName, image.externalUrl!));
           toast.add({
             severity: "success",
-            summary: "Success",
-            detail: t("myImageView.myImageDialogImageCopySuccessMessage"),
+            summary: t("myImageView.copyLink.toast.successTitle"),
             life: 3000
           });
         }
@@ -255,8 +254,7 @@ const singleImageContextMenuItems = ref<MenuItem[]>([
           if (image.isPrivate) {
             toast.add({
               severity: "warn",
-              summary: "Warning",
-              detail: t("myImageView.myImageDialogImageCopyPrivateWarningMessage"),
+              summary: t("myImageView.copyLink.toast.failedTitle"),
               life: 3000
             });
             return;
@@ -264,8 +262,7 @@ const singleImageContextMenuItems = ref<MenuItem[]>([
           navigator.clipboard.writeText(transToHTML(image.displayName, image.externalUrl!));
           toast.add({
             severity: "success",
-            summary: "Success",
-            detail: t("myImageView.myImageDialogImageCopySuccessMessage"),
+            summary: t("myImageView.copyLink.toast.successTitle"),
             life: 3000
           });
         }
@@ -278,8 +275,7 @@ const singleImageContextMenuItems = ref<MenuItem[]>([
           if (image.isPrivate) {
             toast.add({
               severity: "warn",
-              summary: "Warning",
-              detail: t("myImageView.myImageDialogImageCopyPrivateWarningMessage"),
+              summary: t("myImageView.copyLink.toast.failedTitle"),
               life: 3000
             });
             return;
@@ -287,8 +283,7 @@ const singleImageContextMenuItems = ref<MenuItem[]>([
           navigator.clipboard.writeText(transToBBCode(image.displayName, image.externalUrl!));
           toast.add({
             severity: "success",
-            summary: "Success",
-            detail: t("myImageView.myImageDialogImageCopySuccessMessage"),
+            summary: t("myImageView.copyLink.toast.successTitle"),
             life: 3000
           });
         }
@@ -296,7 +291,7 @@ const singleImageContextMenuItems = ref<MenuItem[]>([
     ]
   },
   {
-    label: "移动到相册",
+    label: t("myImageView.contextMenu.single.moveToAlbum"),
     icon: "mdi:move-to-inbox",
     command: () => {
       isSingleImageChangeAlbum.value = true;
@@ -304,21 +299,21 @@ const singleImageContextMenuItems = ref<MenuItem[]>([
     }
   },
   {
-    label: "设为公开",
+    label: t("myImageView.contextMenu.single.settingAsPublic"),
     icon: "mdi:visibility-outline",
     command: () => {
       handleSingleChangeVisibility(false);
     }
   },
   {
-    label: "设为私密",
+    label: t("myImageView.contextMenu.single.settingAsPrivate"),
     icon: "mdi:visibility-off-outline",
     command: () => {
       handleSingleChangeVisibility(true);
     }
   },
   {
-    label: "详细信息",
+    label: t("myImageView.contextMenu.single.detail"),
     icon: "mdi:information-slab-box-outline",
     command: () => {
       handleImageDetail();
@@ -328,14 +323,14 @@ const singleImageContextMenuItems = ref<MenuItem[]>([
     separator: true
   },
   {
-    label: "重命名",
+    label: t("myImageView.contextMenu.single.edit"),
     icon: "mdi:rename-outline",
     command: () => {
-      showImageRenameDialog.value = true;
+      showImageEditDialog.value = true;
     }
   },
   {
-    label: "删除",
+    label: t("myImageView.contextMenu.single.delete"),
     icon: "mdi:delete-outline",
     command: () => {
       isSingleImageDelete.value = true;
@@ -345,7 +340,7 @@ const singleImageContextMenuItems = ref<MenuItem[]>([
 ]);
 const multiImageContextMenuItems = ref<MenuItem[]>([
   {
-    label: "移动到相册",
+    label: t("myImageView.contextMenu.multi.moveToAlbum"),
     icon: "mdi:move-to-inbox",
     command: () => {
       isSingleImageChangeAlbum.value = false;
@@ -353,14 +348,14 @@ const multiImageContextMenuItems = ref<MenuItem[]>([
     }
   },
   {
-    label: "设为公开",
+    label: t("myImageView.contextMenu.multi.settingAsPublic"),
     icon: "mdi:visibility-outline",
     command: () => {
       handleMultiChangeVisibility(false);
     }
   },
   {
-    label: "设为私密",
+    label: t("myImageView.contextMenu.multi.settingAsPrivate"),
     icon: "mdi:visibility-off-outline",
     command: () => {
       handleMultiChangeVisibility(true);
@@ -370,7 +365,7 @@ const multiImageContextMenuItems = ref<MenuItem[]>([
     separator: true
   },
   {
-    label: "删除",
+    label: t("myImageView.contextMenu.multi.delete"),
     icon: "mdi:delete-outline",
     command: () => {
       isSingleImageDelete.value = false;
@@ -381,11 +376,9 @@ const multiImageContextMenuItems = ref<MenuItem[]>([
 
 const showImageDetailDialog = ref(false);
 const showImageChangeAlbumDialog = ref(false);
-const showImageRenameDialog = ref(false);
+const showImageEditDialog = ref(false);
 const showImageDeleteConfirmDialog = ref(false);
 
-const newImageName = ref<string>("");
-
 const albumPage = ref(1);
 const albumPageSize = ref(10);
 const albumPageRequest = computed<AlbumApiApiAlbumPageGetRequest>(() => {
@@ -459,8 +452,7 @@ function handleSingleImageChangeAlbumDialogSubmit() {
   if (selectedAlbum.value === undefined) {
     toast.add({
       severity: "warn",
-      summary: "Warning",
-      detail: t("myImageView.myImageDialogImageChangeAlbumWarningMessage"),
+      summary: t("myImageView.changeAlbum.dialog.form.verify.album.required"),
       life: 3000
     });
     return;
@@ -476,8 +468,7 @@ function handleMultiImageChangeAlbumDialogSubmit() {
   if (selectedAlbum.value === undefined) {
     toast.add({
       severity: "warn",
-      summary: "Warning",
-      detail: t("myImageView.myImageDialogImageChangeAlbumWarningMessage"),
+      summary: t("myImageView.changeAlbum.dialog.form.verify.album.required"),
       life: 3000
     });
     return;
@@ -497,7 +488,7 @@ function handleImageDetail() {
   });
 }
 
-async function handleSingleChangeAlbum(imageId: number, albumId: number): Promise<void> {
+async function handleSingleChangeAlbum(imageId: number, albumId: number) {
   return imageApi
     .apiImageImageIdPatch({
       imageId: imageId,
@@ -510,14 +501,13 @@ async function handleSingleChangeAlbum(imageId: number, albumId: number): Promis
       if (resp.isSuccessful) {
         toast.add({
           severity: "success",
-          summary: "Success",
-          detail: t("myImageView.myImageDialogImageChangeAlbumSuccessMessage"),
+          summary: t("myImageView.changeAlbum.toast.successTitle"),
           life: 3000
         });
       } else {
         toast.add({
           severity: "warn",
-          summary: t("myImageView.myImageDialogImageChangeAlbumFailedTitle"),
+          summary: t("myImageView.changeAlbum.toast.failedTitle"),
           detail: `imageId: ${imageDisplayList.value[curRightClickImageIdx.value].id}, ${resp.message}`,
           life: 3000
         });
@@ -542,15 +532,14 @@ function handleSingleChangeVisibility(isPrivate: boolean) {
       if (resp.isSuccessful) {
         toast.add({
           severity: "success",
-          summary: "Success",
-          detail: t("myImageView.myImageDialogImageChangeVisibleSuccessMessage"),
+          summary: t("myImageView.changeVisible.toast.successTitle"),
           life: 3000
         });
         pageUserImage(pageRequest.value);
       } else {
         toast.add({
           severity: "warn",
-          summary: t("myImageView.myImageDialogImageChangeVisibleFailedTitle"),
+          summary: t("myImageView.changeVisible.toast.failedTitle"),
           detail: `imageId: ${imageDisplayList.value[curRightClickImageIdx.value].id}, ${resp.message}`,
           life: 3000
         });
@@ -577,14 +566,13 @@ function handleMultiChangeVisibility(isPrivate: boolean) {
           if (resp.isSuccessful) {
             toast.add({
               severity: "success",
-              summary: "Success",
-              detail: t("myImageView.myImageDialogImageChangeVisibleSuccessMessage"),
+              summary: t("myImageView.changeVisible.toast.successTitle"),
               life: 3000
             });
           } else {
             toast.add({
               severity: "warn",
-              summary: t("myImageView.myImageDialogImageChangeVisibleFailedTitle"),
+              summary: t("myImageView.changeVisible.toast.failedTitle"),
               detail: `imageId: ${imageDisplayList.value[curRightClickImageIdx.value].id}, ${resp.message}`,
               life: 3000
             });
@@ -603,34 +591,39 @@ function handleMultiChangeVisibility(isPrivate: boolean) {
   });
 }
 
-function handleRenameImage() {
-  imageApi
-    .apiImageImageIdPatch({
-      imageId: curRightClickImageId.value,
-      imagePatchRequest: {
-        displayName: newImageName.value
-      }
-    })
+const onEditFormSubmit = (values: any) => {
+  const patchRequest: ImageApiApiImageImageIdPatchRequest = {
+    imageId: curRightClickImageId.value,
+    imagePatchRequest: {
+      displayName: values.name,
+      description: values.description
+    }
+  };
+  handleRenameImage(patchRequest).then(() => {
+    showImageEditDialog.value = false;
+  });
+};
+
+async function handleRenameImage(patchRequest: ImageApiApiImageImageIdPatchRequest) {
+  return imageApi
+    .apiImageImageIdPatch(patchRequest)
     .then((response) => {
       const resp = response.data;
       if (resp.isSuccessful) {
         toast.add({
           severity: "success",
-          summary: "Success",
-          detail: t("myImageView.myImageDialogImageRenameSuccessMessage"),
+          summary: t("myImageView.edit.toast.successTitle"),
           life: 3000
         });
         pageUserImage(pageRequest.value);
       } else {
         toast.add({
           severity: "warn",
-          summary: t("myImageView.myImageDialogImageRenameFailedTitle"),
+          summary: t("myImageView.edit.toast.failedTitle"),
           detail: resp.message,
           life: 3000
         });
       }
-      showImageRenameDialog.value = false;
-      newImageName.value = "";
     })
     .catch((e) => {
       console.error(e);
@@ -646,15 +639,14 @@ function handleDeleteSingleImage() {
       if (resp.isSuccessful) {
         toast.add({
           severity: "success",
-          summary: "Success",
-          detail: t("myImageView.myImageDialogImageDeleteConfirmSuccessTitle"),
+          summary: t("myImageView.delete.toast.successTitle"),
           life: 3000
         });
         pageUserImage(pageRequest.value);
       } else {
         toast.add({
           severity: "warn",
-          summary: t("myImageView.myImageDialogImageDeleteConfirmFailedTitle"),
+          summary: t("myImageView.delete.toast.failedTitle"),
           detail: resp.message,
           life: 3000
         });
@@ -665,7 +657,7 @@ function handleDeleteSingleImage() {
       console.error(e);
       toast.add({
         severity: "error",
-        summary: t("myImageView.myImageDialogImageDeleteConfirmFailedTitle"),
+        summary: "Error",
         detail: e.message,
         life: 3000
       });
@@ -682,14 +674,13 @@ function handleDeleteMultiImage() {
           if (resp.isSuccessful) {
             toast.add({
               severity: "success",
-              summary: "Success",
-              detail: t("myImageView.myImageDialogImageDeleteConfirmSuccessTitle"),
+              summary: t("myImageView.delete.toast.successTitle"),
               life: 3000
             });
           } else {
             toast.add({
               severity: "warn",
-              summary: t("myImageView.myImageDialogImageDeleteConfirmFailedTitle"),
+              summary: t("myImageView.delete.toast.failedTitle"),
               detail: resp.message,
               life: 3000
             });
@@ -756,6 +747,13 @@ async function fetchImageInfo(imageId: number): Promise<void> {
       const resp = response.data!;
       if (resp.isSuccessful) {
         imageInfo.value = resp.data!;
+      } else {
+        toast.add({
+          severity: "warn",
+          summary: t("myImageView.detail.toast.failedTitle"),
+          detail: resp.message,
+          life: 3000
+        });
       }
     })
     .catch((error) => {
@@ -822,7 +820,7 @@ async function fetchThumbnails() {
       })
   );
   const results = await Promise.all(promises);
-  imageDisplayList.value = results.filter(item => item !== null);
+  imageDisplayList.value = results.filter((item) => item !== null);
 }
 </script>
 
@@ -835,7 +833,7 @@ async function fetchThumbnails() {
           @click="handleShowAlbumDrawer"
         >
           <Icon icon="mdi:image-album" />
-          {{ t("myImageView.myImageFilterAlbumButton") }}
+          {{ t("myImageView.filter.album.button") }}
         </button>
       </template>
 
@@ -881,7 +879,15 @@ async function fetchThumbnails() {
         @dblclick="showRawImage(idx)"
         @contextmenu="handleImageRightClick($event, imageDisplay.id, idx)"
       />
-      <ContextMenu ref="singleImageContextMenuRef" :menu-items="singleImageContextMenuItems" />
+      <ContextMenu
+        ref="singleImageContextMenuRef"
+        :menu-items="singleImageContextMenuItems"
+        :pt="{
+          submenu: {
+            class: 'min-w-52'
+          }
+        }"
+      />
       <ContextMenu ref="multiImageContextMenuRef" :menu-items="multiImageContextMenuItems" />
     </div>
 
@@ -892,338 +898,330 @@ async function fetchThumbnails() {
       :cur-page="curPage"
       :total-record="totalRecord"
     />
+  </div>
 
-    <!--imageFilterRef-->
-    <Popover ref="filterRef">
-      <div class="w-40 flex flex-col">
-        <button
-          class="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-300 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white rounded-md"
-          :class="activeFilter === 'createTimeASC' ? activeFilterClass : ''"
-          @click="
-            () => {
-              orderBy = 'createTime';
-              order = 'ASC';
-              activeFilter = 'createTimeASC';
-              filterRef.hide();
-            }
-          "
-        >
-          <span class="flex gap-2 justify-center items-center">
-            <Icon icon="mdi:sort-clock-ascending-outline" />
-            {{ t("myImageView.myImageFilterUploadTimeASC") }}
-          </span>
-        </button>
-        <button
-          class="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-300 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white rounded-md"
-          :class="activeFilter === 'createTimeDESC' ? activeFilterClass : ''"
-          @click="
-            () => {
-              orderBy = 'createTime';
-              order = 'DESC';
-              activeFilter = 'createTimeDESC';
-              filterRef.hide();
-            }
-          "
-        >
-          <span class="flex gap-2 justify-center items-center">
-            <Icon icon="mdi:sort-clock-descending-outline" />
-            {{ t("myImageView.myImageFilterUploadTimeDESC") }}
-          </span>
-        </button>
-        <button
-          class="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-300 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white rounded-md"
-          :class="activeFilter === 'sizeASC' ? activeFilterClass : ''"
-          @click="
-            () => {
-              orderBy = 'size';
-              order = 'ASC';
-              activeFilter = 'sizeASC';
-              filterRef.hide();
-            }
-          "
-        >
-          <span class="flex gap-2 justify-center items-center">
-            <Icon icon="mdi:sort-ascending" />
-            {{ t("myImageView.myImageFilterFileSizeASC") }}
-          </span>
-        </button>
-        <button
-          class="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-300 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white rounded-md"
-          :class="activeFilter === 'sizeDESC' ? activeFilterClass : ''"
-          @click="
-            () => {
-              orderBy = 'size';
-              order = 'DESC';
-              activeFilter = 'sizeDESC';
-              filterRef.hide();
-            }
-          "
-        >
-          <span class="flex gap-2 justify-center items-center">
-            <Icon icon="mdi:sort-descending" />
-            {{ t("myImageView.myImageFilterFileSizeDESC") }}
-          </span>
-        </button>
+  <!--image filter-->
+  <Popover ref="filterRef">
+    <div class="w-40 flex flex-col">
+      <button
+        class="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-300 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white rounded-md"
+        :class="activeFilter === 'createTimeASC' ? activeFilterClass : ''"
+        @click="
+          () => {
+            orderBy = 'createTime';
+            order = 'ASC';
+            activeFilter = 'createTimeASC';
+            filterRef.hide();
+          }
+        "
+      >
+        <span class="flex gap-2 justify-center items-center">
+          <Icon icon="mdi:sort-clock-ascending-outline" />
+          {{ t("myImageView.filter.image.uploadTimeASC") }}
+        </span>
+      </button>
+      <button
+        class="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-300 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white rounded-md"
+        :class="activeFilter === 'createTimeDESC' ? activeFilterClass : ''"
+        @click="
+          () => {
+            orderBy = 'createTime';
+            order = 'DESC';
+            activeFilter = 'createTimeDESC';
+            filterRef.hide();
+          }
+        "
+      >
+        <span class="flex gap-2 justify-center items-center">
+          <Icon icon="mdi:sort-clock-descending-outline" />
+          {{ t("myImageView.filter.image.uploadTimeDESC") }}
+        </span>
+      </button>
+      <button
+        class="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-300 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white rounded-md"
+        :class="activeFilter === 'sizeASC' ? activeFilterClass : ''"
+        @click="
+          () => {
+            orderBy = 'size';
+            order = 'ASC';
+            activeFilter = 'sizeASC';
+            filterRef.hide();
+          }
+        "
+      >
+        <span class="flex gap-2 justify-center items-center">
+          <Icon icon="mdi:sort-ascending" />
+          {{ t("myImageView.filter.image.fileSizeASC") }}
+        </span>
+      </button>
+      <button
+        class="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-300 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white rounded-md"
+        :class="activeFilter === 'sizeDESC' ? activeFilterClass : ''"
+        @click="
+          () => {
+            orderBy = 'size';
+            order = 'DESC';
+            activeFilter = 'sizeDESC';
+            filterRef.hide();
+          }
+        "
+      >
+        <span class="flex gap-2 justify-center items-center">
+          <Icon icon="mdi:sort-descending" />
+          {{ t("myImageView.filter.image.fileSizeDESC") }}
+        </span>
+      </button>
+    </div>
+  </Popover>
+  <!--visible filter-->
+  <Popover ref="visibleFilterRef">
+    <div class="w-24 flex flex-col">
+      <button
+        class="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-300 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white rounded-md"
+        :class="activeVisibleFilter === 'public' ? activeFilterClass : ''"
+        @click="
+          () => {
+            isPrivate = false;
+            activeVisibleFilter = 'public';
+            visibleFilterRef.hide();
+          }
+        "
+      >
+        <span class="flex gap-2 justify-center items-center">
+          <Icon icon="mdi:visibility-outline" />
+          {{ t("myImageView.filter.visible.public") }}
+        </span>
+      </button>
+      <button
+        class="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-300 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white rounded-md"
+        :class="activeVisibleFilter === 'private' ? activeFilterClass : ''"
+        @click="
+          () => {
+            isPrivate = true;
+            activeVisibleFilter = 'private';
+            visibleFilterRef.hide();
+          }
+        "
+      >
+        <span class="flex gap-2 justify-center items-center">
+          <Icon icon="mdi:visibility-off-outline" />
+          {{ t("myImageView.filter.visible.private") }}
+        </span>
+      </button>
+      <button
+        class="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-300 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white rounded-md"
+        :class="activeVisibleFilter === 'all' ? activeFilterClass : ''"
+        @click="
+          () => {
+            isPrivate = undefined;
+            activeVisibleFilter = 'all';
+            visibleFilterRef.hide();
+          }
+        "
+      >
+        <span class="flex gap-2 justify-center items-center">
+          <Icon icon="mdi:visibility" />
+          {{ t("myImageView.filter.visible.all") }}
+        </span>
+      </button>
+    </div>
+  </Popover>
+  <!--album drawer-->
+  <Drawer v-model:visible="showAlbumDrawer" position="right" class="bg-gray-100">
+    <template #header>
+      <div class="flex items-center gap-2 text-lg">
+        <span class="font-bold">{{ t("myImageView.filter.album.drawer.title") }}</span>
+        <Icon icon="mdi:restart" class="hover:cursor-pointer size-5" title="Reset" @click="handleAlbumFilterReset" />
       </div>
-    </Popover>
-    <!--visibleFilterRef-->
-    <Popover ref="visibleFilterRef">
-      <div class="w-24 flex flex-col">
-        <button
-          class="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-300 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white rounded-md"
-          :class="activeVisibleFilter === 'public' ? activeFilterClass : ''"
-          @click="
-            () => {
-              isPrivate = false;
-              activeVisibleFilter = 'public';
-              visibleFilterRef.hide();
-            }
+    </template>
+    <div class="h-full flex flex-col">
+      <div class="flex-grow flex flex-col gap-2 overflow-y-auto">
+        <div
+          v-for="(album, idx) in albumPageData"
+          :key="idx"
+          @click="handleAlbumFilterSelect(album.id)"
+          class="p-2 flex items-center justify-between rounded-xl"
+          :class="
+            albumId === album.id ? 'bg-sky-300 hover:cursor-default' : 'bg-white hover:bg-gray-50 hover:cursor-pointer'
           "
         >
-          <span class="flex gap-2 justify-center items-center">
-            <Icon icon="mdi:visibility-outline" />
-            {{ t("myImageView.myImageFilterPublicVisible") }}
-          </span>
-        </button>
-        <button
-          class="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-300 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white rounded-md"
-          :class="activeVisibleFilter === 'private' ? activeFilterClass : ''"
-          @click="
-            () => {
-              isPrivate = true;
-              activeVisibleFilter = 'private';
-              visibleFilterRef.hide();
-            }
-          "
+          <span>{{ album.id }}.</span>
+          <span>{{ album.name }}</span>
+          <span class="px-2 py-1 rounded-full bg-gray-100">{{ album.imageCount }}</span>
+        </div>
+      </div>
+      <Paginator
+        class="mt-auto"
+        :rows="albumPageSize"
+        :totalRecords="albumTotalRecord"
+        template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+      />
+    </div>
+  </Drawer>
+  <!--loading-->
+  <LoadingDialog v-model:visible="showRawImageLoadingDialog" />
+  <!--change album-->
+  <Dialog
+    v-model:visible="showImageChangeAlbumDialog"
+    modal
+    :header="t('myImageView.changeAlbum.dialog.title')"
+    class="min-w-96 z-99"
+  >
+    <div class="flex flex-col gap-4">
+      <div class="flex flex-col gap-2">
+        <DataTable
+          :value="albumPageData"
+          paginator
+          :rows="albumPageSize"
+          :total-records="albumTotalRecord"
+          @page="(it) => (albumPage = it.page + 1)"
+          paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+          currentPageReportTemplate="{first} to {last} of {totalRecords}"
+          scrollable
+          scrollHeight="400px"
+          selectionMode="single"
+          dataKey="id"
+          :metaKeySelection="false"
+          v-model:selection="selectedAlbum"
         >
-          <span class="flex gap-2 justify-center items-center">
-            <Icon icon="mdi:visibility-off-outline" />
-            {{ t("myImageView.myImageFilterPrivateVisible") }}
-          </span>
-        </button>
-        <button
-          class="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-300 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white rounded-md"
-          :class="activeVisibleFilter === 'all' ? activeFilterClass : ''"
+          <Column field="id" :header="t('myImageView.changeAlbum.dialog.form.table.albumId')"></Column>
+          <Column field="name" :header="t('myImageView.changeAlbum.dialog.form.table.albumName')"></Column>
+          <Column field="imageCount" :header="t('myImageView.changeAlbum.dialog.form.table.imageCount')"></Column>
+          <Column
+            field="isUncategorized"
+            :header="t('myImageView.changeAlbum.dialog.form.table.isUncategorized.title')"
+          >
+            <template #body="{ data }">
+              {{
+                data.isUncategorized
+                  ? t("myImageView.changeAlbum.dialog.form.table.isUncategorized.true")
+                  : t("myImageView.changeAlbum.dialog.form.table.isUncategorized.false")
+              }}
+            </template>
+          </Column>
+          <Column field="isDefault" :header="t('myImageView.changeAlbum.dialog.form.table.isDefault.title')">
+            <template #body="{ data }">
+              {{
+                data.isDefault
+                  ? t("myImageView.changeAlbum.dialog.form.table.isDefault.true")
+                  : t("myImageView.changeAlbum.dialog.form.table.isDefault.false")
+              }}
+            </template>
+          </Column>
+        </DataTable>
+      </div>
+      <div class="flex justify-end gap-2">
+        <Button
+          type="button"
+          :label="t('myImageView.changeAlbum.dialog.form.cancelButton')"
+          severity="secondary"
+          @click="showImageChangeAlbumDialog = false"
+        />
+        <Button
+          type="button"
+          :label="t('myImageView.changeAlbum.dialog.form.submitButton')"
           @click="
-            () => {
-              isPrivate = undefined;
-              activeVisibleFilter = 'all';
-              visibleFilterRef.hide();
-            }
+            isSingleImageChangeAlbum
+              ? handleSingleImageChangeAlbumDialogSubmit()
+              : handleMultiImageChangeAlbumDialogSubmit()
           "
-        >
-          <span class="flex gap-2 justify-center items-center">
-            <Icon icon="mdi:visibility" />
-            {{ t("myImageView.myImageFilterAllVisible") }}
-          </span>
-        </button>
+        />
       </div>
-    </Popover>
-    <!--album drawer-->
-    <Drawer v-model:visible="showAlbumDrawer" position="right" class="bg-gray-100">
-      <template #header>
-        <div class="flex items-center gap-2 text-lg">
-          <span class="font-bold">{{ t("myImageView.myImageFilterAlbumTitle") }}</span>
-          <Icon icon="mdi:restart" class="hover:cursor-pointer size-5" title="Reset" @click="handleAlbumFilterReset" />
+    </div>
+  </Dialog>
+  <!--image detail-->
+  <Dialog v-model:visible="showImageDetailDialog" modal :header="t('myImageView.detail.dialog.title')" class="min-w-96">
+    <div class="flow-root">
+      <dl class="-my-3 divide-y divide-gray-100 text-sm">
+        <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
+          <dt class="font-medium text-gray-900">{{ t("myImageView.detail.dialog.name") }}</dt>
+          <dd class="text-gray-700 sm:col-span-2">{{ imageInfo?.displayName }}</dd>
         </div>
-      </template>
-      <div class="h-full flex flex-col">
-        <div class="flex-grow flex flex-col gap-2 overflow-y-auto">
-          <div
-            v-for="(album, idx) in albumPageData"
-            :key="idx"
-            @click="handleAlbumFilterSelect(album.id)"
-            class="p-2 flex items-center justify-between rounded-xl"
-            :class="
-              albumId === album.id
-                ? 'bg-sky-300 hover:cursor-default'
-                : 'bg-white hover:bg-gray-50 hover:cursor-pointer'
-            "
-          >
-            <span>{{ album.id }}.</span>
-            <span>{{ album.name }}</span>
-            <span class="px-2 py-1 rounded-full bg-gray-100">{{ album.imageCount }}</span>
-          </div>
+
+        <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
+          <dt class="font-medium text-gray-900">{{ t("myImageView.detail.dialog.rawName") }}</dt>
+          <dd class="text-gray-700 sm:col-span-2">{{ imageInfo?.originName }}</dd>
         </div>
-        <Paginator
-          class="mt-auto"
-          :rows="albumPageSize"
-          :totalRecords="albumTotalRecord"
-          template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
-        />
-      </div>
-    </Drawer>
-    <!--loading-->
-    <LoadingDialog v-model:visible="showRawImageLoadingDialog" />
-    <!--change album-->
-    <Dialog
-      v-model:visible="showImageChangeAlbumDialog"
-      modal
-      :header="t('myImageView.myImageDialogImageRenameTitle')"
-      class="min-w-96 z-99"
-    >
-      <div class="flex flex-col gap-4">
-        <div class="flex flex-col gap-2">
-          <DataTable
-            :value="albumPageData"
-            paginator
-            :rows="albumPageSize"
-            :total-records="albumTotalRecord"
-            @page="(it) => (albumPage = it.page + 1)"
-            paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
-            currentPageReportTemplate="{first} to {last} of {totalRecords}"
-            scrollable
-            scrollHeight="400px"
-            selectionMode="single"
-            dataKey="id"
-            :metaKeySelection="false"
-            v-model:selection="selectedAlbum"
-            tableStyle="min-width: 50rem"
-          >
-            <Column field="id" :header="t('myImageView.myImageDialogImageChangeAlbumTableAlbumId')"></Column>
-            <Column field="name" :header="t('myImageView.myImageDialogImageChangeAlbumTableAlbumName')"></Column>
-            <Column field="imageCount" :header="t('myImageView.myImageDialogImageChangeAlbumTableImageCount')"></Column>
-            <Column
-              field="isUncategorized"
-              :header="t('myImageView.myImageDialogImageChangeAlbumTableIsUncategorized')"
-            ></Column>
-          </DataTable>
+
+        <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
+          <dt class="font-medium text-gray-900">{{ t("myImageView.detail.dialog.type") }}</dt>
+          <dd class="text-gray-700 sm:col-span-2">{{ imageInfo?.mimeType }}</dd>
         </div>
-        <div class="flex justify-end gap-2">
-          <Button
-            type="button"
-            :label="t('myImageView.myImageDialogImageChangeAlbumCancelButton')"
-            severity="secondary"
-            @click="showImageChangeAlbumDialog = false"
-          />
-          <Button
-            type="button"
-            :label="t('myImageView.myImageDialogImageChangeAlbumSubmitButton')"
-            @click="
-              isSingleImageChangeAlbum
-                ? handleSingleImageChangeAlbumDialogSubmit()
-                : handleMultiImageChangeAlbumDialogSubmit()
-            "
-          />
+
+        <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
+          <dt class="font-medium text-gray-900">{{ t("myImageView.detail.dialog.albumName") }}</dt>
+          <dd class="text-gray-700 sm:col-span-2">{{ imageInfo?.albumName }}</dd>
         </div>
-      </div>
-    </Dialog>
-    <!--image detail-->
-    <Dialog
-      v-model:visible="showImageDetailDialog"
-      modal
-      :header="t('myImageView.myImageDialogImageDetailTitle')"
-      class="min-w-96"
-    >
-      <div class="flow-root">
-        <dl class="-my-3 divide-y divide-gray-100 text-sm">
-          <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
-            <dt class="font-medium text-gray-900">{{ t("myImageView.myImageDialogImageDetailImageName") }}</dt>
-            <dd class="text-gray-700 sm:col-span-2">{{ imageInfo?.displayName }}</dd>
-          </div>
-
-          <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
-            <dt class="font-medium text-gray-900">{{ t("myImageView.myImageDialogImageDetailImageRawName") }}</dt>
-            <dd class="text-gray-700 sm:col-span-2">{{ imageInfo?.originName }}</dd>
-          </div>
-
-          <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
-            <dt class="font-medium text-gray-900">{{ t("myImageView.myImageDialogImageDetailImageType") }}</dt>
-            <dd class="text-gray-700 sm:col-span-2">{{ imageInfo?.mimeType }}</dd>
-          </div>
-
-          <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
-            <dt class="font-medium text-gray-900">{{ t("myImageView.myImageDialogImageDetailImageAlbumName") }}</dt>
-            <dd class="text-gray-700 sm:col-span-2">{{ imageInfo?.albumName }}</dd>
-          </div>
-
-          <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
-            <dt class="font-medium text-gray-900">{{ t("myImageView.myImageDialogImageDetailImageOwnerName") }}</dt>
-            <dd class="text-gray-700 sm:col-span-2">{{ imageInfo?.ownerName }}</dd>
-          </div>
-
-          <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
-            <dt class="font-medium text-gray-900">{{ t("myImageView.myImageDialogImageDetailImageSize") }}</dt>
-            <dd class="text-gray-700 sm:col-span-2">{{ imageInfo?.width }} * {{ imageInfo?.height }}</dd>
-          </div>
-
-          <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
-            <dt class="font-medium text-gray-900">{{ t("myImageView.myImageDialogImageDetailImageFileSize") }}</dt>
-            <dd class="text-gray-700 sm:col-span-2">{{ imageInfo?.size }}</dd>
-          </div>
-
-          <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
-            <dt class="font-medium text-gray-900">{{ t("myImageView.myImageDialogImageDetailImageUploadTime") }}</dt>
-            <dd class="text-gray-700 sm:col-span-2">
-              {{ formatUTCStringToLocale(imageInfo?.createTime) }}
-            </dd>
-          </div>
-
-          <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
-            <dt class="font-medium text-gray-900">{{ t("myImageView.myImageDialogImageDetailImageIsPublic") }}</dt>
-            <dd class="text-gray-700 sm:col-span-2">{{ imageInfo?.isPrivate }}</dd>
-          </div>
-
-          <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
-            <dt class="font-medium text-gray-900">{{ t("myImageView.myImageDialogImageDetailImageDesc") }}</dt>
-            <dd class="text-gray-700 sm:col-span-2">{{ imageInfo?.description }}</dd>
-          </div>
-
-          <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
-            <dt class="font-medium text-gray-900">MD5</dt>
-            <dd class="text-gray-700 sm:col-span-2">{{ imageInfo?.md5 }}</dd>
-          </div>
-
-          <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
-            <dt class="font-medium text-gray-900">SHA256</dt>
-            <dd class="text-gray-700 sm:col-span-2">{{ imageInfo?.sha256 }}</dd>
-          </div>
-        </dl>
-      </div>
-    </Dialog>
-    <!--image rename-->
-    <Dialog
-      v-model:visible="showImageRenameDialog"
-      modal
-      :header="t('myImageView.myImageDialogImageRenameTitle')"
-      class="min-w-96"
-    >
-      <div class="flex flex-col gap-4">
-        <div class="flex flex-col gap-2">
-          <label for="oldImageName">{{ t("myImageView.myImageDialogImageRenameOldImageName") }}</label>
-          <InputText id="oldImageName" :placeholder="imageList[curRightClickImageIdx].displayName" disabled />
+
+        <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
+          <dt class="font-medium text-gray-900">{{ t("myImageView.detail.dialog.ownerName") }}</dt>
+          <dd class="text-gray-700 sm:col-span-2">{{ imageInfo?.ownerName }}</dd>
         </div>
-        <FloatLabel variant="on">
-          <InputText id="newImageName" v-model="newImageName" class="w-full" />
-          <label for="newImageName">{{ t("myImageView.myImageDialogImageRenameNewImageName") }}</label>
-        </FloatLabel>
-        <div class="flex justify-end gap-2">
-          <Button
-            type="button"
-            :label="t('myImageView.myImageDialogImageRenameCancelButton')"
-            severity="secondary"
-            @click="showImageRenameDialog = false"
-          />
-          <Button
-            type="button"
-            :label="t('myImageView.myImageDialogImageRenameSubmitButton')"
-            @click="handleRenameImage"
-          />
+
+        <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
+          <dt class="font-medium text-gray-900">{{ t("myImageView.detail.dialog.size") }}</dt>
+          <dd class="text-gray-700 sm:col-span-2">{{ imageInfo?.width }} * {{ imageInfo?.height }}</dd>
         </div>
-      </div>
-    </Dialog>
-    <!--image delete confirm-->
-    <ConfirmDialog
-      v-model:visible="showImageDeleteConfirmDialog"
-      :header="t('myImageView.myImageDialogImageDeleteConfirmTitle')"
-      :main-content="t('myImageView.myImageDialogImageDeleteConfirmWarningMainContent')"
-      :sub-content="t('myImageView.myImageDialogImageDeleteConfirmWarningSubContent')"
-      :cancel-btn-msg="t('myImageView.myImageDialogImageDeleteConfirmCancelButton')"
-      :submit-btn-msg="t('myImageView.myImageDialogImageDeleteConfirmSubmitButton')"
-      @cancel="showImageDeleteConfirmDialog = false"
-      @confirm="isSingleImageDelete ? handleDeleteSingleImage() : handleDeleteMultiImage()"
+
+        <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
+          <dt class="font-medium text-gray-900">{{ t("myImageView.detail.dialog.fileSize") }}</dt>
+          <dd class="text-gray-700 sm:col-span-2">{{ imageInfo?.size }}</dd>
+        </div>
+
+        <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
+          <dt class="font-medium text-gray-900">{{ t("myImageView.detail.dialog.uploadTime") }}</dt>
+          <dd class="text-gray-700 sm:col-span-2">
+            {{ formatUTCStringToLocale(imageInfo?.createTime) }}
+          </dd>
+        </div>
+
+        <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
+          <dt class="font-medium text-gray-900">{{ t("myImageView.detail.dialog.isPrivate.title") }}</dt>
+          <dd class="text-gray-700 sm:col-span-2">
+            {{
+              imageInfo?.isPrivate
+                ? t("myImageView.detail.dialog.isPrivate.true")
+                : t("myImageView.detail.dialog.isPrivate.false")
+            }}
+          </dd>
+        </div>
+
+        <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
+          <dt class="font-medium text-gray-900">{{ t("myImageView.detail.dialog.description") }}</dt>
+          <dd class="text-gray-700 sm:col-span-2">{{ imageInfo?.description }}</dd>
+        </div>
+
+        <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
+          <dt class="font-medium text-gray-900">MD5</dt>
+          <dd class="text-gray-700 sm:col-span-2">{{ imageInfo?.md5 }}</dd>
+        </div>
+
+        <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
+          <dt class="font-medium text-gray-900">SHA256</dt>
+          <dd class="text-gray-700 sm:col-span-2">{{ imageInfo?.sha256 }}</dd>
+        </div>
+      </dl>
+    </div>
+  </Dialog>
+  <!--image edit-->
+  <Dialog v-model:visible="showImageEditDialog" modal :header="t('myImageView.edit.dialog.title')" class="min-w-96">
+    <ImageEditForm
+      :imagePageVO="imageList[curRightClickImageIdx]"
+      @cancel="showImageEditDialog = false"
+      @submit="onEditFormSubmit"
     />
-  </div>
+  </Dialog>
+  <!--image delete confirm-->
+  <ConfirmDialog
+    v-model:visible="showImageDeleteConfirmDialog"
+    :header="t('myImageView.delete.dialog.title')"
+    :main-content="t('myImageView.delete.dialog.mainContent')"
+    :sub-content="t('myImageView.delete.dialog.subContent')"
+    :cancel-btn-msg="t('myImageView.delete.dialog.cancelButton')"
+    :submit-btn-msg="t('myImageView.delete.dialog.submitButton')"
+    @cancel="showImageDeleteConfirmDialog = false"
+    @confirm="isSingleImageDelete ? handleDeleteSingleImage() : handleDeleteMultiImage()"
+  />
 </template>
 
 <style scoped></style>