feat: add selectTheme

Postcatlab · May 17, 2022 · baece70 · baece70
1 parent 636f35a
commit baece70
Show file tree

Hide file tree

Showing 12 changed files with 122 additions and 92 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -57,6 +57,11 @@ <h2 class="title">{{ module.title }}</h2>
                   {{module.properties[field]?.description}}</nz-input-number>
               </ng-container>
 
+              <!-- 组件类型 -->
+              <ng-container *ngIf="module.properties[field]?.type === 'component'">
+                <eo-select-theme *ngIf="settings[field] === 'eo-select-theme'"></eo-select-theme>
+              </ng-container>
+
             </nz-form-control>
           </nz-form-item>
         </div>

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
@@ -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
@@ -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
@@ -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/...kbench/browser/src/app/shared/components/toolbar/select-theme/select-theme.component.html b/...kbench/browser/src/app/shared/components/toolbar/select-theme/select-theme.component.html
@@ -1,4 +1,4 @@
-<nz-drawer
+<!-- <nz-drawer
   [nzVisible]="visible"
   [nzMaskClosable]="true"
   [nzMaskStyle]="{ 'background-color': 'transparent'}"
@@ -7,34 +7,34 @@
   nzTitle="主题"
   (nzOnClose)="close()"
 >
-  <ng-container *nzDrawerContent>
-    <nz-radio-group [(ngModel)]="currentTheme" ngDefaultControl>
-      <div class="m-mode" *ngFor="let group of THEMES">
-        <div class="fs14 fwb mode-title mtb10">{{ group.title }}</div>
-        <div class="mode-card">
-          <div class="card-wrap cp" (click)="changeTheme(theme.value)"  *ngFor="let theme of group.lists">
-            <div class="card-container f_column {{ theme.value + '_cc' }}">
-              <div class="nav_cc f_row f_js_ac">
-                <div class="nav_btn_cc ml5"></div>
-                <div class="input_cc mr5"></div>
-              </div>
-              <div class="f_row_ac h_100percent">
-                <div class="sidebar_cc h_100percent w_60percent">
-                  <div class="item_scc active_item_scc f_row_ac"><span class="w_60percent"></span></div>
-                  <div class="item_scc f_row_ac"><span class="w_80percent"></span></div>
-                  <div class="item_scc f_row_ac"><span class="w_40percent"></span></div>
-                  <div class="item_scc f_row_ac"><span class="w_20percent"></span></div>
-                </div>
-                <div></div>
-              </div>
-            </div>
-            <div class="card-footer">
-              <span class="fs14">{{ theme.key }}</span>
-              <div class="mode-radio" nz-radio [nzValue]="theme.value"></div>
+  <ng-container *nzDrawerContent> -->
+<nz-radio-group [(ngModel)]="currentTheme" ngDefaultControl>
+  <div class="m-mode" *ngFor="let group of THEMES">
+    <div class="fs14 fwb mode-title mtb10">{{ group.title }}</div>
+    <div class="mode-card">
+      <div class="card-wrap cp" (click)="changeTheme(theme.value)" *ngFor="let theme of group.lists">
+        <div class="card-container f_column {{ theme.value + '_cc' }}">
+          <div class="nav_cc f_row f_js_ac">
+            <div class="nav_btn_cc ml5"></div>
+            <div class="input_cc mr5"></div>
+          </div>
+          <div class="f_row_ac h_100percent">
+            <div class="sidebar_cc h_100percent w_60percent">
+              <div class="item_scc active_item_scc f_row_ac"><span class="w_60percent"></span></div>
+              <div class="item_scc f_row_ac"><span class="w_80percent"></span></div>
+              <div class="item_scc f_row_ac"><span class="w_40percent"></span></div>
+              <div class="item_scc f_row_ac"><span class="w_20percent"></span></div>
             </div>
+            <div></div>
           </div>
         </div>
+        <div class="card-footer">
+          <span class="fs14">{{ theme.key }}</span>
+          <div class="mode-radio" nz-radio [nzValue]="theme.value"></div>
+        </div>
       </div>
-    </nz-radio-group>
-  </ng-container>
-</nz-drawer>
+    </div>
+  </div>
+</nz-radio-group>
+<!-- </ng-container>
+</nz-drawer> -->
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
@@ -1,5 +1,6 @@
 <div class="app_toolbar f_row">
-  <button nz-button nzType="text" class="f_row_ac" (click)="toggleCollapsed()"><i class="iconfont mr5 fs24 icon-zhediedaohang"></i>{{sideBarCollapsed?"显示侧边栏":"隐藏侧边栏"}}</button>
+  <button nz-button nzType="text" class="f_row_ac" (click)="toggleCollapsed()"><i
+      class="iconfont mr5 fs24 icon-zhediedaohang"></i>{{sideBarCollapsed?"显示侧边栏":"隐藏侧边栏"}}</button>
   <!-- <button nz-button nzType="text" class="f_row_ac" (click)="changeTheme()"><i class="iconfont mr5 fs24 icon-zhuti_yifu"></i>修改主题</button> -->
 </div>
-<eo-select-theme [(visible)]="showThemeDrawer"></eo-select-theme>
+<!-- <eo-select-theme [(visible)]="showThemeDrawer"></eo-select-theme> -->
diff --git 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;
-}
+}
+.ant-tree-switcher {
+  width: 20px;
+}
diff --git 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 {