diff --git a/hkRegister.html b/hkRegister.html
index acfd896..83e48e6 100644
--- a/hkRegister.html
+++ b/hkRegister.html
@@ -131,7 +131,8 @@
             <div class="flex items-center space-x-2">
                 <div
                     class="w-10 h-10 rounded-lg bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
-                    <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png" style="width: 40px;height: 40px;">
+                    <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png"
+                        style="width: 40px;height: 40px;">
                 </div>
                 <span
                     class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">夺宝奇兵免费体验</span>
@@ -178,8 +179,7 @@
                 <!-- 注册表单 -->
                 <div class="lg:col-span-3 fade-in delay-100">
                     <div class="bg-white rounded-xl shadow-md p-6 md:p-8 card-hover">
-                        <form id="registrationForm" action="./hkRegisterTip.html" method="post"
-                            onsubmit="return validateForm()">
+                        <form id="registrationForm" action="./hkRegisterTip.html" method="post">
                             <!-- 姓名 -->
                             <div class="form-group">
                                 <label for="fullname" class="form-label">姓名 <span class="text-red-500">*</span></label>
@@ -395,7 +395,8 @@
             <div class="mb-6">
                 <div class="inline-flex items-center space-x-2">
                     <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
-                        <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png" style="width: 40px;height: 40px;">
+                        <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png"
+                            style="width: 40px;height: 40px;">
                     </div>
                     <span class="font-bold">夺宝奇兵免费体验</span>
                 </div>
@@ -405,7 +406,115 @@
     </footer>
 
     <!-- 交互脚本 -->
-    <script>
+    <script type="module">
+        // 从外部文件导入 registerMemberApi 函数
+        import { registerMemberApi } from './src/api/hkmember.js';
+
+        // 获取表单元素
+        const form = document.getElementById('registrationForm');
+
+        // 错误提示元素
+        const nameError = document.getElementById('nameError');
+        const phoneError = document.getElementById('phoneError');
+        const emailError = document.getElementById('emailError');
+
+        // 隐藏所有错误提示
+        function hideAllErrors() {
+            nameError.style.display = 'none';
+            phoneError.style.display = 'none';
+            emailError.style.display = 'none';
+        }
+
+        // 邮箱校验
+        function isValidEmail(email) {
+            const emailRegex = /^[^\s@]+@([^\s@]+\.)+[^\s@]+$/;
+            if (!emailRegex.test(email)) return false;
+            if (email.length > 254) return false;
+            if (email.includes('..')) return false;
+            return true;
+        }
+
+        // 手机号校验
+        function isValidPhone(phone) {
+            if (!phone || phone.trim() === '') return false;
+            const digitsOnly = phone.replace(/[^\d]/g, '');
+            if (digitsOnly.length < 4 || digitsOnly.length > 20) return false;
+            return true;
+        }
+
+        // 清理手机号
+        function cleanPhoneNumber(phone) {
+            if (!phone) return '';
+            let cleaned = phone.replace(/[^\d]/g, '');
+            cleaned = cleaned.replace(/^(00)/, '');
+            return cleaned;
+        }
+
+        // 表单提交处理 - 先调用API保存数据，然后继续表单提交跳转
+        form.addEventListener('submit', async function (e) {
+            // 先进行前端校验
+            hideAllErrors();
+
+            const name = document.getElementById('unameinfo').value.trim();
+            const countryCode = document.getElementById('countryinfo').value;
+            const phoneRaw = document.getElementById('umoblie').value.trim();
+            const wechat = document.getElementById('uwechat').value.trim();
+            const email = document.getElementById('uemail').value.trim();
+
+            let isValid = true;
+
+            if (!name) {
+                nameError.style.display = 'block';
+                isValid = false;
+            }
+
+            if (!phoneRaw || !isValidPhone(phoneRaw)) {
+                phoneError.style.display = 'block';
+                isValid = false;
+            }
+
+            if (!email || !isValidEmail(email)) {
+                emailError.style.display = 'block';
+                isValid = false;
+            }
+
+            if (!isValid) {
+                e.preventDefault();
+                return;
+            }
+
+            // 阻止默认提交，先调用API
+            e.preventDefault();
+
+            // 清理手机号
+            const cleanedPhone = cleanPhoneNumber(phoneRaw);
+
+            // 组装请求参数
+            const requestData = {
+                name: name,
+                code: countryCode,
+                tel: cleanedPhone,
+                email: email
+            };
+
+            if (wechat) {
+                requestData.weChat = wechat;
+            }
+
+            try {
+                const result = await registerMemberApi(requestData);
+                if (result.code === 200) {
+                    // API调用成功，继续表单提交跳转
+                    form.submit();
+                } else {
+                    alert('注册失败：' + (result.msg || '未知错误，请稍后重试'));
+                }
+            } catch (error) {
+                console.error('提交注册出错:', error);
+                alert('网络错误或接口异常，请稍后重试');
+            }
+        });
+
         // 移动端菜单切换
         document.getElementById('mobileMenuBtn').addEventListener('click', function () {
             const menu = document.getElementById('mobileMenu');
@@ -425,7 +534,6 @@
             });
         });
     </script>
-    <script type="text/javascript" src="210802/js/202510jg.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/hkfeedback.html b/hkfeedback.html
index d4c6e1c..55764cb 100644
--- a/hkfeedback.html
+++ b/hkfeedback.html
@@ -151,7 +151,8 @@
             <div class="flex items-center space-x-2">
                 <div
                     class="w-10 h-10 rounded-lg bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
-                    <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png" style="width: 40px;height: 40px;">
+                    <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png"
+                        style="width: 40px;height: 40px;">
                 </div>
                 <span
                     class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">意见反馈</span>
@@ -193,7 +194,7 @@
 
             <!-- 反馈表单卡片 -->
             <div class="bg-white rounded-xl p-6 md:p-8 mb-10 fade-in delay-100 card-shadow">
-                <form id="feedbackForm" action="feedbackinfo.asp" method="post" class="space-y-6">
+                <form id="feedbackForm" class="space-y-6">
                     <!-- 姓名输入 -->
                     <div class="form-group">
                         <label for="name" class="block text-gray-700 font-medium mb-2">姓名 <span
@@ -363,18 +364,18 @@
                         </div>
                     </div>
 
-                    <!-- 反馈内容 -->
+                    <!-- 反馈内容（增加最大长度500字的实时限制与校验） -->
                     <div class="form-group">
                         <label for="feedbackContent" class="block text-gray-700 font-medium mb-2">反馈内容 <span
                                 class="text-danger">*</span></label>
                         <div class="relative">
-                            <textarea id="fcontent" name="fcontent" rows="5" required
+                            <textarea id="fcontent" name="fcontent" rows="5" required maxlength="500"
                                 class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus transition-colors resize-none"
-                                placeholder="请详细描述您的意见或建议..."></textarea>
+                                placeholder="请详细描述您的意见或建议...（最多500字）"></textarea>
                             <div class="absolute right-3 bottom-3 text-gray-400 text-sm">
                                 <span id="charCount">0</span> / 500
                             </div>
-                            <div class="error-message" id="feedbackContentError">请输入反馈内容（至少10个字符）</div>
+                            <div class="error-message" id="feedbackContentError">请输入反馈内容（至少10个字符，最多500字）</div>
                         </div>
                     </div>
 
@@ -411,27 +412,29 @@
                         <i class="fa fa-check-circle text-success mt-1 mr-2 flex-shrink-0"></i>
                         <span>您的个人信息仅用于反馈跟进，我们将严格保密</span>
                     </li>
+                    <li class="flex items-start">
+                        <i class="fa fa-check-circle text-success mt-1 mr-2 flex-shrink-0"></i>
+                        <span>反馈内容限500字以内，请合理控制字数</span>
+                    </li>
                 </ul>
             </div>
         </div>
     </main>
 
-    <!-- 通用弹窗 -->
-    <div id="statusModal" class="modal-backdrop" role="dialog" aria-modal="true">
+    <!-- 成功弹窗（与参考页面样式一致，点击确定按钮关闭） -->
+    <div id="successModal" class="modal-backdrop" role="dialog" aria-modal="true">
         <div class="modal-content p-6">
-            <div class="text-center mb-6">
-                <div id="modalIconContainer"
-                    class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <i id="modalIcon" class="text-2xl"></i>
+            <div class="text-center">
+                <div class="w-16 h-16 rounded-full bg-success/20 flex items-center justify-center mx-auto mb-4">
+                    <i class="fa fa-check-circle text-success text-3xl"></i>
                 </div>
-                <h3 id="modalTitle" class="text-xl font-bold"></h3>
-                <p id="modalMessage" class="text-gray-600 mt-3"></p>
+                <h3 class="text-xl font-bold mb-2">反馈成功！</h3>
+                <p class="text-gray-600 mb-6">感谢您的反馈，我们将持续优化更新</p>
+                <button id="closeModalBtn"
+                    class="px-6 py-2 bg-gradient-to-r from-primary to-secondary text-white rounded-lg hover:shadow-lg transition-all">
+                    确定
+                </button>
             </div>
-
-            <button id="closeModal"
-                class="w-full py-3 rounded-lg bg-primary text-white font-medium hover:bg-primary/90 transition-colors">
-                确定
-            </button>
         </div>
     </div>
 
@@ -450,7 +453,264 @@
             <p class="text-gray-400 text-sm mb-4">Copyright 2026.Capitalmaster Pte Ltd All Rights Reserved.</p>
         </div>
     </footer>
