@wecode-team/legal-docs

隐私政策 / 用户协议 React 组件，支持弹窗和页面两种展示模式，滚动到底部才能点击"同意"。

安装

npm install @wecode-team/legal-docs

内容格式

所有组件的文档内容通过 Markdown 字符串传入，格式：

const myPrivacyPolicy = `
# 隐私政策

**最后更新日期：2026年1月1日**

## 1. 信息收集

当您使用我们的服务时，我们可能会收集以下信息：

- **账户信息**：姓名、电子邮箱地址
- **设备信息**：IP 地址、浏览器类型

## 2. 信息使用

我们使用收集的信息用于提供和改进我们的服务。

## 3. 信息共享

我们不会出售您的个人信息。
`;

支持的 Markdown 语法：# ## ### 标题、- 列表、**加粗**、普通段落。

使用方式

1. ConsentCheckbox — 勾选同意（推荐）

注册/登录表单场景，点击蓝色链接弹窗查看文档：

import { useState } from "react";
import { ConsentCheckbox } from "@wecode-team/legal-docs";

const PRIVACY = `# 隐私政策\n\n## 1. 信息收集\n\n...`;
const TERMS = `# 用户协议\n\n## 1. 服务说明\n\n...`;

function SignUpForm() {
  const [agreed, setAgreed] = useState(false);

  return (
    <form>
      <ConsentCheckbox
        locale="zh"
        checked={agreed}
        onChange={setAgreed}
        privacyContent={PRIVACY}
        termsContent={TERMS}
      />
      <button disabled={!agreed}>注册</button>
    </form>
  );
}

Props：

| Prop | 类型 | 默认值 | 说明 | |------|------|--------|------| | locale | "zh" \| "en" | "zh" | 语言（影响按钮和链接文案） | | checked | boolean | - | 受控勾选状态 | | onChange | (checked: boolean) => void | - | 勾选变化回调 | | privacyContent | string | 必传 | 隐私政策内容（Markdown） | | termsContent | string | 必传 | 用户协议内容（Markdown） | | privacyLabel | string | 隐私政策 | 隐私政策链接文字 | | termsLabel | string | 用户协议 | 用户协议链接文字 | | modalWidth | number \| string | 640 | 弹窗宽度 | | modalMaxHeight | number \| string | "80vh" | 弹窗最大高度 |

2. PrivacyModal / TermsModal — 弹窗模式

import { PrivacyModal, TermsModal } from "@wecode-team/legal-docs";

<PrivacyModal
  locale="zh"
  open={showPrivacy}
  onClose={() => setShowPrivacy(false)}
  content={`# 隐私政策\n\n## 1. 信息收集\n\n...`}
  onAgree={(timestamp) => saveConsent(timestamp)}
  onDisagree={() => setShowPrivacy(false)}
  recordTimestamp
/>

Props：

| Prop | 类型 | 默认值 | 说明 | |------|------|--------|------| | locale | "zh" \| "en" | "zh" | 语言 | | open | boolean | 必传 | 是否显示 | | onClose | () => void | 必传 | 关闭回调 | | content | string | 必传 | 文档内容（Markdown） | | onAgree | (timestamp?: number) => void | - | 同意回调 | | onDisagree | () => void | - | 不同意回调 | | recordTimestamp | boolean | false | 同意时返回时间戳 | | width | number \| string | 640 | 弹窗宽度 | | maxHeight | number \| string | "80vh" | 弹窗最大高度 |

3. PrivacyPage / TermsPage — 页面模式

import { PrivacyPage } from "@wecode-team/legal-docs";

<PrivacyPage
  locale="zh"
  content={`# 隐私政策\n\n...`}
  onAgree={(timestamp) => saveConsent(timestamp)}
  onDisagree={() => history.back()}
  recordTimestamp
/>

4. LegalContent — 仅渲染内容

不需要按钮和弹窗逻辑时使用：

import { LegalContent } from "@wecode-team/legal-docs";

<LegalContent
  content={`# 隐私政策\n\n...`}
  onScrollToBottom={() => console.log("已阅读到底部")}
  style={{ height: 400, padding: 16 }}
/>