摘要：本文基于Streamlit框架，整合Pandas、NumPy、Matplotlib等工具，开发了一款集多语言切换、章节化代码管理、实时代码运行、可视化展示、章节/文件搜索、运行结果ZIP导出于一体的Python代码展示系统。该系统彻底解决了数据分析与机器学习学习/教学中环境配置繁琐、代码管理零散、多语言适配不足、运行结果无法留存等核心痛点，界面经过精细化美化，操作便捷、体验流畅，可直接应用于课程教学、自学演示、代码分享等场景，以下详细介绍系统的设计思路、实现方法及界面效果。

一、设计背景

在Python数据分析与机器学习的学习和教学场景中，学习者与教师普遍面临一系列影响效率的痛点，结合实际使用需求，本系统的设计初衷的的是针对性解决这些问题：

• 环境配置门槛高：新手在本地配置Python依赖库、调试数据路径时易出现各类错误，导致代码无法正常运行，大量时间耗费在环境调试上，无法聚焦代码本身的学习与理解。

• 代码管理效率低：课程代码通常按章节拆分存储，本地文件夹查找、翻阅操作繁琐，尤其当章节和文件数量较多时，定位目标代码的成本极高，不利于连贯学习。

• 演示交互体验差：传统教学中，切换代码文件、运行代码、查看输出与图形的步骤繁琐，实时性不足，无法快速呈现代码运行效果，影响教学与学习效率。

• 多语言适配缺失：面向中文、英文、越南语、泰语等多语言用户群体时，界面文本无法灵活切换，导致部分用户使用体验受限，难以满足国际化使用需求。

• 运行结果难留存：代码运行后的标准输出、错误信息及生成的可视化图形，缺乏便捷的导出方式，不便后续回顾、整理学习笔记或分享给他人。

基于以上痛点，本系统以“轻量化、免配置、易操作、多适配、可留存”为核心目标，打造一站式代码展示、运行、可视化、搜索、导出全流程平台，大幅降低学习和教学成本，提升整体使用体验。

二、方法介绍

2.1 核心技术栈

系统采用轻量化、易上手的技术组合，无需复杂前端开发，聚焦核心功能实现，所有技术均为Python生态常用工具，兼容性强、部署便捷，具体技术栈如下：

• Web框架：Streamlit，快速构建数据类Web应用，无需前端知识，专注后端逻辑与交互功能实现，大幅提升开发效率。

• 数据处理：Pandas、NumPy，支撑数据分析类代码的正常运行，负责表格数据读取、数值计算、数据清洗等核心需求。

• 可视化工具：Matplotlib，用于生成各类统计图表，通过自定义配置拦截绘图函数，实现图形的自动捕获与展示。

• 辅助工具：os、tempfile、contextlib等Python内置模块，实现目录扫描、沙箱运行、输出重定向等核心功能；zipfile用于运行结果的ZIP打包导出，datetime用于生成时间戳，确保导出文件唯一性；shutil用于文件复制与临时文件管理。

2.2 核心功能设计

系统围绕“代码管理-搜索定位-数据上传-实时代码运行-结果展示-导出留存”全流程设计，功能覆盖学习、教学的核心需求，具体如下：

• 多语言动态切换：支持中文、英文、越南语、泰语四种语言，界面所有文本（含提示信息、按钮、导航栏）均能实时适配当前选择的语言，满足多语言用户使用需求。

• 章节化代码导航与搜索：自动扫描本地“第X章”格式的文件夹，按章节数字升序排序；新增模糊搜索功能，支持输入章节号、文件名关键词，快速过滤章节和文件，大幅提升查找效率。

• 数据文件上传：支持.xlsx、.csv、.txt等常见数据格式上传，可批量上传多个文件，确保代码运行时的数据依赖需求得到满足，无需手动配置数据路径。

• 沙箱安全运行：通过临时目录创建隔离运行环境，将代码与数据文件复制到临时目录运行，避免污染本地环境；同时重定向标准输出与错误信息，精准捕获运行结果，并将结果存储到会话状态，为导出功能提供支撑。

• 多维度结果展示：采用卡片式设计，分模块展示代码运行的标准输出、错误信息、生成图形，界面清晰直观；错误信息采用专属样式标注，便于快速排查问题；图形自适应页面宽度，展示效果更佳。

• 运行结果导出：支持ZIP格式打包导出，可将运行日志（含文件名、章节、运行时间、标准输出、错误信息）和生成的可视化图形一次性导出，方便结果留存与分享。

• 界面精细化美化：通过自定义CSS实现渐变背景、毛玻璃侧边栏、深色代码块（白色文字）、悬浮卡片、按钮 hover 动画等效果，优化界面视觉体验；同时规范布局间距，提升整体整洁度。

三、代码实现

系统采用模块化设计，核心分为多语言国际化、页面配置与CSS美化、目录扫描与搜索、代码沙箱运行、图形捕获、结果导出六大模块，各模块独立封装、协同工作，以下展示各模块关键代码片段（非完整代码），便于理解核心逻辑：

