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

解决样式冲突

Browse Source
This commit is contained in:
zyh
2023-06-06 17:55:11 +08:00
parent 8c0ea18ad9 530276e1b2
commit e6672a4aa4
22 changed files with 116 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
nezha-fronted/src/assets/css/common.scss
View File

@@ -521,6 +521,11 @@ textarea {
align-items: center;
transform: scale(0.95);
}
i.nz-icon-override{
cursor: pointer;
}
.is-disabled{
color: $--color-text-disabled !important;
}
@@ -712,3 +717,16 @@ textarea {
text-overflow: ellipsis;
overflow: hidden;
}
.el-table{
.num-cursor{
cursor: pointer;
}
}
.bottom-data-list{
.el-table{
.num-cursor{
cursor: default;
}
}
}

1
nezha-fronted/src/assets/css/components/common/alert/alertDaysInfo.scss
View File

@@ -9,7 +9,6 @@
margin-right: 3px;
border-radius: 2px;
background-color:$--color-success;
cursor: pointer;
position: relative;
}
}

1
nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss
View File

@@ -365,6 +365,7 @@
line-height: 24px;
color: $--color-primary;
box-sizing: border-box;
cursor: pointer;
}
.mb10 {

1
nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
View File

@@ -191,6 +191,7 @@
text-align: center;
margin-bottom: 10px;
padding: 3px 10px;
cursor: pointer;
}
.prev-mapping-icon{
font-size: 16px;

1
nezha-fronted/src/assets/css/components/common/rightBox/editEndpointBoxNew.scss
View File

@@ -183,6 +183,7 @@
background: $--background-color-copy;
border: 1px solid $--span-nz-icon-border-color;
color: $--nz-icon-color;
cursor: pointer;
}
#module-box-relabel .vue-tags-input{
max-width: unset;

1
nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
View File

@@ -195,6 +195,7 @@
background: $--background-color-copy;
border: 1px solid $--span-nz-icon-border-color;
color: $--nz-icon-color;
cursor: pointer;
}
#module-box-relabel .vue-tags-input{
max-width: unset;

3
nezha-fronted/src/assets/css/components/common/table/settings/endpointTable.scss
View File

@@ -30,9 +30,6 @@
.inline-block {
display: inline-block;
}
.pointer {
cursor: pointer;
}
.endpoint-cell-left {
margin-right: 5px;
}

22
nezha-fronted/src/assets/css/components/common/table/settings/projectTable.scss
View File

@@ -1,22 +0,0 @@
.project-table {
.module-num{
font-size: 14px;
font-weight: 400;
cursor: pointer;
padding: 0 3px;
.nz-icon-overview-module{
color: rgb(122, 208, 188)
}
}
.alert-num{
padding: 0 3px;
cursor: pointer;
border-radius: 2px;
}
.colorEF7458{
color: #EF7458;
}
.color23BF9A{
color: #23BF9A;
}
}

3
nezha-fronted/src/assets/css/components/common/table/settings/userTable.scss
View File

@@ -40,7 +40,4 @@
color: #38cc20;
}
}
.endpoint-num, .alert-num{
cursor: pointer;
}
}

2
nezha-fronted/src/assets/css/components/common/timePicker.scss
View File

@@ -130,7 +130,7 @@
border-radius: 2px;
line-height: 30px;
transition: width .3s;
cursor: pointer;
.cn-icon {
font-size: 14px;
}

18
nezha-fronted/src/components/common/alert/alertLabel.vue
View File

