128 lines
6.8 KiB
HTML
128 lines
6.8 KiB
HTML
<script>
|
|
// ==================== 演员管理 ====================
|
|
|
|
function openActorModal(id) {
|
|
currentCharDramaId = id;
|
|
document.getElementById('actorModal').classList.add('show');
|
|
document.getElementById('actorModalDramaTitle').textContent = '加载中...';
|
|
document.getElementById('actorModalDramaMeta').textContent = '';
|
|
document.getElementById('actorList').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('actorModalDramaTitle').textContent = d.title || '未命名短剧';
|
|
document.getElementById('actorModalDramaMeta').textContent = (d.style || '') + ' · 演员';
|
|
renderActorList(d.characters || []);
|
|
}).catch(err => {
|
|
document.getElementById('actorList').innerHTML = '<div style="color:red;font-size:13px;text-align:center;padding:20px;">加载失败: ' + err.message + '</div>';
|
|
});
|
|
}
|
|
|
|
function hideActorModal() {
|
|
document.getElementById('actorModal').classList.remove('show');
|
|
currentCharDramaId = null;
|
|
}
|
|
|
|
function renderActorList(chars) {
|
|
currentChars = chars;
|
|
const list = document.getElementById('actorList');
|
|
if (!chars || chars.length === 0) {
|
|
list.innerHTML = '<div style="color:#999;font-size:13px;padding:8px 0">暂无演员，点击下方添加</div>';
|
|
return;
|
|
}
|
|
list.innerHTML = chars.map(function(c, i) {
|
|
var initial = c.name ? c.name.charAt(0) : '?';
|
|
var portraitUrl = c.portraitPath ? '/' + c.portraitPath : '';
|
|
var voiceName = c.voicePath ? c.voicePath.split('/').pop() : '';
|
|
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;">'
|
|
+ (portraitUrl ? '<img src="' + portraitUrl + '" style="width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;">' : '<span style="width:36px;height:36px;border-radius:50%;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(c.name) + '</strong>' + (voiceName ? ' · ' + escHtml(voiceName) : '') + (c.description ? '<br><span style="color:#888;font-size:11px;">' + escHtml(c.description) + '</span>' : '') + '</div>'
|
|
+ '<div style="display:flex;gap:4px;flex-shrink:0;">'
|
|
+ '<button class="btn btn-sm btn-outline" onclick="editChar(' + i + ')" style="padding:2px 8px;font-size:11px;">编辑</button>'
|
|
+ '<button class="btn btn-sm btn-danger" onclick="deleteChar(' + i + ')" style="padding:2px 8px;font-size:11px;">删除</button></div></div>';
|
|
}).join('');
|
|
}
|
|
|
|
function showCharForm() {
|
|
document.getElementById('modalCharTitle').textContent = '添加演员';
|
|
document.getElementById('editModalCharIdx').value = '-1';
|
|
document.getElementById('modalCharName').value = '';
|
|
document.getElementById('modalCharDesc').value = '';
|
|
document.getElementById('modalCharVoice').value = '';
|
|
document.getElementById('modalCharPortrait').value = '';
|
|
document.getElementById('modalCharModal').classList.add('show');
|
|
}
|
|
|
|
function hideModalCharForm() { document.getElementById('modalCharModal').classList.remove('show'); }
|
|
|
|
function editChar(idx) {
|
|
var c = currentChars[idx]; if (!c) return;
|
|
document.getElementById('modalCharTitle').textContent = '编辑演员';
|
|
document.getElementById('editModalCharIdx').value = c.id;
|
|
document.getElementById('modalCharName').value = c.name || '';
|
|
document.getElementById('modalCharDesc').value = c.description || '';
|
|
document.getElementById('modalCharVoice').value = '';
|
|
document.getElementById('modalCharPortrait').value = '';
|
|
document.getElementById('modalCharModal').classList.add('show');
|
|
}
|
|
|
|
async function saveChar() {
|
|
var name = document.getElementById('modalCharName').value.trim();
|
|
if (!name) { alert('请输入演员名'); return; }
|
|
var charId = parseInt(document.getElementById('editModalCharIdx').value);
|
|
const btn = event.target; btn.disabled = true;
|
|
try {
|
|
var formData = new FormData();
|
|
formData.append('dramaId', currentCharDramaId);
|
|
formData.append('name', name);
|
|
formData.append('description', document.getElementById('modalCharDesc').value.trim());
|
|
var voiceInput = document.getElementById('modalCharVoice');
|
|
if (voiceInput.files && voiceInput.files[0]) {
|
|
formData.append('voiceFile', voiceInput.files[0]);
|
|
}
|
|
var portraitInput = document.getElementById('modalCharPortrait');
|
|
if (portraitInput.files && portraitInput.files[0]) {
|
|
formData.append('portraitFile', portraitInput.files[0]);
|
|
}
|
|
if (charId >= 0) formData.append('charId', charId);
|
|
const url = charId >= 0 ? '/drama/character/update' : '/drama/character/add';
|
|
const resp = await fetch(url, { method: 'POST', body: formData });
|
|
const data = await resp.json();
|
|
if (data.code !== 0) throw new Error(data.message);
|
|
hideModalCharForm();
|
|
openActorModal(currentCharDramaId);
|
|
} catch (err) { alert('保存演员失败: ' + err.message); }
|
|
finally { btn.disabled = false; }
|
|
}
|
|
|
|
function deleteChar(idx) {
|
|
var c = currentChars[idx]; if (!c) return;
|
|
confirmAction = async function() {
|
|
try {
|
|
const resp = await fetch('/drama/character/delete', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ dramaId: parseInt(currentCharDramaId), charId: parseInt(c.id) }) });
|
|
const data = await resp.json(); if (data.code !== 0) throw new Error(data.message);
|
|
openActorModal(currentCharDramaId);
|
|
} catch (err) { alert('删除演员失败: ' + err.message); }
|
|
};
|
|
document.getElementById('confirmTitle').textContent = '删除演员';
|
|
document.getElementById('confirmMsg').textContent = '确定要删除演员「' + c.name + '」吗？';
|
|
document.getElementById('confirmBtn').className = 'btn btn-danger';
|
|
document.getElementById('confirmModal').classList.add('show');
|
|
}
|
|
</script>
|
|
|
|
<!-- 演员管理弹窗 -->
|
|
<div class="modal-overlay" id="actorModal">
|
|
<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="actorModalDramaTitle" style="margin-bottom:4px;">演员管理</h3>
|
|
<span id="actorModalDramaMeta" style="font-size:12px;color:#888;"></span>
|
|
</div>
|
|
<button class="btn btn-outline btn-sm" onclick="hideActorModal()">关闭</button>
|
|
</div>
|
|
<div id="actorList" style="flex:1;overflow-y:auto;padding-right:8px;min-height:60px;"></div>
|
|
<div class="add-link" onclick="showCharForm()" style="margin-top:8px;flex-shrink:0;">+ 添加演员</div>
|
|
</div>
|
|
</div>
|