@beppla/tapas-ui 1.5.2 → 1.5.7

package/module/Layout/README.md

@@ -0,0 +1,174 @@
+# Layout
+
+应用程序主框架布局组件，整合导航栏、页眉和内容区域，并内置 Toast 和 Drawer 上下文管理。
+
+## 功能特性
+
+- 自动响应式布局（移动端导航隐藏，桌面端导航常驻左侧）
+- 集成 Navigation 导航栏组件（可选显示、可自定义替换）
+- 集成 Header 页眉组件（可自定义替换）
+- 内置 ToastProvider 和 DrawerProvider 上下文
+- 内容区域自动 ScrollView 滚动
+- 移动端通过 Header 菜单按钮控制导航栏显示/隐藏
+- 桌面端导航栏占据左侧 56px，内容区自动偏移
+
+## 安装使用
+
+```tsx
+import Layout from '@beppla/tapas-ui/components/Layout';
+// 或
+import { Layout } from '@beppla/tapas-ui';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| children | `React.ReactNode` | - | 布局主体内容 |
+| headerProps | `HeaderProps` | - | Header 组件的 Props |
+| headerComponent | `React.ReactNode` | - | 自定义 Header 组件（替换默认 Header） |
+| navigationProps | `NavigationProps` | - | Navigation 组件的 Props |
+| navigationComponent | `React.ReactNode` | - | 自定义 Navigation 组件（替换默认导航） |
+| showNavigation | `boolean` | `true` | 是否显示导航栏 |
+| testID | `string` | - | 测试 ID |
+
+## 上下文 API
+
+### DrawerContext
+
+通过 `DrawerContext` 可在 Layout 内部任意组件中控制 Drawer 的开关。
+
+```tsx
+import { useContext } from 'react';
+import { DrawerContext } from '@beppla/tapas-ui/components/Layout/DrawerContext';
+
+const { open, close, drawerInfo, setDrawerInfo } = useContext(DrawerContext);
+
+// 打开 Drawer
+open({
+  title: 'Filter',
+  component: <FilterForm />,
+  showFooter: true,
+  rightButtonText: 'Apply',
+  rightButtonOnPress: () => handleApply(),
+});
+
+// 关闭 Drawer
+close();
+```
+
+### ToastContext
+
+通过 `ToastContext` 可在 Layout 内部任意组件中显示 Toast 消息。
+
+```tsx
+import { useContext } from 'react';
+import { ToastContext } from '@beppla/tapas-ui/components/Layout/ToastContext';
+
+const { open, close } = useContext(ToastContext);
+
+// 显示 Toast
+open({ message: 'Operation succeeded', visible: true });
+
+// 关闭 Toast
+close();
+```
+
+## 使用示例
+
+### 基础用法
+
+```tsx
+import Layout from '@beppla/tapas-ui/components/Layout';
+import { Text } from 'react-native';
+
+const navItems = [
+  { name: 'Product', iconName: 'product_items' },
+  { name: 'About', iconName: 'manufacturing' },
+];
+
+export default function App() {
+  return (
+    <Layout
+      navigationProps={{
+        navItems,
+        logoImg: require('./logo.png'),
+      }}
+      headerProps={{
+        title: 'Welcome',
+        avatarSource: 'https://example.com/avatar.jpg',
+      }}
+    >
+      <Text>Main content goes here</Text>
+    </Layout>
+  );
+}
+```
+
+### 带导航切换的完整示例
+
+```tsx
+import Layout, { NavItem } from '@beppla/tapas-ui/components/Layout';
+import { useState } from 'react';
+import { Text } from 'react-native';
+
+const navItems: NavItem[] = [
+  { name: 'Home', iconName: 'home' },
+  { name: 'Products', iconName: 'product_items' },
+];
+
+const systemItems: NavItem[] = [
+  { name: 'Settings', iconName: 'settings' },
+];
+
+export default function App() {
+  const [selected, setSelected] = useState('Home');
+
+  return (
+    <Layout
+      navigationProps={{
+        navItems,
+        systemItems,
+        logoImg: require('./logo.png'),
+        onItemPress: (item) => setSelected(item.name),
+      }}
+      headerProps={{ title: selected }}
+    >
+      <Text>{selected} Page Content</Text>
+    </Layout>
+  );
+}
+```
+
+### 自定义 Header 组件
+
+```tsx
+<Layout
+  navigationProps={{ navItems, logoImg: require('./logo.png') }}
+  headerComponent={
+    <View style={{ height: 72, justifyContent: 'center', paddingHorizontal: 16 }}>
+      <Text style={{ fontSize: 20 }}>Custom Header</Text>
+    </View>
+  }
+>
+  <Text>Content</Text>
+</Layout>
+```
+
+### 隐藏导航栏
+
+```tsx
+<Layout showNavigation={false} headerProps={{ title: 'No Navigation' }}>
+  <Text>Full width content</Text>
+</Layout>
+```
+
+## 注意事项
+
+- Layout 的 index.tsx 导出版本自动包裹 ToastProvider 和 DrawerProvider，无需手动包裹
+- 移动端导航栏默认隐藏，通过 Header 左侧菜单按钮切换显示/隐藏
+- 桌面端导航栏常驻左侧（宽度 56px），内容区自动左偏移 56px
+- 自定义 `headerComponent` 会完全替代默认 Header，包括菜单按钮
+- 自定义 `navigationComponent` 会完全替代默认 Navigation
+- 内容区域使用 ScrollView 包裹，设置了 `keyboardShouldPersistTaps="handled"`
+- Toast 在桌面端显示在右上角，移动端显示在顶部

package/module/LineChart/README.md

@@ -0,0 +1,181 @@
+# LineChart
+
+折线图组件，支持单系列/多系列数据、多种曲线类型、自定义图例和 Tooltip。采用**双平台渲染**策略：Web 端使用 recharts，Native 端使用 react-native-svg-charts。
+
+## 功能特性
+
+- ✅ **双平台渲染**：Web 使用 recharts（功能完整），Native 使用 react-native-svg-charts（基础功能）
+- ✅ 支持单系列和多系列数据
+- ✅ 多种曲线类型：monotone / linear / step / natural / basis
+- ✅ 可显示/隐藏数据点（showDots）
+- ✅ 可独立控制 X 轴和 Y 轴的显示/隐藏
+- ✅ 图例支持 top / bottom / left / right 四个位置
+- ✅ 自定义图例图标类型：circle / rect / square / line
+- ✅ 自定义图例图标尺寸和文本样式
+- ✅ 自定义 Tooltip：完全自定义渲染（customTooltip）或数据格式化（tooltipFormatter）
+- ✅ 数据点点击事件回调（onLineClick）
+- ✅ Y 轴 / X 轴格式化函数
+- ✅ 响应式容器（Web 端 ResponsiveContainer）
+
+## 安装使用
+
+```tsx
+import { LineChart } from '@beppla/tapas-ui/components/LineChart';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| data | `LineChartDataPoint[] \| LineChartSeriesData[]` | (必填) | 数据源 |
+| width | `number` | - | 图表宽度 |
+| height | `number` | `300` | 图表高度 |
+| color | `string` | `'#0066CC'` | 单系列线条颜色 |
+| colors | `string[]` | - | 多系列颜色方案 |
+| showGrid | `boolean` | `true` | 是否显示网格线 |
+| showLabels | `boolean` | `true` | 是否显示标签 |
+| showXAxis | `boolean` | `true` | 是否显示 X 轴 |
+| showYAxis | `boolean` | `true` | 是否显示 Y 轴 |
+| showLegend | `boolean` | `true` | 是否显示图例 |
+| legendPosition | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | 图例位置 |
+| legendIconType | `'circle' \| 'rect' \| 'square' \| 'line'` | `'rect'` | 图例图标类型 |
+| legendIconSize | `{ width: number; height: number }` | `{ width: 18, height: 8 }` | 图例图标尺寸 |
+| legendTextStyle | `{ fontFamily?: string; fontSize?: number; fontWeight?: string \| number; letterSpacing?: number }` | Bricolage Grotesque 10px | 图例文本样式 |
+| curveType | `'monotone' \| 'linear' \| 'step' \| 'natural' \| 'basis'` | `'monotone'` | 曲线类型 |
+| showDots | `boolean` | `true` | 是否显示数据点 |
+| showArea | `boolean` | - | 是否显示面积填充 |
+| customTooltip | `(data: TooltipData) => ReactElement \| null` | - | 自定义 Tooltip 渲染函数 |
+| tooltipFormatter | `(data: TooltipData) => { title?: string; items?: Array<{ label: string; value: string \| number }> }` | - | Tooltip 数据格式化函数 |
+| contentInset | `{ top?: number; bottom?: number; left?: number; right?: number }` | `{ top: 20, bottom: 20, left: 20, right: 20 }` | 内容边距 |
+| yAxisFormat | `(value: number) => string` | - | Y 轴格式化 |
+| xAxisFormat | `(value: number, index: number) => string` | - | X 轴格式化 |
+| onLineClick | `(seriesLabel: string, dataPoint: LineChartDataPoint, dataIndex: number) => void` | - | 数据点点击回调 |
+| style | `any` | - | 容器样式 |
+| testID | `string` | - | 测试标识 |
+
+### LineChartDataPoint
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| value | `number` | 数值（必填） |
+| label | `string` | 标签 |
+
+### LineChartSeriesData
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| data | `LineChartDataPoint[]` | 数据点数组（必填） |
+| color | `string` | 线条颜色 |
+| label | `string` | 系列标签（显示在图例中） |
+
+### TooltipData
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| label | `string` | 当前数据点标签 |
+| value | `number` | 当前数据点值 |
+| dataIndex | `number` | 数据索引 |
+| seriesLabel | `string` | 系列标签 |
+
+## 使用示例
+
+### 基础用法
+
+```tsx
+<LineChart
+  data={[
+    { value: 50, label: 'Jan' },
+    { value: 75, label: 'Feb' },
+    { value: 65, label: 'Mar' },
+    { value: 90, label: 'Apr' },
+  ]}
+  height={300}
+  color="#0066CC"
+/>
+```
+
+### 多系列数据
+
+```tsx
+<LineChart
+  data={[
+    {
+      label: 'Product A',
+      color: '#00BFA5',
+      data: [
+        { value: 120, label: 'Mon' },
+        { value: 150, label: 'Tue' },
+        { value: 110, label: 'Wed' },
+      ],
+    },
+    {
+      label: 'Product B',
+      color: '#FF6B00',
+      data: [
+        { value: 100, label: 'Mon' },
+        { value: 110, label: 'Tue' },
+        { value: 90, label: 'Wed' },
+      ],
+    },
+  ]}
+  showLegend
+  legendPosition="top"
+  height={400}
+/>
+```
+
+### 极简设计图风格
+
+```tsx
+<LineChart
+  data={multiSeriesData}
+  curveType="linear"
+  showDots={false}
+  showYAxis={false}
+  showLegend
+  legendPosition="top"
+  legendIconType="rect"
+  legendIconSize={{ width: 18, height: 8 }}
+  legendTextStyle={{
+    fontFamily: 'Bricolage Grotesque, sans-serif',
+    fontSize: 10,
+    fontWeight: 400,
+    letterSpacing: 0.1,
+  }}
+/>
+```
+
+### 自定义 Tooltip
+
+```tsx
+<LineChart
+  data={storeData}
+  tooltipFormatter={(data) => ({
+    title: data.label,
+    items: [
+      { label: 'Stores', value: data.value },
+      { label: 'Revenue', value: `$${revenue[data.dataIndex]}` },
+    ],
+  })}
+/>
+```
+
+### 数据点点击事件
+
+```tsx
+<LineChart
+  data={sampleData}
+  onLineClick={(seriesLabel, dataPoint, dataIndex) => {
+    console.log(`${seriesLabel}: ${dataPoint.label} = ${dataPoint.value}`);
+  }}
+/>
+```
+
+## 注意事项
+
+- **双平台渲染**：Web 端使用 recharts（功能完整），Native 端使用 react-native-svg-charts（功能受限）
+- Native 端多系列数据**仅渲染第一个系列**
+- Native 端不支持自定义 Tooltip、图例自定义、曲线类型选择
+- 图例仅在多系列数据时显示
+- `customTooltip` 和 `tooltipFormatter` 仅 Web 端有效（鼠标悬停触发）
+- 需安装对应平台依赖：Web 需要 `recharts`，Native 需要 `react-native-svg-charts` + `react-native-svg`

