Volcano-Engine-TTS-UI/router/admin.html

<!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">运行状态、版本与资源总览</p>
                    </div>
                </header>

                <div class="stat-grid">
                    <div class="stat-card">
                        <div class="stat-top">
                            <span class="stat-label">运行模式</span>
                            <span class="pill" :class="overview.installed ? 'pill-success' : 'pill-accent'">
                                <span class="pill-dot"></span>
                                {{ overview.installed ? '已就绪' : '待配置' }}
                            </span>
                        </div>
                        <div class="stat-value" :class="overview.installed ? 'text-success' : 'text-accent'">{{ overview.mode || '—' }}</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-top"><span class="stat-label">音色</span></div>
                        <div class="stat-value">{{ overview.voice_count ?? 0 }}<span class="stat-unit">条</span></div>
                        <div class="stat-foot">
                            <span class="text-success">{{ overview.voice_enabled_count ?? 0 }}</span> 启用 ·
                            <span class="text-dim">{{ (overview.voice_count ?? 0) - (overview.voice_enabled_count ?? 0) }}</span> 停用
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-top"><span class="stat-label">运行时间</span></div>
                        <div class="stat-value">{{ formatUptime(overview.uptime_seconds) }}</div>
                        <div class="stat-foot text-dim">{{ formatStart(overview.start_time) }}</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-top"><span class="stat-label">数据库</span></div>
                        <div class="stat-value mono" style="font-size: 15px; word-break: break-all;">{{ shortPath(overview.db_path) || '—' }}</div>
                        <div class="stat-foot text-dim mono" style="font-size: 10px; word-break: break-all;">{{ overview.db_path || '' }}</div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-head">
                        <div>
                            <div class="card-title">系统信息</div>
                            <div class="card-sub">运行版本与资源</div>
                        </div>
                    </div>
                    <dl class="kv">
                        <div class="kv-row"><dt>Commit</dt><dd class="mono">{{ overview.commit || 'dev' }}</dd></div>
                        <div class="kv-row"><dt>版本</dt><dd class="mono">{{ overview.version || '—' }}</dd></div>
                        <div class="kv-row"><dt>运行模式</dt><dd>{{ overview.mode || '—' }}</dd></div>
                        <div class="kv-row"><dt>数据库路径</dt><dd class="mono text-dim">{{ overview.db_path || '—' }}</dd></div>
                        <div class="kv-row"><dt>锁文件</dt><dd class="mono text-dim">{{ overview.lock_path || '—' }}</dd></div>
                        <div class="kv-row">
                            <dt>内存</dt>
                            <dd class="mono text-dim">
                                goroutines {{ overview.memory?.goroutines ?? '—' }} · heap {{ formatBytes(overview.memory?.heap_alloc) }}
                            </dd>
                        </div>
                    </dl>
                </div>
            </main>
        </div>
    </div>

    <script src="/admin/admin-shell.js"></script>
    <script>
    const { createApp, ref, onMounted } = Vue;
    const { http, getKey, formatUptime, shortPath, formatBytes, formatStart, mountShell } = window.admin;
    createApp({
        setup() {
            const overview = ref({});

            const loadOverview = async () => {
                try { overview.value = (await http.get('/admin/overview')).data; }
                catch (e) {
                    window.admin.toast('err', '加载概览失败: ' + e.message);
                }
            };

            onMounted(() => {
                if (!getKey()) { location.href = '/admin/login'; return; }
                mountShell({ activeNav: 'dashboard', overview: overview.value, voiceCount: overview.value.voice_count, onReload: loadOverview });
                loadOverview();
            });

            return { overview, formatUptime, shortPath, formatBytes, formatStart, loadOverview };
        },
    }).mount('#app');
    </script>
</body>
</html>