diff --git a/core/core-frontend/src/assets/svg/dv-expand-down.svg b/core/core-frontend/src/assets/svg/dv-expand-down.svg
new file mode 100644
index 0000000000..e0d1dfa7cd
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/dv-expand-down.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.76003 7.79314L1.11628 3.25044C1.0169 3.12669 1.0169 2.92586 1.11628 2.8019C1.16398 2.74231 1.22878 2.70898 1.29606 2.70898H8.7042C8.84461 2.70898 8.95857 2.85106 8.95857 3.02627C8.95857 3.11044 8.9317 3.19086 8.88398 3.25044L5.24023 7.79336C5.10773 7.95856 4.89273 7.95856 4.76023 7.79336L4.76003 7.79314Z" fill="#A6A6A6"/>
+</svg>
diff --git a/core/core-frontend/src/assets/svg/dv-expand-right.svg b/core/core-frontend/src/assets/svg/dv-expand-right.svg
new file mode 100644
index 0000000000..99cffc3bef
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/dv-expand-right.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.79266 5.23935L3.24995 8.8831C3.1262 8.98248 2.92537 8.98248 2.80142 8.8831C2.74183 8.8354 2.7085 8.7706 2.7085 8.70332V1.29518C2.70828 1.15497 2.85037 1.04102 3.02558 1.04102C3.10975 1.04102 3.19016 1.06789 3.24975 1.1156L7.79266 4.75935C7.95787 4.89185 7.95787 5.10685 7.79266 5.23935V5.23935Z" fill="#A6A6A6"/>
+</svg>
diff --git a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
index 1e1ec7abf3..4505fa3416 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
@@ -5,12 +5,13 @@ import { layerStoreWithOut } from '@/store/modules/data-visualization/layer'
 import { storeToRefs } from 'pinia'
 import { ElIcon, ElRow } from 'element-plus-secondary'
 import Icon from '../icon-custom/src/Icon.vue'
-import { computed, nextTick, ref } from 'vue'
+import { computed, nextTick, ref, toRefs } from 'vue'
 import draggable from 'vuedraggable'
 import { lockStoreWithOut } from '@/store/modules/data-visualization/lock'
 import ContextMenuAsideDetails from '@/components/data-visualization/canvas/ContextMenuAsideDetails.vue'
 import ComposeShow from '@/components/data-visualization/canvas/ComposeShow.vue'
 import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
+import { propTypes } from '@/utils/propTypes'
 const dropdownMore = ref(null)
 const lockStore = lockStoreWithOut()
 
