feat: add password-gated config pages

README.md

@@ -48,6 +48,18 @@ docker compose up -d --build
 http://飞牛IP:3000
 ```
 
+首次部署请先修改 `docker-compose.yml` 中的密码和密钥：
+```yaml
+ADMIN_PASSWORD: "你的管理员密码"
+VIEWER_PASSWORD: "你的用户访问密码"
+SESSION_SECRET: "一段随机字符串"
+LINK_TOKEN_SECRET: "另一段随机字符串"
+```
+
+页面入口：
+* 管理员控制台：`http://飞牛IP:3000/config`
+* 用户只读配置页：`http://飞牛IP:3000/sub`
+
 需要持久化的数据：
 * `subs.json` - 订阅源配置，控制面板修改后会写入这里
 * `out/` - 当前输出和历史配置

docker-compose.yml

@@ -9,6 +9,10 @@ services:
       PORT: "3000"
       HOST: "0.0.0.0"
       AUTO_OPEN: "0"
+      ADMIN_PASSWORD: "change-admin-password"
+      VIEWER_PASSWORD: "change-viewer-password"
+      SESSION_SECRET: "change-session-secret"
+      LINK_TOKEN_SECRET: "change-link-token-secret"
       # Set this when clients should import through a fixed LAN IP, domain, or reverse proxy.
       # PUBLIC_BASE_URL: "http://192.168.1.10:3000"
     volumes:

public/index.html

@@ -765,13 +765,14 @@
                   <th>生成时间</th>
                   <th>节点数量</th>
                   <th>本地下载</th>
+                  <th>复制链接</th>
                   <th>一键导入</th>
                   <th>操作</th>
                 </tr>
               </thead>
               <tbody id="history-list">
                 <tr>
-                  <td colspan="5" style="text-align: center; color: var(--text-secondary); padding: 3rem;">
+                  <td colspan="6" style="text-align: center; color: var(--text-secondary); padding: 3rem;">
                     暂无生成历史记录，运行生成配置后将在此归档
                   </td>
                 </tr>
@@ -1457,6 +1458,27 @@
       return `${window.location.protocol}//127.0.0.1${port}`;
     }
 
