feat(pop-upload): 刷新popupload规范，增加uploadTip插槽 (#1850)

2024-08-07 10:03:14 +08:00 · 2024-08-07 10:03:14 +08:00 · cdf28c399a
parent 5fa3ec93aa
commit cdf28c399a
13 changed files with 244 additions and 57 deletions
--- a/examples/sites/demos/apis/pop-upload.js
+++ b/examples/sites/demos/apis/pop-upload.js
@ -289,7 +289,18 @@ export default {
        }
      ],
      methods: [],
-      slots: []
+      slots: [
+        {
+          name: 'uploadTip',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义上传提示内容',
+            'en-US': 'Customize upload prompt content'
+          },
+          mode: ['pc'],
+          pcDemo: 'upload-tip'
+        }
+      ]
    }
  ],
  types: [
--- a/examples/sites/demos/pc/app/pop-upload/upload-tip-composition-api.vue
+++ b/examples/sites/demos/pc/app/pop-upload/upload-tip-composition-api.vue
@ -0,0 +1,40 @@
+<template>
+  <tiny-pop-upload
+    :action="action"
+    accept="image/*"
+    :limit="limit"
+    :upload-file-type="fileType"
+    :max-upload-file-size="fileSize"
+    upload-button-text="添加文件"
+  >
+    <template #uploadTip>
+      <tiny-alert type="info">
+        <template #description>
+          <p class="tips-item">1.上传数据应不超过{{ limit }}条，超过数量不允许上传；</p>
+          <p class="tips-item">2.相同数据不会重复发</p>
+          <p class="tips-item">
+            3.上传文件限{{ fileType.join(',') }}格式，文件不超过{{ fileSize / 1024 }}KB，点击<tiny-link
+              >下载模板</tiny-link
+            >
+          </p>
+        </template>
+      </tiny-alert>
+    </template>
+  </tiny-pop-upload>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { PopUpload as TinyPopUpload, Alert as TinyAlert, Link as TinyLink } from '@opentiny/vue'
+
+const action = ref('http://localhost:3000/api/upload')
+const limit = ref(500)
+const fileSize = ref(512000)
+const fileType = ref(['.png', '.jpg'])
+</script>
+
+<style scoped>
+.tips-item {
+  margin: 0;
+}
+</style>
--- a/examples/sites/demos/pc/app/pop-upload/upload-tip.vue
+++ b/examples/sites/demos/pc/app/pop-upload/upload-tip.vue
@ -0,0 +1,50 @@
+<template>
+  <tiny-pop-upload
+    :action="action"
+    accept="image/*"
+    :limit="limit"
+    :upload-file-type="fileType"
+    :max-upload-file-size="fileSize"
+    upload-button-text="添加文件"
+  >
+    <template #uploadTip>
+      <tiny-alert type="info">
+        <template #description>
+          <p class="tips-item">1.上传数据应不超过{{ limit }}条，超过数量不允许上传；</p>
+          <p class="tips-item">2.相同数据不会重复发</p>
+          <p class="tips-item">
+            3.上传文件限{{ fileType.join(',') }}格式，文件不超过{{ fileSize / 1024 }}KB，点击<tiny-link
+              >下载模板</tiny-link
+            >
+          </p>
+        </template>
+      </tiny-alert>
+    </template>
+  </tiny-pop-upload>
+</template>
+
+<script lang="jsx">
+import { PopUpload, Alert, Link } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyPopUpload: PopUpload,
+    TinyAlert: Alert,
+    TinyLink: Link
+  },
+  data() {
+    return {
+      action: 'http://localhost:3000/api/upload',
+      limit: 500,
+      fileSize: 512000,
+      fileType: ['.png', '.jpg']
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tips-item {
+  margin: 0;
+}
+</style>
--- a/examples/sites/demos/pc/app/pop-upload/webdoc/pop-upload.js
+++ b/examples/sites/demos/pc/app/pop-upload/webdoc/pop-upload.js
@ -65,9 +65,9 @@ export default {
      },
      desc: {
        'zh-CN':
-          '通过 <code>dialog-title</code> 设置弹框的标题，<code>cancel-button-text</code> 设置取消按钮的文本, \n          <code>submit-button-text</code> 设置提交按钮的文本， <code>cancel-button-text</code> 设置上传按钮的文本。',
+          '通过 <code>dialog-title</code> 设置弹框的标题，<code>cancel-button-text</code> 设置取消按钮的文本, \n          <code>submit-button-text</code> 设置提交按钮的文本， <code>upload-button-text</code> 设置上传按钮的文本。',
        'en-US':
-          'Set the title of the pop-up box through<code>dialog-title</code>, and set the text of the cancel button through<code>cancel-button-text</code>,\n          <code>submit-button-text</code>Set the text for the submit button,<code>cancel-button-text</code>Set the text for the upload button.'
+          'Set the title of the pop-up box through<code>dialog-title</code>, and set the text of the cancel button through<code>cancel-button-text</code>,\n          <code>submit-button-text</code>Set the text for the submit button,<code>upload-button-text</code>Set the text for the upload button.'
      },
      codeFiles: ['fill-button-text.vue']
    },
@ -98,6 +98,18 @@ export default {
      },
      codeFiles: ['file-type.vue']
    },
