本贴原文在：从零搭建一个Web文件管理器 + 终端：一次完整的折腾记录 – Slingerspir的博客
背景：同学给了我一台Ubuntu 22.04服务器的权限，只有一个简陋的PHP文件管理器入口。我想把它变成一个真正可用的远程管理工具。
一、起点：一个能用就行的文件管理器
同学发给我一个链接，说“这个服务器你随便玩”。打开一看，是一个单页面的PHP文件管理器：
能看目录
能上传下载
能删除重命名
界面纯白，没有样式
每次操作都要刷新整个页面
说白了就是一个赤裸裸的PHP脚本，功能都有，但用起来不太舒服。
当时的想法很简单：把界面弄好看点，把操作流程理顺，加一些必要的功能。
二、第一次改造：告别页面刷新
原始的版本每次操作都要刷新整个页面，体验不太好。我先加上了AJAX，让新建文件夹、删除、重命名这些操作可以在后台静默完成，不用等页面重载。
然后重新设计了界面，参考了一些后台管理系统的样式，把导航栏、侧边栏、文件列表区划分清楚。用CSS变量统一了配色，加了圆角和阴影效果。
改完之后，至少看起来像个正经工具了。
三、加功能：在线编辑器
文件管理器只能看文件列表是不够的，得能改内容。
我加了一个在线编辑器，用代码登录后可见显示文件内容，保存时通过AJAX回写服务器。顺便集成了Highlight.js，代码看起来有颜色了。
支持的文件类型包括常见的文本文件、脚本、配置文件等。对于图片和视频，直接调用浏览器预览。还做了文件大小的判断，太大的文件不让编辑，防止浏览器卡死。
四、解压和压缩：处理批量文件
服务器上经常有ZIP包需要解压，或者要把一堆文件打包带走。
PHP内置了代码登录后可见，解压和压缩都不算复杂。我加了冲突检测：如果解压时文件已存在，弹窗让用户选择是覆盖、跳过还是重命名。
压缩功能支持选中多个文件或文件夹，打包成ZIP后自动下载。整个过程在后台完成，不用等页面刷新。
五、关键一步：加上终端
文件管理器用顺了之后，我开始想：能不能在浏览器里直接执行系统命令？
PHP有代码登录后可见和代码登录后可见，执行命令并不难。难点在于交互体验，怎么让网页里的终端用起来像真的终端？
我参考了一些开源Web Terminal的实现，决定用最简单的方案：一个输入框，输入命令，AJAX发送到后端，返回结果显示在输出区。
第一版出来之后，效果比预想的好。虽然比不上SSH，但已经能执行常用命令了。代码登录后可见能看到彩色输出，代码登录后可见能读取文件内容，代码登录后可见能看进程列表。
六、解决目录持久化问题
第一个版本有个毛病：每次执行完代码登录后可见，下次执行命令又回到了根目录。
原因是每次AJAX请求都是独立的进程，代码登录后可见只影响当前进程。
解决办法是用代码登录后可见保存当前目录，每次执行命令前先代码登录后可见到保存的路径。这样一来，代码登录后可见就有了真正的效果，代码登录后可见也能正确显示。多级目录代码登录后可见也能正常工作了。
七、优化交互细节
为了让终端更像终端，我陆续加了一些小功能：
这些细节加在一起，体验提升了不少。
八、文件管理器 + 终端联动
有了终端之后，文件管理器和终端可以配合使用：
这种联动让工作效率提升了很多，不用在两个工具之间来回切换。
九、UI迭代：从简陋到顺眼
最初的文件管理器界面真的很简陋，就是白底黑字加表格。后来我花了不少时间在样式上：
用代码登录后可见和代码登录后可见两种字体，兼顾美观和代码可读性
暗色主题，长时间看着不累
文件类型用不同的SVG图标区分，文件夹、图片、压缩包都有对应的图标
操作按钮用颜色区分功能，绿色是下载，红色是删除，蓝色是主要操作
响应式设计，手机上也基本能用
终端的UI参考了macOS的终端样式，顶部有红黄绿三个圆点，状态栏显示用户、主机、路径和时间，输入行有光标闪烁效果。
十、两个工具合二为一
文件管理器和终端是两个独立的页面，但通过导航栏可以快速切换：
代码登录后可见 ↔ 代码登录后可见
文件管理器负责日常的文件操作，终端负责执行命令。两个页面共享同一个认证体系，登录一次就能用所有功能。
十一、被禁函数的绕过
查看代码登录后可见发现服务器禁用了代码登录后可见、代码登录后可见、代码登录后可见等函数，但代码登录后可见和代码登录后可见还能用。
代码登录后可见不支持交互式命令，但对于非交互式的系统管理来说已经够用了。大部分操作，比如查看日志、修改配置、管理文件，都可以用非交互的方式完成。
十二、几个技术细节
单文件架构
整个工具就是一个PHP文件。方便部署，上传就能用，不需要配置数据库或安装依赖。
路径安全处理
为了防止路径遍历攻击，代码登录后可见函数会过滤代码登录后可见和代码登录后可见，限制访问范围在网站根目录内。
文件上传处理
支持多文件上传，有冲突检测和覆盖选项。上传失败时会给出具体的错误原因。
终端执行原理
每次命令执行都是一个独立的进程，通过代码登录后可见获取标准输出和标准错误，合并后返回给前端。
十三、真正好用的地方
零依赖：就一个PHP文件，复制到服务器就能用
浏览器访问：不需要SSH客户端，不需要配置端口
功能完整：文件管理 + 终端执行
持续改进：每次用的时候发现哪里不顺，顺手就改了
十四、总结
这次折腾的本质是：在一个受限的环境里，用有限的工具组合出一个可用的Web Shell。
整个过程不是从零开始写一个完整的项目，而是基于一个已有的小工具，一步步往上加功能、优化体验。每一步的改动都不大，但累积起来效果很明显。
最终的结果是一个几百行的PHP文件，同时实现了文件管理和远程终端的功能。对于个人使用或者内部管理来说，这种简单粗暴的方案往往是最有效的。
如果你也在类似的环境里工作，这种思路值得参考——不用追求完美，够用就行，慢慢迭代。
如果你想要代码，请访问：
https://1818467120.share.123pan.cn/123pan/tMAhjv-u9HkA
