From 7456e75c724e05a307d07a8473cbf0492b27de46 Mon Sep 17 00:00:00 2001 From: zyh Date: Fri, 20 Oct 2023 16:28:39 +0800 Subject: [PATCH] =?UTF-8?q?NEZ-3234=20fix=EF=BC=9A=E4=BF=AE=E5=A4=8Dnotebo?= =?UTF-8?q?ok=E9=A1=B5=E9=9D=A2bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/css/components/chart/chart.scss | 47 ------- .../components/page/notebook/notebook.scss | 125 +++++++++++++++++- .../src/components/chart/chart/chartText.vue | 17 ++- .../src/components/chart/chartHeader.vue | 6 +- .../src/components/chart/markdownEditor.vue | 5 +- .../src/components/chart/panelChart.vue | 19 --- .../components/common/alert/alertLabel.vue | 3 +- .../common/bottomBox/tabs/notebookTab.vue | 33 ++--- .../list/notebook/notebookDetail.vue | 4 +- .../components/page/notebook/notebookAdd.vue | 112 ++++++++++++++++ .../components/page/notebook/notebookList.vue | 12 +- nezha-fronted/src/entrance/exportHtml/App.vue | 10 +- 12 files changed, 285 insertions(+), 108 deletions(-) create mode 100644 nezha-fronted/src/components/page/notebook/notebookAdd.vue diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss index 094732daa..8488b8f05 100644 --- 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; - } - } -} diff --git a/nezha-fronted/src/assets/css/components/page/notebook/notebook.scss b/nezha-fronted/src/assets/css/components/page/notebook/notebook.scss index 131d428e7..603dd15f8 100644 --- 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; } \ No newline at end of file diff --git a/nezha-fronted/src/components/chart/chart/chartText.vue b/nezha-fronted/src/components/chart/chart/chartText.vue index 8f5ab1a1d..2a522ab22 100644 --- a/nezha-fronted/src/components/chart/chart/chartText.vue +++ b/nezha-fronted/src/components/chart/chart/chartText.vue @@ -1,9 +1,10 @@ diff --git a/nezha-fronted/src/components/chart/markdownEditor.vue b/nezha-fronted/src/components/chart/markdownEditor.vue index 0dcb54c95..2d04269b2 100644 --- a/nezha-fronted/src/components/chart/markdownEditor.vue +++ b/nezha-fronted/src/components/chart/markdownEditor.vue @@ -1,5 +1,5 @@ diff --git a/nezha-fronted/src/components/page/notebook/notebookList.vue b/nezha-fronted/src/components/page/notebook/notebookList.vue index 2de237713..d38030a32 100644 --- a/nezha-fronted/src/components/page/notebook/notebookList.vue +++ b/nezha-fronted/src/components/page/notebook/notebookList.vue @@ -19,11 +19,15 @@
+ :key="item.id" + > + 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 () { // 是否是编辑状态 diff --git a/nezha-fronted/src/entrance/exportHtml/App.vue b/nezha-fronted/src/entrance/exportHtml/App.vue index b843694f9..4045030d2 100644 --- a/nezha-fronted/src/entrance/exportHtml/App.vue +++ b/nezha-fronted/src/entrance/exportHtml/App.vue @@ -3,7 +3,7 @@
-
+
-
{{dataJson.dashboard.data.name}} {{dataJson.notebook.data.name}} @@ -51,8 +50,12 @@
-
+
+
+

{{dataJson.notebook.data.name}}

+

{{dateFormat(dataJson.start * 1000)}} - {{dateFormat(dataJson.end * 1000)}} ({{dataJson.timezone}})

+