diff --git a/apps/web-test/src/views/dashboard/home/components/Output5/index.vue b/apps/web-test/src/views/dashboard/home/components/Output5/index.vue
index 219a2c49..318cf271 100644
--- a/apps/web-test/src/views/dashboard/home/components/Output5/index.vue
+++ b/apps/web-test/src/views/dashboard/home/components/Output5/index.vue
@@ -1,36 +1,65 @@
-<template>
-  <div class="custom-card w-[100%] h-[100%] flex flex-col">
-    <div class="card-name titlt-top" v-if="isEdit"><div>我的应用</div><EditOutlined /></div>
-    <div class="card-name titlt-top" v-else >
-      <Input v-model:value="cardName" >
-        <template #addonAfter>
-          <CheckOutlined />
-        </template>
-      </Input></div>
-    <GridGroup :list="data.childer" class="flex-1"></GridGroup>
-  </div>
-</template>
 <script setup lang="ts">
-import { toRefs ,ref} from 'vue'
+import { ref, toRefs } from 'vue';
+
+import {
+  CheckOutlined,
+  CloseOutlined,
+  EditOutlined,
+} from '@ant-design/icons-vue';
+import { Input, Space } from 'ant-design-vue';
+
 import GridGroup from '../GridGroup/index.vue';
-import { CheckOutlined,EditOutlined} from '@ant-design/icons-vue';
-import { Input } from 'ant-design-vue';
-let cardName = ref('我的应用')
+
 const props = defineProps({
   data: {
     type: Object,
-    default: {}
+    default: {},
   },
-})
-let isEdit = ref(true)
-console.log('propsprops', props.data);
-let { data } = toRefs(props);
-
+});
+const cardName = ref(props.data.name);
+const newCardName = ref(cardName.value);
+const isEdit = ref(true);
+const setNewName = () => {
+  isEdit.value = !isEdit.value;
+  cardName.value = newCardName.value;
+};
+const { data } = toRefs(props);
 </script>
+<template>
+  <div class="custom-card flex h-[100%] w-[100%] flex-col">
+    <div
+      v-if="isEdit"
+      class="card-name titlt-top flex items-center justify-between"
+    >
+      <div>{{ cardName }}</div>
+      <EditOutlined
+        class="cursor-pointer"
+        style="font-size: 16px"
+        @click="isEdit = !isEdit"
+      />
+    </div>
+    <div v-else class="card-name titlt-top">
+      <Input
+        v-model:value="newCardName"
+        :autofocus="true"
+        :bordered="false"
+        size="small"
+      >
+        <template #addonAfter>
+          <Space warp>
+            <CheckOutlined @click="setNewName" />
+            <CloseOutlined @click="isEdit = !isEdit" />
+          </Space>
+        </template>
+      </Input>
+    </div>
+    <GridGroup :list="data.childer" class="flex-1" />
+  </div>
+</template>
 <style lang="scss" scoped>
 .card-name {
   font-weight: 500;
   padding: 5px 0;
   border-bottom: 1px solid #ddd;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/web-test/src/views/dashboard/home/index.vue b/apps/web-test/src/views/dashboard/home/index.vue
index 8056731b..92cd623f 100644
--- a/apps/web-test/src/views/dashboard/home/index.vue
+++ b/apps/web-test/src/views/dashboard/home/index.vue
@@ -18,6 +18,7 @@ import {
   UndoOutlined,
 } from '@ant-design/icons-vue';
 import {
+  Button,
   Checkbox,
   CheckboxGroup,
   Collapse,
@@ -44,11 +45,11 @@ const layout = ref([]);
 onMounted(() => {
   const layoutStr = JSON.parse(localStorage.getItem('layout'));
   if (layoutStr && layoutStr.length > 0) {
-    for (const element of layoutStr) {
-      if (element && element.component) {
-        // layoutStr[i].component = loadComponent(layoutStr[i].component);
-      }
-    }
+    // for (const element of layoutStr) {
+    //   if (element && element.component) {
+    //     layoutStr[i].component = loadComponent(layoutStr[i].component);
+    //   }
+    // }
     layout.value = layoutStr;
   }
   console.log('oooo', layout.value);
@@ -244,6 +245,7 @@ const dragend = (e) => {
     } catch {}
   }
   nextTick(() => {
+    // eslint-disable-next-line no-use-before-define
     tilesIsMove.value = true;
   });
 };
@@ -290,9 +292,16 @@ const cancelOrSure = (type) => {
   if (type == 'cance') {
     editTiles.value = false;
     tilesStore.setTilesIsMove(false);
-    layout.value = layout.value.filter((item) => {
-      return !item.isNew;
-    });
+    const layoutStr = JSON.parse(localStorage.getItem('layout'));
+
+    if (layoutStr && layoutStr.length > 0) {
+      for (const element of layoutStr) {
+        if (element && element.component) {
+          element.loadComp = loadComponent(element.component);
+        }
+      }
+      layout.value = layoutStr;
+    }
   } else if (type == 'sure') {
     editTiles.value = false;
     tilesStore.setTilesIsMove(false);
@@ -311,6 +320,43 @@ const goPage = (item) => {
   if (tilesIsMove.value) return;
   router.push(item?.path);
 };
+// 新增分组
+const addGroup = () => {
+  const arr = JSON.parse(JSON.stringify(layout.value));
+  const maxY = arr.reduce((max, item) => {
+    return Math.max(max, item.y);
+  }, -Infinity);
+  const obj = {
+    name: '新建分组',
+    w: 4,
+    h: 6,
+    component: './components/Output5/index.vue',
+    dom: '.titlt-top',
+    isResize: true,
+    X: 0,
+    y: 0,
+    i: Math.random() * 100,
+    loadComp: loadComponent('./components/Output5/index.vue'),
+    childer: [
+      {
+        name1: 'AUTO_1612159241967.png',
+        name2: 'AUTO_1612159241967_C车辆调度.png',
+        size: '2x2',
+        name: '车辆调度',
+        w: 1,
+        h: 2,
+        i: 0,
+        x: 1,
+        y: 1,
+        component: '../../components/Output1/index.vue',
+      },
+    ],
+  };
+
+  layout.value.push(obj);
+
+  console.log(layout.value, '00000');
+};
 </script>
 
 <template>
@@ -318,6 +364,7 @@ const goPage = (item) => {
     <!-- 自定义布局的部分 -->
     {{ screenW }} - {{ rowHeight }}
     <div class="grid-box index-grid select-none">
+      <Button type="primary" @click="addGroup">新增分组</Button>
       <grid-layout
         v-if="rowHeight != 0"
         ref="gridLayout"