feat: 完善文字画视觉并新增 PDF 导出

- 调整飞鸟、楼群与标题配色和布局
- 新增 uv + Playwright PDF 导出脚本,四边各留 1em
- 页面标题改为「封面」
This commit is contained in:
rogerwang2008 committed 2026-11-10 21:22:49 +08:00
1 parent 17a224be27
commit 6085fc24d3
8 files changed
+343 -19

No files matched your search

+24 -3
View File
@@ -15,6 +15,9 @@
```
.
├─ index.html # 页面骨架
├─ pyproject.toml # uv 环境与导出依赖
├─ uv.lock # 依赖锁定
├─ scripts/export_pdf.py # PDF 导出脚本
├─ assets/
│ ├─ css/style.css # 布局、字号与各元素配色
│ ├─ js/scene.js # 场景数据与网格渲染
@@ -31,6 +34,24 @@ python -m http.server 8000
# 浏览器访问 http://localhost:8000
```
## 导出 PDF
使用 Playwright(由 uv 管理)导出,页面尺寸为 30em × 46em:28 × 44 格的画面,四周各留恰好 1em。
```bash
uv sync
uv run python scripts/export_pdf.py # 默认 1em = 24px,输出 dist/luori.pdf
uv run python scripts/export_pdf.py --em 16 -o dist/luori-16.pdf
```
脚本优先调用本机 Edge / Chrome;若都未安装,可先下载 Playwright Chromium:
```bash
uv run playwright install chromium
```
导出页为黑底满幅,画面距上、下、左、右边界各 1em;脚本会在导出前校验该边距。默认 `--em 24` 时输出 720 × 1104px(约 190 × 292 mm)。
## 调整指南
### 构图(assets/js/scene.js)
@@ -39,7 +60,7 @@ python -m http.server 8000
| --- | --- |
| `clouds` | 云:三行 3/5/3 的云形,x/y 为最宽一行的左上角 |
| `sun` | 落日:逐行圆形切片,数组顺序对应顶部的红到底部的黄 |
| `birds` | 飞鸟:每只占 2 格(麻雀 / 海鸥 / 乌鸦) |
| `birds` | 飞鸟:每只占 2 格(麻雀 / 喜鹊 / 乌鸦) |
| `antennas` | 天线:单列「线」,从 y 向下叠 h 格 |
| `buildings` | 楼群:x/y/w/h,n 对应 `.bld-n` |
| `TITLE` | 标题文案、起始行、行高、左右留格数 |
@@ -52,8 +73,8 @@ python -m http.server 8000
- 背景「天」:`.sky`。
- 云:`.cloud` 的明度与 `.cloud-*` 的色相。
- 落日:`.sun` 的整体明度(当前为原色 90%),`.sun-t1` 至 `.sun-t17` 为逐行色阶。
- 飞鸟:`.bird-sparrow`、`.bird-gull`、`.bird-crow`。
- 天线:`.ant`。
- 飞鸟:`.bird-sparrow`、`.bird-magpie`、`.bird-crow`。
- 天线:`.ant`(深色款为 `.ant-dark`)。
- 楼群:`.bld` 与 `.bld-1` 至 `.bld-8`。
- 标题:`.title-panel`(黑色矩形)与 `.title-panel .title`(白色文字及字号)。