bugfix: 变量联想体验问题修复&&侧栏拖拽优化

TencentBlueKing · Oct 16, 2023 · 0d014ba · 0d014ba
1 parent 25400bb
commit 0d014ba
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 14 deletions.
diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue
@@ -354,7 +354,7 @@
                         const focusValueWidth = newDom.offsetWidth || 0
                         this.$el.removeChild(newDom)
                         this.$nextTick(() => {
-                            const { width: varListWidth, height: varListHeight } = document.querySelector('.rf-select-list').getBoundingClientRect()
+                            const { width: varListWidth, height: varListHeight } = this.$el.querySelector('.rf-select-list').getBoundingClientRect()
                             let right = inputWidth - varListWidth - previousDomLeft - previousDomWidth - focusValueWidth
                             right = right > 0 ? right : 0
                             const top = window.innerHeight < inputTop + 30 + varListHeight + 50 ? -95 : 30
@@ -429,6 +429,7 @@
                     return match
                 })
                 divInputDom.innerHTML = innerHtml
+                this.updateInputValue()
             },
             // 文本框按键事件
             handleInputKeyDown (e) {

diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue
@@ -309,7 +309,7 @@
                         const focusValueHeight = newDom.offsetHeight || 0
                         this.$el.removeChild(newDom)
                         this.$nextTick(() => {
-                            const { height: varListHeight, width: varListWidth } = document.querySelector('.rf-select-list').getBoundingClientRect()
+                            const { height: varListHeight, width: varListWidth } = this.$el.querySelector('.rf-select-list').getBoundingClientRect()
                             let popLeft = previousDomLeft + previousDomWidth + focusValueWidth
                             if (popLeft > inputWidth - varListWidth) {
                                 popLeft = inputWidth - varListWidth
@@ -407,6 +407,7 @@
                         dom.innerHTML = innerHtml
                     }
                 })
+                this.updateInputValue()
             },
             // 文本框按键事件
             handleInputKeyDown (e) {

diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/ExecuteRecord.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/ExecuteRecord.vue
@@ -2,7 +2,7 @@
     <div class="execute-record">
         <template v-if="Object.keys(executeInfo).length && !notPerformedSubNode">
             <section class="info-section abnormal-section" data-test-id="taskExecute_form_exceptionInfo" v-if="executeInfo.state === 'FAILED'">
-                <template v-if="!executeInfo.ex_data">
+                <template v-if="executeInfo.ex_data">
                     <p class="hide-html-text" v-html="executeInfo.failInfo"></p>
                     <div class="show-html-text" :class="{ 'is-fold': !isExpand }" v-html="executeInfo.failInfo"></div>
                     <span class="expand-btn" v-if="isExpandTextShow" @click="isExpand = !isExpand">{{ isExpand ? $t('收起') : $t('显示全部') }}</span>

diff --git a/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue b/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue
@@ -78,6 +78,12 @@
                 </div>
             </div>
             <div class="node-info-panel" ref="nodeInfoPanel" v-if="isNodeInfoPanelShow" slot="content">
+                <!--可拖拽-->
+                <template v-if="['viewNodeDetails', 'executeInfo'].includes(nodeInfoType)">
+                    <div class="resize-trigger" @mousedown.left="handleMousedown($event)"></div>
+                    <i :class="['resize-proxy', 'left']" ref="resizeProxy"></i>
+                    <div class="resize-mask" ref="resizeMask"></div>
+                </template>
                 <ModifyParams
                     ref="modifyParams"
                     v-if="nodeInfoType === 'modifyParams'"
@@ -317,6 +323,7 @@
                 sideSliderTitle: '',
                 taskId: this.instance_id,
                 isNodeInfoPanelShow: false,
+                sidebarWidth: 960,
                 nodeInfoType: '',
                 state: '', // 当前流程状态，画布切换时会更新
                 rootState: '', // 根流程状态
@@ -489,12 +496,6 @@
             },
             adminView () {
                 return this.hasAdminPerm && this.$route.query.is_admin === 'true'
-            },
-            sidebarWidth () {
-                if (['viewNodeDetails', 'executeInfo'].includes(this.nodeInfoType)) {
-                    return window.innerWidth - 340
-                }
-                return 960
             }
         },
         mounted () {
@@ -1905,6 +1906,7 @@
             openNodeInfoPanel (type, name, isCondition = false) {
                 this.sideSliderTitle = name
                 this.isNodeInfoPanelShow = true
+                this.sidebarWidth = 960
                 this.nodeInfoType = type
                 this.isCondition = isCondition
             },
@@ -2396,6 +2398,47 @@
                         && this.pipelineData.activities[key].component.code === 'pause_node'))
                         ? 'SUSPENDED'
                         : ''
