NEZ-3234 fix：修复notebook页面bug

2023-10-20 16:28:39 +08:00
parent 83ef83c05c
commit 7456e75c72
12 changed files with 285 additions and 108 deletions
--- a/nezha-fronted/src/assets/css/components/chart/chart.scss
+++ b/nezha-fronted/src/assets/css/components/chart/chart.scss
@@ -874,50 +874,3 @@
    height: auto !important;
  }
 }
-
-.noteboook-chart-addWrap{
-  position: absolute;
-  top:-20px;
-  bottom: -20px;
-  width: 20px;
-  left: -20px;
-  visibility: hidden;
-  &:hover{
-    visibility: visible;
-  }
-  .noteboook-chart-add{
-    right: 5px;
-    cursor: pointer;
-    position: absolute;
-    font-size: 18px;
-    color: $--color-text-secondary;
-    &:hover{
-      color: $--color-primary;
-    }
-    &.addBefore{
-      top: 20px;
-      transform: translateY(-50%);
-    }
-    &.addAfter{
-      bottom: 20px;
-      transform: translateY(50%);
-    }
-  }
-}
-
-.notebook-detail{
-  .chart-header:hover{
-    background: transparent !important;
-  }
-}
-.panel-chart-notebook{
-  .chart-header{
-    cursor: move;
-  }
-  &:hover{
-    border-color: $--color-primary;
-    .noteboook-chart-addWrap{
-      visibility: visible;
-    }
-  }
-}
--- a/nezha-fronted/src/assets/css/components/page/notebook/notebook.scss
+++ b/nezha-fronted/src/assets/css/components/page/notebook/notebook.scss
@@ -41,6 +41,9 @@
        margin-right: 10px;
      }
    }
+    .chart-header:hover{
+      background: transparent !important;
+    }
  }
 }

@@ -95,19 +98,51 @@
      height: 300px !important;
      margin-top: 20px;
      background: $--background-color-empty;
+      position: relative;
+      .chart-header__tools{
+        visibility: hidden;
+      }
      .panel-chart{
        box-sizing: border-box;
      }
+      .panel-chart.my-loading-parent--relative{
+        height: 100% !important;
+      }
    }
-    .panel-chart.my-loading-parent--relative{
-      height: 100% !important;
+    .panel-chart-wrap.notebookEdit{
+      .chart-header{
+        cursor: move;
+      }
+      &:hover{
+        .panel-chart{
+          border-color: $--color-primary;
+          .chart-header__tools{
+            visibility: visible !important;
+          }
+        }
+        .noteboook-chart-addWrap{
+          visibility: visible;
+        }
+      }
+      .hasPop{
+        visibility: visible;
+      }
    }
    .text-chart-wrap{
      height: auto !important;
+      .panel-chart{
+        border-color: transparent;
+        .chart-header__title{
+          visibility: hidden;
+        }
+      }
      .v-md-editor-preview{
        padding: 0;
      }
      .text-content{
+        padding: 0;
+        width: 100%;
+        height: 100%;
        .el-scrollbar__wrap{
          margin-right: 0 !important;
          margin-bottom: 0 !important;
@@ -118,6 +153,14 @@
        }
      }
    }
+    .text-edit{
+      .chart-header{
+        display: none;
+      }
+      .noteboook-chart-addWrap{
+        visibility: hidden !important;
+      }
+    }
    .table-chart-wrap{
      height: auto !important;
      min-height: 100px;
@@ -145,11 +188,9 @@
      position: relative;
      box-sizing: border-box;
      height: 100%;
-      padding: 10px;
-      padding-top: 0;
      .markdownEditor {
        height: auto !important;
-        min-height: 250px !important;
+        min-height: 298px !important;
      }
      .notebook-editor-btn{
        height: 41px;
@@ -162,6 +203,16 @@
          height: 32px;
        }
      }
+      .md-placeholder{
+        position: absolute;
+        top: 41px;
+        padding: 12px 16px;
+        z-index: 0;
+        pointer-events: none;
+        white-space: pre-wrap;
+        color: $--input-placeholder-color;
+        font-family: menlo,Ubuntu Mono,consolas,Courier New,Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif !important;
+      }
    }
  }
  .notebook-add{
@@ -196,6 +247,7 @@
      }
      .notebook-chart-icon{
        width: 24px;
+        height: 24px;
        margin-right: 12px;
      }
      span{
@@ -212,4 +264,67 @@
      cursor: pointer;
    }
  }
