领导让前端实习生在网页上添加一个长时间不操作锁定电脑的功能

#前情提要

大约一个月前，公司的医疗管理系统终于完工上线。后面一个周一，领导叫大家开会，说后面没有项目进来了，用不了这么多开发人员，原地宣布裁员。再后一周后，花 2000 招了个实习生，工作内容为系统维护。

#工作内容

领导：由于我们工作内容很简单，事情轻松，基本就在页面上加加按钮就行，所以工资相对较少一些，是否接受？

实习生小李：能开实习证明吗？

领导：能的。

实习生小李：好的，谢谢老板。

领导：什么时候能入职？

实习生小李：现在。

#工作来源

医疗系统是一个比较数据敏感的系统，现在医院那边需要添加一个十分钟时间没有在系统进行操作，则锁定电脑的功能，使用者再次使用时，必须输入密码。客户那边在系统对接群里发出需求时，并没有人回复（PS：人都裁完了），然后老板回复到：好的。

#工作安排

领导：小李，我们有个医疗系统，需要添加锁屏功能，你处理一下，两天时间应该没问题吧？

实习生小李：（思索片刻）好的，有代码吗

（4小时之后）

领导：有的，我找下

（第二天10点）

实习生小李：王总，代码找到了没有

（第二天12点）

领导：没代码改不了吗？

实习生小李：（瑟瑟发抖）我试试

（第二天14点）

实习生小李：王总，是那种长时间不操作就锁定系统的功能吗

领导：是的

实习生小李：多久不操作才锁

领导：十分钟，锁了需要输入密码才能使用

实习生小李：但是我们医疗系统没有密码功能

领导：客户电脑有密码啊

实习生小李：是锁电脑系统吗

领导：对

实习生小李：（若有所思）我试试

#实现过程

实习生小李：魔镜魔镜，我们有个医疗系统，需要做一个十分钟不操作电脑，就锁定用户电脑系统的功能，在没有源代码的情况下如何实现？

魔镜：好的，在没有源代码的情况下为医疗系统添加十分钟不操作电脑就锁定用户电脑系统的功能，可以使用 sys-shim 实现。

第一步，创建一个目录例如 medical-system ，目录里有以下两个文件：

• package.json 文件用来配置 sys-shim
• preload.js 用来向医疗系统添加功能

第二步

在 package.json 中编写内容如下

复制{
  "browserArguments": "--disable-web-security --allow-running-insecure-content ",
  "form": {
    "right": "1300",
    "bottom": "800"
  },
  "page": "https://www.baidu.com/"
}

• browserArguments 用来指定浏览器参数，这里配置为允许跨域以方便注入代码
• form 用来控制窗口如何显示，这里表示窗口大小
• page 表示医疗系统的页面

在 preload.js 中编写内容如下

复制new Promise(async function () {
  window.main = await new window.Sys({ log: true })
  
  const TIMEOUT = 0.5 * 60 * 1000;
  
  
  let timeoutId = null;
  
  
  function startInactivityCheck() {
    
    if (timeoutId !== null) {
      clearTimeout(timeoutId);
    }
  
    
    timeoutId = setTimeout(function() {
      
      window.main.native.sys.lock()
    }, TIMEOUT);
  }
  
  
  document.body.addEventListener('click', function() {
    console.log("检测到点击事件，重新开始计时。");
    
    startInactivityCheck();
  });
  
  
  startInactivityCheck();
})

• sys.lock() 方法用于锁定操作系统。

第三步，生成应用程序

复制npx sys-shim pack --input medical-system

运行该命令后，会在当前目录生成一个名为 medical-system.exe 的可执行文件。它封装了医疗系统这个 web 程序，并在里面添加了锁屏功能。

• pack 指定表示打包应用
• --input 参数表示要打包的目录

--input 参数也可以是线上的网页，比如：

复制npx sys-shim pack --input https://www.baidu.com/

即可获取一个可以调用操作系统 api 的 web 应用。

#交付反馈

用户：以前我们还需要进入浏览器输入网址才能进入系统，现在直接在桌面上就能进入，并且还有安全锁屏功能，非常好！

领导：小李干得不错，但没有在规定的时间内完成，但由于客户反馈不错，就不扣你的考核分了。

实习生小李：（不得其解）谢谢老板。

#后记

不知不觉，又到了周五，这是公司技术分享会的时候。当前公司技术人员只有实习生小李，由小李负责技术分享。

宽旷的会议室里，秘书、领导、小李三人面面相觑，小李强忍住尴尬，开始了自己的第一次技术分享：

实习生小李：感谢领导给我的工作机会，在这份工作里，我发现了 sys-shim 这个工具，它可以方便的在已有的 web 页面中添加系统 api，获取调用操作系统层面功能的能力，比如关机、锁屏。

领导：（好奇）那他可以读取电脑上的文件吗？

实习生小李：可以的，它可以直接读取电脑上的文件，例如电脑里面的文档、照片、视频等。

突然领导脸色一黑，看了一眼秘书，并关闭了正在访问的医疗系统，然后在技术分享考核表上写下潦潦草草的几个字：考核分-5。

续集：托领导大福！前端实习生用 vue 随手写了个系统修复工具，日赚 300

#提示

大家可以直接运行这个命令生成 app 体验：

复制npx sys-shim pack --input https://www.baidu.com/

生成后的 app 可以右键解压，看到内部结构。如果遇到问题，可以在这里提交，方便追溯，我会及时解答的。

#参考

• sys-shim 文档
• sys-shim 源码仓库
• 实现细节请参考 electron 和 tauri 都不想用，那就自己写个想用的吧