From 92b6ef84bbef3873e927b97b8835210157eda813 Mon Sep 17 00:00:00 2001 From: zhangyu Date: Fri, 27 May 2022 14:01:57 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9Aping=20trance=20=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/common/rightBox/moduleBox.scss | 4 +- .../assets/css/components/page/tool/ping.scss | 43 ++++++---- .../css/components/page/tool/trace.scss | 43 ++++++---- .../src/assets/css/themes/theme-dark.scss | 2 + .../src/assets/css/themes/theme-light.scss | 3 +- .../src/components/page/tool/ping.vue | 84 ++++++++++++++++--- .../src/components/page/tool/trace.vue | 80 +++++++++++++++--- 7 files changed, 200 insertions(+), 59 deletions(-) diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss index b1ff04c08..e59d2918a 100644 --- a/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss +++ b/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss @@ -269,8 +269,8 @@ .ti-input { border: 1px solid $--border-color-light; .ti-tag.ti-valid { - background-color: $--value-background-color; - color: $--value-color; + background-color: $--label-background-color !important;; + color: $--color-text-primary !important;; } .ti-new-tag-input { color: $--color-text-regular !important; diff --git a/nezha-fronted/src/assets/css/components/page/tool/ping.scss b/nezha-fronted/src/assets/css/components/page/tool/ping.scss index f812586b8..02181328e 100644 --- a/nezha-fronted/src/assets/css/components/page/tool/ping.scss +++ b/nezha-fronted/src/assets/css/components/page/tool/ping.scss @@ -1,3 +1,7 @@ +.ping-popover.el-popover { + padding: 0; + margin-top: 5px; +} .ping{ .top-tool-left{ // align-items: center; @@ -20,8 +24,8 @@ border-radius: 2px; border: 1px solid $--button-icon-border-color !important; .ti-tag.ti-valid { - background-color: $--value-background-color; - color: $--value-color; + background-color: $--label-background-color !important;; + color: $--color-text-primary !important;; } .ti-new-tag-input { color: $--color-text-regular !important; @@ -35,20 +39,31 @@ } .ti-input:hover{} } - .choose{ - width: 50px !important; - height: 36px !important; - line-height: 36px !important; - padding: 0 !important; - border-radius: 2px 0px 0px 2px !important; - border-right: none !important; - span{ - display: flex; - align-content: center; - justify-content: center; + .choose-box { + overflow: hidden; + width: calc(100% - 7px); + height: 30px; + border: 1px solid $--border-color-light; + padding-left: 5px; + display: flex; + //align-items: center; + .nz-icon-arrow-down6{ + font-size: 12px; + color: $--color-text-secondary; } + } + .choose{ + width: auto; + height: 26px !important; + line-height: 30px !important; + padding: 2px 4px !important; + border-radius: 2px !important; + border-right: none !important; + background: $--label-background-color; + margin-right: 5px; + color: $--color-text-primary; i{ - font-size: 20px !important; + font-size: 14px !important; } } .btn{ diff --git a/nezha-fronted/src/assets/css/components/page/tool/trace.scss b/nezha-fronted/src/assets/css/components/page/tool/trace.scss index e717af1f8..9ed19e8ea 100644 --- a/nezha-fronted/src/assets/css/components/page/tool/trace.scss +++ b/nezha-fronted/src/assets/css/components/page/tool/trace.scss @@ -19,8 +19,8 @@ border-radius: 2px; border: 1px solid $--button-icon-border-color !important; .ti-tag.ti-valid { - background-color: $--value-background-color; - color: $--value-color; + background-color: $--label-background-color !important;; + color: $--color-text-primary !important;; } .ti-new-tag-input { color: $--color-text-regular !important; @@ -33,20 +33,31 @@ } .ti-input:hover{} } - .choose{ - width: 50px !important; - height: 36px !important; - line-height: 36px !important; - padding: 0 !important; - border-radius: 2px 0px 0px 2px !important; - border-right: none !important; - span{ - display: flex; - align-content: center; - justify-content: center; + .choose-box { + overflow: hidden; + width: calc(100% - 7px); + height: 30px; + border: 1px solid $--border-color-light; + padding-left: 5px; + display: flex; + //align-items: center; + .nz-icon-arrow-down6{ + font-size: 12px; + color: $--color-text-secondary; } + } + .choose{ + width: auto; + height: 26px !important; + line-height: 30px !important; + padding: 2px 4px !important; + border-radius: 2px !important; + border-right: none !important; + background: $--label-background-color; + margin-right: 5px; + color: $--color-text-primary; i{ - font-size: 20px !important; + font-size: 14px !important; } } .btn{ @@ -103,7 +114,7 @@ } .nz-icon-edit{ font-size: 26px; - } + } .el-icon-more{ font-size: 22px; } @@ -163,4 +174,4 @@ .pop-list{ max-height: 144px; overflow-y: auto; -} \ No newline at end of file +} diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss index 86a16ff18..bd66a71b8 100644 --- a/nezha-fronted/src/assets/css/themes/theme-dark.scss +++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss @@ -252,6 +252,8 @@ $--right-box-sub-title-border-color: $--border-color-light; /* 16.tooltip */ $--tooltip-background-color: #222329; $--tooltip-border-color: rgba(112,116,122,0.6); +/* 17.label*/ +$--label-background-color: #18171D; /*** themes/common.scss是与主题切换无关的变量 ***/ @import './src/common/var.scss'; diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss index 7fe14a84c..e5a1e8949 100644 --- a/nezha-fronted/src/assets/css/themes/theme-light.scss +++ b/nezha-fronted/src/assets/css/themes/theme-light.scss @@ -247,7 +247,8 @@ $--right-box-sub-title-border-color: $--right-box-sub-title-background-color; /* 16.tooltip */ $--tooltip-background-color: #ffffff; $--tooltip-border-color: rgba(119,131,145,0.6); - +/* 17.label*/ +$--label-background-color: #D8d8d8; /*** themes/common.scss是与主题切换无关的变量 ***/ @import './src/common/var.scss'; diff --git a/nezha-fronted/src/components/page/tool/ping.vue b/nezha-fronted/src/components/page/tool/ping.vue index 9667a84c2..1089a23e5 100644 --- a/nezha-fronted/src/components/page/tool/ping.vue +++ b/nezha-fronted/src/components/page/tool/ping.vue @@ -25,14 +25,46 @@
- - - - + + + + + + + + + + +
    +
  • + {{$t('overall.all')}} +
    • +
      + +
    • + {{item.name}} +
      • +       +
    +
+ +
+
All
+
+ + {{item.name}} + +
+ +
+
@@ -78,10 +110,10 @@

{{$t('overall.placeHolder')}} IP

- - -

{{$t('ping.filter')}}

- + + + + Ping

Ping {{$t('config.terminallog.cmd.cmd')}}

@@ -156,7 +188,7 @@ export default { tableData: [], ruleForm: { // 超时时间 - timeout: '' + timeout: 30 }, formRules: { timeout: [{ validator: positiveInteger, trigger: 'blur' }] @@ -166,6 +198,22 @@ export default { created () { this.getDataCenter() }, + mounted () { + const tiInput = document.getElementsByClassName('ti-input')[0] + tiInput.addEventListener('click', (e) => { + const event = e || window.event + if (event && event.stopPropagation) { + event.stopPropagation() + } else { + event.cancelBubble = true + } + if (event.path[0].className === 'ti-input') { + const tiInputBox = document.getElementsByClassName('ti-new-tag-input')[0] + console.log(tiInputBox) + tiInputBox.focus() + } + }) + }, methods: { // 使用防抖是因为,防止标签输入框失去焦点校验和开始任务校验重复(连续两次message提示) validateHost: bus.debounce(function () { @@ -217,6 +265,16 @@ export default { this.checkAll = checkedCount === this.dataCenter.length this.isIndeterminate = checkedCount > 0 && checkedCount < this.dataCenter.length }, + // 删除选中 + removeCheckedItem (id, e) { + const event = e || window.event + if (event && event.stopPropagation) { + event.stopPropagation() + } else { + event.cancelBubble = true + } + this.checked = this.checked.filter(dcId => dcId !== id) + }, // 开始任务 startTask () { if (!this.flag) { diff --git a/nezha-fronted/src/components/page/tool/trace.vue b/nezha-fronted/src/components/page/tool/trace.vue index 2c3c67b47..a0ac50c1a 100644 --- a/nezha-fronted/src/components/page/tool/trace.vue +++ b/nezha-fronted/src/components/page/tool/trace.vue @@ -24,14 +24,46 @@
- - - - + + + + + + + + + + +
    +
  • + {{$t('overall.all')}} +
    • +
      + +
    • + {{item.name}} +
      • +       +
    +
+ +
+
All
+
+ + {{item.name}} + +
+ +
+
@@ -81,10 +113,6 @@

{{$t('overall.placeHolder')}}IP

- - -

{{$t('ping.filter')}}

- Trace

Trace {{$t('config.terminallog.cmd.cmd')}}

@@ -159,7 +187,7 @@ export default { // 最大跃点数 maxHops: '', // 超时时间 - timeout: '' + timeout: 30 }, formRules: { timeout: [{ validator: positiveInteger, trigger: 'blur' }], @@ -170,6 +198,22 @@ export default { created () { this.getDataCenter() }, + mounted () { + const tiInput = document.getElementsByClassName('ti-input')[0] + tiInput.addEventListener('click', (e) => { + const event = e || window.event + if (event && event.stopPropagation) { + event.stopPropagation() + } else { + event.cancelBubble = true + } + if (event.path[0].className === 'ti-input') { + const tiInputBox = document.getElementsByClassName('ti-new-tag-input')[0] + console.log(tiInputBox) + tiInputBox.focus() + } + }) + }, methods: { // 使用防抖是因为,防止标签输入框失去焦点校验和开始任务校验重复(连续两次message提示) validateHost: bus.debounce(function () { @@ -221,6 +265,16 @@ export default { this.checkAll = checkedCount === this.dataCenter.length this.isIndeterminate = checkedCount > 0 && checkedCount < this.dataCenter.length }, + // 删除选中 + removeCheckedItem (id, e) { + const event = e || window.event + if (event && event.stopPropagation) { + event.stopPropagation() + } else { + event.cancelBubble = true + } + this.checked = this.checked.filter(dcId => dcId !== id) + }, // 开始任务 startTask () { if (!this.flag) {