From 5062193757167679e86b7534698bc46bb5e728fd Mon Sep 17 00:00:00 2001
From: hLinx <327159425@qq.com>
Date: Fri, 4 Aug 2023 17:07:48 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=84=9A=E6=9C=AC=E7=9A=84=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC=E5=AF=B9=E6=AF=94=E9=A1=B5=E9=9D=A2=EF=BC=8C=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=9D=A1=E5=A4=B1=E6=95=88=20#2309?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/script-manage/common/diff.vue   | 276 +++++++++---------
 1 file changed, 136 insertions(+), 140 deletions(-)

diff --git a/src/frontend/src/views/script-manage/common/diff.vue b/src/frontend/src/views/script-manage/common/diff.vue
index a6706f74e3..ad9e8280b9 100644
--- a/src/frontend/src/views/script-manage/common/diff.vue
+++ b/src/frontend/src/views/script-manage/common/diff.vue
@@ -88,16 +88,19 @@
           </bk-select>
         </div>
       </div>
-      <scroll-faker class="content-wraper">
-        <jb-diff
-          ref="diff"
-          class="diff-details"
-          :context="Infinity"
-          format="side-by-side"
-          :language="language"
-          :new-content="newContent"
-          :old-content="oldContent" />
-      </scroll-faker>
+      <div class="content-wraper">
+        <scroll-faker>
+          <jb-diff
+            ref="diff"
+            class="diff-details"
+            :context="Infinity"
+            format="side-by-side"
+            :language="language"
+            :new-content="newContent"
+            :old-content="oldContent"
+            theme="dark" />
+        </scroll-faker>
+      </div>
     </div>
     <i
       class="bk-icon icon-close"
@@ -184,11 +187,7 @@
       this.statisticsDiff();
       this.$once('hook:beforeDestroy', () => {
         window.removeEventListener('keydown', this.handleEsc);
-        try {
-          document.body.removeChild(this.$el);
-        } catch {
-          console.log('error');
-        }
+        this.$el.parentNode.removeChild(this.$el);
       });
     },
     methods: {
@@ -298,167 +297,164 @@
   };
 </script>
 <style lang="postcss">
