test/postcat
1
0
Fork 0
mirror of https://gitee.com/eolink_admin/postcat.git synced 2024-12-02 11:47:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update css style

Browse Source
This commit is contained in:
buqiyuan 2022-07-26 20:29:45 +08:00
parent b22eba32a6
commit 361d10b193
10 changed files with 261 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/workbench/browser/src/app/eoui/editor/eo-editor/eo-editor.component.html
View File

@ -1,4 +1,4 @@
<div class="eo-editor" [style.--eo-editor-height]="minHeight + 'px'">
<div class="eo-editor" [style.--eo-editor-height]="isNaN(minHeight) ? minHeight : minHeight + 'px'">
<div class="button_list">
<span *ngIf="eventList.includes('type') && !hiddenList.includes('type')" i18n>
Content Type

14
src/workbench/browser/src/app/eoui/editor/eo-editor/eo-editor.component.ts
View File

@ -51,7 +51,7 @@ export class EoEditorComponent implements AfterViewInit, OnInit, OnChanges {
@Input() eventList: EventType[] = [];
@Input() hiddenList: string[] = [];
@Input() code: string;
@Input() minHeight = 70;
@Input() minHeight = '70';
@Input() editorType = 'json';
@Input() autoFormat = false;
@Input() disabled = false;
@ -95,9 +95,19 @@ export class EoEditorComponent implements AfterViewInit, OnInit, OnChanges {
return { ...this.$config, ...this.config };
}
isNaN(val) {
return Number.isNaN(Number(val));
}
constructor(private message: EoMessageService, private electron: ElectronService) {}
ngAfterViewInit(): void {}
ngAfterViewInit(): void {
setTimeout(() => {
const ace = this.aceRef.directiveRef.ace();
ace.resize();
console.log('ace resize', ace);
}, 10000);
}
ngOnChanges() {
// * update root type
if (this.eventList.includes('type') && !this.hiddenList.includes('type')) {

222
src/workbench/browser/src/app/pages/api/test/api-test.component.html
View File

@ -1,118 +1,122 @@
<div class="test_wrap">
<div class="top_container scroll_container">
<form nz-form [nzLayout]="'vertical'" [formGroup]="validateForm">
<nz-form-item nz-col class="basic_info_container">
<nz-form-control>
<nz-input-group nzCompact>
<nz-select class="w_100" [(ngModel)]="apiData.protocol" formControlName="protocol">
<nz-option *ngFor="let item of REQUEST_PROTOCOL" [nzLabel]="item.key" [nzValue]="item.value"></nz-option>
</nz-select>
<nz-select class="!w-[106px] flex-none" [(ngModel)]="apiData.method" formControlName="method">
<nz-option *ngFor="let item of REQUEST_METHOD" [nzLabel]="item.key" [nzValue]="item.value"></nz-option>
</nz-select>
<div *ngIf="env.hostUri" nz-typography nzEllipsis class="env_front_uri" nzTooltipTitle="{{ env.hostUri }}"
nzTooltipPlacement="bottom" nz-tooltip>
{{ env.hostUri }}
</div>
<input type="text" i18n-placeholder placeholder="Enter URL" name="uri" nz-input formControlName="uri"
[(ngModel)]="apiData.uri" (change)="changeUri()" />
<button type="submit" nz-button nzType="primary" class="ml10" (click)="clickTest()">
<span *ngIf="status === 'testing'" i18n>Abort</span>
<span *ngIf="status !== 'testing'" i18n>Send</span>
<span *ngIf="status === 'testing' && waitSeconds" class="ml5">{{ waitSeconds }}</span>
</button>
<button type="button" *ngIf="!apiData.uuid" nz-button nzType="default" (click)="saveTestDataToApi()"
class="ml10" i18n>
Save as API
</button>
</nz-input-group>
</nz-form-control>
</nz-form-item>
</form>
<!-- Request Info -->
<nz-tabset [nzTabBarStyle]="{ 'padding-left': '10px' }" [nzAnimated]="false" [(nzSelectedIndex)]="nzSelectedIndex">
<!-- Request Headers -->
<nz-tab [nzTitle]="headerTitleTmp" [nzForceRender]="true">
<ng-template #headerTitleTmp>
<span i18n="@@RequestHeaders">Headers</span>
<span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(apiData.requestHeaders)">{{
apiData.requestHeaders | apiParamsNum
}}</span>
</ng-template>
<eo-api-test-header class="eo_theme_iblock bbd" [(model)]="apiData.requestHeaders"></eo-api-test-header>
</nz-tab>
<!--Request Info -->
<nz-tab [nzTitle]="bodyTitleTmp" [nzForceRender]="true">
<ng-template #bodyTitleTmp>
<span i18n>Body</span>
<span class="iconfont icon-circle eo-tab-theme-icon" *ngIf="
<eo-split-panel [topStyle]="{height: '45%'}">
<div class="top_container scroll_container" top>
<form nz-form [nzLayout]="'vertical'" [formGroup]="validateForm">
<nz-form-item nz-col class="basic_info_container">
<nz-form-control>
<nz-input-group nzCompact>
<nz-select class="w_100" [(ngModel)]="apiData.protocol" formControlName="protocol">
<nz-option *ngFor="let item of REQUEST_PROTOCOL" [nzLabel]="item.key" [nzValue]="item.value">
</nz-option>
</nz-select>
<nz-select class="!w-[106px] flex-none" [(ngModel)]="apiData.method" formControlName="method">
<nz-option *ngFor="let item of REQUEST_METHOD" [nzLabel]="item.key" [nzValue]="item.value"></nz-option>
</nz-select>
<div *ngIf="env.hostUri" nz-typography nzEllipsis class="env_front_uri" nzTooltipTitle="{{ env.hostUri }}"
nzTooltipPlacement="bottom" nz-tooltip>
{{ env.hostUri }}
</div>
<input type="text" i18n-placeholder placeholder="Enter URL" name="uri" nz-input formControlName="uri"
[(ngModel)]="apiData.uri" (change)="changeUri()" />
<button type="submit" nz-button nzType="primary" class="ml10" (click)="clickTest()">
<span *ngIf="status === 'testing'" i18n>Abort</span>
<span *ngIf="status !== 'testing'" i18n>Send</span>
<span *ngIf="status === 'testing' && waitSeconds" class="ml5">{{ waitSeconds }}</span>
</button>
<button type="button" *ngIf="!apiData.uuid" nz-button nzType="default" (click)="saveTestDataToApi()"
class="ml10" i18n>
Save as API
</button>
</nz-input-group>
</nz-form-control>
</nz-form-item>
</form>
<!-- Request Info -->
<nz-tabset [nzTabBarStyle]="{ 'padding-left': '10px' }" [nzAnimated]="false"
[(nzSelectedIndex)]="nzSelectedIndex">
<!-- Request Headers -->
<nz-tab [nzTitle]="headerTitleTmp" [nzForceRender]="true">
<ng-template #headerTitleTmp>
<span i18n="@@RequestHeaders">Headers</span>
<span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(apiData.requestHeaders)">{{
apiData.requestHeaders | apiParamsNum
}}</span>
</ng-template>
<eo-api-test-header class="eo_theme_iblock bbd" [(model)]="apiData.requestHeaders"></eo-api-test-header>
</nz-tab>
<!--Request Info -->
<nz-tab [nzTitle]="bodyTitleTmp" [nzForceRender]="true">
<ng-template #bodyTitleTmp>
<span i18n>Body</span>
<span class="iconfont icon-circle eo-tab-theme-icon" *ngIf="
['formData', 'json', 'xml'].includes(apiData.requestBodyType)
? bindGetApiParamNum(apiData.requestBody)
: apiData.requestBody?.length
"></span>
</ng-template>
<eo-api-test-body class="eo_theme_iblock bbd" [(bodyType)]="apiData.requestBodyType"
[(model)]="apiData.requestBody" [supportType]="['formData', 'json', 'xml', 'raw', 'binary']"
[(jsonRootType)]="apiData.requestBodyJsonType"></eo-api-test-body>
</nz-tab>
<nz-tab [nzTitle]="queryTitleTmp" [nzForceRender]="true">
<ng-template #queryTitleTmp>
<span i18n>Query</span>
<span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(apiData.queryParams)">{{
apiData.queryParams | apiParamsNum
}}</span>
</ng-template>
<eo-api-test-query class="eo_theme_iblock bbd" [model]="apiData.queryParams"
(modelChange)="changeQuery($event)"></eo-api-test-query>
</nz-tab>
<nz-tab [nzTitle]="restTitleTmp" [nzForceRender]="true">
<ng-template #restTitleTmp>
<span i18n>REST</span>
<span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(apiData.restParams)">{{
apiData.restParams | apiParamsNum
}}</span>
</ng-template>
<eo-api-test-rest class="eo_theme_iblock bbd" [model]="apiData.restParams"></eo-api-test-rest>
</nz-tab>
<nz-tab [nzTitle]="preScriptTitleTmp" [nzForceRender]="true">
<ng-template #preScriptTitleTmp>
<span i18n>Pre-request Script</span>
<span class="iconfont icon-circle eo-tab-theme-icon" *ngIf="beforeScript?.trim()"></span>
</ng-template>
<eo-api-script *ngIf="nzSelectedIndex === 4" [(code)]="beforeScript" [treeData]="BEFORE_DATA"
[completions]="beforeScriptCompletions" class="eo_theme_iblock bbd"></eo-api-script>
</nz-tab>
<nz-tab [nzTitle]="suffixScriptTitleTmp" [nzForceRender]="true">
<ng-template #suffixScriptTitleTmp>
<span i18n>After-response Script</span>
<span class="iconfont icon-circle eo-tab-theme-icon" *ngIf="afterScript?.trim()"></span>
</ng-template>
<eo-api-script *ngIf="nzSelectedIndex === 5" [(code)]="afterScript" [treeData]="AFTER_DATA"
[completions]="afterScriptCompletions" class="eo_theme_iblock bbd"></eo-api-script>
</nz-tab>
</nz-tabset>
</div>
<div class="bottom_container scroll_container">
<!-- Response -->
<nz-tabset [nzTabBarStyle]="{ 'padding-left': '10px' }" [(nzSelectedIndex)]="tabIndexRes" [nzAnimated]="false"
class="mt10 response_container">
<nz-tab i18n-nzTitle nzTitle="Response">
<eo-api-test-result-response [model]="testResult?.response"></eo-api-test-result-response>
</nz-tab>
<div>
<nz-tab i18n-nzTitle nzTitle="Response Headers">
<eo-api-test-result-header [model]="testResult?.response?.headers"></eo-api-test-result-header>
</ng-template>
<eo-api-test-body class="eo_theme_iblock bbd" [(bodyType)]="apiData.requestBodyType"
[(model)]="apiData.requestBody" [supportType]="['formData', 'json', 'xml', 'raw', 'binary']"
[(jsonRootType)]="apiData.requestBodyJsonType"></eo-api-test-body>
</nz-tab>
</div>
<nz-tab i18n-nzTitle nzTitle="Body">
<eo-api-test-result-request-body [model]="testResult.request?.requestBody"></eo-api-test-result-request-body>
</nz-tab>
<nz-tab i18n-nzTitle nzTitle="Request Headers">
<eo-api-test-result-header [model]="testResult.request?.requestHeaders"></eo-api-test-result-header>
</nz-tab>
</nz-tabset>
<div id="test-response"></div>
</div>
<nz-tab [nzTitle]="queryTitleTmp" [nzForceRender]="true">
<ng-template #queryTitleTmp>
<span i18n>Query</span>
<span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(apiData.queryParams)">{{
apiData.queryParams | apiParamsNum
}}</span>
</ng-template>
<eo-api-test-query class="eo_theme_iblock bbd" [model]="apiData.queryParams"
(modelChange)="changeQuery($event)"></eo-api-test-query>
</nz-tab>
<nz-tab [nzTitle]="restTitleTmp" [nzForceRender]="true">
<ng-template #restTitleTmp>
<span i18n>REST</span>
<span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(apiData.restParams)">{{
apiData.restParams | apiParamsNum
}}</span>
</ng-template>
<eo-api-test-rest class="eo_theme_iblock bbd" [model]="apiData.restParams"></eo-api-test-rest>
</nz-tab>
<nz-tab [nzTitle]="preScriptTitleTmp" [nzForceRender]="true">
<ng-template #preScriptTitleTmp>
<span i18n>Pre-request Script</span>
<span class="iconfont icon-circle eo-tab-theme-icon" *ngIf="beforeScript?.trim()"></span>
</ng-template>
<eo-api-script *ngIf="nzSelectedIndex === 4" [(code)]="beforeScript" [treeData]="BEFORE_DATA"
[completions]="beforeScriptCompletions" class="eo_theme_iblock bbd"></eo-api-script>
</nz-tab>
<nz-tab [nzTitle]="suffixScriptTitleTmp" [nzForceRender]="true">
<ng-template #suffixScriptTitleTmp>
<span i18n>After-response Script</span>
<span class="iconfont icon-circle eo-tab-theme-icon" *ngIf="afterScript?.trim()"></span>
</ng-template>
<eo-api-script *ngIf="nzSelectedIndex === 5" [(code)]="afterScript" [treeData]="AFTER_DATA"
[completions]="afterScriptCompletions" class="eo_theme_iblock bbd"></eo-api-script>
</nz-tab>
</nz-tabset>
</div>
<div class="bottom_container scroll_container" bottom>
<!-- Response -->
<nz-tabset [nzTabBarStyle]="{ 'padding-left': '10px' }" [(nzSelectedIndex)]="tabIndexRes" [nzAnimated]="false"
class="mt10 response_container">
<nz-tab i18n-nzTitle nzTitle="Response">
<eo-api-test-result-response [model]="testResult?.response"></eo-api-test-result-response>
</nz-tab>
<div>
<nz-tab i18n-nzTitle nzTitle="Response Headers">
<eo-api-test-result-header [model]="testResult?.response?.headers"></eo-api-test-result-header>
</nz-tab>
</div>
<nz-tab i18n-nzTitle nzTitle="Body">
<eo-api-test-result-request-body [model]="testResult.request?.requestBody"></eo-api-test-result-request-body>
</nz-tab>
<nz-tab i18n-nzTitle nzTitle="Request Headers">
<eo-api-test-result-header [model]="testResult.request?.requestHeaders"></eo-api-test-result-header>
</nz-tab>
</nz-tabset>
<div id="test-response"></div>
</div>
</eo-split-panel>
</div>
<div class="invisible" hidden>
<eo-api-test-history [apiID]="apiData.uuid" (clickItem)="restoreHistory($event)" #historyComponent>

