✨ Enhanced project import and export support

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;
 

packages/app/src/blocks/nonebot_request.ts

@@ -34,6 +34,7 @@ export const definitions: BlockDefinition[] = [
         name: "TYPE",
         options: [
           ["字典", "dict"],
+          ["列表", "list"],
           ["文本", "string"],
           ["二进制", "binary"],
         ],
@@ -90,7 +91,7 @@ export const definitions: BlockDefinition[] = [
       },
       {
         type: "input_value",
-        name: "HEADER",
+        name: "HEADERS",
         align: "RIGHT",
         check: "dict",
       },
@@ -99,6 +100,7 @@ export const definitions: BlockDefinition[] = [
         name: "TYPE",
         options: [
           ["字典", "dict"],
+          ["列表", "list"],
           ["文本", "string"],
           ["二进制", "binary"],
         ],

packages/app/src/blocks/nonebot_scheduler.ts

@@ -28,8 +28,6 @@ export const definitions: BlockDefinition[] = [
         name: "HANDLE",
       },
     ],
-    previousStatement: null,
-    nextStatement: null,
     colour: 210,
   },
   {

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";

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,36 +72,55 @@ 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
           ></v-select>
         </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
           ></v-checkbox>
         </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>