<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    
    <!-- CSS样式 -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="{{ url_for('static', path='js/xterm/xterm.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', path='css/styles.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', path='css/terminal.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', path='css/topology.css') }}">
    
    <!-- JavaScript依赖 -->
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="{{ url_for('static', path='js/xterm/xterm.js') }}"></script>
    <script src="{{ url_for('static', path='js/xterm/xterm-addon-fit.js') }}"></script>
    <script src="{{ url_for('static', path='js/xterm/xterm-addon-web-links.js') }}"></script>
    <script src="{{ url_for('static', path='js/session-manager.js') }}"></script>
    <script src="{{ url_for('static', path='js/terminal.js') }}"></script>
    <script src="{{ url_for('static', path='js/topology.js') }}"></script>
    <script src="{{ url_for('static', path='js/dashboard.js') }}"></script>
    
    <!-- 全局主题初始化脚本 -->
    <script>
        // 立即应用保存的主题，避免闪烁
        (function() {
            const savedTheme = localStorage.getItem('theme') || 'light';
            document.documentElement.setAttribute('data-theme', savedTheme);
            
            // 页面加载完成后应用logo切换
            document.addEventListener('DOMContentLoaded', function() {
                const loginLogo = document.getElementById('login-logo');
                const headerLogo = document.getElementById('header-logo');
                
                if (savedTheme === 'dark') {
                    // 暗色主题使用logod.png
                    if (loginLogo) {
                        loginLogo.src = loginLogo.src.replace('logo.png', 'logod.png');
                    }
                    if (headerLogo) {
                        headerLogo.src = headerLogo.src.replace('logo.png', 'logod.png');
                    }
                }
            });
        })();
    </script>
