NEZ-2721 feat：project topology 样式调整（30%）

2023-03-22 18:08:05 +08:00
parent 5531f48ebe
commit f66b796f8b
5 changed files with 98 additions and 30 deletions
--- a/nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss
+++ b/nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss
@@ -10,7 +10,7 @@
  .props-box {
    width: 500px;
    position: absolute;
-    height: calc(100% - 78px);
+    height: calc(100% - 64px);
    top: 61px;
    padding: 0 !important;
    box-sizing: border-box;
@@ -24,9 +24,12 @@
    display: inline-block;
    box-sizing: border-box;
    padding: 0 5px;
-    margin-bottom: 10px;
+    margin-bottom: 15px;
    .form-row-key{
-      margin-bottom: 5px;
+      margin-bottom: 10px;
+      font-size: 14px;
+      color: $--color-text-regular;
+      letter-spacing: 0;
    }
  }
  .special-meta2d-select {
@@ -101,25 +104,48 @@
    display: flex;
    justify-content: space-between;
    padding: 3px 10px;
+    .nz-icon-shuru {
+      display: none;
+    }
+    &:hover{
+      background: $--background-color-empty;
+      border: 1px solid $--border-select-color;
+      color: $--color-primary;
+      .nz-icon-shuru {
+        display: inline-block;
+      }
+    }
    &.is-active {
-      background: $--table-row-hover-background-color;
-      border: 1px solid $--table-row-hover-background-color;
+      background: $--background-color-empty;
+      border: 1px solid $--border-select-color;
      color: $--color-primary;
      .el-input__inner {
        color: $--color-primary;
      }
    }
    .hide-input {
+      display: flex;
+      .hide-input-nzName {
+        display: inline-block;
+        max-width: 260px;
+        flex-shrink: 0;
+        margin-left: 10px;
+        margin-right: 10px;
+      }
      .el-input__inner {
        border-color: transparent;
        height: 26px;
        line-height: 26px;
        padding: 0 10px;
+        padding-right: 108px;
      }
      .el-input__inner:focus {
-        border-color: $--border-color-base-focus;
+        border-color: $--border-select-color;
        color: $--color-text-regular;
      }
+      .el-input__suffix {
+        line-height: 26px;
+      }
    }
  }
  .promqlInput .el-cascader-menu{
@@ -227,4 +253,7 @@
      display: inline-block;
    }
  }
+  .thresholds-from-item {
+    margin-left: 10px;
+  }
 }
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -59,6 +59,8 @@ $--border-color-light-hover: lighten($--border-color-light, 10%);
 $--border-color-light-focus: lighten($--border-color-light, 20%);
 // 深色边框
 $--explore-border-color-bottom: #090909;
+// 选中边框
+$--border-select-color: #FBCF9F;

 /* 5.提示色 */
 // 正常绿色
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -59,6 +59,8 @@ $--border-color-light-hover: darken($--border-color-light, 10%);
 $--border-color-light-focus: darken($--border-color-light, 20%);
 // 深色边框
 $--explore-border-color-bottom: #DEDEDE;
+// 选中边框
+$--border-select-color: #FBCF9F;

 /* 5.提示色 */
 // 正常绿色(覆盖element-ui内置变量)
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue
@@ -54,11 +54,23 @@
                  <i v-if="item.type !== 1" class="nz-icon nz-icon-juxing" style="margin-right: 3px"/>
                  <i v-else class="nz-icon nz-icon-xiantiao" />
                  <el-input
+                    :ref="'hideInput' + index"
+                    v-if="editFlag[index]"
                    :title="item.nzName"
-                    style="width: 120px"
-                    @focus="focusName"
+                    style="width: 290px"
+                    @blur="blurName(index)"
+                    @keydown.enter.native="blurName(index)"
                    v-model="item.nzName"
-                    size="small"/>
+                    size="small"
+                  >
+                    <span slot="suffix">
+                      {{$t('terminal.confirm')}}
+                    </span>
+                  </el-input>
+                  <span class="hide-input-nzName text-ellipsis" v-if="!editFlag[index]">
+                    {{item.nzName}}
+                  </span>
+                  <i @click="changeEditFlag(index)" v-if="!editFlag[index]"  class="nz-icon nz-icon-shuru"/>
                </span>
              <span>
                  <span @click.stop="penChange(item, 'locked')" class="pen-tools-item" :title="!item.locked?$t('overall.locked'): $t('overall.unlocked')">
@@ -166,6 +178,7 @@ export default {
          icon: 'nz-icon-shuxiangfenbu'
        }
      ],
