From 9c5ff2b3a82e07b6be23d321233354263ce7cbd7 Mon Sep 17 00:00:00 2001
From: fit2bot <68588906+fit2bot@users.noreply.github.com>
Date: Wed, 5 Nov 2025 17:36:47 +0800
Subject: [PATCH] perf: upgrade vue version (#5260)

* perf: upgrade vue version

* perf: Update Dockerfile with new base image tag

---------

Co-authored-by: zhaojisen <1301338853@qq.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 Dockerfile                                    |  2 +-
 package.json                                  |  6 +--
 .../Apps/VariablesHelpTextDialog/index.vue    | 26 ++++++------
 src/components/Tree/AutoDataZTree/index.vue   | 10 ++---
 src/layout/components/AppMain.vue             |  3 --
 src/layout/components/NavHeader/Search.vue    | 27 ++++++------
 src/layout/components/TagsView/index.vue      |  4 +-
 src/views/login/index.vue                     | 42 +++++++++----------
 src/views/ops/Adhoc/VariableHelpDialog.vue    | 26 ++++++------
 src/views/settings/Auth/Ldap/ImportDialog.vue |  7 +---
 .../settings/Security/WatermarkHelpDialog.vue | 26 ++++++------
 .../Monitor/component/MonitorCard.vue         | 21 ++++++----
 src/views/tickets/components/Steps.vue        |  6 +--
 yarn.lock                                     | 21 ++++------
 14 files changed, 104 insertions(+), 123 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 25c1917a1..8b3132244 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM jumpserver/lina-base:20251030_071727 AS stage-build
+FROM jumpserver/lina-base:20251105_092554 AS stage-build
 
 ARG VERSION
 ENV VERSION=$VERSION
diff --git a/package.json b/package.json
index 038cf4903..07192b2d9 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
     "path-to-regexp": "3.3.0",
     "sortablejs": "^1.15.6",
     "v-sanitize": "^0.0.13",
-    "vue": "2.6.10",
+    "vue": "2.7.16",
     "vue-codemirror": "4.0.6",
     "vue-cookie": "^1.1.4",
     "vue-echarts": "^5.0.0-beta.0",
@@ -119,11 +119,11 @@
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.2",
     "vue-i18n-extract": "^1.1.1",
-    "vue-template-compiler": "2.6.10",
+    "vue-template-compiler": "2.7.16",
     "webpack": "^4.28.4"
   },
   "engines": {
-    "node": ">=8.9",
+    "node": ">=12",
     "npm": ">= 3.0.0"
   },
   "browserslist": [
diff --git a/src/components/Apps/VariablesHelpTextDialog/index.vue b/src/components/Apps/VariablesHelpTextDialog/index.vue
index c1e857d8e..291bcc51f 100644
--- a/src/components/Apps/VariablesHelpTextDialog/index.vue
+++ b/src/components/Apps/VariablesHelpTextDialog/index.vue
@@ -73,28 +73,28 @@ export default {
 }
 </script>
 
-<style>
-.help-dialog.dialog .el-dialog__footer {
+<style lang="scss" scoped>
+::v-deep .help-dialog.dialog .el-dialog__footer {
   border-top: none;
   padding: 8px;
 }
-</style>
 
-<style lang="scss" scoped>
 .help-table {
   width: 100%;
   border-collapse: collapse;
   border: 1px solid #dee2e6;
+}
 
-  &::v-deep th, td {
-    height: 40px;
-    padding: 0 8px;
-    text-align: left;
-  }
+::v-deep .help-table th,
+::v-deep .help-table td {
+  height: 40px;
+  padding: 0 8px;
+  text-align: left;
+}
 
-  &::v-deep .item-td, .item-label {
-    cursor: pointer;
-    color: var(--color-primary);
-  }
+::v-deep .help-table .item-td,
+::v-deep .help-table .item-label {
+  cursor: pointer;
+  color: var(--color-primary);
 }
 </style>
diff --git a/src/components/Tree/AutoDataZTree/index.vue b/src/components/Tree/AutoDataZTree/index.vue
index e3d26c5a3..ee24cf541 100644
--- a/src/components/Tree/AutoDataZTree/index.vue
+++ b/src/components/Tree/AutoDataZTree/index.vue
@@ -421,12 +421,8 @@ export default {
   display: inline-block;
 }
 
-.data-z-tree {
-  ::v-deep {
-    .icon {
-      width: 10px;
-      margin-right: 3px;
-    }
-  }
+.data-z-tree ::v-deep .icon {
+  width: 10px;
+  margin-right: 3px;
 }
 </style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 0654ddf84..4ea27c9b4 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -78,6 +78,3 @@ export default {
   }
 }
 </style>
-
-<style lang="scss">
-</style>
diff --git a/src/layout/components/NavHeader/Search.vue b/src/layout/components/NavHeader/Search.vue
index 040308e42..1420cd1cd 100644
--- a/src/layout/components/NavHeader/Search.vue
+++ b/src/layout/components/NavHeader/Search.vue
@@ -369,7 +369,7 @@ export default {
           }
         }
 
-        .el-input__prefix .el-input__icon{
+        .el-input__prefix .el-input__icon {
           font-size: 15px;
           line-height: 32px;
         }
@@ -402,11 +402,9 @@ export default {
     }
   }
 }
