chore: update qr demo (#2490)

ng-alain · Mar 13, 2024 · 4592976 · 4592976
1 parent cae36dd
commit 4592976
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 41 deletions.
diff --git a/src/app/routes/delon/delon.module.ts b/src/app/routes/delon/delon.module.ts
@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
 import { DownFileModule } from '@delon/abc/down-file';
 import { FullContentModule } from '@delon/abc/full-content';
-import { QRModule } from '@delon/abc/qr';
 import { G2MiniBarModule } from '@delon/chart/mini-bar';
 import { SharedModule } from '@shared';
+import { NzQRCodeModule } from 'ng-zorro-antd/qr-code';
 
 import { ACLComponent } from './acl/acl.component';
 import { CacheComponent } from './cache/cache.component';
@@ -39,7 +39,7 @@ const COMPONENTS = [
 ];
 
 @NgModule({
-  imports: [SharedModule, DelonRoutingModule, DownFileModule, FullContentModule, QRModule, G2MiniBarModule],
+  imports: [SharedModule, DelonRoutingModule, DownFileModule, FullContentModule, NzQRCodeModule, G2MiniBarModule],
   declarations: COMPONENTS
 })
 export class DelonModule {}
diff --git a/src/app/routes/delon/qr/qr.component.html b/src/app/routes/delon/qr/qr.component.html
@@ -1,23 +1,19 @@
 <div class="alain-default__content-title">
   <h1>
     二维码
-    <a href="//ng-alain.com/components/qr" target="_blank">Document</a>
+    <a href="https://ng.ant.design/components/qr-code" target="_blank">Document</a>
   </h1>
 </div>
 <nz-card>
   <nz-row [nzGutter]="24">
     <nz-col [nzSpan]="8" class="text-center">
-      <qr
-        [value]="value"
-        [background]="background"
-        [backgroundAlpha]="backgroundAlpha"
-        [foreground]="foreground"
-        [foregroundAlpha]="foregroundAlpha"
-        [level]="level"
-        [mime]="mime"
-        [padding]="padding"
-        [size]="size"
-        style="border: 1px solid #999"
+      <nz-qrcode
+        [nzValue]="value"
+        [nzBgColor]="background"
+        [nzColor]="foreground"
+        [nzLevel]="level"
+        [nzSize]="size"
+        [nzPadding]="padding"
       />
     </nz-col>
     <nz-col [nzSpan]="16">
@@ -27,13 +23,6 @@ <h1>
           <nz-form-control [nzSpan]="16">
             <nz-input-group>
               <input nz-input type="color" [(ngModel)]="background" [ngModelOptions]="{ standalone: true }" style="width: 100px" />
-              <nz-input-number
-                [(ngModel)]="backgroundAlpha"
-                [nzMin]="0"
-                [nzMax]="1"
-                [nzStep]="0.1"
-                [ngModelOptions]="{ standalone: true }"
-              />
             </nz-input-group>
           </nz-form-control>
         </nz-form-item>
@@ -42,13 +31,6 @@ <h1>
           <nz-form-control [nzSpan]="16">
             <nz-input-group>
               <input nz-input type="color" [(ngModel)]="foreground" [ngModelOptions]="{ standalone: true }" style="width: 100px" />
-              <nz-input-number
-                [(ngModel)]="foregroundAlpha"
-                [nzMin]="0"
-                [nzMax]="1"
-                [nzStep]="0.1"
-                [ngModelOptions]="{ standalone: true }"
-              />
             </nz-input-group>
           </nz-form-control>
         </nz-form-item>
@@ -63,16 +45,6 @@ <h1>
             </nz-select>
           </nz-form-control>
         </nz-form-item>
-        <nz-form-item>
-          <nz-form-label [nzSpan]="8">Mime</nz-form-label>
-          <nz-form-control [nzSpan]="16">
-            <nz-select [(ngModel)]="mime" [ngModelOptions]="{ standalone: true }">
-              <nz-option nzValue="image/png" nzLabel="image/png" />
-              <nz-option nzValue="image/jpeg" nzLabel="image/jpeg" />
-              <nz-option nzValue="image/gif" nzLabel="image/gif" />
-            </nz-select>
-          </nz-form-control>
-        </nz-form-item>
         <nz-form-item>
           <nz-form-label [nzSpan]="8">内边距</nz-form-label>
           <nz-form-control [nzSpan]="16">

diff --git a/src/app/routes/delon/qr/qr.component.ts b/src/app/routes/delon/qr/qr.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import type { ERROR_LEVEL_MAP } from 'ng-zorro-antd/qr-code/qrcode';
 
 @Component({
   selector: 'app-qr',
@@ -7,10 +8,8 @@ import { Component } from '@angular/core';
 export class QRComponent {
   value = 'https://ng-alain.com/';
   background = '#ffffff';
-  backgroundAlpha = 1.0;
   foreground = '#000000';
-  foregroundAlpha = 1.0;
-  level = 'L';
+  level: keyof typeof ERROR_LEVEL_MAP = 'L';
   mime = 'image/png';
   padding = 10;
   size = 220;