copilot-router 1.1.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "copilot-router",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "GitHub Copilot API with OpenAI, Anthropic, and Gemini compatibility",
   "type": "module",
   "main": "./dist/main.js",

package/public/app.js

@@ -0,0 +1,287 @@
+// Internationalization (i18n)
+const i18n = {
+    zh: {
+        subtitle: 'GitHub Copilot API 代理服务',
+        tab_login: '设备码登录',
+        tab_direct: '直接添加 Token',
+        tab_manage: '管理 Tokens',
+        login_desc: '使用 GitHub 设备码流程登录，支持添加多个账号实现负载均衡。',
+        btn_start_login: '开始登录',
+        enter_code: '请在 GitHub 输入此验证码：',
+        open_github: '点击这里打开 GitHub 验证页面 →',
+        waiting_auth: '等待授权中... 请在 GitHub 完成验证',
+        login_success: '✅ 登录成功！',
+        btn_add_another: '添加另一个账号',
+        login_failed: '登录失败',
+        btn_retry: '重试',
+        direct_desc: '如果你已经有 GitHub Token，可以直接添加：',
+        token_placeholder: '输入 GitHub Token (ghu_xxx 或 gho_xxx)',
+        btn_add_token: '添加 Token',
+        btn_refresh: '刷新列表',
+        click_refresh: '点击刷新加载 Token 列表',
+        no_tokens: '暂无 Token，请先登录添加',
+        token_count: '共 {total} 个 Token，{active} 个活跃',
+        active: '✅ 活跃',
+        inactive: '❌ 停用',
+        requests: '请求',
+        btn_delete: '删除',
+        confirm_delete: '确定要删除这个 Token 吗？',
+        delete_failed: '删除失败',
+        load_failed: '加载失败',
+        add_failed: '添加失败',
+        add_success: '✅ 添加成功',
+        enter_token: '请输入 Token',
+        connect_failed: '无法连接服务器',
+        timeout: '验证超时，请重试',
+        auth_failed: '授权失败',
+        account_added: '已添加账号'
+    },
+    en: {
+        subtitle: 'GitHub Copilot API Proxy Service',
+        tab_login: 'Device Code Login',
+        tab_direct: 'Add Token Directly',
+        tab_manage: 'Manage Tokens',
+        login_desc: 'Login using GitHub device code flow, supports adding multiple accounts for load balancing.',
+        btn_start_login: 'Start Login',
+        enter_code: 'Enter this code on GitHub:',
+        open_github: 'Click here to open GitHub verification page →',
+        waiting_auth: 'Waiting for authorization... Please complete verification on GitHub',
+        login_success: '✅ Login successful!',
+        btn_add_another: 'Add Another Account',
+        login_failed: 'Login failed',
+        btn_retry: 'Retry',
+        direct_desc: 'If you already have a GitHub Token, you can add it directly:',
+        token_placeholder: 'Enter GitHub Token (ghu_xxx or gho_xxx)',
+        btn_add_token: 'Add Token',
+        btn_refresh: 'Refresh List',
+        click_refresh: 'Click refresh to load Token list',
+        no_tokens: 'No tokens yet, please login to add',
+        token_count: 'Total {total} tokens, {active} active',
+        active: '✅ Active',
+        inactive: '❌ Inactive',
+        requests: 'Requests',
+        btn_delete: 'Delete',
+        confirm_delete: 'Are you sure you want to delete this token?',
+        delete_failed: 'Delete failed',
+        load_failed: 'Load failed',
+        add_failed: 'Add failed',
+        add_success: '✅ Added successfully',
+        enter_token: 'Please enter Token',
+        connect_failed: 'Cannot connect to server',
+        timeout: 'Verification timeout, please retry',
+        auth_failed: 'Authorization failed',
+        account_added: 'Account added'
+    }
+};
+
+let currentLang = localStorage.getItem('copilot-router-lang') || 'zh';
+
+function t(key, params = {}) {
+    let text = i18n[currentLang][key] || key;
+    Object.keys(params).forEach(k => {
+        text = text.replace(`{${k}}`, params[k]);
+    });
+    return text;
+}
+
+function updatePageLanguage() {
+    document.documentElement.lang = currentLang === 'zh' ? 'zh-CN' : 'en';
+    document.getElementById('langBtn').textContent = currentLang === 'zh' ? 'EN' : '中文';
+
+    // Update all elements with data-i18n attribute
+    document.querySelectorAll('[data-i18n]').forEach(el => {
+        const key = el.getAttribute('data-i18n');
+        el.textContent = t(key);
+    });
+
+    // Update placeholders
+    document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
+        const key = el.getAttribute('data-i18n-placeholder');
+        el.placeholder = t(key);
+    });
+}
+
+function toggleLanguage() {
+    currentLang = currentLang === 'zh' ? 'en' : 'zh';
+    localStorage.setItem('copilot-router-lang', currentLang);
+    updatePageLanguage();
+}
+
+// Apply language settings on page load
+document.addEventListener('DOMContentLoaded', updatePageLanguage);
+
+let deviceCode = null;
+let pollInterval = null;
+
+function showTab(tab) {
+    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+    document.querySelectorAll('.tabs .tab').forEach((t, i) => {
+        if ((tab === 'login' && i === 0) || (tab === 'direct' && i === 1) || (tab === 'tokens' && i === 2)) {
+            t.classList.add('active');
+        }
+    });
+    document.getElementById('tab-login').style.display = tab === 'login' ? 'block' : 'none';
+    document.getElementById('tab-direct').style.display = tab === 'direct' ? 'block' : 'none';
+    document.getElementById('tab-tokens').style.display = tab === 'tokens' ? 'block' : 'none';
+
+    if (tab === 'tokens') loadTokens();
+}
+
+async function startLogin() {
+    try {
+        const res = await fetch('/auth/login', { method: 'POST' });
+        const data = await res.json();
+
+        if (data.error) {
+            showError(data.error.message);
+            return;
+        }
+
+        deviceCode = data;
+        document.getElementById('userCode').textContent = data.user_code;
+        document.getElementById('verifyLink').href = data.verification_uri;
+
+        showStep('step2');
+        startPolling();
+    } catch (e) {
+        showError(t('connect_failed'));
+    }
+}
+
+function startPolling() {
+    pollInterval = setInterval(async () => {
+        try {
+            const res = await fetch('/auth/complete', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    device_code: deviceCode.device_code,
+                    interval: deviceCode.interval,
+                    expires_in: deviceCode.expires_in
+                })
+            });
+            const data = await res.json();
+
+            // Handle new response format
+            if (data.status === 'pending' || data.status === 'processing' || data.status === 'slow_down') {
+                // Waiting for authorization or processing, continue polling
+                return;
+            }
+
+            if (data.status === 'success') {
+                clearInterval(pollInterval);
+                pollInterval = null;
+                document.getElementById('successMessage').textContent =
+                    `${t('account_added')}: ${data.username || 'Unknown'}`;
+                showStep('step3');
+                return;
+            }
+
+            if (data.error) {
+                clearInterval(pollInterval);
+                pollInterval = null;
+                showError(data.error.message || t('auth_failed'));
+                return;
+            }
+        } catch (e) {
+            // Network error, continue polling
+            console.error('Polling error:', e);
+        }
+    }, (deviceCode.interval + 1) * 1000);
+
+    // Timeout handling
+    setTimeout(() => {
+        if (pollInterval) {
+            clearInterval(pollInterval);
+            showError(t('timeout'));
+        }
+    }, deviceCode.expires_in * 1000);
+}
+
+async function addTokenDirect() {
+    const token = document.getElementById('directToken').value.trim();
+    if (!token) {
+        document.getElementById('directResult').innerHTML =
+            `<div class="status error" style="margin-top:15px">${t('enter_token')}</div>`;
+        return;
+    }
+
+    try {
+        const res = await fetch('/auth/tokens', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ github_token: token })
+        });
+        const data = await res.json();
+
+        if (data.error) {
+            document.getElementById('directResult').innerHTML =
+                `<div class="status error" style="margin-top:15px">${data.error.message}</div>`;
+        } else {
+            document.getElementById('directResult').innerHTML =
+                `<div class="status success" style="margin-top:15px">${t('add_success')}: ${data.username}</div>`;
+            document.getElementById('directToken').value = '';
+        }
+    } catch (e) {
+        document.getElementById('directResult').innerHTML =
+            `<div class="status error" style="margin-top:15px">${t('add_failed')}</div>`;
+    }
+}
+
+async function loadTokens() {
+    try {
+        const res = await fetch('/auth/tokens');
+        const data = await res.json();
+
+        if (!data.tokens || data.tokens.length === 0) {
+            document.getElementById('tokenList').innerHTML =
+                `<p style="color: #666; text-align: center; padding: 20px;">${t('no_tokens')}</p>`;
+            return;
+        }
+
+        let html = `<p style="margin-bottom:15px">${t('token_count', { total: data.total, active: data.active })}</p>`;
+        for (const tok of data.tokens) {
+            html += `
+        <div class="token-item">
+          <div class="token-info">
+            <strong>${tok.username || 'Unknown'}</strong><br>
+            <small>ID: ${tok.id} | ${tok.is_active ? t('active') : t('inactive')} | ${t('requests')}: ${tok.request_count}</small>
+          </div>
+          <button class="btn-delete" onclick="deleteToken(${tok.id})">${t('btn_delete')}</button>
+        </div>
+      `;
+        }
+        document.getElementById('tokenList').innerHTML = html;
+    } catch (e) {
+        document.getElementById('tokenList').innerHTML =
+            `<p style="color: red; text-align: center; padding: 20px;">${t('load_failed')}</p>`;
+    }
+}
+
+async function deleteToken(id) {
+    if (!confirm(t('confirm_delete'))) return;
+
+    try {
+        await fetch(`/auth/tokens/${id}`, { method: 'DELETE' });
+        loadTokens();
+    } catch (e) {
+        alert(t('delete_failed'));
+    }
+}
+
+function showStep(stepId) {
+    document.querySelectorAll('#tab-login .step').forEach(s => s.classList.remove('active'));
+    document.getElementById(stepId).classList.add('active');
+}
+
+function showError(message) {
+    if (pollInterval) clearInterval(pollInterval);
+    document.getElementById('errorMessage').textContent = message;
+    showStep('stepError');
+}
+
+function resetLogin() {
+    if (pollInterval) clearInterval(pollInterval);
+    deviceCode = null;
+    showStep('step1');
+}