@@ -321,7 +321,6 @@
<div class="alert-label-title">{{ $t("overall.module") }}</div>
<div class="alert-label-value">
<i
style="cursor: pointer"
class="nz-icon nz-icon-overview-module monitorColor"
/>&nbsp;
<span>{{
@@ -431,7 +430,6 @@
<div class="alert-label-title">{{ $t("overall.module") }}</div>
<div class="alert-label-value">
<i
style="cursor: pointer"
class="nz-icon nz-icon-overview-module monitorColor"
/>&nbsp;
<span>{{
@@ -494,18 +492,16 @@
{{ $t("overall.metric") }}
</span>
<span
v-if="alertLabelData && alertLabelData.configs[0].state === 0"
v-if="alertLabelData && alertLabelData.configs && alertLabelData.configs[0].state === 0"
>
<span class="active-icon red-bg inline-block"></span>
</span>
<span
v-else-if="
alertLabelData && alertLabelData.configs[0].state === 1
"
v-else-if="alertLabelData && alertLabelData.configs && alertLabelData.configs[0].state === 1"
>
<span class="active-icon green-bg inline-block"></span>
</span>
<span v-else-if="alertLabelData && alertLabelData.configs[0].state">
<span v-else-if="alertLabelData && alertLabelData.configs && alertLabelData.configs[0].state">
<span class="active-icon gray-bg inline-block"></span>
</span>
</span>
@@ -515,18 +511,16 @@
{{ $t("overall.logs") }}
</span>
<span
v-if="alertLabelData && alertLabelData.configs[1].state === 0"
v-if="alertLabelData && alertLabelData.configs && alertLabelData.configs[1].state === 0"
>
<span class="active-icon red-bg inline-block"></span>
</span>
<span
v-else-if="
alertLabelData && alertLabelData.configs[1].state === 1
"
v-else-if="alertLabelData && alertLabelData.configs && alertLabelData.configs[1].state === 1"
>
<span class="active-icon green-bg inline-block"></span>
</span>
<span v-else-if="alertLabelData && alertLabelData.configs[1].state">
<span v-else-if="alertLabelData && alertLabelData.configs && alertLabelData.configs[1].state">
<span class="active-icon gray-bg inline-block"></span>
</span>
</span>

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

@@ -77,7 +77,7 @@
<!-- {{priority.name}} {{position.operator || '>'}} {{priority.value || '-'}}-->
<!-- </div>-->
<!-- </div>-->
<div style="cursor: pointer" v-else-if="item.key === 'alertNum'">
<div v-else-if="item.key === 'alertNum'">
<i :class="Number(getPathContent(item.key)) ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('overall.active')}})</div>

2
nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
View File

@@ -43,7 +43,7 @@
<i class="nz-icon nz-icon-circle" :style="{color:scope.row[item.prop].color,'font-size':'12px','margin-right':'5px'}"></i> {{scope.row[item.prop].name}}
</span>
<template v-else-if="item.prop === 'alertNum'">
<span style="cursor: pointer" @click="queryMessage(scope.row)">
<span class="num-cursor" @click="queryMessage(scope.row)">
<i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
<div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}">
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('overall.active')}})</div>

2
nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
View File

@@ -51,7 +51,7 @@
</template>
<template v-else-if="item.prop === 'alertNum'">
<span
style="cursor: pointer"
class="num-cursor"
@click="$emit('showBottomBox', 'alertMessageTab', scope.row)"
>
<i

8
nezha-fronted/src/components/common/table/asset/assetTable.vue
View File

@@ -60,11 +60,14 @@
<template v-else-if="item.prop === 'type'">{{scope.row.type ? scope.row.type.name : '-'}}</template>
<template v-else-if="item.prop === 'state'">{{scope.row.state ? scope.row.state.name : '-'}}</template>
<template v-else-if="item.prop === 'endpointNum'">
<span style="cursor: pointer" @click.stop="$emit('showBottomBox', 'endpointTab', scope.row)" @dblclick.stop=""><i class="nz-icon nz-icon-overview-endpoint monitorColor"></i> <span>{{scope.row.endpointNum ? scope.row.endpointNum : 0}}</span></span>
<span class="num-cursor" @click.stop="$emit('showBottomBox', 'endpointTab', scope.row)" @dblclick.stop="">
<i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>
<span>{{scope.row.endpointNum ? scope.row.endpointNum : 0}}</span>
</span>
</template>
<template v-else-if="item.prop === 'alertNum'">
<!-- v-my-loading:ldsFacebook="scope.row.trendLoading" -->
<span style="cursor: pointer" @click.stop="$emit('showBottomBox', 'alertMessageTab', scope.row)" @dblclick.stop="">
<span class="num-cursor" @click.stop="$emit('showBottomBox', 'alertMessageTab', scope.row)" @dblclick.stop="">
<i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
<div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}">
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('overall.active')}})</div>
@@ -96,7 +99,6 @@
<template v-else-if="item.prop === 'parent'">
<span
v-if="scope.row.parent"
style="cursor: pointer"
@mouseenter="labelHover(scope.row, 'asset', true, false, $event)"
@mouseleave="labelHover(scope.row, 'asset', false, false)">
{{scope.row.parent.name}}

6
nezha-fronted/src/components/common/table/settings/dcTable.vue
View File