+    async function copyLinkToClipboard(link) {
+      try {
+        if (navigator.clipboard && window.isSecureContext) {
+          await navigator.clipboard.writeText(link);
+        } else {
+          const textarea = document.createElement('textarea');
+          textarea.value = link;
+          textarea.setAttribute('readonly', '');
+          textarea.style.position = 'fixed';
+          textarea.style.left = '-9999px';
+          document.body.appendChild(textarea);
+          textarea.select();
+          document.execCommand('copy');
+          document.body.removeChild(textarea);
+        }
+        showToast('链接已复制');
+      } catch (e) {
+        showToast('复制链接失败', 'error');
+      }
+    }
+
     function renderHistoryList(list) {
       const tbody = document.getElementById('history-list');
       tbody.innerHTML = '';
@@ -1464,7 +1486,7 @@
       if (!list || list.length === 0) {
         tbody.innerHTML = `
           <tr>
-            <td colspan="5" style="text-align: center; color: var(--text-secondary); padding: 3rem;">
+            <td colspan="6" style="text-align: center; color: var(--text-secondary); padding: 3rem;">
               暂无生成历史记录，运行生成配置后将在此归档
             </td>
           </tr>
@@ -1478,10 +1500,12 @@
       list.forEach(item => {
         const yamlFileParam = encodeURIComponent(item.yamlFile);
         const jsonFileParam = encodeURIComponent(item.jsonFile);
-        const yamlDownloadUrl = `${origin}/api/download?file=${yamlFileParam}`;
-        const jsonDownloadUrl = `${origin}/api/download?file=${jsonFileParam}`;
-        const yamlImportProfileUrl = `${clientOrigin}/api/profile?file=${yamlFileParam}`;
-        const jsonImportProfileUrl = `${clientOrigin}/api/profile?file=${jsonFileParam}`;
+        const yamlTokenParam = item.yamlToken ? `&token=${encodeURIComponent(item.yamlToken)}` : '';
+        const jsonTokenParam = item.jsonToken ? `&token=${encodeURIComponent(item.jsonToken)}` : '';
+        const yamlDownloadUrl = `${origin}/api/download?file=${yamlFileParam}${yamlTokenParam}`;
+        const jsonDownloadUrl = `${origin}/api/download?file=${jsonFileParam}${jsonTokenParam}`;
+        const yamlImportProfileUrl = `${clientOrigin}/api/profile?file=${yamlFileParam}${yamlTokenParam}`;
+        const jsonImportProfileUrl = `${clientOrigin}/api/profile?file=${jsonFileParam}${jsonTokenParam}`;
         
         // Construct client URI schemes
         const clashImportUrl = `clash://install-config?url=${encodeURIComponent(yamlImportProfileUrl)}&name=${encodeURIComponent('CatMata-' + item.timeStr.replace(/[: ]/g, '-'))}`;
@@ -1501,6 +1525,16 @@
               </a>
             </div>
           </td>
+          <td>
+            <div style="display: flex; gap: 0.5rem;">
+              <button type="button" class="btn btn-secondary" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;" onclick="copyLinkToClipboard('${yamlImportProfileUrl}')">
+                <i data-lucide="copy" style="width: 12px; height: 12px;"></i>YAML
+              </button>
+              <button type="button" class="btn btn-secondary" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;" onclick="copyLinkToClipboard('${jsonImportProfileUrl}')">
+                <i data-lucide="copy" style="width: 12px; height: 12px;"></i>JSON
+              </button>
+            </div>
+          </td>
           <td>
             <div style="display: flex; gap: 0.5rem;">
               <a class="btn btn-primary" style="padding: 0.25rem 0.5rem; font-size: 0.75rem; text-decoration: none; background: linear-gradient(135deg, #10B981 0%, #059669 100%); box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);" href="${clashImportUrl}">

public/login.html

@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>登录 - CatMata Sub2Proxy</title>
+  <style>
+    :root {
+      --bg: #f5f7fb;
+      --panel: #ffffff;
+      --text: #111827;
+      --muted: #6b7280;
+      --line: #dbe3ef;
+      --primary: #2563eb;
+      --primary-dark: #1d4ed8;
+      --danger: #dc2626;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      display: grid;
+      place-items: center;
+      background: var(--bg);
+      color: var(--text);
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+
+    main {
+      width: min(420px, calc(100vw - 32px));
+      background: var(--panel);
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      padding: 28px;
+      box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
+    }
+
+    h1 {
+      margin: 0;
+      font-size: 1.45rem;
+      font-weight: 700;
+      letter-spacing: 0;
+    }
+
+    p {
+      margin: 8px 0 22px;
+      color: var(--muted);
+      line-height: 1.6;
+      font-size: 0.95rem;
+    }
+
+    label {
+      display: block;
+      margin-bottom: 8px;
+      color: #374151;
+      font-size: 0.9rem;
+      font-weight: 600;
+    }
+
+    input {
+      width: 100%;
+      height: 44px;
+      border: 1px solid var(--line);
+      border-radius: 6px;
+      padding: 0 12px;
+      font: inherit;
+      outline: none;
+    }
+
+    input:focus {
+      border-color: var(--primary);
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
+    }
+
+    button {
+      width: 100%;
+      height: 44px;
+      margin-top: 16px;
+      border: 0;
+      border-radius: 6px;
+      background: var(--primary);
+      color: #fff;
+      font: inherit;
+      font-weight: 700;
+      cursor: pointer;
+    }
+
+    button:hover {
+      background: var(--primary-dark);
+    }
+
+    button:disabled {
+      cursor: wait;
+      opacity: 0.72;
+    }
+
+    .error {
+      min-height: 22px;
+      margin-top: 12px;
+      color: var(--danger);
+      font-size: 0.9rem;
+    }
+
+    .link {
+      display: block;
+      margin-top: 18px;
+      color: var(--muted);
+      text-align: center;
+      text-decoration: none;
+      font-size: 0.9rem;
+    }
+
+    .link:hover {
+      color: var(--primary);
+    }
+  </style>
+</head>
+<body>
+  <main>
+    <h1>CatMata Sub2Proxy</h1>
+    <p>输入管理员密码进入完整控制面板。</p>
+    <form id="login-form">
+      <label for="password">管理员密码</label>
+      <input id="password" name="password" type="password" autocomplete="current-password" required autofocus>
+      <button id="submit-btn" type="submit">登录</button>
+      <div class="error" id="error"></div>
+    </form>
+    <a class="link" href="/sub">进入用户配置页</a>
+  </main>
+
+  <script>
+    const form = document.getElementById('login-form');
+    const input = document.getElementById('password');
+    const button = document.getElementById('submit-btn');
+    const error = document.getElementById('error');
+
+    form.addEventListener('submit', async event => {
+      event.preventDefault();
+      error.textContent = '';
+      button.disabled = true;
+      button.textContent = '正在登录...';
+
+      try {
+        const res = await fetch('/api/login', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ role: 'admin', password: input.value })
+        });
+        const data = await res.json().catch(() => ({}));
+        if (!res.ok) {
+          throw new Error(data.error || '登录失败');
+        }
+        window.location.href = data.redirectTo || '/config';
+      } catch (e) {
+        error.textContent = e.message;
+        button.disabled = false;
+        button.textContent = '登录';
+      }
+    });
+  </script>
+</body>
+</html>

