From de6d4f93780b5b9a63db8052503909a68def32d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E9=B9=B0?= <17kungfuboy@gmail.com>
Date: Wed, 22 Jun 2022 16:02:07 +0800
Subject: [PATCH] feat: update style

---
 .../group/tree/api-group-tree.component.html  | 99 +++++++++++--------
 .../group/tree/api-group-tree.component.scss  | 17 ++++
 .../components/navbar/navbar.component.html   | 78 ++++++++++-----
 .../components/navbar/navbar.component.scss   | 21 ++++
 .../components/setting/setting.component.html | 82 ++++++++++-----
 .../components/sidebar/sidebar.component.html |  2 +-
 .../components/sidebar/sidebar.component.scss |  2 -
 7 files changed, 206 insertions(+), 95 deletions(-)

diff --git a/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.html b/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.html
index d894d53a2..2f4e32075 100644
--- a/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.html
+++ b/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.html
@@ -1,38 +1,32 @@
-<header class="group_header">
-  <nz-input-group>
-    <div nz-row [nzGutter]="8">
-      <div nz-col nzFlex="4">
-        <nz-input-group [nzPrefix]="prefixIcon" nzCompact>
-          <input type="text" nz-input placeholder="搜索" [(ngModel)]="searchValue" />
-        </nz-input-group>
-        <ng-template #prefixIcon>
-          <i nz-icon nzType="search"></i>
-        </ng-template>
-      </div>
-      <div nz-col nzFlex="2">
-        <nz-button-group>
-          <button nzType="primary" nz-button (click)="operateApiEvent({ event: $event, eventName: 'gotoAddApi' })">
-            <i nz-icon nzType="plus"></i>
-            API
-          </button>
-          <button nzType="primary" nz-button nz-dropdown [nzDropdownMenu]="menu" nzPlacement="bottomRight">
-            <i nz-icon nzType="caret-down" nzTheme="outline"></i>
-          </button>
-        </nz-button-group>
-        <nz-dropdown-menu #menu="nzDropdownMenu">
-          <ul nz-menu>
-            <li nz-menu-item (click)="operateApiEvent({ event: $event, eventName: 'gotoAddApi' })"><a>新建API</a></li>
-            <li nz-menu-item (click)="addGroup()"><a>新建分组</a></li>
-          </ul>
-        </nz-dropdown-menu>
-      </div>
-    </div>
-  </nz-input-group>
+<header class="flex p-2">
+  <input type="text" class="input flex-1 px-3" placeholder="search" [(ngModel)]="searchValue" />
+  <div
+    class="btn ml-3 flex items-center justify-center"
+    nzType="primary"
+    nz-button
+    nz-dropdown
+    [nzDropdownMenu]="menu"
+    nzPlacement="bottomRight"
+    (click)="operateApiEvent({ event: $event, eventName: 'gotoAddApi' })"
+  >
+    <iconpark-icon name="plus"></iconpark-icon>
+  </div>
+  <nz-dropdown-menu #menu="nzDropdownMenu">
+    <ul nz-menu>
+      <li nz-menu-item (click)="operateApiEvent({ event: $event, eventName: 'gotoAddApi' })"><a>新建API</a></li>
+      <li nz-menu-item (click)="addGroup()"><a>新建分组</a></li>
+    </ul>
+  </nz-dropdown-menu>
 </header>
 <!-- Fixed Group -->
 <div class="group_container fixed_group_tree pt10" *ngIf="electron.isElectron">
-  <nz-tree [nzData]="fixedTreeNode" [nzSelectedKeys]="nzSelectedKeys" nzBlockNode (nzClick)="clickTreeItem($event)"
-    [nzTreeTemplate]="nzFixedTreeTemplate"></nz-tree>
+  <nz-tree
+    [nzData]="fixedTreeNode"
+    [nzSelectedKeys]="nzSelectedKeys"
+    nzBlockNode
+    (nzClick)="clickTreeItem($event)"
+    [nzTreeTemplate]="nzFixedTreeTemplate"
+  ></nz-tree>
   <ng-template #nzFixedTreeTemplate let-node let-origin="origin">
     <div class="pl5 tree_node" *ngIf="node.origin?.isFixed">
       <div class="f_row_ac">