4
src/workbench/browser/src/app/pages/api/test/api-test.component.scss
View File

@ -25,7 +25,7 @@ eo-api-test-rest {
overflow-y: auto;
}
::ng-deep .top_container {
height: 45%;
height: 100%;
form {
position: sticky;
@ -48,7 +48,7 @@ eo-api-test-rest {
}
}
.bottom_container {
height: 65%;
height: 100%;
}
}

2
src/workbench/browser/src/app/pages/api/test/body/api-test-body.component.html
View File

@ -21,7 +21,7 @@
<list-block-common-component *ngIf="['formData', 'json', 'xml'].includes(bodyType)" [mainObject]="listConf"
[(list)]="model"></list-block-common-component>
<!-- Raw -->
<eo-editor [(code)]="model" (codeChange)="rawDataChange()" *ngIf="bodyType === 'raw'" [config]="{maxLines: 10}"
<eo-editor [(code)]="model" (codeChange)="rawDataChange()" *ngIf="bodyType === 'raw'" [minHeight]="'100%'"
[eventList]="['type', 'format', 'copy', 'download', 'newTab', 'search', 'replace']"></eo-editor>
<!-- Binary -->
<textarea class="btd" rows="4" *ngIf="bodyType === 'binary'" nzBorderless i18n-placeholder="@@Description"

