diff --git a/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue b/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
index b80f4d2bb4..8d98c984d5 100644
--- a/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
+++ b/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
@@ -2,7 +2,7 @@
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { storeToRefs } from 'pinia'
-import { nextTick, onMounted, reactive, ref, defineAsyncComponent } from 'vue'
+import { nextTick, onMounted, reactive, ref } from 'vue'
 import { DEFAULT_COLOR_CASE } from '@/views/chart/components/editor/util/chart'
 import { useI18n } from '@/hooks/web/useI18n'
 import DeSlider from '@/components/dashboard/subject-setting/pre-subject/Slider.vue'
@@ -11,9 +11,11 @@ import ComponentColorSelector from '@/components/dashboard/subject-setting/dashb
 import { adaptCurThemeCommonStyleAll } from '@/utils/canvasStyle'
 import ViewSimpleTitle from '@/components/dashboard/subject-setting/dashboard-style/ViewSimpleTitle.vue'
 import FilterStyleSimpleSelector from '@/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue'
+import BackgroundOverallCommon from '@/components/visualization/component-background/BackgroundOverallCommon.vue'
 import { deepCopy } from '@/utils/utils'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { merge } from 'lodash-es'
+import CanvasBackground from '@/components/visualization/component-background/CanvasBackground.vue'
 import SeniorStyleSetting from '@/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue'
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
@@ -21,31 +23,15 @@ const { canvasStyleData, componentData, canvasViewInfo } = storeToRefs(dvMainSto
 const { t } = useI18n()
 let canvasAttrInit = false
 const canvasAttrActiveNames = ref(['style'])
-const BackgroundOverallCommon = defineAsyncComponent(
-  () => import('@/components/visualization/component-background/BackgroundOverallCommon.vue')
-)
 
-const CanvasBackground = defineAsyncComponent(
-  () => import('@/components/visualization/component-background/CanvasBackground.vue')
-)
 const state = reactive({
   colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE)),
   customColor: null,
   colorIndex: 0,
   sliderShow: true,
-  collapseShow: true,
-  dashboardShow: false,
-  backgroundShow: false
+  collapseShow: true
 })
