💄 优化控制设置界面，增加分组分类

Author: Littlefean

app/src/pages/settings/_field.tsx

@@ -112,6 +112,7 @@ const fieldColors = {
   blue: "bg-blue-500/20 hover:bg-blue-500/25",
   purple: "bg-purple-500/20 hover:bg-purple-500/25",
 };
+
 export function Field({
   title = "",
   description = "",
@@ -153,3 +154,36 @@ export function Field({
     </div>
   );
 }
+
+/**
+ * 用于给各种设置项提供一个分类组
+ * @param param0
+ * @returns
+ */
+export function FieldGroup({
+  title = "",
+  icon = <></>,
+  children = <></>,
+  className = "",
+  description = "",
+}: {
+  title?: string;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+  description?: string;
+}) {
+  return (
+    <div className={cn("flex w-full flex-col gap-2", className)}>
+      {/* 第一行，标题行 */}
+      <div className="text-panel-text my-2 flex items-center gap-2 pl-4 pt-4 text-lg underline">
+        <span>{icon}</span>
+        <span className="text-settings-text">{title}</span>
+      </div>
+      {/* 可能的描述行 */}
+      {description && <div className="text-panel-details-text pl-4 text-xs">{description}</div>}
+      {/* 内容 */}
+      <div className="flex w-full flex-col gap-2 pl-6 text-sm">{children}</div>
+    </div>
+  );
+}

app/src/pages/settings/_layout.tsx

@@ -18,10 +18,19 @@ export default function SettingsLayout() {
             <Info />
             {t("tabs.about")}
           </NavLink>
+          {/* 越是用户可能频繁更改的，越靠上。（除了“关于”） */}
           <NavLink to="/settings/visual">
             <Eye />
             {t("tabs.visual")}
           </NavLink>
+          <NavLink to="/settings/control">
+            <Keyboard />
+            {t("tabs.control")}
+          </NavLink>
+          <NavLink to="/settings/keybinds">
+            <Command />
+            {t("tabs.keybinds")}
+          </NavLink>
           <NavLink to="/settings/performance">
             <Zap />
             {t("tabs.performance")}
@@ -34,14 +43,6 @@ export default function SettingsLayout() {
             <Bot />
             {t("tabs.automation")}
           </NavLink>
-          <NavLink to="/settings/control">
-            <Keyboard />
-            {t("tabs.control")}
-          </NavLink>
-          <NavLink to="/settings/keybinds">
-            <Command />
-            {t("tabs.keybinds")}
-          </NavLink>
           <NavLink to="/settings/ai">
             <Brain />
             {t("tabs.ai")}

app/src/pages/settings/control.tsx

@@ -1,69 +1,47 @@
 import {
   AlignStartVertical,
+  Fullscreen,
+  GitCompareArrows,
   Keyboard,
   ListCheck,
   ListEnd,
+  Mouse,
   MousePointerClick,
   Move,
   RotateCw,
   ScanEye,
   Skull,
+  TextSelect,
 } from "lucide-react";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import KeyBind from "../../components/KeyBind";
-import { KeyBinds } from "../../core/service/controlService/KeyBinds";
-import { Field, SettingField } from "./_field";
+import { FieldGroup, SettingField } from "./_field";
 
 export default function Control() {
-  const [keyBinds, setKeyBinds] = React.useState<[id: string, { key: string; modifiers: KeyBinds.KeyModifiers }][]>([]);
+  return (
+    <>
+      <FieldGroup title="Mouse 鼠标设定" icon={<Mouse />}>
+        <SettingField icon={<MousePointerClick />} settingKey="mouseRightDragBackground" type="select" />
+      </FieldGroup>
 
-  React.useEffect(() => {
-    KeyBinds.entries().then((entries) => {
-      setKeyBinds(entries);
-    });
-  }, []);
+      <FieldGroup title="TextNode 文本节点" icon={<TextSelect />}>
+        <SettingField icon={<ListEnd />} settingKey="textNodeContentLineBreak" type="select" />
+        <SettingField icon={<ListCheck />} settingKey="textNodeExitEditMode" type="select" />
+        <SettingField icon={<AlignStartVertical />} settingKey="enableDragAutoAlign" type="switch" />
+      </FieldGroup>
 
-  const { t } = useTranslation("keyBinds");
+      <FieldGroup title="Edge 连线" icon={<GitCompareArrows />}>
+        <SettingField icon={<RotateCw />} settingKey="allowAddCycleEdge" type="switch" />
+      </FieldGroup>
 
-  return (
-    <>
-      <SettingField icon={<MousePointerClick />} settingKey="mouseRightDragBackground" type="select" />
-      <SettingField icon={<ListEnd />} settingKey="textNodeContentLineBreak" type="select" />
-      <SettingField icon={<ListCheck />} settingKey="textNodeExitEditMode" type="select" />
-      <SettingField icon={<AlignStartVertical />} settingKey="enableDragAutoAlign" type="switch" />
-      <SettingField icon={<ScanEye />} settingKey="scaleExponent" type="slider" min={0} max={1} step={0.01} />
-      <SettingField icon={<ScanEye />} settingKey="scaleCameraByMouseLocation" type="switch" />
-      <SettingField icon={<Keyboard />} settingKey="allowMoveCameraByWSAD" type="switch" />
-      <SettingField icon={<Keyboard />} settingKey="cameraKeyboardMoveReverse" type="switch" />
-      <SettingField icon={<RotateCw />} settingKey="allowAddCycleEdge" type="switch" />
-      <SettingField icon={<Move />} settingKey="moveAmplitude" type="slider" min={0} max={10} step={0.1} />
-      <SettingField icon={<Move />} settingKey="moveFriction" type="slider" min={0} max={1} step={0.01} />
-      <SettingField icon={<Skull />} settingKey="gamepadDeadzone" type="slider" min={0} max={1} step={0.01} />
-      <Field icon={<Keyboard />} title={t("title")} color="blue" />
-      {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); // 正常比较
-        })}
+      <FieldGroup title="Camera 摄像机/视野/相关" icon={<Fullscreen />}>
+        <SettingField icon={<ScanEye />} settingKey="scaleExponent" type="slider" min={0} max={1} step={0.01} />
+        <SettingField icon={<ScanEye />} settingKey="scaleCameraByMouseLocation" type="switch" />
+        <SettingField icon={<Keyboard />} settingKey="allowMoveCameraByWSAD" type="switch" />
+        <SettingField icon={<Keyboard />} settingKey="cameraKeyboardMoveReverse" type="switch" />
+        <SettingField icon={<Move />} settingKey="moveAmplitude" type="slider" min={0} max={10} step={0.1} />
+        <SettingField icon={<Move />} settingKey="moveFriction" type="slider" min={0} max={1} step={0.01} />
+        <SettingField icon={<Skull />} settingKey="gamepadDeadzone" type="slider" min={0} max={1} step={0.01} />
+      </FieldGroup>
+      {/* 已经有快捷键专栏了，这里不再显示快捷键相关 */}
     </>
   );
 }