feat: add avatar cropper

beclab · Sep 23, 2024 · d637447 · d637447
1 parent 4adb85b
commit d637447
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 16 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -17,7 +17,7 @@
     "build:preview": "ACTION=PREVIEW quasar build"
   },
   "dependencies": {
-    "@bytetrade/ui": "^0.1.22",
+    "@bytetrade/ui": "^0.1.24",
     "@quasar/extras": "^1.16.9",
     "axios": "^1.3.5",
     "dotenv": "^16.4.5",

diff --git a/packages/editor/src/components/avatar/UploadAvatar.vue b/packages/editor/src/components/avatar/UploadAvatar.vue
@@ -9,6 +9,7 @@
 			accept=".jpg, .jpeg, .png, .gif, image/*"
 			action="/images/upload/v1"
 			:parmas="{}"
+			type="avator"
 			@ok="ok"
 			@fail="fail"
 		>
@@ -77,6 +78,7 @@ const fail = (response: unknown) => {
 .upload-background-root {
 	width: 100%;
 	height: 100%;
+	padding: 0 20px;
 
 	.upload-image-inner {
 		border-radius: 8px;

diff --git a/packages/editor/src/components/layout/PreviewLayout.vue b/packages/editor/src/components/layout/PreviewLayout.vue
@@ -469,8 +469,7 @@ const onOpenWindow = (url: string) => {
 		}
 
 		.default-view {
-			position: absolute;
-			bottom: 2em;
+			margin-top: 12.5em;
 			text-align: center;
 		}
 

diff --git a/packages/editor/src/i18n/en-US/index.ts b/packages/editor/src/i18n/en-US/index.ts
@@ -49,14 +49,14 @@ export default {
 		select_local_image_desc:
 			'Select local image, upload, and edit your own avatar',
 		recommend_sizes:
-			'Use PNG or JPG image over 400x400 pixels for best display',
+			'Use PNG or JPG image over 400x400 pixels for best display, and no larger than 5MB.',
 		header_style: 'Header style',
 		classic: 'Classic',
 		portrait: 'Portrait',
 		banner: 'Banner',
 		profile_picture: 'Profile picture',
 		upload_avatar_desc:
-			'Upload an image of at least 600x600 pixels in JPG, PNG, or GIF format.',
+			'Upload an image of at least 400x400 pixels in JPG, PNG format, and no larger than 5MB.',
 		profile_picture_shape: 'Profile picture shape',
 		profile_picture_size: 'Profile picture size',
 		profile_picture_outline: 'Profile picture outline',

diff --git a/packages/editor/src/i18n/zh-CN/index.ts b/packages/editor/src/i18n/zh-CN/index.ts
@@ -48,13 +48,14 @@ export default {
 		upload_image: '上传图像',
 		select_local_image_desc: '选择本地图像，上传并编辑',
 		recommend_sizes:
-			'为了最佳显示效果，请使用超过 400x400 px 的 PNG 或 JPG 图像',
+			'为了最佳显示效果，请使用超过 400x400 px 的 PNG 或 JPG 图像，且大小不超过 5MB。',
 		header_style: '头部风格',
 		classic: '经典',
 		portrait: '肖像',
 		banner: '头图',
 		profile_picture: 'Profile 图片',
-		upload_avatar_desc: '请选取超过 600x600 px 的 JPG、PNG 或 GIF 图片上传。',
+		upload_avatar_desc:
+			'请选取超过 400x400 px 的 JPG、PNG图片上传，且大小不超过 5MB。',
 		profile_picture_shape: '图片形状',
 		profile_picture_size: '图片尺寸',
 		profile_picture_outline: '图片轮廓',

diff --git a/yarn.lock b/yarn.lock
@@ -1095,10 +1095,10 @@
     uuid "9.0.1"
     yaup "^1.8.0"
 
-"@bytetrade/ui@^0.1.22":
-  version "0.1.22"
-  resolved "https://registry.npmjs.org/@bytetrade/ui/-/ui-0.1.22.tgz"
-  integrity sha512-VFKq0Ti0h5JqJaaPigcuNUQVrlpSSfshMzSbQ1djP4frgo2+I15P2d6YSgmBITc4iGaLT0jxRtwdE7ej0uL17A==
+"@bytetrade/ui@^0.1.24":
+  version "0.1.24"
+  resolved "https://registry.npmjs.org/@bytetrade/ui/-/ui-0.1.24.tgz"
+  integrity sha512-kzAu4dByxeBglEzZFryWQ9Z+NpzL5AYfXanUYBhGTM0vwjeG3r3ZcnCWoRm/tBOlRm5e9VuVMb+si0EoIcp56Q==
   dependencies:
     "@quasar/extras" "^1.16.7"
     axios "^1.3.4"
@@ -2714,7 +2714,7 @@
   version "0.0.1"
   resolved "file:packages/editor"
   dependencies:
-    "@bytetrade/ui" "^0.1.21"
+    "@bytetrade/ui" "^0.1.22"
     "@quasar/extras" "^1.16.9"
     axios "^1.3.5"
     dotenv "^16.4.5"