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

NEZ-1962 fix：黑色主题下的样式问题 修改

Browse Source
This commit is contained in:
zhangyu
2022-06-22 16:34:05 +08:00
parent 731bcd8ef0
commit bf7b5f0bb3
11 changed files with 53 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -434,3 +434,6 @@ input, textarea {
font-weight: 600;
}
}
.is-disabled{
color: $--color-text-disabled !important;
}

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

@@ -297,7 +297,7 @@
outline: none;
i {
font-size: 14px;
color: $--color-text-disabled;
color: $--color-text-label;
}
}
.table-operation-item.table-operation-item--disable:hover {

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

@@ -496,6 +496,7 @@
}
.from-project{
padding: 0px 10px 0 0 !important;
background: $--background-color-empty !important;
.nz-table-list{
padding: 0;
box-sizing: content-box;

1
nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss
View File

@@ -124,6 +124,7 @@
width: 75%;
border-left: 1px solid $--border-color-light;
word-break: break-all;
color: $--color-text-secondary;
}
.mib-browser-detail-row:not(:last-of-type) {
border-bottom: 1px solid $--border-color-light;

2
nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss
View File

@@ -114,7 +114,7 @@
top: 0px;
}
.topology-box{
width: 100%;
width: calc(100% - 2px);
height: 242px;
border: 1px solid $--border-color-light;
border-radius: 2px;

2
nezha-fronted/src/assets/css/themes/theme-dark.scss
View File

@@ -182,7 +182,7 @@ $--overview-project-icon-color: $--time-picker-hover-color;
$--overview-module-icon-color: $--time-picker-hover-color;
$--overview-endpoint-icon-color: $--time-picker-hover-color;
$--overview-alert-icon-color: $--time-picker-hover-color;
$--overview-disabled-icon-color: $--color-text-disabled;
$--overview-disabled-icon-color: $--color-text-label;
$--overview-icon-color: $--color-text-primary;
// background
$--overview-module-icon-background-color: #5F80D5;

14
nezha-fronted/src/assets/css/themes/theme-light.scss
View File

@@ -40,7 +40,7 @@ $--color-text-secondary: #999998;
// 链接字色
$--color-text-link: #3C92F1;
// 禁用字色
$--color-text-disabled: #FFFFFF;
$--color-text-disabled: #c0c4cc;
// 标签内白色
$--color-text-label: #FFFFFF;
@@ -159,7 +159,7 @@ $--picker-page-background-color: $--background-color-empty;
$--picker-page-border-color: $--select-page-border-color;
$--picker-page-btn-color: $--color-primary;
$--picker-page-btn-border-color: $--color-primary;
$--picker-page-btn-background-color: $--color-text-disabled;
$--picker-page-btn-background-color: $--color-text-label;
// icon 字色
$--nz-icon-color: $--color-primary; //icon
@@ -167,7 +167,7 @@ $--span-nz-icon-border-color: $--asset-label-btn-border-color;
// value
$--value-background-color: #5C6BC0;
$--value-color: $--color-text-disabled;
$--value-color: $--color-text-label;
$--value-input-background-color: $--value-color;
// time picker
@@ -218,26 +218,26 @@ $--export-span-background-color: $--background-color-base;
$--switch-background-color: #dcdfe6;
/* project */
$--project-input-background-color: $--color-text-disabled;
$--project-input-background-color: $--color-text-label;
/* alert rule */
$--alert-rule-background-color: #f5f5f5;
$--alert-rule-color: $--overview-icon-color;
/* webSSH */
$--web-ssh-background-color: $--color-text-disabled;
$--web-ssh-background-color: $--color-text-label;
$--web-ssh-border-bottom-color: transparent;
/* 图表弹框 */
$--chart-background-color: #dde4ed;
$--chart-border-color: $--color-text-disabled;
$--chart-border-color: $--color-text-label;
/* 13.panel */
$--chart-title-hover-background-color: $--background-color-1;
$--chart-box-border-color: $--border-color-light;
/* 14.popover */
$--popover-background-color: $--color-text-disabled;
$--popover-background-color: $--color-text-label;
/* 15.侧滑 */
$--right-box-shadow: -3px 0 8px -3px #ccc;

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

@@ -5,7 +5,7 @@
<template>
<div class="project-box list-page" v-my-loading="topologyLoading">
<div class="main-list" style="overflow: hidden">
<div class="main-container" :class="fromOverView?'from-overview':'from-project'" style="background: #fff">
<div class="main-container" :class="fromOverView?'from-overview':'from-project'">
<div v-if="(editTopologyFlag || isPreview)&&!fromChart" class="edit-topologyLine top-tools" style="padding-left: 20px;width: calc(100% - 20px);display: inline-block">
<!--工具栏-->
<span v-if="!isPreview" class="project-topology-tool">

49
nezha-fronted/src/components/common/project/L5/CanvasProps.vue
View File

@@ -183,7 +183,7 @@
</el-form-item>
</el-row>
<transition name="el-zoom-in-top">
<div v-show="selection.pen.data.tooltipShow" class="tooltip-box sub-box">
<div v-show="selection.pen.data.tooltipShow" class="sub-box">
<!--title-->
<el-form-item :label="$t('project.topology.title')" class="full-form-item" prop="type">
<el-input v-model="selection.pen.data.chartTitle" class="input" size="small"></el-input>
@@ -468,7 +468,7 @@
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1">
<g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
<path
:d="penDash.find((item,i)=>i==(selection.pen.dash?selection.pen.dash:0)).d"
:stroke-dasharray="penDash.find((item,i)=>i==(selection.pen.dash?selection.pen.dash:0))['stroke-dasharray']">
@@ -480,7 +480,7 @@
<el-option v-for="(item,index) in penDash" :value="index" :key="index">
<div class="icon-item">
<svg>
<g fill="none" :stroke="(selection.pen.dash==index)?'#ee9d3f':'black'" stroke-width="1">
<g fill="none" :stroke="(selection.pen.dash==index)?'#ee9d3f':item.strokeColor" stroke-width="1">
<path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
</g>
</svg>
@@ -498,7 +498,7 @@
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1">
<g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
<path
:d="penLineType.find((item,i)=>item.name==selection.pen.name).d"
>
@@ -510,7 +510,7 @@
<el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
<div class="icon-item">
<svg>
<g fill="none" :stroke="(selection.pen.name==item.name)?'#ee9d3f':'black'" stroke-width="1">
<g fill="none" :stroke="(selection.pen.name==item.name)?'#ee9d3f':item.strokeColor" stroke-width="1">
<path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
</g>
</svg>
@@ -528,7 +528,7 @@
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
<g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
:key="index" v-if="selection.pen.fromArrow==item.name">
<path :d="item.d"></path>
<polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
@@ -542,7 +542,7 @@
<el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
<div class="icon-item">
<svg>
<g fill="none" :stroke="(selection.pen.fromArrow==item.name)?'#ee9d3f':'black'"
<g fill="none" :stroke="(selection.pen.fromArrow==item.name)?'#ee9d3f':item.strokeColor"
stroke-width="1">
<path :d="item.d"></path>
<polygon
@@ -577,7 +577,7 @@
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
<g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
:key="index" v-if="selection.pen.toArrow==item.name">
<path :d="item.d"></path>
<polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
@@ -591,7 +591,7 @@
<el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
<div class="icon-item">
<svg>
<g fill="none" :stroke="(selection.pen.toArrow==item.name)?'#ee9d3f':'black'"
<g fill="none" :stroke="(selection.pen.toArrow==item.name)?'#ee9d3f':item.strokeColor"
stroke-width="1">
<path :d="item.d"></path>
<polygon
@@ -1112,7 +1112,9 @@ const rz = {
export default {
// pen.type 0为node 1位line
data () {
const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
return {
theme: theme,
expressions: [],
chartTypeList: [
{
@@ -1264,26 +1266,28 @@ export default {
}
],
penDash: [
{ d: 'M5 14 l85 0', 'stroke-dasharray': '' },
{ d: 'M5 14 l85 0', 'stroke-dasharray': '5,5' },
{ d: 'M5 14 l85 0', 'stroke-dasharray': '10,10' },
{ d: 'M5 14 l85 0', 'stroke-dasharray': '10,10,2,10' }
{ d: 'M5 14 l85 0', 'stroke-dasharray': '', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
{ d: 'M5 14 l85 0', 'stroke-dasharray': '5,5', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
{ d: 'M5 14 l85 0', 'stroke-dasharray': '10,10', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
{ d: 'M5 14 l85 0', 'stroke-dasharray': '10,10,2,10', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' }
],
penLineType: [
{ d: 'M5 14 a100,50 0 0,1 85,0', 'stroke-dasharray': '', name: 'curve' },
{ d: 'M5 8 l40 0 l0 12 l40 0', 'stroke-dasharray': '', name: 'polyline' },
{ d: 'M5 14 l85 0', 'stroke-dasharray': '', name: 'line' }
{ d: 'M5 14 a100,50 0 0,1 85,0', 'stroke-dasharray': '', name: 'curve', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
{ d: 'M5 8 l40 0 l0 12 l40 0', 'stroke-dasharray': '', name: 'polyline', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
{ d: 'M5 14 l85 0', 'stroke-dasharray': '', name: 'line', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' }
// {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
],
penLineFromTOArrow: [
{ d: 'M5 14 l85 0', points: '', fill: '', stroke: '', 'stroke-width': '', name: '' },
{ d: 'M5 14 l85 0', points: '', fill: '', stroke: '', 'stroke-width': '', name: '', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
{
d: 'M5 14 l85 0',
points: '5 14,20 9,20 19',
fill: '#000000',
stroke: '',
'stroke-width': '',
name: 'triangleSolid'
name: 'triangleSolid',
strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
},
{
d: 'M5 14 l85 0',
@@ -1291,7 +1295,8 @@ export default {
fill: '#ffffff',
stroke: '#000000',
'stroke-width': '1',
name: 'triangle'
name: 'triangle',
strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
},
{
d: 'M5 14 l85 0',
@@ -1301,7 +1306,8 @@ export default {
cx: '10',
cy: '14',
r: '5',
name: 'circleSolid'
name: 'circleSolid',
strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
},
{
d: 'M5 14 l85 0',
@@ -1311,7 +1317,8 @@ export default {
cx: '10',
cy: '14',
r: '5',
name: 'circle'
name: 'circle',
strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
}
],
lineAnimateOptions: [

14
nezha-fronted/src/components/common/project/topologyL5.vue
View File

@@ -62,7 +62,7 @@
<div slot="prefix">
<div class="icon-item" style="width: 100%;padding: 0">
<svg>
<g fill="none" stroke="black" stroke-width="1">
<g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
<path
:d="penLineType.find((item,i)=>item.id==lineName).d"
>
@@ -75,7 +75,7 @@
<el-option v-for="(item,index) in penLineType" :value="item.id" :key="index">
<div class="icon-item" style="position: relative;width: 100%;padding: 0">
<svg>
<g fill="none" :stroke="(lineName==item.name)?'#ee9d3f':'black'" stroke-width="1">
<g fill="none" :stroke="(lineName==item.name)?'#ee9d3f': item.strokeColor " stroke-width="1">
<path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
</g>
</svg>
@@ -379,7 +379,9 @@ const canvasOptions = {
export default {
name: 'topologyL5',
data () {
const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
return {
theme,
title: this.$t('overall.uploadCustomPicture'),
objChange: false, // project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
chartDataInfo: {},
@@ -477,10 +479,10 @@ export default {
chartData: {},
chartGetData: [],
penLineType: [
{ d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve' },
{ d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline' },
{ d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line' }
// {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
{ d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve' , strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
{ d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline' , strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
{ d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line' , strokeColor: theme == 'light' ? 'black' : '#BEBEBE'}
// {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind', strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
],
lineName: 'curve',
cachesIndex: 0,

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

@@ -138,7 +138,7 @@
</div>
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
<el-dropdown-item v-if="!assetTab" v-has="'asset_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_connect'" :command="['cli', scope.row]" :disabled="!scope.row.authUsername"><i class="nz-icon nz-icon-cli"></i><span class="operation-dropdown-text">{{$t('dashboard.connect')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_connect'" :command="['cli', scope.row]" :disabled="!scope.row.authUsername"><i class="nz-icon nz-icon-cli"></i><span class="operation-dropdown-text">{{$t('config.system.terminal.terminal')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_add'" :command="['duplicate', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'asset']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>