@@ -45,10 +39,20 @@
 <div class="bbd" *ngIf="electron.isElectron"></div>
 <!-- Custom Group -->
 <div class="group_container group_tree pt10">
-  <nz-tree [nzData]="treeNodes" [nzSelectedKeys]="nzSelectedKeys" #apiGroup [nzSearchValue]="searchValue"
-    [nzHideUnMatched]="true" [nzExpandedKeys]="expandKeys" (nzClick)="clickTreeItem($event)"
-    (nzExpandChange)="toggleExpand()" nzDraggable nzBlockNode (nzOnDrop)="treeItemDrop($event)"
-    [nzTreeTemplate]="nzTreeTemplate"></nz-tree>
+  <nz-tree
+    [nzData]="treeNodes"
+    [nzSelectedKeys]="nzSelectedKeys"
+    #apiGroup
+    [nzSearchValue]="searchValue"
+    [nzHideUnMatched]="true"
+    [nzExpandedKeys]="expandKeys"
+    (nzClick)="clickTreeItem($event)"
+    (nzExpandChange)="toggleExpand()"
+    nzDraggable
+    nzBlockNode
+    (nzOnDrop)="treeItemDrop($event)"
+    [nzTreeTemplate]="nzTreeTemplate"
+  ></nz-tree>
   <ng-template #nzTreeTemplate let-node let-origin="origin">
     <div class="pl5">
       <!-- Folder -->
@@ -84,13 +88,18 @@
         <div class="overflow-hidden f_row_ac text-ellipsis">
           <b class="method_text method_text_{{ node.origin.method }} mr5" *ngIf="node.origin.method">{{
             node.origin.method
-            }}</b>
+          }}</b>
           <span class="text_omit node_title">{{ node.title }}</span>
         </div>
         <span class="tree_node_operate">
           <button>
-            <i class="mr5" nz-icon nzType="thunderbolt" nzTheme="outline"
-              (click)="operateApiEvent({ event: $event, eventName: 'testApi', node: node })"></i>
+            <i
+              class="mr5"
+              nz-icon
+              nzType="thunderbolt"
+              nzTheme="outline"
+              (click)="operateApiEvent({ event: $event, eventName: 'testApi', node: node })"
+            ></i>
           </button>
           <button nz-dropdown [nzDropdownMenu]="apiDataMenu">
             <i nz-icon nzType="ellipsis" nzTheme="outline"></i>
@@ -100,12 +109,16 @@
               <li nz-menu-item (click)="operateApiEvent({ event: $event, eventName: 'gotoEditApi', node: node })">
                 <a>编辑</a>
               </li>
-              <li nz-menu-item
-                (click)="operateApiEvent({ event: $event, eventName: 'gotoCopyApi', node: apiDataItems[node.key] })">
+              <li
+                nz-menu-item
+                (click)="operateApiEvent({ event: $event, eventName: 'gotoCopyApi', node: apiDataItems[node.key] })"
+              >
                 <a>复制</a>
               </li>
-              <li nz-menu-item
-                (click)="operateApiEvent({ event: $event, eventName: 'gotoDeleteApi', node: apiDataItems[node.key] })">
+              <li
+                nz-menu-item
+                (click)="operateApiEvent({ event: $event, eventName: 'gotoDeleteApi', node: apiDataItems[node.key] })"
+              >
                 <a>删除</a>
               </li>
             </ul>
