[js] 自动显示音频资源名称

本人没有任何 js 基础，问 ai 写的

function cleanFileName(fileName) {
    // 多种清理策略
    return fileName
        .replace(/^\d+[-_]?/, '')           // 移除开头的数字
        .replace(/\d{10,}.*?\./, '.')        // 移除中间的长数字
        .replace(/\[.*?\]/, '')              // 移除方括号内容
        .replace(/\(.*?\)/, '')              // 移除圆括号内容
        .replace(/\s+/g, ' ')                // 标准化空格
        .trim();                             // 去除首尾空格
}

function displayAudioResourceName() {
    const containers = [
        document.querySelector('.protyle-wysiwyg'),
        document.querySelector('.iframe-content'),
        document.body
    ];

    containers.forEach(container => {
        if (!container) return;

        const audios = container.querySelectorAll('audio');
        audios.forEach(audio => {
            // 避免重复添加
            if (audio.previousElementSibling?.classList.contains('audio-resource-name')) return;

            const src = audio.getAttribute('src');
            if (src) {
                const fileName = cleanFileName(decodeURIComponent(src.split('/').pop()));
            
                const resourceNameEl = document.createElement('div');
                resourceNameEl.className = 'audio-resource-name';
                resourceNameEl.textContent = fileName;
                resourceNameEl.style.cssText = `
                    font-size: 12px;
                    color: var(--b3-theme-on-surface);
                    margin-bottom: 4px;
                    max-width: 200px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                `;

                audio.parentNode.insertBefore(resourceNameEl, audio);
            }
        });
    });
}

// 使用 MutationObserver
const observer = new MutationObserver(() => {
    requestAnimationFrame(displayAudioResourceName);
});

observer.observe(document.body, { 
    childList: true, 
    subtree: true 
});

// 初始调用
displayAudioResourceName();