2026-03-27 13:41:07 +08:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<title>TTS Book Service</title>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
|
|
|
|
:root{--bg:#0f1117;--card:#1a1d27;--border:#2a2d3a;--primary:#6c5ce7;--primary-hover:#7c6df7;--success:#00b894;--error:#ff6b6b;--warn:#fdcb6e;--text:#e8e8e8;--text-dim:#8b8fa3;--text-bright:#fff}
|
|
|
|
|
|
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
|
|
|
|
|
|
.container{max-width:1200px;margin:0 auto;padding:20px}
|
|
|
|
|
|
h1{font-size:1.6rem;font-weight:700;margin-bottom:8px;background:linear-gradient(135deg,var(--primary),#a29bfe);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
|
|
|
|
|
.subtitle{color:var(--text-dim);font-size:.85rem;margin-bottom:24px}
|
|
|
|
|
|
|
|
|
|
|
|
/* Tabs */
|
|
|
|
|
|
.tabs{display:flex;gap:4px;margin-bottom:24px;border-bottom:1px solid var(--border);padding-bottom:0}
|
|
|
|
|
|
.tab{padding:10px 20px;cursor:pointer;color:var(--text-dim);font-size:.9rem;border:none;background:none;transition:all .2s;position:relative;border-bottom:2px solid transparent}
|
|
|
|
|
|
.tab:hover{color:var(--text)}
|
|
|
|
|
|
.tab.active{color:var(--primary);border-bottom-color:var(--primary)}
|
|
|
|
|
|
.tab-panel{display:none}
|
|
|
|
|
|
.tab-panel.active{display:block}
|
|
|
|
|
|
|
|
|
|
|
|
/* Cards */
|
|
|
|
|
|
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px}
|
|
|
|
|
|
.card-title{font-size:1.1rem;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}
|
|
|
|
|
|
|
|
|
|
|
|
/* Forms */
|
|
|
|
|
|
.form-group{margin-bottom:14px}
|
|
|
|
|
|
.form-group label{display:block;font-size:.8rem;color:var(--text-dim);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
|
|
|
|
|
|
input,textarea,select{width:100%;padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.9rem;outline:none;transition:border .2s}
|
|
|
|
|
|
input:focus,textarea:focus,select:focus{border-color:var(--primary)}
|
|
|
|
|
|
textarea{resize:vertical;min-height:100px;font-family:inherit}
|
|
|
|
|
|
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
|
|
|
|
|
|
|
|
|
|
|
|
/* Buttons */
|
|
|
|
|
|
.btn{padding:8px 18px;border-radius:8px;border:none;cursor:pointer;font-size:.85rem;font-weight:500;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
|
|
|
|
|
|
.btn-primary{background:var(--primary);color:#fff}
|
|
|
|
|
|
.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px)}
|
|
|
|
|
|
.btn-success{background:var(--success);color:#fff}
|
|
|
|
|
|
.btn-success:hover{opacity:.9}
|
|
|
|
|
|
.btn-danger{background:var(--error);color:#fff}
|
|
|
|
|
|
.btn-danger:hover{opacity:.9}
|
|
|
|
|
|
.btn-sm{padding:5px 12px;font-size:.78rem}
|
|
|
|
|
|
.btn:disabled{opacity:.5;cursor:not-allowed}
|
|
|
|
|
|
|
|
|
|
|
|
/* Table */
|
|
|
|
|
|
.table-wrap{overflow-x:auto}
|
|
|
|
|
|
table{width:100%;border-collapse:collapse}
|
|
|
|
|
|
th{text-align:left;padding:10px 12px;font-size:.75rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}
|
|
|
|
|
|
td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:.85rem;vertical-align:middle}
|
|
|
|
|
|
tr:hover{background:rgba(108,92,231,.05)}
|
|
|
|
|
|
|
|
|
|
|
|
/* Status badges */
|
|
|
|
|
|
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:600;text-transform:uppercase}
|
|
|
|
|
|
.badge-ready{background:rgba(0,184,148,.15);color:var(--success)}
|
|
|
|
|
|
.badge-pending{background:rgba(253,203,110,.15);color:var(--warn)}
|
|
|
|
|
|
.badge-generating{background:rgba(108,92,231,.15);color:var(--primary);animation:pulse 1.5s infinite}
|
|
|
|
|
|
.badge-error{background:rgba(255,107,107,.15);color:var(--error)}
|
|
|
|
|
|
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
|
|
|
|
|
|
|
|
|
|
|
|
/* Modal */
|
|
|
|
|
|
.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:100;justify-content:center;align-items:center}
|
|
|
|
|
|
.modal-overlay.show{display:flex}
|
|
|
|
|
|
.modal{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;width:90%;max-width:700px;max-height:80vh;overflow-y:auto}
|
|
|
|
|
|
.modal-title{font-size:1.1rem;font-weight:600;margin-bottom:16px}
|
|
|
|
|
|
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
|
|
|
|
|
|
|
|
|
|
|
|
/* Toast */
|
|
|
|
|
|
.toast{position:fixed;top:20px;right:20px;padding:12px 20px;border-radius:10px;font-size:.85rem;z-index:200;animation:slideIn .3s ease;max-width:400px}
|
|
|
|
|
|
.toast-success{background:var(--success);color:#fff}
|
|
|
|
|
|
.toast-error{background:var(--error);color:#fff}
|
|
|
|
|
|
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
|
|
|
|
|
|
|
|
|
|
|
|
/* Preview */
|
|
|
|
|
|
.preview-box{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:16px;margin-top:12px}
|
|
|
|
|
|
audio{width:100%;margin-top:8px}
|
|
|
|
|
|
.text-dim{color:var(--text-dim)}
|
|
|
|
|
|
.flex{display:flex;gap:8px;align-items:center}
|
|
|
|
|
|
.flex-between{display:flex;justify-content:space-between;align-items:center}
|
|
|
|
|
|
.mt-2{margin-top:8px}
|
|
|
|
|
|
.mt-4{margin-top:16px}
|
|
|
|
|
|
.mb-2{margin-bottom:8px}
|
|
|
|
|
|
|
|
|
|
|
|
/* Scrollable text preview */
|
|
|
|
|
|
.text-preview{max-height:120px;overflow-y:auto;font-size:.82rem;color:var(--text-dim);line-height:1.5;white-space:pre-wrap;word-break:break-all}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<h1>📚 TTS Book Service</h1>
|
|
|
|
|
|
<p class="subtitle">小米 MiMo TTS 听书音频转换服务</p>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="tabs">
|
|
|
|
|
|
<button class="tab active" onclick="switchTab('books')">📖 书籍管理</button>
|
|
|
|
|
|
<button class="tab" onclick="switchTab('preview')">🎙️ TTS 试听</button>
|
|
|
|
|
|
<button class="tab" onclick="switchTab('settings')">⚙️ 配置</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Tab: Books -->
|
|
|
|
|
|
<div id="tab-books" class="tab-panel active">
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
|
<div class="flex-between">
|
|
|
|
|
|
<div class="card-title" style="margin-bottom:0">📖 书籍列表</div>
|
|
|
|
|
|
<button class="btn btn-primary" onclick="showAddBook()">+ 添加书籍</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="book-list" class="card">
|
|
|
|
|
|
<p class="text-dim">加载中...</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Tab: Preview -->
|
|
|
|
|
|
<div id="tab-preview" class="tab-panel">
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
|
<div class="card-title">🎙️ TTS 试听</div>
|
2026-03-27 14:37:43 +08:00
|
|
|
|
<div class="form-row">
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>说话风格（可选）</label>
|
|
|
|
|
|
<input id="preview-style" placeholder="如：开心、语速慢、东北话、像个大将军...">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>音色（可选）</label>
|
|
|
|
|
|
<input id="preview-voice" placeholder="留空使用默认音色 mimo_default">
|
|
|
|
|
|
</div>
|
2026-03-27 13:41:07 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>文本内容</label>
|
|
|
|
|
|
<textarea id="preview-text" rows="4" placeholder="输入要合成的文本..."></textarea>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<button class="btn btn-primary" onclick="doPreview()" id="preview-btn">🔊 生成试听</button>
|
|
|
|
|
|
<div id="preview-result" class="preview-box" style="display:none">
|
|
|
|
|
|
<audio id="preview-audio" controls></audio>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Tab: Settings -->
|
|
|
|
|
|
<div id="tab-settings" class="tab-panel">
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
|
<div class="card-title">⚙️ 当前配置</div>
|
|
|
|
|
|
<table>
|
|
|
|
|
|
<tr><th style="width:180px">配置项</th><th>值</th></tr>
|
|
|
|
|
|
<tr><td>TTS API</td><td id="cfg-endpoint">-</td></tr>
|
|
|
|
|
|
<tr><td>模型</td><td id="cfg-model">-</td></tr>
|
|
|
|
|
|
<tr><td>默认音色</td><td id="cfg-voice">-</td></tr>
|
|
|
|
|
|
<tr><td>API Key</td><td id="cfg-apikey">-</td></tr>
|
|
|
|
|
|
</table>
|
|
|
|
|
|
<p class="text-dim mt-4" style="font-size:.8rem">通过环境变量配置：MIMO_API_KEY、MIMO_API_ENDPOINT、MIMO_TTS_MODEL、MIMO_VOICE</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Add Book Modal -->
|
|
|
|
|
|
<div id="modal-add-book" class="modal-overlay">
|
|
|
|
|
|
<div class="modal">
|
|
|
|
|
|
<div class="modal-title">📖 添加书籍</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>书籍 ID（听书 App 中的 book_id）</label>
|
|
|
|
|
|
<input id="new-book-id" placeholder="如：book_9">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>书名</label>
|
|
|
|
|
|
<input id="new-book-title" placeholder="书籍名称">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>作者</label>
|
|
|
|
|
|
<input id="new-book-author" placeholder="作者（可选）">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="modal-actions">
|
|
|
|
|
|
<button class="btn" style="background:var(--border)" onclick="closeModal('modal-add-book')">取消</button>
|
|
|
|
|
|
<button class="btn btn-primary" onclick="addBook()">确认添加</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Chapter Modal -->
|
|
|
|
|
|
<div id="modal-chapters" class="modal-overlay">
|
|
|
|
|
|
<div class="modal">
|
|
|
|
|
|
<div class="flex-between">
|
|
|
|
|
|
<div class="modal-title" id="chapter-modal-title" style="margin-bottom:0">章节管理</div>
|
|
|
|
|
|
<button class="btn btn-sm btn-primary" onclick="showAddChapter()">+ 添加章节</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="chapter-list" class="mt-4">
|
|
|
|
|
|
<p class="text-dim">加载中...</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="mt-4" id="bulk-actions" style="display:none">
|
|
|
|
|
|
<button class="btn btn-success" onclick="generateAll()">⚡ 批量生成所有未就绪章节</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="modal-actions">
|
|
|
|
|
|
<button class="btn" style="background:var(--border)" onclick="closeModal('modal-chapters')">关闭</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Add Chapter Modal -->
|
|
|
|
|
|
<div id="modal-add-chapter" class="modal-overlay">
|
|
|
|
|
|
<div class="modal">
|
|
|
|
|
|
<div class="modal-title" id="add-chapter-title">添加章节</div>
|
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>章节 ID</label>
|
|
|
|
|
|
<input id="new-chapter-id" placeholder="如：chapter_1">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>App 章节 ID</label>
|
|
|
|
|
|
<input id="new-chapter-app-id" placeholder="如：chapter1">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>章节标题</label>
|
|
|
|
|
|
<input id="new-chapter-title" placeholder="章节名称">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>文本内容（TTS 输入）</label>
|
|
|
|
|
|
<textarea id="new-chapter-text" rows="8" placeholder="粘贴本章节的文本内容..."></textarea>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="modal-actions">
|
|
|
|
|
|
<button class="btn" style="background:var(--border)" onclick="closeModal('modal-add-chapter')">取消</button>
|
|
|
|
|
|
<button class="btn btn-primary" onclick="addChapter()">添加</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Edit Chapter Modal -->
|
|
|
|
|
|
<div id="modal-edit-chapter" class="modal-overlay">
|
|
|
|
|
|
<div class="modal">
|
|
|
|
|
|
<div class="modal-title">编辑章节文本</div>
|
|
|
|
|
|
<input type="hidden" id="edit-chapter-id">
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>文本内容</label>
|
|
|
|
|
|
<textarea id="edit-chapter-text" rows="12" placeholder="修改章节文本..."></textarea>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="modal-actions">
|
|
|
|
|
|
<button class="btn" style="background:var(--border)" onclick="closeModal('modal-edit-chapter')">取消</button>
|
|
|
|
|
|
<button class="btn btn-primary" onclick="saveChapterText()">保存</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
let currentBookId = null;
|
|
|
|
|
|
|
|
|
|
|
|
// ── Tab ──
|
|
|
|
|
|
function switchTab(name) {
|
|
|
|
|
|
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
|
|
|
|
document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
|
|
|
|
|
|
event.target.classList.add('active');
|
|
|
|
|
|
document.getElementById('tab-' + name).classList.add('active');
|
|
|
|
|
|
if (name === 'settings') loadSettings();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ── Toast ──
|
|
|
|
|
|
function toast(msg, type = 'success') {
|
|
|
|
|
|
const t = document.createElement('div');
|
|
|
|
|
|
t.className = 'toast toast-' + type;
|
|
|
|
|
|
t.textContent = msg;
|
|
|
|
|
|
document.body.appendChild(t);
|
|
|
|
|
|
setTimeout(() => t.remove(), 3000);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ── Modal ──
|
|
|
|
|
|
function showModal(id) { document.getElementById(id).classList.add('show'); }
|
|
|
|
|
|
function closeModal(id) { document.getElementById(id).classList.remove('show'); }
|
|
|
|
|
|
|
|
|
|
|
|
// ── Books ──
|
|
|
|
|
|
async function loadBooks() {
|
|
|
|
|
|
try {
|
|
|
|
|
|
const res = await fetch('/admin/api/books');
|
|
|
|
|
|
const books = await res.json();
|
|
|
|
|
|
const el = document.getElementById('book-list');
|
|
|
|
|
|
if (!books.length) {
|
|
|
|
|
|
el.innerHTML = '<p class="text-dim">暂无书籍，点击右上角「添加书籍」开始</p>';
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
el.innerHTML = `<table>
|
|
|
|
|
|
<tr><th>书籍ID</th><th>书名</th><th>作者</th><th>操作</th></tr>
|
|
|
|
|
|
${books.map(b => `<tr>
|
|
|
|
|
|
<td><code>${b.book_id}</code></td>
|
|
|
|
|
|
<td>${b.title}</td>
|
|
|
|
|
|
<td>${b.author || '-'}</td>
|
|
|
|
|
|
<td class="flex">
|
|
|
|
|
|
<button class="btn btn-sm btn-primary" onclick="openChapters('${b.book_id}','${b.title}')">管理章节</button>
|
|
|
|
|
|
<button class="btn btn-sm btn-danger" onclick="deleteBook('${b.book_id}')">删除</button>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>`).join('')}
|
|
|
|
|
|
</table>`;
|
|
|
|
|
|
} catch(e) { toast('加载失败: ' + e.message, 'error'); }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function showAddBook() { showModal('modal-add-book'); }
|
|
|
|
|
|
|
|
|
|
|
|
async function addBook() {
|
|
|
|
|
|
const book_id = document.getElementById('new-book-id').value.trim();
|
|
|
|
|
|
const title = document.getElementById('new-book-title').value.trim();
|
|
|
|
|
|
const author = document.getElementById('new-book-author').value.trim();
|
|
|
|
|
|
if (!book_id || !title) { toast('书籍ID和书名不能为空', 'error'); return; }
|
|
|
|
|
|
try {
|
|
|
|
|
|
await fetch('/admin/api/books', {
|
|
|
|
|
|
method: 'POST',
|
|
|
|
|
|
headers: {'Content-Type': 'application/json'},
|
|
|
|
|
|
body: JSON.stringify({book_id, title, author})
|
|
|
|
|
|
});
|
|
|
|
|
|
closeModal('modal-add-book');
|
|
|
|
|
|
document.getElementById('new-book-id').value = '';
|
|
|
|
|
|
document.getElementById('new-book-title').value = '';
|
|
|
|
|
|
document.getElementById('new-book-author').value = '';
|
|
|
|
|
|
toast('书籍添加成功');
|
|
|
|
|
|
loadBooks();
|
|
|
|
|
|
} catch(e) { toast(e.message, 'error'); }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
async function deleteBook(book_id) {
|
|
|
|
|
|
if (!confirm(`确定删除书籍 ${book_id} 及其所有章节？`)) return;
|
|
|
|
|
|
await fetch(`/admin/api/books/${book_id}`, {method: 'DELETE'});
|
|
|
|
|
|
toast('已删除');
|
|
|
|
|
|
loadBooks();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ── Chapters ──
|
|
|
|
|
|
async function openChapters(book_id, title) {
|
|
|
|
|
|
currentBookId = book_id;
|
|
|
|
|
|
document.getElementById('chapter-modal-title').textContent = `📖 ${title} (${book_id})`;
|
|
|
|
|
|
showModal('modal-chapters');
|
|
|
|
|
|
await loadChapters(book_id);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
async function loadChapters(book_id) {
|
|
|
|
|
|
try {
|
|
|
|
|
|
const res = await fetch(`/admin/api/books/${book_id}/chapters`);
|
|
|
|
|
|
const chapters = await res.json();
|
|
|
|
|
|
const el = document.getElementById('chapter-list');
|
|
|
|
|
|
const bulkEl = document.getElementById('bulk-actions');
|
|
|
|
|
|
if (!chapters.length) {
|
|
|
|
|
|
el.innerHTML = '<p class="text-dim">暂无章节</p>';
|
|
|
|
|
|
bulkEl.style.display = 'none';
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
bulkEl.style.display = 'block';
|
|
|
|
|
|
el.innerHTML = `<table>
|
|
|
|
|
|
<tr><th>章节ID</th><th>App ID</th><th>标题</th><th>字数</th><th>状态</th><th>操作</th></tr>
|
|
|
|
|
|
${chapters.map(ch => `<tr>
|
|
|
|
|
|
<td><code>${ch.chapter_id}</code></td>
|
|
|
|
|
|
<td>${ch.app_chapter_id}</td>
|
|
|
|
|
|
<td>${ch.title || '-'}</td>
|
|
|
|
|
|
<td>${ch.text_length}</td>
|
|
|
|
|
|
<td><span class="badge badge-${ch.status}">${ch.status}</span></td>
|
|
|
|
|
|
<td class="flex" style="flex-wrap:wrap">
|
|
|
|
|
|
<button class="btn btn-sm btn-primary" onclick="editChapter('${book_id}','${ch.chapter_id}')">编辑</button>
|
|
|
|
|
|
<button class="btn btn-sm btn-success" onclick="generateOne('${book_id}','${ch.chapter_id}')">生成</button>
|
|
|
|
|
|
<button class="btn btn-sm btn-danger" onclick="deleteChapter('${book_id}','${ch.chapter_id}')">删除</button>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>`).join('')}
|
|
|
|
|
|
</table>`;
|
|
|
|
|
|
} catch(e) { toast('加载失败: ' + e.message, 'error'); }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function showAddChapter() {
|
|
|
|
|
|
document.getElementById('add-chapter-title').textContent = '添加章节';
|
|
|
|
|
|
showModal('modal-add-chapter');
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
async function addChapter() {
|
|
|
|
|
|
const chapter_id = document.getElementById('new-chapter-id').value.trim();
|
|
|
|
|
|
const app_chapter_id = document.getElementById('new-chapter-app-id').value.trim();
|
|
|
|
|
|
const title = document.getElementById('new-chapter-title').value.trim();
|
|
|
|
|
|
const text_content = document.getElementById('new-chapter-text').value.trim();
|
|
|
|
|
|
if (!chapter_id) { toast('章节ID不能为空', 'error'); return; }
|
|
|
|
|
|
try {
|
|
|
|
|
|
await fetch(`/admin/api/books/${currentBookId}/chapters`, {
|
|
|
|
|
|
method: 'POST',
|
|
|
|
|
|
headers: {'Content-Type': 'application/json'},
|
|
|
|
|
|
body: JSON.stringify({chapter_id, app_chapter_id, title, text_content})
|
|
|
|
|
|
});
|
|
|
|
|
|
closeModal('modal-add-chapter');
|
|
|
|
|
|
['new-chapter-id','new-chapter-app-id','new-chapter-title','new-chapter-text'].forEach(id => document.getElementById(id).value = '');
|
|
|
|
|
|
toast('章节添加成功');
|
|
|
|
|
|
loadChapters(currentBookId);
|
|
|
|
|
|
} catch(e) { toast(e.message, 'error'); }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
async function editChapter(book_id, chapter_id) {
|
|
|
|
|
|
document.getElementById('edit-chapter-id').value = chapter_id;
|
|
|
|
|
|
// Fetch full chapter text
|
|
|
|
|
|
const res = await fetch(`/admin/api/books/${book_id}/chapters`);
|
|
|
|
|
|
const chapters = await res.json();
|
|
|
|
|
|
const ch = chapters.find(c => c.chapter_id === chapter_id);
|
|
|
|
|
|
document.getElementById('edit-chapter-text').value = ch ? ch.text_content : '';
|
|
|
|
|
|
showModal('modal-edit-chapter');
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
async function saveChapterText() {
|
|
|
|
|
|
const chapter_id = document.getElementById('edit-chapter-id').value;
|
|
|
|
|
|
const text_content = document.getElementById('edit-chapter-text').value;
|
|
|
|
|
|
try {
|
|
|
|
|
|
await fetch(`/admin/api/books/${currentBookId}/chapters/${chapter_id}`, {
|
|
|
|
|
|
method: 'PUT',
|
|
|
|
|
|
headers: {'Content-Type': 'application/json'},
|
|
|
|
|
|
body: JSON.stringify({text_content})
|
|
|
|
|
|
});
|
|
|
|
|
|
closeModal('modal-edit-chapter');
|
|
|
|
|
|
toast('文本已保存');
|
|
|
|
|
|
loadChapters(currentBookId);
|
|
|
|
|
|
} catch(e) { toast(e.message, 'error'); }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
async function deleteChapter(book_id, chapter_id) {
|
|
|
|
|
|
if (!confirm(`确定删除章节 ${chapter_id}？`)) return;
|
|
|
|
|
|
await fetch(`/admin/api/books/${book_id}/chapters/${chapter_id}`, {method: 'DELETE'});
|
|
|
|
|
|
toast('已删除');
|
|
|
|
|
|
loadChapters(book_id);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ── TTS Generation ──
|
|
|
|
|
|
async function generateOne(book_id, chapter_id) {
|
|
|
|
|
|
const btn = event.target;
|
|
|
|
|
|
btn.disabled = true;
|
|
|
|
|
|
btn.textContent = '生成中...';
|
|
|
|
|
|
try {
|
|
|
|
|
|
const res = await fetch(`/admin/api/books/${book_id}/chapters/${chapter_id}/generate`, {method: 'POST'});
|
|
|
|
|
|
const data = await res.json();
|
|
|
|
|
|
if (data.status === 'ready') toast('音频生成成功！');
|
|
|
|
|
|
else toast('生成失败: ' + (data.error_msg || '未知错误'), 'error');
|
|
|
|
|
|
loadChapters(book_id);
|
|
|
|
|
|
} catch(e) { toast('生成失败: ' + e.message, 'error'); }
|
|
|
|
|
|
btn.disabled = false;
|
|
|
|
|
|
btn.textContent = '生成';
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
async function generateAll() {
|
|
|
|
|
|
if (!confirm('确定批量生成所有未就绪章节的音频？这可能需要较长时间。')) return;
|
|
|
|
|
|
try {
|
|
|
|
|
|
toast('开始批量生成...');
|
|
|
|
|
|
const res = await fetch(`/admin/api/books/${currentBookId}/generate-all`, {method: 'POST'});
|
|
|
|
|
|
const data = await res.json();
|
|
|
|
|
|
toast(`批量生成完成，共 ${data.total} 章`);
|
|
|
|
|
|
loadChapters(currentBookId);
|
|
|
|
|
|
} catch(e) { toast('批量生成失败: ' + e.message, 'error'); }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ── Preview ──
|
|
|
|
|
|
async function doPreview() {
|
|
|
|
|
|
const text = document.getElementById('preview-text').value.trim();
|
|
|
|
|
|
const style = document.getElementById('preview-style').value.trim();
|
2026-03-27 14:37:43 +08:00
|
|
|
|
const voice = document.getElementById('preview-voice').value.trim();
|
2026-03-27 13:41:07 +08:00
|
|
|
|
if (!text) { toast('请输入文本', 'error'); return; }
|
|
|
|
|
|
const btn = document.getElementById('preview-btn');
|
|
|
|
|
|
btn.disabled = true;
|
|
|
|
|
|
btn.textContent = '⏳ 生成中...';
|
|
|
|
|
|
try {
|
|
|
|
|
|
const res = await fetch('/admin/api/tts/preview', {
|
|
|
|
|
|
method: 'POST',
|
|
|
|
|
|
headers: {'Content-Type': 'application/json'},
|
2026-03-27 14:37:43 +08:00
|
|
|
|
body: JSON.stringify({text, style, voice})
|
2026-03-27 13:41:07 +08:00
|
|
|
|
});
|
|
|
|
|
|
const data = await res.json();
|
|
|
|
|
|
if (data.ok) {
|
|
|
|
|
|
document.getElementById('preview-result').style.display = 'block';
|
|
|
|
|
|
document.getElementById('preview-audio').src = data.url;
|
|
|
|
|
|
document.getElementById('preview-audio').play();
|
|
|
|
|
|
toast('试听生成成功');
|
|
|
|
|
|
} else {
|
|
|
|
|
|
toast('生成失败', 'error');
|
|
|
|
|
|
}
|
|
|
|
|
|
} catch(e) { toast('生成失败: ' + e.message, 'error'); }
|
|
|
|
|
|
btn.disabled = false;
|
|
|
|
|
|
btn.textContent = '🔊 生成试听';
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ── Settings ──
|
|
|
|
|
|
async function loadSettings() {
|
|
|
|
|
|
try {
|
|
|
|
|
|
const res = await fetch('/admin/api/config');
|
|
|
|
|
|
const cfg = await res.json();
|
|
|
|
|
|
document.getElementById('cfg-endpoint').textContent = cfg.endpoint || '-';
|
|
|
|
|
|
document.getElementById('cfg-model').textContent = cfg.model || '-';
|
|
|
|
|
|
document.getElementById('cfg-voice').textContent = cfg.voice || '-';
|
|
|
|
|
|
document.getElementById('cfg-apikey').textContent = cfg.api_key_masked || '未配置';
|
|
|
|
|
|
} catch(e) {
|
|
|
|
|
|
document.getElementById('cfg-apikey').textContent = '加载失败';
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ── Init ──
|
|
|
|
|
|
loadBooks();
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
