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

perf: 样式调整

Browse Source 
1.按钮样式定义
2.侧滑结构调整
This commit is contained in:
chenjinsong
2020-01-16 18:11:15 +08:00
parent ec70d1557f
commit b164ab1dac
23 changed files with 572 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
nezha-fronted/src/assets/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
nezha-fronted/src/assets/img/logo24_24.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
nezha-fronted/src/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

BIN
nezha-fronted/src/assets/logo14_14.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 580 B

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

@@ -4,6 +4,17 @@ $header-text-color: #e5e5e5; // header默认字色
$header-text-color-active: #fff; // header高亮字色
$header-text-color-hover: #444; //header hover字色
$btn-normal-background-color: linear-gradient(180deg, #F5B93E 0%, #EE9D3F 100%); //橙色按钮颜色
$btn-normal-background-color-hover: #EE9D3F ; //橙色按钮hover颜色
$btn-normal-txt-color: #fff; //橙色按钮颜色
$btn-normal-shadow: 0 0 1px 1px rgba(162,162,162,0.50); //橙色按钮边框阴影
$btn-light-background-color: linear-gradient(180deg, #FFFFFF 0%, #E0E0E0 100%); //灰色按钮颜色
$btn-light-background-color-hover: linear-gradient(180deg, #F0F0F0 0%, #D8D8D8 99%); //橙色按钮hover颜色
$btn-light-txt-color: #666; //灰色按钮颜色
$btn-light-shadow: 0 0 1px 1px rgba(162,162,162,0.50); //灰色按钮边框阴影
$box-title-color: #333; //弹框标题字体颜色
$content-left-text-color: #666; //左侧菜单默认字色
@import './main.scss';

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

@@ -72,38 +72,50 @@ html {
}
/* begin--按钮组件*/
.nz-btn-min-width-75 {
min-width: 75px;
}
.nz-btn-min-width-82 {
min-width: 82px;
}
.nz-btn-min-width-120 {
min-width: 120px;
}
.nz-btn {
width: 82px;
border-radius: 4px;
cursor: pointer;
line-height: 18px;
font-size: 14px;
padding: 4px 6px;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
white-space: nowrap;
margin-left: 20px;
font-size: 14px;
line-height: 16px;
}
.nz-btn.nz-btn-size-normal {
padding: 4px 8px;
}
.nz-btn.nz-btn-size-normal {} /* size默认normal，是normal时这个class可不写*/
.nz-btn.nz-btn-size-small {
font-size: 12px;
line-height: 18px;
padding: 2px 12px;
font-weight: 500;
padding: 2px 5px;
}
.nz-btn.nz-btn-style-normal { /* 蓝色按钮 */
background-color: $global-text-color-active;
// background-image: linear-gradient(#2d8cec, #16b);
border: 1px solid $global-text-color-active;
border-top-color: $global-text-color-active;
color: #fff;
// text-shadow: 0 1px 1px rgba(0,0,0,.75);
.nz-btn-size-large {
padding: 7px 15px;
}
.nz-btn.nz-btn-size-alien { //弹框顶部异形按钮
height: 40px;
border-radius: 0 0 10px 10px;
}
.nz-btn.nz-btn-style-normal { /* 橙色按钮 */
background-image: $btn-normal-background-color;
color: $btn-normal-txt-color;
box-shadow: $btn-normal-shadow;
border: 0px;
}
.nz-btn.nz-btn-style-light { /* 浅色按钮 */
background-color: transparent;
border: 1px solid #999999;
color: #999999;
background-image: $btn-light-background-color;
border: 0px;
color: $btn-light-txt-color;
box-shadow: $btn-light-shadow;
letter-spacing: 0;
}
.nz-btn.nz-btn-style-pure-white { /*纯白色按钮*/
@@ -115,13 +127,14 @@ html {
padding: 2px 5px;
}
.nz-btn.nz-btn-size-normal.nz-btn-style-square { /* 单图标时是个正方形*/
// padding: 4px 6px;
padding: 4px 6px;
}
.nz-btn.nz-btn-style-light:hover:not(.nz-btn-disabled) {
// background-image: linear-gradient(#dedede,#c5c5c5);
background-image: $btn-light-background-color-hover;
}
.nz-btn.nz-btn-style-normal:hover:not(.nz-btn-disabled) {
// background-image: linear-gradient(#16b, #0d4d8c);
background-image: none;
background-color: $btn-normal-background-color-hover;
}
.nz-btn.nz-btn-style-pure-white:hover:not(.nz-btn-disabled) {
background-color: #dedede;
@@ -148,8 +161,8 @@ html {
/* begin--el-input扩展 */
.input-x-mini .el-input__inner {
height: 24px;
line-height: 24px;
height: 22px;
line-height: 22px;
padding: 0 5px;
font-size: 12px;
}
@@ -230,8 +243,8 @@ html {
/* begin--右侧内容*/
.content-right {
height: calc(100% - 131px);
margin-left: 270px;
padding: 0 15px 0 25px;
margin-left: 256px;
padding: 0 20px 0 20px;
}
.content-right-option {
cursor: pointer;
@@ -239,39 +252,25 @@ html {
margin-right: 6px;
}
.content-right-option i {
color: #6E7274;
}
.content-right-option i:hover {
color: #3E4244;
font-size: 12px;
}
.content-right-option .el-icon-delete {
color: #F98D9A;
color: #ee6723;
}
.content-right-option .el-icon-delete:hover {
color: #D96D7A;
}
.content-right-option .el-icon-view {
color: #60BEFF;
.content-right-option .nz-icon-view {
color: #898989;
}
.link { /*有外联的字段*/
color: #1166bb;
color: #3971BA;
cursor: pointer;
}
.content-right-option .el-icon-view:hover {
color: #409EFF;
}
.content-right-option .el-icon-edit-outline {
color: #6E7274;
}
.content-right-option .el-icon-edit-outline:hover {
color: #3E4244;
}
/* begin--顶部工具栏*/
.top-tools {
padding: 22px 0 13px 0;
}
.top-tools .top-tool-search {
width: 320px;
width: 260px;
margin: -1px 20px 0 0;
}
/* end--顶部工具栏*/
@@ -334,7 +333,7 @@ html {
min-width: 100px;
}
.content-right .el-table__row td:first-of-type {
padding-left: 33px;
padding-left: 38px;
}
.nz-table-gear {
display: block;
@@ -369,28 +368,28 @@ html {
/* begin--右弹框滑入滑出动画*/
@keyframes slide-in-from-right-580 {
from {right: -615px}
to {right: 15px}
from {right: -630px}
to {right: 0px}
}
@keyframes slide-out-to-right-580 {
from {right: 15px}
to {right: -615px}
from {right: 0px}
to {right: -630px}
}
@keyframes slide-in-from-right-840 {
from {right: -855px}
to {right: 15px}
from {right: -870px}
to {right: 0px}
}
@keyframes slide-out-to-right-840 {
from {right: 15px}
to {right: -855px}
from {right: 0px}
to {right: -870px}
}
@keyframes slide-in-from-right {
from {right: -535px}
to {right: 15px}
from {right: -550px}
to {right: 0px}
}
@keyframes slide-out-to-right {
from {right: 15px}
to {right: -535px}
from {right: 0px}
to {right: -550px}
}
.right-box-enter-active {
animation: slide-in-from-right 0.4s;
@@ -433,14 +432,13 @@ html {
/* begin--右侧弹框*/
.right-box, .right-sub-box {
position: fixed;
top: 80px;
right: 15px;
top: 60px;
right: 0;
z-index: 1;
border-radius: 8px;
box-shadow: 0 0 15px #ccc;
background-color: white;
padding: 0 0 0 20px;
height: calc(100% - 100px);
padding: 0 0 0 30px;
height: calc(100% - 60px);
}
/*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
@@ -448,7 +446,7 @@ html {
width: 520px;
}
.right-box-add-asset {
width: 580px;
width: 550px;
}
.right-box-add-endpoint {
width: 840px;
@@ -457,8 +455,10 @@ html {
.right-box-top-btns {
text-align: center;
float: right;
padding-right: 10px;
padding-top: 8px;
padding-right: 42px;
}
.right-box-top-btns button {
margin-left: 20px;
}
.pop-top-btns {
text-align: center;
@@ -468,11 +468,12 @@ html {
/* begin--右侧弹框--内容*/
.right-box-title {
height: 56px;
line-height: 40px;
height: 36px;
text-align: left;
display: inline-block;
font-weight: bold;
padding-top: 20px;
font-size: 14px;
color: $box-title-color;
}
.pop-title {
line-height: 25px;
@@ -520,7 +521,7 @@ html {
background-color: #d8d8d8;
}
.right-box-form-box {
height: calc(100% - 63px);
height: calc(100% - 132px);
width: 100%;
}
.right-box-form-box .el-scrollbar__wrap {
@@ -530,7 +531,7 @@ html {
overflow-x: hidden !important;
}
.right-box-form {
width: calc(100% - 20px);
width: calc(100% - 30px);
}
.right-box-add-endpoint .right-box-form {
height: 100%;
@@ -588,6 +589,9 @@ html {
display: inline-block;
float: right;
}
.right-box-form-btns button {
margin-left: 10px;
}
/* start--param*/
.param-box {
border: 1px solid #DCDFE6;
@@ -675,38 +679,17 @@ html {
/* begin--右侧弹框--底部按钮*/
.right-box-bottom-btns {
width: 100%;
height: 53px;
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
left: 0;
padding-top: 20px;
border-top: 1px solid #ccc;
text-align: center;
}
.right-box-bottom-btn:first-of-type {
border-bottom-left-radius: 8px;
}
.right-box-bottom-btn:last-of-type{
border-bottom-right-radius: 8px;
}
.right-box-bottom-btn {
display: inline-block;
background-color: #656565;
color: white;
height: 100%;
line-height: 40px;
cursor: pointer;
width: 100%;
}
.config-dropdown-label-input {
width: 50%;
display: inline-block;
}
.right-box-bottom-btn-cancel {
background-color: #DADADA;
color: #656565;
}
.right-box-bottom-btn-50 {
width: 50%;
.right-box-bottom-btns :nth-child(2) {
margin-left: 40px;
}
/* end--右侧弹框--底部按钮*/
/* end--右侧弹框*/

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

@@ -45,7 +45,7 @@
<div @click="jumpToProject(item)" :class="{'menu-item-active' :(activeIndex == 'project' && activeItemIndex == item.id)}">
<span>{{item.name}}</span>
<div @click.stop="toEditProject(item)" class="menu-edit"><i style="color: inherit"
class="el-icon-edit-outline"></i></div>
class="nz-icon nz-icon-edit"></i></div>
</div>
</el-menu-item>
</template>
@@ -61,7 +61,7 @@
<idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData" :button-class="'menu-edit'">
<template v-slot:optionZone>
<div @click="closeAllPop">
<i class="el-icon-edit-outline" @click="getIDCOptionData(item.id)" style="color: inherit"></i>
<i class="nz-icon nz-icon-edit" @click="getIDCOptionData(item.id)" style="color: inherit"></i>
</div>
</template>
</idc-config-box>

67
nezha-fronted/src/components/common/language/cn.js
View File

@@ -47,13 +47,13 @@ const cn = {
chartForm:{
chartId:"ID",
chartName:"图表名称",
type:"类别",
type:"类型",
typeVal:{
line:{
label:"线"
label:"曲线图"
},
bar:{
label:"柱"
label:"柱状图"
},
table:{
label:"表格"
@@ -61,11 +61,11 @@ const cn = {
},
width:"宽",
high:"高",
metric:"Metric",
addMetric:"新增Metric",
metric:"指标",
addMetric:"添加指标",
},
chartTableColumn:{
metric:'metric',
metric:'指标',
label:'标签',
time:'时间',
value:'值',
@@ -75,46 +75,45 @@ const cn = {
to:'至',
recOne:'最近1小时',
recFour:'最近4小时',
recOneDay:'最近1天',
yesterday:'昨天',
recSevenDay:'最近1星期',
recOneDay:'最近1日',
yesterday:'昨日',
recSevenDay:'最近7日',
recOneMonth:'最近1月',
curMonth:'本月',
lastMonth:'上月',
refreshInterval:{
never:'从不',
oneMinute:'1 分',
threeMinutes:'3 分',
fiveMinutes:'5 分',
tenMinutes:'10 分',
oneMinute:'1分钟',
threeMinutes:'3分钟',
fiveMinutes:'5分钟',
tenMinutes:'10分钟',
},
view:'查看',
confirm:'Ok',
cancel:'取消'
},
metric:{
name:"Metric",
normal:"Normal",
expert:"Expert",
label:"MetricLabel",
addMetric:"Create Metric",
expertTip:"Please enter an expression",
goPanelTip:"Go to the panel to view the created chart ?",
previewChart:"Preview Chart",
singleChartShow:"Single Graph Display",
multiChartsShow:"Multi Graph Display",
createPanel:"Create Panel",
selectPanel:"Select Panel",
saveChartToPanel:"Save Chart To Panel"
name:"指标名称",
normal:"普通",
expert:"专家",
label:"指标标签",
addMetric:"添加指标",
expertTip:"请输入表达式",
goPanelTip:"是否前去看板,查看创建的图表？",
previewChart:"预览图表",
singleChartShow:"单图展示",
multiChartsShow:"多图展示",
createPanel:"创建面板",
selectPanel:"选择已有面板",
saveChartToPanel:"保存图表到看板"
},
metricPreview:{
title:'Metric Preview',
title:'指标预览',
},
refresh:'refresh',
edit:'edit',
delete:'delete',
screen:'fullScreen'
refresh:'刷新',
edit:'编辑',
delete:'删除',
screen:'全屏'
},
validate: { //校验规则
required: '必填项',
@@ -146,7 +145,7 @@ const cn = {
},
asset:{
asset: '资产',
EditAsset:'Edit Asset',
EditAsset:'编辑资产',
createAssetTab:{
title:'新增资产',
sn:'SN',
@@ -415,7 +414,7 @@ const cn = {
moduleParameter: "组件参数"
},
metrics: {
metrics: "Metrics",
metrics: "指标",
name: '名称',
type: '类型',
description: '描述'

1
nezha-fronted/src/components/common/language/en.js
View File

@@ -9,6 +9,7 @@ const en = {
create: 'Create',
edit: 'Edit',
delete: 'Delete',
view: 'View',
esc: 'Esc',
cancel: 'Cancel',
save: 'Save',

20
nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
View File

@@ -3,12 +3,12 @@
<div class="right-box right-box-add-endpoint" v-if="rightBox.show" @mousedown="showEditParamBox(false)">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button type="button" @click="save" class="nz-btn nz-btn-size-normal nz-btn-style-normal" id="ep-add">
<!--<button type="button" @click="save" class="nz-btn nz-btn-size-normal nz-btn-style-normal" id="ep-add">
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
</button>
<button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square" id="ep-esc">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
</button>
</button>-->
</div>
<!-- end--顶部按钮-->
@@ -94,7 +94,7 @@
<el-input id="edit-param" @click.native.stop="showEditParamBox(true, currentModuleCopy, 1, $event)" slot="reference" disabled class="module-info module-info-param input-x-mini" v-model="currentModuleCopy.param"></el-input>
</el-popover>
<el-input class="module-info module-info-path input-x-mini" v-model="currentModuleCopy.path"></el-input>
<button type="button" id="cover-param" @click="coverEndpoint" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square module-info module-info-cover">{{$t('overall.cover')}}</button>
<button type="button" id="cover-param" @click="coverEndpoint" class="nz-btn nz-btn-size-small nz-btn-style-light module-info module-info-cover">{{$t('overall.cover')}}</button>
</div>
<!--endpoints-->
<div class="endpoints-box-endpoints" :style="{borderColor: endpointTouch ? paramBorderColor : '#dcdfe6'}">
@@ -188,7 +188,7 @@
</el-table>
<div class="el-form-item__error" :style="{opacity: endpointTouch && this.endpointList.length == 0 ? '1' : '0'}" style="left: unset; transition: all .2s">{{$t('validate.required')}}</div>
<div>
<button id="clear-select-asset" type="button" @click="clearSelection" class="nz-btn nz-btn-size-small nz-btn-style-light endpoints-clear-btn">{{$t('overall.clear')}}</button>
<button id="clear-select-asset" type="button" @click="clearSelection" class="nz-btn nz-btn-size-normal nz-btn-style-light endpoints-clear-btn">{{$t('overall.clear')}}</button>
<span style="display: inline-block; font-size: 14px; float: right;line-height: 35px;padding-right: 15px;">All: {{this.endpointList.length}}</span>
</div>
</div>
@@ -198,6 +198,16 @@
</el-scrollbar>
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="ep-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120">
<span>{{$t('overall.cancel')}}</span>
</button>
<button @click="save" id="ep-add" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120">
<span>{{$t('overall.save')}}</span>
</button>
</div>
<!--start--param编辑框-->
<transition name="right-sub-box">
<div @mousedown.stop class="right-sub-box" v-if="editParamBox.show" :style="'top: ' + editParamBox.top + 'px; left: ' + editParamBox.left + 'px;'">
@@ -816,7 +826,7 @@
.endpoint-asset-search-input {
display: inline-block;
width: 100px;
vertical-align: middle;
vertical-align: top;
}
/* end--搜索框*/

21
nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
View File

@@ -3,17 +3,16 @@
<div class="right-box right-box-alert-config" v-if="rightBox.show">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button type="button" v-if="alertRule.id != ''" id="alert-box-del" @click="del" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<button type="button" v-if="alertRule.id != '' && rightBox.isEdit" id="alert-box-del" @click="del" class="nz-btn nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="top-tool-btn-txt">{{$t('overall.delete')}}</span>
</button>
<button type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-normal nz-btn-style-normal" id="alert-box-save">
<span v-if="rightBox.isEdit" class="top-tool-btn-txt">{{$t('overall.save')}}</span>
<span v-else class="top-tool-btn-txt">{{$t('overall.edit')}}</span>
<button v-if="!rightBox.isEdit" type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82" id="alert-box-edit">
<span class="top-tool-btn-txt">{{$t('overall.edit')}}</span>
</button>
<button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square" id="alert-box-esc">
<!--<button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square" id="alert-box-esc">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
</button>
</button>-->
</div>
<!-- end--顶部按钮-->
@@ -99,6 +98,16 @@
</el-form>
</el-scrollbar>
<!-- end--表单-->
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="alert-box-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120">
<span>{{$t('overall.cancel')}}</span>
</button>
<button v-if="rightBox.isEdit" @click="saveOrToEdit" id="alert-box-save" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</transition>
</template>

22
nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
View File

@@ -3,18 +3,18 @@
<div class="right-box right-box-edit-endpoint" v-if="rightBox.show">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="edit-ep-del" type="button" v-if="rightBox.isEdit && endpoint.id != ''" @click="del" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<button id="edit-ep-del" type="button" v-if="rightBox.isEdit && endpoint.id != ''" @click="del" class="nz-btn nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="top-tool-btn-txt">{{$t('overall.delete')}}</span>
</button>
<button id="edit-ep-edit" v-if="!rightBox.isEdit" type="button" @click="toEdit(true)" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<button id="edit-ep-edit" v-if="!rightBox.isEdit" type="button" @click="toEdit(true)" class="nz-btn nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="top-tool-btn-txt">{{$t('overall.edit')}}</span>
</button>
<button id="edit-ep-save" v-if="rightBox.isEdit" type="button" @click="save" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<!--<button id="edit-ep-save" v-if="rightBox.isEdit" type="button" @click="save" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
</button>
<button id="edit-ep-esc" type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
</button>
</button>-->
</div>
<!-- end--顶部按钮-->
@@ -132,10 +132,10 @@
<span>{{$t('project.endpoint.param')}}</span>
<div class="right-box-form-btns" v-if="rightBox.isEdit">
<button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
<button type="button" id="edit-clear-all" @click="clearAllParam" class="nz-btn nz-btn-size-small nz-btn-style-light">
<button type="button" id="edit-clear-all" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<span class="top-tool-btn-txt">{{$t('overall.clearAll')}}</span>
</button>
<button type="button" id="edit-add-param" @click="addParam" class="nz-btn nz-btn-size-small nz-btn-style-normal">
<button type="button" id="edit-add-param" @click="addParam" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</button>
<!-- <button type="button" @click="save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-edit-ok">
@@ -168,6 +168,16 @@
<!-- end--表单-->
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120">
<span>{{$t('overall.cancel')}}</span>
</button>
<button v-if="rightBox.isEdit" @click="save" id="ep-edit-save" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120">
<span>{{$t('overall.save')}}</span>
</button>
</div>
<!-- begin--子弹框-->
<!--<transition name="right-sub-box">
<div class="right-sub-box" @click.stop v-if="subBox.show">

48
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -3,35 +3,16 @@
<div class="right-box right-box-module" v-if="rightBox.show">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="module-del" type="button" v-if="module.id != ''" @click="del" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<button id="module-del" type="button" v-if="module.id != '' && rightBox.isEdit" @click="del" class="nz-btn nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="top-tool-btn-txt">{{$t('overall.delete')}}</span>
</button>
<button id="module-save" type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span v-if="rightBox.isEdit" class="top-tool-btn-txt">{{$t('overall.save')}}</span>
<span v-else class="top-tool-btn-txt">{{$t('overall.edit')}}</span>
<button v-if="!rightBox.isEdit" id="module-save" type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="top-tool-btn-txt">{{$t('overall.edit')}}</span>
</button>
<button id="module-esc" type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
<!--<button id="module-esc" type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
</button>
<!--<div class="right-box-top-btn" v-if="module.id != ''" @click="del">
<div class="right-box-btn-icon">
<i class="el-icon-delete"></i>
</div>
<span>{{$t('overall.delete')}}</span>
</div>
<div class="right-box-top-btn right-box-top-btn-full" @click="save">
<div class="right-box-btn-icon">
<i class="el-icon-edit-outline"></i>
</div>
<span>{{$t('overall.save')}}</span>
</div>
<div class="right-box-top-btn right-box-top-btn-full" @click="esc">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
<span>{{$t('overall.esc')}}</span>
</div>-->
</button>-->
</div>
<!-- end--顶部按钮-->
@@ -74,10 +55,10 @@
<span>{{$t('project.endpoint.param')}}</span>
<div class="right-box-form-btns" v-if="rightBox.isEdit">
<button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
<button id="module-clear-all" type="button" @click="clearAllParam" class="nz-btn nz-btn-size-small nz-btn-style-light">
<button id="module-clear-all" type="button" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<span class="top-tool-btn-txt">{{$t('overall.clearAll')}}</span>
</button>
<button id="module-add-param" type="button" @click="addParam" class="nz-btn nz-btn-size-small nz-btn-style-normal">
<button id="module-add-param" type="button" @click="addParam" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</button>
</div>
@@ -102,6 +83,16 @@
</el-form>
</el-scrollbar>
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="module-box-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120">
<span>{{$t('overall.cancel')}}</span>
</button>
<button v-if="rightBox.isEdit" @click="saveOrToEdit" id="module-box-save" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120">
<span>{{$t('overall.save')}}</span>
</button>
</div>
<!--<div class='right-box-form'>
&lt;!&ndash;project&ndash;&gt;
<div class="right-box-form-row">
@@ -170,11 +161,6 @@
</div>
</div>-->
<!-- begin--底部按钮-->
<!--<div class="right-box-bottom-btns">
<div @click="esc" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="save" class="right-box-bottom-btn right-box-bottom-btn-50">{{module.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
</div>-->
<!-- end--底部按钮-->
</div>
</transition>
</template>

25
nezha-fronted/src/components/common/rightBox/projectBox.vue
View File

@@ -3,16 +3,15 @@
<div class="right-box right-box-project" v-if="rightBox.show">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="project-del" type="button" v-if="project.id != ''" @click="del" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<button id="project-del" type="button" v-if="project.id != '' && rightBox.isEdit" @click="del" class="nz-btn nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="top-tool-btn-txt">{{$t('overall.delete')}}</span>
</button>
<button id="project-save" type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span v-if="rightBox.isEdit" class="top-tool-btn-txt">{{$t('overall.save')}}</span>
<span v-else class="top-tool-btn-txt">{{$t('overall.edit')}}</span>
<button v-if="!rightBox.isEdit" id="project-edit" type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="top-tool-btn-txt">{{$t('overall.edit')}}</span>
</button>
<button id="project-esc" type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
<!--<button id="project-esc" type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
</button>
</button>-->
</div>
<!-- end--顶部按钮-->
@@ -32,11 +31,15 @@
</el-form>
</el-scrollbar>
<!-- begin--底部按钮-->
<!--<div class="right-box-bottom-btns">
<div @click="esc" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="save" class="right-box-bottom-btn right-box-bottom-btn-50">{{project.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
</div>-->
<!-- end--底部按钮-->
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="project-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120">
<span>{{$t('overall.cancel')}}</span>
</button>
<button v-if="rightBox.isEdit" @click="saveOrToEdit" id="project-save" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</transition>
</template>

49
nezha-fronted/src/components/common/searchInput.vue
View File

@@ -116,9 +116,10 @@
</ul>
</div>
</div>
<div class="new-search-btn" @click="select">
<button @click="select" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right" id="search-input-search"><i class="el-icon-search"></i></button>
<!--<div class="new-search-btn" @click="select">
<i class="el-icon-search"></i>
</div>
</div>-->
</div>
</template>
@@ -1138,8 +1139,8 @@
// 判断输入框的高度
getHeight(){
if(document.getElementById('search-ul').clientHeight<24||document.getElementById('input-center-box').clientHeight<24){
document.getElementById('input-center-box').style.height = 30+'px'
document.getElementById('search-ul').style.height = 24+"px"
document.getElementById('input-center-box').style.height = 27+'px'
document.getElementById('search-ul').style.height = 21+"px"
}
},
chlick_sreach(e) {
@@ -1204,29 +1205,35 @@
.new-search{
display: flex;
position: relative;
box-shadow: 0px 0px 20px 0px rgba(0,0,0,.08);
line-height: 28px;
line-height: 25px;
border-radius: 4px;
border: 1px solid #D8D8D8;
/*box-shadow: inset 0 0 5px 0 rgba(184,184,184,0.80);*/
}
.new-search .nz-btn {
box-shadow: 0 0 1px 1px #d8d8d8;
border-radius: 0 4px 4px 0;
}
.new-search .search-input-all{
width: 300px;
width: 240px;
background: #fff;
color: rgba(0,0,0,.55);
height: 28px;
line-height: 28px;
height: 25px;
line-height: 25px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
display: flex;
position: relative;
box-shadow: 0px 0px 20px 0px rgba(0,0,0,.08);
}
.search-input-all .btn-retract{
padding: 0px 4px;
text-align: center;
}
.search-input-all .search-history{
padding: 0px 10px;
height: 20px;
line-height: 20px;
padding: 0px 7px;
height: 17px;
line-height: 17px;
text-align: center;
border-right: 1px solid #e5e5e5;
margin-top: 4px;
@@ -1274,16 +1281,16 @@
.sreach_box{
position: relative;
width: 80%;
height: 28px;
height: 25px;
padding: 20px;
background: #fff;
margin: 200px auto;
}
.keyring_sreach_right_btn{
width: 18%;
height: 28px;
height: 25px;
float: right;
line-height: 28px;
line-height: 25px;
text-align: center;
border: 1px solid #dfdfdf;
}
@@ -1302,7 +1309,7 @@
right: 0;
top: -50px;
width: 24px;
height: 28px;
height: 25px;
border-radius: 50%;
background: #fff;
text-align: center;
@@ -1392,16 +1399,16 @@
}
.selectinfo_box .select_condition{
float:left;
height: 16px;
height: 13px;
padding: 3px;
background:#f8f8f8;
line-height: 16px;
line-height: 13px;
color: rgba(0,0,0,.55);
}
.selectinfo_box .select_content{
float: left;
line-height: 16px;
height: 16px;
line-height: 13px;
height: 13px;
padding: 3px;
background: #f0f0f0;
color: rgba(0,0,0,0.85);

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

@@ -19,7 +19,7 @@
</div>
<div class="content-right">
<div class="top-tools">
<button id="alert-add" @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
<button id="alert-add" @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82">
<span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
@@ -53,9 +53,14 @@
</template>
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="content-right-options">
<span @click="del(scope.row)" class="content-right-option" :id="'alert-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
<span @click="detail(scope.row)" class="content-right-option" :id="'alert-detail-'+scope.row.id"><i class="el-icon-view"></i></span>
<span @click="toEdit(scope.row)" class="content-right-option" :id="'alert-edit-'+scope.row.id"><i class="el-icon-edit-outline"></i></span>
<span @click="del(scope.row)" class="content-right-option" :id="'alert-del-'+scope.row.id"><i
class="el-icon-delete"></i>&nbsp;&nbsp;<span>{{$t('overall.delete')}}</span></span>
&nbsp;&nbsp;&nbsp;
<span @click="toEdit(scope.row)" class="content-right-option" :id="'alert-edit-'+scope.row.id"><i
class="nz-icon nz-icon-edit"></i>&nbsp;&nbsp;<span>{{$t('overall.edit')}}</span></span>
&nbsp;&nbsp;&nbsp;
<span @click="detail(scope.row)" class="content-right-option" :id="'alert-detail-'+scope.row.id"><i
class="nz-icon nz-icon-view"></i>&nbsp;&nbsp;<span>{{$t('overall.view')}}</span></span>
</div>
<span v-else-if="item.prop == 'severity'">
<span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{severityData[1].value}}</span>
@@ -218,6 +223,7 @@ export default {
label: this.$t('alert.config.option'),
prop: 'option',
show: true,
width: 220
}
],
tableData: [],

6
nezha-fronted/src/components/page/asset/accountConfig.vue
View File

@@ -17,11 +17,11 @@
<div class="right-box-form-content-txt" v-if="!isEdit">{{account.authType}}</div>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.account')" prop="user">
<el-input size="mini" v-model="account.user" v-if="isEdit"/>
<el-input autocomplete="new-password" size="mini" v-model="account.user" v-if="isEdit"/>
<div class="right-box-form-content-txt" v-if="!isEdit">{{account.user}}</div>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.password')" v-show="account.authType==1" v-if="isEdit" style="display: inline-block">
<el-input size="mini" type="password" v-model="account.pwd"/>
<el-form-item :label="$t('asset.createAssetTab.password')" v-show="account.authType==1" v-if="isEdit">
<el-input autocomplete="new-password" size="mini" type="password" v-model="account.pwd"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.port')" prop="port" style="display: inline-block">
<el-input size="mini" v-model.number="account.port" v-if="isEdit"/>

30
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -17,7 +17,7 @@
<idc-config-box ref="idcConfigBox" :post-idc="item" placement="left" @after="getIDCOptionData" :button-class="'checkbox-edit'">
<template v-slot:optionZone>
<span @click="closeAllPop">
<i class="el-icon-edit-outline" @click="getSingleIDCData(item.id,'edit')"></i>
<i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit')"></i>
</span>
</template>
</idc-config-box>
@@ -28,7 +28,7 @@
<div class="content-right">
<div class="top-tools">
<button @click.stop="tagShow('showAdd')" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right" id="asset-add">
<button @click.stop="tagShow('showAdd')" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="asset-add">
<span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
@@ -84,15 +84,15 @@
<div v-if="scope.row.moduleNum > 0" @click="getAssetModuleList(scope.row.id)" :id="'asset-module-'+scope.row.id">
<module-list-pop :asset-id="scope.row.id + ''" @openModuleBox="openModuleBox" placement="left" :ref="'moduleListPop' + scope.row.id">
<template v-slot:optionZone>
<div class="tab-input-square tab-input-square-high link" >{{scope.row.moduleNum}}</div>
<button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{scope.row.moduleNum}}</button>
</template>
</module-list-pop>
</div>
<div v-else class="tab-input-square">{{scope.row.moduleNum}}</div>
<button type="button" v-else class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{scope.row.moduleNum}}</button>
</div>
<div v-if="item.prop=='Alert'">
<div v-if="scope.row.alertNum > 0" class="tab-input-square tab-input-square-high link" @click="jumpToAlertMsg(scope.row.id)" :id="'asset-alerts-'+scope.row.id">{{scope.row.alertNum}}</div>
<div class="tab-input-square" v-else>{{scope.row.alertNum}}</div>
<button type="button" v-if="scope.row.alertNum > 0" id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row.id)" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{scope.row.alertNum}}</button>
<button type="button" v-else class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{scope.row.alertNum}}</button>
</div>
<div v-if="item.prop=='dataCenter'">
<idc-config-box :post-idc="JSON.parse(JSON.stringify(scope.row.idc))" ref="idcConfigBox" :is-edit="false" placement="left" @after="getAssetData(null, true)" :button-class="'checkbox-edit'">
@@ -126,16 +126,16 @@
</div>
<div v-if="item.prop == 'option'" class="content-right-options">
<span @click.stop="deleteData('asset',scope.row.id)" class="content-right-option" :id="'asset-del-'+scope.row.id"><i
class="el-icon-delete"></i>
</span>
<span @click.stop="tagShow('showView',scope.row.id)" class="content-right-option" :id="'asset-detail-'+scope.row.id"><i
class="el-icon-view"></i>
</span>
class="el-icon-delete"></i>&nbsp;&nbsp;<span>{{$t('overall.delete')}}</span>
</span>&nbsp;&nbsp;&nbsp;
<span @click.stop="tagShow('showEdit',scope.row.id)" class="content-right-option" :id="'asset-edit-'+scope.row.id"><i
class="el-icon-edit-outline"></i>
</span>
class="nz-icon nz-icon-edit"></i>&nbsp;&nbsp;<span>{{$t('overall.edit')}}</span>
</span>&nbsp;&nbsp;&nbsp;
<span @click.stop="tagShow('showView',scope.row.id)" class="content-right-option" :id="'asset-detail-'+scope.row.id"><i
class="el-icon-view"></i>&nbsp;&nbsp;<span>{{$t('overall.view')}}</span>
</span>&nbsp;&nbsp;&nbsp;
<span @click="ssss(scope.row.id ,scope.row.host)" class="content-right-option" :id="'asset-ssh-'+scope.row.id"><i
class="el-icon-monitor"></i>
class="nz-icon nz-icon-cli"></i>&nbsp;&nbsp;<span>CLI</span>
</span>
</div>
</template>
@@ -260,7 +260,7 @@
label: this.$t('config.account.option'),
prop: 'option',
show: true,
width: 115
width: 280
}],
tableData: [],
checkListData: [],

14
nezha-fronted/src/components/page/asset/assetAddUnit.vue
View File

@@ -2,13 +2,13 @@
<transition name="right-box-580">
<div class="right-box right-box-add-asset" v-if="addUnitShow" @click="editQuit">
<div class="right-box-top-btns">
<button type="button" @click.stop="addNewData('asset')" id="add-asset-new" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<!--<button type="button" @click.stop="addNewData('asset')" id="add-asset-new" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
</button>
<button type="button" @click.stop="sendStateData('close')" id="add-asset-esc"
class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
</button>
</button>-->
</div>
<div class="right-box-title">{{$t('asset.createAssetTab.title')}}</div>
@@ -327,6 +327,16 @@
</el-form-item>
</el-form>
</el-scrollbar>
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click.stop="sendStateData('close')" id="add-asset-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120">
<span>{{$t('overall.cancel')}}</span>
</button>
<button @click.stop="addNewData('asset')" id="add-asset-new" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120">
<span>{{$t('overall.ok')}}</span>
</button>
</div>
</div>
</transition>
</template>

22
nezha-fronted/src/components/page/asset/assetEditUnit.vue
View File

@@ -3,19 +3,19 @@
<div class="right-box right-box-add-asset" v-if="editUnitShow" @click="editQuit" id="asset-edit-quit">
<!--顶部按钮-->
<div class="right-box-top-btns">
<button v-if="!tabView" type="button" @click="deleteData('asset', pageObj.id)" id="asset-edit-del" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<button v-if="!tabView" type="button" @click="deleteData('asset', pageObj.id)" id="asset-edit-del" class="nz-btn nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="top-tool-btn-txt" >{{$t('overall.delete')}}</span>
</button>
<button v-if="tabView" id="asset-edit-edit" type="button" @click="tabView=false" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<button v-if="tabView" id="asset-edit-edit" type="button" @click="tabView=false" class="nz-btn nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="top-tool-btn-txt" >{{$t('overall.edit')}}</span>
</button>
<button v-if="!tabView" id="asset-edit-save" type="button" @click.stop="editData('asset')" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<!--<button v-if="!tabView" id="asset-edit-save" type="button" @click.stop="editData('asset')" class="nz-btn nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
</button>
<button type="button" id="asset-edit-esc" @click.stop="sendStateData('close')"
</button>-->
<!--<button type="button" id="asset-edit-esc" @click.stop="sendStateData('close')"
class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
</button>
</button>-->
</div>
<div class="right-box-title">{{this.tabView == true ? $t('asset.asset') : $t('asset.EditAsset')}}</div>
@@ -455,6 +455,16 @@
<account-config-box v-for="(item,index) in assetData.accounts" :is-edit="!tabView" :account="item" :key="index" ref="accountConfigBox"></account-config-box>
</el-form>
</el-scrollbar>
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click.stop="sendStateData('close')" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120" id="asset-edit-cancel">
<span>{{$t('overall.cancel')}}</span>
</button>
<button @click.stop="editData('asset')" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120" id="asset-edit-save">
<span>{{$t('overall.ok')}}</span>
</button>
</div>
</div>
</transition>
</template>

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

@@ -2,6 +2,7 @@
.account {
height: 100%;
}
.top-tools .top-tool-btn-txt .nz-icon {
display: inline-block;
font-size: 12px;
@@ -14,17 +15,22 @@
<div class="sidebar-title">Config</div>
<div class="sidebar-info">
<div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('config.account.account')}}</div>
<div class="sidebar-info-item" @click="jumpTo('promServer')" id="account-jump-promserver">{{$t('config.promServer.promServerList')}}</div>
<div class="sidebar-info-item" @click="jumpTo('promServer')" id="account-jump-promserver">
{{$t('config.promServer.promServerList')}}
</div>
</div>
</div>
<div class="content-right">
<div class="top-tools">
<button type="button" @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right" id="account-add">
<button type="button" @click="toAdd"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="account-add">
<span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button>
<div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
<div class="top-tool-search float-right">
<search-input :searchMsg="searchMsg" @search="search"></search-input>
</div>
</div>
<el-table
:data="tableData"
@@ -52,9 +58,15 @@
</template>
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="content-right-options">
<span @click="del(scope.row)" class="content-right-option" :id="'account-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
<span @click="detail(scope.row)" class="content-right-option" :id="'account-detail-'+scope.row.id"><i class="el-icon-view"></i></span>
<span @click="edit(scope.row)" class="content-right-option" :id="'account-edit-'+scope.row.id"><i class="el-icon-edit-outline"></i></span>
<span @click="del(scope.row)" class="content-right-option" :id="'account-del-'+scope.row.id"><i
class="el-icon-delete"></i>&nbsp;&nbsp;<span>{{$t('overall.delete')}}</span></span>
&nbsp;&nbsp;&nbsp;
<span @click="edit(scope.row)" class="content-right-option" :id="'account-edit-'+scope.row.id"><i
class="nz-icon nz-icon-edit"></i>&nbsp;&nbsp;<span>{{$t('overall.edit')}}</span></span>
&nbsp;&nbsp;&nbsp;
<span @click="detail(scope.row)" class="content-right-option" :id="'account-detail-'+scope.row.id"><i
class="nz-icon nz-icon-view"></i>&nbsp;&nbsp;<span>{{$t('overall.view')}}</span></span>
</div>
<span v-else-if="item.prop == 'lang'">
{{scope.row[item.prop] == 'en' ? 'English' : ''}}
@@ -84,16 +96,13 @@
<div class="right-box right-box-account" v-if="rightBox.show">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button type="button" v-if="user.userId != ''" @click="del(user)" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="account-edit-del">
<button type="button" v-if="user.userId != '' && rightBox.isEdit" @click="del(user)"
class="nz-btn nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82" id="account-edit-del">
<span class="top-tool-btn-txt">{{$t('overall.delete')}}</span>
</button>
<button type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-normal nz-btn-style-normal" id="account-edit-save">
<span v-if="rightBox.isEdit" class="top-tool-btn-txt">{{$t('overall.save')}}</span>
<span v-else class="top-tool-btn-txt">{{$t('overall.edit')}}</span>
</button>
<button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square" id="account-edit-esc">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
<button v-if="!rightBox.isEdit" type="button" @click="saveOrToEdit"
class="nz-btn nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82" id="account-edit-edit">
<span class="top-tool-btn-txt">{{$t('overall.edit')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
@@ -107,12 +116,12 @@
<el-form class="right-box-form" :model="user" label-position="top" :rules="rules" ref="accountForm">
<!--username-->
<el-form-item :label="$t('config.account.account')" prop="username">
<el-input v-if="rightBox.isEdit" type="text" placeholder="" v-model="user.username" maxlength="64" show-word-limit size="small"></el-input>
<el-input autocomplete="new-password" v-if="rightBox.isEdit" type="text" placeholder="" v-model="user.username" maxlength="64" show-word-limit size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{user.username}}</div>
</el-form-item>
<!--password-->
<el-form-item :label="$t('config.account.password')" prop="password" v-if="rightBox.isEdit &&!user.userId">
<el-input type="password" placeholder="" v-model="user.password" maxlength="16" show-word-limit size="small"></el-input>
<el-input autocomplete="new-password" type="password" placeholder="" v-model="user.password" maxlength="16" show-word-limit size="small"></el-input>
</el-form-item>
<!--email-->
<el-form-item label="E-mail" prop="email">
@@ -136,13 +145,22 @@
</el-form>
</el-scrollbar>
<!-- end--表单-->
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="account-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120">
<span>{{$t('overall.cancel')}}</span>
</button>
<button v-if="rightBox.isEdit" @click="saveOrToEdit" id="account-save" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</transition>
<element-set
v-clickoutside="elementsetHide"
:dropCol="dropCol"
:table-title="tableTitle"
@tablelable="tablelabelEmit"
:table-title="tableTitle"
ref="elementset"
></element-set>
</div>
@@ -202,7 +220,7 @@ export default {
label: this.$t('config.account.option'),
prop: 'option',
show: true,
width: 100
width: 220
}
],
tablelable: [],

36
nezha-fronted/src/components/page/config/promServer.vue
View File

@@ -19,7 +19,7 @@
</div>
<div class="content-right">
<div class="top-tools">
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right" id="prom-add">
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="prom-add">
<span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
@@ -52,9 +52,14 @@
{{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}
</span>
<div v-else-if="item.prop == 'option'" class="content-right-options">
<span @click="del(scope.row)" class="content-right-option" :id="'prom-tab-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
<span @click="detail(scope.row)" class="content-right-option" :id="'prom-tab-detail-'+scope.row.id"><i class="el-icon-view"></i></span>
<span @click="toEdit(scope.row)" class="content-right-option" :id="'prom-tab-edit-'+scope.row.id"><i class="el-icon-edit-outline"></i></span>
<span @click="del(scope.row)" class="content-right-option" :id="'prom-del-'+scope.row.id"><i
class="el-icon-delete"></i>&nbsp;&nbsp;<span>{{$t('overall.delete')}}</span></span>
&nbsp;&nbsp;&nbsp;
<span @click="toEdit(scope.row)" class="content-right-option" :id="'prom-edit-'+scope.row.id"><i
class="nz-icon nz-icon-edit"></i>&nbsp;&nbsp;<span>{{$t('overall.edit')}}</span></span>
&nbsp;&nbsp;&nbsp;
<span @click="detail(scope.row)" class="content-right-option" :id="'prom-detail-'+scope.row.id"><i
class="nz-icon nz-icon-view"></i>&nbsp;&nbsp;<span>{{$t('overall.view')}}</span></span>
</div>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
@@ -67,17 +72,16 @@
<div class="right-box right-box-prom" v-if="rightBox.show">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button type="button" v-if="rightBox.isEdit && promServer.id != ''" @click="del(promServer)" id="prom-edit-del" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<button type="button" v-if="rightBox.isEdit && promServer.id != ''" @click="del(promServer)" id="prom-edit-del" class="nz-btn nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="top-tool-btn-txt">{{$t('overall.delete')}}</span>
</button>
<button type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-normal nz-btn-style-normal" id="prom-edit-save">
<span v-if="rightBox.isEdit" class="top-tool-btn-txt">{{$t('overall.save')}}</span>
<span v-else class="top-tool-btn-txt">{{$t('overall.edit')}}</span>
<button v-if="!rightBox.isEdit" type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82" id="prom-edit-save">
<span class="top-tool-btn-txt">{{$t('overall.edit')}}</span>
</button>
<button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square" id="prom-edit-esc">
<!--<button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square" id="prom-edit-esc">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
</button>
</button>-->
</div>
<!-- end--顶部按钮-->
@@ -132,6 +136,16 @@
</el-form>
</el-scrollbar>
<!-- end--表单-->
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="prom-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120">
<span>{{$t('overall.cancel')}}</span>
</button>
<button v-if="rightBox.isEdit" @click="saveOrToEdit" id="prom-save" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</transition>
<element-set
@@ -208,7 +222,7 @@ export default {
label: this.$t('config.account.option'),
prop: 'option',
show: true,
width: 100
width: 220
}
],
tablelable: [],

13
nezha-fronted/src/components/page/project/project.vue
View File

@@ -13,7 +13,7 @@
<el-popover trigger="hover" placement="right-end" :content="item.name" >
<div slot="reference" class="sidebar-info-item-txt">{{item.name}}</div>
</el-popover>
<div class="side-bar-menu-edit" @click.stop="toEditModule(item)" :id="'project-module-edit-'+item.id"><i class="el-icon-edit-outline"></i></div>
<div class="side-bar-menu-edit" @click.stop="toEditModule(item)" :id="'project-module-edit-'+item.id"><i class="nz-icon nz-icon-edit"></i></div>
</div>
</div>
</div>
@@ -63,7 +63,7 @@
<span>{{$t('project.metrics.metrics')}}</span>
</button>
</div>
<button @click="toCreateEndpoint" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right" id="project-add-ep">
<button @click="toCreateEndpoint" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="project-add-ep">
<span class='top-tool-btn-txt'>
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
@@ -99,9 +99,12 @@
<span v-else-if="item.prop == 'param'">
<span v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}，</span>
</span>
<div v-else-if="item.prop == 'option'" class="content-right-options" :id="'project-ep-op-'+scope.row.id">
<span @click.stop="endpointDetail(scope.row)" class="content-right-option" ><i class="el-icon-view"></i></span>
<span @click.stop="toEditEndpoint(scope.row)" class="content-right-option" ><i class="el-icon-edit-outline"></i></span>
<div v-else-if="item.prop == 'option'" class="content-right-options">
<span @click="toEditEndpoint(scope.row)" class="content-right-option" :id="'edp-edit-'+scope.row.id"><i
class="nz-icon nz-icon-edit"></i>&nbsp;&nbsp;<span>{{$t('overall.edit')}}</span>
</span>&nbsp;&nbsp;
<span @click="endpointDetail(scope.row)" class="content-right-option" :id="'edp-detail-'+scope.row.id"><i
class="nz-icon nz-icon-view"></i>&nbsp;&nbsp;<span>{{$t('overall.view')}}</span></span>
</div>
<span v-else-if="item.prop == 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>
<span v-else-if="item.prop == 'state'" :style="{color: scope.row.state == 0 ? 'red' : (scope.row.state == 0 ? 'green' : '')}">{{scope.row.state == 1 ? 'up' : ''}}{{scope.row.state == 0 ? 'down' : ''}}</span>