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

NEZ-1858 feat：样式调整 以及添加国际化

Browse Source
This commit is contained in:
zhangyu
2022-05-18 13:29:31 +08:00
parent 29924c4835
commit b31a1abbe0
3 changed files with 89 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
nezha-fronted/src/assets/css/components/page/tool/ping.scss
View File

@@ -188,7 +188,7 @@
display: block; display: block;
margin-right: 5px; margin-right: 5px;
font-size: 14px; font-size: 14px;
color: #666666; color: $--color-text-regular;
letter-spacing: 0; letter-spacing: 0;
text-align: right; text-align: right;
line-height: 30px; line-height: 30px;
@@ -197,11 +197,12 @@
.tools-header-left { .tools-header-left {
width: 360px; width: 360px;
display: flex; display: flex;
margin-left: 15px;
> span{ > span{
display: block; display: block;
margin-right: 5px; margin-right: 5px;
font-size: 14px; font-size: 14px;
color: #666666; color: $--color-text-regular;
letter-spacing: 0; letter-spacing: 0;
text-align: right; text-align: right;
line-height: 30px; line-height: 30px;
@@ -221,7 +222,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
.tools-header-right-title{ .tools-header-right-title{
color: #FA901C; color: $--color-primary;
} }
.right-content-text { .right-content-text {
font-size: 14px; font-size: 14px;
@@ -230,6 +231,9 @@
letter-spacing: 0; letter-spacing: 0;
margin-bottom: 10px; margin-bottom: 10px;
} }
.right-content-box{
width: 380px;
}
.tools-header-right-content{ .tools-header-right-content{
margin-left: 30px; margin-left: 30px;
} }
@@ -248,7 +252,7 @@
border-radius: 50%; border-radius: 50%;
border: 3px solid #FA901C; border: 3px solid $--color-primary;
overflow: hidden; overflow: hidden;
div { div {
@@ -271,7 +275,7 @@
border-radius: 50%; border-radius: 50%;
border: 1px solid #FA901C; border: 1px solid $--color-primary;
overflow: hidden; overflow: hidden;
} }
@@ -292,7 +296,7 @@
border-radius: 50%; border-radius: 50%;
border: 1px solid #FA901C; border: 1px solid $--color-primary;
overflow: hidden; overflow: hidden;
background: rgba(250,144,28, 0.2); background: rgba(250,144,28, 0.2);
@@ -301,7 +305,7 @@
content: ' '; content: ' ';
width: 100%; width: 100%;
height: 0; height: 0;
border-top: 1px solid #FA901C; border-top: 1px solid $--color-primary;
position: absolute; position: absolute;
left: 50%; left: 50%;
@@ -315,7 +319,7 @@
content: ' '; content: ' ';
width: 100%; width: 100%;
height: 0; height: 0;
border-top: 1px solid #FA901C; border-top: 1px solid $--color-primary;
position: absolute; position: absolute;
left: 50%; left: 50%;
@@ -355,7 +359,7 @@
height: 100%; height: 100%;
transform-origin: 0% 100%; transform-origin: 0% 100%;
transform: rotate(0deg) skewY(-22deg); transform: rotate(0deg) skewY(-22deg);
background: #FA901C; background: $--color-primary;
opacity: 0.3; opacity: 0.3;
} }
.sector:after{ .sector:after{
@@ -368,7 +372,7 @@
height: 100%; height: 100%;
transform-origin: 0% 100%; transform-origin: 0% 100%;
transform: rotate(18deg) skewY(-58deg); transform: rotate(18deg) skewY(-58deg);
background: #FA901C; background: $--color-primary;
opacity: 0.9; opacity: 0.9;
} }

14
nezha-fronted/src/components/page/tool/ping.vue
View File

@@ -8,7 +8,7 @@
<template v-slot:top-tool-left> <template v-slot:top-tool-left>
<div class="tools-header"> <div class="tools-header">
<div class="tools-header-left"> <div class="tools-header-left">
<span>Ip</span> <span>{{$t('config.operationlog.ip')}}</span>
<vue-tags-input <vue-tags-input
class="ipInput" class="ipInput"
style="height: 190px" style="height: 190px"
@@ -52,22 +52,22 @@
<div class="radar-line"></div> <div class="radar-line"></div>
</div> </div>
<div class="tools-header-right-content"> <div class="tools-header-right-content">
<div class="tools-header-right-title right-content-text">Statistics</div> <div class="tools-header-right-title right-content-text">{{$t('dashboard.panel.chartForm.statistics')}}</div>
<div class="right-content-text"> <div class="right-content-text right-content-box">
IP {{$t('config.operationlog.ip')}}
<span class="margin-l-5">{{$t('asset.total')}}:<span class="margin-l-10 margin-r-30">{{total}}</span></span> <span class="margin-l-5">{{$t('asset.total')}}:<span class="margin-l-10 margin-r-30">{{total}}</span></span>
<span>{{$t('ping.done')}}:<span class="margin-l-10 margin-r-30">{{done}}</span></span> <span>{{$t('ping.done')}}:<span class="margin-l-10 margin-r-30">{{done}}</span></span>
<span>{{$t('ping.progress')}}:<span class="margin-l-10 margin-r-30">{{process}}%</span></span> <span>{{$t('ping.progress')}}:<span class="margin-l-10 margin-r-30">{{process}}%</span></span>
</div> </div>
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-normal" v-if="!isStart" @click="startTask"> <el-button class="nz-btn nz-btn-size-normal nz-btn-style-normal" v-if="!isStart" @click="startTask">
Ping {{$t('asset.pingInfo')}}}
</el-button> </el-button>
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-normal" v-else @click="clearTask"> <el-button class="nz-btn nz-btn-size-normal nz-btn-style-normal" v-else @click="clearTask">
Stop {{$t('config.terminallog.stop')}}}
</el-button> </el-button>
</div> </div>
</div> </div>
<div class="tools-header-title">Configuration</div> <div class="tools-header-title">{{$t('project.endpoint.configs')}}}</div>
</div> </div>
</template> </template>

