AI 开发者提示词：占卜流程（选择、流式传输、结果、聊天）屏幕

上下文

您正在为 MysticX Expo 移动应用构建 reading/* 屏幕。 屏幕目标： 核心仪式。1) 选择卡牌：根据牌阵，展示 78 张卡牌呈扇形展开供用户选择。2) 流式传输：进度条、发光的光环、逐张流式输出文本。3) 结果：卡牌解读、总结以及后续跟进的行动号召 (CTA)。4) 聊天：通过聊天气泡与 AI 塔罗师进行后续问题的对话。

线框图与布局参考

请基于 wireframes 中该屏幕的结构流程进行布局。UI 应该感觉宽敞且具有原生感，避免拥挤的网页视图布局。

设计系统规则（严格）

应用程序必须遵循 神秘极简主义与天鹅绒黑 (Mystical Minimalism & Velvet Noir) 哲学。

1. 颜色与背景

• OLED 纯黑基础色： 背景必须是适合 OLED 的深黑色 (#000000)、午夜深蓝 (#0a192f) 或浓郁的深紫色。绝不要使用扁平的灰黑色。
• 空灵釉面： 对导航元素、浮动操作栏或模态框背景使用 expo-blur，以营造出磨砂的半透明深度感。
• 强调色： 使用复古金 (#c5a059) 作为主要的交互元素。对于激活状态，使用极其纤细的金属边框或微妙的霓虹发光（青色、紫水晶色）。

2. 排版

• 标题： 使用高对比度、优雅的衬线字体（例如，Playfair Display）。
• 正文： 使用干净的无衬线字体（例如，Inter）。
• 间距： 对任何长篇阅读文本强制使用至少 1.6 的行高 (line-height)。

3. 交互、“仪式感”与动画流程（极度重要）

占卜流程是应用的核心。它必须使用 react-native-reanimated 和 expo-haptics 来匹配 Web 应用中复杂的、具有物理质感的交互。

• 阶段 1：卡牌选择（圆弧与旋转）
  • 卡牌以底部为重心的圆弧状（类似于轮盘）展示。
  • 用户可以拖动以旋转轮盘。使用 Reanimated 的共享值 (useSharedValue, withDecay, withSpring) 实现速度、摩擦力和边缘的橡皮筋回弹效果。
  • 颗粒感触觉反馈： 当卡牌在旋转经过中心点时，触发 impactAsync(ImpactFeedbackStyle.Light)。当抽到大阿尔卡那牌 (Major Arcana) 与 小阿尔卡那牌 (Minor Arcana) 时，实现截然不同的触觉反馈模式。
• 阶段 2：揭晓、加载过渡与呼吸法
  • 当用户点击一张卡牌时，使用 3D 翻转动画（在 rotateY 上使用 withTiming 或 withSpring）。
  • 正念节奏： 在 UI 交互之间融入短暂的、有引导的呼吸法提示（例如，3 秒的吸气动画），让用户放慢脚步，增强仪式体验。
  • 加载编排： 当所有卡牌都被选中后，绝对不要使用旋转加载器。复制 Web 应用的编排：
    1. 卡牌翻转至背面朝上。
    2. 整个圆弧缩小并移动到屏幕中央（通过 scale 缩小，translateY 向上移动）。
    3. 圆形编队开始持续、平滑的旋转，同时发光的“光环”环（虚线/点划线边框）淡入并向反方向旋转。
• 阶段 3：占卜解读（流式聊天）
  • AI 文本必须有节奏地流式载入，模仿真实的实时对话（打字机节奏）。
  • 在等待 AI 生成响应时，在聊天气泡周围使用频率低于 0.1Hz 的发光光环脉冲效果。
• “慢 UI”： 这些阶段之间的过渡必须是从容且经过深思熟虑的。避免瞬间的生硬切换。对卡牌操作使用 ease-out-back 弹簧物理效果，赋予它们切实的“重量感”。

任务

编写此屏幕的 React Native (Expo) 代码。确保使用 react-native-reanimated 实现动画，使用 expo-haptics 实现触摸反馈，并且严格按照上述的 OLED 纯黑主题进行样式设计。确保代码模块化、类型严谨 (TypeScript) 且视觉效果惊艳。