Spaces:

bitterapricot
/

node

Sleeping

File size: 12,080 Bytes

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多服务管理平台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }
        
        .header {
            text-align: center;
            margin-bottom: 3rem;
            color: white;
        }
        
        .header h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }
        
        .header p {
            font-size: 1.2rem;
            opacity: 0.9;
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }
        
        .service-card {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }
        
        .service-card h2 {
            color: #667eea;
            margin-bottom: 1rem;
            font-size: 1.8rem;
        }
        
        .service-card p {
            color: #666;
            margin-bottom: 1.5rem;
        }
        
        .endpoints {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 1rem;
            margin-top: 1rem;
        }
        
        .endpoint {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem;
            border-bottom: 1px solid #e9ecef;
        }
        
        .endpoint:last-child {
            border-bottom: none;
        }
        
        .method {
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            font-size: 0.85rem;
            font-weight: bold;
        }
        
        .method.get {
            background: #d4edda;
            color: #155724;
        }
        
        .method.post {
            background: #d1ecf1;
            color: #0c5460;
        }
        
        .method.put {
            background: #fff3cd;
            color: #856404;
        }
        
        .method.delete {
            background: #f8d7da;
            color: #721c24;
        }
        
        .path {
            font-family: 'Courier New', monospace;
            color: #495057;
        }
        
        .btn {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            background: #667eea;
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-weight: bold;
            transition: background 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 1rem;
        }
        
        .btn:hover {
            background: #5a67d8;
        }
        
        .btn.secondary {
            background: #48bb78;
        }
        
        .btn.secondary:hover {
            background: #38a169;
        }
        
        .btn-group {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .status {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }
        
        .status.healthy {
            background: #d4edda;
            color: #155724;
        }
        
        .status.unhealthy {
            background: #f8d7da;
            color: #721c24;
        }
        
        .monitoring {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        
        .monitoring h2 {
            color: #667eea;
            margin-bottom: 1.5rem;
            font-size: 1.8rem;
        }
        
        .status-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .status-item {
            text-align: center;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 8px;
        }
        
        .status-item h3 {
            color: #495057;
            margin-bottom: 0.5rem;
            font-size: 1rem;
        }
        
        .status-value {
            font-size: 1.5rem;
            font-weight: bold;
            color: #667eea;
        }
        
        .footer {
            text-align: center;
            margin-top: 3rem;
            color: white;
            opacity: 0.8;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 1rem;
            }
            
            .header h1 {
                font-size: 2rem;
            }
            
            .services-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚀 多服务管理平台</h1>
            <p>使用 Supervisor 管理的 Nginx + FastAPI + Flask 集成服务</p>
        </div>
        
        <div class="services-grid">
            <div class="service-card">
                <div class="status healthy">运行中</div>
                <h2>🌐 Nginx 反向代理</h2>
                <p>高性能 Web 服务器和反向代理，监听 7860 端口，负责请求路由和负载均衡。</p>
                <div class="endpoints">
                    <div class="endpoint">
                        <span class="method get">GET</span>
                        <span class="path">/</span>
                    </div>
                    <div class="endpoint">
                        <span class="method get">GET</span>
                        <span class="path">/health</span>
                    </div>
                </div>
                <div class="btn-group">
                    <a href="/health" class="btn" target="_blank">健康检查</a>
                </div>
            </div>
            
            <div class="service-card">
                <div class="status healthy">运行中</div>
                <h2>⚡ FastAPI 服务</h2>
                <p>现代、高性能的 Python Web 框架，提供自动 API 文档和异步支持。</p>
                <div class="endpoints">
                    <div class="endpoint">
                        <span class="method get">GET</span>
                        <span class="path">/appfast/</span>
                    </div>
                    <div class="endpoint">
                        <span class="method get">GET</span>
                        <span class="path">/appfast/docs</span>
                    </div>
                    <div class="endpoint">
                        <span class="method post">POST</span>
                        <span class="path">/appfast/items</span>
                    </div>
                </div>
                <div class="btn-group">
                    <a href="/appfast/docs" class="btn" target="_blank">API 文档</a>
                    <a href="/appfast/health" class="btn secondary" target="_blank">服务状态</a>
                </div>
            </div>
            
            <div class="service-card">
                <div class="status healthy">运行中</div>
                <h2>🔧 Flask 服务</h2>
                <p>轻量级、灵活的 Python Web 框架，适合构建 RESTful API 和 Web 应用。</p>
                <div class="endpoints">
                    <div class="endpoint">
                        <span class="method get">GET</span>
                        <span class="path">/appflask/</span>
                    </div>
                    <div class="endpoint">
                        <span class="method get">GET</span>
                        <span class="path">/appflask/docs</span>
                    </div>
                    <div class="endpoint">
                        <span class="method post">POST</span>
                        <span class="path">/appflask/users</span>
                    </div>
                </div>
                <div class="btn-group">
                    <a href="/appflask/docs" class="btn" target="_blank">API 文档</a>
                    <a href="/appflask/health" class="btn secondary" target="_blank">服务状态</a>
                </div>
            </div>
        </div>
        
        <div class="monitoring">
            <h2>📊 服务监控</h2>
            <div class="status-grid">
                <div class="status-item">
                    <h3>Nginx 状态</h3>
                    <div class="status-value" id="nginx-status">检查中...</div>
                </div>
                <div class="status-item">
                    <h3>FastAPI 状态</h3>
                    <div class="status-value" id="fastapi-status">检查中...</div>
                </div>
                <div class="status-item">
                    <h3>Flask 状态</h3>
                    <div class="status-value" id="flask-status">检查中...</div>
                </div>
                <div class="status-item">
                    <h3>总请求数</h3>
                    <div class="status-value" id="total-requests">0</div>
                </div>
            </div>
            <button class="btn" onclick="checkAllServices()">刷新状态</button>
        </div>
        
        <div class="footer">
            <p>© 2024 多服务管理平台 | 基于 Supervisor + Nginx + FastAPI + Flask</p>
            <p>部署于 Hugging Face Spaces | 端口: 7860</p>
        </div>
    </div>
    
    <script>
        async function checkService(url, elementId) {
            try {
                const response = await fetch(url);
                if (response.ok) {
                    const data = await response.json();
                    document.getElementById(elementId).innerHTML = 
                        `<span style="color: #38a169;">健康 ✓</span>`;
                    return true;
                } else {
                    throw new Error('服务异常');
                }
            } catch (error) {
                document.getElementById(elementId).innerHTML = 
                    `<span style="color: #e53e3e;">异常 ✗</span>`;
                return false;
            }
        }
        
        async function checkAllServices() {
            // 检查 Nginx
            await checkService('/health', 'nginx-status');
            
            // 检查 FastAPI
            await checkService('/appfast/health', 'fastapi-status');
            
            // 检查 Flask
            await checkService('/appflask/health', 'flask-status');
            
            // 更新请求计数（模拟）
            const currentCount = parseInt(document.getElementById('total-requests').textContent);
            document.getElementById('total-requests').textContent = currentCount + 1;
        }
        
        // 页面加载时检查服务状态
        document.addEventListener('DOMContentLoaded', () => {
            checkAllServices();
            // 每30秒自动检查一次
            setInterval(checkAllServices, 30000);
        });
    </script>
</body>
</html>