@@ -23,7 +24,11 @@ const { areaData, isCtrlOrCmdDown, isShiftDown, laterIndex } = storeToRefs(compo
 
 const { curComponent, canvasViewInfo } = storeToRefs(dvMainStore)
 
-const componentData = computed(() => dvMainStore.componentData)
+const props = defineProps({
+  componentData: []
+})
+
+const { componentData } = toRefs(props)
 
 const getComponent = index => {
   return componentData.value[componentData.value.length - 1 - index]
@@ -312,7 +317,6 @@ const handleContextMenu = e => {
             </div>
           </template>
         </draggable>
-        <el-row style="width: 100%; height: 150px"></el-row>
       </div>
     </el-row>
     <Teleport v-if="editComponentId && nameEdit" :to="editComponentId">
@@ -346,7 +350,7 @@ const handleContextMenu = e => {
         align-items: center;
         justify-content: flex-start;
         font-size: 12px;
-        padding: 0 2px 0 22px;
+        padding: 0 2px 0 44px;
         user-select: none;
 
         .component-icon {
diff --git a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
index 9871130722..654772cc68 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
@@ -90,6 +90,10 @@ const setCurComponent = index => {
   dvMainStore.setCurComponent({ component: componentData.value[index], index })
 }
 
+const expandClick = component => {
+  component['expand'] = !component['expand']
+}
+
 let nameEdit = ref(false)
 let editComponentId = ref('')
 let inputName = ref('')
@@ -227,6 +231,24 @@ const handleContextMenu = e => {
                 }"
                 @click="onClick($event, transformIndex(index))"
               >
+                <div style="width: 22px; padding-left: 3px">
+                  <el-icon
+                    v-show="getComponent(index)?.component === 'Group'"
+                    class="component-expand"
+                    @click="expandClick(getComponent(index))"
+                  >
+                    <Icon
+                      v-show="getComponent(index)?.expand"
+                      name="dv-expand-down"
+                      class="expand-icon"
+                    ></Icon>
+                    <Icon
+                      v-show="!getComponent(index)?.expand"
+                      name="dv-expand-right"
+                      class="expand-icon"
+                    ></Icon>
+                  </el-icon>
+                </div>
                 <el-icon class="component-icon">
                   <Icon :name="getIconName(getComponent(index))"></Icon>
                 </el-icon>
@@ -314,6 +336,9 @@ const handleContextMenu = e => {
                   </template>
                 </el-dropdown>
               </div>
+              <div v-if="getComponent(index)?.component === 'Group' && getComponent(index)?.expand">
+                <real-time-group :component-data="getComponent(index).propValue"></real-time-group>
+              </div>
             </div>
           </template>
         </draggable>
@@ -351,7 +376,7 @@ const handleContextMenu = e => {
         align-items: center;
         justify-content: flex-start;
         font-size: 12px;
-        padding: 0 2px 0 22px;
+        padding: 0 2px 0 0px;
         user-select: none;
 
         .component-icon {
@@ -394,7 +419,7 @@ const handleContextMenu = e => {
             .component-base {
               opacity: 1;
             }
-            width: 70px !important;
+            width: 66px !important;
           }
         }
 
@@ -431,6 +456,26 @@ const handleContextMenu = e => {
   background: #303133 !important;
 }
 
+.component-expand {
+  cursor: pointer;
+  height: 16px !important;
+  width: 16px !important;
+  border-radius: 2px;
+  padding: 0 2px;
+
+  .expand-icon {
+    font-size: 10px;
+  }
+
+  &:hover {
+    background: rgba(235, 235, 235, 0.1);
+  }
+
+  &:active {
+    background: rgba(235, 235, 235, 0.1);
+  }
+}
+
 .component-base {
   cursor: pointer;
   height: 22px !important;
diff --git a/core/core-frontend/src/store/modules/data-visualization/compose.ts b/core/core-frontend/src/store/modules/data-visualization/compose.ts
index 9ef8219c0b..926bcda1a4 100644
--- a/core/core-frontend/src/store/modules/data-visualization/compose.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/compose.ts
@@ -90,6 +90,7 @@ export const composeStore = defineStore('compose', {
         name: '组合',
         label: '组合',
         icon: 'group',
+        expand: false,
         commonBackground: {
           ...deepCopy(COMMON_COMPONENT_BACKGROUND_MAP[curOriginThemes.value]),
           backgroundColorSelect: false,
diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
index 9ffce990ae..fc6cd7417b 100644
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/core/core-frontend/src/utils/canvasUtils.ts
@@ -95,6 +95,11 @@ export function initCanvasDataPrepare(dvId, busiFlag, callBack) {
     const canvasDataResult = JSON.parse(canvasInfo.componentData)
     const canvasStyleResult = JSON.parse(canvasInfo.canvasStyleData)
     const canvasViewInfoPreview = canvasInfo.canvasViewInfo
+    canvasDataResult.forEach(componentItem => {
+      if (componentItem.component === 'Group') {
+        componentItem.expand = componentItem.expand || false
+      }
+    })
     const curPreviewGap =
       dvInfo.type === 'dashboard' && canvasStyleResult['dashboard'].gap === 'yes'
         ? canvasStyleResult['dashboard'].gapSize