From ce43279fa72d3820916313a0cbe47b08a877c8b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E4=B8=80=E4=B9=8B?= <yz@ggnb.top>
Date: Wed, 22 Apr 2026 11:23:01 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D=20PR=20#1?=
 =?UTF-8?q?331=20Copilot=20review=20=E5=9C=A8=20main=20=E5=88=86=E6=94=AF?=
 =?UTF-8?q?=E5=90=8C=E6=A0=B7=E5=AD=98=E5=9C=A8=E7=9A=84=204=20=E5=A4=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 已自行管理生命周期）
---
 src/app/service/content/utils.test.ts         |  4 +-
 src/app/service/content/utils.ts              | 26 ++++++---
 src/pages/components/CodeEditor/index.tsx     | 11 +++-
 .../options/routes/script/ScriptEditor.tsx    | 55 +++++++++++++------
 src/pkg/utils/monaco-editor/index.ts          |  9 ++-
 5 files changed, 75 insertions(+), 30 deletions(-)

diff --git a/src/app/service/content/utils.test.ts b/src/app/service/content/utils.test.ts
index c2a7c5a0f..c9b7e64da 100644
--- a/src/app/service/content/utils.test.ts
+++ b/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("应该允许添加多个样式表", () => {
diff --git a/src/app/service/content/utils.ts b/src/app/service/content/utils.ts
index c4f995d91..47dce51c3 100644
--- a/src/app/service/content/utils.ts
+++ b/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 {
diff --git a/src/pages/components/CodeEditor/index.tsx b/src/pages/components/CodeEditor/index.tsx
index 6cde1e74d..894ad2437 100644
--- a/src/pages/components/CodeEditor/index.tsx
+++ b/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]);
 
diff --git a/src/pages/options/routes/script/ScriptEditor.tsx b/src/pages/options/routes/script/ScriptEditor.tsx
index 8fc3322d8..51a511745 100644
--- a/src/pages/options/routes/script/ScriptEditor.tsx
+++ b/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,6 +53,17 @@ 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;
@@ -60,24 +71,32 @@ const Editor: React.FC<{
     // @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 />;
diff --git a/src/pkg/utils/monaco-editor/index.ts b/src/pkg/utils/monaco-editor/index.ts
index 6c91de174..c1505e0b6 100644
--- a/src/pkg/utils/monaco-editor/index.ts
+++ b/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: {

From 172130c2a094e7cb2201f867d7bdc2f5e926efbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E4=B8=80=E4=B9=8B?= <yz@ggnb.top>
Date: Wed, 22 Apr 2026 11:34:56 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E2=8F=AA=20=E6=92=A4=E9=94=80=20addStyleSh?=
 =?UTF-8?q?eet=20=E7=9A=84=E7=89=B9=E6=80=A7=E6=A3=80=E6=B5=8B/=E5=9B=9E?=
 =?UTF-8?q?=E9=80=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

经讨论后认为现代浏览器（Chrome 73+ / Firefox 101+）都已支持
Constructable Stylesheets，main 分支用户基础已跨过临界点；
保留与原实现一致更利于代码维护。
---
 src/app/service/content/utils.test.ts |  4 ++--
 src/app/service/content/utils.ts      | 26 +++++++-------------------
 2 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/src/app/service/content/utils.test.ts b/src/app/service/content/utils.test.ts
index c9b7e64da..c2a7c5a0f 100644
--- a/src/app/service/content/utils.test.ts
+++ b/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 as CSSStyleSheet)).toBe(true);
+      expect(adopted.includes(sheet)).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 as CSSStyleSheet)).toBe(true);
+      expect(adopted.includes(sheet)).toBe(true);
     });
 
     it("应该允许添加多个样式表", () => {
diff --git a/src/app/service/content/utils.ts b/src/app/service/content/utils.ts
index 47dce51c3..c4f995d91 100644
--- a/src/app/service/content/utils.ts
+++ b/src/app/service/content/utils.ts
@@ -222,26 +222,14 @@ export function addStyle(css: string): HTMLStyleElement {
   return document.documentElement.appendChild(dom);
 }
 
-export function addStyleSheet(css: string): CSSStyleSheet | HTMLStyleElement {
+export function addStyleSheet(css: string): CSSStyleSheet {
   // see https://unarist.hatenablog.com/entry/2020/07/06/012540
-  // 旧浏览器（如 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);
+  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;
 }
 
 export function metadataBlankOrTrue(metadata: SCMetadata, key: string): boolean {