@beppla/tapas-ui 1.5.2 → 1.5.6

package/commonjs/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/commonjs/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/commonjs/MessageBox/MessageBox.js

@@ -28,6 +28,10 @@ const MessageBox = ({
   onConfirm
 }) => {
   const theme = (0, _themed.useTheme)();
+  const {
+    width: windowWidth
+  } = (0, _reactNative.useWindowDimensions)();
+  const isPhone = windowWidth <= 430;
   const styles = useStyles();
   const [modalVisible, setModalVisible] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
@@ -69,7 +73,9 @@ const MessageBox = ({
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.modalContainer,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.modalContent,
+        style: [styles.modalContent, isPhone && {
+          width: windowWidth - 32
+        }],
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.messagebox_header,
           children: [stateIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {

package/commonjs/MessageBox/MessageBox.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_themed","_TapasIcon","_interopRequireDefault","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MessageBox","state","title","text","icon","visible","confirmBtnText","closeBtnText","hideFooter","hideCloseBtn","hideConfirmBtn","descNumberOfLines","onVisibilityChange","onClose","onConfirm","theme","useTheme","styles","useStyles","modalVisible","setModalVisible","useState","useEffect","Boolean","stateIcon","useMemo","handleClose","useCallback","handleConfirm","handleRequestClose","jsx","Modal","animationType","transparent","onRequestClose","children","View","style","modalContainer","jsxs","modalContent","messagebox_header","messagebox_header_icon","name","size","color","colors","primary","messagebox_header_txt_con","Text","messagebox_header_txt","numberOfLines","ellipsizeMode","messagebox_main","messagebox_main_txt","messagebox_footer","Pressable","messagebox_btn","onPress","messagebox_btn_txt","backgroundColor","white","makeStyles","flex","justifyContent","alignItems","zIndex","width","borderRadius","display","flexDirection","padding","gap","height","alignContent","overflow","fontSize","fontWeight","secondary","paddingLeft","paddingRight","_default","exports","withTheme"],"sourceRoot":"../../../components","sources":["MessageBox/MessageBox.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_themed","_TapasIcon","_interopRequireDefault","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MessageBox","state","title","text","icon","visible","confirmBtnText","closeBtnText","hideFooter","hideCloseBtn","hideConfirmBtn","descNumberOfLines","onVisibilityChange","onClose","onConfirm","theme","useTheme","width","windowWidth","useWindowDimensions","isPhone","styles","useStyles","modalVisible","setModalVisible","useState","useEffect","Boolean","stateIcon","useMemo","handleClose","useCallback","handleConfirm","handleRequestClose","jsx","Modal","animationType","transparent","onRequestClose","children","View","style","modalContainer","jsxs","modalContent","messagebox_header","messagebox_header_icon","name","size","color","colors","primary","messagebox_header_txt_con","Text","messagebox_header_txt","numberOfLines","ellipsizeMode","messagebox_main","messagebox_main_txt","messagebox_footer","Pressable","messagebox_btn","onPress","messagebox_btn_txt","backgroundColor","white","makeStyles","flex","justifyContent","alignItems","zIndex","borderRadius","display","flexDirection","padding","gap","height","alignContent","overflow","fontSize","fontWeight","secondary","paddingLeft","paddingRight","_default","exports","withTheme"],"sourceRoot":"../../../components","sources":["MessageBox/MessageBox.tsx"],"mappings":"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","ignoreList":[]}

package/commonjs/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` 色，取消按钮无背景色

package/commonjs/Navigation/README.md

@@ -0,0 +1,197 @@
+# Navigation
+
+侧边导航栏组件，提供可展开/折叠的垂直导航菜单。支持导航项（navItems）和系统项（systemItems）两层分组，收起时仅显示图标，展开时显示图标和文本。
+
+## 功能特性
+
+- 可展开/折叠的侧边导航（收起 56px，展开 336px）
+- 导航项和系统项两层分组（系统项固定在底部）
+- 点击 Logo 切换展开/折叠状态
+- 选中项高亮显示（展开时背景高亮，收起时图标高亮）
+- 移动端支持背景遮罩层（点击遮罩关闭导航）
+- 可配置权限信息（`permissions` 字段）
+- 支持 `selectedIndex` 受控选中
+- 可选集成 React Navigation 自动路由导航
+- 自定义 Logo 图片
+
+## 安装使用
+
+```tsx
+import { Navigation, NavItem, NavItemType, SelectedItem } from '@beppla/tapas-ui';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| navItems | `NavItem[]` | - | 导航项数组 |
+| systemItems | `NavItem[]` | - | 系统项数组（显示在底部） |
+| logoImg | `ImageSourcePropType` | - | Logo 图片资源 |
+| expanded | `boolean` | `false` | 是否展开导航菜单 |
+| onItemPress | `(item: NavItem) => void` | - | 导航项点击回调 |
+| onLogoPress | `() => void` | - | Logo 点击回调 |
+| defaultSelectedItem | `SelectedItem` | - | 默认选中项 |
+| selectedIndex | `number` | - | 选中项索引（受控模式，仅匹配 navItems） |
+| visible | `boolean` | `true` | 导航栏是否可见 |
+| onMaskPress | `() => void` | - | 背景遮罩点击回调（移动端） |
+| navigation | `{ navigate: (routeName: string, params?: any) => void }` | - | React Navigation 对象（可选） |
+
+## 类型定义
+
+### NavItem
+
+```tsx
+interface NavItem {
+  name: string;              // 项目名称（展开时显示）
+  iconName: string;          // TapasIcon 图标名称
+  url?: string;              // 链接 URL（可选）
+  permissions?: Permissions[]; // 权限要求（可选）
+}
+```
+
+### Permissions
+
+```tsx
+interface Permissions {
+  resource: string;  // 资源名
+  action: string;    // 操作名
+}
+```
+
+### NavItemType / SelectedItem
+
+```tsx
+enum NavItemType {
+  Nav = 'nav',       // 导航项
+  System = 'system', // 系统项
+}
+
+interface SelectedItem {
+  type: NavItemType;         // 项目类型
+  selectedItemIndex: number; // 项目索引
+}
+```
+
+## 使用示例
+
+### 基础导航
+
+```tsx
+import { Navigation, NavItem, NavItemType } from '@beppla/tapas-ui';
+
+const navItems: NavItem[] = [
+  { name: 'Dashboard', iconName: 'home' },
+  { name: 'Analytics', iconName: 'vector' },
+  { name: 'Products', iconName: 'product_items' },
+  { name: 'Messages', iconName: 'chat' },
+];
+
+const systemItems: NavItem[] = [
+  { name: 'Settings', iconName: 'settings' },
+  { name: 'Refresh', iconName: 'refresh' },
+];
+
+export default function App() {
+  return (
+    <Navigation
+      navItems={navItems}
+      systemItems={systemItems}
+      logoImg={require('./logo.png')}
+      defaultSelectedItem={{
+        type: NavItemType.Nav,
+        selectedItemIndex: 0,
+      }}
+    />
+  );
+}
+```
+
+### 带点击回调
+
+```tsx
+<Navigation
+  navItems={navItems}
+  systemItems={systemItems}
+  logoImg={require('./logo.png')}
+  onItemPress={(item) => {
+    console.log('Selected:', item.name);
+    setCurrentPage(item.name);
+  }}
+/>
+```
+
+### 受控选中索引
+
+```tsx
+const [selectedIdx, setSelectedIdx] = useState(0);
+
+<Navigation
+  navItems={navItems}
+  systemItems={systemItems}
+  logoImg={require('./logo.png')}
+  selectedIndex={selectedIdx}
+  onItemPress={(item) => {
+    const idx = navItems.findIndex(n => n.name === item.name);
+    if (idx >= 0) setSelectedIdx(idx);
+  }}
+/>
+```
+
+### 与 React Navigation 集成
+
+```tsx
+import { useNavigation } from '@react-navigation/native';
+
+const navigation = useNavigation();
+
+<Navigation
+  navItems={[
+    { name: 'Home', iconName: 'home' },
+    { name: 'Details', iconName: 'info' },
+  ]}
+  logoImg={require('./logo.png')}
+  navigation={navigation}
+/>
+```
+
+### 完整布局示例
+
+```tsx
+import { View, Text } from 'react-native';
+import { Navigation, NavItem } from '@beppla/tapas-ui';
+import { useState } from 'react';
+
+const navItems: NavItem[] = [
+  { name: 'Dashboard', iconName: 'home' },
+  { name: 'Products', iconName: 'product_items' },
+  { name: 'Orders', iconName: 'manufacturing' },
+];
+
+export default function App() {
+  const [page, setPage] = useState('Dashboard');
+
+  return (
+    <View style={{ flexDirection: 'row', height: '100%' }}>
+      <Navigation
+        navItems={navItems}
+        logoImg={require('./logo.png')}
+        onItemPress={(item) => setPage(item.name)}
+      />
+      <View style={{ flex: 1, padding: 16 }}>
+        <Text>{page} Content</Text>
+      </View>
+    </View>
+  );
+}
+```
+
+## 注意事项
+
+- 导航栏默认收起状态（宽度 56px），点击 Logo 切换展开（336px）/折叠
+- 桌面端点击 Logo 触发 `onLogoPress` 并切换展开状态；移动端点击 Logo 触发 `onMaskPress`
+- 展开时会在导航栏外显示半透明遮罩层（`rgba(0,0,0,0.5)`），点击遮罩可关闭
+- `selectedIndex` 仅匹配 `navItems` 数组，不支持直接选中 `systemItems`
+- 设置 `navigation` 属性后，点击导航项会自动调用 `navigation.navigate(item.name)`
+- 导航项图标大小固定 20px，颜色为主题 `white`
+- 选中状态：展开时背景高亮（`secondary` 色），收起时图标容器高亮
+- `visible=false` 时整个导航栏不渲染