diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 4c83f5c23f..4519e88dce 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,7 +1,11 @@
 <template>
   <div id="app">
-    <router-view/>
-    <plugin-com v-show="false" ref="de-theme" component-name="ThemeSetting"/>
+    <keep-alive>
+      <!-- 路由匹配到的组件将显示在这里 -->
+      <router-view v-if="['/dataset/index', '/system/system-settings/appearance'].includes(key)"></router-view>
+    </keep-alive>
+    <router-view v-if="!['/dataset/index', '/system/system-settings/appearance'].includes(key)"></router-view>
+    <plugin-com v-show="false" ref="de-theme" component-name="ThemeSetting" />
   </div>
 </template>
 
@@ -10,9 +14,11 @@ import PluginCom from '@/views/system/plugin/PluginCom'
 
 export default {
   name: 'App',
-  components: {PluginCom},
-  beforeCreate() {
-
+  components: { PluginCom },
+  computed: {
+    key() {
+      return this.$route.path
+    }
   }
 }
 </script>
diff --git a/frontend/src/layout/components/AppMain.vue b/frontend/src/layout/components/AppMain.vue
index 4651b889b7..518f747189 100644
--- a/frontend/src/layout/components/AppMain.vue
+++ b/frontend/src/layout/components/AppMain.vue
@@ -2,7 +2,11 @@
   <section class="app-main">
     <transition name="fade-transform" mode="out-in">
       <el-main class="ms-main-container">
-        <router-view :key="key" />
+        <keep-alive>
+          <!-- 路由匹配到的组件将显示在这里 -->
+          <router-view v-if="['/dataset/index', '/system/system-settings/appearance'].includes(key)"></router-view>
+        </keep-alive>
+        <router-view v-if="!['/dataset/index', '/system/system-settings/appearance'].includes(key)"></router-view>
       </el-main>
     </transition>
   </section>
@@ -20,32 +24,31 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.app-main {
+  height: 100%;
+  /* topbar 56  */
+  // min-height: calc(100vh - 56px);
+  // width: 100%;
+  // height: 100%;
+  // position: relative;
+  // overflow: hidden;
+}
 
-    .app-main {
-        height: 100%;
-        /* topbar 56  */
-        // min-height: calc(100vh - 56px);
-        // width: 100%;
-        // height: 100%;
-         // position: relative;
-        // overflow: hidden;
-    }
+.fixed-header + .app-main {
+  padding-top: 50px;
+}
 
-    .fixed-header + .app-main {
-        padding-top: 50px;
-    }
-
-    .ms-main-container {
-        height: 100%;
-        padding: 0 !important;
-    }
+.ms-main-container {
+  height: 100%;
+  padding: 0 !important;
+}
 </style>
 
 <style lang="scss">
-    // fix css style bug in open el-dialog
-    .el-popup-parent--hidden {
-        .fixed-header {
-            padding-right: 15px;
-        }
-    }
+// fix css style bug in open el-dialog
+.el-popup-parent--hidden {
+  .fixed-header {
+    padding-right: 15px;
+  }
+}
 </style>
diff --git a/frontend/src/views/dataset/add/AddApi.vue b/frontend/src/views/dataset/add/AddApi.vue
index 8160b47e20..6a2c651051 100644
--- a/frontend/src/views/dataset/add/AddApi.vue
+++ b/frontend/src/views/dataset/add/AddApi.vue
@@ -358,7 +358,7 @@ export default {
     },
 
     cancel() {
-      this.$router.back()
+      this.$router.push('/dataset/index')
     },
 
     dataReset() {
diff --git a/frontend/src/views/dataset/add/AddExcel.vue b/frontend/src/views/dataset/add/AddExcel.vue
index 7e29c5f224..e625892a5d 100644
--- a/frontend/src/views/dataset/add/AddExcel.vue
+++ b/frontend/src/views/dataset/add/AddExcel.vue
@@ -1,18 +1,20 @@
 <template>
-  <div class="dataset-excel">
+  <div class="dataset-excel" v-loading="loading">
     <p v-if="!showLeft" @click="showLeft = true" class="arrow-right">
       <i class="el-icon-d-arrow-right"></i>
     </p>
     <div v-else class="table-list">
       <p class="select-ds">
-        <span>{{ $t('deDataset.select_data_table ') }}
+        <span
+          >{{ $t('deDataset.select_data_table ') }}
           <el-tooltip class="item" effect="dark" placement="right">
             <div slot="content">
-              {{ $t('dataset.excel_info_1') }}<br>
-              {{ $t('dataset.excel_info_2') }}<br>
+              {{ $t('dataset.excel_info_1') }}<br />
+              {{ $t('dataset.excel_info_2') }}<br />
               {{ $t('dataset.excel_info_3') }}
             </div>
-            <i class="el-icon-warning-outline" /> </el-tooltip></span>
+            <i class="el-icon-warning-outline" /> </el-tooltip
+        ></span>
         <i class="el-icon-d-arrow-left" @click="showLeft = false" />
       </p>
       <el-upload
@@ -34,7 +36,7 @@
           :loading="uploading"
           secondary
           :disabled="uploading"
-        >{{ $t('deDataset.upload_data') }}
+          >{{ $t('deDataset.upload_data') }}
         </deBtn>
       </el-upload>
       <div class="table-checkbox-list">
@@ -118,22 +120,20 @@
                     <svg-icon
                       v-if="field.fieldType === 'TEXT'"
                       icon-class="field_text"
-                      class="field-icon-text"
-                    />
+                      class="field-icon-text" />
                     <svg-icon
                       v-if="field.fieldType === 'DATETIME'"
                       icon-class="field_time"
-                      class="field-icon-time"
-                    />
+                      class="field-icon-time" />
                     <svg-icon
                       v-if="
                         field.fieldType === 'LONG' ||
-                          field.fieldType === 'DOUBLE'
+                        field.fieldType === 'DOUBLE'
                       "
                       icon-class="field_value"
-                      class="field-icon-value"
-                    />
-                    <i class="el-icon-arrow-down el-icon--right" /></span>
+                      class="field-icon-value" />
+                    <i class="el-icon-arrow-down el-icon--right"
+                  /></span>
                   <el-dropdown-menu
                     slot="dropdown"
                     style="width: 178px"
@@ -143,32 +143,34 @@
                       v-for="item in fieldOptions"
                       :key="item.value"
                       :command="item.value"
-                    ><span>
-                       <svg-icon
-                         v-if="item.value === 'TEXT'"
-                         icon-class="field_text"
-                         class="field-icon-text"
-                       />
-                       <svg-icon
-                         v-if="item.value === 'DATETIME'"
-                         icon-class="field_time"
-                         class="field-icon-time"
-                       />
-                       <svg-icon
-                         v-if="
-                           item.value === 'LONG' || item.value === 'DOUBLE'
-                         "
-                         icon-class="field_value"
-                         class="field-icon-value"
-                       />
-                     </span>
+                      ><span>
+                        <svg-icon
+                          v-if="item.value === 'TEXT'"
+                          icon-class="field_text"
+                          class="field-icon-text"
+                        />
+                        <svg-icon
+                          v-if="item.value === 'DATETIME'"
+                          icon-class="field_time"
+                          class="field-icon-time"
+                        />
+                        <svg-icon
+                          v-if="
+                            item.value === 'LONG' || item.value === 'DOUBLE'
+                          "
+                          icon-class="field_value"
+                          class="field-icon-value"
+                        />
+                      </span>
                       <span
                         style="
                           color: #8492a6;
                           font-size: 14px;
                           margin-left: 10px;
                         "
-                      >{{ item.label }}</span></el-dropdown-item>
+                        >{{ item.label }}</span
+                      ></el-dropdown-item
+                    >
                   </el-dropdown-menu>
                 </el-dropdown>
                 <span style="font-size: 14px; margin-left: 10px">
@@ -216,6 +218,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       showLeft: true,
       errImg: require('@/assets/None_Select_ds.png'),
       sheetObj: { datasetName: ' ', fields: [] },
@@ -279,9 +282,14 @@ export default {
         this.defaultCheckedKeys.splice(index, 1)
       }
       this.validateName()
-      const labelList = this.$refs.tree.getCheckedNodes().map(ele => ele.excelLable)
-      const excelList = this.excelData.map(ele => ele.excelLable);
-      this.$emit('setTableNum', labelList.filter(ele => !excelList.includes(ele)).length)
+      const labelList = this.$refs.tree
+        .getCheckedNodes()
+        .map((ele) => ele.excelLable)
+      const excelList = this.excelData.map((ele) => ele.excelLable)
+      this.$emit(
+        'setTableNum',
+        labelList.filter((ele) => !excelList.includes(ele)).length
+      )
     },
     nameExsitValidator(ele, checkList) {
       this.$set(
@@ -333,7 +341,7 @@ export default {
     },
     calHeight() {
       const that = this
-      setTimeout(function() {
+      setTimeout(function () {
         const currentHeight = document.documentElement.clientHeight
         that.height = currentHeight - 56 - 30 - 26 - 25 - 35 - 10 - 37 - 20 - 10
       }, 10)
@@ -489,6 +497,7 @@ export default {
         )
           .then(() => {
             table.mergeSheet = true
+            this.loading = true
             post('/dataset/table/update', table).then((response) => {
               this.openMessageSuccess('deDataset.set_saved_successfully')
               this.cancel()
@@ -498,17 +507,30 @@ export default {
             if (action === 'close') {
               return
             }
+            this.loading = true
             table.mergeSheet = false
-            post('/dataset/table/update', table).then((response) => {
-              this.openMessageSuccess('deDataset.set_saved_successfully')
-              this.cancel()
-            })
+            post('/dataset/table/update', table)
+              .then((response) => {
+                this.openMessageSuccess('deDataset.set_saved_successfully')
+                this.cancel()
+              })
+              .finally(() => {
+                this.loading = false
+              })
+          })
+          .finally(() => {
+            this.loading = false
           })
       } else {
-        post('/dataset/table/update', table).then((response) => {
-          this.openMessageSuccess('deDataset.set_saved_successfully')
-          this.cancel()
-        })
+        this.loading = true
+        post('/dataset/table/update', table)
+          .then((response) => {
+            this.openMessageSuccess('deDataset.set_saved_successfully')
+            this.cancel()
+          })
+          .finally(() => {
+            this.loading = false
+          })
       }
     },
     cancel() {
diff --git a/frontend/src/views/dataset/add/AddSQL.vue b/frontend/src/views/dataset/add/AddSQL.vue
index 39f9293e2c..8fad55ec00 100644
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dataset-sql" @mouseup="mouseupDrag">
+  <div class="dataset-sql" @mouseup="mouseupDrag" v-loading="loading">
     <div class="sql-editer">
       <el-row>
         <el-col :span="12">
@@ -385,6 +385,7 @@ export default {
   data() {
     return {
       dataSource: '',
+      loading: false,
       dataTable: '',
       initFlag: true,
       showTable: false,
@@ -485,7 +486,6 @@ export default {
   watch: {
     'param.tableId': {
       handler: function () {
-        this.resetComponent()
         this.initTableInfo()
       }
     }
@@ -636,6 +636,7 @@ export default {
         return
       }
       this.parseVariable()
+      this.loading = true;
       const table = {
         id: this.param.tableId,
         name: this.param.name,
@@ -653,11 +654,13 @@ export default {
       post('/dataset/table/update', table).then((response) => {
         this.openMessageSuccess('deDataset.set_saved_successfully')
         this.cancel()
-      })
+      }).finally(() => {
+        this.loading = false;
+      }) 
     },
 
     cancel() {
-      this.$router.back()
+      this.$router.push('/dataset/index')
     },
 
     showSQL(val) {
@@ -671,17 +674,6 @@ export default {
       this.sql = newCode
       this.$emit('codeChange', this.sql)
     },
-
-    resetComponent() {
-      this.dataSource = ''
-      this.param.name = ''
-      this.sql = ''
-      this.data = []
-      this.fields = []
-      this.mode = '0'
-      this.syncType = 'sync_now'
-    },
-
     variableMgm() {
       this.parseVariable()
       this.dialogTitle = this.$t('sql_variable.variable_mgm') + ' '
diff --git a/frontend/src/views/dataset/add/AddUnion.vue b/frontend/src/views/dataset/add/AddUnion.vue
index e7deb93c6f..29b2d09951 100644
--- a/frontend/src/views/dataset/add/AddUnion.vue
+++ b/frontend/src/views/dataset/add/AddUnion.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="dataset-union" @mouseup="mouseupDrag">
+  <div class="dataset-union" @mouseup="mouseupDrag" v-loading="loading">
     <div :style="{ height: unionHeight + 'px' }" class="unio-editer-container">
       <!--添加第一个数据集按钮-->
-      <div v-if="dataset.length === 0">
-        <el-button type="primary" size="mini" @click="selectDs">
+      <div style="padding: 24px" v-if="dataset.length === 0">
+        <deBtn type="primary" @click="selectDs">
           {{ $t('chart.select_dataset') }}
-        </el-button>
+        </deBtn>
       </div>
       <!--数据集关联树型结构-->
       <div v-else class="union-container">
@@ -57,7 +57,7 @@
         :fix-height="true"
         show-mode="union"
         :custom-type="customType"
-        clear-empty-dir="true"
+        :clear-empty-dir="true"
         @getTable="firstDs"
       />
       <div class="de-foot">
@@ -74,30 +74,29 @@
     </el-drawer>
 
     <!--编辑关联关系-->
-    <el-dialog
+    <el-drawer
       v-if="editUnion"
-      v-dialogDrag
-      top="5vh"
       :title="
         unionParam.type === 'add'
           ? $t('dataset.add_union_relation')
           : $t('dataset.edit_union_relation')
       "
-      :visible="editUnion"
-      :show-close="false"
-      width="600px"
-      class="dialog-css"
+      :visible.sync="editUnion"
+      custom-class="user-drawer union-dataset-drawer"
+      size="840px"
+      v-closePress
+      direction="rtl"
     >
       <union-edit :union-param="unionParam" />
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeEditUnion()">{{
+      <div class="de-foot">
+        <deBtn secondary @click="closeEditUnion()">{{
           $t('dataset.cancel')
-        }}</el-button>
-        <el-button type="primary" size="mini" @click="confirmEditUnion()">{{
+        }}</deBtn>
+        <deBtn type="primary" @click="confirmEditUnion()">{{
           $t('dataset.confirm')
-        }}</el-button>
+        }}</deBtn>
       </div>
-    </el-dialog>
+    </el-drawer>
   </div>
 </template>
 
@@ -125,6 +124,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       // mock data，结构比较复杂，需要这个结构多看看...
       datasetMock: [
         {
@@ -206,6 +206,7 @@ export default {
         this.openMessageSuccess('dataset.char_can_not_more_50', 'error')
         return
       }
+      this.loading = true;
       const table = {
         id: this.param.tableId,
         name: this.param.name,
@@ -218,7 +219,9 @@ export default {
       post('/dataset/table/update', table).then((response) => {
         this.$emit('saveSuccess', table)
         this.cancel()
-      })
+      }).finally(() => {
+        this.loading = false;
+      }) 
     },
     cancel() {
       this.$router.back()
@@ -357,6 +360,7 @@ export default {
   .unio-editer-container {
     min-height: 298px;
     width: 100%;
+    background: #F5F6F7;
   }
 
   .preview-container {
@@ -398,6 +402,7 @@ export default {
 
   .union-container {
     display: flex;
+    padding: 24px;
     width: 100%;
     overflow: auto;
     height: 100%;
diff --git a/frontend/src/views/dataset/add/union/NodeItem.vue b/frontend/src/views/dataset/add/union/NodeItem.vue
index b2b25c9e8a..5fb719eb9c 100644
--- a/frontend/src/views/dataset/add/union/NodeItem.vue
+++ b/frontend/src/views/dataset/add/union/NodeItem.vue
@@ -319,6 +319,7 @@ export default {
   height: 26px;
   line-height: 26px;
   border: #dcdfe6 solid 1px;
+  background: #fff;
   min-width: 160px;
   color: var(--TextPrimary, #606266);
   font-size: 14px;
diff --git a/frontend/src/views/dataset/common/datasetTree.vue b/frontend/src/views/dataset/common/datasetTree.vue
index eeb73c3038..c5e5e0f93d 100644
--- a/frontend/src/views/dataset/common/datasetTree.vue
+++ b/frontend/src/views/dataset/common/datasetTree.vue
@@ -9,7 +9,7 @@
       clearable
       class="main-area-input"
     />
-    <div class="tree">
+    <div class="tree" v-loading="loading">
       <el-tree
         ref="datasetTreeRef"
         class="de-tree"
@@ -133,6 +133,7 @@ export default {
   data() {
     return {
       searchPids: [], // 查询命中的pid
+      loading: false,
       filterText: '',
       searchType: 'all',
       searchMap: {
@@ -227,6 +228,7 @@ export default {
         this.data = JSON.parse(modelInfo)
       }
       this.customType ? this.customType.push('group') : null
+      this.loading = true;
       queryAuthModel(
         {
           modelType: 'dataset',
@@ -244,6 +246,8 @@ export default {
         if (!userCache) {
           this.data = res.data
         }
+      }).finally(() => {
+        this.loading = false
       })
     },
     nodeClick(data, node) {
diff --git a/frontend/src/views/dataset/form.vue b/frontend/src/views/dataset/form.vue
index ee25963638..72c76cb735 100644
--- a/frontend/src/views/dataset/form.vue
+++ b/frontend/src/views/dataset/form.vue
@@ -49,7 +49,7 @@
       :visible.sync="createDataset"
       width="600px"
       v-loading="loading"
-      :before-close="beforeClose"
+      :before-close="back"
     >
       <el-form
         ref="datasetForm"
@@ -117,7 +117,7 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <deBtn secondary @click="close">{{ $t('dataset.cancel') }}</deBtn>
+        <deBtn secondary @click="back">{{ $t('dataset.cancel') }}</deBtn>
         <deBtn type="primary" @click="saveDataset"
           >{{ $t('dataset.confirm') }}
         </deBtn>
@@ -285,9 +285,6 @@ export default {
       if (!value) return true
       return data.name.indexOf(value) !== -1
     },
-    beforeClose() {
-      this.close()
-    },
     nameRepeat(value) {
       if (!this.nameList || this.nameList.length === 0) {
         return false
@@ -310,9 +307,6 @@ export default {
         (name) => name === this.table.name && name !== this.originName
       )
     },
-    close() {
-      this.$router.back()
-    },
     saveDataset() {
       this.$refs.datasetForm.validate((result) => {
         if (result) {
diff --git a/frontend/src/views/dataset/group/Group.vue b/frontend/src/views/dataset/group/Group.vue
index a69cb97e2d..141d660b9b 100644
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@@ -528,7 +528,19 @@ export default {
     }
   },
   activated() {
-    this.nodeClick(this.$refs.datasetTreeRef.getCurrentNode())
+    const dataset = this.$refs.datasetTreeRef?.getCurrentNode()
+    if (!dataset) return
+    queryAuthModel({ modelType: 'dataset' }, true).then((res) => {
+      localStorage.setItem('dataset-tree', JSON.stringify(res.data))
+      this.tData = res.data
+      this.$nextTick(() => {
+        this.$refs.datasetTreeRef?.filter(this.filterText)
+        if (dataset) {
+          this.$refs.datasetTreeRef?.setCurrentNode(dataset)
+          this.nodeClick(dataset)
+        }
+      })
+    })
   },
   created() {
     this.kettleState()
@@ -749,7 +761,7 @@ export default {
           this.tData = res.data
         }
         this.$nextTick(() => {
-          this.$refs.datasetTreeRef.filter(this.filterText)
+          this.$refs.datasetTreeRef?.filter(this.filterText)
         })
       })
     },
diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue
index 7ffc05072b..229955c025 100644
--- a/frontend/src/views/system/user/index.vue
+++ b/frontend/src/views/system/user/index.vue
@@ -149,10 +149,17 @@
           v-if="isPluginLoaded"
           key="roles"
           prop="roles"
-          :formatter="filterRoles"
-          show-overflow-tooltip
           :label="$t('commons.role')"
-        />
+        >
+        <template slot-scope="scope">
+			<el-tooltip popper-class="de-table-tooltips" class="item" effect="dark" placement="top">
+			    <!-- // {{}}会将数据解释为普通文本，而非 HTML 代码。 -->
+			    <div v-html="filterRoles(scope.row.roles)" slot="content"></div>
+			    <div class="de-one-line">{{ filterRoles(scope.row.roles) }}</div>
+		    </el-tooltip>
+		</template>
+
+        </el-table-column>
         <el-table-column
           key="status"
           prop="status"
@@ -453,7 +460,7 @@ export default {
         this.$refs.search.blur()
       }
     },
-    filterRoles(row, column, cellValue) {
+    filterRoles(cellValue) {
       const roleNames = cellValue.map((ele) => ele.roleName)
       return roleNames.length ? roleNames.join() : '-'
     },
@@ -888,5 +895,14 @@ export default {
     width: 100%;
   }
 }
+.de-one-line {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.de-table-tooltips {
+  max-width: 200px;
+}
 </style>