@gmfe/react 2.14.30-alpha.0 → 2.14.30

package/README.md

@@ -0,0 +1,179 @@
+# @gmfe/react
+
+## 简介
+
+`@gmfe/react` 是 gmfe 组件库的核心 UI 包，提供 70+ 个 React 组件，涵盖表单、布局、导航、反馈、数据展示等常用场景。是所有其他 gmfe 包的基础依赖。
+
+## 安装
+
+```bash
+npm install @gmfe/react
+```
+
+## 快速使用
+
+```jsx
+import { Button, Dialog, Form, Input, Select, Table } from '@gmfe/react'
+
+function App() {
+  return (
+    <Button type="primary" onClick={() => Dialog.alert('Hello!')}>
+      点击
+    </Button>
+  )
+}
+```
+
+## 组件列表
+
+### 表单组件
+
+| 组件 | 说明 |
+|------|------|
+| `Form` | 表单容器，支持校验、提交、重置 |
+| `FormItem` | 表单项，配合 Form 使用 |
+| `FormButton` | 表单按钮组 |
+| `FormBlock` | 表单块 |
+| `FormGroup` | 表单分组 |
+| `FormPanel` | 表单面板 |
+| `Input` | 文本输入框 |
+| `InputNumber` | 数字输入框 |
+| `InputNumberV2` | 数字输入框 V2 |
+| `Select` | 下拉选择框 |
+| `Option` | 选择框选项 |
+| `Checkbox` | 复选框 |
+| `CheckboxGroup` | 复选框组 |
+| `Radio` | 单选框 |
+| `RadioGroup` | 单选框组 |
+| `Switch` | 开关 |
+| `DatePicker` | 日期选择器 |
+| `DateRangePicker` | 日期范围选择器 |
+| `Calendar` | 日历 |
+| `TimeSpan` | 时间段 |
+| `TimeSpanPicker` | 时间段选择器 |
+| `Cascader` | 级联选择器 |
+| `CascaderSelect` | 级联选择（Select 形式） |
+| `ColorPicker` | 颜色选择器 |
+| `Uploader` | 文件上传器 |
+| `ImgUploader` | 图片上传器 |
+| `Validator` | 表单校验工具 |
+
+### 布局组件
+
+| 组件 | 说明 |
+|------|------|
+| `LayoutRoot` | 根布局容器 |
+| `Flex` | 弹性布局 |
+| `Col` | 栅格列 |
+| `Row` | 栅格行 |
+| `Divider` | 分割线 |
+| `Collapse` | 折叠面板 |
+
+### 导航组件
+
+| 组件 | 说明 |
+|------|------|
+| `Nav` | 导航栏 |
+| `Tabs` | 标签页 |
+| `Steps` | 步骤条 |
+| `Breadcrumb` | 面包屑（见 @gmfe/frame） |
+| `Pagination` | 分页器 |
+| `PaginationV2` | 分页器 V2 |
+| `PaginationText` | 文本分页器 |
+| `Dropper` | 下拉刷新 |
+
+### 反馈组件
+
+| 组件 | 说明 |
+|------|------|
+| `Dialog` | 对话框 |
+| `Modal` | 模态框 |
+| `RightSideModal` | 右侧模态框 |
+| `CleanModal` | 简洁模态框 |
+| `Drawer` | 抽屉 |
+| `Tip` | 轻提示 |
+| `ToolTip` | 文字提示 |
+| `Popover` | 气泡卡片 |
+| `Loading` | 加载中 |
+| `LoadingFullScreen` | 全屏加载 |
+| `LoadingChunk` | 区块加载 |
+| `Mask` | 遮罩层 |
+| `NProgress` | 顶部进度条 |
+| `Progress` | 进度条 |
+| `ProgressCircle` | 环形进度条 |
+
+### 数据展示
+
+| 组件 | 说明 |
+|------|------|
+| `Table` | 表格（见 @gmfe/table） |
+| `List` | 列表 |
+| `Tree` | 树形控件 |
+| `TreeV2` | 树形控件 V2 |
+| `Transfer` | 穿梭框 |
+| `TransferGroup` | 分组穿梭框 |
+| `TransferV2` | 穿梭框 V2 |
+| `Carousel` | 轮播图 |
+| `ImagePreview` | 图片预览 |
+| `PicturePreview` | 图片预览 V2 |
+| `LazyImg` | 图片懒加载 |
+| `FlipNumber` | 翻牌数字 |
+| `Price` | 价格展示 |
+| `LevelList` | 层级列表 |
+| `LevelSelect` | 层级选择 |
+| `TableSelect` | 表格选择 |
+| `Selection` | 选择组件 |
+| `Sheet` | 底部弹出表格 |
+| `SheetColumn` | Sheet 列 |
+| `SheetAction` | Sheet 操作 |
+| `SheetSelect` | Sheet 选择 |
+| `SheetBatchAction` | Sheet 批量操作 |
+| `Box` | 卡片容器 |
+| `BoxForm` | 表单卡片 |
+| `BoxTable` | 表格卡片 |
+| `BoxPanel` | 面板卡片 |
+| `Badge` | 标记 |
+| `Tag` | 标签 |
+| `EditableText` | 可编辑文本 |
+
+### 操作组件
+
+| 组件 | 说明 |
+|------|------|
+| `Button` | 按钮 |
+| `DropDown` | 下拉菜单 |
+| `DropDownItems` | 下拉菜单项组 |
+| `DropDownItem` | 下拉菜单项 |
+| `DropSelect` | 下拉选择 |
+| `FilterSelect` | 筛选选择 |
+| `MultipleFilterSelect` | 多选筛选 |
+| `MoreSelect` | 多选组件 |
+| `Affix` | 固定定位 |
+| `FunctionSet` | 功能设置 |
+| `IconDownUp` | 上下切换图标 |
+| `PopupContentConfirm` | 弹窗确认内容 |
+| `RecommendInput` | 推荐输入 |
+| `Storage` | 本地存储 |
+
+## 相关包
+
+| 包名 | 说明 |
+|------|------|
+| `@gmfe/locales` | 国际化支持 |
+| `@gmfe/table` | 基于 react-table-v6 的高级表格 |
+| `@gmfe/table-x` | 基于 react-table v7 的高级表格 |
+| `@gmfe/keyboard` | 表格键盘导航 |
+| `@gmfe/frame` | 页面框架布局 |
+| `@gmfe/business` | 业务组件 |
+| `@gmfe/cropper` | 图片裁剪 |
+| `@gmfe/sortable` | 拖拽排序 |
+| `@gmfe/qiniu-image` | 七牛云图片处理 |
+| `@gmfe/tour` | 引导式教程 |
+| `@gmfe/react-deprecated` | 已废弃组件 |
+
+## 注意事项
+
+- 依赖 `@svgr/webpack ^4.3.2` 作为 peer dependency，确保 webpack 配置了 svgr loader。
+- 组件支持 React >= 16.12.0。
+- 国际化功能依赖 `@gmfe/locales`，组件内部已集成。
+- 所有组件的详细 API 文档请查看各组件目录下的 README.md。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gmfe/react",
-  "version": "2.14.30-alpha.0",
+  "version": "2.14.30",
   "description": "",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gmfe#readme",
