c33181a689
问题根源：
使用 useBreakpointValue 的 isMobile 变量在初始渲染时返回 undefined，导致：
1. 服务端渲染/首次加载时显示一种布局
2. 客户端水合后切换到另一种布局
3. 用户看到明显的布局跳变（先横向后纵向，或反之）
解决方案：
不使用条件渲染两套完全不同的 JSX，而是使用响应式样式让同一套 JSX 自动适应不同屏幕。
修改策略：
将移动端（VStack）和桌面端（Flex横向）合并为一套响应式布局：
- 使用 Flex + 响应式 flexDirection
- flexDirection={{ base: column, md: row }}（移动端纵向，桌面端横向）
- 统一使用响应式属性而不是条件渲染
vf_react
前端