Merge pull request #903 from YYForReal/dev-omi-template-edu-3

feat(omi-templates): finish education templates

packages/omi-templates/package.json

@@ -20,6 +20,7 @@
     "echarts": "^5.5.0",
     "markdown-it": "^14.0.0",
     "omi": "7.6.7",
+    "omi-ripple": "^0.1.2",
     "omi-router": "latest",
     "omi-suspense": "latest",
     "prismjs": "^1.29.0",

packages/omi-templates/src/components/omiu/swiper/api.md

@@ -1,34 +1,37 @@
 ## Swiper Props
 
-| Name       | Type    | Default      | Description                                      |
-| ---------- | ------- | ------------ | ------------------------------------------------ |
-| direction  | string  | 'horizontal' | Direction of the swiper (vertical or horizontal) |
-| loop       | boolean | true         | Whether the swiper should loop                   |
-| index      | number  | 0            | Initial index of the swiper                      |
-| navigation | boolean | true         | Whether to show navigation buttons               |
-| pagination | boolean | true         | Whether to show pagination                       |
+| Name          | Type    | Default      | Description                                      |
+| ------------- | ------- | ------------ | ------------------------------------------------ |
+| direction     | string  | 'horizontal' | Direction of the swiper (vertical or horizontal) |
+| loop          | boolean | true         | Whether the swiper should loop                   |
+| index         | number  | 0            | Initial index of the swiper                      |
+| navigation    | boolean | true         | Whether to show navigation buttons               |
+| pagination    | boolean | true         | Whether to show pagination                       |
 | slidesPerView | string or number | "auto" | Number of slides to show per view. "auto" will automatically adjust the number of slides based on the viewport size. |
-| spaceBetween | number | 30 | Space between each slide in pixels. |
-| autoPlay | boolean | true | Whether to enable auto play. |
+| spaceBetween  | number  | 30           | Space between each slide in pixels.              |
+| autoPlay      | boolean | true         | Whether to enable auto play.                     |
 
 ## Swiper Events
 
-| Name   | Parameters               | Description                        |
-| ------ | ------------------------ | ---------------------------------- |
-| change | evt: CustomEvent<number> | Event triggered when slide changes |
+| Name   | Parameters                   | Description                           |
+| ------ | ---------------------------- | ------------------------------------- |
+| change | evt: CustomEvent<number>     | Event triggered when slide changes    |
 
 ## Swiper 属性
 
-| Name       | Type   | Default      | Description                 |
-| ---------- | ------ | ------------ | --------------------------- |
-| direction  | 字符串 | 'horizontal' | Swiper 的方向（垂直或水平） |
-| loop       | 布尔值 | true         | 是否启用 Swiper 循环播放    |
-| index      | 数字   | 0            | Swiper 的初始索引           |
-| navigation | 布尔值 | true         | 是否显示导航按钮            |
-| pagination | 布尔值 | true         | 是否显示分页器              |
+| 名称         | 类型    | 默认值       | 描述                                          |
+| ------------ | ------- | ------------ | --------------------------------------------- |
+| direction    | 字符串  | 'horizontal' | Swiper 的方向（垂直或水平）                   |
+| loop         | 布尔值  | true         | 是否启用 Swiper 循环播放                      |
+| index        | 数字    | 0            | Swiper 的初始索引                            |
+| navigation   | 布尔值  | true         | 是否显示导航按钮                             |
+| pagination   | 布尔值  | true         | 是否显示分页器                               |
+| slidesPerView| 字符串或数字 | "auto"    | 每视图显示的幻灯片数量。"auto" 根据视口大小自动调整幻灯片数量。 |
+| spaceBetween | 数字    | 30           | 每个幻灯片之间的间距（像素）。                 |
+| autoPlay     | 布尔值  | true         | 是否启用自动播放                              |
 
 ## Swiper 事件
 
-| Name   | Parameter                | Description            |
-| ------ | ------------------------ | ---------------------- |
-| change | evt: CustomEvent<number> | 幻灯片更改时触发的事件 |
+| 名称    | 参数                       | 描述                               |
+| ------ | -------------------------- | ---------------------------------- |
+| change | evt: CustomEvent<number>   | 幻灯片更改时触发的事件             |

packages/omi-templates/src/components/omiu/swiper/swiper.tsx

@@ -1,15 +1,19 @@
 import { tag, Component, classNames, OmiProps, bind, VNode } from 'omi'
-import { tailwind } from '@/tailwind'
 // import '../collapse/collapse'
 
 
 /**
  * copy from omiu/src/components/swiper
- * add Props . slidesPreView 、spaceBetween 、autoPlay
+ * Changes:
+ * 1. Added Props: slidesPreView, spaceBetween, autoPlay.
+ * 2. Added a timerId to store the ID of the autoplay interval.
+ * 3. Added startAutoplay method to start the autoplay with a default interval of 3 seconds.
+ * 4. Added pauseAutoplay method to pause the autoplay when the mouse hovers over the component.
+ * 5. Added resumeAutoplay method to resume the autoplay when the mouse leaves the component.
+ * 6. Added event listeners for mouseover and mouseleave to rootElement in the installed method.
+ * 7. Cleaned up the interval and event listeners in the uninstall method.
  */
 
