欢迎提示组件

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

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

11
        //使用 bg-white dark:bg-zinc-800 强制适配颜色
12
        toast.innerHTML = `
13
            <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">
14
                <div class="flex items-start gap-3">
15
                    <div class="flex-shrink-0 text-2xl">👋</div>
16
                    <div class="flex-1 min-w-0">
17
                        <p id="welcome-message" class="text-sm font-semibold text-gray-900 dark:text-gray-100">
18
                            正在加载...
19
                        </p>
20
                        <p class="text-xs text-gray-600 dark:text-gray-400 mt-2 italic">
21
                            欢迎来到我的博客
22
                        </p>
23
                    </div>
24
                    <button
25
                        onclick="closeWelcomeToast()"
26
                        class="flex-shrink-0 text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors"
27
                        aria-label="关闭"
28
                    >
29
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
30
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
31
                        </svg>
32
                    </button>
33
                </div>
34
            </div>
35
        `;
36
        document.body.appendChild(toast);
37
        return toast;
38
    }
39

40
    function closeWelcomeToast() {
41
        const toast = document.getElementById('welcome-toast');
42
        if (toast) {
43
            toast.classList.add('translate-y-full', 'opacity-0');
44
            toast.classList.remove('translate-y-0', 'opacity-100');
45
            setTimeout(() => { toast.remove(); }, 500);
46
        }
47
    }
48

49
    async function fetchLocation() {
50
        try {
51
            const response = await fetch('https://v2.xxapi.cn/api/ip');
52
            const data = await response.json();
53
            if (data.code === 200 && data.data) {
54
                const locationText = `你好，来自${data.data.address}的朋友`;
55
                const messageEl = document.getElementById('welcome-message');
56
                if (messageEl) messageEl.textContent = locationText;
57
            }
58
        } catch (error) {
59
            const messageEl = document.getElementById('welcome-message');
60
            if (messageEl) messageEl.textContent = '你好，欢迎来到我的博客';
61
        }
62
    }
63

64
    async function showWelcomeToast() {
65
        if (hasShownToast) return;
66
        const toast = createWelcomeToast();
67
        setTimeout(() => {
68
            toast.classList.remove('translate-y-full', 'opacity-0');
69
            toast.classList.add('translate-y-0', 'opacity-100');
70
        }, 100);
71
        hasShownToast = true;
72
        await fetchLocation();
73
        setTimeout(() => { closeWelcomeToast(); }, 5000);
74
    }
75

76
    function initWelcome() {
77
        // 检查是否已显示过欢迎弹窗
78
        // if (!sessionStorage.getItem(VISIT_SESSION_KEY)) {
79
        //     sessionStorage.setItem(VISIT_SESSION_KEY, 'true');
80
        //     showWelcomeToast();
81
        // }
82
        // 显示欢迎弹窗
83
        showWelcomeToast();
84
    }
85

86
    if (document.readyState === 'loading') {
87
        document.addEventListener('DOMContentLoaded', initWelcome);
88
        document.addEventListener('astro:page-load', initWelcome);
89
    } else {
90
        initWelcome();
91
    }
92

93
    (window as any).closeWelcomeToast = closeWelcomeToast;
94
</script>
95

96
<style>
97
    /* 样式保持不变 */
98
    #welcome-toast { max-width: calc(100vw - 2rem); }
99
    @media (max-width: 640px) {
100
        #welcome-toast {
101
            top: auto; bottom: 1rem; left: 50%; right: auto;
102
            transform: translateX(-50%) translateY(100%);
103
            width: 90%; max-width: none;
104
            transition: transform 0.5s ease-out, opacity 0.5s ease-out;
105
        }
106
        #welcome-toast.translate-y-0 { transform: translateX(-50%) translateY(0); }
107
        #welcome-toast.translate-y-full { transform: translateX(-50%) translateY(100%); }
108
    }
109
</style>