-</style>
 
-<style lang="scss">
 /* 搜索模态框全局样式 */
-.search-modal {
+::v-deep .search-modal {
   &.el-dialog {
     position: fixed;
     top: 5px;
@@ -427,17 +425,17 @@ export default {
   }
 }
 
-body .v-modal {
+::v-deep body .v-modal {
   opacity: 0.3;
 }
 
-.search-modal-content {
+::v-deep .search-modal-content {
   height: 70vh;
   display: flex;
   flex-direction: column;
 }
 
-.search-input-wrapper {
+::v-deep .search-input-wrapper {
   padding: 20px;
   border-bottom: 1px solid #f0f0f0;
   // background: #fff;
@@ -451,7 +449,7 @@ body .v-modal {
   }
 }
 
-.search-results {
+::v-deep .search-results {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
@@ -476,7 +474,7 @@ body .v-modal {
   }
 }
 
-.section-title {
+::v-deep .section-title {
   padding: 12px 24px 6px;
   font-size: 12px;
   line-height: 1.5;
@@ -505,12 +503,12 @@ body .v-modal {
 
     .clear-icon {
       font-size: 14px;
-    color: red;
+      color: red;
     }
   }
 }
 
-.list {
+::v-deep .list {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -581,15 +579,15 @@ body .v-modal {
   }
 }
 
-.loading,
-.empty {
+::v-deep .loading,
+::v-deep .empty {
   padding: 32px 24px;
   color: #909399;
   text-align: center;
   font-size: 14px;
 }
 
-.section.placeholder {
+::v-deep .section.placeholder {
   padding: 32px 24px;
 
   .placeholder-content {
@@ -637,4 +635,3 @@ body .v-modal {
   }
 }
 </style>
-
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 0f289d316..47e6757df 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -276,10 +276,8 @@ export default {
     }
   }
 }
-</style>
 
-<style lang="scss">
-//reset element css of el-icon-close
+// reset element css of el-icon-close
 .tags-view-wrapper {
   .tags-view-item {
     .el-icon-close {
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 5929e84fa..64ee39e70 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -125,17 +125,21 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 /* 修复input 背景不协调 和光标变色 */
 /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
-$bg:#283443;
-$light_gray:#fff;
-$cursor: #fff;
+$input-bg: #283443;
+$input-light-gray: #fff;
+$input-cursor: #fff;
 
-@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+$login-bg: #2d3a4b;
+$login-dark-gray: #889aa4;
+$login-light-gray: #eee;
+
+@supports (-webkit-mask: none) and (not (cater-color: $input-cursor)) {
   .login-container .el-input input {
-    color: $cursor;
+    color: $input-cursor;
   }
 }
 
@@ -147,17 +151,17 @@ $cursor: #fff;
 
     input {
       background: transparent;
-      border: 0px;
+      border: 0;
       -webkit-appearance: none;
-      border-radius: 0px;
+      border-radius: 0;
       padding: 12px 5px 12px 15px;
-      color: $light_gray;
+      color: $input-light-gray;
       height: 47px;
-      caret-color: $cursor;
+      caret-color: $input-cursor;
 
       &:-webkit-autofill {
-        box-shadow: 0 0 0px 1000px $bg inset !important;
-        -webkit-text-fill-color: $cursor !important;
+        box-shadow: 0 0 0 1000px $input-bg inset !important;
+        -webkit-text-fill-color: $input-cursor !important;
       }
     }
   }
@@ -169,17 +173,11 @@ $cursor: #fff;
     color: #454545;
   }
 }
-</style>
-
-<style lang="scss" scoped>
-$bg:#2d3a4b;
-$dark_gray:#889aa4;
-$light_gray:#eee;
 
 .login-container {
   min-height: 100%;
   width: 100%;
-  background-color: $bg;
+  background-color: $login-bg;
   overflow: hidden;
 
   .login-form {
@@ -205,7 +203,7 @@ $light_gray:#eee;
 
   .svg-container {
     padding: 6px 5px 6px 15px;
-    color: $dark_gray;
+    color: $login-dark-gray;
     vertical-align: middle;
     width: 30px;
     display: inline-block;
@@ -216,7 +214,7 @@ $light_gray:#eee;
 
     .title {
       font-size: 26px;
-      color: $light_gray;
+      color: $login-light-gray;
       margin: 0px auto 40px auto;
       text-align: center;
       font-weight: bold;
@@ -228,7 +226,7 @@ $light_gray:#eee;
     right: 10px;
     top: 7px;
     font-size: 16px;
-    color: $dark_gray;
+    color: $login-dark-gray;
     cursor: pointer;
     user-select: none;
   }
diff --git a/src/views/ops/Adhoc/VariableHelpDialog.vue b/src/views/ops/Adhoc/VariableHelpDialog.vue
index 13f1ed42e..a1fef132e 100644
--- a/src/views/ops/Adhoc/VariableHelpDialog.vue
+++ b/src/views/ops/Adhoc/VariableHelpDialog.vue
@@ -67,28 +67,28 @@ export default {
 }
 </script>
 
-<style>
-.help-dialog.dialog .el-dialog__footer {
+<style lang="scss" scoped>
+::v-deep .help-dialog.dialog .el-dialog__footer {
   border-top: none;
   padding: 8px;
 }
-</style>
 
-<style lang="scss" scoped>
 .help-table {
   width: 100%;
   border-collapse: collapse;
   border: 1px solid #dee2e6;
+}
 
-  &::v-deep th, td {
-    height: 40px;
-    padding: 0 8px;
-    text-align: left;
-  }
+::v-deep .help-table th,
+::v-deep .help-table td {
+  height: 40px;
+  padding: 0 8px;
+  text-align: left;
+}
 
-  &::v-deep .item-td, .item-label {
-    cursor: pointer;
-    color: var(--color-primary);
-  }
+::v-deep .help-table .item-td,
+::v-deep .help-table .item-label {
+  cursor: pointer;
+  color: var(--color-primary);
 }
 </style>
diff --git a/src/views/settings/Auth/Ldap/ImportDialog.vue b/src/views/settings/Auth/Ldap/ImportDialog.vue
index 578e60b15..d25450413 100644
--- a/src/views/settings/Auth/Ldap/ImportDialog.vue
+++ b/src/views/settings/Auth/Ldap/ImportDialog.vue
@@ -222,13 +222,11 @@ export default {
 }
 </script>
 
-<style>
-.el-select-dropdown.select-org-dropdown {
+<style lang="scss" scoped>
+::v-deep .el-select-dropdown.select-org-dropdown {
   max-width: 300px !important;
 }
-</style>
 
-<style lang="scss" scoped>
 .org-select {
   float: left;
   width: 300px;
@@ -245,5 +243,4 @@ export default {
     width: 180px !important;
   }
 }
-
 </style>
diff --git a/src/views/settings/Security/WatermarkHelpDialog.vue b/src/views/settings/Security/WatermarkHelpDialog.vue
index 1dae7a358..66b94ea0e 100644
--- a/src/views/settings/Security/WatermarkHelpDialog.vue
+++ b/src/views/settings/Security/WatermarkHelpDialog.vue
@@ -73,28 +73,28 @@ export default {
 }
 </script>
 
-<style>
-.help-dialog.dialog .el-dialog__footer {
+<style lang="scss" scoped>
+::v-deep .help-dialog.dialog .el-dialog__footer {
   border-top: none;
   padding: 8px;
 }
-</style>
 
-<style lang="scss" scoped>
 .help-table {
   width: 100%;
   border-collapse: collapse;
   border: 1px solid #dee2e6;
+}
 
-  &::v-deep th, td {
-    height: 40px;
-    padding: 0 8px;
-    text-align: left;
-  }
+::v-deep .help-table th,
+::v-deep .help-table td {
+  height: 40px;
+  padding: 0 8px;
+  text-align: left;
+}
 
-  &::v-deep .item-td, .item-label {
-    cursor: pointer;
-    color: var(--color-primary);
-  }
+::v-deep .help-table .item-td,
+::v-deep .help-table .item-label {
+  cursor: pointer;
+  color: var(--color-primary);
 }
 </style>
diff --git a/src/views/settings/Terminal/Monitor/component/MonitorCard.vue b/src/views/settings/Terminal/Monitor/component/MonitorCard.vue
index 1a1a40a06..06e3a4964 100644
--- a/src/views/settings/Terminal/Monitor/component/MonitorCard.vue
+++ b/src/views/settings/Terminal/Monitor/component/MonitorCard.vue
@@ -219,11 +219,12 @@ export default {
 }
 </script>
 
-<style lang="scss">
-.el-popover.el-popper.monitor-popover {
+<style lang="scss" scoped>
+:global(.el-popover.el-popper.monitor-popover) {
   ul {
     padding-left: 15px;
     margin: 0;
+
     li {
       line-height: 24px;
       color: var(--color-primary);
@@ -231,19 +232,19 @@ export default {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
+
       &:hover {
-        filter: opacity(65%)!important;
+        filter: opacity(65%) !important;
       }
     }
   }
 }
-</style>
 
-<style lang="less" scoped>
 .echarts {
   width: 100%;
   height: 150px;
 }
+
 .name {
   display: inline-block;
   margin-bottom: 8px;
@@ -256,6 +257,7 @@ export default {
   justify-content: space-between;
   font-size: 14px;
   margin-bottom: 8px;
+
   .num {
     margin-left: 2px;
     cursor: pointer;
@@ -279,9 +281,9 @@ export default {
   line-height: 20px;
   padding: 2px 0;
   color: #fff;
-  -webkit-transition: width .6s ease;
-  -o-transition: width .6s ease;
-  transition: width .6s ease;
+  -webkit-transition: width 0.6s ease;
+  -o-transition: width 0.6s ease;
+  transition: width 0.6s ease;
   overflow: hidden;
 }
 
@@ -292,9 +294,11 @@ export default {
   margin-right: 5px;
   border-radius: 4px;
   background-color: currentColor;
+
   &:hover {
     transform: scale(1.2);
   }
+
   &:last-child {
     margin-right: 0;
   }
@@ -303,6 +307,7 @@ export default {
 .session {
   margin-top: 13px;
   border-left: 1px solid #f3f3f3;
+
   .session-title {
     margin-bottom: 8px;
     color: #a3a3a4;
diff --git a/src/views/tickets/components/Steps.vue b/src/views/tickets/components/Steps.vue
index 3c24e993e..b26cee026 100644
--- a/src/views/tickets/components/Steps.vue
+++ b/src/views/tickets/components/Steps.vue
@@ -115,14 +115,12 @@ export default {
 }
 </script>
 
-<style>
-.acceptance .el-message-box__content {
+<style lang="scss" scoped>
+::v-deep .acceptance .el-message-box__content {
   overflow-y: auto;
   max-height: 400px;
 }
-</style>
 
-<style lang='scss' scoped>
 .box {
   margin-bottom: 15px;
 }
diff --git a/yarn.lock b/yarn.lock
index 176b1de5d..97fe06133 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6916,7 +6916,7 @@ hasown@^2.0.0, hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
-he@1.2.x, he@^1.1.0, he@^1.1.1:
+he@1.2.x, he@^1.1.1, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmmirror.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
@@ -14423,32 +14423,27 @@ vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@2.6.10:
-  version "2.6.10"
-  resolved "https://registry.npmmirror.com/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz#323b4f3495f04faa3503337a82f5d6507799c9cc"
-  integrity sha512-jVZkw4/I/HT5ZMvRnhv78okGusqe0+qH2A0Em0Cp8aq78+NK9TII263CDVz2QXZsIT+yyV/gZc/j/vlwa+Epyg==
+vue-template-compiler@2.7.16:
+  version "2.7.16"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz#c81b2d47753264c77ac03b9966a46637482bb03b"
+  integrity sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==
   dependencies:
     de-indent "^1.0.2"
-    he "^1.1.0"
+    he "^1.2.0"
 
 vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
   version "1.9.1"
   resolved "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@2.6.10:
-  version "2.6.10"
-  resolved "https://registry.npmmirror.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
-  integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==
-
 vue@2.6.11:
   version "2.6.11"
   resolved "https://registry.npmmirror.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
   integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
 
-vue@^2.2.6:
+vue@2.7.16, vue@^2.2.6:
   version "2.7.16"
-  resolved "https://registry.npmmirror.com/vue/-/vue-2.7.16.tgz#98c60de9def99c0e3da8dae59b304ead43b967c9"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.16.tgz#98c60de9def99c0e3da8dae59b304ead43b967c9"
   integrity sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==
   dependencies:
     "@vue/compiler-sfc" "2.7.16"