codex-work-receipt 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.5.0
+
+- 新增网页版“保存完整长图”功能。
+- 高清 PNG 包含主小票、小程序码和数据二维码导入联。
+- 导出图片自动使用当前主题，并排除主题按钮、网页背景和其他页面元素。
+- 网页主题与小程序统一为经典白票、复古粉票和夜班绿票。
+- 小票顶部明确展示统计日期范围，默认文件名同步携带日期范围或会话短编号。
+- 图片在浏览器本地渲染，不上传小票数据。
+
 ## 0.4.0
 
 - 新增无参数命令行范围选择器。

package/README.en.md

@@ -36,7 +36,7 @@ Summarize all Codex activity from today:
 npx codex-work-receipt@latest --today --lang en
 ```
 
-HTML and structured data are written to `./codex-work-receipt-output/` by default. Non-interactive options such as `--latest` and `--today` remain available; see the [CLI guide](docs/cli.en.md).
+HTML and structured data are written to `./codex-work-receipt-output/` by default. The generated page can save a high-resolution PNG containing the full receipt and QR import stub. Non-interactive options such as `--latest` and `--today` remain available; see the [CLI guide](docs/cli.en.md).
 
 ## Ask Codex directly
 
@@ -70,12 +70,12 @@ The desktop page generates a privacy-safe data QR code. The companion WeChat min
 <p align="center">
   <a href="https://modelflare.dev/"><img src="docs/images/sponsors/modelflare-logo.png" alt="ModelFlare Logo" width="56"></a><br>
   <a href="https://modelflare.dev/"><strong>ModelFlare</strong></a> · <a href="https://modelflare.dev/">modelflare.dev</a><br>
-  <sub>Stable access to leading AI model APIs at a very low cost, with transparent pricing and clear usage.</sub>
+  <sub>Helping independent developers access leading AI model APIs reliably and at a very low cost, so they can quickly build their own products with advanced model capabilities.</sub>
 </p>
 
 ## License
 
-The desktop source is licensed under [GNU GPL v3](LICENSE) (`GPL-3.0-only`). This repository does not contain the companion mini-program or backend source code. This is an unofficial community project and is not affiliated with OpenAI.
+The desktop source is licensed under [GNU GPL v3](LICENSE) (`GPL-3.0-only`). This is an unofficial community project and is not affiliated with OpenAI.
 
 ---
 

package/README.md

@@ -36,7 +36,7 @@ npx codex-work-receipt@latest
 npx codex-work-receipt@latest --today
 ```
 
-网页和结构数据默认保存在 `./codex-work-receipt-output/`。也可以继续使用 `--latest`、`--today` 等非交互参数，详见 [CLI 使用文档](docs/cli.md)。
+网页和结构数据默认保存在 `./codex-work-receipt-output/`。生成的网页支持一键保存包含主小票和二维码导入联的高清长图。也可以继续使用 `--latest`、`--today` 等非交互参数，详见 [CLI 使用文档](docs/cli.md)。
 
 ## 直接跟 Codex 说
 
