From 89f8d4c2d593cd91c96bbfe1ac058200ee1597a4 Mon Sep 17 00:00:00 2001 From: Kuingsmile Date: Wed, 9 Apr 2025 11:49:18 +0800 Subject: [PATCH] :sparkles: Feature(custom): enhance upload page UI and functionality --- public/i18n/en.yml | 1 + public/i18n/zh-CN.yml | 3 +- public/i18n/zh-TW.yml | 3 +- .../components/ImageProcessSetting.vue | 607 ++++++++++++---- src/renderer/pages/Upload.vue | 663 +++++++++++++----- src/universal/types/i18n.d.ts | 1 + 6 files changed, 975 insertions(+), 303 deletions(-) diff --git a/public/i18n/en.yml b/public/i18n/en.yml index c8fe6a00..286e0d08 100644 --- a/public/i18n/en.yml +++ b/public/i18n/en.yml @@ -125,6 +125,7 @@ UPLOAD_PAGE_IMAGE_PROCESS_QUALITY: Compression Quality(1-100) UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT: Convert Format UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT: Destination Format UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC: 'Specific Format, Please enter in json format, e.g. {"png": "jpg"}' +UPLOAD_PAGE_IMAGE_PROCESS_TRANSFORMATION: Image Rotate Setting UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP: Whether to flip vertically UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP: Whether to flip horizontally UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE: Resize to fixed size diff --git a/public/i18n/zh-CN.yml b/public/i18n/zh-CN.yml index 912a8987..c9d850ba 100644 --- a/public/i18n/zh-CN.yml +++ b/public/i18n/zh-CN.yml @@ -125,6 +125,7 @@ UPLOAD_PAGE_IMAGE_PROCESS_QUALITY: 压缩质量(1-100) UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT: 是否转换格式 UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT: 转换目的格式 UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC: '精细化转换格式, 请输入JSON格式，如: {"png": "jpg"}' +UPLOAD_PAGE_IMAGE_PROCESS_TRANSFORMATION: 图片旋转设置 UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP: 是否进行垂直翻转 UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP: 是否进行水平翻转 UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE: 是否按固定尺寸调整图片 @@ -350,7 +351,7 @@ DRAG_FILE_TO_HERE: 将文件拖拽到此处，或 CLICK_TO_UPLOAD: 点击上传 LINK_FORMAT: 链接格式 CUSTOM: 自定义 -CLIPBOARD_PICTURE: 剪贴板图片 +CLIPBOARD_PICTURE: 剪贴板 TIPS_DRAG_VALID_PICTURE_OR_URL: 请拖入合法的图片文件或者图片URL地址 TIPS_INPUT_URL: 请输入URL TIPS_HTTP_PREFIX: http://或者https://开头 diff --git a/public/i18n/zh-TW.yml b/public/i18n/zh-TW.yml index c22910b9..dc04c653 100644 --- a/public/i18n/zh-TW.yml +++ b/public/i18n/zh-TW.yml @@ -125,6 +125,7 @@ UPLOAD_PAGE_IMAGE_PROCESS_QUALITY: 壓縮質量(1-100) UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT: 是否轉換格式 UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT: 轉換目的格式 UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC: '指定格式, 请输入JSON格式配置，如{"jpg":"png"}' +UPLOAD_PAGE_IMAGE_PROCESS_TRANSFORMATION: 圖片翻轉设置 UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP: 是否進行垂直翻轉 UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP: 是否進行水平翻轉 UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE: 是否按固定尺寸調整圖片 @@ -348,7 +349,7 @@ DRAG_FILE_TO_HERE: 將檔案拖曳到此處，或 CLICK_TO_UPLOAD: 點擊上傳 LINK_FORMAT: 連結格式 CUSTOM: 自訂 -CLIPBOARD_PICTURE: 剪貼簿圖片 +CLIPBOARD_PICTURE: 剪貼簿 TIPS_DRAG_VALID_PICTURE_OR_URL: 請拖入合法的圖片檔案或者圖片URL地址 TIPS_INPUT_URL: 請輸入URL TIPS_HTTP_PREFIX: http://或者https://開頭 diff --git a/src/renderer/components/ImageProcessSetting.vue b/src/renderer/components/ImageProcessSetting.vue index ab916f36..68ab957f 100644 --- a/src/renderer/components/ImageProcessSetting.vue +++ b/src/renderer/components/ImageProcessSetting.vue @@ -2,138 +2,281 @@ - - - - - - - {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }} - - - {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_IMAGE') }} - - - - - - - - - - - - - - - - - - - - - - - - - - - - {{ item[1] }} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+ +
+ +
+
+ +

{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISADDWM') }}

+
+ +
+ + + {{ waterMarkForm.isAddWatermark ? $T('ENABLE') : $T('DISABLE') }} + + +
+ + + {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }} + {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_IMAGE') }} + + + + + + + + + + + {{ item[1] }} + + + + +
+ + + + + + + +
+ + +
+

{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}

+ + + + + + + + + +
+ + {{ waterMarkForm.watermarkColor }} +
+ +
+ + +
+

{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_IMAGE') }}

+ + + +
+
+
+
+ + +
+
+ +

{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT') }}

+
+ +
+ + + {{ compressForm.isConvert ? $T('ENABLE') : $T('DISABLE') }} + + +
+ + + + + + + + + +
+
+
+
+ + +
+ +
+
+ +

{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_QUALITY') }}

+
+ +
+ + + {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISREMOVEEXIF') }} + + + + + +
+
+ + +
+
+ +

{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE') }}

+
+ +
+ + + {{ compressForm.isReSize ? $T('ENABLE') : $T('DISABLE') }} + + +
+
+ + + + + + + +
+ + + + + + + + +
+
+
+ + +
+
+ +

{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZEBYPERCENT') }}

+
+ +
+ + + {{ compressForm.isReSizeByPercent ? $T('ENABLE') : $T('DISABLE') }} + + +
+ + + +
+
+
+ + +
+
+ +

{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_TRANSFORMATION') }}

+
+ +
+
+ + + {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP') }} + + + + + {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP') }} + +
+ + + + {{ + compressForm.isRotate + ? $T('UPLOAD_PAGE_IMAGE_PROCESS_ISROTATE') + : $T('UPLOAD_PAGE_IMAGE_PROCESS_ISROTATE') + }} + + +
+ +
+ +
+ 0° + 90° + 180° + 270° +
+
+ +
+
+
+
+
+ + +
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_CONFIRM') }} {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_CANCEL') }} - +
+ + diff --git a/src/renderer/pages/Upload.vue b/src/renderer/pages/Upload.vue index a34e0745..8bd4cb06 100644 --- a/src/renderer/pages/Upload.vue +++ b/src/renderer/pages/Upload.vue @@ -1,99 +1,108 @@