From 4dc8ada45b743d97996dfae680ce05e7ae0faf4a Mon Sep 17 00:00:00 2001 From: buqiyuan <1743369777@qq.com> Date: Thu, 12 May 2022 18:27:41 +0800 Subject: [PATCH 01/14] feat(UI): global settings --- src/core/market/test/package.json | 91 ++++++++ .../eoapi-settings/common-settings.json | 30 +++ .../eoapi-settings/extensiton-settings.json | 11 + .../eoapi-settings/feature-settings.json | 25 +++ .../setting/eoapi-settings/index.ts | 16 ++ .../setting/extensions-setting.json | 42 ++++ .../components/setting/setting.component.html | 45 +++- .../components/setting/setting.component.scss | 7 +- .../components/setting/setting.component.ts | 198 ++++++++++++++++-- .../components/setting/setting.module.ts | 3 + .../browser/src/app/shared/shared.module.ts | 4 +- 11 files changed, 446 insertions(+), 26 deletions(-) create mode 100644 src/core/market/test/package.json create mode 100644 src/workbench/browser/src/app/shared/components/setting/eoapi-settings/common-settings.json create mode 100644 src/workbench/browser/src/app/shared/components/setting/eoapi-settings/extensiton-settings.json create mode 100644 src/workbench/browser/src/app/shared/components/setting/eoapi-settings/feature-settings.json create mode 100644 src/workbench/browser/src/app/shared/components/setting/eoapi-settings/index.ts create mode 100644 src/workbench/browser/src/app/shared/components/setting/extensions-setting.json diff --git a/src/core/market/test/package.json b/src/core/market/test/package.json new file mode 100644 index 000000000..071d1ee12 --- /dev/null +++ b/src/core/market/test/package.json @@ -0,0 +1,91 @@ +{ + "name": "market", + "version": "0.1.0", + "author": "Eolink", + "private": true, + "description": "API Toolkit Market", + "belongs": [ + "default" + ], + "logo": "icon-apps", + "main_debug": "http://localhost:8080", + "moduleID": "default", + "moduleName": "拓展广场", + "moduleType": "app", + "features": { + "export": { + "action": "export_openapi", + "label": "OpenAPI", + "description": "Export data as OpenAPI format", + "icon": "./images/openapi.svg", + "extension": "json" + }, + "configuration": { + "title": "测试拓展", + "properties": { + "core.market.url": { + "type": "string", + "required": true, + "default": "http://127.0.0.1", + "label": "服务器地址2", + "description": "插件安装7来源的服务器地址" + }, + "core.market.test": { + "type": "string", + "required": false, + "default": "6667776", + "label": "测试配置3", + "description": "这是另外一个测试的配置" + } + } + } + }, + "scripts": { + "serve": "vue-cli-service serve", + "build": "vue-cli-service build", + "lint": "vue-cli-service lint" + }, + "main": "dist/index.html", + "dependencies": { + "@ant-design/icons-vue": "^6.1.0", + "ant-design-vue": "^2.2.8", + "core-js": "^3.8.3", + "ky": "^0.30.0", + "pinia": "^2.0.13", + "vue": "^3.2.13", + "vue-router": "^4.0.14" + }, + "devDependencies": { + "@babel/core": "^7.12.16", + "@babel/eslint-parser": "^7.12.16", + "@vue/cli-plugin-babel": "~5.0.0", + "@vue/cli-plugin-eslint": "~5.0.0", + "@vue/cli-service": "~5.0.0", + "eslint": "^7.32.0", + "eslint-plugin-vue": "^8.0.3", + "less": "^4.1.2", + "less-loader": "^10.2.0", + "vue-cli-plugin-windicss": "~1.1.3", + "windicss": "^3.5.1" + }, + "eslintConfig": { + "root": true, + "env": { + "node": true + }, + "extends": [ + "plugin:vue/vue3-essential", + "eslint:recommended" + ], + "parserOptions": { + "parser": "@babel/eslint-parser" + }, + "rules": {} + }, + "browserslist": [ + "> 1%", + "last 2 versions", + "not dead", + "not ie 11" + ] +} diff --git a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/common-settings.json b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/common-settings.json new file mode 100644 index 000000000..22838acb3 --- /dev/null +++ b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/common-settings.json @@ -0,0 +1,30 @@ +{ + "private": true, + "name": "Eoapi-Common", + "version": "0.0.1", + "displayName": "通用", + "author": "eoapi", + "publisher": "eoapi", + "contributes": { + "configuration": { + "type": "object", + "title": "通用", + "properties": { + "common.remoteServer.url": { + "type": "string", + "required": true, + "default": "http://127.0.0.1", + "label": "远程服务器地址", + "description": "从远程服务器存取数据，配置后支持多人协作" + }, + "common.remoteServer.token": { + "type": "string", + "required": false, + "default": "", + "label": "Token", + "description": "远程服务器Token，配置后才可访问" + } + } + } + } +} diff --git a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/extensiton-settings.json b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/extensiton-settings.json new file mode 100644 index 000000000..600787f1d --- /dev/null +++ b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/extensiton-settings.json @@ -0,0 +1,11 @@ +{ + "private": true, + "name": "Eoapi-Extensions", + "version": "0.0.1", + "displayName": "扩展", + "author": "eoapi", + "publisher": "eoapi", + "contributes": { + "configuration": [] + } +} diff --git a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/feature-settings.json b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/feature-settings.json new file mode 100644 index 000000000..af4add58d --- /dev/null +++ b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/feature-settings.json @@ -0,0 +1,25 @@ +{ + "private": true, + "name": "Eoapi-Features", + "version": "0.0.1", + "displayName": "功能", + "author": "eoapi", + "publisher": "eoapi", + "contributes": { + "configuration": [ + { + "type": "object", + "title": "API测试", + "order": 1, + "properties": { + "features.remoteServer.url": { + "type": "boolean", + "default": true, + "label": "自动重定向", + "description": "" + } + } + } + ] + } +} diff --git a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/index.ts b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/index.ts new file mode 100644 index 000000000..9b3abcbb4 --- /dev/null +++ b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/index.ts @@ -0,0 +1,16 @@ +import commonSettings from './common-settings.json'; +import extensitonSettings from './extensiton-settings.json'; +import featureSettings from './feature-settings.json'; + +export type eoapiSettingsKey = keyof typeof eoapiSettings; + +export const eoapiSettings = { + /** 通用设置 */ + 'Eoapi-Common': commonSettings, + /** 功能设置 */ + 'Eoapi-Extensions': extensitonSettings, + /** 扩展配置 */ + 'Eoapi-Features': featureSettings, +} as const; + +export default eoapiSettings; diff --git a/src/workbench/browser/src/app/shared/components/setting/extensions-setting.json b/src/workbench/browser/src/app/shared/components/setting/extensions-setting.json new file mode 100644 index 000000000..d1577b9df --- /dev/null +++ b/src/workbench/browser/src/app/shared/components/setting/extensions-setting.json @@ -0,0 +1,42 @@ +{ + "extensions": [ + { + "type": "object", + "title": "Sync Eolink", + "properties": { + "sync-eolink.secret.key": { + "type": "string", + "label": "eo-secret-key", + "default": "", + "placeholder": "单行输入", + "description": "空间秘钥" + }, + "sync-eolink.push.way": { + "type": "string", + "label": "推送方式", + "default": "", + "placeholder": "请选择", + "description": "二级说明" + }, + "sync-eolink.push.switch": { + "type": "boolean", + "label": "开关", + "default": "", + "placeholder": "请选择", + "description": "二级说明" + } + } + }, + { + "title": "Sync Zion", + "properties": { + "sync-zion.server.port": { + "type": "number", + "default": "8080", + "label": "端口号", + "description": "服务端口号" + } + } + } + ] +} 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 index 391dcd73a..1a39eeee7 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.html +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.html @@ -3,18 +3,43 @@ -
-
- - - - {{ field.label }} - - +
+ + + + + + {{ node.title }} + + + + + + + + + {{ node.title }} + + + + +
+
+

{{ module.title }}

