test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: 样式优化

This commit is contained in:
chenjianxing 2020-12-11 12:46:55 +08:00
parent 54f5e8aad5
commit a45753b1eb
5 changed files with 83 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/business/components/api/definition/components/ApiList.vue
View File

@ -32,7 +32,7 @@
:label="$t('api_test.definition.api_type')"
show-overflow-tooltip>
<template v-slot:default="scope" class="request-method">
<el-tag size="mini" :style="{'background-color': getColor(true, scope.row.method)}" class="api-el-tag">
<el-tag size="mini" :style="{'background-color': getColor(true, scope.row.method), border: getColor(true, scope.row.method)}" class="api-el-tag">
{{ scope.row.method}}
</el-tag>
</template>
@ -78,7 +78,8 @@
<div v-else>
<el-button type="text" @click="reductionApi(scope.row)" v-if="currentModule!=undefined && currentModule.id === 'gc'">恢复</el-button>
<el-button type="text" @click="editApi(scope.row)" v-else>编辑</el-button>
<el-button type="text" @click="handleTestCase(scope.row)">用例</el-button>
<el-button v-if="scope.row.caseTotal > 0" type="text" @click="handleTestCase(scope.row)">用例</el-button>
<el-button v-else type="text" @click="handleTestCase(scope.row)">+用例</el-button>
<el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C">删除</el-button>
</div>
</template>
@ -315,7 +316,7 @@
return this.methodColorMap.get(method);
}
},
}
},
}
</script>

7
frontend/src/business/components/api/definition/components/body/ApiBody.vue
View File

@ -41,7 +41,7 @@
</div>
<div class="ms-body" v-if="body.type == 'XML'">
<ms-code-edit :read-only="isReadOnly" :data.sync="body.raw" :modes="modes" ref="codeEdit"/>
<ms-code-edit :read-only="isReadOnly" :data.sync="body.raw" :modes="modes" :mode="'xml'" ref="codeEdit"/>
</div>
@ -180,4 +180,9 @@
border-radius: 5px;
}
.el-radio-group {
margin: 10px 10px;
margin-top: 15px;
}
</style>

5
frontend/src/business/components/api/definition/components/case/ApiCaseHeader.vue
View File

@ -201,8 +201,9 @@
min-width: 100px;
}
.el-row {
/*vertical-align: center;*/
.el-col {
height: 32px;
line-height: 32px;
}

115
frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue
View File

@ -11,53 +11,69 @@
</div>
<br/>
<p class="tip">{{$t('test_track.plan_view.base_info')}} </p>
<!-- 基础信息 -->
<el-form-item :label="$t('commons.name')" prop="name">
<el-input class="ms-http-input" size="small" v-model="httpForm.name"/>
</el-form-item>
<el-form-item :label="$t('test_track.module.module')" prop="moduleId">
<el-select class="ms-http-input" size="small" v-model="httpForm.moduleId">
<el-option v-for="item in moduleOptions" :key="item.id" :label="item.path" :value="item.id"/>
</el-select>
</el-form-item>
<div class="base-info">
<el-row>
<el-col :span="8">
<el-form-item :label="$t('commons.name')" prop="name">
<el-input class="ms-http-input" size="small" v-model="httpForm.name"/>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item :label="$t('api_report.request')" prop="path">
<el-input :placeholder="$t('api_test.definition.request.path_info')" v-model="httpForm.path"
class="ms-http-input" size="small" style="margin-top: 5px">
<el-select v-model="httpForm.method" slot="prepend" style="width: 100px" size="small">
<el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
</el-select>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item :label="$t('api_report.request')" prop="path">
<el-input :placeholder="$t('api_test.definition.request.path_info')" v-model="httpForm.path"
class="ms-http-input" size="small" style="margin-top: 5px">
<el-select v-model="httpForm.method" slot="prepend" style="width: 100px" size="small">
<el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
</el-select>
</el-input>
<el-row>
<el-col :span="8">
<el-form-item :label="$t('test_track.module.module')" prop="moduleId">
<el-select class="ms-http-select" size="small" v-model="httpForm.moduleId">
<el-option v-for="item in moduleOptions" :key="item.id" :label="item.path" :value="item.id"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('api_test.definition.request.responsible')" prop="userId">
<el-select v-model="httpForm.userId"
:placeholder="$t('api_test.definition.request.responsible')" filterable size="small"
class="ms-http-select">
<el-option
v-for="item in maintainerOptions"
:key="item.id"
:label="item.id + ' (' + item.name + ')'"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('commons.status')" prop="status">
<el-select class="ms-http-select" size="small" v-model="httpForm.status">
<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
<el-row>
<el-form-item :label="$t('commons.description')" prop="description">
<el-input class="ms-http-textarea"
v-model="httpForm.description"
type="textarea"
:autosize="{ minRows: 2, maxRows: 10}"
:rows="2" size="small"/>
</el-form-item>
</el-row>
</div>
<el-form-item :label="$t('commons.status')" prop="status">
<el-select class="ms-http-input" size="small" v-model="httpForm.status">
<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"/>
</el-select>
</el-form-item>
<el-form-item :label="$t('api_test.definition.request.responsible')" prop="userId">
<el-select v-model="httpForm.userId"
:placeholder="$t('api_test.definition.request.responsible')" filterable size="small"
class="ms-http-input">
<el-option
v-for="item in maintainerOptions"
:key="item.id"
:label="item.id + ' (' + item.name + ')'"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('commons.description')" prop="description">
<el-input class="ms-http-textarea"
v-model="httpForm.description"
type="textarea"
:autosize="{ minRows: 2, maxRows: 10}"
:rows="2" size="small"/>
</el-form-item>
<!-- 请求参数 -->
<div>
<p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
@ -157,8 +173,17 @@
</script>
<style scoped>
.ms-http-input {
width: 400px;
.base-info .el-form-item {
width: 100%;
}
.base-info .el-form-item >>> .el-form-item__content {
width: 80%;
}
.base-info .ms-http-select {
width: 100%;
}
.tip {

16
frontend/src/business/components/api/definition/components/response/ResponseText.vue
View File

@ -15,13 +15,6 @@
<ms-api-key-value :isShowEnable="false" :suggestions="headerSuggestions"
:items="response.statusCode"/>
</el-tab-pane>
<el-tab-pane v-if="activeName == 'body'" :disabled="true" name="mode" class="pane cookie">
<template v-slot:label>
<ms-dropdown :commands="modes" :default-command="mode" @command="modeChange"/>
</template>
</el-tab-pane>
</el-tabs>
</el-collapse-transition>
</el-form>
@ -32,7 +25,6 @@
import MsAssertionResults from "./AssertionResults";
import MsCodeEdit from "../../../../common/components/MsCodeEdit";
import MsDropdown from "../../../../common/components/MsDropdown";
import {BODY_FORMAT} from "../../model/ApiTestModel";
import MsApiKeyValue from "../ApiKeyValue";
import {REQUEST_HEADERS} from "@/common/js/constants";
import MsApiBody from "../body/ApiBody";
@ -55,8 +47,6 @@
return {
isActive: true,
activeName: "headers",
modes: ['text', 'json', 'xml', 'html'],
mode: BODY_FORMAT.TEXT,
headerSuggestions: REQUEST_HEADERS
}
@ -66,18 +56,12 @@
active() {
this.isActive = !this.isActive;
},
modeChange(mode) {
this.mode = mode;
}
},
mounted() {
if (!this.response.headers) {
return;
}
if (this.response.headers.indexOf("Content-Type: application/json") > 0) {
this.mode = BODY_FORMAT.JSON;
}
}
}
</script>