feat: update setting component

src/workbench/browser/src/app/shared/components/navbar/navbar.component.html

@@ -94,5 +94,4 @@ <h4 class="title">{{ dataSourceText }}数据源</h4>
     </div>
   </div>
 </div>
-
-<!-- <eo-setting [(isVisible)]="isSettingVisible"></eo-setting> -->
+<eo-setting [(isShowModal)]="isSettingVisible"></eo-setting>

src/workbench/browser/src/app/shared/components/setting/setting.component.html

@@ -17,3 +17,115 @@
     </ul>
   </ng-template>
 </ng-container> -->
+
+<nz-modal [(nzVisible)]="isShowModal" nzWidth="70%" [nzFooter]="null" nzTitle="配置" (nzOnCancel)="handleCancel()">
+  <section *nzModalContent class="container">
+    <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)"
+        >
+          {{ node.title }}
+        </nz-tree-node-option>
+      </nz-tree-node>
+
+      <nz-tree-node *nzTreeNodeDef="let node; when: hasChild" nzTreeNodePadding>
+        <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)"
+        >
+          {{ 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"
+    >
+      <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)">
+          <ng-container *ngIf="module.properties[field]?.label">
+            <nz-form-label nzFor="{{ field }}" [nzRequired]="module.properties[field]?.required" class="label">
+              {{ module.properties[field]?.label }}
+            </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>
+          <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"
+                placeholder="{{ module.properties[field]?.placeholder ?? '请输入' + module.properties[field]?.label }}"
+                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
+              >
+            </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
+              >
+            </ng-container>
+
+            <!-- 组件类型 -->
+            <ng-container *ngIf="module.properties[field]?.type === 'component'">
+              <!-- 默认主题组件 -->
+              <eo-select-theme *ngIf="settings[field] === 'eo-select-theme'"></eo-select-theme>
+              <!-- 关于eopai -->
+              <eo-about *ngIf="settings[field] === 'eo-about'"></eo-about>
+            </ng-container>
+          </nz-form-control>
+        </nz-form-item>
+      </div>
+    </form>
+    <nz-empty *ngIf="!currentConfiguration.length" nzNotFoundImage="simple" [nzNotFoundContent]="contentTpl">
+      <ng-template #contentTpl>
+        <span>暂无配置项</span>
+      </ng-template>
+    </nz-empty>
+  </section>
+  <!-- <div *nzModalFooter class="footer"> -->
+  <!-- <button nz-button nzType="primary" (click)="handleSave()">保存</button>
+    <button nz-button nzType="default" (click)="handleCancel()">取消</button> -->
+  <!-- </div> -->
+</nz-modal>
+<!-- </ng-container> -->

src/workbench/browser/src/app/shared/components/setting/setting.component.ts

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { SelectionModel } from '@angular/cdk/collections';
 import { FlatTreeControl } from '@angular/cdk/tree';
@@ -34,6 +34,7 @@ interface FlatNode {
   styleUrls: ['./setting.component.scss'],
 })
 export class SettingComponent implements OnInit {
+  @Output() isShowModalChange = new EventEmitter<any>();
   objectKeys = Object.keys;
   /** 是否远程数据源 */
   get isRemote() {
@@ -68,7 +69,7 @@ export class SettingComponent implements OnInit {
 
   /** current configuration */
   currentConfiguration = [];
-  isVisible = false;
+  // ! isVisible = false;
   $isShowModal = false;
   /** all configure */
   settings = {};
@@ -86,7 +87,7 @@ export class SettingComponent implements OnInit {
     return this.$isShowModal;
   }
 
-  set isShowModal(val) {
+  @Input() set isShowModal(val) {
     this.$isShowModal = val;
     if (val) {
       this.init();
@@ -272,7 +273,7 @@ export class SettingComponent implements OnInit {
     if (!window.eo && !window.eo?.getFeature) {
       return;
     }
-    this.isVisible = true;
+    // ! this.isVisible = true;
     this.settings = {};
     this.nestedSettings = {};
     // 获取本地设置
@@ -408,6 +409,7 @@ export class SettingComponent implements OnInit {
     } catch (error) {
     } finally {
       this.isShowModal = false;
+      this.isShowModalChange.emit(false);
     }
   }
 }

src/workbench/browser/src/app/shared/components/setting/setting.module.ts

@@ -16,10 +16,11 @@ import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { NzPopoverModule } from 'ng-zorro-antd/popover';
 import { NzEmptyModule } from 'ng-zorro-antd/empty';
 import { NzTabsModule } from 'ng-zorro-antd/tabs';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
 import { NzTreeViewModule } from 'ng-zorro-antd/tree-view';
 
 import { ElectronService } from '../../../core/services';
-import { SharedModule } from '../../shared.module';
+import { SelectThemeComponent } from 'eo/workbench/browser/src/app/shared/components/toolbar/select-theme/select-theme.component';
 
 const ANTDMODULES = [
   NzModalModule,
@@ -37,11 +38,12 @@ const ANTDMODULES = [
   NzEmptyModule,
   NzDropDownModule,
   NzPopoverModule,
+  NzRadioModule,
 ];
 @NgModule({
-  declarations: [SettingComponent],
-  imports: [FormsModule, ReactiveFormsModule, SharedModule, CommonModule, ...ANTDMODULES],
-  exports: [SettingComponent],
+  declarations: [SettingComponent, SelectThemeComponent],
+  imports: [FormsModule, ReactiveFormsModule, CommonModule, ...ANTDMODULES],
+  exports: [SettingComponent, SelectThemeComponent],
   providers: [ElectronService],
 })
 export class SettingModule {}

src/workbench/browser/src/app/shared/shared.module.ts

@@ -2,7 +2,6 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {
   PageNotFoundComponent,
-  SelectThemeComponent,
   ToolbarComponent,
   SidebarComponent,
   NavbarComponent,
@@ -29,17 +28,12 @@ import { ModalService } from './services/modal.service';
 import { PageBlankComponent } from './components/page-blank/page-blank.component';
 import { PageFeaturePreviewComponent } from './components/page-feature-preview/page-feature-preview.component';
 import { RouterModule } from '@angular/router';
+import { SettingModule } from 'eo/workbench/browser/src/app/shared/components/setting/setting.module';
 
-const COMPONENTS = [
-  ToolbarComponent,
-  SelectThemeComponent,
-  SidebarComponent,
-  NavbarComponent,
-  PageNotFoundComponent,
-  AboutComponent,
-];
+const COMPONENTS = [ToolbarComponent, SidebarComponent, NavbarComponent, PageNotFoundComponent, AboutComponent];
 @NgModule({
   imports: [
+    SettingModule,
     CommonModule,
     FormsModule,
     RouterModule,
@@ -58,7 +52,7 @@ const COMPONENTS = [
   ],
   declarations: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe, PageBlankComponent, PageFeaturePreviewComponent],
   providers: [ModalService],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  // schemas: [CUSTOM_ELEMENTS_SCHEMA],
   exports: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe],
 })
 export class SharedModule {}