sun/Volcano-Engine-TTS-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

refactor(admin): 把单文件 admin.html (1075 行) 拆成多页 SPA,URL 路由切换

Browse Source 
原 admin.html 是 1075 行的单文件 SPA:登录/仪表盘/音色/设置 4 个面板
挤在一个 Vue 实例里 tab 切换(login -> app shell -> 3 个 section)。
文件太大,样式 + script + template 混在一起,改一个面板要 scroll 整页找位置。

拆分后:
  router/admin.html         5.4 KB  Dashboard (重定向目标,默认页)
  router/admin-login.html   2.1 KB  登录页 (无 sidebar)
  router/admin-voices.html  13.3 KB 音色管理 + Add modal
  router/admin-settings.html 14.1 KB 系统设置
  router/admin.css          19.8 KB 共享样式 (4 个页面 + admin-shell.js 共用)
  router/admin-shell.js     6.9 KB  共享:http client (401 自动清 key)、toast 系统、
                                login helper、sidebar 渲染、format helpers

最大的页面 14 KB,平均 10 KB,各页只负责自己逻辑。

技术细节:
- 栈保持: Vue 3 + Axios 走 CDN,纯静态 HTML,零构建
- URL 路由: /admin /admin/login /admin/voices /admin/settings,
  router.go 加 4 条 ServeFile 路由 + 2 条静态资源路由
  (/admin/admin.css /admin/admin-shell.js)
- 抽 serveAdmin(body []byte) http.HandlerFunc helper 避免 4 段重复
- 鉴权: 各页 onMounted 检 sessionStorage.ttsAdminKey,无则 location.href
  跳 /admin/login;http client 401 响应拦截器清 key,下个请求被跳到 login
- Sidebar 一致: shell.js mountShell({activeNav, overview, voiceCount, ...})
  渲染 <aside> + 高亮 active 项,各页只传 activeNav 不重复维护 DOM
- 静态资源 Content-Type 显式设置:text/css / application/javascript

