💄 给快捷键分组界面标题增加图标

Author: Littlefean

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

@@ -2,14 +2,31 @@
  * 专门给各种快捷键分组
  */
 
+import {
+  AppWindow,
+  Brush,
+  Fullscreen,
+  Keyboard,
+  MousePointer,
+  Move,
+  Network,
+  PanelsTopLeft,
+  SendToBack,
+  Spline,
+  SquareDashed,
+  SquareMenu,
+} from "lucide-react";
+
 type ShortcutKeysGroup = {
   title: string;
+  icon: React.ReactNode;
   keys: string[];
 };
 
 export const shortcutKeysGroups: ShortcutKeysGroup[] = [
   {
     title: "basic",
+    icon: <Keyboard />,
     keys: [
       "undo",
       "redo",
@@ -23,6 +40,7 @@ export const shortcutKeysGroups: ShortcutKeysGroup[] = [
   },
   {
     title: "camera",
+    icon: <Fullscreen />,
     keys: [
       "resetView",
       "resetCameraScale",
@@ -34,10 +52,12 @@ export const shortcutKeysGroups: ShortcutKeysGroup[] = [
   },
   {
     title: "app",
+    icon: <AppWindow />,
     keys: ["switchDebugShow", "exitSoftware", "checkoutProtectPrivacy", "reload"],
   },
   {
     title: "ui",
+    icon: <PanelsTopLeft />,
     keys: [
       "checkoutClassroomMode",
       "checkoutWindowOpacityMode",
@@ -52,10 +72,12 @@ export const shortcutKeysGroups: ShortcutKeysGroup[] = [
   },
   {
     title: "draw",
+    icon: <Brush />,
     keys: ["selectEntityByPenStroke", "penStrokeWidthIncrease", "penStrokeWidthDecrease"],
   },
   {
     title: "moveEntity",
+    icon: <Move />,
     keys: [
       "moveUpSelectedEntities",
       "moveDownSelectedEntities",
@@ -69,10 +91,12 @@ export const shortcutKeysGroups: ShortcutKeysGroup[] = [
   },
   {
     title: "generateTextNodeInTree",
+    icon: <Network className="-rotate-90" />,
     keys: ["generateNodeTreeWithDeepMode", "generateNodeTreeWithBroadMode", "generateNodeGraph"],
   },
   {
     title: "generateTextNodeRoundedSelectedNode",
+    icon: <SendToBack />,
     keys: [
       "createTextNodeFromSelectedTop",
       "createTextNodeFromSelectedDown",
@@ -82,14 +106,17 @@ export const shortcutKeysGroups: ShortcutKeysGroup[] = [
   },
   {
     title: "createTextNode",
+    icon: <SquareMenu />,
     keys: ["createTextNodeFromCameraLocation", "createTextNodeFromMouseLocation"],
   },
   {
     title: "section",
+    icon: <SquareDashed />,
     keys: ["folderSection", "packEntityToSection", "unpackEntityFromSection", "textNodeToSection"],
   },
   {
     title: "leftMouseModeCheckout",
+    icon: <MousePointer />,
     keys: [
       "checkoutLeftMouseToSelectAndMove",
       "checkoutLeftMouseToDrawing",
@@ -99,6 +126,7 @@ export const shortcutKeysGroups: ShortcutKeysGroup[] = [
   },
   {
     title: "edge",
+    icon: <Spline />,
     keys: ["reverseEdges", "reverseSelectedNodeEdge"],
   },
 ];

app/src/locales/zh_CN.yml

@@ -721,6 +721,63 @@ keys:
   wheelup: 滚轮向上
   wheeldown: 滚轮向下
 
+keyBindsGroup:
+  otherKeys:
+    title: 未分类的快捷键
+    description: |
+      未分类的快捷键，
+      此处若发现无翻译的无效快捷键项，可能是由于版本升级而未清理旧快捷键导致出现的残留
+      可手动清理 keybinds.json 文件中的对应项
+  basic:
+    title: 基础快捷键
+    description: |
+      基本的快捷键，用于常用的功能
+  camera:
+    title: 摄像机控制
+    description: |
+      用于控制摄像机移动、缩放
+  app:
+    title: 应用控制
+    description: |
+      用于控制应用的一些功能
+  ui:
+    title: UI控制
+    description: |
+      用于控制UI的一些功能
+  draw:
+    title: 涂鸦
+    description: |
+      涂鸦相关功能
+  moveEntity:
+    title: 移动实体
+    description: |
+      用于移动实体的一些功能
+  generateTextNodeInTree:
+    title: 生长节点
+    description: |
+      通过键盘生长节点（Xmind用户习惯）
+  generateTextNodeRoundedSelectedNode:
+    title: 在选中节点周围生成节点
+    description: |
+      按下后，在选中节点周围生成节点
+  createTextNode:
+    title: 创建文本节点
+    description: |
+      按下后，在当前位置创建文本节点
+  section:
+    title: Section框
+    description: |
+      Section框相关功能
+  leftMouseModeCheckout:
+    title: 左键模式切换
+    description: |
+      关于左键模式的切换
+  edge:
+    title: 连线相关
+    description: |
+      关于连线的一些功能
+  
+
 keyBinds:
   title: 快捷键绑定
   test:

app/src/pages/settings/keybinds.tsx

@@ -1,4 +1,4 @@
-import { Keyboard } from "lucide-react";
+import { FileQuestion, Keyboard } from "lucide-react";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import KeyBind from "../../components/KeyBind";
@@ -28,13 +28,19 @@ export default function KeyBindsPage() {
   };
 
   const { t } = useTranslation("keyBinds");
+  const t2 = useTranslation("keyBindsGroup");
 
   return (
     <>
       {shortcutKeysGroups.map((group, i) => {
         console.log(group);
         return (
-          <FieldGroup title={t(group.title)} key={i}>
+          <FieldGroup
+            icon={group.icon}
+            title={t2.t(`${group.title}.title`)}
+            description={t2.t(`${group.title}.description`)}
+            key={i}
+          >
             {group.keys.map((id) => (
               <Field
                 key={id}
@@ -54,7 +60,7 @@ export default function KeyBindsPage() {
           </FieldGroup>
         );
       })}
-      <FieldGroup title={t("otherKeys")} description={"未分组的快捷键"}>
+      <FieldGroup title={t2.t(`otherKeys.title`)} description={t2.t(`otherKeys.description`)} icon={<FileQuestion />}>
         {getUnGroupedKeys()
           .map(([id, bind]) => (
             <Field
@@ -79,30 +85,6 @@ export default function KeyBindsPage() {
             return a.key.localeCompare(b.key); // 正常比较
           })}
       </FieldGroup>
-      {/* <h1>{t("title")}</h1>
-      {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); // 正常比较
-        })} */}
     </>
   );
 }