From 0468c3ea167a1f76eee9382591274c8c602f0f70 Mon Sep 17 00:00:00 2001
From: mobyw <mobyw66@gmail.com>
Date: Mon, 14 Oct 2024 23:42:43 +0800
Subject: [PATCH] :sparkles: Improve import and export functions and example

---
 packages/app/src/App.vue                      |   8 +-
 packages/app/src/blocks/nonebot_scheduler.ts  |   2 -
 packages/app/src/components/ButtonPanel.vue   |  14 +-
 packages/app/src/components/ConfigTab.vue     | 100 ++-
 packages/app/src/components/TutorialTab.vue   |  42 +-
 packages/app/src/default.ts                   | 580 ++++++++++++++----
 packages/app/src/generators/helper.ts         |  29 +
 .../app/src/generators/nonebot_alconna.ts     |  37 +-
 packages/app/src/generators/nonebot_basic.ts  |  36 +-
 .../app/src/generators/nonebot_scheduler.ts   |  23 +-
 packages/app/src/workspace.ts                 | 350 +++++++----
 11 files changed, 888 insertions(+), 333 deletions(-)
 create mode 100644 packages/app/src/generators/helper.ts

diff --git a/packages/app/src/App.vue b/packages/app/src/App.vue
index 8625df4..ec39ba0 100644
--- a/packages/app/src/App.vue
+++ b/packages/app/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, shallowRef } from "vue";
+import { onMounted } from "vue";
 // Components
 import ContentCard from "@/components/ContentCard.vue";
 import BlocklyTab from "@/components/BlocklyTab.vue";
@@ -11,7 +11,7 @@ import ButtonPanel from "@/components/ButtonPanel.vue";
 import { loadJson, generateCode } from "@/workspace";
 import { optionsStore, workspaceStore } from "@/workspace";
 // Workspace data
-import { startBlocks } from "@/default";
+import { demoProject } from "@/default";
 // Blockly config
 import * as Blockly from "blockly";
 import { blocks } from "@/blocks";
@@ -29,11 +29,13 @@ pythonGenerator.addReservedWords(
   "json,Annotated,Matcher,Message,EventMessage,CommandArg,on_command,on_message,on_alconna,to_me",
 );
 
+// @ts-ignore
 Blockly.setLocale(ZhHans);
+Blockly.ContextMenuItems.registerCommentOptions();
 
 // Set store data
 optionsStore.toolbox = toolbox;
-workspaceStore.startBlocks = startBlocks;
+workspaceStore.demoProject = demoProject;
 const workspace = Blockly.getMainWorkspace();
 workspaceStore.workspace = workspace;
 
diff --git a/packages/app/src/blocks/nonebot_scheduler.ts b/packages/app/src/blocks/nonebot_scheduler.ts
index f41c897..d839bb3 100644
--- a/packages/app/src/blocks/nonebot_scheduler.ts
+++ b/packages/app/src/blocks/nonebot_scheduler.ts
@@ -28,8 +28,6 @@ export const definitions: BlockDefinition[] = [
         name: "HANDLE",
       },
     ],
