feat: 修复已知bug

src/App.jsx

@@ -1,5 +1,5 @@
-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';
 
 const LegalDocuments = () => {
@@ -9,35 +9,14 @@ const LegalDocuments = () => {
   const [hideHeader, setHideHeader] = useState(true);
   const [content, setContent] = useState('');
   const [loading, setLoading] = useState(true);
+  const [initialized, setInitialized] = useState(false); // 添加初始化标志
 
-    // 动态导入 Markdown 文件
+  // 解析URL并设置初始状态（优先执行）
-    useEffect(() => {
-        const loadMarkdown = async () => {
-            setLoading(true);
-            try {
-                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();
-    }, [currentDoc, language]);
-
-    // 解析URL并设置初始状态
-    // 解析 URL query 并设置初始状态
   useEffect(() => {
     const searchParams = new URLSearchParams(window.location.search);
-        const docType = searchParams.get('content') ;
+    const docType = searchParams.get('content');
-        const lang = searchParams.get('language') ;
+    const lang = searchParams.get('language');
 
-
-        console.log(lang);
     if (docType === null && lang === null) {
       setHideHeader(false);
       return;
@@ -48,7 +27,7 @@ const LegalDocuments = () => {
       'user-agreement': 'terms',
       'terms': 'terms',
       'privacy-policy': 'privacy',
-            'privacy': 'privacy'
+      'osn': 'osn',
     };
 
     // 映射语言类型
@@ -57,42 +36,86 @@ const LegalDocuments = () => {
       'zh-FT': 'zh-TW',
       'en': 'en',
       'ms': 'ms',
-        }
+    };
 
-        if (docMap[docType.toLowerCase()]) {
+    if (docType && docMap[docType.toLowerCase()]) {
       setCurrentDoc(docMap[docType.toLowerCase()]);
     }
 
-        if (langMap[lang]) {
+    if (lang && langMap[lang]) {
       setLanguage(langMap[lang]);
     }
 
-        if (docMap[docType.toLowerCase()] && 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);
+      }
+    };
+
+    loadMarkdown();
+  }, [currentDoc, language, initialized]);
+
   const languages = {
     'zh-CN': '简体中文',
     'zh-TW': '繁體中文',
     'en': 'English',
-        'ms': 'Bahasa Melayu'
+    'ms': 'Bahasa Melayu',
   };
 
   const navItems = {
-        'zh-CN': { terms: '用户协议', privacy: '隐私政策' },
+    'zh-CN': {
-        'zh-TW': { terms: '用戶協議', privacy: '隱私政策' },
+      terms: '用户协议',
-        'en': { terms: 'Terms', privacy: 'Privacy' },
+      privacy: '隐私政策',
-        'ms': { terms: 'Terma', privacy: 'Privasi' }
+      osn: '开源组件说明',
+    },
+    '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'
+    'ms': 'Kemaskini Terakhir',
   };
 
   const titles = {
@@ -100,16 +123,23 @@ const LegalDocuments = () => {
       'zh-CN': '用户协议',
       'zh-TW': '用戶協議',
       'en': 'Terms of Service',
-            'ms': 'Perjanjian Pengguna'
+      'ms': 'Perjanjian Pengguna',
     },
     privacy: {
       'zh-CN': '隐私政策',
       'zh-TW': '隱私政策',
       'en': 'Privacy Policy',
-            'ms': 'Dasar Privasi'
+      '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 状态决定是否显示 */}
@@ -119,7 +149,8 @@ const LegalDocuments = () => {
             <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">
+                <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">
@@ -149,6 +180,16 @@ const LegalDocuments = () => {
                 >
                   {navItems[language].privacy}
                 </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 */}
                 <div className="relative">
@@ -156,15 +197,16 @@ const LegalDocuments = () => {
                     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"
                   >
-                                        <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">
                       {languages[language]}
                     </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>
 
                   {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
+                      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">
                       {Object.entries(languages).map(([code, name]) => (
                         <button
                           key={code}
@@ -229,6 +271,15 @@ const LegalDocuments = () => {
                   h3: ({node, ...props}) => <h3 className="mb-3 mt-6" {...props} />,
                   ul: ({node, ...props}) => <ul 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} />,
+
+                  // code: ({node, inline, ...props}) =>
+                  //     inline ? (
+                  //         <code className="bg-gray-100 px-1 rounded break-words" {...props} />
+                  //     ) : (
+                  //         <pre className="overflow-x-auto whitespace-pre-wrap break-words rounded-lg p-4 bg-gray-100" {...props} />
+                  //     ),
                 }}
               >
                 {content}

src/data/osn/en.md

@@ -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

src/data/osn/ms.md

@@ -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

src/data/osn/zh-CN.md

@@ -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

src/data/osn/zh-TW.md

@@ -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