+            },
+            handleMousedown (event) {
+                this.updateResizeMaskStyle()
+                this.updateResizeProxyStyle()
+                document.addEventListener('mousemove', this.handleMouseMove)
+                document.addEventListener('mouseup', this.handleMouseUp)
+            },
+            handleMouseMove (event) {
+                const maxWidth = window.innerWidth - 340
+                let width = window.innerWidth - event.clientX
+                width = width < 960 ? 960 : width
+                width = width > maxWidth ? maxWidth : width
+                const resizeProxy = this.$refs.resizeProxy
+                resizeProxy.style.right = `${width}px`
+            },
+            updateResizeMaskStyle () {
+                const resizeMask = this.$refs.resizeMask
+                resizeMask.style.display = 'block'
+                resizeMask.style.cursor = 'col-resize'
+            },
+            updateResizeProxyStyle () {
+                const resizeProxy = this.$refs.resizeProxy
+                resizeProxy.style.visibility = 'visible'
+                resizeProxy.style.right = `${this.sidebarWidth}px`
+            },
+            handleMouseUp () {
+                const resizeMask = this.$refs.resizeMask
+                const resizeProxy = this.$refs.resizeProxy
+                resizeProxy.style.visibility = 'hidden'
+                resizeMask.style.display = 'none'
+                let right = resizeProxy.style.right.slice(0, -2)
+                right = Number(right)
+                const widthDiff = right - this.sidebarWidth
+                this.sidebarWidth = right
+                const layoutAsideDom = document.querySelector('.bk-resize-layout-aside')
+                if (layoutAsideDom) {
+                    const { width } = layoutAsideDom.getBoundingClientRect() || {}
+                    layoutAsideDom.style.width = `${width + widthDiff}px`
+                }
+                document.removeEventListener('mousemove', this.handleMouseMove)
+                document.removeEventListener('mouseup', this.handleMouseUp)
             }
         }
     }
@@ -2504,6 +2547,59 @@
     .operation-flow {
         padding: 20px 30px;
     }
+    >.resize-trigger {
+        width: 5px;
+        height: calc(100vh - 60px);
+        position: absolute;
+        left: 0;
+        top: 0;
+        cursor: col-resize;
+        z-index: 2500;
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            width: 2px;
+            background-color: transparent;
+        }
+        &::after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            right: -1px;
+            width: 2px;
+            height: 2px;
+            color: #979ba5;
+            transform: translate3d(0,-50%,0);
+            background: currentColor;
+            box-shadow: 0 4px 0 0 currentColor,0 8px 0 0 currentColor,0 -4px 0 0 currentColor,0 -8px 0 0 currentColor;
+        }
+        &:hover::before {
+            background-color: #3a84ff;
+        }
+    }
+    >.resize-proxy {
+        visibility: hidden;
+        position: fixed;
+        pointer-events: none;
+        z-index: 9998;
+        &.left {
+            top: 0;
+            height: 100%;
+            border-left: 1px dashed #3a84ff;
+        }
+    }
+    >.resize-mask {
+        display: none;
+        position: fixed;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 9999;
+    }
 }
 .approval-dialog-content {
     /deep/ .bk-form-radio {

diff --git a/frontend/desktop/src/pages/template/TemplateEdit/NodeConfig/NodeConfig.vue b/frontend/desktop/src/pages/template/TemplateEdit/NodeConfig/NodeConfig.vue
@@ -1654,8 +1654,10 @@
                 document.addEventListener('mouseup', this.handleMouseUp)
             },
             handleMouseMove (event) {
+                const maxWidth = window.innerWidth - 300
                 let width = window.innerWidth - event.clientX
-                width = width > 800 ? width : 800
+                width = width < 800 ? 800 : width
+                width = width > maxWidth ? maxWidth : width
                 const resizeProxy = this.$refs.resizeProxy
                 resizeProxy.style.right = `${width}px`
             },
@@ -1674,7 +1676,8 @@
                 const resizeProxy = this.$refs.resizeProxy
                 resizeProxy.style.visibility = 'hidden'
                 resizeMask.style.display = 'none'
-                this.sideWidth = resizeProxy.style.right
+                const right = resizeProxy.style.right.slice(0, -2)
+                this.sideWidth = Number(right)
                 document.removeEventListener('mousemove', this.handleMouseMove)
                 document.removeEventListener('mouseup', this.handleMouseUp)
             }

diff --git a/frontend/desktop/src/pages/template/TemplateEdit/NodeConfig/OutputParams.vue b/frontend/desktop/src/pages/template/TemplateEdit/NodeConfig/OutputParams.vue
@@ -343,7 +343,7 @@
     .hook-icon-wrap {
         position: absolute;
         right: 22px;
-        top: 9px;
+        top: 5px;
         display: inline-block;
         width: 32px;
         height: 32px;

diff --git a/...tend/desktop/src/pages/template/TemplateEdit/TemplateSetting/TabGlobalVariables/index.vue b/...tend/desktop/src/pages/template/TemplateEdit/TemplateSetting/TabGlobalVariables/index.vue
@@ -704,8 +704,10 @@
                 document.addEventListener('mouseup', this.handleMouseUp)
             },
             handleMouseMove (event) {
+                const maxWidth = window.innerWidth - 300
                 let width = window.innerWidth - event.clientX
-                width = width > 800 ? width : 800
+                width = width < 800 ? 800 : width
+                width = width > maxWidth ? maxWidth : width
                 const resizeProxy = this.$refs.resizeProxy
                 resizeProxy.style.right = `${width}px`
             },
@@ -724,7 +726,8 @@
                 const resizeProxy = this.$refs.resizeProxy
                 resizeProxy.style.visibility = 'hidden'
                 resizeMask.style.display = 'none'
-                this.sideWidth = resizeProxy.style.right
+                const right = resizeProxy.style.right.slice(0, -2)
+                this.sideWidth = Number(right)
                 document.removeEventListener('mousemove', this.handleMouseMove)
                 document.removeEventListener('mouseup', this.handleMouseUp)
             }