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

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

@@ -8,7 +8,7 @@
<template v-slot:top-tool-left>
<div class="tools-header">
<div class="tools-header-left">
<span>Ip</span>
<span>{{$t('config.operationlog.ip')}}</span>
<vue-tags-input
class="ipInput"
style="height: 190px"
@@ -52,22 +52,22 @@
<div class="radar-line"></div>
</div>
<div class="tools-header-right-content">
<div class="tools-header-right-title right-content-text">Statistics</div>
<div class="right-content-text">
IP
<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">
Ping
{{$t('asset.pingInfo')}}}
</el-button>
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-normal" v-else @click="clearTask">
Stop
{{$t('config.terminallog.stop')}}}
</el-button>
</div>
</div>
<div class="tools-header-title">Configuration</div>
<div class="tools-header-title">{{$t('project.endpoint.configs')}}}</div>
</div>
</template>

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

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