这种实现方式可行吗？我前端不太好，这些是Claude生成的
使用 BetterNCM 原生功能：
1.利用 window.open 创建独立窗口
2.使用 alwaysOnTop 实现置顶
3.无需额外的 Native Plugin

文件管理：
1.使用 BetterNCM 的文件系统 API
2.自动创建和管理 HTML 文件
3.支持插件更新和重载

通信机制：
1.使用 postMessage 进行窗口间通信
2.实时更新播放信息
3.支持双向控制

样式和交互：
1.独立的 CSS 样式
2.自定义窗口装饰
3.响应式设计

实现的功能：

系统级置顶窗口
实时同步播放信息
收藏功能
拖拽支持（系统原生）
窗口控制

代码如下

// pip.html

正在播放

❤ ✕

加载中...

    // 发送消息给主窗口
    document.querySelector('.favorite-btn').onclick = () => {
        window.opener.postMessage({ type: 'TOGGLE_FAVORITE' }, '*');
    };

    document.querySelector('.close-btn').onclick = () => {
        window.opener.postMessage({ type: 'CLOSE_WINDOW' }, '*');
    };
</script>

// main.js
let pipWindow = null;
const PIP_HTML_PATH = 'pip.html';

plugin.onLoad(async () => {
// 确保 pip.html 文件存在
const htmlContent = <!DOCTYPE html> <html>...</html>; // 这里是 pip.html 的内容

const pipPath = betterncm_native.app.datapath() + '/plugins/pip-window/' + PIP_HTML_PATH;
if (!betterncm_native.fs.exists(pipPath)) {
    betterncm_native.fs.writeFileText(pipPath, htmlContent);
}

// 创建小窗控制按钮
const toggleBtn = dom('button', {
    innerText: '◲',
    onclick: togglePipWindow,
    style: {
        background: 'none',
        border: 'none',
        cursor: 'pointer',
        padding: '4px'
    }
});

// 添加按钮到界面
const cmdBar = document.querySelector('.cmd-bar');
if (cmdBar) {
    cmdBar.appendChild(toggleBtn);
}

// 监听播放状态变化
channel.on('audio.timeupdate', updatePipWindow);

});

// 切换小窗显示状态
function togglePipWindow() {
if (pipWindow && !pipWindow.closed) {
pipWindow.close();
pipWindow = null;
} else {
const width = 300;
const height = 200;
const left = window.screen.width - width - 20;
const top = 20;

    pipWindow = window.open(
        `file://${betterncm_native.app.datapath()}/plugins/pip-window/${PIP_HTML_PATH}`,
        'PiPWindow',
        `width=${width},height=${height},left=${left},top=${top},frame=false,alwaysOnTop=true`
    );

    // 监听小窗消息
    window.addEventListener('message', handlePipMessage);
    
    // 初始化小窗内容
    updatePipWindow();
}

}

// 更新小窗内容
async function updatePipWindow() {
if (!pipWindow || pipWindow.closed) return;

const currentTrack = await getCurrentTrack();
if (!currentTrack) return;

pipWindow.postMessage({
    type: 'UPDATE_SONG',
    data: {
        title: currentTrack.name,
        artist: currentTrack.artists.map(a => a.name).join(', '),
        isFavorite: currentTrack.isFavorite
    }
}, '*');

}

// 处理小窗消息
function handlePipMessage(event) {
const { type } = event.data;
switch (type) {
case 'TOGGLE_FAVORITE':
toggleFavorite();
break;
case 'CLOSE_WINDOW':
if (pipWindow) {
pipWindow.close();
pipWindow = null;
}
break;
}
}

// 获取当前播放信息
async function getCurrentTrack() {
// 这里需要实现获取当前播放歌曲信息的逻辑
return null;
}

// 切换收藏状态
async function toggleFavorite() {
// 这里需要实现收藏/取消收藏的逻辑
}

[Feature Request]小窗快捷选项加入收藏按钮 #19

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions