chore: 优化代码写法

Author: Littlefean

app/src/core/extension/Extension.tsx

@@ -167,20 +167,8 @@ export class Extension extends Tab {
       const [installed, setInstalled] = useState(false);
       const [disabledExtensions, setDisabledExtensions] = Settings.use("disabledExtensions");
       const disabled = disabledExtensions.includes(self.metadata.extension?.id || "");
-      // 响应式快捷键列表：订阅 KeyBindsUI 的变化，安装插件后自动刷新
-      const [extensionKeyBinds, setExtensionKeyBinds] = useState(() => {
-        const prefix = `ext:${self.metadata.extension?.id || ""}:`;
-        return KeyBindsUI.getAllUIKeyBinds().filter((kb) => kb.id.startsWith(prefix));
-      });
-
-      useEffect(() => {
-        const extensionId = self.metadata.extension?.id || "";
-        const prefix = `ext:${extensionId}:`;
-        const unsubscribe = KeyBindsUI.onKeyBindListChange((allBinds) => {
-          setExtensionKeyBinds(allBinds.filter((kb) => kb.id.startsWith(prefix)));
-        });
-        return unsubscribe;
-      }, []);
+      // 响应式快捷键列表：安装插件后自动刷新
+      const extensionKeyBinds = KeyBindsUI.use((kb) => kb.id.startsWith(`ext:${self.metadata.extension?.id || ""}:`));
 
       useEffect(() => {
         (async () => {
@@ -219,11 +207,12 @@ export class Extension extends Tab {
                     variant="outline"
                     onClick={async () => {
                       if (await Dialog.confirm("确认卸载", "将彻底删除此扩展，无法恢复。请确认是否继续。")) {
-                        ExtensionKeyBindManager.unregisterAll(self.metadata.extension?.id || "");
-                        await self.fs.remove(
-                          URI.file(await join(await appDataDir(), "extensions", self.metadata.extension?.id || "")),
-                        );
-                        setDisabledExtensions(disabledExtensions.filter((id) => id !== self.metadata.extension?.id));
+                        const extId = self.metadata.extension?.id || "";
+                        ExtensionKeyBindManager.unregisterAll(extId);
+                        // 终止 Worker 并清除缓存，使重新安装时能创建新 Runtime
+                        ExtensionManager.unload(extId);
+                        await self.fs.remove(URI.file(await join(await appDataDir(), "extensions", extId)));
+                        setDisabledExtensions(disabledExtensions.filter((id) => id !== extId));
                         setInstalled(false);
                         toast.success("扩展已卸载");
                       }
@@ -281,7 +270,10 @@ export class Extension extends Tab {
                       await writeFile(await join(base, self.iconFileName), self.iconRawData);
                     }
                     // 安装完成后立即运行插件，使其快捷键等功能即时生效，无需重载
-                    await ExtensionManager.getRuntime(self.metadata.extension?.id || "unknown");
+                    // 先 unload 清除可能残留的旧缓存，再创建新 Runtime
+                    const extId = self.metadata.extension?.id || "unknown";
+                    ExtensionManager.unload(extId);
+                    await ExtensionManager.getRuntime(extId);
                     setInstalled(true);
                     toast.success("扩展已安装");
                   }}

app/src/core/extension/ExtensionManager.tsx

@@ -44,6 +44,18 @@ export namespace ExtensionManager {
     return runtime;
   }
 
+  /**
+   * 卸载单个扩展：终止 Worker 并清除缓存，使下次 getRuntime 能重新创建
+   */
+  export function unload(name: string) {
+    const runtime = runtimes.get(name);
+    if (runtime) {
+      runtime.terminate();
+      runtimes.delete(name);
+    }
+    extensions.delete(name);
+  }
+
   /**
    * 创建并运行所有扩展
    */

app/src/core/service/controlService/shortcutKeysEngine/KeyBindsUI.tsx

@@ -12,6 +12,7 @@ import { createStore } from "@/utils/store";
 import { Queue } from "@graphif/data-structures";
 import { proxy } from "comlink";
 import type { ForwardRefExoticComponent, RefAttributes } from "react";
+import { useEffect, useState } from "react";
 import type { LucideProps } from "lucide-react";
 import { allKeyBinds, type KeyBindWhen } from "./shortcutKeysRegister";
 
@@ -68,6 +69,8 @@ export namespace KeyBindsUI {
    */
   export function onKeyBindListChange(callback: (keyBinds: UIKeyBind[]) => void): () => void {
     keyBindListChangeListeners.add(callback);
+    // 立即以当前状态回调一次，确保订阅者拿到最新值（BehaviorSubject 语义）
+    callback([...allUIKeyBinds]);
     return () => {
       keyBindListChangeListeners.delete(callback);
     };
@@ -82,6 +85,35 @@ export namespace KeyBindsUI {
     });
   }
 
+  /**
+   * React Hook：订阅快捷键列表，返回经过 filter 过滤后的响应式列表。
+   * 列表发生变化时组件自动重渲染。
+   *
+   * @param filter 可选过滤函数，默认返回全部快捷键
+   * @example
+   * // 获取所有快捷键
+   * const binds = KeyBindsUI.use();
+   * // 只获取某个插件的快捷键
+   * const binds = KeyBindsUI.use((kb) => kb.id.startsWith("ext:my-ext:"));
+   */
+  export function use(filter?: (kb: UIKeyBind) => boolean): UIKeyBind[] {
+    // 初始值同步计算，避免首次渲染闪烁
+    const [binds, setBinds] = useState<UIKeyBind[]>(() => {
+      const all = getAllUIKeyBinds();
+      return filter ? all.filter(filter) : all;
+    });
+
+    useEffect(() => {
+      // 订阅后续变化；onKeyBindListChange 也会立即回调一次同步当前值，
+      // 确保 useEffect 执行时若列表已更新也能正确反映
+      return onKeyBindListChange((all) => {
+        setBinds(filter ? all.filter(filter) : all);
+      });
+    }, []); // filter 是调用方传入的内联箭头函数，不应放入依赖数组
+
+    return binds;
+  }
+
   // 快捷键变化监听器
   const keyBindChangeListeners = new Map<string, Set<(keyBind: UIKeyBind) => void>>();