🐛 修复 PR #1331 Copilot review 在 main 分支同样存在的 4 处问题

PR #1331 的 Copilot review 指出了 5 个问题，其中 4 个 main 分支也是相同
实现，应一并修复（剩余 1 个为 MV2 独有的漏分号）：

- src/app/service/content/utils.ts: addStyleSheet 增加特性检测，
  无 Constructable Stylesheets / adoptedStyleSheets 时回退到 <style> 注入；
  同步调整 utils.test.ts 中的类型断言
- src/pkg/utils/monaco-editor/index.ts: declare-global quickfix 标题改用
  multiLang，补全 7 种语言的 declareGlobal key（之前硬编码中文，非中文
  用户会看到混合语言）
- src/pages/components/CodeEditor/index.tsx: diff editor 的两个 createModel
  在 cleanup 里显式 dispose，避免反复挂载导致 standalone model 泄漏
- src/pages/options/routes/script/ScriptEditor.tsx: 跟踪 addAction/onKeyUp
  返回的 IDisposable 并清理；用 ref 避免 stale closure；移除对 editor
  实例的二次 dispose（CodeEditor 已自行管理生命周期）

Author: CodFrm

src/app/service/content/utils.test.ts

@@ -458,7 +458,7 @@ describe("utils", () => {
       expect((sheet as any).cssText).toBe(css);
 
       const adopted = (document as any).adoptedStyleSheets as CSSStyleSheet[];
-      expect(adopted.includes(sheet)).toBe(true);
+      expect(adopted.includes(sheet as CSSStyleSheet)).toBe(true);
     });
 
     it("应该在已有样式表的基础上追加新的样式表", () => {
@@ -487,7 +487,7 @@ describe("utils", () => {
       expect((sheet as any).cssText).toBe("");
 
       const adopted = (document as any).adoptedStyleSheets as CSSStyleSheet[];
-      expect(adopted.includes(sheet)).toBe(true);
+      expect(adopted.includes(sheet as CSSStyleSheet)).toBe(true);
     });
 
     it("应该允许添加多个样式表", () => {

src/app/service/content/utils.ts

@@ -222,14 +222,26 @@ export function addStyle(css: string): HTMLStyleElement {
   return document.documentElement.appendChild(dom);
 }
 
-export function addStyleSheet(css: string): CSSStyleSheet {
+export function addStyleSheet(css: string): CSSStyleSheet | HTMLStyleElement {
   // see https://unarist.hatenablog.com/entry/2020/07/06/012540
-  const sheet = new CSSStyleSheet();
-  // it might return as Promise
-  sheet.replaceSync(css);
-  // adoptedStyleSheets is FrozenArray so it has to be re-assigned.
-  document.adoptedStyleSheets = document.adoptedStyleSheets.concat(sheet);
-  return sheet;
+  // 旧浏览器（如 Firefox 100 以下）不支持 Constructable Stylesheets / adoptedStyleSheets，回退到 <style> 注入
+  if (
+    typeof CSSStyleSheet === "function" &&
+    typeof CSSStyleSheet.prototype?.replaceSync === "function" &&
+    Array.isArray(document.adoptedStyleSheets)
+  ) {
+    try {
+      const sheet = new CSSStyleSheet();
+      // it might return as Promise
+      sheet.replaceSync(css);
+      // adoptedStyleSheets is FrozenArray so it has to be re-assigned.
+      document.adoptedStyleSheets = document.adoptedStyleSheets.concat(sheet);
+      return sheet;
+    } catch {
+      // 个别环境下 new CSSStyleSheet() 仍可能抛出，落到 <style> fallback
+    }
+  }
+  return addStyle(css);
 }
 
 export function metadataBlankOrTrue(metadata: SCMetadata, key: string): boolean {

src/pages/components/CodeEditor/index.tsx

@@ -135,6 +135,8 @@ const CodeEditor: React.ForwardRefRenderFunction<{ editor: editor.IStandaloneCod
       largeFileOptimizations: true,
       colorDecorators: true,
     } as const;
+    let originalModel: editor.ITextModel | undefined;
+    let modifiedModel: editor.ITextModel | undefined;
     if (diffCode) {
       edit = editor.createDiffEditor(inlineDiv, {
         hideUnchangedRegions: {
@@ -146,9 +148,12 @@ const CodeEditor: React.ForwardRefRenderFunction<{ editor: editor.IStandaloneCod
         diffWordWrap: "off",
         ...commonEditorOptions,
       });
+      // standalone model 不会随 editor.dispose 自动清理，需手动跟踪并在 cleanup 释放
+      originalModel = editor.createModel(diffCode, "javascript");
+      modifiedModel = editor.createModel(code, "javascript");
       edit.setModel({
-        original: editor.createModel(diffCode, "javascript"),
-        modified: editor.createModel(code, "javascript"),
+        original: originalModel,
+        modified: modifiedModel,
       });
     } else {
       edit = editor.create(inlineDiv, {
@@ -165,6 +170,8 @@ const CodeEditor: React.ForwardRefRenderFunction<{ editor: editor.IStandaloneCod
       // 目前会出现：Uncaught (in promise) Canceled: Canceled
       // 问题追踪：https://github.com/microsoft/monaco-editor/issues/4702
       edit?.dispose();
+      originalModel?.dispose();
+      modifiedModel?.dispose();
     };
   }, [div, code, diffCode, editable, id]);
 

src/pages/options/routes/script/ScriptEditor.tsx

@@ -1,9 +1,9 @@
 import type { Script } from "@App/app/repo/scripts";
 import { SCRIPT_TYPE_NORMAL, ScriptCodeDAO, ScriptDAO } from "@App/app/repo/scripts";
 import CodeEditor from "@App/pages/components/CodeEditor";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useParams, useSearchParams } from "react-router-dom";
-import type { editor } from "monaco-editor";
+import type { editor, IDisposable } from "monaco-editor";
 import { KeyCode, KeyMod } from "monaco-editor";
 import { Button, Dropdown, Grid, Input, Menu, Message, Modal, Space, Tabs, Tooltip } from "@arco-design/web-react";
 import TabPane from "@arco-design/web-react/es/Tabs/tab-pane";
@@ -53,31 +53,50 @@ const Editor: React.FC<{
     },
     [node]
   );
+  // 用 ref 拿到最新的 hotKeys/onChange/callbackEditor，避免 stale closure
+  // 同时让 effect 仅在 editor 实例变化时重跑（不会因父组件重渲染重复 addAction）
+  const hotKeysRef = useRef(hotKeys);
+  const onChangeRef = useRef(onChange);
+  const callbackEditorRef = useRef(callbackEditor);
+  const scriptRef = useRef(script);
+  hotKeysRef.current = hotKeys;
+  onChangeRef.current = onChange;
+  callbackEditorRef.current = callbackEditor;
+  scriptRef.current = script;
+
   useEffect(() => {
     if (!node || !node.editor) {
       return;
     }
     // @ts-ignore
     if (!node.editor.uuid) {
       // @ts-ignore
-      node.editor.uuid = script.uuid;
+      node.editor.uuid = scriptRef.current.uuid;
     }
-    hotKeys.forEach((item) => {
-      node.editor.addAction({
-        id: item.id,
-        label: item.title,
-        keybindings: [item.hotKey],
-        run(editor) {
-          // @ts-ignore
-          item.action(script, editor);
-        },
-      });
-    });
-    node.editor.onKeyUp(() => {
-      onChange(node.editor.getValue() || "");
+    const disposables: IDisposable[] = [];
+    hotKeysRef.current.forEach((item) => {
+      disposables.push(
+        node.editor.addAction({
+          id: item.id,
+          label: item.title,
+          keybindings: [item.hotKey],
+          run(editor) {
+            // @ts-ignore
+            item.action(scriptRef.current, editor);
+          },
+        })
+      );
     });
-    callbackEditor(node.editor);
-    return node.editor.dispose.bind(node.editor);
+    disposables.push(
+      node.editor.onKeyUp(() => {
+        onChangeRef.current(node.editor.getValue() || "");
+      })
+    );
+    callbackEditorRef.current(node.editor);
+    // editor 实例本身由 CodeEditor 自身负责 dispose，这里仅清理本 effect 注册的 listener/action
+    return () => {
+      disposables.forEach((d) => d.dispose());
+    };
   }, [node?.editor]);
 
   return <CodeEditor key={id} id={id} ref={ref} className={className} code={code} diffCode="" editable />;

src/pkg/utils/monaco-editor/index.ts

@@ -15,6 +15,7 @@ const langs = {
     quickfix: "修复 {0} 问题",
     addEslintDisableNextLine: "添加 eslint-disable-next-line 注释",
     addEslintDisable: "添加 eslint-disable 注释",
+    declareGlobal: "将 '{0}' 声明为全局变量 (/* global */)",
     prompt: {
       name: "脚本名称",
       namespace: "脚本命名空间",
@@ -84,6 +85,7 @@ tracking：该脚本会追踪你的用户信息`.replace(/\n/g, "<br>"),
     quickfix: "Fix {0} Issue",
     addEslintDisableNextLine: "Add eslint-disable-next-line Comment",
     addEslintDisable: "Add eslint-disable Comment",
+    declareGlobal: "Declare '{0}' as a global variable (/* global */)",
     prompt: {
       name: "Script name",
       namespace: "Script namespace",
@@ -146,6 +148,7 @@ tracking：该脚本会追踪你的用户信息`.replace(/\n/g, "<br>"),
     quickfix: "修復 {0} 問題",
     addEslintDisableNextLine: "新增 eslint-disable-next-line 註解",
     addEslintDisable: "新增 eslint-disable 註解",
+    declareGlobal: "將 '{0}' 宣告為全域變數 (/* global */)",
     prompt: {
       name: "腳本名稱",
       namespace: "腳本命名空間",
@@ -208,6 +211,7 @@ tracking：该脚本会追踪你的用户信息`.replace(/\n/g, "<br>"),
     quickfix: "{0} の問題を修正",
     addEslintDisableNextLine: "eslint-disable-next-line コメントを追加",
     addEslintDisable: "eslint-disable コメントを追加",
+    declareGlobal: "'{0}' をグローバル変数として宣言 (/* global */)",
     prompt: {
       name: "スクリプト名",
       namespace: "スクリプトの名前空間",
@@ -270,6 +274,7 @@ tracking：该脚本会追踪你的用户信息`.replace(/\n/g, "<br>"),
     quickfix: "{0}-Problem beheben",
     addEslintDisableNextLine: "eslint-disable-next-line Kommentar hinzufügen",
     addEslintDisable: "eslint-disable Kommentar hinzufügen",
+    declareGlobal: "'{0}' als globale Variable deklarieren (/* global */)",
     prompt: {
       name: "Skriptname",
       namespace: "Skript-Namensraum",
@@ -332,6 +337,7 @@ tracking：该脚本会追踪你的用户信息`.replace(/\n/g, "<br>"),
     quickfix: "Sửa lỗi {0}",
     addEslintDisableNextLine: "Thêm chú thích eslint-disable-next-line",
     addEslintDisable: "Thêm chú thích eslint-disable",
+    declareGlobal: "Khai báo '{0}' là biến toàn cục (/* global */)",
     prompt: {
       name: "Tên script",
       namespace: "Namespace của script",
@@ -394,6 +400,7 @@ tracking：该脚本会追踪你的用户信息`.replace(/\n/g, "<br>"),
     quickfix: "Исправить проблему {0}",
     addEslintDisableNextLine: "Добавить комментарий eslint-disable-next-line",
     addEslintDisable: "Добавить комментарий eslint-disable",
+    declareGlobal: "Объявить '{0}' как глобальную переменную (/* global */)",
     prompt: {
       name: "Имя скрипта",
       namespace: "Пространство имён скрипта",
@@ -587,7 +594,7 @@ export default function registerEditor() {
             }
 
             actions.push(<languages.CodeAction>{
-              title: `将 '${globalName}' 声明为全局变量 (/* global */)`,
+              title: multiLang.declareGlobal.replace("{0}", globalName),
               diagnostics: [val],
               kind: "quickfix",
               edit: {