blog/blog-admin/public/admin/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>管理面板 · 优世界</title>
<meta name="robots" content="noindex,nofollow">
<script>
  /* 主题要在样式生效前定好，否则会闪一下浅色 */
  try { if (localStorage.getItem('atk-theme') === 'dark') document.documentElement.dataset.theme = 'dark'; } catch (e) {}
</script>
<link rel="stylesheet" href="./admin.css">
</head>
<body>

<!-- ===================== 登录 ===================== -->
<div id="gate" class="gate" hidden>
  <div class="login-card">

    <div class="login-brand">
      <span class="lb-mark">优</span>
      <div class="lb-text">
        <strong>优世界</strong>
        <span>管理面板</span>
      </div>
    </div>

    <div class="login-head">
      <h1>欢迎回来</h1>
      <p class="sub">登录后管理评论、订阅与文章</p>
    </div>

    <div id="lgErr" class="alert" hidden></div>

    <form id="loginForm">
      <div class="field">
        <label class="lbl" for="lgUser">账号</label>
        <div class="lg-input">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 12.2a3.6 3.6 0 1 0 0-7.2 3.6 3.6 0 0 0 0 7.2z"/><path d="M4.8 20.2a7.2 7.2 0 0 1 14.4 0"/></svg>
          <input id="lgUser" type="text" placeholder="请输入账号" required autocomplete="username" spellcheck="false">
        </div>
      </div>

      <div class="field">
        <label class="lbl" for="lgPass">密码</label>
        <div class="lg-input has-peek">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4.6" y="10.4" width="14.8" height="9.6" rx="2.2"/><path d="M8.2 10.4V7.9a3.8 3.8 0 0 1 7.6 0v2.5"/><path d="M12 14.2v2.2"/></svg>
          <input id="lgPass" type="password" placeholder="请输入密码" required autocomplete="current-password">
          <button type="button" class="lg-peek" data-act="peek-pass" aria-label="显示密码" aria-pressed="false">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.6 12S6.1 6 12 6s9.4 6 9.4 6-3.5 6-9.4 6-9.4-6-9.4-6z"/><circle cx="12" cy="12" r="2.7"/></svg>
          </button>
        </div>
      </div>

      <button class="btn primary block lg-submit" type="submit" id="lgBtn">登 录</button>
    </form>

    <div class="login-foot">
      <span class="lg-dot" aria-hidden="true"></span>
      <span id="lgFoot">优世界 · 评论与订阅统一管理</span>
    </div>
  </div>
</div>

<!-- ===================== 主界面 ===================== -->
<div id="app" class="app" hidden>

  <header class="mobile-bar">
    <button class="icon-btn" data-act="menu" aria-label="打开菜单">&#9776;</button>
    <span class="mobile-title">管理面板</span>
  </header>

  <div class="scrim" id="scrim" data-act="menu" hidden></div>

  <aside class="sidebar" id="sidebar">
    <div class="side-head">
      <span class="logo">优</span>
      <div class="side-tt">
        <h1>优世界</h1>
        <p>管理面板</p>
      </div>
    </div>

    <nav class="side-nav" id="tabs"></nav>

    <div class="side-foot">
      <button class="sfoot-btn" data-act="theme" id="themeBtn"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.5 14.5A8.5 8.5 0 1 1 9.5 3.5a7 7 0 0 0 11 11z"/></svg><span>深色模式</span></button>
      <button class="sfoot-btn" data-act="logout"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 4H5.5A1.5 1.5 0 0 0 4 5.5v13A1.5 1.5 0 0 0 5.5 20H9"/><path d="M15 16l4-4-4-4M19 12H9"/></svg><span>退出登录</span></button>
    </div>
  </aside>

  <main class="main">
    <header class="topbar">
      <div class="crumb" id="crumb"></div>
      <div class="top-right">
        <span class="side-name" id="who"></span>
      </div>
    </header>
    <div id="view"></div>
    <div class="foot">
      <span id="footL"></span>
      <span id="footR"></span>
    </div>
  </main>

</div>

<div id="toast" class="toast" hidden></div>

<div id="modal" class="modal" hidden>
  <div class="modal-card" role="dialog" aria-modal="true">
    <div class="modal-head">
      <h3 id="modalTitle"></h3>
      <button class="icon-btn" data-act="modal-close" aria-label="关闭">&#10005;</button>
    </div>
    <div class="modal-body" id="modalBody"></div>
  </div>
</div>

<script src="./admin.js"></script>
</body>
</html>