移动端构建提示：02 - 发现页（以太空间）

目标

设计发现页（"以太空间"）——一个沉浸式的塔罗探索空间，从静态列表转向意图驱动的探索。

设计约束（参考 总设计指南）

• 主题： OLED Noir（#000000）基底配 Ethereal Glaze 强调色（薰衣草色、鼠尾草绿、暮蓝色）。
• 理念： "意图驱动的探索"——内容按用户搜索/需求分类（爱情、事业、阴影工作）。
• 美学： "反 AI"——玻璃容器上有高质量噪点覆盖层。
• 交互： "触感探索"——水平滚动轮播具有物理动量和敏捷的触觉反馈。

实现任务

1. 布局与组件

• FlashList： 用于纵向的"学习/分类"。
• 水平轮播： 用于"热门牌阵"和"精选读牌师"。
• IntentPill： 动画筛选标签，用于快速过滤（平滑缩放进入）。
• SpreadCard： 具有深度视差效果的沉浸式卡片（使用 react-native-reanimated 基于滚动位置的插值）。

2. 交互与触觉

• 触觉： 每个轮播吸附点触发 HapticEngine.trigger('TICK')（轻量级）。
• 物理效果： react-native-reanimated 实现平滑的弹性滚动减速。
• 入场： 所有列表元素的平滑交错淡入动画。

3. 视觉细节

• 容器上持续的噪点覆盖层。
• Ethereal Glaze 强调色用于交互元素（标签、卡片）。
• 视差驱动的分层以模拟深度。

技术规范

• 布局： FlashList（分类用瀑布流，轮播用水平布局）。
• 视觉效果： react-native-reanimated（视差、插值）、react-native-gesture-handler（滚动物理效果）。

AI 开发者提示

"构建 DiscoverScreen.tsx。

1. 布局： 使用 FlashList 用于纵向列表，ScrollView 配合 horizontal 用于'热门牌阵'和'精选读牌师'。
2. 主题： OLED 黑色基底（#000000）。使用'Ethereal Glaze'强调色（薰衣草色、鼠尾草绿、暮蓝色）用于标签和卡片。
3. 组件：
   • IntentPill：交互式标签。点击时使用 withSpring（damping: 10）实现缩放动画。
   • SpreadCard：使用 react-native-reanimated 基于滚动位置创建 3D 视差效果（useAnimatedStyle）。
4. 触觉： 轮播项吸附到中心时触发 HapticEngine.trigger('TICK')。
5. 美学： 在容器上应用持续的高频噪点覆盖层以保持'反 AI'外观。
6. 交互： 确保所有水平滚动轮播具有自然的弹性弹跳（使用 spring 物理效果）。"