@gm-mobile/business 1.1.11 → 1.1.13

package/README.md

@@ -0,0 +1,124 @@
+# @gm-mobile/business
+
+## 简介
+
+@gm-mobile/business 是业务组件包，提供了常见的业务场景组件，包括优惠券、商品选择、日期选择和电子签名等功能。
+
+## 安装
+
+```bash
+npm install @gm-mobile/business
+# 或
+yarn add @gm-mobile/business
+```
+
+## 包含的组件
+
+### 1. Coupon & ReceivedCoupon
+优惠券组件，支持多种状态的优惠券展示。
+
+- **Coupon**: 可领取/可使用的优惠券组件
+- **ReceivedCoupon**: 已领取优惠券组件
+- **适用场景**：营销活动、优惠券管理、订单结算
+- **详细文档**：[Coupon README](src/component/coupon/README.md)
+
+### 2. ProductSelection
+商品选择组件，支持字母索引和商品搜索。
+
+- **适用场景**：商品选择、规格选择、商品列表
+- **主要功能**：
+  - 字母索引导航
+  - 商品搜索
+  - 多选/单选
+  - 自定义渲染
+- **详细文档**：[ProductSelection README](src/component/product_selection/README.md)
+
+### 3. TabDateSelect
+标签日期选择器，支持日期范围选择和服务时间配置。
+
+- **适用场景**：配送日期选择、预约时间选择
+- **主要功能**：
+  - 日期标签切换
+  - 时间段选择
+  - 服务时间配置
+  - 弹窗展示
+- **详细文档**：[TabDateSelect README](src/component/tab_date_select/README.md)
+
+### 4. Signature
+电子签名组件，支持手写签名和签名查看。
+
+- **适用场景**：电子合同、签收确认、授权签名
+- **主要功能**：
+  - 手写签名画布
+  - 签名查看模式
+  - Base64/Blob 导出
+  - 禁用编辑
+- **详细文档**：[Signature README](src/component/signature/README.md)
+
+## 使用示例
+
+```jsx
+import {
+  Coupon,
+  ReceivedCoupon,
+  ProductSelection,
+  TabDateSelect,
+  Signature
+} from '@gm-mobile/business'
+
+// 优惠券组件
+<Coupon
+  title="新人专享券"
+  subTitle="满100减10"
+  status="available"
+  onChange={(checked) => console.log(checked)}
+/>
+
+// 商品选择组件
+<ProductSelection
+  data={productList}
+  selected={selectedProducts}
+  onSelect={handleSelect}
+/>
+
+// 日期选择器
+<TabDateSelect.render({
+  tabs: ['今天', '明天'],
+  begin: '2026-03-27',
+  end: '2026-03-28',
+  onSelect: handleSelect,
+})
+
+// 电子签名
+<Signature
+  onSave={(base64) => console.log('签名保存:', base64)}
+  disabledEdit={false}
+/>
+```
+
+## 开发依赖
+
+- **React**: ^16.13.1
+- **@gm-mobile/react**: 依赖基础组件库
+
+## 相关包
+
+- [@gm-mobile/react](../react/README.md) - 基础组件库
+- [@gm-mobile/swiper](../swiper/README.md) - 轮播组件库
+- [@gm-mobile/service_time](../service_time/README.md) - 服务时间组件库
+
+## 快速链接
+
+- [Coupon 组件文档](src/component/coupon/README.md)
+- [ProductSelection 组件文档](src/component/product_selection/README.md)
+- [TabDateSelect 组件文档](src/component/tab_date_select/README.md)
+- [Signature 组件文档](src/component/signature/README.md)
+
+## 许可证
+
+ISC
+
+---
+
+**版本**: v1.1.12
+**最后更新**: 2026-03-27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-mobile/business",
-  "version": "1.1.11",
+  "version": "1.1.13",
   "description": "> TODO: description",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/business#readme",
@@ -21,9 +21,9 @@
     "url": "https://github.com/gmfe/business/issues"
   },
   "dependencies": {
-    "@gm-mobile/locales": "^1.1.11",
-    "@gm-mobile/react": "^1.1.11",
-    "@gm-mobile/service_time": "^1.1.11"
+    "@gm-mobile/locales": "^1.1.13",
+    "@gm-mobile/react": "^1.1.13",
+    "@gm-mobile/service_time": "^1.1.13"
   },