@@ -26,8 +26,8 @@
     "react-dom": "^16.12.0"
   },
   "dependencies": {
-    "@gm-common/tool": "^1.0.0",
-    "@gmfe/locales": "^2.14.30-alpha.0",
+    "@gm-common/tool": "^2.15.8",
+    "@gmfe/locales": "^2.14.30",
     "big.js": "^5.2.2",
     "classnames": "^2.2.5",
     "lodash": "^4.17.14",
@@ -35,5 +35,5 @@
     "prop-types": "^15.7.2",
     "react-window": "^1.8.5"
   },
-  "gitHead": "f7da14010d37550f0a19949fe4a5b3d65301545a"
+  "gitHead": "ecae7979e69fc5e3bb1185fe84f82f00dfca1159"
 }

package/src/component/affix/README.md

@@ -0,0 +1,54 @@
+# Affix
+
+## 简介
+固钉组件 - 使用 CSS `position: sticky` 实现元素在滚动时的固定定位效果。
+
+## 安装
+已包含在 `@gmfe/react` 中，无需额外安装。
+
+## 使用
+```jsx
+import Affix from '@gmfe/react/lib/affix'
+
+<Affix top={0}>
+  <div>固定在顶部的内容</div>
+</Affix>
+```
+
+## API
+
+### Props
+| 属性 | 说明 | 类型 | 默认值 | 必填 |
+|------|------|------|--------|------|
+| children | 需要固钉的子元素 | `any` | - | 否 |
+| top | 距离窗口顶部达到指定偏移量后触发固定 | `number` | - | 否 |
+| bottom | 距离窗口底部达到指定偏移量后触发固定 | `number` | - | 否 |
+
+## 示例
+
+### 固定在顶部
+```jsx
+<Affix top={0}>
+  <div>固定在顶部的内容</div>
+</Affix>
+```
+
+### 固定在底部
+```jsx
+<Affix bottom={0}>
+  <div>固定在底部的内容</div>
+</Affix>
+```
+
+### 同时设置顶部和底部
+```jsx
+<Affix top={0} bottom={0}>
+  <div>会被钉住在顶部和底部</div>
+</Affix>
+```
+
+## 注意事项
+- 底层使用 CSS `position: sticky` 实现，需要浏览器支持 sticky 定位
+- 默认 `z-index` 为 950
+- `top` 和 `bottom` 可以同时设置，也可以只设置其中一个
+- `top` 和 `bottom` 的单位为像素（px），传入的是数字值