diff --git a/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.scss b/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.scss
index ea6a7217c..2bbdeb357 100644
--- a/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.scss
+++ b/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.scss
@@ -1,3 +1,20 @@
+.input {
+  height: 30px;
+  border: none;
+  background-color: rgba(0,0,0,0.05);
+  border-radius: 3px;
+  &::placeholder {
+    color: rgba(0,0,0,0.5);
+    font-size: 0.9em;
+  }
+}
+.btn {
+  width: 40px;
+  background-color: var(--BTN_PRIMARY_BG);
+  color: #fff;
+  border-radius: 3px;
+  cursor: pointer;
+}
 ::ng-deep {
   .ant-tree-node-selected * {
     // color: var(--TEXT_ACTIVE);
diff --git a/src/workbench/browser/src/app/shared/components/navbar/navbar.component.html b/src/workbench/browser/src/app/shared/components/navbar/navbar.component.html
index ac8887bb3..36389c8c7 100644
--- a/src/workbench/browser/src/app/shared/components/navbar/navbar.component.html
+++ b/src/workbench/browser/src/app/shared/components/navbar/navbar.component.html
@@ -1,22 +1,19 @@
 <div class="eo_navbar f_row f_js_ac">
-  <img class="logo" src="assets/images/logo.svg" />
-  <div class="can_be_click f_row_ac right_btn_container">
-    <div class="mr15" *ngIf="!isElectron">
-      <span nz-dropdown [nzDropdownMenu]="download">
-        <i nz-icon nzType="cloud-download" class="fs24" nzTheme="outline"></i>
-      </span>
-      <nz-dropdown-menu #download="nzDropdownMenu">
-        <ul nz-menu>
-          <ng-container *ngFor="let item of resourceInfo; let index = index">
-            <a [href]="item.link" nz-menu-item>{{ item.name }}</a>
-            <li nz-menu-divider *ngIf="index !== resourceInfo.length - 1"></li>
-          </ng-container>
-        </ul>
-      </nz-dropdown-menu>
-    </div>
+  <div>
+    <img class="logo" src="assets/images/logo.svg" />
+    <img class="mx-4" src="https://img.shields.io/github/stars/eolinker/eoapi?style=social" alt="" />
+  </div>
+  <div class="flex items-center">
     <ng-container *ngIf="isElectron">
-      <span class="mr15" title="{{ dataSourceText }}数据源" nz-dropdown [nzDropdownMenu]="settingMenu"
-        nzPlacement="bottomRight" [nzDisabled]="isRemote" (click)="isRemote && switchDataSource()">
+      <span
+        class="mr15"
+        title="{{ dataSourceText }}数据源"
+        nz-dropdown
+        [nzDropdownMenu]="settingMenu"
+        nzPlacement="bottomRight"
+        [nzDisabled]="isRemote"
+        (click)="isRemote && switchDataSource()"
+      >
         <i nz-icon [nzType]="isRemote ? 'cloud' : 'cloud-sync'" nzTheme="outline" class="fs20"></i>
       </span>
       <nz-dropdown-menu #settingMenu="nzDropdownMenu">
@@ -26,14 +23,18 @@
           </div>
           <div>
             <h4 class="title">{{ dataSourceText }}数据源</h4>
-            <div class="desc"> 数据储存在{{ dataSourceText }}，{{ isRemote ? '如不需协作，可以切换到本地数据源' : '如需协作请切换到远程数据源'}}</div>
+            <div class="desc">
+              数据储存在{{ dataSourceText }}，{{
+                isRemote ? '如不需协作，可以切换到本地数据源' : '如需协作请切换到远程数据源'
+              }}
+            </div>
             <button nz-button nzType="default" nzSize="small" (click)="switchDataSource()">切换</button>
           </div>
         </div>
       </nz-dropdown-menu>
     </ng-container>
-    <span class="mr15" nz-dropdown [nzDropdownMenu]="menu">
-      <i nz-icon nzType="question-circle" class="fs20" nzTheme="outline"></i>
+    <span class="icon mx-2 flex items-center justify-center" nz-dropdown [nzDropdownMenu]="menu">
+      <iconpark-icon name="help"></iconpark-icon>
     </span>
     <nz-dropdown-menu #menu="nzDropdownMenu">
       <ul nz-menu nzSelectable>
@@ -43,16 +44,41 @@ <h4 class="title">{{ dataSourceText }}数据源</h4>
       </ul>
     </nz-dropdown-menu>
     <div *ngIf="!OS_TYPE.includes('mac') && isElectron">
-      <span nz-tooltip nzTooltipTitle="最小化" nzTooltipPlacement="left" class="iconfont icon-jianhao mr10 fs24 cp"
-        (click)="minimize()">
+      <span
+        nz-tooltip
+        nzTooltipTitle="最小化"
+        nzTooltipPlacement="left"
+        class="iconfont icon-jianhao mr10 fs24 cp"
+        (click)="minimize()"
+      >
       </span>
-      <span nz-tooltip [nzTooltipTitle]="isMaximized ? '向下还原' : '最大化'" nzTooltipPlacement="left"
+      <span
+        nz-tooltip
+        [nzTooltipTitle]="isMaximized ? '向下还原' : '最大化'"
+        nzTooltipPlacement="left"
         class="iconfont icon-{{ isMaximized ? 'copy' : 'duoxuanweixuanzhong' }} mr10 fs24 cp"
-        (click)="toggleMaximize()">
+        (click)="toggleMaximize()"
+      >
       </span>
-      <span nz-tooltip nzTooltipTitle="关闭" nzTooltipPlacement="left" class="iconfont icon-guanbi pr15 fs24 cp"
-        (click)="close()">
+      <span
+        nz-tooltip
+        nzTooltipTitle="关闭"
+        nzTooltipPlacement="left"
+        class="iconfont icon-guanbi pr15 fs24 cp"
+        (click)="close()"
+      >
       </span>
     </div>
+    <div *ngIf="!isElectron">
+      <div class="btn py-1.5 px-2 mx-1 flex items-center" nz-dropdown [nzDropdownMenu]="download">Download</div>
+      <nz-dropdown-menu #download="nzDropdownMenu">
+        <ul nz-menu>
+          <ng-container *ngFor="let item of resourceInfo; let index = index">
+            <a [href]="item.link" nz-menu-item>{{ item.name }}</a>
+            <li nz-menu-divider *ngIf="index !== resourceInfo.length - 1"></li>
+          </ng-container>
+        </ul>
+      </nz-dropdown-menu>
+    </div>
   </div>
 </div>
diff --git a/src/workbench/browser/src/app/shared/components/navbar/navbar.component.scss b/src/workbench/browser/src/app/shared/components/navbar/navbar.component.scss
index 8b6879bee..36274ec61 100644
--- a/src/workbench/browser/src/app/shared/components/navbar/navbar.component.scss
+++ b/src/workbench/browser/src/app/shared/components/navbar/navbar.component.scss
@@ -1,3 +1,23 @@
+.btn {
+  border-radius: 3px;
+  background-color: var(--BTN_PRIMARY_BG);
+  color: #fff;
+  font-size: 0.9em;
+  height: 30px;
+  cursor: pointer;
+}
+.icon {
+  width: 30px;
+  height: 30px;
+  font-size: 1.5em;
+  color: rgba(0,0,0,0.5);
+  cursor: pointer;
+  border-radius: 3px;
+  transition: all .4s ease;
+  &:hover {
+    background-color: rgba(0,0,0,0.05);
+  }
+}
 .eo_navbar {
   -webkit-app-region: drag;
   position: sticky;
@@ -5,6 +25,7 @@
   z-index: 11;
   left: 0;
   top: 0;
+  padding: 0 8px;
   // background-color: var(--NAVBAR_BG);
   // color: var(--NAVBAR_TEXT);
   // border-bottom: 1px solid var(--NAVBAR_BORDER_BOTTOM);
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 cc448029c..baa76f86a 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,14 +1,19 @@
 <ng-container *ngIf="isVisible">
-  <span nz-popover [nzPopoverContent]="contentTemplate" [nzPopoverOverlayStyle]="{left: '-12px', marginBottom: '8px'}"
-    nzPopoverOverlayClassName="sidebar_setting_popover" nzPopoverPlacement="rightBottom"
-    class="sidebar_item sidebar_setting" title="设置">
+  <span
+    nz-popover
+    [nzPopoverContent]="contentTemplate"
+    [nzPopoverOverlayStyle]="{ left: '-12px', marginBottom: '8px' }"
+    nzPopoverOverlayClassName="sidebar_setting_popover"
+    nzPopoverPlacement="rightBottom"
+    class="sidebar_item sidebar_setting"
+  >
     <i nz-icon nzType="setting"></i>
   </span>
 
   <ng-template #contentTemplate>
     <ul nz-menu [nzSelectable]="false">
       <li nz-menu-item (click)="handleShowModal()">设置</li>
-      <li nz-menu-item (click)="switchDataSource()">切换到{{ isRemote ? '本地' : '远程' }}</li>
+      <li nz-menu-item (click)="switchDataSource()">{{ isRemote ? '切换到本地' : '切换到远程' }}</li>
     </ul>
   </ng-template>
 
@@ -17,8 +22,11 @@
       <nz-tree-view [nzTreeControl]="treeControl" [nzDataSource]="dataSource" [nzBlockNode]="true" class="tree-view">
         <nz-tree-node *nzTreeNodeDef="let node" nzTreeNodePadding>
           <nz-tree-node-toggle nzTreeNodeNoopToggle></nz-tree-node-toggle>
-          <nz-tree-node-option [nzDisabled]="node.disabled" [nzSelected]="selectListSelection.isSelected(node)"
-            (nzClick)="selectModule(node)">
+          <nz-tree-node-option
+            [nzDisabled]="node.disabled"
+            [nzSelected]="selectListSelection.isSelected(node)"
+            (nzClick)="selectModule(node)"
+          >
             {{ node.title }}
           </nz-tree-node-option>
         </nz-tree-node>
@@ -27,47 +35,76 @@
           <nz-tree-node-toggle>
             <i nz-icon nzType="caret-down" nzTreeNodeToggleRotateIcon></i>
           </nz-tree-node-toggle>
-          <nz-tree-node-option [nzDisabled]="node.disabled" [nzSelected]="selectListSelection.isSelected(node)"
-            (nzClick)="selectModule(node)">
+          <nz-tree-node-option
+            [nzDisabled]="node.disabled"
+            [nzSelected]="selectListSelection.isSelected(node)"
+            (nzClick)="selectModule(node)"
+          >
             {{ node.title }}
           </nz-tree-node-option>
         </nz-tree-node>
       </nz-tree-view>
       <nz-divider nzType="vertical" class="divider"></nz-divider>
-      <form *ngIf="currentConfiguration.length" nz-form [nzLayout]="'vertical'" [formGroup]="validateForm"
-        (ngSubmit)="handleSave()" class="form">
+      <form
+        *ngIf="currentConfiguration.length"
+        nz-form
+        [nzLayout]="'vertical'"
+        [formGroup]="validateForm"
+        (ngSubmit)="handleSave()"
+        class="form"
+      >
         <div *ngFor="let module of currentConfiguration">
           <h2 class="title" *ngIf="module.title">{{ module.title }}</h2>
           <nz-form-item nz-col class="fg1" *ngFor="let field of objectKeys(module.properties)">
             <ng-container *ngIf="module.properties[field]?.label">
               <nz-form-label nzFor="{{ field }}" [nzRequired]="module.properties[field]?.required" class="label">
-                {{module.properties[field]?.label }}
+                {{ module.properties[field]?.label }}
               </nz-form-label>
             </ng-container>
             <!-- 二级说明 -->
-            <div *ngIf="module.properties[field]?.type !== 'boolean' && module.properties[field]?.description"
-              class="description" [innerHTML]="md.render(module.properties[field]?.description)">
-            </div>
+            <div
+              *ngIf="module.properties[field]?.type !== 'boolean' && module.properties[field]?.description"
+              class="description"
+              [innerHTML]="md.render(module.properties[field]?.description)"
+            ></div>
             <nz-form-control nzErrorTip="请输入{{ module.properties[field]?.label }}" class="form-control">
               <!-- 字符串类型 -->
               <ng-container *ngIf="module.properties[field]?.type === 'string'">
-                <input type="text" nz-input id="{{ field }}" [disabled]="module.properties[field]?.disabled"
-                  placeholder="{{module.properties[field]?.placeholder ?? '请输入' + module.properties[field]?.label}}"
-                  formControlName="{{ field }}" [(ngModel)]="settings[field]" />
+                <input
+                  type="text"
+                  nz-input
+                  id="{{ field }}"
+                  [disabled]="module.properties[field]?.disabled"
+                  placeholder="{{
+                    module.properties[field]?.placeholder ?? '请输入' + module.properties[field]?.label
+                  }}"
+                  formControlName="{{ field }}"
+                  [(ngModel)]="settings[field]"
+                />
               </ng-container>
 
               <!-- 布尔类型 -->
               <ng-container *ngIf="module.properties[field]?.type === 'boolean'">
-                <label nz-checkbox [(ngModel)]="settings[field]" id="{{ field }}"
+                <label
+                  nz-checkbox
+                  [(ngModel)]="settings[field]"
+                  id="{{ field }}"
                   [nzDisabled]="module.properties[field]?.disabled"
-                  formControlName="{{ field }}">{{module.properties[field]?.description}}</label>
+                  formControlName="{{ field }}"
+                  >{{ module.properties[field]?.description }}</label
+                >
               </ng-container>
 
               <!-- 数字类型 -->
               <ng-container *ngIf="module.properties[field]?.type === 'number'">
-                <nz-input-number [(ngModel)]="settings[field]" id="{{ field }}"
-                  [nzDisabled]="module.properties[field]?.disabled" formControlName="{{ field }}">
-                  {{module.properties[field]?.description}}</nz-input-number>
+                <nz-input-number
+                  [(ngModel)]="settings[field]"
+                  id="{{ field }}"
+                  [nzDisabled]="module.properties[field]?.disabled"
+                  formControlName="{{ field }}"
+                >
+                  {{ module.properties[field]?.description }}</nz-input-number
+                >
               </ng-container>
 
               <!-- 组件类型 -->
@@ -77,7 +114,6 @@ <h2 class="title" *ngIf="module.title">{{ module.title }}</h2>
                 <!-- 关于eopai -->
                 <eo-about *ngIf="settings[field] === 'eo-about'"></eo-about>
               </ng-container>
-
             </nz-form-control>
           </nz-form-item>
         </div>
diff --git a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.html b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.html
index 16e7649cc..d0498f2db 100644
--- a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.html
+++ b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.html
@@ -11,6 +11,6 @@
     <i class="icon">
       <iconpark-icon [name]="item.icon"></iconpark-icon>
     </i>
-    <span class="label my-1" *ngIf="!sidebar.collapsed">{{ item.moduleName }}</span>
+    <span class="label mt-1" *ngIf="!sidebar.collapsed">{{ item.moduleName }}</span>
   </a>
 </div>
diff --git a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.scss b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.scss
index e204ffbb7..42127eb24 100644
--- a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.scss
+++ b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.scss
@@ -1,11 +1,9 @@
 .eo_sidebar {
-  background-color: var(--SIDEBAR_BG);
   border-right: 1px solid var(--BORDER);
   overflow: auto;
   width: 90px;
   height: 100%;
   transition: width .3s cubic-bezier(.2,0,0,1) 0s;
-
 }
 .eo_sidebar_shrink {
   width: 50px;