-  "gitHead": "442a85f336ef085e639bb447300e38e8c3feb7df"
+  "gitHead": "99f7babda660876d45627b0f0c9378ce655de360"
 }

package/src/component/coupon/README.md

@@ -0,0 +1,256 @@
+# Coupon
+
+## 简介
+优惠券组件 - 用于展示优惠券信息，支持多种状态（正常、过期、已使用、禁用）和交互（领取、使用、勾选），适用于电商、营销等业务场景。
+
+## API
+
+### Coupon Props
+
+| 属性 | 说明 | 类型 | 默认值 | 必填 |
+|------|------|------|--------|------|
+| currency | 折扣金额货币符号 | string | - | 是 |
+| discount | 折扣金额 | number | - | 是 |
+| totalInfo | 满减说明，如"满1000元可用" | string | - | 否 |
+| dateInfo | 使用日期说明，可以是字符串或 React 元素 | string \| element | - | 否 |
+| title | 优惠券标题 | string | - | 否 |
+| labels | 优惠券标签数组，如 ['分类券', '新人券'] | array | - | 否 |
+| hasUseInfo | 是否显示使用说明区域 | boolean | false | 否 |
+| useInfo | 使用说明的内容，可以是文本或 React 元素 | element | - | 否 |
+| onUse | 点击"立即使用"按钮的回调函数 | function | - | 否 |
+| disabled | 是否禁用优惠券 | boolean | false | 否 |
+| checked | 优惠券的勾选状态 | boolean | false | 否 |
+| onCheck | 点击优惠券进行勾选的回调函数 | function | - | 否 |
+| isExpired | 优惠券是否已过期 | boolean | false | 否 |
+| isUsed | 优惠券是否已使用 | boolean | false | 否 |
+| onReceived | 点击"立即领取"按钮的回调函数 | function | - | 否 |
+| couponAmount | 可领取的优惠券数量 | number | - | 否 |
+| className | 自定义类名 | string | - | 否 |
+| style | 自定义样式 | object | - | 否 |
+
+### ReceivedCoupon Props
+
+ReceivedCoupon 是 Coupon 的简化版本，专门用于优惠券领取场景。
+
+| 属性 | 说明 | 类型 | 默认值 | 必填 |
+|------|------|------|--------|------|
+| currency | 折扣金额货币符号 | string | - | 是 |
+| discount | 折扣金额 | string | - | 是 |
+| totalInfo | 满减说明 | string | - | 否 |
+| labels | 优惠券标签数组 | array | - | 否 |
+| couponAmount | 可领取的优惠券数量 | number | - | 否 |
+| isReceived | 是否已领取 | boolean | false | 否 |
+| onReceived | 点击"领取"按钮的回调函数 | function | - | 否 |
+| className | 自定义类名 | string | - | 否 |
+| style | 自定义样式 | object | - | 否 |
+
+## 示例
+
+### 基础用法
+
+最简单的优惠券展示，包含基本的金额、满减信息和日期：
+
+```jsx
+import { Coupon } from '@gm-mobile/react'
+
+<Coupon
+  currency='¥'
+  discount={100}
+  totalInfo='满1000元可用'
+  dateInfo='2024-01-01~2024-12-31'
+  title='新人优惠券'
+/>
+```
+
+### 带标签和勾选的优惠券
+
+支持显示多个标签和勾选功能：
+
+```jsx
+import { Coupon } from '@gm-mobile/react'
+import { observable } from 'mobx'
+
+const store = observable({
+  checked: false,
+  setChecked(checked) {
+    this.checked = checked
+  },
+})
+
+<Coupon
+  currency='¥'
+  discount={100}
+  totalInfo='满1000元可用'
+  dateInfo='2024-01-01~2024-12-31'
+  title='分类优惠券'
+  labels={['分类券', '新人券']}
+  checked={store.checked}
+  onCheck={() => store.setChecked(!store.checked)}
+/>
+```
+
+### 带使用说明的优惠券
+
+可以展开查看详细的使用说明：
+
+```jsx
+import { Coupon } from '@gm-mobile/react'
+
+<Coupon
+  currency='¥'
+  discount={30}
+  totalInfo='满1000元可用'
+  dateInfo='2024-01-01~2024-12-31'
+  title='分类优惠券'
+  labels={['仅限特定商品使用', '商品券']}
+  hasUseInfo
+  useInfo={
+    <div>
+      1. 仅限指定商品使用
+      <br />
+      2. 每个订单限用一张
+      <br />
+      3. 不可与其他优惠叠加
+    </div>
+  }
+  couponAmount={4}
+  onUse={() => console.log('使用优惠券')}
+/>
+```
+
+### 不同状态的优惠券
+
+展示优惠券的不同状态：禁用、过期、已使用：
+
+```jsx
+import { Coupon, Flex } from '@gm-mobile/react'
+
+<Flex column>
+  {/* 禁用状态 */}
+  <Coupon
+    currency='¥'
+    discount={200}
+    totalInfo='满300元可用'
+    dateInfo='2024-01-01到期'
+    title='禁用优惠券'
+    disabled
+  />
+
+  {/* 过期状态 */}
+  <Coupon
+    currency='¥'
+    discount={200}
+    totalInfo='满300元可用'
+    dateInfo='2024-01-01到期'
+    title='过期优惠券'
+    isExpired
+  />
+
+  {/* 已使用状态 */}
+  <Coupon
+    currency='¥'
+    discount={200}
+    totalInfo='满300元可用'
+    dateInfo='2024-01-01到期'
+    title='已使用优惠券'
+    isUsed
+  />
+</Flex>
+```
+
+### 可领取的优惠券
+
+支持领取功能的优惠券：
+
+```jsx
+import { Coupon } from '@gm-mobile/react'
+
+<Coupon
+  currency='¥'
+  discount={200}
+  totalInfo='满300元可用'
+  title='可领取优惠券'
+  couponAmount={10}
+  onReceived={() => console.log('领取优惠券')}
+/>
+```
+
+### ReceivedCoupon 简化版优惠券
+
+用于优惠券领取列表的简化展示：
+
+```jsx
+import { ReceivedCoupon } from '@gm-mobile/react'
+
+{/* 未领取状态 */}
+<ReceivedCoupon
+  currency='¥'
+  discount='10'
+  totalInfo='满100元可用'
+  couponAmount={1}
+  labels={['仅限特定商品使用']}
+  onReceived={() => console.log('领取')}
+/>
+
+{/* 已领取状态 */}
+<ReceivedCoupon
+  currency='¥'
+  discount='100'
+  totalInfo='满200元可用'
+  isReceived
+/>
+```
+
+### 自定义日期信息
+
+dateInfo 支持传入 React 元素实现复杂的日期展示：
+
+```jsx
+import { Coupon, Flex } from '@gm-mobile/react'
+
+<Coupon
+  currency='¥'
+  discount={30}
+  totalInfo='满1000元可用'
+  dateInfo={
+    <Flex wrap>
+      <span>2024-01-01</span>
+      <span>~</span>
+      <span>2024-12-31</span>
+    </Flex>
+  }
+  title='自定义日期优惠券'
+  labels={['仅限特定商品使用', '商品使用']}
+  hasUseInfo
+  useInfo='详细的使用说明内容'
+  onUse={() => console.log('使用')}
+/>
+```
+
+## 注意事项
+
+1. **必填属性**：`currency` 和 `discount` 是必填属性，必须传入这两个参数才能正常显示优惠券。
+
+2. **状态优先级**：当 `disabled`、`isExpired` 或 `isUsed` 任一为 true 时，优惠券会显示为不可用状态，并且"立即使用"/"立即领取"按钮将不可点击。
+
+3. **勾选功能**：如果需要使用勾选功能，必须同时传入 `checked` 和 `onCheck` 属性。`onCheck` 会接收新的勾选状态作为参数。
+
+4. **使用说明**：只有当 `hasUseInfo` 为 true 时，才会显示使用说明区域。点击可以展开/收起 `useInfo` 的内容。
+
+5. **按钮互斥**：`onUse` 和 `onReceived` 不能同时使用，根据业务场景选择一个传入。
+
+6. **labels 数组**：标签数组会自动渲染为多个小标签，建议传入 1-3 个标签，避免过多导致显示混乱。
+
+7. **couponAmount 显示位置**：
+   - 在 Coupon 组件中，显示在日期信息下方
+   - 在 ReceivedCoupon 组件中，显示在金额右侧的括号中
+
+8. **日期信息格式**：`dateInfo` 支持字符串或 React 元素，可以传入简单的日期字符串，也可以传入复杂的布局元素。
+
+9. **ReceivedCoupon vs Coupon**：
+   - Coupon：功能完整，适合优惠券列表、我的优惠券等场景
+   - ReceivedCoupon：样式简洁，适合优惠券领取中心、首页优惠券推荐等场景
+
+## 相关组件
+
+- [Checkbox](../checkbox/README.md) - Coupon 内部使用的勾选组件

