feat: auto insert block into group

src/locales/zh/blocks.json

@@ -534,7 +534,7 @@
         "description": "截取当前活动标签页的屏幕截图",
         "imageQuality": "图像质量",
         "saveToColumn": "将屏幕截图插入表格",
-        "saveToComputer": "将屏幕截图保存到计算机"
+        "saveToComputer": "将屏幕截图保存到计算机",
         "types": {
           "title": "截图",
           "page": "页面",

src/locales/zh/newtab.json

@@ -123,12 +123,12 @@
       "messages": {
         "hostExist": "您已添加此主机",
         "notFound": "找不到托管工作流 \"{id}\" id"
-      },
+      }
     },
     "type": {
       "local": "本地",
       "shared": "共享",
-      "host": "主机",
+      "host": "主机"
     },
     "unpublish": {
       "title": "取消发布工作流",
@@ -184,7 +184,7 @@
       "zoomIn": "放大",
       "zoomOut": "缩小",
       "resetZoom": "重置缩放",
-      "duplicate": "副本"
+      "duplicate": "副本",
       "copy": "复制",
       "paste": "粘贴"
     },

src/popup/pages/Recording.vue

@@ -71,8 +71,8 @@ const state = reactive({
 
 function generateDrawflow(startBlock, startBlockData) {
   let nextNodeId = nanoid();
-  const triggerId = startBlock.id || nanoid();
-  let prevNodeId = startBlock.id || triggerId;
+  const triggerId = startBlock?.id || nanoid();
+  let prevNodeId = startBlock?.id || triggerId;
 
   const nodes = {
     [triggerId]: {
@@ -98,8 +98,27 @@ function generateDrawflow(startBlock, startBlockData) {
     y: startBlockData ? startBlockData.pos_y + 50 : 300,
     x: startBlockData ? startBlockData.pos_x + 120 : 260,
   };
+  const groups = {};
 
   state.flows.forEach((block, index) => {
+    if (block.groupId) {
+      if (!groups[block.groupId]) groups[block.groupId] = [];
+
+      groups[block.groupId].push({
+        id: block.id,
+        itemId: nanoid(),
+        data: defu(block.data, tasks[block.id].data),
+      });
+
+      const nextNodeInGroup = state.flows[index + 1]?.groupId;
+      if (nextNodeInGroup) return;
+
+      block.id = 'blocks-group';
+      block.data = { blocks: groups[block.groupId] };
+
+      delete groups[block.groupId];
+    }
+
     const node = {
       id: nextNodeId,
       name: block.id,
@@ -171,6 +190,7 @@ async function stopRecording() {
       });
     } else {
       const drawflow = generateDrawflow();
+
       await Workflow.insert({
         data: {
           name: state.name,