接上文领导让前端实习生在网页上添加一个长时间不操作锁定电脑的功能
前情提要
上周刚隐隐约约听到王总说什么景点好玩，这周王总和秘书都不在公司，办公室显得格外空旷。实习生小李手撑着脑袋，注视着电脑屏幕，在已打开的 excel 任务列表和摸鱼之间，仿佛陷入深思。突然任务栏的微信图标闪动，小李欣喜：难道是小芳回我消息了？可是当鼠标滑到微信图标上时，却发现是领导的消息：
领导：小李，杨秘书的电脑连不上打印机了，工资券打印不出来，你看下能不能处理一下？
实习生小李：我看看（然后打开百度搜索"电脑连不上打印机了怎么处理"，好像方案还挺多的，下载一个修复工具即可）。
实习生小李：王总我看有个叫"XXX"的修复工具，您下载试试看是否能用？
领导：网上那些工具我不放心，点击高速下载完成后，打开却安装了一堆贪玩难约和很多安全管家。要不你开发一个吧，你的技术可以的！今天应该能弄好吧？
实习生小李：我试试（哇瑟，领导夸我技术可以，感觉快要加薪了~）。
分析已知功能
经过了半天时间的分析，分析结果是不知道从哪里开始分析。不过根据小学老师讲过的天下文章一大抄原理，先下载别人的研究看看。
于是小李就下载了一个名为牛哄哄修复工具的工具安装，打开后界面如下：
小李注意到：软件的上方有一个登录和开通 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 开始造吧。
比如实现首页
html
<template>
<div class="error-code-repair-tool flex justify-center items-center h-screen">
<div>
<h1>错误代码修复工具</h1>
<p class="text-#999">专治各种Windows系统错误代码，累计修复数 {{ fixedPc }} 多台电脑</p>
<div class="flex justify-center">
<div class="text-left pl-10">
<strong class="text-lg">你是否被以下问题困扰：</strong>
<ul>
<li>系统关键DLL文件缺失导致软件无法正常启动，错误码为0x000000</li>
<li>Windows 10出现了安全错误或Windows验证产品密钥失败，导致错误码为0x80000**</li>
<li>Windows 10系统更新异常导致共享打印机连接错误，错误码为0x0000011b</li>
<li>C++ Redistributable运行时库未正确安装，导致软件无法启动</li>
<li>Flash插件未安装或未成功加载，导致提示应用程序初始化错误</li>
<li>DirectX库在Windows 10系统下无法加载，导致系统开机时直接报错</li>
<li>系统未正确注册动态链接库（DLL），导致产生错误代码0x8000****</li>
</ul>
</div>
<div class="w-500px">
<swiper
:modules="modules"
:pagination="{ clickable: true }"
:autoplay="true"
>
<swiper-slide v-for="item in swiperList" :key="item">
<img :src="item" alt="">
</swiper-slide>
</swiper>
</div>
</div>
<div class="buttons">
<button class="btn btn-primary" @click="repairErrorCode">一键修复错误代码</button>
<button class="btn" @click="enterManualRepair" v-if="false">进入手动修复</button>
</div>
</div>
</div>
</template>比如实现扫描中界面
小李也可以 http://localhost:5174/#/ 直接放在 exe 容器中，让其看起来像一个原生软件。
html
<ProgressCom
:cur="itemsOkList.length"
:total="items.length"
:list="itemsOkList.slice(0, 500)"
>
<template #title>
<h1 text-2xl>正在修复电脑异常错误文件，已修复 <span text-red-500>{{ fixNumEd }} / {{ fixNum }} </span> 个异常项</h1>
</template>
<template #des>
<p>正在修复错误的DLL资源库...</p>
</template>
<template #logName>
<div class="tip pt-7">日志：</div>
</template>
</ProgressCom>以此类推完成了修复工具的几个核心页面：首页、扫描中、扫描结果、修复中、修复结果。
实现系统交互
由于小李把页面放在了 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 校验和修复的相关逻辑。
用户测试过程
实习生小李：您好王总，修复工具我已经做好发给您了，你看下可以不。
领导：还是不行。
实习生小李：有提示什么错误吗？
领导：在忙，你先在你那边弄好再发给我。
实习生小李：好吧我再看看。
于是，小李走上了破坏自己的电脑系统文件，准备系统修复效果。在系统文件删除过程中，电脑界面突然变成蓝色，重新启动后还是一样的结果：
实习生小李手撑着脑袋，注视着蓝色的电脑屏幕，陷入深思：电脑无法正常启动了，那么如何才能运行我的修复工具呢？
后记
直到下班，小李的电脑也没有恢复。他颤微微的向领导发了句消息："不好意思王总，我电脑坏了，修复工具测试不了，我尽快去电脑店修一下。"
领导许久没有回复，忐忑不安的小李来到电脑店，花了 300 大洋重装了系统。然后开始百度：虚拟机。
第二天中午，领导回复了消息："昨天太晚了就没回复你，昨天你的修复工具没测好，我就不怪你了。但由于昨天工资券打印不了，就只能等下个月再发工资了。"
实习生小李：好的。
然后小心翼翼打开某个微信群聊，看到有人需要做一个类似的修复程序。小李眼里有了希望的光：
报价 500，时间 2 周（因为只能在996狭缝中才能有时间做做兼职的这样子）：
最后群里人只能给 300 块（做一个系统修复软件）。
300 块成功收账。此时小李的内心十分激动：感谢老板让我做了这个程序，感谢群友让我这个月的生活费有了着落，感谢CCTV。