perf: 图片裁剪组件中英文支持

fast-crud · Jun 7, 2024 · 8b5b3f6 · 8b5b3f6
1 parent c62b8d4
commit 8b5b3f6
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 26 deletions.
diff --git a/packages/fast-admin/fs-admin-antdv4 b/packages/fast-admin/fs-admin-antdv4
diff --git a/packages/fast-crud/src/locale/lang/en.ts b/packages/fast-crud/src/locale/lang/en.ts
@@ -73,10 +73,18 @@ export default {
         select: "select"
       },
       cropper: {
+        title: "image crop",
+        preview: "preview",
         reChoose: "reChoose",
         flipX: "flipX",
         flipY: "flipY",
-        reset: "reset"
+        reset: "reset",
+        cancel: "cancel",
+        confirm: "confirm",
+        chooseImage: "+ choose image",
+        onlySupport: "only",
+        sizeLimit: "size limit",
+        sizeNoLimit: " no limit"
       },
       fileUploader: {
         text: "fileUpload",

diff --git a/packages/fast-crud/src/locale/lang/zh-cn.ts b/packages/fast-crud/src/locale/lang/zh-cn.ts
@@ -75,10 +75,18 @@ export default {
         select: "选择"
       },
       cropper: {
+        title: "图片裁剪",
+        preview: "预览",
         reChoose: "重新选择",
         flipX: "左右翻转",
         flipY: "上下翻转",
-        reset: "重置"
+        reset: "重置",
+        cancel: "取消",
+        confirm: "确定",
+        chooseImage: "+ 选择图片",
+        onlySupport: "仅支持",
+        sizeLimit: "大小不能超过",
+        sizeNoLimit: "大小不限制"
       },
       fileUploader: {
         text: "文件上传",

diff --git a/packages/fast-extends/src/uploader/components/fs-cropper.vue b/packages/fast-extends/src/uploader/components/fs-cropper.vue
@@ -13,8 +13,8 @@
       <input v-show="false" ref="fileInputRef" type="file" :accept="accept" @change="handleChange" />
       <!-- step1 -->
       <div v-show="!isLoaded" class="fs-cropper-dialog__choose fs-cropper-dialog_left">
-        <fs-button round text="+选择图片" @click="showFileChooser" />
-        <p>{{ _uploadTip }}</p>
+        <fs-button round :text="computedTexts.chooseImage" @click="showFileChooser" />
+        <p>{{ computedUploadTip }}</p>
       </div>
       <!-- step2 -->
       <div v-show="isLoaded" class="fs-cropper-dialog__edit fs-cropper-dialog_left">
@@ -34,16 +34,16 @@
         </div>
       </div>
       <div class="fs-cropper-dialog__preview">
-        <span class="fs-cropper-dialog__preview-title">预览</span>
+        <span class="fs-cropper-dialog__preview-title">{{ computedTexts.preview }}</span>
         <div class="fs-cropper-dialog__preview-120 preview"></div>
         <div class="fs-cropper-dialog__preview-65 preview" :class="{ round: _cropper.aspectRatio === 1 }"></div>
       </div>
     </div>
 
     <template #footer>
       <div class="dialog-footer">
-        <fs-button size="small" text="取消" @click="handleClose" />
-        <fs-button type="primary" size="small" text="确定" @click="doCropper()" />
+        <fs-button size="small" :text="computedTexts.cancel" @click="handleClose" />
+        <fs-button type="primary" size="small" :text="computedTexts.confirm" @click="doCropper()" />
       </div>
     </template>
   </component>
@@ -67,8 +67,7 @@ export default defineComponent({
   props: {
     // 对话框标题
     title: {
-      type: String,
-      default: "图片裁剪"
+      type: String
     },
     // cropper的高度，默认为浏览器可视窗口高度的40%，最小270
     cropperHeight: {
@@ -133,11 +132,14 @@ export default defineComponent({
     }
     const vClosed = ui.dialog.buildOnClosedBind(handleClosed);
     const customClass = ui.dialog.customClass;
-    const dialogBinding: Ref = ref({
-      ...vClosed,
-      [customClass]: "fs-cropper-dialog",
-      ...ui.formWrapper.buildWidthBind(ui.dialog.name, "960px"),
-      ...ui.formWrapper.buildInitBind(ui.dialog.name)
+    const dialogBinding: Ref = computed(() => {
+      return {
+        ...vClosed,
+        [customClass]: "fs-cropper-dialog",
+        ...ui.formWrapper.buildWidthBind(ui.dialog.name, "960px"),
+        ...ui.formWrapper.buildInitBind(ui.dialog.name),
+        title: props.title || t("fs.extends.cropper.title")
+      };
     });
 
     function open(url: string) {
@@ -398,6 +400,27 @@ export default defineComponent({
       return buttons;
     });
 
+    const computedTexts = computed(() => {
+      return {
+        title: t("fs.extends.cropper.title"),
+        preview: t("fs.extends.cropper.preview"),
+        cancel: t("fs.extends.cropper.cancel"),
+        confirm: t("fs.extends.cropper.confirm"),
+        chooseImage: t("fs.extends.cropper.chooseImage")
+      };
+    });
+
+    const computedUploadTip = computed(() => {
+      if (props.uploadTip != null && props.uploadTip !== "") {
+        return props.uploadTip;
+      }
+      if (props.maxSize > 0) {
+        return `${t("fs.extends.cropper.onlySupport")} ${props.accept.replace(/,/g, "、")},
+        ${t("fs.extends.cropper.sizeLimit")} ${props.maxSize}M`;
+      } else {
+        return `${t("fs.extends.cropper.onlySupport")}${props.accept},${t("fs.extends.cropper.sizeNoLimit")}`;
+      }
+    });
     return {
       ui,
       cropperRef,
@@ -436,23 +459,15 @@ export default defineComponent({
       open,
       clear,
       getCropperRef,
-      ready
+      ready,
+      computedTexts,
+      computedUploadTip
     };
   },
   data() {
     return {};
   },
   computed: {
-    _uploadTip() {
-      if (this.uploadTip != null && this.uploadTip !== "") {
-        return this.uploadTip;
-      }
-      if (this.maxSize > 0) {
-        return `只支持${this.accept.replace(/,/g, "、")},大小不超过${this.maxSize}M`;
-      } else {
-        return `只支持${this.accept},大小无限制`;
-      }
-    },
     _cropper() {
       const def: any = {
         aspectRatio: 1,