2
src/workbench/browser/src/app/shared/components/api-script/api-script.component.html
View File

@ -44,7 +44,7 @@
</div>
<div class="flex-1 h-[322px]">
<eo-editor [(code)]="code" editorType="javascript" [eventList]="['format', 'copy', 'search', 'replace']"
(codeChange)="handleChange($event)" [completions]="completions" [minHeight]="270">
(codeChange)="handleChange($event)" [completions]="completions" minHeight="270">
</eo-editor>
</div>
</div>

14
src/workbench/browser/src/app/shared/components/split-panel/split.panel.component.html Normal file
View File

@ -0,0 +1,14 @@
<div class="split-wrapper">
<div #scalable class="scalable" [style]="topStyle">
<ng-content select="[top]"></ng-content>
</div>
<div class="separator" (mousedown)="startDrag($event)">
<div class="trigger-bar-con ">
<i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i>
</div>
</div>
<div #bottomRef>
<ng-content select="[bottom]"></ng-content>
</div>
</div>

51
src/workbench/browser/src/app/shared/components/split-panel/split.panel.component.scss Normal file
View File

@ -0,0 +1,51 @@
.split-wrapper {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
.scalable {
position: relative;
}
.separator {
position: relative;
height: 6px;
background: #f8f8f9;
border-left: none;
border-right: none;
cursor: row-resize;
border: 1px solid #dcdee2;
transition: all 0.1s;
&:hover {
background-color: #6366f1;
}
.trigger-bar-con {
position: absolute;
left: 50%;
top: 1px;
width: 32px;
transform: translate(-50%);
height: 100%;
}
i {
height: 100%;
width: 1px;
background: rgba(23,35,61,.25);
float: left;
margin-right: 3px;
}
}
.right-content {
flex: auto;
}
.left-content,
.right-content {
overflow: auto;
}
}

