121 lines
6.3 KiB
HTML
121 lines
6.3 KiB
HTML
<script>
|
|
// ==================== 场景管理 ====================
|
|
|
|
function openSceneModal(id) {
|
|
currentDramaId = id;
|
|
document.getElementById('sceneModal').classList.add('show');
|
|
document.getElementById('sceneModalDramaTitle').textContent = '加载中...';
|
|
document.getElementById('sceneModalDramaMeta').textContent = '';
|
|
document.getElementById('sceneList').innerHTML = '<div style="color:#999;font-size:13px;text-align:center;padding:20px;">加载中...</div>';
|
|
fetch('/drama/get?id=' + id).then(r => r.json()).then(data => {
|
|
if (data.code !== 0) throw new Error(data.message);
|
|
const d = data.data;
|
|
document.getElementById('sceneModalDramaTitle').textContent = d.title || '未命名短剧';
|
|
document.getElementById('sceneModalDramaMeta').textContent = (d.style || '') + ' · 场景';
|
|
renderSceneList(d.scenes || []);
|
|
}).catch(err => {
|
|
document.getElementById('sceneList').innerHTML = '<div style="color:red;font-size:13px;text-align:center;padding:20px;">加载失败: ' + err.message + '</div>';
|
|
});
|
|
}
|
|
|
|
function hideSceneModal() {
|
|
document.getElementById('sceneModal').classList.remove('show');
|
|
currentDramaId = null;
|
|
}
|
|
|
|
function renderSceneList(scenes) {
|
|
currentChars = scenes;
|
|
const list = document.getElementById('sceneList');
|
|
if (!scenes || scenes.length === 0) {
|
|
list.innerHTML = '<div style="color:#999;font-size:13px;padding:8px 0">暂无场景，点击下方添加</div>';
|
|
return;
|
|
}
|
|
list.innerHTML = scenes.map(function(s, i) {
|
|
var initial = s.name ? s.name.charAt(0) : '?';
|
|
var imgUrl = s.imagePath ? '/' + s.imagePath : '';
|
|
return '<div style="display:flex;gap:8px;align-items:center;padding:8px 10px;background:#fafafa;border-radius:8px;border:1px solid #eee;margin-bottom:6px;">'
|
|
+ (imgUrl ? '<img src="' + imgUrl + '" style="width:36px;height:36px;border-radius:6px;object-fit:cover;flex-shrink:0;">' : '<span style="width:36px;height:36px;border-radius:6px;background:#e0e0e0;display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:bold;color:#666;flex-shrink:0;">' + initial + '</span>')
|
|
+ '<div style="flex:1;font-size:13px;"><strong>' + escHtml(s.name) + '</strong>' + (s.description ? '<br><span style="color:#888;font-size:11px;">' + escHtml(s.description) + '</span>' : '') + '</div>'
|
|
+ '<div style="display:flex;gap:4px;flex-shrink:0;">'
|
|
+ '<button class="btn btn-sm btn-outline" onclick="editScene(' + i + ')" style="padding:2px 8px;font-size:11px;">编辑</button>'
|
|
+ '<button class="btn btn-sm btn-danger" onclick="deleteScene(' + i + ')" style="padding:2px 8px;font-size:11px;">删除</button></div></div>';
|
|
}).join('');
|
|
}
|
|
|
|
function showSceneForm() {
|
|
document.getElementById('modalSceneTitle').textContent = '添加场景';
|
|
document.getElementById('editModalSceneIdx').value = '-1';
|
|
document.getElementById('modalSceneName').value = '';
|
|
document.getElementById('modalSceneDesc').value = '';
|
|
document.getElementById('modalSceneImage').value = '';
|
|
document.getElementById('modalSceneModal').classList.add('show');
|
|
}
|
|
|
|
function hideModalSceneForm() { document.getElementById('modalSceneModal').classList.remove('show'); }
|
|
|
|
function editScene(idx) {
|
|
var s = currentChars[idx]; if (!s) return;
|
|
document.getElementById('modalSceneTitle').textContent = '编辑场景';
|
|
document.getElementById('editModalSceneIdx').value = s.id;
|
|
document.getElementById('modalSceneName').value = s.name || '';
|
|
document.getElementById('modalSceneDesc').value = s.description || '';
|
|
document.getElementById('modalSceneImage').value = '';
|
|
document.getElementById('modalSceneModal').classList.add('show');
|
|
}
|
|
|
|
async function saveScene() {
|
|
var name = document.getElementById('modalSceneName').value.trim();
|
|
if (!name) { alert('请输入场景名'); return; }
|
|
var id = parseInt(document.getElementById('editModalSceneIdx').value);
|
|
const btn = event.target; btn.disabled = true;
|
|
try {
|
|
var formData = new FormData();
|
|
formData.append('dramaId', currentDramaId);
|
|
formData.append('name', name);
|
|
formData.append('description', document.getElementById('modalSceneDesc').value.trim());
|
|
var imgInput = document.getElementById('modalSceneImage');
|
|
if (imgInput.files && imgInput.files[0]) {
|
|
formData.append('imageFile', imgInput.files[0]);
|
|
}
|
|
if (id >= 0) formData.append('id', id);
|
|
const url = id >= 0 ? '/drama/scene/update' : '/drama/scene/add';
|
|
const resp = await fetch(url, { method: 'POST', body: formData });
|
|
const data = await resp.json();
|
|
if (data.code !== 0) throw new Error(data.message);
|
|
hideModalSceneForm();
|
|
openSceneModal(currentDramaId);
|
|
} catch (err) { alert('保存场景失败: ' + err.message); }
|
|
finally { btn.disabled = false; }
|
|
}
|
|
|
|
function deleteScene(idx) {
|
|
var s = currentChars[idx]; if (!s) return;
|
|
confirmAction = async function() {
|
|
try {
|
|
const resp = await fetch('/drama/scene/delete', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: parseInt(s.id), dramaId: parseInt(currentDramaId) }) });
|
|
const data = await resp.json(); if (data.code !== 0) throw new Error(data.message);
|
|
openSceneModal(currentDramaId);
|
|
} catch (err) { alert('删除场景失败: ' + err.message); }
|
|
};
|
|
document.getElementById('confirmTitle').textContent = '删除场景';
|
|
document.getElementById('confirmMsg').textContent = '确定要删除场景「' + s.name + '」吗？';
|
|
document.getElementById('confirmBtn').className = 'btn btn-danger';
|
|
document.getElementById('confirmModal').classList.add('show');
|
|
}
|
|
</script>
|
|
|
|
<!-- 场景管理弹窗 -->
|
|
<div class="modal-overlay" id="sceneModal">
|
|
<div class="modal" style="width:80vw;height:80vh;max-width:1100px;padding:24px 28px;display:flex;flex-direction:column;">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-shrink:0;">
|
|
<div>
|
|
<h3 id="sceneModalDramaTitle" style="margin-bottom:4px;">场景管理</h3>
|
|
<span id="sceneModalDramaMeta" style="font-size:12px;color:#888;"></span>
|
|
</div>
|
|
<button class="btn btn-outline btn-sm" onclick="hideSceneModal()">关闭</button>
|
|
</div>
|
|
<div id="sceneList" style="flex:1;overflow-y:auto;padding-right:8px;min-height:60px;"></div>
|
|
<div class="add-link" onclick="showSceneForm()" style="margin-top:8px;flex-shrink:0;">+ 添加场景</div>
|
|
</div>
|
|
</div>
|