fix: custom iconpark component

Postcatlab · Jun 29, 2022 · dae6cfa · dae6cfa
1 parent 17252e6
commit dae6cfa
Show file tree

Hide file tree

Showing 16 changed files with 93 additions and 105 deletions.
diff --git a/src/workbench/browser/src/app/eoui/eoui.module.ts b/src/workbench/browser/src/app/eoui/eoui.module.ts
@@ -16,13 +16,14 @@ import { EoMessageComponent } from './message/eo-message.component';
 
 // ! Directive
 import { CellDirective } from './table/eo-table/cell.directive';
+import { EoIconparkIconModule } from 'eo/workbench/browser/src/app/eoui/iconpark-icon/eo-iconpark-icon.module';
 
 const antdModules = [NzTableModule, NzIconModule, NzButtonModule, NzInputModule, NzSelectModule];
 
 const DEFAULT_ACE_CONFIG: AceConfigInterface = {};
 @NgModule({
   declarations: [EoTableComponent, EoEditorComponent, EoMessageComponent, CellDirective],
-  imports: [CommonModule, FormsModule, AceModule, ...antdModules],
+  imports: [CommonModule, FormsModule, AceModule, EoIconparkIconModule, ...antdModules],
   exports: [EoTableComponent, EoEditorComponent, EoMessageComponent, CellDirective],
   providers: [
     {

diff --git a/src/workbench/browser/src/app/eoui/iconpark-icon/eo-iconpark-icon.component.ts b/src/workbench/browser/src/app/eoui/iconpark-icon/eo-iconpark-icon.component.ts
@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  // standalone: true,
+  selector: 'eo-iconpark-icon',
+  template: `<iconpark-icon [name]="name"></iconpark-icon>`,
+  styleUrls: [],
+})
+export class EoIconparkIconComponent {
+  @Input() name: string;
+
+  constructor() {}
+}
diff --git a/src/workbench/browser/src/app/eoui/iconpark-icon/eo-iconpark-icon.module.ts b/src/workbench/browser/src/app/eoui/iconpark-icon/eo-iconpark-icon.module.ts
@@ -0,0 +1,11 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { EoIconparkIconComponent } from './eo-iconpark-icon.component';
+
+@NgModule({
+  declarations: [EoIconparkIconComponent],
+  imports: [CommonModule],
+  exports: [EoIconparkIconComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class EoIconparkIconModule {}
diff --git a/src/workbench/browser/src/app/pages/api/api.component.html b/src/workbench/browser/src/app/pages/api/api.component.html
@@ -6,7 +6,8 @@
         <nz-tab [nzTitle]="apiTitle">
           <ng-template #apiTitle>
             <span nzTooltipTitle="Collections" nz-tooltip class="text-lg">
-              <iconpark-icon name="folder-open"></iconpark-icon>
+              <eo-iconpark-icon name="folder-open">
+              </eo-iconpark-icon>
             </span>
           </ng-template>
           <div class="inner-content">
@@ -16,15 +17,17 @@
         <nz-tab [nzTitle]="historyTitle">
           <ng-template #historyTitle>
             <span nzTooltipTitle="History" nz-tooltip class="text-lg">
-              <iconpark-icon name="history"></iconpark-icon>
+              <eo-iconpark-icon name="history">
+              </eo-iconpark-icon>
             </span>
           </ng-template>
           <eo-history></eo-history>
         </nz-tab>
         <nz-tab [nzTitle]="envTitle">
           <ng-template #envTitle>
             <span nzTooltipTitle="Environment" nz-tooltip class="text-lg">
-              <iconpark-icon name="instruction"></iconpark-icon>
+              <eo-iconpark-icon name="instruction">
+              </eo-iconpark-icon>
             </span>
           </ng-template>
           <eo-env></eo-env>
@@ -39,14 +42,8 @@
         <div class="flex items-center tabs-bar">
           <eo-api-tab class="fg1"></eo-api-tab>
           <div class="flex items-center fix-mt">
-            <nz-select
-              [(ngModel)]="envUuid"
-              [(nzOpen)]="isOpen"
-              (nzOpenChange)="handleEnvSelectStatus($event)"
-              [nzDropdownRender]="renderTemplate"
-              nzAllowClear
-              nzPlaceHolder="Environment"
-            >
+            <nz-select [(ngModel)]="envUuid" [(nzOpen)]="isOpen" (nzOpenChange)="handleEnvSelectStatus($event)"
+              [nzDropdownRender]="renderTemplate" nzAllowClear nzPlaceHolder="Environment">
               <nz-option *ngFor="let item of envList" [nzValue]="item.uuid" [nzLabel]="item.name"></nz-option>
             </nz-select>
             <ng-template #renderTemplate>
@@ -58,14 +55,8 @@
         <div class="content_container {{ this.id ? 'has_tab_page' : '' }}">
           <nz-tabset class="inside_page_tab" [nzAnimated]="false" *ngIf="this.id" nzLinkRouter>
             <nz-tab *ngFor="let tab of TABS">
-              <a
-                *nzTabLink
-                nz-tab-link
-                (click)="clickContentMenu(tab)"
-                [routerLink]="[tab.routerLink]"
-                queryParamsHandling="merge"
-                >{{ tab.title }}</a
-              >
+              <a *nzTabLink nz-tab-link (click)="clickContentMenu(tab)" [routerLink]="[tab.routerLink]"
+                queryParamsHandling="merge">{{ tab.title }}</a>
             </nz-tab>
           </nz-tabset>
           <router-outlet></router-outlet>

diff --git a/src/workbench/browser/src/app/pages/api/api.component.scss b/src/workbench/browser/src/app/pages/api/api.component.scss
@@ -3,7 +3,7 @@ nz-content {
 }
 
 nz-select {
-  width: 120px;
+  width: 126px;
 }
 
 nz-sider {

diff --git a/src/workbench/browser/src/app/pages/api/api.module.ts b/src/workbench/browser/src/app/pages/api/api.module.ts
@@ -1,4 +1,4 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
@@ -42,6 +42,7 @@ import { ApiOverviewComponent } from './overview/api-overview.component';
 import { HistoryComponent } from './history/eo-history.component';
 import { ApiMockComponent } from './mock/api-mock.component';
 import { IndexedDBStorage } from 'eo/workbench/browser/src/app/shared/services/storage/IndexedDB/lib/';
+import { SharedModule } from 'eo/workbench/browser/src/app/shared/shared.module';
 
 const COMPONENTS = [
   ApiComponent,
@@ -84,9 +85,9 @@ const COMPONENTS = [
     NzModalModule,
     NzSelectModule,
     NzPopconfirmModule,
+    SharedModule,
   ],
   declarations: [...COMPONENTS],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   exports: [],
   providers: [ElectronService, ApiService, IndexedDBStorage],
 })

diff --git a/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.html b/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.html
@@ -3,7 +3,8 @@
   <div class="btn ml-3 text-base flex shrink-0 items-center justify-center" nzType="primary" nz-button nz-dropdown
     [nzDropdownMenu]="menu" nzPlacement="bottomRight"
     (click)="operateApiEvent({ event: $event, eventName: 'gotoAddApi' })">
-    <iconpark-icon name="plus"></iconpark-icon>
+    <eo-iconpark-icon name="plus">
+    </eo-iconpark-icon>
   </div>
   <nz-dropdown-menu #menu="nzDropdownMenu">
     <ul nz-menu>
@@ -21,7 +22,8 @@
     <div class="pl5 tree_node" *ngIf="node.origin?.isFixed">
       <div class="flex items-center">
         <span class="mr-2 text-sm">
-          <iconpark-icon name="home"></iconpark-icon>
+          <eo-iconpark-icon name="home">
+          </eo-iconpark-icon>
         </span>
         <span class="text_omit node_title">{{ node.title }}</span>
       </div>

diff --git a/src/workbench/browser/src/app/pages/api/history/eo-history.component.html b/src/workbench/browser/src/app/pages/api/history/eo-history.component.html
@@ -1,31 +1,20 @@
 <div>
   <div class="flex items-center justify-between h-10 px-2 history-title">
     <span class="font-bold">History</span>
-    <div
-      class="flex items-center justify-center cursor-pointer shrink-0 h-7"
-      nzTooltipTitle="Clear All"
-      nz-tooltip
-      nz-popconfirm
-      nzPopconfirmTitle="Are you sure delete all history?"
-      (nzOnConfirm)="clearAllHistory()"
-      (nzOnCancel)="cancel()"
-      nzOkText="Yes"
-      nzCancelText="No"
-      nzPopconfirmPlacement="topRight"
-    >
+    <div class="flex items-center justify-center cursor-pointer shrink-0 h-7" nzTooltipTitle="Clear All" nz-tooltip
+      nz-popconfirm nzPopconfirmTitle="Are you sure delete all history?" (nzOnConfirm)="clearAllHistory()"
+      (nzOnCancel)="cancel()" nzOkText="Yes" nzCancelText="No" nzPopconfirmPlacement="topRight">
       <span class="flex items-center justify-center icon">
-        <iconpark-icon name="delete"></iconpark-icon>
+        <eo-iconpark-icon name="delete">
+        </eo-iconpark-icon>
       </span>
     </div>
   </div>
-  <div
-    *ngFor="let item of historyList"
-    class="flex items-center h-8 p-2 text-xs cursor-pointer hover:bg-gray-100"
-    (click)="gotoTestHistory(item)"
-  >
+  <div *ngFor="let item of historyList" class="flex items-center h-8 p-2 text-xs cursor-pointer hover:bg-gray-100"
+    (click)="gotoTestHistory(item)">
     <span class="block w-12 font-light method_type" [ngClass]="methodColor(item.request.method)">{{
       item.request.method
-    }}</span>
+      }}</span>
     <span class="flex-1 overflow-hidden text-gray-600 truncate">{{ item.request.uri }}</span>
   </div>
 </div>
diff --git a/src/workbench/browser/src/app/pages/navbar/navbar.component.html b/src/workbench/browser/src/app/pages/navbar/navbar.component.html
@@ -7,17 +7,19 @@
   </div>
   <div class="flex items-center">
     <span class="icon mx-1 flex items-center justify-center" title="打开设置项" (click)="handleShowModal()">
-      <iconpark-icon name="setting-two"></iconpark-icon>
+      <eo-iconpark-icon name="setting-two">
+      </eo-iconpark-icon>
     </span>
     <!-- <span
       class="icon mx-1 flex items-center justify-center"
       title="{{ dataSourceText }}数据源"
       (click)="switchDataSource()"
     >
-      <iconpark-icon [name]="isRemote ? 'link-cloud-sucess' : 'link-cloud-faild'"></iconpark-icon>
+      <eo-iconpark-icon [name]="isRemote ? 'link-cloud-sucess' : 'link-cloud-faild'"></eo-iconpark-icon>
     </span> -->
     <span class="icon mx-1 flex items-center justify-center" nz-dropdown [nzDropdownMenu]="menu">
-      <iconpark-icon name="help"></iconpark-icon>
+      <eo-iconpark-icon name="help">
+      </eo-iconpark-icon>
     </span>
     <nz-dropdown-menu #menu="nzDropdownMenu">
       <ul nz-menu nzSelectable>
@@ -27,29 +29,15 @@
       </ul>
     </nz-dropdown-menu>
     <div *ngIf="!OS_TYPE.includes('mac') && isElectron">
-      <span
-        nz-tooltip
-        nzTooltipTitle="最小化"
-        nzTooltipPlacement="left"
-        class="iconfont icon-jianhao mr10 fs24 cp"
-        (click)="minimize()"
-      >
+      <span nz-tooltip nzTooltipTitle="最小化" nzTooltipPlacement="left" class="iconfont icon-jianhao mr10 fs24 cp"
+        (click)="minimize()">
       </span>
-      <span
-        nz-tooltip
-        [nzTooltipTitle]="isMaximized ? '向下还原' : '最大化'"
-        nzTooltipPlacement="left"
+      <span nz-tooltip [nzTooltipTitle]="isMaximized ? '向下还原' : '最大化'" nzTooltipPlacement="left"
         class="iconfont icon-{{ isMaximized ? 'copy' : 'duoxuanweixuanzhong' }} mr10 fs24 cp"
-        (click)="toggleMaximize()"
-      >
+        (click)="toggleMaximize()">
       </span>
-      <span
-        nz-tooltip
-        nzTooltipTitle="关闭"
-        nzTooltipPlacement="left"
-        class="iconfont icon-guanbi pr15 fs24 cp"
-        (click)="close()"
-      >
+      <span nz-tooltip nzTooltipTitle="关闭" nzTooltipPlacement="left" class="iconfont icon-guanbi pr15 fs24 cp"
+        (click)="close()">
       </span>
     </div>
     <div *ngIf="!isElectron">

diff --git a/src/workbench/browser/src/app/pages/navbar/navbar.module.ts b/src/workbench/browser/src/app/pages/navbar/navbar.module.ts
@@ -1,13 +1,13 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 import { NavbarComponent } from 'eo/workbench/browser/src/app/pages/navbar/navbar.component';
 import { SettingModule } from 'eo/workbench/browser/src/app/shared/components/setting/setting.module';
 import { CommonModule } from '@angular/common';
+import { SharedModule } from 'eo/workbench/browser/src/app/shared/shared.module';
 
 @NgModule({
-  imports: [CommonModule,NzDropDownModule,NzToolTipModule, SettingModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [CommonModule, NzDropDownModule, NzToolTipModule, SettingModule, SharedModule],
   declarations: [NavbarComponent],
   exports: [NavbarComponent],
 })

diff --git a/src/workbench/browser/src/app/shared/components/env/env.component.html b/src/workbench/browser/src/app/shared/components/env/env.component.html
@@ -1,19 +1,17 @@
 <div class="flex flex-col">
   <div class="flex items-center justify-between h-10 px-2 header">
     <span class="font-bold">Environment</span>
-    <div
-      class="flex items-center justify-center text-base btn shrink-0 h-7"
-      (click)="handleAddEnv()"
-      nz-tooltip
-      nzTooltipTitle="New Environment"
-    >
-      <iconpark-icon name="plus"></iconpark-icon>
+    <div class="flex items-center justify-center text-base btn shrink-0 h-7" (click)="handleAddEnv()" nz-tooltip
+      nzTooltipTitle="New Environment">
+      <eo-iconpark-icon name="plus">
+      </eo-iconpark-icon>
     </div>
   </div>
   <div *ngFor="let item of envList" class="flex items-center justify-between p-2 env-item">
     <span class="flex-1 name" (click)="handleEditEnv(item.uuid)">{{ item.name }}</span>
     <a nz-popconfirm nzPopconfirmTitle="是否确定删除?" (nzOnConfirm)="handleDeleteEnv($event, item.uuid)">
-      <iconpark-icon name="delete"></iconpark-icon>
+      <eo-iconpark-icon name="delete">
+      </eo-iconpark-icon>
     </a>
   </div>
 </div>
@@ -34,13 +32,11 @@
           </nz-form-control>
         </nz-form-item>
         <p class="b-2">环境变量：在接口文档或测试的过程中，使用{{ varName }}即可引用该环境变量</p>
-        <eo-table
-          [(model)]="envInfo.parameters"
-          [columns]="envListColumns"
-          [dataModel]="{ name: '', value: '', description: '' }"
-        >
+        <eo-table [(model)]="envInfo.parameters" [columns]="envListColumns"
+          [dataModel]="{ name: '', value: '', description: '' }">
           <ng-template cell="action" let-scope="scope" let-index="index">
-            <iconpark-icon name="delete"></iconpark-icon>
+            <eo-iconpark-icon name="delete">
+            </eo-iconpark-icon>
           </ng-template>
         </eo-table>
       </form>

diff --git a/src/workbench/browser/src/app/shared/components/env/env.module.ts b/src/workbench/browser/src/app/shared/components/env/env.module.ts
@@ -1,4 +1,4 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 
@@ -16,6 +16,7 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 import { EouiModule } from '../../../eoui/eoui.module';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { ElectronService } from '../../../core/services';
+import { SharedModule } from 'eo/workbench/browser/src/app/shared/shared.module';
 
 const ANTDMODULES = [
   NzModalModule,
@@ -31,8 +32,7 @@ const ANTDMODULES = [
 ];
 @NgModule({
   declarations: [EnvComponent],
-  imports: [FormsModule, CommonModule, EouiModule, ...ANTDMODULES],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [FormsModule, CommonModule, EouiModule, SharedModule, ...ANTDMODULES],
   exports: [EnvComponent],
   providers: [ElectronService],
 })

diff --git a/src/workbench/browser/src/app/shared/components/setting/common/language-swtcher.componet.ts b/src/workbench/browser/src/app/shared/components/setting/common/language-swtcher.componet.ts
@@ -11,16 +11,16 @@ import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
       [nzCustomTemplate]="defaultTemplate"
     >
       <nz-option nzCustomContent nzValue="en" nzLabel="English">
-        <iconpark-icon name="language"></iconpark-icon>
+        <eo-iconpark-icon name="language"></eo-iconpark-icon>
         English
       </nz-option>
       <nz-option nzCustomContent nzValue="zh-CN" nzLabel="简体中文">
-        <iconpark-icon name="language"></iconpark-icon>
+        <eo-iconpark-icon name="language"></eo-iconpark-icon>
         简体中文
       </nz-option>
     </nz-select>
     <ng-template #defaultTemplate let-selected>
-      <iconpark-icon name="language"></iconpark-icon>
+      <eo-iconpark-icon name="language"></eo-iconpark-icon>
       {{ selected.nzLabel }}
     </ng-template>
   `,

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
@@ -1,4 +1,4 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { SettingComponent } from './setting.component';
@@ -56,7 +56,6 @@ const ANTDMODULES = [
     LanguageSwticherComponent,
     AboutComponent,
   ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [FormsModule, ReactiveFormsModule, SharedModule, CommonModule, ...ANTDMODULES],
   exports: [SettingComponent, SelectThemeComponent],
   providers: [ElectronService],

diff --git a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.html b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.html
@@ -1,15 +1,10 @@
 <div class="eo_sidebar" [ngClass]="{ eo_sidebar_shrink: isCollapsed }">
-  <a
-    (click)="clickModule(item)"
-    *ngFor="let item of this.modules"
-    class="sidebar_item"
-    nz-tooltip
-    nzTooltipPlacement="right"
-    [nzTooltipTitle]="item.moduleName"
-    [ngClass]="{ sidebar_item_active: item.moduleID === this.sidebar.currentModule.moduleID }"
-  >
+  <a (click)="clickModule(item)" *ngFor="let item of this.modules" class="sidebar_item" nz-tooltip
+    nzTooltipPlacement="right" [nzTooltipTitle]="item.moduleName"
+    [ngClass]="{ sidebar_item_active: item.moduleID === this.sidebar.currentModule.moduleID }">
     <i class="icon">
-      <iconpark-icon [name]="item.icon"></iconpark-icon>
+      <eo-iconpark-icon [name]="item.icon">
+      </eo-iconpark-icon>
     </i>
     <span class="label mt-1" *ngIf="!sidebar.collapsed">{{ item.moduleName }}</span>
   </a>