Skip to content

提示 06:首页仪表板 / 小组件自定义

目标

为 MysticX Expo 移动应用构建 (tabs)/index 界面。首页仪表板必须作为一个"数字祭坛"(个性化的仪式空间),而非静态的链接列表。它应突出展示每日仪式、快速访问读牌师,以及灵活的模块化布局。

设计约束(来自主设计指南)

  • 视觉: "OLED Noir"(#000000 基底)配"Ethereal Glaze"。背景应有非常缓慢的、微妙的 Mesh 渐变(如深午夜蓝到黑色),并对设备陀螺仪略有响应(视差效果)。
  • 排版: 双字体系统。使用 Playfair Display 作为用户问候语("晚上好,[Name] ✦")和分区标题。使用 Inter 作为副文本和标签。
  • 节奏: "慢 UI"理念。元素应在初始加载时优雅地淡入。
  • 生物响应: 背景渐变和问候语应根据用户本地时间变化(如早晨为"金色/太阳"色调,夜晚为"月光/深邃"色调)。

需求

  1. 组件: HomeDashboardView
  2. 顶部区域(问候与配置):
    • 动态问候语(衬线体,金色 #c5a059)。
    • 用户积分余额以精致徽章展示(expo-blur 背景)。
    • 最近/收藏的塔罗读牌师水平滚动(带发光边框的圆形头像)。
  3. 中间区域(核心仪式):
    • 一个大的、视觉突出的"向牌卡提问"输入区域。
    • 占位文本:"你在想什么?"(柔和色 #999490)。
    • 附带的"开始解读"行动号召按钮(古金色渐变)。
    • 输入区下方,水平滚动(FlashListScrollView)的建议标签(如"我会找到爱情吗?"、"职业指导")。
  4. 底部区域(每日仪式与历史):
    • 突出的"每日一牌"横幅/卡片。点击后导航到独立仪式界面。
    • "继续反思"卡片,显示最近的解读历史项(标题、牌阵、读牌师、时间)。

实现指南

  • 动画: 点击"开始解读"时,使用 react-native-reanimated 的共享元素过渡动画,将输入区域无缝扩展到完整的"解读流程"界面。
  • 触觉反馈: 当用户滚动浏览建议标签或读牌师头像时,触发 expo-hapticsimpactAsync(ImpactFeedbackStyle.Light)
  • 模块化架构: 将"向牌卡提问"、"每日仪式"和"历史"区域构建为独立的、可复用的组件。未来,这将允许用户拖放这些小组件来自定义他们的"数字祭坛"。

Internal documentation for MysticX team