caojunfei
/
audio_codebuddy


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TTS 队列管理后台</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f0f2f5; color: #333; min-height: 100vh; }
.container { max-width: 1200px; margin: 0 auto; padding: 24px; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
header h1 { font-size: 22px; color: #1a1a1a; }
.header-actions { display: flex; gap: 10px; }
button { cursor: pointer; border: none; border-radius: 6px; padding: 8px 18px; font-size: 14px; font-weight: 500; transition: all .2s; display: inline-flex; align-items: center; gap: 6px; }
button:active { transform: scale(.97); }
.btn-primary { background: #1677ff; color: #fff; }
.btn-primary:hover { background: #4096ff; }
.btn-danger { background: #ff4d4f; color: #fff; }
.btn-danger:hover { background: #ff7875; }
.btn-default { background: #fff; color: #333; border: 1px solid #d9d9d9; }
.btn-default:hover { border-color: #1677ff; color: #1677ff; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-success { background: #52c41a; color: #fff; }
.btn-success:hover { background: #73d13d; }
.btn-warning { background: #faad14; color: #fff; }
.btn-warning:hover { background: #ffc53d; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.08); text-align: center; }
.stat-card .count { font-size: 32px; font-weight: 700; }
.stat-card .label { font-size: 13px; color: #888; margin-top: 4px; }
.stat-card.pending .count { color: #faad14; }
.stat-card.processing .count { color: #1677ff; }
.stat-card.completed .count { color: #52c41a; }
.stat-card.failed .count { color: #ff4d4f; }
.stat-card.running { border: 2px solid #52c41a; }
.stat-card.stopped { border: 2px solid #ff4d4f; }
.card { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom: 20px; }
.card-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; color: #1a1a1a; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 13px; color: #666; font-weight: 500; }
.form-group input, .form-group textarea, .form-group select { padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 6px; font-size: 14px; outline: none; transition: border-color .2s; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: #1677ff; }
.form-group textarea { resize: vertical; min-height: 60px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
th { background: #fafafa; font-weight: 600; color: #666; white-space: nowrap; }
tr:hover td { background: #fafafa; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 500; }
.badge-pending { background: #fff7e6; color: #d48806; }
.badge-processing { background: #e6f4ff; color: #0958d9; }
.badge-completed { background: #f6ffed; color: #389e0d; }
.badge-failed { background: #fff1f0; color: #cf1322; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.status-dot.running { background: #52c41a; animation: pulse 1.5s infinite; }
.status-dot.stopped { background: #d9d9d9; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.empty { text-align: center; padding: 40px; color: #999; font-size: 14px; }
.toast { position: fixed; top: 20px; right: 20px; padding: 12px 20px; border-radius: 8px; color: #fff; font-size: 14px; z-index: 1000; animation: slideIn .3s ease; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.toast-success { background: #52c41a; }
.toast-error { background: #ff4d4f; }
.toast-info { background: #1677ff; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.tabs { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 2px solid #f0f0f0; }
.tab { padding: 8px 16px; cursor: pointer; font-size: 14px; color: #666; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .2s; }
.tab:hover { color: #1677ff; }
.tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 500; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 16px; }
.voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.voice-option { padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 6px; cursor: pointer; text-align: center; font-size: 13px; transition: all .2s; }
.voice-option:hover { border-color: #1677ff; }
.voice-option.selected { border-color: #1677ff; background: #e6f4ff; color: #1677ff; font-weight: 500; }
.text-truncate { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
</style>
</head>
<body>
<div class="container">
  <header>
    <h1>🎙️ TTS 队列管理后台</h1>
    <div class="header-actions">
      <button class="btn-success" id="btnStart" onclick="startQueue()">▶ 启动队列</button>
      <button class="btn-warning" id="btnStop" onclick="stopQueue()">⏸ 停止队列</button>
      <button class="btn-danger btn-sm" onclick="clearPending()">🗑 清空待处理</button>
    </div>
  </header>

  <!-- 状态卡片 -->
  <div class="stats-grid" id="statsGrid">
    <div class="stat-card" id="statusCard">
      <div class="count" id="runningStatus">⏳</div>
      <div class="label">队列状态</div>
    </div>
    <div class="stat-card pending"><div class="count" id="countPending">0</div><div class="label">待处理</div></div>
    <div class="stat-card processing"><div class="count" id="countProcessing">0</div><div class="label">处理中</div></div>
    <div class="stat-card completed"><div class="count" id="countCompleted">0</div><div class="label">已完成</div></div>
    <div class="stat-card failed"><div class="count" id="countFailed">0</div><div class="label">失败</div></div>
  </div>

  <!-- 添加任务 -->
  <div class="card">
    <div class="card-title">📝 添加 TTS 任务</div>
    <div class="form-row">
      <div class="form-group" style="flex:2; min-width:250px;">
        <label>文本内容</label>
        <textarea id="taskText" placeholder="输入要转换的文字..."></textarea>
      </div>
      <div class="form-group" style="flex:1; min-width:120px;">
        <label>语速</label>
        <input type="number" id="taskSpeed" value="1.0" step="0.1" min="0.5" max="2.0">
      </div>
      <div class="form-group" style="flex:1; min-width:120px;">
        <label>音量</label>
        <input type="number" id="taskVolume" value="50" min="0" max="100">
      </div>
      <div class="form-group" style="align-self:flex-end;">
        <button class="btn-primary" onclick="addTask()">➕ 加入队列</button>
      </div>
    </div>
    <div style="margin-top:12px;">
      <label style="font-size:13px;color:#666;font-weight:500;display:block;margin-bottom:6px;">选择音色</label>
      <div class="voice-grid" id="voiceGrid"></div>
      <input type="hidden" id="taskVoiceId" value="cherry">
    </div>
  </div>

  <!-- 任务列表 -->
  <div class="card">
    <div class="card-title">📋 任务列表</div>
    <div class="tabs">
      <div class="tab active" data-status="" onclick="switchTab('')">全部</div>
      <div class="tab" data-status="pending" onclick="switchTab('pending')">待处理</div>
      <div class="tab" data-status="processing" onclick="switchTab('processing')">处理中</div>
      <div class="tab" data-status="completed" onclick="switchTab('completed')">已完成</div>
      <div class="tab" data-status="failed" onclick="switchTab('failed')">失败</div>
    </div>
    <div id="taskTable" style="overflow-x:auto;">
      <table><thead><tr><th>ID</th><th>标题</th><th>字数</th><th>音色</th><th>状态</th><th>时长</th><th>创建时间</th><th>操作</th></tr></thead>
      <tbody id="taskTbody"><tr><td colspan="8" class="empty">加载中...</td></tr></tbody></table>
    </div>
    <div class="pagination" id="pagination"></div>
  </div>
</div>

<script>
const API = '/api/queue';
const VOICES = [
  { id: 'cherry', name: '芊悦', gender: 'female' },
  { id: 'serena', name: '苏瑶', gender: 'female' },
  { id: 'ethan', name: '晨煦', gender: 'male' },
  { id: 'chelsie', name: '千雪', gender: 'female' },
  { id: 'momo', name: '茉兔', gender: 'female' },
  { id: 'vivian', name: '十三', gender: 'female' },
  { id: 'moon', name: '月白', gender: 'male' },
  { id: 'maia', name: '四月', gender: 'female' },
  { id: 'kai', name: '凯', gender: 'male' },
  { id: 'nofish', name: '不吃鱼', gender: 'male' },
];

let currentTab = '';
let currentPage = 1;

function initVoices() {
  const grid = document.getElementById('voiceGrid');
  grid.innerHTML = VOICES.map(v =>
    `<div class="voice-option ${v.id === 'cherry' ? 'selected' : ''}" data-voice="${v.id}" onclick="selectVoice('${v.id}', this)">
      ${v.name} <span style="font-size:11px;color:#999;">${v.gender === 'female' ? '♀' : '♂'}</span>
    </div>`
  ).join('');
}

function selectVoice(voiceId, el) {
  document.getElementById('taskVoiceId').value = voiceId;
  document.querySelectorAll('.voice-option').forEach(o => o.classList.remove('selected'));
  el.classList.add('selected');
}

function toast(msg, type = 'info') {
  const t = document.createElement('div');
  t.className = 'toast toast-' + type;
  t.textContent = msg;
  document.body.appendChild(t);
  setTimeout(() => { t.remove(); }, 2500);
}

async function api(url, opts = {}) {
  const res = await fetch(url, { headers: { 'Content-Type': 'application/json' }, ...opts });
  const data = await res.json();
  if (data.code !== 0) throw new Error(data.message || '请求失败');
  return data.data;
}

async function refreshStatus() {
  try {
    const data = await api(API + '/status');
    const running = data.running;
    document.getElementById('runningStatus').innerHTML = running
      ? '<span class="status-dot running"></span>运行中'
      : '<span class="status-dot stopped"></span>已停止';
    const statusCard = document.getElementById('statusCard');
    statusCard.className = 'stat-card ' + (running ? 'running' : 'stopped');
    document.getElementById('btnStart').style.display = running ? 'none' : '';
    document.getElementById('btnStop').style.display = running ? '' : 'none';
    document.getElementById('countPending').textContent = data.pending;
    document.getElementById('countProcessing').textContent = data.processing;
    document.getElementById('countCompleted').textContent = data.completed;
    document.getElementById('countFailed').textContent = data.failed;
  } catch (e) { console.error(e); }
}

async function refreshTasks() {
  try {
    const params = new URLSearchParams({ page: currentPage, pageSize: 15 });
    if (currentTab) params.set('status', currentTab);
    const data = await api(API + '/tasks?' + params);
    const tbody = document.getElementById('taskTbody');
    if (data.list.length === 0) {
      tbody.innerHTML = '<tr><td colspan="8" class="empty">暂无任务</td></tr>';
    } else {
      tbody.innerHTML = data.list.map(t => {
        const title = t.title || '(无标题)';
        const createdAt = new Date(t.createdAt).toLocaleString('zh-CN');
        const duration = t.audioDuration ? Math.floor(t.audioDuration / 60) + '分' + (t.audioDuration % 60) + '秒' : '-';
        let actions = '';
        if (t.status === 'pending') {
          actions = `<button class="btn-danger btn-sm" onclick="deleteTask('${t.audioId}')">删除</button>`;
        } else if (t.status !== 'processing') {
          actions = `<button class="btn-danger btn-sm" onclick="deleteTask('${t.audioId}')">删除</button>`;
        }
        return `<tr>
          <td>${t.id}</td>
          <td class="text-truncate" title="${escapeHtml(title)}">${escapeHtml(title)}</td>
          <td>${t.wordCount || 0}</td>
          <td>${t.voiceId || '-'}</td>
          <td><span class="badge badge-${t.status}">${statusLabel(t.status)}</span></td>
          <td>${duration}</td>
          <td>${createdAt}</td>
          <td>${actions}</td>
        </tr>`;
      }).join('');
    }
    renderPagination(data.total, data.pageSize);
  } catch (e) { console.error(e); }
}

function statusLabel(s) {
  const map = { pending: '待处理', processing: '处理中', completed: '已完成', failed: '失败' };
  return map[s] || s;
}

function escapeHtml(s) { return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }

function renderPagination(total, pageSize) {
  const totalPages = Math.ceil(total / pageSize);
  const pag = document.getElementById('pagination');
  if (totalPages <= 1) { pag.innerHTML = ''; return; }
  let html = '';
  html += `<button class="btn-default btn-sm" ${currentPage <= 1 ? 'disabled' : ''} onclick="goPage(${currentPage - 1})">上一页</button>`;
  for (let i = 1; i <= totalPages; i++) {
    html += `<button class="btn-default btn-sm" style="${i === currentPage ? 'background:#1677ff;color:#fff;' : ''}" onclick="goPage(${i})">${i}</button>`;
  }
  html += `<button class="btn-default btn-sm" ${currentPage >= totalPages ? 'disabled' : ''} onclick="goPage(${currentPage + 1})">下一页</button>`;
  pag.innerHTML = html;
}

function goPage(p) { currentPage = p; refreshTasks(); }

function switchTab(status) {
  currentTab = status;
  currentPage = 1;
  document.querySelectorAll('.tab').forEach(t => t.classList.toggle('active', t.dataset.status === status));
  refreshTasks();
}

async function addTask() {
  const text = document.getElementById('taskText').value.trim();
  const voiceId = document.getElementById('taskVoiceId').value;
  const speed = parseFloat(document.getElementById('taskSpeed').value);
  const volume = parseInt(document.getElementById('taskVolume').value);
  if (!text) return toast('请输入文本内容', 'error');
  try {
    await api(API + '/task', {
      method: 'POST',
      body: JSON.stringify({ text, voiceId, voiceParams: { speed, volume } }),
    });
    toast('任务已加入队列', 'success');
    document.getElementById('taskText').value = '';
    refreshStatus();
    refreshTasks();
  } catch (e) { toast(e.message, 'error'); }
}

async function deleteTask(audioId) {
  if (!confirm('确定删除此任务？')) return;
  try {
    await api(API + '/task/' + audioId, { method: 'DELETE' });
    toast('任务已删除', 'success');
    refreshStatus();
    refreshTasks();
  } catch (e) { toast(e.message, 'error'); }
}

async function startQueue() {
  try {
    const data = await api(API + '/start', { method: 'POST' });
    toast(data.message, 'success');
    refreshStatus();
    refreshTasks();
  } catch (e) { toast(e.message, 'error'); }
}

async function stopQueue() {
  try {
    const data = await api(API + '/stop', { method: 'POST' });
    toast(data.message, 'success');
    refreshStatus();
    refreshTasks();
  } catch (e) { toast(e.message, 'error'); }
}

async function clearPending() {
  if (!confirm('确定清空所有待处理任务？')) return;
  try {
    const data = await api(API + '/tasks', { method: 'DELETE' });
    toast('已清空 ' + data.deleted + ' 个待处理任务', 'success');
    refreshStatus();
    refreshTasks();
  } catch (e) { toast(e.message, 'error'); }
}

initVoices();
refreshStatus();
refreshTasks();
setInterval(refreshStatus, 5000);
setInterval(refreshTasks, 8000);
</script>
</body>
</html>