+}
+
+.noteboook-chart-addWrap{
+  position: absolute;
+  top:-20px;
+  bottom: -20px;
+  width: 20px;
+  left: -20px;
+  visibility: hidden;
+  &:hover{
+    visibility: visible;
+  }
+  .noteboook-chart-add{
+    right: 5px;
+    cursor: pointer;
+    position: absolute;
+    font-size: 18px;
+    color: $--color-text-secondary;
+    &:hover{
+      color: $--color-primary;
+    }
+    &.addBefore{
+      top: 20px;
+      transform: translateY(-50%);
+    }
+    &.addAfter{
+      bottom: 20px;
+      transform: translateY(50%);
+    }
+  }
+}
+
+.noteboook-pop{
+  min-width: unset;
+  padding: 0;
+  margin: 0 !important;
+  border-radius: 2px;
+  border: none;
+  .noteboook-pop-list{
+    height: 288px;
+    overflow-y: auto;
+    .noteboook-pop-item{
+      width: 150px;
+      height: 32px;
+      box-sizing: border-box;
+      padding: 8px 10px;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      &:hover{
+        background: #FFFBF5;
+      }
+      svg{
+        width: 14px;
+        height: 14px;
+        margin-right: 10px;
+      }
+    }
+  }
+}
+
+.noteboook-tip{
+  margin-bottom: 0 !important;
 }
--- a/nezha-fronted/src/components/chart/chart/chartText.vue
+++ b/nezha-fronted/src/components/chart/chart/chartText.vue
@@ -1,9 +1,10 @@
 <template>
  <div class="mt-10 rich-text-container" v-cloak style="height: 100%;width: 100%;">
    <div class="notebook-editor" v-if="from==='notebook'&&chartInfo.param.isEdit" >
-      <markdownEditor :edit-data="text" @textChange="textChange"></markdownEditor>
+      <markdownEditor :edit-data="text" @textChange="textChange" :autofocus="true" v-clickoutside="clickout"></markdownEditor>
+      <div class="md-placeholder" v-show="!text" v-html="$t('notebook.mdPlaceholder')"></div>
      <div class="notebook-editor-btn">
-        <button class="nz-btn nz-btn-size-normal nz-btn-style-light margin-r-10" @click="cancel">
+        <button class="nz-btn nz-btn-size-normal nz-btn-style-light margin-r-10 no-style-class" @click="cancel">
          <span>{{$t('overall.cancel')}}</span>
        </button>
        <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="save">