+      editFlag: []
    }
  },
  mounted () {
@@ -254,8 +267,19 @@ export default {
      this.bkImageId = image.id
      getTopology(this.meta2dId).setBackgroundImage(image.image)
    },
-    focusName (event) {
-      console.log(event)
+    blurName (index) {
+      this.editFlag[index] = false
+      this.$set(this.editFlag, index, false)
+      // console.log(event)
+    },
+    changeEditFlag (index) {
+      this.editFlag[index] = true
+      this.$set(this.editFlag, index, true)
+      this.$nextTick(() => {
+        if (this.$refs['hideInput' + index] && this.$refs['hideInput' + index][0]) {
+          this.$refs['hideInput' + index][0].focus()
+        }
+      })
    },
    onNodesAlign (value) {
      const pens = getTopology(this.meta2dId).store.active
@@ -310,6 +334,16 @@ export default {
      getTopology(this.meta2dId).render()
      bus.$emit('changeSelectPens', [])
    }
+  },
+  watch: {
+    elements: {
+      handler () {
+        this.editFlag = []
+        this.elements.forEach(() => {
+          this.editFlag.push(false)
+        })
+      }
+    }
  }
 }
 </script>
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
@@ -28,19 +28,20 @@
                @change="change('nzName')"></el-input>
            </div>
          </div>
-        </div>
-      </div>
-      <div v-if="!pen.type">
-        <div class="form-row-box">
-          <!--        Module  -->
-          <div class="form-row-title">
+          <div class="form-row-item">
+            <div class="form-row-key">
              {{$t('overall.module')}}
            </div>
-          <div v-show="elements.position" class="form-row-content">
+            <div class="form-row-value">
              <el-select v-model="pen.moduleId" @change="change('moduleId')" size="small" clearable>
                <el-option v-for="item in modules" :value="item.id" :key="item.id" :label="item.name" :disabled="item.disabled"/>
              </el-select>
            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="!pen.type">
+        <div class="form-row-box">
          <!--        Position  -->
          <div class="form-row-title">
            {{$t('project.topology.position')}}
@@ -414,12 +415,12 @@
                    {{ $t('dashboard.dashboard.chartForm.legend') }}
                  </div>
                  <div class="form-row-value">
-                    <div style="display: inline-block;width: calc(20% - 3px)">
+                    <div style="display: inline-block;width: calc(30% - 3px)">
                      <el-select v-model="pen.data.textParent" size="small">
                        <el-option v-for="item in queryValues.filter(query => query.type === 'title')" :key="item.id" :value="item.name" :label='item.name'></el-option>
                      </el-select>
                    </div>
-                    <div style="display: inline-block;width: calc(80% - 3px)">
+                    <div style="display: inline-block;width: calc(70% - 13px);margin-left: 10px">
                      <el-select v-model="pen.data.textLegend" size="small">
                        <el-option v-for="item in queryValues.filter(query => (query.parent === pen.data.textParent) && query.type === 'item')" :key="item.id" :value="item.name" :label='item.name'></el-option>
                      </el-select>
@@ -765,12 +766,12 @@
                {{$t('dashboard.dashboard.chartForm.legend')}}
              </div>
              <div class="form-row-value">
-                <div style="display: inline-block;width: calc(20% - 3px)">
+                <div style="display: inline-block;width: calc(30% - 3px)">
                  <el-select v-model="pen.data.parent" size="small">
                    <el-option v-for="item in queryValues.filter(query => query.type === 'title')" :key="item.id" :value="item.name" :label='item.name'></el-option>
                  </el-select>
                </div>
-                <div style="display: inline-block;width: calc(80% - 3px)">
+                <div style="display: inline-block;width: calc(70% - 13px);margin-left: 10px">
                  <el-select v-model="pen.data.legend" size="small">
                    <el-option v-for="item in queryValues.filter(query => (query.parent === pen.data.parent) && query.type === 'item')" :key="item.id" :value="item.name" :label='item.name'></el-option>
                  </el-select>
@@ -984,7 +985,7 @@
          <div class="form-row-value" style="display: flex">
            <el-input v-model="pen.data.tooltip.title" size="small" style="flex: 1"/>
            <!-- 显示头部 -->
-            <div class="choose-header-btn" @click="pen.data.tooltip.titleShow = !pen.data.tooltip.titleShow" :title="$t('overall.visible')">
+            <div class="choose-header-btn" style="margin-left: 10px;" @click="pen.data.tooltip.titleShow = !pen.data.tooltip.titleShow" :title="$t('overall.visible')">
              <i class="nz-icon nz-icon-mimakejian" v-if="pen.data.tooltip.titleShow"></i>
              <i class="nz-icon nz-icon-mimabukejian" v-else></i>
            </div>
@@ -1013,18 +1014,18 @@
          <div class="form-row-key" style="margin-bottom: 5px">
            {{$t('project.topology.legends')}}
          </div>
-          <div class="form-row-value" style="margin-bottom: 10px" v-for="legend in pen.data.tooltip.legends" :key="legend.parent + legend.legend">
-            <div style="display: inline-block;width: calc(20% - 3px)">
+          <div class="form-row-value" style="margin-bottom: 10px;display: flex;justify-content: space-between" v-for="legend in pen.data.tooltip.legends" :key="legend.parent + legend.legend">
+            <div style="display: inline-block;width: calc(20% - 10px)">
              <el-select v-model="legend.parent" size="small" style="width: 100%">
                <el-option v-for="item in queryValues.filter(query => query.type === 'title')" :key="item.id" :value="item.name" :label='item.name'></el-option>
              </el-select>
            </div>
-            <div style="display: inline-block;width: calc(40% - 3px)">
+            <div style="display: inline-block;width: calc(40% - 10px)">
              <el-select v-model="legend.legend" size="small" style="width: 100%">
                <el-option v-for="item in queryValues.filter(query => (query.parent === legend.parent) && query.type === 'item')" :key="item.id" :value="item.name" :label='item.name'></el-option>
              </el-select>
            </div>
-            <div style="display: inline-block;width: calc(40% - 3px)">
+            <div style="display: inline-block;width: calc(40% - 10px)">
              <el-input v-model="legend.alias" size="small" style="width: 100%">
                <template slot="prepend">Alias</template>
              </el-input>