package/public/index.html

@@ -1,419 +1,81 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Copilot Router - 登录</title>
-  <style>
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 20px;
-    }
-    .container {
-      background: white;
-      border-radius: 16px;
-      padding: 40px;
-      max-width: 500px;
-      width: 100%;
-      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
-    }
-    h1 {
-      color: #333;
-      margin-bottom: 10px;
-      font-size: 28px;
-    }
-    .subtitle {
-      color: #666;
-      margin-bottom: 30px;
-    }
-    .step {
-      display: none;
-      animation: fadeIn 0.3s ease;
-    }
-    .step.active { display: block; }
-    @keyframes fadeIn {
-      from { opacity: 0; transform: translateY(10px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-    button {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      color: white;
-      border: none;
-      padding: 14px 28px;
-      border-radius: 8px;
-      font-size: 16px;
-      cursor: pointer;
-      width: 100%;
-      transition: transform 0.2s, box-shadow 0.2s;
-    }
-    button:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
-    }
-    button:disabled {
-      background: #ccc;
-      cursor: not-allowed;
-      transform: none;
-      box-shadow: none;
-    }
-    .code-box {
-      background: #f5f5f5;
-      border: 2px dashed #667eea;
-      border-radius: 12px;
-      padding: 30px;
-      text-align: center;
-      margin: 20px 0;
-    }
-    .user-code {
-      font-size: 36px;
-      font-weight: bold;
-      color: #667eea;
-      letter-spacing: 4px;
-      font-family: monospace;
-    }
-    .verify-link {
-      display: inline-block;
-      margin-top: 15px;
-      color: #764ba2;
-      text-decoration: none;
-      font-weight: 500;
-    }
-    .verify-link:hover { text-decoration: underline; }
-    .status {
-      padding: 15px;
-      border-radius: 8px;
-      margin: 20px 0;
-      text-align: center;
-    }
-    .status.waiting {
-      background: #fff3cd;
-      color: #856404;
-    }
-    .status.success {
-      background: #d4edda;
-      color: #155724;
-    }
-    .status.error {
-      background: #f8d7da;
-      color: #721c24;
-    }
-    .spinner {
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      border: 3px solid #f3f3f3;
-      border-top: 3px solid #667eea;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-      margin-right: 10px;
-      vertical-align: middle;
-    }
-    @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
-    }
-    .token-list {
-      margin-top: 20px;
-    }
-    .token-item {
-      background: #f8f9fa;
-      padding: 15px;
-      border-radius: 8px;
-      margin-bottom: 10px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .token-info strong {
-      color: #333;
-    }
-    .token-info small {
-      color: #666;
-    }
-    .btn-delete {
-      background: #dc3545;
-      padding: 8px 16px;
-      font-size: 14px;
-      width: auto;
-    }
-    .tabs {
-      display: flex;
-      margin-bottom: 20px;
-      border-bottom: 2px solid #eee;
-    }
-    .tab {
-      padding: 10px 20px;
-      cursor: pointer;
-      border-bottom: 2px solid transparent;
-      margin-bottom: -2px;
-      color: #666;
-    }
-    .tab.active {
-      border-bottom-color: #667eea;
-      color: #667eea;
-      font-weight: 500;
-    }
-    input[type="text"] {
-      width: 100%;
-      padding: 12px;
-      border: 2px solid #ddd;
-      border-radius: 8px;
-      font-size: 14px;
-      margin-bottom: 15px;
-    }
-    input[type="text"]:focus {
-      border-color: #667eea;
-      outline: none;
-    }
-  </style>
+  <title>Copilot Router</title>
+  <link rel="stylesheet" href="/static/style.css">
 </head>
+
 <body>
   <div class="container">
+    <button class="lang-switch" onclick="toggleLanguage()" id="langBtn">EN</button>
     <h1>🚀 Copilot Router</h1>
-    <p class="subtitle">GitHub Copilot API 代理服务</p>
+    <p class="subtitle" data-i18n="subtitle">GitHub Copilot API 代理服务</p>
 
     <div class="tabs">
-      <div class="tab active" onclick="showTab('login')">设备码登录</div>
-      <div class="tab" onclick="showTab('direct')">直接添加 Token</div>
-      <div class="tab" onclick="showTab('tokens')">管理 Tokens</div>
+      <div class="tab active" onclick="showTab('login')" data-i18n="tab_login">设备码登录</div>
+      <div class="tab" onclick="showTab('direct')" data-i18n="tab_direct">直接添加 Token</div>
+      <div class="tab" onclick="showTab('tokens')" data-i18n="tab_manage">管理 Tokens</div>
     </div>
 
     <!-- 设备码登录 -->
     <div id="tab-login">
       <div id="step1" class="step active">
-        <p style="margin-bottom: 20px;">使用 GitHub 设备码流程登录，支持添加多个账号实现负载均衡。</p>
-        <button onclick="startLogin()">开始登录</button>
+        <p style="margin-bottom: 20px;" data-i18n="login_desc">使用 GitHub 设备码流程登录，支持添加多个账号实现负载均衡。</p>
+        <button onclick="startLogin()" data-i18n="btn_start_login">开始登录</button>
       </div>
 
       <div id="step2" class="step">
         <div class="code-box">
-          <p>请在 GitHub 输入此验证码：</p>
+          <p data-i18n="enter_code">请在 GitHub 输入此验证码：</p>
           <div class="user-code" id="userCode">----</div>
-          <a href="#" id="verifyLink" class="verify-link" target="_blank">
+          <a href="#" id="verifyLink" class="verify-link" target="_blank" data-i18n="open_github">
             点击这里打开 GitHub 验证页面 →
           </a>
         </div>
         <div class="status waiting">
           <span class="spinner"></span>
-          等待授权中... 请在 GitHub 完成验证
+          <span data-i18n="waiting_auth">等待授权中... 请在 GitHub 完成验证</span>
         </div>
       </div>
 
       <div id="step3" class="step">
-        <div class="status success">
+        <div class="status success" data-i18n="login_success">
           ✅ 登录成功！
         </div>
         <p id="successMessage" style="text-align: center; margin: 20px 0;"></p>
-        <button onclick="resetLogin()">添加另一个账号</button>
+        <button onclick="resetLogin()" data-i18n="btn_add_another">添加另一个账号</button>
       </div>
 
       <div id="stepError" class="step">
         <div class="status error">
-          ❌ <span id="errorMessage">登录失败</span>
+          ❌ <span id="errorMessage" data-i18n="login_failed">登录失败</span>
         </div>
-        <button onclick="resetLogin()" style="margin-top: 15px;">重试</button>
+        <button onclick="resetLogin()" style="margin-top: 15px;" data-i18n="btn_retry">重试</button>
       </div>
     </div>
 
     <!-- 直接添加 Token -->
     <div id="tab-direct" style="display: none;">
-      <p style="margin-bottom: 20px;">如果你已经有 GitHub Token，可以直接添加：</p>
-      <input type="text" id="directToken" placeholder="输入 GitHub Token (ghu_xxx 或 gho_xxx)">
-      <button onclick="addTokenDirect()">添加 Token</button>
+      <p style="margin-bottom: 20px;" data-i18n="direct_desc">如果你已经有 GitHub Token，可以直接添加：</p>
+      <input type="text" id="directToken" data-i18n-placeholder="token_placeholder"
+        placeholder="输入 GitHub Token (ghu_xxx 或 gho_xxx)">
+      <button onclick="addTokenDirect()" data-i18n="btn_add_token">添加 Token</button>
       <div id="directResult"></div>
     </div>
 
     <!-- 管理 Tokens -->
     <div id="tab-tokens" style="display: none;">
-      <button onclick="loadTokens()">刷新列表</button>
+      <button onclick="loadTokens()" data-i18n="btn_refresh">刷新列表</button>
       <div id="tokenList" class="token-list">
-        <p style="color: #666; text-align: center; padding: 20px;">点击刷新加载 Token 列表</p>
+        <p style="color: #666; text-align: center; padding: 20px;" data-i18n="click_refresh">点击刷新加载 Token 列表</p>
       </div>
     </div>
   </div>
 
-  <script>
-    let deviceCode = null;
-    let pollInterval = null;
-
-    function showTab(tab) {
-      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-      document.querySelectorAll('.tabs .tab').forEach((t, i) => {
-        if ((tab === 'login' && i === 0) || (tab === 'direct' && i === 1) || (tab === 'tokens' && i === 2)) {
-          t.classList.add('active');
-        }
-      });
-      document.getElementById('tab-login').style.display = tab === 'login' ? 'block' : 'none';
-      document.getElementById('tab-direct').style.display = tab === 'direct' ? 'block' : 'none';
-      document.getElementById('tab-tokens').style.display = tab === 'tokens' ? 'block' : 'none';
-      
-      if (tab === 'tokens') loadTokens();
-    }
-
-    async function startLogin() {
-      try {
-        const res = await fetch('/auth/login', { method: 'POST' });
-        const data = await res.json();
-        
-        if (data.error) {
-          showError(data.error.message);
-          return;
-        }
-
-        deviceCode = data;
-        document.getElementById('userCode').textContent = data.user_code;
-        document.getElementById('verifyLink').href = data.verification_uri;
-        
-        showStep('step2');
-        startPolling();
-      } catch (e) {
-        showError('无法连接服务器');
-      }
-    }
-
-    function startPolling() {
-      pollInterval = setInterval(async () => {
-        try {
-          const res = await fetch('/auth/complete', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              device_code: deviceCode.device_code,
-              interval: deviceCode.interval,
-              expires_in: deviceCode.expires_in
-            })
-          });
-          const data = await res.json();
-          
-          // 处理新的响应格式
-          if (data.status === 'pending' || data.status === 'processing' || data.status === 'slow_down') {
-            // 还在等待授权或处理中，继续轮询
-            return;
-          }
-          
-          if (data.status === 'success') {
-            clearInterval(pollInterval);
-            pollInterval = null;
-            document.getElementById('successMessage').textContent = 
-              `已添加账号: ${data.username || 'Unknown'}`;
-            showStep('step3');
-            return;
-          }
-          
-          if (data.error) {
-            clearInterval(pollInterval);
-            pollInterval = null;
-            showError(data.error.message || '授权失败');
-            return;
-          }
-        } catch (e) {
-          // 网络错误，继续轮询
-          console.error('Polling error:', e);
-        }
-      }, (deviceCode.interval + 1) * 1000);
-
-      // 超时处理
-      setTimeout(() => {
-        if (pollInterval) {
-          clearInterval(pollInterval);
-          showError('验证超时，请重试');
-        }
-      }, deviceCode.expires_in * 1000);
-    }
-
-    async function addTokenDirect() {
-      const token = document.getElementById('directToken').value.trim();
-      if (!token) {
-        document.getElementById('directResult').innerHTML = 
-          '<div class="status error" style="margin-top:15px">请输入 Token</div>';
-        return;
-      }
-
-      try {
-        const res = await fetch('/auth/tokens', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ github_token: token })
-        });
-        const data = await res.json();
-        
-        if (data.error) {
-          document.getElementById('directResult').innerHTML = 
-            `<div class="status error" style="margin-top:15px">${data.error.message}</div>`;
-        } else {
-          document.getElementById('directResult').innerHTML = 
-            `<div class="status success" style="margin-top:15px">✅ 添加成功: ${data.username}</div>`;
-          document.getElementById('directToken').value = '';
-        }
-      } catch (e) {
-        document.getElementById('directResult').innerHTML = 
-          '<div class="status error" style="margin-top:15px">添加失败</div>';
-      }
-    }
-
-    async function loadTokens() {
-      try {
-        const res = await fetch('/auth/tokens');
-        const data = await res.json();
-        
-        if (!data.tokens || data.tokens.length === 0) {
-          document.getElementById('tokenList').innerHTML = 
-            '<p style="color: #666; text-align: center; padding: 20px;">暂无 Token，请先登录添加</p>';
-          return;
-        }
-
-        let html = `<p style="margin-bottom:15px">共 ${data.total} 个 Token，${data.active} 个活跃</p>`;
-        for (const t of data.tokens) {
-          html += `
-            <div class="token-item">
-              <div class="token-info">
-                <strong>${t.username || 'Unknown'}</strong><br>
-                <small>ID: ${t.id} | ${t.is_active ? '✅ 活跃' : '❌ 停用'} | 请求: ${t.request_count}</small>
-              </div>
-              <button class="btn-delete" onclick="deleteToken(${t.id})">删除</button>
-            </div>
-          `;
-        }
-        document.getElementById('tokenList').innerHTML = html;
-      } catch (e) {
-        document.getElementById('tokenList').innerHTML = 
-          '<p style="color: red; text-align: center; padding: 20px;">加载失败</p>';
-      }
-    }
-
-    async function deleteToken(id) {
-      if (!confirm('确定要删除这个 Token 吗？')) return;
-      
-      try {
-        await fetch(`/auth/tokens/${id}`, { method: 'DELETE' });
-        loadTokens();
-      } catch (e) {
-        alert('删除失败');
-      }
-    }
-
-    function showStep(stepId) {
-      document.querySelectorAll('#tab-login .step').forEach(s => s.classList.remove('active'));
-      document.getElementById(stepId).classList.add('active');
-    }
-
-    function showError(message) {
-      if (pollInterval) clearInterval(pollInterval);
-      document.getElementById('errorMessage').textContent = message;
-      showStep('stepError');
-    }
-
-    function resetLogin() {
-      if (pollInterval) clearInterval(pollInterval);
-      deviceCode = null;
-      showStep('step1');
-    }
-  </script>
+  <script src="/static/app.js"></script>
 </body>
