✨ Improve import and export functions and example

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_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>

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>