yhm-shop-data/store-ops/frontend/login.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>登录 · 门店检测工作台</title>
<style>
  :root{
    --bg:#fbf7ef; --surface:#fff; --line:#ece0c8; --ink:#211a10; --ink-2:#5b4f3a;
    --ink-3:#93876f; --ink-4:#b9ad95; --gold:#eaba4e; --gold-deep:#a97b12;
    --gold-bg:#fdf6e4; --grad-gold:linear-gradient(180deg,#f3c95f,#e0a52e);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    font-family:"PingFang SC","Microsoft YaHei",-apple-system,system-ui,sans-serif;
    color:var(--ink); min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:24px;
    background:
      radial-gradient(900px 400px at 15% -120px,rgba(234,185,78,.22),transparent 68%),
      radial-gradient(800px 360px at 85% -60px,rgba(234,185,78,.14),transparent 66%),
      radial-gradient(700px 500px at 50% 110%,rgba(234,185,78,.08),transparent 70%),
      var(--bg);
  }
  .card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);
    border-radius:18px;padding:34px 30px 28px;box-shadow:0 24px 60px rgba(150,110,20,.14)}
  .brand{display:flex;align-items:center;gap:10px;margin-bottom:26px}
  .logo{width:34px;height:34px;border-radius:10px;background:var(--grad-gold);
    display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;
    box-shadow:0 4px 12px rgba(181,126,21,.28)}
  .brand h1{font-size:17px;font-weight:600;letter-spacing:-.2px}
  .brand p{font-size:11.5px;color:var(--ink-3);margin-top:2px}
  label{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:6px}
  input{width:100%;padding:11px 13px;font-size:14.5px;font-family:inherit;color:var(--ink);
    background:var(--surface);border:1px solid var(--line);border-radius:10px;outline:none;
    transition:border-color .15s,box-shadow .15s}
  input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(234,185,78,.16)}
  .field{margin-bottom:15px}
  button{width:100%;margin-top:8px;padding:12px;font-size:15px;font-family:inherit;font-weight:600;
    color:#fff;background:var(--grad-gold);border:1px solid #b57e15;border-radius:10px;cursor:pointer;
    box-shadow:0 3px 12px rgba(181,126,21,.28);transition:filter .15s}
  button:hover{filter:brightness(1.05)}
  button:disabled{opacity:.6;cursor:default}
  .err{margin-top:14px;padding:9px 12px;background:#fdf0ea;border:1px solid #f3d4c6;
    border-radius:9px;color:#a4462a;font-size:13px;display:none}
  .err.on{display:block}
  .hint{margin-top:18px;padding:11px 13px;background:var(--gold-bg);border:1px solid #f0dfb4;
    border-radius:10px;font-size:12.5px;line-height:1.7;color:var(--ink-2);display:none}
  .hint.on{display:block}
  .hint b{color:var(--gold-deep)}
  .foot{margin-top:22px;text-align:center;font-size:11.5px;color:var(--ink-4);line-height:1.8}
</style>
</head>
<body>
<div class="card">
  <div class="brand">
    <div class="logo">店</div>
    <div>
      <h1>门店检测工作台</h1>
      <p>怡呵美 · 水光会员店</p>
    </div>
  </div>

  <form id="f" autocomplete="on">
    <div class="field">
      <label for="u">账号</label>
      <input id="u" name="username" autocomplete="username" autocapitalize="off" spellcheck="false" autofocus>
    </div>
    <div class="field">
      <label for="p">密码</label>
      <input id="p" name="password" type="password" autocomplete="current-password">
    </div>
    <button id="btn" type="submit">登 录</button>
    <div class="err" id="err"></div>
  </form>

  <div class="hint" id="hint">
    首次使用：账号 <b>admin</b>，初始密码 <b>admin123</b><br>
    登录后会要求你立刻修改密码。
  </div>

  <div class="foot">账号由管理员统一分配<br>忘记密码请联系管理员重置</div>
</div>

<script>
const $ = id => document.getElementById(id);
const err = m => { $('err').textContent = m; $('err').classList.add('on'); };

fetch('/api/auth/state').then(r => r.json()).then(s => {
  if (s.logged_in) location.replace('/');
  if (s.default_admin) $('hint').classList.add('on');
  if (s.needs_setup) $('hint').classList.add('on');
}).catch(() => {});

$('f').onsubmit = async e => {
  e.preventDefault();
  const username = $('u').value.trim(), password = $('p').value;
  if (!username || !password) return err('请输入账号和密码');
  $('btn').disabled = true; $('btn').textContent = '登录中…';
  $('err').classList.remove('on');
  try {
    const r = await fetch('/api/login', {
      method: 'POST', headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({username, password}),
    });
    const d = await r.json();
    if (!r.ok) throw new Error(d.error || '登录失败');
    location.replace('/');
  } catch (e) {
    err(e.message);
    $('btn').disabled = false; $('btn').textContent = '登 录';
    $('p').select();
  }
};
</script>
</body>
</html>