first initial commit

assets/js/share.js

@@ -0,0 +1,87 @@
+(function() {
+    const initShare = () => {
+        const shareBtn = document.getElementById('share-btn');
+        const sharePanel = document.getElementById('share-panel');
+        const copyBtn = document.getElementById('copy-link');
+        const shareContainer = document.getElementById('share-component');
+        const closeBtn = document.getElementById('close-share');
+
+        if (!shareBtn || !sharePanel) return;
+
+        // 1. 处理分享主按钮
+        shareBtn.addEventListener('click', async (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const shareData = {
+                title: document.title,
+                url: window.location.href
+            };
+
+            // 原生分享触发条件：浏览器支持 + 必须是 HTTPS 环境
+            if (navigator.share && window.isSecureContext) {
+                try {
+                    await navigator.share(shareData);
+                    return; // 成功唤起系统分享，不再向下执行
+                } catch (err) {
+                    // 如果不是用户主动取消(AbortError)，则打印错误并在下方降级处理
+                    if (err.name !== 'AbortError') console.error('Share failed:', err);
+                }
+            }
+            
+            // 降级方案：显示自定义 HTML 分享面板
+            sharePanel.classList.toggle('hidden');
+        });
+
+        // 2. 处理链接复制
+        copyBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            const currentUrl = window.location.href;
+
+            navigator.clipboard.writeText(currentUrl).then(() => {
+                const iconBg = document.getElementById('copy-icon-bg');
+                const copySvg = document.getElementById('copy-svg');
+                const checkSvg = document.getElementById('check-svg');
+                const copyText = document.getElementById('copy-text');
+
+                // 成功反馈状态
+                iconBg.classList.replace('bg-slate-100', 'bg-green-500');
+                iconBg.classList.replace('text-slate-600', 'text-white');
+                copySvg.classList.add('hidden');
+                checkSvg.classList.remove('hidden');
+                copyText.innerText = '已复制';
+
+                setTimeout(() => {
+                    iconBg.classList.replace('bg-green-500', 'bg-slate-100');
+                    iconBg.classList.replace('text-white', 'text-slate-600');
+                    copySvg.classList.remove('hidden');
+                    checkSvg.classList.add('hidden');
+                    copyText.innerText = '复制';
+                }, 2000);
+            }).catch(() => {
+                alert('复制失败，请手动复制地址栏链接');
+            });
+        });
+
+        // 3. 面板交互控制
+        const closePanel = () => sharePanel.classList.add('hidden');
+
+        // 点击关闭按钮隐藏
+        if (closeBtn) closeBtn.addEventListener('click', closePanel);
+
+        // 点击页面其他地方隐藏
+        document.addEventListener('click', (e) => {
+            if (!shareContainer.contains(e.target)) closePanel();
+        });
+
+        // 阻止面板内部点击触发隐藏
+        sharePanel.addEventListener('click', (e) => e.stopPropagation());
+    };
+
+    // 确保 DOM 加载后运行
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initShare);
+    } else {
+        initShare();
+    }
+})();