✨ 添加自定义特效开关页面

Author: zty012

src/core/render/canvas2d/renderer.tsx

@@ -96,7 +96,6 @@ export namespace Renderer {
   let isShowBackgroundDots = false;
   let isShowBackgroundCartesian = false;
   export let isAlwaysShowDetails = false;
-  let isRenderEffect = true;
   export let protectingPrivacy = false;
   let isRenderCenterPointer = true;
 
@@ -120,7 +119,6 @@ export namespace Renderer {
       "alwaysShowDetails",
       (value) => (isAlwaysShowDetails = value),
     );
-    Settings.watch("renderEffect", (value) => (isRenderEffect = value));
     Settings.watch("protectingPrivacy", (value) => (protectingPrivacy = value));
     Settings.watch(
       "isRenderCenterPointer",
@@ -631,9 +629,6 @@ export namespace Renderer {
 
   /** 渲染所有特效 */
   function renderEffects() {
-    if (!isRenderEffect) {
-      return;
-    }
     Stage.effectMachine.renderTick();
   }
   function renderBackground() {

src/core/service/Settings.tsx

@@ -31,7 +31,7 @@ export namespace Settings {
     cameraCycleSpaceSizeY: number;
     // 性能相关
     historySize: number; // 暂无
-    renderEffect: boolean;
+    effectsPerferences: Record<string, boolean>;
     isEnableEntityCollision: boolean;
     // 自动化相关
     autoNamerTemplate: string;
@@ -89,7 +89,7 @@ export namespace Settings {
     cameraCycleSpaceSizeY: 1000,
     // 性能相关
     historySize: 20,
-    renderEffect: true,
+    effectsPerferences: {},
     isEnableEntityCollision: false,
     // 自动相关
     autoNamerTemplate: "...",
@@ -129,6 +129,7 @@ export namespace Settings {
 
   export async function init() {
     store = await createStore("settings.json");
+    console.log("settings init");
   }
 
   export async function get<K extends keyof Settings>(

src/core/service/effectEngine/effectMachine.tsx

@@ -1,3 +1,4 @@
+import { Settings } from "../Settings";
 import { EffectObject } from "./effectObject";
 
 /**
@@ -7,7 +8,15 @@ import { EffectObject } from "./effectObject";
  * 如果有多页签多页面，则每个页面都有自己的唯一特效机器。
  */
 export class EffectMachine {
-  private constructor() {}
+  private effectsPerferences: Record<string, boolean> = {};
+
+  private constructor() {
+    setTimeout(() => {
+      Settings.watch("effectsPerferences", (value) => {
+        this.effectsPerferences = value;
+      });
+    }, 10);
+  }
 
   static default(): EffectMachine {
     return new EffectMachine();
@@ -16,6 +25,9 @@ export class EffectMachine {
   private effects: EffectObject[] = [];
 
   public addEffect(effect: EffectObject) {
+    if (!(this.effectsPerferences[effect.constructor.name] ?? true)) {
+      return;
+    }
     this.effects.push(effect);
   }
 
@@ -24,7 +36,11 @@ export class EffectMachine {
   }
 
   public addEffects(effects: EffectObject[]) {
-    this.effects.push(...effects);
+    this.effects.push(
+      ...effects.filter(
+        (effect) => this.effectsPerferences[effect.constructor.name] ?? true,
+      ),
+    );
   }
 
   /**

src/locales/zh-CN.yml

@@ -72,8 +72,10 @@ settings:
     visual: 显示
     physical: 物理
     performance: 性能
+    effects: 特效
     automation: 自动化
     control: 控制
+    keybinds: 快捷键
     ai: AI
     github: GitHub
     sounds: 声音

src/main.tsx

@@ -9,6 +9,7 @@ import { Color } from "./core/dataStruct/Color";
 import { Vector } from "./core/dataStruct/Vector";
 import { EdgeRenderer } from "./core/render/canvas2d/entityRenderer/edge/EdgeRenderer";
 import { Renderer } from "./core/render/canvas2d/renderer";
+import { InputElement } from "./core/render/domElement/inputElement";
 import { PromptManager } from "./core/service/ai/PromptManager";
 import { ColorManager } from "./core/service/ColorManager";
 import {
@@ -40,7 +41,6 @@ import { exists } from "./utils/fs";
 import { exit, openDevtools, writeStderr, writeStdout } from "./utils/otherApi";
 import { getCurrentWindow, isDesktop, isWeb } from "./utils/platform";
 import { Popup } from "./utils/popup";
-import { InputElement } from "./core/render/domElement/inputElement";
 
 const router = createMemoryRouter(routes);
 const Routes = () => <RouterProvider router={router} />;

src/pages/settings/_languages.tsx

@@ -1,13 +1,15 @@
 import {
   Bot,
   Brain,
+  Command,
   Eye,
   Info,
   Keyboard,
   Plug,
   Settings,
   Sparkles,
   Speaker,
+  Zap,
 } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { NavLink, Outlet } from "react-router-dom";
@@ -33,9 +35,13 @@ export default function SettingsLayout() {
             {t("tabs.visual")}
           </NavLink>
           <NavLink to="/settings/performance">
-            <Sparkles />
+            <Zap />
             {t("tabs.performance")}
           </NavLink>
+          <NavLink to="/settings/effects">
+            <Sparkles />
+            {t("tabs.effects")}
+          </NavLink>
           <NavLink to="/settings/automation">
             <Bot />
             {t("tabs.automation")}
@@ -44,6 +50,10 @@ export default function SettingsLayout() {
             <Keyboard />
             {t("tabs.control")}
           </NavLink>
+          <NavLink to="/settings/keybinds">
+            <Command />
+            {t("tabs.keybinds")}
+          </NavLink>
           <NavLink to="/settings/ai">
             <Brain />
             {t("tabs.ai")}
@@ -61,7 +71,7 @@ export default function SettingsLayout() {
             {t("tabs.plugins")}
           </NavLink>
         </div>
-        <div className="container mx-auto flex-1 overflow-auto">
+        <div className="mx-auto w-[1024px] overflow-auto">
           <Outlet />
         </div>
       </div>

src/pages/settings/_layout.tsx

@@ -0,0 +1,52 @@
+import { Stars } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import Switch from "../../components/ui/Switch";
+import { Settings } from "../../core/service/Settings";
+import { Field } from "./_field";
+
+export default function EffectsPage() {
+  const { t } = useTranslation("effects");
+  const [effectsPerferences, setEffectsPerferences] = useState<
+    Record<string, boolean>
+  >({});
+
+  useEffect(() => {
+    console.log("effectsPerferences", effectsPerferences);
+    Settings.get("effectsPerferences").then((preferences) => {
+      Settings.set("effectsPerferences", {
+        ...preferences,
+        ...effectsPerferences,
+      });
+    });
+  }, [effectsPerferences]);
+
+  return Object.keys(
+    import.meta.glob("../../core/service/effectEngine/concrete/*.tsx", {
+      eager: true,
+    }),
+  )
+    .map((path) =>
+      path
+        .replace("../../core/service/effectEngine/concrete/", "")
+        .replace(".tsx", ""),
+    )
+    .map((effectName) => (
+      <Field
+        key={effectName}
+        icon={<Stars />}
+        title={t(`${effectName}.title`)}
+        description={t(`${effectName}.description`)}
+      >
+        <Switch
+          value={effectsPerferences[effectName] ?? true}
+          onChange={(value) => {
+            setEffectsPerferences((prev) => ({
+              ...prev,
+              [effectName]: value,
+            }));
+          }}
+        />
+      </Field>
+    ));
+}

src/pages/settings/effects.tsx

@@ -0,0 +1,46 @@
+import { Keyboard } from "lucide-react";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import KeyBind from "../../components/ui/KeyBind";
+import { KeyBinds } from "../../core/service/KeyBinds";
+import { Field } from "./_field";
+
+export default function KeyBindsPage() {
+  const [keyBinds, setKeyBinds] = React.useState<
+    [id: string, { key: string; modifiers: KeyBinds.KeyModifiers }][]
+  >([]);
+
+  React.useEffect(() => {
+    KeyBinds.entries().then((entries) => {
+      setKeyBinds(entries);
+    });
+  }, []);
+
+  const { t } = useTranslation("keyBinds");
+
+  return keyBinds
+    .map(([id, bind]) => (
+      <Field
+        key={id}
+        icon={<Keyboard />}
+        title={t(`${id}.title`, { defaultValue: id })}
+        description={t(`${id}.description`, { defaultValue: "" })}
+      >
+        <KeyBind
+          value={bind}
+          onChange={(value) => {
+            KeyBinds.set(id, value.key, value.modifiers);
+            setKeyBinds((prev) =>
+              prev.map((item) => (item[0] === id ? [item[0], value] : item)),
+            );
+          }}
+        />
+      </Field>
+    ))
+    .sort((a, b) => {
+      if (a.key === null && b.key === null) return 0; // 两者均为 null，相等
+      if (a.key === null) return 1; // a.key 为 null，把它排到后面
+      if (b.key === null) return -1; // b.key 为 null，把它排到后面
+      return a.key.localeCompare(b.key); // 正常比较
+    });
+}

src/pages/settings/keybinds.tsx

@@ -1,14 +1,9 @@
-import { Sparkles, Undo, Ungroup } from "lucide-react";
+import { Undo, Ungroup } from "lucide-react";
 import { SettingField } from "./_field";
 
 export default function Performance() {
   return (
     <>
-      <SettingField
-        icon={<Sparkles />}
-        settingKey="renderEffect"
-        type="switch"
-      />
       <SettingField
         icon={<Undo />}
         settingKey="historySize"