feat: add image editor feature for attachment upload component

ui/console-src/modules/contents/attachments/components/AttachmentUploadModal.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import {
- VModal,
  IconAddCircle,
  VAlert,
  VDropdown,
  VDropdownItem,
+ VModal,
 } from "@halo-dev/components";
 import { ref, watch } from "vue";
 import type { Policy, PolicyTemplate } from "@halo-dev/api-client";
@@ -119,6 +119,7 @@ watch(
  :body-class="['!p-0']"
  :visible="visible"
  :width="650"
+ :centered="false"
  :title="$t('core.attachment.upload_modal.title')"
  @update:visible="onVisibleChange"
  >

ui/package.json

@@ -64,6 +64,7 @@
  "@uppy/dashboard": "^3.7.1",
  "@uppy/drag-drop": "^3.0.3",
  "@uppy/file-input": "^3.0.4",
+ "@uppy/image-editor": "^2.4.4",
  "@uppy/locales": "^3.5.0",
  "@uppy/progress-bar": "^3.0.4",
  "@uppy/status-bar": "^3.2.5",

ui/src/components/upload/UppyUpload.vue

@@ -2,9 +2,11 @@
 import { Dashboard } from "@uppy/vue";
 import "@uppy/core/dist/style.css";
 import "@uppy/dashboard/dist/style.css";
-import Uppy, { type SuccessResponse } from "@uppy/core";
 import type { Restrictions } from "@uppy/core";
+import Uppy, { type SuccessResponse } from "@uppy/core";
 import XHRUpload from "@uppy/xhr-upload";
+import ImageEditor from "@uppy/image-editor";
+import "@uppy/image-editor/dist/style.min.css";
 import zh_CN from "@uppy/locales/lib/zh_CN";
 import zh_TW from "@uppy/locales/lib/zh_TW";
 import en_US from "@uppy/locales/lib/en_US";
@@ -62,38 +64,61 @@ const uppy = computed(() => {
  meta: props.meta,
  restrictions: props.restrictions,
  autoProceed: props.autoProceed,
- }).use(XHRUpload, {
- endpoint: `${import.meta.env.VITE_API_URL}${props.endpoint}`,
- allowedMetaFields: props.allowedMetaFields,
- withCredentials: true,
- formData: true,
- fieldName: props.name,
- method: props.method,
- limit: 5,
- timeout: 0,
- getResponseError: (responseText: string, response: unknown) => {
- try {
- const response = JSON.parse(responseText);
- if (typeof response === "object" && response && response) {
- const { title, detail } = (response || {}) as ProblemDetail;
- const message = [title, detail].filter(Boolean).join(": ");
+ })
+ .use(XHRUpload, {
+ endpoint: `${import.meta.env.VITE_API_URL}${props.endpoint}`,
+ allowedMetaFields: props.allowedMetaFields,
+ withCredentials: true,
+ formData: true,
+ fieldName: props.name,
+ method: props.method,
+ limit: 5,
+ timeout: 0,
+ getResponseError: (responseText: string, response: unknown) => {
+ try {
+ const response = JSON.parse(responseText);
+ if (typeof response === "object" && response && response) {
+ const { title, detail } = (response || {}) as ProblemDetail;
+ const message = [title, detail].filter(Boolean).join(": ");
 
- if (message) {
- Toast.error(message, { duration: 5000 });
+  if (message) {
+  Toast.error(message, { duration: 5000 });
 
- return new Error(message);
+ return new Error(message);
+ }
  }
+ } catch (e) {
+ const responseBody = response as XMLHttpRequest;
+ const { status, statusText } = responseBody;
+ const defaultMessage = [status, statusText].join(": ");
+ Toast.error(defaultMessage, { duration: 5000 });
+ return new Error(defaultMessage);
  }
- } catch (e) {
- const responseBody = response as XMLHttpRequest;
- const { status, statusText } = responseBody;
- const defaultMessage = [status, statusText].join(": ");
- Toast.error(defaultMessage, { duration: 5000 });
- return new Error(defaultMessage);
- }
- return new Error("Internal Server Error");
- },
- });
+ return new Error("Internal Server Error");
+ },
+ })
+ .use(ImageEditor, {
+ locale: {
+ strings: {
+ revert: i18n.global.t("core.components.uppy.image_editor.revert"),
+ rotate: i18n.global.t("core.components.uppy.image_editor.rotate"),
+ zoomIn: i18n.global.t("core.components.uppy.image_editor.zoom_in"),
+ zoomOut: i18n.global.t("core.components.uppy.image_editor.zoom_out"),
+ flipHorizontal: i18n.global.t(
+ "core.components.uppy.image_editor.flip_horizontal"
+ ),
+ aspectRatioSquare: i18n.global.t(
+ "core.components.uppy.image_editor.aspect_ratio_square"
+ ),
+ aspectRatioLandscape: i18n.global.t(
+ "core.components.uppy.image_editor.aspect_ratio_landscape"
+ ),
+ aspectRatioPortrait: i18n.global.t(
+ "core.components.uppy.image_editor.aspect_ratio_portrait"
+ ),
+ },
+ },
+ });
 });
 
 uppy.value.on("upload-success", (_, response: SuccessResponse) => {

ui/src/locales/en.yaml

@@ -1462,6 +1462,16 @@ core:
  editor_provider_selector:
  tooltips:
  disallow: The content format is different and cannot be switched
+ uppy:
+ image_editor:
+ revert: "Revert"
+ rotate: "Rotate"
+ zoom_in: "Zoom in"
+ zoom_out: "Zoom out"
+ flip_horizontal: "Flip horizontal"
+ aspect_ratio_square: "Crop square"
+ aspect_ratio_landscape: "Crop landscape (16:9)"
+ aspect_ratio_portrait: "Crop portrait (9:16)"
  composables:
  content_cache:
  toast_recovered: Recovered unsaved content from cache

ui/src/locales/zh-CN.yaml

@@ -1408,6 +1408,16 @@ core:
  editor_provider_selector:
  tooltips:
  disallow: 内容格式不同，无法切换
+ uppy:
+ image_editor:
+ revert: "恢复"
+ rotate: "旋转"
+ zoom_in: "放大"
+ zoom_out: "缩小"
+ flip_horizontal: "水平翻转"
+ aspect_ratio_square: "裁剪为正方形"
+ aspect_ratio_landscape: "裁剪为横向 (16:9)"
+ aspect_ratio_portrait: "裁剪为纵向 (9:16)"
  composables:
  content_cache:
  toast_recovered: 已从缓存中恢复未保存的内容

ui/src/locales/zh-TW.yaml

@@ -1374,6 +1374,16 @@ core:
  editor_provider_selector:
  tooltips:
  disallow: 內容格式不同，無法切換
+ uppy:
+ image_editor:
+ revert: "還原"
+ rotate: "旋轉"
+ zoom_in: "放大"
+ zoom_out: "縮小"
+ flip_horizontal: "水平翻轉"
+ aspect_ratio_square: "裁剪為正方形"
+ aspect_ratio_landscape: "裁剪為橫向 (16:9)"
+ aspect_ratio_portrait: "裁剪為縱向 (9:16)"
  composables:
  content_cache:
  toast_recovered: 已從緩存中恢復未保存的內容