✨ 新手引导

package.json

@@ -28,21 +28,22 @@
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.4",
     "dexie": "^3.2.3",
-    "i18next": "^22.5.0",
+    "i18next": "^23.4.4",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.37.1",
     "monaco-vim": "^0.3.4",
     "pako": "^2.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^12.3.1",
+    "react-i18next": "^13.1.0",
     "react-icons": "^4.4.0",
+    "react-joyride": "^2.5.5",
     "react-router-dom": "^6.3.0",
     "semver": "^7.3.8",
     "unocss": "^0.51.2",
     "uuid": "^8.3.2",
-    "webdav": "^4.11.0",
+    "webdav": "^5.2.3",
     "yaml": "^2.1.1"
   },
   "devDependencies": {
@@ -92,13 +93,14 @@
     "progress-bar-webpack-plugin": "^2.1.0",
     "raw-loader": "^4.0.2",
     "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.9",
     "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1",
     "typescript": "^4.7.4",
-    "webpack": "^5.73.0",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-merge": "^5.8.0",
+    "webpack": "^5.88.2",
+    "webpack-bundle-analyzer": "^4.9.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-merge": "^5.9.0",
     "yaml-loader": "^0.8.0"
   }
 }

pkg/filesystem/webdav/webdav.ts

@@ -1,4 +1,4 @@
-import { AuthType, createClient, FileStat, WebDAVClient } from "webdav/web";
+import { AuthType, createClient, FileStat, WebDAVClient } from "webdav";
 import FileSystem, { File, FileReader, FileWriter } from "../filesystem";
 import { joinPath } from "../utils";
 import { WebDAVFileReader, WebDAVFileWriter } from "./rw";

src/locales/en-US/translation.yaml

@@ -20,6 +20,9 @@ subscribe: Subscribe
 logs: Logs
 tools: Tools
 settings: Settings
+collapsible: Collapsible Sidebar
+guide: Guide
+helpcenter: Help Center
 
 # Setting Page Setting
 general: General
@@ -350,3 +353,30 @@ auth_type: Authentication Type
 url: URL
 username: Username
 password: Password
+
+# Beginner's Guide
+skip: Skip
+next: Next
+back: Back
+last: Finish
+start_guide_title: Welcome to ScriptCat Extension
+start_guide_content: Next, we will introduce the basic usage of ScriptCat to you.
+guide_installed_scripts: The scripts you have installed will be displayed here.
+guide_script_list_title: Script Market
+guide_script_list_content: You can install scripts from the <Link href="https://scriptcat.org/search">Script Market</Link>. In addition to supporting user scripts, ScriptCat also supports <Link href="https://docs.scriptcat.org/docs/dev/backgroud/">background scripts</Link>.
+guide_script_list_enable_title: Enable Scripts
+guide_script_list_enable_content: Scripts need to be enabled to be used. Page scripts are enabled by default upon installation, while background scripts are disabled by default.
+guide_script_list_apply_to_run_status_title: Apply to and Run Status
+guide_script_list_apply_to_run_status_content: The running status of scripts is displayed here. Hover over the tags to view the script type.
+guide_script_list_sort_title: Sort/Last Update/Actions
+guide_script_list_sort_content: You can drag the tags of scripts to sort them. Clicking on the "Last Update" column label will check for updates once. The "Actions" column allows you to enter script editing, control script running/stopping (for background scripts), and configure <Link href="https://docs.scriptcat.org/docs/dev/config/">UserConfig</Link>.
+
+guide_tools_title: Common Tools
+guide_tools_content: The tools provide backup and development features.
+guide_tools_backup_title: Backup
+guide_tools_backup_content: Backup allows you to save scripts to avoid loss. You can export script files to your local machine or load script files from your local machine. You can also back up to the cloud for added convenience.
+
+guide_setting_title: Settings
+guide_setting_content: The settings mainly include language, script synchronization, update frequency, and other common options.
+guide_setting_sync_title: Update and Sync
+guide_setting_sync_content: The script synchronization feature allows you to easily sync the script content of this device to the cloud. If you select the option to sync deletions, when a script is deleted on this device, it will also be deleted from the cloud. You can also update the script version here to get more powerful features.

