fix(upload): 上传组件图片展示样式优化 (#3429)

* fix(upload): 上传组件图片展示样式优化 * chore: update snapshot --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Tencent · Dec 20, 2024 · 2994ef8 · 2994ef8
1 parent d313fa9
commit 2994ef8
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 14 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/upload/__tests__/__snapshots__/vitest-upload.test.jsx.snap b/src/upload/__tests__/__snapshots__/vitest-upload.test.jsx.snap
@@ -904,7 +904,7 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
             >
               <img
                 alt=""
-                class="t-image t-image--fit-fill t-image--position-center"
+                class="t-image t-image--fit-contain t-image--position-center"
                 src=""
               />
               <div
@@ -984,7 +984,7 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
             >
               <img
                 alt=""
-                class="t-image t-image--fit-fill t-image--position-center"
+                class="t-image t-image--fit-contain t-image--position-center"
                 src="https://img1.txt"
               />
               <div
@@ -1087,7 +1087,7 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
             >
               <img
                 alt=""
-                class="t-image t-image--fit-fill t-image--position-center"
+                class="t-image t-image--fit-contain t-image--position-center"
                 src="https://img2.txt"
               />
               <div

diff --git a/src/upload/themes/image-card.tsx b/src/upload/themes/image-card.tsx
@@ -71,7 +71,7 @@ export default defineComponent({
       const { BrowseIcon, DeleteIcon } = this.icons;
       return (
         <div class={`${this.classPrefix}-upload__card-content ${this.classPrefix}-upload__card-box`}>
-          <Image class={`${this.classPrefix}-upload__card-image`} src={file.url || file.raw} error="" />
+          <Image class={`${this.classPrefix}-upload__card-image`} src={file.url || file.raw} error="" fit="contain" />
           <div class={`${this.classPrefix}-upload__card-mask`}>
             <span class={`${this.classPrefix}-upload__card-mask-item`} onClick={(e: MouseEvent) => e.stopPropagation()}>
               <ImageViewer

diff --git a/src/upload/themes/multiple-flow-list.tsx b/src/upload/themes/multiple-flow-list.tsx
@@ -206,7 +206,13 @@ export default defineComponent({
               </div>
             )}
             {(['waiting', 'success'].includes(file.status) || (!file.status && file.url)) && (
-              <Image class={`${this.uploadPrefix}__card-image`} src={file.url || file.raw} error="" loading="" />
+              <Image
+                class={`${this.uploadPrefix}__card-image`}
+                src={file.url || file.raw}
+                error=""
+                loading=""
+                fit="contain"
+              />
             )}
             <div class={`${this.uploadPrefix}__card-mask`}>
               {(file.url || file.raw) && !['progress', 'fail'].includes(file.status) && (

diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
@@ -53539,7 +53539,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/disabled.vue 1`] = `
                       >
                         <img
                           alt=""
-                          class="t-image t-image--fit-fill t-image--position-center"
+                          class="t-image t-image--fit-contain t-image--position-center"
                           src="https://tdesign.gtimg.com/site/avatar.jpg"
                         />
                         <div
@@ -136749,7 +136749,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/image.vue 1`] = `
               >
                 <img
                   alt=""
-                  class="t-image t-image--fit-fill t-image--position-center"
+                  class="t-image t-image--fit-contain t-image--position-center"
                   src="https://tdesign.gtimg.com/demo/demo-image-1.png"
                 />
                 <div
@@ -137050,7 +137050,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/img-flow-list.vue 1`
                 >
                   <img
                     alt=""
-                    class="t-image t-image--fit-fill t-image--position-center"
+                    class="t-image t-image--fit-contain t-image--position-center"
                     src="https://tdesign.gtimg.com/demo/demo-image-1.png"
                   />
                   <div
@@ -137253,7 +137253,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/img-flow-list.vue 1`
                 >
                   <img
                     alt=""
-                    class="t-image t-image--fit-fill t-image--position-center"
+                    class="t-image t-image--fit-contain t-image--position-center"
                     src="https://tdesign.gtimg.com/demo/demo-image-1.png"
                   />
                   <div
@@ -137356,7 +137356,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/img-flow-list.vue 1`
                 >
                   <img
                     alt=""
-                    class="t-image t-image--fit-fill t-image--position-center"
+                    class="t-image t-image--fit-contain t-image--position-center"
                     src="https://tdesign.gtimg.com/demo/demo-image-1.png"
                   />
                   <div
+4 −0		docs/mobile/api_v2/search.en-US.md
+4 −0		docs/mobile/api_v2/search.md
+11 −0		docs/web/api/tree.en-US.md
+12 −0		docs/web/api/tree.md
+1 −1		js/date-picker/utils.ts
+64 −11		js/tree-v1/tree-node.ts
+25 −6		js/tree-v1/tree-store.ts
+20 −0		style/mobile/components/search/v2/_index.less
+3 −0		style/mobile/components/search/v2/_var.less
+2 −4		style/web/components/avatar/_index.less
+1 −0		style/web/components/checkbox/_index.less
+6 −16		style/web/components/dialog/_index.less
+1 −2		style/web/components/slider/_index.less
+13 −0		style/web/components/steps/_mixin.less
+0 −1		style/web/components/textarea/_index.less
+2 −0		style/web/components/upload/_index.less