feat(web): 3x-ui style reskin — amo branding, light/dark themes, four pages + tabbed customer form

public/index.html

@@ -3,66 +3,62 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
-  <meta name="color-scheme" content="light">
-  <meta name="theme-color" content="#f5f7fb">
-  <title>NexusGate · 枢门控制台</title>
-  <link rel="stylesheet" href="/styles.css?v=0.3.0">
+  <meta name="color-scheme" content="light dark">
+  <meta name="theme-color" content="#f0f2f5">
+  <title>amo</title>
+  <script>(function(){try{var t=localStorage.getItem('nexusgate-theme');if(t==='dark'){document.documentElement.setAttribute('data-theme','dark');document.querySelector('meta[name="theme-color"]').content='#1a1b1f';}}catch(e){}})();</script>
+  <link rel="stylesheet" href="/styles.css?v=0.7.0">
 </head>
 <body>
   <div id="login" class="login-shell hidden">
-    <section class="login-main">
-      <button class="theme-button login-theme" type="button" data-theme-toggle aria-label="切换主题">浅色</button>
-      <div class="login-card">
-        <div class="brand login-brand"><span class="brand-mark">N</span><span><b>NexusGate</b><small>枢门控制台</small></span></div>
-        <div class="login-copy">
-          <h1>欢迎回来</h1>
-        </div>
-        <form id="login-form" class="stack login-form">
-          <label>登录账号<input name="username" autocomplete="username" placeholder="请输入账号" required></label>
-          <label>登录密码<input name="password" type="password" autocomplete="current-password" required></label>
-          <button class="primary full large" type="submit">登录控制台</button>
-        </form>
-        <p id="login-error" class="form-error"></p>
-      </div>
+    <section class="login-card panel">
+      <div class="login-brand">amo</div>
+      <form id="login-form" class="stack">
+        <label>登录账号<input name="username" autocomplete="username" required></label>
+        <label>登录密码<input name="password" type="password" autocomplete="current-password" required></label>
+        <button class="btn primary full" type="submit">登录</button>
+      </form>
+      <p id="login-error" class="form-error"></p>
+      <button class="theme-btn login-theme" type="button" data-theme-toggle>🌙 深色</button>
     </section>
   </div>
 
-  <div id="app" class="app-shell hidden">
-    <aside class="sidebar" id="sidebar">
-      <div class="brand sidebar-brand"><span class="brand-mark small">N</span><span><b>NexusGate</b><small>枢门控制台</small></span></div>
-      <p class="nav-caption">工作台</p>
-      <nav id="nav">
-        <button data-page="overview" class="active"><span class="nav-icon">▦</span><span class="nav-label">概览</span></button>
-        <p class="nav-caption nav-group">资源管理</p>
-        <button data-page="servers"><span class="nav-icon">◫</span><span class="nav-label">服务器</span></button>
-        <button data-page="customers"><span class="nav-icon">◎</span><span class="nav-label">客户与订阅</span></button>
-        <button data-page="chains"><span class="nav-icon">⇄</span><span class="nav-label">转发与节点</span></button>
-        <button data-page="commands"><span class="nav-icon">⌘</span><span class="nav-label">安装与命令</span></button>
-        <p class="nav-caption nav-group">安全与系统</p>
-        <button data-page="operations"><span class="nav-icon">⚙</span><span class="nav-label">设置与运维</span></button>
+  <div id="app" class="layout hidden">
+    <aside class="sider">
+      <div class="brand">amo</div>
+      <nav class="menu" id="nav">
+        <a class="mi" data-page="overview" href="#overview"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12l9-9 9 9"/><path d="M5 10v10h14V10"/></svg>系统状态</a>
+        <a class="mi" data-page="servers" href="#servers"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="7" rx="2"/><rect x="3" y="13" width="18" height="7" rx="2"/><path d="M7 7.5h.01M7 16.5h.01"/></svg>服务器</a>
+        <a class="mi" data-page="customers" href="#customers"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20c.8-3.2 3.4-5 6.5-5s5.7 1.8 6.5 5"/><path d="M16 4.6a3.5 3.5 0 010 6.8M21.5 20c-.6-2.6-2.2-4.2-4.5-4.8"/></svg>客户与订阅</a>
+        <a class="mi" data-page="chains" href="#chains"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="5" cy="12" r="2.5"/><circle cx="19" cy="6" r="2.5"/><circle cx="19" cy="18" r="2.5"/><path d="M7.3 10.8l9.4-3.6M7.3 13.2l9.4 3.6"/></svg>转发与节点</a>
+        <a class="mi" data-page="commands" href="#commands"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 17l6-5-6-5M12 19h8"/></svg>安装与命令</a>
+        <a class="mi" data-page="operations" href="#operations"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 00-.1-1.2l2-1.5-2-3.4-2.3 1a7 7 0 00-2-1.2L14.2 3h-4l-.4 2.5a7 7 0 00-2 1.2l-2.3-1-2 3.4 2 1.5A7 7 0 005 12c0 .4 0 .8.1 1.2l-2 1.5 2 3.4 2.3-1a7 7 0 002 1.2l.4 2.7h4l.4-2.5a7 7 0 002-1.2l2.3 1 2-3.4-2-1.5c.1-.4.1-.8.1-1.2z"/></svg>设置与运维</a>
       </nav>
