2.4 KiB
2.4 KiB
项目约定
视觉设计
- 采用 Flat Design 风格：无阴影、无卡片嵌套、扁平化
- 主色：
#10B981（Tailwind 祖母绿） - 图标灰：
#6B7280（gray-500），无彩色背景 - 文本灰：
#374151（gray-700） - 辅助灰：
#9CA3AF（gray-400） - 分割线灰：
#E5E7EB（gray-200）
交互
- 所有 loading 统一用 sonner-native（不再使用按钮级 loading）
- 使用
@/hooks/useLoading+LoadingOverlay组件
组件规范
- 不要卡片套卡片（no card nesting）
- 子应用 icon 不设彩色背景
- Section 标题统一用
SectionLabel组件（13px semibold text-gray-800）
已知库问题
- BottomSheet 初始化闪烁：gorhom bottom-sheet 默认
animateOnMount=true，即使index=-1（关闭状态）mount 时也会触发动画，首帧显示底部面板。修复：<BottomSheet.Content animateOnMount={false}>。不要用{isOpen && <Content>}条件渲染，会导致BottomSheetContentContainer的useRef(isOpen)捕获错误初始值，首次打开时snapToIndex永远不会触发。 - 模板字面量
id解析错误：Expo/Babel 在.tsx文件中会把模板字面量内的id,误解析为 JSX 属性，报Missing semicolon。规则：.tsx文件中禁止在模板字面量（反引号）内使用id关键字，必须改用字符串拼接（'...' + '...'）。仅提取为变量不够，必须完全避免模板字面量。 - BottomSheet 内 input 键盘避让：三层根因，缺一不可：
keyboardBehavior必须是"interactive"（gorhom 默认值），不能用"extend"。gorhom 源码：extend只拉到最高 snap point 不上移；interactive才会highestDetent - keyboardHeight上移避让。android_keyboardInputMode必须是"adjustPan"（gorhom 默认值），不能用"adjustResize"。源码 L605：Android + adjustResize 会跳过 interactive 模式。- sheet 内输入框必须接入 sheet 的键盘状态。最优方案：用 heroui 原生
Input+useBottomSheetAwareHandlers（从heroui-native导出），hook 内部调用 gorhomuseBottomSheetInternal(true)把 focus/blur 注册到animatedKeyboardState。项目已封装为BottomSheet.Input。 规则：BottomSheet 内部的所有输入框统一用BottomSheet.Input，BottomSheet.tsx中keyboardBehavior="interactive"+android_keyboardInputMode="adjustPan"保持 gorhom 默认值。