From 1eb2ab796f65355586fb01302c29505efcf451a5 Mon Sep 17 00:00:00 2001
From: sichan <sichanwong0527@gmail.com>
Date: Mon, 20 Jan 2025 15:16:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=96=E6=B6=88=E4=BA=86header=E5=92=8Cfoote?=
 =?UTF-8?q?r=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                           | 131 +++++++++++++++++----------
 pages/mods/mod4-ops/data-market.html | 131 +++++++++++++++++----------
 2 files changed, 162 insertions(+), 100 deletions(-)
diff --git a/index.html b/index.html
index 321dd02..de4193d 100644
--- a/index.html
+++ b/index.html
@@ -8,8 +8,52 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
 </head>
 <body>
-    <!-- 使用组件化的Header -->
-    <div id="header"></div>
+    <!-- 替换组件化的Header -->
+    <div class="header-wrap">
+        <div class="header-inner width1600">
+            <a href="/" style="text-decoration:none;">
+                <div class="s-flex ai-ct">
+                    <img src="./assets/images/GX-Logo.png" alt="logo" style="height:60px;width:auto;margin-right:8px;">
+                    <span style="font-size:25px;font-weight:bold;">可信数据空间</span>
+                </div>
+            </a>
+            <div class="doc-dropdown">
+                <div class="doc-icon">
+                    <i class="fas fa-book"></i>
+                    <span>文档资料</span>
+                </div>
+                <div class="dropdown-menu">
+                    <div class="doc-item">
+                        <a href="https://ona6vkv8mv.feishu.cn/docx/MTdAdHydmoQtqpxaDwDcwVDXnRf" target="_blank" class="doc-link">
+                            可信数据空间管理员手册
+                        </a>
+                        <button class="copy-btn" data-password="1#838S83">
+                            <i class="far fa-copy"></i>
+                            复制密码
+                        </button>
+                    </div>
+                    <div class="doc-item">
+                        <a href="https://ona6vkv8mv.feishu.cn/docx/RSAgdKxcoolO0IxPGnMcKn2Bn2b" target="_blank" class="doc-link">
+                            数据管理员使用手册
+                        </a>
+                        <button class="copy-btn" data-password="88135K&1">
+                            <i class="far fa-copy"></i>
+                            复制密码
+                        </button>
+                    </div>
+                    <div class="doc-item">
+                        <a href="https://ona6vkv8mv.feishu.cn/docx/Og9YdjCpMoECevxxH7KczFQNn2g" target="_blank" class="doc-link">
+                            产品手册
+                        </a>
+                        <button class="copy-btn" data-password="H1#65257">
+                            <i class="far fa-copy"></i>
+                            复制密码
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
     <div class="banner-wrap">
         <div class="s-flex ai-ct" style="height:100%">
@@ -270,8 +314,12 @@
         </div>
     </div>
 
-    <!-- 使用组件化的Footer -->
-    <div id="footer"></div>
+    <!-- 替换组件化的Footer -->
+    <div class="footer">
+        <div class="width1600">
+            <p>© 2024 国信中健数字科技有限公司</p>
+        </div>
+    </div>
 
     <div class="modal-overlay">
         <div class="modal-content">
@@ -291,61 +339,44 @@
     </div>
 
     <script>