-
-
 // https://swiperjs.com/get-started
 // import Swiper JS
 import Swiper from 'swiper'
@@ -23,7 +27,7 @@ interface Props {
   navigation?: boolean
   slidesPerView?: "auto" | number
   spaceBetween?: number,
-  autoplay?:  boolean
+  autoplay?: boolean 
 }
 
 const theme = {
@@ -34,14 +38,14 @@ const theme = {
 @tag('o-swiper')
 export class SwiperComponent extends Component<Props> {
   static css = [
-    tailwind,
     swiperStyle,
     `:host {
     display: block;
   }
   `,
   ]
   paginationDiv: any
+  timerId: NodeJS.Timeout | null = null // 定时器ID
 
   @bind
   onPreviusClick(evt: Event) {
@@ -79,7 +83,7 @@ export class SwiperComponent extends Component<Props> {
     pagination: true,
     slidesPerView: 1,
     spaceBetween: 30,
-    autoplay: 1000
+    autoplay: true
   }
 
   swiper: Swiper | null = null
@@ -92,7 +96,9 @@ export class SwiperComponent extends Component<Props> {
       initialSlide: this.props.index,
       slidesPerView: this.props.slidesPerView,
       spaceBetween:this.props.spaceBetween,
-      autoplay:this.props.autoplay
+      observer: true,
+      observeParents: true
+
       // And if we need scrollbar
       // scrollbar: {
       //   el: '.swiper-scrollbar',
@@ -110,6 +116,50 @@ export class SwiperComponent extends Component<Props> {
     this.swiper.on('slideChange', () => {
       this.setActiveButton(this.swiper!.realIndex)
     })
+
+    if (this.props.autoplay) {
+      this.startAutoplay()
+    }
+
+    // 自定义实现：随窗口大小动态设置同时展示的slide，
+    // 原swiper组件会因为封装多的一层swiper-wrapper影响判断swiper-slide的宽度
+    const updateSlidesPerView = () => {
+      let slidesPerView = 1
+      if (window.innerWidth >= 1440) {
+        slidesPerView = 3
+      } else if (window.innerWidth >= 768) {
+        slidesPerView = 2
+      }
+      if (this.swiper){
+        this.swiper.params.slidesPerView = slidesPerView
+        this.swiper.update()  
+      }
+    }
+
+    if (this.props.slidesPerView === 'auto') {
+      updateSlidesPerView()
+      window.addEventListener('resize', updateSlidesPerView)
+    }
+
+    this.rootElement!.addEventListener('mouseover', this.pauseAutoplay)
+    this.rootElement!.addEventListener('mouseleave', this.resumeAutoplay)
+  }
+
+  startAutoplay() {
+    this.timerId = setInterval(() => {
+      this.swiper?.slideNext()
+    }, 3000) // 每3秒自动轮播
+  }
+
+  pauseAutoplay = () => {
+    if (this.timerId) {
+      clearInterval(this.timerId)
+      this.timerId = null
+    }
+  }
+
+  resumeAutoplay = () => {
+    this.startAutoplay()
   }
 
   setActiveButton(index: number) {
@@ -124,6 +174,15 @@ export class SwiperComponent extends Component<Props> {
     }
   }
 
+  // 在组件销毁时清除定时器和事件监听器
+  uninstall() {
+    if (this.timerId) {
+      clearInterval(this.timerId)
+    }
+    this.rootElement!.removeEventListener('mouseover', this.pauseAutoplay)
+    this.rootElement!.removeEventListener('mouseleave', this.resumeAutoplay)
+  }
+
   // 不需要更新，不然状态不一致
   receiveProps() {
     return false
@@ -191,19 +250,18 @@ export class SwiperComponent extends Component<Props> {
             ref={(e) => {
               this.paginationDiv = e
             }}
-            class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0"
+            class="absolute bottom-0 left-0 right-0 z-[1] m-0 flex list-none justify-center p-0"
           >
-            {props.children ? props.children.map((child, index) => {
+            {(props.children as VNode[])?.map((_child, index) => {
               return (
                 <button
-                  onClick={(evt) => this.onPaginationClick(index, evt)}
-                  type="button"
-                  class={classNames(theme.paginationButton, {
-                    'opacity-50': props.index !== index,
-                  })}
+                  onClick={(evt) => {
+                    this.onPaginationClick(index, evt)
+                  }}
+                  class={theme.paginationButton}
                 ></button>
               )
-            }) : null }
+            })}
           </div>
         )}
       </div>