Merge pull request #753 from thundersdata-frontend/feat/lego

fix: 乐高组件的一些优化
thundersdata-frontend · Nov 2, 2023 · 3028d45 · 3028d45
2 parents 3c544e0 + fdb209e
commit 3028d45
Show file tree

Hide file tree

Showing 11 changed files with 26 additions and 30 deletions.
diff --git a/.changeset/dull-fishes-compete.md b/.changeset/dull-fishes-compete.md
@@ -0,0 +1,5 @@
+---
+'@td-design/lego': patch
+---
+
+fix: lego组件的一些优化
diff --git a/packages/lego/example/ModalDemo/demo1.tsx b/packages/lego/example/ModalDemo/demo1.tsx
@@ -9,8 +9,7 @@ export default () => {
   return (
     <>
       <Button onClick={() => setVisible(true)}>显示弹窗</Button>
-      <Modal visible={visible} onClose={() => setVisible(false)} >
-      </Modal>
+      <Modal visible={visible} onClose={() => setVisible(false)} />
     </>
   );
 };
diff --git a/packages/lego/example/ProgressDemo/demo2.tsx b/packages/lego/example/ProgressDemo/demo2.tsx
@@ -23,7 +23,6 @@ export default () => {
             { name: '成都', value: 38 },
           ]}
           inModal
-          style={{ height: 500 }}
         />
       </Modal>
     </>

diff --git a/packages/lego/example/RadarDemo/demo2.tsx b/packages/lego/example/RadarDemo/demo2.tsx
@@ -37,7 +37,6 @@ export default () => {
       >
         <Radar
           inModal
-          style={{ height: 500 }}
           seriesData={seriesData}
           indicatorData={indicatorData}
         />

diff --git a/packages/lego/src/data-show/assets/rectangle.svg b/packages/lego/src/data-show/assets/rectangle.svg
diff --git a/packages/lego/src/data-show/index.less b/packages/lego/src/data-show/index.less
@@ -24,7 +24,7 @@
     justify-content: center;
     width: 156px;
     height: 65px;
-    background-image: url('./assets/rectangle.svg');
+    background-image: url('./assets/rectangle.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
 

diff --git a/packages/lego/src/img-pie/index.less b/packages/lego/src/img-pie/index.less
@@ -3,7 +3,7 @@
 @{prefix}-image {
   position: absolute;
   top: 50%;
-  left: 50%;
+  left: 49.5%;
   transform: translate(-50%, -50%);
 }
 

diff --git a/packages/lego/src/progress/index.tsx b/packages/lego/src/progress/index.tsx
@@ -47,7 +47,10 @@ export interface ProgressProps {
  * 进度条图，对应Figma其他图6
  */
 export default forwardRef<ReactEcharts, ProgressProps>(
-  ({ name, data, style, config, inModal = false, onEvents, renderer = 'canvas' }, ref) => {
+  (
+    { name, data, style = { width: 300, height: 300 }, config, inModal = false, onEvents, renderer = 'canvas' },
+    ref
+  ) => {
     const theme = useTheme();
     const baseChartConfig = useBaseChartConfig(inModal);
     const baseBarConfig = useBaseBarConfig(inModal);

diff --git a/packages/lego/src/radar/index.tsx b/packages/lego/src/radar/index.tsx
@@ -42,7 +42,7 @@ export default forwardRef<ReactEcharts, RadarProps>(
           max: 100,
         },
       ],
-      style,
+      style = { width: 500, height: 500 },
       config,
       inModal = false,
       radarColors = [],

diff --git a/packages/lego/src/swiper/index.less b/packages/lego/src/swiper/index.less
@@ -1,9 +1,10 @@
 .td-lego-swiper-container {
-  .swiper-container {
-    width: 100%;
-    min-height: 100px;
-    margin-top: -20px;
-  }
+  width: 100%;
+  min-height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   .swiper-slide {
     display: -webkit-box;
     display: -ms-flexbox;

diff --git a/packages/lego/src/swiper/index.tsx b/packages/lego/src/swiper/index.tsx
@@ -27,6 +27,7 @@ export interface CustomSwiperProps {
 const CustomSwiper = forwardRef<any, CustomSwiperProps>(
   ({ imgs = [], style, imgNumPerSlide = 1, autoplay, list = [], pagination }, ref) => {
     const auto = autoplay?.delay ? { pauseOnMouseEnter: true, disableOnInteraction: false, ...autoplay } : false;
+    const paddingBottom = pagination === false ? 0 : 40;
 
     const swiperInstance = useSwiper();
 
@@ -75,13 +76,17 @@ const CustomSwiper = forwardRef<any, CustomSwiperProps>(
                       style={{
                         width: 692,
                         height: 297,
-                        paddingBottom: 40,
+                        paddingBottom,
                         ...style,
                       }}
                     />
                   </SwiperSlide>
                 ))
-              : list.map((ele, index) => <SwiperSlide key={index}>{ele}</SwiperSlide>)}
+              : list.map((ele, index) => (
+                  <SwiperSlide key={index} style={{ paddingBottom, ...style }}>
+                    {ele}
+                  </SwiperSlide>
+                ))}
           </Swiper>
         ) : null}
       </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,7 +23,6 @@ export default () => { @@
                 { name: '成都', value: 38 },
               ]}
               inModal
-              style={{ height: 500 }}
             />
           </Modal>
         </>
@@ Expand Down @@