src/locales/locales.ts

@@ -1,11 +1,11 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import dayjs from "dayjs";
-import "dayjs/locale/zh-cn";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { Metadata } from "@App/app/repo/scripts";
 import enUS from "./en-US/translation.yaml";
 import zhCN from "./zh-CN/translation.yaml";
+import "dayjs/locale/zh-cn";
 
 i18n.use(initReactI18next).init({
   fallbackLng: "zh-CN",

src/locales/zh-CN/translation.yaml

@@ -20,6 +20,9 @@ subscribe: 订阅
 logs: 日志
 tools: 工具
 settings: 设置
+collapsible: 收起侧边栏
+guide: 新手指引
+helpcenter: 帮助中心
 
 # 设置页 Setting
 general: 通用
@@ -351,3 +354,30 @@ auth_type: 鉴权类型
 url: URL
 username: 用户名
 password: 密码
+
+# 新手指引
+skip: 跳过
+next: 下一步
+back: 上一步
+last: 完成
+start_guide_title: 欢迎使用脚本猫扩展
+start_guide_content: 接下来我们将为您介绍脚本猫的基本使用方法
+guide_installed_scripts: 你所安装的脚本将会在这里显示
+guide_script_list_title: 脚本市场
+guide_script_list_content: 可以从<Link href="https://scriptcat.org/search">脚本市场</Link>中安装脚本，脚本猫除了支持用户脚本以外，还支持<Link href="https://docs.scriptcat.org/docs/dev/backgroud/">后台脚本</Link>
+guide_script_list_enable_title: 脚本开启
+guide_script_list_enable_content: 脚本需要开启才能使用，页面脚本安装默认开启，后台脚本安装默认关闭
+guide_script_list_apply_to_run_status_title: 应用至、与运行状态
+guide_script_list_apply_to_run_status_content: 脚本运行状态展示，鼠标悬浮至标签可以查看脚本类型
+guide_script_list_sort_title: 排序/最后更新/操作
+guide_script_list_sort_content: 你可以拖动脚本的标签进行排序，点击最后更新列标签可以对脚本进行一次检查更新，操作列可以进入脚本编辑、控制脚本的运行停止（后台脚本）、设置<Link href="https://docs.scriptcat.org/docs/dev/config/">UserConfig</Link>
+
+guide_tools_title: 常用工具
+guide_tools_content: 工具中提供了备份和开发的工具
+guide_tools_backup_title: 备份
+guide_tools_backup_content: 备份可以保存脚本，避免丢失。可以导出脚本文件到本地，也可以加载本地的脚本文件。也可以备份到云端，更加方便。
+
+guide_setting_title: 设置
+guide_setting_content: 设置中主要包含了语言、脚本同步、更新频率等常用设置项
+guide_setting_sync_title: 更新与同步
+guide_setting_sync_content: 脚本同步功能可以方便的将本设备的脚本内容同步至云端，如果勾选同步删除选项，则当本设备脚本删除时，也会从删除云端对应的脚本。你也可以在此更新脚本的版本获得更加强大的功能。

src/pages/components/index.tsx

@@ -1,4 +1,6 @@
+import { Link } from "@arco-design/web-react";
 import React, { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
 const CustomLink: React.FC<{
@@ -38,4 +40,48 @@ const CustomLink: React.FC<{
   );
 };
 
+// 因为i18n的Trans组件打包后出现问题，所以自己实现一个
+export const CustomTrans: React.FC<{
+  i18nKey: string;
+}> = ({ i18nKey }) => {
+  const { t } = useTranslation();
+  // eslint-disable-next-line no-undef
+  const children: (JSX.Element | string)[] = [];
+  let content = t(i18nKey);
+  for (;;) {
+    const i = content.indexOf("<");
+    if (i !== -1) {
+      children.push(content.substring(0, i));
+      const end = content.indexOf(">", i);
+      const key = content.substring(i + 1, end).split(" ")[0];
+      const tag = content.substring(i, end + 1);
+      const tagEnd = content.indexOf(`</${key}>`, end);
+      const element = content.substring(
+        end + 1,
+        content.indexOf(`</${key}>`, end)
+      );
+      switch (key) {
+        case "Link":
+          // eslint-disable-next-line no-case-declarations
+          const href = tag.match(/href="(.*)"/)![1];
+          children.push(
+            <Link key={`i${i}`} href={href} target="_black">
+              {element}
+            </Link>
+          );
+          break;
+        default:
+          children.push(element);
+          break;
+      }
+      content = content.substring(tagEnd + key.length + 3);
+    } else {
+      children.push(content);
+      break;
+    }
+  }
+
+  return <div>{children}</div>;
+};
+
 export default CustomLink;

src/pages/components/layout/MainLayout.tsx

@@ -17,7 +17,6 @@ import { RefInputType } from "@arco-design/web-react/es/Input/interface";
 import {
   IconDesktop,
   IconDown,
-  IconGithub,
   IconLink,
   IconMoonFill,
   IconSunFill,
@@ -28,7 +27,6 @@ import {
   RiFileCodeLine,
   RiTerminalBoxLine,
   RiTimerLine,
-  RiLinkM,
   RiPlayListAddLine,
 } from "react-icons/ri";
 import "./index.css";
@@ -157,83 +155,6 @@ const MainLayout: React.FC<{
                 </Button>
               </Dropdown>
             )}
-            {pageName === "options" && (
-              <Dropdown
-                droplist={
-                  // 取消最大高度限制防止内容过多出现滚动条 / 增加10px宽度提升美观  下同
-                  <Menu
-                    style={{ maxHeight: "100%", width: "calc(100% + 10px)" }}
-                  >
-                    <Menu.Item key="scriptcat/docs/use/">
-                      <a
-                        href="https://docs.scriptcat.org/docs/use/"
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        <RiFileCodeLine /> {t("user_guide")}
-                      </a>
-                    </Menu.Item>
-                    <Menu.Item key="scriptcat/docs/dev/">
-                      <a
-                        href="https://docs.scriptcat.org/docs/dev/"
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        <RiFileCodeLine /> {t("api_docs")}
-                      </a>
-                    </Menu.Item>
-                    <Menu.Item key="scriptcat/docs/learn/">
-                      <a
-                        href="https://learn.scriptcat.org/docs/%E7%AE%80%E4%BB%8B/"
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        <RiFileCodeLine /> {t("development_guide")}
-                      </a>
-                    </Menu.Item>
-                    <Menu.Item key="scriptcat/userscript">
-                      <a
-                        href="https://scriptcat.org/search"
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        <IconLink /> {t("script_gallery")}
-                      </a>
-                    </Menu.Item>
-                    <Menu.Item key="tampermonkey/bbs">
-                      <a
-                        href="https://bbs.tampermonkey.net.cn/"
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        <IconLink /> {t("community_forum")}
-                      </a>
-                    </Menu.Item>
-                    <Menu.Item key="GitHub">
-                      <a
-                        href="https://github.com/scriptscat/scriptcat"
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        <IconGithub /> GitHub
-                      </a>
-                    </Menu.Item>
-                  </Menu>
-                }
-                position="bl"
-              >
-                <Button
-                  type="text"
-                  size="small"
-                  style={{
-                    color: "var(--color-text-1)",
-                  }}
-                  className="!text-size-sm"
-                >
-                  <RiLinkM /> {t("external_links")} <IconDown />
-                </Button>
-              </Dropdown>
-            )}
             <Dropdown
               droplist={
                 <Menu