File size: 4,496 Bytes
92e6753 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
class PresetPanel {
constructor() {
this.presets = [];
this.currentPreset = null;
this.container = document.querySelector('.preset-container');
this.select = document.querySelector('.preset-select');
this.submitBtn = document.querySelector('.preset-submit-btn');
this.init();
}
init() {
this.loadPresets();
this.setupEventListeners();
}
async loadPresets() {
try {
const response = await fetch('/api/list-presets');
if (!response.ok) {
throw new Error('Failed to load presets');
}
const data = await response.json();
this.presets = data.presets;
this.renderPresetOptions();
} catch (error) {
console.error('Error loading presets:', error);
alert('加载预设列表失败，请刷新页面重试');
}
}
renderPresetOptions() {
if (!this.select) return;
this.select.innerHTML = '<option value="">选择预设...</option>';
this.presets.forEach(preset => {
const option = document.createElement('option');
option.value = preset;
option.textContent = preset.replace('.json', '');
this.select.appendChild(option);
});
}
setupEventListeners() {
if (this.select) {
this.select.addEventListener('change', () => {
this.currentPreset = this.select.value;
this.submitBtn.disabled = !this.currentPreset;
});
}
if (this.submitBtn) {
this.submitBtn.addEventListener('click', () => this.handleSubmit());
}
}
async handleSubmit() {
if (!this.currentPreset) return;
// 禁用按钮，防止重复点击
this.submitBtn.disabled = true;
this.submitBtn.textContent = '加载中...';
try {
const response = await fetch('/api/load-preset', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
preset: this.currentPreset
})
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.detail || '加载预设失败');
}
if (data.success) {
// 触发预设加载成功事件
window.dispatchEvent(new CustomEvent('preset-loaded', {
detail: { preset: this.currentPreset }
}));
// 重新加载初始数据
if (window.ws && window.ws.readyState === WebSocket.OPEN) {
// 先停止当前的故事生成
window.ws.send(JSON.stringify({
type: 'control',
action: 'stop'
}));
// 重新连接WebSocket以获取新的初始数据
const clientId = Date.now().toString();
const ws = new WebSocket(`ws://${window.location.host}/ws/${clientId}`);
ws.onopen = () => {
console.log('WebSocket重新连接成功');
};
ws.onmessage = (event) => {
const message = JSON.parse(event.data);
// 触发自定义事件，让其他面板更新数据
window.dispatchEvent(new CustomEvent('websocket-message', {
detail: message
}));
};
ws.onerror = (error) => {
console.error('WebSocket错误:', error);
alert('连接服务器失败，请刷新页面重试');
};
// 更新全局WebSocket实例
window.ws = ws;
}
alert('预设加载成功！');
}
} catch (error) {
console.error('Error loading preset:', error);
alert(error.message || '加载预设失败，请重试');
} finally {
// 恢复按钮状态
this.submitBtn.disabled = false;
this.submitBtn.textContent = '加载预设';
}
}
}
const presetPanel = new PresetPanel(); |