perf: change acl perform

Author: ibuler

src/app/elements/asset-tree/asset-tree.component.scss

@@ -117,14 +117,14 @@
           &.active {
             .fa-search {
               position: absolute;
-              left: 5px;
+              left: 2px;
             }
 
             .tree-input {
               @include flex(center);
               opacity: 1;
               width: 130px;
-              padding-left: 30px;
+              padding-left: 25px;
             }
           }
         }

src/app/elements/chat/chat.component.scss

@@ -8,7 +8,7 @@ nz-float-button {
 .chat-container {
   position: fixed;
   bottom: 200px;
-  right: 5px;
+  right: 9px;
   z-index: 99999;
   cursor: move;
   user-select: none;

src/app/services/connect-token/acl-dialog/acl-dialog.component.html

@@ -1,47 +1,53 @@
 <div class="acl-dialog">
-  <h3 nz-typography nzTitle>{{ content.title | translate }}</h3>
+  <div *nzModalTitle>
+    {{ content?.title | translate }}
+  </div>
 
-  <div class="nz-modal-content">
+  <ng-container>
     <div [class.error-message]="content.isError">
-      <nz-alert [nzType]="content.isError ? 'error' : 'info'" class="content-message" [nzDescription]="alertContent">
+      <nz-alert
+        [nzType]="content.isError ? 'error' : 'info'"
+        class="content-message"
+        [nzDescription]="alertContent"
+      >
         <ng-template #alertContent>
           <div>{{ content.message | translate }}</div>
 
           <ng-container *ngIf="content.customContent?.type === 'link'">
-            <br>
-            <a [href]="content.customContent.link">{{ content.customContent.linkText | translate }}</a>
+            <br />
+            <a [href]="content.customContent.link">{{
+              content.customContent.linkText | translate
+            }}</a>
           </ng-container>
 
           <ng-container *ngIf="content.customContent?.type === 'ticket'">
-            <br><br>
-            {{ 'Assignees' | translate }}: <b>{{ content.customContent.assignees }}</b>
-            <br><br>
+            <br /><br />
+            {{ 'Assignees' | translate }}: <b>{{ content.customContent.assignees }}</b> <br /><br />
             {{ 'Do not close this page' | translate }}
-            <br><br>
+            <br /><br />
             <div class="loading-bar">
               <div class="loading-bar-progress"></div>
             </div>
           </ng-container>
         </ng-template>
       </nz-alert>
     </div>
-  </div>
+  </ng-container>
 
   <!-- Face verify capture iframe -->
   <ng-container *ngIf="code === 'face_verify_capture' && faceVerifyUrl">
     <iframe
       [src]="faceVerifyUrl"
       allow="camera"
       sandbox="allow-scripts allow-same-origin"
-      style="width: 100%; height: 540px;border: none;">
+      style="width: 100%; height: 540px; border: none"
+    >
     </iframe>
   </ng-container>
 
   <div *nzModalFooter class="nz-modal-footer">
     <ng-container *ngFor="let action of content.actions">
-      <button nz-button
-              [nzType]="action.type || 'default'"
-              (click)="action.callback()">
+      <button nz-button [nzType]="action.type || 'default'" (click)="action.callback()">
         {{ action.text | translate }}
       </button>
     </ng-container>

src/app/services/connect-token/acl-dialog/acl-dialog.component.ts

@@ -63,6 +63,9 @@ export class ElementACLDialogComponent implements OnInit {
 
   get errorDetail() {
     let error = this.data.error.error;
+    if (this.data.error.status === 500) {
+      error = this.data.error.message;
+    }
     if (Array.isArray(error)) {
       error = error.join(' ');
     } else if (typeof error === 'object') {
@@ -108,7 +111,6 @@ export class ElementACLDialogComponent implements OnInit {
         this.code = 'face_verify_capture';
         this.content = this.getDialogContent(this.code);
 
-
         const timer = setInterval(() => {
           this._http.getFaceVerifyState(connToken.face_token).subscribe(async data => {
             if (data.is_finished) {
@@ -279,7 +281,7 @@ export class ElementACLDialogComponent implements OnInit {
 
           if (state === 'approved') {
             const msg = await this._i18n.t('Login review approved');
-            this._toastr.success(msg, '', { nzClass: 'custom-success-notification' }  );
+            this._toastr.success(msg, '', { nzClass: 'custom-success-notification' });
             this.dialogRef.close(this.connectionToken);
           } else if (state === 'rejected') {
             this.code = 'ticket_review_rejected';
@@ -362,7 +364,7 @@ export class ElementACLDialogComponent implements OnInit {
       },
       acl_face_online_not_supported: {
         title: 'Login reminder',
-        message: 'FaceOnlineNotSupported',
+        message: this.errorDetail,
         isError: true,
         actions: [
           {
@@ -407,7 +409,7 @@ export class ElementACLDialogComponent implements OnInit {
             text: 'Copy link',
             type: 'primary',
             callback: () => {
-              vm.onCopySuccess(this.connectionToken?.from_ticket_info?.ticket_detail_page_url)
+              vm.onCopySuccess(this.connectionToken?.from_ticket_info?.ticket_detail_page_url);
             }
           }
         ]
@@ -455,13 +457,10 @@ export class ElementACLDialogComponent implements OnInit {
             callback: () => vm.closeDialog()
           }
         ]
-      }
-    };
-
-    return (
-      contentMap[code] || {
-        title: 'Login reminder',
-        message: this.data.errorDetail,
+      },
+      unknown: {
+        title: 'Unknown error',
+        message: this.errorDetail,
         isError: true,
         actions: [
           {
@@ -470,6 +469,8 @@ export class ElementACLDialogComponent implements OnInit {
           }
         ]
       }
-    );
+    };
+
+    return contentMap[code] || contentMap.unknown;
   }
 }

src/sass/theme/main.ts

@@ -37,8 +37,10 @@ export const mainTheme = () => {
     '--el-icon-color': '#ffffff',
     // icon hover 时的颜色
     '--el-icon-hover-color': '#d6cbcb',
-    '--el-border-color-x': '#202020',
-    '--el-border-color-y': '#202020',
+    // '--el-border-color-x': darken(30, '#000000', 0.4),
+    // '--el-border-color-y': darken(30, '#000000', 0.4),
+    '--el-border-color-x': 'rgba(0, 0, 0, 0.3)',
+    '--el-border-color-y': 'rgba(0, 0, 0, 0.3)',
 
     // 头部导航背景
     '--el-nav-bg-color': lighten(0),