package/src/component/product_selection/README.md

@@ -0,0 +1,208 @@
+# ProductSelection
+
+## 简介
+商品选择组件 - 一个支持多选的商品列表组件，带字母索引导航、已选商品展示弹窗和底部操作栏，适用于需要从大量商品中选择多个商品的业务场景。
+
+## API
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 | 必填 |
+|------|------|------|--------|------|
+| data | 商品列表数据，格式为 `[{value, text}]`，value 为唯一标识，text 为显示文本 | `array` | - | 是 |
+| selected | 已选商品的 value 数组 | `array` | `[]` | 否 |
+| onSelect | 选择变化时的回调函数，参数为当前选中的 value 数组 | `function` | - | 是 |
+| renderItem | 自定义列表项渲染函数，接收一个 item 参数，返回 React 节点 | `function` | `(item) => item.text` | 否 |
+| className | 自定义类名 | `string` | - | 否 |
+| style | 自定义样式 | `object` | - | 否 |
+
+### 组件结构说明
+
+ProductSelection 由以下三个部分组成：
+
+1. **字母索引列表**（继承自 LetterIndexMultiple）
+   - 支持按字母分组快速定位
+   - 支持多选操作
+   - 可自定义列表项渲染
+
+2. **底部操作栏**
+   - 显示已选商品数量（带角标提示）
+   - 购物车图标，点击可查看已选商品列表
+   - 确定添加按钮，提交最终选择结果
+
+3. **已选商品弹窗**
+   - 展示所有已选商品
+   - 支持单个删除操作
+   - 带遮罩层，点击遮罩关闭
+
+## 示例
+
+### 基础用法
+
+最简单的使用方式，配合状态管理库（如 mobx）管理选中状态：
+
+```jsx
+import React from 'react'
+import { Page } from '@gm-mobile/react'
+import { ProductSelection } from '@gm-mobile/business'
+
+const Example = () => {
+  const [selected, setSelected] = React.useState([])
+
+  const data = [
+    { value: 'apple', text: '苹果' },
+    { value: 'banana', text: '香蕉' },
+    { value: 'orange', text: '橙子' },
+    { value: 'watermelon', text: '西瓜' },
+  ]
+
+  return (
+    <Page>
+      <ProductSelection
+        data={data}
+        selected={selected}
+        onSelect={setSelected}
+      />
+    </Page>
+  )
+}
+
+export default Example
+```
+
+### 带默认选中值
+
+初始化时传入已选中的商品：
+
+```jsx
+import React from 'react'
+import { Page } from '@gm-mobile/react'
+import { ProductSelection } from '@gm-mobile/business'
+
+const Example = () => {
+  // 默认选中苹果和香蕉
+  const [selected, setSelected] = React.useState(['apple', 'banana'])
+
+  const data = [
+    { value: 'apple', text: '苹果' },
+    { value: 'banana', text: '香蕉' },
+    { value: 'orange', text: '橙子' },
+    { value: 'watermelon', text: '西瓜' },
+    { value: 'grape', text: '葡萄' },
+  ]
+
+  return (
+    <Page>
+      <ProductSelection
+        data={data}
+        selected={selected}
+        onSelect={setSelected}
+      />
+    </Page>
+  )
+}
+
+export default Example
+```
+
+### 自定义列表项渲染
+
+通过 `renderItem` 属性自定义每个商品的展示样式：
+
+```jsx
+import React from 'react'
+import { Page } from '@gm-mobile/react'
+import { ProductSelection } from '@gm-mobile/business'
+
+const Example = () => {
+  const [selected, setSelected] = React.useState([])
+
+  const data = [
+    { value: 'apple', text: '苹果', price: '5.00', stock: 100 },
+    { value: 'banana', text: '香蕉', price: '3.50', stock: 50 },
+    { value: 'orange', text: '橙子', price: '4.00', stock: 80 },
+  ]
+
+  // 自定义渲染，显示价格和库存
+  const renderItem = (item) => (
+    <div>
+      <div>{item.text}</div>
+      <div style={{ fontSize: '12px', color: '#999' }}>
+        ¥{item.price} | 库存: {item.stock}
+      </div>
+    </div>
+  )
+
+  return (
+    <Page>
+      <ProductSelection
+        data={data}
+        selected={selected}
+        onSelect={setSelected}
+        renderItem={renderItem}
+      />
+    </Page>
+  )
+}
+
+export default Example
+```
+
+### 提交已选商品
+
+监听 `onSelect` 回调，在点击确定按钮后处理选中的商品：
+
+```jsx
+import React from 'react'
+import { Page, Toast } from '@gm-mobile/react'
+import { ProductSelection } from '@gm-mobile/business'
+
+const Example = () => {
+  const [selected, setSelected] = React.useState([])
+
+  const data = [
+    { value: 'apple', text: '苹果' },
+    { value: 'banana', text: '香蕉' },
+    { value: 'orange', text: '橙子' },
+  ]
+
+  // 处理选择确认
+  const handleSelect = (selectedList) => {
+    setSelected(selectedList)
+
+    // 可以在这里执行提交逻辑
+    if (selectedList.length > 0) {
+      console.log('已选商品：', selectedList)
+      Toast.success(`已添加 ${selectedList.length} 个商品`)
+    }
+  }
+
+  return (
+    <Page>
+      <ProductSelection
+        data={data}
+        selected={selected}
+        onSelect={handleSelect}
+      />
+    </Page>
+  )
+}
+
+export default Example
+```
+
+## 注意事项
+
+1. **数据格式要求**：`data` 属性必须是对象数组，每个对象必须包含 `value`（唯一标识）和 `text`（显示文本）字段。
+
+2. **状态管理**：建议使用 React hooks（如 `useState`）或状态管理库（如 MobX）来管理 `selected` 状态，确保视图正确更新。
+
+3. **选中值传递**：`selected` 和 `onSelect` 参数中的选中项都是 `value` 数组，不是完整的商品对象。
+
+4. **字母分组**：组件会自动根据 `text` 字段的首字母进行分组和索引，无需手动处理。
+
+5. **底部按钮状态**：当没有选中任何商品时，底部购物车图标和确定按钮处于禁用状态，不可点击。
+
+6. **已选商品弹窗**：点击底部购物车图标可展开已选商品弹窗，在弹窗中可以快速删除已选商品。
+
+7. **样式定制**：可以通过 `className` 和 `style` 属性自定义组件样式，如需深度定制样式，建议使用全局 CSS 覆盖。