3.1 多语言国际化模块（核心代码）

定义语言映射字典与完整的多语言翻译表，封装全局翻译函数，实现界面所有文本的动态切换，适配四种语言，确保多语言环境下的使用流畅性：

import streamlit as st

# 语言映射与翻译字典（核心片段）
LANGUAGES = {"zh": "中文", "en": "English", "vi": "Tiếng Việt", "th": "ไทย"}
TRANSLATIONS = {
    "main_title": {"zh": "🐍 Python 数据分析与机器学习示例代码展示系统", "en": "🐍 Python Data Analysis & Machine Learning Code Showcase"},
    "sidebar_search": {"zh": "🔍 搜索章节或文件", "en": "🔍 Search chapter or file"},
    "export_button": {"zh": "💾 导出结果 (ZIP)", "en": "💾 Export Results (ZIP)"}
}

# 全局翻译函数（默认中文）
def get_text(key: str) -> str:
    lang = st.session_state.get("language", "zh")
    return TRANSLATIONS.get(key, {}).get(lang, TRANSLATIONS.get(key, {}).get("zh", key))

3.2 页面配置与CSS美化（核心代码）

配置页面基础参数，初始化会话状态（存储上次运行结果和图形），通过自定义CSS实现界面精细化美化，优化视觉与交互体验：

import streamlit as st

# 页面配置与会话状态初始化
st.set_page_config(page_title="Python 代码展示系统", page_icon="🐍", layout="wide", initial_sidebar_state="expanded")
if "language" not in st.session_state: st.session_state.language = "zh"
if "last_run_output" not in st.session_state: st.session_state.last_run_output = None
if "last_run_images" not in st.session_state: st.session_state.last_run_images = []

# 核心CSS美化
st.markdown("""
<style>
    .stApp {background: linear-gradient(135deg, #f8fafc 0%, #eef2f6 100%);}
    [data-testid="stSidebar"] {background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(2px);}
    .stCodeBlock pre {border-radius: 16px !important; background: #1e2a36 !important; color: #ffffff !important;}
    .stButton > button {background: linear-gradient(105deg, #2c3e50, #3498db); color: white; border: none; border-radius: 40px; transition: all 0.3s ease;}
</style>
""", unsafe_allow_html=True)

# 多语言标题渲染
st.markdown(f'{get_text("main_title")}', unsafe_allow_html=True)

3.3 章节扫描与搜索功能（核心代码）

自动扫描本地章节文件夹，按章节数字排序，实现章节导航；新增模糊搜索功能，支持过滤章节和代码文件，快速定位目标内容：

import os

ROOT_DIR = "."
# 扫描并排序章节文件夹
all_chapters = [d for d in os.listdir(ROOT_DIR) if os.path.isdir(d) and d.startswith("第")]
all_chapters.sort(key=lambda ch: int(ch.split("章")[0].replace("第", "")) if ch.split("章")[0].replace("第", "").isdigit() else 999)

# 侧边栏模糊搜索功能
search_term = st.text_input(get_text("sidebar_search"), placeholder="例如: 第3章 或 linear")
filtered_chapters = [ch for ch in all_chapters if search_term.lower() in ch.lower()] if search_term else all_chapters

# 章节与文件选择
selected_chapter = st.selectbox(get_text("sidebar_select_chapter"), filtered_chapters)
all_py_files = [f for f in os.listdir(selected_chapter) if f.endswith(".py")]
filtered_files = [f for f in all_py_files if search_term.lower() in f.lower()] if search_term else all_py_files

3.4 代码沙箱运行与图形捕获（核心代码）

创建临时目录作为沙箱环境，隔离运行代码，重定向输出与错误信息，捕获Matplotlib生成的图形，并将结果存储到会话状态，为导出功能提供支撑：

import tempfile, contextlib, io, shutil, matplotlib.pyplot as plt, matplotlib

if run_clicked:
    with st.spinner(get_text("running_spinner")):
        with tempfile.TemporaryDirectory() as tmpdir:
            # 复制文件到沙箱环境
            tmp_code_path = os.path.join(tmpdir, selected_file)
            shutil.copy2(file_path, tmp_code_path)
            for uploaded_file in uploaded_files:
                with open(os.path.join(tmpdir, uploaded_file.name), "wb") as f:
                    f.write(uploaded_file.getbuffer())
            
            # 重定向输出与捕获图形
            stdout, stderr = io.StringIO(), io.StringIO()
            original_show, plt.show = plt.show, lambda *a,**k: plt.gcf().savefig(f"plot_{len(image_paths)}.png", bbox_inches="tight") if plt.gcf().get_axes() else None
            matplotlib.use('Agg')
            
            # 执行代码
            exec_globals = {'__name__': '__main__', '__file__': tmp_code_path, 'plt': plt, 'np': np, 'pd': pd}
            orig_cwd = os.getcwd()
            try:
                with contextlib.redirect_stdout(stdout), contextlib.redirect_stderr(stderr):
                    exec(code, exec_globals)
            except Exception as e:
                stderr.write(f"{get_text('execution_error_prefix')}{e}\n")
            finally:
                os.chdir(orig_cwd)
                plt.show = original_show
            
            # 存储运行结果
            st.session_state.last_run_output = {"stdout": stdout.getvalue(), "stderr": stderr.getvalue(), "code_name": selected_file, "chapter": selected_chapter}
            st.session_state.last_run_images = [os.path.join(tmpdir, f) for f in os.listdir(tmpdir) if f.endswith(".png")]

