# Cursor Design Mode 教程：把长表格调成可打印的 A4 交付单

## 身份和范围

本站原创 fixture 与人工参考；实际运行：Chromium 真正打印的 A4 PDF。目标代理模型、账号会话、付费 API、第三方 PR、推送和发布均未执行。公开包不含 .env；需要时仅在自己的临时练习目录从文本模板创建。

## 本地命令

```sh
python3 -m http.server 4384 --bind 127.0.0.1
```

## 七步原生操作

### 1. 打开已有二十六行交付单

先打开 print.before.html；它确实加载 print.before.css，打印时表格宽1200px、表头变block且允许拆行。与 print.html 的人工修复参考分开，先看 before-reference.pdf 的真实裁切错误，再核对固定的26行长中文与合计。

### 2. 用 Design Mode 选择具体元素

在 Cursor Agents Window 浏览器打开本地 print.before.html，进入 Design Mode，选择过宽的表格和错误表头。让元素、computed styles 和具体标注进入上下文；修复时保留 before 版本，使用 print.html 仅作可审校的人工参考。

### 3. 把修改目标限定为打印规则

要求 @page A4、固定 16mm 页边距、打印隐藏按钮，移除 1200px 固定宽。屏幕样式和打印样式分开，避免为了打印把日常页面缩成一张不可读小图。

### 4. 处理重复表头和不可拆行

在 @media print 中保留 thead 的 table-header-group，tr 设 break-inside:avoid；合计只出现一次。长中文允许换行，不能用 overflow:hidden 悄悄吞字。

### 5. 用原生浏览器打印真正 PDF

先对错误页打印一份 before PDF，再对修复页打印 A4，固定16mm页边距。本站已经用 Chromium 真正输出 before-reference.pdf/reference.pdf 并逐页渲染，不把网页截图改成PDF。

### 6. 逐页回读行号、表头与总计

打开 reference.pdf 和对应页面 PNG，核对 01–26 无缺失、第二页有表头、行内容不跨页截断、合计与 expected.json 一致。页数和字体与运行环境一起记录，不能只凭文件非空验收。

### 7. 保留源码与实际打印条件

交付打印 CSS、PDF、浏览器版本和纸张参数。你在 Cursor 的实际修改另存 diff；本站 PDF 来自人工 CSS 参考，不是目标代理已经完成的证明。

## 验收产物

通过真实元素选择与样式上下文修改的打印 CSS；浏览器实际导出 PDF、页数及跨页表头/行完整/合计检查表

## 门槛

- 需要支持 Design Mode 的 Cursor Agents Window 与浏览器界面；实际版本需记录。
- Design Mode 提供浏览器元素/样式上下文，不是原生 PDF 排版工具；PDF 由真实浏览器打印生成。
- 打印字体需本机可用；纸张、缩放、页边距固定后再比较。

## 官方来源

- https://prod.cursor.com/docs/agent/design-mode
- https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Printing

静态配图冻结于本次输入。修改输入需重新运行并自行重渲染；不把旧截图当新结果。

## 可重复的浏览器检查

需 Node >=24。运行 `npm ci`，若缺少 Chromium，再按 Playwright 提示安装浏览器，然后 `npm run check`。只启动本地练习 HTTP 服务，不连接任何模型或账号。PDF 页数/中文需结合包内原生 PDF 逐页人工看。