docs: 记录 home.xpcool.com 建成与无头 Chrome 视口验收坑位
- MEMORY.md：项目索引新增 home.xpcool.com，布局约定补齐 - DEPLOY.md：站点清单新增 home.xpcool.com；工具链坑位新增「无头 Chrome 窗口 500px 下限 / dsf 不改 CSS 视口 / iframe 滚条槽位骗出假结论」 与 CDP setDeviceMetricsOverride 正解 - 2026-09-13.md：追加 home.xpcool.com 建成、移动端溢出误报定位等 4 条
This commit is contained in:
夏犀麟
parent
226fbf901f
commit
0f94521086
@ -1,5 +1,10 @@
|
||||
# 2026-09-13
|
||||
|
||||
2026-09-13 | REQ | **新建 home.xpcool.com（xpcool 服务台）**：9 个自建服务的统一入口 + Uptime Kuma 实时存活状态 + 主机规格；Vite6 + Vue3 + TS(strict) + Pinia + vue-router + UnoCSS + SCSS，视觉按 `design-taste-frontend` 规范（深色仪表盘语言、双主题令牌、单形状系统、零 eyebrow/零 em-dash、bento 栅格 4+2/2+2+2/3+3/3+3）；构建通过（gzip 约 56KB），本地 git 已 init + 首次 commit（47 文件），**待用户加 DNS/证书后部署**
|
||||
2026-09-13 | FIX | 移动端横向溢出「误报」定位：真 390×844 视口实测 `scrollW=390 / overflow=0`，布局本身无溢出；此前截图右边缘被切是**取图假象**——Windows 无头 Chrome 窗口有 500px 下限，且 iframe 滚条槽位让内层 `clientWidth` 变 375，恰好把溢出藏住；改用 CDP `Emulation.setDeviceMetricsOverride` 后结论可靠（详见 DEPLOY.md 工具链坑位）
|
||||
2026-09-13 | CHG | 新增 `home.xpcool.com/scripts/shoot-mobile.mjs`：Node 22 内置 WebSocket 手写极简 CDP 客户端，**零依赖**完成真移动视口测量 + `captureBeyondViewport` 整页截图；`shoot.ps1` 收敛为桌面端并修掉「按 `*.png` 清空 .shots 误删移动端截图」的 bug
|
||||
2026-09-13 | DOC | home.xpcool.com 补齐 `README.md` / `agents.md` / `.workbuddy/memory/CHANGELOG.md`；`.shots` 加入 .gitignore
|
||||
|
||||
2026-09-13 | CHG | 备好 Bark 通知增强（自定义图标/分组/重要警告/图片/角标）：Kuma 官方 provider 不支持这些参数，改为「只读挂载覆盖 `/app/server/notification-providers/bark.js`」实现；素材用 Pillow 手绘（icon/down/up 三张）自托管到 `/data/www/bark-assets/`；**因沙箱连续拦截 SSH，部署改由用户执行 `.workbuddy/tmp/deploy-bark-custom.ps1`，尚未落地**
|
||||
2026-09-13 | FIX | 本机取图脚本踩坑：PIL 波形归一化数值超出画布（v=-6 → 偏移 6×振幅）导致尖峰压到文字上；改为所有波形值控制在 [-1,1] 并加 assert 断言
|
||||
2026-09-13 | CHG | Uptime Kuma 接入 Bark 告警：新增通知渠道「Bark 手机推送」（type 必须写 `Bark` 首字母大写，端点用容器网关 `http://172.17.0.1:8081/<key>`），已关联全部 9 个监控；用临时监控触发真实 DOWN 完成端到端验证（Bark 日志实测收到并返 200）后清理
|
||||
|
||||
@ -32,6 +32,12 @@
|
||||
- **经 `ssh.exe` 执行多行脚本会踩转义坑（2026-09-13 实测）**：把多行 here-string 直接当参数传给 `ssh.exe`，远程 bash 解析到 `(` 等字符会报 `syntax error near unexpected token '('`，**而且报错前的行已经执行了**，导致状态半途而废（证书只搬了一半）。**可靠做法**：本地写 `.sh` 文件（用 `-replace "`r`n","`n"` 强制 LF + `WriteAllText` UTF-8 无 BOM）→ **单独** `scp` 上传 → `ssh "chmod +x /tmp/x.sh && /tmp/x.sh"` 执行。注意 `echo <b64> | base64 -d | bash` 会被 PowerShell 工具安全策略直接拦截（"Spawning a non-PowerShell shell"）。
|
||||
- **多源文件 `scp` 不可靠（2026-09-13 实测）**：一次 `scp a b c d e host:/tmp/` 只落地了其中 2 个，且**没有任何报错**。**每次只 scp 一个文件**；脚本内用 `for` + `[ -f ]` 判断做幂等补齐，避免重复上传。
|
||||
- **远程脚本一律写成幂等**（`if [ -f ]` 判断后再 `mv -f`），因为 SSH 调用可能被沙箱拦截/用户误拒而中断，重跑不能出错。
|
||||
- **无头 Chrome 截图/量视口有三个坑（2026-09-13 实测，做前端移动端验收必看）**：
|
||||
① Windows 下窗口宽度有 **500px 下限**，`--window-size=390` 会被撑到 500；
|
||||
② `--force-device-scale-factor` **只改渲染倍率、不改 CSS 视口宽度**（给 dsf=2 + window 780，拿到的仍是 764 CSS px，不是 390）；
|
||||
③ 用**iframe 凑窄视口**也不可靠——滚动条槽位会让内层 `clientWidth` 少 15px（390 → 375），恰好把 390px 下真实存在的横向溢出「藏」起来，导致误判「无溢出」。
|
||||
**正解**：走 CDP `Emulation.setDeviceMetricsOverride`（`{width:390,height:844,deviceScaleFactor:2,mobile:true}`）。Node 22 自带全局 `WebSocket`，**零依赖**即可手写极简 CDP 客户端。整页截图用 `Page.captureScreenshot{captureBeyondViewport:true}`，布局高度仍保持视口高度、不会把 `100dvh` 的 hero 拉长。参考实现：`home.xpcool.com/scripts/shoot-mobile.mjs`。
|
||||
另：**无头 Chrome 复用 profile 会导致截到旧产物**，每次截图前删掉 `$env:TEMP\wb_chrome_*`；**`--dump-dom` 里搜标记串会撞到脚本源码自身**（把结果写进 `<title>` 再正则取 `<title>` 才稳）。
|
||||
|
||||
## 站点与容器清单（2026-09-13 核对）
|
||||
> 服务器 193.112.118.168，容器均为 `restart unless-stopped`；除特别标注外只监听 `127.0.0.1`，由宿主机 nginx 反代。
|
||||
@ -47,6 +53,7 @@
|
||||
| sub2api.xpcool.com | `sub2api` + postgres + redis | 127.0.0.1:18080 | — |
|
||||
| code.xpcool.com | `code-server` | 127.0.0.1:8080 | 网页版 VS Code |
|
||||
| **status.xpcool.com** | **`uptime-kuma`** | **127.0.0.1:3001** | **服务监控面板（2026-09-13 新增）** |
|
||||
| **home.xpcool.com** | **—（静态）** | **—** | **xpcool 服务台：9 站统一入口 + 存活状态（2026-09-13 建成，待上域名/证书）** |
|
||||
| —（暂无域名） | `bark` | 0.0.0.0:8081 | Bark 推送服务端 |
|
||||
| — | `xpcool-mysql` | 127.0.0.1:3306 | MySQL 8.0（库 `service`） |
|
||||
|
||||
|
||||
@ -19,13 +19,14 @@
|
||||
|
||||
## 工作空间与项目索引
|
||||
- 本仓库 `workbuddy.xpcool.com`（规则+索引+每日日志），远程 `https://git.xpcool.com/xpcool/workbuddy.xpcool.com.git`。
|
||||
- **布局约定**：所有项目与工作空间位于同一父目录下（`<父目录>/workbuddy.xpcool.com`、`admin.xpcool.com`、`service.xpcool.com`、`tool.xpcool.com`），换设备按此布局 clone 即可，索引全部生效。
|
||||
- **布局约定**：所有项目与工作空间位于同一父目录下（`<父目录>/workbuddy.xpcool.com`、`admin.xpcool.com`、`service.xpcool.com`、`tool.xpcool.com`、`home.xpcool.com`），换设备按此布局 clone 即可，索引全部生效。
|
||||
|
||||
| 项目 | 类型 | 变更记录 | 远程仓库 |
|
||||
|------|------|---------|---------|
|
||||
| admin.xpcool.com | Vue 管理后台前端 | `../admin.xpcool.com/.workbuddy/memory/CHANGELOG.md` | git.xpcool.com/xpcool/admin.xpcool.com.git |
|
||||
| service.xpcool.com | Go 后端服务 | `../service.xpcool.com/.workbuddy/memory/CHANGELOG.md` | git.xpcool.com/xpcool/service.xpcool.com.git |
|
||||
| tool.xpcool.com | 前端工具站 | `../tool.xpcool.com/.workbuddy/memory/CHANGELOG.md` | git.xpcool.com/xpcool/tool.xpcool.com.git |
|
||||
| home.xpcool.com | 前端服务台（9 站统一入口） | `../home.xpcool.com/.workbuddy/memory/CHANGELOG.md` | 待建（本地 git 已 init/commit） |
|
||||
|
||||
## 记录格式
|
||||
- 倒序、一行一条：`YYYY-MM-DD | 类型 | 一句话摘要`；类型：REQ / CHG / FIX / DOC / CFG / DEP。
|
||||
|
||||
Loading…
Reference in New Issue
Block a user