-    <script type="text/javascript" src="250121/js/20251016.js"></script>
+
+    <script type="module">
+        // 从外部文件导入 registerMemberApi 函数
+        import { registerMemberApi } from './src/api/hkmember.js';
+
+        // DOM 元素
+        const form = document.getElementById('feedbackForm');
+        const submitBtn = document.getElementById('submitBtn');
+        const loadingIndicator = document.getElementById('loadingIndicator');
+        const successModal = document.getElementById('successModal');
+        const closeModalBtn = document.getElementById('closeModalBtn');
+
+        // 字符计数
+        const fcontent = document.getElementById('fcontent');
+        const charCount = document.getElementById('charCount');
+
+        // 错误提示元素
+        const nameError = document.getElementById('nameError');
+        const phoneError = document.getElementById('phoneError');
+        const emailError = document.getElementById('emailError');
+        const feedbackContentError = document.getElementById('feedbackContentError');
+
+        // 隐藏所有错误提示
+        function hideAllErrors() {
+            nameError.style.display = 'none';
+            phoneError.style.display = 'none';
+            emailError.style.display = 'none';
+            feedbackContentError.style.display = 'none';
+        }
+
+        // 显示错误提示
+        function showError(element, message) {
+            if (element) {
+                element.textContent = message;
+                element.style.display = 'block';
+            }
+        }
+
+        // 显示成功弹窗
+        function showSuccessModal() {
+            successModal.classList.add('active');
+        }
+
+        // 隐藏成功弹窗
+        function hideSuccessModal() {
+            successModal.classList.remove('active');
+        }
+
+        // 关闭弹窗事件
+        closeModalBtn.addEventListener('click', hideSuccessModal);
+
+        // 点击模态框背景关闭
+        successModal.addEventListener('click', function (e) {
+            if (e.target === successModal) {
+                hideSuccessModal();
+            }
+        });
+
+        // 邮箱校验
+        function isValidEmail(email) {
+            const emailRegex = /^[^\s@]+@([^\s@]+\.)+[^\s@]+$/;
+            if (!emailRegex.test(email)) return false;
+            if (email.length > 254) return false;
+            if (email.includes('..')) return false;
+            return true;
+        }
+
+        // 手机号校验
+        function isValidPhone(phone) {
+            if (!phone || phone.trim() === '') return false;
+            const digitsOnly = phone.replace(/[^\d]/g, '');
+            if (digitsOnly.length < 4 || digitsOnly.length > 20) return false;
+            return true;
+        }
+
+        // 清理手机号
+        function cleanPhoneNumber(phone) {
+            if (!phone) return '';
+            let cleaned = phone.replace(/[^\d]/g, '');
+            cleaned = cleaned.replace(/^(00)/, '');
+            return cleaned;
+        }
+
+        // 反馈类型映射
+        function getFeedbackTypeValue(typeText) {
+            const typeMap = {
+                '功能建议': '1',
+                '问题反馈': '2',
+                '体验优化': '3',
+                '其他建议': '4'
+            };
+            return typeMap[typeText] || '4';
+        }
+
+        // 字符计数 & 实时限制（确保不超过500字，与maxlength配合）
+        if (fcontent && charCount) {
+            // 初始化显示
+            charCount.textContent = fcontent.value.length;
+
+            fcontent.addEventListener('input', function () {
+                let len = this.value.length;
+                // 双重保险：如果超过500则截断
+                if (len > 500) {
+                    this.value = this.value.substring(0, 500);
+                    len = 500;
+                }
+                charCount.textContent = len;
+
+                // 实时移除字数超限的错误提示（如果之前是因为超限报错）
+                if (len <= 500 && feedbackContentError && feedbackContentError.style.display === 'block' && feedbackContentError.textContent.includes('最多500字')) {
+                    // 但避免移除其他类型错误，通过文本内容判断
+                    if (feedbackContentError.textContent.includes('最多500字')) {
+                        feedbackContentError.style.display = 'none';
+                    }
+                }
+            });
+
+            // 增加blur时再次校验，保证用户粘贴超长内容时提示
+            fcontent.addEventListener('blur', function () {
+                let len = this.value.length;
+                if (len > 500) {
+                    this.value = this.value.substring(0, 500);
+                    charCount.textContent = 500;
+                    showError(feedbackContentError, '反馈内容不能超过500字');
+                }
+            });
+        }
+
+        // 移动端菜单切换
+        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+        if (mobileMenuBtn) {
+            mobileMenuBtn.addEventListener('click', function () {
+                const menu = document.getElementById('mobileMenu');
+                menu.classList.toggle('hidden');
+                const icon = this.querySelector('i');
+                if (icon.classList.contains('fa-bars')) {
+                    icon.classList.replace('fa-bars', 'fa-times');
+                } else {
+                    icon.classList.replace('fa-times', 'fa-bars');
+                }
+            });
+        }
+
+        // 表单提交处理 - 调用API保存数据，成功后显示弹窗，额外校验500字限制
+        form.addEventListener('submit', async function (e) {
+            e.preventDefault();
+
+            // 前端校验
+            hideAllErrors();
+
+            const name = document.getElementById('fusername').value.trim();
+            const countryCode = document.getElementById('countryinfo').value;
+            const phoneRaw = document.getElementById('umoblie').value.trim();
+            const wechat = document.getElementById('fwechat').value.trim();
+            const email = document.getElementById('femail').value.trim();
+            const feedbackTypeText = document.getElementById('ftype').value;
+            let feedbackContent = document.getElementById('fcontent').value.trim();
+
+            let isValid = true;
+
+            // 姓名校验
+            if (!name) {
+                showError(nameError, '请输入您的姓名');
+                isValid = false;
+            }
+
+            // 手机号校验
+            if (!phoneRaw || !isValidPhone(phoneRaw)) {
+                showError(phoneError, '请输入有效的手机号码');
+                isValid = false;
+            }
+
+            // 邮箱校验
+            if (!email || !isValidEmail(email)) {
+                showError(emailError, '请输入有效的邮箱地址');
+                isValid = false;
+            }
+
+            // 反馈内容校验: 不能为空且长度必须在10~500之间
+            if (!feedbackContent) {
+                showError(feedbackContentError, '请输入反馈内容（至少10个字符，最多500字）');
+                isValid = false;
+            } else {
+                // 重新获取实际内容（防止中间有特殊空格导致长度偏差）
+                const rawLen = feedbackContent.length;
+                if (rawLen < 10) {
+                    showError(feedbackContentError, '反馈内容至少需要10个字符，请详细描述');
+                    isValid = false;
+                } else if (rawLen > 500) {
+                    // 如果因为某些意外情况（例如直接通过开发者工具修改）导致超长，再次截断并提示
+                    feedbackContent = feedbackContent.substring(0, 500);
+                    document.getElementById('fcontent').value = feedbackContent;
+                    charCount.textContent = 500;
+                    showError(feedbackContentError, '反馈内容不能超过500字，已自动截断');
+                    isValid = false;
+                }
+            }
+
+            if (!isValid) {
+                return;
+            }
+
+            // 清理手机号
+            const cleanedPhone = cleanPhoneNumber(phoneRaw);
+
+            // 组装请求参数
+            const requestData = {
+                name: name,
+                code: countryCode,
+                tel: cleanedPhone,
+                email: email,
+                feedback_content: feedbackContent,
+                feedback_type: getFeedbackTypeValue(feedbackTypeText)
+            };
+
+            // 微信ID有值才传递
+            if (wechat) {
+                requestData.weChat = wechat;
+            }
+
+            // 显示加载状态
+            submitBtn.disabled = true;
+            loadingIndicator.classList.remove('hidden');
+
+            try {
+                const result = await registerMemberApi(requestData);
+                if (result.code === 200) {
+                    // API调用成功，显示成功弹窗
+                    showSuccessModal();
+                    // 清空表单
+                    form.reset();
+                    // 重置字符计数
+                    if (charCount) charCount.textContent = '0';
+                    // 清空所有隐藏错误显示
+                    hideAllErrors();
+                } else {
+                    alert('提交失败：' + (result.msg || '请稍后重试'));
+                }
+            } catch (error) {
+                console.error('提交出错:', error);
+                alert('网络错误或接口异常，请稍后重试');
+            } finally {
+                submitBtn.disabled = false;
+                loadingIndicator.classList.add('hidden');
+            }
+        });
+
+        // 页面加载动画
+        document.addEventListener('DOMContentLoaded', function () {
+            document.querySelectorAll('.fade-in').forEach(el => {
+                el.style.opacity = '1';
+            });
+            // 确保字符计数初始正确
+            if (fcontent && charCount) {
+                charCount.textContent = fcontent.value.length;
+            }
+        });
+    </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/hkhcdbqb.html b/hkhcdbqb.html
index 8e03d9a..480f3e2 100644
--- a/hkhcdbqb.html
+++ b/hkhcdbqb.html
@@ -61,6 +61,7 @@
     <style>
         /* 加载字体 */
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
         /* 全局动画定义 */
         @keyframes fadeIn {
             from {
@@ -94,8 +95,6 @@
         html {
             scroll-behavior: smooth;
         }
-
-        
     </style>
 </head>
 
@@ -105,7 +104,8 @@
         <div class="container mx-auto px-4 py-3 flex justify-between items-center">
             <a href="#" class="flex items-center space-x-2">
                 <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
-                    <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png" style="width: 40px;height: 40px;">
+                    <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png"
+                        style="width: 40px;height: 40px;">
                 </div>
                 <span
                     class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">夺宝奇兵</span>
@@ -229,7 +229,8 @@
             <!-- 宣传项 1 -->
             <div class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row animate-fade-in">
                 <div class="md:w-1/2">
-                    <img src="https://hc.homilychart.com/hc/250121/img/chaojiyunnaoimg.jpg" alt="智能数据分析平台" class="w-full h-full object-cover">
+                    <img src="https://hc.homilychart.com/hc/250121/img/chaojiyunnaoimg.jpg" alt="智能数据分析平台"
+                        class="w-full h-full object-cover">
                 </div>
                 <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
                     <span
@@ -263,7 +264,8 @@
             <div
                 class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row-reverse animate-fade-in delay-100">
                 <div class="md:w-1/2">
-                    <img src="https://hc.homilychart.com/hc/250121/img/aiyucedamoxing.jpg" alt="AI预测大模型" class="w-full h-full object-cover">
+                    <img src="https://hc.homilychart.com/hc/250121/img/aiyucedamoxing.jpg" alt="AI预测大模型"
+                        class="w-full h-full object-cover">
                 </div>
                 <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
                     <span
@@ -298,7 +300,8 @@
             <div
                 class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row-reverse animate-fade-in delay-100">
                 <div class="md:w-1/2">
-                    <img src="https://hc.homilychart.com/hc/250121/img/duobaolijianindex.jpg" alt="夺宝利剑" class="w-full h-full object-cover">
+                    <img src="https://hc.homilychart.com/hc/250121/img/duobaolijianindex.jpg" alt="夺宝利剑"
+                        class="w-full h-full object-cover">
                 </div>
                 <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
                     <span
@@ -498,8 +501,7 @@
                             </div>
                             <div>
                                 <label for="umoblie" class="block text-sm font-medium text-gray-700 mb-1">电话号码</label>
-                                <input type="tel" name="umoblie" id="umoblie" placeholder="纯手机号 ( 不含国家编号 )"
-                                    onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0/g,'')"
+                                <input type="tel" name="umoblie" id="umoblie" placeholder="请输入您的手机号码（可包含空格、连字符等）"
                                     class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                                     autocomplete="off" required>
                             </div>
@@ -543,7 +545,8 @@
                 <div>
                     <div class="flex items-center space-x-2 mb-6">
                         <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
-                            <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png" style="width: 40px;height: 40px;">
+                            <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png"
+                                style="width: 40px;height: 40px;">
                         </div>
                         <span class="text-xl font-bold">夺宝奇兵</span>
                     </div>
@@ -602,7 +605,8 @@
                 <div>
                     <h4 class="text-lg font-semibold mb-6">支持</h4>
                     <ul class="space-y-3">
-                        <li><a href="./hkhcdbqbGuide.html" class="text-gray-400 hover:text-white transition-colors">帮助中心</a>
+                        <li><a href="./hkhcdbqbGuide.html"
+                                class="text-gray-400 hover:text-white transition-colors">帮助中心</a>
                         </li>
                         <li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我有问题" target="_blank"
                                 class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
@@ -637,8 +641,186 @@
         </div>
     </div>
 
-    <!-- JavaScript -->
-    <script type="text/javascript" src="250121/js/251015001.js"></script>
+    <!-- JavaScript - 从外部文件导入API，并包含表单提交与全球兼容的校验逻辑 -->
+    <script type="module">
+        // 从指定路径导入 registerMemberApi 函数
+        import { registerMemberApi } from './src/api/hkmember.js';
+
+        // 等待 DOM 加载完成
+        document.addEventListener('DOMContentLoaded', function () {
+            const form = document.getElementById('registrationForm');
+            const successModal = document.getElementById('successModal');
+            const closeModalBtn = document.getElementById('closeModal');
+            const submitBtn = form.querySelector('button[type="submit"]');
+
+            // 关闭模态框
+            function closeModal() {
+                successModal.classList.add('hidden');
+            }
+
+            closeModalBtn.addEventListener('click', closeModal);
+            successModal.addEventListener('click', function (e) {
+                if (e.target === successModal) closeModal();
+            });
+
+            // ============================================
+            // 全球兼容的校验函数
+            // ============================================
+
+            /**
+             * 邮箱校验 - 支持全球各种域名格式
+             * @param {string} email - 邮箱地址
+             * @returns {boolean} - 是否有效
+             */
+            function isValidEmail(email) {
+                // 基础格式校验：必须包含@和点号，不能有空格
+                const emailRegex = /^[^\s@]+@([^\s@]+\.)+[^\s@]+$/;
+                if (!emailRegex.test(email)) return false;
+
+                // 长度限制（RFC 5322 标准：本地部分最长64，域名最长255，总长不超过254）
+                if (email.length > 254) return false;
+
+                // 检查是否包含连续的点号（如 user..name@example.com）
+                if (email.includes('..')) return false;
+
+                return true;
+            }
+
+            /**
+             * 手机号校验 - 全球宽松模式，不限制具体格式
+             * 只做最基本的检查：不能为空，清理后至少包含4位数字
+             * 注意：真正的号码有效性验证应在后端完成
+             * @param {string} phone - 原始手机号输入
+             * @returns {boolean} - 是否通过基础检查
+             */
+            function isValidPhone(phone) {
+                if (!phone || phone.trim() === '') return false;
+
+                // 移除所有非数字字符（保留数字）
+                const digitsOnly = phone.replace(/[^\d]/g, '');
+
+                // 检查是否至少包含4位数字（全球最短手机号约为4-5位）
+                // 同时不超过20位数字（全球最长手机号约15位，20位留有足够余量）
+                if (digitsOnly.length < 4 || digitsOnly.length > 20) {
+                    return false;
+                }
+
+                return true;
+            }
+
+            /**
+             * 清理手机号 - 提取纯数字部分，用于提交给后端
+             * 注意：国家代码已经通过下拉框单独传递，这里只提取用户输入的本地号码部分
+             * @param {string} phone - 原始手机号输入
+             * @returns {string} - 清理后的纯数字字符串
+             */
+            function cleanPhoneNumber(phone) {
+                if (!phone) return '';
+                // 移除所有非数字字符，只保留数字
+                let cleaned = phone.replace(/[^\d]/g, '');
+
+                // 如果用户输入了国家代码（如开头有00或+86的情况），自动移除开头的00或+后面的数字
+                // 因为国家代码已经通过下拉框单独传递了
+                // 移除开头的00（国际长途前缀）
+                cleaned = cleaned.replace(/^(00)/, '');
+
+                return cleaned;
+            }
+
+            // 表单提交处理
+            form.addEventListener('submit', async function (e) {
+                e.preventDefault();
+
+                // 获取表单字段值
+                const name = document.getElementById('unameinfo').value.trim();
+                const countryCode = document.getElementById('countryinfo').value;
+                const phoneRaw = document.getElementById('umoblie').value.trim();
+                const wechat = document.getElementById('uwechat').value.trim();
+                const email = document.getElementById('uemail').value.trim();
+                const agreement = document.getElementById('agreement').checked;
+
+                // 姓名校验
+                if (!name) {
+                    alert('请输入姓名');
+                    document.getElementById('unameinfo').focus();
+                    return;
+                }
+                if (name.length > 50) {
+                    alert('姓名长度不能超过50个字符');
+                    document.getElementById('unameinfo').focus();
+                    return;
+                }
+
+                // 手机号校验（宽松模式，全球兼容）
+                if (!phoneRaw) {
+                    alert('请输入电话号码');
+                    document.getElementById('umoblie').focus();
+                    return;
+                }
+                if (!isValidPhone(phoneRaw)) {
+                    alert('请输入有效的电话号码（至少4位数字）\n\n示例：\n• 91234567\n• 09123456789\n• 123-4567\n• 1234 5678');
+                    document.getElementById('umoblie').focus();
+                    return;
+                }
+
+                // 邮箱校验
+                if (!email) {
+                    alert('请输入电子邮箱');
+                    document.getElementById('uemail').focus();
+                    return;
+                }
+                if (!isValidEmail(email)) {
+                    alert('请输入有效的电子邮箱地址\n\n示例：\n• username@example.com\n• name@company.co.uk');
+                    document.getElementById('uemail').focus();
+                    return;
+                }
+
+                // 协议确认
+                if (!agreement) {
+                    alert('请同意接收相关产品和服务的资讯');
+                    return;
+                }
+
+                // 清理手机号（提取纯数字）
+                const cleanedPhone = cleanPhoneNumber(phoneRaw);
+
+                // 组装接口参数（按照 registerMemberApi 要求的格式）
+                const requestData = {
+                    name: name,
+                    code: countryCode,
+                    tel: cleanedPhone,
+                    weChat: wechat || '',
+                    email: email,
+                    feedback_content: '',
+                    feedback_type: ''  // 4:其他建议
+                };
+
+                // 显示加载状态
+                const originalBtnText = submitBtn.innerHTML;
+                submitBtn.disabled = true;
+                submitBtn.innerHTML = '提交中...';
+
+                try {
+                    // 调用导入的 registerMemberApi 函数
+                    const result = await registerMemberApi(requestData);
+                    // 根据返回结果判断是否成功
+                    if (result.code === 200) {
+                        successModal.classList.remove('hidden');
+                        form.reset();
+                        document.getElementById('agreement').checked = false;
+                    } else {
+                        alert('注册失败：' + (result.msg || '未知错误，请稍后重试'));
+                    }
+                } catch (error) {
+                    console.error('提交注册出错:', error);
+                    alert('网络错误或接口异常，请稍后重试');
+                } finally {
+                    submitBtn.disabled = false;
+                    submitBtn.innerHTML = originalBtnText;
+                }
+            });
+        });
+    </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/hkhcdbqbDownload.html b/hkhcdbqbDownload.html
index 6a4a80f..f7754f5 100644
--- a/hkhcdbqbDownload.html
+++ b/hkhcdbqbDownload.html
@@ -2,20 +2,20 @@
 <html lang="zh-CN">
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <meta http-equiv="pragma" content="no-cache">
-    <meta http-equiv="cache-control" content="no-cache">
-    <meta http-equiv="expires" content="0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta http-equiv="pragma" content="no-cache" />
+    <meta http-equiv="cache-control" content="no-cache" />
+    <meta http-equiv="expires" content="0" />
     <link rel="shortcut icon" href="dbqb_favicon.ico" />
     <link rel="Bookmark" href="dbqb_favicon.ico" />
-    <meta http-equiv="keywords"
-        content="弘历夺宝奇兵,homilychart,homilylink,HomilyLink,夺宝奇兵HomilyLink,股票体检专家,AI预测大模型,AI炒股时代,AI情绪大模型,超级云脑,夺宝利剑,AI金牛,AI探牛,AI雷达,AI小财神,大牛有型,金牛送福,牛刀小试,HomilyChart,免费体验,机构界的黑科技,数据分析时代,John Lu谈股,John Lu谈股财富圈">
-    <meta http-equiv="description" content="HomilyLink">
+    <meta http-equiv="keywords" content="夺宝奇兵,homilychart,homilylink" />
+    <meta http-equiv="description" content="HomilyLink" />
     <title>夺宝奇兵 - AI炒股时代，机构界的黑科技！</title>
+    <!-- 引入外部资源 -->
     <script src="https://cdn.tailwindcss.com?v=3.3.5"></script>
-    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet" />
 
     <!-- 基础样式配置 -->
     <script>
@@ -23,86 +23,1712 @@
             theme: {
                 extend: {
                     colors: {
-                        primary: '#3B82F6',
-                        windows: '#0078D7',
-                        macos: '#555555',
-                        android: '#3DDC84',
-                        ios: '#000000'
-                    }
-                }
+                        primary: "#3B82F6",
+                        windows: "#0078D7",
+                        macos: "#555555",
+                        android: "#3DDC84",
+                        ios: "#000000",
+                    },
+                },
+            },
+        };
+    </script>
+
+    <style type="text/tailwindcss">
+        @layer utilities {
+        .card-hover {
+          @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
+        }
+        .btn-effect {
+          @apply relative overflow-hidden transition-all duration-300;
+        }
+        .btn-effect::after {
+          content: "";
+          @apply absolute top-0 left-[-100%] w-full h-full bg-white/20 transform skew-x-12 transition-all duration-500;
+        }
+        .btn-effect:hover::after {
+          @apply left-[100%];
+        }
+        .guide-step {
+          @apply flex items-start mb-3;
+        }
+        .guide-step-number {
+          @apply w-6 h-6 rounded-full bg-primary text-white flex items-center justify-center mr-3 flex-shrink-0 mt-0.5;
+        }
+        .modal-backdrop {
+          @apply fixed inset-0 bg-black/50 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300;
+        }
+        .modal-backdrop.active {
+          @apply opacity-100 pointer-events-auto;
+        }
+        .modal-content {
+          @apply bg-white rounded-xl p-6 max-w-md w-full mx-4 transform translate-y-8 transition-transform duration-300;
+        }
+        .modal-backdrop.active .modal-content {
+          @apply translate-y-0;
+        }
+      }
+    </style>
+
+    <style>
+        /* 确保基础样式生效 */
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+                sans-serif;
+        }
+
+        /* 简单动画 */
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .fade-in {
+            animation: fadeIn 0.5s ease-out forwards;
+        }
+
+        .delay-100 {
+            animation-delay: 0.1s;
+        }
+
+        .delay-200 {
+            animation-delay: 0.2s;
+        }
+
+        .delay-300 {
+            animation-delay: 0.3s;
+        }
+    </style>
+    <style>
+        *,
+        ::before,
+        ::after {
+            --tw-border-spacing-x: 0;
+            --tw-border-spacing-y: 0;
+            --tw-translate-x: 0;
+            --tw-translate-y: 0;
+            --tw-rotate: 0;
+            --tw-skew-x: 0;
+            --tw-skew-y: 0;
+            --tw-scale-x: 1;
+            --tw-scale-y: 1;
+            --tw-pan-x: ;
+            --tw-pan-y: ;
+            --tw-pinch-zoom: ;
+            --tw-scroll-snap-strictness: proximity;
+            --tw-gradient-from-position: ;
+            --tw-gradient-via-position: ;
+            --tw-gradient-to-position: ;
+            --tw-ordinal: ;
+            --tw-slashed-zero: ;
+            --tw-numeric-figure: ;
+            --tw-numeric-spacing: ;
+            --tw-numeric-fraction: ;
+            --tw-ring-inset: ;
+            --tw-ring-offset-width: 0px;
+            --tw-ring-offset-color: #fff;
+            --tw-ring-color: rgb(59 130 246 / 0.5);
+            --tw-ring-offset-shadow: 0 0 #0000;
+            --tw-ring-shadow: 0 0 #0000;
+            --tw-shadow: 0 0 #0000;
+            --tw-shadow-colored: 0 0 #0000;
+            --tw-blur: ;
+            --tw-brightness: ;
+            --tw-contrast: ;
+            --tw-grayscale: ;
+            --tw-hue-rotate: ;
+            --tw-invert: ;
+            --tw-saturate: ;
+            --tw-sepia: ;
+            --tw-drop-shadow: ;
+            --tw-backdrop-blur: ;
+            --tw-backdrop-brightness: ;
+            --tw-backdrop-contrast: ;
+            --tw-backdrop-grayscale: ;
+            --tw-backdrop-hue-rotate: ;
+            --tw-backdrop-invert: ;
+            --tw-backdrop-opacity: ;
+            --tw-backdrop-saturate: ;
+            --tw-backdrop-sepia: ;
+            --tw-contain-size: ;
+            --tw-contain-layout: ;
+            --tw-contain-paint: ;
+            --tw-contain-style: ;
+        }
+
+        ::backdrop {
+            --tw-border-spacing-x: 0;
+            --tw-border-spacing-y: 0;
+            --tw-translate-x: 0;
+            --tw-translate-y: 0;
+            --tw-rotate: 0;
+            --tw-skew-x: 0;
+            --tw-skew-y: 0;
+            --tw-scale-x: 1;
+            --tw-scale-y: 1;
+            --tw-pan-x: ;
+            --tw-pan-y: ;
+            --tw-pinch-zoom: ;
+            --tw-scroll-snap-strictness: proximity;
+            --tw-gradient-from-position: ;
+            --tw-gradient-via-position: ;
+            --tw-gradient-to-position: ;
+            --tw-ordinal: ;
+            --tw-slashed-zero: ;
+            --tw-numeric-figure: ;
+            --tw-numeric-spacing: ;
+            --tw-numeric-fraction: ;
+            --tw-ring-inset: ;
+            --tw-ring-offset-width: 0px;
+            --tw-ring-offset-color: #fff;
+            --tw-ring-color: rgb(59 130 246 / 0.5);
+            --tw-ring-offset-shadow: 0 0 #0000;
+            --tw-ring-shadow: 0 0 #0000;
+            --tw-shadow: 0 0 #0000;
+            --tw-shadow-colored: 0 0 #0000;
+            --tw-blur: ;
+            --tw-brightness: ;
+            --tw-contrast: ;
+            --tw-grayscale: ;
+            --tw-hue-rotate: ;
+            --tw-invert: ;
+            --tw-saturate: ;
+            --tw-sepia: ;
+            --tw-drop-shadow: ;
+            --tw-backdrop-blur: ;
+            --tw-backdrop-brightness: ;
+            --tw-backdrop-contrast: ;
+            --tw-backdrop-grayscale: ;
+            --tw-backdrop-hue-rotate: ;
+            --tw-backdrop-invert: ;
+            --tw-backdrop-opacity: ;
+            --tw-backdrop-saturate: ;
+            --tw-backdrop-sepia: ;
+            --tw-contain-size: ;
+            --tw-contain-layout: ;
+            --tw-contain-paint: ;
+            --tw-contain-style: ;
+        }
+
+        /* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */
+        *,
+        ::after,
+        ::before {
+            box-sizing: border-box;
+            border-width: 0;
+            border-style: solid;
+            border-color: #e5e7eb;
+        }
+
+        ::after,
+        ::before {
+            --tw-content: "";
+        }
+
+        :host,
+        html {
+            line-height: 1.5;
+            -webkit-text-size-adjust: 100%;
+            -moz-tab-size: 4;
+            tab-size: 4;
+            font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+                "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+            font-feature-settings: normal;
+            font-variation-settings: normal;
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        body {
+            margin: 0;
+            line-height: inherit;
+        }
+
+        hr {
+            height: 0;
+            color: inherit;
+            border-top-width: 1px;
+        }
+
+        abbr:where([title]) {
+            -webkit-text-decoration: underline dotted;
+            text-decoration: underline dotted;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            font-size: inherit;
+            font-weight: inherit;
+        }
+
+        a {
+            color: inherit;
+            text-decoration: inherit;
+        }
+
+        b,
+        strong {
+            font-weight: bolder;
+        }
+
+        code,
+        kbd,
+        pre,
+        samp {
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+                "Liberation Mono", "Courier New", monospace;
+            font-feature-settings: normal;
+            font-variation-settings: normal;
+            font-size: 1em;
+        }
+
+        small {
+            font-size: 80%;
+        }
+
+        sub,
+        sup {
+            font-size: 75%;
+            line-height: 0;
+            position: relative;
+            vertical-align: baseline;
+        }
+
+        sub {
+            bottom: -0.25em;
+        }
+
+        sup {
+            top: -0.5em;
+        }
+
+        table {
+            text-indent: 0;
+            border-color: inherit;
+            border-collapse: collapse;
+        }
+
+        button,
+        input,
+        optgroup,
+        select,
+        textarea {
+            font-family: inherit;
+            font-feature-settings: inherit;
+            font-variation-settings: inherit;
+            font-size: 100%;
+            font-weight: inherit;
+            line-height: inherit;
+            letter-spacing: inherit;
+            color: inherit;
+            margin: 0;
+            padding: 0;
+        }
+
+        button,
+        select {
+            text-transform: none;
+        }
+
+        button,
+        input:where([type="button"]),
+        input:where([type="reset"]),
+        input:where([type="submit"]) {
+            -webkit-appearance: button;
+            background-color: transparent;
+            background-image: none;
+        }
+
+        :-moz-focusring {
+            outline: auto;
+        }
+
+        :-moz-ui-invalid {
+            box-shadow: none;
+        }
+
+        progress {
+            vertical-align: baseline;
+        }
+
+        ::-webkit-inner-spin-button,
+        ::-webkit-outer-spin-button {
+            height: auto;
+        }
+
+        [type="search"] {
+            -webkit-appearance: textfield;
+            outline-offset: -2px;
+        }
+
+        ::-webkit-search-decoration {
+            -webkit-appearance: none;
+        }
+
+        ::-webkit-file-upload-button {
+            -webkit-appearance: button;
+            font: inherit;
+        }
+
+        summary {
+            display: list-item;
+        }
+
+        blockquote,
+        dd,
+        dl,
+        figure,
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        hr,
+        p,
+        pre {
+            margin: 0;
+        }
+
+        fieldset {
+            margin: 0;
+            padding: 0;
+        }
+
+        legend {
+            padding: 0;
+        }
+
+        menu,
+        ol,
+        ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        dialog {
+            padding: 0;
+        }
+
+        textarea {
+            resize: vertical;
+        }
+
+        input::placeholder,
+        textarea::placeholder {
+            opacity: 1;
+            color: #9ca3af;
+        }
+
+        [role="button"],
+        button {
+            cursor: pointer;
+        }
+
+        :disabled {
+            cursor: default;
+        }
+
+        audio,
+        canvas,
+        embed,
+        iframe,
+        img,
+        object,
+        svg,
+        video {
+            display: block;
+            vertical-align: middle;
+        }
+
+        img,
+        video {
+            max-width: 100%;
+            height: auto;
+        }
+
+        [hidden]:where(:not([hidden="until-found"])) {
+            display: none;
+        }
+
+        .container {
+            width: 100%;
+        }
+
+        @media (min-width: 640px) {
+            .container {
+                max-width: 640px;
+            }
+        }
+
+        @media (min-width: 768px) {
+            .container {
+                max-width: 768px;
+            }
+        }
+
+        @media (min-width: 1024px) {
+            .container {
+                max-width: 1024px;
+            }
+        }
+
+        @media (min-width: 1280px) {
+            .container {
+                max-width: 1280px;
+            }
+        }
+
+        @media (min-width: 1536px) {
+            .container {
+                max-width: 1536px;
+            }
+        }
+
+        .fixed {
+            position: fixed;
+        }
+
+        .left-0 {
+            left: 0px;
+        }
+
+        .right-0 {
+            right: 0px;
+        }
+
+        .top-0 {
+            top: 0px;
+        }
+
+        .z-50 {
+            z-index: 50;
+        }
+
+        .mx-auto {
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        .mb-1 {
+            margin-bottom: 0.25rem;
+        }
+
+        .mb-10 {
+            margin-bottom: 2.5rem;
+        }
+
+        .mb-12 {
+            margin-bottom: 3rem;
+        }
+
+        .mb-16 {
+            margin-bottom: 4rem;
+        }
+
+        .mb-2 {
+            margin-bottom: 0.5rem;
+        }
+
+        .mb-3 {
+            margin-bottom: 0.75rem;
+        }
+
+        .mb-4 {
+            margin-bottom: 1rem;
+        }
+
+        .mb-5 {
+            margin-bottom: 1.25rem;
+        }
+
+        .mb-6 {
+            margin-bottom: 1.5rem;
+        }
+
+        .mr-2 {
+            margin-right: 0.5rem;
+        }
+
+        .mr-4 {
+            margin-right: 1rem;
+        }
+
+        .mt-16 {
+            margin-top: 4rem;
+        }
+
+        .mt-2 {
+            margin-top: 0.5rem;
+        }
+
+        .flex {
+            display: flex;
+        }
+
+        .inline-flex {
+            display: inline-flex;
+        }
+
+        .grid {
+            display: grid;
+        }
+
+        .hidden {
+            display: none;
+        }
+
+        .h-10 {
+            height: 2.5rem;
+        }
+
+        .h-16 {
+            height: 4rem;
+        }
+
+        .h-20 {
+            height: 5rem;
+        }
+
+        .h-auto {
+            height: auto;
+        }
+
+        .w-10 {
+            width: 2.5rem;
+        }
+
+        .w-16 {
+            width: 4rem;
+        }
+
+        .w-20 {
+            width: 5rem;
+        }
+
+        .w-full {
+            width: 100%;
+        }
+
+        .max-w-2xl {
+            max-width: 42rem;
+        }
+
+        .max-w-3xl {
+            max-width: 48rem;
+        }
+
+        .max-w-6xl {
+            max-width: 72rem;
+        }
+
+        .flex-1 {
+            flex: 1 1 0%;
+        }
+
+        .flex-shrink-0 {
+            flex-shrink: 0;
+        }
+
+        .grid-cols-1 {
+            grid-template-columns: repeat(1, minmax(0, 1fr));
+        }
+
+        .flex-col {
+            flex-direction: column;
+        }
+
+        .items-start {
+            align-items: flex-start;
+        }
+
+        .items-center {
+            align-items: center;
+        }
+
+        .justify-center {
+            justify-content: center;
+        }
+
+        .justify-between {
+            justify-content: space-between;
+        }
+
+        .gap-4 {
+            gap: 1rem;
+        }
+
+        .gap-6 {
+            gap: 1.5rem;
+        }
+
+        .space-x-2> :not([hidden])~ :not([hidden]) {
+            --tw-space-x-reverse: 0;
+            margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+            margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+        }
+
+        .space-x-3> :not([hidden])~ :not([hidden]) {
+            --tw-space-x-reverse: 0;
+            margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+            margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+        }
+
+        .space-x-8> :not([hidden])~ :not([hidden]) {
+            --tw-space-x-reverse: 0;
+            margin-right: calc(2rem * var(--tw-space-x-reverse));
+            margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+        }
+
+        .space-y-3> :not([hidden])~ :not([hidden]) {
+            --tw-space-y-reverse: 0;
+            margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+            margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+        }
+
+        .space-y-4> :not([hidden])~ :not([hidden]) {
+            --tw-space-y-reverse: 0;
+            margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+            margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+        }
+
+        .rounded-full {
+            border-radius: 9999px;
+        }
+
+        .rounded-lg {
+            border-radius: 0.5rem;
+        }
+
+        .rounded-xl {
+            border-radius: 0.75rem;
+        }
+
+        .border {
+            border-width: 1px;
+        }
+
+        .border-t {
+            border-top-width: 1px;
+        }
+
+        .border-blue-200 {
+            --tw-border-opacity: 1;
+            border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
+        }
+
+        .border-gray-300 {
+            --tw-border-opacity: 1;
+            border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+        }
+
+        .bg-android {
+            --tw-bg-opacity: 1;
+            background-color: rgb(61 220 132 / var(--tw-bg-opacity, 1));
+        }
+
+        .bg-android\/10 {
+            background-color: rgb(61 220 132 / 0.1);
+        }
+
+        .bg-blue-100 {
+            --tw-bg-opacity: 1;
+            background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
+        }
+
+        .bg-blue-50 {
+            --tw-bg-opacity: 1;
+            background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
+        }
+
+        .bg-gray-100 {
+            --tw-bg-opacity: 1;
+            background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+        }
+
+        .bg-gray-50 {
+            --tw-bg-opacity: 1;
+            background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+        }
+
+        .bg-gray-900 {
+            --tw-bg-opacity: 1;
+            background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
+        }
+
+        .bg-ios {
+            --tw-bg-opacity: 1;
+            background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
+        }
+
+        .bg-macos {
+            --tw-bg-opacity: 1;
+            background-color: rgb(85 85 85 / var(--tw-bg-opacity, 1));
+        }
+
+        .bg-primary {
+            --tw-bg-opacity: 1;
+            background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
+        }
+
+        .bg-white {
+            --tw-bg-opacity: 1;
+            background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+        }
+
+        .bg-white\/95 {
+            background-color: rgb(255 255 255 / 0.95);
+        }
+
+        .bg-windows {
+            --tw-bg-opacity: 1;
+            background-color: rgb(0 120 215 / var(--tw-bg-opacity, 1));
+        }
+
+        .bg-windows\/10 {
+            background-color: rgb(0 120 215 / 0.1);
+        }
+
+        .bg-yellow-100 {
+            --tw-bg-opacity: 1;
+            background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
+        }
+
+        .bg-gradient-to-r {
+            background-image: linear-gradient(to right, var(--tw-gradient-stops));
+        }
+
+        .from-primary {
+            --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
+            --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
+            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+        }
+
+        .to-purple-600 {
+            --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
+        }
+
+        .bg-clip-text {
+            -webkit-background-clip: text;
+            background-clip: text;
+        }
+
+        .p-5 {
+            padding: 1.25rem;
+        }
+
+        .p-6 {
+            padding: 1.5rem;
+        }
+
+        .px-4 {
+            padding-left: 1rem;
+            padding-right: 1rem;
+        }
+
+        .px-5 {
+            padding-left: 1.25rem;
+            padding-right: 1.25rem;
+        }
+
+        .py-10 {
+            padding-top: 2.5rem;
+            padding-bottom: 2.5rem;
+        }
+
+        .py-2 {
+            padding-top: 0.5rem;
+            padding-bottom: 0.5rem;
+        }
+
+        .py-3 {
+            padding-top: 0.75rem;
+            padding-bottom: 0.75rem;
+        }
+
+        .py-4 {
+            padding-top: 1rem;
+            padding-bottom: 1rem;
+        }
+
+        .pb-16 {
+            padding-bottom: 4rem;
+        }
+
+        .pt-28 {
+            padding-top: 7rem;
+        }
+
+        .text-center {
+            text-align: center;
+        }
+
+        .text-3xl {
+            font-size: 1.875rem;
+            line-height: 2.25rem;
+        }
+
+        .text-4xl {
+            font-size: 2.25rem;
+            line-height: 2.5rem;
+        }
+
+        .text-\[clamp\(1\.8rem\2c 4vw\2c 2\.5rem\)\] {
+            font-size: clamp(1.8rem, 4vw, 2.5rem);
+        }
+
+        .text-lg {
+            font-size: 1.125rem;
+            line-height: 1.75rem;
+        }
+
+        .text-sm {
+            font-size: 0.875rem;
+            line-height: 1.25rem;
+        }
+
+        .text-xl {
+            font-size: 1.25rem;
+            line-height: 1.75rem;
+        }
+
+        .text-xs {
+            font-size: 0.75rem;
+            line-height: 1rem;
+        }
+
+        .font-bold {
+            font-weight: 700;
+        }
+
+        .font-medium {
+            font-weight: 500;
+        }
+
+        .font-semibold {
+            font-weight: 600;
+        }
+
+        .text-android {
+            --tw-text-opacity: 1;
+            color: rgb(61 220 132 / var(--tw-text-opacity, 1));
+        }
+
+        .text-gray-400 {
+            --tw-text-opacity: 1;
+            color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+        }
+
+        .text-gray-500 {
+            --tw-text-opacity: 1;
+            color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+        }
+
+        .text-gray-600 {
+            --tw-text-opacity: 1;
+            color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+        }
+
+        .text-gray-700 {
+            --tw-text-opacity: 1;
+            color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+        }
+
+        .text-gray-800 {
+            --tw-text-opacity: 1;
+            color: rgb(31 41 55 / var(--tw-text-opacity, 1));
+        }
+
+        .text-ios {
+            --tw-text-opacity: 1;
+            color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+        }
+
+        .text-macos {
+            --tw-text-opacity: 1;
+            color: rgb(85 85 85 / var(--tw-text-opacity, 1));
+        }
+
+        .text-primary {
+            --tw-text-opacity: 1;
+            color: rgb(59 130 246 / var(--tw-text-opacity, 1));
+        }
+
+        .text-transparent {
+            color: transparent;
+        }
+
+        .text-white {
+            --tw-text-opacity: 1;
+            color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+        }
+
+        .text-windows {
+            --tw-text-opacity: 1;
+            color: rgb(0 120 215 / var(--tw-text-opacity, 1));
+        }
+
+        .text-yellow-500 {
+            --tw-text-opacity: 1;
+            color: rgb(234 179 8 / var(--tw-text-opacity, 1));
+        }
+
+        .shadow-lg {
+            --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+                0 4px 6px -4px rgb(0 0 0 / 0.1);
+            --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
+                0 4px 6px -4px var(--tw-shadow-color);
+            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+                var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+        }
+
+        .shadow-md {
+            --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
+                0 2px 4px -2px rgb(0 0 0 / 0.1);
+            --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
+                0 2px 4px -2px var(--tw-shadow-color);
+            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+                var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+        }
+
+        .shadow-sm {
+            --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+            --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+                var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+        }
+
+        .transition-all {
+            transition-property: all;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            transition-duration: 150ms;
+        }
+
+        .transition-colors {
+            transition-property: color, background-color, border-color, fill, stroke,
+                -webkit-text-decoration-color;
+            transition-property: color, background-color, border-color,
+                text-decoration-color, fill, stroke;
+            transition-property: color, background-color, border-color,
+                text-decoration-color, fill, stroke, -webkit-text-decoration-color;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            transition-duration: 150ms;
+        }
+
+        .delay-100 {
+            transition-delay: 100ms;
+        }
+
+        .delay-200 {
+            transition-delay: 200ms;
+        }
+
+        .delay-300 {
+            transition-delay: 300ms;
+        }
+
+        .card-hover {
+            transition-property: all;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            transition-duration: 300ms;
+        }
+
+        .card-hover:hover {
+            --tw-translate-y: -0.25rem;
+            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+            --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+                0 8px 10px -6px rgb(0 0 0 / 0.1);
+            --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
+                0 8px 10px -6px var(--tw-shadow-color);
+            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+                var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+        }
+
+        .btn-effect {
+            position: relative;
+            overflow: hidden;
+            transition-property: all;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            transition-duration: 300ms;
+        }
+
+        .btn-effect::after {
+            content: "";
+            position: absolute;
+            top: 0px;
+            left: -100%;
+            height: 100%;
+            width: 100%;
+            --tw-skew-x: 12deg;
+            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+            background-color: rgb(255 255 255 / 0.2);
+            transition-property: all;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            transition-duration: 500ms;
+        }
+
+        .btn-effect:hover::after {
+            left: 100%;
+        }
+
+        .guide-step {
+            margin-bottom: 0.75rem;
+            display: flex;
+            align-items: flex-start;
+        }
+
+        .guide-step-number {
+            margin-right: 0.75rem;
+            margin-top: 0.125rem;
+            display: flex;
+            height: 1.5rem;
+            width: 1.5rem;
+            flex-shrink: 0;
+            align-items: center;
+            justify-content: center;
+            border-radius: 9999px;
+            --tw-bg-opacity: 1;
+            background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
+            --tw-text-opacity: 1;
+            color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+        }
+
+        .modal-backdrop {
+            pointer-events: none;
+            position: fixed;
+            inset: 0px;
+            z-index: 50;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: rgb(0 0 0 / 0.5);
+            opacity: 0;
+            transition-property: opacity;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            transition-duration: 300ms;
+        }
+
+        .modal-backdrop.active {
+            pointer-events: auto;
+            opacity: 1;
+        }
+
+        .modal-content {
+            margin-left: 1rem;
+            margin-right: 1rem;
+            width: 100%;
+            max-width: 28rem;
+            --tw-translate-y: 2rem;
+            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+            border-radius: 0.75rem;
+            --tw-bg-opacity: 1;
+            background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+            padding: 1.5rem;
+            transition-property: transform;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            transition-duration: 300ms;
+        }
+
+        .modal-backdrop.active .modal-content {
+            --tw-translate-y: 0px;
+            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+        }
+
+        .hover\:bg-gray-50:hover {
+            --tw-bg-opacity: 1;
+            background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+        }
+
+        .hover\:bg-primary\/90:hover {
+            background-color: rgb(59 130 246 / 0.9);
+        }
+
+        .hover\:text-primary:hover {
+            --tw-text-opacity: 1;
+            color: rgb(59 130 246 / var(--tw-text-opacity, 1));
+        }
+
+        .hover\:shadow-lg:hover {
+            --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+                0 4px 6px -4px rgb(0 0 0 / 0.1);
+            --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
+                0 4px 6px -4px var(--tw-shadow-color);
+            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+                var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+        }
+
+        @media (min-width: 640px) {
+            .sm\:grid-cols-2 {
+                grid-template-columns: repeat(2, minmax(0, 1fr));
             }
         }
-    </script>
 
-    <style type="text/tailwindcss">
-        @layer utilities {
-      .card-hover {
-        @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
-      }
-      .btn-effect {
-        @apply relative overflow-hidden transition-all duration-300;
-      }
-      .btn-effect::after {
-        content: '';
-        @apply absolute top-0 left-[-100%] w-full h-full bg-white/20 transform skew-x-12 transition-all duration-500;
-      }
-      .btn-effect:hover::after {
-        @apply left-[100%];
-      }
-      .guide-step {
-        @apply flex items-start mb-3;
-      }
-      .guide-step-number {
-        @apply w-6 h-6 rounded-full bg-primary text-white flex items-center justify-center mr-3 flex-shrink-0 mt-0.5;
-      }
-      .modal-backdrop {
-        @apply fixed inset-0 bg-black/50 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300;
-      }
-      .modal-backdrop.active {
-        @apply opacity-100 pointer-events-auto;
-      }
-      .modal-content {
-        @apply bg-white rounded-xl shadow-2xl max-w-md w-full mx-4 transform translate-y-8 transition-transform duration-300;
-      }
-      .modal-backdrop.active .modal-content {
-        @apply translate-y-0;
-      }
-    }
-  </style>
+        @media (min-width: 768px) {
+            .md\:flex {
+                display: flex;
+            }
 
-    <style>
-        /* 确保基础样式生效 */
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            .md\:hidden {
+                display: none;
+            }
+
+            .md\:grid-cols-3 {
+                grid-template-columns: repeat(3, minmax(0, 1fr));
+            }
         }
 
-        /* 简单动画 */
-        @keyframes fadeIn {
+        @media (min-width: 1024px) {
+            .lg\:grid-cols-4 {
+                grid-template-columns: repeat(4, minmax(0, 1fr));
+            }
+        }
+    </style>
+    <style data-id="immersive-translate-input-injected-css">
+        .immersive-translate-input {
+            position: absolute;
+            top: 0;
+            right: 0;
+            left: 0;
+            bottom: 0;
+            z-index: 2147483647;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .immersive-translate-attach-loading::after {
+            content: " ";
+
+            --loading-color: #f78fb6;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            display: block;
+            margin: 12px auto;
+            position: relative;
+            color: white;
+            left: -100px;
+            box-sizing: border-box;
+            animation: immersiveTranslateShadowRolling 1.5s linear infinite;
+
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-2000%, -50%);
+            z-index: 100;
+        }
+
+        .immersive-translate-loading-spinner {
+            vertical-align: middle !important;
+            width: 10px !important;
+            height: 10px !important;
+            display: inline-block !important;
+            margin: 0 4px !important;
+            border: 2px rgba(221, 244, 255, 0.6) solid !important;
+            border-top: 2px rgba(0, 0, 0, 0.375) solid !important;
+            border-left: 2px rgba(0, 0, 0, 0.375) solid !important;
+            border-radius: 50% !important;
+            padding: 0 !important;
+            -webkit-animation: immersive-translate-loading-animation 0.6s infinite linear !important;
+            animation: immersive-translate-loading-animation 0.6s infinite linear !important;
+        }
+
+        @-webkit-keyframes immersive-translate-loading-animation {
             from {
-                opacity: 0;
-                transform: translateY(10px);
+                -webkit-transform: rotate(0deg);
             }
 
             to {
-                opacity: 1;
-                transform: translateY(0);
+                -webkit-transform: rotate(359deg);
             }
         }
 
-        .fade-in {
-            animation: fadeIn 0.5s ease-out forwards;
+        @keyframes immersive-translate-loading-animation {
+            from {
+                transform: rotate(0deg);
+            }
+
+            to {
+                transform: rotate(359deg);
+            }
         }
 
-        .delay-100 {
-            animation-delay: 0.1s;
+        .immersive-translate-input-loading {
+            --loading-color: #f78fb6;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            display: block;
+            margin: 12px auto;
+            position: relative;
+            color: white;
+            left: -100px;
+            box-sizing: border-box;
+            animation: immersiveTranslateShadowRolling 1.5s linear infinite;
         }
 
-        .delay-200 {
-            animation-delay: 0.2s;
+        @keyframes immersiveTranslateShadowRolling {
+            0% {
+                box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0),
+                    0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
+            }
+
+            12% {
+                box-shadow: 100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0),
+                    0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
+            }
+
+            25% {
+                box-shadow: 110px 0 var(--loading-color), 100px 0 var(--loading-color),
+                    0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
+            }
+
+            36% {
+                box-shadow: 120px 0 var(--loading-color), 110px 0 var(--loading-color),
+                    100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0);
+            }
+
+            50% {
+                box-shadow: 130px 0 var(--loading-color), 120px 0 var(--loading-color),
+                    110px 0 var(--loading-color), 100px 0 var(--loading-color);
+            }
+
+            62% {
+                box-shadow: 200px 0 rgba(255, 255, 255, 0),
+                    130px 0 var(--loading-color), 120px 0 var(--loading-color),
+                    110px 0 var(--loading-color);
+            }
+
+            75% {
+                box-shadow: 200px 0 rgba(255, 255, 255, 0),
+                    200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color),
+                    120px 0 var(--loading-color);
+            }
+
+            87% {
+                box-shadow: 200px 0 rgba(255, 255, 255, 0),
+                    200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
+                    130px 0 var(--loading-color);
+            }
+
+            100% {
+                box-shadow: 200px 0 rgba(255, 255, 255, 0),
+                    200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
+                    200px 0 rgba(255, 255, 255, 0);
+            }
         }
 
-        .delay-300 {
-            animation-delay: 0.3s;
+        .immersive-translate-toast {
+            display: flex;
+            position: fixed;
+            z-index: 2147483647;
+            left: 0;
+            right: 0;
+            top: 1%;
+            width: fit-content;
+            padding: 12px 20px;
+            margin: auto;
+            overflow: auto;
+            background: #fef6f9;
+            box-shadow: 0px 4px 10px 0px rgba(0, 10, 30, 0.06);
+            font-size: 15px;
+            border-radius: 8px;
+            color: #333;
+        }
+
+        .immersive-translate-toast-content {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+        }
+
+        .immersive-translate-toast-hidden {
+            margin: 0 20px 0 72px;
+            text-decoration: underline;
+            cursor: pointer;
+        }
+
+        .immersive-translate-toast-close {
+            color: #666666;
+            font-size: 20px;
+            font-weight: bold;
+            padding: 0 10px;
+            cursor: pointer;
+        }
+
+        @media screen and (max-width: 768px) {
+            .immersive-translate-toast {
+                top: 0;
+                padding: 12px 0px 0 10px;
+            }
+
+            .immersive-translate-toast-content {
+                flex-direction: column;
+                text-align: center;
+            }
+
+            .immersive-translate-toast-hidden {
+                margin: 10px auto;
+            }
+        }
+
+        .immersive-translate-dialog {
+            position: fixed;
+            z-index: 2147483647;
+            left: 0;
+            top: 0;
+            display: flex;
+            width: 300px;
+            flex-direction: column;
+            align-items: center;
+            font-size: 15px;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            margin: auto;
+            height: fit-content;
+            border-radius: 20px;
+            background-color: #fff;
+        }
+
+        .immersive-translate-modal {
+            display: none;
+            position: fixed;
+            z-index: 2147483647;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgb(0, 0, 0);
+            background-color: rgba(0, 0, 0, 0.4);
+            font-size: 15px;
+        }
+
+        .immersive-translate-modal-content {
+            background-color: #fefefe;
+            margin: 10% auto;
+            padding: 40px 24px 24px;
+            border-radius: 12px;
+            width: 350px;
+            font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
+                "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji",
+                "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+            position: relative;
+        }
+
+        @media screen and (max-width: 768px) {
+            .immersive-translate-modal-content {
+                margin: 25% auto !important;
+            }
+        }
+
+        @media screen and (max-width: 480px) {
+            .immersive-translate-modal-content {
+                width: 80vw !important;
+                margin: 20vh auto !important;
+                padding: 20px 12px 12px !important;
+            }
+
+            .immersive-translate-modal-title {
+                font-size: 14px !important;
+            }
+
+            .immersive-translate-modal-body {
+                font-size: 13px !important;
+                max-height: 60vh !important;
+            }
+
+            .immersive-translate-btn {
+                font-size: 13px !important;
+                padding: 8px 16px !important;
+                margin: 0 4px !important;
+            }
+
+            .immersive-translate-modal-footer {
+                gap: 6px !important;
+                margin-top: 16px !important;
+            }
+        }
+
+        .immersive-translate-modal .immersive-translate-modal-content-in-input {
+            max-width: 500px;
+        }
+
+        .immersive-translate-modal-content-in-input .immersive-translate-modal-body {
+            text-align: left;
+            max-height: unset;
+        }
+
+        .immersive-translate-modal-title {
+            text-align: center;
+            font-size: 16px;
+            font-weight: 700;
+            color: #333333;
+        }
+
+        .immersive-translate-modal-body {
+            text-align: center;
+            font-size: 14px;
+            font-weight: 400;
+            color: #333333;
+            margin-top: 24px;
+            word-break: break-all;
+        }
+
+        @media screen and (max-width: 768px) {
+            .immersive-translate-modal-body {
+                max-height: 250px;
+                overflow-y: auto;
+            }
+        }
+
+        .immersive-translate-close {
+            color: #666666;
+            position: absolute;
+            right: 16px;
+            top: 16px;
+            font-size: 20px;
+            font-weight: bold;
+        }
+
+        .immersive-translate-close:hover,
+        .immersive-translate-close:focus {
+            text-decoration: none;
+            cursor: pointer;
+        }
+
+        .immersive-translate-modal-footer {
+            display: flex;
+            justify-content: center;
+            flex-wrap: wrap;
+            margin-top: 24px;
+        }
+
+        .immersive-translate-btn {
+            width: fit-content;
+            color: #fff;
+            background-color: #ea4c89;
+            border: none;
+            font-size: 14px;
+            margin: 0 8px;
+            padding: 9px 30px;
+            border-radius: 5px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+
+        .immersive-translate-btn-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+
+        .immersive-translate-btn:hover {
+            background-color: #f082ac;
+        }
+
+        .immersive-translate-btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+
+        .immersive-translate-btn:disabled:hover {
+            background-color: #ea4c89;
+        }
+
+        .immersive-translate-link-btn {
+            background-color: transparent;
+            color: #ea4c89;
+            border: none;
+            cursor: pointer;
+            height: 30px;
+            line-height: 30px;
+        }
+
+        .immersive-translate-cancel-btn {
+            /* gray color */
+            background-color: rgb(89, 107, 120);
+        }
+
+        .immersive-translate-cancel-btn:hover {
+            background-color: hsl(205, 20%, 32%);
+        }
+
+        .immersive-translate-action-btn {
+            background-color: transparent;
+            color: #ea4c89;
+            border: 1px solid #ea4c89;
+        }
+
+        .immersive-translate-btn svg {
+            margin-right: 5px;
+        }
+
+        .immersive-translate-link {
+            cursor: pointer;
+            user-select: none;
+            -webkit-user-drag: none;
+            text-decoration: none;
+            color: #ea4c89;
+            -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
+        }
+
+        .immersive-translate-primary-link {
+            cursor: pointer;
+            user-select: none;
+            -webkit-user-drag: none;
+            text-decoration: none;
+            color: #ea4c89;
+            -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
+        }
+
+        .immersive-translate-modal input[type="radio"] {
+            margin: 0 6px;
+            cursor: pointer;
+        }
+
+        .immersive-translate-modal label {
+            cursor: pointer;
+        }
+
+        .immersive-translate-close-action {
+            position: absolute;
+            top: 2px;
+            right: 0px;
+            cursor: pointer;
+        }
+
+        .imt-image-status {
+            background-color: rgba(0, 0, 0, 0.5) !important;
+            display: flex !important;
+            flex-direction: column !important;
+            align-items: center !important;
+            justify-content: center !important;
+            border-radius: 16px !important;
+        }
+
+        .imt-image-status img,
+        .imt-image-status svg,
+        .imt-img-loading {
+            width: 28px !important;
+            height: 28px !important;
+            margin: 0 0 8px 0 !important;
+            min-height: 28px !important;
+            min-width: 28px !important;
+            position: relative !important;
+        }
+
+        .imt-img-loading {
+            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAtFBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////oK74hAAAAPHRSTlMABBMIDyQXHwyBfFdDMSw+OjXCb+5RG51IvV/k0rOqlGRM6KKMhdvNyZBz9MaupmxpWyj437iYd/yJVNZeuUC7AAACt0lEQVRIx53T2XKiUBCA4QYOiyCbiAsuuGBcYtxiYtT3f6/pbqoYHVFO5r+iivpo6DpAWYpqeoFfr9f90DsYAuRSWkFnPO50OgR9PwiCUFcl2GEcx+N/YBh6pvKaefHlUgZd1zVe0NbYcQjGBfzrPE8Xz8aF+71D8gG6DHFPpc4a7xFiCDuhaWgKgGIJQ3d5IMGDrpS4S5KgpIm+en9f6PlAhKby4JwEIxlYJV9h5k5nee9GoxHJ2IDSNB0dwdad1NAxDJ/uXDHYmebdk4PdbkS58CIVHdYSUHTYYRWOJblWSyu2lmy3KNFVJNBhxcuGW4YBVCbYGRZwIooipHsNqjM4FbgOQqQqSKQQU9V8xmi1QlgHqQQ6DDBvRUVCDirs+EzGDGOQTCATgtYTnbCVLgsVgRE0T1QE0qHCFAht2z6dLvJQs3Lo2FQoDxWNUiBhaP4eRgwNkI+dAjVOA/kUrIDwf3CG8NfNOE0eiFotSuo+rBiq8tD9oY4Qzc6YJw99hl1wzpQvD7ef2M8QgnOGJfJw+EltQc+oX2yn907QB22WZcvlUpd143dqQu+8pCJZuGE4xCuPXJqqcs5sNpsI93Rmzym1k4Npk+oD1SH3/a3LOK/JpUBpWfqNySxWzCfNCUITuDG5dtuphrUJ1myeIE9bIsPiKrfqTai5WZxbhtNphYx6GEIHihyGFTI69lje/rxajdh0s0msZ0zYxyPLhYCb1CyHm9Qsd2H37Y3lugVwL9kNh8Ot8cha6fUNQ8nuXi5z9/ExsAO4zQrb/ev1yrCB7lGyQzgYDGuxq1toDN/JGvN+HyWNHKB7zEoK+PX11e12G431erGYzwmytAWU56fkMHY5JJnDRR2eZji3AwtIcrEV8Cojat/BdQ7XOwGV1e1hDjGGjXbdArm8uJZtCH5MbcctVX8A1WpqumJHwckAAAAASUVORK5CYII=");
+            background-size: 28px 28px;
+            animation: image-loading-rotate 1s linear infinite !important;
+        }
+
+        .imt-image-status span {
+            color: var(--bg-2, #fff) !important;
+            font-size: 14px !important;
+            line-height: 14px !important;
+            font-weight: 500 !important;
+            font-family: "PingFang SC", Arial, sans-serif !important;
+        }
+
+        .imt-primary-button {
+            display: flex;
+            padding: 12px 80px;
+            justify-content: center;
+            align-items: center;
+            gap: 8px;
+            border-radius: 8px;
+            background: #ea4c89;
+            color: #fff;
+            font-size: 16px;
+            font-style: normal;
+            font-weight: 700;
+            line-height: 24px;
+            border: none;
+            cursor: pointer;
+        }
+
+        .imt-retry-text {
+            color: #999;
+            text-align: center;
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 21px;
+            cursor: pointer;
+        }
+
+        .imt-action-container {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .imt-modal-content-text {
+            text-align: left;
+            color: #333;
+            font-size: 16px;
+            font-weight: 400;
+            line-height: 24px;
+        }
+
+        @keyframes image-loading-rotate {
+            from {
+                transform: rotate(360deg);
+            }
+
+            to {
+                transform: rotate(0deg);
+            }
+        }
+
+        .imt-linear-gradient-text {
+            background: linear-gradient(90deg,
+                    #00a6ff 0%,
+                    #c369ff 52.4%,
+                    #ff4590 100%);
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .imt-flex-center {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .imt-linear-black-btn {
+            border-radius: 50px;
+            background: linear-gradient(66deg, #222 19%, #696969 94.25%);
+            height: 48px;
+            width: 100%;
+            color: #fff;
+            font-size: 16px;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            justify-content: center;
         }
     </style>
 </head>
@@ -114,7 +1740,8 @@
             <div class="flex items-center space-x-2">
                 <div
                     class="w-10 h-10 rounded-lg bg-gradient-to-r from-primary to-purple-600 flex items-center justify-center">
-                    <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png" style="width: 40px;height: 40px;">
+                    <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png"
+                        style="width: 40px; height: 40px" />
                 </div>
                 <span
                     class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-600">夺宝奇兵-软件下载</span>
@@ -122,11 +1749,11 @@
 
             <!-- 桌面导航 -->
             <nav class="hidden md:flex items-center space-x-8">
-                <a href="./hkhcdbqb.html" class="hover:text-primary transition-colors">首页</a>
-                <a href="./hkhcdbqbDownload.html" class="text-primary font-medium">下载中心</a>
-                <a href="https://api.whatsapp.com/send?phone=6588792879&text=夺宝奇兵下载我需要帮助" target="_blank"
+                <a href="hkhcdbqb.html" class="hover:text-primary transition-colors">首页</a>
+                <a href="hkhcdbqbDownload.html" class="text-primary font-medium">下载中心</a>
+                <a href="https://api.whatsapp.com/send?phone=85255110485&text=我需要帮助" target="_blank"
                     class="hover:text-primary transition-colors">帮助</a>
-                <a href="https://api.whatsapp.com/send?phone=6588792879&text=夺宝奇兵下载我需要帮助" target="_blank"
+                <a href="https://api.whatsapp.com/send?phone=85255110485&text=我需要帮助" target="_blank"
                     class="px-5 py-2 rounded-full bg-gradient-to-r from-primary to-purple-600 text-white hover:shadow-lg transition-all">联系我们</a>
             </nav>
 
@@ -139,11 +1766,11 @@
         <!-- 移动端菜单内容 -->
         <div id="mobileMenu" class="md:hidden hidden bg-white border-t">
             <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
-                <a href="./hkhcdbqb.html" class="py-2 hover:text-primary transition-colors">首页</a>
-                <a href="./hkhcdbqbDownload.html" class="py-2 text-primary">下载中心</a>
-                <a href="https://api.whatsapp.com/send?phone=6588792879&text=夺宝奇兵下载我需要帮助" target="_blank"
+                <a href="hkhcdbqb.html" class="py-2 hover:text-primary transition-colors">首页</a>
+                <a href="hkhcdbqbDownload.html" class="py-2 text-primary">下载中心</a>
+                <a href="https://wa.me/+6588792879?text=夺宝奇兵下载我需要帮助" target="_blank"
                     class="py-2 hover:text-primary transition-colors">帮助</a>
-                <a href="https://api.whatsapp.com/send?phone=6588792879&text=夺宝奇兵下载我需要帮助" target="_blank"
+                <a href="https://wa.me/+6588792879?text=夺宝奇兵下载我需要帮助" target="_blank"
                     class="py-2 mt-2 rounded-full bg-gradient-to-r from-primary to-purple-600 text-white text-center">联系我们</a>
             </div>
         </div>
@@ -153,69 +1780,73 @@
     <main class="pt-28 pb-16 px-4">
         <div class="container mx-auto max-w-6xl">
             <!-- 页面标题 -->
-            <div class="text-center mb-12 fade-in">
-                <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">客户端下载</h1>
-                <p class="text-gray-600 max-w-2xl mx-auto">尊敬的 <font
-                        style="font-weight: bold;color:purple;font-size: 17px;">夺宝奇兵</font>
-                    体验者您好，<br />请选择适合您设备的客户端，体验夺宝奇兵，听直播和重播！</p>
+            <div class="text-center mb-12 fade-in" style="opacity: 1">
+                <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">
+                    客户端下载
+                </h1>
+                <p class="text-gray-600 max-w-2xl mx-auto">
+                    选择适合您设备的客户端软件版本，体验夺宝奇兵，听直播和重播！
+                </p>
             </div>
 
-            <!-- 优化后的下载说明区域 - 整体左对齐 -->
-            <div
-                class="bg-gradient-to-r from-primary/5 to-primary/10 border border-primary/20 rounded-xl p-6 md:p-8 mb-10 fade-in delay-100 shadow-sm">
-                <div class="max-w-3xl mx-auto">
-                    <!-- 图标与标题行 - 左对齐 -->
-                    <div class="flex items-center mb-4">
-                        <div
-                            class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-primary flex-shrink-0 mr-3">
-                            <i class="fa fa-info"></i>
-                        </div>
-                        <h3 class="font-semibold text-lg md:text-xl text-gray-800">下载说明</h3>
+            <!-- 下载提示 - 防止拦截的关键提示 -->
+            <div class="bg-blue-50 border border-blue-200 rounded-xl p-5 mb-10 max-w-3xl mx-auto fade-in delay-100"
+                style="opacity: 1">
+                <div class="flex items-start">
+                    <div
+                        class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-primary flex-shrink-0 mr-4">
+                        <i class="fa fa-info"></i>
                     </div>
-
-                    <!-- 说明文字 - 左对齐，无额外缩进 -->
-                    <p class="text-gray-700 mb-6">我们的安装包经过安全认证，若浏览器提示拦截，请按照以下步骤操作：</p>
-
-                    <!-- 步骤说明 - 左对齐，与标题保持视觉一致 -->
                     <div>
-                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
-                            <div class="guide-step group">
-                                <span class="guide-step-number group-hover:bg-primary/80 transition-colors">1</span>
-                                <span class="text-gray-700 group-hover:text-primary transition-colors">点击浏览器拦截提示</span>
+                        <h3 class="font-semibold text-lg mb-2">下载说明</h3>
+                        <p class="text-gray-700 mb-3">
+                            我们的安装包经过安全认证，若浏览器提示拦截，请按照以下步骤操作：
+                        </p>
+                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+                            <div class="guide-step">
+                                <span class="guide-step-number">1</span>
+                                <span>点击浏览器拦截提示</span>
                             </div>
-                            <div class="guide-step group">
-                                <span class="guide-step-number group-hover:bg-primary/80 transition-colors">2</span>
-                                <span class="text-gray-700 group-hover:text-primary transition-colors">选择"允许下载"</span>
+                            <div class="guide-step">
+                                <span class="guide-step-number">2</span>
+                                <span>选择"允许下载"</span>
                             </div>
-                            <div class="guide-step group">
-                                <span class="guide-step-number group-hover:bg-primary/80 transition-colors">3</span>
-                                <span class="text-gray-700 group-hover:text-primary transition-colors">在下载中心确认保存</span>
+                            <div class="guide-step">
+                                <span class="guide-step-number">3</span>
+                                <span>在下载中心确认保存</span>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
 
+            <!-- 设备展示图 -->
+            <div class="max-w-3xl mx-auto mb-16 fade-in delay-100" style="opacity: 1">
+                <a href="#downloading"><img src="https://hc.homilychart.com/hc/250121/img/homilylink-down.jpeg"
+                        alt="多平台设备展示" class="w-full h-auto rounded-xl shadow-lg" /></a>
+            </div>
+
             <!-- 下载卡片区域 -->
-            <div id="downloading" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
+            <div id="downloading" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                 <!-- Windows -->
-                <div class="bg-white rounded-xl shadow-md p-6 text-center card-hover fade-in">
+                <div class="bg-white rounded-xl shadow-md p-6 text-center card-hover fade-in" style="opacity: 1">
                     <div
                         class="w-20 h-20 mx-auto mb-5 rounded-full bg-windows/10 flex items-center justify-center text-windows text-4xl">
                         <i class="fa fa-windows"></i>
                     </div>
                     <h3 class="text-lg font-bold mb-2">Windows</h3>
-                    <p class="text-gray-500 text-sm mb-3">适用于Win 10及以上</p>
+                    <p class="text-gray-500 text-sm mb-3">适用于Win 7及以上</p>
                     <p class="text-gray-500 text-xs mb-4">版本: v1.2.2 | 178 MB</p>
 
-                    <button onclick="handlePlatformDownload('windows')"
+                    <button onclick="handleDownload('windows')"
                         class="btn-effect w-full py-3 rounded-lg bg-windows text-white font-medium">
                         <i class="fa fa-download mr-2"></i>立即下载
                     </button>
                 </div>
 
                 <!-- macOS -->
-                <div class="bg-white rounded-xl shadow-md p-6 text-center card-hover fade-in delay-100">
+                <div class="bg-white rounded-xl shadow-md p-6 text-center card-hover fade-in delay-100"
+                    style="opacity: 1">
                     <div
                         class="w-20 h-20 mx-auto mb-5 rounded-full bg-gray-100 flex items-center justify-center text-macos text-4xl">
                         <i class="fa fa-apple"></i>
@@ -224,14 +1855,15 @@
                     <p class="text-gray-500 text-sm mb-3">适用于macOS 10.15+</p>
                     <p class="text-gray-500 text-xs mb-4">版本: v1.2.1 | 80.6 MB</p>
 
-                    <button onclick="handlePlatformDownload('macos')"
+                    <button onclick="handleDownload('macos')"
                         class="btn-effect w-full py-3 rounded-lg bg-macos text-white font-medium">
                         <i class="fa fa-download mr-2"></i>立即下载
                     </button>
                 </div>
 
                 <!-- Android -->
-                <div class="bg-white rounded-xl shadow-md p-6 text-center card-hover fade-in delay-200">
+                <div class="bg-white rounded-xl shadow-md p-6 text-center card-hover fade-in delay-200"
+                    style="opacity: 1">
                     <div
                         class="w-20 h-20 mx-auto mb-5 rounded-full bg-android/10 flex items-center justify-center text-android text-4xl">
                         <i class="fa fa-android"></i>
@@ -240,37 +1872,34 @@
                     <p class="text-gray-500 text-sm mb-3">适用于Android 6.0+</p>
                     <p class="text-gray-500 text-xs mb-4">版本: v1.3.22 | 20.11 MB</p>
 
-                    <button onclick="handlePlatformDownload('android')"
+                    <button
+                        onclick="window.location.href='https://play.google.com/store/apps/details?id=com.homilychart.hljw'; return false;"
                         class="btn-effect w-full py-3 rounded-lg bg-android text-white font-medium">
                         <i class="fa fa-download mr-2"></i>立即下载
                     </button>
                 </div>
 
                 <!-- iOS -->
-                <div class="bg-white rounded-xl shadow-md p-6 text-center card-hover fade-in delay-300">
+                <div class="bg-white rounded-xl shadow-md p-6 text-center card-hover fade-in delay-300"
+                    style="opacity: 1">
                     <div
                         class="w-20 h-20 mx-auto mb-5 rounded-full bg-gray-100 flex items-center justify-center text-ios text-4xl">
                         <i class="fa fa-mobile"></i>
                     </div>
                     <h3 class="text-lg font-bold mb-2">iOS</h3>
-                    <p class="text-gray-500 text-sm mb-3">适用于iOS 13.0+</p>
-                    <p class="text-gray-500 text-xs mb-4">版本: v3.1.8 | 45.2 MB</p>
+                    <p class="text-gray-500 text-sm mb-3">适用于iOS 12.0+</p>
+                    <p class="text-gray-500 text-xs mb-4">版本: v1.3.21 | 135.1 MB</p>
 
-                    <button onclick="handlePlatformDownload('ios')"
+                    <button
+                        onclick="window.location.href='https://apps.apple.com/sg/app/homily-link/id6444714265?l=zh-Hans-CN'; return false;"
                         class="btn-effect w-full py-3 rounded-lg bg-ios text-white font-medium">
                         <i class="fa fa-download mr-2"></i>立即下载
                     </button>
                 </div>
             </div>
 
-            <!-- 设备展示图 -->
-            <div class="max-w-3xl mx-auto mb-16 fade-in delay-100">
-                <a href="#"><img src="https://hc.homilychart.com/hc/250121/img/homilylink-down.jpeg" alt="多平台设备展示"
-                        class="w-full h-auto rounded-xl shadow-lg"></a>
-            </div>
-
             <!-- 下载帮助指南 -->
-            <div class="mt-16 bg-white rounded-xl shadow-md p-6 max-w-3xl mx-auto fade-in delay-200">
+            <div class="mt-16 bg-white rounded-xl shadow-md p-6 max-w-3xl mx-auto fade-in delay-200" style="opacity: 1">
                 <h3 class="text-xl font-bold mb-4 text-center">常见下载问题</h3>
 
                 <div class="space-y-4">
@@ -279,7 +1908,9 @@
                             <i class="fa fa-shield text-primary mr-2"></i>
                             为什么我的下载被拦截了？
                         </h4>
-                        <p class="text-gray-600 text-sm">浏览器会对未知的安装包进行安全检查，这是正常的安全机制。我们的软件经过数字签名，您可以放心下载。</p>
+                        <p class="text-gray-600 text-sm">
+                            浏览器会对未知的安装包进行安全检查，这是正常的安全机制。我们的软件经过数字签名，您可以放心下载。
+                        </p>
                     </div>
 
                     <div>
@@ -287,82 +1918,34 @@
                             <i class="fa fa-exclamation-triangle text-primary mr-2"></i>
                             下载的文件无法打开？
                         </h4>
-                        <p class="text-gray-600 text-sm">请检查您的设备是否满足系统要求，Windows和macOS可能需要在设置中允许来自开发者的应用。</p>
+                        <p class="text-gray-600 text-sm">
+                            请检查您的设备是否满足系统要求，Windows和macOS可能需要在设置中允许来自开发者的应用。
+                        </p>
                     </div>
                 </div>
             </div>
         </div>
     </main>
 
-    <!-- 下载确认弹窗 -->
-    <div id="downloadModal" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="modalTitle"
-        aria-describedby="modalDescription">
-        <div class="modal-content p-6">
-            <div class="text-center mb-4">
-                <div
-                    class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center text-green-500 mx-auto mb-4">
-                    <i class="fa fa-download text-2xl"></i>
-                </div>
-                <h3 class="text-xl font-bold" id="modalTitle">确认下载</h3>
-                <p class="text-gray-600 mt-2" id="modalDescription">您即将下载以下文件</p>
-            </div>
-
-            <div class="bg-gray-50 rounded-lg p-4 mb-6">
-                <div class="flex justify-between items-center mb-2">
-                    <span class="text-gray-500">设备:</span>
-                    <span class="font-medium" id="modalDevice"></span>
-                </div>
-                <div class="flex justify-between items-center mb-2">
-                    <span class="text-gray-500">版本:</span>
-                    <span id="modalVersion"></span>
-                </div>
-                <div class="flex justify-between items-center">
-                    <span class="text-gray-500">文件名:</span>
-                    <span class="font-medium" id="modalFileName"></span>
-                </div>
-            </div>
-
-            <div class="p-3 bg-blue-50 border border-blue-100 rounded-lg mb-6 text-sm text-blue-700">
-                <i class="fa fa-info-circle mr-2"></i>
-                <span>如果浏览器阻止下载，请在下载栏中选择"保留"或"允许"以继续。</span>
+    <!-- 设备提醒弹窗 -->
+    <div id="deviceAlertModal" class="modal-backdrop">
+        <div class="modal-content text-center">
+            <div
+                class="w-16 h-16 mx-auto mb-4 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-500 text-3xl">
+                <i class="fa fa-exclamation-triangle"></i>
             </div>
-
-            <div class="flex gap-3">
-                <button id="cancelDownload"
-                    class="flex-1 py-3 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-colors"
-                    aria-label="取消下载">
+            <h3 class="text-xl font-bold mb-2">设备提示</h3>
+            <p class="text-gray-600 mb-6">
+                您正在使用移动设备访问，建议在电脑端下载并安装此版本。
+            </p>
+            <div class="flex space-x-3">
+                <button onclick="closeModal()"
+                    class="flex-1 py-2 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-colors">
                     取消
                 </button>
-                <button id="confirmDownload"
-                    class="flex-1 py-3 rounded-lg bg-primary text-white font-medium hover:bg-primary/90 transition-colors"
-                    aria-label="确认下载">
-                    确认下载
-                </button>
-            </div>
-        </div>
-    </div>
-
-    <!-- 移动端下载电脑端提示弹窗 -->
-    <div id="mobileWarningModal" class="modal-backdrop" role="dialog" aria-modal="true">
-        <div class="modal-content p-6">
-            <div class="text-center mb-6">
-                <div
-                    class="w-16 h-16 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-500 mx-auto mb-4">
-                    <i class="fa fa-exclamation-triangle text-2xl"></i>
-                </div>
-                <h3 class="text-xl font-bold">设备不匹配提示</h3>
-                <p class="text-gray-600 mt-3">您正在使用移动设备访问，建议下载适合手机的版本以获得最佳体验。</p>
-                <p class="text-gray-600 mt-2">如果需要电脑版，请在电脑上访问本页面下载。</p>
-            </div>
-
-            <div class="flex gap-3">
-                <button id="cancelComputerDownload"
-                    class="flex-1 py-3 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-colors">
-                    下载手机版
-                </button>
-                <button id="continueComputerDownload"
-                    class="flex-1 py-3 rounded-lg bg-primary text-white font-medium hover:bg-primary/90 transition-colors">
-                    仍要下载电脑版
+                <button onclick="proceedDownload()"
+                    class="flex-1 py-2 rounded-lg bg-primary text-white font-medium hover:bg-primary/90 transition-colors">
+                    仍要下载
                 </button>
             </div>
         </div>
@@ -374,15 +1957,120 @@
             <div class="mb-6">
                 <div class="inline-flex items-center space-x-2">
                     <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
-                        <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png" style="width: 40px;height: 40px;">
+                        <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png"
+                            style="width: 40px; height: 40px" />
                     </div>
                     <span class="font-bold">夺宝奇兵</span>
                 </div>
             </div>
-            <p class="text-gray-400 text-sm mb-4">Copyright 2026.Capitalmaster Pte Ltd All Rights Reserved.</p>
+            <p class="text-gray-400 text-sm mb-4">
+                Copyright 2025.Capitalmaster Pte Ltd All Rights Reserved.
+            </p>
         </div>
     </footer>
-    <script type="text/javascript" src="250121/js/20251015.js"></script>
+
+    <!-- 下载相关脚本 -->
+    <script>
+        // 存储当前要下载的平台
+        let currentPlatform = null;
+
+        // 移动端菜单切换
+        document
+            .getElementById("mobileMenuBtn")
+            .addEventListener("click", function () {
+                const menu = document.getElementById("mobileMenu");
+                menu.classList.toggle("hidden");
+                const icon = this.querySelector("i");
+                if (icon.classList.contains("fa-bars")) {
+                    icon.classList.replace("fa-bars", "fa-times");
+                } else {
+                    icon.classList.replace("fa-times", "fa-bars");
+                }
+            });
+
+        // 检测是否为移动设备
+        function isMobileDevice() {
+            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+                navigator.userAgent
+            );
+        }
+
+        // 处理下载逻辑
+        function handleDownload(platform) {
+            // 对于电脑版(Windows/macOS)，检查是否在移动设备上
+            if (
+                (platform === "windows" || platform === "macos") &&
+                isMobileDevice()
+            ) {
+                // 存储当前平台并显示提示弹窗
+                currentPlatform = platform;
+                document.getElementById("deviceAlertModal").classList.add("active");
+            } else {
+                // 直接下载
+                startDownload(platform);
+            }
+        }
+
+        // 开始下载
+        function startDownload(platform) {
+            // 构建下载链接（实际应用中替换为真实下载地址）
+            const downloadUrls = {
+                windows:
+                    "https://hc.homilychart.com/hc/250121/download/HomilyLink_Setup_1.2.2.exe",
+                macos:
+                    "https://hc.homilychart.com/hc/250121/download/Homily Link-1.2.1.dmg",
+                android:
+                    "https://play.google.com/store/apps/details?id=com.homilychart.hljw",
+                ios: "https://yourdomain.com/downloads/ios-version.ipa",
+            };
+
+            // 创建下载链接并触发点击
+            const link = document.createElement("a");
+            link.href = downloadUrls[platform];
+
+            // 设置文件名，增加可信度
+            const filenames = {
+                windows: "Homily Link Setup 1.2.2.exe",
+                macos: "Homily Link-1.2.1.dmg",
+                android: "Homily Link.apk",
+                ios: "Homily Link.ipa",
+            };
+
+            if (filenames[platform]) {
+                link.download = filenames[platform];
+            }
+
+            // 模拟用户主动操作延迟，降低拦截概率
+            setTimeout(() => {
+                link.click();
+
+                // 显示下载提示
+                alert("下载已开始，如果没有反应，请检查浏览器顶部或底部的拦截提示");
+            }, 300);
+        }
+
+        // 关闭弹窗
+        function closeModal() {
+            document.getElementById("deviceAlertModal").classList.remove("active");
+            currentPlatform = null;
+        }
+
+        // 继续下载
+        function proceedDownload() {
+            if (currentPlatform) {
+                startDownload(currentPlatform);
+                closeModal();
+            }
+        }
+
+        // 页面加载完成后初始化动画
+        document.addEventListener("DOMContentLoaded", function () {
+            document.querySelectorAll(".fade-in").forEach((el) => {
+                el.style.opacity = "1";
+            });
+        });
+    </script>
 </body>
+<div id="immersive-translate-popup" style="all: initial"></div>
 
 </html>
\ No newline at end of file
diff --git a/hkhcdbqbManagement.html b/hkhcdbqbManagement.html
index f16c2e8..cf1d953 100644
--- a/hkhcdbqbManagement.html
+++ b/hkhcdbqbManagement.html
@@ -4,47 +4,190 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title>管理后台</title>
+    <title>管理后台 · Adam说港股导流</title>
     <style>
+        .tab-container {
+            max-width: 1200px;
+            margin: 0 0 12px 0;
+            padding: 0 16px;
+        }
+
+        .tabs {
+            display: flex;
+            gap: 50px;
+            padding: 4px;
+            border-radius: 8px;
+            width: fit-content;
+        }
+
+        .tab {
+            padding: 10px 20px;
+            border-radius: 6px;
+            border: none;
+            background: transparent;
+            color: #131212;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 16px;
+            white-space: nowrap;
+        }
+
+        .tab:hover {
+            background: rgba(46, 125, 50, 0.1);
+            color: #25D366;
+        }
+
+        .tab.active {
+            background: #BAF7D0;
+            color: #0E4322;
+            box-shadow: 0 2px 4px rgba(46, 125, 50, 0.3);
+        }
+        * {
+            box-sizing: border-box;
+        }
+
         body {
-            font-family: Arial, sans-serif;
+            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
             padding: 24px;
-            background: #f7f8fb;
-            color: #222;
+            background: #f0f2f6;
+            color: #1e293b;
+            margin: 0;
         }
 
         .card {
-            background: #fff;
-            padding: 16px;
-            border-radius: 8px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-            margin: auto;
+            background: #ffffff;
+            padding: 20px 16px 24px 16px;
+            border-radius: 20px;
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
+            max-width: 100%;
+            overflow-x: auto;
+        }
+
+        /* 表格容器实现横向滚动（移动端友好），同时保证单元格内容溢出省略 */
+        .table-wrapper {
+            overflow-x: auto;
+            border-radius: 14px;
+            margin-top: 8px;
         }
 
         table {
             width: 100%;
             border-collapse: collapse;
-            margin-top: 12px;
+            min-width: 1000px;
+            font-size: 13.5px;
         }
 
         th,
         td {
-            padding: 10px 12px;
-            border-bottom: 1px solid #eee;
-            text-align: left;
-            font-size: 14px;
+            padding: 12px 10px;
+            border-bottom: 1px solid #e9edf2;
+            text-align: center;
+            vertical-align: middle;
+            max-width: 0;
+            /* 辅助溢出省略 */
         }
 
+        /* 表头固定宽度 + 允许文字折行但优先省略 */
         th {
-            background: #fafafa;
+            background: #f8fafc;
             font-weight: 600;
+            color: #1e293b;
+            letter-spacing: 0.3px;
+            white-space: nowrap;
+        }
+
+        /* 单元格内容超出宽度后隐藏文字，鼠标悬浮显示完整内容 */
+        td {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 180px;
+            transition: background 0.1s;
+        }
+
+        /* 针对特定列单独控制最大宽度，确保不超出表头宽度 */
+        td:nth-child(1) {
+            max-width: 55px;
+        }
+
+        /* 姓名 */
+        td:nth-child(2) {
+            max-width: 100px;
+        }
+
+        /* WhatsApp按钮列 */
+        td:nth-child(3) {
+            max-width: 100px;
+            overflow: visible;
+            white-space: normal;
+        }
+
+        /* 国家代码 */
+        td:nth-child(4) {
+            max-width: 90px;
+        }
+
+        /* 电话号码 */
+        td:nth-child(5) {
+            max-width: 120px;
+        }
+
+        /* 微信ID */
+        td:nth-child(6) {
+            max-width: 120px;
+        }
+
+        /* 邮箱 */
+        td:nth-child(7) {
+            max-width: 150px;
+        }
+
+        /* 反馈内容 */
+        td:nth-child(8) {
+            max-width: 120px;
+        }
+
+        /* 反馈类型 */
+        td:nth-child(9) {
+            max-width: 100px;
+        }
+
+        /* 添加时间 */
+        td:nth-child(10) {
+            max-width: 160px;
+        }
+
+        /* 是否联系 */
+        td:nth-child(11) {
+            max-width: 100px;
+            white-space: normal;
+        }
+
+        /* 备注 */
+        td:nth-child(12) {
+            max-width: 160px;
+        }
+
+        /* 操作 */
+        td:nth-child(13) {
+            max-width: 100px;
+            white-space: normal;
+        }
+
+        /* 悬浮显示完整内容（自定义title特性，但使用全局title亦可，增强体验）*/
+        td[title] {
+            cursor: help;
         }
 
         .controls {
             display: flex;
-            gap: 12px;
+            gap: 16px;
             align-items: center;
             flex-wrap: wrap;
+            margin-top: 20px;
+            background: #ffffff;
+            padding: 8px 4px;
         }
 
         .pagination {
@@ -56,142 +199,161 @@
         }
 
         .btn {
-            padding: 6px 10px;
-            border-radius: 6px;
-            border: 1px solid #ddd;
+            padding: 6px 12px;
+            border-radius: 30px;
+            border: 1px solid #d4d9e2;
             background: #fff;
             cursor: pointer;
-            user-select: none;
+            font-size: 12.5px;
+            font-weight: 500;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(:disabled) {
+            background-color: #f1f5f9;
+            border-color: #94a3b8;
         }
 
         .btn:disabled {
             opacity: 0.5;
-            cursor: default;
+            cursor: not-allowed;
         }
 
         .btn.primary {
-            background: #007bff;
-            color: #fff;
-            border-color: #007bff;
+            background: #2563eb;
+            color: white;
+            border-color: #2563eb;
+        }
+
+        .btn.primary:hover:not(:disabled) {
+            background: #1d4ed8;
         }
 
         .btn.whatsapp {
             background: #25D366;
             color: #fff;
-            border-color: #25D366;
+            border-color: #1da15a;
+        }
+
+        .btn.whatsapp:hover {
+            background: #20b859;
         }
 
         .status-btn {
-            padding: 4px 8px;
-            border-radius: 6px;
-            border: 1px solid #ccc;
+            padding: 5px 12px;
+            border-radius: 24px;
+            border: none;
+            font-weight: 500;
             cursor: pointer;
+            font-size: 12px;
+            transition: 0.1s;
         }
 
         .status-0 {
-            background: red;
-            color: #fff;
+            background: #fee2e2;
+            color: #b91c1c;
+            border: 1px solid #fecaca;
         }
 
         .status-1 {
-            background: #2f9e44;
-            color: #fff;
-            border-color: #2f9e44;
+            background: #dcfce7;
+            color: #15803d;
+            border: 1px solid #bbf7d0;
         }
 
         .btn.active {
-            background: #007bff;
-            color: #fff;
-            border-color: #007bff;
+            background: #2563eb;
+            color: white;
+            border-color: #2563eb;
         }
 
         select,
         input[type="number"] {
-            padding: 6px;
-            border-radius: 6px;
-            border: 1px solid #ddd;
+            padding: 6px 12px;
+            border-radius: 30px;
+            border: 1px solid #cbd5e1;
+            background: white;
+            font-size: 13px;
         }
 
         .small {
             font-size: 13px;
-            color: #666;
+            color: #475569;
         }
 
-        @media (max-width: 640px) {
+        @media (max-width: 720px) {
             .controls {
                 flex-direction: column;
-                align-items: flex-start;
+                align-items: stretch;
             }
 
             .pagination {
                 margin-left: 0;
+                justify-content: center;
             }
         }
 
+        /* 备注模态框 */
         #noteModal {
             display: none;
             position: fixed;
             inset: 0;
-            background: rgba(0, 0, 0, 0.45);
+            background: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(3px);
             align-items: center;
             justify-content: center;
-            z-index: 9999;
+            z-index: 10000;
         }
 
         #noteModal .dialog {
             background: #fff;
-            padding: 16px;
-            border-radius: 8px;
+            padding: 24px;
+            border-radius: 28px;
             width: 90%;
             max-width: 520px;
-            box-sizing: border-box;
+            box-shadow: 0 25px 40px rgba(0, 0, 0, 0.2);
         }
 
         #noteModal textarea {
             width: 100%;
-            min-width: 60%;
-            max-width: 100%;
-            min-height: 150px;
-            box-sizing: border-box;
-            padding: 8px;
-            border-radius: 6px;
-            border: 1px solid #ddd;
+            min-height: 130px;
+            padding: 12px;
+            border-radius: 18px;
+            border: 1px solid #cbd5e1;
             font-size: 14px;
+            font-family: inherit;
+            resize: vertical;
         }
 
         .toast {
             position: fixed;
-            top: -20px;
+            top: 24px;
             left: 50%;
-            transform: translateX(-50%);
-            background: #4caf50;
-            color: #fff;
-            padding: 10px 16px;
-            border-radius: 6px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-            font-size: 16px;
+            transform: translateX(-50%) translateY(-30px);
+            background: #1e293b;
+            color: white;
+            padding: 10px 20px;
+            border-radius: 60px;
+            font-size: 14px;
+            font-weight: 500;
             opacity: 0;
-            transition: all 0.3s ease;
-            z-index: 10000;
+            transition: all 0.2s ease;
+            z-index: 11000;
             pointer-events: none;
+            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
         }
 
         .toast.show {
             opacity: 1;
-            top: 20px;
+            transform: translateX(-50%) translateY(0);
         }
 
-        table th,
-        table td {
-            text-align: center;
-        }
-
-        /* 登录验证样式 */
+        /* 登录遮罩 */
         #loginCheckModal {
             display: none;
             position: fixed;
             inset: 0;
-            background: rgba(0, 0, 0, 0.7);
+            background: rgba(0, 0, 0, 0.75);
             align-items: center;
             justify-content: center;
             z-index: 99999;
@@ -199,65 +361,59 @@
 
         #loginCheckModal .dialog {
             background: #fff;
-            padding: 30px;
-            border-radius: 12px;
+            padding: 32px;
+            border-radius: 32px;
             width: 90%;
-            max-width: 400px;
+            max-width: 380px;
             text-align: center;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
         }
 
         #loginCheckModal h3 {
-            margin: 0 0 16px;
-            color: #e74c3c;
-            font-size: 20px;
-        }
-
-        #loginCheckModal p {
-            margin: 0 0 24px;
-            color: #666;
-            line-height: 1.5;
-        }
-
-        #loginCheckModal .btn {
-            padding: 10px 20px;
-            font-size: 16px;
+            margin: 0 0 12px;
+            color: #e11d48;
         }
     </style>
 </head>
 
 <body>
-    <!-- 登录验证模态框 -->
+
     <div id="loginCheckModal">
         <div class="dialog">
-            <h3>访问被拒绝</h3>
-            <p>您尚未登录或登录已过期，请先登录系统。</p>
+            <h3>🔐 访问被拒绝</h3>
+            <p>您尚未登录或登录已过期，请重新登录系统。</p>
             <button class="btn primary" id="goToLoginBtn">前往登录页面</button>
         </div>
     </div>
-
+    <div class="tab-container">
+        <div class="tabs">
+            <button class="tab active" data-tab="win-us-stock">Adam说港股导流</button>
+        </div>
+    </div>
     <div class="card">
-        <table aria-describedby="tableDesc">
-            <thead>
-                <tr>
-                    <th style="width: 40px">#</th>
-                    <th style="width: 100px">姓名</th>
-                    <th style="width: 100px">WhatsApp</th>
-                    <th style="width: 90px">国家/地区代码</th>
-                    <th style="width: 120px">电话号码</th>
-                    <th style="width: 120px">微信ID</th>
-                    <th style="width: 150px">邮箱</th>
-                    <th style="width: 120px">反馈内容</th>
-                    <th style="width: 100px">反馈类型</th>
-                    <th style="width: 160px">添加时间</th>
-                    <th style="width: 100px">是否联系</th>
-                    <th style="width: 160px">备注</th>
-                    <th style="width: 100px">操作</th>
-                </tr>
-            </thead>
-            <tbody id="tableBody"></tbody>
-        </table>
-        <div class="controls" style="margin-bottom: 8px; margin-top: 12px">
+        <div class="table-wrapper">
+            <table aria-describedby="成员反馈列表">
+                <thead>
+                    <tr>
+                        <th style="width: 50px">序号</th>
+                        <th style="width: 100px">姓名</th>
+                        <th style="width: 100px">WhatsApp</th>
+                        <th style="width: 90px">国家/地区代码</th>
+                        <th style="width: 120px">电话号码</th>
+                        <th style="width: 120px">微信ID</th>
+                        <th style="width: 150px">邮箱</th>
+                        <th style="width: 130px">反馈内容</th>
+                        <th style="width: 100px">反馈类型</th>
+                        <th style="width: 160px">添加时间</th>
+                        <th style="width: 100px">是否联系</th>
+                        <th style="width: 160px">备注</th>
+                        <th style="width: 100px">操作</th>
+                    </tr>
+                </thead>
+                <tbody id="tableBody"></tbody>
+            </table>
+        </div>
+
+        <div class="controls">
             <div class="small">
                 每页显示
                 <select id="pageSizeSelect">
@@ -268,73 +424,70 @@
                 </select>
                 条
             </div>
-
             <div class="small">共 <span id="totalCount">0</span> 条</div>
-
             <div class="pagination" id="pagination"></div>
         </div>
-        <!-- 备注编辑模态 -->
-        <div id="noteModal">
-            <div class="dialog">
-                <h3 style="margin: 0 0 8px">编辑备注</h3>
-                <textarea id="noteTextarea" rows="6" placeholder="输入备注..."></textarea>
-                <div style="
-              margin-top: 10px;
-              display: flex;
-              justify-content: flex-end;
-              gap: 8px;
-            ">
-                    <button class="btn" id="noteCancelBtn">取消</button>
-                    <button class="btn primary" id="noteSaveBtn">保存</button>
-                </div>
+    </div>
+
+    <div id="noteModal">
+        <div class="dialog">
+            <h3 style="margin-top: 0;">✏️ 编辑备注</h3>
+            <textarea id="noteTextarea" rows="4" placeholder="输入备注信息..."></textarea>
+            <div style="margin-top: 20px; display: flex; justify-content: flex-end; gap: 12px;">
+                <button class="btn" id="noteCancelBtn">取消</button>
+                <button class="btn primary" id="noteSaveBtn">保存</button>
             </div>
         </div>
     </div>
     <div id="toast" class="toast"></div>
+
     <script type="module">
         import { getMemberListApi, updateMemberStateApi, editMemberNoteApi } from './src/api/hkmember.js'
 
-        // 登录验证函数
+        // ---------- 登录验证 ----------
         function checkLoginStatus() {
             const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
-            const loginTime = parseInt(localStorage.getItem('loginTime'));
-            const currentTime = new Date().getTime();
-            const hoursDiff = (currentTime - loginTime) / (1000 * 60 * 60);
-
-            // 检查是否登录且登录时间在24小时内
-            if (!isLoggedIn || hoursDiff >= 24) {
-                // 清除过期的登录状态
-                localStorage.removeItem('isLoggedIn');
-                localStorage.removeItem('loginTime');
-                return false;
-            }
-            return true;
+            const loginTime = parseInt(localStorage.getItem('loginTime'), 10);
+            if (!isLoggedIn || isNaN(loginTime)) return false;
+            const hoursDiff = (new Date().getTime() - loginTime) / (1000 * 60 * 60);
+            return hoursDiff < 24;
         }
 
-        // 显示登录验证模态框
         function showLoginCheckModal() {
             const modal = document.getElementById('loginCheckModal');
-            modal.style.display = 'flex';
+            if (modal) modal.style.display = 'flex';
         }
-
-        // 隐藏登录验证模态框
         function hideLoginCheckModal() {
             const modal = document.getElementById('loginCheckModal');
-            modal.style.display = 'none';
+            if (modal) modal.style.display = 'none';
         }
-
-        // 跳转到登录页面
         function redirectToLogin() {
             window.location.href = 'hkLogiManagement.html';
         }
 
-        // 检查登录状态
-        if (!checkLoginStatus()) {
-            showLoginCheckModal();
+        // 全局前置守卫：如果未登录则显示弹窗，返回false
+        function requireAuth() {
+            if (!checkLoginStatus()) {
+                showLoginCheckModal();
+                return false;
+            }
+            return true;
         }
 
-        // 绑定前往登录页面按钮事件
-        document.getElementById('goToLoginBtn').addEventListener('click', redirectToLogin);
+        document.getElementById('goToLoginBtn')?.addEventListener('click', redirectToLogin);
+
+        // ---------- 映射反馈类型文字 ----------
+        function formatFeedbackType(typeValue) {
+            // 后端返回可能是字符串或数字 "1", 2, 3, 4
+            const val = parseInt(typeValue, 10);
+            switch (val) {
+                case 1: return '功能建议';
+                case 2: return '问题反馈';
+                case 3: return '体验优化';
+                case 4: return '其他建议';
+                default: return typeValue || '—';
+            }
+        }
 
         let state = {
             pageSize: 20,
@@ -343,105 +496,164 @@
             items: []
         };
 
-        // DOM
         const tableBody = document.getElementById("tableBody");
         const paginationEl = document.getElementById("pagination");
         const totalCountEl = document.getElementById("totalCount");
-        const currentPageEl = document.getElementById("currentPage");
-        const showingRangeEl = document.getElementById("showingRange");
         const pageSizeSelect = document.getElementById("pageSizeSelect");
-        const gotoInput = document.getElementById("gotoInput");
 
         const noteModal = document.getElementById("noteModal");
         const noteTextarea = document.getElementById("noteTextarea");
         const noteCancelBtn = document.getElementById("noteCancelBtn");
         const noteSaveBtn = document.getElementById("noteSaveBtn");
-
         const toastEl = document.getElementById("toast");
+
         let editingRowId = null;
-        function showToast(msg) {
+
+        function showToast(msg, isError = false) {
             toastEl.textContent = msg;
+            toastEl.style.background = isError ? '#e11d48' : '#1e293b';
             toastEl.classList.add("show");
-            setTimeout(() => toastEl.classList.remove("show"), 1000);
+            setTimeout(() => {
+                toastEl.classList.remove("show");
+                toastEl.style.background = '#1e293b';
+            }, 1800);
         }
+
+        // 获取数据
         async function fetchPage(page, pageSize) {
-            // 每次请求数据前都检查登录状态
-            if (!checkLoginStatus()) {
-                showLoginCheckModal();
-                return;
-            }
+            if (!requireAuth()) return { items: [], total: 0 };
 
             try {
                 const res = await getMemberListApi({
                     page: page,
                     page_size: pageSize,
-                })
-                if (typeof res.code !== "undefined" && res.code !== 200) {
-                    throw new Error(res.msg || "接口返回错误");
+                });
+                if (res && typeof res.code !== "undefined" && res.code !== 200) {
+                    throw new Error(res.msg || "接口异常");
                 }
-                console.log(res)
-                const payload = res.data || {};
-                state.items = payload.list;
-                state.total = payload.total;
+                const payload = res?.data || {};
+                state.items = payload.list || [];
+                state.total = payload.total || 0;
+                return { items: state.items, total: state.total };
             } catch (err) {
-                alert("获取数据失败");
+                console.error(err);
+                showToast("获取数据失败: " + (err.message || '网络错误'), true);
+                state.items = [];
                 state.total = 0;
+                return { items: [], total: 0 };
             }
         }
-        // 渲染表格行
+
+        // 辅助函数：给td增加title悬浮完整内容（自动处理每个单元格）
+        function applyTitleToCells() {
+            const rows = tableBody.querySelectorAll('tr');
+            rows.forEach(row => {
+                const cells = row.querySelectorAll('td');
+                cells.forEach(cell => {
+                    // 跳过按钮列（第三列WhatsApp按钮，第11列状态按钮，第13列操作按钮）避免title干扰
+                    const isButtonCell = cell.querySelector('button') &&
+                        (cell.previousElementSibling?.innerText?.includes('WhatsApp') ||
+                            cell.querySelector('.status-btn') ||
+                            cell.querySelector('[data-action="editNote"]'));
+                    if (!isButtonCell && cell.innerText && cell.innerText.trim() !== '') {
+                        const rawText = cell.innerText;
+                        if (!cell.hasAttribute('data-has-title')) {
+                            cell.setAttribute('title', rawText);
+                            cell.setAttribute('data-has-title', 'true');
+                        } else if (cell.getAttribute('title') !== rawText) {
+                            cell.setAttribute('title', rawText);
+                        }
+                    } else if (!isButtonCell && cell.innerText === '') {
+                        cell.removeAttribute('title');
+                    }
+                });
+            });
+        }
+
+        // 渲染表格（带溢出省略 + 悬浮显示完整内容）
         function renderTable() {
             const startIndex = (state.currentPage - 1) * state.pageSize;
             const items = state.items || [];
 
-            tableBody.innerHTML = items
-                .map((item, idx) => {
-                    const serial = startIndex + idx + 1;
-                    const statusClass = item.isRelated ? "status-1" : "status-0";
-                    const statusText = item.isRelated ? "已联系" : "未联系";
-
-                    // 构建WhatsApp链接 - 移除国家代码中的+号
-                    const cleanCode = (item.code || '').replace(/\+/g, '');
-                    const whatsappPhone = cleanCode + (item.telephone || '');
-                    const whatsappUrl = `https://api.whatsapp.com/send?phone=${encodeURIComponent(whatsappPhone)}&text=${encodeURIComponent('hello欢迎来到Adam说港股')}`;
-
-                    return `
-        <tr>
-            <td>${serial}</td>
-            <td>${escapeHtml(item.name || "")}</td>
-            <td>
-              <button class="btn whatsapp" data-action="whatsapp" data-id="${item.id}">WhatsApp</button>
-            </td>
-            <td>${escapeHtml(item.code || "")}</td>
-            <td>${escapeHtml(item.telephone || "")}</td>
-            <td>${escapeHtml(item.wechat || "")}</td>
-            <td>${escapeHtml(item.email || "")}</td>
-            <td>${escapeHtml(item.feedback_content || "")}</td>
-            <td>${escapeHtml(item.feedback_type || "")}</td>
-            <td>${escapeHtml(item.createdAt || "")}</td>
-            <td>
-              <button class="status-btn ${statusClass}" data-action="toggle" data-id="${item.id
-                        }">${statusText}</button>
-            </td>
-            <td>${escapeHtml(item.note || "")}</td>
-             <td>
-              <button class="btn" data-action="editNote" data-id="${item.id
-                        }">编辑备注</button>
-            </td>
-        </tr>
-      `;
-                })
-                .join("");
+            tableBody.innerHTML = items.map((item, idx) => {
+                const serial = startIndex + idx + 1;
+                const statusClass = item.isRelated ? "status-1" : "status-0";
+                const statusText = item.isRelated ? "已联系" : "未联系";
+                // 反馈类型文字转换
+                const feedbackTypeText = formatFeedbackType(item.feedback_type);
+
+                // 构建WhatsApp链接 (清理+号)
+                const cleanCode = (item.code || '').replace(/\+/g, '');
+                const whatsappPhone = cleanCode + (item.telephone || '');
+                const whatsappUrl = `https://api.whatsapp.com/send?phone=${encodeURIComponent(whatsappPhone)}&text=${encodeURIComponent('hello欢迎来到Adam说港股')}`;
+
+                // 安全转义
+                const name = escapeHtml(item.name || "");
+                const code = escapeHtml(item.code || "");
+                const telephone = escapeHtml(item.telephone || "");
+                const wechat = escapeHtml(item.wechat || "");
+                const email = escapeHtml(item.email || "");
+                const feedbackContent = escapeHtml(item.feedback_content || "");
+                const createdAt = escapeHtml(item.createdAt || "");
+                const note = escapeHtml(item.note || "");
+
+                // 注意：表格结构保持13列，反馈类型用转换后的文字
+                return `
+                    <tr>
+                        <td title="${serial}">${serial}</td>
+                        <td title="${name}">${name}</td>
+                        <td style="overflow: visible; white-space: normal;">
+                            <button class="btn whatsapp" data-action="whatsapp" data-id="${item.id}">💬 WhatsApp</button>
+                        </td>
+                        <td title="${code}">${code}</td>
+                        <td title="${telephone}">${telephone}</td>
+                        <td title="${wechat}">${wechat}</td>
+                        <td title="${email}">${email}</td>
+                        <td title="${feedbackContent}">${feedbackContent}</td>
+                        <td title="${feedbackTypeText}">${feedbackTypeText}</td>
+                        <td title="${createdAt}">${createdAt}</td>
+                        <td style="white-space: normal;">
+                            <button class="status-btn ${statusClass}" data-action="toggle" data-id="${item.id}">${statusText}</button>
+                        </td>
+                        <td title="${note}">${note}</td>
+                        <td>
+                            <button class="btn" data-action="editNote" data-id="${item.id}" style="font-size:12px;">✎ 备注</button>
+                        </td>
+                    </tr>
+                `;
+            }).join("");
+
+            // 为所有普通单元格添加完整文本悬浮（动态渲染后）
+            const rows = tableBody.querySelectorAll('tr');
+            rows.forEach(row => {
+                const cells = row.querySelectorAll('td');
+                cells.forEach(cell => {
+                    // 跳过按钮占位列（第三列、操作列以及状态列，这些列已经有点击元素，不干扰title）
+                    const hasImportantBtn = cell.querySelector('[data-action="whatsapp"]') ||
+                        cell.querySelector('[data-action="toggle"]') ||
+                        cell.querySelector('[data-action="editNote"]');
+                    if (!hasImportantBtn) {
+                        const txt = cell.innerText.trim();
+                        if (txt) cell.setAttribute('title', txt);
+                        else cell.removeAttribute('title');
+                    } else if (cell.querySelector('[data-action="toggle"]')) {
+                        // 状态按钮列保留其自身文字悬浮展示状态文字
+                        const statusBtn = cell.querySelector('.status-btn');
+                        if (statusBtn) cell.setAttribute('title', statusBtn.innerText);
+                    } else if (cell.querySelector('[data-action="editNote"]')) {
+                        // 操作列一般不需要悬浮，但为了统一，展示当前按钮文字
+                        const btnText = cell.innerText.trim();
+                        if (btnText) cell.setAttribute('title', btnText);
+                    }
+                });
+            });
             totalCountEl.textContent = state.total;
         }
 
+        // 事件监听（委托）
         tableBody.addEventListener("click", async (e) => {
-            // 每次操作前检查登录状态
-            if (!checkLoginStatus()) {
-                showLoginCheckModal();
-                return;
-            }
+            if (!requireAuth()) return;
 
-            // WhatsApp跳转
             const whatsappBtn = e.target.closest('[data-action="whatsapp"]');
             if (whatsappBtn) {
                 const id = whatsappBtn.getAttribute("data-id");
@@ -449,14 +661,13 @@
                 return;
             }
 
-            // 切换状态
             const toggler = e.target.closest('[data-action="toggle"]');
             if (toggler) {
                 const id = toggler.getAttribute("data-id");
                 await handleToggle(id, toggler);
                 return;
             }
-            // 编辑备注
+
             const editBtn = e.target.closest('[data-action="editNote"]');
             if (editBtn) {
                 const id = editBtn.getAttribute("data-id");
@@ -465,52 +676,47 @@
             }
         });
 
-        // ---------- WhatsApp跳转 ----------
         function handleWhatsApp(id) {
             const item = state.items.find((it) => String(it.id) === String(id));
             if (!item) return;
-
-            // 移除国家代码中的+号
             const cleanCode = (item.code || '').replace(/\+/g, '');
             const whatsappPhone = cleanCode + (item.telephone || '');
+            if (!whatsappPhone) {
+                showToast("电话号码无效", true);
+                return;
+            }
             const whatsappUrl = `https://api.whatsapp.com/send?phone=${encodeURIComponent(whatsappPhone)}&text=${encodeURIComponent('hello欢迎来到赢在美股')}`;
-
             window.open(whatsappUrl, '_blank');
         }
 
-        // ---------- 切换联系状态 ----------
         async function handleToggle(id, btnEl) {
             const item = state.items.find((it) => String(it.id) === String(id));
             if (!item) return;
             const prev = item.isRelated;
             const newVal = prev ? 0 : 1;
+            // 乐观更新UI
             item.isRelated = newVal;
             btnEl.textContent = newVal ? "已联系" : "未联系";
             btnEl.classList.toggle("status-1", !!newVal);
             btnEl.classList.toggle("status-0", !newVal);
             try {
-                const res = await updateMemberStateApi({ id: item.id, state: newVal })
-                if (typeof res.code !== "undefined" && res.code !== 200) {
+                const res = await updateMemberStateApi({ id: item.id, state: newVal });
+                if (res && typeof res.code !== "undefined" && res.code !== 200) {
                     throw new Error(res.msg || "更新失败");
                 }
-                showToast("状态修改成功");
+                showToast("状态已更新");
             } catch (err) {
+                // 回滚
                 item.isRelated = prev;
                 btnEl.textContent = prev ? "已联系" : "未联系";
                 btnEl.classList.toggle("status-1", !!prev);
                 btnEl.classList.toggle("status-0", !prev);
-                alert("更新失败");
+                showToast("更新失败: " + (err.message || '网络错误'), true);
             }
         }
 
-        // ---------- 备注模态相关 ----------
         function openNoteModal(id) {
-            // 打开模态框前检查登录状态
-            if (!checkLoginStatus()) {
-                showLoginCheckModal();
-                return;
-            }
-
+            if (!requireAuth()) return;
             const item = state.items.find((it) => String(it.id) === String(id));
             if (!item) return;
             editingRowId = id;
@@ -518,6 +724,7 @@
             noteModal.style.display = "flex";
             noteTextarea.focus();
         }
+
         function closeNoteModal() {
             editingRowId = null;
             noteTextarea.value = "";
@@ -525,56 +732,49 @@
         }
 
         noteCancelBtn.addEventListener("click", closeNoteModal);
-
         noteSaveBtn.addEventListener("click", async () => {
-            // 保存前检查登录状态
-            if (!checkLoginStatus()) {
-                showLoginCheckModal();
-                return;
-            }
-
+            if (!requireAuth()) return;
             if (!editingRowId) return closeNoteModal();
             const newNote = noteTextarea.value.trim();
             const item = state.items.find((it) => String(it.id) === String(editingRowId));
             if (!item) return closeNoteModal();
 
+            const oldNote = item.note;
+            item.note = newNote;
+            // 乐观刷新当前行备注显示 (可局部更新但简单重新渲染)
+            renderTable();
             try {
-                const res = await editMemberNoteApi({ id: item.id, note: newNote })
-                if (typeof res.code !== "undefined" && res.code !== 200) {
+                const res = await editMemberNoteApi({ id: item.id, note: newNote });
+                if (res && typeof res.code !== "undefined" && res.code !== 200) {
                     throw new Error(res.msg || "保存失败");
                 }
-                const prevNote = item.note;
-                item.note = newNote;
-                renderTable();
                 showToast("备注保存成功");
             } catch (err) {
-                alert("保存备注失败");
+                item.note = oldNote;
+                renderTable();
+                showToast("保存备注失败: " + (err.message || '接口错误'), true);
             } finally {
                 closeNoteModal();
             }
         });
-        // 渲染分页控件（页码、上一页、下一页）
+
+        // 分页渲染
         function renderPagination() {
             const totalPages = Math.max(1, Math.ceil(state.total / state.pageSize));
-            const current = Math.min(Math.max(1, state.currentPage), totalPages);
+            let current = Math.min(Math.max(1, state.currentPage), totalPages);
             state.currentPage = current;
 
             const pages = buildPageList(current, totalPages, 2);
-
-            let html = "";
-            html += `<button class="btn" data-action="prev" ${current === 1 ? "disabled" : ""
-                }>上一页</button>`;
-            pages.forEach((p) => {
-                if (p === "...") {
-                    html += `<span class="small" style="padding:6px 8px">...</span>`;
+            let html = '';
+            html += `<button class="btn" data-action="prev" ${current === 1 ? 'disabled' : ''}>◀ 上一页</button>`;
+            pages.forEach(p => {
+                if (p === '...') {
+                    html += `<span class="small" style="padding:0 6px;">...</span>`;
                 } else {
-                    html += `<button class="btn ${p === current ? "active" : ""
-                        }" data-page="${p}">${p}</button>`;
+                    html += `<button class="btn ${p === current ? 'active' : ''}" data-page="${p}">${p}</button>`;
                 }
             });
-            html += `<button class="btn" data-action="next" ${current === totalPages ? "disabled" : ""
-                }>下一页</button>`;
-
+            html += `<button class="btn" data-action="next" ${current === totalPages ? 'disabled' : ''}>下一页 ▶</button>`;
             paginationEl.innerHTML = html;
         }
 
@@ -582,92 +782,78 @@
             const pages = [];
             const left = Math.max(1, current - delta);
             const right = Math.min(total, current + delta);
-
             if (left > 1) {
                 pages.push(1);
-                if (left > 2) pages.push("...");
+                if (left > 2) pages.push('...');
             }
-
             for (let i = left; i <= right; i++) pages.push(i);
-
             if (right < total) {
-                if (right < total - 1) pages.push("...");
+                if (right < total - 1) pages.push('...');
                 pages.push(total);
             }
-
             return pages;
         }
 
         paginationEl.addEventListener("click", (e) => {
-            // 分页操作前检查登录状态
-            if (!checkLoginStatus()) {
-                showLoginCheckModal();
-                return;
-            }
-
+            if (!requireAuth()) return;
             const btn = e.target.closest("button");
             if (!btn) return;
             const action = btn.getAttribute("data-action");
             if (action === "prev") {
                 if (state.currentPage > 1) state.currentPage--;
             } else if (action === "next") {
-                const totalPages = Math.max(
-                    1,
-                    Math.ceil(state.total / state.pageSize)
-                );
+                const totalPages = Math.max(1, Math.ceil(state.total / state.pageSize));
                 if (state.currentPage < totalPages) state.currentPage++;
             } else {
                 const p = Number(btn.getAttribute("data-page"));
-                if (!isNaN(p)) state.currentPage = p;
+                if (!isNaN(p) && p > 0) state.currentPage = p;
             }
             update();
         });
 
-        // 每页条数变更
         pageSizeSelect.addEventListener("change", () => {
-            // 操作前检查登录状态
-            if (!checkLoginStatus()) {
-                showLoginCheckModal();
-                return;
-            }
-
+            if (!requireAuth()) return;
             const newSize = parseInt(pageSizeSelect.value, 10);
             state.pageSize = newSize;
             state.currentPage = 1;
             update();
-            gotoInput.value = "";
         });
 
         async function update() {
-            // 更新数据前检查登录状态
-            if (!checkLoginStatus()) {
-                showLoginCheckModal();
-                return;
-            }
-
-            const p = Math.max(1, state.currentPage);
-            state.currentPage = p;
+            if (!requireAuth()) return;
             await fetchPage(state.currentPage, state.pageSize);
             renderTable();
             renderPagination();
         }
 
-        // 简单安全的文本转义（防 XSS）
         function escapeHtml(s) {
-            return String(s)
-                .replace(/&/g, "&amp;")
-                .replace(/</g, "&lt;")
-                .replace(/>/g, "&gt;")
-                .replace(/"/g, "&quot;")
-                .replace(/'/g, "&#39;");
+            if (s === undefined || s === null) return '';
+            return String(s).replace(/[&<>]/g, function (m) {
+                if (m === '&') return '&amp;';
+                if (m === '<') return '&lt;';
+                if (m === '>') return '&gt;';
+                return m;
+            }).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function (c) {
+                return c;
+            });
         }
 
-        // 首次渲染 - 检查登录状态
+        // 初始化：如果已登录则加载，否则展示登录遮罩
         if (checkLoginStatus()) {
             update();
         } else {
             showLoginCheckModal();
         }
+
+        // 监听localStorage变化或者其他页面可能登录跳转后刷新(简单处理)
+        window.addEventListener('focus', () => {
+            if (checkLoginStatus() && document.getElementById('loginCheckModal')?.style.display === 'flex') {
+                hideLoginCheckModal();
+                update();
+            } else if (!checkLoginStatus() && document.getElementById('loginCheckModal')?.style.display !== 'flex') {
+                showLoginCheckModal();
+            }
+        });
     </script>
 </body>
 
diff --git a/src/api/hkmember.js b/src/api/hkmember.js
index 137e572..06de71d 100644
--- a/src/api/hkmember.js
+++ b/src/api/hkmember.js
@@ -7,7 +7,7 @@ const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
 export function registerMemberApi(data) {
     return request({
         url: `${API_BASE_URL}/api/hk/member/insert`,
-        // url: `http://g8ec6e97.natappfree.cc/api/member/insert`,
+        // url: `http://192.168.1.103:8000/api/hk/member/insert`,
         method: "post",
         data: data,
     });
diff --git a/src/api/member.js b/src/api/member.js
index 88e4b2c..bb516da 100644
--- a/src/api/member.js
+++ b/src/api/member.js
@@ -6,7 +6,7 @@ const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
 
 export function registerMemberApi(data) {
     return request({
-        url: `${API_BASE_URL}/api/member/insert`,
+        url: `${API_BASE_URL}/api/hk/member/insert`,
         // url: `http://g8ec6e97.natappfree.cc/api/member/insert`,
         method: "post",
         data: data,