package/src/component/box/README.md

@@ -0,0 +1,142 @@
+# Box / BoxForm / BoxTable / BoxPanel
+
+## 简介
+内容容器组件集 - 提供多种常用内容包裹容器，包括基础容器、表单容器、表格容器和面板容器
+
+## 安装
+已包含在 `@gmfe/react` 中，无需额外安装。
+
+## 使用
+```jsx
+import { Box, BoxForm, BoxTable, BoxPanel } from '@gmfe/react'
+
+// 基础容器
+<Box hasGap>内容区域</Box>
+
+// 表单容器
+<BoxForm>表单内容</BoxForm>
+
+// 表格容器
+<BoxTable info={<BoxTable.Info>标题</BoxTable.Info>} action={<div>操作</div>}>
+  表格内容
+</BoxTable>
+
+// 面板容器
+<BoxPanel title="商品明细">面板内容</BoxPanel>
+```
+
+## API
+
+### Box Props
+| 属性 | 说明 | 类型 | 默认值 | 必填 |
+|------|------|------|--------|------|
+| hasGap | 是否添加内边距 | `bool` | `false` | 否 |
+| className | 自定义类名 | `string` | - | 否 |
+| style | 自定义样式 | `object` | - | 否 |
+
+### BoxForm Props
+| 属性 | 说明 | 类型 | 默认值 | 必填 |
+|------|------|------|--------|------|
+| children | 表单内容（需用 `FormBlock` 包裹） | `node` | - | 否 |
+
+### BoxForm.More
+| 属性 | 说明 | 类型 | 必填 |
+|------|------|------|------|
+| children | 展开后的额外表单内容 | `node` | 否 |
+
+`BoxForm.More` 可在表单区域和按钮区域重复使用，表示需要展开后才显示的内容。
+
+### BoxTable Props
+| 属性 | 说明 | 类型 | 默认值 | 必填 |
+|------|------|------|--------|------|
+| info | 左侧标题区域 | `element` | - | 否 |
+| action | 右侧操作区域 | `element` | - | 否 |
+| className | 自定义类名 | `string` | - | 否 |
+| style | 自定义样式 | `object` | - | 否 |
+| headerProps | 头部区域的自定义属性 | `object` | `{}` | 否 |
+
+### BoxTable.Info
+| 属性 | 说明 | 类型 | 必填 |
+|------|------|------|------|
+| children | 信息内容 | `node` | 否 |
+| className | 自定义类名 | `string` | 否 |
+| style | 自定义样式 | `object` | 否 |
+
+### BoxPanel Props
+| 属性 | 说明 | 类型 | 默认值 | 必填 |
+|------|------|------|--------|------|
+| title | 面板标题 | `string` | - | 是 |
+| collapse | 折叠功能，`undefined` 为无此功能，`false` 默认收起，`true` 默认展开 | `bool` | - | 否 |
+| summary | 汇总信息，数组格式：`[{text, value}]` 或 element | `array \| element` | - | 否 |
+| right | 右侧内容区域 | `element` | - | 否 |
+| className | 自定义类名 | `string` | - | 否 |
+| style | 自定义样式 | `object` | - | 否 |
+
+## 示例
+
+### Box 基础容器
+```jsx
+<Box>带边框的内容区域</Box>
+<Box hasGap>带内边距的内容区域</Box>
+```
+
+### BoxForm 表单容器
+```jsx
+<BoxForm btnPosition="left">
+  <FormBlock col={3}>
+    <FormItem label="商品">
+      <input type="text" />
+    </FormItem>
+  </FormBlock>
+  <BoxForm.More>
+    <FormBlock col={3}>
+      <FormItem label="额外字段">
+        <input type="text" />
+      </FormItem>
+    </FormBlock>
+  </BoxForm.More>
+  <FormButton>
+    <Button type="primary" htmlType="submit">搜索</Button>
+    <BoxForm.More>
+      <Button type="link">重置</Button>
+    </BoxForm.More>
+  </FormButton>
+</BoxForm>
+```
+
+### BoxTable 表格容器
+```jsx
+<BoxTable
+  info={<BoxTable.Info>这是标题</BoxTable.Info>}
+  action={<div>操作按钮</div>}
+>
+  <div>表格内容</div>
+</BoxTable>
+```
+
+### BoxPanel 面板容器
+```jsx
+// 基础面板
+<BoxPanel title="商品明细">
+  面板内容
+</BoxPanel>
+
+// 带折叠和汇总
+<BoxPanel
+  title="商品明细"
+  collapse
+  summary={[
+    { text: '共计', value: 2 },
+    { text: '合计', value: '¥23,389.00' }
+  ]}
+  right={<div>操作区域</div>}
+>
+  面板内容
+</BoxPanel>
+```
+
+## 注意事项
+- 所有 Box 容器默认带边框样式
+- `BoxForm` 中展开的内容需使用 `BoxForm.More` 包裹，内部使用 Context 通信
+- `BoxForm.More` 可以在表单区域和按钮区域重复出现，表示"高级筛选"区域
+- `BoxPanel` 的 `summary` 汇总信息以逗号分隔展示，最后一项后无逗号

