1
<!-- 独立的透明度层：不要和子组件的入场动画、菜单显隐争用 opacity。 -->
2
<div id="wallpaper-ui">
3
    <slot />
4
</div>
5
<div id="my-custom-bg" aria-hidden="true"></div>
6
<button id="wallpaper-exit" type="button" aria-label="退出赏图模式" hidden></button>
7

8
<style is:global>
9
    #wallpaper-ui {
10
        isolation: isolate;
11
        opacity: 1;
12
        transition: opacity 0.5s ease-in-out;
13
    }
14

15
    body.bg-view-mode #wallpaper-ui {
16
        opacity: 0;
17
    }
18

19
    #my-custom-bg {
20
        position: fixed;
21
        inset: 0;
22
        z-index: -1;
23
        pointer-events: none;
24
        background-size: cover;
25
        background-position: center;
26
        background-repeat: no-repeat;
27
        opacity: 0;
28
        filter: blur(3px);
29
        transform: scale(1.02);
30
        transition: opacity 0.8s ease-in-out, filter 0.8s ease-in-out, transform 0.8s ease-in-out;
31
    }
32

33
    #my-custom-bg.loaded {
34
        opacity: 0.6;
35
    }
36

37
    body.bg-view-mode #my-custom-bg.loaded {
38
        opacity: 1;
39
        filter: blur(0);
40
        transform: scale(1);
41
    }
42

43
    /* 用透明按钮接管点击，背景始终留在底层，不切换 z-index。 */
44
    #wallpaper-exit {
45
        position: fixed;
46
        inset: 0;
47
        z-index: 9999;
48
        width: 100%;
49
        height: 100%;
50
        border: 0;
51
        padding: 0;
52
        background: transparent;
53
        outline: none;
54
        cursor: zoom-out;
55
    }
56

57
    @media (prefers-reduced-motion: reduce) {
58
        #wallpaper-ui,
59
        #my-custom-bg {
60
            transition: none;
61
        }
62
    }
63
</style>
64

65
<script>
66
    const ui = document.getElementById('wallpaper-ui');
67
    const background = document.getElementById('my-custom-bg');
68
    const exitButton = document.getElementById('wallpaper-exit');
69

70
    if (ui && background && exitButton) {
71
        let previousFocus: HTMLElement | null = null;
72

73
        const setViewing = (viewing: boolean) => {
74
            if (viewing === document.body.classList.contains('bg-view-mode')) return;
75

76
            if (viewing) {
77
                previousFocus = document.activeElement instanceof HTMLElement
78
                    ? document.activeElement : null;
79
            }
80

81
            document.body.classList.toggle('bg-view-mode', viewing);
82
            ui.inert = viewing;
83
            exitButton.hidden = !viewing;
84

85
            if (viewing) {
86
                exitButton.focus({ preventScroll: true });
87
            } else if (previousFocus?.isConnected) {
88
                previousFocus.focus({ preventScroll: true });
89
            }
90
        };
91

92
        // 只请求一次图片；先注册回调，再设置 src，兼容缓存命中。
93
        const image = new Image();
94
        image.onload = () => {
95
            background.style.backgroundImage = `url('${image.src}')`;
96
            background.classList.add('loaded');
97
        };
98
        image.src = `https://papi.bbcslook.top/?t=${Date.now()}`;
99

100
        document.addEventListener('dblclick', (event) => {
101
            if (!(event.target instanceof Element)) return;
102
            if (event.target.closest('a, button, img, input, textarea, select, [contenteditable], [role="button"]')) return;
103
            if (!background.classList.contains('loaded')) return;
104
            setViewing(true);
105
        });
106

107
        exitButton.addEventListener('click', () => setViewing(false));
108
        document.addEventListener('keydown', (event) => {
109
            if (event.key === 'Escape') setViewing(false);
110
        });
111

112
        // 浏览器前进/后退也可能在赏图时触发站内导航。
113
        const setupNavigation = () => {
114
            window.swup.hooks.on('visit:start', () => setViewing(false));
115
        };
116
        if (window.swup) setupNavigation();
117
        else document.addEventListener('swup:enable', setupNavigation, { once: true });
118
    }
119
</script>

1
import WallpaperViewer from "@components/WallpaperViewer.astro";

1
<ConfigCarrier></ConfigCarrier>
2
<slot />

1
<ConfigCarrier></ConfigCarrier>
2
<WallpaperViewer>
3
    <slot />
4
</WallpaperViewer>