public/viewer.html

@@ -0,0 +1,448 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>配置记录 - CatMata Sub2Proxy</title>
+  <style>
+    :root {
+      --bg: #f5f7fb;
+      --panel: #ffffff;
+      --text: #111827;
+      --muted: #6b7280;
+      --line: #dbe3ef;
+      --primary: #2563eb;
+      --primary-dark: #1d4ed8;
+      --green: #059669;
+      --danger: #dc2626;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      background: var(--bg);
+      color: var(--text);
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+
+    .login-shell {
+      min-height: 100vh;
+      display: grid;
+      place-items: center;
+      padding: 16px;
+    }
+
+    .login-panel,
+    .main-panel {
+      background: var(--panel);
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
+    }
+
+    .login-panel {
+      width: min(420px, 100%);
+      padding: 28px;
+    }
+
+    .main-panel {
+      width: min(1100px, calc(100vw - 32px));
+      margin: 32px auto;
+      overflow: hidden;
+    }
+
+    header {
+      display: flex;
+      justify-content: space-between;
+      gap: 16px;
+      align-items: center;
+      padding: 22px 24px;
+      border-bottom: 1px solid var(--line);
+    }
+
+    h1 {
+      margin: 0;
+      font-size: 1.35rem;
+      font-weight: 750;
+      letter-spacing: 0;
+    }
+
+    p {
+      margin: 8px 0 22px;
+      color: var(--muted);
+      line-height: 1.6;
+      font-size: 0.95rem;
+    }
+
+    label {
+      display: block;
+      margin-bottom: 8px;
+      color: #374151;
+      font-size: 0.9rem;
+      font-weight: 600;
+    }
+
+    input {
+      width: 100%;
+      height: 44px;
+      border: 1px solid var(--line);
+      border-radius: 6px;
+      padding: 0 12px;
+      font: inherit;
+      outline: none;
+    }
+
+    input:focus {
+      border-color: var(--primary);
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
+    }
+
+    button,
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 34px;
+      border: 0;
+      border-radius: 6px;
+      padding: 0 12px;
+      color: #fff;
+      font: inherit;
+      font-size: 0.86rem;
+      font-weight: 700;
+      text-decoration: none;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    .login-panel button {
+      width: 100%;
+      height: 44px;
+      margin-top: 16px;
+      background: var(--primary);
+    }
+
+    .login-panel button:hover,
+    .btn-primary:hover {
+      background: var(--primary-dark);
+    }
+
+    .login-panel button:disabled {
+      cursor: wait;
+      opacity: 0.72;
+    }
+
+    .btn-secondary {
+      background: #334155;
+    }
+
+    .btn-primary {
+      background: var(--primary);
+    }
+
+    .btn-green {
+      background: var(--green);
+    }
+
+    .error {
+      min-height: 22px;
+      margin-top: 12px;
+      color: var(--danger);
+      font-size: 0.9rem;
+    }
+
+    .muted {
+      color: var(--muted);
+      font-size: 0.92rem;
+    }
+
+    .table-wrap {
+      overflow-x: auto;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      min-width: 760px;
+    }
+
+    th,
+    td {
+      padding: 14px 16px;
+      border-bottom: 1px solid var(--line);
+      text-align: left;
+      vertical-align: middle;
+    }
+
+    th {
+      background: #f8fafc;
+      color: #475569;
+      font-size: 0.78rem;
+      font-weight: 750;
+      text-transform: uppercase;
+    }
+
+    td {
+      font-size: 0.94rem;
+    }
+
+    .actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .empty {
+      padding: 48px 16px;
+      color: var(--muted);
+      text-align: center;
+    }
+
+    @media (max-width: 720px) {
+      header {
+        align-items: flex-start;
+        flex-direction: column;
+      }
+
+      .main-panel {
+        width: calc(100vw - 20px);
+        margin: 10px auto;
+      }
+    }
+  </style>
+</head>
+<body>
+  <section class="login-shell" id="login-view">
+    <main class="login-panel">
+      <h1>配置记录</h1>
+      <p>输入访问密码查看可下载和导入的配置。</p>
+      <form id="login-form">
+        <label for="password">访问密码</label>
+        <input id="password" name="password" type="password" autocomplete="current-password" required autofocus>
+        <button id="submit-btn" type="submit">进入</button>
+        <div class="error" id="error"></div>
+      </form>
+    </main>
+  </section>
+
+  <section class="main-panel" id="history-view" hidden>
+    <header>
+      <div>
+        <h1>配置生成记录</h1>
+        <div class="muted" id="summary">正在加载...</div>
+      </div>
+    </header>
+    <div class="table-wrap">
+      <table>
+        <thead>
+          <tr>
+            <th>生成时间</th>
+            <th>节点数</th>
+            <th>下载配置</th>
+            <th>复制链接</th>
+            <th>导入客户端</th>
+          </tr>
+        </thead>
+        <tbody id="history-list">
+          <tr>
+            <td colspan="5" class="empty">正在加载记录...</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <script>
+    let appConfig = { publicBaseUrl: '' };
+
+    const loginView = document.getElementById('login-view');
+    const historyView = document.getElementById('history-view');
+    const form = document.getElementById('login-form');
+    const input = document.getElementById('password');
+    const button = document.getElementById('submit-btn');
+    const error = document.getElementById('error');
+    const listEl = document.getElementById('history-list');
+    const summaryEl = document.getElementById('summary');
+
+    function escapeHtml(value) {
+      return String(value ?? '').replace(/[&<>"']/g, ch => ({
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#39;'
+      })[ch]);
+    }
+
+    function getClientImportOrigin() {
+      if (appConfig.publicBaseUrl) {
+        return appConfig.publicBaseUrl;
+      }
+
+      const localHosts = new Set(['localhost', '127.0.0.1', '::1']);
+      if (!localHosts.has(window.location.hostname)) {
+        return window.location.origin;
+      }
+
+      const port = window.location.port ? `:${window.location.port}` : '';
+      return `${window.location.protocol}//127.0.0.1${port}`;
+    }
+
+    async function copyLinkToClipboard(link) {
+      try {
+        if (navigator.clipboard && window.isSecureContext) {
+          await navigator.clipboard.writeText(link);
+        } else {
+          const textarea = document.createElement('textarea');
+          textarea.value = link;
+          textarea.setAttribute('readonly', '');
+          textarea.style.position = 'fixed';
+          textarea.style.left = '-9999px';
+          document.body.appendChild(textarea);
+          textarea.select();
+          document.execCommand('copy');
+          document.body.removeChild(textarea);
+        }
+        summaryEl.textContent = '链接已复制';
+      } catch (e) {
+        summaryEl.textContent = '复制链接失败';
+      }
+    }
+
+    async function loadAppConfig() {
+      try {
+        const res = await fetch('/api/app-config');
+        if (res.ok) {
+          const data = await res.json();
+          appConfig.publicBaseUrl = (data.publicBaseUrl || '').replace(/\/+$/, '');
+        }
+      } catch (e) {
+        appConfig.publicBaseUrl = '';
+      }
+    }
+
+    async function checkSession() {
+      const res = await fetch('/api/session');
+      if (!res.ok) return false;
+      const data = await res.json();
+      return data.authenticated && (data.role === 'viewer' || data.role === 'admin');
+    }
+
+    function showHistory() {
+      loginView.hidden = true;
+      historyView.hidden = false;
+    }
+
+    function showLogin(message = '') {
+      historyView.hidden = true;
+      loginView.hidden = false;
+      error.textContent = message;
+    }
+
+    async function loadHistory() {
+      const res = await fetch('/api/history');
+      if (res.status === 401) {
+        showLogin('请先输入访问密码。');
+        return;
+      }
+      if (!res.ok) {
+        listEl.innerHTML = '<tr><td colspan="5" class="empty">加载记录失败</td></tr>';
+        return;
+      }
+
+      const items = await res.json();
+      summaryEl.textContent = `共 ${items.length} 条记录`;
+      renderHistory(items);
+    }
+
+    function renderHistory(items) {
+      if (!items || items.length === 0) {
+        listEl.innerHTML = '<tr><td colspan="5" class="empty">暂无生成记录</td></tr>';
+        return;
+      }
+
+      const origin = window.location.origin;
+      const clientOrigin = getClientImportOrigin();
+      listEl.innerHTML = '';
+
+      items.forEach(item => {
+        const yamlFileParam = encodeURIComponent(item.yamlFile);
+        const jsonFileParam = encodeURIComponent(item.jsonFile);
+        const yamlTokenParam = item.yamlToken ? `&token=${encodeURIComponent(item.yamlToken)}` : '';
+        const jsonTokenParam = item.jsonToken ? `&token=${encodeURIComponent(item.jsonToken)}` : '';
+        const yamlDownloadUrl = `${origin}/api/download?file=${yamlFileParam}${yamlTokenParam}`;
+        const jsonDownloadUrl = `${origin}/api/download?file=${jsonFileParam}${jsonTokenParam}`;
+        const yamlImportProfileUrl = `${clientOrigin}/api/profile?file=${yamlFileParam}${yamlTokenParam}`;
+        const jsonImportProfileUrl = `${clientOrigin}/api/profile?file=${jsonFileParam}${jsonTokenParam}`;
+        const clashImportUrl = `clash://install-config?url=${encodeURIComponent(yamlImportProfileUrl)}&name=${encodeURIComponent('CatMata-' + item.timeStr.replace(/[: ]/g, '-'))}`;
+        const singboxImportUrl = `sing-box://import-remote-profile?url=${encodeURIComponent(jsonImportProfileUrl)}#${encodeURIComponent('CatMata-' + item.timeStr.replace(/[: ]/g, '-'))}`;
+
+        const tr = document.createElement('tr');
+        tr.innerHTML = `
+          <td>${escapeHtml(item.timeStr)}</td>
+          <td>${escapeHtml(item.nodesCount)} 个节点</td>
+          <td>
+            <div class="actions">
+              <a class="btn btn-secondary" href="${yamlDownloadUrl}" target="_blank">YAML</a>
+              <a class="btn btn-secondary" href="${jsonDownloadUrl}" target="_blank">JSON</a>
+            </div>
+          </td>
+          <td>
+            <div class="actions">
+              <button type="button" class="btn btn-secondary" onclick="copyLinkToClipboard('${yamlImportProfileUrl}')">YAML</button>
+              <button type="button" class="btn btn-secondary" onclick="copyLinkToClipboard('${jsonImportProfileUrl}')">JSON</button>
+            </div>
+          </td>
+          <td>
+            <div class="actions">
+              <a class="btn btn-green" href="${clashImportUrl}">导入 Clash</a>
+              <a class="btn btn-primary" href="${singboxImportUrl}">导入 Sing-box</a>
+            </div>
+          </td>
+        `;
+        listEl.appendChild(tr);
+      });
+    }
+
+    form.addEventListener('submit', async event => {
+      event.preventDefault();
+      error.textContent = '';
+      button.disabled = true;
+      button.textContent = '正在进入...';
+
+      try {
+        const res = await fetch('/api/login', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ role: 'viewer', password: input.value })
+        });
+        const data = await res.json().catch(() => ({}));
+        if (!res.ok) {
+          throw new Error(data.error || '密码不正确');
+        }
+        showHistory();
+        await loadHistory();
+      } catch (e) {
+        error.textContent = e.message;
+      } finally {
+        button.disabled = false;
+        button.textContent = '进入';
+      }
+    });
+
+    (async function init() {
+      await loadAppConfig();
+      if (await checkSession()) {
+        showHistory();
+        await loadHistory();
+      } else {
+        showLogin();
+      }
+    })();
+  </script>
+</body>
+</html>