-const handleChange = val => {
-  if (val.includes('componentStyle')) {
-    state.dashboardShow = true
-  }
 
-  if (val.includes('background')) {
-    state.backgroundShow = true
-  }
-}
 const onSubjectChange = () => {
   state.collapseShow = false
   nextTick(() => {
@@ -119,7 +105,7 @@ const saveSelfSubject = () => {
 <template>
   <div class="attr-container">
     <el-row>
-      <el-collapse @change="handleChange" v-model="canvasAttrActiveNames">
+      <el-collapse v-model="canvasAttrActiveNames">
         <el-collapse-item :title="t('components.dashboard_style')" name="style">
           <de-slider ref="slider" />
           <el-button class="button-panel__style" text size="small" @click="saveSelfSubject">
@@ -135,7 +121,7 @@ const saveSelfSubject = () => {
           name="background"
           class="content-no-padding-bottom"
         >
-          <canvas-background v-if="state.backgroundShow" themes="light"></canvas-background>
+          <canvas-background themes="light"></canvas-background>
         </el-collapse-item>
         <el-collapse-item
           :title="t('visualization.view_style')"
@@ -146,7 +132,6 @@ const saveSelfSubject = () => {
             :common-background-pop="canvasStyleData.component.chartCommonStyle"
             component-position="'dashboard'"
             themes="light"
-            v-if="state.dashboardShow"
             @onBackgroundChange="componentBackgroundChange"
             :background-color-picker-width="197"
             :background-border-select-width="197"
diff --git a/core/core-frontend/src/components/dashboard/DbToolbar.vue b/core/core-frontend/src/components/dashboard/DbToolbar.vue
index cf34afe60f..fd2c91277e 100644
--- a/core/core-frontend/src/components/dashboard/DbToolbar.vue
+++ b/core/core-frontend/src/components/dashboard/DbToolbar.vue
@@ -22,26 +22,20 @@ import { ElIcon, ElMessage, ElMessageBox } from 'element-plus-secondary'
 import eventBus from '@/utils/eventBus'
 import { useEmbedded } from '@/store/modules/embedded'
 import { deepCopy } from '@/utils/utils'
-import {
-  nextTick,
-  reactive,
-  ref,
-  computed,
-  onBeforeUnmount,
-  onMounted,
-  defineAsyncComponent
-} from 'vue'
+import { nextTick, reactive, ref, computed, toRefs, onBeforeUnmount, onMounted } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { useAppStoreWithOut } from '@/store/modules/app'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { storeToRefs } from 'pinia'
 import Icon from '../icon-custom/src/Icon.vue'
 import ComponentGroup from '@/components/visualization/ComponentGroup.vue'
+import UserViewGroup from '@/custom-component/component-group/UserViewGroup.vue'
 import QueryGroup from '@/custom-component/component-group/QueryGroup.vue'
 import MediaGroup from '@/custom-component/component-group/MediaGroup.vue'
 import TextGroup from '@/custom-component/component-group/TextGroup.vue'
 import ComponentButton from '@/components/visualization/ComponentButton.vue'
 import ComponentButtonLabel from '@/components/visualization/ComponentButtonLabel.vue'
+import MultiplexingCanvas from '@/views/common/MultiplexingCanvas.vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { getPanelAllLinkageInfo, saveLinkage } from '@/api/visualization/linkage'
 import { queryVisualizationJumpInfo } from '@/api/visualization/linkJump'
@@ -55,10 +49,13 @@ import {
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { copyStoreWithOut } from '@/store/modules/data-visualization/copy'
 import TabsGroup from '@/custom-component/component-group/TabsGroup.vue'
+import DeResourceGroupOpt from '@/views/common/DeResourceGroupOpt.vue'
+import OuterParamsSet from '@/components/visualization/OuterParamsSet.vue'
 import { XpackComponent } from '@/components/plugin'
 import DbMoreComGroup from '@/custom-component/component-group/DbMoreComGroup.vue'
 import { useCache } from '@/hooks/web/useCache'
 import DeFullscreen from '@/components/visualization/common/DeFullscreen.vue'
+import DeAppApply from '@/views/common/DeAppApply.vue'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import { updatePublishStatus } from '@/api/visualization/dataVisualization'
 const { t } = useI18n()
@@ -67,7 +64,6 @@ const snapshotStore = snapshotStoreWithOut()
 const copyStore = copyStoreWithOut()
 const { styleChangeTimes, snapshotIndex } = storeToRefs(snapshotStore)
 const resourceAppOpt = ref(null)
-const resourceAppOptShow = ref(false)
 const {
   linkageSettingStatus,
   curLinkageView,
@@ -78,28 +74,10 @@ const {
   batchOptStatus,
   targetLinkageInfo,
   curBatchOptComponents,
-  appData
+  appData,
+  hiddenListStatus
 } = storeToRefs(dvMainStore)
 const dvModel = 'dashboard'
-const MultiplexingCanvasShow = ref(false)
-const MultiplexingCanvas = defineAsyncComponent(
-  () => import('@/views/common/MultiplexingCanvas.vue')
-)
-
-const OuterParamsSet = defineAsyncComponent(
-  () => import('@/components/visualization/OuterParamsSet.vue')
-)
-
-const UserViewGroup = defineAsyncComponent(
-  () => import('@/custom-component/component-group/UserViewGroup.vue')
-)
-
-const DeResourceGroupOpt = defineAsyncComponent(
-  () => import('@/views/common/DeResourceGroupOpt.vue')
-)
-
-const DeAppApply = defineAsyncComponent(() => import('@/views/common/DeAppApply.vue'))
-
 const multiplexingRef = ref(null)
 const fullScreeRef = ref(null)
 let nameEdit = ref(false)
@@ -110,15 +88,22 @@ const state = reactive({
   preBatchCanvasViewInfo: {}
 })
 const resourceGroupOpt = ref(null)
-const resourceGroupOptShow = ref(false)
 const outerParamsSetRef = ref(null)
-const outerParamsSetShow = ref(false)
 const { wsCache } = useCache('localStorage')
 const userStore = useUserStoreWithOut()
 const isIframe = computed(() => appStore.getIsIframe)
 const desktop = wsCache.get('app.desktop')
 const emits = defineEmits(['recoverToPublished'])
 
+const props = defineProps({
+  createType: {
+    type: String,
+    default: 'create'
+  }
+})
+
+const { createType } = toRefs(props)
+
 const editCanvasName = () => {
   nameEdit.value = true
   inputName.value = dvInfo.value.name
@@ -253,16 +238,12 @@ const saveCanvasWithCheck = (withPublish = false, status?) => {
         },
         appData: appData.value
       }
-      resourceAppOptShow.value = true
       nextTick(() => {
         resourceAppOpt.value.init(params)
       })
     } else {
       const params = { name: dvInfo.value.name, leaf: true, id: dvInfo.value.pid || '0' }
-      resourceGroupOptShow.value = true
-      nextTick(() => {
-        resourceGroupOpt.value.optInit('leaf', params, 'newLeaf', true, { withPublish, status })
-      })
+      resourceGroupOpt.value.optInit('leaf', params, 'newLeaf', true, { withPublish, status })
       return
     }
   }
@@ -299,10 +280,7 @@ const saveResource = (checkParams?) => {
             () => {
               useEmitt().emitter.emit('refresh-dataset-selector')
               useEmitt().emitter.emit('calcData-all')
-              resourceAppOptShow.value = true
-              nextTick(() => {
-                resourceAppOpt.value.close()
-              })
+              resourceAppOpt.value.close()
               dvMainStore.setAppDataInfo(null)
               snapshotStore.resetSnapshot()
             }
@@ -373,10 +351,7 @@ const backHandler = (url: string) => {
 }
 
 const multiplexingCanvasOpen = () => {
-  MultiplexingCanvasShow.value = true
-  nextTick(() => {
-    multiplexingRef.value.dialogInit()
-  })
+  multiplexingRef.value.dialogInit()
 }
 onMounted(() => {
   eventBus.on('preview', previewInner)
@@ -476,10 +451,7 @@ const openOuterParamsSet = () => {
   }
   //设置需要先触发保存
   canvasSave(() => {
-    outerParamsSetShow.value = true
-    nextTick(() => {
-      outerParamsSetRef.value.optInit()
-    })
+    outerParamsSetRef.value.optInit()
   })
 }
 
@@ -551,7 +523,6 @@ const initOpenHandler = newWindow => {
     openHandler.value.invokeMethod(pm)
   }
 }
-const userGroupShow = ref(false)
 </script>
 
 <template>
@@ -613,13 +584,8 @@ const userGroupShow = ref(false)
             :icon-name="dvView"
             themes="light"
             :title="t('chart.datalist')"
-            @show="userGroupShow = true"
           >
-            <user-view-group
-              v-if="userGroupShow"
-              themes="light"
-              :dv-model="dvModel"
-            ></user-view-group>
+            <user-view-group themes="light" :dv-model="dvModel"></user-view-group>
           </component-group>
           <component-group
             :base-width="115"
@@ -868,14 +834,13 @@ const userGroupShow = ref(false)
       />
     </Teleport>
 
-    <multiplexing-canvas v-if="MultiplexingCanvasShow" ref="multiplexingRef"></multiplexing-canvas>
+    <multiplexing-canvas ref="multiplexingRef"></multiplexing-canvas>
     <de-resource-group-opt
       @finish="resourceOptFinish"
       cur-canvas-type="dashboard"
-      v-if="resourceGroupOptShow"
       ref="resourceGroupOpt"
     />
-    <outer-params-set v-if="outerParamsSetShow" ref="outerParamsSetRef"> </outer-params-set>
+    <outer-params-set ref="outerParamsSetRef"> </outer-params-set>
   </div>
   <de-fullscreen show-position="edit" ref="fullScreeRef"></de-fullscreen>
   <XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
@@ -885,7 +850,6 @@ const userGroupShow = ref(false)
     :dv-info="dvInfo"
     :canvas-view-info="canvasViewInfo"
     cur-canvas-type="dashboard"
-    v-if="resourceAppOptShow"
     @saveAppCanvas="saveCanvasWithCheck"
   ></de-app-apply>
 </template>
diff --git a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
index 50e54db11f..6730aabc06 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Shape from './Shape.vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import {
   getStyle,
@@ -9,25 +10,19 @@ import {
 } from '@/utils/style'
 import $ from 'jquery'
 import { _$, isPreventDrop } from '@/utils/utils'
+import ContextMenu from './ContextMenu.vue'
+import MarkLine from './MarkLine.vue'
 import Area from './Area.vue'
 import eventBus from '@/utils/eventBus'
 import { changeStyleWithScale } from '@/utils/translate'
-import {
-  ref,
-  onMounted,
-  computed,
-  toRefs,
-  nextTick,
-  onBeforeUnmount,
-  watch,
-  defineAsyncComponent
-} from 'vue'
+import { ref, onMounted, computed, toRefs, nextTick, onBeforeUnmount, watch } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
 import { contextmenuStoreWithOut } from '@/store/modules/data-visualization/contextmenu'
 import { storeToRefs } from 'pinia'
 import findComponent from '@/utils/components'
 import _ from 'lodash'
+import DragShadow from '@/components/data-visualization/canvas/DragShadow.vue'
 import {
   canvasSave,
   componentPreSort,
@@ -41,8 +36,19 @@ import {
 } from '@/utils/canvasUtils'
 import { guid } from '@/views/visualized/data/dataset/form/util'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import UserViewEnlarge from '@/components/visualization/UserViewEnlarge.vue'
+import CanvasOptBar from '@/components/visualization/CanvasOptBar.vue'
+import LinkJumpSet from '@/components/visualization/LinkJumpSet.vue'
 import { adaptCurThemeCommonStyle } from '@/utils/canvasStyle'
+import LinkageSet from '@/components/visualization/LinkageSet.vue'
+import PointShadow from '@/components/data-visualization/canvas/PointShadow.vue'
+import DragInfo from '@/components/visualization/common/DragInfo.vue'
 import { activeWatermarkCheckUser } from '@/components/watermark/watermark'
+import PopArea from '@/custom-component/pop-area/Component.vue'
+import DatasetParamsComponent from '@/components/visualization/DatasetParamsComponent.vue'
+import DeGrid from '@/components/data-visualization/DeGrid.vue'
+import DeGridScreen from '@/components/data-visualization/DeGridScreen.vue'
+import GroupAreaShadow from '@/custom-component/group-area/ComponentShadow.vue'
 
 const snapshotStore = snapshotStoreWithOut()
 const dvMainStore = dvMainStoreWithOut()
@@ -175,41 +181,6 @@ const props = defineProps({
     default: 'inherit'
   }
 })
-// const currentItem = ref()
-// const findComponent = () => {
-//   console.log(123);
-// }
-const Shape = defineAsyncComponent(() => import('./Shape.vue'))
-const DragInfo = defineAsyncComponent(
-  () => import('@/components/visualization/common/DragInfo.vue')
-)
-const CanvasOptBar = defineAsyncComponent(
-  () => import('@/components/visualization/CanvasOptBar.vue')
-)
-const PopArea = defineAsyncComponent(() => import('@/custom-component/pop-area/Component.vue'))
-const DeGrid = defineAsyncComponent(() => import('@/components/data-visualization/DeGrid.vue'))
-const DeGridScreen = defineAsyncComponent(
-  () => import('@/components/data-visualization/DeGridScreen.vue')
-)
-const DragShadow = defineAsyncComponent(
-  () => import('@/components/data-visualization/canvas/DragShadow.vue')
-)
-const GroupAreaShadow = defineAsyncComponent(
-  () => import('@/custom-component/group-area/ComponentShadow.vue')
-)
-const PointShadow = defineAsyncComponent(
-  () => import('@/components/data-visualization/canvas/PointShadow.vue')
-)
-const ContextMenu = defineAsyncComponent(() => import('./ContextMenu.vue'))
-const MarkLine = defineAsyncComponent(() => import('./MarkLine.vue'))
-const UserViewEnlarge = defineAsyncComponent(
-  () => import('@/components/visualization/UserViewEnlarge.vue')
-)
-const LinkJumpSet = defineAsyncComponent(() => import('@/components/visualization/LinkJumpSet.vue'))
-const LinkageSet = defineAsyncComponent(() => import('@/components/visualization/LinkageSet.vue'))
-const DatasetParamsComponent = defineAsyncComponent(
-  () => import('@/custom-component/group-area/ComponentShadow.vue')
-)
 
 const {
   baseWidth,
@@ -268,10 +239,6 @@ const commonFilterAttrsFilterBorder = [
   'borderColor'
 ]
 const userViewEnlargeRef = ref(null)
-const userViewEnlargeRefShow = ref(false)
-const linkJumpRefShow = ref(false)
-const linkageRefShow = ref(false)
-const customDatasetParamsRefShow = ref(false)
 const customDatasetParamsRef = ref(null)
 const linkJumpRef = ref(null)
 const linkageRef = ref(null)
@@ -1445,23 +1412,17 @@ const getMoveItem = () => {
 }
 
 const userViewEnlargeOpen = (opt, item) => {
-  userViewEnlargeRefShow.value = true
-  nextTick(() => {
-    userViewEnlargeRef.value.dialogInit(
-      canvasStyleData.value,
-      canvasViewInfo.value[item.id],
-      item,
-      opt,
-      { scale: curBaseScale.value }
-    )
-  })
+  userViewEnlargeRef.value.dialogInit(
+    canvasStyleData.value,
+    canvasViewInfo.value[item.id],
+    item,
+    opt,
+    { scale: curBaseScale.value }
+  )
 }
 
 const datasetParamsInit = item => {
-  customDatasetParamsRefShow.value = true
-  nextTick(() => {
-    customDatasetParamsRef.value?.optInit(item)
-  })
+  customDatasetParamsRef.value?.optInit(item)
 }
 
 const initSnapshotTimer = () => {
@@ -1473,19 +1434,13 @@ const initSnapshotTimer = () => {
 const linkJumpSetOpen = item => {
   //跳转设置需要先触发保存
   canvasSave(() => {
-    linkJumpRefShow.value = true
-    nextTick(() => {
-      linkJumpRef.value.dialogInit(item)
-    })
+    linkJumpRef.value.dialogInit(item)
   })
 }
 const linkageSetOpen = item => {
   //跳转设置需要先触发保存
   canvasSave(() => {
-    linkageRefShow.value = true
-    nextTick(() => {
-      linkageRef.value.dialogInit(item)
-    })
+    linkageRef.value.dialogInit(item)
   })
 }
 
@@ -1679,104 +1634,99 @@ defineExpose({
     ></GroupAreaShadow>
 
     <!--页面组件列表展示-->
-    <template v-if="componentData.length">
-      <Shape
-        v-for="(item, index) in componentData"
-        v-show="itemShow(item)"
-        :canvas-id="canvasId"
-        :scale="curScale"
-        :key="item.id"
-        :default-style="item.style"
-        :style="getShapeItemShowStyle(item)"
+    <Shape
+      v-for="(item, index) in componentData"
+      v-show="itemShow(item)"
+      :canvas-id="canvasId"
+      :scale="curScale"
+      :key="item.id"
+      :default-style="item.style"
+      :style="getShapeItemShowStyle(item)"
+      :element="item"
+      :index="index"
+      :class="{ lock: item.isLock && editMode === 'edit' }"
+      :base-cell-info="baseCellInfo"
+      :canvas-active="canvasActive"
+      :is-tab-move-check="mainCanvasFlag"
+      @onStartResize="onStartResize($event, item, index)"
+      @onStartMove="onStartMove($event, item, index)"
+      @onMouseUp="onMouseUp($event)"
+      @onDragging="onDragging($event, item)"
+      @onResizing="onResizing($event, item)"
+      @userViewEnlargeOpen="userViewEnlargeOpen($event, item)"
+      @datasetParamsInit="datasetParamsInit(item)"
+      @linkJumpSetOpen="linkJumpSetOpen(item)"
+      @linkageSetOpen="linkageSetOpen(item)"
+    >
+      <component
+        :is="findComponent(item.component)"
+        v-if="item.component === 'UserView' || item['isPlugin']"
+        class="component"
+        :id="'component' + item.id"
+        :active="item.id === curComponentId"
+        :dv-type="dvInfo.type"
+        :scale="curBaseScale"
+        :style="getComponentStyle(item.style)"
+        :prop-value="item.propValue"
+        :is-edit="true"
+        :view="canvasViewInfo[item.id]"
         :element="item"
-        :index="index"
-        :class="{ lock: item.isLock && editMode === 'edit' }"
-        :base-cell-info="baseCellInfo"
+        :request="item.request"
+        @input="handleInput"
+        :dv-info="dvInfo"
         :canvas-active="canvasActive"
-        :is-tab-move-check="mainCanvasFlag"
-        @onStartResize="onStartResize($event, item, index)"
-        @onStartMove="onStartMove($event, item, index)"
-        @onMouseUp="onMouseUp($event)"
-        @onDragging="onDragging($event, item)"
-        @onResizing="onResizing($event, item)"
-        @userViewEnlargeOpen="userViewEnlargeOpen($event, item)"
-        @datasetParamsInit="datasetParamsInit(item)"
-        @linkJumpSetOpen="linkJumpSetOpen(item)"
-        @linkageSetOpen="linkageSetOpen(item)"
-      >
-        <component
-          :is="findComponent(item.component)"
-          v-if="item.component === 'UserView' || item['isPlugin']"
-          class="component"
-          :id="'component' + item.id"
-          :active="item.id === curComponentId"
-          :dv-type="dvInfo.type"
-          :scale="curBaseScale"
-          :style="getComponentStyle(item.style)"
-          :prop-value="item.propValue"
-          :is-edit="true"
-          :view="canvasViewInfo[item.id]"
-          :element="item"
-          :request="item.request"
-          @input="handleInput"
-          :dv-info="dvInfo"
-          :canvas-active="canvasActive"
-          :show-position="'canvas'"
-          :font-family="fontFamily"
-        />
-        <component
-          v-else-if="item.component.includes('Svg')"
-          :is="findComponent(item.component)"
-          :id="'component' + item.id"
-          :scale="curBaseScale"
-          class="component"
-          :is-edit="true"
-          :style="getSvgComponentStyle(item.style)"
-          :prop-value="item.propValue"
-          :element="item"
-          :request="item.request"
-          :canvas-style-data="canvasStyleData"
-          :canvas-view-info="canvasViewInfo"
-          :dv-info="dvInfo"
-          :active="item.id === curComponentId"
-          :canvas-active="canvasActive"
-          :show-position="'edit'"
-          :font-family="fontFamily"
-        />
-        <component
-          v-else
-          :is="findComponent(item.component)"
-          :id="'component' + item.id"
-          :scale="curBaseScale"
-          class="component"
-          :is-edit="true"
-          :style="getComponentStyle(item.style)"
-          :prop-value="item.propValue"
-          :element="item"
-          :request="item.request"
-          :canvas-style-data="canvasStyleData"
-          :canvas-view-info="canvasViewInfo"
-          :dv-info="dvInfo"
-          :active="item.id === curComponentId"
-          :canvas-active="canvasActive"
-          :show-position="'edit'"
-          :font-family="fontFamily"
-        />
-      </Shape>
-    </template>
+        :show-position="'canvas'"
+        :font-family="fontFamily"
+      />
+      <component
+        v-else-if="item.component.includes('Svg')"
+        :is="findComponent(item.component)"
+        :id="'component' + item.id"
+        :scale="curBaseScale"
+        class="component"
+        :is-edit="true"
+        :style="getSvgComponentStyle(item.style)"
+        :prop-value="item.propValue"
+        :element="item"
+        :request="item.request"
+        :canvas-style-data="canvasStyleData"
+        :canvas-view-info="canvasViewInfo"
+        :dv-info="dvInfo"
+        :active="item.id === curComponentId"
+        :canvas-active="canvasActive"
+        :show-position="'edit'"
+        :font-family="fontFamily"
+      />
+      <component
+        v-else
+        :is="findComponent(item.component)"
+        :id="'component' + item.id"
+        :scale="curBaseScale"
+        class="component"
+        :is-edit="true"
+        :style="getComponentStyle(item.style)"
+        :prop-value="item.propValue"
+        :element="item"
+        :request="item.request"
+        :canvas-style-data="canvasStyleData"
+        :canvas-view-info="canvasViewInfo"
+        :dv-info="dvInfo"
+        :active="item.id === curComponentId"
+        :canvas-active="canvasActive"
+        :show-position="'edit'"
+        :font-family="fontFamily"
+      />
+    </Shape>
     <!-- 右击菜单 -->
     <ContextMenu v-if="contextMenuShow" show-position="canvasCore" />
     <!-- 标线 -->
     <MarkLine v-if="markLineShow" />
     <!-- 选中区域 -->
     <Area v-show="isShowArea" :start="start" :width="width" :height="height" />
-    <user-view-enlarge v-if="userViewEnlargeRefShow" ref="userViewEnlargeRef"></user-view-enlarge>
-    <link-jump-set v-if="linkJumpRefShow" ref="linkJumpRef"></link-jump-set>
-    <linkage-set v-if="linkageRefShow" ref="linkageRef"></linkage-set>
-    <dataset-params-component
-      v-if="customDatasetParamsRefShow"
-      ref="customDatasetParamsRef"
-    ></dataset-params-component>
+    <user-view-enlarge ref="userViewEnlargeRef"></user-view-enlarge>
+    <link-jump-set ref="linkJumpRef"></link-jump-set>
+    <linkage-set ref="linkageRef"></linkage-set>
+    <dataset-params-component ref="customDatasetParamsRef"></dataset-params-component>
   </div>
 </template>
 
diff --git a/core/core-frontend/src/components/visualization/ComponentGroup.vue b/core/core-frontend/src/components/visualization/ComponentGroup.vue
index 5711e436cf..757f8061ea 100644
--- a/core/core-frontend/src/components/visualization/ComponentGroup.vue
+++ b/core/core-frontend/src/components/visualization/ComponentGroup.vue
@@ -25,10 +25,6 @@ const props = defineProps({
 })
 
 const { title, iconName, baseWidth, themes } = toRefs(props)
-const emits = defineEmits(['show'])
-const handleVisibleChange = () => {
-  emits('show')
-}
 </script>
 
 <template>
@@ -37,7 +33,6 @@ const handleVisibleChange = () => {
     :width="baseWidth"
     trigger="click"
     :show-arrow="false"
-    @show="handleVisibleChange"
     :popper-class="'custom-popover-' + themes"
   >
     <template #reference>
diff --git a/core/core-frontend/src/custom-component/de-tabs/Component.vue b/core/core-frontend/src/custom-component/de-tabs/Component.vue
index 34af6f3347..8283c543d2 100644
--- a/core/core-frontend/src/custom-component/de-tabs/Component.vue
+++ b/core/core-frontend/src/custom-component/de-tabs/Component.vue
@@ -154,8 +154,7 @@ import {
   reactive,
   ref,
   toRefs,
-  watch,
-  defineAsyncComponent
+  watch
 } from 'vue'
 import DeCanvas from '@/views/canvas/DeCanvas.vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
@@ -169,6 +168,7 @@ import {
   isDashboard
 } from '@/utils/canvasUtils'
 import DeCustomTab from '@/custom-component/de-tabs/DeCustomTab.vue'
+import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import { getPanelAllLinkageInfo } from '@/api/visualization/linkage'
 import { dataVTabComponentAdd, groupSizeStyleAdaptor } from '@/utils/style'
 import { deepCopyTabItemHelper } from '@/store/modules/data-visualization/copy'
@@ -242,9 +242,6 @@ const {
   searchCount
 } = toRefs(props)
 
-const DePreview = defineAsyncComponent(
-  () => import('@/components/data-visualization/canvas/DePreview.vue')
-)
 const titleBackgroundActiveSvgInner = computed(() => {
   return element.value.titleBackground.active.innerImage.replace('board/', '').replace('.svg', '')
 })
diff --git a/core/core-frontend/src/custom-component/picture/Attr.vue b/core/core-frontend/src/custom-component/picture/Attr.vue
index b614791eeb..ae079793b9 100644
--- a/core/core-frontend/src/custom-component/picture/Attr.vue
+++ b/core/core-frontend/src/custom-component/picture/Attr.vue
@@ -83,6 +83,10 @@ const init = () => {
   }
 }
 
+const toolTip = computed(() => {
+  return props.themes === 'dark' ? 'ndark' : 'dark'
+})
+
 watch(
   () => curComponent.value.propValue.url,
   () => {
diff --git a/core/core-frontend/src/layout/index.vue b/core/core-frontend/src/layout/index.vue
index c24041f8a9..c522682a34 100644
--- a/core/core-frontend/src/layout/index.vue
+++ b/core/core-frontend/src/layout/index.vue
@@ -1,6 +1,9 @@
 <script lang="ts" setup>
-import { computed, ref, defineAsyncComponent } from 'vue'
+import { computed, ref } from 'vue'
+import Header from './components/Header.vue'
+import HeaderSystem from './components/HeaderSystem.vue'
 import Sidebar from './components/Sidebar.vue'
+import Menu from './components/Menu.vue'
 import Main from './components/Main.vue'
 import CollapseBar from './components/CollapseBar.vue'
 import { ElContainer } from 'element-plus-secondary'
@@ -18,9 +21,6 @@ const setCollapse = () => {
   isCollapse.value = !isCollapse.value
 }
 const { t } = useI18n()
-const Header = defineAsyncComponent(() => import('./components/Header.vue'))
-const HeaderSystem = defineAsyncComponent(() => import('./components/HeaderSystem.vue'))
-const Menu = defineAsyncComponent(() => import('./components/Menu.vue'))
 </script>
 
 <template>
diff --git a/core/core-frontend/src/pages/index/App.vue b/core/core-frontend/src/pages/index/App.vue
index 50de16e7d7..3cebd898d7 100644
--- a/core/core-frontend/src/pages/index/App.vue
+++ b/core/core-frontend/src/pages/index/App.vue
@@ -1,19 +1,13 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent, nextTick } from 'vue'
+import { ref } from 'vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import configGlobal from '@/components/config-global/src/ConfigGlobal.vue'
 import { useRoute } from 'vue-router'
+import ExportExcel from '@/views/visualized/data/dataset/ExportExcel.vue'
 const route = useRoute()
 const exportExcelRef = ref()
-const exportExcelRefShow = ref(false)
-const ExportExcel = defineAsyncComponent(
-  () => import('@/views/visualized/data/dataset/ExportExcel.vue')
-)
 const exportExcelCenter = params => {
-  exportExcelRefShow.value = true
-  nextTick(() => {
-    exportExcelRef.value.init(params)
-  })
+  exportExcelRef.value.init(params)
 }
 useEmitt({
   name: 'data-export-center',
@@ -23,6 +17,6 @@ useEmitt({
 <template>
   <config-global>
     <router-view :key="route.path" />
-    <ExportExcel v-if="exportExcelRefShow" ref="exportExcelRef"></ExportExcel>
+    <ExportExcel ref="exportExcelRef"></ExportExcel>
   </config-global>
 </template>
diff --git a/core/core-frontend/src/utils/components.ts b/core/core-frontend/src/utils/components.ts
index 660d87e85f..e12329c4ac 100644
--- a/core/core-frontend/src/utils/components.ts
+++ b/core/core-frontend/src/utils/components.ts
@@ -1,46 +1,92 @@
 import VText from '@/custom-component/v-text/Component.vue'
 import VQuery from '@/custom-component/v-query/Component.vue'
+import VTextAttr from '@/custom-component/v-text/Attr.vue'
 import Group from '@/custom-component/group/Component.vue'
+import GroupAttr from '@/custom-component/group/Attr.vue'
 import UserView from '@/custom-component/user-view/Component.vue'
+import UserViewAttr from '@/custom-component/user-view/Attr.vue'
 import Picture from '@/custom-component/picture/Component.vue'
+import PictureAttr from '@/custom-component/picture/Attr.vue'
 import CanvasBoard from '@/custom-component/canvas-board/Component.vue'
+import CanvasBoardAttr from '@/custom-component/canvas-board/Attr.vue'
 import CanvasIcon from '@/custom-component/canvas-icon/Component.vue'
+import CanvasIconAttr from '@/custom-component/canvas-icon/Attr.vue'
 import DeTabs from '@/custom-component/de-tabs/Component.vue'
+import DeTabsAttr from '@/custom-component/de-tabs/Attr.vue'
 import DeGraphical from '@/custom-component/de-graphical/Component.vue'
+import DeGraphicalAttr from '@/custom-component/de-graphical/Attr.vue'
 import CircleShape from '@/custom-component/circle-shape/Component.vue'
+import CircleShapeAttr from '@/custom-component/circle-shape/Attr.vue'
 import RectShape from '@/custom-component/rect-shape/Component.vue'
+import RectShapeAttr from '@/custom-component/rect-shape/Attr.vue'
 import SvgTriangle from '@/custom-component/svgs/svg-triangle/Component.vue'
+import SvgTriangleAttr from '@/custom-component/svgs/svg-triangle/Attr.vue'
 import DeTimeClock from '@/custom-component/de-time-clock/Component.vue'
+import DeTimeClockAttr from '@/custom-component/de-time-clock/Attr.vue'
 import GroupArea from '@/custom-component/group-area/Component.vue'
+import GroupAreaAttr from '@/custom-component/group-area/Attr.vue'
 import DeFrame from '@/custom-component/de-frame/ComponentFrame.vue'
+import DeFrameAttr from '@/custom-component/de-frame/Attr.vue'
 import DeVideo from '@/custom-component/de-video/Component.vue'
+import DeVideoAttr from '@/custom-component/de-video/Attr.vue'
 import DeStreamMedia from '@/custom-component/de-stream-media/Component.vue'
+import DeStreamMediaAttr from '@/custom-component/de-stream-media/Attr.vue'
 import ScrollText from '@/custom-component/scroll-text/Component.vue'
+import ScrollTextAttr from '@/custom-component/scroll-text/Attr.vue'
 import PopArea from '@/custom-component/pop-area/Component.vue'
+import PopAreaAttr from '@/custom-component/pop-area/Attr.vue'
 import PictureGroup from '@/custom-component/picture-group/Component.vue'
+import PictureGroupAttr from '@/custom-component/picture-group/Attr.vue'
 export const componentsMap = {
   VText: VText,
   VQuery,
+  VTextAttr: VTextAttr,
   Group: Group,
+  GroupAttr: GroupAttr,
   UserView: UserView,
+  UserViewAttr: UserViewAttr,
   Picture: Picture,
+  PictureAttr: PictureAttr,
   CanvasBoard: CanvasBoard,
+  CanvasBoardAttr: CanvasBoardAttr,
   CanvasIcon: CanvasIcon,
+  CanvasIconAttr: CanvasIconAttr,
   DeTabs: DeTabs,
+  DeTabsAttr: DeTabsAttr,
   DeGraphical: DeGraphical,
+  DeGraphicalAttr: DeGraphicalAttr,
   CircleShape: CircleShape,
+  CircleShapeAttr: CircleShapeAttr,
   RectShape: RectShape,
+  RectShapeAttr: RectShapeAttr,
   SvgTriangle: SvgTriangle,
+  SvgTriangleAttr: SvgTriangleAttr,
   DeTimeClock: DeTimeClock,
+  DeTimeClockAttr: DeTimeClockAttr,
   GroupArea: GroupArea,
+  GroupAreaAttr: GroupAreaAttr,
   DeFrame: DeFrame,
+  DeFrameAttr: DeFrameAttr,
   DeVideo: DeVideo,
+  DeVideoAttr: DeVideoAttr,
   DeStreamMedia: DeStreamMedia,
+  DeStreamMediaAttr: DeStreamMediaAttr,
   ScrollText: ScrollText,
+  ScrollTextAttr: ScrollTextAttr,
   PopArea: PopArea,
-  PictureGroup: PictureGroup
+  PopAreaAttr: PopAreaAttr,
+  PictureGroup: PictureGroup,
+  PictureGroupAttr: PictureGroupAttr
 }
 
 export default function findComponent(key) {
   return componentsMap[key]
 }
+
+export function findComponentAttr(component) {
+  const key =
+    component.component === 'UserView' && component.innerType === 'picture-group'
+      ? 'PictureGroupAttr'
+      : component.component + 'Attr'
+  return componentsMap[key]
+}
diff --git a/core/core-frontend/src/utils/componentsAttr.ts b/core/core-frontend/src/utils/componentsAttr.ts
deleted file mode 100644
index fd1c6a436d..0000000000
--- a/core/core-frontend/src/utils/componentsAttr.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import VTextAttr from '@/custom-component/v-text/Attr.vue'
-import GroupAttr from '@/custom-component/group/Attr.vue'
-import UserViewAttr from '@/custom-component/user-view/Attr.vue'
-import PictureAttr from '@/custom-component/picture/Attr.vue'
-import CanvasBoardAttr from '@/custom-component/canvas-board/Attr.vue'
-import CanvasIconAttr from '@/custom-component/canvas-icon/Attr.vue'
-import DeTabsAttr from '@/custom-component/de-tabs/Attr.vue'
-import DeGraphicalAttr from '@/custom-component/de-graphical/Attr.vue'
-import CircleShapeAttr from '@/custom-component/circle-shape/Attr.vue'
-import RectShapeAttr from '@/custom-component/rect-shape/Attr.vue'
-import SvgTriangleAttr from '@/custom-component/svgs/svg-triangle/Attr.vue'
-import DeTimeClockAttr from '@/custom-component/de-time-clock/Attr.vue'
-import GroupAreaAttr from '@/custom-component/group-area/Attr.vue'
-import DeFrameAttr from '@/custom-component/de-frame/Attr.vue'
-import DeVideoAttr from '@/custom-component/de-video/Attr.vue'
-import DeStreamMediaAttr from '@/custom-component/de-stream-media/Attr.vue'
-import ScrollTextAttr from '@/custom-component/scroll-text/Attr.vue'
-import PopAreaAttr from '@/custom-component/pop-area/Attr.vue'
-import PictureGroupAttr from '@/custom-component/picture-group/Attr.vue'
-export const componentsMap = {
-  VTextAttr: VTextAttr,
-  GroupAttr: GroupAttr,
-  UserViewAttr: UserViewAttr,
-  PictureAttr: PictureAttr,
-  CanvasBoardAttr: CanvasBoardAttr,
-  CanvasIconAttr: CanvasIconAttr,
-  DeTabsAttr: DeTabsAttr,
-  DeGraphicalAttr: DeGraphicalAttr,
-  CircleShapeAttr: CircleShapeAttr,
-  RectShapeAttr: RectShapeAttr,
-  SvgTriangleAttr: SvgTriangleAttr,
-  DeTimeClockAttr: DeTimeClockAttr,
-  GroupAreaAttr: GroupAreaAttr,
-  DeFrameAttr: DeFrameAttr,
-  DeVideoAttr: DeVideoAttr,
-  DeStreamMediaAttr: DeStreamMediaAttr,
-  ScrollTextAttr: ScrollTextAttr,
-  PopAreaAttr: PopAreaAttr,
-  PictureGroupAttr: PictureGroupAttr
-}
-
-export function findComponentAttr(component) {
-  const key =
-    component.component === 'UserView' && component.innerType === 'picture-group'
-      ? 'PictureGroupAttr'
-      : component.component + 'Attr'
-  return componentsMap[key]
-}
diff --git a/core/core-frontend/src/views/chart/components/editor/chart-type/ChartTypeSelect.vue b/core/core-frontend/src/views/chart/components/editor/chart-type/ChartTypeSelect.vue
deleted file mode 100644
index ccfe97f257..0000000000
--- a/core/core-frontend/src/views/chart/components/editor/chart-type/ChartTypeSelect.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script lang="ts" setup>
-import { iconChartMap } from '@/components/icon-group/chart-list'
-import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
-import { toRefs } from 'vue'
-
-const props = defineProps({
-  propValue: {
-    type: Array,
-    default: () => []
-  },
-  state: {
-    type: Object,
-    default: () => ({
-      useless: ''
-    })
-  },
-  type: {
-    type: String,
-    required: true
-  },
-  themes: {
-    type: String,
-    default: 'dark'
-  }
-})
-
-const { state } = toRefs(props)
-const emits = defineEmits(['onTypeChange'])
-const onTypeChange = (render, type) => {
-  emits('onTypeChange', render, type)
-}
-</script>
-
-<template>
-  <el-popover
-    :offset="4"
-    placement="bottom-end"
-    width="434"
-    trigger="click"
-    append-to-body
-    :popper-class="'chart-type-style-' + themes"
-    :persistent="false"
-  >
-    <template #reference>
-      <el-select
-        v-model="state.useless"
-        popper-class="chart-type-hide-options"
-        class="chart-type-select"
-        :suffix-icon="icon_down_outlined1"
-        :effect="themes"
-        size="small"
-      >
-        <template #prefix>
-          <Icon
-            class-name="chart-type-select-icon"
-            v-if="state.chartTypeOptions[0]?.isPlugin"
-            :static-content="state.chartTypeOptions[0]?.icon"
-          />
-          <Icon v-else>
-            <component
-              class="svg-icon chart-type-select-icon"
-              :is="iconChartMap[state.chartTypeOptions[0].icon]"
-            ></component>
-          </Icon>
-        </template>
-        <template #default>
-          <el-option
-            v-for="item in state.chartTypeOptions"
-            :key="item.value"
-            :label="item.title"
-            :value="item.value"
-          />
-        </template>
-      </el-select>
-    </template>
-    <template #default>
-      <chart-type :themes="themes" :type="type" @on-type-change="onTypeChange" />
-    </template>
-  </el-popover>
-</template>
-
-<style lang="less" scoped>
-.chart-type-select {
-  width: 100%;
-  margin-top: 8px;
-  :deep(.ed-select__prefix) {
-    padding: 0;
-    margin: 0;
-    border: none;
-    height: 20px;
-    .chart-type-select-icon {
-      width: 23px;
-      height: 16px;
-    }
-
-    &::after {
-      display: none;
-    }
-  }
-  :deep(.ed-input) {
-    height: 28px;
-  }
-}
-</style>
diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index 2c70fbfab7..92e11316ce 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import dvInfoSvg from '@/assets/svg/dv-info.svg'
+import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
 import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import iconFilter from '@/assets/svg/icon-filter.svg'
@@ -20,8 +21,7 @@ import {
   provide,
   unref,
   onBeforeUnmount,
-  onMounted,
-  defineAsyncComponent
+  onMounted
 } from 'vue'
 import Icon from '@/components/icon-custom/src/Icon.vue'
 import type { FormInstance, FormRules } from 'element-plus-secondary'
@@ -36,6 +36,9 @@ import { fieldType } from '@/utils/attr'
 import QuotaItem from '@/views/chart/components/editor/drag-item/QuotaItem.vue'
 import DragPlaceholder from '@/views/chart/components/editor/drag-item/DragPlaceholder.vue'
 import FilterTree from './filter/FilterTree.vue'
+import ChartStyle from '@/views/chart/components/editor/editor-style/ChartStyle.vue'
+import VQueryChartStyle from '@/views/chart/components/editor/editor-style/VQueryChartStyle.vue'
+import Senior from '@/views/chart/components/editor/editor-senior/Senior.vue'
 import QuotaFilterEditor from '@/views/chart/components/editor/filter/QuotaFilterEditor.vue'
 import ResultFilterEditor from '@/views/chart/components/editor/filter/ResultFilterEditor.vue'
 import { ElIcon } from 'element-plus-secondary'
@@ -43,6 +46,7 @@ import DrillItem from '@/views/chart/components/editor/drag-item/DrillItem.vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import { BASE_VIEW_CONFIG, getViewConfig } from '@/views/chart/components/editor/util/chart'
+import ChartType from '@/views/chart/components/editor/chart-type/ChartType.vue'
 import { useRouter, useRoute } from 'vue-router'
 import CompareEdit from '@/views/chart/components/editor/drag-item/components/CompareEdit.vue'
 import ValueFormatterEdit from '@/views/chart/components/editor/drag-item/components/ValueFormatterEdit.vue'
@@ -62,6 +66,7 @@ import { Field, getFieldByDQ, copyChartField, deleteChartField } from '@/api/cha
 import ChartTemplateInfo from '@/views/chart/components/editor/common/ChartTemplateInfo.vue'
 import { XpackComponent } from '@/components/plugin'
 import { useEmbedded } from '@/store/modules/embedded'
+import { iconChartMap } from '@/components/icon-group/chart-list'
 import { iconFieldMap } from '@/components/icon-group/field-list'
 import {
   iconFieldCalculatedMap,
@@ -87,21 +92,6 @@ const router = useRouter()
 let componentNameEdit = ref(false)
 let inputComponentName = ref({ id: null, name: null })
 let componentNameInput = ref(null)
-const VQueryChartStyle = defineAsyncComponent(
-  () => import('@/views/chart/components/editor/editor-style/VQueryChartStyle.vue')
-)
-
-const ChartStyle = defineAsyncComponent(
-  () => import('@/views/chart/components/editor/editor-style/ChartStyle.vue')
-)
-
-const Senior = defineAsyncComponent(
-  () => import('@/views/chart/components/editor/editor-senior/Senior.vue')
-)
-
-const ChartTypeSelect = defineAsyncComponent(
-  () => import('@/views/chart/components/editor/chart-type/ChartTypeSelect.vue')
-)
 
 const { t } = useI18n()
 const loading = ref(false)
@@ -2115,12 +2105,55 @@ const deleteChartFieldItem = id => {
                         class="drag-data padding-lr"
                       >
                         <span class="data-area-label">{{ t('chart.switch_chart') }}</span>
-                        <ChartTypeSelect
-                          @onTypeChange="onTypeChange"
-                          :type="view.type"
-                          :themes="themes"
-                          :state="state"
-                        ></ChartTypeSelect>
+                        <el-popover
+                          :offset="4"
+                          placement="bottom-end"
+                          width="434"
+                          trigger="click"
+                          :append-to-body="true"
+                          :popper-class="'chart-type-style-' + themes"
+                          :persistent="false"
+                        >
+                          <template #reference>
+                            <el-select
+                              v-model="state.useless"
+                              popper-class="chart-type-hide-options"
+                              class="chart-type-select"
+                              :suffix-icon="icon_down_outlined1"
+                              :effect="themes"
+                              size="small"
+                            >
+                              <template #prefix>
+                                <Icon
+                                  class-name="chart-type-select-icon"
+                                  v-if="state.chartTypeOptions[0]?.isPlugin"
+                                  :static-content="state.chartTypeOptions[0]?.icon"
+                                />
+                                <Icon v-else class-name="chart-type-select-icon">
+                                  <component
+                                    class="svg-icon chart-type-select-icon"
+                                    :is="iconChartMap[state.chartTypeOptions[0].icon]"
+                                  ></component>
+                                </Icon>
+                              </template>
+                              <template #default>
+                                <el-option
+                                  v-for="item in state.chartTypeOptions"
+                                  :key="item.value"
+                                  :label="item.title"
+                                  :value="item.value"
+                                />
+                              </template>
+                            </el-select>
+                          </template>
+                          <template #default>
+                            <chart-type
+                              :themes="themes"
+                              :type="view.type"
+                              @on-type-change="onTypeChange"
+                            />
+                          </template>
+                        </el-popover>
                       </el-row>
                       <template v-if="view.plugin?.isPlugin">
                         <plugin-component
@@ -5099,6 +5132,25 @@ span {
   }
 }
 
+.chart-type-select {
+  width: 100%;
+  margin-top: 8px;
+  :deep(.ed-select__prefix) {
+    padding: 0;
+    margin: 0;
+    &::after {
+      display: none;
+    }
+    height: 20px;
+    .chart-type-select-icon {
+      width: 23px;
+      height: 16px;
+    }
+  }
+  :deep(.ed-input) {
+    height: 28px;
+  }
+}
 .name-edit-form {
   margin-bottom: 16px !important;
 
diff --git a/core/core-frontend/src/views/common/ComponentStyleEditor.vue b/core/core-frontend/src/views/common/ComponentStyleEditor.vue
index 787abacbe9..bfc40a0c8e 100644
--- a/core/core-frontend/src/views/common/ComponentStyleEditor.vue
+++ b/core/core-frontend/src/views/common/ComponentStyleEditor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { findComponentAttr } from '@/utils/componentsAttr'
+import { findComponentAttr } from '@/utils/components'
 import { storeToRefs } from 'pinia'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import ViewEditor from '@/views/chart/components/editor/index.vue'
diff --git a/core/core-frontend/src/views/dashboard/index.vue b/core/core-frontend/src/views/dashboard/index.vue
index 5cc23b04e8..3fe1c0fdad 100644
--- a/core/core-frontend/src/views/dashboard/index.vue
+++ b/core/core-frontend/src/views/dashboard/index.vue
@@ -1,25 +1,20 @@
 <script setup lang="ts">
-import {
-  computed,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  reactive,
-  ref,
-  defineAsyncComponent,
-  watch
-} from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
+import { findComponentAttr } from '../../utils/components'
 import DvSidebar from '../../components/visualization/DvSidebar.vue'
 import router from '@/router'
+import MobileConfigPanel from './MobileConfigPanel.vue'
 import { useAppStoreWithOut } from '@/store/modules/app'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import DbToolbar from '@/components/dashboard/DbToolbar.vue'
+import ViewEditor from '@/views/chart/components/editor/index.vue'
 import { getDatasetTree } from '@/api/dataset'
 import { Tree } from '@/views/visualized/data/dataset/form/CreatDsGroup.vue'
 import DbCanvasAttr from '@/components/dashboard/DbCanvasAttr.vue'
 import { decompressionPre, initCanvasData, onInitReady } from '@/utils/canvasUtils'
+import ChartStyleBatchSet from '@/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue'
 import DeCanvas from '@/views/canvas/DeCanvas.vue'
 import { check, compareStorage } from '@/utils/CrossPermission'
 import { useCache } from '@/hooks/web/useCache'
@@ -30,17 +25,18 @@ import { interactiveStoreWithOut } from '@/store/modules/interactive'
 import { watermarkFind } from '@/api/watermark'
 import { XpackComponent } from '@/components/plugin'
 import { Base64 } from 'js-base64'
+import CanvasCacheDialog from '@/components/visualization/CanvasCacheDialog.vue'
 import { deepCopy } from '@/utils/utils'
 const interactiveStore = interactiveStoreWithOut()
 import { useRequestStoreWithOut } from '@/store/modules/request'
 import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import eventBus from '@/utils/eventBus'
 import { useI18n } from '@/hooks/web/useI18n'
+import DashboardHiddenComponent from '@/components/dashboard/DashboardHiddenComponent.vue'
 import { recoverToPublished } from '@/api/visualization/dataVisualization'
 const embeddedStore = useEmbedded()
 const { wsCache } = useCache()
 const canvasCacheOutRef = ref(null)
-const canvasCacheOutRefShow = ref(false)
 const deCanvasRef = ref(null)
 const eventCheck = e => {
   if (e.key === 'panel-weight' && !compareStorage(e.oldValue, e.newValue)) {
@@ -85,21 +81,7 @@ const initDataset = () => {
     state.datasetTree = (res as unknown as Tree[]) || []
   })
 }
-const ViewEditor = defineAsyncComponent(() => import('@/views/chart/components/editor/index.vue'))
 
-const ChartStyleBatchSet = defineAsyncComponent(
-  () => import('@/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue')
-)
-
-const MobileConfigPanel = defineAsyncComponent(() => import('./MobileConfigPanel.vue'))
-
-const CanvasCacheDialog = defineAsyncComponent(
-  () => import('@/components/visualization/CanvasCacheDialog.vue')
-)
-
-const DashboardHiddenComponent = defineAsyncComponent(
-  () => import('@/components/dashboard/DashboardHiddenComponent.vue')
-)
 const otherEditorShow = computed(() => {
   return Boolean(
     curComponent.value &&
@@ -111,21 +93,6 @@ const otherEditorShow = computed(() => {
   )
 })
 
-watch(
-  () => otherEditorShow.value,
-  val => {
-    if (val && curComponent.value) {
-      findComponentAttr(curComponent.value)
-    }
-  }
-)
-const currentAttr = ref()
-const findComponentAttr = type => {
-  import('../../utils/componentsAttr').then(res => {
-    currentAttr.value = res.findComponentAttr(type)
-  })
-}
-
 const otherEditorTitle = computed(() => {
   return curComponent.value?.component === 'UserView'
     ? t('visualization.attribute')
@@ -249,10 +216,7 @@ onMounted(async () => {
     dataInitState.value = false
     const canvasCache = wsCache.get('DE-DV-CATCH-' + resourceId)
     if (canvasCache) {
-      canvasCacheOutRefShow.value = true
-      nextTick(() => {
-        canvasCacheOutRef.value?.dialogInit({ canvasType: 'dashboard', resourceId: resourceId })
-      })
+      canvasCacheOutRef.value?.dialogInit({ canvasType: 'dashboard', resourceId: resourceId })
     } else {
       initLocalCanvasData(() => {
         // do init
@@ -397,7 +361,7 @@ onUnmounted(() => {
         :element="curComponent"
         class="left-sidebar"
       >
-        <component :is="currentAttr" :themes="'light'" />
+        <component :is="findComponentAttr(curComponent)" :themes="'light'" />
       </dv-sidebar>
       <dv-sidebar
         v-show="!curComponent && !batchOptStatus && !hiddenListStatus"
@@ -410,7 +374,7 @@ onUnmounted(() => {
       >
         <DbCanvasAttr></DbCanvasAttr>
       </dv-sidebar>
-      <div v-if="viewEditorShow" style="height: 100%">
+      <div v-show="viewEditorShow" style="height: 100%">
         <view-editor
           :themes="'light'"
           :view="canvasViewInfo[curComponent ? curComponent.id : 'default']"
@@ -450,11 +414,7 @@ onUnmounted(() => {
     @load-fail="XpackLoaded"
   />
   <xpack-component jsname="L2NvbXBvbmVudC90aHJlc2hvbGQtd2FybmluZy9UaHJlc2hvbGREaWFsb2c=" />
-  <canvas-cache-dialog
-    v-if="canvasCacheOutRefShow"
-    ref="canvasCacheOutRef"
-    @doUseCache="doUseCache"
-  ></canvas-cache-dialog>
+  <canvas-cache-dialog ref="canvasCacheOutRef" @doUseCache="doUseCache"></canvas-cache-dialog>
 </template>
 
 <style lang="less">
diff --git a/core/core-frontend/src/views/data-visualization/index.vue b/core/core-frontend/src/views/data-visualization/index.vue
index 4b20550a5f..f6f27fd5ed 100644
--- a/core/core-frontend/src/views/data-visualization/index.vue
+++ b/core/core-frontend/src/views/data-visualization/index.vue
@@ -11,7 +11,7 @@ import { storeToRefs } from 'pinia'
 import DvToolbar from '../../components/data-visualization/DvToolbar.vue'
 import ComponentToolBar from '../../components/data-visualization/ComponentToolBar.vue'
 import eventBus from '../../utils/eventBus'
-import { findComponentAttr } from '../../utils/componentsAttr'
+import { findComponentAttr } from '../../utils/components'
 import DvSidebar from '../../components/visualization/DvSidebar.vue'
 import router from '@/router'
 import Editor from '@/views/chart/components/editor/index.vue'
diff --git a/core/core-frontend/src/views/data-visualization/indexV3.vue b/core/core-frontend/src/views/data-visualization/indexV3.vue
index ba3ea2c3bf..8e383c9668 100644
--- a/core/core-frontend/src/views/data-visualization/indexV3.vue
+++ b/core/core-frontend/src/views/data-visualization/indexV3.vue
@@ -10,7 +10,7 @@ import { useAppStoreWithOut } from '@/store/modules/app'
 import { storeToRefs } from 'pinia'
 import DvToolbar from '../../components/data-visualization/DvToolbar.vue'
 import eventBus from '../../utils/eventBus'
-import { findComponentAttr } from '@/utils/componentsAttr'
+import { findComponentAttr } from '../../utils/components'
 import DvSidebar from '../../components/visualization/DvSidebar.vue'
 import router from '@/router'
 import Editor from '@/views/chart/components/editor/index.vue'