optimization: 禁用画布工具栏点击展开节点菜单侧栏&&画布选中态样式调整

TencentBlueKing · Oct 17, 2023 · 5c58034 · 5c58034
1 parent 0d014ba
commit 5c58034
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 57 deletions.
diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue
@@ -204,7 +204,7 @@
             const divInputDom = this.$el.querySelector('.div-input')
             if (divInputDom) {
                 divInputDom.innerHTML = this.value
-                if (this.render) {
+                if (this.render && this.value) {
                     this.handleInputBlur()
                 }
             }

diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue
@@ -159,8 +159,9 @@
         mounted () {
             const divInputDom = this.$el.querySelector('.div-input')
             if (divInputDom) {
-                divInputDom.innerText = typeof this.value === 'string' ? this.value : JSON.stringify(this.value)
-                if (this.render) {
+                const value = typeof this.value === 'string' ? this.value : JSON.stringify(this.value)
+                divInputDom.innerText = value
+                if (this.render && value) {
                     this.handleInputBlur()
                     // 把用户手动换行变成div标签
                     divInputDom.innerHTML = divInputDom.innerHTML.replace(/<br>/g, '<div><br></div>')

diff --git a/frontend/desktop/src/components/common/TemplateCanvas/NodeTemplate/BranchGateway.vue b/frontend/desktop/src/components/common/TemplateCanvas/NodeTemplate/BranchGateway.vue
@@ -16,6 +16,7 @@
             'branch-gateway',
             { 'fail-skip': node.status === 'FINISHED' && node.skip },
             { 'ready': node.ready },
+            { 'actived': node.isActived },
             node.status ? node.status.toLowerCase() : ''
         ]">
         <div class="node-type-icon common-icon-node-branchgateway"></div>

diff --git a/.../desktop/src/components/common/TemplateCanvas/NodeTemplate/ConditionalParallelGateway.vue b/.../desktop/src/components/common/TemplateCanvas/NodeTemplate/ConditionalParallelGateway.vue
@@ -16,6 +16,7 @@
             'branch-gateway',
             { 'fail-skip': node.status === 'FINISHED' && node.skip },
             { 'ready': node.ready },
+            { 'actived': node.isActived },
             node.status ? node.status.toLowerCase() : ''
         ]">
         <div class="node-type-icon common-icon-node-conditionalparallelgateway"></div>

diff --git a/frontend/desktop/src/components/common/TemplateCanvas/NodeTemplate/ConvergeGateway.vue b/frontend/desktop/src/components/common/TemplateCanvas/NodeTemplate/ConvergeGateway.vue
@@ -10,7 +10,15 @@
 * specific language governing permissions and limitations under the License.
 */
 <template>
-    <div :class="['gateway-node', 'converge-gateway', node.status ? node.status.toLowerCase() : '', { 'ready': node.ready }]">
+    <div :class="[
+        'gateway-node',
+        'converge-gateway',
+        node.status ? node.status.toLowerCase() : '',
+        {
+            'ready': node.ready,
+            'actived': node.isActived
+        }
+    ]">
         <div class="node-type-icon common-icon-node-convergegateway"></div>
     </div>
 </template>

diff --git a/frontend/desktop/src/components/common/TemplateCanvas/NodeTemplate/ParallelGateway.vue b/frontend/desktop/src/components/common/TemplateCanvas/NodeTemplate/ParallelGateway.vue
@@ -10,7 +10,15 @@
 * specific language governing permissions and limitations under the License.
 */
 <template>
-    <div :class="['gateway-node', 'parallel-gateway', node.status ? node.status.toLowerCase() : '', { 'ready': node.ready }]">
+    <div :class="[
+        'gateway-node',
+        'parallel-gateway',
+        node.status ? node.status.toLowerCase() : '',
+        {
+            'ready': node.ready,
+            'actived': node.isActived
+        }
+    ]">
         <div class="node-type-icon common-icon-node-parallelgateway"></div>
     </div>
 </template>

diff --git a/frontend/desktop/src/components/common/TemplateCanvas/PalettePanel/index.vue b/frontend/desktop/src/components/common/TemplateCanvas/PalettePanel/index.vue
@@ -33,13 +33,13 @@
                 <div :class="`node-type-icon common-icon-node-endpoint-${langSuffix}`"></div>
             </div>
             <div
-                :class="['palette-item', 'entry-item', 'palette-with-menu', { actived: menuType === 'plugin' }]"
+                :class="['palette-item', 'entry-item', 'palette-with-menu']"
                 data-type="tasknode"
                 @mousedown="onNodeMouseDown('plugin', $event)">
                 <div class="node-type-icon common-icon-node-tasknode"></div>
             </div>
             <div
-                :class="['palette-item','entry-item', 'palette-with-menu', { actived: menuType === 'subflow' }]"
+                :class="['palette-item','entry-item', 'palette-with-menu']"
                 data-type="subflow"
                 @mousedown="onNodeMouseDown('subflow', $event)">
                 <div class="node-type-icon common-icon-node-subflow"></div>
@@ -57,29 +57,14 @@
                 <div class="node-type-icon common-icon-node-conditionalparallelgateway"></div>
             </div>
         </div>
-        <transition name="slideLeft">
-            <node-menu
-                v-if="menuType !== ''"
-                :menu-type="menuType"
-                :template-labels="templateLabels"
-                :built-in-plugins="atomTypeList.tasknode"
-                :common="common"
-                @change="menuType = $event === 'tasknode' ? 'plugin' : 'subflow'"
-                @close="menuType = ''">
-            </node-menu>
-        </transition>
     </div>
 </template>
 <script>
     import i18n from '@/config/i18n/index.js'
-    import NodeMenu from './NodeMenu/NodeMenu.vue'
     import Guide from '@/utils/guide.js'
 
     export default {
         name: 'PalattePanel',
-        components: {
-            NodeMenu
-        },
         props: {
             templateLabels: Array,
             atomTypeList: {
@@ -104,12 +89,6 @@
         },
         data () {
             return {
-                menuType: '',
-                nodeMouse: {
-                    type: '',
-                    startX: null,
-                    startY: null
-                },
                 moveFlag: {
                     x: 0,
                     y: 0
@@ -132,30 +111,6 @@
                     y: e.pageY
                 }
             },
-            onOpenNodeMenu () {
-                this.menuType = this.nodeMouse.type
-            },
-            /**
-             * 节点点击，区分是 展开菜单 还是 拖拽
-             * @param {String} type -node type
-             * @param {Object} e -event
-             */
-            onNodeMouseDown (type, e) {
-                this.nodeMouse.startX = e.pageX
-                this.nodeMouse.startY = e.pageY
-                this.nodeMouse.type = type
-                document.addEventListener('mouseup', this.mouseUpHandler)
-            },
-            mouseUpHandler (e) {
-                const endX = e.pageX
-                const endY = e.pageY
-                const max = Math.max(endX - this.nodeMouse.startX, endY - this.nodeMouse.startY)
-                // 移动距离小于 3 像素，认为是点击事件
-                if (max < 3) {
-                    this.menuType = this.nodeMouse.type
-                }
-                document.removeEventListener('mouseup', this.mouseUpHandler)
-            },
             renderGuide () {
                 const nodesGuide = [
                     {

diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue
@@ -1590,12 +1590,12 @@
         height: 320px;
         margin: 0 25px 8px 15px;
         position: relative;
-        background: #f5f7fb;
+        background: #f5f7fa;
         .sub-flow {
             height: 100%;
             border: 0;
             /deep/.canvas-wrapper {
-                background: #f5f7fb;
+                background: #f5f7fa;
             }
             /deep/.canvas-flow {
                 .active {

diff --git a/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue b/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue
@@ -2406,7 +2406,7 @@
                 document.addEventListener('mouseup', this.handleMouseUp)
             },
             handleMouseMove (event) {
-                const maxWidth = window.innerWidth - 340
+                const maxWidth = window.innerWidth - 400
                 let width = window.innerWidth - event.clientX
                 width = width < 960 ? 960 : width
                 width = width > maxWidth ? maxWidth : width
@@ -2486,6 +2486,22 @@
                 .jtk-endpoint {
                     z-index: 2 !important;
                 }
+                .actived {
+                    box-shadow: none;
+                    &::after {
+                        content: '';
+                        display: block;
+                        height: calc(100% + 16px);
+                        width: calc(100% + 16px);
+                        position: absolute;
+                        top: -9px;
+                        left: -9px;
+                        z-index: -1;
+                        background: #e1ecff;
+                        border: 1px solid #1768ef;
+                        border-radius: 2px;
+                    }
+                }
             }
         }
     }

diff --git a/frontend/desktop/src/pages/template/TemplateEdit/NodeConfig/NodeConfig.vue b/frontend/desktop/src/pages/template/TemplateEdit/NodeConfig/NodeConfig.vue
@@ -1654,7 +1654,7 @@
                 document.addEventListener('mouseup', this.handleMouseUp)
             },
             handleMouseMove (event) {
-                const maxWidth = window.innerWidth - 300
+                const maxWidth = window.innerWidth - 400
                 let width = window.innerWidth - event.clientX
                 width = width < 800 ? 800 : width
                 width = width > maxWidth ? maxWidth : width

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,7 +704,7 @@
                 document.addEventListener('mouseup', this.handleMouseUp)
             },
             handleMouseMove (event) {
-                const maxWidth = window.innerWidth - 300
+                const maxWidth = window.innerWidth - 400
                 let width = window.innerWidth - event.clientX
                 width = width < 800 ? 800 : width
                 width = width > maxWidth ? maxWidth : width