package/src/component/signature/README.md

@@ -0,0 +1,145 @@
+# Signature
+
+## 简介
+电子签名组件 - 支持手写签名、查看已签名图片和重新签名，适用于签收、确认等需要电子签名的业务场景。组件会自动在查看模式和编辑模式之间切换。
+
+## API
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 | 必填 |
+|------|------|------|--------|------|
+| output | 输出类型，支持 base64 字符串或 blob 对象 | oneOf(['base64', 'blob']) | 'base64' | 否 |
+| image | 已有的签名图片 URL，不传则直接进入编辑模式 | string | - | 否 |
+| onSave | 保存签名的回调函数，接收签名数据（base64 字符串或 blob 对象） | function | - | 是 |
+| disabledEdit | 是否禁止修改签名 | boolean | false | 否 |
+| isEdit | 存在 image 时，是否直接进入编辑状态。Edit 场景按钮文案为'确定签收'，View 场景按钮文案为'保存' | boolean | false | 否 |
+
+## 示例
+
+### 基础用法 - 查看已有签名
+```jsx
+import { Signature } from '@gm-mobile/react'
+
+function App() {
+  const handleSave = (data) => {
+    // data 是 base64 字符串或 blob 对象，取决于 output 属性
+    console.log('签名数据:', data)
+  }
+
+  return (
+    <Signature
+      image="https://image.document.guanmai.cn/product_img/1588907508246-058712363353500274.png"
+      onSave={handleSave}
+    />
+  )
+}
+```
+
+### 直接进入签名模式
+```jsx
+import { Signature } from '@gm-mobile/react'
+
+function App() {
+  return (
+    <Signature
+      isEdit
+      output="blob"
+      onSave={(blob) => {
+        // 处理 blob 格式的签名数据
+        console.log('签名 Blob:', blob)
+      }}
+    />
+  )
+}
+```
+
+### 首次签名（无初始图片）
+```jsx
+import { Signature } from '@gm-mobile/react'
+
+function App() {
+  return (
+    <Signature
+      onSave={(base64) => {
+        // 处理 base64 格式的签名数据
+        console.log('签名 Base64:', base64)
+      }}
+    />
+  )
+}
+```
+
+### 禁止修改签名
+```jsx
+import { Signature } from '@gm-mobile/react'
+
+function App() {
+  return (
+    <Signature
+      image="https://example.com/signature.png"
+      disabledEdit
+      onSave={() => {
+        // disabledEdit 为 true 时，不会触发 onSave
+      }}
+    />
+  )
+}
+```
+
+### 输出为 Blob 对象
+```jsx
+import { Signature } from '@gm-mobile/react'
+
+function App() {
+  const handleSave = async (blob) => {
+    // 将 blob 转换为文件或上传到服务器
+    const file = new File([blob], 'signature.png', { type: 'image/png' })
+
+    // 示例：使用 FormData 上传
+    const formData = new FormData()
+    formData.append('signature', file)
+
+    // await uploadSignature(formData)
+    console.log('文件对象:', file)
+  }
+
+  return (
+    <Signature
+      output="blob"
+      image="https://example.com/signature.png"
+      onSave={handleSave}
+    />
+  )
+}
+```
+
+### 确认签收场景
+```jsx
+import { Signature } from '@gm-mobile/react'
+
+function App() {
+  return (
+    <Signature
+      isEdit
+      onSave={(data) => {
+        console.log('确认签收，签名数据:', data)
+        // 提交签收信息到后端
+      }}
+    />
+  )
+}
+```
+
+## 注意事项
+- 组件内部会自动管理查看模式和编辑模式的切换，无需手动控制
+- 当 `image` 不传时，会直接进入编辑模式
+- 当 `image` 存在时，默认先显示查看模式，点击"修改签名"按钮进入编辑模式
+- 当 `isEdit=true` 且 `image` 存在时，会直接进入编辑模式，按钮文案为"确定签收"
+- 当 `isEdit=false` 且 `image` 存在时，从查看模式进入编辑模式，按钮文案为"保存"
+- `disabledEdit=true` 时，查看模式下不显示"修改签名"按钮，签名不可修改
+- 编辑模式下，Canvas 会自适应屏幕宽度，高度为屏幕高度减去底部按钮区域高度
+- 在编辑模式下，组件会阻止 iOS 的橡皮筋滚动效果，保证签名体验
+- `output="base64"` 时，`onSave` 接收 base64 字符串（以 `data:image/png;base64,` 开头）
+- `output="blob"` 时，`onSave` 接收 Blob 对象（type 为 'image/png'），适合文件上传场景
+- 确保在 `onSave` 回调中正确处理签名数据（保存到状态、上传服务器等）

