✨ 新建脚本支持导入本地文件 #294

scriptscat · Jul 8, 2024 · faeb30c · faeb30c
1 parent 8a05f00
commit faeb30c
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^13.1.0",
-    "react-icons": "^4.4.0",
+    "react-icons": "^5.2.1",
     "react-joyride": "^2.5.5",
     "react-router-dom": "^6.3.0",
     "semver": "^7.3.8",

diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
@@ -4,6 +4,9 @@
   "create_user_script": "新建普通脚本",
   "create_background_script": "新建后台脚本",
   "create_scheduled_script": "新建定时脚本",
+  "import_by_local": "本地导入",
+  "import_local_failure": "本地导入失败",
+  "import_local_success": "本地导入成功",
   "create_script": "新建脚本",
   "user_guide": "使用指南",
   "api_docs": "API文档",
@@ -354,4 +357,4 @@
   "resize_column_width": "调整列宽",
   "collapse": "收起",
   "expand": "展开"
-}
+}
diff --git a/src/pages/components/layout/MainLayout.tsx b/src/pages/components/layout/MainLayout.tsx
@@ -28,6 +28,7 @@ import {
   RiTerminalBoxLine,
   RiTimerLine,
   RiPlayListAddLine,
+  RiImportLine,
 } from "react-icons/ri";
 import "./index.css";
 import { useTranslation } from "react-i18next";
@@ -131,6 +132,50 @@ const MainLayout: React.FC<{
                         <RiTimerLine /> {t("create_scheduled_script")}
                       </a>
                     </Menu.Item>
+                    <Menu.Item
+                      key="import_local"
+                      onClick={() => {
+                        const el = document.getElementById("import-local");
+                        el!.onchange = (e: Event) => {
+                          const scriptCtl = IoC.instance(
+                            ScriptController
+                          ) as ScriptController;
+                          try {
+                            // 获取文件
+                            // @ts-ignore
+                            const file = e.target.files[0];
+                            // 实例化 FileReader对象
+                            const reader = new FileReader();
+                            reader.onload = async (processEvent) => {
+                              // 创建blob url
+                              const blob = new Blob(
+                                // @ts-ignore
+                                [processEvent.target!.result],
+                                {
+                                  type: "application/javascript",
+                                }
+                              );
+                              const url = URL.createObjectURL(blob);
+                              await scriptCtl.importByUrl(url);
+                              Message.success(t("import_local_success"));
+                            };
+                            // 调用readerAsText方法读取文本
+                            reader.readAsText(file);
+                          } catch (error) {
+                            Message.error(`${t("import_local_failure")}: ${e}`);
+                          }
+                        };
+                        el!.click();
+                      }}
+                    >
+                      <input
+                        id="import-local"
+                        type="file"
+                        style={{ display: "none" }}
+                        accept=".js"
+                      />
+                      <RiImportLine /> {t("import_by_local")}
+                    </Menu.Item>
                     <Menu.Item
                       key="link"
                       onClick={() => {