-  .jb-diff-layout {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    padding: 8px 24px;
-    background-color: #fff;
-
-    .header {
-      display: flex;
-      align-items: center;
-      padding-right: 16px;
-
-      .title {
-        font-size: 20px;
-        line-height: 28px;
-        color: #313238;
-      }
+    .jb-diff-layout {
+      position: fixed;
+      inset: 0;
+      padding: 8px 24px;
+      background-color: #fff;
 
-      .diff-info {
+      .header {
         display: flex;
-        margin-top: 15px;
-        margin-left: auto;
-        font-size: 12px;
-        line-height: 1em;
         align-items: center;
+        padding-right: 16px;
 
-        .diff-del,
-        .diff-change,
-        .diff-ins {
-          display: flex;
-          margin-left: 30px;
-          cursor: pointer;
-          user-select: none;
+        .title {
+          font-size: 20px;
+          line-height: 28px;
+          color: #313238;
         }
 
-        .diff-del {
-          color: #bd5c58;
-
-          .before {
-            background: #b1615b;
+        .diff-info {
+          display: flex;
+          margin-top: 15px;
+          margin-left: auto;
+          font-size: 12px;
+          line-height: 1em;
+          align-items: center;
+
+          .diff-del,
+          .diff-change,
+          .diff-ins {
+            display: flex;
+            margin-left: 30px;
+            cursor: pointer;
+            user-select: none;
           }
 
-          .after {
-            background: #dcdcdc;
-          }
-        }
+          .diff-del {
+            color: #bd5c58;
 
-        .diff-change {
-          color: #63656e;
+            .before {
+              background: #b1615b;
+            }
 
-          .before {
-            background: #b1615b;
+            .after {
+              background: #dcdcdc;
+            }
           }
 
-          .after {
-            background: #9aad76;
+          .diff-change {
+            color: #63656e;
+
+            .before {
+              background: #b1615b;
+            }
+
+            .after {
+              background: #9aad76;
+            }
           }
-        }
 
-        .diff-ins {
-          color: #9aad76;
+          .diff-ins {
+            color: #9aad76;
+
+            .before {
+              background: #dcdcdc;
+            }
 
-          .before {
-            background: #dcdcdc;
+            .after {
+              background: #9aad76;
+            }
           }
 
+          .before,
           .after {
-            background: #9aad76;
+            width: 1em;
+            height: 1em;
           }
-        }
 
-        .before,
-        .after {
-          width: 1em;
-          height: 1em;
+          .after {
+            margin-right: 6px;
+            margin-left: 1px;
+          }
         }
+      }
 
-        .after {
-          margin-right: 6px;
-          margin-left: 1px;
+      .version-select-layout {
+        display: flex;
+        height: 48px;
+        margin-top: 18px;
+        background: #eaebf0;
+        border-radius: 2px 2px 0 0;
+
+        .version-left,
+        .version-right {
+          display: flex;
+          padding: 0 8px;
+          flex: 0 0 50%;
+          align-items: center;
         }
-      }
-    }
 
-    .version-select-layout {
-      display: flex;
-      height: 48px;
-      margin-top: 18px;
-      background: #eaebf0;
-      border-radius: 2px 2px 0 0;
+        .version-left {
+          border-right: 1px solid #dcdee5;
+        }
 
-      .version-left,
-      .version-right {
-        display: flex;
-        padding: 0 8px;
-        flex: 0 0 50%;
-        align-items: center;
+        .bk-select {
+          color: #63656e;
+          background: #fff;
+        }
       }
 
-      .version-left {
-        border-right: 1px solid #dcdee5;
+      .version-selector {
+        width: 300px;
       }
 
-      .bk-select {
-        color: #63656e;
-        background: #fff;
+      .content-wraper {
+        height: calc(100vh - 92px);
       }
-    }
-
-    .version-selector {
-      width: 300px;
-    }
-
-    .content-wraper {
-      max-height: calc(100vh - 92px);
-    }
 
-    .d2h-file-wrapper {
-      border: none;
-    }
+      .d2h-file-wrapper {
+        border: none;
+      }
 
-    .diff-details {
-      position: relative;
-      background-color: #fff;
-    }
+      .diff-details {
+        position: relative;
+        background-color: #fff;
+      }
 
-    .d2h-code-side-linenumber {
-      line-height: 20px;
+      .d2h-code-side-linenumber {
+        line-height: 20px;
+
+        &.active::before {
+          float: left;
+          width: 10px;
+          height: 10px;
+          margin-top: 5px;
+          margin-left: 13px;
+          background: #666;
+          border-radius: 50%;
+          content: "";
+        }
+      }
 
-      &.active::before {
-        float: left;
-        width: 10px;
-        height: 10px;
-        margin-top: 5px;
-        margin-left: 13px;
-        background: #666;
+      .icon-close {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        display: flex;
+        width: 26px;
+        height: 26px;
+        font-size: 22px;
+        color: #979ba5;
+        cursor: pointer;
         border-radius: 50%;
-        content: "";
-      }
-    }
+        transition: all 0.1s;
+        align-items: center;
+        justify-content: center;
 
-    .icon-close {
-      position: absolute;
-      top: 8px;
-      right: 8px;
-      display: flex;
-      width: 26px;
-      height: 26px;
-      font-size: 22px;
-      color: #979ba5;
-      cursor: pointer;
-      border-radius: 50%;
-      transition: all 0.1s;
-      align-items: center;
-      justify-content: center;
-
-      &:hover {
-        background-color: #f0f1f5;
+        &:hover {
+          background-color: #f0f1f5;
+        }
       }
     }
-  }
 </style>