✨ 卡片模式引导 (#894)

* wip: 卡片视图引导

* 卡片模式引导

* 翻译

* Update src/locales/en-US/translation.json

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: CodFrm

src/locales/ach-UG/translation.json

@@ -384,8 +384,12 @@
   "guide_script_list_enable_content": "crwdns8570:0crwdne8570:0",
   "guide_script_list_apply_to_run_status_title": "crwdns8572:0crwdne8572:0",
   "guide_script_list_apply_to_run_status_content": "crwdns8574:0crwdne8574:0",
-  "guide_script_list_sort_title": "crwdns8576:0crwdne8576:0",
-  "guide_script_list_sort_content": "crwdns8578:0crwdne8578:0",
+  "guide_script_list_sort_title": "crwdns12858:0crwdne12858:0",
+  "guide_script_list_sort_content": "crwdns12860:0crwdne12860:0",
+  "guide_script_list_update_title": "crwdns12862:0crwdne12862:0",
+  "guide_script_list_update_content": "crwdns12864:0crwdne12864:0",
+  "guide_script_list_action_title": "crwdns12866:0crwdne12866:0",
+  "guide_script_list_action_content": "crwdns12868:0crwdne12868:0",
   "guide_tools_title": "crwdns8580:0crwdne8580:0",
   "guide_tools_content": "crwdns8582:0crwdne8582:0",
   "guide_tools_backup_title": "crwdns8584:0crwdne8584:0",
@@ -533,5 +537,6 @@
     "script_sync_delete_desc": "crwdns12852:0{{scriptName}}crwdne12852:0",
     "subscribe_update": "crwdns12854:0{{subscribeName}}crwdne12854:0",
     "subscribe_update_desc": "crwdns12856:0{{newScripts}}crwdnd12856:0{{deletedScripts}}crwdne12856:0"
-  }
+  },
+  "loading": "crwdns12870:0crwdne12870:0"
 }

src/locales/de-DE/translation.json

@@ -384,8 +384,12 @@
   "guide_script_list_enable_content": "Skripte müssen aktiviert werden, um verwendet zu werden. Seitenskripte sind bei der Installation standardmäßig aktiviert, Hintergrundskripte sind bei der Installation standardmäßig deaktiviert",
   "guide_script_list_apply_to_run_status_title": "Anwenden auf und Ausführungsstatus",
   "guide_script_list_apply_to_run_status_content": "Zeigt den Ausführungsstatus von Skripten an. Bewegen Sie die Maus über das Tag, um den Skripttyp zu sehen",
-  "guide_script_list_sort_title": "Sortierung/Letzte Aktualisierung/Operation",
-  "guide_script_list_sort_content": "Sie können Skript-Tags durch Ziehen sortieren. Klicken Sie auf das Tag der letzten Aktualisierung, um eine Update-Überprüfung für das Skript durchzuführen. Die Operationsspalte ermöglicht Skript-Bearbeitung, Steuerung der Skript-Ausführung/Stopp (Hintergrundskripte), Einstellung von <Link href=\"https://docs.scriptcat.org/docs/dev/config/\">UserConfig</Link>",
+  "guide_script_list_sort_title": "Sortierung",
+  "guide_script_list_sort_content": "Sie können die Skriptbezeichnungen per Drag & Drop sortieren.",
+  "guide_script_list_update_title": "Zuletzt aktualisiert",
+  "guide_script_list_update_content": "Durch Klicken auf die Spaltenüberschrift „Zuletzt aktualisiert“ wird geprüft, ob es Aktualisierungen des Skripts gibt.",
+  "guide_script_list_action_title": "Aktion",
+  "guide_script_list_action_content": "Die Bedienleiste ermöglicht den Zugriff auf die Skriptbearbeitung, die Steuerung der Skriptausführung und -beendigung (Hintergrundskripte) sowie auf die Einstellungen (siehe <Link href=\"https://docs.scriptcat.org/en/docs/dev/config/\">UserConfig</Link>). Über die Schaltflächen auf der rechten Seite können Sie auf erweiterte Filterfunktionen zugreifen und zwischen verschiedenen Ansichtsmodi wechseln.",
   "guide_tools_title": "Häufig verwendete Werkzeuge",
   "guide_tools_content": "Werkzeuge bieten Backup- und Entwicklungstools",
   "guide_tools_backup_title": "Backup",
