refactor: 文件命名标准化

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;

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',

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

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>

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() {

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 {

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>

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>

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 = [] // 坐标点集合

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>

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>

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>

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 {

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>

frontend/src/components/canvas/custom-component/index.js

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

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>

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

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() {

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: {

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

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>

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

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

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

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

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)

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>

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

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
   }