feat(fileupload): [file-upload] Fixed the issue of new specification review of the upload component.

examples/sites/demos/pc/app/file-upload/custom-upload-tip-composition-api.vue

@@ -1,7 +1,14 @@
 <template>
-  <tiny-file-upload ref="uploadRef" :action="action" accept=".jpg,.png" re-uploadable :re-upload-tip="reUploadTip">
+  <tiny-file-upload
+    ref="uploadRef"
+    :action="action"
+    accept=".jpg,.png"
+    re-uploadable
+    :file-list="fileList"
+    :re-upload-tip="reUploadTip"
+  >
     <template #trigger>
-      <tiny-button type="primary">选取文件</tiny-button>
+      <tiny-button>选取文件</tiny-button>
     </template>
     <template #tip>
       <div class="tiny-upload__tip">只能上传 jpg/png 文件，且不超过500 kb</div>
@@ -15,4 +22,22 @@ import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vu
 
 const action = ref('http://localhost:3000/api/upload')
 const reUploadTip = (count) => `我是自定义重新上传的左侧提示，${count}个文件变红啦！`
+const fileList = ref([
+  {
+    name: 'test1',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
+    status: 'success'
+  },
+  {
+    name: '上传中',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
+    status: 'uploading',
+    percentage: 50
+  },
+  {
+    name: 'test2',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/book.jpg`,
+    status: 'fail'
+  }
+])
 </script>

examples/sites/demos/pc/app/file-upload/custom-upload-tip.vue

@@ -1,7 +1,14 @@
 <template>
-  <tiny-file-upload ref="upload" :action="action" accept=".jpg,.png" re-uploadable :re-upload-tip="reUploadTip">
+  <tiny-file-upload
+    ref="upload"
+    :action="action"
+    accept=".jpg,.png"
+    re-uploadable
+    :file-list="fileList"
+    :re-upload-tip="reUploadTip"
+  >
     <template #trigger>
-      <tiny-button type="primary">选取文件</tiny-button>
+      <tiny-button>选取文件</tiny-button>
     </template>
     <template #tip>
       <div class="tiny-upload__tip">只能上传 jpg/png 文件，且不超过500 kb</div>
@@ -20,7 +27,25 @@ export default {
   data() {
     return {
       action: 'http://localhost:3000/api/upload',
-      reUploadTip: (count) => `我是自定义重新上传的左侧提示，${count}个文件变红啦！`
+      reUploadTip: (count) => `我是自定义重新上传的左侧提示，${count}个文件变红啦！`,
+      fileList: [
+        {
+          name: 'test1',
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
+          status: 'success'
+        },
+        {
+          name: '上传中',
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
+          status: 'uploading',
+          percentage: 50
+        },
+        {
+          name: 'test2',
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/book.jpg`,
+          status: 'fail'
+        }
+      ]
     }
   }
 }

examples/sites/demos/pc/app/file-upload/picture-card-composition-api.vue

@@ -7,7 +7,7 @@
       :file-list="fileList"
       @preview="previewPicture"
     >
-      <tiny-icon-plus class="tiny-svg-size" />
+      <tiny-icon-add-picture class="tiny-svg-size" />
     </tiny-file-upload>
     <tiny-dialog-box v-model:visible="dialogVisible1" width="50%">
       <img style="width: 100%" :src="dialogImageUrl1" alt="Preview Image" />
@@ -18,19 +18,36 @@
 <script setup>
 import { ref } from 'vue'
 import { FileUpload as TinyFileUpload, DialogBox as TinyDialogBox } from '@opentiny/vue'
-import { iconPlus } from '@opentiny/vue-icon'
+import { iconAddPicture } from '@opentiny/vue-icon'
 
 const action = ref('http://localhost:3000/api/upload')
 const dialogVisible1 = ref(false)
 const dialogImageUrl1 = ref('')
 const fileList = ref([
   {
     name: 'fruit',
-    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
+    status: 'ready'
+  },
+  {
+    name: 'fruit',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
+    status: 'uploading',
+    percentage: 50
+  },
+  {
+    name: 'fruit',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
+    status: 'success'
+  },
+  {
+    name: 'fruit',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
+    status: 'fail'
   }
 ])
 