package/src/component/box/box_table.js

@@ -2,7 +2,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import Flex from '../flex'
-import StickyLayout from '../../hoc/sticky_layout'
 
 // 暂时没什么用
 const Info = props => {
@@ -19,27 +18,21 @@ Info.propTypes = {
   style: PropTypes.object
 }
 
-const BoxHeader = StickyLayout((props) => {
-  const { info, action, headerProps = {} } = props
-  const { className: headerClassName } = headerProps
-
-  return <Flex
-    {...headerProps}
-    className={classNames('gm-box-table-header common-sticky-header', headerClassName)}
-    alignCenter
-  >
-    <Flex>{info}</Flex>
-    <Flex flex />
-    <Flex>{action}</Flex>
-  </Flex>
-});
-
 const BoxTable = props => {
-  const { children, className, ...rest } = props
+  const { info, action, children, className, headerProps = {}, ...rest } = props
+  const { className: headerClassName } = headerProps
 
   return (
     <div {...rest} className={classNames('gm-box gm-box-table', className)}>
-      <BoxHeader {...props} />
+      <Flex
+        {...headerProps}
+        className={classNames('gm-box-table-header', headerClassName)}
+        alignCenter
+      >
+        <Flex>{info}</Flex>
+        <Flex flex />
+        <Flex>{action}</Flex>
+      </Flex>
       <div>{children}</div>
     </div>
   )

package/src/component/button/README.md

@@ -0,0 +1,90 @@
+# Button
+
+## 简介
+按钮组件 - 封装了原生按钮的基本功能，支持多种类型、尺寸和自动 loading 状态。
+
+## 安装
+已包含在 `@gmfe/react` 中，无需额外安装。
+
+## 使用
+```jsx
+import { Button } from '@gmfe/react'
+
+// 基础按钮
+<Button>默认按钮</Button>
+<Button type='primary'>主色按钮</Button>
+<Button type='success'>成功按钮</Button>
+<Button type='danger'>危险按钮</Button>
+```
+
+## API
+
+### Props
+| 属性 | 说明 | 类型 | 默认值 | 必填 |
+|------|------|------|--------|------|
+| type | 按钮类型 | `'default' \| 'primary' \| 'success' \| 'danger' \| 'link'` | `'default'` | 否 |
+| plain | 是否为朴素按钮（只有边框，无背景色） | `bool` | - | 否 |
+| size | 按钮大小，目前支持 large | `'large'` | - | 否 |
+| block | 是否为块级按钮（撑满父容器宽度） | `bool` | - | 否 |
+| htmlType | 原生 type 属性 | `string` | `'button'` | 否 |
+| loading | 是否显示 loading 状态 | `bool` | - | 否 |
+| href | 链接地址，type 为 link 时有效 | `string` | - | 否 |
+| onClick | 点击回调，返回 Promise 时自动显示 loading | `func` | `_.noop` | 否 |
+| disabled | 是否禁用 | `bool` | - | 否 |
+| className | 自定义类名 | `string` | - | 否 |
+| style | 自定义样式 | `object` | - | 否 |
+
+## 示例
+
+### 基础用法
+```jsx
+<Button>默认</Button>
+<Button type='primary'>主色</Button>
+<Button type='success'>成功</Button>
+<Button type='danger'>危险</Button>
+<Button type='link'>Link</Button>
+```
+
+### 朴素按钮
+```jsx
+<Button plain>默认</Button>
+<Button plain type='primary'>主色</Button>
+<Button plain type='success'>成功</Button>
+<Button plain type='danger'>危险</Button>
+```
+
+### 链接按钮
+```jsx
+<Button type='link' href='https://example.com' target='_blank'>
+  链接
+</Button>
+```
+
+### Loading 状态
+```jsx
+// 手动控制 loading
+<Button loading>loading</Button>
+
+// onClick 返回 Promise 时自动显示 loading
+<Button onClick={async () => {
+  await new Promise(resolve => setTimeout(resolve, 2000))
+}}>点击显示 loading</Button>
+```
+
+### 大按钮
+```jsx
+<Button size='large'>大按钮</Button>
+```
+
+### 禁用状态
+```jsx
+<Button disabled>禁用按钮</Button>
+<Button disabled type='primary'>禁用主色</Button>
+```
+
+## 注意事项
+- `type='link'` 配合 `href` 属性使用时，组件会渲染为 `<a>` 标签
+- `htmlType` 控制的是原生 form type 属性（如 `submit`），与 `type` 属性不同
+- 当 `onClick` 返回 `Promise` 时，按钮会自动显示 loading 状态，Promise resolve 后自动恢复
+- `loading` 和 `disabled` 同时生效时，按钮都会被禁用
+- `plain` 属性对 `type='link'` 类型的按钮无效

package/src/component/calendar/README.md

@@ -0,0 +1,98 @@
+# Calendar
+
+## 简介
+日历组件 - 提供单日期选择和日期范围选择两种模式，通过 Calendar（单选）和 RangeCalendar（范围选择）两个组件实现。
+
+## 安装
+已包含在 `@gmfe/react` 中，无需额外安装。
+
+## 使用
+```jsx
+import { Calendar } from '@gmfe/react'
+
+<Calendar
+  selected={date}
+  onSelect={date => setDate(date)}
+/>
+```
+
+## API
+
+### Calendar Props（单选）
+| 属性 | 说明 | 类型 | 默认值 | 必填 |
+|------|------|------|--------|------|
+| selected | 当前选中的日期，Date 对象 | `object` | - | 否 |
+| onSelect | 日期选中回调，参数为 Date 对象 | `func` | `_.noop` | 否 |
+| willActiveSelected | 键盘操作时的高亮日期 | `object` | - | 否 |
+| onWillActiveSelected | 高亮日期变化回调，参数为 Date 对象 | `func` | - | 否 |
+| min | 可选的最小日期，Date 对象 | `object` | - | 否 |
+| max | 可选的最大日期，Date 对象 | `object` | - | 否 |
+| disabledDate | 自定义日期是否可选，参数为 Date 对象，返回 bool。设置后 min/max 无效 | `func` | - | 否 |
+| onKeyDown | 键盘事件回调 | `func` | - | 否 |
+| className | 自定义类名 | `string` | - | 否 |
+| style | 自定义样式 | `object` | - | 否 |
+
+### RangeCalendar Props（范围选择）
+RangeCalendar 继承自 Calendar，额外属性如下：
+
+| 属性 | 说明 | 类型 | 默认值 | 必填 |
+|------|------|------|--------|------|
+| begin | 开始日期，Date 对象 | `object` | - | 否 |
+| end | 结束日期，Date 对象 | `object` | - | 否 |
+| onSelect | 选中回调，参数为 (begin, end) | `func` | - | 否 |
+
+## 示例
+
+### 基础日历
+```jsx
+<Calendar
+  selected={date}
+  onSelect={date => setDate(date)}
+/>
+```
+
+### 限制日期范围
+```jsx
+import moment from 'moment'
+
+<Calendar
+  selected={date}
+  onSelect={date => setDate(date)}
+  min={moment().toDate()}
+  max={moment().add(10, 'd').toDate()}
+/>
+```
+
+### 自定义禁用日期
+```jsx
+import moment from 'moment'
+
+// 只能选择非周五的日期
+<Calendar
+  selected={date}
+  onSelect={date => setDate(date)}
+  disabledDate={d => moment(d).get('day') === 5}
+/>
+```
+
+### 日期范围选择
+```jsx
+import { RangeCalendar } from '@gmfe/react'
+
+<RangeCalendar
+  begin={beginDate}
+  end={endDate}
+  onSelect={(begin, end) => {
+    setBeginDate(begin)
+    setEndDate(end)
+  }}
+/>
+```
+
+## 注意事项
+- Calendar 用于单日期选择，RangeCalendar 用于日期范围选择
+- `selected`/`begin`/`end` 属性接收 JavaScript 原生 `Date` 对象
+- `disabledDate` 设置后，`min` 和 `max` 将失效
+- Calendar 组件内部基于 RangeCalendar 实现
+- 该组件通常作为 DatePicker 和 DateRangePicker 的内部组件使用，一般不需要直接使用
+- 支持键盘上下键切换日期

package/src/component/carousel/README.md

@@ -0,0 +1,51 @@
+# Carousel
+
+## 简介
+轮播组件 - 支持淡入淡出切换、自动轮播、鼠标悬浮暂停的图片/内容轮播
+
+## 安装
+已包含在 `@gmfe/react` 中，无需额外安装。
+
+## 使用
+```jsx
+import { Carousel } from '@gmfe/react'
+
+<Carousel style={{ width: '1000px', height: '200px' }}>
+  <div style={{ backgroundColor: 'red', height: '100%', width: '100%' }}>内容1</div>
+  <div style={{ backgroundColor: 'green', height: '100%', width: '100%' }}>内容2</div>
+  <div style={{ backgroundColor: 'blue', height: '100%', width: '100%' }}>内容3</div>
+</Carousel>
+```
+
+## API
+
+### Props
+| 属性 | 说明 | 类型 | 默认值 | 必填 |
+|------|------|------|--------|------|
+| children | 轮播内容，支持 element 元素数组 | `arrayOf(element)` | - | 否 |
+| defaultIndex | 初始展示的索引 | `number` | `0` | 否 |
+| delay | 轮播间隔时间（毫秒） | `number` | `3000` | 否 |
+| transitionTime | 切换动画时长（毫秒） | `number` | `1000` | 否 |
+| onIndexChange | 索引变化回调 | `function` | - | 否 |
+| className | 自定义类名 | `string` | - | 否 |
+| isStopByHoverContent | 鼠标悬浮在内容区域时是否暂停轮播 | `bool` | `true` | 否 |
+
+## 示例
+
+### 基础用法
+```jsx
+<Carousel
+  style={{ width: '1000px', height: '200px' }}
+  onIndexChange={index => console.log(index)}
+>
+  <div style={{ backgroundColor: 'red', height: '100%', width: '100%' }}>内容1</div>
+  <div style={{ backgroundColor: 'green', height: '100%', width: '100%' }}>内容2</div>
+  <div style={{ backgroundColor: 'yellow', height: '100%', width: '100%' }}>内容3</div>
+  <div style={{ backgroundColor: 'blue', height: '100%', width: '100%' }}>内容4</div>
+</Carousel>
+```
+
+## 注意事项
+- 子元素支持动态添加，组件会自动适应子元素数量变化
+- 鼠标离开轮播区域后会自动恢复轮播
+- 底部有圆点指示器，支持鼠标悬停切换