feat: 迁移静态资源文件至static目录

将图片、音频和HTML文件从根目录迁移至static目录下的img和mp3子目录，并删除原文件

static/js/index.js

@@ -0,0 +1,340 @@
+const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue;
+const search = createApp({
+    setup() {
+        const trait = [
+            {
+                icon: "./img/headset-icon.png",
+                title: "音乐创作",
+                text: "朴见潮音，2024 年成立于广州，是专注 AI 音乐领域的创新工作室。短短一年便跻身于AI音乐浪潮先锋品牌！",
+            },
+            {
+                icon: "./img/mv-icon.png",
+                title: "MV创作",
+                text: "以 AI 技术为核心，整合音乐创作、MV 制作、教学培训、发行级重制等业务，为创作者和爱好者打造一站式平台。",
+            },
+            {
+                icon: "./img/train-icon.png",
+                title: "教学培训",
+                text: "工作室运用多种 AI 工具，突破传统创作局限，支持流行、摇滚等多元风格创作，满足个性化需求。",
+            },
+            {
+                icon: "./img/remake-icon.png",
+                title: "发行级重制",
+                text: "构建全流程服务体系，从 AI 音乐创作、MV 视觉呈现，到零基础教学，再到发行级重制提升品质，实现作品价值最大化。",
+            },
+        ];
+
+        const text = `中国AIGC产业联盟（AIGCxChina）
+            温州市社科联
+            温州市新闻媒体中心
+            第一届AI音乐春晚 正选节目`;
+
+        const audioPlayer = ref(null);
+
+        const progress = ref(20); // 播放进度百分比
+        // 更新进度的函数
+        const getProgress = () => {
+            if (!audioPlayer.value) return;
+            const currentTime = audioPlayer.value.currentTime || 0;
+            const duration = audioPlayer.value.duration || 0;
+            const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+            setProgress(progress, audioPlayer.value.src);
+        };
+
+        const setProgress = (val, src) => {
+            audioList.value.forEach((item) => {
+                if (item.url === src) item.progress = val;
+            });
+
+            customList.value.forEach((item) => {
+                if (item.src === src) item.progress = val;
+            });
+        };
+
+        const introduceRef = ref(null);
+        const worksRef = ref(null);
+        const customRef = ref(null);
+        const studentRef = ref(null);
+
+        let pointerState = ref("introduce");
+
+        const elements = ref([
+            {
+                isVisible: false,
+                ref: introduceRef,
+                title: "介绍",
+                state: "introduce",
+            },
+            {
+                isVisible: false,
+                ref: worksRef,
+                title: "作品",
+                state: "works",
+            },
+            {
+                isVisible: false,
+                ref: customRef,
+                title: "定制",
+                state: "custom",
+            },
+            {
+                isVisible: false,
+                ref: studentRef,
+                title: "学生",
+                state: "student",
+            },
+        ]);
+
+        // 点击侧边栏
+        const changePointer = (state) => {
+            const element = document.querySelector(`.${state}`);
+
+            if (!element) return;
+            element.scrollIntoView({ 
+                behavior: "smooth",
+            });
+        };
+
+        // 向上滚动到上一页
+        const scrollToPrevious = () => {
+            const currentIndex = ['introduce', 'works', 'custom', 'student'].indexOf(pointerState.value);
+            if (currentIndex > 0) {
+                const prevState = ['introduce', 'works', 'custom', 'student'][currentIndex - 1];
+                changePointer(prevState);
+            }
+        };
+
+        // 向下滚动到下一页
+        const scrollToNext = () => {
+            const currentIndex = ['introduce', 'works', 'custom', 'student'].indexOf(pointerState.value);
+            if (currentIndex < 3) {
+                const nextState = ['introduce', 'works', 'custom', 'student'][currentIndex + 1];
+                changePointer(nextState);
+            }
+        };
+
+        // 获取当前在可视窗口中的元素ref
+        const visibleRef = computed(() => {
+            const visibleElement = elements.value.find((el) => el.isVisible);
+            return visibleElement ? visibleElement.ref : null;
+        });
+
+        const observer = ref(null);
+
+        // 初始化观察器
+        const initObserver = () => {
+            observer.value = new IntersectionObserver(
+                (entries) => {
+                    entries.forEach((entry) => {
+                        // 找到对应的元素状态并更新
+                        const targetEl = elements.value.find((el) => el.ref === entry.target);
+                        if (targetEl) {
+                            targetEl.isVisible = entry.isIntersecting;
+                            if (entry.isIntersecting) pointerState.value = targetEl.state;
+                        }
+                    });
+                },
+                {
+                    root: null, // 视口作为根元素
+                    rootMargin: "0px",
+                    threshold: 0.3, // 可见比例达到10%时触发
+                }
+            );
+
+            // 开启监听 - 对所有预定义的元素执行observe
+            elements.value.forEach((element) => {
+                if (element.ref && element.ref) observer.value.observe(element.ref);
+            });
+
+            console.log(observer.value);
+        };
+
+        // 添加元素到监听列表
+        const addElement = (elRef) => {
+            if (elRef.value) {
+                // 存储元素ref和其可见状态
+                elements.value.push({
+                    ref: elRef.value,
+                    isVisible: false,
+                });
+                // 开始监听
+                observer.value?.observe(elRef.value);
+            }
+        };
+
+        onMounted(() => {
+            setTimeout(() => {
+                initObserver();
+            }, 1000);
+
+            // 添加进度更新事件监听器
+            if (audioPlayer.value) {
+                audioPlayer.value.addEventListener("timeupdate", getProgress);
+                audioPlayer.value.addEventListener("loadedmetadata", getProgress);
+            }
+        });
+
+        // 组件卸载时清理事件监听器
+        onUnmounted(() => {
+            observer.value?.disconnect();
+
+            audioPlayer?.value?.removeEventListener("timeupdate", getProgress);
+            audioPlayer?.value?.removeEventListener("loadedmetadata", getProgress);
+        });
+
+        // 头部播放状态
+        let audioHeadState = ref(false);
+
+        // 头部播放 - 开启
+        const playHead = () => {
+            closeAll();
+            nextTick(() => {
+                audioPlayer.value.src = "./static/mp3/1.MP3";
+                audioPlayer.value.play().then(() => (audioHeadState.value = true));
+            });
+        };
+
+        // 头部播放 - 暂停
+        const pauseHead = () => {
+            audioPlayer.value.pause();
+            audioHeadState.value = false;
+        };
+
+        // 播放 组件状态
+        let previewState = ref(false);
+
+        let art = null;
+        // 开启播放 MV
+        const openPreview = () => {
+            previewState.value = true;
+            nextTick(() => {
+                art = new Artplayer({
+                    container: ".artplayer-app",
+                    url: "https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-JoqdX_qqsgFptxhcq_cQnrlc6Z1CwMUBq_D-81qNDQyOQ~~",
+                    autoplay: true,
+                    poster: "https://o.x-php.com/thumb/UHkZOgUVDvP9z7rPV2rT1kE22Zf1QEiLggt9OPnf5hC7a-QU5l8VTqiP5awMLv2DMEUiOUl03dK1PW0Yzf8ZPfpa7ZTTgV-PZGNjZQ~~",
+                });
+                art.play();
+            });
+        };
+
+        // 关闭播放 MV
+        const closePreview = () => {
+            previewState.value = false;
+            art?.destroy();
+            art = null;
+        };
+
+        let audioList = ref([
+            {
+                url: "https://app.gter.net/image/miniApp/mp3/1.mp3",
+            },
+            {
+                url: "https://app.gter.net/image/miniApp/mp3/2.mp3",
+            },
+            {
+                url: "https://app.gter.net/image/miniApp/mp3/3.mp3",
+            },
+            {
+                url: "https://app.gter.net/image/miniApp/mp3/4.mp3",
+            },
+        ]);
+
+        const playAudio = (index) => {
+            closeAll();
+            nextTick(() => {
+                let target = audioList.value[index];
+                const url = target.url;
+                if (audioPlayer.value?.src != url) audioPlayer.value.src = url;
+                audioPlayer.value.play().then(() => {
+                    target["state"] = true;
+                });
+            });
+        };
+
+        const pauseAudio = (index) => {
+            let target = audioList.value[index];
+            target["state"] = false;
+            audioPlayer.value.pause();
+        };
+
+        // 快进 和 后退 10秒
+        const fastForward = (type = "fast", src, area) => {
+            if (!audioPlayer.value) return;
+            console.log("src", src, "audioPlayer", audioPlayer.value);
+            if (audioPlayer.value.src != src) {
+                manageAudio(src, area);
+                return;
+            }
+
+            let currentTime = audioPlayer.value.currentTime || 0;
+            const duration = audioPlayer.value.duration || 0;
+            let newTime = 0;
+            if (type == "fast") newTime = Math.min(currentTime + 10, duration);
+            else newTime = Math.max(currentTime - 10, 0);
+            audioPlayer.value.currentTime = newTime;
+            getProgress();
+        };
+
+        const manageAudio = (src, area) => {
+            const audio = audioPlayer.value;
+            closeAll();
+            nextTick(() => {
+                if (area == "head") {
+                    if (audio?.src != src) audio.src = src;
+                    audio.play().then(() => (audioHeadState.value = true));
+                }
+
+                if (area == "works") {
+                    if (audio?.src != src) audio.src = src;
+                    audio.play().then(() => {
+                        audioList.value.forEach((item) => {
+                            if (item.url == src) item["state"] = true;
+                        });
+                    });
+                }
+
+                console.log("area", area, src);
+
+                if (area == "custom") {
+                    if (audio?.src != src) audio.src = src;
+                    audio.play().then(() => {
+                        customList.value.forEach((item) => {
+                            if (item.src == src) item["state"] = true;
+                        });
+                    });
+                }
+            });
+        };
+
+        const closeAll = () => {
+            audioPlayer.value.pause();
+            audioHeadState.value = false;
+            audioList.value.forEach((item) => {
+                item["progress"] = 0;
+                item["state"] = false;
+            });
+            customList.value.forEach((item) => {
+                item["progress"] = 0;
+                item["state"] = false;
+            });
+        };
+
+        let customList = ref([
+            {
+                src: "https://app.gter.net/image/miniApp/mp3/1.mp3",
+            },
+            {
+                src: "https://app.gter.net/image/miniApp/mp3/2.mp3",
+            },
+            {
+                src: "https://app.gter.net/image/miniApp/mp3/3.mp3",
+            },
+            {
+                src: "https://app.gter.net/image/miniApp/mp3/4.mp3",
+            },
+        ]);
+
+        return { scrollToPrevious, scrollToNext, changePointer, pointerState, visibleRef, studentRef, customRef, worksRef, introduceRef, customList, closeAll, manageAudio, progress, pauseAudio, playAudio, audioList, closePreview, openPreview, previewState, audioHeadState, pauseHead, playHead, audioPlayer, text, trait, fastForward };
+    },
+}).mount("#appIndex");