Merge pull request #2542 from dataease/dev

dev->v1.12
2022-07-01 10:41:58 +08:00 · 2022-07-01 10:41:58 +08:00 · a2148e9dd5
commit a2148e9dd5
parent b7e8520131 459b0d49c2
88 changed files with 1829 additions and 557 deletions
--- 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
--- 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);
        }
--- 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 {
--- 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;
--- 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.*;
--- 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;

--- 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
--- 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;
--- 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;
--- 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;
--- 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;

 /**
--- 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;

 /**
--- 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;

--- 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
--- 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;
--- 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;
--- 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)
--- 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;

 /**
--- 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;

--- 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;

--- 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
--- 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;
--- 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
--- 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;
    }

--- 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.*;
--- 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;
--- 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());
            }
--- 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;
--- 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))
    }
  }
--- a/frontend/src/components/AssistButton/ColorButton.vue
+++ 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>
--- 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
--- 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() {
--- 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)
    }
  }
--- 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: {
--- 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
--- 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: {
--- 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>
--- 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;
  }
--- 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;
  }
--- 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;
  }
--- 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)
    },
--- 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) {
--- 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)
+}
--- 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
    },
--- 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
--- 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) {
--- 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
    },
--- 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(() => {
--- 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()
--- 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]
--- 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()
  },
--- 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 })
    },
--- 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) {
--- 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]
--- 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) {
--- 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) {
--- 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) {
--- 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) {
--- 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) {
--- 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() {
--- 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() {
--- 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() {
--- 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() {
--- 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') {
--- 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: {
--- 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() {
  },

--- 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;
      }
--- 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)
--- 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() {
--- 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() {
  },
--- 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>
--- 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() {
  },
--- 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()
--- 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>
--- 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>
--- a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/Slider.vue
+++ 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>
--- a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue
+++ 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>
--- a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItemback.vue
+++ 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>
--- 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>
--- 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;
--- 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() {
--- 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) {
--- 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>

--- 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]
--- 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
--- 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)
--- 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)
--- 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