86
nezha-fronted/src/components/page/tool/trace.vue
View File

@@ -3,8 +3,12 @@
ref="dataList" ref="dataList"
:layout="[]" :layout="[]"
:from="fromRoute.trace" :from="fromRoute.trace"
class="radar-box"
> >
<template v-slot:top-tool-left> <template v-slot:top-tool-left>
<div class="tools-header">
<div class="tools-header-left">
<span>{{$t('config.operationlog.ip')}}</span>
<vue-tags-input <vue-tags-input
class="ipInput" class="ipInput"
v-model="ip" v-model="ip"
@@ -15,38 +19,26 @@
@before-adding-tag="value => beforeAddTag(value)" @before-adding-tag="value => beforeAddTag(value)"
@adding-duplicate="value => addDuplicate(value)" @adding-duplicate="value => addDuplicate(value)"
/> />
<el-popover </div>
placement="bottom"
width="220" <div class="tools-header-center">
trigger="manual" <el-form size="small" ref="ruleForm" :model="ruleForm" :rules="formRules" label-position="right" label-width="150px">
v-model="visible" <el-form-item style="margin-bottom:10px" :label="$t('ping.dcs')">
v-clickoutside="close" <el-select v-model="checked" multiple @change="checkedChange" >
popper-class="no-style-class" <el-option
> :key="item.id"
<el-form size="small" ref="ruleForm" label-position="top" :model="ruleForm" :rules="formRules"> v-for="item in dataCenter"
<el-form-item style="margin-bottom:0px"> :label="item.name"
<p class="pop-tit">{{$t('ping.dcs')}}</p> :value="item.id">
<ul class="pop-list-wrap"> </el-option>
<li class="el-dropdown-menu__item"> </el-select>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="checkAllChange">{{$t('overall.all')}}</el-checkbox>
</li>
<ul class="pop-list">
<el-checkbox-group v-model="checked" @change="checkedChange">
<li class="el-dropdown-menu__item" v-for="item in dataCenter" :key="item.id">
<el-checkbox :label="item.id">{{item.name}}</el-checkbox>
</li>
</el-checkbox-group>
</ul>
</ul>
</el-form-item> </el-form-item>
<el-form-item prop="maxHops" style="margin-bottom:0px"> <el-form-item prop="maxHops" style="margin-bottom:10px" :label="$t('trace.maxHops')">
<div class="pop-tit">{{$t('trace.maxHops')}}</div>
<div class="wrap" style="height:32px"> <div class="wrap" style="height:32px">
<el-input v-model.number="ruleForm.maxHops" placeholder=""></el-input> <el-input v-model.number="ruleForm.maxHops" placeholder=""></el-input>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item prop="timeout" style="margin-bottom:10px"> <el-form-item prop="timeout" style="margin-bottom:10px" :label="$t('ping.timeout')">
<div class="pop-tit">{{$t('ping.timeout')}}</div>
<div class="wrap" style="height:32px"> <div class="wrap" style="height:32px">
<el-input v-model.number="ruleForm.timeout" placeholder="" > <el-input v-model.number="ruleForm.timeout" placeholder="" >
<template slot="append">{{$t('config.system.basic.second')}}</template> <template slot="append">{{$t('config.system.basic.second')}}</template>
@@ -54,19 +46,34 @@
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-button slot="reference" class="top-tool-btn margin-l-10 choose" @click="triggerVisible"> </div>
<i class="el-icon-more"></i> <div class="tools-header-right">
<div class="radar">
<div class="first-circle"></div>
<div class="second-circle"></div>
<div class="third-circle"></div>
<div class="sector" :class="isStart?'active':''"></div>
<div class="radar-line"></div>
</div>
<div class="tools-header-right-content">
<div class="tools-header-right-title right-content-text">{{$t('dashboard.panel.chartForm.statistics')}}</div>
<div class="right-content-text right-content-box" >
{{$t('config.operationlog.ip')}}
<span class="margin-l-5">{{$t('asset.total')}}:<span class="margin-l-10 margin-r-30">{{total}}</span></span>
<span>{{$t('ping.done')}}:<span class="margin-l-10 margin-r-30">{{done}}</span></span>
<span>{{$t('ping.progress')}}:<span class="margin-l-10 margin-r-30">{{process}}%</span></span>
</div>
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-normal" v-if="!isStart" @click="startTask">
{{$t('ping.trance')}}
</el-button> </el-button>
</el-popover> <el-button class="nz-btn nz-btn-size-normal nz-btn-style-normal" v-else @click="clearTask">
{{$t('config.terminallog.stop')}}}
<el-button class="top-tool-btn btn" v-if="!isStart" @click="startTask">
<i class="el-icon-caret-right"></i>
</el-button>
<el-button class="top-tool-btn btn" v-else @click="clearTask">
<i class="quadrate"></i>
</el-button> </el-button>
</div>
</div>
<div class="tools-header-title">{{$t('project.endpoint.configs')}}}</div>
</div>
</template> </template>
<template v-slot:default> <template v-slot:default>
<!-- 初始展示的内容 ip输入框聚焦后消失 --> <!-- 初始展示的内容 ip输入框聚焦后消失 -->
<div class="empty" v-if="tid===undefined"> <div class="empty" v-if="tid===undefined">
@@ -87,11 +94,6 @@
</div> </div>
<!-- 存在任务id时展示表格 --> <!-- 存在任务id时展示表格 -->
<div class="data-wrap" v-show="tid!==undefined"> <div class="data-wrap" v-show="tid!==undefined">
<div class="data-top">
<span>{{$t('asset.total')}}:{{total}}</span>
<span>{{$t('ping.done')}}:{{done}}</span>
<span>{{$t('ping.progress')}}:{{process}}%</span>
</div>
<div class="data-bottom"> <div class="data-bottom">
<trace-table <trace-table
ref="dataTable" ref="dataTable"