package/module/ListItem/README.md

@@ -0,0 +1,122 @@
+# ListItem
+
+列表项组件，基于 @rneui/themed ListItem 封装，支持选中状态、搜索高亮、描述文本、数量角标等功能，适合构建可交互的选择列表。
+
+## 功能特性
+
+- ✅ 选中状态指示（背景色变化 + 勾选图标）
+- ✅ 搜索关键字高亮显示（name 和 desc 同时高亮）
+- ✅ 支持主标题和描述文本
+- ✅ 数量角标（number 属性，圆形背景主题色）
+- ✅ 鼠标悬停效果（Web 端 Hoverable）
+- ✅ 禁用状态，颜色置灰且不可点击
+- ✅ 首末项圆角支持（isFirst / isLast，12px 圆角）
+- ✅ 高度自定义样式：容器、标题、描述、搜索高亮
+- ✅ 文本自适应宽度，自动单行截断
+
+## 安装使用
+
+```tsx
+import ListItem from '@beppla/tapas-ui/components/ListItem/ListItem';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| item | `ItemProps` | (必填) | 列表项数据 |
+| selected | `ItemProps` | (必填) | 当前选中项（通过 value 比较） |
+| key | `number \| string` | (必填) | 唯一标识 |
+| onItemPress | `(item: ItemProps) => void` | (必填) | 点击回调 |
+| disabled | `boolean` | - | 是否禁用 |
+| isFirst | `boolean` | - | 是否为第一项（添加顶部圆角） |
+| isLast | `boolean` | - | 是否为最后一项（添加底部圆角） |
+| search | `string` | - | 搜索关键字，匹配部分高亮 |
+| containerStyle | `StyleProp<ViewStyle>` | - | 外层容器样式 |
+| itemContainerStyle | `StyleProp<ViewStyle>` | - | 项容器样式 |
+| titleContainerStyle | `StyleProp<ViewStyle>` | - | 标题容器样式 |
+| searchHighlightStyle | `StyleProp<TextStyle>` | - | 搜索高亮文本样式 |
+| titleStyle | `StyleProp<TextStyle>` | - | 标题文本样式 |
+| descStyle | `StyleProp<TextStyle>` | - | 描述文本样式 |
+| testID | `string` | - | 测试标识 |
+
+### ItemProps 接口
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| name | `string` | 显示名称（必填） |
+| value | `string \| number` | 值（必填），用于比较选中状态 |
+| id | `string \| number` | 唯一标识 |
+| hide | `boolean` | 是否隐藏 |
+| desc | `string` | 描述文本 |
+| number | `number` | 数量角标 |
+
+## 使用示例
+
+### 基础用法
+
+```tsx
+const data = [
+  { name: 'Apple', value: 'apple' },
+  { name: 'Banana', value: 'banana' },
+  { name: 'Cherry', value: 'cherry' },
+];
+
+const [selected, setSelected] = useState(data[0]);
+
+{data.map((item, index) => (
+  <ListItem
+    key={index}
+    item={item}
+    selected={selected}
+    onItemPress={(value) => setSelected(value)}
+    isFirst={index === 0}
+    isLast={index === data.length - 1}
+  />
+))}
+```
+
+### 带描述和搜索高亮
+
+```tsx
+<ListItem
+  key={0}
+  item={{ name: 'John', value: 'john', desc: 'Manager' }}
+  selected={selected}
+  onItemPress={setSelected}
+  search="jo"
+  searchHighlightStyle={{ color: 'red' }}
+/>
+```
+
+### 带数量角标
+
+```tsx
+<ListItem
+  key={0}
+  item={{ name: 'Orders', value: 'orders', number: 5 }}
+  selected={selected}
+  onItemPress={setSelected}
+/>
+```
+
+### 禁用状态
+
+```tsx
+<ListItem
+  key={0}
+  item={{ name: 'Unavailable', value: 'unavailable' }}
+  selected={selected}
+  onItemPress={setSelected}
+  disabled
+/>
+```
+
+## 注意事项
+
+- 选中状态通过比较 `selected.value === item.value` 判断
+- 当 `item.number` 存在时显示数量角标（白字主题色背景），否则选中时显示勾选图标
+- 禁用状态下点击不会触发 `onItemPress`
+- `isFirst` / `isLast` 用于列表首末项圆角（12px），需手动传入
+- 搜索高亮使用正则分割文本，大小写不敏感，同时作用于 name 和 desc 字段
+- 列表项固定高度 48px

package/module/MessageBox/MessageBox.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { useEffect, useState, useCallback, useMemo } from "react";
-import { View, Text, Modal, Pressable } from "react-native";
+import { View, Text, Modal, Pressable, useWindowDimensions } from "react-native";
 import { withTheme, makeStyles, useTheme } from "@rneui/themed";
 import TapasIcon from "../Icons/TapasIcon";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -22,6 +22,10 @@ const MessageBox = ({
   onConfirm
 }) => {
   const theme = useTheme();
+  const {
+    width: windowWidth
+  } = useWindowDimensions();
+  const isPhone = windowWidth <= 430;
   const styles = useStyles();
   const [modalVisible, setModalVisible] = useState(false);
   useEffect(() => {
@@ -63,7 +67,9 @@ const MessageBox = ({
     children: /*#__PURE__*/_jsx(View, {
       style: styles.modalContainer,
       children: /*#__PURE__*/_jsxs(View, {
-        style: styles.modalContent,
+        style: [styles.modalContent, isPhone && {
+          width: windowWidth - 32
+        }],
         children: [/*#__PURE__*/_jsxs(View, {
           style: styles.messagebox_header,
           children: [stateIcon ? /*#__PURE__*/_jsx(View, {

package/module/MessageBox/MessageBox.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","useCallback","useMemo","View","Text","Modal","Pressable","withTheme","makeStyles","useTheme","TapasIcon","jsx","_jsx","jsxs","_jsxs","MessageBox","state","title","text","icon","visible","confirmBtnText","closeBtnText","hideFooter","hideCloseBtn","hideConfirmBtn","descNumberOfLines","onVisibilityChange","onClose","onConfirm","theme","styles","useStyles","modalVisible","setModalVisible","Boolean","stateIcon","handleClose","handleConfirm","handleRequestClose","animationType","transparent","onRequestClose","children","style","modalContainer","modalContent","messagebox_header","messagebox_header_icon","name","size","color","colors","primary","messagebox_header_txt_con","messagebox_header_txt","numberOfLines","ellipsizeMode","messagebox_main","messagebox_main_txt","messagebox_footer","messagebox_btn","onPress","messagebox_btn_txt","backgroundColor","white","flex","justifyContent","alignItems","zIndex","width","borderRadius","display","flexDirection","padding","gap","height","alignContent","overflow","fontSize","fontWeight","secondary","paddingLeft","paddingRight"],"sourceRoot":"../../../components","sources":["MessageBox/MessageBox.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useState","useCallback","useMemo","View","Text","Modal","Pressable","useWindowDimensions","withTheme","makeStyles","useTheme","TapasIcon","jsx","_jsx","jsxs","_jsxs","MessageBox","state","title","text","icon","visible","confirmBtnText","closeBtnText","hideFooter","hideCloseBtn","hideConfirmBtn","descNumberOfLines","onVisibilityChange","onClose","onConfirm","theme","width","windowWidth","isPhone","styles","useStyles","modalVisible","setModalVisible","Boolean","stateIcon","handleClose","handleConfirm","handleRequestClose","animationType","transparent","onRequestClose","children","style","modalContainer","modalContent","messagebox_header","messagebox_header_icon","name","size","color","colors","primary","messagebox_header_txt_con","messagebox_header_txt","numberOfLines","ellipsizeMode","messagebox_main","messagebox_main_txt","messagebox_footer","messagebox_btn","onPress","messagebox_btn_txt","backgroundColor","white","flex","justifyContent","alignItems","zIndex","borderRadius","display","flexDirection","padding","gap","height","alignContent","overflow","fontSize","fontWeight","secondary","paddingLeft","paddingRight"],"sourceRoot":"../../../components","sources":["MessageBox/MessageBox.tsx"],"mappings":"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","ignoreList":[]}

package/module/MessageBox/README.md

@@ -0,0 +1,120 @@
+# MessageBox
+
+模态对话框组件，用于显示重要信息和获取用户确认。支持 success、warning、error 三种状态，提供灵活的按钮配置（隐藏确认/取消按钮、隐藏整个底部栏），适合操作确认、错误提示、成功反馈等场景。
+
+## 功能特性
+
+- ✅ 支持 success、warning、error 三种状态
+- ✅ 状态自动匹配图标（check_circle / warning / error）
+- ✅ 可自定义图标名称覆盖默认状态图标
+- ✅ 灵活的按钮配置：隐藏确认按钮、隐藏取消按钮、隐藏整个底部栏
+- ✅ 自定义确认和取消按钮文本
+- ✅ 描述文本行数限制（descNumberOfLines）
+- ✅ 淡入淡出动画（animationType="fade"）
+- ✅ 透明遮罩背景
+- ✅ 支持 onVisibilityChange 双向绑定控制
+
+## 安装使用
+
+```tsx
+import { MessageBox } from '@beppla/tapas-ui';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| visible | `boolean` | - | 是否显示对话框 |
+| state | `'success' \| 'warning' \| 'error'` | - | 状态类型 |
+| icon | `string` | 根据 state 自动选择 | 自定义图标名称 |
+| title | `string` | - | 标题文本 |
+| text | `string` | - | 描述内容 |
+| hideFooter | `boolean` | `false` | 是否隐藏整个底部按钮栏 |
+| hideCloseBtn | `boolean` | `false` | 是否隐藏取消按钮 |
+| hideConfirmBtn | `boolean` | `false` | 是否隐藏确认按钮 |
+| confirmBtnText | `string` | `'Confirm'` | 确认按钮文本 |
+| closeBtnText | `string` | `'Close'` | 取消按钮文本 |
+| descNumberOfLines | `number` | `3` | 描述文本最大行数 |
+| onVisibilityChange | `(val: boolean) => void` | - | 可见状态变化回调 |
+| onConfirm | `() => void` | - | 确认按钮点击回调 |
+| onClose | `() => void` | - | 取消按钮点击回调 |
+
+## 使用示例
+
+### 基础用法
+
+```tsx
+const [visible, setVisible] = useState(false);
+
+<MessageBox
+  visible={visible}
+  title="Confirm"
+  text="Are you sure you want to proceed?"
+  confirmBtnText="OK"
+  closeBtnText="Cancel"
+  onVisibilityChange={setVisible}
+  onConfirm={() => {
+    handleConfirm();
+    setVisible(false);
+  }}
+  onClose={() => setVisible(false)}
+/>
+```
+
+### 不同状态
+
+```tsx
+<MessageBox
+  visible={visible}
+  state="success"
+  title="Success"
+  text="Operation completed!"
+  hideCloseBtn
+  confirmBtnText="OK"
+  onConfirm={() => setVisible(false)}
+/>
+
+<MessageBox
+  visible={visible}
+  state="error"
+  title="Error"
+  text="Operation failed, please retry."
+  confirmBtnText="Retry"
+  closeBtnText="Close"
+  onConfirm={() => handleRetry()}
+  onClose={() => setVisible(false)}
+/>
+```
+
+### 仅确认按钮
+
+```tsx
+<MessageBox
+  visible={visible}
+  title="Notice"
+  text="This is a notification."
+  hideCloseBtn={true}
+  confirmBtnText="Got it"
+  onConfirm={() => setVisible(false)}
+/>
+```
+
+### 无按钮（点击遮罩关闭）
+
+```tsx
+<MessageBox
+  visible={visible}
+  title="Info"
+  text="Click backdrop to close."
+  hideFooter={true}
+  onVisibilityChange={setVisible}
+/>
+```
+
+## 注意事项
+
+- 组件内部维护 `modalVisible` 状态，与外部 `visible` 同步
+- 关闭优先级：`onClose` > `onVisibilityChange` > 内部 `setModalVisible(false)`
+- 对话框固定宽度 392px，居中显示
+- 需在 `ThemeProvider` 内使用
+- 确认按钮使用主题 `primary` 色，取消按钮无背景色