-</html>
+
+</html>

package/public/style.css

@@ -0,0 +1,279 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.container {
+  background: white;
+  border-radius: 16px;
+  padding: 40px;
+  max-width: 500px;
+  width: 100%;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  position: relative;
+}
+
+.lang-switch {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  background: rgba(255, 255, 255, 0.8);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  color: #666;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  z-index: 10;
+  backdrop-filter: blur(5px);
+  width: auto;
+  box-shadow: none;
+}
+
+.lang-switch:hover {
+  background: white;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  color: #667eea;
+}
+
+.lang-switch::before {
+  content: "🌐";
+  font-size: 14px;
+}
+
+h1 {
+  color: #333;
+  margin-bottom: 10px;
+  font-size: 28px;
+}
+
+.subtitle {
+  color: #666;
+  margin-bottom: 30px;
+}
+
+.step {
+  display: none;
+  animation: fadeIn 0.3s ease;
+}
+
+.step.active {
+  display: block;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  padding: 14px 28px;
+  border-radius: 8px;
+  font-size: 16px;
+  cursor: pointer;
+  width: 100%;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
+}
+
+button:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.code-box {
+  background: #f5f5f5;
+  border: 2px dashed #667eea;
+  border-radius: 12px;
+  padding: 30px;
+  text-align: center;
+  margin: 20px 0;
+}
+
+.user-code {
+  font-size: 36px;
+  font-weight: bold;
+  color: #667eea;
+  letter-spacing: 4px;
+  font-family: monospace;
+}
+
+.verify-link {
+  display: inline-block;
+  margin-top: 15px;
+  color: #764ba2;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.verify-link:hover {
+  text-decoration: underline;
+}
+
+.status {
+  padding: 15px;
+  border-radius: 8px;
+  margin: 20px 0;
+  text-align: center;
+}
+
+.status.waiting {
+  background: #fff3cd;
+  color: #856404;
+}
+
+.status.success {
+  background: #d4edda;
+  color: #155724;
+}
+
+.status.error {
+  background: #f8d7da;
+  color: #721c24;
+}
+
+.spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #667eea;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-right: 10px;
+  vertical-align: middle;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.token-list {
+  margin-top: 20px;
+  max-height: 350px;
+  overflow-y: auto;
+  padding-right: 5px;
+}
+
+.token-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.token-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.token-list::-webkit-scrollbar-thumb {
+  background: #ddd;
+  border-radius: 3px;
+}
+
+.token-list::-webkit-scrollbar-thumb:hover {
+  background: #ccc;
+}
+
+.token-item {
+  background: #fff;
+  border: 1px solid #eee;
+  padding: 12px 16px;
+  border-radius: 10px;
+  margin-bottom: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: all 0.2s;
+}
+
+.token-item:hover {
+  border-color: #667eea;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
+  transform: translateY(-1px);
+}
+
+.token-info strong {
+  color: #333;
+}
+
+.token-info small {
+  color: #666;
+}
+
+.btn-delete {
+  background: #dc3545;
+  padding: 8px 16px;
+  font-size: 14px;
+  width: auto;
+}
+
+.tabs {
+  display: flex;
+  margin-bottom: 20px;
+  border-bottom: 2px solid #eee;
+}
+
+.tab {
+  padding: 10px 20px;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+  color: #666;
+}
+
+.tab.active {
+  border-bottom-color: #667eea;
+  color: #667eea;
+  font-weight: 500;
+}
+
+input[type="text"] {
+  width: 100%;
+  padding: 12px;
+  border: 2px solid #ddd;
+  border-radius: 8px;
+  font-size: 14px;
+  margin-bottom: 15px;
+}
+
+input[type="text"]:focus {
+  border-color: #667eea;
+  outline: none;
+}