+ + {{ module.properties[item.key]?.label }} + + - - +
+
+
diff --git a/src/workbench/browser/src/app/shared/components/setting/setting.component.scss b/src/workbench/browser/src/app/shared/components/setting/setting.component.scss index 8c1064c52..57d780013 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.scss +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.scss @@ -13,4 +13,9 @@ .footer { text-align: right; -} \ No newline at end of file +} + +.title { + font-size: 20px; + font-weight: 700; +} 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 index 1cb41d8fe..a0b7cfdd2 100644 --- 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,6 +1,26 @@ import { Component, OnInit } from '@angular/core'; import { NzTabPosition } from 'ng-zorro-antd/tabs'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { SelectionModel } from '@angular/cdk/collections'; +import { FlatTreeControl } from '@angular/cdk/tree'; +import { NzTreeFlatDataSource, NzTreeFlattener } from 'ng-zorro-antd/tree-view'; +import { eoapiSettings } from './eoapi-settings/'; +import extensionsSettings from './extensions-setting.json'; + +interface TreeNode { + name: string; + title: string; + disabled?: boolean; + children?: TreeNode[]; + configuration?: any[]; +} + +interface FlatNode { + expandable: boolean; + name: string; + level: number; + disabled: boolean; +} @Component({ selector: 'eo-setting', @@ -8,18 +28,167 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms'; styleUrls: ['./setting.component.scss'], }) export class SettingComponent implements OnInit { + private transformer = (node: TreeNode, level: number): FlatNode => ({ + ...node, + expandable: !!node.children && node.children.length > 0, + name: node.name, + level, + disabled: !!node.disabled, + }); + selectListSelection = new SelectionModel(); + + treeControl = new FlatTreeControl( + (node) => node.level, + (node) => node.expandable + ); + + treeFlattener = new NzTreeFlattener( + this.transformer, + (node) => node.level, + (node) => node.expandable, + (node) => node.children + ); + + dataSource = new NzTreeFlatDataSource(this.treeControl, this.treeFlattener); + + /** 当前配置项 */ + currentConfiguration = []; isVisible = false; isModal = false; position: NzTabPosition = 'left'; + /** 所有模块 */ modules = []; + /** 所有配置 */ settings = {}; validateForm!: FormGroup; - constructor( - private fb: FormBuilder, - ) {} + constructor(private fb: FormBuilder) {} ngOnInit(): void { - this.init(); + // this.init(); + this.isVisible = true; + this.parseSettings(); + console.log('setings', this.settings); + } + + hasChild = (_: number, node: FlatNode): boolean => node.expandable; + + /** + * 设置数据 + * @param properties + */ + private setSettingsModel(properties, controls) { + // Object.keys(properties).forEach((key) => { + // const keyArr = key.split('.'); + // const keyArrL = keyArr.length - 1; + // keyArr.reduce((p, k, i) => { + // const isLast = i === keyArrL; + // p[k] ??= isLast ? properties[key].default : {}; + // return p[k]; + // }, this.settings); + // }); + Object.keys(properties).forEach((fieldKey) => { + const props = properties[fieldKey]; + this.settings[fieldKey] = props.default; + // 可扩展加入更多默认校验 + if (props.required) { + controls[fieldKey] = [null, [Validators.required]]; + } else { + controls[fieldKey] = [null]; + } + }); + } + + /** + * 根据key路径获取对应的配置的值 + * @param key + * @returns + */ + getConfiguration(key: string) { + return key.split('.').reduce((p, k) => p[k], this.settings); + } + /** + * 获取模块的标题 + * @param module + * @returns + */ + getModuleTitle(module: any): string { + const title = module?.contributes?.title ?? module?.title; + return title; + } + + selectModule(node) { + console.log('selectModule', node); + this.currentConfiguration = node.configuration || []; + console.log('this.currentConfiguration', this.currentConfiguration); + this.selectListSelection.toggle(node); + } + + /** + * 解析所有模块的配置信息 + */ + private parseSettings() { + const controls = {}; + // 所有设置 + const allSettings = [ + eoapiSettings['Eoapi-Common'], + eoapiSettings['Eoapi-Extensions'], + eoapiSettings['Eoapi-Features'], + ]; + // 所有配置 + const allConfiguration = allSettings.map((n) => n.contributes.configuration); + // 第三方扩展 + extensionsSettings.extensions.forEach((item) => { + eoapiSettings['Eoapi-Extensions'].contributes.configuration.push(item); + }); + /** 根据configuration配置生成settings model */ + allConfiguration.forEach((item) => { + if (Array.isArray(item)) { + item.forEach((n) => this.setSettingsModel(n.properties, controls)); + } else { + const properties = item.properties; + this.setSettingsModel(properties, controls); + } + }); + + const generateTreeData = ( + configurations: typeof allConfiguration[number] | Array = allConfiguration + ) => { + return (Array.isArray(configurations) ? configurations : [configurations]).reduce((prev, curr) => { + if (Array.isArray(curr)) { + return prev.concat(generateTreeData(curr)); + } + const treeItem: TreeNode = { + name: curr.title, + title: curr.title, + configuration: [].concat(curr), + }; + return prev.concat(treeItem); + }, []); + }; + const treeData = allSettings.reduce((prev, curr) => { + let treeItem: TreeNode; + const configuration = curr.contributes.configuration; + if (Array.isArray(configuration)) { + treeItem = { + name: curr.name, + title: curr.displayName || curr.name, + children: generateTreeData(configuration), + configuration, + }; + } else { + treeItem = { + name: curr.name, + title: curr.displayName || configuration.title || curr.name, + configuration: [configuration], + }; + } + return prev.concat(treeItem); + }, []); + console.log('treeData', treeData); + this.modules = allSettings; + this.dataSource.setData(treeData); + this.treeControl.expandAll(); + this.validateForm = this.fb.group(controls); } private init() { @@ -37,7 +206,7 @@ export class SettingComponent implements OnInit { } const fields = []; for (let field_key in feature['properties']) { - let field = feature['properties'][field_key]; + let field = feature['properties'][field_key]; // 加入允许的type限制 if (!field['type'] || !field['label']) { continue; @@ -46,13 +215,16 @@ export class SettingComponent implements OnInit { continue; } const name = key + '_' + field_key; - field = Object.assign({ - name: name, - key: field_key, - required: false, - default: '', - description: '' - }, field); + field = Object.assign( + { + name: name, + key: field_key, + required: false, + default: '', + description: '', + }, + field + ); fields.push(field); if (!this.settings[key][field_key]) { this.settings[key][field_key] = field['default']; @@ -61,7 +233,7 @@ export class SettingComponent implements OnInit { if (field.required) { controls[name] = [null, [Validators.required]]; } else { - controls[name] = [null]; + controls[name] = [null]; } } this.modules.push({ 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 index e06b5bf6e..8f9f32223 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.module.ts +++ b/src/workbench/browser/src/app/shared/components/setting/setting.module.ts @@ -11,6 +11,8 @@ import { NzFormModule } from 'ng-zorro-antd/form'; import { NzSelectModule } from 'ng-zorro-antd/select'; import { NzDividerModule } from 'ng-zorro-antd/divider'; import { NzTabsModule } from 'ng-zorro-antd/tabs'; +import { NzTreeViewModule } from 'ng-zorro-antd/tree-view'; + import { ElectronService } from '../../../core/services'; const ANTDMODULES = [ @@ -23,6 +25,7 @@ const ANTDMODULES = [ NzSelectModule, NzDividerModule, NzTabsModule, + NzTreeViewModule, ]; @NgModule({ declarations: [SettingComponent], diff --git a/src/workbench/browser/src/app/shared/shared.module.ts b/src/workbench/browser/src/app/shared/shared.module.ts index 615658f05..4813dff87 100644 --- a/src/workbench/browser/src/app/shared/shared.module.ts +++ b/src/workbench/browser/src/app/shared/shared.module.ts @@ -25,7 +25,7 @@ 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'; -const COMPONENTS = [ToolbarComponent, SelectThemeComponent, SidebarComponent, NavbarComponent,PageNotFoundComponent]; +const COMPONENTS = [ToolbarComponent, SelectThemeComponent, SidebarComponent, NavbarComponent, PageNotFoundComponent]; @NgModule({ imports: [ CommonModule, @@ -39,7 +39,7 @@ const COMPONENTS = [ToolbarComponent, SelectThemeComponent, SidebarComponent, Na NzToolTipModule, NzResultModule, NzDropDownModule, - NzSpinModule + NzSpinModule, ], declarations: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe, PageBlankComponent, PageFeaturePreviewComponent], providers: [ModalService], From 2ccd3f7f6972ace95f01f3d7a6f2032ea1c6887a Mon Sep 17 00:00:00 2001 From: buqiyuan <1743369777@qq.com> Date: Thu, 12 May 2022 19:06:05 +0800 Subject: [PATCH 02/14] update code --- .../eoapi-settings/feature-settings.json | 2 +- .../setting/extensions-setting.json | 2 +- .../components/setting/setting.component.html | 20 +++++++++++++++++-- .../components/setting/setting.component.ts | 6 +++--- .../components/setting/setting.module.ts | 4 ++++ 5 files changed, 27 insertions(+), 7 deletions(-) diff --git a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/feature-settings.json b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/feature-settings.json index af4add58d..e1e9dfe08 100644 --- a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/feature-settings.json +++ b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/feature-settings.json @@ -16,7 +16,7 @@ "type": "boolean", "default": true, "label": "自动重定向", - "description": "" + "description": "自动重定向至redirect url" } } } diff --git a/src/workbench/browser/src/app/shared/components/setting/extensions-setting.json b/src/workbench/browser/src/app/shared/components/setting/extensions-setting.json index d1577b9df..941d54dcc 100644 --- a/src/workbench/browser/src/app/shared/components/setting/extensions-setting.json +++ b/src/workbench/browser/src/app/shared/components/setting/extensions-setting.json @@ -21,7 +21,7 @@ "sync-eolink.push.switch": { "type": "boolean", "label": "开关", - "default": "", + "default": true, "placeholder": "请选择", "description": "二级说明" } 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 index 1a39eeee7..c1dfdc7f0 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.html +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.html @@ -32,8 +32,24 @@

{{ module.title }}

{{ module.properties[item.key]?.label }} - + + + + + + + + + + + + + + {{module.properties[item.key]?.description}} +
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 index a0b7cfdd2..440a286fd 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.ts +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.ts @@ -67,7 +67,6 @@ export class SettingComponent implements OnInit { // this.init(); this.isVisible = true; this.parseSettings(); - console.log('setings', this.settings); } hasChild = (_: number, node: FlatNode): boolean => node.expandable; @@ -145,8 +144,7 @@ export class SettingComponent implements OnInit { if (Array.isArray(item)) { item.forEach((n) => this.setSettingsModel(n.properties, controls)); } else { - const properties = item.properties; - this.setSettingsModel(properties, controls); + this.setSettingsModel(item.properties, controls); } }); @@ -185,6 +183,8 @@ export class SettingComponent implements OnInit { return prev.concat(treeItem); }, []); console.log('treeData', treeData); + console.log('setings', this.settings); + console.log('controls', controls); this.modules = allSettings; this.dataSource.setData(treeData); this.treeControl.expandAll(); 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 index 8f9f32223..9beec03fe 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.module.ts +++ b/src/workbench/browser/src/app/shared/components/setting/setting.module.ts @@ -7,6 +7,8 @@ import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzListModule } from 'ng-zorro-antd/list'; import { NzInputModule } from 'ng-zorro-antd/input'; +import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; +import { NzInputNumberModule } from 'ng-zorro-antd/input-number'; import { NzFormModule } from 'ng-zorro-antd/form'; import { NzSelectModule } from 'ng-zorro-antd/select'; import { NzDividerModule } from 'ng-zorro-antd/divider'; @@ -26,6 +28,8 @@ const ANTDMODULES = [ NzDividerModule, NzTabsModule, NzTreeViewModule, + NzCheckboxModule, + NzInputNumberModule, ]; @NgModule({ declarations: [SettingComponent], From ced540449f73221d7a10e042fd755ddd68d9fc2d Mon Sep 17 00:00:00 2001 From: bqy_fe <1743369777@qq.com> Date: Fri, 13 May 2022 09:05:25 +0800 Subject: [PATCH 03/14] remove redundant code --- src/core/market/test/package.json | 91 ---------- .../eoapi-settings/feature-settings.json | 13 ++ .../setting/extensions-setting.json | 2 +- .../components/setting/setting.component.html | 99 +++++------ .../components/setting/setting.component.scss | 16 +- .../components/setting/setting.component.ts | 166 ++++++++++-------- 6 files changed, 168 insertions(+), 219 deletions(-) delete mode 100644 src/core/market/test/package.json diff --git a/src/core/market/test/package.json b/src/core/market/test/package.json deleted file mode 100644 index 071d1ee12..000000000 --- a/src/core/market/test/package.json +++ /dev/null @@ -1,91 +0,0 @@ -{ - "name": "market", - "version": "0.1.0", - "author": "Eolink", - "private": true, - "description": "API Toolkit Market", - "belongs": [ - "default" - ], - "logo": "icon-apps", - "main_debug": "http://localhost:8080", - "moduleID": "default", - "moduleName": "拓展广场", - "moduleType": "app", - "features": { - "export": { - "action": "export_openapi", - "label": "OpenAPI", - "description": "Export data as OpenAPI format", - "icon": "./images/openapi.svg", - "extension": "json" - }, - "configuration": { - "title": "测试拓展", - "properties": { - "core.market.url": { - "type": "string", - "required": true, - "default": "http://127.0.0.1", - "label": "服务器地址2", - "description": "插件安装7来源的服务器地址" - }, - "core.market.test": { - "type": "string", - "required": false, - "default": "6667776", - "label": "测试配置3", - "description": "这是另外一个测试的配置" - } - } - } - }, - "scripts": { - "serve": "vue-cli-service serve", - "build": "vue-cli-service build", - "lint": "vue-cli-service lint" - }, - "main": "dist/index.html", - "dependencies": { - "@ant-design/icons-vue": "^6.1.0", - "ant-design-vue": "^2.2.8", - "core-js": "^3.8.3", - "ky": "^0.30.0", - "pinia": "^2.0.13", - "vue": "^3.2.13", - "vue-router": "^4.0.14" - }, - "devDependencies": { - "@babel/core": "^7.12.16", - "@babel/eslint-parser": "^7.12.16", - "@vue/cli-plugin-babel": "~5.0.0", - "@vue/cli-plugin-eslint": "~5.0.0", - "@vue/cli-service": "~5.0.0", - "eslint": "^7.32.0", - "eslint-plugin-vue": "^8.0.3", - "less": "^4.1.2", - "less-loader": "^10.2.0", - "vue-cli-plugin-windicss": "~1.1.3", - "windicss": "^3.5.1" - }, - "eslintConfig": { - "root": true, - "env": { - "node": true - }, - "extends": [ - "plugin:vue/vue3-essential", - "eslint:recommended" - ], - "parserOptions": { - "parser": "@babel/eslint-parser" - }, - "rules": {} - }, - "browserslist": [ - "> 1%", - "last 2 versions", - "not dead", - "not ie 11" - ] -} diff --git a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/feature-settings.json b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/feature-settings.json index e1e9dfe08..6d4c4557e 100644 --- a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/feature-settings.json +++ b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/feature-settings.json @@ -19,6 +19,19 @@ "description": "自动重定向至redirect url" } } + }, + { + "type": "object", + "title": "扩展", + "order": 2, + "properties": { + "features.remoteServer.url": { + "type": "boolean", + "default": true, + "label": "自动更新", + "description": "勾选后，检测到拓展升级后自动从远程下载最新的插件更新" + } + } } ] } diff --git a/src/workbench/browser/src/app/shared/components/setting/extensions-setting.json b/src/workbench/browser/src/app/shared/components/setting/extensions-setting.json index 941d54dcc..65a4e1b9c 100644 --- a/src/workbench/browser/src/app/shared/components/setting/extensions-setting.json +++ b/src/workbench/browser/src/app/shared/components/setting/extensions-setting.json @@ -32,7 +32,7 @@ "properties": { "sync-zion.server.port": { "type": "number", - "default": "8080", + "default": 8080, "label": "端口号", "description": "服务端口号" } 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 index c1dfdc7f0..19f7464f5 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.html +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.html @@ -3,59 +3,60 @@ -
-
- - - - - {{ node.title }} - - +
+ + + + + {{ node.title }} + + - - - - - - {{ node.title }} - - - - -
-
-

{{ module.title }}

- - {{ module.properties[item.key]?.label }} - - - - - + + + + + + {{ node.title }} + + + + + +
+

{{ module.title }}

+ + + {{module.properties[field]?.label }} + + +
+ {{module.properties[field]?.description }} +
+ + + + + - - - - + + + + - - - - {{module.properties[item.key]?.description}} - - - -
+ + + + {{module.properties[field]?.description}} + + +
-
diff --git a/src/workbench/browser/src/app/shared/components/setting/setting.component.scss b/src/workbench/browser/src/app/shared/components/setting/setting.component.scss index 57d780013..d91e6fa37 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.scss +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.scss @@ -5,10 +5,13 @@ bottom: 0; } -.flex { - display: flex; - width: 100%; +.container { + display: grid; + grid-template-columns: minmax(200px, min-content) 25px auto; height: 60vh; + .divider { + height: 100%; + } } .footer { @@ -19,3 +22,10 @@ font-size: 20px; font-weight: 700; } +.label { + font-weight: 700; + color: rgba(0, 0, 0, 0.9); +} +.description { + color: rgb(102, 102, 102); +} 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 index 440a286fd..2bdaf005e 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.ts +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.ts @@ -28,6 +28,7 @@ interface FlatNode { styleUrls: ['./setting.component.scss'], }) export class SettingComponent implements OnInit { + objectKeys = Object.keys; private transformer = (node: TreeNode, level: number): FlatNode => ({ ...node, expandable: !!node.children && node.children.length > 0, @@ -56,10 +57,10 @@ export class SettingComponent implements OnInit { isVisible = false; isModal = false; position: NzTabPosition = 'left'; - /** 所有模块 */ - modules = []; /** 所有配置 */ settings = {}; + /** 深层嵌套的配置 */ + nestedSettings = {}; validateForm!: FormGroup; constructor(private fb: FormBuilder) {} @@ -76,15 +77,7 @@ export class SettingComponent implements OnInit { * @param properties */ private setSettingsModel(properties, controls) { - // Object.keys(properties).forEach((key) => { - // const keyArr = key.split('.'); - // const keyArrL = keyArr.length - 1; - // keyArr.reduce((p, k, i) => { - // const isLast = i === keyArrL; - // p[k] ??= isLast ? properties[key].default : {}; - // return p[k]; - // }, this.settings); - // }); + // 平级配置对象 Object.keys(properties).forEach((fieldKey) => { const props = properties[fieldKey]; this.settings[fieldKey] = props.default; @@ -95,6 +88,26 @@ export class SettingComponent implements OnInit { controls[fieldKey] = [null]; } }); + // 深层嵌套的配置对象 + Object.keys(properties).forEach((fieldKey) => { + const keyArr = fieldKey.split('.'); + const keyArrL = keyArr.length - 1; + keyArr.reduce((p, k, i) => { + const isLast = i === keyArrL; + p[k] ??= isLast ? properties[fieldKey]?.default : {}; + return p[k]; + }, this.nestedSettings); + // 当settings变化时，将值同步到nestedSettings + Object.defineProperty(this.settings, fieldKey, { + get: () => { + return this.getConfiguration(fieldKey); + }, + set: (newVal) => { + const target = keyArr.slice(0, -1).reduce((p, k) => p[k], this.nestedSettings); + target[keyArr[keyArrL]] = newVal; + }, + }); + }); } /** @@ -103,7 +116,7 @@ export class SettingComponent implements OnInit { * @returns */ getConfiguration(key: string) { - return key.split('.').reduce((p, k) => p[k], this.settings); + return key.split('.').reduce((p, k) => p[k], this.nestedSettings); } /** * 获取模块的标题 @@ -116,10 +129,10 @@ export class SettingComponent implements OnInit { } selectModule(node) { - console.log('selectModule', node); + // console.log('selectModule', node); this.currentConfiguration = node.configuration || []; - console.log('this.currentConfiguration', this.currentConfiguration); - this.selectListSelection.toggle(node); + // console.log('this.currentConfiguration', this.currentConfiguration); + this.selectListSelection.select(node); } /** @@ -147,11 +160,10 @@ export class SettingComponent implements OnInit { this.setSettingsModel(item.properties, controls); } }); - - const generateTreeData = ( - configurations: typeof allConfiguration[number] | Array = allConfiguration - ) => { - return (Array.isArray(configurations) ? configurations : [configurations]).reduce((prev, curr) => { + type Configuration = typeof allConfiguration[number] | Array; + // 递归生成设置树 + const generateTreeData = (configurations: Configuration = []) => { + return [].concat(configurations).reduce((prev, curr) => { if (Array.isArray(curr)) { return prev.concat(generateTreeData(curr)); } @@ -163,6 +175,7 @@ export class SettingComponent implements OnInit { return prev.concat(treeItem); }, []); }; + // 所有设置项 const treeData = allSettings.reduce((prev, curr) => { let treeItem: TreeNode; const configuration = curr.contributes.configuration; @@ -184,67 +197,70 @@ export class SettingComponent implements OnInit { }, []); console.log('treeData', treeData); console.log('setings', this.settings); + console.log('nestedSettings', this.nestedSettings); console.log('controls', controls); - this.modules = allSettings; + this.dataSource.setData(treeData); this.treeControl.expandAll(); this.validateForm = this.fb.group(controls); + // 默认选中第一项 + this.selectModule(this.treeControl.dataNodes.at(0)); } - private init() { - if (window.eo && window.eo.getFeature) { - this.isVisible = true; - this.settings = window.eo.getSettings(); - const featureList = window.eo.getFeature('configuration'); - const controls = {}; - featureList?.forEach((feature: object, key: string) => { - if (!feature['title'] || !feature['properties'] || typeof feature['properties'] !== 'object') { - return true; - } - if (!this.settings[key] || typeof this.settings[key] !== 'object') { - this.settings[key] = {}; - } - const fields = []; - for (let field_key in feature['properties']) { - let field = feature['properties'][field_key]; - // 加入允许的type限制 - if (!field['type'] || !field['label']) { - continue; - } - if ('select' === field['type'] && !field['options']) { - continue; - } - const name = key + '_' + field_key; - field = Object.assign( - { - name: name, - key: field_key, - required: false, - default: '', - description: '', - }, - field - ); - fields.push(field); - if (!this.settings[key][field_key]) { - this.settings[key][field_key] = field['default']; - } - // 可扩展加入更多默认校验 - if (field.required) { - controls[name] = [null, [Validators.required]]; - } else { - controls[name] = [null]; - } - } - this.modules.push({ - key: key, - title: feature['title'], - fields: fields, - }); - }); - this.validateForm = this.fb.group(controls); - } - } + // private init() { + // if (window.eo && window.eo.getFeature) { + // this.isVisible = true; + // this.settings = window.eo.getSettings(); + // const featureList = window.eo.getFeature('configuration'); + // const controls = {}; + // featureList?.forEach((feature: object, key: string) => { + // if (!feature['title'] || !feature['properties'] || typeof feature['properties'] !== 'object') { + // return true; + // } + // if (!this.settings[key] || typeof this.settings[key] !== 'object') { + // this.settings[key] = {}; + // } + // const fields = []; + // for (let field_key in feature['properties']) { + // let field = feature['properties'][field_key]; + // // 加入允许的type限制 + // if (!field['type'] || !field['label']) { + // continue; + // } + // if ('select' === field['type'] && !field['options']) { + // continue; + // } + // const name = key + '_' + field_key; + // field = Object.assign( + // { + // name: name, + // key: field_key, + // required: false, + // default: '', + // description: '', + // }, + // field + // ); + // fields.push(field); + // if (!this.settings[key][field_key]) { + // this.settings[key][field_key] = field['default']; + // } + // // 可扩展加入更多默认校验 + // if (field.required) { + // controls[name] = [null, [Validators.required]]; + // } else { + // controls[name] = [null]; + // } + // } + // // this.modules.push({ + // // key: key, + // // title: feature['title'], + // // fields: fields, + // // }); + // }); + // this.validateForm = this.fb.group(controls); + // } + // } handleShowModal() { this.isModal = true; From 1717b63f4891496cc8f96a9f3b44e46f57e096d0 Mon Sep 17 00:00:00 2001 From: buqiyuan <1743369777@qq.com> Date: Fri, 13 May 2022 10:49:21 +0800 Subject: [PATCH 04/14] feat: support scrolll when content overflow --- .../app/shared/components/setting/setting.component.html | 5 +++-- .../app/shared/components/setting/setting.component.scss | 6 ++++++ 2 files changed, 9 insertions(+), 2 deletions(-) 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 index 19f7464f5..428a5b079 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.html +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.html @@ -4,7 +4,7 @@
- + -
+

{{ module.title }}

@@ -54,6 +54,7 @@

{{ module.title }}

{{module.properties[field]?.description}} +
diff --git a/src/workbench/browser/src/app/shared/components/setting/setting.component.scss b/src/workbench/browser/src/app/shared/components/setting/setting.component.scss index d91e6fa37..3112a6950 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.scss +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.scss @@ -14,6 +14,12 @@ } } +.tree-view, .form { + overflow: auto; +} +.form { + padding-right: 10px; +} .footer { text-align: right; } From 2fe19bf922e2f1c72d111a1ba41066568e44e65e Mon Sep 17 00:00:00 2001 From: buqiyuan <1743369777@qq.com> Date: Fri, 13 May 2022 17:32:10 +0800 Subject: [PATCH 05/14] feat: auto save to local --- .../node/extension-manager/lib/manager.ts | 12 ++--- .../node/extension-manager/types/manager.ts | 15 ++++-- .../eoapi-settings/common-settings.json | 3 +- .../eoapi-settings/extensiton-settings.json | 3 +- .../eoapi-settings/feature-settings.json | 3 +- .../setting/extensions-setting.json | 42 --------------- .../components/setting/setting.component.html | 11 ++-- .../components/setting/setting.component.ts | 53 ++++++++++++------- 8 files changed, 64 insertions(+), 78 deletions(-) delete mode 100644 src/workbench/browser/src/app/shared/components/setting/extensions-setting.json diff --git a/src/platform/node/extension-manager/lib/manager.ts b/src/platform/node/extension-manager/lib/manager.ts index ff7653e33..6f6e2f6c0 100644 --- a/src/platform/node/extension-manager/lib/manager.ts +++ b/src/platform/node/extension-manager/lib/manager.ts @@ -117,7 +117,7 @@ export class ModuleManager implements ModuleManagerInterface { /** * 获取所有功能点列表 - * @returns + * @returns */ getFeatures(): Map> { return this.features; @@ -134,11 +134,11 @@ export class ModuleManager implements ModuleManagerInterface { } return this.modules.get(moduleID); } - + /** * 获取某个功能点的集合 - * @param featureKey - * @returns + * @param featureKey + * @returns */ getFeature(featureKey: string): Map { return this.features.get(featureKey); @@ -181,7 +181,7 @@ export class ModuleManager implements ModuleManagerInterface { /** * 清除功能点集合中的模块功能点 - * @param moduleInfo + * @param moduleInfo */ private deleteFeatures(moduleInfo: ModuleInfo) { if (moduleInfo.features && typeof moduleInfo.features === 'object' && isNotEmpty(moduleInfo.features)) { @@ -200,7 +200,7 @@ export class ModuleManager implements ModuleManagerInterface { private setup(moduleInfo: ModuleInfo) { if (isNotEmpty(moduleInfo.moduleID)) { this.set(moduleInfo); - } + } } /** diff --git a/src/platform/node/extension-manager/types/manager.ts b/src/platform/node/extension-manager/types/manager.ts index ddf18e52a..d49f3bf64 100644 --- a/src/platform/node/extension-manager/types/manager.ts +++ b/src/platform/node/extension-manager/types/manager.ts @@ -11,7 +11,7 @@ import { ModuleHandlerResult } from './handler'; export enum ModuleType { system = 'system', app = 'app', - feature = 'feature' + feature = 'feature', } /** @@ -58,11 +58,20 @@ export interface ModuleInfo { sidePosition?: SidePosition; // 配置项 configuration?: ModuleConfiguration; + /** 贡献点 */ + contributes: ModuleContributes; // 功能点配置 features?: { - [index: string]: object + [index: string]: object; }; } +/** + * 贡献点 + */ + +export type ModuleContributes = { + configuration: ModuleConfiguration; +}; /** * 模块配置项接口 @@ -71,7 +80,7 @@ export interface ModuleConfiguration { title: string; properties: { [index: string]: ModuleConfigurationField; - } + }; } /** diff --git a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/common-settings.json b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/common-settings.json index 22838acb3..26762b151 100644 --- a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/common-settings.json +++ b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/common-settings.json @@ -2,7 +2,8 @@ "private": true, "name": "Eoapi-Common", "version": "0.0.1", - "displayName": "通用", + "moduleName": "通用", + "moduleID": "Eoapi-Common", "author": "eoapi", "publisher": "eoapi", "contributes": { diff --git a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/extensiton-settings.json b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/extensiton-settings.json index 600787f1d..550fde0d2 100644 --- a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/extensiton-settings.json +++ b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/extensiton-settings.json @@ -2,7 +2,8 @@ "private": true, "name": "Eoapi-Extensions", "version": "0.0.1", - "displayName": "扩展", + "moduleName": "扩展", + "moduleID": "Eoapi-Extensions", "author": "eoapi", "publisher": "eoapi", "contributes": { diff --git a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/feature-settings.json b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/feature-settings.json index 6d4c4557e..4db8ed761 100644 --- a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/feature-settings.json +++ b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/feature-settings.json @@ -2,7 +2,8 @@ "private": true, "name": "Eoapi-Features", "version": "0.0.1", - "displayName": "功能", + "moduleName": "功能", + "moduleID": "Eoapi-Features", "author": "eoapi", "publisher": "eoapi", "contributes": { diff --git a/src/workbench/browser/src/app/shared/components/setting/extensions-setting.json b/src/workbench/browser/src/app/shared/components/setting/extensions-setting.json deleted file mode 100644 index 65a4e1b9c..000000000 --- a/src/workbench/browser/src/app/shared/components/setting/extensions-setting.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "extensions": [ - { - "type": "object", - "title": "Sync Eolink", - "properties": { - "sync-eolink.secret.key": { - "type": "string", - "label": "eo-secret-key", - "default": "", - "placeholder": "单行输入", - "description": "空间秘钥" - }, - "sync-eolink.push.way": { - "type": "string", - "label": "推送方式", - "default": "", - "placeholder": "请选择", - "description": "二级说明" - }, - "sync-eolink.push.switch": { - "type": "boolean", - "label": "开关", - "default": true, - "placeholder": "请选择", - "description": "二级说明" - } - } - }, - { - "title": "Sync Zion", - "properties": { - "sync-zion.server.port": { - "type": "number", - "default": 8080, - "label": "端口号", - "description": "服务端口号" - } - } - } - ] -} 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 index 428a5b079..24db47ad0 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.html +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.html @@ -2,7 +2,8 @@ - +
@@ -60,8 +61,8 @@

{{ module.title }}

-
- - -
+ + + 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 index 2bdaf005e..574cccad6 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.ts +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.ts @@ -4,8 +4,8 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { SelectionModel } from '@angular/cdk/collections'; import { FlatTreeControl } from '@angular/cdk/tree'; import { NzTreeFlatDataSource, NzTreeFlattener } from 'ng-zorro-antd/tree-view'; +import { debounce } from 'lodash'; import { eoapiSettings } from './eoapi-settings/'; -import extensionsSettings from './extensions-setting.json'; interface TreeNode { name: string; @@ -59,6 +59,8 @@ export class SettingComponent implements OnInit { position: NzTabPosition = 'left'; /** 所有配置 */ settings = {}; + /** 本地配置 */ + localSettings = {}; /** 深层嵌套的配置 */ nestedSettings = {}; validateForm!: FormGroup; @@ -66,7 +68,6 @@ export class SettingComponent implements OnInit { ngOnInit(): void { // this.init(); - this.isVisible = true; this.parseSettings(); } @@ -80,7 +81,7 @@ export class SettingComponent implements OnInit { // 平级配置对象 Object.keys(properties).forEach((fieldKey) => { const props = properties[fieldKey]; - this.settings[fieldKey] = props.default; + this.settings[fieldKey] = this.localSettings[fieldKey] ?? props.default; // 可扩展加入更多默认校验 if (props.required) { controls[fieldKey] = [null, [Validators.required]]; @@ -94,7 +95,7 @@ export class SettingComponent implements OnInit { const keyArrL = keyArr.length - 1; keyArr.reduce((p, k, i) => { const isLast = i === keyArrL; - p[k] ??= isLast ? properties[fieldKey]?.default : {}; + p[k] ??= isLast ? this.settings[fieldKey] : {}; return p[k]; }, this.nestedSettings); // 当settings变化时，将值同步到nestedSettings @@ -124,7 +125,7 @@ export class SettingComponent implements OnInit { * @returns */ getModuleTitle(module: any): string { - const title = module?.contributes?.title ?? module?.title; + const title = module?.moduleName ?? module?.contributes?.title ?? module?.title; return title; } @@ -139,6 +140,15 @@ export class SettingComponent implements OnInit { * 解析所有模块的配置信息 */ private parseSettings() { + if (!window.eo && !window.eo.getFeature) return; + this.isVisible = true; + // 获取本地设置 + this.localSettings = window.eo.getSettings(); + // const featureList = window.eo.getFeature('configuration'); + const modules = window.eo.getModules(); + const extensitonConfigurations = [...modules.values()].filter((n) => n.contributes?.configuration); + console.log('localSettings', this.localSettings); + console.log('extensitonConfigurations', extensitonConfigurations); const controls = {}; // 所有设置 const allSettings = [ @@ -149,8 +159,12 @@ export class SettingComponent implements OnInit { // 所有配置 const allConfiguration = allSettings.map((n) => n.contributes.configuration); // 第三方扩展 - extensionsSettings.extensions.forEach((item) => { - eoapiSettings['Eoapi-Extensions'].contributes.configuration.push(item); + extensitonConfigurations.forEach((item) => { + const configuration = item?.contributes?.configuration; + if (configuration) { + configuration.title = item.moduleName ?? configuration.title; + eoapiSettings['Eoapi-Extensions'].contributes.configuration.push(configuration); + } }); /** 根据configuration配置生成settings model */ allConfiguration.forEach((item) => { @@ -182,14 +196,14 @@ export class SettingComponent implements OnInit { if (Array.isArray(configuration)) { treeItem = { name: curr.name, - title: curr.displayName || curr.name, + title: curr.moduleName || curr.name, children: generateTreeData(configuration), configuration, }; } else { treeItem = { name: curr.name, - title: curr.displayName || configuration.title || curr.name, + title: curr.moduleName || configuration.title || curr.name, configuration: [configuration], }; } @@ -203,6 +217,7 @@ export class SettingComponent implements OnInit { this.dataSource.setData(treeData); this.treeControl.expandAll(); this.validateForm = this.fb.group(controls); + this.validateForm.valueChanges.subscribe(debounce(this.handleSave.bind(this))); // 默认选中第一项 this.selectModule(this.treeControl.dataNodes.at(0)); } @@ -267,19 +282,19 @@ export class SettingComponent implements OnInit { } handleSave(): void { - for (const i in this.validateForm.controls) { - if (this.validateForm.controls.hasOwnProperty(i)) { - this.validateForm.controls[i].markAsDirty(); - this.validateForm.controls[i].updateValueAndValidity(); - } - } - if (this.validateForm.status === 'INVALID') { - return; - } + // for (const i in this.validateForm.controls) { + // if (this.validateForm.controls.hasOwnProperty(i)) { + // this.validateForm.controls[i].markAsDirty(); + // this.validateForm.controls[i].updateValueAndValidity(); + // } + // } + // if (this.validateForm.status === 'INVALID') { + // return; + // } // 加入根据返回显示提示消息 const saved = window.eo.saveSettings(this.settings); if (saved) { - this.handleCancel(); + // this.handleCancel(); } } From 15190df5dde3c5456f43645416381ab5541fb318 Mon Sep 17 00:00:00 2001 From: buqiyuan <1743369777@qq.com> Date: Fri, 13 May 2022 18:19:59 +0800 Subject: [PATCH 06/14] pref: update css style --- .../setting/eoapi-settings/feature-settings.json | 6 +++--- .../app/shared/components/setting/setting.component.scss | 9 ++++++++- .../app/shared/components/setting/setting.component.ts | 2 +- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/feature-settings.json b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/feature-settings.json index 4db8ed761..41628b1b0 100644 --- a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/feature-settings.json +++ b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/feature-settings.json @@ -13,9 +13,9 @@ "title": "API测试", "order": 1, "properties": { - "features.remoteServer.url": { + "features.remoteServer.redirctUrl": { "type": "boolean", - "default": true, + "default": false, "label": "自动重定向", "description": "自动重定向至redirect url" } @@ -26,7 +26,7 @@ "title": "扩展", "order": 2, "properties": { - "features.remoteServer.url": { + "features.remoteServer.autoUpdate": { "type": "boolean", "default": true, "label": "自动更新", diff --git a/src/workbench/browser/src/app/shared/components/setting/setting.component.scss b/src/workbench/browser/src/app/shared/components/setting/setting.component.scss index 3112a6950..21ce3bb4b 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.scss +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.scss @@ -17,6 +17,11 @@ .tree-view, .form { overflow: auto; } +::ng-deep { + .tree-view .ant-tree-switcher { + width: 20px; + } +} .form { padding-right: 10px; } @@ -25,13 +30,15 @@ } .title { - font-size: 20px; + font-size: 16px; font-weight: 700; } .label { + padding: 0; font-weight: 700; color: rgba(0, 0, 0, 0.9); } .description { + margin-bottom: 3px; color: rgb(102, 102, 102); } 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 index 574cccad6..0c5d4d365 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.ts +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.ts @@ -217,7 +217,7 @@ export class SettingComponent implements OnInit { this.dataSource.setData(treeData); this.treeControl.expandAll(); this.validateForm = this.fb.group(controls); - this.validateForm.valueChanges.subscribe(debounce(this.handleSave.bind(this))); + this.validateForm.valueChanges.subscribe(debounce(this.handleSave.bind(this), 300)); // 默认选中第一项 this.selectModule(this.treeControl.dataNodes.at(0)); } From d4774d18ee6ae994c1fcad10f372f1e9d3ba719f Mon Sep 17 00:00:00 2001 From: buqiyuan <1743369777@qq.com> Date: Mon, 16 May 2022 14:21:31 +0800 Subject: [PATCH 07/14] test --- src/platform/node/configuration/lib/index.ts | 28 ++-- src/shared/node/file.ts | 10 +- .../eoapi-settings/common-settings.json | 19 +-- .../components/setting/setting.component.html | 133 +++++++++--------- .../components/setting/setting.component.ts | 2 +- .../components/setting/setting.module.ts | 2 + 6 files changed, 97 insertions(+), 97 deletions(-) diff --git a/src/platform/node/configuration/lib/index.ts b/src/platform/node/configuration/lib/index.ts index c13da5a34..7045ddbe6 100644 --- a/src/platform/node/configuration/lib/index.ts +++ b/src/platform/node/configuration/lib/index.ts @@ -4,7 +4,6 @@ import * as path from 'path'; import { fileExists, readJson, writeJson } from '../../../../shared/node/file'; export class Configuration implements ConfigurationInterface { - /** * 配置文件地址 */ @@ -36,7 +35,7 @@ export class Configuration implements ConfigurationInterface { * 保存配置文件 */ private saveConfig(data: ConfigurationValueInterface): boolean { - return writeJson(this.configPath, data); + return writeJson(this.configPath, data, true); } /** @@ -45,13 +44,13 @@ export class Configuration implements ConfigurationInterface { saveSettings(settings: ConfigurationValueInterface): boolean { let data = this.loadConfig(); data.settings = settings; - return this.saveConfig(data); + return this.saveConfig(data); } /** * 保存模块配置 - * @param moduleID - * @param settings + * @param moduleID + * @param settings */ saveModuleSettings(moduleID: string, settings: ConfigurationValueInterface): boolean { let data = this.loadConfig(); @@ -64,20 +63,20 @@ export class Configuration implements ConfigurationInterface { /** * 删除模块配置 - * @param moduleID - * @returns + * @param moduleID + * @returns */ deleteModuleSettings(moduleID: string): boolean { let data = this.loadConfig(); if (data.settings && data.settings[moduleID]) { - delete(data.settings[moduleID]); + delete data.settings[moduleID]; return this.saveConfig(data); } return false; } - + /** - * 获取全局配置 + * 获取全局配置 * @returns */ getSettings(): ConfigurationValueInterface { @@ -87,14 +86,13 @@ export class Configuration implements ConfigurationInterface { /** * 获取模块配置 - * @param moduleID - * @returns + * @param moduleID + * @returns */ getModuleSettings(moduleID: string): ConfigurationValueInterface { const settings = this.getSettings(); - return settings[moduleID] || {}; - } - + return settings[moduleID] || {}; + } } export default () => new Configuration(); diff --git a/src/shared/node/file.ts b/src/shared/node/file.ts index 2dc15b145..e7f91466e 100644 --- a/src/shared/node/file.ts +++ b/src/shared/node/file.ts @@ -6,15 +6,15 @@ import * as path from 'path'; * @param file * @param data */ -export const writeJson = (file: string, data: object): boolean => { - return writeFile(file, JSON.stringify(data)); +export const writeJson = (file: string, data: object, formatted = false): boolean => { + return writeFile(file, formatted ? JSON.stringify(data, null, 2) : JSON.stringify(data)); }; /** * Read json file, then return object. * @param file */ -export const readJson = (file: string): (object | null) => { +export const readJson = (file: string): object | null => { const data: string = readFile(file); if ('' === data) { return null; @@ -37,7 +37,7 @@ export const readFile = (file: string): string => { /** * Delete file. * @param file string - * @returns + * @returns */ export const deleteFile = (file: string): boolean => { try { @@ -46,7 +46,7 @@ export const deleteFile = (file: string): boolean => { } catch (e) { return false; } -} +}; /** * Write data into file. diff --git a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/common-settings.json b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/common-settings.json index 26762b151..6e720c53a 100644 --- a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/common-settings.json +++ b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/common-settings.json @@ -10,20 +10,13 @@ "configuration": { "type": "object", "title": "通用", + "order": 2, "properties": { - "common.remoteServer.url": { - "type": "string", - "required": true, - "default": "http://127.0.0.1", - "label": "远程服务器地址", - "description": "从远程服务器存取数据，配置后支持多人协作" - }, - "common.remoteServer.token": { - "type": "string", - "required": false, - "default": "", - "label": "Token", - "description": "远程服务器Token，配置后才可访问" + "common.app.autoUpdate": { + "type": "boolean", + "default": true, + "label": "自动升级", + "description": "勾选后，检测到应用升级后自动从远程下载最新的应用更新" } } } 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 index 24db47ad0..52bbef82d 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.html +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.html @@ -1,68 +1,75 @@ - - - + + + + - -
- - - - - {{ node.title }} - - + +
+ + + + + {{ node.title }} + + - - - - - - {{ node.title }} - - - - -
-
-

{{ module.title }}

- - - {{module.properties[field]?.label }} - - -
- {{module.properties[field]?.description }} -
- - - - - + + + + + + {{ node.title }} + + + + + +
+

{{ module.title }}

+ + + {{module.properties[field]?.label }} + + +
+ {{module.properties[field]?.description }} +
+ + + + + - - - - + + + + - - - - {{module.properties[field]?.description}} - + + + + {{module.properties[field]?.description}} + - - -
- -
- - - - + + + + + + + 暂无配置项 + + +
+ + + + + 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 index 0c5d4d365..f925df526 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.ts +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.ts @@ -154,7 +154,7 @@ export class SettingComponent implements OnInit { const allSettings = [ eoapiSettings['Eoapi-Common'], eoapiSettings['Eoapi-Extensions'], - eoapiSettings['Eoapi-Features'], + // eoapiSettings['Eoapi-Features'], ]; // 所有配置 const allConfiguration = allSettings.map((n) => n.contributes.configuration); 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 index 9beec03fe..ba05f52ba 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.module.ts +++ b/src/workbench/browser/src/app/shared/components/setting/setting.module.ts @@ -12,6 +12,7 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number'; import { NzFormModule } from 'ng-zorro-antd/form'; import { NzSelectModule } from 'ng-zorro-antd/select'; import { NzDividerModule } from 'ng-zorro-antd/divider'; +import { NzEmptyModule } from 'ng-zorro-antd/empty'; import { NzTabsModule } from 'ng-zorro-antd/tabs'; import { NzTreeViewModule } from 'ng-zorro-antd/tree-view'; @@ -30,6 +31,7 @@ const ANTDMODULES = [ NzTreeViewModule, NzCheckboxModule, NzInputNumberModule, + NzEmptyModule, ]; @NgModule({ declarations: [SettingComponent], From 50bb126852aa768848b1531bf0e8515ac1fe0e5e Mon Sep 17 00:00:00 2001 From: buqiyuan <1743369777@qq.com> Date: Tue, 17 May 2022 10:16:59 +0800 Subject: [PATCH 08/14] fix: sync configuration when show setting modal --- src/app/electron-main/updater.ts | 2 ++ .../components/setting/setting.component.html | 2 +- .../components/setting/setting.component.ts | 35 +++++++++++++------ 3 files changed, 28 insertions(+), 11 deletions(-) diff --git a/src/app/electron-main/updater.ts b/src/app/electron-main/updater.ts index bef51404e..eec9cea82 100644 --- a/src/app/electron-main/updater.ts +++ b/src/app/electron-main/updater.ts @@ -5,6 +5,8 @@ const appVersion = require('../../../package.json').version; export class EoUpdater { constructor() { this.watchLog(); + // 是否自动更新 + autoUpdater.autoDownload = window.eo.getModuleSettings('common.app.autoUpdate') !== false; if (appVersion.includes('beta')) autoUpdater.channel = 'beta'; console.log('appVersion', appVersion, autoUpdater.channel); } 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 index 52bbef82d..7b45c92b6 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.html +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.html @@ -3,7 +3,7 @@ - +
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 index f925df526..fe5fca3a6 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.ts +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.ts @@ -4,7 +4,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { SelectionModel } from '@angular/cdk/collections'; import { FlatTreeControl } from '@angular/cdk/tree'; import { NzTreeFlatDataSource, NzTreeFlattener } from 'ng-zorro-antd/tree-view'; -import { debounce } from 'lodash'; +import { debounce, cloneDeep } from 'lodash'; import { eoapiSettings } from './eoapi-settings/'; interface TreeNode { @@ -55,7 +55,7 @@ export class SettingComponent implements OnInit { /** 当前配置项 */ currentConfiguration = []; isVisible = false; - isModal = false; + _isShowModal = false; position: NzTabPosition = 'left'; /** 所有配置 */ settings = {}; @@ -64,11 +64,23 @@ export class SettingComponent implements OnInit { /** 深层嵌套的配置 */ nestedSettings = {}; validateForm!: FormGroup; + + get isShowModal() { + return this._isShowModal; + } + + set isShowModal(val) { + this._isShowModal = val; + if (val) { + this.init(); + } + } + constructor(private fb: FormBuilder) {} ngOnInit(): void { - // this.init(); - this.parseSettings(); + this.init(); + // this.parseSettings(); } hasChild = (_: number, node: FlatNode): boolean => node.expandable; @@ -139,9 +151,11 @@ export class SettingComponent implements OnInit { /** * 解析所有模块的配置信息 */ - private parseSettings() { + private init() { if (!window.eo && !window.eo.getFeature) return; this.isVisible = true; + this.settings = {}; + this.nestedSettings = {}; // 获取本地设置 this.localSettings = window.eo.getSettings(); // const featureList = window.eo.getFeature('configuration'); @@ -151,19 +165,20 @@ export class SettingComponent implements OnInit { console.log('extensitonConfigurations', extensitonConfigurations); const controls = {}; // 所有设置 - const allSettings = [ + const allSettings = cloneDeep([ eoapiSettings['Eoapi-Common'], eoapiSettings['Eoapi-Extensions'], // eoapiSettings['Eoapi-Features'], - ]; + ]); // 所有配置 const allConfiguration = allSettings.map((n) => n.contributes.configuration); // 第三方扩展 + const extensionsModule = allSettings.find((n) => n.moduleID === 'Eoapi-Extensions'); extensitonConfigurations.forEach((item) => { const configuration = item?.contributes?.configuration; if (configuration) { configuration.title = item.moduleName ?? configuration.title; - eoapiSettings['Eoapi-Extensions'].contributes.configuration.push(configuration); + extensionsModule.contributes.configuration.push(configuration); } }); /** 根据configuration配置生成settings model */ @@ -278,7 +293,7 @@ export class SettingComponent implements OnInit { // } handleShowModal() { - this.isModal = true; + this.isShowModal = true; } handleSave(): void { @@ -299,6 +314,6 @@ export class SettingComponent implements OnInit { } handleCancel(): void { - this.isModal = false; + this.isShowModal = false; } } From 7f92d6e67348ba2b3aa7e188ac6dfb8dadfaaa01 Mon Sep 17 00:00:00 2001 From: buqiyuan <1743369777@qq.com> Date: Tue, 17 May 2022 10:25:56 +0800 Subject: [PATCH 09/14] fix: window is not define --- src/app/electron-main/updater.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/electron-main/updater.ts b/src/app/electron-main/updater.ts index eec9cea82..fd8112167 100644 --- a/src/app/electron-main/updater.ts +++ b/src/app/electron-main/updater.ts @@ -6,7 +6,7 @@ export class EoUpdater { constructor() { this.watchLog(); // 是否自动更新 - autoUpdater.autoDownload = window.eo.getModuleSettings('common.app.autoUpdate') !== false; + // autoUpdater.autoDownload = window.eo.getModuleSettings('common.app.autoUpdate') !== false; if (appVersion.includes('beta')) autoUpdater.channel = 'beta'; console.log('appVersion', appVersion, autoUpdater.channel); } From ea271eb0a5d61a80991e459edd454c374f15f52a Mon Sep 17 00:00:00 2001 From: buqiyuan <1743369777@qq.com> Date: Tue, 17 May 2022 10:37:23 +0800 Subject: [PATCH 10/14] fix: key undefind --- .../src/app/shared/components/setting/setting.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index fe5fca3a6..516b467e8 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.ts +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.ts @@ -93,7 +93,7 @@ export class SettingComponent implements OnInit { // 平级配置对象 Object.keys(properties).forEach((fieldKey) => { const props = properties[fieldKey]; - this.settings[fieldKey] = this.localSettings[fieldKey] ?? props.default; + this.settings[fieldKey] = this.localSettings?.[fieldKey] ?? props.default; // 可扩展加入更多默认校验 if (props.required) { controls[fieldKey] = [null, [Validators.required]]; From c60aa75b59034543c9ce40405ef1c40e8648fdd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E9=B9=B0?= <17kungfuboy@gmail.com> Date: Tue, 17 May 2022 14:49:13 +0800 Subject: [PATCH 11/14] feat: debug push extension --- .../app/shared/components/sync-api/sync-api.component.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/workbench/browser/src/app/shared/components/sync-api/sync-api.component.ts b/src/workbench/browser/src/app/shared/components/sync-api/sync-api.component.ts index 9f502aae8..70efbedd8 100644 --- a/src/workbench/browser/src/app/shared/components/sync-api/sync-api.component.ts +++ b/src/workbench/browser/src/app/shared/components/sync-api/sync-api.component.ts @@ -28,14 +28,19 @@ export class SyncApiComponent implements OnInit { const feature = this.featureList.get(this.pushType); const action = feature.action || null; const module = window.eo.loadFeatureModule(this.pushType); + // TODO 临时取值方式需要修改 + const url = window.eo.getModuleSettings('eolink.remoteServer.url'); + const secretKey = window.eo.getModuleSettings('eolink.remoteServer.token'); + const projectId = window.eo.getModuleSettings('eolink.remoteServer.projectId'); if (module && module[action] && typeof module[action] === 'function') { this.storage.run('projectExport', [], async (result: StorageHandleResult) => { if (result.status === StorageHandleStatus.success) { result.data.version = packageJson.version; try { const output = await module[action](result.data, { - projectId: 'ZXXhzTG756db7e34a8d7c803f001edf1a1c545bcbf27719', - SecretKey: 'SgAZ5Lk60f776c1a235a3c3e62543c3793c36d6cc511db9', + url, + projectId, + secretKey, }); console.log(output); } catch (e) { From 636f35a4a6656a645a6c903127ef957da745e6db Mon Sep 17 00:00:00 2001 From: buqiyuan <1743369777@qq.com> Date: Tue, 17 May 2022 18:14:54 +0800 Subject: [PATCH 12/14] fix: auto save --- src/app/electron-main/main.ts | 6 ++-- src/platform/electron-browser/preload.ts | 4 +-- src/platform/node/configuration/lib/index.ts | 27 ++++++++------ .../setting/common/ConfigurationRegistry.ts | 8 +++++ .../eoapi-settings/common-settings.json | 2 +- .../setting/eoapi-settings/types.ts | 36 +++++++++++++++++++ .../components/setting/setting.component.ts | 31 +++++++++++++--- .../components/setting/settingLayout.ts | 20 +++++++++++ .../components/sync-api/sync-api.component.ts | 8 +++-- 9 files changed, 118 insertions(+), 24 deletions(-) create mode 100644 src/workbench/browser/src/app/shared/components/setting/common/ConfigurationRegistry.ts create mode 100644 src/workbench/browser/src/app/shared/components/setting/eoapi-settings/types.ts create mode 100644 src/workbench/browser/src/app/shared/components/setting/settingLayout.ts diff --git a/src/app/electron-main/main.ts b/src/app/electron-main/main.ts index 087d4d1ca..d15c34e07 100644 --- a/src/app/electron-main/main.ts +++ b/src/app/electron-main/main.ts @@ -1,7 +1,7 @@ import { app, BrowserWindow, ipcMain, screen } from 'electron'; import { EoUpdater } from './updater'; import * as path from 'path'; -import * as os from 'os' +import * as os from 'os'; import ModuleManager from '../../platform/node/extension-manager/lib/manager'; import { ModuleInfo, ModuleManagerInterface } from '../../platform/node/extension-manager'; import { StorageHandleStatus, StorageProcessType } from '../../platform/browser/IndexedDB'; @@ -18,7 +18,7 @@ export const subView = { appView: null, mainView: null, }; -const eoUpdater = new EoUpdater() +const eoUpdater = new EoUpdater(); const moduleManager: ModuleManagerInterface = ModuleManager(); const configuration: ConfigurationInterface = Configuration(); // Remote @@ -219,7 +219,7 @@ try { } else if (arg.action === 'getFeature') { returnValue = moduleManager.getFeature(arg.data.featureKey); } else if (arg.action === 'saveSettings') { - returnValue = configuration.saveSettings(arg.data.settings); + returnValue = configuration.saveSettings(arg.data); } else if (arg.action === 'saveModuleSettings') { returnValue = configuration.saveModuleSettings(arg.data.moduleID, arg.data.settings); } else if (arg.action === 'deleteModuleSettings') { diff --git a/src/platform/electron-browser/preload.ts b/src/platform/electron-browser/preload.ts index e9b8c9ebf..2715a5478 100644 --- a/src/platform/electron-browser/preload.ts +++ b/src/platform/electron-browser/preload.ts @@ -125,8 +125,8 @@ window.eo.storageRemote = (args) => { return output; }; -window.eo.saveSettings = (settings) => { - return ipcRenderer.sendSync('eo-sync', { action: 'saveSettings', data: { settings: settings } }); +window.eo.saveSettings = ({ settings, nestedSettings }) => { + return ipcRenderer.sendSync('eo-sync', { action: 'saveSettings', data: { settings, nestedSettings } }); }; window.eo.saveModuleSettings = (moduleID, settings) => { diff --git a/src/platform/node/configuration/lib/index.ts b/src/platform/node/configuration/lib/index.ts index 7045ddbe6..dc93c75a6 100644 --- a/src/platform/node/configuration/lib/index.ts +++ b/src/platform/node/configuration/lib/index.ts @@ -41,9 +41,10 @@ export class Configuration implements ConfigurationInterface { /** * 保存全局配置 */ - saveSettings(settings: ConfigurationValueInterface): boolean { + saveSettings({ settings = {}, nestedSettings = {} }): boolean { let data = this.loadConfig(); data.settings = settings; + data.nestedSettings = nestedSettings; return this.saveConfig(data); } @@ -54,10 +55,12 @@ export class Configuration implements ConfigurationInterface { */ saveModuleSettings(moduleID: string, settings: ConfigurationValueInterface): boolean { let data = this.loadConfig(); - if (!data.settings) { - data.settings = {}; - } + data.settings ??= {}; + data.nestedSettings ??= {}; data.settings[moduleID] = settings; + const propArr = moduleID.split('.'); + const target = propArr.slice(0, -1).reduce((p, k) => p[k], data.nestedSettings); + target[propArr.at(-1)] = settings; return this.saveConfig(data); } @@ -81,17 +84,21 @@ export class Configuration implements ConfigurationInterface { */ getSettings(): ConfigurationValueInterface { const data = this.loadConfig(); - return data.settings; + return data; } /** - * 获取模块配置 - * @param moduleID + * 获取模块配置, 以小数点分割的属性链，如：common.app.update + * @param section * @returns */ - getModuleSettings(moduleID: string): ConfigurationValueInterface { - const settings = this.getSettings(); - return settings[moduleID] || {}; + getModuleSettings(section?: string): ConfigurationValueInterface { + const localSettings = this.getSettings(); + localSettings.nestedSettings ??= {}; + if (section) { + return section.split('.').reduce((p, k) => p[k], localSettings.nestedSettings); + } + return localSettings.nestedSettings; } } diff --git a/src/workbench/browser/src/app/shared/components/setting/common/ConfigurationRegistry.ts b/src/workbench/browser/src/app/shared/components/setting/common/ConfigurationRegistry.ts new file mode 100644 index 000000000..836406cd1 --- /dev/null +++ b/src/workbench/browser/src/app/shared/components/setting/common/ConfigurationRegistry.ts @@ -0,0 +1,8 @@ +/** + * 注册配置项 + */ +class ConfigurationRegistry { + constructor() {} +} + +export const configurationRegistry = new ConfigurationRegistry(); diff --git a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/common-settings.json b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/common-settings.json index 6e720c53a..6ed8e6b61 100644 --- a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/common-settings.json +++ b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/common-settings.json @@ -3,7 +3,7 @@ "name": "Eoapi-Common", "version": "0.0.1", "moduleName": "通用", - "moduleID": "Eoapi-Common", + "moduleID": "eoapi-common", "author": "eoapi", "publisher": "eoapi", "contributes": { diff --git a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/types.ts b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/types.ts new file mode 100644 index 000000000..fcc85dcf1 --- /dev/null +++ b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/types.ts @@ -0,0 +1,36 @@ +export type JSONSchemaType = 'string' | 'number' | 'integer' | 'boolean' | 'null' | 'array' | 'object'; + +/** 设置模块实体 */ +export type TOCEntry = { + id: string; + label: string; + order?: number; + children?: TOCEntry[]; + settings?: Array; +}; + +export type Setting = {}; + +export type ConfigurationProperty = { + [prop: string]: { + /** 配置项的值类型 */ + type?: JSONSchemaType | JSONSchemaType[]; + /** 枚举，用于下拉框 */ + enum?: any[]; + /** 用于对枚举项的说明 */ + enumDescriptions?: string[]; + /** 配置项默认值 */ + default?: any; + /** 配置项描述 */ + description?: string; + }; +}; + +export type ConfigurationNode = { + id?: string; + order?: number; + type?: string | string[]; + title?: string; + description?: string; + properties?: ConfigurationProperty; +}; 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 index 516b467e8..e10368847 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.ts +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.ts @@ -10,6 +10,7 @@ import { eoapiSettings } from './eoapi-settings/'; interface TreeNode { name: string; title: string; + moduleID?: string; disabled?: boolean; children?: TreeNode[]; configuration?: any[]; @@ -60,7 +61,7 @@ export class SettingComponent implements OnInit { /** 所有配置 */ settings = {}; /** 本地配置 */ - localSettings = {}; + localSettings = { settings: {}, nestedSettings: {} }; /** 深层嵌套的配置 */ nestedSettings = {}; validateForm!: FormGroup; @@ -93,7 +94,7 @@ export class SettingComponent implements OnInit { // 平级配置对象 Object.keys(properties).forEach((fieldKey) => { const props = properties[fieldKey]; - this.settings[fieldKey] = this.localSettings?.[fieldKey] ?? props.default; + this.settings[fieldKey] = this.localSettings?.settings?.[fieldKey] ?? props.default; // 可扩展加入更多默认校验 if (props.required) { controls[fieldKey] = [null, [Validators.required]]; @@ -171,21 +172,39 @@ export class SettingComponent implements OnInit { // eoapiSettings['Eoapi-Features'], ]); // 所有配置 - const allConfiguration = allSettings.map((n) => n.contributes.configuration); + const allConfiguration = allSettings.map((n) => { + const configuration = n.contributes.configuration; + if (!Array.isArray(configuration)) { + configuration.moduleID ??= n.moduleID; + } + return configuration; + }); // 第三方扩展 const extensionsModule = allSettings.find((n) => n.moduleID === 'Eoapi-Extensions'); extensitonConfigurations.forEach((item) => { const configuration = item?.contributes?.configuration; if (configuration) { configuration.title = item.moduleName ?? configuration.title; + configuration.moduleID = item.moduleID; extensionsModule.contributes.configuration.push(configuration); } }); + // 给插件的属性前面追加模块ID + const appendModuleID = (properties, moduleID) => { + return Object.keys(properties).reduce((prev, key) => { + prev[`${moduleID}.${key}`] = properties[key]; + return prev; + }, {}); + }; /** 根据configuration配置生成settings model */ allConfiguration.forEach((item) => { if (Array.isArray(item)) { - item.forEach((n) => this.setSettingsModel(n.properties, controls)); + item.forEach((n) => { + n.properties = appendModuleID(n.properties, n.moduleID); + this.setSettingsModel(n.properties, controls); + }); } else { + item.properties = appendModuleID(item.properties, item.moduleID); this.setSettingsModel(item.properties, controls); } }); @@ -211,6 +230,7 @@ export class SettingComponent implements OnInit { if (Array.isArray(configuration)) { treeItem = { name: curr.name, + moduleID: curr.moduleID, title: curr.moduleName || curr.name, children: generateTreeData(configuration), configuration, @@ -218,6 +238,7 @@ export class SettingComponent implements OnInit { } else { treeItem = { name: curr.name, + moduleID: curr.moduleID, title: curr.moduleName || configuration.title || curr.name, configuration: [configuration], }; @@ -307,7 +328,7 @@ export class SettingComponent implements OnInit { // return; // } // 加入根据返回显示提示消息 - const saved = window.eo.saveSettings(this.settings); + const saved = window.eo.saveSettings({ settings: this.settings, nestedSettings: this.nestedSettings }); if (saved) { // this.handleCancel(); } diff --git a/src/workbench/browser/src/app/shared/components/setting/settingLayout.ts b/src/workbench/browser/src/app/shared/components/setting/settingLayout.ts new file mode 100644 index 000000000..ace6d10ca --- /dev/null +++ b/src/workbench/browser/src/app/shared/components/setting/settingLayout.ts @@ -0,0 +1,20 @@ +export type TOCEntry = { + id: string; + label: string; + order?: number; + children?: TOCEntry[]; + settings?: Array; +}; + +export const tocData: TOCEntry[] = [ + { + id: 'common', + label: '通用', + settings: ['common.*'], + }, + { + id: 'extension', + label: '扩展', + settings: ['extension.*'], + }, +]; diff --git a/src/workbench/browser/src/app/shared/components/sync-api/sync-api.component.ts b/src/workbench/browser/src/app/shared/components/sync-api/sync-api.component.ts index 70efbedd8..fefee90cd 100644 --- a/src/workbench/browser/src/app/shared/components/sync-api/sync-api.component.ts +++ b/src/workbench/browser/src/app/shared/components/sync-api/sync-api.component.ts @@ -29,9 +29,11 @@ export class SyncApiComponent implements OnInit { const action = feature.action || null; const module = window.eo.loadFeatureModule(this.pushType); // TODO 临时取值方式需要修改 - const url = window.eo.getModuleSettings('eolink.remoteServer.url'); - const secretKey = window.eo.getModuleSettings('eolink.remoteServer.token'); - const projectId = window.eo.getModuleSettings('eolink.remoteServer.projectId'); + const { + url, + token: secretKey, + projectId, + } = window.eo.getModuleSettings('eoapi-feature-push-eolink.eolink.remoteServer'); if (module && module[action] && typeof module[action] === 'function') { this.storage.run('projectExport', [], async (result: StorageHandleResult) => { if (result.status === StorageHandleStatus.success) { From baece7065041ae0cc2fdb6ca4caae90eb4e8fedc Mon Sep 17 00:00:00 2001 From: buqiyuan <1743369777@qq.com> Date: Tue, 17 May 2022 19:06:45 +0800 Subject: [PATCH 13/14] feat: add selectTheme --- .../app/core/services/theme/theme.model.ts | 92 +++++++++---------- .../eoapi-settings/common-settings.json | 2 +- .../setting/eoapi-settings/index.ts | 3 + .../eoapi-settings/theme-settings.json | 21 +++++ .../components/setting/setting.component.html | 5 + .../components/setting/setting.component.scss | 7 +- .../components/setting/setting.component.ts | 1 + .../components/setting/setting.module.ts | 3 +- .../select-theme/select-theme.component.html | 56 +++++------ .../components/toolbar/toolbar.component.html | 5 +- .../browser/src/assets/theme/antd.less | 15 +-- src/workbench/browser/src/styles.scss | 4 +- 12 files changed, 122 insertions(+), 92 deletions(-) create mode 100644 src/workbench/browser/src/app/shared/components/setting/eoapi-settings/theme-settings.json diff --git a/src/workbench/browser/src/app/core/services/theme/theme.model.ts b/src/workbench/browser/src/app/core/services/theme/theme.model.ts index 0a533ec04..406310a56 100644 --- a/src/workbench/browser/src/app/core/services/theme/theme.model.ts +++ b/src/workbench/browser/src/app/core/services/theme/theme.model.ts @@ -6,52 +6,52 @@ export const THEMES = [ key: '森林', value: 'classic_forest', }, - { - key: '日出', - value: 'classic_sunrise', - }, - { - key: '玩具', - value: 'classic_toy', - }, - ], - }, - { - title: '简洁', - lists: [ - { - key: '森林', - value: 'clean_forest', - }, - { - key: '日出', - value: 'clean_sunrise', - }, - { - key: '云', - value: 'clean_cloud', - }, - ], - }, - { - title: '深色', - lists: [ - { - key: '夜晚', - value: 'night_black', - }, - { - key: '森林', - value: 'night_forest', - }, - { - key: '命令行', - value: 'night_cmd', - }, - { - key: '日落', - value: 'night_dusk', - }, + // { + // key: '日出', + // value: 'classic_sunrise', + // }, + // { + // key: '玩具', + // value: 'classic_toy', + // }, ], }, + // { + // title: '简洁', + // lists: [ + // { + // key: '森林', + // value: 'clean_forest', + // }, + // { + // key: '日出', + // value: 'clean_sunrise', + // }, + // { + // key: '云', + // value: 'clean_cloud', + // }, + // ], + // }, + // { + // title: '深色', + // lists: [ + // { + // key: '夜晚', + // value: 'night_black', + // }, + // { + // key: '森林', + // value: 'night_forest', + // }, + // { + // key: '命令行', + // value: 'night_cmd', + // }, + // { + // key: '日落', + // value: 'night_dusk', + // }, + // ], + // }, ]; diff --git a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/common-settings.json b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/common-settings.json index 6ed8e6b61..7292d342b 100644 --- a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/common-settings.json +++ b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/common-settings.json @@ -10,7 +10,7 @@ "configuration": { "type": "object", "title": "通用", - "order": 2, + "order": 1, "properties": { "common.app.autoUpdate": { "type": "boolean", diff --git a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/index.ts b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/index.ts index 9b3abcbb4..f1b1bd93b 100644 --- a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/index.ts +++ b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/index.ts @@ -1,6 +1,7 @@ import commonSettings from './common-settings.json'; import extensitonSettings from './extensiton-settings.json'; import featureSettings from './feature-settings.json'; +import themeSettings from './theme-settings.json'; export type eoapiSettingsKey = keyof typeof eoapiSettings; @@ -11,6 +12,8 @@ export const eoapiSettings = { 'Eoapi-Extensions': extensitonSettings, /** 扩展配置 */ 'Eoapi-Features': featureSettings, + /** 主题配置 */ + 'Eoapi-theme': themeSettings, } as const; export default eoapiSettings; diff --git a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/theme-settings.json b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/theme-settings.json new file mode 100644 index 000000000..0641fc568 --- /dev/null +++ b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/theme-settings.json @@ -0,0 +1,21 @@ +{ + "private": true, + "name": "Eoapi-theme", + "version": "0.0.1", + "moduleName": "主题", + "moduleID": "eoapi-theme", + "author": "eoapi", + "publisher": "eoapi", + "contributes": { + "configuration": { + "type": "object", + "order": 1, + "properties": { + "select.theme": { + "type": "component", + "default": "eo-select-theme" + } + } + } + } +} 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 index 7b45c92b6..8e70f6c9d 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.html +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.html @@ -57,6 +57,11 @@

{{ module.title }}

{{module.properties[field]?.description}} + + + + + diff --git a/src/workbench/browser/src/app/shared/components/setting/setting.component.scss b/src/workbench/browser/src/app/shared/components/setting/setting.component.scss index 21ce3bb4b..fa19df115 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.scss +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.scss @@ -2,7 +2,7 @@ font-size: 20px; position: absolute; padding: 15px; - bottom: 0; + bottom: var(--FOOTER_HEIGHT, 0); } .container { @@ -17,11 +17,6 @@ .tree-view, .form { overflow: auto; } -::ng-deep { - .tree-view .ant-tree-switcher { - width: 20px; - } -} .form { padding-right: 10px; } 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 index e10368847..d761b16c9 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.ts +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.ts @@ -168,6 +168,7 @@ export class SettingComponent implements OnInit { // 所有设置 const allSettings = cloneDeep([ eoapiSettings['Eoapi-Common'], + eoapiSettings['Eoapi-theme'], eoapiSettings['Eoapi-Extensions'], // eoapiSettings['Eoapi-Features'], ]); 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 index ba05f52ba..9846a0066 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.module.ts +++ b/src/workbench/browser/src/app/shared/components/setting/setting.module.ts @@ -17,6 +17,7 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs'; import { NzTreeViewModule } from 'ng-zorro-antd/tree-view'; import { ElectronService } from '../../../core/services'; +import { SharedModule } from '../../shared.module'; const ANTDMODULES = [ NzModalModule, @@ -35,7 +36,7 @@ const ANTDMODULES = [ ]; @NgModule({ declarations: [SettingComponent], - imports: [FormsModule, ReactiveFormsModule, CommonModule, ...ANTDMODULES], + imports: [FormsModule, ReactiveFormsModule, SharedModule, CommonModule, ...ANTDMODULES], exports: [SettingComponent], providers: [ElectronService], }) diff --git a/src/workbench/browser/src/app/shared/components/toolbar/select-theme/select-theme.component.html b/src/workbench/browser/src/app/shared/components/toolbar/select-theme/select-theme.component.html index 861458525..8b6c3448f 100644 --- a/src/workbench/browser/src/app/shared/components/toolbar/select-theme/select-theme.component.html +++ b/src/workbench/browser/src/app/shared/components/toolbar/select-theme/select-theme.component.html @@ -1,4 +1,4 @@ - - - -
-
{{ group.title }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ theme.key }} -
+ --> + +
+
{{ group.title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ theme.key }} +
+
- - - +
+
+ + diff --git a/src/workbench/browser/src/app/shared/components/toolbar/toolbar.component.html b/src/workbench/browser/src/app/shared/components/toolbar/toolbar.component.html index 608d4a8d1..314e76752 100644 --- a/src/workbench/browser/src/app/shared/components/toolbar/toolbar.component.html +++ b/src/workbench/browser/src/app/shared/components/toolbar/toolbar.component.html @@ -1,5 +1,6 @@
- +
- + diff --git a/src/workbench/browser/src/assets/theme/antd.less b/src/workbench/browser/src/assets/theme/antd.less index 44865e890..e55e18df1 100644 --- a/src/workbench/browser/src/assets/theme/antd.less +++ b/src/workbench/browser/src/assets/theme/antd.less @@ -5,10 +5,10 @@ // Override less variables to here // View all variables: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/style/themes/default.less @theme-color: #00785a; -@border-radius-base:3px; +@border-radius-base: 3px; @primary-color: @theme-color; @success-color: @theme-color; -@link-color:rgba(0, 0, 0, 0.8); +@link-color:rgba (0, 0, 0, 0.8); @processing-color: @theme-color; @tree-title-height: 30px; body { @@ -68,13 +68,16 @@ body { p { margin-bottom: 0; } -.ant-btn.ant-dropdown-trigger{ +.ant-btn.ant-dropdown-trigger { width: 20px; } -.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{ +.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected { background-color: @theme-color; color: #fff; } -.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn{ +.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn { text-shadow: none; -} \ No newline at end of file +} +.ant-tree-switcher { + width: 20px; +} diff --git a/src/workbench/browser/src/styles.scss b/src/workbench/browser/src/styles.scss index bc8079c77..8eea89b9b 100644 --- a/src/workbench/browser/src/styles.scss +++ b/src/workbench/browser/src/styles.scss @@ -8,8 +8,8 @@ body { } :root { --NAVBAR_HEIGHT: 50px; - --FOOTER_HEIGHT: 0px; - // --FOOTER_HEIGHT: 30px; + // --FOOTER_HEIGHT: 0px; + --FOOTER_HEIGHT: 30px; } .api_test_history_list { .method_label { From 97bd66eb7532f6c9404cb2bd7e52826eccc558a3 Mon Sep 17 00:00:00 2001 From: buqiyuan <1743369777@qq.com> Date: Tue, 17 May 2022 19:57:43 +0800 Subject: [PATCH 14/14] fix: setting icon css style --- .../setting/eoapi-settings/theme-settings.json | 1 + .../components/setting/setting.component.html | 14 ++++++++------ .../components/setting/setting.component.scss | 1 + 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/theme-settings.json b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/theme-settings.json index 0641fc568..7a14385eb 100644 --- a/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/theme-settings.json +++ b/src/workbench/browser/src/app/shared/components/setting/eoapi-settings/theme-settings.json @@ -13,6 +13,7 @@ "properties": { "select.theme": { "type": "component", + "label": "主题列表", "default": "eo-select-theme" } } 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 index 8e70f6c9d..0501487e1 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.html +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.html @@ -1,7 +1,7 @@ - + - +
@@ -28,11 +28,13 @@
-

{{ module.title }}

+

{{ module.title }}

- - {{module.properties[field]?.label }} - + + + {{module.properties[field]?.label }} + +
{{module.properties[field]?.description }} diff --git a/src/workbench/browser/src/app/shared/components/setting/setting.component.scss b/src/workbench/browser/src/app/shared/components/setting/setting.component.scss index fa19df115..c7f321615 100644 --- a/src/workbench/browser/src/app/shared/components/setting/setting.component.scss +++ b/src/workbench/browser/src/app/shared/components/setting/setting.component.scss @@ -2,6 +2,7 @@ font-size: 20px; position: absolute; padding: 15px; + cursor: pointer; bottom: var(--FOOTER_HEIGHT, 0); }