feat: 添加登录页面，支持外网访问 Web UI

- 新增 /web/login 登录页面 - 修改路由使用 optional JWT 认证 - 前端自动检测 token 并跳转登录 - 更新 .gitignore 排除 venv
2026-03-15 07:28:20 +08:00
parent bb249f0317
commit 03a68c982e
714 changed files with 252771 additions and 34 deletions
--- a/app/templates/auth/login.html
+++ b/app/templates/auth/login.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>登录 - 智队中枢</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
+        .btn { @apply px-4 py-2 rounded-lg font-medium transition-colors; }
+        .btn-primary { @apply bg-primary-600 text-white hover:bg-primary-700; }
+        .input { @apply w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent; }
+    </style>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center p-4">
+    <div class="w-full max-w-md">
+        <!-- Logo -->
+        <div class="text-center mb-8">
+            <div class="w-16 h-16 bg-primary-600 rounded-xl flex items-center justify-center mx-auto mb-4">
+                <span class="text-white text-2xl font-bold">智</span>
+            </div>
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">智队中枢</h1>
+            <p class="text-gray-500 dark:text-gray-400 mt-2">Personal Intelligent Team</p>
+        </div>
+
+        <!-- Login Form -->
+        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8">
+            <form id="login-form" class="space-y-6">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">用户名</label>
+                    <input type="text" id="username" class="input" placeholder="请输入用户名" required>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">密码</label>
+                    <input type="password" id="password" class="input" placeholder="请输入密码" required>
+                </div>
+                <div id="error-msg" class="hidden text-red-500 text-sm text-center"></div>
+                <button type="submit" class="btn btn-primary w-full py-3">
+                    登录
+                </button>
+            </form>
+            
+            <div class="mt-6 text-center text-sm text-gray-500 dark:text-gray-400">
+                还没有账号？请联系管理员
+            </div>
+        </div>
+
+        <div class="mt-8 text-center text-sm text-gray-400 dark:text-gray-500">
+            智队中枢 v0.7.0
+        </div>
+    </div>
+
+    <script>
+        // 主题切换
+        const savedTheme = localStorage.getItem('theme') || 'light';
+        if (savedTheme === 'dark') {
+            document.documentElement.classList.add('dark');
+        }
+
+        // 登录处理
+        document.getElementById('login-form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            const username = document.getElementById('username').value;
+            const password = document.getElementById('password').value;
+            const errorMsg = document.getElementById('error-msg');
+            
+            try {
+                const response = await fetch('/api/auth/login', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username, password })
+                });
+                
+                const data = await response.json();
+                
+                if (response.ok) {
+                    // 保存 token
+                    localStorage.setItem('access_token', data.access_token);
+                    localStorage.setItem('user', JSON.stringify(data.user));
+                    
+                    // 跳转到首页
+                    window.location.href = '/web/';
+                } else {
+                    errorMsg.textContent = data.error || '登录失败';
+                    errorMsg.classList.remove('hidden');
+                }
+            } catch (err) {
+                errorMsg.textContent = '网络错误，请重试';
+                errorMsg.classList.remove('hidden');
+            }
+        });
+    </script>
+</body>
+</html>
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -42,6 +42,16 @@
 </head>
 <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200">
    
