QRCode 二维码

Rue QRCode 提供可用组件：保持 Rue 自己的表面语言，不照搬其他组件库的视觉，但把 canvas / svg、纠错等级、中心 logo、状态遮罩、下载示例和语义化样式入口一次性补上。

组件源码保持 TSX 形态，不写预转换标记，让 Rue 编译器继续参与后续优化路径；二维码编码逻辑也保持自包含，避免为了这个组件把额外依赖扩散到别处。

Compiler Friendly

展示 TSX 源码直编

没有额外的预转换头，让组件继续走 Rue 自己的编译优化路径。

Core Features

Canvas、SVG、状态与 Logo

核心能力向成熟二维码组件看齐，但视觉仍然是 Rue 当前的卡面体系。

Style Hooks

展示 classNames / styles

业务页既能快速直接用，也能按语义槽位做表面微调。

# 基础实时值

展示最常见的二维码输入联动场景：外部维护 value，组件只专注编码和渲染。

Live Value30 chars

Payload

https://rue.dev/design/qr-code

Use Case

登录确认、邀请码、设备配网、活动页落地都适合这种外部受控写法。

# 类型、尺寸与纠错

type 决定输出面，size 控制外层尺寸，errorLevel 则决定遮挡容忍度。

96px

144px

208px

High Recovery

Logo 场景建议 H 级纠错

canvas

同一份内容可以在 canvas 和 svg 之间切换。短内容默认会在不升版本的前提下自动尝试提高纠错等级。

# 配色、边框与语义样式

使用 Rue 的圆角卡面语言，同时保持 classNames / styles 扩展位。

品牌浅底

无边框暗底码

带扩展样式的工作台码

# 状态遮罩与自定义渲染

loading、expired、scanned 三类业务状态内置可用，也可以完全接管覆盖层内容。

准备二维码中…

二维码已过期

expired

已扫码，等待确认

scanned

Custom

二维码已过期

custom render / expired

当前会话版本：#1。点击 expired 卡片里的刷新按钮，会先进入 loading，再展示新二维码，适合登录确认、支付倒计时和临时令牌场景。

# 下载输出

下载逻辑放在业务层；组件只负责稳定地产出 canvas 或 svg。

canvasseed 1

当前示例把下载动作放在业务页实现：canvas 用 toDataURL，svg 用 Blob + ObjectURL。这样组件本身维持纯渲染职责，也便于后续接入埋点、权限和文件命名策略。

https://rue.dev/invite?scene=design-lab&seed=1

API

属性	说明	类型	默认值
`value`	二维码内容，推荐在外部对空字符串做兜底，例如 value \|\| "-"。	`string`	`-`
`type`	输出类型，可切换 canvas 和 svg。	`'canvas' \| 'svg'`	`'canvas'`
`size`	组件外层尺寸，内部二维码区域会按 bordered 自动留出边框内边距。	`number`	`160`
`color / bgColor`	前景色和背景色，适合品牌色、暗底码和浅底业务码。	`string`	`'#111827' / '#ffffff'`
`icon / iconSize`	中心 logo，推荐与 errorLevel="H" 一起使用。	`string / number \| { width?: number; height?: number }`	`- / 自动`
`errorLevel`	纠错等级，值越高越适合遮挡或 logo 场景。	`'L' \| 'M' \| 'Q' \| 'H'`	`'M'`
`boostLevel`	在不增加版本的前提下自动尝试提升纠错等级。	`boolean`	`true`
`status`	状态遮罩，覆盖 active、loading、expired、scanned 四种核心态。	`'active' \| 'loading' \| 'expired' \| 'scanned'`	`'active'`
`onRefresh / statusRender / locale`	过期刷新、状态内容自定义和文案定制。	`function / function / object`	`-`
`bordered / marginSize`	外框展示和二维码 quiet zone 大小。	`boolean / number`	`true / 4`
`className / rootClassName / style`	根节点样式增强，保持与 Rue Design 其他组件一致的入口。	`string / string / object`	`-`
`classNames / styles`	语义化槽位样式，支持 root、frame、code、svg、canvas、cover、status、icon 等节点。	`object`	`-`