简体中文 | English
适用版本：2.1
一个个人自用的PC软件监视与监督程序
由于作者本人时常愧疚于对游戏的沉迷，又苦于市面上难以找到能够限制PC端应用运行时间的软件，因此作者在2024年1月大学的第一个寒假开始开发本软件，跨越接近半年的时间终于有了一个勉强过得去的界面和功能，现发布到Github作为纪念。
此软件为新手制作，是作者第一个有着较大规模的，使用js开发的，使用前端技术结合Electron开发图形化界面的，使用MySQL数据库的，使用json作为配置文件的项目。界面、功能简陋，望如果有看到的大佬轻喷。当然如果愿意花费您宝贵的时间友好的提出意见，我也十分欢迎（真的有人提吗）
本程序主要包含两大功能：监视与展示应用运行时间和限制特定应用（设定为游戏）的运行时间，具体见下：
当本程序存在于后台时，可以监测设定需要监测应用的运行时间，并使用图形化的界面展示。
当需要限制特定应用的运行时间时，可以从本程序的“游戏启动器”中启动。
设定好预计的运行时间后，程序会在即将到达预计时间时弹出提醒，并在设定时间强制结束应用。
本程序提供了中途延长时间的选项，当然，你也可以在一开始就放弃这个权力。
由于个人能力以及时间问题，本程序并未实现开箱即用的功能，安装需要一些额外的配置，具体见下：
-
首先确保你的设备安装上了MySQL，本程序开发环境MySQL的版本为8.3.0，不保证其它版本的兼容性。
如果你的设备上没有安装MySQL，可以在SQL官网下载社区版，具体如何安装MySQL请参考网上的文章。例如MySQL数据库下载及安装教程（最最新版）-CSDN博客
-
安装完成后点击本程序的安装包，按照提示完成安装即可。
-
安装完后第一次打开应用，可能会出现
找不到config.json的报错，这是正常现象，再次打开应用即可（汗） -
第一次运行本程序，由于没有配置本地SQL服务器的连接信息，会弹出以下窗口：
点击“打开配置文件”后，会使用系统记事本打开配置文件：
修改其中的SQLUser，SQLPassword为本地SQL服务器的信息（安装MySQL时应该已经输入），同时也可以修改DATABASE_NAME为本地已存在的数据库名（注意需要为空数据库，否则不保证程序正常运行），或者其它你期望的名称，
保存后重启本程序，如果弹出以下窗口：
请检查配置文件以上信息是否已经正确设置
重启后，如果配置文件中的DATABASE_NAME没有被创建，会弹出以下窗口：
你可以选择再次修改配置文件，也可以直接点击“创建数据库”。
-
当数据库能够正常读取后，应该就可以正常使用本软件了。
本程序启动后的第一页，为游戏启动器，第一次打开可能是这样的场景：
如提示所说，现在还没有游戏可以启动，等我们后续设置时再进行说明
页面左边有一个“小蓝条”，鼠标悬浮在其上可以展开导航栏。
窗口拉宽时导航栏会自动展开
鼠标轻轻向下滚动，或者点击刚刚提到的导航栏，来到第二页：仪表盘。在这里你可以查看监视器的信息。
再向下滑动来到运行时间展示页，在这里可以查看所有已监视应用近7天的运行时间以及当日运行时段，
当然现在还没有监视任何应用，所以这里还什么都没有。
尝试将窗口拉宽，你会看到左边出现了一个侧栏，上面有一个添加应用的按钮：
点击后来到添加应用界面
输入你想监视的应用的名称，应用类别（自定，但是只有为Game时才能进入游戏启动器界面），应用代表颜色（自定），以及应用图标的Base64编码（需要自己获取），然后点击确认。
现在你添加了本程序第一个监视的应用，不出意外的话你应该能看到后面的面板出现了一个新的应用。同时你可能会看到一个监视器退出的错误消息，请忽略它。
如果监视器确实退出了，请在仪表盘页右键本程序LOGO样式的监视器状态切换按钮来重启监视器。重启大部分情况下都可以成功，如果无法重启，请直接重新启动本应用。
如法炮制，你可以添加更多的应用。如果你想改变某个应用的信息，请点击该应用的图标，在弹出的界面中右键应用信息，点击编辑，就可以修改应用信息了。
如果你想要将应用添加到游戏启动器，请将应用的类别设置为Game，并在弹出的Path属性中填上该应用的url，可以是文件路径，也可以是例如steam://rungameid/00000这样的url路径（在应用快捷方式属性中可以找到）。
以上，你现在可以使用本程序的基本功能了，如果想了解更多用法，请参考下面的内容。
-
软件启动时的第一个页面。
点击任意游戏后会弹出启动界面：
在这里可以设定游戏的预计使用时间，并设置是否可以中途延长。
点击启动按钮后启动游戏并开始计时。
在到达预计时间前5分钟会弹出提示，此时可以选择不再限制或者延长10分钟。
如果之前设置不允许延长的话就会……
到达设定时间后，理论上会弹出提示框提示游戏时间已到，关闭提示框后你的游戏会被关闭，如果没有关闭的话…………至少你知道到时间了，靠你自觉喽😅
由于暂时无法得知设备上是否存在游戏，所以添加或删除列表中的游戏需要右键在配置文件中进行操作，等我后续优化（）
-
当软件启动时，监视器便会自动在后台运行，你可以在本程序的第二页中查看监视器的信息。
你可以根据上部的监视器状态切换按钮来判断监视器是否正在运行，点击该按钮可以切换监视器的运行状态。
你还可以查看当前正在运行的应用，他们显示在监视器状态切换按钮的下方
（不要在乎右上角的“已监视应用”，这个功能暂时还未实现，咕咕咕。）
看到右边边界的黑色条状物了吗？点击它，你可以查看监视器的后台界面：
你可以在这里执行一些高级的操作，在下方输入框中输入
help后可以查看命令帮助。当然除下方教程中提到的命令外不建议进行操作。右上角有一个深色模式切换按钮，可以用来手动切换深色模式，当然你也可以在设置里面设置跟随系统设置。
-
在本程序的第三页，你可以查看所有已监视应用近7天的运行时间以及当日运行时段：
鼠标悬浮在对应的使用时间块上时，该块附近会展示当前时间块代表的具体运行时间。
点击应用图标，可以进入该应用的详细展示页，在这里可以查看当前应用最近一段时间的使用情况，也可以查看并编辑应用属性：
-
可以在这里调整应用设置，例如开机自启，跟随系统深色模式，以及数据库相关设置。
咕咕咕
Javascript, Typescript, Nodejs,Electron, React, TailwindCSS, MySQL
Module方面还使用到了：
Nodejs相关：child_process, jQuery(小部分使用), less, jtest
React相关: create-react-app, Echarts-for-React, HeadlessUI, React-Beautiful-dnd
Electron相关: Electron-builder, Electron-packager, Electron-forge
监视进程在寒假时使用C#写成，基本原理极其简单，即不断使用Process.GetProcessesByName循环判断进程是否存在，再据此更新数据库数据。
而在本项目中为了衔接使用child_process.spawn将C#控制台应用作为子进程启动
为了降低进程通讯成本，数据展示方面使用nodejs再次查询数据并使用图形化界面进行展示。
配置文件方面使用了json，利用js自带的JSON.parse(), JSON.stringify()进行数据转换。
深色模式和响应式设计使用了tailwindcss提供的框架。
进程间通讯，通知和对话框使用了Electron提供的api。
打包方面尝试了Electron-packager和Electron-forge，但只有Electron-builder能较快打包并和React完美兼容
关于打包有不少总结具体见下
代码测试方面还不熟悉没有搞多少，现在能用先用着了（）
关于Electron主进程的调试，参考官方文档
main.js：
- 注意sql的module似乎有不少版本，这个版本使用的是mysql，另外还有sql2，注意区分。
- 注意query的回调函数特别麻烦…………如果需要同步执行学会用Promise或者用sql2
- 注意不能使用
import，报错Cannot use import outside of moudle
Web相关：