55
src/workbench/browser/src/app/shared/components/split-panel/split.panel.component.ts Normal file
View File

@ -0,0 +1,55 @@
import { Component, OnInit, OnDestroy, ViewChild, ElementRef, Input } from '@angular/core';
@Component({
selector: 'eo-split-panel',
templateUrl: './split.panel.component.html',
styleUrls: ['./split.panel.component.scss'],
})
export class SplitPanelComponent implements OnInit, OnDestroy {
@Input() direction = 'column';
@Input() topStyle;
@Input() bottomStyle;
@Input() hideSeparator = false;
startX: number;
startY: number;
startWidth: number;
startHeight: number;
@ViewChild('scalable') scalableRef: ElementRef;
@ViewChild('bottomRef') bottomRef: ElementRef;
constructor() {}
ngOnInit(): void {}
ngOnDestroy(): void {}
// 拖拽中
onDrag = (e: MouseEvent) => {
const scalableEl = this.scalableRef.nativeElement;
if (scalableEl) {
scalableEl.style.height = `${this.startHeight + e.clientY - this.startY}px`;
this.bottomRef.nativeElement.style.height = `calc(100% - 12px - ${scalableEl.style.height})`;
}
};
// 拖拽结束
dragEnd = () => {
document.documentElement.style.userSelect = 'unset';
document.documentElement.removeEventListener('mousemove', this.onDrag);
document.documentElement.removeEventListener('mouseup', this.dragEnd);
};
// 鼠标按下
startDrag = (e: MouseEvent) => {
this.startY = e.clientY;
const scalableEl = this.scalableRef.nativeElement;
scalableEl && (this.startHeight = parseInt(window.getComputedStyle(scalableEl).height, 10));
document.documentElement.style.userSelect = 'none';
document.documentElement.addEventListener('mousemove', this.onDrag);
document.documentElement.addEventListener('mouseup', this.dragEnd);
};
}

