From b1da5ba4bee96881613bdc6f5dc901f0e4dec550 Mon Sep 17 00:00:00 2001
From: ryanlei <ryanlei@webank.com>
Date: Fri, 22 Mar 2024 11:13:25 +0800
Subject: [PATCH] fix: ::v-deep

---
 .../module/common/tabCard/index.vue           | 124 ++++++-----
 .../dataGovernance/view/fieldInfo/index.vue   | 201 +++++++++---------
 .../dataService/module/common/navMenu.vue     |  30 +--
 .../module/dataManagement/index.vue           |  15 +-
 .../assets/styles/workflow.scss               |  86 ++++----
 .../components/tabList/index.scss             |  90 ++++----
 6 files changed, 289 insertions(+), 257 deletions(-)

diff --git a/web/packages/dataGovernance/module/common/tabCard/index.vue b/web/packages/dataGovernance/module/common/tabCard/index.vue
index 64220e6c5a..86ad08b971 100644
--- a/web/packages/dataGovernance/module/common/tabCard/index.vue
+++ b/web/packages/dataGovernance/module/common/tabCard/index.vue
@@ -3,22 +3,32 @@
     <!-- top -->
     <div class="tab-card-t">
       <div class="tab-card-t-l">
-        <SvgIcon icon-class="biao" style="fontSize: 16px;" />
-        <span style="marginLeft: 8px; fontSize: 16px" v-html="model.name "></span>
+        <SvgIcon icon-class="biao" style="fontsize: 16px" />
+        <span
+          style="marginleft: 8px; fontsize: 16px"
+          v-html="model.name"
+        ></span>
       </div>
       <div class="tab-card-t-r">
         <!-- <span>读取次数：{{ model.readCount }}次</span> -->
-        <div>负责人：<span v-html="model.owner" class="content-html"></span></div>
+        <div>
+          负责人：<span v-html="model.owner" class="content-html"></span>
+        </div>
         <div :title="model.createTime">创建时间：{{ model.createTime }}</div>
       </div>
-
     </div>
 
     <!-- bottom -->
     <div class="tab-card-b">
-      <div :title="model.dbName">数据库：<span v-html="model.dbName" class="content-html"></span></div>
-      <div :title="subject">主题域：<span v-html="subject" class="content-html"></span></div>
-      <div :title="layer">分层：<span v-html="layer" class="content-html"></span></div>
+      <div :title="model.dbName">
+        数据库：<span v-html="model.dbName" class="content-html"></span>
+      </div>
+      <div :title="subject">
+        主题域：<span v-html="subject" class="content-html"></span>
+      </div>
+      <div :title="layer">
+        分层：<span v-html="layer" class="content-html"></span>
+      </div>
     </div>
 
     <div class="tab-card-b">
@@ -33,7 +43,12 @@
     <div class="tab-card-b" style="width: 100%">
       <div v-if="model.labels.length > 0">
         <span>标签：</span>
-        <span class="tab-card-b-tag content-html" v-for="(label, idx) in model.labels" :key="idx" v-html="label"></span>
+        <span
+          class="tab-card-b-tag content-html"
+          v-for="(label, idx) in model.labels"
+          :key="idx"
+          v-html="label"
+        ></span>
       </div>
       <div v-else>
         <span>标签：-</span>
@@ -46,57 +61,60 @@
         <span
           v-for="(item, idx) in model.columns"
           :key="idx"
