cnbugs/network-topology-discovery
1
0
Fork 0
Code Issues Pull Requests Activity

v1.0.1: 多拓扑管理、Web SSH终端、扫描进度修复、拓扑连线优化

Browse Source 
- 修复扫描进度条不动的问题（分4阶段更新进度）
- 新增Web SSH远程终端（xterm.js + WebSocket）
- 新增多拓扑管理（创建/切换拓扑、全局设备池）
- 简化新建拓扑流程（仅需名称，创建后选择设备）
- 修复拓扑Builder设备去重（按IP去重）
- 修复启动时拓扑设备不加载到Builder的问题
- 优化MAC前缀匹配（避免歧义前缀导致错误连线）
- 拓扑连线改为无向（去除箭头）
- 设备详情面板加宽到600px
This commit is contained in:
Your Name
2026-04-26 13:25:19 +08:00
parent 6e1b010c17
commit 44f7fef1f8
17 changed files with 1940 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+74
View File
@@ -6,12 +6,20 @@
<title>网络拓扑发现系统</title>
<link rel="stylesheet" href="/css/style.css">
<script src="https://unpkg.com/cytoscape@3.26.0/dist/cytoscape.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/xterm@5.3.0/css/xterm.css">
<script src="https://unpkg.com/xterm@5.3.0/lib/xterm.js"></script>
<script src="https://unpkg.com/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
<script src="https://unpkg.com/xterm-addon-web-links@0.9.0/lib/xterm-addon-web-links.js"></script>
</head>
<body>
<div class="container">
<header>
<h1>🌐 网络拓扑发现系统</h1>
<div class="controls">
<select id="topology-selector" class="topology-selector">
<option value="">加载中...</option>
</select>
<button id="btn-new-topology" class="btn btn-info">新建拓扑</button>
<button id="btn-scan" class="btn btn-primary">开始扫描</button>
<button id="btn-add-device" class="btn btn-success">添加设备</button>
<button id="btn-export" class="btn btn-info">导出拓扑</button>
@@ -73,6 +81,43 @@
</div>
</div>
<!-- SSH终端模态框 -->
<div id="modal-terminal" class="modal">
<div class="modal-content terminal-modal-content">
<span class="close-terminal">&times;</span>
<h2>SSH 终端 - <span id="terminal-device-name"></span></h2>
<div id="terminal-container" class="terminal-container"></div>
<div id="terminal-status" class="terminal-status">已断开</div>
</div>
</div>
<!-- SSH凭据输入弹窗 -->
<div id="modal-ssh-creds" class="modal">
<div class="modal-content">
<span class="close-ssh-creds">&times;</span>
<h2>SSH 连接凭据</h2>
<form id="ssh-creds-form">
<div class="form-group">
<label>设备IP:</label>
<input type="text" id="ssh-target-ip" readonly>
</div>
<div class="form-group">
<label for="ssh-target-port">SSH端口:</label>
<input type="number" id="ssh-target-port" value="22">
</div>
<div class="form-group">
<label for="ssh-target-username">用户名:</label>
<input type="text" id="ssh-target-username" required placeholder="admin">
</div>
<div class="form-group">
<label for="ssh-target-password">密码:</label>
<input type="password" id="ssh-target-password" required>
</div>
<button type="submit" class="btn btn-primary">连接</button>
</form>
</div>
</div>
<!-- 添加设备模态框 -->
<div id="modal" class="modal">
<div class="modal-content">
@@ -107,6 +152,35 @@
</div>
</div>
<!-- 新建拓扑模态框 -->
<div id="modal-new-topology" class="modal">
<div class="modal-content">
<span class="close-new-topology">&times;</span>
<h2>新建拓扑</h2>
<form id="new-topology-form">
<div class="form-group">
<label for="topo-name">拓扑名称:</label>
<input type="text" id="topo-name" required placeholder="例: 北京办公网络">
</div>
<button type="submit" class="btn btn-primary" style="width:100%">创建</button>
</form>
</div>
</div>
<!-- 选择设备模态框 -->
<div id="modal-select-devices" class="modal">
<div class="modal-content select-devices-modal-content">
<span class="close-select-devices">&times;</span>
<h2>选择设备添加到拓扑</h2>
<div class="select-devices-toolbar">
<button type="button" class="btn btn-info btn-sm" onclick="toggleSelectAllDevices(this)">全选</button>
<span id="selected-count" class="selected-count">已选 0 台</span>
</div>
<div id="device-pool-list" class="device-pool-list"></div>
<button type="button" class="btn btn-primary" style="width:100%;margin-top:15px" onclick="confirmAddDevices()">添加选中设备</button>
</div>
</div>
<script src="/js/app.js"></script>
</body>
</html>