AeYunDian

效果预览#

• 首次访问：页面底部（或移动端贴底）显示隐私同意卡片，遮罩全屏。
• 协议阅读：卡片内嵌《隐私政策》《Cookie 政策》《服务条款》的快速预览模态框，用户需分别点击“我已阅读并理解”才能启用同意复选框。
• 同意选项：用户可以选择“接受全部（协议及所有 Cookie）”或“接受协议和仅必要 Cookie”。
• 状态持久化：同意记录存入 localStorage，并附带版本号，方便未来政策更新时重新征求同意。
• 豁免路径：在隐私政策、服务条款等页面自动隐藏横幅，避免用户陷入循环。
• 响应式适配：在移动端以底部抽屉样式呈现，与原生 App 风格类似。

组件功能概述#

PrivacyMessaging 是一个包含完整 UI 的功能组件，负责管理用户隐私同意的整个生命周期，包括：

• 检测当前路由是否为豁免路径（如隐私政策页本身），自动隐藏横幅。
• 从 localStorage 读取同意记录，根据版本号判断是否需要重新显示。
• 展示协议摘要模态框，强制用户逐一点击确认阅读，方可勾选同意复选框。
• 提供两种同意粒度：“全部 Cookie” 与 “仅必要 Cookie”。
• 将用户选择持久化，并触发后续的 Cookie 实际控制逻辑（可扩展）。
• 在路由变化时自动重新评估显示状态，确保行为一致。

该组件不依赖外部库，仅使用 Vue 核心功能和浏览器原生 API，易于集成到任何 Vue 3 项目中。

实现细节#

1
checkRouteAndSetConsent() {
2
  if (this.isExemptPath()) {
3
    this.consentGiven = true;
4
    return;
5
  }
6
  const stored = localStorage.getItem('cookieConsent');
7
  if (stored) {
8
    try {
9
      const data = JSON.parse(stored);
10
      if (data.version === this.PrivacyVersion) {
11
        this.consentGiven = true;
12
        return;
13
      }
14
    } catch (e) { /* 忽略解析错误 */ }
15
  }
16
  this.consentGiven = false;
17
}

1
computed: {
2
  canEnableCheckbox() {
3
    return this.privacyPolicyRead && this.cookiePolicyRead && this.termsPolicyRead;
4
  }
5
}

1
const consentData = {
2
  type: "all", // 或 'necessary'
3
  preferences: { necessary: true, analytics: true, advertising: true },
4
  version: this.PrivacyVersion,
5
  timestamp: Date.now(),
6
};
7
localStorage.setItem("cookieConsent", JSON.stringify(consentData));
8
this.consentGiven = true;

1
if (this.$router) {
2
  this.routerUnsubscribe = this.$router.afterEach(() => {
3
    this.checkRouteAndSetConsent();
4
  });
5
}

1
.privacy-consent-overlay {
2
  position: fixed;
3
  inset: 0;
4
  display: flex;
5
  align-items: flex-end;
6
  justify-content: center;
7
  /* ... */
8
}

样式适配要点#

• CSS 变量：使用 var(--vp-c-bg)、var(--vp-c-text) 等变量，自动适配 VitePress 或 vuepress-theme-hope 的亮色/暗色模式。
• 按钮交互：主按钮采用主题强调色（--vp-c-accent），次要按钮使用灰色背景，符合常见设计规范。
• 警告信息：在复选框未启用时，显示红色提示文字，引导用户阅读协议。
• 模态框：独立于主卡片之上，z-index 更高，包含滚动内容和关闭按钮。

在主题中集成#

该组件需要被注册为全局组件，以便在任意页面都能生效。在 .vuepress/client.ts 中通过 rootComponents 引入：

1
import PrivacyMessaging from "./components/PrivacyMessaging.vue";
2

3
export default defineClientConfig({
4
  rootComponents: [
5
    PrivacyMessaging,
6
    // 其他全局组件...
7
  ],
8
});

组件自身不依赖任何外部状态，开箱即用，但您可以根据需要调整豁免路径、版本号或文本内容。

总结#

PrivacyMessaging 组件以极低的集成成本，为 VuePress 站点提供了符合隐私法规的同意管理界面。它通过确认阅读、版本化存储、路由感知等设计，确保了用户知情权和选择权。同时，其响应式布局和主题变量适配，使其能够无缝融入现有设计体系。如果您也在搭建需要合规 Cookie 管理的站点，希望本文能为您提供一些参考。

相关资源

• GDPR 合规指南
• vuepress-theme-hope 官方文档
• PrivacyMessaging.vue 在 GitHub 上的源码