AppBanner 组件

AppBanner 组件

应用下载横幅组件，针对 Apple 设备用户显示 iOS App 下载提示。

功能概述

  • 设备检测: 检测 iOS 和 macOS 设备
  • 本地存储: 记录用户是否已关闭横幅
  • 查询参数: 支持通过 URL 参数隐藏
  • 渐变背景: 品牌色渐变效果

Props 接口

无 Props，使用品牌配置和翻译。

设备检测

通过以下方式检测 Apple 设备：

  • User Agent 检测: /iphone|ipad|ipod|macintosh|macintel/i
  • Navigator Platform: navigator.platform
  • Navigator UserAgentData API (现代浏览器)

本地存储

const STORAGE_KEY = "app-banner-dismissed";

显示条件

横幅显示需同时满足：

  1. 是 Apple 设备 (isApple)
  2. 用户未关闭过 (!dismissed)
  3. 不是克隆版 (!branding.useCloneBranding)
  4. URL 无 no-app-banner 参数

查询参数

添加 ?no-app-banner 到 URL 可隐藏横幅。

依赖

  • next-intl - 国际化
  • next/navigation - 查询参数
  • @/components/ui/button - 按钮组件
  • @/components/providers/branding-provider - 品牌配置

使用示例

import { AppBanner } from "@/components/layout/app-banner";

<AppBanner />

翻译键

{
  "appBanner": {
    "message": "下载我们的 iOS 应用，随时随地使用！",
    "messageShort": "下载 iOS 应用",
    "download": "下载",
    "dismiss": "关闭"
  }
}

品牌配置

需要配置 appStoreUrl：

// prompts.config.ts
branding: {
  appStoreUrl: "https://apps.apple.com/app/xxx"
}

样式说明

  • 背景: 品牌色渐变 (from-primary/90 to-primary)
  • 文字颜色: text-primary-foreground
  • 下载按钮: secondary 变体
  • 关闭按钮: ghost 变体

注意事项

  • 组件使用 "use client" 指令
  • 只在客户端进行设备检测
  • 关闭状态永久保存（除非清除 localStorage）
← 返回目录