description: '拍开动作'
});

this.actions.set('onckyck', {
execute: (target, param) => this.executeConfirm(target, param),
description: '确认动作'
});

this.actions.set('onckfck', {
execute: (target, param) => this.executeCancel(target, param),
description: '取消动作'
});

this.actions.set('onckqck', {
execute: (target, param) => this.executeCircle(target, param),
description: '圈旋动作'
});

this.actions.set('onckxck', {
execute: (target, param) => this.executeSelect(target, param),
description: '选择动作'
});
}

initializeEventListeners() {
// 动作卡片点击
document.querySelectorAll('[data-action]').forEach(card => {
card.addEventListener('click', (e) => {
const action = e.currentTarget.dataset.action;
this.executeAction(action);
});
});

// 执行按钮
document.getElementById('execute-rhyme').addEventListener('click', () => {
const action = document.querySelector('[data-action].active')?.dataset.action;
if (action) {
this.executeAction(action);
}
});

// 快速测试按钮
document.querySelectorAll('[data-quick-test]').forEach(btn => {
btn.addEventListener('click', (e) => {
const action = e.currentTarget.dataset.quickTest;
this.executeAction(action);
});
});

// 代码运行
document.getElementById('run-rhyme-code').addEventListener('click', () => {
this.executeCode();
});

// 创建新谐音
document.getElementById('create-rhyme').addEventListener('click', () => {
this.createNewRhyme();
});
}

initializeVisualStage() {
// 为视觉元素添加点击事件
document.querySelectorAll('.rhyme-element').forEach(element => {
element.addEventListener('click', (e) => {
const elementId = e.target.id;
this.executeAction('onckdck', elementId);
});
});
}

executeAction(actionName, param = '') {
const action = this.actions.get(actionName);
if (!action) {
this.showMessage(`未知动作: ${actionName}`, 'error');
return;
}

const target = document.getElementById('rhyme-target').value;
const result = action.execute(target, param);

this.showMessage(result, 'success');
this.updateStatus();
}

executeClick(target, param) {
const elements = this.getTargetElements(target);
elements.forEach(element => {
element.classList.remove('rhyme-click');
void element.offsetWidth; // 触发重绘
element.classList.add('rhyme-click');

setTimeout(() => {
element.classList.remove('rhyme-click');
}, 500);
});

return `点击了 ${target}`;
}

executePat(target, param) {
const elements = this.getTargetElements(target);
elements.forEach(element => {
element.classList.remove('rhyme-pat');
void element.offsetWidth;
element.classList.add('rhyme-pat');

setTimeout(() => {
element.classList.remove('rhyme-pat');
}, 1000);
});

return `拍开了 ${target} ${param}`;
}

executeConfirm(target, param) {
const elements = this.getTargetElements(target);
elements.forEach(element => {
element.classList.remove('rhyme-confirm');
void element.offsetWidth;
element.classList.add('rhyme-confirm');

setTimeout(() => {
element.classList.remove('rhyme-confirm');
}, 800);
});

return '操作已确认';
}

executeCancel(target, param) {
const elements = this.getTargetElements(target);
elements.forEach(element => {
element.classList.remove('rhyme-cancel');
void element.offsetWidth;
element.classList.add('rhyme-cancel');

setTimeout(() => {
element.classList.remove('rhyme-cancel');
}, 800);
});

return '操作已取消';
}

executeCircle(target, param) {
const elements = this.getTargetElements(target);
elements.forEach(element => {
element.classList.remove('rhyme-spin');
void element.offsetWidth;
element.classList.add('rhyme-spin');
});

return `圈旋: ${target}`;
}

executeSelect(target, param) {
// 清除之前的选择