chore: update qr demo

hbyunzai · Mar 14, 2024 · 9c217f9 · 9c217f9
1 parent 3e5b992
commit 9c217f9
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 45 deletions.
diff --git a/src/app/routes/yelon/qr/qr.component.html b/src/app/routes/yelon/qr/qr.component.html
@@ -1,23 +1,19 @@
-<div class="yunzai-default__content-title">
+<div class="alain-default__content-title">
   <h1>
     二维码
-    <a href="//ng.yunzainfo.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/yelon/qr/qr.component.ts b/src/app/routes/yelon/qr/qr.component.ts
@@ -1,16 +1,15 @@
 import { Component } from '@angular/core';
+import type { ERROR_LEVEL_MAP } from 'ng-zorro-antd/qr-code/qrcode';
 
 @Component({
   selector: 'app-qr',
   templateUrl: './qr.component.html'
 })
 export class QRComponent {
-  value = 'https://ng.yunzainfo.com/';
+  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;

diff --git a/src/app/routes/yelon/yelon.module.ts b/src/app/routes/yelon/yelon.module.ts
@@ -1,13 +1,12 @@
 import { NgModule } from '@angular/core';
+import { SharedModule } from '@shared';
 import { DownFileModule } from '@yelon/abc/down-file';
 import { FullContentModule } from '@yelon/abc/full-content';
-import { QRModule } from '@yelon/abc/qr';
 import { G2MiniBarModule } from '@yelon/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';
-import { YelonRoutingModule } from './yelon-routing.module';
 import { DownFileComponent } from './downfile/downfile.component';
 import { YelonFormComponent } from './form/form.component';
 import { GuardAdminComponent } from './guard/admin.component';
@@ -19,6 +18,7 @@ import { QRComponent } from './qr/qr.component';
 import { STDemoComponent } from './st/st.component';
 import { UtilComponent } from './util/util.component';
 import { XlsxComponent } from './xlsx/xlsx.component';
+import { YelonRoutingModule } from './yelon-routing.module';
 import { ZipComponent } from './zip/zip.component';
 
 const COMPONENTS = [
@@ -39,7 +39,7 @@ const COMPONENTS = [
 ];
 
 @NgModule({
-  imports: [SharedModule, YelonRoutingModule, DownFileModule, FullContentModule, QRModule, G2MiniBarModule],
+  imports: [SharedModule, YelonRoutingModule, DownFileModule, FullContentModule, NzQRCodeModule, G2MiniBarModule],
   declarations: COMPONENTS
 })
 export class YelonModule {}