@@ -70,12 +70,12 @@ Codex 会选择统计范围和主题、执行命令并打开小票。详见 [Cod
 <p align="center">
   <a href="https://modelflare.dev/"><img src="docs/images/sponsors/modelflare-logo.png" alt="ModelFlare Logo" width="56"></a><br>
   <a href="https://modelflare.dev/"><strong>ModelFlare</strong></a> · <a href="https://modelflare.dev/">modelflare.dev</a><br>
-  <sub>以很低的成本稳定接入前沿 AI 模型 API，价格友好、计费透明、用量清晰可见。</sub>
+  <sub>让个人开发者也可以以很低的成本、稳定地接入前沿 AI 模型的 API，借助模型能力快速构建自己的产品。</sub>
 </p>
 
 ## License
 
-电脑端源码采用 [GNU GPL v3](LICENSE)（`GPL-3.0-only`）。本仓库不包含配套小程序和后台服务源码；本项目是非 OpenAI 官方社区工具。
+电脑端源码采用 [GNU GPL v3](LICENSE)（`GPL-3.0-only`）。本项目是非 OpenAI 官方社区工具。
 
 ---
 

package/docs/cli.en.md

@@ -73,10 +73,14 @@ Default output:
 
 ```text
 ./codex-work-receipt-output/
-├── codex-receipt-latest.html
-└── codex-receipt-latest.json
+├── codex-receipt-today-2026-07-18.html
+└── codex-receipt-today-2026-07-18.json
 ```
 
+Default filenames include the calendar range. Latest-session and selected-session receipts include a short identifier so receipts from different dates or sessions do not overwrite one another.
+
+Open the generated HTML and click “Save full PNG” to download a high-resolution image. It includes the main receipt, mini-program code, and data QR import stub in the currently selected theme. Theme controls, the page background, and the footer note are excluded.
+
 Set a timezone and output path:
 
 ```bash
@@ -130,4 +134,4 @@ See the [data schema and QR protocol](data-schema.en.md).
 - Codex is the only supported data source; Cursor and WorkBuddy are planned
 - Changed-file and line counts are intentionally omitted until they can be measured consistently
 - Calendar ranges filter individual events by local date and calculate a Token delta for each session
-- Image export is handled by the companion mini program rather than the desktop page
+- Desktop PNG export is rendered locally in the browser and does not upload receipt data

package/docs/cli.md

@@ -73,10 +73,14 @@ npx codex-work-receipt@latest --latest --theme diner
 
 ```text
 ./codex-work-receipt-output/
-├── codex-receipt-latest.html
-└── codex-receipt-latest.json
+├── codex-receipt-today-2026-07-18.html
+└── codex-receipt-today-2026-07-18.json
 ```
 
+默认文件名会携带统计日期范围；最近会话和指定会话则携带短编号，避免不同日期或会话的小票互相覆盖。
+
+打开生成的 HTML 后，点击“保存完整长图”即可下载高清 PNG。图片包含主小票、小程序码和数据二维码导入联，并自动使用当前选择的主题；主题按钮、网页背景和底部说明不会进入图片。
+
 指定时区和输出路径：
 
 ```bash
@@ -130,4 +134,4 @@ npx codex-work-receipt@latest --help
 - 当前只支持 Codex；Cursor、WorkBuddy 等数据源仍在规划中
 - 暂不统计修改文件数和代码行数，避免不同工具调用方式产生误导
 - 时间范围按每条事件的本地日期筛选，并分别计算每个会话的 Token 区间增量
-- 网页端不直接导出图片，移动端渲染和保存由配套小程序完成
+- 桌面网页导出 PNG 使用浏览器本地渲染，不上传小票数据

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codex-work-receipt",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "description": "Generate a privacy-first Codex work receipt from local session metadata.",
   "author": "a-bai-2026",
@@ -52,6 +52,7 @@
     "node": ">=20"
   },
   "dependencies": {
+    "dom-to-image-more": "^3.10.2",
     "qrcode": "^1.5.4"
   }
 }

package/src/cli.mjs

@@ -10,7 +10,7 @@ import { parseArgs, printHelp } from "./core/args.mjs";
 import { collectMetrics } from "./core/metrics.mjs";
 import { getReceiptCopy } from "./core/presentation.mjs";
 import { encodeReceiptPayload } from "./core/qr-payload.mjs";
-import { outputSlugForScope, resolveRange } from "./core/range.mjs";
+import { outputSlugForRange, resolveRange } from "./core/range.mjs";
 import { buildReceiptRecord, persistReceiptRecord } from "./core/receipt-record.mjs";
 import { promptForRange } from "./core/selector.mjs";
 import { installCodexSkill } from "./core/skill-installer.mjs";
