求助：开发支持文件操作的浏览器端Python IDLE实现方案

一、完整实现代码 #

以下是一个完全独立的HTML文件，整合了所有需求功能，无需后端服务：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Browser Python IDLE</title>
    <style>
        .container {
            display: flex;
            gap: 10px;
            padding: 10px;
            flex-wrap: wrap;
        }
        .panel {
            flex: 1;
            min-width: 300px;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 4px;
        }
        textarea {
            width: 100%;
            height: 200px;
            margin-bottom: 10px;
            font-family: monospace;
        }
        #file-list {
            list-style: none;
            padding: 0;
            max-height: 150px;
            overflow-y: auto;
            border: 1px solid #eee;
            padding: 5px;
            margin-bottom: 10px;
        }
        #file-list li {
            padding: 5px;
            cursor: pointer;
            border-bottom: 1px solid #eee;
            font-family: monospace;
        }
        #file-list li:hover {
            background-color: #f5f5f5;
        }
        #terminal-output {
            background-color: #2d2d2d;
            color: #f0f0f0;
            padding: 10px;
            height: 200px;
            overflow-y: auto;
            margin-bottom: 10px;
            white-space: pre-wrap;
            font-family: monospace;
        }
        .btn-group {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
        }
        button {
            padding: 4px 8px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 文件操作区 -->
        <div class="panel">
            <h3>文件管理</h3>
            <input type="file" id="file-upload" multiple>
            <div class="btn-group">
                <button onclick="brython_run('save_file()')">保存当前文件</button>
                <button onclick="brython_run('clear_editor()')">清空编辑器</button>
            </div>
            <ul id="file-list"></ul>
            <input type="text" id="new-filename" placeholder="新文件名（如test.py）">
            <button onclick="brython_run('create_new_file()')">创建新文件</button>
        </div>

        <!-- 代码编辑区 -->
        <div class="panel">
            <h3>代码编辑</h3>
            <textarea id="code-editor" placeholder="输入Python代码..."></textarea>
            <div class="btn-group">
                <button onclick="brython_run('run_current_code()')">运行当前代码</button>
                <button onclick="brython_run('run_selected_file()')">运行选中文件</button>
            </div>
        </div>

        <!-- 交互式终端 -->
        <div class="panel">
            <h3>交互式终端</h3>
            <div id="terminal-output"></div>
            <input type="text" id="terminal-input" placeholder="输入Python代码，按回车执行">
            <button onclick="brython_run('run_terminal_code()')">执行</button>
        </div>
    </div>

    <!-- 导入Brython核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/brython@3.12.0/brython.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/brython@3.12.0/brython_stdlib.js"></script>
    <script>
        window.onload = function() {
            brython(1);
        };
    </script>

    <script type="text/python">
        from browser import document, window, alert, prompt
        import sys
        from io import StringIO
        import random
        import os
        import datetime
        import time
        import pickle

        // 内存文件系统，模拟本地文件存储
        file_system = {}
        current_selected_file = None

        // 重定向输出到终端
        class TerminalOutput(StringIO):
            def write(self, s):
                super().write(s)
                term_output = document['terminal-output']
                term_output.text += s
                term_output.scrollTop = term_output.scrollHeight

        sys.stdout = TerminalOutput()
        sys.stderr = TerminalOutput()

        // 重写input函数，替换为浏览器prompt
        def custom_input(prompt_text=''):
            return prompt(prompt_text)

        __builtins__.input = custom_input

        // 文件上传处理
        def handle_file_upload(event):
            files = event.target.files
            for file in files:
                reader = window.FileReader.new()
                reader.onload = lambda e, f=file: load_file_content(e, f)
                reader.readAsText(file)

        def load_file_content(event, file):
            filename = file.name
            content = event.target.result
            file_system[filename] = content
            update_file_list()

        document['file-upload'].bind('change', handle_file_upload)

        // 更新文件列表
        def update_file_list():
            file_list = document['file-list']
            file_list.innerHTML = ''
            for filename in sorted(file_system.keys()):
                li = document.createElement('li')
                li.text = filename
                li.bind('click', lambda e, f=filename: select_target_file(f))
                file_list.appendChild(li)

        // 选中文件并加载到编辑器
        def select_target_file(filename):
            global current_selected_file
            current_selected_file = filename
            document['code-editor'].value = file_system[filename]

        // 创建新文件
        def create_new_file():
            filename = document['new-filename'].value.strip()
            if not filename:
                alert('请输入文件名')
                return
            if filename in file_system:
                alert('该文件名已存在')
                return
            file_system[filename] = ''
            current_selected_file = filename
            document['code-editor'].value = ''
            update_file_list()
            document['new-filename'].value = ''

        // 保存当前编辑的文件
        def save_file():
            if not current_selected_file:
                alert('请先选中或创建一个文件')
                return
            content = document['code-editor'].value
            file_system[current_selected_file] = content
            alert('文件已保存')

        // 清空编辑器
        def clear_editor():
            document['code-editor'].value = ''
            current_selected_file = None

        // 运行当前编辑器中的代码
        def run_current_code():
            code = document['code-editor'].value.strip()
            if not code:
                alert('请输入代码')
                return
            document['terminal-output'].text = ''
            try:
                exec(code, globals())
            except Exception as e:
                print(f"执行错误: {type(e).__name__}: {e}")

        // 运行选中的文件
        def run_selected_file():
            if not current_selected_file:
                alert('请先选中一个文件')
                return
            code = file_system[current_selected_file]
            document['terminal-output'].text = ''
            try:
                exec(code, globals())
            except Exception as e:
                print(f"执行错误: {type(e).__name__}: {e}")

        // 交互式终端执行代码
        def run_terminal_code():
            code = document['terminal-input'].value.strip()
            if not code:
                return
            term_output = document['terminal-output']
            term_output.text += f">>> {code}\n"
            try:
                // 优先尝试表达式求值
                result = eval(code, globals())
                if result is not None:
                    print(result)
            except SyntaxError:
                // 语法错误则尝试执行语句
                try:
                    exec(code, globals())
                except Exception as e:
                    print(f"错误: {type(e).__name__}: {e}")
            except Exception as e:
                print(f"错误: {type(e).__name__}: {e}")
            document['terminal-input'].value = ''

        // 绑定终端输入回车事件
        document['terminal-input'].bind('keypress', lambda e: run_terminal_code() if e.keyCode == 13 else None)

        // 解决runCodeWithFiles调用问题（如需使用brython-runner）
        // 取消下方注释并添加brython-runner脚本引用即可启用
        # from brython_runner import runCodeWithFiles
        # def run_code_with_files_demo():
        #     # 构造文件字典
        #     files = {
        #         "utils.py": "def add(a,b): return a+b",
        #         "data.txt": "hello world"
        #     }
        #     # 主执行代码
        #     main_code = "import utils\nprint(utils.add(2,3))\nwith open('data.txt','r') as f: print(f.read())"
        #     # 调用方法
        #     runCodeWithFiles(
        #         main_code,
        #         files,
        #         stdout_handler=lambda s: print(s),
        #         stderr_handler=lambda s: print(s)
        #     )
    </script>
</body>
</html>

二、关键功能说明 #

1. 文件操作实现 #

• 上传文件：通过input[type=file]读取本地文件，存入内存字典file_system模拟文件系统
• 查看/编辑：点击文件列表项，自动将内容加载到编辑器，编辑后可保存回内存
• 创建新文件：输入文件名即可创建空文件，自动选中并加载到编辑器
• 运行文件：直接执行选中文件的代码，输出实时显示在终端

2. runCodeWithFiles调用问题解决 #

若需使用brython-runner的runCodeWithFiles方法，需注意：

• 必须先在HTML中添加brython-runner的脚本引用
• 参数格式严格遵循：runCodeWithFiles(main_code, files_dict, stdout_handler, stderr_handler)
  • main_code：主执行代码（如导入文件的语句）
  • files_dict：键为文件名、值为文件内容的字典
  • stdout_handler：处理标准输出的回调函数
  • stderr_handler：处理错误输出的回调函数
    示例代码已在Python脚本中注释，取消注释并添加依赖即可使用。

3. 交互式终端与stdin处理 #

• 重写input()函数，用浏览器原生prompt获取输入，无需依赖外部stdin-hanger工具
• 终端支持单行表达式求值（自动输出结果）和多行语句执行
• stdout/stderr完全重定向到终端区域，实时显示输出内容

4. 指定标准库支持 #

Brython原生支持以下模块的完整功能：

• random：随机数生成、随机选择等
• os：浏览器环境下的路径操作、环境变量模拟等
• datetime/time：日期时间解析、格式化、计时等
• pickle：对象序列化与反序列化

三、使用注意事项 #

• 所有代码完全在浏览器端运行，无需后端服务，符合HTML独立要求
• 内存文件系统仅在会话期间有效，刷新页面后文件会丢失（如需持久化可结合localStorage扩展）
• 如需更复杂的终端交互，可自定义输入组件替代prompt，提升用户体验

内容的提问来源于stack exchange，提问作者Aleš Žiberna