12
src/workbench/browser/src/app/shared/shared.module.ts
View File

@ -28,6 +28,7 @@ import { ApiScriptComponent } from './components/api-script/api-script.component
import { EouiModule } from 'eo/workbench/browser/src/app/eoui/eoui.module';
import { NzTreeModule } from 'ng-zorro-antd/tree';
import { EnvListComponent } from 'eo/workbench/browser/src/app/shared/components/env-list/env-list.component';
import { SplitPanelComponent } from 'eo/workbench/browser/src/app/shared/components/split-panel/split.panel.component';
import { NzEmptyModule } from 'ng-zorro-antd/empty';
const COMPONENTS = [
@ -36,6 +37,7 @@ const COMPONENTS = [
SidebarComponent,
PageNotFoundComponent,
ApiScriptComponent,
SplitPanelComponent,
];
@NgModule({
imports: [
@ -63,6 +65,14 @@ const COMPONENTS = [
],
declarations: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe, PageBlankComponent, EnvListComponent],
providers: [ModalService],
exports: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe, NzPopoverModule, EoIconparkIconModule, EnvListComponent],
exports: [
WebviewDirective,
...COMPONENTS,
ApiParamsNumPipe,
NzPopoverModule,
EoIconparkIconModule,
EnvListComponent,
SplitPanelComponent,
],
})
export class SharedModule {}