-          v-html="idx + 1 < model.columns.length ? item+'/' : item"
-          class="content-html"></span>
+          v-html="idx + 1 < model.columns.length ? item + '/' : item"
+          class="content-html"
+        ></span>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { EventBus } from "../../../module/common/eventBus/event-bus";
+import { EventBus } from '../../../module/common/eventBus/event-bus'
 export default {
-  name: "tabCard",
+  name: 'tabCard',
   props: {
     model: {
       type: Object,
-      default: null
+      default: null,
     },
   },
   data() {
     return {
       modal: [],
-      query: ''
+      query: '',
     }
   },
   mounted() {
-    EventBus.$on("onQueryForHighLight", query => {
+    EventBus.$on('onQueryForHighLight', (query) => {
       this.query = query
-    });
+    })
   },
   destroyed() {
-    EventBus.$off("onQueryForHighLight")
+    EventBus.$off('onQueryForHighLight')
   },
   methods: {
     onChoose() {
-      this.$emit("on-choose", this.model);
-    }
+      this.$emit('on-choose', this.model)
+    },
   },
   computed: {
     subject: function () {
-      let classifications = this.model.classifications;
-      let subject = "";
+      let classifications = this.model.classifications
+      let subject = ''
       if (classifications && classifications.length) {
-        classifications.forEach(classification => {
-          if (classification.superTypeNames &&
-              classification.superTypeNames.length) {
-            if (classification.superTypeNames[0] === "subject") {
-              subject = classification.typeName;
+        classifications.forEach((classification) => {
+          if (
+            classification.superTypeNames &&
+            classification.superTypeNames.length
+          ) {
+            if (classification.superTypeNames[0] === 'subject') {
+              subject = classification.typeName
             }
           }
-        });
+        })
       }
-      if( this.query ) {
+      if (this.query) {
         let reg = new RegExp(this.query, 'g')
         let _query = `<span>${this.query}</span>`
         subject = subject.replace(reg, _query)
@@ -104,32 +122,36 @@ export default {
       return subject
     },
     layer: function () {
-      let classifications = this.model.classifications;
-      let layer = "";
+      let classifications = this.model.classifications
+      let layer = ''
       if (classifications && classifications.length) {
-        classifications.forEach(classification => {
-          if (classification.superTypeNames &&
-              classification.superTypeNames.length) {
-            if (classification.superTypeNames[0] === "layer" ||
-                  classification.superTypeNames[0] === "layer_system") {
-              layer = classification.typeName;
+        classifications.forEach((classification) => {
+          if (
+            classification.superTypeNames &&
+            classification.superTypeNames.length
+          ) {
+            if (
+              classification.superTypeNames[0] === 'layer' ||
+              classification.superTypeNames[0] === 'layer_system'
+            ) {
+              layer = classification.typeName
             }
           }
-        });
+        })
       }
-      if( this.query ) {
+      if (this.query) {
         let reg = new RegExp(this.query, 'g')
         let _query = `<span>${this.query}</span>`
         layer = layer.replace(reg, _query)
       }
-      return layer;
-    }
-  }
-};
+      return layer
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>
-@import "@dataspherestudio/shared/common/style/variables.scss";
+@import '@dataspherestudio/shared/common/style/variables.scss';
 .tab-card-wrap {
   min-height: 10.5vh;
   padding-left: 24px;
@@ -151,7 +173,7 @@ export default {
     &-l {
       @include font-color(#3495f7, $dark-text-color);
       &::after {
-        content: "";
+        content: '';
         border-left: 1px solid #dee4ec;
         @include border-color(#dee4ec, $dark-border-color-base);
         width: 0;
@@ -162,7 +184,6 @@ export default {
       }
     }
     &-r {
-
       font-size: 14px;
       @include font-color(rgba(0, 0, 0, 0.85), $dark-text-color);
       text-align: left;
@@ -179,7 +200,7 @@ export default {
     text-align: left;
     line-height: 22px;
     margin-top: 8px;
-    >div {
+    > div {
       text-overflow: ellipsis;
       white-space: nowrap;
       word-break: break-all;
@@ -193,7 +214,7 @@ export default {
     &-field {
       height: 40px;
       line-height: 40px;
-      @include bg-color(#F4F7FB, $dark-border-color-base);
+      @include bg-color(#f4f7fb, $dark-border-color-base);
       padding-left: 12px;
 
       font-size: 14px;
@@ -202,17 +223,16 @@ export default {
     }
 
     &-tag {
-      background: rgba(0,0,0,0.04);
-      border: 1px solid #DEE4EC;
+      background: rgba(0, 0, 0, 0.04);
+      border: 1px solid #dee4ec;
       border-radius: 2px;
       padding: 4px 8px;
     }
   }
 }
 .content-html {
-  /deep/ span {
-    color: #3495F7;
+  ::v-deep span {
+    color: #3495f7;
   }
 }
-
 </style>
diff --git a/web/packages/dataGovernance/view/fieldInfo/index.vue b/web/packages/dataGovernance/view/fieldInfo/index.vue
index 01fb2dbc29..5ea0f1695c 100644
--- a/web/packages/dataGovernance/view/fieldInfo/index.vue
+++ b/web/packages/dataGovernance/view/fieldInfo/index.vue
@@ -30,7 +30,7 @@
             <Button
               data-name="select"
               type="primary"
-              @click="e => copy(e, selectSQL)"
+              @click="(e) => copy(e, selectSQL)"
             >复制</Button
             >
           </div>
@@ -48,7 +48,7 @@
               id="copy-button"
               data-clipboard-action="copy"
               data-clipboard-target="#copy-button"
-              @click="e => copy(e, DDLsql)"
+              @click="(e) => copy(e, DDLsql)"
             >复制</Button
             >
           </div>
@@ -76,193 +76,193 @@
 </template>
 
 <script>
-import clipboard from "../../utils/clipboard";
-import { fomatSqlForShow, fomatSqlForCopy } from "../../utils/fomatSQL";
-import { getSelectSql, getSelectDdl, putCommetBulk } from "../../service/api";
+import clipboard from '../../utils/clipboard'
+import { fomatSqlForShow, fomatSqlForCopy } from '../../utils/fomatSQL'
+import { getSelectSql, getSelectDdl, putCommetBulk } from '../../service/api'
 export default {
-  name: "fieldInfo",
+  name: 'fieldInfo',
   props: {
     fieldInfo: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     rangeFieldInfo: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
   data() {
     return {
       isEdit: false,
       fieldColumns: [
-        { title: "序号", key: "id" },
-        { title: "字段名称", key: "name" },
-        { title: "类型", key: "type" },
+        { title: '序号', key: 'id' },
+        { title: '字段名称', key: 'name' },
+        { title: '类型', key: 'type' },
         {
-          title: "描述",
-          key: "comment",
+          title: '描述',
+          key: 'comment',
           render: (h, params) => {
-            let that = this;
+            let that = this
             if (that.isEdit) {
-              return h("input", {
+              return h('input', {
                 domProps: {
-                  value: params.row.comment
+                  value: params.row.comment,
                 },
                 on: {
-                  input: function(event) {
-                    params.row.comment = event.target.value;
+                  input: function (event) {
+                    params.row.comment = event.target.value
                     that.fieldInfoData[params.index].comment =
-                      event.target.value;
-                  }
+                      event.target.value
+                  },
                 },
                 style: {
-                  border: "1px solid #dee4ec",
-                  "border-radius": "4px",
-                  "padding-left": "12px"
-                }
-              });
+                  border: '1px solid #dee4ec',
+                  'border-radius': '4px',
+                  'padding-left': '12px',
+                },
+              })
             } else {
-              return h("span", {}, params.row.comment);
+              return h('span', {}, params.row.comment)
             }
-          }
-        }
+          },
+        },
       ],
       rangeColumns: [
-        { title: "序号", key: "id" },
-        { title: "字段名称", key: "name" },
-        { title: "类型", key: "type" },
+        { title: '序号', key: 'id' },
+        { title: '字段名称', key: 'name' },
+        { title: '类型', key: 'type' },
         {
-          title: "描述",
-          key: "comment",
+          title: '描述',
+          key: 'comment',
           render: (h, params) => {
-            let that = this;
+            let that = this
             if (that.isEdit) {
-              return h("input", {
+              return h('input', {
                 domProps: {
-                  value: params.row.comment
+                  value: params.row.comment,
                 },
                 on: {
-                  input: function(event) {
-                    params.row.comment = event.target.value;
+                  input: function (event) {
+                    params.row.comment = event.target.value
                     that.rangeInfoData[params.index].comment =
-                      event.target.value;
-                  }
+                      event.target.value
+                  },
                 },
                 style: {
-                  border: "1px solid #dee4ec",
-                  "border-radius": "4px",
-                  "padding-left": "12px"
-                }
-              });
+                  border: '1px solid #dee4ec',
+                  'border-radius': '4px',
+                  'padding-left': '12px',
+                },
+              })
             } else {
-              return h("span", {}, params.row.comment);
+              return h('span', {}, params.row.comment)
             }
-          }
-        }
+          },
+        },
       ],
       fieldInfoData: this.fieldInfo,
       rangeInfoData: this.rangeFieldInfo,
       selectFlag: false,
       DDLflag: false,
-      selectSQL: "",
-      DDLsql: ""
-    };
+      selectSQL: '',
+      DDLsql: '',
+    }
   },
   watch: {
     fieldInfo: {
       handler(newVal) {
-        this.fieldInfoData = newVal;
+        this.fieldInfoData = newVal
       },
-      deep: true
+      deep: true,
     },
     rangeFieldInfo: {
       handler(newVal) {
-        this.rangeInfoData = newVal;
+        this.rangeInfoData = newVal
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   computed: {
     selectSql() {
-      return fomatSqlForShow(this.selectSQL);
+      return fomatSqlForShow(this.selectSQL)
     },
     ddlSql() {
-      return fomatSqlForShow(this.DDLsql);
-    }
+      return fomatSqlForShow(this.DDLsql)
+    },
   },
   methods: {
     edit() {
-      this.isEdit = true;
+      this.isEdit = true
     },
     onCancel() {
-      this.isEdit = false;
+      this.isEdit = false
     },
     onSave() {
-      this.isEdit = false;
-      let that = this;
-      let fieldInfoData = this.fieldInfoData.slice(0);
-      let rangeInfoData = this.rangeFieldInfo.slice(0);
-      let resMap = Object.create(null);
+      this.isEdit = false
+      let that = this
+      let fieldInfoData = this.fieldInfoData.slice(0)
+      let rangeInfoData = this.rangeFieldInfo.slice(0)
+      let resMap = Object.create(null)
       if (fieldInfoData.length) {
-        fieldInfoData.forEach(item => {
-          resMap[item.guid] = item.comment;
-        });
+        fieldInfoData.forEach((item) => {
+          resMap[item.guid] = item.comment
+        })
       }
       if (rangeInfoData.length) {
-        rangeInfoData.forEach(item => {
-          resMap[item.guid] = item.comment;
-        });
+        rangeInfoData.forEach((item) => {
+          resMap[item.guid] = item.comment
+        })
       }
       putCommetBulk(resMap)
-        .then(data => {
+        .then((data) => {
           if (data.result) {
-            that.$Message.success(data.result);
+            that.$Message.success(data.result)
           }
         })
-        .catch(err => {
-          console.log("putCommetBulk", err);
-        });
+        .catch((err) => {
+          console.log('putCommetBulk', err)
+        })
     },
     createSelect() {
-      this.selectFlag = true;
+      this.selectFlag = true
       // 请求 Select语句数据
-      let guid = this.$route.params.guid;
+      let guid = this.$route.params.guid
       getSelectSql(guid)
-        .then(data => {
+        .then((data) => {
           if (data.result) {
-            this.selectSQL = data.result;
+            this.selectSQL = data.result
           }
         })
-        .catch(err => {
-          console.log("getSelectSql", err);
-        });
+        .catch((err) => {
+          console.log('getSelectSql', err)
+        })
     },
     createDDL() {
-      this.DDLflag = true;
+      this.DDLflag = true
       // 请求 DDL语句数据
-      let guid = this.$route.params.guid;
+      let guid = this.$route.params.guid
       getSelectDdl(guid)
-        .then(data => {
+        .then((data) => {
           if (data.result) {
-            this.DDLsql = data.result;
+            this.DDLsql = data.result
           }
         })
-        .catch(err => {
-          console.log("getSelectSql", err);
-        });
+        .catch((err) => {
+          console.log('getSelectSql', err)
+        })
     },
     // 复制
     copy(e, sql) {
-      let str = "";
-      str = fomatSqlForCopy(sql);
-      clipboard(str, e);
-    }
-  }
-};
+      let str = ''
+      str = fomatSqlForCopy(sql)
+      clipboard(str, e)
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>
-@import "@dataspherestudio/shared/common/style/variables.scss";
+@import '@dataspherestudio/shared/common/style/variables.scss';
 .field-info-wrap {
   padding-left: 24px;
   padding-right: 24px;
@@ -281,7 +281,6 @@ export default {
   .field-info-b {
     margin-top: 25px;
     &-header {
-
       font-size: 14px;
       @include font-color(rgba(0, 0, 0, 0.85), $dark-text-color);
       line-height: 22px;
@@ -303,7 +302,7 @@ export default {
   overflow-y: auto;
   max-height: 200px;
   div {
-    /deep/ span {
+    ::v-deep span {
       font-weight: bold;
       margin-right: 6px;
     }
diff --git a/web/packages/dataService/module/common/navMenu.vue b/web/packages/dataService/module/common/navMenu.vue
index 2fccb36882..db3c8dd2e3 100644
--- a/web/packages/dataService/module/common/navMenu.vue
+++ b/web/packages/dataService/module/common/navMenu.vue
@@ -41,11 +41,11 @@
   </div>
 </template>
 <script>
-import ManageMenu from "./manageMenu.vue";
-import TreeMenu from "./treeMenu.vue";
+import ManageMenu from './manageMenu.vue'
+import TreeMenu from './treeMenu.vue'
 
 export default {
-  name: "navMenu",
+  name: 'navMenu',
   components: {
     ManageMenu,
     TreeMenu,
@@ -66,7 +66,7 @@ export default {
       projectsTree: [],
       searchValue: 123,
       originDatas: [],
-    };
+    }
   },
   mounted() {},
   methods: {
@@ -75,35 +75,35 @@ export default {
         this.$route.path == `/${tab}` ||
         this.$route.path.startsWith(`/${tab}`)
       ) {
-        this.$emit("on-menu-toggle");
+        this.$emit('on-menu-toggle')
       } else {
         this.$router.push({
           name: tab,
           query: this.$route.query,
-        });
+        })
       }
     },
 
     showModal(pyload) {
-      this.$emit("showModal", pyload);
+      this.$emit('showModal', pyload)
     },
     handleApiChoosed(pyload) {
-      this.$emit("handleApiChoosed", pyload);
+      this.$emit('handleApiChoosed', pyload)
     },
 
     treeMethod(name, payload = {}) {
-      if (name === "getApi") {
-        this.$refs.treeMenu.getAllApi("update", payload);
+      if (name === 'getApi') {
+        this.$refs.treeMenu.getAllApi('update', payload)
       } else {
-        const { id, data } = payload;
-        this.$refs.treeMenu.addApi(id, data);
+        const { id, data } = payload
+        this.$refs.treeMenu.addApi(id, data)
       }
     },
   },
-};
+}
 </script>
 <style lang="scss" scoped>
-@import "@dataspherestudio/shared/common/style/variables.scss";
+@import '@dataspherestudio/shared/common/style/variables.scss';
 .ds-nav-menu-wrap {
   z-index: 2;
   display: flex;
@@ -166,7 +166,7 @@ export default {
     width: 50px;
     height: 44px;
   }
-  /deep/.ivu-tooltip-inner {
+  ::v-deep.ivu-tooltip-inner {
     background-color: rgba(70, 76, 91, 1);
   }
 }
diff --git a/web/packages/dataService/module/dataManagement/index.vue b/web/packages/dataService/module/dataManagement/index.vue
index 29373538f8..bebe7ee5b6 100644
--- a/web/packages/dataService/module/dataManagement/index.vue
+++ b/web/packages/dataService/module/dataManagement/index.vue
@@ -9,7 +9,7 @@
   </div>
 </template>
 <script>
-import navMenu from "../common/navMenu.vue";
+import navMenu from '../common/navMenu.vue'
 export default {
   components: {
     navMenu,
@@ -17,28 +17,28 @@ export default {
   data() {
     return {
       menuFold: false,
-    };
+    }
   },
   methods: {
     handleMenuToggle() {
-      this.menuFold = !this.menuFold;
+      this.menuFold = !this.menuFold
     },
   },
-};
+}
 </script>
 <style lang="scss" scoped>
-@import "@dataspherestudio/shared/common/style/variables.scss";
+@import '@dataspherestudio/shared/common/style/variables.scss';
 .ds-main-content {
   z-index: 1;
   height: 100%;
   margin-left: 304px;
   transition: margin-left 0.3s;
-  /deep/ .monitor-chart-modal {
+  ::v-deep .monitor-chart-modal {
     left: 304px;
   }
   &.ds-main-content-fold {
     margin-left: 54px;
-    /deep/ .monitor-chart-modal {
+    ::v-deep .monitor-chart-modal {
       left: 54px;
     }
   }
@@ -50,4 +50,3 @@ export default {
   }
 }
 </style>
-
diff --git a/web/packages/dolphinScheduler/assets/styles/workflow.scss b/web/packages/dolphinScheduler/assets/styles/workflow.scss
index a44e9eed7d..ad468bd2b9 100644
--- a/web/packages/dolphinScheduler/assets/styles/workflow.scss
+++ b/web/packages/dolphinScheduler/assets/styles/workflow.scss
@@ -14,7 +14,7 @@
  * limitations under the License.
  *
  */
-@import "@dataspherestudio/shared/common/style/variables.scss";
+@import '@dataspherestudio/shared/common/style/variables.scss';
 .workflow-wrap {
   width: 100%;
   height: 100%;
@@ -89,7 +89,7 @@
         font-weight: 400;
         cursor: pointer;
         &:hover {
-          background-color: #2E92F7;
+          background-color: #2e92f7;
           color: #fff;
         }
       }
@@ -162,7 +162,7 @@
       position: relative;
       flex: 1;
       .tabs-content {
-        /deep/ .ivu-tabs-tab {
+        ::v-deep .ivu-tabs-tab {
           font-size: $font-size-large;
         }
       }
@@ -220,47 +220,51 @@
         @include border-color($border-color-base, $dark-border-color-base);
         padding: 0 5px;
         .workflow-tabs-item {
-            margin: 0;
-            height: 31px;
-            padding: 5px 16px 4px;
-            border-bottom: $border-width-base $border-style-base $border-color-base;
-            @include border-color($border-color-base, $dark-border-color-base);
-            border-radius: 4px 4px 0 0;
-            // background: #f8f8f9;
-            @include bg-color($workflow-body-bg-color, $dark-workflow-body-bg-color);
+          margin: 0;
+          height: 31px;
+          padding: 5px 16px 4px;
+          border-bottom: $border-width-base $border-style-base
+            $border-color-base;
+          @include border-color($border-color-base, $dark-border-color-base);
+          border-radius: 4px 4px 0 0;
+          // background: #f8f8f9;
+          @include bg-color(
+            $workflow-body-bg-color,
+            $dark-workflow-body-bg-color
+          );
+          display: inline-block;
+          cursor: pointer;
+          position: relative;
+          &.active {
+            height: 32px;
+            padding-bottom: 5px;
+            background: #fff;
+            transform: translateZ(0);
+            border: 1px solid #dcdee2;
+            border-bottom: 1px solid #fff;
+            // color: #2d8cf0;
+            @include font-color($primary-color, $dark-primary-color);
+          }
+          .workflow-tabs-name {
             display: inline-block;
-            cursor: pointer;
+          }
+          .workflow-tabs-close {
+            width: 22px;
+            margin-right: -6px;
+            height: 22px;
+            font-size: 22px;
+            color: #999;
+            text-align: right;
+            vertical-align: middle;
+            overflow: hidden;
             position: relative;
-            &.active {
-                height: 32px;
-                padding-bottom: 5px;
-                background: #fff;
-                transform: translateZ(0);
-                border: 1px solid #dcdee2;
-                border-bottom:1px solid #fff;
-                // color: #2d8cf0;
-                @include font-color($primary-color, $dark-primary-color);
-            }
-            .workflow-tabs-name {
-                display: inline-block;
-            }
-            .workflow-tabs-close {
-                width: 22px;
-                margin-right: -6px;
-                height: 22px;
-                font-size: 22px;
-                color: #999;
-                text-align: right;
-                vertical-align: middle;
-                overflow: hidden;
-                position: relative;
-                top: -1px;
-                transform-origin: 100% 50%;
-                transition: all .3s ease-in-out;
-                cursor: pointer;
-            }
+            top: -1px;
+            transform-origin: 100% 50%;
+            transition: all 0.3s ease-in-out;
+            cursor: pointer;
+          }
         }
+      }
     }
   }
-  }
 }
diff --git a/web/packages/dolphinScheduler/components/tabList/index.scss b/web/packages/dolphinScheduler/components/tabList/index.scss
index 390a5676e5..adede936bb 100644
--- a/web/packages/dolphinScheduler/components/tabList/index.scss
+++ b/web/packages/dolphinScheduler/components/tabList/index.scss
@@ -1,4 +1,4 @@
-@import "@dataspherestudio/shared/common/style/variables.scss";
+@import '@dataspherestudio/shared/common/style/variables.scss';
 .workflowTabContainer {
   margin-left: 250px;
   transition: margin-left 0.3s;
@@ -36,7 +36,7 @@
         min-width: 320px;
         .ivu-breadcrumb {
           font-size: 21px;
-          /deep/.ivu-breadcrumb-item-separator {
+          ::v-deep.ivu-breadcrumb-item-separator {
             // color: rgba(0,0,0,0.65);
             @include font-color($light-text-color, $dark-text-color);
           }
@@ -48,43 +48,53 @@
           font-size: 14px;
         }
         .bottomTapList {
-            padding: 0px $padding-25;
-            border-bottom: $border-width-base $border-style-base $border-color-base;
-            @include border-color($background-color-base, $dark-workspace-body-bg-color);
-            @include font-color($workspace-title-color, $dark-workspace-title-color);
-            margin-top: 12px;
+          padding: 0px $padding-25;
+          border-bottom: $border-width-base $border-style-base
+            $border-color-base;
+          @include border-color(
+            $background-color-base,
+            $dark-workspace-body-bg-color
+          );
+          @include font-color(
+            $workspace-title-color,
+            $dark-workspace-title-color
+          );
+          margin-top: 12px;
+          flex: none;
+          display: flex;
+          align-items: center;
+          font-size: $font-size-large;
+          .bottomLeftText {
+            cursor: pointer;
             flex: none;
-            display: flex;
-            align-items: center;
             font-size: $font-size-large;
-            .bottomLeftText {
-                cursor: pointer;
-                flex: none;
-                font-size: $font-size-large;
-                padding: 0 15px;
-                margin-bottom: -1px;
-                line-height: 40px;
-                position: relative;
-                &::after {
-                    content: "";
-                    border-left: 1px solid #DEE4EC;
-                    @include border-color($border-color-base, $dark-border-color-base);
-                    width: 0;
-                    position: absolute;
-                    right: -15px;
-                    top: 12px;
-                    height: 16px;
-                    margin: 0 15px;
-                }
-            }
-            .active {
-                border-bottom: 2px solid $primary-color;
-                @include border-color($primary-color, $dark-primary-color);
-            }
-            .bottomRightContainer {
-                flex: 1;
-                height: 40px;
+            padding: 0 15px;
+            margin-bottom: -1px;
+            line-height: 40px;
+            position: relative;
+            &::after {
+              content: '';
+              border-left: 1px solid #dee4ec;
+              @include border-color(
+                $border-color-base,
+                $dark-border-color-base
+              );
+              width: 0;
+              position: absolute;
+              right: -15px;
+              top: 12px;
+              height: 16px;
+              margin: 0 15px;
             }
+          }
+          .active {
+            border-bottom: 2px solid $primary-color;
+            @include border-color($primary-color, $dark-primary-color);
+          }
+          .bottomRightContainer {
+            flex: 1;
+            height: 40px;
+          }
         }
       }
     }
@@ -109,7 +119,7 @@
         line-height: 40px;
         position: relative;
         &::after {
-          content: "";
+          content: '';
           border-left: 1px solid #dee4ec;
           @include border-color($border-color-base, $dark-border-color-base);
           width: 0;
@@ -149,13 +159,13 @@
   padding: 0 10px;
   overflow: hidden;
   margin-right: 8px;
-  @include bg-color( #E1E5EA, $dark-workspace-body-bg-color);
+  @include bg-color(#e1e5ea, $dark-workspace-body-bg-color);
   border-radius: 12px;
   &.active {
     height: 24px;
     @include font-color($primary-color, $dark-primary-color);
     line-height: 24px;
-    @include bg-color(#E8EEF4, $dark-workspace-body-bg-color);
+    @include bg-color(#e8eef4, $dark-workspace-body-bg-color);
     border-radius: 12px;
   }
   &:hover {
@@ -163,7 +173,7 @@
     @include font-color($primary-color, $dark-primary-color);
     line-height: 24px;
     border-radius: 12px;
-    @include bg-color(#D1D7DD, $dark-workspace-body-bg-color);
+    @include bg-color(#d1d7dd, $dark-workspace-body-bg-color);
   }
 }