fix: setting button can not click

Postcatlab · Jun 23, 2022 · 720c669 · 720c669
1 parent ce192d6
commit 720c669
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 76 deletions.
diff --git a/src/workbench/browser/src/app/shared/components/navbar/navbar.component.scss b/src/workbench/browser/src/app/shared/components/navbar/navbar.component.scss
@@ -7,6 +7,7 @@
   cursor: pointer;
 }
 .icon {
+  -webkit-app-region: no-drag;
   width: 30px;
   height: 30px;
   font-size: 1.5em;

diff --git a/src/workbench/browser/src/app/shared/components/setting/setting.component.html b/src/workbench/browser/src/app/shared/components/setting/setting.component.html
@@ -23,11 +23,8 @@
     <nz-tree-view [nzTreeControl]="treeControl" [nzDataSource]="dataSource" [nzBlockNode]="true" class="tree-view">
       <nz-tree-node *nzTreeNodeDef="let node" nzTreeNodePadding>
         <nz-tree-node-toggle nzTreeNodeNoopToggle></nz-tree-node-toggle>
-        <nz-tree-node-option
-          [nzDisabled]="node.disabled"
-          [nzSelected]="selectListSelection.isSelected(node)"
-          (nzClick)="selectModule(node)"
-        >
+        <nz-tree-node-option [nzDisabled]="node.disabled" [nzSelected]="selectListSelection.isSelected(node)"
+          (nzClick)="selectModule(node)">
           {{ node.title }}
         </nz-tree-node-option>
       </nz-tree-node>
@@ -36,24 +33,15 @@
         <nz-tree-node-toggle>
           <i nz-icon nzType="caret-down" nzTreeNodeToggleRotateIcon></i>
         </nz-tree-node-toggle>
-        <nz-tree-node-option
-          [nzDisabled]="node.disabled"
-          [nzSelected]="selectListSelection.isSelected(node)"
-          (nzClick)="selectModule(node)"
-        >
+        <nz-tree-node-option [nzDisabled]="node.disabled" [nzSelected]="selectListSelection.isSelected(node)"
+          (nzClick)="selectModule(node)">
           {{ node.title }}
         </nz-tree-node-option>
       </nz-tree-node>
     </nz-tree-view>
     <nz-divider nzType="vertical" class="divider"></nz-divider>
-    <form
-      *ngIf="currentConfiguration.length"
-      nz-form
-      [nzLayout]="'vertical'"
-      [formGroup]="validateForm"
-      (ngSubmit)="handleSave()"
-      class="form"
-    >
+    <form *ngIf="currentConfiguration.length" nz-form [nzLayout]="'vertical'" [formGroup]="validateForm"
+      (ngSubmit)="handleSave()" class="form">
       <div *ngFor="let module of currentConfiguration">
         <h2 class="title" *ngIf="module.title">{{ module.title }}</h2>
         <nz-form-item nz-col class="fg1" *ngFor="let field of objectKeys(module.properties)">
@@ -63,47 +51,30 @@ <h2 class="title" *ngIf="module.title">{{ module.title }}</h2>
             </nz-form-label>
           </ng-container>
           <!-- 二级说明 -->
-          <div
-            *ngIf="module.properties[field]?.type !== 'boolean' && module.properties[field]?.description"
-            class="description"
-            [innerHTML]="md.render(module.properties[field]?.description)"
-          ></div>
+          <div *ngIf="module.properties[field]?.type !== 'boolean' && module.properties[field]?.description"
+            class="description">
+            <eo-shadow-dom [html]="module.properties[field]?.description || ''"></eo-shadow-dom>
+          </div>
           <nz-form-control nzErrorTip="请输入{{ module.properties[field]?.label }}" class="form-control">
             <!-- 字符串类型 -->
             <ng-container *ngIf="module.properties[field]?.type === 'string'">
-              <input
-                type="text"
-                nz-input
-                id="{{ field }}"
-                [disabled]="module.properties[field]?.disabled"
+              <input type="text" nz-input id="{{ field }}" [disabled]="module.properties[field]?.disabled"
                 placeholder="{{ module.properties[field]?.placeholder ?? '请输入' + module.properties[field]?.label }}"
-                formControlName="{{ field }}"
-                [(ngModel)]="settings[field]"
-              />
+                formControlName="{{ field }}" [(ngModel)]="settings[field]" />
             </ng-container>
 
             <!-- 布尔类型 -->
             <ng-container *ngIf="module.properties[field]?.type === 'boolean'">
-              <label
-                nz-checkbox
-                [(ngModel)]="settings[field]"
-                id="{{ field }}"
-                [nzDisabled]="module.properties[field]?.disabled"
-                formControlName="{{ field }}"
-                >{{ module.properties[field]?.description }}</label
-              >
+              <label nz-checkbox [(ngModel)]="settings[field]" id="{{ field }}"
+                [nzDisabled]="module.properties[field]?.disabled" formControlName="{{ field }}">{{
+                module.properties[field]?.description }}</label>
             </ng-container>
 
             <!-- 数字类型 -->
             <ng-container *ngIf="module.properties[field]?.type === 'number'">
-              <nz-input-number
-                [(ngModel)]="settings[field]"
-                id="{{ field }}"
-                [nzDisabled]="module.properties[field]?.disabled"
-                formControlName="{{ field }}"
-              >
-                {{ module.properties[field]?.description }}</nz-input-number
-              >
+              <nz-input-number [(ngModel)]="settings[field]" id="{{ field }}"
+                [nzDisabled]="module.properties[field]?.disabled" formControlName="{{ field }}">
+                {{ module.properties[field]?.description }}</nz-input-number>
             </ng-container>
 
             <!-- 组件类型 -->

diff --git a/src/workbench/browser/src/app/shared/components/setting/setting.component.ts b/src/workbench/browser/src/app/shared/components/setting/setting.component.ts
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { SelectionModel } from '@angular/cdk/collections';
@@ -9,7 +8,6 @@ import { eoapiSettings } from './eoapi-settings/';
 import { Message, MessageService } from '../../../shared/services/message';
 import { Subject, takeUntil } from 'rxjs';
 import { NzMessageService } from 'ng-zorro-antd/message';
-import MarkdownIt from 'markdown-it/dist/markdown-it';
 import { RemoteService } from 'eo/workbench/browser/src/app/shared/services/remote/remote.service';
 
 interface TreeNode {
@@ -52,7 +50,6 @@ export class SettingComponent implements OnInit {
     disabled: !!node.disabled,
   });
   selectListSelection = new SelectionModel<FlatNode>();
-  md = new MarkdownIt();
   treeControl: any = new FlatTreeControl<FlatNode>(
     (node) => node.level,
     (node) => node.expandable
@@ -102,9 +99,7 @@ export class SettingComponent implements OnInit {
     private messageService: MessageService,
     private message: NzMessageService,
     private remoteService: RemoteService
-  ) {
-    this.customLinkRender();
-  }
+  ) {}
 
   ngOnInit(): void {
     this.init();
@@ -130,28 +125,6 @@ export class SettingComponent implements OnInit {
 
   hasChild = (_: number, node: FlatNode): boolean => node.expandable;
 
-  customLinkRender() {
-    const defaultRender =
-      this.md.renderer.rules.link_open ||
-      function (tokens, idx, options, env, self) {
-        return self.renderToken(tokens, idx, options);
-      };
-
-    this.md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
-      // If you are sure other plugins can't add `target` - drop check below
-      const aIndex = tokens[idx].attrIndex('target');
-
-      if (aIndex < 0) {
-        tokens[idx].attrPush(['target', '_blank']); // add new attribute
-      } else {
-        tokens[idx].attrs[aIndex][1] = '_blank'; // replace value of existing attr
-      }
-
-      // pass token to default renderer.
-      return defaultRender(tokens, idx, options, env, self);
-    };
-  }
-
   /**
    * 切换数据源
    */

diff --git a/src/workbench/browser/src/app/shared/components/setting/setting.module.ts b/src/workbench/browser/src/app/shared/components/setting/setting.module.ts
@@ -23,6 +23,7 @@ import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 import { ElectronService } from '../../../core/services';
 import { SelectThemeComponent } from 'eo/workbench/browser/src/app/shared/components/toolbar/select-theme/select-theme.component';
 import { AboutComponent } from 'eo/workbench/browser/src/app/shared/components/about/about.component';
+import { ShadowDomEncapsulationComponent } from 'eo/workbench/browser/src/app/shared/components/shadow/shadow-dom-encapsulation.component';
 
 const ANTDMODULES = [
   NzModalModule,
@@ -44,7 +45,7 @@ const ANTDMODULES = [
   NzDescriptionsModule,
 ];
 @NgModule({
-  declarations: [SettingComponent, SelectThemeComponent, AboutComponent],
+  declarations: [SettingComponent, SelectThemeComponent, AboutComponent, ShadowDomEncapsulationComponent],
   imports: [FormsModule, ReactiveFormsModule, CommonModule, ...ANTDMODULES],
   exports: [SettingComponent, SelectThemeComponent],
   providers: [ElectronService],