zcp/chat-policy-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 修复已知bug

Browse Source
This commit is contained in:
joey
2026-01-12 11:09:24 +08:00
parent 80b9d0cfdf
commit 12b55df82f
5 changed files with 320 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

489
src/App.jsx
View File

@@ -1,216 +1,258 @@
import React, { useState, useEffect } from 'react'; import React, {useState, useEffect} from 'react';
import { Globe, ChevronDown } from 'lucide-react'; import {Globe, ChevronDown} from 'lucide-react';
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
const LegalDocuments = () => { const LegalDocuments = () => {
const [currentDoc, setCurrentDoc] = useState('terms'); const [currentDoc, setCurrentDoc] = useState('terms');
const [language, setLanguage] = useState('zh-CN'); const [language, setLanguage] = useState('zh-CN');
const [showLangMenu, setShowLangMenu] = useState(false); const [showLangMenu, setShowLangMenu] = useState(false);
const [hideHeader, setHideHeader] = useState(true); const [hideHeader, setHideHeader] = useState(true);
const [content, setContent] = useState(''); const [content, setContent] = useState('');
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [initialized, setInitialized] = useState(false); // 添加初始化标志
// 动态导入 Markdown 文件 // 解析URL并设置初始状态（优先执行）
useEffect(() => { useEffect(() => {
const loadMarkdown = async () => { const searchParams = new URLSearchParams(window.location.search);
setLoading(true); const docType = searchParams.get('content');
try { const lang = searchParams.get('language');
const docPath = currentDoc === 'terms' ? 'terms' : 'privacy';
const response = await import(`./data/${docPath}/${language}.md?raw`);
setContent(response.default);
} catch (error) {
console.error('Error loading markdown:', error);
setContent('内容加载失败，请稍后重试。');
} finally {
setLoading(false);
}
};
loadMarkdown(); if (docType === null && lang === null) {
}, [currentDoc, language]); setHideHeader(false);
return;
}
// 解析URL并设置初始状态 // 映射文档类型
// 解析 URL query 并设置初始状态 const docMap = {
useEffect(() => { 'user-agreement': 'terms',
const searchParams = new URLSearchParams(window.location.search); 'terms': 'terms',
const docType = searchParams.get('content') ; 'privacy-policy': 'privacy',
const lang = searchParams.get('language') ; 'osn': 'osn',
console.log(lang);
if (docType === null && lang === null) {
setHideHeader(false);
return;
}
// 映射文档类型
const docMap = {
'user-agreement': 'terms',
'terms': 'terms',
'privacy-policy': 'privacy',
'privacy': 'privacy'
};
// 映射语言类型
const langMap = {
'zh': 'zh-CN',
'zh-FT': 'zh-TW',
'en': 'en',
'ms': 'ms',
}
if (docMap[docType.toLowerCase()]) {
setCurrentDoc(docMap[docType.toLowerCase()]);
}
if (langMap[lang]) {
setLanguage(langMap[lang]);
}
if (docMap[docType.toLowerCase()] && langMap[lang]) {
setHideHeader(true);
} else {
setHideHeader(false);
}
}, []);
const languages = {
'zh-CN': '简体中文',
'zh-TW': '繁體中文',
'en': 'English',
'ms': 'Bahasa Melayu'
}; };
const navItems = { // 映射语言类型
'zh-CN': { terms: '用户协议', privacy: '隐私政策' }, const langMap = {
'zh-TW': { terms: '用戶協議', privacy: '隱私政策' }, 'zh': 'zh-CN',
'en': { terms: 'Terms', privacy: 'Privacy' }, 'zh-FT': 'zh-TW',
'ms': { terms: 'Terma', privacy: 'Privasi' } 'en': 'en',
'ms': 'ms',
}; };
const lastUpdated = { if (docType && docMap[docType.toLowerCase()]) {
'zh-CN': '最后更新时间', setCurrentDoc(docMap[docType.toLowerCase()]);
'zh-TW': '最後更新時間', }
'en': 'Last Updated',
'ms': 'Kemaskini Terakhir' if (lang && langMap[lang]) {
setLanguage(langMap[lang]);
}
if (
docType &&
lang &&
docMap[docType.toLowerCase()] &&
langMap[lang]
) {
setHideHeader(true);
} else {
setHideHeader(false);
}
// 标记初始化完成
setInitialized(true);
}, []);
// 动态导入 Markdown 文件（只在初始化完成后执行）
useEffect(() => {
if (!initialized) return; // 等待 URL 解析完成
const loadMarkdown = async () => {
setLoading(true);
try {
const response = await import(`./data/${currentDoc}/${language}.md?raw`);
setContent(response.default);
} catch (error) {
console.error('Error loading markdown:', error);
setContent('内容加载失败，请稍后重试。');
} finally {
setLoading(false);
}
}; };
const titles = { loadMarkdown();
terms: { }, [currentDoc, language, initialized]);
'zh-CN': '用户协议',
'zh-TW': '用戶協議',
'en': 'Terms of Service',
'ms': 'Perjanjian Pengguna'
},
privacy: {
'zh-CN': '隐私政策',
'zh-TW': '隱私政策',
'en': 'Privacy Policy',
'ms': 'Dasar Privasi'
}
};
return ( const languages = {
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100"> 'zh-CN': '简体中文',
{/* Header - 根据 hideHeader 状态决定是否显示 */} 'zh-TW': '繁體中文',
{!hideHeader && ( 'en': 'English',
<header className="sticky top-0 z-50 bg-white/80 backdrop-blur-xl border-b border-gray-200/50"> 'ms': 'Bahasa Melayu',
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8"> };
<div className="flex items-center justify-between h-16 sm:h-20">
{/* Logo */} const navItems = {
<div className="flex items-center space-x-2"> 'zh-CN': {
<div className="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center"> terms: '用户协议',
<span className="text-white text-sm sm:text-base font-bold">S</span> privacy: '隐私政策',
</div> osn: '开源组件说明',
<span className="text-lg sm:text-xl font-semibold text-gray-900 hidden sm:inline"> },
'zh-TW': {
terms: '用戶協議',
privacy: '隱私政策',
osn: '開源組件說明',
},
'en': {
terms: 'Terms',
privacy: 'Privacy',
osn: 'Open Source Notices',
},
'ms': {
terms: 'Terma',
privacy: 'Privasi',
osn: 'Notis Sumber Terbuka',
},
};
const lastUpdated = {
'zh-CN': '最后更新时间',
'zh-TW': '最後更新時間',
'en': 'Last Updated',
'ms': 'Kemaskini Terakhir',
};
const titles = {
terms: {
'zh-CN': '用户协议',
'zh-TW': '用戶協議',
'en': 'Terms of Service',
'ms': 'Perjanjian Pengguna',
},
privacy: {
'zh-CN': '隐私政策',
'zh-TW': '隱私政策',
'en': 'Privacy Policy',
'ms': 'Dasar Privasi',
},
osn: {
'zh-CN': '第三方开源组件与资源声明',
'zh-TW': '第三方開源組件與資源聲明',
'en': 'Third-Party Open Source Components and Resources Notice',
'ms': 'Notis Komponen dan Sumber Sumber Terbuka Pihak Ketiga',
},
};
return (
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
{/* Header - 根据 hideHeader 状态决定是否显示 */}
{!hideHeader && (
<header className="sticky top-0 z-50 bg-white/80 backdrop-blur-xl border-b border-gray-200/50">
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16 sm:h-20">
{/* Logo */}
<div className="flex items-center space-x-2">
<div
className="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
<span className="text-white text-sm sm:text-base font-bold">S</span>
</div>
<span className="text-lg sm:text-xl font-semibold text-gray-900 hidden sm:inline">
Social App Social App
</span> </span>
</div> </div>
{/* Navigation */} {/* Navigation */}
<nav className="flex items-center space-x-2 sm:space-x-4"> <nav className="flex items-center space-x-2 sm:space-x-4">
<button <button
onClick={() => setCurrentDoc('terms')} onClick={() => setCurrentDoc('terms')}
className={`px-3 sm:px-4 py-2 rounded-lg text-sm sm:text-base font-medium transition-all ${ className={`px-3 sm:px-4 py-2 rounded-lg text-sm sm:text-base font-medium transition-all ${
currentDoc === 'terms' currentDoc === 'terms'
? 'bg-gray-900 text-white shadow-lg' ? 'bg-gray-900 text-white shadow-lg'
: 'text-gray-600 hover:bg-gray-100' : 'text-gray-600 hover:bg-gray-100'
}`} }`}
> >
{navItems[language].terms} {navItems[language].terms}
</button> </button>
<button <button
onClick={() => setCurrentDoc('privacy')} onClick={() => setCurrentDoc('privacy')}
className={`px-3 sm:px-4 py-2 rounded-lg text-sm sm:text-base font-medium transition-all ${ className={`px-3 sm:px-4 py-2 rounded-lg text-sm sm:text-base font-medium transition-all ${
currentDoc === 'privacy' currentDoc === 'privacy'
? 'bg-gray-900 text-white shadow-lg' ? 'bg-gray-900 text-white shadow-lg'
: 'text-gray-600 hover:bg-gray-100' : 'text-gray-600 hover:bg-gray-100'
}`} }`}
> >
{navItems[language].privacy} {navItems[language].privacy}
</button> </button>
<button
onClick={() => setCurrentDoc('osn')}
className={`px-3 sm:px-4 py-2 rounded-lg text-sm sm:text-base font-medium transition-all ${
currentDoc === 'osn'
? 'bg-gray-900 text-white shadow-lg'
: 'text-gray-600 hover:bg-gray-100'
}`}
>
{navItems[language].osn}
</button>
{/* Language Selector */} {/* Language Selector */}
<div className="relative"> <div className="relative">
<button <button
onClick={() => setShowLangMenu(!showLangMenu)} onClick={() => setShowLangMenu(!showLangMenu)}
className="flex items-center space-x-1 sm:space-x-2 px-2 sm:px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-100 transition-all" className="flex items-center space-x-1 sm:space-x-2 px-2 sm:px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-100 transition-all"
> >
<Globe className="w-4 h-4 sm:w-5 sm:h-5" /> <Globe className="w-4 h-4 sm:w-5 sm:h-5"/>
<span className="text-xs sm:text-sm font-medium hidden sm:inline"> <span className="text-xs sm:text-sm font-medium hidden sm:inline">
{languages[language]} {languages[language]}
</span> </span>
<ChevronDown className="w-3 h-3 sm:w-4 sm:h-4" /> <ChevronDown className="w-3 h-3 sm:w-4 sm:h-4"/>
</button> </button>
{showLangMenu && ( {showLangMenu && (
<div className="absolute right-0 mt-2 w-40 sm:w-48 bg-white rounded-xl shadow-2xl border border-gray-100 py-2 z-50"> <div
{Object.entries(languages).map(([code, name]) => ( className="absolute right-0 mt-2 w-40 sm:w-48 bg-white rounded-xl shadow-2xl border border-gray-100 py-2 z-50">
<button {Object.entries(languages).map(([code, name]) => (
key={code} <button
onClick={() => { key={code}
setLanguage(code); onClick={() => {
setShowLangMenu(false); setLanguage(code);
}} setShowLangMenu(false);
className={`w-full text-left px-4 py-2.5 text-sm transition-colors ${ }}
language === code className={`w-full text-left px-4 py-2.5 text-sm transition-colors ${
? 'bg-blue-50 text-blue-600 font-medium' language === code
: 'text-gray-700 hover:bg-gray-50' ? 'bg-blue-50 text-blue-600 font-medium'
}`} : 'text-gray-700 hover:bg-gray-50'
> }`}
{name} >
</button> {name}
))} </button>
</div> ))}
)}
</div>
</nav>
</div>
</div> </div>
</header> )}
)} </div>
</nav>
</div>
</div>
</header>
)}
{/* Main Content */} {/* Main Content */}
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12 lg:py-16"> <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12 lg:py-16">
<article className="bg-white rounded-2xl sm:rounded-3xl shadow-xl p-6 sm:p-10 lg:p-16"> <article className="bg-white rounded-2xl sm:rounded-3xl shadow-xl p-6 sm:p-10 lg:p-16">
{/* Title */} {/* Title */}
<div className="mb-8 sm:mb-12"> <div className="mb-8 sm:mb-12">
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-4 sm:mb-6"> <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-4 sm:mb-6">
{titles[currentDoc][language]} {titles[currentDoc][language]}
</h1> </h1>
<div className="flex items-center space-x-2 text-xs sm:text-sm text-gray-500"> <div className="flex items-center space-x-2 text-xs sm:text-sm text-gray-500">
<span>{lastUpdated[language]}:</span> <span>{lastUpdated[language]}:</span>
<time>2025-12-01</time> <time>2025-12-01</time>
</div> </div>
</div> </div>
{/* Content */} {/* Content */}
{loading ? ( {loading ? (
<div className="flex items-center justify-center py-12"> <div className="flex items-center justify-center py-12">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900"></div> <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900"></div>
</div> </div>
) : ( ) : (
<div className="prose prose-sm sm:prose-base lg:prose-lg max-w-none <div className="prose prose-sm sm:prose-base lg:prose-lg max-w-none
prose-headings:font-bold prose-headings:text-gray-900 prose-headings:mt-8 prose-headings:mb-4 prose-headings:font-bold prose-headings:text-gray-900 prose-headings:mt-8 prose-headings:mb-4
prose-h1:text-3xl prose-h1:mt-0 prose-h1:text-3xl prose-h1:mt-0
prose-h2:text-2xl prose-h2:border-b prose-h2:border-gray-200 prose-h2:pb-2 prose-h2:text-2xl prose-h2:border-b prose-h2:border-gray-200 prose-h2:pb-2
@@ -221,37 +263,46 @@ const LegalDocuments = () => {
prose-ul:my-4 prose-ul:list-disc prose-ul:pl-6 prose-ul:my-4 prose-ul:list-disc prose-ul:pl-6
prose-ol:my-4 prose-ol:list-decimal prose-ol:pl-6 prose-ol:my-4 prose-ol:list-decimal prose-ol:pl-6
prose-li:my-2 prose-li:text-gray-700"> prose-li:my-2 prose-li:text-gray-700">
<ReactMarkdown <ReactMarkdown
components={{ components={{
p: ({node, ...props}) => <p className="mb-4" {...props} />, p: ({node, ...props}) => <p className="mb-4" {...props} />,
h1: ({node, ...props}) => <h1 className="mb-6 mt-0" {...props} />, h1: ({node, ...props}) => <h1 className="mb-6 mt-0" {...props} />,
h2: ({node, ...props}) => <h2 className="mb-4 mt-8" {...props} />, h2: ({node, ...props}) => <h2 className="mb-4 mt-8" {...props} />,
h3: ({node, ...props}) => <h3 className="mb-3 mt-6" {...props} />, h3: ({node, ...props}) => <h3 className="mb-3 mt-6" {...props} />,
ul: ({node, ...props}) => <ul className="my-4 space-y-2" {...props} />, ul: ({node, ...props}) => <ul className="my-4 space-y-2" {...props} />,
ol: ({node, ...props}) => <ol className="my-4 space-y-2" {...props} />, ol: ({node, ...props}) => <ol className="my-4 space-y-2" {...props} />,
}} code: ({node, ...props}) => <pre
> className="overflow-x-auto whitespace-pre-wrap break-words rounded-lg p-4 bg-gray-100" {...props} />,
{content}
</ReactMarkdown>
</div>
)}
</article>
{/* Footer */} // code: ({node, inline, ...props}) =>
<footer className="mt-8 sm:mt-12 text-center text-xs sm:text-sm text-gray-500"> // inline ? (
<p>© 2024 Social App. All rights reserved.</p> // <code className="bg-gray-100 px-1 rounded break-words" {...props} />
</footer> // ) : (
</main> // <pre className="overflow-x-auto whitespace-pre-wrap break-words rounded-lg p-4 bg-gray-100" {...props} />
// ),
}}
>
{content}
</ReactMarkdown>
</div>
)}
</article>
{/* Click outside to close language menu */} {/* Footer */}
{showLangMenu && ( <footer className="mt-8 sm:mt-12 text-center text-xs sm:text-sm text-gray-500">
<div <p>© 2024 Social App. All rights reserved.</p>
className="fixed inset-0 z-40" </footer>
onClick={() => setShowLangMenu(false)} </main>
/>
)} {/* Click outside to close language menu */}
</div> {showLangMenu && (
); <div
className="fixed inset-0 z-40"
onClick={() => setShowLangMenu(false)}
/>
)}
</div>
);
}; };
export default LegalDocuments; export default LegalDocuments;

13
src/data/osn/en.md Normal file
View File

@@ -0,0 +1,13 @@
**License**: Apache License 2.0
> **Attribution Requirement**: The animated emoji resources used in this project are from the Google Noto Emoji Animation project,
> protected under the Apache License 2.0. When using these resources, please retain the following attribution information:
：
>
> ```
> Animated emoji provided by Google Noto Emoji Animation
>
> https://googlefonts.github.io/noto-emoji-animation/
>
> Licensed under Apache License 2.0

13
src/data/osn/ms.md Normal file
View File

@@ -0,0 +1,13 @@
**Lesen**: Apache License 2.0
> **Keperluan Pencatatan Nama**: Sumber emoji animasi yang digunakan dalam projek ini berasal dari projek Google Noto Emoji Animation
，
> dilindungi di bawah Lesen Apache License 2.0. Apabila menggunakan sumber ini, sila simpan maklumat pencatatan nama berikut:
>
> ```
> Animated emoji provided by Google Noto Emoji Animation
>
> https://googlefonts.github.io/noto-emoji-animation/
>
> Licensed under Apache License 2.0

11
src/data/osn/zh-CN.md Normal file
View File

@@ -0,0 +1,11 @@
**许可证**: Apache License 2.0
> **署名要求**: 本项目使用的动画表情资源来自 Google Noto Emoji Animation 项目，
> 受 Apache License 2.0 许可证保护。使用时需保留以下署名信息：
>
> ```
> Animated emoji provided by Google Noto Emoji Animation
>
> https://googlefonts.github.io/noto-emoji-animation/
>
> Licensed under Apache License 2.0

13
src/data/osn/zh-TW.md Normal file
View File

@@ -0,0 +1,13 @@
**授權條款**: Apache License 2.0
> **署名要求**: 本專案使用的動畫表情資源來自 Google Noto Emoji Animation 專案
，
> 受 Apache License 2.0 授權條款保護。使用時需保留以下署名資訊：
：
>
> ```
> Animated emoji provided by Google Noto Emoji Animation
>
> https://googlefonts.github.io/noto-emoji-animation/
>
> Licensed under Apache License 2.0