2026-08-29 21:53:19 +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 · 管理后台</title>
|
|
|
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.21/vue.global.prod.js"></script>
|
|
|
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.7/axios.min.js"></script>
|
|
|
|
|
<style>
|
|
|
|
|
:root {
|
|
|
|
|
--bg: #0b0f1a;
|
|
|
|
|
--bg-card: #131826;
|
|
|
|
|
--bg-elev: #1a2138;
|
|
|
|
|
--border: #232b42;
|
|
|
|
|
--text: #e4e7ee;
|
|
|
|
|
--text-dim: #8a92a6;
|
|
|
|
|
--text-mute: #5a6275;
|
|
|
|
|
--accent: #00d4ff;
|
|
|
|
|
--accent-2: #7b2ff7;
|
|
|
|
|
--success: #22c55e;
|
|
|
|
|
--warning: #f59e0b;
|
|
|
|
|
--danger: #ef4444;
|
|
|
|
|
}
|
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
|
body {
|
|
|
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
|
|
|
background: var(--bg); color: var(--text);
|
|
|
|
|
min-height: 100vh; padding: 24px; font-size: 14px;
|
|
|
|
|
background-image:
|
|
|
|
|
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0,212,255,0.08), transparent),
|
|
|
|
|
radial-gradient(ellipse 60% 40% at 80% 100%, rgba(123,47,247,0.06), transparent);
|
|
|
|
|
}
|
|
|
|
|
#app { max-width: 1100px; margin: 0 auto; }
|
|
|
|
|
|
|
|
|
|
.login {
|
|
|
|
|
max-width: 420px; margin: 100px auto; padding: 32px;
|
|
|
|
|
background: var(--bg-card); border: 1px solid var(--border);
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
}
|
|
|
|
|
.login h1 { font-size: 20px; margin-bottom: 8px; }
|
|
|
|
|
.login .sub { color: var(--text-dim); font-size: 12px; margin-bottom: 24px; }
|
|
|
|
|
.login input {
|
|
|
|
|
width: 100%; padding: 10px 12px; margin-bottom: 12px;
|
|
|
|
|
background: var(--bg-elev); border: 1px solid var(--border);
|
|
|
|
|
color: var(--text); border-radius: 8px; font-size: 13px;
|
|
|
|
|
}
|
|
|
|
|
.login input:focus { outline: none; border-color: var(--accent); }
|
|
|
|
|
.login button {
|
|
|
|
|
width: 100%; padding: 10px; background: var(--accent); color: #00121a;
|
|
|
|
|
border: none; border-radius: 8px; font-weight: 500; cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.login button:disabled { background: var(--text-mute); cursor: not-allowed; }
|
|
|
|
|
.login .err { color: var(--danger); font-size: 12px; margin-top: 8px; }
|
|
|
|
|
|
|
|
|
|
.header {
|
|
|
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
|
|
|
margin-bottom: 24px; flex-wrap: wrap; gap: 16px;
|
|
|
|
|
}
|
|
|
|
|
.header-left { display: flex; align-items: center; gap: 12px; }
|
|
|
|
|
.logo {
|
|
|
|
|
width: 40px; height: 40px; border-radius: 10px;
|
|
|
|
|
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
|
|
|
|
display: flex; align-items: center; justify-content: center;
|
|
|
|
|
font-weight: 700; font-size: 16px; color: #fff;
|
|
|
|
|
}
|
|
|
|
|
.header h1 { font-size: 18px; }
|
|
|
|
|
.header .sub { font-size: 11px; color: var(--text-dim); }
|
|
|
|
|
|
|
|
|
|
.tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
|
|
|
|
|
.tab {
|
|
|
|
|
padding: 8px 16px; cursor: pointer; color: var(--text-dim);
|
|
|
|
|
font-size: 13px; border-bottom: 2px solid transparent;
|
|
|
|
|
margin-bottom: -1px; transition: all 0.2s;
|
|
|
|
|
}
|
|
|
|
|
.tab:hover { color: var(--text); }
|
|
|
|
|
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
|
|
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
|
background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
|
|
|
|
|
padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px;
|
|
|
|
|
display: inline-flex; align-items: center; gap: 4px;
|
|
|
|
|
}
|
|
|
|
|
.btn:hover { border-color: var(--accent); }
|
|
|
|
|
.btn-primary { background: var(--accent); color: #00121a; border-color: var(--accent); font-weight: 500; }
|
|
|
|
|
.btn-primary:hover { background: #33ddff; }
|
|
|
|
|
.btn-danger { color: var(--danger); border-color: var(--border); }
|
|
|
|
|
.btn-danger:hover { border-color: var(--danger); }
|
|
|
|
|
|
|
|
|
|
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 18px; margin-bottom: 12px; }
|
|
|
|
|
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
|
|
|
|
|
.stat-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
|
|
|
|
|
.stat-value { font-size: 24px; font-weight: 700; margin-top: 4px; }
|
|
|
|
|
.stat-value.accent { color: var(--accent); }
|
|
|
|
|
.stat-value.success { color: var(--success); }
|
|
|
|
|
|
|
|
|
|
.table { width: 100%; border-collapse: collapse; }
|
|
|
|
|
.table th, .table td {
|
|
|
|
|
text-align: left; padding: 8px 10px; font-size: 12px;
|
|
|
|
|
border-bottom: 1px solid var(--border);
|
|
|
|
|
}
|
|
|
|
|
.table th { color: var(--text-dim); font-weight: 500; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; }
|
|
|
|
|
.table tr:last-child td { border-bottom: none; }
|
|
|
|
|
.table .name { font-family: "SF Mono", Monaco, monospace; color: var(--accent); }
|
|
|
|
|
.table .mono { font-family: "SF Mono", Monaco, monospace; color: var(--text-dim); }
|
|
|
|
|
.empty { color: var(--text-mute); text-align: center; padding: 32px; font-size: 12px; }
|
|
|
|
|
|
|
|
|
|
/* switch */
|
|
|
|
|
.switch { position: relative; display: inline-block; width: 36px; height: 20px; cursor: pointer; }
|
|
|
|
|
.switch input { opacity: 0; width: 0; height: 0; }
|
|
|
|
|
.slider { position: absolute; inset: 0; background: var(--bg-elev); border-radius: 20px; transition: 0.2s; border: 1px solid var(--border); }
|
|
|
|
|
.slider::before { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; background: var(--text-dim); border-radius: 50%; transition: 0.2s; }
|
|
|
|
|
.switch input:checked + .slider { background: var(--success); border-color: var(--success); }
|
|
|
|
|
.switch input:checked + .slider::before { transform: translateX(16px); background: #fff; }
|
|
|
|
|
|
|
|
|
|
/* modal */
|
|
|
|
|
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; }
|
|
|
|
|
.modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 24px; width: 480px; max-width: 90vw; }
|
|
|
|
|
.modal h2 { font-size: 16px; margin-bottom: 16px; }
|
|
|
|
|
.modal label { display: block; font-size: 11px; color: var(--text-dim); margin-top: 12px; margin-bottom: 4px; }
|
|
|
|
|
.modal input, .modal select, .modal textarea {
|
|
|
|
|
width: 100%; padding: 8px 10px; background: var(--bg-elev); border: 1px solid var(--border);
|
|
|
|
|
color: var(--text); border-radius: 6px; font-size: 12px; font-family: inherit;
|
|
|
|
|
}
|
|
|
|
|
.modal .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
|
|
|
|
|
.err { color: var(--danger); font-size: 12px; margin-top: 8px; }
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app">
|
|
|
|
|
<!-- Login -->
|
|
|
|
|
<div v-if="!apiKey" class="login">
|
|
|
|
|
<h1>火山 TTS · 管理后台</h1>
|
|
|
|
|
<div class="sub">输入 OPENAI_TTS_API_KEY 登录</div>
|
|
|
|
|
<input v-model="keyInput" type="password" placeholder="API Key" @keyup.enter="login" autofocus>
|
|
|
|
|
<button @click="login" :disabled="!keyInput">登录</button>
|
|
|
|
|
<div v-if="loginErr" class="err">{{ loginErr }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Main -->
|
|
|
|
|
<div v-else>
|
|
|
|
|
<div class="header">
|
|
|
|
|
<div class="header-left">
|
|
|
|
|
<div class="logo">TTS</div>
|
|
|
|
|
<div>
|
|
|
|
|
<h1>管理后台</h1>
|
|
|
|
|
<div class="sub">火山 TTS 聚合平台 · 模式: {{ overview.mode }} · v{{ overview.version }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; gap: 8px; align-items: center;">
|
|
|
|
|
<button class="btn" @click="reloadAll">刷新</button>
|
|
|
|
|
<button class="btn" @click="logout">登出</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="tabs">
|
|
|
|
|
<div class="tab" :class="{active: tab==='dashboard'}" @click="tab='dashboard'">仪表盘</div>
|
|
|
|
|
<div class="tab" :class="{active: tab==='voices'}" @click="tab='voices'">音色</div>
|
2026-08-29 22:40:53 +08:00
|
|
|
<div class="tab" :class="{active: tab==='settings'}" @click="tab='settings'">设置</div>
|
2026-08-29 21:53:19 +08:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Dashboard -->
|
|
|
|
|
<div v-if="tab==='dashboard'">
|
|
|
|
|
<div class="stats">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="stat-label">模式</div>
|
|
|
|
|
<div class="stat-value" :class="overview.installed ? 'success' : 'accent'">{{ overview.mode }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="stat-label">音色数</div>
|
|
|
|
|
<div class="stat-value accent">{{ overview.voice_count }}</div>
|
|
|
|
|
<div style="font-size: 11px; color: var(--text-mute); margin-top: 4px;">{{ overview.voice_enabled_count }} 启用</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="stat-label">运行时间</div>
|
|
|
|
|
<div class="stat-value">{{ formatUptime(overview.uptime_seconds) }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="stat-label">数据库</div>
|
|
|
|
|
<div class="stat-value" style="font-size: 13px; word-break: break-all;">{{ shortPath(overview.db_path) || '—' }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div style="font-size: 12px; color: var(--text-dim); margin-bottom: 6px;">Commit</div>
|
|
|
|
|
<div class="mono" style="font-size: 13px;">{{ overview.commit || 'dev' }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Voices -->
|
|
|
|
|
<div v-if="tab==='voices'">
|
|
|
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
|
|
|
|
|
<div style="color: var(--text-dim); font-size: 12px;">共 {{ voices.length }} 条</div>
|
|
|
|
|
<button class="btn btn-primary" @click="openAdd">+ 新增音色</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card" style="padding: 0;">
|
|
|
|
|
<table class="table" v-if="voices.length">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>名称</th>
|
|
|
|
|
<th>Speaker</th>
|
|
|
|
|
<th>资源 ID</th>
|
|
|
|
|
<th>Model</th>
|
|
|
|
|
<th>启用</th>
|
|
|
|
|
<th style="width: 100px;">操作</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr v-for="v in voices" :key="v.name">
|
|
|
|
|
<td class="name">{{ v.name }}</td>
|
|
|
|
|
<td class="mono">{{ v.speaker }}</td>
|
|
|
|
|
<td class="mono">{{ v.resource_id }}</td>
|
|
|
|
|
<td class="mono">{{ v.model || '—' }}</td>
|
|
|
|
|
<td>
|
|
|
|
|
<label class="switch">
|
|
|
|
|
<input type="checkbox" :checked="v.enabled" @change="toggle(v)">
|
|
|
|
|
<span class="slider"></span>
|
|
|
|
|
</label>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<button class="btn btn-danger" @click="remove(v)">删除</button>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
<div v-else class="empty">还没有音色。点击右上角"新增音色"开始添加。</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-08-29 22:40:53 +08:00
|
|
|
<!-- Settings -->
|
|
|
|
|
<div v-if="tab==='settings'">
|
|
|
|
|
<div class="card">
|
2026-08-29 23:18:51 +08:00
|
|
|
<div class="card-title">鉴权 Key (登录 + 客户端调用)</div>
|
|
|
|
|
<div class="card-desc" style="color: var(--text-dim); font-size: 12px; margin-bottom: 16px;">客户端用这个 Key 调 <code>/v1/audio/speech</code>,也是登录 <code>/admin</code> 的密码。改完下一次请求立即生效(改完会被当前会话自踢,需重新登录)。</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label>当前 Key (打码: <span style="color: var(--accent); font-family: monospace;">{{ settings.auth_key || '(未设置)' }}</span>)</label>
|
|
|
|
|
<div style="display: flex; gap: 8px;">
|
|
|
|
|
<input type="password" v-model="authKeyInput" :placeholder="settings.auth_key_set ? '不改留空' : '输入新 Key'" style="flex: 1;">
|
|
|
|
|
<button class="btn btn-primary" @click="saveAuthKey" :disabled="!authKeyInput">更新 Key</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="hint">独立端点 /api/settings/auth-key。改了之后,你的浏览器 401 自动跳回登录页,用新 Key 重登。</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="card-title">火山 TTS 上游凭证</div>
|
|
|
|
|
<div class="card-desc" style="color: var(--text-dim); font-size: 12px; margin-bottom: 16px;">调火山 v3 上游用的凭证。改完点保存,立即生效,无需重启服务。</div>
|
2026-08-29 22:40:53 +08:00
|
|
|
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label>API Key (打码显示: <span style="color: var(--accent); font-family: monospace;">{{ settings.api_key || '(未设置)' }}</span>)</label>
|
|
|
|
|
<div style="display: flex; gap: 8px;">
|
|
|
|
|
<input type="password" v-model="apiKeyInput" :placeholder="settings.api_key_set ? '不改留空' : '输入新 API Key'" style="flex: 1;">
|
|
|
|
|
<button class="btn btn-primary" @click="saveApiKey" :disabled="!apiKeyInput">更新 Key</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="hint">独立端点 /api/settings/api-key,与其他字段分开传输</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="height: 1px; background: var(--border); margin: 20px 0;"></div>
|
|
|
|
|
|
|
|
|
|
<div class="card-title" style="font-size: 13px;">路由与格式</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label>默认资源 ID</label>
|
|
|
|
|
<input v-model="settingsForm.default_resource_id" placeholder="volc.megatts.default">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label>默认音色 (name)</label>
|
|
|
|
|
<select v-model="settingsForm.default_speaker">
|
|
|
|
|
<option value="">—</option>
|
|
|
|
|
<option v-for="v in voices" :key="v.name" :value="v.name">{{ v.name }} ({{ v.speaker }})</option>
|
|
|
|
|
</select>
|
|
|
|
|
<div class="hint">未传 voice 时使用。必须是"音色" tab 里存在的 name</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label>默认输出格式</label>
|
|
|
|
|
<select v-model="settingsForm.default_format">
|
|
|
|
|
<option value="mp3">mp3</option>
|
|
|
|
|
<option value="wav">wav</option>
|
|
|
|
|
<option value="opus">opus (ogg_opus)</option>
|
|
|
|
|
<option value="pcm">pcm</option>
|
|
|
|
|
<option value="aac">aac</option>
|
|
|
|
|
<option value="flac">flac</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label>采样率 (Hz)</label>
|
|
|
|
|
<input type="number" v-model.number="settingsForm.sample_rate" min="8000" max="48000" step="1000">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label>Model (可选)</label>
|
|
|
|
|
<input v-model="settingsForm.model" placeholder="seed-tts-2.0-standard">
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="settingsErr" class="err">{{ settingsErr }}</div>
|
|
|
|
|
<div v-if="settingsOk" class="ok" style="color: var(--success); font-size: 12px; margin-top: 8px;">✓ 已保存,运行时已 reload</div>
|
|
|
|
|
<div style="margin-top: 16px;">
|
|
|
|
|
<button class="btn btn-primary" @click="saveSettings" :disabled="savingSettings">{{ savingSettings ? '保存中...' : '保存设置' }}</button>
|
|
|
|
|
<button class="btn" @click="resetSettingsForm" style="margin-left: 8px;">重置</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-08-30 00:08:14 +08:00
|
|
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="card-title">跨域 CORS</div>
|
|
|
|
|
<div class="card-desc" style="color: var(--text-dim); font-size: 12px; margin-bottom: 16px;">
|
|
|
|
|
控制哪些前端域名能跨域调 <code>/v1/audio/speech</code>。同源始终放行。
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
|
|
|
|
<input type="checkbox" v-model="corsForm.allow_all">
|
|
|
|
|
<span>允许所有来源(<code>*</code>)</span>
|
|
|
|
|
</label>
|
|
|
|
|
<div class="hint">勾上后下面白名单失效。仅测试用</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label>允许的来源 (一行一个,如 <code>https://app.example.com</code>)</label>
|
|
|
|
|
<textarea v-model="corsForm.origins" rows="3" placeholder="https://app.example.com" style="width: 100%; font-family: monospace; font-size: 12px; padding: 8px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px;"></textarea>
|
|
|
|
|
<div class="hint">当前: <span style="color: var(--accent);">{{ corsCurrentLabel }}</span></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="corsErr" class="err">{{ corsErr }}</div>
|
|
|
|
|
<div v-if="corsOk" class="ok" style="color: var(--success); font-size: 12px; margin-top: 8px;">✓ 已保存,跨域请求从下个请求开始按新配置</div>
|
|
|
|
|
<div style="margin-top: 16px;">
|
|
|
|
|
<button class="btn btn-primary" @click="saveCors" :disabled="savingCors">{{ savingCors ? '保存中...' : '保存 CORS' }}</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- CORS 未配置 banner (登录后顶部,除非在 settings 页) -->
|
|
|
|
|
<div v-if="settings && !settings.cors_configured && tab !== 'settings'" class="card" style="background: rgba(255, 193, 7, 0.08); border-color: #ffc107; margin-bottom: 16px;">
|
|
|
|
|
<div style="display: flex; align-items: center; gap: 12px;">
|
|
|
|
|
<span style="font-size: 18px;">⚠</span>
|
|
|
|
|
<div style="flex: 1;">
|
|
|
|
|
<div style="font-weight: 600;">跨域 CORS 未配置</div>
|
|
|
|
|
<div style="color: var(--text-dim); font-size: 12px; margin-top: 2px;">同源可用,跨域会 403。<code>设置 → 跨域 CORS</code> 配。</div>
|
|
|
|
|
</div>
|
|
|
|
|
<button class="btn" @click="tab='settings'">去设置</button>
|
|
|
|
|
</div>
|
2026-08-29 22:40:53 +08:00
|
|
|
</div>
|
|
|
|
|
|
2026-08-29 21:53:19 +08:00
|
|
|
<div v-if="actionErr" class="err" style="margin-top: 16px;">⚠ {{ actionErr }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Add voice modal -->
|
|
|
|
|
<div v-if="showAdd" class="modal-bg" @click.self="showAdd=false">
|
|
|
|
|
<div class="modal">
|
|
|
|
|
<h2>新增音色</h2>
|
|
|
|
|
<label>对外名 (voice) *</label>
|
|
|
|
|
<input v-model="form.name" placeholder="qian">
|
|
|
|
|
<label>Speaker (火山音色 ID) *</label>
|
|
|
|
|
<input v-model="form.speaker" placeholder="S_xxx">
|
|
|
|
|
<label>资源 ID *</label>
|
|
|
|
|
<input v-model="form.resource_id" placeholder="volc.megatts.icl">
|
|
|
|
|
<label>Model</label>
|
|
|
|
|
<input v-model="form.model" placeholder="seed-tts-2.0-standard">
|
|
|
|
|
<label>Language</label>
|
|
|
|
|
<input v-model="form.language" placeholder="zh">
|
|
|
|
|
<label>Description</label>
|
|
|
|
|
<input v-model="form.description" placeholder="可选">
|
|
|
|
|
<div v-if="addErr" class="err">{{ addErr }}</div>
|
|
|
|
|
<div class="actions">
|
|
|
|
|
<button class="btn" @click="showAdd=false">取消</button>
|
|
|
|
|
<button class="btn btn-primary" @click="submitAdd" :disabled="adding">{{ adding ? '提交中...' : '提交' }}</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
const { createApp, ref, computed, onMounted, watch } = Vue;
|
|
|
|
|
createApp({
|
|
|
|
|
setup() {
|
|
|
|
|
const apiKey = ref(sessionStorage.getItem('ttsAdminKey') || '');
|
|
|
|
|
const keyInput = ref('');
|
|
|
|
|
const loginErr = ref('');
|
|
|
|
|
const tab = ref(location.hash.slice(1) || 'dashboard');
|
|
|
|
|
const overview = ref({});
|
|
|
|
|
const voices = ref([]);
|
|
|
|
|
const actionErr = ref('');
|
|
|
|
|
const showAdd = ref(false);
|
|
|
|
|
const adding = ref(false);
|
|
|
|
|
const addErr = ref('');
|
|
|
|
|
const form = ref({ name: '', speaker: '', resource_id: 'volc.megatts.icl', model: 'seed-tts-2.0-standard', language: '', description: '' });
|
|
|
|
|
|
2026-08-29 22:40:53 +08:00
|
|
|
// 设置页 (M3)
|
|
|
|
|
const settings = ref({});
|
|
|
|
|
const settingsForm = ref({ default_resource_id: '', default_speaker: '', default_format: 'mp3', sample_rate: 24000, model: '' });
|
|
|
|
|
const apiKeyInput = ref('');
|
2026-08-29 23:18:51 +08:00
|
|
|
const authKeyInput = ref('');
|
2026-08-30 00:08:14 +08:00
|
|
|
|
|
|
|
|
// CORS 配置 (M3 follow-up)
|
|
|
|
|
const corsForm = ref({ allow_all: false, origins: '' });
|
|
|
|
|
const corsErr = ref('');
|
|
|
|
|
const corsOk = ref(false);
|
|
|
|
|
const savingCors = ref(false);
|
|
|
|
|
const corsCurrentLabel = computed(() => {
|
|
|
|
|
if (!settings.value) return '未配置';
|
|
|
|
|
if (settings.value.cors_allow_all) return '允许所有来源(*)';
|
|
|
|
|
if (settings.value.cors_origins) return settings.value.cors_origins;
|
|
|
|
|
return '未配置(同源可用,跨域会被 403)';
|
|
|
|
|
});
|
2026-08-29 22:40:53 +08:00
|
|
|
const savingSettings = ref(false);
|
|
|
|
|
const settingsErr = ref('');
|
|
|
|
|
const settingsOk = ref(false);
|
|
|
|
|
|
2026-08-29 21:53:19 +08:00
|
|
|
const http = axios.create({ baseURL: '/api' });
|
|
|
|
|
http.interceptors.request.use(c => {
|
|
|
|
|
if (apiKey.value) c.headers.Authorization = 'Bearer ' + apiKey.value;
|
|
|
|
|
return c;
|
|
|
|
|
});
|
|
|
|
|
http.interceptors.response.use(r => r, err => {
|
|
|
|
|
if (err.response && err.response.status === 401) {
|
|
|
|
|
sessionStorage.removeItem('ttsAdminKey');
|
|
|
|
|
apiKey.value = '';
|
|
|
|
|
}
|
|
|
|
|
return Promise.reject(err);
|
|
|
|
|
});
|
|
|
|
|
|
2026-08-29 22:40:53 +08:00
|
|
|
watch(tab, v => { location.hash = v; if (v === 'settings') loadSettings(); });
|
2026-08-29 21:53:19 +08:00
|
|
|
window.addEventListener('hashchange', () => { tab.value = location.hash.slice(1) || 'dashboard'; });
|
|
|
|
|
|
|
|
|
|
const login = async () => {
|
|
|
|
|
loginErr.value = '';
|
|
|
|
|
try {
|
|
|
|
|
apiKey.value = keyInput.value;
|
|
|
|
|
await http.get('/admin/overview');
|
|
|
|
|
sessionStorage.setItem('ttsAdminKey', keyInput.value);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
apiKey.value = '';
|
|
|
|
|
loginErr.value = '鉴权失败: ' + (e.response?.data?.error?.message || e.message);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const logout = () => { sessionStorage.removeItem('ttsAdminKey'); apiKey.value = ''; };
|
|
|
|
|
|
|
|
|
|
const loadOverview = async () => {
|
|
|
|
|
try { overview.value = (await http.get('/admin/overview')).data; }
|
|
|
|
|
catch (e) { actionErr.value = '加载概览失败: ' + e.message; }
|
|
|
|
|
};
|
|
|
|
|
const loadVoices = async () => {
|
|
|
|
|
try {
|
|
|
|
|
const r = await http.get('/voices');
|
|
|
|
|
voices.value = r.data.voices || [];
|
|
|
|
|
} catch (e) { actionErr.value = '加载音色失败: ' + e.message; }
|
|
|
|
|
};
|
2026-08-29 22:40:53 +08:00
|
|
|
const loadSettings = async () => {
|
|
|
|
|
try {
|
|
|
|
|
const r = await http.get('/settings');
|
|
|
|
|
settings.value = r.data;
|
|
|
|
|
settingsForm.value = {
|
|
|
|
|
default_resource_id: r.data.default_resource_id || '',
|
|
|
|
|
default_speaker: r.data.default_speaker || '',
|
|
|
|
|
default_format: r.data.default_format || 'mp3',
|
|
|
|
|
sample_rate: r.data.sample_rate || 24000,
|
|
|
|
|
model: r.data.model || '',
|
|
|
|
|
};
|
2026-08-30 00:08:14 +08:00
|
|
|
corsForm.value = {
|
|
|
|
|
allow_all: !!r.data.cors_allow_all,
|
|
|
|
|
origins: r.data.cors_origins || '',
|
|
|
|
|
};
|
2026-08-29 22:40:53 +08:00
|
|
|
settingsOk.value = false;
|
|
|
|
|
} catch (e) { settingsErr.value = '加载设置失败: ' + (e.response?.data?.error?.message || e.message); }
|
|
|
|
|
};
|
2026-08-30 00:08:14 +08:00
|
|
|
const saveCors = async () => {
|
|
|
|
|
corsErr.value = ''; corsOk.value = false;
|
|
|
|
|
savingCors.value = true;
|
|
|
|
|
try {
|
|
|
|
|
await http.put('/settings/cors', {
|
|
|
|
|
allow_all: corsForm.value.allow_all,
|
|
|
|
|
origins: corsForm.value.origins,
|
|
|
|
|
});
|
|
|
|
|
await loadSettings();
|
|
|
|
|
corsOk.value = true;
|
|
|
|
|
setTimeout(() => corsOk.value = false, 3000);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
corsErr.value = e.response?.data?.error?.message || e.message;
|
|
|
|
|
} finally { savingCors.value = false; }
|
|
|
|
|
};
|
2026-08-29 21:53:19 +08:00
|
|
|
const reloadAll = () => { loadOverview(); loadVoices(); };
|
|
|
|
|
|
2026-08-29 22:40:53 +08:00
|
|
|
const saveSettings = async () => {
|
|
|
|
|
settingsErr.value = ''; settingsOk.value = false;
|
|
|
|
|
savingSettings.value = true;
|
|
|
|
|
try {
|
|
|
|
|
await http.put('/settings', {
|
|
|
|
|
default_resource_id: settingsForm.value.default_resource_id,
|
|
|
|
|
default_speaker: settingsForm.value.default_speaker,
|
|
|
|
|
default_format: settingsForm.value.default_format,
|
|
|
|
|
sample_rate: settingsForm.value.sample_rate,
|
|
|
|
|
model: settingsForm.value.model,
|
|
|
|
|
});
|
|
|
|
|
await loadSettings();
|
|
|
|
|
await loadOverview();
|
|
|
|
|
settingsOk.value = true;
|
|
|
|
|
setTimeout(() => settingsOk.value = false, 3000);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
settingsErr.value = e.response?.data?.error?.message || e.message;
|
|
|
|
|
} finally { savingSettings.value = false; }
|
|
|
|
|
};
|
|
|
|
|
const saveApiKey = async () => {
|
|
|
|
|
settingsErr.value = ''; settingsOk.value = false;
|
|
|
|
|
if (!apiKeyInput.value) { settingsErr.value = 'API Key 不能为空'; return; }
|
|
|
|
|
try {
|
|
|
|
|
await http.put('/settings/api-key', { api_key: apiKeyInput.value });
|
|
|
|
|
apiKeyInput.value = '';
|
|
|
|
|
await loadSettings();
|
|
|
|
|
settingsOk.value = true;
|
|
|
|
|
setTimeout(() => settingsOk.value = false, 3000);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
settingsErr.value = e.response?.data?.error?.message || e.message;
|
|
|
|
|
}
|
|
|
|
|
};
|
2026-08-29 23:18:51 +08:00
|
|
|
const saveAuthKey = async () => {
|
|
|
|
|
settingsErr.value = ''; settingsOk.value = false;
|
|
|
|
|
if (!authKeyInput.value) { settingsErr.value = 'Auth Key 不能为空'; return; }
|
|
|
|
|
try {
|
|
|
|
|
await http.put('/settings/auth-key', { auth_key: authKeyInput.value });
|
|
|
|
|
authKeyInput.value = '';
|
|
|
|
|
// 改完自己会 401,清掉 session key 让用户重新登录
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
sessionStorage.removeItem('ttsAdminKey');
|
|
|
|
|
apiKey.value = '';
|
|
|
|
|
}, 200);
|
|
|
|
|
settingsOk.value = true;
|
|
|
|
|
setTimeout(() => settingsOk.value = false, 3000);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
settingsErr.value = e.response?.data?.error?.message || e.message;
|
|
|
|
|
}
|
|
|
|
|
};
|
2026-08-29 22:40:53 +08:00
|
|
|
const resetSettingsForm = () => { loadSettings(); };
|
|
|
|
|
|
2026-08-29 21:53:19 +08:00
|
|
|
const openAdd = () => {
|
|
|
|
|
form.value = { name: '', speaker: '', resource_id: 'volc.megatts.icl', model: 'seed-tts-2.0-standard', language: '', description: '' };
|
|
|
|
|
addErr.value = '';
|
|
|
|
|
showAdd.value = true;
|
|
|
|
|
};
|
|
|
|
|
const submitAdd = async () => {
|
|
|
|
|
addErr.value = '';
|
|
|
|
|
if (!form.value.name || !form.value.speaker || !form.value.resource_id) {
|
|
|
|
|
addErr.value = '请填写名称、Speaker、资源 ID';
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
adding.value = true;
|
|
|
|
|
try {
|
|
|
|
|
await http.post('/voices', form.value);
|
|
|
|
|
showAdd.value = false;
|
|
|
|
|
await loadVoices();
|
|
|
|
|
await loadOverview();
|
|
|
|
|
} catch (e) {
|
|
|
|
|
addErr.value = e.response?.data?.error?.message || e.message;
|
|
|
|
|
} finally { adding.value = false; }
|
|
|
|
|
};
|
|
|
|
|
const toggle = async (v) => {
|
|
|
|
|
try { await http.patch(`/voices/${v.name}/toggle`, { enabled: !v.enabled }); await loadVoices(); }
|
|
|
|
|
catch (e) { actionErr.value = '切换失败: ' + (e.response?.data?.error?.message || e.message); }
|
|
|
|
|
};
|
|
|
|
|
const remove = async (v) => {
|
|
|
|
|
if (!confirm(`确定删除音色 "${v.name}" 吗?`)) return;
|
|
|
|
|
try { await http.delete(`/voices/${v.name}`); await loadVoices(); await loadOverview(); }
|
|
|
|
|
catch (e) { actionErr.value = '删除失败: ' + (e.response?.data?.error?.message || e.message); }
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const formatUptime = (s) => {
|
|
|
|
|
if (!s) return '—';
|
|
|
|
|
const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60);
|
|
|
|
|
return h > 0 ? `${h}h ${m}m` : `${m}m`;
|
|
|
|
|
};
|
|
|
|
|
const shortPath = (p) => p ? p.split(/[\\/]/).pop() : '';
|
|
|
|
|
|
|
|
|
|
onMounted(() => { if (apiKey.value) reloadAll(); });
|
|
|
|
|
|
|
|
|
|
return { apiKey, keyInput, loginErr, login, logout, tab, overview, voices, actionErr,
|
|
|
|
|
showAdd, form, addErr, adding, openAdd, submitAdd, toggle, remove,
|
2026-08-29 23:18:51 +08:00
|
|
|
settings, settingsForm, apiKeyInput, authKeyInput, savingSettings, settingsErr, settingsOk,
|
2026-08-30 00:08:14 +08:00
|
|
|
corsForm, corsErr, corsOk, savingCors, corsCurrentLabel, saveCors,
|
2026-08-29 23:18:51 +08:00
|
|
|
loadSettings, saveSettings, saveApiKey, saveAuthKey, resetSettingsForm,
|
2026-08-29 21:53:19 +08:00
|
|
|
formatUptime, shortPath, reloadAll };
|
|
|
|
|
},
|
|
|
|
|
}).mount('#app');
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|