-    previousStatement: null,
-    nextStatement: null,
     colour: 210,
   },
   {
diff --git a/packages/app/src/components/ButtonPanel.vue b/packages/app/src/components/ButtonPanel.vue
index 1a6e104..70a91f1 100644
--- a/packages/app/src/components/ButtonPanel.vue
+++ b/packages/app/src/components/ButtonPanel.vue
@@ -49,28 +49,30 @@ function toggleTheme() {
       <v-btn color="tertiary" @click="saveJson">
         <v-icon :icon="mdiContentSave"></v-icon>
         暂存
-        <v-tooltip activator="parent" location="bottom"> 暂存工作区 </v-tooltip>
+        <v-tooltip activator="parent" location="bottom">
+          暂存项目到浏览器
+        </v-tooltip>
       </v-btn>
 
       <v-btn color="tertiary" @click="loadJson">
         <v-icon :icon="mdiFileRestore"></v-icon>
         恢复
         <v-tooltip activator="parent" location="bottom">
-          恢复保存的工作区
+          恢复上次暂存的项目
         </v-tooltip>
       </v-btn>
 
       <v-btn color="tertiary" @click="exportPress">
         <v-icon :icon="mdiLanguagePython"></v-icon>
-        导出项目
+        导入导出
         <v-tooltip activator="parent" location="bottom">
-          导出 NoneBot 项目
+          导入导出项目设计文件，或生成 NoneBot 工程
         </v-tooltip>
       </v-btn>
 
       <v-spacer />
 
-      <v-btn color="primary" class="text-none" stacked>
+      <v-btn color="tertiary" class="text-none" stacked>
         <v-icon :icon="mdiThemeLightDark" @click="toggleTheme()"></v-icon>
       </v-btn>
     </v-toolbar>
@@ -89,8 +91,6 @@ function toggleTheme() {
 import {
   mdiContentSave,
   mdiFileRestore,
-  mdiFileDownload,
-  mdiFileUpload,
   mdiThemeLightDark,
   mdiLanguagePython,
 } from "@mdi/js";
diff --git a/packages/app/src/components/ConfigTab.vue b/packages/app/src/components/ConfigTab.vue
index e24a879..2f758eb 100644
--- a/packages/app/src/components/ConfigTab.vue
+++ b/packages/app/src/components/ConfigTab.vue
@@ -1,11 +1,21 @@
 <script setup lang="ts">
-import { outputsStore, exportZip } from "@/workspace";
+import { ref } from "vue";
+import {
+  exportConfig,
+  exportProject,
+  importProject,
+  exportZip,
+} from "@/workspace";
 
-const items = [
+const file = ref<File | null>(null);
+
+const presets = [
   { name: "console", description: "控制台机器人" },
   { name: "onebot", description: "OneBot V11 & V12" },
 ];
 
+const commandStarts = ["/", "", ".", "*", "!", "#", "$", "%", "&", "?"];
+
 const itemProps = (item: { name: string; description: string }) => {
   return {
     title: item.name,
@@ -15,15 +25,17 @@ const itemProps = (item: { name: string; description: string }) => {
 
 const nameRules = [
   (value: string) => {
-    if (value) return true;
-    return "请填写项目名称";
+    if (!value) return "请填写项目名称";
+    if (!/^[a-zA-Z0-9_-]+$/.test(value))
+      return "项目名称只能包含字母、数字、下划线和短横线";
+    return true;
   },
 ];
 
 const presetRules = [
   (value: string) => {
-    if (value) return true;
-    return "请选择一个预设";
+    if (!value) return "请选择一个预设";
+    return true;
   },
 ];
 
@@ -36,6 +48,13 @@ const portRules = [
     return true;
   },
 ];
+
+const commandStartRules = [
+  (value: string) => {
+    if (!value) return "请选择至少一个命令起始符";
+    return true;
+  },
+];
 </script>
 
 <template>
@@ -44,7 +63,7 @@ const portRules = [
       <v-row>
         <v-col cols="12" md="4">
           <v-text-field
-            v-model="outputsStore.export.name"
+            v-model="exportConfig.name"
             :counter="10"
             :rules="nameRules"
             label="项目名称"
@@ -53,9 +72,9 @@ const portRules = [
         </v-col>
         <v-col cols="12" md="4">
           <v-select
-            v-model="outputsStore.export.preset"
+            v-model="exportConfig.preset"
             :item-props="itemProps"
-            :items="items"
+            :items="presets"
             :rules="presetRules"
             label="预设"
             required
@@ -63,18 +82,37 @@ const portRules = [
         </v-col>
         <v-col cols="12" md="4">
           <v-text-field
-            v-model="outputsStore.export.port"
+            v-model="exportConfig.port"
             :rules="portRules"
             label="端口"
             required
           ></v-text-field>
         </v-col>
+        <v-col cols="12" md="4">
+          <v-combobox
+            v-model="exportConfig.commandStart"
+            :rules="commandStartRules"
+            :items="commandStarts"
+            label="命令起始符列表"
+            chips
+            multiple
+          ></v-combobox>
+        </v-col>
+        <v-col cols="12" md="4">
+          <v-combobox
+            v-model="exportConfig.superusers"
+            :items="[]"
+            label="超级用户列表"
+            chips
+            multiple
+          ></v-combobox>
+        </v-col>
       </v-row>
 
       <v-row>
         <v-col cols="12" md="4">
           <v-checkbox
-            v-model="outputsStore.export.platform"
+            v-model="exportConfig.platform"
             label="包含 Windows 环境配置脚本"
             value="windows"
             hide-details
@@ -82,7 +120,7 @@ const portRules = [
         </v-col>
         <v-col cols="12" md="4">
           <v-checkbox
-            v-model="outputsStore.export.platform"
+            v-model="exportConfig.platform"
             label="包含 Linux 环境配置脚本"
             value="linux"
             hide-details
@@ -91,8 +129,42 @@ const portRules = [
       </v-row>
 
       <v-row>
-        <v-col cols="12" md="12">
-          <v-btn class="mt-4" @click="exportZip" block>
+        <v-col cols="12" md="4">
+          <v-dialog max-width="500">
+            <template v-slot:activator="{ props: activatorProps }">
+              <v-btn v-bind="activatorProps" class="mt-4" color="tertiary" block
+                >导入设计文件</v-btn
+              >
+            </template>
+
+            <template v-slot:default="{ isActive }">
+              <v-card title="导入设计文件">
+                <v-container>
+                  <v-file-input
+                    v-model="file"
+                    label="Upload JSON file"
+                    accept=".json"
+                    @change="importProject"
+                    outlined
+                  ></v-file-input>
+
+                  <v-card-actions>
+                    <v-spacer></v-spacer>
+
+                    <v-btn text="关闭" @click="isActive.value = false"></v-btn>
+                  </v-card-actions>
+                </v-container>
+              </v-card>
+            </template>
+          </v-dialog>
+        </v-col>
+        <v-col cols="12" md="4">
+          <v-btn @click="exportProject" class="mt-4" color="secondary" block>
+            导出设计文件
+          </v-btn>
+        </v-col>
+        <v-col cols="12" md="4">
+          <v-btn @click="exportZip" class="mt-4" color="primary" block>
             导出 NoneBot 项目
           </v-btn>
         </v-col>
diff --git a/packages/app/src/components/TutorialTab.vue b/packages/app/src/components/TutorialTab.vue
index 789243c..039dd8c 100644
--- a/packages/app/src/components/TutorialTab.vue
+++ b/packages/app/src/components/TutorialTab.vue
@@ -3,26 +3,48 @@ import { initWorkspaceState } from "@/workspace";
 </script>
 
 <template>
-  <v-card-text class="text-h6 pb-0">使用方法</v-card-text>
+  <v-card-text class="text-h5 pb-0">使用方法</v-card-text>
   <v-card-text>
     <p class="text-body-1">
-      点击左侧的工具箱标签，在对应工具箱中拖出块，在工作区中进行拼接。
+      点击编程标签页左侧的工具箱标签，在对应工具箱中拖出块，在工作区中进行拼接完成图形化编程。
     </p>
   </v-card-text>
   <v-card-text>
     <v-btn color="tertiary" @click="initWorkspaceState">
-      点击此按钮加载默认示例
+      点此按钮加载示例
     </v-btn>
+    （会覆盖当前工作区）
   </v-card-text>
+  <v-card-text class="text-h6 pb-0">暂存与回复</v-card-text>
   <v-card-text>
     <p class="text-body-1">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-      est laborum.
+      点击下方工具栏的“暂存”按钮可将当前设计暂存到浏览器中，点击“恢复”按钮可恢复上次暂存的设计。
     </p>
+    <p class="text-body-1">
+      已存在暂存的设计时，刷新页面或重新打开页面时会自动恢复上次暂存的设计。
+    </p>
+  </v-card-text>
+  <v-card-text class="text-h6 pb-0">配置与导入导出</v-card-text>
+  <v-card-text>
+    <p class="text-body-1">
+      点击下方工具栏的“导入导出”按钮或点击“配置”标签，可进行参数配置、设计文件的导入导出、以及
+      NoneBot 工程的导出操作。
+    </p>
+    <p class="text-body-1">
+      导出设计文件将生成一个 JSON 文件并下载到本地；导入设计文件需要选择已导出的
+      JSON 文件上传。
+    </p>
+    <p class="text-body-1">
+      导出 NoneBot
+      工程将生成一个压缩文件并下载到本地，使用时需要先进行解压，在项目根目录运行对应平台的脚本
+      （ Windows 平台为<code>./install.ps1</code> 和 <code>./run.ps1</code>；
+      Linux 平台为 <code>bash ./install.sh</code> 和
+      <code>bash ./run.sh</code>
+      ）进行环境配置与运行。
+    </p>
+  </v-card-text>
+
+  <v-card-text>
+    <p class="text-body-1">详细使用文档正在编写中。</p>
   </v-card-text>
 </template>
diff --git a/packages/app/src/default.ts b/packages/app/src/default.ts
index f1658a7..df37045 100644
--- a/packages/app/src/default.ts
+++ b/packages/app/src/default.ts
@@ -1,76 +1,276 @@
-export const startBlocks = {
-  blocks: {
-    languageVersion: 0,
-    blocks: [
+export const demoProject = {
+  version: "v1",
+  data: {
+    workspaceComments: [
       {
-        type: "nonebot_on_command",
-        id: "!WdCO9=B,k2IY0/Su4|I",
-        x: 150,
-        y: 210,
-        fields: { COMMAND: "save", TOME: true },
-        inputs: {
-          HANDLE: {
-            block: {
-              type: "variables_set",
-              id: "9_AQ_@)mWU$=2GkYbT-d",
-              fields: { VAR: { id: "VSvr3AeHEP),5NB5v$+;" } },
-              inputs: {
-                VALUE: {
-                  block: {
-                    type: "store_load_json",
-                    id: "3~H`IY?A(%(Bb+8/wL3c",
-                    fields: { FILE: "save.json" },
+        height: 79.33334350585938,
+        width: 401.33331298828125,
+        id: ").5C,33iYe,Es5QP^CZS",
+        x: 490,
+        y: 50,
+        text: '消息处理对整条纯文本消息进行响应\n发送内容为 "ping" 会得到回复 "pong"',
+      },
+      {
+        height: 143.99996948242188,
+        width: 480.00006103515625,
+        id: "^qq4*u=7LW8i@`p}MbNT",
+        x: 970,
+        y: 350,
+        text: '命令处理只处理以命令起始符和命令字符串起始的消息\n命令起始符可在配置选项卡中设置，默认为 "/"\n选择了空命令起始符时可直接匹配以命令字符串起始的消息\n本例中可相应消息如 "/save 1" "/save 2"\n每次调用会返回上一次的参数，首次为 "None"，第二次为 "1"',
+      },
+      {
+        height: 92,
+        width: 483.33331298828125,
+        id: "[NvN:*-?JE3}m5R}jIm7",
+        x: 970,
+        y: 510,
+        text: "文件存储支持可以将文本或字典存入本地文件\n或从本地文件读出到对应的变量中",
+      },
+      {
+        height: 104.66668701171875,
+        width: 402,
+        id: "W;2zsU/+VlY54WQsR)5V",
+        x: 490,
+        y: 570,
+        text: "跨平台命令解析预处理由 alconna 插件提供支持\n可以自由配置固定字符串或多种数据类型的命令参数列表\n并在处理流程中取得对应的命令参数使用",
+      },
+      {
+        height: 82.666748046875,
+        width: 401.99993896484375,
+        id: "^dl/_H.6Ei@c8]zhc)MI",
+        x: 490,
+        y: 150,
+        text: "网络请求支持可以构建GET或POST网络请求\n需要正确配置返回内容的数据类型以支持后续处理",
+      },
+      {
+        height: 58.00006103515625,
+        width: 389.99981689453125,
+        id: "6ILVtb0f/4J2QpMw?W?u",
+        x: 970,
+        y: 810,
+        text: "定时任务支持可以根据设定时间重复指定的处理操作",
+      },
+    ],
+    blocks: {
+      languageVersion: 0,
+      blocks: [
+        {
+          type: "nonebot_on_command",
+          id: "!WdCO9=B,k2IY0/Su4|I",
+          x: 970,
+          y: 50,
+          fields: { COMMAND: "save", TOME: true },
+          inputs: {
+            HANDLE: {
+              block: {
+                type: "variables_set",
+                id: "9_AQ_@)mWU$=2GkYbT-d",
+                fields: { VAR: { id: "VSvr3AeHEP),5NB5v$+;" } },
+                inputs: {
+                  VALUE: {
+                    block: {
+                      type: "store_load_json",
+                      id: "3~H`IY?A(%(Bb+8/wL3c",
+                      fields: { FILE: "save.json" },
+                    },
                   },
                 },
-              },
-              next: {
-                block: {
-                  type: "variables_set",
-                  id: "gc.{0S@R!yzBky.dRf/T",
-                  fields: { VAR: { id: "dS|cq^n0{Ep#B]f*RtAH" } },
-                  inputs: {
-                    VALUE: {
+                next: {
+                  block: {
+                    type: "variables_set",
+                    id: "gc.{0S@R!yzBky.dRf/T",
+                    fields: { VAR: { id: "dS|cq^n0{Ep#B]f*RtAH" } },
+                    inputs: {
+                      VALUE: {
+                        block: {
+                          type: "dicts_get",
+                          id: "R5``m]FzB+yBPW1W2`]$",
+                          fields: { KEY: "last" },
+                          inputs: {
+                            DICT: {
+                              block: {
+                                type: "variables_get",
+                                id: "[Ws*B$JWgLY]BeT`^_=]",
+                                fields: { VAR: { id: "VSvr3AeHEP),5NB5v$+;" } },
+                              },
+                            },
+                          },
+                        },
+                      },
+                    },
+                    next: {
                       block: {
-                        type: "dicts_get",
-                        id: "R5``m]FzB+yBPW1W2`]$",
-                        fields: { KEY: "last" },
+                        type: "nonebot_send",
+                        id: "2VEO#b:zwo|#8!@y%P}q",
+                        fields: { FINISH: false },
                         inputs: {
-                          DICT: {
+                          MESSAGE: {
                             block: {
-                              type: "variables_get",
-                              id: "[Ws*B$JWgLY]BeT`^_=]",
-                              fields: { VAR: { id: "VSvr3AeHEP),5NB5v$+;" } },
+                              type: "text_join",
+                              id: "~Va]uDcID[2P5@n3z{pe",
+                              extraState: { itemCount: 2 },
+                              inputs: {
+                                ADD0: {
+                                  block: {
+                                    type: "text",
+                                    id: "3Aw,]xK/YxeE+S`=:}vc",
+                                    fields: { TEXT: "last: " },
+                                  },
+                                },
+                                ADD1: {
+                                  block: {
+                                    type: "variables_get",
+                                    id: "hF5`vj~{OC2uF+^}Q8yk",
+                                    fields: {
+                                      VAR: { id: "dS|cq^n0{Ep#B]f*RtAH" },
+                                    },
+                                  },
+                                },
+                              },
+                            },
+                          },
+                        },
+                        next: {
+                          block: {
+                            type: "dicts_set",
+                            id: "B3Wx%a7x=Pp95taY%.*K",
+                            fields: { KEY: "last" },
+                            inputs: {
+                              DICT: {
+                                block: {
+                                  type: "variables_get",
+                                  id: "7iF8)`YtA.s.-@v_dYNo",
+                                  fields: {
+                                    VAR: { id: "VSvr3AeHEP),5NB5v$+;" },
+                                  },
+                                },
+                              },
+                              VALUE: {
+                                block: {
+                                  type: "nonebot_param_text",
+                                  id: "{eYrM|C4so41hXY4~MtD",
+                                },
+                              },
+                            },
+                            next: {
+                              block: {
+                                type: "store_save_json",
+                                id: "sOck!o^D;xHPwNdX0v;s",
+                                fields: { FILE: "save.json" },
+                                inputs: {
+                                  DICT: {
+                                    block: {
+                                      type: "variables_get",
+                                      id: "Z8a4Wo4ae#)plFG}S:6B",
+                                      fields: {
+                                        VAR: { id: "VSvr3AeHEP),5NB5v$+;" },
+                                      },
+                                    },
+                                  },
+                                },
+                              },
                             },
                           },
                         },
                       },
                     },
                   },
-                  next: {
+                },
+              },
+            },
+          },
+        },
+        {
+          type: "nonebot_on_message",
+          id: "rJ[.=4k)POkDVT?Wz%zD",
+          x: 70,
+          y: 50,
+          fields: { TOME: false },
+          inputs: {
+            HANDLE: {
+              block: {
+                type: "controls_if",
+                id: "SBBb-4DL]Ofg,o5,lix9",
+                extraState: { elseIfCount: 2 },
+                inputs: {
+                  IF0: {
+                    block: {
+                      type: "logic_compare",
+                      id: "3KiI-ePNeWs/tZ.xUQd*",
+                      fields: { OP: "EQ" },
+                      inputs: {
+                        A: {
+                          block: {
+                            type: "nonebot_param_text",
+                            id: "}:vuF-QZzN6NL{}`jW87",
+                          },
+                        },
+                        B: {
+                          block: {
+                            type: "text",
+                            id: ":R-~fjy%Xs,HExpeH$jd",
+                            fields: { TEXT: "ping" },
+                          },
+                        },
+                      },
+                    },
+                  },
+                  DO0: {
                     block: {
                       type: "nonebot_send",
-                      id: "2VEO#b:zwo|#8!@y%P}q",
-                      fields: { FINISH: false },
+                      id: "zyjiCMiE87Wm_gt~i6dj",
+                      fields: { FINISH: true },
                       inputs: {
                         MESSAGE: {
                           block: {
-                            type: "text_join",
-                            id: "~Va]uDcID[2P5@n3z{pe",
-                            extraState: { itemCount: 2 },
+                            type: "text",
+                            id: "NpK-srq00|eB:+v#I5t?",
+                            fields: { TEXT: "pong" },
+                          },
+                        },
+                      },
+                    },
+                  },
+                  IF1: {
+                    block: {
+                      type: "logic_compare",
+                      id: "!Q{^KS]tk}knY$0loSbK",
+                      fields: { OP: "EQ" },
+                      inputs: {
+                        A: {
+                          block: {
+                            type: "nonebot_param_text",
+                            id: "R3^-rcLn~gkf#eJO//|S",
+                          },
+                        },
+                        B: {
+                          block: {
+                            type: "text",
+                            id: "L44H6xsB#jzeNUodNS3*",
+                            fields: { TEXT: "plugin" },
+                          },
+                        },
+                      },
+                    },
+                  },
+                  DO1: {
+                    block: {
+                      type: "variables_set",
+                      id: "}8cI$-ju]d/4jbudI(%?",
+                      fields: { VAR: { id: "i7%fQRO5s:HNPn!Egg/!" } },
+                      inputs: {
+                        VALUE: {
+                          block: {
+                            type: "request_get",
+                            id: "i%$0*PV*Q}aD.4uiq,Xk",
+                            fields: { TYPE: "list", TIMEOUT: 60 },
                             inputs: {
-                              ADD0: {
+                              URL: {
                                 block: {
                                   type: "text",
-                                  id: "3Aw,]xK/YxeE+S`=:}vc",
-                                  fields: { TEXT: "last: " },
-                                },
-                              },
-                              ADD1: {
-                                block: {
-                                  type: "variables_get",
-                                  id: "hF5`vj~{OC2uF+^}Q8yk",
+                                  id: "ju`#!lmdA,,j~GxD)LdV",
                                   fields: {
-                                    VAR: { id: "dS|cq^n0{Ep#B]f*RtAH" },
+                                    TEXT: "https://registry.nonebot.dev/plugins.json",
                                   },
                                 },
                               },
@@ -80,37 +280,90 @@ export const startBlocks = {
                       },
                       next: {
                         block: {
-                          type: "dicts_set",
-                          id: "B3Wx%a7x=Pp95taY%.*K",
-                          fields: { KEY: "last" },
+                          type: "nonebot_send",
+                          id: "I]HVejYi1XMiH7@L#%fa",
+                          fields: { FINISH: true },
                           inputs: {
-                            DICT: {
-                              block: {
-                                type: "variables_get",
-                                id: "7iF8)`YtA.s.-@v_dYNo",
-                                fields: { VAR: { id: "VSvr3AeHEP),5NB5v$+;" } },
-                              },
-                            },
-                            VALUE: {
+                            MESSAGE: {
                               block: {
-                                type: "nonebot_param_text",
-                                id: "{eYrM|C4so41hXY4~MtD",
+                                type: "text_join",
+                                id: "TBv3^GAlbgL-)1DGdyI`",
+                                extraState: { itemCount: 2 },
+                                inputs: {
+                                  ADD0: {
+                                    block: {
+                                      type: "text",
+                                      id: "Nr4jVV3k@]@q._B7$O+_",
+                                      fields: { TEXT: "当前插件数量为：" },
+                                    },
+                                  },
+                                  ADD1: {
+                                    block: {
+                                      type: "lists_length",
+                                      id: "e8GR1^[w[S5c,=vs`nU(",
+                                      inputs: {
+                                        VALUE: {
+                                          block: {
+                                            type: "variables_get",
+                                            id: "@^l~%MD,Wm9RLJ|N%Ys4",
+                                            fields: {
+                                              VAR: {
+                                                id: "i7%fQRO5s:HNPn!Egg/!",
+                                              },
+                                            },
+                                          },
+                                        },
+                                      },
+                                    },
+                                  },
+                                },
                               },
                             },
                           },
-                          next: {
-                            block: {
-                              type: "store_save_json",
-                              id: "sOck!o^D;xHPwNdX0v;s",
-                              fields: { FILE: "save.json" },
-                              inputs: {
-                                DICT: {
-                                  block: {
-                                    type: "variables_get",
-                                    id: "Z8a4Wo4ae#)plFG}S:6B",
-                                    fields: {
-                                      VAR: { id: "VSvr3AeHEP),5NB5v$+;" },
-                                    },
+                        },
+                      },
+                    },
+                  },
+                  IF2: {
+                    block: {
+                      type: "logic_compare",
+                      id: "o|dYI,`Cy)u6gPCrP]!r",
+                      fields: { OP: "EQ" },
+                      inputs: {
+                        A: {
+                          block: {
+                            type: "nonebot_param_text",
+                            id: "2_xq)Q*KP{j0d0ZG1y`Z",
+                          },
+                        },
+                        B: {
+                          block: {
+                            type: "text",
+                            id: "S:8I/+[}C@_cjY*@_dhE",
+                            fields: { TEXT: "random" },
+                          },
+                        },
+                      },
+                    },
+                  },
+                  DO2: {
+                    block: {
+                      type: "nonebot_send",
+                      id: "[QQQ:Wu;b)hi|C_=p[T(",
+                      fields: { FINISH: false },
+                      inputs: {
+                        MESSAGE: {
+                          block: {
+                            type: "text_join",
+                            id: "NXK(kC#{y^-Wvr2a0_+;",
+                            extraState: { itemCount: 1 },
+                            inputs: {
+                              ADD0: {
+                                block: {
+                                  type: "variables_get",
+                                  id: "-f7]+j)Y],;g0.nxr[Kr",
+                                  fields: {
+                                    VAR: { id: "dm}-^1M|xx~4#6g~~7e#" },
                                   },
                                 },
                               },
@@ -125,52 +378,94 @@ export const startBlocks = {
             },
           },
         },
-      },
-      {
-        type: "nonebot_on_message",
-        id: "rJ[.=4k)POkDVT?Wz%zD",
-        x: 150,
-        y: 30,
-        fields: { TOME: false },
-        inputs: {
-          HANDLE: {
-            block: {
-              type: "controls_if",
-              id: "SBBb-4DL]Ofg,o5,lix9",
-              inputs: {
-                IF0: {
-                  block: {
-                    type: "logic_compare",
-                    id: "3KiI-ePNeWs/tZ.xUQd*",
-                    fields: { OP: "EQ" },
-                    inputs: {
-                      A: {
-                        block: {
-                          type: "nonebot_param_text",
-                          id: "}:vuF-QZzN6NL{}`jW87",
+        {
+          type: "nonebot_on_alconna",
+          id: "|Fu4X1(2DR;,y_a_tXuZ",
+          x: 70,
+          y: 610,
+          extraState: { itemCount: 3 },
+          fields: { COMMAND: "command", TOME: true },
+          inputs: {
+            ARG0: {
+              block: {
+                type: "alconna_const",
+                id: "F]W)`U.)2h|Wy@y[#X1A",
+                fields: { TEXT: "test" },
+              },
+            },
+            ARG1: {
+              block: {
+                type: "alconna_arg",
+                id: "86},)_bY]o`5w*GGsg+o",
+                fields: { NAME: "name", TYPE: "str" },
+              },
+            },
+            ARG2: {
+              block: {
+                type: "alconna_arg",
+                id: "}qB@y=xly_6U~?~cTvl7",
+                fields: { NAME: "number", TYPE: "int" },
+              },
+            },
+            HANDLE: {
+              block: {
+                type: "nonebot_send",
+                id: "IG0GrnVygzO2N+qv~Wav",
+                fields: { FINISH: false },
+                inputs: {
+                  MESSAGE: {
+                    block: {
+                      type: "text_join",
+                      id: "BYK7GDru]?*p60E0ED!}",
+                      extraState: { itemCount: 2 },
+                      inputs: {
+                        ADD0: {
+                          block: {
+                            type: "text",
+                            id: "Lz;^)x7Ry)aC`;jz(n_[",
+                            fields: { TEXT: "参数name为：" },
+                          },
                         },
-                      },
-                      B: {
-                        block: {
-                          type: "text",
-                          id: ":R-~fjy%Xs,HExpeH$jd",
-                          fields: { TEXT: "ping" },
+                        ADD1: {
+                          block: {
+                            type: "alconna_arg_get",
+                            id: "kjv.p]ZKq?$Ay!@|(GZz",
+                            extraState: { name: "name" },
+                            fields: { NAME: "name" },
+                          },
                         },
                       },
                     },
                   },
                 },
-                DO0: {
+                next: {
                   block: {
                     type: "nonebot_send",
-                    id: "zyjiCMiE87Wm_gt~i6dj",
-                    fields: { FINISH: true },
+                    id: "Df,m4`}7lCDAVw=}TxLl",
+                    fields: { FINISH: false },
                     inputs: {
                       MESSAGE: {
                         block: {
-                          type: "text",
-                          id: "NpK-srq00|eB:+v#I5t?",
-                          fields: { TEXT: "pong" },
+                          type: "text_join",
+                          id: ",ujwQq~#eb/c(q9#mKnW",
+                          extraState: { itemCount: 2 },
+                          inputs: {
+                            ADD0: {
+                              block: {
+                                type: "text",
+                                id: "TJ?2:7Q!R$=_eUyD;M8m",
+                                fields: { TEXT: "参数number为：" },
+                              },
+                            },
+                            ADD1: {
+                              block: {
+                                type: "alconna_arg_get",
+                                id: "[u:Is_2hXiJap%JWvgl2",
+                                extraState: { name: "number" },
+                                fields: { NAME: "number" },
+                              },
+                            },
+                          },
                         },
                       },
                     },
@@ -180,11 +475,60 @@ export const startBlocks = {
             },
           },
         },
-      },
+        {
+          type: "scheduler_add",
+          id: "6djmI(1,`~eAj}g=@PXr",
+          x: 970,
+          y: 650,
+          inputs: {
+            TIME: {
+              block: {
+                type: "scheduler_time_interval",
+                id: "XCCX[EaW9yKIF;Ck|waX",
+                fields: { NUMBER: 10, UNIT: "seconds" },
+              },
+            },
+            ID: {
+              block: {
+                type: "text",
+                id: "@JgyG!7m]+3d#@1GPRaA",
+                fields: { TEXT: "refresh_number" },
+              },
+            },
+            HANDLE: {
+              block: {
+                type: "variables_set",
+                id: "iRc7.8GkpN=ZE){MYOG9",
+                fields: { VAR: { id: "dm}-^1M|xx~4#6g~~7e#" } },
+                inputs: {
+                  VALUE: {
+                    block: {
+                      type: "math_random_float",
+                      id: "$oMB|U7+QU_qfCwi,J$j",
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      ],
+    },
+    variables: [
+      { name: "data_dict", id: "VSvr3AeHEP),5NB5v$+;" },
+      { name: "last_param", id: "dS|cq^n0{Ep#B]f*RtAH" },
+      { name: "plugin_data", id: "i7%fQRO5s:HNPn!Egg/!" },
+      { name: "plugin_data2", id: "`a{F^Z`6/mb_37*,mPgL" },
+      { name: "random_number", id: "dm}-^1M|xx~4#6g~~7e#" },
     ],
   },
-  variables: [
-    { name: "data_dict", id: "VSvr3AeHEP),5NB5v$+;" },
-    { name: "last_param", id: "dS|cq^n0{Ep#B]f*RtAH" },
-  ],
+  config: {
+    name: "app_demo",
+    preset: { name: "console", description: "控制台机器人" },
+    port: 8080,
+    platform: ["windows", "linux"],
+    commandStart: ["/", ""],
+    superusers: ["User"],
+    kwargs: {},
+  },
 };
diff --git a/packages/app/src/generators/helper.ts b/packages/app/src/generators/helper.ts
new file mode 100644
index 0000000..b5f85c2
--- /dev/null
+++ b/packages/app/src/generators/helper.ts
@@ -0,0 +1,29 @@
+import { PythonGenerator } from "blockly/python";
+import * as Blockly from "blockly/core";
+
+export function getGlobalStatement(
+  block: Blockly.Block,
+  generator: PythonGenerator,
+) {
+  const globals = [];
+  const workspace = block.workspace;
+  const usedVariables = Blockly.Variables.allUsedVarModels(workspace) || [];
+  for (const variable of usedVariables) {
+    const varName = variable.name;
+    globals.push(generator.getVariableName(varName));
+  }
+  // Add developer variables.
+  const devVarList = Blockly.Variables.allDeveloperVariables(workspace);
+  for (let i = 0; i < devVarList.length; i++) {
+    globals.push(
+      generator.nameDB_!.getName(
+        devVarList[i],
+        Blockly.Names.NameType.DEVELOPER_VARIABLE,
+      ),
+    );
+  }
+  const globalString = globals.length
+    ? "global " + globals.join(", ") + "\n"
+    : "";
+  return globalString;
+}
diff --git a/packages/app/src/generators/nonebot_alconna.ts b/packages/app/src/generators/nonebot_alconna.ts
index 379cdfd..c493751 100644
--- a/packages/app/src/generators/nonebot_alconna.ts
+++ b/packages/app/src/generators/nonebot_alconna.ts
@@ -3,6 +3,7 @@ import * as Blockly from "blockly/core";
 
 import { AlconnaBlock, AlconnaArgGetBlock } from "@/blocks/nonebot_alconna";
 import { getAlconnaArg } from "@/blocks/fields/alconna_helper";
+import { getGlobalStatement } from "./helper";
 
 export const forBlock = Object.create(null);
 
@@ -11,8 +12,10 @@ forBlock["nonebot_on_alconna"] = function (
   generator: PythonGenerator,
 ) {
   const command = block.getFieldValue("COMMAND");
-  const checkbox_tome = block.getFieldValue("TOME") === "TRUE";
-  const statement_handle =
+  const tomeCheckbox = block.getFieldValue("TOME") === "TRUE";
+  const globalStatement =
+    generator.INDENT + getGlobalStatement(block, generator);
+  const handleStatement =
     generator.statementToCode(block, "HANDLE") || generator.PASS;
   // generator["definitions_"]["from nonebot.adapters import Bot"] = "from nonebot.adapters import Bot";
   // generator["definitions_"]["from nonebot.adapters import Event"] = "from nonebot.adapters import Event";
@@ -20,38 +23,32 @@ forBlock["nonebot_on_alconna"] = function (
     "from nonebot.matcher import Matcher";
   generator["definitions_"]["from nonebot_plugin_alconna import on_alconna"] =
     "from nonebot_plugin_alconna import on_alconna";
-  let tome_statement = "";
-  if (checkbox_tome) {
+  let tomeStatement = "";
+  if (tomeCheckbox) {
     generator["definitions_"]["from nonebot.rule import to_me"] =
       "from nonebot.rule import to_me";
-    tome_statement = ", rule=to_me()";
+    tomeStatement = ", rule=to_me()";
   }
   let args: String[] = [];
-  let args_matcher = "";
-  let args_function = "";
+  let argsMatcher = "";
+  let argsFunction = "";
   for (let n = 0; n < block.itemCount_; n++) {
     const block_type = block
       .getInput("ARG" + String(n))
       ?.connection?.targetConnection?.getSourceBlock().type;
-    const arg_code = generator.valueToCode(
-      block,
-      "ARG" + String(n),
-      Order.NONE,
-    );
+    const argCode = generator.valueToCode(block, "ARG" + String(n), Order.NONE);
     if (block_type === "alconna_const") {
-      args_matcher += ` ${arg_code}`;
+      argsMatcher += ` ${argCode}`;
     } else if (block_type === "alconna_arg") {
-      args_matcher += ` {${arg_code}}`;
-      args_function += `, ${arg_code}`;
+      argsMatcher += ` {${argCode}}`;
+      argsFunction += `, ${argCode}`;
       // get name before `: type`
-      args.push(arg_code.split(":")[0]);
+      args.push(argCode.split(":")[0]);
     }
   }
-  let code = `@on_alconna("${command}${args_matcher}"${tome_statement}).handle()\n`;
+  let code = `@on_alconna("${command}${argsMatcher}"${tomeStatement}).handle()\n`;
   // code += `async def _(matcher: Matcher, bot: Bot, event: Event, message: Annotated[Message, CommandArg()]):\n`;
-  code += `async def _(matcher: Matcher${args_function}):\n`;
-  code += statement_handle;
-  code += "\n";
+  code += `async def _(matcher: Matcher${argsFunction}):\n${globalStatement}${handleStatement}\n`;
   return code;
 };
 
diff --git a/packages/app/src/generators/nonebot_basic.ts b/packages/app/src/generators/nonebot_basic.ts
index 846aa65..d3ecf05 100644
--- a/packages/app/src/generators/nonebot_basic.ts
+++ b/packages/app/src/generators/nonebot_basic.ts
@@ -1,14 +1,18 @@
 import { PythonGenerator, Order } from "blockly/python";
 import * as Blockly from "blockly/core";
 
+import { getGlobalStatement } from "./helper";
+
 export const forBlock = Object.create(null);
 
 forBlock["nonebot_on_message"] = function (
   block: Blockly.Block,
   generator: PythonGenerator,
 ) {
-  const checkbox_tome = block.getFieldValue("TOME") === "TRUE";
-  const statements_handle =
+  const tomeCheckbox = block.getFieldValue("TOME") === "TRUE";
+  const globalStatement =
+    generator.INDENT + getGlobalStatement(block, generator);
+  const handleStatement =
     generator.statementToCode(block, "HANDLE") || generator.PASS;
   generator["definitions_"]["from typing import Annotated"] =
     "from typing import Annotated";
@@ -22,17 +26,15 @@ forBlock["nonebot_on_message"] = function (
     "from nonebot.params import EventMessage";
   generator["definitions_"]["from nonebot.plugin import on_message"] =
     "from nonebot.plugin import on_message";
-  let tome_statement = "";
-  if (checkbox_tome) {
+  let tomeStatement = "";
+  if (tomeCheckbox) {
     generator["definitions_"]["from nonebot.rule import to_me"] =
       "from nonebot.rule import to_me";
-    tome_statement = "rule=to_me()";
+    tomeStatement = "rule=to_me()";
   }
-  let code = `@on_message(${tome_statement}).handle()\n`;
+  let code = `@on_message(${tomeStatement}).handle()\n`;
   // code += `async def _(matcher: Matcher, bot: Bot, event: Event, message: Annotated[Message, EventMessage()]):\n`;
-  code += `async def _(matcher: Matcher, message: Annotated[Message, EventMessage()]):\n`;
-  code += statements_handle;
-  code += "\n";
+  code += `async def _(matcher: Matcher, message: Annotated[Message, EventMessage()]):\n${globalStatement}${handleStatement}\n`;
   return code;
 };
 
@@ -40,9 +42,11 @@ forBlock["nonebot_on_command"] = function (
   block: Blockly.Block,
   generator: PythonGenerator,
 ) {
-  const text_command = block.getFieldValue("COMMAND");
-  const checkbox_tome = block.getFieldValue("TOME") === "TRUE";
-  const statements_handle =
+  const commandText = block.getFieldValue("COMMAND");
+  const tomeCheckbox = block.getFieldValue("TOME") === "TRUE";
+  const globalStatement =
+    generator.INDENT + getGlobalStatement(block, generator);
+  const handleStatement =
     generator.statementToCode(block, "HANDLE") || generator.PASS;
   generator["definitions_"]["from typing import Annotated"] =
     "from typing import Annotated";
@@ -57,16 +61,14 @@ forBlock["nonebot_on_command"] = function (
   generator["definitions_"]["from nonebot.plugin import on_command"] =
     "from nonebot.plugin import on_command";
   let tome_statement = "";
-  if (checkbox_tome) {
+  if (tomeCheckbox) {
     generator["definitions_"]["from nonebot.rule import to_me"] =
       "from nonebot.rule import to_me";
     tome_statement = ", rule=to_me()";
   }
-  let code = `@on_command("${text_command}"${tome_statement}).handle()\n`;
+  let code = `@on_command("${commandText}"${tome_statement}).handle()\n`;
   // code += `async def _(matcher: Matcher, bot: Bot, event: Event, message: Annotated[Message, CommandArg()]):\n`;
-  code += `async def _(matcher: Matcher, message: Annotated[Message, CommandArg()]):\n`;
-  code += statements_handle;
-  code += "\n";
+  code += `async def _(matcher: Matcher, message: Annotated[Message, CommandArg()]):\n${globalStatement}${handleStatement}\n`;
   return code;
 };
 
diff --git a/packages/app/src/generators/nonebot_scheduler.ts b/packages/app/src/generators/nonebot_scheduler.ts
index b25cee9..5da83f0 100644
--- a/packages/app/src/generators/nonebot_scheduler.ts
+++ b/packages/app/src/generators/nonebot_scheduler.ts
@@ -1,28 +1,27 @@
 import { PythonGenerator, Order } from "blockly/python";
 import * as Blockly from "blockly/core";
 
+import { getGlobalStatement } from "./helper";
+
 export const forBlock = Object.create(null);
 
 forBlock["scheduler_add"] = function (
   block: Blockly.Block,
   generator: PythonGenerator,
 ) {
-  const value_time = generator.valueToCode(block, "TIME", Order.ATOMIC);
-  const value_id = generator.valueToCode(block, "ID", Order.ATOMIC);
-  if (
-    value_time === "" ||
-    value_time === "None" ||
-    value_id === "" ||
-    value_id === "None"
-  ) {
+  const time = generator.valueToCode(block, "TIME", Order.ATOMIC);
+  const id = generator.valueToCode(block, "ID", Order.ATOMIC);
+  if (time === "" || time === "None" || id === "" || id === "None") {
     return "";
   }
   generator["definitions_"][
     "from nonebot_plugin_apscheduler import scheduler"
   ] = "from nonebot_plugin_apscheduler import scheduler";
-  const statement_handle =
+  const globalStatement =
+    generator.INDENT + getGlobalStatement(block, generator);
+  const handleStatement =
     generator.statementToCode(block, "HANDLE") || generator.PASS;
-  const code = `@scheduler.scheduled_job(${value_time}, id=${value_id})\nasync def _():\n${statement_handle}\n`;
+  const code = `@scheduler.scheduled_job(${time}, id=${id})\nasync def _():\n${globalStatement}${handleStatement}\n`;
   return code;
 };
 
@@ -30,11 +29,11 @@ forBlock["scheduler_remove"] = function (
   block: Blockly.Block,
   generator: PythonGenerator,
 ) {
-  const value_id = generator.valueToCode(block, "ID", Order.ATOMIC);
+  const id = generator.valueToCode(block, "ID", Order.ATOMIC);
   generator["definitions_"][
     "from nonebot_plugin_apscheduler import scheduler"
   ] = "from nonebot_plugin_apscheduler import scheduler";
-  const code = `scheduler.remove_job(${value_id})\n`;
+  const code = `scheduler.remove_job(${id})\n`;
   return code;
 };
 
diff --git a/packages/app/src/workspace.ts b/packages/app/src/workspace.ts
index 3e76b32..e7c3ca3 100644
--- a/packages/app/src/workspace.ts
+++ b/packages/app/src/workspace.ts
@@ -11,7 +11,7 @@ const version = "v1";
 
 export const workspaceStore = reactive({
   workspace: ref(),
-  startBlocks: ref(),
+  demoProject: ref(),
 });
 
 export const optionsStore = reactive({
@@ -54,14 +54,107 @@ export const outputsStore = reactive({
   snackbarMsg: "" as string,
   snackbarTimeout: 2500 as number,
   snackbarColor: "green" as string,
-  export: {
-    name: "app" as string,
-    preset: { name: "console", description: "控制台机器人" },
-    port: 8080 as number,
-    platform: ["windows", "linux"] as string[],
-  },
 });
 
+export const exportConfig = reactive({
+  name: "app" as string,
+  preset: { name: "console", description: "控制台机器人" },
+  port: 8080 as number,
+  platform: ["windows", "linux"] as string[],
+  commandStart: ["/"] as string[],
+  superusers: [] as string[],
+  kwargs: {} as Record<string, any>,
+});
+
+const windowsScripts = {
+  install: `\
+# Step 1: Check if 'uv' is installed
+$uvVersion = try {
+    uv --version
+} catch {
+    $null
+}
+
+if ($uvVersion) {
+    Write-Host "UV is installed. Version: "
+    Write-Host $uvVersion
+} else {
+    # Step 2: If 'uv' is not installed, ask user for confirmation to install
+    Write-Host "UV is not installed on this system."
+    $confirmation = Read-Host "Do you want to install UV? (Press Enter to confirm or type 'n' to cancel)"
+    
+    if ($confirmation -eq '') {
+        Write-Host "Installing UV..."
+        Invoke-RestMethod https://astral.sh/uv/install.ps1 | Invoke-Expression
+        Write-Host "UV has been installed successfully."
+    } else {
+        Write-Host "Installation canceled."
+        exit
+    }
+}
+
+# Step 3: Create a Python virtual environment
+Write-Host "Creating a Python virtual environment with Python 3.12..."
+uv venv --python 3.12
+
+Write-Host "Python virtual environment created successfully."
+
+# Step 4: Install dependencies
+uv pip install -r pyproject.toml`,
+  run: `\
+$uvVersion = try {
+    uv --version
+} catch {
+    $null
+}
+
+if ($null -eq $uvVersion) {
+    Write-Host "Please run 'install.ps1' first."
+    exit
+}
+
+uv run nb run`,
+};
+
+const linuxScripts = {
+  install: `\
+#!/bin/bash
+
+# Step 1: Check if 'uv' is installed
+if command -v uv &> /dev/null
+then
+    echo "UV is installed. Version info:"
+    uv --version
+else
+    # Step 2: If 'uv' is not installed, ask user for confirmation to install
+    echo "UV is not installed on this system."
+    read -p "Do you want to install UV? (Press Enter to confirm or type 'n' to cancel): " confirmation
+    
+    if [ "$confirmation" == "" ]; then
+        echo "Installing UV..."
+        curl -LsSf https://astral.sh/uv/install.sh | sh
+        echo "UV has been installed successfully."
+    else
+        echo "Installation canceled."
+        exit 1
+    fi
+fi
+
+# Step 3: Create a Python virtual environment
+echo "Creating a Python virtual environment with Python 3.12..."
+uv venv --python 3.12
+
+echo "Python virtual environment created successfully."`,
+  run: `\
+if ! command -v uv &> /dev/null
+then
+    echo "Please run 'install.sh' first"
+    exit
+fi
+
+uv run nb run`,
+};
+
 export function setWorkspaceTheme(theme: string) {
   let workspace = Blockly.getMainWorkspace();
   if (theme === "LightTheme") {
@@ -78,8 +171,12 @@ export function setWorkspaceTheme(theme: string) {
 export function saveJson() {
   const workspace = Blockly.getMainWorkspace();
   const data = Blockly.serialization.workspaces.save(workspace);
-  const json = JSON.stringify({ version: version, data: data });
-  localStorage.setItem("NoneBlockly", json);
+  const project = JSON.stringify({
+    version: version,
+    data: data,
+    config: exportConfig,
+  });
+  localStorage.setItem("NoneBlockly", project);
   outputsStore.snackbarColor = "green";
   outputsStore.snackbarMsg = "🤗 工作区已暂存";
   outputsStore.snackbar = true;
@@ -89,9 +186,10 @@ export function loadJson() {
   const workspace = Blockly.getMainWorkspace();
   const savedData = localStorage.getItem("NoneBlockly");
   if (savedData) {
-    const json = JSON.parse(savedData);
-    if (json.version === version) {
-      Blockly.serialization.workspaces.load(json.data, workspace);
+    const project = JSON.parse(savedData);
+    if (project.version === version) {
+      Blockly.serialization.workspaces.load(project.data, workspace);
+      Object.assign(exportConfig, project.config);
       outputsStore.snackbarColor = "green";
       outputsStore.snackbarMsg = "🥰 已恢复暂存工作区";
       outputsStore.snackbar = true;
@@ -107,9 +205,13 @@ export function loadJson() {
 }
 
 export function initWorkspaceState() {
-  let startBlocks = workspaceStore.startBlocks;
-  let workspace = Blockly.getMainWorkspace();
-  Blockly.serialization.workspaces.load(startBlocks, workspace);
+  const workspace = Blockly.getMainWorkspace();
+  const demoProject = workspaceStore.demoProject;
+  Blockly.serialization.workspaces.load(demoProject.data, workspace);
+  Object.assign(exportConfig, demoProject.config);
+  outputsStore.snackbarColor = "green";
+  outputsStore.snackbarMsg = "🥰 已加载工程示例";
+  outputsStore.snackbar = true;
   outputsStore.activeTab = "tab-0";
 }
 
@@ -149,132 +251,120 @@ function generatePyproject(code: string, preset: string) {
     dependencies.add("nonebot-adapter-onebot>=2.4.5");
   }
   return `\
-    [project]
-    name = "noneblockly-app"
-    version = "0.1.0"
-    description = "NoneBot project generated by NoneBlockly"
-    authors = [{name = "name", email = "name@example.com"}]
-    dependencies = [
-        ${Array.from(dependencies)
-          .map((dep) => `"${dep}"`)
-          .join(", \n")}
-    ]
-    requires-python = ">=3.9"
-    license = {text = "MIT"}
+[project]
+name = "noneblockly-app"
+version = "0.1.0"
+description = "NoneBot project generated by NoneBlockly"
+authors = [{name = "name", email = "name@example.com"}]
+dependencies = [
+    ${Array.from(dependencies)
+      .map((dep) => `"${dep}"`)
+      .join(", \n")}
+]
+requires-python = ">=3.9"
+license = {text = "MIT"}
 
-    [tool.nonebot]
-    adapters = [
-        { name = "Console", module_name = "nonebot.adapters.console" }
-    ]
-    plugin_dirs = ["plugins"]`;
+[tool.nonebot]
+adapters = [
+    ${adapters}
+]
+plugin_dirs = ["plugins"]`;
 }
 
-function generateEnv(port: number) {
+function generateInit(code: string) {
+  const plugins = new Set<string>();
+  const importLines = code.split("\n\n")[0].split("\n");
+  importLines.forEach((line) => {
+    if (line.startsWith("from nonebot_plugin_alconna")) {
+      plugins.add("nonebot_plugin_alconna");
+    } else if (line.startsWith("from nonebot_plugin_apscheduler")) {
+      plugins.add("nonebot_plugin_apscheduler");
+    } else if (line.startsWith("import nonebot_plugin_localstore")) {
+      plugins.add("nonebot_plugin_localstore");
+    }
+  });
   return `\
-    DRIVER=~fastapi+~httpx+~websockets
-    PORT=${port}`;
+from nonebot import require
+${Array.from(plugins)
+  .map((plugin) => `require("${plugin}")`)
+  .join("\n")}
+from .app import * # noqa`;
 }
 
-const windowsScripts = {
-  install: `\
-    # Step 1: Check if 'uv' is installed
-    $uvVersion = try {
-        uv --version
-    } catch {
-        $null
-    }
-
-    if ($uvVersion) {
-        Write-Host "UV is installed. Version: "
-        Write-Host $uvVersion
-    } else {
-        # Step 2: If 'uv' is not installed, ask user for confirmation to install
-        Write-Host "UV is not installed on this system."
-        $confirmation = Read-Host "Do you want to install UV? (Press Enter to confirm or type 'n' to cancel)"
-        
-        if ($confirmation -eq '') {
-            Write-Host "Installing UV..."
-            Invoke-RestMethod https://astral.sh/uv/install.ps1 | Invoke-Expression
-            Write-Host "UV has been installed successfully."
-        } else {
-            Write-Host "Installation canceled."
-            exit
-        }
-    }
-
-    # Step 3: Create a Python virtual environment
-    Write-Host "Creating a Python virtual environment with Python 3.12..."
-    uv venv --python 3.12
-
-    Write-Host "Python virtual environment created successfully."
+function generateEnv(config: typeof exportConfig) {
+  let commandStart = "";
+  let superusers = "";
+  if (config.commandStart.length > 0) {
+    // quote strings
+    const items = config.commandStart.map((item) => JSON.stringify(item));
+    commandStart = `COMMAND_START=[${items.join(",")}]\n`;
+  }
+  if (config.superusers.length > 0) {
+    const items = config.superusers.map((item) => JSON.stringify(item));
+    superusers = `SUPERUSERS=[${items.join(",")}]\n`;
+  }
+  return `\
+DRIVER=~fastapi+~httpx+~websockets
+PORT=${config.port || 8080}
+${commandStart}${superusers}`;
+}
 
-    # Step 4: Install dependencies
-    uv pip install -r pyproject.toml`,
-  run: `\
-    $uvVersion = try {
-        uv --version
-    } catch {
-        $null
-    }
+export function exportProject() {
+  const workspace = Blockly.getMainWorkspace();
+  const data = Blockly.serialization.workspaces.save(workspace);
+  const project = JSON.stringify({
+    version: version,
+    data: data,
+    config: exportConfig,
+  });
+  const blob = new Blob([project], { type: "application/json" });
+  const jsonObjectUrl = URL.createObjectURL(blob);
+  const filename = `${exportConfig.name}.json`;
+  const anchor = document.createElement("a");
+  anchor.href = jsonObjectUrl;
+  anchor.download = filename;
+  anchor.click();
+  URL.revokeObjectURL(jsonObjectUrl);
+  outputsStore.snackbarColor = "green";
+  outputsStore.snackbarMsg = "🤗 已导出设计文件";
+  outputsStore.snackbar = true;
+}
 
-    if ($null -eq $uvVersion) {
-        Write-Host "Please run 'install.ps1' first."
-        exit
+export function importProject(event: any) {
+  const file = event.target.files[0];
+  const reader = new FileReader();
+  reader.onload = function (e) {
+    const project = JSON.parse(e.target?.result as string);
+    if (project.version === version) {
+      Blockly.getMainWorkspace().clear();
+      Blockly.serialization.workspaces.load(
+        project.data,
+        Blockly.getMainWorkspace(),
+      );
+      Object.assign(exportConfig, project.config);
+      outputsStore.snackbarColor = "green";
+      outputsStore.snackbarMsg = "🥰 已导入设计文件";
+      outputsStore.snackbar = true;
+    } else {
+      outputsStore.snackbarColor = "warning";
+      outputsStore.snackbarMsg = "❌ 无法识别选择的文件";
+      outputsStore.snackbar = true;
     }
-
-    uv run nb run`,
-};
-
-const linuxScripts = {
-  install: `\
-    #!/bin/bash
-
-    # Step 1: Check if 'uv' is installed
-    if command -v uv &> /dev/null
-    then
-        echo "UV is installed. Version info:"
-        uv --version
-    else
-        # Step 2: If 'uv' is not installed, ask user for confirmation to install
-        echo "UV is not installed on this system."
-        read -p "Do you want to install UV? (Press Enter to confirm or type 'n' to cancel): " confirmation
-        
-        if [ "$confirmation" == "" ]; then
-            echo "Installing UV..."
-            curl -LsSf https://astral.sh/uv/install.sh | sh
-            echo "UV has been installed successfully."
-        else
-            echo "Installation canceled."
-            exit 1
-        fi
-    fi
-
-    # Step 3: Create a Python virtual environment
-    echo "Creating a Python virtual environment with Python 3.12..."
-    uv venv --python 3.12
-
-    echo "Python virtual environment created successfully."`,
-  run: `\
-    if ! command -v uv &> /dev/null
-    then
-        echo "Please run 'install.sh' first"
-        exit
-    fi
-
-    uv run nb run`,
-};
+  };
+  reader.readAsText(file);
+}
 
 export function exportZip() {
   let zip = new JSZip();
-  let workspace = Blockly.getMainWorkspace();
-  let code = pythonGenerator.workspaceToCode(workspace);
-  zip.file("plugins/plugin_exported.py", code);
-  zip.file(
-    "pyproject.toml",
-    generatePyproject(code, outputsStore.export.preset.name),
-  );
-  zip.file(".env.prod", generateEnv(outputsStore.export.port));
-  outputsStore.export.platform.forEach((platform) => {
+  const workspace = Blockly.getMainWorkspace();
+  const code = pythonGenerator.workspaceToCode(workspace);
+  const config = exportConfig;
+  console.log(config);
+  zip.file(`plugins/plugin_${config.name}/__init__.py`, generateInit(code));
+  zip.file(`plugins/plugin_${config.name}/app.py`, code);
+  zip.file("pyproject.toml", generatePyproject(code, config.preset.name));
+  zip.file(".env.prod", generateEnv(config));
+  config.platform.forEach((platform) => {
     if (platform === "windows") {
       zip.file("install.ps1", windowsScripts.install);
       zip.file("run.ps1", windowsScripts.run);
@@ -287,6 +377,6 @@ export function exportZip() {
   outputsStore.snackbarMsg = "😎 已导出 Python 项目";
   outputsStore.snackbar = true;
   zip.generateAsync({ type: "blob" }).then(function (content) {
-    saveAs(content, `${outputsStore.export.name}.zip`);
+    saveAs(content, `${config.name}.zip`);
   });
 }