fix(file-upload): [file-upload] 根据规范对齐意见完善新规范适配

Author: chenxi-20

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

@@ -211,6 +211,10 @@
       > &-delete
       > .@{svg-prefix-cls}.@{svg-prefix-cls}-size.icon-delete {
       fill: var(--ti-upload-list-svg-close-icon-color);
+
+      &:hover {
+        fill: var(--ti-upload-list-svg-close-hover-icon-color);
+      }
     }
 
     .@{svg-prefix-cls} {
@@ -220,33 +224,26 @@
       }
 
       &.icon-close {
-        display: none;
-        position: absolute;
-        top: 50%;
         right: var(--ti-upload-list-svg-close-position-right);
-        transform: translateY(-50%);
-        fill: var(--ti-upload-list-svg-close-icon-color);
-        font-size: var(--ti-upload-list-svg-icon-font-size);
-        opacity: 0.75;
-        cursor: pointer;
+      }
 
-        &:hover {
-          opacity: 1;
-        }
+      &.icon-refres {
+        right: var(--ti-upload-list-svg-refresh-position-right);
       }
 
+      &.icon-close,
       &.icon-refres {
         display: none;
         position: absolute;
         top: 50%;
-        right: var(--ti-upload-list-svg-refresh-position-right);
         transform: translateY(-50%);
         fill: var(--ti-upload-list-svg-close-icon-color);
         font-size: var(--ti-upload-list-svg-icon-font-size);
         opacity: 0.75;
         cursor: pointer;
 
         &:hover {
+          fill: var(--ti-upload-list-svg-close-hover-icon-color);
           opacity: 1;
         }
       }
@@ -294,8 +291,8 @@
 
   &__icon-operationfaild {
     fill: #f23030;
-    margin-right: 9px;
-    padding-left: 4px;
+    margin-right: 8px;
+    margin-left: 4px;
     font-size: 16px;
   }
 
@@ -399,7 +396,7 @@
           background-color: #fce3e1;
 
           & span .tiny-svg {
-            fill: #191919;
+            fill: var(--ti-upload-list-svg-close-hover-icon-color);
           }
         }
       }
@@ -480,7 +477,7 @@
         cursor: pointer;
 
         & + span {
-          margin-left: 15px;
+          margin-left: 16px;
         }
       }
 

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

@@ -8,9 +8,10 @@ export const tinyUploadListSmbTheme = {
   'ti-upload-list-picture-card-item-margin-right': 'var(--ti-common-space-4x)',
   '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-item-hover-background-color': 'var(--ti-common-color-bg-normal)',
   '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'
+  'ti-upload-list-picture-success-border-weight': '0',
+  'ti-upload-list-item-text-color': 'var(--ti-common-color-text-secondary)'
 }

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

@@ -27,8 +27,10 @@
   --ti-upload-list-item-name-icon-color: var(--ti-common-color-info, #252b3a);
   // 上传文件列表项前置图标尺寸
   --ti-upload-list-item-name-icon-font-size: var(--ti-common-font-size-2, 16px);
-  // 上传文件列表项删除图标色
-  --ti-upload-list-svg-close-icon-color: var(--ti-common-color-icon-normal);
+  // 上传文件列表项右侧图标色
+  --ti-upload-list-svg-close-icon-color: var(--ti-common-color-icon-normal, #575d6c);
+  // 上传文件列表项右侧悬浮图标色
+  --ti-upload-list-svg-close-hover-icon-color: var(--ti-common-color-icon-hover, #5e7ce0);
   // 上传文件列表项图标尺寸
   --ti-upload-list-svg-icon-font-size: var(--ti-common-font-size-base, 12px);
   // 上传文件列表项成功图标尺寸