接上文[领导让前端实习生在网页上添加一个长时间不操作锁定电脑的功能](https://juejin.cn/post/7373831659470880806) ## 前情提要上周刚隐隐约约听到王总说什么景点好玩，这周王总和秘书都不在公司，办公室显得格外空旷。实习生小李手撑着脑袋，注视着电脑屏幕，在已打开的 excel 任务列表和摸鱼之间，仿佛陷入深思。突然任务栏的微信图标闪动，小李欣喜：难道是小芳回我消息了？可是当鼠标滑到微信图标上时，却发现是领导的消息：领导：小李，杨秘书的电脑连不上打印机了，工资券打印不出来，你看下能不能处理一下？实习生小李：我看看（然后打开百度搜索“电脑连不上打印机了怎么处理”，好像方案还挺多的，下载一个修复工具即可）。实习生小李：王总我看有个叫“XXX”的修复工具，您下载试试看是否能用？领导：网上那些工具我不放心，点击高速下载完成后，打开却安装了一堆`贪玩难约`和很多安全管家。要不你开发一个吧，你的技术可以的！今天应该能弄好吧？实习生小李：我试试（哇瑟，领导夸我技术可以，感觉快要加薪了\~）。 ## 分析已知功能经过了半天时间的分析，分析结果是不知道从哪里开始分析。不过根据小学老师讲过的`天下文章一大抄`原理，先下载别人的研究看看。于是小李就下载了一个名为`牛哄哄修复工具`的工具安装，打开后界面如下： ![image-1.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e46f5f943a244b9aac41f40b6468e118~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=885&h=674&s=170365&e=png&b=80807f) 小李注意到：软件的上方有一个登录和开通 vip 的功能，是熟悉的感觉。根据界面元素是操作体验得到以下步骤： * 该软件点击扫描后，显示扫描过程和错误项 * 点击开始修复时，需要登录付费，可单次付费和月份和永久付费，分别为当然，由于小李并没有钱，所以付费内容并没有得以观看。界面上还有一些其他元素，例如客服远程协助、以及一个使用远程。点击使用教程，内容如下： > 如果使用修复工具后依旧报错，可以按以下方案操作一下： > 首先打开cmd命令，点击“开始”按钮，点击“运行”，输入cmd，打开命令窗口 > 打开cmd命令之后，把这一段话复制到cmd命令中for %i in (%windir%\system32\*.dll) do regsvr32.exe /s %ifor %i in (%windir%\system32.ocx) do regsvr32.exe /s %i其中的文字不要进行任何修改。 > 复制完成后按回车键运行，运行时间有些长，请耐心等待。注意：以上代码在运行过程中切勿关闭运行窗口，以免造成数据丢失。可以想像该软件： * 要先交钱才能尝试修复系统， * 交了钱也不一定能自动修复成功， * 如果修复不成功，你可以选择当智商税或找客服， * 好不容易找到客服，客服也相当于先付费后修电脑，实在不行还能退你钱也没关系？这个挣钱方式好像没毛病，不过不管了，写代码要紧。 ## 实现已知功能实习生小李：几句话和一个轮播图？这个我熟啊\~ 安装 vue3/vite，打开 vscode 和 chrome devtools 以及 vue devtools 开始造吧。 ### 比如实现首页 ![image-2.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f93f0648c75e4b158ce662dc5187a329~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1711&h=1114&s=347679&e=png&b=fdfdfd) ```html ``` ### 比如实现扫描中界面小李也可以 `http://localhost:5174/#/` 直接放在 exe 容器中，让其看起来像一个原生软件。 ![d893cc901d5a10127978fc152ba6ba8.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/70b5e8e114a2420e8af17554a3c3b818~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1007&h=630&s=41860&e=png&b=ffffff) ```html ``` 以此类推完成了修复工具的几个核心页面：首页、扫描中、扫描结果、修复中、修复结果。 ## 实现系统交互由于小李把页面放在了 exe 容器中，所有页面就获得了 exe 提供的系统交互能力。例如获取要处理的 dll 列表： ```js async getDllList() { const [, getSysDir] = await shim.native.fsys.getSysDir() const [, sysRoot] = await shim.native.string.getenv("SystemRoot") let [, list] = await shim.native.fsys.list(getSysDir, `*?`, `*.dll`) list = list.map(item => `${getSysDir}\\${item}`) const sysDllPath = `${sysRoot}\\system32` let [, sysDllList] = await shim.native.fsys.list(sysDllPath, `*?`, `*.dll`) sysDllList = sysDllList.map(item => `${sysDllPath}\\${item}`) const items = [...list, ...sysDllList] return items }, ``` 可以看到小李通过 `string.getenv()` 获取环境变量，它是系统启动目录，通过 `fsys.getSysDir()` 获取系统文件所在目录，通过 `fsys.list()` 获取所有这两个目录下的所有 dll 文件。以此类推，完成了在 html 页面中调用命令行实现 dll 校验和修复的相关逻辑。 ![Video_20240614152227-1.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c7ce9a06539442aea738ec3659351130~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1324&h=844&s=1842657&e=gif&f=148&b=25241f) ## 用户测试过程实习生小李：您好王总，修复工具我已经做好发给您了，你看下可以不。领导：还是不行。实习生小李：有提示什么错误吗？领导：在忙，你先在你那边弄好再发给我。实习生小李：好吧我再看看。于是，小李走上了破坏自己的电脑系统文件，准备系统修复效果。在系统文件删除过程中，电脑界面突然变成蓝色，重新启动后还是一样的结果： ![image-3.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f5ebec8d292f4518a3a0264b3d318a33~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1353&h=793&s=1243451&e=png&b=178edd) 实习生小李手撑着脑袋，注视着蓝色的电脑屏幕，陷入深思：电脑无法正常启动了，那么如何才能运行我的修复工具呢？ ## 后记直到下班，小李的电脑也没有恢复。他颤微微的向领导发了句消息：“不好意思王总，我电脑坏了，修复工具测试不了，我尽快去电脑店修一下。” 领导许久没有回复，忐忑不安的小李来到电脑店，花了 300 大洋重装了系统。然后开始百度：虚拟机。第二天中午，领导回复了消息：“昨天太晚了就没回复你，昨天你的修复工具没测好，我就不怪你了。但由于昨天工资券打印不了，就只能等下个月再发工资了。” 实习生小李：好的。然后小心翼翼打开某个微信群聊，看到有人需要做一个类似的修复程序。小李眼里有了希望的光： ![image-4.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7a23b4f499644908942725c023a09aed~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=571&h=556&s=78263&e=png&b=f4f4f4) 报价 500，时间 2 周（因为只能在996狭缝中才能有时间做做兼职的这样子）： ![image-5.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7ea9b908d95b48e78d253c19123c08ae~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=470&h=537&s=23328&e=png&b=f5f5f5) 最后群里人只能给 300 块（做一个系统修复软件）。 ![image-6.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7d5ecfb41ced4a33a964ab354e3c0169~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=475&h=314&s=15635&e=png&b=f5f5f5) 300 块成功收账。此时小李的内心十分激动：感谢老板让我做了这个程序，感谢群友让我这个月的生活费有了着落，感谢CCTV。 ## 附 * [修复工具源码](https://github.com/wll8/sys-shim-demo/tree/main/sys-fix) * [exe 容器文档](https://wll8.github.io/sys-shim-doc/)

错误代码修复工具

正在修复电脑异常错误文件，已修复 {{ fixNumEd }} / {{ fixNum }} 个异常项