package/src/component/tab_date_select/README.md

@@ -0,0 +1,160 @@
+# TabDateSelect
+
+## 简介
+标签日期选择器 - 一个带有标签切换功能的日期范围选择组件，支持在不同标签下选择不同的日期范围，常用于按下单日期、按收货日期等场景。
+
+## API
+
+### Props
+| 属性 | 说明 | 类型 | 默认值 | 必填 |
+|------|------|------|--------|------|
+| tabs | 切换 tabs 配置数组，每项包含 text（显示文本）、value（唯一标识）、min（最小可选日期）、max（最大可选日期） | array | - | 是 |
+| selectedTab | 选中的 tab value 值 | any | - | 否 |
+| begin | 开始日期 | object(Date) | - | 否 |
+| end | 结束日期 | object(Date) | - | 否 |
+| onSelect | 确定按钮点击回调，接收参数 { selectedTab, begin, end, serviceTimeId } | function | - | 是 |
+| serviceTimeList | 运营周期列表，用于动态调整可选日期范围，每项包含 value 和 text | array | - | 否 |
+
+### 静态方法
+| 方法名 | 说明 | 参数 | 返回值 |
+|--------|------|------|--------|
+| TabDateSelect.render | 以弹窗形式渲染日期选择器 | { title, tabs, selectedTab, begin, end, serviceTimeList } | Promise，成功时返回 { selectedTab, begin, end, serviceTimeId } |
+| TabDateSelect.hide | 隐藏当前显示的日期选择器弹窗 | 无 | 无 |
+
+## 示例
+
+### 基础用法
+```jsx
+import { TabDateSelect } from '@gm-mobile/react'
+import moment from 'moment'
+
+const tabs = [
+  {
+    text: '按下单日期',
+    value: 1,
+    min: moment().subtract(365, 'day').toDate(),
+    max: moment().toDate(),
+  },
+  {
+    text: '按收货日期',
+    value: 2,
+    min: moment().subtract(365, 'day').toDate(),
+    max: moment().add(30, 'days').toDate(),
+  },
+]
+
+TabDateSelect.render({
+  title: '选择日期',
+  tabs,
+  selectedTab: 1,
+  begin: moment().add(-5, 'days').toDate(),
+  end: moment().toDate(),
+}).then(({ selectedTab, begin, end }) => {
+  console.log('选中标签:', selectedTab)
+  console.log('开始日期:', begin)
+  console.log('结束日期:', end)
+})
+```
+
+### 带运营时间的用法
+```jsx
+import { TabDateSelect } from '@gm-mobile/react'
+import moment from 'moment'
+
+const tabs = [
+  {
+    text: '按下单日期',
+    value: 1,
+    min: moment().subtract(365, 'day').toDate(),
+    max: moment().toDate(),
+    selectedServiceTime: {
+      text: '全天',
+      value: 'all_day',
+    },
+  },
+  {
+    text: '按收货日期',
+    value: 2,
+    min: moment().subtract(365, 'day').toDate(),
+    max: moment().add(30, 'days').toDate(),
+    selectedServiceTime: {
+      text: '上午',
+      value: 'morning',
+    },
+  },
+]
+
+const serviceTimeList = [
+  { text: '全天', value: 'all_day' },
+  { text: '上午', value: 'morning' },
+  { text: '下午', value: 'afternoon' },
+]
+
+TabDateSelect.render({
+  title: '选择日期',
+  tabs,
+  selectedTab: 2,
+  serviceTimeList,
+  begin: moment().toDate(),
+  end: moment().add(7, 'days').toDate(),
+}).then(({ selectedTab, begin, end, serviceTimeId }) => {
+  console.log('选中标签:', selectedTab)
+  console.log('开始日期:', begin)
+  console.log('结束日期:', end)
+  console.log('运营时间ID:', serviceTimeId)
+})
+```
+
+### 直接嵌入页面使用
+```jsx
+import { TabDateSelect } from '@gm-mobile/react'
+import moment from 'moment'
+
+function MyComponent() {
+  const [result, setResult] = useState(null)
+
+  const tabs = [
+    {
+      text: '按下单日期',
+      value: 1,
+      min: moment().subtract(365, 'day').toDate(),
+      max: moment().toDate(),
+    },
+    {
+      text: '按收货日期',
+      value: 2,
+      min: moment().subtract(365, 'day').toDate(),
+      max: moment().add(30, 'days').toDate(),
+    },
+  ]
+
+  return (
+    <div>
+      <TabDateSelect
+        tabs={tabs}
+        selectedTab={1}
+        begin={moment().add(-5, 'days').toDate()}
+        end={moment().toDate()}
+        onSelect={({ selectedTab, begin, end }) => {
+          setResult({ selectedTab, begin, end })
+        }}
+      />
+      {result && (
+        <div>
+          <p>选中标签: {result.selectedTab}</p>
+          <p>日期范围: {moment(result.begin).format('YYYY-MM-DD')} ~ {moment(result.end).format('YYYY-MM-DD')}</p>
+        </div>
+      )}
+    </div>
+  )
+}
+```
+
+## 注意事项
+- tabs 配置中的 min 和 max 必须是 Date 对象，建议使用 moment.js 创建
+- 当切换 tab 时，日期会自动重置为当前 tab 的 max 日期
+- 如果提供了 serviceTimeList，组件会在 tab 标签下方显示运营时间选择器，切换运营时间时会根据服务时间限制自动调整可选日期范围
+- TabDateSelect.render 返回的是 Promise，成功时 resolve，点击取消或遮罩时 reject
+- begin 和 end 如果不提供，默认会使用当前选中 tab 的 max 日期
+- 组件内部使用了 RangeCalendar 组件，支持单选和范围选择
+- onSelect 回调会在点击确定按钮时触发，返回的 begin 和 end 都是 Date 对象