</head>
<body>
    <!-- 容器包含所有页面内容，通过JS控制显示/隐藏 -->
    <div id="app">
        <!-- 登录页面 -->
        <div id="login-page" class="page">
            <div class="login-container">
                <div class="login-logo">
                    <img id="login-logo" src="{{ url_for('static', path='images/logo.png') }}" alt="NetBrain MCP" class="logo">
                </div>
                <h1 class="login-title">NetBrain MCP</h1>
                <p class="login-description">
                    通过MCP协议连接大型语言模型与网络设备
                </p>
                <button class="btn btn-large" id="start-btn">开始使用</button>
                <div class="copyright">
                    © 2025 NetBrain MCP
                </div>
            </div>
        </div>

        <!-- 主页内容 -->
        <div id="home-page" class="page" style="display: none;">
            <header class="header">
                <div class="header-container">
                    <div class="header-logo">
                        <img id="header-logo" src="{{ url_for('static', path='images/logo.png') }}" alt="NetBrain MCP">
                        <h1>NetBrain MCP</h1>
                    </div>
                    <nav class="nav-links">
                        <a href="#dashboard" class="nav-link active" data-page="dashboard"><i class="fas fa-gauge-high"></i> 仪表盘</a>
                        <a href="#devices" class="nav-link" data-page="devices"><i class="fas fa-server"></i> 设备</a>
                        <a href="#terminal" class="nav-link" data-page="terminal"><i class="fas fa-terminal"></i> 终端</a>
                        <a href="#topology" class="nav-link" data-page="topology"><i class="fas fa-network-wired"></i> 拓扑</a>
                    </nav>
                </div>
            </header>

            <div class="main-content">
                <div class="container">
                    <!-- 仪表盘页面 -->
                    <div id="dashboard-content" class="page-content">
                        <div class="dashboard-header">
                            <h1 class="page-title">
                                <i class="fas fa-gauge-high"></i> 仪表盘
                            </h1>
                            <div class="dashboard-controls">
                                <div class="theme-switcher">
                                    <label class="switch">
                                        <input type="checkbox" id="theme-toggle">
                                        <span class="slider">
                                            <i class="fas fa-sun"></i>
                                            <i class="fas fa-moon"></i>
                                        </span>
                                    </label>
                                    <span class="theme-label">主题模式</span>
                                </div>
                                <button id="refresh-dashboard" class="btn btn-sm">
                                    <i class="fas fa-sync"></i> 刷新
                                </button>
                            </div>
                        </div>
                        
                        <!-- 统计卡片网格 -->
                        <div class="stats-cards-grid">
                            <div class="stat-card">
                                <div class="stat-icon devices">
                                    <i class="fas fa-server"></i>
                                </div>
                                <div class="stat-content">
                                    <div class="stat-number" id="dashboard-devices-count">0</div>
                                    <div class="stat-label">网络设备</div>
                                    <div class="stat-change positive" id="dashboard-devices-change">+0</div>
                                </div>
                            </div>
                            
                            <div class="stat-card">
                                <div class="stat-icon connections">
                                    <i class="fas fa-link"></i>
                                </div>
                                <div class="stat-content">
                                    <div class="stat-number" id="dashboard-connections-count">0</div>
                                    <div class="stat-label">活跃连接</div>
                                    <div class="stat-change neutral" id="dashboard-connections-change">0</div>
                                </div>
                            </div>
                            
                            <div class="stat-card">
                                <div class="stat-icon topology">
                                    <i class="fas fa-project-diagram"></i>
                                </div>
                                <div class="stat-content">
                                    <div class="stat-number" id="dashboard-topology-nodes">0</div>
                                    <div class="stat-label">拓扑节点</div>
                                    <div class="stat-change positive" id="dashboard-topology-change">+0</div>
                                </div>
                            </div>
                            
                            <div class="stat-card">
                                <div class="stat-icon sessions">
                                    <i class="fas fa-terminal"></i>
                                </div>
                                <div class="stat-content">
                                    <div class="stat-number" id="dashboard-sessions-count">0</div>
                                    <div class="stat-label">终端会话</div>
                                    <div class="stat-change positive" id="dashboard-sessions-change">+0</div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 主要内容区域 -->
                        <div class="dashboard-main-content">
                            <!-- 左侧列 -->
                            <div class="dashboard-left-column">
                                <!-- 系统状态卡片 -->
                                <div class="dashboard-card">
                                    <div class="card-header">
                                        <h3><i class="fas fa-heartbeat"></i> 系统状态</h3>
                                        <div class="card-actions">
                                            <button class="btn-icon" onclick="refreshSystemStatus()">
                                                <i class="fas fa-sync"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-content">
                                        <div class="status-grid">
                                            <div class="status-item">
                                                <div class="status-icon online">
                                                    <i class="fas fa-check-circle"></i>
                                                </div>
                                                <div class="status-info">
                                                    <div class="status-label">MCP服务器</div>
                                                    <div class="status-value">运行正常</div>
                                                </div>
                                            </div>
                                            
                                            <div class="status-item">
                                                <div class="status-icon online">
                                                    <i class="fas fa-check-circle"></i>
                                                </div>
                                                <div class="status-info">
                                                    <div class="status-label">Web服务</div>
                                                    <div class="status-value">运行正常</div>
                                                </div>
                                            </div>
                                            
                                            <div class="status-item">
                                                <div class="status-icon" id="database-status">
                                                    <i class="fas fa-check-circle"></i>
                                                </div>
                                                <div class="status-info">
                                                    <div class="status-label">数据存储</div>
                                                    <div class="status-value" id="database-status-text">正常</div>
                                                </div>
                                            </div>
                                            
                                            <div class="status-item">
                                                <div class="status-icon" id="network-status">
                                                    <i class="fas fa-wifi"></i>
                                                </div>
                                                <div class="status-info">
                                                    <div class="status-label">网络连接</div>
                                                    <div class="status-value" id="network-status-text">检查中...</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 右侧列 -->
                            <div class="dashboard-right-column">
                                <!-- 近期活动卡片 -->
                                <div class="dashboard-card">
                                    <div class="card-header">
                                        <h3><i class="fas fa-clock"></i> 近期活动</h3>
                                        <div class="card-actions">
                                            <button class="btn-icon" onclick="clearActivities()">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-content">
                                        <div id="recent-activities" class="activities-list">
                                            <div class="activity-item">
                                                <div class="activity-icon info">
                                                    <i class="fas fa-info-circle"></i>
                                                </div>
                                                <div class="activity-content">
                                                    <div class="activity-text">系统启动成功</div>
                                                    <div class="activity-time">刚刚</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 设备概览卡片 -->
                                <div class="dashboard-card">
                                    <div class="card-header">
                                        <h3><i class="fas fa-network-wired"></i> 设备概览</h3>
                                        <div class="card-actions">
                                            <button class="btn-icon" onclick="refreshDevicesOverview()">
                                                <i class="fas fa-sync"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-content">
                                        <div id="devices-overview" class="devices-overview">
                                            <div class="no-devices">
                                                <i class="fas fa-server"></i>
                                                <p>暂无设备</p>
                                                <button class="btn btn-sm" onclick="goToDevices()">
                                                    <i class="fas fa-plus"></i> 添加设备
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 系统信息footer -->
                        <div class="dashboard-footer">
                            <div class="system-info">
                                <span><i class="fas fa-code"></i> NetBrain MCP v1.0</span>
                                <span><i class="fas fa-calendar"></i> <span id="current-time"></span></span>
                                <span><i class="fas fa-user"></i> 管理员</span>
                            </div>
                        </div>
                    </div>

                    <!-- 设备管理页面 -->
                    <div id="devices-content" class="page-content" style="display: none;">
                        <h1 class="page-title">设备管理</h1>
                        <div class="device-management-container">
                            <!-- 设备管理卡片 -->
                            <div class="card device-card">
                                <div class="device-manager">
                                    <div class="device-list-header">
                                        <h2><i class="fas fa-server"></i> 设备列表</h2>
                                        <button id="add-device-btn" class="btn"><i class="fas fa-plus"></i> 添加设备</button>
                                    </div>
                                    <div id="device-list" class="item-list">
                                        <div class="device-list-empty">
                                            <p>尚未添加任何设备</p>
                                        </div>
                                        <!-- 设备列表会通过JavaScript动态加载 -->
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 凭据管理卡片 -->
                            <div class="card credential-card">
                                <div class="credential-manager">
                                    <div class="credential-list-header">
                                        <h2><i class="fas fa-key"></i> 凭据列表</h2>
                                        <button id="add-credential-btn" class="btn"><i class="fas fa-plus"></i> 添加凭据</button>
                                    </div>
                                    <div id="credential-list" class="item-list">
                                        <div class="credential-list-empty">
                                            <p>尚未添加任何凭据</p>
                                        </div>
                                        <!-- 凭据列表会通过JavaScript动态加载 -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 终端页面 - 多标签页终端实现 -->
                    <div id="terminal-content" class="page-content">
                        <h1 class="page-title">终端控制台</h1>
                        
                        <div class="terminal-layout">
                            <!-- 会话管理面板 - 移到左侧 -->
                            <div class="sessions-card">
                                <div class="sessions-header">
                                    <h2><i class="fas fa-network-wired"></i> 会话管理</h2>
                                    <div class="sessions-actions">
                                        <button id="new-session-btn" class="btn btn-sm"><i class="fas fa-plus"></i> 新建会话</button>
                                        <button id="save-session-btn" class="btn btn-sm"><i class="fas fa-save"></i> 保存会话</button>
                                        <button id="manage-groups-btn" class="btn btn-sm"><i class="fas fa-folder"></i> 管理分组</button>
                                    </div>
                                </div>
                                
                                <div class="sessions-container">
                                    <!-- 活跃会话 -->
                                    <div class="sessions-section">
                                        <h3><i class="fas fa-bolt"></i> 活跃会话</h3>
                                        <div id="active-sessions-list" class="sessions-list">
                                            <!-- 会话项将通过JavaScript动态生成 -->
                                            <div class="session-empty">暂无活跃会话</div>
                                        </div>
                                    </div>
                                    
                                    <!-- 保存的会话 -->
                                    <div class="sessions-section">
                                        <h3><i class="fas fa-bookmark"></i> 保存的会话</h3>
                                        <div id="saved-sessions-list" class="sessions-list">
                                            <!-- 保存的会话项将通过JavaScript动态生成 -->
                                            <div class="session-empty">暂无保存的会话</div>
                                        </div>
                                    </div>
                                    
                                    <!-- 会话组 -->
                                    <div class="sessions-section">
                                        <h3><i class="fas fa-folder"></i> 会话组</h3>
                                        <div id="session-groups-list" class="sessions-list">
                                            <!-- 会话组项将通过JavaScript动态生成 -->
                                            <div class="session-empty">暂无会话组</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 终端窗口 - 移到右侧 -->
                            <div class="terminal-card">
                                <div class="terminal-container">
                                    <!-- 终端工具栏 -->
                                    <div class="terminal-toolbar">
                                        <div class="terminal-tabs">
                                            <!-- 标签页将由JavaScript动态创建 -->
                                        </div>
                                        <div class="terminal-actions">
                                            <button id="reconnect-terminal" class="btn btn-sm"><i class="fas fa-sync"></i> 重新连接</button>
                                            <button id="connect-device" class="btn btn-sm"><i class="fas fa-plug"></i> 连接设备</button>
                                        </div>
                                    </div>
                                    
                                    <!-- 终端窗口容器 -->
                                    <div class="terminal-windows">
                                        <!-- 终端实例将由JavaScript动态创建 -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 网络拓扑页面 -->
                    <div id="topology-content" class="page-content" style="display: none;">
                        <h1 class="page-title">网络拓扑</h1>
                        
                        <!-- 拓扑控制工具栏 -->
                        <div class="topology-toolbar">
                            <div class="toolbar-section">
                                <h3><i class="fas fa-play"></i> 发现控制</h3>
                                <div class="toolbar-actions">
                                    <button id="discover-topology-btn" class="btn btn-primary">
                                        <i class="fas fa-search"></i> 发现拓扑
                                    </button>
                                    <button id="refresh-topology-btn" class="btn">
                                        <i class="fas fa-sync"></i> 刷新
                                    </button>
                                    <button id="clear-topology-btn" class="btn btn-outline">
                                        <i class="fas fa-trash"></i> 清空
                                    </button>
                                </div>
                            </div>
                            
                            <div class="toolbar-section">
                                <h3><i class="fas fa-eye"></i> 视图控制</h3>
                                <div class="toolbar-actions">
                                    <button id="fit-topology-btn" class="btn">
                                        <i class="fas fa-expand"></i> 适应窗口
                                    </button>
                                    <button id="zoom-in-btn" class="btn">
                                        <i class="fas fa-search-plus"></i> 放大
                                    </button>
                                    <button id="zoom-out-btn" class="btn">
                                        <i class="fas fa-search-minus"></i> 缩小
                                    </button>
                                    <button id="center-topology-btn" class="btn">
                                        <i class="fas fa-crosshairs"></i> 居中
                                    </button>
                                </div>
                            </div>
                            
                            <div class="toolbar-section">
                                <h3><i class="fas fa-filter"></i> 过滤选项</h3>
                                <div class="toolbar-actions">
                                    <select id="vendor-filter" class="form-control form-control-sm">
                                        <option value="">所有厂商</option>
                                        <option value="cisco">Cisco</option>
                                        <option value="huawei">华为</option>
                                        <option value="h3c">H3C</option>
                                        <option value="juniper">Juniper</option>
                                    </select>
                                    <select id="device-type-filter" class="form-control form-control-sm">
                                        <option value="">所有类型</option>
                                        <option value="router">路由器</option>
                                        <option value="switch">交换机</option>
                                        <option value="firewall">防火墙</option>
                                    </select>
                                    <button id="apply-filter-btn" class="btn btn-sm">
                                        <i class="fas fa-check"></i> 应用
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 拓扑主界面 -->
                        <div class="topology-main">
                            <!-- 拓扑可视化区域 -->
                            <div class="topology-visualization">
                                <div id="topology-canvas" class="topology-canvas">
                                    <!-- 拓扑加载状态 -->
                                    <div id="topology-loading" class="topology-loading">
                                        <div class="loading-spinner">
                                            <i class="fas fa-spinner fa-spin"></i>
                                        </div>
                                        <div class="loading-text">正在加载拓扑数据...</div>
                                    </div>
                                    
                                    <!-- 拓扑空状态 -->
                                    <div id="topology-empty" class="topology-empty" style="display: none;">
                                        <div class="empty-icon">
                                            <i class="fas fa-project-diagram"></i>
                                        </div>
                                        <div class="empty-title">暂无拓扑数据</div>
                                        <div class="empty-description">
                                            请先添加网络设备，然后点击"发现拓扑"按钮开始网络拓扑发现
                                        </div>
                                        <button id="goto-devices-btn" class="btn btn-primary">
                                            <i class="fas fa-server"></i> 管理设备
                                        </button>
                                    </div>
                                    
                                    <!-- 拓扑SVG容器 -->
                                    <svg id="topology-svg" width="100%" height="100%" style="display: none;">
                                        <!-- 定义箭头标记 -->
                                        <defs>
                                            <marker id="arrowhead" markerWidth="10" markerHeight="7" 
                                                    refX="9" refY="3.5" orient="auto">
                                                <polygon points="0 0, 10 3.5, 0 7" fill="#666" />
                                            </marker>
                                            <marker id="arrowhead-selected" markerWidth="10" markerHeight="7" 
                                                    refX="9" refY="3.5" orient="auto">
                                                <polygon points="0 0, 10 3.5, 0 7" fill="#2563eb" />
                                            </marker>
                                        </defs>
                                        
                                        <!-- 拓扑图层 -->
                                        <g id="topology-graph">
                                            <!-- 链路组 -->
                                            <g id="links-group"></g>
                                            <!-- 节点组 -->
                                            <g id="nodes-group"></g>
                                            <!-- 标签组 -->
                                            <g id="labels-group"></g>
                                        </g>
                                    </svg>
                                </div>
                                
                                <!-- 拓扑操作提示 -->
                                <div class="topology-hints">
                                    <div class="hint-item">
                                        <i class="fas fa-mouse-pointer"></i>
                                        <span>拖拽节点移动</span>
                                    </div>
                                    <div class="hint-item">
                                        <i class="fas fa-mouse"></i>
                                        <span>滚轮缩放</span>
                                    </div>
                                    <div class="hint-item">
                                        <i class="fas fa-hand-point-up"></i>
                                        <span>双击左键菜单</span>
                                    </div>
                                    <div class="hint-item">
                                        <i class="fas fa-search"></i>
                                        <span>双击适应</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 拓扑信息面板 -->
                            <div class="topology-info-panel">
                                <!-- 拓扑统计 -->
                                <div class="info-section">
                                    <h3><i class="fas fa-chart-bar"></i> 拓扑统计</h3>
                                    <div class="stats-grid">
                                        <div class="stat-item">
                                            <div class="stat-value" id="stat-nodes">0</div>
                                            <div class="stat-label">设备节点</div>
                                        </div>
                                        <div class="stat-item">
                                            <div class="stat-value" id="stat-links">0</div>
                                            <div class="stat-label">连接链路</div>
                                        </div>
                                        <div class="stat-item">
                                            <div class="stat-value" id="stat-protocols">0</div>
                                            <div class="stat-label">发现协议</div>
                                        </div>
                                        <div class="stat-item">
                                            <div class="stat-value" id="stat-vendors">0</div>
                                            <div class="stat-label">设备厂商</div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 选中节点信息 -->
                                <div class="info-section">
                                    <h3><i class="fas fa-info-circle"></i> 节点详情</h3>
                                    <div id="node-details" class="node-details">
                                        <div class="no-selection">
                                            <i class="fas fa-mouse-pointer"></i>
                                            <span>点击节点查看详细信息</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 链路信息 -->
                                <div class="info-section">
                                    <h3><i class="fas fa-link"></i> 链路详情</h3>
                                    <div id="link-details" class="link-details">
                                        <div class="no-selection">
                                            <i class="fas fa-mouse-pointer"></i>
                                            <span>点击链路查看连接信息</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 操作面板 -->
                                <div class="info-section">
                                    <h3><i class="fas fa-tools"></i> 快速操作</h3>
                                    <div class="action-buttons">
                                        <button id="connect-to-device-btn" class="btn btn-sm" disabled>
                                            <i class="fas fa-terminal"></i> 连接终端
                                        </button>
                                        <button id="ping-device-btn" class="btn btn-sm" disabled>
                                            <i class="fas fa-satellite-dish"></i> Ping测试
                                        </button>
                                        <button id="discover-neighbors-btn" class="btn btn-sm" disabled>
                                            <i class="fas fa-search"></i> 发现邻居
                                        </button>
                                        <button id="device-properties-btn" class="btn btn-sm" disabled>
                                            <i class="fas fa-cog"></i> 设备属性
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 拓扑发现对话框 -->
                        <div id="topology-discover-modal" class="modal">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h2>网络拓扑发现</h2>
                                    <span class="close-modal">&times;</span>
                                </div>
                                <div class="modal-body">
                                    <form id="topology-discover-form">
                                        <div class="form-group">
                                            <label>选择种子设备</label>
                                            <div class="device-selection">
                                                <div id="seed-devices-list" class="checkbox-list">
                                                    <!-- 设备列表将通过JavaScript动态加载 -->
                                                    <div class="no-devices">
                                                        <p>没有可用的设备。请先在设备管理页面添加设备。</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label>发现选项</label>
                                            <div class="discovery-options">
                                                <label class="checkbox-label">
                                                    <input type="checkbox" id="discover-cdp" checked>
                                                    <span class="checkmark"></span>
                                                    启用CDP发现
                                                </label>
                                                <label class="checkbox-label">
                                                    <input type="checkbox" id="discover-lldp" checked>
                                                    <span class="checkmark"></span>
                                                    启用LLDP发现
                                                </label>
                                            </div>
                                        </div>
                                        
                                        <div class="form-actions">
                                            <button type="button" class="btn btn-outline close-btn">
                                                <i class="fas fa-times"></i> 取消
                                            </button>
                                            <button type="submit" class="btn btn-primary">
                                                <i class="fas fa-search"></i> 开始发现
                                            </button>
                                        </div>
                                    </form>
                                    
                                    <!-- 发现进度 -->
                                    <div id="discovery-progress" class="discovery-progress" style="display: none;">
                                        <div class="progress-header">
                                            <h3>正在发现网络拓扑...</h3>
                                            <div class="progress-spinner">
                                                <i class="fas fa-spinner fa-spin"></i>
                                            </div>
                                        </div>
                                        <div class="progress-details">
                                            <div id="discovery-status">正在连接种子设备...</div>
                                            <div class="progress-bar">
                                                <div id="discovery-progress-bar" class="progress-fill"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 设置页面 -->
                    <div id="settings-content" class="page-content" style="display: none;">
                        <h1 class="page-title">系统设置</h1>
                        <div class="card">
                            <p>系统设置功能将在后续版本中推出</p>
                        </div>
                    </div>
                </div>
            </div>

            <footer class="footer">
                <div class="container">
                    © 2025 NetBrain MCP
                </div>
            </footer>
        </div>

        <!-- 设备连接对话框 -->
        <div id="device-connect-modal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>连接设备</h2>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <form id="connect-device-form">
                        <div class="form-group">
                            <label for="device-select">选择设备</label>
                            <select id="device-select" class="form-control" required>
                                <option value="">-- 请选择设备 --</option>
                                <!-- 设备列表将通过API动态加载 -->
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="credential-select">选择凭据</label>
                            <select id="credential-select" class="form-control" required>
                                <option value="">-- 请选择凭据 --</option>
                                <!-- 凭据列表将通过API动态加载 -->
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="terminal-name">终端名称</label>
                            <input type="text" id="terminal-name" class="form-control" placeholder="设备名称-会话">
                        </div>
                        <div class="form-actions">
                            <button type="button" class="btn btn-outline close-btn"><i class="fas fa-times"></i> 取消</button>
                            <button type="submit" class="btn"><i class="fas fa-link"></i> 连接</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- 保存会话对话框 -->
        <div id="save-session-modal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>保存会话</h2>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <form id="save-session-form">
                        <div class="form-group">
                            <label for="active-session-select">选择活跃会话</label>
                            <select id="active-session-select" class="form-control" required>
                                <option value="">-- 请选择会话 --</option>
                                <!-- 活跃会话列表将通过JS动态加载 -->
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="session-name">会话名称</label>
                            <input type="text" id="session-name" class="form-control" placeholder="我的设备会话" required>
                        </div>
                        <div class="form-group">
                            <label for="session-description">会话描述</label>
                            <textarea id="session-description" class="form-control" placeholder="描述此会话的用途或内容"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="session-group">所属分组（可选）</label>
                            <select id="session-group" class="form-control">
                                <option value="">-- 无分组 --</option>
                                <!-- 会话组列表将通过JS动态加载 -->
                            </select>
                        </div>
                        <div class="form-actions">
                            <button type="button" class="btn btn-outline close-btn"><i class="fas fa-times"></i> 取消</button>
                            <button type="submit" class="btn"><i class="fas fa-save"></i> 保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- 管理会话组对话框 -->
        <div id="manage-groups-modal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>管理会话组</h2>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <div class="session-groups-manager">
                        <!-- 创建新组 -->
                        <div class="form-group">
                            <label for="new-group-name">创建新组</label>
                            <div class="group-input-container">
                                <input type="text" id="new-group-name" class="form-control" placeholder="输入新组名称">
                                <button id="create-group-btn" class="btn"><i class="fas fa-plus"></i> 创建</button>
                            </div>
                        </div>
                        
                        <!-- 会话组列表 -->
                        <div class="session-groups-list">
                            <h3>现有会话组</h3>
                            <div id="manage-groups-list">
                                <!-- 会话组列表将通过JS动态加载 -->
                                <div class="group-empty">暂无会话组</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-actions right">
                        <button type="button" class="btn close-btn"><i class="fas fa-check"></i> 完成</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 添加设备对话框 -->
        <div id="add-device-modal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>添加网络设备</h2>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <form id="add-device-form">
                        <div class="form-group">
                            <label for="device-name">设备名称</label>
                            <input type="text" id="device-name" class="form-control" placeholder="例如：Core-Router-01" required>
                        </div>
                        <div class="form-group">
                            <label for="device-ip">IP地址</label>
                            <input type="text" id="device-ip" class="form-control" placeholder="例如：192.168.1.1" required>
                        </div>
                        <div class="form-group">
                            <label for="device-type">设备类型</label>
                            <select id="device-type" class="form-control" required>
                                <option value="router">路由器</option>
                                <option value="switch">交换机</option>
                                <option value="firewall">防火墙</option>
                                <option value="load_balancer">负载均衡器</option>
                                <option value="wireless_controller">无线控制器</option>
                                <option value="access_point">接入点</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="device-vendor">设备厂商</label>
                            <select id="device-vendor" class="form-control" required>
                                <option value="cisco">思科(Cisco)</option>
                                <option value="huawei">华为(Huawei)</option>
                                <option value="h3c">新华三(H3C)</option>
                                <option value="juniper">Juniper</option>
                                <option value="arista">Arista</option>
                                <option value="fortinet">Fortinet</option>
                                <option value="checkpoint">CheckPoint</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="device-platform">平台</label>
                            <input type="text" id="device-platform" class="form-control" placeholder="例如：ISR 4000系列">
                        </div>
                        <div class="form-group">
                            <label for="device-model">设备型号</label>
                            <input type="text" id="device-model" class="form-control" placeholder="例如：ISR 4431">
                        </div>
                        <div class="form-group">
                            <label for="device-os">操作系统版本</label>
                            <input type="text" id="device-os" class="form-control" placeholder="例如：IOS-XE 16.9.3">
                        </div>
                        <div class="form-group">
                            <label for="device-location">位置</label>
                            <input type="text" id="device-location" class="form-control" placeholder="例如：主数据中心1层">
                        </div>
                        <div class="form-group">
                            <label for="device-description">描述</label>
                            <textarea id="device-description" class="form-control" placeholder="设备用途和其他信息"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="device-tags">标签</label>
                            <input type="text" id="device-tags" class="form-control" placeholder="用逗号分隔多个标签，例如：核心,生产,关键">
                        </div>
                        <div class="form-group">
                            <label for="device-credential">关联凭据 (可选)</label>
                            <select id="device-credential" class="form-control">
                                <option value="">-- 无凭据 --</option>
                                <!-- 凭据列表将通过JS动态加载 -->
                            </select>
                            <small class="form-text text-muted">拓扑发现和设备连接需要凭据</small>
                        </div>
                        <div class="form-actions">
                            <button type="button" class="btn btn-outline close-btn"><i class="fas fa-times"></i> 取消</button>
                            <button type="submit" class="btn"><i class="fas fa-plus"></i> 添加设备</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- 添加凭据对话框 -->
        <div id="add-credential-modal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>添加设备凭据</h2>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <form id="add-credential-form">
                        <div class="form-group">
                            <label for="credential-name">凭据名称</label>
                            <input type="text" id="credential-name" class="form-control" placeholder="例如：Cisco设备SSH凭据" required>
                        </div>
                        <div class="form-group">
                            <label for="credential-username">用户名</label>
                            <input type="text" id="credential-username" class="form-control" placeholder="例如：admin" required>
                        </div>
                        <div class="form-group">
                            <label for="credential-password">密码</label>
                            <input type="password" id="credential-password" class="form-control" placeholder="输入密码" required>
                        </div>
                        <div class="form-group">
                            <label for="credential-protocol">连接协议</label>
                            <select id="credential-protocol" class="form-control" required>
                                <option value="ssh">SSH</option>
                                <option value="telnet">Telnet</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="credential-port">端口</label>
                            <input type="number" id="credential-port" class="form-control" placeholder="22">
                            <small class="form-text text-muted">SSH默认为22，Telnet默认为23</small>
                        </div>
                        <div class="form-group">
                            <label for="credential-enable">Enable密码 (可选)</label>
                            <input type="password" id="credential-enable" class="form-control" placeholder="思科设备的特权模式密码">
                        </div>
                        <div class="form-actions">
                            <button type="button" class="btn btn-outline close-btn"><i class="fas fa-times"></i> 取消</button>
                            <button type="submit" class="btn"><i class="fas fa-plus"></i> 添加凭据</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- 修改设备对话框 -->
        <div id="edit-device-modal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>修改网络设备</h2>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <form id="edit-device-form">
                        <input type="hidden" id="edit-device-id">
                        <div class="form-group">
                            <label for="edit-device-name">设备名称</label>
                            <input type="text" id="edit-device-name" class="form-control" placeholder="例如：Core-Router-01" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-device-ip">IP地址</label>
                            <input type="text" id="edit-device-ip" class="form-control" placeholder="例如：192.168.1.1" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-device-type">设备类型</label>
                            <select id="edit-device-type" class="form-control" required>
                                <option value="router">路由器</option>
                                <option value="switch">交换机</option>
                                <option value="firewall">防火墙</option>
                                <option value="load_balancer">负载均衡器</option>
                                <option value="wireless_controller">无线控制器</option>
                                <option value="access_point">接入点</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="edit-device-vendor">设备厂商</label>
                            <select id="edit-device-vendor" class="form-control" required>
                                <option value="cisco">思科(Cisco)</option>
                                <option value="huawei">华为(Huawei)</option>
                                <option value="h3c">新华三(H3C)</option>
                                <option value="juniper">Juniper</option>
                                <option value="arista">Arista</option>
                                <option value="fortinet">Fortinet</option>
                                <option value="checkpoint">CheckPoint</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="edit-device-platform">平台</label>
                            <input type="text" id="edit-device-platform" class="form-control" placeholder="例如：ISR 4000系列">
                        </div>
                        <div class="form-group">
                            <label for="edit-device-model">设备型号</label>
                            <input type="text" id="edit-device-model" class="form-control" placeholder="例如：ISR 4431">
                        </div>
                        <div class="form-group">
                            <label for="edit-device-os">操作系统版本</label>
                            <input type="text" id="edit-device-os" class="form-control" placeholder="例如：IOS-XE 16.9.3">
                        </div>
                        <div class="form-group">
                            <label for="edit-device-status">状态</label>
                            <select id="edit-device-status" class="form-control">
                                <option value="online">在线</option>
                                <option value="offline">离线</option>
                                <option value="unreachable">不可达</option>
                                <option value="maintenance">维护中</option>
                                <option value="unknown">未知</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="edit-device-location">位置</label>
                            <input type="text" id="edit-device-location" class="form-control" placeholder="例如：主数据中心1层">
                        </div>
                        <div class="form-group">
                            <label for="edit-device-description">描述</label>
                            <textarea id="edit-device-description" class="form-control" placeholder="设备用途和其他信息"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="edit-device-tags">标签</label>
                            <input type="text" id="edit-device-tags" class="form-control" placeholder="用逗号分隔多个标签，例如：核心,生产,关键">
                        </div>
                        <div class="form-group">
                            <label for="edit-device-credential">关联凭据 (可选)</label>
                            <select id="edit-device-credential" class="form-control">
                                <option value="">-- 无凭据 --</option>
                                <!-- 凭据列表将通过JS动态加载 -->
                            </select>
                            <small class="form-text text-muted">拓扑发现和设备连接需要凭据</small>
                        </div>
                        <div class="form-actions">
                            <button type="button" class="btn btn-outline close-btn"><i class="fas fa-times"></i> 取消</button>
                            <button type="submit" class="btn"><i class="fas fa-save"></i> 保存修改</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- 修改凭据对话框 -->
        <div id="edit-credential-modal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>修改设备凭据</h2>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <form id="edit-credential-form">
                        <input type="hidden" id="edit-credential-id">
                        <div class="form-group">
                            <label for="edit-credential-name">凭据名称</label>
                            <input type="text" id="edit-credential-name" class="form-control" placeholder="例如：Cisco设备SSH凭据" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-credential-username">用户名</label>
                            <input type="text" id="edit-credential-username" class="form-control" placeholder="例如：admin" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-credential-password">密码</label>
                            <input type="password" id="edit-credential-password" class="form-control" placeholder="输入新密码（留空表示不修改）">
                            <small class="form-text text-muted">留空表示不修改密码</small>
                        </div>
                        <div class="form-group">
                            <label for="edit-credential-protocol">连接协议</label>
                            <select id="edit-credential-protocol" class="form-control" required>
                                <option value="ssh">SSH</option>
                                <option value="telnet">Telnet</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="edit-credential-port">端口</label>
                            <input type="number" id="edit-credential-port" class="form-control" placeholder="22">
                            <small class="form-text text-muted">SSH默认为22，Telnet默认为23</small>
                        </div>
                        <div class="form-group">
                            <label for="edit-credential-enable">Enable密码 (可选)</label>
                            <input type="password" id="edit-credential-enable" class="form-control" placeholder="思科设备的特权模式密码">
                            <small class="form-text text-muted">留空表示不修改Enable密码</small>
                        </div>
                        <div class="form-actions">
                            <button type="button" class="btn btn-outline close-btn"><i class="fas fa-times"></i> 取消</button>
                            <button type="submit" class="btn"><i class="fas fa-save"></i> 保存修改</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* 页面特定样式 */
        .login-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: var(--light-bg);
            padding: 4rem 2.5rem;
            max-width: 400px;
            width: 90%;
            margin: 0 auto;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
        }

        .login-logo {
            margin-bottom: 1.5rem;
        }

        .logo {
            max-width: 120px;
        }

        .login-title {
            font-size: 1.75rem;
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .login-description {
            margin-bottom: 2rem;
            color: var(--light-text);
            font-size: 1rem;
            max-width: 300px;
        }

        .copyright {
            margin-top: 3rem;
            color: var(--light-text);
            font-size: 0.8rem;
        }

        .page {
            min-height: 100vh;
            width: 100%;
        }

        #login-page {
            background-color: var(--bg-color);
            position: relative;
        }

        .page-content {
            padding: 1rem 0 3rem;
        }

        .page-title {
            margin-bottom: 2rem;
            font-weight: 600;
            font-size: 1.75rem;
        }
        
        /* 增加整体容器最大宽度 */
        .container {
            max-width: 1400px;
            width: 95%;
            margin: 0 auto;
            padding: 0 1rem;
        }

        /* 终端页面布局样式 */
        .terminal-layout {
            display: flex;
            gap: 1.5rem;
            height: calc(100vh - 200px);
            min-height: 500px;
        }
        
        /* 会话管理面板左侧垂直布局 */
        .sessions-card {
            width: 320px;
            flex-shrink: 0;
            background-color: var(--light-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            max-height: 100%;
        }
        
        /* 终端窗口右侧布局 */
        .terminal-card {
            flex: 1;
            background-color: var(--light-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            padding: 1.5rem;
            max-height: 100%;
        }

        /* 终端相关样式 */
        .terminal-container {
            display: flex;
            flex-direction: column;
            height: 100%;
            background-color: #1a1a1a;
            border-radius: var(--border-radius);
            overflow: hidden;
        }

        .terminal-toolbar {
            display: flex;
            justify-content: space-between;
            background-color: #333;
            padding: 0.5rem;
            border-bottom: 1px solid #555;
        }

        .terminal-tabs {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            max-width: 80%;
        }

        .terminal-tab {
            padding: 0.5rem 1rem;
            background-color: #444;
            color: #ccc;
            cursor: pointer;
            margin-right: 0.5rem;
            border-radius: 4px 4px 0 0;
            user-select: none;
            white-space: nowrap;
            display: flex;
            align-items: center;
        }

        .terminal-tab.active {
            background-color: #666;
            color: white;
        }

        .terminal-tab-close {
            margin-left: 0.5rem;
            width: 16px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            border-radius: 50%;
            background-color: #555;
            color: #ccc;
        }

        .terminal-tab-close:hover {
            background-color: #777;
            color: white;
        }

        .terminal-actions {
            display: flex;
            align-items: center;
        }

        .terminal-actions button {
            margin-left: 0.5rem;
        }

        .btn-sm {
            padding: 0.4rem 0.8rem;
            font-size: 0.85rem;
        }

        /* 按钮内图标样式 */
        .btn i {
            margin-right: 5px;
        }

        .terminal-windows {
            flex: 1;
            position: relative;
            background-color: black;
            overflow: hidden;
        }

        .terminal-instance {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 0.5rem;
            display: none;
        }

        .terminal-instance.active {
            display: block;
        }

        /* 设备列表样式 */
        .device-manager {
            width: 100%;
        }

        .device-list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .device-list-empty {
            text-align: center;
            padding: 2rem;
            color: #777;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.6);
            backdrop-filter: blur(5px);
        }

        .modal-content {
            background-color: white;
            margin: 5% auto; /* 从10%改为5%，让对话框往上移 */
            padding: 0;
            width: 90%;
            max-width: 500px;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            animation: modalFadeIn 0.3s;
            position: relative;
            top: -50px; /* 添加负的top值使对话框进一步上移 */
        }

        .modal-header {
            padding: 1.5rem;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-header h2 {
            margin: 0;
        }

        .modal-body {
            padding: 1.5rem;
        }

        .close-modal {
            cursor: pointer;
            font-size: 1.5rem;
            font-weight: bold;
            color: #777;
        }

        .close-modal:hover {
            color: #333;
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            margin-top: 1.5rem;
        }

        @keyframes modalFadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 导航栏图标样式 */
        .nav-link i {
            margin-right: 8px;
            font-size: 16px;
        }

        /* 激活状态的导航链接图标样式 */
        .nav-link.active i {
            color: var(--primary-color);
        }

        /* 会话管理面板样式 */
        .sessions-header {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-bottom: 1.2rem;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 1rem;
        }
        
        .sessions-header h2 {
            margin: 0 0 0.8rem 0;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            width: 100%;
        }
        
        .sessions-header h2 i {
            margin-right: 0.5rem;
        }
        
        .sessions-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            width: 100%;
        }
        
        .sessions-actions button {
            flex: 1;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 0.6rem;
            min-width: 90px;
        }
        
        .sessions-container {
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
            overflow-y: auto;
            flex: 1;
        }
        
        .sessions-section {
            width: 100%;
        }
        
        .sessions-section h3 {
            font-size: 1rem;
            margin-bottom: 0.7rem;
            color: var(--secondary-color);
            display: flex;
            align-items: center;
            padding-left: 0.3rem;
        }
        
        .sessions-section h3 i {
            margin-right: 0.5rem;
            width: 16px;
            text-align: center;
        }
        
        .sessions-list {
            background-color: var(--bg-color);
            border-radius: 8px;
            padding: 0.8rem;
            min-height: 100px;
            max-height: 180px;
            overflow-y: auto;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
        }
        
        .session-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: var(--light-bg);
            padding: 0.8rem 1rem;
            border-radius: 6px;
            margin-bottom: 0.7rem;
            cursor: pointer;
            transition: all 0.2s ease;
            border: 1px solid transparent;
        }
        
        .session-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            border-color: var(--border-color);
        }
        
        .session-item-content {
            flex: 1;
            overflow: hidden;
        }
        
        .session-item-title {
            font-weight: 500;
            font-size: 0.95rem;
            margin-bottom: 0.25rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .session-item-details {
            font-size: 0.8rem;
            color: var(--light-text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .session-item-actions {
            display: flex;
            gap: 5px;
            margin-left: 0.5rem;
        }
        
        .session-item-action {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: var(--bg-color);
            color: var(--text-color);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .session-item-action:hover {
            background-color: var(--primary-color);
            color: white;
        }
        
        .session-empty {
            text-align: center;
            color: var(--light-text);
            font-size: 0.9rem;
            padding: 2rem 1rem;
        }
        
        .session-status {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 8px;
        }
        
        .session-status-active {
            background-color: #4CAF50;
        }
        
        .session-status-connecting {
            background-color: #FFC107;
        }
        
        .session-status-disconnected {
            background-color: #F44336;
        }
        
        .session-group-item {
            background-color: var(--light-bg);
            border-radius: 6px;
            margin-bottom: 0.7rem;
            border: 1px solid var(--border-color);
        }
        
        .session-group-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.8rem 1rem;
            cursor: pointer;
        }
        
        .session-group-content {
            padding: 0 0.8rem 0.8rem;
            display: none;
        }
        
        .session-group-content.active {
            display: block;
        }
        
        /* 对话框内的特殊样式 */
        .group-input-container {
            display: flex;
            gap: 10px;
        }
        
        .group-input-container .form-control {
            flex: 1;
        }
        
        .form-actions.right {
            justify-content: flex-end;
        }
        
        .session-groups-list {
            margin-top: 1.5rem;
        }
        
        .session-groups-list h3 {
            font-size: 1.1rem;
            margin-bottom: 0.75rem;
        }
        
        .group-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: var(--bg-color);
            padding: 0.75rem;
            border-radius: 6px;
            margin-bottom: 0.5rem;
        }
        
        .group-item-name {
            font-weight: 500;
        }
        
        .group-item-actions {
            display: flex;
            gap: 5px;
        }
        
        .group-empty {
            text-align: center;
            color: var(--light-text);
            padding: 2rem 0;
        }
        
        /* 表单控件样式增强 */
        textarea.form-control {
            min-height: 80px;
            resize: vertical;
        }
        
        /* 响应式布局调整 */
        @media (max-width: 768px) {
            .terminal-layout {
                flex-direction: column;
                height: auto;
            }
            
            .sessions-card {
                width: 100%;
                height: auto;
                max-height: 400px;
            }
            
            .terminal-card {
                height: 500px;
            }
        }

        /* 设备管理页面样式 */
        .device-management-container {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
        }
        
        .device-card, .credential-card {
            flex: 1;
            min-width: 400px;
        }
        
        .device-manager, .credential-manager {
            width: 100%;
        }
        
        .device-list-header, .credential-list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border-color);
        }
        
        .device-list-header h2, .credential-list-header h2 {
            margin: 0;
            display: flex;
            align-items: center;
            font-size: 1.3rem;
        }
        
        .device-list-header h2 i, .credential-list-header h2 i {
            margin-right: 0.5rem;
        }
        
        .device-list-empty, .credential-list-empty {
            text-align: center;
            padding: 2rem;
            color: var(--light-text);
            background-color: var(--bg-color);
            border-radius: var(--border-radius);
        }
        
        .item-list {
            max-height: 500px;
            overflow-y: auto;
        }
        
        .device-item, .credential-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: var(--bg-color);
            padding: 1rem;
            border-radius: var(--border-radius);
            margin-bottom: 0.8rem;
            transition: all 0.2s ease;
            border: 1px solid transparent;
        }
        
        .device-item:hover, .credential-item:hover {
            border-color: var(--border-color);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transform: translateY(-2px);
        }
        
        .device-item-content, .credential-item-content {
            flex: 1;
        }
        
        .device-item-title, .credential-item-title {
            font-weight: 500;
            font-size: 1.1rem;
            margin-bottom: 0.3rem;
            display: flex;
            align-items: center;
        }
        
        .device-item-title i, .credential-item-title i {
            margin-right: 0.5rem;
            width: 16px;
            text-align: center;
        }
        
        .device-item-subtitle, .credential-item-subtitle {
            font-size: 0.9rem;
            color: var(--light-text);
        }
        
        .device-item-details, .credential-item-details {
            font-size: 0.85rem;
            color: var(--light-text);
            margin-top: 0.5rem;
        }
        
        .device-item-actions, .credential-item-actions {
            display: flex;
            gap: 0.5rem;
        }
        
        .device-item-action, .credential-item-action {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: var(--light-bg);
            color: var(--text-color);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
        }
        
        .device-item-action:hover, .credential-item-action:hover {
            background-color: var(--primary-color);
            color: white;
        }
        
        .device-status {
            display: inline-block !important;
            width: 10px !important;
            height: 10px !important;
            border-radius: 50% !important;
            margin-right: 8px !important;
            flex-shrink: 0 !important;
            flex-grow: 0 !important;
            min-width: 10px !important;
            min-height: 10px !important;
            max-width: 10px !important;
            max-height: 10px !important;
            box-sizing: border-box !important;
            vertical-align: middle !important;
            position: relative !important;
            aspect-ratio: 1 / 1 !important;
        }
        
        .device-status-online {
            background-color: #4CAF50;
        }
        
        .device-status-offline {
            background-color: #F44336;
        }
        
        .device-status-unreachable {
            background-color: #FFC107;
        }
        
        .device-status-maintenance {
            background-color: #2196F3;
        }
        
        .device-status-unknown {
            background-color: #9E9E9E;
        }
        
        /* 设备详情悬浮卡片 */
        .device-hover-card {
            position: absolute;
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            padding: 1rem;
            z-index: 100;
            width: 300px;
            display: none;
        }
        
        .device-hover-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--border-color);
        }
        
        .device-hover-card-title {
            font-weight: 600;
            font-size: 1.1rem;
        }
        
        .device-hover-card-content {
            font-size: 0.9rem;
        }
        
        .device-hover-card-item {
            margin-bottom: 0.5rem;
            display: flex;
        }
        
        .device-hover-card-label {
            font-weight: 500;
            width: 80px;
            color: var(--light-text);
        }
        
        .device-hover-card-value {
            flex: 1;
        }
        
        /* 快速操作按钮 */
        .quick-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
        
        .quick-action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            padding: 1rem;
            background: var(--bg-color);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            color: var(--text-color);
        }
        
        .quick-action-btn:hover {
            background: var(--hover-bg);
            transform: translateY(-2px);
            box-shadow: var(--box-shadow);
        }
        
        .quick-action-btn i {
            font-size: 1.5rem;
            color: var(--primary-color);
        }
        
        .quick-action-btn span {
            font-size: 0.875rem;
            font-weight: 500;
        }
        
        .device-overview-status.unknown {
            background: var(--light-text);
        }
    </style>

    <script>
        // 设备管理UI类
        class DeviceManagerUI {
            constructor() {
                // 获取DOM元素
                this.deviceList = document.getElementById('device-list');
                this.credentialList = document.getElementById('credential-list');
                
                // 获取添加设备按钮和表单
                this.addDeviceBtn = document.getElementById('add-device-btn');
                this.addDeviceModal = document.getElementById('add-device-modal');
                this.addDeviceForm = document.getElementById('add-device-form');
                
                // 获取添加凭据按钮和表单
                this.addCredentialBtn = document.getElementById('add-credential-btn');
                this.addCredentialModal = document.getElementById('add-credential-modal');
                this.addCredentialForm = document.getElementById('add-credential-form');
                
                // 获取修改设备和凭据对话框
                this.editDeviceModal = document.getElementById('edit-device-modal');
                this.editDeviceForm = document.getElementById('edit-device-form');
                this.editCredentialModal = document.getElementById('edit-credential-modal');
                this.editCredentialForm = document.getElementById('edit-credential-form');
                
                // 绑定添加设备按钮事件
                this.addDeviceBtn.addEventListener('click', async () => {
                    // 加载凭据列表到选择器
                    await this.loadCredentialsForSelect('device-credential');
                    this.addDeviceModal.style.display = 'block';
                });
                
                // 绑定添加凭据按钮事件
                this.addCredentialBtn.addEventListener('click', () => {
                    this.addCredentialModal.style.display = 'block';
                });
                
                // 绑定表单提交事件
                this.addDeviceForm.addEventListener('submit', this.handleAddDevice.bind(this));
                this.addCredentialForm.addEventListener('submit', this.handleAddCredential.bind(this));
                
                // 绑定修改表单提交事件
                this.editDeviceForm.addEventListener('submit', this.handleEditDevice.bind(this));
                this.editCredentialForm.addEventListener('submit', this.handleEditCredential.bind(this));
                
                // 绑定对话框关闭按钮事件
                this.addDeviceModal.querySelector('.close-modal').addEventListener('click', () => {
                    this.addDeviceModal.style.display = 'none';
                });
                this.addCredentialModal.querySelector('.close-modal').addEventListener('click', () => {
                    this.addCredentialModal.style.display = 'none';
                });
                this.editDeviceModal.querySelector('.close-modal').addEventListener('click', () => {
                    this.editDeviceModal.style.display = 'none';
                });
                this.editCredentialModal.querySelector('.close-modal').addEventListener('click', () => {
                    this.editCredentialModal.style.display = 'none';
                });
                
                // 绑定取消按钮事件
                this.addDeviceModal.querySelectorAll('.close-btn').forEach(btn => {
                    btn.addEventListener('click', () => {
                        this.addDeviceModal.style.display = 'none';
                    });
                });
                this.addCredentialModal.querySelectorAll('.close-btn').forEach(btn => {
                    btn.addEventListener('click', () => {
                        this.addCredentialModal.style.display = 'none';
                    });
                });
                this.editDeviceModal.querySelectorAll('.close-btn').forEach(btn => {
                    btn.addEventListener('click', () => {
                        this.editDeviceModal.style.display = 'none';
                    });
                });
                this.editCredentialModal.querySelectorAll('.close-btn').forEach(btn => {
                    btn.addEventListener('click', () => {
                        this.editCredentialModal.style.display = 'none';
                    });
                });
                
                // 加载设备和凭据列表
                this.loadDevices();
                this.loadCredentials();
            }
            
            // 加载设备列表
            async loadDevices() {
                try {
                    const response = await fetch('/api/devices');
                    const devices = await response.json();
                    
                    // 清空设备列表
                    this.deviceList.innerHTML = '';
                    
                    if (devices.length === 0) {
                        this.deviceList.innerHTML = `
                            <div class="device-list-empty">
                                <p>尚未添加任何设备</p>
                            </div>
                        `;
                        return;
                    }
                    
                    // 填充设备列表
                    devices.forEach(device => {
                        this.addDeviceToUI(device);
                    });
                    
                } catch (error) {
                    console.error('加载设备列表失败:', error);
                    this.deviceList.innerHTML = `
                        <div class="device-list-empty">
                            <p>加载设备列表失败，请刷新页面重试</p>
                        </div>
                    `;
                }
            }
            
            // 加载凭据列表
            async loadCredentials() {
                try {
                    const response = await fetch('/api/credentials');
                    const credentials = await response.json();
                    
                    // 清空凭据列表
                    this.credentialList.innerHTML = '';
                    
                    if (credentials.length === 0) {
                        this.credentialList.innerHTML = `
                            <div class="credential-list-empty">
                                <p>尚未添加任何凭据</p>
                            </div>
                        `;
                        return;
                    }
                    
                    // 填充凭据列表
                    credentials.forEach(credential => {
                        this.addCredentialToUI(credential);
                    });
                    
                } catch (error) {
                    console.error('加载凭据列表失败:', error);
                    this.credentialList.innerHTML = `
                        <div class="credential-list-empty">
                            <p>加载凭据列表失败，请刷新页面重试</p>
                        </div>
                    `;
                }
            }
            
            // 处理添加设备
            async handleAddDevice(e) {
                e.preventDefault();
                
                const deviceName = document.getElementById('device-name').value;
                const deviceIp = document.getElementById('device-ip').value;
                const deviceType = document.getElementById('device-type').value;
                const deviceVendor = document.getElementById('device-vendor').value;
                const devicePlatform = document.getElementById('device-platform').value;
                const deviceModel = document.getElementById('device-model').value;
                const deviceOs = document.getElementById('device-os').value;
                const deviceLocation = document.getElementById('device-location').value;
                const deviceDescription = document.getElementById('device-description').value;
                const deviceTags = document.getElementById('device-tags').value.split(',').map(tag => tag.trim()).filter(tag => tag);
                const deviceCredential = document.getElementById('device-credential').value || null;
                
                // 验证必填字段
                if (!deviceName || !deviceIp) {
                    alert('请填写设备名称和IP地址');
                    return;
                }
                
                // 准备设备数据
                const deviceData = {
                    name: deviceName,
                    ip_address: deviceIp,
                    device_type: deviceType,
                    vendor: deviceVendor,
                    platform: devicePlatform,
                    model: deviceModel,
                    os_version: deviceOs,
                    location: deviceLocation,
                    description: deviceDescription,
                    tags: deviceTags,
                    credential_id: deviceCredential
                };
                
                console.log('准备发送的设备数据:', deviceData);
                
                try {
                    // 发送API请求添加设备
                    const response = await fetch('/api/devices', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(deviceData)
                    });
                    
                    console.log('收到响应状态:', response.status, response.statusText);
                    
                    // 读取响应文本
                    const responseText = await response.text();
                    console.log('响应内容:', responseText);
                    
                    // 处理错误情况
                    if (!response.ok) {
                        let errorDetail = responseText;
                        try {
                            const errorJson = JSON.parse(responseText);
                            if (errorJson.detail) {
                                errorDetail = errorJson.detail;
                            }
                        } catch (e) {
                            // 如果不是JSON格式，使用原始文本
                        }
                        throw new Error(`添加设备失败 (${response.status}): ${errorDetail}`);
                    }
                    
                    // 解析成功的响应
                    let data;
                    try {
                        data = JSON.parse(responseText);
                    } catch (error) {
                        console.error('解析响应数据失败:', error);
                        throw new Error('解析响应数据失败');
                    }
                    
                    // 添加到UI
                    this.addDeviceToUI(data);
                    
                    // 关闭对话框
                    this.addDeviceModal.style.display = 'none';
                    
                    // 重新加载设备列表
                    this.loadDevices();
                    
                    // 重置表单
                    this.addDeviceForm.reset();
                    
                } catch (error) {
                    console.error('添加设备失败:', error);
                    alert(`添加设备失败: ${error.message}`);
                }
            }
            
            // 处理添加凭据
            async handleAddCredential(e) {
                e.preventDefault();
                
                const credentialName = document.getElementById('credential-name').value;
                const credentialUsername = document.getElementById('credential-username').value;
                const credentialPassword = document.getElementById('credential-password').value;
                const credentialProtocol = document.getElementById('credential-protocol').value;
                const credentialPort = document.getElementById('credential-port').value || (credentialProtocol === 'ssh' ? '22' : '23');
                const credentialEnable = document.getElementById('credential-enable').value;
                
                // 验证必填字段
                if (!credentialName || !credentialUsername || !credentialPassword) {
                    alert('请填写凭据名称、用户名和密码');
                    return;
                }
                
                // 准备凭据数据
                const credentialData = {
                    name: credentialName,
                    username: credentialUsername,
                    password: credentialPassword,
                    protocol: credentialProtocol,
                    port: parseInt(credentialPort),
                    enable_password: credentialEnable || null
                };
                
                console.log('准备发送的凭据数据:', credentialData);
                
                try {
                    // 发送API请求添加凭据
                    const response = await fetch('/api/credentials', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(credentialData)
                    });
                    
                    console.log('收到响应状态:', response.status, response.statusText);
                    
                    // 读取响应文本
                    const responseText = await response.text();
                    console.log('响应内容:', responseText);
                    
                    // 处理错误情况
                    if (!response.ok) {
                        let errorDetail = responseText;
                        try {
                            const errorJson = JSON.parse(responseText);
                            if (errorJson.detail) {
                                errorDetail = errorJson.detail;
                            }
                        } catch (e) {
                            // 如果不是JSON格式，使用原始文本
                        }
                        throw new Error(`添加凭据失败 (${response.status}): ${errorDetail}`);
                    }
                    
                    // 解析成功的响应
                    let data;
                    try {
                        data = JSON.parse(responseText);
                    } catch (error) {
                        console.error('解析响应数据失败:', error);
                        throw new Error('解析响应数据失败');
                    }
                    
                    // 添加到UI
                    this.addCredentialToUI(data);
                    
                    // 关闭对话框
                    this.addCredentialModal.style.display = 'none';
                    
                    // 重新加载凭据列表
                    this.loadCredentials();
                    
                    // 重置表单
                    this.addCredentialForm.reset();
                    
                } catch (error) {
                    console.error('添加凭据失败:', error);
                    alert(`添加凭据失败: ${error.message}`);
                }
            }
            
            // 添加设备到UI
            addDeviceToUI(device) {
                const deviceEmpty = this.deviceList.querySelector('.device-list-empty');
                if (deviceEmpty) {
                    deviceEmpty.remove();
                }
                
                // 检查是否已存在同ID设备条目
                const existingDevice = document.getElementById(`device-${device.id}`);
                if (existingDevice) {
                    existingDevice.remove();
                }
                
                const deviceItem = document.createElement('div');
                deviceItem.className = 'device-item';
                deviceItem.id = `device-${device.id}`;
                
                // 设备状态类
                const statusClasses = {
                    'online': 'device-status-online',
                    'offline': 'device-status-offline',
                    'unreachable': 'device-status-unreachable',
                    'maintenance': 'device-status-maintenance',
                    'unknown': 'device-status-unknown'
                };
                
                // 设备类型图标
                const typeIcons = {
                    'router': 'fas fa-route',
                    'switch': 'fas fa-network-wired',
                    'firewall': 'fas fa-shield-alt',
                    'load_balancer': 'fas fa-balance-scale',
                    'wireless_controller': 'fas fa-wifi',
                    'access_point': 'fas fa-broadcast-tower',
                    'other': 'fas fa-server'
                };
                
                deviceItem.innerHTML = `
                    <div class="device-item-content">
                        <div class="device-item-title">
                            <span class="device-status ${statusClasses[device.status] || 'device-status-unknown'}"></span>
                            <i class="${typeIcons[device.device_type] || 'fas fa-server'}"></i>
                            ${device.name}
                        </div>
                        <div class="device-item-subtitle">
                            ${device.ip_address} | ${device.vendor.toUpperCase()} ${device.platform ? device.platform + ' ' : ''}${device.model}
                        </div>
                        <div class="device-item-details">
                            ${device.os_version ? `OS: ${device.os_version} | ` : ''}
                            ${device.location ? `位置: ${device.location}` : ''}
                        </div>
                    </div>
                    <div class="device-item-actions">
                        <button class="device-item-action connect-device" title="连接设备">
                            <i class="fas fa-terminal"></i>
                        </button>
                        <button class="device-item-action edit-device" title="编辑设备" data-id="${device.id}">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="device-item-action delete-device" title="删除设备" data-id="${device.id}">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                `;
                
                // 连接设备按钮
                deviceItem.querySelector('.connect-device').addEventListener('click', () => {
                    // 显示连接对话框，预选此设备
                    const modal = document.getElementById('device-connect-modal');
                    modal.style.display = 'block';
                    
                    // 调用终端管理器的showConnectDialog方法加载设备和凭据列表
                    window.terminalManager.showConnectDialog();
                
                    // 等待列表加载完成后选择当前设备
                    const checkDeviceSelect = setInterval(() => {
                        const deviceSelect = document.getElementById('device-select');
                        if (deviceSelect.options.length > 1) {
                            clearInterval(checkDeviceSelect);
                            
                            for (let i = 0; i < deviceSelect.options.length; i++) {
                                if (deviceSelect.options[i].value === device.id) {
                                    deviceSelect.selectedIndex = i;
                                    
                                    // 触发change事件以更新终端名称
                                    const event = new Event('change');
                                    deviceSelect.dispatchEvent(event);
                                    break;
                                }
                            }
                        }
                    }, 100);
                });
                
                // 添加设备条目到列表
                this.deviceList.appendChild(deviceItem);
                
                // 绑定编辑和删除按钮事件
                const editBtn = deviceItem.querySelector('.edit-device');
                const deleteBtn = deviceItem.querySelector('.delete-device');
                
                editBtn.addEventListener('click', () => {
                    this.showEditDeviceModal(device.id);
                });
                
                deleteBtn.addEventListener('click', () => {
                    this.handleDeleteDevice(device.id);
                });
            }
            
            // 添加凭据到UI
            addCredentialToUI(credential) {
                const credentialEmpty = this.credentialList.querySelector('.credential-list-empty');
                if (credentialEmpty) {
                    credentialEmpty.remove();
                }
                
                // 检查是否已存在同ID凭据条目
                const existingCredential = document.getElementById(`credential-${credential.id}`);
                if (existingCredential) {
                    existingCredential.remove();
                }
                
                // 协议图标
                const protocolIcons = {
                    'ssh': 'fas fa-lock',
                    'telnet': 'fas fa-unlock',
                    'snmp': 'fas fa-chart-line',
                    'http': 'fas fa-globe',
                    'https': 'fas fa-shield-alt',
                    'netconf': 'fas fa-code'
                };
                
                const credentialItem = document.createElement('div');
                credentialItem.className = 'credential-item';
                credentialItem.id = `credential-${credential.id}`;
                
                credentialItem.innerHTML = `
                    <div class="credential-item-content">
                        <div class="credential-item-title">
                            <i class="${protocolIcons[credential.protocol] || 'fas fa-key'}"></i>
                            ${credential.name}
                        </div>
                        <div class="credential-item-subtitle">
                            ${credential.username}@${credential.protocol.toUpperCase()} | 端口: ${credential.port}
                        </div>
                    </div>
                    <div class="credential-item-actions">
                        <button class="credential-item-action edit-credential" title="编辑凭据" data-id="${credential.id}">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="credential-item-action delete-credential" title="删除凭据" data-id="${credential.id}">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                `;
                
                // 添加凭据条目到列表
                this.credentialList.appendChild(credentialItem);
                
                // 绑定编辑和删除按钮事件
                const editBtn = credentialItem.querySelector('.edit-credential');
                const deleteBtn = credentialItem.querySelector('.delete-credential');
                
                editBtn.addEventListener('click', () => {
                    this.showEditCredentialModal(credential.id);
                });
                
                deleteBtn.addEventListener('click', () => {
                    this.handleDeleteCredential(credential.id);
                });
            }
            
            // 显示修改设备对话框
            async showEditDeviceModal(deviceId) {
                try {
                    // 获取设备详情
                    const response = await fetch(`/api/devices/${deviceId}`);
                    if (!response.ok) {
                        throw new Error('获取设备详情失败');
                    }
                    
                    const device = await response.json();
                    
                    // 设置表单值
                    document.getElementById('edit-device-id').value = device.id;
                    document.getElementById('edit-device-name').value = device.name;
                    document.getElementById('edit-device-ip').value = device.ip_address;
                    document.getElementById('edit-device-type').value = device.device_type;
                    document.getElementById('edit-device-vendor').value = device.vendor;
                    document.getElementById('edit-device-platform').value = device.platform || '';
                    document.getElementById('edit-device-model').value = device.model || '';
                    document.getElementById('edit-device-os').value = device.os_version || '';
                    document.getElementById('edit-device-status').value = device.status;
                    document.getElementById('edit-device-location').value = device.location || '';
                    document.getElementById('edit-device-description').value = device.description || '';
                    document.getElementById('edit-device-tags').value = (device.tags || []).join(',');
                    
                    // 加载并设置凭据选择器
                    await this.loadCredentialsForSelect('edit-device-credential', device.credential_id);
                    
                    // 显示对话框
                    this.editDeviceModal.style.display = 'block';
                    
                } catch (error) {
                    console.error('加载设备详情失败:', error);
                    alert('加载设备详情失败: ' + error.message);
                }
            }
            
            // 显示修改凭据对话框
            async showEditCredentialModal(credentialId) {
                try {
                    // 获取凭据详情
                    const response = await fetch(`/api/credentials/${credentialId}`);
                    if (!response.ok) {
                        throw new Error('获取凭据详情失败');
                    }
                    
                    const credential = await response.json();
                    
                    // 设置表单值
                    document.getElementById('edit-credential-id').value = credential.id;
                    document.getElementById('edit-credential-name').value = credential.name;
                    document.getElementById('edit-credential-username').value = credential.username;
                    document.getElementById('edit-credential-password').value = ''; // 不显示原密码
                    document.getElementById('edit-credential-protocol').value = credential.protocol;
                    document.getElementById('edit-credential-port').value = credential.port;
                    document.getElementById('edit-credential-enable').value = ''; // 不显示原Enable密码
                    
                    // 显示对话框
                    this.editCredentialModal.style.display = 'block';
                    
                } catch (error) {
                    console.error('加载凭据详情失败:', error);
                    alert('加载凭据详情失败: ' + error.message);
                }
            }
            
            // 处理修改设备
            async handleEditDevice(e) {
                e.preventDefault();
                
                const deviceId = document.getElementById('edit-device-id').value;
                const deviceName = document.getElementById('edit-device-name').value;
                const deviceIp = document.getElementById('edit-device-ip').value;
                const deviceType = document.getElementById('edit-device-type').value;
                const deviceVendor = document.getElementById('edit-device-vendor').value;
                const devicePlatform = document.getElementById('edit-device-platform').value;
                const deviceModel = document.getElementById('edit-device-model').value;
                const deviceOs = document.getElementById('edit-device-os').value;
                const deviceStatus = document.getElementById('edit-device-status').value;
                const deviceLocation = document.getElementById('edit-device-location').value;
                const deviceDescription = document.getElementById('edit-device-description').value;
                const deviceTags = document.getElementById('edit-device-tags').value.split(',').map(tag => tag.trim()).filter(tag => tag);
                const deviceCredential = document.getElementById('edit-device-credential').value || null;
                
                // 验证必填字段
                if (!deviceName || !deviceIp) {
                    alert('请填写设备名称和IP地址');
                    return;
                }
                
                // 准备设备数据
                const deviceData = {
                    name: deviceName,
                    ip_address: deviceIp,
                    device_type: deviceType,
                    vendor: deviceVendor,
                    platform: devicePlatform,
                    model: deviceModel,
                    os_version: deviceOs,
                    status: deviceStatus,
                    location: deviceLocation,
                    description: deviceDescription,
                    tags: deviceTags,
                    credential_id: deviceCredential
                };
                
                try {
                    // 发送API请求修改设备
                    const response = await fetch(`/api/devices/${deviceId}`, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(deviceData)
                    });
                    
                    // 处理错误情况
                    if (!response.ok) {
                        const responseText = await response.text();
                        let errorDetail = responseText;
                        try {
                            const errorJson = JSON.parse(responseText);
                            if (errorJson.detail) {
                                errorDetail = errorJson.detail;
                            }
                        } catch (e) {}
                        throw new Error(`修改设备失败 (${response.status}): ${errorDetail}`);
                    }
                    
                    // 解析成功的响应
                    const data = await response.json();
                    
                    // 更新UI
                    this.addDeviceToUI(data);
                    
                    // 关闭对话框
                    this.editDeviceModal.style.display = 'none';
                    
                    // 提示成功
                    alert('设备修改成功');
                    
                } catch (error) {
                    console.error('修改设备失败:', error);
                    alert(`修改设备失败: ${error.message}`);
                }
            }
            
            // 处理修改凭据
            async handleEditCredential(e) {
                e.preventDefault();
                
                const credentialId = document.getElementById('edit-credential-id').value;
                const credentialName = document.getElementById('edit-credential-name').value;
                const credentialUsername = document.getElementById('edit-credential-username').value;
                const credentialPassword = document.getElementById('edit-credential-password').value;
                const credentialProtocol = document.getElementById('edit-credential-protocol').value;
                const credentialPortInput = document.getElementById('edit-credential-port');
                const credentialPort = credentialPortInput.value === '' ? null : parseInt(credentialPortInput.value);
                const credentialEnable = document.getElementById('edit-credential-enable').value;
                
                // 验证必填字段
                if (!credentialName || !credentialUsername) {
                    alert('请填写凭据名称和用户名');
                    return;
                }
                
                // 准备凭据数据
                const credentialData = {
                    name: credentialName,
                    username: credentialUsername,
                    protocol: credentialProtocol,
                    port: credentialPort
                };
                
                // 只有在用户输入了新密码时才包含密码字段
                if (credentialPassword) {
                    credentialData.password = credentialPassword;
                }
                
                // 只有在用户输入了新Enable密码时才包含Enable密码字段
                if (credentialEnable) {
                    credentialData.enable_password = credentialEnable;
                }
                
                try {
                    // 发送API请求修改凭据
                    const response = await fetch(`/api/credentials/${credentialId}`, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(credentialData)
                    });
                    
                    // 处理错误情况
                    if (!response.ok) {
                        const responseText = await response.text();
                        let errorDetail = responseText;
                        try {
                            const errorJson = JSON.parse(responseText);
                            if (errorJson.detail) {
                                errorDetail = errorJson.detail;
                            }
                        } catch (e) {}
                        throw new Error(`修改凭据失败 (${response.status}): ${errorDetail}`);
                    }
                    
                    // 解析成功的响应
                    const data = await response.json();
                    
                    // 更新UI
                    this.addCredentialToUI(data);
                    
                    // 关闭对话框
                    this.editCredentialModal.style.display = 'none';
                    
                    // 提示成功
                    alert('凭据修改成功');
                    
                } catch (error) {
                    console.error('修改凭据失败:', error);
                    alert(`修改凭据失败: ${error.message}`);
                }
            }
            
            // 处理删除设备
            async handleDeleteDevice(deviceId) {
                if (!confirm('确定要删除此设备吗？')) {
                    return;
                }
                
                try {
                    // 发送API请求删除设备
                    const response = await fetch(`/api/devices/${deviceId}`, {
                        method: 'DELETE'
                    });
                    
                    if (!response.ok) {
                        throw new Error('删除设备失败');
                    }
                    
                    // 删除成功，从UI中移除
                    const deviceElement = document.getElementById(`device-${deviceId}`);
                    if (deviceElement) {
                        deviceElement.remove();
                    }
                    
                    // 如果列表为空，显示提示
                    if (this.deviceList.children.length === 0) {
                        this.deviceList.innerHTML = `
                            <div class="device-list-empty">
                                <p>尚未添加任何设备</p>
                            </div>
                        `;
                    }
                    
                } catch (error) {
                    console.error('删除设备失败:', error);
                    alert('删除设备失败: ' + error.message);
                }
            }
            
            // 处理删除凭据
            async handleDeleteCredential(credentialId) {
                if (!confirm('确定要删除此凭据吗？')) {
                    return;
                }
                
                try {
                    // 发送API请求删除凭据
                    const response = await fetch(`/api/credentials/${credentialId}`, {
                        method: 'DELETE'
                    });
                    
                    if (!response.ok) {
                        throw new Error('删除凭据失败');
                    }
                    
                    // 删除成功，从UI中移除
                    const credentialElement = document.getElementById(`credential-${credentialId}`);
                    if (credentialElement) {
                        credentialElement.remove();
                    }
                    
                    // 如果列表为空，显示提示
                    if (this.credentialList.children.length === 0) {
                        this.credentialList.innerHTML = `
                            <div class="credential-list-empty">
                                <p>尚未添加任何凭据</p>
                            </div>
                        `;
                    }
                    
                } catch (error) {
                    console.error('删除凭据失败:', error);
                    alert('删除凭据失败: ' + error.message);
                }
            }

            // 为选择器加载凭据列表
            async loadCredentialsForSelect(selectId, selectedCredentialId = null) {
                try {
                    const response = await fetch('/api/credentials');
                    const credentials = await response.json();
                    
                    const selectElement = document.getElementById(selectId);
                    if (!selectElement) {
                        console.error(`未找到选择器元素: ${selectId}`);
                        return;
                    }
                    
                    // 清空选择器
                    selectElement.innerHTML = '<option value="">-- 无凭据 --</option>';
                    
                    // 填充凭据选项
                    credentials.forEach(credential => {
                        const option = document.createElement('option');
                        option.value = credential.id;
                        option.textContent = `${credential.name} (${credential.username}@${credential.protocol.toUpperCase()})`;
                        
                        // 设置选中状态
                        if (selectedCredentialId && credential.id === selectedCredentialId) {
                            option.selected = true;
                        }
                        
                        selectElement.appendChild(option);
                    });
                    
                } catch (error) {
                    console.error('加载凭据选择器失败:', error);
                }
            }
        }

        // ================================
        // 全局主题管理系统
        // ================================
        
        // 初始化全局主题系统
        function initializeGlobalTheme() {
            console.log('初始化全局主题系统...');
            
            // 获取主题切换器
            const loginThemeToggle = document.getElementById('login-theme-toggle');
            const dashboardThemeToggle = document.getElementById('theme-toggle');
            
            // 获取当前主题
            const currentTheme = localStorage.getItem('theme') || 'light';
            
            // 应用主题
            applyTheme(currentTheme);
            
            // 设置切换器状态
            if (loginThemeToggle) {
                loginThemeToggle.checked = currentTheme === 'dark';
                // 绑定登录页面主题切换事件
                loginThemeToggle.addEventListener('change', function() {
                    const newTheme = this.checked ? 'dark' : 'light';
                    changeTheme(newTheme);
                });
            }
            
            if (dashboardThemeToggle) {
                dashboardThemeToggle.checked = currentTheme === 'dark';
                // 绑定仪表盘主题切换事件
                dashboardThemeToggle.addEventListener('change', function() {
                    const newTheme = this.checked ? 'dark' : 'light';
                    changeTheme(newTheme);
                });
            }
            
            console.log(`主题系统初始化完成，当前主题：${currentTheme}`);
        }
        
        // 应用主题
        function applyTheme(theme) {
            document.documentElement.setAttribute('data-theme', theme);
            
            // 根据主题切换logo图片
            const loginLogo = document.getElementById('login-logo');
            const headerLogo = document.getElementById('header-logo');
            
            if (theme === 'dark') {
                // 暗色主题使用logod.png
                if (loginLogo) {
                    loginLogo.src = loginLogo.src.replace('logo.png', 'logod.png');
                }
                if (headerLogo) {
                    headerLogo.src = headerLogo.src.replace('logo.png', 'logod.png');
                }
            } else {
                // 明亮主题使用logo.png
                if (loginLogo) {
                    loginLogo.src = loginLogo.src.replace('logod.png', 'logo.png');
                }
                if (headerLogo) {
                    headerLogo.src = headerLogo.src.replace('logod.png', 'logo.png');
                }
            }
            
            // 同步所有主题切换器状态
            const loginThemeToggle = document.getElementById('login-theme-toggle');
            const dashboardThemeToggle = document.getElementById('theme-toggle');
            
            if (loginThemeToggle) {
                loginThemeToggle.checked = theme === 'dark';
            }
            
            if (dashboardThemeToggle) {
                dashboardThemeToggle.checked = theme === 'dark';
            }
        }
        
        // 切换主题
        function changeTheme(newTheme) {
            // 应用新主题
            applyTheme(newTheme);
            
            // 保存到本地存储
            localStorage.setItem('theme', newTheme);
            
            // 添加活动记录（如果仪表盘已初始化）
            if (typeof addActivity === 'function') {
                addActivity(`切换到${newTheme === 'dark' ? '暗色' : '明亮'}主题`, 'info');
            }
            
            console.log(`主题已切换到：${newTheme}`);
        }
        
        // 页面路由管理
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化主题系统
            initializeGlobalTheme();
            
            // 页面加载完成后初始化
            console.log('初始化会话管理器...');
            if (!window.sessionManager) {
                window.sessionManager = new SessionManager();
                console.log('会话管理器初始化完成');
            }
            
            console.log('初始化会话管理UI...');
            if (!window.sessionManagerUI) {
                window.sessionManagerUI = new SessionManagerUI();
                console.log('会话管理UI初始化完成');
            }
            
            console.log('初始化终端管理器...');
            if (!window.terminalManager) {
                window.terminalManager = new TerminalManager();
                console.log('终端管理器初始化完成');
            }
            
            console.log('初始化设备管理UI...');
            if (!window.deviceManagerUI) {
                window.deviceManagerUI = new DeviceManagerUI();
                console.log('设备管理UI初始化完成');
            }
            
            // 预加载设备和凭据列表到缓存
            function preloadDevicesAndCredentials() {
                console.log('预加载设备和凭据列表...');
                
                // 加载设备列表
                fetch('/api/devices')
                    .then(response => response.ok ? response.json() : [])
                    .then(devices => {
                        console.log('预加载设备列表成功:', devices);
                        window.cachedDevices = devices;
                    })
                    .catch(error => {
                        console.error('预加载设备列表失败:', error);
                    });
                    
                // 加载凭据列表
                fetch('/api/credentials')
                    .then(response => response.ok ? response.json() : [])
                    .then(credentials => {
                        console.log('预加载凭据列表成功:', credentials);
                        window.cachedCredentials = credentials;
                    })
                    .catch(error => {
                        console.error('预加载凭据列表失败:', error);
                    });
            }
            
            // 页面加载时预加载数据
            preloadDevicesAndCredentials();
            
            // 添加备用的拓扑发现按钮事件监听器
            function ensureTopologyInitialized() {
                if (!window.topologyVisualization && window.TopologyVisualization) {
                    console.log('备用初始化：创建拓扑可视化实例');
                    try {
                        window.topologyVisualization = new window.TopologyVisualization();
                        console.log('备用拓扑可视化模块初始化成功');
                    } catch (error) {
                        console.error('备用拓扑可视化模块初始化失败:', error);
                    }
                }
            }
            
            // 为拓扑发现按钮添加备用事件监听器
            const discoverTopologyBtn = document.getElementById('discover-topology-btn');
            if (discoverTopologyBtn) {
                discoverTopologyBtn.addEventListener('click', function(e) {
                    console.log('发现拓扑按钮被点击');
                    
                    // 确保拓扑模块已初始化
                    ensureTopologyInitialized();
                    
                    // 如果拓扑模块仍然没有初始化，显示错误提示
                    if (!window.topologyVisualization) {
                        console.error('拓扑可视化模块未能初始化');
                        alert('拓扑可视化模块加载失败，请刷新页面重试');
                        e.preventDefault();
                        e.stopPropagation();
                        return false;
                    }
                    
                    console.log('拓扑模块已准备就绪');
                });
            }

            // 按钮点击事件 - 从登录页面到主页（默认显示仪表盘）
            document.getElementById('start-btn').addEventListener('click', function() {
                document.getElementById('login-page').style.display = 'none';
                document.getElementById('home-page').style.display = 'block';
                
                // 默认显示仪表盘页面
                document.querySelectorAll('.page-content').forEach(content => {
                    content.style.display = 'none';
                });
                document.getElementById('dashboard-content').style.display = 'block';
                
                // 初始化仪表盘
                if (typeof initializeDashboard === 'function') {
                    initializeDashboard();
                }
                
                window.history.pushState({page: 'dashboard'}, 'Dashboard', '/dashboard');
            });

            // 导航链接点击处理
            const navLinks = document.querySelectorAll('.nav-link');
            const pageContents = document.querySelectorAll('.page-content');

            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有活动状态
                    navLinks.forEach(l => l.classList.remove('active'));
                    // 添加当前活动状态
                    this.classList.add('active');

                    // 隐藏所有内容
                    pageContents.forEach(content => {
                        content.style.display = 'none';
                    });

                    // 显示选中的内容
                    const pageId = this.getAttribute('data-page');
                    document.getElementById(`${pageId}-content`).style.display = 'block';
                    
                    // 更新URL
                    window.history.pushState({page: pageId}, pageId, `#${pageId}`);
                    
                    // 特殊页面处理
                    if (pageId === 'terminal') {
                        // 如果是终端页面，重新适应终端大小
                        const activeTerminal = window.terminalManager.getTerminalById(window.terminalManager.activeTerminalId);
                        if (activeTerminal && activeTerminal.fitAddon) {
                            setTimeout(() => activeTerminal.fitAddon.fit(), 10);
                        }
                    } else if (pageId === 'topology') {
                        // 如果是拓扑页面，初始化拓扑可视化
                        console.log('切换到拓扑页面，初始化拓扑可视化模块...');
                        if (!window.topologyVisualization) {
                            try {
                                window.topologyVisualization = new TopologyVisualization();
                                console.log('拓扑可视化模块初始化成功');
                            } catch (error) {
                                console.error('拓扑可视化模块初始化失败:', error);
                            }
                        } else {
                            console.log('拓扑可视化模块已存在，跳过初始化');
                            // 如果已经初始化，可以触发窗口大小调整
                            if (window.topologyVisualization.handleResize) {
                                setTimeout(() => window.topologyVisualization.handleResize(), 10);
                            }
                        }
                    }
                });
            });

            // 处理浏览器的后退/前进按钮
            window.addEventListener('popstate', function(event) {
                if (event.state && event.state.page) {
                    if (event.state.page === 'home') {
                        document.getElementById('login-page').style.display = 'none';
                        document.getElementById('home-page').style.display = 'block';
                    } else if (event.state.page === 'login') {
                        document.getElementById('login-page').style.display = 'block';
                        document.getElementById('home-page').style.display = 'none';
                    } else {
                        // 处理内部页面导航
                        navLinks.forEach(link => {
                            if (link.getAttribute('data-page') === event.state.page) {
                                link.click();
                            }
                        });
                    }
                }
            });

            // 初始化页面状态
            const initialPath = window.location.pathname;
            if (initialPath === '/home') {
                document.getElementById('login-page').style.display = 'none';
                document.getElementById('home-page').style.display = 'block';
                window.history.replaceState({page: 'home'}, 'Home', '/home');
            } else {
                window.history.replaceState({page: 'login'}, 'Login', '/');
            }

            // 处理锚点导航
            const hash = window.location.hash.substring(1);
            if (hash) {
                const targetLink = document.querySelector(`.nav-link[data-page="${hash}"]`);
                if (targetLink) {
                    targetLink.click();
                }
            }

            // 设备连接表单处理
            document.getElementById('connect-device-form').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const deviceId = document.getElementById('device-select').value;
                const credentialId = document.getElementById('credential-select').value;
                let terminalName = document.getElementById('terminal-name').value;
                
                if (!deviceId || !credentialId) {
                    alert('请选择设备和凭据');
                    return;
                }
                
                // 如果没有提供名称，使用默认格式
                if (!terminalName) {
                    const deviceOption = document.getElementById('device-select').selectedOptions[0];
                    terminalName = deviceOption.textContent.split(' ')[0] + '-会话';
                }
                
                // 创建新的终端并连接设备
                const termInfo = window.terminalManager.createTerminal(terminalName, deviceId, credentialId);
                
                // 创建会话记录
                window.sessionManager.connectToDevice(deviceId, credentialId, terminalName);
                
                // 关闭对话框
                document.getElementById('device-connect-modal').style.display = 'none';
                
                // 清空表单
                this.reset();
                
                // 自动跳转到终端页面
                const terminalLink = document.querySelector('.nav-link[data-page="terminal"]');
                if (terminalLink) {
                    terminalLink.click();
                }
            });

            // 通用模态框关闭处理
            document.querySelectorAll('.close-modal, .close-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const modal = this.closest('.modal');
                    if (modal) {
                        modal.style.display = 'none';
                    }
                });
            });

            // 点击对话框外部关闭
            window.addEventListener('click', function(e) {
                document.querySelectorAll('.modal').forEach(modal => {
                    if (e.target === modal) {
                        modal.style.display = 'none';
                    }
                });
            });
        });
        
        // ================================
        // 仪表盘相关功能
        // ================================
        
        // 初始化仪表盘
        function initializeDashboard() {
            console.log('初始化仪表盘...');
            
            // 初始化主题切换器
            initializeThemeSwitcher();
            
            // 更新当前时间
            updateCurrentTime();
            setInterval(updateCurrentTime, 1000);
            
            // 加载仪表盘数据
            loadDashboardData();
            
            // 绑定仪表盘事件
            bindDashboardEvents();
            
            // 添加活动记录
            addActivity('系统启动成功', 'success');
        }
        
        // 主题切换器初始化
        function initializeThemeSwitcher() {
            // 主题切换器现在由全局主题系统管理
            // 这个函数保留用于兼容性，实际功能在initializeGlobalTheme中实现
            console.log('仪表盘主题切换器由全局主题系统管理');
        }
        
        // 更新当前时间
        function updateCurrentTime() {
            const now = new Date();
            const timeString = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
            
            const currentTimeElement = document.getElementById('current-time');
            if (currentTimeElement) {
                currentTimeElement.textContent = timeString;
            }
        }
        
        // 加载仪表盘数据
        async function loadDashboardData() {
            try {
                // 并行加载各种数据
                const [devices, topology, sessions] = await Promise.all([
                    fetch('/api/devices').then(r => r.ok ? r.json() : []).catch(() => []),
                    fetch('/api/topology').then(r => r.ok ? r.json() : {}).catch(() => ({})),
                    // 假设有会话API，暂时返回空数组
                    Promise.resolve([])
                ]);
                
                // 更新统计数据
                updateDashboardStats(devices, topology, sessions);
                
                // 更新设备概览
                updateDevicesOverview(devices);
                
                // 检查网络状态
                checkNetworkStatus();
                
            } catch (error) {
                console.error('加载仪表盘数据失败:', error);
                addActivity('加载仪表盘数据失败', 'error');
            }
        }
        
        // 更新仪表盘统计数据
        function updateDashboardStats(devices, topology, sessions) {
            // 设备数量
            const devicesCount = devices.length;
            document.getElementById('dashboard-devices-count').textContent = devicesCount;
            document.getElementById('dashboard-devices-change').textContent = `+${devicesCount}`;
            
            // 活跃连接数（暂时设为0）
            document.getElementById('dashboard-connections-count').textContent = '0';
            document.getElementById('dashboard-connections-change').textContent = '0';
            
            // 拓扑节点数
            const topologyNodes = topology.nodes ? Object.keys(topology.nodes).length : 0;
            document.getElementById('dashboard-topology-nodes').textContent = topologyNodes;
            document.getElementById('dashboard-topology-change').textContent = `+${topologyNodes}`;
            
            // 终端会话数
            const sessionsCount = sessions.length;
            document.getElementById('dashboard-sessions-count').textContent = sessionsCount;
            document.getElementById('dashboard-sessions-change').textContent = `+${sessionsCount}`;
        }
        
        // 更新设备概览
        function updateDevicesOverview(devices) {
            const devicesOverview = document.getElementById('devices-overview');
            
            if (!devices || devices.length === 0) {
                devicesOverview.innerHTML = `
                    <div class="no-devices">
                        <i class="fas fa-server"></i>
                        <p>暂无设备</p>
                        <button class="btn btn-sm" onclick="goToDevices()">
                            <i class="fas fa-plus"></i> 添加设备
                        </button>
                    </div>
                `;
                return;
            }
            
            // 显示前5个设备
            const displayDevices = devices.slice(0, 5);
            const deviceItems = displayDevices.map(device => `
                <div class="device-overview-item">
                    <div class="device-overview-icon">
                        <i class="fas fa-server"></i>
                    </div>
                    <div class="device-overview-info">
                        <div class="device-overview-name">${device.name}</div>
                        <div class="device-overview-details">${device.ip_address} • ${device.vendor}</div>
                    </div>
                    <div class="device-overview-status ${device.status || 'unknown'}"></div>
                </div>
            `).join('');
            
            devicesOverview.innerHTML = deviceItems;
            
            if (devices.length > 5) {
                devicesOverview.innerHTML += `
                    <div class="device-overview-item" onclick="goToDevices()" style="cursor: pointer;">
                        <div class="device-overview-icon">
                            <i class="fas fa-ellipsis-h"></i>
                        </div>
                        <div class="device-overview-info">
                            <div class="device-overview-name">查看更多</div>
                            <div class="device-overview-details">还有 ${devices.length - 5} 个设备</div>
                        </div>
                        <div class="device-overview-status more-indicator"></div>
                    </div>
                `;
            }
        }
        
        // 检查网络状态
        async function checkNetworkStatus() {
            try {
                const response = await fetch('/api/devices', { method: 'HEAD' });
                const statusIcon = document.getElementById('network-status');
                const statusText = document.getElementById('network-status-text');
                
                if (response.ok) {
                    statusIcon.className = 'status-icon online';
                    statusIcon.innerHTML = '<i class="fas fa-wifi"></i>';
                    statusText.textContent = '连接正常';
                } else {
                    statusIcon.className = 'status-icon warning';
                    statusIcon.innerHTML = '<i class="fas fa-exclamation-triangle"></i>';
                    statusText.textContent = '连接异常';
                }
            } catch (error) {
                const statusIcon = document.getElementById('network-status');
                const statusText = document.getElementById('network-status-text');
                statusIcon.className = 'status-icon offline';
                statusIcon.innerHTML = '<i class="fas fa-times-circle"></i>';
                statusText.textContent = '连接失败';
            }
        }
        
        // 绑定仪表盘事件
        function bindDashboardEvents() {
            // 刷新仪表盘按钮
            const refreshBtn = document.getElementById('refresh-dashboard');
            if (refreshBtn) {
                refreshBtn.addEventListener('click', function() {
                    loadDashboardData();
                    addActivity('刷新仪表盘数据', 'info');
                });
            }
        }
        
        // 添加活动记录
        function addActivity(text, type = 'info') {
            const activitiesList = document.getElementById('recent-activities');
            if (!activitiesList) return;
            
            const activityItem = document.createElement('div');
            activityItem.className = 'activity-item';
            activityItem.innerHTML = `
                <div class="activity-icon ${type}">
                    <i class="fas fa-${getActivityIcon(type)}"></i>
                </div>
                <div class="activity-content">
                    <div class="activity-text">${text}</div>
                    <div class="activity-time">刚刚</div>
                </div>
            `;
            
            // 插入到列表顶部
            activitiesList.insertBefore(activityItem, activitiesList.firstChild);
            
            // 限制活动数量（最多保留10条）
            const activities = activitiesList.querySelectorAll('.activity-item');
            if (activities.length > 10) {
                activitiesList.removeChild(activities[activities.length - 1]);
            }
        }
        
        // 获取活动图标
        function getActivityIcon(type) {
            const icons = {
                info: 'info-circle',
                success: 'check-circle',
                warning: 'exclamation-triangle',
                error: 'times-circle'
            };
            return icons[type] || 'info-circle';
        }
        
        // 仪表盘快速操作功能
        function goToDevices() {
            const devicesLink = document.querySelector('.nav-link[data-page="devices"]');
            if (devicesLink) {
                devicesLink.click();
                addActivity('跳转到设备管理页面', 'info');
            }
        }
        
        function openTerminal() {
            const terminalLink = document.querySelector('.nav-link[data-page="terminal"]');
            if (terminalLink) {
                terminalLink.click();
                addActivity('打开终端页面', 'info');
            }
        }
        
        function discoverTopology() {
            const topologyLink = document.querySelector('.nav-link[data-page="topology"]');
            if (topologyLink) {
                topologyLink.click();
                // 延迟触发拓扑发现
                setTimeout(() => {
                    const discoverBtn = document.getElementById('discover-topology-btn');
                    if (discoverBtn) {
                        discoverBtn.click();
                        addActivity('启动拓扑发现', 'info');
                    }
                }, 500);
            }
        }
        
        function scanNetwork() {
            // 暂时跳转到设备页面
            goToDevices();
            addActivity('网络扫描功能开发中', 'warning');
        }
        
        function refreshSystemStatus() {
            checkNetworkStatus();
            addActivity('刷新系统状态', 'info');
        }
        
        function refreshDevicesOverview() {
            loadDashboardData();
            addActivity('刷新设备概览', 'info');
        }
        
        function clearActivities() {
            const activitiesList = document.getElementById('recent-activities');
            if (activitiesList) {
                activitiesList.innerHTML = `
                    <div class="activity-item">
                        <div class="activity-icon info">
                            <i class="fas fa-info-circle"></i>
                        </div>
                        <div class="activity-content">
                            <div class="activity-text">活动记录已清空</div>
                            <div class="activity-time">刚刚</div>
                        </div>
                    </div>
                `;
            }
        }
        
        // 暴露initializeDashboard函数到全局作用域
        window.initializeDashboard = initializeDashboard;
    </script>
</body>
</html> 