sub2proxy.js

@@ -2,6 +2,7 @@
 const fs = require('fs');
 const path = require('path');
 const http = require('http');
+const crypto = require('crypto');
 const { execSync, exec } = require('child_process');
 
 // Auto-install js-yaml if missing
@@ -415,6 +416,13 @@ const PORT = Number.parseInt(process.env.PORT || '3000', 10);
 const HOST = process.env.HOST || '0.0.0.0';
 const PUBLIC_BASE_URL = String(process.env.PUBLIC_BASE_URL || '').trim().replace(/\/+$/, '');
 const AUTO_OPEN = !['0', 'false', 'no', 'off'].includes(String(process.env.AUTO_OPEN || '1').toLowerCase());
+const ADMIN_PASSWORD = process.env.ADMIN_PASSWORD || 'admin';
+const VIEWER_PASSWORD = process.env.VIEWER_PASSWORD || 'viewer';
+const SESSION_SECRET = process.env.SESSION_SECRET || ADMIN_PASSWORD || 'sub2proxy-session-secret';
+const LINK_TOKEN_SECRET = process.env.LINK_TOKEN_SECRET || SESSION_SECRET;
+const SESSION_COOKIE = 'sub2proxy_session';
+const SESSION_TTL_MS = 7 * 24 * 60 * 60 * 1000;
+const sessions = new Map();
 
 // Central configuration generation function
 function generateConfigs(rawClashNodes, dns = null) {
@@ -564,22 +572,168 @@ function readJsonBody(req) {
   });
 }
 