+    {# Token 检查 - 如果没有 token 就跳转到登录页面 #}
+    <script>
+        (function() {
+            const token = localStorage.getItem('access_token');
+            if (!token && !window.location.pathname.includes('/login')) {
+                window.location.href = '/web/login';
+            }
+        })();
+    </script>
+    
    {# 导航栏 #}
    {% include 'components/navbar.html' %}
    
--- a/app/web/routes.py
+++ b/app/web/routes.py
@@ -2,78 +2,149 @@
 Web UI Blueprint
 智队中枢 Web 管理界面
 """
-from flask import Blueprint, render_template, request, jsonify
-from flask_jwt_extended import jwt_required, get_jwt_identity
+from flask import Blueprint, render_template, request, jsonify, redirect, url_for
+from flask_jwt_extended import jwt_required, get_jwt_identity, verify_jwt_in_request, optional
 from datetime import datetime, timedelta
 from app.models import db, User, Session, Agent, Gateway, Message

 web_bp = Blueprint('web', __name__, url_prefix='/web')


+@web_bp.route('/login')
+def login():
+    """登录页面"""
+    return render_template('auth/login.html')
+
+
@web_bp.route('/')
-@jwt_required()
+@jwt_required(optional=True)
 def index():
    """首页/仪表盘"""
-    # 统计数据
-    stats = {
-        'online_agents': Agent.query.filter_by(status='online').count(),
-        'active_sessions': Session.query.filter_by(status='active').count(),
-        'today_messages': Message.query.filter(
-            Message.created_at >= datetime.utcnow() - timedelta(days=1)
-        ).count(),
-        'online_gateways': Gateway.query.filter_by(status='online').count(),
-    }
-    
-    # 最近会话
-    recent_sessions = Session.query.order_by(
-        Session.last_active_at.desc()
-    ).limit(5).all()
+    try:
+        verify_jwt_in_request(optional=True)
+        user_id = get_jwt_identity()
+        
+        if not user_id:
+            # 未登录，返回空数据页面，前端会跳转到登录
+            stats = {
+                'online_agents': 0,
+                'active_sessions': 0,
+                'today_messages': 0,
+                'online_gateways': 0,
+            }
+            recent_sessions = []
+        else:
+            # 已登录，获取真实数据
+            stats = {
+                'online_agents': Agent.query.filter_by(status='online').count(),
+                'active_sessions': Session.query.filter_by(status='active').count(),
+                'today_messages': Message.query.filter(
+                    Message.created_at >= datetime.utcnow() - timedelta(days=1)
+                ).count(),
+                'online_gateways': Gateway.query.filter_by(status='online').count(),
+            }
+            recent_sessions = Session.query.order_by(
+                Session.last_active_at.desc()
+            ).limit(5).all()
+    except:
+        stats = {
+            'online_agents': 0,
+            'active_sessions': 0,
+            'today_messages': 0,
+            'online_gateways': 0,
+        }
+        recent_sessions = []
    
    return render_template('index.html', stats=stats, recent_sessions=recent_sessions)


@web_bp.route('/config/channels')
-@jwt_required()
+@jwt_required(optional=True)
 def channels():
    """频道配置列表"""
-    from app.models.channel_config import ChannelConfig
-    configs = ChannelConfig.query.all()
+    try:
+        verify_jwt_in_request(optional=True)
+        user_id = get_jwt_identity()
+        if not user_id:
+            configs = []
+        else:
+            from app.models.channel_config import ChannelConfig
+            configs = ChannelConfig.query.all()
+    except:
+        configs = []
    return render_template('config/channels.html', configs=configs)


@web_bp.route('/test')
-@jwt_required()
+@jwt_required(optional=True)
 def test():
    """连接测试页面"""
-    from app.models.channel_config import ChannelConfig
-    configs = ChannelConfig.query.filter_by(enabled=True).all()
+    try:
+        verify_jwt_in_request(optional=True)
+        user_id = get_jwt_identity()
+        if not user_id:
+            configs = []
+        else:
+            from app.models.channel_config import ChannelConfig
+            configs = ChannelConfig.query.filter_by(enabled=True).all()
+    except:
+        configs = []
    return render_template('test/index.html', configs=configs)


@web_bp.route('/monitor/sessions')
-@jwt_required()
+@jwt_required(optional=True)
 def sessions():
    """会话监控"""
-    agents = Agent.query.all()
-    sessions = Session.query.order_by(Session.last_active_at.desc()).limit(50).all()
+    try:
+        verify_jwt_in_request(optional=True)
+        user_id = get_jwt_identity()
+        if not user_id:
+            agents = []
+            sessions = []
+        else:
+            agents = Agent.query.all()
+            sessions = Session.query.order_by(Session.last_active_at.desc()).limit(50).all()
+    except:
+        agents = []
+        sessions = []
    return render_template('monitor/sessions.html', sessions=sessions, agents=agents)


@web_bp.route('/monitor/sessions/<session_id>')
-@jwt_required()
+@jwt_required(optional=True)
 def session_detail(session_id):
    """会话详情页面"""
-    session = Session.query.get_or_404(session_id)
-    messages = Message.query.filter_by(session_id=session_id).order_by(
-        Message.created_at.asc()
-    ).limit(200).all()
+    try:
+        verify_jwt_in_request(optional=True)
+        user_id = get_jwt_identity()
+        if not user_id:
+            session = None
+            messages = []
+        else:
+            session = Session.query.get_or_404(session_id)
+            messages = Message.query.filter_by(session_id=session_id).order_by(
+                Message.created_at.asc()
+            ).limit(200).all()
+    except:
+        session = None
+        messages = []
+    if session is None:
+        return render_template('errors/401.html'), 401
    return render_template('monitor/session_detail.html', session=session, messages=messages)


@web_bp.route('/config/channels/<channel_id>/edit')
-@jwt_required()
+@jwt_required(optional=True)
 def channel_edit(channel_id):
    """编辑频道配置页面"""
-    from app.models.channel_config import ChannelConfig
-    config = ChannelConfig.query.get_or_404(channel_id)
+    try:
+        verify_jwt_in_request(optional=True)
+        user_id = get_jwt_identity()
+        if not user_id:
+            return render_template('errors/401.html'), 401
+        from app.models.channel_config import ChannelConfig
+        config = ChannelConfig.query.get_or_404(channel_id)
+    except:
+        return render_template('errors/401.html'), 401
    return render_template('config/channel_edit.html', config=config)