-const TinyIconPlus = iconPlus()
+const TinyIconAddPicture = iconAddPicture()
 
 function previewPicture(file) {
   dialogImageUrl1.value = file.url

examples/sites/demos/pc/app/file-upload/picture-card.spec.ts

@@ -26,7 +26,7 @@ test('照片墙', async ({ page }) => {
 
   await expect(width).toEqual(148)
   await expect(height).toEqual(148)
-  await expect(li).toHaveCount(1)
+  await expect(li).toHaveCount(4)
   await fileChooser.setFiles(currentPath)
   await first.hover()
   await prevPic.click()

examples/sites/demos/pc/app/file-upload/picture-card.vue

@@ -7,7 +7,7 @@
       :file-list="fileList"
       @preview="previewPicture"
     >
-      <icon-plus class="tiny-svg-size" />
+      <tiny-icon-add-picture class="tiny-svg-size" />
     </tiny-file-upload>
     <tiny-dialog-box v-model:visible="dialogVisible1" width="50%">
       <img style="width: 100%" :src="dialogImageUrl1" alt="Preview Image" />
@@ -17,23 +17,41 @@
 
 <script>
 import { FileUpload, DialogBox } from '@opentiny/vue'
-import { IconPlus } from '@opentiny/vue-icon'
+import { iconAddPicture } from '@opentiny/vue-icon'
 
 export default {
   components: {
     TinyFileUpload: FileUpload,
     TinyDialogBox: DialogBox,
-    IconPlus: IconPlus()
+    TinyIconAddPicture: iconAddPicture()
   },
   data() {
+    console.log('--ti-upload-list-picture-card-success-border-weight'.length)
     return {
       action: 'http://localhost:3000/api/upload',
       dialogVisible1: false,
       dialogImageUrl1: '',
       fileList: [
         {
           name: 'fruit',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
+          status: 'ready'
+        },
+        {
+          name: 'fruit',
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
+          status: 'uploading',
+          percentage: 50
+        },
+        {
+          name: 'fruit',
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
+          status: 'success'
+        },
+        {
+          name: 'fruit',
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
+          status: 'fail'
         }
       ]
     }

packages/theme/src/upload-list/index.less

@@ -46,7 +46,7 @@
   // 提高优先级覆盖ul.li样式
   &--text {
     li:first-of-type > .@{upload-list-prefix-cls}__item {
-      margin-top: calc(var(--ti-upload-list-item-margin-top) + 3px);
+      margin-top: calc(var(--ti-upload-list-item-margin-top) + 4px);
     }
 
     li:not(:first-of-type) > .@{upload-list-prefix-cls}__item {
@@ -60,8 +60,7 @@
     li + li {
       .@{upload-list-prefix-cls}__item.is-uploading,
       .@{upload-list-prefix-cls}__item.is-downloading {
-        margin-top: 18px;
-        margin-bottom: 18px;
+        margin-bottom: 14px;
       }
     }
   }
@@ -388,6 +387,10 @@
       margin: 0 var(--ti-upload-list-picture-card-item-margin-right) 8px 0;
       display: inline-block;
 
+      &.is-success {
+        border-width: var(--ti-upload-list-picture-success-border-weight);
+      }
+
       &.is-fail {
         border-color: var(--ti-upload-list-item-fail-text-color);
         background-color: #fce3e1;

packages/theme/src/upload-list/smb-theme.js

@@ -1,17 +1,16 @@
 export const tinyUploadListSmbTheme = {
-  'ti-upload-list-picture-card-width': '100px',
-  'ti-upload-list-picture-card-height': '100px',
-  'ti-upload-list-picture-card-progress-size': '68px',
-  'ti-upload-list-picture-card-item-icon-color': '#FFFFFF',
-  'ti-upload-list-item-progress-top': '26px',
-  'ti-upload-list-item-line-height': '22px',
+  'ti-upload-list-picture-card-width': 'var(--ti-common-size-25x)',
+  'ti-upload-list-picture-card-height': 'var(--ti-common-size-25x)',
+  'ti-upload-list-picture-card-progress-size': 'var(--ti-common-size-17x)',
+  'ti-upload-list-picture-card-item-icon-color': 'var(--ti-common-color-light)',
+  'ti-upload-list-item-line-height': 'var(--ti-common-line-height-1)',
   'ti-upload-list-item-margin-top': 'var(--ti-common-space-2x)',
   'ti-upload-list-picture-card-item-margin-right': 'var(--ti-common-space-4x)',
-  'ti-upload-list-item-border-radius': 'var(--ti-common-border-radius-1)',
+  'ti-upload-list-item-border-radius': 'var(--ti-common-border-radius-4)',
   'ti-upload-picture-card-border-radius': 'var(--ti-common-border-radius-4)',
-  'ti-upload-list-item-hover-background-color': 'rgba(0, 0, 0, 0.05)',
-  'ti-upload-list-svg-icon-font-size': '16px',
-  'ti-upload-list-svg-refresh-position-right': '35px',
-  'ti-upload-list-svg-close-position-right': '9px',
-  'ti-upload-list-picture-card-item-hover-bg-color': 'rgba(0, 0, 0, 0.4)'
+  'ti-upload-list-item-hover-background-color': 'var(--ti-common-bg-color-disabled-transparent-5)',
+  'ti-upload-list-svg-icon-font-size': 'var(--ti-common-font-size-2)',
+  'ti-upload-list-svg-refresh-position-right': 'var(--ti-common-space-8x)',
+  'ti-upload-list-picture-card-item-hover-bg-color': 'var(--ti-common-bg-color-hover-40)',
+  'ti-upload-list-picture-success-border-weight': '0'
 }

packages/theme/src/upload-list/vars.less

@@ -35,6 +35,8 @@
   --ti-upload-list-successful-icon-font-size: var(--ti-common-font-size-1, 14px);
   // 照片墙上传列表项边框色
   --ti-upload-list-picture-card-item-border-color: var(--ti-common-color-border, #adb0b8);
+  // 照片墙上传成功列表项边框厚度
+  --ti-upload-list-picture-success-border-weight: var(--ti-common-border-weight-normal, 1px);
   // 照片墙上传列表项背景色
   --ti-upload-list-picture-card-item-bg-color: var(--ti-common-color-light, #fff);
   // 照片墙上传列表项右上角图标填充色
@@ -52,7 +54,7 @@
   // 照片墙上传列表项右外边距(new)
   --ti-upload-list-picture-card-item-margin-right: 8px;
   // 非picturecard模式上传列表进度条上外边距(hide)
-  --ti-upload-list-item-progress-top: 22px;
+  --ti-upload-list-item-progress-top: calc(var(--ti-common-line-height-2) + 2px);
   // 非picturecard模式上传文件列表文本行高(new)
   --ti-upload-list-item-line-height: 1.8;
   // 非picturecard模式上传文件列表文本上外边距(new)
@@ -62,7 +64,7 @@
   // 上传文件列表项刷新图标右边距(hide)
   --ti-upload-list-svg-refresh-position-right: 28px;
   // 上传文件列表项删除图标右边距(hide)
-  --ti-upload-list-svg-close-position-right: 8px;
+  --ti-upload-list-svg-close-position-right: var(--ti-common-space-2x);
   // 照片墙上传列表项悬浮背景色(new)
   --ti-upload-list-picture-card-item-hover-bg-color: rgba(0, 0, 0, 0.5);
 }

packages/vue/src/upload-list/src/pc.vue

@@ -209,7 +209,7 @@
               :title="t('ui.fileUpload.reUploadFile')"
               @click="$emit('reUpload', file)"
             >
-              <icon-refres class="tiny-svg-size icon-refres" :fill="isEdm ? '#f5222d' : ''"></icon-refres>
+              <icon-refresh class="tiny-svg-size icon-refres" :fill="isEdm ? '#f5222d' : ''"></icon-refresh>
             </span>
             <span
               v-if="!disabled && listOption.showDel"
@@ -330,7 +330,7 @@ import {
   iconFileCloudupload,
   iconDownload,
   iconCueL,
-  iconRefres,
+  iconRefresh,
   iconOperationfaild,
   iconFullscreenLeft,
   iconRight,
@@ -369,7 +369,7 @@ export default defineComponent({
     IconFileCloudupload: iconFileCloudupload(),
     IconDownload: iconDownload(),
     IconCueL: iconCueL(),
-    IconRefres: iconRefres(),
+    IconRefresh: iconRefresh(),
     IconOperationfaild: iconOperationfaild(),
     IconFullscreenLeft: iconFullscreenLeft(),
     IconRight: iconRight(),