@@ -43,6 +44,7 @@ export default {
    }
  },
  methods: {
+    resize () {},
    save () {
      this.chartInfo.param.isEdit = false
      this.chartInfo.param.oldText = this.chartInfo.param.text
@@ -54,7 +56,16 @@ export default {
    textChange (val) {
      this.chartInfo.param.text = val
    },
-    resize () {}
+    clickout () {
+      if (this.chartInfo.param.text) {
+        this.save()
+      } else {
+        this.$store.dispatch('dispatchDelChart', {
+          chart: this.chartInfo,
+          type: 'delete'
+        })
+      }
+    }
  },
  watch: {
    chartInfo: {
--- a/nezha-fronted/src/components/chart/chartHeader.vue
+++ b/nezha-fronted/src/components/chart/chartHeader.vue
@@ -104,15 +104,15 @@
        </span>
      </template>
      <template v-else-if="notebookEdit">
+        <span class="chart-header__tool" @click="editChart">
+          <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i>
+        </span>
        <span class="chart-header__tool" @click="duplicate">
          <i class="nz-icon nz-icon-override" style="font-size: 16px;"></i>
        </span>
        <span class="chart-header__tool" @click="removeChart">
          <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>
        </span>
-        <span class="chart-header__tool" @click="editChart">
-          <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i>
-        </span>
      </template>
    </div>
  </div>
--- a/nezha-fronted/src/components/chart/markdownEditor.vue
+++ b/nezha-fronted/src/components/chart/markdownEditor.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-md-editor v-model="text" @change="textChange" mode="edit" height="390px" :leftToolbar="leftToolbar" right-toolbar="" class="markdownEditor"></v-md-editor>
+  <v-md-editor v-model="text" @change="textChange" mode="edit" height="390px" :leftToolbar="leftToolbar" right-toolbar="" class="markdownEditor" :autofocus="autofocus"></v-md-editor>
 </template>

 <script>
@@ -9,7 +9,8 @@ import VueMarkdownEditor from '@kangc/v-md-editor'
 export default {
  name: 'markdownEditor',
  props: {
-    editData: String
+    editData: String,
+    autofocus: Boolean
  },
  computed: {
    language () {
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -3,7 +3,6 @@
  <div
    :class="{
      'panel-chart--fullscreen': isFullscreen,
-      'panel-chart-notebook':from==='notebook'&&notebookEdit&&!isExportHtml,
    }"
    class="panel-chart"
    :id="isFullscreen ? ('chart-screen-' + chartInfo.id ) : ('chart-local-' + chartInfo.id)"
@@ -72,18 +71,6 @@
      :showAllData="showAllData"
      v-if="(!isGroup(chartInfo.type) || !chartInfo.param.collapse) && snapshotShow"
    ></chart>
-    <div class="noteboook-chart-addWrap" v-if="from==='notebook'&&!isExportHtml">
-      <el-tooltip :content="$t('notebook.addchart')" effect="light" placement="bottom">
-        <div class="noteboook-chart-add addBefore">
-          <i class="nz-icon nz-icon-plus" @click="addNotebook({position:'before',id:chartInfo.id})"></i>
-        </div>
-      </el-tooltip>
-      <el-tooltip :content="$t('notebook.addchart')" effect="light" placement="top">
-        <div class="noteboook-chart-add addAfter">
-          <i class="nz-icon nz-icon-plus" @click="addNotebook({position:'after',id:chartInfo.id})"></i>
-        </div>
-      </el-tooltip>
-    </div>
  </div>
 </template>

@@ -169,16 +156,10 @@ export default {
    },
    variablesArr () {
      return this.$store.getters.getVariablesArr
-    },
-    notebookEdit () { // 是否是编辑状态
-      return this.$store.getters.getNotebookEdit
    }
  },
  methods: {
    isGroup,
-    addNotebook (position) {
-      bus.$emit('addNotebook', position)
-    },
    variablesHandle (searchTime) {
      this.setGlobalVariablesValue(searchTime)
      this.myVariables = []
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -29,6 +29,7 @@
    <div class="alert-label-header-title">
      <div
        class="alert-label-header-circle"
+        style="text-transform:capitalize;"
      >
        {{alertLabelData && alertLabelData.createUser ? alertLabelData.createUser.name.substr(0, 1) : "-" }}
      </div>
@@ -724,7 +725,7 @@
      </div>
    </div>

-    <!-- type === 'user' -->
+    <!-- type === 'notebook' -->
    <div class="alert-label-info" v-if="type === 'notebook'" v-my-loading="loading">
      <div class="alert-label-box">
        <div class="alert-label-title">ID</div>
--- a/nezha-fronted/src/components/common/bottomBox/tabs/notebookTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/notebookTab.vue
@@ -168,11 +168,6 @@ export default {
  },
  methods: {
    done () {
-      this.$refs.notebookList.copyDataList.forEach(item => {
-        if (item.type === 'text') {
-          this.$set(item.param, 'isEdit', false)
-        }
-      })
      let charts = this.$lodash.cloneDeep(this.$refs.notebookList.copyDataList)
      charts = charts.filter(item => item.name !== 'groupTemp')
      charts.forEach(item => {
@@ -238,15 +233,8 @@ export default {
      this.$refs.notebookList.onScroll(this.scrollbarWrap.scrollTop)
      this.$store.dispatch('clearPanel')
    },
-    addNotebook (position) {
-      this.addChartBefore({ type: 'line', datasource: 'metrics', position })
-    },
-    copyChartText (data) {
-      const chart = JSON.parse(JSON.stringify(data))
-      chart.param.isEdit = false
-      chart.position = { position: 'after', id: chart.id }
-      delete chart.id
-      this.createSuccess(chart)
+    addNotebook (data) {
+      this.addChartBefore(data)
    },
    // 编辑图表信息,打开编辑弹窗
    editChart (data, copy) {
@@ -299,16 +287,23 @@ export default {
        this.$refs.addChartModal.isStable = 'stable'
      })
    },
-    addText () {
-      const timestamp = Math.floor(new Date().getTime() / 1000)
-      const name = `text-[${timestamp}]`
+    addText (position) {
      const chart = {
-        name,
        type: 'text',
        unit: 2,
        datasource: 'misc',
        param: this.newChart('text')
      }
+      if (position) {
+        chart.position = position
+      }
+      this.createSuccess(chart)
+    },
+    copyChartText (data) {
+      const chart = JSON.parse(JSON.stringify(data))
+      chart.param.isEdit = false
+      chart.position = { position: 'after', id: chart.id }
+      delete chart.id
      this.createSuccess(chart)
    },
    getMaxId (arr) { // 获取当前列表最大的id
@@ -479,7 +474,7 @@ export default {
    },
    addChartBefore (chart) {
      if (chart.type === 'text') {
-        this.addText()
+        this.addText(chart.position)
        return false
      }
      this.$store.dispatch('dispatchEditChart', {
--- a/nezha-fronted/src/components/common/detailView/list/notebook/notebookDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/notebook/notebookDetail.vue
@@ -31,8 +31,8 @@
            <span class="author-avatar">{{item.createUser ? item.createUser.name.substr(0, 1) : '-'}}</span>
            <span>{{item.name}}</span>
          </div>
-          <div class="asset-name">
-            <span>{{item.location?item.location:'-'}}</span>
+          <div class="asset-name" style="padding-left:25px;">
+            <span>{{item.createUser ? item.createUser.name : '-'}}</span>
          </div>
        </div>
        <alertLabel
--- a/nezha-fronted/src/components/page/notebook/notebookAdd.vue
+++ b/nezha-fronted/src/components/page/notebook/notebookAdd.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="noteboook-chart-addWrap" :class="{'hasPop':beforePop||afterPop}">
+    <!-- before -->
+    <el-popover
+      v-model="beforePop"
+      ref="before"
+      placement="bottom-end"
+      trigger="click"
+      popper-class="noteboook-pop"
+      transition=''
+      >
+        <ul class="noteboook-pop-list">
+          <li class="noteboook-pop-item" v-for="item in typeList" :key="item.name" @click="addNotebook({...item,position:{position:'before',id:chartInfo.id}})">
+            <svg aria-hidden="true">
+              <use :xlink:href="item.icon"></use>
+            </svg>
+            <span>{{item.name}}</span>
+          </li>
+        </ul>
+    </el-popover>
+    <el-tooltip
+      v-model="afterTip"
+      :content="$t('notebook.addchart')"
+      effect="light"
+      placement="top"
+      popper-class="noteboook-tip"
+      transition=''
+      :enterable="false">
+      <div class="noteboook-chart-add addBefore" v-popover:before>
+        <i class="nz-icon nz-icon-plus" @click="showAdd"></i>
+      </div>
+    </el-tooltip>
+    <!-- after -->
+    <el-popover
+      v-model="afterPop"
+      ref="after"
+      placement="bottom-end"
+      trigger="click"
+      popper-class="noteboook-pop"
+      transition=''
+      >
+        <ul class="noteboook-pop-list">
+          <li class="noteboook-pop-item" v-for="item in typeList" :key="item.name" @click="addNotebook({...item,position:{position:'after',id:chartInfo.id}})">
+            <svg aria-hidden="true">
+              <use :xlink:href="item.icon"></use>
+            </svg>
+            <span>{{item.name}}</span>
+          </li>
+        </ul>
+    </el-popover>
+    <el-tooltip
+      v-model="beforeTip"
+      :content="$t('notebook.addchart')"
+      effect="light"
+      placement="top"
+      popper-class="noteboook-tip"
+      transition=''
+      :enterable="false">
+      <div class="noteboook-chart-add addAfter" v-popover:after>
+        <i class="nz-icon nz-icon-plus" @click="showAdd"></i>
+      </div>
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+import bus from '@/libs/bus'
+export default {
+  name: 'notebookAdd',
+  props: {
+    chartInfo: Object
+  },
+  data () {
+    return {
+      typeList: [
+        { icon: '#nz-icon-text2', name: this.$t('dashboard.dashboard.chartForm.typeVal.text.label'), type: 'text', less: true, datasource: 'misc' },
+        { icon: '#nz-icon-line_chart', name: this.$t('dashboard.dashboard.chartForm.typeVal.line.label'), type: 'line', less: true, datasource: 'metrics' },
+        { icon: '#nz-icon-a-Areacharts', name: this.$t('dashboard.dashboard.chartForm.typeVal.stackArea.label'), type: 'area', less: false, datasource: 'metrics' },
+        { icon: '#nz-icon-Point', name: this.$t('dashboard.dashboard.chartForm.typeVal.point.label'), type: 'point', less: false, datasource: 'metrics' },
+        { icon: '#nz-icon-Stat', name: this.$t('dashboard.dashboard.chartForm.typeVal.singleStat.label'), type: 'stat', less: true, datasource: 'metrics' },
+        { icon: '#nz-icon-hexagon', name: this.$t('dashboard.dashboard.chartForm.typeVal.hexagonFigure.label'), type: 'hexagon', less: false, datasource: 'metrics' },
+        { icon: '#nz-icon-Bar_chart', name: this.$t('dashboard.dashboard.chartForm.typeVal.bar.label'), type: 'bar', less: false, datasource: 'metrics' },
+        { icon: '#nz-icon-a-Piechat', name: this.$t('dashboard.dashboard.chartForm.typeVal.pie.label'), type: 'pie', less: false, datasource: 'metrics' },
+        { icon: '#nz-icon-a-Doughnutchart', name: this.$t('dashboard.dashboard.chartForm.typeVal.doughnut.label'), type: 'doughnut', less: false, datasource: 'metrics' },
+        { icon: '#nz-icon-a-Rosechart', name: this.$t('dashboard.dashboard.chartForm.typeVal.rose.label'), type: 'rose', less: false, datasource: 'metrics' },
+        { icon: '#nz-icon-Bubble', name: this.$t('dashboard.dashboard.chartForm.typeVal.bubble.label'), type: 'bubble', less: false, datasource: 'metrics' },
+        { icon: '#nz-icon-funnel1', name: this.$t('dashboard.dashboard.chartForm.typeVal.funnel.label'), type: 'funnel', less: false, datasource: 'metrics' },
+        { icon: '#nz-icon-rank1', name: this.$t('dashboard.dashboard.chartForm.typeVal.rank.label'), type: 'rank', less: false, datasource: 'metrics' },
+        { icon: '#nz-icon-Sankey', name: this.$t('dashboard.dashboard.chartForm.typeVal.sankey.label'), type: 'sankey', less: false, datasource: 'metrics' },
+        { icon: '#nz-icon-Guage', name: this.$t('dashboard.dashboard.chartForm.typeVal.gauge.label'), type: 'gauge', less: false, datasource: 'metrics' },
+        { icon: '#nz-icon-Treemap', name: this.$t('dashboard.dashboard.chartForm.typeVal.treemap.label'), type: 'treemap', less: false, datasource: 'metrics' },
+        { icon: '#nz-icon-Table', name: this.$t('dashboard.dashboard.chartForm.typeVal.table.label'), type: 'table', less: true, datasource: 'metrics' }
+      ],
+      beforeTip: false,
+      afterTip: false,
+      beforePop: false,
+      afterPop: false
+    }
+  },
+  methods: {
+    showAdd () {
+      this.beforeTip = false
+      this.afterTip = false
+    },
+    addNotebook: bus.debounceFn(function (data) {
+      this.beforePop = false
+      this.afterPop = false
+      bus.$emit('addNotebook', data)
+    }, 100, true)
+  }
+}
+</script>
--- a/nezha-fronted/src/components/page/notebook/notebookList.vue
+++ b/nezha-fronted/src/components/page/notebook/notebookList.vue
@@ -19,11 +19,15 @@
      <div
        class="panel-chart-wrap"
        :class="{
+          'notebookEdit':notebookEdit,
+          'table-chart-wrap':item.type==='table',
          'text-chart-wrap':item.type==='text',
-          'table-chart-wrap':item.type==='table'
+          'text-edit':item.type==='text'&&item.param.isEdit,
        }"
        v-for="item in copyDataList"
-        :key="item.id">
+        :key="item.id"
+      >
+        <notebookAdd :chart-info="item"></notebookAdd>
        <panel-chart
          :from="from"
          :variablesInit="true"
@@ -41,6 +45,7 @@
 <script>
 import draggable from 'vuedraggable'
 import panelChart from '@/components/chart/panelChart'
+import notebookAdd from './notebookAdd'
 import { lineChartMove } from '@/components/common/js/common'
 export default {
  name: 'notebookList',
@@ -65,7 +70,8 @@ export default {
  },
  components: {
    draggable,
-    panelChart
+    panelChart,
+    notebookAdd
  },
  computed: {
    notebookEdit () { // 是否是编辑状态
--- a/nezha-fronted/src/entrance/exportHtml/App.vue
+++ b/nezha-fronted/src/entrance/exportHtml/App.vue