欢迎提示组件

1
<script>
2
    const VISIT_SESSION_KEY = 'blog_visit_flag';
3
    let hasShownToast = false;
4

5
    function hasVisitedThisSession() {
6
        try {
7
            return sessionStorage.getItem(VISIT_SESSION_KEY) === '1';
8
        } catch {
9
            return false; // 隐私模式等 sessionStorage 不可用时按未访问处理
10
        }
11
    }
12

13
    function markVisitedThisSession() {
14
        try {
15
            sessionStorage.setItem(VISIT_SESSION_KEY, '1');
16
        } catch { /* 静默跳过 */ }
17
    }
18

19
    function createWelcomeToast() {
20
        const toast = document.createElement('div');
21
        toast.id = 'welcome-toast';
22
        // Tailwind 样式控制：自动适配深色模式
23
        toast.className = 'fixed bottom-4 right-4 z-50 transform translate-y-full opacity-0 transition-all duration-500 ease-out';
24

25
        //使用 bg-white dark:bg-zinc-800 强制适配颜色
26
        toast.innerHTML = `
27
            <div class="bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-lg p-4 max-w-xs">
28
                <div class="flex items-start gap-3">
29
                    <div class="flex-shrink-0 text-2xl">👋</div>
30
                    <div class="flex-1 min-w-0">
31
                        <p id="welcome-message" class="text-sm font-semibold text-gray-900 dark:text-gray-100">
32
                            正在加载...
33
                        </p>
34
                        <p class="text-xs text-gray-600 dark:text-gray-400 mt-2 italic">
35
                            欢迎来到我的博客
36
                        </p>
37
                    </div>
38
                    <button
39
                        onclick="closeWelcomeToast()"
40
                        class="flex-shrink-0 text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors"
41
                        aria-label="关闭"
42
                    >
43
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
44
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
45
                        </svg>
46
                    </button>
47
                </div>
48
            </div>
49
        `;
50
        document.body.appendChild(toast);
51
        return toast;
52
    }
53

54
    function closeWelcomeToast() {
55
        const toast = document.getElementById('welcome-toast');
56
        if (toast) {
57
            toast.classList.add('translate-y-full', 'opacity-0');
58
            toast.classList.remove('translate-y-0', 'opacity-100');
59
            setTimeout(() => { toast.remove(); }, 500);
60
        }
61
    }
62

63
    async function fetchLocation() {
64
        const controller = new AbortController();
65
        const timer = setTimeout(() => controller.abort(), 5000);
66
        try {
67
            const response = await fetch('https://v2.xxapi.cn/api/ip', { signal: controller.signal });
68
            const data = await response.json();
69
            if (data.code === 200 && data.data) {
70
                const locationText = `你好，来自${data.data.address}的朋友`;
71
                const messageEl = document.getElementById('welcome-message');
72
                if (messageEl) messageEl.textContent = locationText;
73
            }
74
        } catch (error) {
75
            const messageEl = document.getElementById('welcome-message');
76
            if (messageEl) messageEl.textContent = '你好，欢迎来到我的博客';
77
        } finally {
78
            clearTimeout(timer);
79
        }
80
    }
81

82
    async function showWelcomeToast() {
83
        if (hasShownToast || hasVisitedThisSession()) return;
84
        const toast = createWelcomeToast();
85
        setTimeout(() => {
86
            toast.classList.remove('translate-y-full', 'opacity-0');
87
            toast.classList.add('translate-y-0', 'opacity-100');
88
        }, 100);
89
        hasShownToast = true;
90
        markVisitedThisSession();
91
        // 延迟到浏览器空闲时再请求第三方 IP 定位接口，避免与首屏关键资源抢带宽
92
        const schedule = window.requestIdleCallback || function (cb) { return setTimeout(cb, 300); };
93
        schedule(() => {
94
            // 用户已提前关闭 toast 时跳过第三方请求，避免无效调用
95
            if (document.getElementById('welcome-toast')) fetchLocation();
96
        });
97
        setTimeout(() => { closeWelcomeToast(); }, 5000);
98
    }
99

100
    function initWelcome() {
101
        // 检查是否为首页（路径为 "/" 或 "/index.html"）
102
        const isHomePage = window.location.pathname === '/' || window.location.pathname === '/index.html';
103

104
        // 只在首页显示欢迎弹窗
105
        if (isHomePage) {
106
            showWelcomeToast();
107
        }
108
    }
109

110
    if (document.readyState === 'loading') {
111
        document.addEventListener('DOMContentLoaded', initWelcome);
112
        document.addEventListener('astro:page-load', initWelcome);
113
    } else {
114
        initWelcome();
115
    }
116

117
    (window as any).closeWelcomeToast = closeWelcomeToast;
118
</script>
119

120
<style>
121
    /* 样式保持不变 */
122
    #welcome-toast { max-width: calc(100vw - 2rem); }
123
    @media (max-width: 640px) {
124
        #welcome-toast {
125
            top: auto; bottom: 1rem; left: 50%; right: auto;
126
            transform: translateX(-50%) translateY(100%);
127
            width: 90%; max-width: none;
128
            transition: transform 0.5s ease-out, opacity 0.5s ease-out;
129
        }
130
        #welcome-toast.translate-y-0 { transform: translateX(-50%) translateY(0); }
131
        #welcome-toast.translate-y-full { transform: translateX(-50%) translateY(100%); }
132
    }
133
</style>