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

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

@@ -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;
   }
 

nezha-fronted/src/components/page/tool/ping.vue

@@ -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="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>{{$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>
 

nezha-fronted/src/components/page/tool/trace.vue

@@ -3,70 +3,77 @@
       ref="dataList"
       :layout="[]"
       :from="fromRoute.trace"
+      class="radar-box"
     >
     <template v-slot:top-tool-left>
-      <vue-tags-input
+        <div class="tools-header">
-        class="ipInput"
+          <div class="tools-header-left">
-        v-model="ip"
+            <span>{{$t('config.operationlog.ip')}}</span>
-        :placeholder="$t('overall.placeHolder')+' IP'"
+            <vue-tags-input
-        :add-from-paste="false"
+              class="ipInput"
-        :tags="tags"
+              v-model="ip"
-        @tags-changed="newTags => tags = newTags"
+              :placeholder="$t('overall.placeHolder')+' IP'"
-        @before-adding-tag="value => beforeAddTag(value)"
+              :add-from-paste="false"
-        @adding-duplicate="value => addDuplicate(value)"
+              :tags="tags"
-      />
+              @tags-changed="newTags => tags = newTags"
-      <el-popover
+              @before-adding-tag="value => beforeAddTag(value)"
-        placement="bottom"
+              @adding-duplicate="value => addDuplicate(value)"
-        width="220"
+            />
-        trigger="manual"
+          </div>
-        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>
-          </el-form-item>
-          <el-form-item prop="maxHops" style="margin-bottom:0px">
-            <div class="pop-tit">{{$t('trace.maxHops')}}</div>
-            <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>
-            <div class="wrap" style="height:32px">
-              <el-input v-model.number="ruleForm.timeout" placeholder="" >
-                <template slot="append">{{$t('config.system.basic.second')}}</template>
-              </el-input>
-            </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>
-        </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>
-    </template>
 
+          <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: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" :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>
+                  </el-input>
+                </div>
+              </el-form-item>
+            </el-form>
+          </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-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"