@@ -533,5 +537,6 @@
     "script_sync_delete_desc": "Skript {{scriptName}} wurde gelöscht",
     "subscribe_update": "Abonnement {{subscribeName}} wurde aktualisiert",
     "subscribe_update_desc": "Neue Skripte: {{newScripts}}\nGelöschte Skripte: {{deletedScripts}}"
-  }
+  },
+  "loading": "Wird geladen..."
 }

src/locales/en-US/translation.json

@@ -1,7 +1,7 @@
 {
   "import_link": "Link Import",
   "import_link_failure": "Link Import Failed",
-  "create_user_script": "Create UserScript",
+  "create_user_script": "Create User Script",
   "create_background_script": "Create Background Script",
   "create_scheduled_script": "Create Scheduled Script",
   "import_by_local": "Local Import",
@@ -384,8 +384,12 @@
   "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_script_list_sort_title": "Sort",
+  "guide_script_list_sort_content": "You can drag the tag of the script to sort",
+  "guide_script_list_update_title": "Last Updated",
+  "guide_script_list_update_content": "Click the last update column label to check for updates to the script",
+  "guide_script_list_action_title": "Action",
+  "guide_script_list_action_content": "The operation bar allows access to script editing, control script execution and termination (background scripts), and settings (see <Link href=\"https://docs.scriptcat.org/en/docs/dev/config/\">UserConfig</Link>). The buttons on the right allow access to advanced filtering and toggling view modes.",
   "guide_tools_title": "Common Tools",
   "guide_tools_content": "The tools provide backup and development features.",
   "guide_tools_backup_title": "Backup",

src/locales/ja-JP/translation.json

@@ -384,8 +384,12 @@
   "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_script_list_sort_title": "ソート",
+  "guide_script_list_sort_content": "スクリプトをドラッグして順番を付ける事ができます。",
+  "guide_script_list_update_title": "最終更新",
+  "guide_script_list_update_content": "「最終更新」列ラベルをクリックすると、スクリプトの更新がチェックされます。",
+  "guide_script_list_action_title": "アクション",
+  "guide_script_list_action_content": "操作バーでは、スクリプトの編集、制御スクリプトの実行と終了（バックグラウンドスクリプト）、および設定（<Link href=\"https://docs.scriptcat.org/en/docs/dev/config/\">UserConfig</Link> を参照）にアクセスできます。右側のボタンからは、高度なフィルタリングや表示モードの切り替えにアクセスできます。",
   "guide_tools_title": "常用ツール",
   "guide_tools_content": "ツールにはバックアップと開発のツールが提供されています",
   "guide_tools_backup_title": "バックアップ",
@@ -533,5 +537,6 @@
     "script_sync_delete_desc": "スクリプト {{scriptName}} が削除されました",
     "subscribe_update": "サブスクリプション {{subscribeName}} が更新されました",
     "subscribe_update_desc": "新しいスクリプト: {{newScripts}}\n削除されたスクリプト: {{deletedScripts}}"
-  }
+  },
+  "loading": "読み込み中..."
 }

src/locales/ru-RU/translation.json

@@ -384,8 +384,12 @@
   "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_script_list_sort_title": "Сортировка",
+  "guide_script_list_sort_content": "Вы можете перетаскивать метки сценариев, чтобы сортировать их.",
+  "guide_script_list_update_title": "Последнее обновление",
+  "guide_script_list_update_content": "При нажатии на заголовок столбца «Последнее обновление» будет выполнена проверка наличия обновлений для скрипта.",
+  "guide_script_list_action_title": "Действие",
+  "guide_script_list_action_content": "Панель управления позволяет редактировать скрипты, управлять их выполнением и завершением (фоновые скрипты), а также настраивать параметры (см. <Link href=\"https://docs.scriptcat.org/en/docs/dev/config/\">UserConfig</Link>). Кнопки справа позволяют получить доступ к расширенной фильтрации и переключать режимы просмотра.",
   "guide_tools_title": "Часто используемые инструменты",
   "guide_tools_content": "В инструментах предоставлены функции резервного копирования и разработки",
   "guide_tools_backup_title": "Резервное копирование",