@@ -63,13 +63,13 @@
<template v-else>-</template>
</template>
<template v-else-if="item.prop === 'assetNum'">
<span style="cursor: pointer" class="asset-num" @click.stop="showBottomBox('asset', scope.row)" @dblclick.stop="">
<span class="num-cursor" @click.stop="showBottomBox('asset', scope.row)" @dblclick.stop="">
<i class="nz-icon nz-icon-overview-project monitorColor" :class="scope.row[item.prop]>0?'color23BF9A':'color23BF9A'"/>
{{scope.row[item.prop]}}
</span>
</template>
<template v-else-if="item.prop === 'alertNum'">
<span style="cursor: pointer" @click.stop="$emit('showBottomBox', 'alertMessageTab', scope.row)" @dblclick.stop="">
<span class="num-cursor" @click.stop="$emit('showBottomBox', 'alertMessageTab', scope.row)" @dblclick.stop="">
<i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
<div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}">
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('overall.active')}})</div>
@@ -86,7 +86,7 @@
</template>
<template v-else-if="item.prop === 'cabinetNum'">
<span style="cursor: pointer" class="cabinet-num" @click.stop="showBottomBox('cabinet', scope.row)" @dblclick.stop="">
<span class="num-cursor" @click.stop="showBottomBox('cabinet', scope.row)" @dblclick.stop="">
<i class="nz-icon nz-icon-cabinet monitorColor" :class="scope.row[item.prop]>0?'color23BF9A':'colorEF7458'"/>
{{scope.row[item.prop]}}
</span>

16
nezha-fronted/src/components/common/table/settings/endpointTable.vue
View File

@@ -49,7 +49,7 @@
</template>
<template v-else-if="item.prop === 'project'">
<div class="document-copy-block">
<span class="pointer document-copy-text"
<span class="document-copy-text"
@mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false,true)">
{{scope.row[item.prop].name}}
@@ -59,10 +59,10 @@
</template>
<template v-else-if="item.prop === 'module'">
<div class="document-copy-block">
<span class="pointer document-copy-text"
<span class="document-copy-text"
@mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false,true)">
<i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>
<i class="nz-icon nz-icon-overview-module monitorColor"/>
{{scope.row[item.prop].name}}
</span>
<i v-if="scope.row[item.prop].name" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(scope.row[item.prop].name)" :title="$t('overall.copyText')"></i>
@@ -71,7 +71,7 @@
<template v-else-if="item.prop === 'asset'">
<div class="document-copy-block">
<span
class="pointer document-copy-text"
class="document-copy-text"
@mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false,true)">
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>
@@ -81,7 +81,7 @@
</div>
</template>
<template v-else-if="item.prop === 'alerts'">
<span style="cursor: pointer" @click.stop="showBottomBox('endpointAlertMessage', scope.row)" @dblclick.stop="">
<span class="num-cursor" @click.stop="showBottomBox('endpointAlertMessage', scope.row)" @dblclick.stop="">
<i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
<div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}">
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('overall.active')}})</div>
@@ -112,7 +112,8 @@
<template v-else-if="item.prop === 'state'">
<!-- metrics -->
<span style="width: auto;display: inline-block;cursor: pointer"
<span
style="width: auto;display: inline-block"
@mouseenter="labelHoverConfigs(scope.row, 0, true, $event)"
@mouseleave="labelHoverConfigs(scope.row, 0, false, $event)"
>
@@ -133,7 +134,8 @@
</div>
</nz-tooltip>
<!-- logs -->
<span style="width: auto;display: inline-block;cursor: pointer"
<span
style="width: auto;display: inline-block"
@mouseenter="labelHoverConfigs(scope.row, 1, true, $event)"
@mouseleave="labelHoverConfigs(scope.row, 1, false, $event)">
<span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('dashboard.dashboard.chartForm.typeVal.log.label')}} </span>

2
nezha-fronted/src/components/common/table/settings/modelTable.vue
View File

@@ -69,7 +69,7 @@
</template>
<span v-else-if="item.prop === 'createTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
<template v-else-if="item.prop === 'assetNum'">
<span style="cursor: pointer" class="endpoint-num" @click.stop="showBottomBox('asset', scope.row)" @dblclick.stop="">
<span class="num-cursor" @click.stop="showBottomBox('asset', scope.row)" @dblclick.stop="">
<i class="nz-icon nz-icon-overview-project monitorColor" :class="scope.row[item.prop]>0?'color23BF9A':'color23BF9A'"/>
{{scope.row[item.prop]}}
</span>

8
nezha-fronted/src/components/common/table/settings/moduleTable.vue
View File