+function sendJson(res, statusCode, payload) {
+  res.writeHead(statusCode, { 'Content-Type': 'application/json; charset=utf-8' });
+  res.end(JSON.stringify(payload));
+}
+
+function serveHtml(res, fileName) {
+  const htmlPath = path.join(__dirname, 'public', fileName);
+  if (fs.existsSync(htmlPath)) {
+    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+    res.end(fs.readFileSync(htmlPath));
+  } else {
+    res.writeHead(404);
+    res.end(`${fileName} not found`);
+  }
+}
+
+function redirect(res, location) {
+  res.writeHead(302, { Location: location });
+  res.end();
+}
+
+function parseCookies(req) {
+  const header = req.headers.cookie || '';
+  const cookies = {};
+  header.split(';').forEach(part => {
+    const index = part.indexOf('=');
+    if (index === -1) return;
+    const key = part.slice(0, index).trim();
+    const value = part.slice(index + 1).trim();
+    if (key) {
+      try {
+        cookies[key] = decodeURIComponent(value);
+      } catch (e) {
+        cookies[key] = value;
+      }
+    }
+  });
+  return cookies;
+}
+
+function setSessionCookie(res, token) {
+  const maxAge = Math.floor(SESSION_TTL_MS / 1000);
+  res.setHeader('Set-Cookie', `${SESSION_COOKIE}=${encodeURIComponent(token)}; Path=/; HttpOnly; SameSite=Lax; Max-Age=${maxAge}`);
+}
+
+function clearSessionCookie(res) {
+  res.setHeader('Set-Cookie', `${SESSION_COOKIE}=; Path=/; HttpOnly; SameSite=Lax; Max-Age=0`);
+}
+
+function safeCompare(a, b) {
+  const left = Buffer.from(String(a || ''));
+  const right = Buffer.from(String(b || ''));
+  if (left.length !== right.length) return false;
+  return crypto.timingSafeEqual(left, right);
+}
+
+function authenticatePassword(password, requestedRole = 'admin') {
+  if (requestedRole === 'viewer' && safeCompare(password, VIEWER_PASSWORD)) {
+    return 'viewer';
+  }
+  if (safeCompare(password, ADMIN_PASSWORD)) {
+    return 'admin';
+  }
+  return null;
+}
+
+function createSession(role) {
+  const token = crypto.randomBytes(32).toString('hex');
+  sessions.set(token, {
+    role,
+    expiresAt: Date.now() + SESSION_TTL_MS
+  });
+  return token;
+}
+
+function getSession(req) {
+  const token = parseCookies(req)[SESSION_COOKIE];
+  if (!token) return null;
+  const session = sessions.get(token);
+  if (!session) return null;
+  if (session.expiresAt < Date.now()) {
+    sessions.delete(token);
+    return null;
+  }
+  session.expiresAt = Date.now() + SESSION_TTL_MS;
+  return session;
+}
+
+function hasRole(req, roles) {
+  const session = getSession(req);
+  if (!session) return false;
+  if (roles.includes(session.role)) return true;
+  return roles.includes('viewer') && session.role === 'admin';
+}
+
+function requireRole(req, res, roles) {
+  if (hasRole(req, roles)) return true;
+  sendJson(res, 401, { error: 'Unauthorized' });
+  return false;
+}
+
+function getHistoryList() {
+  const historyJsonPath = path.join(outDir, 'history', 'history.json');
+  if (!fs.existsSync(historyJsonPath)) return [];
+  try {
+    return JSON.parse(fs.readFileSync(historyJsonPath, 'utf-8'));
+  } catch (e) {
+    console.error("Failed to parse history.json:", e.message);
+    return [];
+  }
+}
+
+function signFileName(fileName) {
+  return crypto.createHmac('sha256', LINK_TOKEN_SECRET).update(fileName).digest('hex');
+}
+
+function withFileTokens(historyList) {
+  return historyList.map(item => ({
+    ...item,
+    yamlToken: signFileName(item.yamlFile),
+    jsonToken: signFileName(item.jsonFile)
+  }));
+}
+
+function hasFileAccess(req, fileName, token) {
+  if (hasRole(req, ['admin', 'viewer'])) return true;
+  return Boolean(token) && safeCompare(token, signFileName(fileName));
+}
+
 // HTTP Server setup
 function startServer() {
   const server = http.createServer(async (req, res) => {
     const parsedUrl = new URL(req.url, `http://${req.headers.host}`);
     const pathname = parsedUrl.pathname;
 
-    // Static Index file
-    if (pathname === '/' || pathname === '/index.html') {
-      const htmlPath = path.join(__dirname, 'public', 'index.html');
-      if (fs.existsSync(htmlPath)) {
-        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
-        res.end(fs.readFileSync(htmlPath));
-      } else {
-        res.writeHead(404);
-        res.end('index.html not found');
+    if (pathname === '/login' || pathname === '/login.html') {
+      serveHtml(res, 'login.html');
+      return;
     }
+
+    if (pathname === '/viewer' || pathname === '/viewer.html') {
+      redirect(res, '/sub');
+      return;
+    }
+
+    if (pathname === '/sub' || pathname === '/sub/') {
+      serveHtml(res, 'viewer.html');
+      return;
+    }
+
+    if (pathname === '/' || pathname === '/index.html') {
+      redirect(res, '/config');
+      return;
+    }
+
+    // Static Index file
+    if (pathname === '/config' || pathname === '/config/') {
+      if (!hasRole(req, ['admin'])) {
+        redirect(res, '/login.html');
+        return;
+      }
+      serveHtml(res, 'index.html');
       return;
     }
 
@@ -590,6 +744,43 @@ function startServer() {
       return;
     }
 
+    // API: GET /api/session
+    if (pathname === '/api/session' && req.method === 'GET') {
+      const session = getSession(req);
+      sendJson(res, 200, { authenticated: Boolean(session), role: session ? session.role : null });
+      return;
+    }
+
+    // API: POST /api/login
+    if (pathname === '/api/login' && req.method === 'POST') {
+      try {
+        const { password, role } = await readJsonBody(req);
+        const nextRole = authenticatePassword(password, role);
+        if (!nextRole) {
+          sendJson(res, 401, { error: '密码不正确' });
+          return;
+        }
+
+        const token = createSession(nextRole);
+        setSessionCookie(res, token);
+        sendJson(res, 200, {
+          success: true,
+          role: nextRole,
+          redirectTo: nextRole === 'admin' ? '/config' : '/sub'
+        });
+      } catch (e) {
+        sendJson(res, 400, { error: e.message });
+      }
+      return;
+    }
+
+    // API: POST /api/logout
+    if (pathname === '/api/logout' && req.method === 'POST') {
+      clearSessionCookie(res);
+      sendJson(res, 200, { success: true });
+      return;
+    }
+
     // API: GET /api/app-config
     if (pathname === '/api/app-config' && req.method === 'GET') {
       res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8' });
@@ -599,6 +790,7 @@ function startServer() {
 
     // API: GET /api/subs
     if (pathname === '/api/subs' && req.method === 'GET') {
+      if (!requireRole(req, res, ['admin'])) return;
       if (fs.existsSync(subsFile)) {
         res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8' });
         res.end(fs.readFileSync(subsFile));
@@ -611,6 +803,7 @@ function startServer() {
 
     // API: POST /api/subs
     if (pathname === '/api/subs' && req.method === 'POST') {
+      if (!requireRole(req, res, ['admin'])) return;
       try {
         const payload = await readJsonBody(req);
         fs.writeFileSync(subsFile, JSON.stringify(payload, null, 2), 'utf-8');
@@ -625,6 +818,7 @@ function startServer() {
 
     // API: GET /api/dns
     if (pathname === '/api/dns' && req.method === 'GET') {
+      if (!requireRole(req, res, ['admin'])) return;
       try {
         const { yamlTpl, jsonTpl } = detectTemplates();
         const clashConfig = yaml.load(fs.readFileSync(yamlTpl, 'utf-8')) || {};
@@ -644,6 +838,7 @@ function startServer() {
 
     // API: POST /api/fetch (Fetches and converts in-memory)
     if (pathname === '/api/fetch' && req.method === 'POST') {
+      if (!requireRole(req, res, ['admin'])) return;
       try {
         if (!fs.existsSync(subsFile)) {
           res.writeHead(400);
@@ -696,6 +891,7 @@ function startServer() {
 
     // API: POST /api/generate (Generates and writes configurations)
     if (pathname === '/api/generate' && req.method === 'POST') {
+      if (!requireRole(req, res, ['admin'])) return;
       try {
         const { proxies: rawClashNodes, dns } = await readJsonBody(req);
         if (!rawClashNodes || !Array.isArray(rawClashNodes) || rawClashNodes.length === 0) {
@@ -717,20 +913,15 @@ function startServer() {
 
     // API: GET /api/history
     if (pathname === '/api/history' && req.method === 'GET') {
-      const historyJsonPath = path.join(outDir, 'history', 'history.json');
-      if (fs.existsSync(historyJsonPath)) {
-        res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8' });
-        res.end(fs.readFileSync(historyJsonPath));
-      } else {
-        res.writeHead(200, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify([]));
-      }
+      if (!requireRole(req, res, ['admin', 'viewer'])) return;
+      sendJson(res, 200, withFileTokens(getHistoryList()));
       return;
     }
 
     // API: GET /api/download
     if (pathname === '/api/download' && req.method === 'GET') {
       const fileName = parsedUrl.searchParams.get('file');
+      const token = parsedUrl.searchParams.get('token');
       if (!fileName) {
         res.writeHead(400);
         res.end('Missing file parameter');
@@ -745,6 +936,12 @@ function startServer() {
         return;
       }
 
+      if (!hasFileAccess(req, fileName, token)) {
+        res.writeHead(401);
+        res.end('Unauthorized');
+        return;
+      }
+
       const filePath = path.join(outDir, 'history', fileName);
       if (fs.existsSync(filePath)) {
         const isYaml = fileName.endsWith('.yaml');
@@ -764,6 +961,7 @@ function startServer() {
     // Remote import clients should receive the profile body directly, not as a browser attachment.
     if (pathname === '/api/profile' && req.method === 'GET') {
       const fileName = parsedUrl.searchParams.get('file');
+      const token = parsedUrl.searchParams.get('token');
       if (!fileName) {
         res.writeHead(400);
         res.end('Missing file parameter');
@@ -777,6 +975,12 @@ function startServer() {
         return;
       }
 
+      if (!hasFileAccess(req, fileName, token)) {
+        res.writeHead(401);
+        res.end('Unauthorized');
+        return;
+      }
+
       const filePath = path.join(outDir, 'history', fileName);
       if (fs.existsSync(filePath)) {
         const isYaml = fileName.endsWith('.yaml');
@@ -795,6 +999,7 @@ function startServer() {
 
     // API: POST /api/history/delete
     if (pathname === '/api/history/delete' && req.method === 'POST') {
+      if (!requireRole(req, res, ['admin'])) return;
       try {
         const { yamlFile, jsonFile } = await readJsonBody(req);
         if (!yamlFile || !jsonFile) {