fix: 修复line-height导致的抖动问题

bklog/web/src/global/json-formatter.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :class="['bklog-json-formatter-root', { 'is-wrap-line': isWrap, 'is-inline': !isWrap, 'is-json': formatJson }]">
+  <div
+    :class="['bklog-json-formatter-root', { 'is-wrap-line': isWrap, 'is-inline': !isWrap, 'is-json': formatJson }]"
+    ref="refJsonFormatterCell"
+  >
     <template v-for="item in rootList">
       <span
         :key="item.name"
@@ -24,12 +27,12 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { computed, ref, watch } from 'vue';
+  import { computed, ref, watch, nextTick } from 'vue';
   import useJsonRoot from '../hooks/use-json-root';
   import useStore from '../hooks/use-store';
   //@ts-ignore
   import { parseTableRowData } from '@/common/util';
-
+  import useIntersectionObserver from '@/hooks/use-intersection-observer';
 
   const emit = defineEmits(['menu-click']);
   const store = useStore();
@@ -50,6 +53,8 @@
   });
 
   const formatCounter = ref(0);
+  const refJsonFormatterCell = ref();
+
   const isWrap = computed(() => store.state.tableLineIsWrap);
   const fieldList = computed(() => {
     if (Array.isArray(props.fields)) {
@@ -62,11 +67,21 @@
   const onSegmentClick = args => {
     emit('menu-click', args);
   };
-  const { updateRootFieldOperator, setExpand } = useJsonRoot({
+  const { updateRootFieldOperator, setExpand, setEditor, destroy } = useJsonRoot({
     fields: fieldList.value,
     onSegmentClick,
   });
 
+  const { isIntersecting } = useIntersectionObserver(refJsonFormatterCell, entry => {
+    if (entry.isIntersecting) {
+      nextTick(() => {
+        setEditor(depth.value);
+      });
+    } else {
+      destroy();
+    }
+  });
+
   const convertToObject = val => {
     if (typeof val === 'string' && props.formatJson) {
       const originValue = val.replace(/<\/?mark>/gim, '');
@@ -92,7 +107,7 @@
       return convertToObject(parseTableRowData(props.jsonValue, field.field_name));
     }
 
-    return typeof props.jsonValue === 'object' ? parseTableRowData(props.jsonValue,field.field_name) : props.jsonValue;
+    return typeof props.jsonValue === 'object' ? parseTableRowData(props.jsonValue, field.field_name) : props.jsonValue;
   };
 
   const getFieldFormatter = field => {
@@ -120,6 +135,9 @@
     () => [formatCounter.value],
     () => {
       updateRootFieldOperator(rootList.value, depth.value);
+      if (isIntersecting.value) {
+        setEditor(depth.value);
+      }
     },
     {
       immediate: true,
@@ -132,6 +150,8 @@
       setExpand(depth.value);
     },
   );
+
+
 </script>
 <style lang="scss">
   @import '../global/json-view/index.scss';

bklog/web/src/global/lazy-render.vue

@@ -2,9 +2,14 @@
   <div
     ref="lazyRenderCell"
     class="bklog-lazy-render-cell"
-    :class="{ 'bklog-lazy-loading': !isVisible, 'is-intersecting': isIntersecting }"
+    :class="{
+      'bklog-lazy-loading': !isVisible && delay,
+      'is-intersecting': isIntersecting,
+      'is-not-intersecting': !isIntersecting,
+    }"
+    :style="cellStyle"
   >
-    <template v-if="isVisible">
+    <template v-if="isVisible || !delay">
       <!-- 实际内容 -->
       <slot></slot>
     </template>
@@ -13,6 +18,7 @@
 
 <script setup>
   import { ref, onMounted, onBeforeUnmount, computed, nextTick } from 'vue';
+  import useIntersectionObserver from '@/hooks/use-intersection-observer';
 
   const props = defineProps({
     delay: {
@@ -23,82 +29,34 @@
       type: Boolean,
       default: false,
     },
+    minHeight: {
+      type: String,
+      default: '40px',
+    },
+    root: {
+      type: HTMLDivElement,
+      default: null,
+    },
   });
 
   const lazyRenderCell = ref(null);
   const isVisible = ref(false);
   let observer = null;
-  let visibilityTimeout = null;
-  // const cellWidth = ref('auto');
-  // const cellHeight = ref('auto');
   const isIntersecting = ref(false);
 
-  // const setCellDimensions = () => {
-  //   if (lazyRenderCell.value) {
-  //     cellWidth.value = `${lazyRenderCell.value.offsetWidth}px`;
-  //     cellHeight.value = `${lazyRenderCell.value.offsetHeight}px`;
-  //   }
-  // };
-
-  // const cellStyle = computed(() => {
-  //   if (props.visibleOnly) {
-  //     return {
-  //       width: cellWidth.value,
-  //       height: cellHeight.value,
-  //     };
-  //   }
-
-  //   return {};
-  // });
-
-  const destroyObserver = () => {
-    if (observer) {
-      observer.disconnect();
-      observer = null;
-    }
-  };
-
-  const createObserver = () => {
-    observer = new IntersectionObserver(
-      entries => {
-        entries.forEach(entry => {
-          isIntersecting.value = entry.isIntersecting;
-          if (entry.isIntersecting) {
-            setTimeout(() => {
-              isVisible.value = true;
-            });
-          } else {
-            if (props.visibleOnly) {
-              // if (visibilityTimeout) {
-              //   cancelAnimationFrame(visibilityTimeout);
-              //   visibilityTimeout = null;
-              // }
-              // setCellDimensions();
-              isVisible.value = false;
-              return;
-            }
-          }
-        });
-      },
-      {
-        root: null,
-        threshold: 0.1,
-      },
-    );
-
-    if (lazyRenderCell.value) {
-      observer.observe(lazyRenderCell.value);
-    }
-  };
-
-  onMounted(() => {
-    createObserver();
+  const cellStyle = computed(() => {
+    return {
+      minHeight: props.minHeight,
+    };
   });
 
-  onBeforeUnmount(() => {
-    destroyObserver();
-    if (visibilityTimeout) {
-      clearTimeout(visibilityTimeout);
+  useIntersectionObserver(lazyRenderCell, entry => {
+    if (entry.isIntersecting) {
+      isVisible.value = true;
+    } else {
+      if (props.visibleOnly) {
+        isVisible.value = false;
+      }
     }
   });
 </script>
@@ -108,15 +66,6 @@
     box-sizing: border-box;
     display: flex;
     align-items: center;
-
-    /* min-height: 40px; */
-
-    /* visibility: hidden; */
-
-    /*
-    &.is-intersecting {
-      visibility: visible;
-    } */
   }
 
   .bklog-lazy-render-cell.bklog-lazy-loading::before {

bklog/web/src/hooks/use-intersection-observer.ts

@@ -0,0 +1,74 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台 (BlueKing PaaS) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台 (BlueKing PaaS) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台 (BlueKing PaaS):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+import { onBeforeUnmount, onMounted, ref, Ref } from 'vue';
+
+import { debounce } from 'lodash';
+
+export default (
+  target: Ref<HTMLElement>,
+  callback: (entry: IntersectionObserverEntry) => void,
+  options?: IntersectionObserverInit,
+) => {
+  let observer = null;
+  const destroyObserver = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  };
+  const isIntersecting = ref(false);
+  const debounceCallback = debounce((entry: IntersectionObserverEntry) => callback?.(entry));
+
+  const createObserver = () => {
+    observer = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          isIntersecting.value = entry.isIntersecting;
+          debounceCallback(entry);
+        });
+      },
+      {
+        root: null,
+        threshold: 0.01,
+        ...(options ?? {}),
+      },
+    );
+
+    if (target.value) {
+      observer.observe(target.value);
+    }
+  };
+
+  onMounted(() => {
+    createObserver();
+  });
+
+  onBeforeUnmount(() => {
+    destroyObserver();
+  });
+
+  return { isIntersecting };
+};

bklog/web/src/hooks/use-json-formatter.ts

@@ -331,9 +331,10 @@ export default class UseJsonFormatter {
 
       if (target?.hasAttribute('data-has-word-split')) {
         target.removeAttribute('data-has-word-split');
-        if (typeof this.config.jsonValue === 'string') {
-          target.innerText = this.config.jsonValue;
-        }
+      }
+
+      if (target && typeof this.config.jsonValue === 'string') {
+        target.innerHTML = this.config.jsonValue;
       }
     }
   }

bklog/web/src/hooks/use-json-root.ts

@@ -65,7 +65,7 @@ export default ({ fields, onSegmentClick }) => {
 
         if (!value.isJson) {
           value.editor?.destroy();
-          value.editor?.initStringAsValue();
+          // value.editor?.initStringAsValue();
         }
       });
 
@@ -75,6 +75,40 @@ export default ({ fields, onSegmentClick }) => {
     return initEditPromise;
   };
 
+  const setEditor = depth => {
+    rootFieldOperator.values().forEach(value => {
+      if (!value.editor) {
+        value.editor = new UseJsonFormatter({
+          target: value.ref,
+          fields,
+          jsonValue: value.value,
+          onSegmentClick,
+        });
+      }
+
+      if (value.isJson && value.ref.value) {
+        value.editor?.initEditor(depth);
+        value.editor?.setValue.call(value.editor, depth);
+      }
+
+      if (!value.isJson) {
+        value.editor?.initStringAsValue();
+      }
+    });
+  };
+
+  const destroy = () => {
+    rootFieldOperator.values().forEach(value => {
+      if (value.isJson && value.ref.value) {
+        value.editor?.initEditor(0);
+      }
+
+      if (!value.isJson) {
+        value.editor?.destroy();
+      }
+    });
+  };
+
   const updateRootFieldOperator = (rootFieldList: RootField[], depth: number) => {
     rootFieldList.forEach(({ name, formatter }) => {
       if (rootFieldOperator.has(name)) {
@@ -107,13 +141,14 @@ export default ({ fields, onSegmentClick }) => {
       }
     });
 
-    initRootOperator(depth).then(() => {
-      rootFieldOperator.values().forEach(val => {
-        if (val.isJson) {
-          val.editor?.setValue.call(val.editor, depth);
-        }
-      });
-    });
+    initRootOperator(depth);
+    // .then(() => {
+    //   rootFieldOperator.values().forEach(val => {
+    //     if (val.isJson) {
+    //       val.editor?.setValue.call(val.editor, depth);
+    //     }
+    //   });
+    // });
   };
 
   const setExpand = depth => {
@@ -127,5 +162,7 @@ export default ({ fields, onSegmentClick }) => {
   return {
     updateRootFieldOperator,
     setExpand,
+    setEditor,
+    destroy,
   };
 };