Upload 7 files

Dockerfile

@@ -0,0 +1,29 @@
+FROM python:3.9-slim
+
+# 安装nmap和其他必要的包
+RUN apt-get update && apt-get install -y \
+    nmap \
+    procps \
+    && rm -rf /var/lib/apt/lists/*
+
+# 创建工作目录
+WORKDIR /app
+
+# 复制依赖文件并安装
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# 复制应用代码
+COPY app/ ./app/
+
+# 设置环境变量
+ENV PYTHONPATH=/app
+ENV PYTHONUNBUFFERED=1
+ENV PYTHONDONTWRITEBYTECODE=1
+ENV GEVENT_SUPPORT=True
+
+# 暴露端口
+EXPOSE 5000
+
+# 启动命令，使用gevent-websocket作为WSGI服务器，支持WebSocket和多线程
+CMD ["gunicorn", "--worker-class", "geventwebsocket.gunicorn.workers.GeventWebSocketWorker", "--workers", "2", "--threads", "4", "--bind", "0.0.0.0:5000", "--timeout", "120", "app.app:app"] 

app/app.py

@@ -0,0 +1,599 @@
+from flask import Flask, render_template, request, jsonify
+import subprocess
+import json
+import re
+import os
+import time
+import threading
+import uuid
+import ipaddress
+import math
+import queue
+from werkzeug.middleware.proxy_fix import ProxyFix
+from flask_socketio import SocketIO, emit
+
+app = Flask(__name__)
+app.wsgi_app = ProxyFix(app.wsgi_app, x_for=1, x_proto=1)
+app.config['SECRET_KEY'] = os.urandom(24)
+socketio = SocketIO(app, 
+                   cors_allowed_origins="*", 
+                   async_mode='gevent',
+                   logger=True, 
+                   engineio_logger=True,
+                   ping_timeout=60,
+                   ping_interval=25,
+                   always_connect=True)
+
+# 存储活动扫描任务
+active_scans = {}
+
+# 默认并行任务数
+DEFAULT_PARALLEL_TASKS = 8
+MIN_PARALLEL_TASKS = 4
+MAX_PARALLEL_TASKS = 16
+
+# 安全考虑：限制允许扫描的端口范围和常见选项
+ALLOWED_OPTIONS = {
+    # 扫描类型
+    "-sS": "SYN扫描",
+    "-sT": "TCP连接扫描",
+    "-sU": "UDP扫描",
+    "-sV": "服务版本检测",
+    "-O": "操作系统检测",
+    "-A": "综合扫描",
+    
+    # 扫描速度
+    "-T0": "偷偷摸摸扫描",
+    "-T1": "鬼鬼祟祟扫描",
+    "-T2": "礼貌扫描",
+    "-T3": "普通扫描",
+    "-T4": "激进扫描"
+}
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+def is_valid_target(target):
+    pattern = r'^[a-zA-Z0-9][a-zA-Z0-9\.\-\/]+$'
+    return bool(re.match(pattern, target))
+
+def is_valid_ports(ports):
+    if not ports:
+        return True
+    
+    if ports == "all" or ports == "-":
+        return True
+    
+    pattern = r'^(?:\d+(?:-\d+)?(?:,\d+(?:-\d+)?)*)?$'
+    return bool(re.match(pattern, ports))
+
+def split_ip_range(target, num_chunks):
+    try:
+        if '/' in target:
+            network = ipaddress.ip_network(target, strict=False)
+            total_ips = network.num_addresses
+            if total_ips < num_chunks:
+                num_chunks = max(1, total_ips)
+            ips_per_chunk = math.ceil(total_ips / num_chunks)
+            
+            chunks = []
+            start_ip = int(network.network_address)
+            for i in range(num_chunks):
+                chunk_start = start_ip + i * ips_per_chunk
+                chunk_end = min(start_ip + (i + 1) * ips_per_chunk - 1, int(network.broadcast_address))
+                
+                if chunk_start <= chunk_end:
+                    start_ip_obj = ipaddress.ip_address(chunk_start)
+                    end_ip_obj = ipaddress.ip_address(chunk_end)
+                    
+                    if chunk_start == chunk_end:
+                        chunks.append(str(start_ip_obj))
+                    else:
+                        chunks.append(f"{start_ip_obj}-{end_ip_obj}")
+            
+            return chunks
+        
+        elif '-' in target:
+            start_ip, end_ip = target.split('-')
+            start_ip = ipaddress.ip_address(start_ip.strip())
+            end_ip = ipaddress.ip_address(end_ip.strip())
+            
+            total_ips = int(end_ip) - int(start_ip) + 1
+            if total_ips < num_chunks:
+                num_chunks = max(1, total_ips)
+                
+            ips_per_chunk = math.ceil(total_ips / num_chunks)
+            
+            chunks = []
+            for i in range(num_chunks):
+                chunk_start = int(start_ip) + i * ips_per_chunk
+                chunk_end = min(int(start_ip) + (i + 1) * ips_per_chunk - 1, int(end_ip))
+                
+                if chunk_start <= chunk_end:
+                    start_ip_obj = ipaddress.ip_address(chunk_start)
+                    end_ip_obj = ipaddress.ip_address(chunk_end)
+                    
+                    if chunk_start == chunk_end:
+                        chunks.append(str(start_ip_obj))
+                    else:
+                        chunks.append(f"{start_ip_obj}-{end_ip_obj}")
+            
+            return chunks
+    except:
+        pass
+    
+    return [target]
+
+def split_port_range(ports, num_chunks):
+    if not ports or ports == "all" or ports == "-":
+        total_ports = 65535
+        ports_per_chunk = math.ceil(total_ports / num_chunks)
+        
+        chunks = []
+        for i in range(num_chunks):
+            start_port = i * ports_per_chunk + 1
+            end_port = min((i + 1) * ports_per_chunk, 65535)
+            chunks.append(f"{start_port}-{end_port}")
+        
+        return chunks
+    
+    port_list = []
+    for port_range in ports.split(','):
+        if '-' in port_range:
+            start, end = map(int, port_range.split('-'))
+            port_list.extend(range(start, end + 1))
+        else:
+            port_list.append(int(port_range))
+    
+    if len(port_list) < num_chunks:
+        num_chunks = max(1, len(port_list))
+    
+    chunks = []
+    ports_per_chunk = math.ceil(len(port_list) / num_chunks)
+    
+    for i in range(num_chunks):
+        start_idx = i * ports_per_chunk
+        end_idx = min((i + 1) * ports_per_chunk, len(port_list))
+        
+        if start_idx < len(port_list):
+            chunk_ports = sorted(port_list[start_idx:end_idx])
+            if not chunk_ports:
+                continue
+                
+            ranges = []
+            range_start = chunk_ports[0]
+            prev = chunk_ports[0]
+            
+            for port in chunk_ports[1:]:
+                if port == prev + 1:
+                    prev = port
+                    continue
+                
+                if range_start == prev:
+                    ranges.append(str(range_start))
+                else:
+                    ranges.append(f"{range_start}-{prev}")
+                
+                range_start = port
+                prev = port
+            
+            if range_start == prev:
+                ranges.append(str(range_start))
+            else:
+                ranges.append(f"{range_start}-{prev}")
+            
+            chunks.append(','.join(ranges))
+    
+    return chunks
+
+def execute_nmap_scan(scan_id, target, ports, options, task_id, result_queue):
+    try:
+        command = ["nmap"] + options
+        
+        if ports:
+            command.extend(["-p", ports])
+        
+        command.append(target)
+        command_str = " ".join(command)
+        
+        socketio.emit('scan_update', {
+            'scan_id': scan_id,
+            'task_id': task_id,
+            'status': 'task_running',
+            'message': f'子任务 {task_id}: 扫描 {target} 端口 {ports if ports else "默认"}...',
+            'command': command_str
+        }, room=scan_id)
+        
+        process = subprocess.Popen(
+            command,
+            stdout=subprocess.PIPE,
+            stderr=subprocess.PIPE,
+            text=True,
+            bufsize=1
+        )
+        
+        results = []
+        errors = []
+        
+        for line in iter(process.stdout.readline, ''):
+            results.append(line)
+            if len(results) % 10 == 0:
+                socketio.emit('scan_update', {
+                    'scan_id': scan_id,
+                    'task_id': task_id,
+                    'status': 'task_progress',
+                    'partial_result': line
+                }, room=scan_id)
+        
+        for line in iter(process.stderr.readline, ''):
+            errors.append(line)
+        
+        process.wait()
+        
+        result_data = {
+            'task_id': task_id,
+            'target': target,
+            'ports': ports,
+            'command': command_str,
+            'success': process.returncode == 0,
+            'result': ''.join(results),
+            'error': ''.join(errors)
+        }
+        
+        result_queue.put(result_data)
+        
+        socketio.emit('scan_update', {
+            'scan_id': scan_id,
+            'task_id': task_id,
+            'status': 'task_completed',
+            'message': f'子任务 {task_id} 已完成'
+        }, room=scan_id)
+        
+    except Exception as e:
+        error_msg = str(e)
+        socketio.emit('scan_update', {
+            'scan_id': scan_id,
+            'task_id': task_id,
+            'status': 'task_error',
+            'message': f'子任务 {task_id} 出错: {error_msg}'
+        }, room=scan_id)
+        
+        result_queue.put({
+            'task_id': task_id,
+            'target': target,
+            'ports': ports,
+            'success': False,
+            'error': error_msg
+        })
+
+def run_nmap_scan(scan_id, target, ports, selected_options, scan_all_ports, parallel_tasks):
+    try:
+        num_threads = min(parallel_tasks, MAX_PARALLEL_TASKS)
+        
+        options = list(selected_options)
+        
+        if scan_all_ports:
+            ports = "-"
+        
+        socketio.emit('scan_update', {
+            'scan_id': scan_id,
+            'status': 'starting',
+            'message': f'正在使用 {num_threads} 个线程开始扫描...',
+            'threads': num_threads
+        }, room=scan_id)
+        
+        targets = split_ip_range(target, num_threads)
+        
+        if len(targets) == 1:
+            port_chunks = split_port_range(ports, num_threads)
+            tasks = [(targets[0], port) for port in port_chunks]
+        else:
+            tasks = [(t, ports) for t in targets]
+        
+        result_queue = queue.Queue()
+        
+        threads = []
+        
+        active_scans[scan_id]['total_tasks'] = len(tasks)
+        active_scans[scan_id]['completed_tasks'] = 0
+        active_scans[scan_id]['tasks'] = {}
+        
+        task_info = []
+        for i, (task_target, task_ports) in enumerate(tasks):
+            task_id = f"task_{i+1}"
+            task_info.append({
+                'task_id': task_id,
+                'target': task_target,
+                'ports': task_ports if task_ports else '默认端口'
+            })
+            
+            active_scans[scan_id]['tasks'][task_id] = {
+                'status': 'pending',
+                'target': task_target,
+                'ports': task_ports
+            }
+        
+        socketio.emit('scan_update', {
+            'scan_id': scan_id,
+            'status': 'tasks_created',
+            'message': f'已创建 {len(tasks)} 个扫描子任务',
+            'tasks': task_info
+        }, room=scan_id)
+        
+        for i, (task_target, task_ports) in enumerate(tasks):
+            task_id = f"task_{i+1}"
+            thread = threading.Thread(
+                target=execute_nmap_scan, 
+                args=(scan_id, task_target, task_ports, options, task_id, result_queue)
+            )
+            thread.daemon = True
+            threads.append(thread)
+        
+        for thread in threads:
+            thread.start()
+            time.sleep(0.2)
+        
+        for thread in threads:
+            thread.join()
+        
+        all_results = []
+        all_errors = []
+        
+        while not result_queue.empty():
+            result = result_queue.get()
+            
+            if result.get('success', False):
+                all_results.append({
+                    'target': result.get('target', ''),
+                    'ports': result.get('ports', ''),
+                    'result': result.get('result', '')
+                })
+            else:
+                all_errors.append(result.get('error', ''))
+        
+        if all_errors:
+            socketio.emit('scan_update', {
+                'scan_id': scan_id,
+                'status': 'error',
+                'message': '扫描过程中出现错误',
+                'error': '\n'.join(all_errors)
+            }, room=scan_id)
+        else:
+            combined_result = merge_scan_results(all_results)
+            
+            socketio.emit('scan_update', {
+                'scan_id': scan_id,
+                'status': 'completed',
+                'message': '扫描完成',
+                'result': combined_result
+            }, room=scan_id)
+            
+    except Exception as e:
+        socketio.emit('scan_update', {
+            'scan_id': scan_id,
+            'status': 'error',
+            'message': f'扫描过程中出错: {str(e)}'
+        }, room=scan_id)
+    
+    if scan_id in active_scans:
+        del active_scans[scan_id]
+
+def merge_scan_results(results):
+    if not results:
+        return ""
+    
+    if len(results) == 1:
+        return results[0]['result']
+    
+    open_ports = {}
+    scan_headers = {}
+    scan_footers = {}
+    
+    header_pattern = re.compile(r'Starting Nmap.*?(?=PORT)', re.DOTALL)
+    ports_pattern = re.compile(r'PORT\s+STATE\s+SERVICE.*?(?=\n\n|\nNmap done:)', re.DOTALL)
+    footer_pattern = re.compile(r'Nmap done:.*$', re.DOTALL)
+    port_line_pattern = re.compile(r'^(\d+/\w+)\s+(\w+)\s+(.*)$', re.MULTILINE)
+    
+    for result_data in results:
+        result_text = result_data['result']
+        target = result_data['target']
+        
+        header_match = header_pattern.search(result_text)
+        if header_match:
+            header = header_match.group(0).strip()
+            scan_headers[target] = header
+        
+        ports_match = ports_pattern.search(result_text)
+        if ports_match:
+            ports_section = ports_match.group(0)
+            port_lines = ports_section.split('\n')[1:]
+            
+            for line in port_lines:
+                port_match = port_line_pattern.match(line.strip())
+                if port_match:
+                    port, state, service = port_match.groups()
+                    if target not in open_ports:
+                        open_ports[target] = {}
+                    open_ports[target][port] = {'state': state, 'service': service}
+        
+        footer_match = footer_pattern.search(result_text)
+        if footer_match:
+            footer = footer_match.group(0).strip()
+            scan_footers[target] = footer
+    
+    combined_output = []
+    
+    if scan_headers:
+        main_header = next(iter(scan_headers.values()))
+        combined_output.append(main_header)
+        combined_output.append("\nPORT\tSTATE\tSERVICE")
+    
+    for target, ports in open_ports.items():
+        if len(open_ports) > 1:
+            combined_output.append(f"\n目标: {target}")
+        
+        for port, info in sorted(ports.items(), key=lambda x: int(x[0].split('/')[0])):
+            combined_output.append(f"{port}\t{info['state']}\t{info['service']}")
+    
+    if scan_footers:
+        total_time = 0
+        total_hosts = 0
+        for footer in scan_footers.values():
+            time_match = re.search(r'scanned in ([\d\.]+) seconds', footer)
+            if time_match:
+                total_time += float(time_match.group(1))
+            
+            hosts_match = re.search(r'(\d+) IP address', footer)
+            if hosts_match:
+                total_hosts += int(hosts_match.group(1))
+        
+        combined_output.append(f"\nNmap 多线程扫描完成: 总共扫描 {total_hosts} 个IP地址，用时 {total_time:.2f} 秒")
+    
+    return "\n".join(combined_output)
+
+@socketio.on('connect')
+def handle_connect():
+    print(f"客户端已连接: {request.sid}, 传输方式: {request.environ.get('wsgi.websocket') and 'WebSocket' or '轮询'}")
+    emit('connection_response', {
+        'status': 'connected',
+        'transport': request.environ.get('wsgi.websocket') and 'websocket' or 'polling',
+        'sid': request.sid
+    })
+
+@socketio.on('join_scan')
+def handle_join(data):
+    scan_id = data['scan_id']
+    if scan_id:
+        print(f"Client joined scan room: {scan_id}")
+        socketio.server.enter_room(request.sid, scan_id)
+
+@socketio.on('start_scan')
+def handle_scan_request(data):
+    if not data:
+        emit('scan_update', {'status': 'error', 'message': '没有提供数据'})
+        return
+    
+    target = data.get('target', '')
+    ports = data.get('ports', '')
+    selected_options = data.get('options', [])
+    scan_all_ports = data.get('scan_all_ports', False)
+    parallel_tasks = data.get('parallel_tasks', DEFAULT_PARALLEL_TASKS)
+    
+    try:
+        parallel_tasks = int(parallel_tasks)
+        parallel_tasks = max(MIN_PARALLEL_TASKS, min(parallel_tasks, MAX_PARALLEL_TASKS))
+    except:
+        parallel_tasks = DEFAULT_PARALLEL_TASKS
+    
+    if not target or not is_valid_target(target):
+        emit('scan_update', {'status': 'error', 'message': '无效的目标格式'})
+        return
+    
+    if not is_valid_ports(ports):
+        emit('scan_update', {'status': 'error', 'message': '无效的端口格式'})
+        return
+    
+    valid_options = []
+    for option in selected_options:
+        if option in ALLOWED_OPTIONS:
+            valid_options.append(option)
+        else:
+            emit('scan_update', {'status': 'error', 'message': f'不允许的选项: {option}'})
+            return
+    
+    scan_id = str(uuid.uuid4())
+    
+    socketio.server.enter_room(request.sid, scan_id)
+    
+    scan_thread = threading.Thread(
+        target=run_nmap_scan,
+        args=(scan_id, target, ports, valid_options, scan_all_ports, parallel_tasks)
+    )
+    scan_thread.daemon = True
+    
+    active_scans[scan_id] = {
+        'thread': scan_thread,
+        'start_time': time.time(),
+        'target': target,
+        'parallel_tasks': parallel_tasks
+    }
+    
+    scan_thread.start()
+    
+    emit('scan_started', {
+        'scan_id': scan_id,
+        'parallel_tasks': parallel_tasks
+    })
+
+@socketio.on('cancel_scan')
+def handle_cancel_scan(data):
+    scan_id = data.get('scan_id')
+    if scan_id in active_scans:
+        active_scans[scan_id]['cancelled'] = True
+        emit('scan_update', {
+            'scan_id': scan_id,
+            'status': 'cancelled',
+            'message': '扫描已取消'
+        }, room=scan_id)
+
+@app.route('/scan', methods=['POST'])
+def scan():
+    data = request.get_json()
+    
+    if not data:
+        return jsonify({"error": "没有提供数据"}), 400
+    
+    target = data.get('target', '')
+    ports = data.get('ports', '')
+    selected_options = data.get('options', [])
+    scan_all_ports = data.get('scan_all_ports', False)
+    
+    if not target or not is_valid_target(target):
+        return jsonify({"error": "无效的目标格式"}), 400
+    
+    if not is_valid_ports(ports):
+        return jsonify({"error": "无效的端口格式"}), 400
+    
+    for option in selected_options:
+        if option not in ALLOWED_OPTIONS:
+            return jsonify({"error": f"不允许的选项: {option}"}), 400
+    
+    command = ["nmap"]
+    
+    for option in selected_options:
+        command.append(option)
+    
+    if scan_all_ports:
+        command.extend(["-p-"])
+    elif ports:
+        command.extend(["-p", ports])
+    
+    command.append(target)
+    
+    try:
+        process = subprocess.run(
+            command,
+            capture_output=True,
+            text=True,
+            timeout=600
+        )
+        
+        if process.returncode != 0:
+            return jsonify({
+                "error": "扫描失败",
+                "message": process.stderr
+            }), 500
+        
+        return jsonify({
+            "result": process.stdout,
+            "command": " ".join(command)
+        })
+        
+    except subprocess.TimeoutExpired:
+        return jsonify({"error": "扫描超时"}), 408
+    except Exception as e:
+        return jsonify({"error": f"扫描过程中出错: {str(e)}"}), 500
+
+if __name__ == '__main__':
+    socketio.run(app, host='0.0.0.0', port=5000, debug=False, allow_unsafe_werkzeug=True) 

app/static/css/style.css

@@ -0,0 +1,1294 @@
+:root {
+    --primary-color: #2563eb;
+    --primary-dark: #1d4ed8;
+    --secondary-color: #3b82f6;
+    --accent-color: #ef4444;
+    --dark-bg: #1e293b;
+    --light-bg: #f1f5f9;
+    --card-bg: #ffffff;
+    --text-primary: #1e293b;
+    --text-secondary: #64748b;
+    --text-light: #f8fafc;
+    --border-color: #e2e8f0;
+    --success-color: #22c55e;
+    --warning-color: #f59e0b;
+    --error-color: #ef4444;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    color: var(--text-primary);
+    background-color: var(--light-bg);
+    background-image: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
+    min-height: 100vh;
+}
+
+.main-wrapper {
+    min-height: 100vh;
+    padding: 2rem 1rem;
+}
+
+.container {
+    max-width: 1100px;
+    margin: 0 auto;
+}
+
+/* 卡片样式 */
+.card {
+    background-color: var(--card-bg);
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    margin-bottom: 2rem;
+    overflow: hidden;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
+}
+
+.card-header {
+    padding: 1.25rem 1.5rem;
+    background-color: var(--primary-color);
+    color: var(--text-light);
+    font-weight: 600;
+    font-size: 1.25rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.card-body {
+    padding: 1.5rem;
+}
+
+/* 头部样式 */
+header {
+    text-align: center;
+    margin-bottom: 2.5rem;
+}
+
+.logo-area {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1rem;
+    gap: 1rem;
+}
+
+.logo-icon {
+    font-size: 2.5rem;
+    color: var(--primary-color);
+    background-color: var(--card-bg);
+    width: 5rem;
+    height: 5rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+header h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--primary-color);
+    margin: 0;
+    letter-spacing: -0.5px;
+}
+
+.subtitle {
+    font-size: 1.25rem;
+    color: var(--text-secondary);
+    margin-top: 0.5rem;
+}
+
+/* 表单样式 */
+.form-group {
+    margin-bottom: 1.75rem;
+}
+
+.form-group label {
+    display: block;
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.form-group label i {
+    color: var(--primary-color);
+}
+
+.input-wrapper {
+    position: relative;
+}
+
+input[type="text"] {
+    width: 100%;
+    padding: 0.875rem 1rem;
+    font-size: 1rem;
+    border: 2px solid var(--border-color);
+    border-radius: 8px;
+    background-color: var(--card-bg);
+    transition: all 0.2s ease;
+    color: var(--text-primary);
+}
+
+input[type="text"]:focus {
+    border-color: var(--secondary-color);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+    outline: none;
+}
+
+input[type="text"]::placeholder {
+    color: var(--text-secondary);
+    opacity: 0.7;
+}
+
+.input-hint {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    margin-top: 0.5rem;
+}
+
+/* 端口选项 */
+.port-option {
+    margin-top: 1rem;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    padding: 1rem;
+    background-color: rgba(239, 68, 68, 0.07);
+    border-radius: 8px;
+    border-left: 3px solid var(--accent-color);
+}
+
+.port-option input[type="checkbox"] {
+    width: 1.25rem;
+    height: 1.25rem;
+    cursor: pointer;
+    accent-color: var(--accent-color);
+}
+
+.port-option label {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0;
+    font-weight: 500;
+    color: var(--accent-color);
+    font-size: 1rem;
+    gap: 0.5rem;
+}
+
+.option-hint {
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    margin-top: 0.5rem;
+    margin-left: 1.75rem;
+    width: 100%;
+}
+
+/* 扫描选项样式 */
+.options-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5rem;
+    padding: 0.5rem;
+    background-color: #f8fafc;
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+}
+
+.speed-options {
+    grid-template-columns: repeat(5, 1fr);
+}
+
+.option-item {
+    position: relative;
+    padding: 0.5rem;
+    border-radius: 6px;
+    background-color: white;
+    border: 1px solid var(--border-color);
+    transition: all 0.2s ease;
+}
+
+.option-item:hover {
+    border-color: var(--primary-color);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.option-item.option-selected,
+.option-item input[type="radio"]:checked + label {
+    background-color: #e6f0ff;
+    border-color: #3b82f6;
+}
+
+.option-item input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.option-item input[type="radio"] + label {
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    width: 100%;
+    padding-left: 1.25rem;
+    position: relative;
+    border-radius: 5px;
+    transition: background-color 0.2s ease;
+}
+
+.option-item input[type="radio"] + label::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0.25rem;
+    width: 14px;
+    height: 14px;
+    border: 2px solid #cbd5e1;
+    border-radius: 50%;
+    background-color: white;
+    transition: all 0.2s ease;
+}
+
+.option-item input[type="radio"]:checked + label::before {
+    border-color: var(--primary-color);
+    background-color: var(--primary-color);
+    box-shadow: inset 0 0 0 2px white;
+}
+
+.option-item input[type="radio"]:checked + label .option-code,
+.option-item input[type="radio"]:checked + label .option-desc {
+    color: var(--primary-color);
+    font-weight: 600;
+}
+
+.option-code {
+    font-family: 'Courier New', monospace;
+    font-weight: bold;
+    color: var(--primary-color);
+    margin-bottom: 0.15rem;
+    font-size: 0.9rem;
+    text-align: center;
+}
+
+.option-desc {
+    font-weight: 500;
+    color: var(--text-primary);
+    margin-bottom: 0.15rem;
+    font-size: 0.9rem;
+    text-align: center;
+}
+
+.option-detail {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    line-height: 1.3;
+    text-align: center;
+}
+
+.option-item input[type="radio"]:checked + label .option-desc {
+    color: var(--primary-color);
+}
+
+.option-ripple {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    width: 100%;
+    height: 100%;
+    background-color: rgba(59, 130, 246, 0.1);
+    border-radius: 6px;
+    animation: ripple 0.5s ease-out forwards;
+}
+
+@keyframes ripple {
+    to {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 0;
+    }
+}
+
+/* 按钮样式 */
+.form-actions {
+    display: flex;
+    gap: 1rem;
+    margin-top: 2rem;
+}
+
+.btn {
+    padding: 0.875rem 1.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    transition: all 0.2s ease;
+    border: none;
+}
+
+.primary-btn {
+    background-color: var(--primary-color);
+    color: white;
+    min-width: 160px;
+}
+
+.primary-btn:hover {
+    background-color: var(--primary-dark);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+}
+
+.primary-btn:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+}
+
+.secondary-btn {
+    background-color: #f1f5f9;
+    color: var(--text-secondary);
+    border: 1px solid var(--border-color);
+}
+
+.secondary-btn:hover {
+    background-color: #e2e8f0;
+}
+
+/* 结果区域 */
+.results-container {
+    margin-top: 2rem;
+}
+
+/* 加载动画 */
+.loading {
+    text-align: center;
+    padding: 2.5rem;
+    background-color: white;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+.spinner-container {
+    margin-bottom: 1.5rem;
+}
+
+.spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    border-top: 4px solid var(--primary-color);
+    width: 50px;
+    height: 50px;
+    animation: spin 1s linear infinite;
+    margin: 0 auto;
+}
+
+.loading h3 {
+    color: var(--primary-color);
+    margin-bottom: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+}
+
+.scan-warning {
+    color: var(--accent-color);
+    font-weight: 500;
+    margin-top: 1rem;
+    padding: 0.75rem 1rem;
+    background-color: rgba(239, 68, 68, 0.07);
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* 结果显示 */
+.results-card {
+    overflow: hidden;
+}
+
+.command-used {
+    background-color: var(--light-bg);
+    padding: 1rem 1.25rem;
+    border-radius: 8px;
+    margin-bottom: 1.5rem;
+    font-family: 'Courier New', monospace;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.command-label {
+    font-weight: 600;
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.command-used code {
+    padding: 0.5rem 0.75rem;
+    background-color: var(--dark-bg);
+    color: #10b981;
+    border-radius: 4px;
+    font-family: 'Courier New', monospace;
+    overflow-x: auto;
+    white-space: nowrap;
+}
+
+.results-content {
+    margin-top: 1rem;
+}
+
+pre {
+    background-color: var(--dark-bg);
+    color: var(--text-light);
+    padding: 1.5rem;
+    border-radius: 8px;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 0.9rem;
+    line-height: 1.5;
+    max-height: 500px;
+    overflow-y: auto;
+}
+
+/* 错误显示 */
+.error-card .card-header {
+    background-color: var(--error-color);
+}
+
+#errorMessage {
+    background-color: rgba(239, 68, 68, 0.07);
+    border-left: 4px solid var(--error-color);
+    padding: 1rem 1.25rem;
+    border-radius: 4px;
+    font-weight: 500;
+}
+
+/* 底部 */
+footer {
+    text-align: center;
+    padding: 1.5rem 0;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+.footer-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.footer-content i {
+    color: var(--primary-color);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .main-wrapper {
+        padding: 1rem;
+    }
+    
+    .form-actions {
+        flex-direction: column;
+    }
+    
+    .options-container {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .speed-options {
+        grid-template-columns: repeat(3, 1fr);
+    }
+    
+    header h1 {
+        font-size: 2rem;
+    }
+    
+    .subtitle {
+        font-size: 1rem;
+    }
+    
+    .btn {
+        width: 100%;
+    }
+}
+
+@media (max-width: 480px) {
+    .options-container {
+        grid-template-columns: 1fr;
+    }
+    
+    .speed-options {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .port-option {
+        padding: 0.75rem;
+    }
+    
+    .option-hint {
+        margin-left: 0;
+    }
+    
+    .card-header {
+        padding: 1rem;
+    }
+    
+    .card-body {
+        padding: 1rem;
+    }
+    
+    pre {
+        padding: 1rem;
+        font-size: 0.8rem;
+    }
+}
+
+/* 输入验证样式 */
+.input-error {
+    border-color: var(--error-color) !important;
+    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
+}
+
+.was-validated .input-wrapper::after {
+    content: '✓';
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--success-color);
+    font-weight: bold;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.was-validated input:valid ~ .input-wrapper::after {
+    opacity: 1;
+}
+
+.disabled {
+    opacity: 0.6;
+}
+
+/* 选项选中样式 */
+.option-selected {
+    background-color: rgba(37, 99, 235, 0.08);
+    border-left: 3px solid var(--primary-color);
+}
+
+.option-ripple {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background-color: rgba(37, 99, 235, 0.3);
+    border-radius: 50%;
+    transform: scale(0);
+    animation: ripple 0.5s linear;
+    left: 10px;
+    top: 15px;
+}
+
+@keyframes ripple {
+    to {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
+
+/* 按钮动画 */
+.btn-spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    border-top-color: white;
+    animation: spin 0.8s linear infinite;
+    margin-right: 8px;
+}
+
+.btn-active {
+    transform: scale(0.95);
+}
+
+/* 结果高亮 */
+.hl-port {
+    font-weight: 600;
+    color: #8b5cf6;
+}
+
+.hl-status-open {
+    color: var(--success-color);
+    font-weight: 600;
+}
+
+.hl-status-closed {
+    color: var(--error-color);
+}
+
+.hl-status-filtered {
+    color: var(--warning-color);
+}
+
+.hl-ip {
+    font-weight: 600;
+    color: #ec4899;
+}
+
+.hl-service-label {
+    font-weight: 600;
+    color: #f59e0b;
+}
+
+.hl-service {
+    color: #10b981;
+}
+
+/* 动画和过渡效果 */
+.results-card, 
+.error-card, 
+.loading {
+    transition: opacity 0.3s ease;
+}
+
+/* 滚动条美化 */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f5f9;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #94a3b8;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #64748b;
+}
+
+/* 进度条样式 */
+.progress-container {
+    margin: 1.5rem 0;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 12px;
+    background-color: #e2e8f0;
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    width: 0%;
+    background-color: var(--primary-color);
+    background-image: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+    transition: width 0.3s ease;
+    border-radius: 6px;
+}
+
+.progress-text {
+    margin-top: 0.5rem;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    text-align: center;
+}
+
+/* 实时输出区域 */
+.live-output {
+    margin-top: 1.5rem;
+    background-color: var(--dark-bg);
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.live-output h4 {
+    background-color: rgba(0, 0, 0, 0.3);
+    color: var(--text-light);
+    padding: 0.75rem 1rem;
+    margin: 0;
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+.live-output-content {
+    padding: 1rem;
+    margin: 0;
+    height: 150px;
+    overflow-y: auto;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 0.85rem;
+    line-height: 1.5;
+    color: #a3e635;
+    background-color: transparent;
+}
+
+/* 取消扫描按钮 */
+.cancel-btn {
+    background-color: var(--error-color);
+    color: white;
+    margin-top: 1rem;
+}
+
+.cancel-btn:hover {
+    background-color: #dc2626;
+}
+
+/* 全屏模式下的样式调整 */
+.fullscreen-mode .live-output-content {
+    height: 300px;
+}
+
+/* 消息提示 */
+.info-toast {
+    position: fixed;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%) translateY(100px);
+    background-color: var(--dark-bg);
+    color: var(--text-light);
+    padding: 12px 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 1000;
+    opacity: 0;
+    transition: transform 0.4s ease, opacity 0.4s ease;
+    max-width: 80%;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.info-toast.show {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+}
+
+.info-toast i {
+    color: var(--secondary-color);
+}
+
+/* WebSocket连接状态指示器 */
+.socket-status {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: #ef4444;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    transition: all 0.3s ease;
+}
+
+.socket-status.connected {
+    background-color: #10b981;
+    animation: pulse-green 2s infinite;
+}
+
+.socket-status.secure {
+    background-color: #3b82f6;
+    animation: pulse-blue 2s infinite;
+}
+
+.socket-status:hover::after {
+    content: attr(title);
+    position: absolute;
+    right: 20px;
+    top: -5px;
+    background-color: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 5px 10px;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+}
+
+@keyframes pulse-green {
+    0% {
+        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
+    }
+    70% {
+        box-shadow: 0 0 0 5px rgba(16, 185, 129, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+    }
+}
+
+@keyframes pulse-blue {
+    0% {
+        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
+    }
+    70% {
+        box-shadow: 0 0 0 5px rgba(59, 130, 246, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+    }
+}
+
+/* socket.io 必要引入 */
+#app-template-section {
+    display: none;
+}
+
+/* 线程选择样式 */
+.threads-container {
+    padding: 1rem;
+    background-color: #f8fafc;
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+}
+
+.threads-slider-container {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 0.75rem;
+}
+
+input[type="range"] {
+    flex-grow: 1;
+    height: 6px;
+    appearance: none;
+    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
+    outline: none;
+    border-radius: 3px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    background: #fff;
+    border: 2px solid var(--primary-color);
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+}
+
+input[type="range"]::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    background: #fff;
+    border: 2px solid var(--primary-color);
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+}
+
+.threads-display {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 100px;
+}
+
+.threads-display input[type="number"] {
+    width: 50px;
+    padding: 0.5rem;
+    text-align: center;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+}
+
+.threads-display span {
+    color: var(--text-secondary);
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    opacity: 1;
+}
+
+.threads-modes {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1rem;
+}
+
+.thread-mode {
+    text-align: center;
+    cursor: pointer;
+    padding: 0.75rem 0.5rem;
+    border-radius: 6px;
+    transition: all 0.2s ease;
+    flex: 1;
+    margin: 0 0.25rem;
+}
+
+.thread-mode:hover {
+    background-color: rgba(37, 99, 235, 0.08);
+}
+
+.thread-mode.active {
+    background-color: rgba(37, 99, 235, 0.12);
+}
+
+.mode-icon {
+    font-size: 1.25rem;
+    margin-bottom: 0.3rem;
+    color: var(--primary-color);
+}
+
+.mode-label {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+}
+
+.threads-hint {
+    margin: 0.75rem 0;
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+/* 任务状态显示 */
+.thread-count-display {
+    font-size: 1rem;
+    color: var(--primary-color);
+    margin: 0.5rem 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.tasks-overview {
+    margin-top: 1.5rem;
+    background-color: white;
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+    overflow: hidden;
+}
+
+.tasks-overview h4 {
+    background-color: #f1f5f9;
+    padding: 0.75rem 1rem;
+    margin: 0;
+    font-size: 0.95rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.tasks-grid {
+    padding: 1rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 0.75rem;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.task-item {
+    padding: 0.75rem;
+    background-color: #f8fafc;
+    border-radius: 6px;
+    border-left: 3px solid var(--primary-color);
+    font-size: 0.85rem;
+    position: relative;
+}
+
+.task-item .task-id {
+    font-weight: 600;
+    margin-bottom: 0.3rem;
+    color: var(--primary-color);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.task-item .task-target,
+.task-item .task-ports {
+    margin: 0.2rem 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--text-secondary);
+    font-family: 'Courier New', monospace;
+}
+
+.task-status {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+
+.task-status.pending {
+    background-color: #94a3b8;
+}
+
+.task-status.running {
+    background-color: #3b82f6;
+    animation: pulse 1.5s infinite;
+}
+
+.task-status.completed {
+    background-color: #10b981;
+}
+
+.task-status.error {
+    background-color: #ef4444;
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(0.95);
+        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
+    }
+    
+    70% {
+        transform: scale(1);
+        box-shadow: 0 0 0 5px rgba(59, 130, 246, 0);
+    }
+    
+    100% {
+        transform: scale(0.95);
+        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+    }
+}
+
+/* 增强进度条样式 */
+.progress-container {
+    margin: 1.5rem 0;
+}
+
+.progress-bar {
+    position: relative;
+    width: 100%;
+    height: 12px;
+    background-color: #e2e8f0;
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    width: 0%;
+    background-image: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+    transition: width 0.3s ease;
+    border-radius: 6px;
+    position: relative;
+}
+
+.progress-fill::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: linear-gradient(
+        -45deg,
+        rgba(255, 255, 255, 0.2) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.2) 50%,
+        rgba(255, 255, 255, 0.2) 75%,
+        transparent 75%,
+        transparent
+    );
+    background-size: 50px 50px;
+    animation: move 2s linear infinite;
+}
+
+@keyframes move {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 50px 50px;
+    }
+}
+
+.progress-text {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0.5rem;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+}
+
+.progress-text .completed-tasks {
+    font-weight: 500;
+    color: var(--primary-color);
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+    .threads-slider-container {
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+    
+    .threads-display {
+        width: 100%;
+        justify-content: center;
+    }
+    
+    .threads-modes {
+        flex-wrap: wrap;
+    }
+    
+    .thread-mode {
+        flex: 0 0 calc(50% - 0.5rem);
+        margin-bottom: 0.5rem;
+    }
+    
+    .tasks-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* 扫描结果高亮样式 */
+.results-content pre {
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+
+.hl-header {
+    color: #3b82f6;
+    font-weight: bold;
+    display: block;
+    margin-bottom: 8px;
+    padding-bottom: 4px;
+    border-bottom: 1px solid rgba(59, 130, 246, 0.3);
+}
+
+.hl-table-header {
+    color: #6b7280;
+    font-weight: bold;
+    display: block;
+    margin: 8px 0;
+    padding: 4px 0;
+    background-color: rgba(243, 244, 246, 0.5);
+}
+
+.hl-target {
+    color: #8b5cf6;
+    font-weight: bold;
+    display: block;
+    margin-top: 12px;
+    margin-bottom: 4px;
+    padding: 4px 0;
+    border-top: 1px dashed rgba(139, 92, 246, 0.3);
+}
+
+.hl-port {
+    color: #2563eb;
+    font-weight: bold;
+    display: inline-block;
+    min-width: 90px;
+}
+
+.hl-state-open {
+    color: #10b981;
+    font-weight: bold;
+    display: inline-block;
+    min-width: 70px;
+}
+
+.hl-state-closed {
+    color: #ef4444;
+    font-weight: normal;
+    display: inline-block;
+    min-width: 70px;
+}
+
+.hl-state-filtered {
+    color: #f59e0b;
+    font-weight: normal;
+    display: inline-block;
+    min-width: 70px;
+}
+
+.hl-service {
+    color: #6b7280;
+    display: inline-block;
+}
+
+.hl-ip {
+    color: #ec4899;
+    font-weight: bold;
+}
+
+.hl-domain {
+    color: #8b5cf6;
+    font-weight: bold;
+}
+
+.hl-service-label {
+    color: #6b7280;
+    font-weight: bold;
+    margin-right: 5px;
+}
+
+.hl-service-info {
+    color: #059669;
+}
+
+.hl-summary {
+    display: block;
+    margin-top: 12px;
+    padding-top: 8px;
+    color: #3b82f6;
+    font-weight: bold;
+    border-top: 1px solid rgba(59, 130, 246, 0.3);
+}
+
+/* 表格式显示 */
+.results-content pre {
+    tab-size: 4;
+    -moz-tab-size: 4;
+} 

app/static/js/script.js

@@ -0,0 +1,757 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const scanForm = document.getElementById('scanForm');
+    const scanButton = document.getElementById('scanButton');
+    const clearButton = document.getElementById('clearButton');
+    const loading = document.getElementById('loading');
+    const results = document.getElementById('results');
+    const error = document.getElementById('error');
+    const resultsContent = document.getElementById('resultsContent');
+    const errorMessage = document.getElementById('errorMessage');
+    const scanWarning = document.getElementById('scanWarning');
+    const portsInput = document.getElementById('ports');
+    const scanAllPortsCheckbox = document.getElementById('scanAllPorts');
+    const target = document.getElementById('target');
+    const optionCheckboxes = document.querySelectorAll('input[name="options"]');
+    const tasksGrid = document.getElementById('tasksGrid');
+    const threadsInUse = document.getElementById('threadsInUse');
+    const parallelTasksSlider = document.getElementById('parallelTasksSlider');
+    const parallelTasks = document.getElementById('parallelTasks');
+    const threadModes = document.querySelectorAll('.thread-mode');
+    
+    const DEFAULT_THREADS = 8;
+    const MIN_THREADS = 4;
+    const MAX_THREADS = 16;
+    
+    const TASK_STATUS = {
+        'pending': '等待中',
+        'task_running': '扫描中',
+        'task_progress': '扫描中',
+        'task_completed': '已完成',
+        'task_error': '出错'
+    };
+    
+    let socket;
+    let currentScanId = null;
+    let reconnectAttempts = 0;
+    let isConnected = false;
+    const maxReconnectAttempts = 5;
+    
+    let activeTasks = {};
+    let totalTasks = 0;
+    let completedTasks = 0;
+    
+    const progressContainer = document.createElement('div');
+    progressContainer.className = 'progress-container';
+    progressContainer.innerHTML = `
+        <div class="progress-bar">
+            <div class="progress-fill" id="progressFill"></div>
+        </div>
+        <div class="progress-text">
+            <div>扫描进度: <span id="progressText">0%</span></div>
+            <div class="completed-tasks"><span id="completedTasksCount">0</span>/<span id="totalTasksCount">0</span> 任务</div>
+        </div>
+    `;
+    loading.insertBefore(progressContainer, document.querySelector('#tasksOverview'));
+    
+    const progressFill = document.getElementById('progressFill');
+    const progressText = document.getElementById('progressText');
+    const completedTasksCount = document.getElementById('completedTasksCount');
+    const totalTasksCount = document.getElementById('totalTasksCount');
+    
+    const liveOutputContainer = document.createElement('div');
+    liveOutputContainer.className = 'live-output';
+    liveOutputContainer.innerHTML = `
+        <h4>实时扫描输出</h4>
+        <pre id="liveOutput" class="live-output-content"></pre>
+    `;
+    loading.appendChild(liveOutputContainer);
+    
+    const liveOutput = document.getElementById('liveOutput');
+    
+    const cancelButton = document.createElement('button');
+    cancelButton.type = 'button';
+    cancelButton.id = 'cancelScanButton';
+    cancelButton.className = 'btn cancel-btn';
+    cancelButton.innerHTML = '<i class="fas fa-stop-circle"></i> 取消扫描';
+    cancelButton.style.display = 'none';
+    loading.appendChild(cancelButton);
+    
+    const formElements = document.querySelectorAll('.form-group, .form-actions');
+    formElements.forEach((element, index) => {
+        element.style.opacity = '0';
+        element.style.transform = 'translateY(20px)';
+        element.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
+        
+        setTimeout(() => {
+            element.style.opacity = '1';
+            element.style.transform = 'translateY(0)';
+        }, 100 + index * 100);
+    });
+    
+    function initThreadControl() {
+        parallelTasksSlider.addEventListener('input', function() {
+            parallelTasks.value = this.value;
+            updateThreadModeSelection(this.value);
+            threadsInUse.textContent = this.value;
+        });
+        
+        parallelTasks.addEventListener('input', function() {
+            let value = parseInt(this.value);
+            if (isNaN(value) || value < MIN_THREADS) value = MIN_THREADS;
+            if (value > MAX_THREADS) value = MAX_THREADS;
+            
+            this.value = value;
+            parallelTasksSlider.value = value;
+            updateThreadModeSelection(value);
+            threadsInUse.textContent = value;
+        });
+        
+        threadModes.forEach(mode => {
+            mode.addEventListener('click', function() {
+                const value = parseInt(this.dataset.value);
+                parallelTasksSlider.value = value;
+                parallelTasks.value = value;
+                updateThreadModeSelection(value);
+                threadsInUse.textContent = value;
+            });
+        });
+        
+        updateThreadModeSelection(DEFAULT_THREADS);
+    }
+    
+    function updateThreadModeSelection(value) {
+        threadModes.forEach(mode => {
+            if (parseInt(mode.dataset.value) === parseInt(value)) {
+                mode.classList.add('active');
+            } else {
+                mode.classList.remove('active');
+            }
+        });
+    }
+    
+    function initWebSocket() {
+        if (socket && socket.connected) {
+            return;
+        }
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        console.log(`使用WebSocket协议: ${protocol}`);
+        
+        const host = window.location.host;
+        const wsUrl = `${protocol}//${host}`;
+        console.log(`WebSocket连接URL: ${wsUrl}`);
+        
+        socket = io(wsUrl, {
+            reconnection: true,
+            reconnectionDelay: 1000,
+            reconnectionDelayMax: 5000,
+            reconnectionAttempts: maxReconnectAttempts,
+            transports: ['websocket'],
+            upgrade: false
+        });
+        
+        socket.on('connect', function() {
+            console.log('WebSocket连接已建立');
+            isConnected = true;
+            reconnectAttempts = 0;
+            
+            updateSocketStatus(true, protocol === 'wss:');
+            
+            if (currentScanId) {
+                joinScanRoom(currentScanId);
+            }
+        });
+        
+        socket.on('connection_response', function(data) {
+            console.log('连接状态:', data.status);
+            console.log('传输方式:', data.transport);
+            console.log('会话ID:', data.sid);
+            
+            const isWebSocket = data.transport === 'websocket';
+            const isSecure = window.location.protocol === 'https:';
+            
+            updateSocketStatus(true, isWebSocket && isSecure);
+            
+            showInfo(`已连接到服务器`);
+        });
+        
+        socket.on('scan_started', function(data) {
+            console.log('扫描已开始，ID:', data.scan_id, '线程数:', data.parallel_tasks);
+            currentScanId = data.scan_id;
+            threadsInUse.textContent = data.parallel_tasks;
+            
+            sessionStorage.setItem('currentScanId', currentScanId);
+        });
+        
+        socket.on('scan_update', function(data) {
+            console.log('扫描更新:', data.status, data);
+            
+            switch(data.status) {
+                case 'starting':
+                    updateProgress(5);
+                    updateLiveOutput(`正在使用 ${data.threads} 个线程开始扫描...\n`);
+                    break;
+                    
+                case 'tasks_created':
+                    activeTasks = {};
+                    totalTasks = data.tasks.length;
+                    completedTasks = 0;
+                    
+                    totalTasksCount.textContent = totalTasks;
+                    completedTasksCount.textContent = completedTasks;
+                    
+                    createTaskCards(data.tasks);
+                    updateLiveOutput(`已创建 ${totalTasks} 个扫描子任务\n`);
+                    break;
+                    
+                case 'task_running':
+                    updateTaskStatus(data.task_id, 'running');
+                    updateLiveOutput(`${data.message}\n`);
+                    break;
+                    
+                case 'task_progress':
+                    if (data.partial_result) {
+                        updateLiveOutput(data.partial_result);
+                    }
+                    increaseProgress();
+                    break;
+                    
+                case 'task_completed':
+                    updateTaskStatus(data.task_id, 'completed');
+                    completedTasks++;
+                    completedTasksCount.textContent = completedTasks;
+                    
+                    const percentComplete = Math.round((completedTasks / totalTasks) * 100);
+                    updateProgress(Math.min(percentComplete, 99));
+                    break;
+                    
+                case 'task_error':
+                    updateTaskStatus(data.task_id, 'error');
+                    updateLiveOutput(`错误: ${data.message}\n`);
+                    break;
+                    
+                case 'completed':
+                    hideLoading();
+                    showResults(data.result);
+                    resetScanButton();
+                    currentScanId = null;
+                    sessionStorage.removeItem('currentScanId');
+                    break;
+                    
+                case 'error':
+                    hideLoading();
+                    showError(data.message || data.error);
+                    resetScanButton();
+                    currentScanId = null;
+                    sessionStorage.removeItem('currentScanId');
+                    break;
+                    
+                case 'cancelled':
+                    hideLoading();
+                    showInfo('扫描已取消');
+                    resetScanButton();
+                    currentScanId = null;
+                    sessionStorage.removeItem('currentScanId');
+                    break;
+            }
+        });
+        
+        socket.on('disconnect', function() {
+            console.log('WebSocket连接已断开');
+            isConnected = false;
+            updateSocketStatus(false, false);
+            
+            if (reconnectAttempts < maxReconnectAttempts) {
+                console.log(`尝试重新连接 (${reconnectAttempts + 1}/${maxReconnectAttempts})...`);
+                reconnectAttempts++;
+            } else if (currentScanId) {
+                hideLoading();
+                showError('与服务器的连接已丢失，无法接收实时扫描更新。请检查您的网络连接并重试。');
+                resetScanButton();
+            }
+        });
+    }
+    
+    function updateSocketStatus(connected, isSecure) {
+        const statusIndicator = document.getElementById('socketStatus');
+        if (connected) {
+            statusIndicator.classList.add('connected');
+            statusIndicator.title = isSecure ? 
+                '已建立安全WebSocket连接 (WSS)' : 
+                '已建立WebSocket连接 (WS)';
+            
+            if (isSecure) {
+                statusIndicator.classList.add('secure');
+            } else {
+                statusIndicator.classList.remove('secure');
+            }
+        } else {
+            statusIndicator.classList.remove('connected', 'secure');
+            statusIndicator.title = '未连接到服务器';
+        }
+    }
+    
+    function createTaskCards(tasks) {
+        tasksGrid.innerHTML = '';
+        
+        tasks.forEach(task => {
+            const taskCard = document.createElement('div');
+            taskCard.className = 'task-item';
+            taskCard.id = `task-${task.task_id}`;
+            
+            taskCard.innerHTML = `
+                <div class="task-id">
+                    ${task.task_id}
+                    <span class="task-status pending" title="等待中"></span>
+                </div>
+                <div class="task-target" title="${task.target}">
+                    <i class="fas fa-crosshairs"></i> ${task.target}
+                </div>
+                <div class="task-ports" title="${task.ports}">
+                    <i class="fas fa-plug"></i> ${task.ports}
+                </div>
+            `;
+            
+            tasksGrid.appendChild(taskCard);
+            
+            // 记录任务状态
+            activeTasks[task.task_id] = {
+                status: 'pending',
+                element: taskCard
+            };
+        });
+    }
+    
+    // 更新任务状态
+    function updateTaskStatus(taskId, status) {
+        if (activeTasks[taskId]) {
+            activeTasks[taskId].status = status;
+            
+            const taskCard = document.getElementById(`task-${taskId}`);
+            if (taskCard) {
+                const statusElement = taskCard.querySelector('.task-status');
+                
+                // 移除所有状态类
+                statusElement.classList.remove('pending', 'running', 'completed', 'error');
+                
+                // 添加新状态类
+                statusElement.classList.add(status);
+                
+                // 更新提示文本
+                statusElement.title = TASK_STATUS[status] || status;
+            }
+        }
+    }
+    
+    // 加入扫描房间
+    function joinScanRoom(scanId) {
+        if (socket && socket.connected) {
+            socket.emit('join_scan', { scan_id: scanId });
+        }
+    }
+    
+    // 端口输入与全端口扫描选项互斥
+    scanAllPortsCheckbox.addEventListener('change', function() {
+        if (this.checked) {
+            portsInput.disabled = true;
+            portsInput.placeholder = "已选择全端口扫描";
+            portsInput.parentElement.classList.add('disabled');
+        } else {
+            portsInput.disabled = false;
+            portsInput.placeholder = "例如: 80,443 或 1-1000";
+            portsInput.parentElement.classList.remove('disabled');
+        }
+    });
+    
+    // 为选项添加动画效果
+    const scanTypeRadios = document.querySelectorAll('input[name="scan_type"]');
+    const scanSpeedRadios = document.querySelectorAll('input[name="scan_speed"]');
+    
+    function addRadioAnimations(radioButtons) {
+        // 清除所有选中样式的函数
+        function clearSelectionStyles(name) {
+            document.querySelectorAll(`input[name="${name}"]`).forEach(radio => {
+                const item = radio.closest('.option-item');
+                if (item) {
+                    item.classList.remove('option-selected');
+                }
+            });
+        }
+        
+        radioButtons.forEach(radio => {
+            radio.addEventListener('change', function() {
+                // 清除同组中所有单选按钮的选中样式
+                clearSelectionStyles(this.name);
+                
+                if (this.checked) {
+                    const optionItem = this.closest('.option-item');
+                    
+                    // 添加选中样式
+                    optionItem.classList.add('option-selected');
+                    
+                    // 添加一个简单的选中动画
+                    const ripple = document.createElement('span');
+                    ripple.classList.add('option-ripple');
+                    optionItem.appendChild(ripple);
+                    
+                    setTimeout(() => {
+                        ripple.remove();
+                    }, 500);
+                }
+            });
+            
+            // 初始化选中状态
+            if (radio.checked) {
+                radio.closest('.option-item').classList.add('option-selected');
+            }
+        });
+    }
+    
+    // 初始化单选按钮动画
+    addRadioAnimations(scanTypeRadios);
+    addRadioAnimations(scanSpeedRadios);
+    
+    // 表单验证
+    target.addEventListener('input', validateForm);
+    portsInput.addEventListener('input', validateForm);
+    scanAllPortsCheckbox.addEventListener('change', validateForm);
+    
+    function validateForm() {
+        const targetValue = target.value.trim();
+        const isValid = targetValue.length > 0;
+        
+        if (isValid) {
+            scanButton.disabled = false;
+            target.classList.remove('input-error');
+        } else {
+            scanButton.disabled = true;
+            if (targetValue === '' && target.classList.contains('was-validated')) {
+                target.classList.add('input-error');
+            }
+        }
+    }
+    
+    target.addEventListener('blur', function() {
+        this.classList.add('was-validated');
+        validateForm();
+    });
+    
+    // 表单提交处理
+    scanForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+        
+        // 检查WebSocket连接
+        if (!socket || !socket.connected) {
+            showError('未能连接到扫描服务器，请刷新页面重试');
+            return;
+        }
+        
+        // 添加表单提交动画
+        scanButton.innerHTML = '<div class="btn-spinner"></div> 扫描中...';
+        
+        // 收集表单数据
+        const targetValue = target.value.trim();
+        const ports = portsInput.value.trim();
+        const scanAllPorts = scanAllPortsCheckbox.checked;
+        const threadCount = parseInt(parallelTasks.value) || DEFAULT_THREADS;
+        
+        // 获取选中的扫描类型和速度
+        const selectedScanType = document.querySelector('input[name="scan_type"]:checked')?.value || "-sS";
+        const selectedScanSpeed = document.querySelector('input[name="scan_speed"]:checked')?.value || "-T3";
+        const selectedOptions = [selectedScanType, selectedScanSpeed];
+        
+        // 验证目标
+        if (!targetValue) {
+            showError('请输入有效的目标地址');
+            resetScanButton();
+            return;
+        }
+        
+        // 显示加载状态与取消按钮
+        showLoading(scanAllPorts);
+        cancelButton.style.display = 'inline-block';
+        
+        // 重置进度和状态
+        updateProgress(0);
+        completedTasks = 0;
+        totalTasks = 0;
+        completedTasksCount.textContent = "0";
+        totalTasksCount.textContent = "0";
+        tasksGrid.innerHTML = '';
+        liveOutput.textContent = '等待扫描开始...\n';
+        
+        // 准备请求数据
+        const requestData = {
+            target: targetValue,
+            ports: ports,
+            options: selectedOptions,
+            scan_all_ports: scanAllPorts,
+            parallel_tasks: threadCount
+        };
+        
+        // 记住最近扫描的目标 (本地存储)
+        saveRecentScan(targetValue);
+        
+        // 使用WebSocket发送扫描请求
+        socket.emit('start_scan', requestData);
+    });
+    
+    // 更新进度条
+    function updateProgress(percentage) {
+        progressFill.style.width = `${percentage}%`;
+        progressText.textContent = `${percentage}%`;
+    }
+    
+    // 缓慢增加进度，模拟扫描进展
+    function increaseProgress() {
+        if (totalTasks === 0) return; // 防止除以零
+        
+        const currentCompleted = completedTasks;
+        const taskPercentage = (currentCompleted / totalTasks) * 100;
+        
+        // 在任务完成百分��和当前进度条之间找一个中间值
+        const currentWidth = parseFloat(progressFill.style.width) || 0;
+        
+        // 如果实际完成的任务百分比大于进度条，直接更新到任务百分比
+        if (taskPercentage > currentWidth) {
+            updateProgress(Math.round(taskPercentage));
+            return;
+        }
+        
+        // 否则微微增加当前进度
+        let increment;
+        if (currentWidth < 30) {
+            increment = 0.5;
+        } else if (currentWidth < 60) {
+            increment = 0.3;
+        } else if (currentWidth < 80) {
+            increment = 0.2;
+        } else if (currentWidth < 90) {
+            increment = 0.1;
+        } else {
+            increment = 0.05;
+        }
+        
+        // 不要超过99%，留给最终完成状态
+        const newWidth = Math.min(99, currentWidth + increment);
+        updateProgress(Math.round(newWidth));
+    }
+    
+    // 更新实时输出
+    function updateLiveOutput(text) {
+        // 将新文本添加到当前内容
+        liveOutput.textContent += text;
+        
+        // 自动滚动到底部
+        liveOutput.scrollTop = liveOutput.scrollHeight;
+    }
+    
+    function resetScanButton() {
+        scanButton.innerHTML = '<i class="fas fa-play"></i> 开始扫描';
+        cancelButton.style.display = 'none';
+    }
+    
+    // 取消扫描
+    cancelButton.addEventListener('click', function() {
+        if (currentScanId && socket && socket.connected) {
+            socket.emit('cancel_scan', { scan_id: currentScanId });
+        }
+    });
+    
+    // 保存最近扫描的目标
+    function saveRecentScan(targetValue) {
+        let recentScans = JSON.parse(localStorage.getItem('recentScans') || '[]');
+        // 避免重复
+        recentScans = recentScans.filter(scan => scan !== targetValue);
+        recentScans.unshift(targetValue); // 添加到开头
+        // 最多保存5个
+        recentScans = recentScans.slice(0, 5);
+        localStorage.setItem('recentScans', JSON.stringify(recentScans));
+    }
+    
+    // 清除结果按钮
+    clearButton.addEventListener('click', function() {
+        hideResults();
+        hideError();
+        
+        // 添加清除动画效果
+        this.classList.add('btn-active');
+        setTimeout(() => {
+            this.classList.remove('btn-active');
+        }, 300);
+    });
+    
+    // 展示信息提示
+    function showInfo(message) {
+        // 创建一个临时消息提示
+        const infoToast = document.createElement('div');
+        infoToast.className = 'info-toast';
+        infoToast.innerHTML = `<i class="fas fa-info-circle"></i> ${message}`;
+        document.body.appendChild(infoToast);
+        
+        // 显示动画
+        setTimeout(() => {
+            infoToast.classList.add('show');
+        }, 10);
+        
+        // 自动消失
+        setTimeout(() => {
+            infoToast.classList.remove('show');
+            setTimeout(() => {
+                document.body.removeChild(infoToast);
+            }, 300);
+        }, 3000);
+    }
+    
+    // 展示加载状态
+    function showLoading(isAllPorts) {
+        hideResults();
+        hideError();
+        loading.style.display = 'block';
+        scanButton.disabled = true;
+        
+        // 淡入动画
+        loading.style.opacity = 0;
+        setTimeout(() => {
+            loading.style.opacity = 1;
+        }, 10);
+        
+        // 如果是全端口扫描，显示额外警告
+        if (isAllPorts) {
+            scanWarning.style.display = 'block';
+        } else {
+            scanWarning.style.display = 'none';
+        }
+    }
+    
+    // 隐藏加载状态
+    function hideLoading() {
+        loading.style.opacity = 0;
+        setTimeout(() => {
+            loading.style.display = 'none';
+        }, 300);
+        scanButton.disabled = false;
+    }
+    
+    // 展示结果
+    function showResults(resultText) {
+        results.style.display = 'block';
+        resultsContent.textContent = resultText;
+        
+        // 淡入动画
+        results.style.opacity = 0;
+        setTimeout(() => {
+            results.style.opacity = 1;
+        }, 10);
+        
+        // 为结果添加语法高亮
+        highlightScanResults();
+        
+        // 滚动到结果区域
+        results.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+    
+    // 隐藏结果
+    function hideResults() {
+        if (results.style.display !== 'none') {
+            results.style.opacity = 0;
+            setTimeout(() => {
+                results.style.display = 'none';
+            }, 300);
+        }
+    }
+    
+    // 展示错误
+    function showError(message) {
+        error.style.display = 'block';
+        errorMessage.textContent = message;
+        
+        // 淡入动画
+        error.style.opacity = 0;
+        setTimeout(() => {
+            error.style.opacity = 1;
+        }, 10);
+        
+        // 滚动到错误区域
+        error.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+    
+    // 隐藏错误
+    function hideError() {
+        if (error.style.display !== 'none') {
+            error.style.opacity = 0;
+            setTimeout(() => {
+                error.style.display = 'none';
+            }, 300);
+        }
+    }
+    
+    // 简单的结果高亮
+    function highlightScanResults() {
+        const content = resultsContent.textContent;
+        let highlighted = content;
+        
+        // 高亮扫描头部
+        highlighted = highlighted.replace(/(Starting Nmap.*?)(?=\n)/g, 
+            '<span class="hl-header">$1</span>');
+        
+        // 高亮端口状态表头
+        highlighted = highlighted.replace(/(PORT\s+STATE\s+SERVICE)/g, 
+            '<span class="hl-table-header">$1</span>');
+        
+        // 高亮目标标记
+        highlighted = highlighted.replace(/(目标: .*?)(?=\n)/g, 
+            '<span class="hl-target">$1</span>');
+        
+        // 高亮端口状态
+        highlighted = highlighted.replace(/(\d+\/\w+)\s+(open|closed|filtered)\s+(.*?)(?=\n|$)/g, function(match, port, state, service) {
+            let stateClass = 'hl-state-' + state;
+            return `<span class="hl-port">${port}</span> <span class="${stateClass}">${state}</span> <span class="hl-service">${service}</span>`;
+        });
+        
+        // 高亮IP地址
+        highlighted = highlighted.replace(/(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})/g, 
+            '<span class="hl-ip">$1</span>');
+        
+        // 高亮域名
+        highlighted = highlighted.replace(/([a-zA-Z0-9][-a-zA-Z0-9]*\.)+[a-zA-Z0-9][-a-zA-Z0-9]*/g, function(match) {
+            // 避免重复高亮已经处理过的元素
+            if (match.includes('<span')) return match;
+            return `<span class="hl-domain">${match}</span>`;
+        });
+        
+        // 高亮服务版本信息
+        highlighted = highlighted.replace(/(Running|Service Info):(.*?)(?=\n|$)/g, 
+            '<span class="hl-service-label">$1:</span><span class="hl-service-info">$2</span>');
+        
+        // 高亮总结信息
+        highlighted = highlighted.replace(/(Nmap 多线程扫描完成:.*?)(?=$)/g, 
+            '<span class="hl-summary">$1</span>');
+        
+        if (highlighted !== content) {
+            resultsContent.innerHTML = highlighted;
+        }
+    }
+    
+    // 检查是否有之前的扫描
+    function checkPreviousScan() {
+        const savedScanId = sessionStorage.getItem('currentScanId');
+        if (savedScanId) {
+            currentScanId = savedScanId;
+            showLoading(false);
+            updateLiveOutput('正在恢复之前的扫描状态...\n');
+            
+            // 当WebSocket连接建立后会自动加入此房间
+        }
+    }
+    
+    // 初始化
+    function init() {
+        initWebSocket();
+        initThreadControl();
+        validateForm();
+        checkPreviousScan();
+    }
+    
+    // 启动初始化
+    init();
+}); 

app/templates/index.html

@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>在线Nmap端口扫描</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script>
+</head>
+<body>
+    <div class="main-wrapper">
+        <div class="container">
+            <header>
+                <div class="logo-area">
+                    <i class="fas fa-network-wired logo-icon"></i>
+                    <h1>在线Nmap端口扫描</h1>
+                </div>
+                <p class="subtitle">安全、高效、专业的网络扫描服务</p>
+            </header>
+
+            <div class="card scan-form-card">
+                <div class="card-header">
+                    <i class="fas fa-search"></i> 扫描设置
+                </div>
+                <div class="card-body">
+                    <form id="scanForm">
+                        <div class="form-group">
+                            <label for="target">
+                                <i class="fas fa-crosshairs"></i> 目标
+                            </label>
+                            <div class="input-wrapper">
+                                <input type="text" id="target" name="target" placeholder="IP地址、域名或IP段" required>
+                                <div class="input-hint">支持单个IP、域名、CIDR格式的网段</div>
+                            </div>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="ports">
+                                <i class="fas fa-plug"></i> 端口
+                            </label>
+                            <div class="input-wrapper">
+                                <input type="text" id="ports" name="ports" placeholder="例如: 80,443 或 1-1000">
+                                <div class="input-hint">指定端口或端口范围，留空则使用默认端口</div>
+                                
+                                <div class="port-option">
+                                    <input type="checkbox" id="scanAllPorts" name="scanAllPorts">
+                                    <label for="scanAllPorts">
+                                        <i class="fas fa-exclamation-triangle"></i> 扫描全部端口 (1-65535)
+                                    </label>
+                                    <div class="option-hint">全端口扫描耗时较长，请耐心等待</div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="parallelTasks">
+                                <i class="fas fa-microchip"></i> 线程数
+                            </label>
+                            <div class="threads-container">
+                                <div class="threads-slider-container">
+                                    <input type="range" id="parallelTasksSlider" name="parallelTasksSlider" min="4" max="16" value="8">
+                                    <div class="threads-display">
+                                        <input type="number" id="parallelTasks" name="parallelTasks" min="4" max="16" value="8">
+                                        <span>线程</span>
+                                    </div>
+                                </div>
+                                <div class="input-hint threads-hint">
+                                    <i class="fas fa-info-circle"></i> 更多线程可以加快扫描速度，但会消耗更多系统资源
+                                </div>
+                                <div class="threads-modes">
+                                    <div class="thread-mode" data-value="4">
+                                        <div class="mode-icon"><i class="fas fa-balance-scale"></i></div>
+                                        <div class="mode-label">标准</div>
+                                    </div>
+                                    <div class="thread-mode" data-value="8">
+                                        <div class="mode-icon"><i class="fas fa-tachometer-alt"></i></div>
+                                        <div class="mode-label">快速</div>
+                                    </div>
+                                    <div class="thread-mode" data-value="12">
+                                        <div class="mode-icon"><i class="fas fa-bolt"></i></div>
+                                        <div class="mode-label">��速</div>
+                                    </div>
+                                    <div class="thread-mode" data-value="16">
+                                        <div class="mode-icon"><i class="fas fa-rocket"></i></div>
+                                        <div class="mode-label">极速</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label>
+                                <i class="fas fa-sliders-h"></i> 扫描类型
+                            </label>
+                            <div class="options-container">
+                                <div class="option-item">
+                                    <input type="radio" id="-sS" name="scan_type" value="-sS" checked>
+                                    <label for="-sS">
+                                        <span class="option-code">-sS</span>
+                                        <span class="option-desc">SYN扫描</span>
+                                        <span class="option-detail">半开放扫描，速度快</span>
+                                    </label>
+                                </div>
+                                <div class="option-item">
+                                    <input type="radio" id="-sT" name="scan_type" value="-sT">
+                                    <label for="-sT">
+                                        <span class="option-code">-sT</span>
+                                        <span class="option-desc">TCP连接扫描</span>
+                                        <span class="option-detail">完全建立连接</span>
+                                    </label>
+                                </div>
+                                <div class="option-item">
+                                    <input type="radio" id="-sU" name="scan_type" value="-sU">
+                                    <label for="-sU">
+                                        <span class="option-code">-sU</span>
+                                        <span class="option-desc">UDP扫描</span>
+                                        <span class="option-detail">检测UDP服务</span>
+                                    </label>
+                                </div>
+                                <div class="option-item">
+                                    <input type="radio" id="-sV" name="scan_type" value="-sV">
+                                    <label for="-sV">
+                                        <span class="option-code">-sV</span>
+                                        <span class="option-desc">服务版本检测</span>
+                                        <span class="option-detail">识别服务信息</span>
+                                    </label>
+                                </div>
+                                <div class="option-item">
+                                    <input type="radio" id="-O" name="scan_type" value="-O">
+                                    <label for="-O">
+                                        <span class="option-code">-O</span>
+                                        <span class="option-desc">操作系统检测</span>
+                                        <span class="option-detail">识别系统类型</span>
+                                    </label>
+                                </div>
+                                <div class="option-item">
+                                    <input type="radio" id="-A" name="scan_type" value="-A">
+                                    <label for="-A">
+                                        <span class="option-code">-A</span>
+                                        <span class="option-desc">综合扫描</span>
+                                        <span class="option-detail">多种检测方式</span>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label>
+                                <i class="fas fa-tachometer-alt"></i> 扫描速度
+                            </label>
+                            <div class="options-container speed-options">
+                                <div class="option-item">
+                                    <input type="radio" id="-T0" name="scan_speed" value="-T0">
+                                    <label for="-T0">
+                                        <span class="option-code">-T0</span>
+                                        <span class="option-desc">偷偷摸摸</span>
+                                        <span class="option-detail">高度隐蔽</span>
+                                    </label>
+                                </div>
+                                <div class="option-item">
+                                    <input type="radio" id="-T1" name="scan_speed" value="-T1">
+                                    <label for="-T1">
+                                        <span class="option-code">-T1</span>
+                                        <span class="option-desc">鬼鬼祟祟</span>
+                                        <span class="option-detail">较为隐蔽</span>
+                                    </label>
+                                </div>
+                                <div class="option-item">
+                                    <input type="radio" id="-T2" name="scan_speed" value="-T2">
+                                    <label for="-T2">
+                                        <span class="option-code">-T2</span>
+                                        <span class="option-desc">文明礼貌</span>
+                                        <span class="option-detail">低资源占用</span>
+                                    </label>
+                                </div>
+                                <div class="option-item">
+                                    <input type="radio" id="-T3" name="scan_speed" value="-T3" checked>
+                                    <label for="-T3">
+                                        <span class="option-code">-T3</span>
+                                        <span class="option-desc">正常</span>
+                                        <span class="option-detail">默认速度</span>
+                                    </label>
+                                </div>
+                                <div class="option-item">
+                                    <input type="radio" id="-T4" name="scan_speed" value="-T4">
+                                    <label for="-T4">
+                                        <span class="option-code">-T4</span>
+                                        <span class="option-desc">激进</span>
+                                        <span class="option-detail">快速扫描</span>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="form-actions">
+                            <button type="submit" id="scanButton" class="btn primary-btn">
+                                <i class="fas fa-play"></i> 开始扫描
+                            </button>
+                            <button type="button" id="clearButton" class="btn secondary-btn">
+                                <i class="fas fa-broom"></i> 清除结果
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            
+            <div class="results-container" id="resultsContainer">
+                <div class="loading" id="loading" style="display: none;">
+                    <div class="spinner-container">
+                        <div class="spinner"></div>
+                    </div>
+                    <h3><i class="fas fa-hourglass-half"></i> 正在扫描中</h3>
+                    <div class="thread-count-display">
+                        <i class="fas fa-microchip"></i> <span id="threadsInUse">8</span> 个线程正在工作中
+                    </div>
+                    <p>请耐心等待扫描完成...</p>
+                    <p class="scan-warning" id="scanWarning" style="display: none;">
+                        <i class="fas fa-exclamation-circle"></i> 全端口扫描可能需要较长时间，请耐心等待
+                    </p>
+                    
+                    <div class="tasks-overview" id="tasksOverview">
+                        <h4><i class="fas fa-tasks"></i> 子任务状态</h4>
+                        <div class="tasks-grid" id="tasksGrid"></div>
+                    </div>
+                    
+                </div>
+                
+                <div class="card results-card" id="results" style="display: none;">
+                    <div class="card-header">
+                        <i class="fas fa-clipboard-list"></i> 扫描结果
+                    </div>
+                    <div class="card-body">
+                        <div class="results-content">
+                            <pre id="resultsContent"></pre>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="card error-card" id="error" style="display: none;">
+                    <div class="card-header">
+                        <i class="fas fa-exclamation-triangle"></i> 扫描错误
+                    </div>
+                    <div class="card-body">
+                        <p id="errorMessage"></p>
+                    </div>
+                </div>
+            </div>
+            
+            <footer>
+                <div class="footer-content">
+                    <p><i class="fas fa-shield-alt"></i> 免责声明: 本工具仅用于授权的安全测试。未经授权的网络扫描可能违反相关法律法规。</p>
+                </div>
+            </footer>
+        </div>
+    </div>
+
+    <div id="socketStatus" class="socket-status"></div>
+
+    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
+</body>
+</html> 

docker-compose.yml

@@ -0,0 +1,29 @@
+version: '3'
+
+services:
+  nmap-web:
+    build: .
+    container_name: nmap-online
+    ports:
+      - "8080:5000"
+    restart: unless-stopped
+    deploy:
+      resources:
+        limits:
+          cpus: '8'
+          memory: 4G
+        reservations:
+          cpus: '2'
+          memory: 1G
+    ulimits:
+      nproc: 65535
+      nofile:
+        soft: 20000
+        hard: 40000
+    environment:
+      - PYTHONUNBUFFERED=1
+      - GUNICORN_WORKERS=2
+      - GUNICORN_THREADS=4
+    volumes:
+      - ./app:/app/app
+

requirements.txt

@@ -0,0 +1,9 @@
+Flask==2.0.1
+gunicorn==20.1.0
+flask-socketio==5.1.1
+gevent==21.8.0
+gevent-websocket==0.10.1
+ipaddress==1.0.23
+Werkzeug==2.0.1
+zope.event==4.5.0
+zope.interface==5.4.0