@@ -88,7 +88,7 @@ async function main() {
 
   const requestedOutput = options.output || path.join(
     DEFAULT_OUTPUT_DIR,
-    `codex-receipt-${outputSlugForScope(options.mode)}.html`,
+    `codex-receipt-${outputSlugForRange(range, record.id)}.html`,
   );
   const outputFile = path.resolve(/\.html?$/i.test(requestedOutput) ? requestedOutput : `${requestedOutput}.html`);
   fs.mkdirSync(path.dirname(outputFile), { recursive: true });

package/src/core/presentation.mjs

@@ -80,11 +80,15 @@ const RECEIPT_COPY = {
     pageTitle: "Codex AI 打工小票",
     receiptTitle: "AI 打工小票",
     themeAria: "小票主题",
+    exportImage: "保存完整长图",
+    exportingImage: "正在生成…",
+    exportSuccess: "图片已保存",
+    exportError: "图片生成失败，请重试",
     receiptAria: "Codex AI 打工小票",
     themes: {
-      classic: "经典热敏",
-      diner: "餐馆结账",
-      payroll: "办公室工资条",
+      classic: "经典白票",
+      diner: "复古粉票",
+      payroll: "夜班绿票",
     },
     scope: {
       latest: "最近一次会话",
@@ -142,11 +146,15 @@ const RECEIPT_COPY = {
     pageTitle: "Codex AI Work Receipt",
     receiptTitle: "AI Work Receipt",
     themeAria: "Receipt theme",
+    exportImage: "Save full PNG",
+    exportingImage: "Rendering…",
+    exportSuccess: "Image saved",
+    exportError: "Could not generate the image. Please try again.",
     receiptAria: "Codex AI Work Receipt",
     themes: {
-      classic: "Classic Thermal",
-      diner: "Vintage Diner",
-      payroll: "Office Payroll",
+      classic: "Classic White",
+      diner: "Vintage Pink",
+      payroll: "Night Shift Green",
     },
     scope: {
       latest: "Latest session",

package/src/core/range.mjs

@@ -91,9 +91,28 @@ export function calendarDayCount(range) {
   return count;
 }
 
-export function outputSlugForScope(scope) {
-  if (scope === "last-7-days") return "last-7-days";
-  if (scope === "this-week") return "this-week";
-  if (scope === "session") return "session";
-  return scope;
+function safeSlugSegment(value, fallback = "receipt") {
+  const normalized = String(value || "")
+    .trim()
+    .replace(/^cwr_/, "")
+    .replace(/[^a-zA-Z0-9-]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 24);
+  return normalized || fallback;
+}
+
+export function outputSlugForRange(range, receiptId = "") {
+  const scope = normalizeScope(range?.scope) || "latest";
+  const startDate = range?.startDate || range?.targetDate || "";
+  const endDate = range?.endDate || range?.targetDate || startDate;
+
+  if (scope === "today") return `today-${safeSlugSegment(endDate, "today")}`;
+  if (scope === "last-7-days" || scope === "this-week") {
+    const dateSpan = startDate === endDate ? endDate : `${startDate}-to-${endDate}`;
+    return `${scope}-${safeSlugSegment(dateSpan, scope)}`;
+  }
+  if (scope === "session") {
+    return `session-${safeSlugSegment(range?.sessionId || receiptId, "selected")}`;
+  }
+  return `latest-${safeSlugSegment(receiptId || endDate, "receipt")}`;
 }

package/src/core/receipt-record.mjs

@@ -10,7 +10,7 @@ import {
 } from "./presentation.mjs";
 
 const SCHEMA_VERSION = 1;
-const COLLECTOR_VERSION = "0.4.0";
+const COLLECTOR_VERSION = "0.5.0";
 
 function fingerprintSessionIds(sessionIds) {
   return crypto.createHash("sha256").update([...sessionIds].sort().join("|")).digest("hex").slice(0, 16);

package/src/renderers/html.mjs

@@ -1,6 +1,16 @@
+import fs from "node:fs";
+import { createRequire } from "node:module";
+
 import { formatDate, formatDuration, formatNumber, formatTime } from "../lib/time.mjs";
 import { buildCompensation, DEFAULT_LOCALE, getReceiptCopy } from "../core/presentation.mjs";
 
+const require = createRequire(import.meta.url);
+const DOM_TO_IMAGE_SOURCE = fs.readFileSync(require.resolve("dom-to-image-more"), "utf8");
+
+function inlineScript(value) {
+  return String(value).replaceAll("</script", "<\\/script");
+}
+
 function escapeHtml(value) {
   return String(value)
     .replaceAll("&", "&amp;")
@@ -35,12 +45,16 @@ export function renderHtml({ record, dataQrDataUrl, miniProgramCodeDataUrl = nul
   const displayDate = formatDate(endAt, timezone, locale);
   const rangeStartDate = record.period.range_start_date || formatDateKey(record.period.start_at.slice(0, 10), "zh-CN").replaceAll("/", "-");
   const rangeEndDate = record.period.range_end_date || formatDateKey(record.period.end_at.slice(0, 10), "zh-CN").replaceAll("/", "-");
+  const isCalendarScope = new Set(["today", "last-7-days", "this-week"]).has(record.source.scope);
   const spansMultipleDates = rangeStartDate !== rangeEndDate;
-  const businessPeriod = spansMultipleDates
+  const scopeLabel = copy.scope[record.source.scope] || copy.scope.latest;
+  const dateRange = spansMultipleDates
     ? `${formatDateKey(rangeStartDate, locale)}—${formatDateKey(rangeEndDate, locale)}`
+    : formatDateKey(rangeEndDate, locale);
+  const businessPeriod = isCalendarScope
+    ? `${dateRange} · ${scopeLabel}`
     : `${formatTime(startAt, timezone, locale)}—${formatTime(endAt, timezone, locale)}`;
-  const businessPeriodLabel = spansMultipleDates ? copy.meta.period : copy.meta.hours;
-  const scopeLabel = copy.scope[record.source.scope] || copy.scope.latest;
+  const businessPeriodLabel = isCalendarScope ? copy.meta.period : copy.meta.hours;
   const modelLabel = record.stats.models.length ? record.stats.models.join(" / ") : copy.modelMissing;
   const receiptNumber = `${record.id.slice(4, 12).toUpperCase()}-${String(record.stats.completed_turns).padStart(3, "0")}`;
   const compensation = record.presentation.compensation || buildCompensation(record.source.scope, 0, locale);
@@ -48,6 +62,13 @@ export function renderHtml({ record, dataQrDataUrl, miniProgramCodeDataUrl = nul
     minimumFractionDigits: 1,
     maximumFractionDigits: 1,
   }).format(record.stats.average_first_token_ms / 1000);
+  const exportConfig = JSON.stringify({
+    idleLabel: copy.exportImage,
+    busyLabel: copy.exportingImage,
+    successLabel: copy.exportSuccess,
+    errorLabel: copy.exportError,
+    fileBase: `codex-work-receipt-${record.source.scope}-${spansMultipleDates ? `${rangeStartDate}-to-${rangeEndDate}` : `${rangeEndDate}-${record.id.slice(4, 12)}`}`,
+  }).replaceAll("<", "\\u003c");
   const rows = [
     receiptRow(copy.rows.scope, scopeLabel),
     receiptRow(copy.rows.sessions, formatCount(record.stats.session_count, copy.units.sessions, locale)),
@@ -75,39 +96,39 @@ export function renderHtml({ record, dataQrDataUrl, miniProgramCodeDataUrl = nul
     :root {
       color-scheme: light;
       --ink: #171713;
-      --paper: #fffef4;
-      --desk: #d9d7cb;
-      --desk-soft: #cfcdc1;
-      --muted: #68675f;
-      --line: rgba(23, 23, 19, .42);
-      --accent: rgba(23, 23, 19, .055);
+      --paper: #ffffff;
+      --desk: #eeeae3;
+      --desk-soft: #f6f3ee;
+      --muted: #6d6c65;
+      --line: #aaa8a0;
+      --accent: #f3f2ed;
       --shadow: rgba(31, 30, 24, .18);
-      --mark-bg: transparent;
-      --mark-fg: var(--ink);
+      --mark-bg: #ffffff;
+      --mark-fg: #171713;
     }
     html[data-theme="diner"] {
-      --ink: #7f1e18;
-      --paper: #fff8e8;
-      --desk: #d8a58e;
-      --desk-soft: #f0d4bd;
-      --muted: #9a4b3e;
-      --line: rgba(127, 30, 24, .42);
-      --accent: rgba(198, 54, 38, .08);
-      --shadow: rgba(89, 34, 24, .2);
-      --mark-bg: #bd2f23;
-      --mark-fg: #fff8e8;
+      --ink: #a7475d;
+      --paper: #f7dde3;
+      --desk: #f2ece8;
+      --desk-soft: #faf6f3;
+      --muted: #b46b7b;
+      --line: #d29aa7;
+      --accent: #f0cdd6;
+      --shadow: rgba(116, 58, 72, .18);
+      --mark-bg: #f7dde3;
+      --mark-fg: #a7475d;
     }
     html[data-theme="payroll"] {
-      --ink: #183d67;
-      --paper: #f4f9ff;
-      --desk: #aebdcb;
-      --desk-soft: #dbe5ee;
-      --muted: #53718f;
-      --line: rgba(24, 61, 103, .38);
-      --accent: rgba(40, 104, 166, .075);
-      --shadow: rgba(28, 52, 79, .18);
-      --mark-bg: #183d67;
-      --mark-fg: #f4f9ff;
+      --ink: #ffe077;
+      --paper: #66742f;
+      --desk: #edebe3;
+      --desk-soft: #f7f5ef;
+      --muted: #e8cf74;
+      --line: #9aa35d;
+      --accent: #5c682b;
+      --shadow: rgba(48, 57, 19, .24);
+      --mark-bg: #66742f;
+      --mark-fg: #ffe077;
     }
     * { box-sizing: border-box; }
     body {
@@ -125,11 +146,17 @@ export function renderHtml({ record, dataQrDataUrl, miniProgramCodeDataUrl = nul
       margin: 0 auto;
       padding: 30px 18px 54px;
     }
+    .toolbar {
+      display: grid;
+      justify-items: center;
+      gap: 12px;
+      margin-bottom: 22px;
+    }
     .theme-switcher {
       display: flex;
+      flex-wrap: wrap;
       justify-content: center;
       gap: 8px;
-      margin-bottom: 22px;
     }
     .theme-button {
       appearance: none;
@@ -146,6 +173,35 @@ export function renderHtml({ record, dataQrDataUrl, miniProgramCodeDataUrl = nul
       background: var(--ink);
       color: var(--paper);
     }
+    .export-actions {
+      display: grid;
+      justify-items: center;
+      gap: 6px;
+    }
+    .export-button {
+      appearance: none;
+      min-width: 168px;
+      border: 1px solid var(--ink);
+      border-radius: 999px;
+      background: var(--ink);
+      color: var(--paper);
+      cursor: pointer;
+      font: inherit;
+      font-size: 13px;
+      font-weight: 700;
+      padding: 10px 18px;
+      transition: opacity .15s ease, transform .15s ease;
+    }
+    .export-button:hover { transform: translateY(-1px); }
+    .export-button:disabled { cursor: wait; opacity: .62; transform: none; }
+    .export-status {
+      min-height: 16px;
+      color: var(--muted);
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
+      font-size: 11px;
+    }
+    .export-status[data-state="error"] { color: #b33a2e; }
+    .export-sheet { padding: 10px 0; }
     .paper {
       position: relative;
       background:
@@ -326,13 +382,20 @@ export function renderHtml({ record, dataQrDataUrl, miniProgramCodeDataUrl = nul
 </head>
 <body>
   <main class="page">
-    <nav class="theme-switcher" aria-label="${escapeHtml(copy.themeAria)}">
-      <button class="theme-button" type="button" data-theme-value="classic">${escapeHtml(copy.themes.classic)}</button>
-      <button class="theme-button" type="button" data-theme-value="diner">${escapeHtml(copy.themes.diner)}</button>
-      <button class="theme-button" type="button" data-theme-value="payroll">${escapeHtml(copy.themes.payroll)}</button>
-    </nav>
+    <div class="toolbar">
+      <nav class="theme-switcher" aria-label="${escapeHtml(copy.themeAria)}">
+        <button class="theme-button" type="button" data-theme-value="classic">${escapeHtml(copy.themes.classic)}</button>
+        <button class="theme-button" type="button" data-theme-value="diner">${escapeHtml(copy.themes.diner)}</button>
+        <button class="theme-button" type="button" data-theme-value="payroll">${escapeHtml(copy.themes.payroll)}</button>
+      </nav>
+      <div class="export-actions">
+        <button class="export-button" id="save-receipt-image" type="button">${escapeHtml(copy.exportImage)}</button>
+        <span class="export-status" id="export-status" role="status" aria-live="polite"></span>
+      </div>
+    </div>
 
-    <article class="paper receipt" aria-label="${escapeHtml(copy.receiptAria)}">
+    <div class="export-sheet" id="receipt-export">
+      <article class="paper receipt" aria-label="${escapeHtml(copy.receiptAria)}">
       <header class="brand">
         <div class="brand-mark">C</div>
         <h1>${escapeHtml(copy.receiptTitle)}</h1>
@@ -367,9 +430,9 @@ export function renderHtml({ record, dataQrDataUrl, miniProgramCodeDataUrl = nul
         <div>MODEL · ${escapeHtml(modelLabel)}</div>
         <div>${escapeHtml(copy.footerThanks)}</div>
       </footer>
-    </article>
+      </article>
 
-    <section class="paper transfer-stub" aria-label="${escapeHtml(copy.transferAria)}">
+      <section class="paper transfer-stub" aria-label="${escapeHtml(copy.transferAria)}">
       <header class="transfer-heading">
         <h2>${escapeHtml(copy.transferTitle)}</h2>
         <p>${escapeHtml(copy.transferDescription)}</p>
@@ -387,11 +450,14 @@ export function renderHtml({ record, dataQrDataUrl, miniProgramCodeDataUrl = nul
         </div>
       </div>
       <p class="transfer-note">${escapeHtml(copy.transferNote)}</p>
-    </section>
+      </section>
+    </div>
 
     <p class="privacy">${escapeHtml(copy.privacy)}</p>
   </main>
+  <script>${inlineScript(DOM_TO_IMAGE_SOURCE)}</script>
   <script>
+    const exportConfig = ${exportConfig};
     const themes = new Set(["classic", "diner", "payroll"]);
     const buttons = [...document.querySelectorAll("[data-theme-value]")];
     function applyTheme(theme) {
@@ -404,6 +470,79 @@ export function renderHtml({ record, dataQrDataUrl, miniProgramCodeDataUrl = nul
     let savedTheme = null;
     try { savedTheme = localStorage.getItem("codex-work-receipt-theme"); } catch {}
     applyTheme(savedTheme || document.documentElement.dataset.theme);
+
+    const exportButton = document.getElementById("save-receipt-image");
+    const exportStatus = document.getElementById("export-status");
+    const exportNode = document.getElementById("receipt-export");
+
+    function setExportStatus(message, state = "") {
+      exportStatus.textContent = message;
+      exportStatus.dataset.state = state;
+    }
+
+    function waitForImages(node) {
+      return Promise.all([...node.querySelectorAll("img")].map((image) => {
+        if (image.complete && image.naturalWidth > 0) return Promise.resolve();
+        return new Promise((resolve, reject) => {
+          image.addEventListener("load", resolve, { once: true });
+          image.addEventListener("error", reject, { once: true });
+        });
+      }));
+    }
+
+    function downloadImage(dataUrl, filename) {
+      const link = document.createElement("a");
+      link.href = dataUrl;
+      link.download = filename;
+      link.rel = "noopener";
+      document.body.appendChild(link);
+      if (typeof link.download === "string") link.click();
+      else window.open(dataUrl, "_blank", "noopener");
+      link.remove();
+    }
+
+    exportButton.addEventListener("click", async () => {
+      if (exportButton.disabled) return;
+      exportButton.disabled = true;
+      exportButton.textContent = exportConfig.busyLabel;
+      setExportStatus("");
+
+      try {
+        if (document.fonts?.ready) await document.fonts.ready;
+        await waitForImages(exportNode);
+        const width = Math.ceil(exportNode.scrollWidth);
+        const height = Math.ceil(exportNode.scrollHeight);
+        const scale = Math.max(2, Math.min(3, 1500 / Math.max(1, width)));
+        const paperColor = getComputedStyle(document.documentElement).getPropertyValue("--paper").trim() || "#ffffff";
+        const dataUrl = await domtoimage.toPng(exportNode, {
+          width,
+          height,
+          scale,
+          pixelRatio: 1,
+          bgcolor: paperColor,
+          cacheBust: false,
+          style: { background: paperColor },
+          onclone(clone) {
+            clone.style.background = paperColor;
+            clone.querySelectorAll(".paper").forEach((paper) => {
+              paper.style.boxShadow = "none";
+            });
+          },
+          logger: {},
+        });
+        const theme = themes.has(document.documentElement.dataset.theme)
+          ? document.documentElement.dataset.theme
+          : "classic";
+        downloadImage(dataUrl, exportConfig.fileBase + "-" + theme + ".png");
+        setExportStatus(exportConfig.successLabel, "success");
+      } catch (error) {
+        console.error(error);
+        setExportStatus(exportConfig.errorLabel, "error");
+      } finally {
+        exportButton.disabled = false;
+        exportButton.textContent = exportConfig.idleLabel;
+      }
+    });
   </script>
 </body>
 </html>`;

package/templates/README.md

@@ -2,9 +2,8 @@
 
 首批内置主题：
 
-- `classic`：经典热敏小票
-- `diner`：红白餐馆结账单
-- `payroll`：蓝色办公室工资条
+- `classic`：经典白票
+- `diner`：复古粉票
+- `payroll`：夜班绿票
 
 主题只改变 CSS 变量和少量装饰，不改变小票数据。
-