QR Code XP

在线体验：https://arrow36.github.io/qr-code-xp/

一个 Windows XP 风格的二维码实验台。既能快速生成和扫描二维码，也能检查编码分段、纠错等级、Version、Mask 和罚分等底层信息。

功能

• 实时生成二维码，支持文字与网址
• 支持 Numeric、Alphanumeric、Byte 和自动分段
• 支持 L、M、Q、H 四种纠错等级
• 可自动或手动指定 Version 1–40 与 Mask 0–7
• 支持自定义输出分辨率，并导出 PNG
• 展示编码分段、比特长度和八种 Mask 的罚分
• 导出 Analysis JSON
• 通过上传、拖放、粘贴图片或摄像头扫描二维码
• 提供简易模式和高级模式
• Windows XP Luna 风格的窗口、桌面、开始菜单和任务栏
• 在支持 document.modelContext 的环境中提供页面工具，可由 AI 配置二维码生成参数

技术栈

• React 19
• TypeScript
• vinext / Vite
• Tailwind CSS
• qrcode
• jsQR
• Cloudflare Workers

本地运行

需要 Node.js 22.13 或更高版本，以及 pnpm。

git clone https://github.com/Arrow36/qr-code-xp.git
cd qr-code-xp
pnpm install
pnpm dev

根据终端提示打开本地地址即可使用。

在线体验

打开 GitHub Pages

常用命令

pnpm dev       # 启动开发服务器
pnpm build     # 构建生产版本
pnpm start     # 本地运行 Workers 构建
pnpm lint      # 检查代码
pnpm format    # 格式化代码

使用提示

• 摄像头扫码需要在 localhost 或 HTTPS 环境下运行。
• 二维码能否成功生成取决于内容长度、编码模式、Version 和纠错等级。
• 界面目前以中文为主。

iPhone 主屏幕图标与网页 App

• iPhone 图标：public/icons/apple-touch-icon-v1.png（180×180 PNG）。
• Android / 桌面安装图标：public/icons/app-icon-192-v1.png 和 public/icons/app-icon-512-v1.png。
• 以上 PNG 复用现有的 public/xp/icon-qr.svg，以白色背景导出，没有重新设计 Logo。
• 配置入口：app/layout.tsx 的 metadata 和 public/manifest.webmanifest。
• 保留现有 public/favicon.svg，主屏幕图标与 favicon 分开配置。

Manifest 的 start_url、scope 和 id 均为 ./，相对于 Manifest 地址解析。 在当前 GitHub Pages 部署下，它们指向 /qr-code-xp/；本地开发时指向 /。 如果将来改变部署路径，请同步检查 layout 中的 publicBase 及项目已有的资源前缀。 使用 standalone 模式启动不会更改业务路由或存储逻辑；跨域或超出 scope 的跳转仍可能显示浏览器界面。 本次没有添加 Service Worker，也没有改变离线缓存行为。

再次更换图标

准备自己的正方形 PNG，导出 180×180、192×192、512×512 三个尺寸，建议使用不透明背景，不要预先裁圆角。 例如保存为 public/icons/apple-touch-icon-v2.png、app-icon-192-v2.png、app-icon-512-v2.png， 再更新 app/layout.tsx 中的 apple 图标路径以及 Manifest 中的两个 icons 路径。 使用新的文件名可以绕开旧图标 URL 的缓存；保持 Manifest 的 id、start_url 和 scope 不变。 只更换 iPhone 图标时，只需更换 180×180 文件及 layout 中对应的路径。

iPhone 验证步骤

1. 部署修改，确认 https://arrow36.github.io/qr-code-xp/icons/apple-touch-icon-v1.png 显示新图标， 且 https://arrow36.github.io/qr-code-xp/manifest.webmanifest 可以访问。
2. 移除原主屏幕图标，再用 Safari 打开 https://arrow36.github.io/qr-code-xp/ 并刷新。
3. 选择「分享」→「添加到主屏幕」，确认预览图标及名称；若显示「作为网页 App 打开」选项，保持开启。
4. 从主屏幕启动，确认无 Safari 地址栏，再验证二维码生成、扫码、站内操作和原有保存状态。
5. 如果仍显示旧图标，先确认新文件名已部署、HTML 引用已经更新，再重新添加。 不要首先清除全部网站数据，以免丢失本地保存状态。已安装的旧图标不保证自动更新。

License

尚未指定开源许可证。在添加许可证前，保留所有权利。