feat: 轮播图组件支持点击小圆点切换 (#3710)

* feat: 轮播图组件支持点击小圆点切换

* 去掉 console.log

scss/_properties.scss

@@ -470,7 +470,7 @@
   --Carousel-bg: #f6f8f8;
   --Carousel-dot-borderRadius: #{px2rem(4px)};
   --Carousel-dot-height: #{px2rem(8px)};
-  --Carousel-dot-margin: #{px2rem(7px)} var(--gap-xs);
+  --Carousel-dot-margin: #{px2rem(8px)} var(--gap-xs);
   --Carousel-dot-width: #{px2rem(8px)};
   --Carousel-height: #{px2rem(200px)};
   --Carousel-imageDescription-bottom: #{px2rem(25px)};

scss/components/_carousel.scss

@@ -149,6 +149,7 @@
     text-align: center;
 
     .#{$ns}Carousel-dot {
+      cursor: pointer;
       display: inline-block;
       height: var(--Carousel-dot-width);
       width: var(--Carousel-dot-height);

src/renderers/Carousel.tsx

@@ -278,6 +278,13 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
     clearTimeout(this.durationTimeout as number);
   }
 
+  @autobind
+  changeSlide(index: number) {
+    this.setState({
+      current: index
+    });
+  }
+
   renderDots() {
     const {classnames: cx} = this.props;
     const {current, options} = this.state;
@@ -290,6 +297,7 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
         {Array.from({length: options.length}).map((_, i) => (
           <span
             key={i}
+            onClick={() => this.changeSlide(i)}
             className={cx('Carousel-dot', current === i ? 'is-active' : '')}
           />
         ))}