-        // 加载Header和Footer组件
-        fetch('/components/header/header.html')
-            .then(response => response.text())
-            .then(html => {
-                document.getElementById('header').innerHTML = html;
-                // 重新初始化header相关的事件监听
-                initHeaderEvents();
+        // 直接添加事件监听代码
+        const docIcon = document.querySelector('.doc-icon');
+        const dropdownMenu = document.querySelector('.dropdown-menu');
+        const copyButtons = document.querySelectorAll('.copy-btn');
+        const tooltip = document.querySelector('.copy-tooltip');
+
+        if (docIcon && dropdownMenu) {
+            docIcon.addEventListener('click', (e) => {
+                e.stopPropagation();
+                dropdownMenu.classList.toggle('show');
             });
 
-        fetch('/components/footer/footer.html')
-            .then(response => response.text())
-            .then(html => {
-                document.getElementById('footer').innerHTML = html;
+            document.addEventListener('click', () => {
+                dropdownMenu.classList.remove('show');
             });
 
-        // Header相关事件初始化函数
-        function initHeaderEvents() {
-            const docIcon = document.querySelector('.doc-icon');
-            const dropdownMenu = document.querySelector('.dropdown-menu');
-            const copyButtons = document.querySelectorAll('.copy-btn');
-            const tooltip = document.querySelector('.copy-tooltip');
+            dropdownMenu.addEventListener('click', (e) => {
+                e.stopPropagation();
+            });
+        }
 
-            if (docIcon && dropdownMenu) {
-                docIcon.addEventListener('click', (e) => {
+        if (copyButtons && tooltip) {
+            copyButtons.forEach(button => {
+                button.addEventListener('click', (e) => {
                     e.stopPropagation();
-                    dropdownMenu.classList.toggle('show');
-                });
-
-                document.addEventListener('click', () => {
-                    dropdownMenu.classList.remove('show');
-                });
-
-                dropdownMenu.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                });
-            }
-
-            if (copyButtons && tooltip) {
-                copyButtons.forEach(button => {
-                    button.addEventListener('click', (e) => {
-                        e.stopPropagation();
-                        const password = button.dataset.password;
+                    const password = button.dataset.password;
+                    
+                    navigator.clipboard.writeText(password).then(() => {
+                        tooltip.classList.remove('hide');
+                        tooltip.classList.add('show');
                         
-                        navigator.clipboard.writeText(password).then(() => {
-                            tooltip.classList.remove('hide');
-                            tooltip.classList.add('show');
-                            
-                            setTimeout(() => {
-                                tooltip.classList.remove('show');
-                                tooltip.classList.add('hide');
-                            }, 2000);
-                        });
+                        setTimeout(() => {
+                            tooltip.classList.remove('show');
+                            tooltip.classList.add('hide');
+                        }, 2000);
                     });
                 });
-            }
+            });
         }
 
         // 准备所有技术内容
diff --git a/pages/mods/mod4-ops/data-market.html b/pages/mods/mod4-ops/data-market.html
index 21736ea..57d6ad2 100644
--- a/pages/mods/mod4-ops/data-market.html
+++ b/pages/mods/mod4-ops/data-market.html
@@ -11,8 +11,52 @@
     <link href="../../../assets/css/styles.css" rel="stylesheet">
 </head>
 <body class="d-flex flex-column min-vh-100">
-    <!-- 使用组件化的Header -->
-    <div id="header"></div>
+    <!-- 替换组件化的Header -->
+    <div class="header-wrap">
+        <div class="header-inner width1600">
+            <a href="/" style="text-decoration:none;">
+                <div class="s-flex ai-ct">
+                    <img src="../../../assets/images/GX-Logo.png" alt="logo" style="height:60px;width:auto;margin-right:8px;">
+                    <span style="font-size:25px;font-weight:bold;">可信数据空间</span>
+                </div>
+            </a>
+            <div class="doc-dropdown">
+                <div class="doc-icon">
+                    <i class="fas fa-book"></i>
+                    <span>文档资料</span>
+                </div>
+                <div class="dropdown-menu">
+                    <div class="doc-item">
+                        <a href="https://ona6vkv8mv.feishu.cn/docx/MTdAdHydmoQtqpxaDwDcwVDXnRf" target="_blank" class="doc-link">
+                            可信数据空间管理员手册
+                        </a>
+                        <button class="copy-btn" data-password="1#838S83">
+                            <i class="far fa-copy"></i>
+                            复制密码
+                        </button>
+                    </div>
+                    <div class="doc-item">
+                        <a href="https://ona6vkv8mv.feishu.cn/docx/RSAgdKxcoolO0IxPGnMcKn2Bn2b" target="_blank" class="doc-link">
+                            数据管理员使用手册
+                        </a>
+                        <button class="copy-btn" data-password="88135K&1">
+                            <i class="far fa-copy"></i>
+                            复制密码
+                        </button>
+                    </div>
+                    <div class="doc-item">
+                        <a href="https://ona6vkv8mv.feishu.cn/docx/Og9YdjCpMoECevxxH7KczFQNn2g" target="_blank" class="doc-link">
+                            产品手册
+                        </a>
+                        <button class="copy-btn" data-password="H1#65257">
+                            <i class="far fa-copy"></i>
+                            复制密码
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
     <!-- 主要内容区域 -->
     <div class="container-fluid py-4 flex-grow-1">
@@ -235,8 +279,12 @@
         </div>
     </div>
 
-    <!-- 使用组件化的Footer -->
-    <div id="footer"></div>
+    <!-- 替换组件化的Footer -->
+    <div class="footer">
+        <div class="width1600">
+            <p>© 2024 国信中健数字科技有限公司</p>
+        </div>
+    </div>
 
     <!-- 复制提示 -->
     <div class="copy-tooltip">
@@ -246,61 +294,44 @@
 
     <script src="../../../vendor/bootstrap/bootstrap.bundle.min.js"></script>
     <script>
-        // 加载Header和Footer组件
-        fetch('/components/header/header.html')
-            .then(response => response.text())
-            .then(html => {
-                document.getElementById('header').innerHTML = html;
-                // 重新初始化header相关的事件监听
-                initHeaderEvents();
+        // 直接添加事件监听代码
+        const docIcon = document.querySelector('.doc-icon');
+        const dropdownMenu = document.querySelector('.dropdown-menu');
+        const copyButtons = document.querySelectorAll('.copy-btn');
+        const tooltip = document.querySelector('.copy-tooltip');
+
+        if (docIcon && dropdownMenu) {
+            docIcon.addEventListener('click', (e) => {
+                e.stopPropagation();
+                dropdownMenu.classList.toggle('show');
             });
 
-        fetch('/components/footer/footer.html')
-            .then(response => response.text())
-            .then(html => {
-                document.getElementById('footer').innerHTML = html;
+            document.addEventListener('click', () => {
+                dropdownMenu.classList.remove('show');
             });
 
-        // Header相关事件初始化函数
-        function initHeaderEvents() {
-            const docIcon = document.querySelector('.doc-icon');
-            const dropdownMenu = document.querySelector('.dropdown-menu');
-            const copyButtons = document.querySelectorAll('.copy-btn');
-            const tooltip = document.querySelector('.copy-tooltip');
+            dropdownMenu.addEventListener('click', (e) => {
+                e.stopPropagation();
+            });
+        }
 
-            if (docIcon && dropdownMenu) {
-                docIcon.addEventListener('click', (e) => {
+        if (copyButtons && tooltip) {
+            copyButtons.forEach(button => {
+                button.addEventListener('click', (e) => {
                     e.stopPropagation();
-                    dropdownMenu.classList.toggle('show');
-                });
-
-                document.addEventListener('click', () => {
-                    dropdownMenu.classList.remove('show');
-                });
-
-                dropdownMenu.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                });
-            }
-
-            if (copyButtons && tooltip) {
-                copyButtons.forEach(button => {
-                    button.addEventListener('click', (e) => {
-                        e.stopPropagation();
-                        const password = button.dataset.password;
+                    const password = button.dataset.password;
+                    
+                    navigator.clipboard.writeText(password).then(() => {
+                        tooltip.classList.remove('hide');
+                        tooltip.classList.add('show');
                         
-                        navigator.clipboard.writeText(password).then(() => {
-                            tooltip.classList.remove('hide');
-                            tooltip.classList.add('show');
-                            
-                            setTimeout(() => {
-                                tooltip.classList.remove('show');
-                                tooltip.classList.add('hide');
-                            }, 2000);
-                        });
+                        setTimeout(() => {
+                            tooltip.classList.remove('show');
+                            tooltip.classList.add('hide');
+                        }, 2000);
                     });
                 });
-            }
+            });
         }
     </script>
 </body>
