Upload 7 files

Dockerfile

@@ -0,0 +1,37 @@
+# 使用Python 3.11作为基础镜像
+FROM python:3.11-slim
+
+# 设置工作目录
+WORKDIR /app
+
+# 设置环境变量
+ENV PYTHONUNBUFFERED=1
+ENV PYTHONDONTWRITEBYTECODE=1
+
+# 安装系统依赖
+RUN apt-get update && apt-get install -y \
+    curl \
+    vim \
+    git \
+    procps \
+    net-tools \
+    && rm -rf /var/lib/apt/lists/*
+
+# 复制requirements文件
+COPY requirements.txt .
+
+# 安装Python依赖
+RUN pip install --no-cache-dir -r requirements.txt
+
+# 复制应用代码
+COPY . .
+
+# 创建非root用户
+RUN useradd -m -u 1000 user && chown -R user:user /app
+USER user
+
+# 暴露端口（Hugging Face Spaces使用7860端口）
+EXPOSE 7860
+
+# 设置启动命令
+CMD ["python", "app.py"] 

app.py

@@ -0,0 +1,407 @@
+import os
+import subprocess
+import json
+import threading
+import time
+import signal
+import queue
+from datetime import datetime
+from flask import Flask, render_template, request, jsonify, send_file, abort, redirect, url_for
+from flask_socketio import SocketIO, emit
+import sys
+
+app = Flask(__name__)
+app.config['SECRET_KEY'] = 'webshell-secret-key-2024'
+socketio = SocketIO(app, cors_allowed_origins="*")
+
+# 全局变量存储终端进程
+terminals = {}
+
+class Terminal:
+    def __init__(self, session_id):
+        self.session_id = session_id
+        self.process = None
+        self.is_windows = os.name == 'nt'
+        self.output_queue = queue.Queue()
+        self.input_queue = queue.Queue()
+        self.running = False
+        
+    def spawn(self):
+        """启动终端进程"""
+        try:
+            if self.is_windows:
+                # Windows环境使用cmd
+                self.process = subprocess.Popen(
+                    'cmd',
+                    stdin=subprocess.PIPE,
+                    stdout=subprocess.PIPE,
+                    stderr=subprocess.STDOUT,
+                    text=True,
+                    shell=True,
+                    bufsize=0
+                )
+            else:
+                # Unix/Linux环境使用bash
+                import pty
+                self.child_pid, self.fd = pty.fork()
+                if self.child_pid == 0:
+                    # 子进程
+                    os.execvp('/bin/bash', ['/bin/bash'])
+                else:
+                    # 父进程
+                    self.set_winsize(24, 80)
+            
+            self.running = True
+            
+            # 启动输出读取线程
+            if self.is_windows:
+                self._start_output_thread()
+                self._start_input_thread()
+            
+            return True
+        except Exception as e:
+            print(f"启动终端失败: {e}")
+            return False
+    
+    def _start_output_thread(self):
+        """启动输出读取线程（Windows）"""
+        def read_output():
+            while self.running and self.process and self.process.poll() is None:
+                try:
+                    line = self.process.stdout.readline()
+                    if line:
+                        self.output_queue.put(line)
+                except Exception as e:
+                    print(f"读取输出错误: {e}")
+                    break
+                    
+        threading.Thread(target=read_output, daemon=True).start()
+    
+    def _start_input_thread(self):
+        """启动输入处理线程（Windows）"""
+        def process_input():
+            while self.running and self.process and self.process.poll() is None:
+                try:
+                    if not self.input_queue.empty():
+                        data = self.input_queue.get(timeout=0.1)
+                        if self.process.stdin:
+                            self.process.stdin.write(data)
+                            self.process.stdin.flush()
+                except:
+                    pass
+                time.sleep(0.01)
+                    
+        threading.Thread(target=process_input, daemon=True).start()
+            
+    def set_winsize(self, rows, cols):
+        """设置终端窗口大小"""
+        if not self.is_windows and hasattr(self, 'fd'):
+            try:
+                import termios
+                import struct
+                import fcntl
+                winsize = struct.pack("HHHH", rows, cols, 0, 0)
+                fcntl.ioctl(self.fd, termios.TIOCSWINSZ, winsize)
+            except:
+                pass
+                
+    def read(self):
+        """读取终端输出"""
+        try:
+            if self.is_windows:
+                output = ""
+                while not self.output_queue.empty():
+                    try:
+                        line = self.output_queue.get_nowait()
+                        output += line
+                    except queue.Empty:
+                        break
+                return output
+            else:
+                # Unix/Linux
+                if hasattr(self, 'fd'):
+                    try:
+                        import select
+                        ready, _, _ = select.select([self.fd], [], [], 0.1)
+                        if ready:
+                            data = os.read(self.fd, 1024)
+                            return data.decode('utf-8', errors='ignore')
+                    except:
+                        pass
+                return ''
+        except Exception as e:
+            print(f"读取终端输出错误: {e}")
+            return ''
+            
+    def write(self, data):
+        """写入终端输入"""
+        try:
+            if self.is_windows:
+                self.input_queue.put(data)
+            else:
+                # Unix/Linux
+                if hasattr(self, 'fd'):
+                    os.write(self.fd, data.encode('utf-8'))
+        except Exception as e:
+            print(f"写入终端输入错误: {e}")
+    
+    def close(self):
+        """关闭终端"""
+        try:
+            self.running = False
+            if self.is_windows:
+                if self.process:
+                    self.process.terminate()
+                    self.process = None
+            else:
+                if hasattr(self, 'fd'):
+                    os.close(self.fd)
+                if hasattr(self, 'child_pid'):
+                    try:
+                        os.kill(self.child_pid, signal.SIGTERM)
+                    except:
+                        pass
+        except Exception as e:
+            print(f"关闭终端错误: {e}")
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/files')
+def file_manager():
+    return render_template('files.html')
+
+@app.route('/terminal')
+def terminal():
+    return render_template('terminal.html')
+
+@app.route('/api/files')
+def list_files():
+    path = request.args.get('path', '.')
+    try:
+        # 安全检查：防止路径遍历攻击
+        abs_path = os.path.abspath(path)
+        if not abs_path.startswith(os.getcwd()):
+            # 限制在当前工作目录内
+            abs_path = os.getcwd()
+            
+        items = []
+        for item in os.listdir(abs_path):
+            item_path = os.path.join(abs_path, item)
+            try:
+                stat = os.stat(item_path)
+                items.append({
+                    'name': item,
+                    'type': 'directory' if os.path.isdir(item_path) else 'file',
+                    'size': stat.st_size,
+                    'modified': datetime.fromtimestamp(stat.st_mtime).strftime('%Y-%m-%d %H:%M:%S'),
+                    'path': os.path.relpath(item_path, os.getcwd()).replace('\\', '/')
+                })
+            except:
+                continue
+        
+        return jsonify({
+            'success': True,
+            'path': os.path.relpath(abs_path, os.getcwd()).replace('\\', '/'),
+            'items': sorted(items, key=lambda x: (x['type'] != 'directory', x['name'].lower()))
+        })
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)})
+
+@app.route('/api/files/create', methods=['POST'])
+def create_file():
+    data = request.json
+    try:
+        file_path = data['path']
+        # 安全检查
+        abs_path = os.path.abspath(file_path)
+        if not abs_path.startswith(os.getcwd()):
+            return jsonify({'success': False, 'error': '路径不被允许'})
+            
+        if data['type'] == 'directory':
+            os.makedirs(abs_path, exist_ok=True)
+        else:
+            os.makedirs(os.path.dirname(abs_path), exist_ok=True)
+            with open(abs_path, 'w', encoding='utf-8') as f:
+                f.write(data.get('content', ''))
+        return jsonify({'success': True})
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)})
+
+@app.route('/api/files/delete', methods=['POST'])
+def delete_file():
+    data = request.json
+    try:
+        file_path = data['path']
+        abs_path = os.path.abspath(file_path)
+        if not abs_path.startswith(os.getcwd()):
+            return jsonify({'success': False, 'error': '路径不被允许'})
+            
+        if os.path.isdir(abs_path):
+            import shutil
+            shutil.rmtree(abs_path)
+        else:
+            os.remove(abs_path)
+        return jsonify({'success': True})
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)})
+
+@app.route('/api/files/rename', methods=['POST'])
+def rename_file():
+    data = request.json
+    try:
+        old_path = os.path.abspath(data['oldPath'])
+        new_path = os.path.abspath(data['newPath'])
+        
+        if not old_path.startswith(os.getcwd()) or not new_path.startswith(os.getcwd()):
+            return jsonify({'success': False, 'error': '路径不被允许'})
+            
+        os.rename(old_path, new_path)
+        return jsonify({'success': True})
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)})
+
+@app.route('/api/files/read')
+def read_file():
+    file_path = request.args.get('path')
+    try:
+        abs_path = os.path.abspath(file_path)
+        if not abs_path.startswith(os.getcwd()):
+            return jsonify({'success': False, 'error': '路径不被允许'})
+            
+        with open(abs_path, 'r', encoding='utf-8') as f:
+            content = f.read()
+        return jsonify({'success': True, 'content': content})
+    except UnicodeDecodeError:
+        try:
+            with open(abs_path, 'r', encoding='gbk') as f:
+                content = f.read()
+            return jsonify({'success': True, 'content': content})
+        except:
+            return jsonify({'success': False, 'error': '无法读取文件，可能是二进制文件'})
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)})
+
+@app.route('/api/files/write', methods=['POST'])
+def write_file():
+    data = request.json
+    try:
+        file_path = data['path']
+        content = data['content']
+        abs_path = os.path.abspath(file_path)
+        if not abs_path.startswith(os.getcwd()):
+            return jsonify({'success': False, 'error': '路径不被允许'})
+            
+        with open(abs_path, 'w', encoding='utf-8') as f:
+            f.write(content)
+        return jsonify({'success': True})
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)})
+
+@app.route('/api/files/download')
+def download_file():
+    file_path = request.args.get('path')
+    try:
+        abs_path = os.path.abspath(file_path)
+        if not abs_path.startswith(os.getcwd()):
+            abort(403)
+        return send_file(abs_path, as_attachment=True)
+    except Exception as e:
+        abort(404)
+
+@app.route('/api/files/upload', methods=['POST'])
+def upload_file():
+    try:
+        file = request.files['file']
+        path = request.form.get('path', '.')
+        abs_path = os.path.abspath(path)
+        if not abs_path.startswith(os.getcwd()):
+            return jsonify({'success': False, 'error': '路径不被允许'})
+            
+        file_path = os.path.join(abs_path, file.filename)
+        file.save(file_path)
+        return jsonify({'success': True})
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)})
+
+# WebSocket事件处理
+@socketio.on('connect')
+def on_connect():
+    print(f'客户端连接: {request.sid}')
+
+@socketio.on('disconnect')
+def on_disconnect():
+    print(f'客户端断开: {request.sid}')
+    # 清理终端进程
+    if request.sid in terminals:
+        terminals[request.sid].close()
+        del terminals[request.sid]
+
+@socketio.on('start_terminal')
+def on_start_terminal():
+    session_id = request.sid
+    terminal = Terminal(session_id)
+    
+    if terminal.spawn():
+        terminals[session_id] = terminal
+        
+        # 发送初始提示
+        if os.name == 'nt':
+            socketio.emit('terminal_output', {'data': f'Microsoft Windows [版本 {os.environ.get("OS", "Windows")}]\n'}, room=session_id)
+            socketio.emit('terminal_output', {'data': f'(c) Microsoft Corporation. 保留所有权利。\n\n'}, room=session_id)
+            socketio.emit('terminal_output', {'data': f'{os.getcwd()}>'}, room=session_id)
+        else:
+            socketio.emit('terminal_output', {'data': f'WebShell Terminal - Linux\n'}, room=session_id)
+            socketio.emit('terminal_output', {'data': f'Current directory: {os.getcwd()}\n'}, room=session_id)
+            socketio.emit('terminal_output', {'data': f'$ '}, room=session_id)
+        
+        # 启动读取线程
+        def read_thread():
+            while session_id in terminals and terminals[session_id].running:
+                try:
+                    terminal_instance = terminals[session_id]
+                    output = terminal_instance.read()
+                    if output:
+                        socketio.emit('terminal_output', {'data': output}, room=session_id)
+                    time.sleep(0.1)
+                except Exception as e:
+                    print(f"读取线程错误: {e}")
+                    break
+        
+        threading.Thread(target=read_thread, daemon=True).start()
+        emit('terminal_ready')
+    else:
+        emit('terminal_error', {'error': '无法启动终端'})
+
+@socketio.on('terminal_input')
+def on_terminal_input(data):
+    session_id = request.sid
+    if session_id in terminals:
+        command = data['data']
+        print(f"收到命令: {repr(command)}")
+        terminals[session_id].write(command)
+
+@socketio.on('terminal_resize')
+def on_terminal_resize(data):
+    session_id = request.sid
+    if session_id in terminals:
+        terminals[session_id].set_winsize(data['rows'], data['cols'])
+
+# 错误处理
+@app.errorhandler(404)
+def not_found(error):
+    return jsonify({'success': False, 'error': '页面未找到'}), 404
+
+@app.errorhandler(500)
+def internal_error(error):
+    return jsonify({'success': False, 'error': '内部服务器错误'}), 500
+
+if __name__ == '__main__':
+    # 从环境变量获取端口，默认7860（Hugging Face Spaces标准端口）
+    port = int(os.environ.get('PORT', 7860))
+    host = os.environ.get('HOST', '0.0.0.0')
+    debug = os.environ.get('DEBUG', 'False').lower() == 'true'
+    
+    print(f"🚀 WebShell 启动在 {host}:{port}")
+    socketio.run(app, host=host, port=port, debug=debug, allow_unsafe_werkzeug=True) 

requirements.txt

@@ -0,0 +1,5 @@
+Flask==2.3.3
+Flask-SocketIO==5.3.6
+python-socketio==5.8.0
+eventlet==0.33.3
+Werkzeug==2.3.7 

run.py

@@ -0,0 +1,78 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+WebShell 系统启动脚本
+"""
+
+import os
+import sys
+import logging
+from app import app, socketio
+
+def setup_logging():
+    """设置日志"""
+    logging.basicConfig(
+        level=logging.INFO,
+        format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',
+        handlers=[
+            logging.StreamHandler(sys.stdout),
+            logging.FileHandler('webshell.log', encoding='utf-8')
+        ]
+    )
+
+def check_dependencies():
+    """检查依赖"""
+    try:
+        import flask
+        import flask_socketio
+        print("✓ 依赖检查通过")
+        return True
+    except ImportError as e:
+        print(f"✗ 缺少依赖: {e}")
+        print("请运行: pip install -r requirements.txt")
+        return False
+
+def main():
+    """主函数"""
+    print("="*50)
+    print("🚀 WebShell 管理系统")
+    print("="*50)
+    
+    # 检查依赖
+    if not check_dependencies():
+        sys.exit(1)
+    
+    # 设置日志
+    setup_logging()
+    
+    # 获取配置
+    host = os.environ.get('HOST', '0.0.0.0')
+    port = int(os.environ.get('PORT', 5000))
+    debug = os.environ.get('DEBUG', 'True').lower() == 'true'
+    
+    print(f"📡 服务器地址: http://{host}:{port}")
+    print(f"🔧 调试模式: {'开启' if debug else '关闭'}")
+    print(f"📁 工作目录: {os.getcwd()}")
+    print("="*50)
+    print("💡 使用说明:")
+    print("   - 在浏览器中访问上述地址")
+    print("   - 按 Ctrl+C 停止服务器")
+    print("="*50)
+    
+    try:
+        # 启动服务器
+        socketio.run(
+            app, 
+            host=host, 
+            port=port, 
+            debug=debug,
+            allow_unsafe_werkzeug=True
+        )
+    except KeyboardInterrupt:
+        print("\n👋 服务器已停止")
+    except Exception as e:
+        print(f"❌ 启动失败: {e}")
+        sys.exit(1)
+
+if __name__ == '__main__':
+    main() 

templates/files.html

@@ -0,0 +1,646 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>文件管理 - WebShell</title>
+    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <link href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.65.2/codemirror.min.css" rel="stylesheet">
+    <link href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.65.2/theme/monokai.min.css" rel="stylesheet">
+    <style>
+        body {
+            background: #f8f9fa;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        
+        .navbar {
+            box-shadow: 0 2px 4px rgba(0,0,0,.1);
+        }
+        
+        .file-item {
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        
+        .file-item:hover {
+            background-color: #f8f9fa;
+        }
+        
+        .file-item.selected {
+            background-color: #e3f2fd;
+        }
+        
+        .breadcrumb {
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 1px 3px rgba(0,0,0,.1);
+        }
+        
+        .file-icon {
+            width: 20px;
+            text-align: center;
+        }
+        
+        .CodeMirror {
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            height: 400px;
+        }
+        
+        .toolbar {
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 1px 3px rgba(0,0,0,.1);
+            padding: 1rem;
+            margin-bottom: 1rem;
+        }
+    </style>
+</head>
+<body>
+    <!-- 导航栏 -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="/">
+                <i class="fas fa-folder-open me-2"></i>文件管理
+            </a>
+            <div class="navbar-nav ms-auto">
+                <a class="nav-link" href="/terminal">
+                    <i class="fas fa-terminal me-2"></i>终端
+                </a>
+                <a class="nav-link" href="/">
+                    <i class="fas fa-home me-2"></i>主页
+                </a>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container-fluid py-3">
+        <div class="row">
+            <!-- 文件列表 -->
+            <div class="col-md-8">
+                <!-- 路径导航 -->
+                <nav aria-label="breadcrumb" class="mb-3">
+                    <ol class="breadcrumb p-3 mb-0" id="breadcrumb">
+                        <li class="breadcrumb-item"><a href="#" onclick="loadFiles('.')">根目录</a></li>
+                    </ol>
+                </nav>
+
+                <!-- 工具栏 -->
+                <div class="toolbar d-flex justify-content-between align-items-center">
+                    <div>
+                        <button class="btn btn-primary btn-sm" onclick="showCreateDialog()">
+                            <i class="fas fa-plus me-2"></i>新建
+                        </button>
+                        <button class="btn btn-success btn-sm" onclick="document.getElementById('uploadFile').click()">
+                            <i class="fas fa-upload me-2"></i>上传
+                        </button>
+                        <button class="btn btn-warning btn-sm" onclick="renameSelected()" id="renameBtn" disabled>
+                            <i class="fas fa-edit me-2"></i>重命名
+                        </button>
+                        <button class="btn btn-danger btn-sm" onclick="deleteSelected()" id="deleteBtn" disabled>
+                            <i class="fas fa-trash me-2"></i>删除
+                        </button>
+                    </div>
+                    <div>
+                        <button class="btn btn-outline-secondary btn-sm" onclick="refreshFiles()">
+                            <i class="fas fa-sync me-2"></i>刷新
+                        </button>
+                    </div>
+                </div>
+
+                <!-- 文件列表 -->
+                <div class="card">
+                    <div class="table-responsive">
+                        <table class="table table-hover mb-0">
+                            <thead class="table-light">
+                                <tr>
+                                    <th width="40"></th>
+                                    <th>名称</th>
+                                    <th width="100">大小</th>
+                                    <th width="150">修改时间</th>
+                                    <th width="100">操作</th>
+                                </tr>
+                            </thead>
+                            <tbody id="fileList">
+                                <!-- 文件列表将在这里动态生成 -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 预览/编辑面板 -->
+            <div class="col-md-4">
+                <div class="card">
+                    <div class="card-header">
+                        <h6 class="mb-0" id="previewTitle">选择文件进行预览</h6>
+                    </div>
+                    <div class="card-body" id="previewContent">
+                        <div class="text-center text-muted">
+                            <i class="fas fa-file fa-3x mb-3"></i>
+                            <p>选择一个文件来预览或编辑其内容</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 上传文件隐藏input -->
+    <input type="file" id="uploadFile" style="display: none" multiple onchange="uploadFiles(this.files)">
+
+    <!-- 新建文件/文件夹模态框 -->
+    <div class="modal fade" id="createModal" tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">新建</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="mb-3">
+                        <label class="form-label">类型</label>
+                        <select class="form-select" id="createType">
+                            <option value="file">文件</option>
+                            <option value="directory">文件夹</option>
+                        </select>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">名称</label>
+                        <input type="text" class="form-control" id="createName" placeholder="输入名称">
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
+                    <button type="button" class="btn btn-primary" onclick="createItem()">创建</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 编辑器模态框 -->
+    <div class="modal fade" id="editorModal" tabindex="-1">
+        <div class="modal-dialog modal-xl">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="editorTitle">编辑文件</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body p-0">
+                    <textarea id="fileEditor"></textarea>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
+                    <button type="button" class="btn btn-primary" onclick="saveFile()">保存</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.65.2/mode/python/python.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.65.2/mode/xml/xml.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.65.2/mode/css/css.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.65.2/mode/htmlmixed/htmlmixed.min.js"></script>
+
+    <script>
+        let currentPath = '.';
+        let selectedFile = null;
+        let editor = null;
+        let currentEditFile = null;
+
+        // 页面加载时初始化
+        document.addEventListener('DOMContentLoaded', function() {
+            loadFiles('.');
+            initEditor();
+        });
+
+        // 初始化编辑器
+        function initEditor() {
+            editor = CodeMirror.fromTextArea(document.getElementById('fileEditor'), {
+                theme: 'monokai',
+                lineNumbers: true,
+                mode: 'text/plain',
+                indentUnit: 4,
+                lineWrapping: true
+            });
+        }
+
+        // 加载文件列表
+        function loadFiles(path) {
+            currentPath = path;
+            fetch(`/api/files?path=${encodeURIComponent(path)}`)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        renderFileList(data.items);
+                        updateBreadcrumb(data.path);
+                    } else {
+                        alert('加载文件失败: ' + data.error);
+                    }
+                })
+                .catch(error => {
+                    alert('网络错误: ' + error.message);
+                });
+        }
+
+        // 渲染文件列表
+        function renderFileList(items) {
+            const fileList = document.getElementById('fileList');
+            fileList.innerHTML = '';
+
+            // 添加上级目录
+            if (currentPath !== '.') {
+                const row = document.createElement('tr');
+                row.className = 'file-item';
+                row.innerHTML = `
+                    <td><i class="fas fa-level-up-alt file-icon"></i></td>
+                    <td><a href="#" onclick="loadFiles('${getParentPath(currentPath)}')">..</a></td>
+                    <td>-</td>
+                    <td>-</td>
+                    <td>-</td>
+                `;
+                fileList.appendChild(row);
+            }
+
+            // 添加文件和文件夹
+            items.forEach(item => {
+                const row = document.createElement('tr');
+                row.className = 'file-item';
+                row.onclick = () => selectFile(row, item);
+                row.ondblclick = () => {
+                    if (item.type === 'directory') {
+                        loadFiles(item.path);
+                    } else {
+                        editFile(item.path);
+                    }
+                };
+
+                const icon = item.type === 'directory' ? 'fa-folder' : getFileIcon(item.name);
+                const size = item.type === 'directory' ? '-' : formatFileSize(item.size);
+                
+                row.innerHTML = `
+                    <td><i class="fas ${icon} file-icon"></i></td>
+                    <td>${item.name}</td>
+                    <td>${size}</td>
+                    <td>${item.modified}</td>
+                    <td>
+                        ${item.type === 'file' ? `
+                            <button class="btn btn-sm btn-outline-primary" onclick="event.stopPropagation(); editFile('${item.path}')">
+                                <i class="fas fa-edit"></i>
+                            </button>
+                            <button class="btn btn-sm btn-outline-success" onclick="event.stopPropagation(); downloadFile('${item.path}')">
+                                <i class="fas fa-download"></i>
+                            </button>
+                        ` : ''}
+                    </td>
+                `;
+                fileList.appendChild(row);
+            });
+        }
+
+        // 选择文件
+        function selectFile(row, item) {
+            // 移除之前的选中状态
+            document.querySelectorAll('.file-item').forEach(r => r.classList.remove('selected'));
+            row.classList.add('selected');
+            
+            selectedFile = item;
+            updateButtons();
+            
+            if (item.type === 'file') {
+                previewFile(item.path);
+            }
+        }
+
+        // 更新按钮状态
+        function updateButtons() {
+            const renameBtn = document.getElementById('renameBtn');
+            const deleteBtn = document.getElementById('deleteBtn');
+            
+            if (selectedFile) {
+                renameBtn.disabled = false;
+                deleteBtn.disabled = false;
+            } else {
+                renameBtn.disabled = true;
+                deleteBtn.disabled = true;
+            }
+        }
+
+        // 预览文件
+        function previewFile(filePath) {
+            const previewTitle = document.getElementById('previewTitle');
+            const previewContent = document.getElementById('previewContent');
+            
+            previewTitle.textContent = `预览: ${filePath.split('/').pop()}`;
+            
+            fetch(`/api/files/read?path=${encodeURIComponent(filePath)}`)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        const content = data.content;
+                        if (content.length > 1000) {
+                            previewContent.innerHTML = `
+                                <div class="alert alert-info">
+                                    <p><strong>文件太大，只显示前1000个字符</strong></p>
+                                    <pre style="max-height: 300px; overflow-y: auto;">${escapeHtml(content.substring(0, 1000))}...</pre>
+                                    <button class="btn btn-primary btn-sm mt-2" onclick="editFile('${filePath}')">
+                                        <i class="fas fa-edit me-2"></i>编辑完整文件
+                                    </button>
+                                </div>
+                            `;
+                        } else {
+                            previewContent.innerHTML = `
+                                <pre style="max-height: 400px; overflow-y: auto; background: #f8f9fa; padding: 1rem; border-radius: 4px;">${escapeHtml(content)}</pre>
+                                <button class="btn btn-primary btn-sm mt-2" onclick="editFile('${filePath}')">
+                                    <i class="fas fa-edit me-2"></i>编辑文件
+                                </button>
+                            `;
+                        }
+                    } else {
+                        previewContent.innerHTML = `
+                            <div class="alert alert-warning">
+                                无法预览此文件: ${data.error}
+                            </div>
+                        `;
+                    }
+                })
+                .catch(error => {
+                    previewContent.innerHTML = `
+                        <div class="alert alert-danger">
+                            预览失败: ${error.message}
+                        </div>
+                    `;
+                });
+        }
+
+        // 编辑文件
+        function editFile(filePath) {
+            currentEditFile = filePath;
+            
+            fetch(`/api/files/read?path=${encodeURIComponent(filePath)}`)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        editor.setValue(data.content);
+                        editor.setOption('mode', getEditorMode(filePath));
+                        document.getElementById('editorTitle').textContent = `编辑: ${filePath.split('/').pop()}`;
+                        new bootstrap.Modal(document.getElementById('editorModal')).show();
+                    } else {
+                        alert('读取文件失败: ' + data.error);
+                    }
+                })
+                .catch(error => {
+                    alert('网络错误: ' + error.message);
+                });
+        }
+
+        // 保存文件
+        function saveFile() {
+            if (!currentEditFile) return;
+            
+            const content = editor.getValue();
+            
+            fetch('/api/files/write', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    path: currentEditFile,
+                    content: content
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    bootstrap.Modal.getInstance(document.getElementById('editorModal')).hide();
+                    refreshFiles();
+                } else {
+                    alert('保存失败: ' + data.error);
+                }
+            })
+            .catch(error => {
+                alert('网络错误: ' + error.message);
+            });
+        }
+
+        // 显示创建对话框
+        function showCreateDialog() {
+            new bootstrap.Modal(document.getElementById('createModal')).show();
+        }
+
+        // 创建文件或文件夹
+        function createItem() {
+            const type = document.getElementById('createType').value;
+            const name = document.getElementById('createName').value.trim();
+            
+            if (!name) {
+                alert('请输入名称');
+                return;
+            }
+            
+            const path = currentPath === '.' ? name : `${currentPath}/${name}`;
+            
+            fetch('/api/files/create', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    path: path,
+                    type: type
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    bootstrap.Modal.getInstance(document.getElementById('createModal')).hide();
+                    document.getElementById('createName').value = '';
+                    refreshFiles();
+                } else {
+                    alert('创建失败: ' + data.error);
+                }
+            })
+            .catch(error => {
+                alert('网络错误: ' + error.message);
+            });
+        }
+
+        // 上传文件
+        function uploadFiles(files) {
+            Array.from(files).forEach(file => {
+                const formData = new FormData();
+                formData.append('file', file);
+                formData.append('path', currentPath);
+                
+                fetch('/api/files/upload', {
+                    method: 'POST',
+                    body: formData
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        refreshFiles();
+                    } else {
+                        alert(`上传 ${file.name} 失败: ${data.error}`);
+                    }
+                })
+                .catch(error => {
+                    alert(`上传 ${file.name} 网络错误: ${error.message}`);
+                });
+            });
+        }
+
+        // 重命名选中文件
+        function renameSelected() {
+            if (!selectedFile) return;
+            
+            const newName = prompt('请输入新名称:', selectedFile.name);
+            if (!newName || newName === selectedFile.name) return;
+            
+            const newPath = selectedFile.path.replace(/[^/\\]*$/, newName);
+            
+            fetch('/api/files/rename', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    oldPath: selectedFile.path,
+                    newPath: newPath
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    refreshFiles();
+                    selectedFile = null;
+                    updateButtons();
+                } else {
+                    alert('重命名失败: ' + data.error);
+                }
+            })
+            .catch(error => {
+                alert('网络错误: ' + error.message);
+            });
+        }
+
+        // 删除选中文件
+        function deleteSelected() {
+            if (!selectedFile) return;
+            
+            if (!confirm(`确定要删除 "${selectedFile.name}" 吗？`)) return;
+            
+            fetch('/api/files/delete', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    path: selectedFile.path
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    refreshFiles();
+                    selectedFile = null;
+                    updateButtons();
+                } else {
+                    alert('删除失败: ' + data.error);
+                }
+            })
+            .catch(error => {
+                alert('网络错误: ' + error.message);
+            });
+        }
+
+        // 下载文件
+        function downloadFile(filePath) {
+            window.open(`/api/files/download?path=${encodeURIComponent(filePath)}`);
+        }
+
+        // 刷新文件列表
+        function refreshFiles() {
+            loadFiles(currentPath);
+        }
+
+        // 工具函数
+        function getParentPath(path) {
+            const parts = path.split('/').filter(p => p && p !== '.');
+            parts.pop();
+            return parts.length > 0 ? parts.join('/') : '.';
+        }
+
+        function getFileIcon(filename) {
+            const ext = filename.split('.').pop().toLowerCase();
+            const iconMap = {
+                'txt': 'fa-file-alt',
+                'js': 'fa-file-code',
+                'html': 'fa-file-code',
+                'css': 'fa-file-code',
+                'py': 'fa-file-code',
+                'jpg': 'fa-file-image',
+                'png': 'fa-file-image',
+                'gif': 'fa-file-image',
+                'pdf': 'fa-file-pdf',
+                'zip': 'fa-file-archive',
+                'rar': 'fa-file-archive'
+            };
+            return iconMap[ext] || 'fa-file';
+        }
+
+        function formatFileSize(bytes) {
+            if (bytes === 0) return '0 B';
+            const k = 1024;
+            const sizes = ['B', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+        }
+
+        function getEditorMode(filename) {
+            const ext = filename.split('.').pop().toLowerCase();
+            const modeMap = {
+                'js': 'javascript',
+                'html': 'htmlmixed',
+                'css': 'css',
+                'py': 'python',
+                'xml': 'xml',
+                'json': 'javascript'
+            };
+            return modeMap[ext] || 'text/plain';
+        }
+
+        function updateBreadcrumb(path) {
+            const breadcrumb = document.getElementById('breadcrumb');
+            breadcrumb.innerHTML = '<li class="breadcrumb-item"><a href="#" onclick="loadFiles(\'.\')">���目录</a></li>';
+            
+            if (path !== '.' && path !== '') {
+                const parts = path.split('/').filter(p => p);
+                let currentBreadcrumbPath = '';
+                
+                parts.forEach((part, index) => {
+                    currentBreadcrumbPath += (currentBreadcrumbPath ? '/' : '') + part;
+                    const isLast = index === parts.length - 1;
+                    
+                    if (isLast) {
+                        breadcrumb.innerHTML += `<li class="breadcrumb-item active">${part}</li>`;
+                    } else {
+                        breadcrumb.innerHTML += `<li class="breadcrumb-item"><a href="#" onclick="loadFiles('${currentBreadcrumbPath}')">${part}</a></li>`;
+                    }
+                });
+            }
+        }
+
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+    </script>
+</body>
+</html> 

templates/index.html

@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WebShell 系统</title>
+    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <style>
+        body {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            font-family: 'Arial', sans-serif;
+        }
+        
+        .card {
+            border: none;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+        }
+        
+        .feature-icon {
+            font-size: 4rem;
+            margin-bottom: 1rem;
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        
+        .btn-custom {
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            border: none;
+            border-radius: 25px;
+            padding: 12px 30px;
+            color: white;
+            font-weight: 600;
+            transition: all 0.3s ease;
+        }
+        
+        .btn-custom:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+            color: white;
+        }
+        
+        .main-title {
+            color: white;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+            margin-bottom: 3rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="container py-5">
+        <div class="row justify-content-center">
+            <div class="col-md-10">
+                <h1 class="text-center main-title mb-5">
+                    <i class="fas fa-terminal me-3"></i>WebShell 管理系统
+                </h1>
+                
+                <div class="row g-4">
+                    <!-- 文件管理卡片 -->
+                    <div class="col-md-6">
+                        <div class="card h-100 text-center p-4">
+                            <div class="card-body">
+                                <i class="fas fa-folder-open feature-icon"></i>
+                                <h3 class="card-title mb-3">文件管理</h3>
+                                <p class="card-text text-muted mb-4">
+                                    浏览、上传、下载、编辑和管理服务器文件。支持创建文件夹、重命名、删除等操作。
+                                </p>
+                                <ul class="list-unstyled text-start mb-4">
+                                    <li><i class="fas fa-check text-success me-2"></i>文件浏览和导航</li>
+                                    <li><i class="fas fa-check text-success me-2"></i>文件上传下载</li>
+                                    <li><i class="fas fa-check text-success me-2"></i>在线编辑器</li>
+                                    <li><i class="fas fa-check text-success me-2"></i>文件操作管理</li>
+                                </ul>
+                                <a href="/files" class="btn btn-custom">
+                                    <i class="fas fa-folder me-2"></i>进入文件管理
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- 终端模拟器卡片 -->
+                    <div class="col-md-6">
+                        <div class="card h-100 text-center p-4">
+                            <div class="card-body">
+                                <i class="fas fa-terminal feature-icon"></i>
+                                <h3 class="card-title mb-3">终端模拟器</h3>
+                                <p class="card-text text-muted mb-4">
+                                    实时交互式终端，支持命令执行、进程管理。提供完整的Shell体验。
+                                </p>
+                                <ul class="list-unstyled text-start mb-4">
+                                    <li><i class="fas fa-check text-success me-2"></i>实时终端交互</li>
+                                    <li><i class="fas fa-check text-success me-2"></i>命令历史记录</li>
+                                    <li><i class="fas fa-check text-success me-2"></i>多终端会话</li>
+                                    <li><i class="fas fa-check text-success me-2"></i>窗口大小调整</li>
+                                </ul>
+                                <a href="/terminal" class="btn btn-custom">
+                                    <i class="fas fa-terminal me-2"></i>进入终端
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 系统信息 -->
+                <div class="row mt-5">
+                    <div class="col-12">
+                        <div class="card">
+                            <div class="card-body text-center">
+                                <h5 class="card-title mb-3">
+                                    <i class="fas fa-info-circle me-2"></i>系统信息
+                                </h5>
+                                <div class="row text-center">
+                                    <div class="col-md-3">
+                                        <i class="fas fa-server text-primary mb-2" style="font-size: 2rem;"></i>
+                                        <p class="mb-0"><strong>服务器</strong></p>
+                                        <small class="text-muted">Flask + SocketIO</small>
+                                    </div>
+                                    <div class="col-md-3">
+                                        <i class="fas fa-shield-alt text-success mb-2" style="font-size: 2rem;"></i>
+                                        <p class="mb-0"><strong>安全</strong></p>
+                                        <small class="text-muted">Token 认证</small>
+                                    </div>
+                                    <div class="col-md-3">
+                                        <i class="fas fa-bolt text-warning mb-2" style="font-size: 2rem;"></i>
+                                        <p class="mb-0"><strong>性能</strong></p>
+                                        <small class="text-muted">实时响应</small>
+                                    </div>
+                                    <div class="col-md-3">
+                                        <i class="fas fa-mobile-alt text-info mb-2" style="font-size: 2rem;"></i>
+                                        <p class="mb-0"><strong>兼容</strong></p>
+                                        <small class="text-muted">移动端适配</small>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+</body>
+</html> 

templates/terminal.html

@@ -0,0 +1,553 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>终端 - WebShell</title>
+    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <style>
+        body {
+            background: #1e1e1e;
+            font-family: 'Cascadia Code', 'Consolas', 'Monaco', monospace;
+            overflow: hidden;
+        }
+        
+        .navbar {
+            background: #2d2d30 !important;
+            border-bottom: 1px solid #3e3e42;
+        }
+        
+        .navbar-brand, .nav-link {
+            color: #cccccc !important;
+        }
+        
+        .navbar-brand:hover, .nav-link:hover {
+            color: #ffffff !important;
+        }
+        
+        .terminal-container {
+            height: calc(100vh - 60px);
+            background: #0c0c0c;
+            border: 1px solid #3e3e42;
+            border-radius: 8px;
+            overflow: hidden;
+            position: relative;
+        }
+        
+        .terminal-header {
+            background: #2d2d30;
+            padding: 8px 16px;
+            border-bottom: 1px solid #3e3e42;
+            display: flex;
+            justify-content: between;
+            align-items: center;
+        }
+        
+        .terminal-title {
+            color: #cccccc;
+            font-size: 14px;
+            font-weight: 500;
+        }
+        
+        .terminal-controls {
+            display: flex;
+            gap: 8px;
+        }
+        
+        .terminal-btn {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            border: none;
+            cursor: pointer;
+        }
+        
+        .btn-close { background: #ff5f56; }
+        .btn-minimize { background: #ffbd2e; }
+        .btn-maximize { background: #27ca3f; }
+        
+        .terminal-output {
+            height: calc(100% - 50px);
+            padding: 16px;
+            overflow-y: auto;
+            font-family: 'Cascadia Code', 'Consolas', 'Monaco', monospace;
+            font-size: 14px;
+            line-height: 1.4;
+            color: #cccccc;
+            background: #0c0c0c;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+        
+        .terminal-input-line {
+            display: flex;
+            align-items: center;
+            padding: 0 16px 16px;
+            background: #0c0c0c;
+            border-top: 1px solid #3e3e42;
+        }
+        
+        .terminal-prompt {
+            color: #569cd6;
+            margin-right: 8px;
+            font-family: 'Cascadia Code', 'Consolas', 'Monaco', monospace;
+            font-size: 14px;
+        }
+        
+        .terminal-input {
+            flex: 1;
+            background: transparent;
+            border: none;
+            color: #cccccc;
+            font-family: 'Cascadia Code', 'Consolas', 'Monaco', monospace;
+            font-size: 14px;
+            outline: none;
+            padding: 4px 0;
+        }
+        
+        .cursor {
+            display: inline-block;
+            width: 2px;
+            height: 18px;
+            background: #cccccc;
+            animation: blink 1s infinite;
+            margin-left: 2px;
+        }
+        
+        @keyframes blink {
+            0%, 50% { opacity: 1; }
+            51%, 100% { opacity: 0; }
+        }
+        
+        .terminal-status {
+            position: absolute;
+            bottom: 8px;
+            right: 16px;
+            background: rgba(45, 45, 48, 0.9);
+            color: #cccccc;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            backdrop-filter: blur(5px);
+        }
+        
+        .status-connected {
+            color: #27ca3f;
+        }
+        
+        .status-disconnected {
+            color: #ff5f56;
+        }
+        
+        .status-connecting {
+            color: #ffbd2e;
+        }
+        
+        /* 滚动条样式 */
+        .terminal-output::-webkit-scrollbar {
+            width: 8px;
+        }
+        
+        .terminal-output::-webkit-scrollbar-track {
+            background: #1e1e1e;
+        }
+        
+        .terminal-output::-webkit-scrollbar-thumb {
+            background: #3e3e42;
+            border-radius: 4px;
+        }
+        
+        .terminal-output::-webkit-scrollbar-thumb:hover {
+            background: #555555;
+        }
+        
+        /* 命令历史下拉 */
+        .history-dropdown {
+            position: absolute;
+            bottom: 60px;
+            left: 16px;
+            right: 16px;
+            background: #2d2d30;
+            border: 1px solid #3e3e42;
+            border-radius: 4px;
+            max-height: 200px;
+            overflow-y: auto;
+            z-index: 1000;
+            display: none;
+        }
+        
+        .history-item {
+            padding: 8px 12px;
+            color: #cccccc;
+            cursor: pointer;
+            border-bottom: 1px solid #3e3e42;
+            font-family: 'Cascadia Code', 'Consolas', 'Monaco', monospace;
+            font-size: 14px;
+        }
+        
+        .history-item:hover {
+            background: #404040;
+        }
+        
+        .history-item:last-child {
+            border-bottom: none;
+        }
+    </style>
+</head>
+<body>
+    <!-- 导航栏 -->
+    <nav class="navbar navbar-expand-lg navbar-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="/">
+                <i class="fas fa-terminal me-2"></i>WebShell 终端
+            </a>
+            <div class="navbar-nav ms-auto">
+                <a class="nav-link" href="/files">
+                    <i class="fas fa-folder me-2"></i>文件管理
+                </a>
+                <a class="nav-link" href="/">
+                    <i class="fas fa-home me-2"></i>主页
+                </a>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container-fluid p-3">
+        <div class="terminal-container">
+            <!-- 终端标题栏 -->
+            <div class="terminal-header">
+                <div class="terminal-controls">
+                    <button class="terminal-btn btn-close" onclick="clearTerminal()"></button>
+                    <button class="terminal-btn btn-minimize" onclick="minimizeTerminal()"></button>
+                    <button class="terminal-btn btn-maximize" onclick="toggleFullscreen()"></button>
+                </div>
+                <div class="terminal-title">
+                    <i class="fas fa-terminal me-2"></i>终端会话
+                </div>
+                <div>
+                    <button class="btn btn-sm btn-outline-light" onclick="newTerminal()">
+                        <i class="fas fa-plus me-1"></i>新建
+                    </button>
+                </div>
+            </div>
+            
+            <!-- 终端输出区域 -->
+            <div class="terminal-output" id="terminalOutput">
+                <div style="color: #569cd6;">WebShell 终端 v1.0</div>
+                <div style="color: #6a9955;">正在连接到服务器...</div>
+                <div style="color: #6a9955;">输入命令开始使用，按 Ctrl+C 可中断当前命令</div>
+                <div style="color: #6a9955;">按 ↑/↓ 键浏览命令历史</div>
+                <br>
+            </div>
+            
+            <!-- 命令输入区域 -->
+            <div class="terminal-input-line">
+                <span class="terminal-prompt" id="terminalPrompt">$</span>
+                <input type="text" class="terminal-input" id="terminalInput" 
+                       placeholder="输入命令..." autocomplete="off" spellcheck="false">
+                <span class="cursor"></span>
+            </div>
+            
+            <!-- 命令历史下拉 -->
+            <div class="history-dropdown" id="historyDropdown"></div>
+            
+            <!-- 连接状态 -->
+            <div class="terminal-status">
+                <span id="connectionStatus" class="status-connecting">
+                    <i class="fas fa-circle me-1"></i>连接中...
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
+    
+    <script>
+        let socket = null;
+        let commandHistory = [];
+        let historyIndex = -1;
+        let isConnected = false;
+        let currentCommand = '';
+        
+        // 页面加载时初始化
+        document.addEventListener('DOMContentLoaded', function() {
+            initializeTerminal();
+            setupEventListeners();
+        });
+        
+        // 初始化终端连接
+        function initializeTerminal() {
+            socket = io();
+            
+            socket.on('connect', function() {
+                updateConnectionStatus('connected');
+                addOutput('已连接到服务器', '#27ca3f');
+                socket.emit('start_terminal');
+            });
+            
+            socket.on('disconnect', function() {
+                updateConnectionStatus('disconnected');
+                addOutput('与服务器断开连接', '#ff5f56');
+            });
+            
+            socket.on('terminal_ready', function() {
+                addOutput('终端已准备就绪', '#6a9955');
+                updatePrompt();
+            });
+            
+            socket.on('terminal_output', function(data) {
+                addOutput(data.data, '#cccccc', false);
+                updatePrompt();
+            });
+            
+            socket.on('error', function(error) {
+                addOutput('错误: ' + error, '#ff5f56');
+            });
+        }
+        
+        // 设置事件监听器
+        function setupEventListeners() {
+            const input = document.getElementById('terminalInput');
+            
+            // 命令输入处理
+            input.addEventListener('keydown', function(e) {
+                switch(e.key) {
+                    case 'Enter':
+                        executeCommand();
+                        break;
+                    case 'ArrowUp':
+                        e.preventDefault();
+                        navigateHistory(-1);
+                        break;
+                    case 'ArrowDown':
+                        e.preventDefault();
+                        navigateHistory(1);
+                        break;
+                    case 'Tab':
+                        e.preventDefault();
+                        // TODO: 实现命令自动补全
+                        break;
+                    case 'Escape':
+                        hideHistoryDropdown();
+                        break;
+                }
+            });
+            
+            // 输入内容变化时
+            input.addEventListener('input', function() {
+                currentCommand = this.value;
+                if (currentCommand.length > 0) {
+                    showMatchingHistory();
+                } else {
+                    hideHistoryDropdown();
+                }
+            });
+            
+            // 点击其他地方时隐藏历史
+            document.addEventListener('click', function(e) {
+                if (!e.target.closest('.history-dropdown') && !e.target.closest('.terminal-input')) {
+                    hideHistoryDropdown();
+                }
+            });
+            
+            // 阻止右键菜单
+            document.addEventListener('contextmenu', function(e) {
+                e.preventDefault();
+            });
+            
+            // 窗口大小变化时调整终端
+            window.addEventListener('resize', function() {
+                if (socket && isConnected) {
+                    const rows = Math.floor(window.innerHeight / 20);
+                    const cols = Math.floor(window.innerWidth / 10);
+                    socket.emit('terminal_resize', {rows: rows, cols: cols});
+                }
+            });
+        }
+        
+        // 执行命令
+        function executeCommand() {
+            const input = document.getElementById('terminalInput');
+            const command = input.value.trim();
+            
+            if (!command) return;
+            
+            // 添加到历史记录
+            if (command !== commandHistory[commandHistory.length - 1]) {
+                commandHistory.push(command);
+                if (commandHistory.length > 100) {
+                    commandHistory.shift();
+                }
+            }
+            historyIndex = -1;
+            hideHistoryDropdown();
+            
+            // 显示命令
+            addOutput(document.getElementById('terminalPrompt').textContent + ' ' + command, '#569cd6');
+            
+            // 发送命令到服务器
+            if (socket && isConnected) {
+                socket.emit('terminal_input', {data: command + '\n'});
+            }
+            
+            // 清空输入
+            input.value = '';
+            currentCommand = '';
+        }
+        
+        // 添加输出
+        function addOutput(text, color = '#cccccc', addNewline = true) {
+            const output = document.getElementById('terminalOutput');
+            const div = document.createElement('div');
+            
+            if (color) {
+                div.style.color = color;
+            }
+            
+            div.textContent = text;
+            if (addNewline && !text.endsWith('\n')) {
+                div.appendChild(document.createElement('br'));
+            }
+            
+            output.appendChild(div);
+            
+            // 自动滚动到底部
+            output.scrollTop = output.scrollHeight;
+        }
+        
+        // 更新连接状态
+        function updateConnectionStatus(status) {
+            const statusElement = document.getElementById('connectionStatus');
+            
+            switch(status) {
+                case 'connected':
+                    statusElement.className = 'status-connected';
+                    statusElement.innerHTML = '<i class="fas fa-circle me-1"></i>已连接';
+                    isConnected = true;
+                    break;
+                case 'disconnected':
+                    statusElement.className = 'status-disconnected';
+                    statusElement.innerHTML = '<i class="fas fa-circle me-1"></i>已断开';
+                    isConnected = false;
+                    break;
+                case 'connecting':
+                    statusElement.className = 'status-connecting';
+                    statusElement.innerHTML = '<i class="fas fa-circle me-1"></i>连接中...';
+                    isConnected = false;
+                    break;
+            }
+        }
+        
+        // 更新提示符
+        function updatePrompt() {
+            // 这里可以根据当前目录等信息更新提示符
+            // 暂时保持简单的 $ 提示符
+        }
+        
+        // 浏览命令历史
+        function navigateHistory(direction) {
+            if (commandHistory.length === 0) return;
+            
+            historyIndex += direction;
+            
+            if (historyIndex < -1) {
+                historyIndex = -1;
+            } else if (historyIndex >= commandHistory.length) {
+                historyIndex = commandHistory.length - 1;
+            }
+            
+            const input = document.getElementById('terminalInput');
+            if (historyIndex === -1) {
+                input.value = currentCommand;
+            } else {
+                input.value = commandHistory[commandHistory.length - 1 - historyIndex];
+            }
+        }
+        
+        // 显示匹配的历史命令
+        function showMatchingHistory() {
+            const dropdown = document.getElementById('historyDropdown');
+            const matching = commandHistory.filter(cmd => 
+                cmd.toLowerCase().includes(currentCommand.toLowerCase())
+            ).slice(-10); // 最多显示10个
+            
+            if (matching.length === 0) {
+                hideHistoryDropdown();
+                return;
+            }
+            
+            dropdown.innerHTML = '';
+            matching.reverse().forEach(cmd => {
+                const item = document.createElement('div');
+                item.className = 'history-item';
+                item.textContent = cmd;
+                item.onclick = function() {
+                    document.getElementById('terminalInput').value = cmd;
+                    hideHistoryDropdown();
+                };
+                dropdown.appendChild(item);
+            });
+            
+            dropdown.style.display = 'block';
+        }
+        
+        // 隐藏历史下拉
+        function hideHistoryDropdown() {
+            document.getElementById('historyDropdown').style.display = 'none';
+        }
+        
+        // 清空终端
+        function clearTerminal() {
+            document.getElementById('terminalOutput').innerHTML = '';
+        }
+        
+        // 最小化终端（模拟）
+        function minimizeTerminal() {
+            const container = document.querySelector('.terminal-container');
+            container.style.height = '60px';
+            setTimeout(() => {
+                container.style.height = 'calc(100vh - 60px)';
+            }, 300);
+        }
+        
+        // 切换全屏
+        function toggleFullscreen() {
+            if (!document.fullscreenElement) {
+                document.documentElement.requestFullscreen();
+            } else {
+                document.exitFullscreen();
+            }
+        }
+        
+        // 新建终端
+        function newTerminal() {
+            if (socket) {
+                socket.emit('start_terminal');
+                addOutput('启动新的终端会话...', '#6a9955');
+            }
+        }
+        
+        // 页面卸载时断开连接
+        window.addEventListener('beforeunload', function() {
+            if (socket) {
+                socket.disconnect();
+            }
+        });
+        
+        // 保持输入框焦点
+        setInterval(function() {
+            const input = document.getElementById('terminalInput');
+            if (document.activeElement !== input) {
+                input.focus();
+            }
+        }, 100);
+        
+        // 初始化时设置焦点
+        setTimeout(function() {
+            document.getElementById('terminalInput').focus();
+        }, 500);
+    </script>
+</body>
+</html>