@@ -1,5 +1,5 @@
<template>
<div style="">
<div style="height: 100%">
<el-table
id="userTable"
ref="dataTable"
@@ -50,7 +50,7 @@
</template>
<template v-else-if="item.prop === 'project'">
<div class="document-copy-block">
<span class="pointer document-copy-text"
<span class="document-copy-text"
@mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false,true)">
{{scope.row[item.prop].name}}
@@ -59,13 +59,13 @@
</div>
</template>
<template v-else-if="item.prop === 'endpointNum'">
<span class="endpoint-num" @click.stop="showBottomBox('endpoint', scope.row)" @dblclick.stop="">
<span class="num-cursor" @click.stop="showBottomBox('endpoint', scope.row)" @dblclick.stop="">
<i class="nz-icon nz-icon-overview-endpoint monitorColor"/>
{{scope.row[item.prop]}}
</span>
</template>
<template v-else-if="item.prop === 'alertNum'">
<span style="cursor: pointer" @click.stop="showBottomBox('moduleAlertMessage', scope.row)" @dblclick.stop="">
<span class="num-cursor" @click.stop="showBottomBox('moduleAlertMessage', scope.row)" @dblclick.stop="">
<i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
<div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}">
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('overall.active')}})</div>

8
nezha-fronted/src/components/common/table/settings/projectTable.vue
View File

@@ -46,20 +46,19 @@
</div>
</template>
<template v-else-if="item.prop === 'moduleNum'" >
<span class="module-num" @click="jumpModule(scope.row)">
<span class="num-cursor" @click="jumpModule(scope.row)">
<i class="nz-icon nz-icon-overview-module monitorColor"/>
{{scope.row[item.prop]}}
</span>
</template>
<template v-else-if="item.prop === 'endpointNum'">
<span style="cursor: pointer" class="endpoint-num" @click="jumpEndpoint(scope.row)" >
<span class="num-cursor" @click="jumpEndpoint(scope.row)" >
<i class="nz-icon nz-icon-overview-endpoint monitorColor"/>
{{scope.row[item.prop]}}
</span>
</template>
<template v-else-if="item.prop === 'alertNum'">
<span class="alert-num">
<span style="cursor: pointer" @click="jumpAlertMessage(scope.row)">
<span class="num-cursor" @click="jumpAlertMessage(scope.row)">
<i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
<div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}">
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('overall.active')}})</div>
@@ -73,7 +72,6 @@
:alertDaysData="scope.row.alertDaysData"
/>
</span>
</span>
</template>
<span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
<span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>

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

@@ -5,7 +5,6 @@
class="calendar"
v-clickoutside="changeDropdownFlag"
>
<div @click="showDropdown(true)" class="date-range-text">
<div class="calendar-popover-text">
<i class="nz-icon nz-icon-time"></i>
@@ -26,7 +25,7 @@
</el-tooltip>
<!-- <div class="time-no-data">{{ showTime.text }}</div> -->
</div>
<div class="calendar-popover-text" style="cursor:pointer">
<div class="calendar-popover-text">
<i class="el-icon-arrow-down"></i>
</div>
</div>
@@ -60,7 +59,7 @@
<div class="content-title">{{$t('dashboard.dashboard.chartForm.valMapping.from')}}</div>
<div tabindex="1" class="content-input" :class="oldSearchTimeError[0] ? 'input-error' : ''">
<el-input @focus="searchTimeValue = oldSearchTime[0]" v-model="oldSearchTime[0]" @change="dateInputChange('start',oldSearchTime[0])" size="mini"> </el-input>
<div @click="myDatePickerShow()" class="nz-icon-box">
<div @click="myDatePickerShow()" class="nz-icon-box" style="cursor:pointer">
<i class="nz-icon nz-icon-date"/>
</div>
<div class="input-hint">{{inputError}}</div>
@@ -68,7 +67,7 @@
<div class="content-title">{{$t('dashboard.dashboard.to')}}</div>
<div tabindex="2" class="content-input" :class="oldSearchTimeError[1] ? 'input-error' : ''">
<el-input @focus="searchTimeValue = oldSearchTime[1]" v-model="oldSearchTime[1]" @change="dateInputChange('end',oldSearchTime[1])" size="mini"> </el-input>
<div @click="myDatePickerShow()" class="nz-icon-box">
<div @click="myDatePickerShow()" class="nz-icon-box" style="cursor:pointer">
<i class="nz-icon nz-icon-date"/>
</div>
<div class="input-hint">{{$t('date.formatError')}}</div>

2
nezha-fronted/src/components/page/alert/nzAlertTag.vue
View File

@@ -1,5 +1,5 @@
<template>
<span class="nz-alert-tag" :class="['nz-alert-tag_' + type]" :style="{cursor: cursorPoint ? 'pointer' : 'default'}" @click="$emit('click')">
<span class="nz-alert-tag" :class="['nz-alert-tag_' + type]" :style="{cursor: cursorPoint ? 'default' : 'default'}" @click="$emit('click')">
<span class="nz-alert-tag__label"> {{label=='dc'?'datacenter':label}}</span>
<span class="nz-alert-tag__content"><span v-if="!!regex"> ~ </span> <slot></slot></span>
</span>