@@ -533,5 +537,6 @@
     "script_sync_delete_desc": "Скрипт {{scriptName}} был удален",
     "subscribe_update": "Подписка {{subscribeName}} была обновлена",
     "subscribe_update_desc": "Новые скрипты: {{newScripts}}\nУдаленные скрипты: {{deletedScripts}}"
-  }
+  },
+  "loading": "Загрузка..."
 }

src/locales/vi-VN/translation.json

@@ -384,8 +384,12 @@
   "guide_script_list_enable_content": "Script cần được bật để sử dụng. Script trang được bật theo mặc định khi cài đặt, trong khi script nền bị tắt theo mặc định.",
   "guide_script_list_apply_to_run_status_title": "Áp dụng cho và trạng thái chạy",
   "guide_script_list_apply_to_run_status_content": "Trạng thái chạy của script được hiển thị ở đây. Di chuột qua các thẻ để xem loại script.",
-  "guide_script_list_sort_title": "Sắp xếp/cập nhật lần cuối/hành động",
-  "guide_script_list_sort_content": "Bạn có thể kéo các thẻ của script để sắp xếp chúng. Nhấp vào nhãn cột \"cập nhật lần cuối\" sẽ kiểm tra cập nhật một lần. Cột \"hành động\" cho phép bạn vào chỉnh sửa script, kiểm soát việc chạy/dừng script (đối với script nền) và cấu hình <Link href=\"https://docs.scriptcat.org/docs/dev/config/\">userconfig</Link>.",
+  "guide_script_list_sort_title": "Sắp xếp",
+  "guide_script_list_sort_content": "Bạn có thể kéo nhãn tập lệnh để sắp xếp chúng.",
+  "guide_script_list_update_title": "Cập nhật lần cuối",
+  "guide_script_list_update_content": "Nhấp vào nhãn cột \"Cập nhật lần cuối\" sẽ thực hiện kiểm tra các bản cập nhật cho tập lệnh.",
+  "guide_script_list_action_title": "Thao tác",
+  "guide_script_list_action_content": "Thanh thao tác cho phép truy cập vào chức năng chỉnh sửa tập lệnh, kiểm soát việc thực thi và kết thúc tập lệnh (tập lệnh nền) và cài đặt (xem <Link href=\"https://docs.scriptcat.org/en/docs/dev/config/\">UserConfig</Link>). Các nút bên phải cho phép truy cập vào chức năng lọc nâng cao và chuyển đổi chế độ xem.",
   "guide_tools_title": "Công cụ chung",
   "guide_tools_content": "Các công cụ cung cấp tính năng sao lưu và phát triển.",
   "guide_tools_backup_title": "Sao lưu",
@@ -533,5 +537,6 @@
     "script_sync_delete_desc": "Script {{scriptName}} đã bị xóa",
     "subscribe_update": "Đăng ký {{subscribeName}} đã được cập nhật",
     "subscribe_update_desc": "Script mới: {{newScripts}}\nScript đã xóa: {{deletedScripts}}"
-  }
+  },
+  "loading": "Đang tải..."
 }

src/locales/zh-CN/translation.json

@@ -384,8 +384,12 @@
   "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_script_list_sort_title": "排序",
+  "guide_script_list_sort_content": "你可以拖动脚本的标签进行排序",
+  "guide_script_list_update_title": "最后更新",
+  "guide_script_list_update_content": "点击最后更新列标签可以对脚本进行一次检查更新",
+  "guide_script_list_action_title": "操作",
+  "guide_script_list_action_content": "操作列可以进入脚本编辑、控制脚本的运行停止（后台脚本）、设置<Link href=\"https://docs.scriptcat.org/docs/dev/config/\">UserConfig</Link>，操作右侧按钮可以打开高级筛选与切换视图模式",
   "guide_tools_title": "常用工具",
   "guide_tools_content": "工具中提供了备份和开发的工具",
   "guide_tools_backup_title": "备份",

src/locales/zh-TW/translation.json

@@ -384,8 +384,12 @@
   "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_script_list_sort_title": "排序",
