feat(module:qrcode): add QRCode component (#7803)

* feat(module:qrcode): add QRCode component * feat(module:qrcode): add QRCode component fix bug * feat(module:qrcode): add QRCode component * feat(module:qrcode): add unit test * fix(module:qrcode): qr code blurry picture * fix(module:qrcode): fix pr test error * fix(module:qrcode): clear canvas when value is empty * fix(module:qrcode): i18n key corresponds to ant.d * fix(module:qrcode): correct some spelling problems
NG-ZORRO · Mar 29, 2023 · ff36981 · ff36981
1 parent 4bbf83e
commit ff36981
Show file tree

Hide file tree

Showing 32 changed files with 1,630 additions and 1 deletion.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -67,6 +67,8 @@ components/transfer/**                    @Ricbet
 components/i18n/**                        @wenqi73
 components/pipes/**                       @chensimeng
 components/image/**                       @stygian-desolator
+components/qr-code/**                     @OriginRing
+components/cron-expression/**             @OriginRing
 
 # The `components/core/*` owners
 components/core/config/**                 @hullis

diff --git a/components/components.less b/components/components.less
@@ -63,3 +63,4 @@
 @import './space/style/entry.less';
 @import './image/style/entry.less';
 @import './cron-expression/style/entry.less';
+@import './qr-code/style/entry.less';
diff --git a/components/i18n/languages/en_US.ts b/components/i18n/languages/en_US.ts
@@ -198,5 +198,9 @@ export default {
       '<p><span>*</span>Any value</p><p><span>,</span>Separator between multiple values</p><p><span>-</span>Connector for interval values</p><p><span>/</span>Equally distributed</p><p><span>1-12</span>Allowable range</p>',
     weekError:
       '<p><span>*</span>Any value</p><p><span>,</span>Separator between multiple values</p><p><span>-</span>Connector for interval values</p><p><span>/</span>Equally distributed</p><span>?</span> Not specify</p><p><p><span>0-7</span>Allowable range (0 represents Sunday, 1-7 are Monday to Sunday)</p>'
+  },
+  QRCode: {
+    expired: 'QR code expired',
+    refresh: 'Refresh'
   }
 };
diff --git a/components/i18n/languages/zh_CN.ts b/components/i18n/languages/zh_CN.ts
@@ -194,5 +194,9 @@ export default {
       '<p><span>*</span> 任意值</p><p><span>,</span> 多个值之间的分隔符</p><p><span>-</span> 区间值的连接符</p><p><span>/</span> 平均分配</p><p><span>1-12</span> 允许范围</p>',
     weekError:
       '<p><span>*</span> 任意值</p><p><span>,</span> 多个值之间的分隔符</p><p><span>-</span> 区间值的连接符</p><p><span>/</span> 平均分配</p><p><span>?</span> 不指定</p><p><span>0-7</span> 允许范围（0代表周日，1-7依次为周一到周日）</p>'
+  },
+  QRCode: {
+    expired: '二维码过期',
+    refresh: '点击刷新'
   }
 };
diff --git a/components/i18n/nz-i18n.interface.ts b/components/i18n/nz-i18n.interface.ts
@@ -153,6 +153,11 @@ export interface NzCronExpressionCronErrorI18n {
 
 export type NzCronExpressionI18nInterface = NzCronExpressionCronErrorI18n & NzCronExpressionLabelI18n;
 
+export interface NzQRCodeI18nInterface {
+  expired: string;
+  refresh: string;
+}
+
 export interface NzI18nInterface {
   locale: string;
   Pagination: NzPaginationI18nInterface;
@@ -168,6 +173,7 @@ export interface NzI18nInterface {
   Empty: NzEmptyI18nInterface;
   Text?: NzTextI18nInterface;
   CronExpression?: NzCronExpressionI18nInterface;
+  QRCode?: NzQRCodeI18nInterface;
 }
 
 export type DateLocale = Locale;
diff --git a/components/qr-code/demo/basic.md b/components/qr-code/demo/basic.md
@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+The simplest usage.
diff --git a/components/qr-code/demo/basic.ts b/components/qr-code/demo/basic.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-qr-code-basic',
+  template: ` <nz-qrcode nzValue="https://ng.ant.design/"></nz-qrcode> `
+})
+export class NzDemoQrCodeBasicComponent {}
diff --git a/components/qr-code/demo/color.md b/components/qr-code/demo/color.md
@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: 自定义颜色
+  en-US: Custom Color
+---
+
+## zh-CN
+
+通过设置 `nzColor` 自定义二维码颜色。
+
+## en-US
+
+Customize QR code color.
diff --git a/components/qr-code/demo/color.ts b/components/qr-code/demo/color.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-qr-code-color',
+  template: `
+    <nz-qrcode nzValue="https://ng.ant.design/" nzColor="#ff6600"></nz-qrcode>
+    <nz-qrcode nzValue="https://ng.ant.design/" nzColor="#1677ff"></nz-qrcode>
+  `,
+  styles: [
+    `
+      nz-qrcode {
+        margin-right: 12px;
+        background-color: #f6f6f6;
+      }
+    `
+  ]
+})
+export class NzDemoQrCodeColorComponent {}
diff --git a/components/qr-code/demo/download.md b/components/qr-code/demo/download.md
@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh-CN: 下载二维码
+  en-US: Download QRCode
+---
+
+## zh-CN
+
+实现下载二维码。
+
+## en-US
+
+A way to download QRCode.
diff --git a/components/qr-code/demo/download.ts b/components/qr-code/demo/download.ts
@@ -0,0 +1,38 @@
+import { Component, ViewChild, ElementRef } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-qr-code-download',
+  template: `
+    <div id="download">
+      <nz-qrcode nzValue="https://ng.ant.design/"></nz-qrcode>
+      <a #download></a>
+      <button nz-button nzType="primary" (click)="downloadImg()">Download</button>
+    </div>
+  `,
+  styles: [
+    `
+      div {
+        display: flex;
+        align-items: flex-start;
+        flex-direction: column;
+      }
+
+      nz-qrcode {
+        margin-bottom: 12px;
+      }
+    `
+  ]
+})
+export class NzDemoQrCodeDownloadComponent {
+  @ViewChild('download', { static: false }) download!: ElementRef;
+
+  downloadImg(): void {
+    const canvas = document.getElementById('download')?.querySelector<HTMLCanvasElement>('canvas');
+    if (canvas) {
+      this.download.nativeElement.href = canvas.toDataURL('image/png');
+      this.download.nativeElement.download = 'ng-zorro-antd';
+      const event = new MouseEvent('click');
+      this.download.nativeElement.dispatchEvent(event);
+    }
+  }
+}
diff --git a/components/qr-code/demo/error-level.md b/components/qr-code/demo/error-level.md
@@ -0,0 +1,14 @@
+---
+order: 4
+title:
+  zh-CN: 容错等级
+  en-US: Error Level
+---
+
+## zh-CN
+
+通过设置 `nzErrorCorrectionLevel` 调整二维码容错。
+
+## en-US
+
+Set Error Level.
diff --git a/components/qr-code/demo/error-level.ts b/components/qr-code/demo/error-level.ts
@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-qr-code-error-level',
+  template: `
+    <nz-qrcode nzValue="https://github.com/NG-ZORRO/ng-zorro-antd/issues" [nzLevel]="errorLevel"></nz-qrcode>
+    <nz-segmented [nzOptions]="options" (nzValueChange)="handleIndexChange($event)"></nz-segmented>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        align-items: flex-start;
+        flex-direction: column;
+      }
+
+      nz-qrcode {
+        margin-bottom: 12px;
+      }
+    `
+  ]
+})
+export class NzDemoQrCodeErrorLevelComponent {
+  options: Array<'L' | 'M' | 'Q' | 'H'> = ['L', 'M', 'Q', 'H'];
+  errorLevel: 'L' | 'M' | 'Q' | 'H' = 'L';
+
+  handleIndexChange(e: number): void {
+    this.errorLevel = this.options[e];
+  }
+}
diff --git a/components/qr-code/demo/icon.md b/components/qr-code/demo/icon.md
@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh-CN: 带 icon 的例子
+  en-US: With Icon
+---
+
+## zh-CN
+
+带有 icon 的二维码。
+
+## en-US
+
+QRCode with icon.
diff --git a/components/qr-code/demo/icon.ts b/components/qr-code/demo/icon.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-qr-code-icon',
+  template: `
+    <nz-qrcode
+      nzValue="https://ng.ant.design/"
+      nzIcon="https://img.alicdn.com/imgextra/i2/O1CN01TBIkzL1Nk3IBB0DLA_!!6000000001607-2-tps-106-120.png"
+      nzLevel="H"
+    ></nz-qrcode>
+  `
+})
+export class NzDemoQrCodeIconComponent {}
diff --git a/components/qr-code/demo/module b/components/qr-code/demo/module
@@ -0,0 +1,5 @@
+import { NzQRCodeModule } from 'ng-zorro-antd/qr-code';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
+
+export const moduleList = [NzQRCodeModule, NzButtonModule, NzSegmentedModule];
diff --git a/components/qr-code/demo/status.md b/components/qr-code/demo/status.md
@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+  zh-CN: 不同的状态
+  en-US: Other Status
+---
+
+## zh-CN
+
+通过 `nzStatus` 的值控制二维码的状态。
+
+## en-US
+
+The status can be controlled by the value `nzStatus`.
diff --git a/components/qr-code/demo/status.ts b/components/qr-code/demo/status.ts
@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-qr-code-status',
+  template: `
+    <nz-qrcode nzValue="https://ng.ant.design/" nzStatus="loading"></nz-qrcode>
+    <nz-qrcode nzValue="https://ng.ant.design/" nzStatus="expired" (nzRefresh)="refresh($event)"></nz-qrcode>
+  `,
+  styles: [
+    `
+      nz-qrcode {
+        margin-right: 12px;
+      }
+    `
+  ]
+})
+export class NzDemoQrCodeStatusComponent {
+  refresh(val: string): void {
+    console.log(val);
+  }
+}
diff --git a/components/qr-code/doc/index.en-US.md b/components/qr-code/doc/index.en-US.md
@@ -0,0 +1,46 @@
+---
+category: Components
+type: Data Display
+title: QRCode
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cJopQrf0ncwAAAAAAAAAAAAADrJ8AQ/original
+---
+
+## When To Use
+
+Used when the link needs to be converted into a QR Code.
+
+### Import Module
+
+```ts
+import { NzQRCodeModule } from 'ng-zorro-antd/qr-code';
+```
+
+## API
+
+### nz-qrcode
+
+| 参数           | 说明                                | 类型                              | 默认值   |
+| -------------- | ----------------------------------- | --------------------------------- | -------- |
+| `[nzValue]`    | scanned link                        | `string`                          | -        |
+| `[nzColor]`    | QR code Color                       | `string`                          | `#000`   |
+| `[nzSize]`     | QR code Size                        | `number`                          | `160`    |
+| `[nzIcon]`     | Icon address in QR code             | `string`                          | -        |
+| `[nzIconSize]` | The size of the icon in the QR code | `number`                          | `40`     |
+| `[nzBordered]` | Whether has border style            | `boolean`                         | `true`   |
+| `[nzStatus]`   | QR code status                      | `'active'｜'expired' ｜'loading'` | `active` |
+| `[nzLevel]`    | Error Code Level                    | `'L'｜'M'｜'Q'｜'H'`              | `M`      |
+| `(nzRefresh)`  | callback                            | `EventEmitter<string>`            | -        |
+
+## Note
+
+### Invalid QR Code
+
+`nzValue` has a conservative upper limit of 738 or fewer strings. If error correction levels are used, the `nzValue` upper limit will be lowered.
+
+### QR Code error correction level
+
+The ErrorLevel means that the QR code can be scanned normally after being blocked, and the maximum area that can be blocked is the error correction rate.
+
+Generally, the QR code is divided into 4 error correction levels: Level `L` can correct about `7%` errors, Level `M` can correct about `15%` errors, Level `Q` can correct about `25%` errors, and Level `H` can correct about `30%` errors. When the content encoding of the QR code carries less information, in other words, when the value link is short, set different error correction levels, and the generated image will not change.
+
+> For more information, see the: [https://www.qrcode.com/en/about/error_correction](https://www.qrcode.com/en/about/error_correction.html)
diff --git a/components/qr-code/doc/index.zh-CN.md b/components/qr-code/doc/index.zh-CN.md
@@ -0,0 +1,47 @@
+---
+category: Components
+subtitle: 二维码
+type: 数据展示
+title: QRCode
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cJopQrf0ncwAAAAAAAAAAAAADrJ8AQ/original
+---
+
+## 何时使用
+
+当需要将链接转换成为二维码时使用。
+
+### 引入模块
+
+```ts
+import { NzQRCodeModule } from 'ng-zorro-antd/qr-code';
+```
+
+## API
+
+### nz-qrcode
+
+| 参数           | 说明                 | 类型                              | 默认值   |
+| -------------- | -------------------- | --------------------------------- | -------- |
+| `[nzValue]`    | 扫描后的地址         | `string`                          | -        |
+| `[nzColor]`    | 二维码颜色           | `string`                          | `#000`   |
+| `[nzSize]`     | 二维码大小           | `number`                          | `160`    |
+| `[nzIcon]`     | 二维码中 icon 地址   | `string`                          | -        |
+| `[nzIconSize]` | 二维码中 icon 大小   | `number`                          | `40`     |
+| `[nzBordered]` | 是否有边框           | `boolean`                         | `true`   |
+| `[nzStatus]`   | 二维码状态           | `'active'｜'expired' ｜'loading'` | `active` |
+| `[nzLevel]`    | 二维码容错等级       | `'L'｜'M'｜'Q'｜'H'`              | `M`      |
+| `(nzRefresh)`  | 点击"点击刷新"的回调 | `EventEmitter<string>`            | -        |
+
+## 注意
+
+### 二维码无法识别
+
+`nzValue` 保守的上限为 738 或更少的字符串。如果使用容错等级，`nzValue` 上限会降低。
+
+### 关于二维码容错等级
+
+容错等级也叫容错率，就是指二维码可以被遮挡后还能正常扫描，而这个能被遮挡的最大面积就是容错率。
+
+通常情况下二维码分为 4 个容错等级：`L级` 可纠正约 `7%` 错误、`M级` 可纠正约 `15%` 错误、`Q级` 可纠正约 `25%` 错误、`H级` 可纠正约 `30%` 错误。并不是所有位置都可以缺损，像最明显的三个角上的方框，直接影响初始定位。中间零散的部分是内容编码，可以容忍缺损。当二维码的内容编码携带信息比较少的时候，也就是链接比较短的时候，设置不同的容错等级，生成的图片不会发生变化。
+
+> 有关更多信息，可参阅相关资料：[https://www.qrcode.com/zh/about/error_correction](https://www.qrcode.com/zh/about/error_correction.html)
diff --git a/components/qr-code/index.ts b/components/qr-code/index.ts
@@ -0,0 +1,6 @@
+/**
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+export * from './public-api';
diff --git a/components/qr-code/ng-package.json b/components/qr-code/ng-package.json
@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}