-      <div class="sidebar-foot"><div><span class="live-dot"></span><span id="connection-label">控制面正常</span></div><button id="logout" class="icon-button" title="退出登录">↗</button></div>
+      <div class="sider-foot"><span id="user-chip"></span><span class="foot-right"><span id="version-label"></span><button id="logout" class="icon-btn" type="button" title="退出登录"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><path d="M16 17l5-5-5-5M21 12H9"/></svg></button></span></div>
     </aside>
 
-    <main class="main-shell">
+    <div class="main">
       <header class="topbar">
-        <button id="menu-toggle" class="icon-button mobile-only" type="button" aria-label="展开菜单">☰</button>
-        <div class="title-block"><p id="breadcrumb" class="eyebrow">NEXUSGATE / 运行总览</p><h1 id="page-title">运行总览</h1></div>
-        <div class="top-actions"><button id="refresh" class="ghost" type="button">刷新数据</button><button class="theme-button" type="button" data-theme-toggle aria-label="切换主题">浅色</button><span id="user-chip" class="user-chip"></span></div>
+        <span class="crumb">amo / <b id="page-title">系统状态</b></span>
+        <span class="sp"></span>
+        <input class="top-search" placeholder="搜索服务器、客户、节点…" disabled>
+        <button class="theme-btn" id="refresh" type="button" title="刷新数据">刷新</button>
+        <button class="theme-btn" type="button" data-theme-toggle>🌙 深色</button>
+        <span class="avatar" id="avatar">管</span>
       </header>
-      <div id="content" class="content"></div>
-    </main>
-    <button id="sidebar-scrim" class="sidebar-scrim" type="button" aria-label="关闭菜单"></button>
+      <main class="content" id="content"></main>
+    </div>
   </div>
 
-  <dialog id="modal">
-    <section class="dialog-shell">
-      <header><div><p id="modal-kicker" class="eyebrow"></p><h2 id="modal-title"></h2></div><button type="button" data-close class="icon-button" aria-label="关闭">×</button></header>
-      <div id="modal-body"></div>
+  <div id="modal-overlay" class="modal-overlay hidden">
+    <section class="modal panel" role="dialog" aria-modal="true">
+      <header class="modal-head"><h2 id="modal-title"></h2><button type="button" class="icon-btn" data-close aria-label="关闭"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 6L6 18M6 6l12 12"/></svg></button></header>
+      <div id="modal-body" class="modal-body"></div>
     </section>
-  </dialog>
+  </div>
+  <div id="float-pop" class="float-pop hidden"></div>
   <div id="toasts" aria-live="polite"></div>
   <script src="/vendor/qrcode.js?v=0.4.0" defer></script>
-  <script src="/app.js?v=0.4.0" defer></script>
+  <script src="/app.js?v=0.7.0" defer></script>
 </body>
 </html>