diff --git a/backend/src/main/java/io/dataease/auth/service/impl/AuthUserServiceImpl.java b/backend/src/main/java/io/dataease/auth/service/impl/AuthUserServiceImpl.java
index 485f6af09e..d2be520475 100644
--- a/backend/src/main/java/io/dataease/auth/service/impl/AuthUserServiceImpl.java
+++ b/backend/src/main/java/io/dataease/auth/service/impl/AuthUserServiceImpl.java
@@ -13,6 +13,7 @@ import io.dataease.plugins.common.base.domain.SysUser;
 import io.dataease.plugins.common.base.mapper.SysUserMapper;
 import io.dataease.plugins.common.service.PluginCommonService;
 import io.dataease.plugins.config.SpringContextUtil;
+import io.dataease.plugins.util.PluginUtils;
 import io.dataease.plugins.xpack.cas.service.CasXpackService;
 import io.dataease.plugins.xpack.ldap.service.LdapXpackService;
 import io.dataease.plugins.xpack.oidc.service.OidcXpackService;
@@ -95,7 +96,7 @@ public class AuthUserServiceImpl implements AuthUserService {
     public List<String> permissions(Long userId) {
         try {
             // 用户登录获取菜单权限时同时更新插件菜单表
-            dynamicMenuService.syncPluginMenu();
+            dynamicMenuService.syncPluginMenu(PluginUtils.pluginMenus());
         } catch (Exception e) {
             LogUtil.error(e);
             //ignore
diff --git a/backend/src/main/java/io/dataease/auth/service/impl/DynamicMenuServiceImpl.java b/backend/src/main/java/io/dataease/auth/service/impl/DynamicMenuServiceImpl.java
index 86a808436f..dc8b5e8954 100644
--- a/backend/src/main/java/io/dataease/auth/service/impl/DynamicMenuServiceImpl.java
+++ b/backend/src/main/java/io/dataease/auth/service/impl/DynamicMenuServiceImpl.java
@@ -12,6 +12,7 @@ import io.dataease.plugins.util.PluginUtils;
 import org.apache.commons.collections4.CollectionUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Propagation;
 import org.springframework.transaction.annotation.Transactional;
 
 import javax.annotation.Resource;
@@ -118,12 +119,9 @@ public class DynamicMenuServiceImpl implements DynamicMenuService {
         return null == pid || pid == 0L;
     }
 
-    @Transactional
-    public void syncPluginMenu() {
+    @Transactional(propagation = Propagation.REQUIRES_NEW)
+    public void syncPluginMenu(List<PluginSysMenu> pluginSysMenuList) {
         extPluginSysMenuMapper.deletePluginMenu();
-        List<PluginSysMenu> pluginSysMenuList = PluginUtils.pluginMenus();
-        Set<PluginSysMenu> pluginSysMenuSet = new HashSet<>(pluginSysMenuList);
-        pluginSysMenuList = new ArrayList<>(pluginSysMenuSet);
         if (CollectionUtils.isNotEmpty(pluginSysMenuList)) {
             extPluginSysMenuMapper.savePluginMenu(pluginSysMenuList);
         }
diff --git a/backend/src/main/java/io/dataease/commons/model/BaseRspModel.java b/backend/src/main/java/io/dataease/commons/model/BaseRspModel.java
index c2478a9147..6b75aab6a8 100644
--- a/backend/src/main/java/io/dataease/commons/model/BaseRspModel.java
+++ b/backend/src/main/java/io/dataease/commons/model/BaseRspModel.java
@@ -3,9 +3,7 @@ package io.dataease.commons.model;
 
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
-
 import java.io.Serializable;
-import java.util.List;
 
 @Data
 public class BaseRspModel implements Serializable {
diff --git a/backend/src/main/java/io/dataease/commons/wrapper/XssAndSqlHttpServletRequestWrapper.java b/backend/src/main/java/io/dataease/commons/wrapper/XssAndSqlHttpServletRequestWrapper.java
index 973d0173e1..a9251e291c 100644
--- a/backend/src/main/java/io/dataease/commons/wrapper/XssAndSqlHttpServletRequestWrapper.java
+++ b/backend/src/main/java/io/dataease/commons/wrapper/XssAndSqlHttpServletRequestWrapper.java
@@ -17,7 +17,6 @@ import com.google.gson.Gson;
 import io.dataease.commons.holder.ThreadLocalContextHolder;
 import io.dataease.commons.utils.CommonBeanFactory;
 import io.dataease.commons.utils.ServletUtils;
-import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.core.env.Environment;
 import org.springframework.util.StreamUtils;
diff --git a/backend/src/main/java/io/dataease/controller/chart/ChartViewController.java b/backend/src/main/java/io/dataease/controller/chart/ChartViewController.java
index 34e6002cd1..c8b9d03057 100644
--- a/backend/src/main/java/io/dataease/controller/chart/ChartViewController.java
+++ b/backend/src/main/java/io/dataease/controller/chart/ChartViewController.java
@@ -8,11 +8,9 @@ import io.dataease.commons.constants.ResourceAuthLevel;
 import io.dataease.controller.request.chart.*;
 import io.dataease.controller.response.ChartDetail;
 import io.dataease.dto.chart.ChartViewDTO;
-import io.dataease.plugins.common.base.domain.ChartViewCacheWithBLOBs;
 import io.dataease.plugins.common.base.domain.ChartViewWithBLOBs;
 import io.dataease.service.chart.ChartViewCacheService;
 import io.dataease.service.chart.ChartViewService;
-import io.dataease.service.panel.PanelViewService;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
 import org.springframework.web.bind.annotation.*;
diff --git a/backend/src/main/java/io/dataease/controller/dataset/DataSetGroupController.java b/backend/src/main/java/io/dataease/controller/dataset/DataSetGroupController.java
index d6d8620060..8833cccf3a 100644
--- a/backend/src/main/java/io/dataease/controller/dataset/DataSetGroupController.java
+++ b/backend/src/main/java/io/dataease/controller/dataset/DataSetGroupController.java
@@ -1,14 +1,12 @@
 package io.dataease.controller.dataset;
 
 import com.github.xiaoymin.knife4j.annotations.ApiSupport;
-import io.dataease.auth.annotation.DeLog;
 import io.dataease.auth.annotation.DePermission;
 import io.dataease.auth.annotation.DePermissions;
 import io.dataease.commons.constants.DePermissionType;
 import io.dataease.commons.constants.ResourceAuthLevel;
 import io.dataease.commons.constants.SysLogConstants;
 import io.dataease.commons.utils.DeLogUtils;
-import io.dataease.controller.dataset.request.DeleteGroupRequest;
 import io.dataease.controller.request.dataset.DataSetGroupRequest;
 import io.dataease.dto.SysLogDTO;
 import io.dataease.dto.dataset.DataSetGroupDTO;
@@ -20,7 +18,6 @@ import io.swagger.annotations.ApiOperation;
 import org.apache.shiro.authz.annotation.Logical;
 import org.springframework.web.bind.annotation.*;
 import springfox.documentation.annotations.ApiIgnore;
-
 import javax.annotation.Resource;
 import java.util.List;
 
diff --git a/backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java b/backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java
index b1644ab116..6832a45023 100644
--- a/backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java
+++ b/backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java
@@ -34,7 +34,6 @@ import javax.annotation.Resource;
 import javax.servlet.http.HttpServletRequest;
 import java.util.*;
 import java.util.stream.Collectors;
-import java.util.stream.Stream;
 
 /**
  * @Author gin
diff --git a/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java b/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
index 241d0fd29f..c8d3478e44 100644
--- a/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
+++ b/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
@@ -6,7 +6,6 @@ import io.dataease.auth.annotation.DePermissionProxy;
 import io.dataease.auth.annotation.DePermissions;
 import io.dataease.controller.request.panel.PanelGroupBaseInfoRequest;
 import io.dataease.plugins.common.base.domain.PanelGroup;
-import io.dataease.plugins.common.base.domain.PanelGroupWithBLOBs;
 import io.dataease.commons.constants.DePermissionType;
 import io.dataease.commons.constants.ResourceAuthLevel;
 import io.dataease.controller.handler.annotation.I18n;
@@ -19,10 +18,8 @@ import io.dataease.service.panel.PanelGroupService;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
 import springfox.documentation.annotations.ApiIgnore;
-
 import org.apache.shiro.authz.annotation.Logical;
 import org.springframework.web.bind.annotation.*;
-
 import javax.annotation.Resource;
 import javax.servlet.http.HttpServletResponse;
 import java.io.IOException;
diff --git a/backend/src/main/java/io/dataease/controller/panel/PanelViewLinkageController.java b/backend/src/main/java/io/dataease/controller/panel/PanelViewLinkageController.java
index 54e5b24fbe..69f707ae48 100644
--- a/backend/src/main/java/io/dataease/controller/panel/PanelViewLinkageController.java
+++ b/backend/src/main/java/io/dataease/controller/panel/PanelViewLinkageController.java
@@ -5,7 +5,6 @@ import com.github.xiaoymin.knife4j.annotations.ApiSupport;
 import io.dataease.auth.annotation.DePermissionProxy;
 import io.dataease.commons.model.BaseRspModel;
 import io.dataease.controller.request.panel.PanelLinkageRequest;
-import io.dataease.dto.PanelViewLinkageDTO;
 import io.dataease.dto.PermissionProxy;
 import io.dataease.service.panel.PanelViewLinkageService;
 import io.swagger.annotations.Api;
diff --git a/backend/src/main/java/io/dataease/controller/request/chart/ChartCalRequest.java b/backend/src/main/java/io/dataease/controller/request/chart/ChartCalRequest.java
index 89d8b40e09..9193118bc1 100644
--- a/backend/src/main/java/io/dataease/controller/request/chart/ChartCalRequest.java
+++ b/backend/src/main/java/io/dataease/controller/request/chart/ChartCalRequest.java
@@ -1,6 +1,5 @@
 package io.dataease.controller.request.chart;
 
-import io.dataease.plugins.common.base.domain.ChartViewWithBLOBs;
 import io.dataease.dto.chart.ChartViewDTO;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
diff --git a/backend/src/main/java/io/dataease/controller/request/chart/ChartExtRequest.java b/backend/src/main/java/io/dataease/controller/request/chart/ChartExtRequest.java
index dfb72cd05a..55c24e6ae2 100644
--- a/backend/src/main/java/io/dataease/controller/request/chart/ChartExtRequest.java
+++ b/backend/src/main/java/io/dataease/controller/request/chart/ChartExtRequest.java
@@ -5,8 +5,6 @@ import io.dataease.plugins.common.request.chart.ChartExtFilterRequest;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Getter;
 import lombok.Setter;
-import springfox.documentation.annotations.ApiIgnore;
-
 import java.util.List;
 
 /**
diff --git a/backend/src/main/java/io/dataease/controller/request/dataset/DataSetTableRequest.java b/backend/src/main/java/io/dataease/controller/request/dataset/DataSetTableRequest.java
index bd33c0b6ae..c3d1c793fd 100644
--- a/backend/src/main/java/io/dataease/controller/request/dataset/DataSetTableRequest.java
+++ b/backend/src/main/java/io/dataease/controller/request/dataset/DataSetTableRequest.java
@@ -6,8 +6,6 @@ import io.dataease.plugins.common.dto.datasource.TableField;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Getter;
 import lombok.Setter;
-import springfox.documentation.annotations.ApiIgnore;
-
 import java.util.List;
 
 /**
diff --git a/backend/src/main/java/io/dataease/controller/response/ChartDetail.java b/backend/src/main/java/io/dataease/controller/response/ChartDetail.java
index 39143f3784..d38736e20c 100644
--- a/backend/src/main/java/io/dataease/controller/response/ChartDetail.java
+++ b/backend/src/main/java/io/dataease/controller/response/ChartDetail.java
@@ -1,8 +1,6 @@
 package io.dataease.controller.response;
 
 import io.dataease.plugins.common.base.domain.ChartViewWithBLOBs;
-import io.dataease.plugins.common.base.domain.DatasetTable;
-import io.dataease.plugins.common.base.domain.Datasource;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
 
diff --git a/backend/src/main/java/io/dataease/controller/sys/LicenseController.java b/backend/src/main/java/io/dataease/controller/sys/LicenseController.java
index d45745a8bb..d6e7869f7a 100644
--- a/backend/src/main/java/io/dataease/controller/sys/LicenseController.java
+++ b/backend/src/main/java/io/dataease/controller/sys/LicenseController.java
@@ -1,8 +1,5 @@
 package io.dataease.controller.sys;
 
-
-
-import com.google.gson.Gson;
 import io.dataease.commons.license.DefaultLicenseService;
 import io.dataease.commons.license.F2CLicenseResponse;
 import io.dataease.controller.ResultHolder;
@@ -12,7 +9,6 @@ import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 import springfox.documentation.annotations.ApiIgnore;
-
 import javax.annotation.Resource;
 
 @ApiIgnore
diff --git a/backend/src/main/java/io/dataease/controller/sys/MsgController.java b/backend/src/main/java/io/dataease/controller/sys/MsgController.java
index c1cd24783f..5cadd80227 100644
--- a/backend/src/main/java/io/dataease/controller/sys/MsgController.java
+++ b/backend/src/main/java/io/dataease/controller/sys/MsgController.java
@@ -21,7 +21,6 @@ import org.apache.commons.lang3.ObjectUtils;
 import org.springframework.web.bind.annotation.*;
 import javax.annotation.Resource;
 import java.util.List;
-import java.util.Map;
 import java.util.stream.Collectors;
 import io.swagger.annotations.ApiImplicitParam;
 import io.swagger.annotations.ApiImplicitParams;
diff --git a/backend/src/main/java/io/dataease/controller/sys/SysPluginController.java b/backend/src/main/java/io/dataease/controller/sys/SysPluginController.java
index c9a0992f59..a43458f112 100644
--- a/backend/src/main/java/io/dataease/controller/sys/SysPluginController.java
+++ b/backend/src/main/java/io/dataease/controller/sys/SysPluginController.java
@@ -6,7 +6,6 @@ import io.dataease.plugins.common.base.domain.MyPlugin;
 import io.dataease.commons.utils.PageUtils;
 import io.dataease.commons.utils.Pager;
 import io.dataease.controller.sys.base.BaseGridRequest;
-import io.dataease.controller.sys.request.PluginStatus;
 import io.dataease.service.sys.PluginService;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
diff --git a/backend/src/main/java/io/dataease/controller/wizard/ReptileController.java b/backend/src/main/java/io/dataease/controller/wizard/ReptileController.java
index 3fb4b2cd80..9d252df2ff 100644
--- a/backend/src/main/java/io/dataease/controller/wizard/ReptileController.java
+++ b/backend/src/main/java/io/dataease/controller/wizard/ReptileController.java
@@ -4,15 +4,11 @@ import com.github.xiaoymin.knife4j.annotations.ApiSupport;
 import io.dataease.service.wizard.ReptileService;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
-import org.springframework.context.MessageSource;
-import org.springframework.context.i18n.LocaleContextHolder;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
-
 import javax.annotation.Resource;
 import java.util.List;
-import java.util.Map;
 
 @Api(tags = "首页")
 @ApiSupport(order = 80)
diff --git a/backend/src/main/java/io/dataease/dto/chart/ScatterChartDataDTO.java b/backend/src/main/java/io/dataease/dto/chart/ScatterChartDataDTO.java
index d8ee6cd6ef..1c67f46bb4 100644
--- a/backend/src/main/java/io/dataease/dto/chart/ScatterChartDataDTO.java
+++ b/backend/src/main/java/io/dataease/dto/chart/ScatterChartDataDTO.java
@@ -1,8 +1,6 @@
 package io.dataease.dto.chart;
 
 import lombok.Data;
-
-import java.math.BigDecimal;
 import java.util.List;
 
 /**
diff --git a/backend/src/main/java/io/dataease/dto/dataset/ExcelSheetData.java b/backend/src/main/java/io/dataease/dto/dataset/ExcelSheetData.java
index 9380de31f9..c085d37048 100644
--- a/backend/src/main/java/io/dataease/dto/dataset/ExcelSheetData.java
+++ b/backend/src/main/java/io/dataease/dto/dataset/ExcelSheetData.java
@@ -3,8 +3,6 @@ package io.dataease.dto.dataset;
 import io.dataease.plugins.common.dto.datasource.TableField;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
-import springfox.documentation.annotations.ApiIgnore;
-
 import java.util.List;
 import java.util.Map;
 
diff --git a/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java b/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java
index 90998aa082..bfd71cc075 100644
--- a/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java
+++ b/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java
@@ -5,8 +5,6 @@ import io.dataease.plugins.common.base.domain.PanelGroupWithBLOBs;
 import io.dataease.plugins.common.model.ITreeBase;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
-
-import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
 
diff --git a/backend/src/main/java/io/dataease/plugins/server/ColumnPermissionsController.java b/backend/src/main/java/io/dataease/plugins/server/ColumnPermissionsController.java
index 621750a2ae..20d75b4e89 100644
--- a/backend/src/main/java/io/dataease/plugins/server/ColumnPermissionsController.java
+++ b/backend/src/main/java/io/dataease/plugins/server/ColumnPermissionsController.java
@@ -12,18 +12,13 @@ import io.dataease.plugins.common.entity.XpackConditionEntity;
 import io.dataease.plugins.common.entity.XpackGridRequest;
 import io.dataease.plugins.config.SpringContextUtil;
 import io.dataease.plugins.xpack.auth.dto.request.DataSetColumnPermissionsDTO;
-import io.dataease.plugins.xpack.auth.dto.request.DataSetRowPermissionsDTO;
 import io.dataease.plugins.xpack.auth.dto.request.DatasetColumnPermissions;
-import io.dataease.plugins.xpack.auth.dto.request.DatasetRowPermissions;
 import io.dataease.plugins.xpack.auth.service.ColumnPermissionService;
-import io.dataease.plugins.xpack.auth.service.RowPermissionService;
 import io.swagger.annotations.ApiOperation;
 import org.apache.commons.lang3.StringUtils;
-import org.apache.shiro.authz.annotation.RequiresPermissions;
 import org.springframework.util.CollectionUtils;
 import org.springframework.web.bind.annotation.*;
 import springfox.documentation.annotations.ApiIgnore;
-
 import java.util.ArrayList;
 import java.util.List;
 @ApiIgnore
diff --git a/backend/src/main/java/io/dataease/plugins/server/PluginCommonServer.java b/backend/src/main/java/io/dataease/plugins/server/PluginCommonServer.java
index 214a23e2b6..0b4e8370ca 100644
--- a/backend/src/main/java/io/dataease/plugins/server/PluginCommonServer.java
+++ b/backend/src/main/java/io/dataease/plugins/server/PluginCommonServer.java
@@ -6,7 +6,6 @@ import io.dataease.plugins.common.dto.StaticResource;
 import io.dataease.plugins.common.service.PluginComponentService;
 import io.dataease.plugins.common.service.PluginMenuService;
 import io.dataease.plugins.config.SpringContextUtil;
-import org.apache.commons.lang3.StringUtils;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestMapping;
diff --git a/backend/src/main/java/io/dataease/plugins/server/XAuthServer.java b/backend/src/main/java/io/dataease/plugins/server/XAuthServer.java
index 9cd0fa9f21..7daaec754f 100644
--- a/backend/src/main/java/io/dataease/plugins/server/XAuthServer.java
+++ b/backend/src/main/java/io/dataease/plugins/server/XAuthServer.java
@@ -20,10 +20,7 @@ import org.apache.shiro.authz.annotation.RequiresPermissions;
 import org.springframework.web.bind.annotation.*;
 import io.dataease.plugins.xpack.auth.service.AuthXpackService;
 import springfox.documentation.annotations.ApiIgnore;
-
 import java.util.*;
-import java.util.stream.Collectors;
-
 @ApiIgnore
 @RequestMapping("/plugin/auth")
 @RestController
diff --git a/backend/src/main/java/io/dataease/plugins/util/PluginUtils.java b/backend/src/main/java/io/dataease/plugins/util/PluginUtils.java
index 57a8cabca5..ffbecb5d67 100644
--- a/backend/src/main/java/io/dataease/plugins/util/PluginUtils.java
+++ b/backend/src/main/java/io/dataease/plugins/util/PluginUtils.java
@@ -30,7 +30,7 @@ public class PluginUtils {
         if (f2CLicenseResponse.getStatus() != F2CLicenseResponse.Status.valid)
             return new ArrayList<>();
         Map<String, PluginMenuService> pluginMenuServiceMap = SpringContextUtil.getApplicationContext().getBeansOfType(PluginMenuService.class);
-        List<PluginSysMenu> menus = pluginMenuServiceMap.values().stream().flatMap(item -> item.menus().stream()).collect(Collectors.toList());
+        List<PluginSysMenu> menus = pluginMenuServiceMap.values().stream().flatMap(item -> item.menus().stream()).distinct().collect(Collectors.toList());
         return menus;
     }
 
diff --git a/backend/src/main/java/io/dataease/provider/datasource/JdbcProvider.java b/backend/src/main/java/io/dataease/provider/datasource/JdbcProvider.java
index 73a274818f..6f00e03989 100644
--- a/backend/src/main/java/io/dataease/provider/datasource/JdbcProvider.java
+++ b/backend/src/main/java/io/dataease/provider/datasource/JdbcProvider.java
@@ -20,9 +20,7 @@ import io.dataease.plugins.datasource.query.QueryProvider;
 import io.dataease.provider.ProviderFactory;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.stereotype.Service;
-
 import javax.annotation.Resource;
-import java.beans.PropertyVetoException;
 import java.lang.reflect.Method;
 import java.sql.*;
 import java.util.*;
diff --git a/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java b/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java
index dc45766d01..9e6891f5af 100644
--- a/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java
+++ b/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java
@@ -9,7 +9,6 @@ import io.dataease.dto.chart.ChartGroupDTO;
 import io.dataease.plugins.common.base.domain.ChartGroup;
 import io.dataease.plugins.common.base.domain.ChartGroupExample;
 import io.dataease.plugins.common.base.mapper.ChartGroupMapper;
-import io.dataease.service.sys.SysAuthService;
 import org.apache.commons.collections.CollectionUtils;
 import org.apache.commons.lang3.ObjectUtils;
 import org.apache.commons.lang3.StringUtils;
diff --git a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
index 80310e0ac4..8e251dc1b4 100644
--- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
+++ b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
@@ -285,7 +285,7 @@ public class ChartViewService {
         try {
             ChartViewDTO view = this.getOne(id, request.getQueryFrom());
             // 如果是从仪表板获取视图数据，则仪表板的查询模式，查询结果的数量，覆盖视图对应的属性
-            if (CommonConstants.VIEW_QUERY_FROM.PANEL.equals(request.getQueryFrom()) && CommonConstants.VIEW_RESULT_MODE.CUSTOM.equals(request.getResultMode())) {
+            if (CommonConstants.VIEW_RESULT_MODE.CUSTOM.equals(request.getResultMode())) {
                 view.setResultMode(request.getResultMode());
                 view.setResultCount(request.getResultCount());
             }
diff --git a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
index 4fcb323110..bb0bb9c8d3 100644
--- a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
+++ b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
@@ -7,7 +7,6 @@ import com.google.gson.JsonParser;
 import com.google.gson.reflect.TypeToken;
 import io.dataease.auth.annotation.DeCleaner;
 import io.dataease.auth.api.dto.CurrentUserDto;
-import io.dataease.controller.request.chart.ChartExtRequest;
 import io.dataease.controller.sys.base.BaseGridRequest;
 import io.dataease.controller.sys.base.ConditionEntity;
 import io.dataease.dto.SysLogDTO;
@@ -45,7 +44,6 @@ import io.dataease.service.engine.EngineService;
 import io.dataease.service.sys.SysAuthService;
 import net.sf.jsqlparser.expression.BinaryExpression;
 import net.sf.jsqlparser.expression.Expression;
-import net.sf.jsqlparser.expression.ExpressionVisitor;
 import net.sf.jsqlparser.expression.Parenthesis;
 import net.sf.jsqlparser.expression.operators.conditional.AndExpression;
 import net.sf.jsqlparser.expression.operators.conditional.OrExpression;
@@ -53,7 +51,6 @@ import net.sf.jsqlparser.expression.operators.relational.ExpressionList;
 import net.sf.jsqlparser.expression.operators.relational.InExpression;
 import net.sf.jsqlparser.expression.operators.relational.LikeExpression;
 import net.sf.jsqlparser.parser.CCJSqlParserUtil;
-import net.sf.jsqlparser.parser.SimpleNode;
 import net.sf.jsqlparser.statement.Statement;
 import net.sf.jsqlparser.statement.select.PlainSelect;
 import net.sf.jsqlparser.statement.select.Select;
diff --git a/frontend/mock/index.js b/frontend/mock/index.js
index 90e2ffe9ec..82f2c4e542 100644
--- a/frontend/mock/index.js
+++ b/frontend/mock/index.js
@@ -56,7 +56,6 @@ const responseFake = (url, type, respond) => {
     url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
     type: type || 'get',
     response(req, res) {
-      console.log('request invoke:' + req.path)
       res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
     }
   }
diff --git a/frontend/src/components/AssistButton/ColorButton.vue b/frontend/src/components/AssistButton/ColorButton.vue
new file mode 100644
index 0000000000..c4273ce710
--- /dev/null
+++ b/frontend/src/components/AssistButton/ColorButton.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="color-button-main">
+    <div class="color-button-outer" :class="active?'color-button-active':''" @click.stop="colorButtonClick">
+      <div class="color-button-inner" :class="'color-button-inner-'+colorType" />
+    </div>
+    <span class="text-area">
+      <slot />
+    </span>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ColorButton',
+  inheritAttrs: true,
+  props: {
+    colorType: {
+      type: String,
+      default: 'light'
+    },
+    label: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    active() {
+      return this.label === this.colorType
+    }
+  },
+  watch: {
+
+  },
+  created() {
+  },
+  methods: {
+    colorButtonClick() {
+      this.$emit('onClick', this.colorType)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+.color-button-main{
+  float: left;
+}
+
+.color-button-outer {
+  width: 24px;
+  height: 24px;
+  border-radius: 2px;
+  border-width: 1px;
+  border-color: #DEE0E3;
+  cursor: pointer;
+  border-style: solid;
+  padding-left: 3px;
+  padding-top: 3px;
+  &:hover {
+    padding-left: 2px;
+    padding-top: 2px;
+    border-width: 2px;
+    border-color: #DEE0E3;
+  }
+}
+.color-button-active{
+  padding-left: 2px;
+  padding-top: 2px;
+  border-width: 2px;
+  border-color: #3370FF!important;
+}
+
+.color-button-inner {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  border: 1px solid #DEE0E3;
+}
+.color-button-inner-light{
+  background-color: #FFFFFF;
+}
+
+.color-button-inner-dark{
+  background-color: #0C296E;
+}
+.text-area{
+  font-weight: 400;
+  size: 14px;
+  line-height: 22px;
+  margin-top: 4px;
+}
+
+</style>
diff --git a/frontend/src/components/Notification/index.vue b/frontend/src/components/Notification/index.vue
index fe85d4c114..61eb3c5528 100644
--- a/frontend/src/components/Notification/index.vue
+++ b/frontend/src/components/Notification/index.vue
@@ -94,32 +94,30 @@ export default {
     // 先加载消息类型
     loadMsgTypes()
     this.queryCount()
-    // this.search()
-    // 每30s定时刷新拉取消息
-    /* this.timer = setInterval(() => {
-      this.queryCount()
-    }, 30000) */
   },
   mounted() {
-    bus.$on('refresh-top-notification', () => {
-      if (this.visible) this.search()
-      else this.queryCount()
-    })
-
-    bus.$on('web-msg-topic-call', msg => {
-      this.count = (this.count || this.paginationConfig.total) + 1
-      // this.queryCount()
-      // this.search()
-    })
+    this.initEvents()
   },
   beforeDestroy() {
     this.timer && clearInterval(this.timer)
+    bus.$off('refresh-top-notification', this.refreshTopNotification)
+    bus.$off('web-msg-topic-call', this.webMsgTopicCall)
   },
   destroyed() {
     this.timer && clearInterval(this.timer)
   },
   methods: {
-
+    refreshTopNotification() {
+      if (this.visible) this.search()
+      else this.queryCount()
+    },
+    webMsgTopicCall() {
+      this.count = (this.count || this.paginationConfig.total) + 1
+    },
+    initEvents() {
+      bus.$on('refresh-top-notification', this.refreshTopNotification)
+      bus.$on('web-msg-topic-call', this.webMsgTopicCall)
+    },
     showDetail(row) {
       const param = { ...{ msgNotification: true, msgType: row.typeId, sourceParam: row.param }}
       this.visible = false
diff --git a/frontend/src/components/canvas/components/Editor/MarkLine.vue b/frontend/src/components/canvas/components/Editor/MarkLine.vue
index b3fc0e25b3..4dc67b4d43 100644
--- a/frontend/src/components/canvas/components/Editor/MarkLine.vue
+++ b/frontend/src/components/canvas/components/Editor/MarkLine.vue
@@ -40,10 +40,10 @@ export default {
     eventBus.$on('move', (isDownward, isRightward) => {
       this.showLine(isDownward, isRightward)
     })
-
-    eventBus.$on('unmove', () => {
-      this.hideLine()
-    })
+    eventBus.$on('unmove', this.hideLine)
+  },
+  beforeDestroy() {
+    eventBus.$off('unmove', this.hideLine)
   },
   methods: {
     hideLine() {
diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index 9072ff6edb..65f1bda35c 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -287,6 +287,7 @@ export default {
     erd.uninstall(this.$refs.canvasInfoTemp)
     erd.uninstall(this.$refs.canvasInfoMain)
     clearInterval(this.timer)
+    eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog)
   },
   methods: {
     _isMobile() {
@@ -411,7 +412,6 @@ export default {
           })
         }
       }, 1500)
-
       eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
     }
   }
diff --git a/frontend/src/components/canvas/components/Editor/PreviewMobile.vue b/frontend/src/components/canvas/components/Editor/PreviewMobile.vue
index 02b2b192a5..bc759a2de4 100644
--- a/frontend/src/components/canvas/components/Editor/PreviewMobile.vue
+++ b/frontend/src/components/canvas/components/Editor/PreviewMobile.vue
@@ -178,6 +178,7 @@ export default {
     _this.canvasStyleDataInit()
   },
   beforeDestroy() {
+    eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog)
     clearInterval(this.timer)
   },
   methods: {
diff --git a/frontend/src/components/canvas/components/Editor/Shape.vue b/frontend/src/components/canvas/components/Editor/Shape.vue
index 7bc1fd3ba1..e8cac6dc69 100644
--- a/frontend/src/components/canvas/components/Editor/Shape.vue
+++ b/frontend/src/components/canvas/components/Editor/Shape.vue
@@ -94,13 +94,17 @@ export default {
     }
     this.element.type === 'custom' && (this.pointList = ['l', 'r'])
 
-    eventBus.$on('runAnimation', () => {
+    eventBus.$on('runAnimation', this.runAnimation)
+  },
+  beforeDestroy() {
+    eventBus.$off('runAnimation', this.runAnimation)
+  },
+  methods: {
+    runAnimation() {
       if (this.element === this.curComponent) {
         runAnimation(this.$el, this.curComponent.animations)
       }
-    })
-  },
-  methods: {
+    },
     // 鼠标移入事件
     enter() {
       this.mouseOn = true
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index 853bf428f8..4296e4d690 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -1051,9 +1051,7 @@ export default {
     // 获取编辑器元素
     this.$store.commit('getEditor')
     const _this = this
-    eventBus.$on('hideArea', () => {
-      this.hideArea()
-    })
+    eventBus.$on('hideArea', this.hideArea)
     eventBus.$on('startMoveIn', this.startMoveIn)
     eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
     bus.$on('onRemoveLastItem', this.removeLastItem)
@@ -1065,6 +1063,12 @@ export default {
       }, 500)
     }
   },
+  beforeDestroy() {
+    eventBus.$off('hideArea', this.hideArea)
+    eventBus.$off('startMoveIn', this.startMoveIn)
+    eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog)
+    bus.$off('onRemoveLastItem', this.removeLastItem)
+  },
   created() {
   },
   methods: {
diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index 26b0361302..087bfdd9a9 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -202,6 +202,11 @@ export default {
     this.mobileLayoutInitStatus = this.mobileLayoutStatus
     this.showGridSwitch = this.canvasStyleData.aidedDesign.showGrid
   },
+  beforeDestroy() {
+    eventBus.$off('preview', this.preview)
+    eventBus.$off('save', this.save)
+    eventBus.$off('clearCanvas', this.clearCanvas)
+  },
   methods: {
     close() {
       // 关闭页面清理缓存
@@ -734,4 +739,8 @@ export default {
 .el-dropdown-menu__item{
   line-height: 32px;
 }
+
+::v-deep .el-radio-button__inner{
+padding:7px 7px
+}
 </style>
diff --git a/frontend/src/components/canvas/custom-component/DeFrame.vue b/frontend/src/components/canvas/custom-component/DeFrame.vue
index db2dc4ec31..8db2bed8b4 100644
--- a/frontend/src/components/canvas/custom-component/DeFrame.vue
+++ b/frontend/src/components/canvas/custom-component/DeFrame.vue
@@ -67,14 +67,18 @@ export default {
   created() {
   },
   mounted() {
-    bus.$on('frameLinksChange-' + this.element.id, () => {
+    bus.$on('frameLinksChange-' + this.element.id, this.frameLinksChange)
+  },
+  beforeDestroy() {
+    bus.$off('frameLinksChange-' + this.element.id, this.frameLinksChange)
+  },
+  methods: {
+    frameLinksChange() {
       this.frameShow = false
       this.$nextTick(() => {
         this.frameShow = true
       })
-    })
-  },
-  methods: {
+    },
     loaded(e) {
     },
     onError(e) {
@@ -91,7 +95,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #FFFFFF;
+    background-color: rgba(255,255,255,0.3);
     font-size: 12px;
     color: #9ea6b2;
   }
diff --git a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
index ca721e004d..48c8b2633f 100644
--- a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
+++ b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
@@ -84,7 +84,14 @@ export default {
   },
   mounted() {
     this.initOption()
-    bus.$on('streamMediaLinksChange-' + this.element.id, () => {
+    bus.$on('streamMediaLinksChange-' + this.element.id, this.streamMediaLinksChange)
+  },
+  beforeDestroy() {
+    bus.$off('streamMediaLinksChange-' + this.element.id, this.streamMediaLinksChange)
+    this.destroyPlayer()
+  },
+  methods: {
+    streamMediaLinksChange() {
       this.pOption = this.element.streamMediaLinks[this.element.streamMediaLinks.videoType]
       this.flvPlayer = null
       this.videoShow = false
@@ -92,12 +99,7 @@ export default {
         this.videoShow = true
         this.initOption()
       })
-    })
-  },
-  beforeDestroy() {
-    this.destroyPlayer()
-  },
-  methods: {
+    },
     initOption() {
       if (flvjs.isSupported() && this.pOption.url) {
         this.destroyPlayer()
@@ -139,7 +141,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: beige;
+    background-color: rgba(245, 245, 220, 0.3);
     font-size: 12px;
     color: #000000;
   }
diff --git a/frontend/src/components/canvas/custom-component/DeVideo.vue b/frontend/src/components/canvas/custom-component/DeVideo.vue
index da7590ecb2..40f705ce53 100644
--- a/frontend/src/components/canvas/custom-component/DeVideo.vue
+++ b/frontend/src/components/canvas/custom-component/DeVideo.vue
@@ -90,15 +90,19 @@ export default {
     this.initOption()
   },
   mounted() {
-    bus.$on('videoLinksChange-' + this.element.id, () => {
+    bus.$on('videoLinksChange-' + this.element.id, this.videoLinksChange)
+  },
+  beforeDestroy() {
+    bus.$off('videoLinksChange-' + this.element.id, this.videoLinksChange)
+  },
+  methods: {
+    videoLinksChange() {
       this.showVideo = false
       this.$nextTick(() => {
         this.showVideo = true
         this.initOption()
       })
-    })
-  },
-  methods: {
+    },
     initOption() {
       this.pOption = this.element.videoLinks[this.element.videoLinks.videoType]
       this.pOption.height = this.h - (this.curGap * 2)
@@ -135,7 +139,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #FFFFFF;
+    background-color: rgba(255,255,255,0.3);
     font-size: 12px;
     color: #9ea6b2;
   }
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index 3075c9402e..202080869b 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -404,6 +404,17 @@ export default {
     this.bindPluginEvent()
   },
 
+  beforeDestroy() {
+    bus.$off('plugin-chart-click', this.pluginChartClick)
+    bus.$off('plugin-jump-click', this.pluginJumpClick)
+    bus.$off('plugin-add-view-track-filter', this.pluginAddViewTrackFilter)
+    bus.$off('view-in-cache', this.viewInCache)
+    bus.$off('batch-opt-change', this.batchOptChange)
+    bus.$off('onSubjectChange', this.optFromBatchThemeChange)
+    bus.$off('onThemeColorChange', this.optFromBatchThemeChange)
+    bus.$off('onThemeAttrChange', this.optFromBatchSingleProp)
+    bus.$off('clear_panel_linkage', this.clearPanelLinkage)
+  },
   created() {
     this.refId = uuid.v1
     if (this.element && this.element.propValue && this.element.propValue.viewId) {
@@ -441,7 +452,7 @@ export default {
       this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
       this.mergeScale()
     },
-    optFromBatchThemeChange(changeType) {
+    optFromBatchThemeChange() {
       const updateParams = { 'id': this.chart.id }
       const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
       const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
@@ -467,38 +478,34 @@ export default {
           : this.$refs[this.element.propValue.id].chartResize()
       }
     },
-    bindPluginEvent() {
-      bus.$on('plugin-chart-click', param => {
-        param.viewId && param.viewId === this.element.propValue.viewId && this.chartClick(param)
-      })
-      bus.$on('plugin-jump-click', param => {
-        param.viewId && param.viewId === this.element.propValue.viewId && this.jumpClick(param)
-      })
-      bus.$on('plugin-add-view-track-filter', param => {
-        param.viewId && param.viewId === this.element.propValue.viewId && this.addViewTrackFilter(param)
-      })
-      bus.$on('view-in-cache', param => {
-        param.viewId && param.viewId === this.element.propValue.viewId && this.getDataEdit(param)
-      })
-      bus.$on('batch-opt-change', param => {
-        this.batchOptChange(param)
-      })
-      bus.$on('onSubjectChange', () => {
-        this.optFromBatchThemeChange('subject')
-      })
-      bus.$on('onThemeColorChange', () => {
-        this.optFromBatchThemeChange('themeColor')
-      })
-      bus.$on('onThemeAttrChange', (param) => {
-        this.optFromBatchSingleProp(param)
-      })
-      bus.$on('clear_panel_linkage', (param) => {
-        if (param.viewId === 'all' || param.viewId === this.element.propValue.viewId) {
-          this.$refs[this.element.propValue.id].reDrawView()
-        }
-      })
+    pluginChartClick(param) {
+      param.viewId && param.viewId === this.element.propValue.viewId && this.chartClick(param)
+    },
+    pluginJumpClick(param) {
+      param.viewId && param.viewId === this.element.propValue.viewId && this.jumpClick(param)
+    },
+    pluginAddViewTrackFilter(param) {
+      param.viewId && param.viewId === this.element.propValue.viewId && this.addViewTrackFilter(param)
+    },
+    viewInCache(param) {
+      param.viewId && param.viewId === this.element.propValue.viewId && this.getDataEdit(param)
+    },
+    clearPanelLinkage(param) {
+      if (param.viewId === 'all' || param.viewId === this.element.propValue.viewId) {
+        this.$refs[this.element.propValue.id].reDrawView()
+      }
+    },
+    bindPluginEvent() {
+      bus.$on('plugin-chart-click', this.pluginChartClick)
+      bus.$on('plugin-jump-click', this.pluginJumpClick)
+      bus.$on('plugin-add-view-track-filter', this.pluginAddViewTrackFilter)
+      bus.$on('view-in-cache', this.viewInCache)
+      bus.$on('batch-opt-change', this.batchOptChange)
+      bus.$on('onSubjectChange', this.optFromBatchThemeChange)
+      bus.$on('onThemeColorChange', this.optFromBatchThemeChange)
+      bus.$on('onThemeAttrChange', this.optFromBatchSingleProp)
+      bus.$on('clear_panel_linkage', this.clearPanelLinkage)
     },
-
     addViewTrackFilter(linkageParam) {
       this.$store.commit('addViewTrackFilter', linkageParam)
     },
diff --git a/frontend/src/components/canvas/utils/style.js b/frontend/src/components/canvas/utils/style.js
index 88e7defa3e..99c9c236a1 100644
--- a/frontend/src/components/canvas/utils/style.js
+++ b/frontend/src/components/canvas/utils/style.js
@@ -1,5 +1,6 @@
 import { sin, cos } from '@/components/canvas/utils/translate'
 import store from '@/store'
+import { colorReverse } from '@/components/canvas/utils/utils'
 
 export const LIGHT_THEME_COLOR_MAIN = '#000000'
 export const LIGHT_THEME_COLOR_SLAVE1 = '#CCCCCC'
@@ -257,6 +258,10 @@ export const THEME_ATTR_TRANS_MAIN = {
   }
 }
 
+export const THEME_ATTR_TRANS_SLAVE1_BACKGROUND = {
+  'tooltip': ['backgroundColor']
+}
+
 // 移动端特殊属性
 export const mobileSpecialProps = {
   'lineWidth': 3, // 线宽固定值
@@ -325,10 +330,12 @@ export function adaptCurTheme(customStyle, customAttr) {
     recursionThemTransObj(THEME_STYLE_TRANS_MAIN, customStyle, LIGHT_THEME_COLOR_MAIN)
     recursionThemTransObj(THEME_STYLE_TRANS_SLAVE1, customStyle, LIGHT_THEME_COLOR_SLAVE1)
     recursionThemTransObj(THEME_ATTR_TRANS_MAIN, customAttr, LIGHT_THEME_COLOR_MAIN)
+    recursionThemTransObj(THEME_ATTR_TRANS_SLAVE1_BACKGROUND, customAttr, LIGHT_THEME_COMPONENT_BACKGROUND)
   } else {
     recursionThemTransObj(THEME_STYLE_TRANS_MAIN, customStyle, DARK_THEME_COLOR_MAIN)
     recursionThemTransObj(THEME_STYLE_TRANS_SLAVE1, customStyle, DARK_THEME_COLOR_SLAVE1)
     recursionThemTransObj(THEME_ATTR_TRANS_MAIN, customAttr, DARK_THEME_COLOR_MAIN)
+    recursionThemTransObj(THEME_ATTR_TRANS_SLAVE1_BACKGROUND, customAttr, DARK_THEME_COMPONENT_BACKGROUND)
   }
   customAttr['color'] = { ...canvasStyle.chartInfo.chartColor }
   customStyle['text'] = { ...canvasStyle.chartInfo.chartTitle, title: customStyle['text']['title'] }
@@ -347,6 +354,14 @@ export function adaptCurThemeCommonStyle(component) {
     for (const styleKey in filterStyle) {
       component.style[styleKey] = filterStyle[styleKey]
     }
+  } else {
+    if (component.style.color) {
+      if (store.state.canvasStyleData.panel.themeColor === 'light') {
+        component.style.color = LIGHT_THEME_COLOR_MAIN
+      } else {
+        component.style.color = DARK_THEME_COLOR_MAIN
+      }
+    }
   }
   return component
 }
@@ -366,7 +381,6 @@ export function adaptCurThemeFilterStyleAll(styleKey) {
       item.style[styleKey] = filterStyle[styleKey]
     }
   })
-  console.log('componentData=' + JSON.stringify(componentData))
 }
 
 export function isFilterComponent(component) {
diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js
index a251c94adb..b9d25c17a9 100644
--- a/frontend/src/components/canvas/utils/utils.js
+++ b/frontend/src/components/canvas/utils/utils.js
@@ -1,5 +1,5 @@
 import {
-  BASE_MOBILE_STYLE, COMMON_BACKGROUND, COMMON_BACKGROUND_NONE,
+  BASE_MOBILE_STYLE, COMMON_BACKGROUND_NONE,
   HYPERLINKS
 } from '@/components/canvas/custom-component/component-list'
 
@@ -174,7 +174,6 @@ export function checkViewTitle(opt, id, tile) {
       return false
     }
   } catch (e) {
-    console.log('checkViewTitle error', e)
     return false
   }
 }
@@ -205,3 +204,9 @@ export function dataURLToBlob(dataurl) { // ie 图片转格式
   }
   return new Blob([u8arr], { type: mime })
 }
+
+export function colorReverse(OldColorValue) {
+  OldColorValue = '0x' + OldColorValue.replace(/#/g, '')
+  const str = '000000' + (0xFFFFFF - OldColorValue).toString(16)
+  return '#' + str.substring(str.length - 6, str.length)
+}
diff --git a/frontend/src/components/widget/DeWidget/DeDate.vue b/frontend/src/components/widget/DeWidget/DeDate.vue
index 83934b8679..7864ba6992 100644
--- a/frontend/src/components/widget/DeWidget/DeDate.vue
+++ b/frontend/src/components/widget/DeWidget/DeDate.vue
@@ -112,12 +112,20 @@ export default {
     }
   },
   mounted() {
-    bus.$on('onScroll', () => {
+    bus.$on('onScroll', this.onScroll)
+    bus.$on('reset-default-value', this.resetDefaultValue)
+  },
+  beforeDestroy() {
+    bus.$off('onScroll', this.onScroll)
+    bus.$off('reset-default-value', this.resetDefaultValue)
+  },
+  methods: {
+    onScroll() {
       if (this.onFocus) {
         this.$refs.dateRef.hidePicker()
       }
-    })
-    bus.$on('reset-default-value', id => {
+    },
+    resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         if (!this.element.options.attrs.default.isDynamic) {
           this.values = this.fillValueDerfault()
@@ -128,12 +136,7 @@ export default {
         this.values = widget.dynamicDateFormNow(this.element)
         this.dateChange(this.values)
       }
-    })
-  },
-  beforeDestroy() {
-    bus.$off('reset-default-value')
-  },
-  methods: {
+    },
     onBlur() {
       this.onFocus = false
     },
diff --git a/frontend/src/components/widget/DeWidget/DeInputSearch.vue b/frontend/src/components/widget/DeWidget/DeInputSearch.vue
index da83bef29e..063fca3a2b 100644
--- a/frontend/src/components/widget/DeWidget/DeInputSearch.vue
+++ b/frontend/src/components/widget/DeWidget/DeInputSearch.vue
@@ -71,17 +71,18 @@ export default {
     }
   },
   mounted() {
-    bus.$on('reset-default-value', id => {
+    bus.$on('reset-default-value', this.resetDefaultValue)
+  },
+  beforeDestroy() {
+    bus.$off('reset-default-value', this.resetDefaultValue)
+  },
+  methods: {
+    resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         this.value = this.fillValueDerfault()
         this.search()
       }
-    })
-  },
-  beforeDestroy() {
-    bus.$off('reset-default-value')
-  },
-  methods: {
+    },
     search() {
       if (!this.inDraw) {
         this.element.options.value = this.value
diff --git a/frontend/src/components/widget/DeWidget/DeNumberRange.vue b/frontend/src/components/widget/DeWidget/DeNumberRange.vue
index 6a5a5a34b4..1d286c6161 100644
--- a/frontend/src/components/widget/DeWidget/DeNumberRange.vue
+++ b/frontend/src/components/widget/DeWidget/DeNumberRange.vue
@@ -104,7 +104,13 @@ export default {
     }
   },
   mounted() {
-    bus.$on('reset-default-value', id => {
+    bus.$on('reset-default-value', this.resetDefaultValue)
+  },
+  beforeDestroy() {
+    bus.$off('reset-default-value', this.resetDefaultValue)
+  },
+  methods: {
+    resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         const values = this.element.options.value
         this.form.min = values[0]
@@ -113,12 +119,7 @@ export default {
         }
         this.search()
       }
-    })
-  },
-  beforeDestroy() {
-    bus.$off('reset-default-value')
-  },
-  methods: {
+    },
     searchWithKey(index) {
       this.timeMachine = setTimeout(() => {
         if (index === this.changeIndex) {
diff --git a/frontend/src/components/widget/DeWidget/DeSelect.vue b/frontend/src/components/widget/DeWidget/DeSelect.vue
index fb655c29b1..3d8edb3d8e 100644
--- a/frontend/src/components/widget/DeWidget/DeSelect.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelect.vue
@@ -172,29 +172,36 @@ export default {
 
   },
   created() {
+    if (this.element && this.element.options && this.element.options.attrs) {
+      this.element.options.attrs.visual = true
+    }
+
     if (!this.element.options.attrs.sort) {
       this.element.options.attrs.sort = {}
     }
     this.initLoad()
   },
+
   mounted() {
-    bus.$on('onScroll', () => {
+    bus.$on('onScroll', this.onScroll)
+    bus.$on('reset-default-value', this.resetDefaultValue)
+  },
+  beforeDestroy() {
+    bus.$off('onScroll', this.onScroll)
+    bus.$off('reset-default-value', this.resetDefaultValue)
+  },
+  methods: {
+    onScroll() {
       if (this.onFocus) {
         this.$refs.deSelect.blur()
       }
-    })
-    bus.$on('reset-default-value', id => {
+    },
+    resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         this.value = this.fillValueDerfault()
         this.changeValue(this.value)
       }
-    })
-  },
-  beforeDestroy() {
-    bus.$off('reset-default-value')
-  },
-
-  methods: {
+    },
     onBlur() {
       this.onFocus = false
     },
diff --git a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
index 623e92189c..65097931d5 100644
--- a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
@@ -200,7 +200,13 @@ export default {
     this.initLoad()
   },
   mounted() {
-    bus.$on('reset-default-value', id => {
+    bus.$on('reset-default-value', this.resetDefaultValue)
+  },
+  beforeDestroy() {
+    bus.$off('reset-default-value', this.resetDefaultValue)
+  },
+  methods: {
+    resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         this.value = this.fillValueDerfault()
         this.changeValue(this.value)
@@ -210,13 +216,7 @@ export default {
           this.isIndeterminate = this.value.length > 0 && this.value.length < this.datas.length
         }
       }
-    })
-  },
-  beforeDestroy() {
-    bus.$off('reset-default-value')
-  },
-
-  methods: {
+    },
     changeInputStyle() {
       if (!this.$parent.handlerInputStyle) return
       this.$nextTick(() => {
diff --git a/frontend/src/components/widget/DeWidget/DeSelectTree.vue b/frontend/src/components/widget/DeWidget/DeSelectTree.vue
index 9b65c5dc8a..a53c0deaff 100644
--- a/frontend/src/components/widget/DeWidget/DeSelectTree.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectTree.vue
@@ -203,21 +203,19 @@ export default {
     this.initLoad()
   },
   mounted() {
-    bus.$on('onScroll', () => {
+    bus.$on('reset-default-value', this.resetDefaultValue)
+  },
+  beforeDestroy() {
+    bus.$off('reset-default-value', this.resetDefaultValue)
+  },
 
-    })
-    bus.$on('reset-default-value', id => {
+  methods: {
+    resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         this.value = this.fillValueDerfault()
         this.changeValue(this.value)
       }
-    })
-  },
-  beforeDestroy() {
-    bus.$off('reset-default-value')
-  },
-
-  methods: {
+    },
     onFoucs() {
       this.$nextTick(() => {
         this.handleCoustomStyle()
diff --git a/frontend/src/components/widget/DeWidget/DeTabs.vue b/frontend/src/components/widget/DeWidget/DeTabs.vue
index 4fff2799ea..a250968fff 100644
--- a/frontend/src/components/widget/DeWidget/DeTabs.vue
+++ b/frontend/src/components/widget/DeWidget/DeTabs.vue
@@ -283,6 +283,9 @@ export default {
     bus.$on('add-new-tab', this.addNewTab)
     this.activeTabName = this.element.options.tabList[0].name
   },
+  beforeDestroy() {
+    bus.$off('add-new-tab', this.addNewTab)
+  },
   methods: {
     beforeHandleCommond(item, param) {
       return {
@@ -337,13 +340,12 @@ export default {
         return
       }
       this.$warning(this.$t('detabs.please') + this.$t('detabs.selectOthers'))
-      
     },
     sureViewSelector() {
       const nodes = this.$refs.viewSelect.getCurrentSelected()
       if (!nodes || nodes.length === 0) {
         this.$warning(this.$t('detabs.please') + this.$t('detabs.selectview'))
-        
+
         return
       }
       const node = nodes[0]
diff --git a/frontend/src/layout/components/Topbar.vue b/frontend/src/layout/components/Topbar.vue
index c6f5b46a34..932850a3a5 100644
--- a/frontend/src/layout/components/Topbar.vue
+++ b/frontend/src/layout/components/Topbar.vue
@@ -197,14 +197,19 @@ export default {
     bus.$on('set-top-menu-active-info', this.setTopMenuActiveInfo)
     bus.$on('set-top-text-info', this.setTopTextInfo)
     bus.$on('set-top-text-active-info', this.setTopTextActiveInfo)
-    bus.$on('sys-logout', param => {
-      this.logout(param)
-    })
+    bus.$on('sys-logout', this.logout)
     this.showTips && this.$nextTick(() => {
       const drop = this.$refs['my-drop']
       drop && drop.show && drop.show()
     })
   },
+  beforeDestroy() {
+    bus.$off('set-top-menu-info', this.setTopMenuInfo)
+    bus.$off('set-top-menu-active-info', this.setTopMenuActiveInfo)
+    bus.$off('set-top-text-info', this.setTopTextInfo)
+    bus.$off('set-top-text-active-info', this.setTopTextActiveInfo)
+    bus.$off('sys-logout', this.logout)
+  },
   created() {
     this.loadUiInfo()
   },
diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index 646650b1cd..221a405f0d 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -99,11 +99,15 @@ export default {
     })
   },
   mounted() {
-    bus.$on('PanelSwitchComponent', (c) => {
-      this.componentName = c.name
-    })
+    bus.$on('PanelSwitchComponent', this.panelSwitchComponent)
+  },
+  beforeDestroy() {
+    bus.$off('PanelSwitchComponent', this.panelSwitchComponent)
   },
   methods: {
+    panelSwitchComponent(c) {
+      this.componentName = c.name
+    },
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
     },
diff --git a/frontend/src/plugins/Export2Excel.js b/frontend/src/plugins/Export2Excel.js
index d3bc687d21..7acea69eb1 100644
--- a/frontend/src/plugins/Export2Excel.js
+++ b/frontend/src/plugins/Export2Excel.js
@@ -115,7 +115,6 @@ export function export_table_to_excel(id) {
 }
 
 function formatJson(jsonData) {
-  console.log(jsonData)
 }
 
 export function export_json_to_excel(th, jsonData, defaultTitle) {
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index d716637351..fad58ca06b 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -238,11 +238,7 @@ const data = {
       })
     },
     addViewFilter(state, data) {
-      console.log('data ')
-      console.log(data)
       const condition = formatCondition(data)
-      console.log('condition ')
-      console.log(condition)
       const vValid = valueValid(condition)
       //   1.根据componentId过滤
       const filterComponentId = condition.componentId
@@ -252,8 +248,6 @@ const data = {
 
       for (let index = 0; index < state.componentData.length; index++) {
         const element = state.componentData[index]
-        console.log('element: ')
-        console.log(element)
         if (element.type && element.type === 'de-tabs') {
           for (let idx = 0; idx < element.options.tabList.length; idx++) {
             const ele = element.options.tabList[idx].content
@@ -278,8 +272,6 @@ const data = {
         if (!element.type || element.type !== 'view') continue
         const currentFilters = element.filters || []
         const vidMatch = viewIdMatch(condition.viewIds, element.propValue.viewId)
-        console.log(vidMatch)
-
         let j = currentFilters.length
         while (j--) {
           const filter = currentFilters[j]
diff --git a/frontend/src/views/chart/components/drag-item/ChartDragItem.vue b/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
index 1f0343777d..a88470fa5a 100644
--- a/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
+++ b/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
@@ -157,7 +157,10 @@ export default {
     }
   },
   mounted() {
-    bus.$on('reset-change-table', () => this.getItemTagType())
+    bus.$on('reset-change-table', this.getItemTagType)
+  },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
   },
   methods: {
     clickItem(param) {
diff --git a/frontend/src/views/chart/components/drag-item/DimensionExtItem.vue b/frontend/src/views/chart/components/drag-item/DimensionExtItem.vue
index 5076a946bd..fb2b85c5cd 100644
--- a/frontend/src/views/chart/components/drag-item/DimensionExtItem.vue
+++ b/frontend/src/views/chart/components/drag-item/DimensionExtItem.vue
@@ -131,7 +131,10 @@ export default {
     }
   },
   mounted() {
-    bus.$on('reset-change-table', () => this.getItemTagType())
+    bus.$on('reset-change-table', this.getItemTagType)
+  },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
   },
   methods: {
     clickItem(param) {
diff --git a/frontend/src/views/chart/components/drag-item/DimensionItem.vue b/frontend/src/views/chart/components/drag-item/DimensionItem.vue
index bd2c348ef8..fc8d195559 100644
--- a/frontend/src/views/chart/components/drag-item/DimensionItem.vue
+++ b/frontend/src/views/chart/components/drag-item/DimensionItem.vue
@@ -141,9 +141,12 @@ export default {
     }
   },
   mounted() {
-    bus.$on('reset-change-table', () => this.getItemTagType())
+    bus.$on('reset-change-table', this.getItemTagType)
     this.init()
   },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
+  },
   methods: {
     init() {
       if (!this.item.formatterCfg) {
diff --git a/frontend/src/views/chart/components/drag-item/DrillItem.vue b/frontend/src/views/chart/components/drag-item/DrillItem.vue
index 0103c45771..191a765ede 100644
--- a/frontend/src/views/chart/components/drag-item/DrillItem.vue
+++ b/frontend/src/views/chart/components/drag-item/DrillItem.vue
@@ -73,7 +73,10 @@ export default {
     }
   },
   mounted() {
-    bus.$on('reset-change-table', () => this.getItemTagType())
+    bus.$on('reset-change-table', this.getItemTagType)
+  },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
   },
   methods: {
     clickItem(param) {
diff --git a/frontend/src/views/chart/components/drag-item/FilterItem.vue b/frontend/src/views/chart/components/drag-item/FilterItem.vue
index 4c96c40683..2c541e522f 100644
--- a/frontend/src/views/chart/components/drag-item/FilterItem.vue
+++ b/frontend/src/views/chart/components/drag-item/FilterItem.vue
@@ -74,7 +74,10 @@ export default {
     }
   },
   mounted() {
-    bus.$on('reset-change-table', () => this.getItemTagType())
+    bus.$on('reset-change-table', this.getItemTagType)
+  },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
   },
   methods: {
     clickItem(param) {
diff --git a/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue b/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
index e96f4cb582..8f093a08ce 100644
--- a/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
+++ b/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
@@ -176,7 +176,10 @@ export default {
   mounted() {
     this.init()
     this.isEnableCompare()
-    bus.$on('reset-change-table', () => this.getItemTagType())
+    bus.$on('reset-change-table', this.getItemTagType)
+  },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
   },
   methods: {
     init() {
diff --git a/frontend/src/views/chart/components/drag-item/QuotaItem.vue b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
index 33faf2238a..95831b6a2f 100644
--- a/frontend/src/views/chart/components/drag-item/QuotaItem.vue
+++ b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
@@ -173,7 +173,10 @@ export default {
   mounted() {
     this.init()
     this.isEnableCompare()
-    bus.$on('reset-change-table', () => this.getItemTagType())
+    bus.$on('reset-change-table', this.getItemTagType)
+  },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
   },
   methods: {
     init() {
diff --git a/frontend/src/views/chart/components/normal/LabelNormal.vue b/frontend/src/views/chart/components/normal/LabelNormal.vue
index a2e0007652..bc9754d1d4 100644
--- a/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -99,9 +99,10 @@ export default {
     this.init()
     this.calcHeight()
     // 监听元素变动事件
-    eventBus.$on('resizing', (componentId) => {
-      this.chartResize()
-    })
+    eventBus.$on('resizing', this.chartResize)
+  },
+  beforeDestroy() {
+    eventBus.$off('resizing', this.chartResize)
   },
   methods: {
     init() {
diff --git a/frontend/src/views/chart/components/normal/LabelNormalText.vue b/frontend/src/views/chart/components/normal/LabelNormalText.vue
index 5da713827e..db542ec0a0 100644
--- a/frontend/src/views/chart/components/normal/LabelNormalText.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormalText.vue
@@ -117,9 +117,10 @@ export default {
     this.init()
     this.calcHeight()
     // 监听元素变动事件
-    eventBus.$on('resizing', (componentId) => {
-      this.chartResize()
-    })
+    eventBus.$on('resizing', this.chartResize)
+  },
+  beforeDestroy() {
+    eventBus.$off('resizing', this.chartResize)
   },
   methods: {
     init() {
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index 94d888454b..c785665929 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -251,9 +251,10 @@ export default {
   },
   mounted() {
     this.init()
-    bus.$on('prop-change-data', () => {
-      this.initCustomColor()
-    })
+    bus.$on('prop-change-data', this.initCustomColor)
+  },
+  beforeDestroy() {
+    bus.$off('prop-change-data', this.initCustomColor)
   },
   methods: {
     changeColorOption(modifyName = 'value') {
diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue
index 149773d2b3..8fe83af248 100644
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@@ -145,11 +145,10 @@ export default {
   mounted() {
     this.init()
     // 监听元素变动事件
-    eventBus.$on('resizing', (componentId) => {
-      this.chartResize()
-    })
+    eventBus.$on('resizing', this.chartResize)
   },
   beforeDestroy() {
+    eventBus.$off('resizing',this.chartResize)
     clearInterval(this.scrollTimer)
   },
   methods: {
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 1d17a7817c..7c0e35a8b4 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -1334,6 +1334,16 @@ export default {
   },
   mounted() {
   },
+  beforeDestroy() {
+    bus.$off('show-dimension-edit-filter', this.showDimensionEditFilter)
+    bus.$off('show-rename', this.showRename)
+    bus.$off('show-quota-edit-filter', this.showQuotaEditFilter)
+    bus.$off('show-quota-edit-compare', this.showQuotaEditCompare)
+    bus.$off('show-edit-filter', this.showEditFilter)
+    bus.$off('calc-data', this.calcData)
+    bus.$off('plugins-calc-style', this.calcStyle)
+    bus.$off('plugin-chart-click', this.chartClick)
+  },
   activated() {
   },
 
diff --git a/frontend/src/views/dataset/data/ViewTable.vue b/frontend/src/views/dataset/data/ViewTable.vue
index 4810573dcf..ddbd599ea9 100644
--- a/frontend/src/views/dataset/data/ViewTable.vue
+++ b/frontend/src/views/dataset/data/ViewTable.vue
@@ -173,8 +173,6 @@ export default {
   },
   created() {
     this.taskLogTimer = setInterval(() => {
-      console.log(this.sycnStatus)
-      console.log(this.lastRequestComplete)
       if (this.sycnStatus !== 'Underway') {
         return;
       }
diff --git a/frontend/src/views/panel/GrantAuth/shareTree.vue b/frontend/src/views/panel/GrantAuth/shareTree.vue
index d0c5135784..dbfa223781 100644
--- a/frontend/src/views/panel/GrantAuth/shareTree.vue
+++ b/frontend/src/views/panel/GrantAuth/shareTree.vue
@@ -100,12 +100,7 @@ export default {
     }
   },
   created() {
-    bus.$on('refresh-my-share-out', () => {
-      this.initOutData().then(res => {
-        this.outDatas = res.data
-        this.setMainNull()
-      })
-    })
+    bus.$on('refresh-my-share-out', this.refreshMyShareOut)
     this.initData().then(res => {
       this.datas = res.data
       if (this.msgPanelIds && this.msgPanelIds.length > 0) {
@@ -116,8 +111,16 @@ export default {
       this.outDatas = res.data
     })
   },
-
+  beforeDestroy() {
+    bus.$off('refresh-my-share-out', this.refreshMyShareOut)
+  },
   methods: {
+    refreshMyShareOut() {
+      this.initOutData().then(res => {
+        this.outDatas = res.data
+        this.setMainNull()
+      })
+    },
     initData() {
       const param = {}
       return loadTree(param)
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue
index c9120b89b0..72090ff79e 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue
@@ -40,9 +40,10 @@ export default {
   ]),
   created() {
     this.initForm()
-    bus.$on('onThemeColorChange', () => {
-      this.initForm()
-    })
+    bus.$on('onThemeColorChange', this.initForm)
+  },
+  beforeDestroy() {
+    bus.$off('onThemeColorChange', this.initForm)
   },
   methods: {
     initForm() {
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue
index ece0914936..e97f9de547 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue
@@ -71,9 +71,10 @@ export default {
   },
   created() {
     this.initForm()
-    bus.$on('onThemeColorChange', () => {
-      this.initForm()
-    })
+    bus.$on('onThemeColorChange', this.initForm)
+  },
+  beforeDestroy() {
+    bus.$off('onThemeColorChange', this.initForm)
   },
   mounted() {
   },
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue
index 694edac30b..c1ca5b3b81 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue
@@ -1,56 +1,115 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="overallSettingForm" :model="overallSettingForm" label-width="70px" size="mini">
-        <el-form-item :label="$t('panel.theme_color')" class="form-item">
-          <el-radio-group v-model="overallSettingForm.panel.themeColor" @change="themeChange('themeColor')">
-            <el-radio label="light">{{ $t('panel.theme_color_light') }}</el-radio>
-            <el-radio label="dark">{{ $t('panel.theme_color_dark') }}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item :label="$t('panel.component_gap')" class="form-item">
+      <el-row class="margin-top12">
+        <el-row class="custom-item-text-row"><span class="custom-item-text bl">{{ $t('panel.theme_color') }}</span>
+        </el-row>
+        <el-row class="custom-theme-color-button function-area">
+          <color-button
+            class="margin-left2"
+            :color-type="'light'"
+            :label="overallSettingForm.panel.themeColor"
+            @onClick="colorButtonClick"
+          >{{ $t('panel.theme_color_light') }}
+          </color-button>
+          <color-button
+            class="margin-left32"
+            :color-type="'dark'"
+            :label="overallSettingForm.panel.themeColor"
+            @onClick="colorButtonClick"
+          >{{ $t('panel.theme_color_dark') }}
+          </color-button>
+        </el-row>
+      </el-row>
+      <el-row class="margin-top20">
+        <el-row class="custom-item-text-row"><span class="custom-item-text bl">{{ $t('panel.component_gap') }}</span>
+        </el-row>
+        <el-row class="function-area">
           <el-radio-group v-model="overallSettingForm.panel.gap" size="mini" @change="themeChange()">
             <el-radio label="yes">{{ $t('panel.gap') }}</el-radio>
             <el-radio label="no">{{ $t('panel.no_gap') }}</el-radio>
           </el-radio-group>
-        </el-form-item>
-        <el-form-item :label="$t('panel.refresh_frequency')" class="form-item">
-          <el-input v-model="overallSettingForm.refreshTime" class="el-input-refresh-time" type="number" size="mini" controls-position="right" :min="1" :max="3600" @change="themeChange" />
-          <el-select v-model="overallSettingForm.refreshUnit" class="el-input-refresh-unit margin-left4" @change="themeChange">
+        </el-row>
+      </el-row>
+      <el-row class="margin-top20">
+        <el-row class="custom-item-text-row">
+          <span class="custom-item-text bl"> {{ $t('panel.refresh_frequency') }}</span>
+          <span class="custom-item-text br">
+            <el-checkbox
+              v-model="overallSettingForm.refreshViewLoading"
+              class="el-input-refresh-loading"
+              @change="themeChange"
+            >视图加载提示</el-checkbox>
+          </span>
+        </el-row>
+        <el-row class="function-area">
+          <el-input
+            v-model="overallSettingForm.refreshTime"
+            class="el-input-refresh-time"
+            type="number"
+            size="mini"
+            controls-position="right"
+            :min="1"
+            :max="3600"
+            @change="themeChange"
+          />
+          <el-select
+            v-model="overallSettingForm.refreshUnit"
+            class="el-input-refresh-unit margin-left8"
+            size="mini"
+            @change="themeChange"
+          >
             <el-option :label="$t('panel.minute')" :value="'minute'" />
             <el-option :label="$t('panel.second')" :value="'second'" />
           </el-select>
-          <el-checkbox v-model="overallSettingForm.refreshViewLoading" class="el-input-refresh-loading" @change="themeChange">提示</el-checkbox>
-        </el-form-item>
-        <el-form-item :label="$t('panel.panel_view_result_show')" class="form-item form-item-result">
-          <div style="width: 100%;">
-            <el-row>
-              <el-col :span="16">
-                <el-radio-group v-model="overallSettingForm.panel.resultMode" class="radio-span" size="mini" @change="themeChange">
-                  <el-radio label="all"><span>{{ $t('panel.view') }}</span></el-radio>
-                  <el-radio label="custom">
-                    <span>{{ $t('panel.panel') }} </span>
-                  </el-radio>
-                </el-radio-group>
-              </el-col>
-              <el-col :span="8" class="slider-area">
-                <el-slider
-                  v-model="overallSettingForm.panel.resultCount"
-                  :disabled="overallSettingForm.panel.resultMode==='all'"
-                  style="margin-left: 5px"
-                  show-input
-                  :show-input-controls="false"
-                  :show-tooltip="false"
-                  input-size="mini"
-                  :min="1"
-                  :max="10000"
-                  @change="themeChange"
-                />
-              </el-col>
-            </el-row>
-          </div>
-        </el-form-item>
-      </el-form>
+        </el-row>
+      </el-row>
+      <el-row class="margin-top20 margin-bottom20">
+        <el-row class="custom-item-text-row">
+          <span class="custom-item-text bl">
+            {{ $t('panel.panel_view_result_show') }}
+            <span>
+              <el-tooltip class="item" effect="dark" placement="bottom">
+                <div slot="content">
+                  {{ $t('panel.panel_view_result_tips') }}
+                </div>
+                <i class="el-icon-info" style="cursor: pointer;" />
+              </el-tooltip>
+            </span>
+          </span>
+        </el-row>
+        <el-row class="function-area">
+          <el-row>
+            <el-col :span="16">
+              <el-radio-group
+                v-model="overallSettingForm.panel.resultMode"
+                class="radio-span"
+                size="mini"
+                @change="themeChange"
+              >
+                <el-radio label="all"><span>{{ $t('panel.view') }}</span></el-radio>
+                <el-radio label="custom">
+                  <span>{{ $t('panel.panel') }} </span>
+                </el-radio>
+              </el-radio-group>
+            </el-col>
+            <el-col :span="8" class="slider-area">
+              <el-slider
+                v-model="overallSettingForm.panel.resultCount"
+                :disabled="overallSettingForm.panel.resultMode==='all'"
+                style="margin-left: 5px"
+                show-input
+                :show-input-controls="false"
+                :show-tooltip="false"
+                input-size="mini"
+                :min="1"
+                :max="10000"
+                @change="themeChange"
+              />
+            </el-col>
+          </el-row>
+        </el-row>
+      </el-row>
     </el-col>
   </div>
 </template>
@@ -65,20 +124,26 @@ import {
   LIGHT_THEME_PANEL_BACKGROUND
 } from '@/components/canvas/utils/style'
 import bus from '@/utils/bus'
-import { DEFAULT_COLOR_CASE_DARK, DEFAULT_TITLE_STYLE_DARK, DEFAULT_COLOR_CASE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
+import {
+  DEFAULT_COLOR_CASE_DARK,
+  DEFAULT_TITLE_STYLE_DARK,
+  DEFAULT_COLOR_CASE,
+  DEFAULT_TITLE_STYLE
+} from '@/views/chart/chart/chart'
 import { FILTER_COMMON_STYLE, FILTER_COMMON_STYLE_DARK } from '@/views/panel/panel'
 import { deepCopy } from '@/components/canvas/utils/utils'
+import ColorButton from '@/components/AssistButton/ColorButton'
 
 export default {
   name: 'OverallSetting',
+  components: { ColorButton },
   data() {
     return {
       colorIndex: 0,
       overallSettingForm: {}
     }
   },
-  watch: {
-  },
+  watch: {},
   computed: {
     ...mapState([
       'canvasStyleData'
@@ -113,6 +178,14 @@ export default {
         bus.$emit('onThemeColorChange')
       }
       this.$store.commit('recordSnapshot')
+    },
+    colorButtonClick(val) {
+      if (val !== this.overallSettingForm.panel.themeColor) {
+        this.overallSettingForm.panel.themeColor = val
+        this.themeChange('themeColor')
+      } else {
+        this.overallSettingForm.panel.themeColor = val
+      }
     }
   }
 }
@@ -120,35 +193,42 @@ export default {
 
 <style scoped>
 
-.el-input-refresh-time{
-  width: 55px!important;
+.el-input-refresh-time {
+  width: calc(50% - 4px) !important;
 }
 
-.el-input-refresh-unit{
-  width: 55px!important;
+.el-input-refresh-unit {
+  width: calc(50% - 4px) !important;
 }
 
-.el-input-refresh-loading{
+.el-input-refresh-loading {
   margin-left: 4px;
   font-size: 12px;
 }
-.margin-left4{
+
+.margin-left4 {
   margin-left: 4px;
 }
-::v-deep .el-input__inner{
-  padding: 0px 5px!important;
+
+.margin-left8 {
+  margin-left: 8px;
 }
 
-::v-deep .el-slider__input{
-  width: 50px;
+::v-deep .el-input__inner {
+  padding: 0px 5px !important;
+}
+
+::v-deep .el-slider__input {
+  width: 100px;
   margin-top: 0px;
 }
 
-.form-item-slider ::v-deep .el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label {
   font-size: 12px;
   line-height: 38px;
 }
-.form-item  ::v-deep .el-form-item__label{
+
+.form-item ::v-deep .el-form-item__label {
   font-size: 12px;
 }
 
@@ -159,8 +239,58 @@ export default {
 .result-count {
   width: 80px;
 }
-.form-item-result ::v-deep .el-radio{
+
+.form-item-result ::v-deep .el-radio {
   margin-right: 5px;
 }
 
+.custom-item-text-row {
+  display: flex;
+}
+
+.custom-item-text {
+  font-weight: 400 !important;
+  font-size: 14px !important;
+  color: var(--TextPrimary, #1F2329) !important;
+  line-height: 22px;
+}
+
+.custom-theme-color-button {
+  float: left;
+}
+
+.margin-left2 {
+  margin-left: 2px;
+}
+
+.margin-left32 {
+  margin-left: 32px;
+}
+
+.bl {
+  justify-content: flex-start;
+  display: flex;
+}
+
+.br {
+  flex: 1;
+  justify-content: flex-end;
+  display: flex;
+}
+.function-area{
+  margin-top: 8px;
+}
+
+.margin-top12{
+  margin-top: 12px!important;
+}
+
+.margin-top20{
+  margin-top: 20px!important;
+}
+
+.margin-bottom20{
+  margin-bottom: 20px!important;
+
+}
 </style>
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
index c6f3ea228e..1d94308284 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
@@ -183,9 +183,10 @@ export default {
   ]),
   created() {
     this.initForm()
-    bus.$on('onThemeColorChange', () => {
-      this.initForm()
-    })
+    bus.$on('onThemeColorChange',this.initForm)
+  },
+  beforeDestroy() {
+    bus.$off('onThemeColorChange',this.initForm)
   },
   mounted() {
   },
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewTitle.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewTitle.vue
index 1df809ffae..5180770753 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewTitle.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewTitle.vue
@@ -60,9 +60,10 @@ export default {
   ]),
   created() {
     this.initForm()
-    bus.$on('onThemeColorChange', () => {
-      this.initForm()
-    })
+    bus.$on('onThemeColorChange',this.initForm)
+  },
+  beforeDestroy() {
+    bus.$off('onThemeColorChange',this.initForm)
   },
   mounted() {
     this.init()
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue b/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue
index 390fc68563..d6940b92c5 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue
@@ -1,20 +1,32 @@
 <template>
   <el-row>
     <el-row v-loading="slidersLoading">
-      <el-col :span="2">
+      <div class="direction-left">
         <span>&nbsp;</span>
         <ul v-show="currentIndex>1" class="direction">
           <li class="left" @click="move(sliderWidth, 1, speed)">
-            <svg class="icon" width="15px" height="15.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z" /></svg>
+            <svg
+              class="icon"
+              width="15px"
+              height="15.00px"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill="#ffffff"
+                d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z"
+              />
+            </svg>
           </li>
         </ul>
-      </el-col>
-      <el-col :span="20">
+      </div>
+      <el-col :span="24">
         <el-row id="slider">
-          <div class="window">
+          <div class="slider-window">
             <ul v-if="!slidersLoading" class="container" :style="containerStyle">
               <li>
-                <div style="width:240px; height: 208px;overflow: hidden">
+                <div style="width:290px; height: 250px;overflow: hidden">
                   <subject-template-item
                     v-for="item in sliders[sliders.length - 1]"
                     :key="item.id"
@@ -24,7 +36,7 @@
                 </div>
               </li>
               <li v-for="(itemSlider, index) in sliders" :key="index">
-                <div style="width:240px; height: 208px;">
+                <div style="width:290px; height: 250px;">
                   <subject-template-item
                     v-for="item in itemSlider"
                     :key="item.id"
@@ -34,7 +46,7 @@
                 </div>
               </li>
               <li>
-                <div style="width:240px; height: 208px;">
+                <div style="width:290px; height: 250px;">
                   <subject-template-item
                     v-for="item in sliders[0]"
                     :key="item.id"
@@ -47,14 +59,26 @@
           </div>
         </el-row>
       </el-col>
-      <el-col :span="2">
+      <div class="direction-right">
         <span>&nbsp;</span>
         <ul v-show="currentIndex<sliders.length" class="direction">
           <li class="right" @click="move(sliderWidth, -1, speed)">
-            <svg class="icon" width="15px" height="15.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z" /></svg>
+            <svg
+              class="icon"
+              width="15px"
+              height="15.00px"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill="#ffffff"
+                d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z"
+              />
+            </svg>
           </li>
         </ul>
-      </el-col>
+      </div>
     </el-row>
     <el-row>
       <el-col :span="7" style="height: 30px" />
@@ -84,7 +108,6 @@ import { mapState } from 'vuex'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import { uuid } from 'vue-uuid'
 
-
 export default {
   name: 'Slider',
   components: {
@@ -104,10 +127,10 @@ export default {
     return {
       sliders: [],
       slidersLoading: false,
-      sliderWidth: 240,
-      imgWidth: 240,
+      sliderWidth: 290,
+      imgWidth: 290,
       currentIndex: 1,
-      distance: -240,
+      distance: -290,
       transitionEnd: true,
       speed: this.initialSpeed,
       saveSubjectVisible: false
@@ -210,69 +233,99 @@ export default {
 }
 </script>
 <style>
-  *{
-    box-sizing: border-box;
-    margin:0;
-    padding:0;
-  }
-  ol,ul{
-    list-style: none;
-  }
-  #slider{
-    text-align: center;
-  }
-  .window{
-    position:relative;
-    width:240px;
-    height:208px;
-    margin:0 auto;
-    overflow:hidden;
-  }
-  .container{
-    display:flex;
-    position:absolute;
-  }
-  .left, .right{
-    position:absolute;
-    top:50%;
-    transform:translateY(-50%);
-    width:20px;
-    height:20px;
-    background-color:rgba(0,0,0,.3);
-    border-radius:50%;
-    cursor:pointer;
-  }
-  .left{
-    padding-left:5px;
-    padding-top:2px;
-  }
-  .right{
-    padding-right:5px;
-    padding-top:2px;
-  }
-  img{
-    user-select: none;
-  }
-  .dots{
-    position:absolute;
-    bottom:10px;
-    left:50%;
-    transform:translateX(-50%);
-  }
-  .dots li{
-    display:inline-block;
-    width:7px;
-    height:7px;
-    margin:0 3px;
-    border:1px solid white;
-    border-radius:50%;
-    background-color:#333;
-    cursor:pointer;
-  }
-  .dots .dotted{
-    background-color:orange;
-  }
-  .direction{
-    width: 100%;
-  }
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+#slider {
+  text-align: center;
+}
+
+.slider-window {
+  position: relative;
+  width: 290px;
+  height: 250px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.container {
+  display: flex;
+  position: absolute;
+}
+
+.left, .right {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  background-color: rgba(0, 0, 0, .3);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.left {
+  padding-left: 5px;
+  padding-top: 2px;
+}
+
+.right {
+  padding-right: 5px;
+  padding-top: 2px;
+}
+
+img {
+  user-select: none;
+}
+
+.dots {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.dots li {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  margin: 0 3px;
+  border: 1px solid white;
+  border-radius: 50%;
+  background-color: #333;
+  cursor: pointer;
+}
+
+.dots .dotted {
+  background-color: orange;
+}
+
+.direction {
+  width: 100%;
+}
+
+.direction-left {
+  z-index: 2;
+  width: 22px;
+  height: 22px;
+  position: absolute;
+  top: 110px;
+  left: 2px;
+}
+
+.direction-right {
+  z-index: 2;
+  width: 22px;
+  height: 22px;
+  position: absolute;
+  top: 110px;
+  right: 2px;
+}
 </style>
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
index 81dbec9c25..5faaf2d375 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
@@ -1,42 +1,78 @@
 <template>
-  <div class="subject-template">
+  <div
+    :class="[
+      {
+        ['background-selected']: themeSelected
+      },
+      'subject-template'
+    ]"
+  >
     <div
-      :class="[
-        {
-          ['vertical-layout-selected']: themeSelected
-        },
-        'vertical-layout'
-      ]"
+      class="vertical-layout"
       @click.stop="subjectChange"
     >
-      <i v-if="subjectItem.type==='self'" class="el-icon-error" @click.stop="subjectDelete" />
-      <span v-show="themeSelected" class="el-icon-success theme-selected-icon" />
       <!-- 背景-->
-      <div class="allBack" :style="customBackground" style="inset: 1px; position: absolute;" />
+      <div class="allBack common-background" :style="customBackground" />
       <!-- 视图组件 背景-->
       <div style="inset: 17px 10px 10px; position: absolute;" :style="chartBackground" />
       <!-- 视图组件 主题-->
       <div style="inset: 20px 13px 15px; position: absolute;">
         <div style="position: absolute; inset: 0px 4px; width: auto; height: auto;">
           <!--柱形-->
-          <div style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundRight" />
+          <div
+            style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundRight"
+          />
 
           <!--柱形-->
-          <div style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+          <div
+            style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundRight"
+          />
 
           <!--柱形-->
-          <div style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+          <div
+            style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundRight"
+          />
 
           <!--柱形-->
-          <div style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+          <div
+            style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundRight"
+          />
         </div>
       </div>
 
@@ -45,17 +81,36 @@
 
       <!-- 字体颜色 -->
       <div style="left: 14px; top: 10px; height: 6px; position: absolute; vertical-align: middle">
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
       </div>
 
     </div>
-    <div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px;" @dblclick="setEdit">
-      <div style=" background-color:#f7f8fa;color:#3d4d66;font-size:12px;height: 30px; line-height: 30px; text-align: center; white-space: pre; text-overflow: ellipsis; margin-left: 1px; margin-right: 1px;overflow: hidden">
+    <div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px; float: left" @dblclick="setEdit">
+
+      <div class="title-area">
         <el-input
           v-if="canEdit"
           ref="nameInput"
@@ -63,7 +118,12 @@
           size="mini"
           @blur="loseFocus()"
         />
-        <span v-if="!canEdit" style="margin-top: 8px" :title="subjectItem.name">{{ subjectItem.name }}</span>
+        <span
+          v-if="!canEdit"
+          style="margin-top: 8px;margin-left: 8px"
+          :title="subjectItem.name"
+        >{{ subjectItem.name }}</span>
+        <i v-if="subjectItem.type==='self' && !canEdit" class="el-icon-delete delete-icon" @click.stop="subjectDelete" />
       </div>
     </div>
   </div>
@@ -74,7 +134,6 @@ import { chartTransStr2Object } from '@/views/panel/panel'
 import { mapState } from 'vuex'
 import bus from '@/utils/bus'
 import { saveOrUpdateSubject } from '@/api/panel/panel'
-import { resetViewCacheCallBack } from '@/api/chart/chart'
 
 export default {
   name: 'StyleTemplateItem',
@@ -86,9 +145,7 @@ export default {
   },
   data() {
     return {
-      defaultSubject: {
-
-      },
+      defaultSubject: {},
       subjectItemDetails: null,
       canEdit: false
     }
@@ -263,77 +320,98 @@ export default {
 
 <style scoped>
 
-  .allBack {
-    background-size: 100% 100%!important;
-  }
-  .subject-template {
-    width: 110px;
-    height: 90px;
-    position: relative;
-    float: left;
-    margin: 5px;
-    display: inline-block;
-  }
+.allBack {
+  background-size: 100% 100% !important;
+}
 
-  .demonstration {
-    display: block;
-    text-align: center;
-    margin: 10px auto;
-    width: 150px;
-    white-space:nowrap;
-    overflow:hidden;
-    text-overflow:ellipsis;
-  }
+.subject-template {
+  width: 135px;
+  height: 110px;
+  position: relative;
+  float: left;
+  margin: 5px;
+  display: inline-block;
+  border: 1px solid #DEE0E3;
+  border-radius: 5px;
+  z-index: 2;
 
-  .vertical-layout {
-    overflow: hidden;
-    position: absolute;
-    inset: 0px 0px 30px;
-    width: 108px; height: 58px;
-    margin: 0 auto;
-    box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
-    border: solid 1px #fff;
-    box-sizing: border-box;
-    border-radius: 3px;
-  }
+}
+.subject-template:hover {
+  border: solid 1px #4b8fdf;
+  color: deepskyblue;
+  cursor: pointer;
+}
 
-  .vertical-layout-selected{
-    border: solid 2px #4b8fdf;
-    border-radius: 3px;
-  }
+.demonstration {
+  display: block;
+  text-align: center;
+  margin: 10px auto;
+  width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-  .vertical-layout:hover {
-    border: solid 1px #4b8fdf;
-    border-radius: 3px;
-    color: deepskyblue;
-    cursor: pointer;
-  }
+.vertical-layout {
+  overflow: hidden;
+  position: absolute;
+  inset: 0px 0px 30px;
+  width: 131px;
+  height: 78px;
+  margin: 0 auto;
+  box-shadow: 0 0 2px 0 rgba(31, 31, 31, 0.15), 0 1px 2px 0 rgba(31, 31, 31, 0.15);
+  box-sizing: border-box;
+}
 
-  .vertical-layout > i{
-    float: right;
-    color: gray;
-    margin: 2px;
-    position: relative;
-  }
+.vertical-layout > i {
+  float: right;
+  color: gray;
+  margin: 2px;
+  position: relative;
+}
 
-  .vertical-layout > i:hover {
-    color: red;
-  }
+.vertical-layout > i:hover {
+  color: red;
+}
 
-  .vertical-layout:hover > .el-icon-error {
-    z-index: 10;
-    display:block;
-  }
-  .vertical-layout>>>.el-icon-error {
-    display:none
-  }
-  .theme-selected-icon {
-    z-index: 2;
-    font-size: 16px;
-    position: absolute;
-    bottom: 0px;
-    right: 0px;
-    color: #4b8fdf;
-  }
+.theme-selected-icon {
+  z-index: 2;
+  font-size: 16px;
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
+  color: #4b8fdf;
+}
 
+.title-area {
+  background-color: #ffffff;
+  color: #1F2329;
+  font-size: 12px;
+  height: 30px;
+  line-height: 30px;
+  text-align: left;
+  white-space: pre;
+  text-overflow: ellipsis;
+  margin-left: 1px;
+  margin-right: 1px;
+  overflow: hidden
+}
+
+.common-background{
+  border-radius: 5px 5px 0 0;
+  position: absolute;
+}
+
+.background-selected {
+  border: solid 2px #4b8fdf;
+}
+
+.delete-icon{
+  position: absolute;
+  right: 8px;
+  top: 8px;
+}
+.delete-icon:hover{
+  color: red;
+}
 </style>
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/Slider.vue b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/Slider.vue
new file mode 100644
index 0000000000..390fc68563
--- /dev/null
+++ b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/Slider.vue
@@ -0,0 +1,278 @@
+<template>
+  <el-row>
+    <el-row v-loading="slidersLoading">
+      <el-col :span="2">
+        <span>&nbsp;</span>
+        <ul v-show="currentIndex>1" class="direction">
+          <li class="left" @click="move(sliderWidth, 1, speed)">
+            <svg class="icon" width="15px" height="15.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z" /></svg>
+          </li>
+        </ul>
+      </el-col>
+      <el-col :span="20">
+        <el-row id="slider">
+          <div class="window">
+            <ul v-if="!slidersLoading" class="container" :style="containerStyle">
+              <li>
+                <div style="width:240px; height: 208px;overflow: hidden">
+                  <subject-template-item
+                    v-for="item in sliders[sliders.length - 1]"
+                    :key="item.id"
+                    :subject-item="item"
+                    @subjectDelete="subjectDelete"
+                  />
+                </div>
+              </li>
+              <li v-for="(itemSlider, index) in sliders" :key="index">
+                <div style="width:240px; height: 208px;">
+                  <subject-template-item
+                    v-for="item in itemSlider"
+                    :key="item.id"
+                    :subject-item="item"
+                    @subjectDelete="subjectDelete"
+                  />
+                </div>
+              </li>
+              <li>
+                <div style="width:240px; height: 208px;">
+                  <subject-template-item
+                    v-for="item in sliders[0]"
+                    :key="item.id"
+                    :subject-item="item"
+                    @subjectDelete="subjectDelete"
+                  />
+                </div>
+              </li>
+            </ul>
+          </div>
+        </el-row>
+      </el-col>
+      <el-col :span="2">
+        <span>&nbsp;</span>
+        <ul v-show="currentIndex<sliders.length" class="direction">
+          <li class="right" @click="move(sliderWidth, -1, speed)">
+            <svg class="icon" width="15px" height="15.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z" /></svg>
+          </li>
+        </ul>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="7" style="height: 30px" />
+      <el-col :span="10" style="height: 30px">
+        <span hidden>B</span>
+        <ul class="dots">
+          <li
+            v-for="(dot, i) in sliders"
+            :key="i"
+            :class="{dotted: i === (currentIndex-1)}"
+            @click="jump(i+1)"
+          />
+        </ul>
+      </el-col>
+      <el-col :span="7" style="margin: auto;height: 30px;font-size:12px;color:#3685f2">
+        <span><a @click="saveSelfSubject">{{ $t('commons.save') }}</a></span>
+      </el-col>
+    </el-row>
+  </el-row>
+
+</template>
+
+<script>
+import SubjectTemplateItem from './SubjectTemplateItem'
+import { querySubjectWithGroup, saveOrUpdateSubject, deleteSubject } from '@/api/panel/panel'
+import { mapState } from 'vuex'
+import { deepCopy } from '@/components/canvas/utils/utils'
+import { uuid } from 'vue-uuid'
+
+
+export default {
+  name: 'Slider',
+  components: {
+    SubjectTemplateItem
+  },
+  props: {
+    initialSpeed: {
+      type: Number,
+      default: 30
+    },
+    initialInterval: {
+      type: Number,
+      default: 3
+    }
+  },
+  data() {
+    return {
+      sliders: [],
+      slidersLoading: false,
+      sliderWidth: 240,
+      imgWidth: 240,
+      currentIndex: 1,
+      distance: -240,
+      transitionEnd: true,
+      speed: this.initialSpeed,
+      saveSubjectVisible: false
+    }
+  },
+  computed: {
+    containerStyle() {
+      return {
+        transform: `translate3d(${this.distance}px, 0, 0)`
+      }
+    },
+    interval() {
+      return this.initialInterval * 1000
+    },
+    ...mapState([
+      'canvasStyleData'
+    ])
+  },
+  mounted() {
+    this.querySubjectWithGroup()
+  },
+  methods: {
+    subjectDelete(id) {
+      deleteSubject(id).then(response => {
+        this.$message({
+          message: '删除成功',
+          type: 'success',
+          showClose: true
+        })
+        this.querySubjectWithGroup()
+      })
+    },
+    saveSelfSubject() {
+      const canvasStyle = deepCopy(this.canvasStyleData)
+      canvasStyle.themeId = uuid.v1()
+      const request = {
+        details: JSON.stringify(canvasStyle)
+      }
+      this.slidersLoading = true
+      saveOrUpdateSubject(request).then(response => {
+        this.$message({
+          message: '保存成功',
+          type: 'success',
+          showClose: true
+        })
+        this.querySubjectWithGroup()
+      }).catch(() => {
+        this.slidersLoading = false
+      })
+    },
+    querySubjectWithGroup() {
+      const _this = this
+      _this.slidersLoading = true
+      querySubjectWithGroup({}).then(response => {
+        _this.sliders = []
+        _this.sliders = response.data
+        _this.slidersLoading = false
+        if (_this.sliders.length < _this.currentIndex) {
+          _this.currentIndex = 1
+          this.$emit('reload')
+        }
+      }).catch(() => {
+        this.slidersLoading = false
+      })
+    },
+    move(offset, direction, speed) {
+      if (!this.transitionEnd) return
+      this.transitionEnd = false
+      direction === -1 ? this.currentIndex += offset / this.sliderWidth : this.currentIndex -= offset / this.sliderWidth
+      if (this.currentIndex > this.sliders.length) this.currentIndex = 1
+      if (this.currentIndex < 1) this.currentIndex = this.sliders.length
+
+      const destination = this.distance + offset * direction
+      this.animate(destination, direction, speed)
+    },
+    animate(des, direc, speed) {
+      if (this.temp) {
+        window.clearInterval(this.temp)
+        this.temp = null
+      }
+      this.temp = window.setInterval(() => {
+        if ((direc === -1 && des < this.distance) || (direc === 1 && des > this.distance)) {
+          this.distance += speed * direc
+        } else {
+          this.transitionEnd = true
+          window.clearInterval(this.temp)
+          this.distance = des
+          if (des < -this.sliderWidth * this.sliders.length) this.distance = -this.sliderWidth
+          if (des > -this.sliderWidth) this.distance = -this.sliderWidth * this.sliders.length
+        }
+      }, 20)
+    },
+    jump(index) {
+      const direction = index - this.currentIndex >= 0 ? -1 : 1
+      const offset = Math.abs(index - this.currentIndex) * this.sliderWidth
+      const jumpSpeed = Math.abs(index - this.currentIndex) === 0 ? this.speed : Math.abs(index - this.currentIndex) * this.speed
+      this.move(offset, direction, jumpSpeed)
+    }
+  }
+}
+</script>
+<style>
+  *{
+    box-sizing: border-box;
+    margin:0;
+    padding:0;
+  }
+  ol,ul{
+    list-style: none;
+  }
+  #slider{
+    text-align: center;
+  }
+  .window{
+    position:relative;
+    width:240px;
+    height:208px;
+    margin:0 auto;
+    overflow:hidden;
+  }
+  .container{
+    display:flex;
+    position:absolute;
+  }
+  .left, .right{
+    position:absolute;
+    top:50%;
+    transform:translateY(-50%);
+    width:20px;
+    height:20px;
+    background-color:rgba(0,0,0,.3);
+    border-radius:50%;
+    cursor:pointer;
+  }
+  .left{
+    padding-left:5px;
+    padding-top:2px;
+  }
+  .right{
+    padding-right:5px;
+    padding-top:2px;
+  }
+  img{
+    user-select: none;
+  }
+  .dots{
+    position:absolute;
+    bottom:10px;
+    left:50%;
+    transform:translateX(-50%);
+  }
+  .dots li{
+    display:inline-block;
+    width:7px;
+    height:7px;
+    margin:0 3px;
+    border:1px solid white;
+    border-radius:50%;
+    background-color:#333;
+    cursor:pointer;
+  }
+  .dots .dotted{
+    background-color:orange;
+  }
+  .direction{
+    width: 100%;
+  }
+</style>
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue
new file mode 100644
index 0000000000..81dbec9c25
--- /dev/null
+++ b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue
@@ -0,0 +1,339 @@
+<template>
+  <div class="subject-template">
+    <div
+      :class="[
+        {
+          ['vertical-layout-selected']: themeSelected
+        },
+        'vertical-layout'
+      ]"
+      @click.stop="subjectChange"
+    >
+      <i v-if="subjectItem.type==='self'" class="el-icon-error" @click.stop="subjectDelete" />
+      <span v-show="themeSelected" class="el-icon-success theme-selected-icon" />
+      <!-- 背景-->
+      <div class="allBack" :style="customBackground" style="inset: 1px; position: absolute;" />
+      <!-- 视图组件 背景-->
+      <div style="inset: 17px 10px 10px; position: absolute;" :style="chartBackground" />
+      <!-- 视图组件 主题-->
+      <div style="inset: 20px 13px 15px; position: absolute;">
+        <div style="position: absolute; inset: 0px 4px; width: auto; height: auto;">
+          <!--柱形-->
+          <div style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundRight" />
+
+          <!--柱形-->
+          <div style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+
+          <!--柱形-->
+          <div style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+
+          <!--柱形-->
+          <div style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+        </div>
+      </div>
+
+      <!-- 表格表头颜色 -->
+      <div style="left: 10px; right: 10px; top: 10px; height: 6px; position: absolute;" :style="tableHeadBackground" />
+
+      <!-- 字体颜色 -->
+      <div style="left: 14px; top: 10px; height: 6px; position: absolute; vertical-align: middle">
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+      </div>
+
+    </div>
+    <div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px;" @dblclick="setEdit">
+      <div style=" background-color:#f7f8fa;color:#3d4d66;font-size:12px;height: 30px; line-height: 30px; text-align: center; white-space: pre; text-overflow: ellipsis; margin-left: 1px; margin-right: 1px;overflow: hidden">
+        <el-input
+          v-if="canEdit"
+          ref="nameInput"
+          v-model="subjectItem.name"
+          size="mini"
+          @blur="loseFocus()"
+        />
+        <span v-if="!canEdit" style="margin-top: 8px" :title="subjectItem.name">{{ subjectItem.name }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { chartTransStr2Object } from '@/views/panel/panel'
+import { mapState } from 'vuex'
+import bus from '@/utils/bus'
+import { saveOrUpdateSubject } from '@/api/panel/panel'
+import { resetViewCacheCallBack } from '@/api/chart/chart'
+
+export default {
+  name: 'StyleTemplateItem',
+  props: {
+    subjectItem: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      defaultSubject: {
+
+      },
+      subjectItemDetails: null,
+      canEdit: false
+    }
+  },
+  computed: {
+    customBackground() {
+      let style = {
+        background: 'background: 0% 0% / cover rgb(255, 255, 255)'
+      }
+      if (this.subjectItemDetails) {
+        if (this.subjectItemDetails.panel.backgroundType === 'image' && this.subjectItemDetails.panel.imageUrl) {
+          style = {
+            width: '100%',
+            height: '100%',
+            background: `url(${this.subjectItemDetails.panel.imageUrl}) no-repeat`,
+            'background-size': '100% 100% !important'
+          }
+        } else {
+          style = {
+            width: '100%',
+            height: '100%',
+            background: this.subjectItemDetails.panel.color
+          }
+        }
+      }
+      return style
+    },
+    columnBackgroundLeft() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
+          background: this.subjectItemDetails.chartInfo.chartColor.colors[0]
+        }
+      }
+      return style
+    },
+    columnBackgroundMiddle() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
+          background: this.subjectItemDetails.chartInfo.chartColor.colors[1]
+        }
+      }
+      return style
+    },
+    columnBackgroundRight() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
+          background: this.subjectItemDetails.chartInfo.chartColor.colors[2]
+        }
+      }
+      return style
+    },
+    tableHeadBackground() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
+          background: this.subjectItemDetails.chartInfo.chartColor.tableHeaderBgColor
+        }
+      }
+      return style
+    },
+    tableFontColor() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          background: this.subjectItemDetails.chartInfo.chartColor.tableFontColor
+        }
+      }
+      return style
+    },
+    chartBackground() {
+      let style = {}
+      if (this.subjectItemDetails && this.subjectItemDetails.chartInfo.chartCommonStyle.backgroundColorSelect) {
+        style = {
+          background: this.subjectItemDetails.chartInfo.chartCommonStyle.color,
+          opacity: this.subjectItemDetails.chartInfo.chartCommonStyle.alpha / 100
+        }
+      }
+      return style
+    },
+    themeSelected() {
+      return this.subjectItemDetails && this.subjectItemDetails.themeId === this.canvasStyleData.themeId
+    },
+    ...mapState([
+      'canvasStyleData'
+    ])
+  },
+  watch: {
+    subjectItem: {
+      handler(newVal, oldVla) {
+        this.subjectItemDetails = chartTransStr2Object(JSON.parse(newVal.details), 'Y')
+      },
+      deep: true
+    },
+    resize() {
+      this.drawEcharts()
+    }
+  },
+  mounted() {
+    this.subjectItemDetails = chartTransStr2Object(JSON.parse(this.subjectItem.details), 'Y')
+  },
+  methods: {
+    subjectDelete() {
+      this.$emit('subjectDelete', this.subjectItem.id)
+    },
+    subjectChange() {
+      if (!this.themeSelected) {
+        this.$confirm(this.$t('panel.theme_change_tips'), this.$t('panel.theme_change_warn'), {
+          confirmButtonText: this.$t('commons.confirm'),
+          cancelButtonText: this.$t('commons.cancel'),
+          type: 'warning'
+        }).then(() => {
+          this.$store.commit('setCanvasStyle', JSON.parse(this.subjectItem.details))
+          this.$store.commit('recordSnapshot', 'subjectChange')
+          bus.$emit('onSubjectChange')
+        }).catch(() => {
+          // Do Nothing
+        })
+      }
+    },
+    templateEdit() {
+      this.$emit('templateEdit', this.template)
+    },
+    handleDelete() {
+    },
+    // 双击事件
+    setEdit() {
+      if (this.subjectItem.type === 'self') {
+        this.canEdit = true
+      } else {
+        this.$warning(this.$t('panel.subject_no_edit'))
+      }
+      // 将单元格变为输入框
+      // // 聚焦到单元格
+      setTimeout(() => {
+        this.$refs['nameInput'].focus()
+      }, 20)
+    },
+    // 当输入框失去焦点时不显示输入框
+    loseFocus() {
+      if (this.subjectItem.name && this.subjectItem.name.length > 0 && this.subjectItem.name.length < 20) {
+        const request = {
+          id: this.subjectItem.id,
+          name: this.subjectItem.name
+        }
+        saveOrUpdateSubject(request).then(response => {
+          this.$message({
+            message: '保存成功',
+            type: 'success',
+            showClose: true
+          })
+          this.canEdit = false
+        })
+      } else {
+        this.$warning(this.$t('panel.subject_name_not_null'))
+      }
+    },
+    selectChange(callback, editCell) {
+      if (!callback) {
+        editCell.edit = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+  .allBack {
+    background-size: 100% 100%!important;
+  }
+  .subject-template {
+    width: 110px;
+    height: 90px;
+    position: relative;
+    float: left;
+    margin: 5px;
+    display: inline-block;
+  }
+
+  .demonstration {
+    display: block;
+    text-align: center;
+    margin: 10px auto;
+    width: 150px;
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+  }
+
+  .vertical-layout {
+    overflow: hidden;
+    position: absolute;
+    inset: 0px 0px 30px;
+    width: 108px; height: 58px;
+    margin: 0 auto;
+    box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
+    border: solid 1px #fff;
+    box-sizing: border-box;
+    border-radius: 3px;
+  }
+
+  .vertical-layout-selected{
+    border: solid 2px #4b8fdf;
+    border-radius: 3px;
+  }
+
+  .vertical-layout:hover {
+    border: solid 1px #4b8fdf;
+    border-radius: 3px;
+    color: deepskyblue;
+    cursor: pointer;
+  }
+
+  .vertical-layout > i{
+    float: right;
+    color: gray;
+    margin: 2px;
+    position: relative;
+  }
+
+  .vertical-layout > i:hover {
+    color: red;
+  }
+
+  .vertical-layout:hover > .el-icon-error {
+    z-index: 10;
+    display:block;
+  }
+  .vertical-layout>>>.el-icon-error {
+    display:none
+  }
+  .theme-selected-icon {
+    z-index: 2;
+    font-size: 16px;
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    color: #4b8fdf;
+  }
+
+</style>
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItemback.vue b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItemback.vue
new file mode 100644
index 0000000000..1d19d432b5
--- /dev/null
+++ b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItemback.vue
@@ -0,0 +1,235 @@
+<template>
+  <div class="subject-template">
+    <div class="vertical-layout">
+      <i class="el-icon-error" />
+      <i class="el-icon-edit" />
+      <!-- 背景-->
+      <div style="inset: 0px; position: absolute;" :style="customBackground" />
+      <!-- 视图组件 背景-->
+      <div style="inset: 17px 10px 10px; position: absolute; background: 0% 0% / cover rgb(255, 255, 255);" />
+      <!-- 视图组件 主题-->
+      <div style="inset: 20px 13px 15px; position: absolute;">
+        <div style="position: absolute; inset: 0px 4px; width: auto; height: auto;">
+          <!--柱形-->
+          <div style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundRight" />
+
+          <!--柱形-->
+          <div style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+
+          <!--柱形-->
+          <div style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+
+          <!--柱形-->
+          <div style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+        </div>
+      </div>
+
+      <!-- 表格表头颜色 -->
+      <div style="left: 10px; right: 10px; top: 10px; height: 6px; position: absolute;" :style="tableHeadBackground" />
+
+      <!-- 字体颜色 -->
+      <div style="left: 14px; top: 10px; height: 6px; position: absolute; vertical-align: middle">
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+      </div>
+
+    </div>
+    <div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px;">
+      <div style=" background-color:#f7f8fa;color:#3d4d66;font-size:12px;height: 30px; line-height: 30px; text-align: center; white-space: pre; text-overflow: ellipsis; margin-left: 1px; margin-right: 1px;">
+        <span style="margin-top: 8px">{{ subjectItem.name }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { chartTransStr2Object } from '@/views/panel/panel'
+export default {
+  name: 'StyleTemplateItem',
+  props: {
+    subjectItem: {
+      type: Object,
+      default() {
+        return null
+      }
+    }
+  },
+  data() {
+    return {
+      defaultSubject: {
+
+      },
+      subjectItemDetails: null
+    }
+  },
+  computed: {
+    customBackground() {
+      let style = {
+        background: '0% 0% / cover rgb(239, 241, 244)'
+      }
+      if (this.subjectItemDetails) {
+        if (this.subjectItemDetails.panel.backgroundType === 'image' && this.subjectItemDetails.panel.imageUrl) {
+          style = {
+            width: '100%',
+            height: '100%',
+            background: `url(${this.subjectItemDetails.panel.imageUrl}) no-repeat`
+          }
+        } else {
+          style = {
+            width: '100%',
+            height: '100%',
+            background: this.subjectItemDetails.panel.color
+          }
+        }
+      }
+      return style
+    },
+    columnBackgroundLeft() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          background: this.subjectItemDetails.chart.customAttr.color.colors[0]
+        }
+      }
+      return style
+    },
+    columnBackgroundMiddle() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          background: this.subjectItemDetails.chart.customAttr.color.colors[1]
+        }
+      }
+      return style
+    },
+    columnBackgroundRight() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          background: this.subjectItemDetails.chart.customAttr.color.colors[2]
+        }
+      }
+      return style
+    },
+    tableHeadBackground() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          background: this.subjectItemDetails.chart.customAttr.color.tableHeaderBgColor
+        }
+      }
+      return style
+    },
+    tableFontColor() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          background: this.subjectItemDetails.chart.customAttr.color.tableFontColor
+        }
+      }
+      return style
+    }
+  },
+  watch: {
+    subjectItem: {
+      handler(newVal, oldVla) {
+        this.subjectItemDetails = chartTransStr2Object(newVal.details, 'Y')
+      },
+      deep: true
+    },
+    resize() {
+      this.drawEcharts()
+    }
+  },
+  methods: {
+    templateDelete() {
+      this.$alert('是否删除模板：' + this.template.name + '？', '', {
+        confirmButtonText: '确认',
+        callback: (action) => {
+          if (action === 'confirm') {
+            this.$emit('templateDelete', this.template.id)
+          }
+        }
+      })
+    },
+    templateEdit() {
+      this.$emit('templateEdit', this.template)
+    },
+    handleDelete() {
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+  .subject-template {
+    width: 110px;
+    height: 90px;
+    position: relative;
+    float: left;
+    margin: 5px;
+    display: inline-block;
+  }
+
+  .demonstration {
+    display: block;
+    text-align: center;
+    margin: 10px auto;
+    width: 150px;
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+  }
+
+  .vertical-layout {
+    overflow: hidden auto;
+    position: absolute;
+    inset: 0px 0px 30px;
+    width: 108px; height: 58px;
+    margin: 0 auto;
+    box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
+    border: solid 1px #fff;
+    box-sizing: border-box;
+    border-radius: 3px;
+  }
+
+  .vertical-layout:hover {
+    border: solid 1px #4b8fdf;
+    border-radius: 3px;
+    color: deepskyblue;
+    cursor: pointer;
+  }
+
+  .vertical-layout > i{
+    float: right;
+    color: gray;
+    margin: 2px;
+    position: relative;
+  }
+
+  .vertical-layout > i:hover {
+    color: red;
+  }
+
+  .vertical-layout:hover > .el-icon-error {
+    z-index: 10;
+  }
+
+  .vertical-layout:hover > .el-icon-edit {
+    z-index: 10;
+  }
+
+</style>
diff --git a/frontend/src/views/panel/SubjectSetting/index.vue b/frontend/src/views/panel/SubjectSetting/index.vue
index 42e5cf71bb..628b7908a6 100644
--- a/frontend/src/views/panel/SubjectSetting/index.vue
+++ b/frontend/src/views/panel/SubjectSetting/index.vue
@@ -8,7 +8,7 @@
       <slider v-if="sliderShow" @reload="sliderReload" />
     </div>
     <!--折叠面板-->
-    <div v-if="collapseShow" style="margin: 10px;overflow-y: auto">
+    <div v-if="collapseShow" style="margin: 12px;overflow-y: auto">
       <div>
         <el-collapse v-model="activeNames" @change="handleChange">
           <el-collapse-item :title="'整体配置'" name="panel">
@@ -75,20 +75,24 @@ export default {
   watch: {},
 
   mounted() {
-    bus.$on('onSubjectChange', () => {
-      this.collapseShow = false
-      this.$nextTick(() => {
-        this.init()
-        this.dataMerge()
-        this.collapseShow = true
-      })
-    })
+    bus.$on('onSubjectChange', this.onSubjectChange)
+  },
+  beforeDestroy() {
+    bus.$off('onSubjectChange', this.onSubjectChange)
   },
   created() {
     this.init()
   },
 
   methods: {
+    onSubjectChange() {
+      this.collapseShow = false
+      this.$nextTick(() => {
+        this.init()
+        this.dataMerge()
+        this.collapseShow = true
+      })
+    },
     sliderReload() {
       this.sliderShow = false
       this.$nextTick(() => {
@@ -155,7 +159,6 @@ export default {
 
 .selector-div {
   background-color: var(--MainBG);
-  margin: 5px
 }
 
 .padding-lr {
@@ -184,4 +187,11 @@ export default {
   border-bottom: 1px solid #e8eaed
 }
 
+::v-deep .el-collapse-item__header{
+  font-weight: 500!important;
+  font-size: 14px!important;
+  color: var(--TextPrimary, #1F2329);
+  padding: 0!important;
+}
+
 </style>
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 10d2672acd..1995bdfe1b 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -610,25 +610,7 @@ export default {
     this.init(this.$store.state.panel.panelInfo.id)
   },
   mounted() {
-    // this.insertToBody()
-    bus.$on('component-on-drag', () => {
-      this.show = false
-    })
-
-    bus.$on('component-dialog-edit', () => {
-      this.editDialog()
-    })
-    bus.$on('component-dialog-style', () => {
-      this.styleDialogVisible = true
-    })
-
-    bus.$on('previewFullScreenClose', () => {
-      this.previewVisible = false
-    })
-
-    bus.$on('change_panel_right_draw', (param) => {
-      this.changeRightDrawOpen(param)
-    })
+    this.initEvents()
     const _this = this
     const erd = elementResizeDetectorMaker()
     // 监听div变动事件
@@ -640,10 +622,31 @@ export default {
     this.loadMultiplexingViewTree()
   },
   beforeDestroy() {
+    bus.$off('component-on-drag', this.componentOnDrag)
+    bus.$off('component-dialog-edit', this.editDialog)
+    bus.$off('component-dialog-style', this.componentDialogStyle)
+    bus.$off('previewFullScreenClose', this.previewFullScreenClose)
+    bus.$off('change_panel_right_draw', this.changeRightDrawOpen)
     const elx = this.$refs.rightPanel
     elx && elx.remove()
   },
   methods: {
+    componentOnDrag() {
+      this.show = false
+    },
+    componentDialogStyle() {
+      this.styleDialogVisible = true
+    },
+    previewFullScreenClose() {
+      this.previewVisible = false
+    },
+    initEvents() {
+      bus.$on('component-on-drag', this.componentOnDrag)
+      bus.$on('component-dialog-edit', this.editDialog)
+      bus.$on('component-dialog-style', this.componentDialogStyle)
+      bus.$on('previewFullScreenClose', this.previewFullScreenClose)
+      bus.$on('change_panel_right_draw', this.changeRightDrawOpen)
+    },
     loadMultiplexingViewTree() {
       queryPanelMultiplexingViewTree().then(res => {
         this.viewData = res.data
@@ -1350,17 +1353,6 @@ export default {
     height: 600px;
   }
 
-  .info-class {
-    text-align: center;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #FFFFFF;
-    font-size: 12px;
-    color: #9ea6b2;
-  }
-
   ::-webkit-scrollbar {
     width: 2px !important;
     height: 2px !important;
diff --git a/frontend/src/views/panel/enshrine/index.vue b/frontend/src/views/panel/enshrine/index.vue
index ee84c8905b..b4ff3b082a 100644
--- a/frontend/src/views/panel/enshrine/index.vue
+++ b/frontend/src/views/panel/enshrine/index.vue
@@ -50,6 +50,9 @@ export default {
     bus.$on('panle_start_list_refresh', this.refreshStarts)
     this.initData()
   },
+  beforeDestroy() {
+    bus.$off('panle_start_list_refresh', this.refreshStarts)
+  },
   methods: {
     showPanel(row) {
       initPanelData(row.panelGroupId, function() {
diff --git a/frontend/src/views/panel/filter/filterDialog.vue b/frontend/src/views/panel/filter/filterDialog.vue
index f2c265f47d..4a537cd934 100644
--- a/frontend/src/views/panel/filter/filterDialog.vue
+++ b/frontend/src/views/panel/filter/filterDialog.vue
@@ -367,11 +367,11 @@ export default {
     this.ProhibitMultiple()
   },
   mounted() {
-    bus.$on('valid-values-change', valid => {
-      this.validateFilterValue(valid)
-    })
+    bus.$on('valid-values-change', this.validateFilterValue)
+  },
+  beforeDestroy() {
+    bus.$off('valid-values-change', this.validateFilterValue)
   },
-
   methods: {
 
     treeNode(cache) {
diff --git a/frontend/src/views/panel/filter/filterMain/FilterControl.vue b/frontend/src/views/panel/filter/filterMain/FilterControl.vue
index 77c9969e7b..4ea8917ac7 100644
--- a/frontend/src/views/panel/filter/filterMain/FilterControl.vue
+++ b/frontend/src/views/panel/filter/filterMain/FilterControl.vue
@@ -9,9 +9,6 @@
           @change="multipleChange"
         />
 
-        <span v-if="widget.showVisual" style="padding-left: 16px;">
-          <el-checkbox v-model="attrs.visual" @change="showVisualChange">{{ $t('panel.visual') }}</el-checkbox>
-        </span>
       </div>
     </el-col>
 
diff --git a/frontend/src/views/panel/index.vue b/frontend/src/views/panel/index.vue
index 1fe7a86c66..895e786009 100644
--- a/frontend/src/views/panel/index.vue
+++ b/frontend/src/views/panel/index.vue
@@ -45,14 +45,12 @@ export default {
     // }
   },
   mounted() {
-    bus.$on('to-msg-share', params => {
-      this.toMsgShare(params)
-    })
-    bus.$on('PanelSwitchComponent', (c) => {
-      this.param = c.param
-      this.componentName = c.name
-      this.$store.dispatch('panel/setMainActiveName', c.name)
-    })
+    bus.$on('to-msg-share', this.toMsgShare)
+    bus.$on('PanelSwitchComponent', this.panelSwitchComponent)
+  },
+  beforeDestroy() {
+    bus.$off('to-msg-share', this.toMsgShare)
+    bus.$off('PanelSwitchComponent', this.panelSwitchComponent)
   },
   created() {
     bus.$emit('PanelSwitchComponent', { name: 'PanelMain' })
@@ -61,6 +59,11 @@ export default {
     this.toMsgShare(routerParam)
   },
   methods: {
+    panelSwitchComponent(c) {
+      this.param = c.param
+      this.componentName = c.name
+      this.$store.dispatch('panel/setMainActiveName', c.name)
+    },
     toMsgShare(routerParam) {
       if (routerParam !== null && routerParam.msgNotification) {
         const panelShareTypeIds = [1, 2, 3]
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index 8d2472c4dd..03076f4c60 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -232,15 +232,21 @@ export default {
     }
   },
   mounted() {
-    bus.$on('set-panel-show-type', type => {
-      this.showType = type || 0
-    })
-    bus.$on('set-panel-share-user', userId => {
-      this.shareUserId = userId
-    })
+    bus.$on('set-panel-show-type', this.setPanelShowType)
+    bus.$on('set-panel-share-user', this.setPanelShareUser)
     this.initPdfTemplate()
   },
+  beforeDestroy() {
+    bus.$off('set-panel-show-type', this.setPanelShowType)
+    bus.$off('set-panel-share-user', this.setPanelShareUser)
+  },
   methods: {
+    setPanelShowType(type) {
+      this.showType = type || 0
+    },
+    setPanelShareUser(userId) {
+      this.shareUserId = userId
+    },
     initPdfTemplate() {
       queryAll().then(res => {
         this.pdfTemplateAll = res.data
diff --git a/frontend/src/views/system/datasource/index.vue b/frontend/src/views/system/datasource/index.vue
index d5b1b6cfbb..a509750703 100644
--- a/frontend/src/views/system/datasource/index.vue
+++ b/frontend/src/views/system/datasource/index.vue
@@ -23,9 +23,10 @@ export default {
     }
   },
   mounted() {
-    bus.$on('to-msg-ds', params => {
-      this.toMsgDs(params)
-    })
+    bus.$on('to-msg-ds', this.toMsgDs)
+  },
+  beforeDestroy() {
+    bus.$off('to-msg-ds', this.toMsgDs)
   },
   created() {
     this.$store.dispatch('app/toggleSideBarHide', true)
diff --git a/frontend/src/views/system/task/dataset.vue b/frontend/src/views/system/task/dataset.vue
index 70b2a8841a..12d424225e 100644
--- a/frontend/src/views/system/task/dataset.vue
+++ b/frontend/src/views/system/task/dataset.vue
@@ -4,7 +4,7 @@
     <el-row>
       <el-tabs v-model="tabActive" @tab-click="changeTab">
         <el-tab-pane :label="$t('dataset.task.list')" name="DatasetTaskList">
-          <dataset-task-list v-if="tabActive=='DatasetTaskList'" :param="task" :transCondition="transCondition" @jumpTaskRecord="jumpTaskRecord" />
+          <dataset-task-list v-if="tabActive=='DatasetTaskList'" :param="task" :trans-condition="transCondition" @jumpTaskRecord="jumpTaskRecord" />
         </el-tab-pane>
         <el-tab-pane :label="$t('dataset.task.record')" name="TaskRecord">
           <task-record v-if="tabActive=='TaskRecord'" ref="task_record" :param="task" :trans-condition="transCondition" @jumpTask="jumpTask" />
@@ -38,9 +38,10 @@ export default {
     ])
   },
   mounted() {
-    bus.$on('to-msg-dataset', params => {
-      this.toMsgShare(params)
-    })
+    bus.$on('to-msg-dataset', this.toMsgShare)
+  },
+  beforeDestroy() {
+    bus.$off('to-msg-dataset', this.toMsgShare)
   },
   created() {
     this.$store.dispatch('app/toggleSideBarHide', false)
diff --git a/frontend/src/views/system/user/personPwd.vue b/frontend/src/views/system/user/personPwd.vue
index 5a5e9f4385..55bd3735b8 100644
--- a/frontend/src/views/system/user/personPwd.vue
+++ b/frontend/src/views/system/user/personPwd.vue
@@ -86,7 +86,6 @@ export default {
           updatePersonPwd(param).then(res => {
             this.$success(this.$t('commons.save_success'))
             this.logout()
-            // this.$router.push('/panel/index')
           })
         } else {
           return false