初赛设计方案

Live Code Platform

项目概述

项目目标

打造一个基于 Web 的在线代码编辑与编译平台，实现洛书编译器的浏览器端移植，支持代码即时编译、调试及系统级功能演示，为用户提供便捷的开发环境与系统原理学习场景。

核心价值

借助 WebAssembly 技术提升浏览器端编译性能，突破传统 JavaScript 在高性能计算场景的限制。
通过模块化架构设计，实现编译原理与操作系统核心概念的可视化演示，降低技术学习门槛。

系统设计

整体架构

系统拓扑结构

前端交互层：基于原生 JavaScript 与 HTML 构建用户界面，集成 CodeMirror 编辑器实现代码输入与高亮。
WebAssembly 编译核心：使用 Emscripten 将洛书编译器（C代码）转换为 WebAssembly，实现高效编译。
功能模块层：涵盖编译演示（词法 / 语法分析等）、OS 演示（内存管理 / 线程调度等）等功能。

页面导航设计

导航栏	子模块	功能说明
首页	-	渲染 Markdown 格式的项目说明文档
Live Code	-	跳转在线编辑平台，支持代码
编译演示	词法分析、语法分析、语义分析、代码生成	使用 Markdown 编写实验任务，展示编译全流程
OS 演示	内存管理、文件系统、中断处理、线程调度	使用 Markdown 编写实验任务，可视化操作系统核心机制
辅助功能	切换主题、关于我们	支持深色/浅色模式切换，跳转 GitHub 项目页

在线编辑平台设计

核心功能

代码编辑：集成 CodeMirror，支持行号显示、括号匹配、语法高亮等功能。
实时编译：点击 “运行代码” 按钮，通过 WebAssembly 即时编译并展示结果。
示例代码：内置 “你好世界”“二叉树遍历” 等典型案例，方便用户快速上手。
调试工具：显示内存占用（如mem max: 19.151367 KB）与运行状态。

交互界面

Live Code | 参考手册 | 运行代码 | 清空代码 | 刷新页面 | 示例代码（下拉列表） | 切换主题

技术实现方案

编译技术选型

Emscripten 工具链

核心作用：将洛书编译器的 C/C++ 代码编译为 WebAssembly（.wasm）与 JavaScript（.js）文件。
编译命令：

emcc losu/**/*.c losu/**/**/*.c main.c \ 
-I include -O3 -o editor.m.js \ 
-s WASM=1 -s SINGLE_FILE=1 -s NO_EXIT_RUNTIME=1 \ 
-s MODULARIZE=1 -s EXPORT_NAME="LosuLiveCode" \ 
-s EXPORTED_RUNTIME_METHODS="['ccall']"

WebAssembly 优势

性能对比：相比原生 JavaScript，WebAssembly 可提升 30%~70% 的计算性能，支持密集型编译任务。
兼容性：通过 Emscripten 生成的代码可在主流浏览器（Chrome、Firefox 等）中运行。

前端技术栈

基础框架：原生 JavaScript + HTML5，避免第三方框架带来的性能损耗。
编辑器集成：使用 CodeMirror 实现代码编辑区域，支持主题切换。

功能模块设计

编译原理演示模块

模块	功能说明
词法分析	输出词法单元（Token），高亮显示标识符、关键字等
语法分析	生成语法树，标注语法规则匹配过程
语义分析	检查类型一致性，输出语义错误
代码生成	输出汇编代码或可执行指令

操作系统演示模块

模块	功能说明
内存管理	可视化展示堆 / 栈内存分配、垃圾回收过程。
文件系统	模拟文件读写、目录操作，展示编译器对文件系统的调用。
中断处理	模拟文件读写、目录操作，展示编译器对文件系统的调用。
线程调度	动态展示 CPU 时间片分配、线程优先级调度过程。

工程结构规划

.
├── doc
├── images
├── index.js # 前端启动 JavaScript 脚本
├── LICENSE # MIT
├── losu # 编译器 C 语言源代码
│   └── ...
├── Makefile # 项目构建脚本
├── package.json
├── package-lock.json
├── README.md
├── server # 前端服务端代码
└── www # 前端静态资源
    ├── assets
    ├── error.html
    ├── index.html
    ├── pages
    └── test.html

开发进展与计划

已完成工作

前端基础建设：
- 搭建 CodeMirror 编辑器，支持代码高亮、主题切换。
- 实现前端可视化调试器，显示内存使用情况。
编译核心移植：
- 完成洛书编译器向 WebAssembly 的移植，通过 Emscripten 生成可执行文件。
- 实现 LiveCode 即时编译模块，支持 “Hello, World!” 等示例代码运行。
基础功能开发：
- 撰写部分 Markdown 实验文档，为后续功能扩展奠定基础。

后续开发计划

阶段	目标	具体任务
第一阶段（编译原理）	完善编译流程演示	实现词法分析结果输出与可视化，完成语法分析树的构建与展示，实现语义分析错误提示
第二阶段（操作系统）	实现系统级功能演示	可视化内存布局与分配机制，模拟文件系统操作流程，展示线程调度与中断处理过程

技术创新点

WebAssembly 深度应用：通过 Emscripten 将传统编译器移植到浏览器，突破前端性能瓶颈。
模块化教学场景：将编译原理与操作系统核心概念拆解为独立实验模块，支持分步学习。

决赛设计方案