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

perf: 优化页面样式 从1开始

This commit is contained in:
guoyuqi 2021-11-16 14:49:34 +08:00 committed by xiaomeinvG
parent e8337b7ffa
commit 8a25512dee
10 changed files with 75 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/business/components/project/menu/EditProject.vue
View File

@ -15,7 +15,7 @@
</el-form-item>
<el-form-item :label-width="labelWidth" label="TCP Mock Port">
<el-input-number v-model="form.mockTcpPort" :controls="false" style="width: 30%;margin-right: 30px"></el-input-number>
<el-input-number v-model="form.mockTcpPort" :controls="false" style="width: 37%;margin-right: 30px"></el-input-number>
<el-switch v-model="form.isMockTcpOpen" @change="chengeMockTcpSwitch"></el-switch>
</el-form-item>
@ -281,6 +281,6 @@ pre {
}
.el-input,.el-textarea {
width: 95%;
width: 80%;
}
</style>

14
frontend/src/business/components/project/menu/EditUserGroup.vue
View File

@ -6,12 +6,12 @@
<el-row>
<el-col :span="11">
<el-form-item :label="$t('commons.name')" prop="name">
<el-input v-model="form.name"></el-input>
<el-input v-model="form.name" class="form-input"></el-input>
</el-form-item>
</el-col>
<el-col :span="11" :offset="2">
<el-col :span="11" >
<el-form-item :label="$t('group.type')" prop="type">
<el-select v-model="form.type" :placeholder="$t('group.select_type')" style="width: 100%"
<el-select v-model="form.type" :placeholder="$t('group.select_type')" class="form-input"
disabled>
<el-option :label="$t('group.system')" value="SYSTEM"></el-option>
<el-option :label="$t('group.workspace')" value="WORKSPACE"></el-option>
@ -21,7 +21,7 @@
</el-col>
</el-row>
<el-form-item :label="$t('group.description')" prop="description">
<el-input type="textarea" v-model="form.description"></el-input>
<el-input type="textarea" v-model="form.description" style="width: 83%"></el-input>
</el-form-item>
<el-form-item :label="$t('group.global_group')">
<el-switch v-model="form.global" :disabled="dialogType === 'edit'"
@ -29,7 +29,7 @@
</el-form-item>
<el-form-item :label="$t('project.owning_workspace')" v-if="show" prop="scopeId">
<el-select v-model="form.scopeId" :placeholder="$t('project.please_choose_workspace')" style="width: 100%;" disabled
<el-select v-model="form.scopeId" :placeholder="$t('project.please_choose_workspace')" style="width: 83%" disabled
clearable>
<el-option v-for="item in workspaces" :key="item.id" :label="item.name" :value="item.id"/>
</el-select>
@ -176,5 +176,7 @@ export default {
</script>
<style scoped>
.form-input{
width: 80%;
}
</style>

7
frontend/src/business/components/project/menu/Member.vue
View File

@ -37,7 +37,7 @@
</el-card>
<el-dialog :close-on-click-modal="false" :title="$t('member.modify')" :visible.sync="updateVisible" width="30%"
<el-dialog :close-on-click-modal="false" :title="$t('member.modify')" :visible.sync="updateVisible" width="40%"
:destroy-on-close="true"
@close="handleClose" v-loading="dialogResult.loading">
<el-form :model="form" label-position="right" label-width="100px" size="small" ref="updateUserForm">
@ -215,6 +215,9 @@ export default {
}
.select-width {
width: 100%;
width: 80%;
}
.el-input{
width: 80%;
}
</style>

2
frontend/src/business/components/settings/common/AddMember.vue
View File

@ -135,6 +135,6 @@ export default {
}
.select-width {
width: 100%;
width: 85%;
}
</style>

37
frontend/src/business/components/settings/system/EditUser.vue
View File

@ -3,27 +3,27 @@
:visible.sync="createVisible" width="40%"
@closed="handleClose" class="edit-user-dialog"
:destroy-on-close="true">
<div v-loading="result.loading">
<el-form :model="form" label-position="right" label-width="120px" size="small" :rules="rule" ref="createUserForm">
<div v-loading="result.loading" >
<el-form :model="form" label-width="120px" size="small" :rules="rule" ref="createUserForm">
<el-form-item label="ID" prop="id">
<el-input v-model="form.id" autocomplete="off" :placeholder="$t('user.input_id_placeholder')"
:disabled="type === 'Edit'"/>
:disabled="type === 'Edit'" class="form-input" />
</el-form-item>
<el-form-item :label="$t('commons.username')" prop="name">
<el-input v-model="form.name" autocomplete="off" :placeholder="$t('user.input_name')"/>
<el-input v-model="form.name" autocomplete="off" :placeholder="$t('user.input_name')" class="form-input"/>
</el-form-item>
<el-form-item :label="$t('commons.email')" prop="email">
<el-input v-model="form.email" autocomplete="off" :placeholder="$t('user.input_email')"/>
<el-input v-model="form.email" autocomplete="off" :placeholder="$t('user.input_email')" class="form-input"/>
</el-form-item>
<el-form-item :label="$t('commons.phone')" prop="phone">
<el-input v-model="form.phone" autocomplete="off" :placeholder="$t('user.input_phone')"/>
<el-input v-model="form.phone" autocomplete="off" :placeholder="$t('user.input_phone')" class="form-input"/>
</el-form-item>
<el-form-item :label="$t('commons.password')" prop="password" v-if="type === 'Add'">
<el-input v-model="form.password" autocomplete="new-password" show-password
:placeholder="$t('user.input_password')"/>
:placeholder="$t('user.input_password')" class="form-input"/>
</el-form-item>
<div v-for="(group, index) in form.groups" :key="index">
<el-form-item :label="'用户组'+index"
<el-form-item :label="getLabel(index)"
:prop="'groups.' + index + '.type'"
:rules="{required: true, message: '请选择用户组', trigger: 'change'}"
>
@ -47,7 +47,7 @@
:rules="{required: true, message: $t('workspace.select'), trigger: 'change'}"
>
<el-select filterable v-model="group.ids" :placeholder="$t('workspace.select')" multiple
class="edit-user-select">
class="edit-user-select" >
<el-option
v-for="item in group.workspaces"
:key="item.id"
@ -63,7 +63,7 @@
:rules="{required: true, message: '请选择项目', trigger: 'change'}"
>
<el-select filterable v-model="group.ids" placeholder="请选择项目" multiple
class="edit-user-select">
class="edit-user-select" >
<el-option
v-for="item in group.projects"
:key="item.id"
@ -77,7 +77,7 @@
<el-form-item>
<template>
<el-button type="success" style="width: 100%;" @click="addGroup('createUserForm')" :disabled="btnAddRole">
<el-button type="success" class="form-input" @click="addGroup('createUserForm')" :disabled="btnAddRole">
{{ $t('group.add') }}
</el-button>
</template>
@ -291,22 +291,29 @@ export default {
break;
default:
}
},
getLabel(index){
let a = index+1;
return "用户组"+a;
}
}
}
</script>
<style scoped>
.edit-user-dialog >>> .el-dialog__body {
/*.edit-user-dialog >>> .el-dialog__body {
padding-bottom: 0;
padding-left: 0;
}
}*/
.edit-user-dialog >>> .el-dialog__footer {
/*.edit-user-dialog >>> .el-dialog__footer {
padding-top: 0;
}*/
.form-input{
width: 80%;
}
.edit-user-select {
width: 80%;
}
</style>

20
frontend/src/business/components/settings/system/SystemWorkspace.vue
View File

@ -40,10 +40,10 @@
width="30%" @close="close">
<el-form :model="form" :rules="rules" ref="form" label-position="right" label-width="100px" size="small">
<el-form-item :label="$t('commons.name')" prop="name">
<el-input v-model="form.name" autocomplete="off"/>
<el-input v-model="form.name" autocomplete="off" class="form-input"/>
</el-form-item>
<el-form-item :label="$t('commons.description')" prop="description">
<el-input type="textarea" v-model="form.description"></el-input>
<el-input type="textarea" v-model="form.description" class="form-input"></el-input>
</el-form-item>
</el-form>
<template v-slot:footer>
@ -58,10 +58,10 @@
width="30%" @close="close">
<el-form :model="form" :rules="rules" ref="updateForm" label-position="right" label-width="100px" size="small">
<el-form-item :label="$t('commons.name')" prop="name">
<el-input v-model="form.name" autocomplete="off"/>
<el-input v-model="form.name" autocomplete="off" class="form-input"/>
</el-form-item>
<el-form-item :label="$t('commons.description')" prop="description">
<el-input type="textarea" v-model="form.description"></el-input>
<el-input type="textarea" v-model="form.description" class="form-input"></el-input>
</el-form-item>
</el-form>
<template v-slot:footer>
@ -114,16 +114,16 @@
@close="handleClose">
<el-form :model="memberForm" label-position="right" label-width="100px" size="small" ref="updateUserForm">
<el-form-item label="ID" prop="id">
<el-input v-model="memberForm.id" autocomplete="off" :disabled="true"/>
<el-input v-model="memberForm.id" autocomplete="off" :disabled="true" class="form-input"/>
</el-form-item>
<el-form-item :label="$t('commons.username')" prop="name">
<el-input v-model="memberForm.name" autocomplete="off" :disabled="true"/>
<el-input v-model="memberForm.name" autocomplete="off" :disabled="true" class="form-input"/>
</el-form-item>
<el-form-item :label="$t('commons.email')" prop="email">
<el-input v-model="memberForm.email" autocomplete="off" :disabled="true"/>
<el-input v-model="memberForm.email" autocomplete="off" :disabled="true" class="form-input"/>
</el-form-item>
<el-form-item :label="$t('commons.phone')" prop="phone">
<el-input v-model="memberForm.phone" autocomplete="off" :disabled="true"/>
<el-input v-model="memberForm.phone" autocomplete="off" :disabled="true" class="form-input"/>
</el-form-item>
<el-form-item :label="$t('commons.group')" prop="groupIds"
:rules="{required: true, message: $t('group.please_select_group'), trigger: 'change'}">
@ -480,7 +480,9 @@ export default {
.select-width {
width: 100%;
}
.form-input{
width: 80%;
}
/*.dialog-css >>> .el-dialog__header {*/
/* padding: 0;*/
/*}*/

14
frontend/src/business/components/settings/system/group/EditUserGroup.vue
View File

@ -6,12 +6,12 @@
<el-row>
<el-col :span="11">
<el-form-item :label="$t('commons.name')" prop="name">
<el-input v-model="form.name"></el-input>
<el-input v-model="form.name" class="form-input"></el-input>
</el-form-item>
</el-col>
<el-col :span="11" :offset="2">
<el-col :span="11" >
<el-form-item :label="$t('group.type')" prop="type">
<el-select v-model="form.type" :placeholder="$t('group.select_type')" style="width: 100%" @change="changeGroup" :disabled="dialogType === 'edit'">
<el-select v-model="form.type" :placeholder="$t('group.select_type')" @change="changeGroup" :disabled="dialogType === 'edit'" class="form-input">
<el-option :label="$t('group.system')" value="SYSTEM"></el-option>
<el-option :label="$t('group.workspace')" value="WORKSPACE"></el-option>
<el-option :label="$t('group.project')" value="PROJECT"></el-option>
@ -20,14 +20,14 @@
</el-col>
</el-row>
<el-form-item :label="$t('group.description')" prop="description">
<el-input type="textarea" v-model="form.description"></el-input>
<el-input type="textarea" v-model="form.description" style="width: 83%"></el-input>
</el-form-item>
<el-form-item :label="$t('group.global_group')">
<el-switch v-model="form.global" :disabled="dialogType === 'edit' || form.type === 'SYSTEM'" @change="change(form.global)"></el-switch>
</el-form-item>
<el-form-item :label="$t('project.owning_workspace')" v-if="show" prop="scopeId">
<el-select v-model="form.scopeId" :placeholder="$t('project.please_choose_workspace')" style="width: 100%;" :disabled="dialogType === 'edit'" clearable>
<el-select v-model="form.scopeId" :placeholder="$t('project.please_choose_workspace')" :disabled="dialogType === 'edit'" clearable style="width: 83%">
<el-option v-for="item in workspaces" :key="item.id" :label="item.name" :value="item.id"/>
</el-select>
</el-form-item>
@ -170,5 +170,7 @@ export default {
</script>
<style scoped>
.form-input{
width: 80%;
}
</style>

4
frontend/src/business/components/settings/system/group/GroupMember.vue
View File

@ -64,7 +64,7 @@
multiple
filterable
:popper-append-to-body="false"
style="width: 100%"
style="width: 90%"
:disabled="userSelectDisable"
:placeholder="$t('member.please_choose_member')">
<el-option
@ -80,7 +80,7 @@
</el-select>
</el-form-item>
<el-form-item :label="typeLabel" v-if="showTypeLabel" prop="sourceIds">
<el-select v-model="form.sourceIds" :placeholder="typeLabel" style="width: 100%;" clearable multiple
<el-select v-model="form.sourceIds" :placeholder="typeLabel" style="width: 90%;" clearable multiple
filterable>
<el-option v-for="item in sourceData" :key="item.id" :label="item.name" :value="item.id"/>
</el-select>

21
frontend/src/business/components/settings/workspace/MsProject.vue
View File

@ -110,18 +110,18 @@
<el-form-item :label-width="labelWidth" label="TCP Mock Port">
<el-input-number v-model="form.mockTcpPort" :controls="false"
style="width: 30%;margin-right: 30px"></el-input-number>
style="width: 37%;margin-right: 30px"></el-input-number>
<el-switch v-model="form.isMockTcpOpen" @change="chengeMockTcpSwitch"></el-switch>
</el-form-item>
<el-form-item :label-width="labelWidth" :label="$t('commons.description')" prop="description">
<el-input :autosize="{ minRows: 2, maxRows: 4}" type="textarea" v-model="form.description"></el-input>
<el-input :autosize="{ minRows: 2, maxRows: 4}" type="textarea" v-model="form.description" ></el-input>
</el-form-item>
<el-form-item :label-width="labelWidth" :label="$t('project.tapd_id')" v-if="tapd">
<el-input v-model="form.tapdId" autocomplete="off"></el-input>
<el-input v-model="form.tapdId" autocomplete="off" ></el-input>
</el-form-item>
<el-form-item :label-width="labelWidth" :label="$t('project.jira_key')" v-if="jira">
<el-input v-model="form.jiraKey" autocomplete="off"/>
<el-input v-model="form.jiraKey" autocomplete="off" />
<ms-instructions-icon effect="light">
<template>
<img class="jira-image" src="../../../../assets/jira-key.png"/>
@ -129,7 +129,7 @@
</ms-instructions-icon>
</el-form-item>
<el-form-item :label-width="labelWidth" :label="$t('project.zentao_id')" v-if="zentao">
<el-input v-model="form.zentaoId" autocomplete="off"></el-input>
<el-input v-model="form.zentaoId" autocomplete="off" ></el-input>
<ms-instructions-icon effect="light">
<template>
禅道流程：产品-项目 | 产品-迭代 | 产品-冲刺 | 项目-迭代 | 项目-冲刺 <br/><br/>
@ -140,7 +140,7 @@
</ms-instructions-icon>
</el-form-item>
<el-form-item :label-width="labelWidth" :label="$t('project.azureDevops_id')" v-if="azuredevops">
<el-input v-model="form.azureDevopsId" autocomplete="off"></el-input>
<el-input v-model="form.azureDevopsId" autocomplete="off" ></el-input>
</el-form-item>
<el-form-item :label-width="labelWidth" :label="'AzureDevops过滤ID'" v-if="azuredevops">
<el-input v-model="form.azureFilterId" autocomplete="off"/>
@ -207,16 +207,16 @@
@close="handleClose">
<el-form :model="form" label-position="right" label-width="100px" size="small" ref="updateUserForm">
<el-form-item label="ID" prop="id">
<el-input v-model="form.id" autocomplete="off" :disabled="true"/>
<el-input v-model="form.id" autocomplete="off" :disabled="true" />
</el-form-item>
<el-form-item :label="$t('commons.username')" prop="name">
<el-input v-model="form.name" autocomplete="off" :disabled="true"/>
<el-input v-model="form.name" autocomplete="off" :disabled="true" />
</el-form-item>
<el-form-item :label="$t('commons.email')" prop="email">
<el-input v-model="form.email" autocomplete="off" :disabled="true"/>
</el-form-item>
<el-form-item :label="$t('commons.phone')" prop="phone">
<el-input v-model="form.phone" autocomplete="off" :disabled="true"/>
<el-input v-model="form.phone" autocomplete="off" :disabled="true" />
</el-form-item>
<el-form-item :label="$t('commons.group')" prop="groupIds"
:rules="{required: true, message: $t('group.please_select_group'), trigger: 'change'}">
@ -720,6 +720,7 @@ pre {
}
.el-input, .el-textarea {
width: 95%;
width: 80%;
}
</style>

7
frontend/src/business/components/settings/workspace/WorkspaceMember.vue
View File

@ -50,7 +50,7 @@
<add-member :group-type="'WORKSPACE'" :group-scope-id="workspaceId" ref="addMember" @submit="submitForm"/>
<el-dialog :close-on-click-modal="false" :title="$t('member.modify')" :visible.sync="updateVisible" width="30%"
<el-dialog :close-on-click-modal="false" :title="$t('member.modify')" :visible.sync="updateVisible" width="40%"
:destroy-on-close="true"
@close="handleClose">
<el-form :model="form" label-position="right" label-width="100px" size="small" ref="updateUserForm">
@ -364,7 +364,7 @@ export default {
}
.select-width {
width: 100%;
width: 80%;
}
.workspace-member-name {
@ -384,4 +384,7 @@ export default {
/deep/ .ms-select-all-fixed th:nth-child(2) .el-icon-arrow-down {
top: -5px;
}
.el-input{
width: 80%;
}
</style>