sequoia00
/
reader_pro


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
							<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>VoiceFlow AI Reader 【小满TTS英文听书】 - 管理员面板</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      background: linear-gradient(145deg, #f2f6fb, #e7eef8);
      font-family: Arial, sans-serif;
      color: #1f2937;
      padding: 20px;
    }
    .container { max-width: 1100px; margin: 0 auto; }
    .topbar, .panel {
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 10px 35px rgba(17, 24, 39, .10);
      padding: 18px;
      margin-bottom: 14px;
    }
    .title { margin: 0; font-size: 22px; color: #0f172a; }
    .sub { margin: 4px 0 0; font-size: 13px; color: #64748b; }
    .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
    input, button, select {
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 14px;
      border: 1px solid #d7e0ec;
    }
    input:focus, select:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
    button { border: none; color: #fff; cursor: pointer; }
    .btn-primary { background: #2563eb; }
    .btn-primary:hover { background: #1d4ed8; }
    .btn-danger { background: #dc2626; }
    .btn-danger:hover { background: #b91c1c; }
    .btn-warn { background: #ea580c; }
    .btn-warn:hover { background: #c2410c; }
    .btn-green { background: #16a34a; }
    .btn-green:hover { background: #15803d; }
    table { width: 100%; border-collapse: collapse; margin-top: 10px; }
    th, td { border-bottom: 1px solid #e5e7eb; padding: 10px; text-align: left; font-size: 13px; vertical-align: middle; }
    th { color: #334155; background: #f8fafc; }
    .muted { color: #64748b; font-size: 12px; }
    .tag { display: inline-block; border-radius: 8px; padding: 2px 8px; font-size: 12px; }
    .tag-ok { background: #dcfce7; color: #166534; }
    .tag-off { background: #fee2e2; color: #991b1b; }
    .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
    .msg { min-height: 18px; margin-top: 6px; color: #b00020; font-size: 13px; }
    @media (max-width: 768px) {
      th:nth-child(1), td:nth-child(1), th:nth-child(4), td:nth-child(4) { display: none; }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="topbar">
      <div class="toolbar">
        <div>
          <h1 class="title">VoiceFlow AI Reader</h1>
          <p class="sub">【小满TTS英文听书】 管理员面板</p>
        </div>
        <div class="row">
          <button class="btn-primary" onclick="goReader()">进入阅读器</button>
          <button class="btn-warn" onclick="logout()">退出登录</button>
        </div>
      </div>
    </div>

    <div class="panel">
      <h3>用户管理</h3>
      <div class="row">
        <input id="newUser" placeholder="用户名（至少3位）" />
        <input id="newPass" placeholder="密码（至少4位）" type="password" />
        <label><input id="newAdmin" type="checkbox" /> 管理员</label>
        <button class="btn-green" onclick="createOrUpdateUser()">新增/重置</button>
      </div>
      <div id="userMsg" class="msg"></div>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>状态</th>
            <th>管理员</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="userTable"></tbody>
      </table>
    </div>

    <div class="panel">
      <h3>配置管理</h3>
      <div class="row">
        <input id="cfgKey" placeholder="配置键" />
        <input id="cfgVal" placeholder="配置值" />
        <button class="btn-primary" onclick="setConfig()">保存配置</button>
      </div>
      <div id="cfgMsg" class="msg"></div>
      <table>
        <thead><tr><th>键</th><th>值</th><th>更新时间</th></tr></thead>
        <tbody id="cfgTable"></tbody>
      </table>
    </div>
  </div>

  <script>
    async function ensureAdmin() {
      const r = await fetch('/auth/me');
      if (!r.ok) { location.href = '/login'; return false; }
      const d = await r.json();
      if (!d.success || !d.is_admin) { location.href = '/'; return false; }
      return true;
    }

    function showMsg(id, text, ok = false) {
      const el = document.getElementById(id);
      el.textContent = text || '';
      el.style.color = ok ? '#0f7b0f' : '#b00020';
    }

    async function apiJson(url, options = {}) {
      const r = await fetch(url, options);
      const d = await r.json().catch(() => ({}));
      if (!r.ok || d.success === false) throw new Error(d.error || `请求失败(${r.status})`);
      return d;
    }

    async function loadUsers() {
      const d = await apiJson('/admin/users');
      const tb = document.getElementById('userTable');
      tb.innerHTML = '';
      (d.users || []).forEach(u => {
        const tr = document.createElement('tr');
        const activeTag = u.is_active ? '<span class="tag tag-ok">启用</span>' : '<span class="tag tag-off">禁用</span>';
        const adminTag = u.is_admin ? '<span class="tag tag-ok">是</span>' : '<span class="muted">否</span>';
        tr.innerHTML = `
          <td>${u.id}</td>
          <td>${u.username}</td>
          <td>${activeTag}</td>
          <td>${adminTag}</td>
          <td>${u.created_at || ''}</td>
          <td>
            <button class="btn-primary" onclick="resetPwd('${u.username}')">重置密码</button>
            <button class="${u.is_active ? 'btn-warn' : 'btn-green'}" onclick="toggleUser('${u.username}', ${u.is_active ? 'false' : 'true'})">${u.is_active ? '禁用' : '启用'}</button>
            ${u.username === 'admin' ? '' : `<button class="btn-danger" onclick="deleteUser('${u.username}')">删除</button>`}
          </td>
        `;
        tb.appendChild(tr);
      });
    }

    async function createOrUpdateUser() {
      const username = document.getElementById('newUser').value.trim();
      const password = document.getElementById('newPass').value;
      const is_admin = document.getElementById('newAdmin').checked;
      try {
        await apiJson('/admin/users', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ username, password, is_admin })
        });
        showMsg('userMsg', '用户已保存', true);
        document.getElementById('newPass').value = '';
        await loadUsers();
      } catch (e) {
        showMsg('userMsg', e.message);
      }
    }

    async function resetPwd(username) {
      const p = prompt(`请输入用户 ${username} 的新密码：`);
      if (!p) return;
      try {
        await apiJson(`/admin/users/${encodeURIComponent(username)}/reset-password`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ password: p })
        });
        showMsg('userMsg', `已重置 ${username} 密码`, true);
      } catch (e) {
        showMsg('userMsg', e.message);
      }
    }

    async function toggleUser(username, is_active) {
      if (!confirm(`确认${is_active ? '启用' : '禁用'}用户 ${username} ?`)) return;
      try {
        await apiJson(`/admin/users/${encodeURIComponent(username)}/status`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ is_active })
        });
        showMsg('userMsg', `用户 ${username} 状态已更新`, true);
        await loadUsers();
      } catch (e) {
        showMsg('userMsg', e.message);
      }
    }

    async function deleteUser(username) {
      const delete_files = confirm(`删除用户 ${username} 时，是否连同该用户上传文件一起删除？\n点击“确定”=删除文件，点击“取消”=仅删用户。`);
      if (!confirm(`确认删除用户 ${username} ?`)) return;
      try {
        await apiJson(`/admin/users/${encodeURIComponent(username)}?delete_files=${delete_files ? 'true' : 'false'}`, {
          method: 'DELETE'
        });
        showMsg('userMsg', `用户 ${username} 已删除`, true);
        await loadUsers();
      } catch (e) {
        showMsg('userMsg', e.message);
      }
    }

    async function loadConfig() {
      const d = await apiJson('/admin/config');
      const tb = document.getElementById('cfgTable');
      tb.innerHTML = '';
      (d.configs || []).forEach(c => {
        const tr = document.createElement('tr');
        tr.innerHTML = `<td>${c.config_key}</td><td>${c.config_value || ''}</td><td>${c.updated_at || ''}</td>`;
        tb.appendChild(tr);
      });
    }

    async function setConfig() {
      const config_key = document.getElementById('cfgKey').value.trim();
      const config_value = document.getElementById('cfgVal').value;
      try {
        await apiJson('/admin/config', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ config_key, config_value })
        });
        showMsg('cfgMsg', '配置已保存', true);
        await loadConfig();
      } catch (e) {
        showMsg('cfgMsg', e.message);
      }
    }

    async function logout() {
      await fetch('/auth/logout', { method: 'POST' });
      location.href = '/login';
    }

    function goReader() {
      location.href = '/';
    }

    (async () => {
      const ok = await ensureAdmin();
      if (!ok) return;
      try {
        await loadUsers();
        await loadConfig();
      } catch (e) {
        showMsg('userMsg', e.message);
      }
    })();
  </script>
</body>
</html>