@beppla/tapas-ui 1.0.56 → 1.0.57

package/components/Dropdown/Dropdown.tsx

@@ -136,8 +136,8 @@ const useStyles = makeStyles((theme) => ({
   // Modal 模式样式
   modalContainer: {
     flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
+    justifyContent: "flex-start", // 改为顶部对齐，与 CustomDropdown 保持一致
+    alignItems: "stretch", // 改为拉伸对齐，与 CustomDropdown 保持一致
   },
   modalIcon: {
     color: theme.colors.primary,
@@ -198,6 +198,7 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     flexDirection: "row",
     justifyContent: "space-between",
+    alignItems: "center", // 确保垂直居中对齐
     minHeight: 40,
     width: "100%",
     overflow: "hidden",
@@ -212,6 +213,7 @@ const useStyles = makeStyles((theme) => ({
     paddingRight: 12,
     paddingTop: 9,
     paddingBottom: 9,
+    alignItems: "center", // 确保垂直居中对齐
   },
   alignCenter: {
     alignSelf: "center",
@@ -471,10 +473,13 @@ const Dropdown: React.FC<DropdownProps> = ({
             (showSelectedValue || (noLabelAnim && label)) ? styles.modalBtn : null,
             dropdownType === "solid" ? styles.modalSolidBtn : null,
             dropdownType === "solid" && radius ? { borderRadius: radius } : null,
+            // 统一主体容器的位置，无论是否使用 customPopoverContent
             label && !noLabelAnim ? { marginTop: 7 } : null,
             noLabelAnim && label && backgroundColor ? { backgroundColor } : null,
             state === "error" ? { borderColor: theme.theme.colors.error } : null,
             props.disabled ? { borderColor: theme.theme.colors.grey3 } : null,
+            // 确保主体容器始终有统一的垂直对齐
+            { alignItems: "center" },
           ]}
           disabled={props.disabled}
           onPress={openDropdown}
@@ -581,6 +586,16 @@ const Dropdown: React.FC<DropdownProps> = ({
                                 ? theme.theme.colors.grey4 || "#f0f0f0"
                                 : "transparent",
                             },
+                            // 第一个 item 添加左上和右上圆角
+                            index === 0 && {
+                              borderTopLeftRadius: 12,
+                              borderTopRightRadius: 12,
+                            },
+                            // 最后一个 item 添加左下和右下圆角
+                            index === dropdownItems.length - 1 && {
+                              borderBottomLeftRadius: 12,
+                              borderBottomRightRadius: 12,
+                            },
                             showCheckedStatusInList && selectedItemKey === item.key ? {
                                 backgroundColor: theme.theme.colors.grey4 || "#f0f0f0",
                               } : null,
@@ -758,6 +773,11 @@ const Dropdown: React.FC<DropdownProps> = ({
       </Pressable>
       <ScrollView style={{width: subWidth, height: subHeight}}>
         {options?.map((item, index) => {
+          const visibleItems = options.filter(item => !item.hide);
+          const currentVisibleIndex = visibleItems.findIndex(visibleItem => visibleItem === item);
+          const isFirst = currentVisibleIndex === 0;
+          const isLast = currentVisibleIndex === visibleItems.length - 1;
+          
           return (
             !item.hide && (
               <CustomListItem
@@ -773,6 +793,8 @@ const Dropdown: React.FC<DropdownProps> = ({
                 key={index}
                 item={item}
                 selected={selected_old}
+                isFirst={isFirst}
+                isLast={isLast}
               />
             )
           );

package/components/Dropdown/InputDropdown.tsx

@@ -152,6 +152,11 @@ const InputDropdown: React.FC<InputDropdownProps> = ({
       {Array.isArray(list) ? (
         <ScrollView style={{width: subWidth, maxHeight: subHeight}}>
           {list?.map((item, index) => {
+            const visibleItems = list.filter(item => !item.hide);
+            const currentVisibleIndex = visibleItems.findIndex(visibleItem => visibleItem === item);
+            const isFirst = currentVisibleIndex === 0;
+            const isLast = currentVisibleIndex === visibleItems.length - 1;
+            
             return (
               !item.hide && (
                 <CustomListItem
@@ -164,6 +169,8 @@ const InputDropdown: React.FC<InputDropdownProps> = ({
                   key={index}
                   item={item}
                   selected={selected}
+                  isFirst={isFirst}
+                  isLast={isLast}
                 />
               )
             );

package/components/ListItem/ListItem.tsx

@@ -32,6 +32,10 @@ export interface Props extends ListItemProps {
   searchHighlightStyle?: StyleProp<TextStyle>;
   titleStyle?: StyleProp<TextStyle>;
   descStyle?: StyleProp<TextStyle>;
+  /** 是否为第一个 item */
+  isFirst?: boolean;
+  /** 是否为最后一个 item */
+  isLast?: boolean;
   search?: string;
   testID?: string;
 }
@@ -140,6 +144,8 @@ const CustomListItem: React.FC<Props> = ({
   searchHighlightStyle,
   titleStyle,
   descStyle,
+  isFirst,
+  isLast,
   testID,
   ...props
 }) => {
@@ -184,6 +190,16 @@ const CustomListItem: React.FC<Props> = ({
           selected?.value === item?.value
             ? styles.selectedItem
             : isHovered && styles.hovered,
+          // 第一个 item 添加左上和右上圆角
+          isFirst && {
+            borderTopLeftRadius: 12,
+            borderTopRightRadius: 12,
+          },
+          // 最后一个 item 添加左下和右下圆角
+          isLast && {
+            borderBottomLeftRadius: 12,
+            borderBottomRightRadius: 12,
+          },
         ]}
       >
         <Hoverable

package/package/CHANGELOG.md

@@ -0,0 +1,383 @@
+# 📝 更新日志
+
+所有重要的项目变更都会记录在这个文件中。
+
+格式基于 [Keep a Changelog](https://keepachangelog.com/zh-CN/1.0.0/)，
+版本号遵循 [语义化版本](https://semver.org/lang/zh-CN/)。
+
+## [1.0.57] - 2024-12-19
+
+### 修复
+- 🐛 **TapasDropdown 最外层容器对齐模式统一**：修复使用 `customPopoverContent` 和不使用时的对齐不一致问题
+  - 将 `modalContainer` 的 `justifyContent` 改为 `flex-start`，`alignItems` 改为 `stretch`
+  - 确保两种模式都采用顶部对齐和拉伸对齐，保持视觉一致性
+  - 添加 `CustomPopoverContent` Storybook 案例演示修复效果
+
+## [1.0.56] - 2024-12-19
+
+### 新增功能
+- ✨ **DataCell 智能下拉菜单位置计算**：实现基于可用空间的智能位置选择
+  - 新增 `onDropdownStateChange` 回调函数，支持父组件监听下拉菜单状态变化
+  - 新增 `gridInfo` prop，支持传递 Grid 相关信息用于精确位置计算
+  - 智能计算下拉菜单实际显示大小，包括文本长度、边框、内边距等因素
+  - 根据可用空间自动选择显示在按钮上方或下方
+  - 添加安全边距，确保下拉菜单不会紧贴边界
+  - 支持长文本自适应高度和宽度计算
+
+### 修复
+- 🐛 **DataCell 下拉菜单互斥逻辑优化**：修复下拉菜单状态切换问题
+  - 改进互斥排它逻辑，避免状态冲突
+  - 优化下拉菜单打开/关闭的时序处理
+  - 确保同一时间只有一个下拉菜单显示
+  - 修复下拉菜单层级和显示问题
+
+### 测试
+- ✅ **DataCell 测试覆盖增强**：添加新功能的全面测试
+  - 新增 `onDropdownStateChange` 回调函数测试
+  - 新增 `gridInfo` prop 测试
+  - 确保新功能向后兼容性
+
+## [1.0.54] - 2024-12-19
+
+### 新增功能
+- ✨ **Grid 条件性 overflow 设置**：实现智能的 overflow 控制机制
+  - 新增 `hasActions` prop 到 `StaticFixedSizeGrid` 组件
+  - 支持通过函数动态判断哪些单元格需要 `overflow: "visible"`
+  - 只在有 actions 按钮的单元格设置 `overflow: "visible"`，其他保持 `overflow: "hidden"`
+  - 提供更精确的性能优化和布局控制
+  - 向后兼容：不提供 `hasActions` 时默认使用 `overflow: "hidden"`
+
+### 修复
+- 🐛 **Grid 粘性列头 overflow 设置优化**：进一步解决下拉菜单截断问题
+  - 修改了 Grid 组件中粘性列头的 `overflow: "hidden"` 为 `overflow: "visible"`
+  - 这是 Grid 组件中 5 处 overflow 设置之一，专门针对粘性列头区域
+  - 与 DataCell 的 overflow 优化配合，提供更完整的下拉菜单显示支持
+  - 确保在粘性列头区域的下拉菜单也能完整显示
+
+## [1.0.53] - 2024-12-19
+
+### 修复
+- 🐛 **Grid 粘性列头 overflow 设置优化**：进一步解决下拉菜单截断问题
+  - 修改了 Grid 组件中粘性列头的 `overflow: "hidden"` 为 `overflow: "visible"`
+  - 这是 Grid 组件中 5 处 overflow 设置之一，专门针对粘性列头区域
+  - 与 DataCell 的 overflow 优化配合，提供更完整的下拉菜单显示支持
+  - 确保在粘性列头区域的下拉菜单也能完整显示
+
+## [1.0.52] - 2024-12-19
+
+### 修复
+- 🐛 **DataCell 下拉菜单 Grid overflow 限制修复**：解决了下拉菜单被 Grid 组件 overflow 截断的问题
+  - 识别出 Grid 组件中的 5 处 `overflow: "hidden"` 设置是导致下拉菜单被截断的根本原因
+  - 优化了下拉菜单的定位策略，使用动态位置计算
+  - 增强了 z-index 层级管理，确保下拉菜单显示在最上层
+  - 改进了容器 overflow 设置，突破 Grid 的 overflow 限制
+  - 修复了 React Native 环境下的定位兼容性问题
+
+## [1.0.51] - 2024-12-19
+
+### 修复
+- 🐛 **DataCell 按钮居中和下拉菜单显示修复**：修复了 TapasDataCell 的两个关键问题
+  - 修复了当只有操作按钮没有文本内容时，按钮偏离单元格中心的问题
+  - 动态调整按钮 margin，有文本内容时按钮在右侧，无文本内容时按钮居中
+  - 修复了下拉菜单被单元格样式截断的问题
+  - 增加了下拉菜单的 z-index 和 overflow 设置，确保完整显示
+  - 优化了容器样式，确保下拉菜单不被父容器隐藏
+
+## [1.0.50] - 2024-12-19
+
+### 修复
+- 🐛 **DataCell Grid 样式冲突修复**：修复了 TapasDataCell 在 Grid 中的样式冲突问题
+  - 移除了 DataCell 容器的边框样式，避免与 Grid 单元格边框冲突
+  - 改善了操作按钮在 Grid 单元格中的居中显示
+  - 优化了容器布局，确保在 Grid 环境中正确渲染
+  - 添加了 Grid Story 测试案例，展示 moreActions 功能
+  - 解决了按钮显示不居中和样式冲突的问题
+
+## [1.0.49] - 2024-12-19
+
+### 修复
+- 🐛 **DataCell 更多操作修复**：修复了 TapasDataCell 组件中 moreActions 下拉显示问题
+  - 添加了缺失的 `attachMoreAction` 属性到 TapasDataCellProps 接口
+  - 修复了多个操作时只触发第一个操作的问题
+  - 现在 `attachMoreAction` 回调可以正确处理多个操作项
+  - 解决了 tapas-orderly-client 中 Ongoing.tsx 的 moreActions 下拉显示问题
+
+## [1.0.48] - 2024-12-19
+
+### 修复
+- 🐛 **StickyColumn 宽度修复**：修复了 StaticFixedSizeGrid 中 StickyColumn 的宽度问题
+  - 将硬编码的 `width: 1` 改为使用计算出的 `stickyColumnsWidth`
+  - 修复了 VariableSizeGrid 使用错误的 `style.width` 而不是正确的 `rest.width`
+  - 修复了外层容器宽度计算，使用 `rest.width - stickyColumnsWidth`
+  - 解决了 sticky column 父容器宽度显示不正确的问题
+  - 修复了 tapas-orderly-client 中 Ongoing.tsx 的宽度显示问题
+
+## [1.0.47] - 2024-12-19
+
+### 测试和修复
+- 🧪 **Grid 组件测试完善**：为 StaticFixedSizeGrid 组件添加了全面的测试覆盖
+  - 添加了 7 个测试用例，覆盖基本渲染、属性处理、粘性列功能
+  - 测试单列、多列、空列、未定义列的粘性列场景
+  - 测试自定义样式属性处理
+  - 修复了 `rowHeight` 属性类型问题（从数字改为函数）
+  - 所有测试通过，确保组件稳定性
+
+### 调试和优化
+- 🔍 **Grid 组件调试**：添加了调试日志来诊断 `column-header-sticky` 父容器宽度问题
+  - 确认了 `style` prop 中 `width: 400` 的来源
+  - 为后续修复提供了准确的调试信息
+
+## [1.0.46] - 2024-12-19
+
+### 新增功能
+- ✨ **Dropdown 自定义定位**：为 Dropdown 组件添加了自定义定位功能
+  - 新增 `subContainerTop` 和 `subContainerLeft` 属性
+  - 支持精确控制下拉框的位置
+  - 自定义值具有最高优先级，可覆盖 `subContainerPosition` 的默认行为
+  - 完美解决不同环境下的定位问题（Storybook、真实 RN、测试环境）
+
+### 测试和文档
+- 🧪 **测试用例更新**：添加了自定义定位功能的测试用例
+  - 测试自定义定位属性的接受
+  - 测试自定义定位的优先级
+- 📚 **Storybook 故事更新**：新增 `CustomPositioning` 故事
+  - 展示默认定位与自定义定位的对比
+  - 提供使用示例和视觉对比
+
+## [1.0.45] - 2024-12-19
+
+### 修复
+- 🔧 **Dropdown 组件定位修复**：修复了 Storybook 环境中的下拉框定位问题
+  - 调整了 `top` 值以配合 SafeAreaProvider 的 padding
+  - 移除了不支持的 CSS 属性（whiteSpace, textOverflow）
+  - 优化了 Storybook 装饰器的 padding 设置
+- 🔧 **Storybook 故事修复**：修复了 Dropdown.stories.tsx 中的 ESLint 错误
+  - 更新了 Storybook 导入路径
+  - 修复了未使用变量警告
+  - 替换了颜色字面量为主题颜色
+
+## [1.0.44] - 2024-10-23
+
+### 修复
+- 🔧 **Shell 组件修复**：修复了 react-native-reanimated 中的不可变对象突变错误
+  - 改进了 `useSharedValue` 的初始化和更新逻辑
+  - 添加了动画配置参数（damping, stiffness）
+  - 优化了依赖数组和条件检查
+  - **重要**：移除了对 react-native-reanimated 的依赖，改用 React Native 原生 Animated API
+  - 解决了在使用组件库的应用中出现的 "Native part of Reanimated doesn't seem to be initialized" 错误
+- 🔧 **HelloWave 组件修复**：移除了对 react-native-reanimated 的依赖
+  - 改用 React Native 原生 Animated API 实现挥手动画
+  - 保持了相同的动画效果和性能
+  - 解决了依赖初始化问题
+- 🔧 **Progress 组件修复**：修复了空引用错误
+  - 添加了 `data` 属性的空值检查
+  - 移除了不必要的可选链操作符
+  - 提高了组件的健壮性
+- 🔧 **错误处理改进**：增强了组件的错误边界处理
+
+### 新增
+- 完整的测试框架和自动化测试生成
+- Storybook 演示文档的自动生成
+- 完整的文档系统和使用指南
+
+### 变更
+- 优化了包配置，支持现代模块系统
+- 改进了 TypeScript 类型定义
+
+### 修复
+- 修复了 Jest 配置问题
+- 解决了 Storybook 构建错误
+
+## [未发布]
+
+### 修复
+- 🔧 **Shell 组件修复**：修复了 react-native-reanimated 中的不可变对象突变错误
+  - 改进了 `useSharedValue` 的初始化和更新逻辑
+  - 添加了动画配置参数（damping, stiffness）
+  - 优化了依赖数组和条件检查
+  - **重要**：移除了对 react-native-reanimated 的依赖，改用 React Native 原生 Animated API
+  - 解决了在使用组件库的应用中出现的 "Native part of Reanimated doesn't seem to be initialized" 错误
+- 🔧 **HelloWave 组件修复**：移除了对 react-native-reanimated 的依赖
+  - 改用 React Native 原生 Animated API 实现挥手动画
+  - 保持了相同的动画效果和性能
+  - 解决了依赖初始化问题
+- 🔧 **Progress 组件修复**：修复了空引用错误
+  - 添加了 `data` 属性的空值检查
+  - 移除了不必要的可选链操作符
+  - 提高了组件的健壮性
+- 🔧 **错误处理改进**：增强了组件的错误边界处理
+
+### 新增
+- 完整的测试框架和自动化测试生成
+- Storybook 演示文档的自动生成
+- 完整的文档系统和使用指南
+
+### 变更
+- 优化了包配置，支持现代模块系统
+- 改进了 TypeScript 类型定义
+
+### 修复
+- 修复了 Jest 配置问题
+- 解决了 Storybook 构建错误
+
+## [1.0.0] - 2024-01-09
+
+### 新增
+- 🎉 首次发布 Tapas UI 组件库
+- 50+ 个精心设计的 React Native 组件
+- 完整的 TypeScript 支持
+- 主题系统和深色模式支持
+- Storybook 文档和演示
+
+#### 基础组件
+- **TapasButton** - 多样式按钮组件
+- **TapasText** - 主题化文本组件  
+- **TapasInput** - 功能丰富的输入框
+- **TapasTextArea** - 多行文本输入
+
+#### 数据展示组件
+- **TapasCard** - 多功能卡片组件
+- **TapasProgress** - 进度指示器
+- **TapasTimeline** - 时间线组件
+- **TapasTable** - 数据表格
+
+#### 表单组件
+- **TapasCheckBox** - 复选框组件
+- **TapasRadioButton** - 单选按钮
+- **TapasDropdown** - 下拉选择器
+- **TapasNumericInput** - 数字输入框
+
+#### 布局组件
+- **TapasLayout** - 应用主布局
+- **TapasGrid** - 网格布局
+- **TapasShell** - Shell 容器
+- **TapasDashboardCard** - 仪表板卡片
+
+#### 导航组件
+- **TapasNavigation** - 侧边导航栏
+- **TapasHeader** - 页面头部
+- **TapasDrawer** - 抽屉组件
+
+#### 反馈组件
+- **TapasAlert** - 警告提示
+- **TapasToast** - 轻量提示
+- **TapasLoading** - 加载指示器
+- **TapasMessageBox** - 消息对话框
+
+#### 高级组件
+- **TapasGantt** - 甘特图
+- **TapasCalendar** - 日历组件
+- **TapasCollapsible** - 可折叠面板
+- **TapasDeviceSelectionModal** - 设备选择模态框
+
+### 技术特性
+- ✅ React Native 0.70+ 支持
+- ✅ TypeScript 完整类型定义
+- ✅ iOS、Android、Web 平台兼容
+- ✅ 主题系统和深色模式
+- ✅ 无障碍设计支持
+- ✅ Tree Shaking 优化
+- ✅ 按需导入支持
+
+## [1.0.1] - 2024-01-15
+
+### 新增
+- 新增组件整合功能，从外部项目导入组件
+- 添加了 7 个新组件：
+  - **TapasCard** - 增强的卡片组件
+  - **TapasCollapsible** - 可折叠内容面板
+  - **TapasDeviceSelectionModal** - 设备选择对话框
+  - **TapasExternalLink** - 外部链接组件
+  - **TapasHelloWave** - 动画问候组件
+  - **TapasScanButton** - 扫描按钮
+  - **TapasIconText** - 图标文本组合
+
+### 改进
+- 扩展了现有的 SearchInput 和 Loading 组件功能
+- 优化了组件性能，使用 useCallback 和 useMemo
+- 改进了 TypeScript 类型安全性
+
+### 修复
+- 修复了多个组件中的类型错误
+- 解决了 makeStyles 使用中的问题
+- 修复了条件样式应用的 TypeScript 错误
+
+## [1.1.0] - 2024-01-20
+
+### 新增
+- 🏗️ **工程架构优化**
+  - 添加了现代化包配置 (main, module, types)
+  - 实现了 exports 条件导出
+  - 支持 Tree Shaking (sideEffects: false)
+
+- 🚀 **性能优化**
+  - 新增 `yarn analyze` 命令用于包大小分析
+  - 优化构建配置和输出
+  - 支持按需导入，减少包体积
+
+- 🔧 **开发工具**
+  - 新增 `yarn health-check` 全面项目检查
+  - 添加 `yarn dev:full` 完整开发环境
+  - 实现自动化测试生成脚本
+  - 完善的 Git hooks 和质量门禁
+
+- 🧪 **测试框架**
+  - 为 39 个组件生成了测试文件
+  - 完善的 Jest 配置和测试工具
+  - 支持覆盖率报告和 CI 集成
+
+- 📚 **文档系统**  
+  - 创建了完整的文档中心
+  - 新增 9 个缺失组件的 Storybook 文档
+  - 包含安装指南、快速开始、组件文档等
+
+### 技术改进
+- 修复了 Jest 配置中的模块解析问题
+- 优化了 Storybook 构建配置
+- 完善了 TypeScript 项目配置
+- 添加了自动化脚本和工具链
+
+### 构建系统
+- 构建输出优化：5.7MB 总计
+  - CommonJS: 2.0MB
+  - ES Module: 1.8MB  
+  - TypeScript: 692KB
+  - Assets: 1.1MB
+
+## [计划中] - v1.2.0
+
+### 计划新增
+- 🎨 高级主题定制功能
+- 📱 React Native Web 优化
+- 🔍 组件搜索和过滤功能
+- 📊 使用统计和分析
+- 🌐 国际化支持
+
+### 计划改进
+- 性能监控和优化
+- 更多动画效果
+- 增强的无障碍支持
+- 移动端手势支持
+
+---
+
+## 版本说明
+
+### 版本号规则
+- **主版本号**: 不兼容的 API 修改
+- **次版本号**: 向下兼容的功能性新增  
+- **修订号**: 向下兼容的问题修正
+
+### 发布周期
+- **主要版本**: 每季度发布
+- **次要版本**: 每月发布
+- **修订版本**: 根据需要发布
+
+### 支持政策
+- 当前主版本：完全支持
+- 前一主版本：安全更新和关键 bug 修复
+- 更早版本：不再维护
+
+---
+
+**感谢所有贡献者让 Tapas UI 变得更好！** 🙏

package/package/README.md

@@ -0,0 +1,103 @@
+# Tapas UI
+![image](https://user-images.githubusercontent.com/3481514/145904252-92e3dc1e-591f-410f-88a1-b4250f4ba6f2.png)
+
+一个现代化的 React Native UI 组件库，支持 Web 和移动端。
+
+## 🚀 特性
+
+- 🎨 丰富的 UI 组件
+- 📱 React Native 原生支持
+- 🌐 Web 兼容性
+- 🎯 TypeScript 支持
+- 🎭 主题系统
+- 📖 Storybook 文档
+
+## 📦 安装
+
+```bash
+npm install @beppla/tapas-ui
+# 或
+yarn add @beppla/tapas-ui
+```
+
+## 🔧 依赖要求
+
+### 必需依赖
+
+```json
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-native": "^0.70.0"
+  }
+}
+```
+
+### Web 环境依赖
+
+如果您在 Web 环境中使用，需要安装以下依赖：
+
+```bash
+npm install react-native-web react-native-vector-icons
+# 或
+yarn add react-native-web react-native-vector-icons
+```
+
+### 图标支持
+
+组件库使用 `react-native-vector-icons` 提供图标支持。在 Web 环境中，您可能需要额外的配置：
+
+```bash
+# 安装字体文件
+npm install @expo/vector-icons
+# 或
+yarn add @expo/vector-icons
+```
+
+## 🎯 使用方法
+
+```tsx
+import React from 'react';
+import { TapasButton, TapasText } from '@beppla/tapas-ui';
+
+const App = () => {
+  return (
+    <div>
+      <TapasText>Hello Tapas UI!</TapasText>
+      <TapasButton title="Click me" onPress={() => alert('Hello!')} />
+    </div>
+  );
+};
+```
+
+## 🌐 Web 兼容性
+
+### 已知问题
+
+1. **图标组件**: 在 Web 环境中，某些图标可能显示为文本占位符
+2. **原生模块**: 某些 React Native 特定功能在 Web 中不可用
+3. **字体文件**: 需要确保字体文件在 Web 环境中正确加载
+
+### 解决方案
+
+1. 安装 `react-native-web` 和相关依赖
+2. 配置 Webpack 别名和 fallback
+3. 使用提供的 Web 兼容组件
+
+## 📚 文档
+
+访问 [Storybook](https://your-storybook-url.com) 查看完整的组件文档和示例。
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## 📄 许可证
+
+MIT License
+
+## 🔗 相关链接
+
+- [React Native](https://reactnative.dev/)
+- [React Native Web](https://necolas.github.io/react-native-web/)
+- [Storybook](https://storybook.js.org/)