From 5768daa6120b912558cb9987b703fe6a9a529248 Mon Sep 17 00:00:00 2001 From: jiasy1616 <103417037+jiasy1616@users.noreply.github.com> Date: Fri, 31 May 2024 12:55:09 +0800 Subject: [PATCH] refactor(image): sfc to tsx (#1414) * perf(image): sfc to tsx * perf(image): sfc to tsx * fix: update snaps * test(image): update snapshot(#1410) --------- Co-authored-by: siyaojia --- .../__test__/__snapshots__/demo.test.jsx.snap | 64 ++-- .../__test__/__snapshots__/demo.test.jsx.snap | 4 +- .../__test__/__snapshots__/demo.test.jsx.snap | 12 +- .../__test__/__snapshots__/demo.test.jsx.snap | 8 +- .../__test__/__snapshots__/demo.test.jsx.snap | 4 +- .../__test__/__snapshots__/demo.test.jsx.snap | 4 +- .../__test__/__snapshots__/demo.test.jsx.snap | 12 +- .../__test__/__snapshots__/demo.test.jsx.snap | 180 +++++----- .../__test__/__snapshots__/demo.test.jsx.snap | 88 ++--- .../__snapshots__/index.test.jsx.snap | 4 +- src/image/__test__/index.test.jsx | 4 +- src/image/image.tsx | 121 +++++++ src/image/image.vue | 121 ------- src/image/index.ts | 2 +- .../__test__/__snapshots__/demo.test.jsx.snap | 4 +- .../__test__/__snapshots__/demo.test.jsx.snap | 4 +- .../__test__/__snapshots__/demo.test.jsx.snap | 4 +- src/result/__test__/index.test.jsx | 3 +- .../__test__/__snapshots__/demo.test.jsx.snap | 312 +++++++++--------- .../__test__/__snapshots__/demo.test.jsx.snap | 4 +- .../__test__/__snapshots__/demo.test.jsx.snap | 32 +- 21 files changed, 495 insertions(+), 496 deletions(-) create mode 100644 src/image/image.tsx delete mode 100644 src/image/image.vue diff --git a/src/avatar/__test__/__snapshots__/demo.test.jsx.snap b/src/avatar/__test__/__snapshots__/demo.test.jsx.snap index c0d9b02af..36ddb8ec1 100644 --- a/src/avatar/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/avatar/__test__/__snapshots__/demo.test.jsx.snap @@ -58,7 +58,7 @@ exports[`Avatar > Avatar actionVue demo works fine 1`] = ` - + Avatar actionVue demo works fine 1`] = ` - + Avatar actionVue demo works fine 1`] = ` - + Avatar actionVue demo works fine 1`] = ` - + Avatar actionVue demo works fine 1`] = ` - + Avatar badgeAvatarVue demo works fine 1`] = ` - + Avatar exhibitionVue demo works fine 1`] = ` - + Avatar exhibitionVue demo works fine 1`] = ` - + Avatar exhibitionVue demo works fine 1`] = ` - + Avatar exhibitionVue demo works fine 1`] = ` - + Avatar exhibitionVue demo works fine 1`] = ` - + Avatar imageAvatarVue demo works fine 1`] = ` - + Avatar imageAvatarVue demo works fine 1`] = ` - + Avatar mobileVue demo works fine 1`] = ` - + Avatar mobileVue demo works fine 1`] = ` - + Avatar mobileVue demo works fine 1`] = ` - + Avatar mobileVue demo works fine 1`] = ` - + Avatar mobileVue demo works fine 1`] = ` - + Avatar mobileVue demo works fine 1`] = ` - + Avatar mobileVue demo works fine 1`] = ` - + Avatar mobileVue demo works fine 1`] = ` - + Avatar mobileVue demo works fine 1`] = ` - + Avatar mobileVue demo works fine 1`] = ` - + Avatar mobileVue demo works fine 1`] = ` - + Avatar mobileVue demo works fine 1`] = ` - + Avatar mobileVue demo works fine 1`] = ` - + Avatar mobileVue demo works fine 1`] = ` - + 示例图片 Avatar mobileVue demo works fine 1`] = ` - + 示例图片 Avatar mobileVue demo works fine 1`] = ` - + 示例图片 Avatar sizeVue demo works fine 1`] = ` - + 示例图片 Avatar sizeVue demo works fine 1`] = ` - + 示例图片 Avatar sizeVue demo works fine 1`] = ` - + 示例图片 Cell mobileVue demo works fine 1`] = ` - + Cell multipleVue demo works fine 1`] = ` - + ConfigProvider mobileVue demo works fine 1`] = ` - + ConfigProvider mobileVue demo works fine 1`] = ` - + ConfigProvider mobileVue demo works fine 1`] = ` - + ConfigProvider uploadEnVue demo works fine 1`] = ` - + ConfigProvider uploadEnVue demo works fine 1`] = ` - + ConfigProvider uploadEnVue demo works fine 1`] = ` - + Dialog imageDialogVue demo works fine 1`] = ` - + Dialog imageDialogVue demo works fine 1`] = ` - + Dialog mobileVue demo works fine 1`] = ` - + Dialog mobileVue demo works fine 1`] = ` - + Empty imageEmptyVue demo works fine 1`] = ` - + Empty mobileVue demo works fine 1`] = ` - + Footer logoVue demo works fine 1`] = ` - + Footer mobileVue demo works fine 1`] = ` - + Form horizontalVue demo works fine 1`] = ` - + Form horizontalVue demo works fine 1`] = ` - + Form mobileVue demo works fine 1`] = ` - + Form mobileVue demo works fine 1`] = ` - + Form verticalVue demo works fine 1`] = ` - + Form verticalVue demo works fine 1`] = ` - + Grid badgeVue demo works fine 1`] = ` - + Grid badgeVue demo works fine 1`] = ` - + Grid badgeVue demo works fine 1`] = ` - + Grid badgeVue demo works fine 1`] = ` - + Grid baseVue demo works fine 1`] = ` - + Grid baseVue demo works fine 1`] = ` - + Grid baseVue demo works fine 1`] = ` - + Grid baseVue demo works fine 1`] = ` - + Grid baseVue demo works fine 1`] = ` - + Grid baseVue demo works fine 1`] = ` - + Grid baseVue demo works fine 1`] = ` - + Grid baseVue demo works fine 1`] = ` - + Grid baseVue demo works fine 1`] = ` - + Grid baseVue demo works fine 1`] = ` - + Grid baseVue demo works fine 1`] = ` - + Grid baseVue demo works fine 1`] = ` - + Grid borderedVue demo works fine 1`] = ` - + Grid borderedVue demo works fine 1`] = ` - + Grid borderedVue demo works fine 1`] = ` - + Grid borderedVue demo works fine 1`] = ` - + Grid borderedVue demo works fine 1`] = ` - + Grid borderedVue demo works fine 1`] = ` - + Grid borderedVue demo works fine 1`] = ` - + Grid borderedVue demo works fine 1`] = ` - + Grid cardVue demo works fine 1`] = ` - + Grid cardVue demo works fine 1`] = ` - + Grid cardVue demo works fine 1`] = ` - + Grid cardVue demo works fine 1`] = ` - + Grid cardVue demo works fine 1`] = ` - + Grid cardVue demo works fine 1`] = ` - + Grid descVue demo works fine 1`] = ` - + Grid descVue demo works fine 1`] = ` - + Grid descVue demo works fine 1`] = ` - + Grid descVue demo works fine 1`] = ` - + Grid descVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid mobileVue demo works fine 1`] = ` - + Grid scrollVue demo works fine 1`] = ` - + Grid scrollVue demo works fine 1`] = ` - + Grid scrollVue demo works fine 1`] = ` - + Grid scrollVue demo works fine 1`] = ` - + Grid scrollVue demo works fine 1`] = ` - + Grid scrollVue demo works fine 1`] = ` - + Grid scrollVue demo works fine 1`] = ` - + Grid scrollVue demo works fine 1`] = ` - + Grid scrollVue demo works fine 1`] = ` - + Grid scrollVue demo works fine 1`] = ` - + Image baseVue demo works fine 1`] = ` - + Image baseVue demo works fine 1`] = ` - + Image baseVue demo works fine 1`] = ` - + Image baseVue demo works fine 1`] = ` - + Image baseVue demo works fine 1`] = ` - + Image mobileVue demo works fine 1`] = ` - + Image mobileVue demo works fine 1`] = ` - + Image mobileVue demo works fine 1`] = ` - + Image mobileVue demo works fine 1`] = ` - + Image mobileVue demo works fine 1`] = ` - + Image mobileVue demo works fine 1`] = ` - + Image mobileVue demo works fine 1`] = ` - + Image mobileVue demo works fine 1`] = ` - + Image mobileVue demo works fine 1`] = ` - + Image mobileVue demo works fine 1`] = ` - + Image mobileVue demo works fine 1`] = ` - + Image mobileVue demo works fine 1`] = ` - + Image mobileVue demo works fine 1`] = ` - + Image mobileVue demo works fine 1`] = ` - + Image mobileVue demo works fine 1`] = ` - + Image mobileVue demo works fine 1`] = ` - + Image mobileVue demo works fine 1`] = ` - + Image mobileVue demo works fine 1`] = ` - + 一张图片 Image mobileVue demo works fine 1`] = ` - + Image mobileVue demo works fine 1`] = ` - + Image mobileVue demo works fine 1`] = ` - + Image mobileVue demo works fine 1`] = ` - + Image positionVue demo works fine 1`] = ` - + Image positionVue demo works fine 1`] = ` - + Image positionVue demo works fine 1`] = ` - + Image positionVue demo works fine 1`] = ` - + Image positionVue demo works fine 1`] = ` - + Image positionVue demo works fine 1`] = ` - + Image positionVue demo works fine 1`] = ` - + Image positionVue demo works fine 1`] = ` - + Image positionVue demo works fine 1`] = ` - + Image positionVue demo works fine 1`] = ` - + Image shapeVue demo works fine 1`] = ` - + Image shapeVue demo works fine 1`] = ` - + Image shapeVue demo works fine 1`] = ` - + 一张图片 Image statusVue demo works fine 1`] = ` - + Image statusVue demo works fine 1`] = ` - + Image statusVue demo works fine 1`] = ` - + Image statusVue demo works fine 1`] = ` - + props > : lazy 1`] = `
- + - + { const wrapper = mount(() => ); await nextTick(); const $image = wrapper.find(`.${name}__img`); - expect(wrapper.find(`.${name}__mask`).exists()).toBeTruthy(); + expect(wrapper.find(`.${name}__mask`).exists()).toBeFalsy(); // 触发 IntersectionObserver , 但图片加载完成不会触发 load 回调, $image.trigger('resize'); await nextTick(); diff --git a/src/image/image.tsx b/src/image/image.tsx new file mode 100644 index 000000000..2358b852c --- /dev/null +++ b/src/image/image.tsx @@ -0,0 +1,121 @@ +import { ref, computed, defineComponent, watchEffect } from 'vue'; +import { useIntersectionObserver } from '@vueuse/core'; +import { CloseIcon } from 'tdesign-icons-vue-next'; + +import Loading from '../loading'; +import config from '../config'; +import { useTNodeJSX } from '../hooks/tnode'; +import { usePrefixClass } from '../hooks/useClass'; + +import props from './props'; + +const { prefix } = config; +const name = `${prefix}-image`; + +export default defineComponent({ + name, + components: { CloseIcon, Loading }, + props, + setup(props, context) { + const imageClass = usePrefixClass('image'); + const renderTNodeJSX = useTNodeJSX(); + + // 默认loading和error状态展示，slot支持Node和Function + const closeIcon = ; + const LoadingIcon = ; + + // 记录图片的loading、error状态 + const isLoading = ref(true); + const isError = ref(false); + + // 图片自定义样式 + const imageStyles = computed(() => ({ + objectFit: props.fit, + objectPosition: props.position, + })); + const imageClasses = computed(() => ({ + [`${imageClass.value}`]: true, + [`${imageClass.value}--${props.shape}`]: true, + })); + + // 图片懒加载 + const imageDOM = ref(); + const realSrc = ref(''); + + watchEffect(() => { + realSrc.value = props.lazy ? '' : props.src; + }); + + const { stop } = useIntersectionObserver(imageDOM, ([{ isIntersecting }], observerElement) => { + if (isIntersecting && props.lazy) { + // 停止监听 + stop(); + realSrc.value = props.src; + } + }); + + // 图片加载完成回调 + const handleImgLoadCompleted = (e: Event) => { + props.onLoad?.({ e }); + isLoading.value = false; + }; + + // 图片加载失败回调 + const handleImgLoadError = (e: Event) => { + if (realSrc.value === '') { + return; + } + props.onError?.({ e }); + isLoading.value = false; + isError.value = true; + }; + + const maskContent = computed(() => { + const statusContent = () => { + if (context.slots?.loading && isLoading.value) { + return renderTNodeJSX('loading'); + } + if (!context.slots?.loading && isLoading.value) { + return LoadingIcon; + } + if (context.slots?.error && isError.value) { + return renderTNodeJSX('error'); + } + if (!context.slots?.error && isError.value) { + return closeIcon; + } + return false; + }; + const node = () => { + if (isLoading.value || isError.value) { + if (props.lazy && realSrc.value === '') { + return; + } + return
{statusContent()}
; + } + }; + return node(); + }); + + return () => { + return ( +
+ {maskContent.value} + + {props.srcset && + Object.entries(props.srcset).map((item, index) => )} + {props.alt} + +
+ ); + }; + }, +}); diff --git a/src/image/image.vue b/src/image/image.vue deleted file mode 100644 index a22e2e2af..000000000 --- a/src/image/image.vue +++ /dev/null @@ -1,121 +0,0 @@ - - - diff --git a/src/image/index.ts b/src/image/index.ts index 1e8b9b60b..f4b334874 100644 --- a/src/image/index.ts +++ b/src/image/index.ts @@ -1,4 +1,4 @@ -import Image from './image.vue'; +import Image from './image'; import { withInstall, WithInstallType } from '../shared'; import './style'; diff --git a/src/input/__test__/__snapshots__/demo.test.jsx.snap b/src/input/__test__/__snapshots__/demo.test.jsx.snap index 4edf10075..0ce179493 100644 --- a/src/input/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/input/__test__/__snapshots__/demo.test.jsx.snap @@ -1232,7 +1232,7 @@ exports[`Input > Input mobileVue demo works fine 1`] = `
- + Input specialVue demo works fine 1`] = ` - + Navbar imgVue demo works fine 1`] = ` - + Navbar mobileVue demo works fine 1`] = ` - + Result customVue demo works fine 1`] = ` - + Result mobileVue demo works fine 1`] = ` - + h(AppIcon); const imageUrl = 'https://tdesign.gtimg.com/mobile/demos/avatar_1.png'; @@ -51,7 +51,6 @@ describe('Result.vue', () => { const wrapper3 = mount(() => ); const wrapper4 = mount(() => ); - expect(wrapper1.classes()).toContain('t-result--theme-success'); expect(wrapper1.findComponent(CheckCircleIcon).exists()).toBeTruthy(); expect(wrapper2.classes()).toContain('t-result--theme-warning'); diff --git a/src/side-bar/__test__/__snapshots__/demo.test.jsx.snap b/src/side-bar/__test__/__snapshots__/demo.test.jsx.snap index 607cf4491..5cb35f2ca 100644 --- a/src/side-bar/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/side-bar/__test__/__snapshots__/demo.test.jsx.snap @@ -218,7 +218,7 @@ exports[`SideBar > SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar baseVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar customVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar switchVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + SideBar withIconVue demo works fine 1`] = ` - + Steps mobileVue demo works fine 1`] = ` - + 图标 Steps verticalVue demo works fine 1`] = ` - + 图标 Upload customVue demo works fine 1`] = ` - + Upload customVue demo works fine 1`] = ` - + Upload mobileVue demo works fine 1`] = ` - + Upload mobileVue demo works fine 1`] = ` - + Upload mobileVue demo works fine 1`] = ` - + Upload mobileVue demo works fine 1`] = ` - + Upload mobileVue demo works fine 1`] = ` - + Upload mobileVue demo works fine 1`] = ` - + Upload mobileVue demo works fine 1`] = ` - + Upload mobileVue demo works fine 1`] = ` - + Upload multipleVue demo works fine 1`] = ` - + Upload multipleVue demo works fine 1`] = ` - + Upload multipleVue demo works fine 1`] = ` - + Upload statusVue demo works fine 1`] = ` - + Upload statusVue demo works fine 1`] = ` - + Upload statusVue demo works fine 1`] = ` - +