技术 | 搭建一个视奸猫猫的页面の过程 - 猫猫小站

# 技术 | 搭建一个可以看猫猫在干什么的页面

>  **快速传送门**  
> 展示页地址：[nyan.qd.je/device.html](https://nyan.qd.je/index.php/device.html)

---

## 📌 前情提要

中考完那个暑假，在 B 站看到有 UP 主做了一个实时显示设备状态和当前在干嘛的网页，当时就很感兴趣也想试着做一个。但是由于实力不济一直**咕**到现在。

不过嘛，今年 AI 模型实力有了飞跃，刚好谷歌送了我百万 Token，不用白不用嘛！正好最近想起来了就试着做一下qwq~

---

##  开发工具与技术栈

*  **AI 模型**：`Gemini 3.6 Flash`（2026.07.21 发布）
*  **Python**：`Python 3.12` + `PyQt6` + `Windows C-API (ctypes)` + `PyInstaller`
*  **服务端后端**： `Python 3 (Flask + SQLite + Flask-CORS)`
*  **手机端**：`iPhone 13` + `快捷指令`
*  **博客前端**：`Typecho 1.3.0` + `Cuckoo 主题 (Material Icons + MDUI 框架)`

>  **用时**：这次开发从零起步到完美落地只用了 大约**2 天**时间，编程语言选用了对前端、后端、PC 端（a除了iOS端）都非常友好的 Python。

---

##  第一天：打通全栈——PC 客户端、Serv00 后端与 iOS 自动化

第一天的进展超乎我的意料，只用了大约 6 个小时就把 PC 端的软件和服务器后端给做好了。达到了几乎可以直接用的地步。

### 1. PC 客户端开发与优化

PC 端用 `PyQt6` 编写了一个带图形界面的客户端，支持系统托盘后台静默运行、三模式应用过滤（白名单/黑名单/关闭）以及自定义隐私掩码。

一开始图方便用了 `psutil` 库，在我这台乐色 i5-4200H 的老笔记本上跑结果卡的要命，一看任务管理器占用高达 **10%**。这可真是见鬼了 ~~我这老古董可带不动这样的~~。后来在 AI 建议 ~~主导~~ 下进行了优化：

* 改用了 Windows 原生 C 语言 API（`kernel32`）直接替代 `psutil` 抓前台窗口，查询时间缩短到了 **0.00005 秒**；
* 并且引入窗口变动比对，再加了个“不换窗口不上报”的判断，只有当前台应用发生切换或到达 60 秒心跳时才触发网络上报；
* 引入了 `QThreadPool` 线程池与`requests.Session` 长连接。

> **优化效果**：优化后 CPU 占用从 10% 降到了 **`0.0% ~ 0.1%`** ~~终于是我这种老电脑能带起来的东西了~~

### 2. Serv00 Flask 轻量后端与智能计时

后端部署在 Serv00 免费虚拟主机上，采用 `Flask` + `SQLite`。为了极大地简化客户端逻辑，我们将持续时间（Duration）的计算全塞给后端处理：

* 客户端只管**发送心跳**；
* 后端收到上报后比对状态：如果应用没变，就保持起始时间不变并累加计时；如果切换了应用或模式，就自动重置计时器；
* 同时，针对 iOS 的专注模式做了智能文案拼接（比如睡眠模式就显示：`猫猫在睡觉喵~`、免打扰显示：`猫猫不希望被打扰`）。

### 3. 傻福 iPhone 13 的快捷指令

iPhone 端捣鼓了 2 个多小时。由于 iOS 严格的沙盒机制根本搞不了后台常驻的 `.ipa`，只能退而求其次使用 iOS 原生的“快捷指令 + 自动化”方案。

AI的方案设计了个双向触发机制：**打开 App 时上报 App 名字**，**划掉 App 或锁屏时上报 idle（空闲）**，**开启睡眠/免打扰时上报对应的专注模式**。但是实际上没我想象中那么好。划掉App时显示的idle会变成正在使用“未知应用”。为了避免误会（并且我懒得改了）就没在手机上用到过`idle`这个状态

原本逻辑很清晰，但苹果新版快捷指令那个传参界面改得简直比史还难用，并且AI此刻还没意识到`iOS 26`已经出了还用的是`iOS 18`的逻辑，就非常恼人了。但好在最后通过截图并且告知系统版本算是解决了。

---

##  第二天：HTTPS 支持与 Typecho 嵌入

第二天早起开始修复各种小 BUG，并处理运维与前端嵌入问题。

### 1. Serv00 进程保活与 Crontab 守护

Serv00 这主机有个神奇的特性，就是隔三差五就强制清理后台长运行进程，导致 `server.py` 动不动就暴毙。
（不过还好AI发现了我没被恶心到）

为了解决这个问题，AI写了一个 `keep_alive.sh` 脚本，并在 Serv00 上配置了每分钟执行一次的 Crontab 定时任务，只要发现 Python 进程死了，系统会在 1 分钟内自动给它拉起。

### 2. HTTPS 混合内容与 PHP 代理中转

因为博客申请了SSL证书，并且为了安全（同时也是为了申请萌ICP备案）开启了强制 HTTPS，如果在 HTTPS 页面里用 JS 去请求 HTTP 端口，浏览器会直接弹出 `Mixed Content` 混合内容拦截和 `ERR_SSL_PROTOCOL_ERROR` 错误，当成不安全动作给拦掉。

AI的方案是在 Apache `.htaccess` 里做反向代理，结果 Serv00 的主机禁用了 `mod_proxy` 模块，导致直接报 404 或 403。但是AI最后采用了一个曲线救国的方案：

[原报错痛点] HTTPS 页面 ──拦截──► HTTP:3256 端口
[完美破局线] HTTPS 页面 ────────► PHP cURL 中转 (/api/index.php) ───────► 本地 3256 端口

在网站根目录下建立 `/public_html/api/index.php` 轻量 cURL 中转代理脚本，并在根目录 `.htaccess` 里把 `/api/` 路径排除出 Typecho 的伪静态拦截。这样一来：

* **完全隐藏端口**：API 接口彻底去掉了 `:3256` 端口号；
* **简洁统一路径**：请求直接走 `https://nyan.qd.je/api/status` 和 `https://nyan.qd.je/api/report`；
~~嘛嘛再也不用担心API不雅观了~~
* **证书完美复用**：无缝继承主域名的 SSL 证书，彻底解除了跨域与证书报错！

---

### 3. Typecho Cuckoo 主题の优雅嵌入

* **侧边栏小卡片**：修改了 `includes/sidebar.php`（要不是AI说了我还找不到在这里），在 `Lin_Meow` 个人介绍卡片和最新回复卡片之间，插入了一个符合 Cuckoo 主题毛玻璃风格的“设备状态”小卡片，仅展示电脑和手机的在线/离线状态。看起来还挺和谐。
* **独立展示页面**：新建了 `page-device.php` 自定义模板，在 Typecho 后台发布为独立的“视奸猫猫”页面 (`/device.html`)，实现了首页的状态卡片、以及持续时间的实时刷新。

---

### 总结与感悟

总的来说，AI 的发展使以前高不可攀的编程门槛大大下降。配置证书、排查 500/404 报错、优化 C 语言接口调用这些脏活累活，只需要把报错日志喂给 AI ，它就能给出好几种可行的方案，再经过我这只聪明的猫猫稍稍修改调整就能直接用啦。

像我这样啥都不精通的普通猫猫，在现代 AI 的辅助下也能够很好地在一个半天内从零完成一个包含 Windows 客户端、Linux 后端、iOS 自动化与 Typecho 博客集成的完整项目。

> **在能力被 AI 加强的今天，重要的已经不是写出完美无缺的代码，而是那个使你开始行动去启动项目的灵感与冲动。**

PS:由于猫猫缺乏资金，没能用上先进的Agent，不然这些工作会更快并且更省力，因为全是我在浏览器和VS Code里复制粘贴哇！

PPS:现在意识到了curl这个安全漏洞但没办法啦！
将就着用罢，肯定不会有什么信息泄露的 ~~再说了猫猫也没啥值钱的能泄露（）~~