update css style

src/workbench/browser/src/app/shared/components/setting/common/data-storage.component.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ElectronService } from 'eo/workbench/browser/src/app/core/services/electron/electron.service';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
 @Component({
@@ -9,15 +10,20 @@ import { NzMessageService } from 'ng-zorro-antd/message';
     <form nz-form nzLayout="vertical" [formGroup]="validateForm" (ngSubmit)="submitForm()">
       <nz-form-item>
         <nz-form-control>
-          <nz-select formControlName="eoapi-common.dataStorage" i18n-nzPlaceHolder="@@DataSource" nzPlaceHolder="Data Storage">
+          <nz-select
+            formControlName="eoapi-common.dataStorage"
+            i18n-nzPlaceHolder="@@DataSource"
+            nzPlaceHolder="Data Storage"
+          >
             <nz-option nzValue="http" i18n-nzLabel="@@Remote Server" nzLabel="Remote Server"></nz-option>
             <nz-option nzValue="local" i18n-nzLabel nzLabel="Localhost"></nz-option>
           </nz-select>
         </nz-form-control>
         <div class="text-[12px] mt-[8px] text-gray-400">
           <p i18n>Localhost: Store the data locally. You can only use the product on the current computer.</p>
           <p i18n>
-            Remote Server: Store data on a remote server to facilitate cross device use of the product.
+            Remote Server: Store data on a remote server to facilitate cross device use of the product. Only the client
+            can connect to the remote server. You need to download the client first.
             <a href="https://eoapi.io/docs/storage.html" target="_blank" class="eo_link"> Learn more..</a>
           </p>
         </div>
@@ -62,7 +68,7 @@ export class DataStorageComponent implements OnInit, OnChanges {
   validateForm!: FormGroup;
   loading = false;
 
-  constructor(private fb: FormBuilder, private message: NzMessageService) {}
+  constructor(private fb: FormBuilder, private message: NzMessageService, private electronService: ElectronService) {}
 
   ngOnInit(): void {
     this.validateForm = this.fb.group({
@@ -121,6 +127,11 @@ export class DataStorageComponent implements OnInit, OnChanges {
   }
 
   async submitForm() {
+    if (!this.electronService.isElectron) {
+      return this.message.error(
+        $localize`Only the client can connect to the remote server. You need to download the client first.`
+      );
+    }
     if (this.validateForm.valid) {
       console.log('submit', this.validateForm.value);
       this.loading = true;

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

@@ -1,13 +1,16 @@
 import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
 import { LanguageService } from 'eo/workbench/browser/src/app/core/services/language/language.service';
+import { debounceTime } from 'rxjs';
 
 @Component({
   selector: 'eo-extension-setting',
   template: `
+    <div class="font-bold text-lg mb-2" i18n>Extensions</div>
     <form nz-form [nzLayout]="'vertical'" [formGroup]="validateForm" class="form">
       <div *ngFor="let module of extensitonConfigurations">
-        <h2 class="title" *ngIf="module.title">{{ module.title }}</h2>
+        <h2 class="title" [id]="module.moduleID" *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">
@@ -69,6 +72,13 @@ import { LanguageService } from 'eo/workbench/browser/src/app/core/services/lang
         </nz-form-item>
       </div>
     </form>
+    <nz-empty *ngIf="!extensitonConfigurations.length" nzNotFoundImage="simple" [nzNotFoundContent]="contentTpl">
+      <ng-template #contentTpl>
+        <span i18n
+          >No plugins are currently installed,<a class="eo_link" (click)="navToExtensionList()"> go to install </a>
+        </span>
+      </ng-template>
+    </nz-empty>
   `,
   styles: [
     `
@@ -79,22 +89,76 @@ import { LanguageService } from 'eo/workbench/browser/src/app/core/services/lang
   ],
 })
 export class ExtensionSettingComponent implements OnInit {
+  @Input() localSettings: object = {};
+  @Input() extensitonConfigurations = [];
   @Input() model: object = {};
   @Output() modelChange: EventEmitter<any> = new EventEmitter();
-  @Input() validateForm!: FormGroup;
-  @Input() extensitonConfigurations = [];
+  validateForm!: FormGroup;
   objectKeys = Object.keys;
 
-  constructor(public languageService: LanguageService) {}
+  constructor(public languageService: LanguageService, private router: Router, private fb: FormBuilder) {}
 
   ngOnInit(): void {
-    console.log('extensitonConfigurations', this.extensitonConfigurations);
-    this.model['eoapi-language'] = this.languageService.systemLanguage;
+    this.init();
+  }
+
+  private init() {
+    const controls = {};
+    console.log('model', this.model, controls);
+
+    /** Generate settings model based on configuration configuration */
+    this.extensitonConfigurations.forEach((item) => {
+      console.log('item', item);
+      if (Array.isArray(item)) {
+        item.forEach((n) => {
+          n.properties = this.appendModuleID(n.properties, n.moduleID);
+          this.setSettingsModel(n.properties, controls);
+        });
+      } else {
+        item.properties = this.appendModuleID(item.properties, 'eoapi-extensions');
+        this.setSettingsModel(item.properties, controls);
+      }
+    });
+
+    this.validateForm = this.fb.group(controls);
+    this.validateForm.valueChanges.pipe(debounceTime(300)).subscribe(this.handleChange);
+  }
+
+  // Appends the module ID to the plug-in property
+  private appendModuleID = (properties, moduleID) =>
+    Object.keys(properties).reduce((prev, key) => {
+      prev[`${moduleID}.${key}`] = properties[key];
+      return prev;
+    }, {});
+
+  /**
+   * set data
+   *
+   * @param properties
+   */
+  private setSettingsModel(properties, controls) {
+    //  Flat configuration object
+    Object.keys(properties).forEach((fieldKey) => {
+      const props = properties[fieldKey];
+      this.model[fieldKey] = this.localSettings?.[fieldKey] ?? props.default;
+      // Extensible to add more default checks
+      if (props.required) {
+        controls[fieldKey] = [null, [Validators.required]];
+      } else {
+        controls[fieldKey] = [null];
+      }
+    });
   }
 
-  handleChange(localeID) {
-    this.model['eoapi-language'] = localeID;
+  handleChange = () => {
+    console.log('this.model', this.model);
     this.modelChange.emit(this.model);
-    this.languageService.changeLanguage(localeID);
+  };
+
+  navToExtensionList() {
+    this.router.navigate(['home/extension/list'], {
+      queryParams: { type: 'all' },
+    });
+    // this.handleCancel();
   }
 }

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

@@ -24,30 +24,24 @@
       </nz-tree-view>
     </div>
     <nz-divider nzType="vertical" class="divider"></nz-divider>
-    <div class="overflow-auto">
+    <div (scroll)="handleScroll($event)" class="setting-container overflow-auto scroll-smooth mr-[14px] pr-[12px]">
       <!-- Data Storage -->
-      <eo-data-storage [(model)]="settings"></eo-data-storage>
+      <eo-data-storage [(model)]="settings" [id]="treeNodes[0].moduleID"></eo-data-storage>
       <nz-divider></nz-divider>
       <!-- Language -->
-      <eo-language-switcher [(model)]="settings"> </eo-language-switcher>
+      <eo-language-switcher [(model)]="settings" [id]="treeNodes[1].moduleID"> </eo-language-switcher>
+      <nz-divider></nz-divider>
+      <eo-extension-setting [(model)]="settings" [localSettings]="localSettings" [id]="treeNodes[2].moduleID"
+        [extensitonConfigurations]="extensitonConfigurations"></eo-extension-setting>
       <nz-divider></nz-divider>
-      <eo-extension-setting [(model)]="settings" [extensitonConfigurations]="extensitonConfigurations"
-        [validateForm]="validateForm"></eo-extension-setting>
       <!-- About -->
-      <eo-about></eo-about>
+      <eo-about [id]="treeNodes[3].moduleID"></eo-about>
     </div>
-    <nz-empty *ngIf="!currentConfiguration.length && selected === 'eoapi-extensions'" nzNotFoundImage="simple"
-      [nzNotFoundContent]="contentTpl">
-      <ng-template #contentTpl>
-        <span i18n>No plugins are currently installed,<a class="eo_link" (click)="navToExtensionList()"> go to install
-          </a>
-        </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> -->
+<!-- </ng-container> -->

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

@@ -43,6 +43,18 @@
   font-size: 12px;
 }
 
+.setting-container {
+  &::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    border: 2px solid #fff;
+    background-color: rgba(0,0,0,.3);
+}
+&::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 12px;
+}
+}
+
 ::ng-deep .sidebar_setting_popover{
   padding: 0;
   .ant-popover-inner-content {