为世界所有美好而战

1
<script>
2
import { onDestroy, onMount } from "svelte";
3
import { pioConfig } from "@/config";
4

5
const pioOptions = {
6
    mode: pioConfig.mode,
7
    hidden: pioConfig.hiddenOnMobile,
8
    content: pioConfig.dialog || {},
9
    model: pioConfig.models || ["/pio/models/pio/model.json"],
10
};
11

12
// 从 config 获取 SDK 版本，如果没有则自动判断
13
const sdkVersion = pioConfig.sdkVersion || (pioOptions.model[0].includes("model3.json") ? 4 : 2);
14
const isModel3 = sdkVersion >= 3;
15

16
let pioContainer;
17
let pioCanvas;
18
let pioInitialized = false;
19

20
// 初始化函数
21
function initPio() {
22
    if (typeof window !== "undefined" && typeof Paul_Pio !== "undefined") {
23
        try {
24
            if (pioContainer && pioCanvas && !pioInitialized) {
25
                // 如果是 SDK4，手动初始化 Pixi 环境
26
                if (isModel3 && typeof window.initPioPixi === "function") {
27
                    window.initPioPixi(pioConfig.position || 'left');
28
                }
29

30
                // 实例化 Paul_Pio
31
                new Paul_Pio(pioOptions);
32
                pioInitialized = true;
33
                console.log(`Pio initialized successfully (SDK${sdkVersion})`);
34
            }
35
        } catch (e) {
36
            console.error("Pio initialization error:", e);
37
        }
38
    } else {
39
        setTimeout(initPio, 100);
40
    }
41
}
42

43
// 核心：资源加载器
44
async function loadPioAssets() {
45
    if (typeof window === "undefined") return;
46

47
    const loadScript = (src, id) => {
48
        return new Promise((resolve, reject) => {
49
            // 检查是否已存在（避免 Swup 重复加载）
50
            const existing = document.querySelector(`script[src="${src}"]`);
51
            if (existing || document.querySelector(`#${id}`)) {
52
                console.log(`[Pio] Script already loaded: ${src}`);
53
                resolve();
54
                return;
55
            }
56
            const script = document.createElement("script");
57
            script.id = id;
58
            script.src = src;
59
            script.onload = () => {
60
                console.log(`[Pio] Loaded: ${src}`);
61
                resolve();
62
            };
63
            script.onerror = (e) => {
64
                console.error(`[Pio] Failed to load: ${src}`, e);
65
                reject(e);
66
            };
67
            document.head.appendChild(script);
68
        });
69
    };
70

71
    try {
72
        if (isModel3) {
73
            // === SDK 4 加载流程 (严格顺序) ===
74

75
            // 1. 加载 Live2D Cubism Core (必须第一个)
76
            await loadScript(
77
                "https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js",
78
                "cubism-core"
79
            );
80

81
            // 2. 加载 PixiJS (必须第二个)
82
            await loadScript(
83
                "https://cdn.jsdelivr.net/npm/pixi.js@5.3.6/dist/pixi.min.js",
84
                "pixi-js"
85
            );
86

87
            // 3. 确认 PIXI 存在
88
            if (typeof PIXI === 'undefined') {
89
                throw new Error("[Pio] PIXI not loaded!");
90
            }
91
            console.log("[Pio] PIXI version:", PIXI.VERSION);
92

93
            // 4. 加载 Pixi-Live2D-Display
94
            await loadScript(
95
                "https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/cubism4.min.js",
96
                "pixi-live2d-display"
97
            );
98

99
            // 5. 加载本地适配器
100
            await loadScript("/pio/static/pio_sdk4.js", "pio-sdk4-adapter");
101

102
            // 6. 加载 UI 逻辑
103
            await loadScript("/pio/static/pio.js", "pio-main");
104

105
        } else {
106
            // === SDK 2 加载流程 ===
107
            await loadScript("/pio/static/l2d.js", "l2d-lib");
108
            await loadScript("/pio/static/pio.js", "pio-main");
109
        }
110

111
        // 全部加载完成后，初始化
112
        setTimeout(initPio, 100);
113

114
    } catch (err) {
115
        console.error("Failed to load Pio assets:", err);
116
    }
117
}
118

119
onMount(() => {
120
    if (!pioConfig.enable) return;
121
    if (pioConfig.hiddenOnMobile && window.matchMedia("(max-width: 1280px)").matches) return;
122

123
    setTimeout(loadPioAssets, 0);
124
});
125

126
// 清理（可选，防止 Swup 切换时出问题）
127
onDestroy(() => {
128
    pioInitialized = false;
129
});
130
</script>
131

132
{#if pioConfig.enable}
133
<div class={`pio-container ${pioConfig.position || 'left'}`} bind:this={pioContainer}>
134
    <div class="pio-action"></div>
135
    <canvas
136
        id="pio"
137
        bind:this={pioCanvas}
138
        width={pioConfig.width || 280}
139
        height={pioConfig.height || 250}
140
        style="width: {pioConfig.width || 280}px; height: {pioConfig.height || 250}px;"
141
    ></canvas>
142
</div>
143
{/if}
144

145
<style>
146
    #pio { display: block; }
147
</style>