feat(fileupload): [file-upload] 修复上传组件新规范检视 pictrue-card问题

Author: chenxi-20

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.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

@@ -387,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

@@ -6,10 +6,11 @@ export const tinyUploadListSmbTheme = {
   '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': '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-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);
   // 照片墙上传列表项右上角图标填充色