gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix : APM settings、Web terminal setting页面调整

Browse Source
This commit is contained in:
likexuan
2022-11-17 10:19:03 +08:00
parent 4dc51c612d
commit 01a8ff67ea
4 changed files with 108 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
nezha-fronted/src/assets/css/components/page/config/system.scss
View File

@@ -3,7 +3,7 @@
position: relative; position: relative;
overflow: auto; overflow: auto;
margin: 0px; margin: 0px;
.el-form{ .el-form {
padding-left: 15px; padding-left: 15px;
} }
.el-tag.el-tag--info { .el-tag.el-tag--info {
@@ -36,34 +36,49 @@
.el-input.el-input--small { .el-input.el-input--small {
width: calc(100% - 49px); width: calc(100% - 49px);
} }
} }
} }
#system-basic{ #system-basic {
display: flex; display: flex;
align-items: center; align-items: center;
.el-form-item__content{ .el-form-item__content {
margin-left: 0px !important; margin-left: 0px !important;
} }
} }
} }
.system-config-form{ .system-config-form.basicForm {
.vue-tags-input {
max-width: unset !important;
}
.vue-tags-input .ti-input {
min-height: 32px;
padding: 0px 0px 0px 15px !important;
}
.vue-tags-input .ti-input .ti-new-tag-input-wrapper {
padding: 0;
margin: 0;
}
.vue-tags-input.interface-name .ti-input .ti-new-tag-input-wrapper {
padding-left: 7px;
}
}
.system-config-form {
width: 61.8% !important; width: 61.8% !important;
position: relative; position: relative;
} }
.linkBox{ .linkBox {
max-height: 800px; max-height: 800px;
width: 800px; width: 800px;
} }
.scrollBox{ .scrollBox {
position: relative; position: relative;
height: 600px; height: 600px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.linkTitle{ .linkTitle {
display: flex; display: flex;
align-items:center; align-items: center;
border-bottom: 2px solid $--border-color-base; border-bottom: 2px solid $--border-color-base;
color: #6b778c; color: #6b778c;
font-size: 12px; font-size: 12px;
@@ -71,40 +86,40 @@
line-height: 24px; line-height: 24px;
font-weight: 600; font-weight: 600;
} }
.handle{ .handle {
cursor: move !important; cursor: move !important;
padding:0 5px; padding: 0 5px;
line-height: 34px; line-height: 34px;
} }
.linkBtn{ .linkBtn {
height: 28px; height: 28px;
line-height: 0; line-height: 0;
font-size: 12px; font-size: 12px;
} }
.linkTitleHandle{ .linkTitleHandle {
padding: 0 13px; padding: 0 13px;
} }
.linkAddBox{ .linkAddBox {
display: flex; display: flex;
padding: 10px 0; padding: 10px 0;
border-bottom: 1px solid $--border-color-base; border-bottom: 1px solid $--border-color-base;
font-size: 13px; font-size: 13px;
line-height: 34px; line-height: 34px;
} }
.linkContent{ .linkContent {
display: flex; display: flex;
padding: 10px 0; padding: 10px 0;
font-size: 13px; font-size: 13px;
line-height: 34px; line-height: 34px;
} }
.linkContent:not(:last-child){ .linkContent:not(:last-child) {
border-bottom: 1px solid $--border-color-base; border-bottom: 1px solid $--border-color-base;
} }
.linkFormContent{ .linkFormContent {
display: flex; display: flex;
line-height: 34px; line-height: 34px;
} }
.linkTitleName{ .linkTitleName {
width: 100px; width: 100px;
margin-right: 12px; margin-right: 12px;
overflow: hidden; overflow: hidden;
@@ -112,12 +127,12 @@
white-space: nowrap; white-space: nowrap;
height: 31px; height: 31px;
} }
.linkTitleUrl{ .linkTitleUrl {
width: 462px; width: 462px;
margin-right: 12px; margin-right: 12px;
height: 31px; height: 31px;
} }
.linkTitleUrlContent{ .linkTitleUrlContent {
display: inline-block; display: inline-block;
width: 460px; width: 460px;
overflow: hidden; overflow: hidden;
@@ -127,39 +142,39 @@
cursor: pointer; cursor: pointer;
outline: none; outline: none;
} }
.linkFormBtn .nz-icon-delete{ .linkFormBtn .nz-icon-delete {
cursor: pointer; cursor: pointer;
color: $--color-primary; color: $--color-primary;
margin-left: 10px; margin-left: 10px;
} }
.linkFormBtn .nz-icon-edit{ .linkFormBtn .nz-icon-edit {
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
} }
.nz-icon-create-square{ .nz-icon-create-square {
cursor: pointer; cursor: pointer;
color: $--color-text-primary; color: $--color-text-primary;
} }
.el-form-item--small .el-form-item__error{ .el-form-item--small .el-form-item__error {
padding-top: 0; padding-top: 0;
} }
.linkUrlTip{ .linkUrlTip {
width: 430px; width: 430px;
} }
.system-config-form.terminal .el-input-number--small{ .system-config-form.terminal .el-input-number--small {
width: 512px; width: 512px;
} }
.system-config-form.basicForm .el-input-number--small{ .system-config-form.basicForm .el-input-number--small {
width: 512px; width: 512px;
} }
.system-config-form .el-input input{ .system-config-form .el-input input {
text-align: left; text-align: left;
} }
.utc-item { .utc-item {
color: $--color-text-secondary; color: $--color-text-secondary;
font-size: 12px; font-size: 12px;
} }
.system-title{ .system-title {
font-size: 14px; font-size: 14px;
color: $--color-text-regular; color: $--color-text-regular;
letter-spacing: 0; letter-spacing: 0;
@@ -168,7 +183,7 @@
font-weight: 500; font-weight: 500;
margin-bottom: 30px; margin-bottom: 30px;
} }
.system-title-border{ .system-title-border {
border-top: 1px dashed $--border-color-light; border-top: 1px dashed $--border-color-light;
padding-top: 30px; padding-top: 30px;
width: 699px; width: 699px;
@@ -178,19 +193,25 @@
background-color: $--background-color-empty; background-color: $--background-color-empty;
padding: 10px; padding: 10px;
.el-form-item:last-of-type.monitorLastEle { .el-form-item:last-of-type.monitorLastEle {
.el-form-item__content{ .el-form-item__content {
margin-left: 180px !important; margin-left: 180px !important;
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
.el-tabs__nav-scroll{ .el-form-item:last-of-type.monitorLastElement {
.el-form-item__content {
margin-left: 180px !important;
}
}
.el-tabs__nav-scroll {
background-color: $--background-color-empty; background-color: $--background-color-empty;
} }
.el-tabs__nav-scroll,.el-tabs__header,.el-tabs__nav-wrap{ .el-tabs__nav-scroll,
.el-tabs__header,
.el-tabs__nav-wrap {
border-bottom: 0; border-bottom: 0;
} }
.el-form-item:last-of-type { .el-form-item:last-of-type {
.el-form-item__content { .el-form-item__content {
margin-left: 0 !important; margin-left: 0 !important;
text-align: center; text-align: center;
@@ -200,13 +221,14 @@
} }
} }
.full-table { .full-table {
.el-tabs__content{ .el-tabs__content {
height: calc( 100% - 100px); height: calc(100% - 100px);
} }
.list-page .main-container{ .list-page .main-container {
padding: unset; padding: unset;
} }
.table-column-setting,.pagination-bottom{ .table-column-setting,
.pagination-bottom {
display: none; display: none;
} }
} }
@@ -218,17 +240,17 @@
outline: none; outline: none;
box-sizing: border-box; box-sizing: border-box;
} }
.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active { .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
color: $--color-primary; color: $--color-primary;
background: $--background-color-empty; background: $--background-color-empty;
border-bottom: none; border-bottom: none;
margin-left: .1px; margin-left: 0.1px;
} }
.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover { .el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
color: $--color-primary; color: $--color-primary;
opacity: .8; opacity: 0.8;
} }
.el-tabs--border-card>.el-tabs__header .el-tabs__item { .el-tabs--border-card > .el-tabs__header .el-tabs__item {
height: 40px; height: 40px;
background: $--background-color-base; background: $--background-color-base;
border: 1px solid $--border-color-light; border: 1px solid $--border-color-light;
@@ -236,7 +258,7 @@
border-top-right-radius: 4px; border-top-right-radius: 4px;
margin-top: 0; margin-top: 0;
} }
.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(:first-child) { .el-tabs--border-card > .el-tabs__header .el-tabs__item:not(:first-child) {
margin-left: 5px; margin-left: 5px;
} }
.el-input-group__prepend { .el-input-group__prepend {
@@ -249,7 +271,10 @@
border: 1px solid $--border-color-light; border: 1px solid $--border-color-light;
border-left: none; border-left: none;
} }
.el-input-number__decrease,.el-input-number__increase,.el-input-number__decrease.is-disabled,.el-input-number__increase.is-disabled { .el-input-number__decrease,
.el-input-number__increase,
.el-input-number__decrease.is-disabled,
.el-input-number__increase.is-disabled {
background-color: $--popover-background-color; background-color: $--popover-background-color;
} }
.el-input-number__decrease { .el-input-number__decrease {
@@ -273,21 +298,21 @@
border-color: $--color-primary; border-color: $--color-primary;
} }
} }
.system-config-form .el-form-item__content{ .system-config-form .el-form-item__content {
width: 512px; width: 512px;
} }
.system-config-form .el-input{ .system-config-form .el-input {
width: 512px; width: 512px;
text-align: left; text-align: left;
} }
.system-tabs { .system-tabs {
box-shadow: unset !important; box-shadow: unset !important;
border:unset; border: unset;
border-top: unset; border-top: unset;
height: 100%; height: 100%;
} }
.system-tabs.el-tabs--border-card{ .system-tabs.el-tabs--border-card {
box-shadow: unset !important; box-shadow: unset !important;
height: 100%; height: 100%;
width: 100%; width: 100%;
@@ -295,7 +320,7 @@
border-left: unset; border-left: unset;
background-color: $--background-color-empty; background-color: $--background-color-empty;
} }
.reset-form .el-checkbox-group{ .reset-form .el-checkbox-group {
margin-left: -28px !important; margin-left: -28px !important;
} }
.el-form-item__tip { .el-form-item__tip {
@@ -318,22 +343,32 @@
margin-bottom: 54px; margin-bottom: 54px;
} }
@keyframes warnBackground { @keyframes warnBackground {
0% {background-color: #FFFFFF;} 0% {
25% {background-color: #EF7458;} background-color: #ffffff;
50% {background-color: #FFFFFF;} }
75% {background-color: #EF7458;} 25% {
100% {background-color: #FFFFFF;} background-color: #ef7458;
}
50% {
background-color: #ffffff;
}
75% {
background-color: #ef7458;
}
100% {
background-color: #ffffff;
}
} }
.warn-pop { .warn-pop {
background-color: #FEF0F0; background-color: #fef0f0;
border-color: #FEF0F0; border-color: #fef0f0;
color:#F66C6C; color: #f66c6c;
} }
.warn-pop .popper__arrow:after{ .warn-pop .popper__arrow:after {
border-top-color: #FEF0F0 !important; border-top-color: #fef0f0 !important;
} }
.system .logo-upload-tip{ .system .logo-upload-tip {
color:#F66C6C; color: #f66c6c;
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
} }

10
nezha-fronted/src/components/common/mixin/system/systemMixin.js
View File

@@ -119,12 +119,18 @@ export default {
terminal_timeout: 30, terminal_timeout: 30,
terminal_telnet_user_tip: 'ogin:', terminal_telnet_user_tip: 'ogin:',
terminal_telnet_pin_tip: 'assword:', terminal_telnet_pin_tip: 'assword:',
terminal_record_local_retention: 365 terminal_record_local_retention: 365,
terminal_storage_type: '',
terminal_storage_s3_endpoint: '',
terminal_storage_s3_bucket: '',
terminal_storage_s3_access_key: '',
terminal_storage_s3_secret_access_key: ''
}, },
terminalCopy: null, terminalCopy: null,
terminalRules: { terminalRules: {
terminal_timeout: [{ validator: positiveInteger, trigger: 'blur' }], terminal_timeout: [{ validator: positiveInteger, trigger: 'blur' }],
terminal_record_local_retention: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: positiveInteger, trigger: 'blur' }] terminal_record_local_retention: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: positiveInteger, trigger: 'blur' }],
terminal_storage_type: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
}, },
ldap: { ldap: {
ldap_address: '', ldap_address: '',

18
nezha-fronted/src/components/page/config/monitor.vue
View File

@@ -64,7 +64,7 @@
<el-input v-model="monitor.metrics_storage_s3_access_key" id="monitor-metrics_storage_s3_access_key"> <el-input v-model="monitor.metrics_storage_s3_access_key" id="monitor-metrics_storage_s3_access_key">
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item :label="$t('config.terminallog.key')" prop="metrics_storage_s3_secret_access_key" :rules=" [ { required: monitor.metrics_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]" class="monitorLastEle"> <el-form-item :label="$t('config.terminallog.key')" prop="metrics_storage_s3_secret_access_key" :rules=" [ { required: monitor.metrics_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]" class="monitorLastElement">
<el-input v-model="monitor.metrics_storage_s3_secret_access_key" id="monitor-metrics_storage_s3_secret_access_key" type="password"> <el-input v-model="monitor.metrics_storage_s3_secret_access_key" id="monitor-metrics_storage_s3_secret_access_key" type="password">
</el-input> </el-input>
</el-form-item> </el-form-item>
@@ -100,7 +100,7 @@
<el-input v-model="monitor.logs_storage_s3_access_key" id="monitor-logs_storage_s3_access_key"> <el-input v-model="monitor.logs_storage_s3_access_key" id="monitor-logs_storage_s3_access_key">
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item :label="$t('config.terminallog.key')" prop="logs_storage_s3_secret_access_key" :rules=" [ { required: monitor.logs_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]" class="monitorLastEle"> <el-form-item :label="$t('config.terminallog.key')" prop="logs_storage_s3_secret_access_key" :rules=" [ { required: monitor.logs_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]" class="monitorLastElement">
<el-input v-model="monitor.logs_storage_s3_secret_access_key" id="monitor-logs_storage_s3_secret_access_key" type="password"> <el-input v-model="monitor.logs_storage_s3_secret_access_key" id="monitor-logs_storage_s3_secret_access_key" type="password">
</el-input> </el-input>
</el-form-item> </el-form-item>
@@ -186,18 +186,4 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
.vue-tags-input{
max-width: unset;
}
/deep/ .vue-tags-input .ti-input{
min-height: 32px;
padding: 0px 0px 0px 15px !important;
}
/deep/ .vue-tags-input .ti-input .ti-new-tag-input-wrapper{
padding: 0;
margin: 0;
}
/deep/ .vue-tags-input.interface-name .ti-input .ti-new-tag-input-wrapper{
padding-left: 7px;
}
</style> </style>

2
nezha-fronted/src/components/page/config/terminal.vue
View File

@@ -39,7 +39,7 @@
<el-input v-model="terminal.terminal_storage_s3_access_key" id="terminal-terminal_storage_s3_access_key"> <el-input v-model="terminal.terminal_storage_s3_access_key" id="terminal-terminal_storage_s3_access_key">
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item :label="$t('config.terminallog.key')" prop="terminal_storage_s3_secret_access_key" :rules=" [ { required: terminal.terminal_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]" class="monitorLastEle"> <el-form-item :label="$t('config.terminallog.key')" prop="terminal_storage_s3_secret_access_key" :rules=" [ { required: terminal.terminal_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]" class="monitorLastElement">
<el-input v-model="terminal.terminal_storage_s3_secret_access_key" id="terminal-terminal_storage_s3_secret_access_key" type="password"> <el-input v-model="terminal.terminal_storage_s3_secret_access_key" id="terminal-terminal_storage_s3_secret_access_key" type="password">
</el-input> </el-input>
</el-form-item> </el-form-item>