3.5 运行结果导出功能（核心代码）

基于会话状态存储的运行结果和图形，通过zipfile打包成ZIP文件，支持下载，包含运行日志和生成的图形，实现结果留存与分享：

import zipfile, io
from datetime import datetime

if export_clicked and st.session_state.last_run_output:
    export_data = st.session_state.last_run_output
    timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
    zip_buffer = io.BytesIO()
    
    # 打包运行日志与图形
    with zipfile.ZipFile(zip_buffer, "w", zipfile.ZIP_DEFLATED) as zipf:
        zipf.writestr("output_log.txt", f"=== Execution Report ===\nFile: {export_data['code_name']}\nChapter: {export_data['chapter']}\nTime: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}\n\n--- STDOUT ---\n{export_data['stdout']}\n\n--- STDERR ---\n{export_data['stderr']}")
        for i, img in enumerate(st.session_state.last_run_images):
            zipf.write(img, arcname=f"plot_{i+1}.png")
    
    # 提供下载
    st.success(get_text("export_success"))
    st.download_button("📥 下载 ZIP 压缩包", zip_buffer, file_name=f"code_results_{export_data['code_name'].replace('.py','')}_{timestamp}.zip", mime="application/zip")

四、界面展示

系统采用现代化UI设计，布局清晰、交互流畅，经过精细化美化，核心界面涵盖多语言切换、搜索、代码查看、运行、导出等全功能场景，以下预留图片插入位置，便于后续补充实际运行截图，提升文章直观性，建议图片尺寸适配CSDN展示规范（优先1200×600）：

4.1 系统主界面（多语言切换）

展示系统整体布局，包括顶部渐变标题、副标题，侧边栏语言选择器、搜索框、章节导航、文件选择、数据上传区域，主区域文件信息卡片与源码预览入口，清晰呈现多语言适配效果和整体视觉风格。

4.2 侧边栏导航与搜索界面

聚焦侧边栏细节，展示语言选择下拉框、搜索框（含占位提示）、章节导航标题及选择框、代码文件选择框、数据上传区域，体现章节自动排序、搜索过滤、多语言文本适配等核心设计，突出搜索功能的便捷性。

4.3 源代码查看界面

展示代码预览功能，包括三个文件信息卡片（文件名、行数、路径）、源码展开面板，深色代码块搭配白色文字，排版清晰、支持代码高亮；同时展示运行按钮和导出按钮（未运行代码时导出按钮禁用），呈现主区域核心交互元素。

4.4 代码运行结果展示界面

展示代码运行后的输出效果，包括标准输出卡片、错误信息卡片（若有）、可视化图形卡片，卡片式设计搭配悬浮效果，错误信息采用专属红色边框标注，输出文本采用深色背景、白色文字，清晰易读；同时展示导出按钮（已启用），体现结果展示的完整性。

4.5 可视化图形展示界面

展示代码运行过程中生成的Matplotlib图形，图形自适应页面宽度，搭配卡片式边框，清晰呈现数据可视化效果，支持多幅图形依次展示，体现图形捕获功能的稳定性和展示效果。

4.6 搜索功能演示界面

展示搜索功能的实际效果，输入搜索关键词（如“第3章”“linear”），侧边栏章节和文件列表自动过滤，呈现匹配结果，直观体现搜索功能对代码查找效率的提升。

4.7 结果导出与下载界面

展示导出功能的操作流程，点击导出按钮后，显示导出成功提示和ZIP文件下载按钮，清晰呈现导出文件名称（含时间戳），体现结果导出的便捷性和实用性。

总结

本系统基于Streamlit框架，快速实现了数据分析与机器学习代码的展示、运行、可视化、搜索、导出全流程功能，模块化设计降低了系统扩展难度，多语言适配、搜索功能、导出功能的加入大幅提升了使用体验，精细化CSS美化让界面更具质感。

系统无需复杂环境配置，可直接运行，完美解决了学习、教学中环境调试繁琐、代码查找不便、结果难以留存等核心痛点，适用于课程教学、自学演示、代码分享等多种场景。

如果需要完整代码、环境配置教程或界面截图拍摄指导，可在评论区留言交流。