diff --git a/frontend/src/components/AssistButton/ColorButton.vue b/frontend/src/components/assistButton/ColorButton.vue
similarity index 100%
rename from frontend/src/components/AssistButton/ColorButton.vue
rename to frontend/src/components/assistButton/ColorButton.vue
diff --git a/frontend/src/components/AsyncComponent/index.vue b/frontend/src/components/asyncComponent/index.vue
similarity index 100%
rename from frontend/src/components/AsyncComponent/index.vue
rename to frontend/src/components/asyncComponent/index.vue
diff --git a/frontend/src/components/AsyncSoltComponent/index.vue b/frontend/src/components/asyncSoltComponent/index.vue
similarity index 100%
rename from frontend/src/components/AsyncSoltComponent/index.vue
rename to frontend/src/components/asyncSoltComponent/index.vue
diff --git a/frontend/src/components/back-button/index.vue b/frontend/src/components/backButton/index.vue
similarity index 100%
rename from frontend/src/components/back-button/index.vue
rename to frontend/src/components/backButton/index.vue
diff --git a/frontend/src/components/Breadcrumb/index.vue b/frontend/src/components/breadcrumb/index.vue
similarity index 100%
rename from frontend/src/components/Breadcrumb/index.vue
rename to frontend/src/components/breadcrumb/index.vue
diff --git a/frontend/src/components/business/DeLayoutContent.vue b/frontend/src/components/business/DeLayoutContent.vue
index 039be3d450..197849f166 100644
--- a/frontend/src/components/business/DeLayoutContent.vue
+++ b/frontend/src/components/business/DeLayoutContent.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import BackButton from '@/components/back-button'
+import BackButton from '@/components/backButton'
 
 export default {
   name: 'DeLayoutContent',
@@ -57,13 +57,14 @@ export default {
   border-radius: 4px;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 14%);
   box-sizing: border-box;
-  background-color: var(--MainBG,#f5f6f7);
+  background-color: var(--MainBG, #f5f6f7);
   overflow: hidden;
   padding: 24px 24px 24px 24px;
   height: 100%;
   display: flex;
   flex-direction: column;
   position: relative;
+
   .route-title {
     font-family: PingFang SC;
     font-size: 20px;
@@ -74,6 +75,7 @@ export default {
     width: 100%;
     margin: 0;
   }
+
   .container-wrapper {
     width: 100%;
     overflow: auto;
diff --git a/frontend/src/components/business/LayoutContent.vue b/frontend/src/components/business/LayoutContent.vue
index d4c3e8fa3f..9a97c964ad 100644
--- a/frontend/src/components/business/LayoutContent.vue
+++ b/frontend/src/components/business/LayoutContent.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import BackButton from '@/components/back-button'
+import BackButton from '@/components/backButton'
 
 export default {
   name: 'LayoutContent',
diff --git a/frontend/src/components/business/complex-table/index.vue b/frontend/src/components/business/complexTable/index.vue
similarity index 100%
rename from frontend/src/components/business/complex-table/index.vue
rename to frontend/src/components/business/complexTable/index.vue
diff --git a/frontend/src/components/business/condition-table/DeComplexInput.vue b/frontend/src/components/business/conditionTable/DeComplexInput.vue
similarity index 100%
rename from frontend/src/components/business/condition-table/DeComplexInput.vue
rename to frontend/src/components/business/conditionTable/DeComplexInput.vue
diff --git a/frontend/src/components/business/condition-table/DeComplexOperator.vue b/frontend/src/components/business/conditionTable/DeComplexOperator.vue
similarity index 100%
rename from frontend/src/components/business/condition-table/DeComplexOperator.vue
rename to frontend/src/components/business/conditionTable/DeComplexOperator.vue
diff --git a/frontend/src/components/business/condition-table/DeComplexSelect.vue b/frontend/src/components/business/conditionTable/DeComplexSelect.vue
similarity index 100%
rename from frontend/src/components/business/condition-table/DeComplexSelect.vue
rename to frontend/src/components/business/conditionTable/DeComplexSelect.vue
diff --git a/frontend/src/components/business/condition-table/index.vue b/frontend/src/components/business/conditionTable/index.vue
similarity index 100%
rename from frontend/src/components/business/condition-table/index.vue
rename to frontend/src/components/business/conditionTable/index.vue
diff --git a/frontend/src/components/business/tree-table/index.vue b/frontend/src/components/business/treeTable/index.vue
similarity index 100%
rename from frontend/src/components/business/tree-table/index.vue
rename to frontend/src/components/business/treeTable/index.vue
diff --git a/frontend/src/components/canvas/DeCanvas.vue b/frontend/src/components/canvas/DeCanvas.vue
index 5ecd17d185..d9e6d9a767 100644
--- a/frontend/src/components/canvas/DeCanvas.vue
+++ b/frontend/src/components/canvas/DeCanvas.vue
@@ -93,16 +93,18 @@
 
 <script>
 import { mapState } from 'vuex'
-import DeEditor from '@/components/canvas/components/Editor/DeEditor'
+import DeEditor from '@/components/canvas/components/editor/DeEditor'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import bus from '@/utils/bus'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import { uuid } from 'vue-uuid'
 import componentList, {
   BASE_MOBILE_STYLE,
-  COMMON_BACKGROUND, commonAttr,
-  HYPERLINKS, PIC_STYLE
-} from '@/components/canvas/custom-component/component-list'
+  COMMON_BACKGROUND,
+  commonAttr,
+  HYPERLINKS,
+  PIC_STYLE
+} from '@/components/canvas/customComponent/component-list'
 import { ApplicationContext } from '@/utils/ApplicationContext'
 import { chartCopy } from '@/api/chart/chart'
 import { adaptCurThemeCommonStyle } from '@/components/canvas/utils/style'
@@ -582,6 +584,7 @@ export default {
   overflow-y: auto;
   background-size: 100% 100% !important;
 }
+
 .min-width-730 {
   min-width: 730px !important;
 }
diff --git a/frontend/src/components/canvas/components/AttrListExtend.vue b/frontend/src/components/canvas/components/AttrListExtend.vue
index be1fc51dc4..deedb76788 100644
--- a/frontend/src/components/canvas/components/AttrListExtend.vue
+++ b/frontend/src/components/canvas/components/AttrListExtend.vue
@@ -85,9 +85,10 @@
 </template>
 
 <script>
-import VText from '@/components/canvas/custom-component/VText'
-import RectShape from '@/components/canvas/custom-component/RectShape'
+import VText from '@/components/canvas/customComponent/VText'
+import RectShape from '@/components/canvas/customComponent/RectShape'
 import { getStyle } from '@/components/canvas/utils/style'
+
 export default {
   components: { VText, RectShape },
   data() {
@@ -194,10 +195,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .attr-list {
-    overflow: auto;
-    padding: 5px;
-    padding-top: 0;
-    height: 100%;
-  }
+.attr-list {
+  overflow: auto;
+  padding: 5px;
+  padding-top: 0;
+  height: 100%;
+}
 </style>
diff --git a/frontend/src/components/canvas/components/ComponentList.vue b/frontend/src/components/canvas/components/ComponentList.vue
index 798d5f510a..ec757d1fa2 100644
--- a/frontend/src/components/canvas/components/ComponentList.vue
+++ b/frontend/src/components/canvas/components/ComponentList.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import componentList from '@/components/canvas/custom-component/component-list'
+import componentList from '@/components/canvas/customComponent/component-list'
 
 export default {
   data() {
diff --git a/frontend/src/components/canvas/components/TextAttr.vue b/frontend/src/components/canvas/components/TextAttr.vue
index abeaef25a7..634e5c1122 100644
--- a/frontend/src/components/canvas/components/TextAttr.vue
+++ b/frontend/src/components/canvas/components/TextAttr.vue
@@ -410,11 +410,11 @@
 
 <script>
 import { mapState } from 'vuex'
-import VideoLinks from '@/components/canvas/components/Editor/VideoLinks'
-import StreamMediaLinks from '@/components/canvas/components/Editor/StreamMediaLinks'
-import DateFormat from '@/components/canvas/components/Editor/DateFormat'
+import VideoLinks from '@/components/canvas/components/editor/VideoLinks'
+import StreamMediaLinks from '@/components/canvas/components/editor/StreamMediaLinks'
+import DateFormat from '@/components/canvas/components/editor/DateFormat'
 import { COLOR_PANEL } from '@/views/chart/chart/chart'
-import FrameLinks from '@/components/canvas/components/Editor/FrameLinks'
+import FrameLinks from '@/components/canvas/components/editor/FrameLinks'
 import TitlePosition from '@/components/widget/DeWidget/TitlePosition'
 
 export default {
diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index d99cbce827..31d1992cc5 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -194,11 +194,13 @@
           style="float: left"
           size="mini"
           @click="closeNotSave()"
-        >{{ $t('panel.do_not_save') }}</el-button>
+        >{{ $t('panel.do_not_save') }}
+        </el-button>
         <el-button
           size="mini"
           @click="closePanelVisible=false"
-        >{{ $t('panel.cancel') }}</el-button>
+        >{{ $t('panel.cancel') }}
+        </el-button>
         <el-button
           type="primary"
           size="mini"
@@ -214,11 +216,11 @@
 import generateID from '@/components/canvas/utils/generateID'
 import toast from '@/components/canvas/utils/toast'
 import { mapState } from 'vuex'
-import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
+import { commonAttr, commonStyle } from '@/components/canvas/customComponent/component-list'
 import eventBus from '@/components/canvas/utils/eventBus'
 import { deepCopy, mobile2MainCanvas } from '@/components/canvas/utils/utils'
-import { panelUpdate, saveCache, removePanelCache } from '@/api/panel/panel'
-import { saveLinkage, getPanelAllLinkageInfo } from '@/api/panel/linkage'
+import { panelUpdate, removePanelCache, saveCache } from '@/api/panel/panel'
+import { getPanelAllLinkageInfo, saveLinkage } from '@/api/panel/linkage'
 import bus from '@/utils/bus'
 import { queryPanelJumpInfo } from '@/api/panel/linkJump'
 
@@ -821,11 +823,11 @@ export default {
 }
 
 .icon16_only {
-  font-size: 16px!important;
+  font-size: 16px !important;
 }
 
 .icon16 {
-  font-size: 16px!important;
+  font-size: 16px !important;
   color: var(--TextPrimary, #1F2329);
 }
 
@@ -842,9 +844,11 @@ export default {
   line-height: 22px;
   color: var(--TextPrimary, #1F2329);
 }
+
 .margin-left52 {
   margin-left: 52px !important;
 }
+
 .margin-left12 {
   margin-left: 12px !important;
 }
@@ -852,11 +856,12 @@ export default {
 .el-divider--vertical {
   margin: 0 20px 0 20px
 }
-.el-dropdown-menu__item{
+
+.el-dropdown-menu__item {
   line-height: 32px;
 }
 
-::v-deep .el-radio-button__inner{
-padding:7px 7px
+::v-deep .el-radio-button__inner {
+  padding: 7px 7px
 }
 </style>
diff --git a/frontend/src/components/canvas/components/Editor/Area.vue b/frontend/src/components/canvas/components/editor/Area.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/Area.vue
rename to frontend/src/components/canvas/components/editor/Area.vue
diff --git a/frontend/src/components/canvas/components/Editor/CanvasOptBar.vue b/frontend/src/components/canvas/components/editor/CanvasOptBar.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/CanvasOptBar.vue
rename to frontend/src/components/canvas/components/editor/CanvasOptBar.vue
diff --git a/frontend/src/components/canvas/components/Editor/CloseBar.vue b/frontend/src/components/canvas/components/editor/CloseBar.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/CloseBar.vue
rename to frontend/src/components/canvas/components/editor/CloseBar.vue
diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
similarity index 93%
rename from frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
rename to frontend/src/components/canvas/components/editor/ComponentWrapper.vue
index 827e3d692b..1750ae9ec6 100644
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
@@ -76,9 +76,9 @@ import runAnimation from '@/components/canvas/utils/runAnimation'
 import { mixins } from '@/components/canvas/utils/events'
 import { mapState } from 'vuex'
 import DeOutWidget from '@/components/dataease/DeOutWidget'
-import EditBar from '@/components/canvas/components/Editor/EditBar'
-import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
-import CloseBar from '@/components/canvas/components/Editor/CloseBar'
+import EditBar from '@/components/canvas/components/editor/EditBar'
+import MobileCheckBar from '@/components/canvas/components/editor/MobileCheckBar'
+import CloseBar from '@/components/canvas/components/editor/CloseBar'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
@@ -311,36 +311,38 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .component {
-    position: absolute;
-  }
+.component {
+  position: absolute;
+}
 
-  .component:hover {
-    box-shadow: 0px 0px 3px #0a7be0;
-  }
+.component:hover {
+  box-shadow: 0px 0px 3px #0a7be0;
+}
 
-  .gap_class {
-    padding: 5px;
-  }
+.gap_class {
+  padding: 5px;
+}
 
-  .component-custom {
-    outline: none;
-    width: 100% !important;
-    height: 100%;
-  }
-  .main_view{
-    position: relative;
-    background-size: 100% 100%!important;
-  }
-  .component{
-    //position: relative;
-  }
+.component-custom {
+  outline: none;
+  width: 100% !important;
+  height: 100%;
+}
 
-  .svg-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
+.main_view {
+  position: relative;
+  background-size: 100% 100% !important;
+}
+
+.component {
+  //position: relative;
+}
+
+.svg-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 </style>
diff --git a/frontend/src/components/canvas/components/Editor/ContextMenu.vue b/frontend/src/components/canvas/components/editor/ContextMenu.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/ContextMenu.vue
rename to frontend/src/components/canvas/components/editor/ContextMenu.vue
diff --git a/frontend/src/components/canvas/components/Editor/DateFormat.vue b/frontend/src/components/canvas/components/editor/DateFormat.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/DateFormat.vue
rename to frontend/src/components/canvas/components/editor/DateFormat.vue
diff --git a/frontend/src/components/canvas/components/Editor/DeEditor.vue b/frontend/src/components/canvas/components/editor/DeEditor.vue
similarity index 99%
rename from frontend/src/components/canvas/components/Editor/DeEditor.vue
rename to frontend/src/components/canvas/components/editor/DeEditor.vue
index bd7bc2c023..5aa2176c01 100644
--- a/frontend/src/components/canvas/components/Editor/DeEditor.vue
+++ b/frontend/src/components/canvas/components/editor/DeEditor.vue
@@ -146,10 +146,10 @@
 <script>
 import { mapState } from 'vuex'
 import Shape from './Shape'
-import DeDrag from '@/components/DeDrag'
+import DeDrag from '@/components/deDrag'
 
 // eslint-disable-next-line no-unused-vars
-import { getStyle, getComponentRotatedStyle } from '@/components/canvas/utils/style'
+import { getComponentRotatedStyle, getStyle } from '@/components/canvas/utils/style'
 import { _$, imgUrlTrans } from '@/components/canvas/utils/utils'
 import ContextMenu from './ContextMenu'
 import MarkLine from './MarkLine'
@@ -158,9 +158,9 @@ import eventBus from '@/components/canvas/utils/eventBus'
 import Grid from './Grid'
 import PGrid from './PGrid'
 import { changeStyleWithScale } from '@/components/canvas/utils/translate'
-import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
+import UserViewDialog from '@/components/canvas/customComponent/UserViewDialog'
 import DeOutWidget from '@/components/dataease/DeOutWidget'
-import DragShadow from '@/components/DeDrag/shadow'
+import DragShadow from '@/components/deDrag/shadow'
 import bus from '@/utils/bus'
 import LinkJumpSet from '@/views/panel/LinkJumpSet'
 import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch } from '@/utils/conditionUtil'
@@ -168,7 +168,7 @@ import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMat
 import _ from 'lodash'
 import _jq from 'jquery'
 import Background from '@/views/background/index'
-import PointShadow from '@/components/DeDrag/pointShadow'
+import PointShadow from '@/components/deDrag/pointShadow'
 
 // let positionBox = []
 // let coordinates = [] // 坐标点集合
diff --git a/frontend/src/components/canvas/components/Editor/EditBar.vue b/frontend/src/components/canvas/components/editor/EditBar.vue
similarity index 93%
rename from frontend/src/components/canvas/components/Editor/EditBar.vue
rename to frontend/src/components/canvas/components/editor/EditBar.vue
index e969bf1bfc..b7df7c6e36 100644
--- a/frontend/src/components/canvas/components/Editor/EditBar.vue
+++ b/frontend/src/components/canvas/components/editor/EditBar.vue
@@ -179,10 +179,10 @@
 <script>
 import { mapState } from 'vuex'
 import bus from '@/utils/bus'
-import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
-import LinkageField from '@/components/canvas/components/Editor/LinkageField'
+import SettingMenu from '@/components/canvas/components/editor/SettingMenu'
+import LinkageField from '@/components/canvas/components/editor/LinkageField'
 import toast from '@/components/canvas/utils/toast'
-import FieldsList from '@/components/canvas/components/Editor/fieldsList'
+import FieldsList from '@/components/canvas/components/editor/fieldsList'
 import LinkJumpSet from '@/views/panel/LinkJumpSet'
 import Background from '@/views/background/index'
 
@@ -200,7 +200,8 @@ export default {
     },
     sourceElement: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     },
     element: {
       type: Object,
@@ -378,7 +379,10 @@ export default {
     multiplexingCheck(val) {
       if (val) {
         // push
-        this.$store.commit('addCurMultiplexingComponent', { 'component': this.sourceElement, 'componentId': this.element.id })
+        this.$store.commit('addCurMultiplexingComponent', {
+          'component': this.sourceElement,
+          'componentId': this.element.id
+        })
       } else {
         // remove
         this.$store.commit('removeCurMultiplexingComponentWithId', this.element.id)
@@ -439,7 +443,9 @@ export default {
         bus.$emit('button-dialog-edit')
       } else if (this.curComponent.type === 'v-text' || this.curComponent.type === 'de-rich-text' || this.curComponent.type === 'rect-shape') {
         bus.$emit('component-dialog-style')
-      } else { bus.$emit('change_panel_right_draw', true) }
+      } else {
+        bus.$emit('change_panel_right_draw', true)
+      }
     },
     linkageEdit() {
 
@@ -502,46 +508,49 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .bar-main{
-    position: absolute;
-    float:right;
-    z-index: 2;
-    border-radius:2px;
-    padding-left: 3px;
-    padding-right: 0px;
-    cursor:pointer!important;
-    background-color: var(--primary,#3370ff);
-  }
-  .bar-main i{
-    color: white;
-    float: right;
-    margin-right: 3px;
-  }
+.bar-main {
+  position: absolute;
+  float: right;
+  z-index: 2;
+  border-radius: 2px;
+  padding-left: 3px;
+  padding-right: 0px;
+  cursor: pointer !important;
+  background-color: var(--primary, #3370ff);
+}
 
-  .bar-main ::v-deep .el-checkbox__inner{
-    width: 16px;
-    height: 16px;
-  }
+.bar-main i {
+  color: white;
+  float: right;
+  margin-right: 3px;
+}
 
-  .bar-main ::v-deep .el-checkbox__inner::after{
-    width: 4.5px;
-  }
-  .bar-main-right{
-    width: 22px;
-    right: -25px;
-  }
-  .bar-main-left-inner{
-    width: 22px;
-    left: 0px;
-  }
+.bar-main ::v-deep .el-checkbox__inner {
+  width: 16px;
+  height: 16px;
+}
 
-  .bar-main-left-outer{
-    width: 22px;
-    left: -25px;
-  }
+.bar-main ::v-deep .el-checkbox__inner::after {
+  width: 4.5px;
+}
 
-  .bar-main-preview{
-    right: 0px;
-  }
+.bar-main-right {
+  width: 22px;
+  right: -25px;
+}
+
+.bar-main-left-inner {
+  width: 22px;
+  left: 0px;
+}
+
+.bar-main-left-outer {
+  width: 22px;
+  left: -25px;
+}
+
+.bar-main-preview {
+  right: 0px;
+}
 
 </style>
diff --git a/frontend/src/components/canvas/components/Editor/EditBarView.vue b/frontend/src/components/canvas/components/editor/EditBarView.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/EditBarView.vue
rename to frontend/src/components/canvas/components/editor/EditBarView.vue
diff --git a/frontend/src/components/canvas/components/Editor/FrameLinks.vue b/frontend/src/components/canvas/components/editor/FrameLinks.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/FrameLinks.vue
rename to frontend/src/components/canvas/components/editor/FrameLinks.vue
diff --git a/frontend/src/components/canvas/components/Editor/Grid.vue b/frontend/src/components/canvas/components/editor/Grid.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/Grid.vue
rename to frontend/src/components/canvas/components/editor/Grid.vue
diff --git a/frontend/src/components/canvas/components/Editor/Hyperlinks.vue b/frontend/src/components/canvas/components/editor/Hyperlinks.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/Hyperlinks.vue
rename to frontend/src/components/canvas/components/editor/Hyperlinks.vue
diff --git a/frontend/src/components/canvas/components/Editor/HyperlinksDialog.vue b/frontend/src/components/canvas/components/editor/HyperlinksDialog.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/HyperlinksDialog.vue
rename to frontend/src/components/canvas/components/editor/HyperlinksDialog.vue
diff --git a/frontend/src/components/canvas/components/Editor/LinkageField.vue b/frontend/src/components/canvas/components/editor/LinkageField.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/LinkageField.vue
rename to frontend/src/components/canvas/components/editor/LinkageField.vue
diff --git a/frontend/src/components/canvas/components/Editor/MarkLine.vue b/frontend/src/components/canvas/components/editor/MarkLine.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/MarkLine.vue
rename to frontend/src/components/canvas/components/editor/MarkLine.vue
diff --git a/frontend/src/components/canvas/components/Editor/MobileCheckBar.vue b/frontend/src/components/canvas/components/editor/MobileCheckBar.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/MobileCheckBar.vue
rename to frontend/src/components/canvas/components/editor/MobileCheckBar.vue
diff --git a/frontend/src/components/canvas/components/Editor/PGrid.vue b/frontend/src/components/canvas/components/editor/PGrid.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/PGrid.vue
rename to frontend/src/components/canvas/components/editor/PGrid.vue
diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/editor/Preview.vue
similarity index 92%
rename from frontend/src/components/canvas/components/Editor/Preview.vue
rename to frontend/src/components/canvas/components/editor/Preview.vue
index ef6cba429d..063b08b4d2 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/editor/Preview.vue
@@ -68,10 +68,11 @@ import { uuid } from 'vue-uuid'
 import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
 import eventBus from '@/components/canvas/utils/eventBus'
 import elementResizeDetectorMaker from 'element-resize-detector'
-import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
+import CanvasOptBar from '@/components/canvas/components/editor/CanvasOptBar'
 import bus from '@/utils/bus'
 import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch } from '@/utils/conditionUtil'
 import { hasDataPermission } from '@/utils/permission'
+
 const erd = elementResizeDetectorMaker()
 
 export default {
@@ -338,9 +339,7 @@ export default {
         buttonExist: false,
         relationFilterIds: [],
         autoTrigger: true,
-        filterMap: {
-
-        }
+        filterMap: {}
       }
       if (!panelItems || !panelItems.length) return result
       let sureButtonItem = null
@@ -443,7 +442,10 @@ export default {
         this.scaleHeight = canvasHeight * 100 / this.canvasStyleData.height// 获取高度比
       }
       if (this.isMainCanvas()) {
-        this.$store.commit('setPreviewCanvasScale', { scaleWidth: (this.scaleWidth / 100), scaleHeight: (this.scaleHeight / 100) })
+        this.$store.commit('setPreviewCanvasScale', {
+          scaleWidth: (this.scaleWidth / 100),
+          scaleHeight: (this.scaleHeight / 100)
+        })
       }
       this.handleScaleChange()
     },
@@ -529,63 +531,64 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .bg {
-    min-width: 200px;
-    min-height: 300px;
-    width: 100%;
-    height: 100%;
-    overflow-x: hidden;
-    background-size: 100% 100% !important;
-  }
+.bg {
+  min-width: 200px;
+  min-height: 300px;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  background-size: 100% 100% !important;
+}
 
-  .main-class {
-    width: 100%;
-    height: 100%;
-    background-size: 100% 100% !important;
-  }
+.main-class {
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100% !important;
+}
 
-  .custom-position {
-    line-height: 30px;
-    width: 100%;
-    z-index: 100;
-    height: 100%;
-    text-align: center;
-    cursor:not-allowed;
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    flex-flow: row nowrap;
-    color: #9ea6b2;
-  }
+.custom-position {
+  line-height: 30px;
+  width: 100%;
+  z-index: 100;
+  height: 100%;
+  text-align: center;
+  cursor: not-allowed;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  flex-flow: row nowrap;
+  color: #9ea6b2;
+}
 
-  .dialog-css ::v-deep .el-dialog__title {
-    font-size: 14px;
-  }
+.dialog-css ::v-deep .el-dialog__title {
+  font-size: 14px;
+}
 
-  .dialog-css ::v-deep .el-dialog__header {
-    padding: 40px 20px 0;
-  }
+.dialog-css ::v-deep .el-dialog__header {
+  padding: 40px 20px 0;
+}
 
-  .dialog-css ::v-deep  .el-dialog__body {
-    padding: 10px 20px 20px;
-  }
+.dialog-css ::v-deep .el-dialog__body {
+  padding: 10px 20px 20px;
+}
 
-  .mobile-dialog-css ::v-deep .el-dialog__headerbtn {
-    top: 7px
-  }
+.mobile-dialog-css ::v-deep .el-dialog__headerbtn {
+  top: 7px
+}
 
-  .mobile-dialog-css ::v-deep .el-dialog__body {
-    padding: 0px;
-  }
-  ::-webkit-scrollbar {
-    width: 0px!important;
-    height: 0px!important;
-  }
+.mobile-dialog-css ::v-deep .el-dialog__body {
+  padding: 0px;
+}
 
-  ::v-deep .el-tabs__nav{
-   z-index: 0;
-  }
+::-webkit-scrollbar {
+  width: 0px !important;
+  height: 0px !important;
+}
+
+::v-deep .el-tabs__nav {
+  z-index: 0;
+}
 
 </style>
diff --git a/frontend/src/components/canvas/components/Editor/PreviewEject.vue b/frontend/src/components/canvas/components/editor/PreviewEject.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/PreviewEject.vue
rename to frontend/src/components/canvas/components/editor/PreviewEject.vue
diff --git a/frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue b/frontend/src/components/canvas/components/editor/PreviewFullScreen.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue
rename to frontend/src/components/canvas/components/editor/PreviewFullScreen.vue
diff --git a/frontend/src/components/canvas/components/Editor/PreviewMobile.vue b/frontend/src/components/canvas/components/editor/PreviewMobile.vue
similarity index 88%
rename from frontend/src/components/canvas/components/Editor/PreviewMobile.vue
rename to frontend/src/components/canvas/components/editor/PreviewMobile.vue
index 7305826280..bebde5aabb 100644
--- a/frontend/src/components/canvas/components/Editor/PreviewMobile.vue
+++ b/frontend/src/components/canvas/components/editor/PreviewMobile.vue
@@ -47,7 +47,7 @@ import { uuid } from 'vue-uuid'
 import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
 import eventBus from '@/components/canvas/utils/eventBus'
 import elementResizeDetectorMaker from 'element-resize-detector'
-import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
+import CanvasOptBar from '@/components/canvas/components/editor/CanvasOptBar'
 
 export default {
   components: { ComponentWrapper, CanvasOptBar },
@@ -245,51 +245,51 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .bg {
-    padding: 5px;
-    min-width: 600px;
-    min-height: 300px;
-    width: 100%;
-    height: 100%;
-    overflow-x: hidden;
-    background-size: 100% 100% !important;
-  }
+.bg {
+  padding: 5px;
+  min-width: 600px;
+  min-height: 300px;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  background-size: 100% 100% !important;
+}
 
-  .main-class {
-    width: 100%;
-    height: 100%;
-    background-size: 100% 100% !important;
-  }
+.main-class {
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100% !important;
+}
 
-  .custom-position {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    flex-flow: row nowrap;
-    color: #9ea6b2;
-  }
+.custom-position {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  flex-flow: row nowrap;
+  color: #9ea6b2;
+}
 
-  .gap_class {
-    padding: 5px;
-  }
+.gap_class {
+  padding: 5px;
+}
 
-  .dialog-css ::v-deep .el-dialog__title {
-    font-size: 14px;
-  }
+.dialog-css ::v-deep .el-dialog__title {
+  font-size: 14px;
+}
 
-  .dialog-css ::v-deep .el-dialog__header {
-    padding: 40px 20px 0;
-  }
+.dialog-css ::v-deep .el-dialog__header {
+  padding: 40px 20px 0;
+}
 
-  .dialog-css ::v-deep .el-dialog__body {
-    padding: 10px 20px 20px;
-  }
+.dialog-css ::v-deep .el-dialog__body {
+  padding: 10px 20px 20px;
+}
 
-  ::-webkit-scrollbar {
-    width: 0px!important;
-    height: 0px!important;
-  }
+::-webkit-scrollbar {
+  width: 0px !important;
+  height: 0px !important;
+}
 
 </style>
diff --git a/frontend/src/components/canvas/components/Editor/SettingMenu.vue b/frontend/src/components/canvas/components/editor/SettingMenu.vue
similarity index 99%
rename from frontend/src/components/canvas/components/Editor/SettingMenu.vue
rename to frontend/src/components/canvas/components/editor/SettingMenu.vue
index 2f34abf834..198ab192c4 100644
--- a/frontend/src/components/canvas/components/Editor/SettingMenu.vue
+++ b/frontend/src/components/canvas/components/editor/SettingMenu.vue
@@ -148,7 +148,7 @@
 import { mapState } from 'vuex'
 import bus from '@/utils/bus'
 import { getViewLinkageGather } from '@/api/panel/linkage'
-import HyperlinksDialog from '@/components/canvas/components/Editor/HyperlinksDialog'
+import HyperlinksDialog from '@/components/canvas/components/editor/HyperlinksDialog'
 import CustomTabsSort from '@/components/widget/DeWidget/CustomTabsSort'
 
 export default {
diff --git a/frontend/src/components/canvas/components/Editor/SettingMenuTest.vue b/frontend/src/components/canvas/components/editor/SettingMenuTest.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/SettingMenuTest.vue
rename to frontend/src/components/canvas/components/editor/SettingMenuTest.vue
diff --git a/frontend/src/components/canvas/components/Editor/Shape.vue b/frontend/src/components/canvas/components/editor/Shape.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/Shape.vue
rename to frontend/src/components/canvas/components/editor/Shape.vue
diff --git a/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue b/frontend/src/components/canvas/components/editor/StreamMediaLinks.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue
rename to frontend/src/components/canvas/components/editor/StreamMediaLinks.vue
diff --git a/frontend/src/components/canvas/components/Editor/VideoLinks.vue b/frontend/src/components/canvas/components/editor/VideoLinks.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/VideoLinks.vue
rename to frontend/src/components/canvas/components/editor/VideoLinks.vue
diff --git a/frontend/src/components/canvas/components/Editor/ViewTrackBar.vue b/frontend/src/components/canvas/components/editor/ViewTrackBar.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/ViewTrackBar.vue
rename to frontend/src/components/canvas/components/editor/ViewTrackBar.vue
diff --git a/frontend/src/components/canvas/components/Editor/fieldsList.vue b/frontend/src/components/canvas/components/editor/fieldsList.vue
similarity index 100%
rename from frontend/src/components/canvas/components/Editor/fieldsList.vue
rename to frontend/src/components/canvas/components/editor/fieldsList.vue
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/editor/index.vue
similarity index 95%
rename from frontend/src/components/canvas/components/Editor/index.vue
rename to frontend/src/components/canvas/components/editor/index.vue
index 8c0c0dbe8b..3b665785bc 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/editor/index.vue
@@ -215,11 +215,11 @@
 <script>
 import { mapState } from 'vuex'
 import Shape from './Shape'
-import DeDrag from '@/components/DeDrag'
+import DeDrag from '@/components/deDrag'
 
 // eslint-disable-next-line no-unused-vars
-import { getStyle, getComponentRotatedStyle } from '@/components/canvas/utils/style'
-import { _$, imgUrlTrans } from '@/components/canvas/utils/utils'
+import { getComponentRotatedStyle, getStyle } from '@/components/canvas/utils/style'
+import { _$, deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
 import ContextMenu from './ContextMenu'
 import MarkLine from './MarkLine'
 import Area from './Area'
@@ -227,10 +227,9 @@ import eventBus from '@/components/canvas/utils/eventBus'
 import Grid from './Grid'
 import PGrid from './PGrid'
 import { changeStyleWithScale } from '@/components/canvas/utils/translate'
-import { deepCopy } from '@/components/canvas/utils/utils'
-import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
+import UserViewDialog from '@/components/canvas/customComponent/UserViewDialog'
 import DeOutWidget from '@/components/dataease/DeOutWidget'
-import DragShadow from '@/components/DeDrag/shadow'
+import DragShadow from '@/components/deDrag/shadow'
 import bus from '@/utils/bus'
 import LinkJumpSet from '@/views/panel/LinkJumpSet'
 import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch } from '@/utils/conditionUtil'
@@ -280,9 +279,9 @@ function scrollScreen(e) {
 }
 
 /**
-   * 重置位置盒子
-   *
-   */
+ * 重置位置盒子
+ *
+ */
 function resetPositionBox() {
   // 根据当前容器的宽度来决定多少列
   itemMaxX = this.maxCell
@@ -299,10 +298,10 @@ function resetPositionBox() {
 }
 
 /**
-   * 填充位置盒子
-   *
-   * @param {any} item
-   */
+ * 填充位置盒子
+ *
+ * @param {any} item
+ */
 function addItemToPositionBox(item) {
   try {
     const pb = positionBox
@@ -350,9 +349,9 @@ function removeItemFromPositionBox(item) {
 }
 
 /**
-   * 重新计算宽度，使最小单元格能占满整个容器
-   *
-   */
+ * 重新计算宽度，使最小单元格能占满整个容器
+ *
+ */
 function recalcCellWidth() {
   this.maxCell = this.matrixCount.x
 }
@@ -429,11 +428,11 @@ function resizePlayer(item, newSize) {
 }
 
 /**
-   * 检查移动的位置，如果不合法，会自动修改
-   *
-   * @param {any} item
-   * @param {any} position
-   */
+ * 检查移动的位置，如果不合法，会自动修改
+ *
+ * @param {any} item
+ * @param {any} position
+ */
 function checkItemPosition(item, position) {
   position = position || {}
   position.x = position.x || item.x
@@ -474,11 +473,11 @@ function checkItemPosition(item, position) {
 }
 
 /**
-   * 移动正在拖动的元素
-   *
-   * @param {any} item
-   * @param {any} position
-   */
+ * 移动正在拖动的元素
+ *
+ * @param {any} item
+ * @param {any} position
+ */
 function movePlayer(item, position) {
   const vm = this
   removeItemFromPositionBox(item)
@@ -563,10 +562,10 @@ function changeToCoord(left, top, width, height) {
 }
 
 /**
-   * 检测有无碰撞，并作出处理
-   *
-   * @param {any} tCoord 比对对象的坐标
-   */
+ * 检测有无碰撞，并作出处理
+ *
+ * @param {any} tCoord 比对对象的坐标
+ */
 // eslint-disable-next-line no-unused-vars
 function findClosetCoords(item, tCoord) {
   if (isOverlay) return
@@ -607,10 +606,10 @@ function findClosetCoords(item, tCoord) {
 }
 
 /**
-   * 生成坐标点
-   *
-   * @param {any} item
-   */
+ * 生成坐标点
+ *
+ * @param {any} item
+ */
 // eslint-disable-next-line no-unused-vars
 function makeCoordinate(item) {
   const width = this.cellWidth * (item.sizex) - this.baseMarginLeft
@@ -656,10 +655,10 @@ function changeItemCoord(item) {
 }
 
 /**
-   * 清空目标位置的元素
-   *
-   * @param {any} item
-   */
+ * 清空目标位置的元素
+ *
+ * @param {any} item
+ */
 function emptyTargetCell(item) {
   const vm = this
   const belowItems = findBelowItems(item)
@@ -674,11 +673,11 @@ function emptyTargetCell(item) {
 }
 
 /**
-   * 当前位置的item能否上浮
-   *
-   * @param {any} item
-   * @returns
-   */
+ * 当前位置的item能否上浮
+ *
+ * @param {any} item
+ * @returns
+ */
 function canItemGoUp(item) {
   let upperRows = 0
   for (let row = item.y - 2; row >= 0; row--) {
@@ -694,11 +693,11 @@ function canItemGoUp(item) {
 }
 
 /**
-   * 在移动之前，找到当前下移的元素的下面的元素（递归）
-   *
-   * @param {any} items
-   * @param {any} size
-   */
+ * 在移动之前，找到当前下移的元素的下面的元素（递归）
+ *
+ * @param {any} items
+ * @param {any} size
+ */
 function moveItemDown(item, size) {
   const vm = this
   removeItemFromPositionBox(item)
@@ -736,12 +735,12 @@ function setPlayerPosition(item, position) {
 }
 
 /**
-   * 寻找子元素到父元素的最大距离
-   *
-   * @param {any} parent
-   * @param {any} son
-   * @param {any} size
-   */
+ * 寻找子元素到父元素的最大距离
+ *
+ * @param {any} parent
+ * @param {any} son
+ * @param {any} size
+ */
 function calcDiff(parent, son, size) {
   const diffs = []
 
@@ -1729,11 +1728,11 @@ export default {
 
     },
     /**
-       * 计算当前item的位置和大小
-       *
-       * @param {any} item
-       * @returns
-       */
+     * 计算当前item的位置和大小
+     *
+     * @param {any} item
+     * @returns
+     */
     nowItemStyle(item, index) {
       return {
         width: (this.cellWidth * (item.sizex) - this.baseMarginLeft) + 'px',
@@ -1756,18 +1755,18 @@ export default {
       return finalList
     },
     /**
-       * 获取x最大值
-       *
-       * @returns
-       */
+     * 获取x最大值
+     *
+     * @returns
+     */
     getMaxCell() {
       return this.maxCell
     },
     /**
-       * 获取渲染状态
-       *
-       * @returns
-       */
+     * 获取渲染状态
+     *
+     * @returns
+     */
     getRenderState() {
       return this.moveAnimate
     },
@@ -1835,64 +1834,64 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .editor {
+.editor {
+  width: 100%;
+  position: relative;
+  /*background: #fff;*/
+  margin: auto;
+  /*会影响设置组件不能出现在最高层*/
+  /*overflow-x: hidden;*/
+  background-size: 100% 100% !important;
+  /*transform-style:preserve-3d;*/
+  .lock {
+    opacity: .5;
+  }
+}
+
+.parent_transform {
+  //transform transform 会使z-index 失效；为了使编辑仪表板时 按钮一直在上面 采用transform-style 的方式
+  // transform-style 会导致 dialog 遮罩有问题 此处暂时用这个样式做控制
+  transform-style: preserve-3d;
+}
+
+.edit {
+  /*outline: 1px solid gainsboro;*/
+  .component {
+    outline: none;
     width: 100%;
+    height: 100%;
     position: relative;
-    /*background: #fff;*/
-    margin: auto;
-    /*会影响设置组件不能出现在最高层*/
-    /*overflow-x: hidden;*/
-    background-size: 100% 100% !important;
-    /*transform-style:preserve-3d;*/
-    .lock {
-      opacity: .5;
-    }
   }
+}
 
-  .parent_transform {
-    //transform transform 会使z-index 失效；为了使编辑仪表板时 按钮一直在上面 采用transform-style 的方式
-    // transform-style 会导致 dialog 遮罩有问题 此处暂时用这个样式做控制
-    transform-style: preserve-3d;
-  }
+.gap_class {
+  padding: 3px;
+}
 
-  .edit {
-    /*outline: 1px solid gainsboro;*/
-    .component {
-      outline: none;
-      width: 100%;
-      height: 100%;
-      position: relative;
-    }
-  }
+.ref-line {
+  position: absolute;
+  background-color: #70c0ff;;
+  z-index: 9999;
+}
 
-  .gap_class {
-    padding: 3px;
-  }
+.v-line {
+  width: 1px;
+}
 
-  .ref-line {
-    position: absolute;
-    background-color: #70c0ff;;
-    z-index: 9999;
-  }
+.h-line {
+  height: 1px;
+}
 
-  .v-line {
-    width: 1px;
-  }
+.dialog-css ::v-deep .el-dialog__title {
+  font-size: 14px;
+}
 
-  .h-line {
-    height: 1px;
-  }
+.dialog-css ::v-deep .el-dialog__header {
+  padding: 40px 20px 0;
+}
 
-  .dialog-css ::v-deep .el-dialog__title {
-    font-size: 14px;
-  }
-
-  .dialog-css ::v-deep .el-dialog__header {
-    padding: 40px 20px 0;
-  }
-
-  .dialog-css ::v-deep .el-dialog__body {
-    padding: 10px 20px 20px;
-  }
+.dialog-css ::v-deep .el-dialog__body {
+  padding: 10px 20px 20px;
+}
 
 </style>
diff --git a/frontend/src/components/canvas/custom-component/index.js b/frontend/src/components/canvas/custom-component/index.js
deleted file mode 100644
index 7f9e99b351..0000000000
--- a/frontend/src/components/canvas/custom-component/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import Vue from 'vue'
-
-import Picture from '@/components/canvas/custom-component/Picture'
-import VText from '@/components/canvas/custom-component/VText'
-import VButton from '@/components/canvas/custom-component/VButton'
-import Group from '@/components/canvas/custom-component/Group'
-import RectShape from '@/components/canvas/custom-component/RectShape'
-import UserView from '@/components/canvas/custom-component/UserView'
-import DeVideo from '@/components/canvas/custom-component/DeVideo'
-import DeFrame from '@/components/canvas/custom-component/DeFrame'
-import DeStreamMedia from '@/components/canvas/custom-component/DeStreamMedia'
-import DeRichText from '@/components/canvas/custom-component/DeRichText'
-Vue.component('DeRichText', DeRichText)
-Vue.component('DeStreamMedia', DeStreamMedia)
-// eslint-disable-next-line
-Vue.component('Picture', Picture)
-Vue.component('VText', VText)
-Vue.component('VButton', VButton)
-Vue.component('Group', Group)
-Vue.component('RectShape', RectShape)
-Vue.component('UserView', UserView)
-Vue.component('DeVideo', DeVideo)
-Vue.component('DeFrame', DeFrame)
-
diff --git a/frontend/src/components/canvas/custom-component/DeFrame.vue b/frontend/src/components/canvas/customComponent/DeFrame.vue
similarity index 100%
rename from frontend/src/components/canvas/custom-component/DeFrame.vue
rename to frontend/src/components/canvas/customComponent/DeFrame.vue
diff --git a/frontend/src/components/canvas/custom-component/DeRichText.vue b/frontend/src/components/canvas/customComponent/DeRichText.vue
similarity index 100%
rename from frontend/src/components/canvas/custom-component/DeRichText.vue
rename to frontend/src/components/canvas/customComponent/DeRichText.vue
diff --git a/frontend/src/components/canvas/custom-component/DeRichTextView.vue b/frontend/src/components/canvas/customComponent/DeRichTextView.vue
similarity index 100%
rename from frontend/src/components/canvas/custom-component/DeRichTextView.vue
rename to frontend/src/components/canvas/customComponent/DeRichTextView.vue
diff --git a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue b/frontend/src/components/canvas/customComponent/DeStreamMedia.vue
similarity index 100%
rename from frontend/src/components/canvas/custom-component/DeStreamMedia.vue
rename to frontend/src/components/canvas/customComponent/DeStreamMedia.vue
diff --git a/frontend/src/components/canvas/custom-component/DeVideo.vue b/frontend/src/components/canvas/customComponent/DeVideo.vue
similarity index 100%
rename from frontend/src/components/canvas/custom-component/DeVideo.vue
rename to frontend/src/components/canvas/customComponent/DeVideo.vue
diff --git a/frontend/src/components/canvas/custom-component/Group.vue b/frontend/src/components/canvas/customComponent/Group.vue
similarity index 100%
rename from frontend/src/components/canvas/custom-component/Group.vue
rename to frontend/src/components/canvas/customComponent/Group.vue
diff --git a/frontend/src/components/canvas/custom-component/LinkJumpSetDialog.vue b/frontend/src/components/canvas/customComponent/LinkJumpSetDialog.vue
similarity index 100%
rename from frontend/src/components/canvas/custom-component/LinkJumpSetDialog.vue
rename to frontend/src/components/canvas/customComponent/LinkJumpSetDialog.vue
diff --git a/frontend/src/components/canvas/custom-component/Picture.vue b/frontend/src/components/canvas/customComponent/Picture.vue
similarity index 100%
rename from frontend/src/components/canvas/custom-component/Picture.vue
rename to frontend/src/components/canvas/customComponent/Picture.vue
diff --git a/frontend/src/components/canvas/custom-component/RectShape.vue b/frontend/src/components/canvas/customComponent/RectShape.vue
similarity index 100%
rename from frontend/src/components/canvas/custom-component/RectShape.vue
rename to frontend/src/components/canvas/customComponent/RectShape.vue
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/customComponent/UserView.vue
similarity index 95%
rename from frontend/src/components/canvas/custom-component/UserView.vue
rename to frontend/src/components/canvas/customComponent/UserView.vue
index b7140f6448..fa814f692c 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/customComponent/UserView.vue
@@ -196,26 +196,39 @@ import { mapState } from 'vuex'
 import { isChange } from '@/utils/conditionUtil'
 import { BASE_CHART_STRING } from '@/views/chart/chart/chart'
 import { deepCopy } from '@/components/canvas/utils/utils'
-import { getToken, getLinkToken } from '@/utils/auth'
+import { getLinkToken, getToken } from '@/utils/auth'
 import DrillPath from '@/views/chart/view/DrillPath'
 import { areaMapping } from '@/api/map/map'
 import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
-import EditBarView from '@/components/canvas/components/Editor/EditBarView'
+import EditBarView from '@/components/canvas/components/editor/EditBarView'
 import { adaptCurTheme, customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
 import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import PluginCom from '@/views/system/plugin/PluginCom'
 import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
 import { viewEditSave, viewPropsSave } from '@/api/chart/chart'
 import { checkAddHttp } from '@/utils/urlUtils'
-import DeRichTextView from '@/components/canvas/custom-component/DeRichTextView'
+import DeRichTextView from '@/components/canvas/customComponent/DeRichTextView'
 import Vue from 'vue'
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
-import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
-import UserViewMobileDialog from '@/components/canvas/custom-component/UserViewMobileDialog'
+import UserViewDialog from '@/components/canvas/customComponent/UserViewDialog'
+import UserViewMobileDialog from '@/components/canvas/customComponent/UserViewMobileDialog'
 
 export default {
   name: 'UserView',
-  components: { UserViewMobileDialog, UserViewDialog, DeRichTextView, LabelNormalText, PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
+  components: {
+    UserViewMobileDialog,
+    UserViewDialog,
+    DeRichTextView,
+    LabelNormalText,
+    PluginCom,
+    ChartComponentS2,
+    EditBarView,
+    ChartComponent,
+    TableNormal,
+    LabelNormal,
+    DrillPath,
+    ChartComponentG2
+  },
   props: {
     canvasId: {
       type: String,
@@ -688,7 +701,11 @@ export default {
               adaptCurTheme(customStyleObj, customAttrObj)
               this.chart.customStyle = JSON.stringify(customStyleObj)
               this.chart.customAttr = JSON.stringify(customAttrObj)
-              viewEditSave(this.panelInfo.id, { id: this.chart.id, customStyle: this.chart.customStyle, customAttr: this.chart.customAttr })
+              viewEditSave(this.panelInfo.id, {
+                id: this.chart.id,
+                customStyle: this.chart.customStyle,
+                customAttr: this.chart.customAttr
+              })
               this.$store.commit('adaptorStatusDisable', this.element.id)
             }
             this.sourceCustomAttrStr = this.chart.customAttr
@@ -933,7 +950,10 @@ export default {
         const current = this.$refs[this.element.propValue.id]
 
         if (this.chart.isPlugin) {
-          current && current.callPluginInner && this.setDetailMapCode(null) && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: null })
+          current && current.callPluginInner && this.setDetailMapCode(null) && current.callPluginInner({
+            methodName: 'registerDynamicMap',
+            methodParam: null
+          })
         } else {
           current && current.registerDynamicMap && this.setDetailMapCode(null) && current.registerDynamicMap(null)
         }
@@ -963,7 +983,10 @@ export default {
       this.currentAcreaNode = tempNode
       const current = this.$refs[this.element.propValue.id]
       if (this.chart.isPlugin) {
-        current && current.callPluginInner && this.setDetailMapCode(this.currentAcreaNode.code) && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: this.currentAcreaNode.code })
+        current && current.callPluginInner && this.setDetailMapCode(this.currentAcreaNode.code) && current.callPluginInner({
+          methodName: 'registerDynamicMap',
+          methodParam: this.currentAcreaNode.code
+        })
       } else {
         current && current.registerDynamicMap && this.setDetailMapCode(this.currentAcreaNode.code) && current.registerDynamicMap(this.currentAcreaNode.code)
       }
@@ -990,7 +1013,10 @@ export default {
         this.currentAcreaNode = nextNode
         const current = this.$refs[this.element.propValue.id]
         if (this.chart.isPlugin) {
-          nextNode && current && current.callPluginInner && this.setDetailMapCode(nextNode.code) && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: nextNode.code })
+          nextNode && current && current.callPluginInner && this.setDetailMapCode(nextNode.code) && current.callPluginInner({
+            methodName: 'registerDynamicMap',
+            methodParam: nextNode.code
+          })
         } else {
           nextNode && current && current.registerDynamicMap && this.setDetailMapCode(nextNode.code) && current.registerDynamicMap(nextNode.code)
         }
@@ -1024,7 +1050,10 @@ export default {
       const current = this.$refs[this.element.propValue.id]
 
       if (this.chart.isPlugin) {
-        current && current.callPluginInner && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: areaNode.code })
+        current && current.callPluginInner && current.callPluginInner({
+          methodName: 'registerDynamicMap',
+          methodParam: areaNode.code
+        })
       } else {
         current && current.registerDynamicMap && current.registerDynamicMap(areaNode.code)
       }
@@ -1126,45 +1155,45 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .rect-shape {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-  }
+.rect-shape {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
 
-  .chart-class {
-    height: 100%;
-    padding: 0px!important;
-  }
+.chart-class {
+  height: 100%;
+  padding: 0px !important;
+}
 
-  .table-class {
-    height: 100%;
-  }
+.table-class {
+  height: 100%;
+}
 
-  .chart-error-class {
-    text-align: center;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #ece7e7;
-  }
+.chart-error-class {
+  text-align: center;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ece7e7;
+}
 
-  .chart-error-message-class {
-    font-size: 12px;
-    color: #9ea6b2;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+.chart-error-message-class {
+  font-size: 12px;
+  color: #9ea6b2;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
-  .active {
+.active {
 
-  }
+}
 
-  .active ::v-deep .icon-fangda {
-    z-index: 2;
-    display: block !important;
-  }
+.active ::v-deep .icon-fangda {
+  z-index: 2;
+  display: block !important;
+}
 </style>
diff --git a/frontend/src/components/canvas/custom-component/UserViewDialog.vue b/frontend/src/components/canvas/customComponent/UserViewDialog.vue
similarity index 100%
rename from frontend/src/components/canvas/custom-component/UserViewDialog.vue
rename to frontend/src/components/canvas/customComponent/UserViewDialog.vue
diff --git a/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue b/frontend/src/components/canvas/customComponent/UserViewMobileDialog.vue
similarity index 100%
rename from frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
rename to frontend/src/components/canvas/customComponent/UserViewMobileDialog.vue
diff --git a/frontend/src/components/canvas/custom-component/VButton.vue b/frontend/src/components/canvas/customComponent/VButton.vue
similarity index 100%
rename from frontend/src/components/canvas/custom-component/VButton.vue
rename to frontend/src/components/canvas/customComponent/VButton.vue
diff --git a/frontend/src/components/canvas/custom-component/VText.vue b/frontend/src/components/canvas/customComponent/VText.vue
similarity index 100%
rename from frontend/src/components/canvas/custom-component/VText.vue
rename to frontend/src/components/canvas/customComponent/VText.vue
diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/customComponent/component-list.js
similarity index 100%
rename from frontend/src/components/canvas/custom-component/component-list.js
rename to frontend/src/components/canvas/customComponent/component-list.js
diff --git a/frontend/src/components/canvas/customComponent/index.js b/frontend/src/components/canvas/customComponent/index.js
new file mode 100644
index 0000000000..dc40c41056
--- /dev/null
+++ b/frontend/src/components/canvas/customComponent/index.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+
+import Picture from '@/components/canvas/customComponent/Picture'
+import VText from '@/components/canvas/customComponent/VText'
+import VButton from '@/components/canvas/customComponent/VButton'
+import Group from '@/components/canvas/customComponent/Group'
+import RectShape from '@/components/canvas/customComponent/RectShape'
+import UserView from '@/components/canvas/customComponent/UserView'
+import DeVideo from '@/components/canvas/customComponent/DeVideo'
+import DeFrame from '@/components/canvas/customComponent/DeFrame'
+import DeStreamMedia from '@/components/canvas/customComponent/DeStreamMedia'
+import DeRichText from '@/components/canvas/customComponent/DeRichText'
+Vue.component('DeRichText', DeRichText)
+Vue.component('DeStreamMedia', DeStreamMedia)
+// eslint-disable-next-line
+Vue.component('Picture', Picture)
+Vue.component('VText', VText)
+Vue.component('VButton', VButton)
+Vue.component('Group', Group)
+Vue.component('RectShape', RectShape)
+Vue.component('UserView', UserView)
+Vue.component('DeVideo', DeVideo)
+Vue.component('DeFrame', DeFrame)
+
diff --git a/frontend/src/components/canvas/index.vue b/frontend/src/components/canvas/index.vue
index cb54b624a3..d53a0011e9 100644
--- a/frontend/src/components/canvas/index.vue
+++ b/frontend/src/components/canvas/index.vue
@@ -20,12 +20,13 @@
 
 <script>
 import Editor from '@/components/Editor/index'
-import componentList from '@/components/canvas/custom-component/component-list' // 左侧列表数据
+import componentList from '@/components/canvas/customComponent/component-list' // 左侧列表数据
 import Toolbar from '@/components/Toolbar'
 import { deepCopy } from '@/utils/utils'
 import { mapState } from 'vuex'
 import generateID from '@/utils/generateID'
 import { uuid } from 'vue-uuid'
+
 export default {
   components: { Editor, Toolbar },
   data() {
diff --git a/frontend/src/components/canvas/store/compose.js b/frontend/src/components/canvas/store/compose.js
index 8b6864a1f8..aed727ad53 100644
--- a/frontend/src/components/canvas/store/compose.js
+++ b/frontend/src/components/canvas/store/compose.js
@@ -3,7 +3,7 @@ import generateID from '@/components/canvas/utils/generateID'
 import eventBus from '@/components/canvas/utils/eventBus'
 import decomposeComponent from '@/components/canvas/utils/decomposeComponent'
 import { $ } from '@/components/canvas/utils/utils'
-import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
+import { commonStyle, commonAttr } from '@/components/canvas/customComponent/component-list'
 
 export default {
   state: {
diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js
index 988461c2cb..aa9bf63c4a 100644
--- a/frontend/src/components/canvas/utils/utils.js
+++ b/frontend/src/components/canvas/utils/utils.js
@@ -1,7 +1,7 @@
 import {
   BASE_MOBILE_STYLE, COMMON_BACKGROUND_NONE,
   HYPERLINKS
-} from '@/components/canvas/custom-component/component-list'
+} from '@/components/canvas/customComponent/component-list'
 
 import {
   ApplicationContext
diff --git a/frontend/src/components/dataease-tabs/index.vue b/frontend/src/components/dataeaseTabs/index.vue
similarity index 100%
rename from frontend/src/components/dataease-tabs/index.vue
rename to frontend/src/components/dataeaseTabs/index.vue
diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/deDrag/index.vue
similarity index 99%
rename from frontend/src/components/DeDrag/index.vue
rename to frontend/src/components/deDrag/index.vue
index e6c4b96bc9..36589b10a1 100644
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/deDrag/index.vue
@@ -84,20 +84,19 @@
 </template>
 
 <script>
-import { matchesSelectorToParentElements, getComputedSize, addEvent, removeEvent } from '../../utils/dom'
-import { computeWidth, computeHeight, restrictToBounds, snapToGrid, rotatedPoint, getAngle } from '../../utils/fns'
-import { events, userSelectNone, userSelectAuto } from './option.js'
-
-let eventsFor = events.mouse
-
+import { addEvent, getComputedSize, matchesSelectorToParentElements, removeEvent } from '../../utils/dom'
+import { computeHeight, computeWidth, getAngle, restrictToBounds, rotatedPoint, snapToGrid } from '../../utils/fns'
+import { events, userSelectAuto, userSelectNone } from './option.js'
 // private
 import eventBus from '@/components/canvas/utils/eventBus'
 import { mapState } from 'vuex'
-import EditBar from '@/components/canvas/components/Editor/EditBar'
-import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
+import EditBar from '@/components/canvas/components/editor/EditBar'
+import MobileCheckBar from '@/components/canvas/components/editor/MobileCheckBar'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
+let eventsFor = events.mouse
+
 export default {
   replace: true,
   name: 'DeDrag',
@@ -2120,6 +2119,6 @@ export default {
 }
 
 .drag-on-tab-collision {
-  z-index: 1000!important;
+  z-index: 1000 !important;
 }
 </style>
diff --git a/frontend/src/components/DeDrag/option.js b/frontend/src/components/deDrag/option.js
similarity index 100%
rename from frontend/src/components/DeDrag/option.js
rename to frontend/src/components/deDrag/option.js
diff --git a/frontend/src/components/DeDrag/pointShadow.vue b/frontend/src/components/deDrag/pointShadow.vue
similarity index 100%
rename from frontend/src/components/DeDrag/pointShadow.vue
rename to frontend/src/components/deDrag/pointShadow.vue
diff --git a/frontend/src/components/DeDrag/shadow.vue b/frontend/src/components/deDrag/shadow.vue
similarity index 100%
rename from frontend/src/components/DeDrag/shadow.vue
rename to frontend/src/components/deDrag/shadow.vue
diff --git a/frontend/src/components/DeViewSelect/dom.js b/frontend/src/components/deViewSelect/dom.js
similarity index 100%
rename from frontend/src/components/DeViewSelect/dom.js
rename to frontend/src/components/deViewSelect/dom.js
diff --git a/frontend/src/components/DeViewSelect/index.vue b/frontend/src/components/deViewSelect/index.vue
similarity index 99%
rename from frontend/src/components/DeViewSelect/index.vue
rename to frontend/src/components/deViewSelect/index.vue
index 057055c43f..2e0c15d0b2 100644
--- a/frontend/src/components/DeViewSelect/index.vue
+++ b/frontend/src/components/deViewSelect/index.vue
@@ -65,10 +65,11 @@
 </template>
 
 <script>
-import Preview from '@/components/canvas/components/Editor/Preview'
+import Preview from '@/components/canvas/components/editor/Preview'
 import { findOne } from '@/api/panel/panel'
 import { viewOptions } from '@/api/chart/chart'
 import { panelDataPrepare } from '@/components/canvas/utils/utils'
+
 export default {
   name: 'DeViewSelect',
   components: { Preview },
@@ -240,6 +241,7 @@ export default {
 .my-top-class {
   width: 100%;
 }
+
 .dialog-css ::v-deep .el-dialog__title {
   font-size: 14px;
 }
diff --git a/frontend/src/components/Doc/index.vue b/frontend/src/components/doc/index.vue
similarity index 100%
rename from frontend/src/components/Doc/index.vue
rename to frontend/src/components/doc/index.vue
diff --git a/frontend/src/components/DragItem/index.vue b/frontend/src/components/dragItem/index.vue
similarity index 100%
rename from frontend/src/components/DragItem/index.vue
rename to frontend/src/components/dragItem/index.vue
diff --git a/frontend/src/components/ElTreeSelect/dom.js b/frontend/src/components/elTreeSelect/dom.js
similarity index 100%
rename from frontend/src/components/ElTreeSelect/dom.js
rename to frontend/src/components/elTreeSelect/dom.js
diff --git a/frontend/src/components/ElTreeSelect/index.vue b/frontend/src/components/elTreeSelect/index.vue
similarity index 100%
rename from frontend/src/components/ElTreeSelect/index.vue
rename to frontend/src/components/elTreeSelect/index.vue
diff --git a/frontend/src/components/ElTreeSelect/utils.js b/frontend/src/components/elTreeSelect/utils.js
similarity index 100%
rename from frontend/src/components/ElTreeSelect/utils.js
rename to frontend/src/components/elTreeSelect/utils.js
diff --git a/frontend/src/components/ElVisualSelect/index.vue b/frontend/src/components/elVisualSelect/index.vue
similarity index 100%
rename from frontend/src/components/ElVisualSelect/index.vue
rename to frontend/src/components/elVisualSelect/index.vue
diff --git a/frontend/src/components/GradientColorSelector/DeColorPicker.vue b/frontend/src/components/gradientColorSelector/DeColorPicker.vue
similarity index 100%
rename from frontend/src/components/GradientColorSelector/DeColorPicker.vue
rename to frontend/src/components/gradientColorSelector/DeColorPicker.vue
diff --git a/frontend/src/components/GradientColorSelector/base.js b/frontend/src/components/gradientColorSelector/base.js
similarity index 100%
rename from frontend/src/components/GradientColorSelector/base.js
rename to frontend/src/components/gradientColorSelector/base.js
diff --git a/frontend/src/components/GradientColorSelector/index.vue b/frontend/src/components/gradientColorSelector/index.vue
similarity index 100%
rename from frontend/src/components/GradientColorSelector/index.vue
rename to frontend/src/components/gradientColorSelector/index.vue
diff --git a/frontend/src/components/GridButton/index.vue b/frontend/src/components/gridButton/index.vue
similarity index 100%
rename from frontend/src/components/GridButton/index.vue
rename to frontend/src/components/gridButton/index.vue
diff --git a/frontend/src/components/Hamburger/index.vue b/frontend/src/components/hamburger/index.vue
similarity index 100%
rename from frontend/src/components/Hamburger/index.vue
rename to frontend/src/components/hamburger/index.vue
diff --git a/frontend/src/components/LangSelect/index.vue b/frontend/src/components/langSelect/index.vue
similarity index 100%
rename from frontend/src/components/LangSelect/index.vue
rename to frontend/src/components/langSelect/index.vue
diff --git a/frontend/src/components/Notification/index.vue b/frontend/src/components/notification/index.vue
similarity index 100%
rename from frontend/src/components/Notification/index.vue
rename to frontend/src/components/notification/index.vue
diff --git a/frontend/src/components/Pagination/index.vue b/frontend/src/components/pagination/index.vue
similarity index 100%
rename from frontend/src/components/Pagination/index.vue
rename to frontend/src/components/pagination/index.vue
diff --git a/frontend/src/components/Screenfull/index.vue b/frontend/src/components/screenfull/index.vue
similarity index 100%
rename from frontend/src/components/Screenfull/index.vue
rename to frontend/src/components/screenfull/index.vue
diff --git a/frontend/src/components/SizeSelect/index.vue b/frontend/src/components/sizeSelect/index.vue
similarity index 100%
rename from frontend/src/components/SizeSelect/index.vue
rename to frontend/src/components/sizeSelect/index.vue
diff --git a/frontend/src/components/SvgIcon/index.vue b/frontend/src/components/svgIcon/index.vue
similarity index 100%
rename from frontend/src/components/SvgIcon/index.vue
rename to frontend/src/components/svgIcon/index.vue
diff --git a/frontend/src/components/ThemePicker/index.vue b/frontend/src/components/themePicker/index.vue
similarity index 100%
rename from frontend/src/components/ThemePicker/index.vue
rename to frontend/src/components/themePicker/index.vue
diff --git a/frontend/src/components/TreeSelector/index.vue b/frontend/src/components/treeSelector/index.vue
similarity index 100%
rename from frontend/src/components/TreeSelector/index.vue
rename to frontend/src/components/treeSelector/index.vue
diff --git a/frontend/src/components/widget/DeWidget/DeSelect.vue b/frontend/src/components/widget/DeWidget/DeSelect.vue
index ea96a77484..8099ed66df 100644
--- a/frontend/src/components/widget/DeWidget/DeSelect.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelect.vue
@@ -40,8 +40,8 @@
 </template>
 
 <script>
-import ElVisualSelect from '@/components/ElVisualSelect'
-import { multFieldValues, linkMultFieldValues } from '@/api/dataset/dataset'
+import ElVisualSelect from '@/components/elVisualSelect'
+import { linkMultFieldValues, multFieldValues } from '@/api/dataset/dataset'
 import bus from '@/utils/bus'
 import { isSameVueObj } from '@/utils'
 import { getLinkToken, getToken } from '@/utils/auth'
@@ -58,7 +58,8 @@ export default {
     },
     element: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     },
     inDraw: {
       type: Boolean,
@@ -260,7 +261,10 @@ export default {
         if (!token && linkToken) {
           method = linkMultFieldValues
         }
-        method({ fieldIds: this.element.options.attrs.fieldId.split(','), sort: this.element.options.attrs.sort }).then(res => {
+        method({
+          fieldIds: this.element.options.attrs.fieldId.split(','),
+          sort: this.element.options.attrs.sort
+        }).then(res => {
           this.data = this.optionData(res.data)
           bus.$emit('valid-values-change', true)
         }).catch(e => {
@@ -396,6 +400,7 @@ export default {
   .el-select-dropdown__item.selected {
     background-color: rgb(245, 247, 250, .5) !important;
   }
+
   .el-select-dropdown__item.hover {
     background-color: rgb(245, 247, 250, .5) !important;
   }
diff --git a/frontend/src/components/widget/DeWidget/DeSelectTree.vue b/frontend/src/components/widget/DeWidget/DeSelectTree.vue
index 77950175d1..7b27ef8b46 100644
--- a/frontend/src/components/widget/DeWidget/DeSelectTree.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectTree.vue
@@ -24,11 +24,11 @@
 </template>
 
 <script>
-import { mappingFieldValues, linkMappingFieldValues } from '@/api/dataset/dataset'
+import { linkMappingFieldValues, mappingFieldValues } from '@/api/dataset/dataset'
 import bus from '@/utils/bus'
 import { isSameVueObj } from '@/utils'
 import { getLinkToken, getToken } from '@/utils/auth'
-import ElTreeSelect from '@/components/ElTreeSelect'
+import ElTreeSelect from '@/components/elTreeSelect'
 import customInput from '@/components/widget/DeWidget/customInput'
 import { textSelectWidget } from '@/components/widget/DeWidget/serviceNameFn.js'
 
@@ -42,7 +42,8 @@ export default {
     },
     element: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     },
     inDraw: {
       type: Boolean,
@@ -272,7 +273,10 @@ export default {
         if (!token && linkToken) {
           method = linkMappingFieldValues
         }
-        method({ fieldIds: this.element.options.attrs.fieldId.split(','), sort: this.element.options.attrs.sort }).then(res => {
+        method({
+          fieldIds: this.element.options.attrs.fieldId.split(','),
+          sort: this.element.options.attrs.sort
+        }).then(res => {
           this.data = this.optionData(res.data)
           this.$nextTick(() => {
             this.$refs.deSelectTree && this.$refs.deSelectTree.treeDataUpdateFun(this.data)
@@ -386,7 +390,9 @@ export default {
     _renderFun(h, { node, data, store }) {
       const { props, clickParent } = this.treeParams
       return (
-        <span class={['custom-tree-node', !clickParent && data[props.children] && data[props.children].length ? 'disabled' : null]}>
+        <span
+          class={['custom-tree-node', !clickParent && data[props.children] && data[props.children].length ? 'disabled' : null]}
+        >
           <span>{node.label}</span>
         </span>
       )
@@ -414,7 +420,8 @@ export default {
     .el-tree-node.is-current {
       background-color: rgb(245, 247, 250, .5) !important;
     }
-    .el-tree-node:focus>.el-tree-node__content {
+
+    .el-tree-node:focus > .el-tree-node__content {
       background-color: rgb(245, 247, 250, .5) !important;
     }
 
diff --git a/frontend/src/components/widget/DeWidget/DeTabs.vue b/frontend/src/components/widget/DeWidget/DeTabs.vue
index 21206251f8..e6c1614baa 100644
--- a/frontend/src/components/widget/DeWidget/DeTabs.vue
+++ b/frontend/src/components/widget/DeWidget/DeTabs.vue
@@ -213,11 +213,11 @@
 </template>
 
 <script>
-import DataeaseTabs from '@/components/dataease-tabs'
+import DataeaseTabs from '@/components/dataeaseTabs'
 import ViewSelect from '@/views/panel/ViewSelect'
 import { uuid } from 'vue-uuid'
 import bus from '@/utils/bus'
-import componentList from '@/components/canvas/custom-component/component-list'
+import componentList from '@/components/canvas/customComponent/component-list'
 import { mapState } from 'vuex'
 import { chartCopy } from '@/api/chart/chart'
 import { buildFilterMap } from '@/utils/conditionUtil'
@@ -225,7 +225,7 @@ import TabUseList from '@/views/panel/AssistComponent/tabUseList'
 import { findPanelElementInfo } from '@/api/panel/panel'
 import { getNowCanvasComponentData } from '@/components/canvas/utils/utils'
 import DeCanvasTab from '@/components/canvas/DeCanvas'
-import Preview from '@/components/canvas/components/Editor/Preview'
+import Preview from '@/components/canvas/components/editor/Preview'
 import TextAttr from '@/components/canvas/components/TextAttr'
 
 export default {
@@ -692,16 +692,17 @@ export default {
 .frame-mask {
   display: flex;
   opacity: 0;
-  position:absolute;
-  top:0px;
+  position: absolute;
+  top: 0px;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.edit-mask{
+
+.edit-mask {
   left: 0px;
-  height: 100%!important;
+  height: 100% !important;
   width: 100% !important;
 }
 
diff --git a/frontend/src/icons/index.js b/frontend/src/icons/index.js
index 05d6e7e056..277fb97b7c 100644
--- a/frontend/src/icons/index.js
+++ b/frontend/src/icons/index.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import SvgIcon from '@/components/SvgIcon'// svg component
+import SvgIcon from '@/components/svgIcon' // svg component
 
 // register globally
 Vue.component('SvgIcon', SvgIcon)
diff --git a/frontend/src/layout/components/Topbar.vue b/frontend/src/layout/components/Topbar.vue
index 0154741c49..4923c01a43 100644
--- a/frontend/src/layout/components/Topbar.vue
+++ b/frontend/src/layout/components/Topbar.vue
@@ -35,7 +35,8 @@
             v-if="!item.hidden"
             :index="item.path"
           >
-            {{ item.meta ? item.meta.title : item.children[0].meta.title }}</el-menu-item>
+            {{ item.meta ? item.meta.title : item.children[0].meta.title }}
+          </el-menu-item>
         </app-link>
       </div>
     </el-menu>
@@ -120,28 +121,19 @@
 </template>
 
 <script>
-import {
-  mapGetters
-} from 'vuex'
+import { mapGetters } from 'vuex'
 import AppLink from './Sidebar/Link'
 import variables from '@/styles/variables.scss'
-import {
-  isExternal
-} from '@/utils/validate'
-import Notification from '@/components/Notification'
+import { isExternal } from '@/utils/validate'
+import Notification from '@/components/notification'
 import bus from '@/utils/bus'
-import LangSelect from '@/components/LangSelect'
-import {
-  getSysUI
-} from '@/utils/auth'
-import {
-  pluginLoaded
-} from '@/api/user'
-import {
-  initTheme
-} from '@/utils/ThemeUtil'
+import LangSelect from '@/components/langSelect'
+import { getSysUI } from '@/utils/auth'
+import { pluginLoaded } from '@/api/user'
+import { initTheme } from '@/utils/ThemeUtil'
 import TemplateMarket from '@/views/panel/templateMarket'
 import { changeFavicon } from '@/utils/index'
+
 export default {
   name: 'Topbar',
   components: {
@@ -307,9 +299,9 @@ export default {
       // 如果有子项，默认跳转第一个子项路由
       let path = ''
       /**
-         * item 路由子项
-         * parent 路由父项
-         */
+       * item 路由子项
+       * parent 路由父项
+       */
       const getDefaultPath = (item, parent) => {
         // 如果path是个外部链接（不建议），直接返回链接，存在个问题：如果是外部链接点击跳转后当前页内容还是上一个路由内容
         if (isExternal(item.path)) {
@@ -417,38 +409,39 @@ export default {
 
 </script>
 <style lang="scss" scoped>
-  .el-dropdown-link {
-    cursor: pointer;
-    color: #1e212a;
-  }
+.el-dropdown-link {
+  cursor: pointer;
+  color: #1e212a;
+}
 
-  .el-icon-arrow-down {
-    font-size: 12px;
-  }
+.el-icon-arrow-down {
+  font-size: 12px;
+}
 
-  .top-dropdown {
-    display: inline-block;
-    padding: 10px 8px;
-    height: 100%;
-    font-size: 16px;
-    color: #1e212a;
-    vertical-align: text-bottom;
-    margin-right: 10px;
-  }
+.top-dropdown {
+  display: inline-block;
+  padding: 10px 8px;
+  height: 100%;
+  font-size: 16px;
+  color: #1e212a;
+  vertical-align: text-bottom;
+  margin-right: 10px;
+}
 
-  .de-top-menu {
-    background-color: var(--MainBG);
+.de-top-menu {
+  background-color: var(--MainBG);
 
-  }
-  .template-market-item{
-    display: flex;
-    color: var(--MenuActiveBG, #409EFF);
-    font-size: 14px!important;
-    line-height: 38px!important;
-  }
+}
 
-  .dialog-css ::v-deep .el-dialog__header{
-    display: none;
-  }
+.template-market-item {
+  display: flex;
+  color: var(--MenuActiveBG, #409EFF);
+  font-size: 14px !important;
+  line-height: 38px !important;
+}
+
+.dialog-css ::v-deep .el-dialog__header {
+  display: none;
+}
 
 </style>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 1d583ade25..c72219e522 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -20,38 +20,42 @@ import widgets from '@/components/widget'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import './utils/dialog'
-import DeComplexInput from '@/components/business/condition-table/DeComplexInput'
-import DeComplexSelect from '@/components/business/condition-table/DeComplexSelect'
-import DeViewSelect from '@/components/DeViewSelect'
+import DeComplexInput from '@/components/business/conditionTable/DeComplexInput'
+import DeComplexSelect from '@/components/business/conditionTable/DeComplexSelect'
+import DeViewSelect from '@/components/deViewSelect'
 import RemarkEditor from '@/views/chart/components/component-style/dialog/RemarkEditor'
 import TitleRemark from '@/views/chart/view/TitleRemark'
-import '@/components/canvas/custom-component' // 注册自定义组件
+import '@/components/canvas/customComponent' // 注册自定义组件
 import deBtn from '@/components/deCustomCm/deBtn.vue'
 
 import '@/utils/DateUtil'
 import draggable from 'vuedraggable'
 import deWebsocket from '@/websocket'
 import { GaodeMap } from '@antv/l7-maps'
+import * as echarts from 'echarts'
+import UmyUi from 'umy-ui'
+// 全屏插件
+import fullscreen from 'vue-fullscreen'
+import VueFriendlyIframe from 'vue-friendly-iframe'
+import vueToPdf from 'vue-to-pdf'
+import VueVideoPlayer from 'vue-video-player'
+import 'video.js/dist/video-js.css'
+// 控制标签宽高成比例的指令
+import proportion from 'vue-proportion-directive'
+
 Vue.config.productionTip = false
 Vue.use(VueClipboard)
 Vue.use(widgets)
 Vue.component('Draggable', draggable)
 Vue.prototype.$api = api
 
-import * as echarts from 'echarts'
-
 Vue.prototype.$echarts = echarts
 Vue.prototype.$gaodeMap = GaodeMap
 
-import UmyUi from 'umy-ui'
 Vue.use(UmyUi)
 
-// 全屏插件
-import fullscreen from 'vue-fullscreen'
 Vue.use(fullscreen)
 
-import VueFriendlyIframe from 'vue-friendly-iframe'
-
 Vue.use(VueFriendlyIframe)
 Vue.use(Vuetify)
 // import TEditor from '@/components/Tinymce/index.vue'
@@ -96,15 +100,10 @@ Vue.component('DeBtn', deBtn)
 
 Vue.config.productionTip = false
 
-import vueToPdf from 'vue-to-pdf'
 Vue.use(vueToPdf)
 
-import VueVideoPlayer from 'vue-video-player'
-import 'video.js/dist/video-js.css'
 Vue.use(VueVideoPlayer)
 
-// 控制标签宽高成比例的指令
-import proportion from 'vue-proportion-directive'
 Vue.use(proportion)
 
 Vue.prototype.hasDataPermission = function(pTarget, pSource) {
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 066503b320..c63d5842b9 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -79,17 +79,17 @@ export const constantRoutes = [
 
   {
     path: '/preview/:reportId',
-    component: () => import('@/components/canvas/components/Editor/PreviewEject'),
+    component: () => import('@/components/canvas/components/editor/PreviewEject'),
     hidden: true
   },
   {
     path: '/previewScreenShot/:reportId/:backScreenShot',
-    component: () => import('@/components/canvas/components/Editor/PreviewEject'),
+    component: () => import('@/components/canvas/components/editor/PreviewEject'),
     hidden: true
   },
   {
     path: '/previewFullScreen',
-    component: () => import('@/components/canvas/components/Editor/PreviewFullScreen'),
+    component: () => import('@/components/canvas/components/editor/PreviewFullScreen'),
     hidden: true
   }
 
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 12e2388627..f03e066752 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -29,7 +29,7 @@ import {
   DEFAULT_COMMON_CANVAS_STYLE_STRING
 } from '@/views/panel/panel'
 import bus from '@/utils/bus'
-import { BASE_MOBILE_STYLE } from '@/components/canvas/custom-component/component-list'
+import { BASE_MOBILE_STYLE } from '@/components/canvas/customComponent/component-list'
 import { TYPE_CONFIGS } from '@/views/chart/chart/util'
 import { deepCopy } from '@/components/canvas/utils/utils'
 
diff --git a/frontend/src/views/background/index.vue b/frontend/src/views/background/index.vue
index a8155447d7..1b264d968b 100644
--- a/frontend/src/views/background/index.vue
+++ b/frontend/src/views/background/index.vue
@@ -97,7 +97,8 @@
               v-model="curComponent.commonBackground.backgroundType"
               label="outerImage"
               @change="onChangeType"
-            >{{ $t('panel.photo') }}</el-radio>
+            >{{ $t('panel.photo') }}
+            </el-radio>
           </el-col>
           <el-col style="width: 130px!important;">
             <el-upload
@@ -136,7 +137,8 @@
               v-model="curComponent.commonBackground.backgroundType"
               label="innerImage"
               @change="onChangeType"
-            >边框</el-radio>
+            >边框
+            </el-radio>
             <el-color-picker
               v-model="curComponent.commonBackground.innerImageColor"
               :title="'边框配色'"
@@ -237,12 +239,14 @@
         <el-button
           size="mini"
           @click="cancel()"
-        >{{ $t('commons.cancel') }}</el-button>
+        >{{ $t('commons.cancel') }}
+        </el-button>
         <el-button
           type="primary"
           size="mini"
           @click="save()"
-        >{{ $t('commons.confirm') }}</el-button>
+        >{{ $t('commons.confirm') }}
+        </el-button>
       </el-col>
     </el-row>
   </el-row>
@@ -255,7 +259,7 @@ import { mapState } from 'vuex'
 import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
 import { COLOR_PANEL } from '@/views/chart/chart/chart'
 import { uploadFileResult } from '@/api/staticResource/staticResource'
-import { COMMON_BACKGROUND_NONE } from '@/components/canvas/custom-component/component-list'
+import { COMMON_BACKGROUND_NONE } from '@/components/canvas/customComponent/component-list'
 
 export default {
   name: 'Background',
@@ -341,73 +345,83 @@ export default {
 </script>
 
 <style scoped>
-  .el-card-template {
-    min-width: 260px;
-    min-width: 460px;
-    width: 100%;
-    height: 100%;
-  }
+.el-card-template {
+  min-width: 260px;
+  min-width: 460px;
+  width: 100%;
+  height: 100%;
+}
 
-  .main-row{
-    height: 140px;
-    overflow-y: auto;
-  }
+.main-row {
+  height: 140px;
+  overflow-y: auto;
+}
 
-  .root-class {
-    margin: 15px 0px 5px;
-    text-align: center;
-  }
-  .avatar-uploader ::v-deep .el-upload {
-    width: 120px;
-    height: 80px;
-    line-height: 90px;
-  }
-  .avatar-uploader ::v-deep .el-upload-list li{
-    width: 120px !important;
-    height: 80px !important;
-  }
-  .disabled ::v-deep .el-upload--picture-card {
-    display: none;
-  }
-  .shape-item{
-    padding: 6px;
-    border: none;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .form-item-slider ::v-deep .el-form-item__label{
-    font-size: 12px;
-    line-height: 38px;
-  }
-  .form-item ::v-deep .el-form-item__label{
-    font-size: 12px;
-  }
-  .el-select-dropdown__item{
-    padding: 0 20px;
-  }
-  span{
-    font-size: 12px
-  }
-  .el-form-item{
-    margin-bottom: 6px;
-  }
-  .main-content{
-    border:1px solid #E6E6E6;
-  }
+.root-class {
+  margin: 15px 0px 5px;
+  text-align: center;
+}
 
-  .params-title{
-    font-weight: bold;
-    line-height: 40px;
-    margin-left: 10px;
-    font-size: 14px;
-  }
+.avatar-uploader ::v-deep .el-upload {
+  width: 120px;
+  height: 80px;
+  line-height: 90px;
+}
 
-  .params-title-small{
-    font-weight: bold;
-    line-height: 40px;
-    margin-left: 10px;
-    font-size: 12px;
-  }
+.avatar-uploader ::v-deep .el-upload-list li {
+  width: 120px !important;
+  height: 80px !important;
+}
+
+.disabled ::v-deep .el-upload--picture-card {
+  display: none;
+}
+
+.shape-item {
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.form-item-slider ::v-deep .el-form-item__label {
+  font-size: 12px;
+  line-height: 38px;
+}
+
+.form-item ::v-deep .el-form-item__label {
+  font-size: 12px;
+}
+
+.el-select-dropdown__item {
+  padding: 0 20px;
+}
+
+span {
+  font-size: 12px
+}
+
+.el-form-item {
+  margin-bottom: 6px;
+}
+
+.main-content {
+  border: 1px solid #E6E6E6;
+}
+
+.params-title {
+  font-weight: bold;
+  line-height: 40px;
+  margin-left: 10px;
+  font-size: 14px;
+}
+
+.params-title-small {
+  font-weight: bold;
+  line-height: 40px;
+  margin-left: 10px;
+  font-size: 12px;
+}
 </style>
diff --git a/frontend/src/views/chart/chart/map/map.js b/frontend/src/views/chart/chart/map/map.js
index 65ae8ff0d9..4e6e9d7da7 100644
--- a/frontend/src/views/chart/chart/map/map.js
+++ b/frontend/src/views/chart/chart/map/map.js
@@ -1,7 +1,7 @@
 // import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { componentStyle } from '../common/common'
 import { BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
-import { isGradientValue } from '@/components/GradientColorSelector/base'
+import { isGradientValue } from '@/components/gradientColorSelector/base'
 const linearCOlor = (start, end) => {
   return {
     type: 'linear',
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index c7d1178eca..84c7849e1c 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -56,61 +56,33 @@
 <script>
 import {
   BASE_BAR,
-  BASE_LINE,
-  HORIZONTAL_BAR,
-  BASE_PIE,
   BASE_FUNNEL,
-  BASE_RADAR,
   BASE_GAUGE,
+  BASE_LINE,
   BASE_MAP,
+  BASE_MIX,
+  BASE_PIE,
+  BASE_RADAR,
   BASE_SCATTER,
   BASE_TREEMAP,
-  BASE_MIX
+  HORIZONTAL_BAR
 } from '../chart/chart'
-import {
-  baseBarOption,
-  stackBarOption,
-  horizontalBarOption,
-  horizontalStackBarOption
-} from '../chart/bar/bar'
-import {
-  baseLineOption,
-  stackLineOption
-} from '../chart/line/line'
-import {
-  basePieOption,
-  rosePieOption
-} from '../chart/pie/pie'
-import {
-  baseMapOption
-} from '../chart/map/map'
-import {
-  baseFunnelOption
-} from '../chart/funnel/funnel'
-import {
-  baseRadarOption
-} from '../chart/radar/radar'
-import {
-  baseGaugeOption
-} from '../chart/gauge/gauge'
-import {
-  baseScatterOption
-} from '../chart/scatter/scatter'
-import {
-  baseTreemapOption
-} from '../chart/treemap/treemap'
-import {
-  baseMixOption
-} from '@/views/chart/chart/mix/mix'
-import {
-  uuid
-} from 'vue-uuid'
-import {
-  geoJson
-} from '@/api/map/map'
-import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
+import { baseBarOption, horizontalBarOption, horizontalStackBarOption, stackBarOption } from '../chart/bar/bar'
+import { baseLineOption, stackLineOption } from '../chart/line/line'
+import { basePieOption, rosePieOption } from '../chart/pie/pie'
+import { baseMapOption } from '../chart/map/map'
+import { baseFunnelOption } from '../chart/funnel/funnel'
+import { baseRadarOption } from '../chart/radar/radar'
+import { baseGaugeOption } from '../chart/gauge/gauge'
+import { baseScatterOption } from '../chart/scatter/scatter'
+import { baseTreemapOption } from '../chart/treemap/treemap'
+import { baseMixOption } from '@/views/chart/chart/mix/mix'
+import { uuid } from 'vue-uuid'
+import { geoJson } from '@/api/map/map'
+import ViewTrackBar from '@/components/canvas/components/editor/ViewTrackBar'
 import { reverseColor } from '../chart/common/common'
 import { mapState } from 'vuex'
+
 export default {
   name: 'ChartComponent',
   components: {
@@ -217,14 +189,30 @@ export default {
   },
   methods: {
     reDrawView() {
-      this.myChart.dispatchAction({ type: 'unselect', seriesIndex: this.linkageActiveParam.seriesIndex, name: this.linkageActiveParam.name })
-      this.myChart.dispatchAction({ type: 'downplay', seriesIndex: this.linkageActiveParam.seriesIndex, name: this.linkageActiveParam.name })
+      this.myChart.dispatchAction({
+        type: 'unselect',
+        seriesIndex: this.linkageActiveParam.seriesIndex,
+        name: this.linkageActiveParam.name
+      })
+      this.myChart.dispatchAction({
+        type: 'downplay',
+        seriesIndex: this.linkageActiveParam.seriesIndex,
+        name: this.linkageActiveParam.name
+      })
       this.linkageActiveParam = null
     },
     linkageActive() {
       if (this.linkageActiveParam) {
-        this.myChart.dispatchAction({ type: 'select', seriesIndex: this.linkageActiveParam.seriesIndex, name: this.linkageActiveParam.name })
-        this.myChart.dispatchAction({ type: 'highlight', seriesIndex: this.linkageActiveParam.seriesIndex, name: this.linkageActiveParam.name })
+        this.myChart.dispatchAction({
+          type: 'select',
+          seriesIndex: this.linkageActiveParam.seriesIndex,
+          name: this.linkageActiveParam.name
+        })
+        this.myChart.dispatchAction({
+          type: 'highlight',
+          seriesIndex: this.linkageActiveParam.seriesIndex,
+          name: this.linkageActiveParam.name
+        })
       }
     },
     preDraw() {
@@ -492,15 +480,15 @@ export default {
 </script>
 
 <style scoped>
-  .map-zoom-box {
-    position: absolute;
-    z-index: 0;
-    left: 2%;
-    bottom: 30px;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-    text-align: center;
-    padding: 2px;
-    border-radius: 5px
-  }
+.map-zoom-box {
+  position: absolute;
+  z-index: 0;
+  left: 2%;
+  bottom: 30px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  text-align: center;
+  padding: 2px;
+  border-radius: 5px
+}
 
 </style>
diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue
index 891c7195eb..fe5998d8be 100644
--- a/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@@ -41,7 +41,7 @@
 <script>
 import { baseLiquid } from '@/views/chart/chart/liquid/liquid'
 import { uuid } from 'vue-uuid'
-import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
+import ViewTrackBar from '@/components/canvas/components/editor/ViewTrackBar'
 import { getRemark, hexColorToRGBA } from '@/views/chart/chart/util'
 import { baseBarOptionAntV, hBaseBarOptionAntV } from '@/views/chart/chart/bar/bar_antv'
 import { baseAreaOptionAntV, baseLineOptionAntV } from '@/views/chart/chart/line/line_antv'
@@ -57,6 +57,7 @@ import TitleRemark from '@/views/chart/view/TitleRemark'
 import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 import { baseMixOptionAntV } from '@/views/chart/chart/mix/mix_antv'
 import ChartTitleUpdate from './ChartTitleUpdate.vue'
+
 export default {
   name: 'ChartComponentG2',
   components: { TitleRemark, ViewTrackBar, ChartTitleUpdate },
@@ -145,7 +146,9 @@ export default {
       handler(newVal, oldVla) {
         this.initTitle()
         this.calcHeightDelay()
-        new Promise((resolve) => { resolve() }).then(() => {
+        new Promise((resolve) => {
+          resolve()
+        }).then(() => {
           this.drawView()
         })
       },
@@ -204,7 +207,9 @@ export default {
     preDraw() {
       this.initTitle()
       this.calcHeightDelay()
-      new Promise((resolve) => { resolve() }).then(() => {
+      new Promise((resolve) => {
+        resolve()
+      }).then(() => {
         this.drawView()
       })
       window.addEventListener('resize', this.calcHeightDelay)
diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue
index bfc811a891..7077eb23c2 100644
--- a/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/frontend/src/views/chart/components/ChartComponentS2.vue
@@ -59,7 +59,7 @@
       >
         <span class="total-style">
           {{ $t('chart.total') }}
-          <span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span>
+          <span>{{ (chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0 }}</span>
           {{ $t('chart.items') }}
         </span>
         <el-pagination
@@ -81,12 +81,13 @@
 
 <script>
 import { uuid } from 'vue-uuid'
-import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
+import ViewTrackBar from '@/components/canvas/components/editor/ViewTrackBar'
 import { getRemark, hexColorToRGBA } from '@/views/chart/chart/util'
 import { baseTableInfo, baseTableNormal, baseTablePivot } from '@/views/chart/chart/table/table-info'
 import TitleRemark from '@/views/chart/view/TitleRemark'
 import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 import ChartTitleUpdate from './ChartTitleUpdate.vue'
+
 export default {
   name: 'ChartComponentS2',
   components: { TitleRemark, ViewTrackBar, ChartTitleUpdate },
@@ -180,7 +181,9 @@ export default {
         this.initData()
         this.initTitle()
         this.calcHeightDelay()
-        new Promise((resolve) => { resolve() }).then(() => {
+        new Promise((resolve) => {
+          resolve()
+        }).then(() => {
           this.drawView()
         })
       },
@@ -231,7 +234,9 @@ export default {
       this.initData()
       this.initTitle()
       this.calcHeightDelay()
-      new Promise((resolve) => { resolve() }).then(() => {
+      new Promise((resolve) => {
+        resolve()
+      }).then(() => {
         this.drawView()
       })
     },
@@ -327,7 +332,9 @@ export default {
       this.initData()
       this.initTitle()
       this.calcHeightDelay()
-      new Promise((resolve) => { resolve() }).then(() => {
+      new Promise((resolve) => {
+        resolve()
+      }).then(() => {
         this.drawView()
       })
     },
@@ -471,25 +478,31 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.table-dom-info{
-  height:calc(100% - 36px);
+.table-dom-info {
+  height: calc(100% - 36px);
 }
-.table-dom-info-pull{
-  height:calc(100%);
+
+.table-dom-info-pull {
+  height: calc(100%);
 }
-.table-dom-normal{
-  height:100%;
+
+.table-dom-normal {
+  height: 100%;
 }
-.table-dom-info-drill{
-  height:calc(100% - 36px - 24px);
+
+.table-dom-info-drill {
+  height: calc(100% - 36px - 24px);
 }
-.table-dom-info-drill-pull{
-  height:calc(100% - 24px);
+
+.table-dom-info-drill-pull {
+  height: calc(100% - 24px);
 }
-.table-dom-normal-drill{
-  height:calc(100% - 24px);
+
+.table-dom-normal-drill {
+  height: calc(100% - 24px);
 }
-.table-page{
+
+.table-page {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -497,23 +510,28 @@ export default {
   overflow: hidden;
   margin-top: 8px;
 }
-.page-style{
+
+.page-style {
   margin-right: auto;
 }
-.total-style{
+
+.total-style {
   flex: 1;
   font-size: 12px;
   color: #606266;
-  white-space:nowrap;
+  white-space: nowrap;
   padding-left: 8px;
 }
-.page-style ::v-deep .el-input__inner{
+
+.page-style ::v-deep .el-input__inner {
   height: 24px;
 }
-.page-style ::v-deep button{
-  background: transparent!important;
+
+.page-style ::v-deep button {
+  background: transparent !important;
 }
-.page-style ::v-deep li{
-  background: transparent!important;
+
+.page-style ::v-deep li {
+  background: transparent !important;
 }
 </style>
diff --git a/frontend/src/views/chart/components/normal/LabelNormalText.vue b/frontend/src/views/chart/components/normal/LabelNormalText.vue
index 350aff5983..db3e79ab7f 100644
--- a/frontend/src/views/chart/components/normal/LabelNormalText.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormalText.vue
@@ -59,7 +59,7 @@
 <script>
 import { getRemark, hexColorToRGBA } from '../../chart/util'
 import eventBus from '@/components/canvas/utils/eventBus'
-import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
+import ViewTrackBar from '@/components/canvas/components/editor/ViewTrackBar'
 import TitleRemark from '@/views/chart/view/TitleRemark'
 import { DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 import ChartTitleUpdate from '../ChartTitleUpdate.vue'
@@ -309,7 +309,7 @@ export default {
 </script>
 
 <style scoped>
-.table-class ::v-deep .body--wrapper{
-  background: rgba(1,1,1,0);
+.table-class ::v-deep .body--wrapper {
+  background: rgba(1, 1, 1, 0);
 }
 </style>
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index 6d2a8037bc..6c8d7a0749 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -59,7 +59,8 @@
                     type="text"
                     style="margin-left: 2px;"
                     @click="resetCustomColor"
-                  >{{ $t('commons.reset') }}</el-button>
+                  >{{ $t('commons.reset') }}
+                  </el-button>
                 </div>
                 <!--自定义配色方案-->
                 <div
@@ -273,7 +274,7 @@
 import { COLOR_PANEL, DEFAULT_COLOR_CASE } from '../../chart/chart'
 import { getColors } from '@/views/chart/chart/util'
 import { mapState } from 'vuex'
-import GradientColorSelector from '@/components/GradientColorSelector'
+import GradientColorSelector from '@/components/gradientColorSelector'
 import bus from '@/utils/bus'
 
 export default {
@@ -515,7 +516,7 @@ export default {
 </script>
 
 <style scoped>
-.shape-item{
+.shape-item {
   padding: 6px;
   border: none;
   width: 100%;
@@ -523,45 +524,54 @@ export default {
   justify-content: space-between;
   align-items: center
 }
-.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;
 }
-.el-select-dropdown__item{
+
+.el-select-dropdown__item {
   padding: 0 20px;
 }
-  span{
-    font-size: 12px
-  }
-  .el-form-item{
-    margin-bottom: 6px;
-  }
-  .color-picker-style{
-    cursor: pointer;
-    z-index: 1003;
-  }
-  .color-label{
-    display: inline-block;
-    width: 60px;
-  }
 
-  .color-type ::v-deep .el-radio__input{
-    display: none;
-  }
-  .el-radio{
-    margin:0 2px 0 0!important;
-    border: 1px solid transparent;
-  }
-  .el-radio ::v-deep .el-radio__label{
-    padding-left: 0;
-  }
+span {
+  font-size: 12px
+}
 
-  .el-radio.is-checked{
-    border: 1px solid #0a7be0;
-  }
+.el-form-item {
+  margin-bottom: 6px;
+}
+
+.color-picker-style {
+  cursor: pointer;
+  z-index: 1003;
+}
+
+.color-label {
+  display: inline-block;
+  width: 60px;
+}
+
+.color-type ::v-deep .el-radio__input {
+  display: none;
+}
+
+.el-radio {
+  margin: 0 2px 0 0 !important;
+  border: 1px solid transparent;
+}
+
+.el-radio ::v-deep .el-radio__label {
+  padding-left: 0;
+}
+
+.el-radio.is-checked {
+  border: 1px solid #0a7be0;
+}
 
 .span-label {
   width: 300px;
diff --git a/frontend/src/views/link/view/index.vue b/frontend/src/views/link/view/index.vue
index ad862d15fb..2dbbc1cafb 100644
--- a/frontend/src/views/link/view/index.vue
+++ b/frontend/src/views/link/view/index.vue
@@ -12,7 +12,7 @@
 <script>
 import { loadResource } from '@/api/link'
 import { uuid } from 'vue-uuid'
-import Preview from '@/components/canvas/components/Editor/Preview'
+import Preview from '@/components/canvas/components/editor/Preview'
 import { getPanelAllLinkageInfo } from '@/api/panel/linkage'
 import { queryPanelJumpInfo, queryTargetPanelJumpInfo } from '@/api/panel/linkJump'
 import { getNowCanvasComponentData, panelInit } from '@/components/canvas/utils/utils'
@@ -157,8 +157,8 @@ export default {
 </script>
 
 <style scoped>
- *{
-     margin: 0;
-     padding: 0;
- }
+* {
+  margin: 0;
+  padding: 0;
+}
 </style>
diff --git a/frontend/src/views/panel/AssistComponent/index.vue b/frontend/src/views/panel/AssistComponent/index.vue
index 7f08ce4c50..6274cf901a 100644
--- a/frontend/src/views/panel/AssistComponent/index.vue
+++ b/frontend/src/views/panel/AssistComponent/index.vue
@@ -8,7 +8,7 @@
 
     <div class="widget-subject">
       <div class="filter-header">
-        <div class="filter-header-text"> 样式 </div>
+        <div class="filter-header-text"> 样式</div>
       </div>
 
       <div class="filter-widget-content">
@@ -89,9 +89,14 @@
 </template>
 
 <script>
-import componentList, { assistList, pictureList, otherList } from '@/components/canvas/custom-component/component-list'
+import componentList, {
+  assistList,
+  commonAttr,
+  commonStyle,
+  otherList,
+  pictureList
+} from '@/components/canvas/customComponent/component-list'
 import toast from '@/components/canvas/utils/toast'
-import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
 import generateID from '@/components/canvas/utils/generateID'
 import { deepCopy, matrixBaseChange } from '@/components/canvas/utils/utils'
 import eventBus from '@/components/canvas/utils/eventBus'
@@ -170,7 +175,7 @@ export default {
       reader.readAsDataURL(file)
     },
     componentInfo(id) {
-    // 辅助设计组件
+      // 辅助设计组件
       let component
       componentList.forEach(componentTemp => {
         if (id === componentTemp.id) {
@@ -197,174 +202,192 @@ export default {
 
 <style lang="scss" scoped>
 
-  .filter-container {
-    width: 240px;
-    overflow: hidden auto;
-    min-height: 24px;
-    padding-top: 0px;
-    padding-bottom: 0px;
-    position: relative;
-    height: 940px;
-    max-height: 976px;
-  }
-  .filter-header {
-    overflow: hidden;
-    position: relative;
-    margin-top: 24px;
-    margin-left: 15px;
-    align-items: center;
-    word-break: break-all;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    flex-wrap: nowrap;
-  }
+.filter-container {
+  width: 240px;
+  overflow: hidden auto;
+  min-height: 24px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  position: relative;
+  height: 940px;
+  max-height: 976px;
+}
 
-  .filter-header-text {
-    font-size: 14px;
-    max-width: 100%;
-    color: var(--TextPrimary, gray);
-    text-align: left;
-    white-space: pre;
-    text-overflow: ellipsis;
-    position: relative;
-    flex-shrink: 0;
-    box-sizing: border-box;
-    overflow: hidden;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    word-break: break-all;
-  }
+.filter-header {
+  overflow: hidden;
+  position: relative;
+  margin-top: 24px;
+  margin-left: 15px;
+  align-items: center;
+  word-break: break-all;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+}
 
-  .filter-widget-content {
-    position: relative;
-    margin-left: 5px;
-  }
+.filter-header-text {
+  font-size: 14px;
+  max-width: 100%;
+  color: var(--TextPrimary, gray);
+  text-align: left;
+  white-space: pre;
+  text-overflow: ellipsis;
+  position: relative;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  word-break: break-all;
+}
 
-  .filter-widget {
-    width: 107px;
-    height: 36px;
-    position: relative;
-    float: left;
-    margin-top: 10px;
-    margin-left: 10px;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a3685f2,endColorstr=#1a3685f2);
-    font-size: 12px;
-    border-radius: 10px;
-    cursor: pointer;
-    overflow: hidden;
-  }
+.filter-widget-content {
+  position: relative;
+  margin-left: 5px;
+}
 
-  .time-filter {
-    background-color: rgba(54,133,242,.1);
-    .filter-widget-icon {
-        color: #3685f2;
-    }
-    .filter-widget-text {
-         color: var(--TextActive, #3d4d66);
-    }
-  }
-  .time-filter:hover {
-    background-color: #3685f2;
-    color: #fff;
-    .filter-widget-icon {
-        background-color: #3685f2;
-        color: #fff;
-    }
-    .filter-widget-text {
-        color: #fff;
-    }
-  }
+.filter-widget {
+  width: 107px;
+  height: 36px;
+  position: relative;
+  float: left;
+  margin-top: 10px;
+  margin-left: 10px;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a3685f2, endColorstr=#1a3685f2);
+  font-size: 12px;
+  border-radius: 10px;
+  cursor: pointer;
+  overflow: hidden;
+}
 
-  .text-filter {
-    background-color: rgba(35,190,239,.1);
-    .filter-widget-icon {
-        color: #23beef;
-    }
-    .filter-widget-text {
-        color: var(--TextActive, #3d4d66);
-    }
-  }
-  .text-filter:hover {
-    background-color: #23beef;
-    color: #fff;
-    .filter-widget-icon {
-        background-color: #23beef;
-        color: #fff;
-    }
-    .filter-widget-text {
-        color: #fff;
-    }
-  }
-  .tree-filter {
-    background-color: rgba(22,160,132,.1);
-    .filter-widget-icon {
-        color: #37b4aa;
-    }
-    .filter-widget-text {
-         color: var(--TextActive, #3d4d66);
-    }
-  }
-  .tree-filter:hover {
-    background-color: #37b4aa;
-    .filter-widget-icon {
-        color: #37b4aa;
-    }
-    .filter-widget-text {
-        color: #fff;
-    }
-  }
+.time-filter {
+  background-color: rgba(54, 133, 242, .1);
 
   .filter-widget-icon {
-    width: 40px;
-    height: 36px;
-    text-align: center;
-    line-height: 1;
-    position: absolute;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    justify-content: center;
-    align-items: center;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    display: flex;
-
-    .widget-icon-i {
-      width: 24px;
-      height: 24px;
-      position: relative;
-      flex-shrink: 0;
-      font-size: 24px!important;
-      margin: auto;
-      font-family: fineui;
-      font-style: normal;
-      -webkit-font-smoothing: antialiased;
-      text-align: center;
-
-    }
+    color: #3685f2;
   }
+
   .filter-widget-text {
-    font-size: 14px;
-    height: 36px;
-    line-height: 36px;
-    text-align: left;
-    white-space: pre;
-    text-overflow: ellipsis;
-    position: absolute;
-    /* inset: 0px 0px 0px 40px; */
-    margin-left: 40px;
-    box-sizing: border-box;
-    overflow: hidden;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    word-break: break-all;
-    cursor: pointer;
+    color: var(--TextActive, #3d4d66);
+  }
+}
 
+.time-filter:hover {
+  background-color: #3685f2;
+  color: #fff;
+
+  .filter-widget-icon {
+    background-color: #3685f2;
+    color: #fff;
   }
 
-  .widget-subject {
-    display: flow-root;
+  .filter-widget-text {
+    color: #fff;
   }
+}
+
+.text-filter {
+  background-color: rgba(35, 190, 239, .1);
+
+  .filter-widget-icon {
+    color: #23beef;
+  }
+
+  .filter-widget-text {
+    color: var(--TextActive, #3d4d66);
+  }
+}
+
+.text-filter:hover {
+  background-color: #23beef;
+  color: #fff;
+
+  .filter-widget-icon {
+    background-color: #23beef;
+    color: #fff;
+  }
+
+  .filter-widget-text {
+    color: #fff;
+  }
+}
+
+.tree-filter {
+  background-color: rgba(22, 160, 132, .1);
+
+  .filter-widget-icon {
+    color: #37b4aa;
+  }
+
+  .filter-widget-text {
+    color: var(--TextActive, #3d4d66);
+  }
+}
+
+.tree-filter:hover {
+  background-color: #37b4aa;
+
+  .filter-widget-icon {
+    color: #37b4aa;
+  }
+
+  .filter-widget-text {
+    color: #fff;
+  }
+}
+
+.filter-widget-icon {
+  width: 40px;
+  height: 36px;
+  text-align: center;
+  line-height: 1;
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  display: flex;
+
+  .widget-icon-i {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    flex-shrink: 0;
+    font-size: 24px !important;
+    margin: auto;
+    font-family: fineui;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    text-align: center;
+
+  }
+}
+
+.filter-widget-text {
+  font-size: 14px;
+  height: 36px;
+  line-height: 36px;
+  text-align: left;
+  white-space: pre;
+  text-overflow: ellipsis;
+  position: absolute;
+  /* inset: 0px 0px 0px 40px; */
+  margin-left: 40px;
+  box-sizing: border-box;
+  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  word-break: break-all;
+  cursor: pointer;
+
+}
+
+.widget-subject {
+  display: flow-root;
+}
 
 </style>
diff --git a/frontend/src/views/panel/AssistComponent/tabUseList.vue b/frontend/src/views/panel/AssistComponent/tabUseList.vue
index 5f4c74b110..9a0ce82137 100644
--- a/frontend/src/views/panel/AssistComponent/tabUseList.vue
+++ b/frontend/src/views/panel/AssistComponent/tabUseList.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import { tabUseList } from '@/components/canvas/custom-component/component-list'
+import { tabUseList } from '@/components/canvas/customComponent/component-list'
 import { mapState } from 'vuex'
 
 export default {
@@ -65,181 +65,201 @@ export default {
 
 <style lang="scss" scoped>
 
-  .filter-container {
-    overflow: hidden auto;
-    min-height: 24px;
-    padding-top: 0px;
-    padding-bottom: 0px;
-    position: relative;
-  }
-  .filter-header {
-    overflow: hidden;
-    position: relative;
-    margin-top: 24px;
-    margin-left: 15px;
-    align-items: center;
-    word-break: break-all;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    flex-wrap: nowrap;
-  }
+.filter-container {
+  overflow: hidden auto;
+  min-height: 24px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  position: relative;
+}
 
-  .filter-header-text {
-    font-size: 14px;
-    max-width: 100%;
-    color: var(--TextPrimary, gray);
-    text-align: left;
-    white-space: pre;
-    text-overflow: ellipsis;
-    position: relative;
-    flex-shrink: 0;
-    box-sizing: border-box;
-    overflow: hidden;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    word-break: break-all;
-  }
+.filter-header {
+  overflow: hidden;
+  position: relative;
+  margin-top: 24px;
+  margin-left: 15px;
+  align-items: center;
+  word-break: break-all;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+}
 
-  .filter-widget-content {
-    position: relative;
-    margin-left: 5px;
-  }
+.filter-header-text {
+  font-size: 14px;
+  max-width: 100%;
+  color: var(--TextPrimary, gray);
+  text-align: left;
+  white-space: pre;
+  text-overflow: ellipsis;
+  position: relative;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  word-break: break-all;
+}
 
-  .filter-widget {
-    width: 107px;
-    height: 36px;
-    position: relative;
-    float: left;
-    margin-top: 10px;
-    margin-left: 10px;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a3685f2,endColorstr=#1a3685f2);
-    font-size: 12px;
-    border-radius: 10px;
-    cursor: pointer;
-    overflow: hidden;
-  }
+.filter-widget-content {
+  position: relative;
+  margin-left: 5px;
+}
 
-  .time-filter {
-    background-color: rgba(54,133,242,.1);
-    .filter-widget-icon {
-        color: #3685f2;
-    }
-    .filter-widget-text {
-         color: var(--TextActive, #3d4d66);
-    }
-  }
-  .time-filter:hover {
-    background-color: #3685f2;
-    color: #fff;
-    .filter-widget-icon {
-        background-color: #3685f2;
-        color: #fff;
-    }
-    .filter-widget-text {
-        color: #fff;
-    }
-  }
+.filter-widget {
+  width: 107px;
+  height: 36px;
+  position: relative;
+  float: left;
+  margin-top: 10px;
+  margin-left: 10px;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a3685f2, endColorstr=#1a3685f2);
+  font-size: 12px;
+  border-radius: 10px;
+  cursor: pointer;
+  overflow: hidden;
+}
 
-  .text-filter {
-    background-color: rgba(35,190,239,.1);
-    .filter-widget-icon {
-        color: #23beef;
-    }
-    .filter-widget-text {
-        color: var(--TextActive, #3d4d66);
-    }
-  }
-  .text-filter:hover {
-    background-color: #23beef;
-    color: #fff;
-    .filter-widget-icon {
-        background-color: #23beef;
-        color: #fff;
-    }
-    .filter-widget-text {
-        color: #fff;
-    }
-  }
-  .tree-filter {
-    background-color: rgba(22,160,132,.1);
-    .filter-widget-icon {
-        color: #37b4aa;
-    }
-    .filter-widget-text {
-         color: var(--TextActive, #3d4d66);
-    }
-  }
-  .tree-filter:hover {
-    background-color: #37b4aa;
-    .filter-widget-icon {
-        color: #37b4aa;
-    }
-    .filter-widget-text {
-        color: #fff;
-    }
-  }
+.time-filter {
+  background-color: rgba(54, 133, 242, .1);
 
   .filter-widget-icon {
-    width: 40px;
-    height: 36px;
-    text-align: center;
-    line-height: 1;
-    position: absolute;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    justify-content: center;
-    align-items: center;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    display: flex;
-
-    .widget-icon-i {
-      width: 24px;
-      height: 24px;
-      position: relative;
-      flex-shrink: 0;
-      font-size: 24px!important;
-      margin: auto;
-      font-family: fineui;
-      font-style: normal;
-      -webkit-font-smoothing: antialiased;
-      text-align: center;
-
-    }
+    color: #3685f2;
   }
+
   .filter-widget-text {
-    font-size: 14px;
-    height: 36px;
-    line-height: 36px;
-    text-align: left;
-    white-space: pre;
-    text-overflow: ellipsis;
-    position: absolute;
-    /* inset: 0px 0px 0px 40px; */
-    margin-left: 40px;
-    box-sizing: border-box;
-    overflow: hidden;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    word-break: break-all;
-    cursor: pointer;
+    color: var(--TextActive, #3d4d66);
+  }
+}
 
+.time-filter:hover {
+  background-color: #3685f2;
+  color: #fff;
+
+  .filter-widget-icon {
+    background-color: #3685f2;
+    color: #fff;
   }
 
-  .widget-subject {
-    display: flow-root;
+  .filter-widget-text {
+    color: #fff;
+  }
+}
+
+.text-filter {
+  background-color: rgba(35, 190, 239, .1);
+
+  .filter-widget-icon {
+    color: #23beef;
   }
 
-  .selected-class {
+  .filter-widget-text {
+    color: var(--TextActive, #3d4d66);
+  }
+}
+
+.text-filter:hover {
+  background-color: #23beef;
+  color: #fff;
+
+  .filter-widget-icon {
     background-color: #23beef;
-    .filter-widget-icon  {
-      color: #fff;
-    }
-    .filter-widget-text  {
-      color: #fff;
-    }
+    color: #fff;
   }
 
+  .filter-widget-text {
+    color: #fff;
+  }
+}
+
+.tree-filter {
+  background-color: rgba(22, 160, 132, .1);
+
+  .filter-widget-icon {
+    color: #37b4aa;
+  }
+
+  .filter-widget-text {
+    color: var(--TextActive, #3d4d66);
+  }
+}
+
+.tree-filter:hover {
+  background-color: #37b4aa;
+
+  .filter-widget-icon {
+    color: #37b4aa;
+  }
+
+  .filter-widget-text {
+    color: #fff;
+  }
+}
+
+.filter-widget-icon {
+  width: 40px;
+  height: 36px;
+  text-align: center;
+  line-height: 1;
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  display: flex;
+
+  .widget-icon-i {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    flex-shrink: 0;
+    font-size: 24px !important;
+    margin: auto;
+    font-family: fineui;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    text-align: center;
+
+  }
+}
+
+.filter-widget-text {
+  font-size: 14px;
+  height: 36px;
+  line-height: 36px;
+  text-align: left;
+  white-space: pre;
+  text-overflow: ellipsis;
+  position: absolute;
+  /* inset: 0px 0px 0px 40px; */
+  margin-left: 40px;
+  box-sizing: border-box;
+  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  word-break: break-all;
+  cursor: pointer;
+
+}
+
+.widget-subject {
+  display: flow-root;
+}
+
+.selected-class {
+  background-color: #23beef;
+
+  .filter-widget-icon {
+    color: #fff;
+  }
+
+  .filter-widget-text {
+    color: #fff;
+  }
+}
+
 </style>
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue
index 62c73cee22..a4c6f6c625 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue
@@ -145,14 +145,16 @@ import {
 } 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, DEFAULT_TAB_COLOR_CASE_LIGHT, DEFAULT_TAB_COLOR_CASE_DARK
+  DEFAULT_COLOR_CASE_DARK,
+  DEFAULT_TAB_COLOR_CASE_DARK,
+  DEFAULT_TAB_COLOR_CASE_LIGHT,
+  DEFAULT_TITLE_STYLE,
+  DEFAULT_TITLE_STYLE_DARK
 } 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'
+import ColorButton from '@/components/assistButton/ColorButton'
 
 export default {
   name: 'OverallSetting',
@@ -298,20 +300,21 @@ export default {
   justify-content: flex-end;
   display: flex;
 }
-.function-area{
+
+.function-area {
   margin-top: 8px;
 }
 
-.margin-top12{
-  margin-top: 12px!important;
+.margin-top12 {
+  margin-top: 12px !important;
 }
 
-.margin-top20{
-  margin-top: 20px!important;
+.margin-top20 {
+  margin-top: 20px !important;
 }
 
-.margin-bottom20{
-  margin-bottom: 20px!important;
+.margin-bottom20 {
+  margin-bottom: 20px !important;
 
 }
 </style>
diff --git a/frontend/src/views/panel/ViewSelect/index-with-drag.vue b/frontend/src/views/panel/ViewSelect/index-with-drag.vue
index 908df984a4..52a57c9e8a 100644
--- a/frontend/src/views/panel/ViewSelect/index-with-drag.vue
+++ b/frontend/src/views/panel/ViewSelect/index-with-drag.vue
@@ -79,7 +79,7 @@
 </template>
 
 <script>
-import componentList from '@/components/canvas/custom-component/component-list'
+import componentList from '@/components/canvas/customComponent/component-list'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import eventBus from '@/components/canvas/utils/eventBus'
 import { mapState } from 'vuex'
diff --git a/frontend/src/views/panel/ViewSelect/index.vue b/frontend/src/views/panel/ViewSelect/index.vue
index 3e9c826a2a..8d9aad2aff 100644
--- a/frontend/src/views/panel/ViewSelect/index.vue
+++ b/frontend/src/views/panel/ViewSelect/index.vue
@@ -20,7 +20,8 @@
             size="mini"
             style="float: right"
             @click="newChart"
-          >新建 </el-button>
+          >新建
+          </el-button>
         </el-col>
 
       </el-row>
@@ -91,14 +92,12 @@
 </template>
 
 <script>
-import componentList from '@/components/canvas/custom-component/component-list'
-import { deepCopy } from '@/components/canvas/utils/utils'
+import componentList from '@/components/canvas/customComponent/component-list'
+import { deepCopy, matrixBaseChange } from '@/components/canvas/utils/utils'
 import eventBus from '@/components/canvas/utils/eventBus'
 import { mapState } from 'vuex'
 import { queryPanelViewTree } from '@/api/panel/panel'
-import { deleteCircle } from '@/api/chart/chart'
-import { pluginTypes } from '@/api/chart/chart'
-import { matrixBaseChange } from '@/components/canvas/utils/utils'
+import { deleteCircle, pluginTypes } from '@/api/chart/chart'
 
 export default {
   name: 'ViewSelect',
@@ -249,37 +248,40 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .top-div-class {
-    max-height: calc(100vh - 335px);
-    width: 100%;
-    position: fixed;
-    overflow-y : auto
-  }
-  .detail-class {
-    width: 300px;
-    position: fixed;
-    bottom: 0px;
-  }
-  .view-list-thumbnails {
-    width: 100%;
-    height: 100%;
-  }
+.top-div-class {
+  max-height: calc(100vh - 335px);
+  width: 100%;
+  position: fixed;
+  overflow-y: auto
+}
 
-  .father .child {
-    /*display: none;*/
-    visibility: hidden;
-  }
-  .father:hover .child {
-    /*display: inline;*/
-    visibility: visible;
-  }
+.detail-class {
+  width: 300px;
+  position: fixed;
+  bottom: 0px;
+}
 
-  .custom-tree-node-list {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    padding:0 8px;
-  }
+.view-list-thumbnails {
+  width: 100%;
+  height: 100%;
+}
+
+.father .child {
+  /*display: none;*/
+  visibility: hidden;
+}
+
+.father:hover .child {
+  /*display: inline;*/
+  visibility: visible;
+}
+
+.custom-tree-node-list {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding: 0 8px;
+}
 </style>
diff --git a/frontend/src/views/panel/ViewSelect/multiplexing.vue b/frontend/src/views/panel/ViewSelect/multiplexing.vue
index ff8494595a..fa49a7fcb5 100644
--- a/frontend/src/views/panel/ViewSelect/multiplexing.vue
+++ b/frontend/src/views/panel/ViewSelect/multiplexing.vue
@@ -42,10 +42,10 @@ import DeContainer from '@/components/dataease/DeContainer'
 import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 import { findOne } from '@/api/panel/panel'
 import { deepCopy, panelDataPrepare } from '@/components/canvas/utils/utils'
-import Preview from '@/components/canvas/components/Editor/Preview'
+import Preview from '@/components/canvas/components/editor/Preview'
 import MultiplexingView from '@/views/panel/ViewSelect/multiplexingView'
 import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
-import { USER_VIEW } from '@/components/canvas/custom-component/component-list'
+import { USER_VIEW } from '@/components/canvas/customComponent/component-list'
 import { uuid } from 'vue-uuid'
 
 export default {
@@ -78,9 +78,7 @@ export default {
       return this.componentData.filter(item => item.canvasId === this.canvasId)
     }
   },
-  watch: {
-
-  },
+  watch: {},
   mounted() {
     this.$store.commit('initCurMultiplexingComponents')
   },
@@ -114,9 +112,10 @@ export default {
         const componentId = uuid.v1()
         _this.canvasStyleData = deepCopy(DEFAULT_COMMON_CANVAS_STYLE_STRING)
         const userView = {
-          ... deepCopy(USER_VIEW),
+          ...deepCopy(USER_VIEW),
           'id': componentId,
-          'auxiliaryMatrix': false }
+          'auxiliaryMatrix': false
+        }
         userView.style.width = _this.canvasStyleData.width
         userView.style.height = _this.canvasStyleData.height
         userView['propValue'] = {
@@ -137,45 +136,51 @@ export default {
 </script>
 
 <style scoped>
-  .ms-aside-container {
-    height: calc(100vh - 120px);
-    padding: 0px;
-    min-width: 260px;
-    max-width: 460px;
-  }
-  .ms-main-container {
-    height: calc(100vh - 120px);
-    padding: 0px;
-  }
-  .tab-panel{
-    height: 100%;
-    overflow-y: auto;
-  }
-  .tab-panel ::v-deep .el-tabs__nav-wrap{
-    padding: 0 10px;
-  }
-  .tab-panel ::v-deep .el-tabs__nav-wrap::after {
-    height: 1px;
-  }
-  .tab-panel ::v-deep .el-tabs__item{
-    /* width: 10px; */
-    padding: 0 10px;
-  }
-  .main-class {
-    border: 1px gainsboro solid;
-  }
+.ms-aside-container {
+  height: calc(100vh - 120px);
+  padding: 0px;
+  min-width: 260px;
+  max-width: 460px;
+}
 
-  ::v-deep .drag-bar{
-    height: calc(100vh - 120px)!important;
-  }
+.ms-main-container {
+  height: calc(100vh - 120px);
+  padding: 0px;
+}
 
-  .custom-position {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    flex-flow: row nowrap;
-    color: #9ea6b2;
-  }
+.tab-panel {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.tab-panel ::v-deep .el-tabs__nav-wrap {
+  padding: 0 10px;
+}
+
+.tab-panel ::v-deep .el-tabs__nav-wrap::after {
+  height: 1px;
+}
+
+.tab-panel ::v-deep .el-tabs__item {
+  /* width: 10px; */
+  padding: 0 10px;
+}
+
+.main-class {
+  border: 1px gainsboro solid;
+}
+
+::v-deep .drag-bar {
+  height: calc(100vh - 120px) !important;
+}
+
+.custom-position {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  flex-flow: row nowrap;
+  color: #9ea6b2;
+}
 </style>
diff --git a/frontend/src/views/panel/edit/ComponentWaitItem.vue b/frontend/src/views/panel/edit/ComponentWaitItem.vue
index fad8a6f0ac..80dda2ac9e 100644
--- a/frontend/src/views/panel/edit/ComponentWaitItem.vue
+++ b/frontend/src/views/panel/edit/ComponentWaitItem.vue
@@ -43,7 +43,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
+import MobileCheckBar from '@/components/canvas/components/editor/MobileCheckBar'
 import { getStyle } from '@/components/canvas/utils/style'
 import DeOutWidget from '@/components/dataease/DeOutWidget'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
@@ -142,26 +142,28 @@ export default {
 </script>
 
 <style scoped>
-  .component-custom {
-    position: relative!important;
-    outline: none;
-    width: 100% !important;
-    height: 100%;
-  }
-  .component-item {
-    padding: 5px;
-    height: 200px!important;
-    position: relative;
-  }
+.component-custom {
+  position: relative !important;
+  outline: none;
+  width: 100% !important;
+  height: 100%;
+}
 
-  .inner-item {
-    position: relative;
-  }
-  .svg-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
+.component-item {
+  padding: 5px;
+  height: 200px !important;
+  position: relative;
+}
+
+.inner-item {
+  position: relative;
+}
+
+.svg-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 </style>
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 9edc605344..d7334c8c0d 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -490,23 +490,20 @@ import { deepCopy, getNowCanvasComponentData, imgUrlTrans, matrixBaseChange } fr
 import componentList, {
   BASE_MOBILE_STYLE,
   COMMON_BACKGROUND,
-  HYPERLINKS, PIC_STYLE
-} from '@/components/canvas/custom-component/component-list' // 左侧列表数据
+  commonAttr,
+  HYPERLINKS,
+  PIC_STYLE
+} from '@/components/canvas/customComponent/component-list' // 左侧列表数据
 import { mapState } from 'vuex'
 import { uuid } from 'vue-uuid'
 import Toolbar from '@/components/canvas/components/Toolbar'
-import {
-  checkUserCache,
-  initPanelData,
-  initViewCache,
-  queryPanelMultiplexingViewTree
-} from '@/api/panel/panel'
-import Preview from '@/components/canvas/components/Editor/Preview'
+import { checkUserCache, initPanelData, initViewCache, queryPanelMultiplexingViewTree } from '@/api/panel/panel'
+import Preview from '@/components/canvas/components/editor/Preview'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import AssistComponent from '@/views/panel/AssistComponent'
 import ChartGroup from '@/views/chart/group/Group'
 import { chartCopy } from '@/api/chart/chart'
-import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
+import CanvasOptBar from '@/components/canvas/components/editor/CanvasOptBar'
 
 // 引入样式
 import '@/components/canvas/assets/iconfont/iconfont.css'
@@ -516,7 +513,6 @@ import FilterDialog from '../filter/filterDialog'
 import ButtonDialog from '../filter/ButtonDialog'
 import ButtonResetDialog from '../filter/ButtonResetDialog'
 import toast from '@/components/canvas/utils/toast'
-import { commonAttr } from '@/components/canvas/custom-component/component-list'
 import generateID from '@/components/canvas/utils/generateID'
 import ComponentWait from '@/views/panel/edit/ComponentWait'
 import { deleteEnshrine, saveEnshrine, starStatus } from '@/api/panel/enshrine'
diff --git a/frontend/src/views/panel/filter/filterMain/FilterHead.vue b/frontend/src/views/panel/filter/filterMain/FilterHead.vue
index fe65265515..1f9367ab76 100644
--- a/frontend/src/views/panel/filter/filterMain/FilterHead.vue
+++ b/frontend/src/views/panel/filter/filterMain/FilterHead.vue
@@ -45,7 +45,7 @@
 
 <script>
 import draggable from 'vuedraggable'
-import DragItem from '@/components/DragItem'
+import DragItem from '@/components/dragItem'
 import { fieldListWithPermission } from '@/api/dataset/dataset'
 
 export default {
@@ -57,7 +57,8 @@ export default {
   props: {
     element: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     },
 
     widget: {
@@ -110,7 +111,8 @@ export default {
     onMove(e, originalEvent) {
       return true
     },
-    end2(e) {},
+    end2(e) {
+    },
 
     closeItem(tag) {
       const index = tag.index
@@ -127,73 +129,74 @@ export default {
 
 </script>
 <style lang="scss" scoped>
-  .filter-field {
-    border-radius: 4px;
-    height: 40px;
+.filter-field {
+  border-radius: 4px;
+  height: 40px;
 
-    .field-content {
+  .field-content {
+    position: relative;
+    display: table;
+    width: 100%;
+    height: 100%;
+    white-space: nowrap;
+
+    .field-content-left {
+      width: 50px;
+      max-width: 50px;
       position: relative;
-      display: table;
-      width: 100%;
+      display: table-cell;
+      vertical-align: middle;
+      margin: 0px;
+      padding: 8px;
       height: 100%;
-      white-space: nowrap;
+      border-right: none;
+      border: 1px solid var(--TableBorderColor, #E6E6E6);;
 
-      .field-content-left {
-        width: 50px;
-        max-width: 50px;
-        position: relative;
-        display: table-cell;
-        vertical-align: middle;
-        margin: 0px;
-        padding: 8px;
-        height: 100%;
-        border-right: none;
-        border: 1px solid var(--TableBorderColor, #E6E6E6);
-        ;
-
-        .field-content-text {
-          box-sizing: border-box;
-          overflow: hidden;
-          overflow-x: hidden;
-          overflow-y: hidden;
-          word-break: break-all;
-        }
-      }
-
-      .field-content-right {
-        border-left: none;
-        color: #9ea6b2;
-        border: 1px solid var(--TableBorderColor, #E6E6E6);
-        width: 100%;
-        // max-width: 0%;
-        position: relative;
-        display: inherit;
-        vertical-align: middle;
-        margin: 0px;
-        padding: 4px 0 0 0;
-        height: 100%;
-        line-height: 100%;
+      .field-content-text {
+        box-sizing: border-box;
+        overflow: hidden;
+        overflow-x: hidden;
+        overflow-y: hidden;
+        word-break: break-all;
       }
     }
 
-  }
-  .list-group-container:empty,.list-group-container>div:empty {
-      display: none;
-  }
-  .list-group:empty,
-  .list-group>div:empty {
-    display: inline-block;
-    width: 100%;
-    height: calc(100% - 13px);
+    .field-content-right {
+      border-left: none;
+      color: #9ea6b2;
+      border: 1px solid var(--TableBorderColor, #E6E6E6);
+      width: 100%;
+      // max-width: 0%;
+      position: relative;
+      display: inherit;
+      vertical-align: middle;
+      margin: 0px;
+      padding: 4px 0 0 0;
+      height: 100%;
+      line-height: 100%;
+    }
   }
 
-  .list-group:empty:before,
-  .list-group>div:empty:before {
-    content: attr(data-value);
-  }
+}
 
-    .blackTheme .theme-drag {
-    background-color: var(--MainBG, #fff);
-  }
+.list-group-container:empty, .list-group-container > div:empty {
+  display: none;
+}
+
+.list-group:empty,
+.list-group > div:empty {
+  display: inline-block;
+  width: 100%;
+  height: calc(100% - 13px);
+}
+
+.list-group:empty:before,
+.list-group > div:empty:before {
+  content: attr(data-value);
+}
+
+.blackTheme .theme-drag {
+  background-color: var(--MainBG, #fff);
+}
 
 </style>
diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue
index db3759ea47..7779e9ff51 100644
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -431,18 +431,10 @@ import LinkGenerate from '@/views/link/generate'
 import { uuid } from 'vue-uuid'
 import bus from '@/utils/bus'
 import EditPanel from './EditPanel'
-import {
-  addGroup,
-  delGroup,
-  groupTree,
-  defaultTree,
-  initPanelData,
-  panelUpdate,
-  viewPanelLog
-} from '@/api/panel/panel'
+import { addGroup, defaultTree, delGroup, groupTree, initPanelData, panelUpdate, viewPanelLog } from '@/api/panel/panel'
 import { mapState } from 'vuex'
 import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
-import TreeSelector from '@/components/TreeSelector'
+import TreeSelector from '@/components/treeSelector'
 import { queryAuthModel } from '@/api/authModel/authModel'
 
 export default {
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index 93dc150180..4b497eca58 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -324,13 +324,13 @@
 </template>
 <script>
 import PDFPreExport from '@/views/panel/export/PDFPreExport'
-import Preview from '@/components/canvas/components/Editor/Preview'
+import Preview from '@/components/canvas/components/editor/Preview'
 import SaveToTemplate from '@/views/panel/list/SaveToTemplate'
 import { mapState } from 'vuex'
 import html2canvas from 'html2canvasde'
 import FileSaver from 'file-saver'
 import JSZip from 'jszip'
-import { starStatus, saveEnshrine, deleteEnshrine } from '@/api/panel/enshrine'
+import { deleteEnshrine, saveEnshrine, starStatus } from '@/api/panel/enshrine'
 import bus from '@/utils/bus'
 import { queryAll } from '@/api/panel/pdfTemplate'
 import ShareHead from '@/views/panel/GrantAuth/ShareHead'
diff --git a/frontend/src/views/panel/panel.js b/frontend/src/views/panel/panel.js
index 12d121c09e..d7a26c1731 100644
--- a/frontend/src/views/panel/panel.js
+++ b/frontend/src/views/panel/panel.js
@@ -1,7 +1,7 @@
 // eslint-disable-next-line no-unused-vars
 import { DEFAULT_COLOR_CASE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 import { deepCopy } from '@/components/canvas/utils/utils'
-import { COMMON_BACKGROUND_BASE } from '@/components/canvas/custom-component/component-list'
+import { COMMON_BACKGROUND_BASE } from '@/components/canvas/customComponent/component-list'
 export const TAB_COMMON_STYLE = {
   headFontColor: '#000000',
   headFontActiveColor: '#000000',
diff --git a/frontend/src/views/panel/video/index.vue b/frontend/src/views/panel/video/index.vue
index 3be6ca2e41..93a408a967 100644
--- a/frontend/src/views/panel/video/index.vue
+++ b/frontend/src/views/panel/video/index.vue
@@ -4,7 +4,8 @@
 
 <script>
 
-import DeVideo from '@/components/canvas/custom-component/DeVideo'
+import DeVideo from '@/components/canvas/customComponent/DeVideo'
+
 export default {
   name: 'VideoDe',
   components: { DeVideo }
diff --git a/frontend/src/views/system/plugin/PluginCom.vue b/frontend/src/views/system/plugin/PluginCom.vue
index 7d13d7a9cf..e749e9adfc 100644
--- a/frontend/src/views/system/plugin/PluginCom.vue
+++ b/frontend/src/views/system/plugin/PluginCom.vue
@@ -18,11 +18,12 @@
 </template>
 
 <script>
-import AsyncComponent from '@/components/AsyncComponent'
+import AsyncComponent from '@/components/asyncComponent'
 import i18n from '@/lang'
 import bus from '@/utils/bus'
 import { execute } from '@/api/system/dynamic'
 import { uuid } from 'vue-uuid'
+
 export default {
   name: 'PluginCom',
   components: {
@@ -36,7 +37,8 @@ export default {
     },
     obj: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
diff --git a/frontend/src/views/system/plugin/dynamic.vue b/frontend/src/views/system/plugin/dynamic.vue
index 74ae83276a..bad47a5cb4 100644
--- a/frontend/src/views/system/plugin/dynamic.vue
+++ b/frontend/src/views/system/plugin/dynamic.vue
@@ -48,10 +48,11 @@
 
 <script>
 import DeLayoutContent from '@/components/business/DeLayoutContent'
-import AsyncComponent from '@/components/AsyncComponent'
+import AsyncComponent from '@/components/asyncComponent'
 import i18n from '@/lang'
 import bus from '@/utils/bus'
 import { execute } from '@/api/system/dynamic'
+
 export default {
   name: 'Dynamic',
   components: {
diff --git a/frontend/src/views/system/sysParam/MapSetting/MapSettingRight.vue b/frontend/src/views/system/sysParam/MapSetting/MapSettingRight.vue
index 01344606dd..7957adf60b 100644
--- a/frontend/src/views/system/sysParam/MapSetting/MapSettingRight.vue
+++ b/frontend/src/views/system/sysParam/MapSetting/MapSettingRight.vue
@@ -146,7 +146,7 @@
 <script>
 import jsonView from 'vue-json-views'
 import { geoJson, saveMap } from '@/api/map/map'
-import ElTreeSelect from '@/components/ElTreeSelect'
+import ElTreeSelect from '@/components/elTreeSelect'
 import msgCfm from '@/components/msgCfm'
 
 export default {
@@ -169,17 +169,33 @@ export default {
       loading: false,
       rules: {
         pCode: [
-          { required: true, message: this.$t('map_setting.parent_name') + this.$t('commons.cannot_be_null'), trigger: 'change' }
+          {
+            required: true,
+            message: this.$t('map_setting.parent_name') + this.$t('commons.cannot_be_null'),
+            trigger: 'change'
+          }
         ],
         code: [
-          { required: true, message: this.$t('map_setting.area_code') + this.$t('commons.cannot_be_null'), trigger: ['change', 'blur'] },
+          {
+            required: true,
+            message: this.$t('map_setting.area_code') + this.$t('commons.cannot_be_null'),
+            trigger: ['change', 'blur']
+          },
           { pattern: /^\d{9}$/, message: this.$t('map_setting.area_code_tip'), trigger: ['change', 'blur'] }
         ],
         name: [
-          { required: true, message: this.$t('map_setting.area_name') + this.$t('commons.cannot_be_null'), trigger: ['change', 'blur'] }
+          {
+            required: true,
+            message: this.$t('map_setting.area_name') + this.$t('commons.cannot_be_null'),
+            trigger: ['change', 'blur']
+          }
         ],
         fileName: [
-          { required: true, message: this.$t('map_setting.geo_json') + this.$t('commons.cannot_be_null'), trigger: 'change' }
+          {
+            required: true,
+            message: this.$t('map_setting.geo_json') + this.$t('commons.cannot_be_null'),
+            trigger: 'change'
+          }
         ]
       },
       levelOptions: [
@@ -351,7 +367,9 @@ export default {
     _renderFun(h, { node, data, store }) {
       const { props, clickParent } = this.treeParams
       return (
-        <span class={['custom-tree-node', !clickParent && data[props.children] && data[props.children].length ? 'disabled' : null]}>
+        <span
+          class={['custom-tree-node', !clickParent && data[props.children] && data[props.children].length ? 'disabled' : null]}
+        >
           <span>{node.label}</span>
         </span>
       )
@@ -370,7 +388,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.map-class-wrap{
+.map-class-wrap {
   top: 65px !important;
   left: 0px !important;
 }