+  "guide_script_list_sort_content": "你可以拖曳腳本的標籤進行排序",
+  "guide_script_list_update_title": "最後更新",
+  "guide_script_list_update_content": "點擊最後更新列標籤可以對腳本進行一次檢查更新",
+  "guide_script_list_action_title": "操作",
+  "guide_script_list_action_content": "操作列可以進入腳本編輯、控制腳本的運行停止（後台腳本）、設定<Link href=\"https://docs.scriptcat.org/docs/dev/config/\">UserConfig</Link>，操作右側按鈕可開啟進階篩選與切換視圖模式",
   "guide_tools_title": "常用工具",
   "guide_tools_content": "工具中提供了備份和開發的工具",
   "guide_tools_backup_title": "備份",
@@ -533,5 +537,6 @@
     "script_sync_delete_desc": "腳本 {{scriptName}} 已被刪除",
     "subscribe_update": "訂閱 {{subscribeName}} 已更新",
     "subscribe_update_desc": "新增腳本：{{newScripts}}\n刪除腳本：{{deletedScripts}}"
-  }
+  },
+  "loading": "加載中..."
 }

src/pages/components/layout/SiderGuide.tsx

@@ -5,6 +5,7 @@ import Joyride from "react-joyride";
 import type { Path } from "react-router-dom";
 import { useLocation, useNavigate } from "react-router-dom";
 import CustomTrans from "../CustomTrans";
+import { useAppContext } from "@App/pages/store/AppContext";
 
 const SiderGuide: React.ForwardRefRenderFunction<{ open: () => void }, object> = (_props, ref) => {
   const { t } = useTranslation();
@@ -13,8 +14,12 @@ const SiderGuide: React.ForwardRefRenderFunction<{ open: () => void }, object> =
   const [run, setRun] = useState(false);
   const navigate = useNavigate();
   const location = useLocation();
+  const { setGuideMode } = useAppContext();
   useImperativeHandle(ref, () => ({
-    open: () => setRun(true),
+    open: () => {
+      setRun(true);
+      setGuideMode(true);
+    },
   }));
   useEffect(() => {
     // 首次使用时，打开引导
@@ -45,6 +50,9 @@ const SiderGuide: React.ForwardRefRenderFunction<{ open: () => void }, object> =
       title: t("guide_script_list_title"),
       placement: "auto",
     },
+  ];
+
+  steps.push(
     {
       content: t("guide_script_list_enable_content"),
       target: ".script-enable",
@@ -58,8 +66,21 @@ const SiderGuide: React.ForwardRefRenderFunction<{ open: () => void }, object> =
     {
       target: ".script-sort",
       title: t("guide_script_list_sort_title"),
-      content: <CustomTrans i18nKey="guide_script_list_sort_content" />,
+      content: t("guide_script_list_sort_content"),
+    },
+    {
+      target: ".script-updatetime",
+      title: t("guide_script_list_update_title"),
+      content: <CustomTrans i18nKey="guide_script_list_update_content" />,
     },
+    {
+      target: ".script-action",
+      title: t("guide_script_list_action_title"),
+      content: <CustomTrans i18nKey="guide_script_list_action_content" />,
+    }
+  );
+
+  steps.push(
     {
       target: ".menu-tools",
       title: t("guide_tools_title"),
@@ -81,8 +102,8 @@ const SiderGuide: React.ForwardRefRenderFunction<{ open: () => void }, object> =
       target: ".setting .sync",
       title: t("guide_setting_sync_title"),
       content: t("guide_setting_sync_content"),
-    },
-  ];
+    }
+  );
 
   const gotoNavigate = (go: Partial<Path>) => {
     if (go.pathname !== location.pathname) {
@@ -101,15 +122,16 @@ const SiderGuide: React.ForwardRefRenderFunction<{ open: () => void }, object> =
     <Joyride
       callback={(data) => {
         if (data.action === "stop" || data.action === "close" || data.status === "finished") {
+          setGuideMode(false);
           setRun(false);
           setStepIndex(0);
           gotoNavigate(initRoute);
         } else if (data.action === "next" && data.lifecycle === "complete") {
           switch (data.index) {
-            case 5:
+            case 7:
               gotoNavigate({ pathname: "/tools" });
               break;
-            case 7:
+            case 9:
               gotoNavigate({ pathname: "/setting" });
               break;
             default: