diff --git a/core/core-frontend/src/custom-component/common/CanvasGroup.vue b/core/core-frontend/src/custom-component/common/CanvasGroup.vue
new file mode 100644
index 0000000000..ed9848588f
--- /dev/null
+++ b/core/core-frontend/src/custom-component/common/CanvasGroup.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { toRefs } from 'vue'
+import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
+import DeCanvas from '@/views/canvas/DeCanvas.vue'
+
+const props = defineProps({
+  canvasStyleData: {
+    type: Object,
+    required: true
+  },
+  componentData: {
+    type: Array,
+    required: true
+  },
+  canvasViewInfo: {
+    type: Object,
+    required: true
+  },
+  dvInfo: {
+    type: Object,
+    required: true
+  },
+  element: {
+    type: Object,
+    default() {
+      return {
+        propValue: []
+      }
+    }
+  },
+  isEdit: {
+    type: Boolean,
+    default: false
+  },
+  showPosition: {
+    type: String,
+    required: false,
+    default: 'canvas'
+  },
+  canvasId: {
+    type: String,
+    required: true
+  },
+  // 仪表板刷新计时器
+  searchCount: {
+    type: Number,
+    required: false,
+    default: 0
+  }
+})
+const { element, isEdit, showPosition, canvasStyleData, canvasViewInfo, dvInfo, componentData } =
+  toRefs(props)
+</script>
+
+<template>
+  <de-canvas
+    v-if="isEdit"
+    ref="canvasGroup"
+    :component-data="componentData"
+    :canvas-style-data="canvasStyleData"
+    :canvas-view-info="canvasViewInfo"
+    :canvas-id="canvasId"
+  ></de-canvas>
+  <de-preview
+    v-else
+    :ref="'dashboardPreview'"
+    :dv-info="dvInfo"
+    :component-data="componentData"
+    :canvas-style-data="canvasStyleData"
+    :canvas-view-info="canvasViewInfo"
+    :canvas-id="canvasId"
+    :show-position="showPosition"
+  ></de-preview>
+</template>
+
+<style lang="less" scoped></style>
diff --git a/core/core-frontend/src/custom-component/group/Component.vue b/core/core-frontend/src/custom-component/group/Component.vue
index e60ae2e4f9..a87eb1b2ff 100644
--- a/core/core-frontend/src/custom-component/group/Component.vue
+++ b/core/core-frontend/src/custom-component/group/Component.vue
@@ -2,9 +2,9 @@
 import { toRefs } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
-import ComponentWrapper from '@/components/data-visualization/canvas/ComponentWrapper.vue'
+import CanvasGroup from '@/custom-component/common/CanvasGroup.vue'
 const dvMainStore = dvMainStoreWithOut()
-const { canvasViewInfo } = storeToRefs(dvMainStore)
+const { canvasViewInfo, canvasStyleData } = storeToRefs(dvMainStore)
 
 const props = defineProps({
   propValue: {
@@ -33,6 +33,11 @@ const props = defineProps({
     type: Number,
     required: false,
     default: 0
+  },
+  isEdit: {
+    type: Boolean,
+    required: false,
+    default: false
   }
 })
 
@@ -42,18 +47,17 @@ const { propValue, dvInfo, searchCount } = toRefs(props)
 <template>
   <div class="group">
     <div>
-      <component-wrapper
-        v-for="(item, index) in propValue"
-        :id="'component' + item.id"
-        :view-info="canvasViewInfo[item.id]"
-        :key="index"
-        :config="item"
-        :index="index"
+      <canvas-group
+        :component-data="propValue"
         :dv-info="dvInfo"
-        :style="item.groupStyle"
         :show-position="showPosition"
-        :search-count="searchCount"
-      />
+        :canvas-id="'group-' + element.id"
+        :canvas-style-data="canvasStyleData"
+        :canvas-view-info="canvasViewInfo"
+        :is-edit="isEdit"
+        :element="element"
+      >
+      </canvas-group>
     </div>
   </div>
 </template>