+    {
+      demoId: 'upload-tip',
+      name: {
+        'zh-CN': '自定义上传提示',
+        'en-US': 'Customize upload prompts'
+      },
+      desc: {
+        'zh-CN': '通过 <code>uploadTip</code> 插槽自定义上传提示的内容块。',
+        'en-US': 'Customize the content block for upload prompts through the<code>uploadTip</code>slot.'
+      },
+      codeFiles: ['upload-tip.vue']
+    },
    {
      demoId: 'prevent-delete-file',
      name: {
--- a/packages/renderless/src/pop-upload/index.ts
+++ b/packages/renderless/src/pop-upload/index.ts
@ -45,6 +45,17 @@ export const computedFileStatus =
  () =>
    t(constants.FILE_STATUS)

+export const computedFileWords =
+  ({ t }) =>
+  () => ({
+    operation: t('ui.popupload.operation'),
+    waitUpload: t('ui.popupload.waitUpload'),
+    success: t('ui.popupload.success'),
+    uploadError: t('ui.popupload.uploadError'),
+    confirmDeleteTips: t('ui.popupload.confirmDeleteTips'),
+    delete: t('ui.popupload.delete')
+  })
+
 export const computedFileSize =
  ({ constants, t }) =>
  () =>
@ -142,7 +153,7 @@ export const closeSuccessTips = (state) => () => (state.successTips = [])
 export const watchLimit = (state) => (value) => {
  state.limit = value

-  if (value != undefined && value > 0) {
+  if (value !== undefined && value > 0) {
    state.tipsTitle[0] = {
      count: value
    }
@ -169,7 +180,7 @@ export const watchMaxUploadFileSize =
  (value) => {
    state.maxUploadFileSize = value

-    if (value != undefined && value != 0) {
+    if (value !== undefined && value !== 0) {
      state.tipsTitle[2] = {
        size: Math.floor(value / 1024) + constants.KB
      }
@ -230,7 +241,7 @@ export const beforeAvatarUpload =
    let isnext = false
    let isSize = false

-    if (state.uploadFileType && state.uploadFileType.length != 0) {
+    if (state.uploadFileType && state.uploadFileType.length !== 0) {
      let arr = filepath.split('.')
      let fileend = '.' + arr[arr.length - 1]

@ -241,7 +252,7 @@ export const beforeAvatarUpload =
      }
    }

-    if (state.maxUploadFileSize && state.maxUploadFileSize != 0) {
+    if (state.maxUploadFileSize && state.maxUploadFileSize !== 0) {
      if (file.size > state.maxUploadFileSize) {
        state.errorTips.push({ size: file.name })
        isSize = true
--- a/packages/renderless/src/pop-upload/vue.ts
+++ b/packages/renderless/src/pop-upload/vue.ts
@ -27,6 +27,7 @@ import {
  computedErrorTypeTips,
  computedFileName,
  computedFileStatus,
+  computedFileWords,
  computedFileSize,
  computedLimitSizeTips,
  computedLimitTypeTips,
@ -91,6 +92,8 @@ const initState = ({ reactive, props, computed, api }) =>
    fileSize: computed(() => api.computedFileSize()),
    fileName: computed(() => api.computedFileName()),
    fileStatus: computed(() => api.computedFileStatus()),
+    // tiny新增
+    fileWords: computed(() => api.computedFileWords()),
    cancelButtonText: computed(() => api.computedCancel()),
    submitButtonText: computed(() => api.computedconfirm()),
    errorNumTips: computed(() => api.computedErrorNumTips()),
@ -135,6 +138,7 @@ const initApi = ({ api, state, refs, emit, props, constants, t }) => {
    computedFileSize: computedFileSize({ constants, t }),
    computedCancel: computedCancel({ constants, props, t }),
    computedFileStatus: computedFileStatus({ constants, t }),
+    computedFileWords: computedFileWords({ t }),
    computedconfirm: computedconfirm({ constants, props, t }),
    computedUploadError: computedUploadError({ constants, t }),
    computedErrorNumTips: computedErrorNumTips({ constants, t }),
--- a/packages/theme/src/pop-upload/index.less
+++ b/packages/theme/src/pop-upload/index.less
@ -90,15 +90,19 @@
    }

    .col1 {
-      width: 60%;
+      width: 46%;
    }

    .col2 {
-      width: 20%;
+      width: 17%;
    }

    .col3 {
-      width: 20%;
+      width: 21%;
+    }
+
+    .col4 {
+      width: 16%;
    }
  }

@ -135,19 +139,38 @@
      background: var(--ti-popupload-table-item-even-bg-color);
    }

-    .delIcon {
-      width: var(--ti-popupload-dialog-table-icon-size);
-      fill: var(--ti-popupload-dialog-table-icon-color);
+    .del-col {
+      color: var(--ti-popupload-dialog-delete-text-color);
+      width: 100%;
      cursor: pointer;
-
-      &:hover {
-        width: var(--ti-popupload-dialog-table-icon-size-hover);
-        fill: var(--ti-popupload-dialog-table-icon-color-hover);
-      }
    }
  }

  &__modal .@{popupload__modal-prefix-cls}__body {
    overflow-y: auto;
  }
+
+  // 新规范适配
+  &__pop-confirm {
+    .tiny-popconfirm-popover__title {
+      white-space: nowrap;
+    }
+  }
+
+  &__status-icon {
+    display: inline-block;
+    margin-right: 7px;
+    height: 8px;
+    width: 8px;
+    border: 2px solid var(--ti-popupload-status-icon-color);
+    border-radius: 50%;
+
+    &&-success {
+      border-color: var(--ti-popupload-status-success-icon-color);
+    }
+
+    &&-fail {
+      border-color: var(--ti-popupload-status-fail-icon-color);
+    }
+  }
 }
--- a/packages/theme/src/pop-upload/smb-theme.js
+++ b/packages/theme/src/pop-upload/smb-theme.js
@ -1,3 +1 @@
-export const tinyPopUploadSmbTheme = {
-  'ti-popupload-dialog-table-icon-color-hover': '#c7000b'
-}
+export const tinyPopUploadSmbTheme = {}
--- a/packages/theme/src/pop-upload/vars.less
+++ b/packages/theme/src/pop-upload/vars.less
@ -13,50 +13,50 @@
 .component-css-vars-pop-upload() {
  // 上传按钮文字大小(hide)
  --ti-popupload-font-size: var(--ti-common-font-size-base, 12px);
-  // 弹出框头部alert提示底部外边距
+  // 弹窗头部alert提示底部外边距
  --ti-popupload-dialog-header-alert-margin-bottom: var(--ti-common-space-10, 10px);
-  //  弹出框表格高度
+  //  弹窗表格高度
  --ti-popupload-dialog-table-height: calc(var(--ti-common-size-35x, 140px) * 2);
-  // 弹出框表格字号
+  // 弹窗表格字号
  --ti-popupload-dialog-table-font-size: var(--ti-common-font-size-1, 14px);
-  // 弹出框表格顶部外边距
+  // 弹窗表格顶部外边距
  --ti-popupload-dialog-margin-top: var(--ti-common-space-10, 10px);
-  // 弹出框表格头部分割线颜色
+  // 弹窗表格头部分割线颜色
  --ti-popupload-dialog-table-border-color: var(--ti-common-color-line-normal, #adb0b8);
-  // 弹出框表格头部高度
+  // 弹窗表格头部高度
  --ti-popupload-dialog-table-header-height: var(--ti-common-size-height-small, 32px);
-  // 弹出框表格头部文本色
+  // 弹窗表格头部文本色
  --ti-popupload-dialog-table-header-text-color: var(--ti-common-color-text-primary, #252b3a);
-  // 弹出框表格头部字重
+  // 弹窗表格头部字重
  --ti-popupload-dialog-table-header-font-weight: var(--ti-common-font-weight-bold, 700);
-  // 弹出框表格头部背景色
+  // 弹窗表格头部背景色
  --ti-popupload-dialog-table-header-bg-color: var(--ti-common-color-bg-normal, #eef0f5);
-  // 弹出框表格头部item垂直内边距
+  // 弹窗表格头部item垂直内边距
  --ti-popupload-table-header-col-padding-vertical: var(--ti-common-space-0, 0px);
-  // 弹出框表格头部item水平内边距
+  // 弹窗表格头部item水平内边距
  --ti-popupload-table-header-col-padding-horizontal: var(--ti-common-space-3x, 12px);
-  // 弹出框表格内容item垂直内边距
+  // 弹窗表格内容item垂直内边距
  --ti-popupload-table-body-col-padding-vertical: var(--ti-common-space-2x, 8px);
-  // 弹出框表格内容item水平内边距
+  // 弹窗表格内容item水平内边距
  --ti-popupload-table-body-col-padding-horizontal: var(--ti-common-space-3x, 12px);
-  // 弹出框表格内容item垂直外边距
+  // 弹窗表格内容item垂直外边距
  --ti-popupload-table-body-col-margin-vertical: var(--ti-common-space-0, 0px);
-  // 弹出框表格内容item水平外边距
+  // 弹窗表格内容item水平外边距
  --ti-popupload-table-body-col-margin-horizontal: var(--ti-common-space-0, 0px);
-  // 弹出框表格内容item行高
+  // 弹窗表格内容item行高
  --ti-popupload-table-body-col-line-height: var(--ti-common-line-height-4, 20px);
-  // 弹出框表格内容偶数行背景色
+  // 弹窗表格内容偶数行背景色
  --ti-popupload-table-item-even-bg-color: var(--ti-common-color-info-bg, rgba(51, 51, 51, 0.06));
-  // 弹出框表格底部内边距
+  // 弹窗表格底部内边距
  --ti-popupload-dialog-table-body-padding-bottom: var(--ti-common-space-10, 10px);
-  // 弹出框底部内边距
+  // 弹窗底部内边距
  --ti-popupload-dialog-footer-padding-bottom: var(--ti-common-space-6x, 24px);
-  // 弹出框已上传文件的删除图标色
-  --ti-popupload-dialog-table-icon-color: var(--ti-common-color-icon-active, #5e7ce0);
-  // 弹出框已上传文件的删除图标尺寸
-  --ti-popupload-dialog-table-icon-size: var(--ti-common-size-4x, 16px);
-  // 弹出框已上传文件的删除图标悬浮色
-  --ti-popupload-dialog-table-icon-color-hover: var(--ti-common-bg-primary, #c7000b);
-  // 弹出框已上传文件的删除图标悬浮尺寸
-  --ti-popupload-dialog-table-icon-size-hover: var(--ti-common-size-4x, 16px);
+  // 弹窗已上传文件的删除文本色
+  --ti-popupload-dialog-delete-text-color: var(--ti-common-color-text-link, #526ecc);
+  // 弹窗文件列表等待上传圆圈色
+  --ti-popupload-status-icon-color: var(--ti-common-color-line-normal, #adb0b8);
+  // 弹窗文件列表上传成功圆圈色
+  --ti-popupload-status-success-icon-color: var(--ti-common-color-success, #50d4ab);
+  // 弹窗文件列表上传失败圆圈色
+  --ti-popupload-status-fail-icon-color: var(--ti-common-color-error-border, #f66f6a);
 }
--- a/packages/theme/src/progress/index.less
+++ b/packages/theme/src/progress/index.less
@ -43,6 +43,7 @@
    vertical-align: middle;
    margin-left: var(--ti-progress-bar-text-margin-left); // smb新增
    line-height: 1;
+    white-space: nowrap;

    i {
      vertical-align: middle;
--- a/packages/vue-locale/src/lang/en.ts
+++ b/packages/vue-locale/src/lang/en.ts
@ -521,6 +521,11 @@ export default {
      uploadsButtonText: 'select files',
      errorTypeTips: 'Upload file type mismatch',
      errorSizeTips: 'Upload file size exceeds limit',
+      confirmDeleteTips: 'Are you sure you want to delete this file?',
+      delete: 'Delete',
+      waitUpload: 'Waiting for upload',
+      operation: 'Operation',
+      success: 'Upload successful',
      limitUploadFileType: 'Upload file type is limited to',
      limitUploadFileNumber: 'Limit the number of uploaded files to',
      limitUploadFileSize: 'The size of the uploaded file does not exceed',
--- a/packages/vue-locale/src/lang/zh-CN.ts
+++ b/packages/vue-locale/src/lang/zh-CN.ts
@ -521,6 +521,11 @@ export default {
      errorTypeTips: '上传文件类型不匹配',
      errorNumTips: '上传文件数量超出限制,已取消该操作',
      errorSizeTips: '上传文件大小超出限制',
+      confirmDeleteTips: '确定要删除该文件吗？',
+      delete: '删除',
+      waitUpload: '等待上传',
+      operation: '操作',
+      success: '上传成功',
      limitUploadFileNumber: '上传文件数限制为',
      limitUploadFileType: '上传文件类型限制为',
      limitUploadFileSize: '上传文件大小不超过'
--- a/packages/vue/src/pop-upload/src/pc.vue
+++ b/packages/vue/src/pop-upload/src/pc.vue
@ -21,10 +21,12 @@
    >
      <div class="tiny-popupload__dialog">
        <div class="tiny-popupload__dialog-header">
+          <slot name="uploadTip"></slot>
          <tiny-alert
            size="large"
            v-if="
-              state.tipsTitle[0] !== undefined || state.tipsTitle[1] !== undefined || state.tipsTitle[2] !== undefined
+              !slots.uploadTip &&
+              (state.tipsTitle[0] !== undefined || state.tipsTitle[1] !== undefined || state.tipsTitle[2] !== undefined)
            "
            :title="state.tipsTitleText"
          >
@ -80,9 +82,7 @@
            :auto-upload="false"
          >
            <template #trigger>
-              <tiny-button size="small" type="primary">{{
-                state.multiple ? state.uploadsButtonText : state.uploadButtonText
-              }}</tiny-button>
+              <tiny-button>{{ state.multiple ? state.uploadsButtonText : state.uploadButtonText }}</tiny-button>
            </template>
          </tiny-file-upload>
          <div class="tiny-popupload__dialog-table">
@ -90,6 +90,7 @@
              <p class="header-col col1">{{ state.fileName }}</p>
              <p class="header-col col2">{{ state.fileSize }}</p>
              <p class="header-col col3">{{ state.fileStatus }}</p>
+              <p class="header-col col4">{{ state.fileWords.operation }}</p>
            </div>
            <div class="tiny-popupload__dialog-table-body">
              <ul class="tiny-popupload__dialog-table-list">
@ -97,9 +98,33 @@
                  <p class="body-col col1">{{ item.name }}</p>
                  <p class="body-col col2">{{ formatFileSize(item.size) }}</p>
                  <p class="body-col col3">
-                    <span>
-                      <IconDel class="delIcon" @click="deleteFile(item)"></IconDel>
-                    </span>
+                    <span
+                      v-show="item.status !== 'uploading'"
+                      :class="['tiny-popupload__status-icon', `tiny-popupload__status-icon-${item.status}`]"
+                    ></span>
+                    <span v-if="item.status === 'ready'">{{ state.fileWords.waitUpload }}</span>
+                    <tiny-progress
+                      v-else-if="item.status === 'uploading'"
+                      :percentage="item.percentage"
+                      :stroke-width="4"
+                    ></tiny-progress>
+                    <span v-else-if="item.status === 'success'">{{ state.fileWords.success }}</span>
+                    <span v-else-if="item.status === 'fail'">{{ state.fileWords.uploadError }}</span>
+                  </p>
+                  <p class="body-col col4">
+                    <tiny-popconfirm
+                      :title="state.fileWords.confirmDeleteTips"
+                      type="warning"
+                      placement="top-start"
+                      trigger="click"
+                      width="196"
+                      custom-class="tiny-popupload__pop-confirm"
+                      @confirm="deleteFile(item)"
+                    >
+                      <template #reference>
+                        <div class="del-col">{{ state.fileWords.delete }}</div>
+                      </template>
+                    </tiny-popconfirm>
                  </p>
                </li>
              </ul>
@ -127,8 +152,9 @@
 import Alert from '@opentiny/vue-alert'
 import Button from '@opentiny/vue-button'
 import Modal from '@opentiny/vue-modal'
-import { iconDel } from '@opentiny/vue-icon'
 import FileUpload from '@opentiny/vue-file-upload'
+import Progress from '@opentiny/vue-progress'
+import Popconfirm from '@opentiny/vue-popconfirm'
 import { renderless, api } from '@opentiny/vue-renderless/pop-upload/vue'
 import { props, setup, defineComponent } from '@opentiny/vue-common'

@ -138,7 +164,8 @@ export default defineComponent({
    TinyModal: Modal,
    TinyAlert: Alert,
    TinyFileUpload: FileUpload,
-    IconDel: iconDel()
+    TinyProgress: Progress,
+    TinyPopconfirm: Popconfirm
  },
  props: [
    ...props,