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

perf: 周五李娜文档除mibbrowser外的调整内容

Browse Source
This commit is contained in:
chenjinsong
2021-03-05 20:34:58 +08:00
parent ef3c2d8959
commit 949f61d402
16 changed files with 223 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
nezha-fronted/src/assets/stylus/index.scss
View File

@@ -49,3 +49,4 @@ $suspended-color: #9e9c98; //全局停用色灰色
$left-menu-bgcolor:#FFF;
@import './main.scss';
/*@import './table.scss';*/

74
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -851,13 +851,6 @@ li{
.nz-table + .to-top-is-hover{
display: none;
}
revogr-header .data-header-cell .resizable:hover {
background-color: #ccc !important;
width: 6px;
}
revo-grid[theme=compact] revogr-viewport revogr-header .data-header-cell {
border-right: 1px solid #eee;
}
.nz-table + .to-top-is-hover:hover{
display: block;
@@ -936,33 +929,7 @@ revo-grid[theme=compact] revogr-viewport revogr-header .data-header-cell {
padding:2px 5px;
border-radius: 4px;
}
.data-cell {
font-size: 12px;
}
.data-cell .danger {
background-color: $danger-color;
color: white;
padding:2px 5px;
border-radius: 4px;
}
.data-cell .success {
background-color: $success-color;
color: white;
padding:2px 5px;
border-radius: 4px;
}
.data-cell .suspended {
background-color: $suspended-color;
color: white;
padding:2px 5px;
border-radius: 4px;
}
.data-cell .warning {
background-color: $warning-color;
color: white;
padding:2px 5px;
border-radius: 4px;
}
.nz-table th {
padding: 0;
}
@@ -1912,6 +1879,44 @@ revo-grid[theme=compact] revogr-viewport revogr-header .data-header-cell {
background-color: rgba(255, 99, 71, .85);
}
.el-message-box__wrapper {
.el-message-box__status.el-icon-warning {
color: #ef775e !important;
}
.el-message-box__headerbtn:focus .el-message-box__close, .el-message-box__headerbtn:hover .el-message-box__close {
color: $global-text-color-active;
}
.el-message-box__container {
display: flex;
min-height: 60px;
align-items: center;
}
.el-message-box__btns {
.el-button:not(.el-button--primary):focus{
color: #606266;
}
.el-button:not(.el-button--primary):hover {
color: #606266;
opacity: .8;
border-color: #DCDFE6;
background-color: white;
}
.el-button--primary {
box-shadow: none;
background-color: $global-text-color-active;
}
.el-button--primary:focus{
background-color: $global-text-color-active;
}
.el-button--primary:hover {
background-color: $global-text-color-active;
opacity: .8;
}
}
}
/*滚动条相关, 11px/8px/5px, 默认8px*/
.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
@@ -2423,3 +2428,4 @@ revo-grid[theme=compact] revogr-viewport revogr-header .data-header-cell {
/deep/ .el-input-number .el-input__inner{
text-align: left;
}

10
nezha-fronted/src/components/charts/chart.scss
View File

@@ -278,7 +278,7 @@
position: relative;
background-color: white;
.chartTitle:hover {
background-color:#d8dce1;
background-color:#efefef;
}
//.chartTitle:not(.drag-disabled) {
// cursor: move;
@@ -299,7 +299,7 @@
font-size: 12px;
}
.chart-title-text {
font-size: 16px;
font-size: 14px;
line-height: 26px;
color: #52545c;
display:flex;
@@ -494,12 +494,12 @@
position: relative;
background-color: white;
.chartTitle:hover {
background-color:#d8dce1;
background-color:#efefef;
}
.chartTitle {
text-align: center;
width: 100%;
line-height: 30px;
line-height: 20px;
height: 28px;
padding: 1px 3px 0 3px;
box-sizing: border-box;
@@ -513,7 +513,7 @@
font-size: 12px;
}
.chart-title {
font-size: 16px;
font-size: 14px;
line-height: 26px;
color: #52545c;
display:flex;

3
nezha-fronted/src/components/common/chartUnit.vue
View File

@@ -54,6 +54,9 @@
width: 100px;
margin: 0 20px 0 0;
}
.chart-unit .el-input__suffix-inner {
color: #aaa;
}
.unit-pop-class .el-cascader-panel{
height: 200px;
background-color: #FFF;

2
nezha-fronted/src/components/common/deleteButton.vue
View File

@@ -9,7 +9,7 @@
name: "deleteButton",
props:{
filterFunction:Function,
deleteObjs:Array,
deleteObjs: Object,
api:String,
clickFunction:Function,
id:String

4
nezha-fronted/src/components/common/pickTime.vue
View File

@@ -2,7 +2,7 @@
<div class="interval-refresh ">
<time-picker v-if="showTimePicker" ref="timePicker" class="time-picker" @change="dateChange" :default-pick="defaultPick" :show-empty="showEmpty" v-model="this.searchTime"></time-picker>
<chart-unit v-model="unit" v-if="useChartUnit"></chart-unit>
<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20" v-show="useRefresh" style="vertical-align: middle;">
<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20" style="height: 24px;line-height: 24px;vertical-align: middle;" v-show="useRefresh">
<button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="refreshDataFunc" :id="id+'-refresh'">
<i style="font-size: 14px" class="global-active-color nz-icon nz-icon-refresh"></i>&nbsp;
<span class="nz-btn nz-btn-text" ><slot name="added-text"></slot></span>
@@ -14,7 +14,7 @@
</li>
</ul>
<button type="button" style="border-radius: 0 4px 4px 0;padding:0px;" class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
<span class="nz-btn nz-btn-text">{{interval.value != -1 ? interval.label : ''}}</span><i style="font-size: 14px" class="nz-icon nz-icon-arrow-down"></i>
<span class="nz-btn nz-btn-text" style="padding-left: 10px;" v-if="interval.value && interval.value != -1">{{interval.label}}</span><i class="nz-icon nz-icon-arrow-down" style="font-size: 14px"></i>
</button>
</el-popover>
</div>

2
nezha-fronted/src/components/common/project/chart.scss
View File

@@ -274,7 +274,7 @@
font-size: 12px;
}
.chart-title-text {
font-size: 16px;
font-size: 14px;
line-height: 26px;
color: #52545c;
display:flex;

4
nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
View File

@@ -5,12 +5,12 @@
<div class="right-box-title">{{$t('config.dc.traffic.title')}}</div>
<!-- end--标题-->
<div class="right-box-form-box">
<el-form class="right-box-form" :model="traffic" label-width="100px" label-position="left" ref="trafficForm">
<el-form :model="traffic" class="right-box-form" label-position="top" label-width="100px" ref="trafficForm">
<el-form-item :label="$t('config.dc.dc')" size="small">
<el-input :disabled="true" v-model="dc.name" id="traffic-setting-name"></el-input>
</el-form-item>
<traffic-setting-tab ref="trafficSetting" :post-asset-list="assetList" v-for="(item,index) in traffic.setting" :index="index" :asset-setting="item" :key="uuids[index]" :id="uuids[index]" @delSelf="delAssetSetting" :validate-repeat-func="valiateRepeatFunc"></traffic-setting-tab>
<button type="button" @click="addAssetSetting" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" style="margin:5px 1px 5px 70px" id="traffic-setting-add">{{$t('config.dc.traffic.add')}}</button>
<button @click="addAssetSetting" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" id="traffic-setting-add" style="margin:15px 1px 15px 15px" type="button">{{$t('config.dc.traffic.add')}}</button>
</el-form>
</div>

154
nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
View File

@@ -1,24 +1,24 @@
<template>
<div class="asset-config-tab">
<el-form-item :label="$t('asset.asset')" size="small" class="right-box-form-content" ref="assetConfigForm" label-width="90px">
<!--<el-select class="right-box-row-with-btn" clearable @clear="clearAssetInput" v-model="assetSetting.assetId" @change="assetChanged" popper-class="no-style-class" :class="{'input-error':assetValidate}">
<el-option v-for="(item,index) in assetList" :label="item.host" :disabled="item.isOccupy" :value="item.id" :key="item.host+'-'+item.id"></el-option>
</el-select>-->
<div class="asset-item">
<span class="asset-item--label">{{$t("asset.asset")}}</span>
<div class="asset-item--input">
<el-autocomplete
id="traffic-setting-asset"
clearable
:class="{'input-error':hostInvalid || hostRepeat}"
class="asset-input right-box-row-with-btn"
v-model="assetSetting.host"
popper-class="no-style-class"
:fetch-suggestions="queryAssetHosts"
:debounce="1000"
:trigger-on-focus="false"
:fetch-suggestions="queryAssetHosts"
:highlight-first-item="true"
@input="hostInputChange"
:trigger-on-focus="false"
@blur="validateHostEmpty"
></el-autocomplete><el-popover
@hide="popHide" @show="popShow" placement="bottom" popper-class="no-style-class" trigger="click">
@input="hostInputChange"
class="asset-input right-box-row-with-btn"
clearable
id="traffic-setting-asset"
popper-class="no-style-class"
size="small"
v-model="assetSetting.host"
></el-autocomplete>
<el-popover @hide="popHide" @show="popShow" placement="bottom" popper-class="no-style-class" trigger="click">
<div class="mib-browser-ad-search">
<el-row class="mib-browser-ad-search-item" style="font-weight: bold">{{$t('config.dc.traffic.snmpSetting')}}</el-row>
<el-row class="mib-browser-ad-search-item">
@@ -113,20 +113,14 @@
<i class="el-icon-more"></i>
</button>
</el-popover>
<span @click="delSelf" class="right-box-form-minus-box" id="traffic-setting-delself"
style="vertical-align: middle;right: 0;
position: absolute;
line-height: 21px;
height: 21px;
top: 50%;
transform: translateY(-50%);"
><i class="nz-icon nz-icon-minus"></i></span>
</div>
<span @click="delSelf" class="asset-item--btn right-box-form-minus-box" id="traffic-setting-delself"><i class="nz-icon nz-icon-minus"></i></span>
</div>
<div>
<span style="color:#F56C6C;font-size: 12px;" v-if="hostRepeat">{{$t('validate.repeat')}}</span>
<span style="color:#F56C6C;font-size: 12px;" v-if="hostInvalid">{{$t('validate.host')}}</span>
<span style="color:#F56C6C;font-size: 12px;" v-if="hostEmpty">{{$t('validate.required')}}</span>
</div>
</el-form-item>
<div class="endpoints-box-endpoints" style="border: 1px solid #E7EAED;border-radius: 2px;padding-bottom: 10px">
<el-table :data="assetSetting.configs"
tooltip-effect="light"
@@ -145,31 +139,16 @@
show-overflow-tooltip
v-for="(item, index) in tableLabels"
:width="item.width"
align="center"
:key="`col-${index}`"
style="max-height: 200px"
>
<template slot="header">
<span v-if="item.required == true"><span style="color: red;">*</span>{{item.label}}</span>
<span v-if="item.required == true"><span style="color: red;">*</span><span style="padding-left: 6px;">{{item.label}}</span></span>
<span v-else>{{item.label}}</span>
</template>
<template slot-scope="scope" :column="item">
<template v-if="item.prop == 'tags'">
<div class="tab-tags" @click="showEditTagsBox(true,scope.$index,scope.row,$event)" id="traffic-setting-show-tags">
<!--<el-scrollbar style="height: 100%;">
<el-tag
v-for="(value, key, index) in scope.row[item.prop]"
class="tab-tags"
size="mini"
:key="key"
style="display: block;margin-bottom:5px;" >
&lt;!&ndash; <div class="tab-tags-item">&ndash;&gt;
&lt;!&ndash; <div class="tag-item-key">{{key}}：</div><div class="tag-item-value">{{value}}</div>&ndash;&gt;
&lt;!&ndash; </div>&ndash;&gt;
{{key}}：{{value}}
</el-tag>
</el-scrollbar>-->
<el-tooltip placement="top" effect="light" popper-class="tags-pop transparent-pop">
<div slot="content">
<template v-if="scope.row[item.prop]">
@@ -190,9 +169,6 @@
<template v-if="item.prop == 'ifindex'">
<span v-if="scope.row.edit==false">{{scope.row[item.prop]}}</span>
<template v-else>
<!-- <el-select v-model="scope.row[item.prop]" :disabled="assetSetting.host == null" size="mini" popper-class="no-style-class" @change="ifIndexChange(scope.row[item.prop],scope.row)" :class="{'input-error':isError(item.errRows,scope.$index),'transparent-pop':assetSetting.host == null}">-->
<!-- <el-option v-for="(item,index) in ifIndexList" :label="item.label" :value="item.value" :key="item.value" :disabled="item.isOccupy"></el-option>-->
<!-- </el-select>-->
<el-autocomplete
v-model="scope.row[item.prop]"
:class="{'input-error':isError(item.errRows,scope.$index)||ifIndexError,'transparent-pop':assetSetting.host == ''}"
@@ -207,10 +183,6 @@
</template>
</template>
<template v-if="item.prop == 'ifdescr'">
<!--<span v-if="scope.row.edit==false">{{scope.row[item.prop]}}</span>
<template v-else>
<el-input v-model="scope.row[item.prop]" size="small" clearable></el-input>
</template>-->
<span>{{scope.row[item.prop]}}</span>
</template>
<template v-if="item.prop == 'direction'">
@@ -221,8 +193,8 @@
<template v-else>
<el-checkbox-group :disabled="assetSetting.host == null" v-model="scope.row[item.prop]" class="direction-checkbox" :class="{'input-error':isError(item.errRows,scope.$index),'transparent-pop':assetSetting.host == null}">
<div class="input__inner">
<el-checkbox label="rx">RX</el-checkbox>
<el-checkbox label="tx" >TX</el-checkbox>
<el-checkbox label="rx">&nbsp;RX</el-checkbox>
<el-checkbox label="tx" >&nbsp;TX</el-checkbox>
</div>
</el-checkbox-group>
</template>
@@ -231,7 +203,7 @@
</el-table-column>
<el-table-column label="" :width="40" :show-overflow-tooltip="false">
<template slot-scope="scope">
<span @click.stop="delTabRow(scope.$index,scope.row)" :disabled="assetSetting.host == null" class=".right-box-form-delete" size="mini"><i class="nz-icon nz-icon-minus"></i></span>
<span :disabled="assetSetting.host == null" @click.stop="delTabRow(scope.$index,scope.row)" class="right-box-form-delete" size="mini"><i class="nz-icon nz-icon-minus"></i></span>
</template>
</el-table-column>
</el-table>
@@ -281,14 +253,14 @@
{
label:'ifDescr',
prop:'ifdescr',
width:100,
width:150,
required:false,
errRows:[],
},
{
label:this.$t('config.dc.traffic.direction'),
prop:'direction',
width:100,
width:200,
required:true,
errRows:[],
},
@@ -612,18 +584,52 @@
}
</script>
<style scoped>
.asset-config-tab{
width: calc(100% - 160px);
<style lang="scss" scoped>
.asset-config-tab {
min-height: 100px;
max-height: 400px;
border: 1px solid lightgrey;
border-radius: 5px;
padding:18px 50px 25px 40px;
margin: 0;
margin-bottom: 10px;
margin-left: 70px;
border: 1px solid #E4E7ED;;
border-radius: 2px;
position: relative;
margin-left: 15px;
margin-top: 18px;
padding: 18px 18px 26px 40px;
.asset-item {
display: flex;
align-items: center;
margin-bottom: 18px;
.asset-item--label {
color: #666;
padding-right: 20px;
line-height: 32px;
}
.asset-item--input {
display: flex;
width: 100%;
padding-right: 10px;
.right-box-row-with-btn {
width: 100%;
}
}
.asset-item--btn {
height: 28px;
box-sizing: border-box;
line-height: 21px;
}
}
.endpoints-box-endpoints {
width: calc(100% - 39px);
table.el-table__body {
font-size: 16px;
}
}
}
.asset-config-tab .add-btn{
text-align: center;
@@ -635,17 +641,24 @@
top: 1px;
left: -1px;
}
.asset-config-tab .right-box-row-with-btn{
width: calc(100% - 69px);
}
/deep/ .el-table tr:last-child td{
border-bottom: none;
}
/deep/ .el-table .traffic-set-table-title{
color: #0275b8;
color: $global-text-color-active;
}
</style>
<style lang="scss">
.asset-config-tab .right-box-form-minus-box {
background-color: #FEF3F0 !important;
}
.asset-config-tab .right-box-form-minus-box .nz-icon {
color: #EF9A87 !important;
}
.tab-tags{
width: 100%;
height: 22px;
@@ -684,15 +697,16 @@
}
.taffic-setting-tab .el-table__row:hover{
.input__inner{
border-color: #F0F0F0;
border-color: #c0c4cc;
}
}
.input__inner{
border: 1px solid;
border-color: white;
border-radius: 4px;
padding-left: 4px;
background-color: white;
width: 120px;
height: 30px;
line-height: 30px;
padding-left: 15px;
border-radius: 2px;
border: 1px solid #DCDFE6;
}
.input-error .el-input__inner,.input-error .el-input__inner:hover,.input-error .el-input__inner:focus,
.input-error .input__inner,.input-error .input__inner:hover,.input-error .input__inner:focus {

9
nezha-fronted/src/components/common/timePicker.vue
View File

@@ -67,6 +67,11 @@
.panel-time-picker-popper .el-picker-panel__footer button:nth-child(1){
display:none;
}
.dropdown--suffix {
padding: 0 8px;
color: #aaa;
}
</style>
<template>
<div class="calendar top-tools" id="panel-calender">
@@ -108,7 +113,9 @@
<div class="el-dropdown-link" slot="reference">
<i class="nz-icon nz-icon-time" style="width:20px;"></i>
<span class="panel-list-title" id="timePickerContent">{{showTime.text}}</span>
<i class="nz-icon nz-icon-arrow-down" style="padding-left:0px !important;width:20px;"></i>
<span class="dropdown--suffix">
<i class="el-icon-arrow-down"></i>
</span>
</div>
</el-popover>
<el-dropdown-menu class="nz-dashboard-dropdown popper-z-index" slot="dropdown">

1
nezha-fronted/src/components/page/alert/config.vue
View File

@@ -384,6 +384,7 @@
});
this.tableData = response.data.list;
this.pageObj.total = response.data.total;
console.info(this.$refs.alertRuleTable)
if (!this.scrollbarWrap) {
this.$nextTick(() => {
this.scrollbarWrap = this.$refs.alertRuleTable.bodyWrapper;

14
nezha-fronted/src/components/page/config/account.vue
View File

@@ -5,15 +5,13 @@
.account .account-role-item{
background-color: #409eff;
border: 1px solid #409eff;
height: 20px;
font-size: 12px;
line-height: 20px;
border-radius: 4px;
display: inline-block;
box-sizing: content-box;
padding:3px;
margin-right: 3px;
height: 20px;
line-height: 18px;
padding: 0 5px;
color: white;
border-radius: 4px;
box-sizing: border-box;
}
</style>
<template>
@@ -89,7 +87,7 @@
<template v-if="item.prop == 'roles'">
<template v-if="scope.row[item.prop]">
<template v-for="role in scope.row[item.prop]">
<div class="account-role-item" v-if="role"><span>{{role.i18n?$t(role.i18n):role.name}}</span></div>
<span class="account-role-item" v-if="role">{{role.i18n?$t(role.i18n):role.name}}</span>
</template>
</template>
<template v-else>

3
nezha-fronted/src/components/page/config/mibBrowser.vue
View File

@@ -802,6 +802,9 @@
border-top: none;
border-bottom: none;
}
.mib-browser-table-title {
margin-bottom: 10px;
}
.mib-browser-table-title, .mib-browser-tree-title {
height: 30px;
line-height: 30px;

52
nezha-fronted/src/components/page/config/system.vue
View File

@@ -945,10 +945,11 @@
}
</script>
<style scoped>
.system{
<style lang="scss" scoped>
.system {
height: 100%;
position: relative;
margin-top: 10px;
}
.system-config-form{
width: 61.8% !important;
@@ -1077,7 +1078,48 @@
cursor: pointer;
}
</style>
<style>
<style lang="scss">
.system {
.el-tabs__nav-scroll {
background-color: #eee;
}
.el-form-item:last-of-type {
padding-top: 36px !important;
.el-form-item__content {
margin-left: 0 !important;
width: 692px;
text-align: center;
}
.nz-btn {
margin: 0 10px;
}
}
.el-tabs__content {
padding-top: 25px;
}
.el-tabs__item {
outline: none;
box-sizing: border-box;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
color: $global-text-color-active;
border-bottom: none;
border-left: none;
border-right: none;
border-top: 4px solid $global-text-color-active;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
color: $global-text-color-active;
opacity: .8;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item {
border-bottom: none;
border-left: none;
border-right: none;
border-top: 4px solid transparent;
}
}
.system-config-form .el-form-item__content{
width: 512px;
}
@@ -1090,6 +1132,10 @@
line-height: 28px;
/*width: 512px;*/
}
.system-tabs {
box-shadow: unset !important;
border-color: #eee !important;
}
.system-tabs .el-tabs--border-card{
webkit-box-shadow: unset !important;
box-shadow: unset !important;

9
nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
View File

@@ -193,7 +193,6 @@
<style scoped lang="scss">
.promqlInput{
position: relative;
height: 36px;
width: 100%;
display: flex;
margin-bottom: 18px;
@@ -223,8 +222,8 @@
/*border-radius: 3px;*/
/*background-color: #dde4ed;*/
width: 34px;
height: 34px !important;
line-height: 34px;
height: 29px !important;
line-height: 30px;
text-align: center;
}
.query-options .option:focus,.query-options .option:hover{
@@ -239,7 +238,7 @@
height: 100%;
}
.metric-btn{
height: 36px !important;
height: 29px !important;
width: 105px;
margin-left: 1px;
}
@@ -269,6 +268,6 @@
z-index: 2100;
}
.input-box .el-input__inner{
height: 36px;
height: 30px;
}
</style>

5
nezha-fronted/src/main.js
View File

@@ -134,7 +134,7 @@ Vue.mixin({
if(title&&title.label){
item.label=title.label;
}
})
});
},
hasButton(code) {
return hasButton(this.$store.getters.buttonList, code);
@@ -184,6 +184,9 @@ Vue.mixin({
}
return 0;
},
translation(key) {
return i18n.t(key);
},
},
computed: {
getMenuList() {