未变更:
- 不动 /api/* 后端接口
- 不动 /setup /dashboard /health /v1/audio/speech 路由
- 鉴权语义: HTML 公开 / API 鉴权 (与原版一致)
- 不引入构建工具 / 不引入新依赖

验证 (PowerShell 起真 server + setup API + curl):
  /admin                          200  5433 bytes  text/html
  /admin/login                    200  2082 bytes  text/html
  /admin/voices                   200 13282 bytes  text/html
  /admin/settings                 200 14110 bytes  text/html
  /admin/admin.css                200 19815 bytes  text/css
  /admin/admin-shell.js           200  6887 bytes  application/javascript
  /api/admin/overview (无 auth)   401
  /api/admin/overview (有 auth)   200
  各页内容 marker 命中 (filteredVoices / corsForm / voice_count / login-card)
This commit is contained in:
sun
2026-09-21 23:20:59 +08:00
parent e738fc8e23
commit 9245c1339a
7 changed files with 1275 additions and 1037 deletions
Download Patch File Download Diff File Expand all files Collapse all files
router/admin-voices.html
+260
View File
@@ -0,0 +1,260 @@
<!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>
<link rel="stylesheet" href="/admin/admin.css">
</head>
<body>
<div id="app">
<div class="app-shell">
<aside id="admin-sidebar"></aside>
<main class="main">
<header class="page-head">
<div>
<h1 class="page-title">音色管理</h1>
<p class="page-sub">管理火山 TTS 音色及其启用状态</p>
</div>
<div class="page-actions">
<button class="btn btn-primary" @click="openAdd">+ 新增音色</button>
</div>
</header>
<div class="toolbar">
<div class="toolbar-left">
<div class="search">
<span class="search-icon">⌕</span>
<input v-model="voiceSearch" placeholder="搜索名称、Speaker、资源 ID...">
</div>
<div class="seg">
<button class="seg-btn" :class="{active: voiceFilter===null}" @click="voiceFilter=null">全部</button>
<button class="seg-btn" :class="{active: voiceFilter==='on'}" @click="voiceFilter='on'">启用</button>
<button class="seg-btn" :class="{active: voiceFilter==='off'}" @click="voiceFilter='off'">停用</button>
</div>
</div>
<div class="toolbar-right">
<span v-if="voiceSearch || voiceFilter !== null">{{ filteredVoices.length }} / {{ voices.length }}</span>
<span v-else>共 {{ voices.length }} 条</span>
</div>
</div>
<div v-if="actionErr" class="alert alert-danger">
<span class="alert-icon">⚠</span>
<div class="alert-body">
<div class="alert-title">操作失败</div>
<div class="alert-desc">{{ actionErr }}</div>
</div>
</div>
<div class="data-card">
<table class="data-table" v-if="filteredVoices.length">
<thead>
<tr>
<th>名称</th>
<th>Speaker</th>
<th>资源 ID</th>
<th>Model</th>
<th>状态</th>
<th class="th-actions">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="v in filteredVoices" :key="v.name">
<td>
<div class="cell-name">{{ v.name }}</div>
<div v-if="v.description" class="cell-sub">{{ v.description }}</div>
</td>
<td><span class="mono text-dim">{{ v.speaker }}</span></td>
<td><span class="mono text-dim">{{ v.resource_id }}</span></td>
<td><span class="mono text-dim">{{ v.model || '—' }}</span></td>
<td>
<span class="pill" :class="v.enabled ? 'pill-success' : 'pill-mute'">
<span class="pill-dot"></span>
{{ v.enabled ? '启用' : '停用' }}
</span>
</td>
<td class="th-actions">
<label class="switch" :title="v.enabled ? '点击停用' : '点击启用'" style="margin-right: 12px;">
<input type="checkbox" :checked="v.enabled" @change="toggle(v)">
<span class="switch-track"></span>
</label>
<button class="btn btn-sm btn-danger-ghost" @click="remove(v)">删除</button>
</td>
</tr>
</tbody>
</table>
<div v-else-if="voices.length === 0" class="empty">
<div class="empty-icon">♪</div>
<div class="empty-title">还没有音色</div>
<div class="empty-desc">点击右上角「+ 新增音色」开始添加第一个火山 TTS 音色</div>
<button class="btn btn-primary" @click="openAdd">+ 新增音色</button>
</div>
<div v-else class="empty">
<div class="empty-icon">⌕</div>
<div class="empty-title">没有匹配的音色</div>
<div class="empty-desc">尝试调整搜索词或筛选条件</div>
<button class="btn" @click="voiceSearch=''; voiceFilter=null">清除筛选</button>
</div>
</div>
</main>
</div>
<!-- Add modal -->
<teleport to="body">
<transition name="modal">
<div v-if="showAdd" class="modal-backdrop" @click.self="showAdd=false">
<div class="modal" @click.stop>
<div class="modal-head">
<h2>新增音色</h2>
<button class="btn-icon" @click="showAdd=false" title="关闭" style="flex: 0; padding: 4px 10px;">×</button>
</div>
<div class="modal-body">
<div class="grid-2">
<div class="field">
<label>对外名 (voice) <span class="req">*</span></label>
<input v-model="form.name" placeholder="qian" class="mono">
</div>
<div class="field">
<label>Speaker (火山音色 ID) <span class="req">*</span></label>
<input v-model="form.speaker" placeholder="S_xxx" class="mono">
</div>
<div class="field">
<label>资源 ID <span class="req">*</span></label>
<input v-model="form.resource_id" placeholder="seed-icl-2.0" class="mono">
</div>
<div class="field">
<label>Model</label>
<input v-model="form.model" placeholder="seed-tts-2.0-standard" class="mono">
</div>
<div class="field">
<label>Language</label>
<input v-model="form.language" placeholder="zh" class="mono">
</div>
<div class="field">
<label>Description</label>
<input v-model="form.description" placeholder="可选">
</div>
</div>
<div v-if="addErr" class="alert alert-danger" style="margin-top: 14px;">
<span class="alert-icon">⚠</span>
<div class="alert-body">
<div class="alert-title">提交失败</div>
<div class="alert-desc">{{ addErr }}</div>
</div>
</div>
</div>
<div class="modal-foot">
<button class="btn" @click="showAdd=false">取消</button>
<button class="btn btn-primary" @click="submitAdd" :disabled="adding">{{ adding ? '提交中...' : '提交' }}</button>
</div>
</div>
</div>
</transition>
</teleport>
</div>
<script src="/admin/admin-shell.js"></script>
<script>
const { createApp, ref, computed, onMounted } = Vue;
const { http, getKey, toast, mountShell } = window.admin;
createApp({
setup() {
const overview = ref({});
const voices = ref([]);
const actionErr = ref('');
const voiceSearch = ref('');
const voiceFilter = ref(null);
const filteredVoices = computed(() => {
const q = voiceSearch.value.trim().toLowerCase();
return voices.value.filter(v => {
if (voiceFilter.value === 'on' && !v.enabled) return false;
if (voiceFilter.value === 'off' && v.enabled) return false;
if (!q) return true;
return (v.name || '').toLowerCase().includes(q)
|| (v.speaker || '').toLowerCase().includes(q)
|| (v.resource_id || '').toLowerCase().includes(q);
});
});
const showAdd = ref(false);
const adding = ref(false);
const addErr = ref('');
const form = ref({ name: '', speaker: '', resource_id: 'seed-icl-2.0', model: 'seed-tts-2.0-standard', language: '', description: '' });
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; }
};
const reloadAll = () => { loadOverview(); loadVoices(); };
const openAdd = () => {
form.value = { name: '', speaker: '', resource_id: 'seed-icl-2.0', 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();
toast('ok', '音色已添加');
} 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);
toast('err', actionErr.value);
}
};
const remove = async (v) => {
if (!confirm(`确定删除音色 "${v.name}" 吗?`)) return;
try { await http.delete(`/voices/${v.name}`); await loadVoices(); await loadOverview(); toast('ok', '音色已删除'); }
catch (e) {
actionErr.value = '删除失败: ' + (e.response?.data?.error?.message || e.message);
toast('err', actionErr.value);
}
};
onMounted(() => {
if (!getKey()) { location.href = '/admin/login'; return; }
mountShell({
activeNav: 'voices',
overview: overview.value,
voiceCount: voices.value.length,
onReload: reloadAll,
});
reloadAll();
});
return {
overview, voices, actionErr,
voiceSearch, voiceFilter, filteredVoices,
showAdd, form, addErr, adding, openAdd, submitAdd, toggle, remove,
reloadAll,
};
},
}).mount('#app');
</script>
</body>
</html>