CookieConsent 组件

CookieConsent 组件

Cookie 同意横幅组件，用于获取用户对使用 Cookie 的同意。

功能概述

  • 同意管理: 接受或拒绝 Cookie
  • 二次确认: 拒绝时需要二次确认
  • 本地存储: 使用 localStorage 保存用户选择
  • 页面刷新: 接受后自动刷新页面以启用分析

导出内容

CookieConsentBanner

主组件，显示 Cookie 同意横幅。

getCookieConsent

工具函数，获取当前 Cookie 同意状态。

type CookieConsent = "accepted" | "rejected" | null;

function getCookieConsent(): CookieConsent;

本地存储键

const COOKIE_CONSENT_KEY = "cookie-consent";

用户流程

  1. 首次访问: 显示横幅
  2. 点击接受: 保存 "accepted"，刷新页面
  3. 点击拒绝: 显示二次确认
  4. 确认拒绝: 保存 "rejected"
  5. 取消拒绝: 返回初始状态

依赖

  • next-intl - 国际化
  • @/components/ui/button - 按钮组件
  • lucide-react - Cookie 图标

使用示例

import { CookieConsentBanner, getCookieConsent } from "@/components/layout/cookie-consent";

// 显示横幅
<CookieConsentBanner />

// 获取同意状态
const consent = getCookieConsent();
if (consent === "accepted") {
  // 启用分析
}

翻译键

{
  "cookies": {
    "message": "我们使用 Cookie 来改善您的体验。",
    "confirmMessage": "确定要拒绝吗？部分功能可能无法正常使用。",
    "accept": "接受",
    "reject": "拒绝",
    "confirmReject": "确认拒绝",
    "nevermind": "算了"
  }
}

样式说明

  • 固定在底部 (fixed bottom-0)
  • 高 z-index (z-50)
  • 毛玻璃背景效果
  • 全宽显示
← 返回目录