1
async function generateFingerprint() {
2
    const components = [
3
        navigator.userAgent,
4
        screen.width + 'x' + screen.height,
5
        String(screen.colorDepth),
6
        String(new Date().getTimezoneOffset()),
7
        navigator.language,
8
        String(navigator.hardwareConcurrency || ''),
9
        String((navigator as any).deviceMemory || ''),
10
    ];
11
    // Canvas 指纹
12
    try {
13
        const canvas = document.createElement('canvas');
14
        canvas.width = 200;
15
        canvas.height = 50;
16
        const ctx = canvas.getContext('2d');
17
        if (ctx) {
18
            ctx.textBaseline = 'top';
19
            ctx.font = '14px Arial';
20
            ctx.fillStyle = '#f60';
21
            ctx.fillRect(125, 1, 62, 20);
22
            ctx.fillStyle = '#069';
23
            ctx.fillText('fingerprint', 2, 15);
24
            components.push(canvas.toDataURL());
25
        }
26
    } catch (e) { /* ignore */ }
27
    // WebGL 渲染器信息
28
    try {
29
        const gl = document.createElement('canvas').getContext('webgl');
30
        if (gl) {
31
            const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
32
            if (debugInfo) {
33
                components.push(String(gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL)));
34
            }
35
        }
36
    } catch (e) { /* ignore */ }
37
    const data = components.join('|||');
38
    const hashBuffer = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(data));
39
    return Array.from(new Uint8Array(hashBuffer))
40
        .map(b => b.toString(16).padStart(2, '0'))
41
        .join('');
42
}
43

44
async function getFingerprint() {
45
    let fp = localStorage.getItem('reactions_fp');
46
    if (!fp) {
47
        fp = await generateFingerprint();
48
        localStorage.setItem('reactions_fp', fp);
49
    }
50
    return fp;
51
}

1
async function initReactions() {
2
    const container = document.getElementById('post-reactions');
3
    if (!container || container.dataset.initialized === 'true') return;
4

5
    // 用 AbortController 取消上一次未完成的请求（应对快速切页）
6
    const existingController = (container as any).__abortController;
7
    if (existingController) existingController.abort();
8
    const controller = new AbortController();
9
    (container as any).__abortController = controller;
10

11
    const slug = container.dataset.postSlug;
12
    if (!slug) return;
13

14
    const supabaseUrl = (window as any).__SUPABASE_URL;
15
    const supabaseKey = (window as any).__SUPABASE_ANON_KEY;
16
    if (!supabaseUrl || !supabaseKey) return;
17

18
    container.dataset.initialized = 'true';
19

20
    try {
21
        const fingerprint = await getFingerprint();
22

23
        // 一次请求获取该文章的所有反应记录
24
        const resp = await fetch(
25
            `${supabaseUrl}/rest/v1/reactions?post_slug=eq.${encodeURIComponent(slug)}&select=emoji,fingerprint`,
26
            {
27
                headers: {
28
                    'apikey': supabaseKey,
29
                    'Authorization': `Bearer ${supabaseKey}`,
30
                },
31
                signal: controller.signal,
32
            }
33
        );
34

35
        if (!resp.ok) return;
36
        const rows = await resp.json();
37

38
        // 客户端统计计数（数据量极小，无需服务端聚合）
39
        const counts = {};
40
        const userVotes = new Set();
41
        for (const row of rows) {
42
            counts[row.emoji] = (counts[row.emoji] || 0) + 1;
43
            if (row.fingerprint === fingerprint) {
44
                userVotes.add(row.emoji);
45
            }
46
        }
47

48
        // 启用按钮、显示计数、标记已投票状态
49
        const buttons = container.querySelectorAll('.reaction-btn');
50
        buttons.forEach(btn => {
51
            const emoji = btn.dataset.emoji;
52
            btn.disabled = false;
53
            const countEl = btn.querySelector('.reaction-count');
54
            countEl.textContent = String(counts[emoji] || 0);
55

56
            if (userVotes.has(emoji)) {
57
                btn.classList.add('voted');
58
            }
59

60
            // 绑定点击事件（见下文）
61
            btn.addEventListener('click', () => handleClick(/* ... */));
62
        });
63
    } catch (e) {
64
        if (e.name === 'AbortError') return;
65
    }
66
}

1
btn.addEventListener('click', async function handleClick() {
2
    if (btn.classList.contains('pending')) return;
3
    btn.classList.add('pending');  // 防快速重复点击
4

5
    const cache = JSON.parse(localStorage.getItem('reactions_votes') || '{}');
6
    const alreadyVoted = cache[slug] && cache[slug][emoji];
7
    const adding = !alreadyVoted;  // 切换方向
8

9
    // 乐观更新 UI（先改界面，再发请求）
10
    btn.classList.toggle('voted', adding);
11
    const prevText = countEl.textContent;
12
    const current = parseInt(prevText) || 0;
13
    countEl.textContent = String(Math.max(0, adding ? current + 1 : current - 1));
14

15
    try {
16
        let ok;
17
        if (adding) {
18
            // 投票：POST 新记录
19
            const r = await fetch(`${supabaseUrl}/rest/v1/reactions`, {
20
                method: 'POST',
21
                headers: {
22
                    'apikey': supabaseKey,
23
                    'Authorization': `Bearer ${supabaseKey}`,
24
                    'Content-Type': 'application/json',
25
                    'Prefer': 'return=minimal',
26
                },
27
                body: JSON.stringify({ post_slug: slug, emoji, fingerprint }),
28
                signal: controller.signal,
29
            });
30
            ok = r.ok || r.status === 409;  // 409 = 唯一约束冲突，视为成功
31
        } else {
32
            // 取消投票：DELETE 匹配记录
33
            const r = await fetch(
34
                `${supabaseUrl}/rest/v1/reactions?post_slug=eq.${encodeURIComponent(slug)}&emoji=eq.${encodeURIComponent(emoji)}&fingerprint=eq.${encodeURIComponent(fingerprint)}`,
35
                {
36
                    method: 'DELETE',
37
                    headers: {
38
                        'apikey': supabaseKey,
39
                        'Authorization': `Bearer ${supabaseKey}`,
40
                    },
41
                    signal: controller.signal,
42
                }
43
            );
44
            ok = r.ok;
45
        }
46

47
        if (ok) {
48
            // 更新本地缓存
49
            if (!cache[slug]) cache[slug] = {};
50
            if (adding) cache[slug][emoji] = true;
51
            else delete cache[slug][emoji];
52
            localStorage.setItem('reactions_votes', JSON.stringify(cache));
53
        } else {
54
            // 请求失败，回滚 UI
55
            btn.classList.toggle('voted', !adding);
56
            countEl.textContent = prevText;
57
        }
58
    } catch (e) {
59
        if (e.name === 'AbortError') return;
60
        btn.classList.toggle('voted', !adding);
61
        countEl.textContent = prevText;
62
    } finally {
63
        btn.classList.remove('pending');
64
    }
65
});